@charset "UTF-8";

/* V5 visual layer. Load after styles, live, compare, skills and prompts CSS.
   Layout, image fitting and comparison transforms belong to their modules. */
:root {
  color-scheme: light;
  --page: #fff8ee;
  --paper: #fffdf9;
  --ink: #39213f;
  --muted: #82718a;
  --line: #e8e0dd;
  --green: #39213f;
  --green-deep: #39213f;
  --green-pale: #f4eef8;
  --green-mid: #e9ddf4;
  /* Existing modules use orange tokens for actions, never for errors here. */
  --orange: #ef7c2f;
  --orange-dark: #d9641e;
  --orange-pale: #fff0e3;
  --radius: 12px;
  --sidebar: 220px;
  --shadow: 0 12px 38px rgb(57 33 63 / 8%);
  --visual-success: #216341;
  --visual-success-bg: #e8f5ec;
  --visual-danger: #b33836;
  --visual-danger-bg: #fff1f0;
  --visual-warning: #795c27;
  --visual-warning-bg: #faf5e9;
  --visual-focus: #8965b0;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--page);
}
body { color: var(--ink); background: var(--page); }
#library-results:focus-visible { outline: 3px solid var(--visual-focus); outline-offset: 3px; }
a { color: var(--green); }
a:hover { color: var(--green-deep); }

