:root {
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-soft: #f9fafb;
    --surface-strong: #111827;
    --border: #e5e7eb;
    --border-strong: #d1d5db;
    --text: #111827;
    --text-soft: #4b5563;
    --text-muted: #6b7280;
    --accent: #2563eb;
    --accent-soft: #eff6ff;
    --success: #15803d;
    --success-soft: #f0fdf4;
    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --warning: #b45309;
    --warning-soft: #fffbeb;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md: 0 10px 28px rgba(16, 24, 40, .08);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.pro-ui {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", Arial, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

.pro-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.pro-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(229, 231, 235, .9);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(16px);
}

.site-nav {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.brand-mark {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--surface-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-text {
    min-width: 0;
}

.brand-title {
    display: block;
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}

.brand-subtitle {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 11px;
    border-radius: 7px;
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 700;
    transition: background .14s ease, color .14s ease;
}

.nav-link:hover,
.nav-link.is-active {
    background: var(--surface-soft);
    color: var(--text);
}

.nav-link.is-active {
    box-shadow: inset 0 0 0 1px var(--border);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 0 13px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease;
}

.btn:focus-visible,
.download-trigger:focus-visible,
.download-popover-item:focus-visible,
.field:focus-visible {
    outline: 2px solid rgba(37, 99, 235, .38);
    outline-offset: 2px;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    border-color: var(--surface-strong);
    background: var(--surface-strong);
    color: #fff;
    box-shadow: 0 8px 18px rgba(17, 24, 39, .14);
}

.btn-primary:hover {
    background: #1f2937;
    border-color: #1f2937;
}

.btn-secondary {
    border-color: var(--border);
    background: #fff;
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
    background: var(--surface-soft);
    border-color: var(--border-strong);
}

.btn-ghost {
    background: transparent;
    color: var(--text-soft);
}

.btn-ghost:hover {
    background: var(--surface-soft);
    color: var(--text);
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    padding: 0 10px;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 800;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-soft);
    padding: 0 9px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.chip-blue {
    border-color: #bfdbfe;
    background: var(--accent-soft);
    color: #1d4ed8;
}

.chip-green {
    border-color: #bbf7d0;
    background: var(--success-soft);
    color: var(--success);
}

.chip-red {
    border-color: #fecaca;
    background: var(--danger-soft);
    color: var(--danger);
}

.chip-amber {
    border-color: #fde68a;
    background: var(--warning-soft);
    color: var(--warning);
}

.page-main {
    flex: 1;
}

.home-hero {
    padding: 54px 0 30px;
}

.home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .58fr);
    gap: 32px;
    align-items: center;
}

.home-hero-copy {
    max-width: 760px;
}

.home-title {
    margin: 18px 0 14px;
    color: var(--text);
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.04;
    letter-spacing: 0;
    font-weight: 900;
}

.home-copy {
    margin: 0;
    max-width: 680px;
    color: var(--text-soft);
    font-size: 17px;
    line-height: 1.75;
    font-weight: 550;
}

.home-snapshot {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-md);
    padding: 18px;
}

.snapshot-head {
    display: grid;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
}

.snapshot-head span {
    color: var(--accent);
    font-size: 11px;
    font-weight: 900;
}

.snapshot-head strong {
    color: var(--text);
    font-size: 16px;
    line-height: 1.35;
    font-weight: 900;
}

