/* ============================
   PsyMosaic — Global Styles
   Tech Noir theme — inspired by nicepage "Already Future Technology"
   ============================ */

:root {
    /* Dark sections */
    --qm-black: #000000;
    --qm-charcoal: #1e1e1e;
    --qm-dark: #111111;
    --qm-dark2: #2a2a2a;
    /* Light sections */
    --qm-white: #ffffff;
    /* Brand blue -- the colour of the Psi in the mosaic logo. Use it on
       light backgrounds; on dark ones it drops to a 2:1 contrast ratio. */
    --psy-blue: #243A87;
    /* The same hue and saturation, lightened for dark backgrounds (5.1:1). */
    --psy-blue-light: #5E78D4;
    --qm-light: #f7f9f9;
    --qm-mint: #ceecea;
    /* Borders */
    --qm-border-dark: rgba(255, 255, 255, 0.08);
    --qm-border-light: #e0e8e8;
    /* Accents */
    --qm-teal: #4ECDC4;
    --qm-teal-dark: #3ab8af;
    --qm-gold: #C4A862;
    --qm-gold-dark: #a88e4f;
    /* Text */
    --qm-text-dark: #1a1a1a;
    --qm-text-muted: #6b7280;
    --qm-text-light: #e8f0f0;
    --qm-text-faint: rgba(255, 255, 255, 0.55);
    /* Legacy aliases (used by other templates) */
    --quantum-bg: var(--qm-black);
    --quantum-surface: var(--qm-dark);
    --quantum-surface2: var(--qm-dark2);
    --quantum-border: var(--qm-border-dark);
    --quantum-accent: var(--qm-teal);
    --quantum-accent2: var(--qm-gold);
    --quantum-accent3: #9b7de8;
    --quantum-green: #3ddc6c;
    --quantum-text: var(--qm-text-light);
    --quantum-text-muted: rgba(255, 255, 255, 0.45);
    --quantum-glow: rgba(78, 205, 196, 0.10);
    --quantum-glow-gold: rgba(196, 168, 98, 0.14);
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}


/* ── Base ─────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--qm-white);
    color: var(--qm-text-dark);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    min-height: 100vh;
}

a {
    color: var(--qm-teal);
    text-decoration: none;
    transition: color .2s;
}

a:hover {
    color: var(--qm-teal-dark);
}

h1,
h2,
h3,
h4,
h5 {
    line-height: 1.2;
}


/* ── Navbar ──────────────────────────────────────── */

.navbar {
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--qm-border-dark);
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* The wordmark is real text, not part of the logo image: it stays sharp at
   any zoom, is read out by screen readers and can be selected. The mosaic
   disc beside it is the image. static/images/logo-wordmark.png carries the
   two together for use outside the site. */
.brand-psy {
    /* The navbar and footer are black, where the brand blue itself is
       barely legible -- this is the same hue, lightened to clear WCAG AA. */
    color: var(--psy-blue-light);
}

.brand-mosaic {
    color: var(--qm-white);
}

.nav-link {
    color: rgba(255, 255, 255, 0.60) !important;
    font-size: .88rem;
    font-weight: 500;
    padding: .45rem .9rem !important;
    border-radius: 4px;
    letter-spacing: .2px;
    transition: color .2s;
}

.nav-link:hover,
.nav-link.active {
    color: #fff !important;
    background: transparent;
}

.navbar-toggler-icon {
    filter: invert(1);
}


/* Dropdown */

.dropdown-menu {
    background: var(--qm-dark);
    border: 1px solid var(--qm-border-dark);
    border-radius: 8px;
}

.dropdown-item {
    color: rgba(255, 255, 255, 0.60);
    font-size: .88rem;
}

.dropdown-item:hover {
    background: rgba(78, 205, 196, 0.08);
    color: var(--qm-teal);
}

.dropdown-divider {
    border-color: var(--qm-border-dark);
}


/* ── Buttons ─────────────────────────────────────── */

