/* AndraCore — teme i izgled */
:root, [data-theme="suma"] {
  --head:#0E3B2C; --head-t:#FFFFFF; --head-s:#CFE0D7; --head-l:#2F5A4A; --gold:#C9A24A;
  --page:#F5F3EE; --card:#FFFFFF; --line:#E3DED3; --soft:#EEF3EF;
  --text:#15201B; --muted:#56605A; --primary:#0E3B2C; --on-primary:#FFFFFF;
}
[data-theme="noc"] {
  --head:#0B0F14; --head-t:#EEF2F6; --head-s:#A6B1BD; --head-l:#2C3642; --gold:#D9B45A;
  --page:#121820; --card:#1B232D; --line:#2C3642; --soft:#25303C;
  --text:#EEF2F6; --muted:#A6B1BD; --primary:#D9B45A; --on-primary:#16120A;
}
[data-theme="ocean"] {
  --head:#0F2D4A; --head-t:#FFFFFF; --head-s:#C6D6E6; --head-l:#2D4B69; --gold:#5CC8C2;
  --page:#F1F5F8; --card:#FFFFFF; --line:#D9E2EA; --soft:#E6EEF5;
  --text:#122233; --muted:#526273; --primary:#0F2D4A; --on-primary:#FFFFFF;
}
[data-theme="zemlja"] {
  --head:#5A2E1C; --head-t:#FFFFFF; --head-s:#EBD3C2; --head-l:#7A4630; --gold:#E3B26B;
  --page:#F7F1EA; --card:#FFFDF9; --line:#E7DACB; --soft:#F3E7DB;
  --text:#2A1A12; --muted:#6B5446; --primary:#8A3F22; --on-primary:#FFFFFF;
}
[data-theme="svijetla"] {
  --head:#FFFFFF; --head-t:#15201B; --head-s:#5B6470; --head-l:#E3E5E8; --gold:#9A7420;
  --page:#F3F4F6; --card:#FFFFFF; --line:#E3E5E8; --soft:#EFF1F4;
  --text:#15201B; --muted:#5B6470; --primary:#15201B; --on-primary:#FFFFFF;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--page); color:var(--text); font:16px/1.5 "IBM Plex Sans", system-ui, sans-serif; min-height:100vh; display:flex; flex-direction:column; }
h1, h2, .brand-t, .tile-t { font-family: Outfit, system-ui, sans-serif; }
h1 { margin:0; font-size:30px; font-weight:600; }
h2 { margin:0 0 6px; font-size:18px; font-weight:600; }
a { color:var(--primary); }
.muted { color:var(--muted); font-size:14px; }

.top { background:var(--head); color:var(--head-t); border-bottom:1px solid var(--head-l); }
.top-in { max-width:1100px; margin:0 auto; padding:18px 16px; display:flex; align-items:center; gap:12px; }
.logo { width:44px; height:40px; flex-shrink:0; }
.logo .lg { fill:var(--gold); } .logo .lh { fill:var(--head); }
.brand { flex:1; min-width:0; }
.brand-t { font-weight:700; font-size:26px; line-height:1.1; }
.brand-t span { color:var(--gold); }
.brand-s { font-size:13px; color:var(--head-s); }
.iconbtn { width:44px; height:44px; border-radius:12px; border:1px solid var(--head-l); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.iconbtn svg { width:20px; height:20px; stroke:var(--head-t); }

.wrap { width:100%; max-width:1100px; margin:0 auto; padding:18px 16px 28px; display:flex; flex-direction:column; gap:14px; flex:1; }
.hello { padding:4px 2px; }

.tiles { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
@media (min-width:760px) { .tiles { grid-template-columns:repeat(3, minmax(0,1fr)); } }
.tile { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; min-height:118px; display:flex; flex-direction:column; justify-content:space-between; gap:12px; text-decoration:none; color:var(--text); transition:transform .12s ease, border-color .12s ease; }
a.tile:hover { border-color:var(--primary); transform:translateY(-1px); }
a.tile:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.tile.wide { grid-column:span 2; }
@media (min-width:760px) { .tile.wide { grid-column:span 1; } }
.tile.soon { opacity:.72; }
.tile-t { font-weight:600; font-size:17px; }
.tile-s { font-size:12px; color:var(--muted); }
.ico { width:30px; height:30px; stroke:var(--primary); }
.ico .g { stroke:var(--gold); }
.badge { font:600 11px "IBM Plex Sans", sans-serif; padding:2px 7px; border-radius:99px; background:var(--soft); color:var(--muted); vertical-align:middle; }

.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; }
.rows { list-style:none; margin:6px 0 0; padding:0; }
.rows li { display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--line); }

.themes { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; margin-top:8px; }
.theme-opt { display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--text); font:500 14px "IBM Plex Sans", sans-serif; cursor:pointer; min-height:44px; text-align:left; }
.theme-opt.on { border:2px solid var(--primary); }
.sw { width:40px; height:40px; border-radius:8px; overflow:hidden; display:flex; flex-direction:column; border:1px solid var(--line); flex-shrink:0; }
.sw-h { height:45%; } .sw-b { flex:1; }
[data-preview="suma"] .sw-h { background:#0E3B2C; } [data-preview="suma"] .sw-b { background:#F5F3EE; }
[data-preview="noc"] .sw-h { background:#0B0F14; } [data-preview="noc"] .sw-b { background:#1B232D; }
[data-preview="ocean"] .sw-h { background:#0F2D4A; } [data-preview="ocean"] .sw-b { background:#F1F5F8; }
[data-preview="zemlja"] .sw-h { background:#5A2E1C; } [data-preview="zemlja"] .sw-b { background:#F7F1EA; }
[data-preview="svijetla"] .sw-h { background:#FFFFFF; } [data-preview="svijetla"] .sw-b { background:#F3F4F6; }

.form { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.form.inline { flex-direction:row; flex-wrap:wrap; align-items:center; }
.form.inline input { flex:1 1 180px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; align-items:end; }
label { font-size:14px; font-weight:500; }
input[type=text], input:not([type]), input[type=password] { width:100%; min-height:44px; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--page); color:var(--text); font:16px "IBM Plex Sans", sans-serif; }
input:focus { outline:2px solid var(--primary); outline-offset:1px; }
.check { display:inline-flex; align-items:center; gap:8px; margin-right:14px; min-height:44px; }
.check input { width:20px; height:20px; accent-color:var(--primary); }
fieldset.mods { border:1px solid var(--line); border-radius:12px; padding:6px 12px; margin:0; }
fieldset.mods legend { font-size:14px; font-weight:600; padding:0 4px; }
.btn { min-height:44px; padding:10px 16px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--text); font:600 15px "IBM Plex Sans", sans-serif; cursor:pointer; }
.btn.primary { background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
.btn:focus-visible, .theme-opt:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.user-h { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }

.flash { padding:12px 14px; border-radius:12px; background:var(--soft); border:1px solid var(--line); font-size:14px; }
.flash.err { background:#FBE3D8; color:#5A2410; border-color:#E9B9A2; }

.login { max-width:420px; width:100%; margin:24px auto 0; }
.foot { text-align:center; font-size:12px; color:var(--muted); padding:14px; }

/* v0.2 — prijava uređajem */
.btn.big { width:100%; min-height:56px; font-size:17px; display:flex; align-items:center; justify-content:center; gap:10px; margin-top:12px; }
.btn.big svg { width:24px; height:24px; stroke:currentColor; }
.btn:disabled { opacity:.6; cursor:wait; }
.center { text-align:center; }
details.pw { margin-top:10px; border-top:1px solid var(--line); padding-top:10px; }
details.pw summary { cursor:pointer; font-weight:600; min-height:44px; display:flex; align-items:center; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.rows li form { margin:0; }

/* v0.3 — status kuća */
.card-h { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.loc-name { display:inline-flex; align-items:center; gap:10px; font-weight:500; }
.dot { width:12px; height:12px; border-radius:50%; background:var(--muted); flex-shrink:0; }
.dot.online { background:#2E9E5B; box-shadow:0 0 0 3px rgba(46,158,91,.18); }
.dot.offline { background:#C4462A; box-shadow:0 0 0 3px rgba(196,70,42,.18); }
.dot.unknown { background:#D4A017; }
.dot.none { background:transparent; border:2px solid var(--muted); }
.loc-label { min-width:80px; font-weight:600; }