:root {
  /* runtime knobs (theme.js injects #theme-vars overriding these) */
  --accent: #0a84ff;
  --accent-strong: #0066d6;
  --accent-soft: #4aa3ff;
  --accent-rgb: 10,132,255;
  --glass-alpha: .62;
  --wallpaper-image: none;
  --wallpaper-blur: 0px;
  --wallpaper-dim: .34;
  --r: 20px;
  --tile: 178px;
  --frame: clamp(12px, 1.6vw, 24px); /* gap so the app floats on the wallpaper */
  --mono: "JetBrains Mono", ui-monospace, monospace;
  /* legacy alias — older rules still reference --gold/--lilac */
  --gold: var(--accent);
  --gold-soft: var(--accent-strong);
  --lilac: var(--accent-soft);
  --bad: #ff6b5e;
  --good: #34c759;
  --on-accent: #fff;
  /* font presets via [data-font] */
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "IBM Plex Sans Thai", system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "IBM Plex Sans Thai", sans-serif;
}
:root[data-font="grotesk"] { --body: "Space Grotesk", "IBM Plex Sans Thai", system-ui, sans-serif; --display: "Space Grotesk", "IBM Plex Sans Thai", sans-serif; }
:root[data-font="plex"] { --body: "IBM Plex Sans Thai", system-ui, "Segoe UI", sans-serif; --display: "IBM Plex Sans Thai", system-ui, sans-serif; }

/* ----- DARK palette (default) ----- */
:root, :root[data-mode="dark"] {
  color-scheme: dark; /* native <select> popups, scrollbars use dark theme */
  --bg: #0a0d14;
  --text: #f4f6fa;
  --muted: #b3bbc9;
  --faint: #7c8696;
  --line: rgba(255,255,255,.12);
  --line-soft: rgba(255,255,255,.07);
  --glass: rgba(26,30,40, var(--glass-alpha));
  --glass-2: rgba(255,255,255,.055);
  --glass-hi: rgba(255,255,255,.10);
  --glass-solid: rgba(20,24,33,.95); /* opaque glass for popovers/menus (readability) */
  --surface: var(--glass-2);
  --surface-2: var(--glass-hi);
  --bg-2: rgba(255,255,255,.04);
  --shadow: 0 26px 64px -30px rgba(0,0,0,.75);
  --wp-scrim: 4,6,12;
  --wp-fallback:
    radial-gradient(1100px 720px at 14% 8%, rgba(37,99,235,.42), transparent 60%),
    radial-gradient(1000px 760px at 86% 16%, rgba(124,58,237,.40), transparent 55%),
    radial-gradient(1200px 900px at 50% 108%, rgba(14,165,233,.34), transparent 60%),
    linear-gradient(160deg, #0c1224, #0a0f1c 70%);
}
/* ----- LIGHT palette ----- */
:root[data-mode="light"] {
  color-scheme: light;
  --bg: #e9edf5;
  --text: #1b1f27;
  --muted: #5a6273;
  --faint: #8a93a4;
  --line: rgba(15,23,42,.13);
  --line-soft: rgba(15,23,42,.07);
  --glass: rgba(255,255,255, var(--glass-alpha));
  --glass-2: rgba(15,23,42,.045);
  --glass-hi: rgba(15,23,42,.06);
  --glass-solid: rgba(255,255,255,.97); /* opaque glass for popovers/menus (readability) */
  --surface: var(--glass-2);
  --surface-2: var(--glass-hi);
  --bg-2: rgba(255,255,255,.5);
  --shadow: 0 20px 50px -26px rgba(30,41,90,.32);
  --wp-scrim: 255,255,255;
  --wp-fallback:
    radial-gradient(1100px 720px at 14% 8%, rgba(120,170,255,.55), transparent 60%),
    radial-gradient(1000px 760px at 86% 14%, rgba(206,178,255,.55), transparent 55%),
    radial-gradient(1200px 900px at 50% 108%, rgba(150,220,255,.5), transparent 60%),
    linear-gradient(160deg, #eef2fb, #e4eaf6 70%);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text); font-family: var(--body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; min-height: 100vh;
  padding: var(--frame); /* frame the floating app — wallpaper shows around it */
}
/* wallpaper layer (admin-uploaded image or the per-mode gradient fallback) */
body::before {
  content: ""; position: fixed; inset: -4%; z-index: -2;
  background: var(--wallpaper-image, none), var(--wp-fallback);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: blur(var(--wallpaper-blur)); transform: scale(1.04);
}
/* readability scrim over the wallpaper (mode-aware colour, intensity from theme) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(var(--wp-scrim), var(--wallpaper-dim));
}
button { font-family: inherit; cursor: pointer; color: inherit; }
input, select { font-family: inherit; }
::selection { background: rgba(var(--accent-rgb), .3); }

/* inline SVG icons inherit text colour and sit on the baseline */
.svgi { display: inline-block; vertical-align: -.18em; flex: none; }
button .svgi, a .svgi { vertical-align: middle; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  background: var(--accent); color: var(--on-accent); border:none;
  border-radius:11px; padding:.6rem 1.1rem; font-weight:600; font-size:.9rem;
  box-shadow: 0 8px 18px -10px rgba(var(--accent-rgb),.65);
  transition:filter .15s, transform .1s, box-shadow .15s; }
.btn:hover { filter:brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn.full { width:100%; margin-top:1.4rem; }
.btn.ghost { background:var(--surface); color:var(--text); border:1px solid var(--line); box-shadow:none; }
.btn.ghost:hover { border-color:var(--accent); color:var(--accent); background:var(--surface-2); }
.btn.danger { background:transparent; color:var(--bad); border:1px solid rgba(255,107,94,.45); box-shadow:none; }
.btn.danger:hover { background:rgba(255,107,94,.12); }
.btn.sm { padding:.42rem .8rem; font-size:.82rem; border-radius:9px; }
.x { background:none; border:none; color:var(--muted); font-size:1.4rem; line-height:1; display:grid; place-items:center; }
.x:hover { color:var(--text); }
.pill { font-family:var(--mono); font-size:.7rem; padding:.18rem .5rem; border-radius:6px; background:var(--surface-2); color:var(--muted); }
.err { color:var(--bad); font-size:.85rem; margin-top:1rem; min-height:1.1em; }
label.fld { display:block; font-size:.78rem; color:var(--muted); margin:.85rem 0 .35rem; }
input, select { width:100%; background:var(--surface); border:1px solid var(--line); color:var(--text);
  border-radius:11px; padding:.62rem .85rem; font-size:.93rem; transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3.5px rgba(var(--accent-rgb),.2); }
/* native dropdown list — keep options readable (was light-on-light) */
option { background:#161a23; color:#f4f6fa; }
:root[data-mode="light"] option { background:#fff; color:#1b1f27; }

/* ---------- LOGIN ---------- */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:1.5rem; }
.login-card { width:min(400px,100%); background:var(--glass);
  backdrop-filter:blur(34px) saturate(180%); -webkit-backdrop-filter:blur(34px) saturate(180%);
  border:1px solid var(--line); border-radius:26px; padding:2.6rem 2rem; box-shadow:var(--shadow); text-align:center; }
.login-card img.logo { width:118px; max-width:55%; margin:0 auto .4rem; display:block; }
.login-card p.sub { color:var(--muted); font-size:.9rem; margin:.2rem 0 1.2rem; }
.login-card label.fld, .login-card input { text-align:left; }
.hint { color:var(--faint); font-size:.76rem; font-family:var(--mono); margin-top:1.3rem; line-height:1.7; text-align:left; }

/* password show/hide eye + login secondary action */
.pw-wrap { position:relative; }
.pw-wrap input { padding-right:2.6rem; }
.pw-eye { position:absolute; right:.45rem; top:50%; transform:translateY(-50%); background:none; border:none;
  color:var(--faint); font-size:1rem; line-height:1; padding:.25rem .35rem; border-radius:6px; }
.pw-eye:hover { color:var(--gold); }
.login-alt { margin-top:1.2rem; font-size:.84rem; color:var(--muted); text-align:center; }
.login-alt a { color:var(--gold); cursor:pointer; text-decoration:none; }
.login-alt a:hover { text-decoration:underline; }

/* admin: per-user project assignment */
.passign { display:flex; flex-direction:column; gap:.45rem; min-width:min(440px,82vw); }
.passign .prow { display:flex; align-items:center; gap:.7rem; border:1px solid var(--line); border-radius:9px; padding:.5rem .7rem; transition:opacity .15s; }
.passign .prow.off { opacity:.5; }
.passign .prow .pck { width:auto; }
.passign .prow .pn { flex:1; font-size:.92rem; }
.passign .prow .prole { width:auto; }

/* ---------- SHELL ---------- */
.shell { display:grid; grid-template-columns:252px minmax(0,1fr);
  height: calc(100vh - 2 * var(--frame));
  border-radius: 26px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.sidebar { background:var(--glass); backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%);
  border-right:1px solid var(--line); display:flex; flex-direction:column; padding:1.3rem 1rem; }
.sidebar .logo { width:var(--logo-size, 100px); max-width:78%; margin:.4rem auto 1.4rem; display:block; opacity:.97; }
.navitem { display:flex; align-items:center; gap:.55rem; padding:.58rem .7rem; border-radius:12px; color:var(--muted); font-size:.92rem; border:1px solid transparent; cursor:pointer; margin-top:.4rem; transition:background .14s, color .14s; }
.navitem:hover { background:var(--glass-hi); color:var(--text); }
.navitem .svgi { color:var(--faint); }
.side-label { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-family:var(--mono); padding:.5rem .5rem .4rem; }
.proj { display:flex; align-items:center; gap:.55rem; padding:.58rem .7rem; border-radius:12px; color:var(--muted); font-size:.92rem; border:1px solid transparent; cursor:pointer; transition:background .14s, color .14s; }
.proj:hover { background:var(--glass-hi); color:var(--text); }
.proj.active { background:rgba(var(--accent-rgb),.16); border-color:rgba(var(--accent-rgb),.4); color:var(--text); }
.proj .role { margin-left:auto; font-size:.62rem; font-family:var(--mono); color:var(--faint); }
.proj .empty { color:var(--faint); font-size:.85rem; }
.side-foot { margin-top:auto; border-top:1px solid var(--line); padding-top:.8rem; }

.main { display:flex; flex-direction:column; overflow:hidden; }

/* topbar: search + view toggle + size + user (right) */
.topbar { display:flex; align-items:center; gap:.8rem; padding:.8rem 1.3rem; border-bottom:1px solid var(--line);
  background:var(--glass); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); z-index:5; }
.search { flex:1; position:relative; max-width:580px; display:flex; align-items:center; }
.search input { padding-left:2.4rem; background:var(--surface); border-radius:999px; }
.search-ic { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--faint); display:grid; place-items:center; pointer-events:none; }
.spacer { flex:1; }
.segmented { display:flex; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); }
.segmented button { background:transparent; border:none; padding:.45rem .7rem; color:var(--muted); display:grid; place-items:center; transition:background .14s, color .14s; }
.segmented button.active { background:var(--surface-2); color:var(--accent); }
/* click column header to sort */
th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
th.sortable:hover { color:var(--gold); }
/* compact selects inside admin modal tables (was stretching full-width = cluttered) */
.modal-body table select { width:auto; padding:.38rem .5rem; font-size:.84rem; }
.add-member .field-row > div { flex:0 1 220px; }
.sizer { display:flex; align-items:center; gap:.4rem; }
.sizer input[type=range] { width:90px; accent-color:var(--gold); }
.bell { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:12px; width:38px; height:38px; color:var(--muted); display:grid; place-items:center; transition:border-color .14s, color .14s; }
.bell:hover { border-color:var(--accent); color:var(--accent); }
.bell-badge { position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--bad); color:#fff; font-size:.66rem; font-family:var(--mono); display:grid; place-items:center; line-height:1; }
.bell-dd { position:absolute; right:0; top:46px; width:min(340px,86vw); background:var(--glass-solid); backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); z-index:62; overflow:hidden; text-align:left; cursor:default; }
.bell-hd { padding:.65rem .85rem; font-size:.76rem; color:var(--faint); font-family:var(--mono); border-bottom:1px solid var(--line); }
.bell-list { max-height:60vh; overflow:auto; }
.bell-empty { padding:1.4rem; text-align:center; color:var(--faint); font-size:.86rem; }
.bell-item { padding:.65rem .85rem; border-bottom:1px solid var(--line-soft); }
.bell-item:last-child { border-bottom:none; }
.bell-who { font-size:.84rem; margin-bottom:.5rem; color:var(--text); }
.bell-acts { display:flex; gap:.45rem; }
.bell-acts .btn { flex:1; }
.usermenu { position:relative; }
.avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-soft)); display:grid; place-items:center; color:var(--on-accent); font-weight:700; font-size:.95rem; cursor:pointer; border:1px solid rgba(255,255,255,.18); box-shadow:0 6px 16px -8px rgba(var(--accent-rgb),.6); }
.dropdown { position:absolute; right:0; top:46px; background:var(--glass-solid); backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%); border:1px solid var(--line); border-radius:16px; padding:.5rem; min-width:210px; box-shadow:var(--shadow); z-index:60; }
.dropdown .who { padding:.4rem .6rem .6rem; border-bottom:1px solid var(--line); margin-bottom:.4rem; }
.dropdown .who .nm { font-weight:600; font-size:.92rem; }
.dropdown .who .rl { font-size:.72rem; color:var(--faint); font-family:var(--mono); }
.dropdown button { display:block; width:100%; text-align:left; background:none; border:none; padding:.5rem .6rem; border-radius:8px; color:var(--text); font-size:.88rem; }
.dropdown button:hover { background:var(--surface-2); }

