:root{
  --bg:#07080b;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.04);
  --stroke:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.65);
  --muted2:rgba(255,255,255,.45);
  --accent:#ff7a00;
  --accent2:#ffa24a;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}

.hd-shell{min-height:100%;display:flex;flex-direction:column}

.hd-topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--stroke);background:rgba(0,0,0,.55);backdrop-filter:blur(12px)}
.hd-brand{display:flex;align-items:center;gap:10px}
.hd-badge{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,rgba(255,122,0,.25),rgba(255,122,0,.08));border:1px solid rgba(255,122,0,.35);font-weight:800;letter-spacing:.4px}
.hd-brandText{font-weight:700;letter-spacing:.2px}
.hd-topbarRight{display:flex;align-items:center;gap:10px}
.hd-topbarLabel{font-size:13px;color:var(--muted)}

.hd-container{width:100%;max-width:1100px;margin:0 auto;padding:22px 18px 34px}

.hd-grid{display:grid;gap:16px}
@media (min-width: 900px){
  .hd-grid-2{grid-template-columns: 1fr 1.1fr}
}

.hd-card{border:1px solid var(--stroke);background:var(--card);border-radius:22px;padding:18px}
.hd-cardTitle{font-size:18px;font-weight:700;margin:0 0 8px}
.hd-cardHint{font-size:13px;color:var(--muted);margin:0 0 14px;line-height:1.45}

.hd-row{display:grid;gap:10px}
.hd-row-2{grid-template-columns: 1fr 1fr}

.hd-input,.hd-select,.hd-textarea{
  width:100%;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.35);color:var(--text);
  border-radius:14px;padding:12px 12px;outline:none
}
.hd-input:focus,.hd-select:focus,.hd-textarea:focus{border-color:rgba(255,122,0,.55);box-shadow:0 0 0 3px rgba(255,122,0,.18)}
.hd-textarea{min-height:140px;resize:vertical}
.hd-label{font-size:12px;color:var(--muted2);margin:6px 0 6px}

.hd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;padding:12px 14px;font-weight:700;font-size:13px;border:1px solid transparent;cursor:pointer;transition: .15s transform, .15s opacity, .15s background}
.hd-btn:hover{transform:translateY(-1px)}
.hd-btn:active{transform:translateY(0)}
.hd-btn-primary{background:var(--accent);color:#000}
.hd-btn-primary:hover{opacity:.95}
.hd-btn-ghost{background:transparent;border-color:rgba(255,255,255,.16);color:var(--text)}
.hd-btn-ghost:hover{background:rgba(255,255,255,.06)}
.hd-btn-danger{background:transparent;border-color:rgba(255,80,80,.35);color:rgba(255,190,190,.95)}
.hd-btn-danger:hover{background:rgba(255,80,80,.08)}

.hd-split{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.hd-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);font-size:12px;color:var(--muted)}
.hd-pill b{color:var(--text)}

.hd-alert{border-radius:16px;border:1px solid rgba(255,122,0,.35);background:rgba(255,122,0,.10);padding:12px 12px;color:rgba(255,255,255,.88);font-size:13px;line-height:1.45}
.hd-alert-error{border-color:rgba(255,80,80,.35);background:rgba(255,80,80,.10)}

/* Chat */
.hd-chat{display:flex;flex-direction:column;gap:12px}
.hd-messages{border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.35);border-radius:18px;padding:14px;min-height:320px;max-height:420px;overflow:auto}
.hd-msg{display:flex;flex-direction:column;gap:4px;margin:10px 0}
.hd-msgMeta{font-size:11px;color:var(--muted2)}
.hd-bubble{display:inline-block;max-width:82%;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);line-height:1.35}
.hd-msg.user{align-items:flex-start}
.hd-msg.staff{align-items:flex-end}
.hd-msg.staff .hd-bubble{background:rgba(255,122,0,.12);border-color:rgba(255,122,0,.25)}

.hd-chatForm{display:flex;gap:10px;align-items:flex-end}
.hd-chatForm .hd-textarea{min-height:70px;max-height:160px}

.hd-table{width:100%;border-collapse:separate;border-spacing:0 10px}
.hd-table th{font-size:12px;color:var(--muted2);text-align:left;font-weight:600;padding:0 8px}
.hd-tr{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.hd-tr td{padding:12px 10px;font-size:13px;color:var(--text)}
.hd-tr td:first-child{border-radius:14px 0 0 14px}
.hd-tr td:last-child{border-radius:0 14px 14px 0}
.hd-link{color:rgba(255,210,170,.95)}
.hd-link:hover{text-decoration:underline}

.hd-footer{margin-top:auto;border-top:1px solid var(--stroke);background:rgba(0,0,0,.35)}
.hd-footerInner{max-width:1100px;margin:0 auto;padding:16px 18px;font-size:12px;color:var(--muted2)}