:root{--bg: #0b0e14;--bg-raised: #141a24;--bg-sunken: #090c12;--line: #232c3b;--line-strong: #35415a;--text: #e6ebf4;--text-dim: #8d99ae;--accent: #ffd479;--accent-dim: #a8853c;--grade1: #97a3b6;--grade2: #56cc7f;--grade3: #5aa9f0;--grade4: #f59043;--radius: 10px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -10%,#16202f 0%,var(--bg) 55%);background-attachment:fixed;color:var(--text);min-height:100vh}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.app{max-width:1240px;margin:0 auto;padding:24px 20px 40px;display:flex;flex-direction:column;gap:18px}.topbar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}.topbar h1{margin:0;font-size:1.6rem;letter-spacing:.02em}.topbar p{margin:4px 0 0;color:var(--text-dim);font-size:.9rem}.classpick{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--text-dim)}.classpick select{background:var(--bg-raised);color:var(--text);border:1px solid var(--line-strong);border-radius:var(--radius);padding:9px 12px;font-size:.95rem;min-width:150px}.tabs{display:flex;flex-wrap:wrap;gap:6px;background:var(--bg-sunken);border:1px solid var(--line);border-radius:var(--radius);padding:6px}.tab{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 12px;background:transparent;border:1px solid transparent;border-radius:7px;color:var(--text-dim);cursor:pointer;font:inherit;transition:background .12s,color .12s,border-color .12s}.tab:hover{background:#1a2231;color:var(--text)}.tab--active{background:#1e2839;border-color:var(--accent-dim);color:var(--accent)}.tab__name{display:inline-flex;align-items:center;gap:5px;font-size:.92rem;font-weight:600}.tab__dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}.tab__level{font-size:.7rem;opacity:.75}.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px;align-items:start}@media(max-width:900px){.layout{grid-template-columns:minmax(0,1fr)}}.notice{grid-column:1 / -1;color:var(--text-dim);padding:20px}.notice--error{color:#ff8f8f}.board{position:relative;background:var(--bg-sunken);border:1px solid var(--line);border-radius:14px;padding:10px;min-width:0}.board__scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.board__inner{position:relative}.board__svg{display:block;width:100%;height:auto}.board__edges line{stroke:var(--accent);stroke-width:7;stroke-linecap:round;opacity:.35}.node{cursor:pointer;-webkit-tap-highlight-color:transparent}.node__hit{fill:transparent}.node--start{cursor:default}.node:focus{outline:none}.node:focus-visible .node__shape{stroke:#fff;stroke-width:3}.node__shape{fill:var(--grade1);stroke:transparent;stroke-width:2;transition:fill-opacity .12s,stroke .12s}.node--grade1 .node__shape{fill:var(--grade1)}.node--grade2 .node__shape{fill:var(--grade2)}.node--grade3 .node__shape{fill:var(--grade3)}.node--grade4 .node__shape{fill:var(--grade4)}.node__cost{font-size:13px;font-weight:600;pointer-events:none;fill:#0b0e14}.node--idle .node__shape{fill-opacity:.13}.node--idle .node__cost{fill:var(--text-dim);opacity:.6}.node:not(.node--start):hover .node__shape{fill-opacity:.45;stroke:var(--line-strong)}.node--route .node__shape{fill-opacity:.55;stroke:var(--accent-dim)}.node--wanted .node__shape{fill-opacity:1;stroke:var(--accent);stroke-width:2.5}.node--wanted:hover .node__shape{fill-opacity:.85}.node__icon{pointer-events:none;opacity:.5;transition:opacity .12s}.node--route .node__icon,.node--wanted .node__icon{opacity:1}.node:not(.node--start):hover .node__icon{opacity:1}.node__cost--corner{font-size:11px;paint-order:stroke;stroke:#0b0e14;stroke-width:3px;stroke-linejoin:round;fill:#e6ebf4}.node--idle .node__cost--corner{fill:var(--text-dim);opacity:.85}.node__pick{fill:var(--accent);pointer-events:none}.node--start .node__shape{fill:var(--accent);fill-opacity:1;stroke:#fff;stroke-width:2}.tooltip{position:absolute;--tooltip-x: -50%;--tooltip-y: calc(-100% - 12px) ;transform:translate(var(--tooltip-x),var(--tooltip-y));z-index:5;width:max-content;max-width:260px;padding:10px 12px;background:#1b2432;border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 12px 28px #00000080;pointer-events:none;font-size:.82rem;line-height:1.4}.tooltip--start{--tooltip-x: 0%}.tooltip--end{--tooltip-x: -100%}.tooltip--below{--tooltip-y: 56px}.tooltip__title{font-weight:600;margin-bottom:3px}.tooltip__desc{color:var(--text-dim)}.tooltip__skill{margin-top:4px;color:var(--grade3)}.tooltip__meta{display:flex;align-items:center;gap:8px;margin-top:7px;color:var(--text-dim);font-size:.76rem}.tooltip__picked{color:var(--accent)}.chip{display:inline-flex;align-items:center;justify-content:center;min-width:20px;padding:1px 6px;border-radius:5px;font-size:.72rem;font-weight:700;color:#0b0e14}.chip--grade1{background:var(--grade1)}.chip--grade2{background:var(--grade2)}.chip--grade3{background:var(--grade3)}.chip--grade4{background:var(--grade4)}.sheet{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 14px;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));background:#1b2432;border-top:1px solid var(--line-strong);box-shadow:0 -10px 30px #00000080;font-size:.86rem;line-height:1.4}.sheet__body{flex:1 1 190px;min-width:0}.sheet__actions{display:flex;gap:8px;flex:0 0 auto}.sheet__take,.sheet__close{min-height:44px;padding:0 16px;border-radius:9px;cursor:pointer;font:inherit;font-size:.85rem;font-weight:600}.sheet__take{background:var(--accent);border:1px solid var(--accent);color:#17202e}.sheet__close{background:transparent;border:1px solid var(--line-strong);color:var(--text-dim)}.sidebar{display:flex;flex-direction:column;gap:14px;position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto;padding-right:2px}@media(max-width:900px){.sidebar{position:static;max-height:none;overflow:visible}}.panel{background:var(--bg-raised);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:16px}.totals{display:flex;gap:22px;align-items:baseline;transition:opacity .15s}.totals--stale{opacity:.4}.total{display:flex;align-items:baseline;gap:6px}.total__value{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}.total--primary .total__value{font-size:2.4rem;color:var(--accent);line-height:1}.total__label{color:var(--text-dim);font-size:.82rem}.statusrow{display:flex;align-items:center;gap:10px}.badge{padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border:1px solid}.badge--exact{color:var(--grade2);border-color:#56cc7f66;background:#56cc7f1a}.badge--approx{color:var(--grade4);border-color:#f5904366;background:#f590431a}.badge--busy{color:var(--text-dim);border-color:var(--line-strong)}.statusrow__time{color:var(--text-dim);font-size:.75rem;font-variant-numeric:tabular-nums}.breakdown{margin:0;display:flex;flex-direction:column;gap:7px;font-size:.83rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}.breakdown>div{display:flex;justify-content:space-between;gap:12px}.breakdown dt{color:var(--text-dim)}.breakdown dd{margin:0;font-variant-numeric:tabular-nums}.actions{display:flex;gap:8px}.actions button{flex:1;padding:9px 10px;background:#1e2839;color:var(--text);border:1px solid var(--line-strong);border-radius:8px;cursor:pointer;font:inherit;font-size:.85rem;transition:background .12s}.actions button:hover:not(:disabled){background:#27334a}.actions button:disabled{opacity:.4;cursor:default}.share{display:flex;flex-direction:column;gap:7px;margin-top:-6px}.share__hint{margin:0;color:var(--text-dim);font-size:.72rem;line-height:1.4}.picked h2{margin:0 0 8px;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}.picked__empty{margin:0;color:var(--text-dim);font-size:.83rem;line-height:1.5}.picked ul{list-style:none;margin:0;padding:0;max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:3px}.picked__item{width:100%;display:flex;align-items:center;gap:8px;padding:5px 7px;background:transparent;border:1px solid transparent;border-radius:7px;color:var(--text);cursor:pointer;font:inherit;font-size:.8rem;text-align:left}.picked__item:hover{background:#1e2839;border-color:var(--line-strong)}.picked__name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.picked__skill{font-size:.66rem;text-transform:uppercase;color:var(--grade3)}.picked__remove{color:var(--text-dim);font-size:1rem;line-height:1}.picked__item:hover .picked__remove{color:#ff8f8f}.classtotal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:11px 14px;background:linear-gradient(90deg,#1a2434 0%,var(--bg-raised) 60%);border:1px solid var(--line-strong);border-radius:var(--radius)}.classtotal__figures{display:flex;align-items:baseline;gap:7px}.classtotal__label{color:var(--text-dim);font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;margin-right:4px}.classtotal__value{font-size:1.3rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}.classtotal__value+.classtotal__unit{margin-right:8px}.classtotal__unit{color:var(--text-dim);font-size:.78rem}.classtotal__hint{color:var(--text-dim);font-size:.75rem}.classtotal__boards{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}.boardchip{display:flex;align-items:baseline;gap:6px;padding:3px 9px;background:#10161f;border:1px solid var(--line-strong);border-radius:999px;color:var(--text-dim);cursor:pointer;font:inherit;font-size:.74rem}.boardchip:hover{background:#1e2839;color:var(--text)}.boardchip--active{border-color:var(--accent-dim);color:var(--accent)}.boardchip__name{font-weight:600}.boardchip__pts{font-variant-numeric:tabular-nums;opacity:.85}.stats{background:var(--bg-raised);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px}.stats__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}.stats h2{margin:0;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}.scope{display:flex;background:var(--bg-sunken);border:1px solid var(--line);border-radius:7px;padding:2px}.scope__button{padding:4px 9px;background:transparent;border:none;border-radius:5px;color:var(--text-dim);cursor:pointer;font:inherit;font-size:.73rem;transition:background .12s,color .12s}.scope__button:hover{color:var(--text)}.scope__button--on{background:#26324a;color:var(--accent);font-weight:600}.stats__scopenote,.stats__empty{margin:0;color:var(--text-dim);font-size:.75rem;line-height:1.45}.stats__group h3{margin:12px 0 6px;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);opacity:.8}.stats__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}.stats__list li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:3px 0;font-size:.81rem;border-bottom:1px solid rgba(35,44,59,.5)}.stats__list li:last-child{border-bottom:none}.stats__name{color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stats__value{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}.stats__value--skill{color:var(--grade3)}.footer{color:var(--text-dim);font-size:.76rem;text-align:center;padding-top:6px}.footer a{color:var(--text-dim)}@media(max-width:560px){.app{padding:14px 12px 32px;gap:14px}.topbar{align-items:stretch;gap:12px}.topbar h1{font-size:1.35rem}.topbar p{font-size:.84rem}.classpick{width:100%}.classpick select{flex:1;min-width:0}.tabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{flex:0 0 auto;min-height:44px;padding:6px 14px}.classtotal{padding:10px 12px}.classtotal__figures{flex-wrap:wrap}.classtotal__label{flex-basis:100%;margin-bottom:2px}.panel,.stats{padding:14px}.total--primary .total__value{font-size:2rem}.actions button,.scope__button{min-height:44px}.picked__item{min-height:40px}.picked ul{max-height:none}.footer{padding-bottom:72px}}html,body{overflow-x:hidden}