/* subbar: back + breadcrumb + actions */
.subbar { display:flex; align-items:center; gap:.6rem; padding:.7rem 1.3rem; border-bottom:1px solid var(--line-soft); flex-wrap:wrap;
  background:var(--glass); backdrop-filter:blur(18px) saturate(170%); -webkit-backdrop-filter:blur(18px) saturate(170%); }
.iconbtn { width:34px; height:34px; border-radius:11px; border:1px solid var(--line); background:var(--surface); color:var(--muted); display:grid; place-items:center; font-size:1rem; transition:border-color .14s, color .14s, background .14s; }
.iconbtn:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.iconbtn:disabled { opacity:.35; cursor:default; }
.crumbs { display:flex; align-items:center; gap:.3rem; font-size:.92rem; flex-wrap:wrap; }
.crumbs a { color:var(--muted); cursor:pointer; text-decoration:none; padding:.2rem .55rem; border-radius:8px; border:1.5px solid rgba(var(--accent-rgb),.22); transition:background .12s, border-color .12s, color .12s, box-shadow .12s; }
.crumbs a:hover { color:var(--accent); border-color:rgba(var(--accent-rgb),.5); }
.crumbs a.dropinto { background:rgba(var(--accent-rgb),.22); color:var(--accent); border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.32); }
.crumbs .sep { color:var(--faint); }
.crumbs .cur { color:var(--text); font-weight:500; cursor:pointer; padding:.2rem .4rem; border-radius:8px; }
.crumbs .cur:hover { background:var(--surface-2); }

