/* Login pages (comunicai / medicai / tourism): one sheet, product accent from the untouched brand tokens. */
body.ds-auth { min-height: 100vh; display: grid; place-items: center; padding: var(--ds-s6) var(--ds-s4); box-sizing: border-box; }
.ds-auth .container { width: 100%; max-width: 400px; animation: ds-rise var(--ds-t-page) var(--ds-ease-out) both; }

.ds-auth .logo-area { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: var(--ds-s6); text-align: center; }
.ds-auth .logo-mark { display: block; }
.ds-auth .logo-mark img { display: block; height: 76px; width: auto; object-fit: contain; }   /* official PNG, natural proportions */
.ds-auth .logo-name { font-family: var(--ds-font-brand); font-weight: 800; font-size: 28px; letter-spacing: -0.4px; color: var(--ds-text); }
.ds-auth .logo-name span { color: var(--ds-brand); }
.ds-auth .logo-tagline { max-width: 32ch; font-size: var(--ds-fs-small); line-height: 1.5; color: var(--ds-text-muted); }

.ds-auth .card { padding: var(--ds-s8); background: var(--ds-surface); border: 1px solid var(--ds-line-subtle); border-radius: var(--ds-r-xl); box-shadow: var(--ds-highlight), var(--ds-shadow-float); }
.ds-auth .card-title { margin: 0 0 4px; font: 650 20px/1.3 var(--ds-font); letter-spacing: -0.015em; color: var(--ds-text); }
.ds-auth .card-subtitle { margin: 0 0 var(--ds-s6); font-size: var(--ds-fs-small); line-height: 1.55; color: var(--ds-text-muted); }

.ds-auth .field { margin-bottom: var(--ds-s4); }
.ds-auth label { display: block; margin: 0 0 6px; font: 600 var(--ds-fs-label)/1.3 var(--ds-font); text-transform: none; letter-spacing: 0; color: var(--ds-text-2); }
.ds-auth input[type="text"], .ds-auth input[type="password"] { width: 100%; box-sizing: border-box; min-height: 42px; padding: 9px 12px; background: var(--ds-well); color: var(--ds-text); border: 1px solid var(--ds-line); border-radius: var(--ds-r-md); box-shadow: var(--ds-inset); font: 400 var(--ds-fs-body)/1.4 var(--ds-font); outline: none; transition: border-color var(--ds-t-fast), box-shadow var(--ds-t-normal), background var(--ds-t-fast); }
.ds-auth input:hover:not(:focus) { background: var(--ds-well-hover); border-color: var(--ds-line-strong); }
.ds-auth input:focus { background: var(--ds-surface); border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-focus), var(--ds-highlight); }
.ds-auth ::placeholder { color: var(--ds-text-muted); opacity: .85; }

.ds-auth .btn { width: 100%; min-height: 44px; margin-top: var(--ds-s2); display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--ds-accent) 82%, #000); border-radius: var(--ds-r-md); background: var(--ds-accent); color: var(--ds-on-brand); font: 600 15px/1 var(--ds-font); letter-spacing: .04em; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(15,40,28,.18), 0 8px 20px -8px var(--ds-glow); transition: background var(--ds-t-fast), transform var(--ds-t-fast); }
.ds-auth .btn:hover { background: var(--ds-accent-hover); }
.ds-auth .btn:active { transform: translateY(1px); }
.ds-auth .btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.ds-auth .btn-inner { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ds-auth .spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ds-spin .7s linear infinite; }
.ds-auth .btn.loading .spinner { display: block; }
.ds-auth .btn.loading .btn-text { opacity: .7; }
@keyframes ds-spin { to { transform: rotate(360deg); } }

.ds-auth .alert { display: none; margin: 0 0 var(--ds-s4); padding: 11px 14px; border: 1px solid transparent; border-radius: var(--ds-r-md); font-size: var(--ds-fs-small); line-height: 1.5; }
.ds-auth .alert.visible { display: block; animation: ds-rise var(--ds-t-slow) var(--ds-ease-out) both; }
.ds-auth .alert.error { background: var(--ds-error-tint); border-color: color-mix(in srgb, var(--ds-error) 30%, transparent); color: var(--ds-error); }
.ds-auth .alert.success { background: var(--ds-accent-tint); border-color: var(--ds-accent-line); color: var(--ds-accent-text); }