@import url("fonts.css");

:root {
  --ink: #17130d;
  --black: #0d0b08;
  --black-2: #17130e;
  --paper: #f3efe7;
  --surface: #fffdf9;
  --line: #ded5c8;
  --muted: #776f65;
  --gold: #c49a52;
  --gold-dark: #8f682e;
  --danger: #a34332;
  --serif: "Libre Caslon Display", Georgia, serif;
  --sans: "DM Sans", Inter, ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
.shell { min-height: 100vh; display: flex; }

.sidebar { width: 256px; min-height: 100vh; padding: 28px 18px 22px; position: fixed; inset: 0 auto 0 0; z-index: 50; display: flex; flex-direction: column; color: white; background: var(--black); border-right: 1px solid #3a2b17; }
.brand { min-height: 78px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #2d261d; }
.brand-mark { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; color: var(--gold); border: 1px solid #9d773a; border-radius: 50%; box-shadow: inset 0 0 0 4px #17120c; font: 700 11px/1 Georgia, serif; letter-spacing: .04em; }
.brand-copy { display: grid; gap: 5px; }
.brand-copy strong { font: 650 12px/1 Georgia, serif; letter-spacing: .18em; }
.brand-copy span { max-width: 135px; color: #8c806f; font-size: 6px; line-height: 1.5; font-weight: 700; letter-spacing: .16em; }
.nav { margin-top: 26px; display: grid; gap: 5px; }
.nav-link { min-height: 46px; padding: 0 13px; display: flex; align-items: center; gap: 12px; color: #888; border: 1px solid transparent; background: transparent; font-size: 10px; font-weight: 700; text-align: left; }
.nav-link:hover { color: white; border-color: #2d261d; }
.nav-link.active { color: white; background: #17130e; border-color: #3b2e1d; box-shadow: inset 2px 0 var(--gold); }
.nav-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.side-meta { margin-top: auto; padding: 18px 11px 0; border-top: 1px solid #272727; }
.side-meta span { display: flex; align-items: center; gap: 8px; color: #eee; font-size: 7px; font-weight: 800; letter-spacing: .14em; }
.side-meta span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px #221b12; }
.side-meta p { margin: 12px 0 0; color: #666; font-size: 7px; line-height: 1.7; letter-spacing: .05em; }

.workspace { width: calc(100% - 256px); min-height: 100vh; margin-left: 256px; }
.topbar { min-height: 94px; padding: 18px clamp(24px, 3vw, 48px); position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: rgba(255,253,249,.96); border-bottom: 1px solid #ded6c9; backdrop-filter: blur(16px); }
.topbar-copy span, .eyebrow { color: var(--gold-dark); font-size: 7px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.topbar h1 { margin: 8px 0 0; font: 500 26px/1 var(--serif); letter-spacing: -.025em; }
.actions { display: flex; align-items: center; gap: 8px; }
.period-control { height: 44px; padding: 0 11px; display: flex; align-items: center; gap: 10px; border: 1px solid #d8d0c4; background: #faf7f1; }
.period-control span { color: #777; font-size: 6px; font-weight: 800; letter-spacing: .13em; }
.period-control input { width: 118px; padding: 0; border: 0; outline: none; background: transparent; font-size: 10px; font-weight: 700; }
.button { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--black); font-size: 7px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.button.dark { color: white; background: var(--black); }
.button.light { color: var(--ink); background: var(--surface); border-color: #cfc4b4; }
.button.gold { color: var(--black); background: var(--gold); border-color: var(--gold); }
.button:disabled { opacity: .5; cursor: default; }
.statusline { min-height: 38px; padding: 0 clamp(24px, 3vw, 48px); display: flex; align-items: center; gap: 30px; overflow-x: auto; border-bottom: 1px solid #e2dacd; background: #ece5da; }
.statusline span { flex: 0 0 auto; color: #888; font-size: 6px; font-weight: 800; letter-spacing: .12em; white-space: nowrap; }
.statusline strong { margin-left: 7px; color: #111; }
.statusline span:last-child { margin-left: auto; }
.quick-range { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 8px clamp(24px, 3vw, 48px); border-bottom: 1px solid var(--line); background: #f8f8f6; }
.quick-range > span { margin-right: 4px; color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .16em; }
.quick-range button { border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 7px 10px; font: inherit; font-size: 8px; font-weight: 800; letter-spacing: .06em; cursor: pointer; }
.quick-range button:hover { background: var(--ink); color: #fff; }
.quick-range strong { margin-left: auto; font-size: 10px; letter-spacing: .04em; }
.content { max-width: 1540px; margin: 0 auto; padding: 28px clamp(24px, 3vw, 48px) 72px; }

.hero { min-height: 150px; padding: 10px 0 28px; display: flex; align-items: end; justify-content: space-between; gap: 38px; }
.hero h2, .section-head h2, .business-title { margin: 10px 0 11px; font-family: var(--serif); font-weight: 400; line-height: .98; letter-spacing: -.045em; }
.hero h2 { max-width: 790px; font-size: clamp(39px, 4.3vw, 64px); }
.hero p, .section-head p { max-width: 700px; margin: 0; color: #686158; font-size: 10px; line-height: 1.7; }
.hero-fact { min-width: 260px; padding: 21px 22px; border: 1px solid #cdbfab; background: var(--surface); box-shadow: 0 14px 35px rgba(57,41,19,.06); }
.hero-fact span, .metric-label { color: #888; font-size: 6px; font-weight: 800; letter-spacing: .13em; }
.hero-fact strong { margin-top: 12px; display: block; font: 750 23px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.04em; white-space: nowrap; }
.hero-fact small { margin-top: 8px; display: block; color: #777; font-size: 7px; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kpi { min-height: 142px; padding: 21px; position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 10px 28px rgba(55,39,18,.035); }
.kpi.primary { color: white; background: linear-gradient(140deg, #0d0b08, #1a1510); border-color: #0d0b08; box-shadow: 0 16px 35px rgba(20,13,6,.16); }
.kpi.primary::after { content: ""; width: 58px; height: 2px; position: absolute; right: 20px; top: 20px; background: var(--gold); }
.kpi > span { color: #777; font-size: 6px; font-weight: 800; letter-spacing: .14em; }
.kpi.primary > span, .kpi.primary > small { color: #999; }
.kpi > strong { margin-top: 18px; font: 750 clamp(21px, 2.2vw, 33px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.055em; white-space: nowrap; }
.kpi > small { margin-top: auto; color: #888; font-size: 7px; }
.comparison { margin-top: 10px; min-height: 110px; padding: 20px 22px; display: grid; grid-template-columns: minmax(220px,.65fr) 1.35fr; align-items: center; gap: 30px; color: #f6f0e7; border: 1px solid #49371f; background: #12100d; box-shadow: 0 16px 38px rgba(20,13,6,.12); }
.comparison h3 { margin: 8px 0 0; font: 400 23px/1 var(--serif); }
.comparison h3 i { margin: 0 7px; color: #8c806f; font-size: 14px; }
.comparison-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: #33291d; border: 1px solid #33291d; }
.comparison-metrics span { min-height: 65px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; gap: 9px; color: #8c806f; background: #19150f; font-size: 6px; font-weight: 800; letter-spacing: .11em; }
.comparison-metrics strong { color: #f7f2e8; font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }

.grid-two { margin-top: 10px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 10px; }
.card { border: 1px solid var(--line); background: var(--surface); box-shadow: 0 10px 28px rgba(55,39,18,.035); }
.card-head { min-height: 70px; padding: 17px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #dededb; }
.card-head h3 { margin: 7px 0 0; font-size: 16px; letter-spacing: -.025em; }
.text-action { color: #111; border: 0; background: transparent; font-size: 6px; font-weight: 800; letter-spacing: .12em; }
.region-table { padding: 7px 20px 18px; }
.region-row { min-height: 64px; display: grid; grid-template-columns: 38px 1.45fr .78fr 1fr 1fr 90px 26px; gap: 12px; align-items: center; border-bottom: 1px solid #e3e3e0; }
.region-row > b { font: 750 8px/1 ui-monospace, monospace; }
.region-row > span { display: grid; gap: 4px; }
.region-row > span strong { font-size: 9px; }
.region-row small { color: #888; font-size: 7px; }
.region-row > strong { font: 700 9px/1 ui-monospace, monospace; white-space: nowrap; }
.meter { height: 4px; overflow: hidden; background: #e8e8e5; }
.meter i { height: 100%; display: block; background: linear-gradient(90deg, var(--ink), var(--gold)); }
.arrow { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid #d5d5d2; background: white; }
.trend { min-height: 334px; display: flex; flex-direction: column; }
.bars { height: 250px; padding: 24px 20px 18px; display: flex; align-items: end; gap: 8px; }
.bar { height: 100%; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.bar i { min-height: 2px; display: block; background: linear-gradient(180deg, var(--gold), var(--ink)); }
.bar span { color: #888; font-size: 6px; text-align: center; }

.section-head { min-height: 128px; padding: 24px 0; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.section-head h2 { font-size: clamp(35px, 3.8vw, 54px); }
.region-grid, .country-grid, .business-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.region-card, .country-card, .business-card { min-height: 245px; padding: 22px; display: flex; flex-direction: column; color: var(--ink); border: 1px solid #d9cdbd; background: var(--surface); text-align: left; box-shadow: 0 10px 28px rgba(55,39,18,.03); transition: .18s ease; }
.region-card:hover, .country-card:hover, .business-card:hover { color: white; background: var(--black-2); border-color: #a47b3d; transform: translateY(-2px); box-shadow: 0 18px 40px rgba(28,18,8,.16); }
.region-card header, .country-card header, .business-card header { display: flex; justify-content: space-between; gap: 20px; }
.region-card header span, .country-card header span, .business-card header span { color: #888; font: 750 7px/1 ui-monospace, monospace; }
.region-card header strong, .country-card header strong, .business-card header strong { max-width: 170px; font-size: 13px; text-align: right; }
.region-card > strong, .country-card > strong { margin-top: 42px; font: 750 34px/1 ui-monospace, monospace; letter-spacing: -.05em; }
.region-card > span, .country-card > span { margin-top: 7px; color: #888; font-size: 6px; font-weight: 800; letter-spacing: .12em; }
.region-metrics { margin-top: auto; padding-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid #dededb; }
.region-card:hover .region-metrics, .country-card:hover .region-metrics, .business-card:hover .region-metrics { border-color: #3d362e; }
.region-metrics span { display: grid; gap: 7px; color: #888; font-size: 6px; font-weight: 800; letter-spacing: .1em; }
.region-metrics b { color: inherit; font: 700 10px/1 ui-monospace, monospace; letter-spacing: 0; white-space: nowrap; }
.region-metrics small { color: #8c806f; font-size: 6px; letter-spacing: 0; }
.business-card { min-height: 220px; }
.business-card h3 { margin: 33px 0 7px; font: 400 23px/1.05 var(--serif); letter-spacing: -.03em; }
.business-card > p { margin: 0; color: #777; font-size: 8px; }
.empty { min-height: 175px; padding: 30px; display: grid; place-items: center; color: #777; border: 1px dashed #bdbdb9; background: #fafaf9; text-align: center; }
.back { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; color: #666; border: 0; background: transparent; font-size: 8px; font-weight: 800; letter-spacing: .08em; }

.business-header { min-height: 150px; padding: 18px 0 28px; display: flex; align-items: end; justify-content: space-between; gap: 35px; }
.business-title { font-size: clamp(43px, 5vw, 74px); }
.business-header p { margin: 0; color: #666; font-size: 9px; }
.status-badge { padding: 9px 11px; color: #d8b878; background: var(--black-2); border: 1px solid #8c6936; font-size: 6px; font-weight: 800; letter-spacing: .14em; }
.calendar-card { margin-top: 10px; overflow-x: auto; }
.weekdays, .calendar-grid { min-width: 760px; display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); }
.weekdays span { min-height: 35px; display: grid; place-items: center; color: #888; border-right: 1px solid #e1e1de; font-size: 6px; font-weight: 800; letter-spacing: .1em; }
.day { min-height: 105px; padding: 10px; display: flex; flex-direction: column; border-top: 1px solid #dfdfdc; border-right: 1px solid #dfdfdc; background: white; }
.day.blank { background: #f5f5f3; }
.day > span { color: #777; font: 750 7px/1 ui-monospace, monospace; }
.day strong { margin-top: auto; font: 720 14px/1 ui-monospace, monospace; }
.day small { margin-top: 6px; color: #888; font-size: 6px; }
.history { margin-top: 10px; overflow-x: auto; }
.table-head, .table-row { min-width: 760px; min-height: 54px; padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr .6fr; gap: 18px; align-items: center; border-top: 1px solid #e1e1de; }
.table-head { min-height: 38px; color: #888; background: #f7f7f5; border-top: 0; font-size: 6px; font-weight: 800; letter-spacing: .1em; }
.table-row span, .table-row strong { font-size: 8px; }
.table-row strong { font-family: ui-monospace, monospace; }

.control-tabs { display: flex; gap: 8px; }
.control-layout { display: grid; grid-template-columns: 270px 1fr; gap: 10px; }
.control-panel { padding: 20px; align-self: start; position: sticky; top: 132px; border: 1px solid #d4d4d1; background: white; }
.control-panel label { margin-top: 18px; display: grid; gap: 8px; color: #777; font-size: 6px; font-weight: 800; letter-spacing: .12em; }
.control-panel select, .control-panel input, .form-input { width: 100%; height: 42px; padding: 0 11px; color: #0a0a0a; border: 1px solid #cfcfcc; outline: none; background: #fafaf9; font-size: 9px; }
.control-panel .button { width: 100%; margin-top: 10px; }
.control-panel hr { margin: 20px 0; border: 0; border-top: 1px solid #dededb; }
.edit-area { min-width: 0; }
.entry-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.entry-summary article { min-height: 102px; padding: 18px; display: flex; flex-direction: column; border: 1px solid #d4d4d1; background: white; }
.entry-summary span { color: #777; font-size: 6px; font-weight: 800; letter-spacing: .11em; }
.entry-summary strong { margin-top: 15px; font: 720 21px/1 ui-monospace, monospace; white-space: nowrap; }
.entry-summary small { margin-top: auto; color: #888; font-size: 6px; }
.entry-calendar { margin-top: 10px; padding: 20px; border: 1px solid #d4d4d1; background: white; }
.entry-calendar-head { padding-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-bottom: 1px solid #dededb; }
.entry-calendar-head h3 { margin: 7px 0 0; font-size: 18px; }
.entry-calendar-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 7px; }
.entry-day { min-height: 130px; padding: 10px; display: flex; flex-direction: column; gap: 8px; border: 1px solid #d9d9d6; background: #fafaf9; }
.entry-day > span { font: 750 7px/1 ui-monospace, monospace; }
.entry-day label { display: grid; gap: 4px; color: #888; font-size: 5px; font-weight: 800; letter-spacing: .08em; }
.entry-day input { width: 100%; height: 29px; padding: 0 6px; border: 1px solid #d1d1ce; outline: none; background: white; font: 700 8px/1 ui-monospace, monospace; }
.savebar { min-height: 70px; margin-top: 10px; padding: 11px 13px 11px 18px; position: sticky; bottom: 12px; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 25px; color: white; background: var(--black-2); border: 1px solid #8c6936; box-shadow: 0 18px 45px rgba(0,0,0,.18); }
.savebar div { display: grid; gap: 5px; }
.savebar span { color: #888; font-size: 6px; font-weight: 800; letter-spacing: .13em; }
.savebar strong { font-size: 8px; }
.notice { margin: 0 0 10px; padding: 12px 14px; color: #4f463a; border: 1px solid #d1c3ae; background: #fffaf0; font-size: 8px; line-height: 1.6; }
.directory { border: 1px solid #d4d4d1; overflow-x: auto; background: white; }
.directory-head, .directory-row { min-width: 760px; min-height: 64px; padding: 0 16px; display: grid; grid-template-columns: 90px 1.5fr 1fr 120px 100px; gap: 12px; align-items: center; border-top: 1px solid #dededb; }
.directory-head { min-height: 38px; border-top: 0; color: #888; background: #f7f7f5; font-size: 6px; font-weight: 800; letter-spacing: .1em; }
.directory-row code { font-size: 8px; font-weight: 750; }
.directory-row input, .directory-row select { width: 100%; height: 38px; padding: 0 9px; border: 1px solid #d2d2cf; background: #fafaf9; font-size: 8px; }
.directory-row span { color: #777; font-size: 7px; }
.directory-row button { min-height: 34px; color: white; border: 1px solid #111; background: #111; font-size: 6px; font-weight: 800; letter-spacing: .08em; }
.toast { max-width: 380px; padding: 14px 18px; position: fixed; right: 24px; bottom: 24px; z-index: 100; color: white; background: var(--black); border: 1px solid var(--gold); box-shadow: 0 18px 45px rgba(0,0,0,.22); font-size: 10px; transform: translateY(20px); opacity: 0; pointer-events: none; transition: .2s ease; }
.toast.show { transform: translateY(0); opacity: 1; }

@media (max-width: 1180px) {
  .sidebar { width: 220px; }
  .workspace { width: calc(100% - 220px); margin-left: 220px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .grid-two { grid-template-columns: 1fr; }
  .comparison { grid-template-columns: 1fr; }
  .region-grid, .country-grid, .business-grid { grid-template-columns: 1fr 1fr; }
  .region-row { grid-template-columns: 35px 1.4fr .7fr 1fr 1fr 50px 24px; }
  .control-layout { grid-template-columns: 220px 1fr; }
  .entry-calendar-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

@media (max-width: 780px) {
  .quick-range { padding: 10px 20px; flex-wrap: wrap; }
  .quick-range strong { width: 100%; margin-left: 0; }
  .shell { display: block; }
  .sidebar { width: 100%; min-height: 0; height: 70px; padding: 0 15px; position: sticky; top: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; border: 0; border-bottom: 1px solid #242424; }
  .brand { min-height: 0; padding-right: 14px; border: 0; border-right: 1px solid #272727; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-copy, .side-meta { display: none; }
  .nav { margin: 0 0 0 10px; display: flex; overflow-x: auto; }
  .nav-link { width: 44px; min-width: 44px; padding: 0; justify-content: center; }
  .nav-link span { display: none; }
  .workspace { width: 100%; margin-left: 0; }
  .topbar { position: static; padding: 18px 20px; align-items: flex-start; flex-direction: column; }
  .actions { width: 100%; flex-wrap: wrap; }
  .period-control { flex: 1; }
  .period-control input { width: 100%; }
  .statusline { padding: 0 20px; }
  .statusline span:last-child { margin-left: 0; }
  .content { padding: 20px 20px 56px; }
  .hero, .business-header, .section-head { align-items: flex-start; flex-direction: column; }
  .hero-fact { width: 100%; }
  .region-table { overflow-x: auto; }
  .region-row { min-width: 710px; }
  .control-layout { grid-template-columns: 1fr; }
  .control-panel { position: static; }
  .entry-calendar-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .comparison-metrics { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .kpi-grid, .region-grid, .country-grid, .business-grid, .entry-summary { grid-template-columns: 1fr; }
  .topbar .button span { display: none; }
  .topbar .button { width: 44px; padding: 0; }
  .entry-calendar-grid { grid-template-columns: 1fr 1fr; }
  .comparison-metrics { grid-template-columns: 1fr; }
  .savebar div { display: none; }
  .savebar .button { width: 100%; }
  .toast { right: 14px; left: 14px; bottom: 14px; }
}