:root { color-scheme: dark; --bg:#080b0e; --surface:#11171b; --surface-2:#182126; --line:#2d383e; --orange:#e87522; --orange-light:#ffad5b; --steel:#d6dde0; --text:#f3f5f6; --muted:#a6b0b5; }
* { box-sizing:border-box; } body { margin:0; background:radial-gradient(circle at top right,#2c1a0e,var(--bg) 42%); color:var(--text); font:15px/1.45 Inter,Segoe UI,Arial,sans-serif; }
header { min-height:70px; display:flex; align-items:center; justify-content:space-between; padding:8px max(24px,calc((100vw - 1240px)/2)); border-bottom:1px solid var(--line); background:#10171bcc; backdrop-filter:blur(12px); }.brand{display:flex;align-items:center;gap:10px}.brand img{width:58px;height:58px;object-fit:contain}
header strong { color:var(--orange); letter-spacing:2px; display:block; } header small,.user,small { color:var(--muted); } nav { display:flex; gap:18px; align-items:center; } a { color:#f6a75d; text-decoration:none; } main { max-width:1240px; margin:auto; padding:46px 24px; } .hero { display:flex; align-items:end; justify-content:space-between; margin-bottom:28px; } .hero p { color:var(--orange); font-size:12px; font-weight:700; letter-spacing:1.5px; } h1 { margin:3px 0; font-size:36px; } .button,button { background:var(--orange); color:#16100b; padding:9px 13px; border:0; border-radius:5px; cursor:pointer; font-weight:700; } .cards { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; } article,.table-wrap { background:var(--surface); border:1px solid var(--line); border-radius:8px; } article { padding:18px; } article span { color:var(--muted); display:block; text-transform:uppercase; font-size:11px; letter-spacing:1px; } article strong { font-size:32px; } .table-wrap { overflow:auto; } table { border-collapse:collapse; width:100%; min-width:900px; } th,td { padding:15px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } th { color:var(--muted); text-transform:uppercase; font-size:11px; letter-spacing:1px; } td:nth-child(3) { max-width:330px; } select { background:#0d1317; color:var(--text); border:1px solid var(--line); border-radius:4px; padding:7px; margin-right:6px; } .badge { display:inline-block; padding:4px 7px; border-radius:99px; background:#263139; font-size:12px; }.badge.open{color:#f4bd78}.badge.in_progress{color:#78c6f4}.badge.ready{color:#80df9e}.badge.completed{color:#b1bbc0}.badge.cancelled{color:#ef8282}@media(max-width:700px){header,.hero{align-items:flex-start;flex-direction:column;gap:16px}.cards{grid-template-columns:repeat(2,1fr)}main{padding:28px 15px}}