:root{--bg: #0b0f17;--bg-2: #121828;--fg: #dbe0ff;--accent: #63e485;--accent-2: #59b0ff;--danger: #ff6b6b;--pixel-border: 2px;--accent-3: #ffcc00;--footer-height: 56px}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--fg);font-family:DotGothic16,"Press Start 2P",Noto Sans JP,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;letter-spacing:.2px}.app{display:grid;grid-template-rows:auto 1fr auto;height:100%}.header,.footer{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--bg-2);border:calc(var(--pixel-border) * 2) solid #000;outline:var(--pixel-border) solid #333;box-shadow:4px 4px #000,8px 8px #333}.footer{border-top:calc(var(--pixel-border) * 2) solid #000;position:fixed;left:0;right:0;bottom:0;z-index:1000;min-height:var(--footer-height);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.brand{font-weight:700;letter-spacing:.5px;font-family:"Press Start 2P",DotGothic16,sans-serif}.brand.glitch{position:relative;text-shadow:0 0 0 #000,1px 0 0 rgba(99,228,133,.4),-1px 0 0 rgba(89,176,255,.4);animation:glitch 2.8s steps(2) infinite}@keyframes glitch{0%,94%,to{transform:none}95%{transform:translate(1px)}97%{transform:translate(-1px)}}.nav a{color:var(--fg);text-decoration:none;margin-right:12px;display:inline-block;padding:4px 8px;border:var(--pixel-border) solid #000;box-shadow:0 0 0 var(--pixel-border) #333;position:relative}.nav a:hover{color:#08121f;background:var(--accent)}.nav a:after{content:"";position:absolute;left:4px;right:4px;bottom:2px;height:2px;background:linear-gradient(90deg,var(--accent-2) 0 50%,transparent 50% 100%);background-size:6px 2px;opacity:.25;transition:opacity .2s ease;animation:ants 1.2s linear infinite}.nav a:hover:after{opacity:.6}@keyframes ants{0%{background-position:0 0}to{background-position:6px 0}}.main{padding:12px;padding-bottom:calc(var(--footer-height) + 20px)}.bottom-toolbar{position:sticky;bottom:calc(var(--footer-height) + 6px);z-index:900;background:var(--bg);padding:6px;border:calc(var(--pixel-border) * 2) solid #000;outline:var(--pixel-border) solid #333;box-shadow:2px 2px #000,4px 4px #333}.classic .bottom-toolbar{background:#f6efe2;border-color:#3b2f2f}.bottom-toolbar .input,.bottom-toolbar .select{padding:4px}.bottom-toolbar .btn{padding:6px 8px}.top-toolbar{position:sticky;top:12px;z-index:20;background:var(--bg);padding:6px;border:calc(var(--pixel-border) * 2) solid #000;outline:var(--pixel-border) solid #333;box-shadow:2px 2px #000,4px 4px #333;margin-bottom:8px}.classic .top-toolbar{background:#f6efe2;border-color:#3b2f2f}.top-toolbar .input,.top-toolbar .select{padding:4px}.top-toolbar .btn{padding:6px 8px}.tasks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}.content-grid{display:grid;grid-template-columns:1fr 280px;gap:8px;align-items:start;padding-left:8px}.left-rail{display:grid;gap:8px;align-self:start}.left-rail-widgets{display:grid;gap:8px}.pixel-card{position:relative;background:linear-gradient(var(--bg-2),var(--bg-2)),repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 4px);border:calc(var(--pixel-border) * 2) solid #000;outline:var(--pixel-border) solid #333;box-shadow:4px 4px #000,8px 8px #333;padding:12px;margin-bottom:12px;overflow:visible}.pixel-card:before,.pixel-card:after{content:"";position:absolute;width:8px;height:8px;background:var(--bg);border:var(--pixel-border) solid #000}.pixel-card:before{left:-2px;top:-2px}.pixel-card:after{right:-2px;bottom:-2px}.pixel-card.lego{--stud-size: 16px;--stud-gap: 8px;--lego-color: var(--accent-2)}.pixel-card.lego:before{content:"";position:absolute;left:8px;right:8px;top:-14px;height:20px;background:radial-gradient(circle,#ffffff47 30%,#fff0 31%) left 0 center / var(--stud-size) var(--stud-size) repeat-x,radial-gradient(circle,#0000008c 36%,#0000 37%) left 0 center / var(--stud-size) var(--stud-size) repeat-x;background-color:var(--lego-color);border:var(--pixel-border) solid #000;box-shadow:0 2px #000,0 4px #333}.pixel-card.lego:after{content:"";position:absolute;left:8px;right:8px;bottom:-14px;height:20px;background:radial-gradient(circle,#ffffff47 30%,#fff0 31%) left 0 center / var(--stud-size) var(--stud-size) repeat-x,radial-gradient(circle,#0000008c 36%,#0000 37%) left 0 center / var(--stud-size) var(--stud-size) repeat-x;background-color:var(--lego-color);border:var(--pixel-border) solid #000;box-shadow:0 -2px #000,0 -4px #333}.lego-red{--lego-color: #e7462b}.lego-blue{--lego-color: #1e6cf1}.lego-yellow{--lego-color: #f2c500}.lego-green{--lego-color: #32c85a}.titlebar{display:grid;grid-template-columns:1fr auto;align-items:center;background:#1a2240;color:var(--fg);border:var(--pixel-border) solid #000;box-shadow:0 0 0 var(--pixel-border) #333;margin:-8px -8px 8px;padding:6px 8px}.titlebar .title{font-family:"Press Start 2P",DotGothic16,sans-serif;letter-spacing:.5px}.titlebar .title-actions{display:flex;gap:8px}.btn{position:relative;background:var(--accent-2);color:#08121f;border:var(--pixel-border) solid #000;padding:8px 12px;cursor:pointer;box-shadow:calc(var(--pixel-border)) calc(var(--pixel-border)) 0 #000,calc(var(--pixel-border) * 2) calc(var(--pixel-border) * 2) 0 #333}.btn:hover{filter:brightness(1.05)}.btn:active{transform:translate(calc(var(--pixel-border)),calc(var(--pixel-border)));box-shadow:0 0 #000}.btn:focus-visible{outline:none;box-shadow:0 0 0 var(--pixel-border) #fff,calc(var(--pixel-border)) calc(var(--pixel-border)) 0 #000}.btn.danger{background:var(--danger);color:#1a0b0b}.btn.secondary{background:var(--accent)}.btn.ghost{background:transparent;color:var(--fg)}.btn.ghost:hover{background:#1b2336}.btn.icon-btn{width:64px;height:64px;padding:6px;display:grid;place-items:center}.btn.icon-btn .icon{width:48px;height:48px;image-rendering:pixelated}.task-item a{color:var(--fg);text-decoration:none;font-weight:600}.task-item a:hover{color:#08121f;background:var(--accent)}.classic .task-item a{color:#2f2520}.classic .task-item a:hover{background:#c9b89a;color:#2f2520}.input,.select,.textarea{background:#0f1526;color:var(--fg);border:var(--pixel-border) solid #000;padding:6px}.input,.select,.textarea{box-shadow:inset var(--pixel-border) var(--pixel-border) 0 #000,inset calc(var(--pixel-border) * -1) calc(var(--pixel-border) * -1) 0 #333;caret-color:var(--accent)}.textarea{min-height:92px}.input::placeholder,.textarea::placeholder{color:#9aa8c7}img,canvas{image-rendering:pixelated}.icon-xs{width:18px;height:18px;image-rendering:pixelated;display:inline-block}.stat-bars{display:grid;gap:4px}.hp-bar,.mp-bar,.xp-bar{height:10px;background:#0f1526;border:var(--pixel-border) solid #000;box-shadow:0 0 0 var(--pixel-border) #333}.hp-fill{height:100%;background:linear-gradient(90deg,#ff6b6b,#ff9b9b)}.mp-fill{height:100%;background:linear-gradient(90deg,#59b0ff,#98c7ff)}.rarity-common{border-color:#222}.rarity-uncommon{outline-color:#63e485}.rarity-rare{outline-color:#59b0ff}.rarity-epic{outline-color:#b079ff}.rarity-legendary{outline-color:#fc0}.xp-toast.crit{color:#fc0;border-color:#fc0}.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 12% 20%,rgba(89,176,255,.08),transparent 45%),radial-gradient(circle at 85% 30%,rgba(99,228,133,.06),transparent 45%),repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 2px,transparent 2px 40px),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 40px);background-size:100% 100%,100% 100%,1px 40px,40px 1px;animation:bgslide 30s linear infinite}@keyframes bgslide{0%{background-position:0 0,0 0,0 0,0 0}to{background-position:0 0,0 0,0 40px,40px 0}}.sprite-icon{display:inline-block;border:var(--pixel-border) solid #000;box-shadow:0 0 0 var(--pixel-border) #333;background:#0f1526}.sprite-icon.bob{animation:bob 1.2s ease-in-out infinite}.sprite-icon.sparkle:after,.sprite-icon.sparkle:before{content:"";position:absolute;width:2px;height:2px;background:var(--accent-2);box-shadow:2px 0 #000;opacity:.9;animation:sparkle 1.2s steps(2) infinite}.sprite-icon.sparkle:after{right:2px;top:2px}.sprite-icon.sparkle:before{left:2px;bottom:2px;animation-delay:.6s}.retro-overlay{position:fixed;inset:0;pointer-events:none;z-index:100;background-image:repeating-linear-gradient(180deg,#ffffff08 0 1px,#00000008 1px 2px),repeating-linear-gradient(90deg,#ffffff04 0 1px,#00000004 1px 2px),radial-gradient(closest-side,#0000 60%,#00000038);background-size:auto,auto,100% 100%;animation:scan-jitter 12s linear infinite,flicker 1.8s steps(2) infinite}@keyframes scan-jitter{0%{background-position:0 0,0 0,0 0}to{background-position:0 2px,2px 0,0 0}}@keyframes flicker{0%,to{opacity:1}50%{opacity:.98}}.pixel-fx-layer{position:fixed;inset:0;pointer-events:none;z-index:9999}.pixel-burst{position:absolute;transform:translate(-50%,-50%)}.pixel-particle{position:absolute;left:0;top:0;width:var(--size);height:var(--size);background:var(--color);border:var(--pixel-border) solid #000;box-shadow:0 0 0 var(--pixel-border) #333;opacity:.95;animation:burst .7s ease-out forwards;animation-delay:var(--delay)}@keyframes burst{0%{transform:translate(0);opacity:1}80%{transform:translate(var(--dx),var(--dy));opacity:1}to{transform:translate(var(--dx),var(--dy));opacity:0}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-1px)}}@keyframes sparkle{0%,to{opacity:.85}50%{opacity:.4}}.crt-noise{position:fixed;inset:0;pointer-events:none;z-index:101;background-image:radial-gradient(circle at 12% 15%,rgba(255,255,255,.05),transparent 40%),radial-gradient(circle at 85% 88%,rgba(0,0,0,.05),transparent 40%),repeating-linear-gradient(0deg,#ffffff0a 0 1px,#0000000a 1px 2px);mix-blend-mode:soft-light;opacity:.08;animation:noise-move 1.8s steps(2) infinite}@keyframes noise-move{0%,to{background-position:0 0,0 0,0 0}50%{background-position:4px -3px,-2px 6px,0 2px}}.btn{position:relative;overflow:hidden}.btn:after{content:"";position:absolute;top:-50%;left:-20%;width:40%;height:200%;background:linear-gradient(45deg,#fff3,#fff0);transform:translate(-100%);opacity:0}.btn:hover:after{animation:shine .6s ease-out forwards}@keyframes shine{0%{transform:translate(-100%);opacity:0}20%{opacity:.5}to{transform:translate(300%);opacity:0}}.tasks{display:grid;gap:8px}.task-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}.xp-bar{height:12px;background:#111522;border:var(--pixel-border) solid #000}.xp-fill{height:100%;background:linear-gradient(90deg,#ffffff26,#fff0),repeating-linear-gradient(45deg,#ffffff40 0 4px,#0000 4px 8px),var(--accent);animation:progress-stripes 2s linear infinite}@keyframes progress-stripes{0%{background-position:0 0,0 0,0 0}to{background-position:40px 0,16px 0,0 0}}.toast{position:fixed;left:50%;top:16px;transform:translate(-50%);background:#0f1526;color:var(--accent);border:var(--pixel-border) solid #000;padding:8px 12px;box-shadow:0 0 0 var(--pixel-border) #333;animation:pop .2s ease-out,fade 2s ease-out}@keyframes pop{0%{transform:translate(-50%) scale(.9);opacity:0}to{transform:translate(-50%) scale(1);opacity:1}}@keyframes fade{0%{opacity:1}80%{opacity:1}to{opacity:0}}.modal-overlay{position:fixed;inset:0;background:#080c18b3;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:grid;place-items:center;z-index:10000}.modal-center{width:min(520px,90vw)}.calendar{padding:12px}.calendar-header{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:8px;margin-bottom:8px}.calendar-header .month-title{text-align:center;font-weight:700}.weekday-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:6px 0 8px}.weekday{text-align:center;opacity:.8;font-size:12px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.calendar-cell{background:#0c1020e6;border:2px solid #2c3e50;box-shadow:0 0 0 2px #0b1320 inset;border-radius:6px;padding:6px;min-height:110px;display:grid;grid-template-rows:auto 1fr}.calendar-cell.other-month{opacity:.5}.calendar-cell.today{outline:2px dashed #5dd6ff;outline-offset:2px}.calendar-cell.has-tasks{border-color:#7e57c2}.cell-top{display:flex;justify-content:space-between;align-items:center}.date-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:none;color:inherit;cursor:pointer;padding:0}.date-num{font-weight:700}.add-symbol{opacity:.7}.cell-content{margin-top:4px}.no-task{opacity:.5;font-size:12px;text-align:center}.task-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}.task-list li a{color:#cce1ff;text-decoration:none}.task-list li.more{opacity:.7;font-size:12px}.add-inline{display:grid;gap:8px}.add-inline input[type=text]{width:100%}.add-inline .actions{display:flex;gap:8px}.app.classic{font-family:Georgia,Times New Roman,serif;color:#2f2520}.classic .bg-grid{opacity:.1}.classic .retro-overlay{background:radial-gradient(ellipse at center,#f0e8d880,#f0e8d833 60%,#f0e8d81a)}.classic .header{background:#e8dec9;border-bottom:2px solid #3b2f2f}.classic .brand{color:#3b2f2f;text-shadow:none;filter:none}.classic .footer{background:#e8dec9;border-top:2px solid #3b2f2f}.classic .nav a{color:#3b2f2f}.classic .pixel-card{background:#f6efe2;border-color:#3b2f2f}.classic .btn{background:#c9b89a;border-color:#3b2f2f;color:#2f2520}.classic .btn.secondary{background:#e3d6be}.classic .btn.danger{background:#d7a9a9}.classic-story{background:#f0e8d8;border:2px solid #3b2f2f;padding:8px;border-radius:4px}.bell-img{width:64px;height:64px;image-rendering:pixelated;cursor:pointer;border:var(--pixel-border) solid #000;box-shadow:0 0 0 var(--pixel-border) #333}.layout-with-sidebar{display:grid;grid-template-columns:220px 1fr;grid-template-rows:auto auto;align-items:start;gap:16px}.sidebar{position:sticky;top:12px;align-self:start;display:grid;gap:8px}.sidebar-section{background:var(--bg-2);border:calc(var(--pixel-border) * 2) solid #000;outline:var(--pixel-border) solid #333;box-shadow:4px 4px #000,8px 8px #333;padding:8px}.classic .sidebar-section{background:#f6efe2;border-color:#3b2f2f}.sidebar-title{font-weight:700;font-family:"Press Start 2P",DotGothic16,sans-serif;margin-bottom:6px}.sidebar-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px;padding:4px 0}.sidebar-item.selected .sidebar-label{color:var(--accent-2)}.classic .sidebar-item.selected .sidebar-label{color:#3b2f2f;background:#e3d6be}.sidebar-label{background:transparent;border:none;color:var(--fg);text-align:left;cursor:pointer}.classic .sidebar-label{color:#2f2520}.sidebar-actions{display:flex;gap:6px}.icon-btn{background:transparent;border:var(--pixel-border) solid #000;color:var(--fg);padding:2px 6px;cursor:pointer}.icon-btn.starred{color:var(--accent-3);border-color:var(--accent-3)}.classic .icon-btn{color:#2f2520;border-color:#3b2f2f}.classic .icon-btn.starred{color:#b07f00;border-color:#b07f00}.mini-calendar{display:grid;gap:8px}.mini-calendar-header{display:flex;align-items:center;gap:8px}.mini-calendar-title{font-weight:700}.mini-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.mini-calendar-weekday{text-align:center;font-size:11px;opacity:.8}.mini-calendar-day{position:relative;height:32px;border:var(--pixel-border) solid #000;background:#ffffff0d;display:flex;align-items:center;justify-content:center}.classic .mini-calendar-day{border-color:#3b2f2f;background:#f3ece0}.mini-calendar-day.empty{border:none;background:transparent}.mini-calendar-day .num{font-size:12px}.mini-calendar-day.today{outline:2px solid var(--accent-2)}.classic .mini-calendar-day.today{outline-color:#b07f00}.mini-calendar-day .dot{position:absolute;bottom:4px;right:4px;font-size:10px;color:var(--accent-3)}.classic .mini-calendar-day .dot{color:#b07f00}.mobile-only{display:none}@media(max-width:768px){.layout-with-sidebar{grid-template-columns:1fr;grid-template-rows:auto auto;gap:8px}.sidebar,.left-rail{display:none}.content-grid{grid-template-columns:1fr;padding-left:0}.tasks-grid{grid-template-columns:1fr}.mobile-only{display:inline-block}.sidebar-drawer-backdrop{position:fixed;inset:0;background:#00000080;z-index:2000}.sidebar-drawer{position:fixed;z-index:2001;left:0;top:0;bottom:0;width:85vw;max-width:360px;background:var(--bg-2);border-right:calc(var(--pixel-border) * 2) solid #000;outline:var(--pixel-border) solid #333;box-shadow:4px 0 #000,8px 0 #333;padding:8px;overflow-y:auto}.classic .sidebar-drawer{background:#f6efe2;border-color:#3b2f2f}}