:root{--bg:#0b0e12;--panel:#14191f;--panel2:#191f27;--line:#27303a;--line2:#323d49;--text:#f2f5f7;--muted:#8e9ba9;--accent:#ed3d3d;--accent2:#ff5757;--green:#32d583;--amber:#fdb022;--blue:#3fa9f5;--radius:16px;--shadow:0 16px 50px rgba(0,0,0,.32)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select{font:inherit}.hidden{display:none!important}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 70% -20%,rgba(237,61,61,.08),transparent 34%)}
.app-shell{min-height:100vh;display:grid;grid-template-columns:236px 1fr;grid-template-rows:74px 1fr}.topbar{grid-column:1/-1;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--line);background:rgba(11,14,18,.94);backdrop-filter:blur(16px)}.brand-wrap{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;border:1px solid rgba(237,61,61,.5);border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#2a1518,#12161b);box-shadow:inset 0 0 18px rgba(237,61,61,.08)}.brand-mark svg{width:25px;fill:none;stroke:#ff6161;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}.brand-mark.large{width:62px;height:62px;margin:0 auto 18px}.brand-mark.large svg{width:36px}.brand-title{font-weight:780;letter-spacing:.2px}.brand-subtitle{font-size:11px;color:var(--muted);margin-top:2px}.top-actions{display:flex;align-items:center;gap:8px}.icon-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}.icon-btn:hover{color:#fff;border-color:var(--line2)}.icon-btn svg{width:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sidebar{grid-row:2;position:sticky;top:74px;height:calc(100vh - 74px);padding:18px 12px;border-right:1px solid var(--line);background:#0e1217;display:flex;flex-direction:column;gap:4px}.nav-btn{border:0;background:transparent;color:#aab4bf;text-align:left;padding:11px 13px;border-radius:10px;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:11px}.nav-btn span{width:20px;text-align:center;color:#73808e}.nav-btn:hover:not(:disabled){background:#151b22;color:#fff}.nav-btn.active{background:#1a2028;color:#fff;box-shadow:inset 3px 0 0 var(--accent)}.nav-btn.active span{color:var(--accent2)}.nav-btn:disabled{opacity:.35;cursor:not-allowed}.side-section-label{font-size:10px;letter-spacing:1.4px;color:#56616d;padding:22px 13px 7px}.sidebar-spacer{flex:1}.engine-card{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;align-items:flex-start;gap:10px;background:#11161c}.engine-card b{display:block;font-size:12px}.engine-card small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(50,213,131,.5);margin-top:4px}
.main{min-width:0;padding:30px 34px 60px;max-width:1680px;width:100%;margin:0 auto}.view{display:none}.view.active{display:block}.view-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}.view-head h1{font-size:28px;margin:0 0 6px;letter-spacing:-.5px}.view-head p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}.eyebrow{font-size:10px;letter-spacing:1.4px;color:var(--accent2);font-weight:800;margin-bottom:7px}.head-actions{display:flex;gap:8px}.btn{border:1px solid transparent;border-radius:10px;padding:10px 14px;font-weight:700;font-size:13px;color:#fff;background:#1c232c;cursor:pointer;transition:.16s ease}.btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background:linear-gradient(180deg,#f04a4a,#d72f35);border-color:#f55b5b}.btn.accent{background:linear-gradient(180deg,#2d77a8,#205b83);border-color:#3f8cc0}.btn.ghost{background:#151b22;border-color:var(--line2);color:#dce3e8}.btn.danger-ghost{background:transparent;border-color:#5a2b30;color:#ff8585}.btn.wide{width:100%;padding:12px 16px}.panel{background:linear-gradient(180deg,#151a20,#12171d);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 1px 0 rgba(255,255,255,.02) inset}.panel-title{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:18px}.panel-title h3{margin:0 0 5px;font-size:16px}.panel-title p{margin:0;font-size:12px;color:var(--muted);line-height:1.45}.badge{font-size:10px;font-weight:800;border-radius:999px;padding:5px 8px;white-space:nowrap}.badge.neutral{background:#202731;color:#9ba7b3}.badge.good{background:rgba(50,213,131,.11);color:#55e39a;border:1px solid rgba(50,213,131,.2)}
.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}.project-card{border:1px solid var(--line);border-radius:14px;background:#12171d;padding:17px;cursor:pointer;transition:.18s ease}.project-card:hover{border-color:#3a4653;transform:translateY(-2px);box-shadow:var(--shadow)}.project-card-top{display:flex;gap:13px;align-items:center}.file-tile{width:46px;height:52px;border-radius:9px;border:1px solid #563039;background:#261519;color:#ff6969;display:grid;place-items:center;font-weight:900;font-size:11px}.project-card h3{font-size:14px;margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-card p{font-size:11px;color:var(--muted);margin:0}.project-card-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:12px;margin-top:14px}.project-state{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:#9ca8b5}.mini-progress{width:90px;height:4px;background:#242c35;border-radius:99px;overflow:hidden}.mini-progress i{height:100%;display:block;background:var(--accent);border-radius:99px}.empty-state{min-height:350px;display:grid;place-items:center;align-content:center;text-align:center;border:1px dashed #313a45;border-radius:16px;padding:30px}.empty-state h2{font-size:18px;margin:10px 0 5px}.empty-state p{color:var(--muted);font-size:13px;max-width:460px}.empty-icon{width:64px;height:76px;border:1px solid #563039;background:#21161a;border-radius:12px;display:grid;place-items:center;color:#ff6464;font-weight:900}
.upload-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.8fr);gap:18px}.upload-panel{padding:24px}.drop-zone{height:330px;border:1.5px dashed #3a4652;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,#11161c,#101419);cursor:pointer;transition:.15s}.drop-zone.dragover,.drop-zone:hover{border-color:var(--accent);background:#171519}.drop-icon{width:58px;height:58px;border-radius:50%;background:#20171a;display:grid;place-items:center;color:#ff6262;margin-bottom:12px}.drop-icon svg{width:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.drop-zone h2{font-size:18px;margin:4px 0}.drop-zone p{color:var(--muted);margin:2px 0 12px;font-size:13px}.file-note{color:#657280;font-size:10px}.selected-file{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#101419;font-size:12px;color:#cad2d9}.field-row{margin:16px 0}.field{display:flex;flex-direction:column;gap:7px}.field span{font-size:11px;color:#9da8b3;font-weight:700}.field input,.field select,.compact-select{background:#0f1419;color:#e8edf0;border:1px solid var(--line2);border-radius:9px;padding:10px 11px;outline:none}.field input:focus,.field select:focus{border-color:#6c7783}.what-happens h3{margin:0 0 18px}.process-list{list-style:none;padding:0;margin:0;display:grid;gap:18px}.process-list li{display:flex;gap:12px}.process-list>li>span{width:28px;height:28px;flex:0 0 28px;border:1px solid #493039;border-radius:8px;display:grid;place-items:center;color:#ff6868;font-size:11px;font-weight:800;background:#20171a}.process-list b{font-size:13px;display:block;margin-bottom:3px}.process-list small{color:var(--muted);font-size:11px;line-height:1.45;display:block}
.job-banner{border:1px solid #4a3c25;background:linear-gradient(90deg,#201b13,#17191c);border-radius:12px;padding:14px 16px;margin-bottom:18px}.job-top{display:flex;justify-content:space-between;gap:15px;font-size:12px;margin-bottom:9px}.job-top span{color:#f8c55d}.progress-track{height:6px;background:#2c2e2c;border-radius:99px;overflow:hidden}.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#d99a24,#f0c35c);transition:width .3s}.job-note{font-size:10px;color:#8e8a7c;margin-top:7px}.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.metric{border:1px solid var(--line);border-radius:13px;padding:16px;background:#12171d}.metric span{font-size:11px;color:var(--muted);display:block}.metric strong{font-size:28px;display:block;margin:5px 0 1px;letter-spacing:-1px}.metric small{font-size:10px;color:#65717e}.overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.analysis-lines{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:16px}.analysis-lines div{display:flex;justify-content:space-between;background:#11161c;padding:11px 12px;font-size:11px}.analysis-lines span{color:var(--muted)}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.format-pills{display:flex;flex-wrap:wrap;gap:8px;margin:17px 0}.format-pills label{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:7px 10px;background:#101419;color:#b8c2ca}.format-pills input{accent-color:var(--accent);vertical-align:-1px}.output-summary{margin-top:18px}.pipeline{display:flex;align-items:stretch;gap:8px}.pipeline>div{flex:1;border:1px solid var(--line);border-radius:10px;background:#101419;padding:12px}.pipeline span{color:#ff6666;font-size:10px;font-weight:900}.pipeline b{display:block;font-size:11px;margin:6px 0 3px}.pipeline small{color:var(--muted);font-size:9px}.pipeline i{display:grid;place-items:center;color:#46515d;font-style:normal;font-size:23px}
.segmented{display:flex;border:1px solid var(--line);border-radius:10px;padding:3px;background:#101419}.segmented button{border:0;background:transparent;color:var(--muted);padding:7px 12px;border-radius:7px;font-size:11px;cursor:pointer}.segmented button.active{background:#242c34;color:#fff}.page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}.page-card{background:#12171d;border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:zoom-in}.page-image{aspect-ratio:8.5/11;background:#0e1115;display:grid;place-items:center;overflow:hidden}.page-image img{width:100%;height:100%;object-fit:contain}.page-label{padding:8px 10px;font-size:10px;color:#aab4be;display:flex;justify-content:space-between}.page-label i{font-style:normal;color:#5f6b77}.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}.image-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#12171d}.image-preview{height:190px;background:#0d1115;display:grid;place-items:center;cursor:zoom-in}.image-preview img{width:100%;height:100%;object-fit:contain}.image-meta{padding:11px}.image-meta-top{display:flex;justify-content:space-between;gap:8px}.image-meta b{font-size:11px}.type-chip{font-size:9px;padding:4px 6px;border-radius:99px;background:#202833;color:#aeb9c3;text-transform:uppercase}.image-meta small{display:block;color:var(--muted);font-size:9px;margin-top:5px}
.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.export-card{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:14px}.export-card.featured{border-color:#4b3034;background:linear-gradient(90deg,#1c1518,#13181e)}.export-icon{width:50px;height:58px;border:1px solid #4f3138;border-radius:9px;display:grid;place-items:center;background:#23171a;color:#ff6767;font-weight:900;font-size:10px}.export-card h3{margin:0 0 4px;font-size:14px}.export-card p{margin:0;color:var(--muted);font-size:10px;line-height:1.45}.section-title{font-size:15px;margin:26px 0 12px}.format-export-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.format-export{border:1px solid var(--line);border-radius:11px;background:#12171d;color:#fff;text-align:left;padding:14px;cursor:pointer;display:grid;grid-template-columns:1fr auto}.format-export b{font-size:13px}.format-export span{font-size:9px;color:var(--muted);grid-column:1;display:block;margin-top:4px}.format-export i{grid-column:2;grid-row:1/3;align-self:center;color:#697683;font-style:normal}
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(4,6,8,.78);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px}.modal{background:#141a20;border:1px solid #303a45;border-radius:16px;box-shadow:var(--shadow)}.login-card{width:min(420px,100%);padding:30px;text-align:center}.login-card h2{margin:0 0 7px}.login-card p{margin:0 0 18px;color:var(--muted);font-size:12px;line-height:1.5}.login-card input{width:100%;background:#0d1115;border:1px solid var(--line2);border-radius:9px;padding:12px;color:#fff;margin-bottom:10px}.form-error{color:#ff7777;font-size:11px;margin-top:10px;min-height:15px}.viewer-card{width:min(1200px,95vw);height:min(92vh,900px);position:relative;display:flex;flex-direction:column;padding:16px}.close-btn{position:absolute;right:12px;top:10px;border:0;background:#202832;color:#fff;width:34px;height:34px;border-radius:50%;font-size:22px;cursor:pointer}.viewer-title{font-size:12px;font-weight:800;margin:3px 48px 12px 3px}.viewer-stage{min-height:0;flex:1;background:#090c0f;border-radius:10px;overflow:auto;display:grid;place-items:center}.viewer-stage img{max-width:100%;max-height:100%;object-fit:contain}.toast{position:fixed;z-index:200;right:24px;bottom:24px;max-width:430px;background:#202832;border:1px solid #3d4854;border-radius:10px;padding:12px 15px;box-shadow:var(--shadow);font-size:12px}.toast.error{border-color:#71353a;color:#ff9a9a}
@media(max-width:1050px){.app-shell{grid-template-columns:82px 1fr}.sidebar{padding:16px 9px}.nav-btn{justify-content:center;padding:12px}.nav-btn span{width:auto}.nav-btn{font-size:0}.nav-btn span{font-size:18px}.side-section-label{font-size:0;height:14px}.engine-card{padding:11px;justify-content:center}.engine-card>div:last-child{display:none}.main{padding:26px 24px 50px}.overview-grid,.upload-layout{grid-template-columns:1fr}.format-export-grid{grid-template-columns:repeat(3,1fr)}.export-card{grid-template-columns:50px 1fr}.export-card .btn{grid-column:1/-1}.pipeline{display:grid;grid-template-columns:1fr 1fr}.pipeline i{display:none}}
@media(max-width:720px){.app-shell{display:block}.topbar{height:64px;padding:0 14px}.brand-subtitle{display:none}.brand-title{font-size:14px}.brand-mark{width:37px;height:37px}.sidebar{position:fixed;top:auto;bottom:0;left:0;right:0;height:64px;z-index:30;display:grid;grid-template-columns:repeat(6,1fr);border-right:0;border-top:1px solid var(--line);padding:6px 5px;background:rgba(12,16,20,.98)}.sidebar .side-section-label,.sidebar .sidebar-spacer,.sidebar .engine-card{display:none}.nav-btn{display:flex!important;flex-direction:column;gap:2px;padding:6px 2px;font-size:8px!important;text-align:center;justify-content:center}.nav-btn span{font-size:15px}.nav-btn.active{box-shadow:inset 0 -2px 0 var(--accent)}.main{padding:20px 13px 86px}.view-head{align-items:flex-start}.view-head h1{font-size:23px}.view-head>.btn,.head-actions{flex-shrink:0}.metrics-grid{grid-template-columns:1fr 1fr}.metric strong{font-size:22px}.settings-grid{grid-template-columns:1fr}.pipeline{grid-template-columns:1fr}.project-grid{grid-template-columns:1fr}.page-grid{grid-template-columns:repeat(2,1fr);gap:9px}.image-grid{grid-template-columns:1fr 1fr;gap:9px}.image-preview{height:150px}.export-grid{grid-template-columns:1fr}.format-export-grid{grid-template-columns:1fr 1fr}.drop-zone{height:245px}.upload-panel{padding:14px}.top-actions .btn{display:none!important}.brand-wrap{gap:9px}}
@media(max-width:440px){.metrics-grid{gap:8px}.metric{padding:13px}.image-grid{grid-template-columns:1fr}.format-export-grid{grid-template-columns:1fr}.view-head{display:block}.view-head .segmented,.view-head .compact-select{margin-top:12px}.head-actions{margin-top:10px}.page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}