:root {
  --bg: #17181b; --panel: #222429; --panel2: #2b2d33; --line: #383b42; --text: #e8e6e3; --muted: #9a9ca3;
  --gold: #dea626; --gold-dark: #3a2e10; --on-gold: #1d1606; --green: #58a05c; --red: #b04a4c; --blurple: #5865f2;
  --q-epic: #b77bf0; --q-rare: #3d9cff; --q-legendary: #ff8000;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
header { display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: #101113; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
header img { width: 32px; height: 32px; border-radius: 50%; }
.brand, .where, .me { display: flex; align-items: center; gap: 8px; color: var(--text); }
.brand span { font-weight: 700; color: var(--gold); font-size: 18px; }
.where { padding-left: 16px; border-left: 1px solid var(--line); font-weight: 600; }
.me { margin-left: auto; font-size: 14px; }
.me a { color: var(--muted); }
main { max-width: 1180px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { margin: 0 0 6px; font-size: 26px; }
h2 { margin: 32px 0 10px; font-size: 19px; }
h2 small { color: var(--muted); font-weight: 400; font-size: 14px; }
code { background: var(--panel2); padding: 1px 5px; border-radius: 4px; }
.empty, .note { color: var(--muted); }
.note { font-size: 13px; margin: 0 0 10px; }
.btn { display: inline-block; padding: 9px 16px; border-radius: 8px; background: var(--gold); color: var(--on-gold); font-weight: 700; }
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn.discord { background: var(--blurple); color: #fff; }
.btn.ghost { background: var(--panel2); color: var(--text); padding: 6px 12px; }
.btn.small { font-size: 13px; }
.badge { display: inline-block; font-size: 12px; padding: 1px 7px; border-radius: 10px; background: var(--panel2); color: var(--muted); vertical-align: middle; font-weight: 600; }
.badge.bad { background: var(--red); color: #fff; }
.badge.mine { background: var(--gold-dark); color: var(--gold); }

.hero { text-align: center; padding: 60px 10px; }
.hero-img { width: 120px; height: 120px; border-radius: 50%; border: 3px solid var(--gold); }
.hero h1 { font-size: 40px; color: var(--gold); margin-top: 14px; }
.tag { font-style: italic; color: var(--muted); margin-top: 0; }
.servers { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 16px; }
.server { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: var(--text); }
.server:hover { border-color: var(--gold); text-decoration: none; }
.server img, .server span { width: 64px; height: 64px; border-radius: 50%; }
.server span { display: grid; place-items: center; background: var(--panel2); font-size: 28px; font-weight: 700; }
.server small { color: var(--gold); }

.cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.cal-head h1 { margin: 0; min-width: 230px; text-align: center; color: var(--gold); }
.grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.wd { color: var(--muted); font-size: 13px; padding: 2px 6px; }
.day { background: var(--panel); border-radius: 8px; min-height: 112px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.day.other { opacity: .45; }
.day.today { outline: 2px solid var(--gold); }
.num { font-weight: 700; font-size: 14px; }
.day.today .num { color: var(--gold); }
.chip { display: block; border-radius: 6px; padding: 3px 6px; font-size: 12px; line-height: 1.3; color: var(--on-gold); background: var(--gold); overflow: hidden; }
.chip b, .chip small, .chip time { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip time { font-weight: 600; }
a.chip:hover { text-decoration: none; filter: brightness(1.1); }
.chip.full { background: var(--green); color: #0c1d0d; }
.chip.planned { background: var(--gold-dark); color: #e5cf98; border: 1px solid var(--gold); }
.chip.cancelled { background: #4b2628; color: #d9a0a0; text-decoration: line-through; }
.chip.ended { background: #3b3d43; color: #a7a9ae; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--muted); font-size: 13px; margin-top: 10px; }
.legend .chip { width: 18px; height: 14px; padding: 0; display: inline-block; vertical-align: middle; }
.rows { display: flex; flex-direction: column; gap: 6px; }
.row { display: grid; grid-template-columns: 210px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 14px; background: var(--panel); border-radius: 8px; color: var(--text); }
.row:hover { text-decoration: none; background: var(--panel2); }
.row span { color: var(--muted); font-size: 13px; }

.when { color: var(--muted); margin: 0 0 12px; }
.notes { background: var(--panel); border-left: 3px solid var(--gold); padding: 10px 14px; border-radius: 6px; white-space: pre-wrap; }
.you { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--panel); padding: 12px 16px; border-radius: 10px; margin: 16px 0; }
.roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.role { background: var(--panel); border-radius: 10px; padding: 12px 14px; }
.role h3 { margin: 0 0 8px; font-size: 16px; display: flex; justify-content: space-between; }
.role h3 span { color: var(--muted); font-weight: 600; }
.role ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.role li small { display: block; color: var(--muted); margin-left: 16px; font-size: 12px; }
.role li > span:last-child { color: var(--muted); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.c-warrior { background: #C69B6D; }
.c-paladin { background: #F48CBA; }
.c-hunter { background: #AAD372; }
.c-rogue { background: #FFF468; }
.c-priest { background: #FFFFFF; }
.c-shaman { background: #0070DD; }
.c-mage { background: #3FC7EB; }
.c-warlock { background: #8788EE; }
.c-druid { background: #FF7C0A; }
.c-other { background: #9d9d9d; }
.row .badge { justify-self: start; }
.cls { color: var(--muted); font-size: 13px; }
.q-epic { color: var(--q-epic); } .q-rare { color: var(--q-rare); } .q-legendary { color: var(--q-legendary); }

.flash { background: var(--gold-dark); border: 1px solid var(--gold); color: var(--text); padding: 10px 14px; border-radius: 10px; margin: 14px 0; }

/* cards */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 16px 0; }
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.card-head h2 { margin: 0; font-size: 18px; }
.card-head .grow { flex: 1; }
.card-head a.small { font-size: 13px; }
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--panel2); color: var(--muted); }
.pill.st-in, .pill.st-late { background: #1f3a22; color: #8fd694; }
.pill.st-bench, .pill.st-held { background: #3a2e10; color: #e7c46a; }
.pill.st-tentative { background: #2b2d33; color: #c9cbd1; }
.pill.st-absent { background: #3d2224; color: #e39a9a; }

/* form fields */
.fields { display: grid; grid-template-columns: 1.2fr 1fr 2fr; gap: 12px; }
.fields label { display: flex; flex-direction: column; gap: 6px; }
.fields label > span { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.fields label small { text-transform: none; font-weight: 400; letter-spacing: 0; }
input, select { width: 100%; background: #131418; color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font: inherit; }
input::placeholder { color: #6d7078; }
input:focus, select:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: transparent; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
button { font: inherit; cursor: pointer; }
button.btn { border: 0; font-weight: 700; }

/* role tiles */
.role-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 16px; }
.role-tiles.one { grid-template-columns: minmax(0, 360px); }
.role-btn { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); border-left: 4px solid var(--role); transition: transform .08s, background .15s; }
.role-btn:hover { background: #33363d; transform: translateY(-1px); }
.role-btn .ico { grid-row: span 2; font-size: 26px; line-height: 1; }
.role-btn b { font-size: 16px; }
.role-btn .count { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.role-btn small { grid-column: 2 / 4; color: var(--muted); font-size: 12px; }
.role-btn.on { background: color-mix(in srgb, var(--role) 18%, var(--panel2)); border-color: var(--role); box-shadow: 0 0 0 1px var(--role); }
.role-btn.on small { color: var(--text); }
.role-tank { --role: #4f8cff; } .role-healer { --role: #3fbf6a; } .role-dps { --role: #e0574f; } .role-going { --role: #3fbf6a; }
.role-c0 { --role: #4f8cff; } .role-c1 { --role: #3fbf6a; } .role-c2 { --role: #e0574f; } .role-c3 { --role: #c77dff; } .role-c4 { --role: #f0a830; }

/* status buttons */
.status-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.segments { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg { background: transparent; color: var(--text); border: 0; padding: 8px 14px; font-weight: 600; }
.seg + .seg { border-left: 1px solid var(--line); }
.seg:hover { background: var(--panel2); }
.seg.on { background: var(--panel2); color: var(--gold); }
.btn.danger { background: transparent; border: 1px solid #5a3335; color: #e9a2a2; padding: 8px 14px; }
.btn.danger:hover { background: #3d2224; }

/* soft reserves */
.slots { display: inline-flex; gap: 4px; }
.slot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--gold); }
.slot.used { background: var(--gold); }
form.inline { display: flex; align-items: center; gap: 12px; }
.item-row { padding: 8px 0; border-top: 1px solid var(--line); }
.item-row:first-of-type { border-top: 0; }
.item-name { flex: 1; display: flex; flex-direction: column; }
.item-name small { color: var(--muted); font-size: 12px; }
.reserve-pick, .hard-pick { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.reserve-pick select, .hard-pick select { flex: 1; min-width: 240px; width: auto; }
.icon { width: 20px; height: 20px; border-radius: 4px; border: 1px solid #000; vertical-align: middle; flex: none; }
.icon.big { width: 36px; height: 36px; border-radius: 6px; border-width: 2px; }
.q-border-epic { border-color: var(--q-epic); } .q-border-rare { border-color: var(--q-rare); } .q-border-legendary { border-color: var(--q-legendary); }
.item-li { display: flex; gap: 8px; align-items: flex-start; }
.item-li .who { color: var(--muted); }

/* officer tools */
.new-event { margin-left: auto; }
.flash.bad { background: #3d2224; border-color: var(--red); color: #f0b4b4; }
.fields.one { grid-template-columns: 1fr; margin-bottom: 12px; }
.fields.three { grid-template-columns: repeat(3, 1fr); margin-bottom: 12px; }
textarea { width: 100%; background: #131418; color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font: inherit; resize: vertical; }
textarea:focus { outline: 2px solid var(--gold); border-color: transparent; }
input[type=date], input[type=time] { color-scheme: dark; }
.officer { border-color: #4a3b18; }
.officer h3 { margin: 0 0 10px; font-size: 15px; }
.officer-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.cancel-form { margin-left: auto; gap: 10px; }
.check { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; cursor: pointer; }
.check input { width: auto; accent-color: var(--red); }
.officer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; }
.officer-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--panel2); border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.officer-form h3 { flex-basis: 100%; }
.officer-form select, .officer-form input { flex: 1; min-width: 150px; width: auto; }
.officer-form .item-row { flex-basis: 100%; gap: 8px; }
.officer-form .hard-pick { flex-basis: 100%; margin-top: 4px; }
.roster { width: 100%; border-collapse: collapse; font-size: 14px; }
.roster th { text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 4px 6px; }
.roster td { padding: 6px; border-top: 1px solid var(--line); vertical-align: middle; }
.roster form.inline { gap: 4px; justify-content: flex-end; }
.roster .btn.small { padding: 4px 8px; }
.delete-form { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); border-bottom: 0; }
.delete-form .note { flex-basis: 100%; margin: 0; }
.btn[disabled] { opacity: .35; cursor: default; filter: none; }

/* event types and the calendar's look */
.cal-head .grow { flex: 1; }
.chip.typed { background: var(--type); color: var(--type-ink); }
.chip.typed.has-bg { background: linear-gradient(90deg, rgba(10, 10, 12, .82), rgba(10, 10, 12, .45)), var(--bg) center / cover, var(--type);
  color: #fff; border-left: 3px solid var(--type); }
.chip.planned.typed { background: color-mix(in srgb, var(--type) 18%, var(--panel)); color: var(--text); border: 1px dashed var(--type); }
.chip.cancelled.typed, .chip.ended.typed { background: #3b3d43; color: #a7a9ae; border-left: 3px solid var(--type); }
.chip.cancelled.typed { text-decoration: line-through; }
.row.typed { border-left: 4px solid var(--type); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; }
.filter { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font-size: 13px; font-weight: 600; }
.filter .swatch, .type-row .swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--type, #6d7078); flex: none; }
.filter:not(.on) { opacity: .45; text-decoration: line-through; }
.filter:hover { border-color: var(--type, var(--gold)); }
.banner { position: relative; min-height: 150px; border-radius: 14px; margin-bottom: 18px; display: flex; align-items: flex-end;
  padding: 18px 22px; background: linear-gradient(0deg, rgba(10, 10, 12, .85), rgba(10, 10, 12, .1) 70%), var(--bg) center / cover; }
.banner h1 { color: #fff; font-size: 30px; text-shadow: 0 2px 8px #000; margin: 0; }
.banner.small { min-height: 90px; max-width: 420px; margin: 4px 0 8px; }
.event-hero { border-radius: 14px; padding: 60px 22px 16px; margin-bottom: 14px; border-bottom: 3px solid var(--type);
  background: linear-gradient(0deg, rgba(10, 10, 12, .92), rgba(10, 10, 12, .25)), var(--bg) center / cover; }
.event-hero h1 { color: #fff; text-shadow: 0 2px 8px #000; }
.event-hero .when { color: #ddd; margin: 0; }
.type-pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; margin-right: 8px;
  background: var(--type); color: var(--type-ink); vertical-align: middle; }
.type-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.type-tile { display: flex; flex-direction: column; gap: 4px; min-height: 120px; justify-content: flex-end; padding: 14px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--type, var(--line)); color: var(--text); }
.type-tile.has-bg { background: linear-gradient(0deg, rgba(10, 10, 12, .9), rgba(10, 10, 12, .2)), var(--bg) center / cover; color: #fff; }
.type-tile:hover { text-decoration: none; transform: translateY(-1px); border-color: var(--type, var(--gold)); }
.type-tile .ico { font-size: 28px; }
.type-tile b { font-size: 17px; }
.type-tile small { color: var(--muted); }
.type-tile.has-bg small { color: #ddd; }
.type-rows { display: flex; flex-direction: column; gap: 6px; }
.type-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: var(--panel2); color: var(--text);
  border-left: 4px solid var(--type); }
.type-row:hover { text-decoration: none; filter: brightness(1.1); }
.type-row .cls { flex: 1; }
.thumb { width: 56px; height: 32px; border-radius: 6px; background: var(--bg) center / cover; flex: none; }
.thumb.none { background: #131418; border: 1px dashed var(--line); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; margin: -2px 0 14px; }
.swatch-pick input { position: absolute; opacity: 0; width: 0; }
.swatch-pick span { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--type); border: 2px solid var(--panel); outline: 2px solid transparent; cursor: pointer; }
.swatch-pick input:checked + span { outline-color: var(--text); }
input[type=color] { height: 44px; padding: 4px; cursor: pointer; }
input[type=file] { padding: 8px; }
.card > h3 { margin: 18px 0 10px; font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.fields label.check, .card > .check { flex-direction: row; align-items: center; }
.limits-form label { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 120px; font-size: 13px; }
.limits-form label > span { font-size: 12px; color: var(--muted); font-weight: 700; }
.js [data-when][hidden], .filterable [data-type][hidden] { display: none; }

@media (max-width: 760px) {
  .type-row .cls { display: none; }
  .banner h1 { font-size: 22px; }
  .fields.three, .officer-grid { grid-template-columns: 1fr; }
  .cancel-form { margin-left: 0; }
  .roster td:nth-child(2) { display: none; }
  .fields, .role-tiles { grid-template-columns: 1fr; }
  .status-bar { flex-direction: column; align-items: stretch; }
  .segments { display: flex; } .seg { flex: 1; }
  .grid { grid-template-columns: 1fr; }
  .wd, .day.other, .day:not(:has(.chip)):not(.today) { display: none; }
  .day { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .num::after { content: " "; }
  .row { grid-template-columns: 1fr; gap: 2px; }
  .cal-head { flex-wrap: wrap; }
  .cal-head h1 { min-width: 0; font-size: 22px; flex: 1; }
  .cal-head .grow { flex-basis: 100%; height: 0; }
}