/* Social Studio — design language. Teal accent, slate (light) / zinc (dark) neutrals, Inter, rounded-xl cards. Light is the default; dark applies via [data-theme="dark"] on , or the OS preference when the user hasn't chosen. */ :root{ --bg:#f8fafc; /* slate-50 */ --panel:#ffffff; /* card */ --panel2:#f1f5f9; /* slate-100 */ --hover:#f8fafc; --border:#e2e8f0; /* slate-200 */ --border2:#cbd5e1; /* slate-300 */ --ink:#0f172a; /* slate-900 */ --ink2:#334155; /* slate-700 */ --muted:#64748b; /* slate-500 */ --faint:#94a3b8; /* slate-400 */ --brand:#0d9488; /* teal-600 */ --brand-hover:#0f766e; /* teal-700 */ --brand-ink:#0d9488; --brand-weak:#f0fdfa; /* teal-50 */ --brand-ring:rgba(13,148,136,.28); --good:#059669; /* emerald-600 */ --good-weak:#ecfdf5; --warn:#d97706; /* amber-600 */ --warn-weak:#fffbeb; --danger:#e11d48; /* rose-600 */ --danger-weak:#fff1f2; --shadow:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06); --shadow-lg:0 10px 30px rgba(15,23,42,.12); --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:12px; --r-2xl:16px; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,monospace; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#08080a; --panel:#111114; --panel2:#1a1a20; --hover:#1e1e25; --border:#232329; --border2:#33333c; --ink:#fafafa; --ink2:#e4e4e7; --muted:#a1a1aa; --faint:#71717a; --brand:#14b8a6; --brand-hover:#0d9488; --brand-ink:#2dd4bf; --brand-weak:rgba(20,184,166,.12); --brand-ring:rgba(20,184,166,.30); --good:#34d399; --good-weak:rgba(16,185,129,.13); --warn:#fbbf24; --warn-weak:rgba(217,119,6,.14); --danger:#fb7185; --danger-weak:rgba(225,29,72,.14); --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 12px 34px rgba(0,0,0,.55); } } :root[data-theme="dark"]{ --bg:#08080a; --panel:#111114; --panel2:#1a1a20; --hover:#1e1e25; --border:#232329; --border2:#33333c; --ink:#fafafa; --ink2:#e4e4e7; --muted:#a1a1aa; --faint:#71717a; --brand:#14b8a6; --brand-hover:#0d9488; --brand-ink:#2dd4bf; --brand-weak:rgba(20,184,166,.12); --brand-ring:rgba(20,184,166,.30); --good:#34d399; --good-weak:rgba(16,185,129,.13); --warn:#fbbf24; --warn-weak:rgba(217,119,6,.14); --danger:#fb7185; --danger-weak:rgba(225,29,72,.14); --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 12px 34px rgba(0,0,0,.55); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.5; font-feature-settings:'cv02','cv03','cv04','cv11'; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } a{color:inherit;text-decoration:none} .mono{font-family:var(--mono)} /* ---- Buttons ---- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; border:0; border-radius:var(--r-lg); padding:9px 16px; font:inherit; font-size:13.5px; font-weight:600; letter-spacing:-.01em; cursor:pointer; transition:background-color .15s, border-color .15s, color .15s, box-shadow .15s; color:var(--ink); background:var(--panel2); } .btn:hover{background:var(--border)} .btn.primary{background:var(--brand); color:#fff; box-shadow:0 1px 2px var(--brand-ring)} .btn.primary:hover{background:var(--brand-hover)} .btn.ghost{background:transparent; border:1px solid var(--border); color:var(--ink2)} .btn.ghost:hover{background:var(--panel2)} .btn.danger{background:transparent; border:1px solid var(--border); color:var(--danger)} .btn.danger:hover{background:var(--danger-weak)} .btn.block{width:100%} .btn:disabled{opacity:.55; cursor:not-allowed} .btn.sm{padding:6px 11px; font-size:12.5px} /* ---- Brand mark ---- */ .mark{ width:30px;height:30px;border-radius:var(--r-lg); background:var(--brand); color:#fff; display:grid;place-items:center;font-size:16px;font-weight:800; box-shadow:0 1px 2px var(--brand-ring); } /* ---- Cards ---- */ .card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r-2xl); box-shadow:var(--shadow); } /* ---- Form controls ---- */ .ctrl, .f input, .f textarea, .f select{ width:100%; background:var(--panel); color:var(--ink); border:1px solid var(--border); border-radius:var(--r-md); padding:10px 12px; font:inherit; font-size:14px; transition:border-color .15s, box-shadow .15s; } .ctrl:focus, .f input:focus, .f textarea:focus, .f select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); } .ctrl::placeholder, .f input::placeholder, .f textarea::placeholder{color:var(--faint)} input,textarea,select{-webkit-appearance:none;appearance:none} input[type=checkbox],input[type=radio]{-webkit-appearance:auto;appearance:auto} @media (hover:none) and (pointer:coarse){ input,textarea,select{font-size:16px !important} } /* ---- Labels / eyebrows ---- */ .eyebrow{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)} /* ---- Pills / badges ---- */ .pill{ display:inline-flex;align-items:center;gap:5px; font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em; padding:3px 9px;border-radius:999px;white-space:nowrap; } .pill.draft{background:var(--panel2);color:var(--muted)} .pill.generating{background:var(--brand-weak);color:var(--brand-ink)} .pill.publishing,.pill.scheduled{background:var(--brand-weak);color:var(--brand-ink)} .pill.published{background:var(--good-weak);color:var(--good)} .pill.failed{background:var(--danger-weak);color:var(--danger)} .dot{width:6px;height:6px;border-radius:50%;display:inline-block} .dot.on{background:var(--good)} .dot.off{background:var(--border2)} .dot.warn{background:var(--warn)} /* ---- Spinner ---- */ @keyframes spin{to{transform:rotate(360deg)}} .spinner{width:26px;height:26px;border:3px solid var(--border);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite} @keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.35}} .pulse{animation:pulse-dot 1.8s ease-in-out infinite} /* ---- Motion ---- */ @keyframes fade-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} .fade-up{animation:fade-up .35s cubic-bezier(.2,.8,.2,1) both} @keyframes fade-in{from{opacity:0}to{opacity:1}} .fade-in{animation:fade-in .2s ease both} @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} } /* ---- Theme toggle ---- */ .theme-toggle{ display:inline-flex;align-items:center;gap:2px; background:var(--panel2);border:1px solid var(--border);border-radius:999px;padding:2px; } .theme-toggle button{ border:0;background:transparent;color:var(--faint); width:28px;height:24px;border-radius:999px;cursor:pointer; display:grid;place-items:center;font-size:13px;line-height:1;transition:background .15s,color .15s; } .theme-toggle button.on{background:var(--panel);color:var(--brand-ink);box-shadow:var(--shadow)} /* ---- Scrollbars ---- */ ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px} ::-webkit-scrollbar-thumb:hover{background:var(--border2)}