/* ============================================================
   TECHIYAT — theme
   Deep pine green + warm paper. Serif display, grotesk UI,
   Hebrew serif accent. Restrained brass for "second-life".
   ============================================================ */

:root{
  /* paper / surfaces */
  --paper:        #f4f3ee;
  --paper-raised: #fcfbf8;
  --paper-sunken: #ecebe4;
  --paper-card:   #ffffff;

  /* ink / text */
  --ink:    #17211d;
  --ink-2:  #39443f;
  --sage:   #6f7d77;
  --sage-2: #9aa59f;

  /* lines */
  --line:        #e4e2d9;
  --line-2:      #d6d4c9;
  --line-strong: #c7c5b9;

  /* brand greens */
  --pine:   #1d3d34;
  --pine-2: #265044;
  --moss:   #357059;
  --moss-2: #3f8268;
  --on-pine:#eef3ef;

  /* warm "second life" accent */
  --amber:     #a9762f;
  --amber-2:   #c08a3c;
  --amber-bg:  #f5ecdb;
  --amber-line:#e7d4b0;

  /* status */
  --ok:      #3f7d5f;
  --ok-bg:   #e6efe7;
  --watch:   #a9762f;
  --watch-bg:#f5ecdb;
  --risk:    #b05a41;
  --risk-bg: #f3e3dd;
  --info:    #3c6675;
  --info-bg: #e3edf0;

  /* fx */
  --shadow-sm: 0 1px 2px rgba(23,33,29,.05), 0 1px 1px rgba(23,33,29,.04);
  --shadow:    0 2px 6px rgba(23,33,29,.06), 0 8px 24px rgba(23,33,29,.06);
  --shadow-lg: 0 12px 40px rgba(23,33,29,.12), 0 4px 12px rgba(23,33,29,.07);
  --radius:   14px;
  --radius-sm: 9px;
  --radius-lg: 22px;

  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --serif:"Spectral", Georgia, serif;
  --heb:  "Frank Ruhl Libre", "Spectral", serif;
  --mono: "Spline Sans Mono", ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink-2);
  font-size:15px;
  line-height:1.55;
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
#root{ min-height:100vh; }
::selection{ background:var(--amber-bg); color:var(--pine); }

h1,h2,h3,h4{ color:var(--ink); margin:0; font-weight:600; line-height:1.12; letter-spacing:-.01em; text-wrap:balance; }
.serif{ font-family:var(--serif); font-weight:500; letter-spacing:-.015em; text-wrap:balance; }
.heb{ font-family:var(--heb); direction:rtl; unicode-bidi:isolate; font-weight:500; }
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
.mono{ font-family:var(--mono); font-feature-settings:"tnum" 1; }
.tnum{ font-variant-numeric:tabular-nums; }

/* eyebrow / labels */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sage); font-weight:500;
}
.muted{ color:var(--sage); }
.faint{ color:var(--sage-2); }

/* landing nav link */
.lnav{ cursor:pointer; padding:6px 2px; transition:color .14s; }
.lnav:hover{ color:var(--moss); }

/* ---------- scrollbars ---------- */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:20px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--line-strong); background-clip:content-box; }

/* ============================================================
   APP SHELL
   ============================================================ */
