/* Quadro Vivo — tinta sobre papel, acento azul-caneta, neutros levemente frios. */
:root{
  --bg:#e9eaee; --chrome:#ffffff; --chrome-bd:#d9dbe1;
  --fg:#1f2430; --muted:#6b7280; --accent:#2563eb; --accent-soft:#e8efff;
  --paper:#fcfcfa; --rule:#d7e3f4; --danger:#dc2626;
  --shadow:0 1px 2px rgba(20,24,40,.06),0 6px 20px rgba(20,24,40,.08);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#15171c; --chrome:#1e2128; --chrome-bd:#2c3038;
  --fg:#e7e9ee; --muted:#9aa2b1; --accent:#6ea0ff; --accent-soft:#1d2a44;
  --paper:#f7f7f4; --rule:#d7e3f4; --danger:#f87171;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#15171c; --chrome:#1e2128; --chrome-bd:#2c3038;
  --fg:#e7e9ee; --muted:#9aa2b1; --accent:#6ea0ff; --accent-soft:#1d2a44;
  --paper:#f7f7f4; --rule:#d7e3f4; --danger:#f87171;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:var(--bg);color:var(--fg);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  display:flex;flex-direction:column;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}

.bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px max(12px,env(safe-area-inset-left,0px));
  padding-right:max(12px,env(safe-area-inset-right,0px));padding-top:max(8px,env(safe-area-inset-top,0px));
  background:var(--chrome);border-bottom:1px solid var(--chrome-bd);box-shadow:var(--shadow);z-index:5}
.brand{font-weight:700;letter-spacing:.2px;display:flex;align-items:center;gap:7px;margin-right:4px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.grp{display:flex;align-items:center;gap:4px;background:var(--bg);
  border:1px solid var(--chrome-bd);border-radius:12px;padding:4px}
button{font:inherit;color:var(--fg);background:transparent;border:0;cursor:pointer;
  border-radius:9px;padding:7px 10px;display:inline-flex;align-items:center;gap:6px;line-height:1}
button:hover{background:var(--chrome-bd)}
button.tool.on{background:var(--accent);color:#fff}
button.tool.on:hover{background:var(--accent)}
.tool .car{font-size:10px;opacity:.75;margin-left:1px}
.ghost{border:1px solid var(--chrome-bd);background:var(--chrome)}
.swatch{width:26px;height:26px;border-radius:50%;padding:0;border:2px solid var(--chrome);
  box-shadow:0 0 0 1px var(--chrome-bd)}
.swatch.on{box-shadow:0 0 0 2px var(--accent);transform:scale(1.08)}
.spacer{flex:1 1 auto}
.live{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13px;
  border:1px solid var(--chrome-bd);border-radius:999px;padding:5px 11px;background:var(--bg)}
.live .pulse{width:9px;height:9px;border-radius:50%;background:#9aa2b1}
.live .pulse.on{background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,.6);animation:pulse 1.8s infinite}
.live .pulse.local{background:#f59e0b}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}70%{box-shadow:0 0 0 7px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
@media (prefers-reduced-motion:reduce){.live .pulse.on{animation:none}}

.pop{position:fixed;z-index:20;background:var(--chrome);border:1px solid var(--chrome-bd);
  border-radius:14px;box-shadow:var(--shadow);padding:14px;width:250px;display:none}
.pop h4{margin:0 0 10px;font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.3px}
.pop .prev{height:46px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.pop .prev .dot{border-radius:50%}
.pop .row{display:flex;align-items:center;gap:10px}
.pop .row span{font-size:12px;color:var(--muted)}
.pop input[type=range]{flex:1;accent-color:var(--accent)}
.pop .num{min-width:28px;text-align:right;font-variant-numeric:tabular-nums;font-size:13px}

.stage{flex:1 1 auto;position:relative;min-height:0;background:var(--bg);
  display:flex;align-items:stretch;justify-content:stretch;padding:14px;touch-action:none}
.sheet{position:relative;flex:1 1 auto;border-radius:10px;overflow:hidden;
  background:var(--paper);box-shadow:var(--shadow);touch-action:none}
.sheet.ruled{background-image:repeating-linear-gradient(var(--paper) 0 30px,var(--rule) 30px 31px);background-position:0 10px}
#bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
#bg[hidden]{display:none}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#base{z-index:1}
#live{z-index:2}
.ring{position:absolute;border:1.5px solid #8a93a3;background:rgba(140,150,165,.14);
  border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);display:none;z-index:3}
.hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  color:#9aa2b1;font-size:15px;text-align:center;pointer-events:none;max-width:80%;z-index:2}
[hidden]{display:none!important}
input[type=file]{display:none}
@media (max-width:620px){ .brand span{display:none} #share span{display:none} }