:root {
  --bnt-vh: 100vh;
  --bnt-dvh: 100vh;
  --bnt-birthday-height: 44px;
  --bnt-safe-top: env(safe-area-inset-top, 0px);
  --bnt-safe-right: env(safe-area-inset-right, 0px);
  --bnt-safe-bottom: env(safe-area-inset-bottom, 0px);
  --bnt-safe-left: env(safe-area-inset-left, 0px);
}

@supports (height: 100dvh) {
  :root {
    --bnt-dvh: 100dvh;
  }
}

@supports (height: 100svh) {
  :root {
    --bnt-vh: 100svh;
  }
}

html {
  min-width: 0;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: max(18px, var(--bnt-safe-top));
}

@supports (overflow: clip) {
  html {
    overflow-x: clip;
  }
}

body {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

.bnt-birthday-banner {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10200;
  display: flex;
  min-height: var(--bnt-birthday-height);
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px 48px;
  color: #fffaf0;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  background:
    linear-gradient(90deg, rgba(170, 25, 25, .96), rgba(211, 94, 22, .96) 48%, rgba(183, 48, 48, .96)),
    #b52b2b;
  box-shadow: 0 8px 24px rgba(92, 21, 21, .2);
  font: 700 12px/1.45 "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  text-align: center;
}

.bnt-birthday-banner__date {
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .08em;
}

.bnt-birthday-banner strong {
  font-size: 13px;
  letter-spacing: .03em;
}

.bnt-birthday-banner__note {
  color: rgba(255, 250, 240, .82);
  font-weight: 600;
}

.bnt-birthday-banner__close {
  position: absolute;
  top: 50%;
  right: max(12px, env(safe-area-inset-right));
  display: grid;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  color: #fffaf0;
  background: rgba(0, 0, 0, .12);
  font: 700 18px/1 system-ui, sans-serif;
  transform: translateY(-50%);
}

html.bnt-birthday-active body {
  padding-top: var(--bnt-birthday-height) !important;
}

html.bnt-birthday-active :where(#navbar, .site-topbar, .profile-nav, .rights-header, .certificate-toolbar) {
  top: var(--bnt-birthday-height) !important;
}

html.device-compat-ready,
html.device-compat-ready body:not(.has-contact-modal) {
  overflow-y: auto;
  overscroll-behavior-y: auto !important;
}

body > main,
body > section,
body > footer,
body > header {
  max-width: 100%;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

input,
select,
textarea,
button {
  min-width: 0;
  max-width: 100%;
}

textarea {
  resize: vertical;
}

pre,
code,
kbd,
samp {
  overflow-wrap: anywhere;
}

pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 3px;
}

:where(.bnt-search-panel, .ai-settings-card, .logout-confirm-card, .avatar-studio-card,
  .legal-modal, .modal, .onboarding-card, .contact-modal__panel, [role="dialog"]) {
  max-height: calc(var(--bnt-dvh) - max(24px, var(--bnt-safe-top) + var(--bnt-safe-bottom))) !important;
  overscroll-behavior: contain;
}

:where(.bnt-search-overlay, .ai-settings-overlay, .modal-overlay, .legal-overlay) {
  padding-top: max(12px, var(--bnt-safe-top)) !important;
  padding-right: max(12px, var(--bnt-safe-right)) !important;
  padding-bottom: max(12px, var(--bnt-safe-bottom)) !important;
  padding-left: max(12px, var(--bnt-safe-left)) !important;
  overscroll-behavior: contain;
}

:where(.bnt-table-scroll, .table-wrap, [class*="table-wrap"], [class*="table-scroll"]) {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

:where(table) {
  max-width: 100%;
}

:where(th, td) {
  overflow-wrap: anywhere;
}

html.device-ios :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  font-size: max(16px, 1em);
}

@media (hover: none), (pointer: coarse) {
  :where(
    button,
    [role="button"],
    .btn,
    .nav-cta,
    .nav-login-btn,
    .modal-tab,
    .site-nav a,
    .profile-nav nav a,
    .nav-links a,
    .bnt-provider,
    .bnt-filter-chip,
    .bnt-license-mode,
    .bnt-archive-action,
    .bnt-search-trigger,
    .bnt-search-submit,
    .official-domain__open,
    .official-domain__copy,
    .profile-actions a,
    .profile-actions button,
    .api-endpoint button,
    .contact-modal__primary
  ) {
    min-height: 44px !important;
  }

  :where(.site-nav a, .profile-nav nav a, .nav-links a, .modal-tab) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  :where(
    .modal-close,
    .nav-mobile-toggle,
    #ai-fab,
    #back-to-top,
    .back-to-top,
    #onboardingLauncher,
    button[aria-label]
  ) {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ) {
    min-height: 44px !important;
    font-size: max(16px, 1em);
  }

  :where(a, button, input, select, textarea, [role="button"]) {
    touch-action: manipulation;
  }

  :where(
    .bnt-search-trigger:hover,
    .bnt-provider:hover,
    .bnt-site-slide:hover,
    .bnt-search-chip:hover,
    .lic-card:hover,
    .featured-version:hover,
    .version-card:hover,
    .compact-version:hover,
    .site-card:hover,
    .profile-card:hover,
    .official-domain:hover,
    .tool-card:hover,
    .glass-card:hover,
    .quick-item:hover,
    .mini-card:hover,
    .hot-tool-card:hover,
    .preview-row:hover,
    .nav-cta:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .social-link:hover,
    .back-to-top:hover,
    .search-btn:hover
  ) {
    transform: none !important;
  }

  :where(
    .bnt-spotlight:hover::before,
    .bnt-search-submit:hover::after,
    .nav-cta:hover::after,
    .btn-primary:hover::after
  ) {
    opacity: 0 !important;
    transform: none !important;
  }
}

html.device-touch :where(.bnt-magnetic, .bnt-tilt) {
  transform: none !important;
}

html.bnt-scroll-recovered,
html.bnt-scroll-recovered body {
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
}

html.device-touch :where(
  button,
  [role="button"],
  .btn,
  .nav-cta,
  .nav-login-btn,
  .modal-tab,
  .site-nav a,
  .profile-nav nav a,
  .nav-links a,
  .bnt-provider,
  .bnt-filter-chip,
  .bnt-license-mode,
  .bnt-archive-action,
  .bnt-search-trigger,
  .bnt-search-submit,
  .official-domain__open,
  .official-domain__copy,
  .profile-actions a,
  .profile-actions button,
  .api-endpoint button,
  .contact-modal__primary
) {
  min-height: 44px !important;
}

html.device-touch :where(.site-nav a, .profile-nav nav a, .nav-links a, .modal-tab) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html.device-touch :where(
  .modal-close,
  .nav-mobile-toggle,
  #ai-fab,
  #back-to-top,
  .back-to-top,
  #onboardingLauncher,
  button[aria-label]
) {
  min-width: 44px !important;
  min-height: 44px !important;
}

html.device-touch :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
) {
  min-height: 44px !important;
}

