:root{
  --blue:#1f5fae;--blue-d:#17407f;--navy:#123e78;--green:#1b6b57;--green-l:#e3f1ec;
  --red:#e5483b;--orange:#f08a24;--purple:#6d5bc4;--teal:#1a8a8a;--grey:#8a94a6;
  --bg:#f4f7fb;--card:#fff;--text:#1c2430;--muted:#6b7686;--line:#e4e9f1;--accent:var(--blue);
  --r:16px;--shadow:0 1px 2px rgba(20,40,80,.06),0 4px 14px rgba(20,40,80,.06);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:#e9eef6}
body{margin:0;font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);background:var(--bg)}
body.h-green{--accent:var(--green)} body.h-navy{--accent:var(--blue)}
.app{max-width:480px;min-height:100vh;margin:0 auto;background:var(--bg);position:relative;box-shadow:0 0 40px rgba(20,40,80,.12)}
a{color:var(--blue);text-decoration:none}
h1,h2,h3{margin:0;line-height:1.2}
h2{font-size:1.15rem} h3{font-size:1rem;margin-bottom:8px;display:flex;align-items:center;gap:8px}
p{margin:.4em 0}
small,.small{font-size:.82rem}
.muted{color:var(--muted)} .center{text-align:center}
.ic{flex:none;vertical-align:middle}
.grow{flex:1;min-width:0;display:flex;flex-direction:column}
.clamp{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.between{display:flex;align-items:center;gap:12px;justify-content:space-between}
code{background:#eef2f8;padding:2px 8px;border-radius:6px;font-size:1.1rem;letter-spacing:.5px}

/* header */
.top{color:#fff;padding:calc(env(safe-area-inset-top) + 14px) 16px 14px;background:linear-gradient(135deg,#1f62b4,#16407e)}
.top.green{background:var(--green)} .top.navy{background:var(--navy)}
.top.brand{padding-bottom:18px}
.bar{display:flex;align-items:center;gap:10px;min-height:40px}
.bar h1{font-size:1.3rem;flex:1;font-weight:650}
.brand-row{display:flex;align-items:center;gap:12px}
.logo{display:grid;place-items:center}
.brand-text{flex:1;min-width:0;display:flex;flex-direction:column}
.brand-text strong{font-size:1.35rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-text small{opacity:.9}
.hdr-btn{color:#fff;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;position:relative}
.hdr-btn:active{background:rgba(255,255,255,.18)}
.dot{position:absolute;top:2px;right:2px;min-width:18px;height:18px;border-radius:9px;background:var(--red);color:#fff;font:700 .7rem/18px system-ui;text-align:center;padding:0 4px;font-style:normal}
.dot.inline{position:static;display:inline-block;margin-left:4px}

.page{padding:16px 16px 24px;display:flex;flex-direction:column;gap:14px}
.has-nav .page{padding-bottom:110px}
.flash{padding:12px 14px;border-radius:12px;font-size:.95rem}
.flash.ok{background:#e3f4ea;color:#165a35} .flash.err{background:#fde8e6;color:#8f2118}

/* cards, lists */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px}
.card h2{margin-bottom:6px}
.list{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.item{display:flex;align-items:center;gap:12px;padding:13px 14px;color:var(--text);border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
a.item:active{background:#f1f5fb}
.item.unread{background:#eef5ff}
.item.off{opacity:.55}
.item strong{font-weight:600}
.item small{line-height:1.3}
.right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.threads .item{padding:14px}
.section-title{font-size:1.05rem;margin:6px 2px 0}
.section-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px}
.section-row a{font-size:.9rem;font-weight:600}
.empty{text-align:center;color:var(--muted);padding:34px 16px;display:flex;flex-direction:column;align-items:center;gap:10px}
.empty.small{padding:14px}
.banner{display:flex;align-items:center;gap:10px;background:#fff6e6;border:1px solid #fde2b0;color:#6b4300;padding:12px 14px;border-radius:14px}
.banner span{flex:1} .banner.soft{background:#eaf2fd;border-color:#cfe0f7;color:#16407e}
.banner[hidden]{display:none}

/* ikone */
.ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff}
.ico.big{width:52px;height:52px}
.ico.red{background:var(--red)} .ico.blue{background:#3f8cf0} .ico.green{background:var(--green)} .ico.purple{background:var(--purple)}
.ico.orange{background:var(--orange)} .ico.teal{background:var(--teal)} .ico.grey{background:var(--grey)}
.blue-solid{background:#1d6fd6} .blue-light{background:#5b9df2} .green-solid{background:#1f8a5b} .purple-solid{background:#8d74d8}
.avatar{width:42px;height:42px;border-radius:50%;background:#dce8fa;color:var(--blue-d);display:grid;place-items:center;font-weight:700;flex:none}
.avatar.big{width:56px;height:56px;font-size:1.2rem}
.profile-head{display:flex;align-items:center;gap:14px}
.profile-head div{display:flex;flex-direction:column}

/* hero + tiles */
.hero{border-radius:var(--r);overflow:hidden;min-height:150px;position:relative;display:flex;align-items:flex-end;
  background:linear-gradient(160deg,#2b6fc2 0%,#16407e 70%);color:#fff;box-shadow:var(--shadow)}
.hero-art{position:absolute;right:-6px;bottom:-14px;opacity:.22;color:#fff}
.hero-art .ic{width:170px;height:170px}
.hero-text{position:relative;padding:18px}
.hero-text p{margin:0;opacity:.95} .hero-text h2{font-size:1.5rem;margin:2px 0 6px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:14px;color:var(--text);display:flex;flex-direction:column;gap:4px;min-height:132px}
.tile:active{transform:scale(.98)}
.tile .ico{width:50px;height:50px;margin-bottom:4px}
.tile strong{font-size:1rem}.tile small{color:var(--muted);line-height:1.25}

/* statistika */
.stats{display:flex;gap:8px;justify-content:space-between;text-align:center}
.stats b{display:block;font-size:1.4rem}.stats small{color:var(--muted)}
.stats.grid{display:grid;grid-template-columns:repeat(3,1fr)}
.stats.grid a{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:14px 6px;color:var(--text)}

/* forme */
.form{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:6px;font-size:.92rem;font-weight:600;color:#3a4556}
.field small{font-weight:400}
input,select,textarea{font:inherit;color:var(--text);width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input[type=checkbox],input[type=radio]{width:auto}
textarea{resize:vertical;min-height:100px}
.inline-suffix{display:flex;align-items:center;gap:6px}.inline-suffix em{font-style:normal;color:var(--muted);white-space:nowrap;font-weight:400}
.chk{display:flex;align-items:center;gap:8px;font-weight:500;font-size:.95rem}
.checks{border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.checks legend{font-weight:600;font-size:.9rem;padding:0 6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;border:0;border-radius:12px;background:var(--accent);color:#fff;font:inherit;font-weight:650;cursor:pointer}
.btn:active{filter:brightness(.92)} .btn[disabled]{opacity:.5}
.btn-block{width:100%} .btn-sm{padding:8px 12px;font-size:.88rem;border-radius:10px}
.btn-green{background:var(--green)}
.btn-ghost{background:#fff;color:var(--blue);border:1.5px solid #cfdcf0}
.btn-danger{background:var(--red)} .btn-danger-text{color:var(--red)}
.actions{display:flex;gap:10px;flex-wrap:wrap}.actions>*{flex:1}.actions form{display:flex}.actions form .btn{flex:1}
.icon-btn{background:none;border:0;color:var(--muted);padding:6px}
.cat-edit{flex-wrap:wrap}.cat-edit input[name=name]{flex:1;min-width:140px}.cat-edit select{width:auto}.cat-edit .narrow{width:70px}

/* prijava kvara */
.report{display:flex;flex-direction:column;gap:14px}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cat{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 4px;display:flex;flex-direction:column;align-items:center;gap:6px;color:#4a5566;font:inherit;font-size:.82rem;cursor:pointer;min-height:86px;justify-content:center}
.cat.on{border-color:var(--green);background:var(--green-l);color:var(--green);box-shadow:0 0 0 2px rgba(27,107,87,.15)}
.dropzone{border:2px dashed #c6d3e3;border-radius:14px;background:#fff;padding:20px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;color:var(--green);cursor:pointer;font-weight:400}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumbs .th{position:relative;width:72px;height:72px;border-radius:10px;overflow:hidden}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs button{position:absolute;top:2px;right:2px;border:0;background:rgba(0,0,0,.6);color:#fff;border-radius:50%;width:22px;height:22px;line-height:20px}
.slot{display:flex;gap:8px;margin-bottom:8px}.slot input{flex:1}.slot select{flex:1.2}
.hm-opt{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-weight:500}
.hm-opt:last-child{border:0}

/* detalji prijave */
.desc{margin:10px 0 0;font-size:1.02rem}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:500}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
.slots{margin:0;padding-left:18px}.slots li{margin:4px 0}
.timeline{border-left:2px solid #cfdcf0;margin-left:8px;padding-left:14px;display:flex;flex-direction:column;gap:10px}
.ev p{margin:2px 0 0}.ev.note p{background:#fff;padding:8px 12px;border-radius:12px;box-shadow:var(--shadow);display:inline-block}
.badge{display:inline-block;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;background:#e8eefa;color:#27518f}
.st-new{background:#e7f0ff;color:#1f5fae}.st-accepted{background:#fff0d9;color:#9a5a00}.st-done{background:#e1f4ea;color:#17703f}
.st-declined,.st-cancelled{background:#f0f1f4;color:#6b7686}

/* poruke */
.chat{display:flex;flex-direction:column;gap:8px;padding-bottom:70px}
.bubble{max-width:82%;padding:10px 13px;border-radius:18px;box-shadow:var(--shadow);word-wrap:break-word}
.bubble small{display:block;opacity:.65;font-size:.7rem;margin-top:3px}
.bubble.mine{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:5px}
.bubble.theirs{align-self:flex-start;background:#fff;border-bottom-left-radius:5px}
.msg-form{display:flex;gap:8px;align-items:center;background:#fff;border-radius:28px;padding:6px 6px 6px 16px;box-shadow:var(--shadow)}
.msg-form input{border:0;padding:8px 0}
.msg-form.fixed{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 12px);left:50%;transform:translateX(-50%);width:calc(min(100%,480px) - 32px);z-index:5}
.send{width:42px;height:42px;border-radius:50%;border:0;background:var(--blue);color:#fff;display:grid;place-items:center;flex:none}

/* tabovi */
.tabs{display:flex;background:#e6ecf5;border-radius:12px;padding:4px;gap:4px}
.tabs a{flex:1;text-align:center;padding:9px 6px;border-radius:9px;color:#4a5566;font-weight:600;font-size:.92rem;white-space:nowrap}
.tabs a.on{background:#fff;color:var(--blue);box-shadow:var(--shadow)}
.tabs.scroll{overflow-x:auto}.tabs.scroll a{flex:none;padding:9px 14px}

/* glasanje */
.choices{display:flex;flex-direction:column;gap:10px}
.choices.two{flex-direction:row}.choices.two .choice{flex:1}
.choice input{position:absolute;opacity:0}
.choice span{display:flex;align-items:center;gap:10px;padding:14px;border:1.5px solid var(--line);border-radius:12px;font-weight:600;flex-wrap:wrap;background:#fff}
.choice span small{width:100%;font-weight:400;color:var(--muted)}
.choice input:checked+span{border-color:var(--blue);background:#eaf2fd;color:var(--blue-d)}
.choice.za input:checked+span{border-color:#1f8a5b;background:#e3f4ea;color:#17703f}
.choice.protiv input:checked+span{border-color:var(--red);background:#fde8e6;color:#8f2118}
.bar-row{margin-bottom:12px}.pbar{background:#e8edf5;height:12px;border-radius:6px;overflow:hidden;margin-top:6px}
.pbar i{display:block;height:100%;border-radius:6px}
.c-za{background:#1f8a5b}.c-protiv{background:var(--red)}.c-suzdrzan{background:var(--grey)}
.news p{margin:6px 0 0}.news h3{margin:4px 0 0}
.row-line{padding:8px 0;border-bottom:1px solid var(--line)}

/* admin */
.apt{padding:10px 14px}
.apt-no{width:46px;height:46px;border-radius:12px;background:#e8eefa;color:var(--blue-d);display:grid;place-items:center;font-weight:700;flex:none}
.resident-link{display:block;font-weight:600;padding:2px 0}.resident-link.off{opacity:.5;text-decoration:line-through}
dialog{border:0;border-radius:var(--r);padding:18px;width:min(92vw,440px);box-shadow:0 10px 50px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(10,20,40,.5)}
.cred{border:2px solid #f2c261;background:#fffaf0}
.cred dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:10px 0}.cred dt{color:var(--muted)}.cred dd{margin:0;font-weight:600;word-break:break-all}

/* donja navigacija */
.bottom{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,480px);background:#fff;display:flex;justify-content:space-around;align-items:flex-end;
  padding:6px 4px calc(env(safe-area-inset-bottom) + 6px);box-shadow:0 -4px 20px rgba(20,40,80,.1);border-radius:20px 20px 0 0;z-index:10}
.bottom a:not(.fab){flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:#8a94a6;font-size:.72rem;padding:6px 0}
.bottom a.on{color:var(--blue);font-weight:700}
.bottom .fab{width:58px;height:58px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;margin:-26px 6px 4px;box-shadow:0 6px 16px rgba(20,60,130,.35);border:4px solid #fff}

/* prijava */
body.plain{display:grid;place-items:center;min-height:100vh}.center-box{text-align:center;padding:24px}
.auth{display:flex;flex-direction:column;gap:12px;padding-top:30px;align-items:stretch}
.auth h1{text-align:center;font-size:1.7rem}.auth p{text-align:center;margin:0}
.auth-logo{width:80px;height:80px;border-radius:24px;background:linear-gradient(135deg,#2b6fc2,#16407e);color:#fff;display:grid;place-items:center;margin:20px auto 0}
body.role-guest .page{justify-content:center}
@media (min-width:520px){body{padding:0}.app{border-radius:0}}

/* forum */
.search{display:flex;align-items:center;gap:8px;background:#fff;border-radius:12px;padding:0 12px;box-shadow:var(--shadow)}
.search input{border:0;padding:12px 0}
.new-topic summary{list-style:none;cursor:pointer}.new-topic summary::-webkit-details-marker{display:none}
.new-topic[open] summary{margin-bottom:14px}
.new-topic{padding:12px}
.count{display:inline-flex;align-items:center;gap:3px;font-size:.8rem;color:var(--muted)}
.topic-main h2{margin:12px 0 4px}.topic-main .between .grow span{font-weight:600}
.small-actions{margin-top:12px}.small-actions>*{flex:none}
.comments{display:flex;flex-direction:column;gap:10px}
.comment{display:flex;gap:10px;background:#fff;border-radius:14px;padding:12px;box-shadow:var(--shadow)}
.comment p{margin:4px 0 0;word-wrap:break-word}.comment.by-admin{border-left:4px solid var(--blue)}
.avatar.sm{width:34px;height:34px;font-size:.8rem}
.link-btn{background:none;border:0;padding:4px 0;color:var(--red);font:inherit;font-size:.8rem;cursor:pointer}
.tiles .tile:last-child:nth-child(odd){grid-column:span 2;min-height:0}
.checks-list{font-size:.88rem;display:flex;flex-direction:column;gap:4px}.checks-list .ok{color:#17703f}.checks-list .bad{color:#8f2118;font-weight:600}