*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:#0b0d10;color:#e8edf2}a{text-decoration:none;color:inherit}body{min-height:100vh;background:radial-gradient(circle at top, rgba(163,122,58,.08), transparent 35%),linear-gradient(180deg,#0b0d10 0%,#0f1318 100%)}.page{width:100%;max-width:1320px;margin:0 auto;padding:24px}.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border:1px solid #2a313a;background:rgba(18,22,27,.78);border-radius:18px;gap:16px}.brand{font-size:22px;font-weight:700;color:#f4efe7}.nav{display:flex;gap:24px;color:#94a0ad;font-size:15px;flex-wrap:wrap}.nav a:hover{color:#e8edf2}.hero{padding:90px 0 50px}.hero-inner{max-width:760px}.eyebrow{color:#a37a3a;letter-spacing:3px;font-size:13px;margin-bottom:18px}.hero h1{margin:0;font-size:72px;line-height:1.05}.subtitle{margin-top:14px;font-size:24px;color:#b6c0cb}.desc{margin-top:22px;max-width:700px;font-size:17px;line-height:1.8;color:#94a0ad}.actions{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;border-radius:12px;font-weight:600;transition:.2s ease;border:1px solid #2a313a;cursor:pointer}.btn-primary{background:#a37a3a;color:#111317;border-color:#a37a3a}.btn-secondary{background:#171c22;color:#e8edf2}.simple-page{margin-top:40px;padding:40px;border:1px solid #2a313a;border-radius:18px;background:#12161b}.form-page{display:flex;justify-content:center;align-items:center;padding:60px 0}.form-card{width:100%;max-width:560px;background:#12161b;border:1px solid #2a313a;border-radius:20px;padding:32px}.form-card h1{margin-top:0;margin-bottom:24px}.form-box{display:flex;flex-direction:column;gap:12px}.form-box label{font-size:14px;color:#b6c0cb}.form-box input,.form-box select,.chat-send-form textarea{width:100%;padding:14px 16px;border-radius:12px;border:1px solid #2a313a;background:#171c22;color:#e8edf2;outline:none}.form-box input:focus,.form-box select:focus,.chat-send-form textarea:focus{border-color:#a37a3a}.form-tip{margin-top:18px;color:#94a0ad}.alert{padding:14px 16px;border-radius:12px;margin-bottom:18px;font-size:14px}.alert-error{background:rgba(122,58,58,.18);border:1px solid #7a3a3a;color:#f0c7c7}.alert-success{background:rgba(63,111,87,.18);border:1px solid #3f6f57;color:#c9f0db}.chat-shell{margin-top:24px;display:grid;grid-template-columns:280px 1fr;gap:18px}.qq-sidebar{display:flex;flex-direction:column;gap:16px}.qq-profile{display:flex;gap:14px;align-items:center;padding:20px;border:1px solid #2a313a;border-radius:18px;background:#12161b}.qq-avatar{width:52px;height:52px;border-radius:50%;background:#a37a3a;color:#111317;display:flex;align-items:center;justify-content:center;font-weight:700}.qq-title{font-size:18px;font-weight:700}.qq-sub{font-size:13px;color:#94a0ad;margin-top:4px}.chat-side-card{background:#12161b;border:1px solid #2a313a;border-radius:18px;padding:22px}.qq-main{display:flex;flex-direction:column;gap:12px}.qq-header{padding:16px 20px;border:1px solid #2a313a;border-radius:18px;background:#12161b}.chat-main-box{background:#12161b;border:1px solid #2a313a;border-radius:18px;padding:20px;display:flex;flex-direction:column;height:78vh;min-height:620px;max-height:78vh;overflow:hidden}.qq-box{padding:0}.chat-messages{flex:1;display:flex;flex-direction:column;gap:14px;overflow-y:auto;padding:18px 18px 10px 18px}.chat-messages::-webkit-scrollbar{width:8px}.chat-messages::-webkit-scrollbar-track{background:#12161b;border-radius:10px}.chat-messages::-webkit-scrollbar-thumb{background:#2a313a;border-radius:10px}.chat-messages::-webkit-scrollbar-thumb:hover{background:#3a4552}.message-row{display:flex;gap:10px;align-items:flex-start}.row-right{justify-content:flex-end}.row-right .avatar-mini{order:2}.row-right .message-card{order:1}.avatar-mini{width:34px;height:34px;border-radius:50%;background:#2a313a;display:flex;align-items:center;justify-content:center;font-size:12px;color:#e8edf2;flex-shrink:0}.message-card{background:#171c22;border:1px solid #2a313a;border-radius:14px;padding:14px 16px;max-width:min(72%,680px)}.message-user{border-color:#a37a3a}.message-staff{border-color:#3b4652}.message-meta{font-size:12px;color:#94a0ad;margin-bottom:8px}.message-text{line-height:1.7;color:#e8edf2;word-break:break-word}.chat-send-form{display:flex;flex-direction:column;gap:12px;border-top:1px solid #2a313a;padding:16px 18px;flex-shrink:0;background:#12161b}.qq-input-area{background:#161b21}.send-row{display:flex;justify-content:space-between;align-items:center;gap:16px}.qq-tip{font-size:13px;color:#94a0ad}.chat-send-form textarea{resize:vertical;background:#171c22}.chat-image{max-width:320px;border-radius:12px;border:1px solid #2a313a}.chat-video{max-width:420px;border-radius:12px;border:1px solid #2a313a}.admin-table{width:100%;border-collapse:collapse;margin-top:20px}.admin-table th,.admin-table td{border:1px solid #2a313a;padding:12px;text-align:left}.admin-table th{background:#171c22}.order-card{background:#171c22;border:1px solid #2a313a;padding:20px;border-radius:16px;margin-bottom:16px}.status-tag{display:inline-block;padding:4px 10px;border-radius:999px;background:#171c22;border:1px solid #a37a3a;color:#f3e0bd}.pay-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}@media (max-width:980px){.chat-shell{grid-template-columns:1fr}.hero h1{font-size:46px}.message-card{max-width:100%}}



