:root,[data-theme="light"]{
  --bg:#f6f4ee; --surface:#ffffff; --surface-2:#f1ede4;
  --border:rgba(30,28,22,.10); --border-strong:rgba(30,28,22,.18);
  --text:#1e1c16; --muted:#6b6860; --faint:#9c9890; --inverse:#fbfaf6;
  --primary:#016b70; --primary-hover:#014e53; --primary-soft:rgba(1,107,112,.10);
  --accent:#c97a3a; --success:#2f6b3f; --danger:#8b3d39;
  --shadow-sm:0 1px 2px rgba(20,18,12,.06);
  --shadow-md:0 10px 28px rgba(20,18,12,.08);
  --shadow-lg:0 22px 48px rgba(20,18,12,.10);
  --radius-sm:10px; --radius-md:16px; --radius-lg:22px;
  --content:1220px;
  --font-body:'General Sans','Inter',system-ui,sans-serif;
  --font-display:'Cabinet Grotesk','General Sans',sans-serif;
}
[data-theme="dark"]{
  --bg:#0f110f; --surface:#171a18; --surface-2:#1e211e;
  --border:rgba(236,235,231,.10); --border-strong:rgba(236,235,231,.18);
  --text:#ecebe7; --muted:#b3b1aa; --faint:#7e7b74; --inverse:#0f110f;
  --primary:#63aab3; --primary-hover:#87c0c7; --primary-soft:rgba(99,170,179,.16);
  --accent:#e0a36f; --success:#8ac29b; --danger:#e3a19a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.25);
  --shadow-md:0 14px 34px rgba(0,0,0,.30);
  --shadow-lg:0 24px 60px rgba(0,0,0,.38);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body); background:var(--bg); color:var(--text);
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display); margin:0; letter-spacing:-.01em}
a{color:var(--primary); text-decoration:none}
kbd{background:var(--surface-2); border:1px solid var(--border); border-radius:4px;
  padding:.1rem .35rem; font-size:.72rem; font-family:ui-monospace,monospace; color:var(--muted);}

.app{max-width:var(--content); margin:0 auto; padding:1.5rem 1.25rem 3rem}

.top{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem}
.brand{display:flex; align-items:center; gap:.55rem; font-family:var(--font-display); font-weight:800; font-size:1.15rem}
.brand-mark{color:var(--primary); font-size:1.4rem; line-height:1}
.top-actions{display:flex; gap:.5rem; align-items:center}

.lang-switch{display:flex; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:3px; gap:3px}
.lang-btn{border:0; background:transparent; color:var(--muted); font-weight:600; padding:.35rem .75rem; border-radius:999px; cursor:pointer; font-size:.8rem}
.lang-btn.active{background:var(--primary); color:var(--inverse)}
.icon-btn{width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:10px; cursor:pointer}
.icon-btn:hover{background:var(--surface-2)}

.hero{padding:1.5rem 0 2rem; max-width:760px}
.hero h1{font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; line-height:1.15;
  background:linear-gradient(120deg,var(--text) 0%,var(--primary) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-sub{color:var(--muted); font-size:1.05rem; margin-top:.5rem}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start}
@media (max-width:1024px){.grid{grid-template-columns:1fr}}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:1.5rem; box-shadow:var(--shadow-sm); transition:box-shadow .2s}
.card:hover{box-shadow:var(--shadow-md)}
.card-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem; gap:1rem}
.card-head h2{font-size:1.1rem; font-weight:700}
.tag{background:var(--surface-2); color:var(--muted); font-size:.72rem; font-weight:600;
  padding:.28rem .65rem; border-radius:999px; letter-spacing:.04em; text-transform:uppercase}
.tag-accent{background:var(--primary-soft); color:var(--primary)}

