@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700;800&family=Space+Mono:wght@400;700&display=swap');
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
:root{
  --bg:#20251b;
  --surface:#272e25;
  --surface2:#2b3128;
  --surface3:#333a2e;
  --border:rgba(235,224,190,0.14);
  --border2:rgba(255,207,51,0.24);
  --text:#f4ecd8;
  --text2:rgba(244,236,216,0.64);
  --text3:rgba(244,236,216,0.42);
  --accent:#ffcf21;
  --accent2:#f0b90b;
  --nova:#5fbe82;
  --blue:#9fc4ff;
  --amber:#ffcf21;
  --red:#ff2f1f;
  --font:'Space Mono',monospace;
  --sans:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --sb:env(safe-area-inset-bottom,0px);
  --tb:env(safe-area-inset-top,0px);
  --radius:8px;
  --radius-sm:8px;
}

/* ── LIGHT THEME ── */
[data-theme="light"]{
  --bg:#f5f0e6;
  --surface:#ece7db;
  --surface2:#e6e0d3;
  --surface3:#ddd8cb;
  --border:rgba(60,50,20,0.10);
  --border2:rgba(140,95,0,0.22);
  --text:#1a1606;
  --text2:rgba(26,22,6,0.58);
  --text3:rgba(26,22,6,0.36);
  --accent:#c09400;
  --accent2:#a07c00;
  --nova:#1e7a47;
  --blue:#2455b0;
  --amber:#c09400;
  --red:#c01800;
}
[data-theme="light"] #app{
  background:
    linear-gradient(rgba(80,60,0,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(80,60,0,.05) 1px,transparent 1px),
    var(--bg);
  background-size:32px 32px,32px 32px,auto;
}
[data-theme="light"] #canvas-wrap{
  background-image:
    linear-gradient(rgba(80,60,0,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(80,60,0,.08) 1px,transparent 1px);
}

/* ── THEME TOGGLE (u meniju) ── */
.theme-toggle{position:relative;display:inline-block;width:44px;height:26px;flex-shrink:0}
.theme-toggle input{opacity:0;width:0;height:0;position:absolute}
.theme-knob{position:absolute;cursor:pointer;inset:0;background:var(--surface3);border:1.5px solid var(--border2);border-radius:13px;transition:background .2s,border-color .2s}
.theme-knob::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:50%;transform:translateY(-50%);background:var(--text3);border-radius:50%;transition:transform .2s,background .2s}
.theme-toggle input:checked + .theme-knob{background:var(--accent);border-color:var(--accent)}
.theme-toggle input:checked + .theme-knob::before{transform:translateY(-50%) translateX(18px);background:#1a1400}

html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--sans);touch-action:none}
#app{height:100%;display:flex;flex-direction:column;overflow:hidden;
  background:
    linear-gradient(rgba(235,224,190,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(235,224,190,.032) 1px,transparent 1px),
    linear-gradient(135deg,rgba(255,207,33,.045),transparent 36%),
    radial-gradient(circle at top right,rgba(95,112,75,.4),transparent 34%),
    var(--bg);
  background-size:32px 32px,32px 32px,auto,auto,auto;
}

/* ── TOPBAR ── */
.topbar{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:10px 16px;
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;z-index:20;
  padding-top:calc(10px + var(--tb));
}
.logo{
  font-size:15px;font-weight:800;letter-spacing:0;
  color:var(--text);font-family:var(--sans);
  display:flex;align-items:center;gap:7px;
}
.logo-mark{
  width:22px;height:24px;flex-shrink:0;color:var(--accent);
}
.hint-bar{font-size:12px;color:var(--text2);flex:1;font-family:var(--sans)}

/* ── CANVAS ── */
#canvas-wrap{
  flex:1;position:relative;overflow:hidden;background:var(--bg);
  touch-action:none;user-select:none;
  background-image:
    linear-gradient(rgba(235,224,190,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(235,224,190,.05) 1px,transparent 1px);
  background-size:40px 40px;
  cursor:default;
}
#svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible;touch-action:none;user-select:none}

