/* PixelVault Atelier: warm paper, ink navigation, coral actions. */
:root{color-scheme:light;--bg:#f5f3ed;--panel:#fffefa;--panel2:#eeece5;--line:#dfdfd6;--text:#202a2a;--muted:#64706b;--accent:#17644e;--blue:#5155a4;--amber:#8e5717;--red:#b6353b;--radius:22px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{background:var(--bg);background-image:radial-gradient(#878c7a20 .7px,transparent .7px);background-size:18px 18px}
::selection{background:#ffc9b6;color:#202a2a}
.sidebar{background:#172c29;border:0;width:236px;padding:35px 17px;color:#d3ded2}
.sidebar:after{content:"";position:absolute;bottom:105px;left:31px;width:130px;height:130px;border:1px solid #b7cdb718;border-radius:50%;pointer-events:none}
.sidebar .brand{color:#fffaf0;letter-spacing:-1px;font-weight:750;font-size:25px;gap:10px}
.sidebar .brand .muted{color:#a8c8b5}
.brand img{filter:sepia(.4) saturate(.65)}
.brand small{font-size:8px;letter-spacing:2.5px;font-weight:600;margin-top:8px}
.nav-label{color:#8fa99b;font-size:9px;letter-spacing:2px;margin-top:45px}
nav a{color:#b7c8bd;min-height:44px;border-radius:10px;padding:12px 14px;position:relative;font-weight:500}
nav a:hover{background:#ffffff0c;color:#fff9ee}
nav a.active{background:#e4ecd9;color:#193c2d;box-shadow:0 3px 12px #00000012}
nav a.active:after{content:"";width:5px;height:5px;border-radius:50%;background:#347453;margin-left:auto}
nav a .icon{width:18px;height:18px}
.sidebar-bottom{border-color:#ffffff16;color:#d3ded2;font-size:11px;position:relative;z-index:1}
.sidebar-bottom small,.version{color:#9ab3a4}
.server-dot{background:#b8d7a9;box-shadow:0 0 10px #b8d7a92b}
.workspace{margin-left:236px}
.topbar{height:80px;background:#fffef9d9;border-bottom:1px solid var(--line);padding:0 38px;backdrop-filter:blur(12px)}
.crumb{color:#78827a}.crumb b{color:#293d33;font-weight:600}.crumb span{color:#afb7ab}
.top-actions{color:#293d33;font-weight:600}
.connection{color:#38694d;background:#eaf0e3;border:1px solid #d3e1c9;padding:7px 11px;font-size:10px;font-weight:500}
.connection:before{content:"";display:inline-block;width:5px;height:5px;margin-right:6px;vertical-align:middle;border-radius:50%;background:#468a5a}
.avatar{width:33px;height:33px;background:#f2d8c8;color:#73432f;border:1px solid #e4c3af;font-weight:750;cursor:pointer}
.icon-button{color:#718074}.icon-button:hover{color:#243e2e;background:#e5e9df}
main{max-width:1560px;padding:34px 38px 45px}
.page-heading{margin-bottom:26px}.page-heading h1{font-size:31px;letter-spacing:-1.2px;font-weight:750;color:#22392d}.page-heading p{font-size:12px;color:#6b776e}
.button{border-radius:10px;background:#ebece3;border-color:#d7dbcf;color:#334b3b;min-height:42px;padding:11px 17px;font-weight:650;transition:background .15s,box-shadow .15s,transform .15s}
.button:hover{background:#dde5d7;box-shadow:0 3px 8px #233b2810}
.button.primary{background:#c54b34;border-color:#c54b34;color:#fffdf8;box-shadow:0 4px 10px #a6422420}
.button.primary:hover{background:#ae3d28;border-color:#ae3d28}
.button.subtle{background:transparent;color:#344e3d;border-color:#d6dbcd}.button.subtle:hover{background:#eff1e8}
.button.danger{color:#a42c34;background:#fdf0ed;border-color:#edc6c4}
.button.small{font-size:11px;min-height:32px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #337a62;outline-offset:3px}
.eyebrow{color:#496b50;letter-spacing:2px;font-weight:700}
.hero{background:#e6ebd9;border:1px solid #d5ddc4;border-radius:22px;min-height:280px;grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr);padding:34px 36px;position:relative;gap:12px;box-shadow:0 10px 24px #293d2810}
.hero:after{content:"";position:absolute;right:-90px;bottom:-210px;width:440px;height:440px;border:1px solid #627c4a25;border-radius:50%;pointer-events:none}
.hero-title{color:#213d2c;font-size:43px!important;font-weight:750!important;line-height:1.06;letter-spacing:-1.8px!important;position:relative;z-index:1}
.hero p{color:#596d52;max-width:440px;line-height:1.7}.hero .actions{position:relative;z-index:1}.hero .eyebrow{font-size:9px;margin-bottom:18px}
.hero-visual{isolation:isolate;min-width:0;gap:9px}
.hero-visual:before{content:"";position:absolute;width:225px;height:225px;border-radius:50%;background:#cad6b5;z-index:-1;box-shadow:0 0 0 19px #d4ddc480,0 0 0 39px #d7dfc540}
.device-node{width:75px;height:102px;border-radius:17px;background:#fbfaf0;border:1px solid #b6c5a7;box-shadow:0 12px 19px #45643d12;transform:rotate(-5deg);gap:12px}
.device-node .icon{color:#4a6950;width:27px;height:27px}.device-node small{color:#536b4c;font-size:8px;font-weight:700;letter-spacing:1px}
.device-node.highlight{width:87px;height:143px;background:#243f30;border:3px solid #526946;transform:translateY(-8px) rotate(5deg);box-shadow:9px 16px 0 #a8bb9266}
.device-node.highlight .icon{color:#e6edc7;width:36px;height:36px}.device-node.highlight small{color:#dbe7c6}.connector{width:13px;border-color:#6f8857}.connector:after{background:#6b8858;left:4px}
.metrics{gap:14px;margin-bottom:24px}.metric{background:#fffefa;border:1px solid #e0e1d7;border-radius:15px;padding:22px;position:relative;box-shadow:0 3px 9px #26362304}
.metric:before{content:"";position:absolute;top:21px;left:0;width:3px;height:24px;border-radius:0 3px 3px 0;background:#7c9974}
.metric:nth-child(2):before{background:#d68b58}.metric:nth-child(3):before{background:#8a86b9}.metric:nth-child(4):before{background:#739ca0}
.metric-top{color:#687368;font-size:11px}.metric-top .icon{color:#8c9d7d}.metric-value{color:#293e30;font-size:30px;font-weight:720;margin:18px 0 8px;letter-spacing:-1.2px}.metric-bottom{color:#77806f}
.good{color:#286b4c}.amber{color:#946227}
.panel{border:1px solid #dddfd3;border-radius:15px;background:#fffefa;box-shadow:0 3px 12px #243c2704}
.panel-header{padding:23px 24px 18px}.panel-header h2{font-weight:700;color:#2b4232}.panel-body{padding:0 24px 24px}
.link-button{color:#386747;font-weight:650}
.badge{background:#eceee6;color:#53634d;border-radius:6px;font-weight:600;padding:5px 8px}
.badge.green{background:#e5efdf;color:#326039}.badge.amber{background:#fbedd7;color:#91601e}.badge.red{background:#fae6e5;color:#ad3541}
.notice{background:#fff1d8;border:1px solid #ead7b0;color:#865f25;border-left:3px solid #c9964c;border-radius:10px;padding:14px 17px;font-size:11px}
.notice.info{color:#41604d;background:#eaf0e2;border-color:#ccd9be}
.file-table th{background:#f0f1e9;color:#7a8474;border-color:#dde2d2;font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.file-table td{border-color:#e6e8df;font-size:11px}.file-table tr:hover td{background:#f6f7f0}
.file-icon{background:#eeeaf5;color:#7d65a2;border-radius:9px}.file-icon.image{background:#e5edda;color:#55784a}.file-icon.video{background:#faebdd;color:#b07337}
.file-card{border-color:#d9dfcf;background:#fffefa;border-radius:15px}.file-preview{background:#eef0e6}
.empty .empty-icon{background:#e9eddc;border-color:#d5dfc6;color:#6d8257}.empty p{color:#75806e}
.field label{color:#40513f;font-weight:600}.field input,.field select,.search input,.toolbar select{background:#f8f8f1;border:1px solid #d3d8c9;color:#2b3b2b;border-radius:9px}
.field input::placeholder,.search input::placeholder{color:#8a9383}.field small{color:#78816e}
.field input:focus,.field select:focus,.search input:focus{border-color:#6e9460;box-shadow:0 0 0 3px #d9e5cd}
.check input,.png-option input{accent-color:#3e7151}.check span{color:#40513b}.check small{color:#78816e}
.pipeline-step{border-color:#e2e5d9}.pipeline-step p{color:#738068}.step-number{background:#eeeadd;color:#9b8656;border-radius:9px;font-weight:700}.step-number.ok{background:#e0e9d4;color:#50753d}
.storage-track{background:#e3e7d9}.storage-track span{background:#839b69}.storage-labels{color:#7b866d}
.phone-display{background:radial-gradient(ellipse at center,#d0dcbd,#ecf0e2 70%)}.phone-outline{background:#21382b;border-color:#6e8462;box-shadow:12px 18px 0 #b7c5a366,0 18px 35px #253d2520;color:#f6f4e7}.phone-outline small{color:#c8d6b7}.phone-outline:before,.phone-outline:after{background:#738566}
.spec-line{border-color:#e1e5d6}.spec-line span{color:#748168}.spec-line b{color:#354b32}
.png-stats{border-color:#dde3d1}.png-stats b{color:#385332}.png-flow{background:#eff2e6}.png-flow span{font-weight:600;color:#526b40}
.jobs-list .job{border-color:#e2e7d8}.job progress,progress{accent-color:#5f8552}
.code,.file-detail-hash{background:#eef1e6;color:#4e6240;border-color:#d8e0cd}
dialog{background:#fffef8;border-color:#d6ddca;border-radius:19px;box-shadow:0 30px 100px #162c3c30}dialog::backdrop{background:#122c2e99;backdrop-filter:blur(7px)}.modal-version{border-color:#e1e6d6}.modal-head h2{color:#304b33}
.toast{background:#ecf3e5;border:1px solid #9ab58b;color:#335a35;box-shadow:0 10px 35px #23432b15}.toast.error{background:#fff0ed;border-color:#e0aaa3;color:#9b3535}.upload-bar{background:#fffef8;border-color:#cbd9bd;box-shadow:0 15px 40px #243c2520}
.auth-page{position:relative;max-width:1220px;gap:80px}.auth-intro h1{font-size:59px;color:#213d2b;line-height:1.05;letter-spacing:-2.5px}.auth-intro h1 em{color:#b64a34}.auth-intro .brand{color:#2c4530;font-weight:750}.auth-intro .brand .muted{color:#7e956d}.auth-intro p{color:#6e7e63}.auth-features{color:#6f815f}.auth-features .icon{color:#7c9868}
.auth-card{background:#fffef9;border:1px solid #dbdfce;border-radius:22px;padding:37px;box-shadow:0 20px 60px #344b2710}.auth-card h2{color:#30482e}.auth-card .eyebrow{color:#a46c40}.auth-foot{color:#7b876e}
.app-footer{border-color:#dde1d2;color:#8b947e;font-size:9px;letter-spacing:.3px}
.people-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:13px;padding:0 24px 24px}
.person-card{border:1px solid #dfe4d5;border-radius:13px;padding:20px;background:#fbfcf5;display:flex;flex-direction:column;align-items:flex-start;gap:13px;min-width:0}
.person-card .person-avatar{height:48px;width:48px;border-radius:16px;display:grid;place-items:center;font-size:21px;font-weight:700;background:#deead2;color:#4b6d3c}
.person-card:nth-child(4n+2) .person-avatar{background:#f1dfce;color:#936437}.person-card:nth-child(4n+3) .person-avatar{background:#e8dfee;color:#7c5b8e}.person-card:nth-child(4n+4) .person-avatar{background:#d7e8e8;color:#497a7b}
.person-card h3{font-size:16px;color:#354b32;margin:0;overflow-wrap:anywhere}.person-card p{font-size:11px;margin:4px 0 0;color:#7b876d}.person-card .button{margin-top:auto}
.people-note{padding:0 24px 20px;color:#75846a;font-size:12px;line-height:1.6}
@media(min-width:1500px){.hero{padding:40px 43px}.hero-title{font-size:51px!important}}
@media(max-width:1150px){.sidebar{width:205px}.workspace{margin-left:205px}.topbar{padding:0 25px}main{padding:28px 25px}.hero{grid-template-columns:minmax(0,1fr) 250px;padding:27px}.hero-title{font-size:36px!important}.hero-visual{gap:5px}.device-node{width:64px}.device-node.highlight{width:75px}}
@media(max-width:850px){.workspace{margin-left:0}.sidebar{width:236px}.topbar{height:66px}.hero{grid-template-columns:minmax(0,1fr) 245px}.auth-page{max-width:580px;gap:28px}.auth-intro h1{font-size:43px}}
@media(max-width:590px){main{padding:25px 17px}.topbar{padding:0 14px}.hero{grid-template-columns:1fr;padding:27px;min-height:0}.hero-title{font-size:36px!important}.hero-visual{display:none}.metric{padding:18px}.metric-value{font-size:25px}.connection{font-size:9px;padding:6px 8px}.connection:before{display:none}.crumb{font-size:10px}.auth-page{padding:24px}.auth-intro h1{font-size:39px}.auth-card{padding:25px}.people-grid{grid-template-columns:1fr 1fr;padding:0 16px 16px;gap:10px}.person-card{padding:16px}.people-note{padding:0 16px 16px}.person-card .button{white-space:normal}.app-footer{padding:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Device captions need their own space, including on narrow phones. */
.hero-visual{display:grid;grid-template-columns:minmax(0,1fr) 12px minmax(0,1.15fr) 12px minmax(0,1fr);gap:8px;align-items:center;justify-items:center;width:100%;max-width:330px;min-height:190px;margin:auto;padding:12px 5px}
.device-node{width:100%;min-width:0;max-width:90px;height:114px;flex-shrink:0;padding:12px 5px;gap:12px}
.device-node.highlight{width:100%;min-width:0;max-width:96px;height:151px;padding:16px 5px}
.device-node small{display:block;width:100%;max-width:100%;padding:0 2px;font-size:10px;line-height:1.35;letter-spacing:.15px;text-align:center;white-space:normal;overflow-wrap:normal}
.hero-visual .connector{width:100%;min-width:0}
.hero-visual:before{width:210px;height:210px}
.metric:nth-child(3) .metric-value{font-size:24px;line-height:1.25;letter-spacing:-.65px}
.phone-layout>*{min-width:0}
.phone-outline{width:166px;padding:30px 12px}
.phone-outline strong,.phone-outline small,.phone-outline .badge{max-width:100%;text-align:center;white-space:normal;overflow-wrap:break-word}
.phone-outline .badge{justify-content:center;line-height:1.5}
.steps code,.spec-line span,.spec-line b{overflow-wrap:anywhere;min-width:0}
@media(max-width:1150px){.hero-visual{gap:6px}.device-node{max-width:78px}.device-node.highlight{max-width:88px}}
@media(max-width:700px){.hero{grid-template-columns:1fr;gap:12px}.hero-visual{max-width:310px;min-height:185px}.hero p{max-width:none}.hero-visual:before{width:180px;height:180px}.hero:after{width:300px;height:300px;bottom:-150px;right:-90px}}
@media(max-width:590px){.hero-visual{display:grid;max-width:280px;margin:6px auto 0;padding:10px 4px}.device-node{height:101px;max-width:78px;transform:rotate(-3deg)}.device-node.highlight{height:135px;max-width:86px;transform:translateY(-5px) rotate(3deg)}.device-node small{font-size:10px;letter-spacing:0}.device-node .icon{width:24px;height:24px}.device-node.highlight .icon{width:30px;height:30px}.hero .actions .button{white-space:normal;line-height:1.4}.metric:nth-child(3) .metric-value{font-size:22px}}