/* ── TOKENS ── */
:root {
    --bg-deep: #F0F4FB;
    --bg-base: #F5F7FC;
    --bg-surface: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-card-hover: #EEF2FA;
    --bg-elevated: #E4EAF6;
    --bg-input: #F0F4FB;

    --sw-blue: #10163a;
    --sw-blue-bright: #1a2456;
    --sw-blue-glow: rgba(16,22,58,0.08);
    --sw-accent: #06B6D4;
    --sw-violet: #8B5CF6;
    --sw-success: #10B981;
    --sw-warning: #F59E0B;
    --sw-danger: #EF4444;

    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #94A3B8;
    --text-accent: #10163a;

    --border: rgba(16,22,58,0.12);
    --border-strong: rgba(16,22,58,0.25);
    --divider: rgba(0,0,0,0.06);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;

    --shadow-sm: 0 2px 8px rgba(15,23,42,0.06);
    --shadow-md: 0 4px 20px rgba(15,23,42,0.08);
    --shadow-lg: 0 8px 40px rgba(15,23,42,0.12);
    --shadow-blue: 0 4px 24px rgba(16,22,58,0.2);

    --transition: 200ms cubic-bezier(0.4,0,0.2,1);
    --transition-slow: 350ms cubic-bezier(0.4,0,0.2,1);
    --spring: 400ms cubic-bezier(0.34,1.56,0.64,1);

    --sidebar-width: 260px;
    --header-height: 64px;
    --bottom-nav-height: 68px;
  }

  /* ── RESET ── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { font-size: 16px; -webkit-text-size-adjust: 100%; }
  body {
    font-family: sans-serif;
    background: var(--bg-deep);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  ::selection { background: rgba(26,36,86,0.3); color: var(--text-primary); }
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--sw-blue); }
  a { text-decoration: none; color: inherit; }
  button { cursor: pointer; font-family: inherit; }
  input, select, textarea { font-family: inherit; }

  /* ── FORM ELEMENTS ── */
  .sw-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-size: 14px;
    color: var(--text-primary);
    outline: none;
    transition: all var(--transition);
  }
  .sw-input::placeholder { color: var(--text-muted); }
  .sw-input:focus {
    border-color: var(--sw-blue);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(16,22,58,0.12);
  }
  .sw-input.error { border-color: var(--sw-danger); }
  .sw-input.error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.12); }

  .sw-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
  }

  .sw-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--sw-blue);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    transition: all var(--transition);
    box-shadow: var(--shadow-blue);
  }
  .sw-btn-primary:hover {
    background: var(--sw-blue-bright);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(16,22,58,0.4);
  }
  .sw-btn-primary:active { transform: translateY(0); }
  .sw-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

  /* ── ALERTS ── */
  .sw-alert-error {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    color: #FCA5A5;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* ── ANIMATIONS ── */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
  .animate-fade-up { animation: fadeInUp 0.5s ease forwards; }
  .animate-fade    { animation: fadeIn 0.4s ease forwards; }

  /* ── FILE TYPE COLORS ── */
.ft-folder  { background: rgba(255,160,0,0.12); }
.ft-pdf     { background: rgba(239,68,68,0.12); }
.ft-word    { background: rgba(16,22,58,0.12); }
.ft-excel   { background: rgba(16,185,129,0.12); }
.ft-ppt     { background: rgba(245,158,11,0.12); }
.ft-img     { background: rgba(139,92,246,0.12); }
.ft-video   { background: rgba(236,72,153,0.12); }
.ft-zip     { background: rgba(107,114,128,0.2); }
.ft-default { background: rgba(6,182,212,0.12); }

/* ── FILE ICON IMAGES ── */
.file-icon-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  pointer-events: none;
  flex-shrink: 0;
}
.file-icon-img--list {
  width: 22px;
  height: 22px;
}
.file-icon-img--compact {
  width: 18px;
  height: 18px;
}

.tag-sidebar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 10px;
}

