/* ═══════════════════════════════════════════════════════
   EMERA Lab — style.css
   Base: same as newsletter studio
   Additional: analytics charts, drive, file grid
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }

:root {
  --bg:        #1a1917;
  --surface:   #242220;
  --surface2:  #2c2a27;
  --surface3:  #353330;
  --surface4:  #3e3c38;
  --border:    rgba(255,255,255,0.07);
  --border2:   rgba(255,255,255,0.12);
  --border3:   rgba(255,255,255,0.20);
  --gold:      #c8a86b;
  --gold-lt:   #dfc08a;
  --gold-dim:  rgba(200,168,107,0.10);
  --text:      #f4f0e8;
  --text2:     #c8c2b4;
  --text3:     #7a7468;
  --text4:     #4a4640;
  --red:       #e05c4a;
  --red-dim:   rgba(224,92,74,0.12);
  --green:     #5aaa7a;
  --green-dim: rgba(90,170,122,0.12);
  --blue:      #6a9fd8;
  --blue-dim:  rgba(106,159,216,0.12);
  --radius:    6px;
  --radius-lg: 10px;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease2:     cubic-bezier(0.4, 0, 0.2, 1);
  --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;
  --sidebar-w: 220px;
  --topbar-h:  56px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  cursor: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}


/* TEXT SELECTION */
* { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
input, textarea, [data-allow-ctx] { -webkit-user-select: text; -moz-user-select: text; user-select: text; }


/* ══ CUSTOM CURSOR — identique newsletter ══ */
#cursor {
  position: fixed;
  top: -200px; left: -200px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(200, 168, 107, 0.6);
  background: transparent;
  pointer-events: none !important;
  z-index: 2147483647;
  visibility: visible !important;
  opacity: 1;
  transform: translate(-50%, -50%);
  transition:
    width        0.35s var(--ease),
    height       0.35s var(--ease),
    border-color 0.3s  var(--ease),
    background   0.3s  var(--ease),
    opacity      0.2s;
  will-change: left, top;
  display: flex;
  align-items: center;
  justify-content: center;
}
#cursor::after {
  content: '';
  display: block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  transition:
    width    0.35s var(--ease),
    height   0.35s var(--ease),
    opacity  0.3s  var(--ease);
}
#cursor.hover {
  width: 52px; height: 52px;
  border-color: var(--gold);
  background: rgba(200, 168, 107, 0.07);
}
#cursor.hover::after { width: 0; height: 0; opacity: 0; }

/* App mode : curseur natif après login */
body.app-mode #cursor { display: none; }
body.app-mode,
body.app-mode * { cursor: auto !important; }
body.app-mode input,
body.app-mode textarea { cursor: text !important; caret-color: var(--gold); }

/* cursor:none sur page login uniquement */
a, button, [onclick], label,
.nav-item, .file-card, .bc-item, .btn,
.lang-btn, .theme-switch, .switch-track,
select, [role="button"] {
  cursor: none;
}
input, textarea {
  cursor: none !important;
  caret-color: var(--gold);
}

/* Mobile */
@media (max-width: 768px) {
  #cursor          { display: none !important; }
  body             { cursor: auto !important; }
  *                { cursor: inherit !important; }
  input, textarea  { cursor: text !important; caret-color: var(--gold); }
}

/* GRAIN */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* LIGHT THEME */
body.light {
  --bg: #f5f3ee; --surface: #ffffff; --surface2: #f0ede6;
  --surface3: #e8e4db; --surface4: #ddd9cf;
  --border: rgba(0,0,0,0.07); --border2: rgba(0,0,0,0.12); --border3: rgba(0,0,0,0.20);
  --text: #1a1815; --text2: #4a4540; --text3: #8a8478; --text4: #b0aa9e;
  --gold-dim: rgba(200,168,107,0.12);
}
body.light { cursor: auto; }

/* ════════════════ LOGIN ════════════════ */
#login-screen {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  overflow: hidden;
}
.login-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.login-bg-circle {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(200,168,107,0.07);
  animation: pulse-circle 8s ease-in-out infinite;
}
.login-bg-circle:nth-child(1) { width:600px; height:600px; top:50%; left:50%; transform:translate(-50%,-50%); animation-delay:0s; }
.login-bg-circle:nth-child(2) { width:900px; height:900px; top:50%; left:50%; transform:translate(-50%,-50%); animation-delay:1.5s; }
.login-bg-circle:nth-child(3) { width:1200px; height:1200px; top:50%; left:50%; transform:translate(-50%,-50%); animation-delay:3s; }
.login-bg-line { position:absolute; background:linear-gradient(90deg,transparent,rgba(200,168,107,0.05),transparent); height:1px; width:100%; animation:line-sweep 6s ease-in-out infinite; }
.login-bg-line:nth-child(4){top:30%;animation-delay:0s} .login-bg-line:nth-child(5){top:50%;animation-delay:2s} .login-bg-line:nth-child(6){top:70%;animation-delay:4s}
@keyframes pulse-circle { 0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(1)} 50%{opacity:.8;transform:translate(-50%,-50%) scale(1.03)} }
@keyframes line-sweep { 0%{opacity:0;transform:translateX(-100%)} 50%{opacity:1} 100%{opacity:0;transform:translateX(100%)} }

.login-wrap { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; width:400px; padding:0 20px; }
.login-logo-wrap { margin-bottom:48px; opacity:0; animation:login-drop 0.9s 0.1s var(--ease) forwards; display:flex; flex-direction:column; align-items:center; }
.login-logo-img { height:52px; width:auto; display:block; margin:0 auto; }
.login-logo-sub { text-align:center; margin-top:10px; font-size:10px; font-weight:500; letter-spacing:0.4em; text-transform:uppercase; color:var(--text3); }
.login-card { width:100%; background:var(--surface); border:1px solid var(--border2); border-top:1px solid rgba(200,168,107,0.2); padding:40px; position:relative; overflow:hidden; opacity:0; animation:login-rise 0.9s 0.3s var(--ease) forwards; }
.login-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.login-title { font-family:var(--font-display); font-size:26px; font-weight:400; font-style:italic; color:var(--text); margin-bottom:4px; text-align:center; }
.login-desc { font-size:11px; letter-spacing:0.1em; color:var(--text3); text-align:center; margin-bottom:32px; text-transform:uppercase; }
.field { margin-bottom:18px; }
.field-label { display:block; font-size:11px; font-weight:500; letter-spacing:0.08em; color:var(--text3); text-transform:uppercase; margin-bottom:7px; }
.field-input { width:100%; background:var(--surface2); border:1px solid var(--border2); border-radius:var(--radius); color:var(--text); font-family:var(--font-ui); font-size:14px; padding:11px 14px; outline:none; transition:border-color 0.2s, box-shadow 0.2s; }
.field-input:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-dim); }
.field-input::placeholder { color:var(--text4); }
.btn-login { width:100%; margin-top:8px; background:var(--gold); color:var(--bg); border:none; border-radius:var(--radius); font-family:var(--font-ui); font-size:13px; font-weight:600; padding:13px; cursor:none; transition:all 0.22s var(--ease); position:relative; overflow:hidden; }
.btn-login:hover { background:var(--gold-lt); transform:translateY(-1px); box-shadow:0 8px 24px rgba(200,168,107,0.3); }
.login-error { color:var(--red); font-size:12px; font-weight:500; text-align:center; margin-top:14px; display:none; }
@keyframes login-drop { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
@keyframes login-rise { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }

/* ════════════════ APP SHELL ════════════════ */
#app { display:none; height:100vh; flex-direction:column; position:relative; z-index:1; }
#app.visible { display:flex; }

.topbar { height:var(--topbar-h); background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 24px; flex-shrink:0; z-index:100; opacity:0; transform:translateY(-8px); }
.topbar.in { animation:slide-down 0.5s 0.05s var(--ease) forwards; }
.tb-left { display:flex; align-items:center; gap:14px; }
.tb-logo { height:22px; width:auto; display:block; }
.tb-divider { width:1px; height:16px; background:var(--border3); }
.tb-title { font-size:11px; font-weight:500; letter-spacing:0.12em; color:var(--text3); text-transform:uppercase; }
.tb-right { display:flex; align-items:center; gap:12px; }
.tb-user { font-size:12px; font-weight:500; color:var(--text2); padding:5px 12px; background:var(--surface2); border:1px solid var(--border); border-radius:20px; }
.btn-topbar { font-size:12px; font-weight:500; padding:6px 14px; border-radius:var(--radius); background:transparent; border:1px solid var(--border2); color:var(--text3); cursor:pointer; transition:all 0.18s; }
.btn-topbar:hover { border-color:var(--red); color:var(--red); background:var(--red-dim); }

/* Lang & Theme */
.lang-switcher { display:flex; align-items:center; background:var(--surface2); border:1px solid var(--border); border-radius:20px; padding:3px; gap:2px; }
.lang-btn { font-size:11px; font-weight:500; letter-spacing:0.06em; padding:4px 10px; border-radius:16px; background:transparent; border:none; color:var(--text3); cursor:pointer; transition:all 0.18s; text-transform:uppercase; }
.lang-btn.active { background:var(--gold); color:var(--bg); }
.theme-switch { display:flex; align-items:center; gap:8px; padding:0 4px; cursor:pointer; }
.theme-svg { color:var(--text3); transition:color 0.2s; flex-shrink:0; display:block; }
.theme-switch:hover .theme-svg { color:var(--gold); }
.switch-track { position:relative; width:36px; height:20px; background:var(--surface3); border:1px solid var(--border2); border-radius:20px; cursor:pointer; transition:background 0.25s; flex-shrink:0; }
.switch-thumb { position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--text3); transition:transform 0.25s var(--ease), background 0.25s; }
body.light .switch-track { background:var(--gold-dim); border-color:var(--gold); }
body.light .switch-thumb { transform:translateX(16px); background:var(--gold); }

