/* =============================================================================
   OQILA AI — Design System
   Soft feminine, elegant, modern. Blush rose + sage + ivory. Glassmorphism.
   Light + Dark themes via [data-theme].
============================================================================= */

/* ---------------------------------------------------------------------------
   1. Design Tokens
--------------------------------------------------------------------------- */
:root{
  /* Brand palette */
  --oq-blush:#E8A0BF;
  --oq-blush-dark:#D6789F;
  --oq-blush-light:#F5CBDD;
  --oq-sage:#5B8A7A;
  --oq-sage-dark:#446B5E;
  --oq-sage-light:#8FB6A8;
  --oq-gold:#CDA86B;
  --oq-charcoal:#2D2A32;

  /* Semantic */
  --oq-success:#4C9A72;
  --oq-warning:#D9A54B;
  --oq-danger:#D2607A;
  --oq-info:#5B8AA6;

  /* Surfaces (light) */
  --oq-bg:#F8F4F1;
  --oq-bg-alt:#F1EAE6;
  --oq-bg-grad: radial-gradient(1200px 600px at 8% -10%, rgba(232,160,191,.14), transparent 55%),
                radial-gradient(1000px 700px at 100% 0%, rgba(91,138,122,.12), transparent 50%),
                linear-gradient(180deg,#FBF8F6 0%, #F6F0EC 45%, #F1EBE7 100%);
  --oq-surface:#FFFFFF;
  --oq-surface-alt:#FDFBFA;
  --oq-glass: rgba(255,255,255,.62);
  --oq-glass-border: rgba(255,255,255,.55);
  --oq-glass-shadow: 0 8px 32px rgba(45,42,50,.08);
  --oq-text:#2D2A32;
  --oq-text-soft:#615C68;
  --oq-text-muted:#8A8490;
  --oq-border: rgba(45,42,50,.08);
  --oq-border-strong: rgba(45,42,50,.14);

  /* Radii / motion */
  --oq-radius-sm:10px;
  --oq-radius:16px;
  --oq-radius-lg:20px;
  --oq-radius-xl:28px;
  --oq-transition: .25s cubic-bezier(.4,0,.2,1);
  --oq-transition-slow: .55s cubic-bezier(.16,1,.3,1);

  --oq-font: 'Manrope','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --oq-display: 'Cormorant Garamond','Georgia','Times New Roman',serif;
  --oq-shadow-sm: 0 2px 10px rgba(45,42,50,.06);
  --oq-shadow: 0 10px 30px rgba(45,42,50,.10);
  --oq-shadow-lg: 0 24px 60px rgba(45,42,50,.16);

  --bs-body-font-family: var(--oq-font);
}

[data-theme="dark"]{
  --oq-bg:#181620;
  --oq-bg-alt:#1F1C28;
  --oq-bg-grad: radial-gradient(1200px 600px at 8% -10%, rgba(232,160,191,.10), transparent 55%),
                radial-gradient(1000px 700px at 100% 0%, rgba(91,138,122,.14), transparent 50%),
                linear-gradient(180deg,#161420 0%, #1A1824 45%, #17151F 100%);
  --oq-surface:#221F2C;
  --oq-surface-alt:#1D1A26;
  --oq-glass: rgba(34,31,44,.58);
  --oq-glass-border: rgba(255,255,255,.08);
  --oq-glass-shadow: 0 8px 32px rgba(0,0,0,.35);
  --oq-text:#F3EFF6;
  --oq-text-soft:#C8C2D2;
  --oq-text-muted:#9089A0;
  --oq-border: rgba(255,255,255,.08);
  --oq-border-strong: rgba(255,255,255,.14);
  --oq-shadow-sm: 0 2px 10px rgba(0,0,0,.3);
  --oq-shadow: 0 10px 30px rgba(0,0,0,.35);
  --oq-shadow-lg: 0 24px 60px rgba(0,0,0,.5);
}

/* ---------------------------------------------------------------------------
   2. Base
--------------------------------------------------------------------------- */
*{ scrollbar-width: thin; scrollbar-color: var(--oq-blush) transparent; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--oq-font);
  background: var(--oq-bg-grad);
  background-attachment: fixed;
  color: var(--oq-text);
  transition: background-color var(--oq-transition), color var(--oq-transition);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{ color: var(--oq-sage-dark); text-decoration:none; }
a:hover{ color: var(--oq-blush-dark); }
[data-theme="dark"] a{ color: var(--oq-sage-light); }
img{ max-width:100%; }
::selection{ background: var(--oq-blush-light); color:var(--oq-charcoal); }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background: var(--oq-blush); border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }

h1,h2,h3,h4,h5,h6{ font-weight:800; letter-spacing:-.02em; color:var(--oq-text); }
.text-muted-soft{ color:var(--oq-text-soft) !important; }
.text-muted-2{ color:var(--oq-text-muted) !important; }
.fw-800{font-weight:800;} .fw-700{font-weight:700;}

.brand-gradient-text{
  background: linear-gradient(100deg, var(--oq-sage-dark), var(--oq-blush-dark) 65%, var(--oq-gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------------------------------------------------------------------------
   3. Glassmorphism cards & surfaces
--------------------------------------------------------------------------- */
.glass{
  background: var(--oq-glass);
  border: 1px solid var(--oq-glass-border);
  border-radius: var(--oq-radius-lg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--oq-glass-shadow);
}
.card-oq{
  background: var(--oq-surface);
  border: 1px solid var(--oq-border);
  border-radius: var(--oq-radius-lg);
  box-shadow: var(--oq-shadow-sm);
  transition: transform var(--oq-transition), box-shadow var(--oq-transition), border-color var(--oq-transition);
}
.card-oq:hover{ transform: translateY(-4px); box-shadow: var(--oq-shadow); border-color: var(--oq-border-strong); }
.card-oq-flat{ background:var(--oq-surface); border:1px solid var(--oq-border); border-radius:var(--oq-radius); }

.surface-panel{
  background: var(--oq-surface);
  border-radius: var(--oq-radius-lg);
  border: 1px solid var(--oq-border);
  box-shadow: var(--oq-shadow-sm);
}

/* ---------------------------------------------------------------------------
   4. Buttons
--------------------------------------------------------------------------- */
.btn{ border-radius: 999px; font-weight:700; padding:.62rem 1.4rem; transition: all var(--oq-transition); }
.btn-sm{ padding:.4rem 1rem; }
.btn-oq-primary{
  background: linear-gradient(120deg, var(--oq-sage) 0%, var(--oq-sage-dark) 100%);
  border:none; color:#fff; box-shadow: 0 8px 20px rgba(91,138,122,.35);
}
.btn-oq-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(91,138,122,.42); color:#fff; }
.btn-oq-accent{
  background: linear-gradient(120deg, var(--oq-blush) 0%, var(--oq-blush-dark) 100%);
  border:none; color:#fff; box-shadow: 0 8px 20px rgba(214,120,159,.35);
}
.btn-oq-accent:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(214,120,159,.42); color:#fff; }
.btn-oq-outline{
  background: transparent; border:1.5px solid var(--oq-border-strong); color: var(--oq-text);
}
.btn-oq-outline:hover{ border-color: var(--oq-sage); color: var(--oq-sage-dark); background: rgba(91,138,122,.06); }
.btn-oq-ghost{ background: rgba(45,42,50,.04); border:none; color:var(--oq-text); }
[data-theme="dark"] .btn-oq-ghost{ background: rgba(255,255,255,.06); }
.btn-oq-white{ background:#fff; color: var(--oq-charcoal); border:none; }
.btn-icon{ width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; padding:0; border-radius:50%; }

/* ---------------------------------------------------------------------------
   5. Navbar
--------------------------------------------------------------------------- */
.oq-navbar{
  position: sticky; top:0; z-index:1030;
  background: var(--oq-glass);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--oq-border);
  transition: all var(--oq-transition);
}
.oq-navbar .navbar-brand{ display:flex; align-items:center; gap:.55rem; font-weight:800; font-size:1.25rem; color:var(--oq-text); }
.oq-navbar .navbar-brand img{ height:34px; }
.oq-navbar .nav-link{
  color: var(--oq-text-soft); font-weight:700; padding: .5rem .9rem !important; border-radius:999px; position:relative;
}
.oq-navbar .nav-link:hover, .oq-navbar .nav-link.active{ color: var(--oq-sage-dark); background: rgba(91,138,122,.08); }
.oq-navbar .dropdown-menu{
  border-radius: var(--oq-radius); border:1px solid var(--oq-border); box-shadow: var(--oq-shadow);
  background: var(--oq-surface); padding:.5rem;
}
.oq-navbar .dropdown-item{ border-radius: var(--oq-radius-sm); padding:.55rem .85rem; font-weight:600; }
.oq-navbar .dropdown-item:hover{ background: rgba(232,160,191,.12); color: var(--oq-blush-dark); }

.lang-switch .btn{ border-radius:999px; }
.theme-toggle{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--oq-border-strong);
  display:inline-flex; align-items:center; justify-content:center; background: var(--oq-surface);
  cursor:pointer; transition: all var(--oq-transition);
}
.theme-toggle:hover{ transform: rotate(15deg); border-color: var(--oq-blush); }
.theme-toggle i{ font-size:1.1rem; }

/* ---------------------------------------------------------------------------
   6. Hero
--------------------------------------------------------------------------- */
.hero-oq{
  position: relative; overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(900px 420px at 85% 10%, rgba(232,160,191,.22), transparent 60%),
    radial-gradient(700px 380px at 5% 90%, rgba(91,138,122,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.35), transparent 40%);
}
.hero-oq .hero-blob{
  position:absolute; border-radius:50%; filter: blur(10px); opacity:.55; z-index:0;
  animation: floatY 9s ease-in-out infinite;
}
.hero-oq .blob-1{ width:340px;height:340px; background: radial-gradient(circle, var(--oq-blush-light), transparent 70%); top:-80px; right:6%; }
.hero-oq .blob-2{ width:260px;height:260px; background: radial-gradient(circle, var(--oq-sage-light), transparent 70%); bottom:-60px; left:2%; animation-delay:1.5s; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; padding:.45rem 1rem; border-radius:999px;
  background: rgba(232,160,191,.14); color: var(--oq-blush-dark); font-weight:700; font-size:.8rem;
  border:1px solid rgba(232,160,191,.3); letter-spacing:.02em;
}
.hero-title{ font-family: var(--oq-display); font-size: clamp(2.6rem, 5.2vw, 4rem); line-height:1.08; font-weight:700; letter-spacing:-0.02em; }
.brand-gradient-text{
  background: linear-gradient(120deg, var(--oq-blush-dark) 0%, #C46B8E 40%, var(--oq-sage) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 8px 24px rgba(214,120,159,.18));
}
.hero-lead{ font-size:1.15rem; color: var(--oq-text-soft); max-width:560px; }
.hero-visual{ position:relative; z-index:1; }
.hero-card-float{
  position:absolute; padding:1rem 1.2rem; border-radius: var(--oq-radius); animation: floatY 6s ease-in-out infinite;
}

@keyframes floatY{ 0%,100%{ transform:translateY(0px);} 50%{ transform:translateY(-16px);} }
@keyframes floatX{ 0%,100%{ transform:translateX(0px);} 50%{ transform:translateX(10px);} }
@keyframes fadeUp{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }
@keyframes scaleIn{ from{opacity:0; transform:scale(.92);} to{opacity:1; transform:scale(1);} }
@keyframes pulseGlow{ 0%,100%{ box-shadow:0 0 0 0 rgba(232,160,191,.4);} 50%{ box-shadow:0 0 0 14px rgba(232,160,191,0);} }
@keyframes shimmer{ 0%{ background-position: -200% 0;} 100%{ background-position: 200% 0;} }
@keyframes spin{ to{ transform: rotate(360deg); } }

.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.08s; } .reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; } .reveal-delay-4{ transition-delay:.32s; }

/* ---------------------------------------------------------------------------
   7. Sections / headings
--------------------------------------------------------------------------- */
.section-pad{ padding: 4.5rem 0; }
.section-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; font-size:.75rem; color: var(--oq-sage-dark);
}
.section-eyebrow::before{ content:''; width:22px; height:3px; border-radius:3px; background: var(--oq-blush); display:inline-block; }
.section-title{ font-size: clamp(1.8rem, 3vw, 2.5rem); margin-top:.4rem; }

/* Stats strip */
.stat-tile{ text-align:center; padding:1.5rem 1rem; }
.stat-tile .num{ font-size:2.2rem; font-weight:800; color: var(--oq-sage-dark); }
[data-theme="dark"] .stat-tile .num{ color: var(--oq-sage-light); }
.stat-tile .lbl{ color: var(--oq-text-soft); font-weight:600; font-size:.9rem; }

/* Module / feature grid */
.module-card{
  padding:1.6rem; border-radius: var(--oq-radius-lg); height:100%; display:flex; flex-direction:column; gap:.75rem;
  background: var(--oq-surface); border:1px solid var(--oq-border); transition: all var(--oq-transition-slow);
}
.module-card:hover{ transform: translateY(-6px); box-shadow: var(--oq-shadow-lg); border-color:transparent; }
.module-icon{
  width:56px; height:56px; border-radius: var(--oq-radius); display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:#fff; background: linear-gradient(135deg, var(--oq-sage), var(--oq-sage-dark));
  box-shadow: 0 8px 20px rgba(91,138,122,.3);
}
.module-card:nth-child(2n) .module-icon{ background: linear-gradient(135deg, var(--oq-blush), var(--oq-blush-dark)); box-shadow: 0 8px 20px rgba(214,120,159,.3); }
.module-card:nth-child(3n) .module-icon{ background: linear-gradient(135deg, var(--oq-gold), #B08A4A); box-shadow: 0 8px 20px rgba(205,168,107,.3); }

/* Content cards (articles/courses/videos/books) */
.content-card{ border-radius: var(--oq-radius-lg); overflow:hidden; background:var(--oq-surface); border:1px solid var(--oq-border); height:100%; display:flex; flex-direction:column; transition: all var(--oq-transition); }
.content-card:hover{ transform: translateY(-5px); box-shadow: var(--oq-shadow-lg); }
.content-card .thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; background: linear-gradient(135deg, var(--oq-sage-light), var(--oq-blush-light)); }
.content-card .thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.content-card:hover .thumb img{ transform: scale(1.06); }
.content-card .body{ padding:1.25rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.badge-oq{ border-radius:999px; font-weight:700; padding:.35em .8em; font-size:.72rem; }
.badge-sage{ background: rgba(91,138,122,.14); color: var(--oq-sage-dark); }
.badge-blush{ background: rgba(232,160,191,.16); color: var(--oq-blush-dark); }
.badge-gold{ background: rgba(205,168,107,.18); color:#8A6B33; }
[data-theme="dark"] .badge-gold{ color:#E3C589; }

/* Progress */
.progress-oq{ height:10px; border-radius:999px; background: var(--oq-bg-alt); overflow:hidden; }
.progress-oq .bar{ height:100%; border-radius:999px; background: linear-gradient(90deg, var(--oq-sage), var(--oq-blush)); transition: width .6s ease; }

/* Avatar */
.avatar-oq{ border-radius:50%; object-fit:cover; border:2px solid var(--oq-surface); box-shadow:0 0 0 2px var(--oq-border); }

/* Timeline */
.timeline-oq{ position:relative; padding-left:2rem; }
.timeline-oq::before{ content:''; position:absolute; left:8px; top:6px; bottom:6px; width:2px; background: linear-gradient(var(--oq-sage), var(--oq-blush)); }
.timeline-item{ position:relative; padding-bottom:1.6rem; }
.timeline-item::before{ content:''; position:absolute; left:-2rem; top:2px; width:14px; height:14px; border-radius:50%; background: var(--oq-surface); border:3px solid var(--oq-sage); }

/* Testimonials */
.story-card{ border-radius: var(--oq-radius-lg); padding:1.75rem; background: var(--oq-surface); border:1px solid var(--oq-border); position:relative; height:100%; }
.story-card::before{ content:'\201C'; font-family: Georgia, serif; font-size:4rem; color: var(--oq-blush-light); position:absolute; top:.4rem; right:1.2rem; line-height:1; }

/* Forms */
.form-label{ font-weight:700; color: var(--oq-text); font-size:.88rem; }
.form-control, .form-select{
  border-radius: var(--oq-radius-sm); border:1.5px solid var(--oq-border-strong); background: var(--oq-surface);
  color: var(--oq-text); padding:.68rem 1rem; transition: all var(--oq-transition);
}
.form-control:focus, .form-select:focus{
  border-color: var(--oq-sage); box-shadow: 0 0 0 4px rgba(91,138,122,.14); background: var(--oq-surface);
}
.form-control::placeholder{ color: var(--oq-text-muted); }
.input-group-text{ background: var(--oq-bg-alt); border:1.5px solid var(--oq-border-strong); color: var(--oq-text-soft); }
.form-check-input{ border-color: var(--oq-border-strong); width:1.2em; height:1.2em; }
.form-check-input:checked{ background-color: var(--oq-sage); border-color: var(--oq-sage); }
.invalid-feedback{ font-weight:600; }
.was-validated .form-control:invalid, .form-control.is-invalid{ border-color: var(--oq-danger); }

.form-floating > label{ color: var(--oq-text-muted); }

/* Auth pages */
.auth-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1rem; position:relative; overflow:hidden; }
.auth-card{ width:100%; max-width:480px; padding:2.4rem; border-radius: var(--oq-radius-xl); position:relative; z-index:1; animation: fadeUp .6s ease; }
.auth-card-wide{ max-width:760px; }
.auth-side-badge{ width:64px; height:64px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:1.7rem; color:#fff; background: linear-gradient(135deg, var(--oq-sage), var(--oq-blush)); margin:0 auto 1rem; box-shadow: 0 10px 24px rgba(91,138,122,.32); }

/* Sidebar (dashboard/admin) */
.oq-shell{ display:flex; min-height:100vh; }
.oq-sidebar{
  width:280px; flex-shrink:0; background: var(--oq-surface); border-right:1px solid var(--oq-border);
  position:sticky; top:0; height:100vh; overflow-y:auto; transition: all var(--oq-transition); z-index:1040;
}
.oq-sidebar .brand-block{ padding:1.5rem 1.4rem; display:flex; align-items:center; gap:.6rem; border-bottom:1px solid var(--oq-border); }
.oq-sidebar .brand-block img{ height:32px; }
.oq-sidebar .nav-section-title{ text-transform:uppercase; font-size:.7rem; letter-spacing:.08em; color: var(--oq-text-muted); font-weight:800; padding:1.1rem 1.4rem .4rem; }
.oq-sidebar .nav-link{
  display:flex; align-items:center; gap:.75rem; padding:.68rem 1.4rem; color: var(--oq-text-soft); font-weight:700;
  border-radius:0; position:relative; font-size:.92rem;
}
.oq-sidebar .nav-link i{ font-size:1.15rem; width:22px; text-align:center; }
.oq-sidebar .nav-link:hover{ background: rgba(91,138,122,.08); color: var(--oq-sage-dark); }
.oq-sidebar .nav-link.active{ background: linear-gradient(90deg, rgba(91,138,122,.14), transparent); color: var(--oq-sage-dark); font-weight:800; }
.oq-sidebar .nav-link.active::before{ content:''; position:absolute; left:0; top:8px; bottom:8px; width:4px; border-radius:4px; background: linear-gradient(var(--oq-sage), var(--oq-blush)); }
.oq-sidebar .nav-link .badge{ margin-left:auto; }
.oq-main{ flex:1; min-width:0; }
.oq-topbar{
  position:sticky; top:0; z-index:1020; background: var(--oq-glass); backdrop-filter: blur(14px);
  border-bottom:1px solid var(--oq-border); padding:.9rem 1.5rem; display:flex; align-items:center; gap:1rem;
}
.oq-content{ padding:1.75rem; max-width:1400px; }
.sidebar-toggle-btn{ display:none; }
.mobile-sidebar-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1035; }

@media (max-width: 991.98px){
  .oq-sidebar{ position:fixed; left:0; transform: translateX(-100%); box-shadow: var(--oq-shadow-lg); }
  .oq-sidebar.is-open{ transform: translateX(0); }
  .sidebar-toggle-btn{ display:inline-flex; }
  .mobile-sidebar-backdrop.is-open{ display:block; }
}

/* Stat / dashboard cards */
.kpi-card{ padding:1.4rem 1.5rem; border-radius: var(--oq-radius-lg); background: var(--oq-surface); border:1px solid var(--oq-border); display:flex; align-items:center; gap:1rem; }
.kpi-icon{ width:52px; height:52px; border-radius: var(--oq-radius); display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:#fff; flex-shrink:0; }
.kpi-value{ font-size:1.7rem; font-weight:800; line-height:1.1; }
.kpi-label{ color: var(--oq-text-soft); font-weight:600; font-size:.85rem; }

.stat-card{ padding:1.5rem 1.4rem; border-radius: var(--oq-radius-lg); background: var(--oq-surface); border:1px solid var(--oq-border); height:100%; transition: all var(--oq-transition); }
.stat-card:hover{ transform: translateY(-3px); box-shadow: var(--oq-shadow); }
.stat-icon{ width:48px; height:48px; border-radius: var(--oq-radius); display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:#fff; margin-bottom:.9rem; }
.stat-value{ font-size:1.9rem; font-weight:800; line-height:1.1; }
.stat-label{ color: var(--oq-text-soft); font-weight:600; font-size:.85rem; margin-top:.15rem; }
.stat-trend{ font-size:.76rem; font-weight:700; margin-top:.6rem; display:flex; align-items:center; gap:.2rem; }
.stat-trend.positive{ color: var(--oq-sage-dark); }
.stat-trend.negative{ color: var(--oq-danger); }

/* Tables */
.table-oq{ --bs-table-bg:transparent; }
.table-oq thead th{ border-bottom:2px solid var(--oq-border); color: var(--oq-text-muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800; }
.table-oq td, .table-oq th{ vertical-align:middle; padding:.85rem .9rem; border-color: var(--oq-border); }
.table-oq tbody tr{ transition: background var(--oq-transition); }
.table-oq tbody tr:hover{ background: rgba(91,138,122,.06); }
.table-responsive-oq{ border-radius: var(--oq-radius-lg); overflow:hidden; border:1px solid var(--oq-border); background: var(--oq-surface); }

/* Pagination */
.pagination-nav .pagination{ gap:.3rem; }
.pagination .page-link{ border-radius:10px !important; border:1px solid var(--oq-border); color: var(--oq-text-soft); font-weight:700; }
.pagination .page-item.active .page-link{ background: var(--oq-sage); border-color: var(--oq-sage); }
.pagination .page-item.disabled .page-link{ opacity:.5; }

/* Chat / AI */
.chat-shell{ display:flex; flex-direction:column; height: calc(100vh - 76px); }
.chat-messages{ flex:1; overflow-y:auto; padding:1.5rem; }
.chat-bubble{ max-width:78%; padding:.9rem 1.15rem; border-radius: var(--oq-radius-lg); margin-bottom:1rem; line-height:1.55; animation: fadeUp .35s ease; }
.chat-bubble.user{ margin-left:auto; background: linear-gradient(120deg, var(--oq-sage), var(--oq-sage-dark)); color:#fff; border-bottom-right-radius:6px; }
.chat-bubble.assistant{ background: var(--oq-surface); border:1px solid var(--oq-border); border-bottom-left-radius:6px; }
.chat-bubble.assistant p:last-child{ margin-bottom:0; }
.chat-avatar{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1rem; color:#fff; }
.typing-dots{ display:inline-flex; gap:4px; align-items:center; }
.typing-dots span{ width:7px; height:7px; border-radius:50%; background: var(--oq-sage); animation: typingBounce 1.2s infinite; }
.typing-dots span:nth-child(2){ animation-delay:.15s; } .typing-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes typingBounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5;} 30%{ transform:translateY(-5px); opacity:1;} }

.disclaimer-banner{ border-radius: var(--oq-radius); padding:.9rem 1.1rem; font-size:.86rem; display:flex; gap:.7rem; border:1px solid; }
.disclaimer-banner.medical{ background: rgba(214,120,159,.08); border-color: rgba(214,120,159,.25); color:#9A4A68; }
.disclaimer-banner.legal{ background: rgba(91,138,122,.08); border-color: rgba(91,138,122,.25); color: var(--oq-sage-dark); }
.disclaimer-banner.psychologist, .disclaimer-banner.stress{ background: rgba(205,168,107,.1); border-color: rgba(205,168,107,.3); color:#8A6B33; }
.disclaimer-banner.emergency{ background: rgba(210,96,122,.14); border-color: rgba(210,96,122,.4); color:#9A2E48; font-weight:700; }
[data-theme="dark"] .disclaimer-banner.medical{ color:#F0AFC7; }
[data-theme="dark"] .disclaimer-banner.psychologist, [data-theme="dark"] .disclaimer-banner.stress{ color:#E3C589; }
[data-theme="dark"] .disclaimer-banner.legal{ color: var(--oq-sage-light); }
[data-theme="dark"] .disclaimer-banner.emergency{ color:#F5B7C3; }

.chat-suggest-chip{
  border:1.5px solid var(--oq-border-strong); border-radius:999px; padding:.5rem 1rem; font-weight:700; font-size:.84rem;
  background: var(--oq-surface); transition: all var(--oq-transition); cursor:pointer;
}
.chat-suggest-chip:hover{ border-color: var(--oq-sage); color: var(--oq-sage-dark); transform: translateY(-2px); }

.chat-input-bar{ border-top:1px solid var(--oq-border); padding:1rem 1.5rem 1.4rem; background: var(--oq-glass); backdrop-filter: blur(12px); }
.chat-input-bar textarea{ resize:none; border-radius: var(--oq-radius); }

/* Assistant type cards */
.ai-type-card{ border-radius: var(--oq-radius-lg); padding:1.6rem; background: var(--oq-surface); border:1px solid var(--oq-border); height:100%; transition: all var(--oq-transition); position:relative; overflow:hidden; }
.ai-type-card:hover{ transform: translateY(-6px); box-shadow: var(--oq-shadow-lg); }
.ai-type-card .ai-icon{ width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:#fff; margin-bottom:1rem; }

/* Mood / emoji picker */
.mood-pick{ display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:.9rem .6rem; border-radius: var(--oq-radius); border:2px solid transparent; cursor:pointer; transition: all var(--oq-transition); font-size:1.9rem; background: var(--oq-surface); }
.mood-pick:hover{ background: rgba(232,160,191,.1); }
.mood-pick.active{ border-color: var(--oq-blush); background: rgba(232,160,191,.14); }
.mood-pick .lbl{ font-size:.72rem; font-weight:700; color: var(--oq-text-soft); }

/* Calendar */
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-cell{ min-height:96px; border-radius:12px; padding:.4rem; background: var(--oq-surface); border:1px solid var(--oq-border); font-size:.78rem; }
.cal-cell.is-other{ opacity:.35; }
.cal-cell.is-today{ border-color: var(--oq-blush); box-shadow: 0 0 0 3px rgba(232,160,191,.15); }
.cal-dot{ width:6px; height:6px; border-radius:50%; background: var(--oq-sage); display:inline-block; margin-right:3px; }

/* Footer */
.oq-footer{ background: var(--oq-surface-alt); border-top:1px solid var(--oq-border); padding: 3.5rem 0 1.5rem; margin-top:4rem; }
.oq-footer h6{ font-weight:800; margin-bottom:1rem; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; color: var(--oq-text-muted); }
.oq-footer a{ color: var(--oq-text-soft); font-weight:600; display:block; padding:.3rem 0; }
.oq-footer a:hover{ color: var(--oq-blush-dark); }
.footer-social a{ width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background: var(--oq-bg-alt); margin-right:.5rem; padding:0 !important; }
.footer-bottom{ border-top:1px solid var(--oq-border); margin-top:2rem; padding-top:1.5rem; font-size:.85rem; color: var(--oq-text-muted); }

/* Misc utility */
.rounded-oq{ border-radius: var(--oq-radius) !important; }
.rounded-oq-lg{ border-radius: var(--oq-radius-lg) !important; }
.shadow-oq{ box-shadow: var(--oq-shadow) !important; }
.skeleton{ background: linear-gradient(90deg, var(--oq-bg-alt) 25%, var(--oq-border) 37%, var(--oq-bg-alt) 63%); background-size:400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--oq-radius-sm); }
.divider-dot{ width:5px; height:5px; border-radius:50%; background: var(--oq-text-muted); display:inline-block; margin:0 .5rem; vertical-align:middle; }
.chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .8rem; border-radius:999px; background: var(--oq-bg-alt); font-weight:700; font-size:.78rem; }
.empty-state{ text-align:center; padding:3.5rem 1.5rem; }
.empty-state .icon{ width:84px; height:84px; border-radius:50%; background: rgba(91,138,122,.1); display:flex; align-items:center; justify-content:center; font-size:2.1rem; color: var(--oq-sage); margin:0 auto 1.2rem; }

.back-to-top{ position:fixed; bottom:24px; right:24px; z-index:1050; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--oq-sage), var(--oq-blush)); color:#fff; box-shadow: var(--oq-shadow); opacity:0; visibility:hidden; transition: all var(--oq-transition); }
.back-to-top.is-visible{ opacity:1; visibility:visible; }

.floating-ai-btn{
  position:fixed; bottom:26px; right:26px; z-index:1045; width:60px; height:60px; border-radius:50%;
  background: linear-gradient(135deg, var(--oq-blush), var(--oq-sage)); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; box-shadow: 0 14px 30px rgba(91,138,122,.35); animation: pulseGlow 3s infinite;
}

.nav-pills-oq .nav-link{ border-radius:999px; font-weight:700; color: var(--oq-text-soft); padding:.55rem 1.2rem; }
.nav-pills-oq .nav-link.active{ background: linear-gradient(120deg, var(--oq-sage), var(--oq-sage-dark)); color:#fff; }

.offcanvas{ background: var(--oq-surface); color: var(--oq-text); }
.modal-content{ background: var(--oq-surface); color: var(--oq-text); border-radius: var(--oq-radius-lg); border:1px solid var(--oq-border); }
.dropdown-menu{ background: var(--oq-surface); }
.form-control:disabled, .form-select:disabled{ background: var(--oq-bg-alt); opacity:.7; }
.accordion-item{ background: var(--oq-surface); border-color: var(--oq-border); border-radius: var(--oq-radius) !important; overflow:hidden; margin-bottom:.75rem; }
.accordion-button{ background: var(--oq-surface); color: var(--oq-text); font-weight:700; }
.accordion-button:not(.collapsed){ background: rgba(91,138,122,.08); color: var(--oq-sage-dark); box-shadow:none; }
.accordion-button:focus{ box-shadow:none; }

hr{ border-color: var(--oq-border); opacity:1; }

@media (max-width: 767.98px){
  .hero-oq{ padding: 4rem 0 3rem; text-align:center; }
  .hero-lead{ margin-left:auto; margin-right:auto; }
  .oq-content{ padding:1.1rem; }
  .section-pad{ padding:3rem 0; }
}

.text-sage{ color: var(--oq-sage-dark) !important; }
[data-theme="dark"] .text-sage{ color: var(--oq-sage-light) !important; }

/* ---------------------------------------------------------------------------
   8. Panel shell (user + admin layouts) — sidebar / topbar / content
--------------------------------------------------------------------------- */
.oq-panel-shell{ display:flex; min-height:100vh; }
.oq-panel-content{ flex:1; min-width:0; display:flex; flex-direction:column; }
.oq-panel-topbar{
  position:sticky; top:0; z-index:1020; background: var(--oq-glass); backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom:1px solid var(--oq-border); padding:.9rem 1.5rem; display:flex; align-items:center; gap:1rem;
}
.oq-panel-title{ font-size:1.35rem; font-weight:800; margin:0; }
.oq-panel-main{ padding:1.75rem; max-width:1440px; width:100%; flex:1; }
@media (max-width: 767.98px){ .oq-panel-main{ padding:1.1rem; } .oq-panel-topbar{ padding:.8rem 1rem; } }

.sidebar-mobile-toggle{
  display:none; position:fixed; top:14px; left:14px; z-index:1060; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--oq-border-strong); background: var(--oq-surface); color:var(--oq-text); align-items:center; justify-content:center;
  box-shadow: var(--oq-shadow-sm);
}
.oq-sidebar .sidebar-close{ display:none; background:transparent; border:none; color: var(--oq-text-soft); font-size:1.1rem; }
.sidebar-backdrop{ position:fixed; inset:0; background:rgba(20,18,26,.45); z-index:1039; opacity:0; visibility:hidden; transition: opacity var(--oq-transition); }

@media (max-width: 991.98px){
  .sidebar-mobile-toggle{ display:flex; }
  .oq-panel-topbar .sidebar-mobile-toggle{ position:static; box-shadow:none; }
  .oq-sidebar{ position:fixed; left:0; top:0; transform: translateX(-102%); box-shadow: var(--oq-shadow-lg); }
  .oq-sidebar.is-open{ transform: translateX(0); }
  .oq-sidebar .sidebar-close{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; }
  .sidebar-backdrop.is-open{ opacity:1; visibility:visible; }
  body > .sidebar-mobile-toggle{ display:none; }
}

.oq-sidebar{ display:flex; flex-direction:column; }
.sidebar-brand{ padding:1.4rem 1.4rem 1.1rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--oq-border); }
.sidebar-brand img{ height:30px; }
.sidebar-user{ display:flex; align-items:center; gap:.7rem; padding:1.1rem 1.4rem; border-bottom:1px solid var(--oq-border); }
.sidebar-user-info{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.sidebar-user-info strong{ font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
.badge-role{ display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:700; color: var(--oq-sage-dark); background: rgba(91,138,122,.12); padding:.15rem .55rem; border-radius:999px; margin-top:.2rem; width:fit-content; }
.sidebar-nav{ flex:1; overflow-y:auto; padding:.75rem .8rem; display:flex; flex-direction:column; gap:.15rem; }
.sidebar-heading{ text-transform:uppercase; font-size:.68rem; letter-spacing:.08em; color: var(--oq-text-muted); font-weight:800; padding:1rem .6rem .35rem; }
.sidebar-link{
  display:flex; align-items:center; gap:.75rem; padding:.62rem .9rem; color: var(--oq-text-soft); font-weight:700;
  border-radius: var(--oq-radius-sm); font-size:.9rem; transition: all var(--oq-transition); position:relative;
}
.sidebar-link i{ font-size:1.1rem; width:20px; text-align:center; flex-shrink:0; }
.sidebar-link:hover{ background: rgba(91,138,122,.08); color: var(--oq-sage-dark); }
.sidebar-link.active{ background: linear-gradient(90deg, rgba(91,138,122,.16), rgba(232,160,191,.08)); color: var(--oq-sage-dark); }
.sidebar-footer{ padding:1rem 1.1rem 1.3rem; border-top:1px solid var(--oq-border); }
.oq-sidebar-admin .sidebar-link:hover, .oq-sidebar-admin .sidebar-link.active{ color: var(--oq-blush-dark); background: linear-gradient(90deg, rgba(232,160,191,.16), rgba(91,138,122,.06)); }

/* ---------------------------------------------------------------------------
   9. Auth + install shells
--------------------------------------------------------------------------- */
.oq-auth-body, .oq-install-body{ min-height:100vh; }
.oq-auth-decor{ position:fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.oq-blob{ position:absolute; border-radius:50%; filter: blur(60px); opacity:.5; animation: floatY 10s ease-in-out infinite; }
.oq-blob-1{ width:420px; height:420px; background: var(--oq-blush-light); top:-120px; right:-80px; }
.oq-blob-2{ width:360px; height:360px; background: var(--oq-sage-light); bottom:-120px; left:-100px; animation-delay:2s; }

.oq-auth-shell, .oq-install-shell{ position:relative; z-index:1; max-width:520px; margin:0 auto; padding:2.2rem 1.2rem 3rem; min-height:100vh; display:flex; flex-direction:column; }
.oq-auth-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.6rem; }
.oq-auth-logo img{ height:36px; }
.oq-auth-card, .oq-install-card{ padding:2.2rem; border-radius: var(--oq-radius-xl); animation: fadeUp .5s ease; }
.oq-auth-footnote{ text-align:center; font-size:.78rem; color: var(--oq-text-muted); margin-top:1.5rem; }
.oq-auth-footnote a{ color: var(--oq-text-muted); text-decoration:underline; }

.oq-install-shell{ max-width:640px; }
.install-steps{ display:flex; list-style:none; padding:0; margin:0 0 1.6rem; gap:.4rem; }
.install-steps li{ flex:1; text-align:center; font-size:.72rem; font-weight:700; color: var(--oq-text-muted); }
.install-step-num{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background: var(--oq-bg-alt); margin:0 auto .35rem; font-weight:800; color: var(--oq-text-soft); }
.install-steps li.active .install-step-num{ background: linear-gradient(135deg, var(--oq-sage), var(--oq-blush)); color:#fff; }
.install-steps li.done .install-step-num{ background: var(--oq-sage); color:#fff; }
.install-step-label{ display:block; }