/* HR Mini App — shared visual tokens */
:root { --app-scale: 1; --screen-base-width: 640px; --screen-base-height: 1340px; }
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
html, body {
  width: 100%;
  min-width: 0;
  min-height: 100dvh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  color: #F5F1E8;
  -webkit-font-smoothing: antialiased;
  background: #050405;
}
body {
  margin: 0;
}
.screen-shell {
  position: relative;
  width: calc(var(--screen-base-width) * var(--app-scale));
  height: calc(var(--screen-base-height) * var(--app-scale));
  margin: 0 auto;
  overflow: hidden;
  background: #08070C;
}

/* Phone frame */
.phone {
  position: relative;
  width: var(--screen-base-width);
  height: var(--screen-base-height);
  background: #08070C;
  overflow: hidden;
  transform: scale(var(--app-scale));
  transform-origin: top left;
}

/* Status bar (Telegram-style, simulated) */
.statusbar {
  position: relative;
  height: 80px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 56px;
  font-family: "Montserrat", sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: #F5F1E8;
}
.statusbar .icons {
  display: flex; align-items: center; gap: 14px;
  font-size: 24px;
  color: #B8B0A0;
}
.statusbar .icons span { display: inline-block; }
.statusbar .icons .signal { letter-spacing: 2px; }

/* Telegram nav bar */
.navbar {
  position: relative;
  height: 112px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 44px 0 34px;
  border-bottom: 1px solid rgba(191,156,51,0.18);
  background: #08070C;
}
.navbar .nav-left, .navbar .nav-right {
  display: flex; align-items: center; gap: 12px;
  color: #BF9C33;
  font-family: "Montserrat", sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
}
.navbar .nav-left {
  margin-left: -8px;
  padding-right: 24px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.navbar .nav-right {
  justify-content: flex-end;
  min-width: 56px;
  flex: 0 0 auto;
}
.navbar .title {
  font-family: "Montserrat", sans-serif;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: #F5F1E8;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  padding: 0 8px;
}
.navbar .title .sub {
  display: block;
  font-size: 22px;
  font-weight: 500;
  color: #BF9C33;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 4px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Brand glyph (inline) */
.brand-g {
  width: 56px; height: 56px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, #BF9C33 0%, #8C6E18 100%);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Montserrat", sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #08070C;
}

/* Cards */
.card {
  background: #14110E;
  border: 1px solid rgba(191,156,51,0.14);
  border-radius: 28px;
  padding: 36px 36px;
}
.card.gold {
  background: linear-gradient(135deg, rgba(191,156,51,0.16) 0%, rgba(191,156,51,0.04) 100%);
  border-color: rgba(191,156,51,0.42);
}
.card.flat { background: #100E0B; border-color: rgba(191,156,51,0.10); }

/* Typography helpers */
.eyebrow {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #BF9C33;
}
.h1 { font-size: 60px; font-weight: 800; line-height: 1.04; letter-spacing: -0.018em; color: #FFFFFF; }
.h2 { font-size: 46px; font-weight: 700; line-height: 1.10; letter-spacing: -0.014em; color: #F5F1E8; }
.h3 { font-size: 38px; font-weight: 700; line-height: 1.18; letter-spacing: -0.010em; color: #F5F1E8; }
.body { font-size: 30px; font-weight: 400; line-height: 1.42; color: #C9C2B0; }
.muted { color: #8A8273; }
.mono { font-family: "JetBrains Mono", monospace; }

/* Pills */
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.pill .dot { width: 10px; height: 10px; border-radius: 50%; }
.pill-pending  { background: rgba(191,156,51,0.16); color: #D9B84A; }
.pill-pending .dot { background: #D9B84A; }
.pill-approved { background: rgba(31,107,58,0.16); color: #7DC998; }
.pill-approved .dot { background: #7DC998; }
.pill-rejected { background: rgba(138,36,36,0.18); color: #E07A7A; }
.pill-rejected .dot { background: #E07A7A; }
.pill-auto     { background: rgba(78,201,176,0.14); color: #7EE7C9; }
.pill-auto .dot { background: #7EE7C9; }
.pill-awaiting { background: rgba(160,104,37,0.18); color: #D6A26B; }
.pill-awaiting .dot { background: #D6A26B; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: 96px;
  padding: 0 36px;
  border-radius: 24px;
  font-family: "Montserrat", sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: none;
  cursor: pointer;
}
.btn-primary { background: linear-gradient(135deg, #D9B84A 0%, #BF9C33 100%); color: #08070C; }
.btn-ghost   { background: transparent; border: 1px solid rgba(191,156,51,0.45); color: #D9B84A; }
.btn-success { background: rgba(31,107,58,0.22); color: #7DC998; border: 1px solid rgba(31,107,58,0.55); }
.btn-danger  { background: rgba(138,36,36,0.22); color: #E07A7A; border: 1px solid rgba(138,36,36,0.55); }

/* Tab bar */
.tabbar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 164px;
  background: #08070C;
  border-top: 1px solid rgba(191,156,51,0.20);
  display: flex; align-items: stretch;
  padding-bottom: 24px;
}
.tabbar .tab-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  color: inherit;
  text-decoration: none;
}
.tabbar .tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  color: #6E665A;
}
.tabbar .tab .ico { font-size: 40px; }
.tabbar .tab .lbl { font-size: 24px; font-weight: 500; letter-spacing: 0.04em; white-space: nowrap; }
.tabbar .tab.active { color: #BF9C33; }
.tabbar .tab.active .ico { color: #D9B84A; }

/* Scroll content area helper */
.content {
  position: absolute;
  top: 112px;
  left: 0;
  right: 0;
  bottom: 164px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 32px 40px 40px 40px;
}

/* Hairline */
.hairline {
  height: 1px;
  background: rgba(191,156,51,0.18);
  margin: 32px 0;
}

/* Annotation label (для poster grid — мокапы плюс подписи) */
.anno {
  position: absolute;
  font-family: "JetBrains Mono", monospace;
  font-size: 20px;
  color: #BF9C33;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}