/* =========================================================================
   TR — TR-Cloud
   Design system for a Formula-style racing team's file server.
   Palette: Rosso Corsa red + Giallo Modena gold, on warm carbon-black —
   the actual colours on the car, not a neon dashboard.
   ========================================================================= */

:root{
  /* ---- surfaces (warm carbon, not blue-black) ---------------------- */
  --void:        #0e0c0b;
  --surface-0:   #131110;
  --surface-1:   #1a1715;
  --surface-2:   #221e1b;
  --surface-3:   #2a2521;
  --border:      #362f29;
  --border-soft: #241f1b;

  /* ---- text (warm pearl, not clinical white) ----------------------*/
  --text-1: #f1ece3;
  --text-2: #b2a89c;
  --text-3: #7a7166;

  /* ---- brand / accents: Rosso Corsa + Giallo Modena ---------------*/
  --flame:      #a3182a;              /* Rosso Corsa, desaturated for screen */
  --flame-dim:  rgba(163,24,42,.14);
  --flame-2:    #c02a3a;              /* hover state, still a real red */
  --telemetry:  #c1962f;              /* Giallo Modena gold, used for data/positive states */
  --telemetry-dim: rgba(193,150,47,.14);
  --warn:       #b98a3d;
  --warn-dim:   rgba(185,138,61,.15);
  --danger:     #8f3324;              /* rust/terracotta, distinct from brand red */
  --danger-dim: rgba(143,51,36,.16);
  --violet:     #6f7580;              /* muted graphite-slate, replaces the old neon violet */

  /* ---- type ---------------------------------------------------------*/
  --f-display: 'Big Shoulders Display', 'Inter', sans-serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- misc -----------------------------------------------------*/
  --radius-sm: 8px;
  --radius-md: 13px;
  --radius-lg: 18px;
  --shadow-lift: 0 16px 30px -18px rgba(0,0,0,.55);
  --shadow-card: 0 1px 0 rgba(255,255,255,.02) inset, 0 8px 18px -14px rgba(0,0,0,.6);
  --ease: cubic-bezier(.4,0,.2,1);     /* standard, no overshoot/bounce */
  --sidebar-w: 264px;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration: 180ms !important; animation-iteration-count:1 !important; transition-duration:180ms !important; scroll-behavior:auto !important; }
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(900px 480px at 88% -8%, rgba(163,24,42,.05), transparent 62%),
    var(--void);
  color: var(--text-1);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  min-height:100vh;
}
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; }
::selection{ background: var(--flame); color: var(--text-1); }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--surface-3); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover{ background: #3a332c; }

.eyebrow{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* =========================================================================
   AUTH SHELL (login / register)
   ========================================================================= */
.auth-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
}
@media (max-width: 900px){ .auth-shell{ grid-template-columns: 1fr; } .auth-visual{ display:none; } }

.auth-visual{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(650px 460px at 15% 8%, rgba(163,24,42,.10), transparent 60%),
    linear-gradient(180deg, #100e0d, #0c0b0a);
  border-right:1px solid var(--border-soft);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:56px;
}
.auth-visual .stripes{
  position:absolute; inset:0; opacity:.3;
  background: repeating-linear-gradient(115deg, transparent 0 46px, rgba(255,255,255,.015) 46px 48px);
}

.brandmark{ position:relative; display:flex; align-items:center; gap:12px; }
.brand-logo{ height:36px; width:auto; display:block; filter: drop-shadow(0 3px 10px rgba(0,0,0,.5)); }
.brand-logo-lg{ height:54px; }
.brandmark .word{ font-family: var(--f-display); font-weight:800; font-size:22px; letter-spacing:.02em; }
.brandmark .word small{ display:block; font-family: var(--f-mono); font-size:10px; letter-spacing:.18em; color: var(--text-3); font-weight:500; text-transform:uppercase; }

.auth-visual .pitch{ position:relative; max-width: 480px; }
.auth-visual .pitch h1{
  font-family: var(--f-display); font-weight:800; font-size: 56px; line-height:.98;
  margin: 0 0 18px; letter-spacing:-.01em;
}
.auth-visual .pitch h1 em{ font-style:normal; color: var(--flame-2); }
.auth-visual .pitch p{ color: var(--text-2); font-size:15px; line-height:1.6; margin:0; }

.telemetry-row{ position:relative; display:flex; gap:28px; }
.telemetry-row .stat{ font-family: var(--f-mono); }
.telemetry-row .stat b{ display:block; font-size:22px; color:var(--text-1); }
.telemetry-row .stat span{ font-size:11px; color:var(--text-3); letter-spacing:.08em; text-transform:uppercase; }

.auth-form-wrap{
  display:flex; align-items:center; justify-content:center; padding: 40px 24px;
}
.auth-card{ width:100%; max-width: 380px; animation: riseIn .4s var(--ease) both; }
@keyframes riseIn{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none; } }

.auth-card h2{ font-family: var(--f-display); font-size:30px; font-weight:800; margin:0 0 4px; }
.auth-card .sub{ color: var(--text-2); font-size:13.5px; margin: 0 0 28px; }

.field{ margin-bottom: 16px; }
.field label{ display:block; font-size:12px; color: var(--text-2); margin-bottom:7px; font-weight:600; letter-spacing:.01em; }
.field input, .field select, .field textarea{
  width:100%; background: var(--surface-1); border:1px solid var(--border);
  color: var(--text-1); padding: 11px 13px; border-radius: var(--radius-sm);
  font-size:14px; font-family: var(--f-body); transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.field input::placeholder{ color: var(--text-3); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--flame-2); background: var(--surface-2);
  box-shadow: 0 0 0 3px var(--flame-dim);
}
.field select{ appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a8abb4' stroke-width='1.4' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 13px center; padding-right: 32px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius: var(--radius-sm);
  padding: 11px 18px; font-size:13.5px; font-weight:600; cursor:pointer;
  transition: transform .12s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
  font-family: var(--f-body);
}
.btn:active{ transform: translateY(1px); }
.btn-flame{ background: var(--flame); color:#fff; box-shadow: var(--shadow-card); }
.btn-flame:hover{ background: var(--flame-2); box-shadow: var(--shadow-lift); }
.btn-ghost{ background: var(--surface-1); color: var(--text-1); border-color: var(--border); }
.btn-ghost:hover{ background: var(--surface-2); border-color:#443b32; }
.btn-danger{ background: var(--danger-dim); color: #d97a63; border-color: rgba(143,51,36,.4); }
.btn-danger:hover{ background: rgba(143,51,36,.32); }
.btn-block{ width:100%; }
.btn-sm{ padding: 7px 12px; font-size:12.5px; border-radius:7px; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

.auth-switch{ text-align:center; margin-top:22px; font-size:13px; color: var(--text-2); }
.auth-switch a{ color: var(--flame-2); font-weight:600; }
.auth-switch a:hover{ text-decoration:underline; }

/* =========================================================================
   APP SHELL
   ========================================================================= */
.shell{ display:flex; min-height:100vh; }

.sidebar{
  width: var(--sidebar-w); flex-shrink:0;
  background: linear-gradient(180deg, var(--surface-0), var(--void));
  border-right:1px solid var(--border-soft);
  display:flex; flex-direction:column;
  position: sticky; top:0; height:100vh;
  transition: transform .25s var(--ease);
  z-index: 40;
}
.sidebar-top{ padding: 20px 18px 14px; border-bottom:1px solid var(--border-soft); }
.sidebar-scroll{ flex:1; overflow-y:auto; padding: 14px 12px 10px; }

.nav-section{ margin-bottom: 18px; }
.nav-section .nav-label{ padding: 0 10px 8px; font-family: var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--text-3); }
.nav-item{
  display:flex; align-items:center; gap:11px; padding: 8px 10px; border-radius: 9px;
  color: var(--text-2); font-size:13.5px; font-weight:500; position:relative;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.nav-item svg{ width:17px; height:17px; flex-shrink:0; opacity:.85; }
.nav-item:hover{ background: var(--surface-1); color: var(--text-1); }
.nav-item.active{ background: linear-gradient(90deg, var(--flame-dim), transparent); color: var(--text-1); }
.nav-item.active::before{ content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:3px; height:16px; border-radius:3px; background: var(--flame-2); }
.nav-item .badge-count{
  margin-left:auto; background: var(--flame-2); color:#fff; font-family: var(--f-mono);
  font-size:10.5px; font-weight:700; padding: 1.5px 6px; border-radius: 20px; min-width:18px; text-align:center;
}
.nav-item .badge-count.zero{ display:none; }

.dept-item{ display:flex; flex-direction:column; }
.dept-row{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:9px; color: var(--text-2); font-size:13.3px; transition: background .12s var(--ease), color .12s var(--ease); cursor:pointer; }
.dept-row:hover{ background: var(--surface-1); color: var(--text-1); }
.dept-row.active{ background: var(--surface-1); color: var(--text-1); }
.dept-row .dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.dept-row .name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dept-row .mini-usage{ font-family: var(--f-mono); font-size:10px; color: var(--text-3); }
.dept-row .caret{ width:14px; height:14px; opacity:.5; transition: transform .18s var(--ease); }
.dept-item.open > .dept-row .caret{ transform: rotate(90deg); }
.dept-children{ max-height:0; overflow:hidden; padding-left: 24px; transition: max-height .22s var(--ease); }
.dept-item.open .dept-children{ max-height: 200px; }

.sidebar-bottom{ border-top:1px solid var(--border-soft); padding: 12px; }
.user-pod{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:11px; transition: background .12s; }
.user-pod:hover{ background: var(--surface-1); }
.avatar{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  background: linear-gradient(150deg, var(--surface-3), var(--surface-1));
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-display); font-weight:700; font-size:14px; color: var(--flame-2);
}
.user-pod .who{ flex:1; min-width:0; }
.user-pod .who .uname{ font-size:13px; font-weight:600; color: var(--text-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.role-pill{
  display:inline-block; margin-top:2px; font-family: var(--f-mono); font-size:9.5px; letter-spacing:.05em;
  text-transform:uppercase; padding:1.5px 6px; border-radius:5px; font-weight:600;
}
.role-pill.r-member{ background: var(--surface-2); color: var(--text-2); }
.role-pill.r-dept_head{ background: var(--telemetry-dim); color: var(--telemetry); }
.role-pill.r-captain{ background: var(--warn-dim); color: var(--warn); }
.role-pill.r-server_admin{ background: var(--flame-dim); color: var(--flame-2); }
.pod-actions{ display:flex; gap:2px; }
.icon-btn{ width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; color: var(--text-3); transition: background .12s, color .12s; }
.icon-btn:hover{ background: var(--surface-2); color: var(--text-1); }
.icon-btn svg{ width:15px; height:15px; }

/* -------- main column ---------------------------------------------- */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  position: sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:16px;
  padding: 16px 30px; background: rgba(14,12,11,.75); backdrop-filter: blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.topbar .crumb{ font-family: var(--f-mono); font-size:11px; color: var(--text-3); letter-spacing:.06em; text-transform:uppercase; margin-bottom:3px; }
.topbar h1{ font-family: var(--f-display); font-weight:800; font-size:24px; margin:0; letter-spacing:-.01em; }
.topbar .spacer{ flex:1; }
.menu-toggle{ display:none; }

.pool-chip{
  display:flex; align-items:center; gap:9px; background: var(--surface-1); border:1px solid var(--border);
  padding: 6px 12px 6px 8px; border-radius: 30px;
}
.ring{ width:26px; height:26px; }
.pool-chip .txt{ font-family: var(--f-mono); font-size:11px; color: var(--text-2); line-height:1.2; }
.pool-chip .txt b{ color: var(--text-1); }

.bell-wrap{ position:relative; }
.bell-btn{ width:38px; height:38px; border-radius:10px; background: var(--surface-1); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; position:relative; transition: background .12s, border-color .12s; }
.bell-btn:hover{ background: var(--surface-2); }
.bell-btn svg{ width:17px; height:17px; color: var(--text-2); }
.bell-dot{ position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px; border-radius:20px; background: var(--flame-2); color:#fff; font-family: var(--f-mono); font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow: 0 0 0 2px var(--surface-0); }
.bell-dot.hidden{ display:none; }

.notif-panel{
  position:absolute; right:0; top:calc(100% + 10px); width: 360px; max-height: 440px;
  background: var(--surface-1); border:1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift); overflow:hidden; display:flex; flex-direction:column;
  opacity:0; transform: translateY(-6px); pointer-events:none;
  transition: opacity .15s var(--ease), transform .15s var(--ease);
}
.notif-panel.show{ opacity:1; transform:none; pointer-events:auto; }
.notif-head{ display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom:1px solid var(--border-soft); }
.notif-head strong{ font-family: var(--f-display); font-size:15px; font-weight:800; }
.notif-head a{ font-size:11.5px; color: var(--flame-2); font-weight:600; }
.notif-list{ overflow-y:auto; flex:1; }
.notif-row{ display:flex; gap:10px; padding: 12px 16px; border-bottom:1px solid var(--border-soft); transition: background .12s; }
.notif-row:hover{ background: var(--surface-2); }
.notif-row .dot2{ width:7px; height:7px; border-radius:50%; margin-top:6px; flex-shrink:0; background: var(--flame-2); }
.notif-row.read .dot2{ background: transparent; }
.notif-row .body{ flex:1; min-width:0; }
.notif-row .msg{ font-size:12.8px; color: var(--text-1); line-height:1.4; }
.notif-row .when{ font-family: var(--f-mono); font-size:10.5px; color: var(--text-3); margin-top:4px; }
.notif-empty{ padding: 40px 20px; text-align:center; color: var(--text-3); font-size:12.5px; }

.content{ flex:1; padding: 28px 30px 60px; animation: fadeUp .35s var(--ease) both; }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }

/* =========================================================================
   FOLDER GRID (Paddock)
   ========================================================================= */
.folder-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap:18px; }
.folder-card{
  background: var(--surface-1); border:1px solid var(--border); border-radius: var(--radius-md);
  padding: 18px 16px 16px; cursor:pointer; position:relative; overflow:hidden;
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  animation: cardIn .35s var(--ease) both;
}
.folder-card:nth-child(n){ animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes cardIn{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }
.folder-card:hover{ transform: translateY(-3px); border-color:#453c33; box-shadow: var(--shadow-card); background: var(--surface-2); }
.folder-card:active, .folder-card.opening{ transform: scale(.98); }
.folder-card .ficon{ width:52px; height:40px; margin-bottom:14px; position:relative; }
.folder-card .ficon svg{ width:100%; height:100%; }
.folder-card .fname{ font-family: var(--f-display); font-weight:700; font-size:16px; margin:0 0 3px; letter-spacing:-.01em; }
.folder-card .fmeta{ font-family: var(--f-mono); font-size:10.5px; color: var(--text-3); margin-bottom:12px; }
.folder-card .container-tag{ font-family: var(--f-mono); font-size:9.5px; color: var(--telemetry); letter-spacing:.06em; text-transform:uppercase; }

/* progress bars everywhere ------------------------------------------ */
.bar{ height:6px; border-radius:20px; background: var(--surface-3); overflow:hidden; position:relative; }
.bar-fill{
  height:100%; border-radius:20px; width: calc(var(--pct, 0) * 1%);
  background: linear-gradient(90deg, var(--telemetry), #96702a);
  transition: width .6s var(--ease);
}
.bar[data-level="warn"] .bar-fill{ background: linear-gradient(90deg, var(--warn), #93692f); }
.bar[data-level="danger"] .bar-fill{ background: linear-gradient(90deg, var(--danger), #6b271c); }
.bar-row{ display:flex; align-items:center; justify-content:space-between; font-family: var(--f-mono); font-size:10px; color: var(--text-3); margin-top:6px; }
.bar-row b{ color: var(--text-2); font-weight:600; }

.ring-svg circle{ transition: stroke-dashoffset .8s var(--ease); }

/* =========================================================================
   PANELS / CARDS / TABLES
   ========================================================================= */
.panel{ background: var(--surface-1); border:1px solid var(--border); border-radius: var(--radius-md); padding:22px; }
.panel + .panel{ margin-top:18px; }
.panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:18px; }
.panel-head h2{ font-family: var(--f-display); font-size:19px; font-weight:800; margin:0 0 3px; }
.panel-head p{ margin:0; color: var(--text-3); font-size:12.5px; }

.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
@media (max-width: 860px){ .grid-2{ grid-template-columns:1fr; } }

.filerow{
  display:flex; align-items:center; gap:14px; padding: 12px 10px; border-radius:10px;
  transition: background .12s; border-bottom:1px solid var(--border-soft);
}
.filerow:last-child{ border-bottom:none; }
.filerow:hover{ background: var(--surface-2); }
.filerow .fticon{ width:34px; height:34px; border-radius:8px; background: var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.filerow .fticon svg{ width:16px; height:16px; color: var(--text-2); }
.filerow .finfo{ flex:1; min-width:0; }
.filerow .fn{ font-size:13.5px; font-weight:600; color: var(--text-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.filerow .fsub{ font-family: var(--f-mono); font-size:10.8px; color: var(--text-3); margin-top:2px; }
.filerow .factions{ display:flex; gap:6px; flex-shrink:0; }

.tag{ display:inline-flex; align-items:center; gap:5px; font-family: var(--f-mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; padding:2.5px 8px; border-radius:6px; font-weight:600; }
.tag-public{ background: var(--telemetry-dim); color: var(--telemetry); }
.tag-private{ background: var(--surface-2); color: var(--text-2); border:1px solid var(--border); }
.tag-pending{ background: var(--warn-dim); color: var(--warn); }
.tag-approved{ background: var(--telemetry-dim); color: var(--telemetry); }
.tag-denied{ background: var(--danger-dim); color: var(--danger); }

.status-pill{ display:inline-flex; align-items:center; font-family: var(--f-mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; padding:2px 7px; border-radius:6px; font-weight:600; margin-left:6px; vertical-align:middle; }
.status-pending{ background: var(--warn-dim); color: var(--warn); }
.status-approved{ background: var(--telemetry-dim); color: var(--telemetry); }
.status-rejected{ background: var(--danger-dim); color: var(--danger); }

.empty-state{ text-align:center; padding: 56px 20px; color: var(--text-3); }
.empty-state svg{ width:44px; height:44px; margin-bottom:14px; opacity:.5; }
.empty-state h3{ font-family: var(--f-display); font-size:17px; color: var(--text-2); margin:0 0 6px; }
.empty-state p{ margin:0; font-size:12.8px; max-width:320px; margin:0 auto; }

/* dropzone -------------------------------------------------------------*/
.dropzone{
  border:1.5px dashed var(--border); border-radius: var(--radius-md); padding: 34px 20px;
  text-align:center; cursor:pointer; transition: border-color .15s var(--ease), background .15s var(--ease);
  background: var(--surface-1);
}
.dropzone:hover, .dropzone.drag{ border-color: var(--flame-2); background: var(--flame-dim); }
.dropzone svg{ width:30px; height:30px; color: var(--text-3); margin-bottom:10px; transition: color .15s var(--ease); }
.dropzone:hover svg, .dropzone.drag svg{ color: var(--flame-2); }
.dropzone .dz-title{ font-weight:700; font-size:14px; margin-bottom:4px; }
.dropzone .dz-sub{ font-size:12px; color: var(--text-3); }
.viz-toggle{ display:flex; gap:8px; margin-bottom:14px; }
.viz-toggle input{ display:none; }
.viz-toggle label{
  flex:1; text-align:center; padding:9px; border-radius:8px; border:1px solid var(--border);
  background: var(--surface-1); font-size:12.5px; font-weight:600; color: var(--text-2); cursor:pointer;
  transition:background-color 120ms var(--ease),border-color 120ms var(--ease),color 120ms var(--ease),transform 120ms var(--ease);
}
.viz-toggle input:checked + label{ background: var(--flame-dim); border-color: var(--flame-2); color: var(--flame-2); }

.upload-queue{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.upload-item{ background: var(--surface-1); border:1px solid var(--border); border-radius:10px; padding:11px 13px; animation: cardIn .25s var(--ease); }
.upload-item .u-top{ display:flex; justify-content:space-between; gap:10px; margin-bottom:8px; }
.upload-item .u-name{ font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upload-item .u-pct{ font-family: var(--f-mono); font-size:11px; color: var(--text-3); flex-shrink:0; }
.upload-item.done .u-pct{ color: var(--telemetry); }
.upload-item.error .bar-fill{ background: var(--danger); }
.upload-item.error .u-pct{ color: var(--danger); }
.upload-item .loc{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.upload-item.error .loc{ color: var(--danger); }

/* folder targeting + folder browse ---------------------------------*/
.folder-target-row{ display:flex; gap:8px; margin-bottom:12px; }
.folder-target-row input{ flex:1; background: var(--surface-1); border:1px solid var(--border); color: var(--text-1); padding: 9px 12px; border-radius: var(--radius-sm); font-size:13px; }
.folder-target-row input:focus{ outline:none; border-color: var(--flame-2); box-shadow: 0 0 0 3px var(--flame-dim); }
.folder-target-active{ display:flex; align-items:center; justify-content:space-between; gap:10px; background: var(--flame-dim); border:1px solid rgba(163,24,42,.32); border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom:12px; font-size:12.5px; color: var(--text-1); }
.folder-target-active strong{ color: var(--flame-2); font-weight:700; }
.folder-target-active button{ background:none; border:none; color: var(--text-3); font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-family: var(--f-mono); cursor:pointer; }
.folder-target-active button:hover{ color: var(--text-1); }
.upload-buttons{ display:flex; gap:8px; margin-top:12px; }

/* segmented tabs (Private / Public locker) --------------------------*/
.seg-tabs{ display:inline-flex; background: var(--surface-1); border:1px solid var(--border); border-radius: 11px; padding:4px; margin-bottom:22px; gap:4px; }
.seg-tabs button{
  border:none; background:none; color: var(--text-2); font-family: var(--f-body); font-weight:600; font-size:13px;
  padding: 9px 20px; border-radius:8px; cursor:pointer; transition: background .15s var(--ease), color .15s var(--ease);
}
.seg-tabs button:hover{ color: var(--text-1); }
.seg-tabs button.active{ background: var(--flame); color:#fff; }
.tab-panel{ display:none; animation: fadeUp .25s var(--ease) both; }
.tab-panel.active{ display:block; }

/* folder groups in file listings ------------------------------------*/
.folder-group{ border-bottom:1px solid var(--border-soft); }
.folder-group:last-child{ border-bottom:none; }
.folder-group-head{
  display:flex; align-items:center; gap:12px; padding: 12px 10px; cursor:pointer; border-radius:10px;
  transition: background .12s;
}
.folder-group-head:hover{ background: var(--surface-2); }
.folder-group-head .fticon{ width:34px; height:34px; border-radius:8px; background: var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; color: var(--warn); }
.folder-group-head .fticon svg{ width:17px; height:17px; }
.folder-group-head .finfo{ flex:1; min-width:0; }
.folder-group-head .fn{ font-size:13.5px; font-weight:600; color: var(--text-1); }
.folder-group-head .fsub{ font-family: var(--f-mono); font-size:10.8px; color: var(--text-3); margin-top:2px; }
.folder-group-head .chev{ width:16px; height:16px; color: var(--text-3); transition: transform .18s var(--ease); flex-shrink:0; }
.folder-group-actions{ flex-shrink:0; }
.folder-group.open .folder-group-head .chev{ transform: rotate(90deg); }
.folder-group-body{ max-height:0; overflow:hidden; transition: max-height .25s var(--ease); padding-left: 20px; border-left:1px solid var(--border-soft); margin-left:27px; }
.folder-group.open .folder-group-body{ max-height: 2000px; }
.folder-group-body .filerow{ border-bottom:1px solid var(--border-soft); }
.folder-group-body .filerow:last-child{ border-bottom:none; }

/* forms ------------------------------------------------------------ */
.text-input{
  background: var(--surface-1); border:1px solid var(--border); color: var(--text-1);
  padding: 9px 12px; border-radius: var(--radius-sm); font-size:13.5px; font-family: var(--f-body);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.text-input::placeholder{ color: var(--text-3); }
.text-input:focus{ outline:none; border-color: var(--flame-2); background: var(--surface-2); box-shadow: 0 0 0 3px var(--flame-dim); }

.inline-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.form-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }

table.tbl{ width:100%; border-collapse:collapse; }
table.tbl th{ text-align:left; font-family: var(--f-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--text-3); padding: 9px 12px; border-bottom:1px solid var(--border); }
table.tbl td{ padding: 12px; border-bottom:1px solid var(--border-soft); font-size:13px; vertical-align:middle; }
table.tbl tr:last-child td{ border-bottom:none; }
table.tbl tbody tr{ transition: background .12s; }
table.tbl tbody tr:hover{ background: var(--surface-2); }

/* toasts ----------------------------------------------------------- */
.toast-stack{ position:fixed; top:20px; right:20px; z-index:200; display:flex; flex-direction:column; gap:10px; width: 340px; max-width: calc(100vw - 40px); }
.toast{
  background: var(--surface-1); border:1px solid var(--border); border-radius: var(--radius-md);
  padding: 13px 14px; box-shadow: var(--shadow-lift); position:relative; overflow:hidden;
  animation: toastIn .25s var(--ease) both; display:flex; gap:11px;
}
@keyframes toastIn{ from{ opacity:0; transform: translateX(20px); } to{ opacity:1; transform:none; } }
.toast.leaving{ animation: toastOut .2s var(--ease) forwards; }
@keyframes toastOut{ to{ opacity:0; transform: translateX(24px); } }
.toast .t-icon{ width:30px; height:30px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.toast .t-icon svg{ width:15px; height:15px; }
.toast.success .t-icon{ background: var(--telemetry-dim); color: var(--telemetry); }
.toast.error .t-icon{ background: var(--danger-dim); color: var(--danger); }
.toast.notify .t-icon{ background: var(--flame-dim); color: var(--flame-2); }
.toast .t-body{ flex:1; min-width:0; }
.toast .t-title{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-family: var(--f-mono); color: var(--text-3); margin-bottom:3px; }
.toast .t-msg{ font-size:13px; color: var(--text-1); line-height:1.4; }
.toast .t-close{ position:absolute; top:8px; right:9px; width:18px; height:18px; color: var(--text-3); opacity:.7; }
.toast .t-close:hover{ opacity:1; }
.toast .t-timer{ position:absolute; bottom:0; left:0; height:2.5px; background: var(--flame-2); animation: toastTimer 5s linear forwards; }
.toast.success .t-timer{ background: var(--telemetry); }
.toast.error .t-timer{ background: var(--danger); }
@keyframes toastTimer{ from{ width:100%; } to{ width:0%; } }

/* modal ------------------------------------------------------------ */
.modal-backdrop{ position:fixed; inset:0; background: rgba(8,7,6,.7); backdrop-filter: blur(3px); z-index:100; opacity:0; pointer-events:none; transition: opacity .15s var(--ease); display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-backdrop.show{ opacity:1; pointer-events:auto; }
.modal-box{ width:100%; max-width:420px; background: var(--surface-1); border:1px solid var(--border); border-radius: var(--radius-lg); padding:24px; transform: translateY(8px); transition: transform .18s var(--ease); box-shadow: var(--shadow-lift); }
.modal-backdrop.show .modal-box{ transform:none; }
.modal-box h3{ font-family: var(--f-display); font-size:19px; margin:0 0 6px; }
.modal-box p{ color: var(--text-2); font-size:13px; margin:0 0 18px; line-height:1.5; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }
.modal-box input{
  width: 100%; padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-1); margin-bottom: 14px; font-size:13.5px;
}
.modal-box input:focus{ outline:none; border-color: var(--flame-2); box-shadow: 0 0 0 3px var(--flame-dim); }

/* misc --------------------------------------------------------------*/
.section-title{ font-family: var(--f-display); font-weight:800; font-size:15px; margin: 26px 0 12px; letter-spacing:-.01em; color: var(--text-2); }
.section-title:first-child{ margin-top:0; }
.hr{ height:1px; background: var(--border-soft); border:none; margin: 20px 0; }
.helptext{ font-size:11.5px; color: var(--text-3); margin-top:6px; }
.stat-strip{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap:14px; margin-bottom:20px; }
.stat-box{ background: var(--surface-1); border:1px solid var(--border); border-radius:12px; padding:15px 16px; }
.stat-box .lbl{ font-family: var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color: var(--text-3); margin-bottom:8px; }
.stat-box .val{ font-family: var(--f-display); font-size:26px; font-weight:800; }
.stat-box .val small{ font-family: var(--f-mono); font-size:12px; color: var(--text-3); font-weight:400; }

.crumbtrail{ display:flex; align-items:center; gap:6px; font-family: var(--f-mono); font-size:11px; color: var(--text-3); margin-bottom:2px; }
.crumbtrail a{ color: var(--text-3); }
.crumbtrail a:hover{ color: var(--flame-2); }
.crumbtrail svg{ width:10px; height:10px; opacity:.6; }

@media (max-width: 980px){
  .sidebar{ position:fixed; left:0; top:0; transform: translateX(-100%); box-shadow: var(--shadow-lift); }
  .sidebar.open{ transform:none; }
  .menu-toggle{ display:flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:9px; background: var(--surface-1); border:1px solid var(--border); }
  .menu-toggle svg{ width:17px; height:17px; }
  .sidebar-scrim{ display:none; position:fixed; inset:0; background: rgba(0,0,0,.5); z-index:39; }
  .sidebar-scrim.show{ display:block; }
  .content{ padding: 22px 16px 50px; }
  .topbar{ padding: 14px 16px; }
  .topbar h1{ font-size:20px; }
  .pool-chip .txt{ display:none; }
}

/* =========================================================================
   MAC DESKTOP EDITION
   A calm Finder-style window over a desktop wallpaper. The existing class
   system remains intact so every route keeps its behavior and permissions.
   ========================================================================= */
:root{
  --void:#8db8dd;
  --surface-0:rgba(246,248,251,.88);
  --surface-1:rgba(255,255,255,.76);
  --surface-2:rgba(235,239,244,.92);
  --surface-3:#d7dde5;
  --border:rgba(64,72,84,.18);
  --border-soft:rgba(64,72,84,.11);
  --text-1:#1d1d1f;
  --text-2:#52545a;
  --text-3:#7d8189;
  --flame:#087ff5;
  --flame-2:#006edb;
  --flame-dim:rgba(10,132,255,.13);
  --telemetry:#248a3d;
  --telemetry-dim:rgba(52,199,89,.14);
  --warn:#b46a00;
  --warn-dim:rgba(255,159,10,.16);
  --danger:#d92d20;
  --danger-dim:rgba(255,69,58,.13);
  --violet:#7165cf;
  --f-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",sans-serif;
  --f-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;
  --f-mono:"SFMono-Regular",ui-monospace,Menlo,Monaco,Consolas,monospace;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --shadow-lift:0 24px 70px rgba(31,45,61,.24),0 2px 8px rgba(31,45,61,.12);
  --shadow-card:0 8px 24px rgba(31,45,61,.12),inset 0 1px rgba(255,255,255,.75);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --ease:var(--ease-out);
  --sidebar-w:252px;
}

html{ background:#77a8d0; }
body.mac-desktop{
  height:100dvh;
  min-height:100dvh;
  overflow:hidden;
  padding:28px 14px 82px;
  background:
    radial-gradient(ellipse 72% 58% at 16% 8%,rgba(255,255,255,.78),transparent 58%),
    radial-gradient(ellipse 62% 75% at 94% 92%,rgba(87,88,205,.48),transparent 61%),
    radial-gradient(ellipse 60% 64% at 54% 66%,rgba(38,173,210,.62),transparent 64%),
    linear-gradient(145deg,#c7e7f5 0%,#72b7d9 46%,#7c78c9 100%);
  color:var(--text-1);
  font-family:var(--f-body);
}
body.mac-desktop::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

body.mac-login{
  min-height:100dvh;
  padding:clamp(28px,6vh,68px) clamp(18px,6vw,80px);
  background:
    radial-gradient(ellipse 72% 58% at 16% 8%,rgba(255,255,255,.8),transparent 58%),
    radial-gradient(ellipse 62% 75% at 94% 92%,rgba(87,88,205,.45),transparent 61%),
    radial-gradient(ellipse 60% 64% at 54% 66%,rgba(38,173,210,.58),transparent 64%),
    linear-gradient(145deg,#c7e7f5 0%,#72b7d9 46%,#7c78c9 100%);
}
.mac-login .auth-shell{
  position:relative;
  min-height:min(720px,calc(100dvh - 12vh));
  max-width:1180px;
  margin:auto;
  padding-top:36px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.64);
  border-radius:18px;
  background:rgba(248,250,252,.86);
  box-shadow:0 42px 100px rgba(26,42,67,.3),0 8px 24px rgba(26,42,67,.16),inset 0 1px rgba(255,255,255,.85);
}
.mac-login .auth-shell::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0 0 auto;
  height:36px;
  background:rgba(239,242,246,.82);
  border-bottom:1px solid rgba(65,72,82,.12);
  backdrop-filter:blur(20px);
}
.mac-login .auth-shell::after{
  content:"";
  position:absolute;
  z-index:3;
  top:12px;
  left:15px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#ff5f57;
  box-shadow:20px 0 #febc2e,40px 0 #28c840;
}
.mac-login .auth-visual{
  padding:52px;
  border-right-color:rgba(65,72,82,.12);
  background:
    radial-gradient(circle at 24% 18%,rgba(255,255,255,.82),transparent 38%),
    linear-gradient(155deg,rgba(196,231,247,.9),rgba(123,188,219,.72) 58%,rgba(118,119,199,.72));
}
.mac-login .auth-visual .stripes{ opacity:.08; }
.mac-login .auth-visual .pitch h1{ color:#1d2732; font-family:var(--f-display); font-size:clamp(42px,5vw,64px); font-weight:700; letter-spacing:-.045em; line-height:.95; }
.mac-login .auth-visual .pitch h1 em{ color:#075fae; }
.mac-login .auth-visual .pitch p{ color:#3d4c5b; max-width:52ch; }
.mac-login .telemetry-row .stat b{ color:#24313e; font-family:var(--f-display); }
.mac-login .telemetry-row .stat span{ color:#536170; font-family:var(--f-body); letter-spacing:0; text-transform:none; }
.mac-login .auth-form-wrap{ background:rgba(252,253,254,.74); }
.mac-login .auth-card{ padding:28px; border:1px solid rgba(255,255,255,.7); border-radius:16px; background:rgba(255,255,255,.56); box-shadow:inset 0 1px rgba(255,255,255,.84),0 12px 34px rgba(36,56,76,.1); backdrop-filter:blur(20px); }
.mac-login .auth-card h2{ font-family:var(--f-display); font-size:28px; font-weight:680; letter-spacing:-.035em; }
.mac-login .auth-switch a{ color:#0875da; }

.mac-menu-bar{
  position:fixed;
  inset:0 0 auto;
  z-index:90;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  color:rgba(20,25,33,.9);
  background:rgba(246,249,252,.64);
  box-shadow:inset 0 -1px rgba(255,255,255,.48);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  font-size:12px;
  letter-spacing:-.01em;
}
.mac-menu-left,.mac-menu-right{ display:flex; align-items:center; gap:18px; }
.mac-menu-left strong{ font-weight:650; }
.mac-menu-right{ gap:12px; font-variant-numeric:tabular-nums; }
.mac-apple{ width:13px; height:16px; }

.shell{
  position:relative;
  z-index:2;
  width:min(1680px,100%);
  height:calc(100dvh - 110px);
  min-height:0;
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.58);
  border-radius:16px;
  background:rgba(248,250,252,.88);
  box-shadow:0 42px 100px rgba(26,42,67,.3),0 8px 24px rgba(26,42,67,.16),inset 0 1px rgba(255,255,255,.85);
  transform-origin:top left;
  will-change:transform,opacity;
}
.shell.is-maximized{
  position:fixed;
  inset:28px 0 0;
  width:100%;
  height:calc(100dvh - 28px);
  border-radius:0;
  border:0;
}

.sidebar{
  position:relative;
  top:auto;
  height:100%;
  background:rgba(224,230,237,.74);
  border-right:1px solid rgba(75,84,97,.14);
  backdrop-filter:blur(30px) saturate(150%);
  -webkit-backdrop-filter:blur(30px) saturate(150%);
  transition:transform 240ms var(--ease-drawer);
}
.sidebar-top{ min-height:68px; padding:0 14px 0 84px; display:flex; align-items:center; border-bottom:1px solid rgba(255,255,255,.5); }
.sidebar-scroll{ padding:10px 10px 14px; }
.brand-logo{ height:29px; filter:none; }
.brandmark .word small{ color:var(--text-2); font-family:var(--f-body); font-size:12px; letter-spacing:-.01em; text-transform:none; font-weight:650; }
.nav-section{ margin-bottom:16px; }
.nav-section .nav-label{
  padding:0 9px 6px;
  color:#6d7178;
  font-family:var(--f-body);
  font-size:11px;
  font-weight:650;
  letter-spacing:0;
  text-transform:none;
}
.nav-item,.dept-row{
  border-radius:7px;
  color:#42464d;
  font-size:13px;
  transition:background-color 120ms ease,color 120ms ease,transform 120ms var(--ease-out);
}
.nav-item.active,.dept-row.active{ background:rgba(10,132,255,.18); color:#111820; }
.nav-item.active::before{ display:none; }
.nav-item svg{ color:#147bd1; opacity:.9; }
.dept-row .dot{ width:8px; height:8px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.dept-row .mini-usage{ color:#767b84; }
.sidebar-bottom{ border-top:1px solid rgba(75,84,97,.12); background:rgba(242,245,248,.4); }
.user-pod:hover{ background:rgba(255,255,255,.42); }
.avatar{ background:linear-gradient(145deg,#61b6ff,#207dd1); border:0; color:#fff; font-family:var(--f-body); box-shadow:inset 0 1px rgba(255,255,255,.45); }
.icon-btn{ color:#555b64; }
.icon-btn:hover{ background:rgba(255,255,255,.55); color:#111; }

.main{ height:100%; min-height:0; background:rgba(250,251,252,.92); overflow:hidden; }
.topbar{
  position:relative;
  min-height:68px;
  padding:11px 20px;
  gap:14px;
  background:rgba(248,249,251,.78);
  border-bottom:1px solid rgba(68,76,88,.14);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 1px rgba(255,255,255,.7) inset;
}
.window-controls{ position:absolute; top:20px; left:16px; z-index:60; display:flex; align-items:center; gap:8px; }
.traffic-light{
  position:relative;
  width:13px;
  height:13px;
  padding:0;
  border:1px solid rgba(0,0,0,.13);
  border-radius:50%;
  cursor:default;
  box-shadow:inset 0 1px rgba(255,255,255,.32);
}
.traffic-close{ background:#ff5f57; }
.traffic-minimize{ background:#febc2e; }
.traffic-zoom{ background:#28c840; }
.traffic-light::after{ position:absolute; inset:-3px; display:grid; place-items:center; color:rgba(40,40,40,.7); font-size:10px; font-weight:700; opacity:0; }
.window-controls:hover .traffic-light::after{ opacity:1; }
.traffic-close::after{ content:"×"; }
.traffic-minimize::after{ content:"−"; }
.traffic-zoom::after{ content:"+"; font-size:8px; }
.topbar .crumb,.crumbtrail{ color:#747981; font-family:var(--f-body); font-size:11px; letter-spacing:0; text-transform:none; }
.topbar h1{ color:#202124; font-family:var(--f-display); font-size:20px; font-weight:650; letter-spacing:-.025em; }
.pool-chip{ background:rgba(255,255,255,.64); border-color:rgba(65,72,82,.14); box-shadow:inset 0 1px rgba(255,255,255,.7); }
.pool-chip .txt{ color:#62666e; font-family:var(--f-body); }
.bell-btn,.menu-toggle{ background:rgba(255,255,255,.62); border-color:rgba(65,72,82,.14); color:#34383e; }
.bell-btn:hover{ background:rgba(255,255,255,.9); }
.bell-dot{ box-shadow:0 0 0 2px rgba(248,249,251,.95); }
.notif-panel{ background:rgba(250,251,252,.9); backdrop-filter:blur(26px) saturate(150%); border-color:rgba(65,72,82,.15); }

.content{
  min-height:0;
  overflow:auto;
  padding:26px 30px 58px;
  background:rgba(252,253,254,.72);
  animation:none;
  will-change:transform,opacity;
  scrollbar-gutter:stable;
}
.content > *{ max-width:1440px; margin-left:auto; margin-right:auto; }
.section-title{ color:#5d626a; font-family:var(--f-body); font-size:13px; font-weight:650; letter-spacing:-.01em; }

.folder-grid{ grid-template-columns:repeat(auto-fill,minmax(154px,1fr)); gap:10px 14px; align-items:start; }
.folder-card{
  min-height:154px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:16px 12px 13px;
  overflow:visible;
  border-color:transparent;
  border-radius:10px;
  background:transparent;
  box-shadow:none;
  text-align:center;
  animation:none;
  transition:background-color 140ms ease,transform 140ms var(--ease-out),box-shadow 140ms ease;
  content-visibility:auto;
  contain-intrinsic-size:auto 154px;
}
.folder-card .ficon{ width:72px; height:56px; margin:2px 0 11px; filter:drop-shadow(0 5px 5px rgba(38,71,102,.18)); }
.folder-card .ficon svg > path:first-child{ fill:#58aff2; stroke:#2f89cf; }
.folder-card .fname{ font-family:var(--f-body); font-size:13px; font-weight:550; letter-spacing:-.01em; }
.folder-card .fmeta{ color:#7a7f87; font-family:var(--f-body); font-size:10.5px; margin:2px 0 9px; }
.folder-card .bar,.folder-card .bar-row{ width:100%; max-width:118px; }
.folder-card .container-tag{ color:#70757d; font-family:var(--f-body); font-size:10px; letter-spacing:0; text-transform:none; }
.folder-card.opening{ background:rgba(10,132,255,.16); transform:scale(.96); }

.panel,.stat-box{
  border-color:rgba(64,72,84,.13);
  background:rgba(255,255,255,.74);
  box-shadow:inset 0 1px rgba(255,255,255,.9),0 1px 3px rgba(30,45,60,.06);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  content-visibility:auto;
  contain-intrinsic-size:auto 220px;
}
.panel{ padding:20px; border-radius:12px; }
.panel-head h2{ font-family:var(--f-body); font-size:16px; font-weight:650; letter-spacing:-.02em; }
.panel-head p{ color:#737780; line-height:1.45; }
.stat-strip{ gap:10px; }
.stat-box{ padding:14px 15px; }
.stat-box .lbl{ color:#777c84; font-family:var(--f-body); font-size:11px; font-weight:550; letter-spacing:0; text-transform:none; }
.stat-box .val{ font-family:var(--f-display); font-size:24px; font-weight:650; letter-spacing:-.035em; }
.stat-box .val small{ color:#777c84; font-family:var(--f-body); }

.field input,.field select,.field textarea,.text-input,.folder-target-row input,.modal-box input{
  background:rgba(255,255,255,.8);
  border-color:rgba(65,72,82,.2);
  color:#1d1d1f;
  box-shadow:inset 0 1px 2px rgba(25,35,45,.04);
}
.field input:focus,.field select:focus,.field textarea:focus,.text-input:focus,.folder-target-row input:focus,.modal-box input:focus{
  background:#fff;
  border-color:#0a84ff;
  box-shadow:0 0 0 3px rgba(10,132,255,.16);
}
.btn{ border-radius:7px; padding:9px 15px; font-size:12.5px; transition:transform 120ms var(--ease-out),background-color 140ms ease,border-color 140ms ease,box-shadow 140ms ease; }
.btn:active{ transform:scale(.97); }
.btn-flame{ background:linear-gradient(#168cf7,#0875da); border-color:#0069c9; box-shadow:inset 0 1px rgba(255,255,255,.28),0 1px 2px rgba(0,77,153,.18); }
.btn-flame:hover{ background:linear-gradient(#2497ff,#0875da); }
.btn-ghost{ background:rgba(255,255,255,.72); border-color:rgba(65,72,82,.18); color:#2d3137; }
.btn-ghost:hover{ background:#fff; border-color:rgba(65,72,82,.27); }
.btn-danger{ color:#c9251a; border-color:rgba(217,45,32,.2); background:rgba(255,255,255,.6); }
.btn-danger:hover{ background:rgba(255,69,58,.12); }
.seg-tabs{ background:rgba(118,118,128,.12); border:0; border-radius:8px; padding:2px; gap:0; }
.seg-tabs button{ border-radius:6px; padding:7px 18px; font-weight:550; }
.seg-tabs button.active{ background:#fff; color:#1d1d1f; box-shadow:0 1px 4px rgba(31,42,55,.18); }

.filerow{ border-bottom-color:rgba(65,72,82,.1); border-radius:7px; transition:background-color 120ms ease,transform 120ms var(--ease-out),opacity 180ms var(--ease-out); }
.filerow:hover{ background:rgba(10,132,255,.08); }
.filerow .fticon,.folder-group-head .fticon{ background:linear-gradient(155deg,#72c7ff,#3194df); border:0; color:#fff; box-shadow:inset 0 1px rgba(255,255,255,.5),0 2px 5px rgba(27,103,162,.16); }
.filerow .fticon{ background:rgba(228,233,239,.9); color:#5f6670; box-shadow:inset 0 1px rgba(255,255,255,.8); }
.filerow .fn,.folder-group-head .fn{ color:#27292d; font-weight:550; }
.filerow .fsub,.folder-group-head .fsub{ color:#81858c; font-family:var(--f-body); }
.folder-group{ border-bottom-color:rgba(65,72,82,.1); }
.folder-group-head{ border-radius:7px; transition:background-color 120ms ease,transform 120ms var(--ease-out); }
.folder-group-head:hover{ background:rgba(10,132,255,.08); }
.folder-group-body{ border-left-color:rgba(65,72,82,.12); transition:max-height 240ms var(--ease-out),opacity 180ms var(--ease-out),transform 240ms var(--ease-out); opacity:0; transform:translateY(-6px); }
.folder-group.open .folder-group-body{ opacity:1; transform:translateY(0); }
.folder-group-head .chev{ transition:transform 180ms var(--ease-out); }
.folder-lazy{ min-height:48px; display:flex; align-items:center; padding:8px 10px; }
.lazy-skeleton{ width:100%; display:grid; grid-template-columns:34px 1fr 82px; gap:12px; align-items:center; }
.lazy-skeleton::before,.lazy-skeleton::after,.lazy-skeleton span{ content:""; display:block; border-radius:6px; background:linear-gradient(90deg,#e5e9ee 20%,#f5f7f9 50%,#e5e9ee 80%); background-size:200% 100%; animation:macShimmer 1.2s linear infinite; }
.lazy-skeleton::before{ width:34px; height:34px; }
.lazy-skeleton span{ height:11px; max-width:240px; }
.lazy-skeleton::after{ height:26px; }
[data-lazy-list]{ display:block; width:100%; min-height:46px; }
.folder-lazy[data-lazy-list]{ padding:8px 10px; }
.lazy-list-root{ padding:2px 0; }
.lazy-list-controls{ display:flex; justify-content:center; padding:14px 10px 8px; }
.lazy-list-controls .btn{ min-width:132px; }
.lazy-list-status,.lazy-list-error{ padding:18px 12px; color:var(--text-3); font-size:12.5px; text-align:center; }
.lazy-list-error{ color:var(--danger); cursor:pointer; }
.folder-group.open .folder-group-body{ max-height:none; }
@keyframes macShimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

.dropzone{ background:rgba(255,255,255,.52); border-color:rgba(65,72,82,.24); }
.dropzone:hover,.dropzone.drag{ border-color:#0a84ff; background:rgba(10,132,255,.08); }
.dropzone:hover svg,.dropzone.drag svg{ color:#0a84ff; }
.folder-target-active{ border-color:rgba(10,132,255,.25); background:rgba(10,132,255,.09); }
.folder-target-active strong{ color:#0875da; }
.bar{ background:rgba(118,118,128,.16); }
.bar-fill{ background:#34c759; }
.bar[data-level="warn"] .bar-fill{ background:#ff9f0a; }
.bar[data-level="danger"] .bar-fill{ background:#ff453a; }

table.tbl th{ color:#767b83; font-family:var(--f-body); font-size:11px; letter-spacing:0; text-transform:none; }
table.tbl td{ border-bottom-color:rgba(65,72,82,.1); }
table.tbl tbody tr:hover{ background:rgba(10,132,255,.06); }
.notif-row:hover{ background:rgba(10,132,255,.07); }

.modal-backdrop,.modal-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(40,48,58,.22);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms var(--ease-out);
}
.modal-backdrop.show,.modal-overlay.show,.modal-overlay[style*="display: flex"]:not(.closing){ opacity:1; pointer-events:auto; }
.modal-box{
  background:rgba(250,251,252,.94);
  border-color:rgba(255,255,255,.72);
  color:#202124;
  box-shadow:0 30px 90px rgba(23,36,52,.28),inset 0 1px rgba(255,255,255,.9);
  transform:translateY(10px) scale(.97);
  opacity:0;
  transition:transform 220ms var(--ease-out),opacity 180ms var(--ease-out);
}
.modal-backdrop.show .modal-box,.modal-overlay.show .modal-box,.modal-overlay[style*="display: flex"]:not(.closing) .modal-box{ transform:translateY(0) scale(1); opacity:1; }
.toast{ background:rgba(248,250,252,.9); border-color:rgba(255,255,255,.65); backdrop-filter:blur(24px); color:#202124; }
.toast .t-msg{ color:#27292d; }

.mac-dock{
  position:fixed;
  z-index:80;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  padding:6px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:18px;
  background:rgba(245,248,251,.42);
  backdrop-filter:blur(24px) saturate(170%);
  -webkit-backdrop-filter:blur(24px) saturate(170%);
  box-shadow:0 12px 32px rgba(28,45,68,.24),inset 0 1px rgba(255,255,255,.68);
}
.dock-app{ position:relative; width:52px; height:52px; display:grid; place-items:center; padding:8px; border:0; border-radius:13px; background:linear-gradient(145deg,#20252c,#080a0d); cursor:pointer; box-shadow:0 5px 12px rgba(24,37,53,.3),inset 0 1px rgba(255,255,255,.16); transition:transform 140ms var(--ease-out); }
.dock-app img{ max-width:100%; max-height:100%; }
.dock-app span{ position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); padding:5px 8px; border-radius:6px; background:rgba(35,38,43,.88); color:#fff; font-size:11px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 125ms var(--ease-out),transform 125ms var(--ease-out); }

@media (hover:hover) and (pointer:fine){
  .folder-card:hover{ background:rgba(10,132,255,.1); border-color:transparent; box-shadow:none; transform:translateY(-2px); }
  .nav-item:hover,.dept-row:hover{ background:rgba(255,255,255,.48); color:#17191d; }
  .traffic-light{ cursor:pointer; }
  .dock-app:hover span{ opacity:1; transform:translateX(-50%) translateY(-2px); }
}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:3px solid rgba(10,132,255,.34); outline-offset:2px; }

@media (prefers-reduced-motion:reduce){
  .lazy-skeleton::before,.lazy-skeleton::after,.lazy-skeleton span{ animation:none; }
  .folder-group-body{ transform:none; }
}
@media (prefers-reduced-transparency:reduce){
  .mac-menu-bar,.sidebar,.topbar,.panel,.stat-box,.mac-dock,.notif-panel,.toast,.modal-box{ background:#f3f5f7; backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@media (prefers-contrast:more){
  .shell,.panel,.stat-box,.btn,.field input,.field select,.field textarea{ border-color:#60656d; }
  .sidebar{ background:#e5e8ec; }
}
@media (max-width:980px){
  body.mac-desktop{ padding:28px 0 0; }
  .shell{ width:100%; height:calc(100dvh - 28px); border:0; border-radius:0; }
  .sidebar{ position:fixed; top:28px; height:calc(100dvh - 28px); }
  .mac-dock{ display:none; }
  .window-controls{ display:none; }
  .sidebar-top{ min-height:auto; padding:18px 16px 13px; }
  .content{ padding:22px 16px 48px; }
  .topbar{ min-height:62px; padding:10px 14px; }
}
@media (max-width:620px){
  .mac-menu-left span,.mac-menu-right > span{ display:none; }
  .folder-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .filerow{ align-items:flex-start; flex-wrap:wrap; }
  .filerow .factions{ width:100%; padding-left:48px; flex-wrap:wrap; }
}

/* ==================================================================
   TR CLOUD DESKTOP — a functional macOS-style workspace
   ================================================================== */
body.mac-desktop{
  background:
    radial-gradient(ellipse 62% 78% at 92% 32%,rgba(28,104,255,.82),transparent 58%),
    radial-gradient(ellipse 70% 62% at 12% 24%,rgba(103,71,238,.74),transparent 62%),
    radial-gradient(ellipse 54% 44% at 54% 92%,rgba(14,105,201,.72),transparent 70%),
    linear-gradient(145deg,#100044 0%,#101d87 46%,#042c78 76%,#061b4d 100%);
}
body.mac-desktop::before{ z-index:0; opacity:.12; mix-blend-mode:screen; }
.mac-menu-bar{
  color:rgba(255,255,255,.95);
  background:rgba(5,8,30,.46);
  box-shadow:inset 0 -1px rgba(255,255,255,.12),0 1px 12px rgba(0,0,20,.12);
}
.mac-menu-right svg{ width:17px; height:17px; }
.menu-online{ display:flex; align-items:center; }
.sr-only{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

.tr-desktop{
  position:fixed;
  z-index:1;
  inset:28px 0 0;
  overflow:hidden;
  color:#fff;
}
.tr-desktop::before,.tr-desktop::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  transform:rotate(-29deg);
}
.tr-desktop::before{
  width:108vw;
  height:63vw;
  top:-18vw;
  left:24vw;
  border:clamp(3px,.45vw,8px) solid rgba(148,194,255,.62);
  box-shadow:
    0 0 0 1.6vw rgba(63,119,239,.18),
    0 0 0 3.8vw rgba(35,68,188,.2),
    0 0 5vw rgba(77,137,255,.46);
  opacity:.78;
}
.tr-desktop::after{
  width:96vw;
  height:52vw;
  right:-34vw;
  bottom:-28vw;
  background:radial-gradient(ellipse at 18% 15%,rgba(160,188,255,.66),rgba(69,86,177,.3) 30%,rgba(9,24,75,.1) 61%,transparent 68%);
  filter:blur(1px);
  opacity:.72;
}

.desktop-widgets{
  position:absolute;
  z-index:2;
  top:22px;
  left:26px;
  width:min(414px,calc(100vw - 52px));
  display:grid;
  grid-template-columns:136px minmax(0,1fr);
  gap:14px;
}
.desktop-widget{
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.24);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(226,232,255,.28),rgba(143,156,222,.17));
  box-shadow:inset 0 1px rgba(255,255,255,.32),0 18px 40px rgba(0,10,55,.18);
  backdrop-filter:blur(24px) saturate(148%);
  -webkit-backdrop-filter:blur(24px) saturate(148%);
  color:#fff;
}
.desktop-widget::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.16),transparent 36%);
}
.widget-eyebrow{ font-size:10px; font-weight:650; letter-spacing:.055em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.calendar-widget{ height:136px; padding:15px 14px 12px; }
.calendar-date{ display:flex; align-items:baseline; gap:7px; margin:2px 0 7px; }
.calendar-date strong{ font-size:28px; line-height:1; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.calendar-date span{ font-size:11px; color:rgba(255,255,255,.72); }
.calendar-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px 3px; font-size:7.5px; font-variant-numeric:tabular-nums; text-align:center; color:rgba(255,255,255,.7); }
.calendar-grid span{ display:grid; place-items:center; aspect-ratio:1; border-radius:50%; }
.calendar-grid .today{ background:#fff; color:#38429b; font-weight:750; }

.systems-widget{ height:136px; padding:15px 16px 12px; }
.widget-title-row{ position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.widget-title-row h2{ margin:1px 0 0; color:#fff; font-size:24px; line-height:1; letter-spacing:-.045em; }
.status-live{ display:flex; align-items:center; padding:4px 7px; border-radius:99px; background:rgba(0,0,20,.17); color:rgba(255,255,255,.8); font-size:9px; font-weight:650; }
.widget-meter{ position:relative; z-index:1; height:5px; margin:12px 0 10px; overflow:hidden; border-radius:99px; background:rgba(0,0,35,.25); }
.widget-meter span{ display:block; width:calc(var(--pct) * 1%); height:100%; border-radius:inherit; background:linear-gradient(90deg,#6bd890,#a7edc0); }
.storage-nodes{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.storage-nodes b,.storage-nodes small{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.storage-nodes b{ font-size:9px; font-weight:680; }
.storage-nodes small{ margin-top:2px; font-size:7.5px; color:rgba(255,255,255,.62); }

.race-widget{ height:124px; padding:15px 14px; text-decoration:none; transition:transform 150ms var(--ease-out),background-color 150ms ease; }
.race-widget-main{ position:relative; z-index:1; display:grid; grid-template-columns:auto 1fr; align-items:end; gap:5px; margin:8px 0 5px; }
.race-widget-main strong{ font-size:34px; line-height:.9; letter-spacing:-.06em; }
.race-widget-main > span:last-child{ padding-bottom:2px; font-size:9px; line-height:1.05; color:rgba(255,255,255,.7); }
.race-widget p{ position:relative; z-index:1; margin:0; max-width:18ch; color:rgba(255,255,255,.73); font-size:8.5px; line-height:1.3; }

.garages-widget{ height:124px; padding:15px 16px 12px; }
.garages-widget .widget-title-row h2{ font-size:22px; }
.garage-role{ max-width:92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; color:rgba(255,255,255,.67); }
.garage-mini-list{ position:relative; z-index:1; margin-top:10px; display:grid; gap:1px; }
.garage-mini-list a{ display:flex; align-items:center; justify-content:space-between; padding:3px 0; color:rgba(255,255,255,.78); font-size:8.5px; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.09); }
.garage-mini-list b{ color:#fff; font-variant-numeric:tabular-nums; }

.desktop-launcher{
  position:absolute;
  z-index:5;
  top:42%;
  left:53%;
  width:min(510px,calc(100vw - 40px));
  transform:translate(-50%,-50%);
}
.spotlight{
  position:relative;
  z-index:2;
  height:50px;
  display:grid;
  grid-template-columns:28px 1fr auto;
  align-items:center;
  gap:8px;
  padding:0 15px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:16px;
  background:rgba(229,234,255,.77);
  box-shadow:inset 0 1px rgba(255,255,255,.62),0 18px 48px rgba(0,8,58,.28);
  backdrop-filter:blur(28px) saturate(145%);
  -webkit-backdrop-filter:blur(28px) saturate(145%);
  color:#414775;
  transition:transform 150ms var(--ease-out),box-shadow 160ms ease,background-color 160ms ease;
}
.spotlight:focus-within{ transform:translateY(-1px); background:rgba(240,243,255,.93); box-shadow:inset 0 1px #fff,0 22px 58px rgba(0,8,58,.34),0 0 0 3px rgba(159,183,255,.28); }
.spotlight svg{ width:24px; height:24px; }
.spotlight input{ min-width:0; padding:0; border:0; outline:0; background:transparent; color:#31365d; font:500 18px/1 var(--f-body); letter-spacing:-.02em; }
.spotlight input::placeholder{ color:#626995; opacity:.92; }
.spotlight kbd{ padding:3px 6px; border:1px solid rgba(58,66,112,.16); border-radius:6px; background:rgba(255,255,255,.42); color:#656b91; font:500 10px/1 var(--f-body); box-shadow:0 1px rgba(255,255,255,.5); }
.spotlight-results{
  position:absolute;
  z-index:1;
  top:58px;
  left:0;
  right:0;
  max-height:278px;
  overflow:auto;
  padding:7px;
  border:1px solid rgba(255,255,255,.36);
  border-radius:16px;
  background:rgba(228,233,253,.88);
  box-shadow:0 22px 60px rgba(0,7,45,.34),inset 0 1px rgba(255,255,255,.6);
  backdrop-filter:blur(28px) saturate(150%);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
  transform-origin:top center;
  animation:spotlightMaterialize 170ms var(--ease-out) both;
}
@keyframes spotlightMaterialize{ from{ opacity:0; transform:translateY(-5px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } }
.spotlight-results a{ display:grid; grid-template-columns:34px 1fr; align-items:center; gap:10px; padding:7px 9px; border-radius:9px; color:#272b50; text-decoration:none; }
.spotlight-results a[hidden]{ display:none; }
.spotlight-results a:first-child:not([hidden]){ background:rgba(77,99,190,.13); }
.spotlight-results b,.spotlight-results small{ display:block; }
.spotlight-results b{ font-size:12px; }
.spotlight-results small{ margin-top:2px; color:#73799d; font-size:9.5px; }
.result-icon{ width:30px; height:30px; display:grid; place-items:center; border-radius:8px; color:#fff; font-size:10px; font-weight:750; }
.result-locker{ background:#1687dd; }.result-drive{ background:#3ba75b; }.result-race{ background:#ef6534; }.result-folder{ background:#5b78d9; }
.desktop-quick-launch{ display:flex; justify-content:center; gap:10px; margin-top:13px; }
.desktop-quick-launch a,.desktop-quick-launch button{ position:relative; width:45px; height:45px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.38); border-radius:50%; background:rgba(226,232,255,.7); color:#465080; box-shadow:inset 0 1px rgba(255,255,255,.62),0 8px 20px rgba(0,7,45,.16); backdrop-filter:blur(16px); text-decoration:none; cursor:pointer; transition:transform 140ms var(--ease-out),background-color 140ms ease; }
.desktop-quick-launch svg{ width:25px; height:25px; }
.desktop-quick-launch span{ position:absolute; top:calc(100% + 6px); color:rgba(255,255,255,.84); font-size:9px; opacity:0; transform:translateY(-2px); transition:opacity 125ms var(--ease-out),transform 125ms var(--ease-out); }

.desktop-icons{ position:absolute; z-index:3; top:18px; right:24px; width:138px; display:grid; gap:16px; }
.desktop-icon{ min-height:96px; display:flex; flex-direction:column; align-items:center; padding:5px 7px; border:0; border-radius:9px; background:transparent; color:#fff; cursor:default; text-shadow:0 1px 4px rgba(0,0,35,.8); transition:background-color 130ms ease,transform 130ms var(--ease-out); }
.desktop-icon strong{ max-width:126px; margin-top:6px; font-size:11px; font-weight:600; line-height:1.15; text-align:center; }
.desktop-icon small{ margin-top:2px; color:rgba(255,255,255,.68); font-size:8.5px; text-align:center; }
.desktop-folder{ position:relative; width:65px; height:43px; margin-top:8px; border-radius:5px 7px 8px 8px; background:linear-gradient(#9366f0 0 17%,#7250d9 18%,#5734b8 100%); border:1px solid rgba(255,255,255,.32); box-shadow:inset 0 1px rgba(255,255,255,.35),0 7px 14px rgba(0,0,40,.24); }
.desktop-folder::before{ content:""; position:absolute; left:4px; top:-6px; width:27px; height:11px; border-radius:5px 5px 0 0; background:#976cf0; border:1px solid rgba(255,255,255,.24); border-bottom:0; }
.desktop-folder i{ position:absolute; inset:11px 18px 8px; border:1.5px solid rgba(255,255,255,.78); border-radius:3px; }
.locker-folder i::before{ content:""; position:absolute; left:5px; top:-6px; width:9px; height:7px; border:1.5px solid rgba(255,255,255,.78); border-bottom:0; border-radius:5px 5px 0 0; }
.approved-folder i::after{ content:"✓"; position:absolute; inset:-3px; display:grid; place-items:center; font-style:normal; font-size:15px; font-weight:750; }
.dynamics-folder i{ border-radius:50%; }
.dynamics-folder i::after{ content:""; position:absolute; inset:6px; border:1px solid rgba(255,255,255,.75); border-radius:50%; }

.mac-dock{
  display:flex;
  align-items:flex-end;
  gap:5px;
  bottom:8px;
  padding:6px 8px 7px;
  border-color:rgba(255,255,255,.28);
  border-radius:20px;
  background:rgba(28,36,87,.4);
  box-shadow:inset 0 1px rgba(255,255,255,.28),0 18px 40px rgba(0,0,35,.28);
}
.mac-genie-layer{ position:fixed; z-index:79; inset:0; pointer-events:none; }
.mac-genie-slice{ z-index:1!important; will-change:transform,opacity,clip-path; }
.dock-app{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  padding:2px;
  overflow:visible;
  border:0;
  border-radius:12px;
  background:transparent;
  box-shadow:none;
  text-decoration:none;
  transition:filter 140ms ease;
}
.dock-app svg{ width:46px; height:46px; filter:drop-shadow(0 5px 6px rgba(0,0,30,.28)); }
.dock-app span{ bottom:calc(100% + 9px); }
.dock-divider{ align-self:stretch; width:1px; margin:2px 4px; background:rgba(255,255,255,.2); }
.dock-badge{ position:absolute; z-index:2; top:-3px; right:-3px; min-width:17px; height:17px; display:grid; place-items:center; padding:0 4px; border:2px solid #3b4679; border-radius:9px; background:#ff453a; color:#fff; font:700 9px/1 var(--f-body); }

.mac-desktop-home .shell{
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform:translateY(24px) scale(.93);
}
.mac-desktop-home .shell.desktop-window-open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transform:translate(0,0) scale(1);
}
.shell{ z-index:40; }

@media (hover:hover) and (pointer:fine){
  .desktop-widget[href]:hover{ transform:translateY(-2px); background-color:rgba(255,255,255,.08); }
  .desktop-icon:hover{ background:rgba(111,139,255,.24); transform:translateY(-1px); }
  .desktop-quick-launch a:hover,.desktop-quick-launch button:hover{ transform:translateY(-2px) scale(1.04); background:rgba(241,244,255,.92); }
  .desktop-quick-launch a:hover span,.desktop-quick-launch button:hover span{ opacity:1; transform:translateY(0); }
  .spotlight-results a:hover{ background:rgba(77,99,190,.17); }
}
.desktop-icon:active,.desktop-quick-launch a:active,.desktop-quick-launch button:active,.dock-app:active{ transform:scale(.96); transition-duration:110ms; }

@media (prefers-reduced-motion:reduce){
  .spotlight-results{ animation:desktopFade 160ms ease both; }
  .desktop-icon,.desktop-quick-launch a,.desktop-quick-launch button,.dock-app{ transform:none !important; }
}
@keyframes desktopFade{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-transparency:reduce){
  .desktop-widget,.spotlight,.spotlight-results,.desktop-quick-launch a,.desktop-quick-launch button,.mac-dock{ background:#263575; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .spotlight,.spotlight-results{ background:#e7eafb; }
}
@media (max-width:1040px){
  .desktop-widgets{ grid-template-columns:128px 236px; width:378px; }
  .desktop-launcher{ left:50%; top:48%; width:450px; }
  .desktop-icons{ right:12px; }
}
@media (max-width:760px){
  .mac-desktop-home .tr-desktop{ display:none; }
  .mac-desktop-home .shell{ visibility:visible; opacity:1; pointer-events:auto; transform:none; }
  .mac-menu-right .menu-online,.menu-search-icon,.menu-wifi{ display:none; }
}

/* ==================================================================
   PHONE EDITION
   iCloud-inspired responsive shell. The desktop Finder experience is
   preserved above 760px; phones get a purpose-built touch interface.
   ================================================================== */
.mobile-cloud-bar,.mobile-cloud-nav,.mobile-cloud-intro,.mobile-auth-brand{ display:none; }

@media (max-width:760px){
  html{ background:#f5f5f7; }
  body.mac-desktop{
    min-height:100dvh;
    height:100dvh;
    padding:0;
    overflow:hidden;
    background:#f5f5f7;
    color:#1d1d1f;
  }
  body.mac-desktop::before,.mac-menu-bar{ display:none; }

  .mobile-cloud-bar{
    position:fixed;
    z-index:120;
    inset:0 0 auto;
    min-height:calc(58px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) 16px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:rgba(248,248,250,.82);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    backdrop-filter:blur(24px) saturate(180%);
    box-shadow:inset 0 -1px rgba(60,60,67,.12);
  }
  .mobile-cloud-brand{ min-height:58px; display:flex; align-items:center; gap:10px; font-size:18px; font-weight:700; letter-spacing:-.025em; }
  .mobile-cloud-brand img{ width:auto; height:30px; display:block; }
  .mobile-cloud-actions{ display:flex; align-items:center; gap:8px; }
  .mobile-cloud-alert,.mobile-cloud-avatar{ position:relative; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; }
  .mobile-cloud-alert{ color:#202124; background:rgba(118,118,128,.1); }
  .mobile-cloud-alert svg{ width:20px; height:20px; }
  .mobile-cloud-alert > span{ position:absolute; top:-1px; right:-1px; min-width:17px; height:17px; padding:0 4px; display:grid; place-items:center; border:2px solid #f8f8fa; border-radius:10px; background:#ff3b30; color:#fff; font-size:9px; font-weight:750; }
  .mobile-cloud-avatar{ background:linear-gradient(145deg,#54aff6,#0875da); color:#fff; font-size:12px; font-weight:750; box-shadow:inset 0 1px rgba(255,255,255,.35); }

  .mobile-cloud-nav{
    position:fixed;
    z-index:110;
    inset:auto 0 0;
    height:calc(64px + env(safe-area-inset-bottom));
    padding:5px 10px env(safe-area-inset-bottom);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:rgba(249,249,251,.88);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    backdrop-filter:blur(24px) saturate(180%);
    box-shadow:inset 0 1px rgba(60,60,67,.13);
  }
  .mobile-cloud-nav a{ min-width:0; min-height:54px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border-radius:12px; color:#6e6e73; font-size:10px; font-weight:600; transition:transform 100ms ease-out,color 120ms ease; }
  .mobile-cloud-nav a:active{ transform:scale(.94); }
  .mobile-cloud-nav a.active{ color:#0875da; }
  .mobile-cloud-nav svg{ width:22px; height:22px; }

  .shell{
    width:100%;
    height:calc(100dvh - 58px - env(safe-area-inset-top));
    min-height:0;
    margin:calc(58px + env(safe-area-inset-top)) 0 0;
    border:0;
    border-radius:0;
    background:#f5f5f7;
    box-shadow:none;
  }
  .mac-desktop-home .shell{ display:none!important; }
  .main{ height:100%; background:#f5f5f7; }
  .topbar{
    position:sticky;
    top:0;
    min-height:64px;
    padding:10px 12px;
    gap:10px;
    border:0;
    background:rgba(245,245,247,.9);
    -webkit-backdrop-filter:blur(22px) saturate(160%);
    backdrop-filter:blur(22px) saturate(160%);
    box-shadow:0 8px 18px rgba(31,48,74,.05);
  }
  .topbar .crumb,.crumbtrail{ font-size:11px; }
  .topbar .crumb{ display:none; }
  .topbar h1{ font-size:23px; line-height:1.08; letter-spacing:-.035em; }
  .menu-toggle,.bell-btn{ width:44px; height:44px; flex:0 0 44px; border:0; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(28,42,58,.1); }
  .menu-toggle svg,.bell-btn svg{ width:20px; height:20px; }
  .pool-chip{ display:none; }
  .notif-panel{ position:fixed; top:calc(126px + env(safe-area-inset-top)); left:12px; right:12px; width:auto; max-height:min(430px,60dvh); border-radius:18px; }

  .content{
    min-height:0;
    padding:20px 14px calc(92px + env(safe-area-inset-bottom));
    overflow:auto;
    background:#f5f5f7;
    scrollbar-gutter:auto;
    -webkit-overflow-scrolling:touch;
  }
  .content > *{ max-width:none; }
  .section-title{ margin:24px 4px 10px; color:#3a3a3c; font-size:18px; font-weight:700; letter-spacing:-.025em; }
  .stat-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
  .stat-strip .stat-box:last-child:nth-child(odd){ grid-column:1/-1; }
  .stat-box,.panel{ border:0; border-radius:16px; background:#fff; box-shadow:0 1px 3px rgba(25,42,66,.08); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .stat-box{ min-height:100px; padding:15px; }
  .stat-box .val{ font-size:24px; }
  .panel{ padding:16px; }
  .panel-head{ gap:10px; margin-bottom:15px; }
  .panel-head h2{ font-size:17px; }

  .folder-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .folder-card{
    min-height:154px;
    padding:16px 10px 14px;
    border:0;
    border-radius:16px;
    background:#fff;
    box-shadow:0 1px 3px rgba(25,42,66,.08);
    content-visibility:visible;
  }
  .folder-card .ficon{ width:66px; height:51px; margin-bottom:10px; }
  .folder-card .fname{ max-width:100%; font-size:13px; }
  .folder-card .fmeta{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .folder-card .bar,.folder-card .bar-row{ max-width:108px; }

  .sidebar{
    z-index:116;
    top:calc(58px + env(safe-area-inset-top));
    width:min(88vw,340px);
    height:calc(100dvh - 58px - env(safe-area-inset-top));
    border-radius:0 20px 0 0;
    background:rgba(246,247,249,.98);
    box-shadow:16px 0 50px rgba(31,45,67,.18);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .sidebar-scrim{ z-index:114; top:calc(58px + env(safe-area-inset-top)); bottom:0; background:rgba(22,31,43,.28); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
  .sidebar-top{ min-height:60px; padding:12px 16px; }
  .sidebar-scroll{ padding:12px 10px 90px; }
  .nav-item,.dept-row{ min-height:44px; font-size:14px; }

  .btn{ min-height:44px; padding:10px 15px; font-size:14px; }
  .btn-sm{ min-height:40px; padding:8px 12px; }
  .field input,.field select,.field textarea,.text-input,.folder-target-row input{ min-height:46px; font-size:16px; }
  .seg-tabs{ width:100%; display:grid; grid-template-columns:repeat(2,1fr); }
  .seg-tabs button{ min-height:40px; padding:7px 12px; }
  .inline-form,.upload-buttons{ align-items:stretch; }
  .inline-form > *,.upload-buttons > *{ flex:1 1 140px; }

  .filerow{ gap:11px; padding:12px 4px; }
  .filerow .factions{ width:100%; padding-left:0; gap:8px; }
  .filerow .factions .btn{ flex:1 1 auto; }
  .folder-group-head{ min-height:54px; padding:10px 4px; }
  .folder-group-body{ margin-left:18px; padding-left:10px; }

  table.tbl{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table.tbl th,table.tbl td{ min-width:110px; white-space:nowrap; }
  table.tbl th:first-child,table.tbl td:first-child{ position:sticky; left:0; background:#fff; }

  .toast-stack{ top:calc(70px + env(safe-area-inset-top)); left:12px; right:12px; width:auto; max-width:none; }
  .toast{ border-radius:16px; }
  .modal-backdrop,.modal-overlay{ align-items:flex-end; padding:0; }
  .modal-box{
    width:100%;
    max-width:none;
    padding:22px 18px calc(22px + env(safe-area-inset-bottom));
    border:0;
    border-radius:22px 22px 0 0;
    transform:translateY(24px);
    box-shadow:0 -18px 60px rgba(25,39,58,.18);
  }

  .mac-desktop-home .tr-desktop{
    position:fixed;
    inset:calc(58px + env(safe-area-inset-top)) 0 0;
    display:flex;
    flex-direction:column;
    gap:0;
    padding:22px 16px calc(92px + env(safe-area-inset-bottom));
    overflow-x:hidden;
    overflow-y:auto;
    color:#1d1d1f;
    background:#f5f5f7;
    -webkit-overflow-scrolling:touch;
  }
  .tr-desktop::before,.tr-desktop::after{ display:none; }
  .mobile-cloud-intro{ order:0; display:block; margin:0 2px 20px; }
  .mobile-cloud-intro p{ margin:0 0 2px; color:#6e6e73; font-size:13px; font-weight:600; }
  .mobile-cloud-intro h1{ margin:0; font-size:34px; line-height:1.03; letter-spacing:-.045em; }
  .mobile-cloud-intro > span{ display:block; margin-top:7px; color:#6e6e73; font-size:14px; line-height:1.4; }

  .desktop-launcher{ order:1; position:relative; top:auto; left:auto; width:100%; transform:none; margin:0 0 20px; }
  .spotlight{ height:50px; grid-template-columns:24px 1fr; padding:0 14px; border:0; border-radius:14px; background:#fff; color:#65656a; box-shadow:0 1px 4px rgba(25,42,66,.1); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .spotlight:focus-within{ transform:none; background:#fff; box-shadow:0 0 0 3px rgba(10,132,255,.18),0 1px 4px rgba(25,42,66,.1); }
  .spotlight svg{ width:21px; height:21px; }
  .spotlight input{ color:#1d1d1f; font-size:16px; }
  .spotlight input::placeholder{ color:#7c7c80; }
  .spotlight kbd{ display:none; }
  .spotlight-results{ top:56px; border:0; border-radius:16px; background:rgba(255,255,255,.96); box-shadow:0 18px 50px rgba(31,44,65,.2); }
  .desktop-quick-launch{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0 22px; }
  .desktop-quick-launch button{ display:none; }
  .desktop-quick-launch a{ width:54px; height:54px; margin:auto; border:0; background:#fff; color:#0875da; box-shadow:0 2px 8px rgba(25,42,66,.11); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .desktop-quick-launch span{ top:calc(100% + 5px); color:#54545a; font-size:10px; font-weight:600; opacity:1; transform:none; }

  .desktop-icons{ order:2; position:static; width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:22px; }
  .desktop-icon{ min-height:126px; justify-content:center; padding:14px 8px 12px; border-radius:16px; background:#fff; color:#1d1d1f; text-shadow:none; box-shadow:0 1px 3px rgba(25,42,66,.08); cursor:pointer; }
  .desktop-icon strong{ margin-top:9px; color:#1d1d1f; font-size:12px; }
  .desktop-icon small{ color:#7b7b80; font-size:9px; }
  .desktop-folder{ width:58px; height:40px; margin-top:2px; background:linear-gradient(#69bdff 0 17%,#45a9f5 18%,#1686dd 100%); border-color:rgba(20,111,183,.2); box-shadow:inset 0 1px rgba(255,255,255,.55),0 5px 10px rgba(16,101,171,.2); }
  .desktop-folder::before{ background:#78c6ff; border-color:rgba(20,111,183,.16); }

  .desktop-widgets{ order:3; position:static; width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .desktop-widget{ border:0; border-radius:16px; background:#fff; color:#1d1d1f; box-shadow:0 1px 3px rgba(25,42,66,.08); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .desktop-widget::after{ display:none; }
  .systems-widget{ order:0; grid-column:1/-1; height:154px; padding:17px; }
  .calendar-widget{ order:1; height:154px; padding:16px 13px; }
  .race-widget{ order:2; height:154px; padding:16px 14px; }
  .garages-widget{ order:3; grid-column:1/-1; height:auto; min-height:154px; padding:17px; }
  .widget-eyebrow{ color:#6e6e73; }
  .widget-title-row h2,.calendar-date strong,.race-widget-main strong{ color:#1d1d1f; }
  .calendar-date span,.race-widget-main > span:last-child,.race-widget p,.garage-role{ color:#727277; }
  .calendar-grid{ color:#79797e; }
  .calendar-grid .today{ background:#0875da; color:#fff; }
  .status-live{ background:rgba(52,199,89,.14); color:#247d39; }
  .widget-meter{ background:rgba(118,118,128,.16); }
  .storage-nodes b{ color:#2f2f33; }
  .storage-nodes small{ color:#7b7b80; }
  .garage-mini-list a{ min-height:31px; color:#55555a; border-bottom-color:rgba(60,60,67,.1); font-size:10px; }
  .garage-mini-list b{ color:#1d1d1f; }
  .race-widget-main{ margin-top:16px; }
  .race-widget p{ max-width:19ch; font-size:9.5px; }
}

@media (max-width:380px){
  .mobile-cloud-bar{ padding-left:12px; padding-right:12px; }
  .mac-desktop-home .tr-desktop{ padding-left:12px; padding-right:12px; }
  .content{ padding-left:10px; padding-right:10px; }
  .mobile-cloud-intro h1{ font-size:31px; }
  .desktop-icon{ min-height:118px; }
  .folder-card{ min-height:148px; }
}

@media (max-width:760px){
  body.mac-login{ min-height:100dvh; padding:0; background:#f5f5f7; }
  .mac-login .auth-shell{ min-height:100dvh; max-width:none; margin:0; padding:0; overflow:auto; border:0; border-radius:0; background:#f5f5f7; box-shadow:none; }
  .mac-login .auth-shell::before,.mac-login .auth-shell::after{ display:none; }
  .mac-login .auth-form-wrap{ min-height:100dvh; padding:calc(30px + env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom)); flex-direction:column; }
  .mobile-auth-brand{ display:flex; align-items:center; gap:10px; margin:0 0 22px; }
  .mobile-auth-brand img{ width:auto; height:36px; }
  .mobile-auth-brand strong{ font-size:22px; letter-spacing:-.03em; }
  .mac-login .auth-card{ max-width:420px; padding:24px 20px; border:0; border-radius:22px; background:#fff; box-shadow:0 12px 40px rgba(32,48,70,.12); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .mac-login .auth-card h2{ font-size:29px; letter-spacing:-.04em; }
  .mac-login .auth-card .sub{ margin-bottom:24px; color:#6e6e73; font-size:14px; line-height:1.4; }
  .mac-login .field label{ color:#48484c; font-size:13px; }
  .mac-login .field input,.mac-login .field select{ min-height:48px; background:#f5f5f7; font-size:16px; }
  .mac-login .btn{ min-height:48px; font-size:15px; }
}

@media (max-width:760px) and (prefers-reduced-transparency:reduce){
  .mobile-cloud-bar,.mobile-cloud-nav,.topbar{ background:#f5f5f7; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .sidebar-scrim{ -webkit-backdrop-filter:none; backdrop-filter:none; }
}