/* FluxCP (theme "tol") copy of the Tales of Loki Wiki styles. The block below maps the wiki's colour
   names onto this theme's tokens (tol.css), so the wiki matches the rest of the control panel. */
.wiki.wk-flux{
  /* plain values: the base .wiki rule defines --gold / --ice from these, so they must not point back */
  --ash: #0A1322; --ash-2: #0F1B2E; --rune-gold: #D9A93A; --gold: #D9A93A; --ember: #39C2F2; --ember-glow: #8BE6FF; --ice: #39C2F2;
  --frost: #39C2F2; --bone: #E8F1F8; --bone-dim: #93A7BB; --nav-h: 68px;
  font-family: var(--font-body);
}
.wk-flux h1, .wk-flux h2, .wk-flux h3{ font-family: var(--font-display); letter-spacing: normal; }
.wk-flux a{ color: var(--ice); text-decoration: none; }
.wk-flux a:hover{ color: var(--ice-glow); }
.wk-flux p{ margin: 0 0 1rem; }
.wk-flux ul, .wk-flux ol{ margin-top: 0; }
.wk-flux table{ margin: 0; }
.wk-flux .wk-menu a, .wk-flux .wk-toc a, .wk-flux .wk-sub a, .wk-flux .wk-quick a, .wk-flux .wk-card{ color: var(--text-dim); }
.wk-flux .wk-menu li.on > a{ color: #fff; }
.wk-flux .wk-sub a.on, .wk-flux .wk-toc li a.on{ color: var(--ice-glow); }
.wk-flux .wk-crumbs a{ color: var(--ice); }
.wk-flux button:hover{ transform: none; box-shadow: none; }

/* Tales of Loki Wiki: three columns (side menu / article / on this page) in the site's navy, ice and gold. */
.wiki{ --nav-h: 84px; --gold: var(--rune-gold); --gold-soft: rgba(201,162,39,.14); --ice: var(--ember); --red: #ff3b3b;
  background: radial-gradient(1100px 600px at 70% -10%, rgba(46,159,214,.10), transparent 60%), var(--void); }
.wiki code{ background: var(--ash-2); color: var(--ember-glow); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; font-size: .88em; }

.wk-shell{ max-width: 1560px; margin: 0 auto; display: grid; grid-template-columns: 272px minmax(0,1fr) 220px; gap: 0; }

/* ---------- side menu ---------- */
.wk-side{ position: sticky; top: var(--nav-h); align-self: start; height: calc(100vh - var(--nav-h)); overflow-y: auto;
  border-right: 1px solid var(--line); padding: 22px 16px 40px 22px; background: linear-gradient(180deg, rgba(16,21,29,.85), rgba(7,10,16,.4)); }
.wk-side::-webkit-scrollbar{ width: 6px } .wk-side::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 3px }
.wk-side-brand{ display: flex; align-items: center; gap: 8px; font-family: 'Cinzel', serif; font-size: 1.05rem; color: var(--bone); margin-bottom: 14px; }
.wk-side-brand b{ color: var(--gold); }
.wk-side-brand:hover{ text-decoration: none; color: #fff; }
.wk-side-brand .rune{ width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--gold); color: var(--gold); background: var(--gold-soft); font-size: .95rem; }
.wk-search input{ width: 100%; background: var(--ash); border: 1px solid var(--line); color: var(--bone); border-radius: 8px; padding: 8px 12px 8px 32px; font-size: .88rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238FA0AC' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 11px center; }
.wk-search input:focus{ outline: none; border-color: var(--ice); box-shadow: 0 0 0 3px rgba(46,159,214,.2); }
.wk-menu{ margin-top: 18px; }
.wk-cat + .wk-cat{ margin-top: 18px; }
.wk-cat-name{ font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); padding: 0 10px 6px; }
.wk-menu ul{ list-style: none; margin: 0; padding: 0; }
.wk-menu > .wk-cat > ul > li > a{ display: block; padding: 7px 10px; border-radius: 7px; color: var(--bone-dim); font-size: .92rem; border-left: 2px solid transparent; }
.wk-menu > .wk-cat > ul > li > a:hover{ color: var(--bone); background: rgba(255,255,255,.03); text-decoration: none; }
.wk-menu li.on > a{ color: #fff; background: linear-gradient(90deg, var(--gold-soft), transparent); border-left-color: var(--gold); font-weight: 600; }
.wk-menu .ext{ color: var(--bone-dim); font-size: .75em; opacity: .7; }
.wk-sub{ margin: 4px 0 6px 12px !important; border-left: 1px solid var(--line); }
.wk-sub a{ display: block; padding: 4px 12px; font-size: .84rem; color: var(--bone-dim); border-left: 2px solid transparent; margin-left: -1px; }
.wk-sub a:hover{ color: var(--bone); text-decoration: none; }
.wk-sub a.on{ color: var(--ember-glow); border-left-color: var(--ember-glow); }
.wk-noresult{ display: none; color: var(--bone-dim); font-size: .85rem; padding: 8px 10px; }
.wk-side-toggle{ display: none; }

/* ---------- article ---------- */
.wk-main{ padding: 26px 44px 60px; min-width: 0; }
.wk-crumbs{ font-family: 'JetBrains Mono', monospace; font-size: .74rem; color: var(--bone-dim); margin-bottom: 18px; }
.wk-crumbs span{ margin: 0 6px; opacity: .6; } .wk-crumbs b{ color: var(--bone); font-weight: 500; }
.wk-article{ max-width: 1060px; font-size: 1rem; line-height: 1.7; color: #d5dde3; }
.wk-article h1{ font-size: clamp(2rem, 3.4vw, 2.7rem); color: #fff; margin: 6px 0 12px; }
.wk-article h2{ font-size: 1.45rem; color: #fff; margin: 52px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 16px); position: relative; }
.wk-article h2::before{ content: ''; position: absolute; left: 0; bottom: -1px; width: 56px; height: 2px; background: var(--gold); }
.wk-article h3{ font-size: 1.1rem; color: #fff; scroll-margin-top: calc(var(--nav-h) + 16px); }
.wk-anchor{ margin-left: 10px; color: var(--line); font-family: 'Manrope', sans-serif; opacity: 0; transition: opacity .15s; }
h2:hover .wk-anchor, h3:hover .wk-anchor{ opacity: 1; color: var(--bone-dim); text-decoration: none; }
.wk-article .lead{ color: var(--bone-dim); font-size: 1.1rem; }
.wk-article b{ color: #fff; }
.wk-tag{ display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(201,162,39,.4); background: var(--gold-soft); border-radius: 20px; padding: 2px 10px; }
.wk-small{ font-size: .86rem; color: var(--bone-dim); }
.wk-note{ border: 1px solid rgba(46,159,214,.35); background: rgba(46,159,214,.08); border-left: 3px solid var(--ice); border-radius: 8px; padding: 12px 16px; margin: 16px 0; }
.wk-foot{ margin-top: 70px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--bone-dim); font-size: .85rem; max-width: 1060px; }

.wk-hero{ padding: 26px 28px; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 8px;
  background: radial-gradient(500px 200px at 90% 0%, rgba(201,162,39,.13), transparent 70%), linear-gradient(160deg, #0f1a2a, var(--ash)); }
.wk-hero .lead{ margin-bottom: 18px; }
.wk-facts{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wk-facts > div{ background: rgba(7,10,16,.55); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: .9rem; }
.wk-facts small{ display: block; font-family: 'JetBrains Mono', monospace; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }

.wk-steps{ counter-reset: s; list-style: none; padding: 0; }
.wk-steps li{ counter-increment: s; position: relative; padding: 4px 0 10px 44px; }
.wk-steps li::before{ content: counter(s); position: absolute; left: 0; top: 2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--void); background: var(--gold); font-size: .9rem; }

.wk-quick{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.wk-quick a{ display: block; position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px 14px; background: var(--ash); color: var(--bone-dim); font-size: .86rem; line-height: 1.45; transition: border-color .15s, transform .15s; }
.wk-quick a:hover{ border-color: var(--gold); text-decoration: none; transform: translateY(-2px); }
.wk-quick span{ display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 700; font-size: .85rem; margin-bottom: 8px; box-shadow: 0 0 0 3px rgba(255,59,59,.18); }
.wk-quick b{ display: block; color: #fff; font-family: 'Cinzel', serif; font-size: 1.02rem; margin-bottom: 2px; }
.wk-quick small{ font-size: .84rem; }
.wk-redpin{ display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--red); color: #fff; font-size: .72rem; font-weight: 700; vertical-align: 1px; }

.wk-table{ width: 100%; border-collapse: collapse; font-size: .93rem; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.wk-table th{ background: var(--ash-2); color: var(--gold); font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: 10px 14px; text-align: left; }
.wk-table td{ padding: 10px 14px; border-top: 1px solid var(--line); }
.wk-table td small{ color: var(--bone-dim); }
.wk-table td.y{ color: #4fd18b; font-weight: 700; text-align: center; width: 120px; } .wk-table td.n{ color: var(--bone-dim); text-align: center; width: 120px; }
.wk-table th:nth-child(2), .wk-table th:nth-child(3){ text-align: center; }
.wk-table tbody tr:hover{ background: rgba(255,255,255,.02); }
.wk-cost{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.wk-cost div{ border: 1px solid var(--line); border-radius: 10px; padding: 10px 8px; text-align: center; background: var(--ash); }
.wk-cost small{ display: block; color: var(--bone-dim); font-size: .76rem; }
.wk-cost b{ font-family: 'JetBrains Mono', monospace; color: var(--gold) !important; font-size: 1.05rem; }
.wk-tips{ padding-left: 0; list-style: none; }
.wk-tips li{ padding: 10px 14px 10px 40px; position: relative; border: 1px solid var(--line); border-radius: 10px; background: var(--ash); margin-bottom: 8px; }
.wk-tips li::before{ content: '✦'; position: absolute; left: 15px; top: 10px; color: var(--gold); }
.wk-faq details{ border: 1px solid var(--line); border-radius: 10px; background: var(--ash); margin-bottom: 8px; }
.wk-faq summary{ cursor: pointer; padding: 12px 16px; font-weight: 600; color: #fff; list-style: none; position: relative; padding-right: 40px; }
.wk-faq summary::-webkit-details-marker{ display: none; }
.wk-faq summary::after{ content: '+'; position: absolute; right: 16px; top: 9px; color: var(--gold); font-size: 1.3rem; }
.wk-faq details[open] summary::after{ content: '−'; }
.wk-faq details p{ padding: 0 16px 14px; margin: 0; color: var(--bone-dim); }
.wk-cards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.wk-card{ display: grid; grid-template-columns: 140px 1fr; gap: 16px; border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--ash); color: var(--bone-dim); transition: border-color .15s; }
.wk-card:hover{ border-color: var(--gold); text-decoration: none; }
.wk-card img{ width: 100%; border-radius: 8px; border: 1px solid var(--line); }
.wk-card h3{ margin: 8px 0 4px; color: #fff; }
.wk-card p{ font-size: .9rem; margin: 0; }
.wk-links li{ margin-bottom: 6px; }

/* ---------- interactive tour ---------- */
.tour{ border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #0d1522, var(--ash)); padding: 16px; margin-top: 14px; }
.tour-tabs{ display: flex; flex-wrap: wrap; gap: 6px; }
.tour-tabs button, .tour-sub button, .tour-nav button{ font: 600 .86rem 'Manrope', sans-serif; border: 1px solid var(--line); background: var(--ash-2); color: var(--bone-dim); border-radius: 8px; padding: 6px 12px; cursor: pointer; transition: all .15s; }
.tour-tabs button:hover, .tour-sub button:hover, .tour-nav button:hover{ color: #fff; border-color: #3a4a60; }
.tour-tabs button.on{ color: #fff; border-color: var(--gold); background: linear-gradient(180deg, #1f5a93, #123a63); box-shadow: inset 0 -2px 0 var(--gold); }
.tour-tabs .vip{ font-size: .6rem; letter-spacing: .06em; color: var(--gold); border: 1px solid rgba(201,162,39,.5); border-radius: 4px; padding: 0 4px; margin-left: 3px; vertical-align: 2px; }
.tour-sub{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.tour-sub::before{ content: 'Pages:'; color: var(--bone-dim); font-size: .8rem; align-self: center; margin-right: 4px; }
.tour-sub button{ padding: 4px 11px; font-size: .8rem; border-radius: 20px; }
.tour-sub button.on{ color: var(--void); background: var(--gold); border-color: var(--gold); }
.tour-intro{ margin: 12px 2px 14px; color: var(--bone-dim); font-size: .95rem; }
.tour-intro b{ font-family: 'Cinzel', serif; color: var(--gold) !important; margin-right: 6px; }
.vip{ font-family: 'JetBrains Mono', monospace; font-size: .7rem; color: var(--gold); border: 1px solid rgba(201,162,39,.5); border-radius: 4px; padding: 0 5px; margin-right: 4px; }
.tour-body{ display: grid; grid-template-columns: minmax(0, 720px) minmax(300px, 1fr); gap: 16px; align-items: start; }
.tour-shot-wrap{ position: sticky; top: calc(var(--nav-h) + 12px); }
.tour-shot{ position: relative; width: 100%; }
.tour-shot img{ position: absolute; display: block; border-radius: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(201,162,39,.25); }
.tour-shot svg{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tour-shot .hot{ fill: transparent; cursor: pointer; stroke: transparent; stroke-width: 1.5; }
.tour-shot .hot:hover{ fill: rgba(111,224,255,.12); stroke: rgba(111,224,255,.7); }
.tour-shot .mk{ cursor: pointer; outline: none; }
.tour-shot .mk .box{ fill: rgba(255,59,59,0); stroke: var(--red); stroke-width: 1.6; stroke-dasharray: 4 3; opacity: 0; transition: opacity .15s; }
.tour-shot .mk .ln{ fill: none; stroke-linejoin: round; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; }
.tour-shot .mk .halo{ fill: none; stroke: rgba(0,0,0,.65); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.tour-shot .mk .dot{ fill: var(--red); stroke: #fff; stroke-width: 2; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); transition: r .15s; }
.tour-shot .mk .num{ fill: #fff; font: 700 11px 'Manrope', sans-serif; pointer-events: none; }
.tour-shot .mk:hover .box, .tour-shot .mk.on .box, .tour-shot .mk:focus .box{ opacity: 1; fill: rgba(255,59,59,.10); }
.tour-shot .mk.on .dot{ fill: #ff1f1f; stroke: #ffd54f; stroke-width: 3; }
.tour-shot.noarrows .mk{ display: none; }
.tour-toggle{ display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .84rem; color: var(--bone-dim); cursor: pointer; user-select: none; }
.tour-toggle input{ accent-color: var(--red); }
.tour-list{ list-style: none; margin: 0; padding: 0; }
.tour-list li{ scroll-margin: calc(var(--nav-h) + 20px) 0 20px; }
.tour-list::-webkit-scrollbar{ width: 6px } .tour-list::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 3px }
.tour-list li{ display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: background .15s, border-color .15s; }
.tour-list li + li{ margin-top: 4px; }
.tour-list li:hover, .tour-list li.on{ background: rgba(255,59,59,.07); border-color: rgba(255,59,59,.45); outline: none; }
.tour-list .n{ width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .8rem; margin-top: 1px; box-shadow: 0 0 0 3px rgba(255,59,59,.15); }
.tour-list b{ color: #fff; font-size: .96rem; }
.tour-list p{ margin: 2px 0 0; font-size: .9rem; line-height: 1.55; color: var(--bone-dim); }
.tour-list p b{ font-size: inherit; }
.tour-nav{ display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.tour-nav span{ font-family: 'JetBrains Mono', monospace; font-size: .8rem; color: var(--bone-dim); }

/* ---------- on this page ---------- */
.wk-toc{ position: sticky; top: var(--nav-h); align-self: start; padding: 30px 18px 30px 6px; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
.wk-toc-title{ font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.wk-toc ul{ list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); }
.wk-toc li a{ display: block; padding: 5px 12px; margin-left: -1px; font-size: .85rem; color: var(--bone-dim); border-left: 2px solid transparent; line-height: 1.35; }
.wk-toc li.h3 a{ padding-left: 24px; font-size: .8rem; }
.wk-toc li a:hover{ color: var(--bone); text-decoration: none; }
.wk-toc li a.on{ color: var(--ember-glow); border-left-color: var(--ember-glow); }
.wk-top{ display: inline-block; margin-top: 16px; font-size: .8rem; color: var(--bone-dim); }

/* ---------- responsive ---------- */
@media (max-width: 1600px){
  .wk-shell{ grid-template-columns: 250px minmax(0,1fr); }
  .wk-toc{ display: none; }
}
@media (max-width: 1180px){
  .tour-body{ grid-template-columns: 1fr; }
  .tour-shot-wrap{ position: static; width: 100%; max-width: 700px; justify-self: center; }
  .tour-list{ max-height: none; overflow: visible; }
  .wk-quick{ grid-template-columns: repeat(3, 1fr); }
  .wk-cost{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 991px){
  .wk-shell{ display: block; }
  .wk-side{ position: fixed; z-index: 1040; top: 0; left: 0; bottom: 0; width: 290px; height: 100vh; transform: translateX(-100%); transition: transform .2s; box-shadow: 10px 0 40px rgba(0,0,0,.6); background: var(--ash); }
  .wk-side.open{ transform: none; }
  .wk-side-toggle{ display: block; position: sticky; top: var(--nav-h); z-index: 1030; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: rgba(16,21,29,.95); color: var(--bone); padding: 10px 16px; font: 600 .9rem 'Manrope', sans-serif; }
  .wk-main{ padding: 18px 16px 50px; }
  .wk-facts{ grid-template-columns: 1fr 1fr; }
  .tour{ padding: 12px; }
}
@media (max-width: 575px){
  .wk-quick{ grid-template-columns: 1fr 1fr; }
  .wk-cost{ grid-template-columns: repeat(2, 1fr); }
  .wk-card{ grid-template-columns: 1fr; }
  .wk-hero{ padding: 18px; }
  .wk-table td.y, .wk-table td.n{ width: 70px; }
}

/* ======================= FluxCP S2 theme skin =======================
   The wiki uses the theme's own look: the article is a .tol-card, headings / links / tables /
   notices come from tol.css, buttons are the theme's sub-menu pills, accents are its gold + ice. */
.wiki.wk-flux{ background: none; color: var(--text); }
.wk-flux .wk-shell{ max-width: 1600px; }
.wk-flux .wk-side{ background: linear-gradient(180deg, rgba(15,27,46,.92), rgba(10,19,34,.92)); border-right: 1px solid var(--line); }
.wk-flux .wk-side-brand .rune{ border-color: var(--gold); color: var(--gold-hi); background: rgba(217,169,58,.12); }
.wk-flux .wk-side-brand b, .wk-flux .wk-cat-name, .wk-flux .wk-toc-title{ color: var(--gold-hi); }
.wk-flux .wk-cat-name, .wk-flux .wk-toc-title{ font-family: var(--font-display); letter-spacing: .1em; font-size: .72rem; }
.wk-flux .wk-search input{ background: var(--void); border-color: var(--line); border-radius: var(--radius-sm); }
.wk-flux .wk-menu li.on > a{ background: rgba(217,169,58,.12); border-left-color: var(--gold); color: var(--gold-hi); }
.wk-flux .wk-sub a.on, .wk-flux .wk-toc li a.on{ color: var(--gold-hi); border-left-color: var(--gold); }
.wk-flux .wk-main{ padding: 2.2rem 1.6rem 4rem; }

/* the article is a theme card */
.wk-flux .wk-article.tol-card{ overflow: visible; padding: 2rem 2.2rem 2.4rem; }
.wk-flux .wk-article{ color: var(--text); }
.wk-flux .wk-article h1{ color: var(--text); font-size: clamp(1.9rem, 3vw, 2.5rem); }
.wk-flux .wk-article h2{ font-size: 1.6rem; color: var(--text); border-bottom: 0; padding-bottom: 0; margin: 2.8rem 0 1rem; }
.wk-flux .wk-article h2::before{ display: none; }
.wk-flux .wk-article h3{ color: var(--gold-hi); }
.wk-flux .wk-article b{ color: var(--text); }
.wk-flux .wk-article .lead, .wk-flux .wk-small{ color: var(--text-dim); }
.wk-flux .wk-crumbs{ color: var(--text-mute); }
.wk-flux .wk-crumbs b{ color: var(--text); }
.wk-flux code{ background: var(--void); color: var(--gold-hi); border-color: var(--line); }

/* hero, facts, cards, steps in the theme's panel style */
.wk-flux .wk-hero{ border: 0; padding: 0 0 .4rem; background: none; }
.wk-flux .wk-tag{ font-family: var(--font-display); color: var(--gold-hi); border-color: rgba(243,210,122,.35); background: rgba(217,169,58,.1); }
.wk-flux .wk-facts > div, .wk-flux .wk-quick a, .wk-flux .wk-cost div, .wk-flux .wk-tips li, .wk-flux .wk-faq details, .wk-flux .wk-card{
  background: rgba(5,9,17,.35); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.wk-flux .wk-facts small, .wk-flux .wk-cost b{ color: var(--gold-hi) !important; }
.wk-flux .wk-quick a:hover, .wk-flux .wk-card:hover{ border-color: var(--gold); }
.wk-flux .wk-quick b{ color: var(--text); font-family: var(--font-display); }
.wk-flux .wk-steps li::before{ background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #B98A26); color: #1A1206; }
.wk-flux .wk-tips li::before{ color: var(--gold); }
.wk-flux .wk-faq summary{ color: var(--text); }
.wk-flux .wk-faq summary::after{ color: var(--gold-hi); }
.wk-flux .wk-note.notice{ border-left-width: 1px; margin: 1rem 0; }
.wk-flux .horizontal-table td.y{ color: var(--emerald-hi); font-weight: 700; text-align: center; }
.wk-flux .horizontal-table td.n{ color: var(--text-mute); text-align: center; }
.wk-flux .horizontal-table th:nth-child(n+2){ text-align: center; }
.wk-flux .horizontal-table td small{ color: var(--text-mute); }

/* tour: theme panel + the theme's pill buttons (like the sub menus) */
.wk-flux .tour{ background: rgba(5,9,17,.35); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.wk-flux .tour-tabs button, .wk-flux .tour-sub button, .wk-flux .tour-nav button{
  font: 600 .85rem/1.2 var(--font-body); letter-spacing: 0; padding: .4rem .85rem; border-radius: 999px;
  background: transparent; border: 1px solid var(--line); color: var(--text-dim); box-shadow: none; }
.wk-flux .tour-tabs button:hover, .wk-flux .tour-sub button:hover, .wk-flux .tour-nav button:hover{ border-color: var(--gold); color: var(--gold-hi); }
.wk-flux .tour-tabs button.on, .wk-flux .tour-sub button.on{ background: rgba(217,169,58,.12); border-color: var(--gold); color: var(--gold-hi); box-shadow: none; }
.wk-flux .tour-sub{ border-top-color: var(--line-soft); }
.wk-flux .tour-intro{ color: var(--text-dim); }
.wk-flux .tour-intro b{ color: var(--gold-hi) !important; font-family: var(--font-display); }
.wk-flux .tour-list b{ color: var(--text); }
.wk-flux .tour-list p{ color: var(--text-dim); }
.wk-flux .tour-nav{ border-top-color: var(--line-soft); }
.wk-flux .wk-foot{ border-top-color: var(--line-soft); color: var(--text-mute); }
.wk-flux .wk-note.notice{ background: rgba(217,169,58,.1); border: 1px solid rgba(243,210,122,.35); color: #F6E2AD; border-radius: var(--radius-sm); padding: .85rem 1.1rem; }
.wk-flux .wk-note.notice b{ color: #fff; }
.wk-flux .wk-search input{ padding-left: 2.1rem;
  background: var(--void) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393A7BB' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat .75rem center; }
@media (max-width: 991px){
  .wk-flux .wk-main{ padding: 1rem .6rem 3rem; }
  .wk-flux .wk-article.tol-card{ padding: 1.2rem .8rem 1.6rem; }
  .wk-flux .tour{ padding: 8px 4px; border-left: 0; border-right: 0; border-radius: 0; }
  .wk-flux .tour-list li{ padding: 10px 6px; }
}

/* How to start: 3 pictures, few words */
.wk-flux .wk-autoicon{ display: flex; align-items: center; gap: .4rem; color: var(--text-dim); }
.wk-flux .wk-autoicon img{ width: 34px; height: 34px; filter: drop-shadow(0 0 6px rgba(217,169,58,.45)); }
.wk-start{ display: grid; grid-template-columns: 1.15fr 1fr .8fr; gap: 14px; align-items: start; }
.wk-start figure{ position: relative; margin: 0; background: rgba(5,9,17,.35); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; }
.wk-start img{ display: block; width: 100%; border-radius: 6px; }
.wk-start figcaption{ margin-top: 10px; text-align: center; font-size: 1.05rem; color: var(--text); }
.wk-start figure > span{ position: absolute; top: -12px; left: -12px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: #ff3b3b; color: #fff; font-weight: 800; box-shadow: 0 0 0 4px rgba(255,59,59,.2); z-index: 1; }
@media (max-width: 900px){ .wk-start{ grid-template-columns: 1fr; max-width: 520px; } }

/* Game Windows: hotkey chip in the tabs / intro */
.wk-flux .tour-tabs kbd, .wk-flux .tour-intro kbd{ font: 700 .72rem/1 var(--font-mono, monospace); padding: 3px 6px; border-radius: 5px;
  background: rgba(217,169,58,.14); border: 1px solid rgba(217,169,58,.45); color: var(--gold-hi); margin-right: 2px; }
/* Game Windows: labelled tab rows */
.wk-flux .tour-tabs:has(.tour-cat){ display: grid; gap: 8px; }
.wk-flux .tour-cat{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wk-flux .tour-cat > span{ width: 86px; flex: none; font: 600 .7rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 700px){ .wk-flux .tour-cat > span{ width: 100%; } }

/* In-game Windows: one window per page, big picture, explanations below */
.wk-flux.wk-wide .wk-shell{ grid-template-columns: 272px minmax(0,1fr); }
.wk-flux.wk-wide .wk-toc{ display: none; }
.wk-flux.wk-wide .wk-article, .wk-flux.wk-wide .wk-foot{ max-width: none; }
.wk-flux .tour--single .tour-tabs{ display: none; }
.wk-flux .tour--wide .tour-body{ grid-template-columns: 1fr; }
.wk-flux .tour--wide .tour-shot-wrap{ position: static; width: 100%; max-width: none; }
.wk-flux .tour--wide .tour-shot{ margin: 0 auto; }
.wk-flux .tour--wide .tour-toggle{ display: block; text-align: center; }
.wk-flux .tour--wide .tour-list{ display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; max-height: none; overflow: visible; }
.wk-flux .tour--wide .tour-list li + li{ margin-top: 0; }
.wk-flux .wk-hero--win{ margin-bottom: 4px; }
.wk-flux .wk-hero--win h1{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wk-flux .wk-key{ font: 700 .72rem/1 var(--font-mono, monospace); padding: 3px 6px; border-radius: 5px; vertical-align: 1px;
  background: rgba(217,169,58,.14); border: 1px solid rgba(217,169,58,.45); color: var(--gold-hi); }
.wk-flux h1 .wk-key{ font-size: 1rem; padding: 6px 10px; letter-spacing: 0; text-transform: none; }
.wk-flux .wk-menu li.wk-sublabel{ font: 600 .66rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); padding: 12px 12px 4px; }
@media (max-width: 991px){ .wk-flux.wk-wide .wk-shell{ display: block; } }

/* Player Commands / VIP pages (2026-11-09): command tables - the 2nd column is text, not a centred tick */
.wk-flux .wk-table.wk-cmd th:nth-child(2){ text-align: left; }
.wk-flux .wk-table.wk-cmd td:first-child{ white-space: nowrap; width: 1%; }
.wk-flux .wk-table.wk-cmd code, .wk-flux .wk-table code{ color: var(--gold-hi); background: rgba(217,169,58,.08); padding: 1px 6px; border-radius: 4px; }
.wk-flux .wk-table + .wk-table, .wk-flux .wk-table + p{ margin-top: 10px; }
@media (max-width: 640px){ .wk-flux .wk-table.wk-cmd td:first-child{ white-space: normal; } }

/* ---- NPC List (articles/loki-hall.php, 2026-11-09) ---- */
.wiki .s-shops{ --sc: #D9A93A } .wiki .s-trade{ --sc: #39C2F2 } .wiki .s-services{ --sc: #4fd18b } .wiki .s-events{ --sc: #b48cff }
.wk-npcmap{ display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 22px; align-items: start; margin: 18px 0 26px;
  background: var(--ash-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.wk-npcmap-pic{ position: relative; width: 100%; background: radial-gradient(ellipse at center, #0f1d33, #08101d 75%); border-radius: 10px; }
.wk-npcmap-pic img{ position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: .95; }
.wk-pin{ position: absolute; transform: translate(-50%, -50%); min-width: 19px; height: 19px; padding: 0 3px; border-radius: 10px; background: var(--sc);
  color: #0a1322 !important; font: 700 10px/19px 'JetBrains Mono', monospace; text-align: center; text-decoration: none !important;
  box-shadow: 0 0 0 2px #0a1322, 0 2px 6px rgba(0,0,0,.6); z-index: 1; transition: transform .12s; }
.wk-pin:hover, .wk-pin.hot{ transform: translate(-50%, -50%) scale(1.35); z-index: 3; box-shadow: 0 0 0 2px #fff, 0 0 14px var(--sc); }
.wk-pin.flash{ animation: wkPinFlash 1.6s ease-out; z-index: 3; }
@keyframes wkPinFlash{ 0%,40%,80%{ transform: translate(-50%, -50%) scale(1.7); box-shadow: 0 0 0 3px #fff, 0 0 22px var(--sc) } 20%,60%,100%{ transform: translate(-50%, -50%) scale(1) } }
.wk-npcmap-list{ columns: 2 200px; column-gap: 18px; font-size: .84rem; }
.wk-npcmap-grp{ break-inside: avoid; margin-bottom: 12px; }
.wk-npcmap-grp b{ display: block; color: var(--sc); font: 600 .68rem 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.wk-npcmap-grp a{ display: flex; gap: 7px; align-items: center; padding: 2px 4px; border-radius: 6px; color: var(--bone) !important; text-decoration: none !important; line-height: 1.35; }
.wk-npcmap-grp a:hover{ background: rgba(255,255,255,.05); }
.wk-npcmap-grp i{ flex: none; font: normal 700 10px/17px 'JetBrains Mono', monospace; min-width: 22px; height: 17px; text-align: center; border-radius: 9px; background: var(--sc); color: #0a1322; }
.wk-npcbar{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; position: sticky; top: calc(var(--nav-h) + 6px); z-index: 5;
  background: rgba(10,19,34,.92); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.wk-npcbar input{ flex: 1 1 240px; background: var(--ash); border: 1px solid var(--line); color: var(--bone); border-radius: 8px; padding: 8px 12px; font-size: .9rem; }
.wk-npcchips{ display: flex; flex-wrap: wrap; gap: 6px; }
.wk-npcchips button{ background: transparent; border: 1px solid var(--line); color: var(--bone-dim); border-radius: 20px; padding: 6px 13px; font-size: .8rem; cursor: pointer; }
.wk-npcchips button:hover{ color: var(--bone); border-color: var(--sc, var(--gold)); }
.wk-npcchips button.on{ background: var(--sc, var(--gold)); border-color: var(--sc, var(--gold)); color: #0a1322; font-weight: 700; }
.wk-npcnone{ color: var(--bone-dim); text-align: center; padding: 30px 0; }
.wk-npcsec h2{ border-bottom-color: color-mix(in srgb, var(--sc) 45%, transparent) !important; }
.wk-npcsec h2::before{ content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--sc); margin-right: 10px; vertical-align: middle; }
.wk-npcs{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 14px; align-items: start; }
.wk-npc{ display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 14px; background: var(--ash-2); border: 1px solid var(--line);
  border-left: 3px solid var(--sc); border-radius: 12px; padding: 14px; scroll-margin-top: calc(var(--nav-h) + 80px); }
.wk-npc.flash{ animation: wkCardFlash 1.6s ease-out; }
@keyframes wkCardFlash{ 0%,50%{ box-shadow: 0 0 0 2px var(--sc), 0 0 26px color-mix(in srgb, var(--sc) 50%, transparent) } 100%{ box-shadow: none } }
.wk-npc-art{ display: flex; align-items: flex-end; justify-content: center; height: 150px; border-radius: 10px;
  background: radial-gradient(ellipse at 50% 88%, color-mix(in srgb, var(--sc) 22%, transparent), transparent 62%), linear-gradient(180deg, #0f1b2e, #0a1322); }
.wk-npc-art img{ max-width: 104px; max-height: 140px; width: auto; height: auto; margin-bottom: 6px; filter: drop-shadow(0 4px 4px rgba(0,0,0,.5)); }
.wk-npc-trophy{ font-size: 54px; align-self: center; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--sc) 60%, transparent)); }
.wk-npc-hd{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 6px; }
.wk-npc-no{ font: 700 10px/18px 'JetBrains Mono', monospace; min-width: 22px; height: 18px; text-align: center; border-radius: 9px; background: var(--sc); color: #0a1322; }
.wk-npc-name{ color: #fff; font-weight: 700; font-size: 1.05rem; }
.wk-npc-tag{ font: 600 .66rem 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--sc);
  border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent); border-radius: 5px; padding: 2px 6px; }
.wk-npc-body > p{ margin: 0 0 6px; font-size: .9rem; line-height: 1.5; }
.wk-npc-body ul{ margin: 0 0 8px; padding-left: 18px; font-size: .84rem; color: var(--bone-dim); }
.wk-npc-body li{ margin: 1px 0; }
.wk-npc-loc{ display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.wk-npc-loc button{ background: var(--ash); border: 1px solid var(--line); color: var(--ember-glow); font: .74rem 'JetBrains Mono', monospace; border-radius: 6px; padding: 3px 8px; cursor: pointer; }
.wk-npc-loc button:hover{ border-color: var(--sc); color: #fff; }
.wk-npc-shop{ margin-top: 4px; }
.wk-npc-shop summary{ cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--sc); padding: 6px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--sc) 10%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 30%, transparent); list-style-position: inside; }
.wk-npc-shop summary span{ color: var(--bone-dim); font-weight: 400; }
.wk-npc-shop[open] summary{ margin-bottom: 8px; }
.wk-npc-shop .wk-table{ font-size: .8rem; }
.wk-npc-shop .wk-table td, .wk-npc-shop .wk-table th{ padding: 6px 10px; text-align: left !important; }
.wk-npc-shop .wk-table td:last-child{ color: var(--gold); }
.wk-npc-shop .wk-table small{ color: var(--bone-dim); opacity: .6; }
.wk-npc-more{ font-size: .8rem; color: var(--bone-dim); margin: 6px 2px 0; }
@media (max-width: 760px){
  .wk-npcmap{ grid-template-columns: 1fr; padding: 12px; }
  .wk-npc{ grid-template-columns: 80px minmax(0,1fr); gap: 10px; padding: 10px; }
  .wk-npc-art{ height: 110px; } .wk-npc-art img{ max-width: 76px; max-height: 100px; }
  .wk-npcbar{ position: static; }
}
.wk-npc-win{ font-size: .76rem; color: var(--bone-dim); margin: -2px 0 6px; } .wk-npc-win b{ color: var(--sc); font-weight: 600; }
.wk-npcmap-maps{ display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wk-zoombox{ position: absolute; border: 2px dashed var(--gold); border-radius: 6px; background: rgba(217,169,58,.1); z-index: 2; text-decoration: none !important; }
.wk-zoombox span{ position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -4px); white-space: nowrap; font: 700 .68rem 'JetBrains Mono', monospace;
  color: #0a1322; background: var(--gold); border-radius: 5px; padding: 1px 6px; }
.wk-zoombox:hover{ background: rgba(217,169,58,.22); }
.wk-npcmap-zoom > b{ display: block; color: var(--gold); font: 600 .68rem 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }

/* ---- side menu: collapsible groups (accordion, 2026-11-09) ---- */
.wk-grp{ margin: 2px 0; }
.wk-grp > summary{ list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  font: 600 .74rem var(--font-display, 'JetBrains Mono', monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi, var(--gold));
  user-select: none; transition: background .15s; }
.wk-grp > summary::-webkit-details-marker{ display: none; }
.wk-grp > summary::after{ content: '\25B8'; margin-left: auto; color: var(--bone-dim); font-size: .8rem; transition: transform .18s; }
.wk-grp[open] > summary::after{ transform: rotate(90deg); color: var(--gold); }
.wk-grp > summary:hover{ background: rgba(255,255,255,.04); }
.wk-grp[open] > summary{ background: rgba(217,169,58,.08); }
.wk-grp-n{ font: 600 .62rem 'JetBrains Mono', monospace; letter-spacing: 0; color: var(--bone-dim); background: rgba(255,255,255,.06); border-radius: 8px; padding: 1px 6px; }
.wk-grp > ul{ padding: 4px 0 6px 6px !important; margin-left: 10px !important; border-left: 1px solid var(--line); }
.wk-cat-fold + .wk-cat, .wk-cat + .wk-cat-fold{ margin-top: 10px; }
.wk-menu .wk-grp > ul > li > a{ display: block; padding: 6px 10px; border-radius: 7px; color: var(--bone-dim); font-size: .9rem; border-left: 2px solid transparent; }
.wk-menu .wk-grp > ul > li > a:hover{ color: var(--bone); background: rgba(255,255,255,.03); text-decoration: none; }
.wk-menu .wk-list > li > a{ display: block; }

/* ---- Rebirth System page (articles/rebirth.php, 2026-11-09) ---- */
.wk-rb-npc{ display: inline-flex; align-items: center; gap: 16px; padding: 10px 22px 10px 12px; margin: 6px 0 4px; border-radius: 14px; text-decoration: none !important;
  background: radial-gradient(ellipse at 15% 90%, rgba(217,169,58,.18), transparent 60%), var(--ash-2); border: 1px solid var(--line); }
.wk-rb-npc:hover{ border-color: var(--gold); }
.wk-rb-npc img{ height: 110px; width: auto; filter: drop-shadow(0 4px 4px rgba(0,0,0,.5)); }
.wk-rb-npc span{ display: flex; flex-direction: column; gap: 3px; }
.wk-rb-npc b{ color: #fff; font-size: 1.1rem; } .wk-rb-npc small{ color: var(--bone-dim); font-size: .78rem; }
.wk-rb-steps{ counter-reset: rb; list-style: none; padding: 0; display: grid; gap: 8px; }
.wk-rb-steps li{ counter-increment: rb; position: relative; padding: 10px 14px 10px 50px; background: var(--ash-2); border: 1px solid var(--line); border-radius: 10px; }
.wk-rb-steps li::before{ content: counter(rb); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold); color: #0a1322; font: 700 .85rem/26px 'JetBrains Mono', monospace; text-align: center; }
.wk-rb-keep{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.wk-rb-keep div{ display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--ash-2); }
.wk-rb-keep .ok b{ color: #4fd18b; } .wk-rb-keep .no b{ color: #ff9a62; } .wk-rb-keep span{ font-size: .9rem; color: var(--bone-dim); }
.wk-rb-bonus{ display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 12px 0; }
.wk-rb-bonus div{ text-align: center; padding: 14px 8px; border-radius: 12px; border: 1px solid rgba(217,169,58,.35);
  background: linear-gradient(180deg, rgba(217,169,58,.12), rgba(217,169,58,.02)); }
.wk-rb-bonus b{ display: block; color: var(--gold); font-size: 1.35rem; font-family: 'JetBrains Mono', monospace; }
.wk-rb-bonus span{ font-size: .8rem; color: var(--bone-dim); text-transform: uppercase; letter-spacing: .06em; }
.wk-rb-table td, .wk-rb-table th{ text-align: center !important; padding: 7px 10px !important; }
.wk-rb-table tr.start td{ color: var(--bone-dim); }
.wk-rb-table td:nth-child(5){ color: var(--gold); } .wk-rb-table td:nth-child(6){ color: #ff9a62; font-family: 'JetBrains Mono', monospace; font-size: .85em; }
@media (max-width: 640px){ .wk-rb-keep{ grid-template-columns: 1fr; } .wk-rb-table{ font-size: .78rem; } .wk-rb-table td, .wk-rb-table th{ padding: 5px 4px !important; } }

/* ---- system pages: tax / durability / refine bonus (2026-11-09) ---- */
.wk-rb-npc code + code{ margin-top: 2px; }
.wk-tax td:first-child{ white-space: nowrap; }
.wk-tax-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 12px 0 14px; }
.wk-tax-grid .t{ text-align: center; padding: 10px 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--ash-2); }
.wk-tax-grid .t b{ display: block; font: 700 1.15rem 'JetBrains Mono', monospace; color: #4fd18b; }
.wk-tax-grid .t.hi b{ color: #ffb04a; }
.wk-tax-grid .t.ban{ border-color: rgba(255,90,90,.5); background: rgba(255,90,90,.08); grid-column: span 2; } .wk-tax-grid .t.ban b{ color: #ff6a6a; }
.wk-tax-grid .t span{ font-size: .74rem; color: var(--bone-dim); }
.wk-dur{ display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; margin: 10px 0; }
.wk-dur div{ position: relative; text-align: center; padding: 18px 4px 8px; border-radius: 8px; background: var(--ash-2); border: 1px solid var(--line); overflow: hidden; }
.wk-dur i{ position: absolute; left: 0; top: 0; height: 5px; width: var(--w); background: linear-gradient(90deg, #ff6a3d, #ffd24a 50%, #4fd18b); }
.wk-dur b{ display: block; font: 600 .8rem 'JetBrains Mono', monospace; color: var(--bone); }
.wk-dur span{ font-size: .8rem; color: #ffb04a; } .wk-dur div:first-child span{ color: #4fd18b; }
.wk-dur .broken{ border-color: rgba(255,90,90,.5); background: rgba(255,90,90,.08); } .wk-dur .broken span{ color: #ff6a6a; font-weight: 700; }
.wk-rf{ grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } .wk-rf b{ font-size: 1.1rem; }

/* System pages 2 (Char Bonus / Card Collection / Costume Deposit / Enchant) */
.wk-cb{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 12px 0; }
.wk-cb div{ display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--ash-2); }
.wk-cb span{ font-size: .8rem; color: var(--bone-dim); } .wk-cb b{ color: var(--gold); font-size: .95rem; }
.wk-cc{ display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.wk-cc details{ border: 1px solid var(--line); border-radius: 10px; background: var(--ash-2); }
.wk-cc details[open]{ border-color: rgba(217,169,58,.45); }
.wk-cc summary{ cursor: pointer; list-style: none; display: grid; grid-template-columns: 110px 64px 1fr; gap: 10px; align-items: baseline; padding: 10px 14px; }
.wk-cc summary::-webkit-details-marker{ display: none; }
.wk-cc summary b{ color: #fff; } .wk-cc summary small{ color: var(--bone-dim); font-size: .76rem; } .wk-cc summary span{ color: var(--gold); font-size: .88rem; }
.wk-cc details p{ margin: 0; padding: 0 14px 12px; font-size: .86rem; color: var(--bone-dim); line-height: 1.7; } .wk-cc i{ color: #ff8a6a; }
.wk-npcpair{ display: flex; flex-wrap: wrap; gap: 12px; }
.wk-en-stones{ display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 12px 0; }
.wk-en-stones div{ display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--ash-2); }
.wk-en-stones b::before{ content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; transform: rotate(45deg); background: var(--c); box-shadow: 0 0 8px var(--c); vertical-align: -1px; }
.wk-en-stones b{ color: #fff; } .wk-en-stones span{ font-size: .8rem; color: var(--bone-dim); }
@media (max-width: 640px){ .wk-cc summary{ grid-template-columns: 1fr auto; } .wk-cc summary span{ grid-column: 1 / -1; } }

/* New Player Guide */
.wk-np-map{ display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 22px; align-items: center; margin: 16px 0 8px; }
.wk-np-start{ position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: #ffd24a; color: #0a1322;
  font: 700 15px/26px sans-serif; text-align: center; box-shadow: 0 0 0 2px #0a1322, 0 0 16px #ffd24a; z-index: 4; animation: wkNpStar 1.8s ease-in-out infinite; }
@keyframes wkNpStar{ 50%{ box-shadow: 0 0 0 2px #0a1322, 0 0 28px 6px rgba(255,210,74,.7); } }
.wk-np-star{ display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: #ffd24a; color: #0a1322; text-align: center; font: 700 12px/20px sans-serif; }
.wk-np-legend p{ margin: 0 0 12px; }
.wk-np-kit{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .wk-np-kit b{ font-size: 1rem; }
.wk-np-next{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 12px 0; }
.wk-np-next a{ display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--ash-2); text-decoration: none !important; transition: border-color .15s; }
.wk-np-next a:hover{ border-color: var(--gold); } .wk-np-next b{ color: #fff; } .wk-np-next span{ font-size: .82rem; color: var(--bone-dim); }
@media (max-width: 720px){ .wk-np-map{ grid-template-columns: 1fr; } }
.wk-home-start{ display: flex; align-items: center; gap: 16px; padding: 16px 20px; margin: 14px 0 6px; border-radius: 14px; text-decoration: none !important;
  border: 1px solid rgba(255,210,74,.45); background: linear-gradient(100deg, rgba(255,210,74,.12), rgba(255,210,74,.02) 60%); transition: border-color .15s, transform .15s; }
.wk-home-start:hover{ border-color: #ffd24a; transform: translateY(-1px); }
.wk-home-start .wk-np-star{ width: 40px; height: 40px; font-size: 20px; line-height: 40px; flex: none; box-shadow: 0 0 18px rgba(255,210,74,.6); }
.wk-home-start span:nth-child(2){ display: flex; flex-direction: column; gap: 3px; flex: 1; }
.wk-home-start b{ color: #fff; font-size: 1.15rem; } .wk-home-start small{ color: var(--bone-dim); font-size: .88rem; }
.wk-home-start i{ font-style: normal; color: #ffd24a; font-size: 2rem; line-height: 1; }

/* Automated Events */
.wk-ev-now{ display: flex; align-items: center; gap: 20px; padding: 12px 18px; margin: 12px 0; border-radius: 12px; border: 1px solid rgba(255,210,74,.45); background: rgba(255,210,74,.07); }
.wk-ev-now > span{ font-size: 1.6rem; } .wk-ev-now div{ display: flex; flex-direction: column; } .wk-ev-now div:nth-child(2){ flex: 1; }
.wk-ev-now small{ color: var(--bone-dim); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; } .wk-ev-now b{ color: #ffd24a; font-size: 1.05rem; }
.wk-ev-day{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 12px 0; }
.wk-ev-slot{ display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); border-left: 3px solid var(--ec); background: var(--ash-2); text-decoration: none !important; }
.wk-ev-slot b{ font: 700 .95rem 'JetBrains Mono', monospace; color: #fff; } .wk-ev-slot span{ font-size: .8rem; color: var(--ec); }
.wk-ev-slot.next{ border-color: #ffd24a; box-shadow: 0 0 14px rgba(255,210,74,.35); background: rgba(255,210,74,.08); }
.wk-ev-slot.next b::after{ content: ' NEXT'; font-size: .62rem; color: #ffd24a; letter-spacing: .1em; }
.wk-ev{ position: relative; padding: 14px 18px 4px; margin: 10px 0; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid var(--ec); background: var(--ash-2); }
.wk-ev h3{ margin: 0 0 4px; color: var(--ec); } .wk-ev p{ margin: 0 0 10px; }
.wk-ev-when{ font: 600 .82rem 'JetBrains Mono', monospace; color: var(--bone-dim); }
.wk-ev-prize{ padding: 8px 12px; border-radius: 8px; background: rgba(0,0,0,.22); font-size: .92rem; }
.wk-ev-prize b:first-child{ color: #ffd24a; }
.wk-ev-always div{ display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--ash-2); }
.wk-ev-always b{ color: #fff; } .wk-ev-always span{ font-size: .84rem; color: var(--bone-dim); }
@media (max-width: 640px){ .wk-ev-week th:nth-child(4), .wk-ev-week td:nth-child(4){ display: none; } .wk-ev-week{ font-size: .86rem; } .wk-ev-now{ flex-wrap: wrap; gap: 10px; } }

/* Weather & Day/Night (2026-11-12) */
.wk-wx-clock{ display: flex; gap: 3px; margin: 12px 0 16px; border-radius: 10px; overflow: hidden; }
.wk-wx-clock div{ display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 10px 8px; text-align: center; }
.wk-wx-clock b{ color: #fff; font-size: .9rem; } .wk-wx-clock span{ font: 600 .74rem 'JetBrains Mono', monospace; color: rgba(255,255,255,.75); }
.wk-wx-clock .m{ background: linear-gradient(180deg, #e7a35a, #b8743a); } .wk-wx-clock .d{ background: linear-gradient(180deg, #3d8fd1, #2a6aa3); }
.wk-wx-clock .s{ background: linear-gradient(180deg, #d0613d, #8a3a4e); } .wk-wx-clock .n{ background: linear-gradient(180deg, #24305a, #141b36); }
.wk-wx-cards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0 6px; }
.wk-wx-card{ display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--ash-2); }
.wk-wx-card i{ font-style: normal; font-size: 1.6rem; line-height: 1.2; } .wk-wx-card b{ color: #fff; }
.wk-wx-card small{ font: 600 .66rem 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: 4px; }
.wk-wx-card small.f-common{ color: #4fd18b; } .wk-wx-card small.f-sometimes{ color: #ffd24a; } .wk-wx-card small.f-rare{ color: #ff8a6a; }
.wk-wx-card span{ font-size: .84rem; color: var(--bone); } .wk-wx-card em{ font-style: normal; font-size: .7rem; }
.wk-wx-card.night{ border-color: rgba(139,150,255,.45); background: linear-gradient(160deg, #1a2148, var(--ash-2)); }
.wk-wx-card .up, .wk-wx-rule .up{ color: #ff8a6a; } .wk-wx-card .dn, .wk-wx-rule .dn{ color: #4fd18b; }
.wk-wx-rule td:nth-child(n+2), .wk-wx-rule th:nth-child(n+2){ text-align: center; font-family: 'JetBrains Mono', monospace; }

/* Freebies & Rewards (2026-11-12) */
.wk-fb-req{ display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.wk-fb-req span{ font-size: .8rem; padding: 3px 10px; border-radius: 20px; border: 1px solid rgba(217,169,58,.4); background: var(--gold-soft); color: var(--bone); }
.wk-fb-req span:last-child{ border-color: var(--line); background: var(--ash-2); color: var(--bone-dim); }
.wk-fb-items{ grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.wk-fb-items b{ font-size: 1rem; font-family: inherit; } .wk-fb-items span{ text-transform: none; letter-spacing: 0; }
.wk-fb-all td small{ color: var(--bone-dim); }
.wk-fb-tiers td{ font-size: .86rem; } .wk-fb-tiers td:first-child, .wk-fb-tiers td:nth-child(2){ white-space: nowrap; color: var(--gold); }
@media (max-width: 640px){ .wk-wx-clock span{ font-size: .62rem; } .wk-wx-clock b{ font-size: .74rem; } .wk-fb-tiers{ font-size: .78rem; } }