/* LAYOUT */
.main-layout { display:flex; flex:1; overflow:hidden; }
.sidebar { width:var(--sidebar-w); flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; opacity:0; transform:translateX(-12px); }
.sidebar.in { animation:slide-right 0.5s 0.15s var(--ease) forwards; }
.sidebar-section { padding:16px 12px 8px; }
.sidebar-section-label { font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--text4); padding:0 8px; margin-bottom:4px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius); cursor:pointer; transition:all 0.16s; color:var(--text3); font-size:13px; font-weight:400; margin-bottom:2px; position:relative; }
.nav-item:hover { background:var(--surface2); color:var(--text2); }
.nav-item.active { background:var(--gold-dim); color:var(--gold); font-weight:500; }
.nav-item.active::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:0 2px 2px 0; background:var(--gold); }
.nav-icon { width:18px; text-align:center; font-size:14px; flex-shrink:0; opacity:0.7; }
.nav-item.active .nav-icon { opacity:1; }
.nav-label { flex:1; }
.nav-badge { font-size:11px; font-weight:600; background:var(--surface3); color:var(--text3); padding:2px 7px; border-radius:10px; }
.nav-item.active .nav-badge { background:var(--gold-dim); color:var(--gold); }
.sidebar-bottom { margin-top:auto; border-top:1px solid var(--border); padding:14px 20px 18px; }
.stat-item { display:flex; justify-content:space-between; align-items:center; padding:4px 0; }
.stat-label { font-size:12px; color:var(--text3); }
.stat-value { font-size:12px; font-weight:600; color:var(--gold); }

.content { flex:1; overflow-y:auto; padding:32px 36px; opacity:0; transform:translateY(10px); }
.content.in { animation:fade-up 0.5s 0.22s var(--ease) forwards; }
.page { display:none; }
.page.active { display:block; }

/* PAGE HEADER */
.page-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.page-eyebrow { font-size:11px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); margin-bottom:5px; }
.page-title { font-family:var(--font-display); font-size:36px; font-weight:400; color:var(--text); line-height:1.1; }
.page-title em { font-style:italic; color:var(--text2); }
.page-actions { display:flex; gap:10px; align-items:center; }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-ui); font-size:13px; font-weight:500; padding:9px 18px; border-radius:var(--radius); cursor:pointer; border:none; transition:all 0.18s var(--ease2); white-space:nowrap; }
.btn-primary { background:var(--gold); color:var(--bg); }
.btn-primary:hover { background:var(--gold-lt); transform:translateY(-1px); box-shadow:0 4px 16px rgba(200,168,107,0.25); }
.btn-secondary { background:var(--surface3); color:var(--text2); border:1px solid var(--border2); }
.btn-secondary:hover { background:var(--surface4); color:var(--text); }
.btn-ghost { background:transparent; color:var(--text3); border:1px solid var(--border2); }
.btn-ghost:hover { background:var(--surface2); color:var(--text2); }
.btn-danger { background:var(--red-dim); color:var(--red); border:1px solid rgba(224,92,74,0.2); }
.btn-sm { padding:6px 13px; font-size:12px; }
.btn-xs { padding:4px 9px; font-size:11px; }
.btn-icon { width:30px; height:30px; padding:0; justify-content:center; }

/* INPUTS */
.input { background:var(--surface2); border:1px solid var(--border2); border-radius:var(--radius); color:var(--text); font-family:var(--font-ui); font-size:14px; padding:9px 13px; outline:none; width:100%; transition:border-color 0.18s, box-shadow 0.18s; }
.input:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-dim); }
.input::placeholder { color:var(--text4); }
select.input { cursor:pointer; }
.form-group { margin-bottom:18px; }
.form-label { display:block; font-size:11px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--text3); margin-bottom:7px; }
.form-hint { font-size:11px; color:var(--text3); margin-top:6px; line-height:1.45; }
.form-row { display:flex; gap:14px; margin-bottom:18px; }
.form-row .form-group { margin-bottom:0; }

/* ─── Custom checkbox toggle (used in modals like Share)
   The native checkbox is hidden but kept focusable; a styled square
   sits in front with the gold theme. Checked state shows a tick. ─── */
.form-toggle {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;
  font-size:12px;
  color:var(--text2);
  transition:all 0.18s;
  user-select:none;
}
.form-toggle:hover { border-color:rgba(200,168,107,0.35); background:var(--surface3); }
.form-toggle input[type=checkbox] {
  appearance:none; -webkit-appearance:none;
  width:16px; height:16px; flex-shrink:0;
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:4px;
  cursor:pointer;
  position:relative;
  margin:0;
  transition:all .15s;
}
.form-toggle input[type=checkbox]:hover { border-color:var(--gold); }
.form-toggle input[type=checkbox]:checked {
  background:var(--gold);
  border-color:var(--gold);
}
.form-toggle input[type=checkbox]:checked::after {
  content:"";
  position:absolute;
  left:4px; top:1px;
  width:5px; height:9px;
  border:solid #0a0908;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.form-toggle input[type=checkbox]:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.form-toggle input[type=checkbox]:checked ~ span,
.form-toggle:has(input:checked) > span { color:var(--gold); }

/* ─── Backup target rows — variant of form-toggle without per-row
   bg/border. The parent box owns the visual frame; rows just get
   a separator line and a gold-accent checkbox. ─── */
.bk-target-row {
  display:flex; align-items:center; gap:12px;
  padding:11px 14px;
  cursor:pointer;
  font-size:12px;
  color:var(--text2);
  transition:background 0.12s;
  user-select:none;
}
.bk-target-row:hover { background:var(--surface3); }
.bk-target-row.bk-target-all {
  background:rgba(200,168,107,0.04);
  font-weight:500;
  letter-spacing:0.02em;
  color:var(--text);
}
.bk-target-row.bk-target-all:hover { background:rgba(200,168,107,0.08); }
.bk-target-row + .bk-target-row { border-top:1px solid var(--border); }

.bk-target-row input[type=checkbox] {
  appearance:none; -webkit-appearance:none;
  width:16px; height:16px; flex-shrink:0;
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:4px;
  cursor:pointer;
  position:relative;
  margin:0;
  transition:all .15s;
}
.bk-target-row input[type=checkbox]:hover { border-color:var(--gold); }
.bk-target-row input[type=checkbox]:checked {
  background:var(--gold);
  border-color:var(--gold);
}
.bk-target-row input[type=checkbox]:checked::after {
  content:"";
  position:absolute;
  left:4px; top:1px;
  width:5px; height:9px;
  border:solid #0a0908;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.bk-target-row input[type=checkbox]:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.bk-target-row .bk-target-name { flex:1; }
.bk-target-row .bk-target-ext {
  font-size:9px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text4);
  font-family:var(--font-mono);
}

/* ─── Custom number input — hide ugly browser spinners, replace with
   a clean gold stepper inside a wrapper. Use .input-num-wrap to opt in. ─── */
.input-num-wrap {
  position:relative;
  display:flex; align-items:stretch;
}
.input-num-wrap .input {
  -moz-appearance:textfield;
  padding-right:38px;
}
.input-num-wrap .input::-webkit-outer-spin-button,
.input-num-wrap .input::-webkit-inner-spin-button {
  -webkit-appearance:none; margin:0;
}
.input-num-steppers {
  position:absolute; right:1px; top:1px; bottom:1px;
  width:30px;
  display:flex; flex-direction:column;
  border-left:1px solid var(--border);
  overflow:hidden;
  border-top-right-radius:var(--radius);
  border-bottom-right-radius:var(--radius);
}
.input-num-steppers button {
  flex:1;
  background:var(--surface2);
  border:none;
  color:var(--text3);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:0;
  transition:all .12s;
  font-family:inherit;
}
.input-num-steppers button:hover {
  background:var(--gold-dim);
  color:var(--gold);
}
.input-num-steppers button:active {
  background:rgba(200,168,107,0.22);
}
.input-num-steppers button + button {
  border-top:1px solid var(--border);
}
.input-num-steppers button svg { width:9px; height:9px; }
@media (max-width: 560px) {
  .form-row { flex-direction:column; gap:14px; }
}

/* ════════════════ ANALYTICS ════════════════ */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.kpi-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px 22px; transition:border-color 0.2s, transform 0.2s; }
.kpi-card:hover { border-color:var(--border2); transform:translateY(-2px); }
.kpi-val { font-family:var(--font-display); font-size:38px; font-weight:400; color:var(--gold); line-height:1; margin-bottom:6px; }
.kpi-label { font-size:11px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--text3); }

