@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
:root{--bg:#f7f3ed;--paper:#fffcf7;--accent:#99745b;--accent-dark:#78553e;--soft:#eee2d5;--ink:#57483e;--muted:#9b8d7e;--line:#e8e0d6;--sage:#7d978b;--back-image:none;--back-strength:.18;font-family:'DM Sans','Noto Sans JP',sans-serif;color:var(--ink);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font-size:13px}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button{border:0;background:none}button:disabled{cursor:wait;opacity:.6}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button:hover{filter:brightness(.97)}[hidden]{display:none!important}a{color:inherit;text-decoration:none}.app-shell{min-height:100vh;display:grid;grid-template-columns:210px minmax(0,1fr)}.sidebar{padding:36px 23px 22px;border-right:1px solid var(--line);background:#fffcf8;display:flex;flex-direction:column}.brand{display:flex;align-items:center;font-family:Georgia,serif;font-size:42px;letter-spacing:-1.7px;font-weight:700;line-height:1}.brand-flower{font-family:serif;font-size:44px;color:var(--accent);padding-right:8px;font-weight:400}.brand-dot{color:var(--accent)}.brand-caption{font-size:10px;color:var(--muted);letter-spacing:.12em;margin:15px 0 39px}nav{display:grid;gap:8px}.nav-item{display:flex;align-items:center;gap:12px;text-align:left;font-size:12px;padding:13px 12px;border-radius:10px;color:#8c7e7c;white-space:nowrap}.nav-item.current{background:var(--soft);color:var(--accent-dark);font-weight:600}.icon{width:19px;height:19px;display:block;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.mini-calendar{margin-top:34px}.mini-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px;font-size:12px}.mini-heading span{color:var(--muted);font-size:10px}.mini-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px 0;text-align:center}.mini-grid>span{font-size:9px;color:var(--muted);margin-bottom:6px}.mini-grid button{font-size:10px;aspect-ratio:1;border-radius:50%;padding:0}.mini-grid .mini-today{background:var(--accent);color:white}.mini-grid .mini-selected:not(.mini-today){box-shadow:inset 0 0 0 1px var(--accent)}.mini-grid .other{opacity:.32}.calendar-sources{margin-top:34px;border-top:1px solid var(--line);padding-top:24px}.eyebrow{font-size:9px;font-weight:600;color:var(--muted);letter-spacing:.16em;margin:0 0 17px}.calendar-sources label{display:flex;align-items:center;gap:8px;margin:17px 0;font-size:10px}.calendar-sources input{accent-color:var(--accent);width:13px;height:13px;margin:0}.calendar-sources label:nth-of-type(2) input{accent-color:var(--sage)}.calendar-sources label .source-dot{margin-left:auto}.source-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}.pink{background:var(--accent)}.sage{background:var(--sage)}.text-button{font-size:11px;color:var(--accent-dark);display:inline-flex;align-items:center;gap:6px;padding:6px 0}.text-button .icon{width:14px;height:14px}.connect-link{font-size:9px;gap:4px;white-space:nowrap}.tiny-tag{font-size:7px;letter-spacing:.04em;color:#998c86;background:#f1ebe5;border-radius:4px;padding:3px}.sidebar-bottom{padding-top:45px;margin-top:auto;text-align:center}.little-flower{font-size:34px;color:#b59272;letter-spacing:7px}.little-flower span{font-size:22px;color:#c2bd9a}.sidebar-bottom p{font-size:10px;line-height:2;color:var(--muted);letter-spacing:.1em}.mock-label{display:inline-block;font-size:7px;letter-spacing:.17em;color:#aaa09a;margin-top:14px}.main{min-width:0;padding:0 35px 30px}.topbar{height:120px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:15px}.overline{font-size:8px;letter-spacing:.2em;color:var(--muted);display:flex;align-items:center;gap:8px;margin-bottom:10px}.small-line{width:20px;height:1px;background:var(--accent)}h1{font-size:19px;font-weight:500;letter-spacing:.08em;margin:0}.topbar-actions{display:flex;gap:24px;align-items:center}.save-status{font-size:9px;color:var(--muted);display:flex;align-items:center;gap:6px}.save-status i{width:5px;height:5px;border-radius:50%;background:#92a18c}.avatar{width:37px;height:37px;border-radius:50%;background:#e8d8c3;font-family:Georgia,serif;font-style:italic;font-size:21px;position:relative;color:#967565}.avatar span{position:absolute;bottom:-4px;right:-4px;color:var(--accent);font-size:19px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 276px;gap:27px;padding-top:26px}.calendar-section{min-width:0}.month-toolbar{display:flex;align-items:center;justify-content:space-between;margin:2px 0 24px;gap:12px}.month-heading{display:flex;align-items:center;gap:13px}.month-number{font-family:Georgia,serif;font-size:55px;line-height:1;color:var(--ink);letter-spacing:-3px}.month-heading h2{font-size:13px;font-weight:500;margin:0 0 6px;letter-spacing:.06em}.month-heading p{font-size:8px;letter-spacing:.18em;color:var(--muted);margin:0}.month-sparkle{font-size:27px;color:#c1c29e;margin-left:5px;font-weight:400}.month-controls{display:flex;align-items:center;gap:4px}.today-button{border:1px solid #e6dcd5;background:#fffcf7;border-radius:7px;padding:6px 15px;font-size:10px;margin-right:8px}.icon-button{display:flex;align-items:center;justify-content:center;width:29px;height:29px;border-radius:6px;font-size:24px;color:#9c8b85}.icon-button .icon{width:16px;height:16px}.calendar-paper{position:relative;isolation:isolate;background:var(--paper);border:1px solid #e8ded6;border-radius:14px;overflow:hidden;box-shadow:0 5px 20px #79645505}.calendar-paper:before{content:'';z-index:-1;position:absolute;inset:0;background-image:var(--back-image);background-size:cover;background-position:center;opacity:var(--back-strength);pointer-events:none}.paper-top{height:49px;display:flex;align-items:center;justify-content:space-between;padding:0 19px;border-bottom:1px solid var(--line);gap:10px;background:#ffffff38}.paper-top>span:first-child{font-size:10px;display:flex;align-items:center;gap:7px}.paper-note{font-family:Georgia,serif;font-style:italic;color:#ae9d8c;font-size:11px}.paper-note span{font-size:17px;vertical-align:middle;margin-left:6px}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);height:54px;background:#f8f3ed77;border-bottom:1px solid var(--line)}.weekdays>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10px;color:#8e827c}.weekdays small{font-size:7px;letter-spacing:.12em}.weekdays>span:first-child{color:#b7856b}.weekdays>span:last-child{color:#8b9d9b}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.day{height:113px;min-width:0;text-align:left;padding:8px 7px 4px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);position:relative;display:flex;flex-direction:column;gap:4px;overflow:hidden}.day:nth-child(7n){border-right:none}.day.last-week{border-bottom:none}.day:hover{background:var(--soft);filter:none}.day.other-month{background:#f2eee830;color:#b9afaa}.day.other-month .date-number{opacity:.55}.day.selected{box-shadow:inset 0 0 0 1.5px var(--accent);background:color-mix(in srgb,var(--soft) 25%,transparent)}.date-number{font-size:11px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0}.day.sunday:not(.other-month) .date-number{color:#ac7a62}.day.saturday:not(.other-month) .date-number{color:#859b98}.day.is-today .date-number{background:var(--accent);color:white!important}.today-tiny{position:absolute;top:13px;right:8px;color:var(--accent-dark);font-size:7px}.day-stamps{display:flex;align-items:center;justify-content:center;min-height:36px;gap:0}.day-stamps:empty{display:none}.sticker-image{width:49px;height:49px;object-fit:contain;filter:drop-shadow(0 2px 1px #5b414416);transform:rotate(-7deg);flex-shrink:0}.day-stamps .sticker-image:nth-child(2){transform:rotate(8deg);margin-left:-12px}.stamp-more{font-size:8px;background:#fff9f4;border-radius:8px;padding:3px;color:var(--muted);margin-left:-5px;align-self:end}.event-chip{font-size:8px;line-height:18px;padding:0 4px;border-radius:3px;background:#ebddcc;color:#896348;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%;flex-shrink:0;border-left:2px solid #c6a17c}.event-chip.google{background:#e8eee5;color:#71856d;border-color:#a5b19a}.day-stamps+.event-chip{margin-top:auto}.calendar-footer{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:13px 0 19px}.calendar-footer p{display:flex;gap:6px;align-items:center;margin:0;color:var(--muted);font-size:9px}.calendar-footer .icon{width:13px;height:13px;color:var(--accent)}.footer-mark{font-family:Georgia,serif;font-style:italic;white-space:nowrap;color:#b5a491;font-size:11px}.footer-mark span{font-size:18px;margin-left:5px}.day-summary{border-top:1px solid var(--line);padding-top:22px}.day-summary-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.day-summary .eyebrow{font-size:8px;margin-bottom:7px}.day-summary h3{font-size:15px;font-weight:500;margin:0}.soft-button{display:flex;align-items:center;gap:5px;background:var(--soft);color:var(--accent-dark);font-size:10px;border-radius:7px;padding:8px 12px}.soft-button .icon{width:13px;height:13px}.day-items{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:13px}.day-item{border:1px solid var(--line);background:#fffcf7;border-radius:9px;display:flex;align-items:center;gap:8px;padding:5px 8px}.day-item img{width:36px;height:36px;object-fit:contain}.day-item .delete-stamp{font-size:16px;color:#ad9691}.day-event{display:flex;gap:12px;align-items:center;margin:7px 0;background:#fffaf6;padding:11px 13px;border:1px solid var(--line);border-radius:8px}.day-event .event-time{font-size:10px;color:var(--muted);min-width:36px}.day-event strong{font-size:11px;font-weight:500}.day-event small{display:block;margin-top:4px;color:var(--muted);font-size:10px;white-space:pre-wrap;overflow-wrap:anywhere}.day-event .delete-event{margin-left:auto;color:#a38e89;font-size:17px}.empty-day{color:var(--muted);font-size:11px;line-height:1.8;margin:0 0 12px}.customize-panel{align-self:start;background:#fffcf8;border:1px solid var(--line);border-radius:15px;overflow:hidden;margin-top:2px}.panel-tabs{display:flex;padding:5px;background:#f4eee8;gap:3px;border-bottom:1px solid var(--line)}.panel-tabs button{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;padding:12px 2px;border-radius:9px;font-size:11px;color:var(--muted)}.panel-tabs button .icon{width:16px;height:16px}.panel-tabs button.active{background:#fffcf8;box-shadow:0 1px 4px #46362d08;color:var(--accent-dark)}#stamps-panel,#themes-panel{padding:24px 19px 0}.panel-heading .eyebrow{font-size:8px;color:var(--accent);margin-bottom:10px}.panel-heading h2{font-size:17px;letter-spacing:.02em;font-weight:500;margin:0 0 10px}.panel-heading p{font-size:9px;color:var(--muted);line-height:1.7;margin:0}.stamp-filters{display:flex;gap:2px;margin:24px -4px 16px;justify-content:space-between}.stamp-filters button{font-size:9px;padding:6px 7px;border-radius:6px;white-space:nowrap;color:var(--muted)}.stamp-filters .active{background:var(--soft);color:var(--accent-dark)}.stamp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 6px;max-height:380px;overflow-y:auto;padding:2px}.stamp-button{border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 2px 8px;border:1px solid transparent;min-height:82px;position:relative}.stamp-button:hover{background:#f8efe8}.stamp-button.active{background:var(--soft);border-color:#c6a17c}.stamp-button.active:after{content:'✓';position:absolute;right:4px;top:3px;font-size:8px;color:var(--accent-dark)}.stamp-button img{width:49px;height:49px;object-fit:contain;transition:transform .15s}.stamp-button:hover img{transform:rotate(-8deg) scale(1.1)}.stamp-button span{font-size:8px;color:#94827c;margin-top:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.import-button{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;border:1px dashed #c9b096;border-radius:8px;padding:12px 7px;font-size:9px;color:var(--accent-dark);background:#faf5ed}.import-button .icon{width:14px;height:14px}.import-button>span:last-child{margin-left:auto}.stamp-tip{display:flex;align-items:center;gap:10px;background:#f4f3e9;border-radius:10px;padding:17px 10px;margin-top:22px}.tip-flower{font-size:30px;color:#a6ac87}.stamp-tip strong{font-size:9px;font-weight:500;color:#85866e}.stamp-tip p{font-size:8px;line-height:1.9;color:#989686;margin:7px 0 0}.selected-stamp-note{text-align:center;font-size:8px;color:#b0a097;margin:18px 0 22px}.panel-bottom{display:flex;align-items:center;justify-content:space-between;margin:0 19px;padding:16px 0;border-top:1px solid var(--line);font-family:Georgia,serif;font-style:italic;font-size:10px;color:#b5a392}.panel-bottom>span:last-child{font-size:16px}.small-title{font-size:11px;font-weight:500;margin:26px 0 14px}.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.theme-button{padding:7px;border:1px solid var(--line);border-radius:9px;text-align:left}.theme-button.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.theme-swatches{height:51px;border-radius:5px;display:flex;overflow:hidden}.theme-swatches i{flex:1}.theme-button>span:last-child{font-size:9px;display:block;margin-top:8px}.background-title{margin-top:27px}.background-upload{border:1px dashed #c9b096;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;background:#faf5ed;padding:22px 8px;border-radius:9px}.background-upload .icon{width:24px;height:24px;color:var(--accent)}.background-upload strong{font-size:10px;font-weight:500}.background-upload small{font-size:9px;color:var(--muted)}.theme-preview{text-align:center;margin:31px 0;color:var(--muted);line-height:2;font-size:10px}.theme-preview>span{font-size:43px;color:var(--accent)}.range-label{display:flex;justify-content:space-between;font-size:10px;margin:17px 0 8px}input[type=range]{width:100%;accent-color:var(--accent)}.remove-background{font-size:10px}dialog{border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);padding:29px;width:430px;max-width:calc(100vw - 30px);max-height:90vh;box-shadow:0 20px 90px #44323230}dialog::backdrop{background:#4d3d3c55;backdrop-filter:blur(4px)}.dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:22px}.dialog-heading .eyebrow{margin-bottom:9px}dialog h2{font-size:20px;font-weight:500;line-height:1.6;margin:0}dialog label{display:flex;flex-direction:column;gap:8px;font-size:11px;margin:17px 0}dialog input:not([type=color]),dialog textarea{border:1px solid #dfd3cb;border-radius:8px;padding:11px;color:var(--ink);background:#fffefd;width:100%;min-width:0}dialog textarea{resize:vertical}dialog input::placeholder,dialog textarea::placeholder{color:#b7a69d}dialog input[type=color]{border:0;width:100%;height:35px;background:none}.form-row{display:grid;grid-template-columns:1.2fr 1fr;gap:12px}.form-row label{margin:0}.primary-button{padding:13px;background:var(--accent);color:white;border-radius:9px;font-size:12px;width:100%;margin-top:9px}.dialog-copy{font-size:12px;color:var(--muted);line-height:2}.demo-explanation{font-size:10px;color:#94857c;background:#f5eee6;padding:13px;border-radius:9px;line-height:1.9}.google-mark{font-family:Arial,sans-serif;font-size:30px;font-weight:bold;color:#7c96b2}.demo-pill{font-size:9px;background:var(--soft);color:var(--accent-dark);border-radius:5px;padding:5px 8px;display:inline-block;margin-bottom:15px}.integration-card{display:flex;align-items:center;gap:15px;border:1px solid var(--line);border-radius:12px;padding:18px 13px;margin:23px 0}.integration-card strong{font-size:12px;font-weight:500}.integration-card small{display:block;color:var(--muted);font-size:9px;margin-top:6px}.integration-flower{font-size:32px;color:var(--accent)}.help-list{padding-left:20px;font-size:12px;line-height:2.2}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:#65513f;color:#fff8f3;border-radius:12px;padding:13px 23px;box-shadow:0 8px 30px #4f343422;opacity:0;pointer-events:none;transition:.2s;max-width:90vw;font-size:12px;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}.placing .day:hover{cursor:copy}.placing .day:hover:after{content:'＋';position:absolute;right:7px;bottom:4px;color:var(--accent);font-size:16px}
@media(min-width:1600px){.main{padding-left:50px;padding-right:50px}.workspace{grid-template-columns:minmax(0,1fr) 310px;gap:34px}.day{height:132px}.stamp-button{min-height:94px}.stamp-button img{width:57px;height:57px}.day-stamps .sticker-image{width:57px;height:57px}}
@media(max-width:1200px){.app-shell{grid-template-columns:175px minmax(0,1fr)}.sidebar{padding:32px 15px}.main{padding:0 22px 25px}.workspace{grid-template-columns:minmax(0,1fr) 242px;gap:17px}#stamps-panel,#themes-panel{padding-left:13px;padding-right:13px}.brand{font-size:37px}.brand-flower{font-size:38px}.brand-caption{font-size:8px}.nav-item{font-size:10px;padding:13px 8px}.connect-link{font-size:8px}.day{height:108px;padding:7px 4px 4px}.paper-note{font-size:9px}.sticker-image{width:43px;height:43px}.today-tiny{display:none}.footer-mark{display:none}.stamp-button img{width:46px;height:46px}.topbar-actions{gap:14px}.stamp-filters button{padding:6px 5px;font-size:8px}}
@media(max-width:960px){.app-shell{grid-template-columns:74px minmax(0,1fr)}.sidebar{padding:30px 13px}.brand{font-size:0;justify-content:center}.brand-flower{font-size:40px;padding:0}.brand-caption,.mini-calendar,.calendar-sources,.sidebar-bottom{display:none}nav{margin-top:35px}.nav-item{font-size:0;justify-content:center;padding:14px 0;gap:0}.nav-item .icon{width:20px;height:20px}.main{padding:0 20px 25px}.workspace{gap:17px;grid-template-columns:minmax(0,1fr) 230px}.save-status{font-size:8px}.topbar{height:105px}h1{font-size:17px}.month-number{font-size:49px}.month-sparkle{display:none}.paper-note{display:none}.day{height:106px}.day-stamps .sticker-image{width:37px;height:37px}.day-stamps .sticker-image:nth-child(2){margin-left:-16px}.event-chip{font-size:7px;padding:0 2px}.date-number{width:21px;height:21px}.month-heading{gap:9px}}
@media(max-width:740px){.app-shell{display:block}.sidebar{padding:15px 20px;flex-direction:row;align-items:center;justify-content:space-between;border-right:0;border-bottom:1px solid var(--line)}.brand{font-size:28px}.brand-flower{font-size:32px;padding-right:5px}.sidebar nav{display:flex;margin:0;gap:5px}.nav-item{padding:10px 13px}.main{padding:0 15px 20px}.topbar{height:96px}.topbar-actions .save-status{display:none}.topbar-actions{padding-right:5px}h1{font-size:17px;letter-spacing:.03em}.overline{font-size:7px}.workspace{display:flex;flex-direction:column;padding-top:22px;gap:20px}.month-toolbar{margin-bottom:20px}.month-number{font-size:50px}.month-heading h2{font-size:12px}.month-heading p{font-size:7px}.month-sparkle{display:block;font-size:23px}.day{height:104px;padding:6px 3px 3px}.paper-top{height:41px;padding:0 13px}.weekdays{height:47px}.day-stamps .sticker-image{width:39px;height:39px}.day-stamps .sticker-image:nth-child(2){margin-left:-23px}.day-stamps{min-height:34px}.event-chip{font-size:7px;line-height:15px}.date-number{font-size:10px}.calendar-footer{padding-bottom:20px}.calendar-footer p{font-size:8px;gap:4px}.calendar-footer .text-button{font-size:9px;white-space:nowrap}.day-summary{padding-top:18px}.customize-panel{width:100%;margin:0}.panel-tabs button{font-size:12px}#stamps-panel,#themes-panel{padding:22px 18px 0}.stamp-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-height:320px;gap:7px}.stamp-filters{justify-content:flex-start;gap:7px;margin:18px 0 13px}.stamp-filters button{font-size:10px;padding:7px 10px}.stamp-button img{width:54px;height:54px}.stamp-button{min-height:84px}.stamp-button span{font-size:9px}.panel-heading p{font-size:10px}.import-button{font-size:11px;padding:15px 12px}.stamp-tip strong{font-size:11px}.stamp-tip p{font-size:10px}.stamp-tip{padding:17px;gap:18px}.stamp-tip br{display:none}.selected-stamp-note{font-size:9px}.theme-swatches{height:65px}.theme-button>span:last-child{font-size:11px}.save-status{display:none}.day-summary h3{font-size:14px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.more-events{font-size:7px;color:var(--muted);line-height:1.3}.custom-empty{grid-column:1/-1;padding:10px}.mobile-google{display:none}@media(max-width:960px){.mobile-google{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--accent-dark)}.mobile-google .icon{width:15px;height:15px}}@media(max-width:400px){h1{font-size:15px}.topbar-actions{gap:10px}.avatar{width:32px;height:32px}.month-sparkle{display:none}}

/* Monthly view: give the calendar the full width; tools open on demand. */
.app-shell {
  display: block;
}
.sidebar {
  min-height: 72px;
  padding: 12px 32px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
}
.brand {
  font-size: 31px;
  flex-shrink: 0;
}
.brand-flower {
  font-size: 35px;
  padding-right: 7px;
}
.brand-caption,
.mini-calendar,
.sidebar-bottom {
  display: none;
}
.sidebar nav {
  display: flex;
  gap: 8px;
  margin: 0;
}
.nav-item {
  font-size: 12px;
  padding: 11px 16px;
  gap: 8px;
}
.calendar-sources {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}
.calendar-sources .eyebrow {
  display: none;
}
.calendar-sources label {
  margin: 0;
}
.main {
  padding: 0 32px 20px;
}
.topbar {
  height: 42px;
  border-bottom: 0;
}
.overline {
  display: none;
}
.topbar h1 {
  font-size: 11px;
  color: var(--muted);
}
.avatar {
  width: 26px;
  height: 26px;
  font-size: 16px;
}
.avatar span {
  font-size: 14px;
}
.workspace {
  display: block;
  padding-top: 8px;
}
.month-toolbar {
  margin: 0 0 16px;
}
.month-number {
  font-size: 46px;
}
.month-heading h2 {
  font-size: 16px;
}
.month-heading p {
  font-size: 9px;
}
.month-controls .icon-button {
  width: 36px;
  height: 36px;
}
.today-button {
  font-size: 12px;
  padding: 8px 18px;
}
.paper-top {
  height: 38px;
}
.weekdays {
  height: 42px;
}
.weekdays > span {
  flex-direction: row;
  gap: 7px;
  font-size: 11px;
}
.calendar-grid {
  grid-template-rows: repeat(var(--week-count, 5), minmax(96px, 1fr));
  min-height: calc(100svh - 280px);
}
.day {
  height: auto;
  min-height: 96px;
  padding: 8px 10px 6px;
}
.date-number {
  font-size: 13px;
}
.day-stamps .sticker-image {
  width: 52px;
  height: 52px;
}
.event-chip {
  font-size: 10px;
  line-height: 20px;
}
.calendar-footer {
  min-height: 40px;
  padding: 10px 0;
}
.calendar-footer p {
  font-size: 11px;
}
.day-summary {
  padding-top: 0;
}
.day-summary-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  font-size: 12px;
  color: var(--accent-dark);
  cursor: pointer;
  list-style: none;
}
.day-summary-toggle::-webkit-details-marker {
  display: none;
}
.day-summary[open] .day-summary-toggle > span {
  transform: rotate(180deg);
}
.customize-panel {
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: calc(100svh - 40px);
  margin: auto;
  padding: 0;
  overflow-y: auto;
}
.customize-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 11px;
  color: var(--muted);
}
#stamps-panel,
#themes-panel {
  padding: 22px 20px 0;
}
.stamp-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stamp-filters {
  justify-content: space-between;
  gap: 2px;
}
.stamp-filters button {
  font-size: 10px;
  padding: 6px;
}
.mobile-google {
  display: none;
}
@media (max-width: 1100px) {
  .calendar-sources {
    display: none;
  }
  .mobile-google {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
  }
}
@media (max-width: 740px) {
  .sidebar {
    min-height: 62px;
    padding: 10px 14px;
    gap: 10px;
  }
  .brand {
    font-size: 26px;
  }
  .brand-flower {
    font-size: 29px;
    padding-right: 4px;
  }
  .sidebar nav {
    gap: 2px;
  }
  .nav-item {
    padding: 8px 9px;
    font-size: 10px;
    gap: 4px;
  }
  .nav-item .icon {
    width: 15px;
    height: 15px;
  }
  .nav-item[data-action='calendar'] {
    display: none;
  }
  .main {
    padding: 0 10px 16px;
  }
  .topbar {
    height: 34px;
  }
  .topbar h1 {
    font-size: 9px;
    letter-spacing: .03em;
  }
  .month-heading h2 {
    font-size: 14px;
  }
  .month-number {
    font-size: 38px;
  }
  .month-sparkle {
    display: none;
  }
  .month-toolbar {
    margin-bottom: 12px;
  }
  .paper-top {
    height: 30px;
  }
  .weekdays {
    height: 32px;
  }
  .weekdays > span {
    font-size: 10px;
  }
  .weekdays small {
    display: none;
  }
  .calendar-grid {
    grid-template-rows: repeat(var(--week-count, 5), minmax(82px, 1fr));
    min-height: calc(100svh - 260px);
  }
  .day {
    min-height: 82px;
    padding: 5px 3px 3px;
    gap: 2px;
  }
  .date-number {
    font-size: 11px;
    width: 20px;
    height: 20px;
  }
  .day-stamps {
    min-height: 28px;
  }
  .day-stamps .sticker-image {
    width: 31px;
    height: 31px;
  }
  .day-stamps .sticker-image:nth-child(2) {
    margin-left: -15px;
  }
  .event-chip {
    font-size: 8px;
    line-height: 15px;
  }
  .calendar-footer p {
    font-size: 9px;
  }
  .customize-panel .stamp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.preview-notice {
  margin: 10px 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--accent-dark);
  font-size: 11px;
  line-height: 1.8;
}

