:root {
  --iod-ink: #172033;
  --iod-muted: #667085;
  --iod-line: #e6eaf0;
  --iod-surface: #ffffff;
  --iod-soft: #f6f8fb;
  --iod-brand: #6c4cf1;
  --iod-brand-dark: #5134cc;
  --iod-success: #16875b;
  --iod-danger: #c43d4b;
}

.iod-auth-page,
.iod-signup-page,
.iod-portal-page {
  min-height: calc(100vh - 80px);
  padding: 130px 0 80px;
  background:
    radial-gradient(circle at 10% 5%, rgba(108, 76, 241, .10), transparent 28rem),
    linear-gradient(180deg, #fbfcff 0%, #f5f7fb 100%);
}

.iod-auth-card,
.iod-signup-shell,
.iod-portal-panel {
  background: var(--iod-surface);
  border: 1px solid var(--iod-line);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(26, 34, 55, .08);
}

.iod-auth-card { width: min(100%, 510px); margin: 0 auto; padding: 44px; }
.iod-signup-shell { width: min(100%, 940px); margin: 0 auto; padding: 44px; }
.iod-auth-heading, .iod-signup-header { text-align: center; margin-bottom: 30px; }
.iod-auth-heading h1, .iod-signup-header h1, .iod-portal-heading h1 { color: var(--iod-ink); font-size: clamp(2rem, 4vw, 3rem); margin: 7px 0 10px; }
.iod-auth-heading p, .iod-signup-header p, .iod-portal-heading p { color: var(--iod-muted); margin: 0; }
.iod-portal-eyebrow { color: var(--iod-brand); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.iod-auth-switch { color: var(--iod-muted); text-align: center; margin: 24px 0 0; }
.iod-auth-switch a { color: var(--iod-brand); font-weight: 700; }

.iod-signup-progress { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0 0 38px; padding: 0; position: relative; }
.iod-signup-progress::before { background: var(--iod-line); content: ""; height: 3px; left: 12.5%; position: absolute; right: 12.5%; top: 18px; }
.iod-signup-progress li { align-items: center; color: #98a2b3; display: flex; flex-direction: column; font-weight: 700; gap: 6px; position: relative; z-index: 1; }
.iod-signup-progress li span { align-items: center; background: #eef1f6; border: 4px solid #fff; border-radius: 50%; display: flex; height: 40px; justify-content: center; width: 40px; }
.iod-signup-progress li.is-active span, .iod-signup-progress li.is-complete span { background: var(--iod-brand); color: #fff; }
.iod-signup-progress li.is-active small, .iod-signup-progress li.is-complete small { color: var(--iod-ink); }
.iod-signup-stage { display: none; }
.iod-signup-stage.is-active { animation: iod-stage-in .22s ease; display: block; }
@keyframes iod-stage-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.iod-stage-heading { margin-bottom: 25px; }
.iod-stage-heading span { color: var(--iod-brand); font-size: .8rem; font-weight: 800; text-transform: uppercase; }
.iod-stage-heading h2 { color: var(--iod-ink); font-size: 1.65rem; margin: 5px 0; }
.iod-stage-heading p { color: var(--iod-muted); margin: 0; }
.iod-stage-actions { align-items: center; display: flex; justify-content: space-between; margin-top: 30px; }
.iod-stage-actions.end { justify-content: flex-end; }

.iod-form-grid { display: grid; gap: 18px; }
.iod-form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.iod-form-grid.item-grid { grid-template-columns: 2fr .7fr 1fr; }
.iod-form-grid .full { grid-column: 1 / -1; }
.iod-form-sections { display: flex; flex-direction: column; gap: 18px; }
.iod-form-card { background: var(--iod-soft); border: 1px solid var(--iod-line); border-radius: 15px; padding: 20px; }
.iod-form-card-heading { align-items: center; display: flex; gap: 11px; margin-bottom: 17px; }
.iod-form-card-heading > i { align-items: center; background: #eeeaff; border-radius: 10px; color: var(--iod-brand); display: flex; flex: 0 0 auto; font-size: 1rem; height: 38px; justify-content: center; width: 38px; }
.iod-form-card-heading h3 { color: var(--iod-ink); font-size: 1rem; margin: 0 0 2px; }
.iod-form-card-heading p { color: var(--iod-muted); font-size: .8rem; margin: 0; }
.iod-form-card .iod-field + .iod-check-field { margin-top: 18px; }
.iod-form-card .iod-form-grid + .iod-check-field { margin-top: 18px; }
.iod-address-line { display: grid; gap: 18px; grid-template-columns: minmax(0, 3fr) minmax(140px, 1fr); }
.iod-locality-line { display: grid; gap: 18px; grid-template-columns: minmax(0, 2fr) minmax(100px, .7fr) minmax(120px, .8fr); margin-top: 18px; }
.iod-address-extra-line { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
.iod-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.iod-field label { color: #344054; font-size: .88rem; font-weight: 700; }
.iod-field input, .iod-field select, .iod-field textarea,
.iod-filter-bar input, .iod-filter-bar select {
  background: #fff; border: 1px solid #d7dce5; border-radius: 11px; color: var(--iod-ink); font: inherit; min-height: 48px; padding: 11px 13px; transition: border-color .15s, box-shadow .15s;
}
.iod-field textarea { resize: vertical; }
.iod-field input:focus, .iod-field select:focus, .iod-field textarea:focus, .iod-filter-bar input:focus, .iod-filter-bar select:focus { border-color: var(--iod-brand); box-shadow: 0 0 0 4px rgba(108, 76, 241, .11); outline: 0; }
.iod-field small { color: var(--iod-muted); font-size: .78rem; }
.iod-field small a { color: var(--iod-brand); font-weight: 700; }
.field-validation-error, .iod-validation-summary { color: var(--iod-danger); font-size: .82rem; font-weight: 600; }
.iod-validation-summary:empty, .iod-validation-summary.valid-validation-summary { display: none; }
.iod-validation-summary ul { margin: 0 0 20px; padding-left: 18px; }

.iod-primary-button, .iod-secondary-button, .iod-danger-button, .iod-filter-button {
  align-items: center; border: 0; border-radius: 11px; cursor: pointer; display: inline-flex; font-weight: 800; gap: 8px; justify-content: center; line-height: 1.2; min-height: 46px; padding: 12px 18px; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s;
}
.iod-primary-button { background: var(--iod-brand); color: #fff; box-shadow: 0 8px 20px rgba(108, 76, 241, .22); }
.iod-primary-button:hover { background: var(--iod-brand-dark); color: #fff; transform: translateY(-1px); }
.iod-secondary-button { background: #eef0f5; color: #344054; }
.iod-secondary-button:hover { background: #e2e5ec; color: var(--iod-ink); }
.iod-danger-button { background: #fff0f1; color: var(--iod-danger); }
.iod-danger-button:hover { background: #ffe2e5; color: #9e2734; }
.iod-filter-button { background: var(--iod-ink); color: #fff; }
.iod-full-button { width: 100%; }

.iod-portal-nav { align-items: center; background: #fff; border: 1px solid var(--iod-line); border-radius: 16px; display: flex; gap: 5px; margin-bottom: 34px; overflow-x: auto; padding: 8px; box-shadow: 0 8px 26px rgba(26, 34, 55, .05); }
.iod-portal-nav a, .iod-portal-nav button { align-items: center; background: transparent; border: 0; border-radius: 10px; color: #667085; display: flex; font: inherit; font-size: .86rem; font-weight: 700; gap: 7px; padding: 10px 13px; text-decoration: none; white-space: nowrap; }
.iod-portal-nav a:hover, .iod-portal-nav a.is-active, .iod-portal-nav button:hover { background: #f0edff; color: var(--iod-brand); }
.iod-portal-nav form { margin-left: auto; }
.iod-portal-heading { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 28px; }
.iod-portal-heading h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.iod-heading-with-action { gap: 25px; }
.iod-portal-alert { align-items: center; border-radius: 12px; display: flex; font-weight: 700; gap: 9px; margin: -15px 0 24px; padding: 13px 16px; }
.iod-portal-alert.is-success { background: #eaf8f2; color: var(--iod-success); }
.iod-portal-alert.is-error { background: #fff0f1; color: var(--iod-danger); }

.iod-dashboard-cards { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.iod-dashboard-card { align-items: center; background: #fff; border: 1px solid var(--iod-line); border-radius: 20px; color: inherit; display: grid; gap: 18px; grid-template-columns: auto 1fr auto; min-height: 155px; padding: 26px; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.iod-dashboard-card:hover { border-color: #c9c0fa; box-shadow: 0 18px 40px rgba(31, 42, 68, .10); color: inherit; transform: translateY(-3px); }
.iod-dashboard-card h2 { color: var(--iod-ink); font-size: 1.15rem; margin: 0 0 7px; }
.iod-dashboard-card p { color: var(--iod-muted); font-size: .9rem; margin: 0; }
.iod-card-icon, .iod-section-icon { align-items: center; border-radius: 15px; display: flex; flex: 0 0 auto; height: 54px; justify-content: center; width: 54px; }
.iod-card-icon i, .iod-section-icon i { font-size: 1.45rem; }
.violet { background: #eeeaff; color: #6c4cf1; }.blue { background: #e7f2ff; color: #2674d9; }.green { background: #e5f7ef; color: #16875b; }.amber { background: #fff3d8; color: #b96b00; }.rose { background: #ffe9ec; color: #c43d62; }
.iod-card-arrow { color: #98a2b3; font-size: 1.2rem; }
.iod-dashboard-card:last-child { grid-column: 1 / -1; }

.iod-portal-panel { margin-bottom: 24px; padding: 28px; }
.iod-panel-heading { align-items: center; border-bottom: 1px solid var(--iod-line); display: flex; gap: 15px; margin-bottom: 24px; padding-bottom: 20px; }
.iod-panel-heading h2 { color: var(--iod-ink); font-size: 1.25rem; margin: 0 0 4px; }
.iod-panel-heading p { color: var(--iod-muted); font-size: .86rem; margin: 0; }
.iod-panel-actions { border-top: 1px solid var(--iod-line); display: flex; justify-content: flex-end; margin-top: 24px; padding-top: 20px; }
.iod-panel-actions.split { justify-content: space-between; }
.iod-action-group { display: flex; gap: 10px; }
.iod-check-field { align-items: flex-start; background: var(--iod-soft); border: 1px solid var(--iod-line); border-radius: 11px; display: flex; gap: 11px; padding: 13px; }
.iod-check-field input { accent-color: var(--iod-brand); height: 18px; margin-top: 2px; width: 18px; }
.iod-check-field span { display: flex; flex-direction: column; }.iod-check-field strong { color: var(--iod-ink); }.iod-check-field small { color: var(--iod-muted); }
.iod-save-all { align-items: center; background: var(--iod-ink); border-radius: 18px; color: #fff; display: flex; justify-content: space-between; margin-top: 30px; padding: 24px; }
.iod-save-all div { display: flex; flex-direction: column; }.iod-save-all span { color: #cbd2df; font-size: .85rem; }

.iod-management-layout { align-items: start; display: grid; gap: 24px; grid-template-columns: minmax(320px, .85fr) minmax(420px, 1.15fr); }
.iod-filter-bar { display: flex; gap: 10px; margin-bottom: 18px; }.iod-filter-bar select { min-width: 135px; }
.iod-search-input { flex: 1; position: relative; }.iod-search-input i { color: #98a2b3; left: 13px; position: absolute; top: 15px; }.iod-search-input input { padding-left: 38px; width: 100%; }
.iod-record-list { display: flex; flex-direction: column; gap: 8px; max-height: 740px; overflow-y: auto; }
.iod-record-row { align-items: center; border: 1px solid var(--iod-line); border-radius: 13px; color: inherit; display: flex; gap: 11px; padding: 13px; text-decoration: none; transition: background .15s, border-color .15s; }
.iod-record-row:hover, .iod-record-row.is-selected { background: #f7f5ff; border-color: #cfc5fb; color: inherit; }
.iod-record-main { display: flex; flex: 1; flex-direction: column; min-width: 0; }.iod-record-main strong { color: var(--iod-ink); }.iod-record-main small { color: var(--iod-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iod-record-price { color: var(--iod-ink); font-weight: 800; }.iod-status-dot { background: #c8cdd5; border-radius: 50%; height: 9px; width: 9px; }.iod-status-dot.is-active { background: #22a06b; }
.iod-avatar { align-items: center; background: #eeeaff; border-radius: 10px; color: var(--iod-brand); display: flex; font-weight: 800; height: 38px; justify-content: center; width: 38px; }
.iod-status-pill { background: #eef1f5; border-radius: 999px; color: #526074; display: inline-flex; font-size: .74rem; font-weight: 800; padding: 5px 9px; white-space: nowrap; }
.iod-status-pill.is-active { background: #e5f7ef; color: var(--iod-success); }.iod-status-pill.is-error { background: #fff0f1; color: var(--iod-danger); }
.iod-money-input { align-items: center; display: flex; position: relative; }.iod-money-input span { color: var(--iod-muted); left: 14px; position: absolute; }.iod-money-input input { padding-left: 30px; width: 100%; }
.iod-customer-picker { background: #f8f7ff; border: 1px solid #ddd7ff; border-radius: 16px; margin-bottom: 22px; padding: 20px; }
.iod-customer-picker-heading { align-items: center; display: flex; gap: 13px; margin-bottom: 18px; }
.iod-customer-picker-heading .iod-section-icon { height: 46px; width: 46px; }
.iod-customer-picker-heading h3 { color: var(--iod-ink); font-size: 1.05rem; margin: 0 0 3px; }
.iod-customer-picker-heading p { color: var(--iod-muted); font-size: .84rem; margin: 0; }
.iod-customer-search-row { align-items: stretch; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; }
.iod-customer-search-row .iod-filter-button { min-width: 112px; }
.iod-customer-results-field { margin-top: 16px; }
.iod-selected-customer { align-items: center; background: #fff; border: 1px solid #cfc5fb; border-radius: 11px; display: flex; gap: 11px; margin-top: 16px; padding: 12px 14px; }
.iod-selected-customer > i { color: var(--iod-success); font-size: 1.35rem; }
.iod-selected-customer div { display: flex; flex: 1; flex-direction: column; }
.iod-selected-customer small { color: var(--iod-muted); font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.iod-selected-customer strong { color: var(--iod-ink); }
.iod-selected-customer button { background: transparent; border: 0; color: var(--iod-brand); cursor: pointer; font: inherit; font-size: .8rem; font-weight: 800; }
.iod-selected-customer.is-empty { border-color: var(--iod-line); }
.iod-selected-customer.is-empty > i { color: #98a2b3; }
.iod-customer-add-link { color: var(--iod-muted); display: block; font-size: .78rem; margin-top: 11px; }
.iod-customer-add-link a { color: var(--iod-brand); font-weight: 700; }
.iod-empty-state { color: var(--iod-muted); padding: 50px 20px; text-align: center; }.iod-empty-state > i { color: #b8aefa; font-size: 2.5rem; }.iod-empty-state h2 { color: var(--iod-ink); font-size: 1.2rem; margin: 14px 0 6px; }.iod-empty-state p { margin: 0 0 18px; }

.iod-filter-grid { align-items: end; display: grid; gap: 14px; grid-template-columns: 1.4fr 1fr .8fr .8fr auto; }
.iod-table-panel { padding: 0; overflow: hidden; }.iod-data-table { border-collapse: collapse; margin: 0; width: 100%; }.iod-data-table th { background: #f8f9fb; color: #667085; font-size: .74rem; letter-spacing: .05em; padding: 13px 18px; text-align: left; text-transform: uppercase; }.iod-data-table td { border-top: 1px solid var(--iod-line); color: #475467; padding: 16px 18px; vertical-align: middle; }.iod-data-table td strong { color: var(--iod-ink); }.iod-table-action { color: var(--iod-brand); font-weight: 800; white-space: nowrap; }.iod-table-note { color: var(--iod-muted); display: block; margin-top: 4px; max-width: 360px; }
.iod-icon-danger { background: #fff0f1; border: 0; border-radius: 8px; color: var(--iod-danger); height: 34px; width: 34px; }
.iod-add-item-form { background: var(--iod-soft); border: 1px solid var(--iod-line); border-radius: 15px; margin-top: 22px; padding: 20px; }.iod-add-item-form > h3 { color: var(--iod-ink); font-size: 1rem; margin: 0 0 15px; }.iod-add-item-form > button { margin-top: 16px; }
.iod-order-totals { margin: 22px 0 0 auto; max-width: 350px; }.iod-order-totals div { display: flex; justify-content: space-between; padding: 7px 0; }.iod-order-totals dt { color: var(--iod-muted); }.iod-order-totals dd { color: var(--iod-ink); font-weight: 800; margin: 0; }.iod-order-totals .total { border-top: 2px solid var(--iod-line); font-size: 1.15rem; margin-top: 6px; padding-top: 13px; }
.iod-next-step { align-items: center; background: #eef6ff; border-radius: 13px; color: #285a91; display: flex; gap: 10px; padding: 16px; }
.iod-order-steps { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 24px; }
.iod-order-steps > a, .iod-order-steps > span { align-items: center; background: #fff; border: 1px solid var(--iod-line); border-radius: 15px; color: inherit; display: flex; gap: 12px; padding: 15px 17px; text-decoration: none; }
.iod-order-steps > a > span, .iod-order-steps > span > span { align-items: center; background: #eef1f5; border-radius: 50%; color: #667085; display: flex; flex: 0 0 auto; font-weight: 800; height: 34px; justify-content: center; width: 34px; }
.iod-order-steps div { display: flex; flex-direction: column; }
.iod-order-steps strong { color: var(--iod-ink); font-size: .9rem; }
.iod-order-steps small { color: var(--iod-muted); font-size: .74rem; }
.iod-order-steps .is-active { background: #f7f5ff; border-color: #cfc5fb; }
.iod-order-steps .is-active > span { background: var(--iod-brand); color: #fff; }
.iod-order-steps .is-disabled { opacity: .6; }
.iod-order-catalog-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.iod-order-catalog-card { background: #fff; border: 1px solid var(--iod-line); border-radius: 16px; display: flex; flex-direction: column; min-width: 0; padding: 18px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.iod-order-catalog-card.is-selected { border-color: var(--iod-brand); box-shadow: 0 12px 28px rgba(108, 76, 241, .12); transform: translateY(-2px); }
.iod-order-product-check { align-items: center; color: var(--iod-muted); cursor: pointer; display: flex; font-size: .78rem; font-weight: 800; gap: 8px; margin-bottom: 15px; width: fit-content; }
.iod-order-product-check input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.iod-order-product-check span { align-items: center; background: #fff; border: 2px solid #c8ced8; border-radius: 6px; color: transparent; display: flex; height: 24px; justify-content: center; width: 24px; }
.iod-order-product-check input:focus-visible + span { box-shadow: 0 0 0 4px rgba(108, 76, 241, .14); }
.iod-order-product-check input:checked + span { background: var(--iod-brand); border-color: var(--iod-brand); color: #fff; }
.iod-order-product-content { flex: 1; }
.iod-order-product-content h3 { color: var(--iod-ink); font-size: 1.05rem; margin: 13px 0 6px; }
.iod-order-product-content p { color: var(--iod-muted); font-size: .82rem; margin: 0 0 13px; }
.iod-order-product-price { color: var(--iod-ink); font-size: 1.08rem; }
.iod-order-product-quantity { margin-top: 17px; }
.iod-order-product-line { align-items: center; border-top: 1px solid var(--iod-line); color: var(--iod-muted); display: flex; font-size: .8rem; justify-content: space-between; margin-top: 16px; padding-top: 13px; }
.iod-order-product-line strong { color: var(--iod-ink); }
.iod-order-calculation-card { background: var(--iod-ink); border-radius: 16px; color: #fff; margin: 24px 0 0 auto; max-width: 410px; padding: 20px; }
.iod-order-calculation-card div { display: flex; justify-content: space-between; padding: 6px 0; }
.iod-order-calculation-card span { color: #cbd2df; }
.iod-order-calculation-card .total { border-top: 1px solid #4a556b; font-size: 1.12rem; margin-top: 7px; padding-top: 13px; }
.iod-order-calculation-card .total span, .iod-order-calculation-card .total strong { color: #fff; }
.iod-order-calculation-card small { color: #aeb8c8; display: block; font-size: .72rem; margin-top: 10px; }

@media (max-width: 1199px) {
  .iod-portal-page > .container, .iod-signup-page > .container { max-width: none; padding-left: 24px; padding-right: 24px; width: 100%; }
  .iod-management-layout { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
  .iod-filter-grid { grid-template-columns: repeat(2, 1fr); }
  .iod-filter-grid .iod-filter-button { grid-column: 1 / -1; }
  .iod-portal-nav span { display: none; }
  .iod-portal-nav a, .iod-portal-nav button { font-size: 1.1rem; justify-content: center; min-width: 42px; }
  .iod-order-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .iod-auth-page, .iod-signup-page, .iod-portal-page { padding: 105px 0 50px; }
  .iod-portal-page > .container, .iod-signup-page > .container { padding-left: 14px; padding-right: 14px; }
  .iod-auth-card, .iod-signup-shell, .iod-portal-panel { border-radius: 16px; padding: 20px; }
  .iod-form-grid.two, .iod-form-grid.item-grid, .iod-dashboard-cards { grid-template-columns: 1fr; }
  .iod-address-line, .iod-locality-line, .iod-address-extra-line { grid-template-columns: 1fr; }
  .iod-customer-search-row { grid-template-columns: minmax(0, 1fr) auto; }
  .iod-locality-line, .iod-address-extra-line { margin-top: 18px; }
  .iod-form-card { padding: 16px; }
  .iod-dashboard-card:last-child { grid-column: auto; }
  .iod-portal-heading, .iod-heading-with-action, .iod-save-all { align-items: stretch; flex-direction: column; gap: 17px; }
  .iod-portal-heading .iod-primary-button, .iod-save-all .iod-primary-button { width: 100%; }
  .iod-filter-grid { grid-template-columns: 1fr; }
  .iod-filter-grid .iod-filter-button { grid-column: auto; }
  .iod-filter-bar { flex-wrap: wrap; }.iod-search-input { flex-basis: 100%; }.iod-filter-bar select, .iod-filter-bar button { flex: 1; }
  .iod-stage-actions { gap: 10px; }.iod-stage-actions > * { flex: 1; }
  .iod-signup-progress small { font-size: .68rem; }
  .iod-order-steps, .iod-order-catalog-grid { grid-template-columns: 1fr; }
  .iod-panel-actions.split, .iod-action-group { align-items: stretch; flex-direction: column; gap: 10px; }
  .iod-panel-actions.split > *, .iod-action-group > * { width: 100%; }
  .iod-order-calculation-card { max-width: none; }
}