/* * Local Drive Media — optional Apple-inspired interface * Loaded by ui-mode.js and active only while . * The original CSS and markup remain the source of truth and are untouched. */ html[data-ui="apple"] { color-scheme: light; --apple-blue: #0071e3; --apple-blue-hover: #0077ed; --apple-green: #28a745; --apple-red: #d70015; --apple-orange: #ff9f0a; --apple-label: #1d1d1f; --apple-secondary: #6e6e73; --apple-tertiary: #86868b; --apple-bg: #f5f5f7; --apple-surface: #ffffff; --apple-surface-2: #fbfbfd; --apple-fill: rgba(118, 118, 128, .08); --apple-fill-strong: rgba(118, 118, 128, .14); --apple-line: rgba(0, 0, 0, .10); --apple-line-soft: rgba(0, 0, 0, .055); --apple-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 5px 18px rgba(0, 0, 0, .055); --apple-shadow-md: 0 12px 40px rgba(0, 0, 0, .10); --apple-shadow-lg: 0 24px 80px rgba(0, 0, 0, .17); --apple-radius-sm: 10px; --apple-radius: 16px; --apple-radius-lg: 24px; --apple-radius-xl: 32px; --apple-ease: cubic-bezier(.28, .11, .32, 1); /* Existing dashboard and page variables are remapped only in this mode. */ --bg: var(--apple-bg); --bg-deep: #ececf0; --surface: var(--apple-surface); --surface-2: var(--apple-surface-2); --card: var(--apple-surface); --ink: var(--apple-label); --ink-soft: var(--apple-secondary); --ink-faint: var(--apple-tertiary); --primary: var(--apple-blue); --primary-deep: #005bbf; --primary-tint: #e8f2ff; --accent: var(--apple-blue); --accent-deep: #005bbf; --accent-soft: #e8f2ff; --ok: var(--apple-green); --ok-deep: #1b7f37; --ok-tint: #eaf7ee; --danger: var(--apple-red); --danger-tint: #fff0f1; --danger-line: rgba(215, 0, 21, .22); --line: var(--apple-line); --line-soft: var(--apple-line-soft); --sand: var(--apple-line); --ivory: var(--apple-bg); --maroon: var(--apple-blue); --maroon-deep: #005bbf; --marigold: var(--apple-orange); --wa: var(--apple-green); --wa-deep: #1b7f37; --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; --font-mono: "SFMono-Regular", ui-monospace, Menlo, monospace; --shadow-1: var(--apple-shadow-sm); --shadow-2: var(--apple-shadow-sm); --shadow-3: var(--apple-shadow-md); --shadow-pop: var(--apple-shadow-lg); --ring: 0 0 0 4px rgba(0, 113, 227, .22); --ring-danger: 0 0 0 4px rgba(215, 0, 21, .16); --r-sm: var(--apple-radius-sm); --r-md: 12px; --r-lg: var(--apple-radius); --r-xl: var(--apple-radius-lg); --ease: var(--apple-ease); } html[data-ui="apple"], html[data-ui="apple"] body { width: 100%; max-width: 100%; min-height: 100%; overflow-x: clip; } html[data-ui="apple"] body { margin: 0; background: var(--apple-bg); color: var(--apple-label); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.47; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html[data-ui="apple"] *, html[data-ui="apple"] *::before, html[data-ui="apple"] *::after { box-sizing: border-box; } html[data-ui="apple"] img, html[data-ui="apple"] video, html[data-ui="apple"] canvas, html[data-ui="apple"] table { max-width: 100%; } html[data-ui="apple"] button, html[data-ui="apple"] input, html[data-ui="apple"] select, html[data-ui="apple"] textarea { font: inherit; } html[data-ui="apple"] :where(button, a, input, select, textarea):focus-visible { outline: none; box-shadow: var(--ring); } html[data-ui="apple"] :where(p, span, div, td, th, h1, h2, h3, h4) { overflow-wrap: anywhere; } html[data-ui="apple"] ::selection { background: rgba(0, 113, 227, .20); } /* ======================================================================== ADMIN — laptop application shell ======================================================================== */ html[data-ui="apple"][data-page="admin"] body { background: radial-gradient(900px 500px at 70% -180px, rgba(0, 113, 227, .10), transparent 70%), var(--apple-bg); } html[data-ui="apple"] #app { display: grid; width: 100%; min-width: 0; height: 100dvh; grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: 68px minmax(0, 1fr); grid-template-areas: "side top" "side main"; transition: grid-template-columns .35s var(--apple-ease); } html[data-ui="apple"] #app.rail { grid-template-columns: 72px minmax(0, 1fr); } html[data-ui="apple"] #app aside { grid-area: side; min-width: 0; overflow: hidden; color: var(--apple-label); background: rgba(251, 251, 253, .86); border-right: 1px solid var(--apple-line); box-shadow: none; backdrop-filter: saturate(180%) blur(26px); -webkit-backdrop-filter: saturate(180%) blur(26px); } html[data-ui="apple"] #app aside::before { display: none; } html[data-ui="apple"] #app .brand { min-width: 0; padding: 18px 16px 12px; gap: 10px; color: var(--apple-label); font-family: var(--font-display); font-size: 15px; font-weight: 650; letter-spacing: -.02em; } html[data-ui="apple"] #app .brand .cam-ico { width: 34px; height: 34px; border: 0; border-radius: 10px; background: linear-gradient(145deg, #147ce5, #0061c9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 3px 10px rgba(0, 97, 201, .25); font-size: 16px; } html[data-ui="apple"] #app .side-tools { padding: 5px 12px 12px; } html[data-ui="apple"] #newEvBtn { min-height: 38px; border: 0; border-radius: 11px; color: #fff; background: var(--apple-blue); box-shadow: none; font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: -.01em; } html[data-ui="apple"] #newEvBtn:hover { background: var(--apple-blue-hover); filter: none; box-shadow: 0 6px 18px rgba(0, 113, 227, .19); } html[data-ui="apple"] #evSearch { height: 38px; margin-top: 9px; padding: 0 12px 0 34px; border: 0; border-radius: 11px; color: var(--apple-label); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E") 12px 50% / 14px no-repeat, rgba(118, 118, 128, .10); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .02); } html[data-ui="apple"] #evSearch::placeholder { color: var(--apple-tertiary); } html[data-ui="apple"] #evSearch:focus, html[data-ui="apple"] #evSearch:focus-visible { border: 0; background-color: #fff; box-shadow: var(--ring), inset 0 0 0 1px rgba(0, 113, 227, .28); } html[data-ui="apple"] nav#evNav { padding: 3px 9px 14px; } html[data-ui="apple"] .navhead { padding: 15px 9px 6px; color: var(--apple-tertiary); font-size: 10px; font-weight: 650; letter-spacing: .08em; } html[data-ui="apple"] .evitem { min-width: 0; min-height: 44px; gap: 10px; padding: 7px 10px; border-radius: 11px; color: var(--apple-label); font-size: 13px; transition: background .18s var(--apple-ease), transform .18s var(--apple-ease); } html[data-ui="apple"] .evitem::before { display: none; } html[data-ui="apple"] .evitem:hover { background: var(--apple-fill); } html[data-ui="apple"] .evitem.sel { color: var(--apple-label); background: rgba(0, 113, 227, .11); box-shadow: none; } html[data-ui="apple"] .dot { width: 8px; height: 8px; } html[data-ui="apple"] .dot.on { background: #30d158; box-shadow: 0 0 0 3px rgba(48, 209, 88, .13); } html[data-ui="apple"] .dot.off { background: #aeaeb2; } html[data-ui="apple"] .evmeta { flex: 1; min-width: 0; } html[data-ui="apple"] .evmeta .nm { font-weight: 600; letter-spacing: -.01em; } html[data-ui="apple"] .evmeta .sub2 { color: var(--apple-tertiary); font-size: 10.5px; } html[data-ui="apple"] .collapse-btn { min-height: 36px; margin: 9px 12px 12px; border: 0; border-radius: 10px; background: var(--apple-fill); color: var(--apple-secondary); } html[data-ui="apple"] .collapse-btn:hover { background: var(--apple-fill-strong); color: var(--apple-label); } html[data-ui="apple"] #app.rail .brand { padding: 18px 19px 12px; } html[data-ui="apple"] #app.rail .evitem { padding-block: 12px; } html[data-ui="apple"] header#top { grid-area: top; min-width: 0; min-height: 68px; gap: 13px; padding: 0 26px; color: var(--apple-label); background: rgba(245, 245, 247, .78); border-bottom: 1px solid var(--apple-line); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); } html[data-ui="apple"] header#top::after { display: none; } html[data-ui="apple"] header#top > div:first-child { flex: 1 1 220px; min-width: 0 !important; } html[data-ui="apple"] #topName { color: var(--apple-label); font-family: var(--font-display); font-size: 20px; font-weight: 650; letter-spacing: -.025em; } html[data-ui="apple"] .codechip, html[data-ui="apple"] .rolechip { flex: none; border: 0; color: #005bbf; background: rgba(0, 113, 227, .10); font-family: var(--font-ui); font-size: 10px; font-weight: 650; letter-spacing: .02em; white-space: nowrap; } html[data-ui="apple"] #renameBtn { width: 30px; height: 30px; padding: 0; border-radius: 50%; color: var(--apple-blue); } html[data-ui="apple"] #renameBtn:hover { color: var(--apple-blue-hover); background: rgba(0, 113, 227, .10); } html[data-ui="apple"] #topStats { flex: 0 1 auto; min-width: 0; gap: 14px; margin-left: 0; color: var(--apple-secondary); font-size: 11px; } html[data-ui="apple"] #topStats b { color: var(--apple-label); } html[data-ui="apple"] .health { min-height: 34px; padding: 0 11px; border: 0; border-radius: 999px; background: rgba(118, 118, 128, .09); box-shadow: none; color: var(--apple-secondary); font-size: 11px; } html[data-ui="apple"] #healthDot { width: 7px; height: 7px; } html[data-ui="apple"] #healthDot.ok { background: #30d158; } html[data-ui="apple"] #logout { white-space: nowrap; min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(118, 118, 128, .10); color: var(--apple-label); box-shadow: none; font-size: 11px; font-weight: 600; } html[data-ui="apple"] #logout:hover { border: 0; color: var(--apple-label); background: rgba(118, 118, 128, .17); box-shadow: none; } html[data-ui="apple"] #app main { grid-area: main; min-width: 0; overflow-x: hidden; overflow-y: auto; padding: 0 30px 64px; background: transparent; overscroll-behavior: contain; } html[data-ui="apple"] #app main > :not(.tabs) { width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; } html[data-ui="apple"] .tabs { gap: 5px; margin: 0 -30px 3px; padding: 10px 30px 8px; border: 0; background: rgba(245, 245, 247, .82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } html[data-ui="apple"] .tab { min-height: 36px; padding: 0 14px; border-radius: 999px; color: var(--apple-secondary); font-size: 12px; font-weight: 600; letter-spacing: -.01em; } html[data-ui="apple"] .tab::after { display: none; } html[data-ui="apple"] .tab:hover { color: var(--apple-label); background: var(--apple-fill); } html[data-ui="apple"] .tab.on { color: var(--apple-label); background: var(--apple-surface); box-shadow: var(--apple-shadow-sm); } html[data-ui="apple"] .tab.dngr { color: var(--apple-secondary); opacity: 1; } html[data-ui="apple"] .tab.dngr.on { color: var(--apple-red); background: #fff; } html[data-ui="apple"] .panel { min-width: 0; padding-top: 22px; } html[data-ui="apple"] .panel.on { animation: apple-panel-in .32s var(--apple-ease); } @keyframes apple-panel-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } html[data-ui="apple"] #app .card { min-width: 0; margin-bottom: 18px; padding: 20px; border: 1px solid var(--apple-line-soft); border-radius: var(--apple-radius-lg); background: rgba(255, 255, 255, .94); box-shadow: var(--apple-shadow-sm); } html[data-ui="apple"] #app h3 { margin-bottom: 14px; color: var(--apple-label); font-size: 14px; font-weight: 650; letter-spacing: -.015em; } html[data-ui="apple"] .hintline { color: var(--apple-secondary); font-size: 11.5px; } html[data-ui="apple"] .statrow { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } html[data-ui="apple"] .stat { min-width: 0; padding: 19px 20px 17px; overflow: hidden; border: 1px solid var(--apple-line-soft); border-radius: var(--apple-radius-lg); background: rgba(255, 255, 255, .94); box-shadow: var(--apple-shadow-sm); } html[data-ui="apple"] .stat::before { top: 14px; right: 14px; left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--apple-blue); opacity: .76; } html[data-ui="apple"] .stat:nth-child(2)::before { background: #30d158; } html[data-ui="apple"] .stat:nth-child(3)::before { background: #af52de; } html[data-ui="apple"] .stat:nth-child(4)::before { background: #ff9f0a; } html[data-ui="apple"] .stat:hover { transform: translateY(-2px); border-color: var(--apple-line); box-shadow: var(--apple-shadow-md); } html[data-ui="apple"] .stat .lbl { max-width: calc(100% - 12px); color: var(--apple-secondary); font-size: 10px; font-weight: 600; letter-spacing: .04em; } html[data-ui="apple"] .stat .val { margin: 6px 0 0; padding: 0; color: var(--apple-label); font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); font-weight: 650; letter-spacing: -.04em; } html[data-ui="apple"] .stat .val.bump { color: var(--apple-blue); background: transparent; } html[data-ui="apple"] #lastUpd { margin: 9px 2px 18px; color: var(--apple-tertiary); font-size: 10.5px; } html[data-ui="apple"] .ovgrid { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(310px, 390px); gap: 18px; } html[data-ui="apple"] #drop { min-height: 144px; display: grid; place-items: center; padding: 28px 18px; border: 1px dashed rgba(0, 113, 227, .38); border-radius: var(--apple-radius); color: var(--apple-secondary); background: rgba(0, 113, 227, .035); } html[data-ui="apple"] #drop b { color: var(--apple-blue); font-weight: 600; } html[data-ui="apple"] #drop:hover, html[data-ui="apple"] #drop.hot { border-color: var(--apple-blue); background: rgba(0, 113, 227, .08); box-shadow: inset 0 0 0 1px rgba(0, 113, 227, .12); transform: none; } html[data-ui="apple"] #upStatus { color: var(--apple-secondary); font-size: 12px; } html[data-ui="apple"] .qrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } html[data-ui="apple"] .qrow > span { min-width: 0; padding: 8px 9px; border-radius: 10px; background: var(--apple-fill); text-align: center; font-size: 11px; } html[data-ui="apple"] .qrow > .hintline { grid-column: 1 / -1; background: transparent; text-align: left; } html[data-ui="apple"] .qfail .fr { min-width: 0; border: 0; border-radius: 11px; background: #fff0f1; } html[data-ui="apple"] .counters { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } html[data-ui="apple"] .counterbox { min-width: 0; padding: 16px 10px 14px; border: 1px solid var(--apple-line-soft); border-radius: var(--apple-radius); background: var(--apple-surface-2); box-shadow: none; } html[data-ui="apple"] .counterbox:hover { border-color: var(--apple-line); box-shadow: var(--apple-shadow-sm); } html[data-ui="apple"] .counterbox h4 { color: var(--apple-label); font-family: var(--font-ui); font-size: 12px; } html[data-ui="apple"] .counterbox canvas { width: min(132px, calc(100% - 18px)); height: auto; aspect-ratio: 1; border-radius: 10px; box-shadow: 0 0 0 5px #fff, 0 0 0 6px var(--apple-line); } html[data-ui="apple"] .counterbox .cnt { color: var(--apple-secondary); font-size: 10.5px; } html[data-ui="apple"] #feedCard { padding: 0; overflow: hidden; } html[data-ui="apple"] #feedHead { padding: 14px 17px; border-color: var(--apple-line-soft); background: transparent; } html[data-ui="apple"] .livepill { border: 0; color: #1b7f37; background: #eaf7ee; } html[data-ui="apple"] .livepill .dot2 { background: #30d158; } html[data-ui="apple"] #newPill { color: #fff; background: var(--apple-blue); box-shadow: none; } html[data-ui="apple"] #feed { max-height: 570px; } html[data-ui="apple"] .fitem { min-width: 0; gap: 10px; padding: 10px 17px; border-color: var(--apple-line-soft); font-size: 12px; } html[data-ui="apple"] .fitem:hover { background: var(--apple-fill); } html[data-ui="apple"] .fitem.fresh { background: #edf6ff; } html[data-ui="apple"] .fico { border: 0; border-radius: 8px; background: var(--apple-fill); } html[data-ui="apple"] .ftime { color: var(--apple-tertiary); font-size: 10px; } html[data-ui="apple"] .mini, html[data-ui="apple"] .btn, html[data-ui="apple"] .btn-red { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; border: 0; border-radius: 999px; color: var(--apple-label); background: var(--apple-fill); box-shadow: none; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; } html[data-ui="apple"] .mini:hover { border: 0; color: var(--apple-label); background: var(--apple-fill-strong); box-shadow: none; } html[data-ui="apple"] .mini.wa { border: 0; color: #fff; background: var(--apple-green); box-shadow: none; } html[data-ui="apple"] .mini.wa:hover { border: 0; background: #23953e; box-shadow: none; filter: none; } html[data-ui="apple"] .mini.red { border: 0; color: var(--apple-red); background: rgba(215, 0, 21, .08); } html[data-ui="apple"] .mini.red:hover { border: 0; color: #fff; background: var(--apple-red); box-shadow: none; } html[data-ui="apple"] .btn { color: #fff; background: var(--apple-blue); } html[data-ui="apple"] .btn:hover { background: var(--apple-blue-hover); filter: none; box-shadow: none; } html[data-ui="apple"] .btn-red { color: var(--apple-red); background: rgba(215, 0, 21, .08); } html[data-ui="apple"] .btn-red:enabled:hover { border: 0; color: #fff; background: var(--apple-red); box-shadow: none; } html[data-ui="apple"] .photo-tools { min-width: 0; padding: 10px 13px; border: 0; border-radius: var(--apple-radius); background: rgba(255, 255, 255, .90); box-shadow: var(--apple-shadow-sm); } html[data-ui="apple"] .photo-tools select, html[data-ui="apple"] #srtPhotos { min-height: 34px; border: 0 !important; border-radius: 9px !important; color: var(--apple-label); background-color: var(--apple-fill) !important; box-shadow: none; } html[data-ui="apple"] input[type="checkbox"] { accent-color: var(--apple-blue); } html[data-ui="apple"] .pgrid { display: grid; min-width: 0; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; } html[data-ui="apple"] .ph { min-width: 0; } html[data-ui="apple"] .ph a { overflow: hidden; border-radius: var(--apple-radius); background: #e8e8ed; } html[data-ui="apple"] .ph img { border: 0; border-radius: var(--apple-radius); box-shadow: var(--apple-shadow-sm); transition: transform .35s var(--apple-ease), box-shadow .35s var(--apple-ease); } html[data-ui="apple"] .ph a:hover img { transform: scale(1.015); box-shadow: var(--apple-shadow-md); } html[data-ui="apple"] .ph .cap { color: var(--apple-secondary); } html[data-ui="apple"] .ph .cap .fname { color: var(--apple-tertiary); } html[data-ui="apple"] .tbl-tools { border-color: var(--apple-line-soft); background: transparent; } html[data-ui="apple"] table { table-layout: auto; color: var(--apple-label); } html[data-ui="apple"] th { color: var(--apple-secondary); background: rgba(251, 251, 253, .96); border-color: var(--apple-line); } html[data-ui="apple"] td { border-color: var(--apple-line-soft); } html[data-ui="apple"] tbody tr:hover { background: var(--apple-fill); } html[data-ui="apple"] .reveal { border-color: var(--apple-tertiary); } html[data-ui="apple"] .dz { overflow: hidden; border: 1px solid rgba(215, 0, 21, .16); border-radius: var(--apple-radius-lg); background: #fff; box-shadow: var(--apple-shadow-sm); } html[data-ui="apple"] .dzrow { background: #fff; border-color: rgba(215, 0, 21, .10); } html[data-ui="apple"] .dzrow .tx span { color: var(--apple-secondary); } html[data-ui="apple"] #delConfirm input, html[data-ui="apple"] #newEvForm input, html[data-ui="apple"] #loginWrap input { min-height: 44px; border: 1px solid var(--apple-line); border-radius: 12px; color: var(--apple-label); background: rgba(118, 118, 128, .06); box-shadow: none; } html[data-ui="apple"] #delConfirm input:focus, html[data-ui="apple"] #newEvForm input:focus, html[data-ui="apple"] #loginWrap input:focus { border-color: rgba(0, 113, 227, .42); background: #fff; box-shadow: var(--ring); } html[data-ui="apple"] #loginWrap { background: radial-gradient(700px 440px at 50% -80px, rgba(0, 113, 227, .15), transparent 70%), var(--apple-bg); } html[data-ui="apple"] #loginWrap .card { width: 400px; padding: 32px; border: 1px solid rgba(255, 255, 255, .76); border-radius: var(--apple-radius-lg); background: rgba(255, 255, 255, .76); box-shadow: var(--apple-shadow-lg); backdrop-filter: saturate(180%) blur(28px); -webkit-backdrop-filter: saturate(180%) blur(28px); } html[data-ui="apple"] #loginWrap .card::before { display: none; } html[data-ui="apple"] #loginWrap h3 { color: var(--apple-label) !important; font-family: var(--font-display) !important; } html[data-ui="apple"] #newEvForm { margin-top: 18px; } html[data-ui="apple"] #toast { bottom: 24px; border: 0; border-radius: 999px; background: rgba(29, 29, 31, .90); color: #fff; } /* Laptop widths: preserve space without compressing content into overflow. */ @media (min-width: 769px) and (max-width: 1279px) { html[data-ui="apple"] #app { grid-template-columns: 224px minmax(0, 1fr); } html[data-ui="apple"] #app.rail { grid-template-columns: 68px minmax(0, 1fr); } html[data-ui="apple"] header#top { padding-inline: 20px; } html[data-ui="apple"] #healthTx { display: none; } html[data-ui="apple"] #topStats span:nth-child(n+4) { display: none; } html[data-ui="apple"] #app main { padding-inline: 22px; } html[data-ui="apple"] .tabs { margin-inline: -22px; padding-inline: 22px; } html[data-ui="apple"] .statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-ui="apple"] .ovgrid { grid-template-columns: minmax(0, 1fr); } html[data-ui="apple"] .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-ui="apple"] #feed { max-height: 390px; } } @media (min-width: 769px) and (max-width: 900px) { html[data-ui="apple"] #topStats span:nth-child(n+3) { display: none; } } /* At compact laptop widths the seven-column guest table becomes readable summary cards instead of creating a sideways-scrolling data sheet. */ @media (min-width: 769px) and (max-width: 1100px) { html[data-ui="apple"] #panel-guests > .card { padding: 0; overflow: visible !important; border: 0; background: transparent; box-shadow: none; } html[data-ui="apple"] #guestTable thead { display: none; } html[data-ui="apple"] #guestTable, html[data-ui="apple"] #guestTable tbody { display: block; width: 100%; } html[data-ui="apple"] #guestTable tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; min-width: 0; margin: 0 0 12px; padding: 8px; overflow: hidden; border: 1px solid var(--apple-line-soft); border-radius: 20px; background: #fff; box-shadow: var(--apple-shadow-sm); } html[data-ui="apple"] #guestTable td { display: flex; min-width: 0; height: auto; padding: 10px; flex-direction: column; align-items: flex-start; gap: 4px; border: 0; } html[data-ui="apple"] #guestTable td::before { display: block; color: var(--apple-tertiary); font-size: 9px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; } html[data-ui="apple"] #guestTable td:nth-child(1)::before { content: "Guest"; } html[data-ui="apple"] #guestTable td:nth-child(2)::before { content: "WhatsApp"; } html[data-ui="apple"] #guestTable td:nth-child(3)::before { content: "Enrolled"; } html[data-ui="apple"] #guestTable td:nth-child(4)::before { content: "Counter"; } html[data-ui="apple"] #guestTable td:nth-child(5)::before { content: "Photos"; } html[data-ui="apple"] #guestTable td:nth-child(6)::before { content: "Send gallery"; } html[data-ui="apple"] #guestTable td:nth-child(7)::before { content: "Actions"; } html[data-ui="apple"] #guestTable td:nth-child(6), html[data-ui="apple"] #guestTable td:nth-child(7) { grid-column: span 3; flex-flow: row wrap; align-items: center; } html[data-ui="apple"] #guestTable td:nth-child(6)::before, html[data-ui="apple"] #guestTable td:nth-child(7)::before { flex-basis: 100%; } } /* ======================================================================== ADMIN — phone application shell ======================================================================== */ @media (max-width: 768px) { html[data-ui="apple"] #app, html[data-ui="apple"] #app.rail { height: 100dvh; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "top" "main"; } html[data-ui="apple"] #app aside { position: fixed; inset: 0 auto 0 0; z-index: 90; width: min(340px, 90vw); padding-top: max(6px, env(safe-area-inset-top)); visibility: hidden; transform: translateX(-104%); border-right: 1px solid rgba(0, 0, 0, .08); border-radius: 0 24px 24px 0; background: rgba(249, 249, 251, .94); box-shadow: none; transition: transform .35s var(--apple-ease), visibility .35s; } html[data-ui="apple"] #app.mb-drawer-open aside { visibility: visible; transform: translateX(0); box-shadow: 24px 0 80px rgba(0, 0, 0, .22); } html[data-ui="apple"] #app.rail .brand span, html[data-ui="apple"] #app.rail .side-tools, html[data-ui="apple"] #app.rail .navhead, html[data-ui="apple"] #app.rail .evmeta { display: block; } html[data-ui="apple"] #app.rail .brand { justify-content: flex-start; padding: 14px 16px 10px; } html[data-ui="apple"] #app.mb-drawer-open .brand, html[data-ui="apple"] #app.rail.mb-drawer-open .brand { padding-left: 60px; } html[data-ui="apple"] #app.rail .evitem { justify-content: flex-start; padding: 7px 10px; } html[data-ui="apple"] .collapse-btn { display: none; } html[data-ui="apple"] #mbMenuBtn { display: grid; place-items: center; position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 10px; z-index: 110; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; color: var(--apple-label); background: rgba(255, 255, 255, .86); box-shadow: var(--apple-shadow-sm); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); font-size: 0; } html[data-ui="apple"] #mbMenuBtn::before { content: ""; width: 17px; height: 12px; border-top: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; box-shadow: inset 0 4.9px 0 -3.1px currentColor; } html[data-ui="apple"][data-page="admin"] body:has(#loginWrap[style*="display: flex"]) #mbMenuBtn { display: none; } html[data-ui="apple"] #mbBackdrop { display: block; position: fixed; inset: 0; z-index: 80; opacity: 0; pointer-events: none; background: rgba(0, 0, 0, .30); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); transition: opacity .3s var(--apple-ease); } html[data-ui="apple"] #app.mb-drawer-open ~ #mbBackdrop { opacity: 1; pointer-events: auto; } html[data-ui="apple"] header#top { position: relative; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-auto-rows: auto; min-height: calc(64px + env(safe-area-inset-top)); padding: calc(10px + env(safe-area-inset-top)) 10px 8px 62px; gap: 6px 7px; background: rgba(245, 245, 247, .88); } html[data-ui="apple"] header#top > div:first-child { grid-column: 1; grid-row: 1; min-width: 0; gap: 5px !important; } html[data-ui="apple"] #topName { font-size: 17px; } html[data-ui="apple"] .codechip { max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-ui="apple"] .rolechip { display: none !important; } html[data-ui="apple"] #renameBtn { width: 36px; height: 36px; flex: none; } html[data-ui="apple"] .health { grid-column: 2; grid-row: 1; width: 34px; min-height: 34px; padding: 0; justify-content: center; } html[data-ui="apple"] #healthTx { display: none; } html[data-ui="apple"] #logout { grid-column: 3; grid-row: 1; width: 36px; min-height: 34px; padding: 0; overflow: hidden; color: transparent; font-size: 0; } html[data-ui="apple"] #logout::before { content: "↗"; color: var(--apple-label); font-size: 17px; transform: rotate(45deg); } html[data-ui="apple"] #topStats { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: calc(100vw - 72px); gap: 6px; margin: 0; padding: 1px 0 2px; overflow: visible; white-space: nowrap; white-space: normal; } html[data-ui="apple"] #topStats span { min-width: 0; padding: 5px 9px; overflow: hidden; border-radius: 999px; background: rgba(118, 118, 128, .09); text-overflow: ellipsis; white-space: nowrap; } html[data-ui="apple"] #app main { min-width: 0; padding: 0 12px calc(112px + env(safe-area-inset-bottom)); overflow-x: hidden; } html[data-ui="apple"] .tabs { position: fixed; inset: auto 8px calc(7px + env(safe-area-inset-bottom)) 8px; z-index: 70; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; height: 62px; margin: 0; padding: 4px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .09); border-radius: 21px; background: rgba(250, 250, 252, .88); box-shadow: 0 10px 40px rgba(0, 0, 0, .18); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); } html[data-ui="apple"] .tab, html[data-ui="apple"] .tab.dngr { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 52px; margin: 0; padding: 2px; border-radius: 17px; color: var(--apple-secondary); background: transparent; box-shadow: none; font-size: 0; opacity: 1; } html[data-ui="apple"] .tab::before { display: block; margin-bottom: 3px; font-size: 18px; font-weight: 500; line-height: 1; } html[data-ui="apple"] .tab::after { display: block; position: static; width: auto; height: auto; background: none; transform: none; color: inherit; font-size: 9px; font-weight: 600; line-height: 1; } html[data-ui="apple"] .tab[data-tab="overview"]::before { content: "◫"; } html[data-ui="apple"] .tab[data-tab="overview"]::after { content: "Overview"; } html[data-ui="apple"] .tab[data-tab="photos"]::before { content: "▧"; } html[data-ui="apple"] .tab[data-tab="photos"]::after { content: "Photos"; } html[data-ui="apple"] .tab[data-tab="guests"]::before { content: "♙"; } html[data-ui="apple"] .tab[data-tab="guests"]::after { content: "Guests"; } html[data-ui="apple"] .tab[data-tab="danger"]::before { content: "⊙"; } html[data-ui="apple"] .tab[data-tab="danger"]::after { content: "Settings"; } html[data-ui="apple"] .tab.on { color: var(--apple-blue); background: rgba(0, 113, 227, .09); } html[data-ui="apple"] .tab.dngr.on { color: var(--apple-red); background: rgba(215, 0, 21, .07); } html[data-ui="apple"] .panel { min-width: 0; padding-top: 12px; } html[data-ui="apple"] #app .card { padding: 17px; margin-bottom: 12px; border-radius: 20px; } html[data-ui="apple"] #app h3 { font-size: 14px; line-height: 1.3; } html[data-ui="apple"] .hintline { display: block; margin-top: 3px; line-height: 1.4; } html[data-ui="apple"] .statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } html[data-ui="apple"] .stat { padding: 16px; border-radius: 19px; } html[data-ui="apple"] .stat .lbl { min-height: 2.5em; font-size: 9px; line-height: 1.25; } html[data-ui="apple"] .stat .val { font-size: 30px; } html[data-ui="apple"] #lastUpd { margin: 8px 3px 12px; line-height: 1.4; } html[data-ui="apple"] .ovgrid { grid-template-columns: minmax(0, 1fr); gap: 0; } html[data-ui="apple"] #drop { min-height: 116px; padding: 22px 14px; } html[data-ui="apple"] .qrow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } html[data-ui="apple"] .qrow > span { padding: 9px 7px; } html[data-ui="apple"] .counters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 2px 0 4px; overflow: visible; } html[data-ui="apple"] .counterbox { min-width: 0; max-width: none; } html[data-ui="apple"] #feed { max-height: 330px; } html[data-ui="apple"] .fitem { align-items: flex-start; padding: 11px 14px; } html[data-ui="apple"] .ftime { max-width: 58px; white-space: normal; text-align: right; } html[data-ui="apple"] .mini, html[data-ui="apple"] .btn, html[data-ui="apple"] .btn-red { min-height: 44px; padding-inline: 15px; } html[data-ui="apple"] input, html[data-ui="apple"] select { font-size: 16px !important; } html[data-ui="apple"] .photo-tools { gap: 7px 10px; margin-bottom: 12px; padding: 10px; } html[data-ui="apple"] .photo-tools label { min-height: 38px; } html[data-ui="apple"] .photo-tools .hintline { width: 100%; margin: 0; } html[data-ui="apple"] .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } html[data-ui="apple"] .ph .cap { font-size: 10.5px; } html[data-ui="apple"] .ph .cap .fname { max-width: 100%; } html[data-ui="apple"] #panel-guests > .card { padding: 0; overflow: visible !important; background: transparent; box-shadow: none; border: 0; } html[data-ui="apple"] .tbl-tools { padding: 6px 3px 10px; border: 0; } html[data-ui="apple"] #guestTable thead { display: none; } html[data-ui="apple"] #guestTable, html[data-ui="apple"] #guestTable tbody { display: block; width: 100%; } html[data-ui="apple"] #guestTable tr { display: block; width: 100%; min-width: 0; margin: 0 0 10px; padding: 7px 0; overflow: hidden; border: 1px solid var(--apple-line-soft); border-radius: 20px; background: #fff; box-shadow: var(--apple-shadow-sm); } html[data-ui="apple"] #guestTable td { display: grid; grid-template-columns: minmax(72px, 27%) minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; min-width: 0; height: auto; padding: 8px 13px; border-color: var(--apple-line-soft); } html[data-ui="apple"] #guestTable td::before { display: block; min-width: 0; margin: 0; color: var(--apple-tertiary); font-size: 9px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; } html[data-ui="apple"] #guestTable td:nth-child(1)::before { content: "Guest"; } html[data-ui="apple"] #guestTable td:nth-child(2)::before { content: "WhatsApp"; } html[data-ui="apple"] #guestTable td:nth-child(3)::before { content: "Enrolled"; } html[data-ui="apple"] #guestTable td:nth-child(4)::before { content: "Counter"; } html[data-ui="apple"] #guestTable td:nth-child(5)::before { content: "Photos"; } html[data-ui="apple"] #guestTable td:nth-child(6)::before { content: "Send"; } html[data-ui="apple"] #guestTable td:nth-child(7)::before { content: "Actions"; } html[data-ui="apple"] #guestTable td.rowact { display: grid; white-space: normal; } html[data-ui="apple"] #guestTable td.rowact > :not(:first-child) { margin-top: 5px; } html[data-ui="apple"] #guestTable td.rowact .mini { width: 100%; margin: 0 0 5px; } html[data-ui="apple"] .reveal { padding: 5px 0; } html[data-ui="apple"] .dzrow { flex-direction: column; align-items: stretch; padding: 17px; } html[data-ui="apple"] .dzrow .btn-red { width: 100%; } html[data-ui="apple"] #delConfirm { flex-direction: column; align-items: stretch; } html[data-ui="apple"] #delConfirm input { width: 100%; } html[data-ui="apple"] #newEvForm .frow { flex-direction: column; } html[data-ui="apple"] #newEvForm input, html[data-ui="apple"] #newEvForm .btn { width: 100%; flex: none !important; } html[data-ui="apple"] #loginWrap .card { max-width: calc(100vw - 28px); padding: 25px 20px; } html[data-ui="apple"] #toast { bottom: calc(82px + env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); } } @media (max-width: 370px) { html[data-ui="apple"] header#top { padding-left: 58px; } html[data-ui="apple"] #topName { font-size: 15px; } html[data-ui="apple"] .codechip { display: none; } html[data-ui="apple"] .stat { padding: 14px; } html[data-ui="apple"] .stat .val { font-size: 27px; } html[data-ui="apple"] .pgrid { gap: 8px; } html[data-ui="apple"] #guestTable td { grid-template-columns: 68px minmax(0, 1fr); padding-inline: 11px; } } @media (max-width: 430px) { html[data-ui="apple"] .counters { grid-template-columns: minmax(0, 1fr); } } /* ======================================================================== SIMPLE EVENT FLOWS — enrollment, selfie finder, and stall ======================================================================== */ html[data-ui="apple"][data-page="enroll"] body, html[data-ui="apple"][data-page="find"] body, html[data-ui="apple"][data-page="stall"] body { min-height: 100dvh; background: radial-gradient(560px 300px at 50% -60px, rgba(0, 113, 227, .14), transparent 72%), var(--apple-bg); } html[data-ui="apple"][data-page="enroll"] .toran, html[data-ui="apple"][data-page="find"] .toran, html[data-ui="apple"][data-page="stall"] .toran, html[data-ui="apple"][data-page="gallery"] .toran { height: 5px; background: linear-gradient(90deg, #0071e3, #5e5ce6 52%, #af52de); } html[data-ui="apple"][data-page="enroll"] header, html[data-ui="apple"][data-page="find"] header { padding: calc(28px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 7px max(20px, env(safe-area-inset-left)); text-align: center; } html[data-ui="apple"][data-page="enroll"] header h1, html[data-ui="apple"][data-page="find"] header h1 { margin: 0; color: var(--apple-label); font-family: var(--font-display); font-size: 25px; font-weight: 650; letter-spacing: -.035em; } html[data-ui="apple"][data-page="enroll"] header p, html[data-ui="apple"][data-page="find"] header p { color: var(--apple-secondary); font-size: 13px; } html[data-ui="apple"][data-page="enroll"] main, html[data-ui="apple"][data-page="find"] main { width: 100%; max-width: 680px; margin: 0 auto; padding: 16px max(20px, env(safe-area-inset-right)) calc(86px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); } html[data-ui="apple"][data-page="enroll"] .card, html[data-ui="apple"][data-page="find"] .card, html[data-ui="apple"][data-page="stall"] .card { width: 100%; max-width: none; padding: 24px; border: 1px solid rgba(255, 255, 255, .72); border-radius: var(--apple-radius-lg); background: rgba(255, 255, 255, .88); box-shadow: var(--apple-shadow-md); backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px); } html[data-ui="apple"][data-page="enroll"] label { margin: 17px 0 7px; color: var(--apple-label); font-size: 13px; font-weight: 600; } html[data-ui="apple"][data-page="enroll"] label:first-of-type { margin-top: 5px; } html[data-ui="apple"][data-page="enroll"] input:not([type="file"]) { width: 100%; min-height: 54px; padding: 0 15px; border: 1px solid var(--apple-line); border-radius: 13px; color: var(--apple-label); background: rgba(118, 118, 128, .06); box-shadow: none; font-size: 17px; } html[data-ui="apple"][data-page="enroll"] input:focus { border-color: rgba(0, 113, 227, .42); background: #fff; box-shadow: var(--ring); } html[data-ui="apple"][data-page="enroll"] .camera-btn, html[data-ui="apple"][data-page="enroll"] .submit-btn, html[data-ui="apple"][data-page="find"] .bigbtn { min-height: 54px; margin-top: 15px; padding: 0 18px; border: 0; border-radius: 14px; color: #fff; background: var(--apple-blue); box-shadow: 0 8px 22px rgba(0, 113, 227, .21); font-family: var(--font-ui); font-size: 17px; font-weight: 650; letter-spacing: -.015em; } html[data-ui="apple"][data-page="enroll"] .submit-btn, html[data-ui="apple"][data-page="find"] .bigbtn.green { background: var(--apple-green); box-shadow: 0 8px 22px rgba(40, 167, 69, .19); } html[data-ui="apple"][data-page="enroll"] .camera-btn:active, html[data-ui="apple"][data-page="find"] .bigbtn:active { transform: scale(.985); } html[data-ui="apple"][data-page="enroll"] .retake, html[data-ui="apple"][data-page="find"] .ghost { min-height: 48px; padding: 0 16px; border: 0; border-radius: 13px; color: var(--apple-blue); background: rgba(0, 113, 227, .08); font-size: 15px; font-weight: 600; } html[data-ui="apple"][data-page="enroll"] #cam, html[data-ui="apple"][data-page="enroll"] #preview, html[data-ui="apple"][data-page="find"] #cam, html[data-ui="apple"][data-page="find"] #preview { max-height: min(58dvh, 620px); border: 0; border-radius: 18px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); object-fit: cover; } html[data-ui="apple"][data-page="enroll"] .hint, html[data-ui="apple"][data-page="find"] .hint { color: var(--apple-secondary); font-size: 12px; line-height: 1.55; } html[data-ui="apple"][data-page="enroll"] #confirmCard h2 { color: var(--apple-label) !important; font-family: var(--font-display) !important; } html[data-ui="apple"][data-page="enroll"] #bigNum { color: var(--apple-blue) !important; font-family: var(--font-display); letter-spacing: -.02em !important; } html[data-ui="apple"][data-page="enroll"] #upStrip { top: 5px; border-radius: 0 0 12px 12px; color: #613b00; background: #ffd60a; box-shadow: var(--apple-shadow-sm); } html[data-ui="apple"][data-page="enroll"] #failBar { padding-bottom: calc(12px + env(safe-area-inset-bottom)); background: rgba(215, 0, 21, .94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } html[data-ui="apple"][data-page="enroll"] #failBar button { min-height: 40px; border-radius: 999px; } html[data-ui="apple"][data-page="enroll"] #flash { background: #28a745 !important; } html[data-ui="apple"][data-page="find"] .emoji { margin: 3px 0 10px; font-size: 48px; } html[data-ui="apple"][data-page="find"] #status { color: var(--apple-blue); } html[data-ui="apple"][data-page="find"] #err, html[data-ui="apple"][data-page="enroll"] #err { color: var(--apple-red); } html[data-ui="apple"][data-page="stall"] main { display: flex; width: 100%; min-height: calc(100dvh - 65px); padding: 28px 20px; } html[data-ui="apple"][data-page="stall"] .card { max-width: 620px; padding: 36px 30px; } html[data-ui="apple"][data-page="stall"] .big { font-size: 58px; } html[data-ui="apple"][data-page="stall"] h1 { margin: 14px 0 9px; color: var(--apple-label); font-family: var(--font-display); font-size: 28px; font-weight: 650; letter-spacing: -.035em; } html[data-ui="apple"][data-page="stall"] p { color: var(--apple-secondary); font-size: 15px; } html[data-ui="apple"][data-page="stall"] p b { color: var(--apple-label); } html[data-ui="apple"][data-page="stall"] .steps { margin-top: 22px; padding: 14px; border-radius: 17px; color: var(--apple-label); background: var(--apple-fill); } html[data-ui="apple"][data-page="stall"] .steps div { align-items: center; margin: 0; padding: 7px 3px; } html[data-ui="apple"][data-page="stall"] .n { background: var(--apple-blue); } html[data-ui="apple"][data-page="stall"] footer { color: var(--apple-secondary); } /* ======================================================================== PRIVATE GALLERY — Photos-style dark canvas ======================================================================== */ html[data-ui="apple"][data-page="gallery"] { color-scheme: dark; } html[data-ui="apple"][data-page="gallery"] body { min-height: 100dvh; color: #f5f5f7; background: #000; } html[data-ui="apple"][data-page="gallery"] header { position: sticky; top: 0; z-index: 10; padding: calc(18px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 14px max(20px, env(safe-area-inset-left)); border-bottom: 1px solid rgba(255, 255, 255, .10); background: rgba(0, 0, 0, .76); backdrop-filter: saturate(150%) blur(24px); -webkit-backdrop-filter: saturate(150%) blur(24px); } html[data-ui="apple"][data-page="gallery"] header h1 { color: #f5f5f7; font-family: var(--font-display); font-size: 22px; font-weight: 650; letter-spacing: -.03em; } html[data-ui="apple"][data-page="gallery"] #sub { color: #a1a1a6; } html[data-ui="apple"][data-page="gallery"] .live { color: #a1a1a6; background: rgba(255, 255, 255, .10); } html[data-ui="apple"][data-page="gallery"] .live b { color: #30d158; } html[data-ui="apple"][data-page="gallery"] .grid { width: 100%; max-width: 1400px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 3px; padding: 3px; } html[data-ui="apple"][data-page="gallery"] .grid a { overflow: hidden; border-radius: 2px; background: #1c1c1e; } html[data-ui="apple"][data-page="gallery"] .grid img { transition: transform .35s var(--apple-ease), opacity .2s; } html[data-ui="apple"][data-page="gallery"] .grid a:hover img { transform: scale(1.015); } html[data-ui="apple"][data-page="gallery"] .empty, html[data-ui="apple"][data-page="gallery"] footer { color: #a1a1a6; } /* ======================================================================== LANDING PAGE — Apple editorial rhythm with the existing wedding content ======================================================================== */ html[data-ui="apple"][data-page="landing"] body { background: #fff; color: var(--apple-label); font-size: 17px; line-height: 1.55; } html[data-ui="apple"][data-page="landing"] .toran { height: 5px; background: linear-gradient(90deg, #0071e3, #5e5ce6 50%, #af52de); } html[data-ui="apple"][data-page="landing"] .toran.flip { transform: none; } html[data-ui="apple"][data-page="landing"] .wrap { width: 100%; max-width: 1180px; padding-inline: 28px; } html[data-ui="apple"][data-page="landing"] :where(h1, h2, h3, .disp, .logo) { font-family: var(--font-display); letter-spacing: -.035em; } html[data-ui="apple"][data-page="landing"] header.site { top: 0; border-bottom: 1px solid rgba(0, 0, 0, .08); background: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); } html[data-ui="apple"][data-page="landing"] .navbar { max-width: 1180px; min-height: 58px; padding: 8px 28px; } html[data-ui="apple"][data-page="landing"] .logo { color: var(--apple-label); font-size: 18px; font-weight: 650; } html[data-ui="apple"][data-page="landing"] .navbar nav { min-width: 0; gap: 22px; } html[data-ui="apple"][data-page="landing"] .navbar nav a { color: var(--apple-secondary); font-size: 13px; font-weight: 500; } html[data-ui="apple"][data-page="landing"] .navbar nav a:hover { color: var(--apple-blue); } html[data-ui="apple"][data-page="landing"] .navbar .pill { min-height: 34px; display: inline-flex; align-items: center; padding: 0 15px; border-radius: 999px; color: #fff !important; background: var(--apple-blue); font-family: var(--font-ui); font-size: 12px; font-weight: 600; } html[data-ui="apple"][data-page="landing"] .navbar .pill:hover { background: var(--apple-blue-hover); } html[data-ui="apple"][data-page="landing"] .hero { padding: 84px 0 72px; background: radial-gradient(700px 420px at 79% 20%, rgba(94, 92, 230, .13), transparent 70%), radial-gradient(600px 400px at 12% 18%, rgba(0, 113, 227, .11), transparent 70%), #f5f5f7; } html[data-ui="apple"][data-page="landing"] .hero .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .75fr); gap: clamp(42px, 7vw, 96px); } html[data-ui="apple"][data-page="landing"] .kicker, html[data-ui="apple"][data-page="landing"] .eyebrow { color: var(--apple-blue); background: transparent; border: 0; padding: 0; font-size: 12px; font-weight: 650; letter-spacing: .08em; } html[data-ui="apple"][data-page="landing"] .hero h1 { max-width: 12.5em; margin-bottom: 22px; color: var(--apple-label); font-size: clamp(46px, 5.8vw, 72px); font-weight: 700; line-height: 1.02; letter-spacing: -.055em; } html[data-ui="apple"][data-page="landing"] .hero h1 em { color: var(--apple-blue); white-space: normal; } html[data-ui="apple"][data-page="landing"] .hero h1 em::after { display: none; } html[data-ui="apple"][data-page="landing"] .hero .sub { color: var(--apple-secondary); font-size: 19px; line-height: 1.5; } html[data-ui="apple"][data-page="landing"] .btn { min-height: 50px; padding: 0 22px; border: 0; border-radius: 999px; font-family: var(--font-ui); font-size: 15px; font-weight: 600; letter-spacing: -.01em; box-shadow: none; } html[data-ui="apple"][data-page="landing"] .btn:hover { transform: translateY(-1px); } html[data-ui="apple"][data-page="landing"] .btn.wa { color: #fff; background: var(--apple-blue); box-shadow: none; } html[data-ui="apple"][data-page="landing"] .btn.wa:hover { background: var(--apple-blue-hover); } html[data-ui="apple"][data-page="landing"] .btn.ghost { color: var(--apple-blue); background: rgba(0, 113, 227, .08); border: 0; } html[data-ui="apple"][data-page="landing"] .btn.gold { color: #fff; background: var(--apple-blue); box-shadow: none; } html[data-ui="apple"][data-page="landing"] .heronote { color: var(--apple-tertiary); } html[data-ui="apple"][data-page="landing"] .phone { width: min(310px, 100%); padding: 9px; border-radius: 45px; background: #1d1d1f; box-shadow: 0 30px 80px rgba(0, 0, 0, .27), inset 0 0 0 1px rgba(255, 255, 255, .20); transform: rotate(2deg); } html[data-ui="apple"][data-page="landing"] .screen { border-radius: 37px; } html[data-ui="apple"][data-page="landing"] .chat-top { background: #1c1c1e; } html[data-ui="apple"][data-page="landing"] .stats { color: var(--apple-label); background: #fff; } html[data-ui="apple"][data-page="landing"] .stats .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-block: 24px; } html[data-ui="apple"][data-page="landing"] .stats .st { padding: 22px 14px; border-radius: 20px; background: var(--apple-bg); } html[data-ui="apple"][data-page="landing"] .stats .st b { color: var(--apple-label); font-family: var(--font-display); font-size: 30px; } html[data-ui="apple"][data-page="landing"] .stats .st span { color: var(--apple-secondary); font-size: 10px; } html[data-ui="apple"][data-page="landing"] section { padding: 100px 0; } html[data-ui="apple"][data-page="landing"] h2 { color: var(--apple-label); font-size: clamp(34px, 4.2vw, 52px); font-weight: 700; line-height: 1.06; } html[data-ui="apple"][data-page="landing"] .lead { color: var(--apple-secondary); font-size: 18px; } html[data-ui="apple"][data-page="landing"] .steps, html[data-ui="apple"][data-page="landing"] .features { gap: 18px; } html[data-ui="apple"][data-page="landing"] .step { padding: 30px; border: 0; border-radius: var(--apple-radius-lg); background: var(--apple-bg); box-shadow: none; } html[data-ui="apple"][data-page="landing"] .step .num { border: 0; color: var(--apple-blue); background: rgba(0, 113, 227, .10); font-family: var(--font-ui); } html[data-ui="apple"][data-page="landing"] .step h3 { color: var(--apple-label); font-family: var(--font-display); } html[data-ui="apple"][data-page="landing"] .step p { color: var(--apple-secondary); } html[data-ui="apple"][data-page="landing"] .step p b { color: var(--apple-label); } html[data-ui="apple"][data-page="landing"] .trust { border-radius: var(--apple-radius-xl); color: #fff; background: linear-gradient(135deg, #0066cc, #5e5ce6); } html[data-ui="apple"][data-page="landing"] .trust-in { padding: 34px; } html[data-ui="apple"][data-page="landing"] .lockring { border: 0; background: rgba(255, 255, 255, .14); } html[data-ui="apple"][data-page="landing"] .trust h3 { color: #fff; } html[data-ui="apple"][data-page="landing"] .pro { color: #f5f5f7; background: #000; } html[data-ui="apple"][data-page="landing"] .pro h2 { color: #f5f5f7; } html[data-ui="apple"][data-page="landing"] .pro .lead { color: #a1a1a6; } html[data-ui="apple"][data-page="landing"] .pro .eyebrow { color: #2997ff; } html[data-ui="apple"][data-page="landing"] .feat, html[data-ui="apple"][data-page="landing"] .pro-cta { border: 1px solid rgba(255, 255, 255, .10); border-radius: var(--apple-radius-lg); background: #1c1c1e; } html[data-ui="apple"][data-page="landing"] .feat { padding: 26px; } html[data-ui="apple"][data-page="landing"] .feat .ico { border: 0; border-radius: 13px; background: rgba(41, 151, 255, .13); } html[data-ui="apple"][data-page="landing"] .feat h3, html[data-ui="apple"][data-page="landing"] .pro-cta h3 { color: #f5f5f7; } html[data-ui="apple"][data-page="landing"] .feat p, html[data-ui="apple"][data-page="landing"] .pro-cta p { color: #a1a1a6; } html[data-ui="apple"][data-page="landing"] .final { background: #f5f5f7; } html[data-ui="apple"][data-page="landing"] #pricing { max-width: 1000px !important; padding: 100px 28px !important; } html[data-ui="apple"][data-page="landing"] #pricing h2 { color: var(--apple-label) !important; font-family: var(--font-display) !important; } html[data-ui="apple"][data-page="landing"] #pricing > div { border: 0 !important; border-radius: var(--apple-radius-lg) !important; color: var(--apple-secondary) !important; background: var(--apple-bg); } html[data-ui="apple"][data-page="landing"] #pricing b { color: var(--apple-label) !important; } html[data-ui="apple"][data-page="landing"] footer.site { color: #a1a1a6; background: #000; } html[data-ui="apple"][data-page="landing"] .foot-in { max-width: 1180px; } html[data-ui="apple"][data-page="landing"] .foot-in .brandline { color: #f5f5f7; font-family: var(--font-display); } /* ======================================================================== PHONE POLISH FOR ALL PUBLIC PAGES ======================================================================== */ @media (max-width: 700px) { html[data-ui="apple"][data-page="enroll"] header, html[data-ui="apple"][data-page="find"] header { padding: 20px 16px 5px; } html[data-ui="apple"][data-page="enroll"] main, html[data-ui="apple"][data-page="find"] main { padding: 12px 12px calc(80px + env(safe-area-inset-bottom)); } html[data-ui="apple"][data-page="enroll"] .card, html[data-ui="apple"][data-page="find"] .card { padding: 18px; border-radius: 21px; } html[data-ui="apple"][data-page="enroll"] #cam, html[data-ui="apple"][data-page="enroll"] #preview, html[data-ui="apple"][data-page="find"] #cam, html[data-ui="apple"][data-page="find"] #preview { max-height: 52dvh; border-radius: 16px; } html[data-ui="apple"][data-page="enroll"] #failBar .row { flex-wrap: wrap; } html[data-ui="apple"][data-page="enroll"] #failBar .msg { flex: 1 0 100%; } html[data-ui="apple"][data-page="stall"] main { align-items: flex-start; padding: 34px 12px 82px; } html[data-ui="apple"][data-page="stall"] .card { padding: 28px 20px; border-radius: 22px; } html[data-ui="apple"][data-page="gallery"] header { padding: 15px 12px 12px; } html[data-ui="apple"][data-page="gallery"] .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 2px; } html[data-ui="apple"][data-page="gallery"] footer { padding-bottom: 78px; } html[data-ui="apple"][data-page="landing"] .wrap { padding-inline: 20px; } html[data-ui="apple"][data-page="landing"] .navbar { min-height: 54px; padding-inline: 16px; gap: 8px; } html[data-ui="apple"][data-page="landing"] .logo { max-width: 48vw; overflow: hidden; text-overflow: ellipsis; font-size: 16px; } html[data-ui="apple"][data-page="landing"] .navbar nav { gap: 8px; } html[data-ui="apple"][data-page="landing"] .navbar nav .hideS { display: none; } html[data-ui="apple"][data-page="landing"] .navbar .pill { min-height: 32px; padding-inline: 12px; font-size: 11px; } html[data-ui="apple"][data-page="landing"] .hero { padding: 54px 0 55px; } html[data-ui="apple"][data-page="landing"] .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 45px; } html[data-ui="apple"][data-page="landing"] .hero h1 { max-width: none; font-size: clamp(40px, 12vw, 54px); } html[data-ui="apple"][data-page="landing"] .hero .sub { font-size: 17px; } html[data-ui="apple"][data-page="landing"] .ctarow { align-items: stretch; flex-direction: column; } html[data-ui="apple"][data-page="landing"] .ctarow .btn { width: 100%; justify-content: center; } html[data-ui="apple"][data-page="landing"] .phone-col { min-width: 0; } html[data-ui="apple"][data-page="landing"] .phone { width: min(286px, 90vw); animation: none !important; transform: none !important; } html[data-ui="apple"][data-page="landing"] .stats .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 15px; } html[data-ui="apple"][data-page="landing"] .stats .st { padding: 18px 8px; } html[data-ui="apple"][data-page="landing"] .stats .st b { font-size: 26px; } html[data-ui="apple"][data-page="landing"] section { padding: 72px 0; } html[data-ui="apple"][data-page="landing"] .steps, html[data-ui="apple"][data-page="landing"] .features { grid-template-columns: minmax(0, 1fr); margin-top: 35px; } html[data-ui="apple"][data-page="landing"] .step, html[data-ui="apple"][data-page="landing"] .feat { padding: 24px; } html[data-ui="apple"][data-page="landing"] .trust { margin-top: 38px; border-radius: 24px; } html[data-ui="apple"][data-page="landing"] .trust-in { padding: 26px 22px; } html[data-ui="apple"][data-page="landing"] .pro-cta { align-items: stretch; padding: 22px; } html[data-ui="apple"][data-page="landing"] .pro-cta .tx { min-width: 0; } html[data-ui="apple"][data-page="landing"] .pro-cta .btn { width: 100%; justify-content: center; } html[data-ui="apple"][data-page="landing"] .final .btn { width: 100%; justify-content: center; padding-inline: 16px !important; } html[data-ui="apple"][data-page="landing"] #pricing { padding: 72px 20px 88px !important; } html[data-ui="apple"][data-page="landing"] #pricing > div { padding: 32px 18px !important; } html[data-ui="apple"][data-page="landing"] .foot-in { align-items: flex-start; flex-direction: column; padding: 28px 20px 84px; } html[data-ui="apple"][data-page="landing"] .foot-in .sp { display: none; } } @media (max-width: 380px) { html[data-ui="apple"][data-page="landing"] .navbar { padding-inline: 12px; } html[data-ui="apple"][data-page="landing"] .logo { flex: 0 0 auto; max-width: none; font-size: 0; } html[data-ui="apple"][data-page="landing"] .logo::after { content: "📸 LDM"; font-size: 15px; } html[data-ui="apple"][data-page="landing"] .navbar .pill { padding-inline: 10px; font-size: 10px; } html[data-ui="apple"][data-page="landing"] .phone { width: calc(100vw - 40px); } } @media (prefers-reduced-motion: reduce) { html[data-ui="apple"] *, html[data-ui="apple"] *::before, html[data-ui="apple"] *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }