:root{
  --bg: #f4f6fb; --panel: #ffffff; --panel-2: #e6e8f4; --line: #cacde7;
  --accent: #4338ca; --accent-soft: #d1cfe8; --accent-dim: #f1f1f8;
  --text: #191b29; --muted: #55588f; --muted-2: #9a9cbb;
  --good: #259d5b; --mid: #9d8725; --bad: #b3402f;
}

.content{ padding: 22px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 22px; align-items: start; }
@media (max-width: 860px){ .content{ grid-template-columns: 1fr; } }

.left-col, .right-col{ background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px; box-shadow: 0 1px 2px rgba(20,21,50,0.04); }

.type-tabs{ grid-column: 1 / -1; position: relative; display: flex; gap: 4px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 5px; margin-bottom: 4px; }
.tab-highlight{ position: absolute; top: 5px; bottom: 5px; left: 5px; width: 0; border-radius: 8px; background: var(--accent); box-shadow: 0 2px 6px rgba(67,56,202,.35); transition: left .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1); z-index: 0; }
.type-tab{ position: relative; z-index: 1; flex: 1; text-align: center; padding: 10px 14px; border-radius: 8px; border: none; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: color .2s ease; }
.type-tab.active{ color: #fff; }

.section-title{ font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }
.section-title:first-child{ margin-top: 0; }

.field{ margin-bottom: 12px; }
.field label{ display: block; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.field .hint{ font-size: 12px; color: var(--muted-2); font-weight: 500; margin-top: 5px; }
.field input, .field select{ width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; font-family: 'Inter', sans-serif; font-size: 13.5px; background: var(--panel-2); color: var(--text); }
.field input:focus, .field select:focus{ outline: none; border-color: var(--accent); }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px){ .field-row{ grid-template-columns: 1fr; } }

select{ appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2355588f' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; }

.type-panel{ display: none; }
.type-panel.active{ display: block; animation: panelSlideIn .3s cubic-bezier(.4,0,.2,1); }
@keyframes panelSlideIn{ from{ opacity: 0; transform: translateX(10px); } to{ opacity: 1; transform: translateX(0); } }

.quickrow{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip{ border: 1px solid var(--line); background: var(--panel-2); color: var(--text); padding: 7px 13px; border-radius: 999px; font-size: 12.5px; cursor: pointer; font-weight: 600; }
.chip:hover{ border-color: var(--accent); color: var(--accent); }
.chip.selected{ background: var(--accent); border-color: var(--accent); color: #fff; }

.toggle-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.toggle-row:first-of-type{ border-top: none; padding-top: 0; }
.toggle-row .label{ font-size: 13.5px; font-weight: 600; }
.toggle-row .sub{ font-size: 12px; color: var(--muted-2); font-weight: 500; margin-top: 2px; }
.switch{ position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.switch input{ opacity: 0; width: 0; height: 0; }
.slider-toggle{ position: absolute; inset: 0; background: var(--line); border-radius: 999px; cursor: pointer; transition: .15s; }
.slider-toggle::before{ content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.switch input:checked + .slider-toggle{ background: var(--accent); }
.switch input:checked + .slider-toggle::before{ transform: translateX(18px); }

.weekday-grid{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.wd-chip{ width: 42px; height: 38px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; font-size: 12px; font-weight: 700; font-family: 'Inter', sans-serif; }
.wd-chip.selected{ background: var(--bad); border-color: var(--bad); color: #fff; }

#countryBlock{ margin-top: 12px; }
.empty-note{ color: var(--muted-2); font-size: 12px; font-style: italic; margin-top: 8px; }

/* ---------- Searchable country dropdown ---------- */
.country-select{ position: relative; }
.country-select-trigger{ width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); color: var(--text); font-family: 'Inter', sans-serif; font-size: 13.5px; cursor: pointer; text-align: left; }
.country-select-trigger:hover{ border-color: var(--accent); }
.country-select.open .country-select-trigger{ border-color: var(--accent); }
.country-select-trigger .flag{ font-size: 19px; line-height: 1; flex-shrink: 0; }
.country-select-trigger .flag img{ display: block; width: 24px; height: 18px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(20,21,50,.08); }
.country-select-trigger .name{ flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-select-trigger .chev{ color: var(--muted-2); font-size: 11px; transition: transform .15s ease; flex-shrink: 0; }
.country-select.open .country-select-trigger .chev{ transform: rotate(180deg); }

.country-dropdown{ display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(20,21,50,.18); z-index: 30; overflow: hidden; }
.country-select.open .country-dropdown{ display: block; }
.country-search{ width: 100%; padding: 10px 12px; border: none; border-bottom: 1px solid var(--line); font-family: 'Inter', sans-serif; font-size: 13px; background: var(--panel-2); color: var(--text); box-sizing: border-box; }
.country-search:focus{ outline: none; }
.country-list{ max-height: 230px; overflow-y: auto; }
.country-option{ display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; font-size: 13px; }
.country-option:hover{ background: var(--accent-dim); }
.country-option.selected{ background: var(--accent-soft); font-weight: 700; }
.country-option .flag{ font-size: 17px; flex-shrink: 0; }
.country-option .flag img{ display: block; width: 20px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(20,21,50,.08); }
.country-option .name{ flex: 1; }
.country-option .no-data{ font-size: 9.5px; color: var(--muted-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }

.custom-list{ display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.custom-item{ display: flex; align-items: center; gap: 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.custom-item .d{ font-family: 'JetBrains Mono', monospace; color: var(--accent); font-weight: 600; font-size: 12px; }
.custom-item .n{ flex: 1; }
.custom-item button{ border: none; background: transparent; color: var(--bad); cursor: pointer; font-size: 12px; font-weight: 700; padding: 4px 6px; }
.add-custom{ display: grid; grid-template-columns: 150px 1fr auto; gap: 8px; margin-top: 12px; }
.add-custom input{ padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; font-family: 'Inter', sans-serif; font-size: 13px; background: var(--panel-2); color: var(--text); width: 100%; box-sizing: border-box; }
.add-custom input:focus{ outline: none; border-color: var(--accent); }
.add-custom button{ white-space: nowrap; }
@media (max-width: 560px){ .add-custom{ grid-template-columns: 1fr; } }

.btns{ display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.app{ padding: 11px 20px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 13.5px; font-family: 'Inter', sans-serif; color: #fff; background: var(--accent); transition: filter .15s ease; }
.app:hover{ filter: brightness(1.08); }
.gray{ background: var(--line); color: var(--text); }

.results{ background: linear-gradient(155deg, var(--accent) 0%, #6d28d9 100%); border-radius: 10px; padding: 24px; color: #fff; margin-top: 22px; }
.results .headline-label{ font-size: 12px; opacity: .85; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.results .headline{ font-size: 38px; font-weight: 800; margin: 4px 0 4px; letter-spacing: -0.02em; }
.results .headline-sub{ font-size: 13.5px; opacity: .9; }
.stat-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.stat{ background: rgba(255,255,255,.14); border-radius: 8px; padding: 12px 14px; }
.stat .n{ font-size: 19px; font-weight: 800; }
.stat .l{ font-size: 11.5px; opacity: .88; margin-top: 2px; }
.result-actions{ display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.result-actions .app{ background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); }
.result-actions .app:hover{ background: rgba(255,255,255,.26); }
@media (max-width: 560px){ .stat-grid{ grid-template-columns: repeat(2, 1fr); } .results .headline{ font-size: 30px; } }

.error-box{ background: #f8e2df; color: var(--bad); border-radius: 8px; padding: 16px 18px; font-weight: 600; font-size: 13.5px; margin-top: 22px; }

details.breakdown{ background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; margin-top: 16px; }
details.breakdown summary{ cursor: pointer; padding: 13px 16px; font-weight: 700; font-size: 13px; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--text); }
details.breakdown summary::-webkit-details-marker{ display: none; }
details.breakdown summary .chev{ transition: transform .15s ease; color: var(--muted); }
details.breakdown[open] summary .chev{ transform: rotate(90deg); }
.breakdown-list{ padding: 0 16px 14px; display: flex; flex-direction: column; }
.brk-row{ display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; gap: 10px; }
.brk-row .dt{ font-family: 'JetBrains Mono', monospace; color: var(--muted); font-size: 12px; width: 120px; flex-shrink: 0; }
.brk-row .nm{ flex: 1; }
.tag{ font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; flex-shrink: 0; }
.tag.weekend{ background: #f5ecd3; color: var(--mid); }
.tag.holiday{ background: var(--accent-soft); color: var(--accent); }
.tag.custom{ background: #d3ecdd; color: var(--good); }

.note{ margin-top: 20px; font-size: 12px; color: var(--muted); line-height: 1.6; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }

@media print{
  body{ background: #fff; padding: 0; }
  /* Only the result belongs on the printed page — hide every input/control
     (tabs, the whole left column of fields, action buttons) so what's left
     is the site header (rendered above .tool-box by the page template) plus
     a single results block. */
  .type-tabs, .left-col, .btns, .result-actions{ display: none !important; }
  .content{ display: block; }
  .tool-box{ box-shadow: none; border: none; }
  .right-col{ border: none; box-shadow: none; padding: 0; }

  /* Colored gradient card + white text depends on "print backgrounds" being
     enabled in the browser — off by default in most print dialogs, which
     would otherwise print white-on-white and look blank. Force it on and
     fall back to a plain bordered card either way. */
  .results{ background: #fff !important; color: var(--text) !important; border: 1px solid var(--line); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .results .headline-label, .results .headline-sub{ opacity: 1; color: var(--muted); }
  .stat{ background: var(--panel-2) !important; color: var(--text); border: 1px solid var(--line); }
  .stat .l{ opacity: 1; color: var(--muted); }
  details.breakdown{ break-inside: avoid-page; }
  .brk-row{ break-inside: avoid-page; }
}