:root {
  /* The red palette reproduces the existing appearance when no theme is set. */
  --theme-accent: #b83b31;
  --theme-accent-dark: #963027;
  --theme-accent-rgb: 184, 59, 49;
  --theme-primary: #760d0d;
  --theme-primary-rgb: 118, 13, 13;
  --theme-primary-dark: #570606;
  --theme-primary-bright: #850f0f;
  --theme-coral: #ce6256;
  --theme-coral-rgb: 206, 98, 86;
  --theme-header-shadow: rgba(66, 6, 6, .18);
  --theme-card-gradient-start: #6d0909;
  --theme-card-gradient-end: #8a1515;
  --theme-card-shadow: rgba(102, 10, 10, .14);
  --theme-hero-gradient-start: #640808;
  --theme-hero-gradient-end: #8d1714;
  --theme-hero-shadow: rgba(86, 7, 7, .14);
  --theme-hero-eyebrow: #eab2ad;
  --theme-inventory-low-border: #f4aaa1;
  --theme-tint: #f8e9e7;
  --theme-tint-hover: #f2d8d5;
  --theme-tint-light: #fff3f1;
  --theme-tint-active: #fff0ee;
  --theme-tint-soft: #fff6f4;
  --theme-tint-subtle: #fff8f7;
  --theme-tint-selected: #fff9f8;
  --theme-tint-nav: #fff2ef;
  --theme-file-button-bg: #f2e8e7;
  --theme-selected-border: #c75a51;
  --theme-interval-border: #c48179;
  --theme-interval-tint: #fff7f5;
  --theme-interval-badge: #f2e3df;
  --theme-interval-text: #93332b;
  --theme-help-border: #c8a7a1;
  --theme-help-bg: #fff7f5;
  --theme-help-hover: #f9eae7;
  --theme-help-panel-border: #e7d9d5;
  --theme-help-panel-bg: #fff9f7;
  --theme-metric-note: #9a5b54;
  --theme-tint-border: #dfb5b0;
  --theme-tint-border-muted: #d9b9b4;
  --theme-danger-border: #d7aaa5;
  --theme-danger-text: #8a2119;
  --theme-danger-hover: #fff0ee;
  --theme-danger-fill: #a92921;
  --theme-danger-fill-hover: #8a2119;
  --theme-danger-menu: #a12d25;
  --theme-auth-orb: #ead6d2;
  --theme-completion-tint: #f5e4e1;
  --theme-chart-line: #760d0d;
  --theme-chart-fill: rgba(206, 98, 86, .42);
  --theme-chart-shade: #b83b31;
  --theme-chart-warmup-fill: rgba(118, 13, 13, .045);
  --theme-chart-warmup-fill-soft: rgba(118, 13, 13, .035);
  --theme-chart-boundary: #9d3933;
  --theme-chart-boundary-label: #8a312c;
  --accent: var(--theme-accent);
  --accent-dark: var(--theme-accent-dark);
  --ink: #292522;
  --muted: #746d68;
  --line: #ded9d5;
  --page: #f5f4f2;
  color-scheme: light;
  font-family: "Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
}

html[data-theme="blue"] {
  --theme-accent: #2569a8;
  --theme-accent-dark: #195384;
  --theme-accent-rgb: 37, 105, 168;
  --theme-primary: #174e80;
  --theme-primary-rgb: 23, 78, 128;
  --theme-primary-dark: #10395f;
  --theme-primary-bright: #1b5b91;
  --theme-coral: #4e8ebe;
  --theme-coral-rgb: 78, 142, 190;
  --theme-header-shadow: rgba(10, 40, 68, .18);
  --theme-card-gradient-start: #124673;
  --theme-card-gradient-end: #216498;
  --theme-card-shadow: rgba(15, 62, 99, .14);
  --theme-hero-gradient-start: #123d65;
  --theme-hero-gradient-end: #236a9e;
  --theme-hero-shadow: rgba(15, 55, 88, .14);
  --theme-hero-eyebrow: #b9dbf1;
  --theme-inventory-low-border: #a9d4ed;
  --theme-tint: #e8f1f8;
  --theme-tint-hover: #d6e8f4;
  --theme-tint-light: #f0f7fc;
  --theme-tint-active: #eaf4fb;
  --theme-tint-soft: #f4f9fd;
  --theme-tint-subtle: #f7fbfe;
  --theme-tint-selected: #f9fcfe;
  --theme-tint-nav: #eef7fc;
  --theme-file-button-bg: #e5f1f9;
  --theme-selected-border: #5c99c4;
  --theme-interval-border: #6da7cc;
  --theme-interval-tint: #f4fafd;
  --theme-interval-badge: #e0eef7;
  --theme-interval-text: #285e88;
  --theme-help-border: #a9c5d8;
  --theme-help-bg: #f4fafd;
  --theme-help-hover: #e9f3fa;
  --theme-help-panel-border: #d8e5ed;
  --theme-help-panel-bg: #f8fcfe;
  --theme-metric-note: #547b98;
  --theme-tint-border: #b0cde3;
  --theme-tint-border-muted: #b9d1e4;
  --theme-danger-border: var(--theme-tint-border);
  --theme-danger-text: var(--theme-primary);
  --theme-danger-hover: var(--theme-tint-active);
  --theme-danger-fill: var(--theme-accent);
  --theme-danger-fill-hover: var(--theme-accent-dark);
  --theme-danger-menu: var(--theme-accent-dark);
  --theme-auth-orb: #d5e5f1;
  --theme-completion-tint: #e2f0fa;
  --theme-chart-line: #174e80;
  --theme-chart-fill: rgba(78, 142, 190, .42);
  --theme-chart-shade: #2569a8;
  --theme-chart-warmup-fill: rgba(23, 78, 128, .045);
  --theme-chart-warmup-fill-soft: rgba(23, 78, 128, .035);
  --theme-chart-boundary: #3575a8;
  --theme-chart-boundary-label: #285e88;
}

