/* ============================================
   春天里 — v5: 任务/习惯统一，4列布局
   ============================================ */

:root {
  --amber-600:#C67A3A; --amber-500:#D4946A; --amber-100:#F8F0E8; --amber-50:#FCF8F4;
  --green-800:#2D4A3E; --green-600:#4A7A6B; --green-500:#5B8C7E; --green-400:#8FB9A8; --green-100:#EAF2EE; --green-50:#F5F9F7;
  --rose-600:#C44040; --rose-500:#E05555; --rose-100:#FCEAEA; --rose-50:#FEF6F6;
  --blue-600:#4A8FBA; --blue-100:#E8F2F8;
  --purple-500:#7C5CBF; --purple-100:#F0EBF8;
  --slate-800:#2D3E40; --slate-600:#5A6E70; --slate-400:#8FA0A2; --slate-200:#CDD7D8; --slate-100:#E6ECEA; --slate-50:#F4F7F6;
  --bg:#F9FAF8; --card:#FFFFFF; --text:#2D3E40; --text-secondary:#5A6E70; --text-muted:#8FA0A2; --border:#E2E8E4;
  --sidebar-width:190px;
  --radius:12px; --radius-sm:8px; --radius-xs:5px;
  --shadow-sm:0 1px 3px rgba(45,62,64,0.05); --shadow:0 2px 10px rgba(45,62,64,0.06); --shadow-lg:0 8px 28px rgba(45,62,64,0.10);
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Serif SC","Helvetica Neue",sans-serif;
  --transition:0.2s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.6}
input,textarea,select,button{font-family:inherit;font-size:inherit}
button{cursor:pointer;border:none;background:none;outline:none}
a{color:var(--green-500);text-decoration:none}
ul{list-style:none}

/* ---- Shell ---- */
#app{display:flex;height:100vh;height:100dvh;overflow:hidden}

/* ---- Sidebar ---- */
#sidebar{width:var(--sidebar-width);flex-shrink:0;background:linear-gradient(180deg,#F6FAF8 0%,#EDF4F0 50%,#EAF2EE 100%);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:20}
.sb-brand{padding:22px 16px 14px;text-align:center;border-bottom:1px solid var(--border)}
.sb-brand-icon{font-size:28px;display:block;margin-bottom:4px}
.sb-brand-text h1{font-size:17px;font-weight:700;color:var(--green-800);letter-spacing:3px}
.sb-brand-text span{font-size:10px;color:var(--text-muted);letter-spacing:1px}
.sb-nav{flex:1;padding:10px 8px;display:flex;flex-direction:column;gap:2px}
.sb-item{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:13px;font-weight:500;transition:var(--transition);width:100%;text-align:left}
.sb-item:hover{background:rgba(91,140,126,0.06);color:var(--green-600)}
.sb-item.active{background:var(--card);color:var(--green-600);font-weight:600;box-shadow:var(--shadow-sm)}
.sb-icon{font-size:16px;width:22px;text-align:center}
.sb-footer{padding:14px;border-top:1px solid var(--border);text-align:center}
.sb-date{font-size:11px;color:var(--text-muted);display:block;margin-bottom:8px}
.sb-font-row{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:10px}
.sb-font-label{font-size:11px;color:var(--text-muted)}
.sb-font-select{padding:3px 6px;border:1px solid var(--border);border-radius:10px;font-size:11px;background:var(--card);color:var(--text);outline:none;cursor:pointer}
.sb-font-select:focus{border-color:var(--green-400)}
.sb-today-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 14px;border-radius:14px;background:var(--card);color:var(--green-600);font-size:11px;font-weight:500;box-shadow:var(--shadow-sm);transition:var(--transition)}
.sb-today-btn:hover{box-shadow:var(--shadow)}

/* ---- Main ---- */
#main{flex:1;overflow:hidden;position:relative}
.page{display:none;height:100%;overflow-y:auto;overflow-x:hidden}
.page.active{display:flex;flex-direction:column}
.page::-webkit-scrollbar{width:5px}
.page::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:3px}
.page-head{display:flex;align-items:center;justify-content:space-between;padding:18px 24px 0;flex-shrink:0}
.page-head h2{font-size:21px;font-weight:700;color:var(--green-800);letter-spacing:2px}

