:root{--font-sans:Inter, "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;--color-bg:#dfe8f4;--color-bg-gradient-a:#5b90dd24;--color-bg-gradient-b:#bcd4f42e;--color-surface:#fffffff7;--color-surface-2:#fafcfffc;--color-surface-3:#f3f7fd;--color-border:#38598561;--color-border-soft:#38598538;--color-border-strong:#204a868a;--color-text:#0c1a2c;--color-text-muted:#233d62;--color-text-soft:#536b90;--color-accent:#2f6fd6;--color-accent-strong:#1f5ec5;--color-success:#1aa672;--color-danger:#d65570;--color-warning:#c79122;--radius-sm:10px;--radius-md:14px;--radius-lg:18px;--radius-full:999px;--shadow-surface:0 16px 40px #27426924;--shadow-accent:0 12px 24px #2e68c933;font-family:var(--font-sans);color:var(--color-text);background:var(--color-bg)}*{box-sizing:border-box}body{background:radial-gradient(900px 620px at 10% -10%, var(--color-bg-gradient-a), transparent 68%), radial-gradient(820px 480px at 88% 0%, var(--color-bg-gradient-b), transparent 70%), var(--color-bg);min-height:100vh;margin:0}#root{min-height:100vh}.login-shell{place-items:center;min-height:100vh;padding:2rem;display:grid}.login-card{background:#fffffffb;border:1px solid #2b4f8138;gap:1rem;width:min(460px,100%);display:grid;box-shadow:0 24px 60px #1f3a6129,0 4px 18px #1f3a6114}.login-card h1{color:var(--color-text);margin:0;font-size:1.9rem}.app-shell{grid-template-columns:260px 1fr;min-height:100vh;display:grid}.sidebar{border-right:1px solid var(--color-border-soft);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(#fcfefffa,#f5f9fefc);flex-direction:column;gap:1.25rem;padding:1.25rem;display:flex;box-shadow:inset -1px 0 #ffffff73}.brand{align-items:center;gap:.8rem;display:flex}.brand h2{margin:0;font-size:1.1rem}.brand p{color:var(--color-text-soft);margin:.2rem 0 0;font-size:.8rem}.brand-dot{border-radius:var(--radius-full);background:linear-gradient(135deg, #7bb6ff, var(--color-accent-strong));width:12px;height:12px;box-shadow:0 0 18px #5fa1ff8c}.sidebar-nav{gap:.4rem;display:grid}.nav-btn{border:1px solid var(--color-border-soft);color:var(--color-text-muted);border-radius:var(--radius-sm);text-align:left;cursor:pointer;background:#ffffffeb;padding:.7rem .8rem;transition:all .18s}.nav-btn-active,.nav-btn:hover{border-color:var(--color-border-strong);color:var(--color-text);background:#e1edfff5;box-shadow:0 4px 12px #4e7fc91f}.sidebar-status{border:1px solid var(--color-border-soft);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fffffff0;align-items:center;gap:.7rem;margin-top:auto;padding:.7rem;display:flex}.sidebar-status strong{text-transform:capitalize}.sidebar-status p{color:var(--color-text-soft);margin:.2rem 0 0;font-size:.75rem}.status-pill{border-radius:50%;width:.65rem;height:.65rem}.status-idle{background:var(--color-text-soft)}.status-running{background:var(--color-success)}.status-error{background:var(--color-danger)}.status-stopping{background:var(--color-warning)}.main{padding:1.3rem}.workspace-grid{grid-template-columns:320px 1fr;gap:1rem;display:grid}.panel{border:1px solid var(--color-border-soft);background:linear-gradient(160deg, var(--color-surface), var(--color-surface-2));border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:var(--shadow-surface);margin-bottom:1rem;padding:1rem}.hero{border-color:var(--color-border);justify-content:space-between;align-items:center;gap:1rem;display:flex}.hero-copy h1{margin:.2rem 0 .5rem;font-size:1.6rem}.hero-copy p{color:var(--color-text-muted);margin:0}.hero-support{color:var(--color-text-soft)!important;margin-top:.5rem!important}.kicker{letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-soft);font-size:.7rem}.hero-actions{gap:.6rem;display:flex}.btn{border:1px solid var(--color-border-soft);border-radius:var(--radius-sm);cursor:pointer;color:var(--color-text);background:#fffffffa;padding:.65rem .9rem;font-weight:600;transition:all .18s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{color:#f7fbff;box-shadow:var(--shadow-accent);background:linear-gradient(135deg,#467edbf5,#2e68c9f0);border-color:#3567bb6b}.btn-danger{color:#b6465d;background:#fceceff5;border-color:#d6557047}.btn:hover:not(:disabled){border-color:var(--color-border);transform:translateY(-1px)}.stats-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:.8rem;display:grid}.client-list{gap:.7rem;display:grid}.client-item{text-align:left;border:1px solid var(--color-border-soft);border-radius:var(--radius-md);cursor:pointer;width:100%;color:var(--color-text);background:#ffffffbf;gap:.25rem;padding:.8rem;display:grid}.client-item span{color:var(--color-text-soft);font-size:.85rem}.client-item.active{border-color:var(--color-border-strong);background:#e3eeffe6}.stat-card p{color:var(--color-text-soft);margin:0;font-size:.75rem}.stat-card strong{margin-top:.4rem;display:block}.panel-head{justify-content:space-between;align-items:center;margin-bottom:.8rem;display:flex}.panel-head h3{margin:0}.panel-subtitle{color:var(--color-text-soft);margin:.25rem 0 0;font-size:.82rem}.inline-actions{flex-wrap:wrap;gap:.6rem;display:flex}.validation-box{border-radius:var(--radius-md);background:#fff4f6eb;border:1px solid #d6557038;margin-bottom:1rem;padding:.85rem 1rem}.validation-box p{color:#a63d55;margin:0;font-size:.88rem}.validation-box p+p{margin-top:.35rem}.form-grid{grid-template-columns:1fr 1fr;gap:.8rem;display:grid}label span{color:var(--color-text-muted);margin-bottom:.35rem;font-size:.75rem;font-weight:700;display:block}input{border-radius:var(--radius-sm);border:1px solid var(--color-border-soft);background:var(--color-surface-3);width:100%;color:var(--color-text);padding:.6rem .65rem;font-family:inherit;font-size:.95rem;transition:border-color .18s,box-shadow .18s}input:focus{border-color:var(--color-border-strong);outline:none;box-shadow:0 0 0 3px #67a4ff2e}input::placeholder{color:#7e90ad}.notice{color:var(--color-text-muted);margin:0 0 .8rem;font-weight:600}.logs-panel .log-list{gap:.45rem;max-height:62vh;display:grid;overflow:auto}.progress-preview{gap:1rem;display:grid}.preview-state{border-radius:var(--radius-full);text-transform:capitalize;border:1px solid var(--color-border-soft);background:#ffffffd1;align-items:center;gap:.35rem;padding:.35rem .7rem;font-size:.75rem;font-weight:700;display:inline-flex}.preview-running{color:#0f7d5c;background:#e3fcf4f2}.preview-error{color:#b6465d;background:#fff1f4f5}.preview-grid{grid-template-columns:2fr 1fr 1fr;gap:.8rem;display:grid}.preview-card,.preview-image-card,.preview-timeline-card{border:1px solid var(--color-border-soft);border-radius:var(--radius-md);background:#ffffffc7;padding:.9rem}.preview-card-wide{min-height:120px}.preview-label{color:var(--color-text-soft);text-transform:uppercase;letter-spacing:.05em;margin:0 0 .35rem;font-size:.75rem}.preview-card strong,.preview-image-head strong{color:var(--color-text)}.preview-meta{flex-wrap:wrap;gap:.35rem;margin-top:.7rem;display:flex}.preview-compact{word-break:break-word;line-height:1.45;display:block}.preview-card small{color:var(--color-text-soft);margin-top:.45rem;display:block}.preview-content{grid-template-columns:1.3fr 1fr;gap:.8rem;display:grid}.preview-image-head{justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.75rem;display:flex}.preview-image-head span{color:var(--color-text-soft);font-size:.78rem}.preview-shot-link{display:block}.preview-shot{object-fit:cover;border-radius:var(--radius-md);background:#edf4ffe6;border:1px solid #5f83b62e;width:100%;min-height:260px;max-height:460px}.preview-shot.placeholder{text-align:center;place-items:center;padding:1.2rem;display:grid}.preview-shot.placeholder p{color:var(--color-text-soft)}.preview-timeline{gap:.8rem;max-height:460px;display:grid;overflow:auto}.timeline-item{grid-template-columns:16px 1fr;align-items:start;gap:.65rem;display:grid}.timeline-item p,.timeline-item small{margin:.18rem 0 0}.timeline-item p{color:var(--color-text-muted)}.timeline-item small{color:var(--color-text-soft)}.timeline-dot{background:var(--color-accent);border-radius:50%;width:10px;height:10px;margin-top:.45rem;box-shadow:0 0 0 5px #407edc1f}.timeline-error{background:var(--color-danger);box-shadow:0 0 0 5px #d655701f}.timeline-warn{background:var(--color-warning);box-shadow:0 0 0 5px #c791221f}.stage-summary{flex-wrap:wrap;gap:.5rem;margin-bottom:.8rem;display:flex}.stage-chip{border:1px solid var(--color-border-soft);border-radius:var(--radius-full);background:#ffffffe0;align-items:center;gap:.45rem;padding:.35rem .65rem;font-size:.75rem;display:flex}.stage-chip span{color:var(--color-text-muted)}.log-item{border-radius:var(--radius-sm);background:#ffffffd1;border:1px solid #5f83b62e;grid-template-columns:80px 70px 1fr;align-items:start;gap:.6rem;padding:.55rem;display:grid}.log-item p{color:var(--color-text);margin:0}.log-main{gap:.35rem;display:grid}.log-main small{color:var(--color-text-soft)}.log-meta{flex-wrap:wrap;gap:.35rem;display:flex}.meta-badge{border-radius:var(--radius-full);color:#17448d;background:#dbeaffe6;border:1px solid #6e9bdb38;align-items:center;padding:.15rem .5rem;font-size:.7rem;display:inline-flex}.meta-subtle{color:#4b6691;background:#f1f6fff2}.log-error{background:#fff2f5eb;border:1px solid #d6557040}@media (width<=960px){.app-shell,.workspace-grid,.stats-grid,.form-grid,.preview-grid,.preview-content{grid-template-columns:1fr}}