:root{
  /* V2D palette (from your app & brand pack) */
  --v2d-green: #9cdc4f;      /* RGBA(156,220,79,1) */
  --v2d-green-strong:#8bc53f;
  --v2d-blue:  #0566b2;      /* RGBA(5,102,178,1) */
  --v2d-navy:  #2c5aa0;      /* RGBA(44,90,160,1) */
  --v2d-bg:    #f6f8fb;
  --v2d-text:  #1e293b;
  --v2d-muted: #667085;
  --v2d-border:#d0d5dd;
  --radius: 12px;
  --shadow: 0 6px 20px rgba(2, 26, 77, .08);
}

/* Reset-ish */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--v2d-text);
  background: var(--v2d-bg);
  line-height: 1.45;
}

/* Header */
.v2d-header{
  background: linear-gradient(135deg, var(--v2d-navy), var(--v2d-blue));
  color: #fff;
  padding: 20px 20px;
  box-shadow: var(--shadow);
}
.v2d-header .brand{
  display:flex; align-items:center; gap:16px; max-width:1100px; margin:0 auto;
}
.v2d-header .logo{ height:75px; width:auto; }
.v2d-header .titles h1{ margin:0; font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; letter-spacing:.2px; }
.v2d-header .subtitle{ margin:2px 0 0; opacity:.85; font-size:14px; }

/* Main layout */
.v2d-main{ max-width:1100px; margin: 18px auto 24px; padding: 0 16px; }

/* Status banners (hidden by default; JS toggles classes) */
.status { 
  display:none; margin: 12px 0 20px; padding: 12px 14px; 
  border-radius: 8px; border: 1px solid transparent;
}
.status.status-warning { 
  display:block; background:#fff6e5; border-color:#ffd18a; color:#6b4e00; 
}
.status.status-success { 
  display:block; background:#eafaf1; border-color:#9fe3bf; color:#0a5c2e; 
}
.status.status-error { 
  display:block; background:#fdeaea; border-color:#f3a8a8; color:#7a0f0f; 
}

/* Form */
.v2d-form{
  display:grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 14px;
  background:#fff; padding:20px;
  border: 1px solid var(--v2d-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.row{ display:flex; flex-direction:column; }

label{ 
  font-size:12px; font-weight:600; color:#344054; margin-bottom:6px; 
}

input, select {
  padding:10px 12px;
  border:1px solid var(--v2d-border);
  border-radius:10px;
  background:#fff;
  font-size:16px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
input::placeholder{ color:#98a2b3; }
input:focus, select:focus{
  border-color: var(--v2d-navy);
  box-shadow: 0 0 0 3px rgba(44,90,160,.15);
}

/* Improve select look on iOS/Safari slightly */
select {
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #7c8aa0 50%),
    linear-gradient(135deg, #7c8aa0 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(1em - 2px),
    calc(100% - 13px) calc(1em - 2px),
    calc(100% - 2.4em) 0.5em;
  background-size: 6px 6px, 6px 6px, 0 0;
  background-repeat: no-repeat;
}

/* Buttons / actions */
.full{ grid-column: 1 / -1; }
.actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

.btn-primary{
  background: var(--v2d-green-strong);
  color:#0b1b1f;
  border:0; border-radius: 999px;
  padding: 12px 20px;
  font-weight:700;
  cursor:pointer;
  box-shadow: 0 6px 14px rgba(26, 130, 44, .18);
  transition: transform .05s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 20px rgba(26,130,44,.22); }
.btn-primary:active{ transform: translateY(0); }
.btn-primary:disabled{ opacity: .55; cursor:not-allowed; }

.hint{ font-size:12px; color: var(--v2d-muted); margin:0; }

/* Footer */
.v2d-footer{
  text-align:center; color: #94a3b8; font-size:12px; padding: 16px;
}

/* Responsive */
@media (max-width: 1100px){
  .v2d-form{ grid-template-columns: repeat(3, minmax(200px,1fr)); }
}
@media (max-width: 820px){
  .v2d-form{ grid-template-columns: repeat(2, minmax(180px,1fr)); }
}
@media (max-width: 540px){
  .v2d-header{ padding:16px 14px; }
  .v2d-main{ padding: 0 12px; }
  .v2d-form{ grid-template-columns: 1fr; padding:16px; }
  .btn-primary{ width:100%; justify-content:center; }
}