/* ============================================================
   KURA — Layout
   kura-layout-legacy.css — v1.2
   Legacy shell — used only by login.php and pages/settings.php.
   Page-specific structural CSS. Each section scoped by page class.
   No component styles — those live in kura-components-legacy.css.
   ============================================================ */

/* ============================================================
   APP SHELL
   ============================================================ */
.kura-app {
    display: flex;
    min-height: 100vh;
}

.kura-main {
    flex: 1;
    margin-left: var(--sidebar-w);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .kura-main {
        margin-left: 0;
        padding-bottom: 56px;
    }
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.kura-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: var(--sp-5);
}

.kura-login-box {
    width: min(360px, 100%);
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

.kura-login-box__brand {
    text-align: center;
}

.kura-login-box__wordmark {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--ink);
    letter-spacing: 0.04em;
    line-height: 1;
}

.kura-login-box__wordmark span {
    color: var(--accent);
}

.kura-login-box__tagline {
    font-size: var(--t-meta);
    color: var(--ink3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: var(--sp-2);
}

.kura-login-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.kura-login-error {
    font-size: var(--t-body);
    color: var(--accent);
    text-align: center;
    padding: var(--sp-2) var(--sp-3);
    background: rgba(232, 64, 16, 0.06);
    border: 1px solid rgba(232, 64, 16, 0.2);
}

/* ============================================================
   DASHBOARD PAGE (.page-dashboard)
   ============================================================ */

.kura-date-display {
    font-size: var(--t-meta);
    color: var(--ink3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Quick Add bar */
.dash-quick-add {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--div);
    margin-bottom: var(--sp-6);
    flex-wrap: wrap;
}

.dash-quick-add__label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink3);
    margin-right: var(--sp-1);
}

.dash-quick-add__btn {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--ink2);
    border: 1px solid var(--div);
    background: transparent;
    padding: 6px 14px;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.12s, color 0.12s;
}

.dash-quick-add__btn:hover {
    border-color: var(--ink3);
    color: var(--ink);
}

.dash-quick-add__btn--accent {
    border-color: var(--accent);
    color: var(--accent);
}

.dash-quick-add__btn--accent:hover {
    background: var(--accent);
    color: #fff;
}

/* Two-column grid */
.dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-7);
    align-items: start;
}

.dash-col {
    display: flex;
    flex-direction: column;
}

/* Section header */
.dash-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--div);
    margin-bottom: var(--sp-1);
}

.dash-section-head__title {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink3);
}

.dash-section-head__link {
    font-size: 12px;
    color: var(--ink3);
    text-decoration: none;
    transition: color 0.12s;
}

.dash-section-head__link:hover {
    color: var(--ink2);
}

/* Dashboard vault row */
.dash-vault-row {
    padding: var(--sp-3) var(--sp-3);
    margin: 0 calc(-1 * var(--sp-3));
}

.dash-col .kura-badge {
    font-size: 12px;
    padding: 3px 10px;
}

/* Task complete button */
.dash-task-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    border-bottom: 1px solid var(--div);
    padding: 0 var(--sp-2) 0 0;
    transition: background 0.12s ease;
}

.dash-task-row:last-child {
    border-bottom: none;
}

.dash-task-row:hover {
    background: var(--s1);
}

.dash-task-complete {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1px solid var(--ink3);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.12s, background 0.12s;
    padding: 0;
    margin-left: var(--sp-2);
}

.dash-task-complete:hover {
    border-color: var(--accent);
    background: var(--accent);
}

.dash-task-complete:hover::after {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

.dash-task-link {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    text-decoration: none;
    color: inherit;
}

.dash-task-link .kura-row__title {
    font-size: 15px;
    color: var(--ink);
}

.dash-task-link .kura-row__meta {
    font-size: 12px;
    color: var(--ink3);
    margin-top: 3px;
}

/* Vault row action — minimal arrow / copy */
.dash-vault-action {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--ink3);
    text-decoration: none;
    padding: 0 var(--sp-2);
    line-height: 1;
    transition: color 0.12s ease;
}

.dash-vault-action:hover { color: var(--ink); }

/* High priority row — subtle left accent on dashboard */
.dash-task-row--high .dash-task-link .kura-row__title {
    font-weight: 600;
}

/* Priority flash in dashboard title */
.dash-priority-high {
    color:        var(--accent);
    font-size:    13px;
    margin-right: 3px;
    vertical-align: middle;
    position:     relative;
    top:          -1px;
}

/* Vault field rows in dashboard — compact multi-line preview */
.dash-vault-field-row {
    display:   flex;
    gap:       4px;
    flex-wrap: nowrap;
    overflow:  hidden;
}

.dash-vault-field-label {
    font-weight: 500;
    color:       var(--ink3);
    flex-shrink: 0;
}

