@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --ink:#182329; --muted:#718087; --paper:#f5f5ee; --panel:rgba(255,255,251,.86); --line:#dce2d8; --teal:#146b65; --coral:#ea7358; --yellow:#f3c969; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--paper); font-family:'DM Sans','Hiragino Kaku Gothic ProN',sans-serif; }
body::before, body::after { position:fixed; z-index:-1; width:38vw; height:38vw; border-radius:50%; content:''; opacity:.58; }
body::before { top:-17vw; right:-7vw; background:var(--yellow); }
body::after { bottom:-21vw; left:-12vw; background:#9ed5c9; }
body.wallpaper-sunset { background:#fff0e7; }
body.wallpaper-sunset::before { background:#f6a55f; }
body.wallpaper-sunset::after { background:#c85c7b; }
body.wallpaper-ocean { background:#e8f5f7; }
body.wallpaper-ocean::before { background:#b8e4ed; }
body.wallpaper-ocean::after { background:#4c9db5; }
body.wallpaper-night { color:#f4f6f3; background:#20283c; }
body.wallpaper-night::before { background:#4b426c; }
body.wallpaper-night::after { background:#27304f; }
body.wallpaper-night .panel,body.wallpaper-night .login-card { --ink:#f4f6f3; --muted:#c2cbd0; --line:#536078; --panel:rgba(31,39,59,.88); }
.login-screen { display:grid; min-height:100vh; place-items:center; padding:24px; }
.quick-menu-wrap { position:fixed; left:16px; bottom:16px; z-index:4; }
.guest-button { width:30px; height:30px; border:1px solid var(--line); border-radius:50%; color:var(--muted); background:rgba(255,255,255,.72); cursor:pointer; font:600 .9rem 'Space Grotesk',sans-serif; }
.guest-button:hover { border-color:var(--teal); color:var(--teal); }
.quick-menu { position:absolute; left:0; bottom:38px; display:grid; min-width:130px; gap:4px; border:1px solid var(--line); border-radius:10px; padding:6px; background:#fff; box-shadow:0 10px 24px rgba(51,77,67,.14); }
.quick-menu[hidden] { display:none; }
.quick-menu button { border:0; border-radius:6px; padding:9px 10px; color:var(--ink); background:transparent; cursor:pointer; font:inherit; font-size:.78rem; text-align:left; white-space:nowrap; }
.quick-menu button:hover { color:var(--teal); background:#eef7f4; }
.login-card { width:min(100%,420px); border:1px solid rgba(220,226,216,.9); border-radius:18px; padding:36px; background:var(--panel); box-shadow:0 18px 50px rgba(51,77,67,.1); backdrop-filter:blur(12px); }
.login-card h1 { margin-bottom:12px; }
.login-copy { margin:0 0 28px; color:var(--muted); }
.login-form .field { margin-bottom:18px; }
.setup-note { color:var(--muted); }
.account-divider { display:flex; align-items:center; gap:12px; margin:26px 0 22px; color:var(--muted); font-size:.72rem; }
.account-divider::before,.account-divider::after { flex:1; height:1px; background:var(--line); content:''; }
.signup-form h2 { margin-bottom:18px; font-size:1.1rem; }
.secondary-button { width:100%; border:1px solid var(--teal); border-radius:9px; padding:12px 16px; color:var(--teal); background:transparent; cursor:pointer; font:inherit; font-weight:700; }
.secondary-button:hover { color:#fff; background:var(--teal); }
.back-button { display:block; margin:20px auto 0; border:0; color:var(--muted); background:transparent; cursor:pointer; font:inherit; font-size:.8rem; }
.back-button:hover { color:var(--teal); }
.settings-card { max-width:460px; }
.wallpaper-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
.wallpaper-options .field-label { grid-column:1 / -1; }
.wallpaper-option { display:grid; gap:8px; color:var(--ink); cursor:pointer; font-size:.8rem; font-weight:700; }
.wallpaper-option input { position:absolute; opacity:0; pointer-events:none; }
.wallpaper-preview { display:block; height:84px; border:2px solid transparent; border-radius:10px; }
.wallpaper-option input:checked + .wallpaper-preview { border-color:var(--teal); box-shadow:0 0 0 3px rgba(20,107,101,.14); }
.wallpaper-sunrise { background:linear-gradient(135deg,#f3c969,#ea7358 55%,#9ed5c9); }
.wallpaper-mint { background:linear-gradient(135deg,#eaf7f2,#9ed5c9 55%,#b2c8ed); }
.wallpaper-sunset { background:linear-gradient(135deg,#f6a55f,#c85c7b 55%,#4b407d); }
.wallpaper-ocean { background:linear-gradient(135deg,#b8e4ed,#4c9db5 55%,#22577a); }
.wallpaper-night { background:linear-gradient(135deg,#27304f,#182329 55%,#4b426c); }
.sound-setting { align-items:center; display:flex; gap:10px; margin-top:24px; color:var(--ink); font-size:.82rem; font-weight:700; }
.sound-setting input { width:18px; height:18px; accent-color:var(--teal); }
.notification-setting { display:grid; gap:8px; margin-top:18px; }
.notification-setting .secondary-button { padding:10px 12px; font-size:.8rem; }
.notification-setting small { color:var(--muted); font-size:.72rem; }
.header-actions { align-items:flex-start; display:flex; flex-direction:column; gap:10px; }
.logout-button { align-self:flex-end; border:0; color:var(--muted); background:transparent; cursor:pointer; font:inherit; font-size:.78rem; }
.logout-button:hover { color:var(--coral); }
[hidden] { display:none !important; }
.app-shell { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:72px 0 32px; }
.time-notice { position:fixed; top:22px; right:22px; z-index:8; align-items:center; display:flex; gap:12px; width:min(360px,calc(100% - 32px)); border:1px solid #9ed5c9; border-left:5px solid var(--teal); border-radius:12px; padding:14px 14px 14px 12px; color:var(--ink); background:rgba(255,255,251,.96); box-shadow:0 14px 34px rgba(51,77,67,.2); animation:notice-in 220ms ease-out; }
.time-notice[hidden] { display:none; }
.time-notice-icon { display:grid; width:28px; height:28px; flex:0 0 auto; place-items:center; border-radius:50%; color:#fff; background:var(--teal); font-weight:700; }
.time-notice div { display:grid; gap:3px; }
.time-notice strong { font-size:.9rem; }
.time-notice span:not(.time-notice-icon) { color:var(--muted); font-size:.76rem; }
.time-notice button { margin-left:auto; border:0; color:var(--muted); background:transparent; cursor:pointer; font-size:1.2rem; line-height:1; }
@keyframes notice-in { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
.app-header { align-items:flex-end; display:flex; justify-content:space-between; gap:24px; margin-bottom:42px; }
.eyebrow,.section-number { margin:0 0 10px; color:var(--coral); font-size:.74rem; font-weight:700; letter-spacing:.15em; }
h1,h2 { margin-top:0; font-family:'Space Grotesk','Hiragino Kaku Gothic ProN',sans-serif; }
h1 { margin-bottom:10px; font-size:clamp(2.5rem,6vw,4.8rem); letter-spacing:-.04em; line-height:.95; }
h2 { margin-bottom:0; font-size:1.55rem; letter-spacing:-.03em; }
.header-copy { margin:0; color:var(--muted); font-size:1rem; }
.connection-status { align-items:center; display:inline-flex; gap:8px; align-self:flex-start; border:1px solid var(--line); border-radius:999px; padding:8px 13px; color:var(--muted); background:rgba(255,255,255,.5); font-size:.8rem; white-space:nowrap; }
.connection-status.is-shared { color:var(--teal); }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--coral); }
.is-shared .status-dot { background:#39a978; }
.dashboard-grid { display:grid; grid-template-columns:minmax(280px,.82fr) minmax(420px,1.18fr); gap:24px; }
.panel { border:1px solid rgba(220,226,216,.9); border-radius:18px; background:var(--panel); box-shadow:0 18px 50px rgba(51,77,67,.08); backdrop-filter:blur(12px); }
.form-panel,.list-panel { padding:30px; }
.panel-heading { align-items:flex-start; display:flex; justify-content:space-between; margin-bottom:30px; }
.section-number { margin-bottom:8px; }
.panel-mark { display:grid; width:38px; height:38px; place-items:center; border-radius:50%; color:#fff; background:var(--teal); font-size:1.5rem; }
.field { display:grid; gap:8px; margin-bottom:18px; }
.field>span { color:var(--muted); font-size:.78rem; font-weight:600; }
.share-fields { margin-top:6px; border-top:1px solid var(--line); padding-top:18px; }
.field-label { margin:0 0 14px; color:var(--teal); font-size:.78rem; font-weight:700; }
input,select { width:100%; border:1px solid var(--line); border-radius:9px; padding:12px 13px; color:var(--ink); background:rgba(255,255,255,.75); font:inherit; }
.password-field { position:relative; }
.password-field input { padding-right:60px; }
.password-toggle { position:absolute; top:50%; right:10px; transform:translateY(-50%); border:0; color:var(--teal); background:transparent; cursor:pointer; font:inherit; font-size:.75rem; font-weight:700; }
input:focus,select:focus { border-color:var(--teal); outline:3px solid rgba(20,107,101,.13); }
.time-row { align-items:end; display:grid; grid-template-columns:1fr auto 1fr; gap:10px; }
.time-separator { padding-bottom:13px; color:var(--muted); font-size:.78rem; }
.primary-button { align-items:center; display:flex; justify-content:space-between; width:100%; margin-top:6px; border:0; border-radius:9px; padding:14px 16px; color:#fff; background:var(--teal); cursor:pointer; font:inherit; font-weight:700; transition:transform 160ms ease,background 160ms ease; }
.primary-button:hover { background:#0d5752; transform:translateY(-2px); }
.form-message { min-height:1.4em; margin:14px 0 0; font-size:.82rem; }
.success-message { color:#18794e; }
.error-message { color:#b42318; }
.list-heading { align-items:center; margin-bottom:24px; }
.entry-count { display:grid; width:44px; height:44px; place-items:center; border-radius:50%; color:#fff; background:var(--coral); font-family:'Space Grotesk',sans-serif; font-size:1.05rem; }
.list-toolbar { align-items:center; display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:12px; color:var(--muted); font-size:.78rem; }
.refresh-button,.delete-button { border:0; color:var(--teal); background:transparent; cursor:pointer; font:inherit; font-size:.78rem; }
.refresh-button:disabled { cursor:wait; opacity:.5; }
.free-time-list { display:grid; gap:10px; margin:16px 0 0; padding:0; list-style:none; }
.free-time-item { align-items:center; display:flex; justify-content:space-between; gap:14px; border:1px solid var(--line); border-radius:11px; padding:14px 15px; background:rgba(255,255,255,.63); }
.entry-details { align-items:center; display:flex; flex-wrap:wrap; gap:8px 14px; }
.entry-details strong { min-width:90px; }
.entry-month { border-radius:5px; padding:4px 7px; color:#89651a; background:#fff2c8; font-size:.74rem; font-weight:700; }
.entry-time { color:var(--teal); font-family:'Space Grotesk',sans-serif; font-size:.95rem; font-weight:600; }
.delete-button { color:var(--muted); white-space:nowrap; }
.delete-button:hover { color:var(--coral); }
.empty-state { padding:70px 20px 56px; text-align:center; color:var(--muted); }
.empty-state[hidden] { display:none; }
.empty-icon { display:inline-grid; width:44px; height:44px; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--coral); font-size:1.5rem; }
.empty-state p { margin:14px 0 4px; color:var(--ink); font-weight:600; }
.empty-state small { font-size:.76rem; }
.app-footer { display:flex; justify-content:space-between; margin-top:24px; color:var(--muted); font-size:.72rem; }
@media (max-width:780px) { .app-shell { width:min(100% - 28px,620px); padding-top:42px; } .app-header { align-items:flex-start; flex-direction:column; margin-bottom:30px; } .header-actions { align-items:flex-start; flex-direction:row; } .logout-button { align-self:center; } .dashboard-grid { grid-template-columns:1fr; } }
@media (max-width:430px) { .login-screen { padding:14px; } .login-card { padding:26px 20px; } .form-panel,.list-panel { padding:22px 18px; } .time-row { grid-template-columns:1fr; gap:0; } .time-separator { display:none; } .free-time-item { align-items:flex-start; } .entry-details { gap:7px; } .entry-details strong { min-width:100%; } .app-footer { flex-direction:column; gap:6px; } }