/* Premium illustrated UI layer — editorial cartoon, not a children's theme. */
:root {
    --cartoon-ink: #20213a;
    --cartoon-blue: #6f8cff;
    --cartoon-blue-deep: #536fe6;
    --cartoon-coral: #ff806f;
    --cartoon-yellow: #ffd774;
    --cartoon-mint: #8edfc8;
    --cartoon-cream: #fff8e8;
    --cartoon-paper: rgba(255, 255, 255, 0.94);
    --cartoon-line: rgba(32, 33, 58, 0.16);
    --cartoon-shadow: 0 8px 0 rgba(32, 33, 58, 0.08), 0 20px 50px rgba(54, 62, 116, 0.10);
    --font-rounded: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --console-bg: #fff8e8;
    --console-radius: 20px;
    --console-card-shadow: var(--cartoon-shadow);
    --accent: var(--cartoon-coral);
    --accent-hover: #f26e5d;
    --accent-soft: #fff0e8;
    --brand-solid: var(--cartoon-coral);
    --focus-outline: var(--cartoon-blue);
    --focus-ring: rgba(111, 140, 255, 0.22);
}

html {
    background:
        radial-gradient(circle at 12% 14%, rgba(255, 215, 116, .30), transparent 23rem),
        radial-gradient(circle at 88% 76%, rgba(142, 223, 200, .25), transparent 26rem),
        linear-gradient(145deg, #fffaf0 0%, #f4f7ff 52%, #fff6e8 100%);
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-rounded);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .33;
    background-image: radial-gradient(rgba(32, 33, 58, .18) .7px, transparent .7px);
    background-size: 18px 18px;
    mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

h1, .display-title,
.auth-story h1,
.auth-panel-heading h2,
.status-heading h1,
.page-intro h1 {
    font-family: var(--font-rounded);
    font-weight: 800;
    letter-spacing: -.035em;
}

.bg-boid-canvas {
    z-index: 1;
    opacity: .44;
    mix-blend-mode: multiply;
    filter: saturate(1.15);
}

.bg-glow::before {
    background: radial-gradient(circle, rgba(111, 140, 255, .24), transparent 62%);
}

.bg-glow::after {
    background: radial-gradient(circle, rgba(255, 128, 111, .20), transparent 62%);
}

/* Shared navigation */
.auth-topbar,
.status-topbar,
.enterprise-header {
    border-bottom: 2px solid var(--cartoon-ink);
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 4px 0 rgba(32, 33, 58, .06);
    backdrop-filter: blur(18px) saturate(1.2);
}

.auth-brand-mark,
.status-brand-mark,
.enterprise-brand-mark {
    border: 2px solid var(--cartoon-ink);
    border-radius: 10px;
    background: var(--cartoon-coral);
    box-shadow: 3px 3px 0 var(--cartoon-ink);
    transform: rotate(-4deg);
}

.auth-toplink,
.status-back,
.header-action,
.theme-toggle-btn,
.svc-badge,
.header-balance {
    border: 1.5px solid var(--cartoon-ink);
    border-radius: 999px;
    background: #fff;
    box-shadow: 2px 2px 0 rgba(32, 33, 58, .14);
}

.auth-toplink:hover,
.status-back:hover,
.header-action:hover,
.theme-toggle-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 rgba(32, 33, 58, .14);
}

/* Login / register hero */
.auth-main {
    max-width: 1280px;
    padding: 30px 0 38px;
    grid-template-columns: minmax(0, 1fr) 410px;
    gap: 24px;
}

