/* ════════════════════════════════════════════════
   StayFlow  —  Full layout, dynamic calendar
   ════════════════════════════════════════════════ */
:root {
  --bg:       #f8f7f4;
  --bg2:      #ffffff;
  --bg3:      #f2f0ec;
  --bg4:      #e8e5df;
  --border:   rgba(0,0,0,0.08);
  --border2:  rgba(0,0,0,0.13);
  --text:     #1a1a1a;
  --text2:    #6b7280;
  --text3:    #9ca3af;
  --label:    #999999;
  --ink:      #1a1a1a;
  /* Calendar colors */
  --trip-bg:      #3b5bdb;
  --trip-text:    #ffffff;
  --trip-rem:     rgba(255,255,255,0.75);
  --planned-bg:   #bac8ff;
  --planned-text: #1c3faa;
  --planned-rem:  #3b5bdb;
  --exceed-bg:    #ffc9c9;
  --exceed-text:  #c92a2a;
  --exceed-rem:   #e03131;
  --today-ring:   #e07a3a;
  --sel-start:    #3b5bdb;
  /* Status colors */
  --green:      #2f9e44;
  --green-bg:   #d3f9d8;
  --orange:     #e67700;
  --orange-bg:  #fff3bf;
  --red:        #c92a2a;
  --red-bg:     #ffc9c9;
  /* Sidebar */
  --sb-bg:    #111827;
  --sb-text:  #f9fafb;
  --sb-text2: #9ca3af;
  --sb-text3: #4b5563;
  --sb-hover: rgba(255,255,255,0.06);
  --sb-active:rgba(255,255,255,0.1);
  --sb-border:rgba(255,255,255,0.07);
  --r:   12px;
  --rsm: 7px;
  --t: 0.15s ease;
  --shadow:    0 1px 3px rgba(0,0,0,.07), 0 4px 12px rgba(0,0,0,.05);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.1), 0 12px 40px rgba(0,0,0,.08);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
[dir="rtl"] body { font-family:'Tajawal','Inter',sans-serif; }
h1,h2,h3,.serif { font-family:'Lora','Georgia',serif; font-weight:400; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--bg4); border-radius:3px; }

/* ── Page system ── */
.page { display:none; }
.page.active { display:flex; }

/* ════════════════════════════════════════════════
   LOGIN
═══════════════════════════════════════════════ */
#page-login {
  min-height:100vh;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background:var(--bg);
  padding:1.5rem;
}
.login-card {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:20px;
  padding:2.25rem 2rem;
  width:100%;
  max-width:380px;
  box-shadow:var(--shadow-lg);
  animation:fadeUp .3s ease;
}
.login-brand { text-align:center; margin-bottom:1.5rem; }
.login-logo-img { max-width:260px; width:80%; height:auto; display:block; margin:0 auto; }
.lang-switcher  { display:flex; gap:.35rem; justify-content:center; margin-bottom:1.5rem; }
.lang-pill {
  padding:.28rem .7rem; border-radius:999px; border:1px solid var(--border2);
  background:transparent; color:var(--text2); cursor:pointer;
  font-size:.73rem; font-weight:600; transition:var(--t);
}
.lang-pill:hover { background:var(--bg3); }
.lang-pill.active { background:var(--ink); border-color:var(--ink); color:#fff; }
.btn-link { background:none; border:none; color:var(--accent); cursor:pointer; font-size:inherit; padding:0; text-decoration:underline; }
.btn-link:hover { opacity:.75; }
.btn-link.small { font-size:.78rem; }
.auth-links { display:flex; justify-content:space-between; margin-top:.875rem; font-size:.8rem; }
.auth-sub-title { font-size:.9rem; font-weight:600; color:var(--text2); margin-bottom:.75rem; }
.verify-state { text-align:center; padding:1.25rem 0 .5rem; }
.verify-icon { font-size:2.75rem; margin-bottom:.75rem; }
.verify-title { font-size:1.05rem; font-weight:700; color:var(--text); margin-bottom:.5rem; }
.verify-sub { font-size:.84rem; color:var(--text2); line-height:1.6; max-width:280px; margin:0 auto; }
.form-group { margin-bottom:.875rem; }
.form-label {
  display:block; font-size:.68rem; font-weight:700; color:var(--label);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:.35rem;
}
.form-control {
  width:100%; padding:.7rem .9rem; background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--rsm); color:var(--text); font-size:.875rem;
  font-family:inherit; outline:none; transition:var(--t);
}
.form-control:focus { border-color:var(--ink); background:var(--bg2); }
.form-control::placeholder { color:var(--text3); }
select.form-control {
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%236b7280' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .875rem center; padding-right:2.25rem;
}
[dir="rtl"] select.form-control { background-position:left .875rem center; padding-right:.9rem; padding-left:2.25rem; }
textarea.form-control { resize:vertical; min-height:68px; }
.pw-wrap { position:relative; }
.pw-wrap .form-control { padding-right:2.5rem; }
[dir="rtl"] .pw-wrap .form-control { padding-right:.9rem; padding-left:2.5rem; }
.pw-eye { position:absolute; right:.55rem; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--text3); font-size:.85rem; padding:.15rem .25rem; line-height:1; }
[dir="rtl"] .pw-eye { right:auto; left:.55rem; }
.pw-eye:hover { color:var(--text2); }
.form-check { display:flex; align-items:center; gap:.5rem; cursor:pointer; }
.form-check input[type=checkbox] { width:15px; height:15px; accent-color:var(--ink); cursor:pointer; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.login-error {
  background:var(--red-bg); color:var(--red); padding:.6rem .9rem;
  border-radius:var(--rsm); margin-bottom:.875rem; font-size:.8rem;
  border:1px solid rgba(201,42,42,.2); display:none;
}
.login-hint { text-align:center; margin-top:.75rem; font-size:.7rem; color:var(--text3); }
.login-hint code { background:var(--bg3); padding:.1rem .35rem; border-radius:4px; color:var(--text2); font-family:monospace; }

/* ════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:.35rem; padding:.55rem 1rem;
  border-radius:999px; border:none; cursor:pointer; font-size:.81rem;
  font-weight:600; font-family:inherit; transition:var(--t);
  text-decoration:none; white-space:nowrap; line-height:1;
}
.btn-dark    { background:var(--ink); color:#fff; }
.btn-dark:hover { background:#2d2d2d; transform:translateY(-1px); }
.btn-light   { background:var(--bg3); color:var(--text); border:1px solid var(--border); }
.btn-light:hover { background:var(--bg4); }
.btn-danger  { background:var(--red-bg); color:var(--red); border:1px solid rgba(201,42,42,.2); }
.btn-success { background:#d3f9d8; color:var(--green); border:1px solid rgba(47,158,68,.25); }
.btn-success:hover { background:#b2f2bb; transform:translateY(-1px); }
.btn-outline { background:transparent; color:var(--text); border:1px solid var(--border2); }
.btn-outline:hover { background:var(--bg3); }
.btn-ghost   { background:transparent; color:var(--text2); border:none; }
.btn-ghost:hover { background:var(--bg3); color:var(--text); border-radius:var(--rsm); }
.btn-icon    { padding:.4rem .5rem; background:var(--bg3); border:1px solid var(--border); border-radius:var(--rsm); color:var(--text2); }
.btn-icon:hover { background:var(--bg4); color:var(--text); }
.btn-full    { width:100%; justify-content:center; }
.btn-sm      { padding:.32rem .7rem; font-size:.75rem; }
.btn-lg      { padding:.75rem 1.5rem; font-size:.88rem; }
.btn:active  { transform:scale(.97); }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none !important; }

/* ════════════════════════════════════════════════
   APP SHELL  (sidebar + main)
═══════════════════════════════════════════════ */
#page-app {
  flex-direction:row;
  height:100vh;
  overflow:hidden;
}

/* ── Sidebar ── */
.sidebar {
  width:230px; min-width:230px; height:100vh; overflow-y:auto;
  background:var(--sb-bg); border-right:1px solid var(--sb-border);
  display:flex; flex-direction:column; transition:var(--t); z-index:100;
  flex-shrink:0;
}
.sb-head {
  padding:.875rem 1rem; border-bottom:1px solid var(--sb-border);
  display:flex; align-items:center; gap:.625rem;
}
.sb-logo-img {
  width:38px; height:38px; border-radius:8px; flex-shrink:0;
  background:#fff; padding:3px; object-fit:contain;
}
.sb-app-name { font-size:.875rem; font-weight:700; color:var(--sb-text); }
.sb-app-sub  { font-size:.6rem; color:var(--sb-text3); letter-spacing:.06em; text-transform:uppercase; }
.sb-nav { padding:.625rem .5rem; flex:1; }
.sb-section {
  font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--sb-text3); padding:.5rem .5rem .2rem; margin-top:.25rem;
}
.sb-item {
  display:flex; align-items:center; gap:.625rem; padding:.55rem .625rem;
  border-radius:var(--rsm); color:var(--sb-text2); cursor:pointer;
  font-size:.81rem; font-weight:500; border:none; background:none;
  width:100%; transition:var(--t); text-align:left;
}
[dir="rtl"] .sb-item { text-align:right; }
.sb-item:hover  { background:var(--sb-hover); color:var(--sb-text); }
.sb-item.active { background:var(--sb-active); color:#fff; }
.sb-item .si { font-size:.875rem; width:1.1rem; flex-shrink:0; }
.sb-item .sdays { font-size:.68rem; font-weight:700; flex-shrink:0; margin-left:auto; }
[dir="rtl"] .sb-item .sdays { margin-left:0; margin-right:auto; }
.sb-item .sbadge {
  font-size:.62rem; font-weight:700; margin-left:auto;
  color:var(--sb-text3); background:rgba(255,255,255,.06);
  padding:.1rem .35rem; border-radius:999px;
}
.sb-foot {
  padding:.75rem .875rem; border-top:1px solid var(--sb-border);
}
.sb-user { display:flex; align-items:center; gap:.5rem; margin-bottom:.625rem; }
.sb-avatar {
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,#3b5bdb,#4ECDC4);
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; color:#fff; flex-shrink:0;
}
.sb-email { font-size:.7rem; color:var(--sb-text2); }
.sb-role  { font-size:.6rem; color:var(--sb-text3); }
.sb-actions { display:flex; gap:.375rem; margin-bottom:.625rem; }
.sb-btn {
  flex:1; padding:.35rem; background:rgba(255,255,255,.07); border:1px solid var(--sb-border);
  border-radius:var(--rsm); color:var(--sb-text2); cursor:pointer; font-size:.72rem;
  font-family:inherit; transition:var(--t); text-align:center;
}
.sb-btn:hover { background:rgba(255,255,255,.12); color:var(--sb-text); }
.sb-langs { display:flex; gap:.25rem; justify-content:center; }
.sb-lang {
  padding:.22rem .55rem; border-radius:999px; border:1px solid var(--sb-border);
  background:transparent; color:var(--sb-text3); cursor:pointer;
  font-size:.68rem; font-weight:600; transition:var(--t);
}
.sb-lang:hover { color:var(--sb-text); }
.sb-lang.active { background:rgba(59,91,219,.4); border-color:rgba(59,91,219,.5); color:#fff; }

/* ── Main ── */
.main {
  flex:1; display:flex; flex-direction:column;
  height:100vh; overflow:hidden; min-width:0;
}
.topbar {
  display:flex; align-items:center; gap:.75rem; padding:.75rem 1.25rem;
  background:var(--bg2); border-bottom:1px solid var(--border); flex-shrink:0;
}
.topbar-title { font-size:.95rem; font-weight:700; flex:1; }
.topbar-actions { display:flex; align-items:center; gap:.375rem; }
.menu-btn { display:none; background:none; border:none; color:var(--text); font-size:1.1rem; cursor:pointer; padding:.25rem; }
.content { flex:1; overflow-y:auto; padding:1.25rem 1.5rem; }

/* Mobile sidebar */
.sb-backdrop {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:50;
}
.sb-backdrop.show { display:block; }
@media (max-width:768px) {
  .menu-btn { display:flex; }
  .sidebar {
    position:fixed; left:-230px; top:0; bottom:0;
    transition:left .25s ease; z-index:200;
  }
  [dir="rtl"] .sidebar { left:auto; right:-230px; transition:right .25s ease; }
  .sidebar.open { left:0; }
  [dir="rtl"] .sidebar.open { left:auto; right:0; }
  .content { padding:.875rem 1rem; }
}

/* ════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════ */
.card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r); padding:1.125rem; box-shadow:var(--shadow); margin-bottom:1rem;
}
.clabel {
  font-size:.62rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--label); margin-bottom:.2rem;
}
.cheading {
  font-family:'Lora',serif; font-size:1.5rem; font-weight:400; line-height:1.2;
}
.cheading-sm { font-family:'Lora',serif; font-size:1.15rem; font-weight:400; line-height:1.2; }

/* ── Driver header ── */
.drv-head { display:flex; align-items:center; gap:.875rem; }
.drv-avatar {
  width:48px; height:48px; border-radius:12px; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:700; color:#fff; flex-shrink:0;
}
.drv-name { font-size:1rem; font-weight:700; }
.drv-meta { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.25rem; }
.drv-meta-item { display:flex; align-items:center; gap:.3rem; font-size:.78rem; color:var(--text2); }
.drv-actions { display:flex; gap:.5rem; margin-top:.75rem; }

/* ── Stats bar ── */
.stats-bar {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.875rem; margin-bottom:1rem;
}
.stat-box { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:1rem; box-shadow:var(--shadow); }
.stat-label { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--label); margin-bottom:.25rem; }
.stat-val   { font-family:'Lora',serif; font-size:2.5rem; font-weight:400; line-height:1; }
.stat-desc  { font-size:.72rem; color:var(--text2); margin-top:.25rem; }
.prog-bar   { background:var(--bg4); border-radius:999px; height:4px; overflow:hidden; margin-top:.5rem; }
.prog-fill  { height:100%; border-radius:999px; background:var(--ink); transition:width .5s ease; }
.prog-fill.warn { background:var(--orange); }
.prog-fill.crit { background:var(--red); }
.prog-ticks { display:flex; justify-content:space-between; font-size:.65rem; color:var(--text3); margin-top:.25rem; }

/* ── Badges ── */
.badge { display:inline-flex; align-items:center; gap:.25rem; padding:.18rem .55rem; border-radius:999px; font-size:.68rem; font-weight:600; }
.badge-ok   { background:var(--green-bg); color:var(--green); }
.badge-warn { background:var(--orange-bg); color:var(--orange); }
.badge-bad  { background:var(--red-bg); color:var(--red); animation: pulse-bad 1.4s ease-in-out infinite; }
.badge-gray { background:var(--bg4); color:var(--text3); }
.badge-blue { background:#dbe4ff; color:#3b5bdb; }

/* ── Alerte dépassement plein écran ── */
.exceed-alert-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(201,42,42,.92);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem;
  animation: exceed-in .35s cubic-bezier(.22,1,.36,1), exceed-out .4s ease-in 1.6s forwards;
  pointer-events:none;
}
.exceed-alert-icon  { font-size:4.5rem; animation: shake .5s ease-in-out .35s; }
.exceed-alert-title { font-size:1.8rem; font-weight:800; color:#fff; letter-spacing:.02em; text-align:center; }
.exceed-alert-sub   { font-size:1rem; color:rgba(255,255,255,.8); text-align:center; }

/* ════════════════════════════════════════════════
   ★  BIG INTERACTIVE CALENDAR
═══════════════════════════════════════════════ */
.cal-card { padding:0; overflow:hidden; }

.cal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem .75rem; border-bottom:1px solid var(--border);
  flex-wrap:wrap; gap:.75rem;
}
.cal-header-left { display:flex; align-items:center; gap:.875rem; }
.cal-month-title { font-family:'Lora',serif; font-size:1.75rem; font-weight:400; }
.cal-nav-btns { display:flex; gap:.375rem; }

