:root { --ink:#172033; --muted:#62708a; --line:#dfe5ef; --bg:#f3f6fa; --blue:#2468e8; --blue-dark:#1954be; --white:#fff; --green:#087f5b; --orange:#b25f00; --red:#c22d36; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--bg); font-family:Inter,Segoe UI,Arial,sans-serif; } .shell { max-width:1040px; margin:0 auto; padding:38px 24px 64px; } header { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:30px; } .eyebrow { margin:0 0 5px; color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.11em; } h1 { margin:0; font-size:32px; letter-spacing:-.04em; } h2 { margin:0; font-size:20px; } .identity { margin-top:4px; padding:9px 12px; background:#e8eefb; color:#344a78; border-radius:8px; font-size:14px; } .tabs { display:flex; gap:4px; margin-bottom:18px; border-bottom:1px solid var(--line); } button { appearance:none; cursor:pointer; font:inherit; border-radius:8px; padding:10px 14px; font-weight:650; } .tab { color:var(--muted); background:transparent; border:0; border-radius:8px 8px 0 0; } .tab.active { color:var(--blue); box-shadow:inset 0 -2px var(--blue); } .view { display:none; } .view.active { display:block; } .card { background:var(--white); border:1px solid var(--line); border-radius:12px; box-shadow:0 2px 8px #18264a08; } form.card { padding:26px; max-width:760px; } label { display:block; font-size:14px; font-weight:700; margin-bottom:18px; } input, select, textarea { display:block; width:100%; margin-top:7px; border:1px solid #bec9da; border-radius:7px; padding:10px 11px; font:inherit; color:var(--ink); background:#fff; } textarea { resize:vertical; line-height:1.45; } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .actions { display:flex; gap:16px; align-items:center; } .primary { color:#fff; border:1px solid var(--blue); background:var(--blue); } .primary:hover { background:var(--blue-dark); } .secondary { color:#29436f; border:1px solid #bac8dc; background:#fff; } .notice { padding:12px 14px; margin-bottom:18px; border-radius:8px; } .error { color:#8c1c23; background:#fff0f1; border:1px solid #f5c5c9; } .toolbar { display:flex; align-items:center; justify-content:space-between; margin:0 0 16px; } .tickets { display:grid; gap:12px; } .ticket { padding:18px 20px; } .ticket-title { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; } .ticket-id { color:var(--muted); font-size:13px; font-weight:700; } h3 { margin:4px 0 0; font-size:17px; } .badge { white-space:nowrap; color:#3b506e; background:#eef2f7; padding:5px 8px; border-radius:999px; font-size:12px; font-weight:750; } .status-resolved,.status-closed { color:var(--green); background:#e5f7f0; } .status-in_progress { color:var(--orange); background:#fff3dd; } dl { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:18px 0; } dt { color:var(--muted); font-size:12px; } dd { margin:3px 0 0; font-size:14px; } .description { white-space:pre-wrap; margin:0; padding-top:14px; border-top:1px solid var(--line); line-height:1.5; } .admin-controls { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; } .admin-controls select { width:auto; margin:0; } .muted { color:var(--muted); } #form-message { color:var(--green); margin:0; font-size:14px; } @media (max-width:650px) { .shell { padding:24px 15px; } header { margin-bottom:20px; } .form-grid,dl { grid-template-columns:1fr; } .ticket-title { flex-direction:column; } .badge { white-space:normal; } }