/* ヒートマップ大見出し・各グラフ見出しの中央配置 */
.heatmap-main-title {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 18px auto 12px auto;
  text-align: center;
  font-size: 22px; /* match app header h1 for consistent scale */
  font-weight: 700;
}
.heatmap-title {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 8px;
}
:root{
  --content-max-width: 1200px;
  --bg-1: #fff7fb; /* page gradient start */
  --bg-2: #fffcf5; /* page gradient end */
  /* Single-hue theme: controlling hue here will affect all accents & heatmaps */
  --theme-hue: 212; /* default hue (blue) */
  /* derive heatmap / accent colors from single hue so UI is a single-color gradient */
  --accent: hsl(var(--theme-hue) 85% 52%);
  --accent-2: hsl(var(--theme-hue) 85% 72%);
  --accent-3: hsl(var(--theme-hue) 70% 30%);
  --heatmap-1: var(--accent);
  --heatmap-2: var(--accent-2);
  /* button accent for background-dependent controls (defaults to accent) */
  --fav-accent: var(--accent);
  --fav-accent-2: var(--accent-2);
  --card: #fffefc; /* card / panel */
  --muted: #7b6b7b; /* muted text */
  --shadow: 0 8px 20px rgba(34,20,35,0.06);

  /* sand palette used by .sand-layer (top -> bottom) */
  --sand-1: #f3e0bf;
  --sand-2: #d6b77a;
  /* default timer ring color (independent from background theme) */
  --ring-color: #d6b77a;

  /* semantic tokens */
  --text: #38263a; /* main text */
  --text-strong: #4b3b4b;
  --border: rgba(0,0,0,0.06);
  --btn-bg: #fff;
  --btn-bg-2: #fff;
  --btn-text: #5a2b3a;
  --overtime-bg: #fff4e5;
  --overtime-border: #f0c080;
  --overtime-text: #7a4b11;
  --chip-bg: #fff2f7;
  --update-bg: #0b63ff;
}

/* If a background-theme (bg-theme-*) class is added to the html element,
   force the page background to use the bg-theme variables so the Sand-Study
   picker wins over the shared site stylesheet (which also sets body background).
   We use a higher-specificity selector (html[class*="bg-theme-"] body)
   so this rule overrides the generic `body { background: ... }` in
   ../assets/css/styles.css even when that sheet is loaded after this file.
*/
html[class*="bg-theme-"] body{
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  min-height: 100vh;
}

/* Remove the decorative radial glows from the shared stylesheet for the
   bg-theme pages so the background colors stay visually consistent. */
html[class*="bg-theme-"] body::before{ background: none; }

/* centralize main content columns (bottle list, heatmaps, headings) */
.bottle-list,
.container-heatmap,
.heatmaps,
.heatmap-main-title,
.container-720{
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px){
  :root{ --content-max-width: 100%; }
}