.cal-header-right { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }

/* Legend */
.cal-legend { display:flex; gap:.875rem; flex-wrap:wrap; }
.leg { display:flex; align-items:center; gap:.35rem; font-size:.72rem; color:var(--text2); }
.leg-dot { width:12px; height:12px; border-radius:3px; flex-shrink:0; }
.leg-dot.trip     { background:var(--trip-bg); }
.leg-dot.planned  { background:var(--planned-bg); }
.leg-dot.exceed   { background:var(--exceed-bg); }
.leg-dot.today    { background:transparent; border:2px solid var(--today-ring); border-radius:50%; }

/* Remaining days info bar */
.cal-info-bar {
  display:grid; grid-template-columns:1fr auto auto; align-items:center;
  gap:1.25rem; padding:.75rem 1.25rem;
  background:var(--bg3); border-bottom:1px solid var(--border);
}
.cal-info-date { font-size:.7rem; }
.cal-info-date .cid-label { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--label); }
.cal-info-date .cid-val   { font-size:.9rem; font-weight:600; margin-top:.1rem; }
.cal-info-stat { text-align:center; }
.cal-info-stat .cis-label { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--label); }
.cal-info-stat .cis-num   { font-family:'Lora',serif; font-size:1.5rem; font-weight:400; line-height:1; margin-top:.1rem; }
.cal-info-stat .cis-num.green { color:var(--green); }
.cal-info-stat .cis-num.orange{ color:var(--orange); }
.cal-info-stat .cis-num.red   { color:var(--red); }

