/**
 * LandLords: Epos — UI Kit (Production Components)
 *
 * Extracted from www/style-guide.html §5.1–§5.35.
 * Production rules only — no demo wrappers.
 *
 * Layer: components (after reset, tokens, layout).
 * Page CSS must be wrapped in @layer layout so this layer wins.
 *
 * Imports: ui-kit.assets.css (§5.51–5.60)
 *
 * @version 1.0.1
 * @source www/style-guide.html
 */

/* Explicit cascade layer order (safety net — ui-kit.css may load first on
   ladder/admin). reset < tokens < layout < components < utilities. */
@layer reset, tokens, layout, components, utilities;

@import url('ui-kit.assets.css');

@layer components {
/* ==========================================================================
   §5.1 BUTTONS — chamfered octagonal (6px outer, 3px inner)
   ========================================================================== */
.btn {
  position: relative;
  height: 38px;
  padding: 0 12px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  border-radius: 0;
  box-shadow: none !important;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #2b1704;
  text-shadow: 0 1px 0 rgba(255, 240, 180, .7);
  background: linear-gradient(180deg, #fbe38e 0%, #d89f36 50%, #9e6d17 100%);
  clip-path: polygon(
    6px 0, calc(100% - 6px) 0,
    100% 6px, 100% calc(100% - 6px),
    calc(100% - 6px) 100%, 6px 100%,
    0 calc(100% - 6px), 0 6px
  ) !important;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .7));
  transition: filter .15s ease, transform .1s ease;
}

.btn::after {
  content: '' !important;
  position: absolute;
  inset: 0;
  display: block !important;
  pointer-events: none;
  box-sizing: border-box;
  border: 6px solid transparent !important;
  background: none !important;
  clip-path: none !important;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpolygon points='6,0.5 12,0.5 17.5,6 17.5,12 12,17.5 6,17.5 0.5,12 0.5,6' fill='none' stroke='%23ffe89e' stroke-width='1' stroke-linejoin='miter'/%3E%3C/svg%3E") 6 stretch !important;
  transition: filter .15s ease;
}

.btn::before {
  content: '' !important;
  position: absolute;
  inset: 3px;
  display: block !important;
  pointer-events: none;
  box-sizing: border-box;
  border: 4px solid transparent !important;
  background: none !important;
  clip-path: none !important;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpolygon points='4,0.5 10,0.5 13.5,4 13.5,10 10,13.5 4,13.5 0.5,10 0.5,4' fill='none' stroke='rgba(255,255,255,0.45)' stroke-width='1' stroke-linejoin='miter'/%3E%3C/svg%3E") 4 stretch !important;
}
.btn-txt { position: relative; z-index: 1; }
.btn-in { display: none !important; }
.btn:hover { filter: brightness(1.12) drop-shadow(0 0 6px var(--btn-glow, rgba(255, 215, 0, 0.45))); }
.btn:active { transform: translateY(1px); filter: none; }

/* Button variants */
.btn.sec {
  color: #f0e2ca;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
  background: linear-gradient(180deg, #423832 0%, #2b231e 100%);
}

.btn.sec::after {
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpolygon points='6,0.5 12,0.5 17.5,6 17.5,12 12,17.5 6,17.5 0.5,12 0.5,6' fill='none' stroke='%237a6343' stroke-width='1'/%3E%3C/svg%3E") !important;
}

.btn.sec::before {
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpolygon points='4,0.5 10,0.5 13.5,4 13.5,10 10,13.5 4,13.5 0.5,10 0.5,4' fill='none' stroke='rgba(212,175,55,0.35)' stroke-width='1'/%3E%3C/svg%3E") !important;
}

.btn.ghost {
  color: var(--color-accent, #ffd700);
  background: rgba(15, 12, 8, .75);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

.btn.ghost::after {
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpolygon points='6,0.5 12,0.5 17.5,6 17.5,12 12,17.5 6,17.5 0.5,12 0.5,6' fill='none' stroke='rgba(212,175,55,0.6)' stroke-width='1'/%3E%3C/svg%3E") !important;
}

.btn.ghost::before {
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpolygon points='4,0.5 10,0.5 13.5,4 13.5,10 10,13.5 4,13.5 0.5,10 0.5,4' fill='none' stroke='rgba(212,175,55,0.3)' stroke-width='1'/%3E%3C/svg%3E") !important;
}

.btn.ghost:hover {
  color: #fff2a3;
  background: rgba(35, 28, 14, .85);
}

.btn.ghost:hover::after {
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpolygon points='6,0.5 12,0.5 17.5,6 17.5,12 12,17.5 6,17.5 0.5,12 0.5,6' fill='none' stroke='%23ffd700' stroke-width='1.2'/%3E%3C/svg%3E") !important;
  filter: drop-shadow(0 0 4px #ffd700);
}

.btn.danger {
  color: #ff7878;
  background: linear-gradient(180deg, #2b1111 0%, #170707 100%);
  text-shadow: 0 0 6px rgba(255, 50, 50, .4);
}

.btn.danger::after {
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpolygon points='6,0.5 12,0.5 17.5,6 17.5,12 12,17.5 6,17.5 0.5,12 0.5,6' fill='none' stroke='%23a83232' stroke-width='1'/%3E%3C/svg%3E") !important;
}

.btn.danger::before {
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpolygon points='4,0.5 10,0.5 13.5,4 13.5,10 10,13.5 4,13.5 0.5,10 0.5,4' fill='none' stroke='rgba(255,120,120,0.35)' stroke-width='1'/%3E%3C/svg%3E") !important;
}
.btn.danger:hover { background: linear-gradient(180deg, #3a1616 0%, #1e0a0a 100%); }

.btn:disabled {
  color: #827b73;
  background: #1e1d1b;
  text-shadow: 0 -1px 0 #000;
  filter: none !important;
  cursor: not-allowed;
}

.btn:disabled::after {
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpolygon points='6,0.5 12,0.5 17.5,6 17.5,12 12,17.5 6,17.5 0.5,12 0.5,6' fill='none' stroke='%23383430' stroke-width='1'/%3E%3C/svg%3E") !important;
}

.btn:disabled::before {
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpolygon points='4,0.5 10,0.5 13.5,4 13.5,10 10,13.5 4,13.5 0.5,10 0.5,4' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1'/%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   §5.2 PANEL / CARD (parchment)
   ========================================================================== */
.panel {
  background: linear-gradient(180deg, var(--color-parchment-light), var(--color-parchment));
  border: 1px solid var(--color-parchment-edge);
  border-radius: var(--radius-12);
  padding: 18px;
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--color-gold-dim);
}

.panel h4 {
  font-family: var(--font-heading);
  margin: 0 0 6px;
  color: var(--color-accent);
  font-size: 16px;
}

.card {
  position: relative;
  background: linear-gradient(170deg, var(--color-surface-hover) 0%, var(--color-surface) 55%, #1e1e1e 100%);
  border: 1px solid var(--color-gold-dim);
  border-radius: var(--radius-8);
  padding: var(--spacing-16);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 215, 0, 0.05);
  transition:
    border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-normal);
}

.card:hover {
  border-color: var(--color-gold-accent-line);
  box-shadow: var(--shadow-lg), 0 0 16px rgba(255, 215, 0, 0.08);
  transform: translateY(-2px);
}

/* Accent variant — gold left bar (ladder server-card look). */
.card--accent {
  border-left: 3px solid var(--color-accent);
}

/* ==========================================================================
   §5.2b BLOCK (ladder panel look — parchment + gold header)
   ========================================================================== */
.block {
  position: relative;
  background: linear-gradient(180deg, var(--color-parchment-light), var(--color-parchment));
  border: 1px solid var(--color-parchment-edge);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
  padding: var(--spacing-12) var(--spacing-16);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-bottom: 1px solid var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-14);
  color: var(--color-text-light);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.1);
}

.block-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.block-content {
  padding: var(--spacing-16);
}

/* ==========================================================================
   §5.3 TABS
   ========================================================================== */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--color-parchment-edge);
}

.tab {
  font-family: var(--font-micro);
  font-size: 13px;
  padding: 9px 16px;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tab.on {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* ==========================================================================
   §5.4 BADGES
   ========================================================================== */
.badge {
  display: inline-block;
  font-family: var(--font-micro);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--radius-full);
  color: #111;
}
.badge.player { background: var(--color-role-player); }
.badge.mod { background: var(--color-role-moderator); }
.badge.admin { background: var(--color-role-admin); }
.badge.cheat { background: var(--color-role-cheater); }
.badge.pvp { background: var(--color-type-pvp); }
.badge.pve { background: var(--color-type-pve); }
.badge.rpg { background: var(--color-type-rpg); }
.badge.casual { background: var(--color-type-casual); }

/* ==========================================================================
   §5.5 INPUT
   ========================================================================== */
.input {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  background: #141414;
  border: 1px solid var(--color-parchment-edge);
  border-radius: var(--radius-8);
  padding: 10px 12px;
  width: 100%;
}

.input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-gold-dim);
}

.lbl {
  font-family: var(--font-micro);
  font-size: 11.5px;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: 5px;
}

/* ==========================================================================
   §5.6 PROGRESS BAR
   ========================================================================== */
.bar {
  height: 10px;
  border-radius: var(--radius-full);
  background: #141414;
  border: 1px solid var(--color-parchment-edge);
  overflow: hidden;
}

.bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

/* ==========================================================================
   §5.7 RESOURCE CHIPS
   ========================================================================== */
.res {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #141414;
  border: 1px solid var(--color-parchment-edge);
  border-radius: var(--radius-8);
  padding: 6px 12px;
  font-family: var(--font-micro);
  font-size: 14px;
}

.res .ic {
  width: 26px;
  height: 26px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 26px;
  padding: 0;
  margin: 0;
  text-align: center;
}
.res b { color: var(--color-text-light); font-weight: 600; }
.res .gold { color: var(--res-gold); }
.res .wood { color: var(--res-wood); }
.res .stone { color: var(--res-stone); }
.res .food { color: var(--res-food); }
.res .iron { color: var(--res-iron); }

/* ==========================================================================
   §5.8 FORMS — checkbox, radio, range, select, validation
   ========================================================================== */
.chk, .rad {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-micro);
  font-size: 13px;
  color: var(--color-text);
  padding: 5px 0;
  cursor: pointer;
  user-select: none;
}

