:root{--black: #0a0a0a;--ink: #1b1a19;--gray-900: #242423;--gray-700: #484644;--gray-500: #797775;--gray-300: #c8c6c4;--gray-200: #e1dfdd;--gray-100: #f3f2f1;--gray-50: #faf9f8;--white: #ffffff;--accent: #0a0a0a;--danger: #a4262c;--font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;--shadow: 0 1.6px 3.6px rgba(0,0,0,.13), 0 .3px .9px rgba(0,0,0,.11);--shadow-lg: 0 6.4px 14.4px rgba(0,0,0,.13), 0 1.2px 3.6px rgba(0,0,0,.11)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);color:var(--ink);background:var(--gray-100);font-size:14px;line-height:1.45}.app{display:flex;flex-direction:column;min-height:100%}.topbar{display:flex;align-items:center;gap:16px;height:48px;padding:0 20px;background:var(--black);color:var(--white);box-shadow:var(--shadow)}.topbar .brand{font-weight:600;font-size:16px;letter-spacing:.2px}.topbar .brand .mark{display:inline-block;width:22px;height:22px;margin-right:8px;border:2px solid var(--white);border-radius:3px;vertical-align:-5px;position:relative}.topbar .brand .mark:after{content:"";position:absolute;inset:4px 4px auto 4px;height:3px;background:var(--white);box-shadow:0 5px 0 var(--white)}.topbar nav{display:flex;gap:4px;margin-left:12px}.topbar nav a{color:var(--gray-300);text-decoration:none;padding:6px 12px;border-radius:4px;font-weight:500}.topbar nav a:hover{background:var(--gray-900);color:var(--white)}.topbar nav a.active{background:var(--white);color:var(--black)}.topbar .spacer{flex:1}.topbar .user{font-size:13px;color:var(--gray-300)}.topbar .demo-pill{background:var(--white);color:var(--black);font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600;margin-left:8px}.content{flex:1;padding:24px;max-width:1200px;width:100%;margin:0 auto}h1{font-size:22px;font-weight:600;margin:0 0 4px}h2{font-size:16px;font-weight:600;margin:0 0 12px}.subtitle{color:var(--gray-500);margin:0 0 24px}.card{background:var(--white);border:1px solid var(--gray-200);border-radius:6px;box-shadow:var(--shadow);padding:20px;margin-bottom:16px}.card.pad0{padding:0;overflow:hidden}.btn{font-family:var(--font);font-size:14px;font-weight:600;padding:8px 18px;border-radius:4px;cursor:pointer;border:1px solid var(--black);background:var(--black);color:var(--white);transition:background .1s}.btn:hover{background:var(--gray-900)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.secondary{background:var(--white);color:var(--black)}.btn.secondary:hover{background:var(--gray-100)}.btn.small{padding:4px 12px;font-size:13px}label{display:block;font-weight:600;margin:12px 0 4px;font-size:13px}input[type=text],input[type=url],select,textarea{width:100%;padding:8px 10px;font-size:14px;font-family:var(--font);border:1px solid var(--gray-300);border-radius:4px;background:var(--white)}input:focus,select:focus,textarea:focus{outline:2px solid var(--black);border-color:var(--black)}.row{display:flex;gap:16px;flex-wrap:wrap}.row>*{flex:1;min-width:200px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--gray-200)}th{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--gray-500)}tr:hover td{background:var(--gray-50)}.clickable{cursor:pointer}.badge{display:inline-block;padding:2px 10px;border-radius:10px;font-size:12px;font-weight:600;border:1px solid var(--gray-300);color:var(--gray-700)}.badge.done{background:var(--black);color:var(--white);border-color:var(--black)}.badge.run{background:var(--gray-100);color:var(--ink)}.badge.fail{background:#fff;color:var(--danger);border-color:var(--danger)}.score-bar{height:6px;background:var(--gray-200);border-radius:3px;overflow:hidden;width:120px}.score-bar>div{height:100%;background:var(--black)}.progress{height:8px;background:var(--gray-200);border-radius:4px;overflow:hidden}.progress>div{height:100%;background:var(--black);transition:width .4s ease}.phase-steps{display:flex;gap:8px;margin:12px 0}.phase-steps .step{flex:1;text-align:center;padding:6px;font-size:12px;font-weight:600;border:1px solid var(--gray-200);border-radius:4px;color:var(--gray-500)}.phase-steps .step.active{background:var(--black);color:var(--white);border-color:var(--black)}.phase-steps .step.done{border-color:var(--black);color:var(--black)}.dropzone{border:2px dashed var(--gray-300);border-radius:8px;padding:40px;text-align:center;color:var(--gray-500);cursor:pointer;background:var(--gray-50)}.dropzone.drag{border-color:var(--black);background:var(--gray-100);color:var(--ink)}.viewer-grid{display:grid;grid-template-columns:1fr 360px;gap:16px}@media (max-width: 900px){.viewer-grid{grid-template-columns:1fr}}.viewer-image{background:var(--black);border-radius:6px;display:flex;align-items:center;justify-content:center;min-height:420px}.viewer-image img{max-width:100%;image-rendering:pixelated}.viewer-controls{display:flex;align-items:center;gap:12px;margin-top:12px}.viewer-controls input[type=range]{flex:1;accent-color:var(--black)}.toggle{display:flex;align-items:center;gap:8px}.report{white-space:pre-wrap;font-size:13.5px;line-height:1.55}.report h2,.report h3{margin-top:16px}.scale{margin:8px 0 4px}.scale-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}.scale-title{font-weight:600;font-size:13px}.scale-value{font-size:15px}.scale-value strong{font-size:20px}.scale-cat{color:var(--gray-700);font-weight:600;text-transform:uppercase;font-size:11px;letter-spacing:.4px}.scale-track{position:relative;height:16px;border-radius:8px;overflow:hidden;border:1px solid var(--gray-300)}.scale-gradient{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,#ededed,#1b1a19)}.scale-tick{position:absolute;top:0;bottom:0;width:1px;background:#ffffff73;transform:translate(-.5px)}.scale-marker{position:absolute;top:-3px;bottom:-3px;width:3px;background:var(--black);transform:translate(-1.5px);box-shadow:0 0 0 1.5px #fff}.scale-marker:before{content:"";position:absolute;top:-6px;left:50%;transform:translate(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--black)}.scale-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--gray-500);margin-top:4px}.scale-desc{font-size:12px;margin-top:2px}.muted{color:var(--gray-500)}.empty{text-align:center;padding:48px;color:var(--gray-500)}.err{color:var(--danger);background:#fdf3f4;border:1px solid var(--danger);padding:10px 14px;border-radius:4px;margin:12px 0}.rating-btns{display:flex;gap:8px;margin:8px 0}.center-screen{display:flex;align-items:center;justify-content:center;height:100vh;flex-direction:column;gap:16px}