.btn-quantum {
    background: var(--qm-teal);
    color: #000;
    font-weight: 700;
    border: 2px solid var(--qm-teal);
    padding: .65rem 1.8rem;
    border-radius: 3px;
    transition: background .2s, color .2s, transform .15s;
    letter-spacing: .5px;
    text-transform: uppercase;
    font-size: .85rem;
}

.btn-quantum:hover {
    background: transparent;
    color: var(--qm-teal);
    transform: translateY(-1px);
}

.btn-outline-quantum {
    color: var(--qm-teal);
    border: 2px solid var(--qm-teal);
    background: transparent;
    padding: .65rem 1.8rem;
    border-radius: 3px;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    transition: background .2s, color .2s, transform .15s;
}

.btn-outline-quantum:hover {
    background: var(--qm-teal);
    color: #000;
    transform: translateY(-1px);
}


/* Dark bg variant of outline button */

.btn-outline-quantum-dark {
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    padding: .65rem 1.8rem;
    border-radius: 3px;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    transition: all .2s;
}

.btn-outline-quantum-dark:hover {
    border-color: var(--qm-teal);
    color: var(--qm-teal);
}


/* ── Hero Section ────────────────────────────────── */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: #0a0a2e;
}

#particles-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .35;
}

.hero-image-col {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.hero-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    /* Push JPEG near-blacks to true black — eliminates the foggy gray look */
    filter: brightness(0.81) contrast(1.61);
}

.hero-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    position: relative;
    z-index: 1;
}


/* Hero inner container */
.hero-inner {
  min-height: 100vh;
  padding-top: 5rem;
  padding-bottom: 5rem;
  position: relative;
  z-index: 1;
}

/* Book cover wrapper — manja korica sa glow efektom */
.hero-book-wrap {
  position: relative;
  display: inline-block;
}

.hero-book-img {
  width: 100%;
  max-width: 350px;
  display: block;
  border-radius: 10px;
  filter: brightness(0.81) contrast(1.61);
  box-shadow:
    -18px 22px 50px rgba(196, 168, 98, 0.40),
     18px -10px 35px rgba(78, 205, 196, 0.25),
     0 0 80px rgba(78, 205, 196, 0.10);
  transition: transform .3s, box-shadow .3s;
}

.hero-book-img:hover {
  transform: translateY(-6px) rotate(-1deg);
  box-shadow:
    -22px 30px 60px rgba(196, 168, 98, 0.50),
     22px -12px 40px rgba(78, 205, 196, 0.35),
     0 0 100px rgba(78, 205, 196, 0.15);
}

/* Product feature images (landing-page cards and the feature detail page). */
.book-feature-img {
  border-radius: 8px;
  object-fit: cover;
}

/* Vertical teal accent bar — matches nicepage style */

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    color: var(--qm-teal);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: .3rem .9rem;
    border-radius: 2px;
    margin-bottom: 1.5rem;
}

.hero-title {
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 1.2rem;
    color: #fff;
    letter-spacing: -1px;
}

.hero-title .highlight {
    color: var(--qm-teal);
}

.hero-subtitle {
    font-size: 1.05rem;
    color: var(--qm-text-faint);
    max-width: 460px;
    margin-bottom: 2rem;
    line-height: 1.7;
}


/* Stats row */

.hero-stat-num {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.hero-stat-label {
    font-size: .75rem;
    color: var(--qm-text-faint);
    letter-spacing: .3px;
    margin-top: .2rem;
}


/* ── Accent bar (short teal underline) ───────────── */

.hero-accent-bar {
    width: 48px;
    height: 3px;
    background: var(--qm-teal);
    border-radius: 2px;
    margin-bottom: 1rem;
}

/* ── Section labels & titles ─────────────────────── */

.section-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--qm-gold);
    margin-bottom: .6rem;
}


/* Dark bg variant */

.section-label-dark {
    color: var(--qm-teal);
}

.section-title {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 800;
    color: var(--qm-text-dark);
    margin-bottom: .75rem;
    letter-spacing: -0.5px;
}

