/* ========================================================================= RBCopilot Field — Design System v3 "Midnight" Dark-premium by default (real-estate-app aesthetic), with a light theme override for bright-sun field use: . Mobile-first PWA, vanilla CSS, system fonts (offline-safe). ========================================================================= */ :root { /* ===== DARK (default) ===== */ --bg: #0b0b0d; --surface: #161619; --surface-2: #1f1f24; --ink: #fafaf9; --ink-soft: #a1a1aa; --ink-faint: #6c6c75; --line: rgba(255,255,255,.09); --line-soft: rgba(255,255,255,.05); --brand: #fb923c; --brand-2: #fbbf24; --brand-deep: #f97316; --brand-tint: rgba(249,115,22,.16); --brand-grad: linear-gradient(135deg, #fdba74 0%, #f97316 52%, #ea580c 100%); --accent-ink: #1a1207; --c-orange:#fb923c; --c-orange-t:rgba(251,146,60,.16); --c-blue: #60a5fa; --c-blue-t:rgba(96,165,250,.16); --c-green: #4ade80; --c-green-t:rgba(74,222,128,.16); --c-cyan: #22d3ee; --c-cyan-t:rgba(34,211,238,.16); --c-red: #f87171; --c-red-t:rgba(248,113,113,.16); --ok:#4ade80; --ok-t:rgba(74,222,128,.15); --warn:#fbbf24; --warn-t:rgba(251,191,36,.15); --review:#fb923c; --review-t:rgba(251,146,60,.15); --danger:#f87171; --danger-t:rgba(248,113,113,.15); --info:#a1a1aa; --info-t:rgba(255,255,255,.08); --toast-bg: #26262c; --sh-1: 0 2px 10px -3px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 20px 44px -16px rgba(0,0,0,.75), 0 6px 14px -8px rgba(0,0,0,.5); --sh-brand: 0 12px 30px -10px rgba(249,115,22,.5); --inner-hi: inset 0 1px 0 rgba(255,255,255,.07); /* Secondary accent (telemetry blue) */ --accent-2: #60a5fa; --accent-2-deep: #2563eb; --accent-2-grad: linear-gradient(135deg, #93c5fd 0%, #3b82f6 100%); --accent-2-tint: rgba(59,130,246,.16); /* Liquid glass surfaces (dark) */ --glass-bg: rgba(30,30,36,.5); --glass-bg-2: rgba(40,40,48,.62); --glass-border: rgba(255,255,255,.11); --glass-hi: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.02); --glass-blur: blur(18px) saturate(1.4); /* tokens shared by both themes */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace; --r-card: 22px; --r-btn: 16px; --r-pill: 999px; --tap: 58px; --tap-sm: 48px; --maxw: 540px; --nav-h: 72px; --ease: cubic-bezier(.32,.72,0,1); color-scheme: dark; } /* ===== LIGHT theme override (warm "Hi-Vis") ===== */ :root[data-theme="light"] { --bg:#f4f2ef; --surface:#ffffff; --surface-2:#faf9f7; --ink:#1c1917; --ink-soft:#57534e; --ink-faint:#a8a29e; --line:#e9e5e0; --line-soft:#f1eeea; --brand:#ea580c; --brand-2:#f59e0b; --brand-deep:#c2410c; --brand-tint:#fef0e7; --brand-grad:linear-gradient(135deg,#fb923c 0%,#ea580c 55%,#c2410c 100%); --accent-ink:#fff; --c-orange:#ea580c; --c-orange-t:#fdece2; --c-blue:#2563eb; --c-blue-t:#e6edfd; --c-green:#15803d; --c-green-t:#e3f4e9; --c-cyan:#0e7490; --c-cyan-t:#def1f5; --c-red:#dc2626; --c-red-t:#fbe7e7; --ok:#15803d; --ok-t:#e3f4e9; --warn:#b45309; --warn-t:#fbf0db; --review:#ea580c; --review-t:#fdece2; --danger:#dc2626; --danger-t:#fbe7e7; --info:#44403c; --info-t:#efece8; --toast-bg:#1c1917; --sh-1:0 2px 8px -3px rgba(28,25,23,.10),0 1px 2px rgba(28,25,23,.05); --sh-2:0 14px 34px -14px rgba(28,25,23,.24),0 4px 10px -6px rgba(28,25,23,.12); --sh-brand:0 12px 26px -10px rgba(234,88,12,.5); --inner-hi:inset 0 1px 0 rgba(255,255,255,.6); --accent-2:#2563eb; --accent-2-deep:#1d4ed8; --accent-2-grad:linear-gradient(135deg,#60a5fa,#2563eb); --accent-2-tint:#e6edfd; --glass-bg:rgba(255,255,255,.74); --glass-bg-2:rgba(255,255,255,.86); --glass-border:rgba(28,25,23,.08); --glass-hi:inset 0 1px 0 rgba(255,255,255,.9); --glass-blur:blur(16px) saturate(1.2); color-scheme: light; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; } html { background-color: var(--bg); } body { font-family: var(--font); background-color: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior-y: none; transition: background-color .3s var(--ease), color .3s var(--ease); } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2.5px solid var(--brand); outline-offset: 2px; } svg { width: 22px; height: 22px; flex: none; } /* Fixed textured backdrop — construction-toned glow + fine grain, pure CSS so it works offline. Gives the glass surfaces something to refract over. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(90% 55% at 12% -6%, rgba(249,115,22,.24), transparent 58%), radial-gradient(80% 50% at 102% 6%, rgba(59,130,246,.18), transparent 60%), radial-gradient(70% 45% at 50% 55%, rgba(120,120,135,.08), transparent 70%), radial-gradient(110% 70% at 50% 116%, rgba(249,115,22,.10), transparent 66%), var(--bg); } body::after { /* fine grain overlay */ content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); } :root[data-theme="light"] body::before { background: radial-gradient(90% 60% at 12% -8%, rgba(234,88,12,.10), transparent 60%), radial-gradient(80% 55% at 100% 8%, rgba(37,99,235,.06), transparent 62%), var(--bg); } :root[data-theme="light"] body::after { opacity: .25; } .app { max-width: var(--maxw); margin: 0 auto; min-height: 100dvh; background: transparent; position: relative; display: flex; flex-direction: column; } /* ===================== Top bar ===================== */ .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; height: 62px; padding: 0 14px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--line); } .topbar h1 { font-size: 20px; font-weight: 800; letter-spacing: -.03em; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar .sub { font-size: 12px; color: var(--brand); font-weight: 650; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .iconbtn { width: var(--tap-sm); height: var(--tap-sm); flex: none; display: grid; place-items: center; background: transparent; border: none; border-radius: 14px; color: var(--ink); cursor: pointer; transition: transform .15s var(--ease), background .15s; } .iconbtn:active { transform: scale(.9); background: var(--line-soft); } .iconbtn svg { width: 24px; height: 24px; } /* ===================== Scroll ===================== */ .scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 16px calc(var(--nav-h) + 28px); } .scroll.no-nav { padding-bottom: 28px; } .scroll > * { animation: rise .5s var(--ease) both; } .scroll > *:nth-child(1){animation-delay:.02s}.scroll > *:nth-child(2){animation-delay:.06s} .scroll > *:nth-child(3){animation-delay:.10s}.scroll > *:nth-child(4){animation-delay:.14s} .scroll > *:nth-child(5){animation-delay:.18s}.scroll > *:nth-child(6){animation-delay:.22s} .scroll > *:nth-child(n+7){animation-delay:.26s} @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .scroll > * { animation: none; } } /* ===================== Type ===================== */ .display { font-size: 30px; font-weight: 850; letter-spacing: -.035em; line-height: 1.05; } .h2 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin: 0; } .eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); } .muted { color: var(--ink-soft); } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .section-label { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 26px 4px 12px; } .section-label a { color: var(--brand); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 700; } /* ===================== Search ===================== */ .search { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 52px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-1); margin-bottom: 4px; } .search svg { width: 20px; height: 20px; color: var(--ink-faint); } .search input { flex: 1; border: none; background: transparent; font-size: 15.5px; outline: none; min-width: 0; } .search .filt { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-grad); color: #fff; display: grid; place-items: center; flex: none; } .search .filt svg { width: 18px; height: 18px; color: #fff; } /* ===================== Hero ===================== */ .hero { position: relative; overflow: hidden; border-radius: var(--r-card); padding: 26px 22px; margin-bottom: 4px; color: #fff; background: linear-gradient(180deg, rgba(20,20,26,.60), rgba(11,11,15,.74)); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.13); } .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(85% 70% at 108% -18%, rgba(249,115,22,.32), transparent 58%), radial-gradient(80% 70% at -12% 122%, rgba(59,130,246,.22), transparent 60%); } .hero > * { position: relative; z-index: 1; } /* photo hero — same roller imagery as the login cover, for a unified look */ .hero.photo { min-height: 158px; display: flex; flex-direction: column; justify-content: flex-end; background-image: linear-gradient(160deg, rgba(10,10,14,.28) 0%, rgba(10,10,14,.58) 46%, rgba(10,10,14,.9) 100%), url("../img/cover-roller.webp"); background-size: cover; background-position: center 28%; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(255,255,255,.12); } .hero.photo::after { display: none; } .hero .eyebrow { color: var(--brand); } .hero .display, .hero .h2 { color: #fff; } .hero .muted { color: rgba(255,255,255,.8); } .hero .pill { background: rgba(255,255,255,.16); color: #fff; } /* gradient-highlighted words in headlines */ .hl { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .hl.blue { background: var(--accent-2-grad); -webkit-background-clip: text; background-clip: text; } /* ===================== Cards ===================== */ .card { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-card); box-shadow: var(--sh-1), var(--glass-hi); } .card.pad { padding: 18px; } .job-card { display: block; padding: 16px 16px 16px 18px; margin-bottom: 14px; cursor: pointer; position: relative; overflow: hidden; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-card); box-shadow: var(--sh-1), var(--glass-hi); transition: transform .16s var(--ease), box-shadow .2s var(--ease), border-color .2s; } .job-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--brand-grad); } .job-card:active { transform: scale(.985); box-shadow: var(--sh-2); } .job-card .row1 { display: flex; align-items: flex-start; gap: 10px; } .job-card .title { font-size: 17.5px; font-weight: 800; letter-spacing: -.02em; flex: 1; line-height: 1.25; } .job-card .meta { font-size: 13.5px; color: var(--ink-soft); margin-top: 4px; line-height: 1.5; } .job-card .foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 13px; } /* ===================== Pills ===================== */ .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 750; padding: 5px 11px; border-radius: var(--r-pill); white-space: nowrap; } .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); } .pill svg { width: 14px; height: 14px; } .pill.synced,.pill.active,.pill.completed { background: var(--ok-t); color: var(--ok); } .pill.draft,.pill.on_hold { background: var(--warn-t); color: var(--warn); } .pill.review,.pill.submitted { background: var(--review-t); color: var(--review); } .pill.offline,.pill.closed { background: var(--info-t); color: var(--info); } .pill.danger { background: var(--danger-t); color: var(--danger); } /* ===================== Buttons ===================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: var(--tap); padding: 0 22px; width: 100%; border: none; border-radius: var(--r-btn); cursor: pointer; font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; transition: transform .15s var(--ease), box-shadow .2s var(--ease), filter .15s; } .btn svg { width: 20px; height: 20px; } .btn:active { transform: translateY(1px) scale(.985); } .btn.primary { background: var(--brand-grad); color: #1a1207; box-shadow: var(--sh-brand); } .btn.primary:active { filter: brightness(.96); } .btn.secondary { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); color: var(--ink); border: 1.5px solid var(--glass-border); box-shadow: var(--sh-1), var(--glass-hi); } .btn.ghost { background: transparent; color: var(--ink-soft); } .btn.danger { background: var(--danger-t); color: var(--danger); } .btn.blue { background: var(--accent-2-grad); color: #06122b; box-shadow: 0 12px 30px -10px rgba(37,99,235,.5); } .btn.blue:active { filter: brightness(.96); } .btn.sm { height: var(--tap-sm); font-size: 14.5px; padding: 0 16px; width: auto; border-radius: 13px; } .btn:disabled { opacity: .5; pointer-events: none; } .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fab { position: fixed; right: max(16px, calc(50vw - var(--maxw)/2 + 16px)); bottom: calc(var(--nav-h) + 18px); z-index: 25; height: 58px; padding: 0 24px; border-radius: var(--r-pill); background: var(--brand-grad); color: #1a1207; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 800; box-shadow: var(--sh-brand); transition: transform .16s var(--ease); } .fab:active { transform: scale(.93); } .fab svg { width: 22px; height: 22px; } /* ===================== Tiles ===================== */ .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; } .tile { position: relative; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-card); padding: 17px 16px; min-height: 112px; cursor: pointer; text-align: left; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; box-shadow: var(--sh-1), var(--glass-hi); transition: transform .16s var(--ease), box-shadow .2s var(--ease); --tc: var(--c-orange); --tct: var(--c-orange-t); } .tile:active { transform: scale(.96); box-shadow: var(--sh-2); } .tile .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--tct); color: var(--tc); box-shadow: var(--inner-hi); } .tile .ico svg { width: 25px; height: 25px; } .tile .label { font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; display: block; } .tile .count { font-size: 12.5px; color: var(--ink-soft); font-weight: 550; } .tile[data-c="blue"] { --tc: var(--c-blue); --tct: var(--c-blue-t); } .tile[data-c="green"] { --tc: var(--c-green); --tct: var(--c-green-t); } .tile[data-c="cyan"] { --tc: var(--c-cyan); --tct: var(--c-cyan-t); } .tile[data-c="red"] { --tc: var(--c-red); --tct: var(--c-red-t); } .tile.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; background: var(--brand-grad); border: none; color: #1a1207; box-shadow: var(--sh-brand); } .tile.wide .label { color: #1a1207; } .tile.wide .ico { background: rgba(0,0,0,.16); color: #1a1207; } .tile.wide .count { color: rgba(26,18,7,.7); } /* ===================== Forms ===================== */ .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 17px; } .field > label { font-size: 13.5px; font-weight: 750; color: var(--ink); letter-spacing: -.01em; } .field .help { font-size: 12.5px; color: var(--ink-soft); } .field .err { font-size: 12.5px; color: var(--danger); font-weight: 650; } .input, .select, .textarea { width: 100%; min-height: var(--tap-sm); padding: 13px 15px; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 14px; font-size: 16px; transition: border-color .15s, box-shadow .15s, background .15s; } .input:focus, .select:focus, .textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); outline: none; } .textarea { min-height: 96px; resize: vertical; line-height: 1.5; } .input::placeholder, .textarea::placeholder { color: var(--ink-faint); } .select { appearance: none; } select option { color: #18181b; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { min-height: var(--tap-sm); padding: 0 16px; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; font-size: 14.5px; font-weight: 650; display: inline-flex; align-items: center; transition: transform .12s var(--ease), border-color .15s, background .15s, color .15s, box-shadow .15s; } .chip:active { transform: scale(.94); } .chip.on { background: var(--brand-grad); border-color: transparent; color: #1a1207; box-shadow: var(--sh-brand); } /* ===================== Bottom nav ===================== */ .bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 28; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px) saturate(1.3); border-top: 1px solid var(--line); display: flex; } .bottomnav-inner { max-width: var(--maxw); margin: 0 auto; width: 100%; display: flex; } .navitem { flex: 1; border: none; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-faint); font-size: 11px; font-weight: 700; position: relative; transition: color .15s, transform .12s var(--ease); } .navitem svg { width: 25px; height: 25px; } .navitem:active { transform: scale(.88); } .navitem.on { color: var(--brand); } .navitem.on::before { content: ""; position: absolute; top: 0; width: 26px; height: 3px; border-radius: 0 0 4px 4px; background: var(--brand-grad); } .navitem .badge { position: absolute; top: 8px; right: 50%; margin-right: -22px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #1a1207; font-size: 11px; font-weight: 800; display: grid; place-items: center; font-family: var(--mono); } /* ===================== Sheet ===================== */ .scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .25s var(--ease); display: flex; align-items: flex-end; justify-content: center; } .scrim.show { opacity: 1; } .sheet { width: 100%; max-width: var(--maxw); max-height: 92dvh; overflow-y: auto; background: var(--glass-bg-2); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: 28px 28px 0 0; transform: translateY(100%); transition: transform .32s var(--ease); padding: 8px 18px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -16px 50px -12px rgba(0,0,0,.6), var(--glass-hi); border-top: 1px solid var(--glass-border); } .scrim.show .sheet { transform: translateY(0); } .sheet .grip { width: 42px; height: 5px; border-radius: 3px; background: var(--line); margin: 9px auto 16px; } .sheet h2 { margin: 0 0 18px; font-size: 21px; font-weight: 850; letter-spacing: -.03em; } /* ===================== Report sections ===================== */ .report-sec { margin-bottom: 14px; } .report-sec > .head { display: flex; align-items: center; gap: 12px; padding: 15px 16px; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-card); cursor: pointer; box-shadow: var(--sh-1), var(--glass-hi); } .report-sec > .head .ico { width: 38px; height: 38px; border-radius: 12px; flex: none; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; } .report-sec > .head .ico svg { width: 21px; height: 21px; } .report-sec > .head .t { flex: 1; font-weight: 800; font-size: 15.5px; letter-spacing: -.01em; } .report-sec > .head .n { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); background: var(--line-soft); padding: 3px 10px; border-radius: var(--r-pill); min-width: 26px; text-align: center; } .report-sec > .head .n svg { width: 18px; height: 18px; } .report-sec .body { padding: 8px 2px 4px; } .row { display: flex; align-items: center; gap: 13px; padding: 15px 16px; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 16px; margin-bottom: 9px; box-shadow: var(--glass-hi); } .row > svg { width: 20px; height: 20px; color: var(--ink-faint); } .row .grow { flex: 1; min-width: 0; } .row .r-title { font-weight: 700; font-size: 15px; letter-spacing: -.01em; } .row .r-sub { font-size: 13px; color: var(--ink-soft); margin-top: 2px; } .row .r-val { font-family: var(--mono); font-weight: 800; font-size: 15.5px; white-space: nowrap; } .row .iconbtn { width: 40px; height: 40px; border-radius: 12px; } .row .iconbtn svg { width: 21px; height: 21px; } .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; } .photo-grid .ph { aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); position: relative; } .photo-grid .ph img { width: 100%; height: 100%; object-fit: cover; display: block; } .photo-grid .add { display: grid; place-items: center; color: var(--brand); cursor: pointer; background: var(--brand-tint); border: 1.5px dashed color-mix(in srgb,var(--brand) 42%, transparent); } .photo-grid .add svg { width: 27px; height: 27px; } /* ===================== Empty / banners ===================== */ .empty { text-align: center; padding: 60px 24px; } .empty .ico { width: 76px; height: 76px; border-radius: 22px; margin: 0 auto 18px; display: grid; place-items: center; background: var(--brand-grad); color: #1a1207; box-shadow: var(--sh-brand); } .empty .ico svg { width: 34px; height: 34px; } .empty h3 { margin: 0 0 7px; font-size: 19px; font-weight: 850; letter-spacing: -.02em; } .empty p { margin: 0 auto 20px; color: var(--ink-soft); max-width: 30ch; font-size: 14.5px; } .skel { background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: var(--r-card); } @keyframes shimmer { to { background-position: -200% 0; } } .skel-card { height: 100px; margin-bottom: 14px; } .banner { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border-radius: 16px; font-size: 14px; font-weight: 650; margin-bottom: 14px; } .banner svg { width: 20px; height: 20px; } .banner.warn { background: var(--warn-t); color: var(--warn); } .banner.danger { background: var(--danger-t); color: var(--danger); } .banner.info { background: var(--info-t); color: var(--ink); } /* ===================== Toast ===================== */ .toast-wrap { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + 20px); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .toast { background: var(--toast-bg); color: #fff; padding: 13px 20px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 700; box-shadow: var(--sh-2); max-width: 90vw; border: 1px solid var(--line); transform: translateY(10px) scale(.96); opacity: 0; transition: all .26s var(--ease); display: flex; align-items: center; gap: 9px; } .toast.show { transform: none; opacity: 1; } .toast svg { width: 18px; height: 18px; } .toast.ok svg { color: #4ade80; } .toast.err svg { color: #f87171; } .offline-bar { background: var(--toast-bg); color: #fff; font-size: 12.5px; font-weight: 700; text-align: center; padding: 7px; display: none; } body.is-offline .offline-bar { display: block; } /* ===================== Auth ===================== */ .auth { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: clamp(20px,5vh,44px) 26px calc(28px + env(safe-area-inset-bottom)); max-width: var(--maxw); margin: 0 auto; position: relative; } .auth::before { content: ""; position: absolute; top: -6%; left: -25%; width: 90%; height: 44%; background: radial-gradient(circle, rgba(249,115,22,.28), transparent 70%); pointer-events: none; filter: blur(20px); } .auth-scene { border-radius: 22px; overflow: hidden; border: 1px solid var(--glass-border); box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.08); margin-bottom: 26px; background: #0a0a0e; position: relative; } .auth-scene svg, .auth-scene img { width: 100%; height: auto; display: block; } .auth-scene .ov { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,14,.04) 0%, rgba(10,10,14,.4) 52%, rgba(10,10,14,.92) 100%); } .auth-scene .cap { position: absolute; left: 18px; right: 18px; bottom: 15px; } .auth-scene .cap .bm { display: flex; align-items: center; gap: 11px; } .auth-scene .cap .bm .mk { width: 38px; height: 38px; border-radius: 12px; background: var(--brand-grad); color: #1a1207; display: grid; place-items: center; box-shadow: var(--sh-brand); } .auth-scene .cap .bm .mk svg { width: 22px; height: 22px; } .auth-scene .cap .bm .nm { font-size: 21px; font-weight: 850; letter-spacing: -.03em; color: #fff; } .auth-scene .cap p { margin: 9px 0 0; color: rgba(255,255,255,.84); font-size: 14px; font-weight: 500; } .auth .brand { display: flex; align-items: center; gap: 13px; margin-bottom: 10px; } .auth .brand .mark { width: 52px; height: 52px; border-radius: 16px; background: var(--brand-grad); color: #1a1207; display: grid; place-items: center; box-shadow: var(--sh-brand); } .auth .brand .mark svg { width: 30px; height: 30px; } .auth .brand .name { font-size: 23px; font-weight: 850; letter-spacing: -.035em; } .auth .tagline { color: var(--ink-soft); font-size: 15.5px; margin: 4px 0 30px; line-height: 1.45; } .auth .switch { text-align: center; margin-top: 20px; font-size: 14.5px; color: var(--ink-soft); } .auth .switch a { color: var(--brand); font-weight: 800; cursor: pointer; } .lang-toggle { display: inline-flex; border: 1.5px solid var(--line); border-radius: var(--r-pill); overflow: hidden; background: var(--surface); box-shadow: var(--sh-1); } .lang-toggle button { border: none; background: transparent; padding: 9px 18px; font-size: 13.5px; font-weight: 700; cursor: pointer; color: var(--ink-soft); transition: all .15s; } .lang-toggle button.on { background: var(--brand-grad); color: #1a1207; } .stat { text-align: center; padding: 18px 12px !important; } .stat .v { font-size: 28px; font-weight: 850; letter-spacing: -.04em; } .stat .l { font-size: 12px; color: var(--ink-soft); font-weight: 600; } /* radial progress ring (telemetry-style gauge) */ .ring { --p: 0; --size: 92px; width: var(--size); height: var(--size); border-radius: 50%; flex: none; display: grid; place-items: center; position: relative; background: conic-gradient(var(--brand) calc(var(--p) * 1%), rgba(140,140,150,.18) 0); } .ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--glass-bg-2); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-hi); } .ring .v { position: relative; z-index: 1; font-family: var(--mono); font-weight: 850; font-size: 19px; letter-spacing: -.03em; } .ring.blue { background: conic-gradient(var(--accent-2) calc(var(--p) * 1%), rgba(140,140,150,.18) 0); } /* ===================== Chat ===================== */ .chat-scroll { padding-bottom: 84px !important; display: flex; flex-direction: column; gap: 10px; } .msg { max-width: 78%; padding: 10px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.4; background: var(--glass-bg); border: 1px solid var(--glass-border); align-self: flex-start; box-shadow: var(--glass-hi); } .msg .who { font-size: 11px; font-weight: 700; color: var(--brand); margin-bottom: 3px; } .msg .time { font-size: 10.5px; color: var(--ink-faint); margin-top: 4px; } .msg.mine { align-self: flex-end; background: var(--brand-grad); color: #1a1207; border: none; } .msg.mine .who { color: rgba(26,18,7,.7); } .msg.mine .time { color: rgba(26,18,7,.6); } .msg .voice { display: flex; align-items: center; gap: 9px; } .msg .voice .play { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--brand-tint); color: var(--brand); cursor: pointer; } .msg.mine .voice .play { background: rgba(0,0,0,.16); color: #1a1207; } .msg .voice .play svg { width: 18px; height: 18px; } .chat-empty { text-align: center; color: var(--ink-soft); font-size: 14px; padding: 40px 20px; } .chatbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 28; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--line); } .chatbar-inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 8px; } .chatbar input { flex: 1; min-height: 44px; padding: 10px 15px; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 22px; font-size: 15px; } .chatbar input:focus { border-color: var(--brand); outline: none; } .chatbar button { width: 44px; height: 44px; flex: none; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; background: var(--brand-grad); color: #1a1207; transition: transform .12s var(--ease); } .chatbar button:active { transform: scale(.9); } .chatbar button svg { width: 21px; height: 21px; } .chatbar button.rec { background: var(--surface); color: var(--brand); border: 1.5px solid var(--line); } .chatbar button.rec.on { background: var(--danger-t); color: var(--danger); border-color: transparent; } .stack-8 > * + * { margin-top: 8px; } .stack-12 > * + * { margin-top: 12px; } .mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px} .center { text-align: center; } .spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }