@font-face { font-family: Vazirmatn; src: url(/static/Vazirmatn-Regular.ttf); font-weight: 400; }
@font-face { font-family: Vazirmatn; src: url(/static/Vazirmatn-Bold.ttf); font-weight: 700; }
:root { --ink: #1c2530; --muted: #52606d; --line: #d9dee3; --bg: #f6f5f1; --card: #fff; --gold: #9a7209; --gold-dark: #7a5a07; --red: #b42318; --side: #1f2933; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: Vazirmatn, Tahoma, Arial, sans-serif; color: var(--ink); background: var(--bg); font-size: 14px; }
h1 { font-size: 1.45rem; margin: .2rem 0 .5rem; }
h2 { font-size: 1.15rem; margin: .2rem 0 .7rem; }
h3 { font-size: 1rem; margin: 0 0 .6rem; }
button, select, input, textarea { font: inherit; }
button { padding: .4rem .8rem; border: 1px solid var(--line); background: #fff; border-radius: 5px; cursor: pointer; min-height: 36px; }
button:hover { background: #f0efe9; }
button.primary { background: var(--gold); border-color: var(--gold); color: #fff; }
button.primary:hover { background: var(--gold-dark); }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
input, select, textarea { padding: .4rem; border: 1px solid #aeb7c0; border-radius: 5px; background: #fff; min-height: 36px; max-width: 100%; }
input[type=checkbox] { min-height: 0; width: 20px; height: 20px; }
.top { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .5rem .8rem; background: #fff; border-bottom: 1px solid var(--line); }
.top .grow { flex: 1; color: var(--muted); }
.menu { display: none; }
.layout { display: flex; min-height: calc(100vh - 54px); }
nav[aria-label] { width: 225px; flex: none; background: var(--side); color: #e9edf1; padding: .5rem 0 2rem; }
nav h4 { margin: .9rem .9rem .25rem; font-size: .78rem; color: #9fb0bf; font-weight: 700; }
nav[aria-label] a { display: block; padding: .4rem .9rem; color: #e9edf1; text-decoration: none; }
nav[aria-label] a:hover { background: #2c3a47; }
nav[aria-label] a.sel { background: var(--gold); color: #fff; }
main { flex: 1; min-width: 0; padding: .9rem; }
.help { background: #f4f1e6; color: #40505e; padding: .5rem .7rem; border-radius: 5px; margin: 0 0 .7rem; }
.hint { color: var(--muted); }
.warning { background: var(--red); color: #fff; padding: .5rem .8rem; font-weight: 700; }
.actions, .filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin: .5rem 0; }
.values { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: .6rem .8rem; margin: .5rem 0; overflow-wrap: anywhere; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: .7rem; margin: .7rem 0; }
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { padding: .4rem .5rem; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; overflow-wrap: anywhere; }
table.data th { background: #f0efe9; white-space: nowrap; }
table.data tbody tr { cursor: pointer; }
table.data tbody tr:hover { background: #faf8f0; }
table.data tbody tr.sel { background: #f3e7c0; }
.field { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .5rem; }
.field span { color: var(--muted); font-size: .86rem; }
dialog { border: 0; border-radius: 8px; padding: 1rem; width: min(760px, calc(100vw - 32px)); max-height: 90vh; overflow: auto; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog .field input:not([type=checkbox]), dialog .field select, dialog .field textarea { width: 100%; }
.lines { overflow-x: auto; }
.lines table { border-collapse: collapse; min-width: 720px; margin-bottom: .5rem; }
.lines td, .lines th { padding: .2rem; text-align: start; }
.lines input, .lines select { width: 100%; }
.form-error { color: var(--red); font-weight: 700; margin: .3rem 0; min-height: 1.2em; }
.toast { position: fixed; inset-block-end: 16px; inset-inline-start: 16px; background: #1f6f43; color: #fff; padding: .6rem 1rem; border-radius: 6px; z-index: 50; max-width: calc(100vw - 32px); }
.toast.bad { background: var(--red); }
.login { width: min(380px, calc(100vw - 32px)); margin: 8vh auto; display: flex; flex-direction: column; }
.login .field input, .login .field select { width: 100%; }
@media (max-width: 760px) {
  .menu { display: inline-block; }
  table.data { min-width: 640px; }
  table.data th, table.data td { overflow-wrap: normal; }
  nav[aria-label] { display: none; width: 100%; }
  .nav-open nav[aria-label] { display: block; }
  .layout { flex-direction: column; }
  main { padding: .6rem 16px; }
  .top { padding: .5rem 16px; }
}
/* TV board */
#tv { background: var(--tv-bg, #101418); color: var(--tv-fg, #f5e6b3); margin: 0; height: 100vh; overflow: hidden; cursor: default; }
.tv-page { height: 100vh; padding: 3vh 4vw; display: flex; flex-direction: column; gap: 2vh; }
.tv-page header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; border-bottom: 3px solid var(--tv-accent, #d4a017); }
.tv-page h1 { font-size: 5vh; margin: 0; color: var(--tv-accent, #d4a017); }
.tv-page h2 { font-size: 4vh; margin: 0; }
.tv-table { width: 100%; border-collapse: collapse; font-size: clamp(16px, 4vh, 54px); }
.tv-table th { color: var(--tv-accent, #d4a017); text-align: start; padding: 1vh 1vw; }
.tv-table td { padding: 1vh 1vw; border-top: 1px solid rgba(255,255,255,.18); }
.tv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2vw; overflow: hidden; }
.tv-card { border: 2px solid var(--tv-accent, #d4a017); border-radius: 10px; padding: 2vh 2vw; font-size: clamp(16px, 3.2vh, 40px); }
.tv-card h3 { color: var(--tv-accent, #d4a017); font-size: 1.1em; }
.tv-card p { margin: .4em 0; }
.tv-warning { background: #b42318; color: #fff; padding: 1.5vh 2vw; font-size: 3.5vh; font-weight: 700; margin: 0; }
.tv-time { margin-top: auto; font-size: 2.4vh; opacity: .8; }
/* Shop page */
.landing header { background: var(--side); color: #fff; padding: 1rem 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; align-items: center; }
.landing header a { color: #f3e7c0; }
.landing main { max-width: 860px; margin: 0 auto; padding: 1rem 16px; }
.landing section { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: .9rem; margin: .9rem 0; overflow-x: auto; }
.landing table { width: 100%; border-collapse: collapse; }
.landing th, .landing td { padding: .45rem; border-bottom: 1px solid var(--line); text-align: start; }
.landing label { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .6rem; }
.landing input, .landing textarea { width: 100%; }
.landing button { background: var(--gold); color: #fff; border-color: var(--gold); }
.landing .notice { background: #1f6f43; color: #fff; padding: .5rem .7rem; border-radius: 5px; }
.landing .warning { border-radius: 5px; }