:root { --bg: #0f1115; --card: #1b1f27; --card-hi: #232837; --text: #f2f3f5; --sub: #9aa1ac; --green: #34c759; --green-dim: #1f7a37; --red: #ff453a; --red-dim: #8f261f; --accent: #4c8dff; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* Caps the whole app to a phone-proportioned column on tablets/desktops, centered, instead of stretching every tile/icon/font to fill a much wider viewport — see the "responsive on iPad" rule in CLAUDE.md before touching this or the fixed- position elements that key off it (.changelog-fab, the *-restore/-qa overlays). */ --app-max-width: 520px; /* Design tokens (radius/shadow/motion) — introduced to replace one-off literals scattered per-tool. Only style.css and tools/counter.css consume these so far; other tools/*.css still use their own literal values until migrated incrementally (see CLAUDE.md). Per-tool "flavor" colors/shadows (card suits, wheel rainbow, colored button glows, etc.) are intentionally NOT tokenized — those are tool identity, not inconsistency. */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 22px; --radius-pill: 999px; --radius-circle: 50%; --shadow-sm: 0 2px 6px rgba(0,0,0,0.35); --shadow-md: 0 4px 16px rgba(0,0,0,0.4); --shadow-lg: 0 8px 24px rgba(0,0,0,0.45); --shadow-xl: 0 16px 48px rgba(0,0,0,0.6); --duration-tap: 0.08s; --duration-base: 0.25s; --duration-slow: 0.4s; --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --hairline: rgba(255, 255, 255, 0.06); } /* Theme overrides — toggled via data-theme="" on (see THEMES/applyTheme() in app.js). Structural colors only (bg/card/text/sub/hairline, plus accent for the "other" mood themes) — per-tool "flavor" colors (Ohana gradient, wheel rainbow, counter's green/red, todo's paper look, etc.) intentionally stay the same across every theme; see the design tokens note above. Default is dark (no attribute, plain :root above) — these blocks only fire when explicitly set. "แนะนำ" (recommended) pair — light/dark, accent unchanged from :root: */ :root[data-theme="light"] { --bg: #f4f5f7; --card: #ffffff; --card-hi: #eceef2; --text: #14161a; --sub: #6b7280; --hairline: rgba(0, 0, 0, 0.08); } /* "อื่นๆ" (other) mood themes — each also gets its own --accent for a distinct feel: */ :root[data-theme="grape"] { --bg: #180f22; --card: #271733; --card-hi: #35204a; --text: #f5eefc; --sub: #b79ecf; --accent: #e0529c; --hairline: rgba(255, 255, 255, 0.08); } :root[data-theme="ivory"] { --bg: #f7f1e3; --card: #fffbf2; --card-hi: #efe4cd; --text: #3b3226; --sub: #8a7d68; --accent: #c9762f; --hairline: rgba(59, 50, 38, 0.1); } :root[data-theme="mint"] { --bg: #eaf7f3; --card: #ffffff; --card-hi: #dcf0ea; --text: #123c34; --sub: #5b8a7d; --accent: #0ea472; --hairline: rgba(18, 60, 52, 0.08); } :root[data-theme="sunset"] { --bg: #1f130f; --card: #2e1c15; --card-hi: #3d2419; --text: #fdf0e6; --sub: #d9a98a; --accent: #e8632f; --hairline: rgba(255, 255, 255, 0.08); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", sans-serif; overscroll-behavior-y: contain; user-select: none; /* Without this, the browser reserves horizontal edge swipes for its own back/forward navigation gesture and our touchstart/touchend swipe-back handler in app.js never reliably sees them. pan-y still lets normal vertical scrolling work everywhere. */ touch-action: pan-y; } #app { min-height: 100dvh; display: flex; flex-direction: column; max-width: var(--app-max-width); margin: 0 auto; } /* ---------- Home screen ---------- */ .home { position: relative; flex: 1; padding: calc(var(--safe-top) + 20px) 20px calc(var(--safe-bottom) + 20px); display: flex; flex-direction: column; } /* Dashboard-style grid backdrop (home-redesign experiment — see CLAUDE.md, not shared by the generic .home rules above so tool screens stay unaffected). */ .home-v2 { background-image: linear-gradient(var(--hairline) 1px, transparent 1px), linear-gradient(90deg, var(--hairline) 1px, transparent 1px); background-size: 26px 26px; } .home-topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .home-topbar-brand { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; } .home-topbar-logo { width: 32px; height: 32px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--accent), var(--card-hi)); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; } .home-topbar-name { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-welcome { font-size: 15px; font-weight: 700; margin-bottom: 4px; } .home-subtitle { font-size: 12.5px; color: var(--sub); line-height: 1.5; margin-bottom: 14px; } .home-content { flex: 1; display: flex; flex-direction: column; min-height: 0; } /* ---------- Home sidebar (slide-in drawer, mirrors a desktop dashboard nav) ---------- */ .sidebar-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity var(--duration-base) ease; z-index: 30; } .sidebar-overlay.open { opacity: 1; pointer-events: auto; } .home-sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: min(78vw, 260px); background: var(--card); border-right: 1px solid var(--hairline); box-shadow: var(--shadow-xl); padding: calc(var(--safe-top) + 18px) 16px calc(var(--safe-bottom) + 16px); transform: translateX(-100%); transition: transform var(--duration-base) var(--ease-bounce); z-index: 31; display: flex; flex-direction: column; gap: 18px; overflow-x: hidden; overflow-y: auto; } .home-sidebar.open { transform: translateX(0); } .sidebar-collapse-btn { position: absolute; top: 50%; right: -14px; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--card-hi); border: 1px solid var(--hairline); color: var(--text); font-size: 15px; cursor: pointer; box-shadow: var(--shadow-sm); } .sidebar-brand { display: flex; align-items: center; gap: 10px; } .sidebar-brand-icon { width: 38px; height: 38px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--accent), var(--card-hi)); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; } .sidebar-brand-name { font-size: 14.5px; font-weight: 800; } .sidebar-brand-version { font-size: 11px; color: var(--sub); } .sidebar-nav { display: flex; flex-direction: column; gap: 14px; } .sidebar-group { display: flex; flex-direction: column; gap: 4px; } .sidebar-group-label { padding: 2px 12px 4px; font-size: 10.5px; font-weight: 800; color: var(--sub); text-transform: uppercase; letter-spacing: 0.06em; } /* Sits right after the nav groups (not pinned to the sidebar's full viewport height) — pinning it via margin-top: auto left a large dead gap below a short APPS list. */ .sidebar-footer { padding-top: 12px; border-top: 1px solid var(--hairline); } .sidebar-nav-item { display: flex; align-items: center; gap: 10px; background: none; border: none; color: var(--sub); font-size: 13.5px; font-weight: 600; text-align: left; padding: 10px 12px; border-radius: var(--radius-md); cursor: pointer; } .sidebar-nav-item.active { background: var(--card-hi); color: var(--text); } .sidebar-nav-icon { width: 18px; height: 18px; object-fit: contain; } .icon-action-btn { flex-shrink: 0; background: var(--card); border: none; color: var(--text); width: 36px; height: 36px; border-radius: var(--radius-sm); font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .theme-picker { position: relative; } .theme-btn { width: auto; padding: 0 14px; font-size: 13px; font-weight: 600; } .theme-panel { position: absolute; top: 44px; right: 0; width: min(80vw, 260px); background: var(--card); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 12px; z-index: 10; } .theme-panel-label { font-size: 11px; color: var(--sub); margin: 6px 0 8px; } .theme-panel-label:first-child { margin-top: 0; } .theme-swatch-row { display: flex; flex-wrap: wrap; gap: 10px; } .theme-swatch { background: none; border: none; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 4px; width: 62px; cursor: pointer; } .theme-swatch-dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; box-shadow: var(--shadow-sm); } .theme-swatch.active .theme-swatch-dot { border-color: var(--text); } .theme-swatch-label { font-size: 11px; color: var(--text); text-align: center; line-height: 1.2; } /* ---------- Tool screen (generic) ---------- */ .tool-screen { flex: 1; display: flex; flex-direction: column; padding-top: var(--safe-top); } .tool-header { display: flex; align-items: center; gap: 10px; padding: 14px 12px; } .back-btn { background: var(--card); border: none; color: var(--text); width: 36px; height: 36px; border-radius: var(--radius-sm); font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .tool-title { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tool-body { flex: 1; display: flex; flex-direction: column; min-height: 0; } /* ---------- Shared small components (used by 2+ tools) ---------- */ .step-row { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; justify-content: center; } .step-label { color: var(--sub); font-size: 12px; width: 100%; text-align: center; margin-bottom: 6px; } .step-chip { background: var(--card); border: 1.5px solid transparent; color: var(--text); padding: 8px 14px; border-radius: var(--radius-pill); font-size: 14px; cursor: pointer; } .step-chip.active { border-color: var(--accent); color: var(--accent); font-weight: 700; } .reset-btn { background: none; border: none; color: var(--sub); font-size: 13px; padding: 8px 12px; cursor: pointer; }