/* ── THEMES ─────────────────────────────────── */
[data-theme="dark"] {
  --bg:#121110;--sb:#0d0c0a;--surf:#1d1b18;--brd:#2c2a26;
  --acc:#4a9ead;--acc2:#5bb8c9;--tx:#dfd7cb;--mu:#6b6358;--pb:#0d0c0a;
}
[data-theme="light"] {
  --bg:#f0ece4;--sb:#e8e3da;--surf:#faf7f2;--brd:#cfc8bc;
  --acc:#2e7d8a;--acc2:#3a95a4;--tx:#1a1511;--mu:#8a7e70;--pb:#faf7f2;
}
*{box-sizing:border-box;margin:0;padding:0; -webkit-tap-highlight-color: transparent;}
html{height:100%;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--tx);
  min-height:100vh;
  height:100dvh;
  height:-webkit-fill-available;
  display:flex;flex-direction:column;overflow:hidden;
     transition:background .18s,color .18s}
body.legal-page{height:auto;min-height:100vh;overflow:auto;display:block}

/* ── HEADER ──────────────────────────────────── */
header{display:flex;align-items:center;justify-content:space-between;
       padding:10px 16px;background:var(--sb);border-bottom:1px solid var(--brd);flex-shrink:0}
.hd-l{display:flex;align-items:baseline;gap:12px}
h1{font-family:'Outfit',sans-serif;font-size:18px;color:var(--acc)}
.hd-sub{font-size:11px;color:var(--mu);display:none}
@media(min-width:600px){ .hd-sub{display:inline-block} }
.hd-r{display:flex;align-items:center;gap:12px}
/* Menu toggle (hidden on desktop) */
.menu-toggle{display:none;background:none;border:none;color:var(--tx);font-size:20px;cursor:pointer;
            padding:0;margin-right:12px;transition:all .2s}
.menu-toggle:active{color:var(--acc)}
@media(max-width:700px){ .menu-toggle{display:block} }

.menu-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.42);
             z-index:999;opacity:0;transition:opacity .2s;pointer-events:none}
.menu-overlay.open{opacity:1;pointer-events:all}
.icon-btn{background:var(--surf);border:1px solid var(--brd);border-radius:6px;
          color:var(--tx);font-size:13px;padding:6px 12px;cursor:pointer;
          font-family:inherit;line-height:1.2;transition:all .12s}
.icon-btn:hover, .icon-btn:active{border-color:var(--acc);color:var(--acc)}

.donate-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  padding:18px;background:rgba(0,0,0,.44);z-index:1200}
.donate-modal.open{display:flex}
.donate-modal-card{width:min(92vw,380px);background:var(--surf);border:1px solid var(--brd);
  border-radius:12px;padding:16px;box-shadow:0 16px 34px rgba(0,0,0,.28)}
.donate-modal-card h2{font-family:'Outfit',sans-serif;color:var(--acc);font-size:20px;line-height:1.2}
.donate-modal-card p{margin-top:10px;color:var(--mu);font-size:13px;line-height:1.6}
.donate-modal-card .bs{margin-top:12px}
.legal-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  padding:18px;background:rgba(0,0,0,.44);z-index:1200}
.legal-modal.open{display:flex}
.legal-modal-card{width:min(94vw,760px);max-height:min(88vh,820px);background:var(--surf);
  border:1px solid var(--brd);border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.32);
  display:flex;flex-direction:column;overflow:hidden}
.legal-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 16px 12px;border-bottom:1px solid var(--brd)}
.legal-modal-title{font-family:'Outfit',sans-serif;font-size:24px;line-height:1.1;color:var(--acc)}
.legal-modal-body{padding:16px;overflow:auto;background:var(--bg)}
.legal-doc[hidden]{display:none}

/* ── LAYOUT ──────────────────────────────────── */
.app{display:flex;flex:1;overflow:hidden;flex-direction:row;min-height:0}
@media(max-width:700px){ .app{flex-direction:column-reverse} } /* Put canvas top, controls bottom on phones */

