:root {
  color-scheme: dark;
  --night: #070918;
  --night-2: #0c1027;
  --panel: rgba(18, 24, 52, .86);
  --panel-2: rgba(12, 17, 40, .92);
  --line: rgba(157, 187, 255, .16);
  --line-strong: rgba(100, 204, 255, .34);
  --text: #f7f8ff;
  --muted: #a4aecb;
  --muted-2: #75809e;
  --cyan: #58ddff;
  --blue: #2f82ff;
  --purple: #956aff;
  --gold: #efbf68;
  --green: #54dda1;
  --red: #ff7182;
  --theme-start: #070918;
  --theme-middle: #0a0d20;
  --theme-end: #130b25;
  --theme-glow: rgba(47, 106, 216, .2);
  --theme-panel-a: rgba(23, 29, 62, .91);
  --theme-panel-b: rgba(11, 15, 36, .88);
  --theme-action-a: #136bdc;
  --theme-action-b: #5139ac;
  --theme-active-a: rgba(37,111,239,.42);
  --theme-active-b: rgba(92,66,182,.38);
  --hero-shade: rgba(4, 7, 20, .97);
  --hero-tint: rgba(31, 32, 88, .28);
  --ornament: rgba(239, 191, 104, .34);
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="alliance"] {
  --night: #050b18;
  --night-2: #09162e;
  --panel: rgba(10, 29, 62, .9);
  --panel-2: rgba(5, 17, 39, .94);
  --line: rgba(111, 174, 255, .2);
  --line-strong: rgba(87, 167, 255, .48);
  --muted: #a9b9d5;
  --muted-2: #7487a7;
  --cyan: #62c9ff;
  --blue: #1769d2;
  --purple: #244da5;
  --gold: #f5c65c;
  --theme-start: #040916;
  --theme-middle: #07152c;
  --theme-end: #102a52;
  --theme-glow: rgba(34, 115, 238, .3);
  --theme-panel-a: rgba(14, 38, 79, .94);
  --theme-panel-b: rgba(5, 16, 38, .92);
  --theme-action-a: #0d63d4;
  --theme-action-b: #1b3f91;
  --theme-active-a: rgba(28, 112, 230, .5);
  --theme-active-b: rgba(34, 69, 151, .42);
  --hero-shade: rgba(3, 10, 25, .97);
  --hero-tint: rgba(18, 75, 166, .28);
  --ornament: rgba(245, 198, 92, .46);
}

html[data-theme="horde"] {
  --night: #100607;
  --night-2: #210b0d;
  --panel: rgba(51, 15, 18, .9);
  --panel-2: rgba(29, 8, 10, .94);
  --line: rgba(255, 139, 112, .19);
  --line-strong: rgba(231, 91, 68, .48);
  --muted: #c5aaa8;
  --muted-2: #957472;
  --cyan: #ff9b76;
  --blue: #c64232;
  --purple: #7f1d2d;
  --gold: #e8ad59;
  --green: #71d59b;
  --red: #ff7b6b;
  --theme-start: #0c0506;
  --theme-middle: #1a080a;
  --theme-end: #2b0b0f;
  --theme-glow: rgba(185, 36, 35, .3);
  --theme-panel-a: rgba(55, 16, 19, .94);
  --theme-panel-b: rgba(25, 8, 11, .92);
  --theme-action-a: #c43b2d;
  --theme-action-b: #721c29;
  --theme-active-a: rgba(193, 55, 43, .5);
  --theme-active-b: rgba(112, 27, 40, .45);
  --hero-shade: rgba(19, 5, 7, .97);
  --hero-tint: rgba(127, 24, 31, .34);
  --ornament: rgba(232, 173, 89, .44);
}

html[data-theme="chronomancy"] {
  --night: #041317;
  --night-2: #08262b;
  --panel: rgba(8, 42, 48, .9);
  --panel-2: rgba(4, 24, 29, .94);
  --line: rgba(86, 218, 215, .2);
  --line-strong: rgba(85, 226, 219, .48);
  --muted: #abc8c9;
  --muted-2: #748f92;
  --cyan: #65eee6;
  --blue: #168da0;
  --purple: #75612d;
  --gold: #e0bc62;
  --theme-start: #031013;
  --theme-middle: #062329;
  --theme-end: #19352f;
  --theme-glow: rgba(30, 175, 178, .28);
  --theme-panel-a: rgba(10, 53, 59, .94);
  --theme-panel-b: rgba(4, 23, 29, .92);
  --theme-action-a: #087f92;
  --theme-action-b: #796128;
  --theme-active-a: rgba(20, 147, 160, .5);
  --theme-active-b: rgba(143, 111, 43, .38);
  --hero-shade: rgba(2, 15, 18, .97);
  --hero-tint: rgba(12, 117, 124, .3);
  --ornament: rgba(224, 188, 98, .46);
}

html[data-theme="sylvan"] {
  --night: #07110d;
  --night-2: #10251a;
  --panel: rgba(15, 46, 31, .91);
  --panel-2: rgba(7, 27, 18, .94);
  --line: rgba(135, 207, 151, .2);
  --line-strong: rgba(112, 216, 149, .46);
  --muted: #b2c7b6;
  --muted-2: #778f7d;
  --cyan: #83e0af;
  --blue: #2d9362;
  --purple: #62773d;
  --gold: #e4ca79;
  --theme-start: #050d09;
  --theme-middle: #0d2016;
  --theme-end: #24341c;
  --theme-glow: rgba(59, 147, 91, .28);
  --theme-panel-a: rgba(19, 57, 38, .94);
  --theme-panel-b: rgba(7, 26, 18, .92);
  --theme-action-a: #237d52;
  --theme-action-b: #68733a;
  --theme-active-a: rgba(46, 144, 91, .5);
  --theme-active-b: rgba(126, 136, 61, .38);
  --hero-shade: rgba(4, 17, 10, .97);
  --hero-tint: rgba(43, 117, 67, .3);
  --ornament: rgba(228, 202, 121, .43);
}

html[data-theme="deepforge"] {
  --night: #100b08;
  --night-2: #24150e;
  --panel: rgba(48, 28, 18, .91);
  --panel-2: rgba(27, 15, 10, .95);
  --line: rgba(225, 153, 101, .2);
  --line-strong: rgba(239, 145, 83, .48);
  --muted: #c9b4a5;
  --muted-2: #947c6d;
  --cyan: #ffb075;
  --blue: #b95028;
  --purple: #6f3424;
  --gold: #f0bd67;
  --theme-start: #0c0806;
  --theme-middle: #1f120c;
  --theme-end: #3a1b10;
  --theme-glow: rgba(202, 80, 31, .3);
  --theme-panel-a: rgba(59, 32, 20, .94);
  --theme-panel-b: rgba(27, 14, 9, .93);
  --theme-action-a: #b44a24;
  --theme-action-b: #6f3520;
  --theme-active-a: rgba(186, 73, 34, .52);
  --theme-active-b: rgba(118, 58, 32, .44);
  --hero-shade: rgba(20, 10, 6, .97);
  --hero-tint: rgba(146, 54, 21, .34);
  --ornament: rgba(240, 189, 103, .44);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--text); background: radial-gradient(circle at 50% -12%, var(--theme-glow), transparent 35rem), linear-gradient(155deg, var(--theme-start) 0%, var(--theme-middle) 48%, var(--theme-end) 100%); overflow-x: hidden; transition: background .3s ease, color .3s ease; }
body.is-locked { overflow: hidden; }
html:has(dialog[open]), body:has(dialog[open]) { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(88, 221, 255, .72); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.ambient { position: fixed; z-index: -2; width: 26rem; height: 26rem; border-radius: 50%; filter: blur(110px); opacity: .18; pointer-events: none; }
.ambient-one { top: 10rem; left: -12rem; background: var(--blue); }
.ambient-two { right: -12rem; bottom: 2rem; background: var(--purple); }
.starfield { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .32; background-image: radial-gradient(circle at 12% 20%, rgba(255,255,255,.8) 0 1px, transparent 1.5px), radial-gradient(circle at 82% 14%, rgba(88,221,255,.7) 0 1px, transparent 1.5px), radial-gradient(circle at 68% 82%, rgba(255,255,255,.6) 0 1px, transparent 1.5px), radial-gradient(circle at 32% 72%, rgba(239,191,104,.7) 0 1px, transparent 1.5px); background-size: 220px 220px, 270px 270px, 190px 190px, 310px 310px; }

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .55rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.4rem, 5vw, 4.8rem); font-weight: 500; letter-spacing: -.045em; line-height: .98; }
h2 { margin-bottom: .6rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.35rem, 2.5vw, 2rem); font-weight: 500; letter-spacing: -.02em; }
h3 { margin-bottom: .5rem; font-size: 1rem; }
.eyebrow { margin: 0 0 .5rem; color: var(--cyan); font-size: .75rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(255,255,255,.025), transparent 32%), linear-gradient(145deg, var(--theme-panel-a), var(--theme-panel-b)); box-shadow: inset 0 1px rgba(239,191,104,.07), 0 22px 70px rgba(0,0,0,.2); backdrop-filter: blur(18px); }
.app-shell { min-height: 100vh; transition: filter .25s ease, opacity .25s ease; }
.is-locked .app-shell { filter: blur(20px); opacity: .24; pointer-events: none; user-select: none; }