.app{ display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
.app.no-sidebar{ grid-template-columns:1fr; }

.sidebar{
  position:sticky; top:0; height:100vh; overflow-y:auto;
  background:var(--pine);
  color:var(--on-pine);
  display:flex; flex-direction:column;
  border-right:1px solid rgba(0,0,0,.18);
}
.side-brand{ display:flex; align-items:center; gap:11px; padding:20px 20px 16px; }
.side-mark{
  width:34px; height:34px; border-radius:9px; flex:none;
  background:linear-gradient(150deg,var(--amber-2),var(--amber));
  display:grid; place-items:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.side-name{ font-family:var(--serif); font-size:20px; font-weight:600; color:#fff; letter-spacing:-.01em; line-height:1; }
.side-sub{ font-family:var(--heb); font-size:13px; color:rgba(238,243,239,.6); margin-top:2px; }

.side-persona{ margin:6px 14px 14px; padding:11px 12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:11px; }
.side-persona .pl{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(238,243,239,.5); }
.persona-btn{ display:flex; align-items:center; gap:9px; width:100%; background:none; border:none; padding:7px 4px; color:var(--on-pine); border-radius:8px; text-align:left; }
.persona-btn .pa{ width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex:none; }
.persona-btn .pn{ font-size:13.5px; font-weight:600; color:#fff; }
.persona-current{ display:flex;align-items:center;gap:10px; cursor:pointer; }
.persona-menu{ margin-top:8px; display:flex; flex-direction:column; gap:2px; }
.persona-menu .persona-btn:hover{ background:rgba(255,255,255,.08); }
.persona-menu .persona-btn.active{ background:rgba(255,255,255,.13); }
.chev{ margin-left:auto; transition:transform .2s; opacity:.6; }
.chev.open{ transform:rotate(180deg); }

.side-nav{ padding:4px 12px; display:flex; flex-direction:column; gap:1px; flex:1; }
.side-sec{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(238,243,239,.4); padding:14px 10px 6px; }
.nav-item{
  display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:9px;
  color:rgba(238,243,239,.78); font-size:14px; font-weight:500; border:none; background:none; width:100%; text-align:left;
  transition:background .14s, color .14s;
}
.nav-item:hover{ background:rgba(255,255,255,.07); color:#fff; }
.nav-item.active{ background:rgba(255,255,255,.12); color:#fff; }
.nav-item .ni-ic{ opacity:.8; flex:none; }
.nav-item.active .ni-ic{ opacity:1; color:var(--amber-2); }
.nav-badge{ margin-left:auto; font-family:var(--mono); font-size:10px; background:var(--amber); color:#fff; padding:1px 6px; border-radius:20px; font-weight:600; }
.nav-sub{ display:flex; align-items:center; gap:9px; padding:5px 10px 5px 39px; border-radius:8px; border:none; background:none; width:100%; text-align:left; color:rgba(238,243,239,.6); transition:background .14s, color .14s; }
.nav-sub:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-sub .dot{ width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.55; flex:none; }
.nav-sub-l{ font-size:12.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-sub-s{ margin-left:auto; font-family:var(--mono); font-size:10px; color:rgba(238,243,239,.38); flex:none; white-space:nowrap; }
.side-foot{ padding:14px 18px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:rgba(238,243,239,.5); }
.side-foot .heb{ color:rgba(238,243,239,.7); }

/* main column */
.main{ min-width:0; display:flex; flex-direction:column; }
.topbar{
  position:sticky; top:0; z-index:30; height:62px; flex:none;
  display:flex; align-items:center; gap:14px; padding:0 26px;
  background:rgba(244,243,238,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar h2{ font-size:18px; font-family:var(--serif); font-weight:600; }
.top-crumb{ font-size:13px; color:var(--sage); }
.top-search{
  margin-left:auto; display:flex; align-items:center; gap:9px;
  background:var(--paper-raised); border:1px solid var(--line-2); border-radius:10px;
  padding:8px 12px; min-width:240px; color:var(--sage);
}
.top-search input{ border:none; background:none; outline:none; font-family:inherit; font-size:13.5px; color:var(--ink); width:100%; }
.top-pill{ display:flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid var(--line-2); border-radius:20px; background:var(--paper-raised); font-size:13px; font-weight:500; color:var(--ink-2); }
.avatar{ width:34px;height:34px;border-radius:50%; background:linear-gradient(150deg,var(--pine-2),var(--pine)); color:#fff; display:grid;place-items:center; font-size:13px; font-weight:600; flex:none; }
.top-persona{ display:flex; align-items:center; gap:9px; padding:5px 12px 5px 6px; border:1px solid var(--line-2); border-radius:24px; background:var(--paper-raised); transition:border-color .14s, background .14s; }
.top-persona:hover{ border-color:var(--line-strong); background:#fff; }

.canvas{ padding:28px 30px 60px; max-width:1280px; width:100%; margin:0 auto; }
.canvas.wide{ max-width:1480px; }

/* ============================================================
   PRIMITIVES
   ============================================================ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans);
  font-size:14px; font-weight:600; padding:10px 17px; border-radius:10px; border:1px solid transparent;
  transition:transform .08s ease, background .15s, border-color .15s, box-shadow .15s; white-space:nowrap; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--moss); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--moss-2); }
.btn-dark{ background:var(--pine); color:#fff; }
.btn-dark:hover{ background:var(--pine-2); }
.btn-ghost{ background:var(--paper-raised); color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--line-strong); background:#fff; }
.btn-quiet{ background:none; color:var(--ink-2); }
.btn-quiet:hover{ background:var(--paper-sunken); }
.btn-amber{ background:var(--amber); color:#fff; }
.btn-amber:hover{ background:var(--amber-2); }
.btn-sm{ padding:7px 12px; font-size:13px; border-radius:9px; }
.btn-lg{ padding:13px 24px; font-size:15.5px; border-radius:12px; }
.btn-block{ width:100%; }

.card{ background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card-pad{ padding:22px; }
.card-hd{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); }
.card-hd h3{ font-size:15.5px; }
.card-hover{ transition:transform .16s ease, box-shadow .16s, border-color .16s; cursor:pointer; }
.card-hover:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--line-2); }

.chip{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; padding:4px 10px; border-radius:20px;
  background:var(--paper-sunken); color:var(--ink-2); border:1px solid var(--line); white-space:nowrap; }
.chip.amber{ background:var(--amber-bg); color:var(--amber); border-color:var(--amber-line); }
.chip.green{ background:var(--ok-bg); color:var(--ok); border-color:#cfe0d2; }
.chip.pine{ background:var(--pine); color:var(--on-pine); border-color:transparent; }
.chip-dot{ width:6px;height:6px;border-radius:50%; background:currentColor; }

.badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.04em;
  padding:3px 9px; border-radius:7px; text-transform:uppercase; }
.badge.ok{ background:var(--ok-bg); color:var(--ok); }
.badge.watch{ background:var(--watch-bg); color:var(--watch); }
.badge.risk{ background:var(--risk-bg); color:var(--risk); }
.badge.info{ background:var(--info-bg); color:var(--info); }
.badge.ghost{ background:var(--paper-sunken); color:var(--sage); }

.tag{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; padding:3px 9px; border-radius:7px;
  background:var(--paper-sunken); color:var(--ink-2); border:1px solid var(--line); }

.divider{ height:1px; background:var(--line); border:none; margin:0; }

/* meters */
.meter{ height:7px; border-radius:20px; background:var(--paper-sunken); overflow:hidden; }
.meter > i{ display:block; height:100%; border-radius:20px; background:var(--moss); transition:width .9s cubic-bezier(.2,.7,.2,1); }
.meter.amber > i{ background:var(--amber); }
.meter.risk > i{ background:var(--risk); }
.meter.thin{ height:5px; }

/* stat */
.stat{ display:flex; flex-direction:column; gap:3px; }
.stat .sv{ font-family:var(--serif); font-size:30px; font-weight:600; color:var(--ink); line-height:1; letter-spacing:-.02em; }
.stat .sl{ font-size:12.5px; color:var(--sage); }
.delta{ font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:3px; }
.delta.up{ color:var(--ok); } .delta.down{ color:var(--risk); }

/* grid helpers */
.row{ display:flex; align-items:center; gap:12px; }
.col{ display:flex; flex-direction:column; }
.between{ justify-content:space-between; }
.wrap{ flex-wrap:wrap; }
.grow{ flex:1; min-width:0; }
.gap6{ gap:6px; } .gap8{ gap:8px; } .gap10{ gap:10px; } .gap12{ gap:12px; } .gap14{ gap:14px; } .gap16{ gap:16px; } .gap18{ gap:18px; } .gap20{ gap:20px; } .gap24{ gap:24px; }
.grid{ display:grid; gap:18px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.mt4{margin-top:4px;}.mt6{margin-top:6px;}.mt8{margin-top:8px;}.mt12{margin-top:12px;}.mt14{margin-top:14px;}.mt16{margin-top:16px;}.mt20{margin-top:20px;}.mt24{margin-top:24px;}.mt32{margin-top:32px;}
.mb4{margin-bottom:4px;}.mb6{margin-bottom:6px;}.mb8{margin-bottom:8px;}.mb12{margin-bottom:12px;}.mb14{margin-bottom:14px;}.mb16{margin-bottom:16px;}.mb20{margin-bottom:20px;}.mb24{margin-bottom:24px;}

/* persona tabs (in-dashboard switch) */
.ptabs{ display:flex; gap:5px; background:var(--paper-sunken); border:1px solid var(--line); border-radius:14px; padding:5px; flex-wrap:wrap; }
.ptab{ display:flex; align-items:center; gap:9px; padding:7px 12px; border-radius:10px; background:transparent; border:1px solid transparent; color:var(--ink-2); transition:background .15s, border-color .15s, box-shadow .15s; }
.ptab:hover{ background:var(--paper-raised); }
.ptab.active{ background:var(--paper-card); border-color:var(--line-2); box-shadow:var(--shadow-sm); }
.ptab-ic{ width:28px;height:28px;border-radius:8px; background:var(--paper-sunken); display:grid;place-items:center; color:var(--sage); flex:none; transition:.15s; }
.ptab.active .ptab-ic{ background:var(--pine); color:#fff; }
.ptab-name{ font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; }
.ptab-org{ font-size:11px; color:var(--sage); white-space:nowrap; }

/* page header */
.page-hd{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; flex-wrap:wrap; }
.page-hd h1{ font-family:var(--serif); font-size:29px; font-weight:600; }
.page-hd .sub{ color:var(--sage); font-size:14.5px; margin-top:6px; max-width:560px; }

/* placeholder image */
.ph{ position:relative; border-radius:var(--radius-sm); overflow:hidden; background:
   repeating-linear-gradient(135deg, #eceae2 0 11px, #f3f1ea 11px 22px); border:1px solid var(--line); }
.ph::after{ content:attr(data-label); position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--sage-2); text-transform:uppercase; }

/* forms */
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:13px; font-weight:600; color:var(--ink); }
.field .hint{ font-size:12px; color:var(--sage); }
.input, .select, .textarea{ font-family:var(--sans); font-size:14px; color:var(--ink); background:var(--paper-raised);
  border:1px solid var(--line-2); border-radius:10px; padding:11px 13px; outline:none; transition:border-color .15s, box-shadow .15s; width:100%; }
.input:focus,.select:focus,.textarea:focus{ border-color:var(--moss); box-shadow:0 0 0 3px rgba(53,112,89,.12); background:#fff; }
.textarea{ resize:vertical; min-height:90px; line-height:1.5; }
.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236f7d77' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; }

.choice{ display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line-2); border-radius:11px;
  background:var(--paper-raised); cursor:pointer; transition:border-color .15s, background .15s; font-size:14px; font-weight:500; color:var(--ink-2); }
.choice:hover{ border-color:var(--line-strong); }
.choice.sel{ border-color:var(--moss); background:#fff; box-shadow:0 0 0 3px rgba(53,112,89,.1); color:var(--ink); }
.choice .ck{ width:18px;height:18px;border-radius:6px;border:1.5px solid var(--line-strong); flex:none; display:grid;place-items:center; transition:.15s; }
.choice.sel .ck{ background:var(--moss); border-color:var(--moss); color:#fff; }
.choice.rad .ck{ border-radius:50%; }

/* table */
.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; }
.tbl th{ text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sage); font-weight:500; padding:0 14px 10px; }
.tbl td{ padding:13px 14px; border-top:1px solid var(--line); color:var(--ink-2); }
.tbl tr.clickable{ cursor:pointer; }
.tbl tbody tr:hover td{ background:var(--paper-raised); }

/* steps */
.steps{ display:flex; align-items:center; gap:0; }
.step{ display:flex; align-items:center; gap:9px; flex:none; }
.step .sn{ width:26px;height:26px;border-radius:50%; display:grid;place-items:center; font-family:var(--mono); font-size:12px; font-weight:600;
  background:var(--paper-sunken); color:var(--sage); border:1px solid var(--line-2); }
.step.done .sn{ background:var(--moss); color:#fff; border-color:var(--moss); }
.step.curr .sn{ background:var(--pine); color:#fff; border-color:var(--pine); }
.step .st{ font-size:13px; font-weight:600; color:var(--sage); }
.step.done .st,.step.curr .st{ color:var(--ink); }
.step-line{ width:34px; height:1.5px; background:var(--line-2); margin:0 4px; }
.step-line.done{ background:var(--moss); }

/* pipeline kanban */
.kan{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(208px,1fr); gap:14px; overflow-x:auto; padding-bottom:6px; }
.kan-col{ background:var(--paper-sunken); border:1px solid var(--line); border-radius:12px; padding:10px; min-height:120px; }
.kan-hd{ display:flex; align-items:center; justify-content:space-between; padding:4px 6px 10px; }
.kan-hd .kt{ font-size:12.5px; font-weight:700; color:var(--ink); }
.kan-hd .kc{ font-family:var(--mono); font-size:11px; color:var(--sage); }
.kan-card{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:11px 12px; margin-bottom:8px; box-shadow:var(--shadow-sm); cursor:pointer; transition:.14s; }
.kan-card:hover{ box-shadow:var(--shadow); transform:translateY(-1px); }

/* score ring */
.ring-wrap{ position:relative; width:160px; height:160px; }
.ring-wrap.lg{ width:208px; height:208px; }
.ring-cx{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.ring-val{ font-family:var(--serif); font-size:46px; font-weight:600; color:var(--pine); line-height:1; }
.ring-wrap.lg .ring-val{ font-size:60px; }
.ring-lab{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--sage); margin-top:3px; }

/* agent */
.agent-wrap{ display:grid; grid-template-columns:1fr 312px; gap:18px; height:calc(100vh - 62px - 0px); }
.chat{ display:flex; flex-direction:column; background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.chat-scroll{ flex:1; overflow-y:auto; padding:24px 26px; display:flex; flex-direction:column; gap:20px; }
.msg{ display:flex; gap:12px; max-width:760px; }
.msg .mav{ width:30px;height:30px;border-radius:8px; flex:none; display:grid;place-items:center; }
.msg.user{ align-self:flex-end; flex-direction:row-reverse; }
.msg.user .mbody{ background:var(--pine); color:var(--on-pine); border-radius:13px 13px 4px 13px; padding:11px 15px; }
.msg.bot .mbody{ background:var(--paper-raised); border:1px solid var(--line); border-radius:13px 13px 13px 4px; padding:14px 17px; }
.msg.user .mav{ background:var(--pine-2); color:#fff; }
.msg.bot .mav{ background:linear-gradient(150deg,var(--amber-2),var(--amber)); color:#fff; }
.mbody p{ margin:0 0 8px; } .mbody p:last-child{ margin:0; }
.chat-input{ border-top:1px solid var(--line); padding:14px 16px; display:flex; gap:10px; align-items:flex-end; background:var(--paper-raised); }
.chat-input textarea{ flex:1; border:none; background:none; outline:none; resize:none; font-family:inherit; font-size:14.5px; color:var(--ink); max-height:120px; line-height:1.5; }
.suggest{ display:flex; flex-direction:column; gap:8px; }
.suggest button{ text-align:left; padding:11px 13px; border:1px solid var(--line-2); border-radius:10px; background:var(--paper-raised); font-size:13px; color:var(--ink-2); line-height:1.4; transition:.14s; }
.suggest button:hover{ border-color:var(--moss); background:#fff; color:var(--ink); }
.typing{ display:inline-flex; gap:4px; }
.typing i{ width:6px;height:6px;border-radius:50%; background:var(--sage-2); animation:blink 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.2s; } .typing i:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

/* modal */
.scrim{ position:fixed; inset:0; background:rgba(23,33,29,.45); backdrop-filter:blur(3px); z-index:100; display:grid; place-items:center; padding:24px; animation:fade .2s; }
@keyframes fade{ from{opacity:0;} to{opacity:1;} }
.modal{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; max-width:520px; overflow:hidden; animation:pop .22s cubic-bezier(.2,.8,.2,1); }
.modal.wide{ max-width:760px; }
@keyframes pop{ from{opacity:0; transform:translateY(12px) scale(.98);} to{opacity:1; transform:none;} }
.modal-hd{ display:flex; align-items:center; gap:12px; padding:20px 24px; border-bottom:1px solid var(--line); }
.modal-bd{ padding:24px; max-height:70vh; overflow-y:auto; }
.modal-ft{ padding:16px 24px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end; background:var(--paper-raised); }
.x-btn{ width:34px;height:34px;border-radius:9px; border:1px solid var(--line-2); background:var(--paper-raised); display:grid;place-items:center; color:var(--sage); }
.x-btn:hover{ background:#fff; color:var(--ink); }

/* toast */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:200;
  background:var(--pine); color:var(--on-pine); padding:13px 20px; border-radius:12px; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:11px; font-size:14px; font-weight:500; animation:toastin .3s cubic-bezier(.2,.8,.2,1); }
@keyframes toastin{ from{opacity:0; transform:translate(-50%,14px);} to{opacity:1; transform:translate(-50%,0);} }

/* fade-in util for screens — transform-only so a frozen/throttled animation
   frame is always fully VISIBLE (never opacity:0) */
.fadein{ animation:fadein .42s cubic-bezier(.2,.7,.2,1); }
@keyframes fadein{ from{transform:translateY(10px);} to{transform:none;} }
.stagger > *{ animation:fadein .5s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce){
  .fadein, .stagger > *{ animation:none; }
}

/* responsive */
@media (max-width:1080px){
  .app{ grid-template-columns:1fr; }
  .sidebar{ display:none; }
  .g4{ grid-template-columns:repeat(2,1fr); }
  .agent-wrap{ grid-template-columns:1fr; height:auto; }
}
@media (max-width:720px){
  .g2,.g3{ grid-template-columns:1fr; }
  .canvas{ padding:20px 16px 50px; }
  .top-search{ display:none; }
  .page-hd h1{ font-size:24px; }
}