.row-2{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
@media (max-width:640px){.row-2{grid-template-columns:1fr}}

.field{margin-bottom:1rem}
label{display:block; font-weight:600; font-size:.85rem; margin-bottom:.35rem; color:var(--text)}
input,select,textarea{
  width:100%; padding:.65rem .8rem; border:1px solid var(--border-strong); border-radius:12px;
  background:var(--surface); color:var(--text); font-family:inherit; font-size:.95rem;
  transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{outline:0; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft)}
textarea{resize:vertical; min-height:240px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.88rem}
.field-foot{display:flex; justify-content:space-between; align-items:center; margin-top:.3rem; gap:.5rem; flex-wrap:wrap}
.field-help{font-size:.78rem; color:var(--faint)}
.char-counter{font-size:.78rem; color:var(--faint); font-variant-numeric:tabular-nums}
.char-counter.warn{color:var(--danger); font-weight:600}

.actions{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem}
.btn{display:inline-flex; align-items:center; gap:.45rem; background:var(--surface); color:var(--text);
  border:1px solid var(--border-strong); border-radius:12px; padding:.6rem 1rem; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:.9rem; transition:all .15s}
.btn:hover{background:var(--surface-2); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--primary); color:var(--inverse); border-color:transparent; box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-primary:disabled{opacity:.55; cursor:not-allowed; transform:none}

.status{margin-top:.9rem; font-size:.88rem; color:var(--muted); min-height:1.1rem}
.status.success{color:var(--success)}
.status.error{color:var(--danger)}

.stepper{display:flex; gap:.4rem; flex-wrap:wrap; margin:1rem 0 0; padding:.8rem 1rem;
  background:var(--surface-2); border:1px solid var(--border); border-radius:14px; list-style:none}
.step{display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--faint); font-weight:500}
.step + .step{padding-left:.2rem}
.step .dot{width:9px; height:9px; border-radius:50%; background:var(--faint); transition:all .2s}
.step.active{color:var(--text)}
.step.active .dot{background:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); animation:pulse 1.2s ease-in-out infinite}
.step.done{color:var(--success)}
.step.done .dot{background:var(--success)}
.step.failed{color:var(--danger)}
.step.failed .dot{background:var(--danger)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

.error-banner{display:none; margin-top:1rem; padding:.9rem 1rem; background:rgba(139,61,57,.08);
  border:1px solid var(--danger); border-radius:14px; color:var(--danger)}
.error-banner.show{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap}

.out-actions{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.25rem}
.out-block{margin-bottom:1.4rem}
.out-block h3{font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:.5rem; font-weight:700}
.out-body{background:var(--surface-2); border:1px solid var(--border); border-radius:14px;
  padding:.95rem 1.05rem; white-space:pre-wrap; font-size:.92rem; min-height:2.6rem; line-height:1.65}
.out-body.empty{color:var(--faint); font-style:italic}
.out-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem}
.out-list li{background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
  padding:.65rem .9rem; font-size:.9rem}
.out-list li.empty{color:var(--faint); font-style:italic; background:transparent; border-style:dashed}

.skeleton{background:linear-gradient(90deg,var(--surface-2) 0%,var(--border) 50%,var(--surface-2) 100%);
  background-size:200% 100%; animation:shimmer 1.3s infinite; border-radius:6px; height:13px; margin:.4rem 0}
.skeleton.w80{width:80%} .skeleton.w60{width:60%} .skeleton.w90{width:90%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.foot{text-align:center; color:var(--faint); font-size:.8rem; margin-top:2.5rem}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

/* ===== File upload / drop zone ===== */
.drop-zone{position:relative}
.drop-zone.dragging textarea{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft)}
.drop-zone.dragging .drop-hint{display:flex}
.drop-hint{display:none; position:absolute; inset:0; align-items:center; justify-content:center;
  background:var(--primary-soft); color:var(--primary); font-weight:600; border-radius:12px;
  pointer-events:none; border:2px dashed var(--primary)}
.foot-right{display:flex; align-items:center; gap:.75rem}
.upload-btn{display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; color:var(--primary);
  cursor:pointer; padding:.25rem .6rem; border:1px solid var(--primary-soft); border-radius:999px;
  font-weight:600}
.upload-btn:hover{background:var(--primary-soft)}
/* ===== Chip button (auto-clean) ===== */
.chip-btn{display:inline-flex; align-items:center; font-size:.75rem; color:var(--muted);
  background:transparent; border:1px solid var(--border-strong); border-radius:999px;
  padding:.22rem .7rem; cursor:pointer; font-family:inherit; font-weight:600}
