/* Hocral UI — shared application shell */
:root {
  --bg: #0b0d10 !important;
  --surface: #11151a !important;
  --surface-card: #11151a !important;
  --surface-hover: #181e25 !important;
  --border: #29313b !important;
  --border-hover: #465360 !important;
  --border-accent: rgba(239, 125, 50, .48) !important;
  --accent: #ef7d32 !important;
  --accent-hover: #ff9653 !important;
  --accent-light: #ffb078 !important;
  --accent-rgb: 239, 125, 50 !important;
  --accent-glow: rgba(239, 125, 50, .22) !important;
  --text-primary: #f2f4f6 !important;
  --text-secondary: #a9b2bc !important;
  --text-muted: #77818c !important;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
}

html { background: var(--bg); --hocral-scroll: 0; }
#nl-badge-frame,
iframe[id^="nl-badge"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#maintenance-notice {
  position: fixed; inset: 0 0 auto; z-index: 100100;
  min-height: 36px; padding: 8px 16px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #312015; border-bottom: 1px solid rgba(239,125,50,.52);
  color: #f5d4bd; font-size: 12px; line-height: 1.35; text-align: center;
  box-shadow: 0 5px 18px rgba(0,0,0,.26);
}
.maintenance-notice__dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(239,125,50,.16); }
body:has(#maintenance-notice) { padding-top: var(--maintenance-notice-height, 36px) !important; }
#liquid-navbar.liquid-glass-nav { top: calc(var(--maintenance-notice-height, 36px) + 12px) !important; }
#liquid-navbar.liquid-glass-nav.scrolled { top: calc(var(--maintenance-notice-height, 36px) + 8px) !important; }
body {
  background-color: var(--bg) !important;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
  animation: hocral-grid-drift 28s linear infinite;
  color: var(--text-primary) !important;
  font-family: var(--font-sans) !important;
  position: relative;
  isolation: isolate;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 100vh;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 15%, rgba(255, 205, 139, .26) 0 2px, transparent 3px),
    radial-gradient(circle at 12% 26%, rgba(213, 232, 240, .4) 0 1px, transparent 2px),
    radial-gradient(circle at 45% 12%, rgba(213, 232, 240, .3) 0 1px, transparent 2px),
    radial-gradient(circle at 73% 31%, rgba(213, 232, 240, .35) 0 1px, transparent 2px),
    radial-gradient(650px 360px at 74% 12%, rgba(232,135,67,.12), transparent 70%),
    linear-gradient(180deg, #101e2a 0%, #0c1820 47%, #0b1116 100%);
  transform: translateY(calc(var(--hocral-scroll) * -.025px));
  background-size: 280px 240px, 360px 300px, 420px 350px, 320px 270px, 120% 100%, 100% 100%;
  background-position: 0 0, 30px 10px, 80px 35px, 145px 20px, 50% 0, 0 0;
  animation: hocral-sky-drift 18s ease-in-out infinite alternate;
  z-index: -1;
}
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  left: -8%;
  right: -8%;
  bottom: -5vh;
  height: min(49vh, 460px);
  pointer-events: none;
  opacity: .9;
  background:
    linear-gradient(180deg, rgba(105,143,148,.14), transparent 38%),
    #0a171c;
  clip-path: polygon(0 75%, 8% 48%, 16% 65%, 26% 25%, 36% 59%, 46% 13%, 57% 62%, 67% 32%, 77% 60%, 88% 18%, 100% 66%, 100% 100%, 0 100%);
  transform: translateY(calc(var(--hocral-scroll) * -.12px));
  animation: hocral-ridge-breathe 10s ease-in-out infinite alternate;
}

