:root { color-scheme: light; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #fafaf9; color: #1c1917; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #f8f5ef 0, #fafaf9 280px); }
button, input, select { font: inherit; }
button { cursor: pointer; border: 1px solid transparent; border-radius: 8px; min-height: 36px; padding: .56rem .9rem; background: #292524; color: #fafaf9; font-size: .875rem; font-weight: 600; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; }
button:hover { background: #44403c; } button.secondary { background: #f5f5f4; border-color: #e7e5e4; color: #44403c; } button.secondary:hover { background: #f1e9d6; color: #292524; } button.danger { background: #fef2f2; border-color: #fecaca; color: #b91c1c; } button.danger:hover { background: #fee2e2; }
button:disabled { cursor: not-allowed; opacity: .55; } .theme-toggle {position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;min-width:36px;height:36px;padding:0;background:transparent;border-color:#e7e5e4;color:#57534e;overflow:hidden}.theme-toggle svg{position:absolute;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform 200ms ease,opacity 200ms ease}.theme-toggle .theme-sun{transform:rotate(-90deg) scale(0);opacity:0}.theme-toggle .theme-moon{transform:rotate(0) scale(1);opacity:1}.theme-toggle[data-theme="dark"] .theme-sun{transform:rotate(0) scale(1);opacity:1}.theme-toggle[data-theme="dark"] .theme-moon{transform:rotate(90deg) scale(0);opacity:0}.theme-toggle:hover { background:#f1e9d6; color:#292524; }
input, select { width: 100%; min-height: 38px; border: 1px solid #e7e5e4; border-radius: 6px; background: #fff; color: #1c1917; padding: .55rem .65rem; outline: none; } input:focus,select:focus { border-color:#a8a29e; box-shadow:0 0 0 3px rgba(120,113,108,.14) }
label { display: grid; gap: .38rem; color: #57534e; font-size: .82rem; font-weight: 500; }
header { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:56px; padding:0 max(1.2rem, calc((100vw - 1100px)/2)); border-bottom:1px solid #e7e5e4; background:rgba(250,250,249,.92); backdrop-filter:blur(10px); }
.brand { display:flex; align-items:baseline; gap:.42rem; color:#292524; }.wordmark { font-size:15px; font-weight:600; letter-spacing:-.02em; }.product { font-size:11px; font-weight:500; color:#78716c; }.workspace-label { margin-left:.7rem; padding-left:.7rem; border-left:1px solid #e7e5e4; color:#a8a29e; font-size:11px; }
main { max-width:1100px; margin:auto; padding:2rem 1.2rem 3.5rem; }
.hero { display:flex; justify-content:space-between; gap:1.5rem; align-items:end; margin: .2rem 0 1.75rem; }.hero h2{margin:0;font-size:1.625rem;line-height:1.2;letter-spacing:-.025em;font-weight:600}.hero p{margin:.4rem 0 0;color:#78716c;font-size:.875rem}.muted {color:#78716c}.status {font-size:.76rem;padding:.32rem .6rem;border-radius:999px;background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; border:1px solid #e7e5e4; background:#e7e5e4; }.card { border:0; border-radius:0; background:#fff; padding:1.1rem; box-shadow:none; }.card h3 { margin:0 0 1rem; font-size:.9rem; font-weight:600; }.metric {font-size:1.65rem;line-height:1.1;font-weight:600;letter-spacing:-.025em}.metric-label{margin-top:.35rem;color:#78716c;font-size:.68rem;font-weight:600;letter-spacing:.12em}
.workspace { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:1.25rem; border:1px solid #e7e5e4; background:#e7e5e4; }.wide { grid-column:1/-1 }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }.form-grid .full{grid-column:1/-1}.actions{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;margin-top:.9rem}.list{display:grid;gap:.75rem}.item{display:flex;justify-content:space-between;align-items:center;gap:.8rem;border-top:1px solid #e7e5e4;padding-top:.8rem}.item:first-child{border-top:0;padding-top:0}.item-title{font-size:.875rem;font-weight:600}.item-meta{font-size:.76rem;color:#78716c;margin-top:.25rem}.screen-url{font-family:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.69rem;color:#57534e;overflow-wrap:anywhere;margin-top:.28rem}.checkboxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;padding:.65rem;border:1px solid #e7e5e4;border-radius:6px;max-height:130px;overflow:auto;background:#fafaf9}.checkboxes label{display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:400}.checkboxes input{width:auto;min-height:auto}.notice{padding:.7rem .85rem;border-radius:6px;background:#f5f5f4;border:1px solid #e7e5e4;color:#57534e;font-size:.82rem}.error{background:#fef2f2;border-color:#fecaca;color:#b91c1c}.hidden{display:none!important}
.item-copy{min-width:0;flex:1}.item-actions{margin-top:0;flex-shrink:0}.item-title-row{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}.connection-status{display:inline-flex;align-items:center;min-height:20px;padding:0 .45rem;border:1px solid;border-radius:999px;font-size:.67rem;font-weight:600}.connection-status.online{color:#047857;background:#ecfdf5;border-color:#a7f3d0}.connection-status.offline{color:#b45309;background:#fffbeb;border-color:#fde68a}.connection-status.pending{color:#78716c;background:#f5f5f4;border-color:#e7e5e4}.upload-progress{padding:.7rem .75rem;border:1px solid #e7e5e4;background:#fafaf9;border-radius:6px}.progress-copy{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.76rem;color:#57534e}.progress-track{height:6px;margin-top:.55rem;background:#e7e5e4;overflow:hidden;border-radius:999px}.progress-track span{display:block;width:0;height:100%;background:#292524;border-radius:inherit;transition:width 180ms ease}.status[data-state="loading"]{background:#fffbeb;border-color:#fde68a;color:#b45309}.header-actions{margin-top:0}.modal-heading{margin:0 0 1rem;justify-content:space-between}.screen-modal-body{width:min(680px,100%)}.connection-steps{margin:0 0 1rem;padding:.8rem 1rem;border-left:2px solid #d6d3d1;background:#fafaf9;color:#57534e;font-size:.8rem;line-height:1.55}.connection-steps p{margin:.25rem 0}.screen-manage-form{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid #e7e5e4}.login-theme-toggle{position:fixed;right:1rem;top:1rem}
.login { width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow-x:hidden;padding:1rem;background:linear-gradient(150deg,#f5efe3,#fafaf9 50%,#f8f5ef) }.login .card{width:calc(100vw - 2rem);max-width:420px;min-width:0;border:1px solid #e7e5e4;border-radius:16px;box-shadow:0 12px 36px rgba(41,37,36,.08)}.login h1{margin:1.7rem 0 .45rem;font-size:clamp(1.42rem,7vw,1.7rem);letter-spacing:-.025em;line-height:1.2;overflow-wrap:anywhere}.login p{color:#78716c;font-size:.875rem;line-height:1.55}.login form{display:grid;gap:.85rem;margin-top:1.7rem}.tiny{font-size:.75rem;color:#78716c}
.modal{position:fixed;inset:0;background:rgba(28,25,23,.46);display:grid;place-items:center;padding:1rem;z-index:10}.modal-body{background:#fff;border:1px solid #e7e5e4;border-radius:12px;padding:1rem;width:min(800px,100%);box-shadow:0 20px 50px rgba(28,25,23,.25)}.modal video{width:100%;max-height:70vh;background:#0c0a09}.preview-status{min-height:1.25rem;margin:-.35rem 0 .7rem;color:#78716c;font-size:.78rem}.preview-status[data-state="loading"]{color:#b45309}.preview-status[data-state="ready"]{color:#047857}.preview-status[data-state="error"]{color:#b91c1c}.confirm-modal-body{width:min(440px,100%);padding:1.35rem}.confirm-modal-body h3{margin:.3rem 0 .5rem;font-size:1.15rem;letter-spacing:-.02em}.confirm-modal-body .muted{margin:0;line-height:1.55;font-size:.86rem}.confirm-actions{justify-content:flex-end;margin-top:1.35rem}.eyebrow{margin:0;color:#a16207;font-size:.67rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
[data-theme="dark"]{color-scheme:dark;background:#0c0a09;color:#fafaf9}[data-theme="dark"] body{background:linear-gradient(180deg,#1f1a15 0,#0c0a09 280px)}[data-theme="dark"] header{background:rgba(12,10,9,.92);border-color:rgba(255,255,255,.08)}[data-theme="dark"] .brand,[data-theme="dark"] .wordmark{color:#fafaf9}[data-theme="dark"] .product,[data-theme="dark"] .workspace-label,[data-theme="dark"] .hero p,[data-theme="dark"] .item-meta,[data-theme="dark"] .tiny,[data-theme="dark"] .login p{color:#a8a29e}[data-theme="dark"] .workspace-label{border-color:rgba(255,255,255,.08)}[data-theme="dark"] .grid,[data-theme="dark"] .workspace{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.08)}[data-theme="dark"] .card,[data-theme="dark"] .modal-body{background:#1c1917;color:#fafaf9}[data-theme="dark"] input,[data-theme="dark"] select{background:#292524;color:#fafaf9;border-color:rgba(255,255,255,.12)}[data-theme="dark"] label{color:#d6d3d1}[data-theme="dark"] button.secondary,[data-theme="dark"] .theme-toggle{background:#292524;border-color:rgba(255,255,255,.12);color:#e7e5e4}[data-theme="dark"] button.secondary:hover,[data-theme="dark"] .theme-toggle:hover{background:#44403c;color:#fafaf9}[data-theme="dark"] button.danger{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.3);color:#fca5a5}[data-theme="dark"] .item,[data-theme="dark"] .screen-manage-form{border-color:rgba(255,255,255,.08)}[data-theme="dark"] .checkboxes,[data-theme="dark"] .upload-progress,[data-theme="dark"] .connection-steps,[data-theme="dark"] .notice{background:#292524;border-color:rgba(255,255,255,.1);color:#d6d3d1}[data-theme="dark"] .progress-track{background:#57534e}[data-theme="dark"] .progress-track span{background:#fafaf9}[data-theme="dark"] .connection-status.pending{background:#292524;border-color:rgba(255,255,255,.12);color:#d6d3d1}[data-theme="dark"] .connection-status.online{background:#022c22;border-color:#065f46;color:#6ee7b7}[data-theme="dark"] .connection-status.offline{background:#422006;border-color:#92400e;color:#fcd34d}[data-theme="dark"] .error{background:#3f1518;border-color:#7f1d1d;color:#fca5a5}[data-theme="dark"] .modal{background:rgba(0,0,0,.68)}[data-theme="dark"] .preview-status{color:#a8a29e}[data-theme="dark"] .preview-status[data-state="loading"]{color:#fcd34d}[data-theme="dark"] .preview-status[data-state="ready"]{color:#6ee7b7}[data-theme="dark"] .preview-status[data-state="error"]{color:#fca5a5}[data-theme="dark"] .eyebrow{color:#fcd34d}[data-theme="dark"] .login{background:linear-gradient(150deg,#2a2520,#0c0a09 55%,#1f1a15)}
@media(max-width:800px){header{padding:0 .9rem}.workspace-label{display:none}.grid,.workspace{grid-template-columns:1fr}.wide{grid-column:auto}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.hero{align-items:start;flex-direction:column}.hero>button{width:100%}.header-actions{gap:.35rem}.header-actions .status{display:none}.item{align-items:flex-start;flex-direction:column}.item-actions{width:100%}.item-actions button{width:100%}.screen-modal-body{max-height:calc(100dvh - 2rem);overflow:auto}}