:root{
    --bg-void:#120b1c;
    --bg-grad-1:#2a1a44;
    --bg-grad-2:#1a2a3e;
    --title-grad-1:#e8d5ff;
    --title-grad-2:#ffc860;
    --bg-panel:#1c1330;
    --bg-panel-2:#251a3d;
    --border-glow:#3a2657;
    --border-soft:#2a1d42;
    --text-primary:#f0eaf9;
    --text-dim:#a08fc4;
    --text-faint:#6b5a8c;
    --violet:#b378ff;
    --violet-dim:#7c4fd1;
    --gold:#ffc860;
    --teal:#4fe0c0;
    --rose:#ff6f9c;
    --sky:#63b8ff;
    --danger:#ff6767;
    --font-display: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:
      radial-gradient(ellipse at 20% -10%, var(--bg-grad-1) 0%, transparent 55%),
      radial-gradient(ellipse at 90% 10%, var(--bg-grad-2) 0%, transparent 50%),
      var(--bg-void);
    color:var(--text-primary);
    font-family:var(--font-body);
    min-height:100vh;
    padding:2rem 1rem 5rem;
  }
  .wrap{max-width:1100px;margin:0 auto;}

  .site-header{margin-bottom:0.5rem;}
  .header-rule{
    display:flex;align-items:center;justify-content:center;gap:12px;
    margin:0 0 1.75rem;color:var(--violet-dim);
  }
  .header-rule::before,.header-rule::after{
    content:'';flex:1;max-width:130px;height:1px;
    background:linear-gradient(90deg,transparent,var(--border-glow));
  }
  .header-rule::after{background:linear-gradient(90deg,var(--border-glow),transparent);}
  .header-rule span{font-size:0.8rem;line-height:1;opacity:0.85;}

  .site-footer{
    margin-top:2.5rem;padding-top:1.5rem;
    border-top:1px solid var(--border-soft);
  }
  .site-footer .footer-note{margin-top:0;}
  .footer-legal-links{
    display:flex;justify-content:center;align-items:center;gap:8px;
    margin-top:1.25rem;flex-wrap:wrap;
  }
  .footer-link-btn{
    background:none;border:none;padding:0;cursor:pointer;
    color:var(--text-faint);font-size:0.72rem;font-family:inherit;
    text-decoration:underline;text-underline-offset:2px;
    transition:color 0.2s ease;
  }
  .footer-link-btn:hover{color:var(--text-dim);}
  .footer-link-sep{color:var(--text-faint);font-size:0.72rem;opacity:0.6;}
  .site-signature{
    text-align:center;color:var(--text-faint);font-size:0.65rem;
    letter-spacing:0.12em;text-transform:uppercase;
    margin:1.5rem 0 0;font-family:var(--font-mono);opacity:0.7;
  }

  .top-row{display:flex;justify-content:flex-end;margin-bottom:0.5rem;}
  .lang-switch{display:flex;gap:4px;}
  .lang-btn{
    font-family:var(--font-mono);font-size:0.7rem;
    padding:5px 10px;border-radius:8px;
    border:1px solid var(--border-glow);
    background:var(--bg-panel);color:var(--text-faint);
    cursor:pointer;transition:all 0.2s cubic-bezier(.2,.8,.2,1);
  }
  .lang-btn:hover{
    transform:translateY(-2px);
    border-color:var(--violet);
    box-shadow:0 4px 12px rgba(179,120,255,0.2);
  }
  .lang-btn.sel{color:var(--text-primary);border-color:var(--violet);background:var(--bg-panel-2);}

  .title{
    font-family:var(--font-display);
    font-size:1.9rem;
    letter-spacing:0.04em;
    text-align:center;
    margin:0 0 0.25rem;
    background:linear-gradient(120deg,var(--title-grad-1),var(--title-grad-2) 60%,var(--title-grad-1));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .subtitle{
    text-align:center;
    color:var(--text-dim);
    font-size:0.85rem;
    margin:0;
    letter-spacing:0.03em;
  }
  .subtitle-row{
    display:flex;align-items:center;justify-content:center;gap:6px;
    margin:0 0 2rem;
  }
  .edit-quote-btn{
    background:transparent;border:none;color:var(--text-faint);
    font-size:0.72rem;cursor:pointer;padding:2px 4px;flex-shrink:0;
    transition:color 0.2s;
  }
  .edit-quote-btn:hover{color:var(--violet);}
  .custom-quote-suggestions{
    display:flex;flex-direction:column;gap:6px;
    max-height:160px;overflow-y:auto;margin-top:6px;
  }
  .custom-quote-suggestion-btn{
    text-align:left;background:var(--bg-void);border:1px solid var(--border-soft);
    color:var(--text-dim);font-size:0.76rem;border-radius:8px;padding:7px 10px;
    cursor:pointer;transition:all 0.2s cubic-bezier(.2,.8,.2,1);
  }
  .custom-quote-suggestion-btn:hover{border-color:var(--violet);color:var(--text-primary);}

  .profile-card{
    background:linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel));
    border:1px solid var(--border-glow);
    border-radius:18px;
    padding:1.4rem;
    display:flex;
    gap:1.4rem;
    align-items:center;
    box-shadow:0 0 40px -12px rgba(179,120,255,0.25), inset 0 0 0 1px rgba(255,255,255,0.02);
    margin-bottom:1.5rem;
    transition:all 0.3s cubic-bezier(.2,.8,.2,1);
  }
  .profile-card:hover{
    box-shadow:0 0 50px -8px rgba(179,120,255,0.4), inset 0 0 0 1px rgba(255,255,255,0.05);
    transform:translateY(-2px);
  }
  .profile-character{
    flex-shrink:0;
    display:flex;flex-direction:column;align-items:center;gap:8px;
    width:104px;
  }
  .companion-orb{width:100px;height:140px;overflow:hidden;}
  .mood-pill{
    font-size:0.7rem;color:var(--text-primary);
    background:var(--bg-void);
    border:1px solid var(--border-glow);
    border-radius:12px;
    padding:3px 12px;
    white-space:nowrap;
  }
  .companion-evolution-label{
    font-size:0.62rem;color:var(--text-faint);
    margin-top:4px;text-align:center;font-family:var(--font-mono);
  }
  .profile-stats{flex:1;min-width:0;}
  .profile-top{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
  .lvl-badge{
    flex-shrink:0;
    width:58px;height:58px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, var(--violet), var(--violet-dim) 70%);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    box-shadow:0 0 22px rgba(179,120,255,0.55), inset 0 2px 4px rgba(255,255,255,0.25);
    border:2px solid rgba(255,255,255,0.15);
  }
  .lvl-badge .n{font-family:var(--font-display);font-size:1.35rem;line-height:1;font-weight:700;color:#fff;}
  .lvl-badge .l{font-size:0.5rem;letter-spacing:0.08em;text-transform:uppercase;color:#e8dcff;margin-top:1px;}
  .profile-top-text{display:flex;flex-direction:column;gap:5px;min-width:0;}
  .rank{font-family:var(--font-display);font-size:1.1rem;color:var(--text-primary);}
  .streak{
    font-size:0.78rem;color:var(--gold);
    font-family:var(--font-mono);
    display:flex;align-items:center;gap:4px;
    white-space:nowrap;
  }
  .xp-track{
    height:14px;border-radius:8px;
    background:var(--bg-void);
    border:1px solid var(--border-glow);
    overflow:hidden;position:relative;
  }
  .xp-fill{
    height:100%;
    background:linear-gradient(90deg, var(--violet-dim), var(--violet), var(--gold));
    border-radius:8px;
    transition:width 0.5s cubic-bezier(.2,.8,.2,1);
    box-shadow:0 0 12px rgba(179,120,255,0.7);
  }
  .xp-label{
    font-family:var(--font-mono);
    font-size:0.72rem;color:var(--text-dim);
    margin-top:6px;text-align:right;
  }
  .companion-desc{
    font-size:0.78rem;color:var(--text-dim);line-height:1.4;
    margin-top:10px;padding-top:10px;
    border-top:1px solid var(--border-soft);
  }

  .energy-panel{
    background:var(--bg-panel);
    border:1px solid var(--border-soft);
    border-radius:16px;
    padding:1.1rem 1.25rem;
    margin-bottom:1.25rem;
    transition:all 0.3s cubic-bezier(.2,.8,.2,1);
  }
  .energy-panel:hover{
    border-color:var(--border-glow);
    box-shadow:0 4px 16px rgba(179,120,255,0.1);
  }
  .energy-head{
    display:flex;justify-content:space-between;align-items:baseline;
    margin-bottom:0.7rem;
  }
  .energy-label{font-family:var(--font-display);font-size:0.95rem;color:var(--text-primary);}
  .energy-opts{display:flex;gap:8px;flex-wrap:wrap;}
  .energy-opt{
    flex:1;min-width:70px;
    background:var(--bg-void);
    border:1px solid var(--border-glow);
    border-radius:10px;
    padding:9px 6px;
    text-align:center;
    cursor:pointer;color:var(--text-dim);
    font-size:0.78rem;
    transition:all 0.25s cubic-bezier(.2,.8,.2,1);
  }
  .energy-opt:hover{
    transform:translateY(-3px) scale(1.05);
    border-color:var(--violet);
    box-shadow:0 8px 20px rgba(179,120,255,0.15);
  }
  .energy-opt .ic{font-size:1.2rem;display:block;margin-bottom:2px;}
  .energy-opt.sel{
    color:#fff;border-color:var(--gold);background:rgba(255,200,96,0.12);
    box-shadow:0 0 12px -3px var(--gold);
  }
  .suggestion{
    margin-top:0.8rem;
    padding:9px 12px;
    border-radius:10px;
    background:rgba(99,184,255,0.1);
    border:1px solid rgba(99,184,255,0.3);
    color:var(--sky);
    font-size:0.8rem;
    display:none;
  }
  .suggestion.show{display:block;}
  .clepsydre-input-row{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  }
  .clepsydre-step{
    width:34px;height:34px;border-radius:10px;flex-shrink:0;
    border:1px solid var(--border-glow);background:var(--bg-void);
    color:var(--rose);font-size:1.1rem;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
  }
  .clepsydre-step:hover{border-color:var(--rose);transform:translateY(-2px);}
  #clepsydreHoursInput{
    width:72px;text-align:center;font-family:var(--font-mono);font-size:1rem;
    background:var(--bg-void);border:1px solid var(--border-glow);border-radius:10px;
    color:var(--text-primary);padding:8px 4px;
  }
  .clepsydre-unit{color:var(--text-dim);font-size:0.85rem;}
  #clepsydreSaveBtn{margin-left:auto;}
  .clepsydre-cal-head{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:0.8rem;
  }
  .clepsydre-cal-month{
    font-family:var(--font-display);font-size:0.95rem;color:var(--text-primary);
    text-transform:capitalize;
  }
  .clepsydre-cal-weekdays{
    display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
    text-align:center;font-size:0.68rem;color:var(--text-faint);
    margin-bottom:4px;
  }
  .clepsydre-cal-grid{
    display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
  }
  .clepsydre-cal-day{
    aspect-ratio:1;border-radius:8px;border:1px solid var(--border-soft);
    background:var(--bg-void);color:var(--text-dim);cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
    font-size:0.72rem;transition:all 0.2s cubic-bezier(.2,.8,.2,1);
    padding:2px;
  }
  .clepsydre-cal-day:hover{border-color:var(--rose);transform:translateY(-1px);}
  .clepsydre-cal-day .d{font-family:var(--font-mono);}
  .clepsydre-cal-day .h{font-size:0.6rem;color:var(--rose);font-weight:600;}
  .clepsydre-cal-day.is-today{border-color:var(--gold);}
  .clepsydre-cal-day.is-selected{border-color:var(--rose);box-shadow:0 0 10px -2px var(--rose);}
  .clepsydre-cal-day.over{border-color:var(--gold);}
  .clepsydre-cal-day.over .h{color:var(--gold);}
  .energy-log{
    display:flex;gap:6px;flex-wrap:wrap;margin-top:0.6rem;
  }
  .energy-chip{
    display:flex;align-items:center;gap:5px;
    background:var(--bg-void);
    border:1px solid var(--border-glow);
    border-radius:14px;
    padding:3px 8px 3px 10px;
    font-size:0.72rem;font-family:var(--font-mono);
    color:var(--text-dim);
  }
  .energy-chip .rm{
    background:none;border:none;color:var(--text-faint);cursor:pointer;
    font-size:0.8rem;padding:0 2px;line-height:1;
  }
  .energy-chip .rm:hover{color:var(--danger);}
  .energy-breakdown{
    margin-top:0.7rem;font-size:0.72rem;color:var(--text-faint);
    text-align:center;
  }

  .bilan-head{
    font-size:0.72rem;color:var(--text-faint);
    text-transform:uppercase;letter-spacing:0.05em;
    margin-top:0.9rem;padding-top:0.9rem;
    border-top:1px solid var(--border-soft);
  }
  .bilan{
    display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
    margin-top:0.5rem;
  }
  .bilan-item{text-align:center;}
  .bilan-val{font-family:var(--font-mono);font-size:1.05rem;color:var(--text-primary);}
  .bilan-lbl{font-size:0.65rem;color:var(--text-faint);letter-spacing:0.02em;margin-top:2px;}

  .tabs{
    display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.25rem;
  }
  .quests-toolbar{
    display:flex;
    justify-content:flex-end;
    margin:0 0 1rem;
  }
  .quest-add-fab{
    display:flex;align-items:center;justify-content:center;
    gap:9px;min-height:44px;padding:0 18px;border-radius:12px;
    background:linear-gradient(135deg, var(--violet), var(--violet-dim));
    color:#fff;border:none;font-size:0.92rem;font-weight:700;line-height:1;
    cursor:pointer;margin:0;
    box-shadow:0 4px 16px rgba(179,120,255,0.4);
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
  }
  .quest-add-icon{font-size:1.35rem;font-weight:400;line-height:1;}
  .quest-add-fab:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(179,120,255,0.55);}
  .quest-add-fab:focus-visible{outline:3px solid rgba(255,200,96,0.85);outline-offset:3px;}
  .companion-panel{
    display:flex;align-items:center;gap:1.1rem;
    background:linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel));
    border:1px solid var(--border-glow);
    border-radius:16px;
    padding:1.1rem 1.25rem;
    margin-bottom:1.25rem;
  }
  .companion-desc{font-size:0.8rem;color:var(--text-dim);line-height:1.4;}
  .tab{
    font-family:var(--font-body);
    font-size:0.85rem;
    padding:8px 14px;
    border-radius:20px;
    border:1px solid var(--border-glow);
    background:var(--bg-panel);
    color:var(--text-dim);
    cursor:pointer;
    transition:all 0.15s;
    display:flex;align-items:center;gap:6px;
  }
  .tab .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
  .tab-del{
    font-size:0.65rem;color:var(--text-faint);margin-left:4px;
    padding:1px 3px;border-radius:4px;
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
  }
  .tab-del:hover{
    color:var(--danger);
    transform:scale(1.15);
  }
  .tab-edit{
    font-size:0.65rem;color:var(--text-faint);margin-left:4px;
    padding:1px 3px;border-radius:4px;
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
  }
  .tab-edit:hover{
    color:var(--text-primary);
    transform:scale(1.15);
  }
  .tab.active{
    color:var(--text-primary);
    border-color:currentColor;
    background:var(--bg-panel-2);
    box-shadow:0 0 10px -2px currentColor;
  }
  .tab.add-tab{border-style:dashed;color:var(--text-faint);}
  .tab.add-tab:hover{color:var(--violet);border-color:var(--violet);}

  .util-row{display:flex;gap:8px;justify-content:center;margin-bottom:1.25rem;}

  .panel{
    background:var(--bg-panel);
    border:1px solid var(--border-soft);
    border-radius:16px;
    padding:1.25rem;
    min-height:120px;
    transition:all 0.3s cubic-bezier(.2,.8,.2,1);
  }
  .panel:hover{
    border-color:var(--border-glow);
    box-shadow:0 4px 16px rgba(179,120,255,0.08);
  }
  .quest{
    display:flex;align-items:center;gap:12px;
    padding:12px 8px;
    border-bottom:1px solid var(--border-soft);
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
    border-radius:6px;
    cursor:pointer;
  }
  .quest:hover:not(.completed){
    background:rgba(179,120,255,0.05);
  }
  .quest:last-child{border-bottom:none;}
  .quest.completed{opacity:0.45;}

  .quest-section{margin-bottom:0.5rem;}
  .quest-section-head{
    display:flex;align-items:center;gap:8px;width:100%;
    background:transparent;border:none;
    padding:10px 6px;cursor:pointer;
    font-family:var(--font-display);font-size:0.92rem;color:var(--text-primary);
    text-align:left;border-bottom:1px solid var(--border-glow);
  }
  .quest-section-chevron{font-size:0.65rem;color:var(--text-faint);flex-shrink:0;}
  .quest-section-icon{font-size:0.95rem;flex-shrink:0;}
  .quest-section-count{
    font-family:var(--font-mono);font-size:0.72rem;color:var(--text-faint);
    background:var(--bg-panel-2);border-radius:10px;padding:1px 8px;flex-shrink:0;
  }
  .quest-section-body .quest:last-child{border-bottom:1px solid var(--border-soft);}
  .quest-section:last-child .quest-section-body .quest:last-child{border-bottom:none;}
  .quest.completed .qtitle{text-decoration:line-through;}
  .check{
    width:24px;height:24px;border-radius:7px;
    border:2px solid var(--border-glow);
    background:transparent;
    cursor:pointer;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    color:transparent;
    transition:all 0.25s cubic-bezier(.2,.8,.2,1);
    font-size:14px;
  }
  .check:hover{
    border-color:var(--violet);
    box-shadow:0 0 10px rgba(179,120,255,0.2);
    transform:scale(1.1);
  }
  .quest.completed .check{
    background:var(--teal);border-color:var(--teal);color:#0c2b24;
    box-shadow:0 0 12px rgba(79,224,192,0.3);
  }
  .qtitle{flex:1;font-size:0.92rem;color:var(--text-primary);}
  .qmeta{display:flex;align-items:center;gap:8px;flex-shrink:0;}
  .xpbadge{
    font-family:var(--font-mono);font-size:0.72rem;
    padding:2px 8px;border-radius:10px;
    background:var(--bg-void);color:var(--gold);
    border:1px solid rgba(255,200,96,0.3);
  }
  .recur-tag{
    font-size:0.65rem;color:var(--sky);letter-spacing:0.03em;
  }
  .recur-next-tag{
    font-size:0.65rem;color:var(--text-faint);letter-spacing:0.02em;
    font-family:var(--font-mono);
  }
  .victory-badge{
    font-size:0.62rem;color:var(--text-faint);font-family:var(--font-mono);
    letter-spacing:0.02em;
  }
  .victory-badge.milestone{
    color:var(--gold);font-weight:600;
  }
  .timebadge{
    font-family:var(--font-mono);font-size:0.72rem;
    padding:2px 8px;border-radius:10px;
    background:var(--bg-void);color:var(--sky);
    border:1px solid rgba(99,184,255,0.3);
  }
  .load-dots{display:flex;gap:3px;align-items:center;}
  .load-dots span{width:6px;height:6px;border-radius:50%;background:var(--border-glow);}
  .load-dots span.on{background:var(--rose);}
  .conseil-tag{
    font-size:0.65rem;color:#1a2b12;background:var(--teal);
    padding:2px 7px;border-radius:8px;font-weight:600;
  }
  .obligatoire-tag{
    font-size:0.65rem;color:#fff;background:var(--danger);
    padding:2px 7px;border-radius:8px;font-weight:600;
  }
  .priority-tag{
    font-size:0.65rem;color:#1a120a;background:var(--gold);
    padding:2px 7px;border-radius:8px;font-weight:600;
  }
  .priority-btn{
    background:none;border:none;color:var(--text-faint);
    cursor:pointer;font-size:0.9rem;padding:2px 4px;
  }
  .priority-btn:hover{color:var(--gold);}
  .overdue-tag{
    font-size:0.65rem;color:#fff;background:var(--danger);
    padding:2px 7px;border-radius:8px;font-weight:600;
  }
  .duedate-tag{
    font-size:0.65rem;color:var(--gold);font-family:var(--font-mono);
  }
  .neglected-tag{
    font-size:0.65rem;color:#3a2500;background:var(--gold);
    padding:2px 7px;border-radius:8px;font-weight:600;
  }
  .quest-sub{
    margin-left:26px;
    border-left:2px solid var(--border-glow);
    padding-left:10px;
    opacity:0.92;
  }
  .subquest-btn{
    background:transparent;border:none;color:var(--text-faint);
    cursor:pointer;font-size:0.85rem;padding:2px 4px;flex-shrink:0;
    transition:color 0.2s;
  }
  .subquest-btn:hover{color:var(--teal);}
  .duplicate-btn{
    background:transparent;border:none;color:var(--text-faint);
    cursor:pointer;font-size:0.85rem;padding:2px 4px;flex-shrink:0;
    transition:color 0.2s;
  }
  .duplicate-btn:hover{color:var(--violet);}
  .urgent-tag{
    font-size:0.65rem;color:#fff;background:var(--danger);
    padding:2px 7px;border-radius:8px;font-weight:600;
  }
  .important-tag{
    font-size:0.65rem;color:#3a2500;background:var(--gold);
    padding:2px 7px;border-radius:8px;font-weight:600;
  }
  .quest.urgent{border-left:3px solid var(--danger);padding-left:5px;}
  .del{
    background:none;border:none;color:var(--text-faint);
    cursor:pointer;font-size:1rem;padding:2px 6px;
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
  }
  .del:hover{
    color:var(--danger);
    transform:scale(1.2) rotate(10deg);
  }
  .empty{
    text-align:center;color:var(--text-faint);
    padding:2rem 0;font-size:0.9rem;font-family:var(--font-display);
    font-style:italic;
  }

  .add-form{
    margin-top:1rem;padding-top:1rem;
    border-top:1px solid var(--border-soft);
    display:flex;flex-direction:column;gap:14px;
  }
  .form-group{display:flex;flex-direction:column;gap:6px;}
  .add-row{display:flex;gap:8px;flex-wrap:wrap;}
  .bottom-row{align-items:center;justify-content:space-between;margin-top:2px;}
  input[type=text],input[type=number]{
    flex:1;min-width:160px;
    background:var(--bg-void);
    border:1px solid var(--border-glow);
    border-radius:8px;
    padding:10px 12px;
    color:var(--text-primary);
    font-size:0.9rem;font-family:var(--font-body);
    transition:all 0.25s cubic-bezier(.2,.8,.2,1);
  }
  input[type=text]:hover,input[type=number]:hover{
    border-color:var(--border-glow);
    box-shadow:0 0 10px rgba(179,120,255,0.1);
  }
  input[type=text]:focus,input[type=number]:focus{
    outline:none;
    border-color:var(--violet);
    box-shadow:0 0 16px rgba(179,120,255,0.3);
  }
  .diff-btns{display:flex;gap:6px;}
  .diff-btn{
    background:var(--bg-void);border:1px solid var(--border-glow);
    color:var(--text-dim);border-radius:8px;padding:9px 12px;
    font-size:0.78rem;cursor:pointer;font-family:var(--font-mono);
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
  }
  .diff-btn:hover:not(.sel){
    transform:translateY(-2px);
    border-color:var(--violet);
    box-shadow:0 4px 12px rgba(179,120,255,0.1);
  }
  .diff-btn.sel{color:#1a120a;background:var(--gold);border-color:var(--gold);font-weight:600;}
  .time-btn.sel{color:#0a1f2e;background:var(--sky);border-color:var(--sky);font-weight:600;}
  .load-btn.sel{color:#2e0a16;background:var(--rose);border-color:var(--rose);font-weight:600;}
  .form-label{font-size:0.72rem;color:var(--text-faint);margin-bottom:4px;display:block;}
  .recur-toggle{
    display:flex;align-items:flex-start;gap:8px;font-size:0.78rem;color:var(--text-dim);cursor:pointer;
    line-height:1.35;
  }
  .modal-checks{
    display:flex;flex-direction:column;gap:12px;
    margin:14px 0;padding:14px 16px;
    background:var(--bg-panel-2);border-radius:10px;
    border:1px solid var(--border-soft);
  }
  .recur-toggle input{accent-color:var(--sky);margin-top:2px;flex-shrink:0;width:15px;height:15px;}

  .subquest-ratings-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;
  }
  .subquest-ratings-grid .diff-btns{gap:4px;}
  .subquest-ratings-grid .rating-btn{min-width:0;flex:1;padding:8px 2px;font-size:0.72rem;}
  .subquest-priority-toggle{
    background:var(--bg-panel-2);border:1px solid var(--border-glow);
    border-radius:10px;padding:10px 14px;margin:4px 0 12px;
    font-size:0.85rem;color:var(--text-primary);
  }
  .subquest-priority-toggle input{width:16px;height:16px;flex-shrink:0;}
  @media (max-width:520px){
    .subquest-ratings-grid{grid-template-columns:1fr;}
  }
  .urgent-btn.sel{color:#fff;background:var(--danger);border-color:var(--danger);font-weight:600;}
  .important-btn.sel{color:#3a2500;background:var(--gold);border-color:var(--gold);font-weight:600;}
  .submit-btn{
    background:linear-gradient(120deg,var(--violet-dim),var(--violet));
    color:#fff;border:none;border-radius:8px;
    padding:10px 16px;font-size:0.85rem;font-weight:600;cursor:pointer;
    letter-spacing:0.02em;
    transition:all 0.25s cubic-bezier(.2,.8,.2,1);
    box-shadow:0 4px 15px rgba(179,120,255,0.3);
  }
  .submit-btn:hover{
    filter:brightness(1.15);
    transform:translateY(-2px);
    box-shadow:0 8px 25px rgba(179,120,255,0.5);
  }
  .submit-btn:active{
    transform:translateY(0);
  }

  .footer-note{
    text-align:center;color:var(--text-faint);font-size:0.75rem;
    margin-top:2rem;line-height:1.6;
  }
  .data-io{
    display:flex;gap:10px;justify-content:center;margin-top:1rem;flex-wrap:wrap;
  }
  .io-btn{
    background:transparent;
    border:1px solid var(--border-glow);
    color:var(--text-dim);
    border-radius:8px;
    padding:8px 14px;
    font-size:0.78rem;
    cursor:pointer;
    font-family:var(--font-body);
    transition:all 0.25s cubic-bezier(.2,.8,.2,1);
  }
  .io-btn:hover{
    color:var(--violet);
    border-color:var(--violet);
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(179,120,255,0.2);
  }

  .overlay{
    position:fixed;inset:0;
    background:rgba(10,6,18,0.75);
    display:none;align-items:center;justify-content:center;
    z-index:100;
  }
  .overlay.show{display:flex;}
  .scroll{
    background:linear-gradient(160deg,#2b1c48,#1a1128);
    border:2px solid var(--gold);
    border-radius:18px;
    padding:2.5rem 2rem;
    text-align:center;
    max-width:320px;
    box-shadow:0 0 60px rgba(255,200,96,0.4);
    animation:pop 0.5s cubic-bezier(.2,.9,.3,1.4);
  }
  @keyframes pop{
    from{
      transform:scale(0.7) rotateY(30deg);
      opacity:0;
    }
    to{
      transform:scale(1) rotateY(0deg);
      opacity:1;
    }
  }
  .scroll .up{font-family:var(--font-display);color:var(--gold);font-size:0.8rem;letter-spacing:0.15em;text-transform:uppercase;}
  .scroll .newlvl{font-family:var(--font-display);font-size:2.6rem;color:#fff;margin:0.4rem 0;}
  .scroll .rankname{color:var(--violet);font-size:0.95rem;margin-bottom:1.25rem;}
  .scroll button{
    background:var(--gold);color:#3a2500;border:none;border-radius:8px;
    padding:9px 20px;font-weight:600;cursor:pointer;font-size:0.85rem;
    transition:all 0.25s cubic-bezier(.2,.8,.2,1);
    box-shadow:0 4px 12px rgba(255,200,96,0.3);
  }
  .scroll button:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(255,200,96,0.5);
    filter:brightness(1.1);
  }

  dialog{
    border:1px solid var(--border-glow);border-radius:14px;
    background:var(--bg-panel);color:var(--text-primary);
    padding:1.25rem;max-width:280px;
  }
  dialog::backdrop{background:rgba(10,6,18,0.6);}
  dialog .dialog-title{font-family:var(--font-display);font-size:1.1rem;margin-bottom:6px;}
  dialog input{width:100%;margin:10px 0;}
  dialog .row{display:flex;gap:8px;justify-content:flex-end;}
  dialog button{
    border:none;border-radius:8px;padding:8px 14px;cursor:pointer;font-size:0.85rem;
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
  }
  .cancel-btn{
    background:var(--bg-void);color:var(--text-dim);
  }
  .cancel-btn:hover{
    background:var(--bg-panel-2);
    color:var(--text-primary);
    transform:translateY(-2px);
  }
  .ok-btn{
    background:var(--violet);color:#fff;font-weight:600;
    box-shadow:0 4px 12px rgba(179,120,255,0.2);
    border:none;border-radius:8px;padding:8px 14px;cursor:pointer;font-size:0.85rem;
    -webkit-appearance:none;appearance:none;
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
    font-family:inherit;
  }
  .ok-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(179,120,255,0.4);
    filter:brightness(1.1);
  }

  .big-dialog{max-width:460px;width:90vw;}
  .dialog-scroll{max-height:220px;overflow-y:auto;margin:8px 0 4px;flex-shrink:0;}
  .empty-small{color:var(--text-faint);font-size:0.8rem;text-align:center;padding:1rem 0;font-style:italic;}

  .trash-section-title{
    font-size:0.72rem;color:var(--text-faint);
    text-transform:uppercase;letter-spacing:0.05em;
    margin-top:0.8rem;
  }
  .stats-overview{
    display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
    margin:8px 0 4px;
  }
  .stats-overview .stat-item{text-align:center;}
  .stats-overview .stat-val{font-family:var(--font-mono);font-size:1.05rem;color:var(--text-primary);}
  .stats-overview .stat-lbl{font-size:0.62rem;color:var(--text-faint);letter-spacing:0.02em;margin-top:2px;}
  .stats-canvas{width:100%;display:block;margin-top:6px;}
  .stats-bars{margin-top:6px;}
  .stat-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:0.78rem;}
  .stat-bar-label{flex:0 0 92px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .stat-bar-track{flex:1;height:8px;border-radius:6px;background:var(--bg-panel);border:1px solid var(--border-soft);overflow:hidden;}
  .stat-bar-fill{height:100%;border-radius:6px;}
  .stat-bar-count{flex:0 0 auto;color:var(--text-faint);font-family:var(--font-mono);font-size:0.72rem;}
  .trash-item{
    display:flex;justify-content:space-between;align-items:center;gap:8px;
    padding:8px 4px;border-bottom:1px solid var(--border-soft);
  }
  .trash-item:last-child{border-bottom:none;}
  .trash-item-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .trash-item-title{font-size:0.85rem;color:var(--text-primary);}
  .trash-item-date{font-size:0.68rem;color:var(--text-faint);font-family:var(--font-mono);}
  .trash-item-actions{display:flex;gap:6px;flex-shrink:0;}
  .restore-btn, .forever-btn{
    font-size:0.7rem;padding:5px 9px;border-radius:7px;border:1px solid var(--border-glow);
    background:var(--bg-void);color:var(--text-dim);cursor:pointer;
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
  }
  .restore-btn:hover{
    color:var(--teal);
    border-color:var(--teal);
    transform:scale(1.08);
    box-shadow:0 4px 10px rgba(79,224,192,0.2);
  }
  .forever-btn:hover{
    color:var(--danger);
    border-color:var(--danger);
    transform:scale(1.08);
    box-shadow:0 4px 10px rgba(255,103,103,0.2);
  }

  .archive-group{margin-bottom:12px;}
  .archive-date{
    font-family:var(--font-display);font-size:0.85rem;color:var(--violet);
    margin-bottom:6px;text-transform:capitalize;
  }
  .archive-energy-row{
    font-size:0.72rem;color:var(--text-faint);font-family:var(--font-mono);
    margin-bottom:6px;padding-bottom:6px;border-bottom:1px dashed var(--border-soft);
  }
  .archive-item{
    display:flex;justify-content:space-between;gap:8px;
    padding:6px 4px;border-bottom:1px solid var(--border-soft);
    font-size:0.82rem;
  }
  .archive-item:last-child{border-bottom:none;}
  .archive-item-title{color:var(--text-primary);}
  .archive-item-meta{color:var(--text-faint);font-family:var(--font-mono);font-size:0.72rem;white-space:nowrap;}
  .archive-item-del{
    background:none;border:none;color:var(--text-faint);
    cursor:pointer;font-size:0.85rem;padding:0 2px;flex-shrink:0;
    transition:color 0.2s;
  }
  .archive-item-del:hover{color:var(--danger);}

  .notes-tag{cursor:help;font-size:0.8rem;}
  .reward-notes{font-size:0.72rem;color:var(--text-faint);font-style:italic;margin-bottom:6px;}
  .category-progress-list .mission-item{padding:10px 4px;}

  .quote-today{
    background:var(--bg-panel-2);border:1px solid var(--border-glow);
    border-radius:10px;padding:12px 14px;margin:8px 0 4px;
    font-size:0.88rem;color:var(--text-primary);font-style:italic;
    text-align:center;line-height:1.5;
  }
  .quote-history-item{
    padding:8px 4px;border-bottom:1px solid var(--border-soft);
    font-size:0.82rem;
  }
  .quote-history-item:last-child{border-bottom:none;}
  .quote-history-date{
    font-family:var(--font-display);font-size:0.78rem;color:var(--violet);
    margin-bottom:2px;text-transform:capitalize;
  }
  .quote-history-text{color:var(--text-dim);font-style:italic;}

  .bank-pill{
    font-size:0.75rem;color:var(--gold);font-family:var(--font-mono);
    background:var(--bg-panel-2);border:1px solid var(--border-soft);
    border-radius:20px;padding:2px 9px;width:fit-content;
  }
  .streak-pause-btn{
    font-size:0.68rem;font-family:var(--font-mono);color:var(--text-faint);
    background:transparent;border:1px solid var(--border-glow);
    border-radius:20px;padding:2px 9px;width:fit-content;cursor:pointer;
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
  }
  .streak-pause-btn:hover{border-color:var(--violet);color:var(--text-primary);}
  .streak-pause-btn.paused{
    color:var(--gold);border-color:var(--gold);
    background:rgba(255,200,96,0.1);
  }
  .merited-rest-badge{
    font-size:0.68rem;font-family:var(--font-mono);color:var(--teal);
    background:rgba(79,224,192,0.12);border:1px solid rgba(79,224,192,0.35);
    border-radius:20px;padding:2px 9px;width:fit-content;
  }

  .bank-balance{text-align:center;margin:8px 0 4px;}
  .bank-balance-lbl{font-size:0.72rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.05em;}
  .bank-balance-val{font-family:var(--font-display);font-size:2rem;color:var(--gold);margin-top:2px;}
  .bank-amount-gain{color:var(--teal)!important;}
  .bank-amount-spend{color:var(--danger)!important;}

  .mission-item{
    padding:10px 4px;border-bottom:1px solid var(--border-soft);
  }
  .mission-item:last-child{border-bottom:none;}
  .mission-item-head{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
  .mission-item-title{flex:1;color:var(--text-primary);font-size:0.88rem;font-weight:600;}
  .mission-done-tag{font-size:0.68rem;color:var(--teal);font-family:var(--font-mono);white-space:nowrap;}
  .mission-item-cat{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
  .mission-item-cat .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

  .cat-titles-list{
    display:flex;flex-direction:column;gap:8px;
    margin:0.6rem 0 1.5rem;
  }
  .cat-title-row{
    display:flex;align-items:center;gap:8px;
    font-size:0.8rem;color:var(--text-dim);font-family:var(--font-display);
  }
  .cat-title-row .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
  .mission-cat-label{font-size:0.72rem;color:var(--text-faint);}
  .mission-bar-track{height:8px;}
  .mission-item-progress{font-size:0.72rem;color:var(--text-faint);font-family:var(--font-mono);margin-top:4px;}

  .guide-section{padding:10px 2px;border-bottom:1px solid var(--border-soft);}
  .guide-section:last-child{border-bottom:none;}
  .guide-section-title{font-family:var(--font-display);font-size:0.92rem;color:var(--violet);margin-bottom:4px;}
  .guide-section-body{font-size:0.82rem;color:var(--text-dim);line-height:1.5;}

  .recur-freq-select{
    background:var(--bg-void);color:var(--text-primary);
    border:1px solid var(--border-glow);border-radius:8px;
    padding:8px 10px;font-size:0.82rem;font-family:inherit;cursor:pointer;
  }

  .styled-select{
    background:var(--bg-void);color:var(--text-primary);
    border:1px solid var(--border-glow);border-radius:8px;
    padding:9px 34px 9px 12px;font-size:0.85rem;font-family:inherit;
    cursor:pointer;width:100%;box-sizing:border-box;
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
    -webkit-appearance:none;-moz-appearance:none;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0 L5 6 L10 0 Z' fill='%23b378ff'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;
  }
  .cat-add-btn{
    background:var(--bg-void);color:var(--text-faint);
    border:1px dashed var(--border-glow);border-radius:8px;
    padding:9px 12px;font-size:0.85rem;font-family:inherit;
    cursor:pointer;width:100%;box-sizing:border-box;text-align:left;
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
  }
  .cat-add-btn:hover{color:var(--violet);border-color:var(--violet);}
  select.styled-select{color-scheme:dark;}
  .styled-select:hover{border-color:var(--violet);}
  .styled-select:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 2px var(--border-glow);}
  .styled-select option{background:var(--bg-panel);color:var(--text-primary);}
  input.styled-select{background-image:none;padding:9px 12px;}
  input.styled-select::-webkit-calendar-picker-indicator{filter:invert(0.7) sepia(1) saturate(4) hue-rotate(220deg);cursor:pointer;}

  .rating-btn{min-width:38px;text-align:center;}

  .capacity-panel{
    background:var(--bg-panel-2);border:1px solid var(--border-soft);
    border-radius:10px;padding:10px 14px;margin:10px 0 6px;
  }
  .capacity-row{
    display:flex;justify-content:space-between;font-size:0.8rem;
    color:var(--text-dim);margin-bottom:6px;
  }
  .capacity-row:last-of-type{margin-bottom:8px;}
  .capacity-row span:last-child{color:var(--text-primary);font-family:var(--font-mono);font-weight:600;}

  .score-mini{
    font-family:var(--font-mono);font-size:0.66rem;color:var(--text-faint);
    padding:2px 7px;border-radius:8px;background:var(--bg-void);
    border:1px solid var(--border-soft);white-space:nowrap;
  }
  .mission-tag{
    font-size:0.65rem;color:var(--violet);background:var(--bg-void);
    padding:2px 7px;border-radius:8px;border:1px solid var(--border-glow);
    white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis;
  }
  .cat-tag{
    display:inline-flex;align-items:center;gap:4px;
    font-size:0.65rem;background:var(--bg-void);
    padding:2px 7px;border-radius:8px;border:1px solid var(--border-glow);
    white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis;
  }
  .cat-tag .cat-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}

  .chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
  .sel-chip{
    display:flex;align-items:center;gap:6px;
    background:var(--bg-panel-2);border:1px solid var(--border-glow);
    border-radius:16px;padding:3px 6px 3px 10px;
    font-size:0.75rem;
  }
  .sel-chip-label{
    color:var(--text-primary);cursor:pointer;
    max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .sel-chip-label:hover{color:var(--violet);text-decoration:underline;}
  .sel-chip-del{
    background:transparent;border:none;color:var(--text-faint);
    cursor:pointer;font-size:0.68rem;padding:2px;line-height:1;flex-shrink:0;
  }
  .sel-chip-del:hover{color:var(--danger);}
  .pause-btn{
    background:none;border:none;color:var(--text-faint);
    cursor:pointer;font-size:0.85rem;padding:2px 4px;
  }
  .pause-btn:hover{color:var(--violet);}

  .mission-days-remaining{font-size:0.72rem;color:var(--text-faint);}
  .mission-done-tag{
    font-size:0.65rem;color:#1a2b12;background:var(--teal);
    padding:2px 7px;border-radius:8px;font-weight:600;white-space:nowrap;
  }
  .mission-ongoing-tag{
    font-size:0.65rem;color:var(--text-dim);background:var(--bg-void);
    padding:2px 7px;border-radius:8px;border:1px solid var(--border-soft);white-space:nowrap;
  }
  .mission-late-tag{
    font-size:0.65rem;color:#fff;background:var(--danger);
    padding:2px 7px;border-radius:8px;font-weight:600;white-space:nowrap;
  }

  .reward-item{padding:10px 4px;border-bottom:1px solid var(--border-soft);}
  .reward-item:last-child{border-bottom:none;}
  .reward-item-head{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
  .reward-item-title{flex:1;color:var(--text-primary);font-size:0.88rem;font-weight:600;}
  .reward-type-tag{
    font-size:0.65rem;color:var(--text-dim);background:var(--bg-void);
    padding:2px 7px;border-radius:8px;border:1px solid var(--border-soft);white-space:nowrap;
  }
  .reward-item-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px;}
  .reward-cost{font-family:var(--font-mono);font-size:0.78rem;color:var(--gold);}
  .reward-available-tag{
    font-size:0.65rem;color:#1a2b12;background:var(--teal);
    padding:2px 7px;border-radius:8px;font-weight:600;
  }
  .reward-locked-tag{
    font-size:0.65rem;color:var(--text-faint);background:var(--bg-void);
    padding:2px 7px;border-radius:8px;border:1px solid var(--border-soft);
  }
  .reward-missing{font-size:0.7rem;color:var(--text-faint);}
  .reward-last-used{font-size:0.68rem;color:var(--text-faint);margin-bottom:6px;}
  .reward-item-actions{gap:6px;}
  .restore-btn[disabled]{opacity:0.4;cursor:not-allowed;}

  .page-nav{
    display:flex;gap:6px;margin-bottom:1.5rem;
    background:var(--bg-panel);border:1px solid var(--border-glow);
    border-radius:14px;padding:5px;
  }
  .page-nav-btn{
    flex:1;background:transparent;border:none;border-radius:10px;
    color:var(--text-faint);font-family:var(--font-display);font-size:0.9rem;
    padding:10px;cursor:pointer;transition:all 0.2s;
  }
  .page-nav-btn.active{background:var(--bg-panel-2);color:var(--text-primary);box-shadow:0 0 0 1px var(--border-glow) inset;}
  .page-nav-btn:hover{color:var(--text-primary);}

  .page-view{display:none;}
  .page-view.active{display:block;animation:pageFadeIn 0.3s ease;}
  @keyframes pageFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

  .progression-header{text-align:center;margin-bottom:1.5rem;}
  .progression-title{font-family:var(--font-display);font-size:1.4rem;color:var(--text-primary);margin-bottom:4px;
    background:linear-gradient(135deg,var(--title-grad-1),var(--title-grad-2));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
  .progression-subtitle{font-size:0.85rem;color:var(--text-faint);}
  .stats-section-title{
    font-family:var(--font-display);font-size:1.05rem;color:var(--gold);
    margin:1.5rem 0 0.5rem;padding-top:1rem;border-top:1px solid var(--border-soft);
  }
  .stats-section-title:first-of-type{border-top:none;padding-top:0;margin-top:1rem;}

  .chronicle-list{
    display:flex;flex-direction:column;gap:2px;
    max-height:260px;overflow-y:auto;
    background:var(--bg-panel);border:1px solid var(--border-soft);
    border-radius:14px;padding:0.4rem 0.9rem;margin-bottom:1.5rem;
  }
  .chronicle-entry{
    font-size:0.8rem;color:var(--text-dim);line-height:1.6;
    padding:7px 0;border-bottom:1px solid var(--border-soft);
    font-family:var(--font-display);
  }
  .chronicle-entry:last-child{border-bottom:none;}

  .streak-heatmap{
    background:var(--bg-panel);border:1px solid var(--border-soft);
    border-radius:14px;padding:0.9rem;margin-bottom:1.5rem;
    overflow-x:auto;
  }
  .heatmap-grid{
    display:grid;
    grid-template-rows:repeat(7, 11px);
    grid-auto-flow:column;
    gap:3px;
    width:max-content;
    margin:0 auto;
  }
  .heatmap-cell{
    width:11px;height:11px;border-radius:3px;
    background:var(--bg-void);border:1px solid var(--border-soft);
  }
  .heatmap-cell.level-1{background:rgba(79,224,192,0.25);border-color:transparent;}
  .heatmap-cell.level-2{background:rgba(79,224,192,0.5);border-color:transparent;}
  .heatmap-cell.level-3{background:rgba(79,224,192,0.78);border-color:transparent;}
  .heatmap-cell.level-4{background:var(--teal);border-color:transparent;}
  .heatmap-cell.paused{background:var(--gold);border-color:transparent;}
  .heatmap-legend{
    display:flex;align-items:center;justify-content:center;gap:4px;
    margin-top:10px;font-size:0.65rem;color:var(--text-faint);
  }
  .heatmap-legend .heatmap-cell{width:9px;height:9px;}

  @media (max-width:640px){
    .heatmap-grid{grid-template-rows:repeat(7, 9px);}
    .heatmap-cell{width:9px;height:9px;}
  }

  .system-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  }
  .system-card{
    position:relative;
    display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
    background:var(--bg-panel);border:1px solid var(--border-glow);
    border-radius:16px;padding:20px 12px;cursor:pointer;
    transition:all 0.25s cubic-bezier(.2,.8,.2,1);
  }
  .system-card:hover{
    transform:translateY(-3px);
    border-color:var(--violet);
    box-shadow:0 8px 24px -8px var(--border-glow);
    background:var(--bg-panel-2);
  }
  .system-card-icon{font-size:1.8rem;}
  .system-card-title{font-family:var(--font-display);font-size:0.9rem;color:var(--text-primary);}
  .system-card-sub{font-size:0.68rem;color:var(--text-faint);line-height:1.3;}
  .system-card-badge{
    position:absolute;top:8px;right:8px;
    min-width:18px;height:18px;padding:0 5px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg, var(--gold), #b8860b);
    color:#1a1225;font-family:var(--font-mono);font-size:0.68rem;font-weight:700;
    border-radius:999px;box-shadow:0 0 8px -1px var(--gold);
    animation:friendsBadgePulse 2s ease-in-out infinite;
  }
  @keyframes friendsBadgePulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.12);}
  }

  @media (max-width: 640px){
    .system-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
    .system-card{padding:16px 8px;}
    .system-card-icon{font-size:1.5rem;}
    .page-nav{
      flex-wrap:wrap;
    }
    .page-nav-btn{
      flex:1 1 calc(33.333% - 6px);white-space:normal;
      font-size:0.76rem;padding:8px 6px;min-width:0;line-height:1.2;
    }
  }

  .badges-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
    margin:8px 0 4px;max-height:320px;overflow-y:auto;
  }
  .badge-card{
    background:var(--bg-void);border:1px solid var(--border-glow);
    border-radius:12px;padding:10px 8px;text-align:center;
    opacity:0.45;
    transition:all 0.3s cubic-bezier(.2,.8,.2,1);
  }
  .badge-card:hover{
    opacity:0.6;
    transform:translateY(-2px);
  }
  .badge-card.unlocked{
    opacity:1;
    border-color:var(--gold);
    box-shadow:0 0 10px -3px var(--gold);
  }
  .badge-card.unlocked:hover{
    transform:scale(1.05);
    box-shadow:0 0 16px -2px var(--gold);
  }
  .custom-reward-card{position:relative;}
  .custom-reward-del{
    position:absolute;top:4px;right:4px;
    background:transparent;border:none;color:var(--text-faint);
    font-size:0.7rem;cursor:pointer;padding:2px 4px;
  }
  .custom-reward-del:hover{color:var(--danger);}
  .custom-reward-form{
    display:flex;gap:8px;flex-wrap:wrap;margin:0.4rem 0 1rem;
  }
  .custom-reward-icon-input{
    width:44px;flex-shrink:0;text-align:center;
    background:var(--bg-void);border:1px solid var(--border-glow);
    border-radius:8px;color:var(--text-primary);font-size:1.1rem;padding:6px 0;
  }
  .custom-reward-form input[type="text"]:not(.custom-reward-icon-input){flex:2;min-width:120px;}
  .custom-reward-form input[type="number"]{flex:1;min-width:90px;}
  .custom-reward-form input{
    background:var(--bg-void);border:1px solid var(--border-glow);
    border-radius:8px;color:var(--text-primary);font-size:0.85rem;padding:8px 10px;
  }
  .badge-icon{font-size:1.6rem;margin-bottom:4px;}
  .badge-name{font-size:0.72rem;color:var(--text-primary);font-weight:600;margin-bottom:2px;}
  .badge-desc{font-size:0.62rem;color:var(--text-dim);line-height:1.3;}
  .badge-xp-tag{
    font-size:0.62rem;font-family:var(--font-mono);color:var(--gold);
    margin-top:4px;font-weight:600;
  }
  .badge-date{font-size:0.6rem;color:var(--gold);font-family:var(--font-mono);margin-top:4px;}

  .reward-buy-btn{
    margin-top:6px;
    background:linear-gradient(135deg, var(--violet), var(--violet-dim));
    color:#fff;border:none;border-radius:14px;
    padding:4px 10px;font-size:0.68rem;font-weight:600;
    font-family:var(--font-mono);cursor:pointer;
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
  }
  .reward-buy-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(179,120,255,0.4);}
  .reward-buy-btn.disabled{
    background:var(--bg-panel-2);color:var(--text-faint);
    cursor:not-allowed;opacity:0.6;
  }
  .reward-buy-btn.disabled:hover{transform:none;box-shadow:none;}
  .reward-redeem-count{
    font-size:0.6rem;color:var(--text-faint);margin-top:4px;font-family:var(--font-mono);
  }

  .gear-scroll{max-height:400px;}
  .gear-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
    margin:8px 0 16px;
  }
  .gear-card{
    background:var(--bg-void);border:1px solid var(--border-soft);
    border-radius:12px;padding:10px 8px;text-align:center;
    cursor:pointer;transition:all 0.25s cubic-bezier(.2,.8,.2,1);
    font-family:inherit;color:inherit;
  }
  .gear-card:hover{border-color:var(--border-glow);transform:translateY(-2px);}
  .gear-card.locked{opacity:0.4;cursor:not-allowed;}
  .gear-card.locked:hover{transform:none;border-color:var(--border-soft);}
  .gear-card.equipped{
    border-color:var(--teal);
    box-shadow:0 0 12px -3px var(--teal);
    background:var(--bg-panel-2);
  }
  .gear-card-icon{font-size:1.6rem;margin-bottom:4px;}
  .gear-card-name{font-size:0.72rem;color:var(--text-primary);font-weight:600;margin-bottom:2px;}
  .gear-card-meta{font-size:0.62rem;color:var(--text-faint);font-family:var(--font-mono);}
  .gear-card.equipped .gear-card-meta{color:var(--teal);}

  .equipment-badges{
    display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
    margin-top:8px;max-width:100px;
  }
  .equipment-badge{
    display:flex;align-items:center;justify-content:center;
    width:26px;height:26px;border-radius:50%;
    background:var(--bg-void);border:2px solid var(--border-glow);
    font-size:0.9rem;line-height:1;
  }

  .badge-toast{
    position:fixed;bottom:20px;right:20px;
    background:linear-gradient(160deg,var(--bg-panel-2),var(--bg-panel));
    border:1px solid var(--gold);border-radius:14px;
    padding:12px 16px;display:flex;align-items:center;gap:10px;
    box-shadow:0 0 30px -6px rgba(255,200,96,0.5);
    transform:translateY(120%);opacity:0;
    transition:transform 0.4s cubic-bezier(.2,.8,.2,1), opacity 0.4s ease;
    max-width:260px;z-index:200;
  }
  .badge-toast.show{transform:translateY(0);opacity:1;}
  .badge-toast-icon{font-size:1.8rem;flex-shrink:0;}
  .badge-toast-title{font-size:0.65rem;color:var(--gold);text-transform:uppercase;letter-spacing:0.05em;}
  .badge-toast-name{font-size:0.85rem;color:var(--text-primary);font-family:var(--font-display);}

  .surprise-toast{
    left:20px;right:auto;
    border-color:var(--teal);
    box-shadow:0 0 30px -6px rgba(79,224,192,0.5);
  }
  .surprise-toast .badge-toast-title{color:var(--teal);}

  .surprise-rewards-note{font-size:0.78rem;color:var(--text-faint);margin:2px 0 10px;}

  /* ===== DASHBOARD QUOTIDIEN ===== */
  .dash-today-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    background:var(--bg-panel);
    border:1px solid var(--border-soft);
    border-radius:14px;
    padding:0.9rem 0.6rem;
    margin-bottom:1rem;
  }
  .dash-today-item{text-align:center;}
  .dash-today-val{font-family:var(--font-mono);font-size:1.25rem;color:var(--text-primary);font-weight:700;}
  .dash-today-lbl{font-size:0.62rem;color:var(--text-faint);letter-spacing:0.02em;margin-top:2px;line-height:1.2;}

  .dash-add-quest-btn{
    display:block;
    width:100%;
    background:linear-gradient(135deg, var(--violet), var(--violet-dim));
    color:#fff;
    border:none;
    border-radius:12px;
    padding:0.85rem;
    font-family:var(--font-display);
    font-size:0.95rem;
    font-weight:600;
    cursor:pointer;
    margin-bottom:1.25rem;
    box-shadow:0 4px 16px rgba(179,120,255,0.3);
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
  }
  .dash-add-quest-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(179,120,255,0.45);}

  .dash-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-bottom:1.25rem;
  }
  .dash-card{
    background:var(--bg-panel);
    border:1px solid var(--border-soft);
    border-radius:14px;
    padding:1rem;
    transition:all 0.3s cubic-bezier(.2,.8,.2,1);
  }
  .dash-card:hover{border-color:var(--border-glow);box-shadow:0 4px 16px rgba(179,120,255,0.08);}
  .dash-card:first-child{grid-column:1 / -1;}
  .dash-card-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
  .dash-card-icon{font-size:1.1rem;}
  .dash-card-title{font-family:var(--font-display);font-size:0.88rem;color:var(--text-primary);}
  .dash-card-body{font-size:0.85rem;color:var(--text-dim);line-height:1.5;}
  .dash-card-body .empty-small{padding:0.4rem 0;}

  .dash-challenge-name{color:var(--text-primary);font-weight:600;font-size:0.88rem;margin-bottom:2px;}
  .dash-challenge-desc{font-size:0.78rem;opacity:0.85;margin-bottom:8px;}
  .dash-challenge-foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:0.72rem;color:var(--text-faint);font-family:var(--font-mono);}
  .dash-challenge-status{font-weight:600;}
  .dash-challenge-status.done{color:var(--teal);}

  .dash-mission-link{color:var(--violet);font-size:0.78rem;margin-top:8px;display:inline-block;cursor:pointer;background:none;border:none;padding:0;font-family:inherit;}
  .dash-mission-link:hover{text-decoration:underline;}

  .dash-quick-access{margin-bottom:1.5rem;}
  .dash-quick-access-label{font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px;}
  .dash-quick-access-row{display:flex;gap:10px;flex-wrap:wrap;}
  .dash-quick-btn{
    flex:1;
    min-width:100px;
    display:flex;flex-direction:column;align-items:center;gap:4px;
    background:var(--bg-panel);
    border:1px solid var(--border-soft);
    border-radius:12px;
    padding:0.7rem 0.5rem;
    cursor:pointer;
    color:var(--text-primary);
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
  }
  .dash-quick-btn:hover{border-color:var(--border-glow);transform:translateY(-2px);}
  .dash-quick-btn .ic{font-size:1.3rem;}
  .dash-quick-btn .lbl{font-size:0.68rem;color:var(--text-dim);}

  @media (max-width: 640px){
    body{padding:1.25rem 0.75rem 4rem;}
    .title{font-size:1.5rem;}
    .subtitle{margin-bottom:1.5rem;}
    .profile-card{flex-direction:column;text-align:center;padding:1.1rem;}
    .profile-character{width:100%;}
    .profile-top{justify-content:center;}
    .profile-top-text{align-items:center;}
    .xp-label{text-align:center;}
    .companion-desc{text-align:center;}
    .bilan{grid-template-columns:repeat(2,1fr);row-gap:14px;}
    .energy-opts{gap:6px;}
    .energy-opt{min-width:0;font-size:0.72rem;padding:8px 4px;}
    .energy-opt .ic{font-size:1.05rem;}
    .tabs{gap:6px;}
    .tab{font-size:0.8rem;padding:7px 11px;}
    .panel{padding:1rem;}
    .add-row{flex-direction:column;align-items:stretch;}
    .add-row.bottom-row{flex-direction:column;gap:12px;}
    .diff-btns{width:100%;}
    .diff-btn{flex:1;font-size:0.75rem;padding:9px 6px;}
    .submit-btn{width:100%;}
    .data-io{flex-direction:column;align-items:stretch;}
    .io-btn{width:100%;}
    .qmeta{flex-wrap:wrap;justify-content:flex-end;row-gap:6px;}
    .badges-grid{grid-template-columns:repeat(2,1fr);}
    .badge-toast{right:12px;left:12px;bottom:12px;max-width:none;}
    .dash-today-row{grid-template-columns:repeat(2,1fr);row-gap:12px;}
    .dash-grid{grid-template-columns:1fr;}
    .dash-card:first-child{grid-column:auto;}
    .dash-quick-btn{min-width:80px;}
  }

  @media (max-width: 380px){
    .lvl-badge{width:50px;height:50px;}
    .lvl-badge .n{font-size:1.15rem;}
    .companion-orb{width:84px;height:118px;}
  }
  /* ===== RESPONSIVE - Éléments fixes ===== */
  @media (max-width: 640px) {
    /* Modals plein écran sur mobile */
    dialog.big-dialog {
      width: 95vw !important;
      max-width: none !important;
      padding: 1rem !important;
    }
    
    /* Toolbar (langue + thèmes + ambiance) plus compacte sur mobile */
    #topToolbar button {
      width: 34px !important;
      height: 34px !important;
      font-size: 1rem !important;
    }
    
    /* Util-row responsive */
    .util-row {
      flex-wrap: wrap;
      gap: 6px;
    }
    .util-row .io-btn {
      flex: 1;
      min-width: calc(50% - 3px);
    }
  }

  @media (max-width: 380px) {
    #topToolbar button {
      width: 30px !important;
      height: 30px !important;
      font-size: 0.9rem !important;
    }
  }

  /* ===== AUTHENTIFICATION ===== */
  .auth-screen{
    position:fixed;
    inset:0;
    z-index:20000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1.25rem;
    background:radial-gradient(circle at 30% 20%, var(--bg-grad-1), transparent 60%),
               radial-gradient(circle at 80% 80%, var(--bg-grad-2), transparent 60%),
               var(--bg-void);
    overflow-y:auto;
  }
  .auth-card{
    width:100%;
    max-width:400px;
    background:linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel));
    border:1px solid var(--border-glow);
    border-radius:18px;
    padding:2rem 1.6rem;
    box-shadow:0 0 50px -8px rgba(179,120,255,0.35), inset 0 0 0 1px rgba(255,255,255,0.02);
  }
  .auth-logo{
    text-align:center;
    font-size:2.2rem;
    color:var(--gold);
    margin-bottom:0.25rem;
    text-shadow:0 0 20px rgba(255,200,96,0.5);
  }
  .auth-title{
    font-family:var(--font-display);
    text-align:center;
    font-size:1.2rem;
    color:var(--text-primary);
    margin:0 0 1.25rem;
  }
  .auth-tabs{
    display:flex;
    gap:6px;
    background:var(--bg-void);
    border:1px solid var(--border-soft);
    border-radius:12px;
    padding:4px;
    margin-bottom:1.25rem;
  }
  .auth-tab{
    flex:1;
    background:transparent;
    border:none;
    border-radius:9px;
    padding:9px 6px;
    color:var(--text-faint);
    font-family:var(--font-display);
    font-size:0.85rem;
    cursor:pointer;
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
  }
  .auth-tab.active{
    background:linear-gradient(135deg, var(--violet), var(--violet-dim));
    color:#fff;
    box-shadow:0 2px 10px rgba(179,120,255,0.4);
  }
  .auth-form{display:none;flex-direction:column;gap:6px;}
  .auth-form.active{display:flex;}
  .auth-label{
    font-size:0.72rem;
    color:var(--text-dim);
    letter-spacing:0.02em;
    margin-top:8px;
  }
  .auth-label:first-child{margin-top:0;}
  .auth-input{
    background:var(--bg-void);
    border:1px solid var(--border-glow);
    border-radius:8px;
    padding:10px 12px;
    color:var(--text-primary);
    font-size:0.9rem;
    font-family:var(--font-body);
    width:100%;
    transition:all 0.25s cubic-bezier(.2,.8,.2,1);
  }
  .auth-input:focus{
    outline:none;
    border-color:var(--violet);
    box-shadow:0 0 16px rgba(179,120,255,0.3);
  }
  .auth-hint{font-size:0.68rem;color:var(--text-faint);margin-top:2px;line-height:1.3;}
  .auth-remember-toggle{
    display:flex;align-items:center;gap:6px;font-size:0.8rem;
    color:var(--text-dim);cursor:pointer;margin:2px 0 4px;
  }
  .auth-remember-toggle input{accent-color:var(--violet);}
  .auth-error{
    color:var(--danger);
    font-size:0.78rem;
    min-height:1.1em;
    margin-top:10px;
    line-height:1.4;
  }
  .auth-submit{
    display:block;
    width:100%;
    background:linear-gradient(135deg, var(--violet), var(--violet-dim));
    color:#fff;
    border:none;
    border-radius:12px;
    padding:0.85rem;
    font-family:var(--font-display);
    font-size:0.95rem;
    font-weight:600;
    cursor:pointer;
    margin-top:8px;
    box-shadow:0 4px 16px rgba(179,120,255,0.3);
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
  }
  .auth-submit:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(179,120,255,0.45);}
  .auth-submit:disabled{opacity:0.6;cursor:default;transform:none;}
  .auth-note{
    font-size:0.72rem;
    color:var(--text-faint);
    text-align:center;
    margin-top:1.25rem;
    line-height:1.5;
  }

  .account-strip{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    background:var(--bg-panel);
    border:1px solid var(--border-soft);
    border-radius:12px;
    padding:0.55rem 0.9rem;
    margin-bottom:1rem;
    font-size:0.78rem;
    color:var(--text-dim);
  }
  .account-strip-text strong{color:var(--text-primary);}
  .account-logout-btn{
    background:transparent;
    border:1px solid var(--border-glow);
    color:var(--text-dim);
    border-radius:20px;
    padding:4px 12px;
    font-size:0.72rem;
    cursor:pointer;
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
  }
  .account-logout-btn:hover{border-color:var(--danger);color:var(--danger);}

  @media (max-width: 640px){
    .auth-card{padding:1.5rem 1.2rem;}
    .account-strip{flex-direction:column;text-align:center;}
  }

  .account-delete-link{
    background:transparent;
    border:none;
    color:var(--text-faint);
    font-size:0.7rem;
    text-decoration:underline;
    cursor:pointer;
    padding:4px 2px;
  }
  .account-delete-link:hover{color:var(--danger);}
  .danger-btn{
    background:var(--danger) !important;
    box-shadow:0 4px 12px rgba(255,103,103,0.3) !important;
  }
  .danger-btn:hover{filter:brightness(1.1);}
  .auth-danger-text{color:var(--danger);opacity:0.9;line-height:1.4;display:block;}
  .confirm-dialog-msg{color:var(--text-dim);font-size:0.88rem;line-height:1.5;margin:0.5rem 0 1.25rem;}

  .auth-input-wrap{position:relative;width:100%;}
  .auth-input-wrap .auth-input{padding-right:42px;}
  .auth-eye-btn{
    position:absolute;right:4px;top:50%;transform:translateY(-50%);
    background:transparent;border:none;appearance:none;cursor:pointer;
    font-size:1rem;color:var(--text-faint);padding:6px 8px;line-height:1;
    transition:color 0.2s;
  }
  .auth-eye-btn:hover{color:var(--text-primary);}
  .auth-link-btn{
    align-self:flex-start;
    background:transparent;border:none;appearance:none;
    color:var(--violet);font-size:0.78rem;font-family:var(--font-body);
    cursor:pointer;text-align:left;padding:4px 0;margin-top:2px;
    text-decoration:underline;text-underline-offset:2px;
    transition:color 0.2s;
  }
  .auth-link-btn:hover{color:var(--text-primary);}
  .auth-back-link{margin-top:14px;color:var(--text-faint);}
  .auth-success{
    color:var(--teal);
    font-size:0.78rem;
    min-height:1.1em;
    margin-top:10px;
    line-height:1.4;
  }

  .auth-input.valid{
    border-color:var(--teal);
    box-shadow:0 0 10px rgba(79,224,192,0.2);
  }
  .auth-input.invalid{
    border-color:var(--danger);
    box-shadow:0 0 10px rgba(255,103,103,0.2);
  }

  .cat-color-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 6px;}
  .cat-color-swatch{
    width:28px;height:28px;border-radius:50%;
    border:2px solid transparent;cursor:pointer;padding:0;
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
  }
  .cat-color-swatch:hover{transform:scale(1.15);}
  .cat-color-swatch.sel{border-color:#fff;box-shadow:0 0 0 2px var(--violet);}
  .cat-color-custom{
    width:100%;height:34px;border:1px solid var(--border-glow);
    border-radius:8px;background:var(--bg-void);cursor:pointer;padding:2px;
  }

  /* ===== PHASE 2 : XP prévu, priorités, tâches obligatoires/du jour, missions multiples ===== */

  .dash-xp-forecast-row{display:flex;gap:16px;margin-bottom:8px;}
  .dash-xp-forecast-item{flex:1;text-align:center;}
  .dash-hint-note{font-size:0.72rem;color:var(--text-faint);line-height:1.4;margin-top:4px;}

  .dash-journal-section{
    margin-top:16px;padding-top:12px;
    border-top:1px solid var(--border-soft);
  }
  .dash-journal-section:first-of-type{margin-top:14px;}
  .dash-journal-section-head{
    display:flex;align-items:center;gap:6px;
    font-size:0.78rem;font-weight:600;color:var(--text-dim);
    letter-spacing:0.02em;margin-bottom:6px;
  }
  .dash-journal-section-icon{font-size:0.85rem;}

  .dash-mission-row{margin-bottom:14px;}
  .dash-mission-row:last-of-type{margin-bottom:8px;}

  .dash-mini-task{
    display:flex;align-items:center;gap:10px;
    padding:8px 0;border-bottom:1px solid var(--border-soft);
    font-size:0.82rem;color:var(--text-primary);
    cursor:pointer;
  }
  .dash-mini-task:last-child{border-bottom:none;}
  .dash-mini-task:hover{background:var(--bg-panel-2);}
  .dash-mini-text{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0;}
  .dash-mini-title{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .dash-mini-meta{
    font-size:0.68rem;color:var(--text-faint);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .dash-mini-task.done{opacity:0.6;}
  .dash-mini-task.done .dash-mini-title{text-decoration:line-through;color:var(--text-faint);}
  .dash-mini-check{
    width:22px;height:22px;border-radius:50%;flex-shrink:0;
    border:2px solid var(--border-glow);background:transparent;
    color:var(--teal);font-size:0.75rem;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
  }
  .dash-mini-task.done .dash-mini-check{background:var(--teal);border-color:var(--teal);color:#0c2b24;}
  .dash-mini-check:hover{border-color:var(--teal);}
  .dash-mini-xp{
    font-family:var(--font-mono);font-size:0.7rem;color:var(--gold);flex-shrink:0;
  }
  .dash-mini-cat-group{margin-top:10px;}
  .dash-mini-cat-group:first-child{margin-top:0;}
  .dash-mini-cat-head{
    display:flex;align-items:center;gap:6px;
    font-size:0.68rem;font-weight:600;color:var(--text-dim);
    text-transform:uppercase;letter-spacing:0.04em;
    margin-bottom:2px;
  }
  .dash-mini-cat-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
  .dash-priority-del{
    background:transparent;border:none;color:var(--text-faint);
    cursor:pointer;font-size:0.8rem;flex-shrink:0;padding:2px 4px;
  }
  .dash-priority-del:hover{color:var(--danger);}

  .dash-priority-form{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
  .dash-priority-ratings{display:flex;gap:10px;flex-wrap:wrap;}
  .dash-priority-rating-lbl{
    display:flex;flex-direction:column;gap:4px;
    font-size:0.68rem;color:var(--text-faint);flex:1;min-width:70px;
  }
  .dash-priority-bonus-done{
    margin-top:10px;padding:8px 10px;border-radius:10px;
    background:rgba(79,224,192,0.12);border:1px solid rgba(79,224,192,0.3);
    color:var(--teal);font-size:0.78rem;font-weight:600;text-align:center;
  }

  @media (max-width: 640px){
    .dash-priority-ratings{gap:8px;}
    .dash-priority-rating-lbl{min-width:60px;}
    .gear-grid{grid-template-columns:repeat(2,1fr);}
    .modal-two-col{grid-template-columns:1fr;}
  }




  /* ===== ENLUMINURES DE BORDURE — motif géométrique/runique (v3) =====
     Sceaux en losange reliés par un axe central, glyphes internes,
     ailes angulaires et nœuds de circuit. Une couleur distincte par page. */
  body::before, body::after{
    content:'';
    position:fixed;
    top:0; bottom:0;
    width:130px;
    background-repeat:repeat-y;
    background-position:top center;
    background-size:90px 220px;
    pointer-events:none;
    z-index:1;
    opacity:1;
    transition:opacity 0.4s ease, background-image 0.3s ease;
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 220'><path d='M45 0 L45 220' stroke='%23ffc860' stroke-width='1.1' opacity='0.5' fill='none'/><path d='M45 40 L60 55 L45 70 L30 55 Z' stroke='%23ffc860' stroke-width='1.3' opacity='0.9' fill='none'/><path d='M45 47 L53 55 L45 63 L37 55 Z' stroke='%23ffc860' stroke-width='1' opacity='0.85' fill='none'/><circle cx='45' cy='55' r='1' fill='%23ffc860' opacity='0.75'/><path d='M30 55 L20 49 M30 55 L20 61' stroke='%23ffc860' stroke-width='1' opacity='0.7' fill='none'/><path d='M60 55 L70 49 M60 55 L70 61' stroke='%23ffc860' stroke-width='1' opacity='0.7' fill='none'/><path d='M45 150 L60 165 L45 180 L30 165 Z' stroke='%23ffc860' stroke-width='1.3' opacity='0.9' fill='none'/><path d='M45 157 L53 165 L45 173 L37 165 Z' stroke='%23ffc860' stroke-width='1' opacity='0.85' fill='none'/><circle cx='45' cy='165' r='1' fill='%23ffc860' opacity='0.75'/><path d='M30 165 L20 159 M30 165 L20 171' stroke='%23ffc860' stroke-width='1' opacity='0.7' fill='none'/><path d='M60 165 L70 159 M60 165 L70 171' stroke='%23ffc860' stroke-width='1' opacity='0.7' fill='none'/><path d='M45 105 L50 110 L45 115 L40 110 Z' stroke='%23ffc860' stroke-width='1.1' opacity='0.8' fill='none'/><circle cx='45' cy='110' r='1.2' fill='%23ffc860' opacity='0.7'/><path d='M42 27 L48 27' stroke='%23ffc860' stroke-width='0.8' opacity='0.55'/><circle cx='45' cy='27' r='0.9' fill='%23ffc860' opacity='0.6'/><path d='M42 193 L48 193' stroke='%23ffc860' stroke-width='0.8' opacity='0.55'/><circle cx='45' cy='193' r='0.9' fill='%23ffc860' opacity='0.6'/></svg>");
  }
  body::before{ left:0; }
  body::after{ right:0; transform:scaleX(-1); }

  body[data-page="quotidien"]::before, body[data-page="quotidien"]::after{
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 220'><path d='M45 0 L45 220' stroke='%23ffc860' stroke-width='1.1' opacity='0.5' fill='none'/><path d='M45 40 L60 55 L45 70 L30 55 Z' stroke='%23ffc860' stroke-width='1.3' opacity='0.9' fill='none'/><path d='M45 47 L53 55 L45 63 L37 55 Z' stroke='%23ffc860' stroke-width='1' opacity='0.85' fill='none'/><circle cx='45' cy='55' r='1' fill='%23ffc860' opacity='0.75'/><path d='M30 55 L20 49 M30 55 L20 61' stroke='%23ffc860' stroke-width='1' opacity='0.7' fill='none'/><path d='M60 55 L70 49 M60 55 L70 61' stroke='%23ffc860' stroke-width='1' opacity='0.7' fill='none'/><path d='M45 150 L60 165 L45 180 L30 165 Z' stroke='%23ffc860' stroke-width='1.3' opacity='0.9' fill='none'/><path d='M45 157 L53 165 L45 173 L37 165 Z' stroke='%23ffc860' stroke-width='1' opacity='0.85' fill='none'/><circle cx='45' cy='165' r='1' fill='%23ffc860' opacity='0.75'/><path d='M30 165 L20 159 M30 165 L20 171' stroke='%23ffc860' stroke-width='1' opacity='0.7' fill='none'/><path d='M60 165 L70 159 M60 165 L70 171' stroke='%23ffc860' stroke-width='1' opacity='0.7' fill='none'/><path d='M45 105 L50 110 L45 115 L40 110 Z' stroke='%23ffc860' stroke-width='1.1' opacity='0.8' fill='none'/><circle cx='45' cy='110' r='1.2' fill='%23ffc860' opacity='0.7'/><path d='M42 27 L48 27' stroke='%23ffc860' stroke-width='0.8' opacity='0.55'/><circle cx='45' cy='27' r='0.9' fill='%23ffc860' opacity='0.6'/><path d='M42 193 L48 193' stroke='%23ffc860' stroke-width='0.8' opacity='0.55'/><circle cx='45' cy='193' r='0.9' fill='%23ffc860' opacity='0.6'/></svg>");
  }
  body[data-page="quetes"]::before, body[data-page="quetes"]::after{
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 220'><path d='M45 0 L45 220' stroke='%23b378ff' stroke-width='1.1' opacity='0.5' fill='none'/><path d='M45 40 L60 55 L45 70 L30 55 Z' stroke='%23b378ff' stroke-width='1.3' opacity='0.9' fill='none'/><path d='M45 47 L53 55 L45 63 L37 55 Z' stroke='%23b378ff' stroke-width='1' opacity='0.85' fill='none'/><circle cx='45' cy='55' r='1' fill='%23b378ff' opacity='0.75'/><path d='M30 55 L20 49 M30 55 L20 61' stroke='%23b378ff' stroke-width='1' opacity='0.7' fill='none'/><path d='M60 55 L70 49 M60 55 L70 61' stroke='%23b378ff' stroke-width='1' opacity='0.7' fill='none'/><path d='M45 150 L60 165 L45 180 L30 165 Z' stroke='%23b378ff' stroke-width='1.3' opacity='0.9' fill='none'/><path d='M45 157 L53 165 L45 173 L37 165 Z' stroke='%23b378ff' stroke-width='1' opacity='0.85' fill='none'/><circle cx='45' cy='165' r='1' fill='%23b378ff' opacity='0.75'/><path d='M30 165 L20 159 M30 165 L20 171' stroke='%23b378ff' stroke-width='1' opacity='0.7' fill='none'/><path d='M60 165 L70 159 M60 165 L70 171' stroke='%23b378ff' stroke-width='1' opacity='0.7' fill='none'/><path d='M45 105 L50 110 L45 115 L40 110 Z' stroke='%23b378ff' stroke-width='1.1' opacity='0.8' fill='none'/><circle cx='45' cy='110' r='1.2' fill='%23b378ff' opacity='0.7'/><path d='M42 27 L48 27' stroke='%23b378ff' stroke-width='0.8' opacity='0.55'/><circle cx='45' cy='27' r='0.9' fill='%23b378ff' opacity='0.6'/><path d='M42 193 L48 193' stroke='%23b378ff' stroke-width='0.8' opacity='0.55'/><circle cx='45' cy='193' r='0.9' fill='%23b378ff' opacity='0.6'/></svg>");
  }
  body[data-page="statistiques"]::before, body[data-page="statistiques"]::after{
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 220'><path d='M45 0 L45 220' stroke='%2363b8ff' stroke-width='1.1' opacity='0.5' fill='none'/><path d='M45 40 L60 55 L45 70 L30 55 Z' stroke='%2363b8ff' stroke-width='1.3' opacity='0.9' fill='none'/><path d='M45 47 L53 55 L45 63 L37 55 Z' stroke='%2363b8ff' stroke-width='1' opacity='0.85' fill='none'/><circle cx='45' cy='55' r='1' fill='%2363b8ff' opacity='0.75'/><path d='M30 55 L20 49 M30 55 L20 61' stroke='%2363b8ff' stroke-width='1' opacity='0.7' fill='none'/><path d='M60 55 L70 49 M60 55 L70 61' stroke='%2363b8ff' stroke-width='1' opacity='0.7' fill='none'/><path d='M45 150 L60 165 L45 180 L30 165 Z' stroke='%2363b8ff' stroke-width='1.3' opacity='0.9' fill='none'/><path d='M45 157 L53 165 L45 173 L37 165 Z' stroke='%2363b8ff' stroke-width='1' opacity='0.85' fill='none'/><circle cx='45' cy='165' r='1' fill='%2363b8ff' opacity='0.75'/><path d='M30 165 L20 159 M30 165 L20 171' stroke='%2363b8ff' stroke-width='1' opacity='0.7' fill='none'/><path d='M60 165 L70 159 M60 165 L70 171' stroke='%2363b8ff' stroke-width='1' opacity='0.7' fill='none'/><path d='M45 105 L50 110 L45 115 L40 110 Z' stroke='%2363b8ff' stroke-width='1.1' opacity='0.8' fill='none'/><circle cx='45' cy='110' r='1.2' fill='%2363b8ff' opacity='0.7'/><path d='M42 27 L48 27' stroke='%2363b8ff' stroke-width='0.8' opacity='0.55'/><circle cx='45' cy='27' r='0.9' fill='%2363b8ff' opacity='0.6'/><path d='M42 193 L48 193' stroke='%2363b8ff' stroke-width='0.8' opacity='0.55'/><circle cx='45' cy='193' r='0.9' fill='%2363b8ff' opacity='0.6'/></svg>");
  }
  body[data-page="energie"]::before, body[data-page="energie"]::after{
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 220'><path d='M45 0 L45 220' stroke='%23ff9d5c' stroke-width='1.1' opacity='0.5' fill='none'/><path d='M45 40 L60 55 L45 70 L30 55 Z' stroke='%23ff9d5c' stroke-width='1.3' opacity='0.9' fill='none'/><path d='M45 47 L53 55 L45 63 L37 55 Z' stroke='%23ff9d5c' stroke-width='1' opacity='0.85' fill='none'/><circle cx='45' cy='55' r='1' fill='%23ff9d5c' opacity='0.75'/><path d='M30 55 L20 49 M30 55 L20 61' stroke='%23ff9d5c' stroke-width='1' opacity='0.7' fill='none'/><path d='M60 55 L70 49 M60 55 L70 61' stroke='%23ff9d5c' stroke-width='1' opacity='0.7' fill='none'/><path d='M45 150 L60 165 L45 180 L30 165 Z' stroke='%23ff9d5c' stroke-width='1.3' opacity='0.9' fill='none'/><path d='M45 157 L53 165 L45 173 L37 165 Z' stroke='%23ff9d5c' stroke-width='1' opacity='0.85' fill='none'/><circle cx='45' cy='165' r='1' fill='%23ff9d5c' opacity='0.75'/><path d='M30 165 L20 159 M30 165 L20 171' stroke='%23ff9d5c' stroke-width='1' opacity='0.7' fill='none'/><path d='M60 165 L70 159 M60 165 L70 171' stroke='%23ff9d5c' stroke-width='1' opacity='0.7' fill='none'/><path d='M45 105 L50 110 L45 115 L40 110 Z' stroke='%23ff9d5c' stroke-width='1.1' opacity='0.8' fill='none'/><circle cx='45' cy='110' r='1.2' fill='%23ff9d5c' opacity='0.7'/><path d='M42 27 L48 27' stroke='%23ff9d5c' stroke-width='0.8' opacity='0.55'/><circle cx='45' cy='27' r='0.9' fill='%23ff9d5c' opacity='0.6'/><path d='M42 193 L48 193' stroke='%23ff9d5c' stroke-width='0.8' opacity='0.55'/><circle cx='45' cy='193' r='0.9' fill='%23ff9d5c' opacity='0.6'/></svg>");
  }
  body[data-page="progression"]::before, body[data-page="progression"]::after{
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 220'><path d='M45 0 L45 220' stroke='%234fe0c0' stroke-width='1.1' opacity='0.5' fill='none'/><path d='M45 40 L60 55 L45 70 L30 55 Z' stroke='%234fe0c0' stroke-width='1.3' opacity='0.9' fill='none'/><path d='M45 47 L53 55 L45 63 L37 55 Z' stroke='%234fe0c0' stroke-width='1' opacity='0.85' fill='none'/><circle cx='45' cy='55' r='1' fill='%234fe0c0' opacity='0.75'/><path d='M30 55 L20 49 M30 55 L20 61' stroke='%234fe0c0' stroke-width='1' opacity='0.7' fill='none'/><path d='M60 55 L70 49 M60 55 L70 61' stroke='%234fe0c0' stroke-width='1' opacity='0.7' fill='none'/><path d='M45 150 L60 165 L45 180 L30 165 Z' stroke='%234fe0c0' stroke-width='1.3' opacity='0.9' fill='none'/><path d='M45 157 L53 165 L45 173 L37 165 Z' stroke='%234fe0c0' stroke-width='1' opacity='0.85' fill='none'/><circle cx='45' cy='165' r='1' fill='%234fe0c0' opacity='0.75'/><path d='M30 165 L20 159 M30 165 L20 171' stroke='%234fe0c0' stroke-width='1' opacity='0.7' fill='none'/><path d='M60 165 L70 159 M60 165 L70 171' stroke='%234fe0c0' stroke-width='1' opacity='0.7' fill='none'/><path d='M45 105 L50 110 L45 115 L40 110 Z' stroke='%234fe0c0' stroke-width='1.1' opacity='0.8' fill='none'/><circle cx='45' cy='110' r='1.2' fill='%234fe0c0' opacity='0.7'/><path d='M42 27 L48 27' stroke='%234fe0c0' stroke-width='0.8' opacity='0.55'/><circle cx='45' cy='27' r='0.9' fill='%234fe0c0' opacity='0.6'/><path d='M42 193 L48 193' stroke='%234fe0c0' stroke-width='0.8' opacity='0.55'/><circle cx='45' cy='193' r='0.9' fill='%234fe0c0' opacity='0.6'/></svg>");
  }
  body[data-page="clepsydre"]::before, body[data-page="clepsydre"]::after{
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 220'><path d='M45 0 L45 220' stroke='%23ff6f9c' stroke-width='1.1' opacity='0.5' fill='none'/><path d='M45 40 L60 55 L45 70 L30 55 Z' stroke='%23ff6f9c' stroke-width='1.3' opacity='0.9' fill='none'/><path d='M45 47 L53 55 L45 63 L37 55 Z' stroke='%23ff6f9c' stroke-width='1' opacity='0.85' fill='none'/><circle cx='45' cy='55' r='1' fill='%23ff6f9c' opacity='0.75'/><path d='M30 55 L20 49 M30 55 L20 61' stroke='%23ff6f9c' stroke-width='1' opacity='0.7' fill='none'/><path d='M60 55 L70 49 M60 55 L70 61' stroke='%23ff6f9c' stroke-width='1' opacity='0.7' fill='none'/><path d='M45 150 L60 165 L45 180 L30 165 Z' stroke='%23ff6f9c' stroke-width='1.3' opacity='0.9' fill='none'/><path d='M45 157 L53 165 L45 173 L37 165 Z' stroke='%23ff6f9c' stroke-width='1' opacity='0.85' fill='none'/><circle cx='45' cy='165' r='1' fill='%23ff6f9c' opacity='0.75'/><path d='M30 165 L20 159 M30 165 L20 171' stroke='%23ff6f9c' stroke-width='1' opacity='0.7' fill='none'/><path d='M60 165 L70 159 M60 165 L70 171' stroke='%23ff6f9c' stroke-width='1' opacity='0.7' fill='none'/><path d='M45 105 L50 110 L45 115 L40 110 Z' stroke='%23ff6f9c' stroke-width='1.1' opacity='0.8' fill='none'/><circle cx='45' cy='110' r='1.2' fill='%23ff6f9c' opacity='0.7'/><path d='M42 27 L48 27' stroke='%23ff6f9c' stroke-width='0.8' opacity='0.55'/><circle cx='45' cy='27' r='0.9' fill='%23ff6f9c' opacity='0.6'/><path d='M42 193 L48 193' stroke='%23ff6f9c' stroke-width='0.8' opacity='0.55'/><circle cx='45' cy='193' r='0.9' fill='%23ff6f9c' opacity='0.6'/></svg>");
  }

  @media (max-width:640px){
    body::before, body::after{ width:60px; background-size:52px 140px; opacity:0.95; }
  }
  @media (max-width:380px){
    body::before, body::after{ width:42px; background-size:36px 105px; opacity:0.9; }
  }

  /* === Catégories dans la modale === */
  .quest-cat-pills{
    display:flex;flex-wrap:wrap;gap:8px;
    padding:10px 12px;
    background:var(--bg-panel);
    border:1px solid var(--border-glow);
    border-radius:8px;
  }
  .quest-cat-pill{
    display:flex;align-items:center;gap:6px;
    padding:8px 14px;
    border-radius:7px;
    background:var(--bg-void);
    border:1.5px solid var(--border-glow);
    color:var(--text-dim);
    font-size:0.78rem;
    cursor:pointer;
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
  }
  .quest-cat-pill .cat-dot{
    width:8px;height:8px;border-radius:50%;flex-shrink:0;
  }
  .quest-cat-pill:hover{
    border-color:var(--violet);
    color:var(--text-primary);
    transform:translateY(-1px);
  }
  .quest-cat-pill.sel{
    font-weight:600;
    color:#0a0a14;
    box-shadow:0 4px 14px rgba(179,120,255,0.3);
  }

  /* === Modal restructurée === */
  .big-dialog {
    max-width:520px; width:92vw; padding:0;
    border:1px solid var(--border-glow); border-radius:14px;
    background:var(--bg-panel);
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
    overflow:hidden;
  }
  .big-dialog::backdrop { background:rgba(0,0,0,0.55); }
  .modal-hd {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; border-bottom:1px solid var(--border-soft);
    background:var(--bg-panel-2);
  }
  .modal-hd .dialog-title { font-size:1rem; font-weight:700; }
  .modal-x {
    background:none; border:none; color:var(--text-faint);
    font-size:0.8rem; cursor:pointer; padding:4px 8px; border-radius:6px;
    transition:all 0.15s;
  }
  .modal-x:hover { color:var(--danger); background:rgba(255,103,103,0.1); }
  .modal-bd {
    display:flex; flex-direction:column; gap:14px;
    padding:18px 20px; max-height:80vh; overflow-y:auto;
  }
  .modal-row { display:flex; gap:10px; margin-bottom:10px; }
  .modal-row input[type=text] { flex:1; min-width:0; }
  .scores-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:12px 20px;
  }
  .score-block { display:flex; flex-direction:column; gap:6px; }
  .score-block .diff-btns { gap:4px; }
  .score-block .diff-btn { flex:1; padding:8px 4px; font-size:0.78rem; min-width:0; }
  .modal-two-col { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
  .modal-actions {
    display:flex; justify-content:flex-end; gap:10px;
    padding-top:6px; border-top:1px solid var(--border-soft);
  }

  /* === Grille de catégories permanente (remplace les onglets) === */
  .quest-cat-panel{margin-bottom:1rem;}
  .quest-cat-grid{display:flex;flex-wrap:wrap;gap:10px;}
  .qcat-card{
    --qcat-color:var(--violet);
    display:flex;align-items:center;gap:6px;
    padding:9px 12px;border-radius:12px;cursor:pointer;
    border:1.5px solid var(--border-glow);background:var(--bg-panel-2);
    color:var(--text-dim);font-size:0.85rem;font-family:inherit;
    transition:all 0.2s cubic-bezier(.2,.8,.2,1);
  }
  .qcat-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.3);}
  .qcat-card.active{border-color:var(--qcat-color);color:var(--qcat-color);box-shadow:0 0 12px -2px var(--qcat-color);}
  .qcat-card .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
  .qcat-label{font-weight:500;}
  .qcat-edit,.qcat-del{font-size:0.75rem;opacity:0.65;padding:2px;}
  .qcat-edit:hover,.qcat-del:hover{opacity:1;}
  .qcat-add{border-style:dashed;color:var(--text-faint);}
  .qcat-all{--qcat-color:var(--gold);}
  .qcat-all-dot{
    background:conic-gradient(var(--violet),var(--gold),var(--teal),var(--rose),var(--violet));
  }
  .panel-empty-label{color:var(--text-faint);font-size:0.8rem;margin:0 0 12px;text-align:center;}