:root { /* Light theme (default) */ color-scheme: light; /* Page background */ --bg0: #f3f4f6; /* light grey */ --bg1: #eef2f7; /* cool grey */ /* Panels */ --frame: #ffffff; /* Text */ --text: #0f172a; --muted: #475569; /* Accent gradient (Slate + Sky) */ --grad: linear-gradient(135deg, #4f46e5 0%, #0ea5e9 55%, #14b8a6 100%); /* Shadows (kept off per your preference) */ --shadow: none; --shadow-pressed: none; --shadow-soft: none; --shadow-med: none; --radius-xl: 22px; --radius-lg: 18px; /* Surfaces */ --surface: #ffffff; --surface-2: #f8fafc; /* subtle tint for chips/secondary */ --surface-3: #f1f5f9; /* subtle tint for notices/soft panels */ /* Borders */ --border-soft: rgba(148, 163, 184, .35); --border-med: rgba(148, 163, 184, .50); --border-strong: rgba(148, 163, 184, .65); /* Focus */ --focus-border: rgba(59, 130, 246, .65); --focus-bg: #eef6ff; --focus-ring: 0 0 0 4px rgba(59, 130, 246, .18); } /* Manual dark-mode toggle: add data-theme="dark" to */ :root[data-theme="dark"] { } /* Auto dark-mode (follows OS) unless you explicitly force light with data-theme="light" */ @media (prefers-color-scheme: dark) { } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color: var(--text); background: radial-gradient(1200px 600px at 15% 10%, rgba(109, 94, 252, .18), transparent 55%), radial-gradient(900px 500px at 80% 20%, rgba(58, 164, 255, .16), transparent 60%), radial-gradient(900px 500px at 55% 95%, rgba(61, 217, 196, .14), transparent 55%), linear-gradient(180deg, var(--bg1), var(--bg0)); } :root[data-theme="dark"] { } @media (prefers-color-scheme: dark) { } .app-shell { padding: clamp(10px, 2.2vw, 18px); min-height: 100%; display: flex; justify-content: center; } .app-frame { margin-left: auto; margin-right: auto; width: min(1200px, 100%); background: var(--frame); border-radius: var(--radius-xl); box-shadow: none; overflow: hidden; border: 1px solid var(--border-soft); display: flex; flex-direction: column; min-height: calc(100vh - 2*clamp(10px, 2.2vw, 18px)); backdrop-filter: blur(10px); } .topbar { padding: 20px 18px; min-height: 86px; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .logo { display: flex; align-items: center; justify-content: center; background: none !important; border-radius: 0 !important; padding: 0 !important; } .brand-logo { height: 60px; /* increase size */ width: auto; display: block; } .brand { display: flex; align-items: center; gap: 24px; /* pushes text right */ } .brand-text { min-width: 0; } .site-name { font-weight: 800; letter-spacing: .2px; font-size: 26px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .site-subtitle { font-size: 16px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-area { display: flex; align-items: center; gap: 10px; } .user-chip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(8px); font-size: 13px; max-width: 52vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .icon-circle { width: 26px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, .20); display: inline-flex; align-items: center; justify-content: center; } .content { padding: clamp(12px, 2.4vw, 22px); flex: 1 1 auto; } .footer { padding: 12px 16px; border-top: 1px solid var(--border-soft); color: var(--muted); font-size: 12px; } @media (max-width: 520px) { .site-subtitle { display: none; } .user-chip { max-width: 44vw; } } /* ========================= MOBILE: STICKY TOPBAR ========================= */ @media (max-width: 720px) { .topbar { position: sticky; top: 0; z-index: 50; } }