/* ── BADGE ── */
.sw-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 500;
}
.sw-badge-blue   { background:rgba(16,22,58,0.15);  color:#10163a; border:1px solid rgba(26,36,86,0.2); }
.sw-badge-green  { background:rgba(16,185,129,0.12); color:#34D399; border:1px solid rgba(16,185,129,0.2); }
.sw-badge-amber  { background:rgba(245,158,11,0.12); color:#FCD34D; border:1px solid rgba(245,158,11,0.2); }
.sw-badge-violet { background:rgba(139,92,246,0.12); color:#A78BFA; border:1px solid rgba(139,92,246,0.2); }
.sw-badge-red    { background:rgba(239,68,68,0.12);  color:#FCA5A5; border:1px solid rgba(239,68,68,0.2); }
.sw-badge-gray   { background:rgba(107,114,128,0.15);color:#9CA3AF; border:1px solid rgba(107,114,128,0.2); }

/* ── APP SHELL ── */
.app-shell { display:grid; grid-template-columns:var(--sidebar-width) 1fr; grid-template-rows:var(--header-height) 1fr; grid-template-areas:"sidebar header""sidebar main"; height:100vh; height:100dvh; }
.main { grid-area:main; overflow-y:auto; background:var(--bg-base); }
.page { padding:24px; max-width:1400px; }

/* ── SIDEBAR ── */
.sidebar { grid-area:sidebar; background:var(--bg-surface); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; position:relative; z-index:100; }
.sidebar-logo { display:flex; align-items:center; gap:12px; padding:20px 20px 16px; border-bottom:1px solid var(--divider); flex-shrink:0; }
.logo-icon { width:38px; height:38px; background:linear-gradient(135deg,var(--sw-blue),var(--sw-accent)); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; color:white; box-shadow:var(--shadow-blue); flex-shrink:0; }
.logo-text { display:flex; flex-direction:column; line-height:1.2; }
.logo-brand { font-weight:800; font-size:15px; color:var(--text-primary); letter-spacing:-0.3px; }
.logo-product { font-size:10px; font-weight:600; color:var(--sw-accent); text-transform:uppercase; letter-spacing:1.5px; }
a.user-pill { text-decoration:none; color:inherit; }
.user-pill { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-sm); cursor:pointer; transition:background var(--transition); }
.user-pill:hover { background:var(--bg-card); }
.user-pill.active { background:var(--sw-blue-glow); }
.user-avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--sw-violet),var(--sw-blue)); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:white; flex-shrink:0; overflow:hidden; }
.user-avatar-img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.user-info { flex:1; min-width:0; }
.user-name { font-size:13px; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role { font-size:11px; color:var(--text-muted); }
.sidebar-section { padding:16px 12px 4px; flex-shrink:0; }
.sidebar-section-label { font-size:10px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:1.2px; padding:0 8px 8px; }
.sidebar-upload-btn { width:100%; justify-content:center; margin-bottom:8px; border-radius:var(--radius-sm); }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-sm); cursor:pointer; transition:all var(--transition); margin-bottom:2px; color:var(--text-secondary); font-size:13.5px; font-weight:500; position:relative; text-decoration:none; }
.nav-item:hover { background:var(--bg-card); color:var(--text-primary); }
.nav-item.active { background:var(--sw-blue-glow); color:var(--text-accent); border:1px solid rgba(26,36,86,0.2); }
.nav-item.active::before { content:''; position:absolute; left:-1px; top:20%; bottom:20%; width:3px; background:var(--sw-blue); border-radius:0 3px 3px 0; box-shadow:0 0 8px var(--sw-blue); }
.nav-item-signout { color:var(--sw-danger); }
.nav-item-signout .nav-icon { color:var(--sw-danger); }
.nav-item-signout:hover { color:var(--sw-danger); background:rgba(239,68,68,0.08); }
.nav-icon { width:18px; text-align:center; font-size:14px; flex-shrink:0; }
.nav-badge { margin-left:auto; background:var(--sw-blue); color:white; font-size:10px; font-weight:600; padding:1px 7px; border-radius:20px; }
.nav-badge-success { background:var(--sw-success); }
.sidebar-divider { height:1px; background:var(--divider); margin:8px 12px; }
.sidebar-footer { margin-top:auto; padding:12px; border-top:1px solid var(--divider); flex-shrink:0; }
.storage-widget { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px; }
.storage-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.storage-title { font-size:12px; font-weight:600; color:var(--text-secondary); }
.storage-amount { font-size:11px; color:var(--text-muted); }
.storage-bar { height:4px; background:var(--bg-elevated); border-radius:4px; overflow:hidden; margin-bottom:8px; }
.storage-fill { height:100%; min-width:4px; background:linear-gradient(90deg,var(--sw-blue),var(--sw-accent)); border-radius:4px; }
.storage-info { display:flex; justify-content:space-between; }
.storage-used { font-size:11px; color:var(--text-accent); font-weight:600; }
.storage-total { font-size:11px; color:var(--text-muted); }

/* ── HEADER ── */
.header { grid-area:header; background:rgba(245,247,252,0.9); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 24px; gap:16px; position:sticky; top:0; z-index:50; }
.mobile-menu-btn { display:none; width:40px; height:40px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-secondary); font-size:16px; align-items:center; justify-content:center; flex-shrink:0; transition:all var(--transition); }
.mobile-menu-btn:hover { color:var(--text-primary); border-color:var(--border-strong); }
.breadcrumb { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-muted); flex-shrink:0; max-width:240px; overflow:hidden; }
.breadcrumb-item { cursor:pointer; transition:color var(--transition); white-space:nowrap; text-decoration:none; color:var(--text-muted); }
.breadcrumb-item:hover { color:var(--text-accent); }
.breadcrumb-item.active { color:var(--text-primary); font-weight:500; }
.breadcrumb-sep { font-size:11px; }
.header-search { flex:1; max-width:480px; position:relative; margin:0 auto; }
.search-input { width:100%; background:var(--bg-input); border:1px solid var(--border); border-radius:50px; padding:9px 16px 9px 42px; font-size:13.5px; color:var(--text-primary); outline:none; transition:all var(--transition); }
.search-input::placeholder { color:var(--text-muted); }
.search-input:focus { border-color:var(--sw-blue); background:var(--bg-card); box-shadow:0 0 0 3px rgba(16,22,58,0.12); }
.search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:13px; pointer-events:none; }
.search-kbd { position:absolute; right:14px; top:50%; transform:translateY(-50%); background:var(--bg-elevated); border:1px solid var(--border); border-radius:5px; padding:1px 7px; font-size:10px; color:var(--text-muted); pointer-events:none; }
.header-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.header-btn { width:38px; height:38px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-secondary); font-size:15px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--transition); flex-shrink:0; }
.header-btn:hover { background:var(--bg-elevated); color:var(--text-primary); border-color:var(--border-strong); }
.sw-btn-header { display:flex; align-items:center; gap:8px; background:var(--sw-blue); color:white; padding:9px 18px; border-radius:50px; font-size:13.5px; font-weight:600; border:none; cursor:pointer; transition:all var(--transition); white-space:nowrap; box-shadow:var(--shadow-blue); }
.sw-btn-header:hover { background:var(--sw-blue-bright); transform:translateY(-1px); }

