/* support.createai.si v identiteti createai.si: temna osnova, limetin poudarek, Unbounded + Sora + JetBrains Mono, ostri robovi. */
:root{
 --bg:#0a0a0a;--surface:#121212;--surface2:#1a1a1a;--card:#161616;--line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.18);
 --tx:#f0f0f0;--mut:#8a8a8a;--faint:#555;
 --accent:#c5ff00;--accent-hi:#d9ff33;--accent-glow:rgba(197,255,0,.35);--accent-soft:rgba(197,255,0,.08);--on-accent:#0a0a0a;
 --green:#c5ff00;--greensoft:rgba(197,255,0,.10);--amber:#ffb547;--ambersoft:rgba(255,181,71,.10);--blue:#7fb4ff;--bluesoft:rgba(127,180,255,.10);--red:#ff6b62;--redsoft:rgba(255,107,98,.10);
 --display:'Unbounded',system-ui,sans-serif;--body:'Sora',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
 --r:4px;--ease:cubic-bezier(.22,1,.36,1);color-scheme:dark}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){
 --bg:#f6f6f3;--surface:#ffffff;--surface2:#efefe9;--card:#ffffff;--line:rgba(0,0,0,.08);--line-strong:rgba(0,0,0,.20);
 --tx:#0a0a0a;--mut:#5a5a5a;--faint:#b0b0b0;
 --accent:#5a7a00;--accent-hi:#6f9400;--accent-glow:rgba(90,122,0,.30);--accent-soft:rgba(90,122,0,.08);--on-accent:#fff;
 --green:#4c6a00;--greensoft:rgba(90,122,0,.10);--amber:#9a5b00;--ambersoft:rgba(154,91,0,.10);--blue:#2457b8;--bluesoft:rgba(36,87,184,.08);--red:#b8312a;--redsoft:rgba(184,49,42,.08);color-scheme:light}}
:root[data-theme=light]{
 --bg:#f6f6f3;--surface:#ffffff;--surface2:#efefe9;--card:#ffffff;--line:rgba(0,0,0,.08);--line-strong:rgba(0,0,0,.20);
 --tx:#0a0a0a;--mut:#5a5a5a;--faint:#b0b0b0;
 --accent:#5a7a00;--accent-hi:#6f9400;--accent-glow:rgba(90,122,0,.30);--accent-soft:rgba(90,122,0,.08);--on-accent:#fff;
 --green:#4c6a00;--greensoft:rgba(90,122,0,.10);--amber:#9a5b00;--ambersoft:rgba(154,91,0,.10);--blue:#2457b8;--bluesoft:rgba(36,87,184,.08);--red:#b8312a;--redsoft:rgba(184,49,42,.08);color-scheme:light}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font:15px/1.5 var(--body);background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased;transition:background-color .4s var(--ease),color .4s var(--ease)}
::selection{background:var(--accent);color:var(--on-accent)}
button,.btn{font:600 14px/1 var(--body);letter-spacing:.02em;border:1px solid transparent;border-radius:var(--r);padding:12px 20px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;
 background:radial-gradient(circle 120px at 50% 50%,var(--accent-hi) 0%,var(--accent) 100%);color:var(--on-accent);transition:filter .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
button:hover,.btn:hover{filter:drop-shadow(0 8px 22px var(--accent-glow))}
button.ghost,.btn.ghost{background:transparent;color:var(--tx);border-color:var(--line-strong)}
button.ghost:hover,.btn.ghost:hover{filter:none;border-color:var(--accent);color:var(--accent)}
button:disabled{opacity:.5;cursor:default;filter:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input,select,textarea{width:100%;font:inherit;color:var(--tx);background:var(--surface2);border:1px solid var(--line-strong);border-radius:var(--r);padding:11px 13px;margin:6px 0 14px;transition:border-color .2s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
label{font:600 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
code{font:12px var(--mono);background:var(--surface2);padding:2px 6px;border-radius:var(--r);border:1px solid var(--line)}
.muted{color:var(--mut)}.err{color:var(--red);min-height:1em}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.eyebrow{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:'// ';color:var(--faint)}
h1,h2{font-family:var(--display);font-weight:800;letter-spacing:-.02em;margin:4px 0 0}
h1{font-size:28px}h2{font-size:18px;margin-bottom:10px}

/* Znak: logotip CreateAI + »support« */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tx)}
.brand img{height:34px;width:auto}
.brand .logo-light{display:none}
:root[data-theme=light] .brand .logo-dark{display:none}:root[data-theme=light] .brand .logo-light{display:block}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .brand .logo-dark{display:none}:root:not([data-theme=dark]) .brand .logo-light{display:block}}
.brand span{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-accent);background:var(--accent);padding:5px 7px;border-radius:var(--r)}

.login{min-height:100vh;display:grid;place-items:center;padding:16px;background:radial-gradient(600px 400px at 50% 30%,var(--accent-soft),transparent 70%)}
.login form{width:min(400px,100%);padding:30px}.login .brand{margin-bottom:22px}.login h1{font-size:22px;margin-bottom:6px}
.login button{width:100%;justify-content:center;padding:15px}

.shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
aside{background:var(--surface);border-right:1px solid var(--line);padding:22px 14px;display:flex;flex-direction:column;gap:10px;position:sticky;top:0;height:100vh}
aside .brand{padding:0 6px 14px;border-bottom:1px solid var(--line)}
aside .navlabel{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:14px 10px 4px}
aside nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow:auto}
aside nav button{background:none;color:var(--mut);justify-content:space-between;font-weight:400;padding:10px;border-left:2px solid transparent;border-radius:0}
aside nav button:hover{filter:none;color:var(--tx);background:var(--surface2)}
aside nav button.on{color:var(--tx);font-weight:600;border-left-color:var(--accent);background:var(--surface2)}
aside nav button b{font:600 11px/1 var(--mono);background:var(--accent);color:var(--on-accent);border-radius:var(--r);padding:4px 6px;min-width:22px;text-align:center}
aside .foot{display:flex;flex-direction:column;gap:6px}aside .foot .ghost{justify-content:flex-start}
main{padding:32px 40px;max-width:1120px;width:100%}
header{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.filters{margin-bottom:16px}.filters input{flex:1;min-width:200px;margin:0}
.seg{display:flex;border:1px solid var(--line-strong);border-radius:var(--r);padding:3px;gap:2px}
.seg button{background:none;color:var(--mut);padding:8px 12px;font-weight:500;border-radius:2px}
.seg button:hover{filter:none;color:var(--tx)}.seg button.on{background:var(--accent);color:var(--on-accent);font-weight:600}
.list{display:flex;flex-direction:column;gap:8px}
.item{display:grid;grid-template-columns:1fr auto;gap:8px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;cursor:pointer;text-align:left;color:var(--tx);font-weight:400;line-height:1.5}
.item:hover{filter:none;border-color:var(--accent)}
.item .txt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item small{color:var(--mut);font:12px/1.5 var(--mono);text-align:right}.item .thumbs{grid-column:1/-1}
.tag{display:inline-flex;align-items:center;border-radius:var(--r);padding:3px 8px;font:600 11px/1.3 var(--mono);letter-spacing:.04em;background:var(--surface2);color:var(--mut);white-space:nowrap;border:1px solid var(--line)}
.tag.open{background:var(--ambersoft);color:var(--amber);border-color:transparent}.tag.in_progress{background:var(--bluesoft);color:var(--blue);border-color:transparent}
.tag.done{background:var(--greensoft);color:var(--green);border-color:transparent}.tag.high{background:var(--redsoft);color:var(--red);border-color:transparent}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}.thumbs img{width:104px;height:68px;object-fit:cover;border-radius:var(--r);border:1px solid var(--line);display:block}
.ticket .thumbs img{width:100%;height:auto;max-height:440px;object-fit:contain;background:var(--surface2)}
.ticket .thumbs a{flex:1 1 260px}
.ticket .body{white-space:pre-wrap;font-size:16px;margin:16px 0;border-left:2px solid var(--accent)}
.empty{text-align:center;padding:56px 20px;color:var(--mut)}
.drawer{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:flex;justify-content:flex-end;z-index:50}
.drawer.center{justify-content:center;align-items:center;padding:16px}
.drawer .panel{background:var(--bg);border-left:1px solid var(--line);width:min(740px,100%);height:100%;overflow:auto;padding:32px;position:relative}
.drawer .panel.small{height:auto;max-height:90vh;width:min(480px,100%);border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface)}
.close{position:absolute;top:16px;right:16px;background:transparent;color:var(--tx);border:1px solid var(--line-strong);width:36px;height:36px;justify-content:center;padding:0;font-size:20px}
.close:hover{filter:none;border-color:var(--accent);color:var(--accent)}
.keybox{font:13px/1.5 var(--mono);word-break:break-all;background:var(--surface2);border:1px solid var(--accent);padding:14px;border-radius:var(--r);color:var(--accent)}
#toast{position:fixed;bottom:20px;right:20px;background:var(--accent);color:var(--on-accent);padding:12px 18px;border-radius:var(--r);font-weight:600;display:none;z-index:60}
.poweredby{font:11px var(--mono);color:var(--faint);letter-spacing:.06em}.poweredby a{color:var(--mut);text-decoration:none}.poweredby a:hover{color:var(--accent)}
@media(max-width:800px){.shell{grid-template-columns:1fr}aside{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:14px 16px}aside .brand{border:0;padding:0;flex:1}aside .navlabel{display:none}
 aside nav{flex-direction:row;flex-basis:100%;overflow-x:auto;order:3}aside nav button{white-space:nowrap;border-left:0;border-bottom:2px solid transparent}aside nav button.on{border-bottom-color:var(--accent)}
 aside>.ghost{order:2}aside .foot{flex-direction:row;order:2}main{padding:20px 16px}.drawer .panel{padding:24px 16px}h1{font-size:22px}}