/* ─── Reset & Base ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --header-h: 48px; --accent: #333; --bg: #f5f5f5; --panel-bg: #ffffff; --border: #e0e0e0; --radius: 12px; --tab-h: 40px; } html, body { height: 100%; font: 14px/1.4 Arial, sans-serif; background: var(--bg); overflow: hidden; } /* Reveal the body once this stylesheet applies (paired with the inline visibility:hidden guard in that prevents the unstyled flash). */ body { visibility: visible; } /* ─── Header ────────────────────────────────────────────────── */ #header { position: fixed; top: 0; left: 0; right: 0; /* Grow into the status-bar / notch area so the accent bar reaches the top edge under a black-translucent status bar (viewport-fit=cover). Insets are 0 in a normal browser tab, so this is a no-op there. */ height: calc(var(--header-h) + env(safe-area-inset-top, 0px)); background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 100; padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)); } #app-title { font-size: 18px; font-weight: bold; flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #app-title .app-title-link { color: inherit; text-decoration: none; } .header-btn { background: none; border: none; color: #fff; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; flex-shrink: 0; } .header-btn:hover { background: rgba(255,255,255,0.15); } .header-btn svg { width: 22px; height: 22px; } /* ─── Main layout ───────────────────────────────────────────── */ #main { position: fixed; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); /* Keep content clear of the landscape notch / home-indicator side insets. */ left: env(safe-area-inset-left, 0px); right: env(safe-area-inset-right, 0px); bottom: 0; display: flex; } /* Control panel: scrollable content fills the whole column */ #control-panel { display: flex; flex-direction: column; overflow: hidden; background: var(--bg); } /* ── Portrait: column ── */ @media (orientation: portrait) { #main { flex-direction: column; } #qr-panel { flex: 0 0 auto; width: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--bg); } #divider { display: none; } #control-panel { flex: 1 1 auto; } /* Square: the smaller of (width − margin) and (50% of the usable height). This keeps at least half the screen free for input on flat displays. */ #qr-canvas-wrap { width: min( calc(100vw - 32px), calc((100vh - var(--header-h)) * 0.5) ); aspect-ratio: 1; } } /* ── Landscape: row ── */ @media (orientation: landscape) { #main { flex-direction: row; } #qr-panel { flex: 0 0 50%; display: flex; align-items: flex-start; justify-content: center; padding: 16px; background: var(--bg); } #divider { display: none; } #control-panel { flex: 1 1 auto; } /* Square: the smaller of (available height) and (width of the left half). This keeps the code inside its 50% column, centered. */ #qr-canvas-wrap { width: min( calc(100vh - var(--header-h) - 32px), calc(50vw - 32px) ); aspect-ratio: 1; } } /* ─── QR canvas wrap (shared) ───────────────────────────────── */ #qr-canvas-wrap { position: relative; display: flex; align-items: center; justify-content: center; } /* SVG img fills the square wrap completely */ #qr-img { width: 100%; height: 100%; display: none; object-fit: contain; } #qr-placeholder { color: #aaa; font-size: 13px; text-align: center; padding: 16px; } /* ─── Scrollable content area ───────────────────────────────── */ #control-scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; } #scroll-inner { display: flex; flex-direction: column; min-height: 100%; padding: 12px; gap: 12px; } /* qr-panel already provides 16px on the adjacent side — remove the duplicate gap */ @media (orientation: portrait) { #scroll-inner { padding-top: 0; } } @media (orientation: landscape) { #scroll-inner { padding-left: 0; padding-top: 0; padding-right: 16px; } } /* Fixed header (row 1: type + score + edit · row 2: main nav) — outside the scroll area, so it stays visible on every tab and at any scroll position. */ #panel-fixed { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; padding: 0 12px 12px; } @media (orientation: landscape) { #panel-fixed { padding: 16px 16px 12px 0; } } /* Row 1: type selector (flex, fills) + score + undo / clear / redo (fixed) */ #toolbar-row { display: flex; align-items: stretch; gap: 8px; } /* ─── Pages (Input / Design / Output) ───────────────────────── */ .page { display: none; flex-direction: column; gap: 12px; } /* Active page grows to fill remaining space in scroll-inner, so growing fields (e.g. Text) can reach all the way down. */ .page.active { display: flex; flex: 1 1 auto; min-height: 0; } .page-placeholder { color: #999; font-size: 14px; text-align: center; padding: 32px 16px; line-height: 1.6; } /* ─── Design sub-navigation ─────────────────────────────────── */ #design-nav { display: flex; background: #ececec; border-radius: var(--radius); padding: 3px; gap: 3px; flex-shrink: 0; } .design-nav-btn { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 2px; background: transparent; border: none; border-radius: 9px; cursor: pointer; color: #777; font-size: 10px; font-weight: 600; transition: color 0.15s, background 0.15s; -webkit-tap-highlight-color: transparent; } .design-nav-btn:last-child { border-right: none; } .design-nav-btn svg { width: 18px; height: 18px; } .design-nav-btn.active { color: var(--accent); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.10); } .design-nav-btn:not(.active):active { background: rgba(0,0,0,0.05); } /* ─── Design sub-pages ──────────────────────────────────────── */ .design-page { display: none; flex-direction: column; gap: 12px; } .design-page.active { display: flex; } /* ─── Looks grid ────────────────────────────────────────────── */ .looks-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .looks-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border: 2px solid #b8b8b8; border-radius: var(--radius); background: var(--bg); cursor: pointer; transition: border-color 0.15s, transform 0.1s; -webkit-tap-highlight-color: transparent; } .looks-tile:hover { border-color: #999; } .looks-tile:active { transform: scale(0.97); } .looks-tile.active { border-color: var(--accent); } .looks-tile img { width: 100%; aspect-ratio: 1; display: block; } .looks-tile-label { font-size: 11px; font-weight: 600; color: #666; text-align: center; } /* ─── Code sub-navigation (Style / Modules / Background) ────── .modules-nav (All / Dots / Finder) shares the same look. */ #code-nav, .modules-nav { display: flex; background: #ececec; border-radius: var(--radius); padding: 3px; gap: 3px; flex-shrink: 0; } .code-nav-btn { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 2px; background: transparent; border: none; border-radius: 9px; cursor: pointer; color: #777; font-size: 10px; font-weight: 600; transition: color 0.15s, background 0.15s; -webkit-tap-highlight-color: transparent; } .code-nav-btn:last-child { border-right: none; } .code-nav-btn svg { width: 16px; height: 16px; } .code-nav-btn.active { color: var(--accent); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.10); } .code-nav-btn:not(.active):active { background: rgba(0,0,0,0.05); } /* ─── Code sub-pages ─────────────────────────────────────────── */ .code-page { display: none; flex-direction: column; gap: 12px; } .code-page.active { display: flex; } /* ─── Style grid ─────────────────────────────────────────────── */ .style-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .style-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border: 2px solid #b8b8b8; border-radius: var(--radius); background: var(--bg); cursor: pointer; transition: border-color 0.15s, transform 0.1s; -webkit-tap-highlight-color: transparent; } .style-tile:hover { border-color: #999; } .style-tile:active { transform: scale(0.97); } .style-tile.active { border-color: var(--accent); } .style-tile img { width: 100%; aspect-ratio: 1; display: block; } .style-tile-label { font-size: 11px; font-weight: 600; color: #666; text-align: center; } /* Code > Modules — reusable shape picker (5×5 demo tiles) */ .modules-seg { margin-bottom: 14px; } .modules-section { margin-bottom: 18px; } /* Piece-stroke enable toggle */ .modules-stroke-toggle { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; font-size: 13px; font-weight: 600; color: #555; cursor: pointer; } .modules-stroke-toggle input { cursor: pointer; } /* Gradient type selector */ .gradient-types { display: flex; gap: 8px; margin: 6px 0 4px; } .gradient-type-btn { flex: 1; padding: 8px 4px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--panel-bg); font-size: 13px; font-weight: 600; color: #555; cursor: pointer; transition: border-color .15s, color .15s; } .gradient-type-btn:hover { border-color: #aaa; } .gradient-type-btn.active { border-color: var(--accent); color: var(--accent); } /* Logo tab */ .logo-emoji-input { width: 100%; padding: 9px 10px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--panel-bg); font-size: 15px; box-sizing: border-box; } .logo-emoji-input:focus { outline: none; border-color: var(--accent); } /* Embedded searchable emoji picker (shown inline under the emoji field). */ .emoji-pick-embed { margin-top: 8px; } .emoji-pick-embed emoji-picker { width: 100%; height: 320px; border-radius: var(--radius); --background: var(--panel-bg); --border-color: var(--border); } .logo-preview { display: block; width: 88px; height: 88px; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%) 0 0/16px 16px, linear-gradient(45deg, #eee 25%, #fff 25%, #fff 75%, #eee 75%) 8px 8px/16px 16px; margin-bottom: 10px; } .logo-upload-btn { display: inline-block; padding: 9px 16px; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--panel-bg); font-size: 13px; font-weight: 600; color: var(--accent); cursor: pointer; transition: background .15s, color .15s; } .logo-upload-btn:hover { background: var(--accent); color: #fff; } .logo-remove-btn { margin-left: 8px; padding: 9px 14px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--panel-bg); font-size: 13px; font-weight: 600; color: #777; cursor: pointer; } .logo-remove-btn:hover { border-color: #c44; color: #c44; } .emoji-preview { display: flex; align-items: center; justify-content: center; padding: 8px; } .emoji-preview svg { width: 72px; height: 72px; } .logo-note { font-size: 11px; color: #999; line-height: 1.4; margin-top: 6px; } /* Emoji style variant chooser */ .emoji-variants { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .emoji-variant { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--panel-bg); cursor: pointer; font-size: 11px; color: #777; transition: border-color .15s, color .15s; } /* Keep every tile as narrow as the 44px preview: long style names (e.g. "Fluent Color") wrap to a second line instead of stretching the tile. */ .emoji-variant span { width: 44px; text-align: center; line-height: 1.25; } .emoji-variant:hover { border-color: #aaa; } .emoji-variant.active { border-color: var(--accent); color: var(--accent); } .emoji-variant-img { width: 44px; height: 44px; } .emoji-variant-img svg { width: 44px; height: 44px; } .emoji-variant-img img { width: 44px; height: 44px; object-fit: contain; } /* System variant shows the baked device-font raster (matching the embed). The text fallback below keeps sizing sane if the raster bake ever returns null. */ .emoji-variant-sys { font-size: 34px; line-height: 44px; text-align: center; } /* Color + opacity row */ .modules-color-row { display: flex; align-items: center; gap: 10px; } .modules-color-input { width: 44px; height: 32px; padding: 2px; border: none; border-radius: 4px; background: transparent; cursor: pointer; } .modules-opacity-range { flex: 1; } .modules-opacity-val { font-size: 12px; font-weight: 600; color: #666; min-width: 44px; text-align: right; } .shape-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; } .shape-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border: 2px solid #b8b8b8; border-radius: 10px; background: #fff; cursor: pointer; font: inherit; } .shape-tile:hover { border-color: #999; } .shape-tile:active { transform: scale(0.97); } .shape-tile.active { border-color: var(--accent); } .shape-tile img { width: 100%; aspect-ratio: 1; display: block; } .shape-tile-label { font-size: 10px; font-weight: 600; color: #666; text-align: center; white-space: nowrap; } /* ─── More / Advanced options tab ──────────────────────────── */ #options-page { display: flex; flex-direction: column; overflow-y: auto; padding: 4px 0 16px; } .options-section { padding: 14px 0; border-bottom: 1px solid var(--border); } .options-section:last-child { border-bottom: none; } .options-label { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #888; margin-bottom: 8px; } /* Non-default value: label becomes a reset link (one color for valid and invalid). */ .options-label.options-label-valid, .options-label.options-label-invalid { color: #b7410e; cursor: pointer; text-decoration: underline; transition: color .15s; } /* Label row: label text + optional ⓘ button side by side */ .options-label-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .options-label-row .options-label { margin-bottom: 0; } .btn-info { flex-shrink: 0; border: none; background: none; padding: 0; line-height: 1; font-size: 13px; color: #bbb; cursor: pointer; transition: color .15s; } .btn-info:hover { color: #888; } /* Info popover card */ .info-popover { position: fixed; inset: auto; margin: 0; padding: 12px 14px; max-width: 260px; background: var(--panel-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 20px rgba(0,0,0,0.15); font-size: 13px; line-height: 1.5; color: #444; } .options-control { display: flex; align-items: center; gap: 8px; } .options-spinner { width: 62px; padding: 6px 4px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; text-align: center; background: var(--panel-bg); color: #222; outline: none; } .options-spinner:focus { border-color: var(--accent); } .options-hint { font-size: 12px; color: #999; } .options-readout { margin-top: 6px; font-variant-numeric: tabular-nums; } /* Segmented button group (ECC level) */ .seg-group { display: flex; background: #ececec; border-radius: var(--radius); padding: 3px; gap: 3px; width: 100%; } .seg-btn { flex: 1; padding: 8px 2px; border: none; border-radius: 9px; background: transparent; color: #777; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; -webkit-tap-highlight-color: transparent; } .seg-btn.active { background: #fff; color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.10); } .seg-btn:not(.active):active { background: rgba(0,0,0,0.05); } /* Enhance ECC checkbox row */ .options-check-row { display: flex; align-items: center; gap: 10px; } .options-check-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; } .options-check-label { font-size: 14px; cursor: pointer; user-select: none; line-height: 1.3; } .options-check-label a { color: #c85000; text-decoration: none; } .options-check-label a:hover { text-decoration: underline; } /* ─── Output tab ─────────────────────────────────────────────── */ #output-panel { display: flex; flex-direction: column; gap: 20px; padding: 4px 0; } .output-row { display: flex; flex-direction: column; gap: 8px; } .output-row-label { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #888; } .output-opts { display: flex; gap: 8px; flex-wrap: wrap; } .output-opt { flex: 1; min-width: 60px; padding: 9px 4px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--panel-bg); font-size: 13px; font-weight: 600; color: #555; cursor: pointer; text-align: center; transition: border-color .15s, color .15s; } .output-opt:hover { border-color: #aaa; } .output-opt.active { border-color: var(--accent); color: var(--accent); } /* Size units: a range slider (snaps in 100s, ticks via datalist) plus a free 4-digit number field for exact / very large values. */ .size-ctrl { display: flex; align-items: center; gap: 12px; } .size-slider { flex: 1; min-width: 0; accent-color: var(--accent); cursor: pointer; } .size-number { width: 52px; flex: none; padding: 8px 8px; border: 2px solid var(--border); border-right: none; border-radius: var(--radius) 0 0 var(--radius); background: var(--panel-bg); font-size: 13px; font-weight: 600; color: #333; text-align: right; } .size-number:focus { outline: none; } .size-ctrl:focus-within .size-number, .size-ctrl:focus-within .size-stepper .size-step { border-color: var(--accent); } /* Field + stepper as one unit (no .size-ctrl gap between them). */ .size-num-wrap { display: flex; flex: none; } /* Up/down stepper attached to the right edge of the number field. */ .size-stepper { display: flex; flex-direction: column; flex: none; } .size-step { border: 2px solid var(--border); background: var(--panel-bg); color: #777; width: 22px; height: 17px; padding: 0; font-size: 8px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .size-step:first-child { border-radius: 0 var(--radius) 0 0; border-bottom: none; } .size-step:last-child { border-radius: 0 0 var(--radius) 0; } .size-step:hover { color: var(--accent); border-color: var(--accent); } .share-box { display: flex; gap: 8px; } .share-input { flex: 1; min-width: 0; padding: 9px 10px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--panel-bg); font-size: 12px; color: #555; font-family: inherit; } .share-input:focus { outline: none; border-color: var(--accent); } .share-copy { flex-shrink: 0; padding: 9px 16px; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--panel-bg); font-size: 13px; font-weight: 600; color: var(--accent); cursor: pointer; transition: background .15s, color .15s; } .share-copy:hover { background: var(--accent); color: #fff; } .share-copy.copied { background: var(--accent); color: #fff; } .share-hint { font-size: 11px; color: #999; line-height: 1.4; } .btn-download { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px; border: none; border-radius: var(--radius); background: var(--accent); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; transition: opacity .15s; } .btn-download svg { width: 20px; height: 20px; flex-shrink: 0; } .btn-download:hover { opacity: .85; } .btn-download:active { opacity: .7; } .btn-download:disabled { opacity: .35; cursor: default; } #scan-check { display: block; padding: 10px 14px; border-radius: var(--radius); line-height: 1.3; } .scan-head { display: flex; align-items: baseline; justify-content: space-between; font-weight: 600; font-size: 13px; } .scan-score { font-size: 16px; font-weight: 700; } .scan-bar { height: 6px; margin: 7px 0 5px; border-radius: 3px; background: rgba(0, 0, 0, .09); overflow: hidden; } .scan-bar-fill { height: 100%; border-radius: 3px; transition: width .3s ease; } .scan-msg { font-size: 12px; font-weight: 500; opacity: .92; } .scan-check.grade-excellent { background: #e8f5e9; color: #2e7d32; } .scan-check.grade-excellent .scan-bar-fill { background: #2e7d32; } .scan-check.grade-good { background: #e8f5e9; color: #388e3c; } .scan-check.grade-good .scan-bar-fill { background: #43a047; } .scan-check.grade-fair { background: #fff3e0; color: #e65100; } .scan-check.grade-fair .scan-bar-fill { background: #fb8c00; } .scan-check.grade-poor { background: #ffebee; color: #c62828; } .scan-check.grade-poor .scan-bar-fill { background: #e53935; } /* Example / no-input state: light-gray panel (borderless, like the grade panels) */ .scan-check.grade-placeholder { background: #eeeeee; color: #555; } /* Disclaimer — must read unmistakably as a warning (amber, bordered, bold) */ .scan-warn { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #fff8e1; border: 1px solid #ffcc80; color: #8a5300; font-size: 12px; font-weight: 600; line-height: 1.4; } #license-note { /* Sits in #output-panel's flex column (gap:20px) — no own margin needed, and no display override so the [hidden] attribute can actually hide it. */ margin-top: -10px; padding: 8px 10px; border-radius: 8px; background: #e7f0fb; border: 1px solid #9cc2ec; color: #1f4e79; font-size: 12px; font-weight: 500; line-height: 1.4; } #license-note a { color: #1f4e79; font-weight: 600; } /* ─── Main navigation (row 2 — connected block, equal-width tabs) ─── */ #bottom-nav { display: flex; height: 40px; background: #ececec; border-radius: var(--radius); padding: 3px; gap: 3px; flex-shrink: 0; } .nav-btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; padding: 0 4px; background: transparent; border: none; border-radius: 9px; cursor: pointer; color: #777; font-size: 14px; transition: color 0.15s, background 0.15s; -webkit-tap-highlight-color: transparent; } .nav-btn:last-child { border-right: none; } .nav-btn svg { width: 18px; height: 18px; flex: 0 0 auto; } .nav-btn span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-btn.active { color: var(--accent); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.10); } .nav-btn:not(.active):active { background: rgba(0,0,0,0.05); } /* ─── Type selector (opens the grid) ────────────────────────── */ #type-selector { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; padding: 0 10px; height: 40px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-bg); cursor: pointer; font-size: 14px; color: #222; transition: border-color 0.15s; } #type-selector:hover { border-color: #999; } #type-selector-icon { font-size: 18px; line-height: 1; flex: 0 0 auto; } #type-selector-label { flex: 1 1 auto; min-width: 0; text-align: left; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ─── Edit buttons (undo / clear / redo) — fixed-width in row 1 ─── */ .edit-btn { width: 40px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-bg); color: #444; cursor: pointer; transition: border-color 0.15s, opacity 0.15s, background 0.15s; -webkit-tap-highlight-color: transparent; } .edit-btn svg { width: 20px; height: 20px; } .edit-btn:not(:disabled):hover { border-color: #999; } .edit-btn:not(:disabled):active { background: var(--bg); } .edit-btn:disabled { opacity: 0.3; cursor: default; } /* Live scannability score — fixed-width element in row 1 */ #scan-mini { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-bg); font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer; } #scan-mini[hidden] { display: none; } /* flex would otherwise override [hidden] */ #scan-mini svg { width: 18px; height: 18px; } /* Reserve the width of "100" (locked exactly via JS measurement at startup; the em here is just a pre-measurement fallback) so the badge never resizes when the value fills in. The value sits right-aligned. */ #scan-mini-num { display: inline-block; min-width: 1.5em; text-align: right; } /* Example / no-input state: neutral gray like the inactive nav, plus a gray border */ #scan-mini.grade-placeholder { background: var(--bg); color: #888; border-color: #ccc; } #scan-mini.grade-excellent { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; } #scan-mini.grade-good { background: #e8f5e9; color: #388e3c; border-color: #a5d6a7; } #scan-mini.grade-fair { background: #fff3e0; color: #e65100; border-color: #ffcc80; } #scan-mini.grade-poor { background: #ffebee; color: #c62828; border-color: #ef9a9a; } /* ─── Bottom sheet ──────────────────────────────────────────── */ .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1); } .sheet.open { transform: translateY(0); } /* Landscape: sheet + overlay only over the right input half, so the path to the selection stays short and the QR code stays visible. */ @media (orientation: landscape) { #type-sheet { left: 50vw; right: 0; } #sheet-overlay { left: 50vw; } /* Credits: same width as the right-half sheet (50vw), but centered. */ #credits-sheet { left: 25vw; right: 25vw; } } .sheet-inner { background: var(--panel-bg); border-radius: 20px 20px 0 0; box-shadow: 0 -4px 24px rgba(0,0,0,0.18); /* Column: handle + title fixed, only the grid scrolls */ display: flex; flex-direction: column; max-height: 75vh; overflow: hidden; /* cleanly clips the scrolling grid at the rounded corners */ padding-top: 8px; } /* Landscape: free up more height, since vh is small here */ @media (orientation: landscape) { .sheet-inner { max-height: 90vh; } } /* Handle: a thin visible bar, but a large draggable area */ .sheet-handle { flex: 0 0 auto; position: relative; height: 24px; margin-bottom: 6px; cursor: grab; touch-action: none; /* suppress browser scroll/zoom while dragging */ user-select: none; -webkit-tap-highlight-color: transparent; } .sheet-handle:active { cursor: grabbing; } .sheet-handle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 4px; border-radius: 2px; background: #ccc; transition: background 0.15s; } .sheet-handle:hover::before { background: #aaa; } .sheet-title { flex: 0 0 auto; font-size: 15px; font-weight: 700; text-align: center; margin-bottom: 16px; color: #333; touch-action: none; user-select: none; } /* ─── Credits (uses the bottom-sheet shell) ─────────────────── */ .credits-body { flex: 1 1 auto; overflow-y: auto; padding: 0 20px 24px; color: #333; } .credits-intro { font-size: 13px; line-height: 1.5; color: #555; margin-bottom: 18px; } .credits-group { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #999; margin: 14px 0 4px; } .credits-list { list-style: none; display: flex; flex-direction: column; gap: 2px; } .credits-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .credits-list .credit-name { font-weight: 600; } .credits-list .credit-meta { color: #777; font-size: 12px; } .credits-list a { color: var(--accent, #2a6); text-decoration: none; } .credits-list a:hover { text-decoration: underline; } .credits-note { margin-top: 16px; font-size: 12px; line-height: 1.5; color: #888; } /* ─── Type grid (scrolling area) ────────────────────────────── */ .type-grid { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; padding: 2px 16px calc(20px + env(safe-area-inset-bottom, 0)); } .type-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-bg); cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; -webkit-tap-highlight-color: transparent; } .type-tile:hover { border-color: #999; } .type-tile:active { transform: scale(0.96); } .type-tile.active { border-color: var(--accent); background: var(--bg); } .type-tile .tile-icon { font-size: 26px; line-height: 1; } .type-tile .tile-label { font-size: 12px; font-weight: 600; color: #444; text-align: center; } /* ─── Fields ────────────────────────────────────────────────── */ /* Needed because display:flex on .field-group would otherwise win over [hidden]. */ .field-group[hidden] { display: none !important; } #fields { flex: 1 1 auto; /* takes up the remaining height of the page */ display: flex; flex-direction: column; gap: 10px; min-height: 0; /* allows shrinking for correct flex growth */ } .field-group { display: flex; flex-direction: column; gap: 4px; } /* A growing field (e.g. Text) fills the rest down to the bottom */ .field-group.grow { flex: 1 1 auto; min-height: 0; } .field-group.grow textarea { flex: 1 1 auto; height: 100%; resize: none; } .field-group label { font-size: 12px; color: #666; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } /* Label row: label + optional ⓘ button side by side */ .field-label-row { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; } .field-label-row .field-label { margin-bottom: 0; } /* Colored label state — non-default value turns the label into a reset link. One color for valid and invalid values; the error hint below the field still signals invalid input. Only the main text span is colored; (optional) stays neutral. */ label.field-label-valid, label.field-label-invalid { cursor: pointer; } label.field-label-valid .field-label-main, label.field-label-invalid .field-label-main { color: #b7410e; text-decoration: underline; transition: color .15s; } .field-label-opt { color: #888; } /* Right-aligned example value in the label row: "e.g. " */ .field-eg { margin-left: auto; font-size: 12px; color: #888; white-space: nowrap; } .field-eg a { text-decoration: underline; } .field-group input, .field-group select, .field-group textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 15px; background: var(--panel-bg); color: #222; outline: none; transition: border-color 0.15s; } .field-group input:focus, .field-group select:focus, .field-group textarea:focus { border-color: var(--accent); } .field-group input:disabled, .field-group textarea:disabled { background: var(--bg); color: #aaa; cursor: not-allowed; } .field-group textarea { resize: vertical; min-height: 80px; } /* Inline validation hint below a field */ .field-hint { font-size: 12px; color: #c0392b; margin: 0; padding: 1px 2px 0; } /* Checkbox row (e.g. "Hidden network") */ .field-group.checkbox-row { flex-direction: row; align-items: center; gap: 10px; padding: 4px 2px; cursor: pointer; user-select: none; -webkit-user-select: none; } .field-group.checkbox-row input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; accent-color: var(--accent); } .field-group.checkbox-row label { font-size: 15px; color: #222; font-weight: normal; text-transform: none; letter-spacing: 0; cursor: pointer; } /* Side-by-side field row (e.g. date + time) */ .fields-row { display: flex; gap: 8px; } .fields-row .field-group { width: calc(50% - 4px); flex-shrink: 0; min-width: 0; } /* Phone field: standalone + label · dial digits · number */ .tel-row { display: flex; align-items: center; gap: 4px; } .tel-row .tel-dial-wrap { display: flex; align-items: center; flex-shrink: 0; gap: 2px; } .tel-row .tel-plus { font-size: 15px; color: #444; user-select: none; pointer-events: none; padding: 0 2px; } .tel-row .tel-dial-wrap .tel-dial { width: 52px; min-width: 52px; } .tel-row .tel-number { flex: 1; min-width: 0; } /* Password field with eye toggle */ .input-eye-wrap { position: relative; display: flex; align-items: center; } .input-eye-wrap input { padding-right: 44px; } .btn-eye { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: #aaa; border-radius: 8px; transition: color 0.15s; -webkit-tap-highlight-color: transparent; } .btn-eye:hover { color: #555; } .btn-eye.active { color: var(--accent); } .btn-eye svg { width: 18px; height: 18px; } /* ─── Side menu ─────────────────────────────────────────────── */ .side-menu { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; background: var(--panel-bg); z-index: 200; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 4px 0 16px rgba(0,0,0,0.15); } .side-menu.open { transform: translateX(0); } #side-menu-inner { padding: 12px 8px; display: flex; flex-direction: column; height: 100%; } .side-menu-close { color: #333; align-self: flex-end; margin-bottom: 8px; } .side-menu ul { list-style: none; } .side-menu ul li a { display: block; padding: 14px 16px; color: #333; text-decoration: none; border-radius: var(--radius); font-size: 15px; } .side-menu ul li a:hover { background: var(--bg); } /* ─── Settings panel (right slide-in) ────────────────────────── */ .settings-menu { position: fixed; top: 0; right: 0; bottom: 0; width: 280px; background: var(--panel-bg); z-index: 200; transform: translateX(100%); transition: transform 0.25s ease; box-shadow: -4px 0 16px rgba(0,0,0,0.15); display: flex; flex-direction: column; } .settings-menu.open { transform: translateX(0); } #settings-menu-inner { padding: 12px 0 16px; display: flex; flex-direction: column; height: 100%; overflow-y: auto; } .settings-menu-close { color: #333; align-self: flex-start; margin: 0 8px 8px; } .settings-section { border-top: 1px solid var(--border); padding: 4px 0; flex-shrink: 0; } /* Country list scrolls when the list is long */ #country-list { max-height: 35vh; overflow-y: auto; } .settings-heading { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #999; padding: 8px 16px 2px; flex-shrink: 0; } .menu-option { display: block; width: 100%; text-align: left; padding: 10px 16px 10px 28px; background: none; border: none; border-radius: var(--radius); color: #333; font-size: 15px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .menu-option:hover { background: var(--bg); } .menu-option.active { font-weight: 700; color: var(--accent); } .menu-option.active::after { content: " ✓"; } /* ─── Storage toggle ────────────────────────────────────────── */ .settings-toggle-label { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .settings-toggle-text { flex: 1; display: flex; flex-direction: column; gap: 2px; } .settings-toggle-text > span:first-child { font-size: 15px; color: #333; } .settings-toggle-hint { font-size: 12px; color: #999; line-height: 1.3; } .toggle-switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .toggle-track { position: absolute; inset: 0; border-radius: 12px; background: #ccc; cursor: pointer; transition: background 0.2s; } .toggle-track::before { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; left: 2px; top: 2px; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.25); } .toggle-switch input:checked + .toggle-track { background: var(--accent); } .toggle-switch input:checked + .toggle-track::before { transform: translateX(18px); } .toggle-switch input:focus-visible + .toggle-track { outline: 2px solid var(--accent); outline-offset: 2px; } /* ─── Settings panel bottom (Reset all) ─────────────────────── */ .settings-bottom { margin-top: auto; border-top: 1px solid var(--border); padding: 8px 0 0; } .settings-bottom a { display: block; padding: 14px 16px; color: #c0392b; text-decoration: none; font-size: 15px; border-radius: var(--radius); } .settings-bottom a:hover { background: var(--bg); } /* ─── Geo: address search ───────────────────────────────────── */ .geo-search-wrap { position: relative; } .geo-search-wrap input { padding-right: 40px; } .btn-search-submit { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: #aaa; border-radius: 8px; transition: color 0.15s; -webkit-tap-highlight-color: transparent; } .btn-search-submit:hover { color: var(--accent); } .btn-search-submit svg { width: 16px; height: 16px; } .geo-suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--panel-bg); border: 1px solid var(--border); border-radius: var(--radius); list-style: none; z-index: 1001; max-height: 220px; overflow-y: auto; box-shadow: 0 4px 16px rgba(0,0,0,0.15); } .geo-suggestions li { padding: 10px 12px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--border); line-height: 1.3; } .geo-suggestions li:last-child { border-bottom: none; } .geo-suggestions li:hover { background: var(--bg); } .btn-geo-locate { display: inline-block; background: none; border: none; padding: 2px 0; font-size: 13px; color: #666; cursor: pointer; text-align: left; transition: color 0.15s; -webkit-tap-highlight-color: transparent; } .btn-geo-locate:hover:not(:disabled) { color: var(--accent); } .btn-geo-locate:disabled { opacity: 0.6; cursor: default; } /* ─── Geo: map ──────────────────────────────────────────────── */ .geo-map-group { gap: 6px; } .btn-show-map { width: 100%; padding: 10px 14px; background: var(--panel-bg); border: 1px solid var(--border); border-radius: var(--radius); font-size: 15px; color: #444; cursor: pointer; text-align: center; transition: border-color 0.15s; -webkit-tap-highlight-color: transparent; } .btn-show-map:hover:not(:disabled) { border-color: #999; } .btn-show-map:disabled { opacity: 0.6; cursor: default; } .geo-map-note { font-size: 11px; color: #aaa; text-align: center; line-height: 1.4; } .geo-map-container { width: 100%; height: 240px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 150; opacity: 0; pointer-events: none; transition: opacity 0.25s; } .overlay.open { opacity: 1; pointer-events: all; }