.chk input, .rad input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chk .box {
  width: 18px;
  height: 18px;
  flex: none;
  position: relative;
  border-radius: var(--radius-4);
  background: linear-gradient(180deg, #141414, #1e1810);
  border: 1px solid var(--color-parchment-edge);
  box-shadow: inset 0 1px 0 rgba(255, 215, 0, .06);
}
.chk:hover .box { border-color: var(--color-gold-accent-line); }
.chk input:focus-visible + .box { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.chk input:checked + .box {
  background: linear-gradient(180deg, var(--color-secondary-light), var(--color-primary));
  border-color: var(--pig-gold, #d4af37);
  box-shadow: inset 0 0 0 3px #141414, 0 0 6px var(--color-gold-dim);
  border-radius: 5px;
}

.rad .dia {
  width: 16px;
  height: 16px;
  flex: none;
  position: relative;
  transform: rotate(45deg);
  border-radius: 3px;
  background: linear-gradient(180deg, #141414, #1e1810);
  border: 1px solid var(--color-parchment-edge);
}
.rad:hover .dia { border-color: var(--color-gold-accent-line); }
.rad input:focus-visible + .dia { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.rad input:checked + .dia {
  background: linear-gradient(180deg, var(--color-secondary-light), var(--color-primary));
  border-color: var(--pig-gold, #d4af37);
  box-shadow: inset 0 0 0 3px #141414, 0 0 6px var(--color-gold-dim);
}
.chk.disabled, .rad.disabled { color: var(--color-text-disabled); cursor: not-allowed; }
.chk.disabled .box, .rad.disabled .dia { background: #1c1c1c; border-color: #333; box-shadow: none; }

/* Range slider */
.rng {
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
}

.rng::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-parchment-edge);
  background: linear-gradient(90deg, #6e4a16, var(--color-accent)) 0 / var(--fill, 50%) 100% no-repeat,
    linear-gradient(180deg, #0e0e0e, #1a1a1a);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8);
}

.rng::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -3px;
  border-radius: 50%;
  border: 1px solid #5e4a12;
  background: radial-gradient(circle at 36% 30%, #fff0b8, var(--pig-gold, #d4af37) 55%, #9c7c1c);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(255, 255, 255, .22);
}

.rng::-moz-range-track {
  height: 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-parchment-edge);
  background: linear-gradient(180deg, #0e0e0e, #1a1a1a);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8);
}

.rng::-moz-range-progress {
  height: 8px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, #6e4a16, var(--color-accent));
}

.rng::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #5e4a12;
  background: radial-gradient(circle at 36% 30%, #fff0b8, var(--pig-gold, #d4af37) 55%, #9c7c1c);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.rng:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.rng:disabled { cursor: not-allowed; opacity: .45; }

/* Custom select */
.sel { position: relative; max-width: 280px; }

.sel-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  text-align: left;
  background: #141414;
  border: 1px solid var(--color-parchment-edge);
  border-radius: var(--radius-8);
  padding: 10px 12px;
  cursor: pointer;
}
.sel-trigger:hover { border-color: var(--color-gold-accent-line); }

.sel.open .sel-trigger, .sel-trigger:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-gold-dim);
}
.sel-caret { color: var(--pig-gold, #d4af37); font-size: 12px; transition: transform .15s ease; }
.sel.open .sel-caret { transform: rotate(180deg); }

.sel-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  display: none;
  background: linear-gradient(180deg, var(--color-parchment-light), var(--color-parchment));
  border: 1px solid var(--color-parchment-edge);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-lg);
}
.sel.open .sel-list { display: block; }

.sel-list li {
  padding: 8px 10px;
  border-radius: var(--radius-4);
  font-family: var(--font-micro);
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
}
.sel-list li:hover { background: var(--color-gold-dim); }
.sel-list li[aria-selected="true"] { color: var(--color-accent); }
.sel-list li.disabled { color: var(--color-text-disabled); cursor: not-allowed; }

/* Validation messages */
.msg { font-family: var(--font-micro); font-size: 11.5px; margin-top: 6px; }
.hint-msg { color: var(--color-text-muted); }
.err-msg { color: var(--color-error); }
.ok-msg { color: var(--color-success); }
.input.err { border-color: var(--color-error); box-shadow: 0 0 0 2px rgba(244, 67, 54, .25); }
.input.ok { border-color: var(--color-success); box-shadow: 0 0 0 2px rgba(76, 175, 80, .2); }

/* ==========================================================================
   §5.9 ITEM TOOLTIP CARD
   ========================================================================== */
.tt {
  background: linear-gradient(180deg, var(--color-parchment-light), var(--color-parchment));
  border: 1px solid var(--color-parchment-edge);
  border-radius: var(--radius-12);
  padding: 16px;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--color-gold-dim);
  max-width: 340px;
}
.tt-head { display: flex; align-items: center; gap: 12px; }

.tt-ic {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-8);
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, var(--pig-gold, #d4af37), #8a6d1c 80%);
  border: 1px solid #54430f;
}
.tt-ic svg { width: 28px; height: 28px; display: block; }

.tt-name {
  font-family: var(--font-heading);
  font-size: 16px;
  color: var(--color-text-light);
  font-weight: 400;
}

.tt-rar {
  font-family: var(--font-micro);
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.tt-name.common, .tt-rar.common { color: var(--color-text); }
.tt-name.rare, .tt-rar.rare { color: color-mix(in srgb, var(--pig-ultramarine, #2e4a8b) 55%, #cfe0ff); }
.tt-name.epic, .tt-rar.epic { color: var(--pig-gold, #d4af37); }
.tt-stats { margin: 12px 0 4px; display: grid; gap: 6px; }

.tt-stat {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-micro);
  font-size: 13px;
  color: var(--color-text);
}
.tt-stat b { color: var(--color-text-light); font-weight: 600; }
.tt-lore { font-style: italic; font-size: 13px; color: var(--color-text-muted); margin: 10px 0 0; }

/* ==========================================================================
   §5.10 VITALS BARS
   ========================================================================== */
.vital-lbl {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-micro);
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.vital-lbl b { color: var(--color-text); font-weight: 600; }

.vital-track {
  position: relative;
  height: 14px;
  border-radius: var(--radius-full);
  overflow: visible;
  background: #101010;
  border: 1px solid var(--color-parchment-edge);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8);
}

.vital-track i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  border-radius: var(--radius-full) 0 0 var(--radius-full);
}
.vital.hp i { background: linear-gradient(180deg, #d05548, var(--pig-cinnabar, #b23a2e) 60%, #8c2b21); }
.vital.st i { background: linear-gradient(180deg, #5ea873, var(--pig-malachite, #3f7a4e) 60%, #2c5a3a); }
.vital.mp i { background: linear-gradient(180deg, #5673c4, var(--pig-ultramarine, #2e4a8b) 60%, #22356b); }

.vital-ticks {
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.vital-ticks i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, .55);
}

.vital .cap {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 7px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, #9aa0a6, #4a4f55);
  border: 1px solid #222;
}
.vital .cap.left { left: -2px; border-radius: 6px 2px 2px 6px; }
.vital .cap.right { right: -2px; border-radius: 2px 6px 6px 2px; }

/* ==========================================================================
   §5.11 AVATAR FRAMES
   ========================================================================== */
.ava-frame {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.ava {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 26px;
  color: var(--pig-ink, #2b1d12);
  background: radial-gradient(circle at 50% 38%, var(--pig-parchment, #d8c39a), #b89a6a);
}

.ava-frame.wood {
  background: conic-gradient(from 30deg, var(--color-primary-dark), var(--color-primary), var(--color-primary-dark), var(--color-secondary), var(--color-primary-dark));
  box-shadow: 0 3px 8px rgba(0, 0, 0, .6);
}

.ava-frame.iron {
  background: conic-gradient(from 30deg, #4a4f55, #767d85, #4a4f55, #8b939c, #4a4f55);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .6);
}

.ava-frame.gold {
  background: repeating-conic-gradient(from 0deg, var(--pig-gold, #d4af37) 0 8deg, #8a6d1c 8deg 16deg);
  box-shadow: 0 0 14px var(--color-gold-dim), 0 3px 8px rgba(0, 0, 0, .6);
}

.ava-lbl {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-micro);
  font-size: 11px;
  color: var(--color-text-muted);
}

/* ==========================================================================
   §5.12 MODAL SCROLL
   ========================================================================== */
.modal-scroll {
  position: relative;
  width: min(440px, 100%);
  padding: 28px 30px 30px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .10), rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, .16)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--color-parchment-light), var(--color-parchment));
  border: 1px solid var(--color-parchment-edge);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--color-gold-dim),
    inset 0 14px 18px -10px rgba(0, 0, 0, .75), inset 0 -14px 18px -10px rgba(0, 0, 0, .75);
  animation: scroll-open .45s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes scroll-open {
  from { transform: scaleY(.82); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}

.modal-scroll h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  color: var(--color-accent);
  margin: 0;
  text-align: center;
}

.modal-scroll p {
  font-size: 13.5px;
  margin: 10px 0 0;
  color: #f0e2c4;
  line-height: 1.65;
  text-align: left;
}

.modal-scroll p::first-letter {
  font-family: var(--font-heading);
  font-size: 3.6em;
  line-height: .8;
  float: left;
  margin: .02em .06em 0 0;
  padding: 0;
  color: #f6c042;
  text-shadow: 1px 2px 3px rgba(0, 0, 0, .6);
}

/* Scroll rods */
.modal-scroll::before, .modal-scroll::after {
  content: '';
  position: absolute;
  left: -18px;
  right: -18px;
  height: 26px;
  border-radius: 13px;
  background:
    linear-gradient(90deg, #6b4a18 0 1px, #e6c25a 1px 5px, #a5812e 5px 8px, #6b4a18 8px 10px, rgba(0, 0, 0, 0) 10px),
    linear-gradient(90deg, rgba(0, 0, 0, 0) calc(100% - 10px), #6b4a18 calc(100% - 10px) calc(100% - 8px), #a5812e calc(100% - 8px) calc(100% - 5px), #e6c25a calc(100% - 5px) calc(100% - 1px), #6b4a18 calc(100% - 1px)),
    linear-gradient(180deg, #c08a4a 0%, #8a6034 30%, #5a3d1e 66%, #2a1a0a 100%);
  border: 1px solid #1a0f06;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .6), inset 0 2px 2px rgba(255, 220, 150, .28), inset 0 -3px 5px rgba(0, 0, 0, .55);
}
.modal-scroll::before { top: -13px; }
.modal-scroll::after { bottom: -13px; }

/* Wax close button */
.wax-close {
  position: absolute;
  top: -11px;
  right: 8px;
  width: 22px;
  height: 22px;
  padding: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1;
  color: #fbeede;
  font-weight: 700;
  background: linear-gradient(180deg, #c85a48 0%, #8f3126 55%, #5a1712 100%);
  border: none;
  border-radius: 0;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .7));
  text-shadow: 0 1px 1px rgba(0, 0, 0, .55);
  cursor: pointer;
}

.wax-close::after {
  content: '';
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  box-sizing: border-box;
  border: 5px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon points='5,0.5 11,0.5 15.5,5 15.5,11 11,15.5 5,15.5 0.5,11 0.5,5' fill='none' stroke='%23ffe89e' stroke-width='1' stroke-linejoin='miter'/%3E%3C/svg%3E") 5 stretch;
}

.wax-close::before {
  content: '';
  position: absolute;
  inset: 3px;
  display: block;
  pointer-events: none;
  box-sizing: border-box;
  border: 3px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpolygon points='3,0.5 7,0.5 9.5,3 9.5,7 7,9.5 3,9.5 0.5,7 0.5,3' fill='none' stroke='rgba(255,240,210,0.55)' stroke-width='1' stroke-linejoin='miter'/%3E%3C/svg%3E") 3 stretch;
}
.wax-close svg { width: 10px; height: 10px; display: block; }
.wax-close:hover { filter: brightness(1.15) drop-shadow(0 0 6px rgba(255, 90, 70, .7)); }
.wax-close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ==========================================================================
   §5.13 TOASTS
   ========================================================================== */
.toast {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-parchment-edge);
  border-left: 4px solid var(--color-info);
  border-radius: var(--radius-8);
  padding: 12px 14px;
}
.toast.error { border-left-color: var(--color-error); }
.toast.warning { border-left-color: var(--color-warning); }
.toast.success { border-left-color: var(--color-success); }
.toast.info { border-left-color: var(--color-info); }

.toast > b, .toast .t-body b {
  font-family: var(--font-micro);
  font-size: 13px;
  color: var(--color-text-light);
}
.toast .t-body p { margin: 2px 0 0; font-size: 12.5px; color: var(--color-text-muted); }

.t-ic {
  width: 26px;
  height: 26px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-4);
  background: #141414;
  border: 1px solid var(--color-parchment-edge);
}
.t-ic svg { width: 16px; height: 16px; display: block; }

.t-x {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 15px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-4);
}
.t-x:hover { color: var(--color-text-light); background: var(--color-surface-hover); }
.t-x:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* ==========================================================================
   §5.14 DATA TABLE
   ========================================================================== */
.tbl-wrap { overflow-x: auto; }

.dtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 560px;
}

.dtable th {
  font-family: var(--font-micro);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--color-text-muted);
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--color-gold-accent-line);
  white-space: nowrap;
}

.dtable td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: var(--color-text);
}

.dtable td.num {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-light);
  white-space: nowrap;
}
.dtable tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .025); }
.dtable tbody tr:hover { background: var(--color-gold-dim); }

/* ==========================================================================
   §5.15 POPOVER (coach-mark)
   ========================================================================== */
.popover {
  position: relative;
  width: min(300px, calc(100vw - 40px));
  padding: 16px 18px;
  color: var(--color-text);
  isolation: isolate;
}

.popover::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--color-parchment-light), var(--color-parchment));
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5));
}

.popover::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 8px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='8,0.5 16,0.5 23.5,8 23.5,16 16,23.5 8,23.5 0.5,16 0.5,8' fill='none' stroke='%23d4af37' stroke-width='1'/%3E%3Cpolygon points='8,3.5 16,3.5 20.5,8 20.5,16 16,20.5 8,20.5 3.5,16 3.5,8' fill='none' stroke='rgba(255,215,0,0.4)' stroke-width='1'/%3E%3C/svg%3E") 8 stretch;
}