.auth-story {
    position: relative;
    min-height: 600px;
    padding: 44px;
    border: 2px solid var(--cartoon-ink);
    border-radius: 28px;
    background:
        radial-gradient(circle at 82% 16%, rgba(255,255,255,.35) 0 2px, transparent 3px),
        radial-gradient(circle at 88% 24%, rgba(255,255,255,.26) 0 4px, transparent 5px),
        linear-gradient(145deg, #566fe3 0%, #718dff 48%, #83cfe0 100%);
    color: #fff;
    box-shadow: 10px 10px 0 var(--cartoon-ink), 0 28px 70px rgba(72, 91, 178, .24);
    isolation: isolate;
}

.auth-story::before,
.auth-story::after {
    content: "";
    position: absolute;
    z-index: -1;
    border: 2px solid var(--cartoon-ink);
    border-radius: 50%;
    opacity: .95;
}

.auth-story::before {
    width: 130px;
    height: 130px;
    top: -48px;
    right: -38px;
    background: var(--cartoon-yellow);
}

.auth-story::after {
    width: 74px;
    height: 74px;
    right: 34%;
    bottom: -36px;
    background: var(--cartoon-coral);
}

.auth-story-copy {
    position: relative;
    z-index: 3;
    max-width: 580px;
    padding-top: 0;
    border: 0;
}

.auth-story-kicker,
.auth-panel-kicker,
.status-kicker,
.page-eyebrow {
    display: inline-flex;
    width: fit-content;
    padding: 6px 11px;
    border: 1.5px solid var(--cartoon-ink);
    border-radius: 999px;
    background: var(--cartoon-yellow);
    color: var(--cartoon-ink);
    box-shadow: 2px 2px 0 var(--cartoon-ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
}

.auth-story h1 {
    max-width: 680px;
    margin: 19px 0 13px;
    color: #fff;
    font-size: clamp(36px, 3.6vw, 50px);
    line-height: 1.12;
    text-shadow: 3px 3px 0 rgba(32, 33, 58, .28);
}

.auth-story-copy > p:last-child {
    max-width: 490px;
    color: rgba(255,255,255,.88);
    font-size: 14px;
    font-weight: 550;
}

.cartoon-scene {
    position: absolute;
    z-index: 1;
    right: -20px;
    bottom: 96px;
    width: min(66%, 540px);
    filter: drop-shadow(0 16px 12px rgba(32,33,58,.18));
    animation: cartoon-float 5.5s ease-in-out infinite;
}

.cartoon-scene svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.cartoon-scene .bubble {
    transform-box: fill-box;
    transform-origin: center;
    animation: cartoon-bubble 3.8s ease-in-out infinite alternate;
}

.cartoon-scene .bubble:nth-child(2) { animation-delay: -1.7s; }
.cartoon-scene .bubble:nth-child(3) { animation-delay: -.8s; }

.auth-proof {
    position: relative;
    z-index: 3;
    padding: 14px 16px;
    border: 1.5px solid rgba(32,33,58,.7);
    border-radius: 18px;
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(10px);
}

.auth-proof div { padding: 4px 14px 3px 0; }
.auth-proof div + div { padding-left: 14px; border-left-color: rgba(255,255,255,.28); }
.auth-proof dt { color: #fff; }
.auth-proof dd { color: rgba(255,255,255,.72); }

.auth-panel {
    position: relative;
    z-index: 3;
    padding: 40px 34px;
    border: 2px solid var(--cartoon-ink);
    border-radius: 28px;
    background: var(--cartoon-paper);
    box-shadow: var(--cartoon-shadow);
    overflow: hidden;
}

.auth-panel::before {
    content: "✦";
    position: absolute;
    top: 20px;
    right: 24px;
    color: var(--cartoon-coral);
    font-size: 28px;
    transform: rotate(13deg);
}

.auth-panel-heading h2 { margin-top: 13px; font-size: 28px; color: var(--cartoon-ink); }
.tabs { padding: 5px; border: 1.5px solid var(--cartoon-ink); border-radius: 15px; background: #edf0ff; }
.tab { min-height: 38px; border-radius: 10px; font-weight: 750; }
.tab.active { background: #fff; color: var(--cartoon-ink); box-shadow: 0 3px 0 rgba(32,33,58,.10); }
.form-group label { color: var(--cartoon-ink); font-weight: 750; }

.form-group input,
.query-panel input,
input,
textarea,
select {
    border: 1.5px solid var(--cartoon-ink);
    border-radius: 12px;
    background: rgba(255,255,255,.92);
    box-shadow: inset 0 -3px 0 rgba(32,33,58,.045);
}

.form-group input:focus,
.query-panel input:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--cartoon-blue-deep);
    box-shadow: 0 0 0 4px rgba(111,140,255,.18);
}

.auth-panel .btn,
.btn-primary,
.header-action.primary {
    border: 2px solid var(--cartoon-ink);
    border-radius: 12px;
    background: var(--cartoon-coral);
    color: var(--cartoon-ink);
    box-shadow: 4px 4px 0 var(--cartoon-ink);
    font-weight: 800;
}

.auth-panel .btn:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.header-action.primary:hover:not(:disabled) {
    border-color: var(--cartoon-ink);
    background: #ff9789;
    color: var(--cartoon-ink);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--cartoon-ink);
}

/* Main workspace */
.enterprise-page { max-width: 1400px; padding-top: 26px; }
.page-intro {
    position: relative;
    min-height: 122px;
    margin-bottom: 22px;
    padding: 22px 28px;
    border: 2px solid var(--cartoon-ink);
    border-radius: 22px;
    background: linear-gradient(125deg, rgba(255,255,255,.96), rgba(237,240,255,.92));
    box-shadow: 6px 6px 0 rgba(32,33,58,.10);
    overflow: hidden;
}

.page-intro::after {
    content: "✦  ◌  ✦";
    position: absolute;
    right: 34px;
    top: 18px;
    color: var(--cartoon-coral);
    font-size: 24px;
    letter-spacing: 10px;
    transform: rotate(-6deg);
    opacity: .8;
}

.page-intro h1 { margin-top: 9px; color: var(--cartoon-ink); font-size: 26px; }
.page-guide { border: 1.5px solid var(--cartoon-ink); background: var(--cartoon-yellow); box-shadow: 3px 3px 0 rgba(32,33,58,.14); }

.workflow-card,
.summary-card,
.orders-card,
.support-card,
.query-panel,
.result-panel {
    border: 2px solid var(--cartoon-ink);
    border-radius: 22px;
    background: var(--cartoon-paper);
    box-shadow: var(--cartoon-shadow);
}

.workflow-card-head,
.orders-toolbar,
.result-head {
    background: linear-gradient(90deg, #f1f3ff, #fff9ea);
    border-bottom: 1.5px dashed rgba(32,33,58,.28);
}

.sub-tabs { border: 1.5px solid var(--cartoon-ink); border-radius: 12px; background: #fff; }
.sub-tab { border-radius: 9px; }
.sub-tab.active { background: var(--cartoon-blue); color: #fff; }
.workflow-step-index,
.form-section-heading > span,
.panel-index {
    border: 1.5px solid var(--cartoon-ink);
    border-radius: 9px;
    background: var(--cartoon-yellow);
    color: var(--cartoon-ink);
    box-shadow: 2px 2px 0 rgba(32,33,58,.16);
}

.summary-card.dark,
html.dark .summary-card.dark {
    border-color: var(--cartoon-ink);
    background: linear-gradient(150deg, #20213a, #35386a);
    color: #fff;
    box-shadow: 6px 6px 0 var(--cartoon-mint), var(--cartoon-shadow);
}

.summary-card.dark h3,
.summary-card.dark .summary-line strong,
.summary-card.dark .summary-total strong { color: #fff; }
.summary-card.dark .summary-label,
.summary-card.dark .summary-line,
.summary-card.dark .summary-total > span,
.summary-card.dark .summary-total small,
.summary-card.dark .summary-checklist { color: rgba(255,255,255,.68); }
.summary-card.dark .summary-line,
.summary-card.dark .summary-total { border-color: rgba(255,255,255,.18); }

.support-card details { border-radius: 12px; }
.operation-note { border-left: 4px solid var(--cartoon-coral); border-radius: 12px; background: #fff5de; }
.announcement-banner { border: 1.5px solid var(--cartoon-ink); box-shadow: 4px 4px 0 rgba(32,33,58,.10); }
.history-item:hover { background: #f3f5ff; }
.empty-state-mark,
.status-placeholder-mark { border: 2px solid var(--cartoon-ink); background: var(--cartoon-yellow); color: var(--cartoon-ink); box-shadow: 4px 4px 0 var(--cartoon-ink); }
.modal { border: 2px solid var(--cartoon-ink); border-radius: 22px; box-shadow: 8px 8px 0 var(--cartoon-ink); }

/* Public status page */
.status-page { padding-top: 28px; }
.status-heading {
    position: relative;
    margin-bottom: 22px;
    padding: 22px 26px;
    border: 2px solid var(--cartoon-ink);
    border-radius: 22px;
    background: linear-gradient(125deg, #fff, #edf0ff);
    box-shadow: 6px 6px 0 rgba(32,33,58,.10);
}
.status-heading h1 { margin-top: 11px; font-size: 27px; color: var(--cartoon-ink); }
.status-guide { border-radius: 16px; background: #fff8e5; }
.status-row { border-bottom-style: dashed; }

@keyframes cartoon-float {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-12px) rotate(1deg); }
}

@keyframes cartoon-bubble {
    from { transform: translateY(4px) scale(.92); opacity: .45; }
    to { transform: translateY(-8px) scale(1.08); opacity: .9; }
}

@media (max-width: 1020px) {
    .auth-main { width: min(560px, calc(100% - 32px)); }
    .auth-panel { min-height: 540px; }
}

@media (max-width: 720px) {
    .auth-topbar,
    .status-topbar,
    .enterprise-header { border-bottom-width: 1.5px; }
    .auth-main { width: calc(100% - 28px); padding-top: 20px; }
    .auth-panel { min-height: 0; padding: 30px 22px 26px; border-radius: 22px; }
    .auth-panel-heading h2 { font-size: 25px; }
    .enterprise-page,
    .status-page { width: calc(100% - 24px); }
    .page-intro,
    .status-heading { min-height: 0; padding: 18px; border-radius: 18px; }
    .page-intro::after { right: 12px; top: 10px; font-size: 15px; }
    .page-guide { margin-top: 12px; }
    .workflow-card,
    .summary-card,
    .orders-card,
    .support-card,
    .query-panel,
    .result-panel { border-radius: 18px; }
    .bg-boid-canvas { opacity: .34; }
}

@media (prefers-reduced-motion: reduce) {
    .cartoon-scene,
    .cartoon-scene .bubble { animation: none !important; }
}

html.dark {
    --console-bg: #17192d;
    --cartoon-paper: rgba(31, 32, 54, .96);
    --cartoon-line: rgba(255,255,255,.16);
}

html.dark body::before { opacity: .12; }
html.dark .auth-topbar,
html.dark .status-topbar,
html.dark .enterprise-header { background: rgba(25,27,47,.88); border-color: #0b0c18; }
html.dark .auth-panel,
html.dark .workflow-card,
html.dark .orders-card,
html.dark .support-card,
html.dark .query-panel,
html.dark .result-panel { border-color: #0b0c18; }
html.dark .page-intro,
html.dark .status-heading { border-color: #0b0c18; background: linear-gradient(125deg, #252742, #1d2038); }
html.dark .page-intro h1,
html.dark .status-heading h1 { color: #f7f4ff; }
html.dark .bg-boid-canvas { mix-blend-mode: screen; opacity: .7; }