/* ═══════════════════════════════════════════════════════════════
   QUDRATPLAN v14.0 · Launch Edition · style.css
   Apple/iOS Aesthetic · Perfect Glassmorphism · Spring Animations
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. DESIGN TOKENS ─── */
:root {
  /* Brand */
  --p:        #2563eb; --p-h: #1d4ed8; --p-l: #dbeafe; --p-ultra: rgba(37,99,235,.07); --p-glow: rgba(37,99,235,.30);
  --green:    #10b981; --green-l: #d1fae5; --green-dark: #059669;
  --amber:    #f59e0b; --amber-l: #fef3c7; --amber-dark: #92400e;
  --red:      #ef4444; --red-l: #fee2e2; --red-dark: #b91c1c;
  --purple:   #8b5cf6; --purple-l: #ede9fe;
  --teal:     #06b6d4;
  --orange:   #f97316;

  /* Surfaces */
  --bg:         #f2f2f7;
  --srf:        #ffffff;
  --srf2:       #f2f2f7;
  --srf3:       #e5e5ea;
  --srf-glass:  rgba(255,255,255,.82);
  --srf-glass2: rgba(255,255,255,.60);
  --bdr:        rgba(60,60,67,.15);
  --sep:        rgba(60,60,67,.09);

  /* Text */
  --tx1: #1c1c1e; --tx2: #3a3a3c; --tx3: #8e8e93; --tx4: #aeaeb2;

  /* Bars */
  --nav-h:  68px; --nav-bg:  rgba(249,249,252,.94); --nav-bdr: rgba(60,60,67,.11);
  --top-h:  60px; --top-bg:  rgba(249,249,252,.94); --top-bdr: rgba(60,60,67,.09);

  /* Shadows — layered for depth */
  --sh-xs: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03);
  --sh-sm: 0 2px 8px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --sh-md: 0 4px 20px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  --sh-lg: 0 8px 36px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.05);
  --sh-xl: 0 16px 56px rgba(0,0,0,.12), 0 8px 20px rgba(0,0,0,.06);
  --sh-p:  0 4px 22px rgba(37,99,235,.32), 0 2px 8px rgba(37,99,235,.18);
  --sh-green: 0 4px 18px rgba(16,185,129,.28);
  --sh-amber: 0 4px 18px rgba(245,158,11,.28);

  /* Radii */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:24px; --r-2xl:32px; --r-f:9999px;

  /* Motion (spring = overshoot) */
  --spring:   cubic-bezier(.34,1.56,.64,1);
  --spring-s: cubic-bezier(.43,1.3,.6,1);
  --ease:     cubic-bezier(.4,0,.2,1);
  --ease-o:   cubic-bezier(0,0,.2,1);
  --t: .22s;
  --t-fast: .14s;

  --font: 'Cairo', -apple-system, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* Timeline */
  --tl-line: rgba(60,60,67,.12);
  --rev-bg:  rgba(168,85,247,.07); --rev-bdr: rgba(168,85,247,.24); --rev-tx: #7c3aed;

  /* Notes */
  --note-bg: #fffbeb; --note-bdr: #fde68a; --note-f: #f59e0b;

  /* Pomodoro */
  --pomo-focus: #ef4444; --pomo-short: #10b981; --pomo-long: #3b82f6;
  --pomo-track: rgba(0,0,0,.07); --pomo-bg: rgba(255,255,255,.88);

  /* Capacity */
  --cap-off:    #ef4444; --cap-off-l:    rgba(239,68,68,.10);
  --cap-busy:   #f59e0b; --cap-busy-l:   rgba(245,158,11,.10);
  --cap-normal: #10b981; --cap-normal-l: rgba(16,185,129,.10);

  /* Blur amounts */
  --blur-sm: blur(12px);
  --blur-md: blur(20px);
  --blur-lg: blur(32px);
}

[data-theme="dark"] {
  --p: #4f8ef7; --p-h: #6ba4ff; --p-l: rgba(79,142,247,.18); --p-ultra: rgba(79,142,247,.09);
  --bg: #000000; --srf: #1c1c1e; --srf2: #2c2c2e; --srf3: #3a3a3c;
  --srf-glass: rgba(28,28,30,.88); --srf-glass2: rgba(28,28,30,.65);
  --bdr: rgba(255,255,255,.10); --sep: rgba(255,255,255,.06);
  --tx1: #f2f2f7; --tx2: rgba(235,235,245,.80); --tx3: rgba(235,235,245,.54); --tx4: rgba(235,235,245,.26);
  --nav-bg: rgba(28,28,30,.96); --nav-bdr: rgba(255,255,255,.07);
  --top-bg: rgba(28,28,30,.96); --top-bdr: rgba(255,255,255,.06);
  --sh-xs:0 1px 3px rgba(0,0,0,.5); --sh-sm:0 2px 8px rgba(0,0,0,.46);
  --sh-md:0 4px 20px rgba(0,0,0,.54); --sh-lg:0 8px 36px rgba(0,0,0,.64); --sh-xl:0 16px 56px rgba(0,0,0,.74);
  --tl-line: rgba(255,255,255,.08);
  --rev-bg: rgba(168,85,247,.12); --rev-bdr: rgba(168,85,247,.30);
  --note-bg: rgba(251,191,36,.07); --note-bdr: rgba(251,191,36,.20); --note-f: #d97706;
  --pomo-track: rgba(255,255,255,.09); --pomo-bg: rgba(28,28,30,.92);
  --cap-off-l:    rgba(239,68,68,.15);
  --cap-busy-l:   rgba(245,158,11,.15);
  --cap-normal-l: rgba(16,185,129,.15);
}

/* ─── 2. RESET & BASE ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--tx1);
  direction:rtl;
  overflow:hidden;
  height:100dvh;
  -webkit-font-smoothing:antialiased;
  transition:background var(--t) var(--ease),color var(--t) var(--ease)
}
a{text-decoration:none;color:inherit}
button{font-family:var(--font);cursor:pointer;border:none;background:none;-webkit-tap-highlight-color:transparent;transition:transform var(--t-fast) var(--spring),opacity var(--t-fast) var(--ease)}
button:active:not(:disabled){transform:scale(.96)}
svg{display:block}
ul,ol{list-style:none}
input,textarea{font-family:var(--font)}

/* ─── 3. ATOMS ─── */
.logo-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  background:linear-gradient(135deg,var(--p) 0%,var(--p-h) 100%);
  color:#fff;border-radius:var(--r-sm);font-size:1.05rem;font-weight:900;
  box-shadow:var(--sh-p);
  transition:transform var(--t) var(--spring)
}
.logo-mark:hover{transform:rotate(-8deg) scale(1.1)}
.logo-name{font-size:1.15rem;font-weight:800;color:var(--tx1);letter-spacing:-.3px;transition:color var(--t)}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border-radius:var(--r-md);
  background:var(--srf-glass);
  backdrop-filter:var(--blur-sm);
  -webkit-backdrop-filter:var(--blur-sm);
  border:1px solid var(--bdr);
  color:var(--tx3);
  transition:background var(--t),color var(--t),transform var(--t-fast) var(--spring),box-shadow var(--t)
}
.icon-btn:hover{background:var(--srf);color:var(--tx1);box-shadow:var(--sh-sm)}
.icon-btn:active{transform:scale(.9)}

.btn-full{
  width:100%;padding:14px 20px;
  background:linear-gradient(135deg,var(--p) 0%,var(--p-h) 100%);
  color:#fff;font-size:.96rem;font-weight:700;
  border-radius:var(--r-lg);
  box-shadow:var(--sh-p);
  transition:transform var(--t-fast) var(--spring),box-shadow var(--t),opacity var(--t)
}
.btn-full:hover{box-shadow:0 6px 28px rgba(37,99,235,.40);transform:translateY(-1px)}
.btn-full:active{transform:scale(.97)}

.btn-outline-sm{
  padding:9px 18px;border:1.5px solid var(--bdr);
  border-radius:var(--r-f);font-size:.84rem;font-weight:600;color:var(--tx2);
  background:var(--srf);
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t-fast) var(--spring)
}
.btn-outline-sm:hover{background:var(--p-ultra);color:var(--p);border-color:var(--p)}

/* PRO chip */
.pro-chip{
  display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.05em;
  background:linear-gradient(135deg,#f59e0b,#f97316);
  color:#fff;border-radius:var(--r-f);padding:2px 7px;margin-right:4px;
  vertical-align:middle;
}

/* ─── 4. RIPPLE ─── */
@keyframes rippleFade{to{transform:scale(2.6);opacity:0;}}

/* ─── 5. TOAST ─── */
.toast{
  position:fixed;bottom:calc(var(--nav-h) + var(--safe-b) + 16px);
  left:50%;transform:translateX(-50%) translateY(20px);
  background:rgba(28,28,30,.96);
  backdrop-filter:var(--blur-md);-webkit-backdrop-filter:var(--blur-md);
  color:#f2f2f7;
  padding:11px 22px;border-radius:var(--r-f);
  font-size:.88rem;font-weight:600;
  white-space:nowrap;max-width:calc(100vw - 40px);
  pointer-events:none;z-index:9999;
  box-shadow:var(--sh-lg);
  opacity:0;transition:opacity .22s var(--ease),transform .28s var(--spring)
}
.toast--show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ─── 6. APP SHELL ─── */
.app-shell{
  display:flex;flex-direction:column;height:100dvh;
  padding-top:var(--safe-t);overflow:hidden;
}

/* ─── 7. TOP BAR ─── */
.top-bar{
  position:sticky;top:0;z-index:100;
  height:var(--top-h);
  background:var(--top-bg);
  backdrop-filter:var(--blur-md);-webkit-backdrop-filter:var(--blur-md);
  border-bottom:1px solid var(--top-bdr);
}
.top-bar__inner{
  height:100%;max-width:600px;margin:0 auto;
  padding:0 16px;
  display:flex;align-items:center;justify-content:space-between;
}
.top-bar__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  direction: ltr; /* force LTR so Q always leads */
}
.top-bar__actions{display:flex;align-items:center;gap:8px}

/* Streak badge in top bar */
.streak-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 11px;border-radius:var(--r-f);
  background:rgba(249,115,22,.10);
  color:var(--tx2);font-size:.82rem;font-weight:700;
  border:1.5px solid rgba(249,115,22,.20);
  cursor:pointer;
  transition:all var(--t) var(--spring)
}
.streak-badge--active{
  background:rgba(249,115,22,.16);color:#ea580c;
  border-color:rgba(249,115,22,.35);
  box-shadow:0 2px 12px rgba(249,115,22,.22)
}
.streak-badge:active{transform:scale(.93)}

/* ─── 8. APP CONTENT ─── */
.app-content{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:16px 16px calc(var(--nav-h) + var(--safe-b) + 16px);
  max-width:600px;margin:0 auto;width:100%;
  -webkit-overflow-scrolling:touch;
}

/* ─── 9. TAB PANELS ─── */
.tab-panel{display:none}
.tab-panel.active{display:block;animation:panelIn .28s var(--ease-o) both}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ─── 10. BOTTOM NAV ─── */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:100;
  height:calc(var(--nav-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  display:flex;align-items:center;justify-content:space-around;
  padding-top:4px;
}
.bottom-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--nav-bg);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border-top: 1px solid var(--nav-bdr);
}
.nav-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  flex:1;padding:6px 4px;
  color:var(--tx4);
  transition:color var(--t) var(--ease)
}
.nav-item svg{width:22px;height:22px;transition:transform var(--t) var(--spring)}
.nav-item__label{font-size:.66rem;font-weight:600;letter-spacing:-.01em}
.nav-item.active{color:var(--p)}
.nav-item.active .nav-item__icon svg{transform:scale(1.1)}
.nav-item--fab .nav-item__icon{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;margin-top:-22px;
  background:linear-gradient(135deg,var(--p) 0%,var(--p-h) 100%);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-p);
  transition:transform var(--t) var(--spring),box-shadow var(--t)
}
.nav-item--fab .nav-item__icon svg{stroke:#fff;width:24px;height:24px}
.nav-item--fab.active .nav-item__icon{transform:scale(1.06);box-shadow:0 6px 28px rgba(37,99,235,.42)}
.nav-item--fab .nav-item__label{color:var(--tx3)}
.nav-item--fab.active .nav-item__label{color:var(--p)}

/* ─── 11. SECTION TITLES ─── */
.section-title{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;margin-top:4px;
}
.section-title h2{font-size:1rem;font-weight:700;color:var(--tx1)}
.section-badge{
  font-size:.72rem;font-weight:700;letter-spacing:.05em;
  background:var(--p-l);color:var(--p);
  padding:3px 10px;border-radius:var(--r-f);
}
.section-title--page{margin-bottom:20px}
.section-title--page h2{font-size:1.3rem;font-weight:800}
.section-subtitle{font-size:.84rem;color:var(--tx3);margin-top:2px}

/* ─── 12. HOME TAB ─── */
.home-header-simple{
  padding:22px 2px 10px;
  margin-bottom:2px;
}
.home-header-simple h1{
  font-size:1.5rem;
  font-weight:800;
  color:var(--tx1);
  margin:0;
  line-height:1.35;
}

/* ── Top row: commit card + countdown ── */
.home-top-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:16px;
}