.chart-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px; margin-bottom:20px; }
.chart-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:16px; }
.chart-wrap { position:relative; }

.analytics-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
.analytics-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; }
.analytics-card-title { font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text3); margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border); }

.rank-list { display:flex; flex-direction:column; gap:8px; }
.rank-item { display:flex; align-items:center; gap:10px; }
.rank-bar-wrap { flex:1; height:5px; background:var(--surface3); border-radius:3px; overflow:hidden; }
.rank-bar { height:100%; background:var(--gold); border-radius:3px; transition:width 0.6s var(--ease); }
.rank-label { font-size:12px; color:var(--text2); min-width:0; width:170px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-val { font-size:12px; font-weight:600; color:var(--text); min-width:36px; text-align:right; }

/* TABLE */
.table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
table { width:100%; border-collapse:collapse; }
thead th { background:var(--surface2); font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text3); padding:11px 16px; text-align:left; border-bottom:1px solid var(--border); }
tbody tr { border-bottom:1px solid var(--border); transition:background 0.12s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:rgba(255,255,255,0.025); }
tbody td { padding:11px 16px; color:var(--text2); font-size:13px; }
tbody td:first-child { color:var(--text3); font-weight:600; font-size:11px; }

/* ════════════════ DRIVE ════════════════ */
.storage-bar-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 20px; margin-bottom:20px; }
.storage-bar-info { font-size:12px; color:var(--text3); margin-bottom:10px; }
.storage-bar { height:4px; background:var(--surface3); border-radius:2px; overflow:hidden; }
.storage-fill { height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-lt)); border-radius:2px; transition:width 0.6s var(--ease); }

.breadcrumb { display:flex; align-items:center; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.bc-item { font-size:13px; font-weight:500; color:var(--text3); cursor:pointer; padding:4px 8px; border-radius:var(--radius); transition:all 0.15s; }
.bc-item:hover { background:var(--surface2); color:var(--text2); }
.bc-item.active { color:var(--text); }
.bc-sep { color:var(--text4); font-size:12px; }

.drive-drop-overlay {
  display:none; position:absolute; inset:0; z-index:500;
  background:rgba(10,9,8,0.85); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; flex-direction:column;
  border:2px dashed var(--gold); border-radius:var(--radius-lg);
  animation:fade-up 0.2s var(--ease);
}
.drive-drop-overlay.active { display:flex; }
.drive-drop-inner { text-align:center; }
#page-drive { position:relative; }

/* The #file-grid container hosts one of three child layouts (table for
   detail view, list-view div, or grid-view div). It must be a plain block
   that fills the available width — the legacy grid template caused tables
   to be placed inside a single grid cell, leaving large empty space on
   the right. */
.file-grid { display:block; width:100%; }
.file-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px 14px; display:flex; flex-direction:column; align-items:center; gap:10px;
  cursor:pointer; transition:all 0.18s var(--ease); position:relative;
  opacity:0; transform:translateY(12px);
}
.file-card.in { animation:card-in 0.35s var(--ease) forwards; }
.file-card:hover { border-color:var(--border2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.25); }
.file-card.folder-card { border-color:rgba(200,168,107,0.2); }
.file-card.folder-card:hover { border-color:var(--gold); background:var(--gold-dim); }
.file-icon { font-size:36px; line-height:1; }
.file-name { font-size:12px; font-weight:500; color:var(--text); text-align:center; word-break:break-word; max-width:100%; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.file-size { font-size:10px; color:var(--text3); font-family:var(--font-mono); }
.file-actions { display:flex; gap:4px; opacity:0; transition:opacity 0.18s; position:absolute; top:8px; right:8px; }
.file-card:hover .file-actions { opacity:1; }

/* Upload drop zone highlight */
.drop-active .file-grid { opacity:0.4; pointer-events:none; }

/* Upload progress */
.upload-item {
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:12px 16px; margin-bottom:8px;
  animation:toast-in 0.25s var(--ease);
}
.upload-item-name { font-size:13px; font-weight:500; color:var(--text); flex:1; }
.upload-item-bar { height:3px; background:var(--surface3); border-radius:2px; overflow:hidden; flex:1; }
.upload-item-fill { height:100%; background:var(--gold); border-radius:2px; transition:width 0.3s; }

/* MODAL */
.modal-overlay { position:fixed; inset:0; z-index:1000; background:rgba(10,9,8,0.85); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:24px; }
.modal-overlay.open { display:flex; }
.modal-overlay.open .modal { animation:modal-in 0.32s var(--ease) forwards; }
.modal { background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius-lg); width:100%; max-width:500px; max-height:calc(100vh - 48px); overflow:hidden; display:flex; flex-direction:column; transform:scale(0.96) translateY(12px); opacity:0; box-shadow:0 32px 80px rgba(0,0,0,0.5); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--border); background:var(--surface2); flex-shrink:0; }
.modal-title { font-size:16px; font-weight:500; color:var(--text); }
.modal-close { width:28px; height:28px; border-radius:var(--radius); background:transparent; border:none; color:var(--text3); cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.modal-close:hover { background:var(--surface3); color:var(--text); }
.modal-body { padding:24px; overflow-y:auto; flex:1; }
.modal-footer { display:flex; justify-content:flex-end; gap:10px; padding:16px 24px; border-top:1px solid var(--border); background:var(--surface2); flex-shrink:0; }

/* EMPTY STATE */
.empty-state { text-align:center; padding:72px 32px; color:var(--text3); }
.empty-icon { font-size:40px; margin-bottom:14px; opacity:0.3; }
.empty-title { font-size:16px; font-weight:500; color:var(--text3); margin-bottom:6px; }
.empty-sub { font-size:13px; color:var(--text4); }

/* TOAST */
#toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast { display:flex; align-items:center; gap:12px; background:var(--surface2); border:1px solid var(--border2); border-radius:var(--radius-lg); padding:12px 18px; font-size:13px; font-weight:500; color:var(--text); min-width:260px; box-shadow:0 8px 24px rgba(0,0,0,0.3); animation:toast-in 0.3s var(--ease); }
.toast-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.toast.success .toast-dot { background:var(--green); }
.toast.error .toast-dot { background:var(--red); }
.toast.default .toast-dot { background:var(--gold); }

/* ANIMATIONS */
@keyframes slide-down  { to{opacity:1;transform:translateY(0)} }
@keyframes slide-right { to{opacity:1;transform:translateX(0)} }
@keyframes fade-up     { to{opacity:1;transform:translateY(0)} }
@keyframes card-in     { to{opacity:1;transform:translateY(0)} }
@keyframes modal-in    { to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes toast-in    { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:none} }
@keyframes row-in      { from{opacity:0;transform:translateY(3px)} to{opacity:1;transform:none} }
.row-anim { opacity:0; transform:translateY(3px); animation:row-in 0.15s var(--ease) forwards; }
.file-card.in { animation:card-in 0.15s var(--ease) forwards; }

/* SCROLLBAR */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--surface4); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--gold); }

/* ════════════════════════════════════════════════════════════════
   DRIVE — Detailed view, list view, grid-with-thumbs view
   ════════════════════════════════════════════════════════════════ */

/* Segmented controls (filter / view switcher).
   Styles all live here so the .active class can override them — when
   styles were inline on the button, they had higher specificity than
   the class and the active state never showed. */
