:root {
  --bg: #0f1115;
  --panel: #151924;
  --border: #262b39;
  --text: #f6f7fb;
  --muted: #9da8bb;
  --primary: #5b8cff;
  --success: #2ecc71;
  --error: #ff4d4f;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.site-header {
  border-bottom: 1px solid var(--border);
  background: #0b0d13;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}

.logo {
  font-weight: 700;
}

nav a {
  color: var(--text);
  text-decoration: none;
  margin-right: 16px;
}

nav .balance {
  margin-right: 16px;
  color: var(--success);
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
}

/* 充值页面优化样式 */
.recharge-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 余额卡片 */
.balance-card {
  padding: 20px 24px;
}

.balance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.balance-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.balance-label {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}

.balance-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--success);
  line-height: 1;
}

.balance-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(91, 140, 255, 0.1);
  border: 1px solid rgba(91, 140, 255, 0.2);
  border-radius: 8px;
  font-size: 13px;
  color: var(--muted);
}

.balance-tip svg {
  flex-shrink: 0;
  color: var(--primary);
}

/* 错误消息 */
.error-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 77, 79, 0.1);
  border: 1px solid rgba(255, 77, 79, 0.3);
  border-radius: 8px;
}

.error-message svg {
  flex-shrink: 0;
  color: var(--error);
  margin-top: 2px;
}

.error-message strong {
  display: block;
  color: var(--error);
  margin-bottom: 4px;
}

.error-message p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* 充值容器 */
.recharge-container {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  align-items: start;
}

/* 表单卡片 */
.recharge-form-card {
  padding: 24px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 20px 0;
  color: var(--text);
}

/* 金额选择区域 */
.amount-section {
  margin-bottom: 24px;
}

.amount-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.amount-card {
  position: relative;
  padding: 18px 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.amount-card:hover {
  border-color: var(--primary);
  background: rgba(91, 140, 255, 0.05);
  transform: translateY(-2px);
}

.amount-card.active {
  border-color: var(--primary);
  background: rgba(91, 140, 255, 0.15);
  box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.1);
}

.amount-card.custom {
  grid-column: span 3;
}

.amount-value {
  display: block;
}

.custom-amount-box {
  margin-top: 12px;
}

.custom-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  transition: border-color 0.2s;
}

.custom-input:focus {
  outline: none;
  border-color: var(--primary);
}

/* 表单区域 */
.form-section {
  margin-bottom: 24px;
}

.form-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 10px;
}

.label-optional {
  color: var(--muted);
  font-weight: 400;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  transition: border-color 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary);
}

/* 支付方式 */
.payment-method-section {
  margin-bottom: 24px;
}

.payment-method {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.method-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  flex: 1;
  min-width: 140px;
  justify-content: center;
}

.method-item:hover {
  border-color: var(--primary);
  background: rgba(91, 140, 255, 0.05);
}

.method-item.active {
  border-color: var(--primary);
  background: rgba(91, 140, 255, 0.1);
  color: var(--primary);
}

.method-item svg {
  flex-shrink: 0;
}

/* 表单操作 */
.form-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-primary {
  width: 100%;
  padding: 14px 24px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary:hover {
  background: #4a7aff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(91, 140, 255, 0.3);
}

.btn-primary:active {
  transform: translateY(0);
}

.form-message {
  min-height: 20px;
  font-size: 13px;
  text-align: center;
  transition: color 0.2s;
}

.form-message[data-state="error"] {
  color: var(--error);
}

.form-message[data-state="success"] {
  color: var(--success);
}

/* 二维码区域容器 */
.qr-section {
  position: sticky;
  top: 24px;
  height: fit-content;
}

/* 二维码卡片 */
.qr-card {
  padding: 24px;
}

.qr-container {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.qr-box {
  width: 200px;
  height: 200px;
  background: #fff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.qr-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 订单信息 */
.order-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--bg);
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.info-label {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}

.info-value {
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
  text-align: right;
}

.info-value.amount {
  font-size: 20px;
  color: var(--primary);
}

.info-value.order-no {
  font-family: 'Courier New', monospace;
  background: rgba(91, 140, 255, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  word-break: break-all;
}

/* 二维码操作按钮 */
.qr-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.btn-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--primary);
  color: var(--primary);
}

.btn-ghost svg {
  flex-shrink: 0;
}

/* 二维码提示 */
.qr-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: rgba(91, 140, 255, 0.05);
  border: 1px solid rgba(91, 140, 255, 0.15);
  border-radius: 8px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.qr-tip svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--primary);
}

/* 占位符 */
.qr-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

/* 确保占位符和订单面板互斥显示 */
.qr-section > .qr-card {
  display: block;
}

.qr-section > .qr-card[hidden] {
  display: none !important;
}

.placeholder-content {
  text-align: center;
  color: var(--muted);
}

.placeholder-content svg {
  margin-bottom: 16px;
  color: var(--muted);
}

.placeholder-content h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--text);
}

.placeholder-content p {
  font-size: 14px;
  margin: 0;
  color: var(--muted);
}

/* 状态标签优化 */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  color: var(--muted);
}

.status-pill.status-pending {
  color: #ffb020;
  border-color: #ffb020;
  background: rgba(255, 176, 32, 0.1);
}

.status-pill.status-completed {
  color: var(--success);
  border-color: var(--success);
  background: rgba(46, 204, 113, 0.1);
}

.status-pill.status-rejected {
  color: var(--error);
  border-color: var(--error);
  background: rgba(255, 77, 79, 0.1);
}

/* 响应式设计 */
@media (max-width: 980px) {
  .recharge-container {
    grid-template-columns: 1fr;
  }

  .qr-card {
    position: static;
  }

  .amount-options {
    grid-template-columns: repeat(2, 1fr);
  }

  .amount-card.custom {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .balance-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .balance-tip {
    width: 100%;
  }

  .amount-options {
    grid-template-columns: 1fr;
  }

  .amount-card.custom {
    grid-column: span 1;
  }

  .qr-actions {
    grid-template-columns: 1fr;
  }
}

/* 保留旧样式以兼容 */
.recharge-card .recharge-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.recharge-card .balance {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.recharge-card .tip {
  font-size: 13px;
  color: var(--muted);
}

.recharge-body {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
}

.recharge-left input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #0c101a;
  color: var(--text);
  margin-bottom: 12px;
}

/* 兼容旧版样式 */
.recharge-left {
  /* 保持向后兼容 */
}

.label {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

.amount-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.amount-card {
  min-width: 100px;
  padding: 14px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #10131c;
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  transition: border 0.2s, background 0.2s;
}

.amount-card.active {
  border-color: var(--primary);
  background: rgba(91, 140, 255, 0.15);
}

.custom-amount {
  margin-bottom: 12px;
}

.channel-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0;
}

.channel {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}

.recharge-card .actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.recharge-right {
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 16px;
  min-height: 320px;
}

.recharge-right.empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.hint {
  font-size: 13px;
  color: var(--muted);
}

.hint.error {
  color: var(--error);
}

.hint.success {
  color: var(--success);
}

.recharge-form .form-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.recharge-form label {
  flex: 1 1 220px;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qr-panel {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 20px;
}

.qr-box {
  width: 260px;
  height: 260px;
  background: #fff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.qr-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.qr-info {
  flex: 1;
  min-width: 240px;
}

.qr-info code {
  background: #0c101a;
  padding: 2px 6px;
  border-radius: 6px;
}

.qr-actions {
  margin: 12px 0;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--border);
  color: var(--muted);
}

.status-pill.status-completed {
  color: var(--success);
  border-color: var(--success);
}

.status-pill.status-rejected {
  color: var(--error);
  border-color: var(--error);
}

.btn.small {
  padding: 6px 10px;
  font-size: 12px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 16px;
}

label {
  display: block;
  font-size: 13px;
  margin-bottom: 8px;
  color: var(--muted);
}

input,
textarea,
select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #0c101a;
  color: var(--text);
  margin-top: 4px;
}

textarea {
  resize: vertical;
}

