:root{--warm-white:#f6f5f4;--warm-dark:#31302e;--warm-gray:#615d59;--muted:#a39e98;--notion-blue:#004199;--notion-blue-hover:#00357a;--notion-blue-light:#00419914;--border:#0000001a;--border-strong:#00000029;--bg-page:#fff;--bg-sidebar:#f6f5f4;--bg-hover:#00000008;--bg-active:#0000000d;--shadow-sm:0 1px 2px #0000000a;--shadow-md:0 2px 8px #00000014, 0 1px 2px #0000000a;--shadow-lg:0 8px 24px #0000001f, 0 2px 8px #0000000a;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-pill:9999px;--red:#e53e3e;--red-light:#e53e3e14;--green:#38a169;--green-light:#38a16914;--orange:#dd6b20;--orange-light:#dd6b2014;--yellow:#d69e2e;--yellow-light:#d69e2e14}*,:before,:after{box-sizing:border-box}body{color:var(--warm-dark);background:var(--bg-page);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.5}#root{min-height:100vh}a{color:var(--notion-blue);text-decoration:none}a:hover{color:var(--notion-blue-hover)}input,select,textarea,button{font-family:inherit;font-size:inherit}.page-container{max-width:1200px;margin:0 auto;padding:24px 32px}.page-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.page-header h1{color:var(--warm-dark);margin:0;font-size:24px;font-weight:600}.btn{border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-page);color:var(--warm-dark);cursor:pointer;white-space:nowrap;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:500;transition:all .15s;display:inline-flex}.btn:hover{background:var(--bg-hover);border-color:var(--border-strong)}.btn-primary{background:var(--notion-blue);color:#fff;border-color:var(--notion-blue)}.btn-primary:hover{background:var(--notion-blue-hover);border-color:var(--notion-blue-hover)}.btn-danger{color:var(--red);border-color:var(--red)}.btn-danger:hover{background:var(--red-light)}.btn-sm{padding:4px 10px;font-size:12px}.btn-ghost{color:var(--warm-gray);background:0 0;border:none}.btn-ghost:hover{color:var(--warm-dark);background:var(--bg-hover)}.table-wrapper{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-page);overflow:hidden}table{border-collapse:collapse;width:100%}th{text-align:left;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);background:var(--bg-sidebar);padding:10px 16px;font-size:12px;font-weight:500}td{border-bottom:1px solid var(--border);color:var(--warm-dark);padding:10px 16px;font-size:13px}tr:last-child td{border-bottom:none}tr:hover td{background:var(--bg-hover)}.form-group{margin-bottom:16px}.form-group label{color:var(--warm-gray);text-transform:uppercase;letter-spacing:.3px;margin-bottom:4px;font-size:12px;font-weight:500;display:block}.form-input{border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--warm-dark);background:var(--bg-page);padding:8px 12px;font-size:13px;transition:border-color .15s}.form-input:focus{border-color:var(--notion-blue);box-shadow:0 0 0 3px var(--notion-blue-light);outline:none}.form-input::placeholder{color:var(--muted)}select.form-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23615d59' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;padding-right:30px}.search-bar{align-items:center;gap:12px;margin-bottom:16px;display:flex}.search-input-wrapper{flex:1;max-width:320px;position:relative}.search-input-wrapper .search-icon{color:var(--muted);pointer-events:none;font-size:14px;position:absolute;top:50%;left:10px;transform:translateY(-50%)}.search-input{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-page);width:100%;color:var(--warm-dark);padding:8px 12px 8px 32px;font-size:13px}.search-input:focus{border-color:var(--notion-blue);box-shadow:0 0 0 3px var(--notion-blue-light);outline:none}.badge{border-radius:var(--radius-pill);text-transform:capitalize;align-items:center;padding:2px 8px;font-size:11px;font-weight:500;display:inline-flex}.badge-draft{background:var(--bg-sidebar);color:var(--warm-gray)}.badge-sent,.badge-pending{background:var(--notion-blue-light);color:var(--notion-blue)}.badge-confirmed,.badge-accepted{background:var(--green-light);color:var(--green)}.badge-rejected,.badge-cancelled{background:var(--red-light);color:var(--red)}.badge-expired{background:var(--orange-light);color:var(--orange)}.badge-producing{background:var(--yellow-light);color:var(--yellow)}.badge-shipped,.badge-completed{background:var(--green-light);color:var(--green)}.filter-pills{background:var(--bg-sidebar);border-radius:var(--radius-pill);gap:4px;margin-bottom:16px;padding:3px;display:flex}.filter-pill{border-radius:var(--radius-pill);color:var(--warm-gray);cursor:pointer;background:0 0;border:none;padding:5px 14px;font-size:12px;font-weight:500;transition:all .15s}.filter-pill:hover{color:var(--warm-dark)}.filter-pill.active{background:var(--bg-page);color:var(--warm-dark);box-shadow:var(--shadow-sm)}.empty-state{text-align:center;color:var(--muted);padding:48px 24px}.empty-state h3{color:var(--warm-gray);margin:0 0 8px;font-size:16px;font-weight:500}.empty-state p{margin:0;font-size:13px}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px;display:grid}.stat-card{background:var(--bg-page);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px}.stat-card .stat-label{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:12px}.stat-card .stat-value{color:var(--warm-dark);font-size:28px;font-weight:600}.stat-card .stat-sub{color:var(--muted);margin-top:4px;font-size:12px}@media (width<=768px){.page-container{padding:16px}.page-header{flex-direction:column;align-items:flex-start;gap:12px}.stats-grid{grid-template-columns:1fr 1fr}}