/* ============================================================= COMMAND CENTER v3 - design system Mobile-first. Desktop (≥980px) gets a sidebar + wide layout. Theme accent is set by [data-theme] on . ============================================================= */ :root { --bg: #07090d; --bg2: #0c0f15; --panel: rgba(255, 255, 255, 0.035); --panel2: rgba(255, 255, 255, 0.06); --line: rgba(255, 255, 255, 0.09); --ink: #f4f1e8; --dim: #a8a89f; --mute: #6d6e68; --acc: #d4af37; --acc2: #e8c97a; --acc-soft: rgba(212, 175, 55, 0.16); --danger: #ff5544; --ok: #3ddc84; --serif: "Cormorant Garamond", Georgia, serif; --sans: "Inter", -apple-system, system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; --nav-h: calc(58px + env(safe-area-inset-bottom)); --r: 16px; } [data-theme="rose"] { --acc: #ff5c8a; --acc2: #ffa3bd; --acc-soft: rgba(255, 92, 138, 0.16); } [data-theme="violet"] { --acc: #a06bff; --acc2: #c7a6ff; --acc-soft: rgba(160, 107, 255, 0.16); } [data-theme="emerald"] { --acc: #3ddc84; --acc2: #8af0b8; --acc-soft: rgba(61, 220, 132, 0.16); } [data-theme="ocean"] { --acc: #4ac6ff; --acc2: #9adfff; --acc-soft: rgba(74, 198, 255, 0.16); } [data-theme="crimson"] { --acc: #ff5544; --acc2: #ff9d8f; --acc-soft: rgba(255, 85, 68, 0.16); } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { height: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.45; min-height: 100%; overscroll-behavior-y: none; -webkit-font-smoothing: antialiased; } button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, select { font-family: inherit; } canvas { display: block; } /* ambient glow field */ .ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 40% at 80% -10%, var(--acc-soft), transparent 70%), radial-gradient(50% 35% at 10% 110%, var(--acc-soft), transparent 70%), var(--bg); transition: background 0.6s; } /* ============ APP FRAME ============ */ .top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) 18px 10px; background: rgba(7, 9, 13, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .brand { font-family: var(--mono); font-size: 12.5px; letter-spacing: 2.5px; color: var(--acc2); } .top-right { font-family: var(--mono); font-size: 11.5px; color: var(--dim); letter-spacing: 1px; } .top-right b { color: var(--acc2); font-weight: 500; } #panels { max-width: 560px; margin: 0 auto; padding: 16px 16px calc(var(--nav-h) + 28px); } .panel-page { display: none; animation: fadein 0.25s ease; } .panel-page.active { display: block; } @keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* bottom nav (mobile) */ .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-around; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: rgba(9, 11, 16, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); } .nav-btn { flex: 1; padding: 7px 2px 5px; border-radius: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 1.4px; color: var(--mute); display: flex; flex-direction: column; align-items: center; gap: 3px; transition: color 0.15s; } .nav-btn .ico { font-size: 18px; line-height: 1; filter: grayscale(1) opacity(0.55); transition: filter 0.15s, transform 0.15s; } .nav-btn.active { color: var(--acc2); } .nav-btn.active .ico { filter: none; transform: translateY(-1px); } /* sidebar (desktop) */ .side { display: none; } @media (min-width: 980px) { .nav { display: none; } .top { padding-left: 26px; padding-right: 26px; } .side { display: flex; flex-direction: column; gap: 4px; position: fixed; top: 64px; left: max(18px, calc(50vw - 640px)); width: 210px; z-index: 30; } .side .nav-btn { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 11px 14px; font-size: 11.5px; border-radius: 12px; } .side .nav-btn:hover { background: var(--panel); color: var(--dim); } .side .nav-btn.active { background: var(--acc-soft); color: var(--acc2); } .side-foot { margin-top: 18px; padding: 12px 14px; font-family: var(--mono); font-size: 10px; color: var(--mute); letter-spacing: 1px; line-height: 1.9; } #panels { max-width: 620px; margin-left: calc(max(18px, 50vw - 640px) + 240px); padding-bottom: 60px; } } @media (min-width: 1340px) { #panels { max-width: 860px; } } /* ============ SHARED PIECES ============ */ .sect-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 2.5px; color: var(--mute); margin: 26px 2px 10px; } .btn { display: block; width: 100%; margin-top: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--acc); background: linear-gradient(180deg, var(--acc-soft), transparent); color: var(--acc2); font-family: var(--mono); font-size: 12.5px; letter-spacing: 1.6px; transition: transform 0.1s, background 0.15s; } .btn:active { transform: scale(0.98); } .btn.ghost { border-color: var(--line); background: var(--panel); color: var(--dim); } .btn.small { width: auto; display: inline-block; padding: 9px 16px; margin-top: 8px; font-size: 11px; } .btn[disabled] { opacity: 0.4; pointer-events: none; } .chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chip { flex-shrink: 0; padding: 8px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); color: var(--dim); font-size: 12.5px; } .chip.on { border-color: var(--acc); color: var(--acc2); background: var(--acc-soft); } .sysnote { font-size: 12px; color: var(--mute); margin-top: 10px; line-height: 1.6; } .sysrow { display: flex; flex-direction: column; } /* toast + sp float + confetti */ #toastWrap { position: fixed; top: calc(64px + env(safe-area-inset-top)); left: 0; right: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .toast { padding: 12px 22px; border-radius: 30px; background: rgba(12, 15, 21, 0.95); border: 1px solid var(--acc); color: var(--acc2); font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6); animation: toastin 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); } @keyframes toastin { from { opacity: 0; transform: translateY(-16px) scale(0.9); } to { opacity: 1; transform: none; } } .sp-float { position: fixed; z-index: 95; pointer-events: none; font-family: var(--mono); font-weight: 600; font-size: 15px; color: var(--acc2); text-shadow: 0 0 14px var(--acc); animation: floatup 1.1s ease-out forwards; } @keyframes floatup { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-70px) scale(1.25); } } #confettiCv { position: fixed; inset: 0; z-index: 94; pointer-events: none; } /* ============ PLAYER CARD ============ */ .card-stage { perspective: 1200px; margin-top: 6px; } .pcard { position: relative; width: 100%; aspect-ratio: 7 / 10; max-width: 380px; margin: 0 auto; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.3, 1.2, 0.4, 1); cursor: pointer; } .pcard.flipped { transform: rotateY(180deg) !important; } .pface { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65), inset 0 0 0 1.5px color-mix(in srgb, var(--acc) 55%, transparent); background: #0a0d12; } .pface.back { transform: rotateY(180deg); padding: 22px 20px; display: flex; flex-direction: column; } .pcard-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pcard-avatar { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(90px, 34vw, 150px); } .pcard-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,9,13,0.15), rgba(7,9,13,0) 45%, rgba(7,9,13,0.95) 88%); } .holo { position: absolute; inset: 0; mix-blend-mode: overlay; pointer-events: none; background: linear-gradient(115deg, transparent calc(var(--hx, 50%) - 22%), rgba(255,255,255,0.55) var(--hx, 50%), transparent calc(var(--hx, 50%) + 22%)); opacity: 0.75; } .holo.idle { animation: holosweep 5.5s ease-in-out infinite; } @keyframes holosweep { 0%,100% { --hx: 20%; } 50% { --hx: 80%; } } @property --hx { syntax: ""; inherits: false; initial-value: 50%; } .pcard-ovr { position: absolute; top: 16px; left: 18px; text-shadow: 0 2px 18px rgba(0,0,0,0.8); } .pcard-ovr .num { font-family: var(--serif); font-size: 62px; font-weight: 700; line-height: 0.9; color: var(--acc2); } .pcard-ovr .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 4px; color: var(--dim); margin-top: 3px; } .pcard-season { position: absolute; top: 18px; right: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: rgba(244,241,232,0.75); text-shadow: 0 1px 8px rgba(0,0,0,0.8); } .tier-badge { position: absolute; top: 44px; right: 16px; padding: 5px 10px; border-radius: 20px; border: 1px solid; font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.5px; background: rgba(7, 9, 13, 0.55); backdrop-filter: blur(6px); } .pcard-bottom { position: absolute; left: 20px; right: 20px; bottom: 18px; } .pcard-vision { font-family: var(--mono); font-size: 10.5px; letter-spacing: 2px; color: var(--acc); margin-bottom: 6px; } .pcard-name { font-family: var(--serif); font-size: clamp(28px, 9vw, 40px); font-weight: 700; letter-spacing: 0.5px; line-height: 1; } .pcard-arch { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--acc2); margin-top: 4px; } .pcard-meta { display: flex; gap: 18px; margin-top: 12px; font-family: var(--mono); font-size: 9px; letter-spacing: 1px; color: var(--mute); } .pcard-meta b { display: block; font-size: 12px; color: var(--ink); margin-top: 2px; font-weight: 500; } .pcard-hint { text-align: center; font-family: var(--mono); font-size: 9.5px; letter-spacing: 2px; color: var(--mute); margin: 12px 0 2px; } .tilt-chip { display: block; margin: 10px auto 0; padding: 8px 16px; border-radius: 20px; border: 1px solid var(--line); color: var(--dim); font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.5px; } /* card back */ .pback-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; } .pback-head .nm { font-family: var(--serif); font-size: 22px; font-weight: 700; } .pback-head .ov { font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--acc2); } .attr { flex: 1; display: flex; flex-direction: column; gap: 8px; } .attr-row { display: flex; align-items: center; gap: 10px; } .attr-row .k { width: 96px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.5px; color: var(--dim); } .attr-bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.09); overflow: hidden; } .attr-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--acc), var(--acc2)); } .attr-row .v { width: 26px; text-align: right; font-family: var(--mono); font-size: 12px; color: var(--acc2); } .attr-edit { display: flex; gap: 5px; } .attr-edit button { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--dim); font-size: 15px; } .edit-toggle { margin-top: 12px; padding: 9px; border-radius: 10px; border: 1px dashed var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; color: var(--mute); } .edit-toggle.on { border-color: var(--acc); color: var(--acc2); } .pback-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .pback-badges span { padding: 5px 10px; border-radius: 14px; border: 1px solid var(--line); font-size: 10.5px; color: var(--dim); } /* command links */ .grid-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .glink { padding: 13px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 500; transition: border-color 0.15s; position: relative; } .glink:hover { border-color: var(--acc); } .glink small { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: 2px; color: var(--mute); margin-bottom: 4px; } .glink.add { border-style: dashed; color: var(--mute); text-align: center; } .glink .rm { position: absolute; top: 6px; right: 8px; color: var(--danger); font-size: 13px; opacity: 0.7; } /* ============ TODAY ============ */ .day-head { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .day-date { font-family: var(--mono); font-size: 11px; letter-spacing: 3px; color: var(--dim); } .streaks { display: flex; gap: 8px; flex-wrap: wrap; } .streak-pill { padding: 6px 12px; border-radius: 20px; border: 1px solid var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px; color: var(--dim); background: var(--panel); } .streak-pill.hot { border-color: #ff6b35; color: #ffa35c; background: rgba(255, 107, 53, 0.1); } .ring-wrap { display: flex; align-items: center; gap: 16px; margin: 18px 0 6px; padding: 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); } .ring { width: 84px; height: 84px; flex-shrink: 0; } .ring circle { transition: stroke-dashoffset 0.6s cubic-bezier(0.3, 1, 0.4, 1); } .ring-text .big { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--acc2); } .ring-text .sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.2px; color: var(--mute); margin-top: 4px; } .quote { margin: 14px 0 4px; padding: 14px 16px; border-left: 2px solid var(--acc); font-family: var(--serif); font-style: italic; font-size: 16.5px; color: var(--dim); } .quote small { display: block; font-family: var(--mono); font-style: normal; font-size: 9px; letter-spacing: 2px; color: var(--mute); margin-top: 6px; } .tgroup h3 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 2.5px; color: var(--mute); margin: 22px 2px 10px; font-weight: 500; } .task { display: flex; align-items: center; gap: 13px; padding: 13px 14px; margin-bottom: 8px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); cursor: pointer; user-select: none; -webkit-user-select: none; transition: border-color 0.15s, background 0.15s, transform 0.08s; } .task:active { transform: scale(0.985); } .task .box { width: 26px; height: 26px; flex-shrink: 0; border-radius: 9px; border: 1.5px solid var(--mute); display: flex; align-items: center; justify-content: center; font-size: 15px; color: #0a0d12; transition: all 0.15s; } .task .lab { flex: 1; font-size: 14.5px; font-weight: 500; } .task .lab .cat { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: 1.5px; color: var(--mute); margin-top: 3px; } .task .xp { font-family: var(--mono); font-size: 11.5px; color: var(--mute); } .task.done { border-color: color-mix(in srgb, var(--acc) 45%, transparent); background: var(--acc-soft); } .task.done .box { background: var(--acc2); border-color: var(--acc2); } .task.done .lab { color: var(--dim); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.25); } .task.done .xp { color: var(--acc2); } .manage-row { display: flex; justify-content: flex-end; margin-top: 4px; } .prayer-bar { display: flex; flex-wrap: wrap; gap: 12px; padding: 10px 14px; margin-bottom: 10px; border-radius: 12px; border: 1px dashed var(--line); font-family: var(--mono); font-size: 10.5px; color: var(--dim); } .prayer-bar b { color: var(--acc2); font-weight: 500; } .prayer-bar:empty { display: none; } /* quests */ .quest { padding: 14px 15px; margin-bottom: 9px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); } .quest.ready { border-color: var(--acc); background: var(--acc-soft); cursor: pointer; animation: questglow 1.6s ease-in-out infinite; } @keyframes questglow { 0%,100% { box-shadow: 0 0 0 rgba(0,0,0,0); } 50% { box-shadow: 0 0 24px color-mix(in srgb, var(--acc) 35%, transparent); } } .quest.claimed { opacity: 0.45; } .q-top { display: flex; justify-content: space-between; align-items: baseline; } .q-title { font-weight: 600; font-size: 14.5px; } .q-sp { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--acc2); } .q-detail { font-size: 12.5px; color: var(--mute); margin-top: 3px; } .q-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.08); margin-top: 10px; overflow: hidden; } .q-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--acc), var(--acc2)); border-radius: 2px; transition: width 0.4s; } .q-prog { font-family: var(--mono); font-size: 9.5px; color: var(--mute); margin-top: 6px; text-align: right; } /* ============ TRAIN ============ */ .proto { padding: 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); margin-top: 6px; } .proto h3 { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--acc2); } .proto p { font-size: 13px; color: var(--dim); margin-top: 5px; } .recov { display: flex; justify-content: space-between; align-items: center; padding: 12px 4px; } .recov .st { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; padding: 6px 12px; border-radius: 16px; } .recov .ready { color: var(--ok); border: 1px solid rgba(61,220,132,0.4); background: rgba(61,220,132,0.08); } .recov .rest { color: #ffa35c; border: 1px solid rgba(255,163,92,0.35); background: rgba(255,163,92,0.07); } .wcard { padding: 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); } .wcard h4 { font-size: 16px; font-weight: 600; } .wcard .freq { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; color: var(--mute); margin: 4px 0 12px; } .wex { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); } .wex .box { width: 24px; height: 24px; flex-shrink: 0; border-radius: 8px; border: 1.5px solid var(--mute); display: flex; align-items: center; justify-content: center; font-size: 13px; color: #0a0d12; cursor: pointer; } .wex.done .box { background: var(--acc2); border-color: var(--acc2); } .wex .nm { display: block; font-weight: 500; font-size: 14px; } .wex .dt { display: block; font-size: 11.5px; color: var(--mute); margin-top: 2px; } .setlog { display: inline-block; margin: 6px 6px 0 0; padding: 3px 9px; border-radius: 12px; background: var(--acc-soft); font-family: var(--mono); font-size: 10.5px; color: var(--acc2); } .setrow { display: flex; gap: 7px; margin-top: 8px; } .setrow input { width: 72px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); color: var(--ink); font-size: 14px; } .setrow button { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--acc); color: var(--acc2); font-family: var(--mono); font-size: 10px; letter-spacing: 1px; } .wnote { font-size: 12px; color: var(--mute); font-style: italic; margin-top: 12px; } .wlog { padding: 10px 14px; margin-bottom: 7px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-family: var(--mono); font-size: 11px; color: var(--dim); } /* body heatmap */ .bodymap { position: relative; width: 150px; height: 300px; margin: 8px auto; } .bm { position: absolute; border-radius: 10px; background: rgba(255,255,255,0.07); transition: background 0.3s, box-shadow 0.3s; } .bm.lit { background: var(--acc); box-shadow: 0 0 18px var(--acc-soft); } .bm.shoulders { top: 26px; left: 25px; width: 100px; height: 20px; } .bm.chest { top: 50px; left: 40px; width: 70px; height: 34px; } .bm.back-l { top: 50px; left: 25px; width: 12px; height: 60px; } .bm.back-r { top: 50px; right: 25px; width: 12px; height: 60px; } .bm.arm-l { top: 52px; left: 4px; width: 16px; height: 80px; } .bm.arm-r { top: 52px; right: 4px; width: 16px; height: 80px; } .bm.core { top: 88px; left: 45px; width: 60px; height: 46px; } .bm.quad-l { top: 140px; left: 42px; width: 28px; height: 64px; } .bm.quad-r { top: 140px; right: 42px; width: 28px; height: 64px; } .bm.ham-l { top: 176px; left: 34px; width: 10px; height: 50px; } .bm.ham-r { top: 176px; right: 34px; width: 10px; height: 50px; } .bm.calf-l { top: 210px; left: 46px; width: 20px; height: 56px; } .bm.calf-r { top: 210px; right: 46px; width: 20px; height: 56px; } /* ============ EAT ============ */ .rcard { border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); padding: 15px 16px; margin-bottom: 10px; cursor: pointer; } .rcard h4 { font-size: 15.5px; font-weight: 600; } .rmeta { display: flex; gap: 12px; font-family: var(--mono); font-size: 10px; color: var(--mute); margin-top: 5px; letter-spacing: 0.5px; } .rmacros { display: flex; gap: 8px; margin-top: 9px; } .rmacros span { padding: 3px 9px; border-radius: 12px; background: rgba(255,255,255,0.06); font-family: var(--mono); font-size: 10px; color: var(--dim); } .rbody { display: none; padding-top: 12px; cursor: default; } .rcard.open .rbody { display: block; } .rbody h5 { font-family: var(--mono); font-size: 9.5px; letter-spacing: 2px; color: var(--mute); margin: 12px 0 6px; } .rbody ul, .rbody ol { padding-left: 20px; font-size: 13.5px; color: var(--dim); } .rbody li { margin-bottom: 4px; } .rnote { font-size: 12px; font-style: italic; color: var(--mute); margin-top: 10px; } /* ============ LIFE / 2046 ============ */ .life-hero { text-align: center; padding: 34px 12px 22px; cursor: pointer; user-select: none; -webkit-user-select: none; } .life-hero .huge { font-family: var(--serif); font-weight: 700; font-size: clamp(58px, 17vw, 96px); line-height: 1; color: var(--acc2); text-shadow: 0 0 60px var(--acc-soft); font-variant-numeric: tabular-nums; } .life-hero .cap { font-family: var(--mono); font-size: 10.5px; letter-spacing: 3px; color: var(--mute); margin-top: 10px; } .life-hero .weekn { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; color: var(--dim); margin-top: 14px; } .lstat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .lbox { padding: 15px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); } .lbox .v { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--ink); } .lbox .k { font-size: 11.5px; color: var(--mute); margin-top: 3px; line-height: 1.4; } .lbox.blue .v { color: #6db3e8; } .lbox.free { grid-column: 1 / -1; border-color: var(--acc); background: var(--acc-soft); } .lbox.free .v { color: var(--acc2); } .weekgrid { padding: 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); margin-top: 14px; } .weekgrid h4 { font-family: var(--mono); font-size: 9.5px; letter-spacing: 2px; color: var(--mute); font-weight: 500; margin-bottom: 12px; } .weekgrid canvas { width: 100%; } .legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 1px; color: var(--mute); } .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; } .life-line { text-align: center; font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--dim); margin: 26px 0 8px; } /* ============ OVERLAYS (auth / onboarding / modals / pin) ============ */ .overlay { position: fixed; inset: 0; z-index: 80; background: rgba(5, 6, 9, 0.9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadein 0.25s; overflow-y: auto; } .sheet { width: 100%; max-width: 420px; margin: auto; background: var(--bg2); border: 1px solid var(--line); border-radius: 24px; padding: 26px 22px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7); } .sheet h2 { font-family: var(--serif); font-size: 26px; font-weight: 700; } .sheet .sub { font-size: 13.5px; color: var(--dim); margin-top: 6px; line-height: 1.55; } .sheet label { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 2px; color: var(--mute); margin: 16px 0 7px; } .sheet input[type="text"], .sheet input[type="email"], .sheet input[type="password"], .sheet input[type="date"], .sheet input[type="url"], .sheet select { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 15px; appearance: none; -webkit-appearance: none; } .sheet input:focus, .sheet select:focus { outline: none; border-color: var(--acc); } .form-msg { font-size: 12.5px; margin-top: 10px; min-height: 16px; color: var(--dim); } .form-msg.err { color: var(--danger); } .form-msg.ok { color: var(--ok); } .linkish { font-size: 12.5px; color: var(--dim); text-decoration: underline; text-underline-offset: 3px; display: inline-block; margin-top: 14px; background: none; } /* onboarding */ .ob-steps { display: flex; gap: 5px; margin-bottom: 20px; } .ob-steps i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1); } .ob-steps i.on { background: var(--acc); } .ob-count { font-family: var(--serif); font-weight: 700; font-size: 54px; color: var(--acc2); line-height: 1; margin: 8px 0 2px; font-variant-numeric: tabular-nums; } .ob-count-cap { font-family: var(--mono); font-size: 9.5px; letter-spacing: 2.5px; color: var(--mute); } .emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 4px; } .emoji-grid button { aspect-ratio: 1; border-radius: 14px; border: 1.5px solid var(--line); background: var(--panel); font-size: 24px; transition: all 0.12s; } .emoji-grid button.on { border-color: var(--acc); background: var(--acc-soft); transform: scale(1.06); } .swatch-row { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 4px; } .swatch { width: 42px; height: 42px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.12s; } .swatch.on { border-color: #fff; transform: scale(1.12); } .avatar-preview { width: 88px; height: 88px; border-radius: 26px; margin: 6px auto 2px; display: flex; align-items: center; justify-content: center; font-size: 46px; border: 1px solid var(--line); box-shadow: 0 10px 34px rgba(0,0,0,0.5); } .pack { display: flex; align-items: center; gap: 13px; padding: 13px 14px; margin-bottom: 9px; border-radius: var(--r); border: 1.5px solid var(--line); background: var(--panel); cursor: pointer; transition: all 0.13s; } .pack.on { border-color: var(--acc); background: var(--acc-soft); } .pack .pe { font-size: 24px; } .pack .pn { font-weight: 600; font-size: 14.5px; } .pack .pt { font-size: 11.5px; color: var(--mute); margin-top: 2px; } .pack .pc { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--mute); flex-shrink: 0; } /* manage-habits modal rows */ .hrow { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); } .hrow .hl { flex: 1; font-size: 13.5px; } .hrow .hm { font-family: var(--mono); font-size: 9px; color: var(--mute); letter-spacing: 1px; } .hrow .hdel { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); color: var(--danger); font-size: 15px; flex-shrink: 0; } .addform { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; } .addform input, .addform select { padding: 11px 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 14px; } .addform .full { grid-column: 1 / -1; } /* install-as-app steps */ .inst-step { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--dim); line-height: 1.55; } .inst-step:last-child { border-bottom: none; } .inst-step b { color: var(--ink); } .inst-n { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--acc); color: var(--acc2); font-family: var(--mono); font-size: 12px; } .inst-ico { display: inline-block; padding: 1px 7px; border-radius: 7px; background: var(--acc-soft); color: var(--acc2); font-size: 12px; } /* pin gate */ .pin-gate { position: fixed; inset: 0; z-index: 99; background: var(--bg); display: flex; align-items: center; justify-content: center; } .pin-box { text-align: center; width: 250px; } .pin-title { font-family: var(--mono); font-size: 12px; letter-spacing: 3px; color: var(--acc2); margin-bottom: 18px; } .pin-box input { width: 100%; padding: 14px; text-align: center; font-size: 30px; letter-spacing: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg2); color: var(--ink); } /* auth divider */ .divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; font-family: var(--mono); font-size: 9px; letter-spacing: 2px; color: var(--mute); } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* profile block on Card tab */ .me-row { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); margin-top: 10px; } .me-ava { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 27px; flex-shrink: 0; overflow: hidden; } .me-ava img { width: 100%; height: 100%; object-fit: cover; } .me-name { font-weight: 600; font-size: 15px; } .me-sub { font-family: var(--mono); font-size: 10px; color: var(--mute); letter-spacing: 1px; margin-top: 3px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }