/* Shared layouts for the account and TikTok utility pages. */
.secondary-main { background: transparent; }
.secondary-shell { width: min(100%, 1120px); margin: 0 auto; }
.secondary-card { background: rgba(255,255,255,.96); border: 1px solid rgba(226,232,240,.8); border-radius: 22px; box-shadow: 0 10px 30px rgba(99,102,241,.08); padding: 24px; }
.secondary-card + .secondary-card { margin-top: 22px; }
.secondary-grid { display:grid; grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr); gap: 24px; }
.secondary-grid.equal { grid-template-columns: 1fr 1fr; }
.secondary-title { font-size: 23px; color:#25223a; margin:0 0 6px; font-weight:800; }
.secondary-subtitle { color:#7c7897; font-size:13px; line-height:1.55; margin:0 0 20px; }
.kicker { color:#7167d9; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; }
.field-label { display:block; color:#777395; font-size:12px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; margin:18px 0 8px; }
.secondary-input, .secondary-select, .secondary-textarea { width:100%; border:1px solid #e5e3f8; background:#fff; border-radius:12px; padding:13px 15px; color:#37334f; font:inherit; outline:none; transition:border .2s, box-shadow .2s; }
.secondary-textarea { min-height:120px; resize:vertical; }
.secondary-input:focus, .secondary-select:focus, .secondary-textarea:focus { border-color:#8b7cf6; box-shadow:0 0 0 3px rgba(139,124,246,.12); }
.field-hint { color:#9894b0; font-size:12px; margin:7px 0 0; }
.secondary-divider { border:0; border-top:1px dashed #e8e6f6; margin:20px 0; }
.secondary-total { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid #e5e1ff; background:#f5f2ff; color:#4d466d; border-radius:13px; padding:16px; margin-top:20px; font-weight:700; }
.secondary-total strong { color:#6759ec; font-size:22px; }
.secondary-button { width:100%; border:0; border-radius:12px; padding:14px 18px; margin-top:14px; color:#fff; background:linear-gradient(135deg,#a76afa,#5141ee); box-shadow:0 10px 20px rgba(99,102,241,.2); font:inherit; font-weight:800; cursor:pointer; transition:transform .2s, box-shadow .2s; }
.secondary-button:hover { transform:translateY(-1px); box-shadow:0 14px 24px rgba(99,102,241,.28); }
.secondary-button:disabled { cursor:not-allowed; opacity:.58; transform:none; box-shadow:none; }
.secondary-alert { display:flex; align-items:flex-start; gap:8px; color:#e35a67; background:#fff1f3; border:1px solid #ffd5da; border-radius:10px; padding:11px 12px; font-size:12px; line-height:1.4; margin-top:14px; }
.secondary-note { display:flex; gap:8px; align-items:flex-start; color:#7d789b; background:#f7f6ff; border:1px solid #ebe8ff; border-radius:12px; padding:12px; font-size:12px; line-height:1.5; margin-top:14px; }
.secondary-note.warning { color:#c57827; background:#fff8eb; border-color:#ffe7c1; }
.preview-panel { min-height:300px; border:1px dashed #dfdcf7; border-radius:16px; background:linear-gradient(180deg,#fbfaff,#f6f4ff); display:flex; align-items:center; justify-content:center; padding:24px; text-align:center; color:#77739a; }
.preview-panel .preview-icon { width:58px; height:58px; border-radius:50%; background:#eeeaff; display:grid; place-items:center; color:#7b68f1; font-size:25px; margin:0 auto 14px; }
.preview-panel h2 { color:#3f3b57; font-size:16px; margin:0 0 8px; }
.preview-panel p { max-width:290px; font-size:12px; line-height:1.55; margin:0; }
.dark-preview { min-height:200px; border-radius:16px; background:linear-gradient(135deg,#160f29,#08131f 75%); color:#fff; padding:22px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 14px 28px rgba(20,15,42,.24); }
.dark-preview .preview-badge { align-self:flex-end; color:#bdb9ff; background:#ffffff12; border-radius:8px; padding:5px 8px; font-size:10px; font-weight:800; }
.dark-preview .preview-amount { font-size:38px; font-weight:900; letter-spacing:-.04em; }
.dark-preview .preview-amount small { color:#a99aff; font-size:14px; }
.dark-preview .preview-user { color:#c7c2d8; font-size:12px; }
.compact-summary { border:1px dashed #e2dffa; border-radius:14px; padding:12px 14px; margin-top:18px; }
.compact-summary div { display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px dotted #e7e4f5; color:#87829f; font-size:12px; }
.compact-summary div:last-child { border-bottom:0; }
.compact-summary b { color:#4a4662; text-align:right; }
.choice-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.choice-chip { border:1px solid #e6e2ff; background:#faf9ff; color:#7469dc; border-radius:999px; padding:8px 12px; font-size:12px; font-weight:700; cursor:pointer; }
.choice-chip.active { color:#fff; background:#7c68ed; border-color:#7c68ed; }
.mini-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:22px; }
.mini-stat { background:#fff; border:1px solid #ebe9f6; border-radius:18px; padding:18px 20px; display:flex; gap:13px; align-items:center; box-shadow:0 8px 22px rgba(99,102,241,.06); }
.mini-stat .stat-icon { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:#edeaff; color:#6b5eea; font-size:18px; flex:none; }
.mini-stat.green .stat-icon { background:#e7fbf4; color:#0fb88d; }
.mini-stat.orange .stat-icon { background:#fff3e4; color:#ef9d30; }
.mini-stat strong { display:block; font-size:20px; color:#29263e; }
.mini-stat span { display:block; color:#8e8aa4; font-size:11px; margin-top:2px; }
.table-card { overflow:hidden; }
.table-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:14px; }
.table-heading h2 { color:#7165e5; font-size:16px; margin:0; }
.table-search { border:1px solid #e7e4f4; border-radius:999px; padding:9px 13px; min-width:200px; font:inherit; font-size:12px; outline:none; }
.table-wrap { overflow:auto; }
.secondary-table { width:100%; min-width:650px; border-collapse:collapse; }
.secondary-table th { color:#8a85a7; background:#fbfaff; font-size:11px; letter-spacing:.03em; padding:12px 10px; text-align:left; white-space:nowrap; }
.secondary-table td { border-top:1px solid #f0eef8; color:#54506c; font-size:12px; padding:14px 10px; }
.empty-row { text-align:center; color:#aaa5ba; padding:42px !important; }
.step-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.step { background:#fbfaff; border:1px solid #ece9fb; border-radius:12px; padding:14px; }
.step b { display:grid; place-items:center; width:24px; height:24px; background:#745ff0; color:#fff; border-radius:50%; font-size:11px; margin-bottom:10px; }
.step strong { color:#403c5a; font-size:12px; display:block; margin-bottom:4px; }
.step span { color:#9792a9; font-size:11px; line-height:1.45; display:block; }
.profile-banner { display:grid; grid-template-columns:220px 1fr; overflow:hidden; padding:0; }
.profile-side { background:linear-gradient(160deg,#5742ec,#8f68f3); color:#fff; padding:28px 22px; text-align:center; }
.profile-side .profile-avatar { width:66px; height:66px; border-radius:50%; background:#ffe767; border:5px solid #fff; object-fit:cover; margin-bottom:12px; }
.profile-side h2 { font-size:17px; margin:0 0 12px; }
.profile-progress { background:#ffffff22; border-radius:12px; padding:10px; text-align:left; font-size:10px; }
.profile-progress .bar { height:6px; border-radius:9px; background:#ffffff45; margin-top:8px; overflow:hidden; }
.profile-progress .bar i { display:block; width:12%; height:100%; background:#fff; border-radius:9px; }
.profile-content { padding:28px; }
.profile-content h2 { color:#2c2942; font-size:20px; margin:0 0 18px; }
.commission-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.commission-box { border:1px solid #ece9f8; border-left:3px solid #7162ef; border-radius:14px; padding:16px; background:#fcfbff; }
.commission-box.orange { border-left-color:#f5a623; }
.commission-box.green { border-left-color:#11b98f; }
.commission-box span { color:#8d88a8; font-size:11px; display:block; }
.commission-box strong { color:#29263e; font-size:18px; display:block; margin:7px 0; }
.commission-box small { color:#7b70e8; background:#efedff; border-radius:5px; padding:4px 6px; font-size:10px; }
.copy-row { display:flex; gap:10px; margin-top:12px; }
.copy-row input { flex:1; }
.copy-row .secondary-button { width:auto; white-space:nowrap; margin-top:0; }
.tab-row { display:flex; gap:8px; margin-bottom:14px; }
.tab-btn { border:0; background:#f2efff; color:#766bd7; padding:10px 14px; border-radius:10px; font:inherit; font-size:12px; font-weight:800; cursor:pointer; }
.tab-btn.active { color:#fff; background:#725bef; }
.faq-list { display:grid; gap:9px; }
.faq-item { border:1px solid #ebe8fa; border-left:3px solid #7b68f4; border-radius:12px; background:#fcfbff; overflow:hidden; }
.faq-question { width:100%; border:0; background:transparent; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px; text-align:left; color:#4d4867; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.faq-answer { display:none; padding:0 15px 15px; color:#85809d; font-size:12px; line-height:1.55; }
.faq-item.open .faq-answer { display:block; }
.support-hero { text-align:center; padding:38px 28px 24px; }
.support-hero .preview-icon { margin-bottom:12px; }
.support-search { max-width:430px; margin:20px auto 26px; }
.support-chat { text-align:center; margin-top:22px; }
.support-chat .secondary-button { max-width:100%; }
.form-card-narrow { width:min(100%,680px); margin:0 auto; }
.check-list { margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.check-list li { display:flex; gap:9px; padding:10px 12px; background:#faf9ff; border:1px solid #eeebfb; border-radius:10px; color:#73708e; font-size:12px; }
.check-list li i { color:#7260eb; }
.range-row { display:flex; align-items:center; gap:12px; }
.range-row input[type=range] { flex:1; accent-color:#6d5cea; }
.range-value { min-width:68px; text-align:right; color:#5d51da; font-weight:800; font-size:13px; }

@media (max-width: 1023px) {
  .secondary-main { padding:0 16px 100px !important; }
  .secondary-shell { width:100%; }
  .secondary-grid, .secondary-grid.equal, .profile-banner { grid-template-columns:1fr; }
  .mini-stat-grid { grid-template-columns:1fr; gap:10px; }
  .step-grid { grid-template-columns:repeat(2,1fr); }
  .commission-grid { grid-template-columns:1fr; }
  .profile-side { padding:22px; }
  .profile-content { padding:22px; }
  .table-heading { align-items:stretch; flex-direction:column; }
  .table-search { min-width:0; width:100%; }
  .copy-row { flex-direction:column; }
  .copy-row .secondary-button { width:100%; }
}