.pop-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--color-parchment-light);
  border: 1px solid var(--color-parchment-edge);
  transform: rotate(45deg);
}

.popover[data-side="bottom"] .pop-arrow {
  top: -7px;
  left: var(--ax, 50%);
  margin-left: -6px;
  border-right: none;
  border-bottom: none;
}

.popover[data-side="top"] .pop-arrow {
  bottom: -7px;
  left: var(--ax, 50%);
  margin-left: -6px;
  border-left: none;
  border-top: none;
  background: var(--color-parchment);
}

.popover[data-side="left"] .pop-arrow {
  right: -7px;
  top: var(--ay, 50%);
  margin-top: -6px;
  border-left: none;
  border-bottom: none;
  background: var(--color-parchment);
}

.popover[data-side="right"] .pop-arrow {
  left: -7px;
  top: var(--ay, 50%);
  margin-top: -6px;
  border-right: none;
  border-top: none;
}

.pop-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-accent);
  margin: 0 0 4px;
  padding-right: 18px;
}
.pop-body { font-size: 13px; line-height: 1.55; margin: 0; color: var(--color-text); }
.pop-body b { color: var(--color-text-light); }

.pop-step {
  font-family: var(--font-micro);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 4px;
}

.pop-x {
  position: absolute;
  top: 11px;
  right: 13px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-muted);
}
.pop-x:hover { color: var(--color-text-light); border-color: var(--color-parchment-edge); background: rgba(0, 0, 0, .25); }
.pop-x:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.pop-dots { display: flex; gap: 5px; }

