/* =============================================================================
   Purrtry theme — Bec Broomsticks design system, "App · Light" surface.
   Tokens copied from the house theme.css so the app stays self-contained
   (no runtime dependency on the skill folder). Build with var(--ds-*).
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap");

:root{
  /* brand */
  --ds-lavender:#AF8DFF; --ds-lavender-strong:#9F85FF; --ds-lavender-tint:#ECE7FF;
  --ds-lavender-deep:#6E55D6; --ds-interactive:#706DE3;
  /* category pastels */
  --ds-cat-lime:#EAFBA9; --ds-cat-sage:#D4DFAB; --ds-cat-coral:#C85E71;
  --ds-cat-sky:#95C8DB; --ds-cat-periwinkle:#B8ACD4;
  /* priority */
  --ds-prio-high:#7C5157; --ds-prio-medium:#A28760;
  /* radii */
  --ds-radius-pill:999px; --ds-radius-card:16px; --ds-radius-sm:8px;
  /* type */
  --ds-font-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ds-font-display:"Recoleta","Fraunces",Georgia,"Times New Roman",serif;
  /* depth + motion */
  --ds-shadow-soft:rgba(22,22,19,.18) 0 40px 30px -30px;
  --ds-shadow-card:rgba(0,0,0,.06) 0 4px 12px 0;
  --ds-transition:.2s cubic-bezier(.22,1,.36,1);
  /* fine grain/noise overlay */
  --ds-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  /* App · Light surfaces */
  --ds-bg:#FFFFFF; --ds-surface:#EDEBE9; --ds-surface-2:#F6F5F4; --ds-surface-3:#FCFCFC;
  --ds-text:#111717; --ds-text-2:#363636; --ds-text-muted:#A7A7A7; --ds-border:#E2DFDB;

  /* legacy aliases used by inline component styles (muted text is darker than
     the decorative muted token so it stays AA on white) */
  --muted:#766F6A;
  --warn:var(--ds-cat-coral);
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--ds-bg);color:var(--ds-text);font:15px/1.5 var(--ds-font-ui);-webkit-font-smoothing:antialiased}

/* house depth: soft lavender glow behind everything… */
body::before{content:"";position:fixed;inset:0;z-index:-1;
  background:radial-gradient(120% 70% at 50% 0%,rgba(175,141,255,.16),rgba(255,255,255,0) 60%)}
/* …and fine grain over everything. Never flat. */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;
  opacity:.45;mix-blend-mode:overlay;background-image:var(--ds-grain)}

.app{min-height:100vh;display:flex;flex-direction:column}
.header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;
  padding:12px 20px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--ds-border)}
.logo{font-family:var(--ds-font-display);font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--ds-text)}
.nav{display:flex;gap:8px;padding:12px 20px 4px;overflow-x:auto;max-width:760px;margin:0 auto;width:100%}
.tab{background:transparent;border:0;color:var(--muted);font:600 14px var(--ds-font-ui);
  padding:10px 18px;min-height:44px;border-radius:var(--ds-radius-pill);cursor:pointer;white-space:nowrap;
  transition:background var(--ds-transition),color var(--ds-transition)}
.tab.active{color:#161213;background:var(--ds-lavender-tint)}
.main{flex:1;padding:16px 20px 100px;max-width:760px;margin:0 auto;width:100%}

.input{width:100%;background:var(--ds-surface-2);border:1px solid var(--ds-border);
  border-radius:var(--ds-radius-pill);padding:11px 16px;min-height:44px;color:var(--ds-text);
  font:15px var(--ds-font-ui);outline:none;transition:border-color var(--ds-transition),box-shadow var(--ds-transition)}
.input:focus{border-color:var(--ds-lavender);box-shadow:0 0 0 3px var(--ds-lavender-tint)}
textarea.input{border-radius:var(--ds-radius-card)}

.btn{background:var(--ds-lavender-deep);color:#fff;border:0;border-radius:var(--ds-radius-pill);
  padding:11px 22px;min-height:44px;font:600 15px var(--ds-font-ui);cursor:pointer;
  transition:transform var(--ds-transition),filter var(--ds-transition)}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--ds-interactive);border:1.5px solid var(--ds-text);font-weight:600}
.btn:disabled{opacity:.5;cursor:default;transform:none}

.chip{background:var(--ds-surface-3);border:1px solid var(--ds-border);color:var(--ds-text-2);
  border-radius:var(--ds-radius-pill);padding:7px 14px;min-height:36px;font:600 13px var(--ds-font-ui);cursor:pointer;
  transition:background var(--ds-transition),color var(--ds-transition),border-color var(--ds-transition)}
.chip.active{background:var(--ds-lavender-tint);color:var(--ds-lavender-deep);border-color:var(--ds-lavender)}

.card{background:var(--ds-surface-3);border:1px solid var(--ds-border);
  border-radius:var(--ds-radius-card);padding:12px 14px;display:flex;align-items:center;gap:10px;
  box-shadow:var(--ds-shadow-card)}

.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
  background:var(--ds-lavender-tint);border:1px solid var(--ds-lavender);color:#161213;
  border-radius:var(--ds-radius-pill);padding:10px 22px;font-weight:600;z-index:50;box-shadow:var(--ds-shadow-card)}
.toast.err{background:var(--ds-cat-coral);border-color:var(--ds-cat-coral);color:#fff}

.gate{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px}
.gate .logo{font-size:34px}

.modal-overlay{position:fixed;inset:0;background:rgba(22,18,19,.35);backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;justify-content:center;z-index:100}
.modal{background:var(--ds-bg);border-radius:24px 24px 0 0;padding:24px 20px 40px;
  width:100%;max-width:560px;max-height:85vh;overflow:auto;box-shadow:var(--ds-shadow-soft)}
.modal strong{font-family:var(--ds-font-display);font-weight:600;font-size:20px}

.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 0;color:var(--muted);text-align:center}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}