/* === TodoList 预览版组件样式 === */
.app-screen{display:none}.app-screen.active{display:block}

.td-header{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #d8e0e0;margin-bottom:8px}

.td-date{font-family:'Noto Serif SC',serif;font-size:13px;font-weight:600;color:#1a3a3a}

.td-weather{font-size:10px;color:#5a6b3a}

.td-count{font-family:'JetBrains Mono',monospace;font-size:10px;color:#3d5a5a;background:#d8e8e8;padding:2px 6px;border-radius:4px}

.td-header .td-header-icon{width:18px;height:18px;mix-blend-mode:multiply;display:inline-block;background-size:contain;background-repeat:no-repeat;background-position:center}

.td-section-label{font-size:9px;color:#3d5a5a;letter-spacing:0.15em;text-transform:uppercase;margin:6px 0 4px;font-weight:600;display:flex;align-items:center;justify-content:space-between}

.td-section-label .lbl-icon{width:11px;height:11px;mix-blend-mode:multiply;display:inline-block;background-size:contain;background-repeat:no-repeat;background-position:center}

.td-task{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid #d8e0e0}

.td-task .check{
  width:16px;height:16px;border:1.5px solid #5a6b3a;border-radius:50%;flex-shrink:0;margin-top:1px;
  position:relative;background:transparent;
}

.td-task .check.done{background:#5a6b3a;border-color:#5a6b3a}

.td-task .check.done::after{content:'鉁?;position:absolute;top:-3px;left:1px;color:#fff;font-size:11px;font-weight:700}

.td-task .content{flex:1;min-width:0}

.td-task .content.done .title,.td-task .content.done .meta{text-decoration:line-through;opacity:0.5}

.td-task .title{font-size:11px;color:#1a3a3a;line-height:1.3}

.td-task .meta{font-size:9px;color:#5a6b3a;margin-top:2px;font-family:'JetBrains Mono',monospace;display:flex;align-items:center;flex-wrap:wrap;gap:1px}

.td-task .meta .meta-icon{width:10px;height:10px;mix-blend-mode:multiply;display:inline-block;background-size:contain;background-repeat:no-repeat;background-position:center;margin:0 2px}

.td-dot{display:inline-block;margin:0 3px;color:#c9a35c;font-weight:700}

.td-grid .icon-grid-item{font-size:7.5px}

.td-pomo{display:flex;justify-content:center;padding:14px 0}

.td-pomo-ring{
  width:130px;height:130px;border-radius:50%;
  background:conic-gradient(from 0deg,#a04a3a 0deg,#a04a3a 270deg,#e8e0d0 270deg,#e8e0d0 360deg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;
}

.td-pomo-ring::before{content:'';position:absolute;inset:8px;border-radius:50%;background:#faf6ed}

.td-pomo-time{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:600;color:#1a3a3a;z-index:1}

.td-pomo-label{font-size:9px;color:#3d5a5a;z-index:1;margin-top:2px}

.td-pomo-controls{display:flex;gap:6px;margin-bottom:8px;justify-content:center}

.td-pomo-controls button{
  padding:7px 16px;border-radius:8px;font-size:11px;display:flex;
  align-items:center;gap:4px;font-family:inherit;cursor:pointer;
  border:1px solid #3d5a5a;background:#faf6ed;color:#3d5a5a;
}

.td-pomo-controls button .ctrl-icon{width:12px;height:12px;mix-blend-mode:multiply;display:inline-block;background-size:contain;background-repeat:no-repeat;background-position:center}

.td-pomo-controls button.pause{background:#a04a3a;color:#fff;border-color:#a04a3a}

.td-pomo-controls button.pause .ctrl-icon.invert{filter:invert(1);mix-blend-mode:normal}

.td-pomo-controls button.reset{background:#faf6ed;color:#3d5a5a}

.td-cal{background:linear-gradient(135deg,#faf6ed,#f0f4f0);border:1px solid #d8e0e0;border-radius:8px;padding:6px;margin-bottom:8px}

.td-cal-header{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}

.td-cal-header span{text-align:center;font-size:9px;color:#5a6b3a;font-weight:600}

.td-cal-header .weekend{color:#a6443a}

.td-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}

.td-cal-grid span{text-align:center;font-size:10px;padding:3px 0;color:#1a3a3a;border-radius:4px}

.td-cal-grid .weekend{color:#a6443a}

.td-cal-grid .today{background:#5a6b3a;color:#fff;font-weight:600}

.td-kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:6px}

.td-kanban-col{
  background:rgba(250,246,237,0.4);border:1px solid #e8e0d0;
  border-radius:8px;padding:5px 4px;min-height:120px;
}

.td-kanban-title{
  font-size:9px;font-weight:600;color:#3d5a5a;margin-bottom:4px;
  display:flex;align-items:center;gap:3px;letter-spacing:0.05em;
}

.td-kanban-title .kb-icon{width:11px;height:11px;mix-blend-mode:multiply;display:inline-block;background-size:contain;background-repeat:no-repeat;background-position:center}

.td-kanban-card{
  background:#faf6ed;border:1px solid #e8e0d0;border-radius:5px;
  padding:3px 4px;margin-bottom:3px;font-size:9px;color:#2e2b24;line-height:1.3;
}

.td-tabbar{background:linear-gradient(180deg,rgba(240,248,248,0.98),rgba(220,240,240,0.98));border-top-color:#c8d8d8}

.td-tabbar button{color:#3d5a5a}

.td-tabbar button.add{flex:0.7}

.td-tabbar button.add .tb-icon{width:24px;height:24px;opacity:1;background:#5a6b3a;border-radius:50%;padding:4px;box-shadow:0 2px 8px rgba(0,0,0,0.15)}

.td-tabbar button .tb-icon{ filter:sepia(0.4) hue-rotate(-10deg) saturate(0.9); }


/* === 通用组件 === */

.phone-screen{
  position:relative;
  width:100%;aspect-ratio:9/19.5;height:560px;
  border-radius:22px;overflow:hidden;
  background-color:var(--bg, #ffffff);  /* 榛樿闅忎富棰樿壊 */
  background-size:cover;background-position:center;background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);
}

.phone-screen{
  background-image:var(--img-bg, none);
  background-color:transparent;
}

.phone-screen,
body[data-theme^="grad-"] .phone-screen,
body[data-theme="eink"] .phone-screen{
  background:var(--bg, #ffffff);
  background-image:none;
}

.screen-label{
  position:absolute;top:8px;left:8px;z-index:50;
  background:rgba(45,40,30,0.75);color:#faf6ed;font-size:9px;
  padding:2px 6px;border-radius:3px;font-family:'JetBrains Mono',monospace;
  letter-spacing:0.05em;backdrop-filter:blur(2px);
}

.material-chip{
  position:absolute;top:8px;right:8px;z-index:50;
  background:rgba(90,107,58,0.85);color:#fff;font-size:8px;
  padding:2px 5px;border-radius:3px;letter-spacing:0.05em;
}

.stat-card{
  --accent:#5a6b3a;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:6px 4px;background:linear-gradient(135deg,rgba(250,246,237,0.85),rgba(245,239,225,0.7));
  border:1px solid #e8e0d0;border-radius:10px;
  position:relative;overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,0.04);
}

.stat-card::before{content:'';position:absolute;left:0;top:0;width:3px;height:100%;background:var(--accent);opacity:0.6}

.stat-card .stat-icon{width:16px;height:16px;mix-blend-mode:multiply;opacity:0.85}

.stat-card .stat-num{font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:600;color:var(--accent);margin-top:1px;line-height:1}

.stat-card .stat-lbl{font-size:8px;color:#7d7566;letter-spacing:0.05em;margin-top:2px}

.stat-row{display:flex;gap:5px;margin-bottom:8px}

.stat-row.cols-3 .stat-card{flex:1}

.stat-row.cols-4 .stat-card{flex:1}

.icon-grid{display:grid;gap:5px;margin-bottom:8px}

.icon-grid.cols-4{grid-template-columns:repeat(4,1fr)}

.icon-grid.cols-3{grid-template-columns:repeat(3,1fr)}

.icon-grid-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:6px 2px;background:linear-gradient(135deg,rgba(250,246,237,0.7),rgba(245,239,225,0.5));
  border:1px solid #e8e0d0;border-radius:8px;
  font-size:8px;color:#5c5648;cursor:pointer;transition:all 0.15s;
  min-height:44px;gap:3px;
}

.icon-grid-item:hover{background:linear-gradient(135deg,#f0e8d0,#e8e0d0);transform:translateY(-1px)}

.icon-grid-item [class^="img-i"]{width:18px;height:18px;mix-blend-mode:multiply}

.icon-grid-item.dark{background:rgba(45,40,30,0.05);color:#1a1a1a}

.icon-grid-item.dark [class^="img-i"]{filter:invert(0.6)}

.tag-chip{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 8px;border-radius:20px;font-size:9px;font-weight:500;
  border:1px solid currentColor;line-height:1;
}

.tag-chip .chip-icon{width:10px;height:10px;mix-blend-mode:multiply;display:inline-block;background-size:contain;background-repeat:no-repeat;background-position:center}

.mini-label{font-size:8px;color:#7d7566;letter-spacing:0.05em;margin-left:auto;align-self:center}

.hero-banner{
  position:relative;border-radius:10px;overflow:hidden;
  height:64px;margin-bottom:8px;
  background:linear-gradient(135deg,rgba(250,246,237,0.6),rgba(245,239,225,0.5));
  border:1px solid #e8e0d0;
}

.hero-banner .hb-bg{
  position:absolute;inset:0;width:100%;height:100%;
  background:linear-gradient(135deg, rgba(245,239,225,0.3) 0%, rgba(250,246,237,0.5) 100%);
  mix-blend-mode:multiply;opacity:0.7;
  z-index:0;
}

.hero-banner .hb-text{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center}

.hero-banner .title{
  padding:6px 10px 0;font-family:'Noto Serif SC',serif;
  font-size:14px;font-weight:600;color:#2e2b24;
}

.hero-banner .title.dark{color:#1a1a1a}

.hero-banner .sub{
  padding:0 10px 6px;font-size:9px;color:#7d7566;
  display:flex;align-items:center;gap:4px;
}

.hero-banner .sub.dark{color:#3d3528}

.hero-banner .sub .sub-icon{width:10px;height:10px;mix-blend-mode:multiply;display:inline-block;background-size:contain;background-repeat:no-repeat;background-position:center}

.hero-banner .sub .sub-icon.invert{filter:invert(0.7)}

.hero-banner.hb-short{height:54px}

.hero-banner.hb-tall{height:80px}

.hero-banner.dark-bg{background:linear-gradient(135deg,rgba(245,239,225,0.6),rgba(220,220,220,0.5))}

.td-section-label{font-size:9px;color:#3d5a5a;letter-spacing:0.15em;text-transform:uppercase;margin:6px 0 4px;font-weight:600;display:flex;align-items:center;justify-content:space-between}

.td-section-label .lbl-icon{width:11px;height:11px;mix-blend-mode:multiply;display:inline-block;background-size:contain;background-repeat:no-repeat;background-position:center}

.icon-grid-item{font-size:7.5px}

.pb-wrap{margin-bottom:8px;position:relative}

.phone-screen.wd2{
  background-color: #ffffff;
  position: relative;
}

.phone-screen.wd2::before{
  content:"";
  position: absolute;
  inset: 0;
  background: rgba(248,245,235,0.78);
  pointer-events: none;
  z-index: 0;
}

.phone-screen.wd2::before,
body[data-theme^="solid-"] .phone-screen.wd2::before,
body[data-theme^="grad-"] .phone-screen.wd2::before{
  background: rgba(255,255,255,0.92);
}

.phone-screen.wd2 .screen-scroll{
  position: relative;
  z-index: 2;
}

.phone-screen.wd2 .wd2-tabbar{
  position: relative;
  z-index: 3;
}

.phone-screen.wd2.phone-paper-5{ background-image: none; background-color: #ffffff; }

.hero-banner{ display: none; }

.stat-row{ display: none; }

.icon-grid{ display: none; }

.phone-screen{height:480px}

.phone-screen{height:420px}

.phone-screen{height:560px}

.phone-screen.wd1[class*="phone-paper-"]{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.phone-screen.cd[class*="phone-paper-"]{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.phone-screen.td[class*="phone-paper-"]{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.phone-screen{height:400px;}

.phone-screen{font-size:8.5px;}

.phone-screen{height:440px;}

.phone-screen{height:480px;}

.phone-screen{height:520px;}

.phone-screen{height:280px;border-radius:14px;}

.screen-label{font-size:7px;top:4px;left:4px;}




/* === JS class → V27 preview bridge === */
.task-item,.td-task{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid #d8e0e0;cursor:pointer;transition:background 0.15s}
.task-item:hover,.td-task:hover{background:rgba(240,248,248,0.4)}
.task-item.completed{opacity:0.5}
.task-item.completed .task-title{text-decoration:line-through}
.task-checkbox{width:16px;height:16px;border:1.5px solid #5a6b3a;border-radius:50%;flex-shrink:0;margin-top:1px;position:relative;background:transparent;cursor:pointer}
.task-checkbox.checked{background:#5a6b3a;border-color:#5a6b3a}
.task-checkbox.checked::after{content:"✓";position:absolute;top:-3px;left:1px;color:#fff;font-size:11px;font-weight:700}
.task-content{flex:1;min-width:0}
.task-title{font-size:11px;color:#1a3a3a;line-height:1.3}
.task-info{font-size:9px;color:#5a6b3a;margin-top:2px;font-family:"JetBrains Mono",monospace;display:flex;align-items:center;flex-wrap:wrap;gap:1px}
.task-actions{display:flex;gap:3px;opacity:0;transition:opacity 0.15s}
.task-item:hover .task-actions{opacity:1}
.task-select{width:auto;margin-right:2px;accent-color:#5a6b3a}
.task-desc{font-size:9px;color:#5a6b3a;margin-top:1px}
.task-deadline{display:flex;align-items:center;gap:2px}
.task-deadline.overdue{color:#a04a3a;font-weight:600}
.task-deadline.today{color:#5a6b3a;font-weight:500}
.task-countdown{font-family:"JetBrains Mono",monospace;font-size:9px;margin-left:auto}
.task-countdown.urgent{color:#a04a3a;font-weight:600}
.task-countdown.soon{color:#c9a35c}
.task-priority{font-size:8px;padding:1px 5px;border-radius:8px;font-weight:600}
.task-priority.high{background:rgba(160,74,58,0.12);color:#a04a3a}
.task-priority.medium{background:rgba(201,163,92,0.12);color:#8a6a2a}
.task-priority.low{background:rgba(90,107,58,0.08);color:#5a6b3a}
.task-repeat{font-size:8px;padding:1px 5px;background:rgba(90,107,58,0.08);color:#5a6b3a;border-radius:8px}
.task-project{font-size:9px;color:#3d5a5a;padding:1px 5px;background:rgba(61,90,90,0.06);border-radius:6px}
.task-title-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.task-important{font-size:13px;cursor:pointer;color:#c9a35c}
.task-important:not(.active){opacity:0.25}
.task-delete{font-size:11px;cursor:pointer;color:#a04a3a;opacity:0.5;margin-left:2px}
.task-delete:hover{opacity:1}
.task-item.urgent{border-left:3px solid #a04a3a}
.task-item.selected{border-color:#5a6b3a;box-shadow:0 0 0 2px rgba(90,107,58,0.15)}