/* ── SIDEBAR OVERLAY ── */
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:99; backdrop-filter:blur(4px); }
.sidebar-overlay.visible { display:block; animation:fadeIn 0.2s ease; }

/* ── MODAL (shared) ── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); z-index:500;
  display:none; align-items:center; justify-content:center;
  padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.modal-overlay.open { display:flex; animation:fadeIn 0.2s ease; }
.modal {
  background:var(--bg-surface); border:1px solid var(--border-strong); border-radius:var(--radius-xl);
  padding:24px; width:100%; max-width:480px; margin:auto; flex-shrink:0;
  max-height:min(90dvh, calc(100% - 32px)); overflow-y:auto;
  animation:popIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.modal-handle { width:36px; height:4px; background:var(--bg-elevated); border-radius:4px; margin:0 auto 20px; display:none; }
.modal-title { font-size:17px; font-weight:700; color:var(--text-primary); margin-bottom:16px; }
.modal-btn-cancel { flex:1; padding:11px; border-radius:var(--radius-sm); background:var(--bg-elevated); border:1px solid var(--border); color:var(--text-secondary); font-size:14px; font-weight:500; cursor:pointer; transition:all var(--transition); }
.modal-btn-cancel:hover { background:var(--bg-card-hover); color:var(--text-primary); }
.modal-btn-upload { flex:2; padding:11px; border-radius:var(--radius-sm); background:var(--sw-blue); border:none; color:white; font-size:14px; font-weight:600; cursor:pointer; transition:all var(--transition); display:flex; align-items:center; justify-content:center; gap:8px; }
.modal-btn-upload:hover { background:var(--sw-blue-bright); }
.modal-btn-upload:disabled { opacity:0.5; cursor:not-allowed; }

/* ── TOAST (shared) ── */
.toast-container { position:fixed; bottom:24px; right:20px; display:flex; flex-direction:column; gap:8px; z-index:2000; pointer-events:none; }
.toast { background:var(--bg-card); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:12px 16px; font-size:13px; color:var(--text-primary); display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-lg); pointer-events:all; min-width:240px; max-width:320px; animation:slideUp 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.toast.success { border-color:rgba(16,185,129,0.4); }
.toast.success .toast-icon { color:var(--sw-success); }
.toast.error { border-color:rgba(239,68,68,0.4); }
.toast.error .toast-icon { color:var(--sw-danger); }

