/* Offline fonts: system font stack. */
:root{color-scheme:dark;--bg:#07131f;--surface:#0c1d2c;--surface2:#112739;--surface3:#173246;--line:#213e50;--txt:#eaf7fb;--muted:#91aabb;--cyan:#55e3cc;--gold:#f1c66d;--blue:#80aafe;--red:#ffa19a;--radius:18px;--shadow:0 16px 50px #0004;font-family:'Be Vietnam Pro',Inter,system-ui,-apple-system,Segoe UI,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--txt)}body{background:radial-gradient(900px 560px at 96% -10%,#10485e80,transparent),radial-gradient(700px 600px at 25% 95%,#132b4680,transparent),var(--bg);background-attachment:fixed}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}a{color:var(--cyan)}a:hover{color:#adfdec}.app-shell{display:grid;grid-template-columns:244px minmax(0,1fr);min-height:100vh}.sidebar{border-right:1px solid var(--line);background:#071622dc;padding:27px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{display:flex;gap:13px;align-items:center;padding:0 8px 28px;border-bottom:1px solid var(--line)}.brand-mark{width:49px;height:49px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(140deg,#245b65,#123048);font-size:28px;box-shadow:0 0 0 1px #568b8c66}.brand strong{display:block;font-size:16px;letter-spacing:-.4px}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:1.9px;margin-top:6px}.version{color:var(--cyan)}.sidebar-label,.eyebrow{color:#92a7b6;font-size:10px;letter-spacing:2px;font-weight:800}.sidebar-label{padding:30px 15px 14px}.nav{display:grid;gap:5px}.nav button{color:#adbfcc;text-align:left;padding:13px 12px;border:0;background:none;border-radius:11px;font-size:12px;font-weight:650}.nav button span{font-size:19px;margin-right:12px;color:#6f95a7;vertical-align:-2px}.nav button:hover{background:#143144}.nav button.active{background:#143648;color:var(--cyan);box-shadow:inset 3px 0 var(--cyan)}.nav button.active span{color:var(--cyan)}.sidebar-foot{margin-top:auto;display:flex;align-items:flex-start;gap:10px;border-top:1px solid var(--line);padding:21px 8px 0;color:#b9cdda;font-size:11px;line-height:1.7}.sidebar-foot small{color:var(--muted)}.mini-dot{background:var(--cyan);width:8px;height:8px;display:inline-block;border-radius:50%;flex:none;box-shadow:0 0 12px #55e3cc77}.sidebar-foot .mini-dot{margin-top:6px}.main{padding:24px clamp(18px,4vw,55px);max-width:1550px;width:100%;min-width:0;margin:auto}.topbar{margin-bottom:24px}.topline{display:flex;justify-content:space-between;align-items:center;gap:16px}.topbar h1{font-size:clamp(25px,3vw,35px);margin:8px 0 3px;letter-spacing:-1.4px}.header-actions{display:flex;align-items:center;gap:12px}.live-pill{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#102b3b;border-radius:100px;padding:9px 13px;font-size:11px;color:#b2dcd7}.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface2);color:var(--txt);font-size:20px}.notification{padding:10px 14px;border-radius:10px;background:#153f3d;border:1px solid #387a68;color:#c3ffe9;font-size:12px;margin-top:14px}.grid{display:grid;gap:15px}.two{grid-template-columns:1.45fr 1fr}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.four{grid-template-columns:repeat(4,minmax(0,1fr))}.card{border:1px solid var(--line);background:linear-gradient(145deg,#102436f5,#0b1d2dee);border-radius:var(--radius);padding:21px;min-width:0;box-shadow:0 7px 20px #020b1540}.card h2,.card h3{margin:0 0 10px}.card h2{font-size:17px;letter-spacing:-.4px}.card h3{font-size:14px}.card p{color:var(--muted);line-height:1.7;font-size:12px;margin:5px 0}.card-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.muted{color:var(--muted)!important}.small{font-size:11px!important}.tiny{font-size:10px!important}.kpi{padding:18px;background:#0e2a3a;border:1px solid #255263;border-radius:15px}.kpi .label{font-size:11px;color:var(--muted);margin-bottom:9px}.kpi .value{font-size:25px;font-weight:800;letter-spacing:-1px}.kpi .caption{font-size:10px;color:#84b4bb;margin-top:7px}.hero{display:flex;gap:18px;align-items:center;justify-content:space-between;overflow:hidden;position:relative;background:linear-gradient(112deg,#114453,#102c44 66%,#152b48);border-color:#2b6572}.hero:after{content:'✧';position:absolute;right:50px;top:-80px;font-size:250px;color:#3acabb13;pointer-events:none}.hero > *{position:relative;z-index:1}.hero h2{font-size:25px;margin:8px 0}.hero .sub{color:#b4dce2;font-size:12px;line-height:1.9}.hero .hero-symbol{font-size:75px;opacity:.8}.tag,.pill{border-radius:30px;padding:5px 10px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;border:1px solid #39707a;color:#8ff7dd;background:#14504f}.tag.gold{border-color:#6c5c39;background:#413b27;color:#f7d48b}.tag.blue{border-color:#475c81;background:#1b2e51;color:#b4c9ff}.tag.gray{border-color:#39515c;background:#162937;color:#9eb6c5}.tag.red{border-color:#754746;background:#492a2c;color:#ffb0ae}.section{margin-top:22px}.section-title{font-size:18px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;font-weight:800}.row{display:flex;gap:12px;align-items:center}.spread{justify-content:space-between}.wrap{flex-wrap:wrap}.btn{border:1px solid var(--line);border-radius:12px;color:var(--txt);background:#143145;padding:10px 15px;font-size:12px;font-weight:750;transition:.15s}.btn:hover{filter:brightness(1.15);transform:translateY(-1px)}.btn.primary{color:#032d32;background:linear-gradient(120deg,#65ead1,#55c7c9);border-color:#64ddca}.btn.gold{background:linear-gradient(120deg,#f4d187,#e4ae51);border-color:#f3ce80;color:#332108}.btn.ghost{background:transparent}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.danger{color:#ff9f9a}.btn.small{padding:7px 9px;font-size:10px}.field,.search-field{display:flex;flex-direction:column;gap:6px;font-size:11px;color:#a7bdca}.field input,.field select,.field textarea,.search-field input{border:1px solid #2b4a5e;border-radius:10px;background:#091a29;color:var(--txt);padding:10px 11px;min-width:0;width:100%;font-size:12px}.field input[type=checkbox]{width:auto}.field textarea{min-height:70px;resize:vertical}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.filters{display:flex;align-items:end;gap:11px;flex-wrap:wrap}.filters .field{min-width:125px;flex:1}.filters .search-field{min-width:200px;flex:2}.btn-row{display:flex;gap:8px;flex-wrap:wrap}.note{border:1px solid #344d65;background:#102638;border-radius:12px;color:#a9ccdf;padding:13px 14px;font-size:11px;line-height:1.75}.note.warning{border-color:#75623a;background:#332c21;color:#ffe6a7}.note.success{border-color:#316d65;background:#123a38;color:#a9f5e5}.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:11px}.skill-card{border-radius:15px;background:#0d2434;border:1px solid #2c4a5d;padding:13px;min-width:0;display:flex;flex-direction:column;gap:9px}.skill-card.off{opacity:.63}.skill-card-head{display:flex;align-items:start;gap:10px}.skill-icon{width:43px;height:43px;flex:none;border-radius:14px;display:grid;place-items:center;font-size:22px;background:#184455;border:1px solid #2a7580}.skill-icon.fire{background:#4c2e2a;border-color:#986448}.skill-icon.water{background:#193a61;border-color:#4488b4}.skill-icon.wind{background:#173f35;border-color:#419d82}.skill-icon.light{background:#534320;border-color:#b4933b}.skill-icon.dark{background:#392851;border-color:#8765b7}.skill-icon.none{background:#273a4a;border-color:#657a87}.skill-title{font-size:12px;font-weight:800;line-height:1.45;min-height:18px}.skill-meta{font-size:10px;color:#98b2c1;line-height:1.6}.skill-metrics{display:flex;gap:5px;flex-wrap:wrap}.skill-metrics span{background:#143346;border:1px solid #275068;color:#bad6dc;border-radius:7px;font-size:9px;padding:4px 6px}.skill-desc{font-size:10px;color:#93aabb;line-height:1.65;min-height:39px}.toggle{cursor:pointer;display:inline-flex;gap:6px;align-items:center;font-size:10px;color:#d1e5e5}.toggle input{accent-color:var(--cyan);width:16px;height:16px}.rank-card{border:1px solid #315d64;border-radius:15px;background:linear-gradient(145deg,#123b42,#102538);padding:17px}.rank-card .rank{font-size:12px;color:var(--gold);letter-spacing:1px;font-weight:800}.rank-card h3{font-size:17px;margin:6px 0}.rank-card .score{font-size:25px;font-weight:800;color:#82ecd4}.rank-card .skill-chips{margin:10px 0;display:flex;flex-wrap:wrap;gap:5px}.chip{border-radius:8px;background:#0c2938;border:1px solid #335263;padding:6px 8px;font-size:10px;color:#d5e3eb}.chip.charm{color:#e6d3fa;border-color:#655173;background:#2a213b}.bars{display:grid;gap:9px}.bar-row{display:grid;grid-template-columns:90px minmax(0,1fr) 60px;align-items:center;gap:10px;font-size:11px}.bar-track{background:#183144;height:10px;border-radius:7px;overflow:hidden}.bar-fill{height:100%;background:linear-gradient(90deg,#39b6b7,#6bedd0);border-radius:7px}.bar-fill.gold{background:linear-gradient(90deg,#c68b35,#ffd88b)}.timeline{display:grid;gap:8px}.milestone{display:flex;gap:13px;align-items:flex-start;padding:14px 15px;background:#112637;border:1px solid #254355;border-radius:12px}.milestone.active{border-color:#42b9a0;background:#153c3e}.milestone .dot{width:28px;height:28px;display:grid;place-items:center;border:1px solid #497187;border-radius:50%;font-size:12px;background:#1c3a4d;flex:none}.milestone.active .dot{border-color:#43bca2;background:#1b6b60}.milestone strong{font-size:12px}.milestone p{margin:4px 0 0}.table-scroll{overflow:auto}.data-table{width:100%;border-collapse:collapse;min-width:540px;font-size:11px}.data-table th{text-align:left;color:#91b1bf;font-size:10px;text-transform:uppercase;letter-spacing:.6px;padding:11px;border-bottom:1px solid #2b5363}.data-table td{padding:11px;border-bottom:1px solid #1d3b4b}.data-table tr:hover td{background:#153143}.source-link{display:flex;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid #1c394a;align-items:center}.source-link a{font-size:12px;font-weight:750}.source-link p{margin:4px 0}.source-kind{font-size:9px;color:var(--gold);letter-spacing:.5px}.footer{color:#648395;font-size:10px;padding:26px 0 55px;line-height:1.8;text-align:center}.mobile-nav{display:none}dialog{background:#0a1c2c;color:var(--txt);border:1px solid #3c6679;border-radius:17px;max-width:min(640px,95vw);width:100%;box-shadow:0 30px 100px #000b;padding:20px;max-height:88vh;overflow:auto}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}.modal-header,.modal-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px}.modal-header h2{margin:0}.modal-actions{margin-top:17px;flex-wrap:wrap}.help{border-bottom:1px dotted #678395;cursor:help}.empty{text-align:center;color:var(--muted);padding:40px 15px}.stat-hint{display:grid;gap:4px}.stat-hint b{font-size:11px}.stat-hint small{color:var(--muted);font-size:10px}hr{height:1px;border:0;background:#244557;margin:18px 0}.mark{color:var(--gold)}.mobile-only{display:none}
@media(max-width:1050px){.two{grid-template-columns:1fr}.four{grid-template-columns:repeat(2,1fr)}.sidebar{width:220px}.app-shell{grid-template-columns:220px 1fr}}
@media(max-width:720px){.app-shell{display:block}.sidebar{display:none}.main{padding:21px 14px 10px}.topbar h1{font-size:26px}.hero .hero-symbol{display:none}.hero h2{font-size:22px}.four,.three{grid-template-columns:repeat(2,minmax(0,1fr))}.two{grid-template-columns:1fr}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card{padding:15px}.mobile-nav{display:flex;position:fixed;z-index:30;bottom:0;left:0;right:0;min-height:67px;padding:7px 7px calc(8px + env(safe-area-inset-bottom));background:#071925f5;border-top:1px solid #2b4c59;justify-content:space-around;gap:3px;box-shadow:0 -12px 30px #0007}.mobile-nav button{border:0;background:transparent;color:#88a0ae;display:flex;align-items:center;flex-direction:column;gap:3px;min-width:46px;padding:4px 2px}.mobile-nav button span{font-size:23px;line-height:25px}.mobile-nav button small{font-size:9px}.mobile-nav button.active{color:var(--cyan)}.footer{padding-bottom:105px}.live-pill{display:none}.mobile-only{display:block}.skills-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.skill-card{padding:10px;gap:7px}.skill-icon{width:36px;height:36px;font-size:18px}.skill-card-head{gap:7px}.skill-title{font-size:11px}.skill-meta{font-size:9px}.skill-desc{min-height:auto}.kpi .value{font-size:22px}.bar-row{grid-template-columns:80px minmax(0,1fr) 45px}}@media(max-width:380px){.skills-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.four{gap:9px}.topbar h1{font-size:24px}.eyebrow{font-size:9px}}

/* BuildLab v2.0: icons, NPC planner, system checklist */
.real-skill-icon{width:100%;height:100%;object-fit:contain;display:block;flex:none}.skill-icon .real-skill-icon{border-radius:50%}.chip-icon{width:23px;height:23px;display:inline-block;vertical-align:middle;margin:-4px 3px -4px -3px}.skill-icon:has(img){background:transparent!important;border:0!important;overflow:visible}.skill-symbol{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:22px}.npc-list{max-height:540px;overflow-y:auto;display:grid;gap:5px;margin-top:12px}.npc-row{border:1px solid #2c4a5d;background:#102c3c;color:#e5f6f8;text-align:left;display:flex;align-items:center;gap:10px;padding:11px;border-radius:12px;width:100%;cursor:pointer}.npc-row.active{background:#1b514e;border-color:#6bceb9}.npc-avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#244f5e;font-size:23px;flex:none}.npc-row-info{display:grid;gap:3px;min-width:0;flex:1}.npc-row-info b{font-size:12px}.npc-row-info small{font-size:10px;color:#acc9d0}.npc-level{font-size:11px;color:#e7d18e}.npc-goal{margin:16px 0;border:1px solid #345e62;border-radius:12px;padding:12px;font-size:11px;background:#142f3a}.npc-goal .bar-track{margin:12px 0 7px;height:13px}.gift-preview{margin:13px 0;background:#184346;border:1px solid #2c8578;padding:13px;border-radius:12px;color:#d1f7e9;font-size:13px}.gift-preview b{font-size:18px;color:#fae09a}.gift-preview small{display:block;color:#aecdd0;font-size:10px;margin-top:8px}.system-card{display:flex;flex-direction:column;gap:8px}.system-card h3{font-size:15px}.system-emoji{display:grid;place-items:center;background:#173b4c;border-radius:13px;width:43px;height:43px;font-size:23px}.system-card textarea{min-height:56px}.system-card a{align-self:flex-start;margin-top:auto;text-decoration:none}
@media(max-width:720px){.mobile-nav{overflow-x:auto;justify-content:flex-start;scrollbar-width:thin}.mobile-nav button{flex:0 0 55px}.npc-list{max-height:290px}.system-card{min-height:0}.chip-icon{width:18px;height:18px}}

/* v2.1: full visual source mapping */
.npc-real-icon{width:100%;height:100%;object-fit:contain;display:block;border-radius:10px}
.npc-fallback{font-size:11px!important;font-weight:800;color:#c5d5dc;background:repeating-linear-gradient(45deg,#263b47,#263b47 6px,#1c303e 6px,#1c303e 12px);border:1px dashed #70899a}
.npc-profile-avatar{width:53px;height:53px;border-radius:12px;display:inline-grid;place-items:center;overflow:hidden;background:#253c4c}
.npc-gallery-avatar{width:100%;height:100%;display:inline-grid;place-items:center;overflow:hidden;font-size:19px;border-radius:13px}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:11px}
.gallery-tile{min-width:0;display:flex;flex-direction:column;gap:7px;align-items:center;text-align:center;background:#102737;border:1px solid #315061;border-radius:15px;padding:13px}
.gallery-tile .gallery-image{width:90px;height:90px;display:grid;place-items:center;overflow:hidden;background:#173344;border:1px solid #3b6172;border-radius:14px}
.gallery-image .real-skill-icon,.gallery-image .gift-real-icon{width:100%;height:100%;object-fit:contain}
.gallery-tile b{font-size:11px;line-height:1.4;overflow-wrap:anywhere}.gallery-tile small{font-size:10px;color:#9fb5c4;line-height:1.5}
.image-fallback-visible{width:100%;height:100%;display:grid;place-items:center;font-size:19px;color:#aecdd0;border:1px dashed #507380;border-radius:10px}
.gift-thumbnails{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.gift-thumb{display:grid;place-items:center;gap:2px;padding:8px;background:#112d3b;border:1px solid #376179;border-radius:11px;min-width:68px}
.gift-real-icon{width:44px;height:44px;object-fit:contain}.gift-thumb small{font-size:9px;color:#bfced8}
@media(max-width:720px){.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.gallery-tile{padding:8px}.gallery-tile .gallery-image{width:65px;height:65px}}
@media(max-width:390px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
