/* Shared theme for registration, authentication and account management. */
@import url('/assets/fonts/index.css');
:root {
  --brand-primary:#0077b6;--brand-navy:#102f42;--brand-accent:#f65b62;
  --brand-background:#eaf4f3;--brand-surface:#fff;--brand-text:#162b36;
  --brand-muted:#526873;--brand-border:#b9cbd2;--brand-error:#b42332;
  --brand-focus:#005a8a;--brand-radius:12px;
  font-family:'Noto Sans JP Variable','Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
  color:var(--brand-text);background:var(--brand-background);font-synthesis:none;
}
body{font-family:inherit;color:var(--brand-text);background:var(--brand-background);font-weight:400;line-height:1.6}
button,input,select,textarea{font-family:inherit;font-size:16px}
h1,h2,h3,strong{font-weight:700}
label{font-weight:500}
header,.app-header{background:var(--brand-navy)}
.brand-lockup{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{display:block;width:48px;height:48px;object-fit:contain;flex-shrink:0;border-radius:8px;background:var(--brand-background)}
.brand-text{min-width:0}
.brand-text h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-store{color:#d1e7ed;font-size:13px}
.brand-subtitle{color:#d1e7ed;font-size:14px;margin:2px 0 0}
.auth-header{padding:24px max(20px,calc((100vw - 850px)/2));display:flex;align-items:center;gap:18px}
.auth-header .brand-mark{width:80px;height:80px;border-radius:12px}
.auth-wordmark{font-size:24px;font-weight:700;line-height:1.4}
.auth-header::after{content:'';width:4px;height:30px;background:var(--brand-accent);border-radius:3px;margin-left:auto}
.app-header{border-bottom:2px solid var(--brand-primary)}
.card{background:var(--brand-surface);border-color:#d2e0e3;border-radius:var(--brand-radius)}
.muted,small{color:var(--brand-muted)}
input,select,textarea{color:var(--brand-text);border-color:var(--brand-border);border-radius:9px}
input:focus,select:focus,textarea:focus{border-color:var(--brand-primary)}
button{color:var(--brand-navy);border-color:var(--brand-border);border-radius:9px}
.active,button.primary{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff}
a{color:var(--brand-focus)}
.account-dialog a{color:var(--brand-focus);border-color:var(--brand-border)}
.item,.notification-note,#link{background:#f0f6f8}
.pill{background:#e4f0f8;color:var(--brand-focus)}
.badge{color:var(--brand-error);background:#fff0f0}
.errors,.error,.account-dialog .logout{color:var(--brand-error)}
.account-dialog .logout{background:#fff;border-color:#deb9be}
.count,.footer-count strong,#success h2{color:var(--brand-primary)}
#success{border-color:var(--brand-primary)}
.spinner{border-color:#dceaf1;border-top-color:var(--brand-primary)}
.icon-button{color:#fff;background:#ffffff12;border-color:#ffffff38}
.icon-button small{color:#d1e7ed;font-size:11px}
.icon-button:disabled{opacity:.8}
:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--brand-focus);outline-offset:3px}
.app-header :focus-visible{outline-color:#fff}
.auth-page button,.auth-page a.button{background:var(--brand-primary);color:#fff}
.auth-page button.show{background:#e4f0f8;color:var(--brand-focus)}
.auth-page .card{border-radius:var(--brand-radius)}
.auth-page #remember{accent-color:var(--brand-primary)}
.auth-page main{margin-top:28px}
@media(max-width:440px){.brand-mark{width:40px;height:40px}.brand-lockup{gap:8px}.app-header .brand-text h1{font-size:17px}.app-header{gap:8px}.header-actions{gap:5px}.auth-header{gap:14px}.auth-header .brand-mark{width:72px;height:72px}.auth-wordmark{font-size:22px}}