:root { --bg:#0b1117; --panel:#111a22; --panel2:#16232d; --line:#263743; --text:#edf5f4; --muted:#8da3a8; --mint:#7ee0bc; --orange:#ffb475; --danger:#ff8c8c; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 85% -10%,#21473f 0,transparent 35%),var(--bg); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.shell { max-width:1500px; margin:0 auto; padding:44px 34px 56px; }
.topbar { display:flex; justify-content:space-between; gap:32px; align-items:flex-end; padding-bottom:38px; }
.eyebrow,.section-kicker { color:var(--mint); font-size:11px; letter-spacing:.18em; font-weight:800; }
h1,h2,p { margin:0; } h1 { max-width:720px; margin-top:12px; font-size:clamp(32px,4.5vw,67px); line-height:.98; letter-spacing:-.055em; font-weight:750; } h2 { margin-top:7px; font-size:18px; letter-spacing:-.02em; }
.lede { max-width:580px; margin-top:18px; color:var(--muted); font-size:15px; line-height:1.55; }
.status { display:flex; gap:10px; align-items:center; color:var(--muted); font-size:12px; white-space:nowrap; padding:11px 14px; border:1px solid var(--line); border-radius:999px; background:#101a20aa; } .dot { width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 14px var(--mint); }
.workspace { display:grid; grid-template-columns:1fr 1.35fr 1.2fr; gap:14px; align-items:start; }
.panel { min-height:550px; overflow:hidden; background:linear-gradient(145deg,#15232b,#10181f); border:1px solid var(--line); border-radius:20px; box-shadow:0 16px 55px #0002; } .panel-heading { min-height:91px; display:flex; justify-content:space-between; align-items:center; padding:22px 22px 17px; border-bottom:1px solid var(--line); }
.count { color:var(--mint); font-size:12px; font-weight:800; border:1px solid #35675a; background:#17382f; border-radius:999px; padding:5px 9px; }
.source-form { padding:20px 22px 17px; border-bottom:1px solid var(--line); } label { display:block; color:var(--muted); font-size:12px; margin-bottom:8px; } .input-row { display:flex; gap:7px; } input { min-width:0; width:100%; color:var(--text); background:#0d151b; border:1px solid #344956; border-radius:9px; padding:11px 12px; outline:none; } input:focus { border-color:var(--mint); box-shadow:0 0 0 3px #7ee0bc22; } .hint { color:#71878d; font-size:11px; margin-top:9px; line-height:1.4; }
button { border:0; cursor:pointer; font:inherit; } .primary { color:#0b1916; background:var(--mint); border-radius:9px; font-size:12px; font-weight:800; padding:0 13px; } .primary:hover { background:#a4f0d1; } .ghost { color:var(--mint); background:transparent; border:1px solid #35675a; border-radius:8px; font-size:11px; padding:7px 9px; } .ghost:hover { background:#17382f; }
.source-list,.models-list,.controls-list { padding:15px; } .empty-state { min-height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--muted); font-size:13px; gap:10px; padding:32px; } .empty-icon { color:#42616a; font-size:28px; } .source-card,.model-card,.control-card { border:1px solid var(--line); background:#101a21; border-radius:12px; margin-bottom:9px; } .source-card { padding:13px; } .source-card.active { border-color:#4c8f7a; background:#122921; } .source-meta { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; } .source-name { font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .source-url { margin-top:5px; color:var(--muted); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .source-actions { display:flex; gap:7px; margin-top:12px; } .source-actions button { flex:1; background:#1b2c35; color:var(--muted); padding:7px; border-radius:7px; font-size:11px; } .source-actions button:hover { color:var(--text); background:#29404a; }
.model-card { overflow:hidden; } .model-head { display:flex; align-items:center; gap:9px; padding:12px; } .model-head input,.field-row input[type=checkbox] { width:auto; } .model-name { font-size:13px; font-weight:700; } .model-id { color:#6f898f; font:10px ui-monospace,monospace; margin-left:auto; } .fields { border-top:1px solid var(--line); padding:8px 12px 11px 35px; } .field { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:12px; padding:6px 0; } .field small { color:#5f777d; margin-left:auto; }
.command-group { margin-bottom:18px; } .command-group h3 { color:var(--mint); font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin:4px 4px 8px; } .command-group .model-card { display:flex; align-items:center; gap:9px; padding:12px; cursor:pointer; } .command-group .model-card input { width:auto; } .command-group .model-card:hover { border-color:#4c8f7a; background:#122921; }
.control-card { padding:14px; } .control-title { display:flex; justify-content:space-between; gap:10px; align-items:center; font-size:13px; font-weight:700; } .control-source { color:var(--mint); font-size:10px; font-weight:600; } .control-command { color:#6f898f; font:10px ui-monospace,monospace; margin-top:5px; } .control-fields { display:flex; gap:7px; margin-top:12px; } .control-fields button,.action-button { padding:8px 12px; border-radius:7px; background:var(--orange); color:#21160d; font-size:11px; font-weight:800; } .control-fields input { padding:8px 9px; font-size:12px; } .action-button { width:100%; margin-top:12px; }
.toast { position:fixed; right:24px; bottom:24px; max-width:380px; color:var(--text); background:#1e313a; border:1px solid #46616a; border-radius:10px; padding:12px 15px; font-size:12px; opacity:0; transform:translateY(12px); pointer-events:none; transition:.2s; } .toast.show { opacity:1; transform:none; } .toast.error { border-color:#8c4d4d; color:#ffd0d0; }
.cabin-form { padding:18px 22px; border-bottom:1px solid var(--line); } .cabin-form input { margin-bottom:9px; } .cabin-form .primary { width:100%; padding:10px; } .cabin-form .primary:disabled { opacity:.4; cursor:not-allowed; } .cabins-heading { padding:18px 22px 7px; } .cabins-list { padding:8px 15px 15px; } .cabin-row { border:1px solid var(--line); border-radius:12px; padding:11px; margin-bottom:8px; background:#101a21; } .cabin-row b { display:block; font-size:13px; } .cabin-row small { display:block; color:var(--muted); font-size:10px; margin-top:4px; } .cabin-url { display:flex; gap:5px; margin-top:9px; } .cabin-url input { padding:7px; font-size:10px; } .cabin-url button { width:34px; color:var(--mint); background:#1b2c35; border-radius:7px; } .muted { color:var(--muted); font-size:12px; }
.cabin-page { background:radial-gradient(circle at 50% -20%,#21473f 0,transparent 40%),var(--bg); } .cabin-shell { width:min(100%,560px); margin:0 auto; padding:18px 14px calc(28px + env(safe-area-inset-bottom)); } .cabin-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 2px 18px; } .cabin-top h1 { font-size:25px; letter-spacing:-.04em; margin-top:7px; } .compact-status { padding:8px 10px; font-size:10px; } .mobile-source { border-top:1px solid var(--line); padding-top:13px; } .mobile-source-title { color:#6f898f; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:13px; } .mobile-group { margin-bottom:17px; } .mobile-group h2 { color:var(--mint); font-size:11px; text-transform:uppercase; letter-spacing:.14em; margin:0 2px 7px; } .mobile-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; } .mobile-action { min-height:54px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:linear-gradient(145deg,#172832,#101a21); font-size:24px; box-shadow:0 3px 0 #071016; -webkit-tap-highlight-color:transparent; } .mobile-action:active { transform:translateY(2px); box-shadow:none; background:#24483e; } .mobile-action.step-action { color:var(--orange); font-size:29px; } .mobile-value { grid-column:span 2; margin:0; } .mobile-value label { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; margin:0 0 4px 2px; } .mobile-value div { display:flex; gap:5px; } .mobile-value input { min-height:43px; padding:8px; font-size:14px; } .mobile-value button { width:43px; border-radius:9px; color:#1b130b; background:var(--orange); font-size:20px; font-weight:800; } .invalid-card { width:min(100% - 28px,480px); margin:18vh auto; padding:25px; background:#111a22; border:1px solid var(--line); border-radius:18px; } .invalid-card h1 { font-size:30px; margin:10px 0; } .invalid-card p { color:var(--muted); font-size:14px; }
@media(max-width:1100px) { .workspace { grid-template-columns:1fr 1fr; } .controls-panel { grid-column:1/-1; min-height:350px; } } @media(max-width:700px) { .shell { padding:25px 15px 35px; } .topbar { display:block; } .status { display:inline-flex; margin-top:22px; } .workspace { display:block; } .panel { min-height:300px; margin-bottom:14px; } h1 { font-size:39px; } .input-row { display:block; } .primary { width:100%; padding:11px; margin-top:7px; } }