.seg-btn {
  padding: 7px 12px;
  border: none;
  background: transparent;
  color: var(--text3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Icon-only variants (view switcher) — tighter padding, no letter-spacing */
.seg-btn.seg-btn-icon {
  padding: 7px 10px;
}
/* Separators between adjacent buttons */
.seg-control .seg-btn + .seg-btn { border-left: 1px solid var(--border); }

.seg-btn:hover {
  color: var(--text);
  background: var(--surface2);
}
.seg-btn.active {
  background: var(--gold-dim);
  color: var(--gold);
}
.seg-btn.active:hover {
  /* Stay gold on hover when already active */
  background: rgba(200, 168, 107, 0.18);
  color: var(--gold);
}

/* Detailed view — table */
.drive-detail-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.drive-detail-table thead tr {
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.drive-detail-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text3);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color .12s;
}
.drive-detail-table th:hover { color: var(--text); }
.drive-detail-table th .sort-arrow {
  display: inline-block;
  margin-left: 4px;
  opacity: 0;
  color: var(--gold);
  transition: opacity .12s;
}
.drive-detail-table th.sorted .sort-arrow { opacity: 1; }
.drive-detail-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .12s;
  cursor: default;
  animation: row-in 0.15s var(--ease) forwards;
  opacity: 0;
}
.drive-detail-table tbody tr:last-child { border-bottom: none; }
.drive-detail-table tbody tr:hover {
  background: rgba(200, 168, 107, 0.04);
}
.drive-detail-table tbody tr.is-folder { cursor: pointer; }
.drive-detail-table tbody tr.is-folder:hover { background: var(--gold-dim); }
.drive-detail-table tbody tr.selected {
  background: rgba(200, 168, 107, 0.08) !important;
  box-shadow: inset 2px 0 0 var(--gold);
}
.drive-detail-table td {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text2);
  vertical-align: middle;
}
.drive-detail-table td.col-name {
  color: var(--text);
  font-weight: 500;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.drive-detail-table td.col-name .name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.drive-detail-table td.col-size,
.drive-detail-table td.col-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text3);
  white-space: nowrap;
}
.drive-detail-table td.col-type {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text3);
}
.drive-detail-table td.col-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

/* Inline thumbnail in name column */
.row-thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
}
.row-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s;
  z-index: 2;
}
.row-thumb img.loaded { opacity: 1; }
.row-thumb .icon-fallback {
  color: var(--text3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: opacity .15s;
}
.row-thumb:has(img.loaded) .icon-fallback,
.row-thumb.has-image-loaded .icon-fallback { opacity: 0; }
.row-thumb.is-folder {
  background: var(--gold-dim);
  border-color: rgba(200, 168, 107, 0.25);
}
.row-thumb.is-folder .icon-fallback { color: var(--gold); }

/* Action icons in rows */
.row-action {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .12s;
  margin-left: 2px;
}
.row-action:hover {
  background: var(--surface3);
  color: var(--text);
  border-color: var(--border2);
}
.row-action.danger:hover {
  background: rgba(224, 92, 74, 0.12);
  color: #e05c4a;
  border-color: rgba(224, 92, 74, 0.3);
}
.row-action.primary:hover {
  background: var(--gold-dim);
  color: var(--gold);
  border-color: rgba(200, 168, 107, 0.3);
}

/* Inline rename — when a row is in edit mode */
.name-edit-input {
  background: var(--surface2);
  border: 1px solid var(--gold);
  border-radius: 4px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  padding: 4px 8px;
  outline: none;
  width: 100%;
  max-width: 380px;
}

/* List view (compact rows) */
.drive-list-view {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.drive-list-view .list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .12s;
  animation: row-in 0.15s var(--ease) forwards;
  opacity: 0;
}
.drive-list-view .list-row:hover { background: rgba(200, 168, 107, 0.04); }
.drive-list-view .list-row.is-folder:hover { background: var(--gold-dim); }
.drive-list-view .list-row .name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drive-list-view .list-row .meta {
  font-size: 11px;
  color: var(--text3);
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* Grid view (preview cards) */
.drive-grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.drive-grid-view .grid-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all .18s var(--ease);
  display: flex;
  flex-direction: column;
  animation: card-in 0.25s var(--ease) forwards;
  opacity: 0;
  transform: translateY(8px);
  position: relative;
}
.drive-grid-view .grid-card:hover {
  border-color: var(--border2);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.drive-grid-view .grid-card.is-folder { border-color: rgba(200, 168, 107, 0.25); }
.drive-grid-view .grid-card.is-folder:hover { border-color: var(--gold); }
.drive-grid-view .grid-thumb {
  height: 130px;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid var(--border);
}
.drive-grid-view .grid-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s;
  z-index: 2;
}
.drive-grid-view .grid-thumb img.loaded { opacity: 1; }
.drive-grid-view .grid-thumb .icon-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  font-size: 38px;
  z-index: 1;
  transition: opacity .15s;
}
/* Hide the fallback once the image has finished loading */
.drive-grid-view .grid-thumb:has(img.loaded) .icon-fallback,
.drive-grid-view .grid-thumb.has-image-loaded .icon-fallback { opacity: 0; }
.drive-grid-view .grid-card.is-folder .grid-thumb {
  background: var(--gold-dim);
}
.drive-grid-view .grid-card.is-folder .grid-thumb .icon-fallback { color: var(--gold); }
.drive-grid-view .grid-meta {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 50px;
}
.drive-grid-view .grid-meta .grid-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drive-grid-view .grid-meta .grid-sub {
  font-size: 10px;
  color: var(--text4);
  font-family: var(--font-mono);
}
.drive-grid-view .grid-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .15s;
}
.drive-grid-view .grid-card:hover .grid-actions { opacity: 1; }
.drive-grid-view .grid-actions button {
  background: rgba(20, 20, 20, 0.7);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
}
.drive-grid-view .grid-actions button:hover {
  background: rgba(20, 20, 20, 0.9);
}

/* Touch devices: always show grid actions */
@media (hover: none), (pointer: coarse) {
  .drive-grid-view .grid-actions { opacity: 1 !important; }
}

/* Context menu */
.ctx-menu-item {
  padding: 8px 12px;
  color: var(--text2);
  cursor: pointer;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background .12s, color .12s;
  user-select: none;
}
.ctx-menu-item:hover {
  background: rgba(200, 168, 107, 0.1);
  color: var(--text);
}
.ctx-menu-item.danger:hover {
  background: rgba(224, 92, 74, 0.1);
  color: #e05c4a;
}
.ctx-menu-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.ctx-menu-icon {
  width: 14px;
  height: 14px;
  color: currentColor;
  opacity: 0.7;
  flex-shrink: 0;
}

/* Drag & drop visual states */
.drive-detail-table tr.drop-target,
.drive-list-view .list-row.drop-target,
.drive-grid-view .grid-card.drop-target {
  background: rgba(200, 168, 107, 0.15) !important;
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.drive-detail-table tr.dragging,
.drive-list-view .list-row.dragging,
.drive-grid-view .grid-card.dragging {
  opacity: 0.4;
}

/* Breadcrumb root as a drop target (move file out to root) */
.bc-item.drop-target {
  background: var(--gold-dim);
  color: var(--gold) !important;
  outline: 1px solid var(--gold);
  outline-offset: 1px;
  border-radius: 4px;
}

/* ════════════════════════════════════════════════════════════════
   DRIVE — Tree sidebar (Explorer-style) + drag-select overlay
   ════════════════════════════════════════════════════════════════ */
.drive-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  position: relative;
}
.drive-main {
  min-width: 0;        /* allow grid cell to shrink so file-grid stays in bounds */
  min-height: 200px;   /* ensure the drag-target area is always there even when empty */
  position: relative;  /* anchor point for the drag-select rectangle */
}

.drive-tree-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}
.drive-tree-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text3);
}
.drive-tree-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}

/* Tree nodes */
.drive-tree-node {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text2);
  user-select: none;
  transition: background .12s, color .12s;
  white-space: nowrap;
  overflow: hidden;
}
.drive-tree-node:hover { background: rgba(200, 168, 107, 0.06); color: var(--text); }
.drive-tree-node.active {
  background: rgba(200, 168, 107, 0.12);
  color: var(--gold);
}
.drive-tree-node.drop-target {
  background: var(--gold-dim);
  outline: 1px solid var(--gold);
  outline-offset: -1px;
}
.drive-tree-node .tree-twist {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text3);
  transition: transform .15s, color .12s;
}
.drive-tree-node.expanded > .tree-twist { transform: rotate(90deg); }
.drive-tree-node.is-leaf .tree-twist { visibility: hidden; }
.drive-tree-node.active .tree-twist,
.drive-tree-node.active .tree-folder-icon { color: var(--gold); }
.drive-tree-node .tree-folder-icon {
  flex-shrink: 0;
  color: var(--text3);
}
.drive-tree-node .tree-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.drive-tree-children {
  display: none;
  padding-left: 12px;
  border-left: 1px solid var(--border);
  margin-left: 11px;
}
.drive-tree-children.expanded { display: block; }