/* Tail pivots use SVG view-box coordinates so their roots stay attached. */
.cat-tail {
  transform-box: view-box;
  animation: cat-tail-sway 5.4s ease-in-out infinite;
}
.cat-tail-tabby {
  transform-origin: 61px 91px;
}
.cat-tail-white-orange {
  transform-origin: 185px 91px;
  animation-duration: 6.8s;
  animation-delay: -2.7s;
  animation-direction: reverse;
}
.cat-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: cat-blink 7.8s ease-in-out infinite;
  animation-delay: -1.3s;
}
.cat-eyes-white-orange {
  animation-duration: 10.4s;
  animation-delay: -5.7s;
}
@keyframes cat-tail-sway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(5deg); }
}
@keyframes cat-blink {
  0%, 90%, 94%, 100% { transform: scaleY(1); }
  92% { transform: scaleY(.08); }
}
@media (prefers-reduced-motion: reduce) {
  .cat-tail,
  .cat-eyes {
    animation: none;
    transform: none;
  }
}

/* Month navigation sits below the heading, beside the family cats. */
.month-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr 1fr;
  gap: 6px 12px;
}
.month-heading { grid-column: 1; grid-row: 1; align-self: end; }
.month-controls { grid-column: 1; grid-row: 2; align-self: start; justify-content: flex-start; gap: 3px; }
.month-controls .today-button { font-size: 11px; padding: 6px 9px; margin-right: 2px; }
.month-controls .icon-button { width: 30px; height: 30px; }
.cat-scene {
  grid-column: 2;
  grid-row: 1 / 3;
  display: block;
  width: clamp(150px, 20vw, 210px);
  height: auto;
  flex-shrink: 0;
  margin: 0;
}

/* Calendar actions: one menu above, one add button within thumb reach. */
.main { padding-top: 22px; padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
.workspace { padding-top: 0; }
.month-controls .menu-button { width: 44px; height: 44px; margin-left: 0; }
.add-stamp-button {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 10;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-dark);
  color: var(--paper);
  box-shadow: 0 5px 18px #57483e38;
}
.add-stamp-button .icon { width: 28px; height: 28px; stroke-width: 2; }
.toast { bottom: calc(90px + env(safe-area-inset-bottom)); }
.menu-items { display: grid; gap: 8px; }
.menu-items > button { display: flex; align-items: center; gap: 14px; padding: 15px 12px; border-radius: 10px; text-align: left; background: var(--soft); }
.menu-items > button > span:nth-child(2) { flex: 1; }
.menu-items small { display: block; margin-top: 5px; font-size: 10px; color: var(--muted); }
.menu-items .save-status { display: flex; white-space: normal; }
.menu-sources { margin-top: 22px; border-top: 1px solid var(--line); }
.menu-sources label { flex-direction: row; align-items: center; gap: 10px; }
.menu-sources input[type=checkbox] { width: 18px; height: 18px; padding: 0; accent-color: var(--accent); }
.entry-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.entry-heading label { margin: 0; font-size: 14px; font-weight: 500; }
.entry-heading .icon-button { flex-shrink: 0; }
#stamps-panel { padding-top: 16px; padding-bottom: 18px; }
#quick-event-title { font-size: 16px; }
#quick-event-title:disabled { color: var(--muted); background: var(--bg); opacity: 1; cursor: not-allowed; }
.entry-date { margin: 10px 0 0; color: var(--muted); font-size: 11px; }
#stamps-panel .stamp-filters { margin-top: 18px; }
.theme-close { float: right; margin: -8px -8px 0 8px; }
#theme-dialog #themes-panel { padding-bottom: 8px; }
.calendar-grid { grid-template-rows: repeat(var(--week-count, 5), minmax(122px, 1fr)); min-height: calc(100svh - 172px); }
.day { min-height: 122px; }
.day-stamps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  justify-items: center;
  width: 100%;
  max-width: 66px;
  gap: 2px;
  min-height: 0;
  align-self: center;
}
.day-stamps .sticker-image,
.day-stamps .sticker-image:nth-child(2) {
  width: 100%; height: auto; aspect-ratio: 1; max-width: 32px; margin: 0; transform: none;
}
.stamp-more { position: absolute; right: 0; bottom: 0; margin: 0; padding: 1px 3px; }
@media (max-width: 740px) {
  .main { padding-top: 16px; }
  .calendar-grid { grid-template-rows: repeat(var(--week-count, 5), minmax(104px, 1fr)); min-height: calc(100svh - 210px); }
  .day { min-height: 104px; }
  .add-stamp-button { right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) {
  .cat-scene {
    width: 125px;
  }
  .calendar-grid {
    min-height: calc(100svh - 270px);
  }
}
.entry-row { display: flex; align-items: center; border-bottom: 1px solid var(--line); gap: 8px; }
.entry-row-open { display: flex; flex: 1; align-items: center; gap: 12px; padding: 14px 0; min-width: 0; text-align: left; border-radius: 8px; }
.entry-row-open img, .entry-placeholder { width: 46px; height: 46px; flex-shrink: 0; object-fit: contain; }
.entry-placeholder { display: grid; place-items: center; font-size: 24px; color: var(--muted); }
.entry-row-copy { min-width: 0; display: grid; gap: 4px; overflow-wrap: anywhere; }
.entry-row-copy strong { font-size: 14px; font-weight: 500; }
.entry-row-copy small { font-size: 11px; color: var(--muted); white-space: pre-wrap; }
.entry-trash { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; color: var(--muted); border-radius: 8px; }
.entry-row-open:hover, .entry-trash:hover { background: var(--soft); }
#stamps-panel .all-day-control { display: flex; flex-direction: row; align-items: center; gap: 10px; }
#entry-all-day { width: 20px; height: 20px; accent-color: var(--accent); }
#entry-times[hidden] { display: none; }
#entry-times > label { min-width: 0; }
#entry-times input { min-width: 0; font-size: 16px; }
.entry-selection { margin: 18px 0 4px; font-size: 12px; color: var(--accent-dark); }
.stamp-button[aria-pressed=true] { background: var(--soft); outline: 2px solid var(--accent); outline-offset: -2px; }
.entry-error { color: #963f36; font-size: 13px; }
#stamps-panel .primary-button { margin-top: 12px; }
#entry-description { font-size: 16px; }
.entry-save { position: sticky; bottom: -18px; padding: 8px 0 18px; background: var(--paper); z-index: 1; }

/* Keep only the selected day entries below the calendar. */
.day-summary { border-top: 0; padding-top: 8px; }
/* Mame and Mugi: the hit areas stay still while their illustrations move. */
.calendar-cat { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; --walk-distance: -22px; }
.calendar-cat[data-cat=mame] { --walk-distance: 22px; }
.cat-hit-area { fill: transparent; stroke: transparent; }
.calendar-cat:focus-visible { outline: none; }
.calendar-cat:focus-visible .cat-hit-area { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 4; }
.cat-travel { pointer-events: none; }
.cat-pose { transform-box: fill-box; transform-origin: center bottom; transition: transform .7s ease; }
.cat-closed-eyes, .cat-love, .cat-sleep-mark { opacity: 0; }
.cat-love, .cat-sleep-mark { stroke: none; font-family: Georgia, serif; font-size: 19px; fill: #b98773; }
.cat-sleep-mark { fill: #9b917d; font-size: 16px; }
.cat-tail { animation-duration: 2.4s; }
.cat-tail-white-orange { animation-duration: 3.1s; }
@keyframes cat-tail-sway {
  0%, 100% { transform: rotate(-17deg); }
  50% { transform: rotate(20deg); }
}
.calendar-cat[data-state=walk] .cat-travel { animation: cat-stroll 6.4s ease-in-out both; }
.calendar-cat[data-state=walk] .cat-pose { animation: cat-step .4s ease-in-out infinite; }
.calendar-cat[data-state=walk] .cat-paw { animation: cat-paw-step .4s ease-in-out infinite alternate; }
.calendar-cat[data-state=walk] .cat-paw-right { animation-delay: -.4s; }
.calendar-cat[data-state=sleep] .cat-pose { transform: scale(1.08, .62) rotate(-5deg); animation: cat-breathe 2.7s ease-in-out .7s infinite; }
.calendar-cat[data-state=sleep] .cat-eyes,
.calendar-cat[data-state=happy] .cat-eyes { opacity: 0; }
.calendar-cat[data-state=sleep] .cat-closed-eyes,
.calendar-cat[data-state=happy] .cat-closed-eyes { opacity: 1; }
.calendar-cat[data-state=sleep] .cat-tail { animation-duration: 7s; }
.calendar-cat[data-state=sleep] .cat-sleep-mark { animation: cat-dream 2.7s ease-in-out infinite; }
.calendar-cat[data-state=stretch] .cat-pose { animation: cat-stretch 1.8s ease-in-out both; }
.calendar-cat[data-state=happy] .cat-pose { animation: cat-nuzzle .6s ease-in-out 3; }
.calendar-cat[data-state=happy] .cat-tail { animation-duration: .45s; }
.calendar-cat[data-state=happy] .cat-love { opacity: 1; animation: cat-heart .9s ease-out 2; }
@keyframes cat-stroll {
  0%, 100% { transform: translateX(0); }
  45%, 55% { transform: translateX(var(--walk-distance)); }
}
@keyframes cat-step {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-4px) rotate(3deg); }
}
@keyframes cat-paw-step { to { transform: translateY(-5px); } }
@keyframes cat-breathe {
  0%, 100% { transform: scale(1.08, .62) rotate(-5deg); }
  50% { transform: scale(1.1, .65) rotate(-5deg); }
}
@keyframes cat-dream {
  0% { opacity: 0; transform: translateY(7px); }
  40%, 70% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes cat-stretch {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(.92, 1.08) rotate(5deg); }
}
@keyframes cat-nuzzle {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-6px) rotate(-7deg); }
}
@keyframes cat-heart {
  from { opacity: 1; transform: translateY(2px) scale(1); }
  to { opacity: 0; transform: translateY(-12px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .calendar-cat *, .cat-tail, .cat-eyes { animation: none !important; transition: none !important; }
  .calendar-cat[data-state=happy] .cat-love { opacity: 1; }
}
/* Tab names can grow without widening the entry dialog. */
.stamp-tab-bar { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; }
#stamps-panel .stamp-tab-bar .stamp-filters { display: flex; flex: 1; min-width: 0; margin: 0; overflow-x: auto; justify-content: flex-start; padding: 4px 2px; gap: 5px; }
.stamp-tab-bar .stamp-filters button { flex-shrink: 0; white-space: nowrap; }
.stamp-tab-bar > button { flex-shrink: 0; min-height: 40px; }
dialog select { width: 100%; min-width: 0; max-width: 100%; border: 1px solid #dfd3cb; border-radius: 8px; padding: 11px; color: var(--ink); background: #fffefd; font: inherit; font-size: 16px; }
.stamp-management-section { margin: 20px 0; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.stamp-management-section h3 { font-size: 14px; font-weight: 500; margin: 0; }
.stamp-management-section input { font-size: 16px; }
.management-status { position: sticky; bottom: -12px; background: var(--paper); padding: 12px 0; margin: 0; font-size: 12px; }
.stamp-management-section .secondary-button { border: 1px solid var(--accent); border-radius: 8px; padding: 10px 16px; color: var(--accent-dark); background: var(--soft); }
.stamp-selection-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; }
.stamp-selection-row > button { font-size: 10px; min-height: 36px; }
#stamp-edit-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.stamp-edit-preview { display: grid; place-items: center; border-radius: 12px; padding: 18px; background: var(--soft); }
.stamp-edit-preview img { width: 112px; height: 112px; object-fit: contain; }
#stamp-edit-name { font-size: 16px; }
#stamp-edit-dialog .secondary-button { border: 1px solid var(--accent); border-radius: 8px; padding: 10px 16px; color: var(--accent-dark); background: var(--soft); }
.stamp-crop-frame { position: relative; width: 100%; max-width: 320px; margin: 0 auto; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); background: repeating-conic-gradient(#eee5da 0% 25%, #fffaf3 0% 50%) 0 0 / 20px 20px; }
#stamp-crop-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#stamp-crop-canvas:active { cursor: grabbing; }
#stamp-crop-canvas:focus-visible { outline-offset: -3px; }
.stamp-crop-guide { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, transparent 33.1%, #ffffff88 33.1%, #ffffff88 33.5%, transparent 33.5%, transparent 66.4%, #ffffff88 66.4%, #ffffff88 66.8%, transparent 66.8%), linear-gradient(to bottom, transparent 33.1%, #ffffff88 33.1%, #ffffff88 33.5%, transparent 33.5%, transparent 66.4%, #ffffff88 66.4%, #ffffff88 66.8%, transparent 66.8%); }
#stamp-crop-dialog .crop-zoom-label { flex-direction: row; justify-content: space-between; margin-bottom: 6px; }
#stamp-crop-zoom { padding: 0; min-height: 30px; }
#stamp-crop-hint { margin-top: 0; }
#backup-fields { border: 0; margin: 0; padding: 0; min-width: 0; }
#backup-dialog .secondary-button { border: 1px solid var(--accent); border-radius: 8px; padding: 12px; margin: 6px 0; color: var(--accent-dark); background: var(--soft); }
#backup-dialog .backup-confirm { display: flex; flex-direction: row; align-items: center; gap: 8px; }
#backup-replace { width: 18px; height: 18px; flex-shrink: 0; }
#backup-filename, #backup-summary { overflow-wrap: anywhere; white-space: pre-line; }
#backup-dialog hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
#backup-dialog button:disabled { opacity: .5; cursor: wait; }
.cat-scene { position: relative; padding-top: 46px; }
.calendar-cats { display: block; width: 100%; height: auto; }
.cat-speech { position: absolute; top: 0; left: 0; right: 0; min-height: 30px; padding: 4px 9px; border: 1px solid #d8c2ad; border-radius: 13px; background: var(--paper); box-shadow: 0 3px 9px #78553e0d; text-align: center; pointer-events: none; line-height: 1.5; }
.cat-speech::after { content: ''; position: absolute; bottom: -5px; left: 30%; width: 8px; height: 8px; background: var(--paper); border-right: 1px solid #d8c2ad; border-bottom: 1px solid #d8c2ad; transform: rotate(45deg); }
.cat-speech[data-speaker=mame]::after { left: 68%; }
.cat-speech span { display: block; font-size: 11px; color: var(--accent-dark); overflow-wrap: anywhere; }