/*
Theme Name: HiveMate
Theme URI: https://example.com/hivemate
Author: HiveMate
Description: Spelling bee solver theme. Includes a client-side hive solver (hints, answers, pangrams, two-letter list), tool pages, blog, and an optional AI coach. Converted from the HiveMate React app.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hivemate
*/


:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);--bg:#fffdf6;--pan:#fff;--tx:#1e293b;--mu:#556070;--bd:#e2e8f0;--ac:#111111;--soft:#fff4c4}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;display:flex;min-height:100vh}
button{font:inherit;color:inherit;cursor:pointer}
#side{width:250px;padding:12px;flex:none;position:sticky;top:0;height:100vh;transition:width .2s}
#side>div{background:var(--pan);border-radius:20px;height:100%;padding:14px;display:flex;flex-direction:column;gap:6px;border:1px solid var(--bd);overflow:auto}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px}.logo i{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#f5c400,#111111);display:grid;place-items:center;color:#fff;font-style:normal;font-size:16px}
.nb{background:none;border:0;text-align:left;padding:10px 12px;border-radius:12px;display:flex;gap:10px;align-items:center;font-size:15px;font-weight:500}.nb:hover,.nb.on{background:var(--soft);color:var(--ac)}
#newc{border:1px solid var(--bd);background:var(--pan);justify-content:center;margin:10px 0;box-shadow:0 1px 3px #0001}
.lab{font-size:12px;letter-spacing:.08em;color:var(--mu);margin:16px 8px 4px}
#recent .nb{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.sp{flex:1}.foot{font-size:12px;color:var(--mu);padding:3px 12px}
body.collapsed #side{width:0;padding:0;overflow:hidden}
#tog{position:fixed;left:16px;top:calc(16px + env(safe-area-inset-top,0px));z-index:5;width:36px;height:36px;border-radius:10px;border:1px solid var(--bd);background:var(--pan)}
main{flex:1;min-width:0;padding:0 20px 40px;display:flex;flex-direction:column;align-items:center}
.w{width:100%;max-width:770px}.wide{max-width:1090px}
h1{font-size:clamp(34px,6vw,60px);margin:90px 0 12px;text-align:center;letter-spacing:-.02em}
.sub{text-align:center;color:var(--mu);font-size:18px;line-height:1.6;margin:0 0 40px}
.box{background:var(--pan);border:1px solid var(--bd);border-radius:22px;box-shadow:0 2px 12px #0000000a;overflow:hidden}
.drop{padding:16px;text-align:center;font-size:14px;color:var(--mu);border-bottom:1px solid var(--bd);background:#8881}.drop a{color:var(--ac);font-weight:600;cursor:pointer}
textarea{width:100%;border:0;outline:0;resize:none;background:none;color:var(--tx);font:inherit;font-size:18px;padding:22px 28px 6px;min-height:64px}
.tools{display:flex;align-items:center;gap:6px;padding:8px 20px 14px}.tools button{background:none;border:0;border-radius:10px;padding:8px 10px;font-size:15px;color:var(--mu)}.tools button:hover,.tools button.on{background:var(--soft);color:var(--ac)}
.send{width:46px;height:46px;border-radius:50%!important;background:var(--ac)!important;color:#fff!important;font-size:20px;padding:0!important}
#sym{display:none;border-top:1px solid var(--bd);padding:12px 16px}#sym.show{display:block}
.grid{display:flex;flex-wrap:wrap;gap:8px}.grid button{border:1px solid var(--bd);background:var(--pan);border-radius:12px;padding:10px 14px;min-width:56px;font-size:16px}.grid button:hover{background:var(--soft)}
.apps{text-align:center;margin-top:28px;font-size:14px;color:var(--mu)}.apps span{display:inline-block;background:#000;color:#fff;border-radius:12px;padding:12px 22px;margin:10px 5px 0;font-weight:600}
#calc{position:fixed;left:270px;top:120px;width:250px;background:var(--pan);border:1px solid var(--bd);border-radius:20px;box-shadow:0 10px 40px #0003;padding:14px;display:none;z-index:9}
#calc.show{display:block}#cd{background:var(--bg);border-radius:14px;text-align:right;font-size:28px;padding:16px;margin:8px 0;overflow:hidden}
#calc .k{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}#calc .k button{padding:12px 0;border-radius:14px;border:1px solid var(--bd);background:var(--pan);font-size:18px}#calc .k .o{background:var(--ac);color:#fff;border:0}
#ins{width:100%;margin-top:10px;padding:12px;border-radius:12px;border:0;background:var(--soft);color:var(--ac);font-weight:600}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:14px;margin:24px 0}.card{background:var(--pan);border:1px solid var(--bd);border-radius:16px;padding:20px;text-align:left}.card:hover{border-color:var(--ac)}.card b{display:block;font-size:17px;margin-bottom:8px}.card span{color:var(--mu);font-size:14px;line-height:1.5}
.crumb{color:var(--mu);font-size:14px;margin:80px 0 -60px;align-self:flex-start}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.chips button{border:1px solid var(--bd);background:var(--pan);border-radius:14px;padding:10px 14px;font-size:14px;text-align:left}.chips button:hover{border-color:var(--ac)}
#chat{width:100%;max-width:900px;padding:40px 0 260px;display:none}
.u{background:var(--ac);color:#fff;padding:14px 20px;border-radius:18px;margin:10px 0 24px auto;width:fit-content;max-width:80%;font-size:18px}
.a{border-top:1px solid var(--bd);padding:8px 0 24px;line-height:1.7;font-size:17px}.a h3{font-size:18px;margin:26px 0 8px;padding-top:20px;border-top:1px solid var(--bd)}.a h3:first-child{border:0;padding:0}.a p{margin:8px 0}
.a mjx-container{margin:8px 0!important}.fin{margin-top:22px;font-weight:700}
.act{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:24px}.act button{border:1px solid var(--bd);background:var(--pan);border-radius:20px;padding:10px 16px;font-size:14px;font-weight:600}.act .p{background:var(--ac);color:#fff;border:0}
#dock{position:fixed;bottom:0;left:0;right:0;padding:0 20px calc(14px + env(safe-area-inset-bottom,0px));display:none;justify-content:center;pointer-events:none}#dock>div{pointer-events:auto;width:100%;max-width:770px}
#dock textarea{font-size:16px;padding:16px 24px 4px;min-height:52px}#dock .box{box-shadow:0 8px 30px #0002}
.note{font-size:11px;color:var(--mu);text-align:center;margin-top:6px}
.err{color:#dc2626}.dots:after{content:"Thinking…";color:var(--mu);animation:b 1.2s infinite}@keyframes b{50%{opacity:.3}}
@media(max-width:800px){#side{position:fixed;z-index:8;height:100%}body:not(.collapsed) #side{box-shadow:0 0 40px #0004}#calc{left:20px}main{padding-top:50px}}
.ic{width:19px;height:19px;flex:none}.beta{font-size:10px;background:var(--soft);color:var(--ac);padding:2px 6px;border-radius:6px;margin-left:2px}
.nb span{flex:1}.nb.on{background:var(--soft);color:var(--ac);font-weight:600;box-shadow:inset 3px 0 0 var(--ac)}.nb{color:var(--tx)}
.lab{display:flex;align-items:center;gap:6px;text-transform:uppercase;font-weight:600}.lab .ic{width:13px;height:13px}.lab a{margin-left:auto;cursor:pointer;text-transform:none;letter-spacing:0;color:var(--ac)}
.prof{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--bd);border-radius:14px;margin-top:8px}.prof b{display:block;font-size:14px}.prof small{color:var(--mu)}.prof button{margin-left:auto;background:none;border:0;color:var(--mu)}
.av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#f5c400,#111111);color:#fff;display:grid;place-items:center;font-weight:700}
.foot a{cursor:pointer}.foot a:hover{color:var(--ac)}
.post{background:var(--pan);border:1px solid var(--bd);border-radius:16px;padding:22px;text-align:left;width:100%}.post:hover{border-color:var(--ac)}.post small{color:var(--ac);font-weight:600}.post h3{margin:6px 0}.post p{color:var(--mu);margin:0;line-height:1.6}
.art{line-height:1.8;font-size:17px}.art h1{margin:30px 0 8px;text-align:left;font-size:38px}.art .back{background:none;border:0;color:var(--ac);font-weight:600;margin-top:70px}
.fs{background:var(--pan);border:1px solid var(--bd);border-radius:16px;padding:18px}.fs h4{margin:0 0 6px}.fs small{color:var(--mu)}
#gc{width:100%;background:var(--pan);border:1px solid var(--bd);border-radius:16px;margin-top:16px}.gi{display:flex;gap:10px}.gi input{flex:1;padding:14px;border-radius:12px;border:1px solid var(--bd);background:var(--pan);color:var(--tx);font-size:17px}.gi button{padding:0 22px;border-radius:12px;border:0;background:var(--ac);color:#fff;font-weight:600}
.a .st{display:flex;gap:14px;background:var(--pan);border:1px solid var(--bd);border-radius:18px;padding:18px 20px;margin:14px 0;box-shadow:0 1px 6px #0000000d}
.a .st .sn{flex:none;width:34px;height:34px;border-radius:50%;background:var(--ac);color:#fff;display:grid;place-items:center;font-weight:700;font-size:16px}
.a .st.inf{background:var(--soft);border-color:transparent}.a .st.inf .sn{background:#111111}
.a .st.chk{border-color:#22c55e66}.a .st.chk .sn{background:#22c55e}
.a .st .sb{min-width:0;flex:1}.a .st h3{margin:4px 0 8px;padding:0;border:0;font-size:18px}
.a .st p{margin:6px 0}.lb{color:var(--ac)}
.a .eq{background:var(--bg);border-radius:12px;padding:4px 14px;margin:10px 0;overflow-x:auto;overflow-y:hidden;font-size:19px}.a .eq mjx-container{margin:6px 0!important}
.a .tip{display:flex;gap:10px;background:#f59e0b1f;border-left:4px solid #f59e0b;border-radius:10px;padding:10px 14px;margin:10px 0;font-size:15px}
.a .fin{display:flex;gap:14px;align-items:center;margin:18px 0 6px;padding:16px 20px;border-radius:18px;background:linear-gradient(135deg,#111111,#111111);color:#fff;font-weight:700;font-size:19px}
.a .fin span{font-size:28px}.a .fin small{display:block;font-size:12px;font-weight:600;opacity:.85;margin-bottom:2px}.a .fin mjx-container{margin:2px 0!important}
.fbar{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 4px}.fbar input{flex:1;min-width:200px;padding:12px 16px;border-radius:12px;border:1px solid var(--bd);background:var(--pan);color:var(--tx);font-size:15px}
.fbar button{border:1px solid var(--bd);background:var(--pan);border-radius:20px;padding:8px 14px;font-size:14px}.fbar button.on{background:var(--ac);border-color:var(--ac);color:#fff}
.try{text-align:center;margin-top:22px;color:var(--mu);font-size:14px}.try button{border:1px solid var(--bd);background:var(--pan);border-radius:20px;padding:7px 13px;margin:4px 3px;font-size:14px}.try button:hover{border-color:var(--ac);color:var(--ac)}
@media print{#side,#dock,.act,#tog{display:none!important}}

/* ===== MathMate redesign ===== */
:root{--bg:#fffdf6;--pan:#fff;--tx:#0f172a;--mu:#556070;--bd:#e6e8f0;--ac:#111111;--ac2:#111111;--soft:#fff4c4;--sh:0 1px 2px #0f172a0a,0 8px 24px #0f172a0d;--sw:272px}
body{background:var(--bg);position:relative}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(700px 380px at 70% -5%,#f5c40022,transparent 70%),radial-gradient(600px 340px at 15% 0,#11111114,transparent 70%);z-index:0}
main,#side{position:relative;z-index:1}
/* sidebar */
#side{width:var(--sw);padding:14px;transition:width .25s ease,padding .25s ease;z-index:8}
#side>div{min-width:calc(var(--sw) - 28px);border-radius:24px;padding:16px 12px;gap:2px;box-shadow:var(--sh);scrollbar-width:thin}
body.collapsed #side{width:0;padding:0}
.logo{display:flex;align-items:center;gap:10px;padding:2px 6px 14px;font-size:19px;letter-spacing:-.01em}
.logo i{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#1a1a1a,#f5c400 60%,#f5c400);font-size:19px;box-shadow:0 6px 16px #11111133}
.logo b{font-weight:800}.beta{background:linear-gradient(135deg,#111111,#111111)!important;color:#fff!important;font-weight:700}
.logo .cl{margin-left:auto;width:32px;height:32px;border-radius:10px;border:1px solid var(--bd);background:var(--pan);display:grid;place-items:center;color:var(--mu)}.logo .cl:hover{color:var(--ac);background:var(--soft)}
.nb{width:100%;padding:10px 12px;border-radius:12px;font-size:14.5px;gap:12px;position:relative;color:var(--tx);transition:background .15s,color .15s}
.nb .ic{width:20px;height:20px;color:var(--mu);transition:color .15s}.nb span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb:hover{background:var(--soft);color:var(--ac)}.nb:hover .ic{color:var(--ac)}
.nb.on{background:var(--soft);color:var(--ac);font-weight:600;box-shadow:none}.nb.on .ic{color:var(--ac)}
.nb.on:before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--ac)}
#newc{background:linear-gradient(135deg,#1a1a1a,#f5c400)!important;color:#fff!important;border:0!important;justify-content:flex-start;margin:0 0 6px;box-shadow:0 8px 20px #11111133;font-weight:600}
#newc .ic,#newc:hover .ic{color:#fff}#newc:hover{filter:brightness(1.08)}
.lab{margin:18px 10px 6px;font-size:11px;letter-spacing:.1em;color:var(--mu)}
#recent .nb{display:flex;font-size:13.5px;padding:8px 12px;color:var(--mu)}#recent .nb .ic{width:16px;height:16px}
.prof{border-radius:16px;background:var(--bg);margin-top:10px}.av{background:linear-gradient(135deg,#1a1a1a,#f5c400);width:38px;height:38px;border-radius:12px}.av .ic{width:18px;height:18px}
.prof button{width:34px;height:34px;border-radius:10px;display:grid;place-items:center}.prof button:hover{background:var(--soft);color:var(--ac)}
.foot{padding:8px 10px 0;text-align:center}
#tog{left:16px;top:calc(16px + env(safe-area-inset-top,0px));width:42px;height:42px;border-radius:13px;box-shadow:var(--sh);display:grid;place-items:center;color:var(--tx)}
#tog:hover{color:var(--ac)}body:not(.collapsed) #tog{display:none}
#scrim{display:none}
main{padding:56px 24px 60px}
/* hero + input */
#home>h1{margin:44px 0 12px;font-weight:800;background:linear-gradient(120deg,var(--tx) 30%,var(--ac) 75%,#f5c400);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{max-width:620px;margin:0 auto 32px}
.box{border-radius:26px;box-shadow:var(--sh);transition:box-shadow .2s,border-color .2s}.box:focus-within{border-color:var(--ac);box-shadow:0 0 0 4px #f5c40033,var(--sh)}
.drop{background:var(--soft);border-bottom:0;font-size:13px}
.send{background:linear-gradient(135deg,#1a1a1a,#f5c400)!important;box-shadow:0 6px 16px #11111133}.tools button:hover,.tools button.on{background:var(--soft)}
.try{margin-top:18px}.try button{border-radius:999px;background:var(--pan);transition:all .15s}.try button:hover{transform:translateY(-1px);box-shadow:var(--sh)}
/* dashboard */
.dash{width:100%}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:40px 0 8px}
.stats div{background:var(--pan);border:1px solid var(--bd);border-radius:18px;padding:16px 18px;box-shadow:var(--sh)}
.stats b{display:block;font-size:28px;font-weight:800;letter-spacing:-.02em;background:linear-gradient(135deg,var(--ac),#f5c400);-webkit-background-clip:text;background-clip:text;color:transparent}.stats small{color:var(--mu);font-size:12.5px}
.dh{font-size:18px;margin:32px 0 14px;text-align:left}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:var(--pan);border:1px solid var(--bd);border-radius:20px;padding:18px;text-align:left;box-shadow:var(--sh);transition:transform .2s,border-color .2s}
.tile:hover{transform:translateY(-3px);border-color:var(--ac)}.tile i{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;font-style:normal;font-size:20px;font-weight:700;margin-bottom:8px}
.tile b{font-size:15.5px}.tile small{color:var(--mu);font-size:13px}
.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.topics button{display:flex;flex-direction:column;gap:3px;text-align:left;background:var(--pan);border:1px dashed var(--bd);border-radius:16px;padding:14px 16px;transition:all .15s}
.topics button:hover{border-style:solid;border-color:var(--ac);background:var(--soft)}.topics b{font-size:13px;color:var(--ac)}.topics span{font-size:13px;color:var(--mu)}
.card,.post,.fs,#gc{border-radius:20px;box-shadow:var(--sh);transition:transform .2s,border-color .2s}.card:hover,.post:hover{transform:translateY(-2px)}
.a .st{border-radius:20px;box-shadow:var(--sh)}.a .st .sn,.act .p{background:linear-gradient(135deg,#1a1a1a,#f5c400)}.a .fin{background:linear-gradient(135deg,#111111,#111111 60%,#c99700)}
.gi button,.fbar button.on{background:var(--ac);border-color:var(--ac)}
#dock .box{box-shadow:0 12px 40px #0f172a29}
#calc{left:auto;right:24px;top:90px;border-radius:24px}#calc .k .o{background:var(--ac)}
@media(max-width:900px){.tiles,.topics{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){#side{position:fixed;left:0;top:0;height:100%;width:var(--sw)}body.collapsed #side{width:0}
body:not(.collapsed) #scrim{display:block;position:fixed;inset:0;background:#0f172a66;backdrop-filter:blur(2px);z-index:7}
main{padding:64px 16px 40px}#home>h1{margin-top:20px}.nb.on:before{left:-12px}#calc{right:12px;left:12px;width:auto}}
@media(max-width:520px){.tiles,.topics{grid-template-columns:1fr}}

/* dock overlap fix */
#dock{z-index:6;left:var(--sw);padding-top:36px;background:linear-gradient(to top,var(--bg) 55%,transparent);transition:left .25s ease}
body.collapsed #dock{left:0}
#dock .box{background:var(--pan);position:relative}
#dock .note{padding-bottom:2px}
#tog{z-index:9}
@media(max-width:800px){#dock{left:0}}

/* fixed sidebar, only content scrolls */
#side{position:fixed!important;left:0;top:0;height:100vh;height:100dvh;overflow:hidden}
main{margin-left:var(--sw);transition:margin-left .25s ease}
body.collapsed main{margin-left:0}
@media(max-width:800px){main,body.collapsed main{margin-left:0}}

.prof:hover{border-color:var(--ac)}
.admin-bar #side{top:32px;height:calc(100dvh - 32px)}.admin-bar #tog{top:calc(48px + env(safe-area-inset-top,0px))}
@media(max-width:782px){.admin-bar #side{top:46px;height:calc(100dvh - 46px)}.admin-bar #tog{top:62px}}

/* ===== v2: real WordPress pages (blog, categories, posts), light only ===== */
:root{color-scheme:light}
a.nb,a.tile,.brand{text-decoration:none;color:inherit}
a.tile{display:flex}
.brand{display:flex;align-items:center;gap:10px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus{position:fixed!important;left:12px;top:12px;width:auto;height:auto;clip:auto;background:#fff;color:var(--ac);padding:10px 14px;border-radius:10px;z-index:99;box-shadow:var(--sh)}
.topics a{display:flex;flex-direction:column;gap:3px;text-decoration:none;background:var(--pan);border:1px dashed var(--bd);border-radius:16px;padding:14px 16px}
.topics a:hover{border-style:solid;border-color:var(--ac);background:var(--soft)}
.topics a b{font-size:13px;color:var(--ac)}.topics a span{font-size:13px;color:var(--mu)}
#clr{cursor:pointer;float:right;color:var(--ac)}
.mm-seo{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.mm-seo a{color:var(--ac);font-size:14px}

/* sidebar categories */
.mm-cats,.mm-cats ul{list-style:none;margin:0;padding:0}
.mm-cats ul{padding-left:14px}
.mm-cats li{margin:0}
.mm-cats a{display:block;padding:7px 12px;border-radius:10px;font-size:14px;color:var(--tx);text-decoration:none}
.mm-cats a:hover,.mm-cats .current-cat>a,.mm-cats .current-cat-parent>a{background:var(--soft);color:var(--ac)}
.mm-cats .current-cat>a{font-weight:600}
.foot a{color:inherit}.foot-menu{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap}

/* blog / archive / single */
.mm-main{align-items:stretch}
.mm-wrap{width:100%;max-width:1090px;margin:0 auto}
.mm-article{max-width:760px}
.mm-crumbs{margin:78px 0 0;font-size:13px;color:var(--mu)}
.mm-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.mm-crumbs li+li:before{content:"/";margin-right:4px;color:var(--bd)}
.mm-crumbs a{color:var(--mu);text-decoration:none}.mm-crumbs a:hover{color:var(--ac)}
.mm-head h1{text-align:left;margin:14px 0 8px;font-size:clamp(30px,5vw,46px);line-height:1.15}
.mm-sub{color:var(--mu);font-size:18px;line-height:1.6;margin-bottom:8px}.mm-sub p{margin:0}
.mm-chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 4px}
.mm-chips a{border:1px solid var(--bd);background:var(--pan);border-radius:20px;padding:7px 14px;font-size:14px;color:var(--tx);text-decoration:none}
.mm-chips a:hover{border-color:var(--ac)}.mm-chips a.on{background:var(--ac);border-color:var(--ac);color:#fff}
.mm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px;margin:24px 0}
.post-card{background:var(--pan);border:1px solid var(--bd);border-radius:20px;box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.post-card:hover{transform:translateY(-2px);border-color:var(--ac)}
.pc-img{display:block;padding:20px 20px 0}
.pc-img img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.pc-img+.pc-body{padding-top:16px}
.pc-body{padding:20px}
.pc-cat{font-size:13px;font-weight:600}.pc-cat a{color:var(--ac);text-decoration:none}
.post-card h2{font-size:19px;line-height:1.3;margin:6px 0}.post-card h2 a{color:var(--tx);text-decoration:none}.post-card h2 a:hover{color:var(--ac)}
.post-card p{color:var(--mu);margin:0 0 10px;line-height:1.6;font-size:15px}
.pc-meta{font-size:13px;color:var(--mu)}
.mm-pager{margin:10px 0 30px}.mm-pager .nav-links{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.mm-pager .page-numbers{padding:8px 14px;border:1px solid var(--bd);border-radius:10px;background:var(--pan);color:var(--tx);text-decoration:none}
.mm-pager .current{background:var(--ac);border-color:var(--ac);color:#fff}
.mm-empty{margin:40px 0;color:var(--mu)}
.search-form{display:flex;gap:8px;margin:18px 0}
.search-form input[type=search]{flex:1;min-width:0;padding:12px 16px;border-radius:12px;border:1px solid var(--bd);background:var(--pan);color:var(--tx);font-size:15px}
.search-form button,.mm-btn{background:var(--ac);color:#fff;border:0;border-radius:12px;padding:12px 18px;text-decoration:none;display:inline-block;font-weight:600}
.mm-btn.ghost{background:var(--soft);color:var(--ac)}
.mm-content{line-height:1.8;font-size:17px;margin:24px 0}
.mm-content h2{font-size:26px;margin:36px 0 10px}.mm-content h3{font-size:21px;margin:28px 0 8px}
.mm-content a{color:var(--ac)}
.mm-content img{max-width:100%;height:auto;border-radius:14px}
.mm-content blockquote{margin:20px 0;padding:6px 18px;border-left:3px solid var(--ac);color:var(--mu)}
.mm-content table{border-collapse:collapse;width:100%;display:block;overflow-x:auto}
.mm-content td,.mm-content th{border:1px solid var(--bd);padding:8px 12px}
.mm-content pre{overflow-x:auto;background:var(--pan);border:1px solid var(--bd);border-radius:12px;padding:14px}
.mm-hero{margin:20px 0}.mm-hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;display:block}
.mm-tags a{display:inline-block;margin:0 6px 6px 0;padding:4px 10px;border-radius:14px;background:var(--soft);color:var(--ac);font-size:13px;text-decoration:none}
.mm-cta{margin:26px 0;padding:18px 20px;border-radius:16px;background:var(--soft)}.mm-cta a{color:var(--ac);font-weight:600}
.mm-related{margin-top:40px}.mm-related h2{font-size:22px}
.alignleft{float:left;margin:0 18px 10px 0}.alignright{float:right;margin:0 0 10px 18px}.aligncenter{display:block;margin:0 auto}
@media(max-width:600px){.mm-crumbs{margin-top:64px}}
@media(max-width:600px){main{padding-left:16px;padding-right:16px}.mm-content{font-size:16px}.mm-head h1{font-size:28px}.search-form{flex-direction:column}.search-form button{width:100%}}
img,video,iframe{max-width:100%}

.foot .by{margin-bottom:6px}.foot .by b{color:var(--tx)}

/* ===== Print / Save as PDF ===== */
@media print{
 @page{margin:14mm 12mm}
 html,body{display:block!important;height:auto!important;min-height:0!important;overflow:visible!important;background:#fff!important;color:#000!important;font-size:12pt}
 body:before,#side,#dock,#tog,#scrim,#calc,.act,.dots,.skip-link,#wpadminbar,.mm-cta,.mm-seo,#clr{display:none!important}
 main,#main{display:block!important;margin:0!important;padding:0!important;width:100%!important;max-width:none!important;position:static!important}
 #chat{max-width:none!important;width:100%!important;padding:0!important}
 #chat:before{content:"HiveMate AI \2014  Step-by-step solution";display:block;font-weight:700;font-size:11pt;color:#111111;border-bottom:1px solid #ddd;padding-bottom:6px;margin-bottom:14px}
 *{box-shadow:none!important;text-shadow:none!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
 h1{background:none!important;color:#000!important;-webkit-text-fill-color:#000!important}
 .u{break-after:avoid}
 .a .st,.a table,.a pre,.a li,mjx-container{break-inside:avoid}
 .a h2,.a h3{break-after:avoid}
 a{color:inherit;text-decoration:none}
 .mm-content a[href]:after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ===== v2.4: scroll-free sidebar + phone optimisation ===== */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip}
button,a,.nb{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* sidebar: no visible scrollbar, ever (content is sized to fit; overflow is only a silent safety net on tiny screens) */
#side>div{overflow-x:hidden;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}
#side>div::-webkit-scrollbar{display:none;width:0;height:0}
/* tighter rows so everything fits without scrolling */
.nb{padding:8px 12px}
.lab{margin:12px 10px 4px}
#side .sp{flex:1 1 0;min-height:4px}
.foot{padding:6px 10px 0}
/* blog categories -> compact chips, count stays on the same line */
.mm-cats,.mm-cats ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:2px 10px 0}
.mm-cats ul{padding:0}
.mm-cats li{display:inline-flex;align-items:center;gap:2px;margin:0;background:var(--soft);border-radius:999px;padding-right:9px;font-size:12px;color:var(--mu);line-height:1}
.mm-cats a{display:inline-block;padding:6px 2px 6px 10px;border-radius:999px;font-size:12.5px}
.mm-cats a:hover,.mm-cats .current-cat>a,.mm-cats .current-cat-parent>a{background:transparent;color:var(--ac)}
/* recent chats: only the latest few, hidden when the window is short */
#recent .nb:nth-child(n+4){display:none}
@media(max-height:740px){.mm-recent{display:none}.nb{padding:7px 12px}.lab{margin:9px 10px 3px}.foot .by{display:none}}

@media(max-width:800px){
  #side{--sw:min(84vw,320px);width:var(--sw)!important;padding:0!important;transform:translateX(-105%);transition:transform .26s cubic-bezier(.4,0,.2,1),visibility 0s .26s;visibility:hidden;box-shadow:none}
  body:not(.collapsed) #side{transform:none;visibility:visible;transition:transform .26s cubic-bezier(.4,0,.2,1),visibility 0s;padding:calc(8px + env(safe-area-inset-top,0px)) 8px calc(8px + env(safe-area-inset-bottom,0px)) 8px!important;box-shadow:0 0 40px #0005}
  #side>div{min-width:0;padding:12px 10px;border-radius:22px}
  .nb{min-height:44px;padding:10px 12px;font-size:15px}
  .nb.on:before{left:-10px}
  .logo{padding:0 4px 10px}
  .logo .cl{width:40px;height:40px;border-radius:12px}
  .mm-recent{display:none}
  #tog{width:44px;height:44px;left:12px;background:#ffffffe6;backdrop-filter:blur(8px)}
  #scrim{transition:opacity .2s}
  html.mm-lock,html.mm-lock body{overflow:hidden;overscroll-behavior:none}
}
@media(max-width:600px){
  main{padding:60px 14px 32px}
  #home>h1{font-size:clamp(30px,9.5vw,40px);line-height:1.1;margin:14px 0 10px}
  .sub{font-size:15.5px;line-height:1.5;margin:0 0 20px}
  .box{border-radius:22px}
  .drop{padding:10px 12px;font-size:12.5px}
  textarea{font-size:16px;padding:16px 18px 4px}
  .tools{padding:6px 12px 12px}
  .try{margin-top:14px;font-size:13px}.try button{font-size:13px;padding:6px 11px}
  .stats{gap:8px;margin:26px 0 4px}.stats div{padding:12px 14px;border-radius:16px}.stats b{font-size:22px}.stats small{font-size:12px}
  .dh{margin:24px 0 10px;font-size:17px}
  .tiles{gap:8px}
  .tiles>.tile{display:grid;grid-template-columns:42px 1fr;column-gap:12px;row-gap:0;align-items:center;padding:12px 14px;border-radius:16px}
  .tiles>.tile i{grid-row:span 2;margin:0}
  .topics{gap:8px}.topics button,.topics a{padding:12px 14px}
  .a{font-size:16px}
  .a .st{padding:14px;gap:10px;border-radius:16px}.a .st h3{font-size:16.5px}
  .a .fin{padding:14px;font-size:17px;border-radius:16px}
  .u{max-width:92%;font-size:16px;padding:12px 16px}
  #chat{padding-bottom:220px}
  .act button{flex:1 1 auto}
  #dock{padding:28px 10px calc(10px + env(safe-area-inset-bottom,0px))}
  #calc{top:auto!important;bottom:calc(10px + env(safe-area-inset-bottom,0px));left:10px!important;right:10px!important;width:auto;max-height:82dvh;overflow:auto}
  .mm-crumbs{margin-top:62px}
}

@media(max-width:800px) and (min-height:820px){.mm-recent{display:block}#recent .nb:nth-child(n+3){display:none}}
@media(max-width:800px) and (max-height:700px){.nb{min-height:38px;padding:6px 12px}.lab{margin:8px 10px 2px}.foot .by{display:none}}
/* ===== v2.4.2: full-screen mobile menu ===== */
@media(max-width:800px){
  #side{--sw:100vw;width:100vw!important;max-width:100vw;left:0;top:0;height:100vh;height:100dvh;transform:translateY(14px);opacity:0;transition:transform .24s ease,opacity .24s ease,visibility 0s .24s;background:var(--bg)}
  body:not(.collapsed) #side{transform:none;opacity:1;padding:0!important;box-shadow:none;transition:transform .24s ease,opacity .24s ease,visibility 0s;z-index:50}
  body:not(.collapsed) #scrim{display:none}
  #side>div{width:100%;max-width:560px;margin:0 auto;height:100%;border:0;border-radius:0;box-shadow:none;background:transparent;padding:calc(14px + env(safe-area-inset-top,0px)) 18px calc(14px + env(safe-area-inset-bottom,0px));gap:3px}
  .logo{padding:0 0 12px;font-size:21px}
  .logo i{width:40px;height:40px;font-size:21px}
  .logo .cl{width:44px;height:44px;border-radius:14px;background:var(--pan)}
  .logo .cl svg{width:24px;height:24px}
  #newc{min-height:52px;font-size:16px;border-radius:16px;margin:0 0 4px}
  .lab{font-size:12px;margin:14px 6px 4px}
  .nb{min-height:50px;padding:12px 14px;font-size:16.5px;border-radius:14px;background:var(--pan);border:1px solid var(--bd);margin-bottom:2px}
  .nb .ic{width:22px;height:22px}
  .nb.on{background:var(--soft);border-color:#f0d56a}.nb.on:before{display:none}
  #newc{border:0}
  .mm-cats{padding:4px 2px 0;gap:8px}
  .mm-cats li{padding-right:12px}.mm-cats a{font-size:14px;padding:9px 3px 9px 13px}.mm-cats li{font-size:13.5px}
  .foot{padding:8px 4px 0;font-size:13px;text-align:center}
  .foot-menu{justify-content:center}
}
@media(max-width:800px) and (max-height:720px){
  #side>div{padding-top:calc(8px + env(safe-area-inset-top,0px));padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .logo{padding-bottom:6px}.nb{min-height:42px;padding:8px 14px}#newc{min-height:44px}.lab{margin:8px 6px 2px}.mm-cats a{padding:7px 3px 7px 11px}
}

/* ===== v2.4.3 alignment fixes ===== */
/* Tool pages (Formula Sheet, Graph Plotter…): heading, subtitle, controls and cards share one left edge */
.w.wide>h1{margin:44px 0 10px;text-align:left}
.w.wide>.sub{max-width:none;margin:0 0 24px;text-align:left}
.w.wide{align-self:center}
/* Formula cards: flex column, equal heights, nothing can spill out */
.cards{align-items:stretch}
.fs{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.fs small{font-size:13px;line-height:1.3}
.fs h4{margin:2px 0 10px;font-size:16px;line-height:1.3}
.fs mjx-container{display:flex!important;flex:1 1 auto;align-items:center;min-width:0;max-width:100%;margin:0!important;padding:4px 0;overflow-x:auto;overflow-y:hidden;font-size:96%!important;scrollbar-width:thin}
.fs mjx-container>svg{flex:none;margin:0 auto}
/* Filter bar: search grows, chips wrap neatly */
.fbar{align-items:center}
.fbar input{flex:1 1 220px}
.fbar button{flex:none}
@media(max-width:600px){.fbar input{flex-basis:100%}.w.wide>h1{margin-top:18px}}
/* Sidebar header: brand shrinks, collapse button never gets pushed out of the panel */
.logo{gap:8px}
.logo .brand{flex:1 1 auto;min-width:0}
.logo .brand b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logo .brand i,.logo .beta,.logo .cl{flex:none}
.logo{font-size:18px}
.logo .brand{gap:8px}
.logo i{width:34px;height:34px;font-size:18px}
.logo .cl{width:30px;height:30px}
@media(max-width:800px){.logo .cl{width:40px;height:40px}.logo{font-size:19px}}

/* ===== v2.5.0 home-page content sections ===== */
.lp{width:100%;max-width:1090px;margin:24px auto 0;padding-top:8px}
.lp section{margin-top:76px}
.lp h2{font-size:clamp(26px,3.4vw,34px);line-height:1.2;letter-spacing:-.02em;font-weight:800;text-align:center;margin:0 0 14px}
.lp h3{margin:0 0 6px;font-size:17px;line-height:1.3}
.lp-lead{max-width:640px;margin:0 auto 28px;text-align:center;color:var(--mu);font-size:16.5px;line-height:1.6}
.lp-intro p{max-width:740px;margin:0 auto 14px;text-align:center;color:var(--mu);font-size:16.5px;line-height:1.75}
.lp a{text-decoration:none;color:inherit}
/* calculator tiles */
.lp-cal{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.lp-ct{display:flex;align-items:center;gap:14px;min-width:0;background:var(--pan);border:1px solid var(--bd);border-radius:18px;padding:14px 16px;box-shadow:var(--sh);transition:transform .2s,border-color .2s}
.lp-ct:hover{transform:translateY(-2px);border-color:var(--ac)}
.lp-ct i{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--soft);color:var(--ac);font-style:normal;font-weight:700;font-size:15px;letter-spacing:-.02em}
.lp-ct span{display:flex;flex-direction:column;gap:2px;min-width:0}
.lp-ct b{font-size:15px;line-height:1.3}
.lp-ct small{color:var(--mu);font-size:13px;line-height:1.4}
.lp-more{text-align:center;margin:26px 0 0}
.lp-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:14px;background:var(--pan);border:1px solid var(--bd);font-weight:600;font-size:15px;box-shadow:var(--sh);transition:border-color .2s,color .2s}
.lp-btn:hover{border-color:var(--ac);color:var(--ac)}
/* feature cards: flex columns so every card lines up */
.lp-feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.lp-fc{display:flex;flex-direction:column;align-items:flex-start;min-width:0;background:var(--pan);border:1px solid var(--bd);border-radius:22px;padding:24px;box-shadow:var(--sh);transition:transform .2s,border-color .2s}
.lp-fc:hover{transform:translateY(-3px);border-color:var(--ac)}
.lp-fc i{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;font-style:normal;font-size:21px;font-weight:700;margin-bottom:16px}
.lp-fc p{margin:0;color:var(--mu);font-size:14.5px;line-height:1.65}
/* how it works */
.lp-steps{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:s}
.lp-steps li{position:relative;counter-increment:s;background:var(--pan);border:1px solid var(--bd);border-radius:22px;padding:26px 24px 24px;box-shadow:var(--sh)}
.lp-steps li:before{content:counter(s);display:grid;place-items:center;width:36px;height:36px;margin-bottom:14px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;font-weight:700;font-size:15px}
.lp-steps p{margin:0;color:var(--mu);font-size:14.5px;line-height:1.65}
/* subjects */
.lp-chips{list-style:none;margin:22px auto 0;padding:0;max-width:820px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.lp-chips li{padding:8px 16px;border-radius:999px;background:var(--soft);color:var(--ac);font-size:14px;font-weight:600}
/* FAQ */
.lp-faq{max-width:780px;margin-left:auto;margin-right:auto}
.lp-faq details{background:var(--pan);border:1px solid var(--bd);border-radius:16px;margin-top:10px;box-shadow:var(--sh);overflow:hidden}
.lp-faq details[open]{border-color:#f0d56a}
.lp-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;cursor:pointer;list-style:none;font-weight:600;font-size:16px;line-height:1.4}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary:after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--soft);color:var(--ac);font-size:18px;font-weight:500;transition:transform .2s}
.lp-faq details[open] summary:after{content:"\2212"}
.lp-faq summary:hover{color:var(--ac)}
.lp-faq details p{margin:0;padding:0 20px 18px;color:var(--mu);font-size:15px;line-height:1.7}
/* footer links */
.lp-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:64px 0 0;padding-top:24px;border-top:1px solid var(--bd);font-size:14px;font-weight:500}
.lp-foot a:hover{color:var(--ac)}
.lp-note{text-align:center;color:var(--mu);font-size:13px;line-height:1.7;margin:14px 0 8px}
@media(max-width:900px){.lp-feat,.lp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.lp-steps li:last-child{grid-column:1/-1}}
@media(max-width:600px){.lp section{margin-top:56px}.lp-feat,.lp-steps{grid-template-columns:minmax(0,1fr)}.lp-steps li:last-child{grid-column:auto}.lp-cal{grid-template-columns:minmax(0,1fr)}.lp-fc{padding:20px}.lp-faq summary{font-size:15.5px;padding:14px 16px}.lp-faq details p{padding:0 16px 16px}}
@media print{#lp{display:none!important}}

/* ---- calculator pages, hub and topic pages ---- */
.mm-calc{max-width:860px}.mm-calc.mm-hub{max-width:1090px}
.mm-solver{margin:22px 0 8px}.mm-solver [hidden]{display:none!important}.mm-solver .sym{border-top:1px solid var(--bd);padding:12px 16px}
.mm-solver textarea{min-height:76px}
.mm-solver .send.busy{font-size:16px}
.mm-try{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 20px 16px;font-size:14px;color:var(--mu)}
.mm-try button{border:1px solid var(--bd);background:var(--pan);border-radius:20px;padding:7px 14px;font-size:14px;color:var(--tx);text-align:left}.mm-try button:hover{border-color:var(--ac);color:var(--ac)}
.mm-out{margin:16px 0 8px}.mm-out[hidden]{display:none}
.mm-nojs{color:var(--mu);font-size:14px}
.mm-sec{margin-top:48px}.mm-sec h2{font-size:clamp(22px,3.4vw,28px);margin:0 0 14px;letter-spacing:-.01em}
.mm-steps{margin:0;padding-left:22px;color:var(--tx);line-height:1.75;font-size:16.5px}.mm-steps li{margin:8px 0;padding-left:4px}
.mm-calc .lp-faq{max-width:none;margin-left:0}
.mm-rcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:12px}
.mm-rc{display:flex;flex-direction:column;gap:4px;background:var(--pan);border:1px solid var(--bd);border-radius:16px;padding:16px 18px;text-decoration:none;color:var(--tx);box-shadow:var(--sh);transition:transform .2s,border-color .2s}
.mm-rc:hover{transform:translateY(-2px);border-color:var(--ac)}.mm-rc b{font-size:16px}.mm-rc span{font-size:13.5px;line-height:1.5;color:var(--mu)}
.mm-more{margin:16px 0 0}.mm-more a,.mm-note a{color:var(--ac);font-weight:600;text-decoration:none}
.mm-note{margin:44px 0 0;color:var(--mu);font-size:13.5px}
@media(max-width:600px){.mm-rcs{grid-template-columns:minmax(0,1fr)}.mm-sec{margin-top:40px}}
@media print{#side,#tog,.mm-solver,.act,.mm-sec:not(.mm-out){display:none!important}.mm-out{display:block!important}}

/* ===== HiveMate spelling bee ===== */
body{display:block}
#app{display:flex;min-height:100vh;width:100%}
.logo i svg{width:18px;height:18px;display:block}
.hive{padding:8px 0 4px;user-select:none}
.hive-row{display:flex;justify-content:center}
.hive-row+.hive-row{margin-top:-14px}
.hex{width:84px;height:96px;margin:0 5px;border:0;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:#fff4c4;color:var(--tx);font-weight:800;font-size:28px;letter-spacing:.02em;text-transform:uppercase;display:grid;place-items:center;line-height:1}
.hex.center{background:#f5b942;color:#1f1300;box-shadow:none}
.hex.on{outline:3px solid var(--ac);outline-offset:2px}
.hex.empty{color:#94a3b8;font-weight:600;font-size:18px}
.hex:hover{filter:brightness(1.03)}
.hive-help{text-align:center;color:var(--mu);font-size:13px;margin:4px 0 8px}
.guess{display:flex;gap:8px;padding:4px 16px 12px;align-items:center}
.guess input{flex:1;min-width:0;border:1px solid var(--bd);background:var(--bg);border-radius:12px;padding:12px 14px;font-size:16px;color:var(--tx);letter-spacing:.04em}
.guess input:focus{outline:2px solid #f5c40088;border-color:var(--ac)}
.modes{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 14px}
.modes button,.toolbtn{border:1px solid var(--bd);background:var(--pan);border-radius:999px;padding:8px 12px;font-size:13.5px;font-weight:600;color:var(--tx)}
.modes button.on,.toolbtn.on{background:var(--ac);border-color:var(--ac);color:#fff}
.out{width:100%;max-width:770px;margin:18px auto 0}
.out-wide{max-width:900px}
.flash{margin:0 0 12px;padding:12px 14px;border-radius:14px;background:var(--soft);color:var(--ac);font-weight:600;font-size:14.5px}
.flash.bad{background:#fef2f2;color:#b91c1c}
.flash.good{background:#f0fdf4;color:#15803d}
.rankhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.rankhead b{font-size:18px}
.rankhead span{color:var(--mu);font-size:13px}
.rankbar{height:12px;background:#e6e8f0;border-radius:99px;overflow:hidden}
.rankbar>i{display:block;height:100%;background:linear-gradient(90deg,#f5b942,#111111);border-radius:99px}
.ranks{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ranks em{font-style:normal;font-size:12px;padding:4px 8px;border-radius:999px;background:var(--pan);border:1px solid var(--bd);color:var(--mu)}
.ranks em.on{background:var(--soft);color:var(--ac);border-color:#f0d56a;font-weight:700}
.distwrap{overflow-x:auto;border:1px solid var(--bd);border-radius:16px;background:var(--pan);box-shadow:var(--sh)}
table.dist{border-collapse:collapse;width:100%;font-size:13.5px;min-width:520px}
table.dist th,table.dist td{border-bottom:1px solid var(--bd);padding:8px 6px;text-align:center}
table.dist th{background:var(--soft);color:var(--ac);font-weight:700;position:sticky;top:0}
table.dist td.lab,table.dist th.lab{text-align:left;padding-left:12px;font-weight:700}
table.dist tr:last-child td{border-bottom:0}
.twos{display:flex;flex-wrap:wrap;gap:8px}
.two{background:var(--pan);border:1px solid var(--bd);border-radius:12px;padding:8px 10px;font-weight:700;font-size:14px;min-width:64px;text-align:center}
.two small{display:block;font-weight:600;color:var(--mu);font-size:11px}
.words{display:flex;flex-wrap:wrap;gap:8px}
.word{border:1px solid var(--bd);background:var(--pan);border-radius:12px;padding:8px 10px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.word small{font-weight:600;color:var(--mu);font-size:11px}
.word.pang{background:#fff7e6;border-color:#f5b942}
.word.rare{opacity:.85}
.word button{border:0;background:var(--soft);color:var(--ac);border-radius:8px;padding:3px 6px;font-size:11px;font-weight:700}
.ai-card{background:var(--pan);border:1px solid var(--bd);border-radius:18px;padding:16px 18px;box-shadow:var(--sh);margin:12px 0}
.ai-card h3{margin:0 0 8px;font-size:16px}
.ai-card p{margin:0;color:var(--tx);line-height:1.65;font-size:15px;white-space:pre-wrap}
.disclaimer{max-width:760px;margin:22px auto 0;text-align:center;color:var(--mu);font-size:13px;line-height:1.6}
.chatlog{width:100%;max-width:770px;display:flex;flex-direction:column;gap:8px;padding-bottom:180px}
.bubble{max-width:85%;padding:12px 16px;border-radius:16px;line-height:1.6;font-size:15.5px;white-space:pre-wrap}
.bubble.user{margin-left:auto;background:linear-gradient(135deg,#1a1a1a,#f5c400);color:#fff}
.bubble.bot{background:var(--pan);border:1px solid var(--bd);box-shadow:var(--sh)}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 12px}
.filters input{flex:1;min-width:140px;border:1px solid var(--bd);border-radius:12px;padding:10px 12px;font-size:14px;background:var(--pan);color:var(--tx)}
.sec-h{font-size:18px;margin:22px 0 10px;text-align:left}
.found{display:flex;flex-wrap:wrap;gap:6px}
.found span{background:var(--soft);color:var(--ac);border-radius:999px;padding:5px 10px;font-size:13px;font-weight:700}
@media(max-width:520px){
  .hex{width:64px;height:74px;margin:0 3px;font-size:20px}
  .hive-row+.hive-row{margin-top:-10px}
  .modes{padding:0 10px 12px}
  .guess{padding:4px 10px 12px}
}
@media print{.hive,.modes,.guess,#side,#tog{display:none!important}}

/* ===== HiveMate black + honey yellow (sbsolver-style) ===== */
:root{
  --bg:#fffdf6;
  --pan:#ffffff;
  --tx:#121212;
  --mu:#5c5648;
  --bd:#e6dfc8;
  --ac:#111111;
  --ac2:#f5c400;
  --gold:#f5c400;
  --soft:#fff4c4;
  --sh:0 1px 2px #1212120d,0 10px 28px #12121210;
  color-scheme:light;
}
body{background:var(--bg);color:var(--tx);font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif}
body:before{display:none}
#home>h1,.stats b{
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:#121212!important;
  color:#121212!important;
}
#side>div{background:#111111;color:#f6f1df;border-color:#1c1c1c}
.logo,.logo .brand,.logo b{color:#f6f1df}
.logo i{background:#f5c400!important;color:#111!important;box-shadow:none!important}
.logo i svg{color:#111}
.logo .cl{border-color:#333;background:#1c1c1c;color:#f5c400}
.logo .cl:hover{background:#f5c400;color:#111}
.beta{background:#f5c400!important;color:#111!important}
#newc{background:#f5c400!important;color:#111!important;box-shadow:none!important}
#newc .ic,#newc:hover .ic{color:#111!important}
#side .nb{color:#f6f1df}
#side .nb .ic{color:#d9c98a}
#side .nb:hover,#side .nb.on{background:#f5c400;color:#111}
#side .nb:hover .ic,#side .nb.on .ic{color:#111}
#side .nb.on:before{background:#f5c400}
#side .lab{color:#f5c400}
#side .foot,#side .foot a,#side .foot .by b{color:#d9c98a}
#side .foot a:hover{color:#f5c400}
#side .mm-cats li{background:#242424;color:#f5c400}
#side .mm-cats a{color:#f6f1df}
#side .mm-cats a:hover,#side .mm-cats .current-cat>a{background:transparent;color:#111}
#side .mm-cats .current-cat{background:#f5c400}
#recent .nb{color:#f6f1df}
#tog{background:#111;color:#f5c400;border-color:#111}
.box{border-color:#eadfad}
.box:focus-within{border-color:#f5c400;box-shadow:0 0 0 4px #f5c40033,var(--sh)}
.drop{background:#fff4c4;color:#3c3420}
.hex{background:#e4e2dc!important;color:#111!important}
.hex.center{background:#f7d117!important;color:#111!important}
.hex.on{outline:3px solid #111;outline-offset:2px}
.hex.empty{color:#8a8478!important}
.guess input{background:#fff;border-color:#e0d7b8}
.guess input:focus{outline:2px solid #f5c400;border-color:#111}
.modes button,.toolbtn{min-height:44px;border-color:#e0d7b8;background:#fff;color:#111}
.modes button:hover,.toolbtn:hover{border-color:#111}
.modes button.on,.toolbtn.on,.fbar button.on,.mm-chips a.on,.mm-pager .current,.search-form button,.mm-btn,.gi button,.send,#ins,.act .p{
  background:#f5c400!important;
  background-image:none!important;
  color:#111!important;
  border-color:#e0b000!important;
  box-shadow:none!important;
}
.mm-btn.ghost{background:#fff4c4!important;color:#111!important}
.send{box-shadow:none!important}
.flash{background:#fff4c4;color:#111}
.flash.bad{background:#fff1f0;color:#9f1239}
.flash.good{background:#f4fbe8;color:#3f6212}
.rankbar{background:#efe8d2}
.rankbar>i{background:#f5c400!important}
.ranks em.on{background:#fff4c4;color:#111;border-color:#f5c400}
table.dist th{background:#fff4c4;color:#111}
.word.pang{background:#fff6cc;border-color:#f5c400}
.word button{background:#fff4c4;color:#111}
.ai-card{border-color:#eadfad}
.found span{background:#fff4c4;color:#111}
.bubble.user{background:#111;color:#f7d117}
.a .fin{background:#111!important;color:#f7d117!important}
.a .st .sn,.lp-steps li:before{background:#f5c400!important;color:#111!important}
.lp-fc i,.lp-ct i{background:#f5c400!important;color:#111!important}
.lp-chips li{background:#fff4c4;color:#111}
.lp-faq details[open]{border-color:#f5c400}
.lp-faq summary:after{background:#fff4c4;color:#111}
.tile:hover,.card:hover,.post:hover,.lp-fc:hover,.lp-ct:hover{border-color:#f5c400}
.topics a b,.topics b,.pc-cat a,.mm-content a,.mm-seo a,.mm-crumbs a:hover,.post-card h2 a:hover{color:#111}
.wordmark{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:2px;margin:8px auto 6px;width:min(100%,760px);padding:0 4px}
.wordmark i{width:clamp(15px,3.5vw,36px);height:clamp(18px,4.1vw,42px);margin:0;flex:none;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:#e4e2dc;color:#111;font-style:normal;font-weight:800;font-size:clamp(8px,1.7vw,14px);display:grid;place-items:center;line-height:1;letter-spacing:0}
.wordmark i.gold{background:#f7d117}
.wordmark .bee{width:clamp(26px,5.2vw,48px);height:clamp(26px,5.2vw,48px);display:grid;place-items:center;margin-left:2px;flex:none}
.kicker{text-align:center;letter-spacing:.16em;font-size:clamp(10px,2.4vw,12px);font-weight:700;color:#3c3420;margin:8px 0 0;text-transform:uppercase}
#home>h1{margin-top:16px!important}
@media(max-width:800px){
  #side{background:#111!important}
  #side>div{background:transparent!important}
  #tog{background:#111!important;color:#f5c400!important;border-color:#111!important}
  .nb{background:#1c1c1c!important;border-color:#2c2c2c!important;color:#f6f1df!important}
  .nb.on,.nb:hover{background:#f5c400!important;color:#111!important;border-color:#f5c400!important}
  .nb.on .ic,.nb:hover .ic{color:#111!important}
  .logo .cl{background:#1c1c1c!important;color:#f5c400!important;border-color:#333}
}

/* ---- additions from the app's styles.css ---- */
.cat-n { margin-left: 6px; color: var(--mu); font-size: 12px; font-weight: 600; }
.mm-cats li { display: flex; align-items: center; }
.mm-chips a { min-height: 44px; display: inline-flex; align-items: center; }
#tog { width: 44px; height: 44px; }
.mm-empty { margin: 12px 0 28px; color: var(--mu); }
.brand { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.chatlog { padding-bottom: 16px; }
.nb { text-decoration: none; color: inherit; }
.nb .ic, .brand svg { width: 18px; height: 18px; }
.brand i svg { width: 18px; height: 18px; }
#wpadminbar ~ #app #tog { top: calc(48px + env(safe-area-inset-top,0px)); }

/* ---- WordPress core / block content ---- */
.mm-content img,.mm-content video{max-width:100%;height:auto}
.mm-content .alignleft{float:left;margin:0 1em 1em 0}
.mm-content .alignright{float:right;margin:0 0 1em 1em}
.mm-content .wp-block-image,.mm-content figure{margin:1.2em 0}
.mm-content figcaption,.wp-caption-text{font-size:13px;color:var(--mu);text-align:center}
.mm-content blockquote{margin:1.2em 0;padding:4px 18px;border-left:4px solid #f7d117;color:var(--mu)}
.mm-content table{width:100%;border-collapse:collapse}
.mm-content th,.mm-content td{border:1px solid var(--bd);padding:8px 10px;text-align:left}
.mm-content .wp-block-heading{scroll-margin-top:80px}
.foot-menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:center}
.foot-menu a{color:inherit;text-decoration:none}
.foot-menu a:hover{color:var(--ac)}
.alignwide,.alignfull{max-width:100%}

/* v1.0.2: one letters box, sbsolver-style options */
.hm-letters{margin:0 0 14px}
.hm-instr{margin:0 4px 10px;font-size:15px;line-height:1.5;color:var(--mu,#64748b)}
.hm-instr b{color:var(--tx,#111)}
.hm-letters-r{display:flex;gap:8px;align-items:stretch}
.hm-letters-r input{flex:1;min-width:0;border:2px solid #f7d117;background:#fff;color:var(--tx,#111);border-radius:14px;padding:14px 16px;font-size:24px;font-weight:800;letter-spacing:.2em;font-family:inherit}
.hm-letters-r input::placeholder{font-size:16px;font-weight:500;letter-spacing:.05em;color:#8a8478}
.hm-letters-r input:focus{outline:3px solid #f7d11766;border-color:#111}
.hm-letters-r .toolbtn{padding:0 22px;font-size:15px;white-space:nowrap}
.hm-letters-b{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.hm-letters-b .toolbtn{font-size:13px;padding:8px 14px}
.hex{pointer-events:none}
.opts{display:flex;flex-wrap:wrap;gap:8px 18px;padding:6px 16px 16px;align-items:center}
.opt{display:inline-flex;gap:7px;align-items:center;font-size:14px;color:var(--tx,#111);cursor:pointer}
.opt input{width:18px;height:18px;accent-color:#f5c400;cursor:pointer}
.opts .toolbtn{font-size:13px;padding:7px 14px}
@media(max-width:560px){.hm-letters-r input{font-size:20px}.hm-letters-r .toolbtn{padding:0 14px}}

/* v1.0.3: compact preview so the results are visible right under the options */
.hm-solver .hex{width:54px;height:62px;margin:0 3px;font-size:20px}
.hm-solver .hive-row+.hive-row{margin-top:-9px}
.hm-solver .hive{padding:14px 0 2px}
.hm-solver .hive-help{margin:6px 0 4px}
.hm-solver .out{scroll-margin-top:12px}