/* Selection hint */
.cal-hint {
  padding:.6rem 1.25rem; background:var(--bg3); border-bottom:1px solid var(--border);
  font-size:.78rem; color:var(--text2); display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.cal-hint.picking { color:#3b5bdb; font-weight:500; }
.cal-hint .hint-clear { font-size:.72rem; cursor:pointer; color:var(--red); font-weight:600; }
.cal-hint .hint-clear:hover { text-decoration:underline; }

/* Weekday header */
.cal-weekdays {
  display:grid; grid-template-columns:repeat(7,1fr);
  padding:0 .375rem;
  border-bottom:1px solid var(--border);
}
.cal-wd {
  text-align:center; font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--text3);
  padding:.625rem 0;
}

/* Days grid */
.cal-grid {
  display:grid; grid-template-columns:repeat(7,1fr);
  padding:.375rem;
  gap:0;
}

/* ── Day cell ── */
.cal-cell {
  position:relative; cursor:pointer;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:.75rem .25rem;
  min-height:72px;
  user-select:none;
  transition:opacity .1s;
}
.cal-cell:hover { opacity:.85; }
.cal-cell.empty { cursor:default; opacity:1; }
.cal-cell.other-month { opacity:.25; }

/* Day number */
.cal-daynum {
  font-size:1.2rem; font-weight:600; line-height:1;
  position:relative; z-index:2;
  color:var(--text);
}
/* Remaining days */
.cal-rem {
  font-size:.72rem; font-weight:500; line-height:1;
  margin-top:.25rem; position:relative; z-index:2;
  color:var(--text3);
}

/* Today ring */
.cal-cell.s-today .cal-daynum {
  width:34px; height:34px; border-radius:50%;
  border:2px solid var(--today-ring);
  display:flex; align-items:center; justify-content:center;
  color:var(--today-ring);
}
.cal-cell.s-today .cal-rem { color:var(--today-ring); }

/* ── Pill / band highlight system ── */
/* The background band is drawn via ::before pseudo-element */
.cal-cell.in-trip::before,
.cal-cell.in-planned::before,
.cal-cell.in-exceed::before {
  content:'';
  position:absolute;
  top:6px; bottom:6px;
  left:0; right:0;
  z-index:1;
}

/* Trip (dark blue) */
.cal-cell.in-trip::before   { background:var(--trip-bg); }
.cal-cell.in-trip .cal-daynum { color:var(--trip-text); }
.cal-cell.in-trip .cal-rem    { color:var(--trip-rem); }

/* Planned (light blue) */
.cal-cell.in-planned::before   { background:var(--planned-bg); }
.cal-cell.in-planned .cal-daynum { color:var(--planned-text); }
.cal-cell.in-planned .cal-rem    { color:var(--planned-rem); }

/* Exceed (light red) */
.cal-cell.in-exceed::before   { background:var(--exceed-bg); }
.cal-cell.in-exceed .cal-daynum { color:var(--exceed-text); }
.cal-cell.in-exceed .cal-rem    { color:var(--exceed-rem); }

/* Pill left (start of group on this row) */
.cal-cell.pill-left::before  { border-radius:10px 0 0 10px; left:6px; }
/* Pill right (end of group on this row) */
.cal-cell.pill-right::before { border-radius:0 10px 10px 0; right:6px; }
/* Both (single day or isolated) */
.cal-cell.pill-both::before  { border-radius:10px; left:6px; right:6px; }
/* Full pill when start=end are on same row, full day pill */

/* Selection pending — first click only */
.cal-cell.sel-pending::before {
  content:'';
  position:absolute;
  top:6px; bottom:6px; left:6px; right:6px;
  z-index:1;
  background:var(--trip-bg);
  border-radius:10px;
  opacity:.6;
}
.cal-cell.sel-pending .cal-daynum { color:var(--trip-text); position:relative; z-index:2; }
.cal-cell.sel-pending .cal-rem    { color:var(--trip-rem); position:relative; z-index:2; }

/* ════════════════════════════════════════════════
   PLANNER
═══════════════════════════════════════════════ */
.planner-card { }
.planner-inputs {
  display:grid; grid-template-columns:1fr 1fr auto; gap:.75rem; align-items:end; margin-bottom:.875rem;
}
@media (max-width:600px) { .planner-inputs { grid-template-columns:1fr 1fr; } }
.planner-result { border-radius:var(--rsm); overflow:hidden; border:1px solid var(--border); }
.planner-res-head {
  display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem;
}
.planner-res-head.ok   { background:var(--green-bg); }
.planner-res-head.warn { background:var(--orange-bg); }
.planner-res-head.bad  { background:var(--red-bg); }
.planner-res-icon {
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
  flex-shrink:0; color:#fff;
}
.planner-res-icon.ok   { background:var(--green); }
.planner-res-icon.warn { background:var(--orange); }
.planner-res-icon.bad  { background:var(--red); }
.planner-res-title { font-family:'Lora',serif; font-size:1rem; }
.planner-res-title.ok   { color:var(--green); }
.planner-res-title.warn { color:var(--orange); }
.planner-res-title.bad  { color:var(--red); }
.planner-res-body { padding:.625rem 1rem; background:var(--bg3); }
.planner-res-line { font-size:.82rem; color:var(--text2); margin-bottom:.2rem; }
.planner-res-line b { color:var(--text); }

/* ════════════════════════════════════════════════
   HISTORY TABLE
═══════════════════════════════════════════════ */
.h-table { width:100%; border-collapse:collapse; }
.h-table th {
  font-size:.63rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--label);
  padding:.5rem .75rem; text-align:left; border-bottom:1px solid var(--border);
}
[dir="rtl"] .h-table th { text-align:right; }
.h-table td { padding:.75rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.h-table tr:last-child td { border-bottom:none; }
.h-table tr:hover td { background:var(--bg3); }
.h-country { display:flex; align-items:center; gap:.5rem; font-weight:600; }
.h-live td:first-child { border-left:2px solid var(--green); }
.h-actions { display:flex; gap:.25rem; }

/* ════════════════════════════════════════════════
   VISA + EMPTY
═══════════════════════════════════════════════ */
.visa-empty { border:1px dashed var(--border2); border-radius:var(--rsm); padding:2rem; text-align:center; color:var(--text2); }
.visa-card { padding:.875rem; background:var(--bg3); border:1px solid var(--border); border-radius:var(--rsm); margin-bottom:.5rem; transition:border-color .2s, background .2s; }
.visa-card--expired { background:rgba(201,42,42,.07); border-color:rgba(201,42,42,.4); animation:expiredPulse 2.5s ease-in-out infinite; }
@keyframes expiredPulse { 0%,100%{border-color:rgba(201,42,42,.35)} 50%{border-color:rgba(201,42,42,.7)} }
.visa-head { display:flex; justify-content:space-between; align-items:flex-start; }
.visa-type  { font-size:.875rem; font-weight:700; }
.visa-dates { font-size:.73rem; color:var(--text2); margin-top:.2rem; }
.visa-file-row { display:flex; align-items:center; gap:.375rem; margin-top:.625rem; flex-wrap:wrap; }
.visa-file-name { font-size:.75rem; color:var(--text2); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Visa timeline progress ── */
.visa-timeline { margin-top:.625rem; }
.visa-tl-bar { position:relative; height:6px; background:var(--border2); border-radius:999px; overflow:visible; margin-bottom:.35rem; }
.visa-tl-elapsed { height:100%; border-radius:999px; transition:width .4s ease; }
.visa-tl-marker { position:absolute; top:50%; transform:translate(-50%,-50%); width:10px; height:10px; border-radius:50%; background:#fff; border:2px solid var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2); }
.visa-tl-labels { display:flex; justify-content:space-between; align-items:center; gap:.25rem; }
.visa-tl-l { font-size:.62rem; color:var(--text3); white-space:nowrap; }
.visa-tl-c { font-size:.68rem; font-weight:600; text-align:center; flex:1; }
.visa-tl-c.green  { color:var(--green); }
.visa-tl-c.orange { color:var(--orange); }
.visa-tl-c.red    { color:var(--red); }
.badge-bad-pulse { animation:pulse-bad 1.4s ease-in-out infinite; }
.visa-attached { display:flex; align-items:center; gap:.375rem; padding:.4rem .625rem; background:var(--bg3); border:1px solid var(--border); border-radius:var(--rsm); font-size:.78rem; color:var(--text2); margin-bottom:.5rem; }
.file-drop { display:flex; align-items:center; justify-content:center; border:2px dashed var(--border2); border-radius:var(--rsm); padding:.75rem 1rem; cursor:pointer; transition:var(--t); background:var(--bg3); font-size:.8rem; color:var(--text3); text-align:center; }
.file-drop:hover { border-color:var(--text3); background:var(--bg4); color:var(--text2); }
.empty-state { text-align:center; padding:2.5rem 1rem; color:var(--text2); }
.empty-state .ei { font-size:2rem; margin-bottom:.625rem; opacity:.35; }

/* ─── Future opportunities ───────────────────── */
.future-opps { margin-top:1.125rem; padding-top:1rem; border-top:1px solid var(--border); }
.future-opps-title { font-size:.68rem; font-weight:700; letter-spacing:.07em; color:var(--label); text-transform:uppercase; margin-bottom:.375rem; }
.future-opps-sub { font-size:.78rem; color:var(--text2); margin-bottom:.75rem; }
.opp-row { display:flex; align-items:baseline; gap:.5rem; padding:.45rem .625rem; border-radius:var(--rsm); margin-bottom:.25rem; background:var(--bg3); transition:background var(--t); }
.opp-row:hover { background:var(--bg4); }
.opp-arrow { font-size:.8rem; color:var(--green); font-weight:700; flex-shrink:0; }
.opp-text { font-size:.8rem; color:var(--text2); line-height:1.4; }
.opp-text b { color:var(--text); }
.opp-days { display:inline-block; padding:.1rem .45rem; border-radius:999px; font-size:.7rem; font-weight:700; margin:0 .1rem; }
.opp-days.full { background:var(--green-bg); color:var(--green); }
.opp-days.partial { background:var(--orange-bg); color:var(--orange); }
.opp-no-restriction { display:flex; align-items:center; gap:.5rem; padding:.625rem .75rem; background:var(--green-bg); border-radius:var(--rsm); font-size:.82rem; color:var(--green); font-weight:600; }

/* ════════════════════════════════════════════════
   MODAL / OVERLAY
═══════════════════════════════════════════════ */
.overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  backdrop-filter:blur(3px); z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:1rem;
  animation:fadeIn .18s ease;
}
.modal {
  background:var(--bg2); border:1px solid var(--border2); border-radius:16px;
  width:100%; max-width:480px; max-height:90vh; overflow-y:auto;
  box-shadow:var(--shadow-lg); animation:fadeUp .22s ease;
}
.modal-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:.875rem 1.25rem; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--bg2);
}
.modal-title { font-size:.925rem; font-weight:700; }
.modal-body  { padding:1.125rem; }
.modal-foot  { display:flex; gap:.625rem; justify-content:flex-end; padding:.875rem 1.125rem; border-top:1px solid var(--border); }

