:root{
    --bg:#F5F6F1; --bg-elevated:#FFFFFF; --bg-sunken:#EEF0EA; --card-border:#E3E6DD;
    --ink:#16241D; --ink-soft:#5B6A60; --ink-faint:#96A296;
    --emerald:#0E5C46; --emerald-strong:#0A3F31; --emerald-soft:#E3F0E9;
    --mint:#3FA98A; --mint-soft:#E1F2EB;
    --coral:#C7483A; --coral-soft:#FBE8E4;
    --slate:#546272; --slate-soft:#E7ECF1;
    --amber:#B87A1E; --amber-soft:#F8ECD8;
    --purple:#8B5AA6; --purple-soft:#F1E7F6;
    --sidebar-bg:#0E1B16; --sidebar-ink:#CBD7CF; --sidebar-ink-soft:#7C9188; --sidebar-active:#17342A; --sidebar-border:#1C2E26;
    --focus:#3FA98A;
    --shadow-sm:0 1px 2px rgba(14,28,22,.06);
    --shadow-md:0 1px 2px rgba(14,28,22,.05), 0 10px 24px -14px rgba(14,28,22,.22);
    --shadow-lg:0 12px 40px -12px rgba(14,28,22,.32);
    --font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
    --font-display:'Fraunces',ui-serif,Georgia,serif;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0C1712; --bg-elevated:#12201A; --bg-sunken:#0A1410; --card-border:#213229;
      --ink:#EAF1EC; --ink-soft:#9FB2A6; --ink-faint:#5D7268;
      --emerald:#3FA98A; --emerald-strong:#5CC5A5; --emerald-soft:#17342A;
      --mint:#4FBF9F; --mint-soft:#15332A;
      --coral:#E2766A; --coral-soft:#3A211D;
      --slate:#9AACC0; --slate-soft:#1D2732;
      --amber:#E0A94E; --amber-soft:#332711;
      --purple:#C79EDB; --purple-soft:#2A2033;
      --sidebar-bg:#0A1512; --sidebar-ink:#CBD7CF; --sidebar-ink-soft:#71887D; --sidebar-active:#17342A; --sidebar-border:#1C2C24;
      --shadow-sm:0 1px 2px rgba(0,0,0,.4);
      --shadow-md:0 1px 2px rgba(0,0,0,.4), 0 14px 28px -14px rgba(0,0,0,.55);
      --shadow-lg:0 20px 50px -16px rgba(0,0,0,.65);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0C1712; --bg-elevated:#12201A; --bg-sunken:#0A1410; --card-border:#213229;
    --ink:#EAF1EC; --ink-soft:#9FB2A6; --ink-faint:#5D7268;
    --emerald:#3FA98A; --emerald-strong:#5CC5A5; --emerald-soft:#17342A;
    --mint:#4FBF9F; --mint-soft:#15332A;
    --coral:#E2766A; --coral-soft:#3A211D;
    --slate:#9AACC0; --slate-soft:#1D2732;
    --amber:#E0A94E; --amber-soft:#332711;
    --purple:#C79EDB; --purple-soft:#2A2033;
    --sidebar-bg:#0A1512; --sidebar-ink:#CBD7CF; --sidebar-ink-soft:#71887D; --sidebar-active:#17342A; --sidebar-border:#1C2C24;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 1px 2px rgba(0,0,0,.4), 0 14px 28px -14px rgba(0,0,0,.55);
    --shadow-lg:0 20px 50px -16px rgba(0,0,0,.65);
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  html{scroll-padding-top:env(safe-area-inset-top,0px);}
  body{
    margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-sans);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  }
  #root{min-height:100%;}
  ::selection{ background:var(--mint-soft); }
  ::-webkit-scrollbar{width:10px; height:10px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:var(--card-border); border-radius:8px;}
  .font-display{ font-family:var(--font-display); font-optical-sizing:auto; }
  button, input, select, textarea{ font-family:inherit; }
  /* iOS Safari zooms the page when a field under 16px is focused, and stays zoomed. */
  @media (max-width: 1023px), (pointer: coarse){ input, select, textarea{ font-size:16px !important; } }
  button{ cursor:pointer; }
  :focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:6px; }
  .scrollbar-none::-webkit-scrollbar{display:none;}
  .scrollbar-none{-ms-overflow-style:none; scrollbar-width:none;}
  @keyframes riseIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
  .rise-in{ animation:riseIn .35s ease both; }
  @keyframes toastIn{ from{opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);} }
  .toast-in{ animation:toastIn .25s ease both; }
  @media (prefers-reduced-motion: reduce){
    .rise-in, .toast-in{ animation:none; }
  }
  input[type="range"]{ -webkit-appearance:none; appearance:none; height:4px; border-radius:4px; background:var(--card-border); }
  input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%;
    background:var(--emerald); border:3px solid var(--bg-elevated); box-shadow:var(--shadow-sm); cursor:pointer;
  }
  input[type="checkbox"]{ accent-color:var(--emerald); }