:root{
  color-scheme:light;
  --bg:#F5E1DE;--bg-2:#EFD3CF;
  --surface:#FDF8F6;--surface-2:#F8EBE7;
  --ink:#3E2328;--ink-2:#74555A;--ink-3:#9E8288;
  --brass:#B08442;--brass-2:#8E6A32;--brass-soft:#E6D2AE;
  --line:#E2C6C0;--line-brass:#D8BC8C;
  --accent:#A63A56;--accent-ink:#87263F;--accent-soft:#F6DFE4;
  --sage:#5E7154;--sage-soft:#E6EBDE;
  --star:#B08442;
  --script:"Parisienne","Brush Script MT",cursive;
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --shadow:0 16px 40px rgba(96,48,52,.14);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
img{max-width:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;font-weight:400;line-height:1.55}
a{color:var(--accent-ink)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}

.eyebrow{font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-2)}
.panel{background:var(--surface);border:1px solid var(--line-brass);border-radius:6px}
.panel-title{font-family:var(--display);font-size:15px;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:14px 16px 12px;border-bottom:1px solid var(--line-brass);color:var(--ink)}

.site-head{padding:26px 0 0}
.head-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.head-links{display:flex;gap:12px}
.head-links a{color:var(--ink-2);line-height:0;padding:6px;border-radius:50%}
.head-links a:hover{color:var(--accent)}
.head-links svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5}
.wordmark{text-align:center}
.wordmark .script{display:block;font-family:var(--script);font-size:clamp(34px,5vw,50px);line-height:1;color:var(--ink)}
.wordmark .sub{display:block;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-2);margin-top:6px}
.head-right{justify-self:end;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-align:right}

