: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:760px;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;}
.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;}
.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;
}
.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;
}
.quest:hover:not(.completed){
background:rgba(179,120,255,0.05);
}
.quest:last-child{border-bottom:none;}
.quest.completed{opacity:0.45;}
.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;
}
.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);}
.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:center;gap:6px;font-size:0.78rem;color:var(--text-dim);cursor:pointer;
}
.recur-toggle input{accent-color:var(--sky);}
.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);
}
.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;}
.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;
}
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;
}
.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{
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;}
@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;}
}
.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-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;}
.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);
}
.dash-mini-task:last-child{border-bottom:none;}
.dash-mini-task span:nth-child(2){flex:1;}
.dash-mini-task.done span:nth-child(2){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-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-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;}
}
/* ===== ENLUMINURES DE BORDURE — style insulaire/northumbrien =====
Triskèles (triples spirales) + corde entrelacée + grappes végétales,
3 variantes qui alternent selon la page active. */
body::before, body::after{
content:'';
position:fixed;
top:0; bottom:0;
width:130px;
background-repeat:repeat-y;
background-position:top center;
background-size:90px 340px;
pointer-events:none;
z-index:1;
opacity:1;
transition:opacity 0.4s ease;
}
body::before{ left:0; }
body::after{ right:0; transform:scaleX(-1); }
body[data-page="quotidien"]::before, body[data-page="quotidien"]::after,
body[data-page="statistiques"]::before, body[data-page="statistiques"]::after{
background-image:url("data:image/svg+xml,");
}
body[data-page="quetes"]::before, body[data-page="quetes"]::after,
body[data-page="energie"]::before, body[data-page="energie"]::after{
background-image:url("data:image/svg+xml,");
}
body[data-page="progression"]::before, body[data-page="progression"]::after{
background-image:url("data:image/svg+xml,");
}
@media (max-width:640px){
body::before, body::after{ width:52px; background-size:52px 240px; opacity:0.9; }
}
@media (max-width:380px){
body::before, body::after{ width:36px; background-size:36px 200px; opacity:0.78; }
}