.ticket-page-nav { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0; }
.ticket-page-nav a { padding:12px 18px; border:1px solid #24616c; border-radius:10px; color:#49e6ee; text-decoration:none; }
.ticket-record { scroll-margin-top:24px; overflow-wrap:anywhere; padding:20px; margin:16px 0; display:grid; gap:12px; background:#0b1c23; border:1px solid #24515b; border-radius:12px; }
.ticket-record > div > strong, .ticket-record > div > span { display:block; }
.ticket-record > div > span { color:#a2c4d2; margin-top:8px; font-size:.9rem; line-height:1.6; }
.ticket-record p { margin:8px 0; line-height:1.6; white-space:pre-wrap; }
.ticket-record button { padding:10px 14px; background:#122c35; color:#e9f8fb; border:1px solid #30616c; border-radius:8px; cursor:pointer; }
.ticket-record button:disabled { opacity:.6; cursor:wait; }
.ticket-record .participation-controls { display:flex; gap:8px; flex-wrap:wrap; }
.ticket-record summary { cursor:pointer; color:#aee9f0; }
.ticket-record:focus { outline:2px solid #20d7e3; outline-offset:4px; }
.ticket-record > p:not(:empty) { padding:12px; border-left:3px solid #ffd34b; background:#11242b; }
.ticket-record [role="status"]:empty { display:none; }
.ticket-record details { margin-top:12px; }
.ticket-center input:not([type="file"]), .ticket-center textarea, .ticket-center select { width:100%; box-sizing:border-box; }
.ticket-center label { min-width:0; }
.ticket-record form { display:grid; gap:16px; padding:18px; border:1px solid #26cbd5; border-radius:10px; background:#081920; }
.ticket-record form label { display:grid; gap:8px; }
.ticket-record textarea, .ticket-record select, .ticket-record input { font:inherit; padding:12px; color:#e9f8fb; background:#102b35; border:1px solid #397783; border-radius:8px; }
.ticket-evidence-preview { display:block; max-width:100%; max-height:280px; margin:12px 0; object-fit:contain; border-radius:8px; }
.ticket-record button, .ticket-page-nav a, .ticket-page-nav button { min-height:44px; }
.ticket-record :is(button, a, summary, input, select, textarea):focus-visible { outline:3px solid #ffd34b; outline-offset:3px; }
#ticket-live-status { color:#aee9f0; line-height:1.5; }
@media (max-width:600px) {
  .portal-card { padding:16px; }
  .record-section { padding:10px; }
  .ticket-record { padding:14px; }
  .ticket-record form { padding:12px; }
  .ticket-record .participation-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ticket-record button { white-space:normal; overflow-wrap:anywhere; }
  .ticket-record input[type="file"] { max-width:100%; box-sizing:border-box; }
}
.ticket-resolution {
  padding: 1rem;
  border-left: 4px solid #20c9c9;
  border-radius: 8px;
  background: #0c282d;
  color: #ecffff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ticket-record > *, .ticket-record form > * { min-width:0; }
.ticket-record textarea { min-height:150px; resize:vertical; }
.ticket-record input[type="file"] { width:100%; min-width:0; box-sizing:border-box; }
.ticket-record a { overflow-wrap:anywhere; }
@media (max-width:600px) {
  .ticket-center :is(input,select,textarea) { font-size:16px; }
  .ticket-page-nav > * { flex:1 1 140px; text-align:center; }
  .ticket-record summary { line-height:1.5; }
}
.ticket-record summary { min-height:44px; padding:10px 0; box-sizing:border-box; }
.ticket-record .ticket-timeline-step time, .ticket-record .ticket-timeline-step div > span { display:block; line-height:1.6; }
.ticket-record button[data-ticket-action="close"] { font-weight:700; }
.ticket-cycle-heading { display:block; margin-bottom:8px; color:var(--accent, #13cbd3); }
.ticket-filters { display:flex; flex-wrap:wrap; gap:12px; margin:16px 0; }
.ticket-filters label { flex:1 1 180px; min-width:0; }
.ticket-filters input, .ticket-filters select { display:block; width:100%; box-sizing:border-box; min-height:44px; font-size:16px; }
.ticket-record[hidden] { display:none; }
.ticket-record .ticket-timeline-step > div { display:grid; grid-template-columns:minmax(0,1fr); gap:4px; padding-bottom:14px; }
.ticket-record .ticket-cycle-heading { padding-top:8px; border-top:1px solid #2b6672; margin-top:6px; }
.filter-empty { padding:14px; border:1px dashed #2b6672; border-radius:8px; }
.ticket-message { white-space:pre-wrap; overflow-wrap:anywhere; padding:14px; border:1px solid #2b6672; border-radius:8px; line-height:1.6; }
.ticket-message-staff { border-left:4px solid #20d7e3; background:#0b282d; }
.ticket-message-member { border-left:4px solid #e6c45b; background:#142024; }
.draft-settings { padding:16px; margin:16px 0; border:1px solid #2b6672; border-radius:10px; }
.draft-settings label { display:flex; align-items:center; gap:12px; min-height:44px; }
.draft-settings button { min-height:44px; }
.draft-settings p { line-height:1.5; }
.ticket-center input[type="file"], .ticket-record textarea { max-width:100%; box-sizing:border-box; }
.ticket-resolution { white-space:pre-wrap; overflow-wrap:anywhere; }
.ticket-next-action { border-left:3px solid #13cbd3; padding:12px; line-height:1.5; background:#10262d; }
:is(a,button,input,select,textarea,summary):focus-visible { outline:3px solid #ffd34f; outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media (max-width:400px) {
  .ticket-record .participation-controls { grid-template-columns:minmax(0,1fr); }
  .ticket-center :is(input,select,textarea) { font-size:16px; }
}