.navbar{margin:22px 0 0;background:var(--surface);border:1px solid var(--line-brass);border-radius:6px;display:flex;justify-content:center;gap:2px;padding:6px;overflow-x:auto;scrollbar-width:none}
.navbar::-webkit-scrollbar{display:none}
.nav-btn{border:0;background:transparent;cursor:pointer;text-decoration:none;padding:9px 15px;border-radius:4px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;display:inline-flex;align-items:baseline;gap:6px}
.nav-btn i{font-style:normal;font-size:10px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.nav-btn:hover{color:var(--accent)}
.nav-btn[aria-pressed="true"]{background:var(--ink);color:#FBF3F0}
.nav-btn[aria-pressed="true"] i{color:#FBF3F0;opacity:.65}

.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0 4px}
.search{flex:1 1 300px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line-brass);border-radius:999px;padding:9px 16px;min-width:0}
.search svg{width:16px;height:16px;flex:none;color:var(--brass-2);fill:none;stroke:currentColor;stroke-width:1.9}
.search input{flex:1;border:0;background:transparent;color:var(--ink);font:inherit;font-size:15px;min-width:0}
.search input:focus{outline:none}
.search input::placeholder{color:var(--ink-3)}
.search .clear{border:0;background:transparent;color:var(--ink-3);cursor:pointer;font-size:18px;line-height:1;padding:2px 4px}
.sort{border:1px solid var(--line-brass);background:var(--surface);color:var(--ink);border-radius:999px;padding:9px 14px;font:inherit;font-size:13px}
.tchip{border:1px solid var(--line-brass);background:var(--surface);border-radius:999px;padding:8px 14px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;min-height:38px}
.tchip b{font-weight:500;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tchip svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9}
.tchip.fav[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.tchip.fav[aria-pressed="true"] b,.tchip.made[aria-pressed="true"] b{color:#fff;opacity:.75}
.tchip.fav[aria-pressed="true"] svg{fill:currentColor}
.tchip.made[aria-pressed="true"]{background:var(--sage);border-color:var(--sage);color:#fff}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 282px;gap:20px;align-items:start;padding:18px 0 34px}
.feed{display:grid;gap:14px;min-width:0}
.results{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums;padding:6px 2px 0}

.featured{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 288px;height:300px;gap:0;background:var(--surface);border:1px solid var(--line-brass);border-radius:6px;overflow:hidden;text-align:left}
.featured:hover{border-color:var(--brass)}
.featured .f-text{padding:22px 24px 20px;display:flex;flex-direction:column;gap:11px;justify-content:center}
.featured h2{font-size:clamp(24px,2.6vw,31px);line-height:1.15;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.featured .excerpt{margin:0;color:var(--ink-2);font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.featured .f-img{background:var(--surface-2);position:relative}
.featured .f-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.f-tag{position:absolute;top:12px;left:12px;background:rgba(253,248,246,.92);border:1px solid var(--line-brass);border-radius:999px;padding:4px 11px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-2)}

.tiles{padding:14px}
.tiles-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tile{border:1px solid var(--line-brass);border-radius:5px;overflow:hidden;background:var(--surface-2);cursor:pointer;padding:0;display:block;text-align:center}
.tile:hover{border-color:var(--brass)}
.tile img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.tile span{display:block;padding:8px 6px;font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);border-top:1px solid var(--line-brass)}
.tile[aria-pressed="true"] span{background:var(--ink);color:#FBF3F0}

.list{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.rcard{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 168px;height:158px;background:var(--surface);border:1px solid var(--line-brass);border-radius:6px;overflow:hidden;text-align:left}
.rcard:hover{border-color:var(--brass)}
.rcard.is-made{border-color:var(--sage)}
.rcard .r-text{padding:14px 16px 12px;display:flex;flex-direction:column;gap:7px;min-width:0}
.rcard h3{font-size:18px;line-height:1.22;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rcard .r-img{background:var(--surface-2);position:relative}
.rcard .mchips{flex-wrap:nowrap;overflow:hidden}
.rcard .r-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rcard.no-img{grid-template-columns:minmax(0,1fr)}

.mchips{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:9.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.mchips span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.mchips svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.9;flex:none}
.r-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:2px}
.mine-marks{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mine-marks:empty{display:none}
.stars-static{color:var(--star);font-size:12px;letter-spacing:.08em;line-height:1;white-space:nowrap}
.stars-static i{color:var(--line);font-style:normal}
.made-mark{display:inline-flex;align-items:center;gap:5px;color:var(--sage);background:var(--sage-soft);border-radius:3px;padding:2px 7px;font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.made-mark svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:3}
.note-mark{color:var(--ink-3);display:inline-flex;line-height:0}
.note-mark svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6}
.qacts{display:flex;gap:6px;flex:none;position:relative;z-index:2}
.card-link{color:inherit;text-decoration:none}
.card-link::after{content:"";position:absolute;inset:0;z-index:1}
.rcard:focus-within,.featured:focus-within{border-color:var(--brass)}
.r-img,.f-img,.rel-img{display:block}
.qa{border:1px solid var(--line-brass);background:var(--surface);border-radius:50%;width:30px;height:30px;cursor:pointer;display:grid;place-items:center;color:var(--ink-3);padding:0;-webkit-tap-highlight-color:transparent}
.qa svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9}
.qa.h[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}
.qa.h[aria-pressed="true"] svg{fill:currentColor}
.qa.m[aria-pressed="true"]{background:var(--sage);border-color:var(--sage);color:#fff}

.more{border:1px solid var(--line-brass);background:var(--surface);border-radius:999px;padding:12px 26px;cursor:pointer;justify-self:center;margin:8px 0 0;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.more:hover{border-color:var(--brass);color:var(--accent)}
.empty{text-align:center;padding:52px 20px;color:var(--ink-2)}
.empty b{display:block;font-family:var(--display);font-weight:400;font-size:23px;color:var(--ink);margin-bottom:8px}

.side{display:grid;gap:14px;position:sticky;top:16px}
.side-list{padding:6px 14px 12px}
.side-item{display:grid;grid-template-columns:52px minmax(0,1fr);gap:11px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);text-align:left;text-decoration:none;color:inherit}
.side-item:last-child{border-bottom:0}
.side-item img{width:52px;height:52px;object-fit:cover;border-radius:3px;border:1px solid var(--line-brass);display:block}
.side-item .ph{width:52px;height:52px;border-radius:3px;background:var(--surface-2);border:1px solid var(--line-brass)}
.side-item-text{display:block;min-width:0}
.side-item b{display:block;font-family:var(--display);font-weight:400;font-size:13.5px;line-height:1.25;margin-top:3px;color:var(--ink)}
.side-item:hover b{color:var(--accent)}
.side-item .stars-static{font-size:11px;margin-top:3px;display:block}
.stat-rows{padding:6px 16px 12px}
.stat-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.stat-row:last-child{border-bottom:0}
.stat-row b{font-family:var(--display);font-weight:400;font-size:19px;color:var(--ink);letter-spacing:0;font-variant-numeric:tabular-nums}
.stat-row.sage b{color:var(--sage)}
.side-body{padding:14px 16px 16px;display:grid;gap:11px}
.side-body p{margin:0;font-size:13.5px;color:var(--ink-2)}
.pill-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;text-decoration:none;border-radius:999px;padding:10px 16px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;min-height:40px}
.pill-link:hover{background:var(--accent-ink)}
.pill-link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9}
.ghost-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line-brass);background:var(--surface);color:var(--ink-2);text-decoration:none;border-radius:999px;padding:9px 16px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;min-height:38px;cursor:pointer}
.ghost-link:hover{border-color:var(--brass);color:var(--accent)}
.side-note{font-size:11.5px;color:var(--ink-3);line-height:1.5;margin:0}
.side-foot{padding:0 16px 14px;display:grid;gap:8px;justify-items:start}
.quiet-link{border:0;background:transparent;padding:0;color:var(--ink-3);font-size:11.5px;text-decoration:underline;cursor:pointer}
.quiet-link:hover{color:var(--accent)}

.site-foot{border-top:1px solid var(--line-brass);padding:20px 0 40px;display:grid;gap:8px}
.site-foot p{margin:0;font-size:12.5px;color:var(--ink-3);max-width:78ch}


.mine{background:var(--surface-2);border:1px solid var(--line-brass);border-radius:6px;padding:14px 16px 16px;display:grid;gap:12px}
.mine-head{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.mine-head h4{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-2);font-family:var(--body)}
.saved{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);opacity:0;transition:opacity .2s}
.saved.on{opacity:1}
.mine-row{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.made-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-brass);background:var(--surface);border-radius:999px;padding:9px 15px;cursor:pointer;color:var(--ink-2);min-height:38px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.made-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.8}
.made-btn[aria-pressed="true"]{background:var(--sage);border-color:var(--sage);color:#fff}
.rate{display:flex;align-items:center;gap:9px}
.rate-label{font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.stars{display:flex;gap:2px}
.star{border:0;background:transparent;cursor:pointer;padding:5px 2px;line-height:0;color:var(--line)}
.star svg{width:21px;height:21px;fill:currentColor;stroke:none;display:block}
.star.on{color:var(--star)}
.rate-clear{border:0;background:transparent;color:var(--ink-3);font-size:11px;cursor:pointer;text-decoration:underline;padding:4px}
.note-field{width:100%;border:1px solid var(--line-brass);background:var(--surface);color:var(--ink);border-radius:5px;padding:11px 13px;font:inherit;font-size:15px;line-height:1.55;resize:vertical;min-height:72px}
.note-field::placeholder{color:var(--ink-3)}

.section h4{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-2);margin:0 0 11px;font-family:var(--body)}
.intro{color:var(--ink-2);white-space:pre-line;margin:0;max-width:66ch}
.ing-list{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.ing-list li{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border-bottom:1px dotted var(--line)}
.ing-list li.h{border:0;font-family:var(--display);font-size:15px;color:var(--ink);padding-top:14px}
.ing-list li:first-child.h{padding-top:0}
.ing-list input{margin:6px 0 0;accent-color:var(--accent);flex:none}
.ing-list label{cursor:pointer}
.ing-list input:checked+label{color:var(--ink-3);text-decoration:line-through}
.steps{white-space:pre-line;margin:0;max-width:66ch;line-height:1.68}
details summary{cursor:pointer;color:var(--ink-2);font-size:13px;letter-spacing:.04em}
details pre{white-space:pre-wrap;font:inherit;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:14px 16px;margin:10px 0 0;font-size:14px;line-height:1.6}

@media (max-width:980px){
  .layout{grid-template-columns:minmax(0,1fr);gap:16px}
  .side{position:static}
  .featured{grid-template-columns:minmax(0,1fr) 232px;height:274px}
}
@media (max-width:820px){
  .list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .wrap{padding:0 14px}
  .site-head{padding-top:16px}
  .navbar{margin-top:16px;justify-content:flex-start;border-radius:6px}
  .nav-btn{padding:9px 12px;font-size:10.5px}
  .toolbar{gap:8px;margin-top:12px}
  .search{flex-basis:100%}
  .search input{font-size:16px}
  .tchip{flex:1 1 auto;justify-content:center;padding:8px 10px;font-size:10px}
  .sort{flex:1 1 100%;font-size:13px}
  .featured{grid-template-columns:minmax(0,1fr);height:auto;border-radius:6px}
  .featured .f-text{padding:16px 16px 18px;order:2}
  .featured .f-img{order:1;aspect-ratio:4/3}
  .featured h2{font-size:23px}
  .tiles{padding:12px}
  .tiles-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .list{grid-template-columns:minmax(0,1fr)}
  .rcard{grid-template-columns:minmax(0,1fr) 134px;height:148px}
  .rcard .r-text{padding:12px 13px 11px;gap:6px}
  .rcard h3{font-size:17px;line-height:1.2}
  .mchips{gap:5px 10px;font-size:9px}
  .r-foot{flex-wrap:wrap;gap:8px}
  .qa{width:34px;height:34px}
  .results{padding-top:2px}
  .note-field{font-size:16px}
}
@media (prefers-reduced-motion: reduce){.saved{transition:none}}

/* ---------- stranica recepta ---------- */
.crumbs{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:16px 0 0}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.recipe-layout{display:grid;grid-template-columns:minmax(0,1fr) 282px;gap:20px;align-items:start;padding:14px 0 34px}
.recipe{background:var(--surface);border:1px solid var(--line-brass);border-radius:6px;overflow:hidden;min-width:0}
.r-top{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:stretch}
.r-top-text{padding:24px 26px 22px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.r-top h1{font-size:clamp(25px,3vw,35px);line-height:1.12;text-wrap:balance}
.r-hero{margin:0;background:var(--surface-2);position:relative;min-height:280px}
.r-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.recipe-body{padding:22px 26px 28px;display:grid;gap:24px;border-top:1px solid var(--line-brass)}
.recipe-body h2{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-2);margin:0 0 11px;font-family:var(--body)}
.ing-cols{columns:2;column-gap:34px}
.ing-cols .ing-list{break-inside:avoid}
.ig-link{display:inline-flex;align-items:center;gap:8px;align-self:start;border:1px solid var(--line-brass);background:var(--surface-2);color:var(--ink-2);text-decoration:none;border-radius:999px;padding:10px 17px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.ig-link:hover{border-color:var(--brass);color:var(--accent)}
.r-pager{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px}
.pager-link{display:grid;gap:3px;text-decoration:none;max-width:47%;min-width:0}
.pager-link.next{text-align:right;justify-items:end}
.pager-link span{font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.pager-link b{font-family:var(--display);font-weight:400;font-size:15px;color:var(--ink);line-height:1.25}
.pager-link:hover b{color:var(--accent)}
.related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:14px}
.rel{display:block;border:1px solid var(--line-brass);border-radius:5px;overflow:hidden;background:var(--surface-2);text-decoration:none}
.rel:hover{border-color:var(--brass)}
.rel-img{position:relative;aspect-ratio:1;background:var(--surface-2)}
.rel-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rel b{display:block;padding:9px 10px 11px;font-family:var(--display);font-weight:400;font-size:13.5px;line-height:1.25;color:var(--ink);border-top:1px solid var(--line-brass);background:var(--surface)}
@media (max-width:980px){
  .recipe-layout{grid-template-columns:minmax(0,1fr)}
  .r-top{grid-template-columns:minmax(0,1fr) 240px}
  .r-hero{min-height:250px}
}
@media (max-width:640px){
  .crumbs{padding-top:12px;font-size:10px}
  .recipe-layout{gap:14px;padding-top:10px}
  .r-top{grid-template-columns:minmax(0,1fr)}
  .r-top-text{padding:16px 16px 18px;order:2}
  .r-hero{order:1;min-height:0;aspect-ratio:4/3}
  .r-top h1{font-size:24px}
  .recipe-body{padding:16px 16px 24px;gap:20px}
  .ing-cols{columns:1}
  .related-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px}
  .pager-link{max-width:100%}
}

.noscript-list{background:var(--surface);border:1px solid var(--line-brass);border-radius:6px;padding:16px 18px;margin:14px 0}
.noscript-list h2{font-size:15px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px}
.noscript-list ul{margin:0;padding-left:18px;columns:2;column-gap:28px;font-size:13.5px}
.noscript-list a{color:var(--accent-ink)}
@media (max-width:640px){.noscript-list ul{columns:1}}

/* ---------- nalog i prijava ---------- */
.head-right{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.head-note{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-align:right;line-height:1.5}
.auth-slot{display:flex;justify-content:flex-end}
.signin-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:999px;padding:8px 17px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;min-height:38px}
.signin-btn:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.signin-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;flex:none}
.user-chip.pending{opacity:.6}
.user-chip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-brass);background:var(--surface);border-radius:999px;padding:4px 12px 4px 4px;max-width:100%}
.avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;display:block;flex:none;border:1px solid var(--line)}
.avatar-ph{display:grid;place-items:center;background:var(--accent);color:#fff;font-size:13px;font-weight:600;font-family:var(--body)}
.uname{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.link-btn{border:0;background:transparent;color:var(--ink-3);font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:4px 2px;text-decoration:underline}
.link-btn:hover{color:var(--accent)}

.auth-dlg{position:fixed;inset:0;margin:auto;width:100%;max-width:min(420px,calc(100vw - 28px));max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;border:1px solid var(--line-brass);padding:26px 26px 22px;background:var(--surface);color:var(--ink);border-radius:10px;box-shadow:var(--shadow)}
.auth-dlg::backdrop{background:rgba(62,35,40,.5)}
.auth-dlg h2{font-size:23px;margin:0 0 8px}
.auth-dlg p{margin:0 0 15px;color:var(--ink-2);font-size:14px;line-height:1.5}
.auth-close{position:absolute;top:10px;right:12px;border:0;background:transparent;font-size:22px;line-height:1;color:var(--ink-3);cursor:pointer;padding:4px 8px}
.auth-close:hover{color:var(--accent)}
.google-btn{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;border:1px solid #C8BDB8;background:#fff;color:#2C2119;border-radius:999px;padding:12px 18px;font-size:14.5px;font-weight:500;cursor:pointer;min-height:48px}
.google-btn:hover{background:#F7F2F0}
.google-btn:disabled{opacity:.6;cursor:default}
.gicon{width:19px;height:19px;flex:none}
.auth-err{color:#A6303B;font-size:13px;margin:12px 0 0}
.auth-fine{font-size:11.5px;color:var(--ink-3);margin:12px 0 0;line-height:1.45}

.mine.locked .made-btn,.mine.locked .stars,.mine.locked .note-field{opacity:.55}
.mine.locked .note-field{cursor:pointer}
.mine-lock{margin:0;font-size:12.5px;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:6px}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(12px);background:var(--ink);color:#FBF3F0;padding:12px 20px;border-radius:999px;font-size:13.5px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion: reduce){.toast{transition:none}}

@media (max-width:640px){
  .head-right{display:flex;gap:0}
  .head-note{display:none}
  .uname{max-width:80px}
  .auth-dlg{padding:20px 17px 17px;max-width:calc(100vw - 24px)}
  .auth-dlg h2{font-size:21px}
  .auth-dlg p{font-size:13.5px}
}

/* ---------- tagovi ---------- */
.tag-chips{display:flex;flex-wrap:wrap;gap:6px}
.tag-chip{display:inline-flex;align-items:center;border:1px solid var(--line-brass);background:var(--surface-2);color:var(--brass-2);border-radius:999px;padding:3px 11px;font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.tag-chip:hover{border-color:var(--brass);background:var(--surface);color:var(--accent)}

/* ---------- admin ---------- */
.admin-body .wrap{max-width:1280px}
.admin-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:18px 0 14px;border-bottom:1px solid var(--line-brass)}
.admin-head > div:first-child{display:flex;align-items:baseline;gap:12px}
.wordmark.small .script{font-size:30px}
.wordmark.small{text-decoration:none}
.admin-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-2)}
.admin-user{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-2)}

.gate{max-width:440px;margin:44px auto;padding:28px 26px;text-align:center}
.gate h1{font-size:26px;margin:0 0 10px}
.gate p{color:var(--ink-2);font-size:14px;margin:0 0 18px}

.admin-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:16px 0 12px}
.admin-tabs{display:flex;gap:6px}
.admin-tab{border:1px solid var(--line-brass);background:var(--surface);border-radius:999px;padding:8px 18px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;color:var(--ink-2)}
.admin-tab[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#FBF3F0}
.admin-status{font-size:13px;color:var(--ink-2)}
.admin-status.ok{color:var(--sage)}
.admin-status.err{color:#A6303B}
.admin-note{font-size:12px;color:var(--ink-3)}
.admin-empty{color:var(--ink-2);padding:26px;margin:0;text-align:center}

.admin-layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;align-items:start;padding-bottom:40px}
.admin-side{position:sticky;top:12px;max-height:calc(100vh - 24px);display:flex;flex-direction:column;overflow:hidden}
.admin-filters{display:grid;gap:8px;padding:14px 14px 10px;border-bottom:1px solid var(--line-brass)}
.admin-filters input,.admin-filters select{border:1px solid var(--line-brass);background:var(--surface);color:var(--ink);border-radius:6px;padding:9px 12px;font:inherit;font-size:14px;width:100%}
.admin-list{overflow-y:auto;padding:6px}
.arow{display:grid;gap:3px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:transparent;cursor:pointer;padding:10px 10px}
.arow:last-child{border-bottom:0}
.arow:hover{background:var(--surface-2)}
.arow.on{background:var(--accent-soft)}
.arow-title{font-family:var(--display);font-size:15px;line-height:1.25;color:var(--ink)}
.arow-meta{font-size:11px;color:var(--ink-3)}

.admin-main{padding:20px 22px 24px}
.editor-head{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.editor-head code{font-size:12px;color:var(--ink-3);background:var(--surface-2);border-radius:4px;padding:3px 8px}
.editor-links{display:flex;gap:14px;font-size:12px}
.field{display:grid;gap:6px;margin-bottom:16px}
.field > span{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-2)}
.field input,.field textarea{border:1px solid var(--line-brass);background:var(--surface);color:var(--ink);border-radius:6px;padding:10px 12px;font:inherit;font-size:15px;line-height:1.5;width:100%;resize:vertical}
.tag-picks{display:flex;flex-wrap:wrap;gap:8px}
.tag-pick{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-brass);background:var(--surface);border-radius:999px;padding:7px 14px;font-size:13px;cursor:pointer}
.tag-pick:has(input:checked){background:var(--ink);border-color:var(--ink);color:#FBF3F0}
.tag-pick input{accent-color:var(--accent)}
.img-row{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.img-preview{width:110px;height:130px;border:1px solid var(--line-brass);border-radius:6px;overflow:hidden;background:var(--surface-2);display:grid;place-items:center}
.img-preview img{width:100%;height:100%;object-fit:cover;display:block}
.editor-actions{display:flex;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding-top:16px}
.pill-btn{border:1px solid var(--ink);background:var(--ink);color:#FBF3F0;border-radius:999px;padding:11px 22px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;min-height:42px}
.pill-btn:disabled{opacity:.6;cursor:default}
.danger-btn{border:1px solid #A6303B;background:transparent;color:#A6303B;border-radius:999px;padding:11px 20px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;min-height:42px}
.danger-btn:hover{background:#A6303B;color:#fff}

.add-tag{display:flex;flex-wrap:wrap;gap:10px}
.add-tag input{flex:1 1 240px;border:1px solid var(--line-brass);background:var(--surface);color:var(--ink);border-radius:6px;padding:10px 12px;font:inherit;font-size:15px}
.tag-table{display:grid;gap:0;margin:6px 0}
.tag-row{display:grid;grid-template-columns:minmax(0,1fr) auto 56px auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.tag-row:last-child{border-bottom:0}
.tag-row-name{font-family:var(--display);font-size:16px}
.tag-row code{font-size:12px;color:var(--ink-3)}
.tag-row-count{font-variant-numeric:tabular-nums;text-align:right;color:var(--ink-2);font-size:13px}
.tag-row button:disabled{opacity:.4;cursor:default;text-decoration:none}

@media (max-width:900px){
  .admin-layout{grid-template-columns:minmax(0,1fr)}
  .admin-side{position:static;max-height:none}
  .admin-list{max-height:340px}
}
@media (max-width:640px){
  .admin-main{padding:16px 14px 20px}
  .field input,.field textarea{font-size:16px}
  .tag-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
}