/* Ark HomeOps — Apple-inspired design system */
:root{
  --bg:#f2f2f7;--surface:#ffffff;--surface2:#f2f2f7;--fill:rgba(120,120,128,.12);--sep:rgba(60,60,67,.14);
  --txt:#1c1c1e;--mut:#6e6e73;--acc:#007aff;--acc-t:rgba(0,122,255,.12);
  --green:#34c759;--orange:#ff9500;--red:#ff3b30;--purple:#af52de;--teal:#30b0c7;--pink:#ff2d55;
  --glass:rgba(249,249,251,.72);--shadow:0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.05);
  --r:18px;--side:268px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI",Roboto,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#000;--surface:#1c1c1e;--surface2:#2c2c2e;--fill:rgba(120,120,128,.24);--sep:rgba(84,84,88,.55);
  --txt:#f5f5f7;--mut:#98989f;--acc:#0a84ff;--acc-t:rgba(10,132,255,.2);
  --green:#30d158;--orange:#ff9f0a;--red:#ff453a;--purple:#bf5af2;--teal:#40c8e0;--pink:#ff375f;
  --glass:rgba(28,28,30,.72);--shadow:none;
}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:17px/1.4 var(--font);-webkit-font-smoothing:antialiased;letter-spacing:-.011em}
button{font-family:inherit}

/* ---------- layout ---------- */
.shell{min-height:100vh}
.side{position:fixed;top:0;bottom:0;left:0;width:var(--side);z-index:40;padding:calc(18px + env(safe-area-inset-top)) 14px 18px;
  background:var(--glass);backdrop-filter:saturate(180%) blur(30px);-webkit-backdrop-filter:saturate(180%) blur(30px);
  border-right:.5px solid var(--sep);display:flex;flex-direction:column;transform:translateX(-102%);transition:transform .38s cubic-bezier(.32,.72,0,1)}