/* Commitment Rate Card */
.commit-card{
  background:var(--srf);
  border-radius:var(--r-xl);
  padding:16px 14px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:var(--sh-sm);
  transition:transform var(--t-fast) var(--spring);
}
.commit-card:active{transform:scale(.98)}
.commit-card__ring-wrap{
  position:relative;flex-shrink:0;width:60px;height:60px;
}
.commit-ring-svg{
  width:60px;height:60px;
  transform:rotate(-90deg);
}
.commit-ring__track{
  fill:none;stroke:var(--srf3);stroke-width:6;
}
.commit-ring__fill{
  fill:none;stroke:var(--p);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:175.9;stroke-dashoffset:175.9;
  transition:stroke-dashoffset 1s var(--ease);
}
.commit-ring__pct{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:800;color:var(--tx1);
}
.commit-card__body{
  display:flex;flex-direction:column;gap:3px;min-width:0;
}
.commit-card__label{
  font-size:.72rem;font-weight:700;color:var(--tx3);
  white-space:nowrap;
}
.commit-card__sub{
  font-size:.76rem;font-weight:600;color:var(--tx2);
  line-height:1.35;
}

/* Countdown card — restyled to match */
.countdown-card{
  background:var(--srf);
  border-radius:var(--r-xl);
  padding:16px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  box-shadow:var(--sh-sm);
}
.countdown-card__label{
  font-size:.72rem;color:var(--tx3);font-weight:700;
  display:block;margin-bottom:2px;
}
.countdown-nums{display:flex;gap:8px}
.countdown-num{display:flex;flex-direction:column;align-items:flex-start}
.countdown-num span{font-size:2rem;font-weight:900;color:var(--tx1);line-height:1}
.countdown-num small{font-size:.68rem;color:var(--tx3);font-weight:600;margin-top:2px}
.countdown-card__date{font-size:.74rem;color:var(--tx3);font-weight:600;margin-top:2px}

/* ── Streak Center Card ── */
.streak-center-card{
  background:linear-gradient(135deg,rgba(249,115,22,.12) 0%,rgba(234,88,12,.08) 100%);
  border:1.5px solid rgba(249,115,22,.22);
  border-radius:var(--r-xl);
  padding:14px 18px;
  display:flex;align-items:center;gap:12px;
  margin-bottom:12px;
  box-shadow:0 4px 18px rgba(249,115,22,.12);
  cursor:pointer;
  transition:transform var(--t-fast) var(--spring),box-shadow var(--t)
}
.streak-center-card:active{transform:scale(.98)}
.streak-center-card:hover{box-shadow:0 6px 24px rgba(249,115,22,.18)}
.streak-center-card__fire{font-size:2rem;animation:fireFlicker 2s ease-in-out infinite}
@keyframes fireFlicker{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.08) rotate(3deg)}}
.streak-center-card__body{flex:1}
.streak-center-card__count{font-size:1.6rem;font-weight:900;color:#ea580c;line-height:1}
.streak-center-card__label{font-size:.78rem;color:var(--tx3);font-weight:600;margin-top:2px}
.streak-center-card__status .status-chip{font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:var(--r-f)}
.streak-center-card__open-btn{
  width:34px;height:34px;border-radius:var(--r-md);
  background:rgba(249,115,22,.12);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background var(--t)
}
.streak-center-card__open-btn svg{width:18px;height:18px;stroke:var(--orange)}

/* ── Home section header ── */
.home-section-hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin:4px 0 12px;
}
.home-section-hdr__title{font-size:.96rem;font-weight:700;color:var(--tx1)}
.home-section-hdr__badge{
  font-size:.70rem;font-weight:700;letter-spacing:.04em;
  background:var(--p-l);color:var(--p);
  padding:3px 10px;border-radius:var(--r-f);
}
[data-theme="dark"] .home-section-hdr__badge{background:var(--p-ultra);color:var(--p)}

/* ── Subject cards (iOS widget style) ── */
.subj-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}

.subj-card{
  border-radius:var(--r-xl);
  padding:14px 16px;
  box-shadow:var(--sh-xs);
  transition:transform var(--t-fast) var(--spring),box-shadow var(--t);
  position:relative;overflow:hidden;
}
.subj-card:active{transform:scale(.99)}
.subj-card--blue{
  background:rgba(37,99,235,.06);
  border:1px solid rgba(37,99,235,.13);
}
.subj-card--purple{
  background:rgba(139,92,246,.06);
  border:1px solid rgba(139,92,246,.13);
}
.subj-card--green{
  background:rgba(16,185,129,.06);
  border:1px solid rgba(16,185,129,.13);
}
[data-theme="dark"] .subj-card--blue{background:rgba(79,142,247,.09);border-color:rgba(79,142,247,.18)}
[data-theme="dark"] .subj-card--purple{background:rgba(139,92,246,.10);border-color:rgba(139,92,246,.20)}
[data-theme="dark"] .subj-card--green{background:rgba(16,185,129,.09);border-color:rgba(16,185,129,.18)}

.subj-card__top{
  display:flex;align-items:center;gap:10px;
  margin-bottom:10px;
}
.subj-card__icon{
  width:36px;height:36px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.subj-card__icon svg{width:18px;height:18px}
.subj-card--blue  .subj-card__icon{background:rgba(37,99,235,.14);color:var(--p)}
.subj-card--purple .subj-card__icon{background:rgba(139,92,246,.14);color:var(--purple)}
.subj-card--green  .subj-card__icon{background:rgba(16,185,129,.14);color:var(--green-dark)}

.subj-card__meta{flex:1;min-width:0}
.subj-card__name{
  display:block;font-size:.84rem;font-weight:700;color:var(--tx1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:2px;
}
.subj-card__fraction{
  font-size:.72rem;font-weight:600;color:var(--tx3);
}
.subj-card__score{
  font-size:1.15rem;font-weight:900;
  letter-spacing:-.01em;
}
.subj-card--blue   .subj-card__score{color:var(--p)}
.subj-card--purple .subj-card__score{color:var(--purple)}
.subj-card--green  .subj-card__score{color:var(--green-dark)}

.subj-card__bar-wrap{
  display:flex;align-items:center;gap:8px;
}
.subj-card__track{
  flex:1;height:6px;background:var(--srf3);border-radius:var(--r-f);overflow:hidden;
}
.subj-card--blue   .subj-card__track{background:rgba(37,99,235,.14)}
.subj-card--purple .subj-card__track{background:rgba(139,92,246,.14)}
.subj-card--green  .subj-card__track{background:rgba(16,185,129,.14)}
.subj-card__fill{
  height:100%;border-radius:var(--r-f);
  width:0%;transition:width .9s var(--ease);
}
.subj-card--blue   .subj-card__fill{background:var(--p)}
.subj-card--purple .subj-card__fill{background:var(--purple)}
.subj-card--green  .subj-card__fill{background:var(--green-dark)}
.subj-card__level{
  font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:var(--r-f);
  white-space:nowrap;flex-shrink:0;
}
.level--high{background:rgba(16,185,129,.14);color:var(--green-dark)}
.level--mid {background:rgba(245,158,11,.14);color:var(--amber-dark)}
.level--low {background:rgba(239,68,68,.14); color:var(--red-dark)}

/* Focus analytics */
.focus-analytics-card{
  background:var(--srf);border:1px solid var(--bdr);
  border-radius:var(--r-xl);padding:14px 16px;
  display:flex;align-items:center;gap:12px;
  box-shadow:var(--sh-xs);margin-bottom:16px;
}
.focus-analytics-card__icon{font-size:1.5rem}
.focus-analytics-card__body{flex:1}
.focus-card__label{font-size:.74rem;color:var(--tx3);font-weight:600}
.focus-card__time{font-size:1rem;font-weight:800;color:var(--tx1)}
.focus-card__sessions{font-size:.74rem;color:var(--tx3);font-weight:500}

/* Legacy .perf-list kept for non-home tabs (shouldn't exist but just in case) */
.perf-list{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.perf-card{
  background:var(--srf);border:1px solid var(--bdr);
  border-radius:var(--r-xl);padding:14px 16px;
  box-shadow:var(--sh-xs);
}
.perf-card__header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.perf-icon{width:36px;height:36px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.perf-icon svg{width:18px;height:18px}
.perf-icon--blue{background:var(--p-l);color:var(--p)}
.perf-icon--purple{background:var(--purple-l);color:var(--purple)}
.perf-icon--green{background:var(--green-l);color:var(--green-dark)}
.perf-card__info{flex:1;min-width:0}
.perf-card__subject{display:block;font-size:.82rem;font-weight:700;color:var(--tx1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.perf-card__level{display:inline-block;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:var(--r-f);margin-top:3px}
.perf-card__score{font-size:1.05rem;font-weight:800;color:var(--tx1)}
.progress-track{height:6px;background:var(--srf3);border-radius:var(--r-f);overflow:hidden}
.progress-track--thick{height:8px}
.progress-fill{height:100%;border-radius:var(--r-f);background:var(--c,var(--p));transition:width .8s var(--ease)}

/* ─── 13. PLAN TAB ─── */
.time-banner{
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,rgba(37,99,235,.08) 0%,rgba(139,92,246,.06) 100%);
  border:1px solid rgba(37,99,235,.15);
  border-radius:var(--r-lg);padding:10px 14px;margin-bottom:12px;
  font-size:.84rem;font-weight:600;color:var(--tx2);
}
.time-banner__icon{font-size:1.1rem}

.plan-actions-row{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;
}
.plan-action-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;border-radius:var(--r-lg);
  font-size:.84rem;font-weight:700;
  border:1.5px solid transparent;
  transition:all var(--t) var(--spring);
  position:relative;overflow:hidden;
}
.plan-action-btn svg{width:18px;height:18px;flex-shrink:0}
.plan-action-btn--amber{
  background:rgba(245,158,11,.10);color:#92400e;
  border-color:rgba(245,158,11,.25);
}
.plan-action-btn--amber:hover{background:rgba(245,158,11,.16);transform:translateY(-1px);box-shadow:var(--sh-amber)}
.plan-action-btn--blue{
  background:rgba(37,99,235,.08);color:var(--p);
  border-color:rgba(37,99,235,.20);
}
.plan-action-btn--blue:hover{background:rgba(37,99,235,.14);transform:translateY(-1px);box-shadow:var(--sh-p)}
[data-theme="dark"] .plan-action-btn--amber{color:#fbbf24}
[data-theme="dark"] .plan-action-btn--blue{color:#93c5fd}
.plan-action-btn--green {
  background: rgba(16, 185, 129, .10);
  color: #065f46;
  border-color: rgba(16, 185, 129, .28);
  grid-column: 1 / -1;          /* spans full width */
}
.plan-action-btn--green:hover {
  background: rgba(16, 185, 129, .18);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(16, 185, 129, .22);
}
[data-theme="dark"] .plan-action-btn--green { color: #6ee7b7; }
.plan-topbar{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.plan-topbar__center{text-align:center}
.plan-topbar__title{font-size:.96rem;font-weight:700}
.plan-topbar__week{font-size:.78rem;color:var(--tx3);font-weight:600;margin-top:1px}
.week-nav-btn{
  width:36px;height:36px;border-radius:var(--r-md);
  background:var(--srf2);border:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t) var(--spring)
}
.week-nav-btn svg{width:18px;height:18px;stroke:var(--tx3)}
.week-nav-btn:hover{background:var(--srf);box-shadow:var(--sh-sm)}
.week-nav-btn:disabled{opacity:.35;pointer-events:none}

.week-progress-bar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.week-progress-bar .progress-track{flex:1}
.week-progress-label{font-size:.74rem;color:var(--tx3);font-weight:600;white-space:nowrap;font-feature-settings:'tnum'}

/* Timeline */
.timeline{display:flex;flex-direction:column;gap:10px}
.timeline-empty{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:48px 20px;color:var(--tx4);font-size:.88rem;font-weight:600;
  text-align:center;
}
.timeline-empty span{font-size:2.5rem}

.tl-day{
  background:var(--srf);border:1px solid var(--bdr);
  border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-xs);
  transition:box-shadow var(--t)
}
.tl-day--today{
  border-color:var(--p);
  box-shadow:0 0 0 1px var(--p),var(--sh-md),0 4px 20px rgba(37,99,235,.12);
}
.tl-day--off{background:var(--srf2);opacity:.75}
.tl-day--done{border-color:var(--green);box-shadow:0 0 0 1px var(--green),var(--sh-xs)}
.tl-day--busy{border-color:var(--amber);opacity:.9}

.tl-day__header{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--sep);
}
.tl-day__dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--tx4);
  transition:background var(--t)
}
.tl-day--today .tl-day__dot{background:var(--p);box-shadow:0 0 0 3px var(--p-l)}
.tl-day--done .tl-day__dot{background:var(--green);box-shadow:0 0 0 3px var(--green-l)}
.tl-day__date-info{flex:1}
.tl-day__date{display:flex;align-items:center;gap:6px;font-size:.86rem;font-weight:700;color:var(--tx1)}
.tl-day__sub{display:block;font-size:.72rem;color:var(--tx3);font-weight:500;margin-top:1px}
.tl-day__progress{font-size:.8rem;font-weight:700;color:var(--tx3)}
.tl-day--done .tl-day__progress{color:var(--green)}
.tl-day__today-badge{
  font-size:.64rem;font-weight:800;letter-spacing:.04em;
  background:var(--p);color:#fff;
  padding:2px 7px;border-radius:var(--r-f);
}
.tl-day__busy-badge{
  font-size:.64rem;font-weight:800;
  background:var(--amber-l);color:var(--amber-dark);
  padding:2px 7px;border-radius:var(--r-f);
}

.tl-day__card{padding:12px 14px}
.tl-phase-label{
  font-size:.72rem;font-weight:700;
  margin-bottom:8px;color:var(--tx3)
}
.tl-phase-label.p1{color:var(--p)}
.tl-phase-label.p2{color:var(--purple)}

.tl-task-list{display:flex;flex-direction:column;gap:7px}
.tl-task{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:var(--r-md);
  background:var(--srf2);border:1px solid var(--sep);
  transition:all var(--t) var(--spring)
}
.tl-task--done{
  background:rgba(16,185,129,.07);
  border-color:rgba(16,185,129,.18);
}
.tl-task--done .tl-task__title{text-decoration:line-through;color:var(--tx4)}
.tl-task__check{
  width:26px;height:26px;border-radius:var(--r-sm);
  border:2px solid var(--bdr);background:var(--srf);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:all var(--t) var(--spring)
}
.tl-task__check svg{width:12px;height:12px;stroke:transparent;transition:stroke var(--t)}
.tl-task--done .tl-task__check{background:var(--green);border-color:var(--green);box-shadow:var(--sh-green)}
.tl-task--done .tl-task__check svg{stroke:#fff}
.tl-task__check:hover{border-color:var(--p);background:var(--p-ultra)}
.tl-task__body{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px}
.tl-task__title{font-size:.8rem;font-weight:600;color:var(--tx2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-task__tag{font-size:.64rem;font-weight:800;letter-spacing:.03em;padding:2px 8px;border-radius:var(--r-f);flex-shrink:0}
.tag--blue{background:var(--p-l);color:var(--p)}
.tag--purple{background:var(--purple-l);color:var(--purple)}
.tag--green{background:var(--green-l);color:var(--green-dark)}

.tl-off-card{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:16px 0;
}
.tl-off-card__icon{font-size:1.8rem}
.tl-off-card__title{font-size:.88rem;font-weight:700;color:var(--tx2)}
.tl-off-card__sub{font-size:.76rem;color:var(--tx3);text-align:center}

/* Notes */
.tl-notes-wrap{margin-top:10px;padding-top:10px;border-top:1px solid var(--sep)}
.tl-notes-label{display:flex;align-items:center;gap:6px;font-size:.74rem;font-weight:600;color:var(--tx3);margin-bottom:6px}
.tl-notes-label svg{width:13px;height:13px}
.tl-notes-textarea{
  width:100%;padding:9px 12px;border-radius:var(--r-md);
  background:var(--srf2);border:1.5px solid var(--bdr);
  color:var(--tx1);font-size:.82rem;resize:none;
  transition:border-color var(--t),box-shadow var(--t)
}
.tl-notes-textarea:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px rgba(37,99,235,.10)}
.tl-notes-saved{font-size:.72rem;color:var(--green);font-weight:600;margin-top:4px;display:none}

/* Week summary */
.week-summary-card{
  background:linear-gradient(135deg,var(--p-ultra) 0%,rgba(16,185,129,.05) 100%);
  border:1px solid var(--bdr);border-radius:var(--r-xl);
  padding:14px 16px;
}
.week-summary-card__header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.week-summary-card__icon{font-size:1.3rem}
.week-summary-card__title{font-size:.86rem;font-weight:700;color:var(--tx1)}
.week-summary-card__sub{font-size:.74rem;color:var(--tx3);font-weight:500}
.week-summary-card__empty{font-size:.82rem;color:var(--tx4);font-style:italic}
.week-summary-note{display:flex;gap:10px;margin-bottom:8px}
.week-summary-note__bullet{width:6px;height:6px;border-radius:50%;background:var(--p);margin-top:6px;flex-shrink:0}
.week-summary-note__date{font-size:.72rem;font-weight:700;color:var(--tx3)}
.week-summary-note__text{font-size:.8rem;color:var(--tx2)}

/* ─── 14. ROUTINE TAB ─── */
.routine-section{
  background:var(--srf);border:1px solid var(--bdr);
  border-radius:var(--r-xl);padding:16px;
  margin-bottom:12px;box-shadow:var(--sh-xs);
}
.routine-section__header{margin-bottom:14px}
.routine-section__title{font-size:.96rem;font-weight:700;margin-bottom:3px}
.routine-section__sub{font-size:.78rem;color:var(--tx3)}

/* Capacity */
.capacity-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.capacity-row{display:flex;align-items:center;gap:10px}
.capacity-row__day{width:56px;font-size:.82rem;font-weight:700;color:var(--tx2);flex-shrink:0}
.capacity-row__seg{
  flex:1;display:flex;border-radius:var(--r-f);
  background:var(--srf2);border:1px solid var(--bdr);
  overflow:hidden;padding:2px;gap:2px;
}
.cap-seg-btn{
  flex:1;padding:6px 4px;border-radius:var(--r-f);
  font-size:.7rem;font-weight:700;color:var(--tx3);
  display:flex;align-items:center;justify-content:center;gap:4px;
  transition:all var(--t) var(--spring)
}
.cap-seg-btn .cap-seg-dot{
  width:7px;height:7px;border-radius:50%;background:var(--tx4);
  transition:background var(--t)
}
.cap-seg-btn.active{box-shadow:var(--sh-xs)}
.cap-seg-btn[data-cap="off"].active{background:var(--cap-off-l);color:var(--cap-off)}
.cap-seg-btn[data-cap="off"].active .cap-seg-dot{background:var(--cap-off)}
.cap-seg-btn[data-cap="busy"].active{background:var(--cap-busy-l);color:var(--cap-busy)}
.cap-seg-btn[data-cap="busy"].active .cap-seg-dot{background:var(--cap-busy)}
.cap-seg-btn[data-cap="normal"].active{background:var(--cap-normal-l);color:var(--cap-normal)}
.cap-seg-btn[data-cap="normal"].active .cap-seg-dot{background:var(--cap-normal)}

.capacity-legend{display:flex;gap:14px;flex-wrap:wrap}
.cap-legend-item{display:flex;align-items:center;gap:5px;font-size:.72rem;color:var(--tx3);font-weight:600}
.cap-dot{width:8px;height:8px;border-radius:50%}
.cap-dot--off{background:var(--cap-off)}
.cap-dot--busy{background:var(--cap-busy)}
.cap-dot--normal{background:var(--cap-normal)}

/* Date exceptions [V14] */
.date-exception-add{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.form-input--sm{height:42px;font-size:.86rem}
.exception-cap-row{display:flex;gap:8px}
.exc-cap-btn{
  flex:1;padding:7px;border-radius:var(--r-md);
  font-size:.76rem;font-weight:700;color:var(--tx3);
  background:var(--srf2);border:1.5px solid var(--bdr);
  transition:all var(--t) var(--spring)
}
.exc-cap-btn.active{background:var(--p-l);color:var(--p);border-color:var(--p)}
.exc-cap-btn[data-cap="off"].active{background:var(--cap-off-l);color:var(--cap-off);border-color:var(--cap-off)}
.exc-cap-btn[data-cap="busy"].active{background:var(--cap-busy-l);color:var(--cap-busy);border-color:var(--cap-busy)}
.exc-cap-btn[data-cap="normal"].active{background:var(--cap-normal-l);color:var(--cap-normal);border-color:var(--cap-normal)}
.btn-add-exception{
  padding:10px;border-radius:var(--r-md);
  background:var(--p);color:#fff;font-weight:700;font-size:.86rem;
  box-shadow:var(--sh-p);transition:all var(--t) var(--spring)
}
.btn-add-exception:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(37,99,235,.38)}
.exception-list{display:flex;flex-direction:column;gap:6px}
.exception-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:var(--r-md);
  background:var(--srf2);border:1px solid var(--sep);
}
.exception-item__date{font-size:.82rem;font-weight:700;color:var(--tx1);flex:1}
.exception-item__cap{
  font-size:.72rem;font-weight:800;padding:3px 9px;border-radius:var(--r-f);
}
.exception-item__cap--off{background:var(--cap-off-l);color:var(--cap-off)}
.exception-item__cap--busy{background:var(--cap-busy-l);color:var(--cap-busy)}
.exception-item__cap--normal{background:var(--cap-normal-l);color:var(--cap-normal)}
.exception-item__del{
  width:28px;height:28px;border-radius:var(--r-sm);
  background:var(--red-l);color:var(--red-dark);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:.8rem;transition:all var(--t) var(--spring)
}
.exception-item__del:hover{background:var(--red);color:#fff}

/* Time blocks */
.time-blocks-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.time-block-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px 8px;border-radius:var(--r-lg);
  background:var(--srf2);border:1.5px solid var(--bdr);
  transition:all var(--t) var(--spring)
}
.time-block-btn.selected{
  background:var(--p-ultra);border-color:var(--p);
  box-shadow:0 2px 12px var(--p-glow);
}
.time-block-btn--solo{grid-column:1/-1}
.time-block-btn__icon{font-size:1.3rem}
.time-block-btn__label{font-size:.78rem;font-weight:700;color:var(--tx2)}
.time-block-btn__sub{font-size:.68rem;color:var(--tx4)}
.time-block-btn.selected .time-block-btn__label{color:var(--p)}

.routine-save-note{font-size:.78rem;color:var(--tx3);text-align:center;margin-top:4px}

/* ─── 15. SUBSCRIPTION TAB ─── */
.pricing-list{display:flex;flex-direction:column;gap:12px}
.pricing-card{
  background:var(--srf);border:1.5px solid var(--bdr);
  border-radius:var(--r-xl);padding:20px;
  box-shadow:var(--sh-sm);position:relative;overflow:hidden;
  transition:transform var(--t-fast) var(--spring),box-shadow var(--t)
}
.pricing-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.pricing-card--featured{
  border-color:var(--p);
  background:linear-gradient(135deg,rgba(37,99,235,.05) 0%,rgba(30,64,175,.05) 100%);
  box-shadow:0 0 0 1px var(--p),var(--sh-md),0 8px 32px rgba(37,99,235,.12);
}
.featured-badge{
  position:absolute;top:14px;left:14px;
  font-size:.68rem;font-weight:800;letter-spacing:.04em;
  background:linear-gradient(135deg,var(--p),#1e40af);
  color:#fff;padding:3px 9px;border-radius:var(--r-f);
}
.pricing-card__top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.pricing-card--featured .pricing-card__top{padding-top:26px}
.pricing-card__name{font-size:1rem;font-weight:800;color:var(--tx1)}
.pricing-card__price{text-align:left}
.price-amt{font-size:1.4rem;font-weight:900;color:var(--tx1)}
.price-meta{font-size:.74rem;color:var(--tx3);font-weight:600}
.price-old{font-size:.8rem;color:var(--tx4);text-decoration:line-through;margin-left:6px;font-weight:600}
.feat-list{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.feat{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600}
.feat::before{content:'';display:block;width:16px;height:16px;border-radius:50%;flex-shrink:0;font-size:.7rem;text-align:center;line-height:16px}
.feat--yes{color:var(--tx2)}
.feat--yes::before{background:var(--green-l);color:var(--green-dark);content:'✓';font-weight:900}
.feat--no{color:var(--tx4)}
.feat--no::before{background:var(--srf2);color:var(--tx4);content:'—'}
.pricing-btn{width:100%;padding:12px;border-radius:var(--r-lg);font-size:.86rem;font-weight:700;transition:all var(--t) var(--spring)}
.pricing-btn--primary{background:linear-gradient(135deg,var(--p),var(--p-h));color:#fff;box-shadow:var(--sh-p)}
.pricing-btn--primary:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(37,99,235,.40)}
.pricing-btn--ghost{border:1.5px solid var(--bdr);color:var(--tx3)}
.pricing-btn--ghost:hover{border-color:var(--p);color:var(--p)}

/* ─── 16. ACCOUNT TAB ─── */
.profile-card{
  background:var(--srf);border:1px solid var(--bdr);
  border-radius:var(--r-xl);padding:18px;
  display:flex;align-items:center;gap:14px;
  box-shadow:var(--sh-sm);margin-bottom:12px;
}
.profile-avatar{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--p),#1e40af);
  color:#fff;font-size:1.3rem;font-weight:900;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 4px 16px rgba(37,99,235,.28)
}
.profile-info{flex:1}
.profile-name{font-size:1rem;font-weight:800}
.profile-email{display:block;font-size:.78rem;color:var(--tx3);direction:ltr;text-align:right}
.profile-plan{
  display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.04em;
  background:var(--p-l);color:var(--p);
  padding:2px 8px;border-radius:var(--r-f);margin-top:3px;
}

/* ─── Plan Summary Card ─── */
.plan-summary-card{
  background:var(--srf);
  border:1px solid var(--bdr);
  border-radius:var(--r-xl);
  padding:18px 16px 14px;
  margin-bottom:16px;
  box-shadow:var(--sh-sm);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
[data-theme="dark"] .plan-summary-card{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.08);
}
.plan-summary-card__title{
  font-size:.82rem;font-weight:800;color:var(--tx3);
  text-transform:uppercase;letter-spacing:.06em;
  margin:0 0 12px;
}
.plan-summary-card__body{display:flex;flex-direction:column}
.summary-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:11px 0;
  border-bottom:1px solid var(--sep);
  gap:12px;
}
.summary-row:last-child{border-bottom:none;padding-bottom:0}
.summary-row__lbl{
  font-size:.8rem;
  font-weight:600;
  color:var(--tx3);
  flex-shrink:0;
}
.summary-row__val{
  font-size:.82rem;
  font-weight:700;
  color:var(--tx1);
  text-align:left;
  direction:rtl;
  word-break:break-word;
  max-width:62%;
}

/* ─── Settings Group ─── */
.settings-group{
  background:var(--srf);
  border:1px solid var(--bdr);
  border-radius:var(--r-xl);
  overflow:hidden;
  margin-bottom:14px;
  box-shadow:var(--sh-sm);
}
[data-theme="dark"] .settings-group{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.07);
}
.settings-group__title{
  font-size:.72rem;font-weight:800;color:var(--tx3);
  padding:10px 16px 9px;
  border-bottom:1px solid var(--sep);
  text-transform:uppercase;letter-spacing:.06em;
  background:var(--srf2);
}
.settings-list{display:flex;flex-direction:column}
.settings-item{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;
  border-bottom:1px solid var(--sep);
  transition:background var(--t);
  min-height:52px;
}
.settings-item:last-child{border-bottom:none}
.settings-item--btn{cursor:pointer;width:100%;text-align:inherit}
.settings-item--btn:active{background:var(--srf2)}
.settings-item--btn:hover{background:var(--srf2)}
.settings-item--link{position:relative}
.settings-item--danger:hover,.settings-item--danger:active{background:var(--red-l)}
.s-icon{width:32px;height:32px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.s-icon svg{width:16px;height:16px}
.s-icon--blue{background:var(--p-l);color:var(--p)}
.s-icon--red{background:var(--red-l);color:var(--red-dark)}
.s-icon--orange{background:rgba(249,115,22,.12);color:#ea580c}
.s-label{flex:1;font-size:.88rem;font-weight:600;color:var(--tx1)}
.s-ctrl{display:flex;align-items:center;gap:8px;color:var(--tx3);font-size:.8rem;font-weight:600}
.s-chevron{width:16px;height:16px;stroke:var(--tx4)}
.tog{display:flex;align-items:center}
.tog__track{
  width:46px;height:28px;border-radius:var(--r-f);
  background:var(--srf3);
  padding:3px;transition:background var(--t)
}
.tog--on .tog__track{background:var(--green)}
.tog__thumb{
  display:block;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:var(--sh-sm);
  transition:transform var(--t) var(--spring)
}
.tog--on .tog__thumb{transform:translateX(-18px)}
.tog__lbl{font-size:.78rem;color:var(--tx3);font-weight:600}
.app-version{font-size:.72rem;color:var(--tx4);text-align:center;margin-bottom:24px}

/* ─── 17. AUTH OVERLAY ─── */
.auth-overlay{
  position:fixed;inset:0;z-index:800;
  background:linear-gradient(160deg,#0f172a 0%,#1e3a8a 100%);
  display:flex;align-items:center;justify-content:center;
  padding:24px 20px;
  overflow-y:auto;
}
.auth-shell{width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:12px}
.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  direction: ltr; /* force LTR so Q always leads */
}
.auth-brand .logo-name{color:#fff;font-size:1.4rem}
.auth-tagline{font-size:.88rem;color:rgba(255,255,255,.65);font-weight:600;margin-bottom:8px}
.auth-card{
  width:100%;
  background:var(--srf-glass);
  backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:var(--blur-lg);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-2xl);
  padding:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.30),0 8px 24px rgba(0,0,0,.16);
  animation:authCardIn .4s var(--spring) both;
}
@keyframes authCardIn{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
.auth-tabs{display:flex;background:var(--srf2);border-radius:var(--r-f);padding:3px;gap:3px;margin-bottom:16px}
.auth-tab{
  flex:1;padding:8px;border-radius:var(--r-f);
  font-size:.84rem;font-weight:700;color:var(--tx3);
  transition:all var(--t) var(--spring)
}
.auth-tab.active{background:#fff;color:var(--tx1);box-shadow:var(--sh-sm)}
.auth-form{display:flex;flex-direction:column;gap:12px}
.form-label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:700;color:var(--tx2)}
.form-input{
  width:100%;height:46px;padding:0 14px;
  background:var(--srf2);border:1.5px solid var(--bdr);
  border-radius:var(--r-md);color:var(--tx1);font-size:.88rem;
  transition:border-color var(--t),box-shadow var(--t),background var(--t)
}
.form-input:focus{outline:none;border-color:var(--p);background:var(--srf);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.pw-wrap{position:relative}
.pw-wrap .form-input{padding-left:44px}
.pw-toggle{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  color:var(--tx4);
}
.pw-toggle svg{width:17px;height:17px}
.auth-error{
  background:var(--red-l);color:var(--red-dark);
  border-radius:var(--r-md);padding:9px 12px;font-size:.82rem;font-weight:600;
  animation:panelIn .2s ease
}
.auth-note{font-size:.74rem;color:var(--tx3);text-align:center;line-height:1.6}
.spam-highlight{color:var(--orange,#f97316);font-weight:800;letter-spacing:.01em}
.forgot-pw-btn{
  background:none;border:none;padding:0;
  font-family:inherit;font-size:.78rem;font-weight:600;
  color:var(--tx3);text-align:right;
  cursor:pointer;align-self:flex-end;
  text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:transparent;
  margin-bottom:2px;
  transition:color var(--t),text-decoration-color var(--t);
}
.forgot-pw-btn:hover{color:var(--p);text-decoration-color:var(--p)}
.otp-header{text-align:center;margin-bottom:16px}
.otp-header__icon{font-size:2rem;margin-bottom:6px}
.otp-header__title{font-size:1.05rem;font-weight:800;margin-bottom:4px}
.otp-header__sub{font-size:.82rem;color:var(--tx3)}
.otp-boxes{display:flex;gap:10px;justify-content:center;margin-bottom:12px}
.otp-input{
  width:52px;height:60px;text-align:center;
  font-size:1.4rem;font-weight:800;color:var(--tx1);
  background:var(--srf2);border:2px solid var(--bdr);
  border-radius:var(--r-lg);
  transition:all var(--t) var(--spring)
}
.otp-input.filled{background:var(--p-l);border-color:var(--p);color:var(--p)}
.otp-input:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.otp-hint{font-size:.8rem;color:var(--tx3);text-align:center;margin-bottom:8px;padding:8px;background:var(--amber-l);border-radius:var(--r-md)}
.auth-back-link{
  display:flex;align-items:center;gap:4px;justify-content:center;
  font-size:.82rem;color:var(--tx3);font-weight:600;margin-top:4px;
  transition:color var(--t)
}
.auth-back-link:hover{color:var(--p)}
.auth-back-link svg{width:14px;height:14px}

/* ── Google Auth Group ── */
.google-auth-group{
  display:flex;flex-direction:column;gap:0;
  margin-bottom:16px;
}

/* ── Google Sign-In Button (Apple-style) ── */
.google-btn{
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:50px;padding:0 18px;
  background:#ffffff;
  color:#3c4043;
  font-family:var(--font);
  font-size:.92rem;font-weight:700;
  border:1.5px solid #dadce0;
  border-radius:var(--r-md);
  box-shadow:0 1px 3px rgba(60,64,67,.18),0 1px 2px rgba(60,64,67,.10);
  cursor:pointer;
  transition:
    background var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease),
    transform var(--t-fast) var(--spring);
  -webkit-tap-highlight-color:transparent;
}
.google-btn:hover{
  background:#f8f9fa;
  box-shadow:0 2px 8px rgba(60,64,67,.22),0 1px 3px rgba(60,64,67,.12);
}
.google-btn:active{
  transform:scale(.97);
  background:#f1f3f4;
  box-shadow:0 1px 2px rgba(60,64,67,.14);
}
.google-btn__icon{
  flex-shrink:0;
  width:18px;height:18px;
}
.google-btn__text{
  flex:1;text-align:center;
  line-height:1;
}

/* Dark theme overrides */
[data-theme="dark"] .google-btn{
  background:#3c4043;
  color:#e8eaed;
  border-color:rgba(255,255,255,.14);
  box-shadow:0 1px 4px rgba(0,0,0,.40),0 1px 2px rgba(0,0,0,.28);
}
[data-theme="dark"] .google-btn:hover{
  background:#4a4e51;
  box-shadow:0 2px 10px rgba(0,0,0,.50),0 1px 4px rgba(0,0,0,.32);
}
[data-theme="dark"] .google-btn:active{
  background:#525659;
}

/* ── OR Separator ── */
.auth-or-separator{
  display:flex;align-items:center;gap:10px;
  margin:16px 0;
}
.auth-or-separator__line{
  flex:1;
  height:1px;
  background:var(--sep);
}
.auth-or-separator__label{
  font-size:.78rem;font-weight:600;
  color:var(--tx3);
  white-space:nowrap;
  padding:0 2px;
}

/* ─── 18. WIZARD ─── */
.wizard-overlay{
  position:fixed;inset:0;z-index:700;
  background:var(--bg);
  display:flex;flex-direction:column;
  overflow:hidden;
  padding-top:var(--safe-t);
}
.wizard-shell{
  display:flex;flex-direction:column;height:100%;
  max-width:500px;margin:0 auto;width:100%;
}
.wizard-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 10px;
}
.wiz-back-btn{
  width:36px;height:36px;border-radius:var(--r-md);
  background:var(--srf2);border:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t) var(--spring)
}
.wiz-back-btn svg{width:18px;height:18px;stroke:var(--tx3)}
.wiz-back-btn:disabled{opacity:.3;pointer-events:none}
.wizard-step-dots{display:flex;align-items:center;gap:5px}
.wiz-dot{
  height:6px;border-radius:var(--r-f);background:var(--srf3);
  transition:all .3s var(--spring);width:6px;
}
.wiz-dot.active{background:var(--p);width:18px}
.wiz-dot.done{background:var(--green);width:6px}
.wiz-skip-btn{font-size:.82rem;font-weight:600;color:var(--tx3);padding:8px 12px;border-radius:var(--r-f);transition:color var(--t)}
.wiz-skip-btn:hover{color:var(--p)}
.wiz-prog-track{height:3px;background:var(--srf3);overflow:hidden}
.wiz-prog-fill{height:100%;background:linear-gradient(90deg,var(--p),#1e40af);transition:width .4s var(--ease)}

.wizard-steps{flex:1;overflow:hidden;position:relative}
.wiz-step{
  display:none;flex-direction:column;
  height:100%;overflow-y:auto;padding:24px 20px 20px;
  -webkit-overflow-scrolling:touch;
}
.wiz-step.active{display:flex;animation:wizStepIn .3s var(--spring) both}
@keyframes wizStepIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}
.wiz-step__icon{font-size:2.4rem;margin-bottom:10px}
.wiz-step__title{font-size:1.2rem;font-weight:800;color:var(--tx1);margin-bottom:6px}
.wiz-step__sub{font-size:.84rem;color:var(--tx3);margin-bottom:20px}

/* Wiz name & gender (Step 1) */
.wiz-name-field{margin-bottom:18px}
.wiz-gender-label{font-size:.84rem;font-weight:700;color:var(--tx2);margin-bottom:10px}
.gender-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gender-btn{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px;border-radius:var(--r-xl);
  background:var(--srf2);border:2px solid var(--bdr);
  transition:all var(--t) var(--spring)
}
.gender-btn.selected{background:var(--p-ultra);border-color:var(--p);box-shadow:0 2px 12px var(--p-glow)}
.gender-btn__icon{font-size:1.8rem}
.gender-btn__label{font-size:.84rem;font-weight:700;color:var(--tx2)}
.gender-btn.selected .gender-btn__label{color:var(--p)}

/* Wizard option grid */
.option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:16px}
.option-grid--level{grid-template-columns:1fr 1fr 1fr}
.option-grid--progress{grid-template-columns:1fr 1fr}
.opt-card{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 10px;border-radius:var(--r-xl);
  background:var(--srf2);border:2px solid var(--bdr);
  transition:all var(--t) var(--spring);
  text-align:center;
}
.opt-card:hover{transform:translateY(-2px);box-shadow:var(--sh-sm)}
.opt-card.selected{background:var(--p-ultra);border-color:var(--p);box-shadow:0 4px 18px var(--p-glow)}
.opt-card__icon{font-size:1.6rem}
.opt-card__label{font-size:.8rem;font-weight:700;color:var(--tx2)}
.opt-card__hint{font-size:.68rem;color:var(--tx4)}
.opt-card.selected .opt-card__label{color:var(--p)}

/* Sub options */
.sub-options{
  background:var(--p-ultra);border:1px solid var(--p-l);
  border-radius:var(--r-xl);padding:14px;margin-bottom:12px;
  animation:panelIn .22s var(--ease)
}
.sub-options__hint{font-size:.76rem;color:var(--tx3);margin-bottom:10px}
.sub-option-row{display:flex;gap:8px}
.sub-opt-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px;border-radius:var(--r-lg);
  background:var(--srf);border:1.5px solid var(--bdr);
  transition:all var(--t) var(--spring)
}
.sub-opt-btn.selected{background:var(--p-l);border-color:var(--p);box-shadow:0 2px 10px var(--p-glow)}
.sub-opt-btn__name{font-size:.78rem;font-weight:700}
.sub-opt-btn__count{font-size:.72rem;color:var(--tx3)}
.sub-opt-btn.selected .sub-opt-btn__name{color:var(--p)}

/* Verbal note */
.verbal-note{
  display:flex;align-items:center;gap:12px;
  background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.20);
  border-radius:var(--r-lg);padding:12px;margin-bottom:16px;
}
.verbal-note__icon{font-size:1.2rem}
.verbal-note__title{display:block;font-size:.82rem;font-weight:700;color:var(--purple)}
.verbal-note__sub{display:block;font-size:.72rem;color:var(--tx3)}

/* Date mode toggle */
.date-mode-toggle{
  display:flex;background:var(--srf2);border-radius:var(--r-f);
  padding:3px;gap:3px;margin-bottom:12px;
}
.date-mode-btn{
  flex:1;padding:8px;border-radius:var(--r-f);
  font-size:.84rem;font-weight:700;color:var(--tx3);
  transition:all var(--t) var(--spring)
}
.date-mode-btn.active{background:var(--srf);color:var(--tx1);box-shadow:var(--sh-sm)}

/* Tahsili warning */
.tahsili-warning{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--amber-l);border-radius:var(--r-md);padding:10px 12px;margin-top:10px;
  font-size:.78rem;color:var(--amber-dark);
}

/* Suggest info */
.suggest-info{
  display:flex;align-items:center;gap:12px;
  background:var(--srf2);border-radius:var(--r-lg);padding:14px;
  border:1px solid var(--bdr);
}
.suggest-info__icon{font-size:1.5rem}
.suggest-info__text{font-size:.84rem;color:var(--tx2);font-weight:600}

/* Progress inputs */
.progress-inputs{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.progress-input-row{display:flex;flex-direction:column;gap:6px}
.progress-input-row label{font-size:.78rem;font-weight:600;color:var(--tx2)}
.progress-input-row input{height:42px;padding:0 12px}
.wiz-num-input{
  width:100%;height:46px;
  padding:0 14px;
  border-radius:var(--r-lg);
  border:2px solid var(--bdr);
  background:var(--srf);
  color:var(--tx1);
  font-size:.95rem;
  font-weight:700;
  font-family:inherit;
  transition:border-color var(--t), box-shadow var(--t);
  direction:ltr;
  text-align:right;
}
.wiz-num-input:focus{
  outline:none;
  border-color:var(--p);
  box-shadow:0 0 0 3px var(--p-l);
}
/* Wizard footer */
.wizard-footer{padding:16px 20px calc(var(--safe-b) + 16px);border-top:1px solid var(--sep)}
.wiz-next-btn{
  width:100%;padding:15px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--p),var(--p-h));
  color:#fff;font-size:.96rem;font-weight:800;
  box-shadow:var(--sh-p);
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all var(--t) var(--spring)
}
.wiz-next-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 28px rgba(37,99,235,.40)}
.wiz-next-btn:disabled{background:var(--srf3);color:var(--tx4);box-shadow:none}
.wiz-next-btn svg{width:18px;height:18px}

/* Repeated banks */
.repeated-banks{
  background:var(--srf);border-radius:var(--r-md);padding:10px 12px;
  margin-top:8px;border:1px solid var(--bdr)
}
.repeated-banks__label{font-size:.74rem;font-weight:700;color:var(--tx3);margin-bottom:4px}
.repeated-banks__list{font-size:.72rem;color:var(--tx2);direction:ltr;text-align:left}

/* ─── 19. COACH MODAL ─── */
.coach-overlay {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0, 0, 0, .38);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: var(--safe-b);
}
.coach-sheet {
  width: 100%; max-width: 500px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  overflow: hidden; position: relative;
  box-shadow:
    0 -4px 40px rgba(37, 99, 235, .08),
    0 -1px 0 rgba(255, 255, 255, .9),
    0 20px 60px rgba(0, 0, 0, .10);
}
[data-theme="dark"] .coach-sheet {
  background: rgba(30, 30, 36, .95);
  border-color: rgba(255, 255, 255, .10);
  box-shadow: 0 -4px 40px rgba(0, 0, 0, .40), 0 20px 60px rgba(0, 0, 0, .50);
}

/* Orbs: very subtle pastel blurs — no harsh colors */
.coach-orb {
  position: absolute; border-radius: 50%;
  pointer-events: none; filter: blur(52px); opacity: .18;
}
.coach-orb--1 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, #93c5fd 0%, #bfdbfe 100%); /* pastel blue */
  top: -60px; right: -50px;
  animation: orbFloat 8s ease-in-out infinite;
}
.coach-orb--2 {
  width: 160px; height: 160px;
  background: radial-gradient(circle, #6ee7b7 0%, #a7f3d0 100%); /* pastel green */
  bottom: 30px; left: -40px;
  animation: orbFloat 10s ease-in-out infinite reverse;
}
[data-theme="dark"] .coach-orb--1 { opacity: .12; }
[data-theme="dark"] .coach-orb--2 { opacity: .10; }

.coach-sheet__content {
  position: relative; z-index: 1;
  padding: 28px 24px calc(var(--safe-b) + 18px);
}
.coach-emoji {
  font-size: 3.2rem; text-align: center; margin-bottom: 10px;
  animation: bounceIn .5s var(--spring) both .1s;
}
.coach-title {
  font-size: 1.15rem; font-weight: 900; text-align: center;
  color: var(--tx1); margin-bottom: 16px; letter-spacing: -.02em;
}
.coach-body {
  display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px;
}
.coach-body p {
  font-size: .85rem; color: var(--tx2); line-height: 1.7;
}
.coach-body__highlight {
  background: linear-gradient(135deg,
    rgba(37, 99, 235, .06) 0%,
    rgba(16, 185, 129, .06) 100%);
  border: 1px solid rgba(37, 99, 235, .12);
  border-radius: var(--r-lg); padding: 11px 14px;
  color: var(--tx1); font-size: .84rem;
}
[data-theme="dark"] .coach-body__highlight {
  background: linear-gradient(135deg,
    rgba(79, 142, 247, .10) 0%,
    rgba(16, 185, 129, .10) 100%);
  border-color: rgba(79, 142, 247, .18);
}
.coach-stats {
  display: flex; gap: 8px; margin-bottom: 18px;
}
.coach-stat {
  flex: 1;
  background: rgba(37, 99, 235, .05);
  border: 1px solid rgba(37, 99, 235, .10);
  border-radius: var(--r-lg); padding: 11px 8px; text-align: center;
  transition: transform var(--t-fast) var(--spring);
}
.coach-stat:hover { transform: translateY(-1px); }
[data-theme="dark"] .coach-stat {
  background: rgba(79, 142, 247, .08);
  border-color: rgba(79, 142, 247, .15);
}
.coach-stat__val {
  font-size: .98rem; font-weight: 900;
  color: var(--p); margin-bottom: 3px;
}
.coach-stat__lbl {
  font-size: .67rem; color: var(--tx3); font-weight: 600;
}
.coach-cta-btn {
  width: 100%; padding: 15px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--p) 0%, #4f46e5 100%);
  color: #fff; font-size: .96rem; font-weight: 800;
  box-shadow: 0 4px 20px rgba(37, 99, 235, .28), 0 1px 4px rgba(37, 99, 235, .18);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all var(--t) var(--spring);
}
.coach-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(37, 99, 235, .36), 0 2px 8px rgba(37, 99, 235, .20);
}
.coach-cta-btn svg { width: 18px; height: 18px; }
/* ─── 20. RESCHEDULE MODAL ─── */
.reschedule-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.50);
  backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:var(--safe-b);
}
.reschedule-sheet{
  width:100%;max-width:500px;max-height:85vh;
  background:var(--srf);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow:0 -8px 40px rgba(0,0,0,.14);
  display:flex;flex-direction:column;
  transform:translateY(0);
  transition:transform .34s var(--ease-o)
}
.reschedule-sheet--dismissing{transform:translateY(110%)}
.reschedule-sheet__handle{
  width:36px;height:4px;border-radius:var(--r-f);
  background:var(--srf3);margin:12px auto 0;flex-shrink:0;
}
.reschedule-sheet__header{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--sep);flex-shrink:0;
}
.reschedule-sheet__title{font-size:.96rem;font-weight:800}
.reschedule-sheet__sub{font-size:.78rem;color:var(--tx3);margin-top:2px}
.reschedule-close-btn{
  width:30px;height:30px;border-radius:var(--r-sm);
  background:var(--srf2);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.reschedule-close-btn svg{width:16px;height:16px;stroke:var(--tx3)}
.reschedule-tasks-wrap{flex:1;overflow-y:auto;padding:14px 16px}
.reschedule-date-group{margin-bottom:12px}
.reschedule-date-label{font-size:.78rem;font-weight:800;color:var(--tx3);letter-spacing:.03em;margin-bottom:8px}
.reschedule-task-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--r-lg);
  background:var(--srf2);border:1.5px solid var(--bdr);
  margin-bottom:6px;cursor:pointer;
  transition:all var(--t) var(--spring)
}
.reschedule-task-row.selected{background:var(--amber-l);border-color:var(--amber);box-shadow:0 2px 10px rgba(245,158,11,.18)}
.reschedule-cb{
  width:22px;height:22px;border-radius:var(--r-sm);
  border:2px solid var(--bdr);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:all var(--t) var(--spring)
}
.reschedule-task-row.selected .reschedule-cb{background:var(--amber);border-color:var(--amber)}
.reschedule-cb svg{width:11px;height:11px;stroke:transparent;transition:stroke var(--t)}
.reschedule-task-row.selected .reschedule-cb svg{stroke:#fff}
.reschedule-task-title{font-size:.8rem;font-weight:600;color:var(--tx2);display:block}
.reschedule-task-tag{font-size:.64rem;font-weight:800;padding:2px 7px;border-radius:var(--r-f)}
.rtag--found{background:var(--p-l);color:var(--p)}
.rtag--verbal{background:var(--purple-l);color:var(--purple)}
.rtag--train{background:var(--green-l);color:var(--green-dark)}
.reschedule-empty{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:32px;color:var(--tx4);font-size:.88rem;text-align:center
}
.reschedule-empty span{font-size:2rem}
.reschedule-sheet__footer{
  padding:12px 16px calc(var(--safe-b) + 12px);
  border-top:1px solid var(--sep);flex-shrink:0;
  display:flex;flex-direction:column;gap:8px;
}
.reschedule-select-hint{font-size:.78rem;font-weight:600;color:var(--tx4);text-align:center}
.reschedule-select-hint.has-selection{color:var(--amber)}
.reschedule-confirm-btn{
  width:100%;padding:14px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--amber),#ea580c);
  color:#fff;font-size:.9rem;font-weight:800;
  box-shadow:var(--sh-amber);
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all var(--t) var(--spring)
}
.reschedule-confirm-btn:disabled{background:var(--srf3);color:var(--tx4);box-shadow:none}
.reschedule-confirm-btn svg{width:16px;height:16px}
.reschedule-confirm-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 22px rgba(245,158,11,.38)}
/* ─── BONUS TASK MODAL [V14-patch2] ─── */
.bonus-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0, 0, 0, .48);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: var(--safe-b);
}