.section-title-light {
    color: #fff;
}


/* ── Split section layout ────────────────────────── */

.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 480px;
}

.split-dark {
    background: var(--qm-dark);
    padding: 5rem 4rem;
    color: #fff;
}

.split-mint {
    background: var(--qm-mint);
    position: relative;
    overflow: hidden;
}


/* Diagonal dot/line pattern — decorative */

.split-mint::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 30%;
    background-image: repeating-linear-gradient( 45deg, rgba(78, 205, 196, 0.15) 0px, rgba(78, 205, 196, 0.15) 1px, transparent 1px, transparent 14px);
}


/* ── Cards ───────────────────────────────────────── */


/* Dark card (on dark sections) */

.quantum-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--qm-border-dark);
    border-radius: 4px;
    padding: 1.75rem;
    transition: border-color .25s, transform .25s, box-shadow .25s;
    color: #fff;
}

.quantum-card:hover {
    border-color: rgba(78, 205, 196, 0.35);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(78, 205, 196, 0.08);
}

.quantum-card .card-icon {
    width: 52px;
    height: 52px;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
    color: var(--qm-gold);
}

.quantum-card h3 {
    color: var(--qm-gold);
}

.quantum-card p,
.quantum-card .text-muted-q {
    color: rgba(255, 255, 255, 0.60) !important;
}


/* Light card (on white/light sections) */

.light-card {
    background: var(--qm-white);
    border: 1px solid var(--qm-border-light);
    border-radius: 4px;
    padding: 1.75rem;
    transition: border-color .25s, transform .25s, box-shadow .25s;
    color: var(--qm-text-dark);
}

.light-card:hover {
    border-color: var(--qm-teal);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(78, 205, 196, 0.12);
}

.light-card .card-icon {
    font-size: 1.6rem;
    color: var(--qm-teal);
    margin-bottom: 1rem;
}

.light-card h3 {
    color: var(--qm-text-dark);
    font-size: 1.05rem;
    margin-bottom: .5rem;
}

.light-card p {
    color: var(--qm-text-muted);
    font-size: .9rem;
}

/* Na svetloj kartici hover ne sme da providno-teal "nestane" na belom —
   ostaje pun dugme, samo tamniji teal. */
.light-card .btn-quantum:hover {
    background: var(--qm-teal-dark);
    color: #000;
    border-color: var(--qm-teal-dark);
}


/* ── Teal-bordered image frame ───────────────────── */

.teal-frame {
    border: 3px solid var(--qm-teal);
    border-radius: 4px;
    overflow: hidden;
}


/* ── Feature section (dark charcoal bg) ─────────── */

.features-dark {
    background: var(--qm-charcoal);
    padding: 5rem 0;
}


/* ── Code blocks ─────────────────────────────────── */

pre,
code {
    font-family: var(--font-mono);
}

.code-block {
    background: #04040e;
    border: 1px solid var(--qm-border-dark);
    border-radius: 6px;
    overflow: hidden;
}

.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--qm-dark2);
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--qm-border-dark);
}

.code-block-header .lang-badge {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--quantum-green);
    background: rgba(61, 220, 108, 0.08);
    padding: .2rem .6rem;
    border-radius: 4px;
}

.code-block pre {
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    font-size: .85rem;
    line-height: 1.65;
    color: #abb2bf;
    margin: 0;
}

.copy-btn {
    background: none;
    border: 1px solid var(--qm-border-dark);
    color: rgba(255, 255, 255, 0.40);
    font-size: .75rem;
    padding: .2rem .65rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s;
}

.copy-btn:hover {
    border-color: var(--qm-teal);
    color: var(--qm-teal);
}


/* ── Blog / Program list cards ───────────────────── */

.post-card {
    background: var(--qm-white);
    border: 1px solid var(--qm-border-light);
    border-radius: 4px;
    overflow: hidden;
    transition: transform .25s, border-color .25s, box-shadow .25s;
    height: 100%;
}

