/* LAN Control — Drive (Google Drive layout) */
.gd, .gd-layer { --g-bg:#f8fafd; --g-surface:#fff; --g-card:#f0f4f9; --g-card-h:#e1e5ea; --g-search:#e9eef6; --g-search-h:#dde3ea;
  --g-ink:#1f1f1f; --g-ink2:#444746; --g-muted:#5f6368; --g-line:#e1e3e1; --g-line2:#c4c7c5; --g-outline:#747775;
  --g-sel:#c2e7ff; --g-sel-ink:#001d35; --g-hover:rgba(68,71,70,.08); --g-press:rgba(68,71,70,.12); --g-blue:#0b57d0; --g-blue-soft:#d3e3fd;
  --g-snack:#303030; --g-snack-ink:#f2f2f2; --g-snack-act:#a8c7fa; --g-menu:#fff; --g-shadow:0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);
  --g-shadow-lg:0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3); --g-folder:#444746; --g-scrim:rgba(0,0,0,.4); --g-green:#146c2e; --g-red:#b3261e; --g-drop:rgba(11,87,208,.06);
  font-family:Montserrat, Roboto, -apple-system, "Segoe UI", sans-serif; }
@media (prefers-color-scheme: dark) {
  .gd, .gd-layer { --g-bg:#1b1b1b; --g-surface:#131314; --g-card:#282a2c; --g-card-h:#333537; --g-search:#282a2c; --g-search-h:#333537;
    --g-ink:#e3e3e3; --g-ink2:#c4c7c5; --g-muted:#a8abae; --g-line:#333537; --g-line2:#444746; --g-outline:#8e918f;
    --g-sel:#004a77; --g-sel-ink:#c2e7ff; --g-hover:rgba(227,227,227,.08); --g-press:rgba(227,227,227,.12); --g-blue:#a8c7fa; --g-blue-soft:#0842a0;
    --g-snack:#e3e3e3; --g-snack-ink:#1f1f1f; --g-snack-act:#0b57d0; --g-menu:#2d2f31; --g-shadow:0 1px 3px rgba(0,0,0,.6), 0 4px 8px 3px rgba(0,0,0,.3);
    --g-shadow-lg:0 4px 8px 3px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.6); --g-folder:#c4c7c5; --g-scrim:rgba(0,0,0,.6); --g-green:#6dd58c; --g-red:#f2b8b5; --g-drop:rgba(168,199,250,.08); }
}
:where(.gd, .gd-layer) * { box-sizing:border-box; }
.gd [hidden], .gd-layer [hidden] { display:none !important; }
:where(.gd, .gd-layer) button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; box-shadow:none; height:auto; }
:where(.gd, .gd-layer) svg { display:block; width:24px; height:24px; flex:none; fill:currentColor; }
:where(.gd, .gd-layer) :is(input, textarea, select) { font:inherit; color:var(--g-ink); }
/* undo the console's table look inside Drive */
.gd .gl th { text-transform:none; letter-spacing:normal; }
.gd .gl tbody tr:hover { background:none; }
.gd-card { container-type:inline-size; container-name:gdcard; }
.g-ic { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--g-ink2); flex:none; transition:background .15s; position:relative; }
.g-ic:hover { background:var(--g-hover); }
.g-ic:active { background:var(--g-press); }
.g-ic.sm { width:32px; height:32px; }
.g-ic.sm svg { width:20px; height:20px; }
.g-ic.on { background:var(--g-sel); color:var(--g-sel-ink); }

/* ── Frame ── */
.gd { display:flex; height:calc(100dvh - var(--hdr, 0px)); background:var(--g-bg); color:var(--g-ink); font-size:14px; position:relative; overflow:hidden; }
.gd-rail { width:256px; flex:none; display:flex; flex-direction:column; padding:8px 0 12px; overflow-y:auto; }
.gd-logo { display:flex; align-items:center; gap:10px; height:56px; padding:0 16px 0 20px; font-size:22px; color:var(--g-ink2); }
.gd-logo svg { width:36px; height:36px; }
.gd-new { margin:4px 0 16px 8px; align-self:flex-start; height:56px; padding:0 20px 0 16px; border-radius:16px; background:var(--g-surface) ; box-shadow:var(--g-shadow);
  display:flex; align-items:center; gap:12px; font-weight:500 ; font-size:14px; color:var(--g-ink) ; transition:box-shadow .2s, background .2s; }
.gd-new:hover { box-shadow:var(--g-shadow-lg); background:color-mix(in srgb, var(--g-surface) 92%, var(--g-blue)) ; }
.gd-new svg { width:24px; height:24px; }
.gd-nav { display:flex; flex-direction:column; padding-right:16px; }
.gd-nav a { display:flex; align-items:center; gap:14px; height:32px; padding:0 12px 0 18px; margin-left:0; border-radius:0 16px 16px 0; border-top-left-radius:16px; border-bottom-left-radius:16px; margin-left:8px;
  color:var(--g-ink); font-weight:500; font-size:14px; cursor:pointer; white-space:nowrap; transition:background .15s; position:relative; }