.content { padding:1.3rem; overflow:auto; flex:1; position:relative; }
.content.drag::after { content:"วางไฟล์/โฟลเดอร์ที่นี่เพื่ออัปโหลด"; position:absolute; inset:12px; border:2px dashed var(--accent); border-radius:18px; display:grid; place-items:center; color:var(--accent); font-size:1.1rem; background:rgba(var(--accent-rgb),.07); pointer-events:none; }

/* grid */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--tile),1fr)); gap:1rem; }
.tile { background:var(--glass); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; cursor:pointer; box-shadow:var(--shadow);
  transition:border-color .18s, transform .14s, box-shadow .18s; }
.tile:hover { border-color:rgba(var(--accent-rgb),.55); transform:translateY(-3px); }
.tile.dropinto { border-color:var(--accent); box-shadow:0 0 0 2px rgba(var(--accent-rgb),.4) inset; }
.tile.dragging { opacity:.4; }
.list tr.dragging td { opacity:.45; }
.crumbs a.dropinto { background:rgba(var(--accent-rgb),.18); color:var(--accent); border-radius:5px; box-shadow:0 0 0 2px rgba(var(--accent-rgb),.45); }

/* Move-to folder picker */
.movepick { min-width:min(440px,84vw); }
.mp-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem; font-size:.9rem; padding:0 0 .6rem; border-bottom:1px solid var(--line); margin-bottom:.55rem; }
.mp-crumbs a { color:var(--muted); cursor:pointer; }
.mp-crumbs a:hover { color:var(--gold); }
.mp-crumbs .sep { color:var(--faint); }
.mp-list { max-height:46vh; overflow:auto; display:flex; flex-direction:column; gap:.25rem; }
.mp-row { display:flex; align-items:center; gap:.5rem; width:100%; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:.55rem .7rem; color:var(--text); cursor:pointer; font-size:.92rem; }
.mp-row:hover { border-color:var(--gold); }
.mp-row .mp-nm { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-row .mp-go { color:var(--faint); }
.mp-row.blocked { opacity:.4; cursor:not-allowed; }
.mp-empty { color:var(--muted); padding:.9rem; text-align:center; font-size:.9rem; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.thumb { aspect-ratio:16/10; background:var(--surface-2); display:grid; place-items:center; position:relative; overflow:hidden; }
.thumb .ic-lg { color:var(--faint); display:grid; place-items:center; }
.thumb .th-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.badge { position:absolute; top:.4rem; right:.4rem; font-family:var(--mono); font-size:.58rem; background:rgba(0,0,0,.6); color:var(--gold); padding:.15rem .4rem; border-radius:5px; }
.tmeta { padding:.6rem .7rem .7rem; }
.tname { font-size:.85rem; word-break:break-word; line-height:1.3; }
.tsub { font-size:.7rem; color:var(--faint); font-family:var(--mono); margin-top:.25rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* list */
.list { width:100%; border-collapse:collapse; }
.list th { text-align:left; font-family:var(--mono); font-size:.7rem; text-transform:uppercase; color:var(--faint); padding:.5rem .7rem; border-bottom:1px solid var(--line); }
.list td { padding:.5rem .7rem; border-bottom:1px solid var(--line-soft); font-size:.9rem; }
.list tr { cursor:pointer; }
.list tbody tr:hover { background:var(--surface); }
.list .nm { display:flex; align-items:center; gap:.6rem; }
.list .nm .ic { color:var(--faint); display:inline-grid; place-items:center; }
.list .col-r { text-align:right; color:var(--faint); font-family:var(--mono); font-size:.78rem; white-space:nowrap; }
.list tr.dropinto td { background:rgba(var(--accent-rgb),.1); }

.empty-state { color:var(--faint); text-align:center; padding:4rem 1rem; }

/* context menu */
.ctx { position:fixed; background:var(--glass-solid); backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%); border:1px solid var(--line); border-radius:14px; padding:.4rem; min-width:188px; box-shadow:var(--shadow); z-index:90; }
.ctx button { display:flex; align-items:center; gap:.6rem; width:100%; text-align:left; background:none; border:none; padding:.5rem .65rem; border-radius:9px; color:var(--text); font-size:.86rem; }
.ctx button:hover { background:var(--glass-hi); }
.ctx button.danger { color:var(--bad); }
.ctx .div { height:1px; background:var(--line); margin:.3rem 0; }

/* modal */
.overlay { position:fixed; inset:0; background:rgba(4,6,12,.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:grid; place-items:center; padding:1.5rem; z-index:70; }
.modal { background:var(--glass); backdrop-filter:blur(40px) saturate(190%); -webkit-backdrop-filter:blur(40px) saturate(190%); border:1px solid var(--line); border-radius:24px; width:min(960px,100%); max-height:90vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow); }
.modal.sm { width:min(460px,100%); }
.modal.md { width:min(740px,100%); }
.modal-head { display:flex; align-items:center; gap:.8rem; padding:1rem 1.3rem; border-bottom:1px solid var(--line); }
.modal-head h3 { font-family:var(--display); font-weight:600; font-size:1.05rem; flex:1; word-break:break-word; }
.modal-body { padding:1.3rem; overflow:auto; }
.modal-foot { padding:1rem 1.3rem; border-top:1px solid var(--line); display:flex; gap:.6rem; justify-content:flex-end; flex-wrap:wrap; }
.preview-stage { display:grid; place-items:center; background:var(--bg); border-radius:12px; min-height:240px; max-height:64vh; overflow:hidden; }
.preview-stage img, .preview-stage video { max-width:100%; max-height:64vh; }
.preview-stage iframe { width:100%; height:64vh; border:none; background:#fff; border-radius:12px; }
.noprev { text-align:center; color:var(--muted); padding:2.5rem 1.5rem; }
.noprev .ic { font-size:3rem; }
.noprev .note { font-size:.85rem; color:var(--faint); margin-top:.6rem; max-width:42ch; margin-inline:auto; }
.cap { text-align:center; color:var(--faint); font-size:.78rem; margin-top:.6rem; }

.field-row { display:flex; gap:.6rem; align-items:end; flex-wrap:wrap; }
.field-row > div { flex:1; min-width:120px; }
.copybar { display:flex; gap:.5rem; margin-top:.8rem; }
.copybar input { font-family:var(--mono); font-size:.82rem; }
/* share dialog: one row per permission (read / read-write / editor) */
.shrows { display:flex; flex-direction:column; gap:.55rem; }
.shrow { border:1px solid var(--line); border-radius:9px; padding:.55rem .7rem; }
.shrow .shlabel { font-size:.82rem; font-weight:500; margin-bottom:.4rem; }
.shrow .shline { display:flex; align-items:center; gap:.4rem; }
.shrow .shlink { flex:1; min-width:0; font-family:var(--mono); font-size:.74rem; }
.shrow .shnone { flex:1; color:var(--faint); font-size:.8rem; }

/* upload progress */
.uprog { position:fixed; bottom:1.3rem; right:1.3rem; width:min(360px,92vw); background:var(--glass); backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%); border:1px solid var(--line); border-radius:18px; padding:.9rem 1rem; box-shadow:var(--shadow); z-index:85; }
.uprog-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; font-size:.86rem; color:var(--text); margin-bottom:.55rem; }
.uprog-head .ut { font-weight:500; }
.uprog-btns { display:flex; align-items:center; gap:.55rem; flex:none; }
.uprog .bar { height:7px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.uprog .bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--lilac)); transition:width .15s; }
.uprog .meta { font-size:.72rem; color:var(--faint); font-family:var(--mono); margin-top:.45rem; }
.uprog-x { background:none; border:none; color:var(--muted); cursor:pointer; font-size:.95rem; line-height:1; padding:0 1px; }
.uprog-x:hover { color:#e8716b; }
.uprog-exp { background:none; border:none; color:var(--muted); cursor:pointer; font-size:.78rem; line-height:1; padding:0 1px; }
.uprog-exp:hover { color:var(--gold); }
.uprog-list { display:none; margin-top:.6rem; max-height:230px; overflow:auto; flex-direction:column; gap:.1rem; border-top:1px solid var(--line); padding-top:.5rem; }
.uprog-list.open { display:flex; }
.uf { display:flex; align-items:center; gap:.5rem; font-size:.74rem; color:var(--muted); padding:.18rem 0; }
.uf-st { width:15px; height:15px; flex:none; display:grid; place-items:center; }
.uf-nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--mono); }
.uf-ic.ok { color:#5fd08a; } .uf-ic.bad { color:#e8716b; }
.uf-prog { width:15px; height:15px; transform:rotate(-90deg); display:block; }
.uf-prog-bg { fill:none; stroke:var(--line); stroke-width:2.5; }
.uf-prog-fg { fill:none; stroke:var(--gold); stroke-width:2.5; stroke-linecap:round; transition:stroke-dashoffset .15s linear; }

/* admin / modal tables */
table.tbl, .modal-body table { width:100%; border-collapse:collapse; font-size:.88rem; margin-top:.8rem; }
table.tbl th, table.tbl td, .modal-body th, .modal-body td { text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
table.tbl th, .modal-body th { font-family:var(--mono); font-size:.72rem; text-transform:uppercase; color:var(--muted); }
.tabs { display:flex; gap:.4rem; margin-bottom:1rem; }
.tab { padding:.45rem .9rem; border-radius:9px; border:1px solid var(--line); background:transparent; color:var(--muted); font-size:.85rem; }
.tab.active { background:rgba(var(--accent-rgb),.14); border-color:var(--accent); color:var(--accent); }

.toast { position:fixed; bottom:1.3rem; left:50%; transform:translateX(-50%); background:var(--glass); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); border:1px solid var(--line); color:var(--text); padding:.7rem 1.1rem; border-radius:12px; font-size:.88rem; z-index:95; box-shadow:var(--shadow); }
.toast.bad { border-color:rgba(255,107,94,.55); }

/* no text-select anywhere (except typing fields) — keeps marquee/drag clean */
body { user-select:none; -webkit-user-select:none; }
input, textarea { user-select:text; -webkit-user-select:text; }
/* selection (click + rubber-band marquee; no checkboxes) */
.tile.selected { border-color:var(--accent); box-shadow:0 0 0 2px rgba(var(--accent-rgb),.5) inset; }
.list tr.selected td { background:rgba(var(--accent-rgb),.14); }
.marquee { position:fixed; border:1px solid var(--accent); background:rgba(var(--accent-rgb),.16); border-radius:4px; z-index:60; pointer-events:none; }

/* ---------- LIGHTBOX (full-screen preview, Google Drive style) ---------- */
.lightbox { position:fixed; inset:0; background:rgba(8,9,13,.94); z-index:100; display:flex; flex-direction:column; }
.lb-top { display:flex; align-items:center; gap:1rem; padding:.8rem 1.2rem; }
.lb-x { background:none; border:none; color:var(--muted); font-size:1.25rem; line-height:1; }
.lb-x:hover { color:var(--text); }
.lb-title { font-family:var(--display); font-size:1rem; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.lb-actions { display:flex; gap:.5rem; }
.lb-actions .iconbtn { text-decoration:none; }
.lb-stage { flex:1; display:grid; place-items:center; padding:.5rem 2rem 2rem; min-height:0; }
.lb-stage img { max-width:100%; max-height:85vh; object-fit:contain; border-radius:6px; }
.lb-stage .plyr:not(.plyr--fullscreen-active) { width:min(1100px,100%); max-height:85vh; }
.lb-stage video { max-width:100%; }
.lb-stage .plyr:not(.plyr--fullscreen-active) video { max-height:85vh; }
.lb-stage iframe { width:min(1000px,100%); height:85vh; border:none; background:#fff; border-radius:8px; }
/* fullscreen fills the screen 100% (no crop). Covers every path: Plyr native fullscreen,
   Plyr fallback, our JS enterfullscreen hook (body.is-plyr-fs), and whole-page F11 fullscreen. */
.plyr--fullscreen-active, .plyr:fullscreen,
body.is-plyr-fs .plyr, :fullscreen .lb-stage .plyr { width:100% !important; height:100% !important; max-height:none !important; }
.plyr--fullscreen-active .plyr__video-wrapper, .plyr:fullscreen .plyr__video-wrapper,
body.is-plyr-fs .plyr__video-wrapper, :fullscreen .lb-stage .plyr__video-wrapper { width:100% !important; height:100% !important; padding-bottom:0 !important; aspect-ratio:auto !important; }
.plyr--fullscreen-active video, .plyr:fullscreen video,
body.is-plyr-fs .plyr video, :fullscreen .lb-stage video { width:100% !important; height:100% !important; max-height:none !important; object-fit:contain !important; }
.lb-stage .prep, .lb-stage .noprev { color:var(--muted); }
.lb-nav { position:fixed; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:rgba(30,36,48,.7); color:var(--text); font-size:1.6rem; line-height:1; display:grid; place-items:center; z-index:101; }
.lb-nav:hover { border-color:var(--gold); color:var(--gold); }
.lb-nav.prev { left:1.2rem; }
.lb-nav.next { right:1.2rem; }
:root { --plyr-color-main:var(--gold); --plyr-video-background:#000; --plyr-menu-background:#1a1f2a; --plyr-menu-color:#f2f0e9; }

/* share page fills viewport so the drop zone covers the whole area */
#share { min-height:100vh; display:flex; flex-direction:column; }

/* admin: project cards with clear sections */
.proj-card { border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem; margin-bottom:1rem; background:var(--bg-2); }
.proj-card .ph { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; padding-bottom:.7rem; border-bottom:1px solid var(--line); margin-bottom:.6rem; }
.proj-card .ph b { font-family:var(--display); font-size:1.05rem; }
.proj-card .ph { cursor:pointer; user-select:none; }
.proj-card.collapsed { padding-bottom:0; }
.proj-card.collapsed .ph { padding-bottom:0; border-bottom:none; margin-bottom:0; }
.proj-card.collapsed .pc-body { display:none; }
.pc-caret { color:var(--faint); font-size:.78rem; transition:transform .15s; display:inline-block; }
.proj-card:not(.collapsed) .pc-caret { transform:rotate(90deg); }
.pc-count { font-size:.72rem; color:var(--faint); font-family:var(--mono); }
.sec-label { font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin:.5rem 0 .3rem; }
.add-member { background:var(--surface); border:1px dashed var(--line); border-radius:9px; padding:.7rem; margin-top:.7rem; }
.add-member .al { font-size:.78rem; color:var(--muted); margin-bottom:.45rem; }

/* selection action bar */
.selbar { position:fixed; bottom:1.3rem; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:.7rem;
  background:var(--glass); backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%); border:1px solid var(--accent); border-radius:999px; padding:.5rem .7rem .5rem 1.1rem;
  box-shadow:var(--shadow); z-index:88; }
.selbar span { font-size:.86rem; color:var(--text); }

/* proxy preparing spinner */
.prep { text-align:center; color:var(--muted); padding:2.5rem 1.5rem; }
.prep .note { font-size:.92rem; margin-top:1rem; }
.prep .note .sub { font-size:.78rem; color:var(--faint); }
.spinner { width:42px; height:42px; border:3px solid var(--surface-2); border-top-color:var(--gold); border-radius:50%; margin:0 auto; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* folder browser (source add) */
.browse { border:1px solid var(--line); border-radius:10px; overflow:hidden; margin:.6rem 0; }
.browse .bhead { display:flex; align-items:center; gap:.5rem; padding:.5rem .7rem; background:var(--surface-2); font-family:var(--mono); font-size:.76rem; color:var(--muted); }
.browse .blist { max-height:240px; overflow:auto; }
.browse .brow { display:flex; align-items:center; gap:.5rem; padding:.5rem .7rem; border-top:1px solid var(--line-soft); cursor:pointer; font-size:.88rem; }
.browse .brow:hover { background:var(--surface); }

/* admin appearance / settings tab */
.set-grid { display:flex; flex-direction:column; gap:1.3rem; }
.preset-row { display:flex; gap:.5rem; flex-wrap:wrap; }
.accent-row { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.accent-row input[type=color] { width:46px; height:34px; padding:2px; border:1px solid var(--line); border-radius:9px; background:var(--surface); cursor:pointer; }
.sw-row { display:flex; gap:.45rem; flex-wrap:wrap; }
.sw { width:24px; height:24px; border-radius:50%; border:1px solid rgba(255,255,255,.25); cursor:pointer; padding:0; transition:transform .1s; }
.sw:hover { transform:scale(1.15); }
input[type=range] { width:100%; accent-color:var(--gold); margin:.1rem 0 .2rem; }
.wall-prev { width:128px; height:78px; border-radius:12px; border:1px solid var(--line); background:var(--surface-2) center/cover no-repeat; }
.set-foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.4rem; padding-top:1rem; border-top:1px solid var(--line); flex-wrap:wrap; }

/* mobile projects bottom-sheet list */
.sheet-projs { display:flex; flex-direction:column; gap:.45rem; }
.sheet-proj { display:flex; align-items:center; gap:.6rem; width:100%; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:.72rem .85rem; color:var(--text); font-size:.95rem; }
.sheet-proj.active { border-color:var(--accent); color:var(--accent); background:rgba(var(--accent-rgb),.1); }
.sheet-proj .role { margin-left:auto; font-size:.66rem; font-family:var(--mono); color:var(--faint); }

/* HDD scan results (detect -> pick which to add) */
.scan-row { display:flex; align-items:center; gap:.6rem; padding:.5rem 0; border-bottom:1px solid var(--line-soft); }
.scan-row .scan-name { flex:1; min-width:0; }
.scan-row.off { opacity:.65; }

/* ============ RESPONSIVE ============ */
/* Mobile bottom tab bar (iOS-style) — hidden on desktop, shown <640px */
.tabbar { display:none; }
.tabbar button { background:none; border:none; color:var(--faint); display:flex; flex-direction:column;
  align-items:center; gap:3px; font-size:.62rem; font-weight:500; padding:.35rem .4rem; flex:1;
  border-radius:12px; transition:color .14s; }
.tabbar button.active { color:var(--accent); }
.tabbar button .svgi { width:23px; height:23px; }

/* ----- Tablet / iPad (641–1024px): slimmer sidebar, denser grid ----- */
@media (min-width:641px) and (max-width:1024px){
  .shell { grid-template-columns:210px minmax(0,1fr); }
  .sidebar { padding:1.1rem .8rem; }
  .grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.85rem; }
  .topbar, .subbar { padding-left:1rem; padding-right:1rem; }
  .content { padding:1rem; }
}

/* ----- Phone (<640px): off-canvas sidebar -> bottom tab bar ----- */
@media (max-width:640px){
  body { padding:0; } /* full-bleed on phones — no floating frame */
  .shell { grid-template-columns:minmax(0,1fr); height:100vh; border-radius:0; border:none; box-shadow:none; }
  .sidebar { display:none; }
  .tabbar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:45;
    justify-content:space-around; align-items:center;
    padding:.4rem .3rem calc(.4rem + env(safe-area-inset-bottom));
    background:var(--glass); backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%);
    border-top:1px solid var(--line); }
  .topbar { padding:.55rem .8rem; gap:.5rem; padding-top:calc(.55rem + env(safe-area-inset-top)); }
  .topbar .segmented, .topbar .spacer { display:none; }
  .search { min-width:0; max-width:none; }
  .search input { padding-top:.5rem; padding-bottom:.5rem; }
  .subbar { padding:.55rem .8rem; }
  .content { padding:.85rem .85rem calc(80px + env(safe-area-inset-bottom)); }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
  /* full-screen-ish dialogs as bottom sheets */
  .overlay { align-items:flex-end; padding:0; }
  .modal { width:100%; max-width:100%; max-height:90vh; border-radius:22px 22px 0 0; animation:sheetUp .26s cubic-bezier(.16,1,.3,1); }
  .modal.sm { width:100%; }
  .modal-foot { padding-bottom:calc(1rem + env(safe-area-inset-bottom)); }
  .uprog { left:.7rem; right:.7rem; bottom:calc(78px + env(safe-area-inset-bottom)); width:auto; }
  .selbar { bottom:calc(80px + env(safe-area-inset-bottom)); width:max-content; max-width:92vw; }
  .toast { bottom:calc(82px + env(safe-area-inset-bottom)); }
  .lb-nav.prev { left:.4rem; } .lb-nav.next { right:.4rem; }
  .lb-stage { padding:.5rem .6rem 1rem; }
}
@keyframes sheetUp { from { transform:translateY(100%); } to { transform:translateY(0); } }

@media (prefers-reduced-motion: reduce){
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}