/* Empty state for the tree */
.drive-tree-body .tree-empty {
  padding: 20px 14px;
  text-align: center;
  font-size: 11px;
  color: var(--text4);
  font-style: italic;
}

/* Drag-select rectangle (clic-glisser depuis le vide). Appended to body
   with position:fixed so it always renders above scrolled content. */
.drive-select-rect {
  position: fixed;
  background: rgba(200, 168, 107, 0.12);
  border: 1px solid rgba(200, 168, 107, 0.55);
  border-radius: 2px;
  pointer-events: none;
  z-index: 9990;
}

/* Selection checkbox shown on every drive row/card. Visible at all
   times so users can clearly see what's selectable, and toggle items
   without holding modifier keys. Filled in gold when selected. */
/* Selection checkbox shown on every drive row/card. Hidden by default,
   becomes visible on row hover OR when at least one item in the grid
   is already selected. Filled in gold when this specific item is
   selected. The hover-reveal lets users discover the feature without
   visual clutter; once a selection exists, all checkboxes show so users
   can keep adding/removing items. */
.sel-checkbox {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--text4);
  border-radius: 4px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity .15s, background .12s, border-color .12s;
  background: transparent;
  color: transparent;
  /* Hidden by default — opacity rather than display so layout stays
     stable when the checkbox appears/disappears */
  opacity: 0;
  pointer-events: none;
}
/* Show on hover of the parent item */
.drive-detail-table tbody tr:hover .sel-checkbox,
.drive-list-view .list-row:hover .sel-checkbox,
.drive-grid-view .grid-card:hover .sel-checkbox {
  opacity: 1;
  pointer-events: auto;
}
/* Show on every item once at least one is selected (so the user can
   keep adding/removing items in the same session). The .has-selection
   class is added to #file-grid by updateSelectionUI(). */
#file-grid.has-selection .sel-checkbox,
#ftp-list.has-selection .sel-checkbox {
  opacity: 1;
  pointer-events: auto;
}
/* Always show on selected items themselves */
.drive-detail-table tbody tr.selected .sel-checkbox,
.drive-list-view .list-row.selected .sel-checkbox,
.drive-grid-view .grid-card.selected .sel-checkbox {
  opacity: 1;
  pointer-events: auto;
}
.sel-checkbox:hover {
  border-color: var(--gold);
  background: rgba(200, 168, 107, 0.06);
}
/* When the parent row/card is .selected, fill the checkbox in gold */
.drive-detail-table tbody tr.selected .sel-checkbox,
.drive-list-view .list-row.selected .sel-checkbox,
.drive-grid-view .grid-card.selected .sel-checkbox {
  background: var(--gold);
  border-color: var(--gold);
  color: #0a0908;
}
.sel-checkbox svg {
  opacity: 0;
  transition: opacity .12s;
}
.drive-detail-table tbody tr.selected .sel-checkbox svg,
.drive-list-view .list-row.selected .sel-checkbox svg,
.drive-grid-view .grid-card.selected .sel-checkbox svg {
  opacity: 1;
}

/* Grid view: pin the checkbox to the top-left of the thumbnail so
   it doesn't sit on top of the file/folder icon. z-index keeps it
   above the icon-fallback regardless of stacking context. */
.drive-grid-view .grid-thumb { position: relative; }
.drive-grid-view .grid-thumb .sel-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  background: rgba(15,15,16,0.72);
  backdrop-filter: blur(2px);
}
.drive-grid-view .grid-card.selected .grid-thumb .sel-checkbox {
  background: var(--gold);
}

/* Position checkboxes on grid cards (top-left corner overlay) */
.drive-grid-view .grid-thumb .sel-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(20, 20, 20, 0.7);
  backdrop-filter: blur(4px);
  border-color: rgba(255, 255, 255, 0.3);
  z-index: 3;
}
.drive-grid-view .grid-card.selected .grid-thumb .sel-checkbox {
  background: var(--gold);
  border-color: var(--gold);
}

/* Mobile: stack the layout */
@media (max-width: 760px) {
  .drive-layout { grid-template-columns: 1fr; }
  .drive-tree-sidebar { position: static; max-height: 220px; }
}

/* ══════════════════════════════════════════════════════════════
   DRIVE — Sub-tabs (Files / Shares / Activity)
   ══════════════════════════════════════════════════════════════ */
.drive-subtabs {
  display: flex;
  gap: 2px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.drive-subtab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--text3);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  font-family: inherit;
}
.drive-subtab:hover { color: var(--text); }
.drive-subtab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.drive-subtab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--surface3);
  color: var(--text2);
  font-size: 10px;
  font-weight: 600;
}
.drive-subtab.active .drive-subtab-count {
  background: var(--gold-dim);
  color: var(--gold);
}

/* ───────────────────────────────────────────────────────────
   Share row — three-tier vertical hierarchy
     • title row:   recipient name + status badge
     • target row:  file/folder icon + filename + optional note
     • meta row:    validity, mode, password, counters, created
   Right column: stacked action buttons.
   ─────────────────────────────────────────────────────────── */
.share-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 12px;
  transition: background .12s, border-color .12s;
}
.share-row:hover { background: var(--surface2); border-color: var(--border2); }
.share-row.is-revoked { opacity: 0.85; }
.share-row.is-expired { opacity: 0.6; }

.share-row-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.share-row-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.share-row-title .share-title-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.share-row.is-revoked .share-row-title .share-title-text,
.share-row.is-expired .share-row-title .share-title-text {
  color: var(--text2);
}