.dash-vault-masked {
    font-family:    monospace;
    letter-spacing: 0.06em;
    color:          var(--ink3);
}

@media (max-width: 768px) {
    .dash-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
    }
}

/* ============================================================
   TASK LIST PAGE (.page-tasks)
   ============================================================ */
.kura-filter-tabs {
    display: flex;
    gap: var(--sp-1);
    padding: var(--sp-4) 0;
    flex-wrap: wrap;
}

.kura-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    font-family: var(--font-body);
    font-size: var(--t-body);
    font-weight: 400;
    color: var(--ink3);
    text-decoration: none;
    border: 1px solid transparent;
    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease;
}

.kura-filter-tab:hover {
    color: var(--ink2);
    background: var(--s1);
}

.kura-filter-tab.active {
    color: var(--ink);
    font-weight: 500;
    border-color: var(--div);
    background: var(--surface);
}

.page-tasks .kura-drawer-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.kura-list-container {
    background: var(--surface);
    border: 1px solid var(--div);
}

.kura-task-row {
    align-items: center;
}

.kura-task-check {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--ink3);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
    line-height: 1;
    padding: 0;
}

.kura-task-check:hover {
    color: var(--accent);
}
.kura-task-check--today {
    color: var(--accent);
}

.kura-task-row__right {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

.kura-task-edit {
    font-size: 14px;
    height: 28px;
    padding: 0 var(--sp-2);
    color: var(--ink3);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.kura-task-row:hover .kura-task-edit {
    opacity: 1;
}

/* ============================================================
   PET PAGES (.page-pets, .page-pet-detail)
   ============================================================ */
.kura-pet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
}

@media (max-width: 1024px) {
    .kura-pet-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .kura-pet-grid { grid-template-columns: 1fr; }
}

.kura-pet-card {
    background: var(--surface);
    border: 1px solid var(--div);
    padding: var(--sp-5);
    cursor: pointer;
    transition: border-color 0.15s ease;
    text-decoration: none;
    display: block;
    color: inherit;
}

.kura-pet-card:hover {
    border-color: var(--ink3);
}

.kura-pet-card__name {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1;
}

.kura-pet-card__species {
    font-size: var(--t-meta);
    color: var(--ink3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: var(--sp-1);
}

.kura-pet-card__meta {
    margin-top: var(--sp-4);
    font-size: var(--t-body);
    color: var(--ink2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.kura-pet-detail {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--sp-6);
    align-items: start;
}

@media (max-width: 900px) {
    .kura-pet-detail {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   CONTACT LIST PAGE (.page-contacts)
   ============================================================ */
.kura-contacts-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--sp-5);
    align-items: start;
}

.kura-contact-filters {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.kura-filter-btn {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--t-body);
    font-weight: 400;
    color: var(--ink2);
    cursor: pointer;
    border: none;
    background: transparent;
    text-align: left;
    transition: background 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kura-filter-btn:hover {
    background: var(--s1);
}
.kura-filter-btn.active {
    background: var(--s2);
    color: var(--ink);
    font-weight: 500;
}

@media (max-width: 768px) {
    .kura-contacts-layout {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   QUICK ACCESS PAGE (.page-quick-access) — legacy, kept for safety
   ============================================================ */
.kura-qa-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
}

@media (max-width: 1024px) {
    .kura-qa-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .kura-qa-grid { grid-template-columns: 1fr; }
}

.kura-qa-item {
    background: var(--surface);
    border: 1px solid var(--div);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.kura-qa-item__category {
    font-size: var(--t-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink3);
}

.kura-qa-item__title {
    font-size:     var(--t-body);
    font-weight:   500;
    color:         var(--ink);
    margin-bottom: 2px;
}

.kura-qa-item__value {
    font-size: 10px;
    color: var(--ink2);
    word-break: break-all;
    padding: var(--sp-2) var(--sp-3);
    background: var(--s1);
    font-family: monospace;
    letter-spacing: 0.03em;
}

.kura-qa-item__actions {
    display: flex;
    gap: var(--sp-2);
    margin-top: auto;
}

/* ============================================================
   DRAWER SHELL
   ============================================================ */
.kura-drawer-shell {
    min-height: calc(100vh - 64px);
}

/* ============================================================
   PET DETAIL — event log + profile fields
   ============================================================ */
.kura-event-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--div);
    transition: background 0.1s ease;
}

.kura-event-row:last-child {
    border-bottom: none;
}
.kura-event-row:hover {
    background: var(--s1);
}

.kura-event-row__type {
    flex-shrink: 0;
    padding-top: 1px;
}

.kura-event-row__main {
    flex: 1;
    min-width: 0;
}

.kura-event-row__title {
    font-size: var(--t-body);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.4;
}

.kura-event-row__detail {
    font-size: var(--t-body);
    color: var(--ink2);
    line-height: 1.5;
    margin-top: var(--sp-1);
    white-space: pre-line;
}

.kura-event-row__attachment {
    display: inline-block;
    margin-top: var(--sp-1);
    font-size: var(--t-meta);
    color: var(--ink3);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kura-event-row__attachment:hover {
    color: var(--ink2);
}

.kura-event-row__right {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

.kura-event-row__date {
    font-size: var(--t-meta);
    color: var(--ink3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.kura-event-row__delete {
    opacity: 0;
    transition: opacity 0.15s ease;
    color: var(--ink3);
}

.kura-event-row:hover .kura-event-row__delete {
    opacity: 1;
}

.kura-pet-profile-fields {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.kura-profile-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
}

.kura-profile-row__label {
    font-size: var(--t-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink3);
    flex-shrink: 0;
}

.kura-profile-row__value {
    font-size: var(--t-body);
    color: var(--ink2);
    text-align: right;
}

/* ============================================================
   VAULT MODULE (.page-vault, .page-vault-detail)
   ============================================================ */

/* Card link decoration */
.kura-qa-item--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.kura-qa-item--link:hover {
    border-color: var(--ink3);
}

.kura-qa-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Pinned indicator — subtle accent top border on the card */
.kura-qa-item--pinned {
    border-top: 2px solid var(--accent);
}

.kura-qa-item__pin {
    display: none; /* hidden — visual handled by border on card */
}

.kura-qa-item__notes {
    font-size: var(--t-meta);
    color: var(--ink3);
    line-height: 1.4;
}

/* Vault detail layout */
.kura-vault-detail {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    max-width: 720px;
}

.kura-vault-detail__card {
    background: var(--surface);
    border: 1px solid var(--div);
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.kura-vault-detail__meta {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.kura-vault-detail__section-label {
    font-family: var(--font-body);
    font-size: var(--t-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink3);
    display: flex;
    align-items: center;
    gap: 8px;
}

.kura-vault-detail__value-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.kura-vault-detail__value {
    font-family: var(--font-body);
    font-size: var(--t-body);
    color: var(--ink2);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    padding: var(--sp-3);
    background: var(--s1);
}

.kura-vault-detail__value--masked {
    font-family: monospace;
    letter-spacing: 0.12em;
    color: var(--ink3);
}

.kura-vault-detail__value-actions {
    display: flex;
    gap: var(--sp-2);
}

.kura-vault-detail__notes {
    font-family: var(--font-body);
    font-size: var(--t-body);
    color: var(--ink2);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.kura-vault-detail__timestamps {
    margin-top: var(--sp-2);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.kura-vault-detail__links {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/* ── Field builder rows (drawer) — stacked vertical layout ─── */
/* Row is a relative container. Inputs stack vertically.
   Remove button is absolute top-right so it doesn't affect flow. */
.vault-field-row {
    position:      relative;
    padding:       var(--sp-3) 32px var(--sp-3) 0;
    border-bottom: 1px solid var(--div);
    display:       flex;
    flex-direction: column;
    gap:           var(--sp-2);
}

.vault-field-row:last-child {
    border-bottom: none;
}

/* Label input — uppercase eyebrow style, transparent background */
.vault-field-row__label-input {
    font-size:      var(--t-label) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color:          var(--ink3) !important;
    background:     transparent !important;
    border:         none !important;
    border-bottom:  1px solid var(--div) !important;
    border-radius:  0 !important;
    padding:        2px 0 !important;
    height:         auto !important;
    box-shadow:     none !important;
    width:          100%;
}

.vault-field-row__label-input:focus {
    border-bottom-color: var(--ink2) !important;
    background:          transparent !important;
    outline:             none;
}

.vault-field-row__label-input::placeholder {
    font-size:      var(--t-label);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* Value input — standard full-weight input */
.vault-field-row__value-input {
    width: 100%;
    /* inherits .cal-vita-input styles */
}

/* Remove button — absolute, top-right of the row */
.vault-field-row__remove {
    position:    absolute;
    top:         50%;
    right:       0;
    transform:   translateY(-50%);
    background:  none;
    border:      none;
    color:       var(--ink3);
    font-size:   14px;
    cursor:      pointer;
    padding:     var(--sp-1);
    line-height: 1;
    transition:  color 0.15s;
}

.vault-field-row__remove:hover {
    color: var(--accent);
}

/* Drag states */
.vault-field-row--dragging {
    opacity: 0.4;
}
.vault-field-row--over {
    border-top: 2px solid var(--accent);
}

/* ── Vault card preview fields (list page) ──────────────────── */
.kura-qa-item__name {
    font-size: var(--t-meta);
    font-weight: 500;
    color: var(--ink2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Fields block — single flex child of the card, so parent gap fires once */
.kura-qa-item__fields-block {
    display:        flex;
    flex-direction: column;
    gap:            0;
}

.kura-qa-item__field-preview {
    display:     flex;
    gap:         4px;
    font-size:   var(--t-meta);
    color:       var(--ink3);
    flex-wrap:   wrap;
    line-height: 1.6;
}

.kura-qa-item__field-label {
    font-weight: 500;
    color: var(--ink3);
}

.kura-qa-item__field-value {
    color: var(--ink2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

/* ── Vault detail — typed field rendering ───────────────────── */
.kura-vault-detail__item-name {
    font-family: var(--font-display);
    font-size: var(--t-l2);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1;
    margin-bottom: var(--sp-2);
}

.kura-vault-detail__fields {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--div);
}

.kura-vault-detail__field {
    display: flex;
    align-items: baseline;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--div);
}

.kura-vault-detail__field:last-child {
    border-bottom: none;
}

.kura-vault-detail__field-label {
    font-size: var(--t-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink3);
    flex: 0 0 110px;
    padding-top: 1px;
}

.kura-vault-detail__field-value-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.kura-vault-detail__field-value {
    font-family: var(--font-body);
    font-size: var(--t-body);
    color: var(--ink2);
    word-break: break-word;
}

.kura-vault-detail__field-value--masked {
    font-family: monospace;
    letter-spacing: 0.1em;
    color: var(--ink3);
}

.kura-vault-detail__field-action {
    height: 24px;
    padding: 0 var(--sp-2);
    font-size: var(--t-label);
    flex-shrink: 0;
}

/* ============================================================
   SETTINGS PAGE (.page-settings)
   ============================================================ */
.page-settings .kura-content-shell {
    max-width: 720px;
}

.settings-section {
    padding: var(--sp-6) 0;
    border-bottom: 1px solid var(--div);
}
.settings-section:last-child {
    border-bottom: none;
}

.settings-desc {
    font-size: var(--t-body);
    color: var(--ink2);
    margin-top: var(--sp-3);
    line-height: 1.6;
    max-width: 560px;
}

.settings-integration-row {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-top: var(--sp-5);
    padding: var(--sp-4);
    background: var(--s1);
    border: 1px solid var(--div);
    flex-wrap: wrap;
}

.settings-integration-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.settings-integration-note {
    font-size: var(--t-body);
    color: var(--ink3);
}

.settings-integration-actions {
    flex-shrink: 0;
}

.settings-help {
    margin-top: var(--sp-4);
}

.settings-help-text {
    font-size: var(--t-body);
    color: var(--ink3);
    line-height: 1.6;
}

.settings-help-text code {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    background: var(--s2);
    padding: 1px 4px;
    color: var(--ink2);
}

.kura-badge--success {
    background: #e8f5e9;
    color: #2e7d32;
}

.settings-setup-guide {
    margin-top: var(--sp-5);
    border: 1px solid var(--div);
}

.settings-setup-summary {
    font-size: var(--t-body);
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    color: var(--ink2);
    padding: var(--sp-3) var(--sp-4);
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.settings-setup-summary::-webkit-details-marker { display: none; }
.settings-setup-summary::before { content: '▸ '; font-size: 10px; color: var(--ink3); }
details[open] .settings-setup-summary::before { content: '▾ '; }

.settings-setup-body {
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
    border-top: 1px solid var(--div);
}

.settings-setup-steps {
    font-size: var(--t-body);
    color: var(--ink2);
    line-height: 1.8;
    padding-left: var(--sp-5);
}
.settings-setup-steps li { margin-bottom: var(--sp-2); }
.settings-setup-steps a { color: var(--accent); text-decoration: none; }
.settings-setup-steps a:hover { text-decoration: underline; }
.settings-setup-steps strong { color: var(--ink); font-weight: 500; }
.settings-setup-steps code {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    background: var(--s2);
    padding: 1px 4px;
    color: var(--ink2);
}

.settings-code-block {
    background: var(--s2);
    border: 1px solid var(--div);
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: var(--ink2);
    padding: var(--sp-4);
    margin-top: var(--sp-3);
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.8;
}

.kura-flash {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--t-body);
    margin-bottom: var(--sp-5);
    border: 1px solid var(--div);
}
.kura-flash--success {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #c8e6c9;
}
.kura-flash--error {
    background: #fce4ec;
    color: #c62828;
    border-color: #f8bbd0;
}

/* ── Inline field (label + checkbox on same row) ────────────── */
.kura-field--inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: var(--sp-3);
}

.kura-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

.kura-field__hint {
    font-size: var(--t-meta);
    color: var(--ink3);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}