/* ── TOOLBAR ── */
.toolbar{
  background:var(--surface);
  border-top:1px solid var(--border);
  padding:10px 14px calc(10px + var(--sb));
  flex-shrink:0;z-index:20;min-height:78px;
  display:flex;align-items:center;
  transition:background .2s,border-color .2s;
}
.tb-default{display:flex;gap:8px;width:100%;align-items:center;justify-content:center;flex-wrap:wrap}
.tb-wall{display:none;gap:8px;width:100%;align-items:center}
.tb-connect{display:none;gap:10px;width:100%;align-items:center}
.toolbar.ctx-wall{background:rgba(90,159,212,.08);border-top-color:var(--blue)}
.toolbar.ctx-wall .tb-default{display:none}
.toolbar.ctx-wall .tb-wall{display:flex}
.toolbar.ctx-connect{background:rgba(232,196,74,.06);border-top-color:var(--accent)}
.toolbar.ctx-connect .tb-default{display:none}
.toolbar.ctx-connect .tb-connect{display:flex}

/* Buttons */
.btn{
  padding:0 16px;height:46px;border-radius:var(--radius-sm);
  font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:.01em;cursor:pointer;border:1.5px solid;
  transition:all .15s;white-space:nowrap;
  display:flex;align-items:center;gap:6px;
}
.btn:active{opacity:.75;transform:scale(.97)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#171609;font-weight:700}
.btn-ghost{background:transparent;border-color:var(--border2);color:var(--text2)}
.btn-blue{background:rgba(90,159,212,.12);border-color:var(--blue);color:var(--blue)}
.btn-danger{background:transparent;border-color:var(--red);color:var(--red)}
.btn-icon{width:46px;padding:0;justify-content:center;font-size:18px}
.tb-label{font-size:12px;color:var(--text2);flex:1;line-height:1.4;font-family:var(--sans)}
.tb-label strong{display:block;color:var(--text);font-size:13px;font-weight:600;margin-bottom:2px}
.menu-group{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  padding:4px;border:1px solid var(--border);
  border-radius:14px;background:rgba(255,255,255,.025);
}
.menu-primary{background:rgba(232,196,74,.06);border-color:rgba(232,196,74,.22)}
.tool-btn{
  flex-direction:column;
  width:auto;min-width:44px;height:auto;min-height:52px;
  padding:5px 8px;border-radius:10px;
  justify-content:center;gap:3px;
}
.tool-btn svg{
  width:20px;height:20px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.tool-btn:hover{background:var(--surface2);border-color:var(--border2);color:var(--text)}
.tool-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tool-btn-wide{padding:5px 14px}
.tool-label{font-size:10px;font-weight:700;line-height:1;letter-spacing:.02em}
.btn-primary.tool-btn:hover{background:var(--accent2);border-color:var(--accent2);color:#171609}
.btn-blue.tool-btn:hover{background:rgba(90,159,212,.18);border-color:var(--blue);color:var(--blue)}
@media (max-width:520px){
  .toolbar{padding-left:8px;padding-right:8px}
  .tb-default{justify-content:flex-start}
  .menu-group{gap:3px;padding:3px}
  .tool-btn{padding:4px 6px;min-width:40px;min-height:48px}
}

/* ── MAIN TOOLBAR BUTTONS ── */
.tb-main-btn{
  flex:1;height:50px;border-radius:12px;
  font-size:14px;font-weight:700;gap:8px;
  justify-content:center;
}
.tb-main-btn svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:700px){
  .tb-main-btn{flex:0 0 auto;padding:0 20px}
  .tb-default{justify-content:center}
}

/* ── FAB MENU ── */
.fab-menu{
  position:fixed;
  bottom:calc(78px + var(--sb) + 14px);
  right:16px;
  width:54px;height:54px;
  border-radius:50%;
  background:var(--accent);
  color:#171609;
  border:none;
  box-shadow:0 4px 20px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.3);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:95;
  touch-action:manipulation;
  transition:transform .12s,box-shadow .12s;
}
.fab-menu:active{transform:scale(.88);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.fab-menu svg{stroke:#171609;stroke-width:2.5;fill:none;stroke-linecap:round}

/* ── APP MENU LIST (u sheet-u) ── */
.app-menu-list{display:flex;flex-direction:column;gap:2px;margin-bottom:4px}
.app-menu-item{
  display:flex;align-items:center;gap:14px;
  width:100%;padding:13px 12px;
  background:transparent;border:none;border-radius:10px;
  color:var(--text);font-family:var(--sans);
  font-size:14px;font-weight:500;
  cursor:pointer;text-align:left;
  transition:background .1s;
}
.app-menu-item:active{background:var(--surface3)}
.app-menu-icon{font-size:20px;width:28px;text-align:center;flex-shrink:0}
.app-menu-divider{height:1px;background:var(--border);margin:4px 0}
.app-menu-item--danger{color:var(--red)}

/* ── SHEET ── */
.sheet-bg{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.75);backdrop-filter:blur(4px);
  z-index:200;align-items:flex-end;justify-content:center;
}
.sheet-bg.open{display:flex}
.sheet{
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:18px 18px 0 0;
  width:100%;max-width:520px;
  padding:0 0 calc(24px + var(--sb)) 0;
  max-height:94vh;display:flex;flex-direction:column;overflow:hidden;
}
.sheet-inner{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:0 18px 8px;
  -webkit-overflow-scrolling:touch;
}
.sheet-handle-wrap{padding:10px 18px 0;flex-shrink:0;cursor:grab}
.sheet-handle{width:40px;height:4px;background:var(--border2);border-radius:2px;margin:0 auto 16px}
.sheet-title{
  font-size:16px;font-weight:700;color:var(--accent);
  margin-bottom:18px;font-family:var(--sans);
}
.sheet-actions{display:flex;gap:8px;margin-top:20px}
.wall-preview-toolbar{display:flex;justify-content:center;align-items:center;gap:8px;margin:-6px 0 10px}
.wall-preview-toolbar #wall-preview-zoom-label{min-width:72px;justify-content:center;font-family:var(--font);font-size:12px}
.wall-preview-scroll{
  margin-bottom:14px;overflow:auto;border:1px solid var(--border2);
  border-radius:10px;background:var(--bg);max-height:62vh;
  -webkit-overflow-scrolling:touch;touch-action:none;cursor:grab;
}
.wall-preview-scroll:active{cursor:grabbing}
.wall-preview-stage{width:980px;min-width:980px;transition:width .08s ease;transform-origin:top left}
.wall-preview-svg{min-width:100%}

/* Form */
.fg{display:flex;flex-direction:column;gap:6px;flex:1}
.fl{font-size:11px;color:var(--text2);letter-spacing:.05em;text-transform:uppercase;font-family:var(--sans);font-weight:600}
.fi{
  background:var(--surface3);border:1.5px solid var(--border2);
  border-radius:var(--radius-sm);padding:12px 12px;
  color:var(--text);font-family:var(--sans);font-size:15px;
  width:100%;outline:none;-webkit-appearance:none;transition:border .15s;
}
.fi:focus{border-color:var(--accent)}
select.fi{cursor:pointer}
.form-row{display:flex;gap:10px}

/* Seg buttons */
.seg-group{display:flex;gap:6px}
.seg-btn{
  flex:1;padding:12px 8px;border-radius:var(--radius-sm);
  border:1.5px solid var(--border2);background:var(--surface3);
  color:var(--text2);font-family:var(--sans);font-size:13px;font-weight:500;
  cursor:pointer;text-align:center;transition:all .15s;
  min-height:44px;display:flex;align-items:center;justify-content:center;
}
.seg-btn.active{
  border-color:var(--accent);
  background:rgba(232,196,74,.12);
  color:var(--accent);font-weight:700;
}

/* ── SVG ELEMENTS ── */
.room-bg{fill:rgba(232,230,216,.045);cursor:grab}
.room-bg.dragging{fill:rgba(90,159,212,.12);cursor:grabbing}
.room-label{fill:#b7c3ad;font-size:12px;font-weight:700;font-family:'Space Mono',monospace;text-anchor:middle;pointer-events:none;dominant-baseline:middle}
.room-dim{fill:#87977f;font-size:10px;font-weight:700;font-family:'Space Mono',monospace;text-anchor:middle;pointer-events:none;dominant-baseline:middle}
.wall{stroke:#6f8369;stroke-width:4;fill:none;stroke-linecap:square}
.wall.open{stroke:#5d6d57;stroke-width:3;stroke-dasharray:7 5}
.wall-hit{stroke:transparent;stroke-width:28;fill:none;cursor:pointer}
.wall.selected{stroke:var(--blue);stroke-width:5}
.wall.selected.open{stroke:var(--blue);stroke-width:4;stroke-dasharray:7 5}
.door-body{stroke:var(--amber);stroke-width:3;fill:none;stroke-linecap:butt}
.door-swing{stroke:var(--amber);stroke-width:1.8;fill:none;stroke-linecap:round}
.win-outer{stroke:var(--blue);stroke-width:3;fill:none}
.win-inner{stroke:var(--blue);stroke-width:1;fill:none;opacity:.5}
.box-ring{stroke-width:2.5;cursor:pointer}
.box-label{font-size:8px;font-family:'Space Mono',monospace;text-anchor:middle;pointer-events:none;font-weight:700}
.box-label-bg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.box-dim-label{font-size:6.5px;font-family:'Space Mono',monospace;font-weight:700;text-anchor:middle;opacity:.82}

/* Box dot ↔ expanded animations */
@keyframes boxExpandIn{
  0%  {opacity:0;transform:scale(.3)}
  65% {transform:scale(1.07)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes dotPopIn{
  0%  {opacity:0;transform:scale(0)}
  65% {transform:scale(1.35)}
  100%{opacity:1;transform:scale(1)}
}
.box-expand-g{
  animation:boxExpandIn .22s cubic-bezier(.34,1.56,.64,1) both;
  transform-box:fill-box;
  transform-origin:center;
}
.box-dot-anim{
  animation:dotPopIn .18s ease-out both;
  transform-box:fill-box;
  transform-origin:center;
}
.conn-path{stroke-width:2;fill:none;stroke-dasharray:6 3}
.conn-len-bg{fill:rgba(20,26,20,.92)}
.conn-len{font-size:8px;font-family:'Space Mono',monospace;text-anchor:middle;fill:var(--accent);dominant-baseline:middle}
.snap-guide{stroke:var(--nova);stroke-width:1;stroke-dasharray:4 3;fill:none;pointer-events:none}

/* Zoom badge */
#zoom-badge{
  position:absolute;bottom:14px;right:14px;
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:6px;padding:4px 10px;
  font-size:10px;color:var(--text2);font-family:var(--font);
  pointer-events:none;z-index:10;opacity:0;transition:opacity .3s;
}
#zoom-badge.visible{opacity:1}

/* ── KONFIGURATOR ── */
.kap-bar{display:flex;gap:3px;margin-bottom:2px}
.kap-slot{flex:1;height:12px;border-radius:4px;background:var(--surface3);border:1px solid var(--border2);transition:background .2s}
.kap-slot.filled-sklopka{background:#4caf76;border-color:#4caf76}
.kap-slot.filled-utičnica{background:#e8a030;border-color:#e8a030}
.kap-slot.filled-usb{background:#9b76c8;border-color:#9b76c8}
.kap-slot.filled-data{background:#5a9fd4;border-color:#5a9fd4}
.kap-slot.filled-dimmer{background:#d4882a;border-color:#d4882a}
.kap-slot.filled-antena{background:#3abf9c;border-color:#3abf9c}
.kap-slot.filled-audio{background:#d45a4a;border-color:#d45a4a}
.kap-slot.filled-hdmi{background:#4a8cd4;border-color:#4a8cd4}
.kap-slot.filled-tel{background:#8a9a82;border-color:#8a9a82}
.kap-slot.filled-detektor{background:#c8a030;border-color:#c8a030}

.modul-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 12px;border-radius:var(--radius-sm);
  background:var(--surface3);border:1.5px solid var(--border2);
  margin-bottom:8px;cursor:pointer;transition:all .15s;
  min-height:56px;
}
.modul-item:active{opacity:.75}
.modul-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.modul-info{flex:1;min-width:0}
.modul-naziv{font-size:14px;font-weight:600;color:var(--text);line-height:1.3;font-family:var(--sans)}
.modul-opis{font-size:11px;color:var(--text2);margin-top:2px;line-height:1.3;font-family:var(--font)}
.modul-vel{font-size:12px;font-weight:700;color:var(--accent);font-family:var(--font);white-space:nowrap;flex-shrink:0}
.modul-del{
  width:36px;height:36px;border-radius:8px;
  background:transparent;border:1.5px solid var(--border2);
  color:var(--text3);font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;
  min-width:36px;
}
.modul-del:active{background:rgba(212,90,74,.15);border-color:var(--red);color:var(--red)}

.katalog-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 12px;border-radius:var(--radius-sm);
  background:var(--surface3);border:1.5px solid var(--border2);
  margin-bottom:7px;cursor:pointer;transition:all .15s;
  min-height:52px;
}
.kabl-chip{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:8px 4px;min-height:54px;
  border-radius:8px;border:2px solid var(--border2);
  background:var(--surface3);cursor:pointer;transition:border-color .15s,background .15s;
  width:100%;
}
.kabl-chip:active{transform:scale(.96);opacity:.8}
.katalog-item:active{transform:scale(.98);opacity:.8}
.katalog-item:hover{border-color:var(--accent);background:rgba(232,196,74,.06)}
.katalog-item.disabled{opacity:.3;pointer-events:none}
.katalog-badge{
  font-size:10px;padding:3px 7px;border-radius:4px;
  font-weight:700;font-family:var(--font);white-space:nowrap;
  background:var(--surface2);border:1px solid var(--border2);color:var(--text2);
}
.katalog-badge.mode{background:rgba(76,175,118,.1);border-color:#4caf76;color:#4caf76}
.katalog-badge.exp{background:rgba(90,159,212,.1);border-color:#5a9fd4;color:#5a9fd4}

/* ── SEKCIJA LABELA ── */
.sek-label{
  font-size:11px;color:var(--text2);
  letter-spacing:.06em;text-transform:uppercase;
  padding:8px 0 4px;font-family:var(--sans);font-weight:600;
}

/* ── NABAVKA ROW ── */
.nab-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--border);
  min-height:40px;
}
.nab-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.nab-naziv{font-size:12px;color:var(--text);line-height:1.3;flex:1;min-width:0}
.nab-sifra{font-size:10px;color:var(--text3);margin-top:2px}
.nab-kol{font-size:11px;color:var(--text2);font-family:var(--font);white-space:nowrap;flex-shrink:0}

/* ── BILL PANEL ── */
.bill-row{
  display:flex;align-items:center;gap:8px;
  padding:8px 0;border-bottom:1px solid var(--border);
  min-height:38px;
}
.bill-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.bill-naziv{font-size:13px;color:var(--text);flex:1;min-width:0;line-height:1.3}
.bill-kol{font-size:12px;color:var(--text2);font-family:var(--font);white-space:nowrap;flex-shrink:0;font-weight:700}

/* Toast */
/* ── AUTH WALL ── */
#auth-wall{
  position:fixed;inset:0;z-index:500;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 20px calc(24px + var(--sb));
  transition:opacity .3s,visibility .3s;
}
#auth-wall.hidden{opacity:0;visibility:hidden;pointer-events:none}
.auth-card{
  width:100%;max-width:360px;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:18px;padding:32px 24px;
  display:flex;flex-direction:column;gap:20px;
}
.auth-logo{
  display:flex;align-items:center;gap:10px;
  font-size:20px;font-weight:800;color:var(--text);font-family:var(--sans);
  margin-bottom:4px;
}
.auth-logo svg{width:28px;height:30px;color:var(--accent);flex-shrink:0}
.auth-sub{font-size:13px;color:var(--text2);line-height:1.5;font-family:var(--sans)}
.auth-err{
  font-size:13px;color:var(--red);background:rgba(255,47,31,.08);
  border:1px solid rgba(255,47,31,.3);border-radius:8px;
  padding:10px 12px;display:none;line-height:1.4;
}
.auth-footer{font-size:12px;color:var(--text3);text-align:center;line-height:1.5}
.auth-footer a{color:var(--accent);text-decoration:none}

/* ── TOPBAR USER CHIP ── */
.user-chip{
  display:flex;align-items:center;gap:6px;
  padding:0 10px;height:36px;border-radius:18px;
  background:var(--surface3);border:1.5px solid var(--border2);
  cursor:pointer;transition:all .15s;flex-shrink:0;
  font-family:var(--sans);font-size:12px;font-weight:600;color:var(--text2);
}
.user-chip:active{opacity:.75}
.user-chip-avatar{
  width:22px;height:22px;border-radius:50%;
  background:var(--accent);color:#171609;
  font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
@media(max-width:520px){
  .user-chip-email{display:none}
}

#toast{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%);
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:8px;padding:10px 20px;
  font-size:13px;color:var(--text);font-family:var(--sans);
  z-index:999;pointer-events:none;opacity:0;transition:opacity .2s;
  white-space:nowrap;font-weight:500;
}

/* ── DEMO BADGE ── */
.demo-badge{
  font-size:10px;font-weight:800;letter-spacing:.08em;
  color:#171609;background:var(--accent);
  padding:3px 8px;border-radius:6px;flex-shrink:0;
  font-family:var(--font);
}
.demo-badge.hidden{display:none}

/* ── AUTH DEMO SEPARATOR ── */
.auth-demo-sep{
  display:flex;align-items:center;gap:10px;
  color:var(--text3);font-size:12px;margin:4px 0;
}
.auth-demo-sep::before,.auth-demo-sep::after{
  content:'';flex:1;height:1px;background:var(--border);
}

/* ── TUTORIAL CARD ── */
.tutorial-card{
  position:fixed;
  bottom:calc(78px + var(--sb) + 12px);
  left:16px;right:82px;
  background:var(--surface);
  border:1.5px solid var(--border2);
  border-radius:14px;
  padding:14px 16px 10px;
  z-index:92;
  box-shadow:0 8px 32px rgba(0,0,0,.55);
  display:none;flex-direction:column;gap:5px;
}
.tutorial-card.visible{display:flex}
.tut-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1px}
.tut-icon{font-size:18px;line-height:1}
.tut-step{font-size:11px;color:var(--text3);font-family:var(--font)}
.tut-title{font-size:13px;font-weight:700;color:var(--accent);line-height:1.3}
.tut-text{font-size:12px;color:var(--text2);line-height:1.55}
.tut-actions{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.tut-skip{background:none;border:none;color:var(--text3);font-size:11px;font-family:var(--sans);cursor:pointer;padding:4px 0}
.tut-next{background:var(--accent);color:#171609;border:none;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:700;font-family:var(--sans);cursor:pointer}
@keyframes tut-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,207,33,0)}50%{box-shadow:0 0 0 6px rgba(255,207,33,.35)}}
.tutorial-pulse{animation:tut-pulse 1.4s ease-in-out infinite;border-radius:12px}