.share-target-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text2);
  min-width: 0;
}
.share-target-line .share-target-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 5px;
  background: var(--surface2);
  color: var(--text3);
  flex-shrink: 0;
}
.share-target-line .share-target-name {
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.share-target-line .share-note {
  color: var(--text4);
  font-style: italic;
  font-size: 11px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
  margin-left: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-meta {
  font-size: 11px;
  color: var(--text3);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 2px;
}
.share-meta > span { white-space: nowrap; }

.share-row-actions {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .share-row { grid-template-columns: 1fr; }
  .share-row-actions { flex-wrap: wrap; }
  .share-target-line .share-note { border-left: none; padding-left: 0; }
}

/* Activity / trash row — kept for trash sub-page */
.trash-row, .activity-row {
  display: grid;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  transition: background .12s;
}
.trash-row:hover, .activity-row:hover { background: var(--surface2); }
.activity-row { grid-template-columns: 28px auto 1fr auto auto; }
.trash-row    { grid-template-columns: 28px 1fr auto auto; }
.activity-icon, .trash-icon {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text3);
  background: var(--surface2);
  border-radius: 6px;
  flex-shrink: 0;
}

.trash-name {
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trash-meta {
  font-size: 11px;
  color: var(--text3);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 3px;
}

.activity-target {
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-meta {
  font-size: 11px;
  color: var(--text3);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.share-status {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}
.share-status.is-active    { background: rgba(200, 168, 107, 0.12); color: var(--gold); }
.share-status.is-revoked   { background: rgba(224, 92, 74, 0.1); color: #e89f93; }
.share-status.is-expired   { background: var(--surface3); color: var(--text3); }
.share-status.is-exhausted { background: rgba(224, 92, 74, 0.08); color: #e89f93; }

.share-action-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  transition: all .12s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
}
.share-action-btn:hover { color: var(--gold); border-color: rgba(200, 168, 107, 0.3); }
.share-action-btn.danger:hover { color: #e89f93; border-color: rgba(224, 92, 74, 0.3); }

.activity-action-pill {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--surface3);
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  white-space: nowrap;
}
.activity-action-pill.is-share   { background: var(--gold-dim); color: var(--gold); }
.activity-action-pill.is-danger  { background: rgba(224, 92, 74, 0.1); color: #e89f93; }
.activity-action-pill.is-success { background: rgba(95, 175, 105, 0.12); color: #8dd09b; }

.activity-time {
  color: var(--text3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.activity-actor {
  color: var(--text2);
  font-size: 11px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .activity-row { grid-template-columns: 28px 1fr auto; }
  .activity-row .activity-meta { grid-column: 2 / -1; }
}

/* ────────────────────────────────────────────────────────────
   Activity / Shares — clean one-line toolbar
   ──────────────────────────────────────────────────────────── */
.activity-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: nowrap;
}
.activity-toolbar .activity-search-wrap {
  position: relative;
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 360px;
}
.activity-toolbar .activity-search-wrap .input { width: 100%; }
.activity-toolbar .activity-action-select {
  flex: 0 0 auto;
  width: 180px;
  max-width: 200px;
}
.activity-toolbar .btn-sm.danger-link {
  color: #e89f93;
  border-color: rgba(224,92,74,0.3);
}
.activity-toolbar .btn-sm.danger-link:hover {
  color: #f0a89c;
  border-color: rgba(224,92,74,0.5);
  background: rgba(224,92,74,0.08);
}
@media (max-width: 900px) {
  .activity-toolbar { flex-wrap: wrap; }
  .activity-toolbar .activity-search-wrap { max-width: none; }
  .activity-toolbar .activity-action-select { width: 160px; }
}

/* ────────────────────────────────────────────────────────────
   Activity — grouped expandable rows
   Each "group" is one recipient (or one IP for internal actions).
   The summary row shows: avatar, name, IP+country, event count,
   last-seen time, expand chevron. Clicking expands a list of
   individual events under it.
   ──────────────────────────────────────────────────────────── */
.activity-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color .15s, background .15s;
}
.activity-group:hover { border-color: var(--border2); }
.activity-group.is-open { border-color: rgba(200,168,107,0.3); }

.activity-group-head {
  display: grid;
  grid-template-columns: 36px 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
}
.activity-group-head:hover { background: var(--surface2); }
.activity-group.is-open .activity-group-head { background: var(--surface2); }

/* Avatar / origin badge — initial inside a circle, gold-tinted */
.activity-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(200,168,107,0.18), rgba(200,168,107,0.06));
  border: 1px solid rgba(200,168,107,0.25);
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  flex-shrink: 0;
  text-transform: uppercase;
}
.activity-avatar.is-internal {
  background: linear-gradient(135deg, rgba(200,168,107,0.28), rgba(200,168,107,0.1));
}
.activity-avatar.is-anonymous {
  background: linear-gradient(135deg, var(--surface3), var(--surface2));
  border-color: var(--border);
  color: var(--text3);
}

.activity-group-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-group-name .name-tag {
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(200,168,107,0.12);
  color: var(--gold);
  font-weight: 600;
  flex-shrink: 0;
}
.activity-group-name .name-tag.is-internal {
  background: rgba(200,168,107,0.18);
  color: var(--gold);
}
.activity-group-name .name-tag.is-guest {
  background: var(--surface3);
  color: var(--text3);
}
.activity-group-meta {
  font-size: 11px;
  color: var(--text3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.activity-group-meta .ip-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 7px;
  background: var(--surface3);
  border-radius: 4px;
  color: var(--text2);
  letter-spacing: -0.01em;
}
.activity-group-meta .meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text3);
  font-size: 11px;
}
.activity-group-meta .meta-chip svg { color: var(--text4); }
.activity-group-meta .meta-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.activity-group-meta .meta-badge.is-vpn {
  background: rgba(232,145,80,0.12);
  color: #e89150;
  border: 1px solid rgba(232,145,80,0.25);
}
.activity-group-meta .meta-dim {
  color: var(--text4);
  font-style: italic;
}
.activity-group-meta .flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.activity-group-count {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text2);
  white-space: nowrap;
}
.activity-group.is-open .activity-group-count {
  background: var(--gold-dim);
  border-color: rgba(200,168,107,0.25);
  color: var(--gold);
}
.activity-group-time {
  font-size: 11px;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.activity-group-chevron {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text3);
  transition: transform .2s, color .12s;
}
.activity-group.is-open .activity-group-chevron {
  transform: rotate(180deg);
  color: var(--gold);
}

.activity-group-body {
  border-top: 1px solid var(--border);
  display: none;
  background: var(--surface);
}
.activity-group.is-open .activity-group-body { display: block; }
.activity-group-body .activity-event {
  display: grid;
  grid-template-columns: 28px auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px 10px 60px;
  font-size: 12px;
  border-top: 1px solid var(--border);
}
.activity-group-body .activity-event:first-child { border-top: none; }
.activity-group-body .activity-event:hover { background: var(--surface2); }
.activity-group-body .activity-event .ev-icon {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2);
  border-radius: 5px;
  color: var(--text3);
}
.activity-group-body .activity-event .ev-target {
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-group-body .activity-event .ev-time {
  font-size: 11px;
  color: var(--text4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .activity-group-head {
    grid-template-columns: 32px 1fr auto auto;
    gap: 10px;
  }
  .activity-group-time { display: none; }
  .activity-group-body .activity-event {
    grid-template-columns: 24px 1fr auto;
    padding-left: 50px;
  }
  .activity-group-body .activity-event .ev-target { font-size: 11px; }
}

/* ════════════════ RESPONSIVE ════════════════ */
/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet & Mobile
   ════════════════════════════════════════════════════════════════ */

/* ── Touch devices: always show file actions ── */
@media (hover: none), (pointer: coarse) {
  .file-actions { opacity: 1 !important; }
  .file-card { padding-top: 40px !important; }
}

/* ── Medium-large screens (1200px and below) ── */
@media (max-width:1200px) and (min-width:769px) {
  .sidebar { width: 180px; }
  .nav-label { font-size: 12px; }
  .file-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .file-actions { opacity: 1; position: absolute; top: 6px; right: 6px; }
  .file-card { padding-top: 38px; }
  .page-header { flex-wrap: wrap; gap: 10px; }
  .page-actions { flex-wrap: wrap; gap: 6px; }
  .table-wrap table th:nth-child(5),
  .table-wrap table td:nth-child(5) { display: none; }
}

/* ── Tablet & narrow desktop (≤900px) ── */
@media (max-width:900px) {
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .analytics-grid { grid-template-columns:1fr; }
}

/* ── Mobile (≤768px) ── */
@media (max-width:768px) {
  /* ─── Layout ─── */
  .main-layout { flex-direction:column; }

  /* Sidebar becomes a horizontal scrollable nav at the top */
  .sidebar {
    width:100%;
    flex-direction:row;
    overflow-x:auto;
    overflow-y:hidden;
    border-right:none;
    border-bottom:1px solid var(--border);
    min-height:unset;
    transform:none;
    opacity:1;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar.in { animation:none; }
  .sidebar-section { display:flex; flex-direction:row; padding:6px 4px; flex-shrink:0; }
  .sidebar-section[style*="border-top"] {
    border-top:none !important;
    border-left:1px solid var(--border);
    padding-top:6px !important;
    margin-left:4px;
  }
  .sidebar-section-label { display:none; }
  .nav-item {
    padding:10px 12px;
    flex-direction:column;
    gap:3px;
    font-size:10px;
    border-left:none;
    border-bottom:2px solid transparent;
    white-space:nowrap;
    min-width:60px;
    text-align:center;
    border-radius:0;
    margin-bottom:0;
  }
  .nav-item.active { border-left:none; border-bottom-color:var(--gold); }
  .nav-item.active::before { display:none; }
  .nav-icon { font-size:16px; width:auto; }
  .nav-badge { font-size:9px; padding:1px 5px; min-width:auto; }
  .sidebar-bottom { display:none; }

  /* ─── Topbar ─── */
  .topbar { padding:0 12px; height:48px; }
  .tb-title, .tb-divider { display:none; }
  .tb-logo { height:18px; }
  .tb-user { display:none; }
  .tb-right { gap:6px; }
  .btn-topbar { font-size:11px; padding:5px 10px; }

  /* ─── Content ─── */
  .content { padding:16px 14px; }

  /* ─── Page headers ─── */
  .page-header {
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    margin-bottom:18px;
    padding-bottom:14px;
  }
  .page-title { font-size:24px; line-height:1.2; }
  .page-title em { font-size:0.7em; display:block; margin-top:2px; }
  .page-eyebrow { font-size:10px; }
  .page-actions {
    width:100%;
    flex-wrap:wrap;
    gap:6px;
  }
  .page-actions .btn { flex:1; min-width:auto; padding:8px 12px; font-size:12px; }

  /* ─── KPIs ─── */
  .kpi-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .kpi-card { padding:14px; }
  .kpi-val { font-size:24px; }
  .kpi-label { font-size:10px; }

  /* ─── Charts ─── */
  .chart-card { padding:14px; margin-bottom:14px; border-radius:var(--radius); }
  .chart-title { font-size:12px; }
  .analytics-grid { gap:10px; }

  /* ─── Tables ─── */
  .table-wrap {
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    border-radius:var(--radius);
  }
  .table-wrap table { font-size:11px; }
  .table-wrap th, .table-wrap td { padding:8px 10px; }
  /* Hide less critical columns on mobile (5th/6th columns) */
  .table-wrap table th:nth-child(5),
  .table-wrap table td:nth-child(5),
  .table-wrap table th:nth-child(6),
  .table-wrap table td:nth-child(6) { display: none; }

  /* ─── Drive (file grid) ─── */
  .file-grid {
    grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
    gap:8px;
  }
  .file-card { padding:8px; padding-top:36px !important; }
  .file-actions { opacity: 1 !important; position: absolute; top: 4px; right: 4px; }
  #page-drive .page-actions { flex-direction: row; }
  .breadcrumb {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    font-size:11px;
  }

  /* ─── Modals ─── */
  /* Slide up from bottom (mobile-native feel) */
  .modal {
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    max-width:100% !important;
    width:100% !important;
    max-height:92vh;
  }
  .modal-overlay { align-items:flex-end; padding:0; }
  .modal-header { padding:16px 18px 12px; }
  .modal-body { padding:14px 18px; max-height:65vh; overflow-y:auto; }
  .modal-footer { padding:12px 18px 16px; }
  .modal-title { font-size:16px; }
  .modal-footer .btn { flex:1; }
  /* Cards modal: fields stack on mobile */
  #modal-card .modal-body > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns:1fr !important;
  }

  /* ─── Forms ─── */
  .input { font-size:14px; padding:10px 12px; }
  /* Prevent iOS auto-zoom: input font must be ≥16px */
  input.input, textarea, select { font-size:16px !important; }
  .form-label { font-size:11px; }

  /* ─── Cards page ─── */
  .cards-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* ─── Login screen ─── */
  .login-card { padding:32px 24px; max-width:90%; }

  /* ─── Toast ─── */
  .toast { left:12px !important; right:12px !important; max-width:none !important; bottom:12px !important; }
}

/* ── Small mobile (≤480px) ── */
@media (max-width:480px) {
  .content { padding:14px 12px; }
  .kpi-grid { grid-template-columns:1fr; }
  .file-grid { grid-template-columns:repeat(2,1fr); }
  .tb-right { gap:4px; }
  .btn-topbar { font-size:10px; padding:4px 8px; }
  /* Lightbox buttons on small screens */
  #lightbox [style*="padding:6px 14px"] { padding: 5px 10px !important; font-size: 11px !important; }
  #lb-zoom-out, #lb-zoom-in { width: 28px !important; height: 28px !important; font-size: 14px !important; }
  /* Lightbox title shrinks */
  #lightbox-title { max-width:160px !important; font-size:11px !important; }
  /* Lightbox prev/next buttons smaller */
  #lightbox-prev, #lightbox-next { width:36px !important; height:36px !important; left:8px; right:8px; font-size:18px !important; }
  /* Page title smaller */
  .page-title { font-size:20px; }
  /* Hide more table columns on very narrow screens */
  .table-wrap table th:nth-child(4),
  .table-wrap table td:nth-child(4) { display: none; }
}

/* ── Landscape orientation on phones ── */
@media (max-width:900px) and (orientation:landscape) and (max-height:500px) {
  /* Reduce vertical spacing in landscape so content fits */
  .content { padding:12px; }
  .page-header { margin-bottom:12px; padding-bottom:10px; }
  .modal-body { max-height:50vh; }
  .modal-overlay { align-items:center; }
  .modal { border-radius:var(--radius-lg); max-width:90% !important; max-height:88vh; }
}

/* ════════════════════════════
   DRIVE EXPLORER — view modes
════════════════════════════ */
#view-btn-grid, #view-btn-list, #view-btn-detail {
  background: transparent;
  color: var(--text3);
  transition: all .15s;
  font-size: 15px;
}
#view-btn-grid.active, #view-btn-list.active, #view-btn-detail.active {
  background: var(--gold-dim);
  color: var(--gold);
}
#view-btn-grid:hover, #view-btn-list:hover, #view-btn-detail:hover {
  color: var(--text);
}

/* File card image preview */
.file-card img { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Undo toast — soft pulse around the icon and a smooth rise on appear */
@keyframes driveUndoPulse {
  0%   { transform: scale(0.85); opacity: 0.7; }
  70%  { transform: scale(1.4);  opacity: 0;   }
  100% { transform: scale(1.4);  opacity: 0;   }
}
@keyframes driveUndoRise {
  from { opacity: 0; transform: translate(-50%, 18px); }
  to   { opacity: 1; transform: translate(-50%, 0);    }
}
#drive-undo-toast { animation: driveUndoRise .28s cubic-bezier(.2,.8,.2,1); }

/* ════════════════════════════════════════════════════════════════
   FTP module — Drive-coherent
   ────────────────────────────────────────────────────────────────
   The FTP page reuses Drive's classes wherever possible: .breadcrumb,
   .drive-tree-sidebar, .drive-layout, .drive-detail-table,
   .drive-list-view, .drive-grid-view, .seg-control, .empty-state.
   Only what's truly FTP-specific lives here: the tree "Show parent"
   chevron, the multi-tab strip, and the in-browser code editor.
═══════════════════════════════════════════════════════════════════ */

/* The .ftp-drive-layout sizes the FTP panels to their content rather
   than to a fixed fraction of the viewport. The previous fixed
   `height: calc(100vh - 240px)` made the layout descend much further
   than the actual file list — leaving a vast empty stripe under the
   rows. Now both columns are bounded by `max-height` (so they never
   exceed the viewport), but their *actual* height is dictated by
   whichever column's content is taller. `align-items: stretch` (the
   .drive-layout default) then forces the shorter column to match,
   so Folders and the main file list always render at *exactly* the
   same height. */
.ftp-drive-layout {
  align-items: stretch;
  /* Cap to viewport so very long folders still scroll inside the
     panel rather than blowing past the bottom of the page. */
  max-height: calc(100vh - 200px);
  min-height: 280px;
}
.ftp-drive-layout .drive-tree-sidebar {
  position: relative;       /* drop Drive's sticky behaviour — the
                               sidebar is part of a stretch grid here */
  top: 0;
  max-height: none;         /* let the grid decide the height */
  height: auto;
  align-self: stretch;
  overflow: hidden;         /* the body inside scrolls instead */
  display: flex;
  flex-direction: column;
}
.ftp-drive-layout .drive-tree-sidebar .drive-tree-body {
  flex: 1 1 auto;
  min-height: 0;            /* allow the body to shrink within the flex */
  overflow-y: auto;
}
.ftp-drive-layout .drive-main {
  align-self: stretch;
  height: auto;             /* shrink to content, stretched up by the grid */
  max-height: 100%;         /* bounded by the layout's max-height */
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  position: relative;
}
.ftp-drive-layout .drive-main #ftp-list { padding: 0; }

/* In FTP detail/list views, drop the rounded corners + extra border
   on the inner table since the .drive-main wrapper already has them.
   Without this we get a double-border / nested-rounded look. */
.ftp-drive-layout .drive-detail-table {
  border: none;
  border-radius: 0;
  background: transparent;
}
.ftp-drive-layout .drive-list-view {
  border: none;
  border-radius: 0;
  background: transparent;
}
.ftp-drive-layout .drive-grid-view {
  padding: 14px;
}

/* Sticky table head inside the bounded scroll panel — the column
   labels (Name / Type / Size / Modified) stay visible while the
   body scrolls. This is what was unintentionally lost when the
   inner table inherited the wrapper's overflow.
   Padding/min-height are pinned to the same values as the sidebar's
   .drive-tree-head so the two headers line up pixel-for-pixel. */
.ftp-drive-layout .drive-tree-head,
.ftp-drive-layout .drive-detail-table thead tr {
  min-height: 40px;
  height: 40px;
  background: var(--surface2);
}
.ftp-drive-layout .drive-tree-head {
  padding: 0 14px;            /* vertical centering via min-height */
  box-sizing: border-box;
}
.ftp-drive-layout .drive-detail-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface2);
}
.ftp-drive-layout .drive-detail-table th {
  padding: 0 14px;            /* same horizontal padding, vertical via row min-height */
  height: 40px;
  vertical-align: middle;
}

