/* ============================================================
   bead universe
   Vizuál převzatý z karolinastara.com:
   #0E0E0E podklad, #E6E6E6 text, #4A3AFF akcent,
   Open Sans 300/400/600, pilulky s rádiusem 20 px.
   ============================================================ */

:root{
  --bg:        #0E0E0E;
  --surface:   rgba(230,230,230,.05);
  --line:      rgba(230,230,230,.20);
  --line-soft: rgba(230,230,230,.12);
  --fg:        #E6E6E6;
  --fg-dim:    rgba(230,230,230,.51);
  --fg-faint:  rgba(230,230,230,.32);
  --accent:    #4A3AFF;
  --accent-lit:#6B5CFF;
  --danger:    #C4302B;

  --ui: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --pill: 20px;
  --r: 20px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--ui); font-size:16px; font-weight:400; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
button,input,select{ font:inherit; color:inherit; }

.app{ height:100dvh; display:flex; flex-direction:column; }

/* ---------- horní lišta ---------- */
.topbar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 18px; border-bottom:1px solid var(--line-soft);
}
.brand{ display:flex; align-items:center; gap:11px; min-width:0; }
.brand-mark{ width:14px; height:14px; border-radius:50%; flex:0 0 auto; background:var(--accent); }
.brand-name{ font-size:20px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; }
.brand-name em{ font-weight:300; font-style:italic; }
.brand-name .cursor{ font-weight:300; color:var(--fg-dim); }
.topbar-actions{ display:flex; align-items:center; gap:8px; }
.savestate{ font-family:var(--mono); font-size:11px; color:var(--fg-faint); min-width:74px; text-align:right; }

