/* ============================================================
   Nino portfolio — phone frame + screen toolkit
   Every site sets its own theme through CSS variables on .s:
   --bg --fg --mut --ac --ac2 --card --line --r --fd --fb
   Screens are 270px wide (logical). Keep text >= 10px.
   ============================================================ */

/* ---------- phone frame ---------- */
.phone{width:270px;flex:none;background:#0d0e11;border-radius:46px;padding:9px;position:relative;
  box-shadow:0 0 0 1.5px #3a3c44 inset,0 0 0 3px #1c1d22,0 30px 50px -24px rgba(22,24,29,.55)}
.phone::before{content:"";position:absolute;left:-3px;top:110px;width:3px;height:44px;border-radius:2px 0 0 2px;background:#2a2c33}
.phone::after{content:"";position:absolute;right:-3px;top:140px;width:3px;height:70px;border-radius:0 2px 2px 0;background:#2a2c33}
.screen{position:relative;width:252px;height:546px;border-radius:37px;overflow:hidden;background:var(--bg,#fff);display:flex;flex-direction:column;isolation:isolate}
.sb{height:38px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:6px 22px 0 26px;font:600 12px/1 -apple-system,"SF Pro Text","Instrument Sans",system-ui,sans-serif;color:var(--sbfg,var(--fg,#16181d));position:relative;z-index:3;background:var(--sbbg,transparent)}
.sb .di{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:76px;height:22px;border-radius:12px;background:#000}
.sb .ic{display:flex;gap:4px;align-items:center}
.sb .ic i{display:block;background:currentColor}
.view{flex:1;overflow:hidden;position:relative;min-height:0}
/* Safari bottom bar (web) or home indicator only (installed app, pwa:true) */
.safari{flex:none;height:62px;background:var(--safbg,rgba(246,246,248,.96));border-top:.5px solid rgba(0,0,0,.08);display:flex;flex-direction:column;align-items:center;padding-top:8px;gap:7px;position:relative;z-index:3}
.safari .url{width:206px;height:30px;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;gap:5px;padding:0 10px 0 30px;white-space:nowrap;overflow:hidden;font:500 11.5px -apple-system,"Instrument Sans",system-ui,sans-serif;color:#16181d;position:relative}
.safari .url::before{flex:none;content:"";width:7px;height:8px;border:1.4px solid #6b6f78;border-radius:2px;margin-right:2px;position:relative;top:1px}
.safari .url .aa{position:absolute;left:10px;font-weight:600;font-size:11px;color:#3b3f47}
.safari .url .aa::before{content:"";}
.hi{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);width:96px;height:4px;border-radius:3px;background:var(--hifg,#16181d);opacity:.85;z-index:4}
.screen.dark .hi{background:#fff}

/* ---------- screen toolkit (theme-driven) ---------- */
.s{--bg:#fff;--fg:#16181d;--mut:#6b6f78;--ac:#2d5bff;--ac2:#ffc940;--card:#f4f4f6;--line:rgba(0,0,0,.09);--r:14px;
   --fd:"Instrument Sans",system-ui,sans-serif;--fb:"Instrument Sans",system-ui,sans-serif;
   background:var(--bg);color:var(--fg);font:400 12.5px/1.38 var(--fb);height:100%;overflow:hidden;position:relative}
.s.app{display:flex;flex-direction:column}
.s *{box-sizing:border-box}
.s p{margin:0}
.pad{padding:10px 16px}
.pad2{padding:14px 18px}
.stack{display:flex;flex-direction:column;gap:8px}
.stack.g4{gap:4px} .stack.g12{gap:12px} .stack.g16{gap:16px}
.rowx{display:flex;align-items:center;gap:8px}
.between{display:flex;align-items:center;justify-content:space-between;gap:8px}
.center{text-align:center}
.grow{flex:1;min-width:0}
.k{font:700 9.5px/1.2 var(--fb);letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.h1{font:700 27px/1.02 var(--fd);letter-spacing:-.02em}
.h2{font:700 19px/1.08 var(--fd);letter-spacing:-.01em}
.h3{font:700 13.5px/1.2 var(--fb)}
.p{font-size:12.5px}
.sm{font-size:11px}
.mut{color:var(--mut)}
.acc{color:var(--ac)}
.card{background:var(--card);border-radius:var(--r);padding:11px 12px}
.card.line{background:transparent;border:1px solid var(--line)}
.card.ac{background:var(--ac);color:var(--acfg,#fff)}
.btn{display:flex;align-items:center;justify-content:center;gap:6px;height:38px;border-radius:calc(var(--r) - 2px);background:var(--ac);color:var(--acfg,#fff);font:700 13px var(--fb);padding:0 14px}
.btn.ghost{background:transparent;color:var(--fg);box-shadow:0 0 0 1.4px var(--line) inset}
.btn.sm{height:28px;font-size:11.5px;padding:0 10px}
.btn.pill{border-radius:999px}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:999px;background:var(--card);font:600 10.5px var(--fb);white-space:nowrap}
.chip.on{background:var(--ac);color:var(--acfg,#fff)}
.chip.line{background:transparent;box-shadow:0 0 0 1px var(--line) inset}
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:0}
.li .t{flex:1;min-width:0}
.li .t b{display:block;font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .t span{display:block;font-size:10.5px;color:var(--mut)}
.av{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 11px var(--fb);background:var(--ac2);color:var(--fg)}
.av.sm{width:22px;height:22px;font-size:9.5px}
.av.lg{width:40px;height:40px;font-size:14px}
.avs{display:flex}.avs .av{margin-left:-7px;box-shadow:0 0 0 2px var(--bg)}.avs .av:first-child{margin-left:0}
.stat{font:700 30px/1 var(--fd);letter-spacing:-.02em}
.badge{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:6px;font:700 9.5px var(--fb);background:var(--ac2);color:var(--fg)}
.bar{height:7px;border-radius:5px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ac);border-radius:5px}
.hr{height:1px;background:var(--line)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.input{height:36px;border-radius:calc(var(--r) - 4px);box-shadow:0 0 0 1.2px var(--line) inset;display:flex;align-items:center;padding:0 11px;font-size:12px;color:var(--mut);background:var(--inbg,transparent)}
.seg{display:flex;padding:3px;border-radius:calc(var(--r) - 2px);background:var(--card);gap:2px}
.seg span{flex:1;text-align:center;padding:5px 0;border-radius:calc(var(--r) - 5px);font:600 11px var(--fb);color:var(--mut)}
.seg span.on{background:var(--bg);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.tabbar{position:absolute;left:0;right:0;bottom:0;height:52px;display:flex;justify-content:space-around;align-items:flex-start;padding-top:8px;border-top:1px solid var(--line);background:var(--bg);font:600 9.5px var(--fb);color:var(--mut)}
.tabbar span{display:flex;flex-direction:column;align-items:center;gap:3px}
.tabbar span::before{content:"";width:18px;height:18px;border-radius:6px;background:currentColor;opacity:.3}
.tabbar span.on{color:var(--ac)}.tabbar span.on::before{opacity:1}
.toggle{width:34px;height:20px;border-radius:12px;background:var(--line);position:relative;flex:none}
.toggle::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.toggle.on{background:var(--ac)}.toggle.on::after{left:16px}
.check{width:18px;height:18px;border-radius:6px;box-shadow:0 0 0 1.5px var(--line) inset;flex:none;display:grid;place-items:center}
.check.on{background:var(--ac);box-shadow:none}
.check.on::after{content:"";width:8px;height:4px;border-left:2px solid var(--acfg,#fff);border-bottom:2px solid var(--acfg,#fff);transform:rotate(-45deg) translate(1px,-1px)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ac);flex:none;display:inline-block}
/* photo placeholders: soft, believable image blocks (no stock photos) */
.ph{border-radius:var(--r);background:var(--card);position:relative;overflow:hidden;aspect-ratio:4/3}
.ph.sq{aspect-ratio:1}.ph.wide{aspect-ratio:16/9}.ph.tall{aspect-ratio:3/4}
.ph.a{background:radial-gradient(circle at 30% 35%,#f7d9b5 0 14%,transparent 15%),linear-gradient(160deg,#8fb3d9,#e8c39e 60%,#b5835a)}
.ph.b{background:radial-gradient(ellipse at 50% 120%,#4c7a3d 0 45%,transparent 46%),linear-gradient(180deg,#bfe0f2,#e9f3e0 70%)}
.ph.c{background:radial-gradient(circle at 70% 30%,#fff6 0 10%,transparent 11%),linear-gradient(135deg,#d6c3e8,#f2b8a8 55%,#f7e2b4)}
.ph.d{background:linear-gradient(180deg,#2b2f3a,#4a4458 60%,#7d6b6b)}
.ph.e{background:radial-gradient(circle at 50% 42%,#c9a27c 0 16%,transparent 17%),linear-gradient(180deg,#e9e2d4,#cbbfa8)}
.ph.f{background:repeating-linear-gradient(45deg,#e8e4dc 0 8px,#f2efe8 8px 16px)}
.ph.sepia{background:radial-gradient(ellipse at 40% 45%,#6d5a45 0 18%,transparent 19%),radial-gradient(ellipse at 62% 48%,#7a6650 0 15%,transparent 16%),linear-gradient(180deg,#d9c7a6,#b39b76);filter:sepia(.4)}
.ph .cap{position:absolute;left:8px;bottom:7px;font:600 10px var(--fb);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}

.safari .url .u{overflow:hidden;text-overflow:ellipsis;min-width:0}


/* ---------- desktop frames ---------- */
.dshot{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;width:100%}
.dk{--k:.5;position:relative;width:100%;aspect-ratio:1000/668;cursor:zoom-in;border-radius:12px;box-shadow:0 26px 50px -26px rgba(22,24,29,.55),0 0 0 1px rgba(22,24,29,.14);overflow:hidden;background:#fff}
.dk:focus-visible{outline:4px solid #2d5bff;outline-offset:4px}
.dk.tvk{aspect-ratio:1000/562;border-radius:6px;box-shadow:0 0 0 calc(12px * var(--k) + 4px) #121316,0 30px 50px -24px rgba(22,24,29,.6);background:#000}
.dkc{position:absolute;top:0;left:0;width:1000px;transform-origin:0 0;transform:scale(var(--k))}
.win{width:1000px;height:668px;display:flex;flex-direction:column;background:#fff}
.chrome{height:48px;flex:none;display:flex;align-items:center;gap:14px;padding:0 16px;background:#e9e7ec;border-bottom:1px solid #d4d1d8;font:500 12.5px -apple-system,"Instrument Sans",system-ui,sans-serif;color:#2b2d33}
.chrome .lights{display:flex;gap:7px}.chrome .lights i{width:12px;height:12px;border-radius:50%;background:#ff5f57;display:block}.chrome .lights i:nth-child(2){background:#febc2e}.chrome .lights i:nth-child(3){background:#28c840}
.chrome .tab{display:flex;align-items:center;gap:8px;background:#fff;border-radius:8px;padding:6px 14px;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.chrome .tab b{width:12px;height:12px;border-radius:3px;flex:none}
.chrome .addr{flex:1;height:30px;border-radius:9px;background:#f7f6f9;display:flex;align-items:center;justify-content:center;gap:7px;color:#3b3f47;max-width:460px;margin:0 auto}
.chrome .addr .lock{width:8px;height:9px;border:1.5px solid #6b6f78;border-radius:2px}
.dkview{width:1000px;overflow:hidden;font-size:13.5px}
.tvc .dkview{height:562px}
.stand{width:120px;height:14px;margin-top:14px;border-radius:0 0 10px 10px;background:linear-gradient(#2a2c32,#16181d)}
.nlb-ov{position:fixed;inset:0;z-index:100;background:rgba(18,19,22,.82);display:flex;align-items:center;justify-content:center;padding:60px 24px 24px;cursor:zoom-out}
.nlb-box{cursor:default}
.nlb-ov .dk.big{cursor:default;aspect-ratio:auto;height:auto}
.nlb-ov .dk.big:not(.tvk){height:calc(668px * var(--k))}
.nlb-ov .dk.big.tvk{height:calc(562px * var(--k))}
.nlb-x{position:fixed;top:16px;right:20px;font:700 15px "Instrument Sans",system-ui,sans-serif;background:#fff;color:#16181d;border:0;border-radius:999px;padding:9px 18px;cursor:pointer}