/* Nema App — Zero-Trace Minimal (premium) */ /* CSP-safe: no inline styles needed */ :root{ --bg: #F5F7FA; --bg2: #EEF2F7; --panel: #FFFFFF; --panel2: rgba(255,255,255,.7); --text: #0B0F14; --muted: #6B7280; --muted2:#9AA4B2; --border: rgba(11,15,20,.12); --shadow: 0 18px 60px rgba(11,15,20,.10); --shadow2: 0 10px 30px rgba(11,15,20,.08); --accent: #19D3FF; --accentSoft: rgba(25,211,255,.16); --accentSoft2: rgba(25,211,255,.10); --danger: #EF4444; --r1: 14px; --r2: 18px; --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; } /* Theme overrides (set by /app/theme.js via ) */ :root[data-theme="dark"]{ --bg: #0B0F14; --bg2:#0D121A; --panel: rgba(255,255,255,.06); --panel2: rgba(255,255,255,.04); --text: #F5F7FA; --muted: #9AA4B2; --muted2:#7B8796; --border: rgba(255,255,255,.10); --shadow: 0 18px 70px rgba(0,0,0,.55); --shadow2: 0 12px 36px rgba(0,0,0,.45); --accentSoft: rgba(25,211,255,.18); --accentSoft2: rgba(25,211,255,.10); } :root[data-theme="light"]{ --bg: #F5F7FA; --bg2: #EEF2F7; --panel: #FFFFFF; --panel2: rgba(255,255,255,.7); --text: #0B0F14; --muted: #6B7280; --muted2:#9AA4B2; --border: rgba(11,15,20,.12); --shadow: 0 18px 60px rgba(11,15,20,.10); --shadow2: 0 10px 30px rgba(11,15,20,.08); --accentSoft: rgba(25,211,255,.16); --accentSoft2: rgba(25,211,255,.10); } *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family: var(--font); color: var(--text); background: radial-gradient(900px 600px at 65% 15%, var(--accentSoft2), transparent 60%), radial-gradient(900px 600px at 15% 85%, rgba(11,15,20,.06), transparent 55%), linear-gradient(180deg, var(--bg), var(--bg2)); } a{ color:inherit; text-decoration:none; } button, input, select{ font:inherit; } .hidden{ display:none !important; } .container{ width:min(1120px, calc(100% - 48px)); margin:0 auto; } .topbar{ position:sticky; top:0; z-index:20; background: rgba(245,247,250,.72); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } @media (prefers-color-scheme: dark){ .topbar{ background: rgba(11,15,20,.72); } } .topbarInner{ height:72px; display:flex; align-items:center; justify-content:space-between; gap:16px; width:min(1120px, calc(100% - 48px)); margin:0 auto; } .brand{ display:flex; align-items:center; gap:10px; letter-spacing:.24em; font-weight:700; font-size:14px; } .brandMark{ width:34px; height:34px; border-radius:999px; border: 1px solid var(--border); background: radial-gradient(10px 10px at 30% 30%, var(--accent), transparent 60%), radial-gradient(14px 14px at 70% 70%, rgba(25,211,255,.35), transparent 65%), linear-gradient(180deg, var(--panel), var(--panel2)); box-shadow: var(--shadow2); } .brandName{ display:inline-block; } .tabs{ display:flex; align-items:center; gap:8px; padding:6px; border-radius:999px; border: 1px solid var(--border); background: var(--panel2); box-shadow: var(--shadow2); } .tabBtn{ appearance:none; border:0; background:transparent; padding:10px 14px; border-radius:999px; color: var(--muted); cursor:pointer; font-weight:600; letter-spacing:.02em; } .tabBtn:hover{ background: rgba(11,15,20,.06); color: var(--text); } @media (prefers-color-scheme: dark){ .tabBtn:hover{ background: rgba(255,255,255,.06); } } /* Your app.js likely toggles .active; keep this class */ .tabBtn.active{ background: var(--text); color: var(--bg); } @media (prefers-color-scheme: dark){ .tabBtn.active{ background: rgba(255,255,255,.92); color: #0B0F14; } } .statusPills{ display:flex; align-items:center; gap:10px; } .pill{ padding:9px 12px; border-radius:999px; border: 1px solid var(--border); background: var(--panel2); box-shadow: var(--shadow2); display:flex; gap:8px; align-items:baseline; } .pillAccent{ border-color: rgba(25,211,255,.35); background: linear-gradient(180deg, var(--accentSoft), var(--panel2)); } .pillLabel{ font-size:12px; color: var(--muted2); letter-spacing:.14em; text-transform:uppercase; } .pillValue{ font-weight:700; font-size:13px; } .main{ padding:28px 0 48px; } .authSection{ padding-top: 8px; } .authGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; } @media (max-width: 900px){ .authGrid{ grid-template-columns:1fr; } } .card{ border:1px solid var(--border); border-radius: var(--r2); background: linear-gradient(180deg, var(--panel), var(--panel2)); box-shadow: var(--shadow); padding:18px; } .authCard .cardHeader{ margin-bottom: 14px; } .kicker{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color: var(--muted2); margin-bottom: 10px; } .h2{ margin:0 0 10px 0; font-size:34px; line-height:1.05; } .h3{ margin:0; font-size:18px; letter-spacing:.01em; } .muted{ color: var(--muted); line-height:1.5; } .form{ display:flex; flex-direction:column; gap:12px; } .field{ display:flex; flex-direction:column; gap:8px; } .label{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color: var(--muted2); } .input, .select{ height:44px; padding:0 14px; border-radius: 12px; border:1px solid var(--border); background: rgba(255,255,255,.72); color: var(--text); outline:none; } @media (prefers-color-scheme: dark){ .input, .select{ background: rgba(255,255,255,.05); } } .input:focus, .select:focus{ border-color: rgba(25,211,255,.55); box-shadow: 0 0 0 4px rgba(25,211,255,.14); } .btn{ height:44px; padding:0 16px; border-radius: 999px; border:1px solid var(--border); background: transparent; color: var(--text); cursor:pointer; font-weight:700; letter-spacing:.02em; } .btn:hover{ box-shadow: var(--shadow2); transform: translateY(-1px); } @media (prefers-reduced-motion: reduce){ .btn:hover{ transform:none; } } .btnPrimary{ border-color: rgba(25,211,255,.55); background: linear-gradient(180deg, rgba(25,211,255,.22), rgba(25,211,255,.10)); } .btnPrimary:hover{ box-shadow: 0 14px 40px rgba(25,211,255,.16); } .btnGhost{ background: rgba(11,15,20,.04); } @media (prefers-color-scheme: dark){ .btnGhost{ background: rgba(255,255,255,.05); } } .btnGhostSmall{ height:36px; padding:0 12px; font-size:13px; } .btnDanger{ border-color: rgba(239,68,68,.6); background: rgba(239,68,68,.10); color: var(--danger); } .error{ min-height: 18px; color: var(--danger); font-size:13px; } .tinyNote{ margin-top: 16px; color: var(--muted); font-size: 13px; } .tabsView{ margin-top: 18px; } .warn{ border:1px solid rgba(25,211,255,.35); background: linear-gradient(180deg, var(--accentSoft2), var(--panel2)); border-radius: var(--r2); padding:16px; box-shadow: var(--shadow2); margin-bottom: 18px; } .warnTitle{ font-weight:800; margin-bottom:6px; } .warnText{ color: var(--muted); line-height:1.5; } .warnActions{ margin-top: 12px; display:flex; gap:10px; flex-wrap:wrap; } .view{ margin-top: 10px; } .grid2{ display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; } @media (max-width: 980px){ .grid2{ grid-template-columns:1fr; } } .cardHeaderRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 12px; } .meta{ color: var(--muted2); font-size:12px; letter-spacing:.12em; text-transform:uppercase; } .formRow2{ display:grid; grid-template-columns: 1fr 220px; gap:12px; } @media (max-width: 720px){ .formRow2{ grid-template-columns:1fr; } } .actionsRow{ display:flex; gap:10px; margin-top: 10px; } .actionsRow.wrap{ flex-wrap:wrap; } .logBlock{ margin-top: 12px; } .logTitle{ color: var(--muted2); font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin: 4px 0 8px; } .logBox{ border:1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.65); padding:12px; min-height: 220px; max-height: 360px; overflow:auto; white-space: pre-wrap; word-break: break-word; } @media (prefers-color-scheme: dark){ .logBox{ background: rgba(255,255,255,.05); } } .logBoxSmall{ min-height: 140px; } .divider{ height:1px; background: var(--border); margin: 16px 0; } .groupsList{ display:flex; flex-direction:column; gap:10px; } .groupsList .groupItem{ border:1px solid var(--border); border-radius: 14px; padding: 12px; background: rgba(255,255,255,.55); } @media (prefers-color-scheme: dark){ .groupsList .groupItem{ background: rgba(255,255,255,.04); } } .file{ display:none; } /* Capture guard */ .captureGuard{ position: fixed; inset: 0; z-index: 50; display:flex; align-items:center; justify-content:center; background: rgba(11,15,20,.75); backdrop-filter: blur(10px); } .captureGuardInner{ width:min(620px, calc(100% - 40px)); border-radius: 18px; border:1px solid rgba(25,211,255,.35); background: linear-gradient(180deg, rgba(25,211,255,.16), rgba(255,255,255,.05)); box-shadow: 0 24px 90px rgba(0,0,0,.55); padding:18px; color: #F5F7FA; line-height:1.5; } /* --- UI tidy patch (match CSS to current HTML) --- */ /* Use theme toggle state, not OS preference */ :root[data-theme="dark"] .topbar { background: rgba(11,15,20,.72); } :root[data-theme="light"] .topbar { background: rgba(245,247,250,.72); } :root[data-theme="dark"] .tabBtn:hover { background: rgba(255,255,255,.06); } :root[data-theme="dark"] .tabBtn.active { background: rgba(255,255,255,.92); color:#0B0F14; } /* Main shell (you used .appShell, not .container/.main) */ .appShell{ width:min(1120px, calc(100% - 48px)); margin:0 auto; padding:28px 0 48px; } /* Top-right pills were stacking because .rightPills wasn't styled */ .rightPills{ display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; } /* Theme button in header */ .iconBtn{ height:36px; width:36px; border-radius:999px; border:1px solid var(--border); background: var(--panel2); color: var(--text); cursor:pointer; box-shadow: var(--shadow2); } .iconBtn:hover{ transform: translateY(-1px); } @media (prefers-reduced-motion: reduce){ .iconBtn:hover{ transform:none; } } /* Make pill values look like pill values even without class names */ .pill #me, .pill #plan{ font-weight:700; font-size:13px; } /* Auth cards: your HTML uses .authCard (not .card), so it was unstyled */ .authCard{ border:1px solid var(--border); border-radius: var(--r2); background: linear-gradient(180deg, var(--panel), var(--panel2)); box-shadow: var(--shadow); padding:18px; } /* Auth typography (your HTML uses .authTitle/.authLead) */ .authTitle{ margin:0 0 10px 0; font-size:34px; line-height:1.05; letter-spacing:.01em; } .authLead{ margin:0 0 14px 0; color: var(--muted); line-height:1.5; } .authError{ min-height: 18px; margin: 8px 0 0; color: var(--danger); font-size:13px; } .authFoot{ margin-top:14px; color: var(--muted); font-size:13px; } /* Buttons you use in HTML but didn't have CSS for */ .btnWide{ width:100%; } .btnSm{ height:36px; padding:0 12px; font-size:13px; } /* Chat layout: your HTML uses .twoCol/.row2/.cardHeadRow/.cardTitle/.logLabel */ .twoCol{ display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; } @media (max-width: 980px){ .twoCol{ grid-template-columns:1fr; } } .row2{ display:grid; grid-template-columns: 1fr 220px; gap:12px; } @media (max-width: 720px){ .row2{ grid-template-columns:1fr; } } .cardHeadRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 12px; } .cardTitle{ margin:0; font-size:18px; letter-spacing:.01em; } .logLabel{ color: var(--muted2); font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin: 4px 0 8px; } /* Warning block (your HTML uses .warning) */ .warning{ border:1px solid rgba(25,211,255,.35); background: linear-gradient(180deg, var(--accentSoft2), var(--panel2)); border-radius: var(--r2); padding:16px; box-shadow: var(--shadow2); margin-top: 14px; } .spaceStatus { margin-top: 10px; }