.bonus-sheet {
  width: 100%; max-width: 500px;
  background: var(--srf);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .13);
  display: flex; flex-direction: column;
  max-height: 88vh; overflow: hidden;
  transform: translateY(0);
  transition: transform .34s cubic-bezier(0, 0, .2, 1);
}
.bonus-sheet--dismissing { transform: translateY(110%); }

.bonus-sheet__handle {
  width: 36px; height: 4px; border-radius: var(--r-f);
  background: var(--srf3); margin: 12px auto 0; flex-shrink: 0;
}

.bonus-sheet__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px 18px 12px; border-bottom: 1px solid var(--sep); flex-shrink: 0;
}
.bonus-sheet__title  { font-size: .98rem; font-weight: 800; color: var(--tx1); }
.bonus-sheet__sub    { font-size: .78rem; color: var(--tx3); margin-top: 2px; }

.bonus-close-btn {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: var(--srf2); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t);
}
.bonus-close-btn:hover { background: var(--red-l); }
.bonus-close-btn svg { width: 15px; height: 15px; stroke: var(--tx3); }
.bonus-close-btn:hover svg { stroke: var(--red-dark); }

.bonus-sheet__body {
  flex: 1; overflow-y: auto; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 20px;
  -webkit-overflow-scrolling: touch;
}

.bonus-section__label {
  display: block; font-size: .84rem; font-weight: 700;
  color: var(--tx2); margin-bottom: 10px;
}

/* Type selection cards */
.bonus-type-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.bonus-type-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 13px 8px; border-radius: var(--r-xl);
  background: var(--srf2); border: 2px solid var(--bdr);
  transition: all var(--t) var(--spring); cursor: pointer;
}
.bonus-type-card:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); }
.bonus-type-card.selected {
  background: var(--p-ultra);
  border-color: var(--p);
  box-shadow: 0 3px 14px var(--p-glow);
}
.bonus-type-card__icon  { font-size: 1.5rem; }
.bonus-type-card__label {
  font-size: .74rem; font-weight: 700; color: var(--tx2); text-align: center;
}
.bonus-type-card.selected .bonus-type-card__label { color: var(--p); }