/* Shared shell: keep the approved 220px sidebar and 68px header. */
.sidebar { background: #fffdf9; border-right-color: var(--line); }
.brand, .brand:hover { color: var(--ink); }
.brand img, .brand > svg { width: 44px; height: 44px; flex: 0 0 44px; }
.brand strong { color: var(--ink); letter-spacing: .8px; }
.brand small, .brand-subtitle, .sidebar-service-note { color: var(--muted); }
/* The native plum mark stays transparent on paper surfaces. */
.login-card .brand img, .login-card .brand > svg { background: transparent; }
.nav-item { color: #75627e; }
.nav-item:hover { background: #f4eef8; color: var(--ink); }
.nav-item.active { background: linear-gradient(110deg, #39213f, #51305b); color: #fffdf9; box-shadow: 0 5px 14px #39213f10; }
.nav-item.active::before { background: #ef7c2f; left: auto; right: 12px; top: 50%; bottom: auto; width: 6px; height: 6px; border-radius: 50%; transform: translateY(-50%); }
.nav-item.active .nav-count { background: #e9ddf4; }
.topbar { background: #fffdf9; border-bottom-color: var(--line); }
.breadcrumb, .breadcrumb button { color: var(--muted); }
.breadcrumb strong, .breadcrumb > span:last-child, .breadcrumb a { color: var(--green); }
.breadcrumb .separator, .breadcrumb > span:first-child { color: #cdbddd; }
.avatar-button > span:first-child, .avatar-circle, .avatar { background: #e9ddf4; color: var(--green); }
.account-dropdown { border-color: var(--line); box-shadow: var(--shadow); }
.dropdown-profile { border-color: var(--line); }
.dropdown-profile strong { color: var(--ink); }
.dropdown-profile small, .dropdown-user small { color: var(--muted); }
.account-dropdown button:hover, .dropdown-admin-link:hover { background: #f4eef8; }

/* Controlled light and orbit detail live only inside the existing banner. */
.hero {
  color: #fff;
  background: radial-gradient(ellipse at 76% 0%, #51335c 0, #51335c 28%, transparent 67%), linear-gradient(112deg, #39213f, #39213f);
  border-color: #51335c;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%);
}
.hero::after { border-color: rgb(225 245 234 / 13%); }
.hero h1 { color: #fff; letter-spacing: -.5px; }
.hero p { color: #cdbddd; }
.hero .eyebrow { color: #cdbddd; }
.hero-art img { border-color: #fff; box-shadow: 0 9px 23px rgb(4 19 12 / 22%); }
.section-title, .section-title h2, .page-heading h1 { color: var(--ink); }
.section-title small, .section-head > p, .library-caption, .result-count,
.page-heading > p, .catalog-pagination, .download-pagination { color: var(--muted); }
.library-caption strong { color: #6b5773; }
.searchbox { border-color: var(--line); color: var(--muted); background: #fff; }
.searchbox input, .form-field input, .form-field select, .form-field textarea { color: var(--ink); }
.searchbox input::placeholder, .form-field input::placeholder, .form-field textarea::placeholder { color: #82718a; }
.searchbox:focus-within { border-color: var(--visual-focus); box-shadow: 0 0 0 3px rgb(137 101 176 / 12%); }
.skill-card { border-color: var(--line); border-radius: 11px; box-shadow: 0 3px 12px rgb(57 33 63 / 3%); }
.skill-card:hover { border-color: #cdbddd; box-shadow: 0 9px 24px rgb(57 33 63 / 8%); }
.card-cover, .skill-image-missing { background: #f4eef8; }
.skill-image-missing { color: var(--muted); }
.card-title { color: var(--ink); }
.card-description { color: var(--muted); }
.image-label { color: var(--green); background: rgb(255 255 255 / 96%); }
.save-button { color: #6b5773; background: rgb(255 255 255 / 97%); }
.save-button:hover, .save-button.active, .save-button[aria-pressed="true"] { color: var(--green); background: #e9ddf4; }
.save-button.active svg, .save-button[aria-pressed="true"] svg,
.minor-actions button.active svg, .minor-actions button[aria-pressed="true"] svg { fill: #e9ddf4; }
.minor-actions button { color: var(--muted); }
.minor-actions button:hover, .minor-actions button.active, .minor-actions button[aria-pressed="true"] { color: var(--green); }
.text-link, .text-button { color: var(--green); }
.text-link:hover, .text-button:hover { color: var(--green-deep); }
.primary, .member-trigger { background: #ef7c2f; border-color: #ef7c2f; color: #fff; }
.primary:hover:not(:disabled), .member-trigger:hover:not(:disabled) { background: #d9641e; border-color: #d9641e; color: #fff; }
.secondary { background: #fff; border-color: #e8e0dd; color: var(--green); }
.secondary:hover:not(:disabled) { background: #f4eef8; border-color: #cdbddd; color: var(--green); }
.secondary.selected { color: var(--green); border-color: #cdbddd; background: #e9ddf4; }
.quiet-btn, .load-more { color: #6b5773; border-color: #e8e0dd; background: #f4eef8; }
.quiet-btn:hover, .load-more:hover, .icon-button:hover { background: #e9ddf4; }
.icon-button, .back-link { color: var(--muted); }
.pagination button[aria-current="page"], .download-pagination [aria-current="page"] { background: #39213f; border-color: #39213f; color: #fff; }

/* Detail / complete reference images: color and borders only. */
.detail-preview { background: #f4eef8; border-color: var(--line); }
.detail-description, .detail-info .eyebrow, .member-note, .detail-meta,
.detail-preview-caption, .reference-name, .preview-caption, .detail-content > p,
.skill-file-info dt, .feature-box > span, .feature-box p { color: var(--muted); }
.detail-info h1, .detail-content > h2, .feature-box h3 { color: var(--ink); }
.compatibility-note, .code-box { background: #f4eef8; border-color: var(--line); color: #51335c; }
.compatibility-note strong { color: var(--green); }
.platform-tag, .platform-tags span, .detail-tags span, .skill-keywords span { color: #6b5773; border-color: #e8e0dd; background: #f4eef8; }
.feature-box, .detail-tabs, .detail-secondary-actions { border-color: var(--line); }
.detail-tabs button, .detail-secondary-actions .text-button { color: var(--muted); }
.detail-tabs button.active, .detail-secondary-actions .text-button.selected { color: var(--green); }
.preview-caption { background: #fff; }

/* Comparison keeps every existing row, viewport, image size and transform. */
.comparison-heading .eyebrow, .comparison-heading h1 + p,
.comparison-count-label, .comparison-column-title small, .comparison-bottom-note,
.comparison-toolbar, .compare-zoom-toolbar p, .compare-zoom-controls > span,
.compare-zoom-column > p, .compare-zoom-dialog .compare-zoom-note,
#compare-view .compare-zoom-controls label { color: var(--muted); }
.comparison-heading h1, .comparison-column-title h2, .compare-zoom-title h3 { color: var(--ink); }
.comparison-note { background: #f4eef8; color: #51335c; }
.comparison-board, .comparison-empty, .compare-card, .compare-tray { border-color: var(--line); }
.comparison-table th, .comparison-table td { border-color: var(--line); }
.comparison-table thead th:first-child, .comparison-table tbody th { background: #f4eef8; color: #6b5773; }
.comparison-count { color: var(--green); }
.comparison-count small { color: var(--muted); }
.comparison-letter { background: #e9ddf4; color: var(--green); }
.comparison-table td > p, .comparison-features li { color: #6b5773; }
.comparison-features li::before { background: #82718a; }
.comparison-table .comparison-summary-row > * { background: #f4eef8; }
.comparison-table td > .comparison-summary { color: var(--green); }
.comparison-table td > .comparison-muted, .comparison-empty > p { color: var(--muted); }
.comparison-table .comparison-missing { background: #fffdf9; color: var(--muted); }
.comparison-add { color: #6b5773; border-color: #cdbddd; background: #fffdf9; }
.comparison-add:hover { background: #f4eef8; }
.comparison-table .comparison-image-row td, .comparison-picture,
.zoom-viewport, #compare-view .compare-viewport { background: #f4eef8; border-color: #e8e0dd; }
#compare-view .compare-image-message, #compare-view .compare-image-unavailable { color: var(--muted); }
.compare-zoom-options { background: #f4eef8; border-color: var(--line); }
.compare-zoom-options button { color: #6b5773; }
.compare-zoom-options button.active { color: #fff; background: var(--green); }
#compare-view #compare-zoom { color: var(--green); border-color: #e8e0dd; }
#compare-view #compare-sync { accent-color: var(--green); }
.compare-tray { box-shadow: 0 10px 34px rgb(57 33 63 / 12%); background: rgb(255 255 255 / 98%); }
.tray-label strong, .compare-tray > strong { color: var(--green); }
.tray-label span, .tray-item span, .tray-item button { color: var(--muted); }

/* Account, history and authentication share white paper and readable text. */
.record-list, .record-row, .profile-card, .membership-card, .profile-fields,
.account-actions, .auth-layout, .auth-links, .main > .success-panel { border-color: var(--line); }
.record-main h2, .record-main h3, .profile-heading h2, .membership-card h2,
.profile-fields dd, .success-panel > h1, .success-panel > h3 { color: var(--ink); }
.record-main p, .record-date, .record-date > span, .record-date time,
.profile-fields dt, .membership-heading .eyebrow, .membership-card > p,
.membership-expiry > span, .membership-expiry small, .membership-expiry p,
.membership-price small, .member-expiry-label, .membership-sync,
.member-benefits li, .membership-card .member-benefits, .membership-card > .payment-method,
.auth-card > p, .auth-card form > p:not(.auth-links):not(.form-error),
.form-row, .auth-links, .form-note, .membership-card > .form-note { color: var(--muted); }
.avatar-large { background: #e9ddf4; color: var(--green); }
.membership-card { background: linear-gradient(130deg, #f4eef8, #fff 70%); }
.membership-card .membership-price, .membership-expiry strong { color: var(--green); }
.membership-expiry { background: #fff; border-color: var(--line); }
.account-shortcuts, .account-tip { border-color: var(--line); background: #f4eef8; color: var(--muted); }
.account-shortcuts .secondary { background: #fff; }
.auth-layout { box-shadow: 0 12px 35px rgb(57 33 63 / 5%); }
.auth-aside { background: radial-gradient(ellipse at 90% 0%, #51335c, transparent 65%), #39213f; }
.auth-aside h2 { color: #fff; }
.auth-aside > .eyebrow, .auth-aside p, .auth-aside small { color: #cdbddd; }
.auth-aside img { box-shadow: 0 15px 35px rgb(5 25 15 / 20%); }
.form-field > label, .member-form .form-field > span { color: #51335c; }
.form-field input, .form-field select, .form-field textarea { border-color: #e8e0dd; background: #fff; }
.input-wrap > button { color: var(--muted); }
.form-row input[type="checkbox"] { accent-color: var(--green); }

/* Dialogs and payment messages do not infer success from a pending status. */
.dialog { border-color: #e8e0dd; background: #fff; box-shadow: 0 28px 95px rgb(57 33 63 / 24%); }
.dialog::backdrop { background: rgb(57 33 63 / 44%); }
.dialog-header, .dialog-actions { border-color: var(--line); }
.dialog-header > button { color: #6b5773; background: #f4eef8; }
.dialog-header > button:hover { color: var(--green); background: #e9ddf4; }
.dialog-body > p, .payment-summary p, .payment-summary > .eyebrow,
.payment-preview > p, .qr-placeholder > span, .qr-placeholder small,
.step-label, .price-pending, .pending-label { color: var(--muted); }
.payment-summary h3 { color: var(--ink); }
.payment-preview, .price-pending { background: #f4eef8; border-color: var(--line); }
.payment-method { color: var(--green); }
.payment-status { background: #f4eef8; color: #51335c; }
.qr-placeholder { border-color: #cdbddd; color: var(--muted); }
.qr-placeholder svg, .qr-placeholder strong { color: #6b5773; }
.empty-state { background: #fff; border-color: var(--line); color: var(--muted); }
.empty-state h2, .empty-state h3, .comparison-empty h2 { color: var(--ink); }
.empty-state p, .success-panel p { color: var(--muted); }
.member-trigger.vip, .member-trigger.is-vip, .status-badge.vip,
.success-icon { background: var(--visual-success-bg); border-color: #bddbc6; color: var(--visual-success); }
.member-trigger.is-vip:hover { background: #dceee2; border-color: #aacdb7; }
.status-badge, .status-badge.normal { color: #6b5773; background: #e9ddf4; }
.member-valid-message, .member-benefits li::before, .success-panel h2 { color: var(--visual-success); }
.status-badge.expired, .membership-expiry.expired, .notice, .connection-notice {
  color: var(--visual-warning); background: var(--visual-warning-bg); border-color: #e7dab9;
}
.pending-label::before { background: #997b3e; }
.skill-unavailable-note { color: var(--visual-warning); }
.toast { color: #fffdf9; background: #39213f; border-color: #51335c; box-shadow: var(--shadow); }
.danger, .field-error, .dialog-body > p[role="alert"] { color: var(--visual-danger); }
.danger { background: #fff; border-color: #e5b8b5; }
.danger:hover:not(:disabled) { color: #982725; background: var(--visual-danger-bg); border-color: #d99591; }
.form-error, .auth-card .form-error, .dialog-body > .form-error, .toast.error {
  color: var(--visual-danger); background: var(--visual-danger-bg); border-color: #edcbc8;
}

/* Keyboard, hidden and asynchronous states remain functional across modules. */
:focus-visible { outline: 3px solid var(--visual-focus); outline-offset: 3px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--visual-focus); box-shadow: 0 0 0 3px rgb(137 101 176 / 12%);
}
.form-field :is(input, select, textarea):focus-visible { outline: 2px solid var(--visual-focus); outline-offset: 2px; }
#compare-view .compare-viewport:focus-visible { outline-color: var(--visual-focus); }
.zoom-viewport:focus-visible { outline-color: var(--visual-focus); }
.form-field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--visual-danger); }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; }
button:disabled { opacity: .48; }
button[aria-busy="true"], [aria-busy="true"] button[type="submit"], [data-busy="true"] button[type="submit"] { cursor: progress; }
[aria-disabled="true"] { opacity: .48; cursor: not-allowed; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* V5 paper surfaces, typography and the established 16:9 preview frames. */
.main { background: transparent; }
.section-title h2 { font-size: 28px; letter-spacing: -.6px; }
.section-head { margin-top: 30px; }
.skill-card, .profile-card, .auth-card, .record-list, .dialog { background: var(--paper); }
.skill-card { border-radius: 14px; }
.card-body { padding: 17px 18px 18px; }
.card-title { font-size: 17px; font-weight: 700; }
.card-actions > .text-link { color: var(--orange-dark); font-weight: 650; }
.save-button { border-radius: 10px; color: var(--green); }
.image-label { background: #fffdf9e8; font-weight: 500; }
.card-cover .cover-open { position: absolute; inset: 0; }
.detail-preview > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.detail-preview > .skill-image-missing { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
.auth-aside { background: #eee3f5; }
.auth-aside h2 { color: var(--ink); }
.auth-aside > .eyebrow, .auth-aside p, .auth-aside small { color: #755c80; }
.auth-aside img { border-radius: 13px; object-fit: cover; box-shadow: 0 12px 30px #39213f12; }
.membership-card { background: linear-gradient(125deg, #f1e8f8, #fffdf9 75%); }
.membership-card .membership-price { color: var(--orange-dark); }
.toast { background: #39213f; color: #fffdf9; }