/* ============================================================================
   KOREVRA DeLaw — Base + UI Components
   ============================================================================ */

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"cv02","cv03","cv04","ss01";
}
h1,h2,h3,h4,h5{ margin:0; font-weight:650; letter-spacing:-.01em; color:var(--ink); }
.serif{ font-family:var(--font-display); font-weight:560; letter-spacing:-.02em; font-optical-sizing:auto; }
a{ color:var(--brand-600); text-decoration:none; }
a:hover{ text-decoration:underline; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:14px; }
img{ max-width:100%; display:block; }
::selection{ background:hsla(var(--brand-h),80%,62%,.22); }
:focus-visible{ outline:2px solid var(--brand-500); outline-offset:2px; box-shadow:var(--ring); border-radius:4px; }

/* scrollbars */
*{ scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--line); border-radius:20px; border:3px solid var(--surface); }
*::-webkit-scrollbar-thumb:hover{ background:var(--ink-4); }

/* ---------- Utilities ---------- */
.row{ display:flex; align-items:center; }
.col{ display:flex; flex-direction:column; }
.between{ justify-content:space-between; }
.center{ align-items:center; justify-content:center; }
.wrap{ flex-wrap:wrap; }
.gap-2{ gap:2px;} .gap-4{ gap:4px;} .gap-6{ gap:6px;} .gap-8{ gap:8px;}
.gap-10{ gap:10px;} .gap-12{ gap:12px;} .gap-16{ gap:16px;} .gap-20{ gap:20px;} .gap-24{ gap:24px;}
.grow{ flex:1 1 auto; min-width:0; }
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}
.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.muted{ color:var(--ink-3); }
.faint{ color:var(--ink-4); }
.tiny{ font-size:11.5px; }
.sm{ font-size:12.5px; }
.lg{ font-size:16px; }
.xl{ font-size:20px; }
.bold{ font-weight:650; }
.semi{ font-weight:560; }
.tnum{ font-variant-numeric:tabular-nums; }
.mono{ font-family:var(--font-mono); }
.upper{ text-transform:uppercase; letter-spacing:.08em; font-size:11px; font-weight:650; }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nowrap{ white-space:nowrap; }
.right{ text-align:right; }
.hidden{ display:none !important; }
.clickable{ cursor:pointer; }
.divider{ height:1px; background:var(--line); margin:14px 0; border:0; }
.dot{ width:7px;height:7px;border-radius:50%;display:inline-block;flex:none; }
.spacer{ flex:1 1 auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:38px; padding:0 15px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-weight:560; font-size:13.5px; white-space:nowrap;
  transition:all var(--speed) var(--ease); user-select:none;
}
.btn:hover{ background:var(--hover); border-color:var(--ink-4); }
.btn:active{ transform:translateY(.5px); }
.btn .ic{ width:17px;height:17px; }
.btn-primary{
  background:linear-gradient(180deg,var(--brand-500),var(--brand-600));
  border-color:var(--brand-600); color:#fff;
  box-shadow:0 1px 2px rgba(16,25,53,.18), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-primary:hover{ filter:brightness(1.06); border-color:var(--brand-700); background:linear-gradient(180deg,var(--brand-500),var(--brand-600)); }
.btn-gold{ background:linear-gradient(180deg,var(--gold-400),var(--gold-500)); border-color:var(--gold-600); color:#3a2c08; }
.btn-gold:hover{ filter:brightness(1.05); }
.btn-ghost{ background:transparent; border-color:transparent; color:var(--ink-2); }
.btn-ghost:hover{ background:var(--hover); }
.btn-danger{ background:var(--danger-500); border-color:var(--danger-600); color:#fff; }
.btn-danger:hover{ filter:brightness(1.05); }
.btn-sm{ height:31px; padding:0 11px; font-size:12.5px; border-radius:var(--radius-xs); }
.btn-sm .ic{ width:15px;height:15px; }
.btn-lg{ height:46px; padding:0 22px; font-size:15px; border-radius:var(--radius); }
.btn-icon{ width:38px; padding:0; flex:none; }
.btn-icon.btn-sm{ width:31px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; pointer-events:none; }

/* segmented / tabs */
.segment{ display:inline-flex; background:var(--surface-3); border:1px solid var(--line); border-radius:var(--radius-sm); padding:3px; gap:2px; }
.segment button{ border:0; background:transparent; color:var(--ink-3); height:30px; padding:0 13px; border-radius:7px; font-weight:560; font-size:12.5px; transition:all var(--speed); }
.segment button.active{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-xs); }
.segment button:hover:not(.active){ color:var(--ink); }

.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{ border:0; background:transparent; color:var(--ink-3); padding:11px 14px; font-weight:560; font-size:13.5px; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; transition:all var(--speed); display:inline-flex; align-items:center; gap:7px; }
.tab:hover{ color:var(--ink); }
.tab.active{ color:var(--brand-600); border-bottom-color:var(--brand-500); }
html[data-theme="dark"] .tab.active{ color:var(--brand-300); }

/* ---------- Cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm);
}
.card-hd{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.card-hd h3{ font-size:15px; }
.card-pad-0{ padding:0; }
.card.flat{ box-shadow:none; }
.card.glow{ box-shadow:var(--shadow); }
.elevate{ transition:transform var(--speed),box-shadow var(--speed); }
.elevate:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }

/* ---------- Badges / chips ---------- */
.badge{ display:inline-flex; align-items:center; gap:5px; height:21px; padding:0 8px; border-radius:6px; font-size:11.5px; font-weight:600; background:var(--surface-3); color:var(--ink-2); border:1px solid var(--line); }
.badge .dot{ width:6px;height:6px; }
.badge-soft{ border:0; }
.b-green{ background:var(--success-50); color:var(--success-700); }
.b-amber{ background:var(--warn-50); color:var(--warn-700, #9a6212); }
.b-red{ background:var(--danger-50); color:var(--danger-600); }
.b-blue{ background:var(--info-50); color:var(--info-600); }
.b-brand{ background:var(--brand-50); color:var(--brand-700); }
.b-gold{ background:#fbf2da; color:#8a6a1a; }
.b-violet{ background:#f1eafc; color:var(--violet-600, #6a3fc0); }
.b-teal{ background:#e2f6f6; color:#0c7676; }
html[data-theme="dark"] .b-green{color:#4fd6a0}html[data-theme="dark"] .b-amber{color:#f0b75e}
html[data-theme="dark"] .b-red{color:#f08585}html[data-theme="dark"] .b-blue{color:#7eaef5}
html[data-theme="dark"] .b-brand{color:#9aa1e8}html[data-theme="dark"] .b-gold{color:var(--gold-400);background:#2a2310}
html[data-theme="dark"] .b-violet{color:#b394ec;background:#221733}html[data-theme="dark"] .b-teal{color:#5cc9c9;background:#0e2a2a}

.chip{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px; border-radius:20px; background:var(--surface-3); border:1px solid var(--line); font-size:12.5px; font-weight:540; color:var(--ink-2); cursor:pointer; transition:all var(--speed); }
.chip:hover{ border-color:var(--ink-4); }
.chip.active{ background:var(--brand-500); border-color:var(--brand-600); color:#fff; }
.chip .x{ opacity:.6; }
.chip .x:hover{ opacity:1; }

.pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:600; }

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field > label,.lbl{ font-size:12.5px; font-weight:600; color:var(--ink-2); display:flex; align-items:center; gap:6px; }
.lbl .req{ color:var(--danger-500); }
.hint{ font-size:11.5px; color:var(--ink-3); }
.input,.select,.textarea{
  width:100%; height:40px; padding:0 12px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  transition:border-color var(--speed),box-shadow var(--speed);
}
.textarea{ height:auto; padding:10px 12px; resize:vertical; min-height:84px; line-height:1.55; }
.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7691' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; cursor:pointer; }
.input:focus,.select:focus,.textarea:focus{ border-color:var(--brand-400); box-shadow:var(--ring); }
.input::placeholder,.textarea::placeholder{ color:var(--ink-4); }
.input-group{ position:relative; display:flex; align-items:center; }
.input-group .ic{ position:absolute; left:11px; width:17px; height:17px; color:var(--ink-3); pointer-events:none; }
.input-group .input{ padding-left:36px; }
.input-affix{ display:flex; align-items:center; }
.input-affix .affix{ height:40px; display:flex; align-items:center; padding:0 11px; background:var(--surface-3); border:1px solid var(--line); color:var(--ink-3); font-weight:600; }
.input-affix .affix:first-child{ border-radius:var(--radius-sm) 0 0 var(--radius-sm); border-right:0; }
.input-affix .input{ border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.input-affix .input:first-child{ border-radius:var(--radius-sm); }

.switch{ position:relative; width:40px; height:23px; flex:none; cursor:pointer; }
.switch input{ opacity:0; width:0; height:0; position:absolute; }
.switch .track{ position:absolute; inset:0; background:var(--line); border-radius:20px; transition:background var(--speed); }
.switch .thumb{ position:absolute; top:2px; left:2px; width:19px; height:19px; background:#fff; border-radius:50%; box-shadow:var(--shadow-sm); transition:transform var(--speed); }
.switch input:checked + .track{ background:var(--brand-500); }
.switch input:checked + .track + .thumb,.switch input:checked ~ .thumb{ transform:translateX(17px); }

.check{ width:18px;height:18px;border-radius:5px;border:1.6px solid var(--ink-4); display:inline-flex;align-items:center;justify-content:center; cursor:pointer; flex:none; background:var(--surface); transition:all var(--speed); }
.check.on{ background:var(--brand-500); border-color:var(--brand-500); color:#fff; }

.radio-card{ display:flex; gap:11px; padding:13px; border:1.5px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; transition:all var(--speed); }
.radio-card:hover{ border-color:var(--brand-300); }
.radio-card.sel{ border-color:var(--brand-500); background:var(--brand-50); box-shadow:var(--ring); }

.grid-form{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.grid-form .full{ grid-column:1 / -1; }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); }
table.tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.tbl th{ text-align:left; padding:11px 14px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:650; background:var(--surface-2); border-bottom:1px solid var(--line); position:sticky; top:0; white-space:nowrap; }
.tbl td{ padding:12px 14px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl tbody tr{ transition:background var(--speed); cursor:pointer; }
.tbl tbody tr:hover{ background:var(--hover); }
.tbl tr.sel{ background:var(--brand-50); }
.tbl .num{ text-align:right; font-variant-numeric:tabular-nums; }
.th-sort{ cursor:pointer; user-select:none; }
.th-sort:hover{ color:var(--ink); }

/* ---------- Avatars ---------- */
.avatar{ width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:650; font-size:12.5px; color:#fff; flex:none; background:var(--brand-500); position:relative; overflow:hidden; }
.avatar.xs{ width:24px;height:24px;font-size:10px; }
.avatar.sm{ width:28px;height:28px;font-size:11px; }
.avatar.lg{ width:46px;height:46px;font-size:16px; }
.avatar.xl{ width:64px;height:64px;font-size:22px; }
.avatar-stack{ display:flex; }
.avatar-stack .avatar{ border:2px solid var(--surface); margin-left:-9px; }
.avatar-stack .avatar:first-child{ margin-left:0; }
.av-0{background:#4b50e6}.av-1{background:#0f9d6b}.av-2{background:#d4519a}.av-3{background:#e08c1a}
.av-4{background:#119a9a}.av-5{background:#7c4ddb}.av-6{background:#2f74e0}.av-7{background:#b3344b}
.presence{ position:absolute; bottom:-1px; right:-1px; width:11px; height:11px; border-radius:50%; border:2px solid var(--surface); background:var(--success-500); }

/* ---------- Progress ---------- */
.bar{ height:7px; border-radius:20px; background:var(--surface-3); overflow:hidden; }
.bar > i{ display:block; height:100%; border-radius:20px; background:var(--brand-500); transition:width .6s var(--ease); }
.bar.thin{ height:5px; }
.meter{ display:flex; height:8px; border-radius:20px; overflow:hidden; background:var(--surface-3); }
.ring-prog{ --p:0; --sz:46px; width:var(--sz); height:var(--sz); border-radius:50%; background:conic-gradient(var(--brand-500) calc(var(--p)*1%), var(--surface-3) 0); display:flex; align-items:center; justify-content:center; flex:none; }
.ring-prog::before{ content:""; position:absolute; width:calc(var(--sz) - 11px); height:calc(var(--sz) - 11px); border-radius:50%; background:var(--surface); }
.ring-prog span{ position:relative; font-size:11.5px; font-weight:700; }

/* ---------- Stat / KPI ---------- */
.kpi{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 17px; position:relative; overflow:hidden; }
.kpi .kpi-ic{ width:38px;height:38px;border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.kpi .kpi-val{ font-size:25px; font-weight:720; letter-spacing:-.02em; font-variant-numeric:tabular-nums; font-family:var(--font-display); }
.kpi .kpi-lbl{ color:var(--ink-3); font-size:12.5px; font-weight:540; }
.kpi .kpi-trend{ font-size:11.5px; font-weight:650; display:inline-flex; align-items:center; gap:3px; }
.up{ color:var(--success-600); } .down{ color:var(--danger-500); }
.kpi-spark{ position:absolute; right:0; bottom:0; opacity:.5; }

/* ---------- Empty / loading ---------- */
.empty{ text-align:center; padding:46px 20px; color:var(--ink-3); }
.empty .ill{ width:58px;height:58px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-3);color:var(--ink-4);margin-bottom:14px; }
.skeleton{ background:linear-gradient(90deg,var(--surface-3) 25%,var(--hover) 37%,var(--surface-3) 63%); background-size:400% 100%; animation:shimmer 1.4s infinite; border-radius:6px; }
@keyframes shimmer{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.spinner{ width:18px;height:18px;border:2.5px solid var(--brand-200);border-top-color:var(--brand-500);border-radius:50%;animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ---------- Toast ---------- */
#toasts{ position:fixed; bottom:22px; right:22px; z-index:9000; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast{ pointer-events:auto; min-width:280px; max-width:380px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:13px 14px; display:flex; gap:11px; align-items:flex-start; animation:toastIn .32s var(--ease); border-left:3px solid var(--brand-500); }
.toast.ok{ border-left-color:var(--success-500); } .toast.warn{ border-left-color:var(--warn-500); }
.toast.err{ border-left-color:var(--danger-500); } .toast.ai{ border-left-color:var(--violet-500); }
.toast .t-ic{ width:20px;height:20px;flex:none;margin-top:1px; }
.toast .t-title{ font-weight:650; font-size:13px; }
.toast .t-msg{ font-size:12.5px; color:var(--ink-3); margin-top:1px; }
@keyframes toastIn{ from{ opacity:0; transform:translateX(30px) scale(.96) } to{ opacity:1; transform:none } }
.toast.out{ animation:toastOut .26s var(--ease) forwards; }
@keyframes toastOut{ to{ opacity:0; transform:translateX(30px) scale(.96); margin-bottom:-54px } }

/* ---------- Modal / Drawer ---------- */
.scrim{ position:fixed; inset:0; background:rgba(12,16,32,.5); backdrop-filter:blur(3px); z-index:8000; opacity:0; animation:fade .2s forwards; display:flex; }
@keyframes fade{ to{ opacity:1 } }
.modal{ background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:min(560px,calc(100vw - 36px)); max-height:calc(100vh - 60px); margin:auto; display:flex; flex-direction:column; overflow:hidden; animation:modalIn .26s var(--ease); border:1px solid var(--line); }
.modal.wide{ width:min(820px,calc(100vw - 36px)); }
.modal.xwide{ width:min(1040px,calc(100vw - 36px)); }
@keyframes modalIn{ from{ opacity:0; transform:translateY(14px) scale(.98) } to{ opacity:1; transform:none } }
.modal-hd{ padding:18px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.modal-hd h3{ font-size:16px; }
.modal-bd{ padding:20px; overflow-y:auto; }
.modal-ft{ padding:15px 20px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:flex-end; gap:10px; background:var(--surface-2); }

.drawer-scrim{ position:fixed; inset:0; background:rgba(12,16,32,.45); backdrop-filter:blur(2px); z-index:8000; opacity:0; animation:fade .2s forwards; }
.drawer{ position:fixed; top:0; right:0; height:100%; width:min(560px,100vw); background:var(--surface); box-shadow:var(--shadow-lg); z-index:8001; display:flex; flex-direction:column; animation:drawerIn .3s var(--ease); border-left:1px solid var(--line); }
.drawer.lg{ width:min(720px,100vw); }
@keyframes drawerIn{ from{ transform:translateX(40px); opacity:.4 } to{ transform:none; opacity:1 } }
.drawer-hd{ padding:16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.drawer-bd{ padding:20px; overflow-y:auto; flex:1; }
.drawer-ft{ padding:14px 20px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end; background:var(--surface-2); }

/* ---------- Dropdown / Menu ---------- */
.menu{ position:absolute; z-index:7000; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:6px; min-width:190px; animation:menuIn .16s var(--ease); }
@keyframes menuIn{ from{ opacity:0; transform:translateY(-6px) scale(.97) } to{ opacity:1; transform:none } }
.menu-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; font-size:13px; color:var(--ink-2); cursor:pointer; transition:background var(--speed); white-space:nowrap; }
.menu-item:hover{ background:var(--hover); color:var(--ink); }
.menu-item .ic{ width:16px;height:16px;color:var(--ink-3); }
.menu-item.danger{ color:var(--danger-500); } .menu-item.danger .ic{ color:var(--danger-500); }
.menu-sep{ height:1px; background:var(--line); margin:5px 4px; }
.menu-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-4); padding:6px 10px 3px; font-weight:700; }

/* ---------- Tooltip ---------- */
[data-tip]{ position:relative; }
[data-tip]:hover::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; font-size:11px; font-weight:560; padding:5px 9px; border-radius:7px; white-space:nowrap; z-index:9999; box-shadow:var(--shadow); pointer-events:none; }

/* ---------- Misc ---------- */
.gold-line{ height:3px; width:42px; border-radius:3px; background:linear-gradient(90deg,var(--gold-500),var(--gold-300)); }
.scale-icon{ color:var(--gold-500); }
.timeline{ position:relative; padding-left:26px; }
.timeline::before{ content:""; position:absolute; left:8px; top:4px; bottom:4px; width:2px; background:var(--line); }
.timeline .tl-item{ position:relative; padding-bottom:16px; }
.timeline .tl-dot{ position:absolute; left:-26px; top:1px; width:18px;height:18px;border-radius:50%; background:var(--surface); border:2px solid var(--brand-400); display:flex; align-items:center; justify-content:center; }
.timeline .tl-dot.done{ background:var(--success-500); border-color:var(--success-500); color:#fff; }
.timeline .tl-dot.pulse{ box-shadow:0 0 0 0 hsla(var(--brand-h),80%,62%,.5); animation:pulse 1.8s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px hsla(var(--brand-h),80%,62%,0) } 100%{ box-shadow:0 0 0 0 hsla(var(--brand-h),80%,62%,0) } }

.tag-input{ display:flex; flex-wrap:wrap; gap:6px; padding:7px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); min-height:40px; align-items:center; }
.tag-input input{ border:0; outline:0; flex:1; min-width:80px; background:transparent; height:26px; color:var(--ink); }

.note{ padding:12px 14px; border-radius:var(--radius-sm); font-size:12.5px; display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); }
.note .ic{ width:17px;height:17px;flex:none;margin-top:1px; }
.note-info{ background:var(--info-50); border-color:transparent; color:var(--info-600); }
.note-warn{ background:var(--warn-50); border-color:transparent; color:var(--warn-600); }
.note-ai{ background:linear-gradient(180deg,#f3eefc,#faf7ff); border-color:#e7dcfa; color:var(--violet-500); }
html[data-theme="dark"] .note-ai{ background:#1a1330; border-color:#2c1f44; color:#b394ec; }

.anim-in{ animation:cardIn .4s var(--ease) backwards; }
@keyframes cardIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
.stagger > *{ animation:cardIn .4s var(--ease) backwards; }
.stagger > *:nth-child(1){animation-delay:.02s}.stagger > *:nth-child(2){animation-delay:.06s}
.stagger > *:nth-child(3){animation-delay:.1s}.stagger > *:nth-child(4){animation-delay:.14s}
.stagger > *:nth-child(5){animation-delay:.18s}.stagger > *:nth-child(6){animation-delay:.22s}
.stagger > *:nth-child(7){animation-delay:.26s}.stagger > *:nth-child(8){animation-delay:.3s}