/* "Show parent" chevron in the sidebar header — discreet, only
   visible on hover. Same idea as Finder's up arrow. */
.ftp-tree-up {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text3);
  cursor: pointer;
  width: 22px; height: 22px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s, border-color .12s;
}
.ftp-tree-up:hover {
  background: var(--surface3);
  color: var(--gold);
  border-color: var(--border);
}
.ftp-tree-up:disabled { opacity: 0.30; cursor: not-allowed; }
.ftp-tree-up:disabled:hover { background: transparent; border-color: transparent; color: var(--text3); }

/* ─── Multi-tab strip (FTP-only feature) ───────────────
   Only shown when the user has more than one tab open. Sits above
   the layout grid with a hairline separator. */
.ftp-tabs-wrap {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
}
.ftp-tabs {
  display: flex; align-items: stretch; gap: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--surface3) transparent;
  flex: 1;
}
.ftp-tabs::-webkit-scrollbar { height: 4px; }
.ftp-tabs::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 2px; }
.ftp-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text3);
  cursor: pointer; user-select: none;
  transition: background .12s, color .12s;
  flex-shrink: 0;
  min-width: 0;
  max-width: 200px;
  position: relative;
}
.ftp-tab:hover { background: var(--surface2); color: var(--text2); }
.ftp-tab.active {
  background: var(--surface2);
  color: var(--text);
  font-weight: 500;
  box-shadow: inset 0 -2px 0 var(--gold);
}
.ftp-tab-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 150px;
}
.ftp-tab-close {
  background: transparent; border: none;
  color: var(--text4); cursor: pointer;
  width: 16px; height: 16px;
  border-radius: 3px;
  font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
  flex-shrink: 0;
}
.ftp-tab-close:hover { background: rgba(224,92,74,0.18); color: var(--red); }
.ftp-tab-add {
  background: transparent; border: none;
  color: var(--text3); cursor: pointer;
  width: 32px; height: auto;
  font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
}
.ftp-tab-add:hover { background: var(--surface2); color: var(--gold); }

