/* Làng Đế Chế web theme (website + admin panel). Same look as the client app:
   dark wood, bronze frames, gold display type. Fonts: SIL OFL (fonts/). */
@font-face { font-family: "Playfair Display"; font-weight: 700; font-display: swap; src: url(/fonts/playfair-display-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-weight: 700; font-display: swap; src: url(/fonts/playfair-display-vietnamese-700-normal.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Playfair Display"; font-weight: 900; font-display: swap; src: url(/fonts/playfair-display-latin-900-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-weight: 900; font-display: swap; src: url(/fonts/playfair-display-vietnamese-900-normal.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 400; font-display: swap; src: url(/fonts/be-vietnam-pro-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 400; font-display: swap; src: url(/fonts/be-vietnam-pro-vietnamese-400-normal.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 600; font-display: swap; src: url(/fonts/be-vietnam-pro-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 600; font-display: swap; src: url(/fonts/be-vietnam-pro-vietnamese-600-normal.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

@font-face { font-family: "Cinzel"; font-weight: 900; font-display: swap; src: url(/fonts/cinzel-latin-900-normal.woff2) format("woff2"); }

:root {
  --bg: #120d08; --bg2: #1a130c; --wood1: #2b2015; --wood2: #1e160e; --wood3: #171009;
  --line: #4d3a22; --line2: #6b5230; --gold: #e3b65a; --gold-hi: #f7dc8e; --gold-lo: #94631f;
  --fg: #f1e6cf; --muted: #ad9c7e; --ink: #241808; --ok: #7fc28e; --err: #e0705f; --warn: #e8b85c; --blue: #7fb2d9;
  --crimson: #b3241a; --crimson-lo: #5e0e09; --cream: #f6e7c8; --brand: "Playfair Display", "Times New Roman", serif; /* has Vietnamese glyphs (Cinzel does not) */
  --display: "Playfair Display", "Times New Roman", serif; --body: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100vh; color: var(--fg); font: 14px/1.55 var(--body);
  background-color: #15110e;
  background-image:
    radial-gradient(ellipse at 50% -20%, rgba(227,182,90,.12), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0125 .0375' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .45 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23m)'/%3E%3C/svg%3E");
}
.brand-title { font-family: var(--brand); font-weight: 900; letter-spacing: .08em; color: var(--crimson); -webkit-text-stroke: .8px var(--cream); paint-order: stroke fill; text-shadow: 0 2px 0 #2b0603, 0 3px 10px rgba(0,0,0,.7); background: none; }
h1, h2, h3 { font-family: var(--display); margin: 0 0 10px; }
.gold, h1, .card h2 {
  font-weight: 900; letter-spacing: .06em;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card h2 { font-size: 17px; text-transform: uppercase; letter-spacing: .1em; padding-bottom: 8px; border-bottom: 1px solid rgba(227,182,90,.18); }
a { color: var(--gold); }
p, .muted { color: var(--muted); }
.small { font-size: 12px; }
code { color: var(--gold-hi); font-size: 12px; word-break: break-all; }
.card {
  position: relative; padding: 18px 20px; border-radius: 6px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 40%), linear-gradient(160deg, var(--wood1), var(--wood2) 60%, var(--wood3));
  box-shadow: inset 0 0 0 3px #17110b, inset 0 0 0 4px rgba(227,182,90,.28), 0 6px 16px rgba(0,0,0,.45);
}
.card::before, .card::after { content: ""; position: absolute; width: 7px; height: 7px; transform: rotate(45deg); top: -4px; background: linear-gradient(135deg, var(--gold-hi), var(--gold-lo)); }
.card::before { left: 10px; } .card::after { right: 10px; }
label { display: block; margin: 12px 0 4px; font-size: 13px; color: var(--muted); }
input:not([type=checkbox]), select, textarea {
  width: 100%; padding: 9px 11px; border-radius: 4px; border: 1px solid var(--line); background: #0f0a06; color: var(--fg); font: inherit;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.5);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); }
select { width: auto; }
button, .btn {
  display: inline-block; padding: 8px 15px; border-radius: 4px; cursor: pointer; text-decoration: none; font: 600 13px var(--body); color: var(--fg);
  border: 1px solid var(--line2); background: linear-gradient(180deg, #4a3620, #2e2113 55%, #241a0f);
  box-shadow: inset 0 1px 0 rgba(255,230,170,.15), 0 2px 3px rgba(0,0,0,.4);
}
button:hover:not(:disabled), .btn:hover { border-color: var(--gold); filter: brightness(1.1); }
button:disabled { opacity: .45; cursor: default; }
button.primary, .btn.primary { color: var(--ink); border-color: #b7832b; background: linear-gradient(180deg, var(--gold-hi), var(--gold) 50%, #b8822c); }
button.danger { border-color: #8e2a1c; background: linear-gradient(180deg, #8e2419, #561009); color: var(--cream); }
button.ghost { background: transparent; box-shadow: none; border-color: rgba(227,182,90,.25); }
button.small { padding: 4px 10px; font-size: 12px; }
.msg { margin-top: 10px; min-height: 1em; font-size: 14px; }
.msg.err, .err { color: var(--err); } .msg.ok { color: var(--ok); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font: 700 12px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); padding: 6px 8px; border-bottom: 1px solid var(--line2); }
td { padding: 7px 8px; border-bottom: 1px solid rgba(77,58,34,.5); vertical-align: top; }
tr:hover td { background: rgba(227,182,90,.04); }
.badge { font-size: 11px; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0,0,0,.35); color: var(--muted); white-space: nowrap; }
.badge.ok, .badge.active, .badge.registration, .badge.on, .badge.resolved { color: var(--ok); border-color: rgba(127,194,142,.4); }
.badge.warn, .badge.running, .badge.reported, .badge.open, .badge.ready, .badge.playing { color: var(--warn); border-color: rgba(232,184,92,.4); }
.badge.err, .badge.banned, .badge.disputed, .badge.admin, .badge.cancelled, .badge.rejected, .badge.off { color: var(--err); border-color: rgba(224,112,95,.4); }
.badge.finished, .badge.confirmed, .badge.done { color: var(--blue); border-color: rgba(127,178,217,.4); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }