:root {
  color: #1e2d43;
  background: #eff7ff;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #eaf4ff 0, #f5f9fe 330px, #f5f8fc 100%); }
button, input { font: inherit; }
.shell { max-width: 680px; margin: 0 auto; padding: 27px 20px 38px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 2px 22px; }
.eyebrow, .section-label { margin: 0; color: #72839a; font-size: 10px; font-weight: 750; letter-spacing: .1em; }
.eyebrow { color: #567fae; }
h1 { margin: 5px 0 1px; font-size: 26px; letter-spacing: -.04em; }
.subtitle, .muted { margin: 0; color: #718096; }
.subtitle { font-size: 12px; }
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 99px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-offline { color: #92703b; background: #fff5df; }
.badge-online { color: #337659; background: #e8f7ef; }
.status-card, .usage-card, .panel { border: 1px solid #e5edf6; border-radius: 19px; background: rgba(255,255,255,.96); box-shadow: 0 8px 25px rgba(51,85,125,.055); }
.status-card { display: flex; align-items: center; gap: 13px; padding: 17px 18px; margin-bottom: 12px; }
.status-icon { display: grid; width: 40px; height: 40px; flex: none; place-items: center; border-radius: 14px; background: #eaf3ff; color: #567fae; font-size: 18px; font-weight: 800; }
.status-copy { min-width: 0; flex: 1; }
.status-copy h2 { margin: 4px 0; font-size: 15px; }
.status-copy p:last-child { font-size: 11px; line-height: 1.5; }
.tag, .zone, .cap { padding: 6px 9px; border-radius: 99px; background: #f0f4f9; color: #65758a; font-size: 10px; font-weight: 700; white-space: nowrap; }
.tag-blue { background: #eaf3ff; color: #547eaf; }
.usage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.usage-card { padding: 19px; background: linear-gradient(145deg, #fff 30%, #f8fbff 100%); }
.usage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.usage-head strong { display: block; margin-top: 8px; color: #223c5c; font-size: 32px; line-height: 1.1; letter-spacing: -.05em; }
.cap { padding: 6px 8px; background: #f2f6fb; }
.track { height: 7px; overflow: hidden; margin: 16px 0 9px; border-radius: 99px; background: #e9f0f7; }
.track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #9ac2ed, #6b9fd7); transition: width .2s; }
.track.purple span { background: linear-gradient(90deg, #b8c9eb, #849ed2); }
.small { font-size: 10px; line-height: 1.5; }
.panel { padding: 19px; margin-top: 12px; }
.app-panel { display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 11px; }
.app-symbol { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 14px; background: #eaf3ff; color: #5d86b3; font-size: 20px; font-weight: 800; }
.app-description h2 { margin: 3px 0 3px; font-size: 15px; }
.quick-actions { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 9px; }
.action-message { grid-column: 1 / -1; }
.primary, .secondary { min-height: 43px; padding: 10px 12px; border: 0; border-radius: 12px; font-size: 12px; font-weight: 750; cursor: pointer; }
.primary { background: #6d9ed4; color: #fff; box-shadow: 0 4px 12px rgba(75,127,184,.18); }
.secondary { background: #edf4fb; color: #456786; }
button:disabled { cursor: not-allowed; opacity: .48; box-shadow: none; }
.settings-panel { padding: 0 18px; }
details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 0; cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "+"; color: #718cac; font-size: 20px; line-height: 1; }
details[open] > summary::after { content: "−"; }
.settings-panel summary span:first-child { display: grid; gap: 4px; }
.settings-panel summary strong { font-size: 14px; }
.summary-note { margin-left: auto; color: #8292a6; font-size: 10px; }
.settings-body { padding: 0 0 17px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; }
.panel h2 { margin: 5px 0 0; font-size: 18px; }
.zone { font-size: 10px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.fields label { display: flex; flex-direction: column; gap: 7px; color: #53647a; font-size: 11px; font-weight: 700; }
.input-unit { display: flex; align-items: center; padding-right: 10px; border: 1px solid #e0e9f2; border-radius: 11px; background: #f8fbfe; }
.input-unit input { width: 100%; min-width: 0; padding: 11px 9px; border: 0 !important; outline: none; background: transparent; color: #263c56; font-size: 17px; font-weight: 650; }
.input-unit input::placeholder { color: #a0adbc; font-size: 12px; font-weight: 500; }
.input-unit em { color: #8091a5; font-size: 11px; font-style: normal; }
input[type=time] { width: 100%; padding: 10px; border: 1px solid #e0e9f2; border-radius: 11px; background: #f8fbfe; color: #263c56; font-size: 14px; }
input:focus { border-color: #80aada !important; box-shadow: 0 0 0 3px rgba(100,154,208,.12); }
.helper { margin: 10px 0 0; color: #75869b; font-size: 11px; line-height: 1.55; }
.divider { height: 1px; margin: 18px 0; background: #eaf0f6; }
.panel h3 { margin: 0; font-size: 13px; }
.save-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.install-help { padding-top: 0; padding-bottom: 0; }
.limiter-panel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px; border-color: #dce8f3; background: #fbfdff; }
.limiter-panel strong { color: #3c765c; font-size: 17px; }
.limiter-panel.is-paused { border-color: #ead9b6; background: #fffaf0; }
.limiter-panel.is-paused strong { color: #956e2c; }
.limiter-panel p { margin: 4px 0 0; }
.limiter-note { grid-column: 1 / -1; }
.switch-label { display: flex; align-items: center; gap: 9px; color: #53647a; font-size: 12px; font-weight: 700; cursor: pointer; }
.switch-label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; width: 42px; height: 24px; border-radius: 99px; background: #b5c0cc; transition: background .18s ease; }
.switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: white; box-shadow: 0 1px 3px #0003; transition: transform .18s ease; }
.switch-label input:checked + .switch-track { background: #65aa83; }
.switch-label input:checked + .switch-track::after { transform: translateX(18px); }
.switch-label input:focus-visible + .switch-track { outline: 3px solid #7aa8dc; outline-offset: 2px; }
.install-help p { margin: 0 0 16px; color: #708096; font-size: 11px; line-height: 1.65; }
.footnote { margin: 16px 2px 0; color: #738399; font-size: 10px; line-height: 1.65; }
footer { padding-top: 17px; color: #96a2b1; font-size: 10px; text-align: center; }
.small-error { color: #9f574e; }
.small-ok { color: #38775a; }
.auth-gate { max-width: 440px; margin: min(12vh, 90px) auto 0; padding: 28px; }
.auth-mark { display: grid; width: 46px; height: 46px; margin-bottom: 19px; place-items: center; border-radius: 15px; background: #eaf3ff; color: #4d78aa; font-size: 14px; font-weight: 800; }
.auth-gate h1 { margin: 7px 0 9px; font-size: 23px; }
.auth-gate > .muted { font-size: 12px; line-height: 1.6; }
.auth-gate form { display: grid; gap: 10px; margin-top: 20px; }
.auth-gate label, .credential-panel label { color: #53647a; font-size: 11px; font-weight: 700; }
.auth-gate input, .credential-panel input { width: 100%; padding: 12px; border: 1px solid #dce6f0; border-radius: 11px; background: #f8fbfe; font-size: 16px; }
.auth-note { margin: 18px 0 0; color: #8795a6; font-size: 10px; line-height: 1.65; }
.credential-panel form { display: grid; gap: 11px; }
.credential-panel form > label { display: grid; gap: 7px; }
.credential-panel form > button { justify-self: end; }
.link-button { padding: 0; border: 0; background: transparent; color: #587ba0; font-size: inherit; text-decoration: underline; }
.child-view { max-width: 520px; margin: 2vh auto; padding: 12px 4px 30px; color: #263b50; }
.child-header { display: flex; align-items: center; gap: 9px; margin: 10px 3px 16px; color: #425c76; font-size: 15px; font-weight: 700; }
.child-spark { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 11px; background: #e7f1ff; color: #5988c1; font-size: 16px; }
.mascot-slot { display: grid; width: 74px; height: 82px; margin: 0 4px 12px auto; place-items: center; }
.mascot-sprite { width: 72px; height: 78px; background-image: url('/assets/pets/ninjin-kun-spritesheet.png'); background-repeat: no-repeat; background-size: 800% 1100%; background-position: 0% 0%; }
.mascot-sprite.is-greeting { animation: carrot-wave 720ms steps(3, end) forwards, carrot-float 3.2s ease-in-out infinite; }
.mascot-sprite.is-cheering { animation: carrot-hop 900ms steps(4, end) forwards; }
.child-card { padding: 19px 20px; border: 1px solid #e3ebf3; border-radius: 21px; background: #fff; box-shadow: 0 7px 22px rgba(48,78,108,.055); }
.child-today { background: linear-gradient(145deg,#fff 35%,#f0f8ff); }
.child-card p { margin: 0; color: #60748a; font-size: 13px; font-weight: 650; }
.child-card strong { display: block; margin: 8px 0 12px; color: #25476d; font-size: clamp(36px, 11vw, 50px); font-weight: 750; letter-spacing: -.04em; line-height: 1.1; }
.child-week { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 11px; background: linear-gradient(145deg,#fff 30%,#f5f2ff); }
.child-week strong { margin: 5px 0 0; color: #564c83; font-size: 23px; letter-spacing: -.02em; }
.child-gauge { width: 100%; height: 10px; overflow: hidden; border-radius: 99px; background: #e9eef4; }
.child-week .child-gauge { width: 36%; min-width: 70px; background: #ece8f7; }
.child-gauge span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#5dbba0,#80cf9f); transition: width .25s ease; }
.child-week .child-gauge span { background: linear-gradient(90deg,#9383cc,#b1a1df); }
.child-now { display: flex; align-items: flex-start; gap: 13px; margin-top: 11px; padding: 17px; border: 1px solid #e7eee8; border-radius: 18px; background: #f5faf6; }
.child-now > span { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border-radius: 12px; background: #e6f4ea; color: #57866b; font-size: 18px; }
.child-now strong { display: block; margin: 2px 0 5px; font-size: 14px; }
.child-now p { margin: 0; color: #64776b; font-size: 12px; line-height: 1.55; }
.child-status { min-height: 18px; margin: 13px 4px 0; color: #8090a0; font-size: 10px; }
.child-view footer { color: #99a5b0; }
@media (prefers-reduced-motion: no-preference) {
  .mascot-slot { animation: mascot-pop 380ms cubic-bezier(.2,.8,.2,1) both; }
  .mascot-sprite:not(.is-greeting):not(.is-cheering) { animation: carrot-idle 3.4s steps(1, end) infinite, carrot-float 3.2s ease-in-out infinite; }
  html[data-page-hidden="true"] .mascot-slot,
  html[data-page-hidden="true"] .mascot-sprite { animation-play-state: paused; }
}
@keyframes mascot-pop {
  0% { opacity: .65; transform: translateY(5px) scale(.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes carrot-idle {
  0%, 49.9% { background-position: 0% 0%; }
  50%, 100% { background-position: 14.2857143% 0%; }
}
@keyframes carrot-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes carrot-wave {
  0% { background-position: 0% 30%; }
  100% { background-position: 42.8571429% 30%; }
}
@keyframes carrot-hop {
  0% { background-position: 0% 40%; }
  100% { background-position: 57.1428571% 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .mascot-slot, .mascot-sprite { animation: none !important; }
  .mascot-sprite { background-position: 0% 0%; }
}
@media (max-width: 560px) {
  .shell { padding: 19px 14px calc(24px + env(safe-area-inset-bottom)); }
  .topbar { align-items: flex-start; margin: 3px 1px 16px; }
  h1 { font-size: 23px; }
  .subtitle { font-size: 11px; }
  .badge { padding: 7px 9px; font-size: 10px; }
  .status-card { gap: 10px; padding: 14px; }
  .status-icon { width: 36px; height: 36px; }
  .status-copy h2 { font-size: 13px; }
  .status-copy p:last-child { font-size: 10px; }
  .status-card #active-state { display: none; }
  .usage-grid { grid-template-columns: 1fr; gap: 9px; }
  .usage-card { padding: 15px; }
  .usage-head strong { font-size: 29px; }
  .track { margin: 12px 0 8px; }
  .panel { padding: 16px; margin-top: 10px; }
  .settings-panel { padding: 0 16px; }
  .fields { gap: 9px; }
  .fields label { font-size: 10px; }
  .input-unit input { padding: 10px 8px; font-size: 16px; }
  .app-panel { padding: 14px; }
  .app-panel #app-tag { font-size: 9px; }
  .footnote { font-size: 10px; }
  .auth-gate { margin-top: 8vh; padding: 23px; }
  .auth-gate h1 { font-size: 21px; }
  .child-view { margin: 1vh auto; padding-top: 5px; }
  .child-card { padding: 17px; }
  .child-week strong { font-size: 21px; }
}