:root {
    color-scheme: light;
    font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --ink: #182033;
    --muted: #667085;
    --primary: #5b4cdb;
    --primary-deep: #3f2fa8;
    --accent: #d4628f;
    --surface: rgba(255, 255, 255, .9);
    --surface-solid: #fff;
    --line: rgba(100, 92, 145, .16);
    --success: #198754;
    --danger: #b4233d;
    --warning: #a15c08;
    --shadow-sm: 0 8px 24px rgba(50, 42, 91, .08);
    --shadow-lg: 0 24px 80px rgba(45, 34, 92, .17);
    background: #f7f5fb;
    color: var(--ink);
}

* { box-sizing: border-box; }
html { min-width: 0; overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; min-width: 0; min-height: 100vh; }
a { color: #4d3dcc; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; }
button, .button, input, select, textarea { min-height: 44px; }
button:focus-visible, .button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(91, 76, 219, .24);
    outline-offset: 2px;
}

.ambient-page {
    background-color: #f8f6fb;
    background-image:
        radial-gradient(circle at 14% 18%, rgba(119, 101, 239, .22), transparent 30%),
        radial-gradient(circle at 84% 12%, rgba(236, 134, 166, .2), transparent 29%),
        radial-gradient(circle at 72% 80%, rgba(105, 205, 191, .18), transparent 32%),
        linear-gradient(145deg, #fbfaff 0%, #f2effa 48%, #f7f9ff 100%);
    background-size: 120% 120%, 125% 125%, 130% 130%, 100% 100%;
    background-attachment: fixed;
    animation: ambient-drift 18s ease-in-out infinite alternate;
}
@keyframes ambient-drift {
    0% { background-position: 0% 0%, 100% 0%, 80% 100%, 0 0; }
    100% { background-position: 9% 8%, 90% 12%, 62% 86%, 0 0; }
}

.shell { width: min(1080px, calc(100% - 32px)); margin: 40px auto; }
.narrow { width: min(520px, calc(100% - 32px)); }
.topbar { display: flex; gap: 14px; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.topbar nav { display: flex; gap: 12px; align-items: center; }
h1, h2, h3 { color: var(--ink); }
h1, h2 { margin-top: 0; }
h1 { letter-spacing: -.035em; }
h2 { letter-spacing: -.02em; }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(18px);
}
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.metric strong { display: block; font-size: clamp(24px, 4vw, 30px); margin-top: 7px; letter-spacing: -.035em; }
.metric .muted { display: block; margin-top: 4px; }

label { display: block; font-size: 14px; font-weight: 650; margin: 14px 0 6px; }
input, select, textarea {
    width: 100%; border: 1px solid #cfd2df; border-radius: 11px; padding: 10px 12px;
    background: rgba(255,255,255,.9); color: var(--ink); transition: border-color .18s, box-shadow .18s;
}
input:hover, select:hover, textarea:hover { border-color: #a9a3c0; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(91,76,219,.1); outline: 0; }
.agreement { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; line-height: 1.6; }
.agreement input { width: auto; min-height: 0; margin-top: 5px; }
.agreement a { margin: 0 2px; }

button, .button {
    border: 0; border-radius: 11px; padding: 10px 17px; background: linear-gradient(135deg, var(--primary), var(--primary-deep));
    color: white; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; font-weight: 700; box-shadow: 0 8px 18px rgba(75, 60, 190, .18); transition: transform .18s, box-shadow .18s, opacity .18s;
}
button:hover, .button:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(75, 60, 190, .24); }
button:active, .button:active { transform: translateY(0); }
button:disabled, .button[aria-disabled="true"] { cursor: wait; opacity: .62; transform: none; }
button.secondary, .button.secondary { background: #eeecf6; color: var(--ink); box-shadow: none; }
button.ghost { background: transparent; color: var(--primary); border: 1px solid var(--line); box-shadow: none; }
button.danger { background: #a52b2b; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.tabs { display: flex; gap: 6px; margin-bottom: 18px; padding: 4px; border-radius: 13px; background: rgba(236,234,245,.9); }
.tabs button { flex: 1; background: transparent; color: #4e5361; box-shadow: none; }
.tabs button.active { background: white; color: var(--primary-deep); box-shadow: 0 4px 14px rgba(60,50,100,.1); }
.panel[hidden] { display: none; }
.message { min-height: 24px; margin-top: 12px; color: #445; white-space: pre-wrap; }
.message.error { color: var(--danger); }
.code-output { font-family: ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-all; background: #f5f7fa; padding: 12px; border-radius: 8px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; background: rgba(255,255,255,.65); }
th, td { text-align: left; border-bottom: 1px solid #e7e9ee; padding: 12px; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
th { color: #596274; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.muted { color: var(--muted); font-size: 14px; }

.badge {
    display: inline-flex; min-width: 22px; min-height: 22px; align-items: center; justify-content: center; padding: 2px 7px;
    border-radius: 999px; background: #ece9ff; color: #4b3bc2; font-size: 12px; font-weight: 800; line-height: 1;
}
.badge[hidden] { display: none !important; }
.badge.success { background: #e5f7ec; color: #18794e; }
.badge.danger { background: #fee8eb; color: #b4233d; }

/* Authentication shell */
.auth-stage { min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.auth-shell { width: min(980px, 100%); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); overflow: hidden; padding: 0; }
.auth-brand { position: relative; min-height: 620px; padding: 56px; color: #fff; background: linear-gradient(145deg, #32246f, #6c55cf 55%, #b95580); overflow: hidden; }
.auth-brand::before { content: ""; position: absolute; width: 380px; height: 380px; right: -130px; top: -120px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 50px rgba(255,255,255,.04), 0 0 0 110px rgba(255,255,255,.03); }
.auth-brand > * { position: relative; z-index: 1; }
.auth-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .04em; }
.auth-logo-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); }
.auth-brand h1 { max-width: 420px; margin: 110px 0 18px; color: #fff; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; }
.auth-brand p { max-width: 410px; color: rgba(255,255,255,.76); font-size: 16px; line-height: 1.75; }
.auth-form-shell { padding: 52px 48px; background: rgba(255,255,255,.9); backdrop-filter: blur(28px); }
.auth-form-shell h2 { margin-bottom: 6px; font-size: 28px; }
.auth-form-shell .intro { margin: 0 0 26px; }
.auth-form-shell .actions button { width: 100%; }
.forgot-password { display: block; margin-top: 14px; text-align: center; font-size: 14px; font-weight: 650; }
.field-status { min-height: 20px; margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.field-status.success { color: var(--success); font-weight: 700; }
.field-status.error { color: var(--danger); font-weight: 700; }

/* Account credential dialog */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(19,16,39,.66); backdrop-filter: blur(10px); }
.modal-backdrop[hidden] { display: none; }
.credential-dialog { width: min(460px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 28px; border: 1px solid rgba(255,255,255,.72); border-radius: 18px; background: #fff; box-shadow: var(--shadow-lg); text-align: center; }
.credential-dialog h2 { margin-bottom: 8px; }
.credential-dialog > p { margin: 0 0 16px; color: var(--danger); line-height: 1.65; }
.credential-identity { display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: #f6f4fb; color: var(--muted); font-size: 13px; }
.credential-identity span { display: block; }
.credential-qr { display: block; width: min(280px, 100%); aspect-ratio: 1; margin: 16px auto; image-rendering: pixelated; }
.button-link { display: inline-flex; margin-bottom: 10px; border-radius: 11px; padding: 10px 17px; background: #eeecf6; color: var(--ink); text-decoration: none; font-weight: 700; }
.credential-dialog button { width: 100%; }

/* Recovery flow */
.recovery-stage { min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.recovery-shell { width: min(820px, 100%); display: grid; grid-template-columns: minmax(280px,.8fr) minmax(360px,1.2fr); padding: 0; overflow: hidden; }
.recovery-header { padding: 44px; color: #fff; background: linear-gradient(150deg, #30246c, #6855ca 58%, #a84f83); }
.recovery-logo { color: #fff; text-decoration: none; }
.recovery-header h1 { margin: 100px 0 14px; color: #fff; font-size: clamp(30px,5vw,44px); line-height: 1.08; }
.recovery-header p { color: rgba(255,255,255,.76); line-height: 1.7; }
.recovery-flow { padding: 40px; background: rgba(255,255,255,.94); }
.recovery-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; }
.recovery-steps span { padding: 10px 12px; border-bottom: 2px solid #ddd9e8; color: var(--muted); font-size: 13px; font-weight: 700; }
.recovery-steps span.active { border-color: var(--primary); color: var(--primary-deep); }
.recovery-steps span.complete { border-color: var(--success); color: var(--success); }
.upload-zone { display: grid; place-items: center; gap: 8px; min-height: 190px; margin: 0 0 16px; padding: 22px; border: 1px dashed #aaa1c7; border-radius: 14px; background: #faf9fd; cursor: pointer; text-align: center; }
.upload-zone:hover { border-color: var(--primary); background: #f7f5ff; }
.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload-zone > span:last-child { max-width: 100%; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.upload-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: #ece9ff; color: var(--primary); }
.upload-icon svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#credentialForm > button, #resetForm > button { width: 100%; margin-top: 16px; }
.recovery-account, .recovery-success { display: grid; gap: 5px; margin-bottom: 18px; padding: 14px; border: 1px solid #b9ddc7; border-radius: 12px; background: #f0faf4; }
.recovery-account[hidden], .recovery-success[hidden] { display: none; }
.recovery-account span, .recovery-success span { color: var(--muted); font-size: 13px; }
.recovery-account code { width: fit-content; padding: 3px 7px; border-radius: 6px; background: rgba(25,135,84,.08); }
.recovery-back { display: block; margin-top: 12px; text-align: center; font-weight: 650; }
.captcha-panel { display: grid; gap: 8px; margin: 14px 0; }
.captcha-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; }
.captcha-actions p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.captcha-actions p.error { color: var(--danger); font-weight: 650; }
.captcha-actions p.success { color: var(--success); font-weight: 650; }
.captcha-actions button { min-height: 36px; padding: 7px 12px; white-space: nowrap; }
.captcha-actions button[hidden] { display: none; }

/* Carousel */
.carousel { margin-top: 48px; }
.carousel-viewport { overflow: hidden; }
.carousel-track { display: flex; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.carousel-slide { min-width: 100%; padding-right: 18px; }
.carousel-slide strong { display: block; color: #fff; font-size: 18px; margin-bottom: 8px; }
.carousel-slide span { color: rgba(255,255,255,.72); line-height: 1.65; }
.carousel-controls { display: flex; gap: 8px; margin-top: 20px; }
.carousel-dot { min-width: 8px; width: 8px; min-height: 8px; height: 8px; padding: 0; border-radius: 999px; background: rgba(255,255,255,.4); box-shadow: none; }
.carousel-dot.active { width: 28px; background: #fff; }

/* Skeleton */
.skeleton { position: relative; overflow: hidden; background: #eceaf2; color: transparent !important; border-radius: 8px; pointer-events: none; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent); animation: skeleton-wave 1.35s infinite; }
.skeleton-line { height: 14px; margin: 10px 0; }
.skeleton-line.short { width: 44%; }
.skeleton-block { min-height: 132px; }
@keyframes skeleton-wave { to { transform: translateX(100%); } }

/* Border beam */
.beam-card { position: relative; isolation: isolate; }
.beam-card::before { content: ""; position: absolute; inset: -1px; z-index: -2; border-radius: inherit; background: conic-gradient(from var(--beam-angle, 0deg), transparent 0 72%, #8b7cff 82%, #ee8aae 89%, transparent 96%); animation: beam-spin 5s linear infinite; }
.beam-card::after { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: calc(18px - 1px); background: rgba(255,255,255,.96); }
@property --beam-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes beam-spin { to { --beam-angle: 360deg; } }

/* Switch */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.switch-row:last-child { border-bottom: 0; }
.switch-copy strong, .switch-copy span { display: block; }
.switch-copy span { margin-top: 4px; color: var(--muted); font-size: 13px; }
.switch { position: relative; width: 50px; min-width: 50px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 999px; background: #cbc8d6; box-shadow: none; }
.switch::after { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.2); transition: transform .2s; }
.switch[aria-checked="true"] { background: var(--primary); }
.switch[aria-checked="true"]::after { transform: translateX(22px); }

/* Number input */
.number-control { display: grid; grid-template-columns: 40px minmax(70px, 1fr) 40px; align-items: stretch; gap: 0; }
.number-control input { min-width: 0; text-align: center; border-radius: 0; border-left: 0; border-right: 0; }
.number-step { min-width: 40px; padding: 0; border-radius: 11px 0 0 11px; box-shadow: none; background: #eeecf6; color: var(--primary-deep); }
.number-step:last-child { border-radius: 0 11px 11px 0; }
.number-control input::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 18px; }
.pagination button { min-width: 38px; min-height: 38px; padding: 7px 10px; background: #f0eef7; color: #4b4560; box-shadow: none; }
.pagination button.active { background: var(--primary); color: #fff; }

/* Complaint operations */
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.section-heading .badge { align-self: flex-start; }
.section-heading h2 { margin-bottom: 5px; }
.section-heading p { margin: 0; max-width: 72ch; }
.sidebar nav .badge { margin-left: 5px; vertical-align: middle; }
.complaint-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.complaint-summary > div { min-width: 0; padding: 14px 16px; border-right: 1px solid var(--line); }
.complaint-summary > div:nth-child(3n) { border-right: 0; }
.complaint-summary span, .valuation-review dt { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; font-weight: 650; }
.complaint-summary strong { display: block; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.valuation-review { margin: 20px 0; padding: 20px; border-radius: 14px; background: #292631; color: #fff; }
.valuation-review h3 { margin: 0 0 16px; color: #fff; }
.valuation-review dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; margin: 0; }
.valuation-review dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.valuation-review dt { color: #aaa6b3; }
.review-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.problem-list { display: grid; gap: 10px; }
.problem-item { border-top: 1px solid var(--line); background: transparent; }
.problem-item:first-child { border-top: 0; }
.problem-item summary { display: grid; grid-template-columns: minmax(160px, 1fr) repeat(3, auto); gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; }
.problem-item summary::marker { color: var(--primary); }
.problem-item[open] summary { border-bottom: 1px solid var(--line); }
.problem-body { padding: 16px; }
.codex-context { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; background: #f7f6fa; }
.codex-context summary { padding: 13px 15px; cursor: pointer; color: var(--primary-deep); font-weight: 700; }
.codex-context pre { max-height: 420px; margin: 0; padding: 16px; overflow: auto; border-top: 1px solid var(--line); background: #222029; color: #f5f3fa; font: 12px/1.65 ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.codex-context button { margin: 12px 15px 15px; }
.reason-low { color: #8a4f00; background: #fff4df; }
.reason-high { color: var(--danger); background: #feecef; }
.reason-pill { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 750; }
body.admin-reviewing #overview,
body.admin-reviewing .section-anchor { display: none; }
body.admin-reviewing #complaintReview { display: block; }

.legal { max-width: 860px; line-height: 1.8; }
.legal h2 { font-size: 18px; }
.legal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.legal-important { border-color: #e1a62b; background: #fffaf0; }
.legal ul { padding-left: 24px; }
.legal li { margin: 7px 0; }

@media (max-width: 760px) {
    .shell { width: min(100% - 24px, 1080px); margin: 20px auto; }
    .topbar, .legal-header { align-items: flex-start; flex-direction: column; }
    .card { padding: 18px; border-radius: 16px; }
    .auth-stage { padding: 12px; align-items: start; }
    .auth-shell { grid-template-columns: 1fr; margin: 10px 0; }
    .auth-brand { min-height: 236px; padding: 28px 24px; }
    .auth-brand h1 { margin: 42px 0 10px; font-size: 34px; }
    .auth-brand p { font-size: 14px; }
    .auth-form-shell { padding: 28px 22px; }
    .recovery-stage { padding: 12px; align-items: start; }
    .recovery-shell { grid-template-columns: 1fr; margin: 10px 0; }
    .recovery-header { padding: 28px 24px; }
    .recovery-header h1 { margin: 42px 0 10px; font-size: 32px; }
    .recovery-flow { padding: 28px 22px; }
    .carousel { display: none; }
    .section-heading { align-items: stretch; flex-direction: column; }
    .complaint-summary, .valuation-review dl { grid-template-columns: 1fr; }
    .complaint-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }
    .complaint-summary > div:last-child { border-bottom: 0; }
    .problem-item summary { grid-template-columns: 1fr; }
    .review-actions > button { width: 100%; }
    #complaints .table-wrap { overflow: visible; }
    #complaints table, #complaints tbody, #complaints tr, #complaints td { display: block; width: 100%; }
    #complaints thead { display: none; }
    #complaints tr { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
    #complaints td { display: grid; grid-template-columns: minmax(88px, .45fr) minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid #eceaf1; white-space: normal; }
    #complaints td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 650; }
    #complaints td:last-child { border-bottom: 0; }
    #complaints td:last-child button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}