html[data-theme="green"] {
  --theme-accent: #2b7651;
  --theme-accent-dark: #215e40;
  --theme-accent-rgb: 43, 118, 81;
  --theme-primary: #17583e;
  --theme-primary-rgb: 23, 88, 62;
  --theme-primary-dark: #10442f;
  --theme-primary-bright: #1b694a;
  --theme-coral: #589a75;
  --theme-coral-rgb: 88, 154, 117;
  --theme-header-shadow: rgba(12, 55, 35, .18);
  --theme-card-gradient-start: #124e36;
  --theme-card-gradient-end: #227052;
  --theme-card-shadow: rgba(14, 71, 44, .14);
  --theme-hero-gradient-start: #104630;
  --theme-hero-gradient-end: #257455;
  --theme-hero-shadow: rgba(12, 63, 40, .14);
  --theme-hero-eyebrow: #bce2cd;
  --theme-inventory-low-border: #a7dfbc;
  --theme-tint: #e7f3eb;
  --theme-tint-hover: #d5eadd;
  --theme-tint-light: #f0f9f3;
  --theme-tint-active: #eaf6ee;
  --theme-tint-soft: #f4faf6;
  --theme-tint-subtle: #f7fcf8;
  --theme-tint-selected: #f9fdfa;
  --theme-tint-nav: #edf8f0;
  --theme-file-button-bg: #e5f3e9;
  --theme-selected-border: #5d9b74;
  --theme-interval-border: #70ad87;
  --theme-interval-tint: #f4fbf6;
  --theme-interval-badge: #e0f0e5;
  --theme-interval-text: #2d694a;
  --theme-help-border: #a9cbb4;
  --theme-help-bg: #f4fbf6;
  --theme-help-hover: #e9f6ed;
  --theme-help-panel-border: #d8e9dc;
  --theme-help-panel-bg: #f8fcf9;
  --theme-metric-note: #568065;
  --theme-tint-border: #afd5bb;
  --theme-tint-border-muted: #b9dac3;
  --theme-danger-border: var(--theme-tint-border);
  --theme-danger-text: var(--theme-primary);
  --theme-danger-hover: var(--theme-tint-active);
  --theme-danger-fill: var(--theme-accent);
  --theme-danger-fill-hover: var(--theme-accent-dark);
  --theme-danger-menu: var(--theme-accent-dark);
  --theme-auth-orb: #d7eadd;
  --theme-completion-tint: #e2f3e8;
  --theme-chart-line: #17583e;
  --theme-chart-fill: rgba(88, 154, 117, .42);
  --theme-chart-shade: #2b7651;
  --theme-chart-warmup-fill: rgba(23, 88, 62, .045);
  --theme-chart-warmup-fill-soft: rgba(23, 88, 62, .035);
  --theme-chart-boundary: #3d805d;
  --theme-chart-boundary-label: #2f684b;
}

