frontend/src/styles.css

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#172033;background:#f4f7fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}button,select{font:inherit}button{cursor:pointer}.shell{min-height:100vh}.topbar{height:70px;background:#fff;border-bottom:1px solid #e6ebf2;display:flex;align-items:center;justify-content:space-between;padding:0 32px}.brand{display:flex;align-items:center;gap:11px}.brand-mark{width:36px;height:36px;background:#183b61;color:#fff;display:grid;place-items:center;border-radius:9px}.brand strong{display:block;font:700 16px 'Space Grotesk';letter-spacing:-.3px}.brand span{display:block;color:#748096;font-size:11px;margin-top:2px}.topbar-status{display:flex;align-items:center;gap:8px;color:#637088;font-size:12px}.live-dot{width:7px;height:7px;border-radius:50%;background:#1db881;box-shadow:0 0 0 4px #e5f8f1}.divider{height:18px;width:1px;background:#dce3ed;margin:0 7px}.workspace{display:flex;min-height:calc(100vh - 70px)}.sidebar{width:230px;background:#fff;border-right:1px solid #e6ebf2;padding:30px 16px 20px;display:flex;flex-direction:column}.eyebrow,.panel-kicker,.mini-label{font-size:10px;text-transform:uppercase;letter-spacing:1.25px;font-weight:700;color:#8b98ab}.sidebar .eyebrow{padding:0 12px 13px}.nav-button{width:100%;border:0;background:transparent;color:#637088;display:flex;align-items:center;gap:11px;text-align:left;padding:11px 12px;border-radius:7px;margin-bottom:4px;font-size:13px}.nav-button svg:last-child{margin-left:auto}.nav-button:hover{background:#f2f6fb;color:#203958}.nav-button.active{background:#edf5fb;color:#0e5e83;font-weight:700}.sidebar-bottom{margin-top:auto;border-top:1px solid #edf0f5;padding:20px 12px 5px}.system-line{display:flex;align-items:center;gap:9px;font-size:12px;margin-top:12px;color:#2a6d58}.system-line.muted{color:#8995a7}.main{width:min(1360px,100%);padding:38px 42px 70px;margin:0 auto}.page-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px}.page-heading h1{font:700 32px 'Space Grotesk';letter-spacing:-1.2px;margin:6px 0 7px;color:#172033}.page-heading p{margin:0;color:#6f7c91;font-size:14px}.ghost-button,.secondary-button{display:inline-flex;align-items:center;gap:7px;border:1px solid #dce4ee;background:#fff;color:#52617a;padding:9px 13px;border-radius:6px;font-size:12px;font-weight:600}.ghost-button:hover,.secondary-button:hover{border-color:#9ab6cf;color:#124f72}.control-strip{display:flex;gap:12px;margin-bottom:20px}.segmented{display:flex;border:1px solid #dce4ee;background:#fff;border-radius:7px;padding:3px}.segmented button{border:0;background:transparent;color:#77849a;padding:8px 13px;border-radius:5px;font-size:12px;display:flex;gap:7px;align-items:center}.segmented button.selected{background:#183b61;color:#fff}.control-strip select,.analytics-toolbar select{border:1px solid #dce4ee;background:#fff;color:#4c5a72;border-radius:6px;padding:9px 12px;font-size:12px;min-width:250px}.analysis-grid,.analytics-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px}.panel{background:#fff;border:1px solid #e4eaf2;border-radius:8px;box-shadow:0 5px 18px rgba(27,53,84,.035);padding:24px}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:20px}.panel-heading h2{font:600 18px 'Space Grotesk';margin:6px 0 0;letter-spacing:-.4px;max-width:440px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ready-badge,.class-badge{display:inline-flex;align-items:center;gap:5px;border-radius:5px;padding:6px 9px;font-size:11px;font-weight:700}.ready-badge{color:#177055;background:#eaf8f2}.class-badge.accepted{color:#147054;background:#eaf8f2}.class-badge.review{color:#9a6415;background:#fff4dd}.dropzone{border:1px dashed #afc0d3;background:#f8fafc;border-radius:7px;min-height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#4e6078;text-align:center}.dropzone svg{color:#1a6a91}.dropzone strong{font-size:13px}.dropzone span{font-size:11px;color:#8996a8}.dropzone input{display:none}.sample-note{display:flex;gap:12px;align-items:flex-start;padding:15px;background:#f3f8fb;border:1px solid #dbeaf2;border-radius:7px;color:#176080}.sample-note strong,.sample-note span{display:block}.sample-note strong{font-size:13px}.sample-note span{color:#708096;font-size:12px;margin-top:4px;line-height:1.45}.preview-wrap{height:260px;margin-top:18px;background:#f4f6f9;border:1px solid #e5eaf0;border-radius:6px;display:grid;place-items:center;overflow:hidden}.preview-wrap img{width:100%;height:100%;object-fit:contain}.empty-preview,.pdf-preview{height:180px;margin-top:18px;border:1px dashed #d5dde8;background:#fafbfd;color:#94a0b1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border-radius:6px;font-size:12px}.pdf-preview{border-style:solid;color:#51627b;background:#f8fafc}.compact{height:120px;margin-top:0}.primary-button{width:100%;border:0;background:#174d70;color:#fff;border-radius:6px;padding:12px 16px;font-size:13px;font-weight:700;display:flex;justify-content:center;align-items:center;gap:8px}.primary-button:hover{background:#113c58}.primary-button:disabled{opacity:.55;cursor:not-allowed}.analyze-button{margin-top:18px}.empty-results{display:flex;flex-direction:column;justify-content:center;min-height:480px}.empty-icon{width:42px;height:42px;display:grid;place-items:center;background:#edf4f8;color:#246482;border-radius:8px;margin-bottom:18px}.empty-results h2{font:600 21px 'Space Grotesk';margin:7px 0}.empty-results p,.loading-panel p{color:#7a8799;line-height:1.6;font-size:13px;max-width:360px}.loading-panel{min-height:480px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.spin{animation:spin 1s linear infinite}.big{color:#1b6d91}@keyframes spin{to{transform:rotate(360deg)}}.progress-line{width:210px;height:4px;background:#e6eef3;border-radius:4px;overflow:hidden;margin-top:15px}.progress-line span{display:block;width:45%;height:100%;background:#1c799a;animation:progress 1.3s ease-in-out infinite alternate}@keyframes progress{to{transform:translateX(120px)}}.classification{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-bottom:1px solid #edf0f4;padding-bottom:18px}.classification span,.confidence span{display:block;color:#8996a8;font-size:11px;text-transform:uppercase;letter-spacing:.7px}.classification strong{display:block;font:600 20px 'Space Grotesk';text-transform:capitalize;margin-top:7px}.confidence strong{display:block;font:600 20px 'Space Grotesk';margin:7px 0}.meter{height:5px;border-radius:5px;background:#e8edf2;overflow:hidden}.meter i{display:block;height:100%;background:#1c9a77;border-radius:5px}.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:17px 0}.stat{background:#f7f9fb;border:1px solid #edf0f4;border-radius:6px;padding:10px 12px}.stat span{display:flex;align-items:center;gap:6px;color:#7a8799;font-size:11px}.stat strong{display:block;margin-top:6px;font:600 16px 'Space Grotesk'}.section-title{font-weight:700;font-size:12px;color:#52617a;margin:19px 0 8px}.field-list{border-top:1px solid #edf0f4}.field-row{display:grid;grid-template-columns:1.1fr 1.4fr .4fr;gap:10px;align-items:center;border-bottom:1px solid #f0f2f5;padding:9px 0;font-size:12px}.field-row span{text-transform:capitalize;color:#77849a}.field-row strong{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-row em{font-style:normal;color:#1a8a6d;text-align:right;font-size:11px}.route-note{display:flex;align-items:center;gap:8px;border-radius:6px;padding:11px;margin-top:17px;font-size:12px;line-height:1.4}.route-note.good{background:#edf9f4;color:#24745d}.route-note.warn{background:#fff7e6;color:#98691e}.download-row{display:flex;gap:8px;margin-top:17px}.table-panel,.batch-panel{margin-top:20px}.batch-list{display:flex;flex-direction:column;gap:7px;margin-bottom:17px}.batch-item{display:flex;align-items:center;gap:9px;padding:10px 12px;background:#f8fafc;border:1px solid #ebeff4;border-radius:5px;color:#52617a;font-size:12px}.batch-item span{flex:1}.batch-item small{color:#96a1b0}.batch-panel>.primary-button{max-width:240px}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;font-size:12px}th{text-align:left;color:#8895a8;background:#f7f9fb;font-size:10px;text-transform:uppercase;letter-spacing:.7px}th,td{padding:11px 12px;border-bottom:1px solid #edf0f4;white-space:nowrap}td{color:#4d5d73}.error-text{color:#c2534f}.analytics-toolbar{display:flex;justify-content:flex-end;margin-bottom:17px}.analytics-grid{grid-template-columns:1fr 1fr}.matrix{display:block;width:100%;max-height:440px;object-fit:contain;background:#f8fafc}.alert{display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:6px;margin-bottom:18px;font-size:12px}.alert.error{background:#fff0ef;color:#a33d38;border:1px solid #f4ceca}.alert button{margin-left:auto;border:0;background:transparent;color:inherit;display:grid;place-items:center}@media(max-width:900px){.sidebar{width:190px}.main{padding:28px 20px}.analysis-grid,.analytics-grid{grid-template-columns:1fr}.topbar{padding:0 18px}.topbar-status{display:none}}@media(max-width:620px){.sidebar{display:none}.page-heading{align-items:flex-start;gap:12px;flex-direction:column}.page-heading h1{font-size:26px}.main{padding:24px 14px}.panel{padding:17px}.classification{grid-template-columns:1fr}.field-row{grid-template-columns:1fr 1.2fr .35fr}.control-strip{flex-direction:column}.control-strip select{width:100%}}