.btn {
  appearance: none;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 600;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
}

.btn.secondary {
  background: #252b3a;
}

.btn.ghost {
  background: transparent;
  border: 1px solid var(--border);
}

.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.upload-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.preview-card video {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #000;
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.history-card {
  background: #10131c;
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 12px;
}

.history-card header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--muted);
}

.history-card p {
  min-height: 42px;
}

.status-line {
  font-size: 13px;
  margin-bottom: 10px;
}

.status-line.succeeded {
  color: var(--success);
}

.status-line.failed {
  color: var(--error);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.flash-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flash {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.flash.success {
  border-color: var(--success);
  color: var(--success);
}

.flash.error {
  border-color: var(--error);
  color: var(--error);
}

.status {
  margin-top: 10px;
  min-height: 20px;
}

.muted {
  color: var(--muted);
}

.auth-card {
  max-width: 420px;
  margin: 0 auto;
}

.stats {
  display: flex;
  gap: 24px;
}

.stats div {
  flex: 1;
  background: #10131c;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}

.inline-form {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.inline-form input,
.inline-form select {
  margin-top: 0;
}

.admin-nav {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.admin-nav a {
  color: var(--muted);
  text-decoration: none;
}

.admin-nav a.active {
  color: var(--text);
  font-weight: 600;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table th,
table td {
  border-bottom: 1px solid var(--border);
  padding: 8px;
  text-align: left;
}

@media (max-width: 980px) {
  .grid {
    grid-template-columns: 1fr;
  }

  nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media (max-width: 720px) {
  .recharge-body {
    grid-template-columns: 1fr;
  }

  .recharge-container {
    grid-template-columns: 1fr;
  }
}

/* Legacy dashboard (1:1 PHP style) */
body.sora-dashboard {
  --bg:#0f1115;
  --panel:#141821;
  --text:#e6e8ec;
  --muted:#9aa4b2;
  --primary:#5b8cff;
  --border:#252b36;
  --ok:#35c759;
  --warn:#ffb020;
  --err:#ff4d4f;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
body.sora-dashboard .wrap{max-width:1200px;margin:0 auto;padding:24px}
/* 导航条banner */
body.sora-dashboard .nav-banner{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:var(--panel);border:1px solid var(--border);border-radius:12px;margin-bottom:16px}
body.sora-dashboard .nav-left{display:flex;align-items:center}
body.sora-dashboard .nav-title{font-size:20px;font-weight:600;margin:0;color:var(--text)}
body.sora-dashboard .nav-right{display:flex;align-items:center;gap:16px;font-size:14px;flex-wrap:wrap}
body.sora-dashboard .nav-account{color:var(--muted)}
body.sora-dashboard .nav-account strong{color:var(--text);font-weight:600}
body.sora-dashboard .badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:rgba(91,140,255,.15);color:var(--primary);font-size:12px;font-weight:500}
body.sora-dashboard .nav-balance{color:#fff;font-weight:600}
body.sora-dashboard .nav-link{color:var(--primary);text-decoration:none;font-weight:500;transition:opacity 0.2s}
body.sora-dashboard .nav-link:hover{opacity:0.8}
/* 兼容旧样式 */
body.sora-dashboard .user-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:14px;color:var(--muted)}
body.sora-dashboard .user-actions{display:flex;gap:12px;align-items:center}
body.sora-dashboard .user-actions .balance{color:#fff;font-weight:600}
body.sora-dashboard .user-actions .link{color:var(--primary);text-decoration:none;font-weight:500}
body.sora-dashboard .title{display:flex;align-items:center;gap:12px;margin-bottom:16px}
body.sora-dashboard .title h1{font-size:20px;margin:0}
body.sora-dashboard .notice{padding:10px 12px;background:#10131a;border:1px solid var(--border);border-radius:8px;color:var(--muted);line-height:1.5;margin-bottom:12px}
body.sora-dashboard .layout{display:grid;grid-template-columns: 1fr 420px; gap:16px}
body.sora-dashboard .panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px}
body.sora-dashboard .panel h2{font-size:16px;margin:0 0 12px}
body.sora-dashboard .form-row{display:flex;gap:10px;margin-bottom:10px}
body.sora-dashboard label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
body.sora-dashboard input[type=text],
body.sora-dashboard select,
body.sora-dashboard textarea{width:100%;padding:10px 12px;border:1px solid var(--border);background:#0f1320;color:var(--text);border-radius:8px}
body.sora-dashboard textarea{min-height:120px;resize:vertical}
body.sora-dashboard .btn{appearance:none;border:none;border-radius:8px;background:var(--primary);color:white;padding:10px 14px;font-weight:600;cursor:pointer}
body.sora-dashboard .btn[disabled]{opacity:.6;cursor:not-allowed}
body.sora-dashboard .btn.secondary{background:#2a303d;color:var(--text)}
body.sora-dashboard .btn.ghost{background:transparent;border:1px solid var(--border)}
body.sora-dashboard .previewBox{width:360px;height:640px;margin:0 auto;background:#000;border-radius:12px;border:1px solid var(--border);position:relative;overflow:hidden}
body.sora-dashboard .previewInner{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
body.sora-dashboard .previewInner video{width:100%;height:100%;object-fit:cover;display:block}
body.sora-dashboard .overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
body.sora-dashboard .playOverlay{background:rgba(0,0,0,.35);border-radius:999px;padding:14px;pointer-events:auto;cursor:pointer;border:1px solid rgba(255,255,255,.2)}
body.sora-dashboard .playOverlay svg{width:28px;height:28px;fill:white}
body.sora-dashboard .progress{position:absolute;left:10px;right:10px;bottom:10px;height:8px;background:#10131a;border:1px solid var(--border);border-radius:999px;overflow:hidden}
body.sora-dashboard .progress .bar{height:100%;width:0;background:linear-gradient(90deg,var(--primary),#7aa2ff);transition:width .3s ease}
body.sora-dashboard .actions{display:flex;gap:8px;justify-content:center;margin-top:10px}
body.sora-dashboard .status{font-size:12px;color:var(--muted);text-align:center;margin-top:8px;min-height:16px}
body.sora-dashboard .history{margin-top:18px}
body.sora-dashboard .history h3{font-size:16px;margin:0 0 10px}
body.sora-dashboard .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
body.sora-dashboard .card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px;cursor:pointer}
body.sora-dashboard .thumb{width:100%;aspect-ratio:9/16;background:#000;border-radius:6px;position:relative;overflow:hidden}
body.sora-dashboard .thumb .bar{position:absolute;left:6px;right:6px;bottom:6px;height:6px;background:#10131a;border:1px solid var(--border);border-radius:999px;overflow:hidden}
body.sora-dashboard .thumb .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),#7aa2ff);transition:width .3s ease}
body.sora-dashboard .meta{margin-top:6px;font-size:12px;color:var(--muted)}
body.sora-dashboard .state{font-size:12px;margin-top:4px}
body.sora-dashboard .state.ok{color:var(--ok)}
body.sora-dashboard .state.warn{color:var(--warn)}
body.sora-dashboard .state.err{color:var(--err)}
body.sora-dashboard .modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:20px;z-index:1000}
body.sora-dashboard .modal.show{display:flex}
body.sora-dashboard .modal .box{max-width:860px;width:100%;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px}
body.sora-dashboard .modal .box h4{margin:0 0 8px}
body.sora-dashboard .modal .body{display:grid;grid-template-columns: 360px 1fr; gap:12px}
body.sora-dashboard .modal .footer{margin-top:10px;display:flex;gap:8px;justify-content:flex-end}
@media (max-width: 980px){
  body.sora-dashboard .layout{grid-template-columns: 1fr}
  body.sora-dashboard .nav-banner{flex-direction:column;align-items:flex-start;gap:12px}
  body.sora-dashboard .nav-right{width:100%;justify-content:flex-start;flex-wrap:wrap}
}
@media (max-width: 640px){
  body.sora-dashboard .nav-right{gap:12px;font-size:13px}
  body.sora-dashboard .nav-title{font-size:18px}
}