:root {
  --navy: #082c4c;
  --blue: #0b68b2;
  --sky: #eaf6ff;
  --red: #e6333f;
  --ink: #16324a;
  --muted: #60788b;
  --line: #d8e4ec;
  --white: #fff;
  --green: #11875d;
  --shadow: 0 18px 50px rgba(8, 44, 76, .12);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: linear-gradient(145deg, #f8fcff 0%, #e8f6ff 100%);
  min-height: 100vh;
}
a { color: var(--blue); }
.topbar {
  background: var(--navy);
  color: white;
  padding: 14px 20px;
}
.topbar-inner, .container { width: min(1080px, calc(100% - 32px)); margin: auto; }
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:-.02em; }
.brandmark { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(135deg,#1385cb,#ed3444); font-size:18px; }
.nav { display:flex; gap:14px; flex-wrap:wrap; }
.nav a { color:#dff2ff; text-decoration:none; font-size:14px; }
.hero { padding: 52px 0 22px; }
.eyebrow { color:var(--red); text-transform:uppercase; font-size:12px; font-weight:800; letter-spacing:.12em; }
h1 { color:var(--navy); font-size:clamp(30px,5vw,50px); line-height:1.05; margin:12px 0; letter-spacing:-.045em; max-width:820px; }
.lead { color:var(--muted); max-width:760px; line-height:1.65; font-size:17px; }
.card { background:rgba(255,255,255,.95); border:1px solid rgba(216,228,236,.9); border-radius:24px; box-shadow:var(--shadow); padding:clamp(20px,4vw,38px); margin:22px 0 40px; }
.section-title { margin:0 0 5px; color:var(--navy); font-size:22px; }
.section-help { color:var(--muted); margin:0 0 22px; line-height:1.55; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.full { grid-column:1/-1; }
label { display:block; font-size:14px; font-weight:700; margin-bottom:7px; }
.required::after { content:" *"; color:var(--red); }
input, select, textarea {
  width:100%; border:1px solid var(--line); border-radius:12px;
  padding:13px 14px; font:inherit; background:#fff; color:var(--ink);
  outline:none; transition:.18s;
}
input:focus, select:focus, textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(11,104,178,.1); }
textarea { min-height:94px; resize:vertical; }
.checkrow { display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-size:14px; line-height:1.5; }
.checkrow input { width:18px; height:18px; flex:none; margin-top:2px; }
.change-box, .verification-box { border:1px solid var(--line); background:#fafdff; border-radius:16px; padding:18px; }
.change-box + .change-box { margin-top:12px; }
.pill-list { display:flex; flex-wrap:wrap; gap:10px; }
.pill { position:relative; }
.pill input { position:absolute; opacity:0; pointer-events:none; }
.pill span { display:block; padding:10px 13px; border:1px solid var(--line); border-radius:999px; background:white; cursor:pointer; font-size:14px; }
.pill input:checked + span { color:white; background:var(--blue); border-color:var(--blue); }
.actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:24px; }
.btn { border:0; border-radius:12px; background:var(--blue); color:white; padding:13px 18px; font-weight:800; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.btn.secondary { color:var(--navy); background:var(--sky); }
.btn.danger { background:var(--red); }
.btn:disabled { opacity:.55; cursor:wait; }
.notice { padding:14px 16px; border-radius:13px; background:#eef8ff; color:#174c70; font-size:14px; line-height:1.5; }
.notice.error { background:#fff0f1; color:#8c1e28; }
.notice.success { background:#eaf9f3; color:#126647; }
.hidden { display:none !important; }
.ticket { text-align:center; }
.ticket-code { font-size:clamp(22px,5vw,36px); font-weight:900; letter-spacing:.03em; color:var(--navy); margin:15px 0 5px; }
.track-code { font-family:ui-monospace,monospace; background:var(--sky); padding:8px 12px; border-radius:10px; display:inline-block; font-weight:800; }
.status { display:inline-flex; width:max-content; padding:6px 11px; border:1px solid transparent; border-radius:999px; font-size:12px; font-weight:800; line-height:1.2; }
.status-verification { background:#e8f3ff; border-color:#b9d9ff; color:#075ea8; }
.status-submitted { background:#f1eaff; border-color:#d7c2ff; color:#6836a8; }
.status-processing { background:#fff4c7; border-color:#f4d96c; color:#735500; }
.status-revision { background:#fff0df; border-color:#ffc98d; color:#a54800; }
.status-completed { background:#e8f8ee; border-color:#a9dfba; color:#18733a; }
.status-rejected { background:#ffe9eb; border-color:#f5b4bb; color:#b4232f; }
.status-neutral { background:#eef2f5; border-color:#d5dde3; color:#536270; }
.timeline { border-left:2px solid var(--line); margin:22px 0 0 8px; padding-left:22px; }
.timeline-item { position:relative; margin:0 0 20px; }
.timeline-item::before { content:""; position:absolute; width:12px; height:12px; border-radius:50%; background:var(--blue); left:-29px; top:4px; }
.muted, small { color:var(--muted); }
.admin-layout { display:grid; grid-template-columns:330px 1fr; gap:18px; }
.list { max-height:68vh; overflow:auto; }
.ticket-item { width:100%; text-align:left; border:1px solid var(--line); background:white; border-radius:13px; padding:13px; margin-bottom:9px; cursor:pointer; }
.ticket-item.active { border-color:var(--blue); background:#f1f9ff; }
.ticket-item strong, .ticket-item span { display:block; }
.ticket-item span { color:var(--muted); font-size:12px; margin-top:4px; }
.ticket-item .status { display:inline-flex; margin-top:8px; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.detail { background:#f7fbfe; border-radius:12px; padding:12px; overflow-wrap:anywhere; }
.detail b { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
footer { color:var(--muted); text-align:center; padding:20px 16px 36px; font-size:13px; }
@media (max-width:800px) {
  .grid, .admin-layout, .detail-grid { grid-template-columns:1fr; }
  .full { grid-column:auto; }
  .topbar-inner { align-items:flex-start; }
  .hero { padding-top:34px; }
  .card { border-radius:18px; }
  .list { max-height:none; }
}