/* Cellionaire — light, quiet UI so the canvas carries the color. System fonts only (no external requests). */
:root{--bg:#f2f1ee;--surface:#fff;--ink:#141414;--ink-2:#5f5f5c;--ink-3:#8d8c88;--line:rgba(20,20,20,.10);--line-2:rgba(20,20,20,.16);
  --accent:#141414;--sel:#2563eb;--warn:#b42318;--ok:#067647;--amber:#9a6700;--amber-bg:#fff4d6;
  --r-lg:16px;--r-md:10px;--r-sm:8px;--shadow:0 1px 2px rgba(0,0,0,.06),0 8px 28px rgba(0,0,0,.10);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14px/1.4 var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
button,input,select{font:inherit;color:inherit}
button{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:7px 12px;cursor:pointer;transition:background .12s,border-color .12s}
button:hover{border-color:rgba(20,20,20,.32)}button:disabled{opacity:.45;cursor:default}button.primary:disabled{opacity:1;background:#e6e5e1;border-color:#e6e5e1;color:#9a9994}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}button.primary:hover{background:#000}
button.on{background:var(--ink);border-color:var(--ink);color:#fff}
input,select{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:7px 10px;min-width:0}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--sel);outline-offset:1px}
label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-2)}
.muted{color:var(--ink-3);font-size:12px}.warn{color:var(--warn);font-size:13px}.mono{font-family:var(--mono)}
.row{display:flex;gap:8px;flex-wrap:wrap}
a{color:var(--ink)}

