/* Viral Vault — scoped design system. All rules are namespaced under
   .vault-scope so they never leak into the Competitor Dashboard's own
   (dark) theme, and vice versa. */

/* พาเลตล็อกกับ dashboard หลัก (style.css): surface/line ใช้ค่าเดียวกับ
   --panel/--panel-2/--border ของแอป ส่วน accent ส้มแดงเก็บไว้เป็นสีประจำโซน Viral Vault
   ค่าใน .vault-scope = โหมดมืด, ชุด light อยู่ในบล็อกถัดไป */
.vault-scope{
  --paper:#0f1115;
  --surface:#171a21;
  --surface-2:#1e222b;
  --ink:#e8eaed;
  --ink-2:#aeb4c4;
  --ink-3:#8a90a0;
  --line:#2a2f3a;
  --line-2:#242830;
  --accent:#FF5C3E;
  --accent-hover:#FF7454;
  --accent-ink:#14171F;
  --accent-soft:#3A2119;
  --good:#34d399;
  --hook-curiosity:#9C85FF;
  --hook-curiosity-soft:#241D3D;
  --hook-fomo:#F0AC42;
  --hook-fomo-soft:#332711;
  --hook-shock:#F16BAC;
  --hook-shock-soft:#341726;
  --hook-problem:#3BC4B3;
  --hook-problem-soft:#0F2C28;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 12px 28px rgba(0,0,0,.45);
  --shadow-lg:0 24px 60px rgba(0,0,0,.6);
  --radius-card:18px;
  --radius-md:12px;
  --radius-sm:8px;
  --radius-pill:999px;
  --font-display:'Kanit','Noto Sans Thai','Segoe UI',sans-serif;
  --font-body:'IBM Plex Sans Thai','IBM Plex Sans','Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Menlo,Consolas,monospace;

  display:block;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* โหมดสว่าง: accent ส้มแดงต้องเข้มขึ้นเพื่อ contrast บนพื้นขาว
   และสี hook ทุกตัวสลับจาก "เข้มบนพื้นมืด" เป็น "เข้มบนพื้นอ่อน" */
[data-theme="light"] .vault-scope{
  --paper:#f4f6fb;
  --surface:#ffffff;
  --surface-2:#f1f3f9;
  --ink:#171a21;
  --ink-2:#4a5163;
  --ink-3:#6b7280;
  --line:#dde2ec;
  --line-2:#e7ebf3;
  --accent:#E0431F;
  --accent-hover:#C43514;
  --accent-ink:#ffffff;
  --accent-soft:#FFEDE7;
  --good:#0b8a5f;
  --hook-curiosity:#6242D6;
  --hook-curiosity-soft:#EFEBFF;
  --hook-fomo:#A9741A;
  --hook-fomo-soft:#FDF2DC;
  --hook-shock:#C93E7B;
  --hook-shock-soft:#FDEAF3;
  --hook-problem:#0F7A6E;
  --hook-problem-soft:#DDF3F0;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 12px 28px rgba(16,24,40,.10);
  --shadow-lg:0 24px 60px rgba(16,24,40,.16);
}

/* โซน Vault ต่อท้าย dashboard ในหน้าเดียวกัน */
.vault-section{
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.vault-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:14px;
}
.vault-head-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.vault-scope *,.vault-scope *::before,.vault-scope *::after{ box-sizing:border-box; }
.vault-scope img,.vault-scope svg{ display:block; max-width:100%; }
.vault-scope button{ font:inherit; color:inherit; }
.vault-scope input,.vault-scope select,.vault-scope textarea{ font:inherit; color:inherit; }
.vault-scope ::selection{ background:var(--accent-soft); color:var(--accent); }
.vault-scope :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion: reduce){
  .vault-scope *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

.vault-scope.hidden{ display:none; }

.vault-scope .icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--radius-pill);
  background:transparent; border:1px solid transparent; cursor:pointer;
  color:var(--ink-2); transition:background .15s ease, color .15s ease;
}
.vault-scope .icon-btn:hover{ background:var(--surface-2); color:var(--ink); }