.snapshot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.snapshot-grid div {
    min-height: 70px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.snapshot-grid strong {
    color: var(--text);
    font-size: 16px;
    line-height: 1;
    font-weight: 900;
}

.snapshot-grid span,
.snapshot-note {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.55;
    font-weight: 700;
}

.snapshot-note {
    margin-top: 14px;
}

.home-notice {
    margin: 0 0 24px;
}

.home-section {
    padding: 28px 0;
}

.home-section-soft {
    margin-top: 6px;
    padding: 34px 0 54px;
    border-top: 1px solid var(--border);
    background: #fff;
}

.home-section-head {
    max-width: 660px;
    margin-bottom: 14px;
}

.home-section-head h2,
.home-trust-grid h2 {
    margin: 8px 0 0;
    color: var(--text);
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.18;
    font-weight: 900;
}

.home-action-layout {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 16px;
    align-items: stretch;
}

.home-primary-action,
.home-secondary-list {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.home-primary-action {
    min-height: 248px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    background: var(--surface-strong);
    border-color: var(--surface-strong);
    color: #fff;
}

.home-primary-action:hover {
    background: #1f2937;
    border-color: #1f2937;
}

.home-action-badge {
    width: fit-content;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    padding: 0 10px;
    color: rgba(255,255,255,.78);
    font-size: 11px;
    font-weight: 900;
}

.home-primary-copy {
    display: grid;
    gap: 10px;
}

.home-primary-copy strong {
    color: #fff;
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.15;
    font-weight: 900;
}

.home-primary-copy span {
    max-width: 420px;
    color: rgba(255,255,255,.72);
    font-size: 14px;
    line-height: 1.7;
    font-weight: 650;
}

.home-primary-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.home-primary-meta::after {
    content: "\2192";
    font-size: 16px;
    line-height: 1;
}

.home-secondary-list {
    overflow: hidden;
}

.home-secondary-link {
    min-height: 62px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding: 14px 16px;
    transition: background .14s ease;
}

.home-secondary-link:last-child {
    border-bottom: 0;
}

.home-secondary-link:hover {
    background: var(--surface-soft);
}

.home-link-badge {
    min-height: 28px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-soft);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
}

.home-secondary-link strong {
    display: block;
    color: var(--text);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 900;
}

.home-secondary-link small {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 650;
}

.home-link-arrow {
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 900;
}

.home-trust-grid {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(360px, 1fr);
    gap: 32px;
    align-items: center;
}

.home-trust-grid p {
    margin: 10px 0 0;
    max-width: 560px;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.75;
    font-weight: 600;
}

.home-trust-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.home-trust-list span {
    min-height: 54px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--text);
    padding: 0 14px;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 850;
}