/* ---- Buttons ---- */
.btn-action{display:inline-flex;align-items:center;gap:5px;padding:7px 15px;border-radius:18px;font-size:12px;font-weight:600;transition:var(--transition)}
.btn-action span{font-size:14px;line-height:1}
.btn-add-task{background:var(--green-500);color:#fff}
.btn-add-task:hover{background:var(--green-600)}
.btn-add-reflection{background:var(--amber-100);color:var(--amber-600)}
.btn-add-reflection:hover{background:#F0E4D6}
.btn-action-sm{padding:5px 12px;border-radius:12px;font-size:11px;font-weight:600;background:var(--slate-50);color:var(--text-secondary);transition:var(--transition)}
.btn-action-sm:hover{background:var(--slate-100)}
.btn-action-sm.confirm{background:var(--green-500);color:#fff}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;padding:9px 24px;border-radius:var(--radius-sm);background:var(--green-500);color:#fff;font-size:13px;font-weight:600;transition:var(--transition);letter-spacing:1px}
.btn-primary:hover{background:var(--green-600)}
.btn-primary.saved{background:var(--green-100);color:var(--green-600);pointer-events:none}
.btn-nav{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-secondary);transition:var(--transition)}
.btn-nav:hover{background:var(--green-50);color:var(--green-600)}
.btn-nav-sm{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text-secondary)}

/* ============================================
   TASKS PAGE — 4 columns
   ============================================ */
#page-tasks{padding:0}
.tasks-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 8px;flex-shrink:0}
.tasks-topbar-left{display:flex;align-items:baseline;gap:12px}
.tasks-topbar-left h2{font-size:21px;font-weight:700;color:var(--green-800)}
.tasks-date{font-size:12px;color:var(--text-muted)}
.tasks-topbar-actions{display:flex;gap:8px}

#task-section{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;padding:0 14px;flex:1 1 40%;min-height:0}
.task-column{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;border-top:3px solid transparent}
.task-must-do{border-top-color:var(--amber-500)}
.task-can-do{border-top-color:var(--green-500)}
.task-must-not{border-top-color:var(--rose-500)}
.task-completed{border-top-color:var(--purple-500)}
.column-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 2px}
.column-head-left{display:flex;align-items:center;gap:6px}
.column-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.task-must-do .column-dot{background:var(--amber-500)}
.task-can-do .column-dot{background:var(--green-500)}
.task-must-not .column-dot{background:var(--rose-500)}
.task-completed .column-dot{background:var(--purple-500)}
.column-head h3{font-size:13px;font-weight:700}
.task-must-do .column-head h3{color:var(--amber-600)}
.task-can-do .column-head h3{color:var(--green-600)}
.task-must-not .column-head h3{color:var(--rose-600)}
.task-completed .column-head h3{color:var(--purple-500)}
.column-count{font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px}
.task-must-do .column-count{background:var(--amber-100);color:var(--amber-600)}
.task-can-do .column-count{background:var(--green-100);color:var(--green-600)}
.task-must-not .column-count{background:var(--rose-100);color:var(--rose-600)}
.task-completed .column-count{background:var(--purple-100);color:var(--purple-500)}
.column-desc{font-size:11px;color:var(--text-muted);padding:2px 10px 5px;border-bottom:1px solid var(--slate-50)}
.column-list{flex:1;overflow-y:auto;padding:2px 4px;min-height:0}
.column-list::-webkit-scrollbar{width:3px}
.column-list::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:2px}

/* Column item */
.column-item{display:flex;align-items:center;gap:7px;padding:6px 8px;margin:1px 0;border-radius:var(--radius-xs);cursor:pointer;transition:var(--transition);font-size:13px}
.column-item:hover{background:var(--slate-50)}
.column-item.selected{background:var(--green-100)}
.task-must-do .column-item.selected{background:var(--amber-100)}
.task-must-not .column-item.selected{background:var(--rose-100)}
.task-completed .column-item.selected{background:var(--purple-100)}