.pop-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 215, 0, .22);
  border: 1px solid var(--color-gold-accent-line);
}
.pop-dots i.on { background: var(--pig-gold, #d4af37); box-shadow: 0 0 6px var(--color-gold-glow); }
.pop-actions { display: flex; gap: 8px; margin-left: auto; }

/* Live popover layer */
.pop-layer { position: fixed; inset: 0; z-index: 300; }
.pop-layer[hidden] { display: none; }
.pop-catch { position: absolute; inset: 0; }

.pop-spot {
  position: absolute;
  border-radius: 10px;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55), 0 0 0 3px var(--color-accent),
    0 0 0 9px rgba(255, 215, 0, .22), 0 0 22px 4px rgba(0, 0, 0, .55);
  transition: left .28s cubic-bezier(.34, 1.56, .64, 1), top .28s cubic-bezier(.34, 1.56, .64, 1),
    width .28s cubic-bezier(.34, 1.56, .64, 1), height .28s cubic-bezier(.34, 1.56, .64, 1);
}

.pop-layer .popover {
  position: absolute;
  z-index: 2;
  animation: pop-in .22s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pop-layer .popover { animation: none; }
  .pop-spot { transition: none; }
}

/* ==========================================================================
   §5.16 SWITCH
   ========================================================================== */
.sw {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-micro);
  font-size: 13px;
  color: var(--color-text);
  user-select: none;
}
.sw input { position: absolute; opacity: 0; pointer-events: none; }

