/* WoW Forever Guild Vault — Obsidian-like dark theme */
[hidden]{display:none!important}
:root{
  --bg:#1e1e1e; --bg2:#262626; --bg3:#2f2f2f; --border:#363636; --text:#dcddde; --muted:#999; --link:#a88bfa; --accent:#E6CC80;
  --warrior:#C69B6D; --paladin:#F48CBA; --hunter:#AAD372; --rogue:#FFF468; --priest:#FFFFFF; --shaman:#0070DD; --mage:#3FC7EB; --warlock:#8788EE; --druid:#FF7C0A;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted);font-size:13px}
.top{height:52px;display:flex;align-items:center;gap:10px;padding:0 12px;background:var(--bg2);border-bottom:1px solid var(--border)}
.brand{font-weight:700;color:var(--accent);white-space:nowrap}
.brand span{color:var(--muted);font-weight:500}
.brand b{color:var(--text);font-weight:700}
.search-wrap{position:relative;flex:1;max-width:560px}
#search{width:100%;padding:8px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:14px}
.results{position:absolute;top:40px;left:0;right:0;max-height:70vh;overflow:auto;background:var(--bg2);border:1px solid var(--border);border-radius:8px;z-index:50;box-shadow:0 10px 30px #0008}
.results a{display:block;padding:7px 12px;color:var(--text);border-bottom:1px solid #2c2c2c}
.results a:hover,.results a.sel{background:var(--bg3);text-decoration:none}
.results small{display:block;color:var(--muted);font-size:12px}
.btn{padding:7px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg3);color:var(--text);cursor:pointer;font-size:14px;white-space:nowrap}
.btn.primary{background:var(--accent);color:#1a1a1a;border-color:var(--accent);font-weight:600}
.icon-btn{background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer;padding:4px 8px}
.layout{display:flex;height:calc(100% - 52px)}
.tree{width:280px;min-width:220px;overflow:auto;background:var(--bg2);border-right:1px solid var(--border);padding:8px 4px;font-size:13.5px}
.tree details{margin-left:8px}
.tree summary{cursor:pointer;padding:2px 6px;border-radius:4px;list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree summary::before{content:"▸ ";color:var(--muted)}
.tree details[open]>summary::before{content:"▾ "}
.tree summary:hover,.tree a:hover{background:var(--bg3)}
.tree a{display:block;padding:2px 6px 2px 22px;color:var(--text);border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree a.active{background:#3a3550;color:#fff}
.main{flex:1;overflow:auto;position:relative}
.note{max-width:900px;margin:0 auto;padding:28px 36px 80px}
.side{width:300px;overflow:auto;background:var(--bg2);border-left:1px solid var(--border);padding:10px 12px}
.side h3{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:10px 0 6px}
.local-graph{height:280px;background:var(--bg);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.backlinks{list-style:none;padding:0;margin:0;font-size:13.5px}
.backlinks li{padding:3px 0}
/* note content */
.note h1{font-size:30px;margin:.2em 0 .5em;line-height:1.25}
.note h2{font-size:22px;margin:1.4em 0 .4em;border-bottom:1px solid var(--border);padding-bottom:4px}
.note h3{font-size:18px;margin:1.2em 0 .3em}
.note h4,.note h5,.note h6{font-size:15px;margin:1em 0 .3em}
.note table{border-collapse:collapse;margin:.6em 0;font-size:14px;display:block;overflow-x:auto;max-width:100%}
.note th,.note td{border:1px solid var(--border);padding:4px 9px;text-align:left;vertical-align:top}
.note th{background:var(--bg2)}
.note code{background:var(--bg3);padding:1px 5px;border-radius:4px;font-size:13px}
.note img{max-width:100%;vertical-align:middle}
.note .crumbs{font-size:13px;color:var(--muted);margin-bottom:6px}
.note .src{font-size:13px;color:var(--muted)}
.note a.broken{color:#e57373}
.note h1,.note h2,.note h3{scroll-margin-top:12px}
.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%{background:#5b4b8a88}100%{background:transparent}}
/* callouts */
.callout{border-left:4px solid rgb(var(--c,140,140,140));background:rgba(var(--c,140,140,140),.08);border-radius:6px;margin:.6em 0;padding:.3em .8em}
.callout>summary{cursor:pointer;font-weight:600;color:rgb(var(--c,140,140,140))}
.callout>div{padding:.2em 0 .3em}
.c-changed{--c:230,150,60}.c-same,.c-unchanged{--c:140,140,140}.c-new{--c:90,200,120}.c-removed{--c:210,80,80}
.c-rebuilt{--c:120,160,230}.c-client{--c:90,170,220}.c-info{--c:140,160,200}
/* title colors */
.moc h1.title{color:var(--accent)}
.class-warrior h1.title{color:var(--warrior)}.class-paladin h1.title{color:var(--paladin)}.class-hunter h1.title{color:var(--hunter)}
.class-rogue h1.title{color:var(--rogue)}.class-priest h1.title{color:var(--priest)}.class-shaman h1.title{color:var(--shaman)}
.class-mage h1.title{color:var(--mage)}.class-warlock h1.title{color:var(--warlock)}.class-druid h1.title{color:var(--druid)}
.quality-poor h1.title{color:#9D9D9D}.quality-common h1.title{color:#fff}.quality-uncommon h1.title{color:#1EFF00}.quality-rare h1.title{color:#0070DD}.quality-epic h1.title{color:#A335EE}.quality-legendary h1.title{color:#FF8000}
/* graph */
.graph-view{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg)}
.graph-bar{display:flex;gap:14px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.graph-bar input[type=search]{padding:6px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg2);color:var(--text);min-width:240px}
.chk{font-size:13px;color:var(--muted);display:flex;gap:5px;align-items:center}
.graph-canvas{flex:1;min-height:0}
.legend{position:absolute;bottom:10px;left:10px;background:#1e1e1ecc;border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:12px;display:flex;flex-wrap:wrap;gap:4px 12px;max-width:70%}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}
/* landing page: full graph + card */
body.wide .side{display:none}
.hero{position:absolute;top:20px;left:20px;max-width:440px;background:rgba(24,24,24,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--border);border-radius:14px;padding:22px 24px 16px;box-shadow:0 18px 50px #000a;z-index:5}
.hero-kicker{color:var(--accent);font-weight:700;letter-spacing:.04em;font-size:14px}
.hero h1{font-size:26px;line-height:1.25;margin:6px 0 12px;color:#f1f1f1}
.hero p{margin:0 0 10px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 12px}
.hero-actions .btn{text-decoration:none;font-size:15px;padding:9px 15px}
.hero-close{position:absolute;top:8px;right:8px}
.hero-stats{font-size:12.5px}
/* connect your AI */
.connect .tabs{display:flex;gap:6px;margin:18px 0 4px;border-bottom:1px solid var(--border)}
.connect .tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font:inherit;font-weight:600;padding:8px 14px;cursor:pointer}
.connect .tab[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}
.connect .steps{padding-left:22px}
.connect .steps li{margin:14px 0;padding-left:4px}
.connect .steps li .muted{margin-top:6px}
.connect a.btn{display:inline-block;text-decoration:none}
.copy-row{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:100%;vertical-align:middle}
.copy-row code{overflow-wrap:anywhere;font-size:13.5px;padding:3px 7px}
.btn.copy{padding:3px 10px;font-size:12.5px}
.guide-img{display:block;max-width:100%;height:auto;margin:10px 0 4px;border:1px solid var(--border);border-radius:8px}
.num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#1a1a1a;font-size:12px;font-weight:700;vertical-align:1px}
.copied-note{margin-left:10px;color:#7fd18b;font-size:13.5px;font-weight:600}
/* phone */
@media (max-width:1100px){.side{display:none}}
@media (max-width:760px){
  .tree{position:fixed;top:52px;bottom:0;left:0;z-index:40;width:85vw;transform:translateX(-100%);transition:transform .2s}
  .tree.open{transform:none}
  .note{padding:18px 16px 80px}
  .brand span{display:none}
  .btn{padding:7px 9px}
  #graphBtn{display:none}
  #connectBtn span{display:none}
  .hero{left:10px;right:10px;top:10px;max-width:none;padding:16px 16px 10px}
  .hero h1{font-size:20px;margin-right:24px}
  .hero .muted:not(.hero-stats){display:none}
  .landing .legend{display:none}
}