:root{--sky-50: #f5fbff;--sky-100: #e8f7ff;--sky-200: #c9ecfb;--sky-500: #5ab7dc;--coral-100: #ffe7ed;--coral-500: #ff7f96;--coral-600: #e85f7b;--mint-100: #ddfbf3;--mint-500: #40c9aa;--honey-100: #fff4c9;--honey-500: #f4bd2a;--violet-100: #f0ebff;--ink-900: #283348;--ink-700: #46556d;--ink-500: #6d7b91;--line: rgba(73, 104, 134, .16);--white: #ffffff;--danger: #d94d64;--warning: #9b6b00;--success: #248a6c;--shadow-soft: 0 16px 42px rgba(66, 116, 158, .16);--shadow-button: 0 10px 22px rgba(232, 95, 123, .24);--radius-card: 18px;--radius-control: 14px;--font-body: "M PLUS Rounded 1c", "Kiwi Maru", "Noto Sans JP", system-ui, sans-serif;--font-ui: "Inter", "M PLUS Rounded 1c", system-ui, sans-serif;color:var(--ink-900);font-family:var(--font-body)}*{box-sizing:border-box}html,body,#app{min-height:100%}html{background:var(--sky-100)}body{margin:0;min-height:100dvh;overflow:hidden;color:var(--ink-900);background:radial-gradient(circle at 18% 8%,rgba(255,244,201,.9),transparent 24rem),radial-gradient(circle at 86% 16%,rgba(221,251,243,.72),transparent 22rem),linear-gradient(180deg,#eaf8ff,#fff7fb 58%,#f5fbff);font-family:var(--font-body);letter-spacing:0}button,input,textarea{font:inherit;letter-spacing:0}button{cursor:pointer}button:disabled,input:disabled,textarea:disabled{cursor:not-allowed;opacity:.64}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid rgba(255,127,150,.32);outline-offset:2px}img{display:block;max-width:100%}.is-hidden{display:none!important}#app{height:100dvh}.app-shell{position:relative;width:min(100%,1120px);height:100dvh;margin:0 auto;display:grid;grid-template-rows:auto 1fr;overflow:hidden}.app-shell:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#ffffff8c,#f5fbffe0),url(/img/background-sky.png);background-size:cover;background-position:center top;opacity:.74;pointer-events:none}.topbar{position:relative;z-index:3;min-height:68px;padding:calc(12px + env(safe-area-inset-top)) 16px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand-button{min-height:44px;border:0;border-radius:999px;padding:8px 14px 8px 8px;display:inline-flex;align-items:center;gap:9px;color:var(--ink-900);background:#ffffffb8;box-shadow:0 8px 24px #4d7ba31f;font-family:var(--font-ui);font-weight:800}.brand-mark{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff8d7 0 28%,transparent 30%),linear-gradient(135deg,var(--honey-500),var(--coral-500));box-shadow:inset 0 0 0 3px #ffffff94}.topbar-user{max-width:42%;min-height:36px;border-radius:999px;padding:8px 12px;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--ink-700);background:#ffffff9e;font-family:var(--font-ui);font-size:.82rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}#app-view{position:relative;z-index:2;min-height:0;overflow-y:auto;padding:8px 16px calc(92px + env(safe-area-inset-bottom));scrollbar-width:thin;scrollbar-color:rgba(70,85,109,.32) transparent}#app-view:focus{outline:0}#app-view>section{width:min(100%,1040px);margin:0 auto}.bottom-nav{position:fixed;z-index:10;left:50%;bottom:max(10px,env(safe-area-inset-bottom));width:min(calc(100% - 24px),560px);min-height:68px;padding:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;transform:translate(-50%);border:1px solid rgba(255,255,255,.78);border-radius:24px;background:#ffffffdb;box-shadow:0 18px 42px #3c678b2e;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.bottom-nav button{min-width:0;min-height:52px;border:0;border-radius:18px;display:grid;place-items:center;gap:2px;color:var(--ink-500);background:transparent;font-size:.74rem;font-weight:800}.bottom-nav button.is-active{color:var(--coral-600);background:linear-gradient(180deg,#ffe7edf2,#fff4c9ad)}@media (min-width: 768px){.topbar{padding-inline:24px}#app-view{padding:18px 24px 110px}}.eyebrow{margin:0 0 6px;color:var(--coral-600);font-family:var(--font-ui);font-size:.75rem;font-weight:800;text-transform:uppercase}.page-heading{margin:2px 0 16px}.page-heading h1{margin:0;color:var(--ink-900);font-family:var(--font-ui);font-size:clamp(1.55rem,1.35rem + .5vw,2rem);line-height:1.22}.page-heading p:not(.eyebrow){max-width:640px;margin:8px 0 0;color:var(--ink-700);font-size:.94rem;line-height:1.75}.primary-action,.secondary-action{min-height:50px;border:0;border-radius:var(--radius-control);padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-ui);font-weight:800;line-height:1.2}.primary-action{color:#fff;background:linear-gradient(135deg,var(--coral-500),var(--honey-500));box-shadow:var(--shadow-button)}.secondary-action{color:var(--ink-700);background:#ffffffd1;border:1px solid var(--line)}.state-message{min-height:42px;margin:0 0 14px;padding:10px 13px;border-radius:var(--radius-control);border:1px solid var(--line);color:var(--ink-700);background:#ffffffd1;font-size:.9rem;line-height:1.55}.state-success{color:var(--success);border-color:#248a6c38;background:#ddfbf3d6}.state-warning{color:var(--warning);border-color:#f4bd2a47;background:#fff4c9d6}.state-error{color:var(--danger);border-color:#d94d643d;background:#ffe7eddb}.segmented-control{min-height:48px;padding:5px;border-radius:16px;display:grid;grid-template-columns:repeat(2,1fr);background:#e8f7ffcc}.segment{min-height:38px;border:0;border-radius:12px;color:var(--ink-500);background:transparent;font-family:var(--font-ui);font-weight:800}.segment.is-active{color:var(--ink-900);background:#fff;box-shadow:0 8px 18px #4d7ba31f}.form-error{min-height:22px;margin:0;color:var(--danger);font-size:.84rem;line-height:1.45}.nav-icon{width:24px;height:24px;position:relative}.home-icon:before,.map-icon:before,.ranking-icon:before,.settings-icon:before{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-radius:8px;background:currentColor}.home-icon:before{clip-path:polygon(50% 0,100% 42%,86% 42%,86% 100%,14% 100%,14% 42%,0 42%)}.map-icon:before{border-radius:50% 50% 50% 0;transform:rotate(-45deg)}.ranking-icon:before{top:5px;right:2px;bottom:3px;left:2px;clip-path:polygon(0 45%,22% 45%,22% 100%,0 100%,0 45%,39% 20%,61% 20%,61% 100%,39% 100%,39% 20%,78% 0,100% 0,100% 100%,78% 100%)}.settings-icon:before{border-radius:50%;box-shadow:0 -8px 0 -4px currentColor,0 8px 0 -4px currentColor,8px 0 0 -4px currentColor,-8px 0 0 -4px currentColor}.toast-root{position:fixed;z-index:30;top:calc(12px + env(safe-area-inset-top));left:50%;width:min(calc(100% - 28px),420px);transform:translate(-50%);pointer-events:none}.toast{margin-bottom:8px;padding:12px 14px;border-radius:14px;color:var(--ink-900);background:#fffffff0;box-shadow:var(--shadow-soft);opacity:0;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease;font-weight:700}.toast.is-visible{opacity:1;transform:translateY(0)}.toast-success{color:var(--success)}.toast-error{color:var(--danger)}.auth-screen{min-height:calc(100dvh - 96px);display:grid;align-items:center;gap:16px}.auth-visual{position:relative;min-height:116px}.sun-disc{position:absolute;left:18px;top:8px;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#fff8d7 0 20%,var(--honey-500) 58%,var(--coral-500) 100%);box-shadow:0 18px 40px #f4bd2a47}.cloud{position:absolute;height:46px;border-radius:999px;background:#ffffffd1;box-shadow:var(--shadow-soft)}.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}.cloud:before{width:46px;height:46px;left:22px;bottom:14px}.cloud:after{width:58px;height:58px;right:24px;bottom:8px}.cloud-a{right:22px;top:34px;width:164px}.cloud-b{right:92px;top:82px;width:118px;opacity:.78}.auth-card,.diagnosis-card,.record-card,.metric-card,.weather-breakdown,.map-panel,.ranking-panel,.settings-section{border:1px solid rgba(255,255,255,.76);border-radius:var(--radius-card);background:#ffffffe0;box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.auth-card{padding:22px}.auth-card h1{margin:0;font-family:var(--font-ui);font-size:2.25rem;line-height:1.1}.auth-lead{margin:10px 0 20px;color:var(--ink-700);line-height:1.7}.auth-form{margin-top:16px;display:grid;gap:12px}.auth-form label,.text-field{display:grid;gap:7px;color:var(--ink-700);font-size:.9rem;font-weight:800}.auth-form input,.text-field textarea{width:100%;min-height:48px;border:1px solid var(--line);border-radius:var(--radius-control);padding:0 13px;color:var(--ink-900);background:#f5fbffeb}.text-field textarea{min-height:112px;padding-block:12px;resize:vertical}.label-choice{margin:0;padding:0;border:0;display:grid;gap:8px}.label-choice legend{margin-bottom:4px;color:var(--ink-700);font-size:.9rem;font-weight:800}.label-choice label{min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;gap:9px;background:#ffffffb8}.home-page{display:grid;gap:14px}.diagnosis-card{padding:18px;display:grid;grid-template-columns:1fr 112px;align-items:center;gap:12px}.diagnosis-card h2{margin:0;color:var(--coral-600);font-family:var(--font-ui);font-size:2rem;line-height:1.1}.diagnosis-title{margin:7px 0 0;color:var(--ink-700);font-family:var(--font-ui);font-weight:800}.diagnosis-reason{margin:12px 0 0;color:var(--ink-700);font-size:.9rem;line-height:1.65}.diagnosis-art{width:112px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(180deg,var(--sky-100),var(--honey-100))}.diagnosis-art img{width:100%;height:100%;object-fit:cover}.score-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.metric-card{min-height:132px;padding:15px;display:grid;align-content:space-between}.metric-card span,.weather-breakdown span{color:var(--ink-500);font-size:.82rem;font-weight:800}.metric-card strong,.weather-breakdown strong{color:var(--ink-900);font-family:var(--font-ui);font-size:1.8rem;line-height:1.1}.metric-card small{color:var(--ink-500);line-height:1.45}.score-meter{height:10px;border-radius:999px;overflow:hidden;background:linear-gradient(90deg,var(--coral-100),var(--sky-100),var(--mint-100))}#score-meter-fill{height:100%;width:50%;border-radius:inherit;background:linear-gradient(90deg,var(--coral-500),var(--honey-500),var(--mint-500));transition:width .24s ease}.weather-breakdown{padding:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.weather-breakdown article{min-width:0;min-height:84px;padding:11px;border-radius:14px;display:grid;gap:6px;background:#f5fbffc7}.weather-breakdown strong{font-size:1.18rem;overflow-wrap:anywhere}.record-card{padding:18px;display:grid;gap:14px}.record-card h2,.settings-section h2{margin:0;font-size:1.15rem}.record-card p:not(.eyebrow){margin:8px 0 0;color:var(--ink-700);line-height:1.65}.auto-location-status{margin:0}.map-panel{height:min(64dvh,620px);min-height:420px;padding:8px;overflow:hidden}#map-canvas{width:100%;height:100%;border-radius:14px;overflow:hidden;background:var(--sky-100)}.weather-marker{border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--sky-500);border:3px solid white;box-shadow:0 6px 14px #28334838}.weather-marker span{display:block;width:10px;height:10px;margin:7px;border-radius:50%;background:#fff}.weather-marker.sunny,.weather-marker.current-user{background:var(--honey-500)}.weather-marker.rainy,.weather-marker.thunderstorm,.weather-marker.stormy{background:var(--coral-500)}.weather-marker.cloudy{background:var(--sky-500)}.weather-marker.snowy{background:var(--mint-500)}.map-popup{display:grid;gap:4px;min-width:140px}.map-popup span,.map-popup small{color:var(--ink-700)}.ranking-panel{padding:10px}.ranking-header-row{display:none}.ranking-list{display:grid;gap:9px}.ranking-row{min-height:72px;padding:12px;border:1px solid var(--line);border-radius:14px;display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;background:#ffffffb8}.ranking-row.is-current-user{border-color:#ff7f9652;background:linear-gradient(135deg,#ffe7ede6,#e8f7ffd1)}.ranking-rank{font-family:var(--font-ui);font-size:1.25rem}.ranking-user{min-width:0;display:grid;gap:3px}.ranking-user span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}.ranking-user small{color:var(--ink-500)}.ranking-score{font-family:var(--font-ui);font-weight:900}.settings-page,.settings-form{display:grid;gap:14px}.settings-section{padding:16px;display:grid;gap:14px}.toggle-row{min-height:78px;padding:12px;border:1px solid var(--line);border-radius:14px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:#f5fbffb8}.toggle-row span{font-weight:900}.toggle-row p,.privacy-note{margin:5px 0 0;color:var(--ink-700);font-size:.86rem;line-height:1.55}.toggle-row input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:54px;height:32px;border-radius:999px;border:1px solid var(--line);background:#d8e3ef;position:relative}.toggle-row input[type=checkbox]:before{content:"";position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 4px 10px #2833482e;transition:transform .18s ease}.toggle-row input[type=checkbox]:checked{background:linear-gradient(135deg,var(--mint-500),var(--sky-500))}.toggle-row input[type=checkbox]:checked:before{transform:translate(22px)}.profile-summary{min-height:68px;display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center}.profile-avatar{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--coral-500),var(--sky-500));font-family:var(--font-ui);font-size:1.4rem;font-weight:900}.profile-summary strong,.profile-summary span{display:block;min-width:0;overflow-wrap:anywhere}.profile-summary span{color:var(--ink-500);font-size:.86rem}.settings-actions{display:grid;gap:10px}@media (max-width: 390px){.diagnosis-card{grid-template-columns:1fr}.diagnosis-art{width:96px}.score-grid,.weather-breakdown{grid-template-columns:1fr}}@media (min-width: 768px){.auth-screen{min-height:calc(100dvh - 126px);grid-template-columns:minmax(260px,.85fr) minmax(360px,460px)}.auth-card{padding:28px}.home-page{grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);align-items:start}.home-page .page-heading,.home-page #home-alert,.home-page .record-card{grid-column:1 / -1}.diagnosis-card{min-height:298px}.weather-breakdown{grid-column:2;grid-row:4;grid-template-columns:1fr}.settings-form{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.settings-actions{grid-column:1 / -1;grid-template-columns:1fr auto}.ranking-header-row{padding:8px 12px 12px;display:grid;grid-template-columns:64px 1fr 100px;color:var(--ink-500);font-size:.82rem;font-weight:900}}