.post-card:hover {
    transform: translateY(-4px);
    border-color: var(--qm-teal);
    box-shadow: 0 10px 35px rgba(78, 205, 196, 0.10);
}

.post-card .post-cover {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.post-card .post-cover-placeholder {
    width: 100%;
    height: 200px;
    background: var(--qm-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--qm-teal);
}

.post-card .card-body {
    padding: 1.25rem;
}

.post-card .category-tag {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--qm-gold);
    margin-bottom: .5rem;
    display: block;
}

.post-card h3 {
    font-size: 1rem;
    margin-bottom: .4rem;
    color: var(--qm-text-dark);
}

.post-card p {
    color: var(--qm-text-muted);
}


/* ── Errata table ────────────────────────────────── */

.errata-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.errata-table th {
    background: var(--qm-light);
    color: var(--qm-text-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: .75rem 1rem;
    border-bottom: 2px solid var(--qm-border-light);
}

.errata-table td {
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--qm-border-light);
    font-size: .9rem;
    vertical-align: top;
    color: var(--qm-text-dark);
}

.errata-table tr:last-child td {
    border-bottom: none;
}

.severity-badge {
    font-size: .7rem;
    font-weight: 700;
    padding: .2rem .6rem;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.severity-critical {
    background: rgba(244, 67, 54, .12);
    color: #c0392b;
}

.severity-major {
    background: rgba(255, 152, 0, .12);
    color: #e67e22;
}

.severity-minor {
    background: rgba(78, 205, 196, .12);
    color: #27ae60;
}

.severity-typo {
    background: rgba(107, 114, 128, .12);
    color: #6b7280;
}


/* ── Bloch sphere form ───────────────────────────── */

.quantum-form label {
    color: var(--qm-text-muted);
    font-size: .85rem;
    margin-bottom: .3rem;
}

.quantum-form .form-control {
    background: var(--qm-light) !important;
    border: 1px solid var(--qm-border-light) !important;
    color: var(--qm-text-dark) !important;
    border-radius: 4px;
}

.quantum-form .form-control:focus {
    border-color: var(--qm-teal) !important;
    box-shadow: 0 0 0 3px rgba(78, 205, 196, .12) !important;
}

.bloch-image-container {
    background: var(--qm-light);
    border: 1px solid var(--qm-border-light);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.bloch-image-container img {
    max-width: 100%;
    border-radius: 6px;
}


/* ── Shop ────────────────────────────────────────── */

.book-detail-cover {
    border-radius: 8px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.20), 0 0 40px rgba(78, 205, 196, 0.10);
    max-width: 280px;
}

.price-display {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--qm-text-dark);
    line-height: 1;
}

.price-note {
    font-size: .8rem;
    color: var(--qm-text-muted);
}

.book-features li {
    padding: .4rem 0;
    color: var(--qm-text-muted);
    font-size: .9rem;
}

.book-features li i {
    color: var(--qm-teal);
    margin-right: .5rem;
}


/* ── Footer ──────────────────────────────────────── */

footer {
    background: var(--qm-black);
    border-top: 1px solid var(--qm-border-dark);
    color: rgba(255, 255, 255, 0.50);
    font-size: .85rem;
}

footer a {
    color: rgba(255, 255, 255, 0.50);
}

footer a:hover {
    color: var(--qm-teal);
}

footer .footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #fff;
}

footer h6 {
    color: rgba(255, 255, 255, 0.70) !important;
}


/* ── Utilities ───────────────────────────────────── */

.text-accent {
    color: var(--qm-teal) !important;
}

.text-accent2 {
    color: var(--qm-gold) !important;
}

.text-accent3 {
    color: #9b7de8 !important;
}

.text-muted-q {
    color: var(--qm-text-muted) !important;
}

.bg-surface {
    background: var(--qm-light);
}

.bg-surface2 {
    background: var(--qm-charcoal);
}

