/* ============================================================
   VAULT 85 — Fallout Vault-Tec shelter terminal theme
   Pip-Boy phosphor + Vault-Tec gold, riveted steel, scanlines
   ============================================================ */
:root{
  --bg:#0a0e0b; --bg2:#0e1512;
  --steel:#12211a; --steel2:#182f24; --steelhi:#20402f;
  --edge:#295c40; --edge2:#17362a;
  --green:#54f299; --green-dim:#39b06a; --glow:rgba(84,242,153,.55);
  --gold:#ffb43a; --gold-dim:#c98a24; --gold-glow:rgba(255,180,58,.5);
  --hazard:#f2c94c; --red:#ff6f5e; --red-edge:#5c241d;
  --txt:#cdeuf; --txt:#c9f2da; --muted:#6f9c82;
  --mono:'Cascadia Mono','Consolas','DejaVu Sans Mono',ui-monospace,monospace;
  --disp:'Bahnschrift','DIN Alternate','Arial Narrow',var(--mono);
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{
  min-height:100%;
  margin:0; color:var(--txt); font-family:var(--mono); font-size:14px; line-height:1.45;
  background:
    radial-gradient(120% 90% at 50% -10%, #12241a 0%, var(--bg2) 45%, var(--bg) 100%);
  background-attachment:fixed;
  text-shadow:0 0 1px rgba(84,242,153,.15);
}
/* CRT scanlines + vignette + flicker overlay */
body::before{
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply; opacity:.5; animation:flick 5s infinite steps(60);
}
body::after{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  box-shadow:inset 0 0 180px 40px rgba(0,0,0,.7), inset 0 0 40px rgba(0,0,0,.5);
  background:radial-gradient(130% 130% at 50% 50%, transparent 60%, rgba(0,0,0,.35) 100%);
}
@keyframes flick{0%,97%{opacity:.5}98%{opacity:.38}99%{opacity:.55}100%{opacity:.5}}
a{color:var(--green);text-decoration:none} a:hover{text-shadow:0 0 8px var(--glow)}

/* ---- buttons: chunky industrial ---- */
button{font-family:var(--mono);cursor:pointer}
.btn{
  background:linear-gradient(180deg,var(--steel2),var(--steel));
  color:var(--green); border:1px solid var(--edge); border-radius:5px;
  padding:7px 13px; font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.5);
  transition:.12s;
}
.btn:hover{border-color:var(--green);color:#eafff2;box-shadow:0 0 10px var(--glow),inset 0 1px 0 rgba(255,255,255,.08)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,var(--gold),var(--gold-dim));color:#20140a;border-color:var(--gold);font-weight:700;text-shadow:none}
.btn.primary:hover{box-shadow:0 0 12px var(--gold-glow)}
.btn.danger{color:var(--red);border-color:var(--red-edge);background:linear-gradient(180deg,#241614,#1a0f0e)}
.btn.danger:hover{border-color:var(--red);box-shadow:0 0 10px rgba(255,111,94,.4)}
.btn.sm{padding:4px 9px;font-size:11px}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none}
.inp,input,select,textarea{font-family:var(--mono)}
.inp{background:#07110c;border:1px solid var(--edge);border-radius:5px;color:var(--txt);padding:8px 10px;font-size:13px}

/* ---- login: vault door terminal ---- */
.login{
  max-width:420px; margin:11vh auto; padding:34px 30px 30px; position:relative;
  background:linear-gradient(180deg,var(--steel2),var(--steel));
  border:1px solid var(--edge); border-radius:14px;
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 60px rgba(0,0,0,.7), inset 0 0 40px rgba(0,0,0,.4);
}
/* vault-door cog above the title */
.login::before{
  content:''; display:block; width:104px; height:104px; margin:0 auto 14px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #1c3527 0 26%, transparent 27%),
    conic-gradient(from 0deg, var(--steelhi) 0 6deg, var(--steel) 6deg 15deg) ,
    radial-gradient(circle at 50% 50%, transparent 0 60%, var(--gold-dim) 61% 66%, transparent 67%);
  border:4px solid var(--edge);
  box-shadow:0 0 24px var(--gold-glow), inset 0 0 20px rgba(0,0,0,.6);
  animation:spin 26s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.login h1{
  font-family:var(--disp); color:var(--gold); letter-spacing:8px; text-align:center;
  margin:0 0 2px; font-size:34px; font-weight:700;
  text-shadow:0 0 16px var(--gold-glow),0 2px 0 #000;
}
.login .sub{text-align:center;color:var(--green-dim);margin:0 0 22px;font-size:11px;letter-spacing:3px;text-transform:uppercase}
.login .sub::before{content:'◉ VAULT-TEC APPROVED · '}
.login input{width:100%;padding:11px 12px;margin:7px 0;background:#07110c;border:1px solid var(--edge);border-radius:6px;color:var(--green);letter-spacing:2px}
.login input:focus{outline:none;border-color:var(--green);box-shadow:0 0 10px var(--glow)}
.login .btn{width:100%;margin-top:12px;padding:11px}
.err{color:var(--red);font-size:12px;text-align:center;min-height:16px;letter-spacing:1px}

/* ---- top bar: steel header w/ rivets + status LED ---- */
.top{display:flex;align-items:center;gap:18px;padding:11px 20px;position:relative;
  background:linear-gradient(180deg,#16281e,#0e1a14);border-bottom:2px solid var(--edge);
  box-shadow:0 2px 10px rgba(0,0,0,.5)}
.top::before,.top::after{content:'';position:absolute;top:8px;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#3a5f48,#0c1a12);box-shadow:0 1px 1px #000}
.top::before{left:8px} .top::after{right:8px}
.brand{font-family:var(--disp);color:var(--gold);font-weight:700;letter-spacing:5px;font-size:19px;
  text-shadow:0 0 14px var(--gold-glow);display:flex;align-items:center;gap:9px}
.brand::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--green);
  box-shadow:0 0 10px var(--glow);animation:led 2.2s infinite}
@keyframes led{0%,100%{opacity:1}50%{opacity:.35}}
.top .who{margin-left:auto;color:var(--muted);font-size:12px;letter-spacing:1px}
.quota{font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.quota .bar{height:9px;background:#07110c;border:1px solid var(--edge2);border-radius:2px;overflow:hidden;width:180px;margin-top:3px;
  background-image:repeating-linear-gradient(90deg,transparent 0 8px, rgba(0,0,0,.5) 8px 10px)}
.quota .fill{height:100%;background:linear-gradient(90deg,var(--green-dim),var(--green));box-shadow:0 0 8px var(--glow)}

/* ---- tabs: indicator plates ---- */
.tabs{display:flex;gap:5px;padding:10px 18px 0;flex-wrap:wrap}
.tab{padding:8px 16px;border:1px solid var(--edge2);border-bottom:none;border-radius:7px 7px 0 0;
  background:linear-gradient(180deg,var(--steel),#0c1712);color:var(--muted);font-size:12px;letter-spacing:1.5px;text-transform:uppercase}
.tab:hover{color:var(--green)}
.tab.active{background:linear-gradient(180deg,var(--steel2),var(--bg));color:var(--gold);border-color:var(--gold-dim);
  box-shadow:0 -2px 12px var(--gold-glow)}
.tab.admin{color:var(--hazard)} .tab.admin.active{color:var(--hazard)}
.subtabs{display:flex;gap:5px;padding:12px 18px 0}
.subtab{padding:5px 12px;border:1px solid var(--edge2);border-radius:5px;background:var(--steel);color:var(--muted);font-size:11px;letter-spacing:1px;text-transform:uppercase}
.subtab.active{color:var(--green);border-color:var(--green);box-shadow:0 0 8px var(--glow)}
.main{padding:18px 20px}
h3{font-family:var(--disp);color:var(--gold);letter-spacing:2px;font-weight:700;margin:16px 0 8px;font-size:15px;
  border-left:3px solid var(--gold-dim);padding-left:9px}
.crumbs{color:var(--muted);font-size:13px;margin-bottom:12px;letter-spacing:1px}
.crumbs a{cursor:pointer}

/* ---- drop zone ---- */
.drop{border:2px dashed var(--edge);border-radius:10px;padding:18px;text-align:center;color:var(--muted);
  margin-bottom:14px;font-size:12px;letter-spacing:1px;text-transform:uppercase;background:rgba(20,40,30,.25)}
.drop.over{border-color:var(--green);color:var(--green);background:rgba(84,242,153,.08);box-shadow:inset 0 0 20px var(--glow)}
.main.drop-surface{min-height:calc(100vh - 132px);position:relative;transition:box-shadow .12s,background-color .12s}
.main.drop-surface.drop-over{background-color:rgba(84,242,153,.055);box-shadow:inset 0 0 0 3px var(--green),inset 0 0 38px var(--glow)}
.main.drop-surface.drop-over .drop{border-color:var(--green);color:var(--green);background:rgba(84,242,153,.1)}
.folder-toolbar{margin-bottom:10px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.share-write-note{font-size:11px;padding:8px 12px;margin-bottom:10px}

/* ---- cards: riveted steel panels ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.card{position:relative;padding:12px 12px 10px;border-radius:9px;
  background:linear-gradient(180deg,var(--steel2),var(--steel));
  border:1px solid var(--edge2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 6px rgba(0,0,0,.45);
  background-image:radial-gradient(circle at 7px 7px,rgba(255,255,255,.05) 1px,transparent 2px),radial-gradient(circle at calc(100% - 7px) 7px,rgba(255,255,255,.05) 1px,transparent 2px)}
.card:hover{border-color:var(--edge)}
.card .nm{font-size:13px;word-break:break-all;margin-bottom:4px;color:var(--txt)}
.card .meta{font-size:11px;color:var(--muted);letter-spacing:.5px}
.card.folder{cursor:pointer}
.card.folder .nm{color:var(--gold)}
.card .row,.row{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap;align-items:center}
.icon{font-size:20px}

/* AI-tab rows */
.row{align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border:1px solid var(--edge2);border-radius:8px;margin:6px 0;
  background:linear-gradient(180deg,var(--steel2),var(--steel))}
.row .sub,.sub{font-size:11.5px;color:var(--muted);letter-spacing:.4px}
.ops{display:flex;gap:6px;flex:none}

/* uploads dock */
.up-list{position:fixed;right:16px;bottom:16px;width:min(460px,calc(100vw - 32px));z-index:10000;isolation:isolate;pointer-events:auto}
.up-tools{position:sticky;top:0;z-index:2;padding:10px;background:linear-gradient(180deg,#10241a,#09140e);border:1px solid var(--edge);border-radius:9px;box-shadow:0 5px 16px rgba(0,0,0,.75)}
.up-tools-title{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--green);font-size:12px}
.up-summary{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.up-tools-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}
.up-tools-actions .btn{width:100%;margin:0;white-space:normal;line-height:1.25}
.up-item{background:linear-gradient(180deg,var(--steel2),var(--steel));border:1px solid var(--edge);border-radius:8px;padding:9px;margin-top:7px;font-size:12px;box-shadow:0 4px 14px rgba(0,0,0,.6)}
.up-item .bar{height:6px;background:#07110c;border-radius:3px;margin-top:5px;overflow:hidden}
.up-item .fill{height:100%;background:linear-gradient(90deg,var(--green-dim),var(--green));width:0;box-shadow:0 0 8px var(--glow)}

/* ---- modal: heavy steel hatch ---- */
.mask{position:fixed;inset:0;background:rgba(2,6,4,.72);display:flex;align-items:center;justify-content:center;z-index:11000;backdrop-filter:blur(2px)}
.dlg{position:relative;background:linear-gradient(180deg,var(--steel2),var(--steel));border:2px solid var(--gold-dim);border-radius:12px;
  padding:22px;max-width:540px;width:92%;max-height:86vh;overflow:auto;
  box-shadow:0 0 0 1px #000,0 0 60px rgba(0,0,0,.8),inset 0 0 30px rgba(0,0,0,.4)}
.dlg h3{margin:0 0 14px;border:0;padding:0;color:var(--gold);text-shadow:0 0 12px var(--gold-glow)}
.dlg input,.dlg select{width:100%;padding:10px;background:#07110c;border:1px solid var(--edge);border-radius:6px;color:var(--txt);margin:6px 0}
.dlg input:focus,.dlg select:focus{outline:none;border-color:var(--green);box-shadow:0 0 8px var(--glow)}
.dlg .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.chk{display:flex;align-items:center;gap:9px;padding:7px 4px;border-bottom:1px solid var(--edge2)}
.chk:hover{background:rgba(84,242,153,.05)}
.viewer video,.viewer audio,.viewer img{max-width:100%;max-height:70vh;display:block;margin:auto;border-radius:6px}
.viewer pre{white-space:pre-wrap;font-size:12px;max-height:70vh;overflow:auto;background:#07110c;padding:12px;border-radius:6px;border:1px solid var(--edge2)}

/* ---- states ---- */
.empty{color:var(--muted);text-align:center;padding:44px;font-size:12px;letter-spacing:2px;text-transform:uppercase}
.empty::before{content:'▁▂▃ ';color:var(--edge)} .empty::after{content:' ▃▂▁';color:var(--edge)}
/* hazard-stripe warning */
.warn{color:var(--hazard);padding:11px 14px 11px 16px;border-radius:6px;font-size:13px;margin-bottom:14px;letter-spacing:.5px;
  background:rgba(60,50,16,.5);border:1px solid #5a4a20;
  border-left:8px solid;border-image:repeating-linear-gradient(45deg,var(--hazard) 0 8px,#111 8px 16px) 1}
.linkbox{background:#07110c;border:1px solid var(--edge);border-radius:6px;padding:9px;font-size:11px;word-break:break-all;margin-top:8px;color:var(--green)}
table{width:100%;border-collapse:collapse;font-size:13px}
td,th{padding:8px;border-bottom:1px solid var(--edge2);text-align:left}
th{color:var(--gold);text-transform:uppercase;letter-spacing:1px;font-size:11px;font-family:var(--disp)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#07110c}
::-webkit-scrollbar-thumb{background:var(--steelhi);border-radius:6px;border:2px solid #07110c}
::selection{background:var(--gold);color:#000}

/* ---- upload progress (accurate) ---- */
.up-item .upname{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;word-break:break-all}
.up-item .upfilename{min-width:0;flex:1}
.up-item .up-right{display:flex;align-items:center;gap:7px;flex:none}
.up-item .pct{color:var(--gold,#ffb43a);font-weight:700;font-variant-numeric:tabular-nums}
.up-item .updetail{margin-top:4px;color:#9adfb9;font-size:11px;font-variant-numeric:tabular-nums}
.up-item.failed{border-color:#8a3030;box-shadow:0 0 10px rgba(200,60,60,.25)}
.up-item.failed .updetail{color:#ff9c9c}
.up-item .retry{border:0;background:transparent;padding:0;color:var(--gold,#ffb43a);text-decoration:underline;cursor:pointer;font:inherit}
.up-cancel{border:1px solid #7a3030;border-radius:5px;background:#2a0d0d;color:#ffadad;padding:3px 7px;font-size:10px;cursor:pointer;white-space:nowrap}
.up-cancel:hover:not(:disabled){background:#451313;border-color:#b34a4a}
.up-cancel:disabled{opacity:.55;cursor:default}

/* up-list: 多数アップロード時にスクロール可能に(見切れ防止) */
.up-list{max-height:calc(100vh - 24px);overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
.up-list::-webkit-scrollbar{width:8px}
.up-list::-webkit-scrollbar-thumb{background:var(--green-dim,#2e7d54);border-radius:4px}
@media(max-width:600px){
  .up-list{right:8px;bottom:8px;width:calc(100vw - 16px);max-height:calc(100vh - 16px)}
  .up-tools-actions{grid-template-columns:1fr}
}

/* preview thumbnails */
.card .thumb{display:block;width:100%;height:120px;object-fit:cover;border-radius:6px;margin:7px 0 2px;border:1px solid var(--edge2,#1d3527);cursor:pointer;background:#050b07}
.card .thumb:hover{box-shadow:0 0 10px var(--glow,rgba(84,242,153,.35))}

/* share dialog: checkbox rows fixed (input width:100% override) + compact grid */
.dlg input[type=checkbox]{width:16px;height:16px;padding:0;margin:0;flex:0 0 auto;accent-color:var(--green,#54f299)}
.chk-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0 16px;max-height:55vh;overflow-y:auto;padding-right:4px}
.chk{cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.transfer-section{margin-top:14px;padding-top:8px;border-top:1px solid var(--edge2)}
.transfer-section h4{margin:0 0 5px;color:var(--green);font-size:13px;letter-spacing:.5px}
.transfer-confirm-list{margin:8px 0 12px;padding-left:24px;max-height:36vh;overflow:auto}
.transfer-confirm-list li{margin:5px 0;word-break:break-word}
.transfer-retained-note{margin-top:12px}

/* ---- share groups ---- */
.gtheme-green{--gaccent:#54f299}.gtheme-gold{--gaccent:#ffb43a}.gtheme-amber{--gaccent:#f2c94c}
.gtheme-red{--gaccent:#ff6b5e}.gtheme-crimson{--gaccent:#e2537f}.gtheme-blue{--gaccent:#5ea2ff}
.gtheme-indigo{--gaccent:#7d7dff}.gtheme-purple{--gaccent:#b06bff}.gtheme-teal{--gaccent:#39d8c8}
.gtheme-cyan{--gaccent:#4fd7ff}.gtheme-pink{--gaccent:#ff8ad4}.gtheme-steel{--gaccent:#9fb4c7}
.gcard{border-left:4px solid var(--gaccent);cursor:pointer}
.gcard:hover{box-shadow:0 0 12px color-mix(in srgb, var(--gaccent) 45%, transparent)}
.gcard .nm{color:var(--gaccent)}
.gwrap{border:1px solid color-mix(in srgb, var(--gaccent) 55%, #0a140e);border-radius:10px;padding:14px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--gaccent) 9%, transparent), transparent 55%)}
.ghead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.gtitle{margin:0;color:var(--gaccent);text-shadow:0 0 12px color-mix(in srgb, var(--gaccent) 55%, transparent);font-size:19px;letter-spacing:.06em}
.gmembers{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 12px}
.chip{padding:3px 10px;border:1px solid color-mix(in srgb, var(--gaccent) 55%, transparent);border-radius:999px;font-size:11px;color:var(--gaccent);background:rgba(0,0,0,.25)}
.chip.owner{background:color-mix(in srgb, var(--gaccent) 22%, transparent);font-weight:700}
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:6px 0}
.swatch{height:44px;border-radius:8px;cursor:pointer;border:2px solid rgba(255,255,255,.12);background:var(--gaccent);box-shadow:inset 0 0 14px rgba(0,0,0,.35)}
.swatch:hover{transform:scale(1.06)}
.swatch.sel{border-color:#fff;box-shadow:0 0 12px var(--gaccent)}
/* グループ内は画面全体をそのグループのテーマ色に染める (body.ingroup + gtheme-X) */
body.ingroup{
  background:radial-gradient(120% 90% at 50% -10%,
    color-mix(in srgb, var(--gaccent) 26%, #0e1512) 0%,
    color-mix(in srgb, var(--gaccent) 12%, var(--bg2)) 45%,
    color-mix(in srgb, var(--gaccent) 6%, var(--bg)) 100%);
  background-attachment:fixed;
  text-shadow:0 0 1px color-mix(in srgb, var(--gaccent) 22%, transparent);
}
body.ingroup .top{background:linear-gradient(180deg,
    color-mix(in srgb, var(--gaccent) 20%, #16281e),
    color-mix(in srgb, var(--gaccent) 9%, #0e1a14));
  border-bottom-color:color-mix(in srgb, var(--gaccent) 60%, var(--edge))}
body.ingroup .top::before,body.ingroup .top::after{
  background:radial-gradient(circle at 35% 35%, var(--gaccent), #0c1a12);
  box-shadow:0 0 8px color-mix(in srgb, var(--gaccent) 60%, transparent)}
body.ingroup .brand{color:var(--gaccent);text-shadow:0 0 14px color-mix(in srgb, var(--gaccent) 55%, transparent)}
body.ingroup .brand::before{background:var(--gaccent);box-shadow:0 0 10px color-mix(in srgb, var(--gaccent) 65%, transparent)}
body.ingroup .tab.active{color:var(--gaccent);border-color:color-mix(in srgb, var(--gaccent) 60%, var(--gold-dim));
  box-shadow:0 -2px 12px color-mix(in srgb, var(--gaccent) 45%, transparent)}
body.ingroup .subtab.active{color:var(--gaccent);border-color:var(--gaccent);
  box-shadow:0 0 8px color-mix(in srgb, var(--gaccent) 50%, transparent)}
body.ingroup h3{color:var(--gaccent)}
body.ingroup .quota .fill{background:linear-gradient(90deg,
  color-mix(in srgb, var(--gaccent) 55%, #0a140e), var(--gaccent))}

/* ---- file search ---- */
.search-panel{margin:0 0 14px;padding:11px;border:1px solid var(--edge2);border-radius:9px;
  background:linear-gradient(180deg,rgba(20,43,31,.88),rgba(8,19,13,.88));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.search-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.search-panel input{width:100%;min-width:0;padding:9px 10px;background:#07110c;border:1px solid var(--edge);border-radius:6px;color:var(--txt)}
.search-panel input:focus{outline:none;border-color:var(--green);box-shadow:0 0 8px var(--glow)}
.search-filters{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;margin-top:8px}
.search-filters label{display:grid;gap:3px;min-width:125px;flex:1;color:var(--muted);font-size:10px;letter-spacing:.5px}
.search-filters label:last-of-type{min-width:100px}
.search-status{min-height:15px;margin-top:6px;color:var(--muted);font-size:11px}
.search-results{display:grid;gap:10px;max-height:62vh;overflow:auto;padding-right:3px}
.result-section{border:1px solid var(--edge2);border-radius:8px;background:rgba(4,12,8,.42);overflow:hidden}
.result-section>summary{cursor:pointer;padding:9px 11px;color:var(--green);font-size:12px;letter-spacing:.5px;background:rgba(84,242,153,.045)}
.search-result-row{padding:10px 11px;border-top:1px solid var(--edge2)}
.search-result-row:first-of-type{border-top:0}
.search-result-name{color:var(--txt);font-size:12px;word-break:break-word}
.search-result-path{margin-top:4px;color:var(--muted);font-size:10px;word-break:break-all}
.search-result-meta{margin-top:3px;color:#86bda0;font-size:10px}
.search-result-row .actions{margin-top:7px;justify-content:flex-start}

/* ---- completed upload result ---- */
.upload-results{display:grid;gap:10px;max-height:61vh;overflow:auto;padding-right:3px}
.upload-result-summary{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;padding:9px;border:1px solid var(--edge2);border-radius:7px;background:#07110c;font-size:12px}
.result-ok{color:var(--green)}
.result-fail{color:#ff9c9c}
.result-cancel{color:var(--muted)}
.upload-result-row{padding:10px 11px;border-top:1px solid var(--edge2)}
.upload-result-row:first-of-type{border-top:0}
.upload-result-row.failed{border-left:3px solid #8a3030}
.upload-result-row.deleted{opacity:.55}
.upload-result-name{font-size:12px;word-break:break-word;color:var(--txt)}
.upload-result-detail{margin-top:4px;color:var(--muted);font-size:10px;word-break:break-word}
.upload-result-row .actions{margin-top:7px;justify-content:flex-start}

/* ---- user guide / tutorial videos ---- */
.help-subtabs{padding:0 0 14px}
.help-subtabs .subtab{cursor:pointer;font-family:var(--mono)}
.help-intro{max-width:1100px;margin:0 0 15px;padding:17px 19px;border:1px solid var(--gold-dim);border-radius:10px;
  background:linear-gradient(135deg,rgba(255,180,58,.1),rgba(12,27,19,.88));box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.help-intro h2{margin:0 0 7px;color:var(--gold);font-family:var(--disp);font-size:20px;letter-spacing:2px}
.help-intro p{margin:0;color:var(--txt);line-height:1.75}
.help-guide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:1100px}
.help-guide>.help-intro{grid-column:1/-1;margin-bottom:0}
.help-section{min-width:0;padding:14px 16px;border:1px solid var(--edge2);border-radius:9px;
  background:linear-gradient(180deg,rgba(24,47,36,.9),rgba(10,25,17,.92))}
.help-section h3{margin:0 0 9px}
.help-steps,.help-points{margin:0;padding-left:22px}
.help-steps li,.help-points li{margin:7px 0;line-height:1.72}
.help-steps li::marker{color:var(--gold);font-weight:700}
.help-points li::marker{color:var(--green)}
.help-note{margin:11px 0 0;padding:9px 11px;border-left:3px solid var(--gold);background:rgba(255,180,58,.07);color:#e8d4ad;line-height:1.65}
.help-video-list{display:grid;gap:16px;max-width:1100px}
.help-video-card{padding:15px;border:1px solid var(--edge2);border-radius:10px;background:linear-gradient(180deg,var(--steel2),var(--steel))}
.help-video-card h3{margin:0 0 6px}
.help-video-card p{margin:0 0 11px;color:var(--muted)}
.help-video-card video{display:block;width:100%;max-height:72vh;aspect-ratio:16/9;background:#000;border:1px solid var(--edge);border-radius:8px}

@media(max-width:600px){
  .search-main{grid-template-columns:1fr}
  .search-main .btn{width:100%}
  .search-filters{display:grid;grid-template-columns:1fr 1fr}
  .search-filters label{min-width:0}
  .search-filters label:last-of-type{grid-column:1/-1;min-width:0}
  .search-result-row .actions,.upload-result-row .actions{display:grid;grid-template-columns:1fr 1fr}
  .search-result-row .actions .btn,.upload-result-row .actions .btn{width:100%;white-space:normal}
  .help-subtabs{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .help-subtabs .subtab{width:100%;padding:8px 6px}
  .help-guide{grid-template-columns:1fr}
  .help-guide>.help-intro{grid-column:auto}
  .help-intro{padding:14px}
  .help-section{padding:12px}
  .help-video-card{padding:10px}
}