/* Amount stepper */
.bonus-amount-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.bonus-stepper-btn {
  width: 42px; height: 42px; border-radius: var(--r-md); flex-shrink: 0;
  background: var(--srf2); border: 1.5px solid var(--bdr);
  font-size: 1.3rem; font-weight: 700; color: var(--tx2);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t) var(--spring);
}
.bonus-stepper-btn:hover {
  background: var(--p-l); border-color: var(--p); color: var(--p);
}
.bonus-stepper-btn:active { transform: scale(.92); }

.bonus-amount-input {
  flex: 1; height: 46px; text-align: center;
  font-size: 1.2rem; font-weight: 800; color: var(--tx1);
}
.bonus-amount-hint {
  font-size: .74rem; color: var(--tx3); font-weight: 500;
}

/* Footer */
.bonus-sheet__footer {
  padding: 12px 18px calc(var(--safe-b) + 14px);
  border-top: 1px solid var(--sep); flex-shrink: 0;
  display: flex; flex-direction: column; gap: 9px;
}

.bonus-confirm-btn {
  width: 100%; padding: 14px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff; font-size: .92rem; font-weight: 800;
  box-shadow: 0 4px 18px rgba(16, 185, 129, .30);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all var(--t) var(--spring);
}
.bonus-confirm-btn:disabled {
  background: var(--srf3); color: var(--tx4); box-shadow: none;
}
.bonus-confirm-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(16, 185, 129, .38);
}
.bonus-confirm-btn svg { width: 17px; height: 17px; }

.bonus-undo-btn {
  width: 100%; padding: 12px;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--bdr);
  background: var(--srf2);
  color: var(--tx3); font-size: .84rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all var(--t) var(--spring);
}
.bonus-undo-btn:hover {
  border-color: var(--amber); color: var(--amber-dark);
  background: var(--amber-l);
}
.bonus-undo-btn svg { width: 15px; height: 15px; }
/* ─── 21. POMODORO MODAL ─── */
.pomo-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.52);
  backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:var(--safe-b);
}
.pomo-sheet{
  width:100%;max-width:500px;
  background:var(--pomo-bg);
  backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:var(--blur-lg);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  padding-bottom:calc(var(--safe-b) + 14px);
  box-shadow:0 -8px 40px rgba(0,0,0,.16);
  transition:transform .34s var(--ease-o)
}
.pomo-sheet--dismissing{transform:translateY(110%)}
.pomo-sheet__handle{width:36px;height:4px;border-radius:var(--r-f);background:var(--srf3);margin:12px auto 0}
.pomo-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
}
.pomo-header__label{font-size:.96rem;font-weight:800}
.pomo-close-btn{
  width:30px;height:30px;border-radius:var(--r-sm);
  background:var(--srf2);display:flex;align-items:center;justify-content:center;
}
.pomo-close-btn svg{width:16px;height:16px;stroke:var(--tx3)}
.pomo-type-row{display:flex;gap:8px;padding:0 16px 14px}
.pomo-type-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px;border-radius:var(--r-lg);
  background:var(--srf2);border:1.5px solid var(--bdr);
  transition:all var(--t) var(--spring)
}
.pomo-type-btn.active.focus-mode{border-color:var(--pomo-focus);background:rgba(239,68,68,.08)}
.pomo-type-btn.active.short-mode{border-color:var(--pomo-short);background:rgba(16,185,129,.08)}
.pomo-type-btn.active.long-mode{border-color:var(--pomo-long);background:rgba(59,130,246,.08)}
.pomo-type-btn__min{font-size:.96rem;font-weight:900}
.pomo-type-btn__lbl{font-size:.64rem;color:var(--tx3);font-weight:600}

.pomo-timer-wrap{
  position:relative;width:220px;height:220px;margin:0 auto 10px;
}
.pomo-ring{width:220px;height:220px}
.pomo-ring__track{fill:none;stroke:var(--pomo-track);stroke-width:10}
.pomo-ring__progress{
  fill:none;stroke:var(--pomo-focus);stroke-width:10;stroke-linecap:round;
  transform-origin:center;transform:rotate(-90deg);
  transition:stroke-dashoffset .5s var(--ease),stroke .3s var(--ease)
}
[data-mode="short"] .pomo-ring__progress{stroke:var(--pomo-short)}
[data-mode="long"] .pomo-ring__progress{stroke:var(--pomo-long)}
.pomo-timer-inner{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.pomo-time{font-size:2.4rem;font-weight:900;color:var(--tx1);font-variant-numeric:tabular-nums}
.pomo-session-label{font-size:.8rem;color:var(--tx3);font-weight:700;margin-top:2px}
.pomo-pips{display:flex;gap:8px;justify-content:center;margin-bottom:14px}
.pomo-pip{
  width:10px;height:10px;border-radius:50%;
  background:var(--srf3);border:1.5px solid var(--bdr);
  transition:all var(--t) var(--spring)
}
.pomo-pip.completed{background:var(--pomo-focus);border-color:var(--pomo-focus);transform:scale(1.2)}
.pomo-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:12px}
.pomo-ctrl-btn{
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:all var(--t) var(--spring)
}
.pomo-ctrl-btn--primary{
  width:64px;height:64px;
  background:linear-gradient(135deg,var(--pomo-focus),#dc2626);
  color:#fff;box-shadow:0 4px 20px rgba(239,68,68,.34)
}
[data-mode="short"] .pomo-ctrl-btn--primary{background:linear-gradient(135deg,var(--pomo-short),#059669)}
[data-mode="long"] .pomo-ctrl-btn--primary{background:linear-gradient(135deg,var(--pomo-long),#1d4ed8)}
.pomo-ctrl-btn--primary svg{width:26px;height:26px}
.pomo-ctrl-btn--secondary{
  width:48px;height:48px;
  background:var(--srf2);border:1.5px solid var(--bdr);color:var(--tx3)
}
.pomo-ctrl-btn--secondary svg{width:18px;height:18px}
.pomo-ctrl-btn:hover{transform:scale(1.07)}
.pomo-ctrl-btn:active{transform:scale(.94)}
.pomo-tip{font-size:.74rem;color:var(--tx3);text-align:center;padding:0 20px}

/* ─── 22. TOUR ─── */
#tourOverlay{
  position:fixed;inset:0;z-index:900;
  background:rgba(0,0,0,.70);
  pointer-events:auto;
}
#tourSpotlight{
  position:fixed;z-index:901;
  border-radius:var(--r-xl);
  box-shadow:0 0 0 9999px transparent;
  pointer-events:none;
  transition:top .35s var(--spring),left .35s var(--spring),width .35s var(--spring),height .35s var(--spring),opacity .22s var(--ease);
  outline:2.5px solid rgba(255,255,255,.70);
  outline-offset:2px;
}
#tourCard{
  position:fixed;z-index:902;
  background:var(--srf-glass);
  backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:var(--blur-lg);
  border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r-2xl);
  padding:18px;
  width:calc(100vw - 40px);max-width:340px;
  box-shadow:0 16px 56px rgba(0,0,0,.28),0 4px 16px rgba(0,0,0,.16);
  opacity:0;pointer-events:none;
  transition:opacity .22s var(--ease);
}
.tour-card__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.tour-card__step{font-size:.72rem;font-weight:800;color:var(--p);background:var(--p-l);padding:3px 9px;border-radius:var(--r-f)}
.tour-card__skip{font-size:.78rem;color:var(--tx3);font-weight:600;padding:4px 8px;transition:color var(--t)}
.tour-card__skip:hover{color:var(--red-dark)}
.tour-card__title{font-size:.96rem;font-weight:800;margin-bottom:6px}
.tour-card__text{font-size:.82rem;color:var(--tx2);line-height:1.6;margin-bottom:12px}
.tour-card__footer{display:flex;align-items:center;justify-content:space-between}
.tour-dots{display:flex;gap:5px}
.tour-dot{width:6px;height:6px;border-radius:50%;background:var(--srf3);transition:all .2s var(--spring)}
.tour-dot.active{background:var(--p);width:16px;border-radius:var(--r-f)}
.tour-card__next{
  padding:9px 18px;border-radius:var(--r-f);
  background:linear-gradient(135deg,var(--p),var(--p-h));
  color:#fff;font-size:.84rem;font-weight:800;
  box-shadow:0 3px 14px rgba(37,99,235,.32);
  transition:all var(--t) var(--spring)
}
.tour-card__next:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(37,99,235,.40)}

/* ─── 23. PAYWALL MODAL [V14] ─── */
.paywall-overlay{
  position:fixed;inset:0;z-index:800;
  background:rgba(0,0,0,.60);
  backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:var(--safe-b);
}
.paywall-sheet{
  width:100%;max-width:500px;max-height:92vh;
  background:var(--srf);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  overflow-y:auto;
  box-shadow:0 -12px 56px rgba(0,0,0,.22);
  transform:translateY(0);
  transition:transform .38s var(--spring);
  position:relative;
}
.paywall-sheet__handle{width:36px;height:4px;border-radius:var(--r-f);background:var(--srf3);margin:12px auto 0;flex-shrink:0}
.paywall-close-btn{
  position:absolute;top:16px;left:16px;z-index:2;
  width:32px;height:32px;border-radius:50%;
  background:var(--srf2);border:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t) var(--spring)
}
.paywall-close-btn svg{width:14px;height:14px;stroke:var(--tx3)}
.paywall-close-btn:hover{background:var(--red-l);border-color:var(--red)}
.paywall-close-btn:hover svg{stroke:var(--red-dark)}