/* ── SIDEBAR ─────────────────────────────────── */
.sb{width:320px;background:var(--sb);border-right:1px solid var(--brd);
    overflow-y:auto;flex-shrink:0;padding:16px 14px;
  display:flex;flex-direction:column;gap:10px;transition:background .18s;min-height:0}
.sb-mobile-bar{display:none}
@media(max-width:700px){
  .menu-overlay{display:block}
  .menu-overlay{touch-action:none}
  .sb{position:fixed;left:0;top:0;width:min(82vw,330px);max-width:330px;height:100%;border-right:1px solid var(--brd);border-top:none;
      padding-top:16px;z-index:1000;transform:translateX(-100%);transition:transform .3s ease;
      flex-direction:column;height:100dvh;max-height:100dvh;overflow-y:auto;
      -webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;
      box-shadow:16px 0 28px rgba(0,0,0,.28)}
  .sb.open{transform:translateX(0)}
  .sb-mobile-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
  .sb-mobile-title{font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--acc)}
  .sb-close{padding:6px 10px;font-size:12px}
  .app{flex-direction:column} /* Cancel column-reverse for phone layout */
}

.sb::-webkit-scrollbar{width:4px}
.sb::-webkit-scrollbar-thumb{background:var(--brd);border-radius:2px}

.sec{display:flex;flex-direction:column;gap:10px; background:var(--surf); padding:14px; border-radius:8px; border:1px solid var(--brd);}
.sec-hd{display:flex;justify-content:space-between;align-items:center}
.lbl-s{font-size:10px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
       color:var(--acc);padding-bottom:4px;border-bottom:1px solid var(--brd);
       flex:1;transition:border-color .18s}

details > summary { list-style: none; cursor: pointer; position: relative; padding-left: 16px; outline:none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: '▶'; position: absolute; left: 0; top: 0px; font-size: 9px; color: var(--acc); transition: transform 0.2s ease; }
details[open] > summary::before { transform: rotate(90deg) translateX(1px); }
details > *:not(summary) { margin-top: 10px; }

/* ── SHAPE GRID ──────────────────────────────── */
.sg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.shp{background:var(--bg);border:1px solid var(--brd);border-radius:8px;
     padding:10px 4px 6px;cursor:pointer;display:flex;flex-direction:column;
     align-items:center;gap:4px;color:var(--mu);font-size:9.5px;
     font-family:inherit;transition:all .12s;line-height:1}
.shp svg{width:32px;height:32px}
.shp:active{transform:scale(0.97)}
.shp.on{border-color:var(--acc);background:rgba(58,149,164,.14);color:var(--acc)}
@supports (background:color-mix(in srgb, black 50%, white)){
  .shp.on{background:color-mix(in srgb,var(--acc) 12%,var(--bg));}
}

/* ── ROW / INPUTS ────────────────────────────── */
.row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lbl{font-size:12px;color:var(--mu);flex-shrink:0}
.rhs{display:flex;align-items:center;gap:6px}
.utag{font-size:10px;color:var(--mu);min-width:14px;text-align:right}

input[type="number"]{width:56px;height:32px;background:var(--bg);border:1px solid var(--brd);
  border-radius:6px;color:var(--tx);font-family:inherit;font-size:13px;
  padding:0 6px;text-align:center;transition:background .18s,border-color .12s}
input[type="number"]:focus{outline:none;border-color:var(--acc)}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}
input[type="number"]{appearance:textfield;-moz-appearance:textfield}

/* Adjuster buttons (-/+) */
.adj{background:var(--bg);border:1px solid var(--brd);color:var(--tx); border-radius:6px;
     width:32px;height:32px;display:flex;align-items:center;justify-content:center;
     font-size:18px;cursor:pointer; transition:background .1s}
