:root {
  --wine: #7b1d3f;
  --wine-dark: #5a1530;
  --wine-light: #f9f0f3;
  --gold: #c9a96e;
  --gold-light: #fdf8ef;
  --surface: #ffffff;
  --surface-2: #f8f7f5;
  --border: #e8e2da;
  --text: #2d2320;
  --text-2: #6b5d58;
  --text-3: #9e8f8a;
  --green: #2e7d52;
  --green-bg: #edf7f2;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 2px 12px rgba(123,29,63,.08);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.06);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--surface-2);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

.app-nav {
  background: var(--wine);
  padding: 0 1rem;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.app-nav .brand {
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 0;
}

.app-nav .brand .logo-icon {
  width: 32px;
  height: 32px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.nav-actions { display:flex; gap:.5rem; align-items:center; padding:.5rem 0; flex-wrap:wrap; }
.nav-user { color: rgba(255,255,255,.7); font-size:.85rem; }

.btn-nav-primary,
.btn-nav-ghost,
.btn-nav-stat,
.btn-nav-danger,
.btn-primary-wine,
.btn-secondary-wine {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: var(--radius-sm);
  transition: all .15s;
}

.btn-nav-primary {
  background: var(--gold);
  color: var(--wine-dark);
  border: none;
  padding: .4rem .9rem;
  font-weight: 600;
  font-size: .85rem;
}

.btn-nav-primary:hover { background:#e0ba7f; color:var(--wine-dark); }

.btn-nav-ghost {
  background: transparent;
  color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.3);
  padding: .35rem .8rem;
  font-size: .8rem;
}

.btn-nav-ghost:hover { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.5); }

.btn-nav-stat {
  background: rgba(255,255,255,.15);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  padding:.35rem .8rem;
  font-size:.8rem;
}

.btn-nav-stat:hover { background:rgba(255,255,255,.25); color:#fff; }

.btn-nav-danger {
  background: rgba(220,53,69,.85);
  color:#fff;
  border:none;
  padding:.35rem .8rem;
  font-size:.8rem;
}

.btn-nav-danger:hover { background:rgb(220,53,69); color:#fff; }

.page-wrap { max-width: 1100px; margin:0 auto; padding: 1.25rem 1rem 3rem; }
.page-header { margin-bottom:1.25rem; }
.page-title { font-size:1.4rem; font-weight:700; color:var(--wine); margin:0 0 .15rem; }
.page-sub { color:var(--text-2); font-size:.9rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: visible;
}

.card-header-wine {
  background: linear-gradient(135deg, var(--wine) 0%, #9b2d52 100%);
  color: #fff;
  padding: .85rem 1.25rem;
  font-weight: 600;
  font-size:.95rem;
  display:flex;
  align-items:center;
  gap:.5rem;
  border-radius: var(--radius) var(--radius) 0 0;
}

.card-body { padding: 1.25rem; }
.card-body-sm { padding: 1rem; }

.form-label { font-weight: 600; color: var(--text); font-size: .85rem; margin-bottom: .35rem; }

.form-control, .form-select {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .55rem .75rem;
  font-size: .9rem;
  color: var(--text);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}

.form-control:focus, .form-select:focus {
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(123,29,63,.12);
  outline: none;
}

.form-control.is-invalid, .form-select.is-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220,53,69,.12);
}

.hint { font-size: .78rem; color: var(--text-3); margin-top: .2rem; }

.input-group .form-control {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
  min-width: 0;
  width: 1%;
  flex: 1 1 0%;
}

.input-group .input-group-text {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  border:1.5px solid var(--border);
  border-left:none;
  background:#fafafa;
  padding:.4rem .5rem;
  min-width:90px;
  max-width:110px;
  justify-content:center;
  flex-shrink:0;
}

.badge-ref {
  font-size: .75rem;
  font-weight: 700;
  padding: .25rem .5rem;
  border-radius: 5px;
  white-space: nowrap;
  text-align: center;
  display: inline-block;
  width: 100%;
}

.badge-ok { background: #d1fae5; color: #065f46; }
.badge-warn, .badge-err { background: #fee2e2; color: #991b1b; }
.badge-neu { background: var(--surface-2); color: var(--text-3); }

@media (max-width: 767px) {
  .input-group .form-control { font-size: .95rem; }
  .input-group .input-group-text { min-width: 80px; max-width: 100px; }
  .badge-ref { font-size: .7rem; padding: .2rem .35rem; }
}

.stepper {
  display:flex;
  gap:0;
  border-bottom:2px solid var(--border);
  margin-bottom:1.5rem;
  overflow-x:visible;
  flex-wrap:wrap;
}

.step-btn {
  background:none;
  border:none;
  padding:.65rem 1.1rem;
  font-size:.85rem;
  font-weight:600;
  color: var(--text-3);
  cursor:pointer;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  display:flex;
  align-items:center;
  gap:.4rem;
}

.step-btn.active { color: var(--wine); border-bottom-color: var(--wine); }

.step-btn .step-num {
  width:20px;
  height:20px;
  border-radius:50%;
  font-size:.72rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: var(--surface-2);
  color: var(--text-3);
  font-weight:700;
}

.step-btn.active .step-num { background: var(--wine); color:#fff; }
.step-btn.done .step-num { background: var(--green); color:#fff; }

.step-panel { display:none; visibility:hidden; height:0; overflow:hidden; }
.step-panel.active { display:block; visibility:visible; height:auto; overflow:visible; }

.type-picker { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:1.25rem; }

.type-card {
  flex:1;
  min-width:120px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  cursor: pointer;
  transition: all .2s;
  text-align:center;
  background: #fff;
  user-select:none;
}

.type-card:hover { border-color: var(--wine); box-shadow: var(--shadow); }
.type-card.selected { border-color: var(--wine); background: var(--wine-light); }
.type-card .type-icon { font-size:1.6rem; margin-bottom:.25rem; }
.type-card .type-name { font-weight:700; font-size:.9rem; color:var(--text); }
.type-card .type-sub { font-size:.75rem; color:var(--text-3); }
.type-card.selected .type-name { color:var(--wine); }

.salleron-box {
  background: linear-gradient(135deg, var(--gold-light) 0%, #fff 100%);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
  margin-top:.75rem;
}

.salleron-item { text-align:center; }
.salleron-val { font-size:1.5rem; font-weight:700; color:var(--wine); line-height:1; }
.salleron-lbl { font-size:.75rem; color:var(--text-2); margin-top:.2rem; }

.list-table { width:100%; border-collapse:collapse; }

.list-table thead th {
  background: var(--wine-light);
  color: var(--wine);
  font-weight:700;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:.65rem .85rem;
  border-bottom: 2px solid #e8d4dc;
  white-space:nowrap;
}

.list-table tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
.list-table tbody tr:hover { background: var(--wine-light); }
.list-table td { padding:.65rem .85rem; vertical-align:middle; font-size:.88rem; }

.producer-name { font-weight:600; color:var(--text); }
.producer-place { font-size:.78rem; color:var(--text-3); margin-top:.1rem; }
.metric { font-weight:700; color:var(--text); }
.metric-unit { font-size:.75rem; color:var(--text-3); font-weight:400; }

@media (max-width:1023px) {
  .list-table-wrap { display:none; }
  .mobile-cards { display:flex; flex-direction:column; gap:.75rem; }
  .mob-card {
    background:#fff;
    border-radius:var(--radius);
    border:1px solid var(--border);
    padding:1rem;
    box-shadow:var(--shadow-sm);
  }
}

@media (min-width:1024px) {
  .mobile-cards { display:none; }
  .list-table-wrap { display:block; }
}

.type-badge {
  display:inline-flex;
  align-items:center;
  padding:.25rem .6rem;
  border-radius:99px;
  font-size:.75rem;
  font-weight:700;
  white-space:nowrap;
}

.type-bijelo  { background:#f0ede6; color:#7a6a3a; }
.type-crno    { background:#2d1b2e; color:#e8c4d0; }
.type-rose    { background:#ffe4ef; color:#9d174d; }
.type-grozdje { background:#e8f5e9; color:#2e7d32; }
.type-most    { background:#e3f2fd; color:#1565c0; }

.badge-suho,
.badge-polusuho,
.badge-poluslatko,
.badge-slatko {
  padding:.2rem .55rem;
  border-radius:99px;
  font-size:.72rem;
  font-weight:700;
}

.badge-suho { background:#d4edda; color:#155724; }
.badge-polusuho { background:#cce5ff; color:#004085; }
.badge-poluslatko { background:#fff3cd; color:#856404; }
.badge-slatko { background:#f8d7da; color:#721c24; }

.btn-action {
  padding:.32rem .55rem;
  border-radius:6px;
  font-size:.82rem;
  border:1.5px solid;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.25rem;
  text-decoration:none;
  transition:all .15s;
  line-height:1;
}

.btn-view   { color:#495057; border-color:#ced4da; }
.btn-edit   { color:#b07700; border-color:#ffc107; }
.btn-pdf    { color:#0f5480; border-color:#90caf9; }
.btn-delete { color:#b91c1c; border-color:#fca5a5; }

.btn-view:hover { background:#f8f9fa; color:#212529; }
.btn-edit:hover { background:#fff3cd; }
.btn-pdf:hover { background:#e3f2fd; }
.btn-delete:hover { background:#fef2f2; }

.btn-primary-wine {
  background: var(--wine);
  color:#fff;
  border:none;
  padding:.6rem 1.4rem;
  font-weight:600;
  font-size:.9rem;
  cursor:pointer;
}

.btn-primary-wine:hover { background: var(--wine-dark); color:#fff; }

.btn-secondary-wine {
  background:#fff;
  color:var(--text-2);
  border:1.5px solid var(--border);
  padding:.58rem 1.2rem;
  font-weight:600;
  font-size:.9rem;
  cursor:pointer;
}

.btn-secondary-wine:hover { border-color:var(--wine); color:var(--wine); }

.search-bar { display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-end; margin-bottom:1rem; }
.filter-pills { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.75rem; }

.pager { display:flex; gap:.3rem; justify-content:center; margin-top:1.25rem; flex-wrap:wrap; }

.pager a, .pager span {
  width:36px;
  height:36px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  font-weight:600;
  text-decoration:none;
  border:1.5px solid var(--border);
  color:var(--text-2);
  background:#fff;
}

.pager .active { background:var(--wine); color:#fff; border-color:var(--wine); }
.pager .disabled { opacity:.4; pointer-events:none; }

.show-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:640px){ .show-grid { grid-template-columns:1fr; } }

.result-row { display:flex; justify-content:space-between; align-items:center; padding:.6rem .85rem; border-radius:var(--radius-sm); }
.result-row:nth-child(odd) { background:var(--surface-2); }

.result-row-full { display:block !important; padding:.85rem 1rem !important; border-radius:0 !important; }

.result-block-label {
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:.4rem;
  display:flex;
  align-items:center;
  gap:.35rem;
  opacity:.8;
}

.result-block-text {
  font-size:.88rem;
  line-height:1.7;
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
}

.result-name { color:var(--text-2); font-size:.88rem; }
.result-val { font-size:1rem; font-weight:700; color:var(--wine); }

.stat-grid, .kpi-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1rem;
  margin-bottom:1.5rem;
}

.stat-card, .kpi-card, .chart-wrap {
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem 1.25rem;
}

.kpi-card { position:relative; overflow:hidden; }
.kpi-card::before { content:''; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--wine); }

.kpi-num, .stat-num { font-size:1.8rem; font-weight:700; color:var(--wine); line-height:1; }
.kpi-lbl, .stat-lbl { font-size:.8rem; color:var(--text-2); margin-top:.25rem; }

.login-wrap {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--wine) 0%,#9b2d52 60%,#c97 100%);
  padding:1rem;
}

.login-card {
  background:#fff;
  border-radius:var(--radius);
  padding:2.5rem;
  width:100%;
  max-width:420px;
  box-shadow:0 8px 40px rgba(0,0,0,.25);
}

.form-row { display:grid; gap:1rem; }
.form-row-2 { grid-template-columns:1fr 1fr; }
.form-row-3 { grid-template-columns:1fr 1fr 1fr; }
.form-row-4 { grid-template-columns:1fr 1fr 1fr 1fr; }

@media(max-width:640px){
  .form-row-2,.form-row-3,.form-row-4 { grid-template-columns:1fr; }
}

@media(max-width:1023px) and (min-width:641px){
  .form-row-4 { grid-template-columns:1fr 1fr; }
  .form-row-3 { grid-template-columns:1fr 1fr; }
}

.divider-label { display:flex; align-items:center; gap:.75rem; margin:1.5rem 0 1rem; }

.divider-label span {
  background:var(--wine);
  color:#fff;
  font-size:.75rem;
  font-weight:700;
  padding:.2rem .7rem;
  border-radius:99px;
  white-space:nowrap;
}

.divider-label::before,
.divider-label::after {
  content:'';
  flex:1;
  height:1px;
  background:var(--border);
}

.empty-state { text-align:center; padding:3rem 1rem; color:var(--text-3); }
.empty-state .ei { font-size:2.5rem; margin-bottom:.5rem; }

.choices { width:100% !important; }
.choices__list--dropdown { z-index:1060; }

.choices__inner {
  border:1.5px solid var(--border) !important;
  border-radius:var(--radius-sm) !important;
  min-height:42px !important;
}

.choices__inner:focus-within {
  border-color:var(--wine) !important;
  box-shadow:0 0 0 3px rgba(123,29,63,.12) !important;
}

.year-spinner { display:flex; align-items:center; gap:0; }

.year-spinner .yr-input {
  text-align:center;
  font-size:1.05rem;
  font-weight:700;
  flex:1;
  border-radius:0 !important;
  border-left:none;
  border-right:none;
  -moz-appearance:textfield;
}

.yr-btn {
  width:42px;
  height:42px;
  flex-shrink:0;
  border:1.5px solid var(--border);
  background:#fff;
  color:var(--wine);
  font-size:1rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.yr-btn:first-child { border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.yr-btn:last-child  { border-radius:0 var(--radius-sm) var(--radius-sm) 0; }

.btn-tpl-open {
  background:var(--gold-light);
  color:var(--wine);
  border:1.5px solid var(--gold);
  border-radius:var(--radius-sm);
  padding:.28rem .75rem;
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}

.btn-tpl-open:hover {
  background: var(--gold);
  color: var(--wine-dark);
}

.tpl-picker, .filter-panel {
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
}

.tpl-picker {
  border: 1.5px solid var(--wine);
  box-shadow: 0 4px 20px rgba(123,29,63,.15);
  margin-bottom: .6rem;
  overflow: hidden;
}

.tpl-picker-head, .filter-panel-header {
  background:var(--wine-light);
  padding:.75rem 1.1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.tpl-picker-head {
  background: var(--wine);
  color: #fff;
  padding: .55rem .9rem;
  font-size: .82rem;
  font-weight: 700;
}

.tpl-close-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.8);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.tpl-close-btn:hover { color: #fff; }

.tpl-list {
  max-height: 220px;
  overflow-y: auto;
}

.tpl-item {
  padding: .6rem .9rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.tpl-item:last-child { border-bottom: none; }
.tpl-item:hover { background: var(--wine-light); }

.tpl-item .tpl-name {
  font-weight: 700;
  font-size: .85rem;
  color: var(--wine);
}

.tpl-item .tpl-preview {
  font-size: .75rem;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tpl-empty {
  padding: .75rem .9rem;
  font-size: .82rem;
  color: var(--text-3);
  font-style: italic;
}

.tpl-picker-foot {
  padding: .45rem .9rem;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}

.tpl-manage-link {
  font-size: .78rem;
  color: var(--wine);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .35rem;
}

.tpl-manage-link:hover { text-decoration: underline; }

.filter-panel-header {
  cursor: pointer;
  border-bottom: 1px solid #e8d4dc;
  user-select: none;
}

.filter-panel-header .fph-title {
  font-weight: 700;
  color: var(--wine);
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.filter-panel-header .fph-badge {
  background: var(--wine);
  color: #fff;
  border-radius: 99px;
  font-size: .72rem;
  padding: .1rem .5rem;
  font-weight: 700;
}

.filter-panel-body { padding:1rem 1.1rem; display:none; }
.filter-panel-body.open { display:block; }

.filter-section-title {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 1rem 0 .5rem;
}

.filter-section-title:first-child { margin-top: 0; }

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
  gap: .6rem;
}

.filter-grid-wide {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
  gap: .6rem;
}

.filter-range {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.filter-range input {
  flex: 1;
  min-width: 0;
}

.filter-range span {
  color: var(--text-3);
  font-size: .85rem;
  white-space: nowrap;
}

.fform label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: .2rem;
  display: block;
}

.fform .form-control,
.fform .form-select {
  font-size: .82rem;
  padding: .38rem .6rem;
}

.active-filters {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}

.afilter-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: var(--wine);
  color: #fff;
  border-radius: 99px;
  padding: .2rem .65rem;
  font-size: .75rem;
  font-weight: 600;
}

.afilter-tag a {
  color: rgba(255,255,255,.8);
  text-decoration: none;
  font-size: .9rem;
  line-height: 1;
}

.afilter-tag a:hover { color: #fff; }

.kpi-sub {
  font-size: .72rem;
  color: var(--text-3);
  margin-top: .15rem;
}

.kpi-card.gold::before { background: var(--gold); }
.kpi-card.green::before { background: var(--green); }
.kpi-card.blue::before { background: #1565c0; }

.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.charts-grid .col-full {
  grid-column: 1 / -1;
}

@media (max-width:768px) {
  .charts-grid { grid-template-columns: 1fr; }
  .charts-grid .col-full { grid-column: auto; }
}

.chart-sub {
  font-size: .75rem;
  color: var(--text-3);
  font-weight: 400;
  margin-left: auto;
}

.avg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}

.avg-table th {
  text-align: left;
  padding: .4rem .6rem;
  color: var(--text-3);
  font-weight: 600;
  font-size: .75rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}

.avg-table td {
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--border);
}

.avg-table tr:last-child td { border-bottom: none; }

.avg-table .val {
  font-weight: 700;
  color: var(--wine);
}

.avg-table .range {
  font-size: .75rem;
  color: var(--text-3);
}

.no-data {
  text-align: center;
  color: var(--text-3);
  padding: 2rem;
  font-size: .9rem;
}

.settings-tabs {
  display:flex;
  border-bottom:2px solid var(--border);
  margin-bottom:1.5rem;
  overflow-x:auto;
}

.stab {
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  padding:.6rem 1.1rem;
  font-size:.88rem;
  font-weight:600;
  color:var(--text-3);
  cursor:pointer;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:.4rem;
}

.stab.active { color:var(--wine); border-bottom-color:var(--wine); }
.stab-panel { display:none; }
.stab-panel.active { display:block; }

.tpl-edit-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.tpl-edit-row {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.tpl-edit-row .tpl-edit-name {
  font-weight: 700;
  font-size: .88rem;
  flex: 1;
}

.tpl-edit-row .tpl-edit-preview {
  font-size: .75rem;
  color: var(--text-3);
  flex: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tpl-edit-actions {
  display: flex;
  gap: .4rem;
  flex-shrink: 0;
}

input[type="date"].form-control { color: var(--text); }

input[type="date"].form-control::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .6;
}

.ac-wrap { position: relative; }

.ac-dropdown {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  z-index: 1050;
  background: #fff;
  border: 1.5px solid var(--wine);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(123,29,63,.15);
  max-height: 220px;
  overflow-y: auto;
  display: none;
}

.ac-dropdown.open { display: block; }

.ac-item {
  padding: .5rem .85rem;
  cursor: pointer;
  font-size: .88rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 1px solid var(--border);
}

.ac-item:hover, .ac-item.selected { background: var(--wine-light); color: var(--wine); }

.var-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1060;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: none;
}

.var-modal-backdrop.open {
  display: flex;
  pointer-events: auto;
}

.var-modal {
  background: #fff;
  border-radius: var(--radius);
  width: 100%;
  max-width: 480px;
  box-shadow: 0 8px 40px rgba(0,0,0,.25);
  overflow: hidden;
  animation: vmIn .18s ease;
}

@keyframes vmIn {
  from { transform: scale(.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.var-modal-header {
  background: var(--wine);
  color: #fff;
  padding: .85rem 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.var-modal-header .vm-title {
  font-weight: 700;
  font-size: .95rem;
}

.var-modal-header .vm-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.75);
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 .2rem;
}

.var-modal-header .vm-close:hover { color: #fff; }

.var-modal-body { padding: 1.1rem; }

.var-modal-preview {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .7rem .9rem;
  font-size: .85rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  min-height: 2.5rem;
  color: var(--text);
}

.var-modal-preview .vm-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .04em;
  display: block;
  margin-bottom: .35rem;
}

.var-modal-footer {
  padding: .85rem 1.1rem;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  align-items: center;
}

.var-badge {
  display: inline-block;
  background: var(--wine);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  border-radius: 4px;
  padding: .1rem .4rem;
  font-family: monospace;
  letter-spacing: .03em;
}

@media (min-width: 768px) {
  .step-panel .form-row-2 > div:last-child .form-row {
    max-width: 340px;
    margin-left: auto;
  }
}

.mob-card-top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:.6rem;
}

.mob-card-title {
  font-weight:700;
  font-size:1rem;
}

.mob-card-meta {
  font-size:.8rem;
  color:var(--text-3);
  margin-top:.1rem;
}

.mob-card-stats {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:.6rem;
  margin:.6rem 0;
}

.mob-stat {
  text-align:center;
  background:var(--surface-2);
  border-radius:6px;
  padding:.5rem .4rem;
}

.mob-stat-val {
  font-weight:700;
  font-size:1rem;
  color:var(--wine);
}

.mob-stat-lbl {
  font-size:.72rem;
  color:var(--text-3);
}

.mob-actions {
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:.5rem;
  margin-top:.75rem;
}

.mob-actions a {
  text-align:center;
  font-size:.85rem;
  padding:.55rem .4rem;
  border-radius:8px;
  border:1.5px solid;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.3rem;
  font-weight:600;
}

.mob-actions .ma-view   { color:#495057; border-color:#ced4da; background:#f8f9fa; }
.mob-actions .ma-edit   { color:#92400e; border-color:#fcd34d; background:#fffbeb; }
.mob-actions .ma-pdf    { color:#1e40af; border-color:#93c5fd; background:#eff6ff; }
.mob-actions .ma-delete { color:#991b1b; border-color:#fca5a5; background:#fef2f2; }

.ac-text {
  display: inline-block;
  min-width: 0;
}

.ac-text mark {
  padding: 0 .08em;
  border-radius: 3px;
  background: #f3e3a2;
  color: inherit;
}

.ac-item {
  padding: .55rem .85rem;
  cursor: pointer;
  font-size: .88rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 1px solid var(--border);
}

.ac-icon {
  flex: 0 0 auto;
  opacity: .65;
}

.ac-text {
  flex: 1 1 auto;
}