html.device-touch :where(a, button, input, select, textarea, [role="button"]) {
  touch-action: manipulation;
}

html.device-touch :where(
  .bnt-search-trigger:hover,
  .bnt-provider:hover,
  .bnt-site-slide:hover,
  .bnt-search-chip:hover,
  .lic-card:hover,
  .featured-version:hover,
  .version-card:hover,
  .compact-version:hover,
  .site-card:hover,
  .profile-card:hover,
  .official-domain:hover,
  .tool-card:hover,
  .glass-card:hover,
  .quick-item:hover,
  .mini-card:hover,
  .hot-tool-card:hover,
  .preview-row:hover,
  .nav-cta:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .social-link:hover,
  .back-to-top:hover,
  .search-btn:hover
) {
  transform: none !important;
}

html.device-touch :where(
  .bnt-spotlight:hover::before,
  .bnt-search-submit:hover::after,
  .nav-cta:hover::after,
  .btn-primary:hover::after
) {
  opacity: 0 !important;
  transform: none !important;
}

html.device-ios :where(.site-topbar, .profile-nav) {
  top: max(10px, var(--bnt-safe-top));
}

html.device-whiteboard :where(.site-topbar, .profile-nav) {
  width: min(calc(100% - 48px), 1480px);
}

html.device-whiteboard .site-topbar__inner {
  min-height: 68px;
  padding-right: 18px;
  padding-left: 20px;
}

html.device-whiteboard :where(.site-nav a, .profile-nav nav a) {
  min-height: 48px;
  padding-right: 17px;
  padding-left: 17px;
  font-size: 13px;
}

html.device-whiteboard :where(.nav-links a, .nav-login-btn, .nav-cta) {
  min-height: 48px !important;
  padding-right: clamp(12px, 1.2vw, 20px);
  padding-left: clamp(12px, 1.2vw, 20px);
  font-size: 14px;
}

html.device-whiteboard :where(.bnt-search-trigger, .nav-cta, .nav-login-btn, .btn) {
  min-height: 48px;
}

html.device-whiteboard :where(.modal, .ai-settings-card, .legal-modal, .contact-modal__panel) {
  max-height: calc(var(--bnt-dvh) - 48px) !important;
  overflow-y: auto;
}

html.device-whiteboard :where(.bnt-search-overlay, .ai-settings-overlay, .modal-overlay, .legal-overlay) {
  padding-right: max(24px, var(--bnt-safe-right)) !important;
  padding-left: max(24px, var(--bnt-safe-left)) !important;
}

html.device-mac :where(.site-topbar, .profile-nav, .bnt-search-panel, .modal, .ai-settings-card) {
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

@media (max-width: 900px) {
  :where(.bnt-search-panel, .ai-settings-card, .modal, .legal-modal, .onboarding-card) {
    overflow-y: auto;
  }

  :where(.site-topbar, .profile-nav) {
    width: min(calc(100% - 20px), 1120px);
  }

  :where(.site-shell, .profile-shell) {
    width: min(calc(100% - 24px), 1120px);
  }

  :where(table) {
    width: 100%;
  }

  :where(th, td) {
    padding-right: 8px;
    padding-left: 8px;
  }
}

@media (max-width: 640px) {
  :root {
    --bnt-birthday-height: 62px;
  }

  .bnt-birthday-banner {
    flex-wrap: wrap;
    gap: 3px 8px;
    padding: 8px 42px;
  }

  .bnt-birthday-banner__note {
    flex-basis: 100%;
    font-size: 10px;
  }

  :where(.bnt-search-overlay, .ai-settings-overlay, .modal-overlay, .legal-overlay) {
    padding-top: max(8px, var(--bnt-safe-top)) !important;
    padding-right: max(8px, var(--bnt-safe-right)) !important;
    padding-bottom: max(8px, var(--bnt-safe-bottom)) !important;
    padding-left: max(8px, var(--bnt-safe-left)) !important;
  }

  :where(.bnt-search-panel, .ai-settings-card, .modal, .legal-modal) {
    width: 100% !important;
    max-height: calc(var(--bnt-dvh) - max(16px, var(--bnt-safe-top) + var(--bnt-safe-bottom))) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}