/* Nyxium Color Studio — app styles, isolated from the shared ecosystem shell. */
body.colors-studio { margin:0; color:var(--tx-1,#eee); background:var(--sol-base,#1c1e20); font:14px/1.5 var(--fnt-ui,system-ui,sans-serif); }
html[data-nyxapp="barvy"] body.colors-studio>header:not(.nyx-hl) { display:none!important; }
.colors-studio .cs-main { max-width:1440px!important; margin:0 auto!important; padding:32px 28px 64px!important; }
.cs-main *, .studio-dialog * { box-sizing:border-box; }
.cs-main [hidden] { display:none!important; }
.cs-main h1,.cs-main h2,.cs-main h3,.cs-main p { margin:0; }
.cs-main h1 { font:650 clamp(26px,3vw,36px)/1.2 var(--fnt-ui,system-ui); letter-spacing:-.035em; color:var(--tx-1); }
.cs-main h2 { font:600 19px/1.3 var(--fnt-ui,system-ui); letter-spacing:-.02em; color:var(--tx-1); }
.cs-main h3 { font:600 14px/1.4 var(--fnt-ui,system-ui); letter-spacing:0; }
.cs-main .eyebrow { color:var(--acc,#77bddf); font-size:11px; font-weight:600; letter-spacing:.12em; margin-bottom:8px; }
.cs-main .subtitle { margin-top:10px; color:var(--tx-2,#aaa); font-size:15px; }
.studio-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:28px; }
.workspace-actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; justify-content:flex-end; max-width:390px; }
#workspaceStatus { display:block; flex-basis:100%; text-align:right; font-size:12px; color:var(--tx-3,#aaa); padding-top:3px; }
.studio-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:24px; align-items:start; }
.nastroje { min-width:0; }
.cs-main .tabs { display:flex; gap:4px; margin:0 0 18px; overflow-x:auto; border-bottom:1px solid var(--stroke-2,#393c40); padding-bottom:10px; scrollbar-width:thin; }
.cs-main .tabs button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--tx-2); font:500 14px/1.3 var(--fnt-ui,system-ui); text-transform:none; letter-spacing:0; min-height:42px; padding:10px 13px; white-space:nowrap; cursor:pointer; box-shadow:none; }
.cs-main .tabs button.on { color:var(--tx-1); background:var(--layer,#292c30); border-color:var(--stroke-strong,#50555c); }
.cs-main .tabs button.on svg { color:var(--acc); }
.cs-main .tabs button:hover { background:var(--subtle-hover,#ffffff09); color:var(--tx-1); }
.cs-main svg,.studio-dialog svg { display:block; width:18px; height:18px; flex-shrink:0; }
.cs-main i[data-icon] { display:inline-flex; font-style:normal; }
.cs-main .sec { display:none; }
.cs-main .sec.on { display:block; }
.cs-main .panel { padding:24px; margin-bottom:18px; background:var(--layer,#25282b); border:1px solid var(--stroke-2,#3b3e43); border-radius:16px; box-shadow:none; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:22px; }
.section-head p { margin-top:6px; font-size:13px; color:var(--tx-2,#aab0b8); }
.cs-main .btn,.studio-dialog .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:8px 12px; border:1px solid var(--stroke-2,#464a50); border-radius:8px; background:var(--ctrl,#32363c); color:var(--tx-1,#eee); font:500 13px/1.3 var(--fnt-ui,system-ui); text-transform:none; letter-spacing:0; box-shadow:none; cursor:pointer; white-space:nowrap; }
.cs-main .btn:hover,.studio-dialog .btn:hover { background:var(--ctrl-hover,#424750); border-color:var(--stroke-strong,#666); }
.cs-main .btn.primary,.studio-dialog .btn.primary { background:var(--acc-deep,#296a86); color:#fff; border-color:var(--acc-deep,#296a86); }
.colors-studio .cs-main .btn.primary { background:var(--acc-deep,#296a86)!important; color:#fff!important; border-color:var(--acc,#71c1e2)!important; }
.cs-main .icon-btn,.studio-dialog .icon-btn,.cs-main .cpy { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:38px; height:38px; padding:8px; border:1px solid var(--stroke-2,#464a50); border-radius:8px; background:var(--ctrl,#32363c); color:var(--tx-2,#bbb); cursor:pointer; }
.cs-main button:disabled { opacity:.4; cursor:not-allowed; }
.cs-main :is(button,a,input,select,canvas):focus-visible,.studio-dialog :is(button,textarea):focus-visible { outline:2px solid var(--acc,#7dd3fc); outline-offset:3px; }
.cs-main .inp,.studio-dialog .inp { width:100%; min-width:0; min-height:40px; padding:9px 11px; border:1px solid var(--stroke-2,#464a50); border-radius:8px; background:var(--sol-base,#1d2024); color:var(--tx-1,#eee); font:14px/1.4 var(--fnt-ui,system-ui); }
.cs-main input[type=color] { width:42px; height:40px; border:1px solid var(--stroke-2); border-radius:8px; padding:3px; background:none; cursor:pointer; flex-shrink:0; }
.cs-main input[type=range] { accent-color:var(--acc,#71c1e2); min-width:0; cursor:pointer; width:100%; height:24px; }
.cs-main .mono { font-family:ui-monospace,'Cascadia Code',Consolas,monospace; }
.cs-main label { display:block; font-size:13px; font-weight:500; color:var(--tx-2); }
.cs-main label>.inp { margin-top:6px; }
.cs-main .row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cs-main .muted { color:var(--tx-3,#a7adb5); }
.cs-main .small { font-size:12px; line-height:1.6; margin-top:10px; }
.cs-main .text-btn { background:none; border:0; color:var(--acc,#7dc5df); font:500 12px var(--fnt-ui,system-ui); padding:6px 0; cursor:pointer; }
.pick-grid { display:grid; grid-template-columns:minmax(180px,.85fr) minmax(240px,1.15fr); gap:28px; align-items:start; }
.color-visual .row { margin-top:12px; }
.color-visual .row>.btn { flex:1; }
.cs-main .big-swatch { height:250px; position:relative; border-radius:12px; overflow:hidden; isolation:isolate; box-shadow:none; border:1px solid #80808030; }
.cs-main .big-swatch::before { position:absolute; inset:0; content:''; background:repeating-conic-gradient(#aaa 0% 25%,#eee 0% 50%) 0/20px 20px; z-index:-2; }
.cs-main .big-swatch::after { content:''; position:absolute; inset:0; background:var(--preview-color,#ff1a6e); opacity:var(--preview-alpha,1); z-index:-1; }
.cs-main .big-swatch input[type=color] { position:absolute; inset:0; width:100%; height:100%; opacity:0; z-index:2; }
.cs-main .big-swatch .hint { position:absolute; bottom:16px; left:18px; font-size:12px; pointer-events:none; }
#heroHex { position:absolute; left:18px; top:18px; font:600 20px ui-monospace,monospace; pointer-events:none; }
.field label { margin-bottom:6px; }
.input-action { display:flex; gap:7px; }
.field-error { display:block; color:#e9a09c; min-height:20px; font-size:12px; padding-top:3px; }
.slider-mode { display:inline-flex; background:var(--sol-base); padding:3px; border-radius:7px; margin:8px 0 12px; }
.slider-mode button { color:var(--tx-3); border:0; background:none; padding:5px 14px; border-radius:5px; cursor:pointer; font:500 12px var(--fnt-ui,system-ui); }
.slider-mode button.on { background:var(--ctrl); color:var(--tx-1); }
.range-row { display:grid!important; grid-template-columns:24px 1fr 55px; gap:12px; align-items:center; margin-bottom:9px; font-size:12px!important; }
.range-row input[type=number] { width:55px; padding:5px; color:var(--tx-1); background:var(--sol-base); border:1px solid var(--stroke-2); border-radius:6px; font:13px ui-monospace,monospace; }
.range-row[for=opacity] { grid-template-columns:88px 1fr 55px; margin:18px 0 0; }
.range-row output { text-align:right; font:12px ui-monospace,monospace; }
.cs-main .fmts { margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cs-main .fmt { display:flex; align-items:center; gap:10px; min-width:0; padding:10px 12px; border:1px solid var(--stroke-2); border-radius:9px; background:var(--sol-base); }
.cs-main .fmt .k { color:var(--tx-3); font:600 10px var(--fnt-ui,system-ui); width:28px; flex-shrink:0; letter-spacing:.04em; }
.cs-main .fmt .v { color:var(--tx-1); font:12px ui-monospace,monospace; overflow-wrap:anywhere; flex:1; }
.cs-main .cpy { width:30px; height:30px; padding:6px; background:none; border:0; }
.cs-main .alpha-formats { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.alpha-formats button { font:12px ui-monospace,monospace!important; }
.mini-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:22px 0 10px; }
.mini-heading>span { font-size:12px; color:var(--tx-3); }
.cs-main .strip { display:flex; height:42px; border-radius:9px; overflow:hidden; }
.strip button { flex:1; min-width:0; border:0; cursor:pointer; }
.strip button:focus-visible { outline-offset:-3px; }
.history-swatches { display:flex; gap:7px; flex-wrap:wrap; min-height:32px; }
.history-swatches button { width:32px; height:32px; border-radius:7px; border:1px solid #80808050; cursor:pointer; }
.transfer-actions { margin-top:20px; padding-top:16px; border-top:1px solid var(--stroke-2); }
.ui-preview { display:flex; gap:24px; justify-content:space-between; align-items:center; padding:28px; border-radius:12px; background:#202020; color:#eef1f6; border:1px solid var(--border,#3b3b3b); --preview-text:#fff; }
.ui-preview[data-mode=light],html[data-mode=light] .ui-preview:not([data-mode]) { background:#f7f8fa; color:#252b36; }
.ui-preview h3 { font:600 22px/1.3 var(--fnt-ui,system-ui); margin:12px 0 8px; }
.ui-preview p { font-size:13px; max-width:370px; opacity:.75; }
.cs-main .ui-preview :is(h3,p) { color:inherit!important; }
.cs-main .ui-preview .preview-badge,.cs-main .ui-preview .preview-cta { color:var(--preview-text)!important; }
.cs-main .ui-preview .preview-link { color:var(--sample)!important; }
.preview-badge { display:inline-flex; background:var(--sample); color:var(--preview-text); border-radius:5px; padding:4px 8px; font-size:10px; letter-spacing:.08em; }
.preview-link { display:block; color:var(--sample); font-size:13px; margin-top:16px; }
.preview-cta { background:var(--sample); color:var(--preview-text); padding:12px 18px; border-radius:8px; font-size:13px; white-space:nowrap; }
.preview-cta span { margin-left:15px; }
.field-row { margin-bottom:20px; gap:14px!important; align-items:flex-end!important; }
.field-row label { min-width:140px; }
.cs-main .pal { display:flex; height:260px; border-radius:12px; overflow:hidden; }
.cs-main .pal .col { flex:1; min-width:0; position:relative; display:flex; align-items:center; justify-content:flex-end; flex-direction:column; padding:14px 4px; cursor:pointer; }
.pal .hx { font:600 12px ui-monospace,monospace; padding:5px; border-radius:5px; }
.pal .lock { position:absolute; top:12px; border:1px solid currentColor; border-radius:7px; width:30px; height:30px; padding:6px; background:transparent; opacity:.6; cursor:pointer; }
.pal .lock.on { opacity:1; background:#ffffff44; }
.pal .col:focus-visible { outline-offset:-3px; }
#paletteEditor { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.palette-edit { display:flex; gap:6px; align-items:center; padding:7px; border:1px solid var(--stroke-2); border-radius:9px; min-width:0; }
.palette-edit input[type=color] { width:32px; height:32px; }
.palette-edit .inp { font-size:12px; min-height:32px; padding:6px; }
.palette-edit button { height:30px; width:27px; border:0; background:none; color:var(--tx-2); border-radius:5px; cursor:pointer; flex-shrink:0; }
.cs-main .pal-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; }
.harm-base { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.harm-row { margin-bottom:20px; }
.harm-row h4 { font:500 14px var(--fnt-ui,system-ui); display:flex; justify-content:space-between; align-items:center; margin:0 0 10px; }
.harm-row .mini { border:0; background:none; color:var(--acc); font:12px var(--fnt-ui,system-ui); cursor:pointer; padding:6px; }
.harm-sw { display:flex; border-radius:9px; overflow:hidden; }
.harm-sw .c { flex:1; height:68px; display:flex; align-items:flex-end; justify-content:center; font:11px ui-monospace,monospace; padding:10px 3px; cursor:pointer; }
.grad-prev { height:240px; border-radius:12px; margin:16px 0 20px; border:1px solid #80808030; }
.gradient-presets { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.gradient-presets button { border:1px solid var(--stroke-2); border-radius:8px; background:var(--sol-base); color:var(--tx-2); padding:5px; cursor:pointer; font:12px var(--fnt-ui,system-ui); }
.gradient-presets i { display:block; height:30px; border-radius:5px; margin-bottom:5px; }
.grad-stops { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.gstop { display:flex; gap:8px; align-items:center; padding:8px; border:1px solid var(--stroke-2); border-radius:8px; }
.gstop .pos { font:12px ui-monospace,monospace; min-width:34px; }
.gstop .rm { background:none; border:0; color:var(--tx-2); padding:6px; cursor:pointer; }
.css-out { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--sol-base); border:1px solid var(--stroke-2); padding:15px; border-radius:8px; font:12px/1.7 ui-monospace,monospace; margin:20px 0 0; }
.contrast-fields { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.contrast-fields>label { flex:1; min-width:0; }
.color-field { display:flex; gap:7px; margin-top:7px; }
.contrast-example { border-radius:12px; padding:32px; min-height:190px; }
.contrast-example .contrast-large { font-size:25px; line-height:1.4; font-weight:600; margin-bottom:14px; }
.contrast-example p { font-size:16px; line-height:1.6; }
.cs-main .contrast-example p { color:inherit!important; font-size:16px!important; }
.cs-main .contrast-example .contrast-large { font-size:25px!important; font-weight:600; }
.contrast-result { display:flex; gap:28px; align-items:center; padding:24px 0; }
.contrast-result strong { display:block; font:600 36px/1.2 ui-monospace,monospace; letter-spacing:-.04em; }
.contrast-result>div>span { color:var(--tx-3); font-size:12px; }
#contrastChecks { display:grid; grid-template-columns:1fr 1fr; gap:8px; flex:1; }
.contrast-check { font-size:12px; border:1px solid var(--stroke-2); border-radius:7px; padding:9px; }
.contrast-check b { display:block; font-size:13px; margin-bottom:3px; }
.contrast-check[data-pass=true] b { color:#77bc98; }
.contrast-check[data-pass=false] b { color:#e7a29e; }
html[data-mode=light] .contrast-check[data-pass=true] b { color:#1b6e42; }
html[data-mode=light] .contrast-check[data-pass=false] b { color:#a12c28; }
.image-drop { position:relative; display:flex!important; align-items:center; flex-direction:column; justify-content:center; gap:12px; text-align:center; border:1px dashed var(--stroke-strong); background:var(--sol-base); border-radius:14px; min-height:190px; padding:28px; cursor:pointer; }
.image-drop svg { width:32px; height:32px; color:var(--acc); }
.image-drop span { font-size:12px; color:var(--tx-3); }
.image-drop input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.image-drop:focus-within,.image-drop.dragover { outline:2px solid var(--acc); outline-offset:3px; }
.image-canvas-wrap { display:flex; justify-content:center; background:var(--sol-base); margin:18px 0; border-radius:10px; overflow:hidden; }
#imageCanvas { max-width:100%; height:auto; max-height:440px; object-fit:contain; cursor:crosshair; }
.image-colors { display:flex; gap:8px; margin:16px 0; flex-wrap:wrap; }
.image-colors button { flex:1; min-width:78px; padding:40px 8px 12px; border:1px solid #80808030; border-radius:8px; cursor:pointer; font:12px ui-monospace,monospace; }
.cs-main .knihovna { position:sticky; top:18px; border:1px solid var(--stroke-2); border-radius:14px; padding:18px; background:var(--layer); margin-top:70px; min-width:0; }
.knih-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.knih-h .eyebrow { font-size:10px; margin-bottom:5px; }
.knih-h h2 { font-size:17px; }
#knihPocet { color:var(--tx-3); font-size:13px; }
.cs-main .knih-sbal { width:28px; height:28px; }
.knihovna.sbaleno .knih-telo { display:none; }
.knihovna.sbaleno .knih-h { margin-bottom:0; }
.knih-filtr { display:flex; gap:3px; margin:12px 0; flex-wrap:wrap; }
.knih-filtr button { flex:1; border:1px solid transparent; border-radius:6px; background:none; color:var(--tx-3); padding:6px; font:12px var(--fnt-ui,system-ui); cursor:pointer; }
.knih-filtr button.on { color:var(--tx-1); background:var(--ctrl); border-color:var(--stroke-2); }
.knih-mriz { display:grid; grid-template-columns:1fr 1fr; gap:8px; max-height:460px; overflow:auto; scrollbar-width:thin; }
.knih-prazdno { grid-column:1/-1; text-align:center; color:var(--tx-3); font-size:13px; padding:30px 8px; }
.knih-k { border:1px solid var(--stroke-2); border-radius:9px; overflow:hidden; min-width:0; }
.knih-nah { height:56px; display:flex; cursor:grab; }
.knih-nah span { flex:1; }
.knih-sp { padding:6px; }
.knih-nazev { width:100%; background:none; border:1px solid transparent; border-radius:4px; padding:4px 2px; color:var(--tx-1); font:12px var(--fnt-ui,system-ui); }
.knih-nazev:focus { background:var(--sol-base); border-color:var(--stroke-2); }
.knih-tl { display:flex; gap:4px; margin-top:5px; }
.knih-tl button { display:grid; place-items:center; flex:1; min-width:0; height:27px; border:1px solid var(--stroke-2); border-radius:5px; background:none; color:var(--tx-2); cursor:pointer; }
.knih-tl svg { width:13px; height:13px; }
.knih-k.cil { outline:2px solid var(--acc); }
.knih-k.tahne { opacity:.5; }
.knih-pata { display:flex; gap:8px; margin-top:16px; }
.knih-pata .btn { flex:1; }
.colors-studio #toasts { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:10000; display:flex; flex-direction:column; gap:7px; max-width:calc(100vw - 24px); }
.colors-studio .toast { padding:12px 18px; background:var(--sol-quart,#303841); border:1px solid var(--stroke-strong,#59636f); border-radius:10px; color:var(--tx-1,#eee); font:13px/1.4 var(--fnt-ui,system-ui); box-shadow:0 8px 24px #0003; overflow-wrap:anywhere; }
.toast .vratit { margin-left:10px; border:0; color:var(--acc); background:none; cursor:pointer; }
.studio-dialog { margin:auto; width:min(520px,calc(100% - 28px)); padding:24px; border:1px solid var(--stroke-strong); border-radius:16px; background:var(--sol-quart,#252a30); color:var(--tx-1,#eee); }
.studio-dialog::backdrop { background:#0009; backdrop-filter:blur(4px); }
.studio-dialog p { font-size:14px; margin-bottom:16px; }
.studio-dialog textarea { margin:8px 0 16px; font-size:12px; }
@media(min-width:1600px) { .cs-main .big-swatch { height:275px; } }
@media(max-width:1100px) { .studio-layout { grid-template-columns:minmax(0,1fr) 250px; gap:18px; } .pick-grid { grid-template-columns:1fr; gap:20px; } .cs-main .big-swatch { height:180px; } .color-visual { display:grid; grid-template-columns:1fr; } .cs-main .fmts { grid-template-columns:1fr; } .contrast-result { flex-direction:column; align-items:stretch; } .ui-preview { flex-direction:column; align-items:flex-start; } .grad-stops { grid-template-columns:1fr; } }
@media(max-width:850px) { .studio-layout { grid-template-columns:1fr; } .cs-main .knihovna { position:static; margin-top:0; } .studio-heading { align-items:flex-start; } .workspace-actions { max-width:220px; } .workspace-actions>.btn { order:3; } .pick-grid { grid-template-columns:1fr 1.2fr; } .cs-main .big-swatch { height:250px; } .cs-main .fmts { grid-template-columns:1fr 1fr; } .knih-mriz { grid-template-columns:repeat(4,1fr); } }
@media(max-width:580px) { .colors-studio .cs-main { padding:22px 14px 40px!important; } .studio-heading { flex-direction:column; gap:16px; margin-bottom:20px; } .workspace-actions { max-width:none; justify-content:flex-start; width:100%; } .workspace-actions>.btn { order:0; margin-left:auto; } #workspaceStatus { text-align:left; } .cs-main .panel { padding:18px; border-radius:12px; } .section-head { flex-wrap:wrap; gap:12px; } .pick-grid { grid-template-columns:1fr; gap:18px; } .cs-main .big-swatch { height:190px; } .cs-main .fmts { grid-template-columns:1fr; } .cs-main .tabs button { padding:9px 11px; } .mini-heading>span { display:none; } .cs-main .pal { height:auto; flex-direction:column; } .cs-main .pal .col { flex-direction:row; justify-content:space-between; min-height:68px; padding:14px; } .pal .lock { position:static; } #paletteEditor { grid-template-columns:1fr; } .gradient-presets { grid-template-columns:1fr 1fr; } .contrast-fields { flex-wrap:wrap; } .contrast-fields>label { flex-basis:100%; } .contrast-fields>.icon-btn { margin:auto; } .contrast-example { padding:20px; } .contrast-result strong { font-size:32px; } .ui-preview { padding:22px; } .knih-mriz { grid-template-columns:1fr 1fr; } .field-row label { flex:1; min-width:130px; } .harm-sw .c { font-size:10px; } .studio-dialog .section-head h2 { font-size:20px; } }
@media(prefers-reduced-motion:reduce) { .cs-main * { animation:none!important; transition:none!important; } }