/* Backstage design tokeny + shell — mosaz/inkoust, převzato z makety (jadro/static/jadro/navrh-maketa.html), aby platforma vypadala jako návrh. Obsahové třídy (.karta, .mrizka, .podtitul…) zůstávají kvůli modulům. */ :root{ --bg:#0B0E13; --surface:#141922; --raised:#1B222D; --line:#242D3A; --ink:#E9EEF5; --muted:#8291A5; --dim:#5A6878; --accent:#E0B252; --accent-ink:#0B0E13; --accent-dim:#E0B25222; --sev1:#6B7A8F; --sev2:#E0B252; --sev3:#E8833A; --sev4:#E05252; --good:#3FBF87; --bad:#E05252; --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; --stin:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6); --side-bg:#0E121A; } @media (prefers-color-scheme:light){:root{ --bg:#EFF2F7; --surface:#FFFFFF; --raised:#F6F8FB; --line:#DEE4EC; --ink:#111720; --muted:#5C6B80; --dim:#8A98AB; --accent:#8A6410; --accent-ink:#FFFFFF; --accent-dim:#8A641014; --sev1:#6B7A8F; --sev2:#9A6B10; --sev3:#B25A22; --sev4:#B33232; --good:#1C7A52; --bad:#B33232; --stin:0 1px 2px rgba(16,24,40,.06),0 12px 28px -18px rgba(16,24,40,.34); --side-bg:#FFFFFF; }} /* přepínač tématu stampuje data-theme na — musí přebít media query */ :root[data-theme="light"]{ --bg:#EFF2F7; --surface:#FFFFFF; --raised:#F6F8FB; --line:#DEE4EC; --ink:#111720; --muted:#5C6B80; --dim:#8A98AB; --accent:#8A6410; --accent-ink:#FFFFFF; --accent-dim:#8A641014; --sev1:#6B7A8F; --sev2:#9A6B10; --sev3:#B25A22; --sev4:#B33232; --good:#1C7A52; --bad:#B33232; --stin:0 1px 2px rgba(16,24,40,.06),0 12px 28px -18px rgba(16,24,40,.34); --side-bg:#FFFFFF; } :root[data-theme="dark"]{ --bg:#0B0E13; --surface:#141922; --raised:#1B222D; --line:#242D3A; --ink:#E9EEF5; --muted:#8291A5; --dim:#5A6878; --accent:#E0B252; --accent-ink:#0B0E13; --accent-dim:#E0B25222; --sev1:#6B7A8F; --sev2:#E0B252; --sev3:#E8833A; --sev4:#E05252; --good:#3FBF87; --bad:#E05252; --stin:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6); --side-bg:#0E121A; } *{box-sizing:border-box;margin:0} body{background:var(--bg);color:var(--ink);font:14px/1.5 var(--sans); min-height:100vh;-webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums} .app{display:flex;min-height:100vh} :is(button,a,input):focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* ── sidebar ── */ .side{width:230px;flex:0 0 230px;background:var(--side-bg); border-right:1px solid var(--line);display:flex;flex-direction:column; position:sticky;top:0;height:100vh} .brand{display:flex;align-items:center;gap:11px;margin:16px 14px 10px; padding:11px 12px;width:calc(100% - 28px);border:1px solid var(--line); border-radius:11px;background:var(--surface);color:inherit;font:inherit; text-align:left;cursor:pointer;box-shadow:var(--stin); transition:border-color .15s,background .15s} .brand:hover{background:var(--raised);border-color:var(--accent)} .brand .mk{width:30px;height:30px;border-radius:8px;display:block;flex:none} .brand .wm{display:flex;flex-direction:column;gap:2px;min-width:0} .brand .wm b{font:800 15px/1 var(--sans);letter-spacing:-.02em} .brand .wm span{font:600 10.5px var(--mono);color:var(--accent)} .brand .swap{margin-left:auto;color:var(--muted);font-size:15px; transition:color .15s,transform .2s} .brand:hover .swap{color:var(--accent);transform:rotate(180deg)} .menu{flex:1;overflow-y:auto;padding:4px 10px 10px;display:flex; flex-direction:column;gap:2px} .grp{font:700 9.5px var(--sans);letter-spacing:.18em;text-transform:uppercase; color:var(--dim);padding:16px 10px 7px} .mi{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px; color:var(--muted);text-decoration:none;font:600 13.5px var(--sans); transition:background .15s,color .15s;position:relative} .mi .iko{width:16px;flex:0 0 16px;text-align:center;font-size:13px} .mi:hover{color:var(--ink);background:var(--raised)} .mi.aktivni{color:var(--accent);background:var(--accent-dim)} .mi.aktivni::before{content:"";position:absolute;left:-10px;top:7px;bottom:7px; width:2.5px;border-radius:2px;background:var(--accent)} .dole{margin:0 10px;border-top:1px solid var(--line);padding:10px 0 0; display:flex;flex-direction:column;gap:2px} .dole a{display:block;padding:7px 10px;border-radius:8px;color:var(--muted); text-decoration:none;font:600 12.5px var(--sans)} .dole a:hover{background:var(--raised);color:var(--ink)} .me{display:flex;align-items:center;gap:10px;padding:12px 18px 14px} .me .av{width:32px;height:32px;border-radius:50%;background:var(--raised); border:1px solid var(--line);display:grid;place-items:center;flex:none; font:700 11px var(--sans);color:var(--accent);text-transform:uppercase} .me .who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .me .who b{font:650 12.5px var(--sans);letter-spacing:-.01em;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .me .who span{font:500 10.5px var(--mono);color:var(--dim);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .tgl{width:30px;height:30px;flex:0 0 30px;border-radius:8px; border:1px solid var(--line);background:transparent;color:var(--muted); display:grid;place-items:center;cursor:pointer; transition:color .15s,border-color .15s} .tgl:hover{color:var(--ink);border-color:var(--accent)} .tgl svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} /* ── obsah ── */ main{flex:1;min-width:0;padding:26px 32px 90px;max-width:1344px} h1{font:800 20px var(--sans);margin-bottom:4px;letter-spacing:-.02em} .podtitul{color:var(--muted);margin-bottom:22px} .karta{background:var(--surface);border:1px solid var(--line); border-radius:12px;padding:18px;box-shadow:var(--stin)} .mrizka{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px} .prazdno{color:var(--dim);font-style:italic;padding:30px;text-align:center} button,.tlacitko{font:700 13px var(--sans);padding:9px 16px;border-radius:9px; border:0;background:var(--accent);color:var(--accent-ink);cursor:pointer} a{color:var(--accent)} .mi,.dole a{color:var(--muted)} /* neutralizace tlačítkových stylů pro ovládací prvky shellu */ .brand,.tgl,.odhlaseni button{background:transparent} .odhlaseni{display:contents} .odhlaseni button{font:600 12.5px var(--sans);color:var(--muted);border:0; padding:7px 10px;border-radius:8px;text-align:left;cursor:pointer;width:100%} .odhlaseni button:hover{background:var(--raised);color:var(--ink)} .brand{background:var(--surface)} /* ── úzká obrazovka: ikonová lišta (vzor maketa/HubSpot) ── */ @media (max-width:960px){ .side{width:62px;flex:0 0 62px} .brand{margin:12px 8px 8px;width:calc(100% - 16px);padding:8px 0; justify-content:center} .brand .wm,.brand .swap{display:none} .menu{padding:4px 8px 10px} .grp{padding:4px 0;font-size:0} .grp::before{content:"";display:block;border-top:1px solid var(--line); margin:4px 10px} .mi{justify-content:center;padding:11px 0} .mi .lb{display:none} .mi.aktivni::before{left:-8px} .dole a{text-align:center} .dole .txt{display:none} .me{padding:12px 0;justify-content:center} .me .who,.me .tgl{display:none} main{padding:20px 16px 70px} }