/* ── BOTTOM NAV ── */
.bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; height:var(--bottom-nav-height); background:rgba(245,247,252,0.92); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-top:1px solid var(--border); padding:0 8px; padding-bottom:env(safe-area-inset-bottom); z-index:200; align-items:center; justify-content:space-around; }
.bottom-nav-item { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 12px; border-radius:var(--radius-md); cursor:pointer; min-width:56px; color:var(--text-muted); font-size:10px; font-weight:500; text-decoration:none; }
.bn-icon { font-size:18px; transition:all var(--transition); }
.bottom-nav-item.active { color:var(--sw-blue-bright); }
.bottom-nav-fab { width:52px; height:52px; background:linear-gradient(135deg,var(--sw-blue),var(--sw-accent)); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; color:white; cursor:pointer; border:none; box-shadow:var(--shadow-blue); }

/* ── RESPONSIVE (shared) ── */
@media (max-width:900px) {
  .app-shell { grid-template-columns:1fr; grid-template-areas:"header""main"; }
  .sidebar { position:fixed; left:0; top:0; bottom:0; z-index:150; transform:translateX(-100%); transition:transform var(--transition-slow); width:var(--sidebar-width); }
  .sidebar.open { transform:translateX(0); box-shadow:8px 0 32px rgba(0,0,0,0.5); }
  .mobile-menu-btn { display:flex !important; }
  .header { padding:0 16px; }
  .search-kbd { display:none; }
  .bottom-nav { display:flex; }
  .main { padding-bottom:var(--bottom-nav-height); }
  .page { padding:16px; }
  .toast-container { bottom:calc(var(--bottom-nav-height) + 16px); right:16px; left:16px; }
  .toast { min-width:unset; width:100%; }
  .sw-btn-header span { display:none; }
  .sw-btn-header { padding:9px 12px; border-radius:var(--radius-sm); }
  .modal-overlay { padding:12px; padding-bottom:max(12px, env(safe-area-inset-bottom)); }
  .modal { max-width:100%; max-height:calc(100dvh - 24px); padding:20px 16px 24px; border-radius:var(--radius-lg); }
}
/* ── KEYFRAMES (shell) ── */
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes popIn { from{opacity:0;transform:scale(0.92)} to{opacity:1;transform:scale(1)} }