/* ════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════ */
.toast-ct { position:fixed; top:1rem; right:1rem; z-index:9999; display:flex; flex-direction:column; gap:.375rem; }
[dir="rtl"] .toast-ct { right:auto; left:1rem; }
.toast {
  display:flex; align-items:center; gap:.625rem; padding:.7rem .95rem;
  background:var(--bg2); border:1px solid var(--border2); border-radius:var(--rsm);
  box-shadow:var(--shadow-lg); animation:slideIn .22s ease;
  font-size:.8rem; min-width:200px; max-width:300px;
}
.toast.ok   { border-left:3px solid var(--green); }
.toast.err  { border-left:3px solid var(--red); }
.toast.inf  { border-left:3px solid #6b7280; }
.toast.warn {
  border-left:3px solid var(--orange);
  max-width:320px;
  align-items:flex-start;
}
.toast.warn .warn-close {
  cursor:pointer; opacity:.5; font-size:.85rem; padding:.1rem .2rem;
  line-height:1; flex-shrink:0; margin-top:.05rem;
}
.toast.warn .warn-close:hover { opacity:1; }

/* ════════════════════════════════════════════════
   DASHBOARD
═══════════════════════════════════════════════ */
.dash-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.875rem; }
.dc-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r);
  padding:1.125rem; cursor:pointer; transition:var(--t); box-shadow:var(--shadow);
}
.dc-card:hover { border-color:var(--border2); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.dc-top { display:flex; align-items:center; gap:.75rem; margin-bottom:.875rem; }
.dc-ava { width:40px; height:40px; border-radius:10px; background:var(--ink); display:flex; align-items:center; justify-content:center; font-size:.95rem; font-weight:700; color:#fff; flex-shrink:0; }
.dc-name { font-size:.875rem; font-weight:700; }
.dc-meta { font-size:.72rem; color:var(--text2); }
.dc-bar  { background:var(--bg4); border-radius:999px; height:5px; overflow:hidden; margin:.375rem 0; }
.dc-fill { height:100%; border-radius:999px; }
.dc-fill.ok   { background:var(--green); }
.dc-fill.warn { background:var(--orange); }
.dc-fill.bad  { background:var(--red); }
.search-box { display:flex; align-items:center; gap:.5rem; padding:.55rem .875rem; background:var(--bg3); border:1px solid var(--border); border-radius:999px; }
.search-box input { background:none; border:none; color:var(--text); font-size:.82rem; outline:none; flex:1; font-family:inherit; }
.search-box input::placeholder { color:var(--text3); }

/* ════════════════════════════════════════════════
   UTILS
═══════════════════════════════════════════════ */
.divider { border:none; border-top:1px solid var(--border); margin:.875rem 0; }
.info-row { display:flex; justify-content:space-between; padding:.4rem 0; border-bottom:1px solid var(--border); font-size:.8rem; }
.info-row:last-child { border-bottom:none; }
.info-row .il { color:var(--text2); } .info-row .iv { font-weight:600; }
.sh { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:.875rem; gap:.75rem; }
.sh-left {}
.hidden  { display:none !important; }
.text-sm { font-size:.78rem; } .text-xs { font-size:.7rem; }
.text-muted { color:var(--text2); } .text-green { color:var(--green); } .text-red { color:var(--red); }
.fw7 { font-weight:700; }
.mt1 { margin-top:.5rem; } .mt2 { margin-top:1rem; }
.mb1 { margin-bottom:.5rem; } .mb2 { margin-bottom:1rem; }
.flex { display:flex; } .items-c { align-items:center; } .jbtw { justify-content:space-between; }
.gap-xs { gap:.375rem; } .gap-sm { gap:.625rem; }

/* ════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════ */
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideIn { from{opacity:0;transform:translateX(12px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideOut{ from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(12px)} }

/* ════════════════════════════════════════════════
   GUIDES
═══════════════════════════════════════════════ */
.sb-guide-section { padding:.5rem .75rem .25rem; font-size:.65rem; font-weight:700; color:var(--text3); letter-spacing:.08em; text-transform:uppercase; margin-top:.25rem; }
.sb-guide-btn { display:flex; align-items:center; gap:.6rem; width:100%; padding:.55rem .875rem; border:none; background:none; color:var(--text); font-size:.8rem; cursor:pointer; border-radius:var(--rsm); text-align:start; transition:background .15s; }
.sb-guide-btn:hover { background:var(--bg3); }
.sb-guide-btn .si { font-size:.95rem; flex-shrink:0; }

/* EU Reference credibility card */
.sb-eu-ref { margin:.75rem .5rem .25rem; padding:.625rem .75rem; background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.25); border-radius:var(--rsm); }
.sb-eu-badge { font-size:.7rem; font-weight:700; color:#166534; letter-spacing:.02em; margin-bottom:.3rem; }
.sb-eu-txt { font-size:.68rem; color:var(--text2); line-height:1.5; margin-bottom:.4rem; }
.sb-eu-link { display:inline-block; font-size:.67rem; font-weight:600; color:#166534; text-decoration:none; border-bottom:1px solid rgba(34,197,94,.4); line-height:1.4; transition:color .15s; }
.sb-eu-link:hover { color:#14532d; border-bottom-color:#14532d; }

/* Overlay */
.guide-overlay {
  position:fixed; inset:0; z-index:10000;
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  animation:fadeIn .25s ease;
}
@keyframes guideOut { to { opacity:0; transform:scale(.97); } }

.guide-box {
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:var(--r); box-shadow:var(--shadow-lg);
  width:min(480px, 94vw); overflow:hidden;
  animation:fadeUp .3s cubic-bezier(.22,1,.36,1);
}

/* Header */
.guide-header { display:flex; align-items:center; justify-content:space-between; padding:.875rem 1.125rem .75rem; border-bottom:1px solid var(--border); }
.guide-header-title { font-size:.8rem; font-weight:700; color:var(--text2); letter-spacing:.04em; text-transform:uppercase; }
.guide-close { background:none; border:none; color:var(--text3); font-size:1rem; cursor:pointer; padding:.2rem .4rem; border-radius:4px; line-height:1; }
.guide-close:hover { background:var(--bg3); color:var(--text); }

/* Progress */
.guide-progress-bar { height:3px; background:var(--border); }
.guide-progress-fill { height:100%; background:var(--accent); transition:width .35s cubic-bezier(.22,1,.36,1); }

/* Visual area */
.guide-visual {
  height:170px; background:var(--bg2); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:1rem;
  animation:fadeIn .3s ease;
}

/* Body */
.guide-body { padding:1.125rem 1.25rem .75rem; }
.guide-icon { font-size:1.6rem; margin-bottom:.35rem; }
.guide-title { font-size:1rem; font-weight:700; margin-bottom:.45rem; color:var(--text); }
.guide-desc { font-size:.82rem; color:var(--text2); line-height:1.55; }
.guide-desc b { color:var(--text); }

/* Footer */
.guide-footer { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.125rem .875rem; border-top:1px solid var(--border); }
.guide-step-count { font-size:.72rem; color:var(--text3); font-weight:600; }

/* Badges inside guide */
.gv-badge { display:inline-flex; align-items:center; padding:.1rem .45rem; border-radius:999px; font-size:.72rem; font-weight:600; }
.gv-badge.ok   { background:var(--green-bg); color:var(--green); }
.gv-badge.warn { background:var(--orange-bg); color:var(--orange); }
.gv-badge.bad  { background:var(--red-bg); color:var(--red); animation:pulse-bad 1.4s infinite; }

/* ── Visual: Logo ── */
.gv-logo-anim { position:relative; display:flex; align-items:center; justify-content:center; }
.gv-logo-circle { width:64px; height:64px; border-radius:50%; background:var(--accent); color:#fff; font-size:1.5rem; font-weight:800; display:flex; align-items:center; justify-content:center; z-index:1; }
.gv-logo-img { width:90px; height:90px; object-fit:contain; z-index:1; background:#fff; border-radius:14px; padding:6px; }
.gv-logo-ring { position:absolute; border-radius:50%; border:2px solid var(--accent); animation:ringPulse 2s ease-out infinite; width:80px; height:80px; opacity:.5; }
.gv-ring2 { animation-delay:.7s; }
@keyframes ringPulse { 0%{transform:scale(1);opacity:.5} 100%{transform:scale(1.8);opacity:0} }

/* ── Visual: Card form ── */
.gv-card-anim { display:flex; flex-direction:column; gap:.5rem; width:200px; }
.gv-card-line { height:10px; border-radius:4px; background:var(--border2); animation:expandLine .5s ease forwards; transform-origin:left; }
.gv-line1 { width:60%; animation-delay:.1s; }
.gv-line2 { width:80%; animation-delay:.3s; }
.gv-line3 { width:50%; animation-delay:.5s; }
.gv-card-btn { margin-top:.5rem; background:var(--accent); color:#fff; border-radius:var(--rsm); padding:.4rem .8rem; font-size:.75rem; font-weight:700; text-align:center; animation:fadeUp .4s ease .7s both; }
@keyframes expandLine { from{transform:scaleX(0);opacity:0} to{transform:scaleX(1);opacity:1} }

/* ── Visual: Trip rows ── */
.gv-trip-anim { display:flex; flex-direction:column; gap:.5rem; }
.gv-trip-row { display:flex; gap:.75rem; align-items:center; animation:fadeUp .4s ease both; }
.gv-trip-label { font-size:.7rem; color:var(--text3); width:45px; flex-shrink:0; }
.gv-trip-val { font-size:.8rem; font-weight:600; color:var(--text); background:var(--bg4); border-radius:4px; padding:.2rem .5rem; }
.gv-type-anim { animation:typeIn .4s ease both; }
@keyframes typeIn { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} }

/* ── Visual: Dashboard rows ── */
.gv-dash-anim { display:flex; flex-direction:column; gap:.5rem; width:100%; }
.gv-dash-row { display:flex; align-items:center; gap:.5rem; font-size:.75rem; background:var(--bg2); border:1px solid var(--border); border-radius:var(--rsm); padding:.4rem .7rem; animation:slideIn .35s ease both; }
.gv-dash-row span:first-child { flex:1; font-weight:500; }
.gv-rem { font-weight:700; font-size:.8rem; }
.gv-rem.green { color:var(--green); }
.gv-rem.orange { color:var(--orange); }
.gv-rem.red { color:var(--red); }

/* ── Visual: Calendar ── */
.gv-cal-anim { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; width:100%; }
.gv-cal-cell { aspect-ratio:1; border-radius:4px; background:var(--bg4); display:flex; align-items:center; justify-content:center; font-size:.72rem; animation:fadeIn .25s ease both; }
.gv-cal-cell.in-planned { background:var(--accent); color:#fff; font-weight:700; }

/* ── Visual: PDF ── */
.gv-pdf-anim { display:flex; gap:1rem; align-items:center; }
.gv-pdf-icon { font-size:3rem; animation:fadeUp .4s ease; }
.gv-pdf-lines { display:flex; flex-direction:column; gap:.45rem; flex:1; }
.gv-pdf-line { height:8px; border-radius:4px; background:var(--border2); animation:expandLine .4s ease both; }

/* ── Visual: Rule number ── */
.gv-rule-visual { display:flex; align-items:baseline; gap:.4rem; }
.gv-rule-num { font-size:4rem; font-weight:900; color:var(--accent); animation:countUp .6s cubic-bezier(.22,1,.36,1); }
.gv-rule-180 { color:var(--text2); font-size:2.8rem; }
.gv-rule-div { font-size:3rem; color:var(--text3); }
.gv-rule-label { font-size:1rem; color:var(--text3); align-self:flex-end; padding-bottom:.5rem; }
@keyframes countUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ── Visual: Rolling window ── */
.gv-window-anim { width:100%; display:flex; flex-direction:column; gap:.75rem; }
.gv-win-bar { position:relative; height:28px; background:var(--bg4); border-radius:6px; overflow:hidden; }
.gv-win-fill { height:100%; background:linear-gradient(90deg,var(--accent),#6ea8fe); border-radius:6px; animation:winSlide 2s cubic-bezier(.22,1,.36,1) infinite alternate; }
.gv-win-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; color:#fff; }
.gv-win-arrow { font-size:.78rem; color:var(--text3); text-align:center; animation:fadeIn .5s ease .5s both; }
@keyframes winSlide { from{transform:translateX(-20%)} to{transform:translateX(5%)} }

/* ── Visual: Day counting ── */
.gv-count-anim { display:flex; flex-wrap:wrap; gap:4px; align-items:flex-end; }
.gv-day-cell { display:flex; flex-direction:column; align-items:center; width:28px; border-radius:4px; padding:.25rem .1rem; font-size:.6rem; animation:fadeUp .3s ease both; }
.gv-day-cell.entry { background:var(--green); color:#fff; }
.gv-day-cell.mid   { background:var(--accent); color:#fff; }
.gv-day-cell.exit  { background:var(--orange); color:#fff; }
.gv-day-n { font-weight:700; font-size:.7rem; }
.gv-day-l { font-size:.5rem; margin-top:.1rem; }
.gv-count-total { width:100%; text-align:center; font-size:.82rem; color:var(--text2); margin-top:.25rem; animation:fadeIn .4s ease 1s both; }

/* ── Visual: Usage bar ── */
.gv-bar-anim { width:100%; display:flex; flex-direction:column; gap:.6rem; }
.gv-bar-track { display:flex; height:32px; border-radius:6px; overflow:hidden; width:100%; }
.gv-bar-seg { display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; color:#fff; animation:growBar .5s cubic-bezier(.22,1,.36,1) both; transform-origin:left; }
.gv-bar-seg.t1 { background:#339af0; }
.gv-bar-seg.t2 { background:#228be6; }
.gv-bar-seg.t3 { background:#1971c2; }
.gv-bar-rem   { background:var(--border2); display:flex; align-items:center; justify-content:center; font-size:.7rem; color:var(--text2); font-weight:600; animation:growBar .5s ease both; }
.gv-bar-legend { display:flex; gap:1rem; justify-content:center; font-size:.72rem; }
.gv-leg { display:flex; align-items:center; gap:.3rem; }
.gv-leg.used { color:#339af0; }
.gv-leg.rem  { color:var(--text3); }
@keyframes growBar { from{transform:scaleX(0);opacity:0} to{transform:scaleX(1);opacity:1} }

/* ── Visual: Exceed ── */
.gv-exceed-anim { width:100%; display:flex; flex-direction:column; gap:.75rem; }
.gv-bar-exceed { background:var(--red); display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; color:#fff; animation:growBar .5s ease .5s both; min-width:40px; padding:0 .5rem; }
.gv-exceed-msg { text-align:center; font-size:.82rem; font-weight:700; color:var(--red); animation:fadeIn .4s ease 1s both; }

/* ── Visual: Tips ── */
.gv-tip-anim { display:flex; flex-direction:column; gap:.6rem; }
.gv-tip-row { font-size:.85rem; color:var(--text); background:var(--bg2); border:1px solid var(--border); border-radius:var(--rsm); padding:.5rem .875rem; font-weight:500; animation:slideIn .35s ease both; }

/* ── Guide: Visa visual ── */
.gv-visa-guide-anim { display:flex; flex-direction:column; gap:.5rem; width:100%; }
.gv-vg-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--rsm); padding:.5rem .7rem; animation:fadeUp .35s ease both; }
.gv-vg-card.gv-vg-exp { border-color:rgba(201,42,42,.4); background:rgba(201,42,42,.06); }
.gv-vg-head { display:flex; justify-content:space-between; align-items:center; font-size:.75rem; font-weight:600; margin-bottom:.35rem; }
.gv-vg-bar { position:relative; height:5px; background:var(--border2); border-radius:999px; overflow:visible; margin-bottom:.3rem; }
.gv-vg-fill { height:100%; border-radius:999px; animation:expandLine .5s ease both; transform-origin:left; }
.gv-vg-marker { position:absolute; top:50%; transform:translate(-50%,-50%); width:8px; height:8px; border-radius:50%; background:#fff; border:2px solid var(--accent); }
.gv-vg-meta { font-size:.62rem; color:var(--text3); text-align:center; }
.gv-vg-notif { background:rgba(201,42,42,.1); border:1px solid rgba(201,42,42,.3); border-radius:var(--rsm); padding:.35rem .6rem; font-size:.68rem; color:var(--red); font-weight:600; animation:slideIn .35s ease both; }

/* ── Rule guide extras ── */
.gv-schengen-anim { display:flex; flex-direction:column; align-items:center; gap:.75rem; }
.gv-sch-flags { display:flex; flex-wrap:wrap; gap:.35rem; justify-content:center; max-width:220px; }
.gv-sch-flag { font-size:1.45rem; animation:fadeUp .3s ease both; line-height:1; }
.gv-sch-label { font-size:.75rem; font-weight:700; color:var(--text2); }

.gv-wallet-anim { display:flex; flex-direction:column; gap:.5rem; width:100%; }
.gv-wallet-top { display:flex; align-items:center; justify-content:center; gap:.75rem; }
.gv-wallet-icon { font-size:2.5rem; animation:fadeUp .4s ease; }
.gv-wc-num { font-size:2.2rem; font-weight:900; color:var(--green); animation:countUp .6s cubic-bezier(.22,1,.36,1); }
.gv-wc-num small { font-size:1rem; font-weight:500; color:var(--text3); }
.gv-wc-bar { height:12px; background:var(--border2); border-radius:999px; overflow:hidden; }
.gv-wc-fill { height:100%; width:100%; background:linear-gradient(90deg,var(--green),#74c98b); border-radius:999px; animation:expandLine .7s cubic-bezier(.22,1,.36,1) .2s both; }
.gv-wc-labels { display:flex; justify-content:space-between; font-size:.68rem; color:var(--text3); }

.gv-win-today { display:flex; align-items:center; gap:.4rem; justify-content:flex-end; font-size:.72rem; color:var(--accent); font-weight:600; animation:fadeIn .4s ease .4s both; }
.gv-win-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:ringPulse 1.5s ease-out infinite; }

.gv-bar-eq { text-align:center; font-size:.82rem; color:var(--text2); animation:fadeIn .4s ease .8s both; }

.gv-recover-anim { display:flex; flex-direction:column; gap:.6rem; width:100%; }
.gv-rec-timeline { display:flex; align-items:center; gap:.4rem; background:var(--bg3); border-radius:var(--rsm); padding:.5rem .7rem; }
.gv-rec-old-trip { display:flex; flex-direction:column; align-items:center; gap:.15rem; flex-shrink:0; animation:fadeUp .35s ease both; }
.gv-rec-trip-badge { background:#339af0; color:#fff; border-radius:4px; font-size:.7rem; font-weight:700; padding:.15rem .4rem; }
.gv-rec-age { font-size:.58rem; color:var(--text3); }
.gv-rec-arrow-line { flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem; animation:fadeIn .35s ease .2s both; }
.gv-rec-line { width:100%; height:2px; background:linear-gradient(90deg,#339af0,var(--green)); border-radius:2px; }
.gv-rec-arrow-label { font-size:.58rem; color:var(--text3); white-space:nowrap; }
.gv-rec-wallet { display:flex; gap:.25rem; flex-shrink:0; }
.gv-rec-coin { background:var(--green); color:#fff; border-radius:4px; font-size:.65rem; font-weight:700; padding:.2rem .35rem; animation:fadeUp .3s ease both; }
.gv-rec-msg { text-align:center; font-size:.78rem; font-weight:700; color:var(--green); background:rgba(47,158,68,.08); border:1px solid rgba(47,158,68,.2); border-radius:var(--rsm); padding:.4rem .7rem; animation:fadeIn .4s ease 1.3s both; }

.gv-tip-row.gv-tip-warn { background:var(--orange-bg); color:var(--orange); border-color:rgba(230,119,0,.2); }
.gv-tip-row.gv-tip-bad  { background:var(--red-bg); color:var(--red); border-color:rgba(201,42,42,.2); }

@keyframes pulse-bad {
  0%,100% { box-shadow:0 0 0 0 rgba(201,42,42,.5); }
  50%      { box-shadow:0 0 0 6px rgba(201,42,42,0); }
}
@keyframes exceed-in  { from{opacity:0;transform:scale(1.06)} to{opacity:1;transform:scale(1)} }
@keyframes exceed-out { from{opacity:1;transform:scale(1)}    to{opacity:0;transform:scale(.96)} }
@keyframes shake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)}
  40%{transform:translateX(8px)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(5px)}
}

/* ─── Timeline bar ─────────────────────────────── */
.tl-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:.875rem 1.125rem .75rem; margin-bottom:1rem; box-shadow:var(--shadow); }
.tl-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.3rem; margin-bottom:.65rem; }
.tl-src  { font-size:.74rem; font-weight:600; color:var(--text2); }
.tl-180lbl { font-size:.68rem; font-weight:600; color:#3b5bdb; }
.tl-track { position:relative; height:34px; background:var(--bg3); border-radius:6px; overflow:hidden; }
.tl-zone { position:absolute; top:0; bottom:0; pointer-events:none; border-left:2px solid #3b5bdb; border-right:2px solid #3b5bdb; }
.tl-zone::before { content:''; position:absolute; inset:0; background:#3b5bdb; opacity:.07; }
.tl-seg { position:absolute; top:5px; bottom:5px; border-radius:3px; min-width:3px; cursor:default; transition:filter .15s; }
.tl-seg:hover { filter:brightness(1.15); z-index:1; }
.tl-in      { background:var(--green); }
.tl-exceed  { background:var(--red); }
.tl-out     { background:var(--text3); opacity:.4; }
.tl-now { position:absolute; top:0; bottom:0; width:2px; background:var(--today-ring); transform:translateX(-50%); z-index:2; pointer-events:none; }
.tl-axis { position:relative; margin-top:.4rem; height:14px; font-size:.6rem; color:var(--text3); }
.tl-ax-s { position:absolute; left:0; }
.tl-ax-e { position:absolute; right:0; }
.tl-ax-t { position:absolute; transform:translateX(-50%); color:var(--today-ring); font-weight:700; white-space:nowrap; }
.tl-legend { display:flex; gap:.65rem; flex-wrap:wrap; margin-top:.55rem; font-size:.67rem; color:var(--text2); }
.tl-li { display:flex; align-items:center; gap:.3rem; }
.tl-dot { display:inline-block; width:9px; height:9px; border-radius:2px; flex-shrink:0; }
.tl-dot.tl-in     { background:var(--green); }
.tl-dot.tl-exceed { background:var(--red); }
.tl-dot.tl-out    { background:var(--text3); opacity:.4; }
.tl-rem { position:absolute; top:0; bottom:0; background:rgba(59,91,219,.07); border-right:2px solid #3b5bdb; display:flex; align-items:center; overflow:hidden; z-index:0; pointer-events:none; }
.tl-rem-lbl { font-size:.6rem; font-weight:800; color:#3b5bdb; padding-left:.5rem; white-space:nowrap; }
.tl-dot.tl-rem-dot { background:rgba(59,91,219,.15); border:2px solid #3b5bdb; }
.tl-future { position:absolute; top:5px; bottom:5px; border-radius:3px; min-width:4px; background:rgba(47,158,68,.12); border:1.5px dashed var(--green); display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:default; transition:background .15s; z-index:1; }
.tl-future:hover { background:rgba(47,158,68,.22); }
.tl-fut-lbl { font-size:.56rem; font-weight:800; color:var(--green); white-space:nowrap; pointer-events:none; padding:0 2px; }
.tl-dot.tl-fut-dot { background:rgba(47,158,68,.15); border:1.5px dashed var(--green); }

/* ─── CGU checkbox & link ───────────────────────── */
.cgu-check { display:flex; align-items:flex-start; gap:.5rem; margin:.75rem 0; font-size:.78rem; color:var(--text2); line-height:1.45; }
.cgu-check input[type=checkbox] { width:15px; height:15px; accent-color:var(--ink); cursor:pointer; flex-shrink:0; margin-top:2px; }
.auth-cgu-link { text-align:center; margin-top:.75rem; font-size:.67rem; color:var(--text3); }

/* ─── Terms modal ───────────────────────────────── */
.terms-ov { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9999; display:flex; align-items:center; justify-content:center; padding:1rem; animation:fadeIn .2s ease; }
.terms-box { background:var(--bg2); border-radius:var(--r); width:100%; max-width:640px; max-height:85vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); }
.terms-hd { display:flex; align-items:center; justify-content:space-between; padding:.875rem 1.25rem; border-bottom:1px solid var(--border); font-size:.84rem; font-weight:700; flex-shrink:0; }
.terms-hd button { background:none; border:none; cursor:pointer; font-size:1rem; color:var(--text2); padding:.25rem; }
.terms-body { overflow-y:auto; padding:1rem 1.25rem; flex:1; font-size:.8rem; line-height:1.65; color:var(--text); }
.terms-body h3 { font-size:.82rem; font-weight:700; margin:1rem 0 .35rem; color:var(--ink); }
.terms-body p  { margin-bottom:.5rem; color:var(--text2); }
.terms-body ul { padding-left:1.2rem; margin-bottom:.5rem; color:var(--text2); }
.terms-body li { margin-bottom:.2rem; }
.terms-ft { padding:.75rem 1.25rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; flex-shrink:0; }

/* ─── Year view / 90-180 calendar ─────────────────────────────────────── */
.yv-wrap { padding:.25rem 0 .25rem; }
.yv-top { display:flex; flex-wrap:wrap; gap:.625rem 1rem; align-items:center; justify-content:space-between; margin-bottom:.875rem; }
.yv-legend { display:flex; flex-wrap:wrap; gap:.35rem .75rem; align-items:center; }
.yv-li { display:flex; align-items:center; gap:.3rem; font-size:.7rem; color:var(--text2); }
.yv-sw { width:13px; height:13px; border-radius:3px; flex-shrink:0; display:inline-block; }
.yvsw-blue { background:#3b82f6; }
.yvsw-dash { width:22px; height:0; border-bottom:2.5px dashed #3b82f6; border-radius:0; background:transparent; }
.yvsw-ne   { width:22px; height:0; border-bottom:2.5px dashed #fbbf24; border-radius:0; background:transparent; }
.yvsw-auth { background:rgba(251,191,36,.35); border:1px solid #fbbf24; }
.yv-sline { display:inline-block; width:22px; height:4px; border-radius:2px; flex-shrink:0; }
.yvsl-o { background:rgba(249,115,22,.8); }
.yvsl-g { background:rgba(34,197,94,.9); }
.yv-qbar-wrap { display:flex; align-items:center; gap:.5rem; }
.yv-ql { font-size:.72rem; font-weight:700; white-space:nowrap; }
.yv-qbar { width:100px; height:5px; background:var(--bg4); border-radius:3px; overflow:hidden; }
.yv-qfill { height:100%; border-radius:3px; }

/* Prochaines fenêtres disponibles */
.yv-windows { background:var(--bg2); border:1px solid var(--border2); border-radius:var(--r); padding:.75rem 1rem; margin-bottom:1rem; }
.yv-win-title { font-size:.7rem; font-weight:800; color:var(--text); letter-spacing:.06em; text-transform:uppercase; margin-bottom:.2rem; }
.yv-win-sub { font-size:.72rem; color:var(--text2); margin-bottom:.625rem; }
.yv-win-list { display:flex; flex-direction:column; gap:.25rem; }
.yv-win-row { display:flex; align-items:center; gap:.5rem; padding:.45rem .6rem; border-radius:6px; background:var(--bg3); font-size:.78rem; color:var(--text); line-height:1.5; flex-wrap:wrap; }
.yv-win-arrow { color:#2f9e44; font-weight:700; flex-shrink:0; }
.yv-win-days { font-weight:800; }
.yv-months { display:grid; grid-template-columns:repeat(4,1fr); gap:.875rem; }
@media (max-width:860px) { .yv-months { grid-template-columns:repeat(3,1fr); gap:.75rem; } }
@media (max-width:560px) { .yv-months { grid-template-columns:repeat(2,1fr); gap:.625rem; } }

.ym-b { font-size:.72rem; background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:.625rem .65rem .55rem; transition:border-color .15s, box-shadow .15s, transform .15s; }
.ym-b:hover { border-color:var(--border2); box-shadow:0 2px 10px rgba(0,0,0,.05); transform:translateY(-1px); }
.ym-bh { font-weight:700; font-size:.78rem; color:var(--text); margin-bottom:.45rem; padding-bottom:.35rem; border-bottom:1px solid var(--border); display:flex; align-items:baseline; gap:.35rem; }
.ym-bh small { color:var(--text3); font-weight:500; font-size:.65rem; }
.ym-current { border-color:rgba(59,130,246,.35); background:linear-gradient(180deg, rgba(59,130,246,.05), var(--bg2) 60%); box-shadow:0 1px 6px rgba(59,130,246,.08); }
.ym-current .ym-bh { color:#2563eb; }
.ym-current .ym-bh small { color:rgba(37,99,235,.65); }

/* Week rows */
.yvr { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:2px; }
.yvr.yvr-o  { box-shadow:inset 0 -2px 0 rgba(249,115,22,.65); }
.yvr.yvr-g  { box-shadow:inset 0 -2px 0 rgba(34,197,94,.85); }
.yvr.yvr-og { box-shadow:inset 0 -2px 0 rgba(34,197,94,.85), inset 0 -4px 0 rgba(249,115,22,.55); }

/* Day cells */
.yvc { aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:5px; position:relative; transition:transform .12s, background .12s; }
.yvc:not(.yvc-e):not(.yvc-lbl):hover { transform:scale(1.18); z-index:2; }
.yvc span { font-size:.66rem; line-height:1; user-select:none; font-weight:500; }
.yvc-lbl { color:var(--text3); font-weight:700; font-size:.6rem; aspect-ratio:auto; height:18px; letter-spacing:.04em; text-transform:uppercase; }
.yvc-lbl:hover { transform:none !important; }
.yvc-e { opacity:0; pointer-events:none; }
.yvc-f  { color:var(--text3); opacity:.55; }
.yvc-auth { background:rgba(251,191,36,.22); }
.yvc-ne { background:#fbbf24 !important; color:#78350f !important; font-weight:800; border-radius:50%; box-shadow:0 0 0 2px rgba(251,191,36,.35); }
.yvc-T  { background:var(--ink) !important; color:#fff !important; border-radius:50%; font-weight:800; box-shadow:0 0 0 2px rgba(0,0,0,.12); }
.yvc-u  { background:#3b82f6; color:#fff; font-weight:600; }
.yvc-w  { box-shadow:inset 0 -2.5px 0 rgba(249,115,22,.75); }
.yvc-g  { box-shadow:inset 0 -3px 0 rgba(34,197,94,.95); }
.yvc-h  { border:1.5px dashed #3b82f6; color:var(--text2); }

/* ════════════════════════════════════════════════
   SPLASH SCREEN
═══════════════════════════════════════════════ */
.splash {
  position:fixed; inset:0; z-index:99999;
  background:#ffffff;
  display:none; align-items:center; justify-content:center;
  pointer-events:none;
}
.splash.show { display:flex; }
.splash.out  { animation:splashOut .4s ease forwards; }
.splash-inner { text-align:center; }
.splash-logo {
  width:min(420px, 70vw); height:auto; display:block; margin:0 auto;
  opacity:0; transform:scale(.88);
  animation:splashLogoIn .7s cubic-bezier(.2,.7,.3,1.1) forwards;
}
.splash-sig {
  margin-top:1.25rem;
  opacity:0; transform:translateY(6px);
  animation:splashSigIn .5s ease .4s forwards;
}
.splash-sig-lbl {
  font-size:.7rem; font-weight:600; color:#6b7280;
  letter-spacing:.18em; text-transform:uppercase; margin-bottom:.25rem;
}
.splash-sig-name {
  font-family:'Lora', serif;
  font-size:1.15rem; font-weight:600; color:#1e3a8a; font-style:italic;
}
@keyframes splashLogoIn {
  0%   { opacity:0; transform:scale(.85); }
  60%  { opacity:1; transform:scale(1.02); }
  100% { opacity:1; transform:scale(1); }
}
@keyframes splashSigIn {
  to { opacity:1; transform:translateY(0); }
}
@keyframes splashOut {
  to { opacity:0; }
}