:root{font-family:Yu Gothic UI,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;color:#3a3733;background:#f7f3ee}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:#f7f3ee}#app{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:16px}.screen{width:min(760px,100%);display:flex;flex-direction:column;gap:12px}.top-actions{display:flex;justify-content:flex-end}.logout-button{border:1px solid #d8d2c8;border-radius:999px;background:#fff;color:#6b6459;font-size:12px;padding:8px 14px;cursor:pointer}.logout-button:hover{background:#f2ede4}.board{position:relative;background:#fff;border-radius:20px;padding:16px;box-shadow:0 2px 16px #3c301e14}.header-row,.habit-line{position:relative;z-index:1}.header-row,.habit-line{display:grid;grid-template-columns:1fr 200px;gap:11px;align-items:center}.dates-row,.history-row{display:grid;grid-template-columns:repeat(14,1fr);gap:6px}.dates-row,.history-row{margin-bottom:0}.date{text-align:center;line-height:1.1;color:#8a8377;font-size:14px}.date span{display:block;font-size:11px}.date span:first-child{font-size:14px;font-weight:600;color:#5b564c}.today-title{background:transparent;border-radius:10px;margin:0;padding:8px 10px;font-size:16px;font-weight:600;color:#3a3733}.habit-line{margin-top:10px}.period-section{margin-top:18px;padding:14px;border-radius:16px}.period-section:first-of-type{margin-top:14px}.period-section[data-period=morning]{background:#fff5e6}.period-section[data-period=afternoon]{background:#eaf1fb}.period-heading{position:relative;z-index:1;display:inline-flex;align-items:center;margin:0 0 10px;padding:7px 16px;border-radius:999px;font-size:15px;font-weight:700;letter-spacing:.02em}.period-section[data-period=morning] .period-heading{background:#ffdfae;color:#9a5b0e}.period-section[data-period=afternoon] .period-heading{background:#cfe0f7;color:#2f5b96}.period-section .habit-line:first-of-type{margin-top:0}.period-section .board-footer{margin-top:12px}.habit-card{position:relative;background:#fff;border:1px solid rgba(60,48,30,.08);border-radius:16px;padding:8px 8px 10px;box-shadow:0 1px 6px #3c301e0f}.habit-card h2{margin:0 0 4px;padding-right:26px;font-size:15px;font-weight:600;color:#3a3733}.habit-menu{position:absolute;top:4px;right:4px}.habit-menu-trigger{border:none;background:transparent;color:#8a8377;font-size:20px;line-height:1;padding:4px 8px;cursor:pointer;border-radius:999px}.habit-menu-trigger:hover{background:#3c301e0f}.habit-menu-list{position:absolute;top:26px;right:0;background:#fff;border:1px solid #eee2d3;border-radius:12px;min-width:120px;display:flex;flex-direction:column;overflow:hidden;z-index:10;box-shadow:0 4px 16px #3c301e1f}.habit-menu-list[hidden]{display:none}.habit-menu-item{border:none;background:#fff;text-align:left;padding:10px 12px;font-size:13px;color:#3a3733;cursor:pointer}.habit-menu-item:hover{background:#f7f3ee}.habit-menu-item.danger{color:#c0392b}.actions-row{display:flex;gap:6px;margin-top:6px}.pill{flex:1 1 0;border:1px solid #d8d2c8;border-radius:999px;padding:11px 8px;font-size:13px;font-weight:600;line-height:1;color:#3a3733;background:#f7f3ee;cursor:pointer;min-width:0;white-space:nowrap;transition:transform .05s ease,background .15s ease}.pill:active:not(:disabled){transform:scale(.96)}.pill:disabled{opacity:1;cursor:default}.pill.is-locked:disabled{opacity:.4;cursor:not-allowed}.pill.is-idle{background:#f7f3ee;color:#3a3733}.pill.is-complete{background:#6b6459;border-color:#6b6459;color:#fff}.circle{width:30px;height:30px;border-radius:999px;border:1px solid rgba(60,48,30,.12);display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1}.history-row .circle{margin:0 auto;width:30px;height:88px;font-size:13px;border-radius:15px}.habit-card>.circle{display:flex;margin:0 auto 6px;width:36px;height:36px;font-size:16px}.blue.done{background:#3d6fa8;color:#fff}.blue.doing{background:#aec8ea;color:#1e4f7f}.green.done{background:#5f9c46;color:#fff}.green.doing{background:#cbe6bd;color:#3c6b26}.orange.done{background:#dd8536;color:#fff}.orange.doing{background:#f6cfa4;color:#a85a10}.yellow.done{background:#d4ab29;color:#fff}.yellow.doing{background:#f2e3a3;color:#93731a}.empty{background:#f2ede4;color:transparent}.skipped{background:#e3ddd2;color:#9c9484}.loading-message,.error-message{font-size:14px;color:#6b6459;padding:40px;text-align:center}.error-message{color:#c0392b}.auth-required{display:flex;flex-direction:column;align-items:center;gap:12px}.auth-required-message{margin:0;font-size:14px;color:#c0392b}.auth-login-button{border:none;border-radius:999px;background:#4285f4;color:#fff;font-size:13px;padding:10px 16px;cursor:pointer}.auth-login-button:hover{background:#2f6fda}.modal-backdrop{position:fixed;inset:0;background:#28201473;display:flex;align-items:center;justify-content:center;z-index:100}.modal-backdrop[hidden]{display:none}.modal{background:#fff;border-radius:18px;padding:24px;width:min(320px,calc(100% - 32px));display:flex;flex-direction:column;gap:16px}.modal-title{font-size:16px;font-weight:700;margin:0}.modal-label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#6b6459}.modal-input{border:1px solid #e3ddd2;border-radius:10px;padding:10px 12px;font-size:14px;outline:none}.modal-input:focus{border-color:#b8ae9c}.color-selector{display:flex;gap:12px}.color-option{width:30px;height:30px;border-radius:50%;border:3px solid transparent;cursor:pointer;outline:none}.color-option.blue{background:#3d6fa8}.color-option.green{background:#5f9c46}.color-option.orange{background:#dd8536}.color-option.yellow{background:#d4ab29}.color-option.selected{border-color:#3a3733}.modal-actions{display:flex;gap:10px;justify-content:flex-end}.modal-cancel-btn,.modal-submit-btn{padding:10px 16px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer}.modal-cancel-btn{border:1px solid #e3ddd2;background:#fff;color:#6b6459}.modal-submit-btn{border:none;background:#3a3733;color:#fff}.modal-submit-btn:hover{background:#1f1d1a}.add-button{width:min(240px,100%);border:none;border-radius:999px;font-size:13px;font-weight:600;line-height:1.1;white-space:nowrap;padding:11px 16px;cursor:pointer}.period-section[data-period=morning] .add-button{background:#f0a94e;color:#4a2e05}.period-section[data-period=morning] .add-button:hover{background:#e59b38}.period-section[data-period=afternoon] .add-button{background:#6fa0e0;color:#fff}.period-section[data-period=afternoon] .add-button:hover{background:#4f89d6}.board-footer{display:flex;justify-content:center}@media(max-width:900px){.screen{width:min(610px,100%)}.header-row,.habit-line{grid-template-columns:minmax(0,1fr) 148px;gap:8px}.dates-row,.history-row{grid-template-columns:repeat(7,1fr);gap:6px}.date{font-size:13px}.date span{font-size:10px}.date span:first-child{font-size:13px}.history-row .circle{width:24px;height:66px;font-size:11px}.habit-card>.circle{width:30px;height:30px;font-size:14px}.today-title{padding:6px 8px;font-size:14px}.habit-card h2{font-size:14px}.pill{font-size:12px;padding:10px 6px}}