/* HX Electric Kundenportal - Styles */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background:#060606; color:#e8e8e8; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:60px;
}
a { color:#FFD700; text-decoration:none; }
a:hover { text-decoration:underline; }
code { font-family:'JetBrains Mono', monospace; background:#1a1a1a; padding:2px 6px; font-size:0.9em; border-radius:2px; }
.muted { color:#888; font-weight:normal; }

/* ===== AUTH PAGES ===== */
.auth-page { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; position:relative; padding-bottom:20px; }
.auth-bg { position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,215,0,0.08), transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(255,215,0,0.05), transparent 50%),
    #060606;
}
.auth-box { position:relative; z-index:1; width:100%; max-width:420px;
  background:rgba(15,15,15,0.9); border:1px solid rgba(255,215,0,0.2);
  padding:40px 32px; backdrop-filter:blur(10px);
}
.auth-box-wide { max-width:480px; }
.auth-header { text-align:center; margin-bottom:28px; }
.auth-logo { width:56px; height:56px; margin-bottom:16px; filter:drop-shadow(0 0 12px rgba(255,215,0,0.4)); }
.auth-header h1 { font-size:28px; font-weight:900; letter-spacing:0.02em; }
.auth-header h1 span { color:#FFD700; }
.auth-sub { color:#888; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; margin-top:6px; font-family:'JetBrains Mono', monospace; }

.auth-error { background:rgba(255,74,28,0.1); border:1px solid rgba(255,74,28,0.4); color:#FF4A1C; padding:10px 14px; margin-bottom:16px; font-size:13px; }
.auth-field { margin-bottom:14px; }
.auth-field label { display:block; margin-bottom:6px; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#888; font-family:'JetBrains Mono', monospace; }
.auth-field input { width:100%; padding:11px 14px; background:#0a0a0a; border:1px solid #333; color:#fff; font-size:15px; outline:none; transition:border-color .2s; }
.auth-field input:focus { border-color:#FFD700; }
.auth-check { display:flex; gap:10px; align-items:flex-start; margin:12px 0 16px; font-size:12px; color:#aaa; }
.auth-check input { margin-top:3px; flex-shrink:0; }
.auth-check a { color:#FFD700; }

.auth-btn { width:100%; padding:14px; margin-top:8px; background:#FFD700; color:#000; border:none; cursor:pointer; font-size:14px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; transition:background .2s; }
.auth-btn:hover { background:#FFE95C; }
.auth-footer { margin-top:20px; text-align:center; font-size:13px; color:#888; }

/* ===== MAIN NAV (Desktop) ===== */
.main-nav {
  background:#0f0f0f; border-bottom:1px solid #222;
  padding:0 20px; height:60px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  position:sticky; top:0; z-index:100;
}
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:15px; color:#fff !important; text-decoration:none !important; }
.brand img { width:26px; height:26px; }
.brand em { color:#FFD700; font-style:normal; font-size:0.8em; letter-spacing:0.1em; }

.nav-links { display:flex; gap:4px; }
.nav-links a { color:#aaa; font-size:13px; padding:8px 14px; transition:color .2s; text-decoration:none; border-radius:2px; }
.nav-links a:hover { color:#fff; background:#1a1a1a; }
.nav-links a.active { color:#FFD700; }

.nav-right { display:flex; align-items:center; gap:14px; }
.nav-balance { text-align:right; padding:4px 12px; border-left:1px solid #222; padding-left:14px; }
.bal-label { display:block; font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:#888; font-family:'JetBrains Mono', monospace; }
.bal-num { font-size:16px; font-weight:800; color:#FFD700; }
.bal-num em { font-size:0.65em; font-style:normal; color:#888; }
.nav-logout { color:#FF4A1C !important; font-size:12px; padding:6px 10px; }

@media (max-width:860px) {
  .nav-links { display:none; }
  .main-nav { padding:0 16px; height:56px; }
  .nav-balance { padding-left:8px; padding-right:0; }
  .bal-num { font-size:14px; }
}

/* Mobile Nav (bottom) */
.mobile-nav { display:none; }
@media (max-width:860px) {
  .mobile-nav {
    display:grid; grid-template-columns:repeat(5,1fr);
    position:fixed; bottom:0; left:0; right:0;
    background:#0f0f0f; border-top:1px solid #222;
    z-index:100; padding:6px 0;
  }
  .mobile-nav a {
    text-align:center; padding:8px 2px; font-size:18px;
    color:#888; text-decoration:none !important; transition:color .15s;
    position:relative;
  }
  .mobile-nav a.active { color:#FFD700; }
  .m-bal { display:block; font-size:10px; font-weight:700; margin-top:2px; }
  body { padding-bottom:70px; }
}

/* ===== MAIN CONTENT ===== */
.main { max-width:1100px; margin:0 auto; padding:28px 20px 60px; }
.page-head { margin-bottom:24px; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:12px; }
.page-head h1 { font-size:26px; font-weight:800; letter-spacing:-0.01em; }
.page-meta { font-size:12px; color:#888; font-family:'JetBrains Mono', monospace; letter-spacing:0.1em; text-transform:uppercase; }

.section-title { font-size:11px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:#888; font-family:'JetBrains Mono', monospace; margin:32px 0 14px; }

/* Welcome Banner */
.welcome-banner {
  background:linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,215,0,0.05));
  border:1px solid rgba(255,215,0,0.4);
  padding:24px 28px; margin-bottom:24px;
}
.welcome-banner h2 { font-size:22px; margin-bottom:8px; }
.welcome-banner p { color:#ccc; margin-bottom:16px; }

/* Credit Balance Hero */
.balance-hero {
  background:#0f0f0f; border:1px solid #222;
  padding:32px; margin-bottom:32px;
  display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center;
  position:relative; overflow:hidden;
}
.balance-hero::before {
  content:''; position:absolute; top:0; right:0; width:300px; height:300px;
  background:radial-gradient(circle, rgba(255,215,0,0.1), transparent 70%);
  pointer-events:none;
}
.balance-main { position:relative; z-index:1; }
.balance-label { font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:#888; font-family:'JetBrains Mono', monospace; margin-bottom:8px; }
.balance-amount { font-size:56px; font-weight:900; color:#FFD700; line-height:1; letter-spacing:-0.02em; }
.balance-amount span { font-size:0.35em; color:#888; font-weight:500; margin-left:8px; letter-spacing:0.15em; text-transform:uppercase; }
.balance-eur { font-size:14px; color:#888; margin-top:6px; font-family:'JetBrains Mono', monospace; }
.balance-actions { display:flex; flex-direction:column; gap:8px; position:relative; z-index:1; }

@media (max-width:640px) {
  .balance-hero { grid-template-columns:1fr; padding:24px; }
  .balance-amount { font-size:44px; }
}

/* Buttons */
.btn { display:inline-block; padding:12px 20px; background:#222; border:1px solid #333; color:#fff !important; font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; transition:all .2s; font-family:inherit; text-decoration:none !important; text-align:center; }
.btn:hover { border-color:#FFD700; color:#FFD700 !important; }
.btn-gold { background:#FFD700; color:#000 !important; border-color:#FFD700; }
.btn-gold:hover { background:#FFE95C; color:#000 !important; }
.btn-ghost { background:transparent; border-color:#444; }
.btn-large { padding:16px 28px; font-size:14px; width:100%; }
.btn-paypal { background:#003087; color:#fff !important; border-color:#003087; }
.btn-paypal:hover { background:#001f5c; color:#fff !important; }
.btn.disabled { opacity:0.4; pointer-events:none; }

/* Services Grid */
.service-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
@media (max-width:720px) { .service-grid { grid-template-columns:1fr; } }
.service-card { background:#0f0f0f; border:1px solid #222; padding:20px 22px; transition:border-color .2s; }
.service-card:hover { border-color:#FFD70050; }
.service-name { font-size:16px; font-weight:700; margin-bottom:6px; }
.service-desc { font-size:12px; color:#888; margin-bottom:14px; min-height:32px; }
.service-price { font-size:22px; font-weight:800; color:#FFD700; }
.service-price span { font-size:0.5em; color:#888; font-weight:500; margin-left:6px; letter-spacing:0.1em; }

/* Service-Overview auf Dashboard */
.service-overview { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; }
.service-cat-icon { font-size:28px; margin-bottom:10px; }

/* Order List (Dashboard) */
.order-list { display:flex; flex-direction:column; gap:6px; }
.order-row {
  display:grid; grid-template-columns:1fr auto 30px; gap:16px; align-items:center;
  background:#0f0f0f; border:1px solid #222;
  padding:14px 18px; color:#e8e8e8 !important; text-decoration:none !important;
  transition:border-color .2s, background .2s;
}
.order-row:hover { border-color:#FFD700; background:#141414; }
.order-title { font-size:14px; font-weight:600; }
.order-sub { font-size:11px; color:#888; font-family:'JetBrains Mono', monospace; margin-top:2px; }
.order-arrow { color:#666; font-size:18px; }

.link-arrow { color:#FFD700; font-size:13px; font-weight:600; }

/* Status Pills */
.pill { display:inline-block; padding:4px 10px; border:1px solid; font-size:10px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; font-family:'JetBrains Mono', monospace; }

/* Empty State */
.empty { padding:60px 20px; text-align:center; color:#888; background:#0f0f0f; border:1px dashed #333; }

/* Messages */
.msg { padding:14px 18px; margin-bottom:20px; font-size:14px; border:1px solid; line-height:1.5; }
.msg-ok   { background:rgba(38,217,127,0.08); border-color:rgba(38,217,127,0.3); color:#26d97f; }
.msg-err  { background:rgba(255,74,28,0.08); border-color:rgba(255,74,28,0.3); color:#FF4A1C; }
.msg-warn { background:rgba(255,215,0,0.08); border-color:rgba(255,215,0,0.3); color:#FFD700; }

/* Info Box */
.info-box { background:#111; border:1px solid #222; padding:14px 18px; font-size:13px; color:#ccc; line-height:1.6; }
.info-box strong { color:#fff; }
.info-box a { color:#FFD700; }

/* Panel */
.panel { background:#0f0f0f; border:1px solid #222; padding:22px 24px; }
.panel h3 { font-size:12px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:#FFD700; margin-bottom:14px; font-family:'JetBrains Mono', monospace; }
.panel h3:not(:first-child) { margin-top:24px; }

/* Forms */
.field { margin-bottom:14px; }
.field label { display:block; margin-bottom:5px; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:#888; font-family:'JetBrains Mono', monospace; }
.field input, .field select, .field textarea {
  width:100%; padding:11px 13px; background:#0a0a0a; border:1px solid #333;
  color:#fff; font-size:14px; font-family:inherit; outline:none; transition:border-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color:#FFD700; }
.field input:disabled { opacity:0.5; cursor:not-allowed; }
.field textarea { resize:vertical; min-height:80px; }
.field input[type="file"] { padding:8px; cursor:pointer; }
.help { font-size:12px; color:#888; line-height:1.6; margin-bottom:8px; }
.help.small { font-size:11px; }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px) { .form-grid { grid-template-columns:1fr; } }

.upload-form { max-width:720px; }
.form-section { background:#0f0f0f; border:1px solid #222; padding:22px 24px; margin-bottom:16px; }
.form-section h3 { font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:16px; color:#FFD700; }

/* Service Select */
.service-select { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:720px) { .service-select { grid-template-columns:1fr; } }
.svc-option { cursor:pointer; }
.svc-option input { display:none; }
.svc-box { background:#0a0a0a; border:1px solid #333; padding:16px; transition:all .2s; }
.svc-option:hover .svc-box { border-color:#555; }
.svc-option input:checked + .svc-box { border-color:#FFD700; background:rgba(255,215,0,0.05); }
.svc-title { font-size:14px; font-weight:700; margin-bottom:4px; }
.svc-desc { font-size:11px; color:#888; margin-bottom:10px; line-height:1.4; }
.svc-price { font-size:18px; font-weight:800; color:#FFD700; }
.svc-price span { font-size:0.6em; color:#888; font-weight:500; letter-spacing:0.1em; margin-left:4px; }

/* Services — Multi-Select mit Kategorien */
.svc-category { margin-bottom:22px; }
.svc-cat-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid #222; }
.svc-cat-icon { font-size:20px; }
.svc-cat-label { font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#FFD700; font-family:'JetBrains Mono', monospace; }

.svc-checkbox-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:8px; }
@media (max-width:640px) { .svc-checkbox-grid { grid-template-columns:1fr; } }

.svc-check { cursor:pointer; }
.svc-check input { display:none; }
.svc-check-box { background:#0a0a0a; border:1px solid #2a2a2a; padding:12px 14px; transition:all .15s; position:relative; }
.svc-check-box::before {
  content:''; position:absolute; top:12px; right:12px; width:16px; height:16px;
  border:1.5px solid #444; border-radius:3px; background:#0a0a0a; transition:all .15s;
}
.svc-check:hover .svc-check-box { border-color:#555; }
.svc-check input:checked + .svc-check-box { border-color:#FFD700; background:rgba(255,215,0,0.06); }
.svc-check input:checked + .svc-check-box::before {
  background:#FFD700; border-color:#FFD700;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}
.svc-check-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; padding-right:22px; }
.svc-check-title { font-size:13px; font-weight:600; color:#fff; line-height:1.3; }
.svc-check-price { font-size:14px; font-weight:800; color:#FFD700; white-space:nowrap; font-family:'JetBrains Mono', monospace; }
.svc-check-price em { font-size:0.6em; font-style:normal; color:#888; margin-left:3px; font-weight:500; }
.svc-check-desc { font-size:11px; color:#888; margin-top:4px; line-height:1.4; padding-right:22px; }

/* Live Summe */
.svc-total { background:#0a0a0a; border:1px solid #FFD70050; padding:16px 20px; margin-top:20px; }
.svc-total-line { display:flex; justify-content:space-between; padding:4px 0; font-size:13px; color:#ccc; }
.svc-total-line.svc-total-big { font-size:18px; font-weight:800; color:#FFD700; padding-top:10px; margin-top:6px; border-top:1px solid #222; }
.svc-total-line.svc-total-after { font-size:12px; color:#888; padding-top:8px; }
.svc-total-label { font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; }

/* Profile */
.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:820px) { .profile-grid { grid-template-columns:1fr; } }

.info-table { width:100%; }
.info-table th, .info-table td { padding:8px 0; text-align:left; border-bottom:1px solid #1a1a1a; font-size:13px; }
.info-table th { color:#888; font-weight:500; width:35%; font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; }

/* Credit Packages */
.pkg-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
@media (max-width:820px) { .pkg-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:480px) { .pkg-grid { grid-template-columns:1fr; } }
.pkg-card { display:block; background:#0f0f0f; border:1px solid #222; padding:22px 20px; text-align:center; transition:all .2s; color:#fff !important; text-decoration:none !important; }
.pkg-card:hover { border-color:#FFD700; background:#141414; transform:translateY(-2px); }
.pkg-note { font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:#FFD700; font-family:'JetBrains Mono', monospace; margin-bottom:10px; }
.pkg-credits { font-size:28px; font-weight:900; color:#FFD700; line-height:1; }
.pkg-credits span { font-size:0.4em; color:#888; font-weight:500; margin-left:4px; letter-spacing:0.1em; }
.pkg-price { font-size:14px; color:#ccc; margin:8px 0 14px; }
.pkg-cta { font-size:11px; color:#888; letter-spacing:0.14em; text-transform:uppercase; font-family:'JetBrains Mono', monospace; }

/* Bonus-Pakete hervorheben */
.pkg-card.pkg-bonus { border-color:rgba(255,215,0,0.4); background:linear-gradient(135deg, #0f0f0f, #1a1505); position:relative; }
.pkg-card.pkg-bonus:hover { border-color:#FFD700; }
.pkg-badge {
  position:absolute; top:-8px; right:10px;
  background:#FFD700; color:#000;
  font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:800;
  letter-spacing:0.1em; padding:3px 8px;
  box-shadow:0 2px 10px rgba(255,215,0,0.4);
}

/* Topup Flow */
.topup-flow { display:flex; flex-direction:column; gap:16px; max-width:720px; }
.topup-step { display:grid; grid-template-columns:40px 1fr; gap:16px; background:#0f0f0f; border:1px solid #222; padding:22px 24px; }
.step-num { width:32px; height:32px; background:#FFD700; color:#000; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:14px; }
.step-body h3 { font-size:15px; font-weight:700; margin-bottom:10px; }

.pkg-selected { display:flex; align-items:baseline; gap:14px; margin-top:6px; }
.pkg-big { font-size:32px; font-weight:900; color:#FFD700; line-height:1; }
.pkg-big span { font-size:0.4em; color:#888; font-weight:500; margin-left:6px; }
.pkg-eur { font-size:18px; color:#ccc; }

.code-box { background:#0a0a0a; border:1px solid #FFD70050; padding:16px 18px; display:flex; align-items:center; gap:12px; margin:14px 0; flex-wrap:wrap; }
.code-label { font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:#FFD700; font-family:'JetBrains Mono', monospace; flex-shrink:0; }
.code-value { flex:1; font-family:'JetBrains Mono', monospace; font-size:16px; color:#fff; font-weight:600; letter-spacing:0.05em; word-break:break-all; min-width:150px; }
.code-copy { background:transparent; border:1px solid #333; color:#ccc; padding:6px 12px; font-size:11px; cursor:pointer; font-family:inherit; letter-spacing:0.1em; text-transform:uppercase; transition:all .2s; }
.code-copy:hover { border-color:#FFD700; color:#FFD700; }

/* Transactions */
.tx-list { display:flex; flex-direction:column; gap:4px; }
.tx-row { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:#0f0f0f; border:1px solid #222; }
.tx-note { font-size:13px; color:#fff; }
.tx-date { font-size:11px; color:#888; font-family:'JetBrains Mono', monospace; margin-top:2px; letter-spacing:0.05em; }
.tx-amount { font-size:16px; font-weight:700; font-family:'JetBrains Mono', monospace; }
.tx-amount span { font-size:0.6em; opacity:0.6; margin-left:3px; }

/* Order Cards (full view) */
.order-list-full { display:flex; flex-direction:column; gap:12px; }
.order-card { background:#0f0f0f; border:1px solid #222; }
.order-card-head { display:flex; justify-content:space-between; align-items:flex-start; padding:18px 22px; border-bottom:1px solid #222; gap:12px; flex-wrap:wrap; }
.order-card-title { font-size:16px; font-weight:700; margin-bottom:4px; }
.order-card-sub { font-size:12px; color:#888; }
.order-card-body { padding:14px 22px; }
.oc-row { display:flex; justify-content:space-between; padding:6px 0; font-size:13px; border-bottom:1px solid #1a1a1a; }
.oc-row:last-child { border-bottom:none; }
.oc-key { color:#888; font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; }
.oc-val { color:#e8e8e8; text-align:right; }
.oc-notes .oc-val { text-align:left; max-width:60%; font-size:12px; }
.order-card-download { background:rgba(38,217,127,0.08); border-top:1px solid rgba(38,217,127,0.25); padding:16px 22px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.order-card-hint { padding:14px 22px; background:#0a0a0a; border-top:1px solid #222; font-size:13px; color:#888; }

/* ===== SUPPORT / CHAT ===== */
.contact-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:32px; }
@media (max-width:640px) { .contact-options { grid-template-columns:1fr; } }
.contact-opt {
  display:grid; grid-template-columns:48px 1fr 20px; gap:14px; align-items:center;
  padding:18px 22px; background:#0f0f0f; border:1px solid #222;
  color:#fff !important; text-decoration:none !important; transition:all .2s;
}
.contact-opt:hover { border-color:#FFD700; }
.contact-wa:hover { border-color:#25d366; }
.contact-opt-icon { font-size:28px; line-height:1; }
.contact-opt-title { font-size:15px; font-weight:700; }
.contact-opt-sub { font-size:12px; color:#888; margin-top:3px; }
.contact-opt-arrow { color:#666; font-size:18px; text-align:right; }

/* Tickets List */
.ticket-list { display:flex; flex-direction:column; gap:6px; margin-bottom:32px; }
.ticket-row {
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  background:#0f0f0f; border:1px solid #222; padding:14px 18px;
  color:#fff !important; text-decoration:none !important; transition:all .2s;
  flex-wrap:wrap;
}
.ticket-row:hover { border-color:#FFD700; background:#141414; }
.ticket-unread { border-color:#FF4A1C60; background:#1a0f0c; }
.ticket-main { flex:1; min-width:0; }
.ticket-subj { font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ticket-badge { background:#FF4A1C; color:#fff; font-size:9px; padding:2px 6px; letter-spacing:0.1em; font-family:'JetBrains Mono', monospace; }
.ticket-meta { font-size:11px; color:#888; margin-top:4px; }

/* Ticket Form */
.ticket-form { max-width:720px; background:#0f0f0f; border:1px solid #222; padding:24px 28px; }

/* Ticket Detail */
.ticket-detail { max-width:900px; }
.ticket-detail-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid #222; gap:12px; flex-wrap:wrap; }
.ticket-detail-head h1 { font-size:22px; margin-bottom:4px; }

/* Chat Thread */
.chat-thread { margin-bottom:20px; padding:20px 0; max-height:600px; overflow-y:auto; }
.chat-msg { display:flex; margin-bottom:16px; }
.chat-msg-me { justify-content:flex-end; }
.chat-msg-them { justify-content:flex-start; }
.chat-bubble {
  max-width:78%;
  padding:14px 18px;
  border:1px solid;
}
.chat-msg-me .chat-bubble { background:rgba(255,215,0,0.08); border-color:#FFD70040; }
.chat-msg-them .chat-bubble { background:#1a1a1a; border-color:#333; }
.chat-author { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:#FFD700; margin-bottom:6px; font-family:'JetBrains Mono', monospace; }
.chat-msg-them .chat-author { color:#4a9eff; }
.chat-text { font-size:14px; line-height:1.55; color:#e8e8e8; white-space:pre-wrap; }
.chat-ts { font-size:10px; color:#666; margin-top:8px; font-family:'JetBrains Mono', monospace; letter-spacing:0.05em; }
.chat-system { text-align:center; color:#666; font-size:11px; margin:12px 0; font-family:'JetBrains Mono', monospace; letter-spacing:0.1em; }

/* Reply Form */
.chat-reply { background:#0f0f0f; border:1px solid #222; padding:18px 20px; }
.chat-reply textarea { width:100%; background:#0a0a0a; border:1px solid #333; color:#fff; padding:12px 14px; font-family:inherit; font-size:14px; outline:none; resize:vertical; min-height:80px; transition:border-color .2s; }
.chat-reply textarea:focus { border-color:#FFD700; }
.chat-closed { padding:20px; text-align:center; background:#0a0a0a; border:1px dashed #333; color:#888; font-size:13px; }
.btn-sm { padding:6px 12px; font-size:11px; }