.landing-hero {
    padding: 62px 0 32px;
    background: linear-gradient(180deg, #fff 0%, #f7f8fb 100%);
}

.landing-hero-copy {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.landing-eyebrow {
    margin: 0 auto;
}

.landing-title {
    margin: 20px auto 16px;
    max-width: 900px;
    color: var(--text);
    font-size: 64px;
    line-height: 1.04;
    letter-spacing: 0;
    font-weight: 950;
}

.landing-copy {
    margin: 0 auto;
    max-width: 760px;
    color: var(--text-soft);
    font-size: 17px;
    line-height: 1.75;
    font-weight: 600;
}

.landing-actions {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.landing-proof-row {
    width: fit-content;
    max-width: 100%;
    margin: 34px auto 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--shadow-sm);
}

.landing-proof-row div {
    min-height: 66px;
    padding: 12px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    border-right: 1px solid var(--border);
    text-align: center;
}

.landing-proof-row div:last-child {
    border-right: 0;
}

.landing-proof-row strong {
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    font-weight: 950;
}

.landing-proof-row span {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.3;
    font-weight: 750;
}

.landing-preview {
    margin: 34px auto 0;
    max-width: 960px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-md);
    padding: 14px;
    display: grid;
    grid-template-columns: minmax(0, .9fr) 56px minmax(0, 1.1fr);
    gap: 12px;
    align-items: stretch;
}

.preview-source,
.preview-output {
    min-height: 154px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    padding: 18px;
}

.preview-source {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.preview-label {
    width: fit-content;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text-muted);
    padding: 0 9px;
    font-size: 11px;
    font-weight: 900;
}

.preview-source strong {
    color: var(--text);
    font-size: 22px;
    line-height: 1.18;
    font-weight: 950;
}

.preview-lines {
    display: grid;
    gap: 8px;
}

.preview-lines span {
    height: 8px;
    border-radius: 999px;
    background: #dbe4f0;
}

.preview-lines span:nth-child(1) {
    width: 88%;
}

.preview-lines span:nth-child(2) {
    width: 66%;
}

.preview-lines span:nth-child(3) {
    width: 76%;
}

.preview-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

.preview-arrow svg {
    width: 28px;
    height: 28px;
}

.preview-output {
    background: #f8fbff;
}

.preview-output-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.preview-output-grid span {
    min-height: 44px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #fff;
    color: #1e3a8a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 900;
}

.landing-notice {
    margin: 18px 0 0;
}

.landing-section {
    padding: 42px 0;
}

.landing-section-soft {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: #fff;
}

.landing-section-head {
    max-width: 720px;
    margin: 0 auto 22px;
    text-align: center;
}

.landing-section-head.compact {
    margin: 0;
    text-align: left;
}

.landing-section-head h2 {
    margin: 8px 0 0;
    color: var(--text);
    font-size: 34px;
    line-height: 1.16;
    font-weight: 950;
}

.landing-section-head p {
    margin: 10px auto 0;
    max-width: 620px;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.7;
    font-weight: 650;
}

.landing-section-head.compact p {
    margin-left: 0;
}

.landing-tool-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.landing-tool-card {
    min-height: 150px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.landing-tool-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.landing-tool-primary {
    grid-row: span 2;
    min-height: 312px;
    background: var(--surface-strong);
    border-color: var(--surface-strong);
    color: #fff;
}

.landing-tool-primary:hover {
    border-color: #1f2937;
    background: #1f2937;
}

.tool-icon {
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    font-weight: 950;
}

.tool-icon svg {
    width: 22px;
    height: 22px;
}

.landing-tool-primary .tool-icon {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.landing-tool-card strong {
    display: block;
    color: var(--text);
    font-size: 16px;
    line-height: 1.25;
    font-weight: 950;
}

.landing-tool-card small {
    display: block;
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.55;
    font-weight: 650;
}

.landing-tool-primary strong {
    color: #fff;
    font-size: 22px;
}

.landing-tool-primary small {
    max-width: 440px;
    color: rgba(255, 255, 255, .72);
}

.landing-tool-card em {
    width: fit-content;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    color: #fff;
    padding: 0 11px;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.landing-capability-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.capability-card {
    min-height: 170px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.capability-card strong {
    color: var(--text);
    font-size: 16px;
    line-height: 1.25;
    font-weight: 950;
}

.capability-card span {
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.65;
    font-weight: 650;
}

.landing-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(250px, .9fr);
    gap: 12px;
    align-items: stretch;
}

.flow-item,
.flow-cta {
    min-height: 132px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    padding: 16px;
}

.flow-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}

.flow-item span {
    color: var(--accent);
    font-size: 12px;
    line-height: 1;
    font-weight: 950;
}

.flow-item strong {
    color: var(--text);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 950;
}

.flow-item small {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.55;
    font-weight: 650;
}

.flow-cta {
    background: var(--surface-strong);
    border-color: var(--surface-strong);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
}

.flow-cta strong {
    color: #fff;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 950;
}

.flow-cta .btn-primary {
    width: fit-content;
    border-color: #fff;
    background: #fff;
    color: var(--surface-strong);
    box-shadow: none;
}

.workspace {
    padding: 34px 0 34px;
}

.workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr);
    gap: 28px;
    align-items: start;
}

.intro-panel {
    padding: 12px 0;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    padding: 0 10px;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 800;
    box-shadow: var(--shadow-sm);
}

.hero-title {
    margin: 18px 0 12px;
    color: var(--text);
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.04;
    letter-spacing: 0;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.hero-copy {
    margin: 0;
    max-width: 620px;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.75;
    font-weight: 500;
}

.hero-actions {
    margin-top: 22px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.proof-grid {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.proof-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    padding: 13px;
    box-shadow: var(--shadow-sm);
}

.proof-value {
    display: block;
    color: var(--text);
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

.proof-label {
    display: block;
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.capability-list {
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
    list-style: none;
}

.capability-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.55;
    font-weight: 600;
}

.workspace-support-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .91fr) minmax(0, .91fr);
    gap: 14px;
}

.support-panel {
    min-height: 178px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    padding: 18px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.support-kicker {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
}

.support-title {
    margin: 4px 0 0;
    color: var(--text);
    font-size: 16px;
    line-height: 1.25;
    font-weight: 900;
}

.support-desc {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.65;
    font-weight: 650;
}

.flow-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.flow-step {
    min-width: 0;
    border-top: 1px solid var(--border);
    padding-top: 11px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
    font-weight: 650;
}

.flow-index {
    display: block;
    margin-bottom: 6px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 900;
}

.flow-step strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
}

.flow-step span:last-child {
    display: block;
}

.focus-list {
    display: grid;
}

.focus-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    border-top: 1px solid var(--border);
    padding: 10px 0;
    align-items: start;
}

.focus-row:last-child {
    padding-bottom: 0;
}

.focus-row span {
    color: var(--accent);
    font-size: 12px;
    font-weight: 900;
}

.focus-row strong {
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.55;
    font-weight: 750;
}

.format-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.format-pill {
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    padding: 8px 10px;
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

.format-pill span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 750;
}

.format-docx {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.format-tex {
    background: #fff7ed;
    border-color: #fed7aa;
}

.format-json {
    background: #f5f3ff;
    border-color: #ddd6fe;
}

.format-md {
    background: #ecfeff;
    border-color: #a5f3fc;
}

.commercial-section {
    margin-top: 22px;
}

.section-heading {
    max-width: 760px;
    margin-bottom: 14px;
}

.section-heading.compact {
    max-width: 680px;
}

.section-eyebrow {
    display: block;
    color: var(--accent);
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
}

.section-heading h2 {
    margin: 8px 0 0;
    color: var(--text);
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0;
}

.section-heading p {
    margin: 10px 0 0;
    max-width: 680px;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.75;
    font-weight: 600;
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.solution-card {
    min-height: 178px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    padding: 18px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.solution-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.solution-icon {
    min-width: 42px;
    min-height: 28px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-soft);
    color: var(--text);
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.solution-card h3,
.scenario-panel h3 {
    margin: 16px 0 0;
    color: var(--text);
    font-size: 16px;
    line-height: 1.25;
    font-weight: 900;
}

.solution-card p,
.scenario-panel p {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.65;
    font-weight: 650;
}

.scenario-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.scenario-panel {
    min-height: 150px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    padding: 17px;
    box-shadow: var(--shadow-sm);
}

.scenario-panel span {
    color: var(--accent);
    font-size: 11px;
    font-weight: 900;
}

.assurance-strip {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.assurance-item {
    min-height: 92px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    border-right: 1px solid var(--border);
}

.assurance-item:last-child {
    border-right: 0;
}

.assurance-item strong {
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
}

.assurance-item span {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.55;
    font-weight: 700;
}

.document-fit-strip {
    margin-top: 22px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    padding: 18px;
    display: grid;
    grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr);
    gap: 20px;
    align-items: center;
}

.document-fit-head h2 {
    margin: 8px 0 0;
    color: var(--text);
    font-size: 20px;
    line-height: 1.25;
    font-weight: 900;
}

.document-fit-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.document-fit-list span {
    min-height: 52px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--text-muted);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
}

.document-fit-list strong {
    color: var(--text);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 900;
}

.check-dot {
    margin-top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tool-panel,
.data-panel {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.notice-strip {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
    color: #92400e;
    padding: 10px 13px;
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 800;
    box-shadow: var(--shadow-sm);
}

.notice-strip svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.tool-panel {
    overflow: hidden;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    padding: 16px 18px;
    background: var(--surface-soft);
}

.panel-title {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
}

.panel-desc {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.upload-zone {
    margin: 18px;
    min-height: 260px;
    border: 1.5px dashed #cbd5e1;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff 0%, #f9fafb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    cursor: pointer;
    text-align: center;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.upload-zone:hover,
.upload-zone.drag-over {
    border-color: var(--accent);
    background: #fff;
    box-shadow: inset 0 0 0 3px rgba(37, 99, 235, .08);
}

.upload-zone.file-selected {
    border-color: #86efac;
    background: var(--success-soft);
}

.upload-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.upload-icon {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.upload-icon svg,
.btn svg,
.brand-mark svg,
.section-icon svg {
    width: 18px;
    height: 18px;
}

.upload-title {
    color: var(--text);
    font-size: 16px;
    font-weight: 900;
}

.upload-help {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.55;
}

.file-name {
    max-width: 100%;
    color: var(--text);
    font-size: 15px;
    font-weight: 900;
    word-break: break-word;
}

.advanced-box {
    position: relative;
    margin: 0 18px 18px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.advanced-toggle {
    width: 100%;
    border: 0;
    background: #fff;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    cursor: pointer;
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
}

.advanced-toggle:hover {
    background: var(--surface-soft);
}

.advanced-arrow {
    transition: transform .16s ease;
}

.advanced-arrow.is-open {
    transform: rotate(180deg);
}

.advanced-settings {
    border-top: 1px solid var(--border);
    padding: 14px;
    display: grid;
    gap: 12px;
}

.advanced-settings.is-hidden,
.is-hidden {
    display: none !important;
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.field-group label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 800;
}

.field {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    color: var(--text);
    padding: 0 10px;
    font-size: 12px;
    font-weight: 700;
}

select.field {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 9px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 30px;
}

.vip-lock {
    position: absolute;
    inset: 49px 0 0;
    background: rgba(255, 255, 255, .76);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--border);
    background: var(--surface-soft);
    padding: 14px 18px;
}

.upload-service-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid var(--border);
    background: #fff;
    padding: 12px 18px 16px;
}

.upload-service-row span {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--text-soft);
    padding: 0 9px;
    font-size: 11px;
    font-weight: 800;
}

.price-note {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.latest-task {
    margin-top: 18px;
}

.task-row,
.log-row {
    display: grid;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    padding: 13px 16px;
}

.task-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.task-row:last-child,
.log-row:last-child {
    border-bottom: 0;
}

.task-main {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.file-icon {
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.file-icon svg {
    width: 16px;
    height: 16px;
}

.task-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.task-meta {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}

.task-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

@keyframes progressPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .42; }
}

.pulse-slow {
    animation: progressPulse 1.8s ease-in-out infinite;
}

.dashboard-hero {
    padding: 34px 0 26px;
}

.dashboard-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.page-title {
    margin: 0;
    color: var(--text);
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.08;
    font-weight: 900;
}

.page-copy {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
}

.stats-grid {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.stat-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

.stat-label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.stat-value {
    margin-top: 8px;
    color: var(--text);
    font-size: 26px;
    line-height: 1;
    font-weight: 900;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: 18px;
    padding-bottom: 52px;
}

.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    padding: 15px 16px;
    background: var(--surface-soft);
}

.section-title {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
}

.section-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.section-subtitle-inline {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.retention-tag {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    color: var(--text-muted);
    padding: 0 7px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.empty-state {
    padding: 44px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.log-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.log-desc {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.log-time {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}

.amount-plus {
    color: var(--success);
}

.amount-minus {
    color: var(--danger);
}

.download-trigger {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--surface-strong);
    border-radius: 7px;
    background: var(--surface-strong);
    color: #fff;
    padding: 0 11px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(17, 24, 39, .12);
    transition: background .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease;
    touch-action: manipulation;
}

.download-trigger:hover {
    background: #1f2937;
    border-color: #1f2937;
}

.download-trigger:active {
    transform: translateY(1px);
}

.download-trigger svg {
    width: 14px;
    height: 14px;
}

.download-trigger-chevron {
    opacity: .72;
    transition: transform .16s ease;
}

.download-trigger[aria-expanded="true"] .download-trigger-chevron {
    transform: rotate(180deg);
}

.download-popover {
    position: fixed;
    z-index: 9999;
    width: 230px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    padding: 6px;
    box-shadow: 0 18px 44px rgba(17, 24, 39, .16), 0 0 0 1px rgba(17, 24, 39, .03);
    animation: downloadMenuIn .12s ease-out;
    transform-origin: top right;
}

@keyframes downloadMenuIn {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.download-popover-title {
    padding: 7px 9px 6px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
}

.download-popover-item {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    padding: 7px 8px;
    color: var(--text-soft);
    text-align: left;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}

.download-popover-item:hover {
    background: var(--surface-soft);
    color: var(--text);
}

.download-popover-item.is-disabled {
    color: #cbd5e1;
    cursor: not-allowed;
}

.download-popover-item.is-disabled:hover {
    background: transparent;
    color: #cbd5e1;
}

.download-popover-icon {
    width: 26px;
    height: 26px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-soft);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
}

.download-popover-item[data-format="latex"] .download-popover-icon { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.download-popover-item[data-format="docx"] .download-popover-icon { background: #eff6ff; border-color: #bfdbfe; color: #2563eb; }
.download-popover-item[data-format="json"] .download-popover-icon { background: #f5f3ff; border-color: #ddd6fe; color: #7c3aed; }
.download-popover-item[data-format="markdown"] .download-popover-icon { background: #ecfeff; border-color: #a5f3fc; color: #0891b2; }
.download-popover-item.is-disabled .download-popover-icon { background: var(--surface-soft); border-color: #f1f5f9; color: #cbd5e1; }

.download-popover-name {
    display: block;
    color: inherit;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.1;
}

.download-popover-desc {
    display: block;
    margin-top: 3px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.download-popover-ext {
    min-width: 42px;
    border-radius: 999px;
    background: #f1f5f9;
    color: var(--text-muted);
    padding: 3px 6px;
    text-align: center;
    font-size: 10px;
    font-weight: 900;
}

.download-popover-item.is-disabled .download-popover-ext {
    background: var(--surface-soft);
    color: #cbd5e1;
}

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: grid;
    gap: 8px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: min(360px, calc(100vw - 32px));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    background: var(--surface-strong);
    color: #fff;
    box-shadow: var(--shadow-md);
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 800;
    animation: toastIn .18s ease-out;
}

.toast.out {
    animation: toastOut .18s ease-in forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-6px); }
}

.site-footer {
    border-top: 1px solid var(--border);
    background: #fff;
    padding: 22px 0;
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.simple-hero {
    padding: 42px 0 24px;
}

.simple-hero-inner {
    max-width: 780px;
}

.simple-title {
    margin: 0;
    color: var(--text);
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.08;
    font-weight: 900;
}

.simple-copy {
    margin: 12px 0 0;
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.75;
    font-weight: 600;
}

.price-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.price-grid-five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.price-tile {
    display: block;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    padding: 15px;
    box-shadow: var(--shadow-sm);
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.price-tile:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.price-tile-label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.price-tile-value {
    margin-top: 8px;
    color: var(--text);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

.package-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.package-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 260px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.package-card.is-featured {
    border-color: #93c5fd;
    box-shadow: 0 16px 42px rgba(37, 99, 235, .12);
}

.package-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 24px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: #1d4ed8;
    padding: 0 9px;
    font-size: 11px;
    font-weight: 900;
}

.package-name {
    margin-top: 14px;
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
}

.package-points {
    margin-top: 10px;
    color: var(--text);
    font-size: 36px;
    line-height: 1;
    font-weight: 900;
}

.package-meta {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.package-footer {
    margin-top: auto;
    display: grid;
    gap: 12px;
}

.vip-panel {
    margin-top: 22px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.feature-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
    gap: 18px;
    align-items: stretch;
}

.result-area {
    min-height: 320px;
    max-height: 520px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #0f172a;
    color: #d1d5db;
    padding: 16px;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    line-height: 1.65;
}

.result-placeholder {
    color: #94a3b8;
    font-style: italic;
}

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

.content-panel {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    padding: 22px;
}

.content-panel h2 {
    margin: 0 0 10px;
    color: var(--text);
    font-size: 18px;
    font-weight: 900;
}

.content-panel p {
    margin: 0;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.8;
    font-weight: 600;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding-bottom: 52px;
}

.auth-shell {
    padding: 44px 0 54px;
}

.auth-grid {
    display: grid;
    grid-template-columns: minmax(0, .94fr) minmax(380px, 1.06fr);
    gap: 22px;
    align-items: stretch;
}

.auth-aside,
.auth-card,
.profile-card,
.payment-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.auth-aside {
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 520px;
}

.auth-aside-title {
    margin: 16px 0 0;
    color: var(--text);
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.08;
    font-weight: 900;
}

.auth-aside-copy {
    margin: 14px 0 0;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.75;
    font-weight: 600;
}

.auth-card {
    overflow: hidden;
}

.auth-card-head {
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
    padding: 20px 22px;
}

.auth-card-title {
    margin: 0;
    color: var(--text);
    font-size: 20px;
    line-height: 1.2;
    font-weight: 900;
}

.auth-card-copy {
    margin: 7px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
    font-weight: 600;
}

.auth-card-body {
    padding: 22px;
}

.auth-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    padding: 4px;
    margin-bottom: 18px;
}

.auth-tab {
    min-height: 38px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
}

.auth-tab.is-active {
    background: #fff;
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.form-stack {
    display: grid;
    gap: 14px;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.form-field {
    display: grid;
    gap: 6px;
}

.form-label {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 900;
}

.form-control {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    color: var(--text);
    padding: 0 11px;
    font-size: 14px;
    font-weight: 700;
    outline: none;
    transition: border-color .14s ease, box-shadow .14s ease;
}

textarea.form-control {
    min-height: 118px;
    padding-top: 10px;
    resize: vertical;
}

.form-control::placeholder {
    color: #9ca3af;
    font-weight: 600;
}

.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.form-control.is-code {
    letter-spacing: .18em;
    font-weight: 900;
}

.form-error {
    margin: 0;
    color: var(--danger);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.form-help {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.55;
}

.form-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.input-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.password-wrap {
    position: relative;
}

.password-wrap .form-control {
    padding-right: 44px;
}

.password-toggle {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.password-toggle:hover {
    background: var(--surface-soft);
    color: var(--text);
}

.password-toggle svg {
    width: 17px;
    height: 17px;
}

.auth-footnote {
    margin-top: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.text-link {
    color: var(--accent);
    font-weight: 900;
}

.text-link:hover {
    text-decoration: underline;
}

.notice {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    padding: 11px 13px;
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
}

.notice-success {
    border-color: #bbf7d0;
    background: var(--success-soft);
    color: var(--success);
}

.notice-danger {
    border-color: #fecaca;
    background: var(--danger-soft);
    color: var(--danger);
}

.mini-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
}

.mini-metric {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    padding: 13px;
}

.mini-metric-value {
    display: block;
    color: var(--text);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

.mini-metric-label {
    display: block;
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.payment-shell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 42px 0 54px;
}

.payment-card {
    width: min(440px, calc(100% - 28px));
    overflow: hidden;
}

.payment-head {
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
    padding: 20px 22px;
    text-align: center;
}

.payment-icon {
    width: 42px;
    height: 42px;
    margin: 0 auto 12px;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    background: var(--success-soft);
    color: #16a34a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.payment-icon svg {
    width: 22px;
    height: 22px;
}

.payment-body {
    padding: 22px;
    text-align: center;
}

.payment-amount {
    margin: 8px 0 18px;
    color: var(--text);
    font-size: 36px;
    line-height: 1;
    font-weight: 900;
}

.payment-qrcode {
    width: 218px;
    height: 218px;
    margin: 0 auto 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--text-soft);
    padding: 0 12px;
    font-size: 12px;
    font-weight: 900;
}

.profile-layout {
    padding: 34px 0 52px;
}

.profile-grid {
    display: grid;
    grid-template-columns: minmax(240px, .45fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.profile-card {
    overflow: hidden;
}

.profile-card-body {
    padding: 18px;
}

.profile-nav-list {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.profile-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    padding: 0 11px;
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 800;
}

.danger-zone {
    border-color: #fecaca;
    background: var(--danger-soft);
}

.btn-danger {
    border-color: var(--danger);
    background: var(--danger);
    color: #fff;
}

.btn-danger:hover {
    border-color: #b91c1c;
    background: #b91c1c;
}

.btn[disabled],
.download-trigger[disabled] {
    opacity: .58;
    cursor: not-allowed;
    transform: none;
}

.w-full {
    width: 100%;
}

.api-doc-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
    gap: 18px;
    align-items: start;
}

.api-doc-panel {
    overflow: hidden;
}

.api-center-card {
    padding: 16px;
    display: grid;
    gap: 12px;
}

.api-center-points {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    padding: 13px;
    display: grid;
    gap: 6px;
}

.api-center-points span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
}

.api-center-points strong {
    color: var(--text);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 850;
}

.api-key-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.api-key-reveal {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.api-key-reveal code {
    display: block;
    overflow-x: auto;
    border: 1px solid #bbf7d0;
    border-radius: 7px;
    background: #fff;
    color: #166534;
    padding: 10px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    line-height: 1.5;
}

.api-doc-body {
    padding: 18px;
    display: grid;
    gap: 18px;
}

.api-doc-section {
    display: grid;
    gap: 10px;
}

.api-doc-section + .api-doc-section {
    border-top: 1px solid var(--border);
    padding-top: 18px;
}

.api-doc-section h3 {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 900;
}

.api-doc-section p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.65;
    font-weight: 650;
}

.api-endpoint-list,
.api-note-grid {
    display: grid;
    gap: 8px;
}

.api-endpoint-list span,
.api-note-grid span {
    min-height: 36px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-soft);
    color: var(--text-soft);
    padding: 9px 11px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 750;
}

.api-table {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.api-table div {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 12px;
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
}

.api-table div:last-child {
    border-bottom: 0;
}

.api-table strong {
    color: var(--text);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 900;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.api-table span {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 650;
}

.api-endpoint-list strong {
    display: inline-flex;
    min-width: 44px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 900;
}

.api-note-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.code-panel {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #0f172a;
    color: #e5e7eb;
    overflow: hidden;
}

.code-panel pre {
    margin: 0;
    overflow-x: auto;
    padding: 14px;
}

.code-panel code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    line-height: 1.65;
}

@media (max-width: 980px) {
    .nav-links {
        display: none;
    }

    .workspace-grid,
    .home-hero-grid,
    .home-action-layout,
    .home-trust-grid,
    .landing-capability-grid,
    .workspace-support-grid,
    .document-fit-strip,
    .api-doc-grid,
    .solution-grid,
    .dashboard-grid,
    .auth-grid,
    .profile-grid {
        grid-template-columns: 1fr;
    }

    .workspace-grid {
        gap: 18px;
    }

    .landing-title {
        font-size: 48px;
    }

    .landing-preview {
        max-width: 760px;
        grid-template-columns: 1fr;
    }

    .preview-arrow {
        min-height: 26px;
        transform: rotate(90deg);
    }

    .landing-tool-grid,
    .landing-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-tool-primary {
        grid-column: span 2;
        grid-row: auto;
        min-height: 220px;
    }

    .stats-grid,
    .price-grid,
    .package-grid,
    .content-grid,
    .scenario-grid,
    .assurance-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .price-grid-five {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .assurance-item:nth-child(2) {
        border-right: 0;
    }

    .assurance-item:nth-child(-n + 2) {
        border-bottom: 1px solid var(--border);
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .flow-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .auth-aside {
        min-height: auto;
    }
}

@media (max-width: 640px) {
    .pro-container {
        width: min(100% - 24px, 1180px);
    }

    .site-nav {
        min-height: 58px;
        gap: 10px;
    }

    .brand-subtitle,
    .hide-mobile {
        display: none !important;
    }

    .nav-actions {
        gap: 5px;
    }

    .btn {
        min-height: 34px;
        padding: 0 9px;
        font-size: 12px;
    }

    .brand-mark {
        width: 32px;
        height: 32px;
    }

    .brand-title {
        font-size: 13px;
    }

    .workspace {
        padding: 24px 0 30px;
    }

    .home-hero {
        padding: 34px 0 20px;
    }

    .home-title {
        font-size: 32px;
    }

    .home-copy {
        font-size: 15px;
    }

    .home-snapshot {
        padding: 16px;
    }

    .home-trust-list,
    .document-fit-list {
        grid-template-columns: 1fr;
    }

    .home-primary-action {
        min-height: 210px;
        padding: 18px;
    }

    .home-secondary-link {
        grid-template-columns: 46px minmax(0, 1fr) auto;
        padding: 13px 14px;
    }

    .home-section,
    .home-section-soft {
        padding: 24px 0;
    }

    .landing-hero {
        padding: 38px 0 24px;
    }

    .landing-title {
        font-size: 34px;
    }

    .landing-copy {
        font-size: 15px;
    }

    .landing-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .landing-actions .btn {
        width: 100%;
        min-height: 42px;
    }

    .landing-proof-row {
        width: 100%;
        border-radius: 8px;
        grid-template-columns: 1fr;
    }

    .landing-proof-row div {
        min-height: 58px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .landing-proof-row div:last-child {
        border-bottom: 0;
    }

    .landing-preview {
        margin-top: 22px;
        padding: 10px;
    }

    .preview-source,
    .preview-output {
        min-height: auto;
        padding: 15px;
    }

    .preview-source {
        gap: 22px;
    }

    .preview-source strong {
        font-size: 19px;
    }

    .preview-output-grid,
    .landing-tool-grid,
    .landing-capability-grid,
    .landing-flow {
        grid-template-columns: 1fr;
    }

    .landing-section {
        padding: 28px 0;
    }

    .landing-section-head {
        text-align: left;
    }

    .landing-section-head h2 {
        font-size: 24px;
    }

    .landing-section-head p {
        margin-left: 0;
        font-size: 13px;
    }

    .landing-tool-primary {
        grid-column: auto;
        min-height: 210px;
    }

    .landing-tool-card,
    .capability-card,
    .flow-item,
    .flow-cta {
        min-height: auto;
    }

    .hero-title {
        font-size: 30px;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
        min-height: 42px;
    }

    .panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .proof-grid,
    .field-grid,
    .form-grid-2,
    .mini-metric-grid,
    .stats-grid,
    .price-grid,
    .package-grid,
    .content-grid,
    .solution-grid,
    .scenario-grid,
    .assurance-strip {
        grid-template-columns: 1fr;
    }

    .price-grid-five {
        grid-template-columns: 1fr;
    }

    .section-heading h2 {
        font-size: 22px;
    }

    .solution-card,
    .scenario-panel {
        min-height: auto;
        padding: 16px;
    }

    .assurance-item,
    .assurance-item:nth-child(2),
    .assurance-item:nth-child(-n + 2) {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .assurance-item:last-child {
        border-bottom: 0;
    }

    .vip-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .upload-zone {
        margin: 14px;
        min-height: 220px;
        padding: 20px;
    }

    .workspace-support-grid {
        margin-top: 14px;
    }

    .support-panel {
        min-height: auto;
        padding: 16px;
    }

    .flow-steps,
    .format-list {
        grid-template-columns: 1fr;
    }

    .advanced-box,
    .submit-row,
    .upload-service-row {
        margin-left: 14px;
        margin-right: 14px;
    }

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

    .task-row {
        grid-template-columns: 1fr;
    }

    .task-actions {
        justify-content: flex-start;
        padding-left: 40px;
    }

    .dashboard-head,
    .footer-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .auth-shell,
    .profile-layout,
    .payment-shell {
        padding: 24px 0 38px;
    }

    .auth-aside,
    .auth-card-body,
    .payment-body,
    .profile-card-body {
        padding: 16px;
    }

    .input-action {
        grid-template-columns: 1fr;
    }

    .api-key-form,
    .api-note-grid,
    .api-table div {
        grid-template-columns: 1fr;
    }
}

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