.vault-scope .btn{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:9px 16px; border-radius:var(--radius-pill); border:1px solid var(--line);
  background:var(--surface); font-weight:500; font-size:13.5px; cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.vault-scope .btn:active{ transform:scale(.97); }
.vault-scope .btn-accent{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600; box-shadow:var(--shadow-sm); }
.vault-scope .btn-accent:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
.vault-scope .btn-outline{ background:var(--surface); border-color:var(--line); color:var(--ink); }
.vault-scope .btn-outline:hover{ border-color:var(--ink-3); }
.vault-scope .btn-ghost{ background:transparent; border-color:transparent; color:var(--ink-2); padding:9px 12px; }
.vault-scope .btn-ghost:hover{ background:var(--surface-2); color:var(--ink); }
.vault-scope .btn-ghost.is-active{ background:var(--accent-soft); color:var(--accent); }
.vault-scope .btn-block{ width:100%; justify-content:center; }
.vault-scope .btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- Head ---------- */
.vault-scope .brand{ display:flex; align-items:center; gap:10px; }
.vault-scope .brand-mark{
  width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg,var(--accent),#FF8A5C); color:#fff; flex:none;
}
.vault-scope .brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.vault-scope .brand-name{ font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:.2px; }
.vault-scope .brand-sub{ font-size:11.5px; color:var(--ink-3); letter-spacing:.3px; }
.vault-scope .stat-badge{
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px;
  background:var(--surface-2); border-radius:var(--radius-pill); font-size:12.5px; font-weight:500;
  color:var(--ink-2); font-variant-numeric:tabular-nums;
}
.vault-scope .stat-badge svg{ color:var(--accent); }

.vault-scope .hook-distribution{
  display:flex; flex-direction:column; gap:8px; margin-bottom:16px;
}
.vault-scope .hd-bar{
  display:flex; width:100%; height:7px; border-radius:var(--radius-pill); overflow:hidden;
  background:var(--surface-2);
}
.vault-scope .hd-seg{ width:var(--w); background:var(--c); }
.vault-scope .hd-legend{ display:flex; flex-wrap:wrap; gap:14px; font-size:11.5px; color:var(--ink-2); }
.vault-scope .hd-legend span{ display:inline-flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; }
.vault-scope .hd-legend i{ width:8px; height:8px; border-radius:50%; background:var(--c); display:inline-block; }

/* ---------- Toolbar ---------- */
.vault-scope .toolbar{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-card); margin-bottom:18px;
}
.vault-scope .toolbar-inner{ padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.vault-scope .search-box{
  display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-pill); padding:9px 16px; max-width:420px; color:var(--ink-3);
  transition:border-color .15s ease;
}
.vault-scope .search-box:focus-within{ border-color:var(--accent); color:var(--ink); }
.vault-scope .search-box input{ border:none; outline:none; background:transparent; flex:1; font-size:14px; color:var(--ink); }
.vault-scope .search-box input::placeholder{ color:var(--ink-3); }

.vault-scope .toolbar-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.vault-scope .tag-filters{ display:flex; flex-wrap:wrap; gap:8px; }
.vault-scope .tag{
  padding:7px 14px; border-radius:var(--radius-pill); border:1px solid var(--line);
  background:var(--surface); font-size:12.5px; font-weight:500; color:var(--ink-2); cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.vault-scope .tag:hover{ border-color:var(--ink-3); color:var(--ink); }
.vault-scope .tag.active{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.vault-scope .select-group{ display:flex; gap:10px; flex-wrap:wrap; }
.vault-scope .select-wrap{ position:relative; display:flex; align-items:center; }
.vault-scope .select-wrap select{
  appearance:none; -webkit-appearance:none; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-pill); padding:8px 32px 8px 14px; font-size:12.5px; font-weight:500;
  color:var(--ink); cursor:pointer;
}
.vault-scope .select-wrap svg{ position:absolute; right:11px; pointer-events:none; color:var(--ink-3); }

/* ---------- Main / grid ---------- */
.vault-scope .vault-main{ padding-bottom:8px; }
.vault-scope .result-count{ margin:0 0 16px; font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.vault-scope .grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); }
.vault-scope .vault-empty{
  display:none; text-align:center; padding:64px 20px; color:var(--ink-3); font-size:14px;
  border:1px dashed var(--line); border-radius:var(--radius-card);
}
.vault-scope .vault-empty.show{ display:block; }