/* ===== Responsive upgrade ===== */

img, video {
  max-width: 100%;
  height: auto;
}

.page {
  width: 100%;
}

.topbar {
  flex-wrap: wrap;
}

.nav {
  flex-wrap: wrap;
  row-gap: 10px;
}

.form-box input,
.form-box select,
.chat-send-form textarea,
.btn {
  font-size: 16px;
}

.admin-table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

.order-card,
.chat-side-card,
.form-card,
.simple-page,
.chat-main-box,
.qq-header,
.qq-profile {
  overflow: hidden;
}

.chat-image {
  width: auto;
  max-width: 100%;
}

.chat-video {
  width: 100%;
  max-width: 100%;
}

.message-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 1100px) {
  .page {
    padding: 18px;
  }

  .hero {
    padding: 56px 0 28px;
  }

  .hero h1 {
    font-size: 52px;
  }

  .subtitle {
    font-size: 22px;
  }

  .desc {
    font-size: 16px;
  }

  .chat-shell {
    grid-template-columns: 240px 1fr;
    gap: 14px;
  }

  .chat-page {
    grid-template-columns: 240px 1fr;
    gap: 14px;
  }

  .message-card {
    max-width: min(82%, 620px);
  }
}

@media (max-width: 900px) {
  .page {
    padding: 14px;
  }

  .topbar {
    align-items: flex-start;
    padding: 16px;
  }

  .brand {
    font-size: 20px;
  }

  .nav {
    width: 100%;
    gap: 14px;
    font-size: 14px;
  }

  .hero {
    padding: 40px 0 20px;
  }

  .hero h1 {
    font-size: 40px;
    line-height: 1.12;
  }

  .subtitle {
    font-size: 19px;
  }

  .desc {
    font-size: 15px;
    line-height: 1.7;
  }

  .actions {
    gap: 12px;
  }

  .btn {
    width: 100%;
    min-height: 46px;
  }

  .form-card {
    padding: 22px;
    border-radius: 16px;
  }

  .simple-page {
    padding: 22px;
  }

  .chat-shell,
  .chat-page {
    grid-template-columns: 1fr;
  }

  .qq-sidebar,
  .chat-left {
    order: 2;
  }

  .qq-main,
  .chat-main-box {
    order: 1;
  }

  .chat-main-box,
  .qq-box {
    height: 68vh;
    min-height: 520px;
    max-height: 68vh;
  }

  .qq-header {
    padding: 14px 16px;
  }

  .message-row {
    gap: 8px;
  }

  .message-card {
    max-width: 100%;
    padding: 12px 14px;
  }

  .message-user,
  .message-staff {
    margin-left: 0;
    margin-right: 0;
  }

  .avatar-mini {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .chat-send-form {
    padding: 14px;
  }

  .send-row {
    flex-direction: column;
    align-items: stretch;
  }

  .qq-tip {
    font-size: 12px;
  }

  .admin-table th,
  .admin-table td {
    padding: 10px;
    font-size: 14px;
  }
}

@media (max-width: 640px) {
  .page {
    padding: 10px;
  }

  .topbar {
    padding: 14px;
    border-radius: 14px;
  }

  .brand {
    font-size: 18px;
  }

  .nav {
    gap: 10px 12px;
    font-size: 13px;
  }

  .hero h1 {
    font-size: 32px;
  }

  .subtitle {
    font-size: 17px;
  }

  .desc {
    font-size: 14px;
  }

  .hero-inner {
    max-width: 100%;
  }

  .simple-page,
  .chat-side-card,
  .qq-profile,
  .qq-header,
  .form-card {
    padding: 16px;
    border-radius: 14px;
  }

  .chat-main-box,
  .qq-box {
    height: 64vh;
    min-height: 460px;
    max-height: 64vh;
    border-radius: 14px;
  }

  .chat-messages {
    padding: 12px;
    gap: 10px;
  }

  .message-card {
    border-radius: 12px;
    padding: 10px 12px;
  }

  .message-meta {
    font-size: 11px;
  }

  .chat-send-form textarea {
    min-height: 96px;
  }

  .btn {
    padding: 12px 16px;
    border-radius: 10px;
  }

  .order-card {
    padding: 16px;
    border-radius: 14px;
  }

  .admin-table {
    font-size: 13px;
  }
}