/* Checkbox square */
.item-checkbox{width:18px;height:18px;flex-shrink:0;border-radius:4px;border:2px solid var(--slate-200);background:transparent;display:flex;align-items:center;justify-content:center;font-size:11px;color:transparent;transition:var(--transition);cursor:pointer}
.item-checkbox:hover{border-color:var(--green-400)}
.item-checkbox.done{border-color:var(--green-500);background:var(--green-500);color:#fff}
.task-must-do .item-checkbox.done{border-color:var(--amber-500);background:var(--amber-500);color:#fff}
.task-must-not .item-checkbox.done{border-color:var(--rose-500);background:var(--rose-500);color:#fff}

.column-item-text{flex:1;word-break:break-word;line-height:1.3}
.column-item-text.strikethrough{text-decoration:line-through;color:var(--text-muted)}

/* Type badge */
.item-type-badge{font-size:9px;padding:1px 6px;border-radius:8px;font-weight:600;flex-shrink:0}
.type-task{background:var(--blue-100);color:var(--blue-600)}
.type-habit{background:var(--amber-100);color:var(--amber-600)}

.column-item-badge{font-size:10px;padding:1px 6px;border-radius:8px;font-weight:500;flex-shrink:0}
.task-must-do .column-item-badge{background:var(--amber-100);color:var(--amber-600)}
.task-can-do .column-item-badge{background:var(--green-100);color:var(--green-600)}
.task-must-not .column-item-badge{background:var(--rose-100);color:var(--rose-600)}
.task-completed .column-item-badge{background:var(--purple-100);color:var(--purple-500)}
.column-item-delete{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--text-muted);opacity:0;transition:var(--transition);flex-shrink:0}
.column-item:hover .column-item-delete{opacity:1}
.column-item-delete:hover{background:#FEE2E2;color:#EF4444}
.column-empty{text-align:center;color:var(--text-muted);font-size:11px;padding:18px 8px}

/* Detail panel */
#detail-section{flex:1 1 60%;min-height:0;display:flex;padding:6px 12px 10px}
#detail-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-muted);background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.placeholder-icon{font-size:36px;margin-bottom:8px;opacity:0.6}
#detail-placeholder p{font-size:13px}
#detail-content{flex:1;display:flex;gap:10px;min-height:0}
.detail-panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.streak-panel{flex:1 1 36%;min-width:0}
.reflection-panel{flex:1 1 64%;min-width:0}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 6px;flex-shrink:0}
.panel-header h3{font-size:14px;font-weight:700;color:var(--green-800)}
.btn-edit-task{padding:3px 10px;border-radius:10px;font-size:11px;color:var(--text-secondary);font-weight:500;transition:var(--transition)}
.btn-edit-task:hover{background:var(--amber-100);color:var(--amber-600)}
.streak-badge{display:flex;align-items:baseline;gap:2px;padding:3px 10px;border-radius:12px;background:var(--amber-100)}
.streak-num{font-size:18px;font-weight:800;color:var(--amber-600);line-height:1}
.streak-unit{font-size:10px;color:var(--amber-600)}
.streak-actions{display:flex;gap:6px;padding:0 12px 6px}
.btn-streak-day{padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600;background:var(--green-500);color:#fff;transition:var(--transition)}
.btn-streak-day:hover{background:var(--green-600)}
.btn-streak-day.undone{background:var(--slate-100);color:var(--text-secondary)}
.btn-streak-day.undone:hover{background:#FEE2E2;color:#EF4444}
.mini-calendar{flex:1;padding:0 10px 6px;display:flex;flex-direction:column;min-height:0}
.mini-cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.mini-cal-title{font-size:11px;font-weight:600}
.btn-mini-nav{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--text-secondary)}
.mini-cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:9px;font-weight:600;color:var(--text-muted);padding:2px 0}
.mini-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px 0}
.mini-cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:10px;color:var(--text-secondary)}
.mini-cal-day.other-month{color:var(--slate-200)}
.mini-cal-day.today{font-weight:700;color:var(--green-600);box-shadow:inset 0 0 0 1.5px var(--green-400)}
.mini-cal-day.done{color:#fff;font-weight:600}
.mini-cal-day.done.must-do-bg{background:var(--amber-500)}
.mini-cal-day.done.can-do-bg{background:var(--green-500)}
.mini-cal-day.done.must-not-bg{background:var(--rose-500)}

/* Reflection */
.info-block{padding:6px 14px 10px;border-bottom:1px solid var(--slate-50)}
.info-label{font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:3px}
.info-text{font-size:14px;line-height:1.6}
.info-text:empty::after{content:'未填写';color:var(--text-muted)}
.reflection-section{flex:1;display:flex;flex-direction:column;min-height:0;padding:0 14px 10px}
.reflection-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0 6px;flex-shrink:0}
.reflection-tabs{display:flex;gap:4px}
.reflection-tab{padding:4px 14px;border-radius:10px;font-size:13px;color:var(--text-secondary);transition:var(--transition);font-weight:500}
.reflection-tab:hover{background:var(--slate-50)}
.reflection-tab.active{background:var(--green-500);color:#fff}
.btn-add-ref-small{padding:5px 12px;border-radius:10px;font-size:12px;font-weight:600;background:var(--amber-100);color:var(--amber-600);transition:var(--transition)}
.btn-add-ref-small:hover{background:#F0E4D6}
.reflection-display{flex:1;overflow-y:auto;min-height:0}
.reflection-display::-webkit-scrollbar{width:4px}
.reflection-display::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:2px}
.reflection-card{background:var(--slate-50);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:var(--transition);border-left:3px solid transparent;display:flex;align-items:flex-start;gap:8px}
.reflection-card:hover{border-left-color:var(--green-400);background:var(--green-50)}
.reflection-card.selected{border-left-color:var(--amber-500);background:var(--amber-50)}
.reflection-card-date{font-size:12px;color:var(--text-muted);margin-bottom:4px}
.reflection-card-text{font-size:14px;line-height:1.6;flex:1}
.ref-delete-btn{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text-muted);opacity:0;transition:var(--transition);flex-shrink:0}
.reflection-card:hover .ref-delete-btn{opacity:1}
.ref-delete-btn:hover{background:#FEE2E2;color:#EF4444}
.reflection-random-card{background:linear-gradient(135deg,var(--amber-50),var(--green-50));border-radius:var(--radius);padding:18px;text-align:left;border:1px dashed var(--amber-400)}
.reflection-random-card .reflection-card-date{margin-bottom:6px;font-size:12px;color:var(--text-muted)}
.reflection-random-card .reflection-card-text{font-size:15px;line-height:1.8}
.btn-random-refresh{margin-top:10px;padding:6px 16px;border-radius:12px;font-size:13px;font-weight:600;background:var(--amber-100);color:var(--amber-600);transition:var(--transition)}
.reflection-empty{text-align:left;color:var(--text-muted);font-size:13px;padding:20px 10px}

/* ============================================
   DAILY RECORDS PAGE
   ============================================ */
#page-daily{padding:0;display:none;flex-direction:column;height:100%}
#page-daily.active{display:flex}
.daily-layout{display:flex;gap:16px;padding:14px 18px 0;flex:1;min-height:0}
.daily-cal-panel{width:250px;flex-shrink:0;background:var(--card);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.daily-cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.daily-cal-title{font-size:13px;font-weight:600;color:var(--green-800)}
.daily-cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:10px;font-weight:600;color:var(--text-muted);padding:3px 0}
.daily-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.daily-cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:11px;color:var(--text-secondary);cursor:pointer;transition:var(--transition)}
.daily-cal-day:hover{background:var(--green-50)}
.daily-cal-day.has-time{background:var(--green-100);font-weight:600;color:var(--green-600)}
.daily-cal-day.other-month{color:var(--slate-200);pointer-events:none}
.daily-cal-day.today{font-weight:700;color:var(--green-600);box-shadow:inset 0 0 0 2px var(--green-400)}
.daily-cal-day.selected{background:var(--green-500);color:#fff;font-weight:600}
.daily-cal-date{text-align:center;font-size:12px;color:var(--text-muted);margin-top:8px;padding-top:8px;border-top:1px solid var(--slate-50)}

.daily-modules{flex:1;display:flex;flex-direction:column;min-width:0}
.daily-modules-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.daily-modules-head h3{font-size:17px;font-weight:700;color:var(--green-800)}
.daily-modules-actions{display:flex;align-items:center;gap:8px}
.layout-toggle{display:flex;gap:2px;background:var(--slate-50);border-radius:10px;padding:2px}
.layout-btn{padding:3px 10px;border-radius:8px;font-size:11px;color:var(--text-muted);font-weight:500;transition:var(--transition)}
.layout-btn.active{background:var(--card);color:var(--green-600);font-weight:600;box-shadow:var(--shadow-sm)}
.layout-btn:hover:not(.active){color:var(--text-secondary)}
.font-select{padding:4px 8px;border:1px solid var(--border);border-radius:var(--radius-xs);font-size:11px;background:var(--card);color:var(--text);outline:none;cursor:pointer}
.font-select:focus{border-color:var(--green-400)}
.module-name-input{padding:4px 8px;border:1px solid var(--border);border-radius:var(--radius-xs);font-size:12px;background:var(--slate-50);outline:none}
.daily-modules-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1;overflow-y:auto;align-content:start}
.daily-modules-grid::-webkit-scrollbar{width:4px}
.daily-modules-grid::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:2px}
.module-card{background:var(--card);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;position:relative;border-top:3px solid var(--green-400);min-width:200px;min-height:200px;height:auto;flex-shrink:0;transition:var(--transition)}
.module-card .resize-handle{position:absolute;bottom:0;right:0;width:20px;height:20px;cursor:nw-resize;opacity:0;transition:var(--transition);display:flex;align-items:flex-end;justify-content:flex-end;padding:2px;z-index:5}
.module-card:hover .resize-handle{opacity:0.6}
.module-card .resize-handle::after{content:'';display:block;width:0;height:0;border-style:solid;border-width:0 0 12px 12px;border-color:transparent transparent var(--text-muted) transparent}
.module-card.drag-over{border:2px dashed var(--green-400);box-shadow:0 0 0 4px rgba(91,140,126,0.12)}
.module-card.dragging{opacity:0.5}
.module-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;cursor:grab}
.module-card-head:active{cursor:grabbing}
.module-card-head h4{font-size:13px;font-weight:700;color:var(--text-secondary)}
.module-card-actions{display:flex;align-items:center;gap:4px}
.module-card-drag-handle{width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-muted);cursor:grab;opacity:0;transition:var(--transition)}
.module-card:hover .module-card-drag-handle{opacity:1}
.module-card-delete{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text-muted);opacity:0;transition:var(--transition)}
.module-card:hover .module-card-delete{opacity:1}
.module-card-delete:hover{background:#FEE2E2;color:#EF4444}
.module-card textarea{flex:1;padding:8px 10px;border:1px solid var(--slate-100);border-radius:var(--radius-xs);font-size:13px;line-height:1.6;background:var(--slate-50);outline:none;resize:none;transition:var(--transition)}
.module-card textarea:focus{border-color:var(--green-400);background:#fff}
.daily-random-section{background:var(--card);margin:12px 18px 14px;border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow);flex-shrink:0}
.random-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.random-head h3{font-size:14px;font-weight:700;color:var(--green-800)}
.btn-refresh-random{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;background:var(--amber-100);color:var(--amber-600);transition:var(--transition)}
.btn-refresh-random:hover{background:#F0E4D6}
.random-content{min-height:40px;display:flex;align-items:center;justify-content:flex-start}
.random-content p.text-muted{color:var(--text-muted);font-size:13px}
.random-reflection-display{font-size:15px;line-height:1.8;color:var(--text);text-align:left;padding:8px}

/* ============================================
   SCORE PAGE
   ============================================ */
#page-score{padding:0 20px 16px}
.score-layout{display:grid;grid-template-columns:1fr 320px;gap:18px;padding-top:12px;flex:1;min-height:0}
.score-main{overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.score-main::-webkit-scrollbar{width:4px}
.score-main::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:2px}
.score-gauge-card{background:var(--card);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow);display:flex;align-items:center;gap:28px;flex-shrink:0}
.score-gauge{position:relative;width:120px;height:120px;flex-shrink:0}
.score-ring-svg{width:120px;height:120px}
.score-num-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.score-num{font-size:36px;font-weight:800;color:var(--green-600);line-height:1}
.score-total{font-size:12px;color:var(--text-muted)}
.score-cycle-info{display:flex;flex-direction:column;gap:6px}
.cycle-badge{display:inline-block;padding:4px 14px;border-radius:14px;background:var(--amber-100);color:var(--amber-600);font-weight:700;font-size:13px;align-self:flex-start}
.cycle-desc{font-size:12px;color:var(--text-muted)}
.score-detail-card{background:var(--card);border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow)}
.score-detail-card h3{font-size:14px;font-weight:700;margin-bottom:10px;color:var(--green-800)}
.score-entry{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--slate-50);font-size:12px}
.score-entry:last-child{border-bottom:none}
.score-entry-points{font-weight:700;min-width:35px}
.score-entry-points.pos{color:var(--green-600)}
.score-entry-points.neg{color:var(--rose-500)}
.score-entry-source{flex:1;color:var(--text-secondary)}
.score-entry-date{color:var(--text-muted);font-size:11px}
.score-empty{text-align:center;color:var(--text-muted);font-size:12px;padding:16px 0}
.score-history-card{background:var(--card);border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow)}
.score-history-card h3{font-size:14px;font-weight:700;margin-bottom:10px;color:var(--green-800)}
.cycle-card{padding:10px 14px;border-radius:var(--radius-sm);background:var(--slate-50);margin-bottom:8px;cursor:pointer;transition:var(--transition);display:flex;justify-content:space-between;align-items:center}
.cycle-card:hover{background:var(--green-50)}
.cycle-card-title{font-weight:600;font-size:13px}
.cycle-card-date{font-size:11px;color:var(--text-muted)}
.cycle-card-score{font-size:14px;font-weight:700;color:var(--green-600)}
.score-config{background:var(--card);border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow);overflow-y:auto}
.score-config h3{font-size:14px;font-weight:700;margin-bottom:4px;color:var(--green-800)}
.config-hint{font-size:11px;color:var(--text-muted);margin-bottom:12px}
.config-item{padding:8px 0;border-bottom:1px solid var(--slate-50);display:flex;align-items:center;gap:8px;font-size:12px}
.config-item:last-child{border-bottom:none}
.config-item-name{flex:1;font-weight:500}
.config-item input{width:50px;padding:3px 6px;border:1px solid var(--border);border-radius:var(--radius-xs);font-size:11px;text-align:center;outline:none}
.config-item input:focus{border-color:var(--green-400)}
.config-item label{font-size:10px;color:var(--text-muted)}

