/* ЕДИНЫЙ STYLE.CSS ДЛЯ САЙТА АПТЕКИ */

:root {
  --bg: #f4f7f8;
  --surface: #ffffff;
  --surface-soft: #f8fafb;
  --text: #172329;
  --muted: #6b7a80;
  --border: #dfe7e9;
  --accent: #0f766e;
  --accent-dark: #0b5f59;
  --accent-soft: #e6f4f2;
  --danger: #b42318;
  --danger-soft: #fff0ee;
  --success: #087443;
  --success-soft: #ecfdf3;
  --date-success: #15803d;
  --date-success-soft: #ecfdf3;
  --date-warning: #a16207;
  --date-warning-soft: #fffbeb;
  --shadow: 0 8px 30px rgba(25, 45, 52, .07);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Arial, sans-serif;
}

button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }

.eyebrow {
  margin: 0 0 7px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
}

h1 {
  margin-bottom: 10px;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.06;
  letter-spacing: -.035em;
}

.subtitle {
  max-width: 900px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.page-header { padding: 34px 0 24px; }

.page-shell {
  width: min(1140px, calc(100% - 32px));
  margin: 0 auto;
  padding-bottom: 60px;
}

/* ===================== NAVIGATION ===================== */

/* Общая навигация — вариант 1 */
.site-nav {
  position: relative; z-index: 50; width: 100%; min-height: 96px;
  margin: 16px 0 0; padding: 12px 18px; display: flex; align-items: center;
  gap: 22px; border: 1px solid var(--border); border-radius: 18px;
  background: var(--surface); box-shadow: var(--shadow);
}
.site-nav-brand { flex: 0 0 auto; display:flex; align-items:center; gap:12px; min-width:245px; }
.site-nav-logo { width:58px; height:58px; flex:0 0 58px; display:grid; place-items:center;
  border-radius:15px; background:linear-gradient(145deg,#15947f,#0f766e);
  color:#fff; box-shadow:0 7px 18px rgba(15,118,110,.18); }
.site-nav-logo span { font-size:42px; line-height:1; font-weight:500; }
.site-nav-brand-text { display:grid; gap:3px; }
.site-nav-brand-text strong { font-size:21px; line-height:1.1; letter-spacing:-.025em; }
.site-nav-brand-text span { color:var(--muted); font-size:12px; line-height:1.25; }
.site-nav-links { flex:1 1 auto; display:flex; align-items:stretch; justify-content:flex-end; gap:4px; min-width:0; }
.site-nav-link { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:62px; padding:8px 13px; border:0 !important; border-radius:12px;
  background:transparent !important; color:var(--text) !important; text-decoration:none;
  font-size:13px; font-weight:750; text-align:center; transition:.18s ease; }
.site-nav-link:hover { color:var(--accent-dark)!important; background:var(--surface-soft)!important; transform:none; }
.site-nav-link.active { color:var(--accent-dark)!important; background:var(--accent-soft)!important; }
.site-nav-link.active::after { content:""; position:absolute; right:14px; bottom:4px; left:14px;
  height:3px; border-radius:3px; background:var(--accent); }
.site-nav-icon { display:inline-grid; place-items:center; width:24px; height:24px; color:var(--accent); font-size:21px; line-height:1; }
.site-nav-toggle { display:none; width:46px; height:46px; flex:0 0 46px; border:1px solid var(--border);
  border-radius:12px; background:var(--surface); padding:10px; }
.site-nav-toggle span { display:block; width:24px; height:2px; margin:5px auto; border-radius:2px; background:var(--accent-dark); }
.site-nav-backdrop { position:fixed; z-index:90; inset:0; background:rgba(23,35,41,.32); backdrop-filter:blur(2px); }
.site-nav-drawer { position:fixed; z-index:100; top:0; right:0; bottom:0; width:min(360px,88vw);
  padding:20px; background:var(--surface); box-shadow:-18px 0 45px rgba(25,45,52,.16);
  transform:translateX(105%); transition:transform .22s ease; overflow-y:auto; }
.site-nav-drawer.open { transform:translateX(0); }
.site-nav-drawer-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.site-nav-drawer-head strong { font-size:22px; }
.site-nav-close { width:42px; height:42px; border:1px solid var(--border); border-radius:12px;
  background:var(--surface-soft); color:var(--text); font-size:28px; line-height:1; }
.site-nav-drawer-links { display:grid; gap:8px; }
.site-nav-drawer .site-nav-link { justify-content:flex-start; min-height:52px; padding:10px 13px; border-radius:12px;
  font-size:14px; text-align:left; }
.site-nav-drawer .site-nav-link.active::after { display:none; }
.site-nav-drawer .site-nav-link.active { background:var(--accent-soft)!important; }
@media (max-width:1050px) {
  .site-nav { gap:12px; } .site-nav-brand { min-width:215px; }
  .site-nav-brand-text strong { font-size:19px; } .site-nav-link { padding-inline:9px; font-size:12px; }
}
@media (max-width:760px) {
  .site-nav { min-height:70px; margin-top:10px; padding:10px 12px; border-radius:15px; }
  .site-nav-brand { min-width:0; gap:10px; } .site-nav-logo { width:48px; height:48px; flex-basis:48px; border-radius:13px; }
  .site-nav-logo span { font-size:34px; } .site-nav-brand-text strong { font-size:18px; }
  .site-nav-brand-text span { font-size:11px; } .site-nav-links { display:none; }
  .site-nav-toggle { display:block; margin-left:auto; } body.nav-open { overflow:hidden; }
}
@media (max-width:430px) { .site-nav-brand-text span { max-width:130px; } .site-nav-drawer { padding:16px; } }

.site-nav-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 15px;
}


/* ===================== CASH CALCULATOR ===================== */

.calculator-page { padding-bottom: 126px; }

.app-shell {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 34px 0 26px;
}

.app-header .subtitle { max-width: 680px; margin-bottom: 0; }

.header-clear {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  padding: 11px 16px;
  font-weight: 700;
  transition: .18s ease;
}

.header-clear:hover { border-color: #c6d3d6; transform: translateY(-1px); }

.money-section { margin-bottom: 28px; }

.money-section .section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.section-meta { color: var(--muted); font-size: 13px; }

.money-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.money-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 150px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.money-card:focus-within,
.money-card:hover {
  border-color: #bdd7d4;
  box-shadow: 0 12px 34px rgba(25, 45, 52, .1);
  transform: translateY(-1px);
}

.money-card.coin-card { grid-template-columns: 86px minmax(0, 1fr); }

.money-image-wrap {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--surface-soft);
  overflow: hidden;
}

.money-card.coin-card .money-image-wrap { height: 86px; }

.money-image {
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  display: block;
}

.money-details { min-width: 0; }

.denomination {
  margin-bottom: 2px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.unit-label {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 10px;
}

.quantity-control {
  display: grid;
  grid-template-columns: 42px minmax(46px, 1fr) 42px;
  gap: 6px;
  align-items: center;
  max-width: 210px;
}

.step-button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font-size: 25px;
  line-height: 1;
  font-weight: 500;
  transition: .15s ease;
}

.step-button:hover { border-color: #b9cccf; background: var(--surface-soft); }
.step-button:active { transform: scale(.96); }
.step-button.minus:hover { color: var(--danger); background: var(--danger-soft); }
.step-button.plus:hover { color: var(--accent-dark); background: var(--accent-soft); }

.quantity-input {
  width: 100%;
  min-width: 0;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--text);
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button { appearance: none; margin: 0; }

.quantity-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}

.quantity-input::placeholder { color: #9aa8ac; opacity: 1; }

.line-total {
  margin-top: 8px;
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 750;
  min-height: 18px;
}

.total-bar {
  position: fixed;
  z-index: 20;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(207, 220, 223, .95);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  box-shadow: 0 -10px 35px rgba(25, 45, 52, .08);
}

.total-inner {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.total-info {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 12px;
  align-items: baseline;
}

.total-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .08em;
}

#totalAmount { font-size: clamp(24px, 4vw, 34px); letter-spacing: -.035em; }

.total-pieces {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
}

.clear-button {
  flex: 0 0 auto;
  min-width: 128px;
  height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 13px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  transition: .18s ease;
}

.clear-button:hover { background: var(--accent-dark); transform: translateY(-1px); }
.clear-button:active { transform: translateY(0); }

.toast {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 92px;
  transform: translate(-50%, 12px);
  padding: 10px 14px;
  border-radius: 10px;
  background: #172329;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }
.kbd-green { color: green; }
.kbd-red { color: red; }

/* ===================== DATES ===================== */

.date-page { padding-bottom: 50px; }

.date-page-shell {
  width: min(1000px, calc(100% - 32px));
  margin: 0 auto;
}

.date-page-header { padding: 34px 0 24px; }

.date-page-header h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.06;
  letter-spacing: -.035em;
}

.date-main {
  display: grid;
  gap: 20px;
  padding-bottom: 40px;
}

.date-card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.date-card-header { margin-bottom: 22px; }

.date-card-header h2 {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: -.02em;
}

.date-card-header p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.date-field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 800;
}

.date-input {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--text);
  outline: none;
  font-size: 16px;
}

.date-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}

