:root{
    --bg:#0f1419; --panel:#1a2129; --panel2:#222c36; --line:#30404f;
    --text:#e6edf3; --muted:#9fb0bf; --accent:#4adda0; --accent2:#2f9bff;
    --warn:#f0a020; --danger:#e05656; --panelfill:rgba(47,155,255,.30);
    --panelstroke:#2f9bff;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:13px}
  #app{display:flex;height:100vh;overflow:hidden}
  /* canvas area */
  #stage{flex:1;position:relative;background:#0a0e12;overflow:hidden}
  #cv{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;display:block}
  #hud{position:absolute;left:10px;top:10px;background:rgba(10,14,18,.82);border:1px solid var(--line);
       border-radius:8px;padding:8px 10px;font-size:12px;max-width:340px;pointer-events:none;line-height:1.5}
  #hud b{color:var(--accent)}
  #toolbar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:6px;
           background:rgba(10,14,18,.9);border:1px solid var(--line);border-radius:10px;padding:6px;flex-wrap:wrap;max-width:92%}
  .tbtn{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:7px;
        padding:6px 10px;cursor:pointer;font-size:12px;white-space:nowrap}
  .tbtn:hover{border-color:var(--accent2)}
  .tbtn.active{background:var(--accent);border-color:var(--accent);color:#06231a;font-weight:600}
  .tbtn.warn{color:var(--warn)}
  /* sidebar */
  #side{width:360px;min-width:360px;background:var(--panel);border-left:1px solid var(--line);
        overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
  h1{font-size:15px;margin:0 0 2px}
  .sub{color:var(--muted);font-size:11px;margin-bottom:6px}
  .card{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px}
  .card h3{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
  .row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
  .row label{flex:1;color:var(--muted)}
  .row input,.row select{background:var(--bg);border:1px solid var(--line);color:var(--text);
        border-radius:6px;padding:5px 6px;width:96px;font-size:12px}
  .row input[type=text]{width:150px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .grid2 .row{margin-bottom:0}
  button.act{background:var(--accent2);border:none;color:#fff;border-radius:7px;padding:7px 10px;cursor:pointer;font-size:12px}
  button.act:hover{filter:brightness(1.1)}
  button.ghost{background:transparent;border:1px solid var(--line);color:var(--text);border-radius:7px;padding:6px 9px;cursor:pointer;font-size:12px}
  button.ghost:hover{border-color:var(--accent2)}
  button.sm{padding:3px 7px;font-size:11px}
  .surf{border:1px solid var(--line);border-radius:8px;padding:7px;margin-bottom:6px;background:var(--bg)}
  .surf.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
  .surf .hd{display:flex;align-items:center;gap:6px;cursor:pointer}
  .swatch{width:12px;height:12px;border-radius:3px;flex:0 0 auto}
  .surf .nm{flex:1;font-weight:600}
  .surf .meta{color:var(--muted);font-size:11px;margin-top:3px}
  .pill{display:inline-block;background:var(--panel2);border:1px solid var(--line);border-radius:20px;
        padding:1px 8px;font-size:11px;margin:2px 3px 0 0}
  .out-big{font-size:24px;font-weight:700;color:var(--accent)}
  .out-row{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dashed var(--line)}
  .out-row:last-child{border-bottom:none}
  .muted{color:var(--muted)}
  .danger{color:var(--danger)}
  .ok{color:var(--accent)}
  .hint{font-size:11px;color:var(--muted);line-height:1.4}
  input[type=file]{display:none}
  .seg{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
  .seg button{flex:1;background:var(--bg);border:none;color:var(--text);padding:5px;cursor:pointer;font-size:12px}
  .seg button.on{background:var(--accent);color:#06231a;font-weight:600}
  a.dl{color:var(--accent2);cursor:pointer;text-decoration:underline}
  .imgtab{display:inline-block;padding:3px 8px;border:1px solid var(--line);border-radius:6px;margin:0 4px 4px 0;cursor:pointer;font-size:11px}
  .imgtab.on{border-color:var(--accent);color:var(--accent)}
  .warnbox{background:rgba(240,160,32,.12);border:1px solid var(--warn);border-radius:7px;padding:6px 8px;font-size:11px;color:#f3c97a}
  /* dialog výběru typu podkladu */
  #typeChooser{position:absolute;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
        background:rgba(8,11,15,.8);backdrop-filter:blur(2px)}
  #typeChooser .tc-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;
        padding:24px;max-width:580px;width:92%;text-align:center;box-shadow:0 12px 48px rgba(0,0,0,.55)}
  #typeChooser h2{margin:0 0 4px;font-size:19px}
  .tc-opts{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:18px}
  .tchoose{flex:1;min-width:210px;max-width:250px;background:var(--panel2);border:1px solid var(--line);
        border-radius:12px;padding:20px 14px;cursor:pointer;color:var(--text);transition:transform .1s,border-color .1s,background .1s}
  .tchoose:hover{border-color:var(--accent);background:#26323d;transform:translateY(-2px)}
  .tchoose .em{font-size:32px;line-height:1}
  .tchoose .ti{font-weight:700;font-size:15px;margin-top:8px}
  /* ===== V2 „refined dark" – vizuální vrstva ===== */
  :root{ --bg:#0d1117; --panel:#161b22; --panel2:#1c2431; --line:#2b3645;
    --text:#e8eef5; --muted:#94a4b6; --accent:#4adda0; --accent2:#3a93ff;
    --warn:#f0a83a; --danger:#e8635f; --panelfill:rgba(58,147,255,.30); --panelstroke:#3a93ff;
    --bar:rgba(13,17,23,.86); --barsh:0 8px 26px rgba(0,0,0,.42); }
  #hud{left:14px;top:14px;background:rgba(13,17,23,.72);border:1px solid var(--line);border-radius:9px;
    padding:7px 11px;font-size:11.5px;max-width:330px;color:var(--muted);backdrop-filter:blur(6px);box-shadow:0 4px 16px rgba(0,0,0,.35)}
  #hud b{color:var(--accent)}
  #toolbar{left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:14px;align-items:center;
    flex-wrap:wrap;justify-content:center;max-width:94%;background:none;border:none;padding:0;box-shadow:none;backdrop-filter:none}
  .tbtn{background:transparent;border:1px solid transparent;color:var(--muted);border-radius:8px;
    padding:6px 11px;cursor:pointer;font-size:12px;white-space:nowrap;transition:background .12s,color .12s,border-color .12s}
  .tbtn:hover{background:var(--panel2);color:var(--text)}
  .tbtn.active{background:var(--accent);border-color:var(--accent);color:#052418;font-weight:600}
  .tbtn.warn{color:var(--warn)} .tbtn.warn:hover{background:rgba(240,168,58,.12)}
  .tgroup{display:flex;gap:4px;align-items:center;background:var(--bar);border:1px solid var(--line);border-radius:12px;padding:6px 7px;backdrop-filter:blur(8px);box-shadow:var(--barsh)}
  .tgroup-entry{border-color:rgba(46,207,149,.5);box-shadow:var(--barsh),inset 0 0 0 200px rgba(46,207,149,.07)}
  .tbadge{display:flex;align-items:center;padding:7px 11px;color:var(--muted);white-space:nowrap;font-size:11.5px;background:var(--bar);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(8px);box-shadow:var(--barsh)}
  #side{width:368px;min-width:368px;padding:16px;gap:12px}
  .card{border-radius:12px;padding:13px}
  .card h3{margin:0 0 10px}
  .grid2{gap:8px}
  .grid2 .row{margin-bottom:0;flex-direction:column;align-items:stretch;gap:3px}
  .grid2 .row label{flex:none;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em}
  .grid2 .row input,.grid2 .row select{width:100%}
  .out-big{font-size:24px;font-weight:700;color:var(--accent)}
  .summary{background:linear-gradient(135deg,#13261f,#15202b);border-color:#21413a}
  .summary .out-big{font-size:30px;line-height:1.05;letter-spacing:-.02em}
  .summary .out-big small{font-size:14px;color:var(--muted);font-weight:600;letter-spacing:0}
  #dropzone{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:14px;text-align:center;cursor:pointer;color:var(--muted);transition:background .15s,border-color .15s}
  #dropzone .dz-inner{display:flex;flex-direction:column;align-items:center;gap:14px;padding:38px 54px;
    border:2px dashed var(--line);border-radius:18px;background:rgba(28,36,49,.35);transition:all .15s;max-width:80%}
  #dropzone:hover .dz-inner,#dropzone.over .dz-inner{border-color:var(--accent);background:rgba(46,207,149,.07)}
  #dropzone .dz-ico{width:56px;height:56px;border-radius:14px;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:26px}
  #dropzone .dz-t{font-size:16px;font-weight:600;color:var(--text)}
  #dropzone .dz-s{font-size:12px;max-width:300px;line-height:1.5}
  #dropzone kbd{background:var(--panel2);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-family:inherit;font-size:11px;color:var(--text)}
  #dropzone .dz-btn{margin-top:6px;background:var(--accent2);border:none;color:#fff;border-radius:10px;padding:9px 22px;font-size:13px;font-weight:600;cursor:pointer}
  #dropzone .dz-btn:hover{filter:brightness(1.08)}