/* Sign-in and owner tools share the same HeyloWorld foundations and saved palette. */
.heyloworld-auth, .heyloworld-admin {
  --paper: var(--panel, #fffefb);
  --plum: var(--accent, #795c31);
  --plum-deep: var(--section-deep, #51411f);
  --plum-soft: var(--soft, #f6eddb);
  --danger: var(--ui-danger);
  --danger-soft: var(--ui-danger-soft);
  --teal: var(--ui-success);
  --teal-soft: var(--ui-success-soft);
  background: var(--bg, #fbf9f4);
  color: var(--ink, #302b25);
}
.heyloworld-auth {
  background: radial-gradient(ellipse at 12% 78%, color-mix(in srgb, var(--soft) 66%, transparent), transparent 55%),
    radial-gradient(ellipse at 92% 8%, color-mix(in srgb, var(--soft) 64%, transparent), transparent 48%), var(--bg);
}
.auth-layout { max-width: 1440px; gap: clamp(32px, 4vw, 64px); grid-template-columns: minmax(0, 1.35fr) minmax(0, 440px); }
.auth-brand { max-width: 740px; margin-bottom: 28px; }
.auth-story { padding-block: 20px; }
.auth-story h1 { animation: signature-copy-in .65s .18s both; }
.auth-story h1::after { content: ''; display: block; width: 100px; height: 2px; margin-top: 20px; border-radius: 999px; background: linear-gradient(90deg,var(--brand-deep),var(--brand-light),transparent); transform-origin: left; animation: signature-line-in 1s .3s both; }
.auth-brand .theme-brand { overflow: hidden; }
.auth-brand .theme-brand::after { content: ''; position: absolute; inset: -25% -40%; pointer-events: none; background: linear-gradient(108deg,transparent 44%,#fff5 49%,transparent 54%); transform: translateX(70%); animation: signature-sheen 1.3s .2s both; }
@keyframes signature-copy-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes signature-line-in { from { transform: scaleX(.12); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes signature-sheen { 0% { transform: translateX(-70%); opacity: 0; } 20%,65% { opacity: 1; } 100% { transform: translateX(70%); opacity: 0; } }
:root[data-motion=reduced] .auth-story *, :root[data-motion=reduced] .auth-story *::before, :root[data-motion=reduced] .auth-story *::after { animation: none !important; transition: none !important; }
.auth-header .header-note, .auth-header .home-link { font-size: var(--ui-type-meta); }
.auth-header .header-note > span { background: var(--accent); box-shadow: 0 0 0 4px var(--soft); }
.auth-story h1 span { color: var(--muted); }
.auth-card { background: var(--panel); border-color: var(--line); border-radius: var(--ui-radius-xl); box-shadow: var(--ui-shadow-md); }
.auth-card h2 { font-size: clamp(1.5rem, 2.5vw, 1.75rem); line-height: 1.3; letter-spacing: -.03em; }
.auth-card .eyebrow { font-size: .6875rem; letter-spacing: .13em; color: var(--accent); }
.auth-description, .auth-switch { font-size: var(--ui-type-label); line-height: 1.65; }
.auth-card .field > label { font-size: var(--ui-type-label); font-weight: 650; }
.auth-card .field input { background: var(--panel); border-color: var(--line); font-size: 1rem; border-radius: var(--ui-radius-sm); color: var(--ink); }
.auth-card .field input::placeholder { color: var(--muted); }
.auth-card .field input:focus { background: var(--panel); border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.auth-card .field input[aria-invalid=true] { border-color: var(--ui-danger); }
.auth-card .field-note, .auth-card .auth-footnote, .auth-card .provider-note { font-size: var(--ui-type-caption); line-height: 1.65; }
.auth-card .button { min-height: 48px; }
.auth-card .button-primary { background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent); box-shadow: var(--ui-shadow-sm); }
.auth-card .button-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); border-color: var(--accent); }
.auth-card .button-secondary { background: var(--panel); color: var(--ink); }
.auth-card .google-button { background: var(--panel); color: var(--ink); border-color: var(--line); box-shadow: none; }
.auth-card .google-button:hover:not(:disabled) { background: var(--soft); border-color: var(--accent); }
.auth-card .text-button { font-size: var(--ui-type-caption); min-height: 44px; }
.auth-card .password-toggle { min-width: 60px; min-height: 42px; top: 4px; bottom: auto; font-size: var(--ui-type-meta); color: var(--accent); }
.auth-card .password-toggle:hover { background: var(--soft); }
.auth-divider { font-size: var(--ui-type-caption); color: var(--muted); }
.auth-divider::before, .auth-divider::after { background: var(--line); }
.auth-error, .auth-notice { font-size: var(--ui-type-label); border-radius: var(--ui-radius-md); }
.auth-error { color: var(--ui-danger); background: var(--ui-danger-soft); border-color: color-mix(in srgb, var(--ui-danger) 24%, transparent); }
.auth-notice { color: var(--ui-success); background: var(--ui-success-soft); border-color: color-mix(in srgb, var(--ui-success) 24%, transparent); }
.auth-card .status-mark, .auth-card .info-row { background: var(--soft); color: var(--ink); border-radius: var(--ui-radius-md); }
.auth-card .status-mark { color: var(--accent); }
.auth-card .info-row { font-size: var(--ui-type-caption); }
.auth-steps span { background: var(--line); }
.auth-steps span.active, .auth-card .loading-dot { background: var(--accent); }
.auth-footer { font-size: var(--ui-type-meta); }
.resend-row { font-size: var(--ui-type-caption); }

.heyloworld-admin .admin-header { height: auto; min-height: 86px; padding-block: 16px; flex-wrap: wrap; }
.heyloworld-admin .header-actions { flex-wrap: wrap; gap: 10px; }
.heyloworld-admin .admin-header > .brand-lockup { gap: 16px; }
.heyloworld-admin .admin-header .theme-brand { width: 220px; max-width: 55vw; }
.heyloworld-admin .access-screen .theme-brand { width: 260px; max-width: 80vw; margin-bottom: 24px; }
.heyloworld-admin .theme-brand > img { width: 100%; height: auto; margin: 0; }
.heyloworld-admin .console-main { min-width: 0; }
.heyloworld-admin .panel, .heyloworld-admin .stat-card, .heyloworld-admin .user-card,
.heyloworld-admin .report-card, .heyloworld-admin .audit-list, .heyloworld-admin .campaign-card {
  background: var(--panel); border-color: var(--line); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-sm);
}
.heyloworld-admin .stat-card.stat-highlight { background: var(--section-deep); color: #fff; }
.heyloworld-admin .stat-highlight .stat-label, .heyloworld-admin .stat-highlight .stat-note { color: #f1eee6; }
.heyloworld-admin .stat-label, .heyloworld-admin .user-handle, .heyloworld-admin .list-summary,
.heyloworld-admin .audit-meta, .heyloworld-admin .audit-time, .heyloworld-admin .report-meta { font-size: var(--ui-type-caption); }
.heyloworld-admin .stat-note, .heyloworld-admin .user-meta { font-size: var(--ui-type-meta); }
.heyloworld-admin .panel p, .heyloworld-admin .report-reason, .heyloworld-admin .audit-reason { font-size: var(--ui-type-label); line-height: 1.65; }
.heyloworld-admin .user-main > div:last-child { min-width: 0; }
.heyloworld-admin .user-actions { flex-wrap: wrap; }
.heyloworld-admin .user-name h3, .heyloworld-admin .campaign-card h3 { overflow-wrap: anywhere; }
.heyloworld-admin .nav-button:hover { background: var(--soft); }
.heyloworld-admin .nav-button[aria-current=page] { color: var(--accent); background: var(--soft); }
.heyloworld-admin .nav-count { background: var(--panel); color: var(--ink); }
.heyloworld-admin .field label { font-size: var(--ui-type-caption); }
.heyloworld-admin .field :is(input, select, textarea),
.heyloworld-admin .campaign-form :is(input, select, textarea) { background: var(--panel); color: var(--ink); border-color: var(--line); font-size: 1rem; }
.heyloworld-admin .reported-content, .heyloworld-admin .campaign-preview,
.heyloworld-admin .content-note { background: var(--bg); border-color: var(--line); border-radius: var(--ui-radius-md); }
.heyloworld-admin .status-pill { font-size: var(--ui-type-meta); }
.heyloworld-admin .status-pill.pending { color: var(--accent); background: var(--soft); }
.heyloworld-admin .status-pill.reviewed { color: var(--ink); background: var(--soft); }
.heyloworld-admin .btn-primary { background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent); }
.heyloworld-admin .btn:hover:not(:disabled) { background: var(--soft); color: var(--ink); border-color: var(--line); }
.heyloworld-admin .btn-primary:hover:not(:disabled) { color: var(--on-accent, #fff); background: var(--accent); }
.heyloworld-admin .btn-danger { color: var(--ui-danger); background: var(--ui-danger-soft); border-color: color-mix(in srgb, var(--ui-danger) 25%, transparent); }
.heyloworld-admin .btn-positive { color: var(--ui-success); background: var(--ui-success-soft); border-color: color-mix(in srgb, var(--ui-success) 25%, transparent); }
.heyloworld-admin dialog { background: var(--panel); color: var(--ink); padding: var(--ui-dialog-gutter); }
.heyloworld-admin .dialog-header h2 { font-size: 1.25rem; overflow-wrap: anywhere; }
.heyloworld-admin .dialog-actions { flex-wrap: wrap; }
.heyloworld-admin .dialog-description { font-size: var(--ui-type-label); }
.heyloworld-admin .dialog-note, .heyloworld-admin .dialog-error { font-size: var(--ui-type-caption); }
.heyloworld-admin #admin-toast { color: var(--panel); background: var(--ink); font-size: var(--ui-type-label); }
.heyloworld-admin .console-footer, .heyloworld-admin .sidebar-note { font-size: var(--ui-type-meta); }

@media (max-width: 760px) {
  .auth-header { height: auto; min-height: 64px; padding-block: max(12px, var(--ui-safe-top)) 12px; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
  .auth-header .header-note, .auth-header .home-link { font-size: .6875rem; }
  .auth-layout { max-width: 510px; padding: 4px 16px 28px; }
  .auth-card { padding: 26px 22px; border-radius: var(--ui-radius-lg); }
  .auth-story { padding-block: 8px 20px; }
  .auth-brand { width: calc(100% + 8px); max-width: none; margin-inline: -4px; margin-bottom: 14px; }
  .auth-story h1::after { width: 74px; margin: 10px auto 0; }
  .auth-footer { padding-bottom: calc(24px + var(--ui-safe-bottom)); }
  .heyloworld-admin .admin-header { padding-top: max(16px, var(--ui-safe-top)); padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); gap: 12px; }
  .heyloworld-admin .header-actions { width: 100%; justify-content: flex-end; }
  .heyloworld-admin .header-actions .btn { min-height: 44px; font-size: .8125rem; }
  .heyloworld-admin .console-sidebar { background: var(--panel); }
  .heyloworld-admin .console-nav { gap: 6px; padding-block: 2px; scroll-padding-inline: 12px; }
  .heyloworld-admin .nav-button { flex: 0 0 auto; padding: 12px; font-size: var(--ui-type-caption); }
  .heyloworld-admin .console-main { padding-bottom: calc(32px + var(--ui-safe-bottom)); }
  .heyloworld-admin .btn-small { min-height: 44px; }
}
@media (min-width: 761px) and (max-width: 1050px) {
  .auth-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 32px; padding-inline: 28px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .heyloworld-admin .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heyloworld-admin .campaign-list { grid-template-columns: minmax(0, 1fr); }
  .heyloworld-admin .audit-entry { grid-template-columns: 32px minmax(0, 1fr); }
  .heyloworld-admin .audit-time { grid-column: 2; }
}
@media (max-width: 360px) {
  .auth-header { flex-wrap: wrap; justify-content: center; gap: 0 14px; }
  .auth-card { padding: 24px 18px; }
  .heyloworld-admin .console-main { padding-inline: 12px; }
  .heyloworld-admin .header-actions .btn { flex: 1; }
}