/* ============================================================================ PepWorld — app design system Black · White · Blue. Dual theme: dark (default) + light, toggled via . Single blue accent throughout. ==========================================================================*/ :root { /* DARK theme (default) — PepWorld navy */ --accent-1: #3b82f6; --accent-2: #2563eb; --accent: #2563eb; --accent-grad: linear-gradient(135deg, #3b82f6, #2563eb); --navy: #0a2540; --bg-0: #0a111c; --bg-1: #0e1828; --surface: #121d2f; --surface-2: #18243a; --surface-3: #22324c; --stroke: rgba(255,255,255,0.09); --stroke-2: rgba(255,255,255,0.16); --text: #eef2f9; --text-dim: #aab6c8; --text-mute: #6f7d92; --danger: #f87171; --warn: #fbbf24; --ok: #34d399; --grid-line: rgba(255,255,255,0.045); --radius: 16px; --radius-sm: 11px; --radius-lg: 24px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.45); --shadow: 0 18px 44px -20px rgba(0,0,0,0.72), 0 2px 8px rgba(0,0,0,0.35); --shadow-lg: 0 32px 70px -26px rgba(0,0,0,0.82); --ff-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --nav-h: 70px; } :root[data-theme="light"] { /* LIGHT theme — soft off-whites, navy ink */ --bg-0: #eceff5; --bg-1: #e3e8f0; --surface: #f7f9fc; --surface-2: #eef2f8; --surface-3: #e3e9f2; --stroke: #dde3ee; --stroke-2: #ccd5e4; --text: #0a2540; --text-dim: #44546b; --text-mute: #76829a; --danger: #e0556d; --warn: #b45309; --ok: #0f9d6c; --grid-line: rgba(10,37,64,0.035); --shadow-sm: 0 1px 2px rgba(10,37,64,0.06); --shadow: 0 10px 28px -14px rgba(10,37,64,0.16), 0 2px 6px rgba(10,37,64,0.05); --shadow-lg: 0 28px 64px -24px rgba(10,37,64,0.22); } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; font-family: var(--ff-body); color: var(--text); background: var(--bg-0); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: 600; margin: 0; letter-spacing: -0.3px; } button, input, select, textarea { font-family: inherit; color: inherit; } .muted { color: var(--text-mute); } /* ---------- Ambient background ---------- */ .bg-aurora { position: fixed; inset: 0; z-index: -2; background: radial-gradient(46% 50% at 12% 0%, rgba(59,130,246,0.12), transparent 60%), radial-gradient(50% 55% at 92% 4%, rgba(37,99,235,0.10), transparent 60%), var(--bg-0); } /* Light: a soft tinted gradient (never flat bright white) so accents still pop */ :root[data-theme="light"] .bg-aurora { background: radial-gradient(40% 44% at 8% 0%, rgba(59,130,246,0.18), transparent 58%), radial-gradient(44% 48% at 94% 3%, rgba(37,99,235,0.15), transparent 58%), radial-gradient(50% 55% at 78% 100%, rgba(59,130,246,0.10), transparent 60%), linear-gradient(180deg, #eef2f9 0%, #e3e9f4 62%, #dce4f1 100%); } .bg-grid { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(circle at 50% 0%, black, transparent 70%); mask-image: radial-gradient(circle at 50% 0%, black, transparent 70%); opacity: .7; } /* ---------- Glass / card primitive ---------- */ .glass { background: var(--surface); border: 1px solid var(--stroke); box-shadow: var(--shadow); } /* ---------- Brand ---------- */ .brand { display: flex; align-items: center; gap: 12px; } .brand-mark { width: 40px; height: 40px; border-radius: 12px; flex: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='10' fill='%23eef2f8'/%3E%3CclipPath id='r'%3E%3Ccircle cx='20' cy='20' r='10.3'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23r)' opacity='0.55'%3E%3Cellipse cx='20' cy='20' rx='9.4' ry='3.4' transform='rotate(-34 20 20)' fill='none' stroke='%239dbeff' stroke-width='1.1'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='11.8' fill='none' stroke='%232563eb' stroke-width='2.7'/%3E%3Cline x1='16' y1='24' x2='24' y2='16' stroke='%232563eb' stroke-width='2.7' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='24' r='3.1' fill='%230a2540'/%3E%3Ccircle cx='24' cy='16' r='3.1' fill='%230a2540'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; box-shadow: 0 8px 20px -10px rgba(37,99,235,0.55); } .brand-text h1 { font-size: 18px; line-height: 1; letter-spacing: -0.4px; } .brand-text h1 .b1 { color: var(--text); } .brand-text h1 .b2 { color: var(--accent-1); } .brand-sub { margin: 3px 0 0; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-mute); } .brand-lg .brand-mark { width: 52px; height: 52px; border-radius: 15px; } .brand-lg .brand-text h1 { font-size: 26px; } /* ============================================================================ GATE / AUTH SCREEN (used by cloud auth + local entry) ==========================================================================*/ .gate { min-height: 100dvh; display: grid; place-items: center; padding: 24px; } .gate-card { width: 100%; max-width: 420px; border-radius: var(--radius-lg); padding: 34px 30px; position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--stroke); box-shadow: var(--shadow-lg); } .gate-card .brand { margin-bottom: 26px; } .gate-headline { font-family: var(--ff-display); font-size: 20px; margin: 0 0 4px; } .gate-sub { font-size: 13.5px; margin: 0 0 22px; } .gate-error { color: var(--danger); font-size: 13px; margin: 14px 0 0; background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); padding: 10px 12px; border-radius: var(--radius-sm); } .gate-foot { font-size: 11.5px; line-height: 1.55; margin: 22px 0 0; } .pw-wrap { position: relative; display: flex; } .pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--text-mute); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; padding: 6px; } .pw-toggle:hover { color: var(--accent-1); } .link-danger { display: block; width: 100%; margin-top: 14px; background: none; border: 0; color: var(--text-mute); font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .link-danger:hover { color: var(--danger); } .link-muted { display: block; width: 100%; margin-top: 14px; background: none; border: 0; color: var(--text-mute); font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-align: center; } .link-muted:hover { color: var(--accent-1); } /* ---------- Fields ---------- */ .field { display: block; margin-bottom: 16px; } .field-label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 7px; letter-spacing: 0.2px; font-weight: 500; } input[type=text], input[type=password], input[type=number], input[type=date], input[type=email], input[type=time], input[type=datetime-local], select, textarea { width: 100%; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--stroke-2); border-radius: var(--radius-sm); color: var(--text); font-size: 15px; transition: border-color .16s, box-shadow .16s; outline: none; } input:focus, select:focus, textarea:focus { border-color: var(--accent-1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-1) 22%, transparent); } input::placeholder, textarea::placeholder { color: var(--text-mute); } textarea { resize: vertical; min-height: 70px; line-height: 1.5; } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23808896' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; cursor: pointer; } input[type=number] { -moz-appearance: textfield; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 10px; border: 1px solid var(--stroke-2); background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .12s, box-shadow .2s, background .2s, border-color .2s, opacity .2s; white-space: nowrap; } .btn:hover { background: var(--surface-3); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary { background: var(--accent-grad); border: 0; color: #fff; box-shadow: 0 10px 24px -10px var(--accent-1); } .btn-primary:hover { background: var(--accent-grad); color: #fff; filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 16px 34px -10px var(--accent-1); } .btn-ghost { background: transparent; } .btn-ghost:hover { background: color-mix(in srgb, var(--accent-1) 9%, transparent); border-color: color-mix(in srgb, var(--accent-1) 45%, var(--stroke-2)); color: var(--accent-1); } .btn-block { width: 100%; margin-top: 8px; } .btn-sm { padding: 8px 13px; font-size: 13px; } .btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); } .btn-danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); } .icon-btn { padding: 9px; } .btn-row { display: flex; gap: 10px; flex-wrap: wrap; } /* ============================================================================ APP LAYOUT ==========================================================================*/ .app { min-height: 100dvh; display: grid; grid-template-columns: 248px 1fr; } .sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 8px; padding: 22px 16px; background: var(--surface); border-right: 1px solid var(--stroke); } .sidebar .brand { padding: 4px 8px 18px; } .nav { display: flex; flex-direction: column; gap: 4px; flex: 1; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; background: none; border: 0; color: var(--text-dim); font-size: 14.5px; font-weight: 500; cursor: pointer; text-align: left; transition: background .15s, color .15s; position: relative; } .nav-item:hover { background: var(--surface-2); color: var(--text); } .nav-item.active { color: var(--accent-1); background: color-mix(in srgb, var(--accent-1) 12%, transparent); } .nav-item.active::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--accent-grad); } .sidebar-foot { padding-top: 8px; border-top: 1px solid var(--stroke); display: flex; flex-direction: column; gap: 6px; } .content { min-width: 0; padding: 26px clamp(18px, 4vw, 44px) 60px; display: flex; flex-direction: column; } .topbar { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; } .topbar-eyebrow { margin: 0; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-mute); } .topbar-title { font-size: clamp(24px, 4vw, 32px); margin-top: 4px; } .topbar-actions { display: flex; gap: 8px; } .view { flex: 1; animation: fade-up 0.3s ease; } @keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .app-foot { font-size: 11px; margin-top: 36px; line-height: 1.5; max-width: 640px; color: var(--text-mute); } .tabbar { display: none; } /* ---------- Icons (mask, inherit text color) ---------- */ .nav-ico { width: 20px; height: 20px; display: inline-block; flex: none; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .nav-ico[data-ico=grid] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); } .nav-ico[data-ico=calc] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cline x1='8' y1='6' x2='16' y2='6'/%3E%3Cline x1='8' y1='11' x2='8' y2='11'/%3E%3Cline x1='12' y1='11' x2='12' y2='11'/%3E%3Cline x1='16' y1='11' x2='16' y2='11'/%3E%3Cline x1='8' y1='15' x2='8' y2='15'/%3E%3Cline x1='12' y1='15' x2='12' y2='15'/%3E%3Cline x1='16' y1='15' x2='16' y2='18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cline x1='8' y1='6' x2='16' y2='6'/%3E%3Cline x1='8' y1='11' x2='8' y2='11'/%3E%3Cline x1='12' y1='11' x2='12' y2='11'/%3E%3Cline x1='16' y1='11' x2='16' y2='11'/%3E%3Cline x1='8' y1='15' x2='8' y2='15'/%3E%3Cline x1='12' y1='15' x2='12' y2='18'/%3E%3C/svg%3E"); } .nav-ico[data-ico=log] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E"); } .nav-ico[data-ico=vial] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v6l-4 9a3 3 0 0 0 3 4h8a3 3 0 0 0 3-4l-4-9V2'/%3E%3Cline x1='7' y1='2' x2='17' y2='2'/%3E%3Cline x1='6.5' y1='14' x2='17.5' y2='14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v6l-4 9a3 3 0 0 0 3 4h8a3 3 0 0 0 3-4l-4-9V2'/%3E%3Cline x1='7' y1='2' x2='17' y2='2'/%3E%3Cline x1='6.5' y1='14' x2='17.5' y2='14'/%3E%3C/svg%3E"); } .nav-ico[data-ico=gear] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E"); } .nav-ico[data-ico=lock] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E"); } .nav-ico[data-ico=plus] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); } .nav-ico[data-ico=book] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E"); } .nav-ico[data-ico=theme] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z'/%3E%3C/svg%3E"); } .nav-ico[data-ico=chart] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 17 9 11 13 15 21 7'/%3E%3Cpolyline points='16 7 21 7 21 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 17 9 11 13 15 21 7'/%3E%3Cpolyline points='16 7 21 7 21 12'/%3E%3C/svg%3E"); } .nav-ico[data-ico=camera] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E"); } .nav-ico[data-ico=compare] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='7' height='16' rx='1.5'/%3E%3Crect x='14' y='4' width='7' height='16' rx='1.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='7' height='16' rx='1.5'/%3E%3Crect x='14' y='4' width='7' height='16' rx='1.5'/%3E%3C/svg%3E"); } .nav-ico[data-ico=cycle] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cpath d='M8 14l2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cpath d='M8 14l2 2 4-4'/%3E%3C/svg%3E"); } .nav-ico[data-ico=lab] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.7l5.7 5.7a8 8 0 1 1-11.4 0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.7l5.7 5.7a8 8 0 1 1-11.4 0z'/%3E%3C/svg%3E"); } .nav-ico[data-ico=more] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='1.7'/%3E%3Ccircle cx='12' cy='12' r='1.7'/%3E%3Ccircle cx='19' cy='12' r='1.7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='1.7'/%3E%3Ccircle cx='12' cy='12' r='1.7'/%3E%3Ccircle cx='19' cy='12' r='1.7'/%3E%3C/svg%3E"); } .nav-ico[data-ico=globe] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cpath d='M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cpath d='M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18z'/%3E%3C/svg%3E"); } .nav-ico[data-ico=spark] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2.5l1.9 5.1 5.1 1.9-5.1 1.9L12 16.5l-1.9-5.1L5 9.5l5.1-1.9z'/%3E%3Cpath d='M19 14l.7 1.9 1.9.7-1.9.7-.7 1.9-.7-1.9-1.9-.7 1.9-.7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2.5l1.9 5.1 5.1 1.9-5.1 1.9L12 16.5l-1.9-5.1L5 9.5l5.1-1.9z'/%3E%3Cpath d='M19 14l.7 1.9 1.9.7-1.9.7-.7 1.9-.7-1.9-1.9-.7 1.9-.7z'/%3E%3C/svg%3E"); } .nav-ico[data-ico=send] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E"); } .nav-ico[data-ico=edit] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); } .nav-ico[data-ico=bulb] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='9' y1='18' x2='15' y2='18'/%3E%3Cline x1='10' y1='22' x2='14' y2='22'/%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.3h6c0-1 .4-1.8 1-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='9' y1='18' x2='15' y2='18'/%3E%3Cline x1='10' y1='22' x2='14' y2='22'/%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.3h6c0-1 .4-1.8 1-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E"); } /* ============================================================================ CARDS & SHARED UI ==========================================================================*/ .card { background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); } .card-pad-lg { padding: 24px; } .card-title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 9px; } .card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; } .section-label { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-mute); margin: 0 0 12px; } .grid { display: grid; gap: 16px; } .grid-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .stat { background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius); padding: 18px; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); } .stat::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: var(--accent-grad); opacity: 0.12; } .stat-val { font-family: var(--ff-display); font-size: 30px; font-weight: 700; line-height: 1; } .stat-val small { font-size: 14px; font-weight: 500; color: var(--text-dim); } .stat-label { font-size: 12px; color: var(--text-mute); margin-top: 8px; letter-spacing: 0.3px; } .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--stroke); color: var(--text-dim); letter-spacing: 0.3px; } .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .empty { text-align: center; padding: 40px 20px; color: var(--text-mute); } .empty-ico { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 14px; background: var(--surface-2); display: grid; place-items: center; } .seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--stroke); border-radius: 999px; padding: 4px; gap: 2px; } .seg button { border: 0; background: none; color: var(--text-dim); padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: color .15s, background .2s; } .seg button.active { color: #fff; background: var(--accent-grad); } /* ============================================================================ CALCULATOR ==========================================================================*/ .calc-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .calc-result { position: sticky; top: 20px; background: var(--surface); border: 1px solid var(--stroke-2); border-radius: var(--radius-lg); padding: 26px; overflow: hidden; box-shadow: var(--shadow); } .units-hero { text-align: center; padding: 14px 0 18px; } .units-hero .units-num { font-family: var(--ff-display); font-weight: 700; line-height: 0.9; font-size: clamp(58px, 11vw, 88px); background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .units-hero .units-cap { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); margin-top: 6px; } .units-hero .units-sub { font-size: 13px; color: var(--text-mute); margin-top: 4px; } .result-rows { display: grid; gap: 1px; background: var(--stroke); border-radius: var(--radius-sm); overflow: hidden; margin-top: 8px; border: 1px solid var(--stroke); } .result-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 15px; background: var(--surface); font-size: 14px; } .result-row .rk { color: var(--text-dim); } .result-row .rv { font-family: var(--ff-display); font-weight: 600; } .syringe { margin: 18px 0 6px; } .syringe-track { position: relative; height: 30px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--stroke); overflow: hidden; } .syringe-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-grad); border-radius: 999px; transition: width .4s cubic-bezier(.2,.8,.2,1); } .syringe-ticks { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--text-mute); } .hint { font-size: 12px; color: var(--text-mute); margin-top: 6px; line-height: 1.5; } .field-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; } .warn-box { margin-top: 14px; font-size: 12.5px; color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); padding: 10px 12px; border-radius: var(--radius-sm); line-height: 1.5; } /* calculator how-to guide */ .calc-steps { margin: 0; padding-left: 20px; display: grid; gap: 9px; } .calc-steps li { font-size: 14px; color: var(--text-dim); line-height: 1.5; } .calc-steps li b { color: var(--text); } .calc-why { margin-top: 18px; border-top: 1px solid var(--stroke); padding-top: 16px; } .calc-why h4 { font-size: 14.5px; margin-bottom: 8px; } .calc-why p { font-size: 14px; color: var(--text-dim); line-height: 1.6; margin: 9px 0; } .calc-why p b { color: var(--text); } .calc-eq { font-family: var(--ff-display); font-weight: 600; color: var(--accent-1) !important; background: color-mix(in srgb, var(--accent-1) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent-1) 25%, transparent); border-radius: var(--radius-sm); padding: 11px 14px; text-align: center; } .calc-eg { display: grid; gap: 8px; margin: 12px 0; } .calc-eg > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface-2); border: 1px solid var(--stroke); border-radius: var(--radius-sm); padding: 11px 14px; font-size: 13.5px; } .calc-eg span { color: var(--text-dim); } .calc-eg span b, .calc-eg > div > b { color: var(--text); } .calc-eg > div > b { font-family: var(--ff-display); white-space: nowrap; } @media (max-width: 880px) { .calc-eg > div { flex-direction: column; align-items: flex-start; gap: 3px; } } /* ============================================================================ LOG ==========================================================================*/ .log-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; } .log-toolbar .grow { flex: 1; min-width: 160px; } .log-day { margin-bottom: 22px; } .log-day-head { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-mute); margin: 0 0 10px; display: flex; align-items: center; gap: 10px; } .log-day-head::after { content: ""; flex: 1; height: 1px; background: var(--stroke); } .log-entry { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius); margin-bottom: 8px; transition: border-color .15s, box-shadow .15s; box-shadow: var(--shadow-sm); } .log-entry:hover { border-color: var(--stroke-2); box-shadow: var(--shadow); } .log-bar { width: 4px; align-self: stretch; border-radius: 4px; flex: none; } .log-main { flex: 1; min-width: 0; } .log-name { font-family: var(--ff-display); font-weight: 600; font-size: 15px; } .log-meta { font-size: 12.5px; color: var(--text-mute); margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; } .log-dose { text-align: right; flex: none; } .log-dose .d1 { font-family: var(--ff-display); font-weight: 700; font-size: 16px; } .log-dose .d2 { font-size: 12px; color: var(--text-mute); } .log-del { background: none; border: 0; color: var(--text-mute); cursor: pointer; padding: 8px; border-radius: 8px; flex: none; } .log-del:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); } .log-edit { background: none; border: 0; color: var(--text-mute); cursor: pointer; padding: 8px; border-radius: 8px; flex: none; display: inline-grid; place-items: center; } .log-edit .nav-ico { width: 16px; height: 16px; } .log-edit:hover { color: var(--accent-1); background: color-mix(in srgb, var(--accent-1) 12%, transparent); } /* ============================================================================ LIBRARY ==========================================================================*/ .pep-card { position: relative; overflow: hidden; transition: transform .12s, box-shadow .2s, border-color .2s; } .pep-card:hover { border-color: var(--stroke-2); box-shadow: var(--shadow); transform: translateY(-2px); } .pep-card .pep-accent { position: absolute; inset: 0 auto 0 0; width: 4px; } .pep-card .pep-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .pep-name { font-family: var(--ff-display); font-size: 17px; font-weight: 600; } .pep-cat { font-size: 11.5px; color: var(--text-mute); margin-top: 2px; } .pep-conc { font-family: var(--ff-display); font-weight: 700; font-size: 22px; margin-top: 14px; } .pep-conc small { font-size: 12px; color: var(--text-dim); font-weight: 500; } .pep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 14px; font-size: 13px; } .pep-grid .k { color: var(--text-mute); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; } .pep-grid .v { font-weight: 600; margin-top: 1px; } .pep-notes { font-size: 12.5px; color: var(--text-dim); margin-top: 14px; line-height: 1.5; border-top: 1px solid var(--stroke); padding-top: 12px; } .pep-actions { display: flex; gap: 8px; margin-top: 14px; } /* ============================================================================ WIKI ==========================================================================*/ .wiki-note { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 22px; display: flex; gap: 10px; align-items: flex-start; box-shadow: var(--shadow-sm); } .wiki-note b { color: var(--text); } .wiki-cat { margin-bottom: 26px; } .wiki-cat-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; } .wiki-cat-head h3 { font-size: 18px; display: flex; align-items: center; gap: 10px; } .wiki-cat-head .wiki-cat-blurb { font-size: 12.5px; color: var(--text-mute); } .wiki-cat-head .wiki-cat-bar { width: 26px; height: 3px; border-radius: 3px; } .wiki-card { display: flex; flex-direction: column; position: relative; overflow: hidden; } .wiki-card:hover { border-color: var(--stroke-2); box-shadow: var(--shadow); } .wiki-card .pep-accent { position: absolute; inset: 0 auto 0 0; width: 4px; } .wiki-card .wiki-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .wiki-card .wiki-name { font-family: var(--ff-display); font-size: 16.5px; font-weight: 600; } .wiki-card .wiki-short { font-size: 13px; color: var(--text-dim); margin-top: 8px; line-height: 1.5; flex: 1; } .wiki-card .wiki-main { font-size: 12.5px; color: var(--text); margin-top: 12px; line-height: 1.45; border-top: 1px solid var(--stroke); padding-top: 12px; } .wiki-card .wiki-main b { color: var(--accent-1); font-weight: 600; } .wiki-card .pep-actions { margin-top: 14px; align-items: center; } .instack { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ok); } .stage-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; letter-spacing: 0.3px; flex: none; border: 1px solid; line-height: 1.3; max-width: 56%; text-align: right; } .stage-approved { color: #22c55e; border-color: color-mix(in srgb, #22c55e 40%, transparent); background: color-mix(in srgb, #22c55e 14%, transparent); } .stage-trial { color: #f59e0b; border-color: color-mix(in srgb, #f59e0b 40%, transparent); background: color-mix(in srgb, #f59e0b 14%, transparent); } .stage-research { color: #3b82f6; border-color: color-mix(in srgb, #3b82f6 40%, transparent); background: color-mix(in srgb, #3b82f6 14%, transparent); } .stage-supplement { color: #14b8a6; border-color: color-mix(in srgb, #14b8a6 40%, transparent); background: color-mix(in srgb, #14b8a6 14%, transparent); } .stage-supply { color: #94a3b8; border-color: color-mix(in srgb, #94a3b8 40%, transparent); background: color-mix(in srgb, #94a3b8 16%, transparent); } .pc-block { margin-top: 16px; } .pc-block h4 { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-mute); margin: 0 0 8px; } .pc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .pc-list li { font-size: 13.5px; line-height: 1.45; color: var(--text-dim); display: flex; gap: 9px; align-items: flex-start; } .pc-list li::before { content: ""; width: 16px; height: 16px; flex: none; margin-top: 1px; background-repeat: no-repeat; background-position: center; background-size: contain; } .pc-pro li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); } .pc-con li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); } .pc-ben li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15 9 22 9.5 17 14 18.5 21 12 17 5.5 21 7 14 2 9.5 9 9'/%3E%3C/svg%3E"); } .modal .stage-pill { max-width: none; margin-top: 4px; } /* wiki "read more" community deep-dive */ .wiki-deep { margin-top: 14px; border: 1px solid color-mix(in srgb, var(--accent-1) 30%, var(--stroke)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent-1) 6%, var(--surface-2)); overflow: hidden; } .wiki-deep > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 12px 14px; font-weight: 600; font-size: 13.5px; color: var(--accent-1); } .wiki-deep > summary::-webkit-details-marker { display: none; } .wiki-deep > summary .nav-ico { width: 16px; height: 16px; color: var(--accent-1); flex: none; } .wiki-deep > summary::after { content: "▸"; margin-left: auto; transition: transform .18s; color: var(--text-mute); } .wiki-deep[open] > summary::after { transform: rotate(90deg); } .wiki-deep[open] > summary { border-bottom: 1px solid var(--stroke); } .wiki-deep-body { padding: 14px; } .wiki-deep-body .modal-sub { font-size: 13.5px; } .wiki-deep-note { font-size: 12px; color: var(--text-mute); line-height: 1.5; margin: 6px 0 0; border-top: 1px dashed var(--stroke-2); padding-top: 10px; } .wiki-deep-note b { color: var(--text-dim); } .modal-sub { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 2px 0 0; } /* popularity bar */ .pop { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .pop-track { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--stroke); } .pop-fill { height: 100%; border-radius: 999px; background: var(--accent-grad); } .pop-num { font-family: var(--ff-display); font-weight: 700; font-size: 13px; color: var(--text-dim); min-width: 22px; text-align: right; } .wiki-pop { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .wiki-pop-label { font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-mute); flex: none; } /* wiki toolbar */ .wiki-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .wiki-top .pill { margin-left: auto; } /* compare view */ .cmp-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; } .cmp-selectors { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-bottom: 18px; } .cmp-vs { font-family: var(--ff-display); font-weight: 700; color: var(--text-mute); } .cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .cmp-col-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } @media (max-width: 720px) { .cmp-grid { grid-template-columns: 1fr; } } /* ============================================================================ GLOSSARY ==========================================================================*/ .gl-intro { margin-bottom: 16px; } .gl-intro h3 { font-size: 19px; } /* Section orienting note (top of Log, My Stack, Calculator, Cycles, Transformation, Lab results) */ .section-intro { display: flex; gap: 13px; align-items: flex-start; padding: 13px 16px; margin-bottom: 18px; background: color-mix(in srgb, var(--accent-1) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent-1) 22%, var(--stroke)); border-radius: var(--radius-sm); } .section-intro-ico { color: var(--accent-1); flex: 0 0 auto; margin-top: 1px; } .section-intro-body strong { display: block; font-family: var(--ff-display); font-size: 14.5px; font-weight: 600; color: var(--text); margin-bottom: 3px; } .section-intro-body p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-dim); } .gl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .gl-chip { font-size: 12.5px; font-weight: 600; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--stroke); border-radius: 999px; padding: 7px 13px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; } .gl-chip:hover { color: var(--accent-1); border-color: color-mix(in srgb, var(--accent-1) 40%, transparent); background: color-mix(in srgb, var(--accent-1) 8%, var(--surface-2)); } .gl-list { display: grid; gap: 0; } .gl-row { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 13px 0; border-top: 1px solid var(--stroke); } .gl-row:first-child { border-top: 0; } .gl-term { font-family: var(--ff-display); font-weight: 600; font-size: 14.5px; color: var(--text); } .gl-def { font-size: 14px; color: var(--text-dim); line-height: 1.55; } .gl-empty { text-align: center; color: var(--text-mute); padding: 30px 0; } @media (max-width: 640px) { .gl-row { grid-template-columns: 1fr; gap: 3px; } .gl-term { font-size: 15px; } } /* ============================================================================ MODALS ==========================================================================*/ .modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(3,5,10,0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .2s ease; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .modal { width: 100%; max-width: 480px; max-height: 90dvh; overflow-y: auto; border-radius: var(--radius-lg); padding: 24px; background: var(--surface); border: 1px solid var(--stroke); box-shadow: var(--shadow-lg); animation: pop .24s cubic-bezier(.2,.9,.3,1.2); } @keyframes pop { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .modal-head h3 { font-size: 19px; } .modal-close { background: var(--surface-2); border: 1px solid var(--stroke); color: var(--text-dim); width: 32px; height: 32px; border-radius: 10px; cursor: pointer; font-size: 18px; line-height: 1; } .modal-close:hover { color: var(--text); background: var(--surface-3); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-grid .full { grid-column: 1 / -1; } .swatches { display: flex; gap: 8px; flex-wrap: wrap; } .swatch { width: 28px; height: 28px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: transform .1s; } .swatch:hover { transform: scale(1.1); } .swatch.sel { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-1); } .ac-wrap { position: relative; } .ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--surface); border: 1px solid var(--stroke-2); border-radius: var(--radius-sm); overflow: hidden auto; max-height: 280px; box-shadow: var(--shadow-lg); } .ac-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--stroke); padding: 11px 13px; cursor: pointer; color: var(--text); } .ac-item:last-child { border-bottom: 0; } .ac-item:hover { background: var(--surface-2); } .ac-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .ac-name { font-weight: 600; font-size: 14px; } .ac-cat { margin-left: auto; font-size: 11px; color: var(--text-mute); white-space: nowrap; } /* ============================================================================ CLOUD: auth + paywall ==========================================================================*/ .cloud-loading { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 30px 0; text-align: center; } .cloud-spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--stroke); border-top-color: var(--accent-1); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .cloud-notice { font-size: 13px; color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); padding: 10px 12px; border-radius: var(--radius-sm); margin: 0 0 16px; } .cloud-warn { font-size: 13px; color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); padding: 12px 14px; border-radius: var(--radius-sm); margin: 0 0 16px; line-height: 1.5; } .cloud-oauth { background: var(--text); color: var(--bg-0); border: 0; font-weight: 600; } .cloud-oauth:hover { filter: opacity(0.9); } .cloud-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--text-mute); font-size: 12px; } .cloud-divider::before, .cloud-divider::after { content: ""; flex: 1; height: 1px; background: var(--stroke); } .cloud-seg button.active { color: #fff; background: var(--accent-grad); } .cloud-top { position: absolute; top: 16px; right: 16px; } .plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; } .plan-grid-single { grid-template-columns: 1fr; } .plan { position: relative; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 3px; padding: 16px 14px; border-radius: var(--radius); background: var(--surface-2); border: 1.5px solid var(--stroke); color: var(--text); transition: border-color .18s, background .18s; } .plan:hover { background: var(--surface-3); } .plan.sel { border-color: var(--accent-1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-1) 18%, transparent); background: var(--surface); } .plan-badge { position: absolute; top: -9px; right: 12px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--accent-grad); color: #fff; } .plan-name { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-mute); } .plan-price { font-family: var(--ff-display); font-weight: 700; font-size: 22px; } .plan-note { font-size: 11.5px; color: var(--text-mute); } /* ============================================================================ TOASTS ==========================================================================*/ .toast-root { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .toast { background: var(--surface-3); border: 1px solid var(--stroke-2); color: var(--text); padding: 12px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow-lg); animation: toast-in .3s cubic-bezier(.2,.9,.3,1.2); display: flex; align-items: center; gap: 9px; } .toast.ok { border-color: color-mix(in srgb, var(--ok) 50%, transparent); } .toast.err { border-color: color-mix(in srgb, var(--danger) 50%, transparent); } @keyframes toast-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* settings rows */ .set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--stroke); } .set-row:last-child { border-bottom: 0; } .set-row .set-info h4 { font-size: 14.5px; } .set-row .set-info p { font-size: 12.5px; color: var(--text-mute); margin: 4px 0 0; max-width: 420px; line-height: 1.45; } /* ============================================================================ STACK MIX (dashboard category donut + leader labels) ==========================================================================*/ .stack-pie { width: 100%; height: auto; display: block; max-width: 600px; margin: 4px auto 0; overflow: visible; } .stack-pie .sp-seg { stroke: var(--surface); stroke-width: 2.5; } .stack-pie .sp-line { fill: none; stroke: var(--stroke-2); stroke-width: 1.4; } .stack-pie .sp-name { fill: var(--text); font-family: var(--ff-body); font-weight: 500; } .stack-pie .sp-center-num { fill: var(--text); font-family: var(--ff-display); font-weight: 700; font-size: 34px; } .stack-pie .sp-center-lbl { fill: var(--text-mute); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; } .sp-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; margin-top: 14px; } .sp-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-dim); } .sp-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; } /* ============================================================================ CONSISTENCY HEATMAP (dashboard calendar) ==========================================================================*/ .cal { --cell: 13px; --cgap: 3px; margin-top: 4px; } .cal + .cal { margin-top: 24px; } .cal-yr { font-family: var(--ff-display); font-weight: 700; font-size: 16px; color: var(--text-dim); margin-bottom: 8px; } .cal-scroll { overflow-x: auto; padding-bottom: 6px; } .cal-months { display: grid; gap: var(--cgap); padding-left: 38px; margin-bottom: 6px; font-size: 11px; color: var(--text-mute); min-width: max-content; } .cal-months span { grid-row: 1; white-space: nowrap; } .cal-row { display: flex; gap: 6px; min-width: max-content; } .cal-wd { display: grid; grid-template-rows: repeat(7, var(--cell)); gap: var(--cgap); width: 32px; font-size: 10px; color: var(--text-mute); } .cal-wd span { line-height: var(--cell); } .cal-cells { display: grid; grid-template-rows: repeat(7, var(--cell)); grid-auto-flow: column; gap: var(--cgap); } .cal-cells .cell { width: var(--cell); height: var(--cell); border-radius: 4px; background: var(--surface-2); } .cal-cells .cell.out { background: transparent; } .cal-cells .cell.lvl1 { background: color-mix(in srgb, #34d399 32%, var(--surface-2)); } .cal-cells .cell.lvl2 { background: color-mix(in srgb, #34d399 62%, var(--surface-2)); } .cal-cells .cell.lvl3 { background: #34d399; } .cal-cells .cell.today { box-shadow: 0 0 0 2px var(--accent-1); } .cal-legend { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 14px; font-size: 11px; color: var(--text-mute); } .cal-legend .cell { width: 12px; height: 12px; border-radius: 4px; display: inline-block; background: color-mix(in srgb, var(--accent-1) 5%, var(--surface-2)); } .cal-legend .cell.lvl1 { background: color-mix(in srgb, var(--accent-1) 30%, var(--surface)); } .cal-legend .cell.lvl2 { background: color-mix(in srgb, var(--accent-1) 62%, var(--surface)); } .cal-legend .cell.lvl3 { background: var(--accent-1); } .cal-nav { display: flex; align-items: center; gap: 6px; } .cal-arrow { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--stroke-2); background: var(--surface-2); color: var(--text-dim); font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s; } .cal-arrow:hover:not(:disabled) { background: var(--surface-3); color: var(--text); } .cal-arrow:disabled { opacity: .4; cursor: not-allowed; } /* month-view consistency calendar (dashboard) */ .cal-label { background: none; border: none; cursor: pointer; font-family: var(--ff-display); font-weight: 600; font-size: 13.5px; color: var(--text); min-width: 132px; text-align: center; padding: 0 2px; transition: color .15s; } .cal-label:hover { color: var(--accent-1); } .mcal { margin: 8px 0 0; max-width: 480px; } .mcal-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; } .mcal-wd span { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-mute); letter-spacing: .5px; } .mcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .mcell { aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--stroke); transition: transform .12s; } .mcell:not(.blank):hover { transform: translateY(-2px); } .mcell span { font-family: var(--ff-display); font-size: 12.5px; font-weight: 600; color: var(--text-dim); } .mcell.blank { background: transparent; border: none; } .mcell.lvl0 { background: color-mix(in srgb, var(--accent-1) 5%, var(--surface-2)); } .mcell.lvl1 { background: color-mix(in srgb, var(--accent-1) 30%, var(--surface)); } .mcell.lvl1 span { color: var(--text); } .mcell.lvl2 { background: color-mix(in srgb, var(--accent-1) 62%, var(--surface)); } .mcell.lvl3 { background: var(--accent-1); border-color: var(--accent-1); } .mcell.lvl2 span, .mcell.lvl3 span { color: #fff; } .mcell.today { box-shadow: inset 0 0 0 2px var(--accent-1); } .mcell.today span { font-weight: 800; } .cal-logged { font-size: 11.5px; font-weight: 600; color: var(--text-dim); } .cal-scale { display: flex; align-items: center; gap: 5px; } /* ============================================================================ TRANSFORMATION ==========================================================================*/ .t-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; } .t-toolbar .seg { margin-right: auto; } .wchart { width: 100%; height: auto; display: block; } .wchart .wc-grid { stroke: var(--stroke); stroke-width: 1; } .wchart .wc-area { fill: color-mix(in srgb, var(--accent-1) 16%, transparent); stroke: none; } .wchart .wc-line { fill: none; stroke: var(--accent-1); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; } .wchart .wc-dot { fill: var(--accent-1); stroke: var(--surface); stroke-width: 2; } .wchart .wc-ylabel, .wchart .wc-xlabel { fill: var(--text-mute); font-size: 11px; font-family: var(--ff-body); } .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; } .photo { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--stroke); background: var(--surface-2); } .photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; cursor: pointer; transition: transform .2s; } .photo img:hover { transform: scale(1.03); } .photo-meta { font-size: 11.5px; color: var(--text-mute); padding: 7px 10px; } /* ============================================================================ DASHBOARD HERO (illustrated, animated stat cards) + global motion ==========================================================================*/ .dash-hello { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; } .dash-hello-title { font-size: clamp(20px, 3vw, 26px); } .dash-hello-sub { font-size: 13px; color: var(--text-mute); margin: 4px 0 0; } .hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 16px; margin-bottom: 18px; } .hero-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 15px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--stroke); box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .25s, border-color .2s; } .hero-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--stroke-2); } .hero-card::after { content: ""; position: absolute; right: -44px; top: -44px; width: 128px; height: 128px; border-radius: 50%; background: var(--accent-grad); opacity: .10; } .hero-art { width: 62px; height: 62px; flex: none; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--accent-1) 13%, var(--surface-2)); position: relative; z-index: 1; } .hero-art .art { width: 40px; height: 40px; overflow: visible; } .hero-emoji { font-size: 32px; line-height: 1; display: block; filter: drop-shadow(0 1px 1px rgba(10,37,64,.12)); } .hero-meta { position: relative; z-index: 1; min-width: 0; } .hero-num { font-family: var(--ff-display); font-weight: 700; font-size: 33px; line-height: 1; } .hero-label { font-size: 12px; color: var(--text-mute); margin-top: 6px; letter-spacing: .3px; } .art-journal { stroke: var(--accent-1); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .art-journal .j-cover { fill: color-mix(in srgb, var(--accent-1) 12%, transparent); } .art-journal .j-line { stroke: color-mix(in srgb, var(--accent-1) 60%, transparent); stroke-width: 2; } .art-journal .j-pen { fill: var(--accent-1); stroke: none; transform-box: fill-box; transform-origin: center; animation: write 2.6s ease-in-out infinite; } @keyframes write { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-2px, 1.5px) rotate(-4deg); } } .art-vial { stroke: var(--accent-1); fill: none; stroke-width: 2; stroke-linecap: round; } .art-vial .v-cap { stroke-width: 3; } .art-vial .v-liquid { fill: var(--accent-1); stroke: none; opacity: .9; transform-box: fill-box; transform-origin: bottom; animation: vfill 1s cubic-bezier(.2,.8,.2,1) both; } @keyframes vfill { from { transform: scaleY(0); } to { transform: scaleY(1); } } .art-vial .v-tick { stroke: color-mix(in srgb, var(--accent-1) 55%, transparent); stroke-width: 1.6; } .art-vials { stroke: var(--accent-1); fill: none; stroke-width: 2; stroke-linecap: round; } .art-vials .av-f { fill: color-mix(in srgb, var(--accent-1) 75%, transparent); stroke: none; } .art-vials .av-group { transform-box: fill-box; transform-origin: center bottom; animation: floaty 3.4s ease-in-out infinite; } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } .hero-streak .hero-art { background: color-mix(in srgb, #38bdf8 16%, var(--surface-2)); } .art-flame .f-outer { fill: #3b82f6; transform-box: fill-box; transform-origin: 50% 100%; animation: flick 1.7s ease-in-out infinite; } .art-flame .f-inner { fill: #93c5fd; transform-box: fill-box; transform-origin: 50% 100%; animation: flick 1.15s ease-in-out infinite reverse; } @keyframes flick { 0%, 100% { transform: scaleY(1) scaleX(1); } 50% { transform: scaleY(1.09) scaleX(.94); } } @keyframes block-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* global spice: sheen sweep on primary buttons */ .btn-primary { position: relative; overflow: hidden; } .btn-primary::after { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-18deg); pointer-events: none; } .btn-primary:hover::after { animation: sheen .7s ease; } @keyframes sheen { from { left: -130%; } to { left: 140%; } } @media (prefers-reduced-motion: reduce) { .hero-card, .art-journal .j-pen, .art-vial .v-liquid, .art-vials .av-group, .art-flame .f-outer, .art-flame .f-inner { animation: none !important; } .art-vial .v-liquid { transform: none !important; } .btn-primary:hover::after { animation: none; } } /* ============================================================================ STACK BUILDER (interactions + templates + vial life) ==========================================================================*/ .nav { overflow-y: auto; } .ix-list { display: grid; gap: 10px; } .ix { border: 1px solid var(--stroke); border-left-width: 3px; border-radius: var(--radius-sm); padding: 12px 14px; background: var(--surface-2); } .ix-synergy { border-left-color: var(--ok); } .ix-caution { border-left-color: var(--danger); } .ix-timing { border-left-color: var(--warn); } .ix-title { font-family: var(--ff-display); font-weight: 600; font-size: 14px; } .ix-text { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; line-height: 1.5; } .tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .tpl { border: 1px solid var(--stroke); border-radius: var(--radius); padding: 14px; background: var(--surface-2); display: flex; flex-direction: column; } .tpl-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .tpl-name { font-family: var(--ff-display); font-weight: 600; font-size: 14.5px; } .tpl-blurb { font-size: 12px; color: var(--text-mute); margin-top: 3px; } .tpl-peps { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 12px; } .tpl-chip { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--stroke); color: var(--text-mute); } .tpl-chip.on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); } .tpl .btn { margin-top: auto; } .tpl-goal { display: inline-block; align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-mute); background: var(--surface); border: 1px solid var(--stroke); padding: 2px 8px; border-radius: 999px; margin-top: 8px; } .stack-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; } .stack-head-title { font-size: 17px; } .stack-head .pill { margin-left: auto; } .tpl-headrow { display: flex; align-items: center; gap: 10px; margin: 24px 0 10px; } .tpl-srcpill { margin-left: auto; color: var(--accent-1); border-color: color-mix(in srgb, var(--accent-1) 40%, transparent); } .tpl-srcpill .nav-ico { width: 13px; height: 13px; } .tpl-disclaimer { margin-bottom: 14px; } /* ============================================================================ CYCLES (planner + weekly calendar) ==========================================================================*/ .wk-nav { display: flex; align-items: center; gap: 8px; } .wk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } .wk-day { border: 1px solid var(--stroke); border-radius: var(--radius-sm); background: var(--surface-2); min-height: 96px; padding: 8px; display: flex; flex-direction: column; } .wk-day.today { border-color: var(--accent-1); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-1) 22%, transparent); } .wk-day-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 11px; color: var(--text-mute); margin-bottom: 6px; } .wk-day-head b { font-family: var(--ff-display); font-size: 14px; color: var(--text); } .wk-day-body { display: flex; flex-direction: column; gap: 4px; } .wk-chip { display: flex; align-items: center; gap: 5px; font-size: 10.5px; padding: 3px 6px; border-radius: 7px; background: var(--surface); border: 1px solid var(--stroke); border-left: 2px solid; } .wk-chip .dot { width: 6px; height: 6px; } .wk-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .wk-chip-dose { color: var(--text-mute); font-weight: 600; flex: none; } .wk-empty { color: var(--text-mute); font-size: 12px; text-align: center; padding-top: 6px; } .wd-row { display: flex; gap: 6px; flex-wrap: wrap; } .wd-box { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; padding: 8px 0; border-radius: 9px; border: 1px solid var(--stroke-2); background: var(--surface-2); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-dim); user-select: none; } .wd-box.on { background: var(--accent-grad); color: #fff; border-color: transparent; } .tstep { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; } .ts-del { background: none; border: 0; color: var(--text-mute); cursor: pointer; padding: 8px; border-radius: 8px; } .ts-del:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); } .cyc-notify-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13.5px; color: var(--text-dim); cursor: pointer; } .cyc-notify-row input { width: auto; } /* ============================================================================ LAB RESULTS ==========================================================================*/ .lab-table { display: grid; gap: 0; } .lab-row { display: grid; grid-template-columns: 1.6fr 1fr 0.9fr 90px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--stroke); } .lab-row:last-child { border-bottom: 0; } .lab-head { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-mute); } .lab-mk-name { font-weight: 600; font-size: 13.5px; } .lab-mk-unit { font-size: 11px; color: var(--text-mute); margin-left: 6px; } .lab-val { display: flex; align-items: center; gap: 6px; } .lab-arrow { color: var(--text-mute); font-size: 12px; } .lab-range { font-size: 12.5px; color: var(--text-mute); } .flag { font-family: var(--ff-display); font-weight: 700; font-size: 13.5px; padding: 2px 8px; border-radius: 7px; } .flag-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); } .flag-low { color: #60a5fa; background: color-mix(in srgb, #60a5fa 14%, transparent); } .flag-high { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); } .flag-crit { color: #fff; background: var(--danger); } .lab-spark { width: 76px; height: 22px; } .lab-spark polyline { fill: none; stroke: var(--accent-1); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; } .lab-flagcount { color: var(--warn); font-weight: 600; } /* ============================================================================ BODY COMPOSITION + MEASUREMENTS ==========================================================================*/ .bc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; } .bc-item { background: var(--surface-2); border: 1px solid var(--stroke); border-radius: var(--radius-sm); padding: 12px; } .bc-k { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: .4px; } .bc-v { font-family: var(--ff-display); font-weight: 700; font-size: 19px; margin-top: 4px; } .bc-v small { font-size: 11px; color: var(--text-dim); font-weight: 500; } .bc-d { font-size: 11.5px; font-weight: 600; margin-top: 2px; } .bc-d.down { color: var(--ok); } .bc-d.up { color: var(--warn); } .mf-details { border: 1px solid var(--stroke); border-radius: var(--radius-sm); padding: 10px 14px; margin-top: 12px; background: var(--surface-2); } .mf-details summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-dim); list-style: none; } .mf-details summary::-webkit-details-marker { display: none; } .mf-details summary::before { content: "+ "; color: var(--accent-1); font-weight: 700; } .mf-details[open] summary::before { content: "– "; } .cmp-photo-sel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .cmp-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cmp-photo { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--stroke); background: var(--surface-2); } .cmp-photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; } .cmp-photo .photo-meta { font-size: 11px; color: var(--text-mute); padding: 6px 8px; } /* ============================================================================ "MORE" SHEET (mobile overflow menu) ==========================================================================*/ .more-sheet { position: fixed; inset: 0; z-index: 80; background: rgba(3,5,10,0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: flex-end; } .more-panel { width: 100%; border-radius: 22px 22px 0 0; padding: 10px 14px calc(var(--nav-h) + 24px); display: flex; flex-direction: column; gap: 4px; animation: more-up .24s cubic-bezier(.2,.9,.3,1.2); } @keyframes more-up { from { transform: translateY(100%); } to { transform: none; } } .more-grip { width: 40px; height: 4px; border-radius: 999px; background: var(--stroke-2); margin: 6px auto 10px; } .more-link { display: flex; align-items: center; gap: 14px; padding: 14px 12px; border-radius: 12px; background: none; border: 0; color: var(--text); font-size: 15px; font-weight: 500; cursor: pointer; text-align: left; } .more-link:hover, .more-link.active { background: var(--surface-2); color: var(--accent-1); } /* ============================================================================ AI ASSISTANT (chat + COA analysis) ==========================================================================*/ .ai-disc { display: flex; gap: 11px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px; box-shadow: var(--shadow-sm); } .ai-disc .nav-ico { width: 18px; height: 18px; color: var(--warn); flex: none; margin-top: 1px; } .ai-disc b { color: var(--text); } .ai-gate { text-align: left; position: relative; overflow: hidden; } .ai-gate-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #3b82f6, #6366f1); padding: 5px 12px; border-radius: 999px; } .ai-chat { display: flex; flex-direction: column; height: min(64vh, 600px); background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .ai-msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; } .ai-bubble { max-width: 86%; padding: 12px 15px; border-radius: 16px; font-size: 14.5px; line-height: 1.55; } .ai-bubble code { background: var(--surface-3); padding: 1px 6px; border-radius: 6px; font-size: 13px; } .ai-user { align-self: flex-end; background: var(--accent-grad); color: #fff; border-bottom-right-radius: 5px; } .ai-bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--stroke); border-bottom-left-radius: 5px; color: var(--text); } .ai-empty { margin: auto; text-align: center; color: var(--text-mute); max-width: 460px; padding: 16px; } .ai-empty-ico { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent-1) 14%, var(--surface-2)); } .ai-empty-ico .nav-ico { width: 26px; height: 26px; color: var(--accent-1); } .ai-suggest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; } .ai-chip { font-size: 12.5px; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--stroke); border-radius: 999px; padding: 8px 13px; cursor: pointer; transition: color .15s, border-color .15s; text-align: left; } .ai-chip:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent-1) 45%, transparent); } .ai-compose { display: flex; gap: 10px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--stroke); background: var(--surface); } .ai-compose textarea { flex: 1; min-height: 44px; max-height: 140px; resize: none; } .ai-compose .icon-btn { height: 44px; width: 44px; flex: none; padding: 0; } .ai-typing { display: flex; gap: 5px; padding: 2px 0; } .ai-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-mute); animation: ai-blink 1.2s infinite both; } .ai-typing span:nth-child(2) { animation-delay: .2s; } .ai-typing span:nth-child(3) { animation-delay: .4s; } @keyframes ai-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } } .coa-drop { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1.5px dashed var(--stroke-2); border-radius: var(--radius); background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; } .coa-drop:hover { border-color: var(--accent-1); background: color-mix(in srgb, var(--accent-1) 6%, var(--surface-2)); } .coa-drop .nav-ico { width: 26px; height: 26px; color: var(--accent-1); flex: none; } .coa-thumb { margin-top: 12px; display: flex; align-items: center; gap: 12px; } .coa-thumb img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--stroke); } .coa-item { border-top: 1px solid var(--stroke); padding: 14px 0; } .coa-item:first-of-type { border-top: 0; } .coa-item-head { display: flex; align-items: center; gap: 4px; } .coa-analysis { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); margin-top: 8px; } @media (prefers-reduced-motion: reduce) { .ai-typing span { animation: none; } } /* ============================================================================ RESPONSIVE ==========================================================================*/ @media (max-width: 880px) { .app { grid-template-columns: 1fr; } .sidebar { display: none; } .content { padding: 18px 16px calc(var(--nav-h) + 28px); } .topbar { align-items: center; } .calc-layout { grid-template-columns: 1fr; } .calc-result { position: static; order: -1; } .form-grid { grid-template-columns: 1fr; } .wk-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 122px; overflow-x: auto; padding-bottom: 6px; } .lab-row { grid-template-columns: 1.5fr 1fr 0.8fr; } .lab-row .lab-trend { display: none; } .tpl-grid { grid-template-columns: 1fr 1fr; } .tabbar { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; border-radius: 20px; padding: 8px; justify-content: space-around; align-items: center; height: var(--nav-h); background: var(--surface); border: 1px solid var(--stroke); box-shadow: var(--shadow-lg); } .tab-item { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; background: none; border: 0; color: var(--text-mute); font-size: 10.5px; font-weight: 600; cursor: pointer; padding: 6px 2px; border-radius: 14px; transition: color .15s; } .tab-item.active { color: var(--accent-1); } .tab-item.active .nav-ico { color: var(--accent-1); } .tab-fab { position: relative; } .tab-fab .nav-ico { width: 30px; height: 30px; padding: 0; } .tab-fab.active .nav-ico { color: #fff; } .tab-fab::before { content: ""; position: absolute; top: 2px; width: 46px; height: 46px; border-radius: 16px; background: var(--surface-2); z-index: -1; transition: background .2s; } .tab-fab.active::before { background: var(--accent-grad); box-shadow: 0 8px 20px -8px var(--accent-1); } } @media (max-width: 420px) { .grid-stats { grid-template-columns: 1fr 1fr; } .pep-grid { grid-template-columns: 1fr 1fr; } }