/* ============================================================
     LOGIN OVERLAY
  ============================================================ */
  #login-overlay { position:fixed; inset:0; z-index:9000; background:transparent;
    display:flex; align-items:center; justify-content:center; padding:24px;
    transition:opacity 0.6s ease,transform 0.6s ease; }
  #login-overlay.fade-out { opacity:0; transform:scale(1.04); pointer-events:none; }

  .login-card { width:100%; max-width:320px; background:var(--bg-card);
    border:1px solid var(--line-color); border-radius:8px; padding:36px 28px 32px;
    position:relative; overflow:hidden; box-shadow:var(--shadow-lg); }
  .login-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:2px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent); }

  .login-logo { display:flex; justify-content:center; margin-bottom:22px; }
  .login-logo svg { width:58px; height:58px; filter:drop-shadow(0 4px 16px rgba(var(--accent-rgb),0.35));
    animation:facePulse 4s ease-in-out infinite; }
  @keyframes facePulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }

  .login-heading { font-family:'Inter',sans-serif; font-size:1.7rem; font-weight:700;
    letter-spacing:-0.04em; color:var(--text-primary); text-align:center; line-height:1.1; margin-bottom:6px; }
  .login-sub { font-size:.65rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
    color:var(--text-muted); text-align:center; margin-bottom:28px; }
  .login-field-label { font-size:.62rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    color:var(--text-secondary); display:block; margin-bottom:8px; }
  .login-input { width:100%; padding:12px 14px; background:var(--form-input-bg); border:1px solid var(--line-color);
    border-radius:4px; font-family:'Inter',sans-serif; font-size:var(--fs-base); font-weight:400;
    color:var(--text-primary); outline:none; letter-spacing:0.02em;
    transition:border-color 0.15s,background 0.15s; }
  .login-input::placeholder { color:var(--text-muted); font-style:normal; font-size:var(--fs-sm); }
  .login-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(16,185,129,0.12); }
  .login-error { font-size:.62rem; color:#ef4444; letter-spacing:.03em; min-height:18px; margin-top:6px; margin-bottom:10px; }
  .login-btn { width:100%; padding:13px; background:var(--accent); color:#000; border:1px solid var(--accent);
    border-radius:4px; cursor:pointer; font-family:'Inter',sans-serif; font-size:var(--fs-sm); font-weight:600;
    letter-spacing:.01em; transition:all 0.15s; margin-top:4px; box-shadow:0 2px 8px rgba(16,185,129,0.25); }
  .login-btn:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
  .login-btn:active { transform:scale(0.98); }

  #bio-screen { display:none; flex-direction:column; align-items:center; justify-content:center; gap:20px; }
  #bio-screen.visible { display:flex; }
  #login-name-screen.hidden { display:none; }

  .bio-ring { position:relative; width:96px; height:96px; display:flex; align-items:center; justify-content:center; }
  .bio-ring svg.fp-icon { width:52px; height:52px; stroke:var(--accent); fill:none; stroke-width:1.2; stroke-linecap:round; opacity:0.85; }
  .bio-ring-track { position:absolute; inset:0; }
  .bio-ring-track circle { fill:none; stroke:var(--line-strong); stroke-width:2; }
  .bio-ring-progress { position:absolute; inset:0; transform:rotate(-90deg); }
  .bio-ring-progress circle { fill:none; stroke:var(--accent); stroke-width:2; stroke-dasharray:282.7; stroke-dashoffset:282.7; stroke-linecap:round; transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1); }
  .bio-ring-progress circle.animating { stroke-dashoffset:0; }
  .bio-label { font-size:.62rem; font-weight:400; letter-spacing:.28em; text-transform:uppercase; color:var(--text-muted); }
  .bio-success { display:none; flex-direction:column; align-items:center; gap:12px; }
  .bio-success.visible { display:flex; animation:fadeUp .4s ease; }
  .bio-check { width:56px; height:56px; background:rgba(var(--accent-rgb),0.15); border:1px solid var(--line-accent); display:flex; align-items:center; justify-content:center; }
  .bio-check svg { width:26px; height:26px; stroke:var(--accent); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .bio-success-text { font-family:'Inter',sans-serif; font-size:1rem; font-weight:600; color:var(--text-primary); }

  /* Password screen */
  #password-screen { display:none; }
  #password-screen.visible { display:block; animation:fadeUp 0.3s ease; }
  .pw-greeting { font-family:'Inter',sans-serif; font-size:1.25rem; font-weight:700;
    letter-spacing:-0.03em; color:var(--text-primary); text-align:center; margin-bottom:4px; }
  .pw-sub { font-size:.65rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
    color:var(--text-muted); text-align:center; margin-bottom:24px; }
  .bio-alt-btn { display:block; width:100%; margin-top:14px; background:none; border:none;
    color:var(--accent); font-family:'Inter',sans-serif; font-size:var(--fs-sm); font-weight:500;
    cursor:pointer; text-align:center; padding:6px; letter-spacing:0.02em;
    transition:opacity 0.15s; }
  .bio-alt-btn:hover { opacity:0.75; }

  /* ============================================================
     BACKGROUND LAYER
  ============================================================ */
  #bg-layer {
    position:fixed; inset:0; z-index:-1;
    background:linear-gradient(180deg,
      #0f2744 0%, #1a4068 18%, #2a6f98 38%,
      #3a9e8f 55%, #52b89a 70%, #74c9a8 83%, #a0d8b8 100%);
    background-size:cover; background-position:center center;
    transition:opacity 0.4s ease;
  }
  #bg-layer::after {
    content:''; position:absolute; inset:0;
    background:rgba(0,0,0,0.22);
    pointer-events:none;
  }
  html[data-theme="dark"] #bg-layer::after { background:rgba(0,0,0,0.52); }
  html, body { background:transparent !important; }

  /* ============================================================
     APP SHELL
  ============================================================ */
  /* App shell — pinned to viewport, centred with inset not transform */
  #app { display:flex; flex-direction:column;
    position:fixed; top:0; bottom:0;
    left:max(0px, calc(50vw - 260px));   /* centred, never negative */
    width:min(100vw, 520px);
    overflow:hidden; }
  /* Bounce on content only — app shell never moves */
  #mainContent.bounce-left  { animation:bounceLeft  0.38s ease; }
  #mainContent.bounce-right { animation:bounceRight 0.38s ease; }
  @keyframes bounceLeft  { 0%{transform:translateX(0)} 30%{transform:translateX(-9px)} 65%{transform:translateX(4px)} 100%{transform:translateX(0)} }
  @keyframes bounceRight { 0%{transform:translateX(0)} 30%{transform:translateX(9px)}  65%{transform:translateX(-4px)} 100%{transform:translateX(0)} }

  /* ============================================================
     LOGO
  ============================================================ */
  .brand-logo { width:40px; height:40px; flex-shrink:0; cursor:pointer; }
  /* Clip the rectangular flag emoji glyph into a circle when a flag avatar
     is selected. Preset SVG mascots draw their own circular shape so the
     clip is a no-op for them; only the .mascot-flag-emoji branch needs it. */
  .brand-logo:has(.mascot-flag-emoji) { overflow:hidden; border-radius:50%; }
  .brand-logo svg { width:100%; height:100%; transition:transform 0.4s cubic-bezier(.34,1.56,.64,1); animation:facePulse 4s ease-in-out infinite; }
  .brand-logo:hover svg { transform:scale(1.12) rotate(-4deg); }
  #eye-right-open   { transition:opacity 0.12s; }
  #eye-right-closed { opacity:0; transition:opacity 0.12s; }

  /* ============================================================
     HEADER
  ============================================================ */
  .header {
    flex-shrink:0; z-index:200; position:relative; overflow:hidden;
    background:linear-gradient(135deg,
      var(--bg-card) 0%,
      rgba(16,185,129,0.06) 50%,
      var(--bg-card) 100%);
    border-bottom:1px solid var(--line-color);
    transition:background 0.25s,border-color 0.25s;
  }
  /* emerald accent stripe across the very top */
  .header::before {
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent 0%,var(--accent) 30%,#34d399 65%,transparent 100%);
  }
  /* subtle decorative arc on the right */
  .header::after {
    content:'';position:absolute;top:-30px;right:-30px;width:110px;height:110px;border-radius:50%;
    background:radial-gradient(circle,rgba(16,185,129,0.1) 0%,transparent 70%);pointer-events:none;
  }
  .header-inner {
    padding:10px 16px 8px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
  }
  .header-brand { display:flex; align-items:center; gap:9px; user-select:none; -webkit-user-select:none; }
  .header-wordmark { display:flex; flex-direction:column; line-height:1; }
  .wordmark-top { font-family:'Inter',sans-serif; font-weight:800; font-size:1.1rem;
    color:var(--text-primary); letter-spacing:-0.05em; line-height:1;
    text-shadow:0 1px 3px rgba(0,0,0,0.18); }
  .wordmark-top span { color:var(--accent); filter:brightness(1.1); }
  .wordmark-bot { font-family:'Inter',sans-serif; font-weight:700; font-size:0.56rem; letter-spacing:0.16em;
    text-transform:uppercase; color:var(--text-secondary); margin-top:2px;
    opacity:0.85; text-shadow:0 1px 2px rgba(0,0,0,0.15); }
  .wordmark-byline { font-family:'Inter',sans-serif; font-weight:600; font-size:0.62rem; letter-spacing:0.08em;
    color:rgba(255,255,255,0.72); margin-top:2px; opacity:1;
    position:relative; display:inline-block; border-radius:2px;
    isolation:isolate; /* stacking context — keeps ::after z-index:-1 under text */
    text-shadow:0 1px 2px rgba(0,0,0,0.55), 0 -1px 0 rgba(255,255,255,0.14); }
  /* Subtle backglow behind "by IonHands": an elliptical radial gradient fills the
     element exactly (inset:0) so it can never overflow. No movement, no star,
     just a gentle breathing luminescence behind the words. */
  .wordmark-byline::after {
    content:''; position:absolute; inset:0; border-radius:2px;
    background:radial-gradient(ellipse at center, rgba(255,255,255,0.22) 0%, transparent 68%);
    animation:bylineGlow 3.2s ease-in-out infinite alternate;
    z-index:-1; pointer-events:none; }
  @keyframes bylineGlow {
    0%   { opacity:0.08; }
    100% { opacity:0.55; } }

  /* Mascot picker strip */
  .mascot-strip {
    display:none; align-items:center; gap:6px;
    padding:4px 16px 8px; overflow-x:auto; scrollbar-width:none;
  }
  .mascot-strip.open { display:flex; animation:fadeIn 0.15s ease; }
  .mascot-strip::-webkit-scrollbar{display:none;}
  .mascot-strip-label {
    font-size:.5rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    color:var(--text-muted); white-space:nowrap; flex-shrink:0; padding-right:2px;
  }
  .mascot-btn {
    width:32px;height:32px;border-radius:50%;flex-shrink:0;
    border:2px solid transparent;background:rgba(16,185,129,0.07);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:all 0.18s;padding:0;
  }
  .mascot-btn:hover { border-color:var(--accent); background:rgba(16,185,129,0.14); transform:scale(1.1); }
  .mascot-btn.active { border-color:var(--accent); background:rgba(16,185,129,0.18); }
  .mascot-btn svg { width:22px;height:22px; }
  .mode-divider{width:1px;height:24px;background:var(--line-color);flex-shrink:0;margin:0 6px;}
  .mode-btn{width:28px;height:28px;border-radius:4px;flex-shrink:0;border:2px solid transparent;
    background:rgba(16,185,129,0.07);font-family:'Inter',sans-serif;font-size:.72rem;font-weight:700;
    color:var(--text-muted);cursor:pointer;transition:all .18s;padding:0;line-height:1;}
  .mode-btn:hover{border-color:var(--accent);color:var(--accent);}
  .mode-btn.active{border-color:var(--accent);background:rgba(16,185,129,0.18);color:var(--accent);}

  .icon-btn { display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border:1px solid var(--line-color); background:transparent;
    border-radius:4px; cursor:pointer; font-size:15px; color:var(--text-muted);
    transition:all 0.15s; flex-shrink:0; }
  .icon-btn:hover { border-color:var(--accent); color:var(--accent); }
  .icon-btn:active { background:rgba(16,185,129,0.08); }

  /* ============================================================
     CONTENT + GRID
  ============================================================ */
  .content { flex:1; overflow-y:auto; overflow-x:hidden; padding:18px 16px 24px;
    scroll-behavior:smooth; position:relative; }
  .content::-webkit-scrollbar{width:4px;} .content::-webkit-scrollbar-track{background:transparent;}
  .content::-webkit-scrollbar-thumb{background:var(--line-color);border-radius:2px;}

  /* ============================================================
     SECTIONS
  ============================================================ */
  .section{display:none;position:relative;z-index:1;}
  .section.active{display:block;animation:fadeIn 0.18s ease;}
  @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
  @keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

  .section-header{
    margin-bottom:28px;
    background:rgba(255,255,255,0.84);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-radius:8px;
    padding:16px 18px;
    border:1px solid rgba(255,255,255,0.6);
    box-shadow:0 2px 16px rgba(0,0,0,0.06);
  }
  html[data-theme="dark"] .section-header {
    background:rgba(22,27,34,0.88);
    border-color:rgba(255,255,255,0.07);
  }
  .dash-header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
  .dash-cal-btn{
    flex-shrink:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:46px;min-height:46px;
    background:rgba(16,185,129,0.10);
    border:1.5px solid rgba(16,185,129,0.30);
    border-radius:8px;
    padding:4px 6px;
    cursor:pointer;
    transition:background .15s;
    gap:1px;
  }
  .dash-cal-btn:active{background:rgba(16,185,129,0.22);}
  .dash-cal-month{
    font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--accent);line-height:1;
  }
  .dash-cal-day{
    font-size:1.15rem;font-weight:800;letter-spacing:-.03em;
    color:var(--text-primary);line-height:1;
  }
  .dash-cal-icon{color:var(--accent);opacity:.7;}
.section-title{font-family:'Inter',sans-serif;font-size:clamp(1.6rem,5vw,2.2rem);font-weight:800;
    letter-spacing:-0.04em;color:#080808;line-height:1.1;}
  html[data-theme="dark"] .section-title{color:#f0f2f5;}
  .section-title em{font-style:normal;color:var(--accent);font-weight:800;}
  .section-subtitle{font-size:var(--fs-sm);color:var(--text-secondary);margin-top:4px;font-weight:400;}