:root { --ink:#102235; --muted:#667586; --line:#dce5ed; --surface:#ffffff; --canvas:#f4f7fa; --blue:#1868db; --blue-dark:#0d4fac; --green:#168760; --amber:#b66b03; --red:#c33e47; --navy:#0c1e30; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--canvas); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:15px; line-height:1.5; }
.site-header { min-height:72px; display:flex; justify-content:space-between; align-items:center; padding:0 5vw; background:var(--navy); color:#fff; }
.brand { color:#fff; text-decoration:none; display:flex; gap:11px; align-items:center; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:9px; color:#fff; background:var(--blue); font-weight:800; letter-spacing:-.06em; }
.brand strong,.brand small { display:block; line-height:1.1; }.brand small { font-size:11px; color:#9eb5c9; letter-spacing:.04em; margin-top:3px; text-transform:uppercase; }
.page-shell { max-width:1400px; margin:0 auto; padding:42px 32px 80px; }
.hero { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; margin-bottom:28px; }.eyebrow { color:var(--blue); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin:0 0 7px; }h1,h2,h3,p { margin-top:0; }h1 { letter-spacing:-.04em; font-size:clamp(30px,4vw,48px); margin-bottom:9px; }h2 { font-size:20px; letter-spacing:-.02em; margin-bottom:0; }h3 { font-size:17px; margin-bottom:2px; }.hero-copy { color:var(--muted); max-width:720px; margin-bottom:0; font-size:17px; }.protocol-note { min-width:200px; border-left:3px solid var(--blue); background:#eaf3ff; padding:12px 15px; }.protocol-note strong,.protocol-note span { display:block; }.protocol-note span { font-size:13px; color:#47617a; margin-top:2px; }
.workflow-card { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:12px; background:var(--surface); overflow:hidden; margin-bottom:30px; }.workflow-step { display:flex; align-items:center; gap:10px; padding:15px 18px; border-right:1px solid var(--line); font-weight:600; }.workflow-step:last-child { border-right:0; }.workflow-step b { width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#e8f1ff;color:var(--blue);font-size:12px; }
.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }.panel,.feed-card,.empty-state,.login-card { background:var(--surface); border:1px solid var(--line); border-radius:13px; box-shadow:0 2px 7px rgba(29,52,78,.035); }.panel { padding:25px; }.panel-heading,.section-heading { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:19px; }.help { margin:14px 0;color:var(--muted);font-size:13px; }.upload-form { display:flex; gap:10px; align-items:end; }.file-input { flex:1; }.file-input input { margin-top:5px; background:#f7fafc; }
label { display:block; font-weight:650; color:#32485b; font-size:13px; } input,select { display:block; width:100%; padding:10px 11px; border:1px solid #bdcad5; background:#fff; color:var(--ink); border-radius:7px; margin-top:5px; font:inherit; font-size:14px; } input:focus,select:focus { outline:3px solid #c9ddfb; border-color:var(--blue); }.camera-form { display:grid; gap:13px; }.profile-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }.button { border:0; border-radius:7px; background:var(--blue); color:white; font:inherit; font-size:14px; font-weight:750; cursor:pointer; padding:10px 15px; min-height:39px; }.button:hover { background:var(--blue-dark); }.button-secondary { background:#edf2f7; color:#24425e; }.button-secondary:hover { background:#d9e4ee; }.button-danger { background:#b72d38; }.button-danger:hover { background:#951f29; }.button-quiet { background:transparent;color:#d6e2ec;border:1px solid #436079; }.button-wide { width:100%;margin-top:10px; }.text-button { border:0; background:transparent;color:var(--red);font:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:3px 0; }
.clip-list { margin-top:18px; max-height:205px; overflow:auto; border-top:1px solid var(--line); }.clip-row { display:flex;gap:10px; align-items:center;padding:10px 2px;border-bottom:1px solid #eef2f6; }.clip-icon { color:var(--blue); font-size:12px; }.clip-row strong,.clip-row small { display:block; }.clip-row strong { font-size:13px; overflow-wrap:anywhere; }.clip-row small { color:var(--muted);font-size:11px; }.empty { color:var(--muted);font-size:14px;margin:19px 0; }.feeds-section { margin-top:42px; }.counter { font-size:13px;font-weight:700;color:var(--muted);background:#e8eef4;padding:4px 8px;border-radius:20px; }.feed-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:17px; }.feed-card { padding:20px; }.feed-topline { display:flex; justify-content:space-between;gap:12px;align-items:start; }.slug { color:var(--muted); font:12px ui-monospace,SFMono-Regular,Menlo,monospace; margin-bottom:0; }.status { display:inline-flex;gap:6px;align-items:center;border-radius:20px;padding:4px 8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em; }.status i { width:7px;height:7px;border-radius:50%;background:currentColor; }.status.running { color:var(--green);background:#e9f8f2; }.status.recovering { color:var(--amber);background:#fff5e3; }.status.stopped { color:#667586;background:#edf1f4; }.feed-meta { display:flex;gap:7px;flex-wrap:wrap;margin:15px 0 12px; }.feed-meta span { background:#f0f4f8;color:#3b5267;border-radius:5px;padding:3px 6px;font-size:12px;font-weight:650; }.source { color:var(--muted);font-size:13px;margin-bottom:12px;overflow-wrap:anywhere; }.source strong { color:#3b5267; }.url-block { display:flex;background:#101f30;color:#dff0ff;border-radius:7px;overflow:hidden;align-items:stretch; }.url-block code { flex:1;padding:10px;overflow:auto;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap; }.copy-button { color:#bcdbf5;background:#1c3c59;border:0;border-left:1px solid #3d5870;cursor:pointer;font-size:12px;font-weight:750;padding:0 11px; }.state-detail { min-height:20px;margin:11px 0 12px;color:var(--muted);font-size:12px; }.feed-actions { display:flex;gap:8px;align-items:center;flex-wrap:wrap; }.feed-actions form { margin:0; }.feed-actions details { margin-left:auto; }.feed-actions summary { color:#3a5873;font-size:13px;font-weight:750;cursor:pointer; }.edit-form { display:grid;gap:9px;margin-top:13px;border-top:1px solid var(--line);padding-top:13px;min-width:290px; }.delete-form { margin-top:12px!important; }.empty-state { text-align:center;padding:48px 25px;color:var(--muted); }.empty-state h3 { color:var(--ink); }.messages { margin-bottom:18px; }.message { padding:11px 13px;border-radius:7px;margin-bottom:9px;font-size:14px;font-weight:600; }.message.success { color:#126646;background:#e7f7ef;border:1px solid #bee8d2; }.message.error { color:#9f2731;background:#fff0f0;border:1px solid #f0c2c6; }.login-wrap { display:grid;place-items:center;min-height:calc(100vh - 195px); }.login-card { width:min(100%,450px);padding:38px; }.login-card h1 { font-size:30px; }.login-card p:not(.eyebrow) { color:var(--muted); }.login-card form { display:grid;gap:9px;margin-top:24px; }
@media (max-width:800px) { .site-header { padding:0 22px; }.page-shell { padding:30px 18px 55px; }.hero { align-items:flex-start;flex-direction:column; }.workflow-card,.dashboard-grid { grid-template-columns:1fr; }.workflow-step { border-right:0;border-bottom:1px solid var(--line); }.workflow-step:last-child { border-bottom:0; }.upload-form { display:grid;align-items:stretch; }.profile-grid { grid-template-columns:1fr 1fr; }.feed-actions details { margin-left:0; }.login-wrap { min-height:calc(100vh - 175px); }.login-card { padding:27px; } }