.sw .track {
  position: relative;
  width: 46px;
  height: 24px;
  flex: none;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, #141414, #1e1810);
  border: 1px solid var(--color-parchment-edge);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8);
  transition: background .2s ease, border-color .2s ease;
}

.sw .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff0b8, var(--pig-gold, #d4af37) 55%, #9c7c1c);
  border: 1px solid #5e4a12;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  transition: left .2s cubic-bezier(.34, 1.56, .64, 1);
}

.sw input:checked + .track {
  background: linear-gradient(180deg, #6e4a16, var(--color-accent));
  border-color: var(--pig-gold, #d4af37);
}
.sw input:checked + .track .knob { left: 24px; }
.sw input:focus-visible + .track { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.sw.disabled { color: var(--color-text-disabled); cursor: not-allowed; }
.sw.disabled .track { opacity: .5; }

/* ==========================================================================
   §5.17 SEGMENTED CONTROL
   ========================================================================== */
.seg {
  display: inline-flex;
  border: 1px solid var(--color-parchment-edge);
  border-radius: var(--radius-8);
  overflow: hidden;
  background: #141414;
}

.seg button {
  font-family: var(--font-micro);
  font-size: 12.5px;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  border-right: 1px solid var(--color-parchment-edge);
}
.seg button:last-child { border-right: none; }
.seg button:hover { color: var(--color-text); background: var(--color-surface-hover); }

.seg button.on {
  color: #2b1704;
  background: linear-gradient(180deg, #fbe38e, #d89f36);
  font-weight: 600;
}

/* ==========================================================================
   §5.18 STEPPER
   ========================================================================== */
.stp {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-parchment-edge);
  border-radius: var(--radius-8);
  overflow: hidden;
  background: #141414;
}

.stp button {
  width: 34px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--color-accent);
  font-size: 18px;
  cursor: pointer;
  font-family: var(--font-body);
}
.stp button:hover { background: var(--color-gold-dim); }

.stp .val {
  min-width: 52px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--color-text-light);
  border-left: 1px solid var(--color-parchment-edge);
  border-right: 1px solid var(--color-parchment-edge);
  padding: 0 8px;
  line-height: 36px;
}

/* ==========================================================================
   §5.19 DROPDOWN / CONTEXT MENU
   ========================================================================== */
.menu { position: relative; display: inline-block; }

.menu-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  margin: 0;
  padding: 6px;
  list-style: none;
  display: none;
  background: linear-gradient(180deg, var(--color-parchment-light), var(--color-parchment));
  border: 1px solid var(--color-parchment-edge);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--color-gold-dim);
}
.menu.open .menu-list { display: block; }