/* ─── Drive-style row selection in detail view ─────────
   Drive already styles tbody tr.selected. We add a checkbox-like
   gold rail on hover so single-click + Cmd-click reads as
   intentional selection rather than incidental hover. (Drive's
   own behaviour — kept identical for muscle memory.) */

/* ─── Drag-drop highlight on tree nodes & rows ─────────
   Reuses Drive's .drop-target class on tree nodes; for table rows
   we provide a parallel rule. */
.ftp-drive-layout .drive-detail-table tbody tr.drop-target,
.ftp-drive-layout .drive-list-view .list-row.drop-target,
.ftp-drive-layout .drive-grid-view .grid-card.drop-target {
  background: var(--gold-dim) !important;
  outline: 1px dashed var(--gold);
  outline-offset: -2px;
}

/* ─── Image compression preset cards ──────────────────
   Used in the Drive upload-with-compression modal. Each preset is
   a tappable card with a radio dot; the selected preset gets the
   gold rail treatment used elsewhere in the app. */
.compress-preset {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: background .14s, border-color .14s;
}
.compress-preset:hover {
  background: var(--surface2);
  border-color: var(--border2);
}
.compress-preset.selected {
  background: rgba(200,168,107,0.08);
  border-color: var(--gold);
}
.compress-preset-radio {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--text4);
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  transition: border-color .14s;
}
.compress-preset.selected .compress-preset-radio {
  border-color: var(--gold);
}
.compress-preset.selected .compress-preset-radio::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--gold);
}
.compress-preset-body { flex: 1; min-width: 0; }
.compress-preset-row1 {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 3px;
}
.compress-preset-name {
  font-size: 13px; font-weight: 500; color: var(--text);
}
.compress-preset-badge {
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold);
  background: rgba(200,168,107,0.12);
  padding: 2px 6px; border-radius: 3px;
}
.compress-preset-sub {
  font-size: 11.5px; color: var(--text4); line-height: 1.45;
}
.compress-preset-size {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text3); white-space: nowrap;
}
.compress-preset-size em {
  font-style: normal; color: var(--gold);
}

/* ─── Drag highlight (works for tree nodes, table rows, list rows,
       and breadcrumb items — any element with data-ftp-droptarget). */
.ftp-drop-hover {
  background: rgba(200,168,107,0.18) !important;
  outline: 1px dashed var(--gold);
  outline-offset: -2px;
}

/* The #ftp-drop-overlay reuses the .drive-drop-overlay class declared
   above, so the visual (dim backdrop + centered "Drop files to upload"
   text) is identical to the Drive page. Nothing to override here — we
   used to have a custom FTP styling but it diverged from the Drive look
   and felt out of place. */

/* ─── Context menu (FTP-specific so we don't conflict
       with the Drive menu) ───────────────────────────── */
.ftp-context-menu {
  position: fixed; z-index: 9998;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 7px;
  padding: 4px;
  min-width: 190px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.45);
  font-size: 12px;
}
.ftp-ctx-item {
  padding: 7px 11px;
  color: var(--text2);
  cursor: pointer;
  border-radius: 4px;
  display: flex; align-items: center; gap: 10px;
  transition: background .12s, color .12s;
  user-select: none;
}
.ftp-ctx-item:hover { background: rgba(200,168,107,0.10); color: var(--text); }
.ftp-ctx-item.danger:hover { background: rgba(224,92,74,0.10); color: var(--red); }
.ftp-ctx-item.disabled { opacity: 0.40; pointer-events: none; }
.ftp-ctx-icon {
  width: 13px; height: 13px;
  color: currentColor;
  opacity: 0.75;
  flex-shrink: 0;
}
.ftp-ctx-shortcut {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--text4);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.ftp-ctx-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ════════════════════════════════════════════════════════════════
   In-browser code editor (modal)
   ────────────────────────────────────────────────────────────────
   Lightweight: a textarea + a synced gutter for line numbers, a
   header with filename / language / save state, and a footer with
   cursor position. No heavyweight CodeMirror/Monaco — keeps the
   bundle small and the failure surface tiny.
═══════════════════════════════════════════════════════════════════ */
.ftp-editor-overlay {
  position: fixed; inset: 0;
  background: rgba(10,10,12,0.78);
  z-index: 9990;
  display: flex; align-items: center; justify-content: center;
  /* Tight padding on the overlay so the modal can grow to fill
     small viewports without ever clipping out of frame. */
  padding: 24px;
  backdrop-filter: blur(4px);
  animation: ftpEditorFade .18s var(--ease2);
}
@keyframes ftpEditorFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ftp-editor-modal {
  width: 100%;
  max-width: 1100px;
  /* Always clamp to the visible viewport — the previous fixed 760px
     ceiling could push the modal off the bottom of the page on
     ~720–820px screens. The (100vh - 48px) form mirrors the standard
     .modal-overlay sizing used everywhere else in the app. */
  height: 100%;
  max-height: calc(100vh - 48px);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 10px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  animation: ftpEditorRise .22s var(--ease);
}
@keyframes ftpEditorRise {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

.ftp-editor-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 14px;
}
.ftp-editor-title-wrap {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; flex: 1;
}
.ftp-editor-lang {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--gold);
  background: rgba(200,168,107,0.10);
  border: 1px solid rgba(200,168,107,0.22);
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 600;
  flex-shrink: 0;
}
.ftp-editor-title {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.ftp-editor-dirty {
  color: var(--gold);
  font-size: 14px;
  display: none;
  flex-shrink: 0;
}
.ftp-editor-dirty.shown { display: inline; }
.ftp-editor-meta {
  font-size: 11px;
  color: var(--text4);
  font-family: var(--font-mono);
  margin-left: 4px;
  flex-shrink: 0;
}
.ftp-editor-actions {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.ftp-editor-status {
  font-size: 11px;
  color: var(--text4);
  margin-right: 4px;
  font-family: var(--font-mono);
}
.ftp-editor-status.ok    { color: var(--green); }
.ftp-editor-status.err   { color: var(--red); }
.ftp-editor-btn {
  padding: 6px 12px;
  font-size: 11.5px;
  display: inline-flex; align-items: center; gap: 6px;
}
.ftp-editor-btn svg { display: block; }

.ftp-editor-body {
  flex: 1; min-height: 0;
  display: flex;
  background: #1a1917;
  position: relative;
  overflow: hidden;
}
.ftp-editor-gutter {
  flex-shrink: 0;
  width: 52px;
  padding: 12px 8px 12px 0;
  background: #1a1917;
  border-right: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text4);
  text-align: right;
  user-select: none;
  overflow: hidden;
  white-space: pre;
}
.ftp-editor-textarea {
  flex: 1; min-width: 0;
  padding: 12px 14px;
  background: #1a1917;
  color: var(--text);
  border: none;
  outline: none;
  resize: none;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
  caret-color: var(--gold);
}
.ftp-editor-textarea::selection {
  background: rgba(200,168,107,0.30);
}

.ftp-editor-footer {
  display: flex; align-items: center; gap: 16px;
  padding: 6px 14px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--text4);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.ftp-editor-footer span { white-space: nowrap; }

/* Tighter editor on narrow viewports */
@media (max-width: 900px) {
  .ftp-editor-overlay { padding: 12px; }
  .ftp-editor-modal { max-height: none; }
  .ftp-editor-gutter { width: 38px; font-size: 11px; }
  .ftp-editor-textarea { font-size: 11.5px; }
}