/* Cosmic Drive — colour palette, after the League of Legends item "Cosmic Drive": a swirling cosmic vortex
   brand: #0b1026 deep-space navy · #eceefc text · #3fd8ff electric cyan core · #8a5cf6 violet nebula (#5b3fd6 indigo)
   · #e8b85c warm gold rim · #ff7ad9 pink touches; speed motifs: comet trails and orbit rings
   (shades below are derived from these; text contrast on cards >= 4.5:1, most >= 7:1) */
/* Fonts (self-hosted, allowed by the CSP). Persian text: IRAN (FaNum) — the owner's choice (fontiran.com; one
   regular weight, bold is synthesised) — used only for Arabic-script characters (its unicode-range), so it never
   touches English. English: Kufam (geometric Kufi, space-age look) for titles and the brand, Readex Pro for text;
   both are OFL with variable weight (their Arabic parts remain as a fallback). */
@font-face {
    font-family: 'IRAN FaNum'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('fonts/iran-fanum.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Kufam'; font-style: normal; font-weight: 400 900; font-display: swap;
    src: url('fonts/kufam-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Kufam'; font-style: normal; font-weight: 400 900; font-display: swap;
    src: url('fonts/kufam-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Readex Pro'; font-style: normal; font-weight: 160 700; font-display: swap;
    src: url('fonts/readexpro-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Readex Pro'; font-style: normal; font-weight: 160 700; font-display: swap;
    src: url('fonts/readexpro-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --font: 'IRAN FaNum', 'Readex Pro', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-display: 'IRAN FaNum', 'Kufam', 'Readex Pro', 'Segoe UI', Tahoma, sans-serif;
    color-scheme: dark;
    --bg: #0b1026;
    --bg-side: #0d1330;
    --surface: #141b3d;
    --surface-2: #1c2452;
    --surface-hover: #1a2149;
    --input: #0a0f25;
    --border: #273066;
    --border-strong: #36408a;
    --track: #273066;
    --text: #eceefc;
    --text-2: #bcc1e6;
    --muted: #959bc9;
    --accent: #3fd8ff;
    --accent-hover: #7fe6ff;
    --accent-soft: rgba(63, 216, 255, .12);
    --accent-line: rgba(63, 216, 255, .45);
    --purple: #8a5cf6;
    --purple-text: #c6b0ff;
    --purple-soft: rgba(138, 92, 246, .18);
    --indigo: #5b3fd6;
    --gold: #e8b85c;
    --gold-text: #f3cf86;
    --gold-soft: rgba(232, 184, 92, .14);
    --gold-line: rgba(232, 184, 92, .45);
    --pink: #ff7ad9;
    --gradient: linear-gradient(90deg, #3fd8ff 0%, #8a5cf6 62%, #ff7ad9 100%);
    --gradient-brand: linear-gradient(90deg, #7fe6ff 0%, #b49cff 55%, #ffa6e6 100%);
    --gradient-gold: linear-gradient(135deg, #fbe3a6 0%, #e8b85c 55%, #c28a3a 100%);
    --rim: linear-gradient(90deg, transparent, rgba(63, 216, 255, .5) 18%, rgba(138, 92, 246, .55) 52%,
                           rgba(232, 184, 92, .5) 84%, transparent);
    --on-accent: #0b1026;
    --neutral-mark: #a7acd3;
    --good-text: #86efac; --good-soft: rgba(34, 197, 94, .14); --good: #22c55e;
    --bad-text: #fca5a5;  --bad-soft: rgba(239, 68, 68, .15);  --bad: #ef4444;
    --warn-text: #fcd34d; --warn-soft: rgba(245, 158, 11, .14); --warn: #f59e0b;
}

* { margin: 0; padding: 0; box-sizing: border-box; scrollbar-color: var(--border-strong) transparent; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
}
a { color: var(--accent); }
code { background: var(--surface-2); padding: 1px 6px; border-radius: 4px; font-size: 12px; }
[hidden] { display: none !important; }
::selection { background: rgba(138, 92, 246, .45); color: #fff; }

/* layout */
.container { display: flex; height: 100vh; }
.main { flex: 1; padding: 28px 32px; overflow-y: auto; background: var(--bg); min-width: 0; }
.page { max-width: 1100px; margin: 0 auto; padding: 28px 24px; }
.page-wide { max-width: 1320px; }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head.narrow { max-width: 440px; margin-left: auto; margin-right: auto; }
.page-head h2 { font-family: var(--font-display); font-size: 20px; color: var(--text); font-weight: 600; }
.page-head .head-end { margin-right: auto; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.me { color: var(--muted); font-weight: 400; font-size: 11px; margin-left: 4px; }

/* activity log */
.stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (min-width: 900px) { .stat-row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.stat-tile {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
    display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; transition: border-color .15s;
}
.stat-tile:hover { border-color: var(--accent-line); }
.stat-value { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.1; }
.stat-label { font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.stat-sub { font-size: 10.5px; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot.tone-good { background: var(--good); }
.dot.tone-bad { background: var(--bad); }
.dot.tone-warn { background: var(--warn); }
.dot.tone-info { background: var(--accent); }
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filter-row .text-input { flex: 1 1 160px; width: auto; }
.select-input { appearance: auto; cursor: pointer; }
.table-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 10px; }
.logs-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.logs-table th { text-align: right; color: var(--muted); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.logs-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.logs-table tr:hover td { background: var(--surface-hover); }
.logs-table a { text-decoration: none; }
.logs-table .target { word-break: break-word; color: var(--text); max-width: 420px; }
.empty-row { text-align: center; color: var(--muted); padding: 30px 10px !important; }
.tag { display: inline-block; font-size: 11.5px; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.tag.tone-good { background: var(--good-soft); color: var(--good-text); }
.tag.tone-bad { background: var(--bad-soft); color: var(--bad-text); }
.tag.tone-warn { background: var(--warn-soft); color: var(--warn-text); }
.tag.tone-info { background: var(--accent-soft); color: #8ae9ff; }
.tag.tag-off { background: var(--surface-2); color: var(--muted); }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; font-size: 12.5px; color: var(--text-2); }

/* header */
.header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; gap: 12px; flex-wrap: wrap;
    padding-bottom: 14px; border-bottom: 1px solid transparent; border-image: var(--rim) 1;
}
.header h1 { font-family: var(--font-display); font-size: 29px; font-weight: 700; line-height: 1.2; letter-spacing: .3px; }
.header h1 a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-text, .login-box h1 {
    background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text;
    color: transparent; text-decoration: none;
}
/* the cosmic vortex logo: still (nothing runs on every page); on hover its arms turn and the comet blinks */
.brand-logo { width: 64px; height: 64px; flex: none; overflow: visible;
              filter: drop-shadow(0 3px 10px rgba(63, 216, 255, .3)); }
.brand-swirl { transform-origin: 32px 32px; }
.header h1 a:hover .brand-swirl { animation: cd-spin 2.4s linear infinite; }
.header h1 a:hover .brand-beacon { animation: gx-blink 1.2s ease-in-out infinite; }
@keyframes cd-spin { to { transform: rotate(-360deg); } }
@keyframes gx-float {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-4px) rotate(5deg); }
}
@keyframes gx-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* role marks: owner = golden five-pointed star, admin = lavender four-pointed star */
.role-star { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; flex: none; margin: 0 3px; overflow: visible; }
.star-owner { fill: #f3c35e; stroke: #fff0c4; stroke-width: .8; filter: drop-shadow(0 0 3px rgba(232, 184, 92, .8)); }
.star-admin { fill: #c4b5fd; stroke: #ede9fe; stroke-width: .6; filter: drop-shadow(0 0 3px rgba(138, 92, 246, .7)); }
/* the owner's star twinkles with its opacity only: an animated filter repainted the header on every frame of every
   page (the monitor stays open for hours); opacity runs on the compositor */
@keyframes gx-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.user-chip .role-star { width: 14px; height: 14px; }
.badge-admin { background: rgba(196, 181, 253, .14); color: #d6ccfe; }
.header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.user-chip {
    font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--border);
    padding: 6px 12px; border-radius: 999px; direction: ltr;
}
.user-chip .role { color: var(--purple-text); margin-right: 6px; direction: rtl; }
form.inline { display: inline; }

/* buttons */
.btn {
    display: inline-block; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border-strong);
    padding: 8px 16px; border-radius: 10px; font-size: 13px; cursor: pointer;
    text-decoration: none; transition: background .2s, color .2s, border-color .2s, box-shadow .2s; font-family: inherit; line-height: 1.4;
}
.btn:hover { background: #262f66; color: var(--text); border-color: rgba(63, 216, 255, .4); }
.btn:focus-visible, .text-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: linear-gradient(135deg, #7fe6ff, #3fd8ff 55%, #2bb8f0); color: var(--on-accent);
               border-color: var(--accent); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent);
                     box-shadow: 0 0 0 3px rgba(63, 216, 255, .18), 0 4px 16px rgba(63, 216, 255, .25); }
.btn-danger { background: var(--bad-soft); color: var(--bad-text); border-color: rgba(239, 68, 68, .45); }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn.active { background: var(--purple-soft); color: var(--purple-text); border-color: var(--purple); }
.btn-back { display: inline-flex; align-items: center; gap: 6px; }
.btn-back svg { width: 16px; height: 16px; }
.btn-promote { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.btn-promote:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-warn { background: var(--warn-soft); color: var(--warn-text); border-color: rgba(245, 158, 11, .45); }
.btn-warn:hover { background: #b45309; border-color: #b45309; color: #fff; }
.btn-block { width: 100%; padding: 13px; font-size: 15px; font-weight: 700; }
.btn:disabled { opacity: .6; cursor: wait; }

/* toolbar + breadcrumb */
.toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin-bottom: 18px;
}
.toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.toolbar .breadcrumb { flex: 1 1 auto; }  /* its own width first: the buttons move to a line of their own before the path breaks */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { color: var(--border-strong); }
.breadcrumb .current { color: var(--text); }
.badge {
    display: inline-block; font-size: 10.5px; color: var(--purple-text); background: var(--purple-soft);
    border-radius: 999px; padding: 1px 8px; margin-top: 5px; white-space: nowrap;
}
.badge-owner { background: var(--gradient-gold); color: var(--on-accent); font-weight: 700; }
.locked { font-size: 11.5px; }
.badge-readonly { font-size: 12px; padding: 5px 12px; margin: 0; color: var(--warn-text); background: var(--warn-soft); }

/* alerts */
.alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 13px; border: 1px solid transparent; }
.alert-success { background: var(--accent-soft); color: #8ae9ff; border-color: rgba(63, 216, 255, .3); }
.alert-error { background: var(--bad-soft); color: var(--bad-text); border-color: rgba(239, 68, 68, .35); }

/* grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 18px; }
.item {
    position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    transition: background .2s, border-color .2s, transform .2s;
}
.item:hover { background: var(--surface-hover); border-color: var(--accent-line); transform: translateY(-2px); }
.item-link { display: block; padding: 18px 10px 14px; text-align: center; color: inherit; text-decoration: none; }
.item .icon { width: 52px; height: 52px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; }
.item .icon svg { width: 48px; height: 48px; }
.item .name {
    font-size: 12.5px; color: var(--text); word-break: break-word; line-height: 1.3;
    max-height: 2.6em; overflow: hidden;
}
.item .meta { font-size: 11px; color: var(--muted); margin-top: 4px; }
/* item menu (⋮): copy download link, rename, delete */
.item.menu-open { z-index: 20; }
.item-menu { position: absolute; top: 6px; left: 6px; }
.item-menu-btn {
    width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface-2);
    color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .15s, background .15s, color .15s;
}
.item:hover .item-menu-btn, .item-menu-btn:focus-visible, .item.menu-open .item-menu-btn { opacity: 1; }
.item-menu-btn:hover, .item.menu-open .item-menu-btn { background: var(--purple-soft); color: var(--purple-text); border-color: var(--purple); }
.item-menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ui-icon { width: 16px; height: 16px; flex: none; }
@media (hover: none) { .item-menu-btn { opacity: 1; } }
.item-menu-list {
    position: absolute; top: 34px; left: 0; min-width: 176px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
    background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5); animation: gx-pop .12s ease-out;
}
@keyframes gx-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.item-menu-list button {
    display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px;
    background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: right; cursor: pointer; white-space: nowrap;
}
.item-menu-list button:hover, .item-menu-list button:focus-visible { background: var(--surface-hover); color: var(--accent); outline: none; }
.item-menu-list .is-danger { color: var(--bad-text); }
.item-menu-list .is-danger:hover, .item-menu-list .is-danger:focus-visible { background: var(--bad-soft); color: #fecaca; }
.item-menu-list form { display: block; border-top: 1px solid var(--border); margin-top: 2px; padding-top: 2px; }
.empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--muted); font-size: 15px; }

/* sidebar */
.sidebar {
    width: 300px; background: var(--bg-side); border-left: 1px solid var(--border); padding: 24px 18px;
    display: flex; flex-direction: column; gap: 20px; overflow-y: auto;
}
.sidebar h2 { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--text-2); }
.disk-card, .formats-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.formats-card { padding: 16px; }
/* storage donut: outer ring = disk / quota usage, inner ring = share of each file format */
.donut { width: 176px; height: 176px; margin: 0 auto 10px; position: relative; }
.donut svg { width: 100%; height: 100%; display: block; }
.donut .seg { transition: opacity .15s; cursor: default; }
.donut .seg.is-dim { opacity: .2; }
.donut-text {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; pointer-events: none; text-align: center; padding: 0 38px;
}
.donut-text .free { font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.2; direction: ltr; white-space: nowrap; }
.donut-text .total { font-size: 10.5px; color: var(--text-2); margin-top: 3px; line-height: 1.4; }
.ring-legend { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-2); margin-bottom: 4px; }
.ring-legend span { display: flex; align-items: center; gap: 6px; }
.key { width: 14px; height: 6px; border-radius: 3px; display: inline-block; flex: none; }
.key-disk { background: var(--neutral-mark); }
.key-formats { background: linear-gradient(90deg, #3987e5 0 25%, #d95926 25% 50%, #199e70 50% 75%, #c98500 75%); }
.bars { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.bar-item { display: flex; flex-direction: column; gap: 5px; }
.bar-label { display: flex; justify-content: space-between; font-size: 12px; }
.bar-label span:first-child { color: var(--text); }
.bar-label span:last-child { color: var(--text-2); }
.bar-track { height: 6px; background: var(--track); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; width: 0; border-radius: 3px; background: var(--neutral-mark); }
.formats-card h3 { font-size: 13px; color: var(--text-2); margin-bottom: 10px; font-weight: 600; }
.format-item {
    padding: 9px 4px; border-bottom: 1px solid var(--border); font-size: 12.5px;
    border-radius: 6px; transition: opacity .15s, background .15s; outline: none;
}
.format-item:last-child { border-bottom: none; }
.format-item:hover, .format-item:focus-visible { background: var(--surface-2); }
.format-item.is-dim { opacity: .45; }
.format-head { display: flex; align-items: center; gap: 8px; }
.swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; background: #75748c; }
.format-name { color: var(--text); font-weight: 500; flex: 1; }
.format-name span { color: var(--muted); font-weight: 400; font-size: 11px; margin-right: 4px; }
.format-size { color: var(--text-2); font-size: 12px; direction: ltr; }
.format-track { height: 6px; background: var(--track); border-radius: 3px; overflow: hidden; margin: 7px 0 4px; }
.format-fill { height: 100%; width: 0; border-radius: 3px; background: #75748c; }
.format-pct { font-size: 11px; color: var(--text-2); }
.format-members { font-size: 10.5px; color: var(--muted); margin-top: 3px; text-align: right; word-break: break-word; }
.no-files { text-align: center; color: var(--muted); font-size: 13px; padding: 20px 0; }

/* modals */
.modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(5, 8, 24, .78);
    z-index: 1000; align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal {
    background: linear-gradient(180deg, #1a2252 0%, var(--surface) 140px); border: 1px solid rgba(138, 92, 246, .45);
    border-radius: 16px; padding: 28px; width: 90%; max-width: 440px;
    box-shadow: inset 0 2px 0 rgba(232, 184, 92, .35), 0 0 0 1px rgba(63, 216, 255, .06), 0 24px 60px rgba(0, 0, 0, .55);
}
.modal h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.modal p { font-size: 13px; color: var(--text-2); margin-bottom: 20px; line-height: 1.7; }
.modal input[type="file"] {
    width: 100%; padding: 12px; background: var(--input); border: 1px dashed var(--border-strong);
    border-radius: 10px; color: var(--text); margin-bottom: 12px;
}
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.upload-info { font-size: 12px; color: var(--text-2); min-height: 18px; }
.upload-info.error { color: var(--bad-text); }
.progress { height: 8px; background: var(--track); border-radius: 4px; overflow: hidden; margin-top: 10px; }
.progress-fill { height: 100%; width: 0; background: var(--gradient); transition: width .2s; }

/* forms */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.form-group input, .text-input {
    width: 100%; padding: 11px 14px; background: var(--input); border: 1px solid var(--border-strong);
    border-radius: 10px; color: var(--text); font-size: 14px; outline: none; font-family: inherit;
}
.form-group input::placeholder, .text-input::placeholder { color: #7880b3; }
/* a left-to-right field (address, password, key) shows its Persian hint right to left: in a left-to-right box the
   words of "رمز عبور SSH سرور" come out in the wrong order and brackets flip. What is typed stays left to right. */
.text-input[dir="ltr"]:placeholder-shown { direction: rtl; }
.form-group input:focus, .text-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; }
.form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.form-row .text-input { flex: 1 1 180px; width: auto; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* cards + users table */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px; margin-bottom: 20px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.card.narrow { max-width: 440px; margin: 0 auto; }
.card h2 { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: 14px; color: var(--text); }
.hint { font-size: 12.5px; color: var(--text-2); margin-bottom: 14px; line-height: 1.8; }
.table-wrap { overflow-x: auto; position: relative; }  /* positioned: hidden labels inside cannot widen the page */
.users-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.users-table th { text-align: right; color: var(--muted); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.users-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.users-table tr:hover td { background: var(--surface-hover); }
.users-table .uname { text-align: right; font-weight: 600; }
.users-table .uname a { text-decoration: none; }
.users-table .actions-wrap { display: flex; gap: 8px; flex-wrap: wrap; }
.users-table details summary { list-style: none; }
.users-table details summary::-webkit-details-marker { display: none; }
.mini-form {
    display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 12px;
    background: var(--input); border: 1px solid var(--border-strong); border-radius: 10px; min-width: 210px;
}
.mini-form label { font-size: 12px; color: var(--text); display: flex; gap: 6px; align-items: center; }

/* login / error pages */
.login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
    background:
        radial-gradient(circle at 18% 22%, rgba(63, 216, 255, .14), transparent 42%),
        radial-gradient(circle at 82% 78%, rgba(138, 92, 246, .18), transparent 45%),
        var(--bg);
}
.login-box {
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px; padding: 40px 36px;
    width: 100%; max-width: 380px; box-shadow: inset 0 2px 0 rgba(232, 184, 92, .3), 0 24px 60px rgba(0, 0, 0, .5);
}
.login-box.center { text-align: center; }
.login-box h1 { font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1.25; text-align: center; margin-bottom: 8px; }
.login-box p { text-align: center; color: var(--text-2); font-size: 14px; margin-bottom: 24px; }

@media (max-width: 768px) {
    .container { flex-direction: column; height: auto; }
    .sidebar { width: 100%; border-left: none; border-top: 1px solid var(--border); }
    .main { padding: 20px 16px; }
    .page { padding: 20px 16px; }
}

/* storage quota */
.quota-sub { font-size: 12px; color: var(--text-2); margin-top: 10px; }
.quota-alert { color: var(--bad-text); }
.bar-fill.quota-fill { background: var(--neutral-mark); }
.bar-fill.quota-fill.is-high { background: #fab219; }
.bar-fill.quota-fill.is-over { background: #d03b3b; }
.bar-track.mini { height: 5px; margin: 4px 0 2px; max-width: 160px; }
.quota-cell { min-width: 150px; }
.small { font-size: 11px; }
.row-disabled td { opacity: .55; }
.row-disabled td.actions { opacity: 1; }
.inline-field { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.form-row .quota-input { flex: 0 0 90px; width: 90px; }
.text-input.stacked { margin-bottom: 10px; }
.disk-card .quota-sub { text-align: center; }
.folder-quota {
    font-size: 12.5px; color: var(--text); background: var(--surface); border: 1px solid var(--border);
    border-right: 3px solid var(--purple); border-radius: 10px; padding: 9px 14px; margin-bottom: 14px;
}

/* download from link */
.jobs { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.jobs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.jobs-head h3 { font-size: 14px; color: var(--text); font-weight: 600; }
.jobs-list { display: flex; flex-direction: column; gap: 10px; }
.job { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
       padding: 10px 12px; background: var(--input); border: 1px solid var(--border); border-radius: 10px; }
.job-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.job-name { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.job-track { grid-column: 1; height: 5px; background: var(--track); border-radius: 3px; overflow: hidden; }
.job-fill { height: 100%; width: 0; background: var(--gradient); border-radius: 3px; transition: width .4s; }
.job[data-status="done"] .job-fill { background: var(--good); }
.job[data-status="failed"] .job-fill, .job[data-status="canceled"] .job-fill { background: #75748c; }
.job-meta { grid-column: 1; display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-2); }
.job-meta a { text-decoration: none; }
.job-error { color: var(--bad-text); }
.job-cancel { grid-column: 2; grid-row: 1 / span 3; }
.status-cell { white-space: nowrap; }
.status-cell .tag { margin-left: 4px; }

/* users' storage usage (admins) */
.users-usage { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.uu-row { display: flex; flex-direction: column; gap: 4px; }
.uu-row.uu-off { opacity: .6; }
.uu-head { display: flex; align-items: center; gap: 6px; font-size: 12.5px; flex-wrap: wrap; }
.uu-head a { color: var(--text); text-decoration: none; font-weight: 600; }
.uu-head a:hover { color: var(--accent); }
.uu-head .badge { margin-top: 0; }
.uu-val { margin-right: auto; color: var(--text-2); font-size: 11.5px; }
.uu-pct { font-size: 10.5px; color: var(--muted); }
.uu-warn { color: var(--warn-text); }
.uu-more { font-size: 11.5px; color: var(--accent); text-decoration: none; border-top: 1px solid var(--border); padding-top: 10px; }
.bar-track.mini-full { height: 5px; }

/* server monitor */
.mon-ranges { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.mon-status { font-size: 12px; margin-right: auto; }
.mon-tiles .stat-value { font-size: 21px; }
.mon-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mon-card { margin-bottom: 0; padding: 16px 18px; }
.mon-wide { grid-column: 1 / -1; }
.mon-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.mon-head h3 { font-size: 14px; color: var(--text); font-weight: 600; }
.mon-head .muted { font-size: 11.5px; }
.mon-legend { display: flex; gap: 14px; margin-right: auto; font-size: 12px; color: var(--text-2); }
.mon-legend span { display: flex; align-items: center; gap: 6px; }
.line-key { display: inline-block; width: 14px; height: 2px; border-radius: 1px; background: var(--muted); }
.chart { position: relative; direction: ltr; outline: none; border-radius: 8px; transition: opacity .2s; }
.chart:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.chart.is-loading { opacity: .55; }
.chart svg { display: block; touch-action: pan-y; }
.chart-tip {
    position: absolute; top: 8px; pointer-events: none; background: var(--input); border: 1px solid var(--border-strong);
    border-radius: 8px; padding: 8px 10px; font-size: 12px; min-width: 150px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    direction: rtl; z-index: 2;
}
.chart-tip-time { color: var(--muted); font-size: 11px; margin-bottom: 4px; direction: ltr; text-align: right; }
.chart-tip-row { display: flex; align-items: center; gap: 8px; }
.chart-tip-row b { color: var(--text); font-weight: 700; }
.chart-tip-row span { color: var(--text-2); }
.mon-foot { margin-top: 14px; }
@media (max-width: 900px) { .mon-grid { grid-template-columns: 1fr; } }

/* folder access (admin) */
.access-fields { border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 14px 12px; margin-top: 12px; }
.access-fields legend { font-size: 12.5px; color: var(--text-2); padding: 0 6px; }
.access-fields label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.access-modes, .access-level { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0; }
.access-users {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px 10px; margin: 8px 0;
    max-height: 160px; overflow-y: auto; padding: 8px; background: var(--input); border-radius: 8px;
}
.access-level { padding-top: 6px; border-top: 1px solid var(--border); }
.access-fields .small { margin-top: 6px; line-height: 1.6; }
.item-access {
    position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent);
    display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s;
}
.item-access svg { width: 16px; height: 16px; }
.item:hover .item-access, .item-access:focus-visible { opacity: 1; }
.item-access:hover { background: var(--accent); color: var(--on-accent); }
@media (hover: none) { .item-access { opacity: 1; } }

/* framed tables (logs, users, file manager): outer frame, vertical column lines, header band, zebra rows */
.grid-table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--border-strong); border-radius: 10px; }
.grid-table th {
    background: var(--surface-2); color: var(--text-2); font-weight: 600; white-space: nowrap;
    padding: 10px 12px; border-bottom: 1px solid var(--border-strong);
}
.grid-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); }
.grid-table th + th, .grid-table td + td { border-right: 1px solid var(--border-strong); }
.grid-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .022); }
.grid-table tbody tr:hover td { background: var(--surface-hover); }
.grid-table tbody tr:last-child td { border-bottom: none; }
.grid-table thead th:first-child { border-top-right-radius: 9px; }
.grid-table thead th:last-child { border-top-left-radius: 9px; }
.grid-table tbody tr:last-child td:first-child { border-bottom-right-radius: 9px; }
.grid-table tbody tr:last-child td:last-child { border-bottom-left-radius: 9px; }
.logs-table td { vertical-align: middle; }
.logs-table .col-time, .logs-table td:first-child { width: 132px; font-variant-numeric: tabular-nums; }
.logs-table .col-user { width: 110px; }
.logs-table .col-ip { width: 118px; }
.logs-table .col-event { width: 150px; }
.logs-table .col-target { min-width: 220px; }
.logs-table td:nth-child(3) { font-variant-numeric: tabular-nums; }
.logs-table td:nth-child(2) { white-space: nowrap; }  /* the name and its role star stay together (narrow screens) */
.users-table td { vertical-align: middle; }
.grid-table td[dir="ltr"] { text-align: right; }   /* numbers, dates, names: aligned with their (RTL) header */

/* users list: search + sort */
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.card .list-head h2 { margin-bottom: 0; }
.list-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.list-tools .text-input { width: 210px; padding: 7px 12px; font-size: 13px; }
.sort-chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.chip {
    font-size: 12px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border-strong);
    background: var(--surface-2); color: var(--text-2); text-decoration: none;
}
.chip:hover { border-color: var(--accent-line); color: var(--text); }
.chip.is-active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 600; }
.sort-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.sort-link:hover { color: var(--text); }
.sort-link.is-active { color: var(--accent); }
.sort-arrow { font-size: 11px; opacity: .45; }
.sort-link.is-active .sort-arrow, .chip .sort-arrow { opacity: 1; }

/* file manager (owner) */
.fm-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fm-table { width: 100%; font-size: 13px; }
.fm-table td { vertical-align: middle; padding: 7px 12px; }
.fm-table .fm-check { width: 44px; text-align: center; padding-left: 6px; padding-right: 6px; }
.fm-check input { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }
.fm-name { display: flex; align-items: center; gap: 10px; min-width: 240px; }
.fm-icon { flex: 0 0 auto; display: flex; }
.fm-icon svg { width: 30px; height: 30px; display: block; }
.fm-icon .ficon-badge { display: none; }
.fm-label { color: var(--text); text-decoration: none; word-break: break-word; }
.fm-label:hover { color: var(--accent); }
.fm-size { font-variant-numeric: tabular-nums; }
.fm-table .fm-act { width: 80px; text-align: center; }
.fm-up a { color: var(--accent); text-decoration: none; font-weight: 600; }
.fm-lock { display: inline-flex; color: var(--muted); }
.fm-lock svg { width: 16px; height: 16px; }
.grid-table tbody tr.is-selected td { background: var(--accent-soft); }
.fm-bar {
    position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 14px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border-strong);
    border-radius: 12px; box-shadow: 0 -8px 24px rgba(0, 0, 0, .25);
}
.fm-count { font-size: 13px; color: var(--text-2); min-width: 130px; }
.fm-count.has-items { color: var(--accent); font-weight: 600; }
.fm-dest { display: flex; align-items: center; gap: 8px; flex: 1 1 280px; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.fm-dest .text-input { flex: 1; min-width: 0; padding: 8px 12px; font-size: 13px; }
.fm-bar .btn:disabled { cursor: not-allowed; opacity: .45; }
.fm-hint { margin: 12px 0 0; }
.fm-paste {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px;
    border-radius: 12px; background: var(--purple-soft); border: 1px solid var(--purple); font-size: 13px;
}
.fm-paste-text { flex: 1 1 220px; }
@media (max-width: 768px) { .fm-date { display: none; } }
.fm-paste .btn:disabled { cursor: not-allowed; opacity: .45; }
.uu-empty { font-size: 12px; color: var(--muted); }
.admins-usage { border-color: rgba(138, 92, 246, .35); }

/* drawers (sidebar sections, report storage): the title opens / closes the section */
.drawer > summary { list-style: none; }
.drawer > summary::-webkit-details-marker { display: none; }
.drawer-head {
    display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; border-radius: 8px;
    padding: 4px 2px; transition: color .15s;
}
.drawer-head h2 { flex: 1; margin: 0; }
.drawer-head:hover h2, .drawer-head:focus-visible h2 { color: var(--text); }
.drawer-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.drawer-head .ui-icon { color: var(--muted); transition: transform .2s; }
.drawer:not([open]) > .drawer-head .ui-icon { transform: rotate(90deg); }
.drawer-count {
    font-size: 11px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 999px; padding: 0 8px; line-height: 18px;
}
.sidebar .drawer[open] > .drawer-head { margin-bottom: 10px; }
.sidebar .drawer[open] > .disk-card, .sidebar .drawer[open] > .formats-card { animation: gx-pop .15s ease-out; }
.drawer-formats .drawer-head h2 { font-size: 13.5px; }

/* download link modal */
.share-row { display: flex; gap: 8px; }
.share-row .text-input { flex: 1; min-width: 0; font-size: 12.5px; padding: 9px 12px; }
.share-status { font-size: 12.5px; color: var(--accent); min-height: 20px; margin-top: 10px; }
.share-status.error { color: var(--bad-text); }
.btn:disabled.share-copy { cursor: not-allowed; opacity: .45; }

/* login: the animated cosmic vortex (static/galaxy.js) behind the login box (no blur: cheap on phones) */
.galaxy-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; background: #04071a; }
.login-galaxy { position: relative; z-index: 1; background: transparent; }
.login-galaxy .login-box {
    background: linear-gradient(180deg, rgba(22, 29, 70, .9), rgba(12, 17, 44, .88)); border-color: rgba(138, 92, 246, .45);
    box-shadow: inset 0 2px 0 rgba(232, 184, 92, .38), 0 0 0 1px rgba(63, 216, 255, .08), 0 30px 80px rgba(0, 0, 0, .6),
                0 0 120px rgba(138, 92, 246, .22);
    animation: gx-rise .7s ease-out both;
}
.login-galaxy { flex-direction: column; gap: 22px; }
.login-galaxy .login-box h1 { font-size: 37px; letter-spacing: .5px; }
/* the big logo above the title (the same vortex as in the header) */
.login-logo { display: flex; justify-content: center; margin: -6px 0 6px; }
.login-logo .brand-logo { width: 104px; height: 104px; filter: drop-shadow(0 6px 22px rgba(63, 216, 255, .4)); }
/* copyright line under the login box */
.login-copy {
    max-width: 420px; text-align: center; font-size: 12.5px; line-height: 1.9; color: var(--text-2);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
.login-copy-sub { display: block; font-size: 11px; color: var(--muted); }
@keyframes gx-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* reports storage (logs page) */
.log-store { padding: 16px 20px; }
.log-store[open] > .drawer-head { margin-bottom: 8px; }
.log-store .drawer-head h2 { font-size: 15px; margin: 0; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.store-item { background: var(--input); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
              display: flex; flex-direction: column; gap: 6px; }
.store-title { font-size: 13px; color: var(--text-2); }
.store-value { font-size: 20px; font-weight: 700; color: var(--text); }
.store-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.store-retention { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px;
                   border-top: 1px solid var(--border); }

/* download link modal: expiry line */
.share-expiry { font-size: 12.5px; color: var(--purple-text); min-height: 18px; margin: -8px 0 10px; }
.modal { max-height: 92vh; overflow-y: auto; }
.alert-warn { background: var(--warn-soft); color: var(--warn-text); border-color: rgba(245, 158, 11, .35); }

/* search bar (files page + results page) */
.search-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.search-field {
    flex: 1 1 260px; display: flex; align-items: center; gap: 8px; padding: 0 14px; min-width: 0;
    background: var(--input); border: 1px solid var(--border-strong); border-radius: 999px; color: var(--muted);
    transition: border-color .15s, box-shadow .15s;
}
.search-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--accent); }
.search-field .ui-icon { width: 18px; height: 18px; }
.search-input {
    flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text);
    font: inherit; font-size: 14px; padding: 10px 0;
}
.search-input::placeholder { color: #7880b3; }
.search-input::-webkit-search-cancel-button { filter: invert(.7); cursor: pointer; }
.search-scope { width: auto; flex: 0 0 auto; padding: 9px 14px; border-radius: 999px; font-size: 13px; }
.search-where a { color: var(--text-2); text-decoration: none; font-size: 12.5px; }
.search-where a:hover { color: var(--accent); text-decoration: underline; }
.search-card .empty { padding: 40px 20px; }

/* confirmation dialog (askConfirm in app.js) */
.confirm-overlay {
    display: none; position: fixed; inset: 0; z-index: 1200; align-items: center; justify-content: center; padding: 16px;
    background: rgba(5, 8, 24, .74);
}
.confirm-overlay.active { display: flex; }
.confirm-box {
    width: 100%; max-width: 400px; text-align: center; padding: 26px 26px 22px; border-radius: 18px;
    background: linear-gradient(180deg, rgba(28, 36, 82, .98), rgba(20, 27, 61, .98));
    border: 1px solid rgba(138, 92, 246, .45);
    box-shadow: inset 0 2px 0 rgba(232, 184, 92, .35), 0 0 0 1px rgba(63, 216, 255, .08), 0 28px 70px rgba(0, 0, 0, .65),
                0 0 90px rgba(138, 92, 246, .18);
    animation: gx-rise .18s ease-out both;
}
.confirm-icon {
    width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 24px rgba(63, 216, 255, .25);
}
.confirm-icon svg { width: 28px; height: 28px; }
.confirm-icon.tone-danger { background: var(--bad-soft); color: var(--bad-text); box-shadow: 0 0 24px rgba(239, 68, 68, .28); }
.confirm-icon.tone-warn { background: var(--warn-soft); color: var(--warn-text); box-shadow: 0 0 24px rgba(245, 158, 11, .25); }
.confirm-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.confirm-text { font-size: 14px; line-height: 1.9; color: var(--text-2); margin-bottom: 18px; word-break: break-word; }
.confirm-box .modal-actions { justify-content: center; margin-top: 0; }
.confirm-box .btn { min-width: 112px; padding: 9px 20px; }

/* Pages after the login: a light galaxy sky, a different one for every section. Pure CSS - no canvas, no script,
   no blur filters: ::before is a still sky (nebulae + faint stars) painted once, ::after one layer of brighter stars
   that only fades in and out (compositor only). A section sets its nebulae (--sky-nebulae) and glow (--sky-glow). */
body.sky {
    --sky-glow: 138, 92, 246;    /* rgb of the card borders */
    --sky-nebulae:               /* files: the cosmic vortex: violet and indigo nebulae, a cyan glow, a pink and a gold touch */
        linear-gradient(118deg, transparent 28%, rgba(138, 92, 246, .08) 42%, rgba(200, 190, 255, .06) 50%,
                        rgba(63, 216, 255, .05) 58%, transparent 72%),
        radial-gradient(ellipse 55% 42% at 88% 8%, rgba(91, 63, 214, .32), transparent 70%),
        radial-gradient(ellipse 50% 48% at 6% 92%, rgba(63, 216, 255, .17), transparent 70%),
        radial-gradient(ellipse 38% 28% at 52% 48%, rgba(255, 122, 217, .06), transparent 70%),
        radial-gradient(ellipse 30% 22% at 20% 12%, rgba(232, 184, 92, .06), transparent 70%);
    background: #070b1d;
}
body.sky-search {   /* search: a bright teal nebula, purple far away */
    --sky-glow: 63, 216, 255;
    --sky-nebulae:
        linear-gradient(150deg, transparent 30%, rgba(63, 216, 255, .06) 46%, rgba(160, 240, 255, .05) 52%, transparent 68%),
        radial-gradient(ellipse 52% 40% at 14% 10%, rgba(63, 216, 255, .24), transparent 70%),
        radial-gradient(ellipse 46% 44% at 92% 88%, rgba(138, 92, 246, .22), transparent 70%),
        radial-gradient(ellipse 30% 24% at 60% 40%, rgba(120, 150, 255, .07), transparent 70%);
}
body.sky-users {    /* users: deep indigo with a pink nebula */
    --sky-glow: 129, 140, 248;
    --sky-nebulae:
        linear-gradient(62deg, transparent 30%, rgba(99, 102, 241, .07) 45%, rgba(190, 200, 255, .05) 52%, transparent 70%),
        radial-gradient(ellipse 56% 44% at 90% 12%, rgba(99, 102, 241, .28), transparent 70%),
        radial-gradient(ellipse 48% 44% at 8% 90%, rgba(236, 72, 153, .16), transparent 70%),
        radial-gradient(ellipse 34% 26% at 45% 55%, rgba(138, 92, 246, .08), transparent 70%);
}
body.sky-manager {  /* file manager: a teal-green aurora */
    --sky-glow: 16, 185, 129;
    --sky-nebulae:
        linear-gradient(160deg, transparent 22%, rgba(16, 185, 129, .08) 40%, rgba(63, 216, 255, .07) 50%, transparent 66%),
        radial-gradient(ellipse 54% 40% at 10% 6%, rgba(16, 185, 129, .2), transparent 70%),
        radial-gradient(ellipse 48% 46% at 94% 92%, rgba(63, 216, 255, .18), transparent 70%),
        radial-gradient(ellipse 30% 22% at 70% 30%, rgba(138, 92, 246, .08), transparent 70%);
}
body.sky-logs {     /* reports: a warm amber / crimson nebula */
    --sky-glow: 245, 158, 11;
    --sky-nebulae:
        linear-gradient(32deg, transparent 30%, rgba(245, 158, 11, .05) 46%, rgba(255, 220, 180, .04) 52%, transparent 68%),
        radial-gradient(ellipse 52% 40% at 88% 10%, rgba(245, 158, 11, .18), transparent 70%),
        radial-gradient(ellipse 46% 44% at 8% 90%, rgba(220, 38, 38, .13), transparent 70%),
        radial-gradient(ellipse 36% 26% at 50% 50%, rgba(138, 92, 246, .09), transparent 70%);
}
body.sky-monitor {  /* monitor: an electric-blue pulsar */
    --sky-glow: 59, 130, 246;
    --sky-nebulae:
        radial-gradient(circle at 50% 18%, rgba(63, 216, 255, .16), transparent 34%),
        radial-gradient(circle at 50% 18%, transparent 36%, rgba(59, 130, 246, .06) 38%, transparent 42%),
        radial-gradient(ellipse 50% 44% at 6% 92%, rgba(59, 130, 246, .2), transparent 70%),
        radial-gradient(ellipse 42% 36% at 94% 70%, rgba(138, 92, 246, .14), transparent 70%);
}
body.sky-account {  /* account (password): a magenta nebula */
    --sky-glow: 236, 72, 153;
    --sky-nebulae:
        linear-gradient(100deg, transparent 32%, rgba(236, 72, 153, .05) 48%, transparent 64%),
        radial-gradient(ellipse 54% 42% at 86% 12%, rgba(236, 72, 153, .2), transparent 70%),
        radial-gradient(ellipse 48% 44% at 10% 88%, rgba(138, 92, 246, .2), transparent 70%);
}
body.sky::before, body.sky::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; }
body.sky::before {
    background:
        var(--sky-nebulae),
        radial-gradient(1px 1px at 23px 41px, rgba(255, 255, 255, .85), transparent 100%) 0 0 / 211px 197px,
        radial-gradient(1px 1px at 97px 133px, rgba(232, 233, 247, .7), transparent 100%) 0 0 / 211px 197px,
        radial-gradient(1px 1px at 160px 70px, rgba(255, 255, 255, .6), transparent 100%) 0 0 / 211px 197px,
        radial-gradient(1px 1px at 61px 182px, rgba(232, 233, 247, .55), transparent 100%) 0 0 / 211px 197px,
        radial-gradient(1px 1px at 188px 160px, rgba(255, 255, 255, .5), transparent 100%) 0 0 / 211px 197px,
        radial-gradient(1.2px 1.2px at 40px 90px, rgba(255, 255, 255, .8), transparent 100%) 0 0 / 313px 283px,
        radial-gradient(1px 1px at 220px 30px, rgba(232, 233, 247, .65), transparent 100%) 0 0 / 313px 283px,
        radial-gradient(1px 1px at 120px 210px, rgba(255, 255, 255, .6), transparent 100%) 0 0 / 313px 283px,
        radial-gradient(1px 1px at 270px 150px, rgba(232, 233, 247, .5), transparent 100%) 0 0 / 313px 283px,
        radial-gradient(1px 1px at 300px 255px, rgba(255, 255, 255, .55), transparent 100%) 0 0 / 313px 283px,
        radial-gradient(ellipse at 50% 50%, #111845, #070b1d 80%);
}
body.sky::after {
    background:
        radial-gradient(2px 2px at 70px 60px, rgba(255, 255, 255, .95), transparent 100%) 0 0 / 397px 353px,
        radial-gradient(1.6px 1.6px at 250px 200px, rgba(63, 216, 255, .95), transparent 100%) 0 0 / 397px 353px,
        radial-gradient(2px 2px at 330px 90px, rgba(198, 176, 255, .95), transparent 100%) 0 0 / 397px 353px,
        radial-gradient(1.6px 1.6px at 150px 300px, rgba(255, 255, 255, .9), transparent 100%) 0 0 / 397px 353px,
        radial-gradient(1.8px 1.8px at 30px 230px, rgba(243, 207, 134, .95), transparent 100%) 0 0 / 397px 353px,
        radial-gradient(2px 2px at 90px 120px, rgba(255, 255, 255, .95), transparent 100%) 0 0 / 523px 461px,
        radial-gradient(1.6px 1.6px at 400px 330px, rgba(63, 216, 255, .9), transparent 100%) 0 0 / 523px 461px,
        radial-gradient(1.8px 1.8px at 310px 60px, rgba(255, 158, 228, .85), transparent 100%) 0 0 / 523px 461px,
        radial-gradient(1.6px 1.6px at 190px 400px, rgba(255, 255, 255, .85), transparent 100%) 0 0 / 523px 461px;
    will-change: opacity;
    animation: gx-stars 5.5s ease-in-out infinite alternate;
}
@keyframes gx-stars { from { opacity: .25; } to { opacity: 1; } }
body.sky .container, body.sky .page { position: relative; z-index: 1; }
body.sky .main { background: transparent; }
body.sky .sidebar { background: rgba(10, 15, 40, .55); border-left-color: rgba(var(--sky-glow), .22); }
body.sky .item {
    background: linear-gradient(160deg, rgba(30, 38, 86, .66), rgba(18, 24, 56, .66));
    border-color: rgba(var(--sky-glow), .22);
}
body.sky .item:hover {
    background: linear-gradient(160deg, rgba(38, 44, 100, .8), rgba(22, 30, 66, .8));
    border-color: var(--accent-line); box-shadow: 0 8px 26px rgba(63, 216, 255, .12), 0 0 0 1px rgba(63, 216, 255, .15);
}
body.sky .disk-card, body.sky .formats-card, body.sky .jobs, body.sky .folder-quota, body.sky .card,
body.sky .stat-tile, body.sky .fm-bar {
    background: rgba(20, 27, 61, .66); border-color: rgba(var(--sky-glow), .22);
}
body.sky .stat-tile:hover { border-color: rgba(var(--sky-glow), .55); }
body.sky .user-chip { background: rgba(20, 27, 61, .7); border-color: rgba(var(--sky-glow), .3); }
body.sky .brand-logo { filter: drop-shadow(0 4px 16px rgba(63, 216, 255, .4)); }
body.sky .item-menu-list { background: #1c2452; }
body.sky .grid-table th { background: rgba(28, 36, 82, .82); }
body.sky .grid-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .03); }

@media (max-width: 768px) {
    .brand-logo { width: 52px; height: 52px; }
    .header h1 { font-size: 26px; }
    .login-galaxy .login-box h1 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .brand-logo, .brand-beacon, .header h1 a:hover .brand-swirl, .header h1 a:hover .brand-beacon, .star-owner,
    .login-galaxy .login-box, .item-menu-list, .confirm-box, body.sky::after { animation: none; }
    body.sky::after { opacity: .7; will-change: auto; }
}

/* role badge under each account's folder in users/ (owner / admin / user) */
.badge-user { background: var(--accent-soft); color: #8ae9ff; }
/* "download without checking the SSL certificate" option in the download-from-link window */
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text); cursor: pointer;
             margin: 4px 0 6px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--input); }
.check-row input { margin-top: 3px; flex: none; }
.check-hint { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.7; }
/* when a (non-owner) session ends, in the header */
.session-end { margin-right: 8px; padding-right: 8px; border-right: 1px solid var(--border-strong); color: var(--warn-text);
               font-size: 11.5px; direction: rtl; }
.uname-text { color: var(--text); }

/* favourites: a heart on favourite cards (top right), the item-menu toggle, the "favourites" card in the root */
.fav-mark { position: absolute; top: 8px; right: 8px; color: #f472b6; display: none; pointer-events: none;
            filter: drop-shadow(0 0 4px rgba(244, 114, 182, .55)); }
.fav-mark .ui-icon { width: 16px; height: 16px; fill: #f472b6; }
.item.is-fav .fav-mark { display: flex; }
.item.is-fav .item-access { z-index: 1; }
.fav-toggle .ui-icon { color: #f472b6; }
.item .meta.where { color: var(--purple-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-virtual { border-style: dashed; }

/* upload window: drop zone + the list of chosen files (each can be taken out) + progress per file */
.modal.modal-upload { max-width: 560px; }
.dropzone {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer;
    padding: 22px 16px; border: 2px dashed var(--border-strong); border-radius: 14px; background: var(--input);
    color: var(--text-2); transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.dropzone .ui-icon { width: 30px; height: 30px; color: var(--accent); }
.dropzone-title { font-size: 14px; font-weight: 600; color: var(--text); }
.dropzone-sub { font-size: 11.5px; color: var(--muted); }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload-list { list-style: none; margin: 12px 0 0; max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.upload-row {
    position: relative; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px;
    padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
    /* rows keep their height when the list scrolls (overflow: hidden would let the flex column squeeze them flat,
       so the names of many files ended up on top of each other) */
    flex-shrink: 0; min-height: 44px;
}
.upload-ext { font-size: 10px; font-weight: 700; color: var(--on-accent); background: var(--purple); border-radius: 5px;
              padding: 2px 6px; min-width: 38px; text-align: center; direction: ltr; }
.upload-name { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.upload-size { font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
.upload-remove { width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(239, 68, 68, .4); background: var(--bad-soft);
                 color: var(--bad-text); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.upload-remove:hover { background: #b91c1c; color: #fff; }
.upload-remove:disabled { opacity: .35; cursor: not-allowed; }
.upload-remove svg { width: 14px; height: 14px; }
.upload-row-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.upload-row-bar i { display: block; height: 100%; width: 0; background: var(--gradient); transition: width .2s; }
.upload-row.is-done .upload-row-bar i { background: var(--good); }
.upload-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; min-height: 22px; }
.upload-info { font-size: 12.5px; }

/* header: counter of account requests waiting for the owner */
.count-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-right: 4px; border-radius: 999px; font-size: 11px;
               line-height: 18px; text-align: center; background: var(--bad); color: #fff; font-weight: 700; }
.public-note { border-right-color: var(--accent); }
.req-reject { display: flex; gap: 6px; align-items: center; }
.req-reject .text-input { width: 170px; padding: 6px 10px; font-size: 12.5px; }
.requests-table td { vertical-align: middle; }
body.sky-requests {  /* account requests: a golden nebula */
    --sky-glow: 250, 204, 21;
    --sky-nebulae:
        linear-gradient(140deg, transparent 30%, rgba(250, 204, 21, .05) 46%, rgba(255, 240, 200, .04) 52%, transparent 68%),
        radial-gradient(ellipse 50% 40% at 12% 10%, rgba(250, 204, 21, .15), transparent 70%),
        radial-gradient(ellipse 48% 44% at 92% 88%, rgba(63, 216, 255, .16), transparent 70%),
        radial-gradient(ellipse 30% 24% at 60% 40%, rgba(138, 92, 246, .08), transparent 70%);
}

/* ---------------------------------------------------------------------------------------------------------------
   Viewer for pictures and players for video / sound (templates/_viewer.html, app.js)
   --------------------------------------------------------------------------------------------------------------- */
body.viewer-open { overflow: hidden; }
.viewer {
    position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column;
    background: radial-gradient(ellipse 80% 70% at 50% 35%, rgba(52, 36, 110, .5), transparent 70%), rgba(6, 6, 14, .985);
    animation: vw-in .18s ease-out;
}
.viewer:focus { outline: none; }  /* the dialog itself takes the focus when it opens; its buttons show theirs */
@keyframes vw-in { from { opacity: 0; } }
.viewer-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px;
    background: rgba(25, 25, 39, .88); border-bottom: 1px solid var(--border); flex: none;
}
.viewer-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.viewer-kind { flex: none; font-size: 11px; font-weight: 700; color: #fff; background: #199e70; border-radius: 6px; padding: 2px 8px; }
.viewer[data-kind="video"] .viewer-kind { background: #c94f4f; }
.viewer[data-kind="audio"] .viewer-kind { background: #c2437a; }
.viewer-title { font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap;
                overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.viewer-meta { flex: none; font-size: 12px; color: var(--muted); direction: ltr; }
.viewer-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.viewer-count { font-size: 12px; color: var(--text-2); margin-left: 4px; white-space: nowrap; }
.viewer-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; min-width: 36px; padding: 0 10px;
    border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
    font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s;
}
.viewer-btn:hover { background: #34344f; border-color: var(--accent-line); }
.viewer-btn:focus-visible, .viewer-nav:focus-visible, .pl-btn:focus-visible, .pl-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.viewer-btn .ui-icon { width: 18px; height: 18px; }
.viewer-dl { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.viewer-dl:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.viewer-zoom[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.viewer-stage { flex: 1; display: flex; align-items: center; gap: 10px; padding: 14px; min-height: 0; position: relative; }
.viewer-body { flex: 1; align-self: stretch; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.viewer-nav {
    flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-strong); z-index: 2;
    background: rgba(33, 33, 52, .85); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: border-color .15s, color .15s, background .15s;
}
.viewer-nav:hover { border-color: var(--accent); color: var(--accent); background: rgba(33, 33, 52, 1); }
.viewer-nav .ui-icon { width: 22px; height: 22px; }
.vw-pane { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; min-height: 0; }

/* pictures: fit in the window; the zoom button (or a click on the picture) shows it at its real size, scrollable */
.vw-image { margin: 0; overflow: hidden; }
.vw-image img {
    max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; cursor: zoom-in; transition: opacity .2s;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .55);
    background: repeating-conic-gradient(#2a2a40 0 25%, #222236 0 50%) 0 0 / 20px 20px;  /* transparent parts show a checkerboard */
}
/* a sideways swipe over a picture is the viewer's (next / previous), not the browser's "back" gesture (which closed it) */
.viewer[data-kind="image"]:not(.is-zoomed) .viewer-body { touch-action: pan-y pinch-zoom; }
.viewer.is-zoomed .vw-image { display: block; overflow: auto; text-align: center; }
.viewer.is-zoomed .vw-image img { max-width: none; max-height: none; cursor: zoom-out; border-radius: 0; }
.viewer.is-loading .vw-image img { opacity: .25; }
.viewer.is-loading .viewer-body::after {
    content: ""; position: absolute; width: 44px; height: 44px; border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .14); border-top-color: var(--accent); animation: vw-spin .9s linear infinite;
}
@keyframes vw-spin { to { transform: rotate(360deg); } }

/* video: the player's own controls — gradient progress with what is loaded, ±10 s, volume, speed, picture-in-picture,
   download, full screen; they fade out while the video plays and the pointer rests. The frame takes the video's
   own shape (--ar, set by app.js) as big as the window allows. */
.vw-video { container-type: size; }
.vplayer {
    --ar: 1.7778; position: relative; width: 100%; height: 100%; background: #000; border-radius: 16px; overflow: hidden;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .65), 0 0 0 1px rgba(142, 114, 238, .28), 0 0 70px rgba(91, 69, 201, .28);
    container-type: size;  /* its menus are as tall as the player allows (100cqh), never cut off by its edge */
}
@supports (width: 1cqh) {
    .vplayer { width: min(100cqw, 100cqh * var(--ar)); height: auto; aspect-ratio: var(--ar); }
}
.vplayer.is-full, .vplayer:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.vplayer video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; cursor: pointer; outline: none; }
.vplayer.is-idle, .vplayer.is-idle video { cursor: none; }
.vp-top {
    position: absolute; inset: 0 0 auto 0; padding: 14px 18px 34px; direction: rtl; text-align: right; pointer-events: none;
    background: linear-gradient(rgba(0, 0, 0, .7), transparent); color: #fff; font-size: 15px; font-weight: 600;
    opacity: 0; transition: opacity .25s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vplayer.is-full .vp-top { opacity: 1; }
.vplayer.is-full.is-idle .vp-top { opacity: 0; }
.vp-big {
    position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; border: 0;
    cursor: pointer; color: var(--on-accent); background: var(--gradient); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 10px rgba(0, 215, 210, .14), 0 0 0 22px rgba(142, 114, 238, .08), 0 0 60px rgba(142, 114, 238, .6);
    transition: transform .2s, opacity .2s;
}
.vp-big .ui-icon { width: 36px; height: 36px; margin-left: 5px; }
.vp-big:hover { transform: scale(1.07); }
.vp-big:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.vplayer.is-playing .vp-big, .vplayer.is-waiting .vp-big { opacity: 0; transform: scale(.8); pointer-events: none; }
.vp-spin {
    position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; display: none;
    border: 3px solid rgba(255, 255, 255, .14); border-top-color: var(--accent); border-right-color: var(--purple);
    animation: vw-spin .9s linear infinite; pointer-events: none;
}
.vplayer.is-waiting .vp-spin { display: block; }
.vp-controls {
    position: absolute; inset: auto 0 0 0; padding: 30px 14px 10px; transition: opacity .25s, transform .25s;
    background: linear-gradient(transparent, rgba(8, 7, 20, .9) 58%);
}
.vplayer.is-idle .vp-controls { opacity: 0; transform: translateY(10px); pointer-events: none; }
.vp-seek { position: relative; height: 18px; display: flex; align-items: center; }
.vp-buffered { position: absolute; left: 0; top: 50%; width: 0; height: 5px; margin-top: -2.5px; border-radius: 3px;
               background: rgba(255, 255, 255, .3); pointer-events: none; transition: width .3s; }
.vp-pos {
    -webkit-appearance: none; appearance: none; position: relative; width: 100%; height: 5px; margin: 0; border-radius: 3px; cursor: pointer;
    background: linear-gradient(90deg, var(--accent), var(--purple), #e0559a) 0 0 / var(--fill, 0%) 100% no-repeat, rgba(255, 255, 255, .14);
    transition: height .15s;
}
.vp-seek:hover .vp-pos { height: 7px; }
.vp-pos::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 0;
                                box-shadow: 0 0 0 4px rgba(0, 215, 210, .35), 0 0 12px rgba(0, 215, 210, .8); }
.vp-pos::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 4px rgba(0, 215, 210, .35); }
.vp-pos:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.vp-tip {
    position: absolute; bottom: 22px; transform: translateX(-50%); padding: 3px 8px; border-radius: 7px; pointer-events: none;
    background: rgba(20, 20, 34, .95); border: 1px solid var(--border-strong); color: #fff; font-size: 11.5px; white-space: nowrap;
}
.vp-row { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.vp-btn {
    position: relative; flex: none; width: 40px; height: 40px; border: 0; border-radius: 11px; background: transparent; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none;
    font: 600 13px/1 'Readex Pro', sans-serif; transition: background .15s, color .15s;
}
.vp-btn:hover { background: rgba(255, 255, 255, .12); color: var(--accent); }
.vp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vp-btn .ui-icon { width: 22px; height: 22px; }
.vp-play .ui-icon { width: 25px; height: 25px; }
.vplayer.is-playing .pl-ico-play { display: none; }
.vplayer.is-playing .pl-ico-pause { display: flex; }
.vplayer.is-muted .vp-mute { color: var(--bad-text); }
.vplayer.is-muted .vp-mute::before { content: ""; position: absolute; width: 24px; height: 2px; border-radius: 1px; background: currentColor; transform: rotate(-45deg); }
.vp-vol { display: flex; align-items: center; }
.vp-volume { width: 0; opacity: 0; flex: none; transition: width .2s, opacity .2s, margin .2s; }
.vp-vol:hover .vp-volume, .vp-vol:focus-within .vp-volume { width: 92px; opacity: 1; margin: 0 6px; }
.vp-time { color: rgba(255, 255, 255, .85); font-size: 12.5px; font-variant-numeric: tabular-nums; margin: 0 8px; white-space: nowrap; }
.vp-gap { flex: 1; }
.vp-speed { position: relative; }
.vp-rate { width: auto; min-width: 48px; padding: 0 9px; }
.vp-rates {
    position: absolute; bottom: 46px; right: 0; z-index: 2; display: flex; flex-direction: row; gap: 2px; padding: 5px;
    border-radius: 12px; background: rgba(20, 20, 34, .97); border: 1px solid var(--border-strong); box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}
.vp-rates button { border: 0; border-radius: 8px; background: transparent; color: var(--text-2); padding: 7px 8px; white-space: nowrap;
                   cursor: pointer; font: 13px 'Readex Pro', sans-serif; }
.vp-rates button:hover, .vp-rates button[aria-checked="true"] { background: var(--accent-soft); color: var(--accent); }
.vp-ico-full, .vp-ico-exit { display: inline-flex; }
.vp-ico-exit, .vplayer.is-full .vp-ico-full { display: none; }
.vplayer.is-full .vp-ico-exit { display: inline-flex; }
@media (hover: none) { .vp-volume { display: none; } }
@media (max-width: 600px) {
    .vp-back, .vp-fwd { display: none; }
    .vp-btn { width: 36px; height: 36px; }
    .vp-time { font-size: 11.5px; margin: 0 4px; }
    .vp-big { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
    .vp-big .ui-icon { width: 30px; height: 30px; }
    .vp-controls { padding: 24px 8px 6px; }
}


/* waiting for / offering a converted copy (and errors): a small planet with a moon that circles while busy */
.vw-wait { flex-direction: column; gap: 16px; text-align: center; max-width: 480px; margin: 0 auto; padding: 0 10px; }
.vw-orbit { position: relative; width: 88px; height: 88px; border-radius: 50%; border: 2px solid rgba(142, 114, 238, .35); flex: none; }
.vw-orbit::before {
    content: ""; position: absolute; inset: 24px; border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #a7f3f0, #3fb8d6 32%, #5b45c9 72%, #21184f); box-shadow: 0 0 24px rgba(142, 114, 238, .5);
}
.vw-orbit span { position: absolute; inset: -2px; border-radius: 50%; }
.vw-orbit span::after {
    content: ""; position: absolute; top: -6px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 12px var(--accent);
}
.vw-wait.is-busy .vw-orbit span { animation: vw-spin 1.6s linear infinite; }
.vw-wait.is-error .vw-orbit { border-color: rgba(239, 68, 68, .5); }
.vw-wait.is-error .vw-orbit::before { filter: grayscale(.8) brightness(.7); }
.vw-wait.is-error .vw-orbit span::after { background: var(--bad); box-shadow: 0 0 12px var(--bad); }
.vw-wait-text { font-size: 14px; color: var(--text); line-height: 1.9; }
.vw-wait.is-error .vw-wait-text { color: var(--bad-text); }
.vw-wait-bar { width: min(360px, 100%); margin: 0; }
.vw-wait-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.vw-wait-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.vw-wait-actions .ui-icon { width: 16px; height: 16px; }

@media (max-width: 768px) {
    .viewer-bar { padding: 8px 10px; gap: 8px; }
    .viewer-meta { display: none; }
    .viewer-dl span { display: none; }
    .viewer-stage { padding: 6px; gap: 0; }
    .viewer-nav { position: absolute; top: 50%; margin-top: -22px; width: 44px; height: 44px; opacity: .9; }
    .viewer-prev { right: 8px; }
    .viewer-next { left: 8px; }
    /* over a picture or a video the arrows are fine; over text they would hide what is read: a strip of their own */
    .viewer.has-nav[data-kind="text"] .viewer-stage, .viewer.has-nav[data-kind="pdf"] .viewer-stage { padding-bottom: 58px; }
    .viewer[data-kind="text"] .viewer-nav, .viewer[data-kind="pdf"] .viewer-nav { top: auto; bottom: 8px; margin-top: 0; }
    .vw-wait { padding: 0 52px; }
}
@media (max-width: 480px) {
    .viewer-kind { display: none; }  /* the name (with its extension) needs the room */
}

/* ---------------------------------------------------------------------------------------------------------------
   Upload window: a planet circles while the files go up (its orbit is the progress), then collapses into a black hole
   --------------------------------------------------------------------------------------------------------------- */
.upload-scene { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0 0; }
.scene-svg { width: 196px; height: 196px; overflow: visible; }
.scene-track { fill: none; stroke: var(--track); stroke-width: 4; }
.scene-ring {
    fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0 100;
    transition: stroke-dasharray .3s, stroke .6s; filter: drop-shadow(0 0 4px rgba(0, 215, 210, .65));
}
.scene-pct { font-size: 15px; font-weight: 700; color: var(--text); direction: ltr; min-height: 22px; }
.scene-planet, .scene-hole, .scene-flash, .scene-debris path { transform-box: view-box; transform-origin: 110px 110px; }
.scene-planet { animation: scene-bob 5s ease-in-out infinite; }
@keyframes scene-bob { 50% { transform: translateY(-3px); } }
.planet-bands { animation: scene-drift 7s linear infinite; }
@keyframes scene-drift { to { transform: translateX(-88px); } }
.planet-cracks { opacity: 0; transition: opacity .4s; filter: drop-shadow(0 0 2px #fb923c); }
.scene-flash { fill: #fff; opacity: 0; }
.scene-debris path { opacity: 0; }
.scene-debris .d1 { --dx: -4px;  --dy: -46px; }
.scene-debris .d2 { --dx: 44px;  --dy: -10px; }
.scene-debris .d3 { --dx: 36px;  --dy: 34px; }
.scene-debris .d4 { --dx: -4px;  --dy: 46px; }
.scene-debris .d5 { --dx: -42px; --dy: 20px; }
.scene-debris .d6 { --dx: -44px; --dy: -14px; }
.scene-debris .d7 { --dx: 24px;  --dy: -40px; }
.scene-debris .d8 { --dx: -24px; --dy: -40px; }
.scene-hole { opacity: 0; transform: scale(0); }
.hole-lens { filter: drop-shadow(0 0 5px #fb923c); }

.upload-scene.is-done .planet-cracks { opacity: 1 !important; }
.upload-scene.is-done .scene-planet { animation: scene-collapse 1s cubic-bezier(.55, 0, .75, .25) forwards; }
@keyframes scene-collapse {
    0% { transform: none; }
    12% { transform: translate(2px, -1px) scale(1.04); }
    24% { transform: translate(-2px, 1px) scale(1.07); }
    36% { transform: translate(2px, 1px) scale(1.1); filter: brightness(1.5); }
    100% { transform: scale(0) rotate(160deg); filter: brightness(2.5); opacity: 0; }
}
.upload-scene.is-done .scene-flash { animation: scene-flash .7s ease-out .75s both; }
@keyframes scene-flash { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(1.9); } }
.upload-scene.is-done .scene-debris path { animation: scene-debris 1.5s cubic-bezier(.3, .6, .4, 1) .8s both; }
@keyframes scene-debris {
    0% { opacity: 1; transform: none; }
    45% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(200deg); }
    100% { opacity: 0; transform: scale(.05) rotate(560deg); }
}
.upload-scene.is-done .scene-hole { animation: scene-hole 1.1s cubic-bezier(.2, .9, .3, 1.25) .85s forwards; }
@keyframes scene-hole { 0% { opacity: 0; transform: scale(0) rotate(-90deg); } 100% { opacity: 1; transform: none; } }
.upload-scene.is-done .hole-disk { animation: scene-spin 2.2s linear infinite; }
@keyframes scene-spin { to { transform: rotate(360deg); } }
.upload-scene.is-done .scene-ring { stroke: #fb923c; filter: drop-shadow(0 0 6px rgba(251, 146, 60, .7)); }
.upload-scene.is-done .scene-pct { color: var(--good-text); }

/* ---------------------------------------------------------------------------------------------------------------
   "Download from link": a rocket flies along each progress line towards the Earth and lands on it when done.
   app.js sets --p (now) and --from (last poll) between 0 and 1; the move is a CSS animation between the two.
   --------------------------------------------------------------------------------------------------------------- */
.job-flight { position: relative; grid-column: 1; height: 48px; display: flex; align-items: center; padding-inline-end: 48px; --p: 0; --from: var(--p); }
.job-flight .job-track { flex: 1; }
.job-flight .job-fill { width: calc(var(--p) * 100%); animation: flight-fill 1.9s linear both; transition: none; }
@keyframes flight-fill { from { width: calc(var(--from) * 100%); } }
.job-flight[data-status="done"] .job-fill { background: var(--good); }
.job-flight[data-status="failed"] .job-fill, .job-flight[data-status="canceled"] .job-fill { background: #75748c; }
.job-earth { position: absolute; inset-inline-end: 0; top: 50%; width: 38px; height: 38px; margin-top: -19px; }
.earth-svg { width: 100%; height: 100%; display: block; animation: earth-turn 40s linear infinite; }
@keyframes earth-turn { to { transform: rotate(-360deg); } }
.job-rocket {
    position: absolute; top: 50%; width: 42px; height: 42px; margin-top: -21px; z-index: 1;
    inset-inline-start: calc((100% - 86px) * var(--p)); animation: flight-move 1.9s linear both;
}
@keyframes flight-move { from { inset-inline-start: calc((100% - 86px) * var(--from)); } }
.rocket-svg { width: 100%; height: 100%; display: block; overflow: visible; transform: rotate(-135deg); }  /* nose towards the Earth */
.rocket-flame { transform-box: fill-box; transform-origin: 100% 0; opacity: 0; }
.job-flight[data-status="running"] .rocket-svg { animation: rocket-bob 1.1s ease-in-out infinite; }
.job-flight[data-status="queued"] .rocket-svg { animation: rocket-bob 2.6s ease-in-out infinite; }
@keyframes rocket-bob { 50% { translate: 0 -2px; } }
.job-flight[data-status="running"] .rocket-flame { opacity: 1; animation: rocket-flame .16s ease-in-out infinite alternate; }
.job-flight[data-status="canceling"] .rocket-flame { opacity: .45; }
@keyframes rocket-flame { from { transform: scale(.75); } to { transform: scale(1.15); } }
.job-flight.is-unknown .job-rocket { animation: flight-cruise 2.8s ease-in-out infinite alternate; }
@keyframes flight-cruise { from { inset-inline-start: calc((100% - 86px) * .06); } to { inset-inline-start: calc((100% - 86px) * .62); } }
.job-flight.is-unknown .job-fill {
    width: 100%; animation: none;
    background: repeating-linear-gradient(-45deg, rgba(0, 215, 210, .55) 0 8px, rgba(142, 114, 238, .4) 8px 16px);
}
.job-flight[data-status="failed"] .job-rocket, .job-flight[data-status="canceled"] .job-rocket { filter: grayscale(1) brightness(.7); }
.job-flight[data-status="failed"] .rocket-svg, .job-flight[data-status="canceled"] .rocket-svg { transform: rotate(-100deg); }
/* landed: tail on the Earth, nose up and away from it; landing = slow down, flip over, flame out, a puff of dust */
.job-flight[data-status="done"] .job-rocket { inset-inline-start: calc(100% - 69px); }
.job-flight[data-status="done"]:not(.is-landing) .job-rocket { animation: none; }
.job-flight[data-status="done"] .rocket-svg { transform: rotate(45deg); }
.job-flight[data-status="done"] .earth-svg { filter: drop-shadow(0 0 3px rgba(34, 197, 94, .45)); }
.job-flight.is-landing .job-rocket, .job-flight.is-landing .job-fill { animation-duration: 1.3s; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
.job-flight.is-landing .rocket-svg { animation: rocket-land 1.8s ease-in-out both; }
@keyframes rocket-land {
    0%, 40% { transform: rotate(-135deg); }
    78% { transform: rotate(52deg) translateX(3px); }
    100% { transform: rotate(45deg); }
}
.job-flight.is-landing .rocket-flame { animation: rocket-flame-out 1.8s ease-out both; }
@keyframes rocket-flame-out { 0%, 70% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(.2); } }
.job-dust { position: absolute; top: 50%; left: 4px; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; pointer-events: none; }
.job-flight.is-landing .job-dust { animation: rocket-dust .9s ease-out 1.3s both; }
@keyframes rocket-dust {
    0% { background: rgba(228, 227, 236, .6); box-shadow: 0 0 0 0 rgba(228, 227, 236, .55); }
    100% { background: rgba(228, 227, 236, 0); box-shadow: 0 0 0 15px rgba(228, 227, 236, 0); }
}
.job-flight.is-landing .earth-svg { animation: earth-turn 40s linear infinite, earth-glow 1.2s ease-out 1.3s both; }
@keyframes earth-glow {
    0% { filter: drop-shadow(0 0 0 rgba(34, 197, 94, 0)); }
    40% { filter: drop-shadow(0 0 10px rgba(34, 197, 94, .95)); }
    100% { filter: drop-shadow(0 0 3px rgba(34, 197, 94, .45)); }
}

@media (prefers-reduced-motion: reduce) {
    .viewer, .vp-spin, .vw-wait.is-busy .vw-orbit span, .scene-planet, .planet-bands,
    .upload-scene.is-done .hole-disk, .earth-svg, .job-flight .rocket-svg, .job-flight .rocket-flame, .job-flight .job-rocket,
    .job-flight .job-fill, .job-dust { animation: none !important; }
    .upload-scene.is-done .scene-planet { opacity: 0; }
    .upload-scene.is-done .scene-hole { opacity: 1; transform: none; }
    .job-flight[data-status="running"] .rocket-flame { opacity: 1; }
    .job-flight.is-landing .rocket-flame { opacity: 0; }
}

/* the main admin's "log in as" tab: an amber striped bar that stays on top, so it is never mistaken for the
   main admin's own tab; and the button on the users page that opens such a tab */
.acting-bar {
    position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin: 0 0 16px;
    border-radius: 12px; border: 1px solid rgba(245, 158, 11, .6); color: #fde68a; font-size: 13px; line-height: 1.8;
    background: repeating-linear-gradient(-45deg, rgba(245, 158, 11, .2) 0 14px, rgba(245, 158, 11, .12) 14px 28px), #2a2310;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.acting-icon { flex: none; display: flex; }
.acting-icon .ui-icon { width: 22px; height: 22px; color: #fbbf24; }
.acting-text { flex: 1; min-width: 0; }
.acting-text b { color: #fff; }
.acting-exit, .acting-exit:hover { background: #f59e0b; color: #1a1406; border-color: #f59e0b; font-weight: 700; }
.acting-exit:hover { filter: brightness(1.1); }
.btn-act-as { display: inline-flex; align-items: center; gap: 5px; background: rgba(245, 158, 11, .12); color: #fcd34d; border-color: rgba(245, 158, 11, .45); }
.btn-act-as .ui-icon { width: 15px; height: 15px; }
.btn-act-as:hover { background: #f59e0b; color: #1a1406; border-color: #f59e0b; }
@media (max-width: 768px) { .acting-bar { flex-wrap: wrap; } .acting-text { flex-basis: calc(100% - 40px); } }

/* ---------------------------------------------------------------------------------------------------------------
   Sound player (templates/_viewer.html, app.js): one ringed planet, title, favourite, time (elapsed / left), the
   controls with round soft buttons and a glowing play button, volume — and the playlist card beside it (below it on
   narrow screens) whose rows have a heart and a play button; the file playing now is raised.
   --------------------------------------------------------------------------------------------------------------- */
.vw-audio {
    display: grid; grid-template-columns: minmax(0, 390px) minmax(0, 430px); justify-content: center; align-content: center;
    gap: 22px; padding: 1vh 0; overflow-y: auto;  /* short windows: the player's page scrolls */
}
.vw-audio.is-single, .vw-audio.no-list { grid-template-columns: minmax(0, 390px); }
.vw-audio.is-single .playlist-box, .vw-audio.no-list .playlist-box, .vw-audio.is-single .pl-listbtn { display: none; }
.player, .playlist-box {
    min-width: 0; border-radius: 28px; border: 1px solid rgba(142, 114, 238, .22);
    background: radial-gradient(ellipse 95% 50% at 50% 22%, rgba(91, 69, 201, .34), transparent 72%),
                linear-gradient(165deg, #26263c, #1c1c2e);
    box-shadow: 16px 18px 40px rgba(0, 0, 0, .5), -6px -6px 22px rgba(255, 255, 255, .02), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.player { max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 22px 22px; text-align: center; overflow-y: auto; }
.player-top { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; }
.player-label { flex: 1; text-align: center; font-size: 13px; color: var(--muted); letter-spacing: .2px; }
.player-top .pl-btn { width: 36px; height: 36px; }
.player-top .pl-btn .ui-icon { width: 19px; height: 19px; }
.player-top .pl-btn[hidden] + .player-label { margin-left: 36px; }
.player-canvas { width: min(250px, 100%); aspect-ratio: 1; flex: none; display: block; margin: -4px 0 2px; }
.player-main { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.player-title { max-width: 100%; font-size: 19px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-sub { font-size: 12.5px; color: var(--text-2); min-height: 20px; line-height: 1.6; margin-top: -6px; }
.player-sub.error { color: var(--bad-text); }
.pl-fav { width: 38px; height: 38px; color: var(--muted); }
.pl-fav .ui-icon { width: 22px; height: 22px; }
.pl-btn.pl-fav.is-on, .pl-heart.is-on, .viewer-fav.is-on, .vp-fav.is-on { color: #f472b6; }
.pl-fav.is-on .ui-icon, .pl-heart.is-on .ui-icon, .viewer-fav.is-on .ui-icon, .vp-fav.is-on .ui-icon { fill: #f472b6; }
.pl-btn.pl-fav.is-on::after { display: none; }
.player-seek { width: 100%; display: flex; align-items: center; gap: 10px; }
.player-time { font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; min-width: 42px; text-align: center; }
.player-range {
    -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 6px; border-radius: 3px; cursor: pointer; margin: 0;
    background: linear-gradient(90deg, var(--accent), var(--purple)) 0 0 / var(--fill, 0%) 100% no-repeat, rgba(255, 255, 255, .08);
}
.player-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 0;
    box-shadow: 0 0 0 4px rgba(0, 215, 210, .3), 0 0 10px rgba(0, 215, 210, .6);
}
.player-range::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 4px rgba(0, 215, 210, .3); }
.player-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.player-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 6px; }
.pl-btn {
    position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent;
    color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color .15s, background .15s, transform .15s;
}
.pl-btn:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.pl-btn .ui-icon { width: 21px; height: 21px; }
.pl-btn.is-on { color: var(--accent); }
.pl-btn.is-on::after { content: ""; position: absolute; bottom: 3px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.pl-round {
    width: 48px; height: 48px; color: var(--text); background: linear-gradient(145deg, #2c2c46, #222236);
    box-shadow: 5px 6px 14px rgba(0, 0, 0, .45), -3px -3px 10px rgba(255, 255, 255, .035);
}
.pl-round:hover { background: linear-gradient(145deg, #34345a, #26263e); color: var(--accent); }
.pl-round .ui-icon { width: 19px; height: 19px; }
.pl-play {
    width: 68px; height: 68px; background: var(--gradient); color: var(--on-accent);
    box-shadow: 0 0 0 7px rgba(0, 215, 210, .1), 0 10px 30px rgba(0, 215, 210, .32), 0 0 40px rgba(142, 114, 238, .35);
}
.pl-play:hover { background: var(--gradient); color: var(--on-accent); transform: scale(1.04); }
.pl-play .ui-icon { width: 28px; height: 28px; }
.pl-ico-play, .pl-ico-pause { display: flex; }
.pl-ico-pause, .player.is-playing .pl-ico-play { display: none; }
.player.is-playing .pl-ico-pause { display: flex; }
.pl-loop-one { position: absolute; top: 7px; right: 6px; font: 800 9px/1 'Readex Pro', sans-serif; color: var(--accent); display: none; }
.pl-loop[data-mode="one"] .pl-loop-one { display: block; }
.player-volume { display: flex; align-items: center; gap: 8px; width: 230px; max-width: 100%; margin: 4px auto 0; }
.player-volume .pl-btn { width: 34px; height: 34px; }
.player-volume .pl-btn .ui-icon { width: 19px; height: 19px; }
.player.is-muted .pl-mute { color: var(--bad-text); }
.player.is-muted .pl-mute::before { content: ""; position: absolute; width: 24px; height: 2px; border-radius: 1px; background: currentColor; transform: rotate(-45deg); }

.playlist-box { display: flex; flex-direction: column; min-height: 0; max-height: 100%; padding: 14px 10px 10px; overflow: hidden; }
.playlist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 10px 10px; }
.playlist-head span:first-child { font-size: 15px; font-weight: 700; color: var(--text); }
.playlist-count { font-size: 12px; color: var(--muted); }
.playlist { flex: 1; min-height: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding: 2px 4px 4px; margin: 0; }
.pl-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 4px 6px 4px 4px;
    border-radius: 16px; transition: background .15s, box-shadow .15s;
}
.pl-row:hover { background: rgba(255, 255, 255, .035); }
.pl-row.is-current {
    background: linear-gradient(145deg, #32324f, #27273f);
    box-shadow: 6px 7px 16px rgba(0, 0, 0, .4), -3px -3px 10px rgba(255, 255, 255, .03), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.pl-item {
    min-width: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 6px;
    border: 0; border-radius: 12px; background: transparent; color: var(--text-2); font: inherit; text-align: start; cursor: pointer;
}
.pl-num { font-size: 11px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.pl-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.pl-name { font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.pl-meta { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.pl-row.is-current .pl-name { color: #fff; font-weight: 600; }
.pl-row.is-current .pl-num { color: var(--accent); font-weight: 700; }
.pl-heart, .pl-rowplay {
    flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center;
    cursor: pointer; background: transparent; color: var(--muted); transition: color .15s, background .15s;
}
.pl-heart .ui-icon { width: 18px; height: 18px; }
.pl-heart:hover { color: #f9a8d4; }
.pl-rowplay {
    width: 36px; height: 36px; color: var(--accent); background: linear-gradient(145deg, #2e2e4a, #222236);
    box-shadow: 3px 4px 10px rgba(0, 0, 0, .4), -2px -2px 7px rgba(255, 255, 255, .03);
}
.pl-rowplay:hover { color: #fff; background: var(--gradient); }
.pl-rowplay .ui-icon { width: 15px; height: 15px; }
.pl-rowplay .pl-ico-pause, .playlist.is-playing .pl-row.is-current .pl-rowplay .pl-ico-play { display: none; }
.playlist.is-playing .pl-row.is-current .pl-rowplay .pl-ico-pause { display: flex; }
.playlist.is-playing .pl-row.is-current .pl-rowplay { background: var(--gradient); color: var(--on-accent); }
.pl-item:focus-visible, .pl-heart:focus-visible, .pl-rowplay:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* narrow screens: the player, then the whole playlist under it, in one scrolling column (nothing can overlap) */
@media (max-width: 900px) {
    .vw-audio, .vw-audio.is-single, .vw-audio.no-list {
        display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px;
        overflow-y: auto; padding: 0 0 10px; max-width: 520px; margin: 0 auto;
    }
    .player, .playlist-box { flex: none; max-height: none; overflow: visible; }
    .playlist { overflow: visible; }
}
@media (max-width: 768px) {
    .player { padding: 8px 14px 18px; border-radius: 22px; }
    .player-canvas { width: min(210px, 70vw); }
    .player-controls { gap: 8px; }
    .pl-round { width: 44px; height: 44px; }
    .pl-play { width: 62px; height: 62px; }
    .player-volume { width: 100%; max-width: 280px; }
    .playlist-box { border-radius: 22px; }
}

/* the pop-out window: just the player and its playlist side by side (stacked when the window is narrow) */
body.popout-page { overflow: hidden; }
body.popout-page .viewer { animation: none; background: radial-gradient(ellipse 80% 70% at 30% 20%, rgba(52, 36, 110, .55), transparent 70%), var(--bg); }
body.popout-page .viewer-bar, body.popout-page .viewer-nav { display: none; }
body.popout-page .viewer-stage { padding: 12px; }
body.popout-page .vw-audio {
    display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-content: stretch; align-items: stretch;
    height: 100%; max-width: none; margin: 0; padding: 0; gap: 12px; overflow: hidden;
}
body.popout-page .vw-audio.no-list { grid-template-columns: minmax(0, 420px); justify-content: center; }
body.popout-page .player, body.popout-page .playlist-box { max-height: 100%; min-height: 0; }
body.popout-page .player { overflow-y: auto; padding: 4px 14px 12px; gap: 0; border-radius: 22px; }
body.popout-page .playlist-box { border-radius: 22px; }
body.popout-page .playlist { overflow-y: auto; }
body.popout-page .player-canvas { width: min(150px, 100%); margin: -6px 0 0; }
body.popout-page .player-main { gap: 6px; }
body.popout-page .pl-play { width: 58px; height: 58px; }
body.popout-page .pl-round { width: 42px; height: 42px; }
body.popout-page .player-label::after { content: " · پنجره جدا"; }
@media (max-width: 620px) {
    body.popout-page .vw-audio { display: flex; flex-direction: column; overflow-y: auto; }
    body.popout-page .player, body.popout-page .playlist-box { flex: none; max-height: none; overflow: visible; }
}
.pop-empty { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--bg); }
.pop-empty-box { max-width: 420px; text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; color: var(--text-2); line-height: 1.9; }

/* ---------------------------------------------------------------------------------------------------------------
   Video: subtitles (drawn over the picture in the site's font, above the controls while they show), their menu,
   favourite and "watch together" in the controls
   --------------------------------------------------------------------------------------------------------------- */
.vp-cue { position: absolute; left: 4%; right: 4%; bottom: 7%; z-index: 1; text-align: center; pointer-events: none; transition: bottom .25s; direction: rtl; }
.vplayer:not(.is-idle) .vp-cue { bottom: 96px; }
.vp-cue span {
    white-space: pre-line; font-family: var(--font); font-weight: 600; line-height: 1.6; color: var(--sub-color, #fff); padding: .08em .5em;
    background: var(--sub-bg, rgba(8, 7, 20, .6)); border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .9);
}
.vp-cc-wrap { position: relative; }
.vp-cc.is-on { color: var(--accent); }
.vp-cc.is-on::after, .vp-cc.has-subs::after {
    content: ""; position: absolute; bottom: 6px; left: 50%; width: 14px; height: 2px; margin-left: -7px; border-radius: 1px; background: var(--accent);
}
.vp-cc.has-subs::after { width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; bottom: 5px; background: var(--purple-text); }
.vp-subs {
    position: absolute; bottom: 48px; right: -70px; z-index: 3; width: 310px; max-width: 86vw; overflow-y: auto;
    max-height: min(62vh, 430px, calc(100cqh - 64px));  /* from just under the player's top edge down to its controls */
    padding: 12px; border-radius: 14px; background: rgba(20, 20, 34, .97); border: 1px solid var(--border-strong);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .6); font-family: var(--font); color: var(--text); text-align: right;
}
.vp-subs-head { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.vp-subs-list { display: flex; flex-direction: column; gap: 2px; }
.vp-subs-list button {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 7px 10px; border: 0; border-radius: 9px;
    background: transparent; color: var(--text-2); cursor: pointer; font: 13px var(--font); text-align: right;
}
.vp-subs-list button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-subs-list button:hover { background: var(--surface-hover); color: var(--text); }
.vp-subs-list button[aria-checked="true"] { background: var(--accent-soft); color: var(--accent); }
.vp-subs-list button:disabled { opacity: .5; cursor: default; }
.vp-subs-list small { color: var(--muted); font-size: 11px; }
.vp-subs-file {
    position: relative; display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; padding: 8px 10px; border: 1px dashed var(--border-strong);
    border-radius: 10px; cursor: pointer; font-size: 12.5px; color: var(--text-2);
}
.vp-subs-file:hover { border-color: var(--accent-line); color: var(--text); }
.vp-subs-file .ui-icon { width: 16px; height: 16px; color: var(--accent); }
.vp-subs-file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vp-subs-file:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.vp-subs-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 9px; font-size: 12.5px; color: var(--text-2); flex-wrap: wrap; }
.vp-subs-sync, .vp-subs-sizes { display: flex; gap: 3px; align-items: center; }
.vp-subs-sync button, .vp-subs-sizes button {
    border: 0; border-radius: 7px; background: var(--surface-2); color: var(--text); padding: 5px 7px; cursor: pointer; font: 12px 'Readex Pro', var(--font);
}
.vp-subs-sync button:hover, .vp-subs-sizes button:hover { background: #34344f; color: var(--accent); }
.vp-subs-sizes button { font-family: var(--font); }
.vp-subs-sizes button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.vp-subs-offset { min-width: 50px; text-align: center; font: 600 12.5px 'Readex Pro', sans-serif; font-variant-numeric: tabular-nums; color: var(--accent); }
.vp-subs-note { margin-top: 8px; font-size: 12px; color: var(--muted); min-height: 1em; line-height: 1.7; }
.vp-subs-note.error { color: var(--bad-text); }
.vp-live.is-on { color: #fb7185; }
.vp-live-on {
    display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; margin: 0 4px; border-radius: 13px;
    background: rgba(244, 63, 94, .2); color: #fecdd3; font: 600 12px 'Readex Pro', sans-serif;
}
.vp-live-on .ui-icon { width: 15px; height: 15px; }
@media (max-width: 600px) {
    .vp-pip, .vp-dl { display: none; }
    .vplayer:not(.is-idle) .vp-cue { bottom: 84px; }
    /* a phone's player is too short for the menus: they open as a sheet at the bottom of the screen */
    .vp-subs { position: fixed; inset: auto 8px 8px 8px; width: auto; max-width: none; max-height: 72vh; z-index: 30; }
}

/* "watch together" window inside the viewer (sharer's side) */
.live-modal { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(6, 6, 14, .72); }
.live-modal[hidden] { display: none; }
.live-box { width: min(580px, 100%); max-width: none; }
.live-box h3 { display: flex; align-items: center; gap: 8px; }
.live-box h3 .ui-icon { width: 22px; height: 22px; color: #fb7185; }
.live-new { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.live-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.live-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.live-row .live-url { flex: 1 1 100%; min-width: 0; font-size: 12.5px; }
.live-row .btn { display: inline-flex; align-items: center; gap: 6px; }
.live-row .btn .ui-icon { width: 14px; height: 14px; }
.live-info { flex: 1; font-size: 12px; color: var(--muted); }
.live-status { margin-top: 10px; min-height: 1.3em; font-size: 13px; color: var(--good-text); }
.live-status.error { color: var(--bad-text); }
.live-table .live-link-cell { display: flex; gap: 6px; align-items: center; min-width: 260px; }
.live-table .live-link-cell .text-input { flex: 1; min-width: 0; font-size: 12px; padding: 6px 8px; }
.live-table .live-link-cell .btn { display: inline-flex; align-items: center; gap: 5px; }
.live-table .ui-icon { width: 14px; height: 14px; vertical-align: -2px; }
@media (max-width: 640px) {  /* a phone: each link a small card (its «منقضی کردن» in view, no sideways scrolling) */
    .live-table thead { display: none; }
    .live-table, .live-table tbody, .live-table tr, .live-table td { display: block; }
    .live-table tbody tr + tr td:first-child { border-top: 1px solid var(--border-strong); }
    .live-table td, .grid-table.live-table td + td { border: 0; padding: 5px 12px; }
    .live-table td:first-child { padding-top: 12px; }
    .live-table td:last-child { padding-bottom: 12px; }
    .live-table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 12.5px; }
    .live-table .live-link-cell { min-width: 0; }
}

/* the "watch together" page (no login): the video, its play / volume / full screen, whose moment it follows */
body.watch-page { min-height: 100vh; }
.watch { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 16px 16px 30px; display: flex; flex-direction: column; gap: 14px; }
.watch-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.watch-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.watch-brand .brand-logo { width: 42px; height: 42px; }
.watch-brand span { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.watch-live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: rgba(244, 63, 94, .14); color: #fecdd3; font-size: 13px; }
.watch-live i { width: 8px; height: 8px; border-radius: 50%; background: #f43f5e; box-shadow: 0 0 8px #f43f5e; animation: gx-blink 1.6s ease-in-out infinite; }
.watch-stage { display: flex; flex-direction: column; gap: 14px; }
.vplayer.wplayer { width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 78vh; }
.vplayer.wplayer.is-full { max-height: none; aspect-ratio: auto; }
.wplayer video { cursor: default; }
.w-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; margin: 0 4px 6px; }
.w-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--purple), #e0559a); transition: width .3s linear; }
.w-sync { display: inline-flex; align-items: center; gap: 6px; margin: 0 8px; font-size: 12px; color: rgba(255, 255, 255, .85); font-family: var(--font); }
.w-sync i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.w-sync[data-mode="live"] i { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.w-sync[data-mode="paused"] i { background: #f59e0b; }
.w-sync[data-mode="off"] i { background: #ef4444; }
.w-msg {
    position: absolute; left: 50%; top: 14%; transform: translateX(-50%); z-index: 2; max-width: 84%; padding: 8px 14px; border-radius: 10px;
    background: rgba(8, 7, 20, .78); color: #fff; font-family: var(--font); font-size: 14px; line-height: 1.8; text-align: center; pointer-events: none;
}
@media (max-width: 600px) {  /* a phone's player is short: the message stays above the big play button */
    .w-msg { top: 8px; max-width: 92%; padding: 4px 10px; font-size: 12.5px; line-height: 1.6; }
}
.watch-info h1 { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 4px; overflow-wrap: anywhere; }
.watch-info p { font-size: 13px; color: var(--text-2); line-height: 1.9; }
.watch-info .watch-note { color: var(--muted); }
.watch-ended { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 10, 20, .9); }
.watch-ended[hidden] { display: none; }
.watch.is-ended .watch-stage { filter: grayscale(1); opacity: .3; }

/* upload window: "cancel upload" while sending */
#uploadCancel { display: inline-flex; align-items: center; gap: 6px; }
#uploadCancel .ui-icon { width: 14px; height: 14px; }

/* ---------------------------------------------------------------------------------------------------------------
   Monitor: the server's internet speed (Ookla speedtest) — a card per place with its flag and latest result
   --------------------------------------------------------------------------------------------------------------- */
.speed-card { margin-top: 18px; }
.speed-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.speed-top h3 { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--text); }
.speed-top h3 .ui-icon { width: 20px; height: 20px; color: var(--accent); }
.speed-top .btn { margin-inline-start: auto; }
.speed-hint { margin: 8px 0 14px; }
.speed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.speed-loc { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(42, 42, 64, .5); border: 1px solid var(--border); min-width: 0; }
.speed-loc.is-running { border-color: var(--accent-line); box-shadow: 0 0 0 1px rgba(0, 215, 210, .15), 0 8px 24px rgba(0, 215, 210, .08); }
.speed-loc.is-queued { border-color: rgba(142, 114, 238, .45); }
.speed-loc-head { display: flex; align-items: center; gap: 10px; }
.speed-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.speed-name b { font-size: 14px; color: var(--text); }
.flag { width: 30px; height: 20px; flex: none; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
.flag-auto { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.flag-auto .ui-icon { width: 15px; height: 15px; }
.speed-vals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.speed-val { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 4px; border-radius: 10px; background: rgba(20, 20, 34, .55); }
.speed-k { font-size: 11px; color: var(--muted); }
.speed-v { font: 700 19px/1.2 'Readex Pro', sans-serif; color: var(--text); font-variant-numeric: tabular-nums; direction: ltr; }
.speed-val:nth-child(1) .speed-v { color: #67e8f9; }
.speed-val:nth-child(2) .speed-v { color: #c4b5fd; }
.speed-u { font-size: 10.5px; color: var(--muted); direction: ltr; }
.speed-progress { display: flex; flex-direction: column; gap: 5px; }
.speed-progress .progress { margin-top: 0; }
.speed-phase { font-size: 12px; color: var(--accent); }
.speed-meta { line-height: 1.8; overflow-wrap: anywhere; }
.speed-history { margin-top: 14px; }
.speed-table { width: 100%; font-size: 12.5px; }  /* like the other tables of the page: the card's width, header and rows alike */
.speed-status { margin-top: 10px; min-height: 1.2em; font-size: 13px; color: var(--good-text); }
.speed-status.error { color: var(--bad-text); }

/* ---------------------------------------------------------------------------------------------------------------
   Less work for the browser: cards outside the window are not rendered until scrolled to (a folder of thousands of
   files stays light), the page behind an open viewer is not painted, and decorative animations pause meanwhile.
   --------------------------------------------------------------------------------------------------------------- */
/* (not undone on focus: a card that loses the focus would take the 150px stand-in size for a moment and the rows below
   would jump under the pointer — a click or tap on the next row's check box landed between the cards; only a card
   whose ⋮ menu is open shows all of itself, the menu reaches outside the card) */
.grid > .item:not(.menu-open) { content-visibility: auto; contain-intrinsic-size: auto 150px; }
body.viewer-open > .container, body.viewer-open > .page { visibility: hidden; }
body.viewer-open.sky::after, body.viewer-open .brand-logo, body.viewer-open .brand-beacon, body.viewer-open .earth-svg { animation-play-state: paused; }
.star-owner { animation: none; }
.user-chip .star-owner { animation: gx-twinkle 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .user-chip .star-owner, .watch-live i { animation: none; } }

/* ---------------------------------------------------------------------------------------------------------------
   Header bell + in-site notifications
   --------------------------------------------------------------------------------------------------------------- */
.btn-bell { display: inline-flex; align-items: center; gap: 2px; padding: 7px 10px; }
.btn-bell .ui-icon { width: 17px; height: 17px; }
.btn-bell .count-badge { margin-right: 2px; }
.page-head-end { margin-right: auto; }
.notice-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: rgba(42, 42, 64, .45);
          border: 1px solid var(--border); }
.notice.is-new { border-color: var(--accent-line); background: rgba(0, 215, 210, .06); }
.notice-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 6px; background: var(--accent); }
.notice.tone-warn .notice-dot { background: var(--warn); }
.notice.tone-bad .notice-dot { background: var(--bad); }
.notice-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.notice-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.notice-head .muted { margin-right: auto; }
.notice-body p { font-size: 13px; line-height: 1.8; color: var(--text); overflow-wrap: anywhere; }
.notice-body .btn { align-self: flex-start; }

/* upload window: unfinished big uploads of this folder */
.upload-pending { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); border: 1px solid rgba(245, 158, 11, .35); }
.upload-pending-head { font-size: 12.5px; color: var(--warn-text); margin-bottom: 6px; }
.upload-pending-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 4px 0; }
.upload-info.error { color: var(--bad-text); }

/* ---------------------------------------------------------------------------------------------------------------
   Backup & transfer (owner): intro, one card per backup server (check table, installation steps, copies)
   --------------------------------------------------------------------------------------------------------------- */
.mon-status.error { color: var(--bad-text); }
.bk-intro { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.bk-intro h3, .bk-add h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.bk-intro h3 .ui-icon, .bk-add h3 .ui-icon { width: 20px; height: 20px; color: var(--accent); flex: none; }
.bk-how { padding-right: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); line-height: 1.8; }
.bk-how b { color: var(--text); }
.bk-local { display: grid; gap: 10px; }
.bk-targets { display: flex; flex-direction: column; }
.bk-empty { text-align: center; padding: 26px; }
.bk-target.is-busy { border-color: var(--accent-line); box-shadow: 0 0 0 1px rgba(0, 215, 210, .12), 0 10px 30px rgba(0, 215, 210, .06); }
.bk-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bk-icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none;
           background: var(--purple-soft); color: var(--purple-text); }
.bk-icon .ui-icon { width: 22px; height: 22px; }
.bk-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bk-host { font: 600 15px/1.4 'Readex Pro', sans-serif; color: var(--text); overflow-wrap: anywhere; }
.bk-remove { display: inline-flex; align-items: center; gap: 6px; }
.bk-remove .ui-icon, .bk-actions .btn .ui-icon, .bk-ssl .btn .ui-icon, .bk-update .btn .ui-icon { width: 15px; height: 15px; }
.bk-body { display: flex; flex-direction: column; gap: 12px; }
.bk-wait { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--accent); }
.bk-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--accent-soft); border-top-color: var(--accent); flex: none;
           animation: bk-spin .9s linear infinite; }
.bk-run.is-queued .bk-spin, .bk-run.is-canceling .bk-spin { border-top-color: var(--warn); }
@keyframes bk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bk-spin { animation: none; border-top-color: var(--accent-soft); background: var(--accent); } }
.bk-error { color: var(--bad-text); font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.bk-warn { color: var(--warn-text); line-height: 1.8; overflow-wrap: anywhere; }
.bk-msg { font-size: 12.5px; color: var(--good-text); min-height: 1.2em; }
.bk-msg.error { color: var(--bad-text); }
.bk-check-table { width: 100%; font-size: 13px; }
.bk-check-table td { vertical-align: top; }
.bk-mark { width: 34px; text-align: center; }
.bk-mark-dot { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 700;
               font-size: 12px; background: var(--accent-soft); color: var(--accent); }
.bk-mark-dot.tone-good { background: var(--good-soft); color: var(--good-text); }
.bk-mark-dot.tone-warn { background: var(--warn-soft); color: var(--warn-text); }
.bk-mark-dot.tone-bad { background: var(--bad-soft); color: var(--bad-text); }
.bk-check-label { color: var(--text-2); white-space: nowrap; width: 1%; }
.bk-check-value { color: var(--text); overflow-wrap: anywhere; }
.bk-check-value .muted { margin-top: 2px; line-height: 1.7; }
.bk-check tr.is-bad td { background: rgba(239, 68, 68, .06) !important; }
.bk-fp { margin: 10px 0 0; }
.bk-code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--purple-text); overflow-wrap: anywhere; }
.bk-confirm { padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); border: 1px solid rgba(245, 158, 11, .35); }
.bk-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bk-actions .btn, .bk-ssl .btn, .bk-update .btn { display: inline-flex; align-items: center; gap: 6px; }
.bk-reauth { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: rgba(20, 20, 34, .5); border: 1px solid var(--border); }
.bk-reauth .hint { margin: 0; }
.bk-steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.bk-step { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); padding: 8px 10px; border-radius: 10px;
           background: rgba(42, 42, 64, .4); border: 1px solid var(--border); }
.bk-step-dot { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none;
               font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--muted); }
.bk-step.is-done { color: var(--text-2); }
.bk-step.is-done .bk-step-dot { background: var(--good-soft); color: var(--good-text); }
.bk-step.is-current { color: var(--text); border-color: var(--accent-line); }
.bk-step.is-current .bk-step-dot { background: var(--accent); color: var(--on-accent); }
.bk-step.is-failed { color: var(--bad-text); border-color: rgba(239, 68, 68, .45); }
.bk-step.is-failed .bk-step-dot { background: var(--bad); color: #fff; }
.bk-log { max-height: 220px; overflow: auto; padding: 10px 12px; border-radius: 10px; background: #12121c; border: 1px solid var(--border);
          font: 11.5px/1.6 ui-monospace, Consolas, monospace; color: #c9c8da; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; }
.bk-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.bk-fact { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; background: rgba(42, 42, 64, .45); border: 1px solid var(--border); min-width: 0; }
.bk-fact b, .bk-fact > span[dir] { font-size: 14px; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.bk-fact.tone-warn { border-color: rgba(245, 158, 11, .45); }
.bk-fact.tone-warn b, .bk-fact.tone-warn > span[dir] { color: var(--warn-text); }
.bk-run { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--accent-line); background: rgba(0, 215, 210, .05); }
.bk-run-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.bk-run .progress { margin-top: 0; }
.bk-run-nums { font-size: 12.5px; color: var(--text-2); }
.bk-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-settings { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; padding-top: 12px; border-top: 1px solid var(--border); }
.bk-settings .bk-field { flex: 0 1 220px; }
.bk-settings .bk-bw { width: 100%; }
.bk-settings .check-row { align-self: center; }
.bk-update { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bk-active { padding: 12px 14px; border-radius: 12px; background: var(--warn-soft); border: 1px solid rgba(245, 158, 11, .35); font-size: 13px; line-height: 1.8; }
.bk-active .bk-how { margin-top: 6px; }
.bk-ssl { display: flex; gap: 10px; flex-wrap: wrap; }
.bk-ssl .text-input { flex: 1 1 200px; width: auto; }
.bk-runs .bk-history { margin-top: 14px; }
.bk-runs-table { width: 100%; font-size: 12.5px; }
.bk-runs-table td { vertical-align: top; }
.bk-result { min-width: 240px; line-height: 1.8; }
.bk-form { display: flex; flex-direction: column; gap: 12px; }
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.bk-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-2); min-width: 0; }
.bk-field .text-input { width: 100%; }
.bk-auth { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text); }
.bk-radio { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.bk-auth-fields { display: flex; flex-direction: column; gap: 8px; }
.bk-key { min-height: 96px; resize: vertical; font: 12px/1.5 ui-monospace, Consolas, monospace; }
.bk-advanced .drawer-head h2 { font-size: 13.5px; }
.bk-advanced .hint { margin: 8px 0; }
.bk-secret { display: flex; gap: 8px; align-items: flex-start; margin: 0; }
.bk-secret .ui-icon { width: 18px; height: 18px; flex: none; color: var(--good-text); margin-top: 2px; }
@media (max-width: 900px) { .bk-intro { grid-template-columns: 1fr; } .bk-local { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
    .bk-local { grid-template-columns: 1fr; }
    .bk-facts { grid-template-columns: 1fr 1fr; }
    .bk-head .bk-remove { width: 100%; justify-content: center; }
    .bk-check-label { white-space: normal; width: auto; }
    .bk-settings .bk-field { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Thumbnails on the cards (pictures, videos, covers): a wider picture box; the icon stays below until it loads
   --------------------------------------------------------------------------------------------------------------- */
.item .icon.has-thumb, .item .icon.thumb-wait { position: relative; width: 100%; height: 78px; margin: -8px 0 10px; border-radius: 9px; overflow: hidden; }
.item .icon.thumb-wait { background: linear-gradient(110deg, rgba(42, 42, 64, .55) 30%, rgba(62, 62, 92, .7) 50%, rgba(42, 42, 64, .55) 70%);
                         background-size: 220% 100%; animation: thumb-wait 1.6s linear infinite; }
@keyframes thumb-wait { to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .item .icon.thumb-wait { animation: none; } }
.item .icon img.thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--surface-2); }
.item .icon .thumb-play { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
                          display: flex; align-items: center; justify-content: center; background: rgba(15, 15, 26, .62); color: #fff;
                          box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); pointer-events: none; }
.item .icon .thumb-play .ui-icon { width: 15px; height: 15px; margin-left: 2px; }
.fm-icon.has-thumb { position: relative; width: 30px; height: 30px; border-radius: 6px; overflow: hidden; }
.fm-icon.has-thumb img.thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------------------------------------------------
   Viewer: PDF, text / code / Markdown, video quality, "continue from"
   --------------------------------------------------------------------------------------------------------------- */
.vw-pdf { flex-direction: column; }
.vw-pdf-frame { width: min(1100px, 100%); height: 100%; border: 0; border-radius: 10px; background: #fff; }
.vw-pdf-alt { text-align: center; display: flex; flex-direction: column; gap: 14px; color: var(--text); font-size: 14px; }
.vw-text { flex-direction: column; align-items: stretch; width: min(1100px, 100%); margin: 0 auto; gap: 8px; }
.vw-text-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.vw-text-tools { display: flex; gap: 6px; margin-right: auto; flex-wrap: wrap; }
.vw-text-tools .btn { display: inline-flex; align-items: center; gap: 5px; }
.vw-text-tools .btn[aria-pressed="true"] { background: var(--purple-soft); color: var(--purple-text); border-color: var(--purple); }
.vw-text-tools .btn.is-done { background: var(--good-soft); color: var(--good-text); border-color: rgba(34, 197, 94, .45); }
.vw-text-tools .ui-icon { width: 14px; height: 14px; }
.vw-text-body { flex: 1; min-height: 0; border-radius: 12px; border: 1px solid var(--border); background: #11111b; overflow: hidden; display: flex; }
.vw-code { flex: 1; min-width: 0; display: flex; align-items: flex-start; overflow: auto; }
.vw-code pre { margin: 0; padding: 12px 14px; font: 12.5px/1.65 ui-monospace, 'Cascadia Mono', Consolas, monospace; white-space: pre; tab-size: 4; }
.vw-gutter { flex: none; color: #5d5c78; text-align: right; user-select: none; border-inline-end: 1px solid var(--border); position: sticky; left: 0;
             background: #11111b; padding-inline: 10px 10px !important; }
.vw-code[dir="rtl"] .vw-gutter { text-align: left; right: 0; left: auto; }
.vw-lines { color: #dcdbe8; flex: 1; }
.vw-code[dir="rtl"] .vw-lines { font-family: var(--font); line-height: 26px; font-size: 13.5px; }
/* each line of a right-to-left text takes its own direction: an SRT timing line or a Latin line keeps its order
   (00:00:01,000 --> 00:00:03,000), all of them still aligned to the right */
.vw-code[dir="rtl"] .vw-lines { unicode-bidi: plaintext; text-align: right; }
.vw-code[dir="rtl"] .vw-gutter { line-height: 26px; }  /* the same line height as the Persian text beside it */
.vw-code.is-wrap .vw-gutter { display: none; }
.vw-code.is-wrap .vw-lines { white-space: pre-wrap; overflow-wrap: anywhere; }
.vw-md { flex: 1; overflow: auto; padding: 18px 24px; color: var(--text); font-size: 14px; line-height: 1.9; }
.vw-md h1, .vw-md h2, .vw-md h3, .vw-md h4, .vw-md h5, .vw-md h6 { font-family: var(--font-display); margin: 18px 0 8px; line-height: 1.4; }
.vw-md h1 { font-size: 22px; } .vw-md h2 { font-size: 19px; } .vw-md h3 { font-size: 16.5px; } .vw-md h4, .vw-md h5, .vw-md h6 { font-size: 14.5px; }
.vw-md h1, .vw-md h2 { padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.vw-md p, .vw-md ul, .vw-md ol, .vw-md blockquote, .vw-md pre, .vw-md .md-table { margin: 0 0 12px; }
.vw-md ul, .vw-md ol { padding-inline-start: 24px; }
.vw-md li > ul, .vw-md li > ol { margin: 4px 0; }
.vw-md code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; font: 12.5px ui-monospace, Consolas, monospace; }
.vw-md pre.md-code { background: #0c0c14; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; overflow: auto; direction: ltr; text-align: left; }
.vw-md pre.md-code code { background: none; padding: 0; white-space: pre; }
.vw-md blockquote { border-inline-start: 3px solid var(--purple); padding: 4px 14px; color: var(--text-2); background: rgba(142, 114, 238, .06); border-radius: 6px; }
.vw-md hr { border: 0; border-top: 1px solid var(--border-strong); margin: 18px 0; }
.vw-md a { color: var(--accent); }
.vw-md .md-img { color: var(--text-2); }
.vw-md .md-table { overflow-x: auto; }
.vw-md table { border-collapse: collapse; font-size: 13px; }
.vw-md th, .vw-md td { border: 1px solid var(--border-strong); padding: 6px 10px; text-align: start; }
.vw-md th { background: var(--surface-2); }
.vp-resume { position: absolute; top: 54px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 10px;
             padding: 8px 10px 8px 14px; border-radius: 12px; background: rgba(20, 20, 34, .92); border: 1px solid var(--accent-line);
             box-shadow: 0 12px 30px rgba(0, 0, 0, .5); font: 13px var(--font); color: var(--text); white-space: nowrap; }
.vp-resume b, .pl-resume b { font-family: 'Readex Pro', sans-serif; color: var(--accent); }
.pl-resume { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text); margin: 2px 0 6px; }
@media (max-width: 600px) {
    .vp-resume { top: 44px; font-size: 12px; gap: 6px; padding: 6px 8px; }
    .vw-md { padding: 14px; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Files & sharing: toolbar shortcuts, selection of cards + its bar, move picker, link options, trash, my links,
   the public pages of folder links and upload links
   --------------------------------------------------------------------------------------------------------------- */
.btn-ghost { display: inline-flex; align-items: center; gap: 6px; background: transparent; border-color: transparent; color: var(--text-2); padding-inline: 10px; }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn-ghost .ui-icon { width: 16px; height: 16px; }
.btn.is-done { background: var(--good-soft) !important; color: var(--good-text) !important; border-color: rgba(34, 197, 94, .45) !important; }
.item-check { position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; margin: 0; z-index: 3; cursor: pointer; accent-color: var(--accent);
              opacity: 0; transition: opacity .15s; }
.item:hover .item-check, .item-check:focus-visible, .item-check:checked, body.is-selecting .item-check { opacity: 1; }
@media (hover: none) { .item-check { opacity: .85; } }
.item.is-selected { border-color: var(--accent); background: rgba(0, 215, 210, .07); box-shadow: 0 0 0 1px var(--accent-line); }
.item.is-selected:hover { transform: none; }
.selbar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
          width: max-content; max-width: calc(100vw - 24px); padding: 10px 12px;  /* (left: 50% alone left it half the window: it broke in two) */ border-radius: 16px; background: rgba(24, 24, 38, .97); border: 1px solid var(--accent-line);
          box-shadow: 0 18px 50px rgba(0, 0, 0, .6); }
.selbar .btn { display: inline-flex; align-items: center; gap: 6px; }
.selbar .ui-icon { width: 15px; height: 15px; }
.selbar-count { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.selbar-gap { flex: 1; min-width: 6px; }
.selbar-close { padding: 5px 8px; }
body.is-selecting .main { padding-bottom: 90px; }
.move-list { list-style: none; max-height: min(50vh, 360px); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px;
             border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
.move-list button { width: 100%; text-align: right; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2);
                    cursor: pointer; font: 13px var(--font); }
.move-list button:hover { background: var(--surface-hover); color: var(--text); }
.move-list button.is-on { background: var(--accent-soft); color: var(--accent); }
.move-list .empty-row { padding: 18px !important; }
.share-opts { margin: 12px 0 4px; }
.share-opts .drawer-head h2 { font-size: 13px; }
.share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 10px 0; align-items: end; }
.share-grid .share-wide { grid-column: 1 / -1; }
.share-opts .hint { margin: 6px 0 0; }
.uplink-result { margin-top: 10px; }
.trash-table, .links-table { width: 100%; }
.trash-table td, .links-table td { vertical-align: middle; }
.trash-table td:last-child, .links-table td:last-child { width: 1%; white-space: nowrap; }
.trash-where { color: var(--text-2); font-size: 12.5px; max-width: 280px; overflow-wrap: anywhere; }
.trash-actions form { display: inline; }
.trash-actions .btn { margin-inline-start: 4px; }
.trash-total { margin-top: 10px; }
.page-head form.page-head-end .btn, .card h2 .ui-icon { display: inline-flex; align-items: center; gap: 6px; }
.card h2 .ui-icon { width: 18px; height: 18px; vertical-align: -3px; color: var(--accent); }
.links-table .live-url { width: 260px; max-width: 46vw; }
.public-share { max-width: 860px; }
.public-share .watch-head { margin-bottom: 16px; }
.share-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.share-head > div { flex: 1; min-width: 200px; }
.share-head h1 { font-family: var(--font-display); font-size: 20px; color: var(--text); margin-bottom: 4px; overflow-wrap: anywhere;
                 text-align: right; }  /* a Latin name (dir=auto) stays next to its icon */
.share-folder-icon { width: 54px; height: 54px; flex: none; display: flex; align-items: center; justify-content: center; }
.share-folder-icon svg { width: 50px; height: 50px; }
.uplink-icon { border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.uplink-icon .ui-icon { width: 28px; height: 28px; }
.share-zip { display: inline-flex; align-items: center; gap: 6px; }
.share-zip .ui-icon { width: 16px; height: 16px; }
.share-crumbs { margin-bottom: 10px; }
.share-list { list-style: none; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.share-list li + li { border-top: 1px solid var(--border); }
.share-list a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--text); text-decoration: none; }
.share-list a:hover { background: var(--surface-hover); }
.share-entry { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13.5px; text-align: right; }
.share-list .empty-row { padding: 26px !important; }
.uplink-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.uplink-list .upload-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.uplink-list .upload-row.is-error .upload-size { color: var(--bad-text); }
.uplink-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.uplink-info { font-size: 12.5px; color: var(--text-2); }
.uplink-info.error { color: var(--bad-text); }
.uplink-note { margin: 14px 0 0; }
@media (max-width: 600px) {
    .toolbar-actions .btn-ghost span { display: none; }
    /* two rows across the screen: count / select all / close, then the actions */
    .selbar { left: 8px; right: 8px; bottom: 8px; transform: none; width: auto; max-width: none; gap: 6px; padding: 8px 10px; }
    .selbar-count, .selbar [data-act="all"], .selbar-close { order: -1; }
    .selbar-count { flex: 1; }
    .selbar-gap { flex-basis: 100%; height: 0; min-width: 0; }
    .selbar .btn { padding: 5px 8px; font-size: 12px; }
    .selbar .btn:not(.selbar-close) { flex: 1 1 auto; justify-content: center; }
    .selbar .btn[data-act="all"] { flex: none; }
    .links-table .live-url { width: 160px; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Subtitle look (static/subs.js): colour swatches, own colour, background opacity, a preview; links of all files
   --------------------------------------------------------------------------------------------------------------- */
.vp-swatches { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.vp-swatch {
    position: relative; width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer; flex: none;
    border: 2px solid rgba(255, 255, 255, .22); background: var(--sw, transparent); transition: transform .12s, box-shadow .12s;
}
.vp-swatch:hover { transform: scale(1.12); }
.vp-swatch[aria-pressed="true"] { border-color: #191927; box-shadow: 0 0 0 2px var(--accent); }
.vp-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vp-swatch-none { background: linear-gradient(135deg, transparent 44%, #ff6b6b 44%, #ff6b6b 56%, transparent 56%), #2a2a40; }
.vp-swatch-pick {
    display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
    background: conic-gradient(#ff4d4d, #ffe14d, #8dff7a, #00d7d2, #6b8bff, #ff6bd6, #ff4d4d);
}
.vp-swatch-pick .ui-icon { width: 12px; height: 12px; color: #fff; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .9)); pointer-events: none; }
.vp-swatch-pick input { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); opacity: 0; cursor: pointer; border: 0; padding: 0; }
.vp-swatch-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.vp-subs-alpha { display: flex; align-items: center; gap: 8px; }
.vp-subs-alpha input { width: 120px; }
.vp-subs-alpha output { min-width: 38px; font: 600 12px 'Readex Pro', sans-serif; color: var(--accent); text-align: center; }
.vp-subs-sample {
    margin-top: 10px; padding: 16px 8px; border-radius: 10px; text-align: center;
    background: linear-gradient(135deg, #3f5a7a 0%, #8a6a4a 55%, #d8c8a8 100%);
}
.sub-sample {
    display: inline-block; padding: .1em .55em; border-radius: 6px; font: 600 15px/1.6 var(--font);
    color: var(--sub-color, #fff); background: var(--sub-bg, rgba(8, 7, 20, .6));
    text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .9);
}
.w-cc-wrap { margin-inline-end: 4px; }
.wplayer .vp-subs { right: -120px; max-height: min(70vh, 470px, calc(100cqh - 64px)); }
@media (max-width: 600px) { .wplayer .vp-subs { right: 8px; max-height: 72vh; } }  /* the phone's sheet (see .vp-subs) */

.modal-wide { max-width: 720px; }
.links-info { font-size: 12.5px; color: var(--text-2); margin: 8px 0 6px; min-height: 1em; }
.links-text {
    width: 100%; min-height: 190px; resize: vertical; white-space: pre; overflow: auto; text-align: left;
    font: 12px/1.6 ui-monospace, Consolas, monospace; color: var(--text);
}
.links-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--text-2); }
.links-gap-label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.links-renew-box { display: inline-flex; align-items: center; gap: 6px; }
.links-renew-box .select-input { width: auto; padding-top: 5px; padding-bottom: 5px; font-size: 12.5px; }
#linksModal .modal-actions { flex-wrap: wrap; }
#linksModal .modal-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
#linksModal .modal-actions .ui-icon { width: 16px; height: 16px; }

/* ---- accounts: users page (tabs, compact table, icon operations, one panel per account), links page ---- */
.ux-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ux-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-head .ux-new { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; }
.ux-new .ui-icon { width: 17px; height: 17px; }

.ux-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--border-strong); }
.ux-tab {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; margin-bottom: -1px; font-size: 13.5px;
    color: var(--text-2); text-decoration: none; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0;
}
.ux-tab:hover { color: var(--text); background: rgba(255, 255, 255, .03); }
.ux-tab.is-active { color: var(--accent); background: var(--surface); border-color: var(--border-strong); font-weight: 600; }
body.sky .ux-tab.is-active { background: rgba(26, 26, 46, .8); }
.ux-tab-n { min-width: 20px; padding: 0 6px; border-radius: 999px; font-size: 11px; line-height: 19px; text-align: center;
            background: var(--surface-2); color: var(--text-2); font-weight: 600; }
.ux-tab-n.is-hot { background: var(--bad); color: #fff; }
.ux-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ux-users td { padding-top: 8px; padding-bottom: 8px; }
.ux-users .quota-cell .bar-track.mini { max-width: 140px; }
.ux-ops-col { width: 1%; }
.ux-ops { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.ux-ops form.inline { display: contents; }
.btn.ux-ico {
    position: relative; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; flex: none;
}
.btn.ux-ico .ui-icon { width: 16px; height: 16px; }
.ux-ico[data-tip]::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 5; padding: 4px 9px;
    border-radius: 7px; background: #0f0f1c; border: 1px solid var(--border-strong); color: var(--text); font-size: 11.5px;
    font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(3px);
    transition: opacity .12s, transform .12s;
}
.ux-ico[data-tip]:hover::after, .ux-ico[data-tip]:focus-visible::after { opacity: 1; transform: none; }
.ux-perms { display: inline-flex; gap: 4px; flex-wrap: wrap; vertical-align: middle; }
.ux-perm { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: var(--purple-soft); color: var(--purple-text);
           border: 1px solid rgba(142, 114, 238, .3); white-space: nowrap; }

/* an account's panel and the "new account" window */
.modal.ux-dialog { max-width: 560px; padding: 22px 24px; }
.ux-dialog-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ux-dialog-head h3 { margin: 0; font-size: 18px; }
.ux-dialog-head bdi { color: var(--accent); }
.ux-role { font-size: 11.5px; color: var(--purple-text); background: var(--purple-soft); border-radius: 999px; padding: 2px 9px; }
.ux-dialog-head .ux-x { margin-right: auto; }
.ux-dialog .hint { margin-bottom: 12px; }
.ux-sec { border-top: 1px solid var(--border); padding: 14px 0 4px; margin-top: 10px; scroll-margin: 12px; border-radius: 10px; }
.ux-sec h4 { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); font-weight: 600; margin-bottom: 4px; }
.ux-sec h4 .ui-icon { color: var(--accent); }
.ux-sec.is-target { background: rgba(0, 215, 210, .05); box-shadow: 0 0 0 1px var(--accent-line); padding-left: 12px; padding-right: 12px; }
.ux-sec-danger h4 .ui-icon { color: var(--bad-text); }
.ux-sec-danger .mini-form { margin-top: 6px; }
.ux-note { font-size: 12px; color: var(--muted); margin-bottom: 8px; line-height: 1.7; }
.ux-form { display: flex; flex-direction: column; gap: 10px; }
.ux-inline-form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.ux-inline-form .ux-field { flex: 1 1 150px; }
.ux-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-2); }
.ux-field .text-input { padding: 8px 12px; font-size: 13.5px; }
.ux-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ux-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); cursor: pointer; padding: 6px 0; }
.ux-rows { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ux-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px;
          background: var(--input); border: 1px solid var(--border); border-radius: 10px; }
.ux-row-text { min-width: 0; font-size: 13px; color: var(--text); }
.ux-row-text b { font-weight: 600; }
.ux-row-text small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.ux-row form { flex: none; }

/* account requests on the users page */
.ux-sub { font-size: 14px; color: var(--text); font-weight: 600; margin: 4px 0 10px; }
.ux-answered { margin-top: 16px; }
.ux-answered summary { cursor: pointer; font-size: 13px; color: var(--text-2); padding: 6px 0; margin-bottom: 8px; }
.ux-answered summary:hover { color: var(--text); }
.requests-table .req-name { font-weight: 600; text-align: right; }
.ux-label { display: none; }   /* a cell's name, shown on phones where the table's head is hidden */

/* staff links page */
body.sky-links {    /* links: a comet tail of cyan and violet */
    --sky-glow: 63, 216, 255;
    --sky-nebulae:
        linear-gradient(135deg, transparent 30%, rgba(63, 216, 255, .06) 44%, rgba(138, 92, 246, .06) 54%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 86% 10%, rgba(63, 216, 255, .18), transparent 70%),
        radial-gradient(ellipse 46% 42% at 8% 90%, rgba(138, 92, 246, .2), transparent 70%);
}
.lk-intro { max-width: 820px; }
.lk-table { width: 100%; font-size: 13px; }
.lk-table td { vertical-align: middle; }
.lk-user { font-weight: 600; white-space: nowrap; }
.lk-user .badge { margin: 0 4px 0 0; vertical-align: 1px; }
.lk-item { min-width: 220px; word-break: break-word; }
.lk-name { color: var(--text); text-decoration: none; font-weight: 500; }
.lk-name:hover { color: var(--accent); }
.lk-title { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.card .list-head .list-tools .list-tools { flex-wrap: wrap; }
.links-table .cell-label { display: none; }

@media (max-width: 640px) {
    .ux-pair { grid-template-columns: 1fr; }
    .modal.ux-dialog { padding: 18px 16px; width: 94%; }
    .ux-row { flex-direction: column; align-items: stretch; }
    .ux-tab { padding: 8px 12px; }

    /* phones: the accounts and requests tables become one card per row, so the operations and the answer buttons
       are on screen without scrolling the table sideways */
    .ux-users thead, .requests-table thead { display: none; }
    .table-wrap > .ux-users, .table-wrap > .requests-table, .ux-users tbody, .requests-table tbody { display: block; border: 0; }
    .ux-users tbody tr, .requests-table tbody tr {
        display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 11px 12px; margin-bottom: 10px;
        border: 1px solid var(--border-strong); border-radius: 12px; background: rgba(255, 255, 255, .025);
    }
    .ux-users tbody tr:last-child, .requests-table tbody tr:last-child { margin-bottom: 0; }
    .ux-users tbody tr td, .requests-table tbody tr td {
        display: block; padding: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important;
    }
    .ux-users td.uname { flex: 1 1 auto; min-width: 0; font-size: 14px; }
    .ux-users td.status-cell, .ux-users td.quota-cell, .ux-users td.ux-created, .ux-users td.actions,
    .requests-table td.req-name, .requests-table td.uname, .requests-table td.req-answer, .requests-table td.empty-row,
    .ux-users td.empty-row { flex: 1 1 100%; min-width: 0; }
    .ux-users td.status-cell { white-space: normal; }
    .ux-users .quota-cell .bar-track.mini { max-width: none; }
    .ux-users td.ux-created, .requests-table td.req-by, .requests-table td.req-time { font-size: 11.5px; color: var(--text-2); }
    .ux-users .ux-label, .requests-table .ux-label { display: inline; color: var(--muted); }
    .ux-users td.actions { padding-top: 9px; margin-top: 2px; border-top: 1px solid var(--border) !important; }
    .ux-users .ux-ops { flex-wrap: wrap; gap: 8px; }
    .ux-users .btn.ux-ico { width: 38px; height: 38px; }   /* a finger's size */
    .requests-table td.req-name, .requests-table td.uname { font-size: 14px; }
    .requests-table .req-reject { flex: 1 1 100%; }
    .requests-table .req-reject .text-input { flex: 1; width: auto; min-width: 0; }
    /* "my links" and the staff's links page: one card per link (every value on a line of its own, with its name,
       and the «پایان» button in sight) instead of a table wider than the screen */
    .links-table thead { display: none; }
    .links-table, .links-table tbody, .links-table tr, .links-table td { display: block; }
    .grid-table.links-table { overflow: hidden; }
    .grid-table.links-table td, .grid-table.links-table td + td {
        border: none; border-radius: 0; padding: 3px 12px; width: auto; min-width: 0; white-space: normal;
    }
    .grid-table.links-table tr td:first-child { padding-top: 11px; }
    .grid-table.links-table tr td:last-child { padding-bottom: 11px; border-bottom: 1px solid var(--border); }
    .grid-table.links-table tr:last-child td:last-child { border-bottom: none; }
    .grid-table.links-table td.empty-row { padding: 22px 12px; }
    .links-table .cell-label { display: inline; color: var(--muted); font-size: 12px; margin-inline-end: 6px; font-weight: 400; }
    .links-table .live-link-cell { display: flex; align-items: center; gap: 6px; }
    .links-table .live-url { width: auto; max-width: none; flex: 1; min-width: 0; }
    .lk-item { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ux-ico[data-tip]::after { transition: none; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Site: the rules page, the owner's notification settings, browser (Windows) notifications (internal/site)
   --------------------------------------------------------------------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
           white-space: nowrap; border: 0; }
body.sky-rules {    /* rules: the vortex seen from above: a gold rim around a violet core */
    --sky-glow: 232, 184, 92;
    --sky-nebulae:
        radial-gradient(circle at 50% 4%, rgba(63, 216, 255, .14), transparent 30%),
        radial-gradient(circle at 50% 4%, transparent 34%, rgba(232, 184, 92, .07) 36%, transparent 40%),
        radial-gradient(ellipse 54% 42% at 92% 30%, rgba(91, 63, 214, .26), transparent 70%),
        radial-gradient(ellipse 46% 40% at 6% 86%, rgba(255, 122, 217, .1), transparent 70%);
}
body.sky-notify {   /* notification settings: a comet's cyan trail across violet */
    --sky-glow: 63, 216, 255;
    --sky-nebulae:
        linear-gradient(160deg, transparent 26%, rgba(63, 216, 255, .08) 40%, rgba(200, 245, 255, .06) 44%, transparent 56%),
        radial-gradient(ellipse 50% 40% at 90% 8%, rgba(138, 92, 246, .26), transparent 70%),
        radial-gradient(ellipse 44% 40% at 8% 92%, rgba(232, 184, 92, .09), transparent 70%);
}
.rules-card { padding: 26px 28px; }
.rules-text { font-size: 14px; line-height: 2.05; color: var(--text); max-width: 78ch; }
.rules-text h3 {
    font-family: var(--font-display); font-size: 16.5px; font-weight: 600; color: var(--gold-text);
    margin: 22px 0 8px; display: flex; align-items: center; gap: 10px;
}
.rules-text h3:first-child { margin-top: 0; }
.rules-text h3::before {   /* a small orbit with its planet */
    content: ""; width: 12px; height: 12px; flex: none; border-radius: 50%; border: 2px solid var(--gold);
    box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 6px var(--accent);
}
.rules-text p { margin: 0 0 10px; color: var(--text-2); }
.rules-text ul, .rules-text ol { margin: 0 0 10px; padding-right: 22px; }
.rules-text li { margin: 3px 0; color: var(--text); }
.rules-text li::marker { color: var(--accent); }
.rules-text strong { color: #ffd0f1; font-weight: 700; }
.rules-updated { margin-top: 14px; }
.rules-edit > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.rules-edit > summary::-webkit-details-marker { display: none; }
.rules-edit > summary h2 { margin: 0; }
.rules-edit > summary::after { content: "▾"; color: var(--muted); }
.rules-edit[open] > summary { margin-bottom: 12px; }
.rules-edit[open] > summary::after { content: "▴"; }
.rules-input { min-height: 320px; line-height: 1.9; resize: vertical; margin-bottom: 12px; }
.rules-reset { margin-top: 10px; }
.rules-brand { display: flex; align-items: center; gap: 10px; }
.rules-brand .brand-logo { width: 40px; height: 40px; }
.public-page .page-head { margin-top: 8px; }
.login-rules { color: var(--accent); text-decoration: none; border-bottom: 1px dashed var(--accent-line); }
.login-rules:hover { color: var(--accent-hover); }
.login-box .login-terms { margin: 18px 0 0; font-size: 12.5px; color: var(--muted); }
.notify-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.btn-push { display: inline-flex; align-items: center; gap: 6px; }
.btn-push.is-on { background: var(--gold-soft); color: var(--gold-text); border-color: var(--gold-line); }
.push-state { font-size: 12.5px; color: var(--text-2); line-height: 1.8; }
.notify-test { margin-bottom: 6px; }
.notify-test .btn { display: inline-flex; align-items: center; gap: 6px; }
.notify-sub { font-size: 14px; font-weight: 600; color: var(--text); margin: 18px 0 8px; }
.device-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.device { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-radius: 10px;
          background: var(--input); border: 1px solid var(--border); }
.device-name { font-weight: 600; color: var(--text); font-size: 13px; }
.device form { margin-right: auto; }
.kind-group { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px 6px; margin-bottom: 14px; }
.kind-group legend { padding: 0 8px; font-weight: 600; color: var(--gold-text); font-size: 14px; }
.kind-group .hint { margin-bottom: 8px; }
.kind-row { margin: 0 0 8px; }
.notify-reset { margin: -8px 0 20px; }

/* ---- audio tracks (video player and watch-together page) ---- */
.vp-audio-wrap { position: relative; }
.vp-audio.is-busy::after {
    content: ""; position: absolute; bottom: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--accent);
}
.vp-tracks {
    position: absolute; bottom: 48px; right: -40px; z-index: 3; width: 280px; max-width: 86vw; overflow-y: auto;
    max-height: min(62vh, 400px, calc(100cqh - 64px));
    padding: 12px; border-radius: 14px; background: rgba(20, 20, 34, .97); border: 1px solid var(--border-strong);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .6); font-family: var(--font); color: var(--text); text-align: right;
}
.vp-tracks .progress { height: 6px; margin-top: 8px; }
.wplayer .vp-audio-wrap { margin-inline-end: 4px; }
@media (max-width: 600px) {  /* like the subtitle menu: a sheet at the bottom of a phone's screen */
    .vp-tracks { position: fixed; inset: auto 8px 8px 8px; width: auto; max-width: none; max-height: 72vh; z-index: 30; }
}

/* ---- ops: server monitor (top card, ring gauges, ports and services, response time), speed-test places,
   activity-log filters. Space symbols are SVG/CSS only and nothing moves unless a value changes. ---- */
.mon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.st-accent { stop-color: var(--accent); }
.st-purple { stop-color: var(--purple); }
.st-purple-text { stop-color: var(--purple-text); }
.st-warn { stop-color: var(--warn); }
.st-bg { stop-color: var(--bg); }
.st-glow { stop-opacity: .4; }
.st-clear { stop-opacity: 0; }

.mon-hero { position: relative; overflow: hidden; padding: 0; margin-bottom: 16px; }
.mon-cosmos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mon-stars circle { fill: var(--text); opacity: .5; }
.mon-star4 { fill: var(--accent); opacity: .75; }
.mon-star4.small { fill: var(--purple-text); }
.mon-comet { stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; opacity: .35; }
.mon-comet-head { fill: var(--accent); opacity: .85; }
.mon-orbit { fill: none; stroke: var(--purple-text); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 3 5; }
.mon-ring { fill: none; stroke: var(--warn); stroke-opacity: .7; stroke-width: 3; stroke-linecap: round; }
.mon-moon { fill: var(--text-2); }
.mon-hero-main { position: relative; display: flex; align-items: center; min-height: 150px; padding: 22px 24px; padding-inline-end: 230px; }
.mon-name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mon-name-row h3 { font: 700 22px/1.3 'Readex Pro', var(--font); color: var(--text); overflow-wrap: anywhere; }
.mon-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-strong);
    font: 700 11px/1 'Readex Pro', sans-serif; letter-spacing: 1.4px; color: var(--muted);
}
.mon-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mon-badge[data-state="on"] { color: var(--good-text); background: var(--good-soft); border-color: var(--good); }
.mon-badge[data-state="warn"] { color: var(--warn-text); background: var(--warn-soft); border-color: var(--warn); }
.mon-badge[data-state="off"] { color: var(--bad-text); background: var(--bad-soft); border-color: var(--bad); }
.mon-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 14px; }
.mon-fact { display: flex; flex-direction: column; gap: 3px; }
.mon-fact-k { font-size: 11px; color: var(--muted); }
.mon-fact b { font-size: 14px; font-weight: 600; color: var(--text); }
@media (max-width: 600px) {
    .mon-hero-main { padding: 18px 16px 18px; padding-inline-end: 16px; min-height: 0; } .mon-orbit-planet { opacity: .35; }
    .mon-comet, .mon-comet-head, .mon-star4:not(.small) { display: none; }  /* they would cross the server's name */
}

.mon-gauges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.gauge {
    position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px 14px;
    border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
}
.gauge-svg { display: block; width: 132px; height: 132px; }
.g-orbit { fill: none; stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2 4; }
.g-track { fill: none; stroke: var(--track); stroke-width: 9; }
.g-track-in { stroke-width: 7; }
.g-arc { fill: none; stroke: url(#monArc); stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.g-arc-up { stroke: url(#monArcUp); stroke-width: 7; }
.gauge[data-level="warn"] .g-arc { stroke: var(--warn); }
.gauge[data-level="bad"] .g-arc { stroke: var(--bad); }
.g-moon { fill: var(--text); transform-box: view-box; transform-origin: 60px 60px; transition: transform .6s ease; }
.gauge-center {
    position: absolute; top: 16px; inset-inline: 0; height: 132px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; pointer-events: none;
}
.gauge-value { font: 700 28px/1 'Readex Pro', sans-serif; color: var(--text); font-variant-numeric: tabular-nums; }
.gauge-unit { margin-top: 5px; font-size: 11px; color: var(--muted); }
.gauge-center-net { gap: 3px; }
.gauge-net-line { display: flex; align-items: baseline; gap: 4px; font: 700 16px/1.1 'Readex Pro', sans-serif; color: var(--text); font-variant-numeric: tabular-nums; }
.gauge-net-line i { font-style: normal; font-size: 13px; }
.net-down { color: var(--accent); }
.net-up { color: var(--warn); }
.gauge figcaption { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.gauge-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.gauge-sub { font-size: 11.5px; line-height: 1.6; color: var(--muted); }
@media (max-width: 900px) { .mon-gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) {
    .mon-gauges { gap: 10px; }
    .gauge-svg { width: 108px; height: 108px; }
    .gauge-center { height: 108px; }
    .gauge-value { font-size: 22px; }
}

.mon-ranges-label { align-self: center; font-size: 12.5px; }
.mon-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; margin-bottom: 16px; }
.mon-split .mon-card, .mon-gauges .gauge { min-width: 0; }
@media (max-width: 900px) { .mon-split { grid-template-columns: 1fr; } }
.svc-list { list-style: none; margin: 0; padding: 0; }
.svc { display: grid; grid-template-columns: 10px auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 8px 2px; font-size: 13px; }
.svc + .svc { border-top: 1px solid var(--border); }
.svc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--neutral-mark); }
.svc[data-state="up"] .svc-dot { background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.svc[data-state="down"] .svc-dot { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.svc-name { font-weight: 600; color: var(--text); white-space: nowrap; }
.svc-port { margin-inline-start: 4px; padding: 1px 6px; border-radius: 6px; background: var(--input); font: 500 11px 'Readex Pro', sans-serif; color: var(--muted); }
.svc-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.svc-state { font-size: 12px; font-weight: 600; color: var(--muted); }
.svc[data-state="up"] .svc-state { color: var(--good-text); }
.svc[data-state="down"] .svc-state { color: var(--bad-text); }
.rtt-now { margin-inline-start: 4px; font: 600 12px 'Readex Pro', sans-serif; color: var(--text); }

.speed-group { margin-top: 16px; }
.speed-group[hidden] { display: none; }
.speed-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.speed-group-head h4 { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--text); }
.speed-group-head .btn { margin-inline-start: auto; }
.flag-code {
    display: inline-flex; align-items: center; justify-content: center; background: var(--input); color: var(--muted);
    font: 700 10px/1 'Readex Pro', sans-serif; letter-spacing: .5px;
}
.speed-loc.is-custom { border-style: dashed; }
.speed-foot { display: flex; align-items: flex-end; gap: 8px; }
.speed-foot .speed-meta { flex: 1; min-width: 0; }
.speed-tools { display: flex; gap: 4px; flex: none; }
.speed-tool {
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
    border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--muted);
}
.speed-tool .ui-icon { width: 15px; height: 15px; }
.speed-tool:hover:not(:disabled), .speed-tool:focus-visible { color: var(--bad-text); border-color: var(--bad); }
.speed-tool:disabled { opacity: .35; cursor: default; }
.speed-add { margin: 0 0 4px; }
.speed-add > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.speed-add > summary::-webkit-details-marker { display: none; }
.speed-add > summary .ui-icon { width: 15px; height: 15px; }
.speed-add[open] > summary { border-color: var(--accent-line); color: var(--accent); }
.speed-add-body { margin-top: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--input); }
.speed-search { display: flex; gap: 8px; }
.speed-search .text-input { flex: 1; min-width: 0; }
.speed-search-note { margin-top: 8px; line-height: 1.8; }
.speed-results { list-style: none; margin: 6px 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
.speed-result { display: flex; align-items: center; gap: 10px; padding: 8px 2px; }
.speed-result + .speed-result { border-top: 1px solid var(--border); }
.speed-result-name { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.speed-result-name b { font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.speed-history-tools { display: flex; justify-content: flex-end; margin: 4px 0 10px; }

.log-filters { display: flex; flex-direction: column; gap: 14px; }
.lf-date .text-input { width: auto; flex: 0 1 auto; padding-top: 6px; padding-bottom: 6px; }
.lf-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lf-title { font-size: 13px; font-weight: 700; color: var(--text); }
.lf-count { font-size: 12px; color: var(--accent); }
.lf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-height: 220px; overflow-y: auto; padding: 2px; }
.lf-chip {
    position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border); color: var(--muted); font-size: 12.5px; user-select: none; transition: background .15s, border-color .15s, color .15s;
}
.lf-chip input, .lf-user input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.lf-chip .dot { opacity: .45; }
.lf-chip.is-on, .lf-chip:has(input:checked) { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }
.lf-chip.is-on .dot, .lf-chip:has(input:checked) .dot { opacity: 1; }
.lf-chip:has(input:focus-visible), .lf-user:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.lf-users > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.lf-users > summary::-webkit-details-marker { display: none; }
.lf-users > summary::after { content: "▾"; color: var(--muted); font-size: 12px; }
.lf-users[open] > summary::after { content: "▴"; }
.lf-users-body { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.lf-users-body .muted { margin: 0; }
.lf-user-search { max-width: 260px; }
.lf-user-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 180px; overflow-y: auto; padding: 2px; }
.lf-user {
    position: relative; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--border); color: var(--text-2); font-size: 12.5px;
}
.lf-user.is-on, .lf-user:has(input:checked) { border-color: var(--purple); background: var(--purple-soft); color: var(--text); }
.lf-user[hidden] { display: none; }
.lf-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .g-arc, .g-moon, .lf-chip { transition: none; } }

/* ---- folders: access dialog, folder passwords, home colours, search result actions ---- */
/* root folder cards: menu (left), access button next to it, selection box (right); the heart moves below the box */
.item.has-access .item-access { right: auto; left: 38px; }
/* a card's badge breaks into lines inside the card ("اشتراکی: همه کاربران · فقط خواندنی" was cut at both edges) */
.item .badge { white-space: normal; max-width: 100%; border-radius: 9px; line-height: 1.5; }
.item:has(.item-check) .fav-mark { top: 32px; }
/* the access dialog: two choices as segmented buttons, the chosen users in a searchable, scrolling list */
.access-fields { display: flex; flex-direction: column; gap: 12px; }
.access-step { display: flex; flex-direction: column; gap: 7px; }
.access-step-title { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.access-fields .access-level { border-top: 0; padding-top: 0; margin: 0; }
.access-seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.access-seg label { position: relative; flex: 1 1 auto; justify-content: center; padding: 7px 12px; border-radius: 9px;
                    border: 1px solid var(--border-strong); background: var(--input); color: var(--text-2); font-size: 12.5px;
                    text-align: center; transition: background .15s, border-color .15s, color .15s; }
.access-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.access-seg label:hover { border-color: var(--accent-line); color: var(--text); }
.access-seg label:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.access-seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.access-pick { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: rgba(0, 0, 0, .12); }
.access-pick-head { display: flex; align-items: center; gap: 6px; }
.access-search-box { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.access-search-box .ui-icon { position: absolute; right: 10px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.access-search-box .text-input { width: 100%; padding: 7px 32px 7px 10px; font-size: 13px; }
.access-fields .access-users { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 4px; max-height: min(34vh, 230px);
                               overflow-y: auto; overscroll-behavior: contain; border-radius: 8px; }
.access-users label { padding: 6px 8px; border-radius: 7px; gap: 8px; }
.access-users label:hover { background: var(--surface-hover); }
.access-users label:has(input:checked) { background: var(--accent-soft); }
.access-uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-count { min-height: 1em; }
@media (max-width: 600px) { .access-seg label { flex: 1 1 100%; } }
/* folder passwords: a lock on the card's icon (closed, or open for whoever has unlocked it) */
.item .icon, .fm-icon { position: relative; }
.fl-badge { position: absolute; bottom: -3px; left: -5px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center;
            justify-content: center; background: #e8b85c; color: #191927; border: 2px solid var(--surface); pointer-events: auto; }
.fl-badge svg, .item .icon .fl-badge svg { width: 12px; height: 12px; }
.fl-badge.is-open { background: var(--accent); }
.fm-icon .fl-badge { width: 16px; height: 16px; bottom: -4px; left: -6px; border-width: 1.5px; }
.fm-icon .fl-badge svg { width: 10px; height: 10px; }
.item.lock-closed .icon > svg { opacity: .72; }
.item.lock-closed:hover { border-color: rgba(232, 184, 92, .6); }
.modal-lock .bk-field { margin-top: 10px; }
.lock-status.error { color: var(--bad-text); }
.lock-remove { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.fl-card { max-width: 480px; margin: 0 auto 20px; }
.fl-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.fl-head h1 { font-family: var(--font-display); font-size: 19px; color: var(--text); overflow-wrap: anywhere; margin-bottom: 2px; }
.fl-icon svg { width: 56px; height: 56px; display: block; }
.fl-text { font-size: 13px; color: var(--text-2); line-height: 1.8; margin-bottom: 12px; }
.fl-form .bk-field { margin-bottom: 4px; }
/* accounts' homes where homes are listed: the owner's gold, the admins' violet */
.item.home-owner { border-color: rgba(232, 184, 92, .42); background: linear-gradient(180deg, rgba(232, 184, 92, .07), transparent 70%), var(--surface); }
.item.home-owner:hover { border-color: #e8b85c; }
.item.home-admin { border-color: rgba(147, 51, 234, .45); background: linear-gradient(180deg, rgba(147, 51, 234, .09), transparent 70%), var(--surface); }
.item.home-admin:hover { border-color: #a855f7; }
.item .icon .home-icon { width: 48px; height: 48px; }
.home-icon-owner { filter: drop-shadow(0 0 5px rgba(232, 184, 92, .35)); }
.home-icon-admin { filter: drop-shadow(0 0 5px rgba(147, 51, 234, .4)); }
.fm-icon .home-icon { width: 30px; height: 30px; display: block; }
/* search results: the ⋮ menu of each row (fixed to the window while open) and the message above the list */
.search-table .sr-act { width: 1%; padding: 4px 8px; text-align: center; position: relative; }  /* holds its hidden label inside the scrolling table */
.search-table .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.search-table .item-menu-btn { opacity: .7; margin: 0 auto; font-size: 17px; line-height: 1; font-weight: 700; }
.search-table tr:hover .item-menu-btn, .search-table tr.menu-open .item-menu-btn { opacity: 1; }
.search-table tr.menu-open .item-menu-btn { background: var(--purple-soft); color: var(--purple-text); border-color: var(--purple); }
.sr-menu-list { z-index: 60; top: auto; left: auto; }
.item-menu-list a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; color: var(--text); font-size: 13px;
                    text-decoration: none; white-space: nowrap; }
.item-menu-list a:hover, .item-menu-list a:focus-visible { background: var(--surface-hover); color: var(--accent); outline: none; }
.sr-menu-list .is-danger { border-top: 1px solid var(--border); margin-top: 2px; border-radius: 0 0 7px 7px; }
.search-table tr.is-fav .fm-label::after { content: "♥"; color: #f472b6; margin-inline-start: 6px; font-size: 11px; }
.sr-status { margin-bottom: 12px; }
/* phones: the tables of files (search results, trash, file manager) keep the name, the place and the actions on the
   screen instead of behind a sideways scroll; the size, time and kind columns step aside */
@media (max-width: 600px) {
    .fm-table .fm-name { min-width: 118px; }
    .fm-table td, .fm-table th { padding-left: 8px; padding-right: 8px; }
    .fm-table .fm-act { width: auto; }
    .search-table .fm-size, .fm-table .fm-kind { display: none; }
    /* the trash: one block per item (name; place, size and days left; the two buttons) */
    .trash-table, .trash-table tbody, .trash-table tr, .trash-table td { display: block; }
    .trash-table thead, .trash-table .tr-when { display: none; }
    .trash-table tbody tr { padding: 10px 12px; border-bottom: 1px solid var(--border); }
    .trash-table tbody tr:last-child { border-bottom: 0; }
    .trash-table td, .trash-table tbody tr:hover td { padding: 2px 0; border: 0 !important; background: none; }
    .trash-table .trash-where, .trash-table .tr-size, .trash-table .tr-days { display: inline; font-size: 12px; color: var(--text-2); }
    .trash-table .tr-size::before, .trash-table .tr-days::before { content: " · "; }
    .trash-table .tr-days::after { content: " روز مانده"; }
    .trash-table .trash-actions { display: flex; gap: 8px; margin-top: 8px; white-space: normal; }
    .trash-table .trash-actions form { flex: 1; }
    .trash-table .trash-actions .btn { width: 100%; }
    .trash-table .empty-row { text-align: center; }
}