:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0d0d0d;
  color: #f7f7f7;
}

* { box-sizing: border-box; }
html, body { max-width: 100%; }
body { margin: 0; min-height: 100vh; }

.shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 10%, rgba(106,106,106, .24), transparent 34%),
    radial-gradient(circle at 90% 85%, rgba(167,167,167, .14), transparent 30%),
    #0d0d0d;
}

.card {
  width: min(100%, 440px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  padding: 32px;
  background: rgba(23,23,23, .9);
  box-shadow: 0 28px 80px rgba(0,0,0,.42);
  backdrop-filter: blur(18px);
}
.card:has(.status-grid) { width: min(100%, 860px); }
.card:has(.control-root) { width: min(100%, 980px); }

.eyebrow { margin: 0 0 10px; color: #a2a2a2; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(30px, 7vw, 42px); line-height: 1.05; letter-spacing: -.04em; }
.lead { margin: 14px 0 28px; color: #b5b5b5; line-height: 1.55; }
form { display: grid; gap: 17px; }
label { display: grid; gap: 8px; color: #e1e1e1; font-size: 14px; font-weight: 650; }
input {
  width: 100%;
  border: 1px solid #3a3a3a;
  border-radius: 13px;
  padding: 13px 14px;
  background: #131313;
  color: #ffffff;
  font: inherit;
  outline: none;
}
input:focus { border-color: #8c8c8c; box-shadow: 0 0 0 4px rgba(140,140,140,.14); }
button, .button {
  border: 0;
  border-radius: 13px;
  padding: 13px 16px;
  background: linear-gradient(135deg, #878787, #6b6b6b);
  color: white;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
button:hover, .button:hover { filter: brightness(1.08); }
.secondary { background: #292929; }
.actions { display: flex; gap: 10px; margin-top: 22px; }
.actions > * { flex: 1; }
.message { min-height: 20px; margin: 0; font-size: 14px; color: #ababab; }
.message.success { color: #c4c4c4; }
.hint { margin: 22px 0 0; color: #7c7c7c; font-size: 13px; text-align: center; }
.status-grid { display: grid; gap: 14px; }
.status-grid section { padding: 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(255,255,255,.025); }
.status-grid h2 { margin: 0 0 13px; font-size: 15px; }
.status-item { display: flex; align-items: center; gap: 11px; padding: 8px 0; }
.status-item + .status-item { border-top: 1px solid rgba(255,255,255,.06); }
.status-item strong, .status-item small { display: block; }
.status-item strong { font-size: 14px; }
.status-item small { margin-top: 3px; color: #8d8d8d; font-size: 12px; }
.dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.04); }
.dot.ok { background: #b6b6b6; }
.dot.bad { background: #919191; }
.control-root { min-height: 160px; }
.family-stack { display: grid; gap: 16px; }
.family-add-form[hidden] { display: none; }
.family-add-toggle { width: 100%; margin-top: 16px; }
.form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.control-grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.35fr); gap: 16px; }
.control-panel { border: 1px solid rgba(255,255,255,.09); border-radius: 18px; padding: 20px; background: rgba(255,255,255,.025); }
.control-panel h2 { margin: 0 0 18px; font-size: 20px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-heading span, .tag { border-radius: 999px; padding: 5px 9px; background: #2d2d2d; color: #b7b7b7; font-size: 11px; font-weight: 750; }
.control-list { display: grid; gap: 2px; }
.control-row { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.07); }
.control-row:first-child { border-top: 0; }
.control-row strong, .control-row small { display: block; overflow-wrap: anywhere; }
.control-row small { margin-top: 4px; color: #929292; font-size: 12px; }
.person-mark, .device-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(135deg,#7d7d7d,#585858); font-weight: 800; }
.device-mark { background: #292929; color: #b8b8b8; }
.vpn-live-dot { width: 12px; height: 12px; justify-self: center; border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,255,255,.05); }
.vpn-live-dot.online { background: #9f9f9f; box-shadow: 0 0 0 5px rgba(159,159,159,.13), 0 0 12px rgba(159,159,159,.45); }
.vpn-live-dot.offline { background: #747474; box-shadow: 0 0 0 5px rgba(116,116,116,.13); }
.row-actions { display: flex; gap: 6px; }
.mini { padding: 8px 10px; border-radius: 9px; font-size: 12px; background: #313131; }
.mini.danger { color: #afafaf; background: #292929; }
.control-row.disabled { opacity: .55; }
.panel-note { margin: 18px 0 0; color: #888888; font-size: 12px; line-height: 1.5; }
.vpn-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 16px; }
.vpn-metrics article { padding: 16px; border-radius: 16px; background: #151515; border: 1px solid rgba(255,255,255,.08); }
.vpn-metrics span, .vpn-metrics small, .vpn-metrics strong { display: block; }
.vpn-metrics span, .vpn-metrics small { color: #888888; font-size: 11px; }
.vpn-metrics strong { margin: 7px 0 4px; font-size: 19px; }.good { color: #bebebe; }.bad { color: #9f9f9f; }
.control-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.72); backdrop-filter: blur(8px); }
.control-modal section { position: relative; width: min(100%,420px); padding: 28px; border-radius: 22px; background: #191919; border: 1px solid rgba(255,255,255,.12); text-align: center; }
.control-modal h2 { margin: 0 0 8px; }.control-modal p { color: #a5a5a5; line-height: 1.5; }.control-modal img { display: block; width: min(100%,280px); margin: 18px auto; border-radius: 15px; background: white; padding: 8px; }
.modal-close { position: absolute; top: 10px; right: 10px; width: 36px; padding: 6px; background: transparent; font-size: 25px; }.control-modal small { display: block; min-height: 18px; margin-top: 10px; color: #bebebe; }
@media (max-width: 520px) { .card { padding: 25px 21px; border-radius: 20px; } .actions { flex-direction: column; } }
@media (max-width: 760px) { .control-grid { grid-template-columns: 1fr; } .vpn-metrics { grid-template-columns: 1fr; } .vpn-row { grid-template-columns: 36px minmax(0,1fr); } .row-actions { grid-column: 2; flex-wrap: wrap; } }

/* Unified glass interface */
:root, html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-2: #000000;
  --ink: #f5f5f5;
  --muted: #a0a0a0;
  --glass: rgba(22,22,22,.65);
  --glass-strong: rgba(30,30,30,.85);
  --line: rgba(255,255,255,.17);
  --field: rgba(255,255,255,.06);
  --accent: #eeeeee;
  --accent-2: #bcbcbc;
  --danger: #dedede;
  background: var(--bg);
  color: var(--ink);
}
body { color: var(--ink); background: var(--bg); }
.matrix-rain {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .7;
}
html[data-theme="dark"] .matrix-rain { display: block; }
.shell {
  position: relative;
  z-index: 1;
  place-items: start center;
  padding: 22px;
  background:
    radial-gradient(circle at 8% 4%, rgba(148,148,148,.2), transparent 34%),
    radial-gradient(circle at 90% 12%, rgba(177,177,177,.14), transparent 30%),
    radial-gradient(circle at 55% 95%, rgba(100,100,100,.15), transparent 34%),
    linear-gradient(145deg, var(--bg), var(--bg-2));
  background-attachment: fixed;
}
html[data-theme="dark"] .shell {
  background-color: transparent;
  background-image:
    radial-gradient(circle at 50% -10%, rgba(194,194,194,.1), transparent 42%);
  background-size: auto;
}

@media (prefers-reduced-motion: reduce) { .matrix-rain { display: none !important; } }
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] .glass-nav,
html[data-theme="dark"] .status-item strong { text-shadow: 0 0 12px rgba(200,200,200,.22); }
.page-frame { width: min(1180px, 100%); min-width: 0; display: grid; gap: 16px; }
.card:has(.planner-root), .card:has(.finance-root) { width: 100%; }
.planner-root { display: grid; gap: 16px; }
.planner-toolbar { display: flex; justify-content: flex-end; }
.planner-toolbar button { min-width: 0; padding: 9px 15px; border-radius: 14px; }
.profile-panel[hidden] { display: none; }
.planner-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.planner-summary article { padding: 18px; display: grid; gap: 5px; border-radius: 20px; }
.planner-summary small, .planner-summary span, .planner-note { color: var(--muted); }
.planner-summary strong { font-size: clamp(23px,4vw,34px); }
.planner-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.planner-panel { min-width: 0; padding: 18px; border-radius: 22px; }
.planner-panel h2 { margin: 0 0 15px; }
.planner-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.planner-form.compact { grid-template-columns: repeat(2,minmax(0,1fr)); }
.planner-form.inline { grid-template-columns: auto minmax(120px,1fr) auto; margin-top: 14px; }
.planner-form input, .planner-form select { min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; color: var(--ink); background: var(--field); font: inherit; }
.planner-form button { min-width: 120px; }
.planner-form .planner-wide { grid-column: 1 / -1; }
.plan-numbers { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 10px; margin-bottom: 14px; }
.plan-numbers b { color: var(--accent); font-size: 24px; }
.plan-numbers span { color: var(--muted); }
.meal-plan { display: grid; gap: 7px; }
.meal-plan p, .planner-note { margin: 0; line-height: 1.45; font-size: 13px; }
.planner-note { margin-top: 14px; }
.planner-chart { width: 100%; height: auto; min-height: 210px; overflow: visible; }
.planner-chart .chart-weight-line { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 60%,transparent)); }
.planner-chart .chart-grid { stroke: color-mix(in srgb,var(--text) 16%,transparent); stroke-width: 1; }
.planner-chart .chart-tick { stroke: color-mix(in srgb,var(--text) 35%,transparent); stroke-width: 1; }
.planner-chart .chart-axis-label,
.planner-chart .chart-axis-title { fill: var(--muted); font-size: 12px; font-weight: 650; }
.planner-chart .chart-goal { stroke: color-mix(in srgb,var(--accent) 62%,transparent); stroke-width: 2; stroke-dasharray: 7 6; }
.planner-chart .chart-goal-label { fill: var(--accent); font-size: 11px; font-weight: 750; }
.planner-chart .chart-point { fill: var(--panel); stroke: var(--accent); stroke-width: 3; }
@media (max-width: 600px) {
  .planner-chart { min-height: 190px; }
  .planner-chart .chart-axis-label,
  .planner-chart .chart-axis-title { font-size: 11px; }
}
.planner-empty { padding: 35px; color: var(--muted); text-align: center; }
.planner-records { margin-top: 14px; display: grid; }
.planner-records > div { min-width: 0; padding: 10px 2px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
.planner-records span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.planner-records small { display: block; margin-bottom: 3px; color: var(--muted); }
.planner-records button { width: 30px; height: 30px; min-width: 30px; padding: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.planner-records b.income { color: #bababa; }
.planner-records b.expense { color: #909090; }
.finance-categories { display: grid; gap: 8px; }
.finance-categories p { margin: 0; padding: 10px 0; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }
.finance-root { display: grid; gap: 14px; }
.finance-root h2 { margin: 0; font-size: 17px; }
.finance-connection { min-width: 0; padding: 14px 16px; border-radius: 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.finance-connection > div:first-child { min-width: 0; display: flex; align-items: center; gap: 12px; }
.finance-connection p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.finance-connection > button { min-width: 104px; padding: 10px 15px; }
.finance-sync-icon { display: none; font-size: 22px; line-height: 1; }
.finance-status-dot { width: 12px; height: 12px; flex: 0 0 auto; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 7px color-mix(in srgb,var(--muted) 10%,transparent); }
.finance-status-dot.ok { background: #bababa; box-shadow: 0 0 0 7px rgba(186,186,186,.1),0 0 18px rgba(186,186,186,.35); }
.finance-status-dot.error { background: #909090; box-shadow: 0 0 0 7px rgba(144,144,144,.1),0 0 18px rgba(144,144,144,.3); }
.finance-status-dot.waiting { background: #c8c8c8; box-shadow: 0 0 0 7px rgba(200,200,200,.1); }
.finance-connection-setup { align-items: stretch; flex-direction: column; }
.finance-mailbox-form { display: grid; grid-template-columns: minmax(180px,1fr) minmax(180px,1fr) auto; gap: 9px; }
.finance-mailbox-form label { min-width: 0; display: grid; gap: 4px; }
.finance-mailbox-form label span { padding-left: 6px; color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; }
.finance-mailbox-form input,
.finance-toolbar select,
.finance-filters input,
.finance-filters select,
.finance-transaction-copy select { min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; color: var(--ink); background: var(--field); font: inherit; }
.finance-mailbox-form input[readonly] { color: var(--muted); }
.finance-spinner { width: 17px; height: 17px; display: inline-block; border: 2px solid color-mix(in srgb,var(--ink) 24%,transparent); border-top-color: var(--accent); border-radius: 50%; animation: finance-spin .8s linear infinite; }
@keyframes finance-spin { to { transform: rotate(360deg); } }
.finance-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.finance-toolbar select { width: auto; padding: 9px 34px 9px 13px; font-size: 12px; font-weight: 750; text-transform: capitalize; }
.finance-upload { position: relative; cursor: pointer; }
.finance-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.finance-upload span { min-height: 39px; padding: 9px 14px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--field); font-size: 12px; font-weight: 750; }
.finance-summary strong.income,
.finance-transaction-amount.income strong { color: #bababa; }
.finance-summary strong.expense,
.finance-transaction-amount.expense strong { color: #909090; }
.finance-summary article { min-width: 0; overflow: hidden; }
.finance-summary { grid-template-columns: repeat(4,minmax(0,1fr)); }
.finance-summary strong { max-width: 100%; font-size: clamp(17px,2.1vw,26px); line-height: 1.08; letter-spacing: -.035em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.finance-summary-label { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.finance-summary-label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finance-summary-label b { flex: 0 0 auto; padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--accent); background: var(--field); font-size: 9px; letter-spacing: .04em; }
.finance-breakdown-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; align-items: start; }
.finance-section-title { min-height: 32px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.finance-section-title > span { min-width: 31px; height: 31px; padding: 0 8px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--field); font-size: 11px; font-weight: 800; }
.finance-category-bars { display: grid; gap: 5px; }
.finance-category-bars button { min-width: 0; padding: 9px 10px; display: grid; gap: 7px; border: 0; border-radius: 14px; color: var(--ink); background: transparent; box-shadow: none; text-align: left; }
.finance-category-bars button:hover { background: color-mix(in srgb,var(--accent) 7%,transparent); }
.finance-category-bars button span { display: flex; justify-content: space-between; gap: 12px; }
.finance-category-bars button b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.finance-category-bars button small { min-width: 0; max-width: 58%; flex: 0 1 auto; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.finance-category-bars button i { width: var(--finance-bar); height: 5px; display: block; border-radius: 999px; background: linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow: 0 0 10px color-mix(in srgb,var(--accent) 25%,transparent);  color: #0a0a0a; }
.finance-income-chart .finance-category-bars button i { background: linear-gradient(90deg,#afafaf,#d4d4d4); box-shadow: 0 0 10px rgba(175,175,175,.25); }
.finance-transactions-toggle { width: 100%; min-width: 0; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 20px; color: var(--ink); text-align: left; }
.finance-transactions-toggle > span:first-child { font-size: 13px; font-weight: 800; }
.finance-transactions-toggle > span:last-child { display: flex; align-items: center; gap: 8px; }
.finance-transactions-toggle b { min-width: 30px; height: 30px; padding: 0 8px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--field); font-size: 10px; }
.finance-transactions-toggle i { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); background: var(--field); font-size: 17px; font-style: normal; }
.finance-filters { margin-bottom: 8px; display: grid; grid-template-columns: minmax(0,1fr) minmax(150px,.55fr); gap: 8px; }
.finance-filters input,
.finance-filters select { padding: 9px 11px; font-size: 12px; }
.finance-transaction-list { display: grid; }
.finance-transaction-list article { min-width: 0; padding: 10px 2px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
.finance-transaction-date { width: 38px; height: 38px; display: grid; place-content: center; border: 1px solid var(--line); border-radius: 13px; background: var(--field); text-align: center; }
.finance-transaction-date strong { font-size: 14px; line-height: 1; }
.finance-transaction-date span { margin-top: 2px; color: var(--muted); font-size: 8px; text-transform: uppercase; }
.finance-transaction-copy { min-width: 0; display: grid; gap: 5px; }
.finance-transaction-copy > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.finance-transaction-copy select { width: fit-content; max-width: 100%; padding: 4px 24px 4px 7px; border-radius: 9px; color: var(--muted); font-size: 10px; }
.finance-transaction-amount { display: grid; justify-items: end; gap: 3px; white-space: nowrap; }
.finance-transaction-amount strong { max-width: 100%; overflow: hidden; font-size: 12px; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.finance-transaction-amount small { color: var(--muted); font-size: 9px; }
.finance-import-history { padding: 0; overflow: hidden; border-radius: 20px; }
.finance-import-history summary { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 12px; font-weight: 800; list-style: none; }
.finance-import-history summary::-webkit-details-marker { display: none; }
.finance-import-history summary span { color: var(--muted); }
.finance-import-history > div { padding: 0 16px 14px; display: grid; }
.finance-import-history p { margin: 0; padding: 10px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); }
.finance-import-history p span,
.finance-import-history p strong { min-width: 0; display: grid; gap: 3px; }
.finance-import-history p b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.finance-import-history p small { color: var(--muted); font-size: 9px; font-weight: 600; }
.finance-import-history p > strong { color: var(--accent); font-size: 12px; text-align: right; }
@media (max-width:760px) { .planner-summary, .planner-grid { grid-template-columns: 1fr; } .planner-form, .planner-form.compact { grid-template-columns: 1fr 1fr; } }
@media (max-width:900px) { .planner-summary.finance-summary { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:480px) { .planner-form, .planner-form.compact, .planner-form.inline { grid-template-columns: 1fr; } }
@media (max-width:760px) {
  .planner-summary.finance-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .finance-mailbox-form { grid-template-columns: 1fr; }
  .finance-breakdown-grid { grid-template-columns: 1fr; }
  .finance-connection { padding: 13px; }
}
@media (max-width:520px) {
  .finance-toolbar { justify-content: stretch; }
  .finance-toolbar select,
  .finance-upload { flex: 1; }
  .finance-upload span { width: 100%; }
  .finance-filters { grid-template-columns: 1fr; }
  .finance-transaction-list article { grid-template-columns: 36px minmax(0,1fr); }
  .finance-transaction-amount { grid-column: 2; grid-row: 2; margin-top: -2px; justify-items: start; }
  .finance-summary strong { font-size: clamp(16px,5.1vw,22px); }
  .finance-transaction-date { width: 36px; height: 36px; }
  .finance-connection { align-items: flex-start; }
  .finance-connection > button { width: 40px; height: 40px; min-width: 40px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
  .finance-sync-label { display: none; }
  .finance-sync-icon { display: block; }
}
.glass-nav,
.card,
.glass-panel,
.control-panel,
.status-grid section,
.vpn-metrics article {
  border: 1px solid var(--line);
  background: var(--glass);
  box-shadow: 0 20px 55px rgba(53,53,53,.16), inset 0 1px 0 rgba(255,255,255,.42);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}
html[data-theme="dark"] .glass-nav,
html[data-theme="dark"] .card,
html[data-theme="dark"] .glass-panel,
html[data-theme="dark"] .control-panel,
html[data-theme="dark"] .status-grid section,
html[data-theme="dark"] .vpn-metrics article {
  border-color: rgba(202,202,202,.25);
  background: linear-gradient(145deg, rgba(15,15,15,.24), rgba(5,5,5,.12));
  box-shadow: 0 24px 70px rgba(0,0,0,.3), inset 0 1px 0 rgba(220,220,220,.1);
  backdrop-filter: blur(3px) saturate(115%);
  -webkit-backdrop-filter: blur(3px) saturate(115%);
}
.glass-nav {
  position: sticky;
  top: 12px;
  z-index: 50;
  width: min(calc(100% - 44px),1180px);
  margin: 22px auto 0;
  align-self: start;
  min-height: 58px;
  padding: 8px 10px 8px 16px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: 22px;
}
.glass-nav > a { color: var(--ink); font-size: 20px; font-weight: 850; text-decoration: none; }
.alex-brand { display: inline-flex; align-items: center; gap: 9px; }
.alex-brand img { width: 36px; height: 36px; border-radius: 11px; box-shadow: 0 8px 20px rgba(0,0,0,.24); }
.menu-toggle { display: none; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border-radius: 14px; font-size: 21px; }
.menu-backdrop { display: none; }
.glass-nav nav { min-width: 0; flex: 1; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.glass-nav nav::-webkit-scrollbar { display: none; }
.glass-nav nav a { padding: 9px 12px; border-radius: 13px; color: var(--muted); font-size: 13px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.glass-nav nav a:hover { color: var(--ink); background: rgba(255,255,255,.22); }
.glass-nav nav .nav-icon { flex: 0 0 38px; width: 38px; height: 36px; padding: 7px; display: grid; place-items: center; }
.glass-nav nav .nav-icon svg { width: 23px; height: 23px; fill: currentColor; }
.glass-nav nav .nav-mail-link { position: relative; overflow: visible; }
.nav-mail-badge { position: absolute; z-index: 2; top: 14px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border: 2px solid #111111; border-radius: 999px; color: #ffffff; background: #ff3b30; box-shadow: 0 3px 10px rgba(255,59,48,.48); font-size: 9px; font-weight: 850; line-height: 1; }
.glass-nav nav .nav-logout { flex: 0 0 38px; display: block; }
.glass-nav nav .nav-logout .nav-icon { width: 38px; height: 36px; padding: 7px; border-radius: 13px; color: var(--muted); background: transparent; }
.glass-nav nav .nav-logout .nav-icon:hover { color: var(--ink); background: rgba(255,255,255,.22); }
.glass-nav.media-only-nav nav { flex: 0 0 auto; }
.glass-nav nav .nav-euro { font-size: 24px; font-weight: 650; line-height: 1; }
.glass-nav nav a[href="/vpn"] { flex: 0 0 38px; width: 38px; height: 36px; padding: 7px 2px; display: grid; place-items: center; font-size: 10px; letter-spacing: -.02em; }
.glass-nav nav .nav-door { flex: 0 0 38px; width: 38px; height: 36px; padding: 7px; display: grid; place-items: center; }
.nav-door svg { width: 22px; height: 22px; fill: currentColor; }
.theme-toggle { flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border-radius: 14px; font-size: 21px; }
.header-player { min-width: 0; display: flex; align-items: center; gap: 5px; }
.header-player audio { display: none; }
.header-player > span { max-width: 125px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
.header-player button { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: rgba(255,255,255,.18); font-size: 13px; }
.header-player #headerPlay { color: #0a0a0a; background: var(--accent); }
.header-player button.active { color: #0a0a0a; background: var(--accent); }
.card { width: min(100%, 680px); min-width: 0; justify-self: center; padding: 30px; border-radius: 28px; }
.login-frame { min-height: calc(100dvh - 44px); place-content: center; }
.login-card { width: min(100%, 420px); }
.card:has(.status-grid), .card:has(.control-root), .card:has(.media-root), .card:has(.mail-root) { width: 100%; }
.eyebrow { color: var(--accent); }
h1, h2, h3, label { color: var(--ink); }
.card > .eyebrow { margin-bottom: 24px; }
.lead, .hint, .panel-note, .control-row small, .status-item small, .vpn-metrics span, .vpn-metrics small { color: var(--muted); }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 12px 14px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
button, .button { border-radius: 15px; background: linear-gradient(135deg, var(--accent), var(--accent-2));  color: #0a0a0a; }
.secondary, .mini { color: var(--ink); background: rgba(255,255,255,.18); }
.control-panel, .status-grid section, .vpn-metrics article { border-radius: 20px; }
.panel-heading span, .tag { color: var(--muted); background: rgba(255,255,255,.16); }
.control-row, .status-item + .status-item { border-color: var(--line); }
.control-modal { background: rgba(20,20,20,.62); }
.control-modal section { border-color: var(--line); background: var(--glass-strong); backdrop-filter: blur(28px); }

.media-tabs { margin-bottom: 18px; display: flex; gap: 7px; overflow-x: auto; }
.media-tabs button { padding: 10px 15px; color: var(--muted); background: rgba(255,255,255,.16); }
.media-tabs button.active { color: #0a0a0a; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.media-root { min-height: 260px; }
.media-tools { margin-bottom: 15px; padding: 14px; border-radius: 20px; }
.compact-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; align-items: center; }
.compact-form > *, .dual-tools > *, .upload-form > * { min-width: 0; }
.compact-form button, .file-button { min-height: 44px; display: grid; place-items: center; padding: 10px 14px; border-radius: 14px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0a0a0a; font-weight: 750; cursor: pointer; white-space: nowrap; }
.file-button input { display: none; }
.dual-tools { display: grid; gap: 12px; }
.upload-form { grid-template-columns: minmax(0,1fr) minmax(150px,220px) auto auto; }
.album-stack, .track-list { display: grid; gap: 12px; }
.album-card { border-radius: 22px; overflow: hidden; }
.album-card summary { padding: 13px; display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.album-card summary::-webkit-details-marker { display: none; }
.album-card summary > span { width: 54px; height: 54px; display: grid; place-items: center; overflow: hidden; border-radius: 16px; background: rgba(255,255,255,.2); font-size: 27px; }
.album-card summary img { width: 100%; height: 100%; object-fit: cover; }
.album-card summary strong, .album-card summary small { display: block; }
.album-card summary small { margin-top: 4px; color: var(--muted); }
.album-card summary b { color: var(--muted); font-size: 20px; }
.album-upload { margin: 0 13px 13px; grid-template-columns: minmax(0,1fr) auto auto; }
.media-grid, .video-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 0 13px 13px; }
.video-grid { padding: 0; }
.media-tile, .video-card { min-width: 0; overflow: hidden; border-radius: 18px; background: rgba(255,255,255,.12); }
.photo-open { width: 100%; padding: 0; display: block; border: 0; border-radius: 0; background: transparent; }
.photo-tile { position: relative; aspect-ratio: 4 / 3; content-visibility: auto; contain-intrinsic-size: 240px 180px; background: linear-gradient(110deg,rgba(255,255,255,.08) 30%,rgba(255,255,255,.2) 45%,rgba(255,255,255,.08) 60%); background-size: 220% 100%; animation: photo-loading 1.5s linear infinite; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); transition: transform .18s ease,box-shadow .18s ease; }
.photo-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.16); }
.photo-tile .photo-open, .photo-tile .photo-open img { height: 100%; }
.photo-tile .photo-open img { aspect-ratio: auto; }
.photo-tile > div { position: absolute; right: 0; bottom: 0; left: 0; padding: 28px 10px 9px; color: #ffffff; background: linear-gradient(transparent,rgba(0,0,0,.68)); pointer-events: none; }
.photo-tile > div span { text-shadow: 0 1px 4px #000000; }
@keyframes photo-loading { to { background-position: -220% 0; } }
@media (prefers-reduced-motion:reduce) { .photo-tile { animation: none; } }
.photo-delete { position: absolute; top: 7px; right: 7px; z-index: 2; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #ffffff; background: rgba(0,0,0,.62); font-size: 21px; line-height: 1; box-shadow: 0 3px 12px rgba(0,0,0,.35); }
.photo-album-controls { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 4px; }
.photo-album-controls.top { margin: 0 0 4px; }
.photo-page-status { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 3px; color: var(--muted); font-size: 12px; }
.photo-page-status b { padding: 5px 9px; border-radius: 999px; color: var(--ink); background: rgba(255,255,255,.16); }
.album-card [data-album-grid] { scroll-margin-top: 150px; }
.photo-album-controls button { width: 100%; }
.album-card summary { scroll-margin-top: 92px; }
.photo-lightbox { position: fixed; inset: 0; z-index: 2000; width: 100vw; height: 100dvh; display: flex; align-items: center; justify-content: center; padding: max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); background: rgba(0,0,0,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.photo-lightbox img { display: block; max-width: calc(100vw - 36px); max-height: calc(100dvh - 36px); margin: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 20px 80px rgba(0,0,0,.55); }
.photo-lightbox-close { position: fixed; top: max(14px,env(safe-area-inset-top)); right: max(14px,env(safe-area-inset-right)); z-index: 1; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #ffffff; background: rgba(0,0,0,.55); font-size: 30px; line-height: 1; }
.photo-lightbox-nav { position: fixed; top: 50%; z-index: 1; width: 48px; height: 58px; padding: 0; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.22); border-radius: 18px; color: #ffffff; background: rgba(0,0,0,.5); font-size: 42px; line-height: 1; }
.photo-lightbox-nav.previous { left: max(12px,env(safe-area-inset-left)); }
.photo-lightbox-nav.next { right: max(12px,env(safe-area-inset-right)); }
.photo-lightbox-nav[hidden] { display: none; }
.photo-lightbox-count { position: fixed; bottom: max(14px,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); color: #ffffff; font-size: 13px; text-shadow: 0 1px 5px #000000; }
@media (max-width:600px) { .photo-lightbox-nav { width: 42px; height: 52px; border-radius: 16px; background: rgba(0,0,0,.38); } }
.media-tile img, .media-tile video, .video-card video { width: 100%; aspect-ratio: 16/11; display: block; object-fit: cover; background: #171717; }
.media-tile > div, .video-card > div { min-width: 0; padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.media-tile span, .video-card strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.icon-danger { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border-radius: 50%; color: var(--danger); background: rgba(255,255,255,.16); font-size: 20px; }
.track-row { padding: 11px 12px; display: grid; grid-template-columns: minmax(160px,.7fr) minmax(260px,1fr) 32px; align-items: center; gap: 12px; border-radius: 18px; }
.track-row strong, .track-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-row small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.track-row audio { width: 100%; height: 36px; }
.music-filter { margin-bottom: 12px; padding: 10px; border-radius: 18px; }
.music-player { margin-bottom: 12px; padding: 18px; border-radius: 22px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; }
.music-now { min-width: 0; display: grid; gap: 3px; }
.music-now span, .music-now small { color: var(--muted); font-size: 12px; }
.music-now strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; }
.music-player-controls { display: flex; align-items: center; gap: 8px; }
.music-player-controls button { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: rgba(255,255,255,.18); font-size: 17px; }
.music-player-controls .music-play-main { width: 50px; height: 50px; color: #0a0a0a; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.music-player-controls button.active { color: #0a0a0a; background: var(--accent); }
.music-library { margin: 18px 0; }
.music-library h2 { margin: 0; font-size: 20px; }
.music-album-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.music-album-choice { min-width: 0; padding: 13px; display: grid; grid-template-columns: 42px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: rgba(255,255,255,.14); text-align: left; }
.music-album-choice b { grid-row: 1/3; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #0a0a0a; background: linear-gradient(145deg,var(--accent),var(--accent-2)); font-size: 21px; }
.music-album-choice strong, .music-album-choice small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-album-choice small { color: var(--muted); font-weight: 500; }
.music-album-choice.active { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent); }
.music-track { padding: 10px 12px; display: grid; grid-template-columns: 36px minmax(0,1fr) 30px; align-items: center; gap: 10px; border-radius: 17px; cursor: pointer; }
.music-track.active { border-color: var(--accent); background: color-mix(in srgb,var(--accent) 10%,var(--glass)); }
.music-track-play { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
.music-track strong, .music-track small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-track small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.media-limit-note { padding: 14px; border-radius: 16px; color: var(--muted); background: rgba(255,255,255,.12); text-align: center; font-size: 13px; }
.video-card { padding: 0; }
.media-empty { grid-column: 1/-1; padding: 34px; border: 1px dashed var(--line); border-radius: 18px; color: var(--muted); text-align: center; }
.busy { opacity: .62; pointer-events: none; }

.dashboard-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.dashboard-tile {
  min-width: 0;
  min-height: 104px;
  padding: 16px;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: 21px;
  background: rgba(255,255,255,.16);
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.dashboard-tile:hover { transform: translateY(-2px); background: rgba(255,255,255,.25); box-shadow: 0 15px 34px rgba(62,62,62,.14); }
.dashboard-tile.accent { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent));  color: #0a0a0a; }
.dashboard-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: var(--glass-strong); color: var(--accent); font-size: 21px; font-weight: 850; }
.dashboard-tile strong, .dashboard-tile small { display: block; }
.dashboard-tile strong { font-size: 16px; }
.dashboard-tile small { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.dashboard-tile > b { color: var(--muted); font-size: 18px; }
.dashboard-status-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.dashboard-status-grid .wide { grid-column: 1 / -1; }
.container-status-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 18px; }
.status-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.status-section-heading h2 { margin-bottom: 0; }
.status-section-heading a { color: var(--accent); font-size: 12px; font-weight: 750; text-decoration: none; }
.status-link {
  min-width: 0;
  margin-inline: -9px;
  padding: 9px;
  border-radius: 15px;
  color: var(--ink);
  text-decoration: none;
  transition: transform .18s ease, background .18s ease;
}
.status-link:hover { transform: translateX(2px); background: rgba(255,255,255,.16); }
.status-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.status-link > div { min-width: 0; flex: 1; }
.status-item-arrow { margin-left: auto; color: var(--muted); font-size: 25px; line-height: 1; }
.status-updated { margin: 16px 0 0; color: var(--muted); font-size: 12px; text-align: center; }

.card:has(.knowledge-page) { width: 100%; }
.card > .eyebrow:empty { display: none; }
.knowledge-page { display: grid; gap: 14px; }
.knowledge-toolbar { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.knowledge-back,
.knowledge-all-link {
  min-width: 46px;
  height: 46px;
  padding: 0 16px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb,var(--glass-strong) 72%,transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  text-decoration: none;
}
.knowledge-back { width: 46px; padding: 0; font-size: 25px; }
.knowledge-all-link { font-size: 12px; font-weight: 750; }
.knowledge-hero,
.knowledge-section,
.knowledge-index-section,
.knowledge-index-card {
  border: 1px solid var(--line);
  background: color-mix(in srgb,var(--glass-strong) 74%,transparent);
  box-shadow: 0 18px 42px rgba(41,41,41,.12), inset 0 1px 0 rgba(255,255,255,.32);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}
.knowledge-hero { padding: clamp(20px,4vw,34px); display: grid; gap: 14px; border-radius: 28px; }
.knowledge-heading { display: flex; align-items: center; gap: 15px; }
.knowledge-heading .dot { width: 13px; height: 13px; box-shadow: 0 0 0 7px rgba(255,255,255,.07); }
.knowledge-heading span,
.knowledge-kicker { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.knowledge-hero h1 { margin: 3px 0 0; font-size: clamp(28px,5vw,44px); overflow-wrap: anywhere; }
.knowledge-hero > p { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.55; }
.knowledge-live { width: fit-content; max-width: 100%; padding: 10px 14px; border-radius: 17px; background: color-mix(in srgb,var(--accent) 11%,transparent); }
.knowledge-live strong,
.knowledge-live small { display: block; overflow-wrap: anywhere; }
.knowledge-live small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.knowledge-open-service { width: fit-content; padding: 10px 15px; font-size: 12px; }
.knowledge-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.knowledge-section,
.knowledge-index-section { min-width: 0; padding: 20px; border-radius: 23px; }
.knowledge-section h2,
.knowledge-index-section h2 { margin: 0 0 13px; font-size: 17px; }
.knowledge-section p,
.knowledge-section li { color: var(--muted); font-size: 13px; line-height: 1.55; }
.knowledge-section > p { margin: 0; }
.knowledge-section ul { margin: 0; padding-left: 19px; display: grid; gap: 8px; }
.knowledge-tags { padding-left: 0 !important; display: flex !important; flex-wrap: wrap; gap: 7px !important; list-style: none; }
.knowledge-tags li { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.1); }
.knowledge-steps { counter-reset: knowledge-step; padding: 0 !important; list-style: none; }
.knowledge-steps li { min-height: 28px; display: grid; grid-template-columns: 27px minmax(0,1fr); align-items: start; gap: 9px; }
.knowledge-steps li::before { counter-increment: knowledge-step; content: counter(knowledge-step); width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: color-mix(in srgb,var(--accent) 12%,transparent); font-size: 11px; font-weight: 850; }
.knowledge-problems { grid-column: 1 / -1; }
.knowledge-problem { border-top: 1px solid var(--line); }
.knowledge-problem:last-child { border-bottom: 1px solid var(--line); }
.knowledge-problem summary { padding: 13px 2px; cursor: pointer; color: var(--ink); font-size: 13px; font-weight: 750; }
.knowledge-problem > div { padding: 0 2px 13px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.knowledge-problem p { margin: 0; padding: 12px; border-radius: 15px; background: rgba(255,255,255,.1); }
.knowledge-problem p strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: 11px; text-transform: uppercase; }
.knowledge-updated { margin: 2px 0 0; color: var(--muted); font-size: 11px; text-align: center; }
.knowledge-index-section > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.knowledge-index-card { position: relative; min-width: 0; padding: 15px 42px 15px 15px; display: block; border-radius: 18px; color: var(--ink); text-decoration: none; transition: transform .18s ease, background .18s ease; }
.knowledge-index-card:hover { transform: translateY(-2px); background: color-mix(in srgb,var(--accent) 9%,var(--glass-strong)); }
.knowledge-index-card span,
.knowledge-index-card strong,
.knowledge-index-card small { display: block; }
.knowledge-index-card span { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.knowledge-index-card strong { margin-top: 4px; overflow-wrap: anywhere; font-size: 14px; }
.knowledge-index-card small { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.knowledge-index-card b { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); color: var(--muted); font-size: 25px; }
html[data-theme="dark"] .knowledge-back,
html[data-theme="dark"] .knowledge-all-link,
html[data-theme="dark"] .knowledge-hero,
html[data-theme="dark"] .knowledge-section,
html[data-theme="dark"] .knowledge-index-section,
html[data-theme="dark"] .knowledge-index-card {
  border-color: rgba(202,202,202,.2);
  background: linear-gradient(145deg,rgba(21,21,21,.38),rgba(6,6,6,.2));
  box-shadow: 0 18px 42px rgba(0,0,0,.24),inset 0 1px 0 rgba(217,217,217,.1);
}

@media (max-width: 760px) {
  input, select, textarea { max-width: 100%; font-size: 16px; }
  .shell { padding: 10px; }
  .glass-nav { position: sticky; top: 8px; z-index: 50; flex-wrap: wrap; gap: 7px; padding: 8px 10px; border-radius: 19px; }
  .menu-toggle, .menu-backdrop { display: none !important; }
  .alex-brand { flex: 1; }
  .glass-nav > a { font-size: 18px; }
  .glass-nav nav {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    padding: 0;
    display: flex;
    gap: 4px;
    overflow-x: visible;
  }
  .glass-nav nav a { min-width: 0; flex: 1; padding: 9px 3px; border-radius: 12px; color: var(--ink); font-size: 12px; text-align: center; }
  .glass-nav.media-only-nav nav { flex: 1 0 100%; }
  .glass-nav.media-only-nav nav > a, .glass-nav.media-only-nav nav .nav-logout { flex: 1; }
  .glass-nav.media-only-nav nav .nav-logout .nav-icon { width: 100%; color: var(--ink); }
  .header-player { order: 4; flex: 1 0 100%; justify-content: center; }
  .header-player > span { max-width: min(42vw,180px); }
  .card { padding: 21px 14px; border-radius: 22px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-status-grid, .container-status-grid { grid-template-columns: 1fr; }
  .dashboard-tile { min-height: 88px; padding: 13px; }
  .knowledge-grid,
  .knowledge-index-section > div { grid-template-columns: 1fr; }
  .knowledge-section,
  .knowledge-index-section { padding: 16px; border-radius: 20px; }
  .knowledge-problem > div { grid-template-columns: 1fr; }
  .compact-form, .upload-form, .album-upload { grid-template-columns: 1fr; }
  .media-grid, .video-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .track-row { grid-template-columns: minmax(0,1fr) 32px; }
  .track-row audio { grid-column: 1/-1; grid-row: 2; }
  .music-player { grid-template-columns: 1fr; text-align: center; }
  .music-player-controls { justify-content: center; }
  .music-album-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 420px) { .media-grid, .video-grid, .music-album-grid { grid-template-columns: 1fr; } }
@media (min-width:761px) { .album-card .media-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width:420px) { .album-card .media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding: 0 9px 10px; } .photo-tile > div { display: none; } }

/* Music player follows the original Family layout; only the palette is adapted. */
.apple-player { margin-bottom: 14px; padding: 16px 18px; display: grid; grid-template-columns: minmax(160px,1fr) auto; align-items: center; gap: 12px 20px; border-radius: 14px; }
.now-playing { min-width: 0; display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 11px; }
.now-cover { width: 48px; height: 48px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(145deg,var(--accent),var(--accent-2)); color: #0a0a0a; font-size: 22px; }
.now-playing > span:last-child { min-width: 0; display: grid; gap: 3px; }
.now-playing strong, .now-playing small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-playing small { color: var(--muted); }
.player-controls { display: flex; align-items: center; justify-content: center; gap: 12px; }
.player-icon, .player-play { padding: 0; display: grid; place-items: center; border-radius: 50%; transition: transform .12s ease,background .12s ease,box-shadow .12s ease; }
.player-icon { width: 42px; height: 42px; border: 1px solid var(--line); background: var(--field); color: var(--accent); }
.player-icon:hover { background: color-mix(in srgb,var(--accent) 12%,var(--field)); color: var(--accent-2); transform: translateY(-1px); }
.player-icon.active { border-color: var(--accent); background: var(--accent); color: #0a0a0a; }
.player-play { width: 58px; height: 58px; background: var(--accent); color: #0a0a0a; box-shadow: 0 7px 18px color-mix(in srgb,var(--accent) 30%,transparent); }
.player-play:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 9px 22px color-mix(in srgb,var(--accent) 34%,transparent); }
.shuffle-glyph { display: inline-block; font-family: Arial,sans-serif; font-size: 22px; font-weight: 700; line-height: 1; transform: translateY(-1px); }
.play-state-icon { display: block; position: relative; flex: 0 0 auto; }
.play-state-icon.icon-play { width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid currentColor; transform: translateX(1px); }
.play-state-icon.icon-pause { width: 13px; height: 16px; }
.play-state-icon.icon-pause::before, .play-state-icon.icon-pause::after { content: ""; position: absolute; top: 0; width: 4px; height: 16px; border-radius: 1px; background: currentColor; }
.play-state-icon.icon-pause::before { left: 1px; }
.play-state-icon.icon-pause::after { right: 1px; }
.skip-icon { width: 18px; height: 18px; display: block; position: relative; }
.skip-icon::before { content: ""; position: absolute; top: 3px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.skip-icon::after { content: ""; position: absolute; top: 3px; width: 2px; height: 12px; border-radius: 1px; background: currentColor; }
.skip-icon.previous::before { left: 4px; border-right: 9px solid currentColor; }
.skip-icon.previous::after { left: 2px; }
.skip-icon.next::before { right: 4px; border-left: 9px solid currentColor; }
.skip-icon.next::after { right: 2px; }
.player-timeline { grid-column: 1/-1; display: grid; grid-template-columns: 40px minmax(0,1fr) 40px; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; }
.player-timeline span:last-child { text-align: right; }
.player-timeline input { width: 100%; height: 18px; padding: 0; border: 0; appearance: none; -webkit-appearance: none; background: transparent; box-shadow: none; }
.player-timeline input::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(to right,var(--accent) 0 var(--progress),color-mix(in srgb,var(--muted) 24%,transparent) var(--progress) 100%);  color: #0a0a0a; }
.player-timeline input::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; border: 2px solid #ffffff; border-radius: 50%; appearance: none; -webkit-appearance: none; background: var(--accent); box-shadow: 0 1px 5px rgba(0,0,0,.28);  color: #0a0a0a; }
.player-timeline input::-moz-range-track { height: 4px; border-radius: 999px; background: color-mix(in srgb,var(--muted) 24%,transparent); }
.player-timeline input::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--accent);  color: #0a0a0a; }
.player-timeline input::-moz-range-thumb { width: 11px; height: 11px; border: 2px solid #ffffff; border-radius: 50%; background: var(--accent);  color: #0a0a0a; }
.music-album-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px 16px; }
.music-album-card { border: 0; padding: 0; display: grid; gap: 9px; text-align: left; color: var(--ink); background: transparent; border-radius: 12px; }
.music-album-card:hover { background: transparent; color: var(--accent); }
.music-album-card:hover .music-album-cover, .music-album-card.active .music-album-cover { transform: translateY(-2px); box-shadow: 0 14px 30px color-mix(in srgb,var(--accent) 25%,transparent); }
.music-album-card.active .music-album-cover { outline: 3px solid color-mix(in srgb,var(--accent) 42%,transparent); }
.music-album-cover { width: 100%; aspect-ratio: 1; border-radius: 15px; display: grid; place-items: center; overflow: hidden; color: #ffffff; font-size: clamp(48px,6vw,76px); box-shadow: 0 8px 22px color-mix(in srgb,var(--accent) 20%,transparent); transition: transform .18s ease,box-shadow .18s ease; }
.music-album-cover span { width: 48%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.17); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.album-tone-0 { background: linear-gradient(145deg,#c1c1c1,#6b6b6b 58%,#3a3a3a); }
.album-tone-1 { background: linear-gradient(145deg,#d3d3d3,#8b8b8b 58%,#484848); }
.album-tone-2 { background: linear-gradient(145deg,#c0c0c0,#6f6f6f 55%,#343434); }
.album-tone-3 { background: linear-gradient(145deg,#ababab,#5d5d5d 60%,#272727); }
.album-tone-4 { background: linear-gradient(145deg,#cbcbcb,#7e7e7e 58%,#404040); }
.music-album-info { min-width: 0; display: grid; gap: 2px; padding: 0 2px; }
.music-album-info strong, .music-album-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-album-info strong { font-size: 16px; }
.music-album-info small { color: var(--muted); font-weight: 500; }
.music-track-list { margin: 20px 0; padding: 0 16px; overflow: hidden; border-radius: 14px; }
.music-track-shell { display: grid; grid-template-columns: minmax(0,1fr) 32px; align-items: center; border-bottom: 1px solid var(--line); }
.music-track-shell:last-child { border-bottom: 0; }
.music-track-row { width: 100%; min-height: 62px; padding: 9px 4px; display: grid; grid-template-columns: 28px 0 minmax(0,1fr); align-items: center; gap: 0; border-radius: 0; background: transparent; color: var(--ink); text-align: left; }
.music-track-row:hover, .music-track-row.active { background: color-mix(in srgb,var(--accent) 8%,transparent); }
.music-track-row.active { color: var(--accent); grid-template-columns: 0 28px minmax(0,1fr); }
.track-number { color: var(--muted); text-align: center; }
.track-play-mark { opacity: 0; color: var(--accent); display: grid; place-items: center; }
.mini-play-triangle { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; }
.music-track-row.active .track-number { opacity: 0; }
.music-track-row.active .track-play-mark { opacity: 1; }
.track-copy { min-width: 0; display: grid; gap: 3px; }
.track-copy strong, .track-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-copy small { color: var(--muted); font-weight: 500; }
.music-track-delete { justify-self: end; }
.music-results[hidden] { display: none; }
.music-library[hidden] { display: none; }
.music-edit-tools[hidden] { display: none; }
.music-results { margin-top: 22px; }
.music-results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.music-results-head h2 { margin: 0; }
.music-back { padding: 7px 2px; color: var(--accent); background: transparent; }
@media (max-width:760px) { .apple-player { grid-template-columns: 1fr; padding: 14px; } .player-controls { grid-row: 2; } .player-timeline { grid-row: 3; } .music-album-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 12px; } .music-track-list { padding: 0 10px; } }

.tv-root { display: grid; gap: 14px; }
.tv-player-card { overflow: hidden; scroll-margin-top: 150px; border: 1px solid var(--line); border-radius: 22px; background: color-mix(in srgb,var(--glass-strong) 82%,#000000); }
.tv-screen { position: relative; width: 100%; aspect-ratio: 16/9; display: grid; place-items: center; background: #070707; }
.tv-screen video { width: 100%; height: 100%; display: block; background: #000000; object-fit: contain; }
.tv-placeholder { position: absolute; color: rgba(255,255,255,.58); font-size: 15px; pointer-events: none; }
.tv-player-bar { min-height: 52px; padding: 7px 10px; display: grid; align-items: center; }
.tv-now { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 9px; text-align: center; }
.tv-now strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-overlay-skip { position: absolute; z-index: 3; top: 50%; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: #ffffff; background: rgba(0,0,0,.52); box-shadow: 0 5px 18px rgba(0,0,0,.28); transform: translateY(-50%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tv-overlay-skip:hover { background: rgba(0,0,0,.74); }
.tv-overlay-skip.previous { left: 12px; }
.tv-overlay-skip.next { right: 12px; }
.tv-tools { display: grid; grid-template-columns: minmax(0,1fr) minmax(180px,.38fr); gap: 10px; }
.tv-tools input, .tv-tools select { margin: 0; }
.tv-count { color: var(--muted); font-size: 12px; text-align: right; }
.tv-channel-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.tv-channel { min-width: 0; padding: 10px 12px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 17px; color: var(--ink); background: rgba(255,255,255,.13); text-align: left; }
.tv-channel:hover, .tv-channel.active { border-color: var(--accent); background: color-mix(in srgb,var(--accent) 10%,var(--glass)); }
.tv-channel-logo { width: 42px; height: 42px; overflow: hidden; display: grid; place-items: center; border-radius: 13px; color: #0a0a0a; background: linear-gradient(145deg,var(--accent),var(--accent-2)); font-size: 11px; font-weight: 850; }
.tv-channel-logo img { width: 100%; height: 100%; object-fit: contain; background: rgba(255,255,255,.9); }
.tv-channel > span:nth-child(2) { min-width: 0; }
.tv-channel strong, .tv-channel small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-channel small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.tv-channel > b { color: var(--accent); }
@media (max-width:760px) { .tv-tools, .tv-channel-list { grid-template-columns: 1fr; } .tv-player-card { border-radius: 17px; } .tv-screen { position: sticky; top: 0; } .tv-overlay-skip { width: 40px; height: 40px; } .tv-overlay-skip.previous { left: 8px; } .tv-overlay-skip.next { right: 8px; } }

/* Photo album file transfer. */
.photo-move,
.photo-delete {
  position: absolute;
  top: 7px;
  z-index: 2;
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  color: #ffffff;
  background: rgba(0,0,0,.62);
  line-height: 1;
  box-shadow: 0 3px 12px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
}
.photo-delete { right: 7px; font-size: 21px; }
.photo-move { right: 43px; font-size: 20px; font-weight: 800; }
.photo-move:hover { color: #ffffff; background: color-mix(in srgb,var(--accent) 72%,rgba(0,0,0,.5)); }

.photo-move-modal {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background: rgba(6,6,6,.62);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  backdrop-filter: blur(12px) saturate(135%);
}
.photo-move-dialog {
  position: relative;
  width: min(100%,440px);
  padding: 20px;
  border-radius: 28px;
  background: linear-gradient(145deg,color-mix(in srgb,var(--glass-strong) 90%,transparent),color-mix(in srgb,var(--glass) 72%,transparent));
  box-shadow: 0 28px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
}
.photo-move-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  color: var(--muted);
  background: rgba(255,255,255,.12);
  font-size: 23px;
}
.photo-move-heading {
  padding-right: 38px;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  align-items: center;
  gap: 11px;
}
.photo-move-heading > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #0a0a0a;
  background: linear-gradient(145deg,var(--accent),var(--accent-2));
  font-size: 24px;
  font-weight: 850;
  box-shadow: 0 10px 24px color-mix(in srgb,var(--accent) 28%,transparent);
}
.photo-move-heading strong,
.photo-move-heading small { display: block; }
.photo-move-heading strong { font-size: 19px; }
.photo-move-heading small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.photo-move-form { margin-top: 18px; display: grid; gap: 11px; }
.photo-move-form label { display: grid; gap: 6px; }
.photo-move-form label > span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.photo-move-form select,
.photo-move-form input { width: 100%; min-height: 46px; margin: 0; border-radius: 23px; background: color-mix(in srgb,var(--glass-strong) 78%,transparent); }
.photo-move-divider { height: 1px; display: grid; place-items: center; background: var(--line); }
.photo-move-divider span { padding: 0 9px; color: var(--muted); background: var(--glass-strong); font-size: 10px; text-transform: uppercase; }
.photo-move-error { min-height: 18px; margin: 0; color: var(--danger); font-size: 12px; }
.photo-move-error:empty { display: none; }
.photo-move-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.photo-move-actions button { min-height: 44px; border-radius: 22px; }

@media (max-width:600px) {
  .photo-move-modal { place-items: end center; padding: 10px 10px max(10px,env(safe-area-inset-bottom)); }
  .photo-move-dialog { width: 100%; padding: 18px; border-radius: 26px; }
  .photo-move-heading strong { font-size: 18px; }
  .photo-move-actions { grid-template-columns: 1fr; }
  .photo-move-actions button[type="submit"] { order: -1; }
}

/* Private movie library on the backup disk. */
.movie-root { display: grid; gap: 16px; }
.movie-player { overflow: hidden; padding: 0; border-radius: 26px; scroll-margin-top: 120px; }
.movie-player[hidden] { display: none; }
.movie-screen { position: relative; width: 100%; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: #000000; }
.movie-screen video { width: 100%; height: 100%; display: block; background: #000000; object-fit: contain; }
.movie-player-status { position: absolute; inset: 0; z-index: 2; padding: 22px; display: flex; align-items: center; justify-content: center; gap: 11px; color: #ffffff; background: rgba(0,0,0,.7); text-align: center; }
.movie-player-status[hidden] { display: none; }
.movie-player-status.busy { opacity: 1; pointer-events: auto; }
.movie-spinner { width: 23px; height: 23px; flex: 0 0 auto; border: 3px solid rgba(255,255,255,.26); border-top-color: #ffffff; border-radius: 50%; animation: movie-spin .8s linear infinite; }
@keyframes movie-spin { to { transform: rotate(360deg); } }
.movie-player-info { min-height: 62px; padding: 10px 12px 10px 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.movie-player-info > span { min-width: 0; flex: 1; }
.movie-player-controls { display: flex; align-items: center; flex: 0 0 auto; gap: 8px; }
.movie-next svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.movie-next:disabled { opacity: .4; cursor: default; }
.movie-player-info strong, .movie-player-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.movie-player-info small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.movie-fullscreen, .movie-refresh { width: 42px; height: 42px; min-width: 42px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--glass-strong); font-size: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.movie-toolbar { display: grid; grid-template-columns: minmax(0,1fr) 44px; align-items: center; gap: 9px; }
.movie-search { min-width: 0; min-height: 46px; padding: 5px 13px; display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 7px; border-radius: 23px; }
.movie-search > span { color: var(--muted); font-size: 25px; line-height: 1; }
.movie-search input { width: 100%; min-width: 0; height: 34px; margin: 0; padding: 0; border: 0; border-radius: 0; color: var(--ink); background: transparent; box-shadow: none; }
.movie-search input:focus { box-shadow: none; }
.movie-library-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 2px 3px; }
.movie-library-head strong { font-size: 19px; }
.movie-library-head small { color: var(--muted); }
.movie-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.movie-row { position: relative; min-width: 0; overflow: hidden; border-radius: 22px; }
.movie-card { position: relative; z-index: 2; width: 100%; height: 100%; min-width: 0; padding: 10px; display: grid; grid-template-columns: 116px minmax(0,1fr) 38px; align-items: center; gap: 12px; border-radius: 22px; color: var(--ink); text-align: left; touch-action: pan-y; transition: transform .22s cubic-bezier(.2,.75,.25,1); }
.movie-row.delete-open .movie-card { transform: translateX(-112px); }
.movie-delete-confirm { position: absolute; z-index: 1; inset: 0 0 0 auto; width: 112px; padding: 8px; display: grid; grid-template-columns: 44px 44px; align-items: center; justify-content: end; gap: 8px; }
.movie-delete-confirm button { width: 44px; height: 44px; min-height: 0; padding: 0; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--accent) 38%,transparent); border-radius: 50%; color: var(--accent); background: rgba(12,12,12,.58); font-size: 12px; font-weight: 850; box-shadow: inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 15px color-mix(in srgb,var(--accent) 8%,transparent),0 7px 18px rgba(0,0,0,.28); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); }
.movie-delete-yes { color: #101010; background: linear-gradient(145deg,rgba(202,202,202,.96),rgba(140,140,140,.88)); box-shadow: inset 0 1px 0 rgba(255,255,255,.48),0 0 18px rgba(187,187,187,.22); }
.movie-delete-no { background: color-mix(in srgb,var(--accent) 8%,rgba(0,0,0,.55)); }
.movie-delete-confirm button:disabled { opacity: .62; }
.movie-card:hover, .movie-card.active { border-color: var(--accent); background: color-mix(in srgb,var(--accent) 10%,var(--glass)); }
.movie-card-cover { position: relative; width: 116px; aspect-ratio: 16 / 9; overflow: hidden; display: grid; place-items: center; border-radius: 15px; color: #ffffff; background: linear-gradient(145deg,#2d2d2d,#101010); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
.movie-card-cover::before { content: ""; position: absolute; inset: -35%; background: repeating-linear-gradient(90deg,transparent 0 14px,rgba(200,200,200,.12) 14px 16px); transform: rotate(23deg); }
.movie-card-cover b { position: relative; z-index: 1; font-size: 20px; letter-spacing: .02em; }
.movie-card-cover i { position: absolute; z-index: 1; right: 7px; bottom: 6px; padding: 3px 5px; border-radius: 7px; color: rgba(255,255,255,.85); background: rgba(0,0,0,.54); font-size: 8px; font-style: normal; }
.movie-card-copy { min-width: 0; }
.movie-card-copy strong, .movie-card-copy small { display: block; overflow: hidden; text-overflow: ellipsis; }
.movie-card-copy strong { display: -webkit-box; font-size: 15px; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.movie-card-copy small { margin-top: 6px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.movie-card-play { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #0a0a0a; background: var(--accent); font-size: 13px; }
.movie-empty { grid-column: 1 / -1; padding: 42px 20px; border-radius: 24px; color: var(--muted); text-align: center; }

@media (max-width:760px) {
  .movie-player { border-radius: 19px; scroll-margin-top: 190px; }
  .movie-player-info { min-height: 55px; }
  .movie-list { grid-template-columns: 1fr; }
  .movie-row { border-radius: 19px; }
  .movie-card { grid-template-columns: 104px minmax(0,1fr) 36px; padding: 8px; border-radius: 19px; }
  .movie-card-cover { width: 104px; border-radius: 13px; }
}

@media (max-width:420px) {
  .movie-card { grid-template-columns: 88px minmax(0,1fr) 32px; gap: 9px; }
  .movie-card-cover { width: 88px; }
  .movie-card-play { width: 31px; height: 31px; }
}

/* Family account password reset: a separate liquid-glass action bubble. */
.family-user-row { grid-template-columns: 38px minmax(0,1fr) auto; }
.family-user-copy { min-width: 0; }
.family-user-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.family-password-reset {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb,var(--accent) 26%,var(--line));
  border-radius: 50%;
  color: var(--accent);
  background:
    linear-gradient(145deg,rgba(255,255,255,.28),transparent 56%),
    color-mix(in srgb,var(--glass-strong) 78%,transparent);
  box-shadow:
    0 10px 25px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 color-mix(in srgb,var(--accent) 13%,transparent);
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  backdrop-filter: blur(22px) saturate(175%);
}
.family-password-reset svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.family-password-reset:hover:not(:disabled) {
  color: #0a0a0a;
  background: linear-gradient(145deg,var(--accent),var(--accent-2));
  filter: none;
  transform: translateY(-1px);
}
.family-password-reset:disabled { cursor: default; opacity: .72; }
.family-password-reset.success { color: #ffffff; background: linear-gradient(145deg,#9f9f9f,#5e5e5e); }
.family-reset-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb,var(--accent) 25%,transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: family-reset-spin .75s linear infinite;
}
.family-reset-check { font-size: 20px; font-weight: 900; line-height: 1; }
.family-reset-status { min-height: 0; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.3; }
.family-reset-status:empty { display: none; }
.family-reset-status.success { color: var(--accent); }
.family-reset-status.error { color: var(--danger); }
@keyframes family-reset-spin { to { transform: rotate(360deg); } }

@media (max-width:520px) {
  .family-user-row { gap: 9px; }
  .family-user-actions { flex-direction: column-reverse; gap: 5px; }
  .family-password-reset { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
}

/* Alex Mail v12 */
.mail-root { min-height: 540px; color: var(--ink); }
.mail-loading { min-height: 430px; display: grid; place-content: center; justify-items: center; gap: 13px; color: var(--muted); }
.mail-spinner { width: 20px; height: 20px; display: inline-block; border: 2px solid color-mix(in srgb,var(--accent) 22%,transparent); border-top-color: var(--accent); border-radius: 50%; animation: mail-spin .75s linear infinite; }
@keyframes mail-spin { to { transform: rotate(360deg); } }

.mail-bubble {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb,var(--accent) 22%,var(--line));
  border-radius: 50%;
  color: var(--accent);
  background: linear-gradient(145deg,rgba(255,255,255,.28),transparent 58%),color-mix(in srgb,var(--glass-strong) 82%,transparent);
  box-shadow: 0 10px 25px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.38);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}
.mail-bubble:hover:not(:disabled) { color: #0a0a0a; background: linear-gradient(135deg,var(--accent),var(--accent-2)); transform: translateY(-1px); }
.mail-bubble.active { color: #0a0a0a; border-color: var(--accent); background: linear-gradient(135deg,var(--accent),var(--accent-2)); }
.mail-bubble.danger { color: var(--danger); border-color: color-mix(in srgb,var(--danger) 34%,var(--line)); }
.mail-bubble.danger:hover:not(:disabled) { color: #ffffff; background: linear-gradient(135deg,#878787,#404040); }
.mail-bubble:disabled { opacity: .58; cursor: default; }
.mail-bubble svg,.mail-setup-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.mail-toolbar { margin-bottom: 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mail-toolbar-main,.mail-toolbar-actions { display: flex; align-items: center; gap: 10px; }
.mail-toolbar-main > div { min-width: 0; }
.mail-toolbar-main strong,.mail-toolbar-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-toolbar-main strong { font-size: 15px; }
.mail-toolbar-main span { margin-top: 2px; color: var(--muted); font-size: 11px; }

.mail-push-card { margin: 0 0 13px; padding: 15px; display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 12px; border: 1px solid var(--line); border-radius: 21px; background: color-mix(in srgb,var(--glass-strong) 75%,transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.mail-push-card.active { border-color: color-mix(in srgb,var(--accent) 48%,var(--line)); }
.mail-push-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: color-mix(in srgb,var(--accent) 12%,transparent); }
.mail-push-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mail-push-card strong,.mail-push-card p,.mail-push-card small,.mail-push-message { display: block; }
.mail-push-card p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.mail-push-card small { margin-top: 7px; color: var(--accent); font-size: 11px; line-height: 1.4; }
.mail-push-message { min-height: 16px; margin-top: 7px; color: var(--muted); font-size: 11px; }
.mail-push-message:empty { display: none; }
.mail-push-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.mail-push-actions button { min-height: 38px; padding: 8px 14px; }
.mail-push-actions button.secondary { color: var(--muted); background: transparent; border-color: var(--line); }

.mail-folder-panel { margin: 0 0 13px; padding: 14px; border: 1px solid var(--line); border-radius: 22px; background: color-mix(in srgb,var(--glass-strong) 78%,transparent); box-shadow: 0 15px 34px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.16); backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%); }
.mail-folder-panel-heading { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.mail-folder-panel-heading strong { font-size: 14px; }
.mail-folder-panel-heading button,.mail-move-heading > button { width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 50%; color: var(--muted); background: transparent; border-color: var(--line); font-size: 23px; line-height: 1; }
.mail-folder-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: 8px; }
.mail-folder-option { min-height: 58px; padding: 10px 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 1px solid var(--line); border-radius: 17px; color: var(--ink); background: color-mix(in srgb,var(--glass-strong) 70%,transparent); text-align: left; box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
.mail-folder-option span,.mail-folder-option small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-folder-option span { font-size: 12px; font-weight: 750; }
.mail-folder-option small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.mail-folder-option.active { color: #0a0a0a; border-color: var(--accent); background: linear-gradient(135deg,var(--accent),var(--accent-2)); }
.mail-folder-option.active small { color: rgba(0,0,0,.62); }

.mail-layout { min-height: 590px; display: grid; grid-template-columns: minmax(300px,370px) minmax(0,1fr); gap: 13px; align-items: stretch; }
.mail-reader,.mail-compose,.mail-setup,.mail-error { border-radius: 24px; overflow: hidden; }
.mail-list { min-width: 0; align-self: start; display: grid; gap: 9px; }
.mail-list-heading { padding: 4px 8px 3px; display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.mail-swipe-row { position: relative; min-width: 0; overflow: hidden; border-radius: 21px; background: color-mix(in srgb,var(--glass-strong) 62%,transparent); }
.mail-swipe-actions { position: absolute; inset: 0 5px 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 6px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease,visibility 0s linear .16s; }
.mail-swipe-row.open .mail-swipe-actions,.mail-swipe-row.dragging .mail-swipe-actions { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.mail-swipe-actions .mail-bubble { width: 52px; min-width: 52px; height: 52px; min-height: 52px; box-shadow: none; }
.mail-swipe-actions .mail-swipe-move { color: var(--accent); }
.mail-swipe-actions .mail-swipe-trash { color: #fff; border-color: rgba(255,255,255,.22); background: linear-gradient(145deg,#8a8a8a,#373737); }
.mail-message-row { position: relative; z-index: 1; width: 100%; min-height: 78px; padding: 11px 13px; display: grid; grid-template-columns: 42px minmax(0,1fr) 8px; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 21px; color: var(--ink); background: linear-gradient(145deg,rgba(255,255,255,.13),transparent 58%),color-mix(in srgb,var(--glass-strong) 82%,transparent); text-align: left; box-shadow: 0 9px 24px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.18); touch-action: pan-y; transition: transform .22s cubic-bezier(.2,.8,.2,1),border-color .2s,background .2s; }
.mail-swipe-row.open .mail-message-row { transform: translateX(-116px); }
.mail-message-row:hover,.mail-message-row.selected { color: var(--ink); border-color: color-mix(in srgb,var(--accent) 38%,var(--line)); background: color-mix(in srgb,var(--accent) 10%,var(--glass-strong)); filter: none; }
.mail-message-row.unread { background: linear-gradient(145deg,color-mix(in srgb,var(--accent) 13%,var(--glass-strong)),color-mix(in srgb,var(--glass-strong) 80%,transparent)); }
.mail-message-row.unread .mail-message-top strong,.mail-message-row.unread .mail-subject { font-weight: 850; }
.mail-sender-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #0a0a0a; background: linear-gradient(145deg,var(--accent),var(--accent-2)); font-size: 17px; font-weight: 850; box-shadow: inset 0 1px 0 rgba(255,255,255,.32); }
.mail-sender-mark.large { width: 48px; height: 48px; font-size: 19px; }
.mail-message-copy { min-width: 0; display: block; }
.mail-message-top { display: flex; align-items: baseline; gap: 7px; }
.mail-message-top strong { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.mail-message-top time { flex: 0 0 auto; color: var(--muted); font-size: 10px; font-weight: 550; }
.mail-subject,.mail-message-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-subject { margin-top: 4px; font-size: 12px; }
.mail-message-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.mail-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb,var(--accent) 65%,transparent);  color: #0a0a0a; }
.mail-load-more { width: 100%; min-height: 42px; margin: 3px 0; color: var(--ink); background: color-mix(in srgb,var(--glass-strong) 72%,transparent); }
.mail-empty { min-height: 240px; display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--muted); }
.mail-message-card { border: 1px solid var(--line); border-radius: 21px; background: color-mix(in srgb,var(--glass-strong) 78%,transparent); box-shadow: 0 9px 24px rgba(0,0,0,.14); }
.mail-empty strong { color: var(--ink); }

.mail-move-backdrop { position: fixed; z-index: 200; inset: 0; padding: 18px; display: grid; place-items: end center; background: rgba(0,0,0,.58); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.mail-move-sheet { width: min(100%,520px); max-height: min(72dvh,620px); padding: 18px; overflow-y: auto; border: 1px solid rgba(255,255,255,.18); border-radius: 26px; color: var(--ink); background: linear-gradient(145deg,rgba(38,38,38,.98),rgba(9,9,9,.98)); box-shadow: 0 28px 70px rgba(0,0,0,.56); }
.mail-move-heading { margin-bottom: 13px; display: flex; align-items: center; justify-content: space-between; }
.mail-move-heading strong,.mail-move-heading span { display: block; }
.mail-move-heading span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.mail-move-folders { display: grid; gap: 8px; }
.mail-move-folders button { min-height: 50px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: rgba(255,255,255,.07); text-align: left; }
.mail-move-folders button b { min-width: 24px; height: 24px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; color: #0a0a0a; background: var(--accent); font-size: 10px; }

.mail-reader { min-width: 0; padding: 20px; align-self: stretch; }
.mail-reader-empty { display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--muted); text-align: center; }
.mail-reader-empty strong { color: var(--ink); }
.mail-reader-empty span { max-width: 300px; font-size: 12px; line-height: 1.45; }
.mail-setup-icon { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius: 50%; color: var(--accent); background: color-mix(in srgb,var(--glass-strong) 75%,transparent); }
.mail-reader-actions { min-height: 44px; display: flex; align-items: center; gap: 8px; }
.mail-reader-spacer { flex: 1; }
.mail-mobile-back { display: none; }
.mail-reader h2 { margin: 20px 0 15px; font-size: clamp(20px,3vw,29px); line-height: 1.18; overflow-wrap: anywhere; }
.mail-meta { padding: 12px; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 11px; border: 1px solid var(--line); border-radius: 20px; background: color-mix(in srgb,var(--glass-strong) 68%,transparent); }
.mail-meta strong,.mail-meta span,.mail-meta small,.mail-meta time { display: block; overflow-wrap: anywhere; }
.mail-meta span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.mail-meta small,.mail-meta time { margin-top: 5px; color: var(--muted); font-size: 10px; }
.mail-body { min-height: 220px; margin: 16px 0 0; padding: 17px 4px; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); background: transparent; border: 0; font: 14px/1.58 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.mail-attachments { margin-top: 16px; display: grid; gap: 8px; }
.mail-attachment { padding: 10px 12px; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 17px; color: var(--ink); background: color-mix(in srgb,var(--glass-strong) 72%,transparent); text-decoration: none; }
.mail-attachment > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: color-mix(in srgb,var(--accent) 12%,transparent); font-size: 20px; }
.mail-attachment b,.mail-attachment small { display: block; overflow-wrap: anywhere; }
.mail-attachment small { margin-top: 2px; color: var(--muted); font-size: 10px; }

.mail-compose { min-height: 560px; padding: 20px; }
.mail-compose-heading { margin-bottom: 16px; display: flex; align-items: center; gap: 11px; }
.mail-compose-heading strong,.mail-compose-heading span { display: block; }
.mail-compose-heading span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.mail-compose form { display: grid; gap: 11px; }
.mail-compose textarea { min-height: 260px; resize: vertical; }
.mail-compose-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mail-form-message { min-height: 18px; margin: 0; flex: 1; color: var(--muted); font-size: 12px; }
.mail-send { color: #0a0a0a; background: linear-gradient(135deg,var(--accent),var(--accent-2)); }

.mail-setup { width: min(100%,520px); margin: 30px auto 0; padding: 27px; }
.mail-setup .mail-setup-icon { margin: 0 auto 15px; }
.mail-setup h2,.mail-setup > p { text-align: center; }
.mail-setup > p { margin-bottom: 20px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.mail-setup form { display: grid; gap: 12px; }
.mail-setup button[type="submit"] { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.mail-setup .mail-push-card { margin: 22px 0 0; text-align: left; }
.mail-error { min-height: 300px; padding: 30px; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; }
.mail-error p { color: var(--muted); }

html[data-theme="dark"] .mail-bubble,
html[data-theme="dark"] .mail-folder-option,
html[data-theme="dark"] .mail-message-row,
html[data-theme="dark"] .mail-meta,
html[data-theme="dark"] .mail-attachment {
  border-color: rgba(202,202,202,.2);
  background: linear-gradient(145deg,rgba(20,20,20,.38),rgba(6,6,6,.2));
  box-shadow: 0 15px 32px rgba(0,0,0,.25),inset 0 1px 0 rgba(217,217,217,.1);
}
html[data-theme="dark"] .mail-folder-option.active,
html[data-theme="dark"] .mail-send { background: linear-gradient(135deg,var(--accent),var(--accent-2));  color: #0a0a0a; }

@media (max-width:760px) {
  .glass-nav:not(.media-only-nav) nav { overflow-x: auto; justify-content: flex-start; }
  .glass-nav:not(.media-only-nav) nav > a,.glass-nav:not(.media-only-nav) nav > form { flex: 0 0 38px; }
  .mail-root { min-height: 62dvh; }
  .mail-layout { min-height: 500px; display: block; }
  .mail-layout .mail-reader-empty { display: none; }
  .mail-layout.has-reader .mail-list { display: none; }
  .mail-reader { min-height: 500px; padding: 15px 13px; }
  .mail-mobile-back { display: grid; }
  .mail-reader h2 { margin-top: 16px; }
  .mail-body { font-size: 13px; }
  .mail-compose { min-height: 500px; padding: 15px 13px; }
  .mail-compose textarea { min-height: 220px; }
  .mail-push-card { padding: 13px; grid-template-columns: 40px minmax(0,1fr); }
  .mail-push-icon { width: 40px; height: 40px; }
}

@media (max-width:420px) {
  .mail-toolbar-main { min-width: 0; }
  .mail-toolbar-main > div { display: none; }
  .mail-toolbar-actions { gap: 6px; }
  .mail-toolbar-main { gap: 6px; }
  .mail-bubble { width: 42px; min-width: 42px; height: 42px; min-height: 42px; }
  .mail-setup { margin-top: 8px; padding: 20px 15px; }
  .mail-message-row { padding-inline: 10px; }
  .mail-folder-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mail-move-backdrop { padding: 10px; }
}

/* Mobile navigation stays within thumb reach, above the home indicator. */
@media (max-width: 760px) {
  body:has(> .glass-nav) .shell { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
  html:has(.glass-nav) { scroll-padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
  .glass-nav {
    position: fixed !important;
    top: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    width: auto;
    margin: 0;
    z-index: 5000;
    transform: translate3d(0,0,0);
    will-change: transform;
    isolation: isolate;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-rows: 44px 44px;
    gap: 6px;
    padding: 8px;
  }
  .glass-nav .alex-brand { grid-column: 1; grid-row: 1; width: 44px; height: 44px; justify-content: center; }
  .glass-nav .theme-toggle { grid-column: 3; grid-row: 1; width: 44px; height: 44px; }
  .glass-nav .header-player { grid-column: 2; grid-row: 1; order: initial; gap: 3px; justify-content: center; }
  .glass-nav .header-player button { flex: 0 0 32px; width: 32px; height: 40px; }
  .glass-nav .header-player > span { max-width: 90px; }
  .glass-nav nav {
    grid-column: 1 / -1;
    grid-row: 2;
    order: initial;
    height: 44px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    align-items: center;
  }
  .glass-nav:not(.media-only-nav) nav > a,
  .glass-nav:not(.media-only-nav) nav > form,
  .glass-nav nav .nav-icon,
  .glass-nav nav .nav-door,
  .glass-nav nav a[href="/vpn"] { flex: 1 0 44px; min-width: 44px; width: 44px; height: 44px; }
  .glass-nav nav .nav-logout .nav-icon { height: 44px; }
  .glass-nav nav .nav-mail-badge { top: 22px; right: -4px; }
  .glass-nav.media-only-nav .header-player { grid-column: 2 / -1; }
}
@media (max-width: 420px) {
  .glass-nav .header-player > span { display: none; }
}

/* One monochrome theme: black canvas, white type, translucent glass. */
body, .shell, html[data-theme="dark"] .shell { background: #000; background-image: none; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] .glass-nav, html[data-theme="dark"] .status-item strong { text-shadow: none; }
html[data-theme="dark"] .glass-nav, html[data-theme="dark"] .card,
html[data-theme="dark"] .glass-panel, html[data-theme="dark"] .control-panel,
html[data-theme="dark"] .status-grid section, html[data-theme="dark"] .vpn-metrics article {
  border-color: rgba(255,255,255,.16);
  background: linear-gradient(145deg,rgba(42,42,42,.7),rgba(12,12,12,.62));
  box-shadow: 0 16px 48px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.13);
  backdrop-filter: blur(24px) saturate(100%);
  -webkit-backdrop-filter: blur(24px) saturate(100%);
}
.header-player button, .glass-nav .header-player button {
  flex: 0 0 32px;
  width: 32px; min-width: 32px; max-width: 32px;
  height: 32px; min-height: 32px; max-height: 32px;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  line-height: 1;
  font-size: 12px;
  color: #f5f5f5;
  background: rgba(255,255,255,.08);
}
.header-player #headerPlay, .header-player button.active {
  color: #080808;
  background: #f5f5f5;
  border-color: #f5f5f5;
}
.alex-brand img { border-radius: 11px; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
@media (max-width:760px) {
  .glass-nav { grid-template-columns: 44px minmax(0,1fr); }
  .glass-nav .header-player, .glass-nav.media-only-nav .header-player {
    grid-column: 2; gap: 7px; justify-content: flex-end;
  }
}

/* Semantic colours remain visible in the monochrome interface. */
.finance-root .income, .finance-root .finance-summary strong.income,
.finance-root .finance-transaction-amount.income strong,
.finance-income-chart .finance-section-title h2,
.finance-income-chart .finance-category-bars button span { color: #4ade80; }
.finance-root .expense, .finance-root .finance-summary strong.expense,
.finance-root .finance-transaction-amount.expense strong,
.finance-expense-chart .finance-section-title h2,
.finance-expense-chart .finance-category-bars button span { color: #fb7185; }
.finance-income-chart .finance-category-bars button small,
.finance-expense-chart .finance-category-bars button small { color: inherit; }
.vpn-live-dot.online { background: #4ade80; box-shadow: 0 0 0 5px rgba(74,222,128,.13), 0 0 12px rgba(74,222,128,.4); }
.vpn-live-dot.offline { background: #f87171; box-shadow: 0 0 0 5px rgba(248,113,113,.13), 0 0 12px rgba(248,113,113,.25); }
@media (max-width:760px) {
  html[data-theme="dark"] .glass-nav {
    background: linear-gradient(145deg,rgba(255,255,255,.06),rgba(0,0,0,.08));
    border-color: rgba(255,255,255,.2);
    box-shadow: 0 8px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.16);
    backdrop-filter: blur(10px) saturate(100%);
    -webkit-backdrop-filter: blur(10px) saturate(100%);
  }
}