@keyframes hocral-grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 32px 32px, -32px 32px; }
}
@keyframes hocral-sky-drift {
  0% { background-position: 0 0, 30px 10px, 80px 35px, 145px 20px, 46% 0, 0 0; }
  50% { background-position: 24px -18px, 6px 28px, 112px 8px, 121px 45px, 54% 4%, 0 0; }
  100% { background-position: 44px 10px, 48px -8px, 58px 52px, 170px 2px, 49% 0, 0 0; }
}
@keyframes hocral-ridge-breathe {
  from { opacity: .82; filter: brightness(.94); }
  to { opacity: .98; filter: brightness(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  body, body::before, body::after { animation: none !important; }
}

/* A distant ridge stays quiet behind content; the foreground ridge moves faster. */
#app-content::before, main:not(#app-content)::before {
  content: "";
  position: fixed;
  z-index: -1;
  left: -7%; right: -7%; bottom: 9vh; height: min(41vh, 390px);
  pointer-events: none;
  background: #17303a;
  opacity: .62;
  clip-path: polygon(0 76%, 11% 50%, 20% 67%, 31% 28%, 42% 59%, 53% 19%, 65% 65%, 76% 35%, 87% 61%, 100% 30%, 100% 100%, 0 100%);
  transform: translateY(calc(var(--hocral-scroll) * -.055px));
}

/* Remove visual noise that made pages feel like unrelated templates. */
.ambient-background-wrapper, .ambient-grid, .ambient-orb, .bg-glow { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  body::before, body::after, #app-content::before, main:not(#app-content)::before { transform: none !important; }
}
@media (max-width: 640px) {
  #maintenance-notice { justify-content: flex-start; padding: 7px 12px; font-size: 10.5px; text-align: left; }
  body::after { height: 35vh; bottom: -2vh; }
  #app-content::before, main:not(#app-content)::before { height: 29vh; bottom: 8vh; }
}

/* Shared navigation: compact, utilitarian application bar. */
#liquid-navbar.liquid-glass-nav {
  top: 12px !important;
  max-width: 1240px !important;
  height: 52px !important;
  border-radius: 6px !important;
  background: rgba(14, 17, 21, .94) !important;
  border-color: #2b3540 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.36) !important;
}
#liquid-navbar.liquid-glass-nav::before { display: none !important; }
#liquid-navbar.liquid-glass-nav.scrolled { top: 8px !important; transform: translateX(-50%) !important; background: rgba(14,17,21,.98) !important; box-shadow: 0 12px 28px rgba(0,0,0,.5) !important; }
.liquid-logo-img { border-radius: 4px !important; box-shadow: none !important; }
.liquid-logo-text { font-family: var(--font-mono) !important; letter-spacing: .035em !important; font-size: 13px !important; }
.liquid-logo-badge { border-radius: 3px !important; color: var(--accent-light) !important; background: rgba(239,125,50,.12) !important; border-color: rgba(239,125,50,.28) !important; }
.liquid-nav-link { border-radius: 4px !important; font-size: 12px !important; }
.liquid-nav-link.active { background: rgba(239,125,50,.13) !important; border-color: rgba(239,125,50,.35) !important; box-shadow: none !important; color: #ffe1cc !important; }
.liquid-discord-link { color: #c4cbd4 !important; background: transparent !important; border-color: transparent !important; }
.liquid-btn-register { border-radius: 4px !important; background: var(--accent) !important; color: #21130b !important; border-color: var(--accent) !important; box-shadow: none !important; }
.liquid-user-pill, .liquid-logout-btn, .liquid-admin-btn { border-radius: 4px !important; }

/* Reusable controls, panels, tables and dialogs. */
button, input, textarea, select { font-family: inherit; }
.btn, .button, button[type="submit"], .submit-btn, .action-btn {
  border-radius: 5px !important;
}
.btn-primary, .primary-btn, button.btn-primary, button.primary, .submit-btn {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #20130b !important;
  box-shadow: none !important;
}
.btn-secondary, .secondary-btn { background: #151b21 !important; border-color: #34404d !important; box-shadow: none !important; }
.card, .panel, .modal-content, .settings-card, .dashboard-card, .content-card, .tool-card, .forum-card, .status-card {
  border-radius: 6px !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
input, textarea, select { background: #0e1216 !important; border-color: #303b47 !important; color: var(--text-primary) !important; border-radius: 5px !important; }
input:focus, textarea:focus, select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(239,125,50,.12) !important; outline: none !important; }
table th { color: #cbd2da !important; background: #101419 !important; }
table td, table th { border-color: #27303a !important; }

@media (max-width: 1080px) {
  #liquid-navbar.liquid-glass-nav { width: calc(100% - 24px) !important; }
}
@media (max-width: 640px) {
}

/* Mobile shell: one column, no clipped controls, comfortable tap targets. */
@media (max-width: 768px) {
  body { overflow-x: hidden !important; }
  #liquid-navbar.liquid-glass-nav {
    width: calc(100% - 16px) !important;
    height: 48px !important;
    border-radius: 6px !important;
  }
  .liquid-nav-inner { padding: 0 9px 0 11px !important; }
  .liquid-logo { gap: 7px !important; }
  .liquid-logo-img { width: 26px !important; height: 26px !important; }
  .liquid-logo-text { font-size: 12px !important; }
  .liquid-logo-badge { display: none !important; }
  .liquid-nav-links, .liquid-discord-link, .liquid-nav-auth-group, .liquid-nav-user-group { display: none !important; }
  .liquid-mobile-burger-btn { display: inline-flex !important; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 5px !important; }
  .liquid-mobile-drawer { width: min(340px, calc(100vw - 28px)) !important; background: #10161b !important; border-color: #34414b !important; }
  .liquid-drawer-links { gap: 2px !important; }
  .liquid-mobile-nav-link { min-height: 42px; border-radius: 5px !important; }
  .liquid-mobile-auth-box { gap: 8px !important; }

  /* Typical content wrappers across modules. */
  .container, .dashboard-container, .workspace-container, .page-container, .content-container,
  .forum-container, .tools-container, .status-container, .support-container {
    width: 100% !important; max-width: 100% !important; padding-left: 14px !important; padding-right: 14px !important;
  }
  .card, .panel, .modal-content, .settings-card, .dashboard-card, .content-card, .tool-card, .forum-card, .status-card {
    border-radius: 6px !important;
  }
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  pre { max-width: 100%; overflow-x: auto; }
  input, textarea, select { max-width: 100% !important; }
  button, .btn, .button, .action-btn { min-height: 40px; }
}

@media (max-width: 430px) {
  .liquid-logo-text { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
  .liquid-mobile-drawer { width: calc(100vw - 18px) !important; }
  .btn, .button, .action-btn { width: 100%; justify-content: center; }
}

/* Site-wide phone ergonomics. Many legacy pages use inline grids and fixed
   controls, so these rules deliberately cover both class-based and inline UI. */
@media (max-width: 768px) {
  body { animation-duration: 42s; }
  body::before { animation-duration: 27s; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-width: 0; padding-bottom: max(20px, env(safe-area-inset-bottom)) !important; }
  img, svg, video, canvas { max-width: 100%; }
  a, button, input, select, textarea { touch-action: manipulation; }
  input, select, textarea { min-height: 42px; font-size: 16px !important; }
  textarea { min-height: 132px; }
  input[type="checkbox"], input[type="radio"] { min-height: auto; }
  input[type="file"] { min-height: 40px; font-size: 13px !important; }

  /* Inline grids are extensively used by administration and account pages. */
  [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
  }
  [style*="display: grid"] > * { min-width: 0 !important; }
  [style*="display: flex"] { flex-wrap: wrap !important; min-width: 0 !important; }
  [style*="display: flex"] > input:not([type="checkbox"]):not([type="radio"]),
  [style*="display: flex"] > select,
  [style*="display: flex"] > textarea { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; }
  [style*="min-width"] { min-width: 0 !important; }
  [style*="width: 1"], [style*="width: 2"], [style*="width: 3"],
  [style*="width: 4"], [style*="width: 5"], [style*="width: 6"],
  [style*="width: 7"], [style*="width: 8"], [style*="width: 9"] { max-width: 100% !important; }

  .form-grid, .metrics-grid, .customization-grid, .editor-grid, .tier-grid,
  .ads-grid, .stats-grid, .features-grid, .pricing-grid, .dashboard-grid,
  .profile-grid, .settings-grid, .two-column, .two-columns {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  .stats-bar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .panel-header, .header-bar, .action-bar, .card-header, .section-header,
  .page-header, .toolbar, .filter-bar { gap: 10px !important; }
  .panel-actions, .header-actions, .action-bar > div, .toolbar-actions,
  .filter-actions { width: 100%; flex-wrap: wrap !important; }
  .panel-actions > *, .header-actions > *, .action-bar > div > *,
  .toolbar-actions > *, .filter-actions > * { flex: 1 1 auto; }

  .modal, .modal-overlay, .dialog-overlay, .popup-overlay {
    align-items: flex-end !important; padding: 10px !important;
  }
  .modal-content, .modal-box, .dialog, .popup, [role="dialog"] {
    width: 100% !important; max-width: 100% !important;
    max-height: min(88dvh, 760px) !important; overflow: auto !important;
    margin: 0 !important; border-radius: 8px !important;
  }
  .toast, .notification, .alert-toast { max-width: calc(100vw - 24px) !important; }
  .table-responsive, .table-wrap, .table-container { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { font-size: 12px; }
  th, td { white-space: nowrap; }
  td :is(input, select, button) { min-height: 36px; font-size: 12px !important; }
  code, pre, .code-content { overflow-wrap: normal; word-break: normal; }

  #liquid-navbar.liquid-glass-nav { top: calc(var(--maintenance-notice-height, 43px) + max(8px, env(safe-area-inset-top))) !important; }
  .liquid-mobile-drawer {
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain;
  }
  .liquid-mobile-drawer-overlay { overscroll-behavior: contain; }
}

@media (max-width: 480px) {
  .stats-bar { grid-template-columns: minmax(0, 1fr) !important; }
  .workspace-container { margin-top: 76px !important; }
  .panel-header, .header-bar, .action-bar { padding-left: 12px !important; padding-right: 12px !important; }
  .panel-actions > *, .header-actions > *, .action-bar > div > *, .toolbar-actions > *, .filter-actions > * {
    flex-basis: 100% !important;
  }
  .liquid-mobile-nav-link { padding: 11px 12px !important; }
}