:root{
  --night:#05030f;--night2:#0a0818;--night3:#100e1f;--night4:#1a1730;
  --mist:#a89ec8;--fog:#6b6390;--snow:#e8e0ff;
  --accent:#00f5ff;--accent2:#00c8d4;--accent-dim:rgba(0,245,255,0.08);
  --green:#00ff9d;--green-dim:rgba(0,255,157,0.1);
  --red:#ff2d6b;--red-dim:rgba(255,45,107,0.12);
  --blue:#7b5fff;--blue-dim:rgba(123,95,255,0.12);
  --pink:#ff00c8;--pink-dim:rgba(255,0,200,0.1);
  --shadow:0 0 30px rgba(0,245,255,0.15),0 4px 24px rgba(0,0,0,0.7);
  --neon-glow:0 0 8px rgba(0,245,255,0.6),0 0 20px rgba(0,245,255,0.3);
  --neon-green:0 0 8px rgba(0,255,157,0.6),0 0 20px rgba(0,255,157,0.3);
  --neon-pink:0 0 8px rgba(255,0,200,0.6),0 0 20px rgba(255,0,200,0.3);
  --r-xl:4px;--r-lg:4px;--r:3px;
  --card-w:320px;--card-pad:22px;--card-name-size:16px;--card-pct-size:22px;--card-cover-h:130px;
}
/* LIGHT THEME */
body.light{
  --night:#f5f2ec;--night2:#ffffff;--night3:#f0ece4;--night4:#e4dfd5;
  --mist:#5a5a72;--fog:#8a8480;--snow:#1a1714;
  --accent-dim:rgba(197,147,58,0.12);
  --green-dim:rgba(35,120,65,0.1);
  --red-dim:rgba(180,50,40,0.1);
  --blue-dim:rgba(40,90,160,0.1);
  --shadow:0 4px 24px rgba(0,0,0,0.12);
}
body.light #bg-overlay{background:#f5f2ec;opacity:0.88}
body.light .sidebar{background:rgba(245,242,236,0.97);border-right:1px solid rgba(0,0,0,0.08)}
body.light .nav-item:hover{background:rgba(0,0,0,0.04)}
body.light .nav-item.active{background:rgba(197,147,58,0.1)}
body.light .topbar{background:rgba(245,242,236,0.92)}
body.light .goal-card{background:rgba(255,255,255,0.95);border-color:rgba(0,0,0,0.08)}
body.light .goal-card:hover{border-color:rgba(0,0,0,0.15)}
body.light .modal{background:#fff}
body.light .form-input{background:#f5f2ec;border-color:rgba(0,0,0,0.12);color:var(--snow)}
body.light .form-input:focus{border-color:rgba(197,147,58,0.5)}
body.light .m-editor,.body.light .add-m-input,.body.light .upload-zone{background:#f0ece4}
body.light .icon-opt{background:#f0ece4}
body.light .icon-opt:hover,.body.light .icon-opt.selected{background:rgba(197,147,58,0.15)}
body.light .btn-ghost{border-color:rgba(0,0,0,0.15);color:var(--fog)}
body.light .btn-ghost:hover{border-color:rgba(0,0,0,0.3);background:#f0ece4}
body.light .log-list,.body.light .viewer-att{background:#f5f2ec}
body.light .pl-chip{border-color:rgba(0,0,0,0.12);color:var(--fog)}
body.light #music-player{background:rgba(240,236,228,0.97)}
body.light .player-bar{color:var(--snow)}
body.light .player-btn{color:var(--fog)}
body.light .player-btn:hover{background:rgba(0,0,0,0.07);color:var(--snow)}
body.light .search-input{background:#f0ece4;border-color:rgba(0,0,0,0.1);color:var(--snow)}
body.light .filter-chip{border-color:rgba(0,0,0,0.12);color:var(--fog)}
body.light .filter-chip:hover{border-color:rgba(0,0,0,0.25);color:var(--snow)}
body.light .stat-card,.body.light .chart-card,.body.light .mood-hero{background:rgba(255,255,255,0.95);border-color:rgba(0,0,0,0.07)}
body.light .prog-track,.body.light .ring-track{background:#e4dfd5}
body.light .m-check{border-color:#b0a898}
body.light .m-text{color:#5a5a72}
body.light .log-dot{background:var(--accent2)}
body.light .att-chip{background:#f0ece4;border-color:rgba(0,0,0,0.1)}
body.light .dl-ok{background:#f0ece4;color:#6a6460}
body.light .card-cover-placeholder{border-bottom-color:rgba(0,0,0,0.1)}
body.light .add-step-btn{border-color:rgba(0,0,0,0.15);color:#8a8480}
body.light .overlay{background:rgba(0,0,0,0.4)}
body.light .prio-btn{background:#f0ece4;border-color:rgba(0,0,0,0.1);color:var(--fog)}
body.light .mood-popup-box{background:#fff}
body.light .celebrate-box{background:linear-gradient(160deg,#f0ece4 0%,#e8e4dc 100%);border-color:rgba(0,0,0,0.12)}
body.light .celebrate-box::before{background:linear-gradient(90deg,transparent,rgba(197,147,58,0.6),transparent)}
body.light .cel-title-banner{background:rgba(197,147,58,0.1);border-color:rgba(197,147,58,0.3);color:#a07830}
body.light .cel-quest-name{color:#1a1714}
body.light .cel-quest-done{color:#237841;text-shadow:none}
body.light .cel-divider{background:linear-gradient(90deg,transparent,rgba(0,0,0,0.1),transparent)}
body.light .cel-btn-label{color:#8a8480}
body.light .log-entry{border-bottom-color:rgba(0,0,0,0.06)}
body.light .mood-hist-item{background:#f0ece4}
body.light .params-section-title{color:#a07830;text-shadow:none;border-bottom-color:rgba(197,147,58,0.35)}
body.light .params-section-title::before{background:#c5923a;box-shadow:none}
body.light .params-card-name{color:#1a1714}
/* CARD SIZES */
.cards-small .goal-card{width:220px;padding:14px}
.cards-small .goal-card .goal-name{font-size:13px}
.cards-small .goal-card .prog-pct{font-size:16px}
.cards-small .goal-card .card-cover{height:80px}
.cards-small .goal-card .milestones{display:none}
.cards-small .goal-card .prog-desc{display:none}
.cards-large .goal-card{width:420px;padding:28px}
.cards-large .goal-card .goal-name{font-size:20px}
.cards-large .goal-card .prog-pct{font-size:28px}
.cards-large .goal-card .card-cover{height:180px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Outfit',sans-serif;background:var(--night);color:var(--snow);height:100vh;overflow:hidden;font-size:15px;line-height:1.6;background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,245,255,0.015) 2px,rgba(0,245,255,0.015) 4px),repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(123,95,255,0.01) 2px,rgba(123,95,255,0.01) 4px)}
#bg-layer{position:fixed;inset:0;z-index:0;background-size:cover;background-position:center}
#bg-overlay{position:fixed;inset:0;z-index:1;background:linear-gradient(135deg,#05030f 0%,#0a0520 50%,#05030f 100%);opacity:0.92}
.shell{display:flex;height:100vh;overflow:hidden;position:relative;z-index:2}
.sidebar{width:250px;flex-shrink:0;background:rgba(5,3,15,0.98);backdrop-filter:blur(20px);border-right:1px solid rgba(0,245,255,0.15);border-right-width:1px;display:flex;flex-direction:column;padding:28px 0 0;position:fixed;top:0;left:0;bottom:0;z-index:100;overflow:hidden;box-shadow:2px 0 20px rgba(0,245,255,0.05);transition:transform 0.3s ease}
.sidebar.hidden{transform:translateX(-250px)}
.sidebar-scroll{flex:1;overflow-y:auto;min-height:0;padding-bottom:8px}
.main{margin-left:250px;flex:1;display:flex;flex-direction:column;transition:margin-left 0.3s ease;height:100vh;overflow:hidden;min-width:0}
.main.expanded{margin-left:0}
#music-player{transition:left 0.3s ease,height 0.3s ease}
.sidebar-toggle{position:absolute;top:14px;right:10px;z-index:101;width:28px;height:28px;background:none;border:1px solid rgba(0,245,255,0.15);border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s,border-color 0.15s}
.sidebar-toggle:hover{background:rgba(0,245,255,0.08);border-color:rgba(0,245,255,0.5)}
.sidebar-toggle svg{width:15px;height:15px;color:var(--mist);transition:color 0.15s}
.sidebar-toggle:hover svg{color:var(--accent)}
.brand{padding:0 24px 20px;border-bottom:1px solid rgba(0,245,255,0.12);margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
.brand-name{font-family:'Playfair Display',serif;font-size:26px;color:var(--accent);text-shadow:var(--neon-glow);letter-spacing:2px}
.brand-sub{font-size:11px;color:var(--fog);letter-spacing:2px;text-transform:uppercase;margin-top:2px}
.btn-bg{background:none;border:1px solid rgba(255,255,255,0.12);border-radius:7px;padding:5px 9px;font-size:11px;color:var(--fog);cursor:pointer;font-family:'Outfit',sans-serif;transition:all 0.15s}
.btn-bg:hover{border-color:var(--accent);color:var(--accent)}
.params-row{display:flex;align-items:center;justify-content:space-between;padding:7px 24px;min-height:36px}
.params-label{font-size:12px;color:var(--mist);letter-spacing:0.3px}
.params-page{max-width:560px}
.params-section-title{font-size:13px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--accent);opacity:1;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid rgba(0,245,255,0.28);text-shadow:0 0 12px rgba(0,245,255,0.5);display:flex;align-items:center;gap:8px}.params-section-title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--accent);border-radius:2px;box-shadow:0 0 8px var(--accent);flex-shrink:0}
.params-card{display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(8,6,20,0.95);border:1px solid rgba(0,245,255,0.1);border-radius:2px;padding:18px 22px;margin-bottom:10px;transition:border-color 0.2s;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
.params-card:hover{border-color:rgba(0,245,255,0.25)}
.params-card-left{display:flex;align-items:center;gap:14px}
.params-card-icon{font-size:22px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(0,245,255,0.05);border:1px solid rgba(0,245,255,0.12);border-radius:2px;flex-shrink:0}
.params-card-name{font-size:15px;font-weight:600;color:var(--snow);margin-bottom:4px;letter-spacing:0.3px}
.params-card-desc{font-size:12px;color:var(--mist)}
.intros-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;width:100%}
.intro-thumb{position:relative;border-radius:6px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all 0.2s;aspect-ratio:16/9;background:#000}
.intro-thumb video,.intro-thumb img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.intro-thumb:hover{border-color:rgba(0,245,255,0.4);transform:scale(1.02)}
.intro-thumb.selected{border-color:var(--accent);box-shadow:0 0 16px rgba(0,245,255,0.4)}
.intro-thumb-badge{position:absolute;top:6px;right:6px;background:var(--accent);color:var(--night);font-size:9px;font-weight:700;letter-spacing:1px;padding:2px 7px;border-radius:20px;display:none;text-transform:uppercase}
.intro-thumb.selected .intro-thumb-badge{display:block}
.intro-thumb-label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,0.8));padding:8px 8px 6px;font-size:11px;color:rgba(255,255,255,0.85);letter-spacing:0.5px}
.intro-empty{font-size:13px;color:var(--fog);padding:12px 0;width:100%;text-align:center}
.nav-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);padding:4px 16px;margin:14px 0 4px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;transition:all 0.15s;border-left:2px solid rgba(0,245,255,0.4);background:rgba(0,245,255,0.04);border-radius:0 4px 4px 0}
.nav-label:hover{color:var(--accent);background:rgba(0,245,255,0.08);border-left-color:var(--accent)}
.nav-label-arrow{transition:transform 0.2s ease;color:var(--accent);font-size:12px;opacity:0.8;width:18px;height:18px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,245,255,0.3);border-radius:3px;flex-shrink:0}
.nav-label:hover .nav-label-arrow{opacity:1;border-color:var(--accent);background:rgba(0,245,255,0.1)}
.nav-section.collapsed .nav-label-arrow{transform:rotate(-90deg)}
.nav-section{overflow:hidden}
.nav-section-content{transition:max-height 0.25s ease,opacity 0.2s ease;max-height:500px;opacity:1}
.nav-section.collapsed .nav-section-content{max-height:0;opacity:0}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 24px;font-size:14px;color:var(--mist);cursor:pointer;transition:all 0.15s;border-left:2px solid transparent}
.nav-item:hover{color:var(--snow);background:rgba(255,255,255,0.04)}
.nav-item.active{color:var(--accent);border-left-color:var(--accent);background:var(--accent-dim);text-shadow:0 0 8px rgba(0,245,255,0.5)}
.nav-badge{margin-left:auto;background:var(--night4);color:var(--mist);font-size:11px;padding:2px 7px;border-radius:20px;min-width:22px;text-align:center}
.nav-item.active .nav-badge{background:rgba(0,245,255,0.15);color:var(--accent);box-shadow:0 0 6px rgba(0,245,255,0.3)}
.page-nav-item{display:flex;align-items:center;gap:0;padding:0;border-left:2px solid transparent;transition:all 0.15s}
.page-nav-item:hover{border-left-color:rgba(0,245,255,0.3);background:rgba(255,255,255,0.04)}
.page-nav-item.active{border-left-color:var(--accent);background:var(--accent-dim)}
.page-nav-link{flex:1;padding:9px 20px 9px 24px;font-size:13px;color:var(--mist);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color 0.15s}
.page-nav-item:hover .page-nav-link{color:var(--snow)}
.page-nav-item.active .page-nav-link{color:var(--accent);text-shadow:0 0 8px rgba(0,245,255,0.5)}
.page-nav-del{background:none;border:none;cursor:pointer;color:rgba(255,45,107,0);padding:6px 10px;font-size:13px;transition:all 0.15s;flex-shrink:0;line-height:1}
.page-nav-item:hover .page-nav-del{color:rgba(255,45,107,0.4)}
.page-nav-item:hover .page-nav-del:hover{color:var(--red);background:rgba(255,45,107,0.1)}
.sb-bottom{margin-top:auto;padding:0}
.sb-row{display:flex;justify-content:space-between;margin-bottom:10px}
.sb-label{font-size:12px;color:var(--fog)}
.sb-val{font-size:14px;font-weight:600;color:var(--snow)}
.ring-label{display:flex;justify-content:space-between;font-size:12px;color:var(--fog);margin:10px 0 6px}
.ring-track{height:3px;background:rgba(0,245,255,0.08);border-radius:0;overflow:hidden;border:1px solid rgba(0,245,255,0.1)}
.ring-fill{height:100%;border-radius:0;background:linear-gradient(90deg,var(--blue),var(--accent));transition:width 0.8s ease;box-shadow:0 0 6px rgba(0,245,255,0.5)}
/* .main handled above */
.topbar{background:rgba(5,3,15,0.95);backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,245,255,0.12);padding:16px 36px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;z-index:50;box-shadow:0 1px 20px rgba(0,245,255,0.05)}
.page-title{font-family:'Playfair Display',serif;font-size:21px;font-weight:400;color:var(--accent);text-shadow:0 0 12px rgba(0,245,255,0.4);letter-spacing:1px}
.topbar-right{display:flex;align-items:center;gap:10px}
.search-wrap{position:relative}
.search-ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:13px;opacity:0.4;pointer-events:none}
.search-input{background:rgba(0,245,255,0.03);border:1px solid rgba(0,245,255,0.15);border-radius:2px;padding:8px 12px 8px 32px;color:var(--snow);font-family:'Outfit',sans-serif;font-size:13px;width:200px;outline:none}
.search-input::placeholder{color:var(--fog)}
.search-input:focus{border-color:rgba(0,245,255,0.5);box-shadow:0 0 8px rgba(0,245,255,0.15)}
.btn-primary{background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:2px;padding:9px 16px;font-size:13px;font-weight:600;font-family:'Outfit',sans-serif;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all 0.2s;box-shadow:var(--neon-glow),inset 0 0 10px rgba(0,245,255,0.05);text-transform:uppercase;letter-spacing:1px}
.btn-primary:hover{background:rgba(0,245,255,0.15);box-shadow:0 0 20px rgba(0,245,255,0.6),0 0 40px rgba(0,245,255,0.3),inset 0 0 15px rgba(0,245,255,0.1)}
.content{padding:28px 36px 96px 36px;flex:1;overflow-y:auto;overflow-x:hidden;min-height:0}
/* When mindmap is active, .content must not clip or pad it */
.content:has(#view-mindmap.active){padding:0;overflow:hidden;}
.view{display:none}
.view.active{display:block;animation:fadeUp 0.25s ease}
/* Mindmap fills the entire main area */
#view-mindmap.active{
  display:flex;flex-direction:column;
  height:100%;
  min-height:0;
  animation:none;
  overflow:hidden;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.filter-bar{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.filter-chip{padding:6px 16px;border-radius:2px;font-size:12px;cursor:pointer;border:1px solid rgba(0,245,255,0.15);color:var(--mist);background:transparent;font-family:'Outfit',sans-serif;transition:all 0.2s;letter-spacing:1px;text-transform:uppercase}
.filter-chip:hover{color:var(--snow);border-color:rgba(255,255,255,0.2)}
.filter-chip.active{background:rgba(0,245,255,0.08);border-color:rgba(0,245,255,0.5);color:var(--accent);box-shadow:0 0 10px rgba(0,245,255,0.2),inset 0 0 8px rgba(0,245,255,0.05);text-shadow:0 0 8px rgba(0,245,255,0.6)}
.goals-grid{position:relative;min-height:200px;width:100%}
.goal-card{background:rgba(8,6,20,0.95);backdrop-filter:blur(10px);border:1px solid rgba(0,245,255,0.12);border-radius:var(--r-xl);padding:22px;position:absolute;width:320px;overflow:hidden;transition:border-color 0.2s,box-shadow 0.2s;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.goal-card:hover{border-color:rgba(0,245,255,0.5);box-shadow:0 0 20px rgba(0,245,255,0.2),0 0 40px rgba(0,245,255,0.08),inset 0 0 20px rgba(0,245,255,0.03)}
.goal-card.done{border-color:rgba(0,255,157,0.35);box-shadow:0 0 15px rgba(0,255,157,0.15)}
.goal-card.dragging{opacity:0.5;box-shadow:0 0 30px rgba(0,245,255,0.5)!important;border-color:var(--accent)!important;z-index:999}
.card-stripe{position:absolute;top:0;left:22px;right:22px;height:2px;border-radius:0 0 2px 2px}
.done-ribbon{position:absolute;top:14px;right:-28px;background:var(--green);color:var(--night);font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:3px 36px;transform:rotate(35deg);box-shadow:var(--neon-green);z-index:10}
.card-cover{width:calc(100% + 44px);margin:-22px -22px 14px -22px;height:130px;background-size:cover;background-position:center 50%;position:relative;overflow:hidden;border-radius:var(--r-xl) var(--r-xl) 0 0}
.card-cover-move{position:absolute;top:8px;left:8px;width:28px;height:28px;border-radius:6px;background:rgba(0,0,0,0.55);border:1px solid rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;cursor:grab;color:rgba(255,255,255,0.8);font-size:14px;z-index:10;user-select:none;transition:all 0.15s}
.card-cover-move:hover{background:rgba(0,0,0,0.8);color:#fff}
.card-cover-placeholder{width:calc(100% + 44px);margin:-22px -22px 14px -22px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-bottom:1px dashed rgba(255,255,255,0.07);transition:all 0.15s}
.card-cover-placeholder:hover{background:rgba(255,255,255,0.03);border-bottom-color:rgba(232,201,106,0.3)}
.card-cover-placeholder span{font-size:11px;color:var(--fog);transition:color 0.15s}
.card-cover-placeholder:hover span{color:var(--accent)}
.card-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.goal-emoji-wrap{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.card-meta{flex:1;min-width:0}
.goal-name-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
.goal-name{font-family:'Playfair Display',serif;font-size:16px;font-weight:400;color:var(--snow);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;text-shadow:0 0 10px rgba(232,224,255,0.3)}
.drag-handle{cursor:grab;width:26px;height:26px;border-radius:2px;display:flex;align-items:center;justify-content:center;color:rgba(0,245,255,0.3);font-size:14px;user-select:none;flex-shrink:0;transition:all 0.15s}
.drag-handle:hover{background:rgba(0,245,255,0.08);color:var(--accent);text-shadow:var(--neon-glow)}
.drag-handle:active{cursor:grabbing}
.goal-cat{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--fog);margin-bottom:6px}
.card-actions{display:flex;align-items:center;gap:2px;margin-top:4px}
.icon-btn{background:none;border:none;cursor:pointer;font-size:14px;padding:4px 5px;border-radius:2px;color:rgba(0,245,255,0.35);transition:all 0.15s;line-height:1}
.icon-btn:hover{background:rgba(0,245,255,0.08);color:var(--accent);text-shadow:var(--neon-glow)}
.prog-nums{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.prog-pct{font-size:22px;font-weight:600;font-family:'Outfit',monospace;letter-spacing:2px}
.prog-steps{font-size:12px;color:var(--fog)}
.prog-track{height:4px;background:rgba(0,245,255,0.08);border-radius:0;overflow:hidden;margin-bottom:8px;border:1px solid rgba(0,245,255,0.1)}
.prog-fill{height:100%;border-radius:0;transition:width 0.8s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 0 8px currentColor}
.prog-desc{font-size:12px;color:var(--fog);line-height:1.5;margin-bottom:12px}
.milestones{margin-bottom:14px}
.m-item{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.04);cursor:pointer;user-select:none}
.m-item:last-child{border-bottom:none}
.m-item:hover{opacity:0.8}
.m-check{width:17px;height:17px;border-radius:0;border:1px solid rgba(0,245,255,0.3);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:9px;transition:all 0.2s;transform:rotate(45deg)}
.m-check.done{background:var(--green);border-color:var(--green);color:var(--night);box-shadow:var(--neon-green)}
.m-text{font-size:13px;color:var(--mist);flex:1;font-family:'Outfit',sans-serif;letter-spacing:0.3px}
.m-text.done{text-decoration:line-through;color:var(--fog)}
.card-attachments{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.att-chip{display:inline-flex;align-items:center;gap:5px;background:var(--night3);border:0.5px solid rgba(255,255,255,0.1);border-radius:6px;padding:4px 9px;font-size:11px;color:var(--mist);cursor:pointer;transition:all 0.15s;max-width:160px}
.att-chip:hover{background:var(--night4);color:var(--snow)}
.att-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid rgba(255,255,255,0.05);margin-top:12px}
.dl-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:3px 10px;border-radius:20px}
.dl-ok{background:rgba(0,245,255,0.05);color:var(--mist);border:1px solid rgba(0,245,255,0.1)}
.dl-soon{background:rgba(0,245,255,0.06);color:var(--accent);border:1px solid rgba(0,245,255,0.2)}
.dl-urgent{background:rgba(255,45,107,0.08);color:var(--red);border:1px solid rgba(255,45,107,0.3);box-shadow:0 0 8px rgba(255,45,107,0.2)}
.dl-done{background:rgba(0,255,157,0.08);color:var(--green);border:1px solid rgba(0,255,157,0.25);box-shadow:0 0 6px rgba(0,255,157,0.2)}
.dl-over{background:var(--red-dim);color:var(--red)}
.add-step-btn{background:none;border:1px dashed rgba(0,245,255,0.2);border-radius:2px;color:rgba(0,245,255,0.4);font-size:12px;font-family:'Outfit',sans-serif;padding:3px 9px;cursor:pointer;transition:all 0.15s}
.add-step-btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 8px rgba(0,245,255,0.2)}
.log-toggle{font-size:12px;color:var(--fog);cursor:pointer;padding:8px 0 0;display:flex;align-items:center;gap:5px;user-select:none}
.log-toggle:hover{color:var(--mist)}
.log-entries{margin-top:6px}
.log-entry{display:flex;gap:8px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,0.04);font-size:12px}
.log-entry:last-child{border-bottom:none}
.log-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:5px;flex-shrink:0}
.log-text{color:var(--mist);flex:1}
.log-date{color:var(--fog);white-space:nowrap}
.empty-state{text-align:center;padding:80px 24px;color:var(--fog);position:absolute;left:50%;transform:translateX(-50%);width:320px}
.empty-icon{font-size:50px;margin-bottom:14px;opacity:0.4}
.empty-title{font-family:'Playfair Display',serif;font-size:20px;color:var(--mist);margin-bottom:8px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.stat-card,.chart-card{background:rgba(8,6,20,0.95);border:1px solid rgba(0,245,255,0.1);border-radius:2px;padding:22px 24px;box-shadow:inset 0 0 20px rgba(0,245,255,0.02)}
.stat-card-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:8px;opacity:0.7}
.stat-card-value{font-family:'Outfit',sans-serif;font-size:38px;font-weight:300;line-height:1;color:var(--accent);text-shadow:var(--neon-glow);letter-spacing:2px}
.stat-card-sub{font-size:12px;color:var(--mist);margin-top:5px}
.chart-card{margin-bottom:18px}
.chart-card-title{font-family:'Outfit',sans-serif;font-size:14px;font-weight:500;margin-bottom:2px;color:var(--accent);letter-spacing:2px;text-transform:uppercase;text-shadow:0 0 8px rgba(0,245,255,0.3)}
.chart-card-sub{font-size:12px;color:var(--fog);margin-bottom:18px}
.chart-wrap{position:relative;width:100%;height:220px}
.timeline{position:relative;padding-left:28px}
.timeline::before{content:'';position:absolute;left:6px;top:8px;bottom:0;width:2px;background:rgba(255,255,255,0.06)}
.tl-item{position:relative;margin-bottom:26px}
.tl-dot{position:absolute;left:-25px;top:4px;width:13px;height:13px;border-radius:0;transform:rotate(45deg);border:1px solid rgba(0,245,255,0.3);background:var(--night2)}
.tl-dot.done{background:var(--green);border-color:var(--green);box-shadow:var(--neon-green)}
.tl-dot.near{background:var(--accent);border-color:var(--accent);box-shadow:var(--neon-glow)}
.tl-date{font-size:11px;color:var(--fog);margin-bottom:3px}
.tl-name{font-size:15px;font-weight:500;margin-bottom:2px}
.tl-meta{font-size:12px;color:var(--mist)}
.mood-hero{background:rgba(8,6,20,0.95);border:1px solid rgba(0,245,255,0.12);border-radius:2px;padding:32px 36px;text-align:center;margin-bottom:20px;box-shadow:inset 0 0 30px rgba(0,245,255,0.02)}
.mood-hero-title{font-family:'Playfair Display',serif;font-size:22px;font-weight:400;margin-bottom:6px;color:var(--accent);text-shadow:var(--neon-glow)}
.mood-hero-sub{font-size:13px;color:var(--mist);margin-bottom:28px}
.mood-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.mood-btn{width:70px;height:70px;border-radius:16px;border:2px solid transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:all 0.2s;padding:0}
.mood-btn:hover{transform:scale(1.1);border-color:rgba(255,255,255,0.2)}
.mood-btn.selected{transform:scale(1.15);border-color:var(--accent);box-shadow:var(--neon-glow)}
.mood-btn svg{width:34px;height:34px}
.mood-btn-label{font-size:10px;color:var(--fog);letter-spacing:0.5px;font-family:'Outfit',sans-serif}
.mood-hist-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--night3);border-radius:10px}
.mood-hist-dot{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mood-hist-dot svg{width:22px;height:22px}
.mood-hist-label{font-size:14px;font-weight:500}
.mood-hist-date{font-size:12px;color:var(--fog);margin-left:auto}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);z-index:300;align-items:center;justify-content:center;padding:20px}
.overlay.open{display:flex}
.modal{background:rgba(8,6,20,0.98);border:1px solid rgba(0,245,255,0.2);border-radius:2px;padding:30px 34px;width:500px;max-width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 0 40px rgba(0,245,255,0.1),0 32px 80px rgba(0,0,0,0.9);animation:modalIn 0.22s cubic-bezier(0.34,1.56,0.64,1);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
@keyframes modalIn{from{transform:translateY(16px) scale(0.97);opacity:0}to{transform:none;opacity:1}}
.modal-title{font-family:'Playfair Display',serif;font-size:22px;font-weight:400;margin-bottom:22px;color:var(--accent);text-shadow:var(--neon-glow);letter-spacing:1px}
.form-group{margin-bottom:15px}
.form-label{display:block;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--fog);margin-bottom:6px}
.form-input{width:100%;padding:10px 13px;background:rgba(0,245,255,0.03);border:1px solid rgba(0,245,255,0.15);border-radius:2px;color:var(--snow);font-family:'Outfit',sans-serif;font-size:14px;outline:none;transition:all 0.2s}
.form-input:focus{border-color:rgba(0,245,255,0.6);box-shadow:0 0 10px rgba(0,245,255,0.15),inset 0 0 8px rgba(0,245,255,0.05)}
.form-input::placeholder{color:var(--fog)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.icon-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.icon-opt{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:19px;cursor:pointer;background:var(--night3);border:1.5px solid transparent;transition:all 0.12s}
.icon-opt:hover{background:var(--night4)}
.icon-opt.selected{border-color:var(--accent);background:var(--accent-dim);box-shadow:0 0 8px rgba(0,245,255,0.3)}
.color-row{display:flex;gap:9px;flex-wrap:wrap}
.color-opt{width:27px;height:27px;border-radius:50%;cursor:pointer;border:2.5px solid transparent;transition:all 0.15s;position:relative;display:flex;align-items:center;justify-content:center}
.color-opt.selected{border-color:rgba(255,255,255,0.5)}
.color-opt.selected::after{content:'\2713';font-size:12px;font-weight:700;color:var(--night)}
.prio-row{display:flex;gap:8px}
.prio-btn{flex:1;padding:8px;border-radius:8px;font-size:12px;font-family:'Outfit',sans-serif;border:1px solid rgba(255,255,255,0.1);background:var(--night3);color:var(--mist);cursor:pointer;text-align:center;transition:all 0.15s}
.prio-low.on{background:var(--blue-dim)!important;border-color:rgba(106,168,232,0.4)!important;color:var(--blue)!important}
.prio-med.on{background:var(--accent-dim)!important;border-color:rgba(232,201,106,0.4)!important;color:var(--accent)!important}
.prio-high.on{background:var(--red-dim)!important;border-color:rgba(232,112,106,0.4)!important;color:var(--red)!important}
.m-editor{background:var(--night3);border-radius:8px;padding:8px;min-height:42px}
.m-edit-row{display:flex;align-items:center;gap:7px;padding:5px 3px;border-bottom:1px solid rgba(255,255,255,0.05)}
.m-edit-row:last-child{border-bottom:none}
.m-edit-input{flex:1;background:none;border:none;color:var(--snow);font-family:'Outfit',sans-serif;font-size:13px;outline:none;padding:2px 5px}
.m-del{background:none;border:none;cursor:pointer;color:var(--fog);font-size:15px;padding:2px 5px;border-radius:4px;transition:all 0.15s;font-family:monospace}
.m-del:hover{color:var(--red);background:var(--red-dim)}
/* Difficulty stars — milestone editor */
.m-diff-stars{display:flex;gap:1px;align-items:center;flex-shrink:0;padding:0 4px}
.m-diff-star{font-size:13px;color:rgba(255,255,255,0.13);cursor:pointer;transition:color 0.1s,transform 0.1s;line-height:1;user-select:none}
.m-diff-star:hover{transform:scale(1.25)}
.m-diff-star.active{color:#e8c96a;text-shadow:0 0 6px rgba(232,201,106,0.6)}
/* Difficulty badge — card milestone display */
.m-diff-badge{margin-left:auto;flex-shrink:0;pointer-events:none}
.m-rank-badge{
  font-size:12px;
  font-weight:900;
  font-family:'Outfit',sans-serif;
  letter-spacing:1.5px;
  padding:2px 8px;
  border-radius:5px;
  border:1px solid;
  line-height:1.5;
  opacity:1;
}
.add-m-row{display:flex;gap:8px;margin-top:8px}
.add-m-input{flex:1;background:var(--night3);border:1px dashed rgba(255,255,255,0.12);border-radius:6px;color:var(--snow);font-family:'Outfit',sans-serif;font-size:13px;padding:7px 11px;outline:none}
.add-m-input::placeholder{color:var(--fog)}
.btn-sm{background:var(--night4);border:none;color:var(--mist);font-family:'Outfit',sans-serif;font-size:13px;padding:7px 13px;border-radius:6px;cursor:pointer;transition:all 0.15s;white-space:nowrap}
.btn-sm:hover{background:var(--night3);color:var(--snow)}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.06)}
.btn-ghost{background:none;border:1px solid rgba(123,95,255,0.3);border-radius:2px;padding:9px 17px;font-size:13px;font-family:'Outfit',sans-serif;cursor:pointer;color:var(--mist);transition:all 0.2s;letter-spacing:0.5px}
.btn-ghost:hover{border-color:rgba(123,95,255,0.7);color:var(--snow);box-shadow:0 0 10px rgba(123,95,255,0.2)}
.upload-zone{border:1.5px dashed rgba(255,255,255,0.15);border-radius:10px;padding:16px;text-align:center;cursor:pointer;transition:all 0.15s;background:var(--night3)}
.upload-zone:hover{border-color:var(--accent);background:var(--accent-dim)}
.upload-zone-text{font-size:13px;color:var(--fog)}
.upload-zone-text span{color:var(--accent);text-decoration:underline}
.file-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.file-item{display:flex;align-items:center;gap:9px;background:var(--night4);border-radius:7px;padding:8px 12px}
.file-name{font-size:12px;color:var(--mist);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-size{font-size:11px;color:var(--fog);flex-shrink:0}
.file-del{background:none;border:none;cursor:pointer;color:var(--fog);font-size:14px;padding:2px 5px;border-radius:4px;transition:all 0.15s;font-family:monospace}
.file-del:hover{color:var(--red);background:var(--red-dim)}
.log-list{max-height:180px;overflow-y:auto;margin-bottom:14px;background:var(--night3);border-radius:8px;padding:8px 12px}
.bg-preview{width:100%;height:160px;border-radius:10px;background:var(--night3);background-size:cover;background-position:center;border:1px solid rgba(255,255,255,0.1);margin-bottom:14px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.bg-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px}
.bg-preset{width:100%;aspect-ratio:16/9;border-radius:7px;cursor:pointer;border:2px solid transparent;background-size:cover;background-position:center;transition:all 0.15s}
.bg-preset:hover{transform:scale(1.05)}
.bg-preset.selected{border-color:var(--accent)}
.viewer-att{display:flex;align-items:center;gap:10px;background:var(--night3);border-radius:8px;padding:10px 14px;cursor:pointer;transition:all 0.15s;margin-bottom:8px}
.viewer-att:hover{background:var(--night4)}
.viewer-att-name{font-size:13px;color:var(--snow);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.viewer-att-size{font-size:11px;color:var(--fog)}
.viewer-att-del{background:none;border:none;cursor:pointer;color:var(--fog);font-size:14px;padding:4px 7px;border-radius:5px;transition:all 0.15s;font-family:monospace}
.viewer-att-del:hover{color:var(--red);background:var(--red-dim)}
.mood-popup-box{background:var(--night2);border:1px solid rgba(255,255,255,0.1);border-radius:24px;padding:36px 40px;width:460px;max-width:95vw;text-align:center;animation:modalIn 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.celebrate-box{
  position:relative;
  background:linear-gradient(160deg,#1a1730 0%,#0d0b1e 100%);
  border:1px solid rgba(0,245,255,0.18);
  border-radius:4px;
  padding:0;
  text-align:center;
  max-width:400px;
  width:92%;
  animation:celebIn 0.45s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 0 60px rgba(0,245,255,0.12),0 24px 80px rgba(0,0,0,0.9);
  overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
}
.celebrate-box::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  box-shadow:0 0 20px var(--accent);
}
.cel-header{
  padding:28px 36px 0;
  position:relative;
  z-index:1;
}
.cel-title-banner{
  display:inline-block;
  background:linear-gradient(135deg,rgba(0,245,255,0.15),rgba(123,95,255,0.1));
  border:1px solid rgba(0,245,255,0.25);
  border-radius:2px;
  padding:5px 20px;
  font-family:'Outfit',sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--accent);
  text-shadow:var(--neon-glow);
  margin-bottom:20px;
}
.cel-icon-wrap{
  font-size:56px;
  margin-bottom:14px;
  animation:popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
  filter:drop-shadow(0 0 16px rgba(0,245,255,0.3));
}
.cel-quest-name{
  font-family:'Playfair Display',serif;
  font-size:24px;
  font-weight:600;
  color:var(--snow);
  letter-spacing:1px;
  line-height:1.2;
  margin-bottom:6px;
  text-shadow:0 0 20px rgba(232,224,255,0.3);
}
.cel-quest-done{
  font-family:'Outfit',sans-serif;
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--green);
  text-shadow:var(--neon-green);
  margin-bottom:28px;
}
.cel-divider{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,245,255,0.2),transparent);
  margin:0 36px;
}
.cel-btn-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  padding:28px 36px 32px;
}
.cel-btn-circle{
  width:58px;
  height:58px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1);
  position:relative;
  outline:none;
}
.cel-btn-circle:hover{transform:scale(1.15)}
.cel-btn-circle:active{transform:scale(0.95)}
.cel-btn-blue{
  background:radial-gradient(circle at 35% 35%,#4da8e8,#1a6fc4);
  box-shadow:0 0 20px rgba(77,168,232,0.5),0 4px 16px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.25);
}
.cel-btn-blue:hover{box-shadow:0 0 32px rgba(77,168,232,0.8),0 6px 20px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.3)}
.cel-btn-red{
  background:radial-gradient(circle at 35% 35%,#e84d7a,#c41a3f);
  box-shadow:0 0 20px rgba(232,77,122,0.5),0 4px 16px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.25);
}
.cel-btn-red:hover{box-shadow:0 0 32px rgba(232,77,122,0.8),0 6px 20px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.3)}
.cel-btn-circle svg{width:26px;height:26px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4))}
.cel-btn-label{
  position:absolute;
  bottom:-20px;
  left:50%;
  transform:translateX(-50%);
  font-size:9px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--fog);
  white-space:nowrap;
  font-family:'Outfit',sans-serif;
}
@keyframes introPulse{0%,100%{opacity:0.4}50%{opacity:1}}
@keyframes celebIn{from{transform:scale(0.75) translateY(40px) rotate(-2deg);opacity:0}to{transform:scale(1) translateY(0) rotate(0deg);opacity:1}}
@keyframes popIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.confetti-piece{position:absolute;border-radius:2px;animation:confettiFall linear forwards}
@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}
#music-player{position:fixed;bottom:0;left:250px;right:0;z-index:200;background:rgba(5,3,15,0.98);backdrop-filter:blur(16px);border-top:1px solid rgba(0,245,255,0.2);border-radius:12px 12px 0 0;height:60px;overflow:hidden;transition:height 0.3s ease,left 0.3s ease;box-shadow:0 -4px 24px rgba(0,245,255,0.1)}
#music-player.expanded{height:212px}
.player-bar{display:flex;align-items:center;gap:10px;padding:0 20px;height:52px;cursor:pointer;user-select:none;border-radius:12px 12px 0 0}
.player-btn{background:none;border:none;cursor:pointer;color:var(--mist);padding:5px 7px;border-radius:6px;transition:all 0.15s;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.player-btn:hover{color:var(--snow);background:rgba(255,255,255,0.07)}
.player-btn.shuffle-on{color:var(--accent);background:var(--accent-dim)}
.player-info{flex:1;min-width:0}
.player-title{font-size:12px;font-weight:500;color:var(--snow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-sub{font-size:10px;color:var(--fog)}
.player-controls{display:flex;align-items:center;gap:4px;flex-shrink:0}
.player-sep{width:1px;height:16px;background:rgba(255,255,255,0.1);margin:0 4px;flex-shrink:0}
.player-vol{display:flex;align-items:center;gap:6px}
.player-vol input[type=range]{width:70px;accent-color:var(--accent)}
.player-vol-val{font-size:11px;color:var(--fog);width:28px;text-align:right}
.playlist-sel{display:flex;gap:6px;padding:6px 20px;overflow-x:auto;border-bottom:1px solid rgba(255,255,255,0.05)}
.music-progress-wrap{display:none}
.music-time{font-size:10px;color:var(--fog);font-family:monospace;flex-shrink:0;min-width:32px}
.music-progress-track{flex:1;height:3px;background:rgba(255,255,255,0.08);border-radius:2px;cursor:pointer;position:relative;overflow:hidden}
.music-progress-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--accent));border-radius:2px;transition:width 0.5s linear;pointer-events:none}
.music-progress-track:hover .music-progress-fill{background:var(--accent)}
.pl-chip{padding:4px 12px;border-radius:20px;font-size:11px;cursor:pointer;border:1px solid rgba(255,255,255,0.1);color:var(--fog);background:transparent;font-family:'Outfit',sans-serif;white-space:nowrap;transition:all 0.15s;flex-shrink:0}
.pl-chip:hover{color:var(--snow)}
.pl-chip.active{background:rgba(0,245,255,0.08);border-color:rgba(0,245,255,0.4);color:var(--accent);box-shadow:0 0 8px rgba(0,245,255,0.15)}
.sc-frame{width:100%;height:136px;border:none;display:block;background:#000}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,245,255,0.2);border-radius:0;box-shadow:0 0 4px rgba(0,245,255,0.3)}

/* ── EDITOR ─────────────────────────────────────────────── */
/* EDITOR */
.editor-wrap{display:flex;flex-direction:column;min-height:calc(100vh - 180px)}
/* Toolbar — dark strip */
.editor-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:3px;padding:6px 12px;background:#1e1e2a;border-bottom:1px solid rgba(255,255,255,0.07);position:sticky;top:0;z-index:20;flex-shrink:0}
.tb-group{display:flex;align-items:center;gap:2px}
.tb-sep{width:1px;height:18px;background:rgba(255,255,255,0.12);margin:0 4px;flex-shrink:0}
.tb-btn{background:none;border:1px solid transparent;border-radius:3px;color:#b0b0c0;cursor:pointer;font-family:'Outfit',sans-serif;font-size:12px;padding:4px 7px;transition:all 0.12s;white-space:nowrap;line-height:1.4}
.tb-btn:hover{background:rgba(255,255,255,0.09);border-color:rgba(255,255,255,0.18);color:#fff}
.tb-btn.tb-active{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);color:#fff}
.tb-select{background:#161622;border:1px solid rgba(255,255,255,0.14);border-radius:3px;color:#b0b0c0;font-family:'Outfit',sans-serif;font-size:12px;padding:4px 6px;cursor:pointer;outline:none}
.tb-select:focus{border-color:rgba(255,255,255,0.3);color:#fff}
.tb-color-inp{width:0;height:0;opacity:0;position:absolute;pointer-events:none;pointer-events:none}
/* Paper area */
.editor-paper-bg{flex:1;overflow-y:auto;background:#c8c8c8;padding:28px 20px 80px}
.editor-paper{background:#fff;max-width:800px;margin:0 auto;padding:56px 68px 72px;box-shadow:0 2px 16px rgba(0,0,0,0.22),0 1px 4px rgba(0,0,0,0.12);min-height:860px;border-radius:1px}
/* Paper content */
.editor-title-input{width:100%;background:none;border:none;outline:none;font-family:'Georgia',serif;font-size:28px;font-weight:700;color:#111;margin-bottom:14px;padding:0;display:block}
.editor-title-input::placeholder{color:#ccc}
.editor-body{outline:none;font-family:'Georgia',serif;font-size:15px;line-height:1.9;color:#1a1a1a;min-height:500px}
.editor-body:empty::before{content:attr(data-placeholder);color:#bbb;pointer-events:none;font-style:italic}
.editor-body h1{font-size:24px;font-weight:700;color:#111;margin:22px 0 8px;border-bottom:2px solid #ebebeb;padding-bottom:6px}
.editor-body h2{font-size:19px;font-weight:700;color:#222;margin:18px 0 6px}
.editor-body h3{font-size:15px;font-weight:700;color:#333;margin:14px 0 4px;text-transform:uppercase;letter-spacing:.8px}
.editor-body p{margin:0 0 10px}
.editor-body ul,.editor-body ol{padding-left:26px;margin:8px 0 12px}
.editor-body li{margin:3px 0}
.editor-body blockquote{border-left:4px solid #3b82f6;margin:14px 0;padding:10px 18px;background:#f0f6ff;color:#444;font-style:italic;border-radius:0 4px 4px 0}
.editor-body pre{background:#f3f3f3;border:1px solid #ddd;border-radius:4px;padding:12px 16px;font-family:monospace;font-size:13px;color:#333;overflow-x:auto;white-space:pre-wrap}
.editor-body table{border-collapse:collapse;width:100%;margin:14px 0;font-size:14px}
.editor-body td,.editor-body th{border:1px solid #ddd;padding:8px 12px;color:#333;min-width:60px}
.editor-body th{background:#f5f5f5;font-weight:700;color:#111;text-align:left}
.editor-body tr:nth-child(even) td{background:#fafafa}
.editor-body hr{border:none;border-top:2px solid #e8e8e8;margin:22px 0}
.editor-body a{color:#3b82f6;text-decoration:underline}
.editor-body img{max-width:100%;display:inline-block;vertical-align:bottom;border-radius:2px}
/* Image wrapper */
.ei-wrap{display:inline-block;position:relative;line-height:0;vertical-align:bottom;cursor:default}
.ei-wrap.ei-sel{outline:2px solid #3b82f6;outline-offset:1px}
.ei-handle{position:absolute;width:9px;height:9px;background:#3b82f6;border:2px solid #fff;border-radius:1px;box-sizing:border-box;z-index:5}
.ei-handle.eh-se{bottom:-5px;right:-5px;cursor:se-resize}
.ei-handle.eh-sw{bottom:-5px;left:-5px;cursor:sw-resize}
.ei-handle.eh-ne{top:-5px;right:-5px;cursor:ne-resize}
.ei-handle.eh-nw{top:-5px;left:-5px;cursor:nw-resize}
.ei-handle.eh-e{top:50%;right:-5px;transform:translateY(-50%);cursor:e-resize}
.ei-handle.eh-w{top:50%;left:-5px;transform:translateY(-50%);cursor:w-resize}
.ei-floatbar{position:absolute;top:-33px;left:50%;transform:translateX(-50%);background:#1e1e2a;border-radius:4px;padding:3px 5px;display:flex;gap:2px;z-index:10;white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.5);pointer-events:all}
.ei-floatbar button{background:none;border:1px solid transparent;border-radius:3px;color:#b0b0c0;cursor:pointer;font-size:11px;padding:3px 6px;transition:all .12s}
.ei-floatbar button:hover{background:rgba(255,255,255,.1);color:#fff}
/* Crop overlay */
#ed-crop-ov{display:none;position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;flex-direction:column;gap:14px}
#ed-crop-wrap{position:relative;display:inline-block}
#ed-crop-img{display:block;max-width:82vw;max-height:68vh;object-fit:contain}
#ed-crop-box{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.52);cursor:move;box-sizing:border-box;min-width:20px;min-height:20px}
.ec-corner{position:absolute;width:11px;height:11px;background:#3b82f6;border:2px solid #fff;box-sizing:border-box;border-radius:1px}
.ec-nw{top:-6px;left:-6px;cursor:nw-resize}
.ec-ne{top:-6px;right:-6px;cursor:ne-resize}
.ec-sw{bottom:-6px;left:-6px;cursor:sw-resize}
.ec-se{bottom:-6px;right:-6px;cursor:se-resize}
.ed-crop-btns{display:flex;gap:10px}
.ed-crop-btn{padding:8px 20px;border-radius:5px;font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:'Outfit',sans-serif}
.ed-crop-ok{background:#3b82f6;color:#fff}
.ed-crop-cancel{background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.22)}
/* Table modal */
#ed-tbl-modal{display:none;position:fixed;inset:0;z-index:8000;background:rgba(0,0,0,.5);align-items:center;justify-content:center}
.ed-tbl-box{background:#fff;border-radius:8px;padding:26px 30px;min-width:240px;box-shadow:0 8px 40px rgba(0,0,0,.25)}
@media print{
  .editor-toolbar,.sidebar,.topbar,#music-player{display:none!important}
  .editor-paper-bg{background:#fff;padding:0}
  .editor-paper{box-shadow:none;padding:20px;max-width:100%;min-height:auto}
}
.xp-wrap{padding:14px 24px 16px;border-top:1px solid rgba(0,245,255,0.12);margin-top:10px;position:relative;overflow:hidden}
.xp-wrap::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,245,255,0.03) 0%,transparent 60%);pointer-events:none}
.xp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.xp-left{display:flex;align-items:center;gap:9px}
.xp-lvl{font-size:26px;font-weight:700;color:var(--xp-color,var(--accent));font-family:monospace;text-shadow:0 0 10px var(--xp-glow,rgba(0,245,255,0.6));line-height:1;transition:all 0.5s;min-width:36px;text-align:center}
.xp-info{display:flex;flex-direction:column;gap:1px}
.xp-title{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--xp-color,var(--accent));opacity:0.9;transition:color 0.5s}
.xp-total{font-size:10px;color:var(--fog);font-family:monospace}
.xp-next{font-size:10px;color:var(--fog);font-family:monospace;text-align:right}
.xp-track{height:5px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);overflow:hidden;border-radius:0;position:relative}
.xp-fill{height:100%;background:linear-gradient(90deg,var(--xp-color2,var(--blue)),var(--xp-color,var(--accent)));transition:width 1s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 10px var(--xp-glow,rgba(0,245,255,0.5));position:relative}
.xp-fill::after{content:'';position:absolute;right:0;top:0;bottom:0;width:4px;background:rgba(255,255,255,0.6);filter:blur(2px)}

/* XP TOPBAR BANNER */
.xp-banner{display:flex;align-items:center;gap:10px;padding:14px 16px 12px;cursor:default;user-select:none;width:100%;min-width:0;border-bottom:1px solid rgba(0,245,255,0.1);margin-bottom:6px;background:rgba(0,0,0,0.2);box-sizing:border-box;justify-content:center}
.xp-banner-lvl{font-size:20px;font-weight:700;font-family:monospace;color:var(--xp-color,var(--accent));text-shadow:0 0 10px var(--xp-glow,rgba(0,245,255,0.6));line-height:1;flex-shrink:0;transition:all 0.5s;min-width:28px;text-align:center}
.xp-banner-body{flex:1;min-width:0}
.xp-banner-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;gap:8px}
.xp-banner-title{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--xp-color,var(--accent));font-weight:600;transition:color 0.5s;text-shadow:0 0 8px var(--xp-glow,rgba(0,245,255,0.4))}
.xp-banner-xp{font-size:10px;color:var(--fog);font-family:monospace}
.xp-banner-track{height:3px;background:rgba(255,255,255,0.06);overflow:hidden;position:relative;border-radius:0}
.xp-banner-fill{height:100%;background:linear-gradient(90deg,var(--xp-color2,var(--blue)),var(--xp-color,var(--accent)));transition:width 1s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 8px var(--xp-glow,rgba(0,245,255,0.5))}

/* XP TOAST */
.xp-toast{position:fixed;bottom:70px;right:28px;background:rgba(5,3,15,0.97);border:1px solid var(--xp-color,var(--accent));border-left:3px solid var(--xp-color,var(--accent));padding:10px 18px 10px 14px;font-size:13px;color:var(--xp-color,var(--accent));z-index:800;pointer-events:none;white-space:nowrap;font-family:monospace;letter-spacing:1px;animation:xpSlideIn 0.35s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 20px var(--xp-glow,rgba(0,245,255,0.3))}
@keyframes xpSlideIn{from{transform:translateX(60px);opacity:0}to{transform:translateX(0);opacity:1}}

/* LEVEL COLOR THEMES */
:root{--xp-color:#00f5ff;--xp-color2:#7b5fff;--xp-glow:rgba(0,245,255,0.5)}
body.xp-lvl-2{--xp-color:#00ff9d;--xp-color2:#00c8d4;--xp-glow:rgba(0,255,157,0.5)}
body.xp-lvl-3{--xp-color:#5ec98a;--xp-color2:#00ff9d;--xp-glow:rgba(94,201,138,0.5)}
body.xp-lvl-4{--xp-color:#e8c96a;--xp-color2:#e8906a;--xp-glow:rgba(232,201,106,0.5)}
body.xp-lvl-5{--xp-color:#e8906a;--xp-color2:#e8706a;--xp-glow:rgba(232,144,106,0.5)}
body.xp-lvl-6{--xp-color:#e8706a;--xp-color2:#ff2d6b;--xp-glow:rgba(232,112,106,0.5)}
body.xp-lvl-7{--xp-color:#b06ae8;--xp-color2:#7b5fff;--xp-glow:rgba(176,106,232,0.5)}
body.xp-lvl-8{--xp-color:#7b5fff;--xp-color2:#ff00c8;--xp-glow:rgba(123,95,255,0.5)}
body.xp-lvl-9{--xp-color:#ff00c8;--xp-color2:#b06ae8;--xp-glow:rgba(255,0,200,0.5)}
body.xp-lvl-10{--xp-color:#ff2d6b;--xp-color2:#ff00c8;--xp-glow:rgba(255,45,107,0.5)}
body.xp-lvl-11{--xp-color:#ffdd44;--xp-color2:#e8c96a;--xp-glow:rgba(255,221,68,0.6)}
body.xp-lvl-12{--xp-color:#fff;--xp-color2:#e8c96a;--xp-glow:rgba(255,255,255,0.5)}
body.xp-lvl-13{--xp-color:#fff;--xp-color2:#7b5fff;--xp-glow:rgba(255,255,255,0.7)}
body.xp-lvl-14{--xp-color:#ffdd44;--xp-color2:#ff2d6b;--xp-glow:rgba(255,221,68,0.8)}
body.xp-lvl-15{--xp-color:#fff;--xp-color2:#ffdd44;--xp-glow:rgba(255,255,255,0.9)}
#lvlup{display:none;position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.9);backdrop-filter:blur(8px);align-items:center;justify-content:center}
#lvlup.open{display:flex}
.lvlup-box{text-align:center;animation:celebIn 0.5s cubic-bezier(.34,1.56,.64,1)}
.lvlup-num{font-family:'Playfair Display',serif;font-size:90px;line-height:1;color:var(--xp-color,var(--accent));text-shadow:0 0 8px var(--xp-glow,rgba(0,245,255,0.6)),0 0 40px var(--xp-glow,rgba(0,245,255,0.3));margin-bottom:8px}
.lvlup-name{font-size:18px;color:var(--snow);letter-spacing:3px;text-transform:uppercase;margin-bottom:6px}
.lvlup-sub{font-size:13px;color:var(--mist);margin-bottom:28px}

/* ══ CALENDAR ════════════════════════════════════════════ */

.cal-bg-wrap{
  background:rgba(8,6,20,0.75);
  backdrop-filter:blur(12px);
  border:1px solid rgba(0,245,255,0.1);
  border-radius:12px;
  padding:24px;
  box-shadow:0 8px 40px rgba(0,0,0,0.5),inset 0 0 40px rgba(0,245,255,0.02);
}
.cal-shell{display:flex;flex-direction:column;gap:0;height:100%}
.cal-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.cal-nav{display:flex;align-items:center;gap:10px}
.cal-nav-btn{background:none;border:1px solid rgba(0,245,255,0.2);border-radius:2px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--mist);font-size:16px;transition:all 0.15s}
.cal-nav-btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 8px rgba(0,245,255,0.2)}
.cal-title{font-family:'Playfair Display',serif;font-size:20px;color:var(--snow);letter-spacing:1px;min-width:200px;text-align:center}
.cal-view-switch{display:flex;gap:0;background:var(--night3);border:1px solid rgba(0,245,255,0.1);border-radius:2px;overflow:hidden}
.cal-vsw-btn{padding:7px 14px;font-size:11px;font-family:'Outfit',sans-serif;letter-spacing:1.5px;text-transform:uppercase;border:none;background:transparent;color:var(--fog);cursor:pointer;transition:all 0.15s}
.cal-vsw-btn:hover{color:var(--snow)}
.cal-vsw-btn.active{background:rgba(0,245,255,0.1);color:var(--accent);text-shadow:0 0 8px rgba(0,245,255,0.5)}
/* MONTH GRID */
.cal-month{width:100%}
.cal-dow-row{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:2px}
.cal-dow{text-align:center;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--fog);padding:6px 0}
.cal-days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-cell{min-height:120px;background:rgba(8,6,20,0.8);border:1px solid rgba(0,245,255,0.07);border-radius:2px;padding:8px;cursor:pointer;transition:all 0.15s;position:relative;overflow:hidden}
.cal-cell:hover{border-color:rgba(0,245,255,0.3);background:rgba(0,245,255,0.04)}
.cal-cell.today{border-color:rgba(0,245,255,0.5);background:rgba(0,245,255,0.06);box-shadow:inset 0 0 20px rgba(0,245,255,0.05),0 0 12px rgba(0,245,255,0.1)}
.cal-cell.other-month{opacity:0.35}
.cal-cell.has-events{border-color:rgba(0,245,255,0.2)}
.cal-day-num{font-size:13px;font-weight:600;color:var(--mist);margin-bottom:6px;display:flex;align-items:center;justify-content:space-between}
.cal-cell.today .cal-day-num{color:var(--accent);text-shadow:var(--neon-glow)}
.cal-day-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.cal-ev-pill{font-size:13px;padding:4px 9px;border-radius:2px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:opacity 0.15s;display:flex;align-items:center;gap:6px;letter-spacing:0.2px;font-weight:500}
.cal-ev-pill:hover{opacity:0.8}
.cal-ev-pill.done-pill{opacity:0.5;text-decoration:line-through}
.cal-ev-pill .ev-check{width:10px;height:10px;border-radius:1px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:7px}
.cal-more{font-size:10px;color:var(--fog);cursor:pointer;margin-top:2px;letter-spacing:0.5px}
.cal-more:hover{color:var(--accent)}
.cal-add-hint{position:absolute;bottom:6px;right:8px;font-size:18px;color:rgba(0,245,255,0.15);pointer-events:none;transition:all 0.2s}
.cal-cell:hover .cal-add-hint{color:rgba(0,245,255,0.5)}
/* WEEK VIEW */
.cal-week{width:100%;overflow:hidden}
.cal-week-header{display:grid;grid-template-columns:56px repeat(7,1fr);gap:2px;margin-bottom:2px}
.cal-week-dh{text-align:center;padding:8px 4px;background:rgba(8,6,20,0.8);border:1px solid rgba(0,245,255,0.07);border-radius:2px}
.cal-week-dh-name{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--fog)}
.cal-week-dh-num{font-size:18px;font-weight:600;color:var(--mist);margin-top:2px}
.cal-week-dh.today-col .cal-week-dh-num{color:var(--accent);text-shadow:var(--neon-glow)}
.cal-week-dh.today-col{border-color:rgba(0,245,255,0.4)}
.cal-week-body{display:grid;grid-template-columns:56px repeat(7,1fr);gap:2px;overflow-y:auto;max-height:calc(100vh - 280px)}
.cal-hour-label{display:flex;align-items:flex-start;justify-content:flex-end;padding:0 8px;font-size:10px;color:var(--fog);height:52px;padding-top:4px;letter-spacing:0.5px}
.cal-week-col{border:1px solid rgba(0,245,255,0.07);border-radius:2px;background:rgba(8,6,20,0.8);position:relative;min-height:52px;height:52px;cursor:pointer;transition:background 0.15s}
.cal-week-col:hover{background:rgba(0,245,255,0.04)}
.cal-week-col.today-col{background:rgba(0,245,255,0.04);border-color:rgba(0,245,255,0.2)}
.cal-week-ev{position:absolute;left:2px;right:2px;border-radius:2px;font-size:10px;padding:2px 5px;overflow:hidden;cursor:pointer;z-index:2;transition:all 0.15s;display:flex;align-items:flex-start;gap:3px;letter-spacing:0.3px}
.cal-week-ev:hover{filter:brightness(1.2)}
/* DAY VIEW */
.cal-day-view{display:flex;flex-direction:column;gap:0;overflow-y:auto;max-height:calc(100vh - 240px)}
.cal-day-slot{display:flex;gap:12px;min-height:52px;position:relative}
.cal-slot-time{width:56px;flex-shrink:0;font-size:10px;color:var(--fog);padding-top:4px;text-align:right;letter-spacing:0.5px}
.cal-slot-col{flex:1;border-top:1px solid rgba(0,245,255,0.06);position:relative;cursor:pointer;min-height:52px;transition:background 0.15s}
.cal-slot-col:hover{background:rgba(0,245,255,0.03)}
.cal-slot-col.now-line::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);box-shadow:0 0 8px rgba(0,245,255,0.6);z-index:5}
.cal-day-ev{position:absolute;left:0;right:0;border-radius:2px;padding:3px 7px;font-size:11px;cursor:pointer;z-index:2;transition:all 0.15s;overflow:hidden;letter-spacing:0.3px}
.cal-day-ev:hover{filter:brightness(1.2)}
/* EVENT MODAL */
.ev-modal{background:rgba(8,6,20,0.99);border:1px solid rgba(0,245,255,0.2);border-radius:2px;padding:28px 30px;width:520px;max-width:96vw;max-height:90vh;overflow-y:auto;box-shadow:0 0 40px rgba(0,245,255,0.12),0 32px 80px rgba(0,0,0,0.9);animation:modalIn 0.22s cubic-bezier(0.34,1.56,0.64,1);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.ev-color-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px}
.ev-color-dot{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2.5px solid transparent;transition:all 0.15s;display:flex;align-items:center;justify-content:center;font-size:10px}
.ev-color-dot.selected{border-color:rgba(255,255,255,0.6)}
.ev-img-grid{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.ev-img-thumb{position:relative;border-radius:4px;overflow:hidden;border:1px solid rgba(0,245,255,0.12);cursor:pointer;width:100%}
.ev-img-thumb img{width:100%;height:auto;object-fit:contain;display:block;max-height:400px;background:rgba(0,0,0,0.3)}
.ev-img-del{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:rgba(255,45,107,0.8);border:none;color:#fff;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.15s}
.ev-img-thumb:hover .ev-img-del{opacity:1}
.ev-upload-drop{border:1.5px dashed rgba(0,245,255,0.2);border-radius:2px;padding:14px;text-align:center;cursor:pointer;transition:all 0.15s;background:rgba(0,245,255,0.02)}
.ev-upload-drop:hover,.ev-upload-drop.drag-over{border-color:var(--accent);background:rgba(0,245,255,0.06)}
.ev-upload-drop p{font-size:12px;color:var(--fog);margin:4px 0 0}
.ev-upload-drop span{color:var(--accent);text-decoration:underline}
/* EVENT DETAIL PANEL */
.cal-detail-panel{position:fixed;top:0;right:0;bottom:0;width:360px;background:rgba(5,3,15,0.99);border-left:1px solid rgba(0,245,255,0.15);z-index:250;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.3s ease;box-shadow:-4px 0 30px rgba(0,245,255,0.08)}
.cal-detail-panel.open{transform:translateX(0)}
.cdp-header{padding:22px 22px 16px;border-bottom:1px solid rgba(0,245,255,0.1);display:flex;align-items:flex-start;gap:10px}
.cdp-color-bar{width:4px;border-radius:2px;flex-shrink:0;align-self:stretch;min-height:40px}
.cdp-title{font-family:'Playfair Display',serif;font-size:18px;color:var(--snow);flex:1;line-height:1.3}
.cdp-close{background:none;border:none;cursor:pointer;color:var(--fog);font-size:18px;padding:2px 6px;border-radius:4px;transition:all 0.15s;flex-shrink:0}
.cdp-close:hover{color:var(--snow);background:rgba(255,255,255,0.06)}
.cdp-body{flex:1;overflow-y:auto;padding:16px 22px}
.cdp-meta{font-size:12px;color:var(--mist);margin-bottom:14px;display:flex;flex-direction:column;gap:5px}
.cdp-meta span{display:flex;align-items:center;gap:6px}
.cdp-note{font-size:13px;color:var(--mist);line-height:1.7;white-space:pre-wrap;background:rgba(0,245,255,0.03);border-radius:2px;padding:12px;border:1px solid rgba(0,245,255,0.08);margin-bottom:14px}
.cdp-imgs{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.cdp-img-wrap{border-radius:4px;overflow:hidden;border:1px solid rgba(0,245,255,0.1);background:#000;cursor:zoom-in}
.cdp-img-wrap img{width:100%;height:auto;object-fit:contain;display:block}
.cdp-img-wrap:hover img{opacity:0.9}
.cdp-footer{padding:14px 22px;border-top:1px solid rgba(0,245,255,0.1);display:flex;gap:8px}
/* MINI CALENDAR HEADER */
.cal-today-btn{background:none;border:1px solid rgba(0,245,255,0.2);border-radius:2px;padding:6px 14px;font-size:11px;font-family:'Outfit',sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--mist);cursor:pointer;transition:all 0.15s}
.cal-today-btn:hover{border-color:var(--accent);color:var(--accent)}
/* LIGHT THEME OVERRIDES */
body.light .cal-cell{background:rgba(255,255,255,0.9);border-color:rgba(0,0,0,0.07)}
body.light .cal-cell:hover{background:#fff;border-color:rgba(0,0,0,0.15)}
body.light .cal-cell.today{border-color:rgba(197,147,58,0.6);background:rgba(197,147,58,0.05)}
body.light .cal-week-col{background:rgba(255,255,255,0.9);border-color:rgba(0,0,0,0.06)}
body.light .cal-week-dh{background:rgba(255,255,255,0.9);border-color:rgba(0,0,0,0.06)}
body.light .cal-detail-panel{background:rgba(245,242,236,0.99);border-left-color:rgba(0,0,0,0.1)}
body.light .cdp-note{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.08)}

/* STREAK */
.streak-wrap{padding:12px 24px 14px;border-top:1px solid rgba(255,140,0,0.15);background:linear-gradient(135deg,rgba(255,140,0,0.04),transparent)}
.streak-row{display:flex;align-items:center;justify-content:space-between}
.streak-flame{display:flex;align-items:center;gap:8px}
.streak-fire{font-size:24px;line-height:1;filter:drop-shadow(0 0 6px rgba(255,140,0,0.7));animation:flicker 2s ease-in-out infinite}
@keyframes flicker{0%,100%{transform:scale(1) rotate(-1deg);filter:drop-shadow(0 0 6px rgba(255,140,0,0.7))}50%{transform:scale(1.08) rotate(1deg);filter:drop-shadow(0 0 10px rgba(255,200,0,0.9))}}
.streak-count{font-size:22px;font-weight:700;color:#ff8c00;font-family:monospace;line-height:1;text-shadow:0 0 8px rgba(255,140,0,0.5)}
.streak-label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,140,0,0.6);margin-top:2px}
.streak-best{font-size:10px;color:rgba(255,140,0,0.45);font-family:monospace}
.streak-dots{display:flex;gap:4px;margin-top:8px}
.streak-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,140,0,0.15);border:1px solid rgba(255,140,0,0.2);transition:all 0.3s}
.streak-dot.active{background:#ff8c00;border-color:#ff8c00;box-shadow:0 0 6px rgba(255,140,0,0.6)}
.streak-dot.today{background:#ffcc00;border-color:#ffcc00;box-shadow:0 0 8px rgba(255,200,0,0.8);animation:pulse-dot 1.5s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
/* STREAK LOST */
.streak-dead .streak-fire{filter:grayscale(1) brightness(0.5);animation:none}
.streak-dead .streak-count{color:#5a5a72;text-shadow:none}

/* ══ PAGE TYPE PICKER ══════════════════════════════════════════ */
.page-type-box{background:rgba(8,6,20,0.99);border:1px solid rgba(0,245,255,0.2);border-radius:2px;padding:36px 40px;width:560px;max-width:95vw;animation:modalIn 0.25s cubic-bezier(0.34,1.56,0.64,1);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));box-shadow:0 0 40px rgba(0,245,255,0.1),0 32px 80px rgba(0,0,0,0.9)}
.page-type-heading{font-family:'Playfair Display',serif;font-size:22px;color:var(--accent);text-shadow:var(--neon-glow);margin-bottom:6px;letter-spacing:1px}
.page-type-sub{font-size:13px;color:var(--fog);margin-bottom:28px}
.page-type-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:28px}
.page-type-card{background:rgba(0,245,255,0.03);border:1px solid rgba(0,245,255,0.12);border-radius:2px;padding:24px 20px;cursor:pointer;transition:all 0.2s;text-align:center;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
.page-type-card:hover{border-color:var(--accent);background:rgba(0,245,255,0.08);box-shadow:0 0 20px rgba(0,245,255,0.15),inset 0 0 20px rgba(0,245,255,0.04);transform:translateY(-2px)}
.page-type-icon{font-size:42px;margin-bottom:12px;line-height:1}
.page-type-name{font-family:'Playfair Display',serif;font-size:17px;color:var(--snow);margin-bottom:8px;letter-spacing:0.5px}
.page-type-desc{font-size:12px;color:var(--fog);line-height:1.6}
body.light .page-type-box{background:#fff;border-color:rgba(0,0,0,0.1)}
body.light .page-type-card{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.08)}
body.light .page-type-card:hover{border-color:rgba(197,147,58,0.5);background:rgba(197,147,58,0.06)}
/* ══ MINDMAP ══════════════════════════════════════════════════ */
.mm-shell{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
.mm-toolbar{display:flex;align-items:center;gap:5px;padding:8px 14px;background:rgba(5,3,15,0.97);border-bottom:1px solid rgba(0,245,255,0.12);flex-shrink:0;flex-wrap:wrap;backdrop-filter:blur(10px)}
.mm-title-bar{display:none}
.mm-title-inp{background:none;border:none;border-bottom:1.5px solid rgba(0,245,255,0.2);color:var(--snow);font-family:'Playfair Display',serif;font-size:14px;font-weight:400;outline:none;padding:3px 8px 4px;width:200px;min-width:80px;max-width:280px;transition:all 0.2s;letter-spacing:0.5px;height:26px;flex-shrink:1}
.mm-title-inp:hover{border-bottom-color:rgba(0,245,255,0.4)}
.mm-title-inp:focus{border-bottom-color:var(--accent);text-shadow:0 0 12px rgba(0,245,255,0.2);width:260px}
.mm-title-inp::placeholder{color:rgba(0,245,255,0.25);font-family:'Playfair Display',serif;font-style:italic;font-size:13px}
.mm-tool-btn{background:none;border:1px solid rgba(0,245,255,0.15);border-radius:2px;padding:4px 9px;font-size:11px;letter-spacing:0.6px;cursor:pointer;color:var(--mist);font-family:'Outfit',sans-serif;transition:all 0.15s;white-space:nowrap;height:26px;display:flex;align-items:center;gap:3px}
.mm-tool-btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 8px rgba(0,245,255,0.18)}
.mm-sep{width:1px;height:18px;background:rgba(0,245,255,0.12);margin:0 2px;flex-shrink:0}
.mm-help-txt{font-size:10px;color:var(--fog);letter-spacing:0.2px;white-space:nowrap}
.mm-canvas-wrap{flex:1;position:relative;overflow:hidden;background:var(--night2);cursor:default;min-height:0}
.mm-canvas-wrap.mm-connecting{cursor:crosshair!important}
.mm-canvas-wrap.mm-connecting *{cursor:crosshair!important}
#mm-svg{width:100%;height:100%;display:block;user-select:none}
.mm-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;user-select:none}
.mm-hint-icon{font-size:54px;margin-bottom:14px;filter:opacity(0.4)}
.mm-hint-title{font-family:'Playfair Display',serif;font-size:22px;color:rgba(0,245,255,0.22);margin-bottom:8px}
.mm-hint-sub{font-size:12px;color:var(--fog);line-height:1.7}
.mm-text-overlay{position:absolute;z-index:100;display:none;flex-direction:column;gap:5px}
.mm-text-ta{background:rgba(6,4,18,0.98);border:1.5px solid var(--accent);color:var(--snow);font-family:'Outfit',sans-serif;font-size:13px;padding:7px 10px;outline:none;resize:both;border-radius:2px;box-shadow:0 0 24px rgba(0,245,255,0.4),0 0 60px rgba(0,0,0,0.9);min-width:100px;min-height:36px;line-height:1.5;letter-spacing:0.3px}
.mm-text-ok-btn{background:rgba(0,245,255,0.12);border:1px solid var(--accent);border-radius:2px;color:var(--accent);font-size:11px;padding:3px 12px;cursor:pointer;font-family:'Outfit',sans-serif;transition:all 0.15s;align-self:flex-end;letter-spacing:0.5px}
.mm-text-ok-btn:hover{background:rgba(0,245,255,0.22)}
.mm-props{position:absolute;top:8px;right:8px;width:192px;background:rgba(4,2,14,0.97);border:1px solid rgba(0,245,255,0.16);border-radius:2px;padding:13px 15px;z-index:50;backdrop-filter:blur(14px);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));box-shadow:0 0 20px rgba(0,245,255,0.08)}
.mm-props-title{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);margin-bottom:12px;opacity:0.8}
.mm-props-label{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--fog);margin-bottom:6px;margin-top:12px}
.mm-color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.mm-c-dot{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2.5px solid transparent;transition:all 0.15s}
.mm-c-dot:hover{transform:scale(1.12)}
.mm-c-dot.mm-c-active{border-color:rgba(255,255,255,0.8);transform:scale(1.08);box-shadow:0 0 10px currentColor}
.mm-shape-row{display:flex;gap:4px;flex-wrap:wrap}
.mm-sh-btn{background:rgba(0,245,255,0.03);border:1px solid rgba(0,245,255,0.12);border-radius:2px;padding:4px 8px;font-size:15px;cursor:pointer;color:var(--fog);transition:all 0.12s;line-height:1}
.mm-sh-btn:hover{border-color:rgba(0,245,255,0.4);color:var(--snow)}
.mm-sh-btn.mm-sh-active{border-color:var(--accent);color:var(--accent);background:rgba(0,245,255,0.1)}
.mm-font-row{display:flex;gap:4px}
.mm-fs-btn{flex:1;background:rgba(0,245,255,0.03);border:1px solid rgba(0,245,255,0.12);border-radius:2px;padding:5px 4px;font-size:11px;cursor:pointer;color:var(--fog);transition:all 0.12s;font-family:'Outfit',sans-serif;text-align:center}
.mm-fs-btn:hover{border-color:rgba(0,245,255,0.4);color:var(--snow)}
.mm-fs-btn.mm-fs-active{border-color:var(--accent);color:var(--accent);background:rgba(0,245,255,0.1)}
body.light .mm-toolbar{background:rgba(245,242,236,0.97);border-bottom-color:rgba(0,0,0,0.08)}
body.light .mm-title-bar{display:none}
body.light .mm-title-inp{color:#1a1714;border-bottom-color:rgba(0,0,0,0.2)}
body.light .mm-title-inp:focus{border-bottom-color:rgba(197,147,58,0.7)}
body.light .mm-tool-btn{color:#5a5a72;border-color:rgba(0,0,0,0.14)}
body.light .mm-tool-btn:hover{border-color:rgba(197,147,58,0.55);color:#a07830}
body.light .mm-canvas-wrap{background:#ebe7df}
body.light #view-mindmap.active{background:var(--night3)}
body.light .mm-props{background:rgba(245,242,236,0.98);border-color:rgba(0,0,0,0.1)}
body.light .mm-text-ta{background:#fff;color:#1a1714;border-color:rgba(197,147,58,0.7);box-shadow:0 4px 24px rgba(0,0,0,0.2)}
body.light .mm-sh-btn{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.12);color:#6b6390}
body.light .mm-sh-btn.mm-sh-active{border-color:#a07830;color:#a07830;background:rgba(197,147,58,0.08)}
body.light .mm-fs-btn{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.12);color:#6b6390}
body.light .mm-fs-btn.mm-fs-active{border-color:#a07830;color:#a07830;background:rgba(197,147,58,0.08)}

/* ══ TODO LIST ════════════════════════════════════════════ */
/* Todo bg wrap — same glass panel as calendar */
.todo-bg-wrap{
  background:rgba(8,6,20,0.75);
  backdrop-filter:blur(12px);
  border:1px solid rgba(0,245,255,0.1);
  border-radius:12px;
  padding:28px 32px;
  box-shadow:0 8px 40px rgba(0,0,0,0.5),inset 0 0 40px rgba(0,245,255,0.02);
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.todo-shell{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;padding-bottom:80px}
.todo-header{margin-bottom:28px}
.todo-title-inp{width:100%;background:none;border:none;border-bottom:2px solid rgba(0,245,255,0.15);color:var(--snow);font-family:'Playfair Display',serif;font-size:26px;outline:none;padding:4px 2px 8px;letter-spacing:0.8px;transition:border-color 0.2s}
.todo-title-inp:focus{border-bottom-color:var(--accent)}
.todo-title-inp::placeholder{color:rgba(0,245,255,0.18);font-style:italic}
.todo-meta{display:flex;align-items:center;gap:16px;margin-top:10px;flex-wrap:wrap}
.todo-progress-wrap{flex:1;min-width:160px}
.todo-progress-bar{height:3px;background:rgba(0,245,255,0.08);border-radius:0;overflow:hidden;border:1px solid rgba(0,245,255,0.1)}
.todo-progress-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--accent));transition:width 0.5s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 6px rgba(0,245,255,0.5)}
.todo-stats{font-size:11px;color:var(--fog);letter-spacing:0.5px;white-space:nowrap}
.todo-stats span{color:var(--accent)}
/* Lists */
.todo-lists{display:flex;flex-direction:column;gap:22px}
.todo-list-block{background:rgba(8,6,20,0.8);border:1px solid rgba(0,245,255,0.1);border-radius:2px;overflow:hidden;transition:border-color 0.2s;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.todo-list-block:hover{border-color:rgba(0,245,255,0.2)}
.todo-list-header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(0,245,255,0.07);background:rgba(0,245,255,0.02);cursor:pointer;user-select:none}
.todo-list-collapse{font-size:11px;color:var(--fog);transition:transform 0.2s;flex-shrink:0;width:16px;text-align:center}
.todo-list-block.collapsed .todo-list-collapse{transform:rotate(-90deg)}
.todo-list-name-inp{flex:1;background:none;border:none;color:var(--snow);font-family:'Outfit',sans-serif;font-size:14px;font-weight:600;outline:none;letter-spacing:0.5px;cursor:text}
.todo-list-name-inp::placeholder{color:var(--fog)}
.todo-list-count{font-size:10px;color:var(--fog);background:var(--night4);padding:2px 8px;border-radius:20px;white-space:nowrap}
.todo-list-del{background:none;border:none;cursor:pointer;color:rgba(255,45,107,0);font-size:13px;padding:2px 6px;border-radius:2px;transition:all 0.15s;flex-shrink:0}
.todo-list-header:hover .todo-list-del{color:rgba(255,45,107,0.4)}
.todo-list-del:hover{color:var(--red)!important;background:rgba(255,45,107,0.08)}
.todo-list-body{padding:8px 0;transition:all 0.2s}
.todo-list-block.collapsed .todo-list-body{display:none}
/* Items */
.todo-item{display:flex;align-items:flex-start;gap:10px;padding:7px 16px;transition:background 0.12s;position:relative;border-bottom:1px solid rgba(255,255,255,0.03)}
.todo-item:last-child{border-bottom:none}
.todo-item:hover{background:rgba(0,245,255,0.03)}
.todo-check-wrap{flex-shrink:0;margin-top:2px}
.todo-check{width:18px;height:18px;border-radius:2px;border:1.5px solid rgba(0,245,255,0.35);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.18s;position:relative}
.todo-check:hover{border-color:var(--accent);background:rgba(0,245,255,0.08)}
.todo-check.checked{background:var(--accent);border-color:var(--accent);box-shadow:0 0 8px rgba(0,245,255,0.5)}
.todo-check.checked::after{content:'✓';font-size:11px;color:var(--night);font-weight:800}
.todo-item-body{flex:1;min-width:0}
.todo-item-text{width:100%;background:none;border:none;color:var(--snow);font-family:'Outfit',sans-serif;font-size:13px;outline:none;line-height:1.5;resize:none;padding:0;overflow:hidden;letter-spacing:0.2px;transition:color 0.2s}
.todo-item-text.checked{color:var(--fog);text-decoration:line-through}
.todo-item-text::placeholder{color:var(--fog);font-style:italic}
.todo-item-sub{display:flex;align-items:center;gap:10px;margin-top:4px;flex-wrap:wrap}
.todo-item-due{font-size:10px;color:var(--fog);cursor:pointer;padding:2px 6px;border:1px solid rgba(255,255,255,0.07);border-radius:20px;transition:all 0.15s;display:flex;align-items:center;gap:4px}
.todo-item-due:hover{border-color:rgba(0,245,255,0.3);color:var(--mist)}
.todo-item-due.overdue{color:var(--red);border-color:rgba(255,45,107,0.3)}
.todo-item-due.today{color:var(--accent);border-color:rgba(0,245,255,0.3)}
.todo-item-due.soon{color:var(--green);border-color:rgba(0,255,157,0.3)}
.todo-item-prio{font-size:9px;letter-spacing:1px;text-transform:uppercase;padding:2px 7px;border-radius:20px;cursor:pointer;transition:all 0.15s;border:1px solid transparent;user-select:none}
.todo-item-prio.prio-low{color:var(--blue);border-color:rgba(123,95,255,0.3);background:rgba(123,95,255,0.08)}
.todo-item-prio.prio-med{color:var(--accent);border-color:rgba(0,245,255,0.3);background:rgba(0,245,255,0.06)}
.todo-item-prio.prio-high{color:var(--red);border-color:rgba(255,45,107,0.3);background:rgba(255,45,107,0.08)}
.todo-item-del{background:none;border:none;cursor:pointer;color:rgba(255,45,107,0);font-size:12px;padding:3px 7px;border-radius:2px;transition:all 0.15s;flex-shrink:0;margin-top:1px}
.todo-item:hover .todo-item-del{color:rgba(255,45,107,0.35)}
.todo-item-del:hover{color:var(--red)!important;background:rgba(255,45,107,0.08)}
/* Add item row */
.todo-add-item-row{display:flex;align-items:center;gap:8px;padding:8px 16px 4px;border-top:1px dashed rgba(0,245,255,0.07)}
.todo-add-item-inp{flex:1;background:none;border:none;color:var(--mist);font-family:'Outfit',sans-serif;font-size:13px;outline:none;letter-spacing:0.2px}
.todo-add-item-inp::placeholder{color:rgba(0,245,255,0.18)}
.todo-add-item-btn{background:none;border:1px solid rgba(0,245,255,0.15);border-radius:2px;color:var(--mist);font-size:11px;padding:3px 10px;cursor:pointer;font-family:'Outfit',sans-serif;transition:all 0.15s;white-space:nowrap}
.todo-add-item-btn:hover{border-color:var(--accent);color:var(--accent)}
/* Add list */
.todo-add-list-btn{display:flex;align-items:center;gap:8px;padding:12px 18px;background:rgba(0,245,255,0.02);border:1px dashed rgba(0,245,255,0.14);border-radius:2px;cursor:pointer;color:var(--fog);font-size:13px;font-family:'Outfit',sans-serif;transition:all 0.15s;letter-spacing:0.3px}
.todo-add-list-btn:hover{border-color:rgba(0,245,255,0.35);color:var(--accent);background:rgba(0,245,255,0.05)}
/* Due date picker input */
.todo-date-inp{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* Light theme */
body.light .todo-list-block{background:rgba(255,255,255,0.92);border-color:rgba(0,0,0,0.07)}
body.light .todo-list-header{background:rgba(0,0,0,0.02);border-bottom-color:rgba(0,0,0,0.06)}
body.light .todo-list-name-inp{color:#1a1714}
body.light .todo-title-inp{color:#1a1714;border-bottom-color:rgba(0,0,0,0.15)}
body.light .todo-item-text{color:#1a1714}
body.light .todo-item-text.checked{color:#8a8480}
body.light .todo-check{border-color:rgba(0,0,0,0.25)}
body.light .todo-progress-bar{background:rgba(0,0,0,0.06)}
body.light .todo-add-list-btn{border-color:rgba(0,0,0,0.15);color:#8a8480}
body.light .todo-add-list-btn:hover{border-color:rgba(197,147,58,0.5);color:#a07830}
body.light .todo-item-due{border-color:rgba(0,0,0,0.1);color:#8a8480}
body.light .todo-bg-wrap{background:rgba(255,255,255,0.85);border-color:rgba(0,0,0,0.1);box-shadow:0 8px 40px rgba(0,0,0,0.12)}

/* ══ MAP VIEW ════════════════════════════════════════════════ */

/* ── Topbar: hide normal controls on map view ── */
#view-map-active .topbar-right   { display: none !important; }
#view-map-active #xp-banner      { display: none !important; }

/* Sub-title under page-title on map */
#map-topbar-sub {
  display: none;
  font-size: 11px;
  color: var(--fog);
  margin-top: 2px;
  letter-spacing: 0.5px;
}

/* ── Map view layout ── */
#view-map {
  padding: 0 !important;
  overflow: hidden !important;
  flex: 1;
  min-height: 0;
}
#view-map.active {
  display: flex;
  flex-direction: row;
  height: 100%;
  min-height: 0;
  animation: none;
  overflow: hidden;
}
.content:has(#view-map.active) {
  padding: 0;
  overflow: hidden;
}

/* ── Left: map area ── */
.map-area {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: #0c151e;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Map frame — respects natural image ratio 2048×1536 (4:3) */
.map-frame {
  position: relative;
  /* Fit inside available area without distortion */
  aspect-ratio: 2048 / 1536;
  width: 100%;
  max-height: 100%;
  /* if width-based ratio exceeds height, shrink by height */
  max-width: min(100%, calc(100vh * 2048 / 1536));
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0,245,255,0.13);
  box-shadow: 0 0 50px rgba(0,0,0,0.7), 0 0 20px rgba(0,245,255,0.06), inset 0 0 0 1px rgba(255,255,255,0.03);
  flex-shrink: 0;
}

/* Background image — natural size, no distortion */
.map-bg-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill; /* frame already has correct ratio, fill = no distortion */
}

/* SVG overlay — same footprint, SVG viewBox matches image coordinate space */
.map-svg-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.map-svg-overlay svg {
  width: 100%;
  height: 100%;
  display: block;
  /* preserveAspectRatio="none" keeps coordinates aligned to image */
}

/* ── Zone states ── */
.map-svg-overlay path {
  cursor: pointer;
  transition: fill 0.45s ease;
  pointer-events: all;
}
/* Locked zone: heavy dark overlay — clearly blocks the color */
.map-svg-overlay path.inactive {
  fill: rgba(5, 4, 16, 0.78);
}
/* Locked zone hover — neon colors per zone */
.map-svg-overlay path.inactive#Projets:hover       { fill: rgba(180,180,180,0.28) !important; filter: drop-shadow(0 0 6px rgba(180,180,180,0.4)); transition: fill 0.1s; }
.map-svg-overlay path.inactive#Creatif:hover       { fill: rgba(0,110,220,0.28)   !important; filter: drop-shadow(0 0 6px rgba(0,110,220,0.4));   transition: fill 0.1s; }
.map-svg-overlay path.inactive#Sport:hover         { fill: rgba(0,200,90,0.28)    !important; filter: drop-shadow(0 0 6px rgba(0,200,90,0.4));    transition: fill 0.1s; }
.map-svg-overlay path.inactive#Voyage:hover        { fill: rgba(220,130,0,0.28)   !important; filter: drop-shadow(0 0 6px rgba(220,130,0,0.4));   transition: fill 0.1s; }
.map-svg-overlay path.inactive#Social:hover        { fill: rgba(0,200,90,0.28)    !important; filter: drop-shadow(0 0 6px rgba(0,200,90,0.4));    transition: fill 0.1s; }
.map-svg-overlay path.inactive#Bien-etre:hover     { fill: rgba(210,190,0,0.28)   !important; filter: drop-shadow(0 0 6px rgba(210,190,0,0.4));   transition: fill 0.1s; }
.map-svg-overlay path.inactive#Carriere:hover      { fill: rgba(150,0,100,0.28)   !important; filter: drop-shadow(0 0 6px rgba(150,0,100,0.4));   transition: fill 0.1s; }
.map-svg-overlay path.inactive#Apprentissage:hover { fill: rgba(0,200,170,0.28)   !important; filter: drop-shadow(0 0 6px rgba(0,200,170,0.4));   transition: fill 0.1s; }
.map-svg-overlay path.inactive#Personnel:hover     { fill: rgba(0,200,90,0.28)    !important; filter: drop-shadow(0 0 6px rgba(0,200,90,0.4));    transition: fill 0.1s; }
/* Unlocked: transparent — show the real map image color */
.map-svg-overlay path.unlocked {
  fill: transparent !important;
}
/* Unlocked hover: soft white glow only, no color */
.map-svg-overlay path.unlocked:hover {
  fill: rgba(255,255,255,0.18) !important;
  transition: fill 0.1s ease;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.35));
}

/* Unlock animation */
@keyframes zoneUnlock {
  0%   { fill: rgba(0,245,255,0.75); }
  40%  { fill: rgba(0,245,255,0.4);  }
  100% { fill: transparent;          }
}
.map-svg-overlay path.unlocking {
  animation: zoneUnlock 1.5s ease forwards;
}

/* ── Tooltip ── */
.map-tooltip {
  position: absolute;
  background: rgba(5,3,15,0.97);
  border: 1px solid rgba(0,245,255,0.32);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 11px;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
  z-index: 30;
  box-shadow: 0 0 18px rgba(0,245,255,0.15);
  min-width: 160px;
}
.map-tooltip.visible { opacity: 1; }

/* ── Right: zones panel ── */
.map-panel {
  width: 270px;
  flex-shrink: 0;
  background: rgba(5,3,15,0.98);
  border-left: 1px solid rgba(0,245,255,0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.map-panel-title {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  padding: 18px 20px 12px;
  border-bottom: 1px solid rgba(0,245,255,0.08);
  text-shadow: 0 0 8px rgba(0,245,255,0.4);
  flex-shrink: 0;
}
.map-panel-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.map-panel-item {
  padding: 10px 18px 12px;
  cursor: default;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.map-panel-item:last-child { border-bottom: none; }
.map-panel-item:hover { background: rgba(0,245,255,0.04); }

/* Item header row: dot + emoji + name + lock */
.map-panel-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}
.map-panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  transition: all 0.4s ease;
}
.map-panel-item.zone-unlocked .map-panel-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 5px rgba(0,245,255,0.7);
}
.map-panel-emoji {
  font-size: 16px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.map-panel-name {
  flex: 1;
  font-size: 13.5px;
  font-family: 'Outfit', sans-serif;
  color: var(--fog);
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.3s;
}
.map-panel-item.zone-unlocked .map-panel-name {
  color: var(--snow);
  font-weight: 500;
}
.map-panel-lock {
  font-size: 12px;
  color: var(--fog);
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.3s;
}
.map-panel-item.zone-unlocked .map-panel-lock { opacity: 0; }

/* Progress bar */
.map-panel-bar-wrap {
  padding-left: 30px; /* align under name */
}
.map-panel-bar-track {
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.map-panel-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(0,245,255,0.6));
  transition: width 0.6s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 0 5px rgba(0,245,255,0.5);
  min-width: 0;
}
.map-panel-bar-label {
  font-size: 11px;
  color: var(--fog);
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.3px;
  margin-top: 4px;
}

/* Panel footer */
.map-panel-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(0,245,255,0.08);
  text-align: center;
  flex-shrink: 0;
}
.map-panel-count {
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  font-family: monospace;
  text-shadow: 0 0 10px rgba(0,245,255,0.5);
  line-height: 1;
}
.map-panel-count-label {
  font-size: 11px;
  color: var(--fog);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 4px;
}

#hz-lb{display:none;position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,0.93);align-items:center;justify-content:center;flex-direction:column}
#hz-lb.on{display:flex}
#hz-lb-img{max-width:88vw;max-height:78vh;object-fit:contain;transform-origin:center;transition:transform 0.12s}
#hz-lb-bar{display:none}
#hz-lb-bar button{background:none;border:1px solid rgba(0,245,255,0.25);border-radius:4px;color:#00f5ff;font-size:16px;width:34px;height:34px;cursor:pointer;display:flex;align-items:center;justify-content:center}
#hz-lb-bar button:hover{background:rgba(0,245,255,0.1)}
#hz-lb-pct{display:none}
#hz-lb-x{position:fixed;top:14px;right:14px;background:rgba(5,3,15,0.9);border:1px solid rgba(255,45,107,0.3);border-radius:4px;color:#ff2d6b;font-size:14px;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:9001}

/* ── SIDEBAR QUIT BUTTON ────────────────────────────────── */
.sidebar-quit-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--red);
  cursor: pointer;
  border: 1px solid rgba(255,45,107,0.35);
  border-radius: 2px;
  margin: 4px 16px 10px;
  background: rgba(255,45,107,0.07);
  transition: all 0.2s;
  flex-shrink: 0;
  clip-path: polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
}
.sidebar-quit-btn:hover {
  color: #fff;
  background: rgba(255,45,107,0.2);
  border-color: rgba(255,45,107,0.8);
  box-shadow: 0 0 14px rgba(255,45,107,0.35), inset 0 0 10px rgba(255,45,107,0.08);
  text-shadow: 0 0 8px rgba(255,45,107,0.7);
}
.quit-icon {
  font-size: 15px;
  transition: transform 0.2s;
  line-height: 1;
}
.sidebar-quit-btn:hover .quit-icon {
  transform: rotate(90deg);
}
body.light .sidebar-quit-btn {
  color: #b43228;
  border-color: rgba(180,50,40,0.3);
  background: rgba(180,50,40,0.06);
}
body.light .sidebar-quit-btn:hover {
  color: #fff;
  background: rgba(180,50,40,0.2);
  border-color: rgba(180,50,40,0.7);
  text-shadow: none;
}


.hp-widget {
  padding: 0 8px;
  position: relative;
  background: transparent;
  border-bottom: none;
  margin-bottom: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex: 1;
  max-width: 420px;
  flex-shrink: 0;
}
.hp-bar-frame {
  position: relative;
  flex: 1;
  min-width: 0;
  line-height: 0;
}
.hp-bg-img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: crisp-edges;
}
.hp-bar-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hp-info-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 0;
  font-family: 'Outfit', monospace;
  flex-shrink: 0;
  white-space: nowrap;
}
.hp-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fog);
  flex-shrink: 0;
}
.hp-val-display {
  font-size: 13px;
  font-weight: 700;
  font-family: monospace;
  color: #00ff66;
  letter-spacing: 1px;
  transition: color 0.5s;
}
.hp-sep { color: var(--fog); font-size: 11px; margin: 0 1px; }
.hp-max { font-size: 11px; color: var(--fog); }
.hp-status {
  margin-left: auto;
  font-size: 8px;
  color: #00ff66;
  transition: color 0.5s, text-shadow 0.5s;
  text-shadow: 0 0 6px #00ff66;
}
/* HP States */
.hp-ok   .hp-val-display { color: #00ff66; }
.hp-ok   .hp-status      { color: #00ff66; text-shadow: 0 0 6px #00ff66; }
.hp-low  .hp-val-display { color: #ffcc00; }
.hp-low  .hp-status      { color: #ffcc00; text-shadow: 0 0 6px #ffcc00; animation: hp-pulse 1.4s ease-in-out infinite; }
.hp-critical .hp-val-display { color: #ff4444; }
.hp-critical .hp-status      { color: #ff4444; text-shadow: 0 0 8px #ff4444; animation: hp-pulse 0.7s ease-in-out infinite; }
.hp-critical .hp-bar-frame   { animation: hp-shake 0.5s ease-in-out infinite; }
@keyframes hp-pulse { 0%,100%{opacity:1}50%{opacity:0.3} }
@keyframes hp-shake { 0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)} }

/* Light theme */
body.light .hp-widget { background: rgba(0,0,0,0.04); border-bottom-color: rgba(0,0,0,0.1); }

/* ══ EXIT POPUP ═══════════════════════════════════════════ */
.exit-box {
  position: relative;
  background: rgba(8,6,20,0.99);
  border: 1px solid rgba(0,245,255,0.2);
  border-radius: 4px;
  padding: 0;
  width: 480px;
  max-width: 95vw;
  text-align: center;
  clip-path: polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
  box-shadow: 0 0 60px rgba(0,245,255,0.1),0 24px 80px rgba(0,0,0,0.9);
  animation: modalIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
  overflow: hidden;
}
.exit-top-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 14px var(--accent);
}
.exit-emblem {
  font-size: 52px;
  margin: 28px 0 8px;
  animation: popIn 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.15s both;
  filter: drop-shadow(0 0 12px rgba(0,245,255,0.3));
  display: block;
}
.exit-title {
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(0,245,255,0.5);
  margin-bottom: 16px;
}
.exit-question {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: var(--snow);
  line-height: 1.3;
  padding: 0 32px;
  margin-bottom: 24px;
  text-shadow: 0 0 20px rgba(232,224,255,0.2);
}
.exit-hp-display {
  padding: 0 32px;
  margin-bottom: 28px;
}
.exit-hp-bar-wrap {
  position: relative;
  width: 100%;
  line-height: 0;
  margin-bottom: 8px;
}
.exit-hp-bg {
  width: 100%;
  height: auto;
  display: block;
}
.exit-hp-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.exit-pv-label {
  font-size: 13px;
  font-family: monospace;
  color: var(--mist);
  letter-spacing: 1px;
}
.exit-pv-label span {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 8px rgba(0,245,255,0.5);
}
.exit-btns {
  display: flex;
  gap: 14px;
  padding: 0 32px 24px;
  justify-content: center;
}
.exit-btn {
  flex: 1;
  max-width: 180px;
  padding: 14px 18px;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.5px;
  transition: all 0.2s;
  clip-path: polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.exit-oui {
  background: rgba(0,255,157,0.1);
  border: 1px solid rgba(0,255,157,0.5);
  color: #00ff9d;
  box-shadow: 0 0 16px rgba(0,255,157,0.15);
}
.exit-oui:hover {
  background: rgba(0,255,157,0.2);
  box-shadow: 0 0 28px rgba(0,255,157,0.35);
  transform: translateY(-2px);
}
.exit-non {
  background: rgba(255,45,107,0.1);
  border: 1px solid rgba(255,45,107,0.4);
  color: #ff6b8a;
  box-shadow: 0 0 16px rgba(255,45,107,0.1);
}
.exit-non:hover {
  background: rgba(255,45,107,0.18);
  box-shadow: 0 0 28px rgba(255,45,107,0.25);
  transform: translateY(-2px);
}
.exit-answered {
  padding: 12px 32px 20px;
  font-size: 15px;
  color: var(--mist);
  letter-spacing: 0.3px;
  line-height: 1.6;
}
.exit-hint {
  font-size: 11px;
  color: var(--fog);
  padding: 0 32px 24px;
  line-height: 1.6;
  letter-spacing: 0.3px;
}
body.light .exit-box {
  background: #fff;
  border-color: rgba(0,0,0,0.12);
}


/* ══ ACCUEIL VIEW ════════════════════════════════════════ */
.nav-accueil-item{
  font-size:14px;font-weight:600;letter-spacing:0.5px;
  border-top:1px solid rgba(0,245,255,0.08);
  border-bottom:1px solid rgba(0,245,255,0.08);
  margin-bottom:6px;
}
.nav-accueil-item.active{
  color:var(--accent);
  border-left-color:var(--accent);
  background:var(--accent-dim);
  text-shadow:0 0 8px rgba(0,245,255,0.5);
}
.accueil-wrap{
  max-width:820px;margin:0 auto;padding:24px 28px 96px;
  background:rgba(8,6,20,0.92);
  backdrop-filter:blur(16px);
  border:1px solid rgba(0,245,255,0.15);
  border-radius:12px;
  box-shadow:0 8px 40px rgba(0,0,0,0.7),inset 0 0 40px rgba(0,245,255,0.03),0 0 1px rgba(0,245,255,0.1);
}
.accueil-hero{
  background:rgba(15,12,32,0.85);
  border:1px solid rgba(0,245,255,0.18);
  border-radius:2px;
  padding:32px 36px 28px;
  margin-bottom:28px;
  position:relative;
  overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
}
.accueil-hero::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  box-shadow:0 0 16px var(--accent);
}
.accueil-greeting{
  font-size:12px;letter-spacing:3px;text-transform:uppercase;
  color:var(--fog);margin-bottom:10px;
}
.accueil-title{
  font-family:'Playfair Display',serif;font-size:32px;font-weight:400;
  color:var(--snow);margin-bottom:8px;line-height:1.2;
  text-shadow:0 0 20px rgba(232,224,255,0.2);
}
.accueil-title span{
  color:var(--accent);text-shadow:var(--neon-glow);
}
.accueil-sub{
  font-size:14px;color:var(--mist);margin-bottom:24px;line-height:1.6;
}
.accueil-stats-row{
  display:flex;gap:0;border-top:1px solid rgba(0,245,255,0.1);
  padding-top:20px;
}
.accueil-stat{
  flex:1;text-align:center;padding:0 12px;
  border-right:1px solid rgba(0,245,255,0.08);
}
.accueil-stat:first-child{padding-left:0}
.accueil-stat:last-child{border-right:none;padding-right:0}
.accueil-stat-val{
  font-size:28px;font-weight:300;font-family:'Outfit',monospace;
  color:var(--accent);text-shadow:var(--neon-glow);
  letter-spacing:2px;line-height:1;margin-bottom:4px;
}
.accueil-stat-lbl{
  font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--fog);
}
.accueil-section-label{
  font-size:10px;letter-spacing:3px;text-transform:uppercase;
  color:var(--accent);opacity:0.7;margin-bottom:14px;
  display:flex;align-items:center;gap:10px;
}
.accueil-section-label::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,rgba(0,245,255,0.2),transparent);
}
.accueil-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.accueil-card{
  display:flex;align-items:center;gap:16px;
  background:rgba(15,12,32,0.9);
  border:1px solid rgba(0,245,255,0.1);
  border-radius:2px;
  padding:16px 18px;
  cursor:pointer;
  transition:all 0.18s ease;
  position:relative;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.accueil-card::before{
  content:'';
  position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--card-accent,var(--accent));
  opacity:0;transition:opacity 0.18s;
  box-shadow:0 0 8px var(--card-accent,var(--accent));
}
.accueil-card:hover{
  border-color:rgba(255,255,255,0.15);
  background:rgba(0,245,255,0.04);
  transform:translateX(3px);
  box-shadow:0 4px 24px rgba(0,0,0,0.4);
}
.accueil-card:hover::before{opacity:1}
.accueil-card-icon{
  width:46px;height:46px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
  transition:transform 0.18s;
}
.accueil-card:hover .accueil-card-icon{transform:scale(1.1)}
.accueil-card-body{flex:1;min-width:0}
.accueil-card-title{
  font-size:14px;font-weight:600;margin-bottom:3px;
  letter-spacing:0.3px;
  transition:text-shadow 0.18s;
}
.accueil-card-desc{font-size:12px;color:var(--fog);line-height:1.5}
.accueil-card-arrow{
  font-size:24px;font-weight:300;flex-shrink:0;
  opacity:0;transform:translateX(-6px);
  transition:all 0.18s;line-height:1;
}
.accueil-card:hover .accueil-card-arrow{opacity:1;transform:translateX(0)}

/* Light theme accueil */
body.light .accueil-hero{background:rgba(255,255,255,0.95);border-color:rgba(0,0,0,0.07)}
body.light .accueil-card{background:rgba(255,255,255,0.92);border-color:rgba(0,0,0,0.07)}
body.light .accueil-card:hover{background:#fff;border-color:rgba(0,0,0,0.15);transform:translateX(3px)}
body.light .accueil-stat-val{text-shadow:none}

/* ══════════════════════════════════════════════════════════
   ACHIEVEMENT SYSTEM
══════════════════════════════════════════════════════════ */

/* ── Toast notification ─────────────────────────────────── */
.ach-toast {
  position: fixed;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9500;
  pointer-events: none;
  animation: achToastIn 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.ach-toast.ach-toast-out {
  animation: achToastOut 0.5s ease forwards;
}
@keyframes achToastIn {
  from { transform: translateX(-50%) translateY(40px) scale(0.85); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0)   scale(1);    opacity: 1; }
}
@keyframes achToastOut {
  to { transform: translateX(-50%) translateY(-24px) scale(0.9); opacity: 0; }
}
.ach-toast-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(4,2,14,0.99);
  border: 1px solid;
  border-radius: 3px;
  padding: 14px 22px 14px 16px;
  min-width: 320px;
  max-width: 480px;
  overflow: hidden;
  clip-path: polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.ach-toast-glow {
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
}
.ach-toast-icon {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px currentColor);
}
.ach-toast-body { flex: 1; min-width: 0; }
.ach-toast-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.ach-toast-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid;
  border-radius: 20px;
}
.ach-toast-cat { font-size: 10px; color: var(--fog); letter-spacing: 1px; text-transform: uppercase; }
.ach-toast-name { font-size: 16px; font-weight: 700; font-family: 'Playfair Display', serif; margin-bottom: 2px; }
.ach-toast-desc { font-size: 11px; color: var(--mist); }

/* ── Achievement view ───────────────────────────────────── */
.ach-wrap {
  max-width: 860px;
  margin: 0 auto;
  background: rgba(8,6,20,0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0,245,255,0.12);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.55), inset 0 0 60px rgba(0,245,255,0.025);
}

.ach-header {
  background: rgba(0,245,255,0.04);
  border: 1px solid rgba(0,245,255,0.25);
  border-radius: 8px;
  padding: 32px 36px;
  margin-bottom: 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0,245,255,0.08), inset 0 0 40px rgba(0,245,255,0.04);
}
.ach-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 14px var(--accent);
}
.ach-header-count {
  font-size: 56px;
  font-family: monospace;
  font-weight: 300;
  line-height: 1;
  margin-bottom: 14px;
}
.ach-header-num  { color: var(--accent); text-shadow: var(--neon-glow); }
.ach-header-sep  { color: var(--fog); font-size: 36px; margin: 0 8px; }
.ach-header-total{ color: var(--mist); }
.ach-global-bar-wrap {
  width: 280px;
  height: 6px;
  background: rgba(0,245,255,0.08);
  border: 1px solid rgba(0,245,255,0.12);
  border-radius: 0;
  overflow: hidden;
  margin: 0 auto 10px;
}
.ach-global-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--accent));
  box-shadow: 0 0 10px rgba(0,245,255,0.6);
  transition: width 0.8s cubic-bezier(0.34,1.56,0.64,1);
}

/* Category section */
.ach-cat { margin-bottom: 30px; }
.ach-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,245,255,0.12);
}
.ach-cat-name {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(0,245,255,0.4);
  font-weight: 600;
}
.ach-cat-count {
  font-size: 12px;
  color: var(--mist);
  font-family: monospace;
  background: rgba(0,245,255,0.07);
  padding: 2px 10px;
  border: 1px solid rgba(0,245,255,0.15);
  border-radius: 20px;
}
.ach-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Achievement card — locked */
.ach-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(0,30,60,0.55);
  border: 1px solid rgba(0,245,255,0.15);
  border-radius: 8px;
  padding: 16px 18px;
  transition: all 0.2s;
  filter: grayscale(0.5) brightness(0.75);
  box-shadow: inset 0 0 20px rgba(0,245,255,0.02);
}
.ach-card.ach-unlocked {
  filter: none;
  background: rgba(0,35,70,0.65);
  border-color: rgba(0,245,255,0.25);
  box-shadow: inset 0 0 20px rgba(0,245,255,0.04), 0 0 12px rgba(0,245,255,0.06);
}
.ach-card:hover {
  filter: none;
  border-color: rgba(0,245,255,0.45);
  background: rgba(0,40,80,0.75);
  box-shadow: inset 0 0 20px rgba(0,245,255,0.06), 0 0 16px rgba(0,245,255,0.1);
}

.ach-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  background: rgba(0,245,255,0.06);
  border: 1px solid rgba(0,245,255,0.18);
  color: var(--fog);
  transition: all 0.2s;
}
.ach-card.ach-hidden .ach-card-icon {
  font-size: 20px;
  font-family: monospace;
}

.ach-card-body { flex: 1; min-width: 0; }
.ach-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.ach-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--snow);
  flex: 1;
  min-width: 0;
  letter-spacing: 0.3px;
  font-family: 'Playfair Display', serif;
}
.ach-rarity-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid;
  flex-shrink: 0;
}
.ach-check { font-size: 14px; font-weight: 700; flex-shrink: 0; }
.ach-card-desc {
  font-size: 12px;
  color: var(--mist);
  line-height: 1.6;
}
.ach-unlock-date {
  font-size: 10px;
  color: var(--fog);
  font-family: monospace;
  margin-top: 6px;
  letter-spacing: 0.5px;
}

/* Progress bar inside card */
.ach-prog-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
}
.ach-prog-track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
}
.ach-prog-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
  box-shadow: 0 0 5px currentColor;
}
.ach-prog-val {
  font-size: 11px;
  font-family: monospace;
  color: var(--mist);
  min-width: 42px;
  text-align: right;
}

/* Light theme */
body.light .ach-wrap { background: rgba(255,255,255,0.85); border-color: rgba(0,0,0,0.1); box-shadow: 0 8px 40px rgba(0,0,0,0.12); }
body.light .ach-card { background: rgba(220,240,255,0.8); border-color: rgba(0,100,180,0.15); box-shadow: none; }
body.light .ach-card:hover { border-color: rgba(0,100,180,0.35); background: rgba(210,235,255,0.95); box-shadow: none; }
body.light .ach-card.ach-unlocked { background: rgba(220,245,255,0.95); border-color: rgba(0,100,180,0.25); }
body.light .ach-card-icon { background: rgba(0,100,180,0.07); border-color: rgba(0,100,180,0.15); }
body.light .ach-card-name { color: #1a1714; }
body.light .ach-card-desc { color: #5a5a72; }
body.light .ach-header { background: rgba(210,240,255,0.6); border-color: rgba(0,100,180,0.2); }
body.light .ach-toast-inner { background: #fff; }
body.light .ach-cat-count { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: #5a5a72; }