:root { --ink:#17212b; --muted:#657383; --canvas:#f3f6f8; --line:#dfe6eb; --brand:#df5b2b; --brand-dark:#af3b16; --nav:#17252d; --success:#198754; --danger:#cc3d3d; }
html { font-size:14px; min-height:100%; }
@media (min-width:768px) { html { font-size:15px; } }
body.panel-body { min-height:100vh; margin:0; color:var(--ink); background:radial-gradient(circle at 10% 0%,rgba(223,91,43,.08),transparent 26rem),var(--canvas); font-family:Inter,"Segoe UI",system-ui,sans-serif; }
.panel-nav { background:linear-gradient(105deg,var(--nav),#263a43); min-height:66px; box-shadow:0 7px 24px rgba(15,30,38,.16); }
.navbar-brand { letter-spacing:-.02em; }
.brand-mark,.login-badge { display:inline-grid; place-items:center; color:white; background:var(--brand); border-radius:10px; font-weight:800; box-shadow:0 6px 14px rgba(223,91,43,.28); }
.brand-mark { width:34px; height:34px; }
.login-badge { width:58px; height:58px; margin-bottom:22px; font-size:25px; }
.panel-footer { padding:22px 0; color:var(--muted); font-size:.85rem; }
.page-heading h1,.login-card h1 { letter-spacing:-.035em; font-weight:750; }
.eyebrow { color:var(--brand-dark); font-size:.74rem; letter-spacing:.14em; font-weight:800; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.metric-card,.panel-card { background:rgba(255,255,255,.96); border:1px solid var(--line); border-radius:15px; box-shadow:0 8px 28px rgba(32,53,64,.06); }
.metric-card { padding:20px 22px; border-top:3px solid #82909b; }
.metric-card.success { border-top-color:var(--success); }
.metric-card.danger { border-top-color:var(--danger); }
.metric-card.accent { border-top-color:var(--brand); }
.metric-card span { display:block; color:var(--muted); font-size:.84rem; }
.metric-card strong { display:block; margin-top:8px; font-size:1.9rem; letter-spacing:-.04em; }
.metric-card small { font-size:.8rem; color:var(--muted); }
.panel-card { padding:22px; }
.table-card { padding:0; overflow:hidden; }
.table thead th { padding:14px 16px; border:0; background:#edf2f4; color:#5b6975; font-size:.74rem; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
.table tbody td { padding:14px 16px; border-color:#edf1f3; }
.table tbody tr:hover { background:#fffaf7; }
.order-link { color:var(--ink); font-weight:750; text-decoration:none; }
.order-link:hover,.back-link { color:var(--brand-dark); }
.company-id { display:inline-grid; place-items:center; min-width:25px; height:25px; margin-right:6px; background:#e7edf0; border-radius:7px; font-weight:700; }
.status-dot { width:9px; height:9px; display:inline-block; border-radius:50%; margin-right:5px; background:#88949d; }
.status-dot.ok { background:#21a366; box-shadow:0 0 0 4px rgba(33,163,102,.12); }
.status-dot.fail { background:#db4545; box-shadow:0 0 0 4px rgba(219,69,69,.12); }
.status-pill { display:inline-block; padding:4px 9px; border-radius:999px; background:#edf1f3; font-size:.78rem; font-weight:700; }
.empty-state { padding:50px!important; color:var(--muted); text-align:center; }
.pagination-row { display:flex; justify-content:space-between; align-items:center; padding:15px 18px; color:var(--muted); border-top:1px solid var(--line); }
.btn-brand { color:white; background:var(--brand); border-color:var(--brand); }
.btn-brand:hover { color:white; background:var(--brand-dark); border-color:var(--brand-dark); }
.btn-soft { color:var(--brand-dark); background:#fff0ea; border-color:#f4d0c2; }
.form-control:focus,.form-select:focus { border-color:#e58a68; box-shadow:0 0 0 .2rem rgba(223,91,43,.14); }
.login-shell { min-height:calc(100vh - 180px); display:grid; place-items:center; padding:30px 15px; }
.login-card { width:min(440px,100%); padding:40px; background:white; border:1px solid var(--line); border-radius:20px; box-shadow:0 24px 60px rgba(24,42,52,.13); }
.detail-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:18px; }
.info-list { margin:0; }
.info-list div { display:grid; grid-template-columns:110px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid #edf1f3; }
.info-list div:last-child { border:0; }
.info-list dt { color:var(--muted); font-weight:500; }
.info-list dd { margin:0; font-weight:650; }
.status-actions { display:flex; flex-wrap:wrap; gap:8px; }
.timeline { border-left:2px solid #dfe6ea; margin-left:7px; padding-left:24px; }
.timeline-item { position:relative; padding:0 0 22px; }
.timeline-item:last-child { padding-bottom:0; }
.timeline-dot { position:absolute; left:-31px; top:5px; width:12px; height:12px; border-radius:50%; background:var(--brand); border:3px solid white; box-shadow:0 0 0 2px var(--brand); }
.timeline-item p { color:var(--muted); }
.timeline-item small { color:#87929b; }
.json-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.json-grid .full { grid-column:1/-1; }
.code-card pre { max-height:460px; margin:0; padding:17px; overflow:auto; color:#dce7ec; background:#17252d; border-radius:10px; font:.82rem/1.55 Consolas,monospace; white-space:pre-wrap; }
.code-card h2 { margin-bottom:13px; }
.back-link { text-decoration:none; font-weight:650; }
@media (max-width:992px) { .metric-grid { grid-template-columns:1fr 1fr; } .detail-grid,.json-grid { grid-template-columns:1fr; } .json-grid .full { grid-column:auto; } }
@media (max-width:576px) { .metric-grid { grid-template-columns:1fr; } .login-card { padding:28px 22px; } .panel-card { padding:17px; } .pagination-row { align-items:flex-start; gap:12px; flex-direction:column; } }