/* Last War Tips — light theme (white + teal) */
:root {
  --bg: #f2f7f6;
  --bg2: #ffffff;
  --card: #ffffff;
  --line: #e1e9e8;
  --text: #17292a;
  --muted: #647a7b;
  --accent: #0d9488;
  --accent-soft: #e0f2ef;
  --vs-bg: #e9f5f2;
  --vs-line: #bfe0d9;
  --ar-bg: #eef2f8;
  --ar-line: #d3dcee;
  --star-bg: #ecf6f3;
  --red-bg: #fdeae6;
  --shadow: 0 1px 3px rgba(15, 45, 45, .06), 0 8px 24px -18px rgba(15, 45, 45, .22);
  --radius: 12px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  line-height: 1.65;
}
a { color: var(--accent); text-decoration: none; }

/* topbar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1200px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 16px; flex-wrap: nowrap;
}
.brand { font-weight: 700; font-size: 1.05rem; color: var(--text); white-space: nowrap; flex: 0 0 auto; }
/* one line always — when the labels don't fit, the strip swipes instead of wrapping */
.mainnav {
  display: flex; gap: 2px; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 0, #000 100%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 0, #000 100%, transparent 100%);
}
.mainnav::-webkit-scrollbar { display: none; }
/* fade the edge you can still scroll toward */
.mainnav.can-l { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 100%, transparent 100%);
                         mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 100%, transparent 100%); }
.mainnav.can-r { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 0, #000 calc(100% - 22px), transparent 100%);
                         mask-image: linear-gradient(to right, transparent 0, #000 0, #000 calc(100% - 22px), transparent 100%); }
.mainnav.can-l.can-r { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
                               mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); }
.mainnav a {
  color: var(--muted); padding: 6px 11px; border-radius: 8px; font-size: .92rem;
  white-space: nowrap; flex: 0 0 auto; scroll-snap-align: center;
}
.clock, .store-btn, .discord-btn, .langswitch { flex: 0 0 auto; }
.mainnav a:hover { color: var(--text); background: var(--accent-soft); }
.mainnav a.active { color: #fff; background: var(--accent); font-weight: 600; }
.clock {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; box-shadow: var(--shadow);
}
.clock:empty { display: none; }
.clock-part { display: flex; align-items: baseline; gap: 6px; }
.clock-lbl { font-size: .68rem; font-weight: 700; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.clock-val { font-weight: 700; font-size: .92rem; color: var(--text); font-variant-numeric: tabular-nums; }
.clock-div { width: 1px; height: 16px; background: var(--line); }
/* server day count — no label, so it carries the accent to read as its own chip */
.clock-day .clock-val { color: var(--accent); }
.langswitch { display: flex; }
.langdrop { position: relative; }
.langdrop > summary {
  list-style: none; cursor: pointer; user-select: none;
  font-size: .82rem; font-weight: 600; color: var(--text);
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.langdrop > summary::-webkit-details-marker { display: none; }
.langdrop > summary::before { content: "🌐"; font-size: .85em; }
.langdrop > summary::after { content: "▾"; color: var(--muted); font-size: .8em; transition: transform .15s; }
.langdrop[open] > summary::after { transform: rotate(180deg); }
.langdrop[open] > summary { border-color: var(--accent); }
.langmenu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 8px 28px -8px rgba(60,50,30,.25);
  min-width: 148px; max-height: min(70vh, 420px); overflow-y: auto;
  padding: 6px; display: flex; flex-direction: column;
}
[dir="rtl"] .langmenu { right: auto; left: 0; }
.langmenu a {
  color: var(--text); font-size: .86rem; padding: 8px 12px; border-radius: 9px;
}
.langmenu a:hover { background: var(--accent-soft); }
.langmenu a.active { color: var(--accent); font-weight: 700; }
.langmenu a.active::after { content: "✓"; float: right; }

.container { max-width: 1080px; margin: 0 auto; padding: 28px 16px 60px; }
h1 { font-size: 1.7rem; margin: .2em 0 .6em; }
.hero { text-align: center; padding: 26px 0 6px; }
.hero h1 { font-size: 2.1rem; margin-bottom: .1em; }
.tagline { color: var(--muted); margin-top: 0; }

/* callouts */
.callout {
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 18px 0 10px;
  display: flex; gap: 12px; align-items: center;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
  font-weight: 700; font-size: 1.06rem;
}
.callout p { margin: 0; }
.callout .icon::before { content: attr(data-emoji); }
.block-color-yellow_background { background: var(--vs-bg); border-color: var(--vs-line); }
.block-color-teal_background { background: var(--ar-bg); border-color: var(--ar-line); }
.block-color-orange_background { background: var(--star-bg); border-color: #eed0a8; }
.block-color-red_background { background: var(--red-bg); border-color: #f0c2b5; }

/* toggles */
details.toggle {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 10px 0;
  overflow: hidden;
  box-shadow: var(--shadow);
}
details.toggle > summary {
  cursor: pointer;
  padding: 13px 16px;
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-right: 40px;
}
details.toggle > summary::-webkit-details-marker { display: none; }
details.toggle > summary::after {
  content: "▾"; position: absolute; right: 16px; top: 13px;
  color: var(--muted); transition: transform .2s;
}
details.toggle[open] > summary::after { transform: rotate(180deg); }
details.toggle > .indented { padding: 4px 18px 14px; border-top: 1px solid var(--line); }

/* lists */
ul { padding-left: 1.3em; margin: .45em 0; }
ul.to-do-list { list-style: none; padding-left: .1em; }
ul.to-do-list > li.task {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 4px 2px;
}
.task-mark {
  flex: 0 0 8px; width: 8px; height: 8px; margin-top: 10px;
  border-radius: 50%; background: var(--accent);
}

/* columns (index intro) */
.column-list { display: flex; gap: 16px; align-items: flex-start; }
.column { flex: 1; min-width: 0; }
.page-index .column-list { flex-direction: column; gap: 4px; }
.page-index .column { width: 100% !important; }
@media (max-width: 760px) { .column-list { flex-direction: column; } .column { width: 100% !important; } }

/* schedule */
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 6px; }
.chip {
  white-space: nowrap; font-size: .85rem; color: var(--text);
  background: var(--card); border: 1px solid var(--line);
  padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
section.day { margin-top: 30px; }
.day-title {
  font-size: 1.3rem; margin: 0 0 12px;
  padding-bottom: 6px; border-bottom: 2px solid var(--accent);
  display: inline-block;
}
.day-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .day-grid { grid-template-columns: 1fr; } }
.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow);
}
.panel h3 { margin: 0 0 10px; font-size: .95rem; letter-spacing: .02em; }
.panel-vs { border-top: 3px solid #3f86cc; }
.panel-ar { border-top: 3px solid #4d9c8f; }

/* today / now markers */
.schedule-note { color: var(--muted); font-size: .88rem; margin: -4px 0 14px; }
.todaytag { margin-left: 10px; font-size: .7em; font-weight: 800; color: #fff; background: #4d9c8f; border-radius: 999px; padding: 3px 12px; vertical-align: 2px; }
.todaytag:empty { display: none; }
section.day.today .panel-ar { border-color: #4d9c8f; box-shadow: 0 0 0 2px rgba(77,156,143,.25), var(--shadow); }
table.artable tr.now td { background: #e2f2ee; }
table.artable tr.now td:first-child { border-radius: 6px 0 0 6px; }
table.artable tr.now td:last-child { border-radius: 0 6px 6px 0; }
.nowtag { margin-left: 8px; font-size: .74rem; font-weight: 800; color: #1f6c5f; background: #c5e6de; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.nowtag:empty { display: none; }
.localtime { font-size: .78rem; color: #b0a892; font-variant-numeric: tabular-nums; }

/* arms race time table */
table.artable { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.artable td { padding: 8px 6px; border-bottom: 1px solid var(--line); }
table.artable tr:last-child td { border-bottom: none; }
table.artable td.time {
  white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums;
  width: 1%; padding-right: 14px; font-size: .86rem;
}
table.artable tr.vsrow { background: var(--vs-bg); }
table.artable tr.vsrow td:first-child { border-radius: 6px 0 0 6px; }
table.artable tr.vsrow td:last-child { border-radius: 0 6px 6px 0; }
.vsbadge {
  font-size: .72rem; font-weight: 700; color: #8a6207;
  background: #f7e3ac; border-radius: 999px; padding: 1px 8px;
  margin-left: 4px; white-space: nowrap;
}

/* images — one per line, uniform height */
figure.image { display: block; margin: 12px 0; }
figure.image img, .indented > img, li > img {
  display: block; height: 600px; width: auto; max-width: 100%; object-fit: contain;
  object-position: left center;
  border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow);
  background: #fff;
}
@media (max-width: 760px) {
  figure.image img, .indented > img, li > img { height: 380px; max-width: 100%; }
}

/* ---- guides & tips hub ---- */
.page-tips {
  max-width: 1180px;
  padding-top: 52px;
}
.page-tips > h1 {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 0 48px;
  color: #23231f;
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1.05;
  letter-spacing: -.045em;
}
.page-tips > h1::after {
  content: "";
  height: 1px;
  background: #d8d2c7;
  flex: 1;
}
.gwrap {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.gtoc {
  position: sticky;
  top: 82px;
  max-height: calc(100vh - 106px);
  overflow-y: auto;
  padding: 2px 18px 18px 0;
  font-size: .84rem;
  scrollbar-width: thin;
  scrollbar-color: #d4cec3 transparent;
}
.gtoc-group { margin-bottom: 24px; }
.gtoc-group:last-child { margin-bottom: 0; }
.gtoc-cat {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 0 9px;
  color: #35342f;
  font-size: .79rem;
  font-weight: 800;
  letter-spacing: .035em;
}
.gtoc-cat::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gc, var(--accent));
  flex: 0 0 auto;
}
.gtoc-item {
  display: block;
  margin-left: 2px;
  padding: 5px 0 5px 13px;
  border-left: 1px solid #ddd7cc;
  color: #858075;
  font-weight: 560;
  line-height: 1.42;
  transition: color .14s ease, border-color .14s ease;
}
.gtoc-item:hover { color: #373630; }
.gtoc-item.active {
  color: var(--gc, var(--accent));
  border-left: 2px solid var(--gc, var(--accent));
  font-weight: 750;
}
.gmain { min-width: 0; }
.gcat {
  margin: 0 0 80px;
  scroll-margin-top: 96px;
}
.gcat details { scroll-margin-top: 96px; }
.cathead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 30px;
  padding: 18px 0 17px;
  border-top: 1px solid #cdd8d6;
  border-bottom: 1px solid #e4dfd6;
  color: #292823;
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  line-height: 1.2;
  letter-spacing: -.025em;
}
.cathead .cbar {
  width: 4px;
  height: 22px;
  border-radius: 999px;
  background: var(--gc);
  flex-shrink: 0;
}
.gc-tech   { --gc: #4865a9; --gc-soft: #f0f3fa; --gc-line: #d8dfef; }
.gc-hero   { --gc: #77569c; --gc-soft: #f4f0f7; --gc-line: #e2d8e9; }
.gc-combat { --gc: #a85e31; --gc-soft: #f8f1eb; --gc-line: #ead8ca; }
.gc-train  { --gc: #38796b; --gc-soft: #eef5f3; --gc-line: #d4e4df; }
.gc-etc    { --gc: #746e64; --gc-soft: #f3f1ed; --gc-line: #dfdad1; }
.gitem {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin: 42px 0 14px;
  color: #34332e;
  font-size: clamp(1.05rem, 1.55vw, 1.2rem);
  font-weight: 760;
  line-height: 1.4;
  letter-spacing: -.015em;
  scroll-margin-top: 96px;
}
.cathead + .gitem { margin-top: 0; }
.gitem::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gc);
  flex: 0 0 auto;
  transform: translateY(-1px);
}
.gitem::after {
  content: "";
  height: 1px;
  margin-left: 6px;
  background: #e3ddd3;
  flex: 1;
}
.gsub {
  display: inline-block;
  margin: 12px 0 6px;
  padding: 4px 11px;
  border: 1px solid var(--gc-line);
  border-radius: 999px;
  background: transparent;
  color: var(--gc);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .045em;
}
.grow {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 10px 0;
  border-bottom: 1px solid #ebe6de;
}
.grow:last-of-type { border-bottom-color: transparent; }
.gnum {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gc);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.gtxt {
  color: #514f48;
  font-weight: 580;
  line-height: 1.5;
}
.gnote {
  margin: 12px 0 8px;
  padding: 10px 13px;
  border-left: 2px solid var(--gc);
  background: var(--gc-soft);
  color: #6e6a61;
  font-size: .9rem;
  font-weight: 600;
}

/* guide accordions */
.page-tips .stack { display: grid; gap: 8px; }
.page-tips .stack > * + * { margin-top: 0; }
.page-tips details.toggle {
  margin: 0;
  border-color: #d7e0de;
  border-radius: 9px;
  box-shadow: none;
  transition: border-color .15s ease, background .15s ease;
}
.page-tips details.toggle:hover,
.page-tips details.toggle[open] { border-color: #bdb4a6; }
.page-tips details.toggle > summary {
  padding: 14px 44px 14px 16px;
  color: #45433d;
  font-weight: 680;
  line-height: 1.4;
}
.page-tips details.toggle > summary::after {
  content: "+";
  right: 16px;
  top: 50%;
  color: #8a8377;
  font-size: 1.1rem;
  transform: translateY(-50%);
}
.page-tips details.toggle[open] > summary::after {
  content: "−";
  transform: translateY(-50%);
}
.page-tips details.toggle > .indented {
  padding: 12px 18px 18px;
  border-top-color: #e1e9e8;
  background: #f4f9f8;
}
.page-tips details.toggle li { margin: 6px 0; }

/* tall guide images — natural flow */
.treehead { margin-top: 26px; }
.page-tips .treeimg {
  display: block;
  width: 100%;
  max-width: 580px;
  height: auto;
  margin: 16px 0 8px;
  border: 1px solid #dcd6cc;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px -25px rgba(49,41,29,.42);
}
.page-tips .treeimg.half { max-width: 300px; }
.page-tips .treeimg.duel { max-width: 430px; }
.page-tips figure.image img,
.page-tips .indented > img,
.page-tips li > img {
  height: auto;
  max-height: 640px;
  border-radius: 7px;
}
.page-tips :is(.gtoc-cat, .gtoc-item, .gitem, details.toggle):focus-visible {
  outline: 2px solid rgba(192,123,22,.36);
  outline-offset: 3px;
}

@media (max-width: 960px) {
  .page-tips { padding-top: 36px; }
  .page-tips > h1 { margin-bottom: 30px; }
  .gwrap { display: block; }
  .gtoc {
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
    max-height: none;
    margin: 0 0 34px;
    padding: 0 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .gtoc-group {
    min-width: max-content;
    margin: 0;
    padding: 7px 12px;
    border: 1px solid var(--gc-line);
    border-radius: 999px;
    background: var(--gc-soft);
  }
  .gtoc-cat { padding: 0; white-space: nowrap; }
  .gtoc-item { display: none; }
}
@media (max-width: 600px) {
  .page-tips { padding: 30px 16px 48px; }
  .page-tips > h1 {
    gap: 14px;
    margin-bottom: 26px;
    font-size: 2.05rem;
  }
  .gcat { margin-bottom: 58px; }
  .cathead { margin-bottom: 24px; padding: 15px 0 14px; }
  .gitem { margin-top: 34px; align-items: flex-start; }
  .gitem::before { margin-top: 7px; }
  .gitem::after { display: none; }
  .grow { gap: 10px; padding: 9px 0; }
  .page-tips .column-list { gap: 8px; }
  .page-tips details.toggle > summary { padding: 13px 40px 13px 14px; }
  .page-tips details.toggle > .indented { padding: 10px 14px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-tips *, .page-tips *::before, .page-tips *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* table */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
table.simple-table { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.simple-table th, table.simple-table td {
  padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap;
}
table.simple-table thead td, table.simple-table thead th {
  position: sticky; top: 0; background: var(--accent-soft); font-weight: 700;
}
table.simple-table tr:nth-child(even) { background: #f4f9f8; }

.stack > * + * { margin-top: 8px; }
.footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 24px 16px 40px; border-top: 1px solid var(--line); }

/* notion inline highlights */
.highlight-yellow_background, mark {
  background: #fceebc; color: #7a5a08;
  border-radius: 4px; padding: 0 4px; font-weight: 600;
}

/* time converter tool */
.toolpanel { max-width: 720px; }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 600px) { .tool-grid { grid-template-columns: 1fr; } }
.tool-field { display: flex; flex-direction: column; gap: 5px; }
.tool-field label { font-size: .8rem; font-weight: 700; color: var(--muted); }
.tool-field input {
  font: inherit; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--text);
}
.tool-field input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.tool-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .8rem; font-weight: 700; color: var(--muted);
  margin: 16px 0 8px;
}
.tool-btns { display: flex; gap: 6px; }
.tool-head button {
  font: inherit; font-size: .78rem; cursor: pointer;
  background: #fff; color: var(--text); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px;
}
.tool-head button:hover { border-color: var(--accent); color: var(--accent); }
.tool-head button.ok { border-color: #3fae65; color: #2c7d4c; background: #eaf6ef; }
.tz-flags { display: flex; flex-wrap: wrap; gap: 8px; }
.tzflag {
  font: inherit; font-size: .84rem; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  background: #fff; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px;
  transition: all .12s;
}
.tzflag-f { font-size: 1.05em; filter: grayscale(1); opacity: .6; }
.tzflag.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); font-weight: 600; }
.tzflag.on .tzflag-f { filter: none; opacity: 1; }
#tz-out {
  width: 100%; font: inherit; font-size: .9rem; line-height: 1.55;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: #f4f9f8; color: var(--text); resize: vertical;
}

/* tz tool additions */
.tz-search {
  width: 100%; font: inherit; font-size: .88rem;
  padding: 8px 12px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text);
}
.tz-search:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.tz-flags { max-height: 300px; overflow-y: auto; padding: 2px; }
.tool-opts { display: flex; gap: 14px; font-weight: 500; }
.tool-opts label { display: flex; align-items: center; gap: 5px; cursor: pointer; font-size: .82rem; color: var(--text); }
.tool-opts input { accent-color: var(--accent); width: 15px; height: 15px; }

/* code boss (지명수배) native infographic */
.cb-card { border: 1px solid #d7e0de; border-top: 4px solid var(--cbc); border-radius: 12px;
  background: #fff; padding: 14px 16px 12px; margin: 12px 0; }
.cb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cb-code { background: var(--cbc); color: #fff; font-weight: 800; font-size: .76rem;
  border-radius: 7px; padding: 2px 9px; }
.cb-boss { font-weight: 900; font-size: 1.05rem; }
.cb-btype { color: #858075; font-size: .84rem; font-weight: 600; }
.cb-arrow { color: #a29a89; font-weight: 900; }
.cb-squad { color: var(--cbc); font-weight: 800; }
.cb-rowlbl { font-size: .7rem; font-weight: 800; color: #a29a89; letter-spacing: .09em; margin: 6px 0 2px; }
.cb-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 4px; }
.cb-hero { display: flex; flex-direction: column; align-items: center; width: 92px; text-align: center; }
.cb-av { width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--cbc);
  overflow: hidden; background: #eceff6; display: block; }
.cb-av img { width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transform: scale(1.15); transform-origin: top center; display: block; }
.cb-noimg { display: flex; align-items: center; justify-content: center; font-weight: 900; color: #9aa2b5; }
.cb-name { font-weight: 800; font-size: .84rem; margin-top: 4px; line-height: 1.2; }
.cb-sub { font-size: .7rem; color: #b3541e; font-weight: 700; word-break: keep-all; }
.cb-prio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #f4f9f8; border-radius: 9px; padding: 7px 12px; margin-top: 6px; font-size: .84rem; }
.cb-plbl { font-weight: 800; color: #858075; margin-right: 2px; }
.cb-pn { width: 20px; height: 20px; border-radius: 50%; background: var(--cbc); color: #fff;
  font-size: .68rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cb-pname { font-weight: 800; margin-right: 8px; }
.cb-warn { color: #b3402f; font-weight: 700; font-size: .85rem; margin-top: 8px; }

/* waterfall table */
.wf-wrap { margin-top: 12px; max-width: 640px; }
table.wftable td, table.wftable th { text-align: center; }
table.wftable td.wf-hq { font-weight: 800; background: #eef1f8; }
.wf-tier { display: inline-block; min-width: 44px; padding: 1px 10px; border-radius: 999px;
  color: #fff; font-weight: 800; font-size: .8rem; }

/* brand logo + discord button */
.brand { display: flex; align-items: center; gap: 8px; }
.brand-logo { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; display: block; }
.discord-btn {
  display: flex; align-items: center; gap: 7px;
  background: #5865F2; color: #fff !important; font-size: .82rem; font-weight: 700;
  border-radius: 999px; padding: 6px 14px; box-shadow: var(--shadow); white-space: nowrap;
}
.discord-btn:hover { background: #4752c4; }
.discord-btn svg { display: block; }
.store-btn {
  display: flex; align-items: center; gap: 7px;
  background: linear-gradient(180deg, #f2b84e, #e0972a); color: #fff !important;
  font-size: .82rem; font-weight: 700; border-radius: 999px; padding: 6px 14px;
  box-shadow: var(--shadow); white-space: nowrap;
}
.store-btn:hover { filter: brightness(1.05); }
.store-btn svg { display: block; }


/* mobile topbar: tidy rows — brand+buttons / clock / scrollable nav */
@media (max-width: 760px) {
  .topbar-inner { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px 8px; }
  .brand { font-size: 1rem; }
  .discord-btn { padding: 5px 12px; font-size: .78rem; }
  .store-btn { margin-left: auto; padding: 5px 12px; font-size: .78rem; }
  .clock { order: 4; margin: 0; flex: 1 0 100%; justify-content: center; }
  .mainnav {
    order: 5; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto;
    gap: 4px; padding-bottom: 2px; scrollbar-width: none;
  }
  .mainnav::-webkit-scrollbar { display: none; }
  .mainnav a { font-size: .85rem; padding: 6px 11px; }
}

/* gear priority guide */
.gr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 10px 0 16px; }
@media (max-width: 600px) { .gr-grid { grid-template-columns: repeat(2, 1fr); } }
.gr-card { background: #fff; border: 1.5px solid #d7e0de; border-radius: 14px; text-align: center;
  padding: 12px 6px 10px; }
.gr-card img { width: 64px; height: 64px; object-fit: contain; }
.gr-name { font-weight: 900; font-size: .98rem; margin-top: 2px; }
.gr-tag { display: inline-block; margin-top: 5px; color: #fff; font-size: .72rem; font-weight: 800;
  border-radius: 999px; padding: 2px 10px; }
.gr-rule { margin: 12px 0 4px; background: #e0f2ef; border-left: 4px solid #0d9488; border-radius: 8px;
  color: #8a6207; font-size: .92rem; font-weight: 800; padding: 9px 14px; }
.gr-sq { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff;
  border: 1.5px solid #d7e0de; border-radius: 13px; padding: 10px 16px; margin: 8px 0; }
.gr-sqname { min-width: 64px; font-size: 1rem; font-weight: 900; }
.gr-hero { display: flex; align-items: center; gap: 7px; }
.gr-av { width: 46px; height: 46px; border-radius: 50%; border: 3px solid; overflow: hidden;
  background: #eceff6; display: block; flex-shrink: 0; }
.gr-av img { width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transform: scale(1.15); transform-origin: top center; display: block; }
.gr-gear { width: 34px; height: 34px; object-fit: contain; }
.gr-htxt { font-size: .82rem; font-weight: 800; line-height: 1.25; }
.gr-arrow { color: #a29a89; font-weight: 900; margin: 0 2px; }

/* ---------------- daily to-do checklist ---------------- */
.todo {
  background: #fff; border: 1.5px solid var(--line); border-radius: 18px;
  padding: 16px 18px 14px; margin: 0 0 22px; box-shadow: var(--shadow);
}
.todo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.todo-title { font-size: 1.12rem; font-weight: 900; letter-spacing: -.01em; }
.todo-sub { color: var(--muted); font-size: .88rem; margin-top: 2px; }
.td-reset {
  flex: 0 0 auto; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700;
  color: var(--muted); background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 13px;
}
.td-reset:hover { color: var(--text); border-color: var(--accent); }
.td-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
@media (max-width: 680px) { .td-list { grid-template-columns: 1fr; } }
.td-row {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  background: #f4f9f8; border: 1.5px solid #e7e1d6; border-radius: 12px;
  padding: 10px 13px; transition: background .12s, border-color .12s, opacity .12s;
}
.td-row:hover { border-color: #4d9c8f; }
.td-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.td-box {
  flex: 0 0 auto; width: 21px; height: 21px; border-radius: 6px;
  border: 2.5px solid #4d9c8f; background: #fff; position: relative;
}
.td-row.on { background: #eef6f4; border-color: #bcdcd5; opacity: .72; }
.td-row.on .td-box { background: #4d9c8f; }
.td-row.on .td-box::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(42deg);
}
.td-row.on .td-txt { text-decoration: line-through; }
.td-txt { font-size: .95rem; font-weight: 700; line-height: 1.35; }

/* ---------------- downloads ---------------- */
.dlsec { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line); }
.dl-head { font-size: 1.3rem; margin: 0 0 4px; }
.dl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
@media (max-width: 760px) { .dl-grid { grid-template-columns: 1fr; } }
.dl-card {
  display: flex; align-items: center; gap: 14px; background: #fff;
  border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 16px;
  box-shadow: var(--shadow);
}
.dl-txt { flex: 1; min-width: 0; }
.dl-name { font-weight: 900; font-size: 1rem; }
.dl-desc { color: var(--muted); font-size: .85rem; line-height: 1.4; margin-top: 3px; }
.dl-btn {
  flex: 0 0 auto; background: var(--accent); color: #fff !important; font-weight: 800;
  font-size: .86rem; border-radius: 999px; padding: 8px 16px; white-space: nowrap;
}
.dl-btn:hover { filter: brightness(1.07); }

/* ---------------- RTL tweaks (Arabic) ---------------- */
[dir="rtl"] .gtoc-item, [dir="rtl"] .gtoc-cat { text-align: right; }
[dir="rtl"] .grow .gnum { margin-right: 0; }
[dir="rtl"] .cb-arrow, [dir="rtl"] .gr-arrow { transform: scaleX(-1); display: inline-block; }
[dir="rtl"] .artable .time, [dir="rtl"] .wftable td, [dir="rtl"] .simple-table td { direction: ltr; }
[dir="rtl"] .artable td:last-child, [dir="rtl"] .simple-table td:last-child { direction: rtl; }
[dir="rtl"] .clock-val { direction: ltr; }
[dir="rtl"] #tz-out { direction: ltr; text-align: left; }

/* the nav strip gets first claim on the topbar: when its labels don't fit,
   app.js adds .tight (then .tighter) to trade away chrome before it scrolls */
@media (min-width: 761px) {
  .topbar-inner.tight { gap: 10px; }
  .topbar-inner.tight .clock { padding: 6px 11px; }
  .topbar-inner.tight .clock-div,
  .topbar-inner.tight .clock-my { display: none; }
  .topbar-inner.tight .discord-btn span { display: none; }
  .topbar-inner.tight .discord-btn { padding: 7px 11px; }
  .topbar-inner.tighter .brand { font-size: .95rem; }
  .topbar-inner.tighter .brand-icon { display: none; }
  .topbar-inner.tighter .mainnav a { padding: 6px 9px; font-size: .88rem; }
}

/* ================= leadership: lock screen ================= */
.lockwrap { display: flex; justify-content: center; padding: 40px 0 80px; }
.lockcard {
  background: #fff; border: 1.5px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow); padding: 34px 30px 28px; max-width: 420px; width: 100%;
  text-align: center;
}
.lockicon { font-size: 2.2rem; line-height: 1; }
.lockcard h1 { font-size: 1.4rem; margin: 12px 0 6px; }
.lockdesc { color: var(--muted); font-size: .93rem; margin: 0 0 18px; line-height: 1.5; }
.lockbad { color: #c0392b; font-weight: 700; font-size: .9rem; margin: 0 0 12px; }
#lock-form { display: flex; gap: 8px; }
#lock-form input {
  flex: 1; min-width: 0; font: inherit; padding: 11px 14px;
  border: 1.5px solid var(--line); border-radius: 11px; background: #f4f9f8;
}
#lock-form input:focus { outline: none; border-color: var(--accent); background: #fff; }
#lock-form button {
  flex: 0 0 auto; cursor: pointer; font: inherit; font-weight: 800; color: #fff;
  background: var(--accent); border: 0; border-radius: 11px; padding: 11px 20px;
}
.lockback { display: inline-block; margin-top: 16px; font-size: .86rem; color: var(--muted); }

/* ================= leadership: score tracker ================= */
#vs-app { margin-top: 4px; }
.vs-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 11px 14px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.vs-group { display: flex; align-items: center; gap: 6px; }
.vs-right { margin-left: auto; }
[dir="rtl"] .vs-right { margin-left: 0; margin-right: auto; }
.vs-lbl { font-size: .8rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.vs-btn {
  cursor: pointer; font: inherit; font-size: .84rem; font-weight: 700; color: var(--text);
  background: #fff; border: 1.5px solid var(--line); border-radius: 9px; padding: 6px 12px;
}
.vs-btn:hover { border-color: var(--accent); }
.vs-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.vs-del { color: #c0392b; padding: 4px 10px; font-size: 1rem; line-height: 1; }
.vs-select, .vs-num {
  font: inherit; font-size: .84rem; padding: 6px 9px;
  border: 1.5px solid var(--line); border-radius: 9px; background: #fff; color: var(--text);
}
.vs-num { width: 62px; text-align: center; }
.vs-num.vs-num-wide { width: 92px; }

/* ---- day-normalised chart (distribution strip + lowest slice) ---- */
.vs-chart {
  margin: 0 0 14px; padding: 16px 18px 12px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  direction: ltr;          /* the plot reads left-to-right in every language */
}
.vs-chart-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 6px;
}
[dir="rtl"] .vs-chart-head { direction: rtl; }
.vs-chart-title { margin: 0; font-size: 1.02rem; font-weight: 700; }
.vs-chart-win { display: flex; align-items: center; gap: 6px; flex: none; }
.vs-chart-win .vs-num { width: 54px; }
.vs-chart-dl { margin-left: auto; flex: none; }
[dir="rtl"] .vs-chart-dl { margin-left: 0; margin-right: auto; }
.vs-chart-sub { font-size: .82rem; color: var(--muted); }
.vs-chart-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.vs-chart-svg { display: block; width: 100%; height: auto; min-width: 860px; }
.vs-chart-foot { margin: 8px 2px 0; font-size: .78rem; line-height: 1.55; color: var(--muted); }
[dir="rtl"] .vs-chart-foot { direction: rtl; text-align: right; }
.vs-chart-empty { margin: 6px 2px; font-size: .88rem; color: var(--muted); }
.vs-chart-thin {
  margin: 10px 2px 0; padding: 8px 12px; font-size: .8rem; line-height: 1.5;
  color: var(--text); background: var(--accent-soft);
  border-radius: 8px; border: 1px solid #eed0a8;
}
[dir="rtl"] .vs-chart-thin { direction: rtl; text-align: right; }

.vs-ch-tick { fill: #d8d1c3; }
.vs-ch-tick.on { fill: #e5484d; fill-opacity: .55; }
/* clipped at the top of the scale — a flat tip would read as a plateau */
.vs-ch-tick.over { fill: #b9b1a1; }
.vs-ch-tick:hover { fill: var(--accent); }
.vs-ch-med { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; opacity: .65; }
.vs-ch-cut { stroke: #b9b1a1; stroke-width: 1; stroke-dasharray: 2 3; }
.vs-ch-cap { font-size: 11px; font-weight: 700; fill: var(--muted);
  letter-spacing: .02em; text-transform: uppercase; }
.vs-ch-ax { font-size: 10px; fill: var(--muted); }
.vs-ch-ax.end, .vs-ch-name.end, .vs-ch-rank.end,
.vs-ch-cap.end, .vs-ch-val.end, .vs-pair-name.end { text-anchor: end; }
.vs-ch-ax.mid { text-anchor: middle; }
.vs-ch-rank { font-size: 10px; fill: #b0a898; font-variant-numeric: tabular-nums; }
.vs-ch-name { font-size: 12px; font-weight: 600; fill: var(--text); }
.vs-ch-val { font-size: 11px; font-weight: 700; fill: var(--muted);
  font-variant-numeric: tabular-nums; }
.vs-ch-bar { fill: #e5484d; }
.vs-ch-bar.s1 { fill-opacity: .30; }   /* just under the middle */
.vs-ch-bar.s2 { fill-opacity: .55; }   /* clearly behind */
.vs-ch-bar.s3 { fill-opacity: .80; }   /* half the alliance median or less */
.vs-ch-row:hover .vs-ch-bar { fill: var(--accent); fill-opacity: .85; }
.vs-ch-row:hover .vs-ch-name { fill: var(--accent); }

@media (max-width: 620px) {
  .vs-chart { padding: 12px 10px 10px; }
}

/* ---- duel vs donation, side by side ---- */
.vs-pair[hidden] { display: none; }
.vs-pair .vs-chart-svg { min-width: 700px; }
.vs-pair-name { font-size: 12px; font-weight: 600; fill: var(--text); }
.vs-pair-bar { fill: #b9b1a1; }
/* the members on both sides are the point of the chart, so they carry the
   one saturated colour and everything else stays quiet */
.vs-pair-bar.on { fill: #e5484d; fill-opacity: .75; }
.vs-ch-row.on .vs-pair-name { fill: #b3341f; }
.vs-pair-link { fill: none; stroke: #e5484d; stroke-width: 1.6; opacity: .5; }
.vs-ch-row.on:hover .vs-pair-bar { fill: var(--accent); fill-opacity: .9; }
.vs-pair-both {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 10px 2px 0; font-size: .84rem; font-weight: 600; color: #b3341f;
  word-break: keep-all; line-height: 1.5;
}
.vs-pair-both.vs-clear { color: #2e7d4f; }
.vs-pair-dot { flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: #e5484d; opacity: .75; }

/* ---- screenshot import ---- */
/* same card as the quick-entry box above it — the two are a pair */
.vs-imp {
  margin: 0 0 14px; border: 1.5px solid var(--line); border-radius: 14px;
  background: #fff; box-shadow: var(--shadow);
  padding: 13px 15px 11px;
}
.vs-imp-body { }
.vs-imp-hint { margin-top: 0; }
.vs-imp-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }
.vs-imp-kind {
  font-size: .76rem; font-weight: 700; letter-spacing: .02em;
  color: var(--accent); background: var(--accent-soft);
  border-radius: 999px; padding: 4px 11px;
}
.vs-imp-kind[hidden] { display: none; }
.vs-imp-note { font-size: .85rem; color: var(--muted); margin: 4px 0 0; }
.vs-imp-note:empty { display: none; }
.vs-imp-note.vs-bad { color: #c0392b; font-weight: 700; }
.vs-imp-note.vs-ok { color: #2e7d4f; font-weight: 700; }
.vs-imp-miss { font-size: .82rem; margin: 6px 0 0; line-height: 1.5; }
.vs-imp-miss:empty { display: none; }
.vs-imp-misslist {
  margin-top: 3px; padding: 7px 10px; border-radius: 8px;
  background: var(--red-bg); border: 1px solid #f0c2b5; color: var(--text);
  word-break: keep-all;
}
.vs-imp-list { max-height: 420px; overflow-y: auto; margin-top: 6px; }
.vs-imp-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px; border-top: 1px solid var(--line);
}
.vs-imp-cells {
  display: flex; align-items: center; gap: 6px 8px;
  flex: 1 1 auto; min-width: 0; flex-wrap: wrap;
}
.vs-imp-g1, .vs-imp-g2 { display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; }
.vs-imp-row.vs-unsure { background: #fdf3f1; }
/* Fixed widths, all packed to the left: the four cells line up as columns down
   the list so a crop and the value read from it sit side by side on every row. */
.vs-imp-thumb {
  height: 22px; width: 122px; flex: none;
  border-radius: 4px; background: #fff;
  object-fit: contain; object-position: left center;
}
[dir="rtl"] .vs-imp-thumb { object-position: right center; }
.vs-imp-sel {
  flex: none; width: 118px; font-size: .8rem; padding: 5px 6px;
}
/* the score crop sits next to the parsed number so a misread digit is obvious */
.vs-imp-thumb-sc { width: 104px; }
.vs-imp-score {
  flex: none; width: 106px; font: inherit; font-size: .86rem; font-weight: 600;
  text-align: right; padding: 5px 8px; border: 1px solid var(--line);
  border-radius: 9px; background: #fff; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.vs-imp-flag {
  flex: none; font-size: .74rem; font-weight: 700; color: #c0392b;
  background: #fdeae6; border-radius: 999px; padding: 2px 8px;
}
.vs-imp-confirm {
  margin-top: 12px; padding: 11px 13px; border-radius: 10px;
  background: var(--red-bg); border: 1px solid #f0c2b5;
}
.vs-imp-confirmtxt { font-size: .86rem; line-height: 1.5; margin-bottom: 9px; word-break: keep-all; }
.vs-imp-confirmbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.vs-imp-foot { display: flex; gap: 8px; margin-top: 12px; }
.vs-imp-foot[hidden] { display: none; }
.vs-imp-list:empty { display: none; }
/* Phone: one row becomes two lines — name crop + picker, then score crop +
   number — instead of running off the side. Nothing scrolls sideways. */
@media (max-width: 720px) {
  .vs-imp { padding: 12px 11px 10px; }
  .vs-imp-row { align-items: flex-start; padding: 7px 2px; }
  .vs-imp-row > input[type="checkbox"] { margin-top: 7px; }
  .vs-imp-g1, .vs-imp-g2 { flex: 1 1 100%; }
  .vs-imp-thumb { width: 104px; height: 20px; }
  .vs-imp-thumb-sc { width: 104px; }
  .vs-imp-sel { flex: 1 1 auto; width: auto; min-width: 0; }
  .vs-imp-score { flex: 1 1 auto; width: auto; min-width: 0; }
  .vs-imp-flag { margin-top: 6px; }
}

/* board switcher at the top of the leadership pages */
.vs-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.vs-tab { display: inline-block; padding: 8px 16px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff; color: var(--muted);
  font-size: .88rem; font-weight: 700; text-decoration: none; }
.vs-tab:hover { color: var(--ink); border-color: var(--muted); }
.vs-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* the roster on its own page is a plain open card, not a details */
.vs-roster.vs-board-open > .vs-rbody { padding-top: 2px; }

/* read-only session (view-only password) */
/* Same card treatment and the same 14px gap as the editing boxes it stands in
   for — a read-only session should read as the same page with one box swapped,
   not as a differently spaced one. */
.vs-robar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 13px 15px;
  border: 1.5px solid var(--line); border-radius: 14px;
  background: #fff; box-shadow: var(--shadow);
  font-size: .88rem; color: var(--muted);
}
.vs-rotag {
  flex: none; padding: 2px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}
.vs-status.vs-view { color: var(--accent); }
.vs-ro {
  display: block; min-width: 62px; padding: 4px 4px; text-align: center;
  font-size: .86rem;
  font-variant-numeric: tabular-nums; font-weight: 500;
}

.vs-status { font-size: .8rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.vs-status.vs-saved { color: #2e7d4f; }
.vs-status.vs-saving { color: var(--accent); }
.vs-status.vs-local, .vs-status.vs-offline { color: #b3541e; }

.vs-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 14px; }
.vs-table { border-collapse: separate; border-spacing: 0; width: 100%; background: #fff;
  border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; }
.vs-table th, .vs-table td { padding: 0; border-bottom: 1px solid var(--line); }
.vs-table thead th {
  position: sticky; top: 0; z-index: 3; background: #f1ede4;
  font-size: .76rem; font-weight: 700; color: var(--muted);
  padding: 6px 8px; text-align: center; white-space: nowrap; cursor: pointer;
}
.vs-table th.vs-nm, .vs-table td.vs-nm {
  position: sticky; left: 0; z-index: 2; background: #fff; text-align: left;
  padding: 3px 11px; min-width: 138px; box-shadow: 1px 0 0 var(--line);
}
[dir="rtl"] .vs-table th.vs-nm, [dir="rtl"] .vs-table td.vs-nm {
  left: auto; right: 0; box-shadow: -1px 0 0 var(--line);
}
.vs-table thead th.vs-nm { background: #f1ede4; z-index: 4; cursor: default; }
/* Emptying one column of one week. Kept faint until the header is hovered so it
   never competes with the day label, but always present on touch, where there
   is no hover to reveal it with. */
.vs-table thead th.vs-d, .vs-table thead th.vs-dn { position: relative; }
.vs-hlabel { display: inline-block; }
.vs-wipe {
  border: 0; background: none; cursor: pointer; padding: 0 2px; line-height: 1;
  font-size: .82rem; color: var(--muted); opacity: .28; margin-inline-start: 4px;
  vertical-align: baseline; transition: opacity .12s, color .12s;
}
.vs-table thead th:hover .vs-wipe { opacity: .75; }
.vs-wipe:hover, .vs-wipe:focus-visible { opacity: 1; color: #e5484d; outline: none; }
@media (hover: none) { .vs-wipe { opacity: .5; } }
/* The confirmation the x button opens. Fixed and body-level: inside the header
   cell the table's own horizontal scroll would clip it. */
.vs-wipeask {
  position: fixed; z-index: 60; max-width: 300px;
  background: #fff; border: 1.5px solid #f0dcae; border-radius: 12px;
  padding: 12px 14px; box-shadow: 0 10px 28px rgba(30, 22, 10, .18);
}
.vs-wipeask-q { font-size: .9rem; font-weight: 700; color: var(--ink);
  line-height: 1.45; word-break: keep-all; }
.vs-wipeask-sub { font-size: .8rem; color: var(--muted); margin-top: 4px;
  line-height: 1.45; word-break: keep-all; }
.vs-wipeask-btns { display: flex; gap: 8px; margin-top: 11px; }
.vs-wipeask .vs-btn { padding: 5px 14px; font-size: .82rem; }
.vs-btn.vs-danger { background: #e5484d; border-color: #e5484d; color: #fff; }
.vs-btn.vs-danger:hover { background: #cf3339; border-color: #cf3339; }
.vs-rnote:empty { display: none; }
.vs-rnote { margin: 8px 0 0; font-size: .82rem; line-height: 1.5; color: #1f6c5f;
  background: #eef6f4; border: 1.5px solid #bcdcd5; border-radius: 10px; padding: 7px 12px; }
.vs-name { font-weight: 600; font-size: .86rem; }
.vs-tag { margin-left: 6px; font-size: .66rem; font-weight: 700; color: var(--muted);
  background: var(--bg); border-radius: 999px; padding: 1px 7px; }
tr.vs-away .vs-name { color: var(--muted); }
.vs-c { text-align: center; }
.vs-in {
  width: 100%; min-width: 62px; font: inherit; font-size: .86rem; font-weight: 500;
  text-align: center; padding: 4px 4px; border: 0; background: transparent; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.vs-in:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: #fffdf7; }
.vs-c.vs-low { background: rgba(229, 72, 77, .3); }
.vs-c.vs-zero .vs-in, .vs-c.vs-zero .vs-ro { color: #c0392b; }
.vs-tt, .vs-dl, .vs-dn { text-align: center; font-weight: 600; font-size: .86rem;
  padding: 4px 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* donation sits next to the duel total but is a different currency entirely —
   kept visually quieter so the two aren't read as one scale */
.vs-dn { font-weight: 500; color: var(--muted); }
.vs-table thead th.vs-dn { cursor: pointer; }
.vs-dn .vs-in { color: var(--muted); font-weight: 500; }
.vs-tt.vs-low { background: rgba(229, 72, 77, .3); }
.vs-dl { font-weight: 500; font-size: .8rem; color: var(--muted); }
.vs-dl.vs-up { color: #2e7d4f; }
.vs-dl.vs-down { color: #c0392b; }
.vs-table tfoot td { background: #faf7f1; font-weight: 700; font-size: .82rem;
  text-align: center; padding: 6px 8px; border-bottom: 0; }
.vs-table tfoot td.vs-nm { text-align: left; background: #faf7f1; }
.vs-empty { color: var(--muted); background: #fff; border: 1.5px dashed var(--line);
  border-radius: 14px; padding: 30px; text-align: center; }
.vs-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between;
  color: var(--muted); font-size: .8rem; margin: 8px 2px 0; }
.vs-keys { font-variant: small-caps; letter-spacing: .02em; }

.vs-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.vs-roster { background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
  margin: 0 0 14px; overflow: hidden; box-shadow: var(--shadow); }
.vs-roster > summary { cursor: pointer; padding: 12px 16px; font-weight: 700; list-style: none; }
.vs-roster > summary::-webkit-details-marker { display: none; }
.vs-roster > summary::after { content: "▾"; float: right; color: var(--muted); }
.vs-roster[open] > summary::after { transform: rotate(180deg); display: inline-block; }
.vs-rbody { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.vs-rhead { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 6px; }
.vs-rlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.vs-rrow { display: flex; align-items: center; gap: 8px; }
.vs-rname { flex: 1; min-width: 0; font: inherit; font-size: .9rem; padding: 7px 10px;
  border: 1.5px solid var(--line); border-radius: 9px; background: #f4f9f8; }
.vs-away-lbl { display: flex; align-items: center; gap: 5px; font-size: .8rem;
  color: var(--muted); white-space: nowrap; }
.vs-radd { display: flex; gap: 8px; margin: 6px 0 16px; }
.vs-paste { width: 100%; margin-top: 10px; font: inherit; font-size: .88rem; padding: 9px 11px;
  border: 1.5px dashed var(--line); border-radius: 10px; background: #f4f9f8; resize: vertical; }
.vs-hint { color: var(--muted); font-size: .82rem; margin: 10px 2px 0; line-height: 1.5; }

.vs-modal { position: fixed; inset: 0; z-index: 200; background: rgba(30, 25, 15, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.vs-modal-box { background: #fff; border-radius: 18px; padding: 22px; width: 100%;
  max-width: 620px; max-height: 86vh; overflow: auto; box-shadow: 0 20px 60px -20px rgba(0,0,0,.4); }
.vs-modal-box h3 { margin: 0 0 14px; font-size: 1.15rem; }
.vs-modal-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.vs-out { width: 100%; font: inherit; font-size: .9rem; line-height: 1.5; padding: 12px;
  border: 1.5px solid var(--line); border-radius: 11px; background: #f4f9f8; resize: vertical; }

@media (max-width: 700px) {
  .vs-controls { gap: 8px 12px; }
  .vs-table th.vs-nm, .vs-table td.vs-nm { min-width: 116px; padding: 6px 8px; }
  .vs-in { min-width: 56px; font-size: .9rem; }
}

/* ---- leadership: quick entry ---- */
.vs-quick { background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 13px 15px 11px; margin-bottom: 14px; box-shadow: var(--shadow); }
.vs-qtitle { font-size: .82rem; font-weight: 800; color: var(--muted);
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 9px; }
.vs-qrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vs-qname { position: relative; flex: 0 1 240px; min-width: 150px; }
.vs-qinput, .vs-qscore { width: 100%; font: inherit; font-size: .95rem; padding: 9px 12px;
  border: 1.5px solid var(--line); border-radius: 10px; background: #f4f9f8; color: var(--text); }
.vs-qscore { flex: 1 1 190px; width: auto; min-width: 150px; text-align: center;
             font-variant-numeric: tabular-nums; font-weight: 600; }
.vs-qinput:focus, .vs-qscore:focus { outline: none; border-color: var(--accent); background: #fff; }
.vs-qmenu { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1.5px solid var(--line); border-radius: 11px; overflow: hidden;
  box-shadow: 0 10px 28px -10px rgba(60,50,30,.3); max-height: 260px; overflow-y: auto; }
.vs-qitem { padding: 9px 12px; cursor: pointer; font-size: .93rem; font-weight: 600;
  display: flex; align-items: center; gap: 6px; }
.vs-qitem:hover, .vs-qitem.on { background: var(--accent-soft); }
.vs-qdays { display: flex; gap: 4px; flex: 0 0 auto; }
.vs-qday { cursor: pointer; font: inherit; font-size: .86rem; font-weight: 700;
  color: var(--muted); background: #f4f9f8; border: 1.5px solid var(--line);
  border-radius: 9px; padding: 8px 12px; min-width: 44px; }
.vs-qday.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.vs-qgo { padding: 9px 18px; font-size: .9rem; }
.vs-qgo.vs-new { background: #2e7d4f; border-color: #2e7d4f; }
.vs-qnote:empty { display: none; }
.vs-qnote { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px;
  background: #eef6f4; border: 1.5px solid #bcdcd5; border-radius: 10px; padding: 7px 12px; }
.vs-qok { font-size: .88rem; font-weight: 700; color: #1f6c5f; }
.vs-qold { font-size: .8rem; color: var(--muted); }
.vs-qundo { cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700;
  color: var(--accent); background: none; border: 0; text-decoration: underline; margin-left: auto; }
[dir="rtl"] .vs-qundo { margin-left: 0; margin-right: auto; }
@media (max-width: 620px) {
  .vs-qname { flex: 1 1 100%; }
  .vs-qdays { flex: 1 1 100%; justify-content: space-between; }
  .vs-qday { flex: 1; min-width: 0; padding: 8px 4px; }
  .vs-qscore { flex: 1 1 auto; width: auto; }
}

/* rest days: greyed out, and never counted when flagging the bottom N */
.vs-c.vs-off { background: rgba(124, 119, 107, .12); }
.vs-c.vs-off .vs-in, .vs-c.vs-off .vs-ro { color: var(--muted); }
.vs-c.vs-off.vs-low { background: rgba(124, 119, 107, .12); }
.vs-rdays { display: flex; gap: 3px; flex: 0 0 auto; }
.vs-rday { cursor: pointer; font: inherit; font-size: .72rem; font-weight: 700;
  color: var(--text); background: #fff; border: 1.5px solid var(--line);
  border-radius: 7px; padding: 4px 0; width: 28px; text-align: center; }
.vs-rday.off { background: #efece5; border-color: #ddd6c9; color: #b3ab99;
  text-decoration: line-through; }
.vs-qrest { padding: 9px 16px; font-size: .9rem; color: var(--muted); }
.vs-qrest:hover { border-color: #b3ab99; color: var(--text); }

/* row numbers, 0-based, pinned to the left along with the name */
.vs-table th.vs-ix, .vs-table td.vs-ix {
  position: sticky; left: 0; z-index: 2; background: #fff;
  width: 34px; min-width: 34px; padding: 3px 4px; text-align: center;
  font-size: .7rem; font-weight: 500; color: #b3ab99;
  font-variant-numeric: tabular-nums;
}
.vs-table thead th.vs-ix { background: #f1ede4; z-index: 4; cursor: default; }
.vs-table tfoot td.vs-ix { background: #faf7f1; }
.vs-table th.vs-nm, .vs-table td.vs-nm { left: 34px; }
[dir="rtl"] .vs-table th.vs-ix, [dir="rtl"] .vs-table td.vs-ix { left: auto; right: 0; }
[dir="rtl"] .vs-table th.vs-nm, [dir="rtl"] .vs-table td.vs-nm { left: auto; right: 34px; }
@media (max-width: 700px) {
  .vs-table th.vs-ix, .vs-table td.vs-ix { width: 30px; min-width: 30px; }
  .vs-table th.vs-nm, .vs-table td.vs-nm { left: 30px; }
  [dir="rtl"] .vs-table th.vs-nm, [dir="rtl"] .vs-table td.vs-nm { left: auto; right: 30px; }
}
.vs-qwarn { margin-top: 8px; font-size: .84rem; font-weight: 700; color: #c0392b; }
.vs-qwarn[hidden] { display: none; }
.vs-qname.vs-bad .vs-qinput { border-color: #c0392b; background: #fdf3f1; }
.vs-qgo:disabled, .vs-qrest:disabled { opacity: .4; cursor: not-allowed; }
.vs-qgo:disabled:hover, .vs-qrest:disabled:hover { border-color: var(--line); }
.vs-qnote.vs-qask { background: #e0f2ef; border-color: #f0dcae; }
.vs-qasktxt { font-size: .88rem; font-weight: 700; color: #8a6207; }
.vs-qyes { margin-left: auto; }
[dir="rtl"] .vs-qyes { margin-left: 0; margin-right: auto; }
.vs-qask .vs-btn { padding: 5px 14px; font-size: .82rem; }

/* ---------------------------------------------------------- staff nav link */
.mainnav a.nav-staff { color: var(--accent); font-weight: 700; }
.mainnav a.nav-staff::before { content: "\1F512"; margin-right: 4px; font-size: .82em; opacity: .8; }
.mainnav a.nav-staff.active { color: #fff; background: var(--accent); }

/* ------------------------------------------------------------- tips board */
.tip-compose {
  border: 1.5px solid var(--line); border-radius: 16px; background: var(--card);
  padding: 18px 18px 16px; margin: 0 0 20px;
}
.tip-compose-h { font-size: 1.02rem; font-weight: 800; color: var(--text); margin: 0 0 12px; }
.tip-input, .tip-textarea {
  width: 100%; box-sizing: border-box; margin-bottom: 10px;
  border: 1.5px solid var(--line); border-radius: 10px; background: #f4f9f8;
  color: var(--text); font: inherit; padding: 10px 12px;
}
.tip-input:focus, .tip-textarea:focus { outline: none; border-color: var(--accent); }
.tip-input-sm { max-width: 240px; }
.tip-textarea { resize: vertical; line-height: 1.5; }
.tip-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tip-strip:empty { margin: 0; }
.tip-thumb { position: relative; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.tip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tip-thumb-x {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; line-height: 18px;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 15px;
  cursor: pointer; padding: 0;
}
.tip-compose-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tip-pick { cursor: pointer; }
.tip-status { font-size: .84rem; font-weight: 700; color: var(--accent);
  opacity: 0; transition: opacity .2s; margin-left: 4px; }
.tip-status.on { opacity: 1; }

.tip-list { display: flex; flex-direction: column; gap: 16px; }
.tip-empty { color: var(--muted); font-size: .92rem; padding: 24px 4px; text-align: center; }
.tip-card {
  border: 1.5px solid var(--line); border-radius: 16px; background: var(--card);
  padding: 18px 18px 16px;
}
.tip-card.tip-pending { border-style: dashed; background: #f2faf8; }
.tip-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tip-title { font-size: 1.08rem; font-weight: 800; color: var(--text); margin: 0; }
.tip-badge { font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.tip-badge.is-live { background: #e7f6ec; color: #1a8a44; }
.tip-badge.is-pending { background: var(--accent-soft); color: var(--accent); }
.tip-meta { color: var(--muted); font-size: .8rem; margin-top: 4px; }
.tip-body { margin-top: 10px; color: var(--text); font-size: .96rem; line-height: 1.6; }
.tip-body p { margin: 0 0 4px; white-space: pre-wrap; word-break: break-word; }
.tip-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tip-img { display: block; width: 132px; height: 132px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.tip-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tip-acts { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.tip-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(0,0,0,.82); cursor: zoom-out;
}
.tip-lightbox.on { display: flex; }
.tip-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }

/* -------------------------------------------------- public weekly-tips nav */
.mainnav a.nav-live { color: #1a8a44; font-weight: 700; }
.mainnav a.nav-live::before { content: "\2B50"; margin-right: 3px; font-size: .82em; }
.mainnav a.nav-live.active { color: #fff; background: #1a8a44; }

/* -------------------------------------------------- weekly-tips block editor */
.tip-blocks { margin: 4px 0 10px; }
.tip-ins { display: flex; gap: 6px; padding: 3px 0; opacity: .55; transition: opacity .12s; }
.tip-ins:hover { opacity: 1; }
.tip-ins-btn {
  font: inherit; font-size: .76rem; font-weight: 700; color: var(--muted);
  background: transparent; border: 1px dashed var(--line); border-radius: 7px;
  padding: 3px 10px; cursor: pointer;
}
.tip-ins-btn:hover { color: var(--accent); border-color: var(--accent); }
.tip-block { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0; }
.tip-block-side { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; padding-top: 2px; }
.tip-mv {
  width: 24px; height: 22px; line-height: 20px; text-align: center; padding: 0;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted);
  cursor: pointer; font-size: 13px;
}
.tip-mv:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.tip-mv:disabled { opacity: .3; cursor: default; }
.tip-mv-x:hover { border-color: #e5484d; color: #e5484d; }
.tip-block-text { flex: 1 1 auto; margin: 0; min-height: 44px; overflow: hidden; }
.tip-block-img { flex: 1 1 auto; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #f4f9f8; }
.tip-block-img img { display: block; max-width: 100%; max-height: 320px; margin: 0 auto; }

/* rendered post: a full-width figure between text blocks */
.tip-fig { margin: 12px 0; }
.tip-fig-a { display: block; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tip-fig-a img { display: block; width: 100%; height: auto; }

/* -------------------------------------------------- weekly-tips list view */
.tip-stage { margin-top: 4px; }
.tip-listbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.tip-rows { display: flex; flex-direction: column; gap: 8px; }
.tip-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--card); cursor: pointer; font: inherit; color: var(--text);
}
.tip-row:hover { border-color: var(--accent); }
.tip-row-pending { border-style: dashed; background: #f2faf8; }
.tip-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tip-row-title { font-size: 1rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tip-row-meta { font-size: .78rem; color: var(--muted); }
.tip-row-arrow { flex: 0 0 auto; color: var(--muted); font-size: 1.4rem; line-height: 1; }
.tip-back {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px;
  border: 0; background: transparent; color: var(--accent); font: inherit;
  font-weight: 700; font-size: .9rem; cursor: pointer; padding: 4px 0;
}
.tip-back:hover { text-decoration: underline; }

.schedule-note:empty { display: none; }