/* padding/gap ต้องรีเซ็ต เพราะ .card ของ style.css (stat card) จับโดนด้วย */
.vault-scope .card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
  padding:0; gap:0;
  transition:box-shadow .18s ease, transform .18s ease;
}
.vault-scope .card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }

.vault-scope .thumb{
  position:relative; aspect-ratio:9/16; width:100%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.vault-scope .thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 42%);
}
.vault-scope .thumb-0{ background:radial-gradient(120% 140% at 20% 15%,#8B7CFF 0%,transparent 55%),linear-gradient(160deg,#3A2E6E,#1B1730); }
.vault-scope .thumb-1{ background:radial-gradient(120% 140% at 80% 20%,#FFB25C 0%,transparent 55%),linear-gradient(160deg,#6E3A1E,#2E1B14); }
.vault-scope .thumb-2{ background:radial-gradient(120% 140% at 25% 80%,#FF6FB0 0%,transparent 55%),linear-gradient(160deg,#5C1E44,#241221); }
.vault-scope .thumb-3{ background:radial-gradient(120% 140% at 75% 75%,#38D9C9 0%,transparent 55%),linear-gradient(160deg,#0E4A45,#0D2422); }
.vault-scope .thumb-4{ background:radial-gradient(120% 140% at 30% 30%,#FF7A5C 0%,transparent 55%),linear-gradient(160deg,#5E2418,#271410); }
.vault-scope .thumb-5{ background:radial-gradient(120% 140% at 70% 30%,#6FA8FF 0%,transparent 55%),linear-gradient(160deg,#1E3A6E,#131C33); }
.vault-scope .thumb-6{ background:radial-gradient(120% 140% at 25% 70%,#C8E86B 0%,transparent 55%),linear-gradient(160deg,#3C4A18,#1B2110); }
.vault-scope .thumb-7{ background:radial-gradient(120% 140% at 75% 65%,#FFD35C 0%,transparent 55%),linear-gradient(160deg,#5E4A14,#2A2110); }

.vault-scope .thumb .badge{
  position:absolute; z-index:2; top:10px; font-size:10.5px; font-weight:600; letter-spacing:.2px;
  padding:5px 10px; border-radius:var(--radius-pill); backdrop-filter:blur(6px);
}
.vault-scope .hook-badge{ left:10px; background:color-mix(in srgb, var(--hc) 80%, transparent); color:#fff; }
.vault-scope .platform-badge{ right:10px; background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.25); }
.vault-scope .thumb-date{
  position:absolute; z-index:2; right:10px; bottom:10px; font-size:10.5px; font-weight:500;
  background:rgba(0,0,0,.55); color:#fff; padding:3px 7px; border-radius:6px; font-variant-numeric:tabular-nums;
}
.vault-scope .no-data{ color:var(--ink-3); font-style:italic; }
.vault-scope .mine{
  font-size:9.5px; font-weight:700; color:var(--good); border:1px solid var(--good);
  padding:0 5px; border-radius:var(--radius-pill); vertical-align:middle;
}

.vault-scope .card-body{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:10px; flex:1; }
.vault-scope .creator-row{ display:flex; align-items:center; gap:9px; }
.vault-scope .avatar{
  width:28px; height:28px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; flex:none;
  font-family:var(--font-display);
}
.vault-scope .creator-meta{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.vault-scope .creator-name{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vault-scope .creator-handle{ font-size:11px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.vault-scope .hook-quote{
  margin:0; font-family:var(--font-display); font-weight:500; font-size:14.5px; line-height:1.35;
  color:var(--ink); text-wrap:balance;
}
.vault-scope .summary{ margin:0; font-size:12.5px; color:var(--ink-2); line-height:1.5; }

.vault-scope .metrics-row{ display:flex; gap:14px; font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.vault-scope .metric{ display:inline-flex; align-items:center; gap:5px; }
.vault-scope .metric svg{ color:var(--ink-3); }

.vault-scope .card-actions{ margin-top:auto; display:flex; gap:8px; padding-top:4px; }
.vault-scope .card-actions .btn{ flex:1; justify-content:center; padding:8px 10px; font-size:12px; }
.vault-scope .card-actions .btn-ghost{ flex:none; padding:8px; }

/* ---------- Overlay / Modal / Drawer ---------- */
.vault-scope .overlay{
  position:fixed; inset:0; z-index:50; background:rgba(15,16,20,.55); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;
  display:flex; align-items:flex-start; justify-content:center;
}
.vault-scope .overlay.is-open{ opacity:1; visibility:visible; }

.vault-scope .modal{
  margin:5vh auto; width:min(640px,92vw); max-height:88vh; background:var(--surface);
  border-radius:20px; box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
  display:flex; flex-direction:column; transform:translateY(10px); transition:transform .2s ease;
  font-family:var(--font-body); color:var(--ink);
}
.vault-scope .overlay.is-open .modal{ transform:translateY(0); }
.vault-scope .modal-close{ position:absolute; top:14px; right:14px; z-index:2; background:var(--surface); border:1px solid var(--line); }
.vault-scope #modalContent{ overflow-y:auto; }

.vault-scope .modal-hero{ padding:22px 26px 0; }
.vault-scope .modal-eyebrow{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.vault-scope .modal-hookbadge{ font-size:11px; font-weight:600; padding:4px 10px; border-radius:var(--radius-pill); background:var(--hs); color:var(--hc); }
.vault-scope .modal-title{ font-family:var(--font-display); font-weight:600; font-size:20px; margin:0 0 4px; text-wrap:balance; }
.vault-scope .modal-creator{ font-size:12.5px; color:var(--ink-3); margin:0 0 16px; }

.vault-scope .modal-cat{ font-size:11px; color:var(--ink-3); }

/* player ฝังจากแพลตฟอร์ม (TikTok/Instagram) — 9:16 แต่จำกัดความสูงไม่ให้ล้นจอ */
.vault-scope .player-wrap{
  position:relative; width:100%; max-width:325px; margin:0 auto 18px;
  aspect-ratio:9/16; max-height:60vh;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius-md); overflow:hidden;
}
.vault-scope .player{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vault-scope .player-fallback{ margin:0 0 16px; }

.vault-scope .play-orb{
  position:relative; z-index:2; width:52px; height:52px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.55); color:#fff;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(3px);
  transition:transform .15s ease, background .15s ease;
}
.vault-scope .play-orb svg{ margin-left:3px; }
.vault-scope .play-orb:hover{ background:rgba(255,255,255,.3); transform:scale(1.08); }
.vault-scope .modal-pane{ padding:4px 26px 28px; }
.vault-scope .modal-sub{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  color:var(--ink-3); margin:20px 0 8px;
}
.vault-scope .stat-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); gap:8px;
  padding:14px; background:var(--surface-2); border-radius:var(--radius-md);
}
.vault-scope .stat-cell{ display:flex; flex-direction:column; gap:2px; }
.vault-scope .stat-cell .k{ font-size:10.5px; color:var(--ink-3); }
.vault-scope .stat-cell .v{ font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; }
.vault-scope .modal-note{
  font-size:11px; line-height:1.6; color:var(--ink-3); background:var(--surface-2);
  border-left:2px solid var(--line); padding:9px 12px; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  margin:16px 0 0;
}
.vault-scope .modal-link{ margin-top:14px; }
.vault-scope .drawer-note{
  font-size:11px; line-height:1.6; color:var(--ink-3); margin:0;
}

.vault-scope .timeline{ position:relative; display:flex; flex-direction:column; gap:0; }
.vault-scope .timeline-item{ position:relative; padding:0 0 22px 30px; }
.vault-scope .timeline-item:last-child{ padding-bottom:0; }
.vault-scope .timeline-item::before{
  content:""; position:absolute; left:8px; top:24px; bottom:0; width:1.5px; background:var(--line);
}
.vault-scope .timeline-item:last-child::before{ display:none; }
.vault-scope .timeline-dot{
  position:absolute; left:0; top:2px; width:17px; height:17px; border-radius:50%;
  background:var(--dot); display:flex; align-items:center; justify-content:center;
}
.vault-scope .timeline-dot::after{ content:""; width:6px; height:6px; border-radius:50%; background:#fff; }
.vault-scope .timeline-head{ display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.vault-scope .step-badge{ font-size:11.5px; font-weight:600; color:var(--ink); }
.vault-scope .time-chip{
  font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); background:var(--surface-2);
  padding:2px 7px; border-radius:6px; font-variant-numeric:tabular-nums;
}
.vault-scope .timeline-desc{ margin:0; font-size:13px; color:var(--ink-2); line-height:1.55; }

.vault-scope .transcript-hook{
  font-family:var(--font-display); font-size:15px; font-weight:500; color:var(--accent);
  padding:12px 14px; background:var(--accent-soft); border-radius:var(--radius-md); margin:0 0 16px;
  text-wrap:balance;
}
.vault-scope .transcript-box{
  font-size:13.5px; line-height:1.75; color:var(--ink-2); white-space:pre-wrap;
  max-height:44vh; overflow-y:auto; padding-right:4px;
}

.vault-scope .drawer{
  margin-left:auto; height:100%; width:min(460px,94vw); background:var(--surface);
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .22s ease;
  font-family:var(--font-body); color:var(--ink);
}
.vault-scope .overlay.is-open .drawer{ transform:translateX(0); }
.vault-scope .drawer-header{
  display:flex; align-items:center; justify-content:space-between; padding:18px 20px;
  border-bottom:1px solid var(--line); font-family:var(--font-display); font-weight:600; font-size:15.5px;
}
.vault-scope .drawer-header span{ display:flex; align-items:center; gap:8px; }
.vault-scope .drawer-header svg{ color:var(--accent); }
.vault-scope .drawer-body{ padding:20px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:18px; }

.vault-scope .field{ display:flex; flex-direction:column; gap:7px; }
.vault-scope .field label{ font-size:12px; font-weight:600; color:var(--ink-2); }
.vault-scope .field textarea,.vault-scope .field select{
  width:100%; border:1px solid var(--line); border-radius:var(--radius-md); padding:10px 12px;
  background:var(--paper); font-size:13.5px; color:var(--ink); resize:vertical; min-height:64px;
}
.vault-scope .field textarea:focus,.vault-scope .field select:focus{ outline:none; border-color:var(--accent); }
.vault-scope .field-hint{ font-size:11px; color:var(--ink-3); }

.vault-scope .ref-card{
  display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid var(--line);
  border-radius:var(--radius-md); background:var(--surface-2);
}
.vault-scope .ref-card .thumb-chip{ width:34px; height:52px; border-radius:6px; flex:none; }
.vault-scope .ref-card-title{ font-size:12.5px; font-weight:600; margin:0 0 3px; line-height:1.3; }
.vault-scope .ref-card-meta{ font-size:11px; color:var(--ink-3); }

.vault-scope .script-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-md); }
.vault-scope table.script-table{ border-collapse:collapse; width:100%; min-width:520px; font-size:12.5px; }
.vault-scope table.script-table th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-3);
  background:var(--surface-2); padding:9px 12px; position:sticky; top:0; font-weight:600;
}
.vault-scope table.script-table td{ padding:11px 12px; border-top:1px solid var(--line); vertical-align:top; color:var(--ink-2); }
.vault-scope table.script-table tr:nth-child(even) td{ background:var(--surface-2); }
.vault-scope .cell-time{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap; }
.vault-scope .cell-step{ font-size:10px; font-weight:700; color:var(--sc); text-transform:uppercase; letter-spacing:.3px; margin-bottom:3px; display:block; }
.vault-scope .overlay-chip{
  display:inline-block; font-size:11.5px; font-weight:500; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); padding:3px 8px; border-radius:6px;
}
.vault-scope .drawer-actions{ display:flex; gap:8px; }
.vault-scope .empty-drawer{ text-align:center; color:var(--ink-3); font-size:12.5px; padding:30px 10px; }

@media(max-width:640px){
  .vault-scope .modal{ margin:0; width:100%; height:100%; max-height:100%; border-radius:0; }
  .vault-scope .overlay{ align-items:stretch; }
}