.adj:active{background:var(--brd);color:var(--acc)}
@supports (background:color-mix(in srgb, black 50%, white)){
  .adj{background:color-mix(in srgb,var(--tx) 5%,var(--bg));}
}

/* ── RANGE ───────────────────────────────────── */
.rg{display:flex;flex-direction:column;gap:6px}
.rg-hd{display:flex;justify-content:space-between}
.rv{font-size:11px;color:var(--acc)}
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:6px;
  background:var(--brd);border-radius:3px;outline:none;cursor:pointer;margin:6px 0}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;
  border-radius:50%;background:var(--acc);cursor:pointer; border:2px solid var(--bg); box-shadow:0 1px 3px rgba(0,0,0,0.3)}

/* ── TOGGLE ──────────────────────────────────── */
.tr{display:flex;align-items:center;justify-content:space-between;padding:5px 0}
.tg{position:relative;width:48px;height:26px;flex-shrink:0}
.tg input{opacity:0;width:0;height:0}
.tg-t{position:absolute;inset:0;background:var(--brd);border-radius:13px;
      cursor:pointer;transition:.2s}
.tg-t::before{content:'';position:absolute;height:18px;width:18px;left:4px;bottom:4px;
              background:var(--mu);border-radius:50%;transition:.2s}
.tg input:checked+.tg-t{background:var(--acc)}
.tg input:checked+.tg-t::before{transform:translateX(22px);background:#fff}

/* ── UNIT PILL ───────────────────────────────── */
.upill{display:flex;background:var(--bg);border:1px solid var(--brd);
       border-radius:6px;overflow:hidden;flex-shrink:0}
.upill button{background:none;border:none;padding:6px 14px;font-family:inherit;
              font-size:11px;color:var(--mu);cursor:pointer;transition:all .12s}
.upill button.on{background:var(--acc);color:var(--pb)}

/* ── SELECT ──────────────────────────────────── */
select{background:var(--bg);border:1px solid var(--brd);border-radius:6px; height:34px;
       color:var(--tx);font-family:inherit;font-size:12px;padding:4px 8px;
       flex:1;cursor:pointer;outline:none;transition:background .18s}
select:focus{border-color:var(--acc)}

/* ── INFO BOX ────────────────────────────────── */
.ibox{background:var(--bg);border:1px solid var(--brd);border-radius:8px;
      padding:12px;font-size:11px;color:var(--mu);line-height:2.2;transition:background .18s}
.ir{display:flex;justify-content:space-between;align-items:baseline}
.iv{color:var(--acc);font-size:13px;font-weight:500}
.warn{color:#c87828;font-size:10px;margin-top:6px;line-height:1.4}

/* ── NOTES ───────────────────────────────────── */
textarea{width:100%;min-height:70px;background:var(--bg);border:1px solid var(--brd);
         border-radius:6px;color:var(--tx);font-family:inherit;font-size:12px;
         padding:10px;resize:vertical;outline:none;line-height:1.6;transition:background .18s}
textarea:focus{border-color:var(--acc)}

/* iPad Safari: prevent zoom-on-focus and preserve control visibility in browser mode */
@media (pointer: coarse){
  input[type="number"],select,textarea{font-size:16px}
}

/* ── BUTTONS ─────────────────────────────────── */
.bp{background:var(--acc);color:var(--pb);border:none;border-radius:8px;
    padding:12px 14px;font-family:inherit;font-size:12px;font-weight:500;
    cursor:pointer;letter-spacing:.1em;text-transform:uppercase;width:100%;transition:background .12s}
.bp:active{background:var(--acc2);transform:scale(0.98)}
.bs{background:var(--bg);color:var(--tx);border:1px solid var(--brd);border-radius:8px;
    padding:10px 14px;font-family:inherit;font-size:12px;cursor:pointer;width:100%;transition:all .12s;font-weight:500}
.bs:active{border-color:var(--acc);color:var(--acc);transform:scale(0.98)}
.bcol{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.donate-btn{display:flex;align-items:center;justify-content:center;text-align:center;
  margin-top:8px;background:transparent;color:var(--acc);border:1px dashed var(--acc);
  border-radius:8px;padding:10px 12px;font-family:inherit;font-size:11px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:all .12s}
.donate-btn:hover,.donate-btn:active{background:rgba(58,149,164,.12);border-style:solid;color:var(--acc2)}
@supports (background:color-mix(in srgb, black 50%, white)){
  .donate-btn:hover,.donate-btn:active{background:color-mix(in srgb,var(--acc) 12%,transparent)}
}
.legal-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.legal-links a{color:var(--mu);font-size:11px;text-decoration:none;border-bottom:1px solid transparent;transition:color .12s,border-color .12s}
.legal-links a:hover,.legal-links a:active{color:var(--acc);border-color:var(--acc)}

.legal-shell{max-width:840px;margin:0 auto;padding:28px 20px 48px}
.legal-card{background:var(--surf);border:1px solid var(--brd);border-radius:14px;padding:22px 20px}
.legal-card + .legal-card{margin-top:14px}
.legal-kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:8px}
.legal-title{font-family:'Outfit',sans-serif;font-size:32px;line-height:1.1;color:var(--tx)}
.legal-lead{margin-top:10px;color:var(--mu);font-size:14px;line-height:1.7}
.legal-meta{margin-top:10px;color:var(--mu);font-size:12px}
.legal-card h2{font-family:'Outfit',sans-serif;font-size:20px;line-height:1.2;color:var(--acc);margin-bottom:10px}
.legal-card p{font-size:14px;line-height:1.7;color:var(--tx)}
.legal-card p + p{margin-top:10px}
.legal-card ul{padding-left:18px;color:var(--tx)}
.legal-card li{font-size:14px;line-height:1.7}
.legal-card li + li{margin-top:6px}
.legal-home{display:inline-flex;align-items:center;gap:8px;color:var(--acc);text-decoration:none;font-size:13px;font-weight:500;margin-bottom:14px}

@media(max-width:700px){
  .legal-modal{padding:10px}
  .legal-modal-card{width:100%;max-height:92vh;border-radius:14px}
  .legal-modal-head{padding:14px 14px 10px}
  .legal-modal-body{padding:14px}
  .legal-modal-title{font-size:21px}
  .legal-shell{padding:20px 14px 32px}
  .legal-card{padding:18px 16px}
  .legal-title{font-size:26px}
}

/* ── CANVAS ──────────────────────────────────── */
.cv{flex:1;display:flex;align-items:center;justify-content:center;
    padding:16px;overflow:hidden;background:var(--bg);transition:background .18s;min-height:0;min-width:0}
#psvg{max-height:100%;max-width:100%;width:100%;height:100%;display:block;
      filter:drop-shadow(0 6px 28px rgba(0,0,0,.55))}
[data-theme="light"] #psvg{filter:drop-shadow(0 3px 16px rgba(0,0,0,.15))}

@media (pointer: coarse){
  #psvg{filter:none}
}

@supports (padding: max(0px)){
  header{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));}
  .sb{padding-bottom:max(16px,env(safe-area-inset-bottom));}
  .cv{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:max(16px,env(safe-area-inset-bottom));}
}

/* ── PRINT ───────────────────────────────────── */
@media print{
  html,body{
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
    background:white!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  header,.sb,.menu-overlay{display:none!important}
  .app{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
  }
  .cv{padding:0!important;background:white!important;
      height:100%!important;width:100%!important;display:flex!important;overflow:hidden!important;
      align-items:center!important;justify-content:center!important;
      margin:0!important;min-height:0!important;min-width:0!important}
  #psvg{display:block!important;width:auto!important;height:100%!important;
      max-width:100%!important;max-height:100%!important;filter:none!important;
      margin:0!important;page-break-inside:avoid!important;break-inside:avoid-page!important}
  .np{display:none!important}
}