*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
  :root {
    --navy:#0B1929; --navy-mid:#112236; --teal:#00C9E0; --teal-dk:#0099AA;
    --amber:#F5A623; --white:#ffffff; --offwhite:#F4F6F9;
    --muted:#6B8FA3; --border:rgba(11,25,41,0.09);
    --success:#38A169; --warning:#D97706; --error:#E53E3E;
  }
  body { font-family:'DM Sans',sans-serif; background:var(--offwhite); color:var(--navy); min-height:100vh; }

  /* NAV */
  nav { background:var(--navy); padding:0 2rem; display:flex; align-items:center; justify-content:space-between; height:62px; border-bottom:1px solid rgba(255,255,255,0.06); position:sticky; top:0; z-index:100; }
  .nav-logo { display:flex; align-items:baseline; gap:8px; text-decoration:none; }
  .nav-logo-main { font-size:1.15rem; font-weight:600; color:var(--white); letter-spacing:-0.02em; }
  .nav-logo-main span { color:var(--teal); }
  .nav-logo-by { font-size:0.7rem; color:rgba(255,255,255,0.35); letter-spacing:0.04em; }
  .nav-links { display:flex; align-items:center; gap:1.75rem; list-style:none; }
  .nav-links a { color:rgba(255,255,255,0.6); text-decoration:none; font-size:0.88rem; transition:color 0.2s; }
  .nav-links a:hover, .nav-links a.active { color:var(--white); }
  .nav-right { display:flex; align-items:center; gap:1rem; }
  .nav-user { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,0.8); font-size:0.88rem; }
  .nav-avatar { width:30px; height:30px; background:var(--teal); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:700; color:var(--navy); }
  .nav-signout { font-size:0.82rem; color:rgba(255,255,255,0.4); cursor:pointer; background:none; border:none; font-family:'DM Sans',sans-serif; transition:color 0.2s; }
  .nav-signout:hover { color:rgba(255,255,255,0.8); }

  /* LOADING */
  #loading-screen { position:fixed; inset:0; background:var(--offwhite); display:flex; align-items:center; justify-content:center; z-index:999; }
  .spinner { width:36px; height:36px; border:3px solid var(--border); border-top-color:var(--teal); border-radius:50%; animation:spin 0.7s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }

  .page { max-width:1100px; margin:0 auto; padding:2.5rem 1.5rem; }

  /* PAGE HEADER */
  .page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; }
  .page-header-left h1 { font-family:'Inter',sans-serif; letter-spacing:-0.02em; font-size:1.75rem; color:var(--navy); margin-bottom:0.35rem; }
  .page-header-left p { font-size:0.9rem; color:var(--muted); line-height:1.6; }
  .btn-upload { background:var(--navy); color:var(--white); border:none; border-radius:10px; padding:11px 22px; font-size:0.9rem; font-weight:700; font-family:'DM Sans',sans-serif; cursor:pointer; display:flex; align-items:center; gap:8px; transition:background 0.2s; white-space:nowrap; }
  .btn-upload:hover { background:#1a3550; }

  /* STATS */
  .vault-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:2rem; }
  .vstat { background:var(--white); border:1px solid var(--border); border-radius:11px; padding:1rem 1.25rem; }
  .vstat-label { font-size:0.75rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.4rem; }
  .vstat-value { font-size:1.6rem; font-weight:700; color:var(--navy); line-height:1; }
  .vstat-value.amber { color:var(--warning); }
  .vstat-value.red { color:var(--error); }
  .vstat-value.teal { color:var(--teal-dk); }

  /* EXPIRY ALERT BANNER */
  .expiry-alert { background:rgba(217,119,6,0.08); border:1px solid rgba(217,119,6,0.25); border-radius:12px; padding:1rem 1.5rem; margin-bottom:1.5rem; display:none; }
  .expiry-alert.show { display:block; }
  .expiry-alert h3 { font-size:0.9rem; font-weight:700; color:#92400e; margin-bottom:0.3rem; }
  .expiry-alert p { font-size:0.83rem; color:#92400e; opacity:0.8; }

  /* FILTER TABS */
  .filter-tabs { display:flex; gap:0.5rem; margin-bottom:1.5rem; flex-wrap:wrap; }
  .filter-tab { background:var(--white); border:1.5px solid var(--border); border-radius:999px; padding:6px 16px; font-size:0.83rem; font-weight:500; color:var(--muted); cursor:pointer; transition:all 0.2s; font-family:'DM Sans',sans-serif; }
  .filter-tab:hover { border-color:var(--teal); color:var(--navy); }
  .filter-tab.active { background:var(--navy); border-color:var(--navy); color:var(--white); font-weight:600; }

  /* DOCUMENT GRID */
  .doc-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:1rem; }

  /* DOCUMENT CARD */
  .doc-card { background:var(--white); border:1.5px solid var(--border); border-radius:13px; overflow:hidden; transition:border-color 0.2s, box-shadow 0.2s, transform 0.15s; cursor:pointer; position:relative; }
  .doc-card:hover { border-color:var(--teal); box-shadow:0 4px 20px rgba(0,201,224,0.1); transform:translateY(-2px); }
  .doc-card.expiring { border-color:rgba(217,119,6,0.4); }
  .doc-card.expired { border-color:rgba(229,62,62,0.4); }
  .doc-thumb { height:130px; background:var(--offwhite); display:flex; align-items:center; justify-content:center; font-size:3rem; position:relative; overflow:hidden; }
  .doc-thumb img { width:100%; height:100%; object-fit:cover; }
  .doc-thumb-pdf { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, #f8f9fb 0%, #eef0f4 100%); }
  .doc-thumb-pdf span { font-size:2.5rem; }
  .expiry-badge { position:absolute; top:8px; right:8px; padding:3px 8px; border-radius:999px; font-size:0.68rem; font-weight:700; letter-spacing:0.03em; }
  .expiry-badge.valid { background:rgba(56,161,105,0.12); color:#276749; }
  .expiry-badge.soon { background:rgba(217,119,6,0.12); color:#92400e; }
  .expiry-badge.expired { background:rgba(229,62,62,0.12); color:#c53030; }
  .expiry-badge.none { background:rgba(107,143,163,0.1); color:var(--muted); }
  .doc-info { padding:0.85rem 1rem; }
  .doc-category { font-size:0.7rem; font-weight:600; color:var(--teal-dk); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:3px; }
  .doc-name { font-size:0.88rem; font-weight:600; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
  .doc-meta { font-size:0.75rem; color:var(--muted); }
  .doc-date { font-size:0.76rem; font-weight:600; color:var(--navy); margin-bottom:2px; }
  .doc-actions { display:flex; gap:0.5rem; padding:0 1rem 0.85rem; }
  .doc-btn { flex:1; padding:6px; border-radius:7px; border:1.5px solid var(--border); background:transparent; font-size:0.78rem; font-weight:600; font-family:'DM Sans',sans-serif; cursor:pointer; transition:all 0.2s; color:var(--navy); }
  .doc-btn:hover { border-color:var(--teal); color:var(--teal-dk); }
  .doc-btn.danger:hover { border-color:var(--error); color:var(--error); }

  /* EMPTY STATE */
  .empty-state { grid-column:1/-1; background:var(--white); border:2px dashed var(--border); border-radius:16px; padding:4rem 2rem; text-align:center; }
  .empty-icon { font-size:3rem; margin-bottom:1rem; }
  .empty-state h3 { font-size:1.05rem; font-weight:600; margin-bottom:0.5rem; }
  .empty-state p { font-size:0.87rem; color:var(--muted); line-height:1.6; max-width:340px; margin:0 auto; }

  /* UPLOAD MODAL */
  .modal-overlay { position:fixed; inset:0; background:rgba(11,25,41,0.6); display:flex; align-items:center; justify-content:center; z-index:500; padding:1rem; opacity:0; pointer-events:none; transition:opacity 0.2s; }
  .modal-overlay.show { opacity:1; pointer-events:all; }
  .modal { background:var(--white); border-radius:16px; width:100%; max-width:520px; overflow:hidden; transform:translateY(16px); transition:transform 0.2s; }
  .modal-overlay.show .modal { transform:translateY(0); }
  .modal-head { padding:1.5rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
  .modal-head h2 { font-size:1.1rem; font-weight:700; }
  .modal-close { background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--muted); line-height:1; padding:2px; }
  .modal-close:hover { color:var(--navy); }
  .modal-body { padding:1.5rem; }

  /* DRAG DROP */
  .drop-zone { border:2px dashed var(--border); border-radius:12px; padding:2.5rem 1.5rem; text-align:center; transition:all 0.2s; cursor:pointer; margin-bottom:1.25rem; }
  .drop-zone:hover, .drop-zone.drag-over { border-color:var(--teal); background:rgba(0,201,224,0.04); }
  .drop-zone-icon { font-size:2.5rem; margin-bottom:0.75rem; }
  .drop-zone h3 { font-size:0.97rem; font-weight:600; margin-bottom:0.35rem; }
  .drop-zone p { font-size:0.82rem; color:var(--muted); }
  .drop-zone p span { color:var(--teal); font-weight:600; cursor:pointer; }
  #file-input { display:none; }

  /* SELECTED FILE */
  .selected-file { background:var(--offwhite); border-radius:9px; padding:0.85rem 1rem; display:none; align-items:center; gap:10px; margin-bottom:1.25rem; }
  .selected-file.show { display:flex; }
  .selected-file-icon { font-size:1.5rem; }
  .selected-file-info { flex:1; min-width:0; }
  .selected-file-name { font-size:0.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .selected-file-size { font-size:0.76rem; color:var(--muted); }
  .selected-file-remove { background:none; border:none; cursor:pointer; color:var(--muted); font-size:1.1rem; }

  .form-group { display:flex; flex-direction:column; gap:5px; margin-bottom:1rem; }
  .form-label { font-size:0.82rem; font-weight:600; color:var(--navy); }
  .form-label span { font-weight:400; color:var(--muted); }
  .form-select, .form-input { padding:10px 13px; border:1.5px solid var(--border); border-radius:8px; font-size:0.9rem; font-family:'DM Sans',sans-serif; color:var(--navy); outline:none; transition:border-color 0.2s; background:var(--white); width:100%; }
  .form-select:focus, .form-input:focus { border-color:var(--teal); }

  /* UPLOAD PROGRESS */
  .upload-progress { display:none; }
  .upload-progress.show { display:block; }
  .progress-track { height:6px; background:var(--offwhite); border-radius:6px; overflow:hidden; margin-bottom:8px; }
  .progress-bar { height:100%; background:var(--teal); border-radius:6px; transition:width 0.3s; }
  .progress-label { font-size:0.8rem; color:var(--muted); }

  .modal-foot { padding:1rem 1.5rem; border-top:1px solid var(--border); display:flex; gap:0.75rem; justify-content:flex-end; }
  .btn-cancel { background:transparent; border:1.5px solid var(--border); border-radius:9px; padding:10px 20px; font-size:0.88rem; font-weight:600; font-family:'DM Sans',sans-serif; cursor:pointer; color:var(--navy); transition:border-color 0.2s; }
  .btn-cancel:hover { border-color:var(--navy); }
  .btn-confirm { background:var(--navy); color:var(--white); border:none; border-radius:9px; padding:10px 24px; font-size:0.88rem; font-weight:700; font-family:'DM Sans',sans-serif; cursor:pointer; transition:background 0.2s; }
  .btn-confirm:hover { background:#1a3550; }
  .btn-confirm:disabled { opacity:0.5; cursor:not-allowed; }

  /* VIEWER MODAL */
  .viewer-overlay { position:fixed; inset:0; background:rgba(7,17,28,0.92); display:flex; flex-direction:column; z-index:600; opacity:0; pointer-events:none; transition:opacity 0.2s; }
  .viewer-overlay.show { opacity:1; pointer-events:all; }
  .viewer-head { padding:1rem 1.5rem; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
  .viewer-head-info h3 { font-size:1rem; font-weight:600; color:var(--white); }
  .viewer-head-info p { font-size:0.78rem; color:rgba(255,255,255,0.45); margin-top:2px; }
  .viewer-actions { display:flex; gap:0.75rem; align-items:center; }
  .viewer-btn { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); border-radius:8px; padding:8px 16px; font-size:0.83rem; font-weight:600; color:var(--white); cursor:pointer; font-family:'DM Sans',sans-serif; transition:background 0.2s; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
  .viewer-btn:hover { background:rgba(255,255,255,0.18); }
  .viewer-close { background:none; border:none; color:rgba(255,255,255,0.6); font-size:1.5rem; cursor:pointer; transition:color 0.2s; }
  .viewer-close:hover { color:var(--white); }
  .viewer-body { flex:1; display:flex; align-items:center; justify-content:center; padding:0 1.5rem 1.5rem; overflow:hidden; }
  .viewer-body iframe { width:100%; height:100%; border:none; border-radius:8px; background:var(--white); }
  .viewer-body img { max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; }

  /* TOAST */
  .toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%); background:var(--navy); color:var(--white); padding:12px 24px; border-radius:10px; font-size:0.88rem; font-weight:500; box-shadow:0 8px 32px rgba(0,0,0,0.2); display:none; z-index:999; white-space:nowrap; }
  .toast.show { display:block; animation:fadeup 0.3s ease; }
  .toast.success { background:#1a5c38; }
  .toast.error { background:#c53030; }
  @keyframes fadeup { from { opacity:0; transform:translateX(-50%) translateY(8px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }

  @media(max-width:768px) {
    .vault-stats { grid-template-columns:repeat(2,1fr); }
    .doc-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
  }