/* ============================================================
POT: MODULI/TamArtsy/css/tamartsy.css
NAMEN: Mobile-first vmesnik modula TamArtsy.
ODVISNOSTI: brez zunanjih knjižnic.
============================================================ */

:root{
  --ozadje:#0d0a12;
  --plosca:#17111f;
  --plosca2:#22182c;
  --tekst:#fff8ff;
  --mehko:#bbaec5;
  --poudarek:#ff9ed2;
  --poudarek2:#a98cff;
  --rob:rgba(255,255,255,.09);
  --senca:0 18px 50px rgba(0,0,0,.35);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at top,#251631 0,#0d0a12 48%);color:var(--tekst);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button,input{font:inherit}
button{color:inherit}
button:active{transform:scale(.985)}

.vrh{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 10px;
  background:linear-gradient(180deg,rgba(13,10,18,.96),rgba(13,10,18,.74),transparent);
  backdrop-filter:blur(12px);
}
.mini{font-size:10px;letter-spacing:.18em;color:var(--mehko)}
h1{margin:1px 0 0;font-size:27px;line-height:1}
h1 span{background:linear-gradient(90deg,var(--poudarek),var(--poudarek2));-webkit-background-clip:text;background-clip:text;color:transparent}
.ikonski{width:42px;height:42px;border:1px solid var(--rob);border-radius:14px;background:var(--plosca)}

.aplikacija{max-width:980px;margin:0 auto;padding:0 12px 30px}
.oder{
  position:relative;overflow:hidden;border-radius:26px;
  background:#000;box-shadow:var(--senca);border:1px solid var(--rob);
  aspect-ratio:9/16;max-height:66vh;margin:auto;
}
canvas{display:block;width:100%;height:100%;background:#09070c}
.namig{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis;
  background:rgba(12,8,16,.58);border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(8px);padding:8px 12px;border-radius:999px;font-size:12px;
  transition:.3s;
}
.orodja{padding-top:14px}
.trak{display:flex;gap:8px;overflow:auto;padding-bottom:2px;scrollbar-width:none}
.trak::-webkit-scrollbar{display:none}
.glavni,.tekstovni,.primarni,.sekundarni,.velik,.preset{
  border:1px solid var(--rob);background:linear-gradient(180deg,var(--plosca2),var(--plosca));
  border-radius:16px;cursor:pointer;
}
.glavni{padding:12px 15px;white-space:nowrap}
.sklop{margin-top:14px;padding:15px;border-radius:22px;background:rgba(23,17,31,.78);border:1px solid var(--rob);box-shadow:0 10px 28px rgba(0,0,0,.18)}
.naslov-vrstica{display:flex;align-items:center;justify-content:space-between;gap:10px}
h2{font-size:15px;margin:0 0 12px}
.tekstovni{padding:8px 10px;font-size:12px;color:#f6c5df}
.preseti{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.preset{text-align:left;padding:12px;min-height:66px}
.preset b,.preset small{display:block}
.preset small{margin-top:3px;color:var(--mehko);font-size:11px}
.preset.aktiven{outline:2px solid rgba(255,158,210,.7);background:linear-gradient(145deg,rgba(255,158,210,.18),rgba(169,140,255,.15))}
.nastavitve label{display:block;margin-top:13px}
.nastavitve label:first-of-type{margin-top:0}
.nastavitve label>span{display:flex;justify-content:space-between;color:#e9dfec;font-size:13px;margin-bottom:6px}
output{color:#f3bad8}
input[type=range]{width:100%;accent-color:#d59cf2}
.dvojno{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.velik{display:flex;align-items:center;gap:9px;text-align:left;padding:13px 11px}
.velik .emoji{font-size:22px}
.velik b,.velik small{display:block}
.velik small{margin-top:2px;color:var(--mehko);font-size:10px}
.izvoz{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.primarni,.sekundarni{padding:14px 10px;font-weight:700}
.primarni{border-color:transparent;background:linear-gradient(135deg,#e884bb,#9173ed)}
.sekundarni.snemanje{background:linear-gradient(135deg,#c84f68,#8c263d)}
.sporocilo{min-height:20px;margin:10px 4px 0;color:#cfc3d6;font-size:12px;text-align:center}
footer{text-align:center;color:#74697b;font-size:11px;padding:0 0 22px}
footer span{color:#bbaec5}

@media (min-width:760px){
  .aplikacija{display:grid;grid-template-columns:minmax(320px,440px) 1fr;gap:18px;align-items:start}
  .oder{position:sticky;top:72px;width:100%;max-height:none}
  .orodja{padding-top:0}
  .preseti{grid-template-columns:repeat(3,1fr)}
}