.surface-card { border: 1px solid rgb(255 255 255 / 78%); border-radius: var(--radius-lg); background: rgb(255 253 248 / 94%); box-shadow: var(--shadow-md); }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--color-teal-900); font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -.03em; }
.brand img { flex: 0 0 auto; filter: drop-shadow(0 5px 7px rgb(41 73 78 / 13%)); }
.brand strong { color: var(--color-plum-600); }
.brand-light { color: white; font-size: 1.5rem; }
.brand-light strong { color: var(--color-gold-200); }
.eyebrow { margin-bottom: .45rem; color: var(--color-teal-700); font-size: .76rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: .55rem; padding: .7rem 1.15rem; border: 0; border-radius: .9rem; cursor: pointer; font-weight: 800; transition: transform var(--transition), box-shadow var(--transition), background var(--transition); }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button:disabled { cursor: wait; opacity: .65; transform: none; }
.button-primary { background: linear-gradient(135deg, var(--color-teal-700), var(--color-teal-500)); color: #fff; box-shadow: 0 9px 20px rgb(23 111 114 / 23%); }
.button-primary:hover { box-shadow: 0 12px 25px rgb(23 111 114 / 31%); }
.button-gold { background: linear-gradient(135deg, #ffd66a, #f1a73a); color: #493718; box-shadow: 0 10px 24px rgb(168 105 25 / 24%); }
.button-quiet { border: 1px solid var(--color-line); background: #fff; color: var(--color-muted); }
.button-full { width: 100%; }
.icon-button { display: inline-grid; width: 2.6rem; height: 2.6rem; place-items: center; padding: 0; border: 1px solid var(--color-line); border-radius: .8rem; background: #fff; cursor: pointer; transition: background var(--transition), transform var(--transition); }
.icon-button:hover { background: var(--color-teal-100); transform: translateY(-1px); }
.text-button { padding: 0; border: 0; background: transparent; color: var(--color-teal-700); cursor: pointer; font-size: .82rem; font-weight: 800; }
.field { display: grid; gap: .4rem; }
.field-label, .field-label-row { color: var(--color-ink); font-size: .86rem; font-weight: 750; }
.field-label-row { display: flex; justify-content: space-between; gap: 1rem; }
.field-control { display: flex; min-height: 3rem; align-items: center; gap: .65rem; padding: 0 .85rem; border: 1.5px solid var(--color-line); border-radius: .85rem; background: #fff; transition: border-color var(--transition), box-shadow var(--transition); }
.field-control:focus-within { border-color: var(--color-teal-500); box-shadow: 0 0 0 4px rgb(46 155 146 / 12%); }
.field-control > span { width: 1.3rem; text-align: center; filter: saturate(.75); }
.field-control input { width: 100%; min-width: 0; padding: .75rem 0; border: 0; outline: 0; background: transparent; color: var(--color-ink); }
.field-control input::placeholder { color: #9aabaa; }
.field.is-invalid .field-control { border-color: var(--color-danger); box-shadow: 0 0 0 4px rgb(189 77 84 / 9%); }
.field-hint { color: var(--color-muted); font-size: .76rem; }
.field-error { min-height: .2rem; color: var(--color-danger); font-size: .76rem; }
.check-field { display: flex; align-items: flex-start; gap: .55rem; color: var(--color-muted); cursor: pointer; font-size: .82rem; }
.check-field input { width: 1.05rem; height: 1.05rem; margin-top: .12rem; accent-color: var(--color-teal-700); }
.form-status { min-height: 1.2rem; color: var(--color-danger); font-size: .84rem; font-weight: 650; }
.form-status.is-success { color: var(--color-success); }
.soft-badge { display: inline-flex; align-items: center; padding: .35rem .65rem; border-radius: var(--radius-pill); background: var(--color-teal-100); color: var(--color-teal-900); font-size: .77rem; font-style: normal; font-weight: 700; }
.empty-state { display: grid; max-width: 35rem; justify-items: center; margin: 2rem auto; padding: 3.5rem 1.5rem; text-align: center; }
.empty-state > span { font-size: 3rem; }
.empty-state h2 { margin: .75rem 0 .35rem; }
.empty-state p { margin-bottom: 1.25rem; }
.empty-state.compact { padding: 2.5rem 1rem; }