body{font-family:'Baloo 2','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial; margin:18px; color:var(--text); background: linear-gradient(180deg, var(--bg-1), var(--bg-2));}
/* Heatmap / history unified background class (applied to pages that should use the purple gradient) */
.bg-heatmap{
  /* Use the same soft page gradient as the timer page, then apply a very
     subtle single-hue overlay using the theme hue so heatmaps keep their
     color identity but remain visually lightweight (薄め). */
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  /* subtle tint overlay derived from theme hue (low alpha to keep it light) */
  background-image: linear-gradient(135deg, hsl(var(--theme-hue) 85% 60% / 0.06), hsl(var(--theme-hue) 85% 72% / 0.06));
  background-blend-mode: overlay;
  min-height: 100vh;
}
.stats .big{font-size:30px;font-weight:700;color:var(--text-strong)}
.stats .mid{font-size:16px;margin-top:6px;color:var(--text-strong)}
.stats .small{font-size:13px;color:var(--text-strong)}

/* Ensure stat labels and numbers use stronger (darker) text for readability */
.stat{color:var(--text-strong)}
.bottle{position:relative;width:160px;height:260px;margin:18px auto;border-radius:28px;overflow:hidden;background:transparent;box-shadow:var(--shadow);border:1px solid var(--border)}
.rim{position:absolute;inset:0;border-radius:28px;pointer-events:none}
.sand{position:absolute;left:8px;right:8px;bottom:8px;height:calc(100% - 16px);overflow:hidden;border-radius:18px}
.sand-layer{position:absolute;left:0;width:100%;box-sizing:border-box;border-top:1px solid rgba(0,0,0,0.03);border-radius:8px;background:linear-gradient(180deg,var(--sand-1),var(--sand-2))}
.sand-layer.partial{border-top:1px solid rgba(0,0,0,0.06)}
.controls{display:flex;gap:12px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.controls button{min-width:84px}

/* base button */
button{padding:10px 14px;border-radius:999px;border:none;background:linear-gradient(180deg,var(--btn-bg),var(--btn-bg-2));box-shadow:0 6px 18px rgba(0,0,0,0.06);cursor:pointer;font-weight:600;transition:transform .12s ease,box-shadow .12s ease}
button:hover{transform:translateY(-2px)}
button:active{transform:translateY(0)}
button:focus{outline:3px solid rgba(246,164,217,0.18);outline-offset:3px}

/* button variants */
.btn-primary, .primary{ background: linear-gradient(180deg,var(--accent),var(--accent-2)); color: var(--btn-text); box-shadow: 0 10px 26px rgba(0,0,0,0.06) }
.btn-outline{ background: transparent; border: 1px solid var(--border); color: var(--text-strong) }
.btn-ghost{ background: transparent; color: var(--muted); box-shadow:none }
button[disabled], .btn-disabled{ opacity:0.5; cursor: default; transform:none }
dialog{border:none;border-radius:12px;padding:14px;background:var(--card);box-shadow:0 12px 40px rgba(34,20,35,0.08)}
/* Ensure dialog appears above embedded overlays (reset overlay z-index:80) */
dialog[open], dialog.modal-fallback{position:fixed;z-index:1000;left:50%;top:50%;transform:translate(-50%,-50%);max-width:92%;box-shadow:0 12px 40px rgba(0,0,0,0.35);pointer-events:auto}

/* Make native <dialog> backdrop white instead of browser-default gray so
  the end/finish dialog appears on a white overlay matching other popups. */
dialog::backdrop{ background: rgba(255,255,255,0.96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Fallback for environments that simulate modal via .modal-fallback (keep consistent) */
dialog.modal-fallback + .dialog-backdrop{ position:fixed; inset:0; background: rgba(255,255,255,0.96); z-index:999; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* End modal override: make the backdrop semi-transparent (dark) and the
  modal card itself a solid white to improve contrast for the end/save UI. */
#endModal{ background: #ffffff; }
#endModal::backdrop{ background: rgba(0,0,0,0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Fallback for environments that render modal-fallback pattern */
#endModal.modal-fallback + .dialog-backdrop{ background: rgba(0,0,0,0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
label{display:block;margin:6px 0}
.row{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.countdown{position:absolute;top:8px;right:12px;font-size:12px;color:var(--muted)}
.stat{display:flex;align-items:center;gap:8px}
main{max-width:420px;margin:0 auto;padding:8px}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* Timer display */
.timer{text-align:center;margin-top:6px;color:var(--text-strong)}
.timer > div:first-child{font-size:18px;font-weight:600;color:var(--text-strong)}
#timerDisplay{font-size:20px;letter-spacing:1px;color:var(--text-strong)}

.countdown-ui{text-align:center;margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:14px}
.circle-wrap{position:relative;width:160px;height:160px;margin:0 auto 8px auto;display:flex;align-items:center;justify-content:center}
.countdown-ring{transform:rotate(-90deg);transform-box:fill-box;transform-origin:center}
.ring-bg{stroke:rgba(0,0,0,0.04)}
.ring-fg{stroke:var(--ring-color);transition:stroke-dashoffset 0.5s linear}
.circle-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.countdown-text{font-size:22px;font-weight:700;font-family:monospace;color:var(--text-strong)}
.countdown-sub{font-size:12px;color:var(--text-strong)}
.countdown-controls{margin-top:8px;display:flex;gap:8px;justify-content:center}
.countdown-controls button{padding:8px 12px;border-radius:6px;border:1px solid var(--border);background:var(--btn-bg)}

/* disabled button appearance */
button:disabled{opacity:0.5;cursor:not-allowed}

.log-list-outer{border-top:1px solid rgba(0,0,0,0.06);padding:8px}
.log-list{max-height:260px;overflow:auto;padding:0;display:flex;flex-direction:column;gap:12px;margin:0 auto;box-sizing:border-box;
  /* width will be the lesser of 840px or viewport minus safe padding */
  width: min(840px, calc(100vw - 40px));
  /* use auto margins for centering within the parent container */
  position: static; transform: none; left: auto;
}
.log-item{
  /* Force a light card background for learning-log cards to improve readability */
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.96));
  border-radius:14px;
  padding:14px;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 6px 18px rgba(34,20,35,0.06);
  font-size:14px;
  color:var(--text-strong);
}
.log-item{overflow-wrap:anywhere}
.log-meta{display:flex;gap:8px;color:var(--muted);font-size:12px;margin-bottom:8px}
.log-layer{font-weight:700;color:var(--accent-3)}
.log-comment{color:var(--text-strong)}
.log-empty{color:var(--muted);text-align:center;padding:12px}

.log-empty-text{color:var(--muted)}

/* Debug panel */
/* Debug Panel - Modern Toggle Design */
#debugPanel{
  max-width: 720px;
  margin: 24px auto;
  padding: 0;
}

.debug-toggle{
  background: linear-gradient(135deg, hsla(var(--theme-hue),85%,52%,0.05), hsla(var(--theme-hue),85%,62%,0.05));
  border: 1px solid hsla(var(--theme-hue),85%,52%,0.18);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Top-right action buttons (設定 / ログイン) - fixed and always visible */
.top-actions{
  position:fixed;
  top:16px;
  right:16px;
  display:flex;
  gap:8px;
  align-items:center;
  z-index:1200;
}
.top-actions .button{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  text-decoration:none;
  background: linear-gradient(180deg,var(--btn-bg),var(--btn-bg-2));
  color:var(--btn-text);
  box-shadow:0 8px 22px rgba(0,0,0,0.06);
  border:1px solid var(--border);
  font-weight:600;
}
.top-actions .button:hover{ transform: translateY(-2px); }

@media (max-width:520px){
  .top-actions{ top:10px; right:10px; gap:6px; }
  .top-actions .button{ padding:6px 10px; font-size:14px; }
}

.debug-summary{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.5);
}

.debug-summary::-webkit-details-marker{
  display: none;
}

.debug-summary:hover{
  background: hsla(var(--theme-hue),85%,52%,0.10);
}

.debug-icon{
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.debug-title{
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text, #1f2937);
  flex: 1;
}

.debug-layer-badge{
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 2px 6px hsla(var(--theme-hue),85%,52%,0.3);
}

.debug-content{
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  display: grid;
  gap: 20px;
}

.debug-section{
  background: white;
  border: 1px solid hsla(var(--theme-hue),85%,52%,0.15);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.debug-section-title{
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid hsla(var(--theme-hue),85%,52%,0.18);
}

.debug-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.debug-grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.debug-btn{
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: linear-gradient(135deg, #f9fafb, #f3f4f6);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #374151;
}

.debug-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.debug-btn.primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  color: white;
  border-color: var(--accent-bright);
}

.debug-btn.primary:hover{
  box-shadow: 0 4px 12px hsla(var(--theme-hue),85%,52%,0.38);
}

.debug-btn.success{
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border-color: #059669;
}

.debug-btn.success:hover{
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.debug-btn.danger{
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border-color: #dc2626;
}

.debug-btn.danger:hover{
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.debug-btn.warning{
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  border-color: #d97706;
}

.debug-btn.warning:hover{
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.debug-input-row{
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.debug-input{
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.debug-input:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px hsla(var(--theme-hue),85%,52%,0.08);
}

.debug-hint{
  margin-top: 8px;
  font-size: 0.8rem;
  color: #6b7280;
  font-style: italic;
}

.debug-status{
  margin-top: 12px;
  padding: 12px;
  background: hsla(var(--theme-hue),85%,52%,0.05);
  border-radius: 6px;
  font-size: 0.85rem;
}

.status-row{
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  align-items: baseline;
}

.status-row:last-child{
  margin-bottom: 0;
}

.status-label{
  font-weight: 600;
  color: #374151;
  min-width: 80px;
}

.status-value{
  color: #6b7280;
}

.status-code{
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  color: var(--accent);
  background: hsla(var(--theme-hue),85%,52%,0.10);
  padding: 2px 6px;
  border-radius: 4px;
  word-break: break-all;
}

@media (max-width: 600px){
  .debug-grid{
    grid-template-columns: 1fr;
  }
  
  .debug-summary{
    padding: 12px 16px;
  }
  
  .debug-title{
    font-size: 1rem;
  }
}

/* Old debug styles removed */

/* Overtime alert banner */
#overtimeAlert{display:none;padding:8px;background:var(--overtime-bg);border:1px solid var(--overtime-border);color:var(--overtime-text);text-align:center;border-radius:6px;margin-bottom:8px;max-width:420px;margin-left:auto;margin-right:auto}
#overtimeAlert button{margin-left:12px;padding:4px 8px;border-radius:6px;border:1px solid var(--border);background:var(--btn-bg)}

/* Desktop: keep centered, allow wider max width */
@media (min-width: 900px){
  .log-list{max-width: min(840px, calc(100vw - 40px)); width: auto;}
}

/* Truncate warning inside end modal */
.truncate-warning{display:none;margin-top:8px;padding:10px;border-radius:10px;background:var(--overtime-bg);border:1px solid var(--overtime-border);color:var(--overtime-text)}
.truncate-warning .actions{display:flex;gap:8px;margin-top:8px;justify-content:flex-end}
.truncate-warning button{padding:6px 8px}

/* character counter next to inputs in modal */
.char-counter{display:inline-block;margin-left:8px;font-size:12px;color:var(--muted);background:var(--chip-bg);padding:4px 8px;border-radius:999px;border:1px solid rgba(0,0,0,0.03)}
.char-counter.small{font-size:11px;color:var(--muted);padding:2px 4px}

/* Embedded popup overlay for reset confirmation (not native dialog) */
.overlay{position:fixed;inset:0;background:rgba(255,255,255,0.6);align-items:center;justify-content:center;z-index:80;display:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* Login modal overlay (ensure full-screen overlay and centered modal) */
.modal-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(255,255,255,0.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:1100}
.modal-overlay[aria-hidden="false"]{display:flex}
.modal-overlay .modal{background:#ffffff;border:1px solid rgba(0,0,0,0.08);padding:22px;border-radius:12px;min-width:320px;max-width:520px;box-shadow:0 20px 60px rgba(2,6,23,0.45);color:var(--text-strong)}
.modal-overlay .modal h3{margin:0 0 8px 0;color:var(--text-strong);font-weight:700}
.modal-overlay .modal .modal-body{display:flex;flex-direction:column;gap:10px}
.modal-overlay .modal .modal-body label{display:flex;flex-direction:column;font-size:0.95rem;color:var(--muted)}
.modal-overlay .modal .modal-body input{padding:10px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);margin-top:6px;background:#fff;color:#0b1220}
.modal-overlay .modal .modal-body input::placeholder{color:rgba(11,18,32,0.4)}
.modal-overlay .modal .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}
.modal-overlay .modal .modal-actions .button{padding:8px 14px;border-radius:8px}
.modal-overlay .modal .modal-actions .button#topBtnLogin{background:linear-gradient(180deg,#6d28d9,#8b5cf6);color:#fff;border:none}
.modal-overlay .modal .modal-actions .button.top-btn-register{background:transparent;border:1px solid rgba(0,0,0,0.08);color:var(--text-strong)}
.modal-overlay .modal .modal-actions .button.top-btn-close{background:transparent;border:1px solid rgba(0,0,0,0.06);color:var(--muted)}
.top-login-status{color:var(--muted);margin-top:8px}

/* utility classes moved from inline styles in index.html */
.text-center{ text-align:center }
.mt-8{ margin-top:8px }
.mt-10{ margin-top:10px }
.form-dialog{ max-width:480px; padding:16px }
.actions-right{ text-align:right; margin-top:8px }
.code-inline{ word-break:break-all; max-width:420px; display:inline-block }

/* additional spacing and container utilities used by history/admin pages */
.mt-12{ margin-top:12px }
.mt-16{ margin-top:16px }
.mt-18{ margin-top:18px }
  .container-720{ max-width:var(--content-max-width); margin:18px auto }

/* Date range controls (history page) */
.date-range-controls{ display:flex; gap:12px; align-items:center; justify-content:flex-start; margin:12px auto 18px; max-width:720px }
.date-range-controls .preset-wrap{ display:flex; gap:8px }
.preset-btn{ padding:6px 10px; border-radius:8px; border:1px solid var(--border); background:linear-gradient(180deg,#ffffff,#fbfbfb); cursor:pointer; font-weight:600 }
.preset-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,0.04) }
@media (max-width:600px){ .date-range-controls{ flex-direction:column; align-items:flex-start } }
.container-heatmap{
  max-width: 3000px;
  margin: 18px auto;
  padding: 0 20px;
}

/* Heatmap canvas styling - Responsive */
#charts canvas{
  display: block;
  margin: 0 auto;
  max-width: 3000px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background: white;
  /* 明示的に中央配置 */
  position: relative;
  left: 0;
  right: 0;
}

/* Bottle list modern card grid */
.bottle-list{
  /* Force single-column stacked cards centered horizontally */
  display: flex;
  flex-direction: column;
  align-items: center; /* center each card horizontally */
  gap: 18px;
  max-width: var(--content-max-width);
  margin: 8px auto 18px auto;
  padding: 0 12px;
  box-sizing: border-box;
}
.bottle-list .log-item{
  display:flex;
  flex-direction:column; /* stack date and metadata vertically */
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:12px;
  border-radius:10px;
  background:linear-gradient(180deg,#ffffff,#fbfbfd);
  box-shadow:0 6px 18px rgba(9,30,66,0.04);
  border:1px solid rgba(11,13,24,0.04);
  text-align:center;
  width:320px; /* card width */
  max-width:100%;
  box-sizing:border-box;
}

/* Make bottle list scrollable when content grows */
.bottle-list{
  max-height: 420px; /* adjust as desired */
  overflow-y: auto;
  padding-right: 8px; /* space for scrollbar */
}

/* Custom light scrollbar styling */
.bottle-list::-webkit-scrollbar{width:10px}
.bottle-list::-webkit-scrollbar-track{background:transparent}
.bottle-list::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.08);border-radius:8px}
.bottle-list{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,0.12) transparent}
.bottle-list .log-item strong{font-size:14px}

/* Heatmaps layout: stacked on small screens, 2 columns on desktop */
.heatmaps{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.heatmap-card{background:white;border-radius:12px;padding:12px;border:1px solid rgba(0,0,0,0.04);box-shadow:0 8px 20px rgba(9,30,66,0.04)}
.heatmap-title{font-weight:700;color:#111827;margin-bottom:8px;font-size:16px}
.heatmap-card canvas{display:block;max-width:100%;border-radius:8px}

@media (min-width: 900px){
  /* Desktop layout: two columns for heatmaps, wider bottle list and heatmap columns aligned */
  .heatmaps{grid-template-columns:1fr 1fr}
  .bottle-list{grid-template-columns:repeat(2,1fr);}
  /* Ensure heatmap containers match the bottle-list column width on desktop via --content-max-width */
  .container-heatmap{max-width:var(--content-max-width)}
  .heatmaps{max-width:var(--content-max-width)}
  .heatmap-main-title{max-width:var(--content-max-width)}
}

/* Center the bottle-list and its scrollbar on larger screens so the scrollbar sits next to the cards (like 学習ログ) */
@media (min-width: 900px){
  .bottle-list{
    max-width: 33%;
    margin-left: auto;
    margin-right: auto;
    /* keep existing internal layout (column) */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.muted{ color:var(--muted) }
.text-muted{ color:var(--text-strong) }
.overlay[aria-hidden="false"]{display:flex}
.popup-box{background:white;border-radius:10px;padding:12px;width:280px;max-width:90%;box-shadow:0 8px 24px rgba(0,0,0,0.2);border:1px solid rgba(0,0,0,0.06);transform-origin:center center;transition:transform 160ms ease,opacity 120ms ease}
.overlay[style*="display:block"] .popup-box, .overlay[style*="display:flex"] .popup-box{transform:scale(1);opacity:1}
.popup-box[hidden]{transform:scale(0.96);opacity:0}
.popup-title{font-weight:700;font-size:16px;color:var(--text-strong);text-align:center}
.popup-body{text-align:center}
.popup-actions{display:flex;justify-content:center;gap:8px;margin-top:12px}
.popup-actions button:first-child{margin-right:8px}

/* Target time input and buttons */
/* Target time row: center the label, input, button and badge */
.target-row{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:8px}
.target-row label{margin-right:4px}
#targetMinutesInput{width:72px;padding:6px;border:1px solid var(--border);border-radius:6px}
#upgradeBtn{padding:6px 10px;border-radius:6px}
#proBadge{margin-left:8px;font-weight:600;color:var(--muted)}

/* Logs header */

/* History controls (date range, draw, export) */
.history-controls{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:12px}
.history-controls label{font-size:14px}
.history-controls input[type="date"], .history-controls input[type="time"], .history-controls input[type="number"]{padding:6px 8px;border:1px solid var(--border);border-radius:6px}
.history-controls button{padding:8px 12px;border-radius:8px}

/* Sync controls (Firebase auth + upload/download) */
#syncControls{display:flex;gap:8px;align-items:center;justify-content:center}
#syncControls #syncStatus{color:var(--muted);font-size:13px}
#btnSignOut{display:none}
#syncControls label{align-self:center;font-size:13px}
#syncControls input[type="checkbox"]{margin-right:6px}

/* Auth input styles for email/password fields used in syncControls */
#syncControls .auth-input{padding:6px;border:1px solid var(--border);border-radius:6px;font-size:13px}
#syncControls .auth-label{display:flex;align-items:center;gap:6px}
#syncControls .sync-status{align-self:center;color:var(--muted);font-size:13px}

/* Inline debug panel fallback styles moved here to satisfy linter */
.debug-panel{max-width:640px;margin:20px auto;padding:12px;border-radius:8px;background:hsla(var(--theme-hue),85%,52%,0.06)}
.debug-panel summary{cursor:pointer;font-weight:700;color:var(--text-strong)}
.debug-panel .grid-row{margin-top:12px;display:grid;gap:10px}
.debug-panel .grid-row .row{display:grid;grid-template-columns:120px 1fr;gap:8px;align-items:center}
.debug-panel #addDebugLog{padding:8px 14px;background:var(--accent);color:white;border:none;border-radius:6px}
.debug-panel #debugStatus{margin-top:6px;color:#666}

/* Legacy inline style variant used on old_history.html; kept for visual parity */
.debug-panel.legacy{max-width:600px;margin:20px auto;padding:16px;border-radius:8px;background:hsla(var(--theme-hue),85%,52%,0.10)}

/* Heading utilities for test-heatmap page */
.page-subtitle{text-align:center;margin-top:6px;color:var(--muted)}
.section-heading{ text-align:center;font-weight:700;margin-bottom:8px }

/* App header */
.app-header{display:flex;flex-direction:column;gap:12px;align-items:stretch;justify-content:space-between;padding:18px;background:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(250,250,255,0.6));border-radius:14px;box-shadow:0 8px 30px rgba(9,30,66,0.04);margin-bottom:14px}
.app-header .app-title h1{margin:0;font-size:22px}
.app-header .app-title p{margin:4px 0 0 0}
.app-actions{display:flex;justify-content:flex-end;gap:12px;align-items:center}
.history-controls{display:flex;gap:8px;align-items:center}
.history-controls label{display:flex;gap:6px;align-items:center;font-size:13px}

/* Modernize buttons a bit more */
.btn-primary{background:linear-gradient(135deg,var(--accent-bright),var(--accent));color:white;padding:10px 14px;border-radius:10px;border:none;box-shadow:0 8px 24px rgba(15,23,42,0.08)}
.btn-outline{background:transparent;border:1px solid rgba(15,23,42,0.06);color:#0f172a;padding:10px 12px;border-radius:10px}
.btn-primary:hover{transform:translateY(-2px)}
.btn-outline:hover{background:rgba(15,23,42,0.02)}

/* Debug add button wrapper */
.debug-add-wrap{display:flex;justify-content:center;margin-top:6px}
.debug-add-wrap #addDebugLog{padding:8px 14px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-bright));color:#fff;border:none}

/* Make container background subtle */
.container{
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  border-radius: 16px;
  padding: 28px;
  max-width: 1100px;
  margin: 24px auto;
  box-shadow: 0 30px 80px rgba(16,24,40,0.18);
}

/* Slight spacing tweak for page content */
.container > h1{margin-bottom:4px}
#logs h4{
  text-align:center;
  margin-top:8px;
  color: var(--text-strong); /* 学習ログ（今日）の色を暗色に指定 */
}

/* Truncate warning actions (used in modal) */
.truncate-warning .actions{display:flex;gap:8px;margin-top:8px;justify-content:flex-end}
.btn-primary{background:var(--accent-3);color:white;border-color:var(--accent-3)}
.btn-primary:hover{filter:brightness(0.98)}

/* Mobile debug toast for devices without console access (iPhone) */
#mobileToast{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(0,0,0,0.85);color:white;padding:8px 12px;border-radius:8px;font-size:14px;z-index:3000;display:none;max-width:90%;text-align:center}
.toast-show{display:block;opacity:1;transition:opacity 200ms ease}
.toast-hide{opacity:0;transition:opacity 200ms ease}

/* Update banner shown when a new Service Worker / app version is available */
#updateBanner{position:fixed;left:50%;top:12px;transform:translateX(-50%);background:var(--update-bg);color:white;padding:10px 14px;border-radius:8px;z-index:4000;display:none;align-items:center;gap:12px;box-shadow:0 8px 24px rgba(0,0,0,0.12);max-width:92%}
#updateBanner .msg{flex:1;font-size:15px}
#updateBanner .actions{display:flex;gap:8px}
#updateBanner button{padding:6px 10px;border-radius:6px;border:none;background:rgba(255,255,255,0.12);color:white}
#updateBanner button.primary{background:white;color:var(--update-bg)}

/* Visual flash for save button when tapped to confirm interaction */
.save-flash{box-shadow:0 0 0 3px rgba(184,146,88,0.45);}

/* update controls (manual check) */
.update-controls{max-width:420px;margin:6px auto 0 auto;text-align:center;display:none}
.update-controls .btn-ghost{border-radius:8px;padding:6px 10px}

/* Favorites popup */
.favorites-popup{
  /* use overlay centering; don't use fixed positioning here */
  position:relative;
  background:#ffffff; /* force bright white for popup cards */
  border-radius:12px;
  padding:12px;
  box-shadow:0 14px 40px rgba(34,20,35,0.12);
  width:320px;max-width:92%;z-index:500;display:block
}
.favorites-popup[aria-hidden="false"]{display:block}
.favorites-popup .fav-header{font-weight:700;margin-bottom:8px;text-align:center}
.favorites-popup .fav-body{display:flex;flex-direction:column;gap:8px}
.fav-add{display:flex;gap:8px;align-items:center}
.fav-add input{flex:1;padding:8px;border-radius:8px;border:1px solid var(--border)}
.fav-add button{padding:8px 10px;border-radius:8px;background:linear-gradient(180deg,var(--fav-accent),var(--fav-accent-2));color:#fff;border:none}
.fav-list{max-height:240px;overflow:auto;display:flex;flex-direction:column;gap:6px}
.fav-item{display:flex;justify-content:space-between;align-items:center;padding:8px;border-radius:8px;background:linear-gradient(180deg,var(--card),var(--card));border:1px solid var(--border)}
.fav-item button{margin-left:8px;padding:6px 8px;border-radius:6px}
.fav-actions{display:flex;justify-content:center;margin-top:8px}

/* small favorite icon near inputs */
#favOpenBtn{margin-left:6px;padding:6px 8px;border-radius:8px;background:transparent;border:1px solid var(--border);cursor:pointer}

/* Small screen adjustments */
@media (max-width:600px){
  body{margin:12px}
  .container-720{max-width:92%;margin:12px auto}
  .container-heatmap{max-width:100%;padding:0 10px}
  .bottle{width:130px;height:210px}
  .circle-wrap{width:132px;height:132px}
  .countdown-text{font-size:18px}
  .controls{gap:8px}
  .controls button{min-width:64px;padding:8px 10px;font-size:14px}
  .log-list{gap:10px}
  .log-item{padding:10px}
  .stats .big{font-size:22px}
}

/* Make reset confirmation primary button color follow background theme */
#resetConfirmYes{ padding:10px 14px;border-radius:10px;border:none; background: linear-gradient(180deg,var(--fav-accent),var(--fav-accent-2)); color:#fff; box-shadow: 0 8px 20px rgba(0,0,0,0.08); cursor:pointer }
#resetConfirmYes:hover{ transform: translateY(-2px) }
/* Save button in end modal follows background theme too */
#saveBtn{ padding:10px 14px;border-radius:10px;border:none; background: linear-gradient(180deg,var(--fav-accent),var(--fav-accent-2)); color:#fff; box-shadow: 0 8px 20px rgba(0,0,0,0.08); cursor:pointer }
#saveBtn:hover{ transform: translateY(-2px) }

/* Extra small screen / mobile refinements to prevent layout breakage */
@media (max-width:420px){
  /* let main use most of the viewport */
  main{max-width:98%;padding:10px}

  /* make controls wrap and allow flexible buttons so they don't overflow */
  .controls{flex-wrap:wrap;align-items:center}
  .controls button{min-width:0;flex:1 1 auto;margin:6px 4px}

  /* target row: stack on narrow screens */
  .target-row{flex-wrap:wrap;gap:6px;justify-content:center}
  #targetMinutesInput{width:64px}

  /* reduce bottle and circle sizes slightly */
  .bottle{width:120px;height:190px}
  .circle-wrap{width:120px;height:120px;margin:0 auto 8px auto}
  .countdown-text{font-size:16px}

  /* reduce top spacing so the important UI is visible without excessive scroll */
  .stats{margin-top:8px}
  .countdown-ui{margin-top:6px}

  /* make logs occupy full width and readable */
  .log-list{max-width:100%;padding:6px}
  .log-item{padding:10px}

  /* ensure dialogs and overlays fit */
  dialog, .popup-box{max-width:94%}
}

/* Theme picker styles */
.theme-popup{background:#ffffff;border-radius:12px;padding:12px;width:520px;max-width:92%;box-shadow:0 18px 48px rgba(34,20,35,0.18)}
/* Make the theme picker header darker for better contrast */
.theme-popup .fav-header{color:var(--text-strong)}

/* Make the auto-save label darker on the timer screen */
#autoSaveControls label{color:var(--text-strong)}
.theme-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:6px}
.theme-swatch{border-radius:8px;padding:8px;border:1px solid rgba(0,0,0,0.06);background:#ffffff;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}
.theme-swatch:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(34,20,35,0.06)}
.theme-swatch.locked{opacity:0.6;cursor:not-allowed;transform:none}
.theme-swatch .swatch-lock{font-size:12px;margin-top:6px;color:var(--muted)}

/* Unlock animation: small bounce + glow to celebrate unlocking a theme */
.swatch-sample{width:48px;height:36px;border-radius:6px;display:block;border:1px solid rgba(0,0,0,0.04)}
.swatch-label{font-size:12px;color:var(--muted);text-align:center}

/* Theme variable classes: each theme sets the core CSS variables used by the app */
.theme-sand{ --bg-1:#fffaf5; --bg-2:#fff6ec; --card:#fffef8; --muted:#6b5f4a; --theme-hue: 40; --sand-1:#fff3df; --sand-2:#d6b77a; --heatmap-1: var(--accent); --heatmap-2: var(--accent-2); }
.theme-red{ --bg-1:#fff6f6; --bg-2:#fff1f1; --card:#ffffff; --muted:#6b4b4b; --theme-hue: 352; --sand-1:#ffd6d9; --sand-2:#e05a6a; --heatmap-1: var(--accent); --heatmap-2: var(--accent-2); }
.theme-blue{ --bg-1:#f6fbff; --bg-2:#eef7ff; --card:#ffffff; --muted:#3b4b5b; --theme-hue: 212; --sand-1:#cfe8ff; --sand-2:#4a8fe0; --heatmap-1: var(--accent); --heatmap-2: var(--accent-2); }
.theme-green{ --bg-1:#f6fff6; --bg-2:#f0fff0; --card:#ffffff; --muted:#3b6b4b; --theme-hue: 140; --sand-1:#cdefd0; --sand-2:#34a853; --heatmap-1: var(--accent); --heatmap-2: var(--accent-2); }
.theme-pink{ --bg-1:#fff7fb; --bg-2:#fff2f8; --card:#ffffff; --muted:#6b4b5b; --theme-hue: 330; --sand-1:#ffd6ea; --sand-2:#f47aa6; --heatmap-1: var(--accent); --heatmap-2: var(--accent-2); }
.theme-silver{ --bg-1:#f7f8fa; --bg-2:#eef0f3; --card:#ffffff; --muted:#55606b; --theme-hue: 220; --sand-1:#e6ebf1; --sand-2:#9aa6b3; --heatmap-1: var(--accent); --heatmap-2: var(--accent-2); }

/* Background-only theme classes: allow independent background palettes without touching sand vars */
.bg-theme-sand{ --bg-1:#fffaf5; --bg-2:#fff6ec; }
.bg-theme-red{ --bg-1:#fff6f6; --bg-2:#fff1f1; }
.bg-theme-blue{ --bg-1:#f6fbff; --bg-2:#eef7ff; }
.bg-theme-green{ --bg-1:#f6fff6; --bg-2:#f0fff0; }
.bg-theme-pink{ --bg-1:#fff7fb; --bg-2:#fff2f8; }
.bg-theme-silver{ --bg-1:#f7f8fa; --bg-2:#eef0f3; }

/* Background-specific button accents so controls like '追加' match the bg theme */
.bg-theme-sand{ --fav-accent: #d6b77a; --fav-accent-2: #d6b77a; }
.bg-theme-red{ --fav-accent: #e05a6a; --fav-accent-2: #e05a6a; }
.bg-theme-blue{ --fav-accent: #4a8fe0; --fav-accent-2: #4a8fe0; }
.bg-theme-green{ --fav-accent: #34a853; --fav-accent-2: #34a853; }
.bg-theme-pink{ --fav-accent: #f47aa6; --fav-accent-2: #f47aa6; }
.bg-theme-silver{ --fav-accent: #9aa6b3; --fav-accent-2: #9aa6b3; }

/* Previously, per-background theme ring-color overrides were declared here.
   To keep the timer ring independent from background changes, those
   overrides have been removed. The ring now uses the root-level
   `--ring-color` (default: Sand) or a user-selected custom color. */

/* Solid palettes replace pastel/dark sets: stronger, single-hue sand gradients */
/* removed Solid palettes by user request */

/* swatch preview helper (show gradient using theme preview variables when applied to :root). We use inline background on each swatch for explicit preview colors. */
.theme-swatch .swatch-sample{box-shadow:inset 0 -6px 10px rgba(0,0,0,0.04)}

@media (max-width:600px){
  .theme-grid{grid-template-columns:repeat(4,1fr)}
}

/* Ring color picker in theme popup */
.ring-color-row{margin-top:12px}
.ring-color-row label{display:block;margin-bottom:6px;color:var(--muted);font-size:14px}
.ring-color-controls{display:flex;gap:8px;align-items:center}
.ring-color-controls input[type="color"]{width:40px;height:32px;padding:0;border-radius:6px;border:1px solid rgba(0,0,0,0.06);background:#fff}
.ring-custom .swatch-sample{width:48px;height:36px;border-radius:6px;display:block;border:1px solid rgba(0,0,0,0.04)}
.ring-custom .swatch-label{font-size:12px;color:var(--muted);text-align:center}
.ring-custom-wrap{display:flex;gap:8px;align-items:center}
.ring-custom{padding:8px}
.ring-color-note{margin-top:6px;font-size:12px;color:var(--muted)}

/* Preset swatches for ring color picker */
.ring-presets{display:flex;gap:8px;align-items:center;margin-top:8px}
.ring-presets .ring-preset{width:28px;height:20px;border-radius:6px;border:1px solid rgba(0,0,0,0.06);cursor:pointer;box-shadow:0 6px 12px rgba(34,20,35,0.04)}
.ring-presets .ring-preset:focus{outline:2px solid hsla(var(--theme-hue),85%,52%,0.18)}
.ring-presets .ring-preset[aria-pressed="true"]{box-shadow:0 8px 20px rgba(34,20,35,0.08);transform:translateY(-2px)}

/* layout helper for theme popup: stack two grids vertically with spacing */
.theme-columns{display:flex;gap:12px;align-items:flex-start;flex-direction:column}
.fav-subheader{font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:600}