/* ===== reset ===== */
:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0;font:14px/1.5 system-ui,-apple-system,sans-serif}img{max-width:100%}[hidden]{display:none!important}

/* ===== หน้าเว็บ + หน้าจอล็อก ===== */
@font-face{font-family:'Phone UI';src:url(../assets/fonts/phone-latin.ttf) format('truetype');font-weight:100 900;unicode-range:U+0020-00FF,U+2010-2026,U+20AC,U+2190-2192}
@font-face{font-family:'Phone UI';src:url(../assets/fonts/phone-thai.ttf) format('truetype');font-weight:100 900;unicode-range:U+0E00-0E7F}
@font-face{font-family:'Clock SF';src:url(../assets/fonts/sf-pro-digits.ttf) format('truetype');font-weight:1 1000;font-stretch:30% 150%}
@font-face{font-family:'Clock Rounded';src:url(../assets/fonts/sf-pro-rounded-digits-100.otf) format('opentype');font-weight:100}
@font-face{font-family:'Clock Rounded';src:url(../assets/fonts/sf-pro-rounded-digits-200.otf) format('opentype');font-weight:200}
@font-face{font-family:'Clock Rounded';src:url(../assets/fonts/sf-pro-rounded-digits-300.otf) format('opentype');font-weight:300}
@font-face{font-family:'Clock Rounded';src:url(../assets/fonts/sf-pro-rounded-digits-400.otf) format('opentype');font-weight:400}
@font-face{font-family:'Clock Rounded';src:url(../assets/fonts/sf-pro-rounded-digits-500.otf) format('opentype');font-weight:500}
@font-face{font-family:'Clock Rounded';src:url(../assets/fonts/sf-pro-rounded-digits-600.otf) format('opentype');font-weight:600}
@font-face{font-family:'Clock Rounded';src:url(../assets/fonts/sf-pro-rounded-digits-700.otf) format('opentype');font-weight:700}
@font-face{font-family:'Clock Rounded';src:url(../assets/fonts/sf-pro-rounded-digits-800.otf) format('opentype');font-weight:800}
@font-face{font-family:'Clock Rounded';src:url(../assets/fonts/sf-pro-rounded-digits-900.otf) format('opentype');font-weight:900}
/* serif clock: Apple's New York (clock digits subset, variable weight 100–900) */
@font-face{font-family:'Clock NY';src:url(../assets/fonts/newyork-clock.ttf) format('truetype');font-weight:100 900}
/* -fixed: same fonts with ๊ raised so it clears ี ิ ึ ื instead of overlapping them */
@font-face{font-family:'SF Thonburi Web';src:url(../assets/fonts/sf-thonburi-regular-fixed.woff?v=2) format('woff');font-weight:100 550}
@font-face{font-family:'SF Thonburi Web';src:url(../assets/fonts/sf-thonburi-bold-fixed.woff?v=2) format('woff');font-weight:551 900}
/* Layout: phone mockup left, controls right; one column on phones */
:root{
  --bg:#eef0f5; --surface:#ffffff; --fg:#161a24; --muted:#5b6275; --line:#d9dce6; --accent:#3b6ef5;
  --font-ui:'SF Thonburi Web',"IBM Plex Sans Thai",-apple-system,"Segoe UI",sans-serif;
  --font-phone:'Phone UI',-apple-system,BlinkMacSystemFont,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1117; --surface:#181b24; --fg:#e8eaf1; --muted:#9aa1b4; --line:#2a2f3c; --accent:#7c9cff; color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0f1117; --surface:#181b24; --fg:#e8eaf1; --muted:#9aa1b4; --line:#2a2f3c; --accent:#7c9cff; color-scheme:dark}

body{background:var(--bg);color:var(--fg);font-family:var(--font-ui);line-height:1.6}
.wrap{max-width:1000px;margin:0 auto;padding-block:32px 56px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:48px;align-items:start}
@media (max-width:820px){.wrap{grid-template-columns:minmax(0,1fr);gap:32px}.phone-col{justify-self:center;width:100%;max-width:380px}}
h1{font-size:1.75rem;line-height:1.25;margin:0 0 6px;text-wrap:balance;font-weight:600}
.lede{color:var(--muted);margin:0 0 24px;max-width:60ch}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;display:grid;gap:20px}
.label{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.row{display:grid;gap:8px}
.btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
button{font:inherit;cursor:pointer}
.btn{background:var(--accent);color:#fff;border:0;border-radius:999px;padding:9px 18px;font-weight:500}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn:focus-visible,input:focus-visible,.file:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.file{position:relative;overflow:hidden}
.file input{position:absolute;inset:0;opacity:0;cursor:pointer}
input[type=range]{width:100%;accent-color:var(--accent)}
.range-ends{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.check{display:flex;gap:8px;align-items:center}
.check input{width:18px;height:18px;accent-color:var(--accent)}
.dswatch{width:32px;height:32px;border-radius:50%;border:2px solid var(--line);padding:0;cursor:pointer;position:relative;overflow:hidden}
.dswatch[aria-pressed="true"]{border-color:var(--fg);box-shadow:0 0 0 2px var(--surface) inset}
.dswatch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dswatch input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.dtext{font-size:.85rem;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer}
.dtext[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.dtext:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.stackSel{font:inherit;font-size:.85rem;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--fg)}
.stackSel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- settings panel (grouped list, iOS-Settings style) ---------- */
.panel{gap:14px;padding:14px}
@media (min-width:821px){.panel{position:sticky;top:16px}}
.psIn{flex:1;min-width:0}
.psRow .sctl{gap:6px;flex:none}
.psName{display:grid;min-width:0}
.psName b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psName small{color:var(--muted);font-size:.75rem}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;border-radius:12px;background:var(--bg)}
.tab{font:inherit;font-size:.9rem;font-weight:600;padding:8px 6px;border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer}
.tab[aria-selected="true"]{background:var(--surface);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tabpane{display:grid;gap:14px}
.grp{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.ghead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:10px 14px 6px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ghint{text-transform:none;letter-spacing:0;font-weight:500}
.srow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--line);min-height:44px;box-sizing:border-box}
.ghead+.srow{border-top:0}
.srow.col{flex-direction:column;align-items:stretch;gap:4px}
.srow.wrap{display:block}
.sname{display:flex;align-items:center;gap:10px;font-size:.92rem;min-width:0}
.sico{width:22px;height:22px;border-radius:6px;flex:none}
.sctl{display:flex;align-items:center;gap:8px;flex:none}
.rlab{display:flex;justify-content:space-between;font-size:.92rem}
.rval{color:var(--muted);font-variant-numeric:tabular-nums}
.note.pad{padding:0 14px 12px;margin:0}
.btn.sm{padding:6px 14px;font-size:.85rem}
.pseg{background:var(--bg);border-radius:9px;padding:3px;gap:2px;flex-wrap:nowrap}
.pseg .dtext{white-space:nowrap;border:0;border-radius:7px;padding:5px 11px;background:transparent}
.pseg .dtext[aria-pressed="true"]{background:var(--surface);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.pseg .battOpt{display:inline-flex;align-items:center;gap:5px;padding:5px 7px}
.battLbl{white-space:nowrap}
.battOpt svg{width:26px;height:13px;flex:none}
/* iOS-style switch, for both checkboxes and toggle buttons */
.swc,.sw{appearance:none;-webkit-appearance:none;position:relative;width:46px;height:28px;border-radius:999px;background:var(--line);border:0;margin:0;cursor:pointer;transition:background .2s;flex:none}
.swc::after,.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.swc:checked,.sw[aria-pressed="true"]{background:#34c759}
.swc:checked::after,.sw[aria-pressed="true"]::after{transform:translateX(18px)}
.swc:focus-visible,.sw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dtin{font:inherit;font-size:.85rem;padding:5px 8px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--fg);max-width:100%}
.dtin:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.srow.sub{border-top:0;padding-top:0;min-height:0;padding-left:46px}
.sname.muted{color:var(--muted);font-size:.82rem}
.srow.sub .sctl{flex-wrap:wrap;justify-content:flex-end}
.srow.sub .rval{font-size:.82rem}
@media (max-width:420px){.srow.sub{padding-left:14px}}
/* label · slider · value on one line */
.srow.slide{gap:12px}
.srow.slide .sname{flex:0 0 72px}
.srow.slide input[type=range]{flex:1;min-width:0}
.srow.slide .rval{flex:0 0 44px;text-align:right;font-size:.85rem}
/* notification cards: header with switch, fields fold away */
.ncList{display:grid;gap:10px}
.ncSec{display:grid;gap:10px}
.ncSec[hidden]{display:none}
.ncSecHead{display:flex;align-items:center;gap:8px;padding:8px 0 0 4px}
.ncSec:first-child .ncSecHead{padding-top:0}
.ncSecToggle{display:flex;align-items:center;gap:6px;flex:1;min-width:0;padding:6px 0;background:none;border:0;cursor:pointer;font:inherit;font-size:.72rem;letter-spacing:.06em;color:var(--muted);font-weight:600;text-align:left}
.ncSecToggle:hover{color:var(--fg,inherit)}
.ncCount{font-weight:500;opacity:.75}
.ncCount::before{content:"· "}
.ncSecHead .chev{width:7px;height:7px;margin:0 2px 3px 0}
.ncSec.folded .ncSecHead .chev{transform:rotate(-45deg);margin:0 3px 0 0}
.ncSecHead .mvgrp .mv{width:30px;height:26px}
.ncSecHead .mv svg{width:16px;height:16px}
.ncSec.folded>.ncard,.ncSec.folded>.secAdd{display:none}
.secAdd{padding:0;justify-content:center}
.ncard summary{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none}
.ncard summary::-webkit-details-marker{display:none}
.ncard .sico{width:30px;height:30px;border-radius:8px;background-size:cover;background-position:center;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.ncard summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:12px}
.ncname{flex:1;min-width:0;font-weight:600;font-size:.95rem;display:flex;flex-direction:column;line-height:1.3}
.ncsub{font-weight:400;font-size:.78rem;color:var(--muted)}
.chev{width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:0 4px 4px 2px;transition:transform .2s;flex:none}
.ncard[open] .chev{transform:rotate(-135deg);margin:4px 4px 0 2px}
.ncard[open] summary{border-bottom:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 12px;align-items:center;padding:14px}
.fgrid>label,.fgrid>span{font-size:.85rem;color:var(--muted)}
.fgrid .stackSel{justify-self:start;min-width:72px}
.fgrid .dtin{padding:8px 10px;border-radius:9px;width:100%;box-sizing:border-box}
.pair{display:flex;gap:8px;min-width:0}
.pair .tin:first-child{flex:1.4;min-width:0}.pair .tin:last-child{flex:1;min-width:0}
.fgrid .paste{margin:0;padding:6px 10px;gap:10px}
.fgrid .avPrev{width:36px;height:36px}
.fgrid .pseg{display:flex;justify-self:start}
.ncact{display:flex;gap:8px;justify-content:flex-end;align-items:center;padding:10px 14px;border-top:1px solid var(--line)}
.ncard.moved{animation:mvflash .6s ease}
@media (prefers-reduced-motion:reduce){.ncard.moved{animation:none}}
.ncList+.addbar{padding:0;justify-content:center}
.gen{margin-top:10px}
.genWarn{margin:0 14px 10px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,#ff9f0a 14%,transparent);border:1px solid color-mix(in srgb,#ff9f0a 45%,transparent);font-size:.8rem;line-height:1.55}
.genWarn b{color:#c25e00}
.genWarn a{color:var(--accent)}
/* iPhone ✨ emoji (images/emoji/2728.webp) on a plain tile, like the other app icons */
.gen-ico{background:url(../images/emoji/2728.webp) center/72% no-repeat,var(--bg)}
#genPrev{max-width:96px;max-height:96px;border-radius:8px;object-fit:contain}
.genAct{display:flex;align-items:center;gap:10px;padding:0 14px 6px}
.genAct .note{margin:0}
.reset{justify-self:center}
/* wallpaper picker */
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px;padding:4px 14px 14px}
.wcell{position:relative}
.wtile{display:block;width:100%;aspect-ratio:9/19.5;padding:0;border:0;border-radius:10px;overflow:hidden;background:var(--bg);cursor:pointer;box-shadow:0 0 0 1px var(--line)}
.wtile img{width:100%;height:100%;object-fit:cover;display:block}
.wtile[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.wtile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wadd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;border:1.5px dashed var(--line);box-shadow:none;color:var(--muted);font-size:1.6rem;line-height:1}
.wadd small{font-size:.72rem}
.wadd input{position:absolute;inset:0;opacity:0;cursor:pointer}
.wadd:focus-within{border-color:var(--accent);color:var(--accent)}
.wdel{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:0;background:#1c1c1e;color:#fff;font-size:.7rem;display:grid;place-items:center;padding:0;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.wdel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:420px){.fgrid{grid-template-columns:minmax(0,1fr);gap:4px}.fgrid>label,.fgrid>span{margin-top:6px}}

/* chat notification: round contact photo with a small app icon */
.appicon.avatar{border-radius:50%;background:linear-gradient(160deg,#9fb3c8,#6c7f96);box-shadow:none;overflow:visible}
.appicon.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
/* the app badge on an avatar keeps its own rounded-square corner, not the avatar's circle */
.appicon.avatar .appmini img{border-radius:inherit}
.avInit{font:600 calc(var(--u)*16)/1 'SF Thonburi Web',var(--font-phone);color:#fff}
.appmini{position:absolute;right:calc(var(--u)*-4);bottom:calc(var(--u)*-3);width:calc(var(--u)*16);height:calc(var(--u)*16);border-radius:28%;
  background:linear-gradient(160deg,#3ee07a,#12b04b);display:grid;place-items:center;box-shadow:0 calc(var(--u)*.5) calc(var(--u)*1.5) rgba(0,0,0,.25)}
.appmini svg{width:72%;height:72%}
/* panel: chat editor */
.avPrev{width:44px;height:44px;border-radius:50%;background:linear-gradient(160deg,#9fb3c8,#6c7f96) center/cover;flex:none;display:grid;place-items:center;color:#fff;font-weight:600}
.paste{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:0 14px 12px;border:1.5px dashed var(--line);border-radius:12px;cursor:pointer;outline:none}
.paste:focus,.paste.drag{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.paste .note{margin:0}
.tin{font:inherit;font-size:.9rem;width:100%;box-sizing:border-box;padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--fg)}
textarea.tin{resize:vertical;min-height:64px;line-height:1.45}
.tin:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ---------- screenshot ---------- */
.capbar{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:14px}
.capmsg{font-size:.82rem;color:var(--muted);min-height:1.2em;text-align:center}
.capov{position:fixed;inset:0;z-index:50;background:rgba(10,12,18,.62);display:grid;place-items:center;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.capbox{background:var(--surface);color:var(--fg);border-radius:16px;padding:16px;display:grid;gap:10px;max-width:min(420px,100%);max-height:100%;overflow:auto;box-sizing:border-box}
.caphead{display:flex;justify-content:space-between;align-items:center}
.capbox img{width:100%;max-height:60vh;object-fit:contain;border-radius:8px;background:#000}
.capbox .note{margin:0}
a.btn{text-decoration:none;display:inline-flex;align-items:center}
.appicon .iconImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;z-index:1}
.appicon .badge,.appicon .appmini{z-index:2}
.badge{line-height:1;text-box:trim-both cap alphabetic}
@supports not (text-box:trim-both cap alphabetic){.badge{padding-bottom:calc(var(--u)*2.2);box-sizing:border-box}}
/* card actions, iOS style: tinted line icons on soft grey fills; up/down joined in one capsule */
.mvgrp{display:inline-flex;align-items:center;background:var(--bg);border-radius:999px;padding:0 2px}
.mvgrp .mv+.mv{box-shadow:-1px 0 0 var(--line)}
.mv,.cp,.del{width:34px;height:32px;border:0;border-radius:999px;background:transparent;color:var(--accent);cursor:pointer;display:grid;place-items:center;padding:0;transition:background .15s,opacity .15s}
.mvgrp .mv{border-radius:0;width:36px}
.cp,.del{width:32px;background:var(--bg)}
.del{color:#ff3b30}
.mv svg,.cp svg,.del svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mv:hover:not(:disabled),.cp:hover,.del:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.mv:active:not(:disabled),.cp:active,.del:active{opacity:.55}
.mv:disabled{color:var(--muted);opacity:.35;cursor:default}
.mv:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cardblk{border-top:1px solid var(--line)}
.cardblk:first-of-type{border-top:0}
.cardblk>.srow:first-child{border-top:0}
.cardblk.moved{animation:mvflash .6s ease}
@keyframes mvflash{from{background:color-mix(in srgb,var(--accent) 14%,transparent)}to{background:transparent}}
@media (prefers-reduced-motion:reduce){.cardblk.moved{animation:none}}
.note{font-size:.82rem;color:var(--muted);margin:0}
.hint{font-size:.8rem;color:var(--muted);text-align:center;margin-top:10px}

/* ---------- Phone ---------- */
.phone{width:100%;aspect-ratio:402/874;max-width:100%;border-radius:0;padding:0;background:none;box-shadow:none}
.screen{position:relative;width:100%;height:100%;border-radius:0;overflow:hidden;container-type:inline-size;background:#000;
  --u:calc(100cqw / 402);font-family:var(--font-phone);color:#fff;-webkit-font-smoothing:antialiased;--date:#ffd6e4}
.wall{position:absolute;inset:0;background-size:100% 100%}
.island{display:none;position:absolute;top:calc(var(--u)*11);left:50%;transform:translateX(-50%);width:calc(var(--u)*124);height:calc(var(--u)*36);background:#000;border-radius:999px;z-index:20}

.status{position:absolute;top:calc(var(--u)*19);left:calc(var(--u)*30);right:calc(var(--u)*30);height:calc(var(--u)*24);display:flex;justify-content:space-between;align-items:center;z-index:10}
.carrier{font-family:'SF Thonburi Web',var(--font-phone);font-size:calc(var(--u)*16.5);font-weight:500;letter-spacing:-.01em;white-space:nowrap;max-width:calc(var(--u)*120);overflow:hidden}
/* "ห้ามรบกวน" between the flashlight and camera buttons (same height as their centres) */
.focus-label{position:absolute;left:0;right:0;top:calc(var(--u)*788);transform:translateY(-50%);display:flex;justify-content:center;align-items:center;gap:calc(var(--u)*5);
  font-family:'SF Thonburi Web',var(--font-phone);font-size:calc(var(--u)*16);font-weight:500;color:#fff;z-index:5;pointer-events:none;transition:opacity .3s}
.focus-label svg{width:calc(var(--u)*17);height:calc(var(--u)*17);flex:none}
.screen.editing .focus-label{opacity:0}
.sleft{display:flex;align-items:center;gap:calc(var(--u)*2);min-width:0}
.silent{width:calc(var(--u)*19);height:calc(var(--u)*19);flex:none;transform:translateY(calc(var(--u)*-1.5))}
.sicons{display:flex;gap:calc(var(--u)*6);align-items:center;margin-right:calc(var(--u)*-6)}
.nettype{font-size:calc(var(--u)*15);font-weight:500;letter-spacing:-.01em;line-height:1}
#batt{cursor:pointer;height:calc(var(--u)*14)}/* ~5% slimmer than its natural 14.75 */
#batt:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}
#sig rect{transition:opacity .2s}
.cc-hint{position:absolute;top:calc(var(--u)*42);right:calc(var(--u)*35.3);width:calc(var(--u)*55.7);height:calc(var(--u)*2.5);border-radius:9px;background:rgba(255,255,255,.65);z-index:10}

.date{position:absolute;top:calc(var(--u)*74);left:0;right:0;text-align:center;font-size:calc(var(--u)*22);font-weight:500;color:var(--date-c,var(--date));
  letter-spacing:-.01em;font-family:'SF Thonburi Web',var(--font-phone);-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;z-index:4;text-shadow:none}
.clock{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
/* --push: how far a long notification list has pushed the date and clock up (set by layoutCards) */
.date,.clock,.clock-hit,.clock-edit{transform:translateY(calc(var(--u)*var(--push,0)*-1));transition:transform .4s cubic-bezier(.3,1.1,.4,1)}
/* cards beyond the fifth wait, invisible, behind it */
.card.tucked{opacity:0;pointer-events:none}

/* Liquid Glass parts (lens = refracted copy of wallpaper) */
.glass{position:absolute;overflow:hidden;overflow:clip;isolation:isolate;box-shadow:0 calc(var(--u)*6) calc(var(--u)*18) calc(var(--u)*-8) rgba(0,0,0,.35)}
.glass>.lens{position:absolute;inset:-24px;background-repeat:no-repeat;z-index:0;filter:blur(var(--lb,2.5px)) var(--lf,none) saturate(1.35) brightness(1.18)}
.glass>.tint{position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;
  background:radial-gradient(120% 80% at 25% 0%,rgba(255,255,255,.16),transparent 60%),linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)),linear-gradient(rgba(25,25,32,var(--td,.1)),rgba(25,25,32,var(--td,.1)));
  box-shadow:inset 0 0 calc(var(--u)*12) rgba(255,255,255,.14)}
.glass>.rim{position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none;padding:calc(var(--u)*1.2);
  background:linear-gradient(125deg,rgba(255,255,255,.95),rgba(255,255,255,.3) 20%,rgba(255,255,255,.06) 45%,rgba(255,255,255,.06) 60%,rgba(255,255,255,.35) 82%,rgba(255,255,255,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.glass>.c{position:relative;z-index:2;height:100%;box-sizing:border-box}

.nc-title{position:absolute;left:calc(var(--u)*20);top:calc(var(--u)*468);font-size:calc(var(--u)*26);font-weight:500;letter-spacing:-.01em;z-index:5;
  font-family:'SF Thonburi Web',var(--font-phone);text-shadow:0 1px 8px rgba(0,0,0,.2);transition:opacity .35s}
.nc-x{left:calc(var(--u)*354);top:calc(var(--u)*472);width:calc(var(--u)*36);height:calc(var(--u)*36);border-radius:50%;border:0;padding:0;z-index:5;cursor:pointer;background:transparent;transition:opacity .35s}
.nc-x .c{display:grid;place-items:center}
.nc-x svg{width:calc(var(--u)*13)}

.card{left:calc(var(--u)*14);right:calc(var(--u)*13);min-height:calc(var(--u)*62);border-radius:calc(var(--u)*24);z-index:5;transition:transform .45s cubic-bezier(.3,1.2,.4,1),opacity .35s,top .4s cubic-bezier(.3,1.1,.4,1);touch-action:pan-y;cursor:grab}
.card.dragging{transition:none;cursor:grabbing}
.card.gone{opacity:0;pointer-events:none;transform:translateX(-110%)!important}
.nc-title,.nc-x,.peek{transition:top .4s cubic-bezier(.3,1.1,.4,1),opacity .35s}
/* Notification cards: clear milky glass, soft luminous rim, almost no shadow (matches real iOS 26/27) */
.card{box-shadow:0 calc(var(--u)*2) calc(var(--u)*16) rgba(0,0,0,.1)}
.card>.lens,.np>.lens{--lb:8px;filter:blur(5px) var(--lf,none) saturate(1.35) brightness(1.04)}
.card>.tint,.np>.tint{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.07) 40%,rgba(255,255,255,.08)),linear-gradient(rgba(18,18,24,calc(var(--dim,0)*.45)),rgba(18,18,24,calc(var(--dim,0)*.45)));
  box-shadow:inset 0 calc(var(--u)*1.2) calc(var(--u)*1) calc(var(--u)*-.2) rgba(255,255,255,.22),inset 0 calc(var(--u)*-1.2) calc(var(--u)*1) calc(var(--u)*-.2) rgba(255,255,255,.13)}
.card>.rim,.np>.rim{opacity:.45;padding:calc(var(--u)*1.3);filter:blur(1.2px);background:conic-gradient(from 0deg,rgba(255,255,255,.06) 0deg,rgba(255,255,255,.04) 60deg,rgba(255,255,255,.18) 100deg,rgba(255,255,255,.05) 125deg,rgba(255,255,255,.03) 160deg,rgba(255,255,255,.03) 230deg,rgba(255,255,255,.07) 262deg,rgba(255,255,255,.24) 283deg,rgba(255,255,255,.08) 305deg,rgba(255,255,255,.06) 360deg)}
.card .c{display:grid;grid-template-columns:calc(var(--u)*36) minmax(0,1fr);column-gap:calc(var(--u)*12);padding:calc(var(--u)*12) calc(var(--u)*16) calc(var(--u)*12) calc(var(--u)*13);align-items:center}
.peek{height:calc(var(--u)*30);border-radius:calc(var(--u)*20);z-index:4;box-shadow:none;transition:top .4s cubic-bezier(.3,1.1,.4,1),left .3s,right .3s,opacity .3s}
.peek.off{opacity:0;pointer-events:none}
.peek>.lens{filter:blur(5px) var(--lf,none) saturate(1.35) brightness(1.04)}
.peek>.tint{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.07) 40%,rgba(255,255,255,.08)),linear-gradient(rgba(18,18,24,calc(var(--dim,0)*.45)),rgba(18,18,24,calc(var(--dim,0)*.45)))}
.peek>.rim{padding:calc(var(--u)*.7);filter:blur(.8px);background:linear-gradient(180deg,rgba(255,255,255,0) 55%,rgba(255,255,255,.2))}
.peek>.tint{box-shadow:none !important}
.appicon{position:relative;width:calc(var(--u)*36);height:calc(var(--u)*36);border-radius:26%;display:grid;place-items:center;align-self:center;margin-top:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 calc(var(--u)*.6) rgba(255,255,255,.25),0 1px 3px rgba(0,0,0,.15)}
.appicon svg{width:60%;height:60%}
.badge{position:absolute;top:calc(var(--u)*-6);right:calc(var(--u)*-7);min-width:calc(var(--u)*18);height:calc(var(--u)*18);border-radius:999px;background:#f2f2f4;
  color:#6e6e73;font-size:calc(var(--u)*12);font-weight:700;display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.25);font-family:'SF Thonburi Web',var(--font-phone)}
.nhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ntitle{font-family:'SF Thonburi Web',var(--font-phone);font-size:calc(var(--u)*13.25);font-weight:400;-webkit-text-stroke:calc(var(--u)*.06) currentColor;paint-order:stroke fill;letter-spacing:.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ntime{font-family:'SF Thonburi Web',var(--font-phone);font-size:calc(var(--u)*11.5);letter-spacing:.02em;color:rgba(255,255,255,.48);white-space:nowrap;flex:none}
.ngroup{display:block;margin-top:calc(var(--u)*1)}
.nbody{font-family:'SF Thonburi Web',var(--font-phone);font-size:calc(var(--u)*13.5);line-height:1.5;letter-spacing:.02em;color:rgba(255,255,255,.9);display:block;overflow:hidden;margin-top:calc(var(--u)*2);white-space:pre-line;overflow-wrap:anywhere}
/* Thai ไ ใ โ overhang the left edge of their box: widen the clip area without moving the text */
.ntitle,.nbody,.np-title,.np-artist,.carrier{margin-left:-.15em;padding-left:.15em}
/* a tone mark stacked on an upper vowel rises past the line box: same trick upward */
.ntitle,.nbody{padding-top:.2em}
.ntitle{margin-top:-.2em}
.ngroup{margin-top:calc(var(--u)*1 - .2em)}
.nbody{margin-top:calc(var(--u)*2 - .2em)}
.cleared .nc-title,.cleared .nc-x{opacity:0;pointer-events:none}


.qbtn .ico{fill:rgba(255,255,255,.82)}
.qbtn{top:calc(var(--u)*762);width:calc(var(--u)*52);height:calc(var(--u)*52);border-radius:50%;z-index:5;border:0;padding:0;background:transparent;cursor:pointer}
.qbtn .c{display:grid;place-items:center}
.qbtn svg{width:calc(var(--u)*29);height:calc(var(--u)*29)}
.qbtn[aria-label="กล้อง"] svg{width:calc(var(--u)*33);height:calc(var(--u)*33)}
.qbtn>.tint,.nc-x>.tint{background:radial-gradient(100% 70% at 30% 0%,rgba(255,255,255,.1),transparent 60%),rgba(255,255,255,.05),rgba(20,20,26,.1);
  box-shadow:inset 0 0 calc(var(--u)*6) rgba(255,255,255,.1)}
.qbtn>.lens,.nc-x>.lens{filter:blur(2px) var(--lf,none) saturate(1.1) brightness(1.03)}
/* round buttons: even rim and an un-offset shadow so the circle reads exactly centred on its icon */
.qbtn>.rim,.nc-x>.rim{opacity:1;padding:calc(var(--u)*.9);filter:blur(.5px);background:conic-gradient(from 0deg,rgba(255,255,255,.18) 0deg,rgba(255,255,255,.06) 70deg,rgba(255,255,255,.32) 135deg,rgba(255,255,255,.06) 200deg,rgba(255,255,255,.06) 250deg,rgba(255,255,255,.4) 315deg,rgba(255,255,255,.18) 360deg)!important}
.qbtn,.nc-x{box-shadow:0 0 calc(var(--u)*6) rgba(0,0,0,.08)}
.qbtn.on .tint{background:rgba(255,255,255,.92)}
.qbtn.on svg path,.qbtn.on svg rect,.qbtn.on .ico{fill:#222}
/* clock stretch editor (like iOS lock-screen customise) */
.clock-edit{position:absolute;left:calc(var(--u)*var(--cx,52));right:calc(var(--u)*var(--cx,52));top:calc(var(--u)*104);height:calc(var(--u)*var(--ch,186));z-index:7;
  border:calc(var(--u)*1.5) solid rgba(255,255,255,.55);border-radius:calc(var(--u)*16);box-sizing:border-box}
.clock-handle{position:absolute;left:50%;bottom:calc(var(--u)*-14);transform:translateX(-50%);width:calc(var(--u)*56);height:calc(var(--u)*26);border:0;padding:0;
  background:transparent;cursor:ns-resize;touch-action:none}
.clock-handle::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(var(--u)*40);height:calc(var(--u)*7);border-radius:9px;
  background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.3)}
.clock-handle:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:9px}
.homebar{position:absolute;bottom:calc(var(--u)*8);left:50%;transform:translateX(-50%);width:calc(var(--u)*140);height:calc(var(--u)*5);border-radius:9px;background:#fff;z-index:10}

/* ---------- edit mode: font & colour sheet (like iOS 'แบบอักษรและสี') ---------- */
#nc,.qbtn,.status,.cc-hint{transition:opacity .3s}
.screen.editing #nc,.screen.editing .qbtn,.screen.editing .status,.screen.editing .cc-hint{opacity:0;pointer-events:none}
.clock-hit{position:absolute;left:calc(var(--u)*30);right:calc(var(--u)*30);top:calc(var(--u)*96);height:calc(var(--u)*190);z-index:6;background:transparent;border:0;padding:0;cursor:pointer;border-radius:calc(var(--u)*18)}
.clock-hit:focus-visible{outline:2px solid rgba(255,255,255,.8)}
.screen.editing .clock-hit{pointer-events:none}
.pill-btn{top:calc(var(--u)*14);height:calc(var(--u)*32);padding:0 calc(var(--u)*14);border-radius:999px;z-index:21;border:0;background:transparent;color:#fff;font:600 calc(var(--u)*14)/1 var(--font-phone);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s}
.pill-btn .c{display:grid;place-items:center;white-space:nowrap}
.screen.editing .pill-btn{opacity:1;pointer-events:auto}
.sheet{left:calc(var(--u)*8);right:calc(var(--u)*8);bottom:calc(var(--u)*8);height:calc(var(--u)*318);border-radius:calc(var(--u)*42);z-index:12;transform:translateY(112%);transition:transform .5s cubic-bezier(.3,1.12,.4,1)}
.screen.editing .sheet{transform:none}
.sheet>.lens{filter:blur(16px) var(--lf,none) saturate(1.5) brightness(.8)}
.sheet>.tint{background:linear-gradient(rgba(38,42,52,.38),rgba(30,34,44,.46));box-shadow:none}
.sheet>.rim{opacity:.5}
.sheet .c{display:flex;flex-direction:column;gap:calc(var(--u)*12);padding:calc(var(--u)*14) calc(var(--u)*20) calc(var(--u)*16)}
.sh-head{display:grid;grid-template-columns:calc(var(--u)*28) 1fr calc(var(--u)*28);align-items:center;color:rgba(255,255,255,.92)}
.sh-head svg{width:calc(var(--u)*19);height:calc(var(--u)*19)}
.sh-title{text-align:center;font:600 calc(var(--u)*14.5)/1.2 'SF Thonburi Web',var(--font-phone)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*10)}
.tile{height:calc(var(--u)*56);border-radius:calc(var(--u)*14);border:calc(var(--u)*1.4) solid transparent;background:transparent;color:#fff;font-size:calc(var(--u)*33);line-height:1;display:grid;place-items:center;cursor:pointer;padding:0}
.tile[aria-pressed="true"]{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.07)}
.tile:focus-visible,.dot:focus-visible,.seg button:focus-visible,.pill-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.t-sf{font-family:'Clock SF';font-weight:500;font-variation-settings:'wght' 500,'wdth' 100}
.t-rnd{font-family:'Clock Rounded';font-weight:500}
.t-st{grid-auto-flow:column;place-content:center;font-family:'SF Thonburi Web',sans-serif;font-weight:700}
.t-ser{font-family:'Clock NY',serif;font-weight:600;font-variation-settings:'wght' 600}
/* the stencil tile is drawn by JS from the clock's own font and cuts (drawStencilTile); one cap height tall */
.t-st svg{height:.72em;width:auto;overflow:visible}
.gs{-webkit-appearance:none;appearance:none;width:100%;height:calc(var(--u)*28);background:transparent;margin:0;cursor:pointer;accent-color:#fff}
.gs::-webkit-slider-runnable-track{height:calc(var(--u)*4);border-radius:9px;background:rgba(255,255,255,.28)}
.gs::-moz-range-track{height:calc(var(--u)*4);border-radius:9px;background:rgba(255,255,255,.28)}
.gs::-webkit-slider-thumb{-webkit-appearance:none;width:calc(var(--u)*34);height:calc(var(--u)*20);margin-top:calc(var(--u)*-8);border-radius:999px;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.35)}
.gs::-moz-range-thumb{width:calc(var(--u)*34);height:calc(var(--u)*20);border:0;border-radius:999px;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.35)}
.gs:active::-webkit-slider-thumb{background:rgba(255,255,255,.55);transform:scale(1.25)}
.gs:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:9px}
.sh-div{height:1px;background:rgba(255,255,255,.14);margin:calc(var(--u)*-2) 0}
.colors{display:flex;justify-content:space-between;align-items:center}
.dot{position:relative;width:calc(var(--u)*30);height:calc(var(--u)*30);border-radius:50%;border:0;padding:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.dot[aria-pressed="true"]{box-shadow:0 0 0 calc(var(--u)*2.5) rgba(20,22,30,.6),0 0 0 calc(var(--u)*4.5) #fff}
.dot input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*6)}
.seg button{height:calc(var(--u)*36);border-radius:999px;border:0;background:transparent;color:rgba(255,255,255,.55);font:600 calc(var(--u)*14.5)/1 'SF Thonburi Web',var(--font-phone);cursor:pointer}
.seg button[aria-pressed="true"]{background:rgba(255,255,255,.13);color:#fff}


/* icons are painted on the same layer as the circle, so they stay dead-centre on screen and in screenshots */
.nc-x .c svg,.qbtn .c svg{display:none}
.nc-x>.tint{background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 14 14%22%3E%3Cpath d=%22M2 2l10 10M12 2 2 12%22 stroke=%22%23fff%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/svg%3E") center/calc(var(--u)*13) calc(var(--u)*13) no-repeat,radial-gradient(120% 90% at 30% 15%,rgba(255,255,255,.05),rgba(255,255,255,0) 70%),linear-gradient(rgba(255,255,255,.02),rgba(255,255,255,.02))!important}
#flash>.tint{background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22rgba%28255,255,255,.82%29%22%3E%3Crect x=%228.19%22 y=%222%22 width=%227.62%22 height=%221.51%22 rx=%22.45%22/%3E%3Cpath fill-rule=%22evenodd%22 d=%22M8.19 4.11H15.81V4.7C15.81 6.2 14 6.9 13.99 8.04V21.2a.8.8 0 0 1-.8.8H10.8a.8.8 0 0 1-.8-.8V8.04C10 6.9 8.19 6.2 8.19 4.7ZM10.67 11.36a1.33 1.33 0 0 1 2.66 0v1.69a1.33 1.33 0 0 1-2.66 0Z%22/%3E%3Ccircle cx=%2212%22 cy=%2213%22 r=%22.85%22/%3E%3C/svg%3E") center/calc(var(--u)*33) calc(var(--u)*33) no-repeat,radial-gradient(120% 90% at 30% 15%,rgba(255,255,255,.05),rgba(255,255,255,0) 70%),linear-gradient(rgba(255,255,255,.02),rgba(255,255,255,.02))!important}
#flash.on>.tint{background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%23222%22%3E%3Crect x=%228.19%22 y=%222%22 width=%227.62%22 height=%221.51%22 rx=%22.45%22/%3E%3Cpath fill-rule=%22evenodd%22 d=%22M8.19 4.11H15.81V4.7C15.81 6.2 14 6.9 13.99 8.04V21.2a.8.8 0 0 1-.8.8H10.8a.8.8 0 0 1-.8-.8V8.04C10 6.9 8.19 6.2 8.19 4.7ZM10.67 11.36a1.33 1.33 0 0 1 2.66 0v1.69a1.33 1.33 0 0 1-2.66 0Z%22/%3E%3Ccircle cx=%2212%22 cy=%2213%22 r=%22.85%22/%3E%3C/svg%3E") center/calc(var(--u)*33) calc(var(--u)*33) no-repeat,linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92))!important}
.qbtn[aria-label="กล้อง"]>.tint{background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22rgba%28255,255,255,.82%29%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M9.4 4.2h5.2c.5 0 .9.3 1.1.7l.6 1.3h2.4c1.5 0 2.6 1.2 2.6 2.6v8.3c0 1.5-1.2 2.6-2.6 2.6H5.3a2.6 2.6 0 0 1-2.6-2.6V8.8c0-1.5 1.2-2.6 2.6-2.6h2.4l.6-1.3c.2-.4.6-.7 1.1-.7ZM12 8.6a4.3 4.3 0 1 0 0 8.6 4.3 4.3 0 0 0 0-8.6Zm0 1.9a2.4 2.4 0 1 1 0 4.8 2.4 2.4 0 0 1 0-4.8Zm6.3-1.9a.9.9 0 1 0 0 1.8.9.9 0 0 0 0-1.8Z%22/%3E%3C/svg%3E") center/calc(var(--u)*33) calc(var(--u)*33) no-repeat,radial-gradient(120% 90% at 30% 15%,rgba(255,255,255,.05),rgba(255,255,255,0) 70%),linear-gradient(rgba(255,255,255,.02),rgba(255,255,255,.02))!important}
/* always clip the glass to its own rounded shape (Chrome can leak filtered layers past rounded corners while cards move) */
.card,.peek{clip-path:inset(0 round calc(var(--u)*24))}
.np{clip-path:inset(0 round calc(var(--u)*28))}
.peek{clip-path:inset(0 round calc(var(--u)*20))}
.emo{height:1.18em;width:1.18em;vertical-align:-.22em;margin:0 .03em;display:inline-block}

/* added notifications */
.appicon.sq{background:linear-gradient(160deg,#a9b3c2,#6f7a8c)}
.appicon.sq>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;z-index:1}
.avPrev.sq{border-radius:26%}
.avPrev svg{width:60%;height:60%}
.addbar{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 12px}
.cp:focus-visible,.del:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
@media (prefers-reduced-motion:reduce){.card{transition:opacity .2s}}

/* Demo identity stays visible in the preview and exported snapshot. */
.appmini .line-mini{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* a badge image that already has its own rounded-square shape (TikTok): keep the iOS icon corner, a little bigger */
.appmini.mini-own{background:transparent;border-radius:23%;width:calc(var(--u)*17);height:calc(var(--u)*17)}
.demo-watermark{position:absolute;top:calc(var(--u)*475);left:calc(var(--u)*20);right:calc(var(--u)*20);text-align:center;background:#fff3cd;color:#583d00;border:1px solid #e6bc48;border-radius:8px;padding:calc(var(--u)*5);font-size:calc(var(--u)*13);font-weight:700;pointer-events:none;z-index:8}
/* picture attached to an app notification: sits under the time on the right, the message wraps beside it */
/* ---------- Now Playing (iOS lock-screen media player) ---------- */
.np{left:calc(var(--u)*14);right:calc(var(--u)*13);border-radius:calc(var(--u)*28);z-index:5;box-shadow:0 calc(var(--u)*2) calc(var(--u)*16) rgba(0,0,0,.1);transition:top .4s cubic-bezier(.3,1.1,.4,1)}
.np[hidden]{display:none}
.np .c{padding:calc(var(--u)*14) calc(var(--u)*16) calc(var(--u)*12)}
.np-top{display:grid;grid-template-columns:calc(var(--u)*52) minmax(0,1fr) calc(var(--u)*20);column-gap:calc(var(--u)*12);align-items:center}
.np-art{width:calc(var(--u)*52);height:calc(var(--u)*40);border-radius:calc(var(--u)*6);object-fit:cover;background:rgba(255,255,255,.15);display:block}
.np-art:not([src]),.np-art[src=""]{visibility:hidden}
.np-meta{min-width:0}
/* a long title runs left, then starts over (two copies side by side, so the loop is seamless) */
.np-title{overflow:hidden;white-space:nowrap;font-family:'SF Thonburi Web',var(--font-phone);font-size:calc(var(--u)*15.5);font-weight:600;letter-spacing:.01em;line-height:1.35;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--u)*14),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - var(--u)*14),transparent)}
.np-title.fits{-webkit-mask-image:none;mask-image:none}
.np-run{display:inline-flex;gap:calc(var(--u)*36)}
.np-title.run .np-run{animation:npRun var(--npDur,10s) linear infinite}
@keyframes npRun{0%,22%{transform:translateX(0)}100%{transform:translateX(calc(var(--npShift,0px)*-1))}}
.np-artist{font-family:'SF Thonburi Web',var(--font-phone);font-size:calc(var(--u)*15);color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35;margin-top:calc(var(--u)*5)}
.np-wave{width:calc(var(--u)*20);height:calc(var(--u)*15);color:rgba(255,255,255,.45);align-self:start;margin-top:calc(var(--u)*6)}
.np-bar{display:grid;grid-template-columns:calc(var(--u)*30) minmax(0,1fr) calc(var(--u)*36);align-items:center;column-gap:calc(var(--u)*8);margin-top:calc(var(--u)*16)}
.np-time{font-family:var(--font-phone);font-size:calc(var(--u)*11.5);font-weight:600;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.np-left{text-align:right}
.np-track{position:relative;height:calc(var(--u)*6);border-radius:9px;background:rgba(255,255,255,.22);cursor:pointer;touch-action:none;transition:height .2s}
.np-track::before{content:"";position:absolute;inset:calc(var(--u)*-12) 0}/* bigger hit area */
.np-track.drag{height:calc(var(--u)*10)}
.np-fill{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:rgba(255,255,255,.85)}
.np-ctl{display:grid;grid-template-columns:1fr auto auto auto 1fr;column-gap:calc(var(--u)*34);align-items:center;margin-top:calc(var(--u)*12)}
.np-ctl>:first-child{grid-column:2}
.np-btn{border:0;padding:0;background:none;color:#fff;cursor:pointer;display:grid;place-items:center;width:calc(var(--u)*40);height:calc(var(--u)*36)}
.np-btn svg{width:calc(var(--u)*34);height:calc(var(--u)*24)}
.np-play svg{width:calc(var(--u)*24);height:calc(var(--u)*27)}
.np-btn:active{opacity:.5}
.np-air{justify-self:end;width:calc(var(--u)*24);height:calc(var(--u)*24);color:rgba(255,255,255,.5)}
.np-sico{background:linear-gradient(160deg,#ff5f6d,#e5263b)}
.np-sico::after{content:"♪";display:grid;place-items:center;height:100%;color:#fff;font-size:15px;font-weight:700}
.np-panel{margin-bottom:10px}
.nthumb{float:right;width:calc(var(--u)*30);height:calc(var(--u)*30);margin:calc(var(--u)*3) 0 0 calc(var(--u)*8);border-radius:calc(var(--u)*6);object-fit:cover}


/* ===== Kuromi Dark Purple Glass Theme Overrides (Outer Page UI Only) ===== */
:root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: #130e22;
  --surface: rgba(255, 255, 255, .045);
  --field: rgba(8, 5, 18, .45);
  --fg: #f1edf8;
  --muted: #a79fba;
  --line: rgba(255, 255, 255, .1);
  --accent: #a78bfa;
  --grad: linear-gradient(95deg, #8b5cf6, #d4619f);
}
body {
  background:
    radial-gradient(900px 700px at 8% 0, rgba(124, 58, 237, .3), transparent 70%),
    radial-gradient(800px 800px at 100% 25%, rgba(190, 70, 140, .2), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg);
}
.cap-root {
  background: transparent !important;
}
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding-block: 24px 56px;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  display: grid;
  grid-template-columns: minmax(320px, 440px) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}
.phone-col {
  position: static;
  align-self: start;
  z-index: 20;
  width: 100%;
}
.preview-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
#capTopBtn {
  padding: 5px 12px;
  font-size: .78rem;
  border-radius: 999px;
}
.form-section {
  min-width: 0;
  width: 100%;
}
@media (max-width: 820px) {
  .wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .phone-col {
    position: static;
    justify-self: center;
    width: 100%;
    max-width: 440px;
  }
}
.phone-col.preview-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  display: grid;
  gap: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
}
.preview-box {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  overflow: hidden;
}
.preview-head {
  padding: 10px 14px 8px;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.preview-head-badge {
  font-size: .74rem;
  font-weight: 600;
  color: var(--fg);
  background: var(--field);
  border: 1px solid var(--line);
  padding: 2px 10px;
  border-radius: 999px;
}
.preview-stage {
  padding: 14px;
  background: rgba(8, 5, 18, .48);
}
.preview-stage .phone {
  max-width: 380px;
  margin-inline: auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 0 1px var(--line);
}
.head-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.head-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.head-title img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--line);
}
.head-title h1 {
  font-size: 1.55rem;
  line-height: 1.25;
  margin: 0;
  font-weight: 600;
}
.head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.clock-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .82rem;
  color: var(--muted);
}
.clock-pill strong {
  font-family: 'Clock SF', var(--font-phone);
  font-size: .92rem;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.panel {
  position: static !important;
  background: var(--surface);
  border: 1px solid var(--line);
}
.tabs {
  background: var(--field);
  border: 1px solid var(--line);
}
.tab[aria-selected="true"] {
  background: var(--grad);
  color: #fff;
}
.btn {
  background: var(--grad);
  color: #fff;
}
.btn.ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line);
}
.tin, .dtin, .stackSel {
  background: var(--field);
  color: var(--fg);
  border: 1px solid var(--line);
}
select.tin option, select.stackSel option, select.preset option {
  background: #1b142e;
  color: #f1edf8;
}
.capbox {
  background: #1b142e;
  border: 1px solid var(--line);
}
.capbar {
  padding: 12px 14px 8px;
  margin-top: 0;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
}
.preview-box .hint {
  margin: 0 0 10px;
}
.pair{display:flex;align-items:center;gap:6px;min-width:0}.pair input[type="date"].tin{flex:1.35;min-width:0}.pair input[type="time"].tin{flex:1;min-width:0}.pair input[type="datetime-local"].dtin{flex:1;min-width:0;width:auto}.pair .notif-now-btn{flex:none;white-space:nowrap;padding:6px 10px;font-size:.8rem}