/* My Space 2026 · unified Notion-inspired visual system
   Loaded after legacy component styles. Keep all saved layout and theme values. */
body[data-theme]{
 --ms-ink:#383e3a;
 --ms-secondary:#727c75;
 --ms-faint:#9ca69d;
 --ms-rule:#eaeeeb;
 --ms-rule-soft:#f1f3f1;
 --ms-paper:#ffffff;
 --ms-quiet:#f8f9f8;
 --ms-card-radius:16px;
 --ms-control-radius:9px;
 --ms-focus:#a5b9ab;
 --ms-elevation:0 1px 2px rgba(33,45,38,.025),0 4px 18px rgba(33,45,38,.025);
 --ms-accent-bg:var(--pastel-action,#e6eee8);
 --ms-accent-text:var(--pastel-action-text,#596d60);
 font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI","Malgun Gothic",sans-serif!important;
 font-feature-settings:"kern" 1;
 -webkit-font-smoothing:antialiased;
 text-rendering:optimizeLegibility;
 letter-spacing:-.018em;
 color:var(--ms-ink);
}
body[data-theme] button,
body[data-theme] input,
body[data-theme] select,
body[data-theme] textarea{
 font-family:inherit;
 letter-spacing:-.012em;
}
body[data-theme] .content{
 max-width:1540px;
 padding-top:clamp(21px,3vw,38px)!important;
 padding-inline:clamp(20px,3.3vw,52px)!important;
 padding-bottom:90px!important;
}
body[data-theme] .toolbar{
 min-height:35px!important;
 margin-bottom:clamp(17px,2vw,24px)!important;
}
body[data-theme] .title{
 font-size:clamp(25px,2.5vw,34px)!important;
 font-weight:665!important;
 line-height:1.15!important;
 color:var(--ms-ink)!important;
 letter-spacing:-.045em!important;
}
body[data-theme] .date-in-heading,
body[data-theme] #mobileDate{
 color:var(--ms-secondary)!important;
 font-weight:450!important;
 letter-spacing:-.015em!important;
}
body[data-theme] .sectionhead{
 color:var(--ms-ink);
}
body[data-theme] .sectionhead h2{
 font-size:12px!important;
 font-weight:620!important;
 letter-spacing:-.018em;
}
body[data-theme] .status{
 font-size:10px!important;
 color:var(--ms-faint)!important;
}
/* Unified surfaces: almost-white cards for every milk-pastel theme. */
body[data-theme] #widgets.custom-layout{
 gap:14px!important;
 align-items:stretch!important;
}
body[data-theme] #widgets.custom-layout>.widget{
 background:var(--ms-paper)!important;
 border:1px solid var(--ms-rule)!important;
 border-radius:var(--ms-card-radius)!important;
 box-shadow:var(--ms-elevation)!important;
 color:var(--ms-ink)!important;
 padding:clamp(13px,1.6vw,18px)!important;
 min-width:0!important;
 min-height:0!important;
}
body[data-theme] #widgets.custom-layout>.widget:focus-within{
 border-color:#dce5de!important;
}
body[data-theme] #widgets.custom-layout>.widget .widget-head{
 display:flex;
 align-items:center!important;
 justify-content:space-between;
 gap:12px!important;
 min-height:25px!important;
 margin-bottom:10px!important;
 flex:none;
}
body[data-theme] #widgets.custom-layout>.widget .widget-name{
 font-size:12px!important;
 font-weight:615!important;
 letter-spacing:-.018em!important;
 color:var(--ms-ink)!important;
 line-height:1.3!important;
 gap:9px!important;
 white-space:nowrap;
 min-width:0;
}
body[data-theme] #widgets.custom-layout>.widget .widget-name svg{
 width:16px!important;height:16px!important;
 flex:none;
 color:#85928b!important;
 stroke-width:1.65!important;
}
body[data-theme] #widgets.custom-layout>.widget .widget-caption,
body[data-theme] #widgets.custom-layout>.widget .cal-scope,
body[data-theme] #widgets.custom-layout>.widget .rt-foot{
 color:var(--ms-faint)!important;
 font-size:10px!important;
 font-weight:400!important;
 line-height:1.4!important;
 letter-spacing:0!important;
}
body[data-theme] #widgets.custom-layout>.widget .mini-btn{
 color:var(--ms-secondary)!important;
 font-size:11px!important;
 font-weight:490!important;
 background:transparent!important;
 border:0!important;
 border-radius:8px!important;
 padding:5px 7px!important;
 box-shadow:none!important;
}
body[data-theme] #widgets.custom-layout>.widget .mini-btn:hover{
 background:var(--ms-quiet)!important;
 color:var(--ms-ink)!important;
}
body[data-theme] .circle,
body[data-theme] .tool-right .editbtn{
 box-shadow:none!important;
}
body[data-theme] .tool-right .editbtn{
 border-radius:10px!important;
 font-weight:570!important;
}
body[data-theme] .tool-right .editbtn:not(.selected){
 color:#fff!important;background:#3d4540!important;
}
body[data-theme] .tool-right .editbtn.selected{
 background:var(--ms-accent-bg)!important;
 color:var(--ms-accent-text)!important;
}
/* Sidebar and selected navigation should not look like a separate app. */
body[data-theme] .side{
 border-color:var(--ms-rule)!important;
}
body[data-theme] .side .nav{
 border-radius:10px!important;
 min-height:42px!important;
 font-size:12px!important;
 letter-spacing:-.014em!important;
 font-weight:490!important;
 color:var(--ms-secondary)!important;
}
body[data-theme] .side .nav:hover:not(.active){
 background:#f6f8f6!important;
}
body[data-theme] .side .nav.active{
 background:var(--ms-accent-bg)!important;
 color:var(--ms-accent-text)!important;
 font-weight:610!important;
}
body[data-theme] .side .nav svg{
 width:17px!important;height:17px!important;
 stroke-width:1.75!important;
}
body[data-theme] .side .side-divider{
 background:var(--ms-rule)!important;
}
body[data-theme] .sidebar-control,
body[data-theme] .sidebar-toggle{
 color:#89968c!important;
 border-color:transparent!important;
 box-shadow:none!important;
}
body[data-theme] .sidebar-control:hover,
body[data-theme] .sidebar-toggle:hover{
 color:var(--ms-ink)!important;
 background:#f6f8f6!important;
}
/* Editing is visibly separate, without giant blue handles. */
body[data-theme] #widgets.custom-layout>.widget .widget-grip,
body[data-theme] #widgets.custom-layout>.widget .widget-resize-grip,
body[data-theme] #widgets.custom-layout>.widget .widget-tools{
 display:none!important;
}
body[data-theme].editing #widgets.custom-layout>.widget .widget-grip{
 display:grid!important;
 width:24px!important;height:24px!important;
 top:7px!important;left:8px!important;
 opacity:.58!important;
 background:#fff!important;
 border:1px solid #e8eeea!important;
 box-shadow:none!important;
 color:#9aa79c!important;
 border-radius:8px!important;
}
body[data-theme].editing #widgets.custom-layout>.widget:hover .widget-grip,
body[data-theme].editing #widgets.custom-layout>.widget.selected-widget .widget-grip{
 opacity:.95!important;
}
body[data-theme].editing #widgets.custom-layout>.widget .widget-tools{
 display:flex!important;
 right:8px!important;top:8px!important;
 background:#fff!important;
 border:1px solid #e8ece8!important;
 border-radius:9px!important;
 box-shadow:0 2px 8px rgba(24,30,26,.055)!important;
 opacity:.75!important;
}
body[data-theme].editing #widgets.custom-layout>.widget .widget-tools button{
 color:#79847c!important;
}
body[data-theme].editing #widgets.custom-layout>.widget .widget-resize-grip{
 display:grid!important;place-items:center!important;
 bottom:6px!important;right:6px!important;
 width:25px!important;height:25px!important;
 color:#88988e!important;
 border:0!important;border-radius:8px!important;
 background:#f5f8f6!important;
 opacity:.7!important;
}
body[data-theme].editing #widgets.custom-layout>.widget:hover .widget-resize-grip,
body[data-theme].editing #widgets.custom-layout>.widget.selected-widget .widget-resize-grip{
 opacity:1!important;
}
body[data-theme].editing #widgets.custom-layout>.widget.selected-widget{
 border-color:#b7c6bb!important;
 outline:1px solid #dce8df!important;
 outline-offset:2px!important;
}
body[data-theme]:not(.editing) #widgets.custom-layout>.widget .page-calendar-source,
body[data-theme]:not(.editing) #widgets.custom-layout>.widget .photo-action-row,
body[data-theme]:not(.editing) #widgets.custom-layout>.widget [data-quote-settings]{
 display:none!important;
}
/* Secondary widget surfaces remain a quiet neutral rather than full-theme filled. */
body[data-theme] #widgets.custom-layout>.widget[data-widget="shortcuts"] .quick{
 background:#f8f9f8!important;
 border:1px solid #f0f1ef!important;
 border-radius:11px!important;
 box-shadow:none!important;
 color:var(--ms-ink)!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-widget="shortcuts"] .quick:hover{
 background:#f4f6f4!important;
 border-color:#e6ebe6!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-widget="shortcuts"] .quick svg{
 color:#87988d!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-widget="shortcuts"] .quick label{
 color:#48534c!important;
 font-weight:565!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-widget="quickmemo"] .notes-input{
 background:#f9faf9!important;
 border:1px solid #f0f1ef!important;
 border-radius:12px!important;
 color:var(--ms-ink)!important;
 line-height:1.57!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-widget="quickmemo"] .notes-input:focus{
 outline:none!important;
 border-color:#cfdbd2!important;
 background:white!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-widget="quickmemo"] .save{
 background:var(--ms-accent-bg)!important;
 color:var(--ms-accent-text)!important;
 border:0!important;
 border-radius:9px!important;
 box-shadow:none!important;
 font-size:11px!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-widget="checklist"] .task-add input{
 background:#f9faf9!important;
 border-color:#edf0ed!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-widget="photos"] .photo-mosaic{
 border-radius:12px!important;
 gap:6px!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-widget="photos"] .photo-tile img{
 width:100%;height:100%;object-fit:cover;
}
/* Calendar and tracked progress preserve meaningful status colors. */
body[data-theme] #widgets.custom-layout>.widget[data-widget="calendar"] .events{
 border-top:0!important;
 border-bottom:0!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-widget="calendar"] .ms-event-main strong{
 font-weight:585!important;
 color:#39433d!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-widget="calendar"] .status-done .ms-event-main strong{
 color:#95a69a!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-widget="calendar"] .status-progress .ms-event-meta{
 color:#7a9cc2!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-widget="calendar"] .status-done .ms-event-meta{
 color:#7fa18b!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-widget="calendar"] .events>.ms-event-row{
 min-height:46px!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-widget="calendar"] .ms-event-change{
 color:#87968b!important;
}
/* Item count and partial numeric progress must not compete. */
body[data-theme] #widgets.custom-layout>.widget[data-widget="habits"] .rt-summary strong{
 color:#414a43!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-widget="habits"] .rt-amount-info .rt-title{
 white-space:nowrap;
}
body[data-theme] #widgets.custom-layout>.widget[data-widget="weekly"] .rt-weekly-bars{
 gap:8px!important;
}
/* Modals, including the quote library, use the same neutral visual language. */
body[data-theme] #modalbg #modal{
 background:#fff!important;
 color:var(--ms-ink)!important;
}
body[data-theme] #modalbg #modal h3{
 color:#38433c!important;
 font-weight:650!important;
 letter-spacing:-.032em!important;
}
body[data-theme] #modalbg #modal .choice,
body[data-theme] #modalbg #modal .layout-size-options button{
 border:1px solid #e9eeea!important;
 background:#fff!important;
 border-radius:10px!important;
}
body[data-theme] #modalbg #modal .choice:hover,
body[data-theme] #modalbg #modal .layout-size-options button:hover{
 background:#f7f9f7!important;
}
body[data-theme] .settings-panel .theme-choice{
 background:white!important;
 border-radius:10px!important;
}
body[data-theme] .settings-panel .theme-choice.active{
 border-color:#d0dbd3!important;
 background:#f7faf8!important;
}
body[data-theme] .settings-panel .theme-swatch{
 border-radius:50%!important;
}
/* Quote shelf: practical and clean; no colored tile backgrounds. */
.ms-quote-editor .ms-library-open{
 align-self:flex-start;
 padding:8px 11px!important;
 border:1px solid #e7ece8!important;
 background:#f9faf9!important;
 color:#69786e!important;
 border-radius:9px!important;
 font-size:11px!important;
}
.ms-library-editor{display:grid;gap:12px;min-width:0}
.ms-library-editor h3{margin:0;font-size:20px}
.ms-library-editor>p{font-size:11px;color:#87948a;line-height:1.5;margin:0}
.ms-library-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ms-library-heading button{padding:8px 11px;font-size:11px;border-radius:8px;background:#f7f9f7}
.ms-library-list{display:grid;gap:15px;max-height:min(49dvh,500px);overflow-y:auto;scrollbar-width:thin}
.ms-library-group{
 border:1px solid #e9edea;border-radius:13px;padding:13px;
 display:grid;gap:12px;background:#fff;min-width:0
}
.ms-library-group-head{display:flex;align-items:center;gap:9px;min-width:0}
.ms-library-group-head strong{font-size:13px;color:#48534b;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ms-library-group-head span{margin-left:auto;white-space:nowrap;color:#9ba59d;font-size:10px}
.ms-library-group-head button,
.ms-library-entry>button{
 background:transparent;border:0;font-size:10px;color:#89998d;white-space:nowrap;
 border-radius:6px;padding:5px 6px
}
.ms-library-group-head button:hover,
.ms-library-entry>button:hover{color:#a8757e;background:#fcf6f6}
.ms-library-entries{display:grid;gap:0;max-height:180px;overflow:auto}
.ms-library-entry{
 display:flex;align-items:center;gap:8px;min-width:0;
 padding:9px 0;border-bottom:1px solid #f0f2ef;
}
.ms-library-entry>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ms-library-entry strong{
 color:#4b564d;font-size:11px;font-weight:510;
 white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;
}
.ms-library-entry small{color:#9fa89f;font-size:10px}
.ms-library-empty{font-size:11px;color:#a0a99f;padding:6px 0;margin:0}
.ms-library-editor form{display:grid;gap:8px}
.ms-library-editor form label{color:#859185;font-size:11px}
.ms-library-editor input,.ms-library-editor textarea{
 width:100%;min-width:0;padding:9px 10px;
 border:1px solid #e1e8e2;border-radius:9px;
 background:#fafbfa;color:#435046;resize:vertical;
 font:inherit;font-size:12px;
}
.ms-library-inline{display:flex;align-items:center;gap:8px;min-width:0}
.ms-library-inline input{flex:1;min-width:0}
.ms-library-inline button,
.ms-library-new-entry button,.ms-library-editor .line .primary{
 padding:8px 12px;border:0;border-radius:8px;
 background:var(--ms-accent-bg,#e8f0e8);
 color:var(--ms-accent-text,#526b59);font-size:11px;white-space:nowrap
}
.ms-library-foot{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.ms-library-foot small{font-size:10px;color:#9aa39b}
.ms-library-foot button{border:1px solid #e7ece7;border-radius:8px;background:#fff;color:#67746b;font-size:11px;padding:8px 12px}
/* Responsive layouts use width and height independently. */
body[data-theme] #widgets.custom-layout>.widget[data-ui-width="narrow"]{
 padding:13px!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-ui-width="narrow"] .widget-head{
 gap:5px!important;min-height:21px!important;margin-bottom:8px!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-ui-width="narrow"] .widget-name{
 font-size:11px!important;gap:6px!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-ui-width="narrow"] .widget-name svg{
 width:14px!important;height:14px!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-ui-height="short"] .widget-caption{
 display:none!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-ui-height="short"] .rt-weekly-foot{
 display:none!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-ui-width="narrow"][data-widget="music"] .song,
body[data-theme] #widgets.custom-layout>.widget[data-ui-width="narrow"][data-widget="music"] .music{
 min-width:0!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-ui-width="narrow"][data-widget="music"] .album{
 width:48px!important;height:48px!important;flex:0 0 48px!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-ui-height="short"][data-widget="quote"] .ms-quote-punctuation{
 display:none!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-ui-height="short"][data-widget="quote"] .ms-quote-widget{
 gap:5px!important;padding:5px!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-ui-height="short"][data-widget="journal"] .journal-recent-list{
 display:none!important;
}
body[data-theme] #widgets.custom-layout>.widget[data-ui-height="short"][data-widget="calendar"] .ms-event-change{
 display:none!important;
}
@media(min-width:720px){
 body[data-theme] .bottombar{
  display:none!important;
 }
}
@media(max-width:719px){
 body[data-theme] .content{
  padding:17px 14px 110px!important;
 }
 body[data-theme] #widgets.custom-layout{gap:10px!important}
 body[data-theme] #widgets.custom-layout>.widget{
  border-radius:14px!important;
  padding:13px!important;
 }
 body[data-theme] .title{font-size:26px!important}
 body[data-theme] .ms-library-inline{flex-wrap:wrap}
 body[data-theme] .ms-library-inline button{margin-left:auto}
 body[data-theme] .ms-quote-settings-row{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){
 body[data-theme] #widgets.custom-layout>.widget *,
 body[data-theme] #widgets.custom-layout>.widget *::before,
 body[data-theme] #widgets.custom-layout>.widget *::after{
  transition-duration:.01ms!important;
  animation-duration:.01ms!important;
 }
}