html[data-theme="purple"] {
  --theme-accent: #8151a1;
  --theme-accent-dark: #663f83;
  --theme-accent-rgb: 129, 81, 161;
  --theme-primary: #5a2b76;
  --theme-primary-rgb: 90, 43, 118;
  --theme-primary-dark: #422058;
  --theme-primary-bright: #6b348a;
  --theme-coral: #a075b5;
  --theme-coral-rgb: 160, 117, 181;
  --theme-header-shadow: rgba(52, 22, 68, .18);
  --theme-card-gradient-start: #522469;
  --theme-card-gradient-end: #743c91;
  --theme-card-shadow: rgba(65, 26, 85, .14);
  --theme-hero-gradient-start: #49205d;
  --theme-hero-gradient-end: #784294;
  --theme-hero-shadow: rgba(56, 22, 73, .14);
  --theme-hero-eyebrow: #e0c5e9;
  --theme-inventory-low-border: #dbb5e8;
  --theme-tint: #f1eaf5;
  --theme-tint-hover: #e6d7ed;
  --theme-tint-light: #faf3fc;
  --theme-tint-active: #f6ecf9;
  --theme-tint-soft: #fbf6fd;
  --theme-tint-subtle: #fdf9fe;
  --theme-tint-selected: #fdfafe;
  --theme-tint-nav: #f8f0fa;
  --theme-file-button-bg: #f1e8f5;
  --theme-selected-border: #aa7ebc;
  --theme-interval-border: #b089c2;
  --theme-interval-tint: #fcf7fd;
  --theme-interval-badge: #efe1f3;
  --theme-interval-text: #754a8a;
  --theme-help-border: #c9afd2;
  --theme-help-bg: #fcf7fd;
  --theme-help-hover: #f5eaf8;
  --theme-help-panel-border: #eadbed;
  --theme-help-panel-bg: #fdf9fe;
  --theme-metric-note: #866291;
  --theme-tint-border: #d4b8e0;
  --theme-tint-border-muted: #dcc6e5;
  --theme-danger-border: var(--theme-tint-border);
  --theme-danger-text: var(--theme-primary);
  --theme-danger-hover: var(--theme-tint-active);
  --theme-danger-fill: var(--theme-accent);
  --theme-danger-fill-hover: var(--theme-accent-dark);
  --theme-danger-menu: var(--theme-accent-dark);
  --theme-auth-orb: #e8d9ed;
  --theme-completion-tint: #f1e4f5;
  --theme-chart-line: #5a2b76;
  --theme-chart-fill: rgba(160, 117, 181, .42);
  --theme-chart-shade: #8151a1;
  --theme-chart-warmup-fill: rgba(90, 43, 118, .045);
  --theme-chart-warmup-fill-soft: rgba(90, 43, 118, .035);
  --theme-chart-boundary: #9463aa;
  --theme-chart-boundary-label: #754a8a;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--page); }
button, input { font: inherit; }

/* Shared action buttons follow the roast list toolbar and row controls. */
.app-button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d5d5da; border-radius: 7px; padding: 8px 13px; background: #fff; color: #3d3939; cursor: pointer; font: inherit; font-size: .76rem; font-weight: 700; text-align: center; text-decoration: none; white-space: nowrap; }
.app-button:hover:not(:disabled) { border-color: #b8a8a8; background: #faf7f7; }
.app-button:focus-visible { outline: 3px solid rgba(var(--theme-coral-rgb), .2); outline-offset: 2px; }
.app-button.app-button--primary { border-color: var(--dashboard-red, var(--accent)); background: var(--dashboard-red, var(--accent)); color: #fff; }
.app-button.app-button--primary:hover:not(:disabled) { border-color: var(--dashboard-red-dark, var(--accent-dark)); background: var(--dashboard-red-dark, var(--accent-dark)); }
.app-button.app-button--row { min-width: 70px; border-color: var(--dashboard-red, var(--accent)); border-radius: 6px; padding: 6px 9px; color: var(--dashboard-red, var(--accent)); font-size: .67rem; font-weight: 800; }
.app-button.app-button--row:hover:not(:disabled) { background: var(--theme-tint-light); }
.app-button.app-button--row.app-button--primary { background: var(--dashboard-red, var(--accent)); color: #fff; }
.app-button.app-button--row.app-button--primary:hover:not(:disabled) { background: var(--dashboard-red-dark, var(--accent-dark)); }
.app-button.app-button--accent { border-color: var(--theme-tint-border); color: var(--dashboard-red, var(--accent)); }
.app-button.app-button--accent:hover:not(:disabled) { background: var(--theme-tint-light); }
.app-button.app-button--danger { border-color: var(--theme-danger-border); color: var(--theme-danger-text); }
.app-button.app-button--danger:hover:not(:disabled) { background: var(--theme-danger-hover); }
.app-button.app-button--danger-fill { border-color: var(--theme-danger-fill); background: var(--theme-danger-fill); color: #fff; }
.app-button.app-button--danger-fill:hover:not(:disabled) { border-color: var(--theme-danger-fill-hover); background: var(--theme-danger-fill-hover); }
.app-button:disabled, .app-button.app-button--primary:disabled, .app-button.app-button--row:disabled, .app-button.app-button--danger-fill:disabled { border-color: #e2e2e5; background: #f4f4f5; color: #aaa7aa; cursor: not-allowed; }
.app-button[hidden] { display: none; }
.app-button { gap: 6px; }
.app-button > .lucide { width: 16px; height: 16px; flex: 0 0 16px; stroke-width: 2; }
.app-button--row > .lucide { width: 14px; height: 14px; flex-basis: 14px; }

.delete-confirm-dialog { position: fixed; inset: auto; top: 50dvh; left: 50vw; width: min(92vw, 480px); max-height: calc(100dvh - 32px); margin: 0; overflow-y: auto; transform: translate(-50%, -50%); border: 0; border-radius: 13px; padding: 0; box-shadow: 0 28px 75px rgba(30,15,15,.3); background: #fff; color: var(--dashboard-text, var(--ink)); }
.delete-confirm-dialog::backdrop { background: rgba(24,16,16,.55); }
.delete-confirm-dialog__content { padding: 23px; }
.delete-confirm-dialog__heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--dashboard-border, var(--line)); padding-bottom: 15px; }
.delete-confirm-dialog__heading h2 { margin: 0; font-size: 1.15rem; }
.delete-confirm-dialog__heading > button { border: 0; padding: 0 4px; background: transparent; color: #8e898c; cursor: pointer; font-size: 1.6rem; line-height: 1; }
.delete-confirm-dialog [data-confirmation-message] { margin: 18px 0 0; overflow-wrap: anywhere; color: #686367; font-size: .73rem; line-height: 1.7; }
.delete-confirm-dialog__actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 24px; }

.auth-page {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: 48px 24px;
}

.auth-page::before,
.auth-page::after {
  position: absolute;
  z-index: -1;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  content: "";
}

.auth-page::before { top: -240px; right: -130px; background: var(--theme-auth-orb); }
.auth-page::after { bottom: -290px; left: -150px; background: #e5ddd5; }
.auth-panel { width: min(100%, 390px); }
.brand { margin-bottom: 22px; text-align: center; }
.brand__logo { display: block; width: 134px; height: 134px; margin: 0 auto -8px; object-fit: contain; }
html[data-theme="blue"] .brand__logo { filter: hue-rotate(205deg) saturate(.85); }
html[data-theme="green"] .brand__logo { filter: hue-rotate(125deg) saturate(.75); }
html[data-theme="purple"] .brand__logo { filter: hue-rotate(280deg) saturate(.75); }
.brand__tagline { margin: 0; color: var(--muted); font-size: .8rem; letter-spacing: .08em; }

.login-card {
  width: 100%;
  padding: 34px 36px 30px;
  border: 1px solid rgba(80, 65, 56, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 55px rgba(53, 43, 38, .11);
}

.login-card__heading { margin-bottom: 28px; text-align: center; }
.eyebrow { margin: 0 0 8px; color: var(--accent); font-size: .68rem; font-weight: 700; letter-spacing: .18em; }
h1 { margin: 0; font-size: 1.55rem; letter-spacing: .05em; }
.login-card__heading > p:last-child, .simple-card > p { margin: 9px 0 0; color: var(--muted); font-size: .82rem; }
.alert { margin: -10px 0 20px; padding: 11px 13px; border-left: 3px solid #b83b31; border-radius: 5px; background: #fbefed; color: #7b2821; font-size: .78rem; line-height: 1.6; }
.field { margin-bottom: 18px; }
.field label { display: inline-block; margin-bottom: 7px; color: #504a46; font-size: .8rem; font-weight: 600; }
.field input { width: 100%; height: 46px; border: 1px solid var(--line); border-radius: 7px; outline: none; padding: 0 13px; background: #fff; transition: border-color .16s, box-shadow .16s; }
.field input:hover { border-color: #bdb5af; }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--theme-accent-rgb), .12); }
.password-field { position: relative; }
.password-field input { padding-right: 48px; }
.password-toggle { position: absolute; top: 0; right: 0; display: grid; width: 46px; height: 46px; border: 0; place-items: center; background: transparent; color: #8b837d; cursor: pointer; }
.password-toggle svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.remember { display: flex; width: max-content; align-items: center; gap: 8px; margin: 2px auto 20px; color: #5d5651; cursor: pointer; font-size: .78rem; }
.remember input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }

.primary-button { display: grid; width: 100%; min-height: 46px; border: 0; border-radius: 7px; place-items: center; padding: 0 18px; background: var(--accent); color: #fff; cursor: pointer; font-weight: 700; letter-spacing: .04em; text-decoration: none; transition: background .16s, transform .08s; }
.primary-button:hover { background: var(--accent-dark); }
.primary-button:active { transform: translateY(1px); }
.primary-button:focus-visible, .text-link:focus-visible, .password-toggle:focus-visible { outline: 3px solid rgba(var(--theme-accent-rgb), .3); outline-offset: 2px; }
.primary-button:disabled { cursor: wait; opacity: .75; }
.text-link { display: block; width: max-content; margin: 18px auto 0; color: var(--accent); font-size: .75rem; text-underline-offset: 3px; }
.auth-links { margin-top: 18px; }
.auth-links .text-link { margin-top: 0; }
.auth-links .text-link + .text-link { margin-top: 11px; }
.text-link--secondary { font-weight: 700; }
.spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.is-loading .spinner { display: block; }
.is-loading > span:first-child { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.auth-footer { position: absolute; bottom: 18px; margin: 0; color: #a19892; font-size: .66rem; }
.simple-card { max-width: 390px; text-align: center; }
.simple-card .button-link { margin-top: 26px; }
.simple-card .completion-icon { margin: 22px auto 0; }
.reset-form { margin-top: 24px; text-align: left; }
.placeholder-page { display: grid; min-height: 100svh; place-content: center; justify-items: center; padding: 24px; text-align: center; }
.placeholder-page img { width: 140px; }
.placeholder-page p { color: var(--muted); }
.placeholder-page form { width: 220px; margin-top: 16px; }
.auth-page--register { padding-block: 30px 48px; }
.auth-panel--wide { width: min(100%, 620px); }
.brand--compact { margin-bottom: 10px; }
.brand--compact .brand__logo { width: 92px; height: 92px; }
.register-card { padding-inline: 38px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-help { margin: -8px 0 20px; color: var(--muted); font-size: .69rem; line-height: 1.6; }
.terms-consent { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 20px; color: #504a46; cursor: pointer; font-size: .78rem; line-height: 1.6; }
.terms-consent input { flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--accent); }
.terms-consent a { color: var(--accent); text-underline-offset: 3px; }
.terms-consent a:focus-visible { outline: 3px solid rgba(var(--theme-accent-rgb), .3); outline-offset: 2px; }
.legal-page { min-height: 100svh; padding: 48px 20px; }
.legal-document { width: min(100%, 820px); margin: 0 auto; padding: 44px 52px; border: 1px solid rgba(80, 65, 56, .1); border-radius: 16px; background: #fff; box-shadow: 0 18px 55px rgba(53, 43, 38, .08); }
.legal-document__header { padding-bottom: 24px; border-bottom: 1px solid var(--line); text-align: center; }
.legal-document__header p { margin: 10px 0 0; color: var(--muted); font-size: .75rem; }
.legal-document section { margin-top: 30px; }
.legal-document h2 { margin: 0 0 10px; font-size: 1rem; }
.legal-document p, .legal-document li { color: #4f4945; font-size: .84rem; line-height: 1.9; }
.legal-document p { margin: 0; }
.legal-document ol, .legal-document ul { margin: 8px 0 0; padding-left: 1.5rem; }
.legal-document li + li { margin-top: 5px; }
.legal-document__actions { margin-top: 36px; text-align: center; }
.legal-document__actions .text-link { display: inline-block; }
.registration-complete { display: flex; flex-direction: column; align-items: center; }
.completion-icon { display: grid; width: 58px; height: 58px; margin-bottom: 20px; border-radius: 50%; place-items: center; background: var(--theme-completion-tint); color: var(--accent); }
.completion-icon svg { width: 29px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.completion-note { font-size: .72rem !important; }

@media (max-width: 480px) {
  .auth-page { padding: 30px 18px 48px; }
  .brand { margin-bottom: 14px; }
  .brand__logo { width: 118px; height: 118px; }
  .login-card { padding: 28px 24px 25px; }
  .field-grid { grid-template-columns: 1fr; gap: 0; }
  .legal-page { padding: 20px 12px; }
  .legal-document { padding: 30px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
[data-auto-dismiss] { transition: opacity .2s ease, transform .2s ease; }
[data-auto-dismiss].is-dismissing { opacity: 0; transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  [data-auto-dismiss] { transition: none; }
}