.chip-btn:hover{background:var(--surface-2); color:var(--text)}

/* ===== Stepper states ===== */
.stepper.idle .step .dot{background:var(--faint); opacity:.5}
.stepper.idle .step{opacity:.6}
.eta-line{font-size:.78rem; color:var(--muted); margin-top:.5rem; padding-left:.25rem}

/* ===== Action items v2 ===== */
.out-list.actions-v2 li{display:flex; flex-direction:column; gap:.4rem; padding:.75rem .95rem}
.action-task{font-weight:600; font-size:.93rem; color:var(--text); line-height:1.45}
.action-meta{display:flex; flex-wrap:wrap; gap:.35rem}
.badge{display:inline-flex; align-items:center; gap:.25rem; background:var(--surface); border:1px solid var(--border);
  font-size:.72rem; padding:.18rem .55rem; border-radius:999px; color:var(--muted); font-weight:600}
.badge-owner{color:var(--primary); border-color:var(--primary-soft); background:var(--primary-soft)}
.badge-due{color:var(--text); border-color:var(--border-strong)}
.badge-high{color:var(--danger); border-color:rgba(139,61,57,.25); background:rgba(139,61,57,.08)}
.badge-medium{color:#a06a2a; border-color:rgba(201,122,58,.25); background:rgba(201,122,58,.08)}
.badge-low{color:var(--success); border-color:rgba(47,107,63,.25); background:rgba(47,107,63,.08)}

/* ===== Copy feedback ===== */
.btn.copied{background:var(--success); color:var(--inverse); border-color:transparent}
.btn.copied:hover{background:var(--success)}

/* ===== History drawer ===== */
.drawer-overlay{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:50; animation:fade .15s ease-out}
.drawer{position:fixed; top:0; right:0; width:min(380px,95vw); height:100vh; background:var(--surface);
  border-left:1px solid var(--border); box-shadow:var(--shadow-lg); z-index:51; display:flex; flex-direction:column;
  animation:slideIn .22s cubic-bezier(.2,.8,.2,1)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.drawer-head{display:flex; justify-content:space-between; align-items:center; padding:1.1rem 1.25rem; border-bottom:1px solid var(--border)}
.drawer-head h3{font-size:1.05rem; font-weight:700; margin:0}
.drawer-body{flex:1; overflow-y:auto; padding:1rem 1.25rem; display:flex; flex-direction:column; gap:.5rem}
.history-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem}
.history-item{background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:.7rem .85rem;
  cursor:pointer; transition:all .15s}
.history-item:hover{border-color:var(--primary); transform:translateX(-2px)}
.history-item-title{font-weight:600; font-size:.9rem; color:var(--text); margin-bottom:.2rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.history-item-meta{font-size:.75rem; color:var(--faint)}
.history-item-del{float:right; background:transparent; border:0; color:var(--faint); cursor:pointer; font-size:1rem; padding:0 .25rem}
.history-item-del:hover{color:var(--danger)}
.history-empty{color:var(--faint); font-size:.9rem; text-align:center; padding:2rem 0}
.drawer[hidden]{display:none !important}
.drawer-overlay[hidden]{display:none !important}
/* ===== Quota pill ===== */
.quota-pill{display:inline-flex; align-items:center; gap:.3rem;
  background:var(--surface); color:var(--muted); border:1px solid var(--border);
  border-radius:999px; padding:.35rem .75rem; font-size:.78rem; font-weight:700;
  font-family:inherit; cursor:pointer; font-variant-numeric:tabular-nums;
  transition:all .15s}
.quota-pill:hover{background:var(--surface-2); color:var(--text)}
.quota-pill .quota-label{font-weight:500; color:var(--faint); margin-left:.1rem}
.quota-pill.warn{background:rgba(201,122,58,.10); border-color:rgba(201,122,58,.35); color:#a06a2a}
.quota-pill.warn .quota-label{color:#a06a2a}
.quota-pill.full{background:rgba(139,61,57,.10); border-color:rgba(139,61,57,.35); color:var(--danger)}
.quota-pill.full .quota-label{color:var(--danger)}
.quota-pill.pro{background:linear-gradient(135deg,#f4c96d,#c97a3a); color:#1e1c16;
  border-color:transparent; font-weight:800}
.quota-pill.pro .quota-label{color:#1e1c16}
.quota-pill::after {
  content: '·';
  opacity: .4;
  margin-left: .3rem;
  transition: all .15s;
}
.quota-pill:hover::after {
  content: '⚡';
  opacity: 1;
}

/* ===== Modal ===== */
.modal{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:1rem}
.modal[hidden]{display:none !important}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); animation:fade .15s ease-out}
.modal-card{position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:2rem 1.75rem; max-width:420px; width:100%; text-align:center;
  animation:popIn .22s cubic-bezier(.2,.9,.3,1.2)}
@keyframes popIn{from{opacity:0; transform:translateY(10px) scale(.96)}to{opacity:1; transform:translateY(0) scale(1)}}
.modal-close{position:absolute; top:.6rem; right:.6rem; width:32px; height:32px;
  background:transparent; border:0; font-size:1.1rem; cursor:pointer; color:var(--faint); border-radius:8px}
.modal-close:hover{background:var(--surface-2); color:var(--text)}
.modal-icon{font-size:2.2rem; margin-bottom:.4rem}
.modal-title{font-size:1.3rem; font-weight:800; margin:0 0 .4rem}
.modal-sub{color:var(--muted); font-size:.9rem; margin:0 0 1.25rem}
.modal-perks{list-style:none; padding:0; margin:0 0 1.5rem; text-align:left; display:flex; flex-direction:column; gap:.4rem}
.modal-perks li{font-size:.9rem; color:var(--text); padding:.35rem .6rem; background:var(--surface-2); border-radius:8px}
.modal-actions{display:flex; flex-direction:column; gap:.55rem}
.btn-block{width:100%; justify-content:center; padding:.8rem 1rem}
.btn-link{background:transparent; border:0; color:var(--muted); font-family:inherit;
  font-size:.85rem; cursor:pointer; padding:.5rem; font-weight:600}
.btn-link:hover{color:var(--text); text-decoration:underline}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* ============================================================
   Upgrade Modal v2 — wide variant with plan cards
============================================================ */
.modal-card-wide { max-width: 580px; text-align: left; padding: 2rem 1.75rem 1.5rem; }
.modal-card-wide .modal-icon,
.modal-card-wide .modal-title,
.modal-card-wide .modal-sub { text-align: center; }

.upgrade-plans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  margin: 1.25rem 0 1rem;
}
@media (max-width: 540px) {
  .upgrade-plans-grid { grid-template-columns: 1fr; }
}

.upgrade-plan-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem .95rem;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, transform .15s;
}
.upgrade-plan-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}
.upgrade-plan-card-max {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.upgrade-plan-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .35rem;
}
.upgrade-plan-head h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--text);
}
.upgrade-plan-badge {
  font-size: .62rem;
  font-weight: 800;
  padding: .18rem .5rem;
  border-radius: 999px;
  letter-spacing: .06em;
}
.upgrade-plan-badge-popular {
  background: var(--primary);
  color: var(--inverse);
}
.upgrade-plan-badge-max {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}

.upgrade-plan-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: .55rem;
}
.upgrade-price-amount {
  font-size: 1.75rem;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--text);
  letter-spacing: -.02em;
}
.upgrade-price-per {
  font-size: .75rem;
  color: var(--muted);
}

.upgrade-plan-feats {
  list-style: none;
  padding: 0;
  margin: 0 0 .9rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.upgrade-plan-feats li {
  font-size: .78rem;
  color: var(--muted);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.45;
}
.upgrade-plan-feats li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--success);
  font-weight: 800;
}

.upgrade-manage {
  text-align: center;
  padding: .85rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: .9rem;
  font-size: .82rem;
  color: var(--muted);
}
.upgrade-manage a {
  color: var(--primary);
  font-weight: 600;
  margin-left: .35rem;
}
.upgrade-manage a:hover { text-decoration: underline; }

.upgrade-fineprint {
  margin: .9rem 0 0;
  text-align: center;
  font-size: .7rem;
  color: var(--faint);
}