:root{--bg:#f3f0ea;--bg-elevated:#fffdf8;--ink:#1c2421;--ink-muted:#5c675f;--line:rgba(28,36,33,0.12);--teal:#0f8a72;--teal-soft:#d7f0e8;--amber:#c47a12;--amber-soft:#f6e5c7;--steel:#8a928c;--steel-soft:#e8ebe7;--danger:#b42318;--accent:#1f4d45;--shadow:0 18px 50px rgba(28,36,33,0.08);--radius:18px;--font-display:"Syne","Avenir Next",sans-serif;--font-body:"IBM Plex Sans","Helvetica Neue",sans-serif}*{box-sizing:border-box}body,html{margin:0;padding:0;min-height:100%}body{font-family:var(--font-body);color:var(--ink);background:radial-gradient(circle at 12% 8%,rgba(15,138,114,.12),transparent 34%),radial-gradient(circle at 88% 0,rgba(196,122,18,.1),transparent 28%),linear-gradient(180deg,#f7f4ef 0,var(--bg) 48%,#ebe7df 100%);background-attachment:fixed}a{color:inherit;text-decoration:none}button,input{font:inherit}.auth-shell{min-height:100vh;display:grid;place-items:center;padding:32px 20px}.auth-card{width:min(440px,100%);background:color-mix(in srgb,var(--bg-elevated) 92%,white);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:36px 32px 28px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:rise .48s ease both}.brand-mark{font-weight:700;font-size:1.55rem;color:var(--accent)}.auth-card h1,.brand-mark{font-family:var(--font-display);letter-spacing:-.03em}.auth-card h1{font-size:1.85rem;margin:18px 0 8px}.auth-card .subtitle{color:var(--ink-muted);margin:0 0 24px;line-height:1.5}.field{display:grid;grid-gap:8px;gap:8px;margin-bottom:14px}.field label{font-size:.86rem;font-weight:550;color:var(--ink-muted)}.field input{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px 14px;outline:none;transition:border-color .16s ease,box-shadow .16s ease}.field input:focus{border-color:color-mix(in srgb,var(--teal) 55%,var(--line));box-shadow:0 0 0 3px rgba(15,138,114,.12)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:12px;padding:12px 16px;cursor:pointer;transition:transform .14s ease,background .14s ease,opacity .14s ease}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{width:100%;background:var(--accent);color:#f7f4ef;font-weight:600}.btn-primary:hover:not(:disabled){background:#163b35}.btn-ghost{background:transparent;color:var(--ink-muted);border:1px solid var(--line)}.btn-ghost:hover:not(:disabled){background:rgba(28,36,33,.04)}.auth-footer{margin-top:22px;text-align:center;color:var(--ink-muted);font-size:.92rem}.auth-footer a{color:var(--teal);font-weight:600}.auth-error{background:#fdeceb;color:var(--danger);border-radius:10px;padding:10px 12px;margin-bottom:14px;font-size:.9rem}.fine-print{margin:12px 0 0;font-size:.78rem;color:var(--ink-muted);line-height:1.45}.fine-print a{text-decoration:underline}.app-shell{min-height:100vh;display:grid;grid-template-columns:240px 1fr}.sidebar{border-right:1px solid var(--line);background:color-mix(in srgb,var(--bg-elevated) 88%,#e8efe9);padding:24px 16px;display:flex;flex-direction:column;gap:8px;position:-webkit-sticky;position:sticky;top:0;height:100vh}.sidebar nav{display:grid;grid-gap:4px;gap:4px;margin-top:18px}.nav-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--ink-muted);font-weight:500;transition:background .14s ease,color .14s ease}.nav-link:hover{background:rgba(28,36,33,.05);color:var(--ink)}.nav-link.active{background:var(--teal-soft);color:var(--accent)}.nav-link.disabled{opacity:.45;pointer-events:none}.sidebar-divider{height:1px;background:var(--line);margin:12px 4px}.main{min-width:0}.topbar{display:flex;align-items:center;justify-content:space-between;padding:22px 28px 8px}.topbar h1{font-family:var(--font-display);font-size:1.7rem;margin:0;letter-spacing:-.03em}.topbar-actions{display:flex;align-items:center;gap:12px}.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--accent));color:white;display:grid;place-items:center;font-weight:700;font-size:.85rem}.content{padding:12px 28px 40px}.progress-block{background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:22px;box-shadow:var(--shadow);animation:rise .42s ease both}.progress-label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;font-weight:600}.progress-label span{color:var(--ink-muted);font-weight:500;font-size:.92rem}.progress-track{height:6px;border-radius:999px;background:var(--steel-soft);overflow:hidden}.progress-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--teal),#2bb89a);transition:width .5s cubic-bezier(.22,1,.36,1)}.channel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-gap:14px;gap:14px}.channel-card{background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius);padding:18px;min-height:168px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow);transition:transform .18s ease,border-color .18s ease;animation:rise .5s ease both}.channel-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--teal) 35%,var(--line))}.channel-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.platform-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:.95rem;background:var(--steel-soft);color:var(--accent)}.status-light{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 4px rgba(255,255,255,.7)}.status-light.active{background:#17a37a;box-shadow:0 0 0 4px rgba(23,163,122,.16),0 0 12px rgba(23,163,122,.45);animation:pulse 2.2s ease infinite}.status-light.needs_reconnection{background:var(--amber);box-shadow:0 0 0 4px rgba(196,122,18,.16)}.status-light.connecting,.status-light.not_connected,.status-light.revoked{background:var(--steel)}.channel-card h3{margin:0;font-family:var(--font-display);font-size:1.05rem;letter-spacing:-.02em}.channel-meta{color:var(--ink-muted);font-size:.88rem;line-height:1.4;min-height:2.4em}.channel-actions{margin-top:auto;display:flex;gap:8px}.channel-actions .btn{flex:1 1;padding:9px 12px;font-size:.9rem}.legend{margin-top:24px;display:flex;flex-wrap:wrap;gap:16px;color:var(--ink-muted);font-size:.9rem}.legend-item{display:inline-flex;align-items:center;gap:8px}.toast{position:fixed;right:20px;bottom:20px;background:var(--ink);color:#f7f4ef;padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);z-index:50;animation:rise .24s ease both}.modal-backdrop{position:fixed;inset:0;background:rgba(28,36,33,.42);display:grid;place-items:center;padding:20px;z-index:40;animation:fade .18s ease both}.modal{width:min(420px,100%);background:var(--bg-elevated);border-radius:20px;padding:24px;border:1px solid var(--line);box-shadow:var(--shadow)}.modal h2{font-family:var(--font-display);margin:0 0 8px}.modal p{color:var(--ink-muted);margin:0 0 16px;line-height:1.45}.modal-actions{display:flex;gap:10px;margin-top:8px}.home-summary{display:grid;grid-gap:18px;gap:18px}.chip-row{display:flex;flex-wrap:wrap;gap:8px}.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);font-size:.88rem}.chip,.empty-panel{background:var(--bg-elevated)}.empty-panel{border:1px dashed var(--line);border-radius:var(--radius);padding:28px;color:var(--ink-muted)}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{box-shadow:0 0 0 4px rgba(23,163,122,.16),0 0 10px rgba(23,163,122,.35)}50%{box-shadow:0 0 0 5px rgba(23,163,122,.22),0 0 16px rgba(23,163,122,.55)}}@media (max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line)}.sidebar nav{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;margin-top:10px}.content,.topbar{padding-left:16px;padding-right:16px}}