/* ============================================
   POMODORO PAGE — Top row + Bottom full width
   ============================================ */
#page-pomodoro{padding:8px;height:100%;overflow:hidden}
.pomo-final-layout{display:flex;flex-direction:column;gap:8px;height:100%}
.pf-top-row{display:flex;gap:8px;flex:1 1 0;min-height:0}
.pf-list{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;width:240px;flex-shrink:0}
.pf-list-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 6px;flex-shrink:0}
.pf-list-head h3{font-size:14px;font-weight:700;color:var(--green-800)}
.pf-items{flex:1;overflow-y:auto;padding:0 8px 8px}
.pf-items::-webkit-scrollbar{width:3px}
.pf-items::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:2px}
.pf-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:13px;transition:var(--transition);margin-bottom:1px}
.pf-item:hover{background:var(--slate-50)}
.pf-item.active{background:var(--green-100);font-weight:600;color:var(--green-800)}
.pf-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-item-info{font-size:10px;color:var(--text-muted);white-space:nowrap}

.pf-timer{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;flex:1}
.pf-ring{position:relative;width:200px;height:200px;margin:0 auto}
.pf-time-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pf-time{font-size:46px;font-weight:700;color:var(--green-800);letter-spacing:2px;font-variant-numeric:tabular-nums}
.pf-task-name{font-size:12px;color:var(--text-muted);margin-top:4px;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.pf-controls{display:flex;gap:8px;justify-content:center;margin-top:14px}
.pf-btn{padding:8px 20px;border-radius:16px;font-size:13px;font-weight:600;transition:var(--transition)}
.pf-btn.start{background:var(--green-500);color:#fff}
.pf-btn.start:hover{background:var(--green-600)}
.pf-btn.pause{background:var(--amber-500);color:#fff;box-shadow:0 0 12px rgba(212,148,106,0.4)}
.pf-btn.end{background:var(--rose-100);color:var(--rose-600)}
.pf-btn.end:hover{background:var(--rose-500);color:#fff}
.pf-btn.reset{background:var(--slate-100);color:var(--text-secondary)}

.pf-dashboard{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;flex:1 1 0}
.pf-dash-tabs{display:flex;gap:3px;padding:10px 12px 6px;flex-shrink:0}
.pomo-stat-tab{padding:4px 12px;border-radius:10px;font-size:11px;color:var(--text-secondary);font-weight:500;transition:var(--transition)}
.pomo-stat-tab:hover{background:var(--slate-50)}
.pomo-stat-tab.active{background:var(--green-500);color:#fff}
.pf-dash-body{flex:1;display:flex;gap:10px;padding:0 12px 10px;min-height:0}
.pf-dash-cal{width:190px;flex-shrink:0;display:flex;flex-direction:column}
.pf-cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.pf-cal-nav span{font-size:12px;font-weight:600;color:var(--green-800)}
.pf-cal-nav-btn{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text-secondary);transition:var(--transition)}
.pf-cal-nav-btn:hover{background:var(--slate-50);color:var(--green-600)}
.pf-cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:9px;font-weight:600;color:var(--text-muted);padding:2px 0}
.pf-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.pf-cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:10px;color:var(--text-secondary);cursor:pointer;transition:var(--transition)}
.pf-cal-day:hover{background:var(--slate-50)}
.pf-cal-day.other{color:var(--slate-200);pointer-events:none}
.pf-cal-day.today{font-weight:700;color:var(--green-600);box-shadow:inset 0 0 0 1.5px var(--green-400)}
.pf-cal-day.has-time{background:var(--green-100);color:var(--green-600);font-weight:600}
.pf-dash-legend{flex:1;overflow-y:auto;font-size:11px}
.pf-dash-legend::-webkit-scrollbar{width:3px}
.pf-dash-legend::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:2px}
.pf-legend-item{display:flex;align-items:center;gap:6px;padding:3px 0}
.pf-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.pf-legend-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-legend-time{font-weight:600;color:var(--text-secondary);white-space:nowrap}
.pf-legend-pct{font-size:10px;color:var(--text-muted);white-space:nowrap;min-width:42px;text-align:right}
.pf-dash-chart{position:relative;width:110px;height:110px;flex-shrink:0;align-self:center}
.pf-dash-chart svg{width:110px;height:110px}
.pf-dash-chart-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--green-600)}

