:root{
  --bg:#eaf3ee; --surface:#fff; --ink:#123028; --inkSoft:#4e6a61;
  --waterDeep:#0e4a3f; --water:#1a6a58; --waterLite:#cfe7de;
  --reed:#79ab3c; --reedDark:#5c8a2a; --gravel:#c69c66; --gravelLite:#f0e6d4;
  --line:#d5e3db; --lily:#e07a94; --danger:#c9743a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-tap-highlight-color:transparent;
}
#app{max-width:480px;margin:0 auto;min-height:100vh;position:relative;background:var(--bg)}
input,textarea,button{font-family:inherit}

/* header */
#hdr{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;
  padding:calc(18px + env(safe-area-inset-top)) 18px 18px;
  background:linear-gradient(150deg,var(--waterDeep),var(--water))}
.htitle{color:#fff;font-size:20px;font-weight:800;letter-spacing:-.3px}
.hsub{color:var(--waterLite);font-size:12px}

/* main */
#main{padding:20px 16px calc(108px + env(safe-area-inset-bottom))}
.stitle{margin-bottom:18px}
.stitle h2{margin:0;font-size:24px;font-weight:800;letter-spacing:-.4px;color:var(--ink)}
.stitle p{margin:4px 0 0;font-size:14px;color:var(--inkSoft);line-height:1.4}

/* card */
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:0 1px 2px rgba(18,48,40,.04)}
.lbl{font-size:12px;font-weight:700;color:var(--inkSoft);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.hint{font-size:13px;color:var(--inkSoft);line-height:1.5}
.hint.center{text-align:center;margin:6px 0 0}
.hint.sm{font-size:12px;margin-top:8px}
.empty{text-align:center;padding:40px 20px;color:var(--inkSoft);font-size:14px}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer}
.chip.on{background:var(--reed);border-color:var(--reedDark);color:#fff}

/* buttons */
.btn{padding:13px 16px;border-radius:14px;border:none;font-size:16px;font-weight:700;cursor:pointer;width:100%}
.btn.primary{background:var(--water);color:#fff}
.btn.ghost{background:var(--waterLite);color:var(--waterDeep)}
.btn.outline{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn.danger{background:#fbe7e7;color:#a33}

/* number fields */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.nf{display:block;margin-bottom:0}
.nfl{display:block;font-size:12px;color:var(--inkSoft);font-weight:600;margin-bottom:4px}
.nfi{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fbfdfc}
.nfi input{flex:1;border:none;outline:none;padding:12px;font-size:17px;background:transparent;color:var(--ink);min-width:0;width:100%}
.nfi i{padding:0 12px;color:var(--inkSoft);font-size:14px;font-style:normal;white-space:nowrap}
.qblock{margin-bottom:18px}

/* result rows */
.rrow{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.rrow:last-child{border-bottom:none}
.rl{font-size:15px;color:var(--ink);font-weight:600}
.rh{font-size:12px;color:var(--inkSoft);margin-top:2px}
.rv{font-size:18px;font-weight:800;color:var(--waterDeep);white-space:nowrap;margin-left:12px}

/* volume / cross section */
.volbox{text-align:center;padding:6px}
.volnum{font-size:32px;font-weight:800;color:var(--waterDeep)}
.volsub{font-size:13px;color:var(--inkSoft);margin-top:2px}
.crossbox{position:relative;height:150px;background:var(--gravelLite)}
.crossbox .water{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,var(--water),var(--waterDeep));transition:height .35s ease}
.crosslbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.crosslbl .cn{font-size:34px;font-weight:800}
.crosslbl .cs{font-size:13px;opacity:.95}

/* cost */
.costbox{margin-top:14px;background:var(--gravelLite);border-radius:12px;padding:14px;display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--ink)}
.costbox b{font-size:22px;color:var(--gravel)}

/* plan steps */
.step{display:flex;gap:12px;margin-bottom:12px}
.stepn{flex-shrink:0;width:30px;height:30px;border-radius:999px;background:var(--reed);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.stepc{flex:1;padding:14px;margin:0}
.stept{font-weight:800;color:var(--ink);margin-bottom:4px}
.steptx{font-size:14px;color:var(--inkSoft);line-height:1.5}

/* items (plants/fish) */
.item{padding:14px}
.ihead{display:flex;justify-content:space-between;align-items:flex-start}
.in{font-weight:800;color:var(--ink);font-size:16px}
.tag{color:#fff;font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap;margin-left:8px}
.tag.green{background:var(--reed)} .tag.pink{background:var(--lily)}
.idesc{font-size:13px;color:var(--inkSoft);margin:8px 0;line-height:1.5}
.meta{display:flex;flex-wrap:wrap;gap:6px}
.meta span{background:#f1f6f3;color:var(--inkSoft);font-size:12px;font-weight:600;padding:5px 9px;border-radius:8px}

/* doktor */
.diag{padding:0;overflow:hidden}
.dhead{display:flex;align-items:center;gap:10px;padding:14px;cursor:pointer}
.dico{font-size:20px}
.dsym{flex:1;font-weight:700;color:var(--ink)}
.dchev{color:var(--inkSoft);font-size:12px}
.dbody{padding:0 14px 14px}
.duzrok{font-size:13px;color:var(--inkSoft);line-height:1.5;margin-bottom:8px}
.dbody ul{margin:0;padding-left:18px}
.dbody li{font-size:14px;color:var(--ink);line-height:1.6;margin-bottom:3px}

/* dnevnik */
textarea{width:100%;min-height:70px;border:1px solid var(--line);border-radius:12px;padding:12px;font-size:15px;resize:vertical;color:var(--ink);background:#fbfdfc}
.drow{display:flex;gap:10px;margin-top:12px}
.drow .btn{margin:0}
.prevwrap{position:relative;margin-top:10px}
.prevwrap img{width:100%;border-radius:12px;display:block}
.prevwrap button{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:999px;width:30px;height:30px;font-size:15px;cursor:pointer}
.entry{padding:0;overflow:hidden}
.ephoto{width:100%;display:block}
.ebody{padding:14px}
.edate{font-size:12px;color:var(--reedDark);font-weight:700;margin-bottom:4px}
.etext{font-size:15px;color:var(--ink);line-height:1.5}
.del{margin-top:10px;background:none;border:none;color:#a33;font-size:13px;font-weight:600;cursor:pointer;padding:0}

/* odrzavanje */
.seasons{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px}
.sbtn{flex-shrink:0;padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-weight:700;font-size:14px;cursor:pointer}
.prow{display:flex;justify-content:space-between;align-items:center;font-size:15px;color:var(--ink)}
.prow span{font-size:13px;font-weight:700}
.pbar{height:8px;background:#eef2ef;border-radius:999px;margin-top:10px;overflow:hidden}
.pbar div{height:100%;transition:width .3s}
.taskrow{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;cursor:pointer}
.tbox{flex-shrink:0;width:24px;height:24px;border-radius:7px;border:2px solid var(--line);background:#fff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;margin-top:1px}
.taskrow.on .ttxt{color:var(--inkSoft);text-decoration:line-through}
.ttxt{font-size:15px;color:var(--ink);line-height:1.45}
.rinput{flex:1;border:1px solid var(--line);border-radius:12px;padding:11px;font-size:15px;background:#fbfdfc;color:var(--ink);min-width:0}
.rdate{border:1px solid var(--line);border-radius:12px;padding:11px;font-size:14px;background:#fbfdfc;color:var(--ink)}
.remitem{display:flex;justify-content:space-between;align-items:center;padding:12px 14px}
.rt{font-weight:600;color:var(--ink)}
.rd{font-size:12px;color:var(--inkSoft);margin-top:2px}
.remitem .del{margin:0;font-size:16px;color:var(--inkSoft)}

/* nav — plutajuća traka (lily-pad) */
#nav{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(12px + env(safe-area-inset-bottom));
  width:calc(100% - 24px);max-width:456px;
  display:flex;gap:2px;padding:7px;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.7);
  border-radius:24px;
  box-shadow:0 10px 34px rgba(18,48,40,.20),0 3px 10px rgba(18,48,40,.10),inset 0 1px 0 rgba(255,255,255,.6);
  z-index:20}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 0 8px;border:none;background:transparent;border-radius:16px;
  cursor:pointer;position:relative;overflow:hidden;
  transition:background .28s ease,transform .18s ease}
.tab svg{width:23px;height:23px;stroke:var(--inkSoft);transition:stroke .22s ease,transform .28s ease}
.tab span{font-size:10.5px;font-weight:700;letter-spacing:.2px;color:var(--inkSoft);transition:color .22s ease}
.tab:active{transform:scale(.93)}
.tab.on{background:linear-gradient(165deg,var(--waterLite),#e6f5ee)}
.tab.on::before{content:"";position:absolute;top:5px;width:16px;height:3px;border-radius:999px;background:var(--water);opacity:.9}
.tab.on svg{stroke:var(--waterDeep);transform:translateY(1px)}
.tab.on span{color:var(--waterDeep)}
@media(prefers-reduced-motion:reduce){.tab,.tab svg{transition:none}}

/* toast */
#toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%) translateY(20px);background:var(--waterDeep);color:#fff;
  padding:12px 18px;border-radius:12px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:50;max-width:90%}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(min-width:481px){#app{border-left:1px solid var(--line);border-right:1px solid var(--line)}}

/* ---- v2: baza / filteri / uniseal / nauči / više ---- */
.svgbox{margin:12px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#f7fbf9}
.unirow{display:flex;justify-content:space-between;align-items:center;padding:14px}
.uni-saw{text-align:center;font-size:11px;color:var(--inkSoft);white-space:nowrap;margin-left:12px}
.uni-saw b{display:block;font-size:16px;color:var(--waterDeep)}
.learntx{font-size:14px;color:var(--ink);line-height:1.6}
.menurow{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:10px;cursor:pointer}
.mrt{font-weight:800;color:var(--ink);font-size:16px}
.mrd{font-size:13px;color:var(--inkSoft);margin-top:2px}
.mrc{color:var(--inkSoft);font-size:22px;font-weight:700}

/* ---- prijava (login) ---- */
#login{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px calc(20px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
  background:radial-gradient(120% 80% at 50% -10%,#cfe7de 0%,var(--bg) 55%)}
.login-card{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--line);
  border-radius:22px;padding:26px 22px;box-shadow:0 12px 40px rgba(18,48,40,.12)}
.login-badge{width:60px;height:60px;margin:0 auto 14px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--waterDeep),var(--water));
  box-shadow:0 6px 18px rgba(14,74,63,.35)}
.login-title{margin:0;text-align:center;font-size:23px;font-weight:800;letter-spacing:-.3px;color:var(--ink)}
.login-sub{margin:4px 0 20px;text-align:center;font-size:14px;color:var(--inkSoft)}
.login-err{min-height:18px;margin:10px 2px 0;text-align:center;font-size:13px;font-weight:600;color:#c0392b}
.login-foot{margin:18px 0 0;font-size:12px;color:var(--inkSoft);text-align:center}

/* ---- Skica jezerca (dizajner) ---- */
.sk-scene{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:16px;margin-bottom:14px;
  touch-action:none;user-select:none;border:1px solid var(--line);
  background:radial-gradient(140% 90% at 50% 8%, #cfe6c2 0%, #a9d089 40%, #7fb463 78%, #6aa551 100%)}
.sk-scene::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 70px rgba(30,60,30,.26)}
.sk-scene.draw{cursor:crosshair}
.sk-bg{position:absolute;inset:0;background-size:cover;background-position:center;display:none}
.sk-shadow{position:absolute;border-radius:50%;background:rgba(18,40,20,.28);filter:blur(15px);pointer-events:none}
.sk-pond{position:absolute;cursor:move}
.sk-pondart{position:absolute;inset:0}
.sk-pondart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sk-handle{position:absolute;right:-2px;bottom:8%;width:26px;height:26px;border-radius:50%;background:#fff;
  border:2px solid var(--water);box-shadow:0 2px 6px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;
  cursor:nwse-resize;font-size:12px;color:var(--water);z-index:6}
.sk-item{position:absolute;cursor:grab}
.sk-item svg{display:block;width:100%;height:100%;pointer-events:none}
.sk-item.water{filter:saturate(.94) brightness(.98) drop-shadow(0 3px 4px rgba(0,20,15,.45))}
.sk-item.surface{filter:drop-shadow(2px 4px 4px rgba(0,20,15,.4))}
.sk-item.edge{filter:drop-shadow(0 6px 5px rgba(20,40,20,.35))}
.sk-item.sel::after{content:"";position:absolute;inset:-6px;border:2px dashed rgba(255,255,255,.92);border-radius:10px}
.sk-drawlayer{position:absolute;inset:0;z-index:30;cursor:crosshair;touch-action:none}
.sk-drawlayer svg{position:absolute;inset:0;width:100%;height:100%}
.sk-selbar{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:none;gap:6px;
  background:rgba(10,35,28,.9);backdrop-filter:blur(6px);padding:6px;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.35);z-index:20}
.sk-selbar.on{display:flex}
.sk-selbar button{width:36px;height:36px;border:none;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sk-selbar button:active{background:rgba(255,255,255,.3)}
.sk-selbar .del{background:rgba(201,74,74,.4)}
.sk-hint{position:absolute;left:10px;top:10px;background:rgba(10,35,28,.62);color:#fff;font-size:11.5px;padding:6px 10px;border-radius:999px;pointer-events:none;transition:opacity .4s;z-index:35}
.sk-actions{display:flex;gap:8px;margin-bottom:12px}
.sk-actions .btn{margin:0}
.sk-lbl{font-size:11px;font-weight:800;color:var(--inkSoft);text-transform:uppercase;letter-spacing:.5px;margin:2px 0 6px}
.sk-row{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;-webkit-overflow-scrolling:touch}
.sk-shp{flex:0 0 auto;width:54px;height:44px;border-radius:12px;border:1.5px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:5px}
.sk-shp.on{border-color:var(--water);background:var(--waterLite)}
.sk-shp svg{width:100%;height:100%}
.sk-shp.draw{width:74px;gap:5px;font-size:12px;font-weight:800;color:var(--water)}
.sk-shp.draw svg{width:18px;height:18px;flex:0 0 auto}
.sk-tabs{display:flex;gap:6px;background:#dde9e2;padding:4px;border-radius:12px;margin-bottom:8px}
.sk-tab{flex:1;padding:8px 0;border:none;background:transparent;border-radius:9px;font-size:13px;font-weight:700;color:var(--inkSoft);cursor:pointer}
.sk-tab.on{background:#fff;color:var(--waterDeep);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.sk-swatch{flex:0 0 auto;width:58px;height:58px;border-radius:14px;border:1.5px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:7px}
.sk-swatch svg{width:100%;height:100%}
.sk-swatch:active{transform:scale(.94);background:var(--waterLite)}
.sk-clear{background:none;border:none;color:var(--danger);font-weight:700;font-size:13px;cursor:pointer;padding:0;text-decoration:underline}