@font-face { font-family: "Season Mix"; src: url(assets/fonts/SeasonMix-Medium.ttf); font-weight: 500; }
@font-face { font-family: "Season Sans"; src: url(assets/fonts/SeasonSans-Bold.ttf); font-weight: 700; }
@font-face { font-family: "Noto Kufi Arabic"; src: url(assets/fonts/NotoKufiArabic.ttf); font-weight: 100 900; }

/* Everland palette, brand book p.39 */
:root {
  --dark: #1F2505;
  --light: #C3C999;
  --beige: #E0DED6;
  --dark-2: #2B3210;
  --line: rgba(224, 222, 214, .16);
  --ink-soft: rgba(224, 222, 214, .62);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--beige); color: var(--dark); font: 15px/1.4 "Season Sans", Helvetica, Arial, sans-serif; }
button, input, textarea { font: inherit; color: inherit; }

.top { display: flex; align-items: center; gap: 16px; padding: 14px 24px; background: var(--dark); color: var(--beige); }
.top-logo { height: 22px; }
.top-title { font-family: "Season Mix", Georgia, serif; font-size: 19px; }
.top-note { margin-left: auto; color: var(--light); font-size: 13px; }

.app { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: minmax(0, 1fr); height: calc(100% - 50px); }

.stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; min-width: 0; min-height: 0; }
.canvas-wrap { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; overflow: hidden; }
#view { border-radius: 6px; box-shadow: 0 18px 50px rgba(31, 37, 5, .28); background: var(--dark); }
#src { display: none; }
.transport { display: flex; align-items: center; gap: 14px; width: min(520px, 100%); }
.icon { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--dark); color: var(--beige); cursor: pointer; font-size: 12px; }
.bar { flex: 1; height: 4px; background: rgba(31, 37, 5, .15); border-radius: 2px; overflow: hidden; }
#progress { height: 100%; width: 0; background: var(--dark); }
.check { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; cursor: pointer; }

.panel { background: var(--dark); color: var(--beige); padding: 20px 22px 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; }
.group { display: flex; flex-direction: column; gap: 10px; }
.group h2 { margin: 0; display: flex; align-items: center; justify-content: space-between; font: 500 17px "Season Mix", Georgia, serif; }
.count { font: 13px "Season Sans", Helvetica, sans-serif; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.markets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.market { text-align: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: transparent; cursor: pointer; }
.market b { display: block; font-size: 15px; }
.market small { color: var(--ink-soft); font-size: 12px; }
.market[aria-pressed="true"] { background: var(--beige); color: var(--dark); border-color: var(--beige); }
.market[aria-pressed="true"] small { color: rgba(31, 37, 5, .6); }
.langs { display: flex; gap: 8px; }
.langs:empty { display: none; }

.seg { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button, .langs button { flex: 1; padding: 8px 6px; border: 0; background: transparent; cursor: pointer; font-size: 13px; }
.langs button { border: 1px solid var(--line); border-radius: 6px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"], .langs button[aria-pressed="true"] { background: var(--light); color: var(--dark); }

textarea, input[type="text"] { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--dark-2); resize: none; }
textarea:focus, input[type="text"]:focus { outline: 2px solid var(--light); outline-offset: -1px; }
[dir="rtl"] { font-family: "Noto Kufi Arabic", "Season Sans", sans-serif; }
.tag { margin: -4px 0 0; font-size: 12px; color: var(--light); }
.tag[hidden] { display: none; }

.switch { position: relative; width: 38px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 11px; background: var(--line); cursor: pointer; transition: background .2s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--beige); transition: transform .2s; }
.switch input:checked + span { background: var(--light); }
.switch input:checked + span::after { transform: translateX(16px); background: var(--dark); }

.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font-size: 13px; }
.pack img { height: 84px; object-fit: contain; }
.pack input { position: absolute; top: 8px; left: 8px; accent-color: var(--light); }
.pack:has(input:not(:checked)) img { opacity: .35; }

.notes ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-soft); font-size: 13px; }
.export { margin-top: auto; padding: 14px; border: 0; border-radius: 6px; background: var(--beige); color: var(--dark); font-size: 15px; cursor: pointer; }
.export:disabled { opacity: .6; cursor: progress; }
.export-state { margin: -12px 0 0; font-size: 12px; color: var(--ink-soft); min-height: 1em; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; height: auto; }
  .stage { height: 70vh; }
}