.menu-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-4);
  font-family: var(--font-micro);
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
}
.menu-list li:hover { background: var(--color-gold-dim); }
.menu-list li .mi { width: 18px; text-align: center; color: var(--pig-gold, #d4af37); }
.menu-list li .mk { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted); }
.menu-list li.disabled { color: var(--color-text-disabled); cursor: not-allowed; }
.menu-list li.danger { color: #ff7878; }
.menu-list .sep { height: 1px; margin: 5px 4px; background: var(--color-parchment-edge); }

/* ==========================================================================
   §5.20 SMALL TOOLTIP
   ========================================================================== */
.tip { position: relative; display: inline-block; }

.tip .tip-b {
  position: absolute;
  z-index: 40;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-micro);
  font-size: 11.5px;
  color: var(--color-text-light);
  background: #141414;
  border: 1px solid var(--color-parchment-edge);
  border-radius: var(--radius-4);
  padding: 5px 9px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.tip .tip-b::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: #141414;
}
.tip:hover .tip-b { opacity: 1; }

/* ==========================================================================
   §5.21 DRAWER
   ========================================================================== */
.drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(280px, 80%);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--color-parchment-light), var(--color-parchment));
  border-left: 1px solid var(--color-parchment-edge);
  box-shadow: -8px 0 20px rgba(0, 0, 0, .5);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.drawer.open { transform: none; }

.drawer .dh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-parchment-edge);
  font-family: var(--font-heading);
  color: var(--color-accent);
  font-size: 15px;
}
.drawer .db { padding: 14px 16px; overflow: auto; font-size: 13px; color: var(--color-text); }

/* ==========================================================================
   §5.22 ACCORDION
   ========================================================================== */
.acc {
  border: 1px solid var(--color-parchment-edge);
  border-radius: var(--radius-8);
  overflow: hidden;
  background: var(--color-surface);
}
.acc + .acc { margin-top: 8px; }

