@font-face { font-family:"Font Awesome 7 Free"; font-style:normal; font-weight:900; font-display:block; src:url("/fa-solid-900.woff2") format("woff2"); }
:root { color-scheme: light; --ink:#18202b; --muted:#6d7480; --line:#e7e9ed; --surface:#fff; --soft:#f5f6f8; --accent:#d85d7f; --accent-2:#5168d8; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:#f7f8fa; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
button,input { font:inherit; }
.page-loader { position:fixed; z-index:1000; inset:0; display:grid; place-content:center; gap:16px; background:rgba(247,249,252,.96); opacity:1; visibility:visible; transition:opacity .38s ease,visibility .38s ease; }
.page-loader.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }
.page-loader-mark { width:42px; height:42px; display:block; margin:auto; color:#1687f8; border:4px solid #d8e9ff; border-top-color:#1687f8; border-right-color:#65b4ff; border-radius:50%; animation:page-loader-spin .85s linear infinite; }
.page-loader-dots { display:flex; justify-content:center; gap:5px; }
.page-loader-dots i { width:5px; height:5px; display:block; background:#1687f8; border-radius:50%; animation:page-loader-dot 1s ease-in-out infinite; }
.page-loader-dots i:nth-child(2) { animation-delay:.14s; }
.page-loader-dots i:nth-child(3) { animation-delay:.28s; }
@keyframes page-loader-spin { to { transform:rotate(1turn); } }
@keyframes page-loader-dot { 0%,80%,100% { opacity:.3; transform:translateY(0); } 40% { opacity:1; transform:translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .page-loader,.page-loader-mark,.page-loader-dots i { animation:none; transition:none; } }
.shell { min-height:100vh; display:grid; grid-template-rows:auto 1fr; }
.topbar { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,5vw,64px); background:rgba(255,255,255,.92); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:760; }
.brand-mark { width:30px; height:30px; display:grid; place-items:center; color:#fff; background:var(--accent); border-radius:8px; font-size:13px; }
.brand-logo { width:34px; height:34px; flex:none; object-fit:contain; }
.security { color:var(--muted); font-size:13px; }
.center { width:min(100% - 32px,460px); margin:auto; padding:48px 0 72px; }
.panel { padding:32px; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 18px 60px rgba(35,43,60,.08); }
h1 { margin:0 0 8px; font-size:26px; letter-spacing:0; }
.lead { margin:0 0 26px; color:var(--muted); line-height:1.65; }
.availability { margin:14px 0 0; color:var(--muted); font-size:12px; text-align:center; }
.tabs { display:grid; grid-template-columns:1fr 1fr; margin-bottom:22px; padding:4px; background:var(--soft); border-radius:7px; }
.tab { min-height:38px; color:var(--muted); background:transparent; border:0; border-radius:5px; cursor:pointer; }
.tab.active { color:var(--ink); background:#fff; box-shadow:0 2px 8px rgba(34,41,55,.08); font-weight:650; }
form { display:grid; gap:15px; }
label { display:grid; gap:7px; color:#343b46; font-size:13px; font-weight:650; }
input { width:100%; height:44px; padding:0 13px; color:var(--ink); background:#fff; border:1px solid #dfe2e7; border-radius:6px; outline:none; }
input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(216,93,127,.12); }
.primary,.secondary { min-height:44px; padding:0 16px; border-radius:6px; cursor:pointer; font-weight:680; }
.primary { color:#fff; background:var(--accent); border:1px solid var(--accent); }
.primary:hover { filter:brightness(.96); }
.secondary { color:var(--ink); background:#fff; border:1px solid var(--line); }
.message { min-height:20px; margin:12px 0 0; color:#b43b5c; font-size:13px; }
.hidden { display:none !important; }
.account-card { display:flex; align-items:center; gap:14px; margin:22px 0; padding:16px; background:var(--soft); border:1px solid var(--line); border-radius:7px; }
.avatar { width:46px; height:46px; display:grid; place-items:center; flex:0 0 46px; color:#fff; background:var(--accent-2); border-radius:50%; overflow:hidden; font-weight:750; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.image-loading { position:relative; opacity:.42; }
.image-loaded { opacity:1; animation:image-fade-in .35s ease both; }
@keyframes image-fade-in { from { opacity:.42; transform:scale(1.02); } to { opacity:1; transform:scale(1); } }
.avatar .image-loading { background:linear-gradient(100deg,#e7edf5 20%,#fff 42%,#e7edf5 64%); background-size:220% 100%; animation:image-shimmer 1.15s ease-in-out infinite; }
.avatar .image-loaded { animation:image-fade-in .35s ease both; }
@keyframes image-shimmer { from { background-position:120% 0; } to { background-position:-20% 0; } }
.account-card strong,.account-card span { display:block; }
.account-card span { margin-top:3px; color:var(--muted); font-size:13px; }
.scopes { display:grid; gap:10px; margin:22px 0; padding:0; list-style:none; }
.scopes li { display:flex; gap:10px; align-items:flex-start; padding:12px; background:var(--soft); border-radius:6px; }
.scopes b { color:var(--accent-2); }
.actions { display:grid; grid-template-columns:1fr 1.4fr; gap:10px; }
.dashboard { width:min(1180px,100% - 36px); margin:32px auto 72px; display:grid; grid-template-columns:250px minmax(0,1fr); gap:24px; align-items:start; }
.dashboard.signed-out-layout { max-width:680px; grid-template-columns:minmax(0,1fr); }
.sidebar { position:sticky; top:24px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:8px; }
.sidebar .account-card { margin:0 0 12px; padding:10px; border:0; background:var(--soft); }
.sidebar nav { display:grid; gap:4px; }
.side-link { width:100%; min-height:42px; padding:0 13px; text-align:left; color:var(--muted); background:transparent; border:0; border-radius:6px; cursor:pointer; }
.side-link:hover,.side-link.active { color:var(--ink); background:var(--soft); font-weight:680; }
.side-link.danger { margin-top:12px; color:#b43b5c; }
.side-link.admin-entry { display:grid; align-items:center; margin-top:12px; color:#4356bb; text-decoration:none; }
.workspace { min-width:0; }
.view { background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.view-head { padding:26px 28px 22px; border-bottom:1px solid var(--line); }
.view-head h1 { font-size:23px; }
.view-head p { margin:7px 0 0; color:var(--muted); }
.settings-list { display:grid; margin:0; }
.settings-list > label,.setting-row,.setting-form { min-height:84px; display:grid; grid-template-columns:minmax(180px,1fr) minmax(220px,1.35fr); align-items:center; gap:20px; padding:17px 28px; border-bottom:1px solid var(--line); }
.settings-list b,.settings-list small { display:block; }
.settings-list b { color:var(--ink); font-size:14px; }
.settings-list small { margin-top:5px; color:var(--muted); font-weight:400; line-height:1.45; }
.settings-list input { min-width:0; }
.settings-list em { justify-self:end; padding:4px 9px; color:#15803d; background:#f0fdf4; border-radius:12px; font-style:normal; font-size:12px; }
.setting-form { grid-template-columns:minmax(180px,1fr) 1fr 1fr auto; }
.setting-save { justify-self:end; margin:18px 28px; min-width:120px; }
.link-button { display:inline-grid; min-height:44px; padding:0 18px; place-items:center; text-decoration:none; border-radius:6px; }
.empty-row { padding:34px 28px; color:var(--muted); text-align:center; }
.auth-page { background:#f2f7fb; }
.auth-page .topbar { border-bottom-color:#d8e6e8; }
.auth-page .brand-mark { background:#2f6b57; }
.auth-panel { position:relative; overflow:visible; border-color:#d7e4e4; box-shadow:0 20px 55px rgba(40,75,82,.12); }
.auth-logo { display:block; width:112px; height:112px; margin:-76px auto 10px; object-fit:contain; filter:drop-shadow(0 8px 8px rgba(34,62,67,.16)); }
.season-label { display:flex; align-items:center; justify-content:center; gap:7px; margin:0 0 5px; color:#75818d; font-size:11px; font-weight:650; letter-spacing:0; text-align:center; }
.season-label::before { content:"\f863"; display:inline-block; color:#ef50a8; font-family:"Font Awesome 7 Free","Font Awesome 6 Free","Font Awesome 5 Free"; font-size:.82em; font-style:normal; font-weight:900; line-height:1; transform-origin:50% 50%; animation:article-heading-fan 4s linear infinite; transition:color .2s ease-out; }
.season-label:hover::before { color:#1687f8; animation-duration:6s; }
@keyframes article-heading-fan { from { transform:rotate(0deg); } to { transform:rotate(-1turn); } }
.auth-panel h1 { color:#245844; text-align:center; }
.auth-panel .lead { text-align:center; }
.auth-page .primary { color:#28434d; background:#e0e0e0; border-color:#c7d0d4; transition:background-color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.auth-page .primary:hover { background:#b3d9ff; border-color:#83b7df; box-shadow:0 4px 8px rgba(0,0,0,.1); transform:scale(1.05); }
.auth-page .primary:focus-visible { outline:3px solid rgba(179,217,255,.7); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .auth-page .primary { transition:none; } .auth-page .primary:hover { transform:none; } .season-label::before { animation:none; } }
.oauth-page { background:#f2f7fb; }
.oauth-page .center { width:min(100% - 32px,560px); }
.consent-panel { max-width:560px; padding:34px 36px 30px; }
.consent-brand { display:flex; align-items:center; justify-content:center; gap:9px; color:#245844; font-weight:760; font-size:16px; }
.consent-brand img { width:42px; height:42px; object-fit:contain; }
.oauth-page .season-label { margin-top:8px; }
.consent-panel h1 { margin-top:18px; text-align:center; font-size:23px; color:var(--ink); }
.consent-panel h1 strong { color:#245844; }
.consent-user { display:flex; align-items:center; gap:12px; max-width:360px; margin:24px auto 20px; }
.consent-user b,.consent-user small { display:block; }
.consent-user b { font-size:16px; }
.consent-user small { margin-top:4px; color:var(--muted); font-size:12px; }
.consent-avatar { width:52px; height:52px; display:grid; place-items:center; overflow:hidden; flex:none; color:#fff; background:#2f6b57; border-radius:50%; font-size:20px; font-weight:750; }
.consent-avatar img { width:100%; height:100%; object-fit:cover; }
.permission-box { margin:0 auto 24px; padding:17px 18px 12px; background:#f4f7f8; border:1px solid #e3ebed; border-radius:14px; }
.permission-box p { margin:0 0 8px; color:var(--muted); font-size:12px; }
.permission-list { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.permission-list li { display:grid; grid-template-columns:20px 1fr 20px; align-items:center; gap:8px; color:#26333a; font-size:14px; }
.permission-check { color:#2fb879; font-weight:800; }
.permission-info { width:16px; height:16px; display:grid; place-items:center; color:#8b9aa4; border:1px solid #aebbc3; border-radius:50%; font-size:10px; }
.consent-actions { display:grid; gap:11px; }
.consent-actions .primary { width:100%; min-height:50px; border-radius:25px; font-size:15px; }
.consent-actions .secondary { width:100%; min-height:40px; border:0; color:#74818a; background:transparent; font-size:13px; }
.consent-actions .secondary:hover { color:#245844; background:#edf4f2; }
.consent-actions button:disabled { cursor:wait; opacity:.65; transform:none; }
@media (max-width:520px) { .consent-panel { padding:28px 20px 24px; } .consent-panel h1 { font-size:20px; } }
@media (max-width:520px) { .security{display:none}.center{padding-top:24px}.panel{padding:24px 20px}.actions{grid-template-columns:1fr} }
@media (max-width:760px) { .dashboard{width:min(100% - 24px,680px);grid-template-columns:1fr;margin-top:16px}.sidebar{position:static}.sidebar nav{grid-template-columns:repeat(3,1fr)}.side-link{text-align:center;padding:0 6px}.settings-list>label,.setting-row,.setting-form{grid-template-columns:1fr;gap:10px;padding:18px}.setting-form{grid-template-columns:1fr}.setting-save{width:calc(100% - 36px);margin:18px}.view-head{padding:22px 18px} }

/* Login */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.auth-shell { grid-template-rows:1fr; }
.login-page { background:#f7f9fc; }
.login-center { width:min(100% - 36px,420px); padding:64px 0; }
.login-panel { width:100%; }
.login-brand { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:10px; color:#17212d; font-size:28px; font-weight:800; }
.login-brand img { width:44px; height:44px; object-fit:contain; }
.login-page .season-label { margin-bottom:48px; font-size:11px; }
.login-form { gap:18px; }
.login-form label { position:relative; display:block; }
.login-form input { height:52px; padding:0 22px; border:1px solid #d9dee4; border-radius:26px; background:#eef4ff; font-size:15px; font-weight:600; transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.login-form input::placeholder { color:#7c8794; font-weight:500; }
.login-form input:focus { border-color:#79aee0; background:#fff; box-shadow:0 0 0 4px rgba(121,174,224,.14); }
.password-field { height:52px; overflow:hidden; background:#fff; border:1px solid #d9dee4; border-radius:26px; transition:border-color .2s ease, box-shadow .2s ease; }
.password-field:focus-within { border-color:#1687f8; box-shadow:0 0 0 3px rgba(22,135,248,.12); }
.login-form .password-field input { width:calc(100% - 54px); height:50px; padding-right:22px; border:0; border-radius:25px; box-shadow:none; }
.login-form .password-field input:focus { border:0; box-shadow:none; }
.password-toggle { position:absolute; z-index:1; top:0; right:0; width:54px; height:50px; padding:0; background:#fff; border:0; border-radius:0 25px 25px 0; cursor:pointer; }
.password-toggle span { position:absolute; width:20px; height:13px; left:17px; top:18px; border:2px solid #8e98a3; border-radius:70% 15%; transform:rotate(45deg); }
.password-toggle span::after { content:""; position:absolute; width:5px; height:5px; left:5.5px; top:2px; background:#8e98a3; border-radius:50%; }
.password-toggle[aria-pressed="true"]::after { content:""; position:absolute; width:24px; height:2px; left:15px; top:24px; background:#8e98a3; transform:rotate(-45deg); }
.login-form .availability { margin:0; text-align:right; font-size:13px; }
.login-submit { min-height:52px; margin-top:2px; border-radius:26px; font-size:16px; }
.login-privacy { display:grid; grid-template-columns:28px 1fr; gap:11px; margin-top:34px; color:#8b97a5; font-size:13px; line-height:1.65; }
.login-privacy p { margin:0; }
.login-privacy .privacy-link { margin-top:12px; }
.login-privacy a { color:#1687f8; text-decoration:none; }
.login-privacy a:hover { text-decoration:underline; }
.privacy-shield { width:25px; height:29px; display:grid; place-items:center; color:#fff; background:#1687f8; clip-path:polygon(50% 0,100% 15%,100% 68%,50% 100%,0 68%,0 15%); font-size:11px; }

/* Account center */
.account-shell { display:block; min-height:100vh; padding:30px 0; background:#eef4f8; }
.account-shell > .topbar { display:none; }
.account-shell .dashboard { width:min(1320px,calc(100% - 40px)); min-height:calc(100vh - 60px); grid-template-columns:280px minmax(0,1fr); gap:0; margin:0 auto; overflow:hidden; background:#fff; border:1px solid #e1e8ed; border-radius:10px; box-shadow:0 18px 50px rgba(43,67,83,.1); }
.account-shell .dashboard.signed-out-layout { display:grid; max-width:680px; min-height:0; grid-template-columns:1fr; margin-top:14vh; }
.account-shell .sidebar { position:static; display:flex; flex-direction:column; min-height:100%; padding:26px 20px; background:#f8fafc; border:0; border-right:1px solid #e6ebef; border-radius:0; }
.account-shell .sidebar .account-card { margin:0 0 24px; padding:8px 6px 18px; background:transparent; }
.account-shell .sidebar nav { gap:8px; }
.account-shell .side-link { min-height:48px; padding:0 16px; border:1px solid transparent; border-radius:8px; font-weight:650; }
.account-shell .side-link:hover,.account-shell .side-link.active { color:#2b62ca; background:#edf4ff; border-color:#d7e7ff; }
.account-shell .side-link.admin-entry { margin-top:16px; }
.account-shell .side-link.danger { margin-top:auto; color:#6f7c88; background:#f1f4f6; text-align:center; }
.account-shell .workspace { padding:32px 36px 48px; overflow:auto; }
.account-shell .view { border:0; border-radius:0; overflow:visible; }
.account-shell .view-head { padding:0 4px 24px; border:0; }
.account-shell .view-head h1 { font-size:25px; }
.account-shell .settings-list { gap:10px; }
.account-shell .settings-list > label,.account-shell .setting-row,.account-shell .setting-form { min-height:112px; grid-template-columns:minmax(170px,.7fr) minmax(300px,1.3fr); gap:24px; padding:20px 24px; background:#f7f9fb; border:0; border-radius:8px; }
.account-shell .field-control { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; min-width:0; }
.account-shell .field-control input { height:48px; border-radius:24px; }
.account-shell .field-save { min-width:74px; min-height:44px; padding:0 18px; border-radius:22px; background:#74a2ef; border-color:#74a2ef; }
.account-shell .settings-list > label:last-child .field-control { grid-template-columns:1fr; }
.account-shell .setting-form { grid-template-columns:minmax(170px,.7fr) 1fr 1fr auto; }
.account-shell .setting-row .secondary,.account-shell .setting-form .secondary { border-radius:22px; }
.account-shell .empty-row { background:#f7f9fb; border-radius:8px; }

@media (max-width:760px) {
  .login-center { padding:36px 0; }
  .login-brand { gap:10px; font-size:26px; }
  .login-brand img { width:40px; height:40px; }
  .login-page .season-label { margin-bottom:32px; }
  .login-form input,.login-submit { height:50px; min-height:50px; }
  .account-shell { padding:0; }
  .account-shell .dashboard { width:100%; min-height:100vh; grid-template-columns:1fr; border:0; border-radius:0; }
  .account-shell .sidebar { min-height:auto; padding:16px; border-right:0; border-bottom:1px solid #e6ebef; }
  .account-shell .sidebar .account-card { margin-bottom:10px; }
  .account-shell .sidebar nav { grid-template-columns:repeat(2,1fr); }
  .account-shell .workspace { padding:24px 14px 36px; }
  .account-shell .settings-list > label,.account-shell .setting-row,.account-shell .setting-form { grid-template-columns:1fr; gap:13px; padding:18px; }
  .account-shell .setting-form { grid-template-columns:1fr; }
}
.monitor-consent-panel { display:grid; gap:18px; margin-bottom:14px; padding:20px 22px; background:#f7f9fb; border:1px solid #e5ebef; border-radius:8px; }
.monitor-view-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.monitor-app-button {
  position:relative;
  display:inline-flex;
  min-height:40px;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 13px 0 17px;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(135deg,#5368f5,#425aef 55%,#344bd5);
  border:1px solid rgba(66,90,239,.7);
  border-radius:21px;
  box-shadow:0 7px 16px rgba(66,90,239,.22);
  white-space:nowrap;
  transition:transform .28s cubic-bezier(.2,.9,.25,1.15),box-shadow .28s ease,background .28s ease;
}
.monitor-app-button::before {
  position:absolute;
  top:-60%;
  left:-42%;
  width:34%;
  height:220%;
  content:"";
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transform:rotate(18deg);
  transition:left .55s ease;
  pointer-events:none;
}
.monitor-app-button::after {
  content:"\f061";
  font-family:"Font Awesome 7 Free","Font Awesome 6 Free","Font Awesome 5 Free";
  font-size:12px;
  font-weight:900;
  transition:transform .22s ease;
}
.monitor-app-button:hover {
  color:#fff;
  background:linear-gradient(135deg,#6275ff,#344bd5 78%,#2738b7);
  box-shadow:0 12px 24px rgba(36,53,173,.3);
  transform:translateY(-2px) scale(1.025);
}
.monitor-app-button:hover::before { left:120%; }
.monitor-app-button:hover::after { transform:translateX(3px); }
.monitor-app-button:active { transform:translateY(0) scale(.97); }
.monitor-app-button:focus-visible { outline:3px solid rgba(83,104,245,.25); outline-offset:3px; }
@media (prefers-reduced-motion: reduce) {
  .monitor-app-button,.monitor-app-button::after { transition:none; }
  .monitor-app-button::before { display:none; }
  .monitor-app-button:hover,.monitor-app-button:active { transform:none; }
}
.monitor-consent-panel b,.monitor-consent-panel small { display:block; }.monitor-consent-panel b{font-size:14px}.monitor-consent-panel small{margin-top:5px;color:var(--muted);line-height:1.55}
.monitor-site-form { display:grid; grid-template-columns:1fr 1.2fr auto; align-items:center; gap:10px; }
.monitor-site-form input:not([type=checkbox]) { height:44px; border-radius:22px; }.monitor-site-form > button { min-height:44px; border-radius:22px; }
.monitor-authorization { grid-column:1/-1; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; font-weight:400; }.monitor-authorization input{width:16px;height:16px;accent-color:var(--accent-2)}
.monitor-site-list { display:grid; gap:12px; }.monitor-site-card { padding:20px 22px; background:#fff; border:1px solid #e2e8ed; border-radius:8px; box-shadow:0 4px 14px rgba(43,67,83,.04); }
.monitor-site-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }.monitor-site-title b,.monitor-site-title small{display:block}.monitor-site-title b{font-size:15px}.monitor-site-title small{margin-top:5px;color:var(--muted);overflow-wrap:anywhere}
.monitor-site-state { min-height:26px; display:inline-flex; align-items:center; padding:0 9px; color:#15803d; background:#eaf8f1; border-radius:12px; font-size:11px; font-weight:700; white-space:nowrap; }.monitor-site-state.pending{color:#936218;background:#fff7e5}.monitor-site-state.off{color:#66717e;background:#eef1f5}
.monitor-site-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:18px; padding-top:15px; border-top:1px solid #edf0f3; }.monitor-site-stat span,.monitor-site-stat strong{display:block}.monitor-site-stat span{color:var(--muted);font-size:10px}.monitor-site-stat strong{margin-top:7px;font-size:16px}
.monitor-site-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }.monitor-site-actions button{min-height:34px;padding:0 12px;border-radius:17px}.monitor-site-actions .danger{color:#b43b5c}
.monitor-verification { margin-top:16px; padding:13px 14px; color:#586573; background:#fffaf0; border:1px solid #f0dfb1; border-radius:7px; font-size:12px; line-height:1.6; }.monitor-verification code{display:block;margin-top:8px;padding:9px;overflow:auto;color:#586573;background:#fff;border:1px solid #eadfca;border-radius:5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;white-space:nowrap}
.monitor-site-bars { display:flex; gap:3px; height:20px; margin-top:15px; }.monitor-site-bar{min-width:3px;flex:1;background:#27c875;border-radius:3px}.monitor-site-bar.warn{background:#f2ae36}.monitor-site-bar.down{background:#ee506b}.monitor-site-bar.empty{background:#e5eaf0}
@media (max-width:760px) { .monitor-site-form{grid-template-columns:1fr}.monitor-site-form .monitor-authorization{grid-column:auto}.monitor-site-stats{grid-template-columns:1fr 1fr}.monitor-site-card{padding:17px}.monitor-site-head{align-items:flex-start} }
.monitor-head-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.monitor-auth-button.authorized { color:#16754a; background:#eaf8f1; border-color:#b8e6ce; }
.friend-view-head h1 { display:flex; align-items:center; gap:8px; color:#3154c9; }
.friend-title-mark { display:inline-block; flex:0 0 auto; color:#ffbf00; font-family:"Font Awesome 7 Free","Font Awesome 6 Free","Font Awesome 5 Free"; font-size:.82em; font-style:normal; font-weight:900; line-height:1; transform-origin:50% 50%; animation:friend-windmill-spin 4s linear infinite; }
.friend-title-mark::before { content:"\f863"; }
.friend-notice { display:grid; grid-template-columns:24px minmax(0,1fr); column-gap:10px; margin:0 0 24px; padding:16px 18px; color:#66748a; background:#f1f4ff; border-left:4px solid #4d67ee; line-height:1.7; }
.friend-notice-icon { grid-row:1 / span 2; display:grid; place-items:center; width:24px; height:24px; color:#4d67ee; font-family:"Font Awesome 7 Free","Font Awesome 6 Free","Font Awesome 5 Free"; font-size:15px; font-weight:900; }
.friend-notice-icon::before { content:"\f1d8"; }
.friend-notice strong { color:#334b9c; font-size:14px; }
.friend-notice p { margin:2px 0 0; font-size:13px; }
.friend-form { display:grid; gap:18px; }
.friend-section { padding:22px 24px; background:#f8faff; border:1px solid #e3e9fb; border-radius:10px; }
.friend-section h2,.friend-application-list h2 { position:relative; margin:0 0 16px; padding-left:1.55em; color:#253246; font-size:17px; }
.friend-section h2::before,.friend-application-list h2::before { position:absolute; top:.2em; left:.08em; color:#ffbf00; content:"\f863"; font-family:"Font Awesome 7 Free","Font Awesome 6 Free","Font Awesome 5 Free"; font-size:.82em; font-style:normal; font-weight:900; line-height:1; transform-origin:50% 50%; animation:friend-windmill-spin 4s linear infinite; }
.friend-section:nth-of-type(1) h2::before { color:#8fbe00; }
.friend-section:nth-of-type(3) h2::before { color:#8fbe00; }
.friend-info-list { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.friend-info-list li { display:flex; flex-wrap:wrap; align-items:center; gap:10px; color:#536174; }
.friend-info-list b { min-width:78px; color:#3a4657; }
.friend-info-list code { padding:4px 8px; color:#3154c9; background:#eef2ff; border-radius:5px; overflow-wrap:anywhere; font:inherit; }
.friend-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.friend-fields label { display:grid; gap:7px; color:#526074; font-size:12px; font-weight:650; }
.friend-fields .friend-wide { grid-column:1/-1; }
.friend-fields textarea { min-height:88px; padding:12px 13px; resize:vertical; color:var(--ink); background:#fff; border:1px solid #dfe5f0; border-radius:7px; outline:none; font:inherit; }
.friend-fields select { height:44px; padding:0 12px; color:var(--ink); background:#fff; border:1px solid #dfe5f0; border-radius:7px; }
.friend-help { margin:0 0 14px; color:var(--muted); }
.friend-checks { display:grid; gap:11px; }
.friend-checks label { display:flex; align-items:center; gap:10px; color:#4e5c70; font-size:13px; font-weight:600; cursor:pointer; }
.friend-checks input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.friend-check-icon { position:relative; display:inline-grid; flex:0 0 23px; width:23px; height:23px; place-items:center; color:#fff; background:#e8f4e6; border:1px solid #b9d8b5; border-radius:6px; transition:background-color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease; }
.friend-check-icon::after { content:""; width:9px; height:5px; border-left:2px solid #477de8; border-bottom:2px solid #477de8; opacity:.35; transform:translateY(-1px) rotate(-45deg) scale(.72); transition:opacity .2s ease,transform .2s ease; }
.friend-checks input:checked + .friend-check-icon { background:#b8e3ad; border-color:#83c779; transform:scale(1.05); box-shadow:0 3px 8px rgba(84,151,75,.2); }
.friend-checks input:checked + .friend-check-icon::after { opacity:1; transform:translateY(-1px) rotate(-45deg) scale(1); }
.friend-checks input:focus-visible + .friend-check-icon { outline:3px solid rgba(77,103,238,.25); outline-offset:2px; }
.friend-checks label:hover .friend-check-icon { border-color:#83c779; }
.friend-checks strong { color:#334b9c; }
.friend-submit { display:inline-flex; justify-self:start; min-height:46px; align-items:center; justify-content:center; gap:9px; padding:0 22px; color:#fff; background:#1687f8; border-color:#1687f8; border-radius:23px; box-shadow:0 7px 16px rgba(22,135,248,.24); transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s cubic-bezier(.2,.9,.25,1.15); }
.friend-submit::before { content:"\f863"; display:inline-block; font-family:"Font Awesome 7 Free","Font Awesome 6 Free","Font Awesome 5 Free"; font-size:13px; font-weight:900; line-height:1; transform-origin:50% 50%; animation:friend-submit-spin 5.5s linear infinite; }
.friend-submit:hover { color:#fff; background:#0878e8; border-color:#0878e8; box-shadow:0 11px 22px rgba(22,135,248,.32); filter:none; transform:translateY(-2px) scale(1.025); }
.friend-submit:hover::before { animation-duration:1.35s; }
.friend-submit:active { box-shadow:0 5px 11px rgba(22,135,248,.22); transform:translateY(0) scale(.97); }
.friend-submit:focus-visible { outline:3px solid rgba(22,135,248,.25); outline-offset:3px; }
@keyframes friend-windmill-spin { from { transform:rotate(0deg); } to { transform:rotate(-1turn); } }
@keyframes friend-submit-spin { to { transform:rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .friend-title-mark,.friend-section h2::before,.friend-application-list h2::before,.friend-submit::before { animation:none; } .friend-check-icon,.friend-submit { transition:none; } .friend-submit:hover,.friend-submit:active { transform:none; } }
.friend-application-list { display:grid; gap:10px; margin-top:26px; }
.friend-application-list h2 { margin-bottom:2px; }
.friend-application-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 14px; padding:15px 18px; background:#fff; border:1px solid #e2e8ed; border-radius:8px; }
.friend-application-card b,.friend-application-card small { display:block; }
.friend-application-card small { margin-top:4px; color:var(--muted); overflow-wrap:anywhere; }
.friend-application-card p { grid-column:1/-1; margin:5px 0 0; color:var(--muted); font-size:12px; }
.friend-status { align-self:start; padding:4px 9px; color:#8a641b; background:#fff5dc; border-radius:12px; font-size:11px; font-weight:700; white-space:nowrap; }
.friend-status.approved { color:#16754a; background:#eaf8f1; }
.friend-status.rejected { color:#b43b5c; background:#fff0f3; }
@media (max-width:760px) {
  .monitor-view-head { flex-direction:column; }
  .monitor-head-actions { justify-content:flex-start; }
  .friend-fields { grid-template-columns:1fr; }
  .friend-fields .friend-wide { grid-column:auto; }
  .friend-section { padding:18px; }
}
.legal-page { padding:48px 20px; background:#f7f9fc; }
.legal-document { width:min(100%,760px); margin:0 auto; padding:38px 42px; background:#fff; border:1px solid #e3e8ed; border-radius:8px; box-shadow:0 16px 44px rgba(43,67,83,.08); }
.legal-brand { margin-bottom:32px; }
.legal-document h1 { margin-bottom:6px; font-size:30px; }
.legal-updated { margin:0 0 30px; color:var(--muted); font-size:13px; }
.legal-document section { margin:24px 0; }
.legal-document h2 { margin:0 0 8px; font-size:17px; }
.legal-document section p { margin:0; color:#596573; line-height:1.8; }
.legal-back { display:inline-grid; min-height:42px; margin-top:12px; padding:0 18px; place-items:center; border-radius:21px; text-decoration:none; }
@media (max-width:520px) { .legal-page { padding:0; } .legal-document { min-height:100vh; padding:28px 20px; border:0; border-radius:0; } }