@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Rajdhani:wght@500;600;700&display=swap');

:root{
  --sidebar-w:248px;
  --topbar-h:66px;
  --bg:#090807;
  --panel:rgba(18,14,8,.90);
  --panel2:rgba(25,19,10,.94);
  --panel-soft:rgba(29,22,12,.73);
  --line:rgba(221,184,102,.30);
  --line-soft:rgba(221,184,102,.15);
  --text:#f4ead6;
  --body:#c7b899;
  --muted:#8d8068;
  --accent:#e9b94e;
  --accent-strong:#ffc957;
  --accent-soft:rgba(233,185,78,.13);
  --accent-glow:rgba(233,185,78,.25);
  --good:#6fd190;
  --warn:#efbf62;
  --bad:#e96f74;
  --topbar:rgba(15,11,5,.96);
  --sidebar:rgba(14,10,5,.96);
  --sky-1:#1c1406;
  --sky-2:#090906;
  --scenery:#8c6727;
  --scenery2:#d7a63a;
  --theme-font:"Rajdhani",sans-serif;
}
html[data-faction="caldari"]{
  --bg:#060b0f;--panel:rgba(8,19,27,.91);--panel2:rgba(10,27,39,.95);--panel-soft:rgba(12,31,44,.75);
  --line:rgba(97,180,223,.31);--line-soft:rgba(97,180,223,.15);--text:#e8f5fb;--body:#a9c5d3;--muted:#668494;
  --accent:#55b7df;--accent-strong:#6ed3ff;--accent-soft:rgba(85,183,223,.13);--accent-glow:rgba(85,183,223,.25);
  --topbar:rgba(5,13,19,.96);--sidebar:rgba(5,13,19,.97);--sky-1:#0a2637;--sky-2:#06090d;--scenery:#224c60;--scenery2:#5aa6c4;
}
html[data-faction="gallente"]{
  --bg:#06100d;--panel:rgba(8,23,19,.91);--panel2:rgba(10,31,25,.95);--panel-soft:rgba(12,36,29,.74);
  --line:rgba(87,207,161,.31);--line-soft:rgba(87,207,161,.15);--text:#e8fbf5;--body:#acd1c4;--muted:#6d9183;
  --accent:#5fd6a8;--accent-strong:#7df1c2;--accent-soft:rgba(95,214,168,.13);--accent-glow:rgba(95,214,168,.24);
  --topbar:rgba(5,15,12,.96);--sidebar:rgba(5,15,12,.97);--sky-1:#0b382c;--sky-2:#06100c;--scenery:#1f6250;--scenery2:#61c39d;
}
html[data-faction="minmatar"]{
  --bg:#100806;--panel:rgba(27,13,9,.91);--panel2:rgba(39,18,12,.95);--panel-soft:rgba(46,22,14,.74);
  --line:rgba(224,126,72,.31);--line-soft:rgba(224,126,72,.15);--text:#faece4;--body:#d0afa0;--muted:#936f60;
  --accent:#de7445;--accent-strong:#f38b58;--accent-soft:rgba(222,116,69,.13);--accent-glow:rgba(222,116,69,.25);
  --topbar:rgba(18,8,5,.96);--sidebar:rgba(18,8,5,.97);--sky-1:#3b160d;--sky-2:#0e0807;--scenery:#7b3420;--scenery2:#c85f32;
}
*{box-sizing:border-box}
html{font-size:16px;background:var(--bg)}
body.faction-app{
  margin:0;min-width:320px;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.5;overflow-x:hidden
}
body.faction-app a{color:inherit}
.faction-backdrop{
  position:fixed;inset:0;z-index:-5;overflow:hidden;
  background:
    radial-gradient(circle at 72% 14%,var(--accent-glow),transparent 31%),
    linear-gradient(135deg,var(--sky-1),var(--sky-2) 56%,#020303);
}
.faction-haze{
  position:absolute;inset:0;background:
  radial-gradient(circle at 35% 28%,rgba(255,255,255,.055),transparent 24%),
  linear-gradient(110deg,transparent 34%,rgba(255,255,255,.025) 46%,transparent 60%);
}
.faction-stars{
  position:absolute;inset:0;opacity:.22;background-image:
  radial-gradient(circle,rgba(255,255,255,.85) 0 1px,transparent 1.2px),
  radial-gradient(circle,rgba(255,255,255,.45) 0 1px,transparent 1.1px);
  background-size:250px 250px,410px 410px;background-position:30px 50px,150px 180px
}
.faction-structure{
  position:absolute;bottom:-5vh;opacity:.28;filter:drop-shadow(0 0 45px var(--accent-glow));background:var(--scenery)
}
.structure-a{right:3vw;width:25vw;height:68vh;clip-path:polygon(42% 0,58% 0,64% 18%,77% 35%,70% 100%,24% 100%,30% 34%,38% 18%)}
.structure-b{right:23vw;width:17vw;height:48vh;clip-path:polygon(45% 0,55% 0,66% 24%,87% 38%,73% 100%,22% 100%,14% 38%,34% 24%);background:var(--scenery2);opacity:.13}
html[data-faction="caldari"] .structure-a{right:1vw;width:38vw;height:55vh;clip-path:polygon(0 20%,42% 8%,100% 18%,100% 76%,76% 76%,68% 100%,25% 100%,18% 73%,0 66%)}
html[data-faction="caldari"] .structure-b{right:34vw;width:22vw;height:44vh;clip-path:polygon(0 15%,100% 0,78% 100%,12% 82%)}
html[data-faction="gallente"] .structure-a{right:-8vw;bottom:5vh;width:42vw;height:42vw;border-radius:50%;background:transparent;border:9vw solid var(--scenery);clip-path:none}
html[data-faction="gallente"] .structure-b{right:24vw;bottom:-10vh;width:19vw;height:54vh;border-radius:52% 48% 0 0;background:var(--scenery2);clip-path:none}
html[data-faction="minmatar"] .structure-a{right:-4vw;width:42vw;height:58vh;clip-path:polygon(0 72%,9% 72%,23% 31%,29% 34%,21% 72%,37% 72%,51% 0,57% 3%,48% 72%,67% 72%,83% 22%,90% 25%,78% 72%,100% 72%,100% 100%,0 100%)}
html[data-faction="minmatar"] .structure-b{right:33vw;width:27vw;height:35vh;clip-path:polygon(0 42%,100% 0,100% 18%,17% 58%,100% 70%,100% 84%,0 61%)}
.faction-sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);z-index:70;
  background:var(--sidebar);border-right:1px solid var(--line);box-shadow:18px 0 45px rgba(0,0,0,.25);
  display:flex;flex-direction:column
}
.faction-brand{
  min-height:98px;padding:20px 18px;display:flex;align-items:center;gap:12px;
  text-decoration:none;border-bottom:1px solid var(--line-soft)
}
.faction-brand-mark{
  width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--line);
  background:linear-gradient(145deg,var(--accent-soft),rgba(255,255,255,.025));
  color:var(--accent-strong);font:700 17px var(--theme-font);letter-spacing:.05em
}
.faction-brand-copy strong,.faction-brand-copy small{display:block}
.faction-brand-copy strong{font:700 22px/1 var(--theme-font);letter-spacing:.03em}
.faction-brand-copy small{font-size:10px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.11em}
.faction-nav{padding:16px 0}
.fnav-link{
  min-height:48px;padding:0 16px;display:flex;align-items:center;gap:13px;
  text-decoration:none;color:var(--body);border-left:3px solid transparent;transition:.16s
}
.fnav-link:hover{background:var(--accent-soft);color:var(--text)}
.fnav-link.active{
  color:var(--accent-strong);background:linear-gradient(90deg,var(--accent-soft),transparent);
  border-left-color:var(--accent)
}
.fnav-icon{
  width:27px;text-align:center;color:var(--accent);font:700 20px var(--theme-font)
}
.fnav-label{font:600 15px var(--theme-font);letter-spacing:.015em}
.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line-soft);padding:15px}
.sidebar-caption{display:block;font-size:9px;color:var(--muted);font-weight:800;letter-spacing:.13em;margin-bottom:8px}
.sidebar-faction-button{
  width:100%;border:1px solid var(--line-soft);background:var(--panel-soft);color:var(--text);
  padding:9px;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer
}
.faction-sigil{
  flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--accent-strong);background:var(--accent-soft);
  font:700 17px var(--theme-font)
}
.sidebar-faction-button strong,.sidebar-faction-button small{display:block}
.sidebar-faction-button strong{font:700 14px var(--theme-font)}
.sidebar-faction-button small{font-size:10px;color:var(--muted)}
.faction-topbar{
  position:fixed;left:var(--sidebar-w);right:0;top:0;height:var(--topbar-h);z-index:60;
  background:var(--topbar);border-bottom:1px solid var(--line);display:flex;align-items:center;
  padding:0 20px;gap:15px;backdrop-filter:blur(16px)
}
.sidebar-toggle{display:none;border:0;background:none;color:var(--accent);font-size:22px;cursor:pointer}
.topbar-page{display:flex;align-items:baseline;gap:12px}
.topbar-kicker{font-size:9px;font-weight:800;letter-spacing:.16em;color:var(--muted)}
.topbar-page strong{font:700 18px var(--theme-font);color:var(--text)}
.faction-picker-wrap{margin-left:auto;position:relative}
.faction-picker-current{
  min-width:184px;border:1px solid var(--line-soft);background:var(--panel-soft);color:var(--text);
  padding:7px 9px;display:flex;align-items:center;gap:9px;text-align:left;cursor:pointer
}
.faction-picker-current>span:nth-child(2){flex:1}
.faction-picker-current small,.faction-picker-current strong{display:block}
.faction-picker-current small{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.faction-picker-current strong{font:700 14px var(--theme-font)}
.faction-picker-current b{color:var(--accent);font-size:15px}
.faction-picker{
  position:absolute;right:0;top:calc(100% + 7px);width:330px;padding:7px;
  border:1px solid var(--line);background:var(--panel2);box-shadow:0 20px 65px rgba(0,0,0,.42)
}
.faction-picker[hidden]{display:none}
.faction-picker button{
  width:100%;border:0;background:transparent;color:var(--text);display:flex;align-items:center;gap:11px;
  padding:10px;text-align:left;cursor:pointer
}
.faction-picker button:hover{background:var(--accent-soft)}
.picker-sigil{
  width:37px;height:37px;display:grid;place-items:center;border:1px solid currentColor;
  font:700 18px var(--theme-font)
}
.picker-sigil.amarr{color:#e9b94e}.picker-sigil.caldari{color:#55b7df}.picker-sigil.gallente{color:#5fd6a8}.picker-sigil.minmatar{color:#de7445}
.faction-picker strong,.faction-picker small{display:block}
.faction-picker strong{font:700 15px var(--theme-font)}
.faction-picker small{color:var(--muted);font-size:10px;margin-top:2px}
.faction-content{
  min-height:100vh;margin-left:var(--sidebar-w);padding:calc(var(--topbar-h) + 24px) 24px 60px
}
.eve-window{
  border:1px solid var(--line);background:var(--panel);box-shadow:0 18px 50px rgba(0,0,0,.25);
  backdrop-filter:blur(10px)
}
.eve-window-header{
  min-height:39px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;gap:15px;
  border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--accent-soft),rgba(255,255,255,.01))
}
.eve-window-header>div{display:flex;align-items:center;gap:8px}
.eve-window-header strong{font:700 15px var(--theme-font);letter-spacing:.035em}
.window-icon{color:var(--accent);font:700 18px var(--theme-font)}
.window-state,.window-meta{font-size:9px;color:var(--muted);font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.window-state i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 10px var(--good);margin-right:5px}
.header-action{border:0;background:none;color:var(--accent-strong);font-size:11px;font-weight:700;cursor:pointer}
@media(max-width:980px){
  :root{--sidebar-w:76px}
  .faction-brand-copy,.fnav-label,.sidebar-caption,.sidebar-faction-button>span:nth-child(2){display:none}
  .faction-brand{justify-content:center;padding:16px 8px}
  .faction-nav{padding-top:10px}.fnav-link{justify-content:center;padding:0;border-left-width:2px}.fnav-icon{width:auto}
  .sidebar-bottom{padding:11px}.sidebar-faction-button{justify-content:center;padding:6px}
}
@media(max-width:700px){
  :root{--sidebar-w:0px}
  .faction-sidebar{width:248px;transform:translateX(-100%);transition:transform .2s}
  body.sidebar-open .faction-sidebar{transform:none}
  .faction-brand-copy,.fnav-label,.sidebar-caption,.sidebar-faction-button>span:nth-child(2){display:block}
  .faction-nav .fnav-link{justify-content:flex-start;padding:0 16px}.fnav-icon{width:27px}
  .faction-topbar{left:0;padding:0 12px}.sidebar-toggle{display:block}
  .topbar-kicker{display:none}.faction-picker-current{min-width:0}.faction-picker-current>span:nth-child(2){display:none}
  .faction-picker{position:fixed;left:12px;right:12px;top:72px;width:auto}
  .faction-content{margin-left:0;padding-left:12px;padding-right:12px}
}