.acc-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--color-text-light);
}
.acc-h .caret { margin-left: auto; color: var(--pig-gold, #d4af37); transition: transform .2s ease; }
.acc.open .acc-h .caret { transform: rotate(180deg); }

.acc-b {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  font-size: 13px;
  color: var(--color-text-muted);
}
.acc.open .acc-b { max-height: 220px; }
.acc-b > div { padding: 0 14px 14px; }

/* ==========================================================================
   §5.23 PAGINATION
   ========================================================================== */
.pager { display: flex; gap: 6px; align-items: center; }

.pager button {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--color-parchment-edge);
  border-radius: var(--radius-4);
  background: #141414;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 13px;
  cursor: pointer;
}
.pager button:hover { border-color: var(--color-gold-accent-line); color: var(--color-accent); }

.pager button.on {
  background: linear-gradient(180deg, #fbe38e, #d89f36);
  color: #2b1704;
  border-color: #e8c15a;
  font-weight: 700;
}
.pager button:disabled { opacity: .4; cursor: not-allowed; }
.pager .dots { color: var(--color-text-muted); padding: 0 4px; }

/* ==========================================================================
   §5.24 SPINNER / LOADER
   ========================================================================== */
.spin {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--color-parchment-edge);
  border-top-color: var(--color-accent);
  animation: spin .8s linear infinite;
}
.spin.sm { width: 20px; height: 20px; border-width: 2px; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   §5.25 SKELETON
   ========================================================================== */
.skel {
  background: linear-gradient(90deg, #1e1e1e 25%, #2a2a2a 37%, #1e1e1e 63%);
  background-size: 400% 100%;
  border-radius: var(--radius-4);
  animation: skel 1.4s ease infinite;
}
.skel.line { height: 12px; margin: 8px 0; }
.skel.title { height: 18px; width: 40%; }
.skel.avatar { width: 44px; height: 44px; border-radius: 50%; }

@keyframes skel {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* ==========================================================================
   §5.26 RATING
   ========================================================================== */
.rate {
  display: inline-flex;
  gap: 3px;
  font-size: 20px;
  line-height: 1;
  color: var(--color-text-disabled);
}
.rate .on { color: var(--pig-gold, #d4af37); text-shadow: 0 0 6px var(--color-gold-dim); }

/* ==========================================================================
   §5.27 BANNER / RIBBON
   ========================================================================== */
.banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: linear-gradient(180deg, var(--color-parchment-light), var(--color-parchment));
  border: 1px solid var(--color-parchment-edge);
  border-radius: var(--radius-8);
  box-shadow: inset 0 0 0 1px var(--color-gold-dim);
  font-size: 13.5px;
  color: var(--color-text);
}
.banner .b-ic { color: var(--color-accent); font-size: 18px; flex: none; }
.banner b { color: var(--color-text-light); }

.banner .b-x {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 15px;
}

.ribbon {
  display: inline-block;
  position: relative;
  padding: 6px 22px;
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: .06em;
  color: #2b1704;
  background: linear-gradient(180deg, #fbe38e, #d89f36);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%);
}

/* ==========================================================================
   §5.28 STAT BLOCK
   ========================================================================== */
.stat {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-micro);
}

.stat .sv {
  font-family: var(--font-heading);
  font-size: 26px;
  color: var(--color-text-light);
  line-height: 1;
}

.stat .sl {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.stat .sd { font-size: 12px; font-weight: 600; }
.stat .sd.up { color: var(--color-success); }
.stat .sd.down { color: var(--color-error); }

/* ==========================================================================
   §5.29 KEY-VALUE LIST
   ========================================================================== */
.kv {
  display: grid;
  gap: 6px;
  font-family: var(--font-micro);
  font-size: 13px;
  max-width: 340px;
}
.kv .row { display: flex; align-items: baseline; gap: 8px; }
.kv .k { color: var(--color-text-muted); }

.kv .lead {
  flex: 1;
  border-bottom: 1px dotted var(--color-parchment-edge);
  transform: translateY(-3px);
}
.kv .v { color: var(--color-text-light); font-weight: 600; }

/* ==========================================================================
   §5.30 TIMELINE / EVENT LOG
   ========================================================================== */
.tl {
  position: relative;
  margin: 0;
  padding: 0 0 0 22px;
  list-style: none;
}

.tl::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--color-parchment-edge);
}
.tl li { position: relative; padding: 0 0 16px; }

.tl li::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff0b8, var(--pig-gold, #d4af37) 60%, #9c7c1c);
  border: 1px solid #5e4a12;
}
.tl .tt { font-family: var(--font-micro); font-size: 11px; color: var(--color-text-muted); }
.tl .td { font-size: 13px; color: var(--color-text); }

/* ==========================================================================
   §5.31 EMPTY STATE
   ========================================================================== */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 28px 20px;
  color: var(--color-text-muted);
}
.empty .e-ic { font-size: 34px; color: var(--color-parchment-edge); filter: grayscale(.3); }
.empty .e-t { font-family: var(--font-heading); font-size: 16px; color: var(--color-text); }
.empty .e-d { font-size: 12.5px; max-width: 280px; }

/* ==========================================================================
   §5.32 RADIAL PROGRESS
   ========================================================================== */
.ring {
  --p: 64;
  --sz: 64px;

  width: var(--sz);
  height: var(--sz);
  border-radius: 50%;
  flex: none;
  position: relative;
  background: conic-gradient(var(--color-accent) calc(var(--p) * 1%), #141414 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ring::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-parchment-edge);
}

.ring span {
  position: relative;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text-light);
}

/* ==========================================================================
   §5.33 CHIP (removable)
   ========================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-micro);
  font-size: 12px;
  color: var(--color-text);
  background: #141414;
  border: 1px solid var(--color-parchment-edge);
  border-radius: var(--radius-full);
  padding: 4px 6px 4px 12px;
}

.chip .cx {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.chip .cx:hover { color: var(--color-text-light); background: var(--color-surface-hover); }
.chip.gold { border-color: var(--color-gold-accent-line); color: var(--color-accent); }

/* ==========================================================================
   §5.34 TREE VIEW
   ========================================================================== */
.tree { list-style: none; margin: 0; padding: 0; font-family: var(--font-micro); font-size: 13px; }
.tree ul { list-style: none; margin: 0; padding-left: 18px; border-left: 1px solid var(--color-parchment-edge); }
.tree li { padding: 3px 0; }

.tree .node {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--color-text);
  padding: 2px 6px;
  border-radius: var(--radius-4);
}
.tree .node:hover { background: var(--color-gold-dim); }
.tree .node .tw { color: var(--pig-gold, #d4af37); width: 12px; display: inline-block; transition: transform .15s ease; }
.tree li.collapsed > ul { display: none; }
.tree li.collapsed > .node .tw { transform: rotate(-90deg); }
.tree .leaf { color: var(--color-text-muted); padding: 2px 6px 2px 24px; }

/* ==========================================================================
   §5.35 SPLIT BUTTON / BUTTON GROUP
   ========================================================================== */
.btngroup { display: inline-flex; }
.split { display: inline-flex; }

/* ==========================================================================
   §4.4 DECORATIVE — ornamented divider
   ========================================================================== */
.divider-ornament {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

.divider-ornament::before, .divider-ornament::after {
  content: '';
  flex: 1;
  height: 1px;
}

.divider-ornament::before {
  background: linear-gradient(90deg, transparent, var(--color-gold-accent-line));
}

.divider-ornament::after {
  background: linear-gradient(90deg, var(--color-gold-accent-line), transparent);
}

.divider-ornament span {
  position: relative;
  flex: none;
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-shadow: none;
  transform: rotate(45deg);
  background: #b19133;
  border: 1px solid rgba(212, 175, 55, .5);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .35), inset -1px -1px 1px rgba(255, 215, 0, .10), 0 1px 0 rgba(255, 215, 0, .18);
}
.divider-ornament span::before, .divider-ornament span::after { display: none; }

/* Panel ornate corners */
.panel-ornate { position: relative; }

.panel-ornate::before, .panel-ornate::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  border: 2px solid var(--pig-gold, #d4af37);
  opacity: .75;
}

.panel-ornate::before {
  top: 5px;
  left: 5px;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 6px;
}

.panel-ornate::after {
  bottom: 5px;
  right: 5px;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 6px;
}

/* Form controls inherit theme font */
button, input, select, textarea { font-family: inherit; color: inherit; }
.wax-close, .t-x { font-family: var(--font-body); }

} /* @layer components */