.paywall-hero{
  padding:28px 22px 20px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(37,99,235,.08) 0%,rgba(30,64,175,.10) 100%);
}
.paywall-hero__orb{
  position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(36px);opacity:.28;
}
.paywall-hero__orb--1{width:140px;height:140px;background:var(--p);top:-30px;right:-30px;animation:orbFloat 7s ease-in-out infinite}
.paywall-hero__orb--2{width:100px;height:100px;background:#1e40af;bottom:0;left:-20px;animation:orbFloat 9s ease-in-out infinite reverse}
.paywall-hero__badge{
  display:inline-block;font-size:.7rem;font-weight:900;letter-spacing:.1em;
  background:linear-gradient(135deg,#f59e0b,#f97316);
  color:#fff;padding:4px 12px;border-radius:var(--r-f);margin-bottom:10px;
  box-shadow:0 3px 14px rgba(245,158,11,.30);
  position:relative;z-index:1;
}
.paywall-hero__title{font-size:1.2rem;font-weight:900;margin-bottom:6px;position:relative;z-index:1}
.paywall-hero__sub{font-size:.82rem;color:var(--tx3);position:relative;z-index:1;line-height:1.6}

.paywall-features{
  display:flex;flex-direction:column;gap:10px;
  padding:14px 20px;border-bottom:1px solid var(--sep);
}
.paywall-feat{display:flex;align-items:center;gap:12px}
.paywall-feat__icon{font-size:1.4rem;flex-shrink:0}
.paywall-feat__title{font-size:.86rem;font-weight:700}
.paywall-feat__sub{font-size:.74rem;color:var(--tx3)}

.paywall-plans{
  padding:16px 20px;display:flex;flex-direction:column;gap:8px;
}
.paywall-plan{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-radius:var(--r-xl);
  background:var(--srf2);border:2px solid var(--bdr);
  cursor:pointer;position:relative;
  transition:all var(--t) var(--spring)
}
.paywall-plan:hover{border-color:var(--p);background:var(--p-ultra)}
.paywall-plan.selected{border-color:var(--p);background:var(--p-ultra);box-shadow:0 3px 16px var(--p-glow)}
.paywall-plan--popular{
  border-color:var(--amber);background:rgba(245,158,11,.06);
  box-shadow:0 3px 16px rgba(245,158,11,.18);
}
.paywall-plan--popular.selected{border-color:var(--p);background:var(--p-ultra);box-shadow:0 4px 20px var(--p-glow)}
.paywall-plan__badge{
  position:absolute;top:-10px;right:12px;
  font-size:.64rem;font-weight:900;letter-spacing:.04em;
  background:linear-gradient(135deg,var(--amber),#ea580c);
  color:#fff;padding:3px 9px;border-radius:var(--r-f);
  box-shadow:0 2px 10px rgba(245,158,11,.28);
}
.paywall-plan__name{font-size:.88rem;font-weight:800;color:var(--tx1)}
.paywall-plan__dur{font-size:.72rem;color:var(--tx3);font-weight:600;margin-top:2px}
.paywall-plan__price{font-size:1rem;font-weight:900;color:var(--p);white-space:nowrap}
.paywall-plan__price span{font-size:.72rem;font-weight:600;color:var(--tx3)}
.paywall-plan.selected .paywall-plan__price{color:var(--p)}

.paywall-footer{
  padding:14px 20px calc(var(--safe-b) + 16px);
  display:flex;flex-direction:column;gap:10px;
  border-top:1px solid var(--sep);
}
.paywall-cta-btn{
  width:100%;padding:15px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--p),#1e40af);
  color:#fff;font-size:.96rem;font-weight:900;
  box-shadow:0 6px 28px rgba(37,99,235,.38);
  transition:all var(--t) var(--spring)
}
.paywall-cta-btn:hover{transform:translateY(-1px);box-shadow:0 8px 32px rgba(37,99,235,.46)}
.paywall-guarantee{font-size:.72rem;color:var(--tx4);text-align:center}

/* ─── 24. STREAK MODALS [V14] ─── */
.streak-overlay{
  position:fixed;inset:0;z-index:700;
  background:rgba(0,0,0,.55);
  backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:var(--safe-b);
}
.streak-modal{
  width:100%;max-width:500px;
  background:var(--srf);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  overflow:hidden;
  box-shadow:0 -8px 40px rgba(0,0,0,.18);
  animation:sheetUp .36s var(--spring) both;
}
@keyframes sheetUp{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
.streak-modal__handle{width:36px;height:4px;border-radius:var(--r-f);background:var(--srf3);margin:12px auto 0}
.streak-modal__hero{
  padding:24px 20px 16px;text-align:center;
  background:linear-gradient(160deg,rgba(249,115,22,.10) 0%,rgba(234,88,12,.06) 100%);
  border-bottom:1px solid var(--sep);
}
.streak-fire-anim{font-size:3.5rem;margin-bottom:6px;animation:fireFlicker 1.5s ease-in-out infinite}
.streak-modal__count{font-size:3rem;font-weight:900;color:#ea580c;line-height:1}
.streak-modal__label{font-size:.84rem;font-weight:600;color:var(--tx3)}

.streak-modal__actions{
  display:flex;flex-direction:column;gap:8px;
  padding:14px 18px;border-bottom:1px solid var(--sep);
}
.streak-action-btn{
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;border-radius:var(--r-xl);
  background:var(--srf2);border:1.5px solid var(--bdr);
  text-align:inherit;width:100%;
  transition:all var(--t) var(--spring);
  position:relative;
}
.streak-action-btn:hover{transform:translateY(-1px);box-shadow:var(--sh-sm)}
.streak-action-btn--freeze{border-color:rgba(59,130,246,.30);background:rgba(59,130,246,.06)}
.streak-action-btn--restore{border-color:rgba(139,92,246,.30);background:rgba(139,92,246,.06)}
.streak-action-btn__icon{font-size:1.5rem;flex-shrink:0}
.streak-action-btn__body{flex:1}
.streak-action-btn__title{font-size:.86rem;font-weight:800}
.streak-action-btn__sub{font-size:.74rem;color:var(--tx3);margin-top:1px}
.streak-action-btn__badge{
  font-size:.7rem;font-weight:800;padding:3px 9px;border-radius:var(--r-f);
}
.streak-action-btn__pro-badge{
  font-size:.66rem;font-weight:900;letter-spacing:.05em;
  background:linear-gradient(135deg,#f59e0b,#f97316);
  color:#fff;padding:3px 8px;border-radius:var(--r-f);flex-shrink:0;
}
.streak-calendar{
  padding:14px 18px;
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
}
.streak-cal-day{
  aspect-ratio:1;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:.68rem;font-weight:700;background:var(--srf2);color:var(--tx4);
  transition:all var(--t) var(--spring)
}
.streak-cal-day--done{background:rgba(249,115,22,.16);color:#ea580c;box-shadow:0 1px 6px rgba(249,115,22,.18)}
.streak-cal-day--frozen{background:rgba(59,130,246,.14);color:#2563eb}
.streak-cal-day--missed{background:rgba(239,68,68,.10);color:var(--red)}
.streak-modal__close{
  width:calc(100% - 36px);margin:0 18px 16px;
  padding:13px;border-radius:var(--r-lg);
  background:var(--srf2);border:1.5px solid var(--bdr);
  font-size:.88rem;font-weight:700;color:var(--tx2);
  transition:all var(--t) var(--spring)
}
.streak-modal__close:hover{background:var(--srf3)}

/* Restore Streak Modal */
.restore-overlay{
  position:fixed;inset:0;z-index:750;
  background:rgba(0,0,0,.60);
  backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);
  display:flex;align-items:center;justify-content:center;
  padding:24px 20px;
}
.restore-sheet{
  width:100%;max-width:380px;
  background:var(--srf);
  border-radius:var(--r-2xl);
  padding:24px 20px;
  box-shadow:0 24px 60px rgba(0,0,0,.24);
  text-align:center;
  animation:authCardIn .36s var(--spring) both;
}
.restore-sheet__handle{width:36px;height:4px;border-radius:var(--r-f);background:var(--srf3);margin:0 auto 16px}
.restore-icon{font-size:2.5rem;margin-bottom:8px}
.restore-title{font-size:1.1rem;font-weight:900;margin-bottom:6px}
.restore-sub{font-size:.84rem;color:var(--tx3);line-height:1.6;margin-bottom:16px}
.restore-options{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.restore-opt{
  display:flex;align-items:center;gap:12px;text-align:right;
  padding:13px 14px;border-radius:var(--r-xl);
  background:var(--srf2);border:1.5px solid var(--bdr);
  width:100%;
  transition:all var(--t) var(--spring)
}
.restore-opt:hover{transform:translateY(-1px);box-shadow:var(--sh-sm)}
.restore-opt--free{border-color:rgba(16,185,129,.30);background:rgba(16,185,129,.06)}
.restore-opt--pro{border-color:rgba(245,158,11,.30);background:rgba(245,158,11,.06)}
.restore-opt__icon{font-size:1.4rem;flex-shrink:0}
.restore-opt__title{font-size:.86rem;font-weight:800}
.restore-opt__sub{font-size:.72rem;color:var(--tx3);margin-top:1px}
.restore-skip-btn{font-size:.78rem;color:var(--tx4);font-weight:600;padding:8px;transition:color var(--t)}
.restore-skip-btn:hover{color:var(--tx2)}

/* ─── 25. CRISIS MODALS [V14] ─── */
.crisis-overlay{
  position:fixed;inset:0;z-index:800;
  background:rgba(0,0,0,.60);
  backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);
  display:flex;align-items:center;justify-content:center;
  padding:24px 20px;
}
.crisis-sheet{
  width:100%;max-width:380px;
  border-radius:var(--r-2xl);
  padding:26px 22px;
  text-align:center;
  animation:authCardIn .38s var(--spring) both;
}
.crisis-sheet--amber{
  background:linear-gradient(160deg,#fffbeb 0%,#fef3c7 100%);
  border:1.5px solid #fde68a;
  box-shadow:0 16px 48px rgba(245,158,11,.22),0 4px 16px rgba(0,0,0,.10);
}
.crisis-sheet--red{
  background:linear-gradient(160deg,#fff5f5 0%,#fee2e2 100%);
  border:1.5px solid #fca5a5;
  box-shadow:0 16px 48px rgba(239,68,68,.22),0 4px 16px rgba(0,0,0,.10);
}
[data-theme="dark"] .crisis-sheet--amber{background:linear-gradient(160deg,rgba(245,158,11,.12),rgba(245,158,11,.06));border-color:rgba(245,158,11,.30)}
[data-theme="dark"] .crisis-sheet--red{background:linear-gradient(160deg,rgba(239,68,68,.12),rgba(239,68,68,.06));border-color:rgba(239,68,68,.30)}
.crisis-emoji{font-size:3rem;margin-bottom:12px;animation:bounceIn .4s var(--spring) both .1s}
.crisis-title{font-size:1rem;font-weight:900;margin-bottom:10px}
.crisis-body{font-size:.84rem;color:var(--tx2);line-height:1.7;margin-bottom:16px}
.crisis-actions{display:flex;flex-direction:column;gap:8px}
.crisis-btn{
  width:100%;padding:13px;border-radius:var(--r-lg);
  font-size:.88rem;font-weight:800;
  transition:all var(--t) var(--spring)
}
.crisis-btn--primary{
  background:linear-gradient(135deg,var(--p),var(--p-h));
  color:#fff;box-shadow:var(--sh-p)
}
.crisis-btn--primary:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(37,99,235,.38)}
.crisis-btn--ghost{
  background:var(--srf);border:1.5px solid var(--bdr);color:var(--tx2)
}
.crisis-btn--ghost:hover{border-color:var(--p);color:var(--p)}

/* ─── 26. ANIMATIONS ─── */
@keyframes fadeScaleIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ─── 27. SCROLLBAR ─── */
.app-content::-webkit-scrollbar{width:4px}
.app-content::-webkit-scrollbar-track{background:transparent}
.app-content::-webkit-scrollbar-thumb{background:var(--srf3);border-radius:var(--r-f)}

/* ═══════════════════════════════════════════════════
   MY PLANS SECTION  (v15 Multi-Plan)
═══════════════════════════════════════════════════ */
.my-plans-section {
  background: var(--srf);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--sh-sm);
}
.my-plans-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.my-plans-section__title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--tx1);
  margin: 0;
}
.my-plans-section__count {
  font-size: .76rem;
  font-weight: 700;
  color: var(--tx3);
  background: var(--srf2);
  padding: 3px 10px;
  border-radius: var(--r-f);
}
.my-plans-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.my-plan-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--srf2);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.my-plan-item:active { transform: scale(.98); }
.my-plan-item--active {
  border-color: var(--p);
  background: var(--p-ultra);
}
.my-plan-item__info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.my-plan-item__label {
  font-size: .86rem;
  font-weight: 600;
  color: var(--tx1);
  line-height: 1.3;
}
.my-plan-item__badge {
  font-size: .70rem;
  font-weight: 800;
  color: var(--p);
  background: var(--p-l);
  padding: 2px 8px;
  border-radius: var(--r-f);
  white-space: nowrap;
}
.my-plans-add-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 0;
  border-radius: var(--r-md);
  border: 1.5px dashed var(--bdr);
  background: transparent;
  color: var(--p);
  font-size: .87rem;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--t) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.my-plans-add-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.my-plans-add-btn:hover  { background: var(--p-ultra); border-color: var(--p); }
.my-plans-add-btn:active { transform: scale(.97); }

/* Active tier highlight on sub cards */
.pricing-card--active-tier {
  border: 2px solid var(--green) !important;
}
.pricing-card--active-tier .pricing-btn:disabled {
  background: var(--green) !important;
  color: #fff !important;
  opacity: 1 !important;
  cursor: default;
}

/* Duration label inside card name */
.pricing-card__dur {
  font-size: .72rem;
  font-weight: 500;
  color: var(--tx3);
  margin-right: 4px;
}
/* ─── TAHSILI EMERGENCY MODAL [V15] ─── */
.tahsili-sheet {
  background: linear-gradient(160deg, rgba(239,68,68,.10), rgba(245,158,11,.08));
  border: 1.5px solid rgba(239,68,68,.28);
}
[data-theme="dark"] .tahsili-sheet {
  background: linear-gradient(160deg, rgba(239,68,68,.14), rgba(245,158,11,.10));
  border-color: rgba(239,68,68,.35);
}
.tahsili-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, var(--red), #dc2626);
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .04em;
  padding: 4px 12px;
  border-radius: var(--r-f);
  margin-bottom: 10px;
  box-shadow: 0 3px 14px rgba(239,68,68,.32);
}
.tahsili-plan-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--srf2);
  border: 1px solid var(--bdr);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 16px;
  text-align: right;
}
.tahsili-phase {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tahsili-phase__badge {
  font-size: .72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--r-f);
  width: fit-content;
}
.tahsili-phase__badge--blue {
  background: var(--p-l);
  color: var(--p-h);
}
.tahsili-phase__badge--red {
  background: var(--red-l);
  color: var(--red-dark);
}
.tahsili-phase__desc {
  font-size: .82rem;
  color: var(--tx2);
  padding-right: 4px;
}

/* ─── POMODORO CUSTOM ROW & END SESSION (Redesign) [V15] ─── */
.pomo-custom-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 16px 10px;
  background: var(--srf2);
  border: 1.5px solid var(--bdr);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.pomo-custom-label {
  font-size: .76rem;
  font-weight: 700;
  color: var(--tx3);
  letter-spacing: .01em;
}
.pomo-custom-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pomo-custom-input {
  flex: 1;
  background: var(--srf);
  border: 1.5px solid var(--bdr);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font-size: .9rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--tx1);
  text-align: center;
  outline: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  -moz-appearance: textfield;
}
.pomo-custom-input::-webkit-inner-spin-button,
.pomo-custom-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pomo-custom-input:focus {
  border-color: var(--p);
  box-shadow: 0 0 0 3px var(--p-ultra);
}
.pomo-custom-apply-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--p), var(--p-h));
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  font-family: inherit;
  padding: 9px 16px;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  box-shadow: var(--sh-p);
  transition: all .18s var(--spring);
  white-space: nowrap;
}
.pomo-custom-apply-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,99,235,.38); }
.pomo-custom-apply-btn:active { transform: scale(.95); }

.pomo-end-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 0 16px 10px;
  padding: 12px 16px;
  background: transparent;
  border: 1.5px solid rgba(239,68,68,.40);
  border-radius: var(--r-md);
  color: var(--red);
  font-size: .84rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: all .18s var(--ease);
  letter-spacing: .01em;
}
.pomo-end-btn:hover {
  background: rgba(239,68,68,.07);
  border-color: var(--red);
  box-shadow: 0 3px 14px rgba(239,68,68,.18);
}
.pomo-end-btn:active { transform: scale(.97); }
[data-theme="dark"] .pomo-end-btn {
  border-color: rgba(239,68,68,.35);
}
/* ═══════════════════════════════════════════════════════════════
   REDEEM ACTIVATION CODE  [V15]
   ═══════════════════════════════════════════════════════════════ */

/* ── Trigger button in #tab-sub ── */
.redeem-code-row {
  display: flex;
  justify-content: center;
  padding: 8px 0 28px;
}

.redeem-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1.5px solid var(--bdr);
  border-radius: var(--r-f);
  padding: 11px 24px;
  font-family: var(--font);
  font-size: .88rem;
  font-weight: 600;
  color: var(--p);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--t) var(--ease),
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    transform var(--t-fast) var(--spring-s);
}
.redeem-trigger-btn:hover {
  background: var(--p-ultra);
  border-color: var(--p);
  box-shadow: var(--sh-p);
}
.redeem-trigger-btn:active { transform: scale(.96); }
.redeem-trigger-btn__icon  { font-size: 1rem; line-height: 1; }

/* ── Prominent top-of-page redeem button ── */
.redeem-code-row--top {
  padding: 0 0 20px;
}
.redeem-trigger-btn--prominent {
  width: 100%;
  justify-content: center;
  background: linear-gradient(135deg, var(--p-ultra, rgba(99,102,241,.08)), rgba(249,115,22,.07));
  border: 2px solid var(--p);
  border-radius: var(--r-f);
  padding: 15px 24px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--p);
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(99,102,241,.13);
}
.redeem-trigger-btn--prominent::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .6s ease;
}
.redeem-trigger-btn--prominent:hover::before {
  transform: translateX(100%);
}
.redeem-trigger-btn--prominent:hover {
  background: linear-gradient(135deg, var(--p-ultra, rgba(99,102,241,.15)), rgba(249,115,22,.12));
  border-color: var(--p);
  box-shadow: 0 4px 20px rgba(99,102,241,.22);
  transform: translateY(-1px);
}
.redeem-trigger-btn--prominent .redeem-trigger-btn__icon {
  font-size: 1.25rem;
}

/* ── Overlay backdrop ── */
.redeem-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(0,0,0,.48);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* ── Bottom sheet ── */
.redeem-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--srf-glass);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  border: 1px solid var(--bdr);
  border-bottom: none;
  padding: 12px 20px calc(28px + var(--safe-b));
  box-shadow: var(--sh-xl);
  will-change: transform;
}
[data-theme="dark"] .redeem-sheet {
  background: var(--srf-glass);
}

.redeem-sheet__handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--srf3);
  margin: 0 auto 20px;
}

/* ── Header ── */
.redeem-sheet__header {
  text-align: center;
  position: relative;
  margin-bottom: 22px;
}

.redeem-header-icon {
  font-size: 2.8rem;
  line-height: 1;
  margin-bottom: 10px;
  display: block;
  animation: redeemIconPop .5s var(--spring) both;
}
@keyframes redeemIconPop {
  from { transform: scale(.4) rotate(-15deg); opacity: 0; }
  to   { transform: scale(1)  rotate(0);      opacity: 1; }
}

.redeem-sheet__title {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--tx1);
  margin: 0 0 6px;
}
.redeem-sheet__sub {
  font-size: .84rem;
  color: var(--tx3);
  margin: 0;
  line-height: 1.55;
}

.redeem-close-btn {
  position: absolute;
  top: 0;
  left: 0; /* RTL: visual right */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--srf2);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tx3);
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.redeem-close-btn svg    { width: 15px; height: 15px; }
.redeem-close-btn:hover  { background: var(--srf3); color: var(--tx1); }

/* ── Code input ── */
.redeem-input-wrap {
  margin-bottom: 18px;
}

.redeem-code-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--srf2);
  border: 1.5px solid var(--bdr);
  border-radius: var(--r-md);
  padding: 15px 18px;
  font-family: 'SF Mono', 'SFMono-Regular', 'Courier New', monospace;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-align: center;
  color: var(--tx1);
  caret-color: var(--p);
  outline: none;
  -webkit-appearance: none;
  transition:
    border-color var(--t) var(--ease),
    box-shadow   var(--t) var(--ease),
    background   var(--t) var(--ease);
}
.redeem-code-input::placeholder {
  color: var(--tx4);
  letter-spacing: .08em;
  font-weight: 400;
}
.redeem-code-input:focus {
  border-color: var(--p);
  background: var(--srf);
  box-shadow: 0 0 0 3px var(--p-glow);
}
.redeem-code-input.redeem-input--error {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(239,68,68,.20);
  animation: redeemShake .35s ease;
}
@keyframes redeemShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-7px); }
  40%     { transform: translateX(7px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}

/* ── Submit button ── */
.redeem-footer {
  padding-top: 2px;
}

.redeem-submit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--p) 0%, #6366f1 100%);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  padding: 15px 20px;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--sh-p);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity      var(--t)      var(--ease),
    transform    var(--t-fast) var(--spring-s),
    box-shadow   var(--t)      var(--ease);
}
.redeem-submit-btn:hover  { opacity: .92; box-shadow: 0 6px 28px rgba(37,99,235,.44); }
.redeem-submit-btn:active { transform: scale(.97); }
.redeem-submit-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* Spinner shown during loading */
.redeem-submit-btn__spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: redeemSpin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes redeemSpin { to { transform: rotate(360deg); } }

.redeem-submit-btn.loading .redeem-submit-btn__text    { opacity: .5; }
.redeem-submit-btn.loading .redeem-submit-btn__spinner { display: block; }
/* ═══════════════════════════════════════════════════════════════
   VIDEO PLAY BUTTON & CLICKABLE TASK TITLE [V16]
   ═══════════════════════════════════════════════════════════════ */

/* Play button — appears on the left side of each task */
.tl-task__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--p), var(--p-h));
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(37,99,235,.30);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
  margin-right: auto;
}
.tl-task__play svg {
  width: 14px;
  height: 14px;
}
.tl-task__play:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 14px rgba(37,99,235,.40);
}
.tl-task__play:active {
  transform: scale(.93);
}

/* Clickable task title */
.tl-task__title--link {
  cursor: pointer;
  color: var(--p);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  text-decoration-color: rgba(37,99,235,.3);
  transition: color .15s, text-decoration-color .15s;
}
.tl-task__title--link:hover {
  color: var(--p-h);
  text-decoration-color: var(--p);
}

/* Adjust task layout to fit play button */
.tl-task {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Done state — dim the play button */
.tl-task--done .tl-task__play {
  opacity: .4;
  background: var(--tx4);
  box-shadow: none;
}

/* Dark mode adjustments */
[data-theme="dark"] .tl-task__play {
  box-shadow: 0 2px 8px rgba(37,99,235,.20);
}
[data-theme="dark"] .tl-task__title--link {
  color: #60a5fa;
  text-decoration-color: rgba(96,165,250,.3);
}
[data-theme="dark"] .tl-task__title--link:hover {
  color: #93bbfc;
}
/* ═══════════════════════════════════════════════════════════════
   PROMO BANNER — QUDRAT20 [V16]
   ═══════════════════════════════════════════════════════════════ */

.promo-banner {
  position: relative;
  margin: 12px 16px 8px;
  border-radius: var(--r-xl, 20px);
  background: linear-gradient(135deg, #1e3a5f 0%, #0f2744 50%, #1a1a2e 100%);
  padding: 18px 20px 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.25), 0 0 40px rgba(37,99,235,.15);
  border: 1px solid rgba(96,165,250,.15);
}
.promo-banner--sub {
  margin: 0 0 16px;
}
.promo-banner__glow {
  position: absolute;
  top: -40%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(37,99,235,.25) 0%, transparent 70%);
  pointer-events: none;
}
.promo-banner__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.promo-banner__right {
  flex: 1;
  min-width: 0;
}
.promo-banner__badge {
  display: inline-block;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--r-f, 9999px);
  margin-bottom: 6px;
  letter-spacing: .02em;
  animation: promoPulse 2s ease-in-out infinite;
}
@keyframes promoPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .88; transform: scale(1.03); }
}
.promo-banner__title {
  font-size: .92rem;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.4;
  margin-bottom: 8px;
}
.promo-banner__pct {
  font-size: 1.1rem;
  font-weight: 900;
  color: #60a5fa;
}
.promo-banner__code-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.promo-banner__label {
  font-size: .75rem;
  color: rgba(255,255,255,.55);
  font-weight: 600;
}
.promo-banner__code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(96,165,250,.15);
  border: 1.5px dashed rgba(96,165,250,.4);
  border-radius: var(--r-md, 12px);
  padding: 5px 14px;
  color: #60a5fa;
  font-size: .88rem;
  font-weight: 900;
  font-family: 'Courier New', monospace;
  letter-spacing: .08em;
  cursor: pointer;
  transition: all .2s ease;
}
.promo-banner__code:hover {
  background: rgba(96,165,250,.25);
  border-color: rgba(96,165,250,.6);
  transform: scale(1.03);
}
.promo-banner__code:active {
  transform: scale(.97);
}
.promo-banner__code svg {
  opacity: .6;
}

/* Timer */
.promo-banner__left {
  flex-shrink: 0;
  text-align: center;
}
.promo-banner__timer-label {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  margin-bottom: 6px;
}
.promo-banner__timer {
  display: flex;
  align-items: center;
  gap: 4px;
}
.promo-timer-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 36px;
}
.promo-timer-num {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 4px 6px;
  font-size: .88rem;
  font-weight: 900;
  color: #fff;
  min-width: 32px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.promo-timer-lbl {
  font-size: .58rem;
  font-weight: 600;
  color: rgba(255,255,255,.35);
  margin-top: 2px;
}
.promo-timer-sep {
  color: rgba(255,255,255,.3);
  font-weight: 800;
  font-size: .9rem;
  margin-bottom: 14px;
}

/* Close button */
.promo-banner__close {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: none;
  color: rgba(255,255,255,.5);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  z-index: 2;
}
.promo-banner__close:hover {
  background: rgba(255,255,255,.2);
  color: #fff;
}

/* Responsive */
@media (max-width: 480px) {
  .promo-banner__content {
    flex-direction: column;
    text-align: center;
  }
  .promo-banner__code-row {
    justify-content: center;
  }
  .promo-banner__timer {
    justify-content: center;
  }
}

/* Expired state */
.promo-banner--expired .promo-banner__timer {
  opacity: .3;
}
.promo-banner--expired .promo-banner__badge {
  background: #6b7280;
  animation: none;
}
/* ════════════════════════════════════════════════════════════
   SITE-WIDE PROMO MODAL — Ecosystem Plan (iOS Glassmorphism)
   Fully namespaced under #qp-promo-* / .qp-promo-*
   ════════════════════════════════════════════════════════════ */

/* Overlay */
.qp-promo-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  padding: 20px;
}

.qp-promo-overlay.qp-promo--visible {
  opacity: 1;
  visibility: visible;
}

/* Card */
.qp-promo-modal {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  backdrop-filter: blur(40px) saturate(1.6);
  border-radius: 24px;
  padding: 36px 28px 28px;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.12),
    0 1.5px 0 rgba(255, 255, 255, 0.5) inset;
  text-align: center;
  font-family: 'Cairo', sans-serif;
  direction: rtl;
  transform: scale(0.88) translateY(24px);
  transition: transform .35s cubic-bezier(.36, .07, .19, .97);
}

.qp-promo-overlay.qp-promo--visible .qp-promo-modal {
  transform: scale(1) translateY(0);
}

/* Icon */
.qp-promo-modal__icon {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 12px;
  display: block;
}

/* Title */
.qp-promo-modal__title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 10px;
  line-height: 1.5;
}

/* Description */
.qp-promo-modal__desc {
  font-size: .88rem;
  font-weight: 500;
  color: #444;
  line-height: 1.75;
  margin: 0 0 22px;
}
.qp-promo-modal__desc strong {
  color: #007aff;
  font-weight: 700;
}

/* Primary CTA */
.qp-promo-modal__cta {
  display: block;
  width: 100%;
  padding: 14px 16px;
  background: #007aff;
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  font-family: 'Cairo', sans-serif;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background .2s ease, transform .15s ease;
  box-sizing: border-box;
}
.qp-promo-modal__cta:hover {
  background: #0066d6;
}
.qp-promo-modal__cta:active {
  transform: scale(0.97);
}

/* Secondary dismiss */
.qp-promo-modal__dismiss {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px 16px;
  background: transparent;
  color: #007aff;
  font-size: .88rem;
  font-weight: 700;
  font-family: 'Cairo', sans-serif;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: background .2s ease;
}
.qp-promo-modal__dismiss:hover {
  background: rgba(0, 122, 255, 0.06);
}

/* ── Dark mode support ── */
[data-theme="dark"] .qp-promo-modal,
.dark .qp-promo-modal {
  background: rgba(40, 40, 42, 0.85);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.35),
    0 1.5px 0 rgba(255, 255, 255, 0.06) inset;
}
[data-theme="dark"] .qp-promo-modal__title,
.dark .qp-promo-modal__title {
  color: #f0f0f0;
}
[data-theme="dark"] .qp-promo-modal__desc,
.dark .qp-promo-modal__desc {
  color: #bbb;
}