:root{
  --bg:#071015;--panel:#0d171d;--panel2:#111e25;--line:#20333c;--text:#edf6f6;--muted:#8ea3aa;
  --teal:#3de0d0;--teal2:#8affee;--amber:#ffcb66;--danger:#ff7474;--ok:#77e38f;--radius:18px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark
}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 50% -20%,#17313a 0,transparent 36%),var(--bg);color:var(--text);min-height:100vh}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:linear-gradient(115deg,transparent 0 48%,rgba(61,224,208,.08) 49% 50%,transparent 51%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:420px 420px,38px 38px,38px 38px;z-index:-1}
a{color:inherit;text-decoration:none}button,input,select{font:inherit}.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;padding:13px 28px;background:rgba(6,14,18,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(92,155,164,.18)}
.brand{display:flex;align-items:center;gap:11px;min-width:max-content}.brand-mark{display:grid;place-items:center;width:39px;height:39px;clip-path:polygon(50% 0,100% 100%,50% 77%,0 100%);background:linear-gradient(135deg,var(--teal2),#27767d);font-weight:900;color:#041215;text-shadow:none}.brand b{font-size:20px;letter-spacing:.14em}.brand em{font-style:normal;color:var(--teal);font-size:10px;letter-spacing:.22em;display:block;margin-top:-2px}
.main-nav{display:flex;align-items:center;gap:4px;margin-left:auto}.main-nav a{padding:10px 12px;border-radius:11px;color:#b8c9cd;font-size:13px;font-weight:700;white-space:nowrap}.main-nav a:hover,.main-nav a.active{background:#12242b;color:var(--teal2);box-shadow:inset 0 0 0 1px #1c4145}.menu-btn{display:none;margin-left:auto;background:none;border:0;color:white;font-size:22px}
.search-strip{position:sticky;top:66px;z-index:40;max-width:1180px;margin:0 auto;padding:12px 20px 4px}.global-search-wrap{display:flex;align-items:center;gap:10px;background:rgba(12,24,29,.92);border:1px solid #24404a;border-radius:14px;padding:0 14px;box-shadow:0 15px 30px rgba(0,0,0,.25)}.global-search-wrap input{width:100%;padding:12px 0;background:none;border:0;outline:none;color:white}.global-search-wrap kbd{color:#799299;border:1px solid #2b424a;border-radius:6px;padding:2px 6px;font-size:10px}.search-results{position:absolute;left:20px;right:20px;top:58px;background:#0e1a20;border:1px solid #24404a;border-radius:14px;overflow:hidden;box-shadow:0 22px 60px #000b}.search-hit{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid #182d35;cursor:pointer}.search-hit:hover{background:#14262d}.search-hit small{color:var(--muted);margin-left:auto}.hidden{display:none!important}
#app{max-width:1180px;margin:0 auto;padding:24px 20px 80px;min-height:72vh}.hero{position:relative;overflow:hidden;border:1px solid #27414a;border-radius:26px;padding:55px;min-height:390px;background:linear-gradient(90deg,rgba(3,13,16,.95),rgba(3,13,16,.57) 55%,rgba(3,13,16,.22)),radial-gradient(circle at 86% 40%,rgba(61,224,208,.25),transparent 31%),linear-gradient(145deg,#14282e,#071014);box-shadow:0 28px 80px rgba(0,0,0,.28)}
.hero:after{content:"";position:absolute;right:-50px;top:20px;width:490px;height:490px;border:1px solid rgba(97,246,228,.13);border-radius:50%;box-shadow:0 0 0 40px rgba(97,246,228,.025),0 0 0 90px rgba(97,246,228,.018)}.eyebrow{color:var(--teal);font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.hero h1{position:relative;z-index:1;max-width:650px;margin:12px 0;font-size:clamp(38px,6vw,68px);line-height:.96;letter-spacing:-.045em}.hero p{position:relative;z-index:1;max-width:620px;color:#b5c7ca;font-size:17px;line-height:1.65}.actions{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}.btn{border:1px solid #2b4851;background:#122229;color:#eaf8f8;border-radius:12px;padding:11px 15px;font-weight:800;cursor:pointer}.btn:hover{transform:translateY(-1px);border-color:#4c7a80}.btn.primary{background:linear-gradient(135deg,#2fd2c2,#32a5a8);border-color:transparent;color:#031314}.btn.ghost{background:transparent}.btn.danger{border-color:#673737;color:#ffafaf}.btn.small{padding:7px 10px;font-size:12px}
.section{margin-top:34px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:14px}.section h2,.page-head h1{margin:0;letter-spacing:-.02em}.section-head p,.page-head p{color:var(--muted);margin:5px 0 0}.page-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:8px 0 22px}.page-head h1{font-size:36px}.grid{display:grid;gap:14px}.grid.cols-4{grid-template-columns:repeat(4,1fr)}.grid.cols-3{grid-template-columns:repeat(3,1fr)}.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card{position:relative;background:linear-gradient(145deg,rgba(18,33,40,.93),rgba(10,20,25,.96));border:1px solid #203942;border-radius:var(--radius);padding:18px;overflow:hidden}.card:hover{border-color:#305864}.card h3{margin:4px 0 8px}.muted{color:var(--muted)}.stat-card b{display:block;font-size:26px;margin-bottom:3px}.stat-card span{color:var(--muted);font-size:12px}.stat-card i{position:absolute;right:14px;top:12px;font-style:normal;font-size:27px;opacity:.7}.accent{color:var(--teal2)}
.quick-card{cursor:pointer;min-height:145px}.quick-card .icon{font-size:27px}.quick-card p{color:var(--muted);font-size:13px;line-height:1.55}.quick-card:after{content:"→";position:absolute;right:17px;bottom:15px;color:var(--teal);font-size:20px}
.news-card{padding:0}.news-cover{height:170px;background:radial-gradient(circle at 80% 30%,rgba(61,224,208,.35),transparent 32%),linear-gradient(145deg,#192d35,#091318);background-size:cover;background-position:center}.news-body{padding:17px}.news-meta{display:flex;gap:8px;align-items:center;color:#91a7ad;font-size:11px;margin-bottom:8px}.tag{display:inline-flex;align-items:center;border:1px solid #2c4a53;border-radius:999px;padding:4px 8px;font-size:10px;color:#a9c7ca;background:#102128}.tag.teal{color:var(--teal2);border-color:#2c6663}.tag.amber{color:var(--amber);border-color:#63522d}.news-card h3{font-size:17px;line-height:1.25}.news-card p{font-size:13px;color:var(--muted);line-height:1.55}.news-card a{color:var(--teal2);font-size:12px;font-weight:800}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:15px}.control{background:#0c191f;border:1px solid #27424b;color:white;border-radius:11px;padding:10px 12px;outline:none}.control:focus{border-color:#3c8583}.filters input{min-width:240px}.filter-chip{border:1px solid #29434c;background:#0d1a20;color:#b1c3c7;border-radius:999px;padding:7px 10px;font-size:11px;cursor:pointer}.filter-chip.active{background:#173b3c;border-color:#397f7a;color:var(--teal2)}
.creature-card{padding:0}.creature-img{height:190px;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#1d4148,transparent 45%),linear-gradient(#14242a,#0a151a);overflow:hidden}.creature-img img{width:100%;height:100%;object-fit:cover;transition:.25s}.creature-card:hover img{transform:scale(1.035)}.creature-body{padding:15px}.creature-top{display:flex;align-items:start;gap:10px}.creature-top h3{margin:0;flex:1}.fav{border:0;background:none;color:#70878d;font-size:20px;cursor:pointer}.fav.active{color:#ffd96a}.chips{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0}.chip{font-size:10px;border-radius:7px;padding:4px 6px;background:#15282f;color:#9fb5b9}.creature-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;font-size:11px;color:#9eb1b5}.creature-stats b{color:#dce9e9}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;display:grid;place-items:center;padding:22px;backdrop-filter:blur(7px)}.modal-panel{max-width:800px;width:100%;max-height:88vh;overflow:auto;border:1px solid #31535c;border-radius:23px;background:#0b171c;padding:23px;box-shadow:0 35px 100px #000}.modal-close{float:right;background:#16262d;border:1px solid #29444d;border-radius:10px;color:#c9d7d9;padding:7px 10px;cursor:pointer}.detail-grid{display:grid;grid-template-columns:280px 1fr;gap:20px}.detail-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:15px;background:#12252b}
.form-card label{display:block;color:#9fb3b6;font-size:12px;margin-bottom:5px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}.form-grid .full{grid-column:1/-1}.result-box{background:#091216;border:1px solid #25424a;border-radius:14px;padding:16px;margin-top:15px}.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.result-item{padding:12px;border-radius:11px;background:#102128}.result-item span{display:block;color:#81999f;font-size:10px;text-transform:uppercase;letter-spacing:.09em}.result-item b{display:block;margin-top:3px;font-size:18px}.notice{border-left:3px solid var(--amber);background:#221d12;color:#d8c8a0;padding:12px 14px;border-radius:0 11px 11px 0;font-size:12px;line-height:1.5;margin-top:14px}
.map-card{min-height:200px}.map-card .map-art{height:105px;margin:-18px -18px 15px;background:radial-gradient(circle at 70% 30%,rgba(63,220,205,.35),transparent 30%),linear-gradient(135deg,#263c39,#102027)}.resource-list{display:flex;flex-wrap:wrap;gap:6px}.resource-pill{background:#10252b;border:1px solid #254049;padding:5px 7px;border-radius:7px;font-size:10px}.map-detail{display:grid;grid-template-columns:1fr 2fr;gap:14px}.hotspot{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid #1e333b}.hotspot b{min-width:110px}.hotspot span{color:var(--muted);font-size:12px}
.tool-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}.tool-tab{cursor:pointer}.tool-tab.active{background:#173b3c;color:var(--teal2);border-color:#397f7a}.recipe-row,.boss-row,.myark-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #1c3037}.recipe-row:last-child,.boss-row:last-child,.myark-row:last-child{border-bottom:0}.recipe-row b,.boss-row b,.myark-row b{flex:1}.qty{width:80px}.check{width:18px;height:18px;accent-color:#38c9ba}.empty{padding:35px;text-align:center;color:#80979d;border:1px dashed #294149;border-radius:16px}.countdown{font-variant-numeric:tabular-nums;color:var(--teal2);font-weight:800}.danger-text{color:var(--danger)}
footer{max-width:1180px;margin:0 auto 35px;padding:23px 20px;border-top:1px solid #1c3037;display:flex;justify-content:space-between;gap:20px;color:#6f858b;font-size:11px}.footer-links{display:flex;gap:15px}.footer-links a:hover{color:#b9d9db}.toast{position:fixed;right:20px;bottom:20px;z-index:200;background:#13252b;border:1px solid #31555f;padding:11px 14px;border-radius:11px;box-shadow:0 18px 50px #000a;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:none}
.skeleton{background:linear-gradient(90deg,#122127,#192e35,#122127);background-size:200% 100%;animation:shimmer 1.4s infinite}@keyframes shimmer{to{background-position:-200% 0}}
@media(max-width:980px){.main-nav{display:none;position:absolute;top:65px;right:12px;left:12px;background:#0b171c;border:1px solid #27414a;border-radius:15px;padding:10px;flex-wrap:wrap}.main-nav.open{display:flex}.menu-btn{display:block}.grid.cols-4{grid-template-columns:repeat(2,1fr)}.grid.cols-3{grid-template-columns:repeat(2,1fr)}.result-grid{grid-template-columns:repeat(2,1fr)}.hero{padding:38px}.detail-grid,.map-detail{grid-template-columns:1fr}}
@media(max-width:650px){.topbar{padding:10px 14px}.search-strip{top:59px;padding-left:12px;padding-right:12px}.search-results{left:12px;right:12px}.brand b{font-size:16px}.brand-mark{width:34px;height:34px}.hero{padding:28px 22px;min-height:360px}.grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}.page-head{align-items:start;flex-direction:column}.form-grid,.result-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.filters input{width:100%;min-width:0}footer{flex-direction:column}.global-search-wrap kbd{display:none}}