.elapsed-box,
.between-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 15px 16px;
  border-radius: 12px;
  background: var(--surface-soft);
}

.elapsed-label,
.between-result span { color: var(--muted); font-size: 14px; }

#elapsedValue,
#betweenValue { font-size: 19px; }

.recipe-status-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.recipe-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  font-weight: 700;
}

.recipe-status-row strong { text-align: right; }
.status-valid { color: var(--date-success); }
.status-ending { color: var(--date-warning); }
.status-invalid { color: var(--date-danger); }

.date-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.date-calculate-button {
  width: 100%;
  min-height: 48px;
  margin-top: 18px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  transition: .18s ease;
}

.date-calculate-button:hover { background: var(--accent-dark); transform: translateY(-1px); }
.date-calculate-button:active { transform: translateY(0); }

/* ===================== MEDICINES ===================== */

.medicines-page .page-shell {
  width: min(1100px, calc(100% - 32px));
}

.search-panel {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 10px 0 14px;
  background: rgba(244,247,248,.92);
  backdrop-filter: blur(12px);
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: .18s ease;
}

.search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(15,118,110,.10), var(--shadow);
}

.search-icon {
  width: 52px;
  flex: 0 0 52px;
  text-align: center;
  color: var(--muted);
  font-size: 28px;
  line-height: 1;
  transform: rotate(-20deg);
}

