/* Exotic web app additions. The template's style.css stays untouched; this file only styles elements the
   template never had (forms, messages) using the template's palette, fonts and panels. */

:root {
  --exo-text: #422a20;
  --exo-muted: #989391;
  --exo-panel: #f1f1f1;
  --exo-accent: #ad5407;
  --exo-ok-bg: #edf7ee;
  --exo-ok: #2a7a3b;
  --exo-err-bg: #fbeceb;
  --exo-err: #b3261e;
}

/* ---- optimised assets (tools/optimize_assets.py) ----
   Same families/images as the template's style.css, re-declared here so the original file stays untouched:
   later @font-face / background declarations win. WOFF2 subset first, original WOFF as fallback. */
@font-face { font-family: Roboto Regular; src: url("../fonts/Roboto-Regular.woff2") format("woff2"), url("../fonts/Roboto-Regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: Roboto Bold; src: url("../fonts/Roboto-Bold.woff2") format("woff2"), url("../fonts/Roboto-Bold.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: Roboto Light; src: url("../fonts/Roboto-Light.woff2") format("woff2"), url("../fonts/Roboto-Light.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; }

.wrapper { background: url(../images/bg/footer_bg.webp) bottom center no-repeat, url(../images/bg/head_bg.webp) top center no-repeat; }
.promo-bg:after { background: none; } /* hidden (display:none) in the template, but browsers still fetched its 157 KB image */
.promo__video { background: url(../images/bg/vodeo_bg.webp) center center no-repeat; background-size: cover; }
.hts-block.hts-1 { background: url(../images/hts/1.webp) top center; background-size: cover; }
.hts-block.hts-2 { background: url(../images/hts/2.webp) top center; background-size: cover; }
.hts-block.hts-3 { background: url(../images/hts/3.webp) top center; background-size: cover; }
.hts-block.hts-4 { background: url(../images/hts/4.webp) top center; background-size: cover; }
.hts-block.hts-5 { background: url(../images/hts/5.webp) top center; background-size: cover; }

.heart { color: #d0021b; }
/* glyphs Roboto lacks (→ ← ♥): use a system font directly so the browser never fetches Roboto fallbacks */
.sym, .heart { font-family: "Segoe UI Symbol", "Apple Symbols", "DejaVu Sans", Arial, sans-serif; }

/* form panel: same grey card as .hts-block__system-stat-block */
.exo-form {
  width: 460px;
  max-width: 100%;
  margin: 25px auto 0;
  padding: 25px;
  border-radius: 8px;
  background: var(--exo-panel);
  text-align: left;
}

.exo-field {
  display: block;
  margin-bottom: 16px;
}

.exo-field > span {
  display: block;
  margin-bottom: 6px;
  font-family: Philosopher;
  font-weight: 700;
  font-size: 17px;
  color: var(--exo-text);
}

.exo-field input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #ddd6d0;
  border-radius: 10px;
  background: #fefdfb;
  font-family: Roboto Regular, Roboto, sans-serif;
  font-size: 16px;
  color: var(--exo-text);
  outline: none;
  transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

.exo-field input:focus {
  border-color: #ff9100;
  box-shadow: 0 0 0 3px rgba(255, 145, 0, 0.2);
}

.exo-hint, .exo-err {
  display: block;
  margin-top: 5px;
  font-family: Roboto Regular, Roboto, sans-serif;
  font-size: 13px;
  line-height: 18px;
}

.exo-hint { color: var(--exo-muted); }
.exo-err { color: var(--exo-err); }

/* <button> reset so .button looks like the template's <a class="button"> */
button.button {
  border: 0;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.exo-submit { margin-top: 8px; }
.exo-submit[disabled] { opacity: .6; cursor: wait; }

.exo-logout {
  width: 250px;
  margin: 20px auto 0;
}

.form-msg {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  font-family: Roboto Regular, Roboto, sans-serif;
  font-size: 15px;
  line-height: 22px;
}

.form-msg--ok { background: var(--exo-ok-bg); color: var(--exo-ok); }
.form-msg--err { background: var(--exo-err-bg); color: var(--exo-err); }

.form-link {
  color: var(--exo-accent);
  font-weight: 700;
}

/* captcha widget centred in the form (it renders a fixed-width iframe) */
.cf-turnstile {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

@media (max-width: 500px) {
  .exo-form { padding: 18px; }
  .exo-logout { width: 100%; }
}

/* ---- account dashboard ---- */
.exo-panel {
  width: 800px;
  max-width: 100%;
  margin: 25px auto 0;
}

.exo-empty {
  padding: 20px;
  border-radius: 8px;
  background: var(--exo-panel);
  text-align: center;
  font-family: Roboto Regular, Roboto, sans-serif;
  font-size: 15px;
  color: var(--exo-muted);
}

/* rows styled like the template's .widget-top__table-line */
.exo-table {
  border-radius: 8px;
  background: var(--exo-panel);
  padding: 8px;
  font-family: Roboto Regular, Roboto, sans-serif;
  font-size: 14px;
  color: var(--exo-text);
  text-align: left;
}

.exo-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 6px;
  background: #fefdfb;
  margin-bottom: 6px;
}

.exo-row:last-child { margin-bottom: 0; }
.exo-table--roles .exo-row { grid-template-columns: 2fr 1.6fr .7fr 1.6fr; }

.exo-row--head {
  background: transparent;
  font-family: Philosopher;
  font-weight: 700;
  font-size: 15px;
  color: var(--exo-accent);
}

.exo-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: #fff1dc;
  color: var(--exo-accent);
  font-size: 12px;
}

.exo-tag--warn { background: var(--exo-err-bg); color: var(--exo-err); }
.exo-muted { color: var(--exo-muted); }
.exo-online { color: var(--exo-ok); font-weight: 700; }
.exo-offline { color: var(--exo-muted); }
.exo-err-inline { color: var(--exo-err); font-weight: 700; }
.exo-banner { width: 800px; max-width: 100%; margin: 20px auto 0; text-align: center; }

@media (max-width: 600px) {
  .exo-table--roles .exo-row { grid-template-columns: 1fr 1fr; }
  .exo-row--head { display: none; }
}

/* ---- dashboard layout (player + admin): no hero, one-screen panel grid ----
   Panels reuse the template's .inner-page look: white card, textured title bar, Philosopher red title. */
.content.dash { padding: 10px 0 30px; min-height: calc(100vh - 100px); } /* keep the template background behind short pages */

.dash-grid {
  display: grid;
  width: 100%; /* .content-area is a flex row in the template */
  gap: 20px;
  /* fill the screen under the 80px nav (+ wrapper padding); lists scroll inside their own panel */
  height: calc(100vh - 140px);
  min-height: 560px;
}

.dash-grid--player {
  grid-template-columns: 330px 1fr 1fr;
  grid-template-rows: 1fr 1.3fr;
  grid-template-areas:
    "profile roles roles"
    "profile cash  password";
}

.dash-card--profile  { grid-area: profile; }
.dash-card--roles    { grid-area: roles; }
.dash-card--cash     { grid-area: cash; }
.dash-card--password { grid-area: password; }

.dash-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 10px;
  background: #fefdfb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.dash-card__title {
  padding: 14px 18px 12px;
  background: url(../images/bg/white_texture.jpg);
  border-bottom: 2px solid #dedede;
  font-family: Philosopher;
  font-weight: 700;
  font-size: 20px;
  line-height: 22px;
  color: #f13838;
  text-transform: uppercase;
}

.dash-card__title > span {
  display: block;
  margin-top: 3px;
  font-family: Roboto Regular, Roboto, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  color: #b1aba7;
  text-transform: none;
}

.dash-card__body {
  flex: 1;
  min-height: 0;
  padding: 16px 18px;
}

.dash-card__body--scroll { overflow-y: auto; }

.dash-card__foot {
  padding: 0 18px 18px;
}

.dash-card .exo-panel, .dash-card .exo-form { width: auto; margin: 0; }
.dash-card .exo-table { padding: 0; background: transparent; }
.dash-card .exo-row { background: var(--exo-panel); }
.dash-card .exo-row--head { background: transparent; }

.exo-form--compact { padding: 0; background: transparent; }
.exo-form--compact .exo-field { margin-bottom: 10px; }
.exo-form--compact .exo-field input { height: 38px; }
.exo-form--compact .exo-hint { text-align: center; }
.exo-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.exo-err--block { margin: -4px 0 10px; }

/* key/value list (profile card) */
.dash-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px 14px;
  margin: 0;
  font-family: Roboto Regular, Roboto, sans-serif;
  font-size: 14px;
}

.dash-list dt { color: var(--exo-muted); }
.dash-list dd { margin: 0; color: var(--exo-text); font-weight: 700; word-break: break-word; }

/* stat tiles (admin) */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
}

.dash-stat {
  padding: 14px;
  border-radius: 8px;
  background: var(--exo-panel);
  font-family: Roboto Regular, Roboto, sans-serif;
}

.dash-stat b {
  display: block;
  font-family: Philosopher;
  font-size: 26px;
  line-height: 28px;
  color: var(--exo-text);
}

.dash-stat small { font-size: 13px; color: var(--exo-muted); }
.dash-stat--warn b { color: var(--exo-err); }

@media (max-width: 1080px) {
  .dash-grid { height: auto; min-height: 0; }
  .dash-grid--player {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "profile roles" "cash password";
  }
  .dash-card__body--scroll { max-height: 420px; }
}

@media (max-width: 700px) {
  .dash-grid--player { grid-template-columns: 1fr; grid-template-areas: "profile" "roles" "cash" "password"; }
}

/* ---- admin ---- */
.dash-grid--admin {
  grid-template-columns: 1.15fr 1fr 1.15fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "stats stats stats" "search recent log";
}
.dash-card--stats  { grid-area: stats; }
.dash-card--search { grid-area: search; }
.dash-card--recent { grid-area: recent; }
.dash-card--log    { grid-area: log; }

.dash-grid--adminuser {
  grid-template-columns: 320px 1.2fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "profile roles actions" "cash log actions";
}
.dash-card--actions { grid-area: actions; }

.dash-grid--single { grid-template-columns: 1fr; }

/* /admin/server: status on top, maps (gs) left, controls right */
.dash-grid--server {
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "status hw" "maps controls";
}
.dash-card--hw { grid-area: hw; }
/* stacked card body (stats, then tags / graph underneath) */
.dash-stack > * + * { margin-top: 12px; }
.dash-stats.dash-stats--server, .dash-stats.dash-stats--hw { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dash-stack .dash-stat { padding: 10px 12px; min-width: 0; }
.dash-stack .dash-stat b { font-size: 22px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-stack .dash-stat small { display: block; font-size: 12px; line-height: 16px; }
.exo-hwchart { display: block; width: 100%; height: 120px; margin-top: 12px; background: var(--exo-panel); border-radius: 8px; }
.exo-hwchart line { stroke: #ddd6cf; stroke-width: 1; vector-effect: non-scaling-stroke; }
.exo-hwchart polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.exo-hwchart__cpu { stroke: var(--exo-accent); }
.exo-hwchart__mem { stroke: var(--exo-ok); }
.exo-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; font-size: 12px; color: var(--exo-muted); }
.exo-legend i { display: inline-block; width: 12px; height: 3px; margin-right: 5px; vertical-align: middle; border-radius: 2px; }
.exo-legend__cpu { background: var(--exo-accent); }
.exo-legend__mem { background: var(--exo-ok); }
.dash-card--status   { grid-area: status; }
.dash-card--maps     { grid-area: maps; }
.dash-card--controls { grid-area: controls; }
.exo-services { display: flex; flex-wrap: wrap; gap: 6px; }
.exo-row--gs { grid-template-columns: 1.6fr .7fr .5fr .8fr 96px; }
.exo-row--gs form { margin: 0; }
.exo-row--gs .button { width: 100%; height: 30px; padding: 0 10px; }
.exo-row--gs .button span { font-size: 13px; }
@media (max-width: 1080px) {
  .dash-grid--server { height: auto; grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "status" "hw" "maps" "controls"; }
}
@media (max-width: 600px) {
  .dash-stats.dash-stats--server, .dash-stats.dash-stats--hw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exo-row--gs { grid-template-columns: 1fr 1fr; }
}

.dash-center { display: flex; width: 100%; justify-content: center; align-items: flex-start; padding-top: 20px; }
.dash-card--narrow { width: 420px; max-width: 100%; }

.exo-search { display: flex; gap: 10px; margin-bottom: 14px; }
.exo-search input, .exo-inline input, .exo-inline select {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #ddd6d0;
  border-radius: 10px;
  background: #fefdfb;
  font-family: Roboto Regular, Roboto, sans-serif;
  font-size: 14px;
  color: var(--exo-text);
}
.exo-search .button { width: 110px; height: 38px; }

.exo-row--link { color: inherit; text-decoration: none; grid-template-columns: 1.4fr 1fr; }
.exo-row--link:hover { box-shadow: 0 0 0 2px rgba(255, 145, 0, .35); }
/* audit log: badge | sentence (+ details) | time & IP */
.exo-audit { font-family: Roboto Regular, Roboto, sans-serif; font-size: 14px; color: var(--exo-text); }
.exo-audit__row {
  display: grid;
  grid-template-columns: 112px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 6px;
  background: var(--exo-panel);
}
.exo-audit__badge {
  justify-self: start;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.exo-audit__badge--security { background: #e6eefc; color: #2d5cc4; }
.exo-audit__badge--danger   { background: #fde3e3; color: #c0262b; }
.exo-audit__badge--warn     { background: #fff1dc; color: #ad5407; }
.exo-audit__badge--ok       { background: #e4f4e7; color: #2a7a3b; }
.exo-audit__badge--cash     { background: #fff6cc; color: #8a6a00; }
.exo-audit__badge--info     { background: #ececec; color: #5c5753; }
.exo-audit__detail { margin-top: 3px; font-size: 13px; color: var(--exo-muted); }
.exo-audit__detail b { color: var(--exo-text); font-weight: 400; }
.exo-audit__meta { text-align: right; font-size: 12px; line-height: 17px; color: var(--exo-muted); white-space: nowrap; }
.exo-audit__meta span { font-size: 11px; }
.dash-card--log .exo-audit__row { grid-template-columns: 1fr auto; }
.dash-card--log .exo-audit__badge { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .exo-audit__row { grid-template-columns: 1fr; }
  .exo-audit__meta { text-align: left; }
}

.exo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.exo-chips a { text-decoration: none; }
.exo-tag--admin { background: #fde3e3; color: #c0262b; }

.exo-action {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--exo-panel);
}
.exo-action summary {
  cursor: pointer;
  font-family: Philosopher;
  font-weight: 700;
  font-size: 16px;
  color: var(--exo-text);
}
.exo-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.exo-inline select { flex: 0 0 160px; }
.exo-inline .button { width: auto; padding: 0 14px; height: 36px; }
.exo-inline .button span { font-size: 14px; }
.exo-inline--btns { margin-top: 8px; }
.exo-inline label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--exo-text); }
.exo-inline > span { align-self: center; font-size: 14px; color: var(--exo-text); }
/* /admin/server: control-plane operation log */
.exo-log {
  margin: 10px 0 0;
  max-height: 260px;
  overflow: auto;
  padding: 10px 12px;
  background: var(--exo-panel);
  color: var(--exo-text);
  font: 12px/1.5 Consolas, "Courier New", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
.exo-mt { margin-top: 12px; }

.exo-steps { margin: 0 0 12px 18px; font-family: Roboto Regular, Roboto, sans-serif; font-size: 14px; color: var(--exo-text); line-height: 21px; }
.exo-qr { display: block; margin: 0 auto 8px; border-radius: 8px; background: #fff; }
.exo-secret {
  display: block;
  margin: 0 auto 16px;
  padding: 8px;
  border-radius: 6px;
  background: var(--exo-panel);
  text-align: center;
  font-size: 13px;
  letter-spacing: 1px;
  word-break: break-all;
}

@media (max-width: 1080px) {
  .dash-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dash-grid--admin { grid-template-columns: 1fr 1fr; grid-template-areas: "stats stats" "search recent" "log log"; }
  .dash-grid--adminuser { grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-template-areas: "profile actions" "roles roles" "cash log"; }
}
@media (max-width: 700px) {
  .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid--admin, .dash-grid--adminuser { grid-template-columns: 1fr; grid-template-areas: none; }
  .dash-grid--admin > *, .dash-grid--adminuser > * { grid-area: auto; }
}

/* ---- admin overview: compact tiles + registrations chart ----
   Bar spec (dataviz): <=24px wide, 4px rounded top, square on the baseline, 2px gap; single series = no legend.
   Accent #fb7008 is 2.78:1 on the panel, so values are relieved by direct labels (max + today), per-bar
   tooltips and a table view. */
.dash-overview { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.dash-overview .dash-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dash-overview .dash-stat { padding: 10px 12px; }
.dash-overview .dash-stat b { font-size: 22px; line-height: 24px; }
.dash-stat--link { text-decoration: none; transition: box-shadow .2s; }
.dash-stat--link:hover { box-shadow: 0 0 0 2px rgba(255, 145, 0, .35); }

.exo-chart { margin: 0; font-family: Roboto Regular, Roboto, sans-serif; color: var(--exo-text); }
.exo-chart__title { font-family: Philosopher; font-weight: 700; font-size: 15px; color: var(--exo-text); margin-bottom: 6px; }
.exo-chart__title span { font-family: Roboto Regular, Roboto, sans-serif; font-weight: 400; font-size: 12px; color: var(--exo-muted); margin-left: 6px; }
.exo-chart__plot {
  display: flex;
  align-items: flex-end;
  gap: 2px;                         /* surface gap between adjacent bars */
  height: 104px;
  padding-top: 16px;                /* room for the cap labels */
  border-bottom: 1px solid #e3ded9; /* recessive hairline baseline */
}
.exo-chart__col {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  outline: none;
}
.exo-chart__bar {
  position: relative;
  width: 100%;
  max-width: 24px;
  min-height: 2px;                  /* zero days stay visible as a stub on the baseline */
  border-radius: 4px 4px 0 0;
  background: #fb7008;
  opacity: .85;
}
.exo-chart__col--today .exo-chart__bar { opacity: 1; }
.exo-chart__col:hover .exo-chart__bar, .exo-chart__col:focus-visible .exo-chart__bar { opacity: 1; box-shadow: 0 0 0 2px rgba(251, 112, 8, .25); }
.exo-chart__value { position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); font-size: 11px; line-height: 14px; color: var(--exo-text); }
.exo-chart__tip {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 8px;
  border-radius: 6px;
  background: #422a20;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
  z-index: 5;
}
.exo-chart__col:hover .exo-chart__tip, .exo-chart__col:focus-visible .exo-chart__tip { opacity: 1; }
.exo-chart__col:first-child .exo-chart__tip { left: 0; transform: none; }
.exo-chart__col:last-child .exo-chart__tip { left: auto; right: 0; transform: none; }
.exo-chart__axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--exo-muted); }
.exo-chart__table { margin-top: 6px; font-size: 12px; }
.exo-chart__table summary { cursor: pointer; color: var(--exo-accent); font-weight: 700; }
.exo-chart__table table { width: 100%; margin-top: 6px; border-collapse: collapse; }
.exo-chart__table th, .exo-chart__table td { padding: 3px 6px; text-align: left; border-bottom: 1px solid #eee8e3; }
.exo-row--issue { grid-template-columns: 1.2fr 1fr 1.4fr; }

@media (max-width: 1080px) {
  .dash-overview { grid-template-columns: 1fr; }
}

/* ---- GM rights checkboxes ---- */
.exo-subaction { margin-top: 10px; }
.exo-subaction summary { cursor: pointer; font-size: 13px; color: var(--exo-accent); font-weight: 700; }
.exo-rights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; margin-top: 8px; }
.exo-right { display: flex; align-items: center; gap: 6px; font-family: Roboto Regular, Roboto, sans-serif; font-size: 12px; color: var(--exo-text); cursor: pointer; }
.exo-right small { margin-left: auto; color: var(--exo-muted); }
.exo-right--danger span { color: var(--exo-err); }

/* ---- public: status widget + ranking ---- */
/* widget icons (internal/web/icons.go) in the template's 30px number slot, theme red */
.exo-ico { width: 18px; height: 18px; display: block; }
.exo-ico-slot { color: #9f3131; }
.exo-ico__led { fill: currentColor; stroke: none; }
.exo-ico--on .exo-ico__led { fill: #2a9a46; }
.exo-ico--off .exo-ico__led { fill: #c0262b; }
.exo-ico--on .exo-ico__led:first-of-type { animation: exo-led 2s ease-in-out infinite; }
@keyframes exo-led { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .exo-ico--on .exo-ico__led:first-of-type { animation: none; } }

.exo-rank-block { padding-top: 30px; }
.exo-rank { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; width: 100%; padding: 0 30px; text-align: left; }
.exo-rank__bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.exo-rank__tabs { display: flex; gap: 6px; }
.exo-rank__tab {
  padding: 8px 16px;
  border-radius: 8px;
  background: #fde9d6;
  font-family: Philosopher;
  font-weight: 700;
  font-size: 15px;
  color: #ad5407;
  text-decoration: none;
  transition: background .2s;
}
.exo-rank__tab:hover { background: #fcd9b8; }
.exo-rank__tab.active { background: #fb7008; color: #fff; }
.exo-rank__filter select {
  height: 38px;
  padding: 0 12px;
  border: 1px solid #ddd6d0;
  border-radius: 10px;
  background: #fefdfb;
  font-family: Roboto Regular, Roboto, sans-serif;
  font-size: 14px;
  color: var(--exo-text);
}
.exo-rank__table { font-family: Roboto Regular, Roboto, sans-serif; font-size: 14px; color: var(--exo-text); }
.exo-rank__row {
  display: grid;
  grid-template-columns: 48px 1.4fr 1.2fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  margin-bottom: 5px;
  border-radius: 6px;
  background: var(--exo-panel);
}
.exo-rank__row--head { background: transparent; font-family: Philosopher; font-weight: 700; font-size: 15px; color: var(--exo-accent); }
.exo-rank__row--top { background: #fff6ec; }
.exo-rank__row small { display: block; font-size: 12px; color: var(--exo-muted); }
.exo-rank__pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: 700;
  color: var(--exo-muted);
}
.exo-rank__pos--1 { background: #f6c443; color: #5a3d00; }
.exo-rank__pos--2 { background: #d5d8dc; color: #3b3f44; }
.exo-rank__pos--3 { background: #e0a26e; color: #4d2a0e; }
.exo-rank__side .exo-status { margin-bottom: 16px; }
/* template .dragon-info is fixed at 290px with absolutely positioned tab boxes; the status widget has a single
   box, so it sizes to its rows */
.exo-status { height: auto; }
.exo-status .widget-top__box { position: static; }

/* class distribution: horizontal bars, single series (no legend), value at the bar end */
.exo-dist { margin: 0; padding: 14px; border-radius: 10px; background: var(--exo-panel); font-family: Roboto Regular, Roboto, sans-serif; }
.exo-dist__row { display: grid; grid-template-columns: 96px 1fr 28px; gap: 8px; align-items: center; margin-top: 6px; font-size: 12px; color: var(--exo-text); }
.exo-dist__track { height: 12px; }
.exo-dist__bar { display: block; height: 12px; min-width: 2px; border-radius: 0 4px 4px 0; background: #fb7008; }
.exo-dist__val { text-align: right; color: var(--exo-text); }

@media (max-width: 1080px) {
  .exo-rank { grid-template-columns: 1fr; padding: 0 16px; }
}
@media (max-width: 600px) {
  .exo-rank__row { grid-template-columns: 40px 1fr 1fr; }
  .exo-rank__row > div:nth-child(3) { display: none; }
}

/* ---- falling leaves (public pages) ----
   Sprites cut from the template's head_leaves art (tools/optimize_assets.py leaves()). Each leaf = 3 nested
   layers so fall, sway and tumble run on independent timings: .exo-leaf (fall) > i (sway) > img (tumble).
   Per-leaf values come from CSS variables set in js/app.js. Purely decorative, never intercepts clicks. */
.exo-leaves { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 10; }
.exo-leaf {
  position: absolute;
  top: -12vh;
  left: var(--x);
  animation: exo-fall var(--fall) linear var(--delay) infinite;
  will-change: transform;
}
.exo-leaf i { display: block; animation: exo-sway var(--sway) ease-in-out var(--delay) infinite alternate; }
.exo-leaf img {
  display: block;
  width: var(--w);
  height: auto;
  opacity: var(--alpha);
  animation: exo-tumble var(--spin) linear var(--delay) infinite;
}
@keyframes exo-fall { to { transform: translateY(125vh); } }
@keyframes exo-sway { from { transform: translateX(calc(var(--drift) * -1)); } to { transform: translateX(var(--drift)); } }
@keyframes exo-tumble {
  0%   { transform: rotate(var(--r0)) rotateX(0deg); }
  50%  { transform: rotate(calc(var(--r0) + 140deg)) rotateX(160deg); }
  100% { transform: rotate(calc(var(--r0) + 360deg)) rotateX(360deg); }
}
@media (prefers-reduced-motion: reduce) { .exo-leaves { display: none; } }

/* Header server info: template brown/green on the bright splash art was hard to read -> darker tones + solid halo */
.header__server-status,
.header__server-online {
  color: #5a2a0c;
  text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 8px rgba(255, 255, 255, .95), 0 1px 0 #fff;
}
.header__server-status span,
.header__server-online span {
  color: #2f6b00;
}

/* ---- Guide page (/guide): long reference content on the template's hts blocks ----
   Table of contents chips, data tables (rows like .exo-row), callouts. Left-aligned text for readability. */
.exo-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.exo-toc a {
  padding: 7px 14px; border-radius: 16px; background: #fff1dc; border: 1px solid #f3d4ab;
  font-family: Philosopher; font-weight: 700; font-size: 15px; color: var(--exo-accent); text-decoration: none;
  transition: background .15s, color .15s;
}
.exo-toc a:hover { background: var(--exo-accent); color: #fff; }

.exo-guide .hts-block__text { width: 100%; max-width: 980px; text-align: left; font-size: 15px; line-height: 23px; color: #7d6f6a; }
.exo-guide .hts-block__title + .hts-block__text { text-align: center; }
.exo-guide .hts-block__text p { margin: 0 0 10px; }
.exo-guide h3 {
  margin: 26px auto 10px; max-width: 980px; font-family: Philosopher; font-weight: 700; font-size: 20px;
  color: #d30505; text-align: left;
}
.exo-guide ul, .exo-guide ol { max-width: 980px; margin: 0 auto 12px; padding-left: 22px; text-align: left;
  font-family: Roboto Regular; font-size: 14px; line-height: 21px; color: #6e5f5a; }
.exo-guide li { margin-bottom: 4px; }
.exo-guide li b, .exo-guide p b, .exo-gt b { color: #704f4f; font-family: Roboto Bold; font-weight: normal; }

.exo-gt {
  max-width: 980px; margin: 0 auto 14px; border-radius: 8px; background: var(--exo-panel); padding: 8px;
  font-family: Roboto Regular, Roboto, sans-serif; font-size: 14px; line-height: 19px; color: var(--exo-text); text-align: left;
}
.exo-gt__row {
  display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 10px; align-items: center;
  padding: 9px 12px; border-radius: 6px; background: #fefdfb; margin-bottom: 5px;
}
.exo-gt__row:last-child { margin-bottom: 0; }
.exo-gt__row--head { background: transparent; font-family: Philosopher; font-weight: 700; font-size: 15px; color: var(--exo-accent); }
.exo-gt--2 { --cols: 2; } .exo-gt--4 { --cols: 4; } .exo-gt--5 { --cols: 5; }
.exo-gt--wide1 .exo-gt__row { grid-template-columns: 1.6fr repeat(2, minmax(0, 1fr)); }
.exo-gt--wide1.exo-gt--2 .exo-gt__row { grid-template-columns: 1.4fr minmax(0, 1fr); }
.exo-gt--wide1.exo-gt--4 .exo-gt__row { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); }
.exo-gt--wide1.exo-gt--5 .exo-gt__row { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); }
.exo-gt small { display: block; color: var(--exo-muted); font-size: 12px; line-height: 16px; }

.exo-note {
  max-width: 980px; margin: 0 auto 14px; padding: 12px 16px; border-radius: 8px; border-left: 4px solid var(--exo-accent);
  background: #fff6ea; font-family: Roboto Regular; font-size: 14px; line-height: 20px; color: #6e4a2c; text-align: left;
}
.exo-note--warn { border-left-color: var(--exo-err); background: var(--exo-err-bg); color: #7a2a24; }
.exo-guide .hts-block__system-stat-block-text { line-height: 19px; }
.exo-top { display: block; margin-top: 18px; text-align: center; font-family: Philosopher; font-weight: 700; font-size: 14px; color: var(--exo-accent); }

@media (max-width: 700px) {
  .exo-gt__row { grid-template-columns: 1fr 1fr !important; }
  .exo-gt__row--head { display: none; }
  .exo-toc a { font-size: 14px; padding: 6px 11px; }
}

/* Home "Aktivitas" widget: template height (300px) fits 3 rows; the Harian tab now lists 5 */
.content__aside .widget { height: 340px; }

/* ---- Guide quick navigation rail: fixed on the right, scroll spy highlights the section in view.
   Arrows = the template's chevron (images/icons/arrow.png, the same one under each hts block).
   >=1720px: full labels in the side gutter; narrower: compact dots (label on hover / active); phones: arrows only. */
.exo-guide [id] { scroll-margin-top: 16px; }
.exo-rail {
  position: fixed; right: 18px; top: 50%; z-index: 60; transform: translate(12px, -50%);
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  padding: 10px 8px; border-radius: 14px; background: rgba(254, 253, 251, .94);
  box-shadow: 0 2px 12px rgba(78, 45, 45, .14); opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.exo-rail.is-visible { opacity: 1; pointer-events: auto; transform: translate(0, -50%); }
.exo-rail__links { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
.exo-rail__link {
  position: relative; display: block; padding: 5px 12px 5px 22px; border-radius: 14px; text-align: right; white-space: nowrap;
  font-family: Philosopher; font-weight: 700; font-size: 14px; line-height: 18px; color: #8d807c; text-decoration: none;
  transition: color .2s, background .2s;
}
.exo-rail__link::before {
  content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: #e3cdb2; transition: background .2s, transform .2s;
}
.exo-rail__link:hover { color: var(--exo-accent); background: #fff1dc; }
.exo-rail__link.active { color: #fff; background: linear-gradient(180deg, #ffa231, #f07a00); box-shadow: 0 1px 3px rgba(240, 122, 0, .35); }
.exo-rail__link.active::before { background: #fff; transform: scale(1.2); }
.exo-rail__arrow {
  align-self: center; width: 46px; height: 30px; padding: 0; border: 0; cursor: pointer;
  background: url(../images/icons/arrow.png) center / contain no-repeat;
  transition: transform .2s ease, filter .2s ease, opacity .2s;
}
.exo-rail__arrow--up { transform: rotate(180deg); }
.exo-rail__arrow--down:hover { transform: translateY(2px); filter: drop-shadow(0 0 5px rgba(255, 140, 0, .55)); }
.exo-rail__arrow--up:hover { transform: rotate(180deg) translateY(2px); filter: drop-shadow(0 0 5px rgba(255, 140, 0, .55)); }
.exo-rail__arrow:disabled { opacity: .3; cursor: default; filter: none; }
.exo-rail__arrow:focus-visible, .exo-rail__link:focus-visible { outline: 2px solid var(--exo-accent); outline-offset: 2px; }

/* compact: dots only, label pops out to the left on hover / for the active section */
@media (max-width: 1719px) {
  .exo-rail { right: 8px; padding: 8px 4px; align-items: center; }
  .exo-rail__arrow { width: 34px; height: 22px; }
  .exo-rail__link { width: 26px; height: 22px; padding: 0; background: transparent !important; box-shadow: none !important; }
  .exo-rail__link span { display: none; }
  .exo-rail__link::before { left: 50%; margin-left: -4px; width: 8px; height: 8px; margin-top: -4px; }
  .exo-rail__link.active::before { background: var(--exo-accent); transform: scale(1.35); }
  .exo-rail__link:hover::after, .exo-rail__link.active::after {
    content: attr(data-label); position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
    padding: 4px 10px; border-radius: 12px; background: var(--exo-accent); color: #fff; font-size: 13px; line-height: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15); pointer-events: none;
  }
  .exo-rail__link:hover::after { background: #4e2d2d; }
}
/* phones: arrows only, bottom-right */
@media (max-width: 760px) {
  .exo-rail { top: auto; bottom: 14px; right: 10px; transform: translate(0, 12px); flex-direction: column; gap: 4px; }
  .exo-rail.is-visible { transform: none; }
  .exo-rail__links { display: none; }
}
@media (prefers-reduced-motion: reduce) { .exo-rail, .exo-rail__link, .exo-rail__arrow { transition: none; } }

/* /admin/bot: status + controls | AI helper settings on top, bot log underneath */
.dash-grid--bot {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "status ai" "log log";
}
.dash-grid--bot .dash-card--botstatus { grid-area: status; }
.dash-grid--bot .dash-card--botai { grid-area: ai; }
.dash-grid--bot .dash-card--botlog { grid-area: log; min-height: 0; }
.exo-form-grid { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px 12px; align-items: center; }
.exo-form-grid label { font-family: Philosopher; font-weight: 700; color: var(--exo-text); font-size: 14px; }
.exo-form-grid input { width: 100%; }
@media (max-width: 1000px) {
  .dash-grid--bot { height: auto; grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "status" "ai" "log"; }
  .exo-form-grid { grid-template-columns: 1fr; }
}