.border-quantum {
    border-color: var(--qm-border-light) !important;
}

.section-pad {
    padding: 5rem 0;
}

.section-pad-sm {
    padding: 3rem 0;
}


/* ── Mosaic card grid ───────────────────────────── */

.mosaic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.mosaic-cell {
    min-height: 220px;
    overflow: hidden;
    position: relative;
}

.mosaic-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mosaic-cell-text {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mosaic-gold {
    background: var(--qm-gold);
}

.mosaic-mint {
    background: var(--qm-mint);
}

.mosaic-dark {
    background: var(--qm-dark2);
    color: #fff;
}


/* ── Art backgrounds ─────────────────────────────── */

.page-art-header {
    position: relative;
    overflow: hidden;
    min-height: 240px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #0a0a2e 0%, #16165c 55%, #0a0a2e 100%);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 4rem 0 3rem;
}

/* A subtle teal wash so the header is not a flat block of navy. */
.page-art-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 120% at 85% 20%, rgba(78, 205, 196, .18) 0%, transparent 70%);
    z-index: 0;
}

.page-art-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
}

.page-art-header>.container {
    position: relative;
    z-index: 1;
}

.art-bg-entangle,
.art-bg-bloch,
.art-bg-circuit,
.art-bg-starburst {
    /* Kept as aliases for older templates; the header gradient below is the
       PsyMosaic look, so no background image is needed. */
    background-image: none;
}

.art-strip {
    position: relative;
    overflow: hidden;
    height: 160px;
    border-radius: 4px;
    background-size: cover;
    background-repeat: no-repeat;
}

.art-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .45) 50%, rgba(0, 0, 0, .92) 100%);
    z-index: 0;
}

.art-strip>* {
    position: relative;
    z-index: 1;
}


/* ── CTA section ─────────────────────────────────── */

.cta-section {
    background: var(--qm-black);
    padding: 5rem 0;
    text-align: center;
}


/* ── Alert tweaks ────────────────────────────────── */

.alert {
    background: var(--qm-light);
    border: 1px solid var(--qm-border-light);
    color: var(--qm-text-dark);
    border-radius: 4px;
}


/* ── Form controls (auth pages) ──────────────────── */

.form-control,
.form-select {
    background: var(--qm-light) !important;
    border: 1px solid var(--qm-border-light) !important;
    color: var(--qm-text-dark) !important;
    border-radius: 4px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--qm-teal) !important;
    box-shadow: 0 0 0 3px rgba(78, 205, 196, .12) !important;
}

.form-control::placeholder {
    color: var(--qm-text-muted) !important;
}


/* Auth page wrapper — keep dark bg for account pages */

.auth-page-bg {
    background: var(--qm-black);
    min-height: 100vh;
    display: flex;
    align-items: center;
}


/* ── Horizontal image strip ─────────────────────── */

.img-strip {
    display: grid;
    gap: 0;
    overflow: hidden;
}

.img-strip img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    transition: opacity .3s;
}

.img-strip img:hover {
    opacity: .85;
}


/* ── Responsive ──────────────────────────────────── */

@media (max-width: 991px) {
    .hero {
        flex-direction: column;
        min-height: auto;
    }
    .hero-image-col {
        height: 50vw;
        min-height: 300px;
    }
    .hero-text-col {
        padding: 3rem 1.5rem;
    }
    .split-section {
        grid-template-columns: 1fr;
    }
    .split-dark,
    .split-mint {
        padding: 3rem 1.5rem;
    }
    .mosaic-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.4rem;
    }
    .section-pad {
        padding: 3.5rem 0;
    }
}

/* Renderovan kratak/detaljan opis (Markdown/HTML) — uredne margine i responsivne slike */
.rich-excerpt p { margin-bottom: 0; }
.rich-excerpt p + p { margin-top: .35rem; }
.rich-excerpt img,
.rich-text img { max-width: 100%; height: auto; border-radius: 6px; }
.rich-text p:last-child { margin-bottom: 0; }

/* ==========================================================================
   EDA training pages
   Ported from PsyMosaic-Initial. The rules below were written against that
   project's design tokens, so those names are re-declared here and mapped onto
   the PsyMosaic palette rather than rewriting every rule.
   ========================================================================== */

:root {
    --indigo-900: #0a0a2e;
    --indigo-700: #16165c;
    --indigo-500: #2f2f8f;
    --teal-400: var(--qm-teal);
    --teal-300: #7fdbd4;
    --ink: var(--qm-text-dark);
    --ink-soft: var(--qm-text-muted);
    --canvas: var(--qm-light);
    --surface: #ffffff;
    --border: var(--qm-border-light);
    --radius: 16px;
    --shadow: 0 10px 30px rgba(10, 10, 46, 0.08);
}

/* Buttons used by the EDA pages */
.btn {
    display: inline-block;
    padding: 13px 26px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.98rem;
    transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-primary { background: var(--teal-400); color: var(--indigo-900); }
.btn-primary:hover { background: var(--teal-300); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(53, 196, 181, 0.35); }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }
.btn-teal { background: var(--teal-400); color: var(--indigo-900); }
.btn-teal:hover:not(:disabled) { background: var(--teal-300); }
.btn-ghost-dark { background: transparent; color: var(--indigo-700); border: 1px solid var(--border); }
.btn-ghost-dark:hover:not(:disabled) { background: var(--canvas); border-color: var(--indigo-500); }
.btn-danger { background: #d64545; color: #fff; }
.btn-danger:hover:not(:disabled) { background: #c0392b; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-link { background: none; border: none; color: var(--indigo-700); font-weight: 600; cursor: pointer; padding: 0; font-size: 0.9rem; }
.btn-link:hover { text-decoration: underline; }

/* ---------- EDA sub-navigation ---------- */
.eda-subnav { background: var(--surface); border-bottom: 1px solid var(--border); }
.eda-subnav-inner { display: flex; gap: 4px; }
.eda-subnav a {
    padding: 14px 18px;
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 0.95rem;
    border-bottom: 3px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.eda-subnav a:hover { color: var(--indigo-700); }
.eda-subnav a.active { color: var(--indigo-700); border-bottom-color: var(--teal-400); }

/* ---------- EDA page ---------- */
.eda-page { padding: 48px 0 80px; min-height: calc(100vh - 68px); }
.eda-head { margin-bottom: 28px; }
.eda-head h1 { font-size: clamp(1.7rem, 3.5vw, 2.2rem); }
.eda-head p { color: var(--ink-soft); font-size: 1.05rem; margin: 0; }

.eda-alert {
    background: #fff8e6;
    border: 1px solid #f0dea8;
    color: #7a5b12;
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 0.95rem;
}
.eda-alert code { background: rgba(0, 0, 0, 0.06); padding: 1px 6px; border-radius: 5px; }

.eda-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    box-shadow: var(--shadow);
}
.eda-status { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--ink); }
.status-dot { width: 11px; height: 11px; border-radius: 50%; background: #c0392b; flex: none; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15); }
.status-dot[data-state="connected"] { background: #27ae60; box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.18); }
.eda-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.eda-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0;
}
.eda-recording { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #c0392b; font-size: 0.92rem; }
.eda-recording[hidden] { display: none; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #d64545; animation: recpulse 1.2s ease-in-out infinite; }
@keyframes recpulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.75); } }
.eda-readings { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }
.eda-reading {
    display: flex;
    align-items: baseline;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 18px;
}
.eda-reading-label { color: var(--ink-soft); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.eda-reading-value { font-size: 1.5rem; font-weight: 700; color: var(--indigo-700); font-variant-numeric: tabular-nums; }

/* Per-state session timers */
.eda-timers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.timer-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 5px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.timer-card[data-state="relaxation"] { border-left-color: hsl(120, 60%, 45%); }
.timer-card[data-state="neutral"] { border-left-color: hsl(50, 85%, 50%); }
.timer-card[data-state="arousal"] { border-left-color: hsl(0, 75%, 52%); }
.timer-label { font-size: 0.8rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.timer-value { font-size: 1.7rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.timer-pct { font-size: 0.85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { .eda-timers { grid-template-columns: 1fr; } }

/* Arousal / relaxation indicator */
.eda-arousal {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 22px;
    margin-bottom: 18px;
}
.arousal-state { display: flex; align-items: center; gap: 16px; min-width: 220px; }
.arousal-dot {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex: none;
    background: #cbd0dc;
    box-shadow: 0 0 0 6px rgba(203, 208, 220, 0.18);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
.arousal-label { font-size: 1.35rem; font-weight: 700; color: var(--ink-soft); line-height: 1.1; transition: color 0.25s ease; }
.arousal-detail { font-size: 0.9rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.arousal-meter { flex: 1; min-width: 240px; position: relative; padding-bottom: 20px; }
.arousal-track {
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(to right,
        hsl(120, 70%, 45%) 0%, hsl(60, 80%, 50%) 50%, hsl(0, 78%, 52%) 100%);
}
.arousal-marker {
    position: absolute;
    top: -4px;
    left: 50%;
    width: 4px;
    height: 20px;
    border-radius: 3px;
    background: var(--ink);
    box-shadow: 0 0 0 2px var(--surface);
    transform: translateX(-50%);
    transition: left 0.2s ease;
}
.arousal-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--ink-soft);
    letter-spacing: 0.02em;
}

.eda-chart-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px;
}
.eda-legend { display: flex; gap: 18px; margin-bottom: 10px; font-size: 0.85rem; color: var(--ink-soft); flex-wrap: wrap; }
.legend-item { display: inline-flex; align-items: center; gap: 7px; }
.legend-swatch { width: 16px; height: 4px; border-radius: 2px; display: inline-block; }
#eda-chart, #session-chart { width: 100%; display: block; cursor: grab; touch-action: none; }
#eda-chart { height: 360px; }
#session-chart { height: 340px; }
.chart-controls { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.btn-chartctl {
    min-width: 34px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--indigo-700);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-chartctl:hover { background: var(--canvas); border-color: var(--indigo-500); }
.btn-chartctl.active { background: var(--teal-400); color: var(--indigo-900); border-color: var(--teal-400); }
.chart-hint { font-size: 0.8rem; color: var(--ink-soft); margin-left: 4px; }

.eda-session-bar { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.eda-note-field { display: flex; flex-direction: column; gap: 6px; }
.eda-note-field label { font-weight: 600; font-size: 0.85rem; color: var(--ink-soft); }
.eda-note-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font: inherit;
    font-size: 0.95rem;
    resize: vertical;
    background: var(--canvas);
}
.eda-note-field textarea:focus {
    outline: none;
    border-color: var(--indigo-500);
    box-shadow: 0 0 0 3px rgba(75, 75, 168, 0.15);
    background: #fff;
}
.eda-save-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.eda-save-status { font-size: 0.9rem; color: var(--ink-soft); }
.eda-save-status a { color: var(--indigo-700); font-weight: 600; }
.eda-session-link { margin-left: auto; }
.session-note-preview { display: block; font-size: 0.82rem; color: var(--ink-soft); margin-top: 3px; white-space: normal; }
.session-note { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 24px; margin-bottom: 18px; }
.session-note h2 { font-size: 1.1rem; margin: 0 0 8px; }
.session-note p { margin: 0; color: var(--ink-soft); }

.eda-log-wrap { margin-top: 22px; }
.eda-log-wrap summary { cursor: pointer; font-weight: 600; color: var(--indigo-700); }
.eda-log-hint { color: var(--ink-soft); font-weight: 400; font-size: 0.85rem; }
.eda-log-actions { margin: 10px 0 6px; }
.eda-log {
    background: #10121c;
    color: #c9d1e3;
    border-radius: 12px;
    padding: 14px 16px;
    height: 180px;
    overflow: auto;
    font-family: "Cascadia Code", Consolas, "Courier New", monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---------- Sessions list ---------- */
.session-table-wrap {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.session-table { width: 100%; border-collapse: collapse; }
.session-table th, .session-table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
    white-space: nowrap;
}
.session-table th { color: var(--ink-soft); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.session-table tbody tr:last-child td { border-bottom: none; }
.session-table tbody tr:hover { background: var(--canvas); }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pill-relax { background: hsl(120, 55%, 92%); color: hsl(120, 50%, 26%); }
.pill-neutral { background: hsl(50, 90%, 90%); color: hsl(45, 70%, 28%); }
.pill-arousal { background: hsl(0, 75%, 94%); color: hsl(0, 65%, 40%); }
.session-empty { color: var(--ink-soft); font-size: 1.05rem; }

/* ── Sharing a recording with a therapist ────────── */
/* The tick boxes on the session list. Recordings are private until one is
   ticked, so this control is the whole consent step for the archive. */
.session-sharing-note {
    margin: 0 0 1rem;
    font-size: .9rem;
    color: var(--qm-text-muted);
    max-width: 60ch;
}

.session-share-form {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    align-items: flex-start;
}

.session-share-option {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    white-space: nowrap;
    cursor: pointer;
}

.session-share-save {
    font-size: .8rem;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.session-sharing-auto {
    margin: 0 0 1rem;
    font-size: .9rem;
    color: var(--qm-text-dark);
    max-width: 60ch;
}

/* ── Sharing a session live ──────────────────────── */
/* The indicator is deliberately loud and always on screen while a broadcast
   runs: the client must never be unsure whether someone is watching. */
.eda-live-bar {
    border: 1px solid var(--qm-border-light);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
}

.eda-live-head { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .75rem; }
.eda-live-hint { font-size: .85rem; color: var(--qm-text-muted); }

.eda-live-idle, .eda-live-on {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
}

.eda-live-option { display: flex; align-items: center; gap: .4rem; font-size: .9rem; cursor: pointer; }

.eda-live-dot {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #e2585f;
    animation: eda-live-pulse 1.6s ease-in-out infinite;
}
.eda-live-dot-sm { width: 8px; height: 8px; vertical-align: middle; }

@keyframes eda-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.8); }
}

@media (prefers-reduced-motion: reduce) {
    .eda-live-dot { animation: none; }
}

/* The row carries twelve items and two buttons, and the Serbian labels are
   the long ones ("REGISTRACIJA" against "SIGN UP"). Laid out the way the
   collapsed menu lays out, it asks for 1572px and the widest row Bootstrap
   will ever expand to is 1400, so three things give way above the
   breakpoint -- and only above it, where space is the constraint.

   The selectors carry .navbar as well as .navbar-expand-xxl on purpose:
   Bootstrap's own padding rule matches with the same specificity and is
   loaded after this file, so the shorter selector silently loses. */
@media (min-width: 1400px) {

    /* 1. Half the default link padding, which is the cheapest 144px there
          is: it takes nothing away from the menu. The base .nav-link rule
          sets padding with !important, so this has to as well. */
    .navbar.navbar-expand-xxl .navbar-nav .nav-link {
        padding-left: .45rem !important;
        padding-right: .45rem !important;
    }

    /* 2. The icons are decorative next to a label that already says what
          the item is, and they cost 183px. They stay in the collapsed
          menu below this width, where they do help scanning and where
          the room is vertical. */
    .navbar.navbar-expand-xxl .navbar-nav .nav-link > i {
        display: none;
    }

    /* 3. Without this the row does not overflow, it wraps: the label drops
          under its own icon and the order button splits over two lines,
          which reads as a broken menu rather than a full one. */
    .navbar.navbar-expand-xxl .navbar-nav .nav-link,
    .navbar.navbar-expand-xxl .navbar-nav .btn {
        white-space: nowrap;
    }
}