#searchInput {
  width: 100%;
  height: 58px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 16px;
}

#searchInput::placeholder { color: #8a979b; }

.clear-search {
  width: 42px;
  height: 42px;
  margin-right: 8px;
  border: 0;
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.clear-search:hover {
  background: #edf1f2;
  color: var(--text);
}

.search-info {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 4px 0;
  color: var(--muted);
  font-size: 13px;
}

#resultCount {
  color: var(--accent-dark);
  font-weight: 800;
}

.medicine-list {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.medicine-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: .18s ease;
}

.medicine-card:hover {
  border-color: #bfd4d1;
  transform: translateY(-1px);
}

.medicine-number {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
}

.medicine-content h2 {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.35;
}

.medicine-form {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-soft);
}

.form-label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.medicine-form p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}

mark {
  padding: 0 2px;
  border-radius: 4px;
  background: #d9f2ee;
  color: inherit;
}

.empty-state {
  padding: 70px 20px;
  text-align: center;
}

.empty-icon {
  color: var(--accent);
  font-size: 42px;
  transform: rotate(-20deg);
}

.empty-state h2 {
  margin: 10px 0 5px;
  font-size: 22px;
}

.empty-state p {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 640px) {
  .page-shell { width: min(100% - 20px, 1100px); }

  .site-nav {
    display: grid;
    grid-template-columns: 1fr;
  }

  .site-nav-link {
    justify-content: center;
  }

  .page-header {
    padding-top: 25px;
  }

  .search-info {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .medicine-card {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 15px;
  }

  .medicine-number {
    width: 38px;
    height: 32px;
  }
}


/* ===================== INSURANCE ===================== */

.insurance-page .page-shell {
  width: min(1140px, calc(100% - 32px));
}

.company-switcher {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.company-button {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 2px 10px rgba(25,45,52,.04);
  transition: .18s ease;
}

.company-button:hover { border-color: #b9cccf; transform: translateY(-1px); }
.company-button.active { border-color: var(--accent); background: var(--accent); color: #fff; }

.rules-panel,
.forbidden-panel {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.section-heading h2 {
  margin: 0 0 5px;
  font-size: 22px;
  letter-spacing: -.02em;
}

.section-heading p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.rules-count {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.rules-list { display: grid; gap: 9px; }

.rule-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}

.rule-number {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
}

.rule-content h3 { margin: 2px 0 7px; font-size: 15px; line-height: 1.4; }
.rule-description { margin: 0 0 11px; color: var(--muted); font-size: 13px; line-height: 1.5; }

.rule-atc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rule-atc {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--border);
}
.rule-atc span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.rule-atc strong { display: block; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.rule-atc.forbidden { border-color: #f0d0cc; background: var(--danger-soft); }
.rule-atc.forbidden strong { color: var(--danger); }
.rule-atc.allowed { border-color: #c9e9d7; background: var(--success-soft); }
.rule-atc.allowed strong { color: var(--success); }

.forbidden-panel { margin-top: 22px; }

.insurance-search {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  min-height: 58px;
  margin: 0 -2px 18px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.insurance-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(15,118,110,.10), var(--shadow); }
.search-icon { width: 48px; flex: 0 0 48px; text-align: center; color: var(--muted); font-size: 26px; transform: rotate(-20deg); }
.insurance-search input { min-width: 0; flex: 1; height: 56px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 15px; }
.insurance-search input::placeholder { color: #8a979b; }
.insurance-search button { height: 42px; margin-right: 8px; padding: 0 16px; border: 0; border-radius: 11px; background: var(--accent); color: #fff; font-weight: 800; cursor: pointer; }
.insurance-search button:hover { background: var(--accent-dark); }
.clear-search { width: 34px; height: 34px; display: grid; place-items: center; margin-right: 4px; border-radius: 9px; background: var(--surface-soft); color: var(--muted); text-decoration: none; font-size: 22px; }

.atc-tree { display: grid; gap: 5px; }
.atc-node { border: 1px solid transparent; border-radius: 12px; }
.atc-node[open] { background: var(--surface-soft); border-color: var(--border); }
.atc-node summary { display: flex; align-items: center; gap: 8px; min-height: 43px; padding: 7px 10px; cursor: pointer; list-style: none; border-radius: 11px; }
.atc-node summary::-webkit-details-marker { display: none; }
.atc-node summary:hover { background: #f1f6f6; }
.atc-chevron { width: 19px; color: var(--muted); font-size: 23px; line-height: 1; transition: transform .15s ease; }
.atc-node[open] > summary .atc-chevron { transform: rotate(90deg); }
.atc-code { flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; font-weight: 900; color: var(--accent-dark); }
.forbidden-code { color: var(--danger); }
.atc-name { min-width: 0; font-size: 14px; line-height: 1.45; }
.atc-badge { flex: 0 0 auto; margin-left: auto; padding: 4px 7px; border-radius: 7px; background: var(--danger-soft); color: var(--danger); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.medicine-count { flex: 0 0 auto; min-width: 23px; padding: 3px 6px; border-radius: 7px; background: var(--accent-soft); color: var(--accent-dark); text-align: center; font-size: 10px; font-weight: 900; }
.atc-node-body { padding: 0 8px 8px 28px; }
.atc-node-body > .atc-node { margin-top: 3px; }

.medicine-row { display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 6px 9px; border-top: 1px solid var(--border); }
.medicine-mark { color: var(--danger); font-size: 18px; line-height: 1; }
.medicine-name { min-width: 0; flex: 1; font-size: 13px; line-height: 1.4; }
.medicine-atc { flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted); font-size: 11px; }

.empty-state { padding: 55px 20px 40px; text-align: center; }
.empty-icon { color: var(--accent); font-size: 40px; transform: rotate(-20deg); }
.empty-state h3 { margin: 10px 0 5px; font-size: 20px; }
.empty-state p { margin: 0; color: var(--muted); font-size: 14px; }

@media (max-width: 700px) {
  .page-shell { width: min(100% - 20px, 1100px); }
  .rules-panel, .forbidden-panel { padding: 15px; border-radius: 15px; }
  .section-heading { flex-direction: column; gap: 8px; }
  .rule-atc-grid { grid-template-columns: 1fr; }
  .insurance-search button { display: none; }
  .medicine-atc { display: none; }
  .atc-name { font-size: 13px; }
}


/* ===================== RESPONSIVE ===================== */

@media (max-width: 980px) {
  .money-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .calculator-page { padding-bottom: 112px; }

  .app-shell { width: min(100% - 20px, 620px); }
  .app-header { padding: 22px 0 18px; align-items: center; }
  .header-clear { padding: 9px 12px; font-size: 13px; }
  .subtitle { font-size: 13px; }

  .money-grid { grid-template-columns: 1fr; gap: 10px; }
  .money-card { grid-template-columns: 88px minmax(0, 1fr); min-height: 140px; }
  .money-card.coin-card { grid-template-columns: 82px minmax(0, 1fr); }

  .total-inner { gap: 10px; }
  .total-info { column-gap: 8px; }
  .clear-button { min-width: 105px; height: 44px; padding: 0 12px; }

  .date-page-shell { width: min(100% - 20px, 620px); }
  .date-page-header { padding-top: 25px; }
  .date-card { padding: 18px; }

  .date-fields-grid { grid-template-columns: 1fr; gap: 14px; }

  .recipe-status-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .recipe-status-row strong { text-align: left; }

  .elapsed-box,
  .between-result {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .search-info {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .medicine-card {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 15px;
  }

  .medicine-number { width: 38px; height: 32px; }

  .rules-panel,
  .forbidden-panel {
    padding: 15px;
    border-radius: 15px;
  }

  .section-heading { flex-direction: column; gap: 8px; }
  .rule-atc-grid { grid-template-columns: 1fr; }
  .insurance-search button { display: none; }
  .medicine-atc { display: none; }
  .atc-name { font-size: 13px; }
}

@media (max-width: 680px) {
  .app-header { gap: 12px; }
  .medicine-card { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .page-shell { width: min(100% - 20px, 1100px); }
}

@media (max-width: 430px) {
  .site-nav-brand-text span { max-width: 130px; }

  .app-header { gap: 12px; }
  h1 { font-size: 27px; }
  .eyebrow { font-size: 10px; }
  .header-clear { font-size: 12px; }

  .money-card {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  .money-card.coin-card { grid-template-columns: 72px minmax(0, 1fr); }
  .money-image-wrap { height: 68px; }
  .money-card.coin-card .money-image-wrap { height: 72px; }
  .denomination { font-size: 16px; }

  .quantity-control {
    grid-template-columns: 38px minmax(44px, 1fr) 38px;
  }

  .step-button { width: 38px; height: 38px; }
  .quantity-input { height: 38px; font-size: 16px; }
  #totalAmount { font-size: 23px; }
  .total-label { font-size: 11px; }
  .total-pieces { font-size: 10px; }
}