.side.open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.25)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:39;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.show{opacity:1;pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 18px;font-weight:700;font-size:20px;letter-spacing:-.02em}
.brand i{width:34px;height:34px;border-radius:9px;background:linear-gradient(145deg,#34c759,#00a86b);display:grid;place-items:center;box-shadow:0 2px 8px rgba(52,199,89,.4)}
.brand i svg{width:20px;height:20px;stroke:#fff}
.side .group{font-size:12px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;padding:10px 12px 6px}
.nav-item{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;color:var(--txt);padding:8px 10px;border-radius:11px;font-size:16px;font-weight:500;text-align:left;cursor:pointer;margin-bottom:2px;transition:background .15s}
.nav-item:hover{background:var(--fill)}
.nav-item.on{background:var(--acc);color:#fff}
.nav-item .tile{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none}
.nav-item .tile svg{width:18px;height:18px;stroke:#fff}
.nav-item .lbl{flex:1}
.nav-item .badge{background:var(--red);color:#fff;border-radius:11px;font-size:12px;font-weight:600;min-width:22px;height:22px;display:grid;place-items:center;padding:0 6px}
.nav-item.on .badge{background:#fff;color:var(--acc)}
.side .foot{margin-top:auto;padding:10px;font-size:12px;color:var(--mut)}
.content{padding:0 0 60px}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:6px;height:calc(52px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0;
  background:var(--glass);backdrop-filter:saturate(180%) blur(30px);-webkit-backdrop-filter:saturate(180%) blur(30px);border-bottom:.5px solid transparent;transition:border-color .2s}
.topbar.scrolled{border-bottom-color:var(--sep)}
.topbar .ttl{flex:1;font-weight:600;font-size:17px;text-align:center;opacity:0;transition:opacity .2s}
.topbar.scrolled .ttl{opacity:1}
.iconbtn{width:40px;height:40px;border-radius:50%;border:0;background:var(--fill);color:var(--acc);display:grid;place-items:center;cursor:pointer;flex:none}
.iconbtn svg{width:20px;height:20px}
.iconbtn:active{opacity:.6}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
.titlerow{display:flex;align-items:flex-end;gap:10px;padding:6px 0 14px}
.titlerow h1{flex:1;margin:0;font-size:34px;line-height:1.1;font-weight:700;letter-spacing:-.03em}
.titlerow p{margin:4px 0 0;color:var(--mut);font-size:15px;font-weight:400;letter-spacing:0}
.titlerow .tt{flex:1}
.newbtn{display:none;align-items:center;gap:6px;background:var(--acc);color:#fff;border:0;border-radius:999px;padding:9px 16px 9px 12px;font-weight:600;font-size:15px;cursor:pointer;box-shadow:0 2px 10px var(--acc-t)}
.newbtn svg{width:16px;height:16px}
.newbtn:active{transform:scale(.96)}
@media(min-width:900px){
  .side{transform:none;box-shadow:none}.scrim{display:none}
  .content{margin-left:var(--side)}.menu{display:none}
  .topbar{height:20px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}.topbar .ttl,.topbar .iconbtn{display:none}
  .wrap{padding:0 32px}.titlerow h1{font-size:40px}
}

/* ---------- cards & rows ---------- */
.card{background:var(--surface);border-radius:var(--r);padding:12px 14px;margin-bottom:12px;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow);transition:transform .15s,background .15s}
.card.click,.card:has(.click){cursor:pointer}
.card.click:active{transform:scale(.985);background:var(--surface2)}
.card img.th,.card .ph{width:60px;height:60px;border-radius:14px;object-fit:cover;flex:none}
.card .ph{background:var(--surface2);display:grid;place-items:center;font-size:28px}
.card .b{flex:1;min-width:0}
.card .t{font-weight:600;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .s{color:var(--mut);font-size:14px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{display:inline-block;border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:600;background:var(--fill);color:var(--mut);margin:6px 4px 0 0}
.pill.ok{background:rgba(52,199,89,.16);color:var(--green)}
.pill.warn{background:rgba(255,149,0,.18);color:var(--orange)}
.pill.bad{background:rgba(255,59,48,.16);color:var(--red)}

.due{background:var(--surface);border-radius:var(--r);padding:14px 16px;margin-bottom:16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.due::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--orange)}
.due h3{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--orange);text-transform:uppercase;letter-spacing:.05em}
.due div{font-size:15px;padding:6px 0;display:flex;justify-content:space-between;gap:10px;align-items:center;border-top:.5px solid var(--sep)}
.due div:first-of-type{border-top:0}
.due .pill{margin:0;flex:none}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.stat{background:var(--surface2);border-radius:16px;padding:12px 6px;text-align:center}
.stat b{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em}
.stat span{font-size:12px;color:var(--mut)}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px}
@media(min-width:600px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tilecard{background:var(--surface);border-radius:var(--r);padding:14px;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s}
.tilecard:active{transform:scale(.97)}
.tilecard .tile{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:12px}
.tilecard .tile svg{width:19px;height:19px;stroke:#fff}
.tilecard b{display:block;font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1}
.tilecard span{color:var(--mut);font-size:14px}
h3.sec{font-size:13px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;margin:22px 4px 8px}
.empty{text-align:center;color:var(--mut);padding:56px 20px;font-size:16px}
.empty svg{width:46px;height:46px;stroke:var(--mut);opacity:.5;margin-bottom:10px}
.mut{color:var(--mut)}

/* ---------- controls ---------- */
.btn{background:var(--acc);color:#fff;border:0;border-radius:13px;padding:13px 16px;font-weight:600;font-size:16px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:transform .12s,opacity .12s}
.btn:active{transform:scale(.97);opacity:.85}
.btn.sec{background:var(--acc-t);color:var(--acc)}
.btn.danger{background:rgba(255,59,48,.14);color:var(--red)}
.btn.sm{padding:7px 13px;font-size:14px;border-radius:999px}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.row>*{flex:1;min-width:120px}
input,select,textarea{width:100%;background:var(--surface2);border:0;border-radius:12px;color:var(--txt);padding:13px 14px;font:inherit;font-size:17px;outline:none;transition:box-shadow .15s;-webkit-appearance:none;appearance:none}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px var(--acc-t),0 0 0 1.5px var(--acc)}
textarea{min-height:76px;resize:vertical}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
input::placeholder,textarea::placeholder{color:var(--mut);opacity:.7}
label{display:block;font-size:13px;font-weight:500;color:var(--mut);margin:14px 4px 6px}
.photo-pick{display:flex;align-items:center;gap:12px}
.photo-pick img{width:72px;height:72px;border-radius:14px;object-fit:cover}
.photo-pick label.btn{margin:0;color:var(--acc);font-size:15px;padding:11px 14px}

/* ---------- sheets ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:60;display:flex;align-items:flex-end;justify-content:center;animation:fade .25s}
.sheet{background:var(--surface);width:100%;max-width:600px;max-height:92vh;overflow:auto;border-radius:28px 28px 0 0;padding:8px 20px calc(24px + env(safe-area-inset-bottom));animation:up .42s cubic-bezier(.32,.72,0,1);overscroll-behavior:contain}
.sheet::before{content:"";display:block;width:38px;height:5px;border-radius:3px;background:var(--sep);margin:4px auto 14px}
.sheet h2{margin:0 0 4px;font-size:26px;font-weight:700;letter-spacing:-.025em}
@media(min-width:700px){.modal{align-items:center}.sheet{border-radius:26px;max-height:88vh;box-shadow:0 30px 80px rgba(0,0,0,.35)}.sheet::before{display:none}.sheet{padding-top:24px}}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.qr{display:block;margin:16px auto;width:210px;height:210px;background:#fff;border-radius:22px;padding:12px;box-shadow:0 4px 20px rgba(0,0,0,.12)}
.toast{position:fixed;left:50%;transform:translateX(-50%);top:calc(16px + env(safe-area-inset-top));background:var(--glass);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);padding:12px 20px;border-radius:999px;z-index:90;font-weight:600;font-size:15px;box-shadow:0 8px 30px rgba(0,0,0,.2);animation:drop .4s cubic-bezier(.32,.72,0,1)}
@keyframes drop{from{transform:translate(-50%,-30px);opacity:0}}

/* ---------- login ---------- */
.login{max-width:340px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:24px;text-align:center}
.login .logo{width:84px;height:84px;border-radius:22px;margin:0 auto 18px;background:linear-gradient(145deg,#34c759,#00a86b);display:grid;place-items:center;box-shadow:0 10px 30px rgba(52,199,89,.4)}
.login .logo svg{width:46px;height:46px;stroke:#fff}
.login h1{font-size:32px;margin:0;letter-spacing:-.03em}
.login p{margin:6px 0 22px;color:var(--mut)}
.login input{text-align:center;font-size:28px;letter-spacing:14px;padding:14px}
.search{position:relative;margin-bottom:14px}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--mut)}
.search input{padding-left:40px;background:var(--fill);font-size:17px}

/* =====================================================================
   Nature scenes, glass, dashboard widgets, refined forms
   ===================================================================== */
:root{--glassc:rgba(255,255,255,.76);--glassb:rgba(255,255,255,.3)}
@media (prefers-color-scheme:dark){:root{--glassc:rgba(28,28,30,.68);--glassb:rgba(255,255,255,.12)}}
body{background:#05080c}
.scene{position:fixed;inset:0;z-index:-1;overflow:hidden;perspective:1300px;opacity:0;transition:opacity .9s ease}
.scene.in{opacity:1}
.scene .sky{position:absolute;inset:0}
.scene .sun{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,var(--c) 0 16%,rgba(255,255,255,0) 64%);opacity:.9;
  transform:translate(-50%,-50%) translate3d(calc(var(--mx,0)*-34px),calc(var(--my,0)*-22px),0)}
.scene .stage{position:absolute;inset:0;transform-style:preserve-3d;transform:scale(1.08) rotateY(calc(var(--mx,0)*1.7deg)) rotateX(calc(var(--my,0)*-1.2deg));transition:transform .3s ease-out}
.scene .layer{position:absolute;left:-6%;right:-6%;top:0;bottom:0;will-change:transform;
  transform:translate3d(calc(var(--mx,0)*var(--d)*-340px),calc(var(--sy,0)*var(--d)*-1.7px),calc(var(--z)*14px))}
.scene .layer svg{width:100%;height:100%;display:block;filter:drop-shadow(0 -8px 22px rgba(0,0,0,.2))}
.scene .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.32) 0,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 62%,rgba(0,0,0,.28) 100%);pointer-events:none}
.scene .fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.scene .fx i{position:absolute;bottom:-14px;width:var(--s);height:var(--s);border-radius:50%;opacity:0;animation:rise var(--dur) linear var(--del) infinite}
.fx-fireflies i{background:#fff7a8;box-shadow:0 0 12px 4px rgba(255,247,140,.6)}
.fx-pollen i{background:rgba(255,255,230,.9);box-shadow:0 0 8px 2px rgba(255,255,200,.45)}
.fx-dust i{background:rgba(255,226,170,.85);box-shadow:0 0 8px 2px rgba(255,200,120,.35)}
.fx-mist i{width:calc(var(--s)*14);height:calc(var(--s)*3);background:rgba(255,255,255,.28);box-shadow:0 0 36px 20px rgba(255,255,255,.16);border-radius:50%;bottom:30%}
@keyframes rise{0%{transform:translate(0,0);opacity:0}12%{opacity:.95}88%{opacity:.8}100%{transform:translate(var(--dx),-108vh);opacity:0}}
.fx-mist i{animation-name:drift}
@keyframes drift{0%{transform:translateX(-10vw);opacity:0}20%{opacity:.8}80%{opacity:.7}100%{transform:translateX(110vw);opacity:0}}
@media (prefers-reduced-motion:reduce){.scene .fx{display:none}.scene .stage,.scene .layer{transform:none!important;transition:none}}

/* glass surfaces */
.card,.due,.tilecard,.glass,.empty{background:var(--glassc);-webkit-backdrop-filter:blur(24px) saturate(175%);backdrop-filter:blur(24px) saturate(175%);
  border:.5px solid var(--glassb);box-shadow:0 12px 32px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.35)}
.card,.tilecard,.glass-tilt{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .2s;transform-style:preserve-3d}
.card.tilted,.tilecard.tilted{box-shadow:0 22px 44px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.4)}
.empty{border-radius:var(--r);padding:48px 20px}
.titlerow h1,.titlerow p{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.4)}
.titlerow p{opacity:.92}
.search input{background:var(--glassc);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 6px 18px rgba(0,0,0,.14)}
.glass{border-radius:var(--r);padding:16px 18px}
.wrap.wide{max-width:1120px}
.today-grid{display:grid;grid-template-columns:1fr;gap:14px}
.today-grid .due{margin:0}
.span2{grid-column:1/-1}
@media(min-width:780px){.today-grid{grid-template-columns:1fr 1.15fr}}
.tilecard .tile{box-shadow:0 6px 14px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.35)}
.tilecard:hover{background:var(--glassc)}

/* weather */
.wx-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.wx-loc{display:flex;gap:6px;align-items:center;font-weight:600;font-size:14px;color:var(--mut)}
.wx-loc svg{width:15px;height:15px}
.wx-temp{font-size:72px;font-weight:200;letter-spacing:-.05em;line-height:1.02;margin-top:4px}
.wx-desc{font-size:18px;font-weight:600}
.wx-sub{color:var(--mut);font-size:14px;margin-top:2px}
.wx-ico svg{width:88px;height:88px;stroke-width:1.4;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.wx-meta{display:flex;gap:16px;margin:14px 0;color:var(--mut);font-size:14px;flex-wrap:wrap}
.wx-meta span{display:inline-flex;align-items:center;gap:5px}.wx-meta svg{width:16px;height:16px}
.wx-days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;text-align:center;border-top:.5px solid var(--sep);padding-top:12px}
.wx-days div{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:14px}
.wx-days span{color:var(--mut);font-size:12.5px;font-weight:600;text-transform:uppercase}
.wx-days i svg{width:28px;height:28px}.wx-days em{font-style:normal;color:var(--mut)}
.wx-sun{color:#ff9f0a}.wx-partly{color:#ffb340}.wx-cloud{color:#8e8e93}.wx-rain{color:#4cb4f0}.wx-snow{color:#8fd3f0}.wx-storm{color:#bf5af2}.wx-fog{color:#a1a1a6}

/* calendar */
.cal-head{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.cal-head h3{flex:1;margin:0;font-size:18px;display:flex;align-items:center;gap:8px;letter-spacing:-.02em}
.cal-head h3 svg,.news-head h3 svg{width:19px;height:19px;color:var(--acc)}
.iconbtn.sm{width:32px;height:32px}.iconbtn.sm svg{width:16px;height:16px}.iconbtn.txt{width:auto;padding:0 12px;font-size:14px;font-weight:600;border-radius:999px}
.cal-dow,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.cal-dow span{font-size:12px;font-weight:600;color:var(--mut);padding:6px 0}
.cal-grid{gap:3px}
.day{border:0;background:none;color:var(--txt);aspect-ratio:1/1;min-height:40px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:15px;cursor:pointer;transition:background .15s}
.day:hover{background:var(--fill)}
.day b{font-weight:500;width:28px;height:28px;display:grid;place-items:center;border-radius:50%}
.day.today b{background:var(--acc);color:#fff;font-weight:700}
.day.sel{background:var(--acc-t);box-shadow:inset 0 0 0 1.5px var(--acc)}
.day span{display:flex;gap:3px;height:5px}.day span i{width:5px;height:5px;border-radius:50%}
.cal-day{margin-top:10px;border-top:.5px solid var(--sep);padding-top:10px}
.cal-dayhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.cal-dayhead b{font-size:15px}.cal-dayhead .btn svg{width:14px;height:14px}
.ev{display:flex;align-items:center;gap:10px;padding:8px 2px;border-top:.5px solid var(--sep);font-size:15px}
.ev:first-of-type{border-top:0}
.ev i{width:9px;height:9px;border-radius:50%;flex:none}.ev span{flex:1}.ev em{font-style:normal;color:var(--mut);font-size:13px}.ev small{color:var(--mut);font-size:12px}
.ev.click{cursor:pointer}

/* news */
.news-head h3{margin:0 0 10px;font-size:18px;display:flex;align-items:center;gap:8px;letter-spacing:-.02em}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{border:0;background:var(--fill);color:var(--txt);padding:7px 14px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.chip.on{background:var(--acc);color:#fff}
.nrow{display:block;padding:11px 2px;border-top:.5px solid var(--sep);text-decoration:none;color:var(--txt)}
.nrow:first-child{border-top:0}.nrow:hover b{color:var(--acc)}
.nrow b{display:block;font-weight:600;font-size:15.5px;line-height:1.3}.nrow span{color:var(--mut);font-size:13px}
@media(min-width:780px){.news-list{columns:2;column-gap:28px}.nrow{break-inside:avoid}}

/* refined forms */
.sheet.form{padding-top:0;background:var(--surface)}
.fhead{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:6px;background:var(--surface);padding:14px 0 10px;margin-bottom:2px}
.fhead h2{flex:1;margin:0;text-align:center;font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linkbtn{background:none;border:0;color:var(--acc);font-size:17px;padding:6px 6px;cursor:pointer;min-width:64px}
.linkbtn.strong{font-weight:700;text-align:right}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.fld{min-width:0}.fld.full,.fsec{grid-column:1/-1}
.fsec{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin:24px 4px 0;padding-top:14px;border-top:.5px solid var(--sep)}
.segc{display:flex;background:var(--fill);border-radius:11px;padding:2px;gap:2px}
.segc button{flex:1;border:0;background:none;padding:10px 6px;border-radius:9px;font-size:14px;font-weight:500;color:var(--txt);cursor:pointer;transition:all .15s}
.segc button.on{background:var(--surface);box-shadow:0 1px 5px rgba(0,0,0,.22);font-weight:600}
.stepper{display:flex;align-items:center;background:var(--surface2);border-radius:12px;overflow:hidden}
.stepper button{width:52px;height:48px;border:0;background:none;font-size:26px;color:var(--acc);cursor:pointer}
.stepper button:active{background:var(--fill)}
.stepper input{background:none;text-align:center;padding:0;font-weight:700;font-size:19px;box-shadow:none!important;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.phototile{position:relative;border:2px dashed var(--sep);border-radius:18px;height:150px;overflow:hidden;display:grid;place-items:center;background:var(--surface2);margin-top:8px}
.phototile label{margin:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;height:100%;color:var(--acc);font-size:16px}
.phototile .pi svg{width:32px;height:32px}.phototile b{font-weight:600;color:var(--acc)}.phototile small{color:var(--mut);font-size:12px;font-weight:400}
.phototile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phototile.has{border-style:solid;border-color:transparent;height:200px}
.phototile.has label{position:absolute;inset:auto 10px 10px auto;width:auto;height:auto;flex-direction:row;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:7px 14px;color:#fff}
.phototile.has b{color:#fff;font-size:14px}.phototile.has .pi{display:none}
.locrow{display:flex;gap:8px}.locrow input{flex:1}
.sheet h2{margin-bottom:4px}
@media(max-width:420px){.fgrid{gap:0 8px}}

/* =====================================================================
   Box Art Badges, Full Photo View, Lightbox, & Viewfinder Framing Mask
   ===================================================================== */

/* ---------- Phototile (Uncropped Full-View Presentation) ---------- */
.phototile {
  position: relative;
  border: 2px dashed var(--sep);
  border-radius: 18px;
  min-height: 150px;
  overflow: hidden;
  background: var(--surface2);
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.phototile.empty-tile {
  padding: 16px;
}
.photo-picker-actions {
  display: flex;
  flex-direction: row;
  gap: 12px;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}
.photo-picker-actions .btn {
  flex: 1;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  border-radius: 14px;
  gap: 4px;
  text-align: center;
}
.photo-picker-actions .btn .btn-ic svg {
  width: 28px;
  height: 28px;
}
.photo-picker-actions .btn b {
  font-size: 14.5px;
  font-weight: 600;
}
.photo-picker-actions .btn small {
  font-size: 11px;
  opacity: 0.75;
  font-weight: 400;
}

.phototile.has {
  border-style: solid;
  border-color: var(--sep);
  min-height: 240px;
  max-height: 460px;
  background: #06090e;
  box-shadow: 0 8px 28px rgba(0,0,0,0.3);
  padding: 0;
  height: auto;
}
.photo-ambient {
  position: absolute;
  inset: -20px;
  background-size: cover;
  background-position: center;
  filter: blur(28px) brightness(0.35) saturate(1.5);
  opacity: 0.7;
  transform: scale(1.15);
  pointer-events: none;
}
.photo-contain-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  max-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  cursor: zoom-in;
}
.photo-main {
  max-width: 100%;
  max-height: 420px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  display: block;
}
.photo-overlay-bar {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  z-index: 5;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  pointer-events: auto;
}
.photo-overlay-bar .btn {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.photo-overlay-bar .btn:hover {
  background: rgba(0,0,0,0.85);
}
.photo-overlay-bar .btn.danger {
  background: rgba(239, 68, 68, 0.7);
}

/* ---------- Box Hero in showBox ---------- */
.box-hero {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--surface2);
  border-radius: var(--r);
  padding: 14px 16px;
  margin: 12px 0 16px;
  border: 1px solid var(--sep);
}
.box-hero-badge {
  flex: none;
}
.box-hero-badge .box-art {
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.25));
}
.box-hero-img {
  width: 88px;
  height: 88px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  flex: none;
  cursor: zoom-in;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.box-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.box-hero-img .zoom-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border-radius: 6px;
  font-size: 10px;
  padding: 2px 4px;
}
.box-hero-info {
  flex: 1;
  min-width: 0;
}
.box-hero-info h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.box-hero-info .box-notes {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--mut);
  line-height: 1.35;
}

/* ---------- Box List Thumbnail & Item Photo Zoom Cues ---------- */
.item-th-wrap {
  position: relative;
  cursor: zoom-in;
  flex: none;
}
.item-th-wrap .th-zoom-hint {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 9px;
  border-radius: 4px;
  padding: 1px 3px;
  opacity: 0;
  transition: opacity 0.15s;
}
.item-th-wrap:hover .th-zoom-hint {
  opacity: 1;
}
.item-card {
  align-items: center;
}
.item-card .b.click-edit {
  cursor: pointer;
}
.qty-badge {
  display: inline-block;
  background: var(--acc-t);
  color: var(--acc);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  margin-left: 4px;
}
.box-art {
  border-radius: 14px;
  transition: transform 0.18s ease;
}
.box-art:hover {
  transform: scale(1.04);
}

/* ---------- Lightbox (Full-Screen Photo Zoom) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  animation: fade 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
}
.lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
  z-index: 10;
  background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
}
.lightbox-title {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  padding-right: 16px;
}
.lightbox-title small {
  display: block;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 400;
}
.lightbox-stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 12px;
  cursor: grab;
}
.lightbox-stage:active {
  cursor: grabbing;
}
.lightbox-img {
  max-width: 95vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  transition: transform 0.15s ease-out;
  transform-origin: center center;
}
.lightbox-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  z-index: 10;
  background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
}
.lightbox-controls .btn {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
}

/* ---------- Camera Viewfinder with Framing Mask ---------- */
.camera-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fade 0.25s ease;
}
.cam-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}
.cam-pill {
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #34c759;
  border: 1px solid rgba(52, 199, 89, 0.4);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cam-feed-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cam-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.viewfinder-mask-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.viewfinder-cutout {
  position: relative;
  width: 82vw;
  max-width: 420px;
  aspect-ratio: 4/3;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.68);
  border-radius: 16px;
}
.viewfinder-cutout.square {
  aspect-ratio: 1/1;
  max-width: 360px;
}
/* Corner reticles */
.viewfinder-cutout::before, .viewfinder-cutout::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: #34c759;
  border-style: solid;
  pointer-events: none;
}
.viewfinder-cutout::before {
  top: -2px;
  left: -2px;
  border-width: 3.5px 0 0 3.5px;
  border-top-left-radius: 12px;
}
.viewfinder-cutout::after {
  top: -2px;
  right: -2px;
  border-width: 3.5px 3.5px 0 0;
  border-top-right-radius: 12px;
}
.corner-bottom-left, .corner-bottom-right {
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: #34c759;
  border-style: solid;
  pointer-events: none;
}
.corner-bottom-left {
  bottom: -2px;
  left: -2px;
  border-width: 0 0 3.5px 3.5px;
  border-bottom-left-radius: 12px;
}
.corner-bottom-right {
  bottom: -2px;
  right: -2px;
  border-width: 0 3.5px 3.5px 0;
  border-bottom-right-radius: 12px;
}
/* Center crosshair */
.reticle-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  opacity: 0.65;
}
.reticle-center::before, .reticle-center::after {
  content: "";
  position: absolute;
  background: #34c759;
}
.reticle-center::before {
  top: 0;
  bottom: 0;
  left: 9px;
  width: 2px;
}
.reticle-center::after {
  left: 0;
  right: 0;
  top: 9px;
  height: 2px;
}
/* Rule of Thirds grid */
.viewfinder-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  border-radius: 16px;
  overflow: hidden;
  opacity: 0.35;
}
.viewfinder-grid div {
  border: 0.5px solid rgba(255,255,255,0.4);
}

.cam-bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 16px 24px calc(24px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
}
.shutter-btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: transparent;
  padding: 4px;
  cursor: pointer;
  transition: transform 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shutter-btn:active {
  transform: scale(0.92);
}
.shutter-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  transition: background 0.15s ease;
}
.shutter-btn:hover .shutter-inner {
  background: #f1f5f9;
}

/* Flash screen animation */
.cam-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
}
.cam-flash.pop {
  animation: flashAnim 0.3s ease-out;
}
@keyframes flashAnim {
  0% { opacity: 0.95; }
  100% { opacity: 0; }
}

/* Review screen */
.cam-review {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 30;
  display: flex;
  flex-direction: column;
}
.cam-review-img-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cam-review-img-stage img {
  max-width: 90vw;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  border: 2px solid #34c759;
}
.cam-review-bar {
  display: flex;
  gap: 16px;
  padding: 16px 24px calc(24px + env(safe-area-inset-bottom));
  background: rgba(15, 23, 42, 0.9);
  justify-content: center;
}
.cam-review-bar .btn {
  flex: 1;
  max-width: 200px;
}