:root{--bg:#0f1720;--panel:#fff;--ink:#1a2330;--muted:#6b7785;--line:#e4e8ee;
--brand:#0d6efd;--brand-d:#0b5ed7;--ok:#198754;--warn:#b8860b;--danger:#dc3545;}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
color:var(--ink);background:#f4f6f9}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
code{background:#eef1f5;padding:1px 5px;border-radius:4px;font-size:.85em}
.muted{color:var(--muted)}.right{text-align:right}
.topbar{display:flex;justify-content:space-between;align-items:center;
background:var(--bg);color:#fff;padding:12px 20px}
.topbar .brand{color:#fff;font-weight:700;font-size:1.1rem}
.topbar .brand span{color:#8fb6ff;font-weight:400}
.topbar nav a{color:#cdd6e2;margin-left:18px}
.topbar nav a:hover{color:#fff}
.wrap{max-width:980px;margin:24px auto;padding:0 20px}
h1{font-size:1.5rem;margin:.2em 0 .6em}h2{font-size:1.1rem;margin:1.4em 0 .5em}
.flash{padding:10px 14px;border-radius:8px;margin:0 0 14px}
.flash.success{background:#d1e7dd;color:#0f5132}
.flash.error{background:#f8d7da;color:#842029}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:1em 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;
padding:16px;text-align:center}
.card .num{display:block;font-size:1.8rem;font-weight:700}
.card.highlight{border-color:var(--brand);background:#eaf2ff}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
border-radius:10px;overflow:hidden}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line)}
th{background:#f7f9fc;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
tbody tr:last-child td{border-bottom:none}
tfoot td{padding:10px 12px}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.78rem;
background:#e9ecef;text-transform:capitalize}
.badge.new{background:#cfe2ff;color:#084298}
.badge.confirmed{background:#d1e7dd;color:#0f5132}
.badge.shipped,.badge.packed{background:#fff3cd;color:#664d03}
.badge.completed{background:#d2f4ea;color:#0a6e57}
.badge.cancelled{background:#f8d7da;color:#842029}
.btn{display:inline-block;background:var(--brand);color:#fff;padding:8px 14px;
border-radius:8px;font-size:.9rem}
.btn:hover{background:var(--brand-d);text-decoration:none}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
button{background:var(--brand);color:#fff;border:0;padding:9px 16px;border-radius:8px;
font-size:.92rem;cursor:pointer}button:hover{background:var(--brand-d)}
.linkbtn{background:none;border:0;color:var(--brand);padding:0;cursor:pointer;font-size:.9rem}
.linkbtn.danger{color:var(--danger)}
.inline{display:inline}
.actions a,.actions form{margin-right:10px}
.row-between{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.row{display:flex;gap:10px;align-items:center;margin-top:14px}
.searchbar{display:flex;gap:10px;align-items:center;margin:1em 0}
.searchbar input[type=search]{flex:1}
.form,.login-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}
.form label,.login-card label{display:block;margin:0 0 14px;font-size:.9rem;color:var(--muted)}
.form input,.form textarea,.form select,.login-card input,.searchbar input,.searchbar select{
width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:.95rem;
color:var(--ink);background:#fff;margin-top:4px}
.searchbar input,.searchbar select{width:auto;margin-top:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.check{display:flex;align-items:flex-start;gap:8px}.check input{width:auto;margin:3px 0 0}
.modes{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:0 0 14px}
.modes legend{font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);padding:0 6px}
.modes .check{margin:0 0 10px}.modes .check:last-child{margin-bottom:0}
.modes .check span{font-size:.92rem;color:var(--ink)}
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.panel p{margin:.3em 0}
.cards a.card{color:var(--ink);text-decoration:none}
.cards a.card:hover{border-color:var(--brand)}
.card .num{font-size:1.5rem}
table.mini{border:0}table.mini td{border:0;padding:5px 8px}
.form-plain label{display:block;margin:0 0 12px;font-size:.9rem;color:var(--muted)}
.form-plain input,.form-plain textarea,.form-plain select{width:100%;padding:9px 11px;
border:1px solid var(--line);border-radius:8px;font-size:.95rem;margin-top:4px;background:#fff;color:var(--ink)}
.inline-form{display:flex;gap:6px;align-items:center}
.inline-form input{padding:5px 8px;border:1px solid var(--line);border-radius:6px;font-size:.85rem}
.addrow input{background:#fbfdff}
.center{text-align:center}
td input{padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-size:.9rem;width:100%}
.note{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;margin-top:18px}
.login-card{max-width:360px;margin:8vh auto;text-align:center}
.login-card h1{margin-bottom:0}.login-card form{margin-top:18px;text-align:left}
.login-card button{width:100%}
@media(max-width:720px){.cards,.grid2,.grid3{grid-template-columns:1fr 1fr}
.topbar{flex-direction:column;gap:8px}.topbar nav a{margin:0 9px}}