.topbar { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 82px; padding: 0 4vw; border-bottom: 1px solid var(--ornament); background: linear-gradient(180deg, rgba(7,9,24,.94), rgba(7,9,24,.76)); box-shadow: 0 8px 30px rgba(0,0,0,.24), inset 0 -1px rgba(255,255,255,.03); backdrop-filter: blur(24px); }
.brand { display: flex; align-items: center; gap: .75rem; width: max-content; color: inherit; text-decoration: none; }
.brand-mark { position: relative; display: grid; place-items: center; width: 58px; height: 58px; flex: 0 0 auto; filter: drop-shadow(0 5px 12px rgba(0,0,0,.38)) drop-shadow(0 0 12px var(--theme-glow)); }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-mark.large { width: 96px; height: 96px; margin: -10px -8px -10px -12px; }
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy strong { font-size: .95rem; letter-spacing: .03em; }
.brand-copy small { margin-top: .3rem; color: var(--cyan); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; }
.desktop-nav { display: flex; gap: .3rem; padding: .35rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(13,18,43,.62); }
.desktop-nav button { display: flex; gap: .45rem; align-items: center; min-height: 42px; padding: .65rem 1rem; border: 0; border-radius: 999px; color: var(--muted); background: transparent; font-size: .88rem; font-weight: 720; cursor: pointer; }
.desktop-nav button:hover, .desktop-nav button.active { color: #fff; background: linear-gradient(135deg, var(--theme-active-a), var(--theme-active-b)); box-shadow: inset 0 0 0 1px rgba(107,184,255,.2); }
.account-actions { justify-self: end; display: flex; align-items: center; gap: .45rem; }
.icon-button { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: rgba(19,25,53,.65); cursor: pointer; }
.notification-button span { position: absolute; top: -3px; right: -1px; display: grid; place-items: center; width: 18px; height: 18px; border: 2px solid var(--night); border-radius: 50%; color: #061326; background: var(--cyan); font-size: .62rem; font-weight: 900; }
.profile-button { display: flex; align-items: center; gap: .62rem; min-height: 46px; padding: .2rem .25rem .2rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(19,25,53,.72); cursor: pointer; }
.presence-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(84,221,161,.12); }
.profile-name { color: #dce4ff; font-size: .88rem; font-weight: 750; }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border: 2px solid rgba(255,255,255,.16); border-radius: 50%; color: #fff; background: linear-gradient(135deg, #2e7bec, #7040c7); font-size: .78rem; font-style: normal; font-weight: 850; box-shadow: 0 5px 16px rgba(0,0,0,.28); }
.avatar.purple { background: linear-gradient(135deg, #9a5fed, #4c2a9d); }
.avatar.blue { background: linear-gradient(135deg, #43a8df, #2454b0); }
.avatar.gold { background: linear-gradient(135deg, #e2ad52, #a35021); }
.avatar.red { background: linear-gradient(135deg, #e65f79, #852b55); }
.avatar.pink { background: linear-gradient(135deg, #ef70bd, #783185); }
.avatar.more { background: #20294e; font-size: .64rem; }

main { width: min(1200px, 91vw); margin: 0 auto; padding: 3.8rem 0 7rem; }
.route { animation: route-in .28s ease; }
@keyframes route-in { from { opacity: 0; transform: translateY(8px); } }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.7rem; }
.page-heading p:last-child { margin-bottom: 0; color: var(--muted); font-size: 1rem; }
.page-heading h1::after { content: ""; display: block; width: 116px; height: 2px; margin-top: .75rem; background: linear-gradient(90deg, var(--gold), var(--cyan), transparent); box-shadow: 0 0 14px var(--theme-glow); }
.status-badge { display: flex; align-items: center; gap: .55rem; padding: .75rem 1rem; border: 1px solid rgba(84,221,161,.22); border-radius: 999px; color: #bcf8dc; background: rgba(46,134,101,.1); font-size: .8rem; font-weight: 750; }
.status-badge > span:first-child { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.status-badge #online-member-label { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; white-space: nowrap; }
.status-badge b { font-size: .92rem; }
.guild-heading-actions { display: flex; align-items: center; gap: .75rem; }
.drawer-header-actions { display: flex; align-items: center; gap: .65rem; }
.drawer-header-actions .danger-text { min-height: 38px; margin: 0; padding: .5rem .75rem; border: 1px solid rgba(255,100,100,.28); border-radius: 10px; background: rgba(255,80,80,.06); font-size: .75rem; font-weight: 800; white-space: nowrap; }

.section-tabs { display: flex; gap: .3rem; width: max-content; max-width: 100%; margin-bottom: 1.15rem; padding: .35rem; border: 1px solid var(--ornament); border-radius: 12px; background: linear-gradient(180deg, rgba(20,23,45,.82), rgba(7,10,28,.82)); box-shadow: inset 0 1px rgba(255,255,255,.04); overflow-x: auto; }
.section-tabs button { display: flex; align-items: center; gap: .45rem; min-height: 42px; padding: .65rem 1rem; border: 0; border-radius: 11px; color: var(--muted); background: transparent; font-size: .86rem; font-weight: 750; white-space: nowrap; cursor: pointer; }
.section-tabs button.active { color: #fff; background: linear-gradient(135deg, var(--theme-active-a), var(--theme-active-b)); box-shadow: inset 0 0 0 1px var(--ornament); }
.count { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 .25rem; border-radius: 99px; color: #061426; background: var(--cyan); font-size: .66rem; font-weight: 900; }
.count.gold { background: var(--gold); }
.agora-panel { animation: route-in .25s ease; }
.news-create-action { margin: .2rem 0 1rem auto; }
.news-preparations { margin: 0 0 1rem; padding: .9rem 1rem; border-color: rgba(88,221,255,.2); background: linear-gradient(135deg, rgba(47,130,255,.08), rgba(126,87,255,.05)); }
.news-preparations > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.news-preparations h2 { margin: .15rem 0 0; font-size: 1.05rem; }
.news-preparation-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: .65rem; margin-top: .75rem; }
.news-preparation-item { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .75rem; min-width: 0; padding: .72rem .78rem; border: 1px solid var(--line); border-radius: 13px; background: rgba(5,8,25,.34); }
.news-preparation-copy { display: grid; gap: .25rem; min-width: 0; }
.news-preparation-copy strong { overflow: hidden; color: #fff; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.news-preparation-copy small { color: var(--muted); font-size: .68rem; line-height: 1.35; }
.news-preparation-actions { display: flex; align-items: center; gap: .35rem; }
.news-preparation-actions button { min-width: 38px; min-height: 38px; padding: .45rem .58rem; border: 1px solid var(--line); border-radius: 10px; color: var(--cyan); background: rgba(13,20,50,.72); font-size: .72rem; font-weight: 800; cursor: pointer; }
.news-preparation-actions button:hover, .news-preparation-actions button:focus-visible { border-color: var(--line-strong); background: rgba(47,130,255,.14); }
.news-preparation-actions .news-preparation-delete { color: #ff9baa; }

.news-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .78fr); gap: 1rem; }
.feature-story { position: relative; min-height: 390px; overflow: hidden; padding: 1.4rem; border-color: var(--ornament); color: inherit; background-image: linear-gradient(90deg, var(--hero-shade) 0%, rgba(5,8,24,.88) 38%, var(--hero-tint) 68%, rgba(4,7,20,.08) 100%), url("assets/bbb-guild-hall.webp"); background-position: center, center; background-size: cover; box-shadow: inset 0 0 90px rgba(0,0,0,.32), 0 24px 75px rgba(0,0,0,.28); text-align: left; cursor: pointer; }
.feature-story[data-visual="chronomancy"] { background-image: linear-gradient(90deg,rgba(5,8,24,.96),rgba(9,18,45,.32)),url("assets/news-chronomancy.webp"); }
.feature-story[data-visual="cosmic"] { background-image: linear-gradient(90deg,rgba(5,8,24,.96),rgba(24,10,56,.32)),url("assets/news-cosmic-voyage.webp"); }
.feature-story[data-visual="cavern"] { background-image: linear-gradient(90deg,rgba(5,8,24,.96),rgba(14,25,35,.28)),url("assets/news-crystal-cavern.webp"); }
.feature-story[data-visual="fire-dungeon"] { background-image: linear-gradient(90deg,rgba(17,7,13,.96),rgba(53,18,5,.26)),url("assets/news-fire-dungeon.webp"); }
.feature-story[data-visual="event-raid"] { background-image: linear-gradient(90deg,rgba(5,8,24,.96),rgba(30,25,65,.28)),url("assets/event-original-raid.jpg"); }
.feature-story[data-visual="event-dungeon"] { background-image: linear-gradient(90deg,rgba(5,8,24,.96),rgba(20,40,55,.28)),url("assets/event-original-dungeon.jpg"); }
.feature-story[data-visual="event-community"] { background-image: linear-gradient(90deg,rgba(5,8,24,.96),rgba(55,32,12,.28)),url("assets/event-original-community.jpg"); }
.feature-story[data-visual="misty-fortress"] { background-image: linear-gradient(90deg,rgba(5,8,24,.96),rgba(32,40,55,.28)),url("assets/event-free-fantasy-landscape.jpg"); }
.feature-story[data-visual="castle-ruins"] { background-image: linear-gradient(90deg,rgba(5,8,24,.96),rgba(45,38,26,.28)),url("assets/event-free-castle-ruins.jpg"); }
.feature-story[data-visual="distant-lands"] { background-image: linear-gradient(90deg,rgba(5,8,24,.96),rgba(20,48,45,.28)),url("assets/event-free-wide-landscape.jpg"); }
.feature-story:hover, .feature-story:focus-visible { border-color: var(--line-strong); transform: translateY(-1px); }
.feature-story::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(239,191,104,.12); border-radius: calc(var(--radius) - 7px); box-shadow: inset 0 0 75px rgba(0,0,0,.12); pointer-events: none; }
.feature-topline { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; }
.feature-topline time, .card-heading time { color: var(--muted); font-size: .76rem; }
.category-pill { display: inline-flex; align-items: center; width: max-content; padding: .38rem .62rem; border: 1px solid rgba(239,191,104,.32); border-radius: 999px; color: #ffe0a4; background: rgba(130,89,27,.16); font-size: .7rem; font-weight: 850; letter-spacing: .04em; }
.category-pill.cyan { border-color: rgba(88,221,255,.28); color: #b9f4ff; background: rgba(28,123,149,.16); }
.category-pill.gold-pill { border-color: rgba(239,191,104,.28); color: var(--gold); }
.feature-content { position: relative; z-index: 2; width: min(57%, 600px); margin-top: 6.7rem; text-shadow: 0 2px 18px rgba(0,0,0,.65); }
.feature-content h2 { font-size: clamp(1.7rem, 3.4vw, 2.65rem); }
.feature-content > p:not(.eyebrow) { color: #bdc7e2; line-height: 1.6; }
.portal-orbit { position: absolute; right: 5%; bottom: 4%; display: grid; place-items: center; width: 220px; height: 220px; border: 1px solid rgba(88,221,255,.25); border-radius: 50%; box-shadow: 0 0 60px rgba(46,126,255,.18), inset 0 0 50px rgba(64,92,255,.14); }
.portal-orbit::before, .portal-orbit::after { content: ""; position: absolute; border: 1px solid rgba(239,191,104,.28); border-radius: 50%; }
.portal-orbit::before { width: 160px; height: 160px; transform: rotateX(70deg); }
.portal-orbit::after { width: 120px; height: 205px; transform: rotateY(64deg); }
.portal-orbit span { position: absolute; inset: 22px; border: 1px dashed rgba(88,221,255,.25); border-radius: 50%; transform: rotate(22deg); }
.portal-orbit span:nth-child(2) { inset: 54px; border-color: rgba(149,106,255,.38); transform: rotate(-30deg); }
.portal-orbit b { color: #dff9ff; font-family: Georgia, serif; font-size: 1.25rem; letter-spacing: .2em; text-shadow: 0 0 22px var(--cyan); }
.text-action, .text-button { border: 0; color: var(--cyan); background: transparent; font-weight: 750; cursor: pointer; }
.text-action { padding: .4rem 0; }
.text-action span { margin-left: .3rem; }
.quick-card { display: flex; flex-direction: column; min-height: 172px; padding: 1.15rem; }
.card-heading, .panel-title, .poll-header, .event-labels { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.card-heading img { width: 44px; height: 44px; }
.quick-card h2 { margin-top: 1.1rem; font-size: 1.25rem; }
.quick-card > p:not(.eyebrow) { color: var(--muted); font-size: .84rem; }
.quick-card .primary-action, .quick-card .text-action { margin-top: auto; align-self: flex-start; }
.event-preview { grid-column: 2; }
.mini-roster { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .5rem; }
.mini-roster span { padding: .34rem .48rem; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: .68rem; }
.mini-roster b { color: #fff; }
.news-list { align-self: stretch; padding: 1.15rem; }
.news-list-scroll { max-height: 310px; overflow-y: auto; scrollbar-width: thin; }
.panel-title h2 { margin-bottom: 0; font-size: 1.35rem; }
.news-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; width: 100%; min-height: 68px; padding: .65rem .3rem; border: 0; border-top: 1px solid rgba(157,187,255,.09); color: inherit; background: transparent; text-align: left; cursor: pointer; }
.news-row > span:nth-child(2) { display: grid; gap: .22rem; }
.news-row small { color: var(--muted); }
.news-row:hover, .news-row:focus-visible { color: #fff; background: rgba(70,139,255,.07); }
.news-story-stack { grid-column: 1 / -1; display: grid; gap: 1rem; margin-top: .45rem; }
.news-story-heading { padding: .4rem .15rem 0; }
.news-story-heading h2 { margin: .18rem 0 0; font-family: var(--display); font-size: clamp(1.9rem, 3vw, 2.7rem); font-weight: 500; }
.news-story-card { position: relative; display: grid; min-height: 240px; overflow: hidden; padding: 1.35rem; border-color: var(--line); color: inherit; background-position: center; background-size: cover; text-align: left; cursor: pointer; }
.news-story-card::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(239,191,104,.1); border-radius: calc(var(--radius) - 8px); pointer-events: none; }
.news-story-card:hover, .news-story-card:focus-visible { border-color: var(--line-strong); transform: translateY(-1px); }
.news-story-copy { position: relative; z-index: 1; display: grid; align-content: end; max-width: min(720px, 76%); min-height: 210px; }
.news-story-copy h2 { margin: .55rem 0 .35rem; font-family: var(--display); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 500; line-height: 1; }
.news-story-copy p { margin: 0 0 .8rem; color: var(--muted); font-size: 1rem; line-height: 1.45; }
.news-story-copy small { color: #eef3ff; }
.news-story-meta { display: flex; align-items: center; justify-content: space-between; gap: .8rem; color: var(--cyan); font-size: .72rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.news-story-meta time { color: var(--muted); font-weight: 650; letter-spacing: 0; text-transform: none; }
.news-story-card[data-visual="hall"] { background-image: linear-gradient(90deg,rgba(5,8,24,.97),rgba(5,8,24,.58)),url("assets/bbb-guild-hall.webp"); }
.news-story-card[data-visual="raid"] { background-image: linear-gradient(90deg,rgba(22,7,22,.97),rgba(27,8,12,.48)),url("assets/bbb-guild-hall.webp"); background-position: 20% center; }
.news-story-card[data-visual="senate"] { background-image: linear-gradient(90deg,rgba(15,11,28,.97),rgba(39,26,12,.52)),url("assets/bbb-guild-hall.webp"); background-position: 80% center; }
.news-story-card[data-visual="chronomancy"] { background-image: linear-gradient(90deg,rgba(5,8,24,.96),rgba(9,18,45,.45)),url("assets/news-chronomancy.webp"); }
.news-story-card[data-visual="cosmic"] { background-image: linear-gradient(90deg,rgba(5,8,24,.96),rgba(24,10,56,.45)),url("assets/news-cosmic-voyage.webp"); }
.news-story-card[data-visual="cavern"] { background-image: linear-gradient(90deg,rgba(5,8,24,.96),rgba(14,25,35,.42)),url("assets/news-crystal-cavern.webp"); }
.news-story-card[data-visual="fire-dungeon"] { background-image: linear-gradient(90deg,rgba(17,7,13,.97),rgba(53,18,5,.4)),url("assets/news-fire-dungeon.webp"); }
.news-story-card[data-visual="event-raid"] { background-image: linear-gradient(90deg,rgba(5,8,24,.97),rgba(30,25,65,.42)),url("assets/event-original-raid.jpg"); }
.news-story-card[data-visual="event-dungeon"] { background-image: linear-gradient(90deg,rgba(5,8,24,.97),rgba(20,40,55,.42)),url("assets/event-original-dungeon.jpg"); }
.news-story-card[data-visual="event-community"] { background-image: linear-gradient(90deg,rgba(5,8,24,.97),rgba(55,32,12,.42)),url("assets/event-original-community.jpg"); }
.news-story-card[data-visual="misty-fortress"] { background-image: linear-gradient(90deg,rgba(5,8,24,.97),rgba(32,40,55,.42)),url("assets/event-free-fantasy-landscape.jpg"); }
.news-story-card[data-visual="castle-ruins"] { background-image: linear-gradient(90deg,rgba(5,8,24,.97),rgba(45,38,26,.42)),url("assets/event-free-castle-ruins.jpg"); }
.news-story-card[data-visual="distant-lands"] { background-image: linear-gradient(90deg,rgba(5,8,24,.97),rgba(20,48,45,.42)),url("assets/event-free-wide-landscape.jpg"); }
.news-story-card[data-visual="plain"] { background: linear-gradient(135deg,rgba(21,35,77,.92),rgba(26,14,55,.88)); }
.news-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--cyan); background: rgba(54,137,220,.17); }
.news-icon.purple { color: #c3adff; background: rgba(122,88,223,.16); }
.news-icon.gold { color: var(--gold); background: rgba(184,124,40,.15); }
.news-detail-dialog { width: min(780px, calc(100vw - 1rem)); }
.news-detail-hero { display: flex; align-items: flex-start; min-height: 230px; margin: 1rem 0; padding: 1rem; border: 1px solid var(--ornament); border-radius: 18px; background: linear-gradient(180deg, rgba(5,8,24,.08), rgba(5,8,24,.9)), url("assets/bbb-guild-hall.webp") center/cover; }
.news-detail-hero[data-visual="chronomancy"] { background-image: linear-gradient(180deg, rgba(5,8,24,.05), rgba(5,8,24,.9)), url("assets/news-chronomancy.webp"); }
.news-detail-hero[data-visual="cosmic"] { background-image: linear-gradient(180deg, rgba(5,8,24,.05), rgba(5,8,24,.9)), url("assets/news-cosmic-voyage.webp"); }
.news-detail-hero[data-visual="cavern"] { background-image: linear-gradient(180deg, rgba(5,8,24,.05), rgba(5,8,24,.9)), url("assets/news-crystal-cavern.webp"); }
.news-detail-hero[data-visual="fire-dungeon"] { background-image: linear-gradient(180deg, rgba(20,4,4,.05), rgba(14,4,8,.92)), url("assets/news-fire-dungeon.webp"); }
.news-detail-hero[data-visual="event-raid"] { background-image: linear-gradient(180deg,rgba(5,8,24,.05),rgba(5,8,24,.9)),url("assets/event-original-raid.jpg"); }
.news-detail-hero[data-visual="event-dungeon"] { background-image: linear-gradient(180deg,rgba(5,8,24,.05),rgba(5,8,24,.9)),url("assets/event-original-dungeon.jpg"); }
.news-detail-hero[data-visual="event-community"] { background-image: linear-gradient(180deg,rgba(5,8,24,.05),rgba(5,8,24,.9)),url("assets/event-original-community.jpg"); }
.news-detail-hero[data-visual="misty-fortress"] { background-image: linear-gradient(180deg,rgba(5,8,24,.05),rgba(5,8,24,.9)),url("assets/event-free-fantasy-landscape.jpg"); }
.news-detail-hero[data-visual="castle-ruins"] { background-image: linear-gradient(180deg,rgba(5,8,24,.05),rgba(5,8,24,.9)),url("assets/event-free-castle-ruins.jpg"); }
.news-detail-hero[data-visual="distant-lands"] { background-image: linear-gradient(180deg,rgba(5,8,24,.05),rgba(5,8,24,.9)),url("assets/event-free-wide-landscape.jpg"); }
.news-detail-hero[data-visual="plain"] { min-height: 90px; background: linear-gradient(145deg, var(--theme-panel-a), var(--theme-panel-b)); }
.news-detail-meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .78rem; }
.news-detail-summary { margin: 1rem 0; color: #d8e1fa; font-size: 1.05rem; font-weight: 700; line-height: 1.55; }
.news-detail-body { padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); line-height: 1.75; overflow-wrap: anywhere; }

.content-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: 1.8rem .2rem 1.3rem; }
.content-heading h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.content-heading p:last-child { color: var(--muted); }
.revision { color: var(--muted); font-size: .78rem; }
.charter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.charter-card { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); align-content: start; gap: 1rem; min-height: 220px; padding: 1.25rem; overflow: hidden; }
.tile-card-visual { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border: 1px solid var(--line-strong); border-radius: 20px; background: linear-gradient(145deg, rgba(47,130,255,.2), rgba(126,74,197,.14)); box-shadow: inset 0 0 20px rgba(88,221,255,.05); }
.tile-card-visual-image { width: 54px; height: 54px; border-radius: 14px; object-fit: cover; }
.tile-card-visual .visual-emoji { font-size: 2.4rem; }
.tile-marker { position: absolute; right: -.35rem; bottom: -.35rem; display: grid; min-width: 25px; height: 25px; place-items: center; padding: 0 .3rem; border: 1px solid var(--line); border-radius: 999px; color: var(--cyan); background: #101631; font-size: .62rem; font-weight: 900; }
.tile-card-copy { min-width: 0; }
.charter-card h3 { margin: .3rem 2rem .55rem 0; font-family: Georgia, serif; font-size: 1.45rem; }
.charter-card p { margin-bottom: 0; color: var(--muted); line-height: 1.6; }
.senate-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(270px, .6fr); gap: 1rem; }
.active-poll-stack { display: grid; align-content: start; gap: 1rem; }
.recent-full-results { display: grid; gap: 1rem; margin-top: .5rem; }
.recent-full-results > header { padding: .35rem .2rem; }
.recent-full-results > header h3 { margin: .25rem 0; font-family: Georgia, serif; font-size: 1.5rem; }
.recent-full-results > header small { color: var(--muted); }
.poll-card { padding: 1.35rem; }
.poll-header { align-items: flex-start; margin-bottom: 1.2rem; }
.poll-header h3 { margin-top: .8rem; font-family: Georgia, serif; font-size: 1.65rem; }
.poll-header p { color: var(--muted); }
.closing-badge { display: grid; min-width: 94px; padding: .7rem; border: 1px solid rgba(239,191,104,.22); border-radius: 13px; text-align: center; background: rgba(130,89,27,.11); }
.closing-badge small { color: var(--muted); font-size: .67rem; text-transform: uppercase; }
.closing-badge strong { margin-top: .2rem; color: var(--gold); }
.poll-countdown-badge { position: relative; cursor: help; outline: none; }
.poll-countdown-badge::after { position: absolute; z-index: 12; right: 0; top: calc(100% + .45rem); width: max-content; max-width: min(260px, 75vw); padding: .5rem .65rem; border: 1px solid var(--line-strong); border-radius: 9px; color: #eef5ff; background: #080d22; box-shadow: 0 12px 30px rgba(0,0,0,.35); content: attr(data-exact-date); font-size: .68rem; font-weight: 700; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease; }
.poll-countdown-badge:hover::after, .poll-countdown-badge:focus-visible::after { opacity: 1; transform: translateY(0); }
.poll-countdown-badge:focus-visible { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(88,221,255,.14); }
.poll-results-notice { display: flex; align-items: center; gap: .75rem; margin: -.35rem 0 1rem; padding: .8rem 1rem; border: 1px solid rgba(83,218,255,.22); border-radius: 13px; color: var(--muted); background: rgba(22,67,116,.16); }
.poll-results-notice > span { display: grid; flex: 0 0 38px; height: 38px; place-items: center; border-radius: 10px; color: var(--cyan); background: rgba(47,130,255,.18); }
.poll-results-notice > div { display: grid; gap: .15rem; }
.poll-results-notice strong { color: #eef3ff; }
.poll-results-notice small { line-height: 1.35; }
.poll-participation { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .4rem; width: max-content; max-width: 100%; margin: 0 0 1rem; padding: .45rem .7rem; border: 1px solid rgba(83,218,255,.18); border-radius: 999px; color: var(--cyan); background: rgba(20,54,96,.22); }
.poll-participation > span { color: #57e6b1; font-size: .6rem; }
.poll-participation small { color: var(--muted); }
.poll-options { display: grid; gap: .55rem; }
.poll-option { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; min-height: 66px; overflow: hidden; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 14px; color: inherit; background: rgba(5,8,26,.35); text-align: left; cursor: pointer; }
.poll-option > * { position: relative; z-index: 1; }
.poll-option img { width: 44px; height: 44px; }
.poll-option > span { display: grid; gap: .15rem; }
.poll-option small { color: var(--muted); }
.poll-option > b { color: var(--cyan); font-size: .8rem; }
.poll-option i { position: absolute; z-index: 0; inset: auto 0 0 0; width: var(--score); height: 4px; background: linear-gradient(90deg, var(--blue), var(--cyan)); transition: width .25s ease; }
.poll-option.results-hidden > b { color: var(--muted); font-size: 1rem; }
.poll-option.results-hidden i { display: none; }
.poll-option-readonly { cursor: default; }
.poll-option-readonly:hover { border-color: var(--line); background: rgba(5,8,26,.35); }
.poll-option:hover, .poll-option[aria-checked="true"] { border-color: rgba(88,221,255,.48); background: rgba(30,94,165,.18); }
.poll-card footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; color: var(--muted); font-size: .75rem; }
.senate-side { display: grid; gap: 1rem; }
.recent-poll-results { display: grid; gap: .7rem; margin-top: .8rem; }
.recent-poll-result { display: grid; gap: .3rem; padding: .8rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(5,8,26,.3); }
.recent-poll-result h3, .recent-poll-result p { margin: 0; }
.recent-poll-result small { color: var(--muted); }
.compact-panel { padding: 1.15rem; }
.compact-panel p:not(.eyebrow) { color: var(--muted); line-height: 1.5; }
.status-chip { display: inline-flex; width: max-content; padding: .33rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 800; }
.status-chip.draft { color: #d4c8f6; background: rgba(137,102,209,.18); }
.status-chip.scheduled { color: #c9f5ff; background: rgba(47,130,255,.18); }
.status-chip.done { color: #b8f8da; background: rgba(52,150,106,.18); }

.primary-action, .secondary-action { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 46px; padding: .72rem 1rem; border-radius: 12px; font-weight: 780; cursor: pointer; }
.primary-action { border: 1px solid var(--line-strong); color: #fff; background: linear-gradient(135deg, var(--theme-action-a), var(--theme-action-b)); box-shadow: 0 10px 30px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.15); }
.primary-action:hover { transform: translateY(-1px); filter: brightness(1.08); }
.secondary-action { border: 1px solid var(--line); color: #d6def6; background: rgba(18,24,52,.72); }
.primary-action.small, .secondary-action.small { min-height: 38px; padding: .55rem .78rem; font-size: .78rem; }
.full { width: 100%; }

.filter-bar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; gap: .65rem; margin-bottom: 1rem; padding: .75rem; }
.filter-bar .search-field { grid-column: 1 / span 5; grid-row: 1; }
.filter-bar .filter-chips { grid-column: 6 / span 6; grid-row: 1; }
.filter-bar .filter-clear-button { grid-column: 12; grid-row: 1; justify-self: end; }
.filter-bar #race-filter { grid-column: 1 / span 4; grid-row: 2; }
.filter-bar #profession-filter { grid-column: 5 / span 4; grid-row: 2; }
.filter-bar #grade-filter { grid-column: 9 / span 4; grid-row: 2; }
.search-field { display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 .75rem; border: 1px solid var(--line); border-radius: 11px; background: rgba(5,8,25,.38); }
.search-field span { color: var(--cyan); font-size: 1.25rem; }
.search-field input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; text-overflow: ellipsis; }
.filter-chips { display: flex; gap: .25rem; }
.filter-chips button { display: inline-flex; align-items: center; justify-content: center; gap: .34rem; min-height: 38px; padding: .48rem .7rem; border: 1px solid transparent; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; }
.filter-chips button img { width: 22px; height: 22px; flex: 0 0 auto; filter: drop-shadow(0 3px 7px rgba(0,0,0,.28)); }
.filter-chips button.active { border-color: var(--line-strong); color: #fff; background: rgba(50,117,217,.2); }
select, input, textarea { width: 100%; min-width: 0; min-height: 44px; padding: .65rem .7rem; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: #0c112b; }
select { padding-right: 2rem; }
textarea { resize: vertical; }
.filter-bar select { width: 100%; min-width: 0; }
.filter-clear-button { display: inline-grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 1px solid rgba(255,112,137,.24); border-radius: 11px; color: #ff8196; background: rgba(255,93,121,.07); cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.filter-clear-button svg { width: 18px; height: 18px; fill: currentColor; }
.filter-clear-button:hover { border-color: rgba(255,112,137,.55); background: rgba(255,93,121,.14); transform: translateY(-1px); }
.filter-clear-button:focus-visible { outline: 3px solid rgba(88,221,255,.62); outline-offset: 2px; }
.member-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.member-card { overflow: hidden; cursor: pointer; transition: transform .18s ease, border-color .18s ease; }
.member-card:hover { transform: translateY(-3px); border-color: rgba(88,221,255,.32); }
.member-card:focus-visible { outline: 3px solid rgba(88,221,255,.72); outline-offset: 3px; }
.member-banner { position: relative; display: flex; justify-content: flex-end; align-items: center; height: 108px; overflow: hidden; padding: .75rem; background: radial-gradient(circle at 78% 40%, rgba(255,255,255,.14), transparent 38%), linear-gradient(130deg, #3d1f22, #722d34); }
.member-banner.mage { background: linear-gradient(130deg, #142f59, #276a9f); }
.member-banner.paladin { background: linear-gradient(130deg, #5b2e4a, #a75279); }
.member-banner.druid { background: linear-gradient(130deg, #633112, #b2681e); }
.member-banner.hunter { background: linear-gradient(130deg, #263d22, #58783d); }
.member-banner.priest { background: linear-gradient(130deg, #4a465d, #837f9c); }
.member-banner.rogue { background: linear-gradient(130deg, #594d14, #9a8522); }
.member-banner.shaman { background: linear-gradient(130deg, #133f61, #176ca5); }
.member-banner.warlock { background: linear-gradient(130deg, #2e194f, #6a3292); }
.member-banner img { width: 82px; height: 82px; opacity: .92; filter: drop-shadow(0 10px 20px rgba(0,0,0,.35)); }
.grade { position: absolute; top: .7rem; left: .7rem; padding: .32rem .52rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(7,9,24,.58); font-size: .67rem; font-weight: 850; }
.grade.founder { color: #ffe3a4; }
.grade.ancien { color: #c7b9ff; }
.grade.raclure { color: #aeeeff; }
.grade.compagnon { color: #c3f6da; }
.grade.invite { color: #d5d9e6; }
.member-body { padding: 1rem; }
.member-identity { display: flex; align-items: center; gap: .72rem; margin-top: -2rem; position: relative; }
.large-avatar { width: 50px; height: 50px; border-width: 3px; }
.member-identity h2 { margin: 0; font-family: inherit; font-size: 1.05rem; font-weight: 800; }
.member-identity p { margin: .16rem 0 0; color: var(--muted); font-size: .72rem; }
.character-line { display: flex; justify-content: space-between; gap: .7rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid rgba(157,187,255,.1); }
.character-line > div { display: grid; gap: .18rem; }
.character-line small { color: var(--muted-2); font-size: .66rem; }
.character-line span { color: var(--muted); font-size: .75rem; }
.character-build { display: grid; justify-items: end; gap: .32rem; min-width: 0; }
.character-build > b { color: #e8efff; font-size: .73rem; }
.combat-role-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .28rem; }
.combat-role-badge { display: inline-flex; align-items: center; gap: .28rem; width: max-content; padding: .22rem .4rem .22rem .24rem; border: 1px solid rgba(157,187,255,.18); border-radius: 999px; color: #e8efff; background: rgba(6,10,28,.48); font-size: .62rem; font-weight: 800; line-height: 1; }
.combat-role-badge img { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(0,0,0,.3)); }
.combat-role-badge.compact { padding: .16rem .34rem .16rem .18rem; font-size: .58rem; }
.combat-role-badge.compact img { width: 18px; height: 18px; }
.combat-role-badge.selected { border-color: rgba(88,221,255,.42); background: rgba(47,130,255,.13); }
.trade-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem; }
.trade-list span { padding: .35rem .48rem; border: 1px solid var(--line); border-radius: 8px; color: #c9d2e8; background: rgba(5,8,25,.3); font-size: .68rem; }
.empty-state { padding: 3rem; color: var(--muted); text-align: center; }

.planning-calendar-action { display: flex; justify-content: flex-end; margin: -.35rem 0 .55rem; }
.planning-calendar-action #open-calendar { display: inline-flex; align-items: center; gap: .42rem; }
.week-frieze { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; gap: .55rem; margin-bottom: 1rem; }
.week-arrow { display: grid; place-items: center; width: 42px; height: 54px; border: 1px solid var(--line); border-radius: 14px; color: #fff; background: linear-gradient(145deg, rgba(41,116,226,.24), rgba(94,61,174,.18)); font-size: 1.15rem; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.week-arrow:hover { transform: translateY(-1px); border-color: rgba(88,221,255,.4); background: linear-gradient(145deg, rgba(41,116,226,.36), rgba(94,61,174,.26)); }
.week-arrow:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; min-width: 0; padding: .55rem; }
.week-strip button { position: relative; display: grid; grid-template-rows: auto auto 7px; align-content: center; justify-items: center; row-gap: .12rem; min-height: 76px; border: 0; border-radius: 14px; color: var(--muted); background: transparent; cursor: pointer; }
.week-strip button small { font-size: .68rem; }
.week-strip button strong { color: #e7ebf8; font-size: 1.12rem; }
.week-strip button .event-dot { width: 5px; height: 5px; margin-top: .08rem; border-radius: 50%; background: var(--cyan); opacity: 0; }
.week-strip button .event-dot.visible { opacity: 1; box-shadow: 0 0 8px rgba(88,221,255,.6); }
.week-strip button.selected { color: #fff; background: linear-gradient(145deg, rgba(41,116,226,.4), rgba(94,61,174,.32)); box-shadow: inset 0 0 0 1px rgba(88,221,255,.22); }
.planning-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .55fr); gap: 1rem; }
.event-list { display: grid; gap: .8rem; }
.event-card { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 1rem; align-items: center; overflow: hidden; padding: 0 1rem 0 0; }
.featured-event { grid-template-columns: 150px minmax(0, 1fr) auto; }
.featured-event .event-actions { grid-column: 1 / -1; }
.event-cover { position: relative; align-self: stretch; min-height: 168px; overflow: hidden; background: #080c1f; }
.event-cover > img { width: 100%; height: 100%; min-height: 168px; object-fit: cover; }
.event-cover .event-date-block { position: absolute; left: .65rem; bottom: .65rem; width: 64px; min-height: 78px; border-color: rgba(255,255,255,.28); background: rgba(6,10,27,.82); box-shadow: 0 10px 28px rgba(0,0,0,.35); backdrop-filter: blur(8px); }
.event-owner-badge { padding: .3rem .5rem; border: 1px solid rgba(239,191,104,.28); border-radius: 999px; color: #ffe2a9; background: rgba(150,98,25,.13); font-size: .62rem; font-weight: 800; }
.event-date-block { display: grid; place-items: center; width: 76px; min-height: 96px; border: 1px solid rgba(88,221,255,.2); border-radius: 16px; background: linear-gradient(145deg, rgba(32,102,191,.24), rgba(84,54,156,.16)); }
.event-date-block strong { font-family: Georgia, serif; font-size: 2rem; line-height: 1; }
.event-date-block span { color: var(--cyan); font-size: .68rem; font-weight: 850; letter-spacing: .12em; }
.event-date-block small { color: var(--muted); font-size: .7rem; }
.event-date-block.compact { min-height: 86px; }
.event-details h2 { margin: .55rem 0 .25rem; font-size: 1.35rem; }
.event-details > p { color: var(--muted); font-size: .8rem; }
.roster-bars { display: flex; flex-wrap: wrap; gap: .4rem; }
.roster-bars span { position: relative; overflow: hidden; padding: .42rem .55rem; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: .7rem; }
.roster-bars i { position: absolute; inset: auto 0 0 0; width: var(--fill); height: 2px; background: var(--cyan); }
.roster-bars b { color: #fff; }
.event-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .8rem; border-top: 1px solid rgba(157,187,255,.1); }
.stacked-avatars { display: flex; }
.stacked-avatars .avatar { margin-right: -9px; }
.attendance-actions { display: flex; gap: .3rem; }
.attendance-actions button { min-height: 36px; padding: .45rem .65rem; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: rgba(5,8,25,.35); font-size: .7rem; font-weight: 750; cursor: pointer; }
.attendance-actions button.selected { border-color: rgba(84,221,161,.42); color: #c2fae0; background: rgba(41,145,99,.18); }
.attendance-actions .unsubscribe-inline { border-color: rgba(255,113,130,.25); color: #ffb8c1; }
.simple-attendance { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .8rem; color: var(--muted); font-size: .72rem; }
.event-role-needs { display: inline-flex; flex-wrap: wrap; gap: .36rem; }
.event-role-need { display: inline-flex; align-items: center; gap: .22rem; }
.event-role-need img { width: 22px; height: 22px; }
.event-role-need b { color: #fff; }
.roster-panel { padding: 1rem; align-self: start; }
.roster-group { padding: .8rem 0; border-top: 1px solid rgba(157,187,255,.1); }
.roster-group h3 { display: flex; align-items: center; gap: .45rem; color: #dce5fa; font-size: .82rem; }
.roster-group h3 img { width: 30px; height: 30px; }
.roster-group h3 span { margin-left: auto; color: var(--muted); }
.roster-group > div { display: flex; flex-wrap: wrap; gap: .35rem; }
.mini-person { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .45rem; border-radius: 999px; background: rgba(255,255,255,.04); font-size: .68rem; }
.mini-person .avatar { width: 23px; height: 23px; border-width: 1px; font-size: .55rem; }
.roster-summary { color: var(--muted); font-size: .72rem; }
.past-events-panel { margin-top: 1rem; padding: 1rem; }
.past-events-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.past-events-panel h2 { margin: .2rem 0 0; font-size: 1.15rem; }
.past-event-navigation { display: flex; align-items: center; gap: .45rem; }
.past-event-navigation button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; color: #fff; background: rgba(47,130,255,.1); cursor: pointer; }
.past-event-navigation button:disabled { opacity: .35; cursor: default; }
.past-event-navigation span { min-width: 42px; color: var(--muted); font-size: .68rem; text-align: center; }
.past-event-card { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: .8rem; width: 100%; overflow: hidden; padding: 0 .8rem 0 0; border: 1px solid var(--line); border-radius: 13px; color: inherit; background: rgba(5,8,25,.32); text-align: left; cursor: pointer; }
.past-event-card:hover, .past-event-card:focus-visible { border-color: var(--cyan); background: rgba(47,130,255,.09); }
.past-event-card > img { width: 82px; height: 72px; object-fit: cover; }
.past-event-card-copy { display: grid; gap: .16rem; min-width: 0; }
.past-event-card-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.past-event-card-copy small, .past-event-card-copy > span { color: var(--muted); font-size: .68rem; }
.past-event-card-arrow { color: var(--cyan); font-size: 1.5rem; }
.past-event-summary { display: grid; gap: 1rem; }
.past-event-summary > img { width: 100%; max-height: 240px; border-radius: 14px; object-fit: cover; }
.past-event-summary-copy { display: grid; gap: .75rem; }
.past-event-summary-copy > p, .past-event-summary-copy div > p { margin: 0; color: var(--muted); line-height: 1.55; }
.past-event-summary-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.past-event-summary-stats span { display: grid; gap: .15rem; padding: .65rem; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: .68rem; background: rgba(47,130,255,.06); }
.past-event-summary-stats strong { color: #fff; font-size: 1rem; }

.login-gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: safe center; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background-image: linear-gradient(90deg, rgba(3,5,15,.78), rgba(3,5,15,.42)), url("assets/bbb-guild-hall.webp"); background-position: center; background-size: cover; backdrop-filter: blur(5px); }
.login-card { width: min(440px, 100%); padding: 1.65rem; border: 1px solid var(--ornament); border-radius: 20px 20px 14px 14px; background: linear-gradient(155deg, rgba(18,23,48,.97), rgba(7,9,24,.98)); box-shadow: inset 0 0 0 5px rgba(255,255,255,.018), 0 35px 120px rgba(0,0,0,.68), 0 0 70px var(--theme-glow); }
.login-brand { display: flex; align-items: center; gap: 1rem; }
.login-brand h1 { margin: 0; font-size: 2rem; }
.legal-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .25rem .5rem; width: max-content; max-width: 100%; margin: .55rem auto 0; color: rgba(164,174,203,.35); font-size: .58rem; line-height: 1; }
.legal-links a { display: inline-flex; align-items: center; min-height: 26px; padding: .25rem .38rem; border-radius: 999px; color: var(--muted-2); text-decoration: none; }
.legal-links a:hover, .legal-links a:focus-visible { color: var(--cyan); background: rgba(88,221,255,.07); outline: none; }
.legal-links a:focus-visible { box-shadow: 0 0 0 2px rgba(88,221,255,.24); }
.legal-links span { font-size: .48rem; }
.login-copy { margin: 1.4rem 0; color: var(--muted); line-height: 1.55; }
.discord-auth-action, .passkey-action { box-sizing: border-box; min-width: 0; }
.discord-auth-action { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 66px; margin-bottom: .7rem; padding: .7rem; border: 1px solid rgba(164,174,255,.5); border-radius: 14px; color: #fff; background: linear-gradient(135deg, rgba(67,78,186,.96), rgba(88,101,242,.9)); box-shadow: 0 10px 28px rgba(25,31,90,.28); text-align: left; cursor: pointer; }
.discord-auth-action:hover, .discord-auth-action:focus-visible { border-color: rgba(255,255,255,.72); background: linear-gradient(135deg, rgba(77,90,207,.98), rgba(100,111,246,.94)); outline: none; }
.discord-auth-action:focus-visible { box-shadow: 0 0 0 3px rgba(88,101,242,.3), 0 10px 28px rgba(25,31,90,.28); }
.discord-auth-action:disabled { opacity: .66; cursor: wait; }
.discord-auth-symbol { display: grid; flex: 0 0 42px; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(255,255,255,.1); }
.discord-auth-symbol svg { width: 24px; height: 24px; fill: currentColor; }
.discord-auth-action > span:last-child { display: grid; min-width: 0; gap: .15rem; }
.discord-auth-action strong, .discord-auth-action small { overflow-wrap: anywhere; }
.discord-auth-action small { color: #dce0ff; }
.passkey-action { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 66px; padding: .7rem; border: 1px solid rgba(88,221,255,.38); border-radius: 14px; color: #fff; background: linear-gradient(135deg, rgba(25,106,213,.78), rgba(82,52,161,.8)); text-align: left; cursor: pointer; }
.passkey-symbol { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(255,255,255,.08); font-size: 1.2rem; }
.passkey-action > span:last-child { display: grid; gap: .15rem; }
.passkey-action small { color: #c8d9f3; }
.login-separator { display: flex; align-items: center; gap: .65rem; margin: 1rem 0; color: var(--muted-2); font-size: .72rem; }
.login-separator::before, .login-separator::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.auth-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin: .85rem 0; padding: .25rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.2); }
.auth-mode-tabs button { min-height: 38px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; }
.auth-mode-tabs button.active { color: var(--text); background: linear-gradient(135deg, var(--theme-active-a), var(--theme-active-b)); }
.auth-back-button { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; margin-top: .25rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(5,8,25,.3); font-weight: 750; cursor: pointer; }
.auth-back-button:hover, .auth-back-button:focus-visible { border-color: var(--cyan); color: #fff; background: rgba(47,130,255,.1); }
.auth-back-button[hidden] { display: none; }
.email-login, .auth-credentials { display: grid; gap: .7rem; margin-top: .8rem; }
.auth-second-step { display: grid; gap: .75rem; padding: .9rem; border: 1px solid rgba(88,221,255,.28); border-radius: 14px; background: rgba(47,130,255,.08); }
.auth-second-step h2, .auth-second-step p { margin: 0; }
.auth-second-step h2 { font-size: 1.2rem; }
.auth-second-step > p { color: var(--muted); font-size: .76rem; line-height: 1.5; }
.auth-step-chip { width: max-content; padding: .3rem .55rem; border-radius: 999px; color: #c9f7ff; background: rgba(88,221,255,.12); font-size: .65rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.auth-step-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.mail-delivery-hint { padding: .65rem; border-radius: 10px; color: #ffe1a4 !important; background: rgba(210,148,50,.1); }
label { display: grid; gap: .38rem; color: var(--muted); font-size: .78rem; font-weight: 750; }
.login-note, .prototype-note { margin: 1rem 0 0; color: var(--muted-2); font-size: .68rem; text-align: center; }

dialog { padding: 0; overflow: hidden; border: 1px solid var(--line-strong); color: var(--text); background: #101631; box-shadow: 0 35px 120px rgba(0,0,0,.62); }
html:has(dialog[open]), body:has(dialog[open]) { overflow: hidden; }
dialog::backdrop { background: rgba(2,4,14,.78); backdrop-filter: blur(9px); }
dialog header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
dialog header h2 { margin-bottom: 0; }
.close-button { width: 38px; height: 38px; border: 0; border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.06); font-size: 1.25rem; cursor: pointer; }
.drawer-dialog { position:fixed; inset:0; box-sizing:border-box; width:min(1380px,calc(100vw - 3rem)); max-width:none; height:min(940px,calc(100dvh - 2.5rem)); max-height:none; margin:auto; border-radius:24px; }
.drawer-shell { display:grid; grid-template-columns:210px minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; box-sizing:border-box; width:100%; height:100%; min-height:0; padding:0; overflow:hidden; overscroll-behavior:contain; }
.drawer-shell>header { position:relative; top:auto; grid-column:1/-1; grid-row:1; min-width:0; margin:0; padding:1.55rem 2rem 1.4rem; background:linear-gradient(135deg,rgba(20,31,69,.98),rgba(13,22,51,.98)); }
.drawer-shell>header>div:first-child { min-width:0; padding-right:.5rem; }
.drawer-tabs { grid-column:1; grid-row:2 / 4; display:flex; flex-direction:column; gap:.38rem; min-height:0; margin:0; padding:1.45rem 1.15rem; overflow-y:auto; border-right:1px solid var(--line); background:rgba(5,10,31,.34); }
.drawer-tabs button { display:flex; align-items:center; width:100%; min-height:44px; padding:.65rem .8rem; border:0; border-radius:11px; color:var(--muted); background:transparent; text-align:left; cursor:pointer; white-space:normal; }
.drawer-tabs button.active { color: #fff; background: rgba(47,130,255,.18); }
.settings-panel { grid-column:2; grid-row:2; min-width:0; min-height:0; padding:1.55rem 2rem 2.5rem; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scroll-padding-block:1.55rem 2.5rem; scrollbar-gutter:stable; -webkit-overflow-scrolling:touch; }
.settings-panel > *, .profile-photo > div, .security-method > div, .switch-row > span, .admin-entry > div { min-width:0; }
.settings-actions { position:relative; z-index:auto; bottom:auto; grid-column:2; grid-row:3; box-sizing:border-box; min-width:0; margin:0; padding:1rem 2rem max(1.5rem,env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); background:linear-gradient(0deg,#101631 82%,rgba(16,22,49,.98)); box-shadow:0 -12px 28px rgba(2,5,18,.18); }
.settings-actions[hidden] { display:none; }
.settings-actions:empty { display:none; }
.settings-actions .profile-save-dock { display:grid; gap:.4rem; width:100%; margin:0; padding:0; border:0; background:transparent; }
.timeline-beta-grid { display:grid; gap:1rem; min-width:0; }
.timeline-download-card,.timeline-stats { min-width:0; padding:clamp(1rem,2.1vw,1.55rem); }
.timeline-download-card { overflow:hidden; }
.timeline-download-card h2,.timeline-stats h2 { margin:.12rem 0 .4rem; font-family:Georgia,serif; }
.timeline-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.timeline-section-heading>div { min-width:0; }
.timeline-section-heading p:last-child,.timeline-download-card p:last-child { margin:.2rem 0 0; color:var(--muted); line-height:1.5; }
.timeline-private-chip { flex:0 0 auto; padding:.4rem .65rem; border:1px solid rgba(92,226,174,.25); border-radius:999px; color:#baf7df; background:rgba(39,147,111,.1); font-size:.65rem; font-weight:850; letter-spacing:.04em; white-space:nowrap; }
.timeline-preview { min-width:0; margin-top:1rem; padding:.9rem .85rem .55rem; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,rgba(9,18,47,.82),rgba(7,12,34,.68)); }
.timeline-preview>header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:0 .15rem .55rem; border-bottom:1px solid rgba(97,133,193,.14); }
.timeline-preview>header>div { min-width:0; }
.timeline-preview h3 { margin:.12rem 0 0; font-family:Georgia,serif; font-size:clamp(1.05rem,1.8vw,1.35rem); }
.timeline-preview>header p:last-child { margin:.2rem 0 0; color:var(--muted); font-size:.7rem; line-height:1.4; }
.timeline-carousel { display:grid; grid-template-columns:40px minmax(0,1fr) 40px; align-items:center; gap:.55rem; margin-top:.75rem; min-width:0; }
.timeline-arrow { display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid var(--line-strong); border-radius:13px; color:var(--text); background:rgba(29,48,99,.72); font:700 1.6rem/1 Georgia,serif; cursor:pointer; transition:transform .18s ease,opacity .18s ease,background .18s ease; }
.timeline-arrow:hover:not(:disabled),.timeline-arrow:focus-visible { transform:translateY(-1px); background:rgba(43,77,151,.82); }
.timeline-arrow:disabled { opacity:.28; cursor:default; }
.timeline-viewport { min-width:0; padding-bottom:.2rem; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:thin; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.timeline-feed { position:relative; display:flex; align-items:stretch; gap:.34rem; min-width:max-content; min-height:164px; padding:.45rem .35rem .55rem; }
.timeline-feed:not(.is-empty)::before { content:""; position:absolute; top:2.45rem; left:2rem; right:2rem; height:2px; background:linear-gradient(90deg,rgba(88,221,255,.12),rgba(88,221,255,.72),rgba(224,188,98,.56),rgba(88,221,255,.12)); }
.timeline-feed.is-empty { display:grid; place-items:center; width:100%; min-width:100%; }
.timeline-empty { display:grid; place-items:center; gap:.18rem; min-height:132px; padding:.75rem; text-align:center; color:var(--muted); }
.timeline-empty>span { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--line-strong); border-radius:50%; color:var(--cyan); background:rgba(47,130,255,.12); font-size:.95rem; }
.timeline-empty strong { color:var(--text); }
.timeline-empty p { margin:0; }
.timeline-event { position:relative; flex:0 0 118px; min-width:0; scroll-snap-align:center; }
.timeline-node { position:relative; display:grid; align-content:start; justify-items:center; gap:.26rem; width:100%; min-height:150px; padding:.05rem .28rem .45rem; border:0; color:var(--text); background:transparent; text-align:center; cursor:pointer; }
.timeline-avatar { position:relative; z-index:1; display:grid; place-items:center; width:50px; height:50px; border:2px solid rgba(88,221,255,.6); border-radius:50%; overflow:visible; background:var(--surface-strong); box-shadow:0 0 0 3px rgba(6,14,36,.9),0 7px 18px rgba(0,0,0,.26); }
.timeline-avatar img,.timeline-avatar-fallback { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.timeline-avatar-fallback { display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#21488f,#563b99); font-weight:900; font-size:1rem; }
.timeline-avatar i { position:absolute; right:-6px; bottom:-4px; display:grid; place-items:center; width:21px; height:21px; border:2px solid #111832; border-radius:50%; color:var(--cyan); background:#1c2f63; font-style:normal; font-size:.65rem; }
.timeline-avatar .timeline-class-icon img { width:15px; height:15px; border-radius:0; object-fit:contain; }
.timeline-death .timeline-avatar { border-color:rgba(255,117,141,.72); }.timeline-death .timeline-avatar i { color:#ffe1e7; background:#8b2941; }
.timeline-epic_loot .timeline-avatar { border-color:rgba(177,140,255,.78); }.timeline-epic_loot .timeline-avatar i { color:#f2eaff; background:#6845aa; }
.timeline-achievement .timeline-avatar { border-color:rgba(224,188,98,.78); }.timeline-achievement .timeline-avatar i { color:#fff0ba; background:#735a21; }
.timeline-node-copy { display:grid; justify-items:center; gap:.1rem; width:100%; padding-top:.16rem; }
.timeline-node-copy strong { display:-webkit-box; max-width:100%; min-height:2.1em; overflow:hidden; font-size:.74rem; line-height:1.08; overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.timeline-node-copy>span { display:-webkit-box; max-width:100%; min-height:2.35em; overflow:hidden; color:var(--muted); font-size:.68rem; line-height:1.2; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.timeline-node time { color:var(--muted-2); font-size:.62rem; font-weight:750; }
.timeline-popover { display:none; }
.timeline-floating-popover { position:fixed; z-index:240; display:grid; gap:.34rem; width:min(320px,calc(100vw - 24px)); max-height:min(380px,calc(100dvh - 24px)); padding:.85rem; overflow:auto; overscroll-behavior:contain; border:1px solid var(--line-strong); border-radius:16px; color:var(--text); background:rgba(10,16,43,.985); box-shadow:0 18px 52px rgba(0,0,0,.48); pointer-events:auto; scrollbar-gutter:stable; -webkit-overflow-scrolling:touch; }
.timeline-floating-popover[hidden] { display:none; }
.timeline-floating-popover b { color:var(--cyan); font-size:.61rem; letter-spacing:.09em; text-transform:uppercase; }
.timeline-floating-popover>span { color:var(--muted); font-size:.72rem; line-height:1.35; }
.timeline-floating-popover .timeline-popover-icons { display:flex; align-items:center; gap:.3rem; min-height:24px; }
.timeline-floating-popover .timeline-popover-icons>img { width:24px; height:24px; object-fit:contain; }
.timeline-floating-popover .timeline-popover-icons .combat-role-badge { padding:0; border:0; background:transparent; }
.timeline-floating-popover .timeline-popover-icons .combat-role-badge>span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.timeline-preview>header { align-items:center; padding-bottom:.38rem; }
.timeline-preview h3 { margin:0; }
.timeline-carousel { margin-top:.5rem; }
.timeline-feed { min-height:150px; }
.timeline-node { min-height:140px; }
.timeline-avatar .timeline-event-icon { right:-9px; bottom:-6px; width:28px; height:28px; border-width:2px; font-size:1.12rem; font-weight:900; line-height:24px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.4); }
.timeline-event,.chronicle-entry { --timeline-class-rgb:88,221,255; }
.timeline-event.class-warrior,.chronicle-entry.class-warrior { --timeline-class-rgb:176,118,72; }
.timeline-event.class-mage,.chronicle-entry.class-mage { --timeline-class-rgb:62,158,229; }
.timeline-event.class-paladin,.chronicle-entry.class-paladin { --timeline-class-rgb:224,104,166; }
.timeline-event.class-druid,.chronicle-entry.class-druid { --timeline-class-rgb:255,129,28; }
.timeline-event.class-hunter,.chronicle-entry.class-hunter { --timeline-class-rgb:145,198,100; }
.timeline-event.class-priest,.chronicle-entry.class-priest { --timeline-class-rgb:229,229,238; }
.timeline-event.class-rogue,.chronicle-entry.class-rogue { --timeline-class-rgb:238,211,70; }
.timeline-event.class-shaman,.chronicle-entry.class-shaman { --timeline-class-rgb:72,155,234; }
.timeline-event.class-warlock,.chronicle-entry.class-warlock { --timeline-class-rgb:172,117,220; }
.timeline-event .timeline-node-copy strong,.chronicle-entry .chronicle-entry-copy header strong { color:rgb(var(--timeline-class-rgb)); }
.timeline-event .timeline-avatar { box-shadow:0 0 0 3px rgba(6,14,36,.9),0 0 0 5px rgba(var(--timeline-class-rgb),.38),0 7px 18px rgba(0,0,0,.26); }
.timeline-main-star { display:inline; color:var(--gold); font-size:.82rem; }
.timeline-download-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.95fr); align-items:center; gap:1.15rem; }
.timeline-download-card>div:first-child { min-width:0; }
.timeline-account-card { display:grid; gap:.7rem; margin-bottom:.65rem; padding:.9rem; border:1px solid var(--line); border-radius:15px; background:linear-gradient(135deg,rgba(47,130,255,.08),rgba(149,106,255,.05)); }
.timeline-account-card.is-highlighted { border-color:rgba(88,221,255,.7); box-shadow:0 0 0 3px rgba(88,221,255,.1),0 16px 34px rgba(0,0,0,.16); }
.timeline-account-downloads { display:grid; gap:.6rem; padding:.75rem; border:1px solid rgba(88,221,255,.16); border-radius:13px; background:rgba(7,15,39,.42); }
.timeline-account-downloads>div:first-child { display:grid; gap:.15rem; }
.timeline-account-downloads>div:first-child small { color:var(--muted); line-height:1.4; }
.timeline-account-heading { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:.75rem; }
.timeline-account-heading>div { display:grid; gap:.15rem; min-width:0; }
.timeline-account-heading small { color:var(--muted); line-height:1.4; }
.timeline-device-list { min-width:0; }
.timeline-pair-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.6rem; }
.timeline-pair-row input,.timeline-pair-row button { min-width:0; min-height:48px; }
.timeline-pair-row input { width:100%; text-transform:uppercase; letter-spacing:.12em; }
.timeline-pair-row button { padding-inline:1rem; }
.timeline-device-list { display:grid; gap:.55rem; margin:.1rem 0 0; }
.timeline-device-list article { display:flex; align-items:center; justify-content:space-between; gap:.6rem; min-width:0; padding:.65rem .75rem; border:1px solid var(--line); border-radius:14px; background:rgba(5,10,34,.45); }
.timeline-device-list article>div { min-width:0; }
.timeline-device-list strong,.timeline-device-list small { display:block; overflow-wrap:anywhere; }
.timeline-device-list small { margin-top:.15rem; color:var(--muted); }
.timeline-delete-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:.25rem; padding-top:.75rem; border-top:1px solid var(--line); }
.timeline-delete-row>div { display:grid; gap:.16rem; min-width:0; }
.timeline-delete-row small { color:var(--muted); line-height:1.4; }
.timeline-delete-row .danger { color:#ff9aaa; border-color:rgba(255,117,141,.35); }
.timeline-character-history { display:grid; gap:.55rem; padding-top:.72rem; border-top:1px solid var(--line); }
.timeline-character-history>div:first-child { display:grid; gap:.14rem; }
.timeline-character-history small { color:var(--muted); line-height:1.4; }
.timeline-character-history-list { display:grid; gap:.45rem; }
.timeline-character-history-list article { display:flex; align-items:center; justify-content:space-between; gap:.65rem; min-width:0; padding:.58rem .65rem; border:1px solid var(--line); border-radius:12px; background:rgba(10,22,53,.42); }
.timeline-character-history-list article>div:first-child { display:grid; min-width:0; gap:.1rem; }
.timeline-character-history-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.4rem; }
.timeline-character-history-actions .danger { color:#ff9aaa; border-color:rgba(255,117,141,.35); }
@media (max-width:680px) { .timeline-character-history-list article { align-items:stretch; flex-direction:column; }.timeline-character-history-actions { justify-content:flex-start; } }
@media (max-width: 680px) { .timeline-delete-row { align-items:stretch; flex-direction:column; }.timeline-delete-row button { width:100%; } }
.timeline-downloads { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; min-width:0; }
.install-platform-card { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:.7rem; min-width:0; min-height:72px; padding:.75rem; border:1px solid rgba(88,221,255,.2); border-radius:16px; color:var(--text); background:linear-gradient(145deg,rgba(22,51,105,.72),rgba(20,26,66,.84)); text-align:left; cursor:pointer; box-shadow:0 10px 24px rgba(0,0,0,.16); transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.install-platform-card:hover,.install-platform-card:focus-visible { transform:translateY(-2px); border-color:rgba(88,221,255,.62); background:linear-gradient(145deg,rgba(29,69,132,.84),rgba(44,35,99,.92)); }
.install-platform-card>span:nth-child(2) { display:grid; gap:.12rem; min-width:0; }
.install-platform-card strong,.install-platform-card small { display:block; overflow-wrap:anywhere; }
.install-platform-card strong { color:#fff; font-size:.82rem; }
.install-platform-card small { color:var(--muted); font-size:.62rem; line-height:1.35; }
.install-platform-card>b { color:var(--cyan); font:700 1.3rem/1 Georgia,serif; }
.install-platform-icon { display:grid; place-items:center; width:42px; height:42px; padding:0; border:1px solid rgba(88,221,255,.3); border-radius:13px; color:#eafcff; background:rgba(7,16,44,.66); box-shadow:inset 0 0 18px rgba(88,221,255,.08); }
.windows-mark { grid-template-columns:repeat(2,8px); grid-template-rows:repeat(2,8px); gap:2px; }
.windows-mark i { width:8px; height:8px; background:linear-gradient(135deg,#6deaff,#4291ff); }
.mac-mark { font-size:1.3rem; font-weight:900; }
.timeline-downloads .is-disabled { opacity:.52; cursor:not-allowed; border-style:dashed; }
@media (max-width: 980px) { .timeline-section-heading { align-items:center; }.timeline-download-card { grid-template-columns:1fr; }.timeline-downloads { margin-top:.25rem; } }
@media (max-width: 680px) { .timeline-download-card,.timeline-stats { padding:1rem; }.timeline-stats { padding-bottom:1.1rem; }.timeline-section-heading { display:grid; }.timeline-private-chip { justify-self:start; }.timeline-preview { padding:.75rem .55rem .45rem; border-radius:15px; }.timeline-preview>header { display:grid; gap:.35rem; padding-inline:.2rem; }.timeline-preview .chronicle-live-dot { justify-self:start; }.timeline-carousel { grid-template-columns:36px minmax(0,1fr) 36px; gap:.25rem; margin-bottom:.2rem; }.timeline-arrow { width:36px; height:36px; border-radius:11px; }.timeline-event { flex-basis:102px; }.timeline-avatar { width:46px; height:46px; }.timeline-node { min-height:144px; }.timeline-node-copy strong { font-size:.7rem; }.timeline-node-copy>span { font-size:.65rem; }.timeline-pair-row { grid-template-columns:1fr; }.timeline-pair-row button { width:100%; }.timeline-downloads { grid-template-columns:1fr; }.timeline-feed { min-height:156px; padding-bottom:.55rem; } }

.install-guide-dialog { position:fixed; inset:auto; top:50%; left:50%; box-sizing:border-box; width:min(960px,calc(100vw - 2rem)); max-width:none; height:auto; max-height:min(700px,calc(100vh - 2rem)); max-height:min(700px,calc(100dvh - 2rem)); margin:0; border-radius:24px; transform:translate(-50%,-50%); }
.install-guide-shell { display:grid; grid-template-rows:auto minmax(0,1fr) auto; width:100%; height:auto; max-height:min(700px,calc(100vh - 2rem)); max-height:min(700px,calc(100dvh - 2rem)); min-height:0; }
.install-guide-shell>header,.install-guide-shell>footer { box-sizing:border-box; width:100%; min-width:0; }
.install-guide-shell>header { position:relative; z-index:2; top:auto; bottom:auto; margin:0; padding:1.05rem 1.25rem; background:linear-gradient(135deg,rgba(20,31,69,.98),rgba(13,22,51,.98)); }
.install-guide-shell>header .close-button { flex:0 0 38px; }
.install-guide-heading { display:grid; grid-template-columns:58px minmax(0,1fr); align-items:center; gap:.9rem; min-width:0; }
.install-guide-heading img { width:58px; height:58px; padding:.55rem; border:1px solid rgba(88,221,255,.24); border-radius:17px; background:rgba(21,52,104,.62); object-fit:contain; }
.install-guide-heading>div { min-width:0; }
.install-guide-heading h2 { margin:.08rem 0 .2rem; font-family:Georgia,serif; font-size:clamp(1.35rem,3vw,2rem); }
.install-guide-heading p:last-child { margin:0; color:var(--muted); font-size:.72rem; }
.install-guide-body { min-width:0; min-height:0; padding:1rem 1.25rem 1.2rem; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; -webkit-overflow-scrolling:touch; }
.install-guide-platform { display:grid; gap:1rem; }
.install-guide-platform[hidden] { display:none; }
.install-guide-notice { display:grid; grid-template-columns:42px minmax(0,1fr); gap:.75rem; align-items:start; padding:.85rem; border:1px solid rgba(224,188,98,.25); border-radius:16px; background:linear-gradient(135deg,rgba(78,55,21,.24),rgba(21,35,74,.56)); }
.install-guide-notice>span { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; color:#ffe2a0; background:rgba(224,188,98,.13); font-size:1.15rem; }
.install-guide-notice strong { color:#fff0c3; font-size:.78rem; }
.install-guide-notice p { margin:.25rem 0 0; color:var(--muted); font-size:.68rem; line-height:1.48; }
.install-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin:0; padding:0; list-style:none; counter-reset:none; }
.install-steps>li { display:grid; grid-template-columns:32px minmax(0,1fr); align-content:start; gap:.65rem; min-width:0; padding:.85rem; border:1px solid var(--line); border-radius:17px; background:linear-gradient(145deg,rgba(11,24,57,.94),rgba(10,16,43,.8)); }
.install-steps>li>span { display:grid; place-items:center; width:32px; height:32px; border:1px solid rgba(88,221,255,.42); border-radius:11px; color:var(--cyan); background:rgba(47,130,255,.13); font-weight:900; }
.install-steps>li>div { display:grid; align-content:start; gap:.38rem; min-width:0; }
.install-steps strong { color:#fff; font-size:.76rem; line-height:1.25; }
.install-steps p { margin:0; color:var(--muted); font-size:.64rem; line-height:1.5; }
.install-steps p b { color:#dfeaff; }
.install-mini-visual { display:grid; gap:.28rem; min-height:78px; margin-top:.25rem; padding:.55rem; overflow:hidden; border:1px solid rgba(88,221,255,.13); border-radius:11px; background:#09112b; font-size:.54rem; font-style:normal; }
.install-mini-visual i,.install-mini-visual b,.install-mini-visual em { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-style:normal; }
.install-mini-visual i { color:var(--muted-2); }
.install-mini-visual b { color:#e9f3ff; }
.install-mini-visual em { justify-self:start; padding:.26rem .42rem; border-radius:7px; color:#07142c; background:linear-gradient(135deg,var(--cyan),#8edbb8); font-weight:900; }
.windows-warning em { background:linear-gradient(135deg,#48a8ff,#7d75f4); color:#fff; }
.mac-warning em { background:#eef2f7; color:#101522; }
.mac-dmg { grid-template-columns:1fr auto; align-items:center; }
.mac-dmg i { grid-column:1/-1; }
.mac-dmg em { background:rgba(88,221,255,.16); color:#bdf7ff; }
.install-guide-actions { position:relative; z-index:2; top:auto; bottom:auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin:0; padding:.85rem 1.25rem max(.85rem,env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); background:#101631; }
.install-guide-actions p { margin:0; color:var(--muted); font-size:.64rem; }
.install-guide-actions p span { color:var(--cyan); }
.install-guide-actions>div { display:flex; align-items:center; justify-content:flex-end; gap:.55rem; }
.install-guide-actions a { display:inline-flex; align-items:center; justify-content:center; min-height:42px; text-decoration:none; }
.install-guide-actions .install-guide-footnote { flex:0 0 auto; width:100%; min-width:0; text-align:center; line-height:1.5; font-size:.64rem; }
.install-guide-actions .install-guide-footnote[hidden] { display:none; }
.install-guide-actions .install-guide-footnote a { display:inline; width:auto; min-height:0; padding:0; font-size:inherit; text-decoration:underline; }
@media (max-width:760px) { .install-guide-dialog { width:calc(100vw - 1rem); max-height:calc(100vh - 1rem); max-height:calc(100dvh - 1rem); border-radius:20px; }.install-guide-shell { max-height:calc(100vh - 1rem); max-height:calc(100dvh - 1rem); }.install-steps { grid-template-columns:1fr; }.install-guide-actions { align-items:stretch; flex-direction:column; gap:.55rem; padding:.65rem .85rem max(.65rem,env(safe-area-inset-bottom,0px)); }.install-guide-actions>div { display:grid; grid-template-columns:minmax(90px,.75fr) minmax(0,1.35fr); }.install-guide-actions button,.install-guide-actions a { width:100%; min-width:0; }.install-guide-body { padding:.85rem; scrollbar-gutter:auto; }.install-guide-shell>header { padding:.85rem; } }
@media (max-width:420px) { .install-guide-dialog { width:100vw; max-height:100vh; max-height:100dvh; border-radius:0; }.install-guide-shell { max-height:100vh; max-height:100dvh; }.install-guide-heading { grid-template-columns:44px minmax(0,1fr); }.install-guide-heading img { width:44px; height:44px; padding:.4rem; border-radius:13px; }.install-guide-heading p:last-child { display:none; }.install-guide-actions p { text-align:center; }.install-guide-actions a,.install-guide-actions button { padding-inline:.65rem; font-size:.72rem; } }
@media (max-height:720px) and (min-width:761px) { .install-guide-dialog,.install-guide-shell { max-height:calc(100vh - 1rem); max-height:calc(100dvh - 1rem); }.install-guide-shell>header { padding:.75rem 1rem; }.install-guide-heading { grid-template-columns:46px minmax(0,1fr); }.install-guide-heading img { width:46px; height:46px; padding:.4rem; border-radius:14px; }.install-guide-heading p:last-child { display:none; }.install-guide-body { padding:.8rem 1rem; }.install-guide-actions { padding:.65rem 1rem max(.65rem,env(safe-area-inset-bottom,0px)); } }
@media (prefers-reduced-motion:reduce) { .install-platform-card { transition:none; } }
@media (prefers-reduced-motion: reduce) { .timeline-arrow { transition:none; }.timeline-viewport { scroll-behavior:auto; } }
.chronicle-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.78fr); align-items:start; gap:1rem; margin-top:1rem; min-width:0; }
.chronicle-stream,.chronicle-summary { min-width:0; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,rgba(9,18,47,.82),rgba(7,12,34,.68)); }
.news-timeline-preview { margin:1.05rem 0 .45rem; }
.news-timeline-preview>header>div { display:grid; gap:.12rem; }
.news-timeline-preview>header h2 { margin:0; font-family:var(--display); font-size:clamp(1.35rem,2.4vw,2rem); font-weight:500; }
.chronicle-community { display:grid; gap:1rem; }
.chronicle-heading-actions { display:grid; justify-items:end; align-content:start; gap:.48rem; }
.chronicle-help-button { display:inline-flex; align-items:center; gap:.46rem; min-height:36px; padding:.48rem .7rem; border:1px solid rgba(88,221,255,.22); border-radius:12px; color:#c8eaff; background:linear-gradient(135deg,rgba(34,82,134,.34),rgba(32,37,89,.62)); font-size:.65rem; font-weight:800; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.13); }
.chronicle-help-button>span { display:grid; place-items:center; width:22px; height:22px; border-radius:8px; color:#07142c; background:linear-gradient(135deg,var(--cyan),#7edbbb); font-weight:900; }
.chronicle-help-button:hover,.chronicle-help-button:focus-visible { border-color:rgba(88,221,255,.62); transform:translateY(-1px); }
.chronicle-help-dialog { box-sizing:border-box; width:min(680px,calc(100vw - 2rem)); max-width:none; max-height:calc(100vh - 2rem); max-height:calc(100dvh - 2rem); margin:auto; overflow:hidden; border-radius:22px; }
.chronicle-help-shell { display:grid; grid-template-rows:auto minmax(0,1fr); max-height:inherit; }
.chronicle-help-shell>header { position:relative; top:auto; margin:0; padding:1.1rem 1.2rem; background:linear-gradient(135deg,rgba(20,31,69,.98),rgba(13,22,51,.98)); }
.chronicle-help-heading { display:grid; grid-template-columns:54px minmax(0,1fr); align-items:center; gap:.8rem; min-width:0; }
.chronicle-help-heading img { width:54px; height:54px; padding:.48rem; border:1px solid rgba(88,221,255,.24); border-radius:16px; background:rgba(21,52,104,.62); object-fit:contain; }
.chronicle-help-heading>div { min-width:0; }
.chronicle-help-heading h2 { margin:.08rem 0 .18rem; font-family:Georgia,serif; font-size:clamp(1.25rem,3vw,1.8rem); }
.chronicle-help-heading p:last-child { margin:0; color:var(--muted); font-size:.68rem; line-height:1.4; }
.chronicle-help-body { min-height:0; padding:1rem 1.2rem 1.2rem; overflow:auto; }
.chronicle-help-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; margin:0; padding:0; list-style:none; }
.chronicle-help-steps li { display:grid; grid-template-columns:30px minmax(0,1fr); align-content:start; gap:.55rem; min-width:0; padding:.72rem; border:1px solid var(--line); border-radius:14px; background:linear-gradient(145deg,rgba(11,24,57,.94),rgba(10,16,43,.8)); }
.chronicle-help-steps li>span { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; color:var(--cyan); background:rgba(47,130,255,.15); font-weight:900; }
.chronicle-help-steps strong { color:#fff; font-size:.72rem; line-height:1.25; }
.chronicle-help-steps p { margin:.25rem 0 0; color:var(--muted); font-size:.62rem; line-height:1.45; }
.chronicle-help-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; margin-top:.85rem; }
.chronicle-help-links>button { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:.62rem; min-width:0; min-height:62px; padding:.7rem .8rem; text-align:left; }
.chronicle-help-links>button>span:first-child { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:rgba(88,221,255,.12); font-size:1rem; }
.chronicle-help-links>button>span:nth-child(2) { display:grid; gap:.08rem; min-width:0; }
.chronicle-help-links strong,.chronicle-help-links small { display:block; overflow-wrap:anywhere; }
.chronicle-help-links small { color:var(--muted); font-size:.58rem; font-weight:600; }
.chronicle-help-links b { font-size:1.25rem; }
.chronicle-stream { padding:1rem; }
.chronicle-stream>header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 .15rem .85rem; border-bottom:1px solid var(--line); }
.chronicle-character-filter { display:grid; gap:.25rem; min-width:0; max-width:100%; color:var(--muted); font-size:.64rem; font-weight:800; }
.chronicle-character-picker { display:grid; grid-template-columns:minmax(0,230px) 38px; gap:.4rem; align-items:center; }
.chronicle-character-filter select,.chronicle-character-search-box input { width:100%; min-width:0; min-height:38px; padding:.35rem .65rem; border:1px solid var(--line); border-radius:10px; color:var(--text); background:#101a3a; font:inherit; font-size:.72rem; }
.chronicle-character-search-toggle { display:grid; place-items:center; width:38px; height:38px; padding:0; border:1px solid rgba(88,221,255,.32); border-radius:10px; color:var(--cyan); background:rgba(18,35,76,.9); cursor:pointer; }
.chronicle-character-search-toggle:hover,.chronicle-character-search-toggle[aria-expanded="true"] { border-color:var(--cyan); background:rgba(31,77,120,.92); }
.chronicle-character-search-toggle span { font-size:.9rem; line-height:1; }
.chronicle-character-search-box { grid-column:1/-1; }
.chronicle-character-search-box[hidden] { display:none; }
.chronicle-stream h3,.chronicle-summary h3 { margin:.12rem 0 0; font-family:Georgia,serif; font-size:clamp(1.2rem,2vw,1.55rem); }
.chronicle-live-dot { display:inline-flex; align-items:center; gap:.42rem; flex:0 0 auto; color:var(--muted); font-size:.65rem; font-weight:800; }
.chronicle-live-dot i { width:8px; height:8px; border-radius:50%; background:#55e6b1; box-shadow:0 0 0 4px rgba(85,230,177,.1); }
.chronicle-feed { position:relative; display:grid; min-width:0; }
.chronicle-feed::before { content:""; position:absolute; top:1rem; bottom:1rem; left:18px; width:2px; background:linear-gradient(180deg,rgba(88,221,255,.12),rgba(88,221,255,.65),rgba(224,188,98,.42),rgba(88,221,255,.08)); }
.chronicle-feed.is-empty::before { display:none; }
.chronicle-entry { position:relative; display:block; min-width:0; padding:.1rem .2rem; border-bottom:1px solid rgba(97,133,193,.14); }
.chronicle-entry>summary { display:grid; grid-template-columns:36px 50px minmax(0,1fr); align-items:center; gap:.7rem; min-width:0; padding:.75rem 0; cursor:pointer; list-style:none; border-radius:14px; }
.chronicle-entry>summary::-webkit-details-marker { display:none; }
.chronicle-entry>summary:hover,.chronicle-entry[open]>summary { background:rgba(34,70,130,.14); }
.chronicle-entry-details { display:grid; gap:.55rem; margin:0 0 .75rem 86px; padding:.7rem .8rem; border:1px solid rgba(88,221,255,.16); border-radius:14px; background:rgba(7,15,39,.48); }
.chronicle-entry-details>p { margin:0; color:var(--muted); font-size:.72rem; }
.chronicle-detail-hint { color:var(--muted-2); font-size:.59rem; font-weight:700; }
.chronicle-level-badge { display:inline-flex; align-items:center; margin-left:.35rem; padding:.12rem .42rem; border:1px solid rgba(88,221,255,.36); border-radius:999px; color:#8eeeff; background:rgba(35,111,156,.2); font-family:Inter,sans-serif; font-size:.58rem; vertical-align:middle; white-space:nowrap; }
.timeline-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem; min-width:0; }
.timeline-detail-grid>span { display:grid; gap:.12rem; min-width:0; padding:.45rem .52rem; border:1px solid rgba(102,141,206,.18); border-radius:10px; background:rgba(14,27,62,.66); }
.timeline-detail-grid small { color:var(--muted-2); font-size:.54rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.timeline-detail-grid strong { color:var(--text); font-size:.68rem; line-height:1.3; overflow-wrap:anywhere; }
.timeline-floating-popover .timeline-detail-grid { grid-template-columns:1fr; max-height:210px; overflow:auto; }
.chronicle-group-leader { display:inline-flex; align-items:center; margin-left:.3rem; padding:.1rem .35rem; border:1px solid rgba(224,188,98,.35); border-radius:999px; color:#f3d77f; font-size:.55rem; }
.timeline-group-summary { display:grid; gap:.5rem; min-width:0; }
.timeline-group-summary>b { color:#ffb2bd; font-size:.7rem; }
.timeline-group-members { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem; }
.timeline-group-member { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:.45rem; min-width:0; padding:.38rem .45rem; border:1px solid rgba(102,141,206,.17); border-radius:11px; background:rgba(14,27,62,.68); }
.timeline-group-member-avatar { display:grid; place-items:center; width:32px; height:32px; overflow:hidden; border-radius:9px; background:#172650; }
.timeline-group-member-avatar>img,.timeline-group-member-avatar>.timeline-avatar-fallback { width:100%; height:100%; object-fit:cover; }
.timeline-group-member-copy { display:grid; gap:.15rem; min-width:0; }
.timeline-group-member-copy>strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-size:.68rem; }
.timeline-group-member-copy>strong i { color:#f3d77f; font-style:normal; }
.timeline-group-member-copy>span { display:flex; align-items:center; gap:.2rem; }
.timeline-group-member-copy>span>img { width:18px; height:18px; object-fit:contain; }
.timeline-group-member-copy .combat-role-badge { padding:0; border:0; background:transparent; }
.timeline-group-member-copy .combat-role-badge>span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.timeline-group-member>time { color:var(--muted-2); font-size:.58rem; }
.timeline-group-member.is-compact { grid-template-columns:24px minmax(0,1fr); padding:.25rem; }
.timeline-group-member.is-compact .timeline-group-member-avatar { width:24px; height:24px; border-radius:7px; }
.timeline-group-member.is-compact>time { display:none; }
.timeline-group-member.is-compact .timeline-group-member-copy>span { display:none; }
.timeline-floating-popover .timeline-group-members { grid-template-columns:1fr; max-height:190px; overflow:auto; }
.chronicle-feed-more { display:block; margin:.8rem auto .15rem; width:min(100%,340px); }
.chronicle-entry:last-child { border-bottom:0; }
.chronicle-entry-marker { position:relative; z-index:1; display:grid; place-items:center; width:36px; height:36px; border:1px solid rgba(88,221,255,.3); border-radius:50%; color:var(--cyan); background:#111d43; font-size:.82rem; box-shadow:0 0 0 4px rgba(7,13,36,.92); }
.chronicle-entry.timeline-death .chronicle-entry-marker { color:#ffd5dd; border-color:rgba(255,117,141,.45); background:#5d2135; }
.chronicle-entry.timeline-achievement .chronicle-entry-marker { color:#fff0ba; border-color:rgba(224,188,98,.5); background:#5c491f; }
.chronicle-entry.timeline-epic_loot .chronicle-entry-marker { color:#f0e7ff; border-color:rgba(177,140,255,.55); background:#4b337c; }
.chronicle-entry.is-legendary .chronicle-entry-marker { color:#fff3b2; border-color:rgba(255,211,82,.78); background:#725519; box-shadow:0 0 0 4px rgba(7,13,36,.92),0 0 20px rgba(255,211,82,.2); }
.chronicle-entry-avatar { position:relative; display:grid; place-items:center; width:46px; height:46px; border:1px solid rgba(88,221,255,.42); border-radius:14px; overflow:visible; background:var(--surface-strong); }
.chronicle-entry-avatar>img,.chronicle-entry-avatar>.timeline-avatar-fallback { width:100%; height:100%; border-radius:13px; object-fit:cover; }
.chronicle-entry-avatar i { position:absolute; right:-6px; bottom:-5px; display:grid; place-items:center; width:21px; height:21px; border:2px solid #111832; border-radius:50%; background:#1c2f63; }
.chronicle-entry-avatar i img { width:14px; height:14px; object-fit:contain; }
.chronicle-entry-copy { display:grid; gap:.2rem; min-width:0; }
.chronicle-entry-copy header { display:flex; align-items:center; justify-content:space-between; gap:.75rem; min-width:0; }
.chronicle-entry-copy header>div { display:flex; align-items:center; gap:.45rem; min-width:0; }
.chronicle-entry-copy header strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.8rem; }
.chronicle-entry-copy time { flex:0 0 auto; color:var(--muted-2); font-size:.65rem; }
.chronicle-entry-copy header>.chronicle-entry-meta { display:grid; justify-items:end; gap:.18rem; flex:0 0 auto; min-width:0; text-align:right; }
.chronicle-kind { display:inline-flex; align-items:center; min-height:20px; padding:.12rem .45rem; border:1px solid rgba(88,221,255,.28); border-radius:999px; color:#89e7f1; background:rgba(88,221,255,.1); font-size:.59rem; font-weight:850; white-space:nowrap; }
.timeline-death .chronicle-kind { color:#ffd8df; border-color:rgba(255,117,141,.38); background:rgba(139,41,65,.22); }
.timeline-achievement .chronicle-kind { color:#ffe8a0; border-color:rgba(224,188,98,.42); background:rgba(115,90,33,.24); }
.timeline-epic_loot .chronicle-kind { color:#e8d9ff; border-color:rgba(177,140,255,.42); background:rgba(104,69,170,.22); }
.chronicle-entry-copy h4 { margin:0; overflow-wrap:anywhere; font-size:.85rem; line-height:1.3; }
.chronicle-entry-copy p { margin:0; color:var(--muted); font-size:.7rem; line-height:1.35; overflow-wrap:anywhere; }
.chronicle-entry-roles { display:inline-flex; align-items:center; gap:.18rem; flex:0 0 auto; }
.chronicle-entry-roles .combat-role-badge { padding:0; border:0; background:transparent; }
.chronicle-entry-roles .combat-role-badge>span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.chronicle-main-star { color:var(--gold); }
.chronicle-entry-badges { display:flex; flex-wrap:wrap; gap:.32rem; margin-top:.16rem; }
.chronicle-entry-badges>span { display:inline-flex; align-items:center; min-height:23px; padding:.2rem .44rem; border:1px solid var(--line); border-radius:999px; font-size:.6rem; font-weight:800; }
.chronicle-streak-badge { color:#ffd8df; border-color:rgba(255,117,141,.3)!important; background:rgba(139,41,65,.16); }
.chronicle-unlocked-title { color:#fff0ba; border-color:rgba(224,188,98,.32)!important; background:rgba(115,90,33,.16); }
.chronicle-legendary-badge { color:#fff2ad; border-color:rgba(255,211,82,.4)!important; background:rgba(114,85,25,.22); }
.chronicle-summary { position:sticky; top:1rem; display:grid; gap:.85rem; padding:1rem; }
.chronicle-summary>header p:last-child { margin:.35rem 0 0; color:var(--muted); font-size:.69rem; line-height:1.4; }
.chronicle-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem; }
.chronicle-kpis article { display:grid; justify-items:center; gap:.08rem; min-width:0; padding:.62rem .25rem; border:1px solid var(--line); border-radius:13px; background:rgba(20,35,79,.5); text-align:center; }
.chronicle-kpis article>span { color:var(--cyan); font-size:.75rem; }
.chronicle-kpis strong { font:700 1.25rem/1 Georgia,serif; }
.chronicle-kpis small { color:var(--muted); font-size:.56rem; line-height:1.15; }
.chronicle-highlight { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:.7rem; padding:.75rem; border:1px solid rgba(224,188,98,.3); border-radius:14px; background:linear-gradient(135deg,rgba(115,90,33,.22),rgba(86,59,153,.13)); }
.chronicle-highlight-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:#fff0ba; background:rgba(224,188,98,.14); }
.chronicle-highlight div { display:grid; gap:.12rem; min-width:0; }
.chronicle-highlight small { color:var(--muted); font-size:.59rem; text-transform:uppercase; letter-spacing:.08em; }
.chronicle-highlight strong,.chronicle-highlight b { overflow-wrap:anywhere; }
.chronicle-highlight strong { font-size:.76rem; }
.chronicle-highlight b { color:#fff0ba; font-size:.65rem; line-height:1.35; }
.chronicle-ranking { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:rgba(5,10,34,.4); }
.chronicle-ranking-title { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.65rem .7rem; border-bottom:1px solid var(--line); font-size:.7rem; }
.chronicle-ranking-title span { color:#ff9aaa; }
#chronicle-ranking-list { display:grid; }
#chronicle-ranking-list>p { margin:0; padding:.8rem; color:var(--muted); font-size:.68rem; line-height:1.4; }
#chronicle-ranking-list article { display:grid; grid-template-columns:24px 25px minmax(0,1fr) auto; align-items:center; gap:.5rem; min-width:0; padding:.52rem .65rem; border-bottom:1px solid rgba(97,133,193,.12); }
#chronicle-ranking-list article:last-child { border-bottom:0; }
#chronicle-ranking-list img { width:24px; height:24px; object-fit:contain; }
#chronicle-ranking-list article>div { display:grid; min-width:0; }
#chronicle-ranking-list strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.7rem; }
#chronicle-ranking-list small { color:var(--muted); font-size:.58rem; }
#chronicle-ranking-list article>b { color:#ffb3bf; font:700 1rem/1 Georgia,serif; }
.chronicle-rank { color:var(--gold); font-size:.65rem; font-weight:900; }
.chronicle-side-facts { display:grid; gap:.42rem; }
.chronicle-side-facts article { display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; gap:.55rem; padding:.55rem .65rem; border:1px solid var(--line); border-radius:12px; background:rgba(20,35,79,.36); }
.chronicle-side-facts article>span { color:var(--cyan); text-align:center; }
.chronicle-side-facts article>div { display:grid; min-width:0; }
.chronicle-side-facts small { color:var(--muted); font-size:.57rem; text-transform:uppercase; letter-spacing:.06em; }
.chronicle-side-facts strong { margin-top:.08rem; overflow-wrap:anywhere; font-size:.66rem; line-height:1.35; }
@media (max-width: 980px) { .chronicle-layout { grid-template-columns:1fr; }.chronicle-summary { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }.chronicle-summary>header,.chronicle-kpis,.chronicle-side-facts { grid-column:1/-1; }.chronicle-side-facts { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 680px) { .chronicle-stream,.chronicle-summary { padding:.78rem; border-radius:15px; }.chronicle-stream>header { align-items:flex-start; }.chronicle-live-dot { margin-top:.25rem; }.chronicle-entry>summary { grid-template-columns:32px 42px minmax(0,1fr); gap:.5rem; padding:.7rem 0; }.chronicle-entry-details { margin-left:0; }.timeline-group-members,.timeline-detail-grid { grid-template-columns:1fr; }.chronicle-feed::before { left:15px; }.chronicle-entry-marker { width:32px; height:32px; }.chronicle-entry-avatar { width:40px; height:40px; border-radius:12px; }.chronicle-entry-avatar>img,.chronicle-entry-avatar>.timeline-avatar-fallback { border-radius:11px; }.chronicle-entry-copy header { align-items:flex-start; }.chronicle-entry-copy header>div { display:grid; gap:.2rem; }.chronicle-entry-copy time { max-width:82px; text-align:right; line-height:1.25; }.chronicle-summary { grid-template-columns:1fr; }.chronicle-summary>header,.chronicle-kpis,.chronicle-side-facts { grid-column:auto; }.chronicle-side-facts { grid-template-columns:1fr; }.chronicle-entry-badges>span { border-radius:9px; }.timeline-stats { padding:.85rem; } }
@media (max-width:680px) { .timeline-section-heading { align-items:start; }.chronicle-heading-actions { justify-items:start; }.chronicle-help-button { width:100%; justify-content:center; }.chronicle-help-dialog { width:calc(100vw - 1rem); max-height:calc(100vh - 1rem); max-height:calc(100dvh - 1rem); border-radius:18px; }.chronicle-help-shell>header { padding:.85rem; }.chronicle-help-heading { grid-template-columns:44px minmax(0,1fr); }.chronicle-help-heading img { width:44px; height:44px; padding:.38rem; border-radius:13px; }.chronicle-help-body { padding:.8rem; }.chronicle-help-steps,.chronicle-help-links { grid-template-columns:1fr; }.news-timeline-preview { margin-top:.75rem; }.timeline-account-downloads { padding:.65rem; } }
@media (max-width: 680px) { .chronicle-stream>header { flex-wrap:wrap; }.chronicle-character-filter { width:100%; }.chronicle-character-picker { grid-template-columns:minmax(0,1fr) 40px; }.chronicle-character-search-toggle { width:40px; height:40px; } }
@media (max-width:680px) { .timeline-preview>header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.35rem .65rem; }.timeline-preview .chronicle-live-dot { margin-top:0; }.timeline-carousel { grid-template-columns:40px minmax(0,1fr) 40px; }.timeline-arrow { width:40px; height:40px; }.timeline-feed { min-height:148px; }.timeline-node { min-height:136px; }.timeline-avatar .timeline-event-icon { width:26px; height:26px; font-size:1.02rem; line-height:22px; }.chronicle-entry-copy header>.chronicle-entry-meta { justify-items:end; } }
.timeline-event.timeline-death .timeline-avatar { border-color:#ff5368; box-shadow:0 0 0 3px rgba(6,14,36,.94),0 0 0 6px rgba(255,65,88,.52),0 0 21px rgba(255,46,75,.34); }
.timeline-event.timeline-death .timeline-avatar .timeline-event-icon { color:#fff; border-color:#ffb2bd; background:linear-gradient(145deg,#ee2848,#ab102c); box-shadow:0 0 0 2px rgba(91,9,29,.75),0 3px 13px rgba(255,40,71,.54); font-size:1.28rem; text-shadow:0 1px 3px #5e091e; }
.timeline-event.timeline-death .timeline-node-copy>span { color:#ffb4bf; }
.chronicle-summary { gap:1rem; border-color:rgba(224,188,98,.3); background:radial-gradient(circle at 100% 0%,rgba(180,111,40,.13),transparent 48%),linear-gradient(150deg,rgba(12,22,51,.94),rgba(8,15,39,.92)); }
.chronicle-summary>header { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:start; gap:.7rem; padding-bottom:.85rem; border-bottom:1px solid rgba(224,188,98,.23); }
.chronicle-register-seal { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(244,204,111,.55); border-radius:13px; color:#fff2bd; background:linear-gradient(145deg,rgba(191,137,48,.35),rgba(93,64,142,.38)); font-size:1.35rem; box-shadow:inset 0 1px rgba(255,255,255,.12),0 6px 16px rgba(0,0,0,.16); }
.chronicle-summary>header .eyebrow { margin:0; color:#f4d486; }
.chronicle-summary>header h3 { line-height:1.15; }
.chronicle-summary>header div>p:last-child { margin:.45rem 0 0; color:#b9cbcf; font-size:.7rem; line-height:1.45; }
.chronicle-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
.chronicle-kpis .chronicle-kpi { --kpi-rgb:88,221,255; grid-template-columns:32px minmax(0,1fr); justify-items:start; align-items:center; gap:.12rem .45rem; min-height:68px; padding:.58rem .62rem; border-color:rgba(var(--kpi-rgb),.3); background:linear-gradient(135deg,rgba(var(--kpi-rgb),.17),rgba(11,22,51,.72)); text-align:left; }
.chronicle-kpi-deaths,.chronicle-kpi-today { --kpi-rgb:255,100,122!important; }
.chronicle-kpi-achievements,.chronicle-kpi-legendaries { --kpi-rgb:242,198,105!important; }
.chronicle-kpi-levels { --kpi-rgb:85,221,180!important; }
.chronicle-kpi-epics { --kpi-rgb:177,140,255!important; }
.chronicle-kpi-icon { grid-row:1/3; display:grid; place-items:center; width:30px; height:30px; border:1px solid rgba(var(--kpi-rgb),.42); border-radius:10px; color:rgb(var(--kpi-rgb))!important; background:rgba(var(--kpi-rgb),.12); font-size:1rem!important; line-height:1; }
.chronicle-kpis .chronicle-kpi strong { color:#fff; font:700 1.3rem/1 Georgia,serif; }
.chronicle-kpis .chronicle-kpi small { color:#c0cfdb; font-size:.62rem; line-height:1.25; }
.chronicle-highlight { border-color:rgba(255,111,132,.45); background:linear-gradient(120deg,rgba(151,33,62,.25),rgba(106,67,145,.2)); }
.chronicle-highlight-icon { color:#ffe4e8; background:rgba(255,111,132,.18); font-size:1.2rem; }
.chronicle-highlight small { color:#ffc7d0; }
.chronicle-highlight b { color:#fff0ba; }
.chronicle-ranking { padding:.6rem; border-color:rgba(255,111,132,.28); background:rgba(4,9,29,.5); }
.chronicle-ranking-title { padding:.1rem .1rem .5rem; border-color:rgba(255,111,132,.22); }
.chronicle-ranking-title span { font-size:1rem; }
#chronicle-ranking-list { gap:.4rem; padding-top:.48rem; }
#chronicle-ranking-list article { grid-template-columns:25px 27px minmax(0,1fr) auto; gap:.42rem; padding:.52rem .45rem; border:1px solid rgba(123,153,202,.24); border-radius:10px; background:linear-gradient(90deg,rgba(44,65,112,.28),rgba(13,22,50,.72)); }
#chronicle-ranking-list article:first-child { border-color:rgba(244,204,111,.4); background:linear-gradient(90deg,rgba(137,102,30,.23),rgba(18,29,59,.8)); }
#chronicle-ranking-list article:last-child { border-bottom:1px solid rgba(123,153,202,.24); }
#chronicle-ranking-list article>div { gap:.12rem; }
#chronicle-ranking-list small { color:#b9cbd4; font-size:.6rem; }
#chronicle-ranking-list article>b { display:inline-flex; align-items:center; gap:.15rem; padding:.28rem .4rem; border-radius:9px; color:#fff0f2; background:rgba(177,39,69,.32); font:700 .9rem/1 Georgia,serif; white-space:nowrap; }
#chronicle-ranking-list article>b span { color:#ff94a7; font-size:.8rem; }
.chronicle-side-facts article { border-color:rgba(88,221,255,.25); background:linear-gradient(110deg,rgba(26,83,113,.24),rgba(20,35,79,.34)); }
.chronicle-side-facts article:nth-child(2n) { border-color:rgba(224,188,98,.28); background:linear-gradient(110deg,rgba(105,79,31,.2),rgba(20,35,79,.34)); }
.chronicle-side-facts article>span { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; color:#a1f0f0; background:rgba(88,221,255,.12); font-size:.95rem; }
.chronicle-side-facts article:nth-child(2n)>span { color:#ffe3a0; background:rgba(224,188,98,.14); }
.chronicle-side-facts small { color:#a9cbd5; }
.chronicle-side-facts strong { font-size:.68rem; }
@media (max-width:680px) { .timeline-event.timeline-death .timeline-avatar .timeline-event-icon { font-size:1.16rem; }.chronicle-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }.chronicle-summary>header { grid-column:1; }.chronicle-kpis .chronicle-kpi { min-height:66px; } }
.appearance-intro { margin: 1.2rem 0 1rem; }
.appearance-intro h3 { margin-bottom: .35rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.55rem; font-weight: 500; }
.appearance-intro > p:last-child { color: var(--muted); line-height: 1.55; }
.theme-picker { display: grid; gap: .7rem; }
.theme-choice { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: .85rem; width: 100%; min-height: 82px; padding: .75rem; border: 1px solid var(--line); border-radius: 15px; color: var(--text); background: rgba(5,8,25,.28); text-align: left; cursor: pointer; }
.theme-choice:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.theme-choice[aria-pressed="true"] { border-color: var(--line-strong); background: linear-gradient(135deg, var(--theme-active-a), var(--theme-active-b)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.theme-choice > span:nth-child(2) { display: grid; gap: .18rem; }
.theme-choice small { color: var(--muted); }
.theme-choice b { color: var(--cyan); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.theme-preview { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 4px; width: 84px; height: 54px; padding: 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; overflow: hidden; }
.theme-preview i { display: block; border-radius: 4px; }
.theme-preview i:nth-child(1) { height: 34px; }
.theme-preview i:nth-child(2) { height: 24px; }
.theme-preview i:nth-child(3) { height: 16px; }
.theme-preview-bbb { background: #090d22; }
.theme-preview-bbb i:nth-child(1) { background: #2f82ff; }
.theme-preview-bbb i:nth-child(2) { background: #956aff; }
.theme-preview-bbb i:nth-child(3) { background: #58ddff; }
.theme-preview-alliance { background: #07152c; }
.theme-preview-alliance i:nth-child(1) { background: #1769d2; }
.theme-preview-alliance i:nth-child(2) { background: #f5c65c; }
.theme-preview-alliance i:nth-child(3) { background: #62c9ff; }
.theme-preview-horde { background: #1a080a; }
.theme-preview-horde i:nth-child(1) { background: #c64232; }
.theme-preview-horde i:nth-child(2) { background: #7f1d2d; }
.theme-preview-horde i:nth-child(3) { background: #e8ad59; }
.theme-preview-chronomancy { background: #061d22; }
.theme-preview-chronomancy i:nth-child(1) { background: #159cad; }
.theme-preview-chronomancy i:nth-child(2) { background: #e0bc62; }
.theme-preview-chronomancy i:nth-child(3) { background: #65eee6; }
.theme-preview-sylvan { background: #0b2116; }
.theme-preview-sylvan i:nth-child(1) { background: #2d9362; }
.theme-preview-sylvan i:nth-child(2) { background: #e4ca79; }
.theme-preview-sylvan i:nth-child(3) { background: #83e0af; }
.theme-preview-deepforge { background: #21120c; }
.theme-preview-deepforge i:nth-child(1) { background: #b95028; }
.theme-preview-deepforge i:nth-child(2) { background: #6f3424; }
.theme-preview-deepforge i:nth-child(3) { background: #f0bd67; }
.appearance-note { margin: 1rem 0 0; color: var(--muted-2); font-size: .72rem; text-align: center; }
.profile-save-dock { display:grid; gap:.45rem; }
.form-action-feedback { min-height: 1.1rem; margin: 0; color: var(--muted); font-size: .7rem; font-weight: 750; text-align: center; }
.form-action-feedback[data-state="pending"] { color: var(--cyan); }
.form-action-feedback[data-state="success"] { color: var(--green); }
.form-action-feedback[data-state="error"] { color: var(--red); }
.profile-photo { display: flex; align-items: center; gap: .8rem; margin: 1.2rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(6,9,26,.28); }
.profile-photo > div { display: grid; gap: .15rem; }
.upload-trigger { width: max-content; padding: .25rem 0; }
.profile-photo small, .security-method small, .switch-row small, .admin-entry small, .admin-member small { color: var(--muted); }
.huge { width: 64px; height: 64px; font-size: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin: 1rem 0; }
.identity-fields { margin-bottom: .8rem; }
.characters-intro, .settings-subheading { margin: 1rem 0; }
.characters-intro h3, .settings-subheading h3 { margin: .2rem 0 .35rem; font-family: Georgia, serif; font-size: 1.45rem; }
.characters-intro > p:last-child { color: var(--muted); line-height: 1.5; }
.account-security-section { display: grid; gap: .7rem; margin-top: 1rem; padding-top: .2rem; border-top: 1px solid var(--line); }
.discord-profile-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; margin: 1rem 0; padding: .85rem; border: 1px solid rgba(88,221,255,.22); border-radius: 14px; background: rgba(47,130,255,.07); }
.discord-profile-heading { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .75rem; }
.discord-profile-heading > div { display: grid; gap: .15rem; }
.discord-profile-card small { color: var(--muted); line-height: 1.4; }
.discord-profile-preferences { grid-column: 1 / -1; display: grid; gap: .5rem; }
.discord-profile-card > button { grid-column: 1 / -1; justify-self: end; }
.battle-net-link-card { grid-template-columns: auto minmax(0, 1fr) auto; margin: 1rem 0; background: rgba(47,130,255,.07); border-color: rgba(88,221,255,.22); }
.battle-net-link-card small { line-height: 1.4; overflow-wrap: anywhere; }
.armory-preparation { display: grid; gap: .85rem; margin: 1rem 0; padding: 1rem; border: 1px solid rgba(88,221,255,.24); border-radius: 18px; background: linear-gradient(135deg, rgba(47,130,255,.09), rgba(126,87,255,.07)); }
.armory-preparation > header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .75rem; }
.armory-preparation > header h3, .armory-preparation > header p { margin: 0; }
.armory-preparation > header > div { display: grid; gap: .2rem; }
.armory-preparation > header > div > p:last-child { color: var(--muted); line-height: 1.45; }
.armory-provider-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
.armory-provider-grid article { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: .55rem; align-items: center; min-width: 0; padding: .7rem; border: 1px solid var(--line); border-radius: 13px; background: rgba(5,8,25,.36); }
.armory-provider-grid img { width: 38px; height: 38px; }
.armory-provider-grid strong { min-width: 0; }
.armory-provider-grid article > span { grid-column: 1 / -1; justify-self: start; padding: .22rem .48rem; border-radius: 999px; color: var(--cyan); background: rgba(88,221,255,.08); font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.armory-safety-note { margin: 0; padding: .65rem .75rem; border-left: 3px solid var(--gold); color: var(--muted); background: rgba(245,191,85,.06); line-height: 1.45; }
.armory-safety-note b { color: var(--text); }
.armory-preparation > button { justify-self: end; }
.armory-plan-body { display: grid; gap: 1rem; }
.armory-steps { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.armory-steps li { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: .65rem; align-items: center; padding: .65rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(47,130,255,.06); }
.armory-steps li > span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(88,221,255,.4); border-radius: 50%; color: var(--cyan); font-weight: 900; }
.armory-steps li > div { display: grid; gap: .1rem; }
.armory-steps small, .armory-boundaries li { color: var(--muted); line-height: 1.4; }
.armory-boundaries { padding: .85rem; border: 1px solid rgba(245,191,85,.24); border-radius: 14px; background: rgba(245,191,85,.05); }
.armory-boundaries h3 { margin: 0 0 .5rem; }
.armory-boundaries ul { display: grid; gap: .35rem; margin: 0; padding-left: 1.15rem; }
.armory-preparation { margin-bottom: 1rem; }
.character-builder { container-name: character-builder; container-type: inline-size; margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--ornament); border-radius: 16px; background: radial-gradient(circle at 100% 0, var(--theme-glow), transparent 45%), rgba(5,8,25,.3); }
.character-builder-heading { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.character-builder-heading h3 { margin: 0; font-family: Georgia, serif; font-size: 1.35rem; }
.source-chip { padding: .38rem .55rem; border: 1px solid rgba(84,221,161,.25); border-radius: 999px; color: #bcf8dc; background: rgba(84,221,161,.08); font-size: .65rem; font-weight: 800; }
.character-path { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: end; gap: .35rem; margin-top: 1rem; }
.character-path > i { padding-bottom: .75rem; color: var(--gold); font-family: Georgia, serif; font-size: 1.35rem; font-style: normal; }
.character-path label > span { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: .3rem; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--cyan); font-size: .62rem; }
.combat-role-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.combat-role-picker legend { margin-bottom: .35rem; color: var(--muted); font-size: .72rem; font-weight: 800; }
.combat-role-picker legend > span { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: .3rem; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--cyan); font-size: .62rem; }
.combat-role-picker > div { display: flex; flex-wrap: wrap; gap: .3rem; }
.combat-role-picker label { position: relative; display: inline-flex; align-items: center; gap: .3rem; min-width: 0; padding: .36rem .48rem; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: rgba(5,8,25,.45); cursor: pointer; }
.combat-role-picker label:has(input:checked) { border-color: var(--cyan); color: #fff; background: rgba(47,130,255,.16); box-shadow: inset 0 0 0 1px rgba(83,218,255,.18); }
.combat-role-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.combat-role-picker img { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; }
.combat-role-picker > small { display: block; margin-top: .25rem; color: var(--muted); font-size: .6rem; }
.alt-role-picker { align-self: end; }
.character-rule { display: flex; gap: .5rem; margin: .75rem 0; padding: .65rem .75rem; border-radius: 10px; color: var(--muted); background: rgba(47,130,255,.08); font-size: .72rem; line-height: 1.45; }
.character-rule span { color: var(--cyan); }
.character-name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-top: .7rem; }
.character-name-grid label small { color: var(--muted-2); font-weight: 500; }
.profession-picker { margin-top: 1rem; padding: .8rem; border: 1px solid var(--line); border-radius: 13px; }
.profession-picker legend { padding: 0 .35rem; color: #e8edff; font-size: .78rem; font-weight: 800; }
.profession-picker legend small { color: var(--muted); font-weight: 500; }
#profession-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
#profession-options label { display: flex; align-items: center; gap: .35rem; min-width: 0; min-height: 38px; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.02); line-height: 1.25; overflow-wrap: anywhere; cursor: pointer; }
#profession-options label:has(input:checked) { border-color: var(--line-strong); color: #fff; background: rgba(47,130,255,.13); }
#profession-options input { width: auto; min-height: auto; accent-color: var(--blue); }
#profession-options input:disabled + * { opacity: .5; }
#profession-help { margin: .65rem 0 0; color: var(--muted-2); font-size: .68rem; }
.character-profile-preview { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .75rem; margin-top: .85rem; padding: .75rem; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(135deg, var(--theme-active-a), rgba(5,8,25,.36)); }
.character-profile-preview img { width: 54px; height: 54px; }
.character-profile-preview div { display: grid; gap: .12rem; }
.character-profile-preview small, .character-profile-preview span { color: var(--muted); font-size: .7rem; }
.character-profile-preview strong { font-family: Georgia, serif; font-size: 1.1rem; }
.character-profile-preview strong > span:first-child { color: #fff; }
.character-profile-preview strong .combat-role-badges { margin-top: .28rem; }
.alt-characters-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.alt-characters-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.alt-characters-heading h3 { margin: 0 0 .15rem; font-family: Georgia, serif; font-size: 1.15rem; }
.alt-characters-heading small { color: var(--muted); }
.alt-character-list { display: grid; gap: .5rem; margin-top: .75rem; }
.alt-character-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; padding: .65rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(5,8,25,.3); }
.alt-character-card img { width: 42px; height: 42px; }
.alt-character-card > div { display: grid; gap: .12rem; }
.alt-character-card span, .alt-character-card small { color: var(--muted); font-size: .69rem; }
.alt-character-build { display: grid; gap: .28rem; }
.alt-character-card .combat-role-badge img, .member-detail-alt .combat-role-badge img { width: 18px; height: 18px; }
.alt-character-actions { display: flex; align-items: center; gap: .35rem; }
.alt-character-actions button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; }
.alt-character-actions .favorite-character-button { color: var(--gold); font-size: 1.15rem; }
.alt-character-actions .favorite-character-button:hover { border-color: var(--gold); color: #fff1ba; background: rgba(239,191,104,.12); }
.main-character-chip { color: #fff0b7; border-color: rgba(239,191,104,.42); background: rgba(239,191,104,.1); }
.compact-professions #alt-profession-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
#alt-profession-options label { display: flex; align-items: center; gap: .35rem; min-height: 38px; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.02); cursor: pointer; }
#alt-profession-options label:has(input:checked) { border-color: var(--line-strong); color: #fff; background: rgba(47,130,255,.13); }
#alt-profession-options input { width: auto; min-height: auto; accent-color: var(--blue); }
#alt-profession-help { margin: .65rem 0 0; color: var(--muted-2); font-size: .68rem; }
.security-method, .admin-entry { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; margin-bottom: .65rem; padding: .9rem; border: 1px solid var(--line); border-radius: 13px; background: rgba(5,8,25,.26); }
.security-method > div, .admin-entry > div { display: grid; gap: .15rem; }
.recruitment-admin-card { display:grid; gap:1rem; margin-top:1.35rem; padding:1.2rem; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,rgba(20,52,83,.46),rgba(15,15,48,.72)); overflow:hidden; }
.recruitment-admin-card header { display:grid; grid-template-columns:auto minmax(0,1fr); gap:.8rem; align-items:start; }
.recruitment-admin-card header div { min-width:0; }
.recruitment-admin-card h3, .recruitment-admin-card p { margin:0; }
.recruitment-admin-card header p:last-child { margin-top:.35rem; color:var(--muted); line-height:1.45; }
.recruitment-admin-card label { display:grid; gap:.42rem; min-width:0; }
.recruitment-admin-card textarea { width:100%; min-height:7.25rem; resize:vertical; line-height:1.5; }
.recruitment-admin-card label small { justify-self:end; color:var(--muted); }
.recruitment-admin-card label small.limit-exceeded { color:var(--red); font-weight:800; }
.recruitment-admin-card .secondary-action { justify-self:start; }
.recruitment-safety-note { color:var(--muted); line-height:1.4; }
.security-action-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; margin-bottom: .65rem; padding: .9rem; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(135deg, rgba(47,130,255,.07), rgba(149,106,255,.05)); }
.security-action-card > div { display: grid; gap: .15rem; min-width: 0; }
.security-action-card small { color: var(--muted); line-height: 1.4; }
.password-change-fields { display: grid; gap: .75rem; margin-top: 1rem; }
.session-choice { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .65rem; margin-top: 1rem; padding: .8rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(47,130,255,.06); cursor: pointer; }
.session-choice input { width: 20px; min-height: 20px; margin-top: .1rem; accent-color: var(--blue); }
.session-choice > span { display: grid; gap: .15rem; }
.session-choice small { color: var(--muted); font-weight: 500; line-height: 1.4; }
.method-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--cyan); background: rgba(47,130,255,.16); font-weight: 900; }
.gold-bg { color: var(--gold); background: rgba(182,124,35,.15); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; padding: 1rem; border: 1px solid var(--line); border-radius: 13px; background: rgba(5,8,25,.26); }
.switch-row > span { display: grid; gap: .18rem; }
.switch-row input { width: 42px; min-height: 22px; accent-color: var(--blue); }
.danger-text { display: block; margin: 1rem auto 0; border: 0; color: var(--red); background: transparent; cursor: pointer; }
.wide-dialog { box-sizing:border-box; width: min(1120px, calc(100vw - 4rem)); max-height: calc(100dvh - 4rem); overflow: hidden; border-radius: 24px; }
.wide-dialog form, .builder-dialog form { max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.25rem; overscroll-behavior: contain; }
.wide-dialog form { container-name: admin-dialog; container-type: inline-size; }
#admin-dialog { height: min(820px, calc(100dvh - 4rem)); }
#admin-dialog form { height: 100%; max-height: none; padding: 0 1.5rem 1.5rem; overflow-x: hidden; overflow-y: auto; scroll-padding-block: 6rem 1.5rem; scrollbar-gutter: stable; }
#admin-dialog form > header { top:0; margin:0 0 1.1rem; padding:1.55rem .5rem 1.35rem; }
#admin-dialog form > header > div { min-width: 0; padding-right: .5rem; }
#admin-dialog form > header h2 { line-height: 1.08; }
dialog form > header { position: sticky; z-index: 8; top: -1.25rem; margin: -1.25rem -1.25rem 0; padding: 1.25rem 1.25rem 1rem; background: linear-gradient(180deg, #101631 82%, rgba(16,22,49,.96)); }
dialog form > footer { position: sticky; z-index: 8; bottom: -1.25rem; margin: 1rem -1.25rem -1.25rem; padding: 1rem 1.25rem 1.25rem; background: linear-gradient(0deg, #101631 82%, rgba(16,22,49,.96)); }
.admin-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin: 1rem 0; }
.admin-summary article { display: grid; gap: .15rem; padding: .8rem; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: .72rem; background: rgba(5,8,25,.28); }
.admin-summary span { color: #fff; font-family: Georgia, serif; font-size: 1.55rem; }
.admin-access-guide { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin: .2rem 0 .75rem; }
.admin-access-guide article { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .65rem; padding: .85rem; border: 1px solid var(--line); border-radius: 13px; background: rgba(47,130,255,.06); }
.admin-access-guide article > span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--cyan); font-weight: 900; }
.admin-access-guide article div { display: grid; gap: .25rem; }
.admin-access-guide p { margin: 0; color: var(--muted); font-size: .69rem; line-height: 1.45; }
.admin-access-guide p b { color: #edf3ff; }
.admin-privacy-note { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; padding: .6rem .75rem; border: 1px solid rgba(84,221,161,.2); border-radius: 11px; color: #bdebd6; background: rgba(52,150,106,.07); font-size: .7rem; }
.admin-privacy-note span { color: var(--green); }
#admin-access-empty { margin: .25rem 0 1rem; padding: 1.15rem .8rem; border: 1px dashed rgba(157,187,255,.14); border-radius: 12px; background: rgba(5,8,25,.16); }
.admin-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(280px,.65fr); align-items: start; gap: 1rem; margin-bottom: 1rem; }
.admin-members, .permission-panel { min-width: 0; padding: 1.1rem; }
.admin-members { container-name: admin-members; container-type: inline-size; }
.admin-members .panel-title small { display: block; max-width: 460px; margin-top: .25rem; color: var(--muted); font-size: .67rem; line-height: 1.4; }
.admin-member-tools { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(150px, auto); gap: .55rem; margin: .8rem 0 .35rem; }
.admin-member-search { position: relative; display: block; }
.admin-member-search > span { position: absolute; z-index: 1; top: 50%; left: .7rem; color: var(--cyan); font-size: 1rem; transform: translateY(-50%); pointer-events: none; }
.admin-member-search input { padding-left: 2rem; }
.admin-member { display: grid; grid-template-columns: minmax(110px,1fr) minmax(105px,.62fr) minmax(132px,.72fr) auto; align-items: center; gap: .55rem; min-height: 54px; padding: .48rem .1rem; border-top: 1px solid rgba(157,187,255,.1); }
.admin-member > div { display: grid; gap: .1rem; }
.admin-member select { min-width: 0; min-height: 36px; padding: .38rem .48rem; font-size: .7rem; }
.admin-member > span:nth-child(2) { display: grid; gap: .1rem; }
.admin-member button { padding: .35rem .55rem; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: rgba(255,255,255,.03); cursor: pointer; }
.admin-member .approve { color: #bcf8dc; border-color: rgba(84,221,161,.28); }
.admin-member-actions { display: flex !important; grid-auto-flow: column; align-items: center; justify-content: end; gap: .35rem !important; }
.admin-delete-member { display: grid; place-items: center; width: 34px; min-width: 34px; height: 34px; padding: 0 !important; color: #ff9aab !important; border-color: rgba(255,111,134,.3) !important; }
.admin-delete-member:hover, .admin-delete-member:focus-visible { color: #fff !important; background: rgba(255,76,110,.18) !important; }
.owner-protected-badge { display: inline-flex; align-items: center; margin-left: .35rem; padding: .14rem .38rem; border: 1px solid rgba(211,171,83,.32); border-radius: 999px; color: #ecd28f; font-family: Inter, sans-serif; font-size: .55rem; font-weight: 700; letter-spacing: .04em; vertical-align: middle; white-space: nowrap; }
.admin-member select:disabled { color: inherit; opacity:1; cursor:not-allowed; }
.verification-ok { color: #79e9bd; font-size: .62rem; }
.verification-warning { color: #ffc075; font-size: .62rem; }
.admin-audit { margin-top: .8rem; padding: 1rem; }
.admin-audit .panel-title { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.admin-audit .panel-title small { color: var(--muted); font-size: .68rem; }
.admin-audit-entry { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .65rem; min-height: 46px; padding: .45rem 0; border-top: 1px solid rgba(157,187,255,.1); }
.admin-audit-entry:first-child { margin-top: .6rem; }
.admin-audit-entry div { display: grid; gap: .1rem; }
.admin-audit-entry small, .admin-audit-entry time { color: var(--muted); font-size: .64rem; }
.audit-mark { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(88,221,255,.25); border-radius: 50%; color: var(--cyan); background: rgba(47,130,255,.08); }
.delete-member-dialog { width: min(560px, calc(100vw - 2rem)); }
.delete-member-dialog section { display: grid; gap: .7rem; padding: 1.15rem; border: 1px solid rgba(255,111,134,.3); border-radius: 14px; background: rgba(255,76,110,.07); }
.delete-member-dialog section h3, .delete-member-dialog section p { margin: 0; }
.delete-member-dialog section p { color: var(--muted); line-height: 1.55; }
.danger-symbol { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,111,134,.42); border-radius: 50%; color: #fff; background: rgba(255,76,110,.22); font-weight: 900; }
.auth-step-actions .text-button:disabled { opacity: .62; cursor: wait; }
.permission-panel h3 { margin-bottom: 1rem; }
.permission-legend { display: flex; flex-wrap: wrap; gap: .35rem; margin: -.35rem 0 .75rem; }
.permission-legend span { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .42rem; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: rgba(255,255,255,.025); font-size: .59rem; line-height: 1.2; }
.permission-legend b { display: grid; place-items: center; min-width: 18px; height: 18px; border-radius: 5px; color: #061426; background: var(--cyan); font-size: .58rem; }
.permission-row { display: grid; grid-template-columns: 1fr repeat(5, 28px); gap: .35rem; align-items: center; min-height: 42px; border-top: 1px solid rgba(157,187,255,.1); color: var(--muted); font-size: .7rem; }
.permission-row b { color: var(--green); text-align: center; }
.permission-row.heading { border-top: 0; color: #dce5fa; font-weight: 800; }
.community-identity-lock { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .8rem; margin: 1rem 0; padding: .75rem 1rem; border: 1px solid var(--ornament); border-radius: 14px; background: linear-gradient(110deg, rgba(239,191,104,.1), rgba(47,130,255,.07)); }
.community-identity-lock img { width: 58px; height: 58px; object-fit: contain; }
.community-identity-lock div { display: grid; gap: .16rem; }
.community-identity-lock small { color: var(--gold); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.community-identity-lock span { color: var(--muted); font-size: .76rem; }
.access-request-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin-bottom: .8rem; padding: 1rem; border-color: rgba(88,221,255,.3); }
.request-person { display: flex; align-items: center; gap: .8rem; }
.request-person h3, .request-person p:last-child { margin-bottom: .25rem; }
.request-person p:last-child { color: var(--muted); font-size: .78rem; line-height: 1.5; }
.request-decision { display: flex; align-items: end; gap: .5rem; }
.request-decision select { min-width: 165px; }
.builder-dialog { width: min(680px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: hidden; border-radius: 24px; }
.builder-dialog form > label { margin-top: .9rem; }
.builder-dialog .dialog-intro { max-width: 480px; margin: .25rem 0 0; color: var(--muted); font-size: .74rem; line-height: 1.45; }
.builder-dialog footer, .wide-dialog footer { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; border-top: 1px solid var(--line); }
.builder-dialog footer > span { flex: 1; }
.wide-dialog footer > span { flex: 1; }
.danger-action { min-height: 40px; padding: .55rem .8rem; border: 1px solid rgba(255,113,130,.32); border-radius: 10px; color: #ffc1c9; background: rgba(137,36,55,.15); font-weight: 800; cursor: pointer; }
.event-visual-field { margin-top: .9rem; }
.event-visual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.event-visual-choice { position: relative; display: grid; grid-template-columns: 88px minmax(0,1fr) auto; align-items: center; gap: .65rem; overflow: hidden; min-height: 72px; padding: .4rem; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: rgba(5,8,25,.28); text-align: left; cursor: pointer; }
.event-visual-choice > img { width: 88px; height: 62px; border-radius: 9px; object-fit: cover; }
.event-visual-choice > span { display: grid; gap: .15rem; min-width: 0; }
.event-visual-choice b { font-size: .72rem; }
.event-visual-choice small { overflow: hidden; color: var(--muted); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.event-visual-choice > i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #081426; background: transparent; font-style: normal; font-weight: 900; }
.event-visual-choice.selected { border-color: rgba(88,221,255,.62); background: rgba(47,130,255,.14); box-shadow: inset 0 0 0 1px rgba(88,221,255,.18); }
.event-visual-choice.selected > i { background: var(--cyan); }
.roster-person { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border: 1px solid rgba(157,187,255,.1); border-radius: 11px; background: rgba(255,255,255,.025); }
.roster-person > span { display: grid; gap: .12rem; }
.roster-person small { color: var(--muted); font-size: .64rem; }
.roster-person small { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.roster-note { color: var(--muted); line-height: 1.35; }
.selected-role-preview { display: flex; min-height: 31px; align-items: center; margin: .1rem 0 .15rem; }
.notifications-dialog footer { justify-content: flex-start; }
.notifications-dialog footer > span { min-width: .25rem; }
.notification-dialog-action { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 42px; margin: 0; padding: .58rem .8rem; border: 1px solid var(--line-strong); border-radius: 11px; color: #eaf7ff; background: linear-gradient(135deg, rgba(24, 111, 208, .34), rgba(82, 58, 163, .3)); font-size: .74rem; font-weight: 800; cursor: pointer; }
.notification-dialog-action > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: var(--cyan); background: rgba(88, 221, 255, .1); }
.notification-dialog-action.danger { border-color: rgba(255, 113, 130, .3); color: #ffd8dd; background: rgba(137, 36, 55, .13); }
.notification-dialog-action.danger > span { color: var(--red); background: rgba(255, 113, 130, .1); }
.notification-dialog-action:hover { border-color: var(--cyan); transform: translateY(-1px); }
.notification-dialog-action.danger:hover { border-color: var(--red); }
.choice-builder { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; margin-top: .55rem; }
.choice-icon { display: grid; place-items: center; width: 46px; height: 46px; padding: 3px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: rgba(5,8,25,.32); cursor: pointer; }
.choice-icon:hover, .choice-icon:focus-visible { border-color: var(--cyan); background: rgba(47,130,255,.14); }
.choice-icon img { display: block; width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.choice-icon .visual-emoji { width: 36px; height: 36px; font-size: 1.3rem; }
.choice-icon-empty { display: grid; width: 36px; height: 36px; place-items: center; border: 1px dashed rgba(157,187,255,.2); border-radius: 8px; color: var(--muted); font-size: .9rem; }
.poll-type-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .65rem; min-height: 70px; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 11px; background: rgba(47,130,255,.06); }
.poll-type-card > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--cyan); background: rgba(47,130,255,.14); }
.poll-type-card > div { display: grid; gap: .16rem; }
.poll-type-card strong { color: #edf3ff; font-size: .75rem; }
.poll-type-card small { color: var(--muted); font-size: .64rem; line-height: 1.35; }
.icon-picker-dialog { width: min(760px, calc(100vw - 2rem)); }
.visual-library-controls { display: grid; grid-template-columns: auto minmax(210px, 1fr); align-items: end; gap: .8rem; margin-top: 1rem; }
.visual-library-tabs { display: flex; gap: .35rem; padding: .28rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(5,8,25,.42); }
.visual-library-tabs button { min-height: 42px; padding: .6rem .85rem; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-weight: 800; cursor: pointer; }
.visual-library-tabs button.active { color: #fff; background: linear-gradient(135deg,rgba(28,112,228,.75),rgba(92,61,178,.72)); }
.visual-library-search { display: grid; gap: .3rem; color: var(--muted); font-size: .72rem; font-weight: 750; }
.visual-library-search input { min-width: 0; }
.visual-library-categories { grid-column: 1 / -1; display: flex; gap: .35rem; max-width: 100%; padding-bottom: .15rem; overflow-x: auto; scrollbar-width: thin; }
.visual-library-categories button { flex: 0 0 auto; min-height: 34px; padding: .38rem .7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(5,8,25,.32); font-size: .67rem; font-weight: 800; cursor: pointer; }
.visual-library-categories button.active { border-color: var(--cyan); color: #fff; background: rgba(47,130,255,.18); }
.poll-icon-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; margin-top: 1rem; }
.visual-library-empty { grid-column: 1 / -1; padding: 2rem 1rem; color: var(--muted); text-align: center; }
.poll-icon-option { display: grid; place-items: center; align-content: center; gap: .35rem; min-width: 0; min-height: 86px; padding: .5rem .3rem; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: rgba(5,8,25,.28); font-size: .59rem; line-height: 1.15; text-align: center; cursor: pointer; }
.poll-icon-option:hover, .poll-icon-option.selected { border-color: var(--cyan); color: #fff; background: rgba(47,130,255,.15); }
.poll-icon-option img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; }
.visual-none-preview { display: grid; width: 42px; height: 42px; place-items: center; border: 1px dashed rgba(157,187,255,.28); border-radius: 9px; color: var(--muted); font-size: 1.15rem; }
.visual-emoji { display: grid; place-items: center; font-size: 1.65rem; line-height: 1; }
.poll-choice-visual.visual-emoji { position: relative; z-index: 1; }
.poll-choice-visual { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 9px; object-fit: cover; }
.visual-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; }
.visual-input-row button { min-height: 44px; padding: .55rem .7rem; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--cyan); background: rgba(47,130,255,.08); font-weight: 800; cursor: pointer; }
.content-inline-icon { display: inline-grid; width: 1.15em; height: 1.15em; margin-right: .4rem; border-radius: .25em; object-fit: cover; vertical-align: -.18em; }
.visual-emoji.content-inline-icon { font-size: .9em; }
.rich-inline-visual { display: inline-flex; align-items: center; justify-content: center; width: 1.35em; height: 1.35em; margin: 0 .12em; vertical-align: -.3em; }
.rich-inline-visual img { width: 1.25em; height: 1.25em; border-radius: .28em; object-fit: cover; }
.rich-inline-visual .visual-emoji { font-size: 1em; }
.news-icon img, .news-icon .visual-emoji { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; }
.council-message-identity { display: inline-flex; align-items: center; }
.charter-card > span:first-child img { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; }
.poll-option { grid-template-columns: auto minmax(0, 1fr) auto; }
.poll-builder-section { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(24,34,73,.52), rgba(6,9,28,.6)); }
.poll-builder-section > label { margin-top: .85rem; }
.poll-builder-section > .form-grid { align-items: start; }
.poll-builder-section #poll-results-lock { font-size: .62rem; font-weight: 600; line-height: 1.35; }
.poll-builder-heading { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .7rem; margin-bottom: .85rem; }
.poll-builder-heading > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--cyan); background: rgba(47,130,255,.12); font-weight: 900; }
.poll-builder-heading > div { display: grid; gap: .12rem; }
.poll-builder-heading strong { font-family: Georgia, serif; font-size: 1.2rem; }
.poll-builder-heading small { color: var(--muted); font-size: .68rem; }
.publication-section { border-color: var(--ornament); background: radial-gradient(circle at 100% 0, var(--theme-glow), transparent 48%), rgba(7,10,31,.72); }
.publication-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.publication-choice-grid > label { position: relative; cursor: pointer; }
.publication-choice-grid input { position: absolute; width: 1px; height: 1px; min-height: 1px; opacity: 0; }
.publication-choice-grid label > span { display: grid; align-content: start; gap: .28rem; min-height: 132px; padding: .8rem; border: 1px solid var(--line); border-radius: 13px; color: var(--muted); background: rgba(5,8,25,.36); transition: .16s ease; }
.publication-choice-grid label > span b { color: var(--cyan); font-size: 1.1rem; }
.publication-choice-grid label > span strong { color: #eef3ff; font-size: .77rem; }
.publication-choice-grid label > span small { font-size: .65rem; line-height: 1.4; }
.publication-choice-grid input:checked + span { border-color: var(--line-strong); background: linear-gradient(145deg, var(--theme-active-a), var(--theme-active-b)); box-shadow: inset 0 1px rgba(255,255,255,.08); transform: translateY(-1px); }
.publication-choice-grid input:disabled + span { opacity: .38; cursor: not-allowed; }
.scheduled-publication-field { display: grid; gap: .4rem; margin-top: .85rem; padding: .8rem; border: 1px solid rgba(88,221,255,.22); border-radius: 13px; background: rgba(47,130,255,.07); }
.scheduled-publication-field small { color: var(--muted); font-size: .65rem; }
.poll-preparations h3 { margin: .1rem 0 0; font-family: Georgia, serif; font-size: 1.05rem; }
#poll-preparation-list { display: grid; gap: .5rem; margin-top: .75rem; }
.poll-preparation-item { display: grid; justify-items: start; gap: .3rem; width: 100%; padding: .7rem; border: 1px solid var(--line); border-radius: 12px; color: inherit; background: rgba(5,8,25,.3); text-align: left; cursor: pointer; }
.poll-preparation-item:hover { border-color: var(--line-strong); background: rgba(47,130,255,.09); }
.poll-preparation-item strong { font-size: .76rem; }
.poll-preparation-item small { color: var(--muted); font-size: .65rem; line-height: 1.4; }
.poll-preparation-item i { color: var(--cyan); font-size: .65rem; font-style: normal; font-weight: 800; }
.choice-builder > button:not(.choice-icon) { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; }
.add-choice { margin-top: .6rem; border: 0; color: var(--cyan); background: transparent; font-weight: 750; cursor: pointer; }
.stepper { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; align-items: center; gap: .4rem; margin: 1rem 0; }
.stepper span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: .76rem; font-weight: 850; }
.stepper span small { display: none; }
.stepper span.active { border-color: rgba(88,221,255,.48); color: #fff; background: rgba(47,130,255,.24); }
.stepper i { height: 1px; background: var(--line); }
.event-step { min-height: 240px; animation: route-in .2s ease; }
.event-step > label { margin-top: .75rem; }
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 1rem; }
.slot-grid label { align-items: center; padding: .75rem; border: 1px solid var(--line); border-radius: 13px; background: rgba(5,8,25,.28); }
.slot-grid img { width: 50px; height: 50px; margin: auto; }
.form-help { color: var(--muted); }
.news-studio-dialog { width: min(1280px, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); overflow: hidden; border-radius: 24px; }
.news-studio-shell { max-height: calc(100dvh - 1.5rem); padding: 1.25rem; overflow-y: auto; }
.studio-header-actions { display: flex; align-items: center; gap: .6rem; }
.permission-chip { padding: .45rem .65rem; border: 1px solid rgba(84,221,161,.24); border-radius: 999px; color: #bcf8dc; background: rgba(84,221,161,.08); font-size: .68rem; font-weight: 800; }
.news-studio-layout { display: grid; grid-template-columns: 210px minmax(380px, 1fr) minmax(280px, .72fr); gap: 1rem; margin-top: 1rem; }
.template-rail, .news-editor, .news-preview { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(5,8,25,.28); }
.template-rail h3 { margin-bottom: .85rem; font-family: Georgia, serif; font-size: 1.25rem; }
.news-template { display: grid; grid-template-columns: 32px 1fr; gap: .15rem .55rem; width: 100%; margin-bottom: .55rem; padding: .7rem; border: 1px solid transparent; border-radius: 12px; color: var(--muted); background: rgba(255,255,255,.025); text-align: left; cursor: pointer; }
.news-template > span { grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--cyan); background: rgba(47,130,255,.14); font-weight: 900; }
.news-template strong { color: #e9edff; font-size: .78rem; }
.news-template small { line-height: 1.35; }
.news-template:hover, .news-template.active { border-color: var(--line-strong); color: var(--text); background: linear-gradient(135deg, var(--theme-active-a), var(--theme-active-b)); }
.news-template.urgent > span { color: #ffd4d9; background: rgba(255,113,130,.14); }
.studio-section-title { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; }
.studio-section-title.compact { margin-top: 1rem; }
.studio-section-title > span { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--cyan); font-size: .72rem; font-weight: 900; }
.studio-section-title > div { display: grid; gap: .1rem; }
.studio-section-title small { color: var(--muted); }
.news-editor > label { margin-top: .7rem; }
.editor-toolbar { position: sticky; z-index: 8; top: 0; display: flex; gap: .25rem; max-width: 100%; padding: .35rem; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; background: rgba(8,12,34,.97); box-shadow: 0 7px 18px rgba(0,0,0,.16); scrollbar-width: thin; }
.editor-toolbar button { width: 34px; height: 32px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; }
.editor-toolbar-spacer { flex: 1 0 .25rem; }
.editor-toolbar .insert-visual-button { width: auto; min-width: 34px; padding: 0 .65rem; color: var(--cyan); font-weight: 800; white-space: nowrap; }
.editor-toolbar button:hover { color: #fff; background: rgba(255,255,255,.08); }
.editor-toolbar + textarea { border-radius: 0 0 10px 10px; }
.rich-editor-surface { min-height: 8rem; max-height: min(46dvh, 30rem); padding: .8rem; overflow: auto; overflow-wrap: anywhere; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: rgba(5,8,25,.56); line-height: 1.55; outline: none; }
.rich-editor-field { display: grid; gap: .38rem; color: var(--muted); font-size: .78rem; font-weight: 750; }
.builder-dialog form > .rich-editor-field { margin-top: .9rem; }
.event-step > .rich-editor-field { margin-top: .75rem; }
.news-editor > .rich-editor-field { margin-top: .7rem; }
.council-composer > .rich-editor-field > span { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.editor-toolbar + textarea[hidden] + .rich-editor-surface { border-radius: 0 0 10px 10px; }
.rich-editor-surface:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(83,218,255,.13); }
.rich-editor-surface:empty::before { color: var(--muted); content: attr(data-placeholder); pointer-events: none; }
.rich-editor-visual { display: inline-flex; align-items: center; justify-content: center; width: 1.45em; height: 1.45em; margin: 0 .12em; vertical-align: -.32em; }
.rich-editor-visual img { width: 1.35em; height: 1.35em; border-radius: .28em; object-fit: cover; }
.rich-editor-visual .visual-emoji { font-size: 1.05em; }
.rich-output p, .tile-card-body p, .news-detail-body p, #bot-page-body p, .bug-card-details p { margin: 0 0 .65rem; }
.rich-output h2, .rich-output h3, .tile-card-body h2, .tile-card-body h3, .news-detail-body h2, .news-detail-body h3, #bot-page-body h2, #bot-page-body h3 { margin: .9rem 0 .45rem; font-family: Georgia, serif; }
.rich-output ul, .rich-output ol, .tile-card-body ul, .tile-card-body ol, .news-detail-body ul, .news-detail-body ol, #bot-page-body ul, #bot-page-body ol { margin: .5rem 0 .7rem; padding-left: 1.35rem; }
.rich-output blockquote, .tile-card-body blockquote, .news-detail-body blockquote, #bot-page-body blockquote { margin: .6rem 0; padding: .55rem .75rem; border-left: 3px solid var(--cyan); color: var(--muted); background: rgba(47,130,255,.07); }
.rich-output a, .tile-card-body a, .news-detail-body a, #bot-page-body a { color: var(--cyan); text-decoration: underline; text-underline-offset: .16em; }
.news-visual-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; }
.news-visual-picker button { display: grid; gap: .35rem; padding: .45rem; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: transparent; font-size: .66rem; cursor: pointer; }
.news-visual-picker i { height: 42px; border-radius: 7px; background: linear-gradient(145deg, rgba(49,126,232,.55), rgba(119,68,180,.4)), url("assets/bbb-guild-hall.webp") center/cover; }
.news-visual-picker [data-news-visual="raid"] i { background: linear-gradient(145deg, rgba(255,84,61,.42), rgba(25,10,35,.25)), url("assets/bbb-guild-hall.webp") 20% center/cover; }
.news-visual-picker [data-news-visual="senate"] i { background: linear-gradient(145deg, rgba(239,191,104,.4), rgba(25,10,35,.35)), url("assets/bbb-guild-hall.webp") 80% center/cover; }
.news-visual-picker [data-news-visual="chronomancy"] i { background: linear-gradient(145deg, rgba(37,106,208,.12), rgba(17,8,42,.28)), url("assets/news-chronomancy.webp") center/cover; }
.news-visual-picker [data-news-visual="cosmic"] i { background: linear-gradient(145deg, rgba(72,42,171,.1), rgba(4,8,32,.3)), url("assets/news-cosmic-voyage.webp") center/cover; }
.news-visual-picker [data-news-visual="cavern"] i { background: linear-gradient(145deg, rgba(33,102,185,.1), rgba(3,10,25,.34)), url("assets/news-crystal-cavern.webp") center/cover; }
.news-visual-picker [data-news-visual="fire-dungeon"] i { background: linear-gradient(145deg, rgba(255,82,30,.08), rgba(18,3,7,.3)), url("assets/news-fire-dungeon.webp") center/cover; }
.news-visual-picker [data-news-visual="event-raid"] i { background: linear-gradient(145deg,rgba(37,106,208,.08),rgba(17,8,42,.28)),url("assets/event-original-raid.jpg") center/cover; }
.news-visual-picker [data-news-visual="event-dungeon"] i { background: linear-gradient(145deg,rgba(37,106,208,.08),rgba(3,13,29,.28)),url("assets/event-original-dungeon.jpg") center/cover; }
.news-visual-picker [data-news-visual="event-community"] i { background: linear-gradient(145deg,rgba(239,191,104,.08),rgba(30,14,5,.3)),url("assets/event-original-community.jpg") center/cover; }
.news-visual-picker [data-news-visual="misty-fortress"] i { background: linear-gradient(145deg,rgba(37,106,208,.08),rgba(8,16,29,.3)),url("assets/event-free-fantasy-landscape.jpg") center/cover; }
.news-visual-picker [data-news-visual="castle-ruins"] i { background: linear-gradient(145deg,rgba(239,191,104,.06),rgba(20,15,10,.3)),url("assets/event-free-castle-ruins.jpg") center/cover; }
.news-visual-picker [data-news-visual="distant-lands"] i { background: linear-gradient(145deg,rgba(83,218,255,.05),rgba(4,20,24,.3)),url("assets/event-free-wide-landscape.jpg") center/cover; }
.news-visual-picker [data-news-visual="plain"] i { background: linear-gradient(145deg, var(--theme-active-a), var(--theme-active-b)); }
.news-visual-picker button.active { border-color: var(--line-strong); color: #fff; background: rgba(47,130,255,.14); }
.custom-image-upload { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: .1rem .55rem; align-items: center; padding: .65rem .75rem; border: 1px dashed var(--line-strong); border-radius: 11px; color: var(--text); background: rgba(47,130,255,.06); cursor: pointer; }
.custom-image-upload > span { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--cyan); background: rgba(47,130,255,.15); font-size: 1.2rem; }
.custom-image-upload strong { font-size: .76rem; }
.custom-image-upload small { color: var(--muted); font-size: .66rem; }
.custom-image-upload.active { border-style: solid; border-color: rgba(84,221,161,.4); background: rgba(84,221,161,.07); }
.publish-grid { margin-bottom: .65rem; }
.compact-switch { padding: .65rem .75rem; }
.news-preview-card { position: relative; min-height: 350px; overflow: hidden; border: 1px solid var(--ornament); border-radius: 16px; background: linear-gradient(180deg, rgba(5,8,24,.08), rgba(5,8,24,.98)), url("assets/bbb-guild-hall.webp") center/cover; }
.news-preview-card[data-visual="raid"] { background-image: linear-gradient(180deg, rgba(84,17,13,.05), rgba(20,5,10,.98)), url("assets/bbb-guild-hall.webp"); background-position: 20% center; }
.news-preview-card[data-visual="senate"] { background-image: linear-gradient(180deg, rgba(104,69,10,.04), rgba(20,13,5,.98)), url("assets/bbb-guild-hall.webp"); background-position: 80% center; }
.news-preview-card[data-visual="chronomancy"] { background-image: linear-gradient(180deg, rgba(4,10,32,.03), rgba(4,7,22,.98)), url("assets/news-chronomancy.webp"); background-position: center; background-size: cover; }
.news-preview-card[data-visual="cosmic"] { background-image: linear-gradient(180deg, rgba(8,4,35,.02), rgba(5,7,24,.98)), url("assets/news-cosmic-voyage.webp"); background-position: center; background-size: cover; }
.news-preview-card[data-visual="cavern"] { background-image: linear-gradient(180deg, rgba(3,13,29,.03), rgba(3,8,20,.98)), url("assets/news-crystal-cavern.webp"); background-position: center; background-size: cover; }
.news-preview-card[data-visual="fire-dungeon"] { background-image: linear-gradient(180deg, rgba(45,8,3,.02), rgba(14,4,8,.98)), url("assets/news-fire-dungeon.webp"); background-position: center; background-size: cover; }
.news-preview-card[data-visual="event-raid"] { background-image: linear-gradient(180deg,rgba(5,8,24,.02),rgba(5,8,24,.96)),url("assets/event-original-raid.jpg"); background-position:center; background-size:cover; }
.news-preview-card[data-visual="event-dungeon"] { background-image: linear-gradient(180deg,rgba(5,8,24,.02),rgba(5,8,24,.96)),url("assets/event-original-dungeon.jpg"); background-position:center; background-size:cover; }
.news-preview-card[data-visual="event-community"] { background-image: linear-gradient(180deg,rgba(20,10,3,.02),rgba(10,7,4,.96)),url("assets/event-original-community.jpg"); background-position:center; background-size:cover; }
.news-preview-card[data-visual="misty-fortress"] { background-image: linear-gradient(180deg,rgba(5,8,24,.02),rgba(5,8,24,.96)),url("assets/event-free-fantasy-landscape.jpg"); background-position:center; background-size:cover; }
.news-preview-card[data-visual="castle-ruins"] { background-image: linear-gradient(180deg,rgba(15,10,5,.02),rgba(10,7,4,.96)),url("assets/event-free-castle-ruins.jpg"); background-position:center; background-size:cover; }
.news-preview-card[data-visual="distant-lands"] { background-image: linear-gradient(180deg,rgba(3,15,18,.02),rgba(3,8,20,.96)),url("assets/event-free-wide-landscape.jpg"); background-position:center; background-size:cover; }
.news-preview-card[data-visual="plain"] { background: linear-gradient(145deg, var(--theme-panel-a), var(--theme-panel-b)); }
.preview-content { position: absolute; inset: auto 1rem 1rem; z-index: 1; text-shadow: 0 2px 12px rgba(0,0,0,.78); }
.preview-content > small { display: block; margin: .65rem 0; color: #d0d8ed; }
.preview-content h3 { margin-bottom: .4rem; font-family: Georgia, serif; font-size: 1.7rem; }
.preview-content p { color: #c4cce0; font-size: .82rem; line-height: 1.5; }
.preview-author { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .68rem; }
.preview-author .avatar { width: 26px; height: 26px; border-width: 1px; font-size: .6rem; }
.preview-checklist { display: grid; gap: .35rem; margin-top: .75rem; color: #bcf8dc; font-size: .68rem; }
.news-studio-shell > footer { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.news-studio-shell > footer small { flex: 1; color: var(--muted-2); }
.guest-status { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; margin: 1rem 0; padding: .8rem; border: 1px solid var(--line); border-radius: 13px; background: rgba(5,8,25,.28); }
.guest-status > div { display: grid; gap: .12rem; }
.guest-status small { color: var(--muted); }
.access-explanation { display: grid; grid-template-columns: auto 1fr; gap: .7rem; padding: .85rem; border: 1px solid rgba(88,221,255,.22); border-radius: 13px; color: var(--muted); background: rgba(47,130,255,.08); }
.access-explanation > span { color: var(--cyan); font-size: 1.25rem; }
.access-explanation p { margin: 0; line-height: 1.5; }
.access-explanation strong { color: #fff; }
.play-orientation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-top: 1rem; padding: .85rem; border: 1px solid var(--line); border-radius: 13px; }
.play-orientation legend { padding: 0 .35rem; color: var(--muted); font-size: .76rem; font-weight: 800; }
.play-orientation label { position: relative; min-width: 0; }
.play-orientation input { position: absolute; opacity: 0; pointer-events: none; }
.play-orientation label > span { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; min-height: 58px; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: rgba(5,8,25,.3); cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.play-orientation label > span:hover { border-color: rgba(88,221,255,.3); transform: translateY(-1px); }
.play-orientation img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); }
.play-orientation strong { line-height: 1.2; overflow-wrap: anywhere; }
.play-orientation i { display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid rgba(164,174,207,.45); border-radius: 50%; color: transparent; font-style: normal; font-size: .66rem; background: rgba(5,8,25,.48); }
.play-orientation input:checked + span { border-color: var(--line-strong); color: #fff; background: linear-gradient(135deg, var(--theme-active-a), var(--theme-active-b)); }
.play-orientation input:checked + span i { border-color: #8ef5d0; color: #06251b; background: #75e6bd; }
.play-orientation input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.access-combat-roles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .55rem; margin-top: 1rem; padding: .85rem; border: 1px solid var(--line); border-radius: 13px; }
.access-combat-roles legend { padding: 0 .35rem; color: var(--muted); font-size: .76rem; font-weight: 800; }
.access-combat-roles label { position: relative; }
.access-combat-roles input { position: absolute; opacity: 0; pointer-events: none; }
.access-combat-roles label > span { display: flex; align-items: center; justify-content: center; gap: .42rem; min-height: 52px; padding: .5rem; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: rgba(5,8,25,.3); cursor: pointer; }
.access-combat-roles img { width: 34px; height: 34px; }
.access-combat-roles input:checked + span { border-color: var(--line-strong); color: #fff; background: linear-gradient(135deg, var(--theme-active-a), var(--theme-active-b)); }
.access-combat-roles input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.request-combat-roles { display: grid; gap: .3rem; margin-top: .55rem; }
.request-combat-roles > small { color: var(--muted); }
.request-combat-roles > span { display: flex; flex-wrap: wrap; gap: .35rem; }
.notification-list { display: grid; gap: .6rem; margin-top: 1rem; }
.notification-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; width: 100%; padding: .85rem; border: 1px solid var(--line); border-radius: 13px; color: inherit; background: rgba(5,8,25,.28); font: inherit; text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.notification-item.important { border-color: var(--line-strong); background: rgba(47,130,255,.09); }
.notification-item.read { opacity: .66; }
.notification-item:hover, .notification-item:focus-visible { border-color: var(--cyan); background: rgba(47,130,255,.14); transform: translateY(-1px); }
.notification-copy { display: grid; gap: .12rem; min-width: 0; }
.notification-copy > span, .notification-copy small { margin: 0; color: var(--muted); font-size: .72rem; overflow-wrap: anywhere; }
.notification-open-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; color: var(--cyan); background: rgba(88,221,255,.08); font-size: 1rem; }
.notification-glyph { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--cyan); background: rgba(47,130,255,.14); }
.role-hierarchy { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin: 1rem 0; color: #eef4ff; font-weight: 800; }
.role-hierarchy span { color: var(--cyan); }
.guild-stat-mode { display:flex; justify-content:center; gap:.28rem; width:max-content; max-width:100%; margin:0 auto 1rem; padding:.24rem; border:1px solid var(--line); border-radius:12px; background:rgba(5,8,25,.34); }
.guild-stat-mode button { min-height:36px; padding:.5rem .82rem; border:0; border-radius:9px; color:var(--muted); background:transparent; font:inherit; font-size:.72rem; font-weight:800; cursor:pointer; transition:color .18s ease,background .18s ease,box-shadow .18s ease; }
.guild-stat-mode button:hover,.guild-stat-mode button:focus-visible { color:#fff; }
.guild-stat-mode button[aria-pressed="true"] { color:#fff; background:linear-gradient(135deg,var(--theme-active-a),var(--theme-active-b)); box-shadow:0 7px 18px rgba(5,12,35,.24); }
.guild-stat-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-bottom: 1rem; }
.guild-stat-summary article { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: .65rem; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; text-align: left; background: rgba(47,130,255,.07); }
.guild-stat-summary article > img { grid-row: 1 / 3; width: 42px; height: 42px; border: 1px solid rgba(88,221,255,.28); border-radius: 12px; object-fit: cover; box-shadow: 0 7px 18px rgba(0,0,0,.25); }
.guild-stat-summary strong { display: block; color: #fff; font-family: Georgia, serif; font-size: 1.8rem; }
.guild-stat-summary span { color: var(--muted); font-size: .72rem; }
.guild-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.guild-stat-table { padding: .85rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(5,8,25,.3); }
.guild-stat-table h3 { display: flex; align-items: center; gap: .55rem; margin: 0 0 .55rem; font-family: Georgia, serif; }
.guild-stat-heading-icon { display: inline-grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid rgba(88,221,255,.24); border-radius: 9px; background: rgba(47,130,255,.1); }
.guild-stat-heading-icon img { width: 100%; height: 100%; object-fit: cover; }
.guild-stat-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem; min-height: 38px; padding: .3rem 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; }
.guild-stat-label { display: inline-flex; min-width: 0; align-items: center; gap: .55rem; }
.guild-stat-label img, .guild-stat-fallback { width: 27px; height: 27px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; object-fit: cover; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.guild-stat-fallback { display: inline-grid; place-items: center; color: var(--cyan); background: rgba(47,130,255,.12); }
.guild-stat-label > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guild-stat-row b { color: #fff; }
.month-weekdays, .month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.month-weekdays { margin: 1rem 0 .35rem; color: var(--muted); font-size: .68rem; text-align: center; }
.month-grid button { position: relative; min-height: 44px; border: 0; border-radius: 10px; color: #e7ebf8; background: rgba(47,130,255,.05); cursor: pointer; }
.month-grid button.outside { color: var(--muted-2); opacity: .55; }
.month-grid button.selected { color: #fff; background: linear-gradient(145deg, rgba(41,116,226,.62), rgba(94,61,174,.55)); }
.month-grid button.has-event::after { position: absolute; right: 50%; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); content: ''; transform: translateX(50%); }
.roster-manager { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 1rem; }
.roster-manager section { padding: .9rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(5,8,25,.3); }
.roster-manager section h3 { margin: 0 0 .55rem; }
.roster-manager .mini-person { margin: .25rem .25rem .25rem 0; }
.carousel-heading, .bug-card-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.carousel-heading button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: rgba(255,255,255,.03); cursor: pointer; }
.senate-carousel h3 { margin: .6rem 0 .35rem; font-family: Georgia, serif; }
.senate-carousel .edit-poll { display: block; margin-top: .6rem; }
.charter-card { position: relative; }
.charter-card .tile-edit { position: absolute; top: .7rem; right: .7rem; }
.charter-card .text-action { display: inline-flex; margin-top: .7rem; }
.tile-visual-choice { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: .75rem; width: 100%; margin: .85rem 0; padding: .75rem; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: rgba(47,130,255,.06); text-align: left; cursor: pointer; }
.tile-visual-choice > span:first-child { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid var(--line-strong); border-radius: 15px; background: rgba(5,8,25,.46); }
.tile-visual-choice img { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; }
.tile-visual-choice .visual-emoji { font-size: 2rem; }
.tile-visual-choice > span:nth-child(2) { display: grid; gap: .15rem; }
.tile-visual-choice small { color: var(--muted); }
.tile-visual-choice b { color: var(--cyan); font-size: .7rem; text-transform: uppercase; }
.bug-card-heading > div { display: flex; align-items: center; gap: .45rem; }
.bug-card-actions { display: flex !important; gap: .35rem !important; }
.icon-action { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.03); cursor: pointer; }
.icon-action:hover, .icon-action:focus-visible { border-color: var(--cyan); color: #fff; }
.icon-action.danger:hover, .icon-action.danger:focus-visible { border-color: var(--red); color: var(--red); }
.council-heading .permission-chip { align-self: center; padding: .65rem .9rem; }
.council-tabs { margin-bottom: 1.4rem; }
.council-layout { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr); gap: 1rem; align-items: start; }
.council-composer { display: grid; align-content: start; gap: 1rem; padding: 1.15rem; background: linear-gradient(150deg, rgba(25,35,75,.82), rgba(9,13,38,.92)); }
.council-composer-head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .8rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.council-composer-head > span { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(88,221,255,.25); border-radius: 13px; color: var(--cyan); background: rgba(47,130,255,.12); font-size: 1.15rem; }
.council-composer-head h2 { margin: .1rem 0 .2rem; font-family: Georgia, serif; font-size: 1.55rem; }
.council-composer-head small { color: var(--muted); }
.council-composer > label:not(.custom-image-upload) { gap: .45rem; }
.council-composer > label > span { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.council-composer > label > span small { color: var(--muted-2); font-weight: 600; }
.council-composer textarea { min-height: 128px; line-height: 1.45; }
.council-image-upload { margin-top: .1rem; padding: .8rem; }
.council-send { width: 100%; margin-top: .1rem; }
.council-feed { display: grid; align-content: start; gap: .85rem; }
.council-message { padding: 1.1rem; }
.council-message header { display: flex; justify-content: space-between; gap: .7rem; }
.council-message time, .council-message a { color: var(--muted); font-size: .7rem; }
.council-message p { color: #d6dcef; line-height: 1.55; }
.council-message img { display: block; width: 100%; max-height: 420px; margin: .7rem 0; border-radius: 12px; object-fit: contain; background: rgba(0,0,0,.28); }
.bot-page { padding: 1.35rem; background: linear-gradient(150deg, rgba(25,35,75,.72), rgba(9,13,38,.9)); }
.bot-page #bot-page-body { min-height: 180px; margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; color: #d6dcef; background: rgba(5,8,25,.28); line-height: 1.65; white-space: normal; }
.bot-page > small { color: var(--muted-2); }
.bug-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.bug-card { display: grid; align-content: start; gap: .7rem; padding: 1.1rem; background: linear-gradient(150deg, rgba(25,35,75,.58), rgba(9,13,38,.86)); }
.bug-card.resolved { opacity: .72; }
.bug-card h3, .bug-card p { margin: 0; }
.bug-card p { color: var(--muted); line-height: 1.5; }
.bug-card details { color: var(--muted); font-size: .74rem; }
.bug-card footer { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-top: .5rem; }
.bug-card footer small { color: var(--muted-2); }
.severity { padding: .25rem .45rem; border-radius: 999px; color: #d8e6ff; background: rgba(47,130,255,.12); font-size: .64rem; font-weight: 800; }
.severity.high, .severity.blocking { color: #ffd6ce; background: rgba(255,80,70,.16); }
.member-detail-dialog { --detail-class-rgb: 88, 221, 255; border-color: rgba(var(--detail-class-rgb), .58); }
.member-detail-dialog.class-warrior { --detail-class-rgb: 176, 118, 72; }
.member-detail-dialog.class-mage { --detail-class-rgb: 62, 158, 229; }
.member-detail-dialog.class-paladin { --detail-class-rgb: 224, 104, 166; }
.member-detail-dialog.class-druid { --detail-class-rgb: 255, 129, 28; }
.member-detail-dialog.class-hunter { --detail-class-rgb: 113, 171, 73; }
.member-detail-dialog.class-priest { --detail-class-rgb: 211, 211, 225; }
.member-detail-dialog.class-rogue { --detail-class-rgb: 238, 211, 70; }
.member-detail-dialog.class-shaman { --detail-class-rgb: 32, 128, 224; }
.member-detail-dialog.class-warlock { --detail-class-rgb: 143, 84, 194; }
.member-detail-dialog form { max-height: calc(100dvh - 2rem); padding: 1.25rem; overflow-y: auto; background: radial-gradient(circle at 88% 8%, rgba(var(--detail-class-rgb), .2), transparent 35%), #101631; scrollbar-color: rgba(var(--detail-class-rgb), .65) transparent; }
.member-detail-dialog form > header { background: linear-gradient(180deg, rgba(var(--detail-class-rgb), .16), #101631 82%); }
.member-detail-dialog form > footer { background: linear-gradient(0deg, rgba(var(--detail-class-rgb), .13), #101631 82%); }
.member-detail-hero { display: grid; grid-template-columns: .75fr 1.25fr; gap: .8rem; margin: 1rem 0; }
.member-detail-person, .member-detail-main { display: flex; align-items: center; gap: .8rem; min-height: 120px; padding: 1rem; border: 1px solid rgba(var(--detail-class-rgb), .38); border-radius: 16px; background: linear-gradient(135deg, rgba(var(--detail-class-rgb), .2), rgba(8,13,39,.74)); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.member-detail-person > div, .member-detail-main > div { display: grid; gap: .18rem; }
.member-detail-person .grade { position: static; width: max-content; }
.member-detail-person h3 { margin: .15rem 0 0; font-family: Georgia, serif; font-size: 1.55rem; }
.member-detail-person p { margin: 0; color: var(--muted); }
.member-detail-main > img { width: 76px; height: 76px; }
.member-detail-main small, .member-detail-main span { color: var(--muted); }
.member-detail-main #member-detail-build { display: grid; gap: .32rem; }
.member-detail-main strong { font-family: Georgia, serif; font-size: 1.35rem; }
.member-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.detail-section { padding: 1rem; }
.member-detail-dialog .detail-section { border-color: rgba(var(--detail-class-rgb), .34); background: linear-gradient(145deg, rgba(var(--detail-class-rgb), .14), rgba(7,11,33,.76)); }
.member-detail-dialog .detail-section .eyebrow, .member-detail-dialog .count { color: rgb(var(--detail-class-rgb)); }
.member-detail-alts { display: grid; gap: .5rem; }
.member-detail-alt { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .65rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.member-detail-alt img { width: 42px; height: 42px; }
.member-detail-alt div { display: grid; gap: .12rem; }
.member-detail-alt span, .member-detail-alt small { color: var(--muted); font-size: .7rem; }
.member-upcoming-events { display: grid; gap: .5rem; }
.member-upcoming-events article { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: .65rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.member-upcoming-events time { display: grid; justify-items: center; color: var(--muted); font-size: .63rem; }
.member-upcoming-events time strong { color: #fff; font-family: Georgia, serif; font-size: 1.35rem; }
.member-upcoming-events article > div { display: grid; justify-items: start; gap: .22rem; }
.member-upcoming-events article > div > strong { font-size: .78rem; }
.member-upcoming-events article small { color: var(--muted); }
.empty-detail { margin: .75rem 0 0; color: var(--muted); font-size: .75rem; }
.craft-request-list { display: grid; gap: .75rem; margin: 1rem 0; }
.craft-request-card { display: grid; gap: .55rem; padding: 1rem; }
.craft-request-card > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.craft-request-card > header > div { display: grid; justify-items: start; gap: .35rem; }
.craft-request-card p, .craft-request-card blockquote, .craft-request-card small { margin: 0; color: var(--muted); }
.craft-request-card blockquote { padding: .65rem .75rem; border-left: 3px solid var(--cyan); border-radius: 0 10px 10px 0; background: rgba(47,130,255,.07); }
.craft-request-card footer { display: flex; justify-content: flex-end; gap: .5rem; padding: .25rem 0 0; border: 0; background: transparent; }
.craft-request-card footer button { min-height: 38px; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 10px; color: #fff; background: rgba(47,130,255,.12); cursor: pointer; }
.craft-status { padding: .3rem .55rem; border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.05); font-size: .68rem; font-weight: 850; white-space: nowrap; }
.craft-status.open { color: #bfffe0; background: rgba(84,221,161,.12); }
.craft-status.accepted { color: #d8efff; background: rgba(47,130,255,.16); }
#craft-request-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-right: .2rem; padding: 0 .3rem; border: 2px solid #101631; border-radius: 999px; color: #fff; background: #e94c67; box-shadow: 0 0 0 3px rgba(233,76,103,.16), 0 0 16px rgba(233,76,103,.34); font-size: .62rem; font-weight: 900; }
.toast { position: fixed; z-index: 150; inset: auto 1.4rem 1.4rem auto; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: .7rem; width: auto; min-width: min(330px, calc(100vw - 2.8rem)); max-width: min(520px, calc(100vw - 2.8rem)); margin: 0; padding: .78rem .9rem; border: 1px solid rgba(84,221,161,.42); border-radius: 14px; color: #dffff0; background: rgba(16,45,47,.97); box-shadow: 0 18px 55px rgba(0,0,0,.42); opacity: 0; transform: translateY(15px); pointer-events: none; transition: .18s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #071a17; background: var(--green); font-size: 1rem; font-weight: 950; }
.toast-message { line-height: 1.4; }
.toast.pending { border-color: rgba(88,221,255,.42); color: #e2faff; background: rgba(14,31,55,.97); }
.toast.pending .toast-icon { color: transparent; background: transparent; border: 3px solid rgba(88,221,255,.25); border-top-color: var(--cyan); border-radius: 50%; animation: toast-spin .75s linear infinite; }
.toast.error { border-color: rgba(255,100,120,.48); color: #ffe5e9; background: rgba(59,18,31,.97); }
.toast.error .toast-icon { color: #fff; background: #d94b68; }
.toast.info { border-color: rgba(88,221,255,.3); color: #e2f7ff; background: rgba(13,30,50,.97); }
.toast.info .toast-icon { color: #061a27; background: var(--cyan); }
.is-saving { cursor: wait !important; opacity: .72; }
@keyframes toast-spin { to { transform: rotate(360deg); } }
.pull-refresh-indicator { position: fixed; z-index: 180; top: max(.7rem, env(safe-area-inset-top)); left: 50%; display: flex; align-items: center; gap: .5rem; min-height: 42px; padding: .55rem .8rem; border: 1px solid var(--line-strong); border-radius: 999px; color: #eaf4ff; background: rgba(9,14,39,.96); box-shadow: 0 14px 40px rgba(0,0,0,.4); opacity: 0; transform: translate(-50%, -70px); transition: opacity .16s ease, transform .16s ease; pointer-events: none; }
.pull-refresh-indicator span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: var(--cyan); background: rgba(47,130,255,.16); font-weight: 900; transition: transform .16s ease; }
.pull-refresh-indicator strong { white-space: nowrap; font-size: .7rem; }
.pull-refresh-indicator.visible { opacity: 1; transform: translate(-50%, 0); }
.pull-refresh-indicator.ready span { transform: rotate(180deg); }
.pull-refresh-indicator.refreshing span { animation: pull-refresh-spin .8s linear infinite; }
@keyframes pull-refresh-spin { to { transform: rotate(360deg); } }
@media (pointer: coarse) and (max-width: 1180px) { html { overscroll-behavior-y: contain; } }
.mobile-nav { display: none; }

@container character-builder (max-width: 620px) {
  .character-builder-heading { display: grid; align-items: start; }
  .source-chip { justify-self: start; text-align: center; }
  .character-path { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .character-path > i { display: none; }
  .character-name-grid { grid-template-columns: 1fr; }
  #profession-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container character-builder (max-width: 360px) {
  .character-builder-heading { display: grid; }
  .source-chip { justify-self: start; }
  .character-path, #profession-options { grid-template-columns: 1fr; }
}

@container admin-members (max-width: 720px) {
  .admin-member { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "name save" "role status"; gap: .42rem; padding: .5rem 0; }
  .admin-member > div:first-child { grid-area: name; }
  .admin-member > select:nth-of-type(1) { grid-area: role; }
  .admin-member > select:nth-of-type(2) { grid-area: status; }
  .admin-member-actions { grid-area: save; justify-self: end; }
  .admin-member select { width: 100%; }
}

@container admin-members (max-width: 430px) {
  .admin-member-tools { grid-template-columns: 1fr; }
  .admin-member { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "name save" "role role" "status status"; }
}

@container admin-dialog (max-width: 740px) {
  .admin-grid { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .topbar { grid-template-columns: 1fr auto; padding-inline: 3vw; }
  .desktop-nav { display: none; }
  .news-grid, .senate-layout, .planning-layout { grid-template-columns: 1fr; }
  .event-preview { grid-column: auto; }
  .feature-story { min-height: 330px; }
  .news-story-copy { max-width: 88%; }
  .poll-icon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feature-content { width: 65%; }
  .member-grid { grid-template-columns: repeat(2, 1fr); }
  .news-studio-layout { grid-template-columns: 190px 1fr; }
  .news-preview { grid-column: 1 / -1; }
  .news-preview-card { min-height: 290px; }
  .filter-bar { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .filter-bar .search-field { grid-column: 1 / span 11; grid-row: 1; }
  .filter-bar .filter-clear-button { grid-column: 12; grid-row: 1; justify-self: end; }
  .filter-bar .filter-chips { grid-column: 1 / -1; grid-row: 2; }
  .filter-bar #race-filter { grid-column: 1 / span 4; grid-row: 3; }
  .filter-bar #profession-filter { grid-column: 5 / span 4; grid-row: 3; }
  .filter-bar #grade-filter { grid-column: 9 / span 4; grid-row: 3; }
  .guild-heading-actions { align-items: stretch; flex-direction: column; }
  .admin-grid { grid-template-columns: 1fr; }
  .mobile-nav { position: fixed; z-index: 40; right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); left: .75rem; display: flex; flex-wrap: nowrap; padding: .4rem; border: 1px solid var(--line); border-radius: 18px; background: rgba(10,13,33,.94); box-shadow: 0 18px 60px rgba(0,0,0,.45); backdrop-filter: blur(20px); }
  .mobile-nav button { display: grid; flex: 1 1 0; min-width: 0; place-items: center; gap: .18rem; min-height: 52px; padding-inline: .2rem; border: 0; border-radius: 13px; color: var(--muted); background: transparent; font-size: .62rem; font-weight: 750; white-space: nowrap; }
  .mobile-nav button span { font-size: 1rem; }
  .mobile-nav button.active { color: #fff; background: rgba(48,118,226,.2); }
}

  @media (max-width: 680px) {
  .topbar { min-height: 70px; }
  .brand-copy, .profile-name, .presence-dot, .notification-button { display: none; }
  .profile-button { padding: .2rem; border-color: transparent; background: transparent; }
  main { width: min(100% - 1.1rem, 1200px); padding-top: 2.2rem; }
  .page-heading, .content-heading { align-items: stretch; flex-direction: column; gap: 1rem; }
  .page-heading .primary-action, .page-heading .secondary-action { width: 100%; }
  .status-badge { align-self: flex-start; }
  .agora-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; overflow: visible; }
  .agora-tabs button { justify-content: center; min-width: 0; padding-inline: .35rem; font-size: .7rem; text-align: center; }
  .council-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; overflow: visible; }
  .council-tabs button { justify-content: center; min-width: 0; min-height: 48px; padding-inline: .5rem; }
  .guild-stat-summary, .guild-stat-grid, .roster-manager { grid-template-columns: 1fr; }
  .guild-stat-mode { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .guild-stat-mode button { padding-inline:.45rem; }
  .news-grid, .charter-grid, .member-grid { grid-template-columns: 1fr; gap: .7rem; }
  .feature-story { min-height: 390px; }
  .news-story-card { min-height: 300px; padding: 1.1rem; }
  .news-story-copy { max-width: 100%; min-height: 270px; }
  .news-story-meta { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .visual-library-controls { grid-template-columns: 1fr; }
  .visual-library-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .visual-library-tabs button { padding-inline: .4rem; }
  .feature-content { width: 100%; margin-top: 7.5rem; }
  .portal-orbit { top: 3.2rem; right: -1.5rem; width: 160px; height: 160px; opacity: .75; }
  .quick-card, .news-list, .poll-card { padding: 1rem; }
  .poll-header, .poll-card footer { align-items: flex-start; flex-direction: column; }
  .poll-builder-section { padding: .8rem; }
  .publication-choice-grid { grid-template-columns: 1fr; }
  .publication-choice-grid label > span { grid-template-columns: auto 1fr; min-height: 0; align-items: center; }
  .publication-choice-grid label > span b { grid-row: 1 / 3; }
  .poll-icon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filter-bar { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .55rem; padding: .65rem; }
  .filter-bar .search-field { grid-column: 1 / span 10; grid-row: 1; }
  .filter-bar .filter-clear-button { grid-column: 11 / span 2; grid-row: 1; justify-self: end; }
  .filter-bar .filter-chips { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .filter-bar #race-filter { grid-column: 1 / -1; grid-row: 3; }
  .filter-bar #profession-filter { grid-column: 1 / -1; grid-row: 4; }
  .filter-bar #grade-filter { grid-column: 1 / -1; grid-row: 5; }
  .filter-bar .filter-chips { overflow-x: auto; padding-bottom: .15rem; scrollbar-width: none; }
  .filter-bar .filter-chips::-webkit-scrollbar { display: none; }
  .filter-bar .filter-chips button { flex: 1 0 auto; }
  .event-card, .featured-event { grid-template-columns: 112px minmax(0, 1fr); padding-right: .75rem; }
  .event-cover { min-height: 178px; }
  .event-cover > img { min-height: 178px; }
  .event-cover .event-date-block { left: .45rem; bottom: .45rem; width: 58px; min-height: 72px; }
  .event-details { padding-block: .75rem; }
  .event-details h2 { font-size: 1.08rem; }
  .simple-attendance { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .event-card .attendance-actions { grid-column: 1 / -1; margin-right: -.75rem; padding: 0 .75rem .75rem; }
  .event-card > .secondary-action { grid-column: 1 / -1; width: 100%; }
  .event-actions { align-items: stretch; flex-direction: column; }
  .attendance-actions { display: grid; grid-template-columns: repeat(3, 1fr); }
  .planning-calendar-action { margin-top: -.2rem; }
  .planning-calendar-action #open-calendar { width: auto; min-height: 38px; }
  .week-frieze { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: .3rem; }
  .week-arrow { width: 34px; height: 48px; border-radius: 11px; }
  .week-strip { gap: .12rem; padding: .35rem; }
  .week-strip button { min-height: 58px; padding-inline: 0; border-radius: 10px; }
  .week-strip button small { overflow: hidden; max-width: 100%; font-size: .51rem; text-overflow: clip; }
  .week-strip button strong { font-size: .92rem; }
  .past-events-panel > header { align-items: flex-start; }
  .past-events-panel h2 { font-size: 1rem; }
  .past-event-card { grid-template-columns: 68px minmax(0, 1fr) auto; }
  .past-event-card > img { width: 68px; height: 72px; }
  .past-event-summary-stats { grid-template-columns: 1fr; }
  .admin-summary, .admin-grid, .admin-access-guide, .form-grid, .slot-grid { grid-template-columns: 1fr; }
  .admin-member-tools { grid-template-columns: 1fr; gap: .5rem; }
  .admin-member { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "name save" "role role" "status status"; gap: .42rem; padding: .5rem 0; }
  .admin-member > div:first-child { grid-area: name; }
  .admin-member > select:nth-of-type(1) { grid-area: role; }
  .admin-member > select:nth-of-type(2) { grid-area: status; }
  .admin-member-actions { grid-area: save; width: auto; }
  .event-visual-grid { grid-template-columns: 1fr; }
  .event-visual-choice { grid-template-columns: 78px minmax(0,1fr) auto; }
  .event-visual-choice > img { width: 78px; height: 56px; }
  .character-path { grid-template-columns: 1fr 1fr; }
  .character-name-grid { grid-template-columns: 1fr; }
  .character-path > i { display: none; }
  #profession-options { grid-template-columns: repeat(2, 1fr); }
  .compact-professions #alt-profession-options { grid-template-columns: repeat(2, 1fr); }
  .access-request-card, .news-studio-layout { grid-template-columns: 1fr; }
  .member-detail-hero, .member-detail-grid { grid-template-columns: 1fr; }
  .council-layout, .bug-grid { grid-template-columns: 1fr; }
  .council-heading .permission-chip { align-self: flex-start; width: auto; }
  .council-composer { gap: 1.05rem; padding: 1rem; }
  .council-composer-head { padding-bottom: .85rem; }
  .council-composer textarea { min-height: 140px; }
  .council-image-upload { grid-template-columns: 38px minmax(0, 1fr); gap: .18rem .7rem; }
  .council-image-upload > span { width: 38px; height: 38px; }
  .council-image-upload small { line-height: 1.35; }
  .bug-card footer { align-items: stretch; flex-direction: column; }
  .request-decision { align-items: stretch; flex-direction: column; }
  .news-preview { grid-column: auto; }
  .template-rail { display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; }
  .template-rail > .eyebrow, .template-rail > h3 { grid-column: 1 / -1; }
  .news-template { margin: 0; }
  .news-visual-picker { grid-template-columns: repeat(2, 1fr); }
  .news-studio-shell > footer { align-items: stretch; flex-direction: column; }
  .news-studio-shell > footer small { margin-bottom: .25rem; }
  .drawer-dialog { width:100vw; height:100dvh; border-radius:0; }
  .drawer-shell { grid-template-columns:1fr; grid-template-rows:auto auto minmax(0,1fr) auto; }
  .drawer-shell > header { grid-column:1; grid-row:1; align-items:flex-start; gap:.65rem; padding:1rem; }
  .drawer-shell > header > div:first-child { min-width: 0; }
  .drawer-shell > header h2 { font-size: 1.65rem; }
  .drawer-header-actions { flex: 0 0 auto; gap: .35rem; }
  .drawer-header-actions .danger-text { min-height: 36px; padding: .45rem .55rem; font-size: .68rem; }
  .drawer-header-actions .close-button { flex: 0 0 36px; width: 36px; height: 36px; }
  .drawer-tabs { grid-column:1; grid-row:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; margin:0; padding:.55rem 1rem; overflow:visible; border-right:0; border-bottom:1px solid var(--line); }
  .drawer-tabs button { justify-content: center; min-width: 0; text-align: center; white-space: normal; }
  .drawer-tabs button:last-child { grid-column: 1 / -1; }
  .settings-panel { grid-column:1; grid-row:3; padding:1rem 1rem 1.75rem; scroll-padding-block:1rem 1.75rem; scrollbar-gutter:auto; }
  .recruitment-admin-card { padding:1rem; }
  .recruitment-admin-card .secondary-action { width:100%; }
  .settings-actions { grid-column:1; grid-row:4; padding:.85rem 1rem max(.9rem,env(safe-area-inset-bottom)); }
  #admin-dialog { width:100vw; height:100dvh; max-height:none; border-radius:0; }
  #admin-dialog form { padding:0 1rem 1rem; scrollbar-gutter:auto; }
  #admin-dialog form>header { margin:0 0 .75rem; padding:1rem 0; }
  .charter-card { grid-template-columns: 58px minmax(0, 1fr); min-height: 0; padding: 1rem; }
  .tile-card-visual { width: 58px; height: 58px; border-radius: 16px; }
  .tile-card-visual-image { width: 40px; height: 40px; border-radius: 10px; }
  .tile-card-visual .visual-emoji { font-size: 1.9rem; }
  .charter-card h3 { margin-top: .15rem; font-size: 1.25rem; }
  .discord-profile-card { grid-template-columns: auto minmax(0, 1fr); }
  .discord-profile-card > button { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
  .battle-net-link-card { grid-template-columns: auto minmax(0, 1fr); }
  .battle-net-link-card > button { grid-column: 1 / -1; width: 100%; }
  .armory-preparation > header { grid-template-columns: auto minmax(0,1fr); }
  .armory-preparation > header > .status-chip { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
  .armory-provider-grid { grid-template-columns: 1fr; }
  .armory-preparation > button { justify-self: stretch; }
  .tile-visual-choice { grid-template-columns: 48px minmax(0, 1fr); }
  .tile-visual-choice > span:first-child { width: 48px; height: 48px; }
  .tile-visual-choice > b { grid-column: 1 / -1; text-align: center; }
  .security-action-card { grid-template-columns: auto minmax(0, 1fr); }
  .security-action-card > button { grid-column: 1 / -1; width: 100%; }
  .builder-dialog footer { flex-wrap: wrap; }
  .builder-dialog footer .primary-action, .builder-dialog footer .secondary-action { flex: 1; }
  .login-gate { place-items: start center; padding-inline: .65rem; }
  .login-card { width: 100%; margin-block: auto; padding: 1rem; }
  .login-brand h1 { font-size: 1.55rem; }
  .login-copy { margin: .9rem 0; }
  .passkey-action { min-height: 58px; }
  .access-combat-roles { grid-template-columns: 1fr; }
  .play-orientation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-step-actions { display: grid; grid-template-columns: 1fr; }
}

@media (max-height: 720px) {
  .login-gate { place-items: start center; }
  .login-card { margin-block: auto; }
  .login-copy { margin-block: .7rem; }
  .login-separator { margin-block: .65rem; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }