.hidden { display: none !important; }
.app-shell { min-height: 100vh; }
.dashboard-view { min-height: 100vh; }
.sidebar { position: fixed; z-index: 5; inset: 0 auto 0 0; display: flex; width: 248px; flex-direction: column; padding: 28px 16px 20px; border-right: 1px solid var(--line); background: #fff; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 12px; }
.brand-mark { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 14px; color: white; background: linear-gradient(145deg, #7096ff, #466deb 67%, #3157cb); box-shadow: 0 7px 18px rgb(67 103 217 / 25%); font-family: Manrope, sans-serif; font-size: 20px; font-weight: 800; }
.brand-mark.small { width: 34px; height: 34px; border-radius: 11px; font-size: 16px; }
.brand-name { font-family: Manrope, sans-serif; font-size: 17px; font-weight: 800; letter-spacing: -.55px; }
.brand-name span { color: #8993a5; font-weight: 500; }
.nav-caption { margin: 47px 11px 12px; color: #a3adba; font-size: 9px; font-weight: 700; letter-spacing: 1.1px; }
.side-nav { display: grid; gap: 5px; }
.nav-link { display: flex; min-height: 44px; align-items: center; gap: 12px; padding: 0 12px; border-radius: 11px; color: #68748a; font-size: 13px; font-weight: 600; transition: color .18s, background .18s, transform .18s var(--ease-out); }
.nav-link:hover { transform: translateX(2px); color: var(--ink); background: #f6f8fc; }
.nav-link.active { color: #3864df; background: #edf2ff; }
.nav-icon { display: inline-grid; width: 20px; place-items: center; color: #919bad; font-size: 18px; }
.nav-link.active .nav-icon { color: var(--blue); }
.sidebar-footer { display: grid; gap: 16px; margin-top: auto; padding: 16px 8px 0; border-top: 1px solid #f0f2f6; }
.secure-chip { display: flex; align-items: center; gap: 8px; color: #778397; font-size: 11px; }
.secure-dot { width: 7px; height: 7px; border-radius: 50%; background: #36ba91; box-shadow: 0 0 0 4px #e3f8f1; }
.quiet-button { justify-self: start; padding: 7px 0; border: 0; color: #758095; background: none; cursor: pointer; font-size: 12px; }
.quiet-button:hover { color: var(--red); }
.main-area { min-height: 100vh; margin-left: 248px; }
.topbar { position: sticky; z-index: 4; top: 0; display: flex; height: 68px; align-items: center; justify-content: space-between; padding: 0 42px; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 88%); backdrop-filter: blur(18px); }
.breadcrumbs { display: flex; align-items: center; gap: 11px; color: #98a2b1; font-size: 12px; }
.breadcrumbs strong { color: #364158; font-weight: 600; }
.crumb-sep { color: #c7ced8; }
.topbar-right { display: flex; align-items: center; gap: 15px; }
.live-pill { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid #e8f3ed; border-radius: 20px; color: #5e8e75; background: #f6fbf8; font-size: 10px; font-weight: 600; }
.live-pill i { width: 6px; height: 6px; border-radius: 50%; background: #45ba85; box-shadow: 0 0 0 3px #e0f5e9; }
.avatar { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; color: #61508c; background: #f0eaff; font-size: 12px; font-weight: 700; }
.mobile-brand { display: none; align-items: center; gap: 8px; font-family: Manrope, sans-serif; font-size: 13px; font-weight: 800; }
.content-wrap { width: min(1180px, 100%); margin: 0 auto; padding: 42px 42px 60px; }
.page { display: none; animation: page-in .35s var(--ease-out) both; }
.page.active { display: block; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.eyebrow { margin: 0 0 10px; color: #96a1b1; font-size: 9px; font-weight: 700; letter-spacing: 1.2px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 9px; font-family: Manrope, sans-serif; font-size: clamp(28px, 3.4vw, 38px); font-weight: 750; letter-spacing: -1.8px; line-height: 1.15; }
.heading-period { color: var(--blue); }
.muted { margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
h2 { margin: 0; font-family: Manrope, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -.45px; }
.button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 9px; padding: 0 15px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 700; transition: transform .16s var(--ease-out), box-shadow .16s, background .16s, border-color .16s; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0) scale(.985); }
.button:disabled { transform: none; cursor: wait; opacity: .65; }
.button-primary { color: white; background: linear-gradient(135deg, #557df5, #3d67e3); box-shadow: 0 5px 12px rgb(61 103 227 / 17%); }
.button-primary:hover { background: linear-gradient(135deg, #6389fb, #315bd0); box-shadow: 0 8px 18px rgb(61 103 227 / 24%); }
.button-secondary { border-color: #e5e9f0; color: #657087; background: white; }
.button-secondary:hover { border-color: #d6deed; background: #fafbfe; }
.button-danger { border-color: #f1d8dd; color: #b33f50; background: #fff8f9; }
.button-danger:hover { border-color: #e8b8c1; background: #fff0f2; }
.button-wide { width: 100%; margin-top: 4px; }
.refresh-icon { display: inline-block; font-size: 16px; transition: transform .35s; }
.button:hover .refresh-icon { transform: rotate(90deg); }
.status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-bottom: 19px; }
.panel-card { border: 1px solid #e9edf4; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
.service-card { position: relative; overflow: hidden; padding: 21px 21px 18px; transition: transform .2s var(--ease-out), box-shadow .2s; }
.service-card.service-leo { --glow: #edf2ff; --icon: #4b6ede; }
.service-card.service-panel { --glow: #f1ecff; --icon: #8060ce; }
.service-card.service-proxy { --glow: #e8f8f2; --icon: #238a6d; }
.service-card:hover { transform: translateY(-3px); box-shadow: 0 17px 36px rgb(34 50 79 / 8%); }
.service-card::after { position: absolute; top: -27px; right: -24px; width: 88px; height: 88px; border-radius: 50%; background: var(--glow, #edf2ff); content: ""; opacity: .75; }
.service-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.service-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--icon, #486fe3); background: var(--glow, #edf2ff); font-size: 17px; }
.service-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 15px; color: #7a879a; background: #f4f6f9; font-size: 9px; font-weight: 700; }
.service-status.ok { color: #198965; background: #eaf8f2; }
.service-status.down { color: #bd5260; background: #fff0f2; }
.service-status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.service-card h3 { position: relative; z-index: 1; margin: 0 0 4px; font-family: Manrope, sans-serif; font-size: 15px; font-weight: 700; }
.service-caption { position: relative; z-index: 1; margin: 0; color: #8b95a5; font-size: 11px; }
.overview-columns { display: grid; grid-template-columns: 1.1fr .9fr; gap: 15px; }
.activity-card, .info-card { padding: 23px 23px 21px; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 19px; }
.card-heading .eyebrow { margin-bottom: 7px; }
.heading-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: #8060d0; background: #f1ecff; font-size: 17px; }
.heading-icon.blue { color: #5276d9; background: #edf2ff; }
.heading-icon.lilac-bg { color: #8966dd; background: #f1ecff; }
.heading-icon.amber-bg { color: #ba7b2c; background: #fff5e5; }
.action-list { display: grid; }
.action-row { display: grid; grid-template-columns: 36px 1fr 20px; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid #f0f2f6; transition: padding .18s; }
.action-row:hover { padding-right: 3px; padding-left: 3px; }
.action-symbol { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; font-size: 16px; }
.action-symbol.lilac { color: #8161cd; background: #f4efff; }
.action-symbol.mint { color: #299576; background: #e9f8f2; }
.action-symbol.amber { color: #c5852d; background: #fff6e7; }
.action-row b { display: block; margin-bottom: 4px; color: #354057; font-size: 11px; font-weight: 700; }
.action-row small { color: #929cab; font-size: 10px; }
.row-arrow { color: #a3adbc; text-align: right; transition: transform .18s; }
.action-row:hover .row-arrow { transform: translateX(3px); color: var(--blue); }
.info-card > p { margin: -5px 0 18px; color: #7d8899; font-size: 11px; line-height: 1.7; }
.host-row { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid #f0f2f6; color: #7c8799; font-size: 10px; }
.host-row a { color: #4e6fc6; font-weight: 600; }
.host-row a:hover { text-decoration: underline; }
.mono { color: #556178; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }
.page-footnote { margin: 19px 0 0; color: #98a2b1; font-size: 10px; line-height: 1.6; }
.form-card { padding: 26px; }
.form-card .card-heading { align-items: center; margin-bottom: 12px; }
.form-intro { margin-bottom: 10px; color: #8290a2; font-size: 11px; line-height: 1.6; }
.secret-field { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(250px, 1.2fr); align-items: center; gap: 24px; padding: 17px 0; border-top: 1px solid #eff2f6; }
.secret-field > div:first-child label { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 700; }
.secret-state { color: #9aa4b2; font-size: 10px; }
.secret-state.configured { color: #249578; }
.secret-input-row { display: flex; align-items: center; gap: 12px; }
input:not([type=checkbox]) { width: 100%; min-height: 39px; padding: 0 11px; border: 1px solid #e4e9f1; border-radius: 9px; outline: none; color: var(--ink); background: #fff; font-size: 11px; transition: border-color .15s, box-shadow .15s, background .15s; }
input:not([type=checkbox]):focus { border-color: #8ba4f2; background: #fff; box-shadow: 0 0 0 3px rgb(87 122 232 / 12%); }
input::placeholder { color: #b2bac6; }
.remove-check { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; color: #8b96a7; cursor: pointer; font-size: 10px; }
.remove-check input { accent-color: #c95767; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 15px; padding-top: 17px; border-top: 1px solid #eff2f6; }
.tiny-note { margin: 0; color: #99a3b1; font-size: 10px; line-height: 1.5; }
.notice-card, .warning-card { display: flex; align-items: flex-start; gap: 12px; margin-top: 15px; padding: 16px 18px; border: 1px solid #e8edf8; border-radius: 13px; color: #707f97; background: #f8faff; font-size: 10px; line-height: 1.65; }
.notice-card p { margin: 0; }
.notice-card b, .warning-card b { color: #44536f; }
.notice-icon { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #5e7bca; background: #eaf0ff; font-size: 11px; font-weight: 800; }
.proxy-card { min-height: 172px; padding: 25px; }
.proxy-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.proxy-host { margin: 0 0 5px; color: #25314a; font-family: Manrope, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -.6px; }
.proxy-state { color: #78859a; font-size: 11px; }
.proxy-state strong { color: #268b70; }
.proxy-details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #edf0f5; }
.proxy-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.proxy-metric { display: flex; min-height: 66px; flex-direction: column; justify-content: space-between; gap: 8px; padding: 12px; border: 1px solid #edf0f5; border-radius: 11px; background: #fbfcfe; }
.proxy-metric span { color: #98a2b3; font-size: 8px; font-weight: 800; letter-spacing: .7px; }
.proxy-metric strong { overflow-wrap: anywhere; color: #35435d; font-size: 12px; font-weight: 700; }
.proxy-metrics-note { margin: 10px 0 0; color: #929cad; font-size: 9px; line-height: 1.5; }
.proxy-detail label { display: block; margin-bottom: 6px; color: #98a2b1; font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.proxy-detail span { color: #56647b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; overflow-wrap: anywhere; }
.copy-row { display: flex; align-items: center; gap: 7px; }
.copy-button { padding: 4px 7px; border: 1px solid #e7ebf2; border-radius: 6px; color: #77849a; background: white; cursor: pointer; font-size: 9px; }
.copy-button:hover { border-color: #b8c7f1; color: var(--blue); }
.proxy-link { color: #4b6fd2; }
.warning-card { margin-top: 16px; border-color: #f2e8d7; color: #8a7b63; background: #fffbf4; }
.warning-card p { margin: 5px 0 7px; }
.warning-card a { color: #87662f; text-decoration: underline; text-underline-offset: 2px; }
.amber-icon { color: #b27a27; background: #fff1d7; }
#rotate-proxy-button { margin-top: 15px; }
#proxy-toggle-button { margin: 15px 8px 0 0; }
.password-card { max-width: 640px; }
.password-card > label { display: block; margin: 15px 0 7px; color: #526077; font-size: 10px; font-weight: 700; }
.password-card > label small { margin-left: 5px; color: #a0aab8; font-size: 9px; font-weight: 400; }
.toast { position: fixed; z-index: 20; top: 82px; right: 28px; max-width: min(390px, calc(100vw - 32px)); padding: 12px 16px; transform: translateY(-8px); border: 1px solid #dcece6; border-radius: 11px; color: #278368; background: #f3fbf7; box-shadow: 0 10px 30px rgb(34 50 79 / 10%); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--ease-out); font-size: 11px; }
.toast.visible { transform: translateY(0); opacity: 1; }
.toast.error { border-color: #f0d9de; color: #b14554; background: #fff6f7; }
.skeleton { position: relative; overflow: hidden; border-radius: 10px; background: #edf1f6; }
.skeleton::after { position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgb(255 255 255 / 75%), transparent); animation: shimmer 1.35s infinite; content: ""; }
@keyframes shimmer { to { transform: translateX(100%); } }
.card-skeleton { height: 144px; }
.line-skeleton { height: 15px; margin: 4px 0 17px; }
.line-skeleton.short { width: 53%; }
.skeleton-grid { min-height: 144px; }
.login-view { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: radial-gradient(ellipse at 70% 15%, #e8edff 0, transparent 36%), radial-gradient(ellipse at 8% 82%, #e5f6f0 0, transparent 32%), var(--canvas); }
.login-card { width: min(420px, 100%); padding: 35px; animation: page-in .45s var(--ease-out) both; }
.login-card .brand-mark { margin-bottom: 25px; }
.login-card h1 { margin-bottom: 9px; font-size: 28px; }
.login-card > .muted { margin-bottom: 25px; font-size: 12px; }
.stack-form { display: grid; gap: 9px; }
.stack-form > label { margin-bottom: -3px; color: #536079; font-size: 10px; font-weight: 700; }
.form-error { min-height: 15px; margin: 0; color: #b54454; font-size: 10px; }
.login-card > .tiny-note { margin-top: 17px; text-align: center; }

@media (max-width: 1080px) {
  .content-wrap { padding-right: 28px; padding-left: 28px; }
  .topbar { padding: 0 28px; }
  .overview-columns { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sidebar { z-index: 10; inset: auto 0 0; display: block; width: 100%; height: 62px; padding: 0 6px env(safe-area-inset-bottom); border-top: 1px solid var(--line); border-right: 0; background: rgb(255 255 255 / 94%); backdrop-filter: blur(18px); }
  .sidebar > .brand, .nav-caption, .sidebar-footer { display: none; }
  .side-nav { height: 100%; grid-template-columns: repeat(4, 1fr); gap: 0; }
  .nav-link { min-height: 54px; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 2px; border-radius: 8px; font-size: 9px; }
  .nav-link:hover { transform: none; }
  .nav-icon { height: 22px; font-size: 17px; }
  .main-area { margin-left: 0; padding-bottom: 62px; }
  .topbar { height: 57px; padding: 0 17px; }
  .mobile-brand { display: flex; }
  .breadcrumbs { display: none; }
  .topbar-right { gap: 9px; }
  .content-wrap { padding: 28px 17px 35px; }
  .page-heading { align-items: flex-start; margin-bottom: 20px; }
  .page-heading > .button { min-height: 36px; padding: 0 10px; font-size: 10px; }
  h1 { font-size: 29px; }
  .muted { max-width: 34ch; font-size: 11px; }
  .status-grid { grid-template-columns: 1fr; gap: 10px; }
  .service-card { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; column-gap: 11px; padding: 12px 14px; }
  .service-top { grid-row: 1 / span 2; margin: 0; }
  .service-top .service-status { display: none; }
  .service-card h3 { align-self: end; margin-bottom: 2px; font-size: 12px; }
  .service-caption { align-self: start; font-size: 9px; }
  .service-card::after { top: -48px; right: -32px; width: 96px; height: 96px; }
  .overview-columns { gap: 10px; }
  .activity-card, .info-card { padding: 18px; }
  .secret-field { grid-template-columns: 1fr; gap: 10px; padding: 15px 0; }
  .secret-input-row { align-items: flex-start; }
  .form-card { padding: 20px 16px; }
  .form-actions { align-items: flex-start; flex-direction: column; }
  .form-actions .button { width: 100%; }
  .proxy-card { padding: 19px; }
  .proxy-details { grid-template-columns: 1fr; }
  .proxy-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proxy-summary { align-items: flex-start; flex-direction: column; }
  .toast { top: 67px; right: 12px; }
}

/* Dark proxy-only dashboard */
.theme-dark .heading-actions { display: flex; align-items: center; gap: 8px; }
.theme-dark .metrics-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.theme-dark .mobile-logout { display: none; }
.theme-dark .transport-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 16px; }
.theme-dark .transport-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 138px; padding: 18px; }
.theme-dark .transport-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 13px; font-size: 19px; }
.theme-dark .web-icon { color: #9bb1ff; background: #1c2947; }
.theme-dark .mt-icon { color: #72dbbb; background: #16372f; }
.theme-dark .transport-copy h2 { margin: 5px 0; color: #e5ebf6; }
.theme-dark .transport-copy p { margin: 0; color: #8b98ad; font-size: 10px; line-height: 1.5; }
.theme-dark .transport-side { display: flex; align-items: flex-end; flex-direction: column; gap: 10px; }
.theme-dark .transport-side .button { min-height: 34px; padding: 0 10px; font-size: 9px; }
.theme-dark .mtproxy-endpoint { display: flex; grid-column: 2 / -1; align-items: baseline; flex-wrap: wrap; gap: 7px 10px; padding-top: 10px; border-top: 1px solid #263142; }
.theme-dark .mtproxy-endpoint span { color: #7e8ca2; font-size: 8px; font-weight: 750; letter-spacing: .6px; }
.theme-dark .mtproxy-endpoint strong { color: #9bdcc9; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.theme-dark #mtproxy-connections { margin-left: auto; color: #8290a4; font-size: 9px; font-weight: 500; letter-spacing: 0; }
body.theme-dark { color: var(--ink); background: radial-gradient(ellipse at 78% 4%, rgb(66 89 160 / 12%), transparent 34%), var(--canvas); }
.theme-dark .sidebar { border-color: var(--line); background: #0e131c; }
.theme-dark .brand-name span, .theme-dark .nav-caption, .theme-dark .breadcrumbs,
.theme-dark .eyebrow, .theme-dark .muted, .theme-dark .page-footnote { color: #8995aa; }
.theme-dark .nav-link { color: #99a5b8; }
.theme-dark .nav-link:hover { color: var(--ink); background: #171f2c; }
.theme-dark .nav-link.active { color: #9db4ff; background: #192544; }
.theme-dark .nav-icon { color: #8793a7; }
.theme-dark .sidebar-footer { border-color: var(--line); }
.theme-dark .secure-chip, .theme-dark .quiet-button { color: #98a4b8; }
.theme-dark .secure-dot { box-shadow: 0 0 0 4px #173b34; }
.theme-dark .topbar { border-color: var(--line); background: rgb(11 15 22 / 88%); }
.theme-dark .breadcrumbs strong { color: #dce4f2; }
.theme-dark .live-pill { border-color: #1d4439; color: #81d2b1; background: #12241f; }
.theme-dark .live-pill i { box-shadow: 0 0 0 3px #193d32; }
.theme-dark .panel-card, .theme-dark .metric-card { border-color: #222c3b; background: linear-gradient(145deg, #131a26, #101620); box-shadow: var(--shadow-card); }
.theme-dark .button-secondary { border-color: #303b4d; color: #c1cbdb; background: #151d29; }
.theme-dark .button-secondary:hover { border-color: #506386; background: #1a2534; }
.theme-dark .button-danger { border-color: #5b303c; color: #ff9dab; background: #271820; }
.theme-dark .button-quiet-danger { color: #dc8592; }
.theme-dark .metric-card { position: relative; display: grid; min-height: 126px; align-content: space-between; gap: 13px; padding: 17px; border-radius: 15px; transition: transform .2s var(--ease-out), border-color .2s; }
.theme-dark .metric-card:hover { transform: translateY(-2px); border-color: #364867; }
.theme-dark .metric-label { color: #8290a6; font-size: 9px; font-weight: 800; letter-spacing: .8px; }
.theme-dark .metric-value { color: #edf2fb; font-family: Manrope, sans-serif; font-size: 23px; letter-spacing: -.8px; }
.theme-dark .metric-card small { color: #8290a4; font-size: 10px; }
.theme-dark .metric-bad { color: #ff9dab; }
.theme-dark .meter { height: 5px; overflow: hidden; border-radius: 8px; background: #242e3c; }
.theme-dark .meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5e83f3, #65dbba); transition: width .35s; }
.theme-dark .charts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 15px; }
.theme-dark .chart-card { min-width: 0; padding: 20px 20px 12px; }
.theme-dark .chart-heading, .theme-dark .profiles-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.theme-dark .chart-heading h2, .theme-dark .profiles-heading h2 { margin-top: 7px; color: #e5ebf6; }
.theme-dark .chart-live { color: #8895aa; font-size: 9px; }
.theme-dark .chart-area { min-height: 182px; padding-top: 12px; }
.theme-dark .chart-area svg { display: block; width: 100%; height: 172px; overflow: visible; }
.theme-dark .chart-gridline { stroke: #273140; stroke-width: 1; }
.theme-dark .chart-line { filter: drop-shadow(0 0 4px rgb(102 227 189 / 15%)); }
.theme-dark .chart-axis-label { fill: #778397; font: 11px Inter, sans-serif; }
.theme-dark .chart-empty-label { fill: #778397; font: 12px Inter, sans-serif; }
.theme-dark .chart-legend { display: flex; min-height: 23px; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; padding: 0 0 5px; color: #9aa6b9; font-size: 10px; }
.theme-dark .chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.theme-dark .chart-legend i { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.theme-dark .profiles-card { margin-top: 15px; overflow: hidden; padding: 22px 23px 15px; }
.theme-dark .profiles-heading { align-items: flex-start; margin-bottom: 19px; }
.theme-dark .profiles-heading .muted { margin: 7px 0 0; font-size: 11px; }
.theme-dark .profile-form { display: flex; align-items: end; gap: 9px; margin: 0 0 18px; padding: 15px; border: 1px solid #293548; border-radius: 13px; background: #0e141e; animation: page-in .2s var(--ease-out) both; }
.theme-dark .profile-form label { align-self: center; color: #a9b5c8; font-size: 11px; font-weight: 650; }
.theme-dark input:not([type=checkbox]) { border-color: #303b4d; color: #e7edf8; background: #0e141e; }
.theme-dark input:not([type=checkbox]):focus { border-color: #7895f2; background: #101826; }
.theme-dark input::placeholder { color: #69768a; }
.theme-dark .table-scroll { overflow-x: auto; border: 1px solid #222c3b; border-radius: 12px; }
.theme-dark .profile-table { width: 100%; border-collapse: collapse; min-width: 640px; text-align: left; }
.theme-dark .profile-table th { padding: 12px 14px; border-bottom: 1px solid #293344; color: #77859a; background: #121a26; font-size: 9px; letter-spacing: .65px; }
.theme-dark .profile-table td { padding: 13px 14px; border-bottom: 1px solid #202a38; color: #aeb9ca; font-size: 11px; }
.theme-dark .profile-table tr:last-child td { border-bottom: 0; }
.theme-dark .profile-table tbody tr { transition: background .15s; }
.theme-dark .profile-table tbody tr:hover { background: #161f2c; }
.theme-dark .profile-name { display: block; color: #e1e8f4; font-size: 12px; }
.theme-dark .profile-table td small { display: block; margin-top: 4px; color: #748198; font-size: 9px; }
.theme-dark .profile-status { display: inline-flex; padding: 5px 8px; border-radius: 20px; font-size: 9px; font-weight: 700; }
.theme-dark .profile-status.is-on { color: #7bd9b7; background: #15352d; }
.theme-dark .profile-status.is-off { color: #9aa5b8; background: #252d3a; }
.theme-dark .actions-column { text-align: right; }
.theme-dark .table-actions { display: flex; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.theme-dark .table-button { min-height: 31px; padding: 0 9px; font-size: 9px; }
.theme-dark .button-quiet-danger { border: 0; background: transparent; }
.theme-dark .table-empty { padding: 26px !important; color: #8793a7 !important; text-align: center; }
.theme-dark .table-note { margin: 12px 0 0; color: #8591a6; font-size: 10px; line-height: 1.5; }
.theme-dark .alert-stack { display: grid; gap: 9px; margin: -10px 0 16px; }
.theme-dark .alert-card { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border: 1px solid #5a482a; border-radius: 12px; color: #d7bf8e; background: #231e15; animation: page-in .22s var(--ease-out) both; }
.theme-dark .alert-error { border-color: #61313d; color: #f09aa7; background: #26171d; }
.theme-dark .alert-card strong { font-size: 11px; }
.theme-dark .alert-card p { margin: 4px 0 0; color: #9c8c72; font-size: 10px; }
.theme-dark .alert-error p { color: #bd8790; }
.theme-dark .alert-icon { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #e8c779; background: #44371e; font-weight: 800; }
.theme-dark .share-dialog { position: fixed; width: min(460px, calc(100% - 28px)); max-width: none; padding: 25px; border: 1px solid #303b4d; border-radius: 20px; color: var(--ink); background: #111824; box-shadow: 0 30px 100px rgb(0 0 0 / 55%); animation: page-in .2s var(--ease-out) both; }
.theme-dark .share-dialog::backdrop { background: rgb(3 6 11 / 74%); backdrop-filter: blur(5px); }
.theme-dark .share-dialog h2 { margin: 8px 35px 18px 0; color: #e5ebf6; }
.theme-dark .share-dialog > form { position: absolute; top: 13px; right: 14px; }
.theme-dark .dialog-close { width: 32px; height: 32px; border: 0; border-radius: 9px; color: #9aa7bb; background: #202a39; cursor: pointer; font-size: 20px; }
.theme-dark .qr-frame { display: grid; width: 220px; height: 220px; place-items: center; margin: 0 auto 13px; border: 1px solid #293548; border-radius: 15px; background: #f7f8fb; }
.theme-dark .qr-frame img { width: 194px; height: 194px; image-rendering: pixelated; }
.theme-dark .share-hint { margin: 0 0 15px; color: #929eb1; font-size: 11px; text-align: center; }
.theme-dark .share-link-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.theme-dark .share-link-row input { min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.theme-dark .share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.theme-dark .share-actions .button { min-height: 38px; font-size: 10px; }
.theme-dark .toast { border-color: #285344; color: #8ce0c1; background: #12251f; }
.theme-dark .toast.error { border-color: #61313d; color: #ff9dab; background: #281920; }
.theme-dark .skeleton { background: #202a38; }
.theme-dark .skeleton::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / 7%), transparent); }
.theme-dark .login-view { background: radial-gradient(ellipse at 70% 15%, #171e35 0, transparent 36%), radial-gradient(ellipse at 8% 82%, #10271f 0, transparent 32%), var(--canvas); }
.theme-dark .stack-form > label { color: #a9b5c8; }

@media (max-width: 1020px) {
  .theme-dark .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .theme-dark .transport-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .theme-dark .heading-actions { align-items: flex-end; }
  .theme-dark .sidebar { background: rgb(14 19 28 / 94%); }
  .theme-dark .side-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-dark .nav-link { flex-direction: column; justify-content: center; gap: 2px; }
  .theme-dark .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .theme-dark .metric-card { min-height: 112px; padding: 13px; }
  .theme-dark .metric-value { font-size: 19px; }
  .theme-dark .charts-grid { grid-template-columns: 1fr; gap: 10px; }
  .theme-dark .chart-card { padding: 16px 14px 8px; }
  .theme-dark .profiles-card { padding: 17px 13px 12px; }
  .theme-dark .profiles-heading { align-items: flex-start; }
  .theme-dark .profiles-heading .button { min-height: 35px; padding: 0 9px; font-size: 9px; }
  .theme-dark .profile-form { align-items: stretch; flex-direction: column; }
  .theme-dark .transport-card { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 14px; }
  .theme-dark .transport-icon { width: 36px; height: 36px; }
  .theme-dark .transport-side { grid-column: 1 / -1; align-items: center; flex-direction: row; justify-content: space-between; }
  .theme-dark .mtproxy-endpoint { grid-column: 1 / -1; }
  .theme-dark #mtproxy-connections { margin-left: 0; }
  .theme-dark .share-dialog { padding: 21px 16px 17px; }
  .theme-dark .qr-frame { width: 200px; height: 200px; }
  .theme-dark .qr-frame img { width: 176px; height: 176px; }
}

/* Material-style proxy dashboard: calmer surfaces, readable metrics and data grid. */
:root {
  --radius-card: 10px;
  --shadow-card: 0 1px 3px rgb(0 0 0 / 22%), 0 5px 16px rgb(0 0 0 / 10%);
}
.theme-dark .metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.theme-dark .metric-card {
  min-height: 132px;
  gap: 10px;
  padding: 18px 19px;
  border-color: #2a3443;
  border-radius: 10px;
  background: #151b25;
  box-shadow: 0 1px 2px rgb(0 0 0 / 17%);
}
.theme-dark .metric-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--metric-accent, #7895f2);
  content: "";
  opacity: .85;
}
.theme-dark #metrics-grid > .metric-card:nth-child(1) { --metric-accent: #55c9a2; }
.theme-dark #metrics-grid > .metric-card:nth-child(2) { --metric-accent: #7798ff; }
.theme-dark #metrics-grid > .metric-card:nth-child(3) { --metric-accent: #aa8af2; }
.theme-dark #metrics-grid > .metric-card:nth-child(4) { --metric-accent: #55c9a2; }
.theme-dark #metrics-grid > .metric-card:nth-child(5) { --metric-accent: #7798ff; }
.theme-dark #metrics-grid > .metric-card:nth-child(6) { --metric-accent: #edb56c; }
.theme-dark #metrics-grid > .metric-card:nth-child(7) { --metric-accent: #edb56c; }
.theme-dark #metrics-grid > .metric-card:nth-child(8) { --metric-accent: #aa8af2; }
.theme-dark .metric-card:hover { transform: translateY(-2px); border-color: #3d4d65; background: #18212d; }
.theme-dark .metric-label { color: #a9b4c6; font-size: 12px; font-weight: 500; letter-spacing: .1px; }
.theme-dark .metric-value { color: #f2f5fa; font-family: Roboto, "Segoe UI", sans-serif; font-size: 27px; font-weight: 600; letter-spacing: -.45px; line-height: 1.2; }
.theme-dark .metric-card small { color: #8996aa; font-size: 11px; }
.theme-dark #metric-ready:not(.metric-bad) { color: #72d7b5; }
.theme-dark .metric-bad { color: #ff9ca8; }
.theme-dark .meter { height: 6px; background: #293443; }
.theme-dark .meter i { background: var(--metric-accent, linear-gradient(90deg, #6988ed, #55c9a2)); }
.theme-dark .transport-card { border-color: #2a3443; border-radius: 10px; background: #151b25; box-shadow: 0 1px 2px rgb(0 0 0 / 17%); }
.theme-dark .chart-card { border-color: #2a3443; border-radius: 10px; background: #151b25; box-shadow: 0 1px 2px rgb(0 0 0 / 17%); }
.theme-dark .chart-heading { align-items: center; margin-bottom: 8px; }
.theme-dark .chart-heading .metric-label { color: #8f9db2; font-size: 10px; font-weight: 700; letter-spacing: .65px; text-transform: uppercase; }
.theme-dark .chart-heading h2 { margin-top: 5px; font-size: 17px; font-weight: 600; letter-spacing: -.2px; }
.theme-dark .chart-live { padding: 6px 9px; border: 1px solid #2a3545; border-radius: 20px; background: #111823; font-size: 10px; white-space: nowrap; }
.theme-dark .chart-area { min-height: 204px; }
.theme-dark .chart-area svg { height: 190px; }
.theme-dark .chart-gridline { stroke: #2a3442; stroke-dasharray: 3 5; }
.theme-dark .chart-gridline-vertical { opacity: .48; }
.theme-dark .chart-line { filter: drop-shadow(0 2px 4px rgb(102 227 189 / 19%)); }
.theme-dark .chart-area-fill { pointer-events: none; }
.theme-dark .chart-point { stroke: #151b25; stroke-width: 2.5; filter: drop-shadow(0 1px 4px rgb(0 0 0 / 35%)); }
.theme-dark .chart-legend { justify-content: flex-start; padding-left: 4px; color: #b1bccd; font-size: 11px; }
.theme-dark .chart-legend i { width: 9px; height: 9px; }
.theme-dark .profiles-card { border-color: #2a3443; border-radius: 10px; background: #151b25; box-shadow: 0 1px 2px rgb(0 0 0 / 17%); }
.theme-dark .profiles-heading { align-items: center; margin-bottom: 16px; }
.theme-dark .profiles-heading .metric-label { color: #8f9db2; font-size: 10px; letter-spacing: .65px; }
.theme-dark .profiles-heading h2 { font-size: 18px; font-weight: 600; }
.theme-dark .table-scroll { border-color: #303b4b; border-radius: 8px; }
.theme-dark .profile-table { min-width: 680px; }
.theme-dark .profile-table th {
  position: sticky;
  top: 0;
  padding: 13px 16px;
  border-bottom: 1px solid #354153;
  color: #bac5d5;
  background: #1b2431;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.theme-dark .profile-table td { padding: 15px 16px; border-bottom-color: #283342; color: #bac5d5; font-size: 12px; }
.theme-dark .profile-table tbody tr:nth-child(even) { background: #171e29; }
.theme-dark .profile-table tbody tr:hover { background: #202b3a; }
.theme-dark .profile-name { color: #e6ecf5; font-size: 13px; font-weight: 600; }
.theme-dark .profile-table td small { color: #8794a9; font-size: 10px; }
.theme-dark .profile-status { padding: 5px 10px; border: 1px solid transparent; border-radius: 5px; font-size: 11px; font-weight: 600; }
.theme-dark .profile-status.is-on { border-color: #2b5b4c; color: #82dfbd; background: #19352e; }
.theme-dark .profile-status.is-off { border-color: #3a4555; color: #b1bccd; background: #252e3b; }
.theme-dark .table-button { min-height: 34px; padding: 0 11px; border-radius: 5px; font-size: 10px; }
.theme-dark .button-primary, .theme-dark .button-secondary { border-radius: 6px; }
.theme-dark .table-note { color: #96a2b5; font-size: 11px; }

@media (max-width: 1020px) {
  .theme-dark .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .theme-dark .metrics-grid { gap: 9px; }
  .theme-dark .metric-card { min-height: 116px; padding: 15px 13px; }
  .theme-dark .metric-label { font-size: 10px; }
  .theme-dark .metric-value { font-size: 22px; }
  .theme-dark .chart-heading { align-items: flex-start; flex-direction: column; gap: 9px; }
  .theme-dark .profiles-heading { align-items: flex-start; }
}