/* =========================================================
   Cherry Home Document Center · UI entrypoint
   Module order matters: theme -> shared components -> layout -> page surfaces.
========================================================= */

@import url("./theme.css");
@import url("./components.css");
@import url("./layout.css?v=23");
@import url("./auth.css?v=3");
@import url("./dashboard.css?v=24");
@import url("./admin.css?v=11");

/* Critical fallback for theme dropdown when older cached component CSS is present. */
.ch-theme-control { position: relative; display: inline-flex; }
.ch-theme-toggle { width: auto; min-width: 118px; padding: 0 14px; }
.ch-theme-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 140;
  display: none;
  min-width: 150px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.ch-theme-control.open .ch-theme-menu { display: grid; gap: 4px; }
.ch-theme-menu button {
  min-height: 36px;
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 0 10px;
  cursor: pointer;
  font-weight: 850;
}
.ch-theme-menu button:hover, .ch-theme-menu button.active { color: var(--primary-dark); background: var(--primary-soft); }

.ch-browser-guard-active { overflow: hidden; }
.ch-browser-guard {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: block;
  overflow: auto;
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--bg) 96%, transparent)),
    var(--bg);
}
.ch-browser-guard-card {
  width: auto;
  max-width: 360px;
  min-width: 0;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  margin: min(16vh, 96px) auto 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.ch-browser-guard-card h2 {
  margin: 14px 0 10px;
  color: var(--heading);
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1.06;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.ch-browser-guard-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.ch-browser-guard-url {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--heading);
  font-size: 13px;
  font-weight: 850;
  overflow-wrap: anywhere;
}
.ch-browser-guard-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.ch-browser-guard-actions .ch-btn,
.ch-browser-guard-actions .ch-btn-outline {
  width: 100%;
  min-height: 46px;
}
.ch-browser-guard-hint {
  margin-top: 12px !important;
  font-size: 13px;
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 1080px) {
  .ch-site-header { min-height: auto; }
  .ch-nav { position: relative; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; }
  .ch-brand { grid-column: 1; }
  .ch-brand img { width: 38px; height: 38px; flex-basis: 38px; }
  .ch-brand-title { font-size: 17px; }
  .ch-brand-sub { font-size: 11px; }
  .ch-mobile-toggle { display: inline-grid; place-items: center; grid-column: 2; grid-row: 1; }
  .ch-menu, .ch-actions { grid-column: 1 / -1; }
  .ch-menu, .ch-actions { display: none; width: 100%; }
  .ch-nav.menu-open .ch-menu { display: grid; }
  .ch-nav.menu-open .ch-actions { display: grid; }
  .ch-menu {
    gap: 4px;
    margin-top: 4px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
  }
  .ch-menu a { width: 100%; justify-content: flex-start; min-height: 42px; border-radius: 12px; padding: 0 12px; }
  .ch-actions { grid-template-columns: 1fr; gap: 8px; padding-bottom: 10px; white-space: normal; }
  .ch-actions .ch-btn, .ch-actions .ch-btn-outline, .ch-actions .ch-theme-control, .ch-actions .ch-theme-toggle { width: 100%; min-width: 0; }
  .ch-actions .ch-theme-menu { position: static; width: 100%; margin-top: 6px; box-shadow: none; }
  .ch-hero { grid-template-columns: 1fr; }
  .ch-hero > *, .ch-showcase-panel, .ch-showcase-slide > *, .ch-slide-rail, .ch-slide-rail div { min-width: 0; }
  .ch-visual-card { min-height: 340px; }
  .ch-product-preview { min-height: auto; padding: 0; }
  .ch-showcase-panel { width: 100%; }
  .ch-seo-band { grid-template-columns: 1fr; }
  .ch-grid, .ch-pricing-grid, .ch-admin-stats, .ch-home-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-payment-layout, .ch-payment-workspace { grid-template-columns: 1fr; }
  .ch-payment-summary { position: static; }
  .ch-account-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  :root { --header-height: 66px; }
  .ch-nav, .ch-page, .ch-site-footer { width: min(100% - 20px, var(--container)); }
  .ch-nav { min-height: 62px; gap: 8px; }
  .ch-brand { gap: 8px; }
  .ch-brand img { width: 34px; height: 34px; flex-basis: 34px; }
  .ch-brand-title { font-size: 16px; letter-spacing: 0; }
  .ch-brand-sub { display: none; }
  .ch-mobile-toggle { width: 40px; height: 40px; border-radius: 12px; }
  .ch-menu { border-radius: 16px; }
  .ch-actions { padding-bottom: 8px; }
  .ch-page { padding: 26px 0 48px; }
  .ch-title { font-size: clamp(30px, 8.6vw, 36px); line-height: 1.08; letter-spacing: 0; overflow-wrap: anywhere; }
  .ch-title-sm { font-size: clamp(30px, 8.8vw, 40px); line-height: 1.08; letter-spacing: 0; }
  .ch-subtitle { font-size: 15px; line-height: 1.62; overflow-wrap: anywhere; }
  .ch-pill { min-height: 28px; padding: 0 11px; font-size: 11px; letter-spacing: .04em; }
  .ch-btn, .ch-btn-outline, .ch-theme-toggle { min-height: 44px; padding: 0 15px; }
  .ch-hero-card, .ch-auth-card, .ch-panel, .ch-price-card, .ch-tool-card, .ch-note { border-radius: 18px; }
  .ch-hero-card, .ch-tool-card, .ch-price-card { padding: 20px; }
  .ch-hero-copy { padding: 0; }
  .ch-hero-copy, .ch-hero-copy .ch-title, .ch-hero-copy .ch-subtitle, .ch-cta-row, .ch-home-metrics, .ch-trust-row, .ch-product-preview, .ch-showcase-panel { max-width: calc(100vw - 20px); }
  .ch-cta-row .ch-btn, .ch-cta-row .ch-btn-outline { width: 100%; }
  .ch-home-metrics, .ch-live-grid, .ch-showcase-bottom { grid-template-columns: 1fr; }
  .ch-showcase-slide { grid-template-columns: 1fr; }
  .ch-slide-rail { grid-template-columns: 1fr; }
  .ch-slide-rail div { padding: 10px; border-radius: 14px; }
  .ch-slide-rail strong { overflow-wrap: anywhere; }
  .ch-showcase-panel { border-radius: 20px; }
  .ch-showcase-top, .ch-showcase-slide, .ch-showcase-bottom { padding: 16px; }
  .ch-live-document { padding: 14px; border-radius: 16px; }
  .ch-live-line strong, .ch-live-grid strong, .ch-showcase-bottom strong { word-break: break-word; }
  .ch-visual-card { min-height: auto; padding: 0; }
  .ch-doc-window { padding: 18px; border-radius: 20px; }
  .ch-doc-grid { gap: 10px; margin: 18px 0; }
  .ch-doc-grid div { height: 48px; border-radius: 14px; }
  .ch-floating-chip { display: none; }
  .ch-seo-band { gap: 16px; margin-top: 26px; padding: 20px; border-radius: 18px; }
  .ch-seo-band h2 { font-size: clamp(28px, 8.4vw, 36px); line-height: 1.08; letter-spacing: 0; }
  .ch-seo-band p { line-height: 1.6; }
  .ch-seo-keywords { gap: 8px; }
  .ch-seo-keywords span { border-radius: 14px; white-space: normal; }
  .ch-section-head, .ch-account-hero, .ch-admin-head { align-items: flex-start; flex-direction: column; }
  .ch-section-head > .ch-btn, .ch-section-head > .ch-btn-outline { width: 100%; }
  .ch-account-hero-actions { justify-content: flex-start; width: 100%; }
  .ch-account-hero-actions .ch-btn, .ch-account-hero-actions .ch-btn-outline { flex: 1 1 180px; }
  .ch-grid, .ch-pricing-grid, .ch-admin-stats, .ch-home-flow, .ch-single-use-panel { grid-template-columns: 1fr; }
  .ch-tool-footer { align-items: stretch; flex-direction: column; }
  .ch-tool-footer .ch-btn, .ch-tool-footer .ch-btn-outline, .ch-price-card .ch-btn, .ch-price-card .ch-btn-outline { width: 100%; }
  .ch-support-form-grid { grid-template-columns: 1fr; }
  .ch-support-floating {
    right: 10px;
    bottom: 10px;
    grid-template-columns: minmax(0, calc(100vw - 20px));
    justify-items: end;
  }
  .ch-support-stack {
    grid-column: 1;
    grid-row: 2;
  }
  .ch-support-panel {
    grid-column: 1;
    grid-row: 1;
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 240px);
  }
  .ch-support-float-action { min-height: 42px; }
  .ch-price-card.featured { transform: none; }
  .ch-account-row, .ch-account-bank-item { grid-template-columns: 1fr; gap: 8px; }
  .ch-account-row strong { text-align: left; }
  .ch-account-row-action { width: 100%; }
  .ch-account-bank-item button { width: 100%; }
  .ch-single-use-panel, .ch-payment-summary, .ch-payment-qr-panel, .ch-payment-transfer-panel { padding: 20px; }
  .ch-single-use-total, .ch-payment-summary div { flex-direction: column; gap: 5px; }
  .ch-payment-summary strong { text-align: left; }
  .ch-gateway-details, .ch-payment-actions { grid-template-columns: 1fr; }
  .ch-gateway-details div:nth-child(6) { grid-column: auto; }
  .ch-payment-result-grid { grid-template-columns: 1fr; }
  .ch-admin-filters { grid-template-columns: 1fr; }
  .ch-admin-panel, .ch-account-card { padding: 20px; }
  .ch-admin-note { min-width: 0; width: 100%; }
  .ch-ai-usage-grid { grid-template-columns: 1fr; }
  .ch-ai-feature-row { align-items: flex-start; flex-direction: column; gap: 4px; }
  .ch-ai-feature-row span { text-align: left; }
  .ch-auth-wrap, .ch-auth-page { align-items: start; padding: 24px 10px 44px; }
  .ch-auth-card { padding: 22px; }
  .ch-auth-card h1 { font-size: clamp(32px, 10vw, 42px); letter-spacing: 0; }
  .ch-form-actions .ch-btn, .ch-form-actions .ch-btn-outline { width: 100%; }
}
@media (max-width: 420px) {
  .ch-nav, .ch-page, .ch-site-footer { width: min(100% - 16px, var(--container)); }
  .ch-page { padding-top: 22px; }
  .ch-hero-card, .ch-auth-card, .ch-panel, .ch-price-card, .ch-tool-card, .ch-note { border-radius: 16px; }
  .ch-hero-card, .ch-auth-card, .ch-panel, .ch-price-card, .ch-tool-card, .ch-single-use-panel, .ch-payment-summary, .ch-payment-qr-panel, .ch-payment-transfer-panel { padding: 18px; }
  .ch-showcase-slide { gap: 12px; }
  .ch-slide-rail { grid-template-columns: 1fr; }
  .ch-home-metrics div { padding: 12px; }
  .ch-seo-band { padding: 16px; }
  .ch-browser-guard-card { width: 330px; max-width: calc(100vw - 48px); padding: 20px; border-radius: 18px; }
  .ch-browser-guard-card p { font-size: 14px; }
  .ch-browser-guard-actions .ch-btn,
  .ch-browser-guard-actions .ch-btn-outline { font-size: 14px; }
}