/* ---------- canvas page ---------- */
body.app{overflow:hidden;height:100vh;height:100dvh}
#wrap{position:fixed;inset:0}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.bar{position:fixed;top:12px;z-index:10;display:flex;align-items:center;gap:10px}
.top-left{left:12px;background:var(--surface);border-radius:999px;padding:7px 14px 7px 16px;box-shadow:var(--shadow);max-width:calc(100vw - 80px);flex-wrap:wrap;row-gap:2px}
.top-right{right:12px}
.brand{font-weight:750;letter-spacing:-.02em;font-size:16px;display:inline-flex;align-items:center;gap:6px}.brand .mark{width:18px;height:18px;flex:none}
.stat{color:var(--ink-2);font-size:13px}
.soon-badge{background:#efeee9;color:var(--ink-2,#555);border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600}.soon-badge[hidden]{display:none}
#pay.soon:disabled{opacity:1;background:#e9e8e4;color:#6b6b6b;cursor:not-allowed}
#coin[hidden],#refund[hidden],#q-coin[hidden]{display:none}
.demo{background:var(--amber-bg);color:var(--amber);border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600}
button.icon,label.icon{width:38px;height:38px;padding:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1;flex:none;background:var(--surface);border:1px solid var(--line-2);cursor:pointer}
.bar button.icon,.zoom-ctl button.icon{border-color:transparent;box-shadow:var(--shadow);width:40px;height:40px;font-weight:600}
label.icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
label.icon input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.zoom-ctl{position:fixed;right:12px;bottom:calc(var(--dock-h,120px) + 24px);display:flex;flex-direction:column;gap:8px;z-index:10}
.pop{position:fixed;top:62px;right:12px;z-index:20;width:min(340px,calc(100vw - 24px));background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:16px 18px}
.pop h3{margin:0 0 6px;font-size:15px}.pop .sub{margin:0 0 8px;color:var(--ink-2)}.pop ul{margin:0 0 10px;padding-left:18px;color:var(--ink-2)}.pop li{margin:3px 0}

#dock{position:fixed;left:50%;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom));z-index:10;width:min(850px,calc(100vw - 24px));
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:10px;display:flex;flex-direction:column;gap:8px}
.dock-row{display:flex;align-items:center;gap:10px}
.seg{display:inline-flex;background:#efeeeb;border-radius:var(--r-md);padding:3px;gap:2px;flex:none}
.seg button{border:0;background:transparent;border-radius:7px;padding:6px 12px;color:var(--ink-2);font-weight:550}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.palette{display:flex;gap:5px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding:4px}
.palette::-webkit-scrollbar{display:none}
.swatch{width:24px;height:24px;border-radius:999px;border:1px solid rgba(0,0,0,.14);padding:0;flex:none;cursor:pointer;position:relative}
.swatch.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.swatch.custom{overflow:hidden;background:conic-gradient(#f43f5e,#f59e0b,#84cc16,#06b6d4,#6366f1,#d946ef,#f43f5e);display:block}
.swatch.custom input{position:absolute;inset:-6px;width:40px;height:40px;opacity:0;cursor:pointer;border:0;padding:0}
.checkout{border-top:1px solid var(--line);padding-top:8px}
.summary{display:flex;align-items:baseline;gap:6px;flex:1;min-width:0;white-space:nowrap;overflow:hidden}
.summary .total{font-size:18px;font-weight:700;margin-left:4px}
.checkout input{width:170px}.checkout select{width:170px}
#pay{padding:9px 18px;white-space:nowrap}
#dock.empty .checkout .summary{color:var(--ink-3)}
#q-lock:empty,#q-min:empty,#q-over:empty,#q-rules:empty{display:none}
#q-rules{font-size:12px;color:var(--ink-3);margin-top:2px}
#q-over{font-size:12px;color:var(--ink-2,#555);margin-top:4px}
#msg{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--dock-h,120px) + 24px);z-index:30;background:var(--ink);color:#fff;border-radius:999px;padding:9px 16px;font-size:13px;max-width:calc(100vw - 32px);box-shadow:var(--shadow);text-align:center;pointer-events:none}
#msg:empty{display:none}

/* cell popup */
#tip{position:fixed;pointer-events:none;background:var(--surface);color:var(--ink);border-radius:12px;box-shadow:var(--shadow);padding:8px 11px;font-size:12px;display:none;white-space:nowrap;z-index:5;border:1px solid var(--line)}
#tip .t-h{font-weight:650;margin-bottom:3px}#tip .t-h .mono{font-weight:500;color:var(--ink-2)}
#tip dl{display:grid;grid-template-columns:auto auto;gap:2px 12px;margin:0}#tip dt{color:var(--ink-3)}#tip dd{margin:0;text-align:right}
#tip .lock{color:var(--amber);margin-top:3px}
#tip.pin{z-index:25;pointer-events:auto;white-space:normal;width:min(270px,82vw);font-size:13px;padding:12px 14px}
#tip label{margin-top:8px;font-size:12px}#tip select,#tip input{width:100%;font-size:13px}#tip .row{margin-top:10px}#tip .row button{flex:1}
#tip .x{position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;border:0;border-radius:999px;background:#f0efec;font-size:13px;line-height:24px;color:var(--ink-2)}
.tip-act{display:flex;gap:6px;margin-top:10px}.tip-act button{flex:1;font-size:12px;padding:6px 8px}
#r-info{margin-top:8px;line-height:1.5}#r-msg:not(:empty){margin-top:6px}


/* simple pages (checkout, admin) */
body.page{min-height:100vh;padding:24px 12px}
.card{max-width:460px;margin:40px auto;background:var(--surface);padding:24px;border-radius:var(--r-lg);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
.card h2{margin:0;font-size:20px;letter-spacing:-.01em}.card h3{margin:14px 0 0;font-size:15px}
.card .total{font-size:22px;font-weight:700}
.page-brand{display:flex;align-items:center;justify-content:center;gap:7px;font-weight:750;letter-spacing:-.02em;text-decoration:none;margin-top:8px;color:var(--ink)}.page-brand .mark{width:20px;height:20px}
.scroll{overflow-x:auto}table{border-collapse:collapse;font-size:12px;width:100%}
td,th{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}th{color:var(--ink-3);font-weight:600;white-space:nowrap}
.admin{max-width:1040px!important}.admin .settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;align-items:end}
.admin td button{font-size:12px;padding:4px 8px;margin:1px 2px 1px 0}
.admin .stats{display:flex;flex-wrap:wrap;gap:8px}.admin .stats span{background:#f4f3f0;border-radius:999px;padding:4px 10px;font-size:12px}
.admin .stats span.warn{background:#fdecea}

@media(max-width:700px){
  .top-left{padding:6px 12px;top:8px;left:8px;border-radius:14px}.top-right{top:8px;right:8px}.brand{font-size:15px;gap:5px}.brand .mark{width:16px;height:16px}.stat .of{display:none}
  .demo{font-size:11px;padding:1px 7px}
  .soon-badge{font-size:11px;padding:1px 7px}
  .zoom-ctl{display:none}.pop{top:56px;right:8px}
  #dock{width:calc(100vw - 16px);bottom:max(8px,env(safe-area-inset-bottom));padding:8px;gap:7px;border-radius:14px}
  .dock-row.tools{flex-wrap:wrap;row-gap:8px}.seg{flex:1}.seg button{flex:1;padding:8px 6px}
  .palette{order:5;flex:1 0 100%;gap:7px}.swatch{width:30px;height:30px}
  .checkout{display:grid;grid-template-columns:1fr 1fr;gap:7px}.summary{grid-column:1;flex-wrap:wrap;row-gap:0}#pay{grid-column:2;grid-row:1}
  .checkout input,.checkout select{width:100%}
  .summary .breakdown{display:none}.summary{flex-wrap:wrap;row-gap:0;align-content:center}.summary #q-coin{flex-basis:100%;overflow:hidden;text-overflow:ellipsis}.summary .total{font-size:17px}
  button,input,select{font-size:16px;min-height:40px} /* 16px avoids iOS focus zoom; ~40px touch targets */
  .swatch{min-height:0}.seg button{min-height:36px}#tip .x{min-height:0}
  .card{margin:10px auto;padding:16px}
  .card .row.coords{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:6px 8px;align-items:center}.card .row.coords input{width:100%;min-width:0}
  .scroll{-webkit-overflow-scrolling:touch}.scroll table{min-width:640px}
}
button.link{background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-weight:550;min-height:0}
#tip button.link.small{display:block;margin-top:8px;font-size:12px;font-weight:400;color:var(--ink-3)}

#tip .reset{margin-top:4px}
.checkout input.refund{width:200px;font-family:var(--mono);font-size:12px}
.checkout input.bad{border-color:var(--warn);box-shadow:0 0 0 2px rgba(229,72,77,.15)}
@media(max-width:700px){.checkout input.refund{width:100%;grid-column:1/-1}
  #dock.nocrypto .checkout{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}#dock.nocrypto #owner{grid-column:1/-1}#pay.soon{white-space:normal;line-height:1.25;font-size:14px}}
.order-state .badge{display:inline-block;padding:3px 10px;border-radius:999px;font-weight:600;font-size:13px;background:#f1f0ec;margin-top:10px}
.order-state .s-paid{background:#e6f4ea;color:#1e6b34}.order-state .s-pending_review{background:#fff4d6;color:#7a5600}
.order-state .s-refund_pending{background:#fdecea;color:#a12622}.order-state .s-refunded{background:#eceaf6;color:#3d3580}
.admin tr.timeout td{background:#fdecea}

/* ---------- audit batch: SEO intro, confirmation, footer, palette edges, content pages ---------- */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
#owner[hidden]{display:none}
.accept{flex-direction:row;align-items:flex-start;gap:7px;font-size:12px;color:var(--ink-2);line-height:1.35;cursor:pointer}
.accept input{margin:1px 0 0;width:16px;height:16px;min-height:0;flex:none;accent-color:var(--ink)}
.accept a{color:var(--ink-2);text-underline-offset:2px}

.site-foot{font-size:11px;color:var(--ink-3)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:2px 12px;justify-content:center}
.site-foot a{color:var(--ink-3);text-decoration:none}.site-foot a:hover{color:var(--ink);text-decoration:underline}
#dock .site-foot{border-top:1px solid var(--line);padding-top:6px;margin-top:-2px}
.help-links a{color:var(--ink-2)}
.palette.more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.palette.more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
.palette.more-l.more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
body.doc{height:auto;padding:16px 12px 32px}
.doc-head{display:flex;justify-content:center}
.doc-card{max-width:720px;display:block;line-height:1.6;font-size:15px;padding:28px 32px}
.doc-card h1{font-size:26px;margin:0 0 12px;letter-spacing:-.02em;line-height:1.2}
.doc-card h2{font-size:17px;margin:24px 0 6px}
.doc-card p,.doc-card ul{margin:8px 0;color:#2b2b29}.doc-card ul{padding-left:20px}.doc-card li{margin:4px 0}
.doc-card a{text-underline-offset:2px}
.doc-back{margin-top:24px!important}
body.doc>.site-foot{margin-top:20px;font-size:13px}
.nf{text-align:center;padding:16px 0}.nf-mark{width:180px;height:auto;margin:0 auto 12px;display:block}
.nf .btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;border-radius:var(--r-sm);padding:9px 18px;font-weight:600}
@media(max-width:700px){

  .doc-card{padding:18px 16px;font-size:15px}.doc-card h1{font-size:22px}
  #dock .site-foot{padding-top:4px;font-size:10.5px}#dock .site-foot nav{gap:0 9px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
  .accept{font-size:12px;line-height:1.3}
  #q-rules{display:none} /* phones: the confirmation box already says it; keeps the dock short */
  #dock.empty .accept{display:none}#dock:not(.empty) .site-foot{display:none} /* phones: footer while browsing, confirmation box while checking out (same dock height) */
}