/* Product screen mockups — homepage teaser + /product/ gallery */

.icon{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; vertical-align:-3px; flex-shrink:0; }

/* ---- Device frames ---- */
.phone{ width:220px; background:var(--dark); border-radius:22px; padding:6px; }
.phone .screen{ background:#fff; border-radius:17px; overflow:hidden; position:relative; height:452px; display:flex; flex-direction:column; font-size:12.5px; text-align:left; }
.phone .cam-dot{ width:34px; height:5px; background:var(--dark); border-radius:4px; margin:2px auto 0; }
.phone .statusbar{ display:flex; justify-content:space-between; padding:8px 16px 0; font-size:10px; font-weight:700; color:var(--dark); }
.phone .content{ flex:1; padding:12px 14px; display:flex; flex-direction:column; overflow:hidden; }
.phone .h1{ font-size:17px; font-weight:800; color:var(--dark); margin:6px 0 1px; }
.phone .h1sub{ font-size:10.5px; color:var(--text-light); margin-bottom:12px; }

.login-screen .content{ justify-content:center; align-items:center; text-align:center; }
.login-screen .glogo{ width:34px; height:34px; color:var(--dark); margin-bottom:10px; }
.login-screen .gname{ font-size:24px; font-weight:800; color:var(--dark); letter-spacing:-.3px; }
.login-screen .tag{ font-size:10.5px; color:var(--text-light); margin:6px 0 36px; }
.apple-btn{ background:#000; color:#fff; width:100%; padding:10px; border-radius:8px; font-weight:700; font-size:11.5px; text-align:center; }

.phone .card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; margin-bottom:8px; }
.phone .card .name{ font-weight:700; color:var(--dark); font-size:12.5px; }
.phone .card .addr{ color:var(--text-light); font-size:10.5px; margin-top:1px; }
.phone .row{ display:flex; gap:8px; margin-top:6px; align-items:center; }
.phone .tag{ font-size:9.5px; font-weight:700; padding:1px 0; color:var(--text-light); border-left:2px solid var(--line); padding-left:6px; }
.phone .tag.permanent{ border-color:var(--primary); color:var(--primary); }
.phone .tag.onetime{ border-color:var(--accent); color:var(--onetime-text); }
.phone .tag.scheduled{ border-color:var(--scheduled-line); color:var(--scheduled-text); }
.phone .plate{ font-family:'SF Mono',monospace; font-size:10px; color:var(--text-light); margin-left:auto; }

.tabbar{ display:flex; border-top:1px solid var(--line); }
.tabbar .tab{ flex:1; text-align:center; padding:8px 0 11px; font-size:9px; color:#a6b0ab; font-weight:600; display:flex; flex-direction:column; align-items:center; gap:3px; }
.tabbar .tab.active{ color:var(--primary); }

.fab{ position:absolute; right:14px; bottom:58px; background:var(--primary); color:#fff; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 14px rgba(45,106,79,0.35); }

.field-label{ font-size:10px; font-weight:700; color:var(--text); margin-bottom:4px; }
.field{ border:1.5px solid var(--line); border-radius:7px; padding:8px 10px; font-size:11.5px; color:var(--dark); font-weight:600; margin-bottom:12px; }
.switch-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.switch{ width:34px; height:19px; border-radius:20px; background:var(--primary); position:relative; }
.switch .knob{ width:15px; height:15px; background:#fff; border-radius:50%; position:absolute; top:2px; right:2px; }
.hint{ font-size:9.5px; color:var(--text-light); margin-bottom:14px; }
.btn-primary{ background:var(--primary); color:#fff; text-align:center; padding:10px; border-radius:8px; font-weight:700; font-size:11.5px; margin-top:4px; }
.select-field{ display:flex; justify-content:space-between; align-items:center; }
.select-field svg{ color:var(--text-light); }
.textarea-field{ min-height:38px; align-items:flex-start; color:var(--text-light); font-weight:400; font-size:10.5px; line-height:1.5; }

.qr-screen .content{ align-items:center; text-align:center; }
.qr-card{ background:#fff; border-radius:12px; padding:10px; border:1px solid var(--line); margin:10px 0; }
.qr-community{ font-weight:700; color:var(--dark); font-size:12.5px; }
.refresh-bar{ width:100%; height:4px; background:var(--bg-alt); border-radius:4px; overflow:hidden; margin-top:12px; }
.refresh-fill{ width:62%; height:100%; background:var(--primary-light); }
.refresh-label{ font-size:9.5px; color:var(--text-light); margin-top:5px; }
.gate-note{ margin-top:16px; font-size:10px; color:var(--text-light); border-top:1px solid var(--line); padding-top:10px; }

.screen.scan-screen{ background:#111417; }
.scan-status{ position:absolute; top:14px; left:14px; right:14px; color:#c7d4cd; font-size:10px; font-weight:600; text-align:center; z-index:2; }
.scan-frame{ position:absolute; top:38%; left:50%; transform:translate(-50%,-50%); width:130px; height:130px; }
.scan-frame .corner{ position:absolute; width:22px; height:22px; border:2.5px solid var(--primary-light); }
.scan-frame .tl{ top:0; left:0; border-right:none; border-bottom:none; border-radius:5px 0 0 0; }
.scan-frame .tr{ top:0; right:0; border-left:none; border-bottom:none; border-radius:0 5px 0 0; }
.scan-frame .bl{ bottom:0; left:0; border-right:none; border-top:none; border-radius:0 0 0 5px; }
.scan-frame .br{ bottom:0; right:0; border-left:none; border-top:none; border-radius:0 0 5px 0; }
.scan-banner{ position:absolute; left:0; right:0; bottom:0; background:var(--primary); color:#fff; padding:14px 16px 20px; text-align:center; }
.scan-banner .who{ font-weight:800; font-size:13px; margin-bottom:3px; }
.scan-banner .meta{ font-size:10px; opacity:.85; }

.notif-screen .content{ background:linear-gradient(165deg,#0e1018 0%,#1a1a2e 70%); align-items:center; padding-top:64px; position:relative; }
.lock-time{ font-size:46px; font-weight:200; color:#fff; letter-spacing:-1px; line-height:1; }
.lock-date{ font-size:11.5px; color:#8f9bb8; margin-top:4px; margin-bottom:34px; }

.notif-stack{ position:relative; width:100%; }
.notif-banner{ position:relative; z-index:2; width:100%; background:rgba(250,250,252,0.92); border-radius:15px; padding:11px 12px; display:flex; gap:9px; align-items:flex-start; box-shadow:0 14px 30px rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.5); }
.notif-banner.ghost{ position:absolute; z-index:1; left:8px; right:8px; top:7px; bottom:-7px; background:rgba(255,255,255,0.4); border:1px solid rgba(255,255,255,0.3); border-radius:15px; box-shadow:none; padding:0; }
.notif-banner .napp{ width:22px; height:22px; border-radius:6px; background:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.notif-banner .ntext{ flex:1; text-align:left; min-width:0; }
.notif-banner .nt-row{ display:flex; justify-content:space-between; align-items:baseline; }
.notif-banner .nt-title{ font-weight:700; font-size:9px; letter-spacing:.04em; color:#6b7280; }
.notif-banner .nt-time{ font-size:9px; color:#8a8f98; }
.notif-banner .nt-body{ font-size:11.5px; color:#111417; font-weight:600; margin-top:3px; line-height:1.35; }
.notif-banner .nt-sub{ font-size:9.5px; color:#6b7280; margin-top:2px; line-height:1.4; }

/* ---- Homepage teaser section ---- */
.teaser-section{ padding:4rem 5%; text-align:center; background:var(--bg); }
.teaser-section .section-sub{ max-width:520px; margin:0 auto 2.5rem; }
.teaser-phones{ display:flex; justify-content:center; align-items:flex-start; gap:1.6rem; flex-wrap:wrap; }
.teaser-phones .phone{ box-shadow:0 20px 40px rgba(20,30,25,0.16); }
.teaser-link{ display:inline-flex; align-items:center; gap:.4rem; margin-top:2.2rem; color:var(--primary); font-weight:700; font-size: 0.95rem; border:1.5px solid var(--primary); border-radius:8px; padding:.7rem 1.4rem; }
.teaser-link:hover{ background:var(--primary); color:#fff; }
.teaser-link svg{ width:16px; height:16px; }

/* ---- /product/ full gallery page ---- */
.product-header{ text-align:center; padding:3.5rem 5% 0; }
.product-header h1{ font-size:2rem; color:var(--dark); margin-bottom:.6rem; }
.product-header p{ color:var(--text-light); max-width:600px; margin:0 auto; font-size:1.05rem; line-height:1.65; }

.persona-section{ padding:3.5rem 5%; }
.persona-section.bg-alt{ background:var(--bg-alt); }
.persona-head{ text-align:center; max-width:600px; margin:0 auto 2.2rem; }
.persona-head .persona-kicker{ display:inline-block; color:var(--primary); font-size:0.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.5rem; }
.persona-head h2{ font-size:1.5rem; color:var(--dark); margin-bottom:.4rem; }
.persona-head p{ color:var(--text-light); font-size: 0.95rem; line-height:1.6; }

.gallery{ display:flex; gap:1.8rem; flex-wrap:wrap; justify-content:center; }
.gallery .item{ flex:0 0 auto; text-align:center; }
.gallery .item .label{ margin-top:.9rem; font-weight:700; color:var(--dark); font-size: 0.9rem; }
.gallery .item .sub{ color:var(--text-light); font-size:0.78rem; margin-top:.15rem; max-width:220px; margin-left:auto; margin-right:auto; }

.desktop-section{ padding:1rem 4vw 4rem; }
.desktop-section h2{ text-align:center; color:var(--dark); font-size:1.5rem; margin-bottom:.3rem; }
.desktop-section .section-sub{ text-align:center; margin-bottom:2rem; }

.desktop-row{ display:flex; gap:2rem; flex-wrap:wrap; justify-content:center; align-items:flex-start; }
.desktop-item{ flex:1 1 500px; max-width:580px; min-width:0; }
.desktop-item .label{ text-align:center; margin-top:.9rem; font-weight:700; color:var(--dark); font-size: 0.9rem; }
.desktop-item .sub{ text-align:center; color:var(--text-light); font-size:0.78rem; margin-top:.15rem; }
.scroll-hint{ display:none; text-align:center; color:var(--primary); font-size:0.72rem; font-weight:600; margin-top:.4rem; }
.scroll-hint.is-visible{ display:block; }

.browser{ width:100%; background:#fff; border-radius:10px; overflow:hidden; border:1px solid var(--line); box-shadow:0 16px 38px rgba(20,30,25,0.10); }
.browser-bar{ background:var(--bg-alt); padding:9px 12px; font-size:11px; color:var(--text-light); text-align:center; border-bottom:1px solid var(--line); }
.browser-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

@media (max-width:700px){
  .admin-body{ min-width:400px; }
  .kiosk-body{ min-width:420px; }
}

.admin-body{ display:flex; height:360px; font-size:12px; text-align:left; }
.admin-sidebar{ width:150px; background:var(--dark); color:#aeb9b4; padding:14px 0; flex-shrink:0; }
.admin-sidebar .alogo{ color:#fff; font-weight:800; font-size:13px; padding:0 14px 12px; border-bottom:1px solid rgba(255,255,255,0.1); margin-bottom:8px; }
.admin-sidebar .anav{ padding:8px 14px; display:flex; align-items:center; gap:8px; font-size:11.5px; }
.admin-sidebar .anav.active{ background:rgba(64,145,108,0.22); color:#fff; border-right:2px solid var(--primary-light); font-weight:700; }
.admin-main{ flex:1; background:var(--bg-alt); padding:16px 20px; overflow:hidden; }
.admin-main h3{ color:var(--dark); font-size:14px; margin-bottom:1px; }
.admin-main .amsub{ color:var(--text-light); font-size:10.5px; margin-bottom:12px; }
.stat-row{ display:flex; gap:10px; margin-bottom:14px; }
.stat-card{ flex:1; background:#fff; border-radius:8px; padding:9px 11px; border:1px solid var(--line); }
.stat-card .snum{ font-size:17px; font-weight:800; color:var(--dark); }
.stat-card .slab{ font-size:9.5px; color:var(--text-light); margin-top:1px; }
.stat-card.accent .snum{ color:var(--primary); }
.admin-table{ background:#fff; border-radius:8px; border:1px solid var(--line); overflow:hidden; }
.atr{ display:flex; padding:7px 12px; font-size:11px; border-bottom:1px solid var(--bg-alt); align-items:center; gap:8px; }
.atr.ahead{ background:var(--bg-alt); color:var(--text-light); font-weight:700; font-size:9.5px; text-transform:uppercase; letter-spacing:.03em; }
.atr .c1{ flex:1.4; font-weight:600; color:var(--dark); }
.atr .c2{ flex:1.3; color:var(--text-light); }
.atr .c3{ flex:1; font-family:monospace; }
.atr .c4{ flex:0.9; }

.kiosk-body{ background:var(--dark); color:#dbe2df; height:360px; display:flex; flex-direction:column; font-size:12px; text-align:left; }
.kiosk-top{ display:flex; justify-content:space-between; align-items:center; padding:12px 18px; border-bottom:1px solid rgba(255,255,255,0.08); }
.kiosk-top .kt-name{ font-weight:800; font-size:13px; }
.kiosk-top .kt-sub{ font-size:10px; color:#8ea89a; }
.kiosk-search{ margin:12px 18px 6px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:7px; padding:7px 10px; font-size:11px; color:#8ea89a; display:flex; align-items:center; gap:6px; }
.kiosk-cols{ flex:1; display:flex; gap:14px; padding:0 18px 14px; overflow:hidden; }
.kiosk-list{ flex:1.5; display:flex; flex-direction:column; gap:7px; overflow:hidden; }
.kiosk-card{ background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:9px 11px; display:flex; justify-content:space-between; align-items:center; }
.kiosk-card .kname{ font-weight:700; font-size:12px; }
.kiosk-card .kaddr{ font-size:10px; color:#8ea89a; margin-top:1px; }
.kiosk-verify{ background:var(--primary-light); color:#fff; font-weight:700; font-size:10px; padding:5px 10px; border-radius:5px; }
.kiosk-feed{ flex:1; background:rgba(255,255,255,0.03); border-radius:8px; padding:10px; border:1px solid rgba(255,255,255,0.06); }
.kiosk-feed h4{ font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:#8ea89a; margin:0 0 8px; font-weight:700; }
.kfeed-item{ font-size:11px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.06); }
.kfeed-item .kf-time{ color:#6e8a7c; font-size:10px; }