/* ---------- tlačítka: pilulky jako na webu ---------- */
.btn{
  background:transparent; border:1px solid var(--line); color:var(--fg);
  padding:5px 13px; border-radius:var(--pill); cursor:pointer; font-size:14px;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{ border-color:var(--fg); }
.btn:focus-visible{ outline:2px solid var(--accent-lit); outline-offset:2px; }
.btn.ghost{ border-color:var(--line-soft); color:var(--fg-dim); }
.btn.ghost:hover{ border-color:var(--fg-dim); color:var(--fg); }
.btn.small{ padding:4px 10px; font-size:13px; }
.btn.wide{ width:100%; margin-bottom:8px; }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover{ background:var(--accent-lit); border-color:var(--accent-lit); }
.btn.danger{ border-color:var(--danger); color:#f0b6b4; }
.btn.danger:hover{ background:var(--danger); color:#fff; }
.btn[disabled]{ opacity:.35; cursor:not-allowed; }
.linkbtn{ background:none; border:0; color:var(--accent-lit); cursor:pointer; padding:0; text-decoration:underline; }

/* ---------- rozvržení návrhu ---------- */
.view{ flex:1 1 auto; min-height:0; }
#designView{ display:grid; grid-template-columns:1fr 348px; }

.stagewrap{ position:relative; min-width:0; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 45%, #141414 0%, #0E0E0E 72%); }
#stage{ display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
#stage.dragging{ cursor:grabbing; }

.stage-readout{
  position:absolute; left:18px; bottom:16px; font-family:var(--mono); font-size:11.5px;
  color:var(--fg-dim); border:1px solid var(--line-soft); background:rgba(14,14,14,.75);
  padding:7px 11px; border-radius:14px; pointer-events:none; white-space:pre;
}

.dropzone{ position:absolute; inset:0; display:grid; place-items:center; }
.dz-inner{ border:1px dashed var(--line); border-radius:var(--r); padding:38px 56px; text-align:center; }
.dz-title{ font-size:22px; font-weight:300; font-style:italic; }
.dz-sub{ color:var(--fg-dim); margin-top:8px; font-size:14px; }
.stagewrap.dragover .dz-inner{ border-color:var(--accent); border-style:solid; }

/* ---------- panel ---------- */
.panel{ border-left:1px solid var(--line-soft); display:flex; flex-direction:column; min-height:0; }
.tabs{ display:flex; gap:6px; padding:12px 14px 0; }
.tab{
  background:transparent; border:1px solid transparent; border-radius:var(--pill);
  padding:4px 12px; color:var(--fg-faint); cursor:pointer; font-size:14px;
  transition:color .15s ease, border-color .15s ease;
}
.tab:hover{ color:var(--fg-dim); }
.tab.is-active{ color:var(--fg); border-color:var(--line); }
.tabbody{ flex:1 1 auto; overflow-y:auto; padding:14px; }
.pane{ display:none; }
.pane.is-active{ display:block; }

.fieldgroup{
  border:1px solid var(--line-soft); border-radius:var(--r); padding:14px;
  margin-bottom:12px; background:var(--surface);
}
.fieldgroup.adv summary{ cursor:pointer; list-style:none; }
.fieldgroup.adv summary::-webkit-details-marker{ display:none; }
.fieldgroup.adv summary::after{ content:" ▾"; color:var(--fg-faint); }
.fg-title{ font-size:13px; color:var(--fg-dim); margin-bottom:12px; }
.note{ color:var(--fg-faint); font-size:12px; margin:10px 0 0; line-height:1.45; }

.ctl{ display:grid; grid-template-columns:86px 1fr 54px; align-items:center; gap:9px; margin-bottom:9px; }
.ctl > span{ font-size:13px; color:var(--fg-dim); }
.ctl output{ font-family:var(--mono); font-size:11.5px; color:var(--fg-dim); text-align:right; }
.ctl.num{ grid-template-columns:1fr 92px; }
.ctl.num input{
  background:transparent; border:1px solid var(--line); border-radius:var(--pill);
  padding:5px 11px; font-family:var(--mono); font-size:13px; width:100%;
}
.ctl.num input:focus{ outline:none; border-color:var(--accent); }

input[type=range]{ -webkit-appearance:none; appearance:none; background:transparent; height:20px; }
input[type=range]::-webkit-slider-runnable-track{ height:1px; background:var(--line); }
input[type=range]::-moz-range-track{ height:1px; background:var(--line); }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:12px; height:12px; margin-top:-6px;
  border-radius:50%; background:var(--accent);
}
input[type=range]::-moz-range-thumb{ width:12px; height:12px; border:0; border-radius:50%; background:var(--accent); }
input[type=range]:focus-visible{ outline:2px solid var(--accent-lit); outline-offset:4px; }

.check{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--fg-dim); margin-bottom:9px; cursor:pointer; }
.check input{ accent-color:var(--accent); width:15px; height:15px; }
.row2{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.measure{
  margin-top:11px; font-family:var(--mono); font-size:12px; color:var(--fg-dim);
  border-top:1px solid var(--line-soft); padding-top:10px; white-space:pre-line;
}

/* ---------- seznam barev ---------- */
.palettelist{ display:flex; flex-direction:column; gap:6px; }
.pl-row{ display:flex; align-items:center; gap:10px; }
.pl-swatch{
  width:28px; height:28px; flex:0 0 auto; cursor:pointer;
  border:1px solid rgba(0,0,0,.35); border-radius:100% 100% 100% 0;   /* kapka z webu */
}
.pl-letter{ font-family:var(--mono); font-size:11px; color:var(--fg-faint); width:12px; }
.pl-meta{ flex:1 1 auto; min-width:0; }
.pl-code{ font-family:var(--mono); font-size:12px; display:block; }
.pl-name{ font-size:11.5px; color:var(--fg-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.pl-tint{ width:22px; height:22px; padding:0; border:1px solid var(--line); border-radius:50%; background:none; cursor:pointer; }

.counts{ width:100%; border-collapse:collapse; font-size:13px; }
.counts td{ padding:6px 4px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.counts td.sw i{ display:block; width:22px; height:22px; border-radius:100% 100% 100% 0; }
.counts td.n{ font-family:var(--mono); text-align:right; color:var(--fg-dim); white-space:nowrap; font-size:11.5px; }
.counts .code{ font-family:var(--mono); font-size:12px; }
.counts .nm{ color:var(--fg-faint); font-size:11.5px; }

/* ---------- pletení ---------- */
.bead{ display:flex; flex-direction:column; }
.beadbar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 18px; border-bottom:1px solid var(--line-soft);
}
.rowhead{ display:flex; align-items:baseline; gap:9px; }
.rowlabel{ font-size:14px; font-weight:300; font-style:italic; color:var(--fg-dim); }
.rownum{ font-size:34px; font-weight:600; line-height:1; letter-spacing:-.02em; }
.rowtotal{ font-family:var(--mono); font-size:13px; color:var(--fg-faint); }
.beadbar-right{ display:flex; align-items:center; gap:8px; }
.progress{ font-family:var(--mono); font-size:11.5px; color:var(--fg-dim); }
.beadstage{ flex:1 1 auto; min-height:0; display:flex; }
#bvCanvas{ flex:1 1 auto; display:block; width:100%; height:100%; }
.minimap{ flex:0 0 80px; border-left:1px solid var(--line-soft); padding:10px; }
#bvMap{ display:block; width:100%; height:100%; }
.beadfoot{ flex:0 0 auto; display:flex; gap:8px; padding:12px 18px; border-top:1px solid var(--line-soft); }
.beadfoot .btn{ flex:1; padding:13px; }

/* ---------- překryvy ---------- */
.overlay{ position:fixed; inset:0; z-index:40; background:var(--bg); display:flex; flex-direction:column; }
.ov-head{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line-soft); }
.ov-head strong{ font-weight:600; font-size:17px; }
.ov-sub{ font-family:var(--mono); font-size:11.5px; color:var(--fg-faint); margin-left:10px; }
.ov-head input[type=search]{
  flex:1; background:transparent; border:1px solid var(--line); border-radius:var(--pill); padding:6px 14px;
}
.ov-head input[type=search]:focus{ outline:none; border-color:var(--accent); }
.ov-body{ flex:1 1 auto; overflow:auto; padding:22px; display:flex; justify-content:center; }
.ov-note{ margin:0; padding:11px 18px; color:var(--fg-faint); font-size:12px; border-top:1px solid var(--line-soft); }
.calwrap{ display:flex; align-items:center; gap:11px; margin-left:auto; font-size:13px; color:var(--fg-dim); }
.rulerbar{ display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--fg-faint); }
.rulerbar i{ display:block; width:50mm; height:6px; border:1px solid var(--fg-faint); border-top:0; }
#realCanvas{ background:#161616; }

.swatchgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:8px; width:100%; max-width:960px; align-content:start; }
.sw-item{
  display:flex; align-items:center; gap:9px; padding:7px 10px; cursor:pointer; text-align:left;
  border:1px solid var(--line-soft); border-radius:var(--pill); background:transparent;
}
.sw-item:hover{ border-color:var(--accent); }
.sw-item i{ width:24px; height:24px; flex:0 0 auto; border-radius:100% 100% 100% 0; }
.sw-item b{ font-family:var(--mono); font-size:11.5px; font-weight:400; display:block; }
.sw-item small{ color:var(--fg-faint); font-size:11px; display:block; }

.modal{ position:fixed; inset:0; z-index:60; background:rgba(14,14,14,.88); display:grid; place-items:center; }
.modalbox{ width:min(440px,92vw); background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:22px; }
.modalbox h2{ font-size:20px; font-weight:600; margin:0 0 10px; }
.modalbox p{ color:var(--fg-dim); font-size:14px; margin:0 0 20px; }
.modalfoot{ display:flex; justify-content:flex-end; gap:8px; }

/* ---------- responzivně ---------- */
@media (max-width:900px){
  #designView{ grid-template-columns:1fr; grid-template-rows:minmax(300px,1fr) auto; }
  .panel{ border-left:0; border-top:1px solid var(--line-soft); max-height:52dvh; }
  .minimap{ flex-basis:56px; }
  .rownum{ font-size:26px; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

/* [hidden] musí přebít display z tříd výše */
[hidden]{ display:none !important; }

/* celá obrazovka při pletení: schová vedlejší ovládání */
.bead.isfull .beadbar .btn.ghost:not(#bvFull){ display:none; }