:root{
    --dark-green: #1e4d33;
    --dark-green-2: #163b28;
    --dark-green-3: #123020;
    --lime: #b7e94e;
    --lime-2: #a5db38;
    --lime-light: #e4f4c8;
    --lime-light-2: #eef8db;
    --bg: #f4f5f1;
    --surface: #ffffff;
    --surface-2: #f7f8f5;
    --border: #e6e9e1;
    --text: #16241c;
    --text-soft: #5c6b60;
    --text-faint: #94a096;
    --danger: #d95b52;
    --warning: #dba63a;
    --success: #4c9a68;
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --radius-pill: 999px;
    --shadow-soft: 0 8px 24px rgba(20, 40, 26, 0.06);
    --shadow-card: 0 2px 10px rgba(20, 40, 26, 0.05);
    --shell-header-height: 77px;
    --sidebar-width: 272px;
  }
  html.sidebar-collapsed{
    --sidebar-width: 76px;
  }

  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    font-family:'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
  }
  h1,h2,h3,h4, .font-display{
    font-family:'Manrope', sans-serif;
  }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }
  button{ font-family:inherit; cursor:pointer; }
  input, select, textarea{ font-family:inherit; }

  ::selection{ background: var(--lime); color: var(--dark-green-3); }

  /* ---------- Layout shell ---------- */
  .shell{
    position: relative;
    display:grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height:100vh;
    transition: grid-template-columns .24s ease;
  }
  html.sidebar-collapsed .shell{
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }
  @media (max-width: 980px){
    .shell{ grid-template-columns: 1fr; }
    html.sidebar-collapsed .shell{ grid-template-columns: 1fr; }
  }

  /* ---------- Sidebar ---------- */
  .sidebar{
    background: linear-gradient(185deg, var(--dark-green) 0%, var(--dark-green-3) 100%);
    color:#eef5ec;
    padding: 0 20px 24px;
    display:flex;
    flex-direction:column;
    gap: 14px;
    position: sticky;
    top:0;
    height:100vh;
    z-index: 40;
    min-width: 0;
    width: 100%;
    transition: transform .28s ease, padding .24s ease;
    overflow: hidden;
  }
  .sidebar-toggle{
    position:fixed;
    left: calc(var(--sidebar-width) - 14px);
    top: calc(var(--shell-header-height) / 2 - 14px);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--dark-green-3);
    border: 2px solid var(--bg);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    transition: left .24s ease, background .15s ease;
    pointer-events: auto;
  }
  .sidebar-toggle svg{ width:16px; height:16px; transition: transform .24s ease; }
  .sidebar-toggle:hover{ background: var(--lime-2); }
  html.sidebar-collapsed .sidebar-toggle svg{ transform: rotate(180deg); }
  @media (max-width: 980px){ .sidebar-toggle{ display:none; } }
  @media (max-width: 980px){
    .sidebar{
      position: fixed;
      inset: 0 auto 0 0;
      width: 272px;
      transform: translateX(-100%);
      box-shadow: 24px 0 60px rgba(0,0,0,.25);
    }
    .sidebar.is-open{ transform: translateX(0); }
  }

  .brand{ display:flex; align-items:center; gap:12px; padding: 4px 6px; }
  .brand-mark{ width:38px; height:38px; flex-shrink:0; }
  .brand-name{ font-weight:800; font-size:17px; line-height:1.1; letter-spacing:.2px; }
  .brand-sub{ font-size:11.5px; color:#9fc2ab; font-weight:500; margin-top:2px; }

  .sidebar-close{
    display:none;
    margin-left:auto;
    width:34px; height:34px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border:none;
    color:#eef5ec;
    align-items:center; justify-content:center;
    font-size:16px;
  }
  @media (max-width: 980px){ .sidebar-close{ display:flex; } }

  .nav-group-label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.09em;
    color:#7fa38d;
    font-weight:700;
    padding: 0 12px;
    margin-bottom:2px;
  }
  .nav-list{ display:flex; flex-direction:column; gap:3px; }
  .nav-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 13px;
    border-radius: 14px;
    font-size:14.5px;
    font-weight:600;
    color:#cfe3d5;
    position:relative;
    transition: background .15s ease, color .15s ease;
  }
  .nav-item svg{ width:19px; height:19px; flex-shrink:0; opacity:.85; }
  .nav-label{ white-space:nowrap; }
  html.sidebar-collapsed .sidebar{
    padding: 0 8px 20px;
    gap: 18px;
    align-items:center;
    overflow: hidden;
  }
  html.sidebar-collapsed .brand--sidebar .brand-logo-wrap{
    width: 42px;
    height: 40px;
    overflow: hidden;
    margin: 0 auto;
    display: block;
  }
  html.sidebar-collapsed .brand--sidebar .brand-logo{
    width: 128px;
    height: 41px;
    max-width: none;
    display: block;
  }
  html.sidebar-collapsed .brand-sub,
  html.sidebar-collapsed .nav-group-label,
  html.sidebar-collapsed .nav-label,
  html.sidebar-collapsed .nav-badge,
  html.sidebar-collapsed .sidebar-divider,
  html.sidebar-collapsed .sidebar-cta{
    display:none;
  }
  html.sidebar-collapsed .nav-list{ width:100%; align-items: center; }
  html.sidebar-collapsed .nav-item{
    justify-content:center;
    align-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    gap:0;
    border-radius: 0;
    margin: 0 auto;
  }
  html.sidebar-collapsed .brand--sidebar{
    align-items:center;
    justify-content: center;
    height: var(--shell-header-height);
    min-height: var(--shell-header-height);
    padding: 0 6px;
    width: calc(100% + 16px);
    margin: 0 -8px;
  }
  .nav-item:hover{ background: rgba(255,255,255,.06); color:#fff; }
  .nav-item.active{
    background: var(--lime);
    color: var(--dark-green-3);
  }
  .nav-item.active svg{ opacity:1; }
  .nav-badge{
    margin-left:auto;
    background: rgba(255,255,255,.14);
    color:#fff;
    font-size:11px;
    font-weight:700;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
  }
  .nav-item.active .nav-badge{ background: rgba(18,48,32,.16); color: var(--dark-green-3); }

  .sidebar-divider{ height:1px; background: rgba(255,255,255,.08); margin: 2px 4px; }

  .sidebar-cta{
    margin-top:auto;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-md);
    padding: 16px;
  }
  .sidebar-cta p{ font-size:13px; color:#cfe3d5; line-height:1.45; margin-bottom:12px; }
  .btn-block{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%;
    background: var(--lime);
    color: var(--dark-green-3);
    font-weight:700;
    font-size:13.5px;
    padding: 11px 14px;
    border-radius: var(--radius-pill);
    border:none;
  }

  /* ---------- Main column ---------- */
  .main{ min-width:0; }

  .topbar{
    display:flex;
    align-items:center;
    gap:16px;
    min-height: var(--shell-header-height);
    box-sizing: border-box;
    padding: 16px 28px;
    background: var(--surface);
    border-bottom:1px solid var(--border);
    position: sticky;
    top:0;
    z-index:30;
  }
  .burger{
    display:none;
    width:40px; height:40px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .burger span, .burger::before, .burger::after{ display:none; }
  .burger svg{ width:19px; height:19px; }
  @media (max-width: 980px){ .burger{ display:flex; } }

  .search{
    position:relative;
    flex:1;
    max-width: 420px;
  }
  .search input{
    width:100%;
    background: var(--surface-2);
    border:1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 10px 16px 10px 40px;
    font-size:14px;
    color: var(--text);
    outline:none;
    transition: border-color .15s ease, background .15s ease;
  }
  .search input:focus{ border-color: var(--lime-2); background:#fff; }
  .search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-faint); }

  .topbar-right{ display:flex; align-items:center; gap:10px; margin-left:auto; }
  .icon-btn{
    width:40px; height:40px;
    border-radius:12px;
    border:1px solid var(--border);
    background: var(--surface-2);
    display:flex; align-items:center; justify-content:center;
    position:relative;
    color: var(--text);
  }
  .icon-btn svg{ width:18px; height:18px; }
  .icon-dot{
    position:absolute; top:8px; right:8px;
    width:7px; height:7px; border-radius:50%;
    background: var(--danger);
    border:1.5px solid var(--surface);
  }
  .user-chip{
    display:flex; align-items:center; gap:10px;
    padding: 5px 14px 5px 5px;
    border-radius: var(--radius-pill);
    border:1px solid var(--border);
    background: var(--surface-2);
  }
  .avatar{
    width:32px; height:32px; border-radius:50%;
    background: linear-gradient(135deg, var(--lime), var(--dark-green));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; font-size:12.5px;
  }
  .user-chip .u-name{ font-size:13px; font-weight:700; line-height:1.15; }
  .user-chip .u-role{ font-size:11px; color: var(--text-soft); }

  .content{ padding: 28px; display:flex; flex-direction:column; gap:24px; max-width:1360px; }

  .page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
  .page-head h1{ font-size: 25px; font-weight:800; }
  .page-head .crumbs{ font-size:13px; color: var(--text-soft); margin-bottom:6px; }
  .crumbs b{ color: var(--text); font-weight:600; }
  .head-actions{ display:flex; gap:10px; }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    border-radius: var(--radius-pill);
    padding: 10px 18px;
    font-size:13.5px;
    font-weight:700;
    border:1px solid transparent;
    transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
  }
  .btn svg{ width:16px; height:16px; }
  .btn:active{ transform: scale(.97); }
  .btn-primary{ background: var(--lime); color: var(--dark-green-3); }
  .btn-primary:hover{ background: var(--lime-2); }
  .btn-dark{ background: var(--dark-green); color:#fff; }
  .btn-dark:hover{ background: var(--dark-green-2); }
  .btn-ghost{ background: var(--surface); color: var(--text); border-color: var(--border); }
  .btn-ghost:hover{ background: var(--surface-2); }
  .btn-sm{ padding: 7px 14px; font-size:12.5px; }

  /* ---------- Cards / panels ---------- */
  .panel{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
  }
  .panel-pad{ padding: 22px; }
  .panel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; }
  .panel-head h3{ font-size:16px; font-weight:800; }
  .panel-head .sub{ font-size:12.5px; color: var(--text-soft); margin-top:2px; }

  .kpi-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; }
  @media (max-width: 1180px){ .kpi-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px){ .kpi-grid{ grid-template-columns: 1fr; } }

  .kpi-card{
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: 22px 20px;
    min-height: 132px;
    display:flex;
    flex-direction:column;
    justify-content: flex-end;
    border:1px solid var(--border);
    background: var(--surface);
  }
  .kpi-card.accent{ background: var(--lime-light); border-color: transparent; }
  .kpi-card.dark{ background: linear-gradient(160deg, var(--dark-green), var(--dark-green-3)); color:#eef5ec; border-color:transparent; }
  .kpi-body{ position: relative; z-index: 1; }
  .kpi-bg-icon{
    position: absolute;
    right: -6px;
    bottom: -10px;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark-green);
    opacity: 0.14;
    pointer-events: none;
  }
  .kpi-card.accent .kpi-bg-icon{ opacity: 0.16; }
  .kpi-card.dark .kpi-bg-icon{ color: #fff; opacity: 0.18; }
  .kpi-bg-icon svg{ width: 100%; height: 100%; }
  .kpi-value{ font-family:'Manrope',sans-serif; font-size:28px; font-weight:800; line-height: 1.1; }
  .kpi-label{ font-size:13px; color: var(--text-soft); font-weight:500; margin-top: 4px; }
  .kpi-card.dark .kpi-label{ color:#a9c7b4; }

  /* ---------- Charts row ---------- */
  .charts-row{ display:grid; grid-template-columns: 1.5fr 1fr; gap:20px; }
  @media (max-width: 980px){ .charts-row{ grid-template-columns: 1fr; } }

  .legend{ display:flex; gap:16px; flex-wrap:wrap; }
  .legend-item{ display:flex; align-items:center; gap:7px; font-size:12.5px; color: var(--text-soft); font-weight:600; }
  .legend-dot{ width:9px; height:9px; border-radius:3px; }

  .chart-tabs{ display:flex; gap:6px; background: var(--surface-2); padding:4px; border-radius: var(--radius-pill); }
  .chart-tab{ padding:6px 13px; font-size:12px; font-weight:700; border-radius: var(--radius-pill); color: var(--text-soft); }
  .chart-tab.active{ background: var(--dark-green); color:#fff; }

  .donut-wrap{ display:flex; align-items:center; gap:22px; }
  .donut-legend{ display:flex; flex-direction:column; gap:12px; flex:1; }
  .donut-row{ display:flex; align-items:center; gap:10px; font-size:13px; }
  .donut-row .swatch{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
  .donut-row .lbl{ flex:1; color: var(--text-soft); font-weight:600; }
  .donut-row .val{ font-weight:800; }

  /* ---------- Table ---------- */
  .table-wrap{ overflow-x:auto; }
  table{ width:100%; border-collapse: collapse; min-width:640px; }
  thead th{
    text-align:left;
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color: var(--text-faint);
    font-weight:700;
    padding: 0 14px 12px;
    border-bottom:1px solid var(--border);
  }
  tbody td{
    padding: 14px 14px;
    font-size:13.5px;
    border-bottom:1px solid var(--border);
  }
  tbody tr:last-child td{ border-bottom:none; }
  tbody tr{ transition: background .12s ease; }
  tbody tr:hover{ background: var(--surface-2); }
  .cell-main{ font-weight:700; }
  .cell-sub{ font-size:12px; color: var(--text-soft); }
  .badge{
    display:inline-flex; align-items:center; gap:6px;
    font-size:11.5px; font-weight:700;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
  }
  .badge .dot{ width:6px; height:6px; border-radius:50%; }
  .badge-success{ background:#e2f3e6; color: var(--success); }
  .badge-success .dot{ background: var(--success); }
  .badge-warning{ background:#fbf1de; color: var(--warning); }
  .badge-warning .dot{ background: var(--warning); }
  .badge-danger{ background:#fbe7e5; color: var(--danger); }
  .badge-danger .dot{ background: var(--danger); }
  .badge-neutral{ background: var(--surface-2); color: var(--text-soft); border:1px solid var(--border); }

  .row-avatar{ display:flex; align-items:center; gap:10px; }
  .row-avatar .mini{ width:32px; height:32px; border-radius:10px; background: var(--lime-light); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color: var(--dark-green); flex-shrink:0; }

  .table-foot{ display:flex; align-items:center; justify-content:space-between; padding-top:16px; flex-wrap:wrap; gap:10px; }
  .pagination{ display:flex; gap:6px; }
  .page-btn{
    width:32px; height:32px;
    border-radius: 10px;
    display:flex; align-items:center; justify-content:center;
    font-size:12.5px; font-weight:700;
    color: var(--text-soft);
    border:1px solid transparent;
  }
  .page-btn.active{ background: var(--dark-green); color:#fff; }
  .page-btn:not(.active):hover{ background: var(--surface-2); border-color: var(--border); }

  /* ---------- Two column split for forms/accordion ---------- */
  .split{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; align-items:start; }
  @media (max-width: 980px){ .split{ grid-template-columns: 1fr; } }

  /* ---------- Form elements ---------- */
  .form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
  @media (max-width: 560px){ .form-grid{ grid-template-columns: 1fr; } }
  .field{ display:flex; flex-direction:column; gap:7px; }
  .field.full{ grid-column: 1 / -1; }
  .field label{ font-size:12.5px; font-weight:700; color: var(--text); }
  .hint{ font-size:11.5px; color: var(--text-faint); }
  .input, select.input, textarea.input{
    width:100%;
    border:1.5px solid var(--border);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-size:13.5px;
    color: var(--text);
    outline:none;
    transition: border-color .15s ease, background .15s ease;
  }
  .input:focus{ border-color: var(--lime-2); background:#fff; }
  textarea.input{ resize: vertical; min-height:90px; }
  .input-icon-wrap{ position:relative; }
  .input-icon-wrap .input{ padding-left:38px; }
  .input-icon-wrap svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color: var(--text-faint); }

  select.input{ appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%235c6b60' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 14px center; padding-right:34px; }

  .phone-field{ display:flex; }
  .phone-code{ display:flex; align-items:center; gap:6px; padding: 0 12px; border:1.5px solid var(--border); border-right:none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--surface-2); font-size:13px; font-weight:700; }
  .phone-field .input{ border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

  /* Toggle switch */
  .toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 12px 2px; }
  .toggle-row + .toggle-row{ border-top:1px solid var(--border); }
  .toggle-text .t-title{ font-size:13.5px; font-weight:700; }
  .toggle-text .t-sub{ font-size:12px; color: var(--text-soft); margin-top:2px; }
  .switch{ position:relative; width:44px; height:26px; flex-shrink:0; }
  .switch input{ opacity:0; width:0; height:0; position:absolute; }
  .switch .track{
    position:absolute; inset:0; background: #dde3d8; border-radius: var(--radius-pill);
    transition: background .18s ease; cursor:pointer;
  }
  .switch .track::after{
    content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
    background:#fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform .18s ease;
  }
  .switch input:checked + .track{ background: var(--lime); }
  .switch input:checked + .track::after{ transform: translateX(18px); }

  /* Checkbox / Radio */
  .check-row, .radio-row{ display:flex; align-items:flex-start; gap:10px; padding:9px 2px; cursor:pointer; }
  .check-row input, .radio-row input{ position:absolute; opacity:0; width:0; height:0; }
  .box{ width:20px; height:20px; border-radius:6px; border:1.7px solid var(--border); flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; transition: all .15s ease; background:var(--surface); }
  .radio-row .box{ border-radius:50%; }
  .box svg{ width:12px; height:12px; opacity:0; transition: opacity .12s ease; }
  .radio-row .box::after{ content:""; width:9px; height:9px; border-radius:50%; background: var(--dark-green); opacity:0; transition: opacity .12s ease; }
  input:checked + .box{ background: var(--lime); border-color: var(--lime-2); }
  input:checked + .box svg{ opacity:1; }
  .radio-row input:checked + .box{ background:#fff; border-color: var(--dark-green); }
  .radio-row input:checked + .box::after{ opacity:1; }
  .check-text{ font-size:13.5px; }
  .check-text b{ font-weight:700; }
  .check-text span{ display:block; font-size:11.5px; color: var(--text-soft); margin-top:1px; }

  .radio-pill-group{ display:flex; gap:8px; flex-wrap:wrap; }
  .radio-pill{ position:relative; }
  .radio-pill input{ position:absolute; opacity:0; }
  .radio-pill label{
    display:inline-flex; padding: 9px 16px; border-radius: var(--radius-pill);
    border:1.5px solid var(--border); font-size:12.5px; font-weight:700; color: var(--text-soft);
    background: var(--surface); transition: all .15s ease;
  }
  .radio-pill input:checked + label{ background: var(--dark-green); border-color: var(--dark-green); color:#fff; }

  /* Range slider */
  .range-wrap{ padding: 4px 2px 0; }
  .range-labels{ display:flex; justify-content:space-between; font-size:12px; color: var(--text-soft); font-weight:600; margin-bottom:8px; }
  .range-labels b{ color: var(--text); font-size: 13.5px; }
  input[type="range"]{
    -webkit-appearance:none; width:100%; height:6px; border-radius:99px;
    background: linear-gradient(to right, var(--lime) 0%, var(--lime) var(--val,45%), var(--border) var(--val,45%), var(--border) 100%);
    outline:none;
  }
  input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
    background:#fff; border:4px solid var(--dark-green); cursor:pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
  }
  input[type="range"]::-moz-range-thumb{
    width:20px; height:20px; border-radius:50%; background:#fff; border:4px solid var(--dark-green); cursor:pointer;
  }

  /* Segmented / tabs */
  .segmented{ display:inline-flex; background: var(--surface-2); border-radius: var(--radius-pill); padding:4px; gap:2px; }
  .segmented button{ border:none; background:transparent; padding:8px 16px; border-radius: var(--radius-pill); font-size:12.5px; font-weight:700; color: var(--text-soft); }
  .segmented button.active{ background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); }

  .tabs-nav{ display:flex; gap:22px; border-bottom:1px solid var(--border); margin-bottom:18px; }
  .tab-btn{ background:none; border:none; padding: 4px 2px 14px; font-size:13.5px; font-weight:700; color: var(--text-faint); position:relative; }
  .tab-btn.active{ color: var(--text); }
  .tab-btn.active::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: var(--dark-green); border-radius:2px; }
  .tab-panel{ display:none; }
  .tab-panel.active{ display:block; }

  /* File drop zone */
  .dropzone{
    border: 1.6px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 26px 16px;
    text-align:center;
    background: var(--surface-2);
  }
  .dropzone svg{ width:26px; height:26px; color: var(--text-faint); margin-bottom:8px; }
  .dropzone .dz-title{ font-size:13px; font-weight:700; }
  .dropzone .dz-sub{ font-size:11.5px; color: var(--text-soft); margin-top:3px; }

  /* Tag input */
  .tag-input{ display:flex; flex-wrap:wrap; gap:6px; border:1.5px solid var(--border); background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px; }
  .tag{ display:flex; align-items:center; gap:6px; background: var(--lime-light); color: var(--dark-green); font-size:12px; font-weight:700; padding: 5px 6px 5px 11px; border-radius: var(--radius-pill); }
  .tag button{ width:16px; height:16px; border-radius:50%; background: rgba(30,77,51,.12); border:none; display:flex; align-items:center; justify-content:center; font-size:11px; color: var(--dark-green); }
  .tag-input input{ border:none; background:transparent; outline:none; font-size:13px; flex:1; min-width:90px; padding:5px; }

  /* Accordion */
  .accordion-item{ border-radius: var(--radius-md); overflow:hidden; }
  .accordion-item + .accordion-item{ margin-top:10px; }
  .accordion-trigger{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
    background: var(--surface-2); border:none; padding: 16px 18px; text-align:left;
    font-size:14px; font-weight:700; color: var(--text);
    border-radius: var(--radius-md);
    transition: background .15s ease, border-radius .15s ease;
  }
  .accordion-item.open .accordion-trigger{ background: var(--lime-light); border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .acc-icon{ width:30px; height:30px; border-radius:50%; background: var(--dark-green); color:#fff; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition: transform .2s ease; }
  .accordion-item.open .acc-icon{ transform: rotate(90deg); background: var(--dark-green-3); }
  .acc-icon svg{ width:14px; height:14px; }
  .accordion-panel{ max-height:0; overflow:hidden; transition: max-height .22s ease; background: var(--lime-light-2); border-radius: 0 0 var(--radius-md) var(--radius-md); }
  .accordion-item.open .accordion-panel{ max-height: 240px; }
  .accordion-panel p{ padding: 4px 18px 18px; font-size:13px; color: var(--text-soft); line-height:1.55; }

  /* Modal */
  .modal-overlay{
    position:fixed; inset:0; background: rgba(16,32,20,.5);
    display:flex; align-items:center; justify-content:center; padding:20px;
    opacity:0; pointer-events:none; transition: opacity .2s ease; z-index:100;
  }
  .modal-overlay.is-open{ opacity:1; pointer-events:auto; }
  .modal{
    background:#fff; border-radius: var(--radius-lg); padding: 30px; width:100%; max-width:420px;
    position:relative; transform: translateY(14px) scale(.98); transition: transform .2s ease;
    box-shadow: 0 30px 70px rgba(10,25,15,.28);
  }
  .modal-overlay.is-open .modal{ transform: translateY(0) scale(1); }
  .modal-close{ position:absolute; top:20px; right:20px; width:32px; height:32px; border-radius:50%; border:none; background: var(--surface-2); display:flex; align-items:center; justify-content:center; color: var(--dark-green); }
  .modal h3{ font-size:21px; font-weight:800; margin-bottom:8px; }
  .modal p.lead{ font-size:13.5px; color: var(--text-soft); margin-bottom:20px; line-height:1.5; }

  /* Toast */
  .toast-stack{ position:fixed; bottom:22px; right:22px; display:flex; flex-direction:column; gap:10px; z-index:120; }
  .toast{
    display:flex; align-items:flex-start; gap:10px;
    background: var(--dark-green-3); color:#fff; padding: 14px 16px; border-radius: var(--radius-md);
    width:300px; box-shadow: 0 16px 40px rgba(0,0,0,.28);
    transform: translateY(10px); opacity:0; transition: all .25s ease;
  }
  .toast.show{ transform: translateY(0); opacity:1; }
  .toast .t-ic{ width:28px; height:28px; border-radius:50%; background: var(--lime); color: var(--dark-green-3); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .toast .t-ic svg{ width:15px; height:15px; }
  .toast strong{ font-size:13px; display:block; margin-bottom:2px; }
  .toast span{ font-size:12px; color:#c6dccd; }
  .toast .t-close{ margin-left:auto; background:none; border:none; color:#c6dccd; font-size:14px; }

  .footer-note{ text-align:center; font-size:12px; color: var(--text-faint); padding: 10px 0 20px; }

  .kit-title{ display:flex; align-items:center; gap:10px; }
  .kit-tag{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; background: var(--dark-green); color:#fff; padding:4px 9px; border-radius: var(--radius-pill); }

  .overlay-scrim{
    position:fixed; inset:0; background: rgba(10,20,14,.35); z-index:35; opacity:0; pointer-events:none; transition: opacity .2s ease;
  }
  .overlay-scrim.show{ opacity:1; pointer-events:auto; }
  @media (min-width: 981px){ .overlay-scrim{ display:none; } }