/* SQE Success · iOS-inspired glass UI v65
   Visual layer only. Keep reading surfaces highly legible. */

:root {
  --glass-bg: rgba(255, 255, 255, .58);
  --glass-bg-strong: rgba(255, 255, 255, .78);
  --glass-bg-reading: rgba(255, 255, 255, .94);
  --glass-line: rgba(255, 255, 255, .74);
  --glass-line-soft: rgba(64, 92, 76, .12);
  --glass-shadow: 0 18px 48px rgba(37, 67, 53, .10), inset 0 1px 0 rgba(255, 255, 255, .78);
  --glass-shadow-soft: 0 10px 30px rgba(37, 67, 53, .07), inset 0 1px 0 rgba(255, 255, 255, .70);
  --glass-green: #235f47;
  --glass-green-soft: rgba(213, 235, 223, .58);
  --glass-radius-lg: 26px;
  --glass-radius-md: 20px;
  --glass-radius-sm: 14px;
}

html {
  background: #eef4f0;
}

body {
  position: relative;
  background:
    radial-gradient(circle at 8% 4%, rgba(154, 211, 181, .30), transparent 29rem),
    radial-gradient(circle at 92% 8%, rgba(191, 215, 246, .28), transparent 31rem),
    radial-gradient(circle at 58% 94%, rgba(226, 211, 246, .22), transparent 34rem),
    linear-gradient(145deg, #edf4ef 0%, #f5f7f5 46%, #eef3f7 100%) !important;
  background-attachment: fixed !important;
}

body::before,
body::after {
  content: '';
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(2px);
}
body::before {
  width: 330px;
  height: 330px;
  left: -115px;
  top: 23vh;
  background: rgba(121, 193, 159, .17);
}
body::after {
  width: 390px;
  height: 390px;
  right: -165px;
  bottom: 4vh;
  background: rgba(150, 184, 226, .15);
}

/* Frosted top navigation */
.nav,
header.nav,
.topbar,
.app-topbar {
  background: rgba(250, 253, 251, .67) !important;
  border-color: rgba(255,255,255,.78) !important;
  box-shadow: 0 8px 28px rgba(33, 61, 47, .07), inset 0 -1px 0 rgba(74, 106, 89, .08) !important;
  -webkit-backdrop-filter: saturate(165%) blur(26px);
  backdrop-filter: saturate(165%) blur(26px);
}

/* Generic app glass surfaces */
.sidebar,
.panel:not(.reader),
.online-account-status,
.online-gate,
.online-inline-gate,
.free-plan-banner,
.chapter-toc,
.subject-card,
.dashboard-card,
.study-card,
.progress-card,
.stat-card {
  background: var(--glass-bg) !important;
  border-color: var(--glass-line) !important;
  box-shadow: var(--glass-shadow-soft) !important;
  -webkit-backdrop-filter: saturate(155%) blur(22px);
  backdrop-filter: saturate(155%) blur(22px);
}

.sidebar,
.panel,
.online-gate,
.chapter-toc,
.subject-card,
.dashboard-card,
.study-card,
.progress-card {
  border-radius: var(--glass-radius-lg) !important;
}

/* Buttons and segmented controls */
button,
.button,
.nav-button,
.chapter-link,
.chapter-tab,
[data-tab],
.multi-mindmap-tab,
.sqe-v54-map-tab,
.sqe-v53-jumpbar button {
  -webkit-tap-highlight-color: transparent;
}

.button,
.nav-button,
.chapter-tab,
[data-tab],
.multi-mindmap-tab,
.sqe-v54-map-tab,
.sqe-v53-jumpbar button {
  border-color: rgba(255,255,255,.76) !important;
  background: rgba(255,255,255,.52) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 5px 15px rgba(38, 68, 54, .05);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.button:hover,
.chapter-tab:hover,
[data-tab]:hover,
.multi-mindmap-tab:hover,
.sqe-v54-map-tab:hover,
.sqe-v53-jumpbar button:hover {
  background: rgba(255,255,255,.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px rgba(38, 68, 54, .08);
  transform: translateY(-1px);
}

.button:active,
.chapter-tab:active,
[data-tab]:active,
.multi-mindmap-tab:active,
.sqe-v54-map-tab:active,
.sqe-v53-jumpbar button:active {
  transform: scale(.985);
}

.button.primary,
.multi-mindmap-tab.active,
.sqe-v54-map-tab.active,
.chapter-tab.active,
[data-tab].active,
[aria-selected='true'] {
  background: linear-gradient(145deg, rgba(48, 112, 82, .92), rgba(31, 82, 59, .95)) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.32) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 20px rgba(33, 84, 61, .18) !important;
}

input,
select,
textarea {
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(255,255,255,.86) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 5px 15px rgba(38,68,54,.04);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(44, 110, 80, .20);
  border-color: rgba(63, 132, 99, .52) !important;
}

/* Chapter and toolbar strips */
.multi-mindmap-tabs,
.sqe-v54-map-tabs,
.sqe-v53-jumpbar,
.chapter-tabs,
.tab-row,
.tabs {
  border-radius: 999px;
  background: rgba(255,255,255,.40) !important;
  border: 1px solid rgba(255,255,255,.66);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
}

/* Mind map: glass branches, readable centre */
.multi-mindmap-deck,
.sqe-v54-mindmaps {
  position: relative;
  background: rgba(255,255,255,.50) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: saturate(155%) blur(24px);
  backdrop-filter: saturate(155%) blur(24px);
}

.multi-mindmap-canvas,
.sqe-v54-map-canvas {
  background:
    radial-gradient(circle at 15% 45%, rgba(111, 187, 151, .14), transparent 34%),
    rgba(255,255,255,.30) !important;
  border-color: rgba(255,255,255,.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(15px) saturate(145%);
  backdrop-filter: blur(15px) saturate(145%);
}

.multi-mindmap-center,
.sqe-v54-map-center {
  background: linear-gradient(145deg, rgba(45, 112, 81, .92), rgba(30, 82, 59, .96)) !important;
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: 0 16px 34px rgba(32, 83, 60, .22), inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.multi-mindmap-branch,
.sqe-v54-branch {
  background: rgba(255,255,255,.63) !important;
  border-color: rgba(255,255,255,.86) !important;
  box-shadow: 0 8px 20px rgba(40, 72, 57, .06), inset 0 1px 0 rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

.multi-mindmap-branch span,
.sqe-v54-branch-items span {
  background: rgba(240, 246, 243, .70) !important;
  border: 1px solid rgba(255,255,255,.68);
}

/* Annotation popovers: strongest iOS-style glass */
.inline-annotator,
.mindmap-inline-annotator,
.annotation-tooltip,
.rich-note-toolbar {
  background: rgba(247, 251, 249, .78) !important;
  border: 1px solid rgba(255,255,255,.86) !important;
  box-shadow: 0 20px 55px rgba(26, 50, 39, .22), inset 0 1px 0 rgba(255,255,255,.95) !important;
  -webkit-backdrop-filter: blur(30px) saturate(175%);
  backdrop-filter: blur(30px) saturate(175%);
}

.inline-annotator,
.mindmap-inline-annotator {
  border-radius: 20px !important;
}

/* Digital Textbook: glass frame, opaque reading paper */
.sqe-v53-textbook,
.property-v52-textbook,
#textbookReader {
  background: transparent !important;
}

.sqe-v53-hero,
.sqe-v53-card,
.property-v52-reading-card,
.property-v52-visual-card,
#textbookReader .ebook-page,
#textbookReader .sqe-v63-study-block,
#textbookReader .sqe-v62-visual {
  background: var(--glass-bg-reading) !important;
  border-color: rgba(255,255,255,.88) !important;
  box-shadow: 0 12px 32px rgba(37, 67, 53, .06), inset 0 1px 0 rgba(255,255,255,.95) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
}

#textbookReader .sqe-v62-visual-head,
.sqe-v53-card-heading,
.property-v52-section-head {
  background: linear-gradient(135deg, rgba(242,248,245,.96), rgba(234,244,239,.90)) !important;
}

/* Tables stay readable */
#textbookReader table,
.sqe-v53-table-card table,
.property-v52-table {
  background: rgba(255,255,255,.97) !important;
}

#textbookReader th,
.sqe-v53-table-card th,
.property-v52-table th {
  background: rgba(231,241,236,.96) !important;
}

/* Glass completion / issue areas if present */
.chapter-complete,
.chapter-completed,
.complete-card,
.issue-report-card,
.report-issue,
[data-issue-report] {
  background: rgba(255,255,255,.55) !important;
  border-color: rgba(255,255,255,.78) !important;
  box-shadow: var(--glass-shadow-soft) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}

/* Graceful fallback when backdrop-filter is unavailable */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav,
  .sidebar,
  .panel:not(.reader),
  .multi-mindmap-deck,
  .sqe-v54-mindmaps,
  .inline-annotator,
  .mindmap-inline-annotator {
    background: rgba(250,252,251,.96) !important;
  }
}

@media (max-width: 900px) {
  body {
    background-attachment: scroll !important;
  }
  .sidebar {
    background: rgba(250,253,251,.76) !important;
  }
  .multi-mindmap-deck,
  .sqe-v54-mindmaps {
    border-radius: 22px !important;
  }
}

@media (max-width: 700px) {
  :root {
    --glass-radius-lg: 20px;
    --glass-radius-md: 17px;
  }

  body::before,
  body::after {
    opacity: .68;
  }

  .nav,
  header.nav,
  .topbar,
  .app-topbar {
    -webkit-backdrop-filter: saturate(155%) blur(20px);
    backdrop-filter: saturate(155%) blur(20px);
  }

  .multi-mindmap-tabs,
  .sqe-v54-map-tabs,
  .chapter-tabs,
  .tab-row,
  .tabs {
    border-radius: 18px;
  }

  /* annotation toolbar stays legible above the mobile background */
  .inline-annotator,
  .mindmap-inline-annotator {
    background: rgba(248,251,249,.90) !important;
    border-radius: 22px 22px 0 0 !important;
  }

  #textbookReader .ebook-page,
  #textbookReader .sqe-v63-study-block,
  #textbookReader .sqe-v62-visual {
    background: rgba(255,255,255,.97) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .chapter-tab,
  [data-tab],
  .multi-mindmap-tab,
  .sqe-v54-map-tab,
  .sqe-v53-jumpbar button {
    transition: none !important;
  }
}