/* ============================================
   MODALS
   ============================================ */
.modal-overlay{position:fixed;inset:0;background:rgba(45,62,64,0.4);z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity 0.2s ease,visibility 0.2s ease;backdrop-filter:blur(2px)}
.modal-overlay.show{opacity:1;visibility:visible}
.modal-card{background:var(--card);width:560px;max-width:92vw;max-height:85vh;border-radius:var(--radius);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;transform:translateY(20px);transition:transform 0.25s ease}
.modal-overlay.show .modal-card{transform:translateY(0)}
.modal-card.modal-sm{width:440px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;border-bottom:1px solid var(--border)}
.modal-head h2{font-size:15px;font-weight:700;color:var(--green-800)}
.modal-close{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text-secondary);transition:var(--transition)}
.modal-close:hover{background:var(--slate-50)}
.modal-body{padding:14px 18px;overflow-y:auto;flex:1}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:10px 18px 12px;border-top:1px solid var(--border)}

.form-label{display:block;font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:4px;margin-top:10px}
.form-label:first-child{margin-top:0}
.form-input{width:100%;padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13px;background:var(--slate-50);outline:none;transition:var(--transition)}
.form-input:focus{border-color:var(--green-400);background:#fff}
.form-textarea{width:100%;padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13px;background:var(--slate-50);outline:none;resize:vertical;line-height:1.6;transition:var(--transition)}
.form-textarea:focus{border-color:var(--green-400);background:#fff}
.form-select{width:100%;padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13px;background:var(--slate-50);outline:none;color:var(--text)}
.form-select:focus{border-color:var(--green-400)}

.form-row{display:flex;gap:10px;margin-top:4px}
.form-col{flex:1}
.form-col .form-label{margin-top:8px}
.form-col .form-input{text-align:center}

.form-radio-group{display:flex;gap:6px;margin-bottom:4px}
.radio-card{flex:1;padding:9px;border:2px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;text-align:center;transition:var(--transition)}
.radio-card:hover{border-color:var(--slate-200)}
.radio-card:has(input:checked){border-color:var(--green-500);background:var(--green-50)}
.radio-card.must-do:has(input:checked){border-color:var(--amber-500);background:var(--amber-50)}
.radio-card.can-do:has(input:checked){border-color:var(--green-500);background:var(--green-50)}
.radio-card.must-not:has(input:checked){border-color:var(--rose-500);background:var(--rose-50)}
.radio-card.type-task:has(input:checked){border-color:var(--blue-600);background:var(--blue-100)}
.radio-card.type-habit:has(input:checked){border-color:var(--amber-500);background:var(--amber-50)}
.radio-card input{display:none}
.radio-text{font-size:13px;font-weight:500;display:block}
.radio-hint{font-size:10px;color:var(--text-muted);display:block;margin-top:2px}

.btn-cancel{padding:6px 16px;border-radius:var(--radius-sm);font-size:12px;font-weight:500;color:var(--text-secondary);background:var(--slate-50);transition:var(--transition)}
.btn-cancel:hover{background:var(--slate-100)}
.btn-confirm{padding:6px 20px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;color:#fff;background:var(--green-500);transition:var(--transition)}
.btn-confirm:hover{background:var(--green-600)}

/* Mobile cloud buttons */
.mobile-cloud-btns{display:none}

/* ---- Font classes ---- */
.font-song{font-family:"SimSun","宋体",serif}
.font-fangsong{font-family:"FangSong","仿宋",serif}
.font-kai{font-family:"KaiTi","楷体",serif}
.font-hei{font-family:"SimHei","黑体","PingFang SC",sans-serif}
.font-system{font-family:var(--font)}

/* ---- Toast ---- */
#toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.9);background:rgba(45,62,64,0.88);color:#fff;padding:12px 26px;border-radius:20px;font-size:14px;pointer-events:none;opacity:0;transition:all 0.25s ease;z-index:200;backdrop-filter:blur(10px);letter-spacing:1px}
#toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

@media(max-width:1300px){#task-section{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
  #task-section{grid-template-columns:1fr}
  #detail-content{flex-direction:column}
  .daily-layout{flex-direction:column}
  .daily-cal-panel{width:100%}
  .score-layout{grid-template-columns:1fr}
  .pf-top-row{flex-direction:column}
  .pf-list{width:100%;max-height:40%}
  .pf-dash-body{flex-direction:column}
  .pf-dash-cal{width:100%}
}
@media(max-width:768px){
  #sidebar{display:none}
  #app{flex-direction:column}
  #main{width:100%}
  .page{padding:8px 10px 80px}
  #page-tasks{padding:0;overflow-y:auto}
  #task-section{grid-template-columns:1fr!important;padding:0 4px;gap:6px;flex:none!important;min-height:auto!important;overflow:visible!important}
  .task-column{min-height:120px;overflow:visible!important;max-height:none!important}
  #detail-section{padding:6px 4px;flex:none}
  #detail-content{flex-direction:column}
  .column-list{overflow-y:visible!important;flex:auto!important}
  .tasks-topbar{padding:8px 6px 4px;flex-direction:row;gap:4px;align-items:center}
  .tasks-topbar-left h2{font-size:16px}
  .tasks-topbar-actions{gap:4px}
  .btn-action{font-size:10px;padding:5px 10px}
  .btn-action span{font-size:12px}
  .column-head h3{font-size:12px}
  .column-item{font-size:13px;padding:8px}
  .column-desc{font-size:11px}
  /* Bottom nav */
  #sidebar{position:fixed;bottom:0;left:0;right:0;width:100%;height:48px;flex-direction:row;z-index:100;background:var(--card);border-top:1px solid var(--border);border-right:none;padding:0;display:flex!important}
  .sb-brand,.sb-font-row,.sb-footer{display:none}
  .sb-nav{flex-direction:row;padding:0;width:100%}
  .sb-item{flex:1;justify-content:center;padding:4px 2px;font-size:10px;gap:2px;border-radius:0}
  .sb-item .sb-icon{font-size:15px;width:auto}
  .sb-item span:last-child{font-size:9px}
  /* Cloud buttons floating */
  .mobile-cloud-btns{display:flex!important;position:fixed;bottom:50px;right:8px;z-index:101;gap:4px}
  .mobile-cloud-btns button{font-size:10px;padding:5px 10px;border-radius:12px;background:var(--card);color:var(--green-600);border:1px solid var(--green-400);font-weight:600;box-shadow:var(--shadow)}
  /* Pomodoro mobile */
  #page-pomodoro{overflow-y:auto;padding:8px 6px 80px}
  .pomo-final-layout{flex-direction:column;gap:10px;height:auto}
  .pf-top-row{flex-direction:column;gap:10px;flex:none}
  .pf-list{width:100%;max-height:200px;flex:none}
  .pf-timer{flex:none;min-height:240px;padding:16px}
  .pf-ring{width:150px;height:150px}
  .pf-time{font-size:34px}
  .pf-dashboard{flex:none;min-height:auto}
  .pf-dash-body{flex-direction:column;gap:10px}
  .pf-dash-cal{width:100%}
  .pf-dash-legend{max-height:none}
  .pf-dash-chart{width:100px;height:100px;margin:0 auto}
  .pf-dash-chart svg{width:100px;height:100px}
  /* Daily mobile */
  #page-daily{padding:0}
  .daily-layout{padding:6px;gap:8px}
  .daily-cal-panel{width:100%}
  .daily-modules-grid{grid-template-columns:1fr!important}
  /* Score mobile */
  #page-score{padding:0 6px 80px}
  .score-layout{grid-template-columns:1fr;gap:10px}
  .score-gauge-card{flex-direction:column;text-align:center;padding:16px}
  .score-config{height:auto;position:static;padding:12px}
  .score-detail-card,.score-history-card{padding:12px}
  .cycle-card{flex-direction:column;align-items:flex-start;gap:4px}
  /* Habit mobile */
  #page-habits{padding:0 6px}
  .habits-layout{grid-template-columns:1fr}
  /* General spacing fixes */
  .page-head{padding:12px 12px 0;flex-wrap:wrap;gap:8px}
  .page-head h2{font-size:18px}
}