.gd-nav a svg { width:20px; height:20px; color:var(--g-ink2); }
.gd-nav a:hover { background:var(--g-hover); }
.gd-nav a.on { background:var(--g-sel); color:var(--g-sel-ink); font-weight:600; }
.gd-nav a.on svg { color:var(--g-sel-ink); }
.gd-nav a.drop { background:var(--g-blue-soft); outline:2px solid var(--g-blue); }
.gd-nav .n { margin-left:auto; font-size:12px; color:var(--g-muted); font-weight:500; }
.gd-nav hr { border:0; height:12px; margin:0; }
.gd-store { padding:16px 24px 8px 26px; color:var(--g-ink2); font-size:13px; }
.gd-store .h { display:flex; align-items:center; gap:14px; color:var(--g-ink); font-weight:500; margin-bottom:10px; }
.gd-store .h svg { width:20px; height:20px; color:var(--g-ink2); }
.gd-bar-u { height:4px; border-radius:2px; background:var(--g-line); overflow:hidden; margin-bottom:8px; }
.gd-bar-u i { display:block; height:100%; background:var(--g-blue); border-radius:2px; transition:width .6s; }
.gd-bar-u i.hi { background:#b3261e; }
.gd-store .sub { color:var(--g-muted); font-size:12px; margin-top:4px; }

.gd-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.gd-top { height:64px; flex:none; display:flex; align-items:center; gap:8px; padding:8px 16px 8px 0; }
.gd-top .menu { display:none; }
.gd-search { flex:1; max-width:720px; height:48px; border-radius:24px; background:var(--g-search); display:flex; align-items:center; padding:0 4px; position:relative; transition:background .15s, box-shadow .15s; }
.gd-search:hover { background:var(--g-search-h); }
.gd-search.focus { background:var(--g-surface); box-shadow:var(--g-shadow); border-radius:24px 24px 0 0; }
.gd-search.focus.nores { border-radius:24px; }
.gd-search input { flex:1; border:0; outline:0; background:none; height:100%; font-size:16px; padding:0 8px; min-width:0; }
.gd-search input::placeholder { color:var(--g-ink2); }
.gd-sugg { position:absolute; left:0; right:0; top:48px; background:var(--g-surface); border-radius:0 0 24px 24px; box-shadow:0 4px 6px rgba(0,0,0,.2); padding:8px 0 12px; z-index:40; border-top:1px solid var(--g-line); max-height:60vh; overflow:auto; }
.gd-sugg button { display:flex; align-items:center; gap:14px; width:100%; padding:8px 20px; text-align:left; }
.gd-sugg button:hover, .gd-sugg button.on { background:var(--g-hover); }
.gd-sugg button svg { width:20px; height:20px; }
.gd-sugg .nm { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gd-sugg .nm b { font-weight:600; }
.gd-sugg .loc { color:var(--g-muted); font-size:12.5px; white-space:nowrap; }
.gd-sugg .all { color:var(--g-blue); font-weight:500; padding-left:54px; }
.gd-top-r { margin-left:auto; display:flex; align-items:center; gap:4px; }

.gd-body { flex:1; min-height:0; display:flex; gap:16px; padding:0 16px 16px 0; }
.gd-card { flex:1; min-width:0; background:var(--g-surface); border-radius:16px; display:flex; flex-direction:column; overflow:hidden; position:relative; }
.gd-head { display:flex; align-items:center; gap:8px; min-height:64px; padding:8px 12px 0 16px; flex:none; }
.gd-title { flex:1; min-width:0; display:flex; align-items:center; gap:2px; font-size:24px; line-height:32px; color:var(--g-ink); overflow:hidden; }
.gd-title h1 { font:inherit; margin:0; padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gd-crumb { display:inline-flex; align-items:center; height:36px; padding:0 8px; border-radius:18px; white-space:nowrap; color:var(--g-ink2); max-width:200px; flex:0 1 auto; min-width:40px; cursor:pointer; }
.gd-crumb span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.gd-crumb:hover { background:var(--g-hover); }
.gd-crumb.cur { color:var(--g-ink); max-width:none; min-width:72px; flex:0 1 auto; gap:2px; padding-right:4px; }
.gd-crumb.drop { background:var(--g-blue-soft); }
.gd-title .sep { color:var(--g-ink2); width:24px; height:24px; flex:none; }
.gd-crumb-all { display:none; }
@container gdcard (max-width: 820px) {
  .gd-title .gd-crumb:not(.cur):not(.gd-crumb-all), .gd-title .sep.anc { display:none; }
  .gd-title .gd-crumb-all { display:inline-flex; min-width:36px; }
}
.g-av svg { width:15px; height:15px; }
.gd-seg { display:flex; border:1px solid var(--g-outline); border-radius:16px; height:32px; overflow:hidden; }
.gd-seg button { width:52px; display:flex; align-items:center; justify-content:center; gap:4px; color:var(--g-ink2); }
.gd-seg button + button { border-left:1px solid var(--g-outline) ; }
.gd-seg button svg { width:18px; height:18px; }
.gd-seg button.on { background:var(--g-sel); color:var(--g-sel-ink); }
.gd-seg button .ck { display:none; }
.gd-seg button.on .ck { display:block; }

.gd-filters { display:flex; gap:8px; padding:12px 16px 8px 24px; flex:none; min-height:56px; align-items:center; overflow-x:auto; scrollbar-width:none; }
.gd-chip { height:32px; border:1px solid var(--g-outline) ; border-radius:8px; padding:0 8px 0 16px ; display:flex; align-items:center; gap:6px; font-weight:500; color:var(--g-ink2); white-space:nowrap; transition:background .15s; }
.gd-chip:hover { background:var(--g-hover); }
.gd-chip svg { width:18px; height:18px; }
.gd-chip.on { background:var(--g-sel); color:var(--g-sel-ink); border-color:transparent ; padding-left:8px ; }
.gd-chip .x { display:none; }
.gd-chip.on .x { display:block; }
.gd-chip.on .dd { display:none; }
.gd-chip.on > svg:first-child { display:block; }
.gd-selbar { display:flex; align-items:center; gap:4px; height:40px; border-radius:24px; background:var(--g-search); padding:0 8px 0 4px; flex:1; min-width:0; }
.gd-selbar .n { font-weight:500; margin:0 8px 0 4px; white-space:nowrap; }
.gd-selbar .g-ic { width:36px; height:36px; }
.gd-selbar .g-ic svg { width:20px; height:20px; }
.gd-selbar .sp { flex:1; }

.gd-content { flex:1; overflow:auto; position:relative; padding:0 12px 24px 16px; outline:none; }
.gd-content.dropping::after { content:""; position:absolute; inset:0; border:2px solid var(--g-blue); border-radius:0 0 16px 16px; background:var(--g-drop); pointer-events:none; }
.gd-droptip { position:absolute; left:50%; bottom:32px; transform:translateX(-50%); background:var(--g-blue); color:#fff; border-radius:24px; padding:12px 24px; box-shadow:var(--g-shadow-lg); z-index:30; display:flex; align-items:center; gap:10px; white-space:nowrap; pointer-events:none; font-weight:500; }
@media (prefers-color-scheme: dark) { .gd-droptip { color:#062e6f; } }
.gd-droptip svg { width:22px; height:22px; }

/* list */
.gl { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; }
.gl th { position:sticky; top:0; z-index:2; background:var(--g-surface); height:48px; text-align:left; font-weight:500; color:var(--g-ink); padding:0 8px; border-bottom:1px solid var(--g-line); white-space:nowrap; font-size:14px; }
.gl th .s { display:inline-flex; align-items:center; gap:4px; height:32px; padding:0 8px; margin-left:-8px; border-radius:16px; }
.gl th .s:hover { background:var(--g-hover); }
.gl th .s svg { width:18px; height:18px; color:var(--g-ink2); }
.gl td { height:48px; padding:0 8px; border-bottom:1px solid var(--g-line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--g-ink2); }
.gl tr.r { cursor:default; user-select:none; }
.gl tr.r:hover td { background:var(--g-hover); }
.gl tr.r.sel td { background:var(--g-sel); color:var(--g-sel-ink); border-bottom-color:transparent; }
.gl tr.r.drop td { background:var(--g-blue-soft); }
.gl tr.r.cut { opacity:.5; }
.gl td:first-child, .gl th:first-child { padding-left:16px; }
.gl tr.r td:first-child { border-radius:0; }
.gl .nm { display:flex; align-items:center; gap:16px; color:var(--g-ink); font-weight:500; min-width:0; }
.gl .nm .t { overflow:hidden; text-overflow:ellipsis; }
.gl .nm .gfi { width:20px; height:20px; }
.gl .nm .t small { display:none; }
.gl .nm .badge { width:16px; height:16px; color:var(--g-ink2); flex:none; }
.gl tr.sel .nm, .gl tr.sel .badge { color:var(--g-sel-ink); }
.gl .g-who { display:flex; align-items:center; gap:10px; }
.g-av { width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:11px; font-weight:600; color:#fff; background:#100069; }
.g-av.wav { background:#1faa5b; } .g-av.sys { background:var(--g-ink2); color:var(--g-surface); } .g-av.cl { background:#ffa904; }
.gl .acts { display:flex; align-items:center; justify-content:flex-end; gap:0; visibility:hidden; }
.gl tr.r:hover .acts, .gl tr.r.sel .acts, .gl .acts .more { visibility:visible; }
.gl .acts .g-ic { width:32px; height:32px; }
.gl .acts .g-ic svg { width:20px; height:20px; }
.gl .grp td { height:auto; padding:24px 16px 8px; font-weight:500; color:var(--g-ink); border-bottom:0; font-size:14px; background:transparent ; }
.gl .c-owner { width:190px; } .gl .c-date { width:170px; } .gl .c-size { width:110px; } .gl .c-loc { width:210px; } .gl .c-act { width:176px; } .gl .c-reason { width:240px; }
.gl th.c-act, .gl td.c-act { padding-right:4px; }
.gl .loc { display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:4px 10px 4px 6px; border-radius:16px; }
.gl .loc:hover { background:var(--g-hover); }
.gl .loc svg { width:18px; height:18px; color:var(--g-folder); }
.gl .loc span { overflow:hidden; text-overflow:ellipsis; }

/* grid */
.gg-h { display:flex; align-items:center; justify-content:space-between; padding:16px 8px 12px; font-weight:500; color:var(--g-ink); }
.gg-sort { display:flex; align-items:center; gap:2px; }
.gg-sort button { height:32px; padding:0 10px; border-radius:16px; display:flex; align-items:center; gap:4px; font-weight:500; }
.gg-sort button:hover { background:var(--g-hover); }
.gg-sort svg { width:18px; height:18px; }
.gg { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px; padding:0 8px; }
.gg-f { height:48px; border-radius:12px; background:var(--g-card); display:flex; align-items:center; gap:12px; padding:0 4px 0 16px; cursor:default; user-select:none; font-weight:500; transition:background .12s; min-width:0; }
.gg-f:hover { background:var(--g-card-h); }
.gg-f .t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gg-f .gfi { width:24px; height:24px; }
.gg-c { border-radius:12px; background:var(--g-card); display:flex; flex-direction:column; cursor:default; user-select:none; transition:background .12s; min-width:0; }
.gg-c:hover { background:var(--g-card-h); }
.gg-c .hd { height:48px; display:flex; align-items:center; gap:12px; padding:0 4px 0 16px; font-weight:500; }
.gg-c .hd .t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gg-c .hd .gfi { width:20px; height:20px; }
.gg-c .pv { margin:0 8px; aspect-ratio:1.36; border-radius:8px; background:var(--g-surface); display:grid; place-items:center; overflow:hidden; position:relative; }
.gg-c .pv img { width:100%; height:100%; object-fit:cover; display:block; }
.gg-c .pv .big { width:64px; height:64px; }
.gg-c .pv .play { position:absolute; width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; display:grid; place-items:center; }
.gg-c .ft { display:flex; align-items:center; gap:8px; padding:10px 16px 12px; color:var(--g-ink2); font-size:12.5px; min-width:0; }
.gg-c .ft span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gg-f.sel, .gg-c.sel { background:var(--g-sel); color:var(--g-sel-ink); }
.gg-f.drop { background:var(--g-blue-soft); outline:2px solid var(--g-blue); }
.gg .g-ic { width:32px; height:32px; }
.gg .g-ic svg { width:20px; height:20px; }
.gg-sec { padding:20px 8px 12px; font-weight:500; }

/* home */
.gh-hero { text-align:center; font-size:28px; line-height:36px; padding:24px 0 20px; color:var(--g-ink); }
.gh-sec { display:flex; align-items:center; gap:4px; padding:8px 0 12px; font-weight:500; font-size:16px; cursor:pointer; user-select:none; }
.gh-sec svg { transition:transform .2s; }
.gh-sec.closed svg { transform:rotate(-90deg); }
.gh-folders { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; margin-bottom:12px; }
.gh-folders .gg-f { height:auto; padding:12px 4px 12px 16px; }
.gh-folders .gg-f .t small { display:block; font-weight:400; color:var(--g-muted); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; }

/* empty */
.g-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:56px 24px; color:var(--g-ink2); min-height:60%; }
.g-empty .art { width:180px; height:140px; margin-bottom:24px; }
.g-empty .art svg { width:100%; height:100%; }
.g-empty b { font-size:22px; font-weight:400; color:var(--g-ink); margin-bottom:8px; line-height:1.3; }
.g-empty p { margin:0; max-width:420px; line-height:1.5; }
.g-banner { display:flex; align-items:center; gap:16px; margin:4px 8px 8px; padding:10px 12px 10px 20px; background:var(--g-card); border-radius:8px; color:var(--g-ink2); }
.g-banner span { flex:1; }
.g-tbtn { height:40px; padding:0 12px; border-radius:20px; color:var(--g-blue) ; font-weight:500 ; white-space:nowrap; }
.g-tbtn:hover { background:color-mix(in srgb, var(--g-blue) 8%, transparent) ; }
.g-fbtn { height:40px; padding:0 24px; border-radius:20px; background:var(--g-blue) ; color:var(--g-surface) ; font-weight:500 ; white-space:nowrap; }
.g-fbtn:hover { box-shadow:var(--g-shadow); }
.g-fbtn[disabled], .g-tbtn[disabled] { opacity:.38; pointer-events:none; }
.g-obtn { height:40px; padding:0 24px; border-radius:20px; border:1px solid var(--g-outline) ; color:var(--g-blue) ; font-weight:500 ; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; }
.g-obtn:hover { background:color-mix(in srgb, var(--g-blue) 8%, transparent) ; }
.g-obtn svg { width:18px; height:18px; }

/* details */
.gd-det { width:360px; flex:none; background:var(--g-surface); border-radius:16px; display:flex; flex-direction:column; overflow:hidden; }
.gd-det-h { display:flex; align-items:center; gap:12px; padding:16px 8px 8px 20px; min-height:64px; }
.gd-det-h .gfi { width:24px; height:24px; }
.gd-det-h b { flex:1; font-size:18px; font-weight:400; line-height:24px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word; }
.gd-tabs { display:flex; border-bottom:1px solid var(--g-line); padding:0 12px; }
.gd-tabs button { flex:1; height:48px; font-weight:500; color:var(--g-ink2); position:relative; }
.gd-tabs button.on { color:var(--g-blue); }
.gd-tabs button.on::after { content:""; position:absolute; left:30%; right:30%; bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--g-blue); }
.gd-det-b { flex:1; overflow-y:auto; padding:16px 20px 24px; }
.gd-det-pv { aspect-ratio:1.5; border-radius:12px; background:var(--g-card); display:grid; place-items:center; overflow:hidden; margin-bottom:24px; }
.gd-det-pv img { width:100%; height:100%; object-fit:contain; }
.gd-det-pv .big { width:72px; height:72px; }
.gd-det h3 { font-size:16px; font-weight:500; margin:0 0 14px; color:var(--g-ink); }
.gd-det .acc { margin-bottom:24px; }
.gd-det .acc .g-who { display:flex; align-items:center; gap:10px; margin-bottom:12px; color:var(--g-ink2); }
.gd-det .acc .g-who .g-av { width:32px; height:32px; font-size:13px; }
.gd-det dl { margin:0; }
.gd-det dt { font-size:12px; color:var(--g-ink2); margin-bottom:2px; font-weight:500; }
.gd-det dd { margin:0 0 16px; color:var(--g-ink); word-break:break-word; }
.gd-det dd a { color:var(--g-blue); cursor:pointer; }
.gd-det textarea { width:100%; min-height:64px; border:1px solid var(--g-outline); border-radius:4px; background:transparent; padding:10px 12px; resize:vertical; font-size:14px; outline:none; }
.gd-det textarea:focus { border:2px solid var(--g-blue); padding:9px 11px; }
.gd-act { display:flex; gap:12px; margin-bottom:18px; }
.gd-act .g-av { width:32px; height:32px; font-size:13px; }
.gd-act b { font-weight:500; }
.gd-act small { display:block; color:var(--g-muted); font-size:12px; margin-top:2px; }
.gd-act-day { font-size:13px; color:var(--g-ink2); font-weight:500; margin:6px 0 14px; }
.gd-det-empty { text-align:center; color:var(--g-ink2); padding:40px 16px; }
.gd-det-empty svg { width:120px; height:120px; margin:0 auto 16px; color:var(--g-line2); }

/* layers: menus, dialogs, snackbar, uploads, preview */
.gd-layer { position:fixed; inset:0; z-index:300; pointer-events:none; color:var(--g-ink); font-size:14px; }
.gd-layer > * { pointer-events:auto; }
.g-menu { position:fixed; min-width:260px; max-width:340px; background:var(--g-menu); border-radius:4px; box-shadow:var(--g-shadow-lg); padding:8px 0; z-index:10; animation:g-pop .12s ease-out; max-height:calc(100dvh - 16px); overflow-y:auto; }
@keyframes g-pop { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }
.g-menu button { display:flex; align-items:center; gap:14px; width:100%; height:32px; padding:0 16px; text-align:left; white-space:nowrap; }
.g-menu button:hover, .g-menu button.hl { background:var(--g-hover); }
.g-menu button svg { width:20px; height:20px; color:var(--g-ink2); }
.g-menu button .k { margin-left:auto; color:var(--g-muted); font-size:12.5px; padding-left:24px; }
.g-menu button .chev { margin-left:auto; width:20px; height:20px; }
.g-menu button[disabled] { opacity:.38; pointer-events:none; }
.g-menu button.on { font-weight:600; }
.g-menu button .blank { width:20px; }
.g-menu hr { border:0; border-top:1px solid var(--g-line); margin:8px 0; }
.g-menu .lbl { padding:6px 16px 4px; font-size:12px; color:var(--g-muted); font-weight:500; }
.g-scrim { position:fixed; inset:0; background:var(--g-scrim); display:grid; place-items:center; padding:16px; animation:g-fade .15s; }
@keyframes g-fade { from { opacity:0; } }
.g-dlg { background:var(--g-menu); border-radius:28px; padding:24px; width:100%; max-width:400px; box-shadow:var(--g-shadow-lg); animation:g-pop .15s ease-out; max-height:calc(100dvh - 32px); display:flex; flex-direction:column; }
.g-dlg.wide { max-width:560px; }
.g-dlg h2 { font-size:24px; font-weight:400; margin:0 0 16px; line-height:32px; overflow:hidden; text-overflow:ellipsis; }
.g-dlg p { color:var(--g-ink2); margin:0 0 16px; line-height:1.5; }
.g-dlg .btns { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; align-items:center; }
.g-dlg .btns .sp { flex:1; }
.g-field { position:relative; margin-bottom:8px; }
.g-field input, .g-field textarea, .g-field select { width:100%; height:48px; border:1px solid var(--g-outline); border-radius:4px; padding:0 14px; background:transparent; outline:none; font-size:15px; }
.g-field textarea { height:auto; min-height:80px; padding:12px 14px; resize:vertical; }
.g-field select { appearance:none; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23747775'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 10px center; padding-right:36px; }
.g-field select option { background:var(--g-menu); color:var(--g-ink); }
.g-field input:focus, .g-field textarea:focus, .g-field select:focus { border:2px solid var(--g-blue); padding-left:13px; }
.g-field label { display:block; font-size:12px; color:var(--g-ink2); margin:0 0 6px 2px; font-weight:500; }
.g-check { display:flex; align-items:center; gap:10px; margin:8px 0; cursor:pointer; color:var(--g-ink2); }
.g-check input { width:18px; height:18px; accent-color:var(--g-blue); }
.g-mv-crumbs { display:flex; align-items:center; gap:2px; margin:-4px 0 8px -8px; flex-wrap:wrap; }
.g-mv-crumbs button { height:32px; padding:0 8px; border-radius:16px; color:var(--g-ink2); font-weight:500; }
.g-mv-crumbs button:hover { background:var(--g-hover); }
.g-mv-crumbs svg { width:18px; height:18px; color:var(--g-muted); }
.g-mv-list { border-top:1px solid var(--g-line); border-bottom:1px solid var(--g-line); height:280px; overflow-y:auto; margin:0 -24px; }
.g-mv-list .mvr { display:flex; align-items:center; gap:16px; height:48px; padding:0 8px 0 24px; cursor:pointer; }
.g-mv-list .mvr:hover { background:var(--g-hover); }
.g-mv-list .mvr.on { background:var(--g-sel); color:var(--g-sel-ink); }
.g-mv-list .mvr.dis { opacity:.4; pointer-events:none; }
.g-mv-list .mvr .t { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.g-mv-list .mvr svg { width:20px; height:20px; }
.g-mv-list .none { padding:40px; text-align:center; color:var(--g-muted); }
.g-snack { position:fixed; left:24px; bottom:24px; background:var(--g-snack); color:var(--g-snack-ink); border-radius:4px; min-height:48px; padding:6px 8px 6px 16px; display:flex; align-items:center; gap:8px; box-shadow:var(--g-shadow-lg);
  max-width:min(560px, calc(100vw - 32px)); animation:g-up .2s ease-out; }
@keyframes g-up { from { transform:translateY(20px); opacity:0; } }
.g-snack span { flex:1; padding-right:8px; }
.g-snack button { color:var(--g-snack-act); font-weight:500; height:36px; padding:0 12px; border-radius:18px; }
.g-snack button.x { color:var(--g-snack-ink); width:36px; padding:0; display:grid; place-items:center; }
.g-snack button:hover { background:rgba(255,255,255,.08); }
.g-up { position:fixed; right:24px; bottom:0; width:360px; background:var(--g-menu); border-radius:16px 16px 0 0; box-shadow:var(--g-shadow-lg); overflow:hidden; animation:g-up .2s; }
.g-up-h { display:flex; align-items:center; gap:4px; height:56px; padding:0 8px 0 20px; background:var(--g-card); }
.g-up-h b { flex:1; font-weight:500; font-size:15px; }
.g-up-sub { display:flex; align-items:center; justify-content:space-between; padding:10px 20px; background:var(--g-card); border-top:1px solid var(--g-line); color:var(--g-ink2); font-size:13px; }
.g-up-l { max-height:280px; overflow-y:auto; }
.g-up-r { display:flex; align-items:center; gap:14px; height:52px; padding:0 16px 0 20px; }
.g-up-r:hover { background:var(--g-hover); }
.g-up-r .gfi { width:22px; height:22px; }
.g-up-r .t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.g-up-r .st { width:24px; height:24px; display:grid; place-items:center; flex:none; }
.g-up-r .st .ok { color:var(--g-green); }
.g-up-r .st .bad { color:var(--g-red); }
.g-up-r .g-err { display:block; font-size:12px; color:var(--g-red); }
.g-ring { width:22px; height:22px; transform:rotate(-90deg); }
.g-ring circle { fill:none; stroke-width:3; }
.g-ring .bg { stroke:var(--g-line); }
.g-ring .fg { stroke:var(--g-blue); stroke-linecap:round; transition:stroke-dashoffset .2s; }
.g-up.min .g-up-l, .g-up.min .g-up-sub { display:none; }

.g-pv { position:fixed; inset:0; background:rgba(0,0,0,.9); display:flex; flex-direction:column; color:#e3e3e3; animation:g-fade .15s; }
.g-pv-top { height:64px; display:flex; align-items:center; gap:8px; padding:0 12px; background:linear-gradient(rgba(0,0,0,.6), transparent); flex:none; }
.g-pv-top .g-ic { color:#e3e3e3; }
.g-pv-top .g-ic:hover { background:rgba(255,255,255,.1); }
.g-pv-top .nm { flex:1; min-width:0; display:flex; align-items:center; gap:12px; font-size:16px; }
.g-pv-top .nm span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.g-pv-top .nm .gfi { width:22px; height:22px; }
.g-pv-top .g-obtn { color:#a8c7fa ; border-color:#8e918f ; height:36px; padding:0 16px; }
.g-pv-body { flex:1; min-height:0; display:grid; place-items:center; padding:0 72px 24px; position:relative; }
.g-pv-body > img, .g-pv-body > video { position:absolute; inset:0; margin:auto; max-width:calc(100% - 144px); max-height:calc(100% - 24px); object-fit:contain; border-radius:2px; box-shadow:0 8px 40px rgba(0,0,0,.5); }
.g-pv-body iframe { width:min(1000px, 100%); height:100%; border:0; background:#fff; border-radius:2px; }
.g-pv-body .g-txt { width:min(900px, 100%); height:100%; overflow:auto; background:#fff; color:#1f1f1f; border-radius:2px; padding:32px 40px; margin:0; font:13px/1.55 ui-monospace, Menlo, monospace; white-space:pre-wrap; word-break:break-word; }
.g-pv-body .csv { width:min(1100px, 100%); height:100%; overflow:auto; background:#fff; color:#1f1f1f; border-radius:2px; }
.g-pv-body .csv table { border-collapse:collapse; font-size:13px; }
.g-pv-body .csv td { border:1px solid #e1e3e1; padding:4px 10px; white-space:nowrap; }
.g-pv-body .csv tr:first-child td { background:#f0f4f9; font-weight:600; position:sticky; top:0; }
.g-pv-body audio { width:min(480px, 90%); }
.g-pv-none { background:#3c4043; border-radius:12px; padding:36px 40px; text-align:center; max-width:420px; }
.g-pv-none .gfi { width:64px; height:64px; margin:0 auto 16px; }
.g-pv-none b { display:block; font-size:18px; font-weight:400; margin-bottom:8px; }
.g-pv-none p { color:#c4c7c5; margin:0 0 20px; }
.g-pv-nav { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:rgba(0,0,0,.5) ; color:#fff ; display:grid; place-items:center; }
.g-pv-nav:hover { background:rgba(60,60,60,.9) ; }
.g-pv-nav.l { left:12px; } .g-pv-nav.r { right:12px; }
.g-pv-audio { display:flex; flex-direction:column; align-items:center; gap:28px; }
.g-pv-audio .gfi { width:120px; height:120px; }

/* file-type icon colours */
.gfi.folder { color:var(--g-folder); } .gfi.pdf { color:#ea4335; } .gfi.image { color:#ea4335; } .gfi.video { color:#ea4335; } .gfi.audio { color:#ea4335; }
.gfi.doc { color:#4285f4; } .gfi.sheet { color:#0f9d58; } .gfi.slides { color:#f4b400; } .gfi.archive { color:var(--g-ink2); } .gfi.text { color:#4285f4; } .gfi.other { color:#8f9194; }
.gfi.client { color:#100069; } .gfi.wai { color:#1faa5b; }
@media (prefers-color-scheme: dark) { .gfi.client { color:#a79dff; } }
.gl tr.sel .gfi.folder, .gg-f.sel .gfi.folder { color:var(--g-sel-ink); }

.gd-fab { display:none; }
.gd-scrim { display:none; }

/* ── Tablets ── */
@media (max-width: 1100px) {
  .gd-rail { width:220px; }
  .gd-det { position:absolute; right:16px; top:64px; bottom:16px; z-index:20; box-shadow:var(--g-shadow-lg); }
}
@container gdcard (max-width: 1080px) { .gl .c-loc { display:none; } .gl .c-owner { width:150px; } .gl .c-reason { width:200px; } }
@container gdcard (max-width: 900px) { .gl .c-act { width:48px; } .gl .acts .g-ic:not(.more) { display:none; } .gl .c-date { width:120px; } .gl .c-size { width:90px; } }
@container gdcard (max-width: 760px) { .gl .c-owner, .gl .c-reason { display:none; } }
@container gdcard (max-width: 520px) {
  .gl thead { display:none; }
  .gl .c-date, .gl .c-size { display:none; }
  .gl .c-act { width:52px; }
  .gl td { height:60px; }
  .gl .nm .t small.mob { display:block; font-weight:400; color:var(--g-ink2); font-size:12.5px; }
  .gd-filters { padding-left:12px; }
}

/* ── Phones ── */
@media (max-width: 820px) {
  .gd { height:calc(100dvh - var(--hdr, 0px)); }
  .gd-rail { position:fixed; left:0; top:0; bottom:0; z-index:60; width:280px; background:var(--g-surface); box-shadow:var(--g-shadow-lg); transform:translateX(-105%); transition:transform .25s cubic-bezier(.2,.8,.2,1); padding-top:max(8px, env(safe-area-inset-top)); }
  .gd.rail-open .gd-rail { transform:none; }
  .gd.rail-open .gd-scrim { display:block; position:fixed; inset:0; z-index:55; background:var(--g-scrim); }
  .gd-rail .gd-new { display:none; }
  .gd-top { padding:8px 12px; padding-top:max(8px, env(safe-area-inset-top)); height:auto; }
  .gd-top .menu { display:grid; }
  .gd-search { height:44px; }
  .gd-top-r .hide-m { display:none; }
  .gd-body { padding:0; }
  .gd-card { border-radius:16px 16px 0 0; }
  .gd-head { padding:4px 4px 0 8px; min-height:52px; }
  .gd-title { font-size:20px; }
  .gd-title .gd-crumb:not(.cur) { display:none; }
  .gd-title .sep { display:none; }
  .gd-title .back { display:grid; }
  .gd-filters { padding:8px 12px; min-height:48px; }
  .gd-content { padding:0 0 96px; }
  .gl td { height:64px; border-bottom:0; }
  .gl .nm { gap:20px; }
  .gl .nm .gfi { width:24px; height:24px; }
  .gg { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; padding:0 12px; }
  .gh-folders { grid-template-columns:repeat(2, minmax(0, 1fr)); padding:0 12px; }
  .gh-hero { font-size:22px; padding:12px 0; }
  .gh-sec { padding-left:16px; }
  .gd-det { position:fixed; inset:0; top:0; right:0; bottom:0; width:auto; border-radius:0; z-index:70; }
  .gd-fab { display:grid; place-items:center; position:fixed; right:16px; bottom:calc(var(--hdr, 0px) + 16px); width:56px; height:56px; border-radius:16px; background:var(--g-blue-soft) ; color:var(--g-sel-ink) ; box-shadow:var(--g-shadow-lg); z-index:25; }
  @media (prefers-color-scheme: light) { .gd-fab { background:#c2e7ff ; color:#001d35 ; } }
  .g-up { right:0; left:0; width:auto; bottom:var(--hdr, 0px); }
  .g-snack { left:12px; right:12px; bottom:calc(var(--hdr, 0px) + 12px); }
  .g-pv-body { padding:0 0 12px; }
  .g-pv-body > img, .g-pv-body > video { max-width:100%; max-height:calc(100% - 12px); }
  .g-pv-nav { display:none ; }
  .g-pv-top .g-obtn span { display:none; }
  .g-menu { min-width:220px; }
}
@media (min-width: 821px) { .gd-title .back { display:none; } }
@media (prefers-reduced-motion: reduce) { .gd *, .gd-layer * { animation:none ; transition:none ; } }
.gd .gd-search input:focus, .gd-layer .g-field :is(input, textarea, select):focus, .gd .gd-det textarea:focus { box-shadow:none; }