/* ===================== 主题变量 ===================== */
:root, html[data-theme="light"]{
  --bg:#F2F5F9; --surface:#FFFFFF; --surface-2:#F6F8FB; --surface-3:#EDF1F7;
  --border:#E3E9F1; --border-strong:#CBD6E4;
  --text:#17233B; --text-2:#5A6B85; --text-3:#92A1B8;
  --accent:#2563EB; --accent-hover:#1D55D6; --accent-weak:#EAF1FE; --accent-text:#2563EB;
  --success:#0D9488; --success-weak:#E5F5F3;
  --warn:#D97706; --warn-weak:#FBF1DF;
  --danger:#DC2626; --danger-weak:#FCEBEB;
  --info:#7C3AED; --info-weak:#F3EDFC;
  --sidebar:#0F1A2E; --sidebar-text:#AEBAD0; --sidebar-text-strong:#E8EEF8; --sidebar-active:rgba(255,255,255,.12);
  --shadow:0 1px 2px rgba(16,26,46,.05), 0 1px 10px rgba(16,26,46,.04);
  --shadow-lg:0 8px 30px rgba(16,26,46,.12);
  --radius:10px; --radius-sm:7px;
}
html[data-theme="dark"]{
  --bg:#0C1322; --surface:#121D33; --surface-2:#16233C; --surface-3:#1B2A48;
  --border:#1F2E4A; --border-strong:#2C3D5E;
  --text:#E6EDF8; --text-2:#9AABC8; --text-3:#5F7196;
  --accent:#4C8DFF; --accent-hover:#66A0FF; --accent-weak:rgba(76,141,255,.14); --accent-text:#6FA3FF;
  --success:#2BB3A6; --success-weak:rgba(43,179,166,.13);
  --warn:#E8A23D; --warn-weak:rgba(232,162,61,.13);
  --danger:#EF5350; --danger-weak:rgba(239,83,80,.13);
  --info:#A78BFA; --info-weak:rgba(167,139,250,.13);
  --sidebar:#0A111F; --sidebar-text:#8B9BB8; --sidebar-text-strong:#E6EDF8; --sidebar-active:rgba(255,255,255,.1);
  --shadow:0 1px 2px rgba(0,0,0,.2), 0 1px 10px rgba(0,0,0,.18);
  --shadow-lg:0 8px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
input,select,textarea,button{font:inherit; color:inherit;}
a{color:var(--accent-text); text-decoration:none;}
.num{font-variant-numeric:tabular-nums;}
button{cursor:pointer; background:none; border:none;}

/* ===================== 布局 ===================== */
.app{display:flex; min-height:100vh;}
.main{flex:1; min-width:0; margin-left:232px; display:flex; flex-direction:column; min-height:100vh;}
.content{flex:1; padding:22px 26px 60px; max-width:1500px; width:100%; margin:0 auto;}
section[data-view]{display:none;}
section[data-view].active{display:block; animation:viewIn .18s ease;}
@keyframes viewIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* ===================== 侧边栏 ===================== */
.sidebar{
  position:fixed; left:0; top:0; bottom:0; width:232px; z-index:60;
  background:var(--sidebar); color:var(--sidebar-text);
  display:flex; flex-direction:column; padding:18px 14px;
}
.brand{display:flex; align-items:center; gap:10px; padding:4px 8px 18px; color:var(--sidebar-text-strong);}
.brand .logo{width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,#2563EB,#0D9488); display:flex; align-items:center; justify-content:center; flex:none;}
.brand .logo svg{width:20px; height:20px; stroke:#fff;}
.brand-name{font-size:15px; font-weight:600; line-height:1.2;}
.brand-sub{font-size:11px; color:var(--sidebar-text); opacity:.8; font-weight:400;}
.nav{display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto;}
.nav-group{font-size:11px; letter-spacing:.06em; padding:14px 10px 6px; opacity:.55;}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:8px;
  color:var(--sidebar-text); font-size:13.5px; cursor:pointer; border:1px solid transparent;
  transition:background .15s, color .15s;
}
.nav-item svg{width:18px; height:18px; flex:none; opacity:.9;}
.nav-item:hover{background:rgba(255,255,255,.06); color:var(--sidebar-text-strong);}
.nav-item.active{background:var(--sidebar-active); color:var(--sidebar-text-strong); font-weight:500;}
.nav-item .n-badge{margin-left:auto; font-size:11px; background:var(--accent); color:#fff; border-radius:9px; padding:0 7px; line-height:17px; min-width:18px; text-align:center;}
.side-foot{padding:12px 8px 2px; border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:10px;}
.avatar{width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#0D9488,#2563EB); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; flex:none;}
.side-foot .u-name{font-size:13px; color:var(--sidebar-text-strong); line-height:1.2;}
.side-foot .u-sub{font-size:11px; opacity:.7;}

/* ===================== 顶部栏 ===================== */
.topbar{
  position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:14px; padding:12px 26px;
}
.tb-title{font-size:16.5px; font-weight:600; white-space:nowrap;}
.tb-date{font-size:12.5px; color:var(--text-2); white-space:nowrap;}
.search-wrap{position:relative; flex:1; max-width:420px; margin-left:auto;}
.search-box{
  display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:20px; padding:7px 14px;
}
.search-box:focus-within{border-color:var(--accent); background:var(--surface);}
.search-box svg{width:15px; height:15px; stroke:var(--text-3); flex:none;}
.search-box input{border:none; outline:none; background:transparent; width:100%; font-size:13px;}
.search-panel{
  position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--surface); border:1px solid var(--border);
  border-radius:10px; box-shadow:var(--shadow-lg); padding:6px; display:none; max-height:320px; overflow-y:auto;
}
.search-panel.open{display:block;}
.sp-item{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:7px; cursor:pointer; font-size:13px;}
.sp-item:hover{background:var(--surface-2);}
.sp-item .sp-k{font-size:10.5px; color:var(--text-3); border:1px solid var(--border); border-radius:4px; padding:1px 5px; flex:none;}
.sp-item .sp-t{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sp-empty{padding:14px; text-align:center; color:var(--text-3); font-size:12.5px;}
.tb-actions{display:flex; align-items:center; gap:6px;}
.icon-btn{
  width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  color:var(--text-2); border:1px solid transparent; position:relative;
}
.icon-btn:hover{background:var(--surface-2); color:var(--text);}
.icon-btn svg{width:18px; height:18px;}
.icon-btn .dot{position:absolute; top:6px; right:7px; width:8px; height:8px; border-radius:50%; background:var(--danger); border:2px solid var(--bg);}

/* ===================== 通用组件 ===================== */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px; margin-bottom:18px;
}
.card-h{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px;}
.card-h h3{font-size:14.5px; font-weight:600;}
.card-h .h-sub{font-size:12px; color:var(--text-3); font-weight:400;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:7px 14px; border-radius:8px; font-size:13px; font-weight:500; border:1px solid transparent;
  transition:background .15s, border-color .15s, color .15s; white-space:nowrap;
}
.btn svg{width:15px; height:15px;}
.btn-pri{background:var(--accent); color:#fff;}
.btn-pri:hover{background:var(--accent-hover);}
.btn-sec{background:var(--surface); border-color:var(--border-strong); color:var(--text);}
.btn-sec:hover{border-color:var(--accent); color:var(--accent-text);}
.btn-ghost{background:transparent; color:var(--text-2);}
.btn-ghost:hover{background:var(--surface-2); color:var(--text);}
.btn-danger{background:var(--danger-weak); color:var(--danger);}
.btn-danger:hover{background:var(--danger); color:#fff;}
.btn-ok{background:var(--success-weak); color:var(--success);}
.btn-ok:hover{background:var(--success); color:#fff;}
.btn-sm{padding:4px 10px; font-size:12px; border-radius:6px;}
.btn-lg{padding:9px 18px; font-size:14px;}
.btn:focus-visible, .icon-btn:focus-visible, .nav-item:focus-visible, .f-item:focus-visible, .note-card:focus-visible, .app-tile:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.badge{display:inline-flex; align-items:center; font-size:11px; border-radius:5px; padding:1px 8px; font-weight:500; white-space:nowrap;}
.tag{border-radius:5px; padding:1px 8px; font-size:11px; font-weight:500; white-space:nowrap;}
.tabs{display:flex; gap:2px; background:var(--surface-2); border-radius:8px; padding:3px; width:fit-content;}
.tab{padding:5px 14px; border-radius:6px; font-size:12.5px; color:var(--text-2); cursor:pointer;}
.tab.active{background:var(--surface); color:var(--text); font-weight:500; box-shadow:var(--shadow);}
.tab .cnt{margin-left:4px; font-size:11px; color:var(--text-3);}
.field{margin-bottom:12px;}
.field label{display:block; font-size:12px; color:var(--text-2); margin-bottom:5px; font-weight:500;}
.input, .field input, .field select, .field textarea{
  width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:8px;
  padding:8px 11px; font-size:13px; outline:none; transition:border-color .15s;
}
.input:focus, .field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent); background:var(--surface);}
.field textarea{resize:vertical; min-height:64px;}
.empty{text-align:center; color:var(--text-3); font-size:13px; padding:30px 10px;}
.empty .e-ico{width:42px; height:42px; margin:0 auto 10px; opacity:.5;}
.empty .e-ico svg{width:42px; height:42px; stroke:var(--text-3);}
.divider{height:1px; background:var(--border); margin:12px 0;}

/* ===================== 仪表盘 ===================== */
.hero{
  background:linear-gradient(120deg, #16284A 0%, #1D3A6B 55%, #17605A 100%);
  border-radius:var(--radius); padding:22px 24px; color:#fff; margin-bottom:18px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
html[data-theme="dark"] .hero{background:linear-gradient(120deg,#0E1C3A,#16335F,#125047);}
.hero h2{font-size:21px; font-weight:600; letter-spacing:.01em;}
.hero .h-date{font-size:13px; opacity:.75; margin-top:2px;}
.hero .h-tip{font-size:12.5px; opacity:.8; margin-top:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.hero .h-tip b{color:#fff; font-weight:600;}
.focus-box{min-width:260px; flex:1; max-width:460px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:14px 16px; backdrop-filter:blur(4px);}
.focus-top{display:flex; align-items:center; justify-content:space-between; font-size:12.5px; opacity:.85; margin-bottom:8px;}
.focus-top b{color:#fff; font-weight:600; font-size:13.5px;}
.progress{height:8px; border-radius:4px; background:rgba(255,255,255,.22); overflow:hidden;}
.progress i{display:block; height:100%; width:0; background:linear-gradient(90deg,#4C8DFF,#2BB3A6); border-radius:4px; transition:width .4s ease;}
.focus-note{font-size:11.5px; opacity:.75; margin-top:8px;}
.kpi-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:18px;}
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 15px; display:flex; flex-direction:column; gap:6px; position:relative; overflow:hidden;}
.kpi .k-label{font-size:12px; color:var(--text-2); display:flex; align-items:center; gap:6px;}
.kpi .k-label svg{width:14px; height:14px;}
.kpi .k-num{font-size:26px; font-weight:700; letter-spacing:-.02em;}
.kpi .k-num small{font-size:13px; font-weight:500; color:var(--text-2); margin-left:3px;}
.kpi .k-sub{font-size:11px; color:var(--text-3);}
.kpi.accent .k-num{color:var(--accent-text);} .kpi.success .k-num{color:var(--success);} .kpi.warn .k-num{color:var(--warn);} .kpi.danger .k-num{color:var(--danger);} .kpi.info .k-num{color:var(--info);}
.charts-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
.chart{height:230px;}
.dash-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:14px; margin-top:18px;}
.mini-list{display:flex; flex-direction:column;}
.ml-item{display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid var(--border); font-size:13px;}
.ml-item:last-child{border-bottom:none;}
.ml-item .t{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ml-item .tm{font-size:11.5px; color:var(--text-3); white-space:nowrap;}
.ml-item .dot{width:8px; height:8px; border-radius:50%; flex:none;}
.quick-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.q-item{display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 4px; border-radius:9px; cursor:pointer; font-size:11.5px; color:var(--text-2);}
.q-item:hover{background:var(--surface-2); color:var(--text);}
.q-item .qi{width:36px; height:36px; border-radius:9px; background:var(--accent-weak); display:flex; align-items:center; justify-content:center;}
.q-item .qi svg{width:18px; height:18px; stroke:var(--accent-text);}
.q-item:nth-child(2) .qi{background:var(--success-weak);} .q-item:nth-child(2) .qi svg{stroke:var(--success);}
.q-item:nth-child(3) .qi{background:var(--warn-weak);} .q-item:nth-child(3) .qi svg{stroke:var(--warn);}
.q-item:nth-child(4) .qi{background:var(--info-weak);} .q-item:nth-child(4) .qi svg{stroke:var(--info);}
.q-item:nth-child(5) .qi{background:var(--danger-weak);} .q-item:nth-child(5) .qi svg{stroke:var(--danger);}
.q-item:nth-child(6) .qi{background:var(--success-weak);} .q-item:nth-child(6) .qi svg{stroke:var(--success);}
.q-item:nth-child(7) .qi{background:var(--warn-weak);} .q-item:nth-child(7) .qi svg{stroke:var(--warn);}
.q-item:nth-child(8) .qi{background:var(--accent-weak);} .q-item:nth-child(8) .qi svg{stroke:var(--accent-text);}

/* ===================== 待办 ===================== */
.todo-form{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px;}
.todo-form .f-main{flex:1; min-width:220px;}
.todo-form .f-min{width:120px;}
.todo-list{display:flex; flex-direction:column;}
.todo-item{display:flex; align-items:center; gap:11px; padding:11px 4px; border-bottom:1px solid var(--border);}
.todo-item:last-child{border-bottom:none;}
.todo-item.done .t-title{text-decoration:line-through; color:var(--text-3);}
.check{width:20px; height:20px; border-radius:6px; border:1.6px solid var(--border-strong); flex:none; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .15s; background:var(--surface);}
.check svg{width:12px; height:12px; stroke:#fff; opacity:0;}
.todo-item.done .check{background:var(--success); border-color:var(--success);}
.todo-item.done .check svg{opacity:1;}
.t-title{flex:1; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.t-meta{display:flex; align-items:center; gap:7px; flex:none; flex-wrap:wrap;}
.pri{width:8px; height:8px; border-radius:50%; flex:none;}
.pri.high{background:var(--danger);} .pri.mid{background:var(--warn);} .pri.low{background:var(--success);}
.t-date{font-size:11.5px; color:var(--text-3); white-space:nowrap;}
.t-del{color:var(--text-3); padding:4px; border-radius:6px; display:flex;}
.t-del:hover{color:var(--danger); background:var(--danger-weak);}
.t-del svg{width:15px; height:15px;}
.todo-foot{display:flex; align-items:center; gap:12px; padding-top:12px; font-size:12.5px; color:var(--text-3);}

/* ===================== 日程 ===================== */
.week-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-bottom:18px;}
.w-day{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:10px; min-height:118px; display:flex; flex-direction:column; gap:6px;}
.w-day.today{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset;}
.w-day .wd-h{display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--text-2);}
.w-day.today .wd-h{color:var(--accent-text); font-weight:600;}
.wd-list{display:flex; flex-direction:column; gap:4px; overflow-y:auto; flex:1;}
.wd-it{font-size:11.5px; border-radius:5px; padding:2px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; color:#fff;}
.wd-it.meeting{background:var(--accent);} .wd-it.todo{background:var(--warn);} .wd-it.personal{background:var(--success);} .wd-it.other{background:var(--info);}
.sched-item{display:flex; gap:12px; padding:10px 2px; border-bottom:1px solid var(--border); align-items:flex-start;}
.sched-item:last-child{border-bottom:none;}
.sched-item .s-date{width:52px; flex:none; text-align:center; background:var(--surface-2); border-radius:8px; padding:6px 2px;}
.sched-item .s-date .d{font-size:17px; font-weight:700; line-height:1.1;}
.sched-item .s-date .m{font-size:10.5px; color:var(--text-2);}
.sched-item .s-body{flex:1;}
.sched-item .s-title{font-size:13.5px; font-weight:500;}
.sched-item .s-meta{font-size:11.5px; color:var(--text-3); margin-top:2px; display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.s-del{color:var(--text-3); padding:4px; border-radius:6px; display:flex; flex:none;}
.s-del:hover{color:var(--danger); background:var(--danger-weak);}
.s-del svg{width:15px; height:15px;}

/* ===================== 便签 ===================== */
.notes-toolbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:10px;}
.color-dots{display:flex; gap:6px; align-items:center;}
.c-dot{width:18px; height:18px; border-radius:50%; cursor:pointer; border:2px solid transparent;}
.c-dot.active{border-color:var(--text);}
.notes-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.note-card{
  border-radius:var(--radius); padding:14px; min-height:130px; display:flex; flex-direction:column; gap:8px;
  border:1px solid transparent; box-shadow:var(--shadow); cursor:pointer; position:relative;
  transition:transform .15s, box-shadow .15s;
}
.note-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.note-card .n-time{font-size:10.5px; opacity:.6;}
.note-card .n-text{font-size:13px; white-space:pre-wrap; word-break:break-word; flex:1; overflow:hidden;}
.note-card .n-del{position:absolute; top:8px; right:8px; opacity:0; transition:opacity .15s; color:inherit; padding:3px; border-radius:5px; display:flex;}
.note-card:hover .n-del{opacity:.7;}
.note-card .n-del:hover{opacity:1; background:rgba(0,0,0,.12);}
.note-card .n-del svg{width:14px; height:14px;}
.note-editor{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin-bottom:14px;}
.note-editor textarea{min-height:90px;}
.n-color-yellow{background:#FDF4D6;} .n-color-blue{background:#E3EEFD;} .n-color-green{background:#E0F4EE;} .n-color-pink{background:#FDE7EA;} .n-color-purple{background:#EFE9FB;} .n-color-gray{background:#EEF1F5;}
html[data-theme="dark"] .n-color-yellow{background:#33290F;} html[data-theme="dark"] .n-color-blue{background:#13243E;} html[data-theme="dark"] .n-color-green{background:#0E2B27;} html[data-theme="dark"] .n-color-pink{background:#33161B;} html[data-theme="dark"] .n-color-purple{background:#231A3A;} html[data-theme="dark"] .n-color-gray{background:#1C2534;}

/* ===================== 专注 ===================== */
.focus-layout{display:grid; grid-template-columns:1.1fr 1fr; gap:14px;}
.timer-wrap{display:flex; flex-direction:column; align-items:center; padding:10px 0 4px;}
.timer-ring{position:relative; width:216px; height:216px;}
.timer-ring svg{width:216px; height:216px; transform:rotate(-90deg);}
.timer-ring .tr-bg{fill:none; stroke:var(--surface-3); stroke-width:10;}
.timer-ring .tr-fg{fill:none; stroke:var(--accent); stroke-width:10; stroke-linecap:round; stroke-dasharray:628; stroke-dashoffset:0; transition:stroke-dashoffset .3s linear, stroke .3s;}
.timer-ring.work .tr-fg{stroke:var(--accent);} .timer-ring.break .tr-fg{stroke:var(--success);}
.timer-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;}
.timer-center .tt{font-size:42px; font-weight:700; letter-spacing:.01em; font-variant-numeric:tabular-nums;}
.timer-center .ts{font-size:12.5px; color:var(--text-2);}
.timer-mode{display:inline-flex; gap:2px; background:var(--surface-2); border-radius:8px; padding:3px; margin-bottom:16px;}
.timer-mode .tm-tab{padding:5px 14px; border-radius:6px; font-size:12.5px; color:var(--text-2); cursor:pointer;}
.timer-mode .tm-tab.active{background:var(--surface); font-weight:500; color:var(--text); box-shadow:var(--shadow);}
.timer-ctrls{display:flex; gap:10px; margin-top:18px;}
.focus-stats{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; width:100%; max-width:340px;}
.fs-item{background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:10px 12px; text-align:center;}
.fs-item .n{font-size:20px; font-weight:700;}
.fs-item .l{font-size:11.5px; color:var(--text-3);}
.today-log{display:flex; flex-direction:column; gap:8px;}
.log-item{display:flex; align-items:center; gap:10px; font-size:13px; padding:8px 10px; background:var(--surface-2); border-radius:8px;}
.log-item .lg{width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none;}
.log-item.break .lg{background:var(--success);}
.log-item .lt{flex:1;}
.log-item .lm{color:var(--text-3); font-size:12px;}

/* ===================== 应用中心 ===================== */
.apps-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:12px;}
.app-tile{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px 10px; display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer;
  transition:transform .15s, box-shadow .15s; position:relative;
}
.app-tile:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.app-tile .a-ico{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;}
.app-tile .a-ico svg{width:22px; height:22px; stroke:#fff;}
.app-tile .a-name{font-size:12.5px; font-weight:500;}
.app-tile .a-desc{font-size:10.5px; color:var(--text-3); text-align:center; line-height:1.4;}
.app-tile .a-badge{position:absolute; top:10px; right:12px;}
.a-c1{background:#2563EB;} .a-c2{background:#0D9488;} .a-c3{background:#D97706;} .a-c4{background:#DC2626;} .a-c5{background:#7C3AED;} .a-c6{background:#0891B2;} .a-c7{background:#4F46E5;} .a-c8{background:#CA8A04;} .a-c9{background:#0E7490;} .a-c10{background:#9333EA;} .a-c11{background:#16A34A;} .a-c12{background:#64748B;}

/* ===================== 审批 ===================== */
.appr-item{display:flex; align-items:center; gap:14px; padding:14px 4px; border-bottom:1px solid var(--border); flex-wrap:wrap;}
.appr-item:last-child{border-bottom:none;}
.appr-item .a-ava{width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color:#fff; flex:none;}
.appr-item .a-body{flex:1; min-width:200px;}
.appr-item .a-title{font-size:13.5px; font-weight:500;}
.appr-item .a-meta{font-size:11.5px; color:var(--text-3); margin-top:2px; display:flex; gap:8px; flex-wrap:wrap;}
.appr-item .a-acts{display:flex; gap:8px; flex:none;}
.status-pill{font-size:11px; border-radius:5px; padding:1px 8px; font-weight:500;}
.st-pending{background:var(--warn-weak); color:var(--warn);} .st-ok{background:var(--success-weak); color:var(--success);} .st-no{background:var(--danger-weak); color:var(--danger);}
.appr-form{background:var(--surface-2); border:1px dashed var(--border-strong); border-radius:var(--radius); padding:16px; margin-bottom:14px;}

/* ===================== 公告 ===================== */
.ann-item{display:flex; gap:14px; padding:14px 2px; border-bottom:1px solid var(--border);}
.ann-item:last-child{border-bottom:none;}
.ann-item .ann-ico{width:38px; height:38px; border-radius:10px; background:var(--warn-weak); display:flex; align-items:center; justify-content:center; flex:none;}
.ann-item .ann-ico svg{width:19px; height:19px; stroke:var(--warn);}
.ann-item .ann-body{flex:1;}
.ann-item .ann-title{font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.ann-item .ann-content{font-size:13px; color:var(--text-2); margin-top:4px; white-space:pre-wrap;}
.ann-item .ann-meta{font-size:11.5px; color:var(--text-3); margin-top:6px; display:flex; gap:12px;}
.ann-form{background:var(--surface-2); border:1px dashed var(--border-strong); border-radius:var(--radius); padding:16px; margin-bottom:14px; display:none;}
.ann-form.open{display:block;}

/* ===================== 考勤 ===================== */
.att-top{display:flex; gap:14px; flex-wrap:wrap; align-items:stretch;}
.att-card{flex:1; min-width:280px;}
.att-clock{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.att-now{font-size:30px; font-weight:700; letter-spacing:.01em;}
.att-status{margin-top:4px; font-size:12.5px; color:var(--text-2);}
.att-btns{display:flex; gap:10px; flex:1; justify-content:flex-end; flex-wrap:wrap;}
.att-rec{display:flex; gap:16px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); flex-wrap:wrap;}
.att-rec .r{font-size:12.5px; color:var(--text-2);}
.att-rec .r b{color:var(--text); font-weight:600; font-size:14px;}
.att-cal{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
.att-cal .ac-h{text-align:center; font-size:11px; color:var(--text-3); padding:4px 0;}
.att-day{aspect-ratio:1; border-radius:8px; background:var(--surface-2); border:1px solid var(--border); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:12px; position:relative;}
.att-day .st{font-size:9px; font-weight:600; line-height:1;}
.att-day.on{background:var(--success-weak); border-color:var(--success);} .att-day.on .st{color:var(--success);}
.att-day.late{background:var(--warn-weak); border-color:var(--warn);} .att-day.late .st{color:var(--warn);}
.att-day.miss{background:var(--danger-weak); border-color:var(--danger);} .att-day.miss .st{color:var(--danger);}
.att-day.off{background:var(--surface-3); color:var(--text-3);}
.att-day.today-flag{outline:2px solid var(--accent);}
.att-stats{display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
.as-item{background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:12px; text-align:center;}
.as-item .n{font-size:22px; font-weight:700;}
.as-item .l{font-size:11.5px; color:var(--text-3); margin-top:2px;}

/* ===================== 门店数据 ===================== */
.store-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.store-chips{display:flex; gap:8px; flex-wrap:wrap;}
.store-chip{padding:7px 15px; border-radius:20px; border:1px solid var(--border-strong); background:var(--surface); cursor:pointer; font-size:13px; color:var(--text-2); display:flex; align-items:center; gap:7px; transition:all .15s;}
.store-chip:hover{border-color:var(--accent); color:var(--accent-text);}
.store-chip.active{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:500;}
.store-chip .sc-dot{width:8px; height:8px; border-radius:50%; background:var(--success); flex:none;}
.store-chip.active .sc-dot{background:#fff;}
.chip-wrap{display:inline-flex; align-items:center;}
.chip-x{margin-left:4px; width:18px; height:18px; border:0; border-radius:50%; background:var(--surface); color:var(--text-3); cursor:pointer; font-size:13px; line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:all .15s;}
.chip-x:hover{background:var(--danger); color:#fff;}
.store-add{display:flex; gap:8px; align-items:center; margin-left:auto;}
.store-info{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--text-2); padding:10px 2px 0; border-top:1px solid var(--border);}
.store-info .si b{color:var(--text); font-weight:600;}
.sales-form{display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1.1fr auto; gap:12px; align-items:end; background:var(--surface-2); border:1px dashed var(--border-strong); border-radius:var(--radius); padding:16px;}
.sales-form .field{margin-bottom:0;}
.sales-table{overflow-x:auto;}
.sales-row{display:grid; grid-template-columns:1.3fr 0.9fr 1.1fr 0.8fr 0.8fr 0.9fr 0.9fr auto; gap:8px; align-items:center; padding:10px 6px; border-bottom:1px solid var(--border); font-size:13px; min-width:680px;}
.sales-row:last-child{border-bottom:none;}
.sales-head{font-size:11.5px; color:var(--text-3); border-bottom:1px solid var(--border-strong); font-weight:500;}
.sales-row .num{font-variant-numeric:tabular-nums;}
.sales-row .up{color:var(--success);} .sales-row .down{color:var(--danger);} .sales-row .flat{color:var(--text-3);}
.sale-del{color:var(--text-3); padding:4px; border-radius:6px; display:flex;}
.sale-del:hover{color:var(--danger); background:var(--danger-weak);}
.sale-del svg{width:15px; height:15px;}

.store-conn{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;flex-wrap:wrap;}
.store-conn.loading{color:var(--text-3);}
.store-conn.ok{color:var(--success);}
.store-conn.err{color:var(--danger);}
.store-conn .btn{margin-left:4px;}
.member-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
.mg-item{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:12px;text-align:center;}
.mg-item .mg-v{font-size:19px;font-weight:700;}
.mg-item .mg-l{font-size:11.5px;color:var(--text-3);margin-top:3px;}
.fuiou-brief{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 16px;margin-bottom:18px;font-size:12.5px;color:var(--text-2);}
.fuiou-brief .fb-t{font-weight:600;color:var(--text);}
.fuiou-brief .fb-item b{font-size:16px;font-weight:700;color:var(--accent-text);margin-right:4px;}

/* ===================== Toast ===================== */
#toast-wrap{position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:10003; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;}
.toast{
  background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:9px; box-shadow:var(--shadow-lg);
  padding:9px 16px; font-size:13px; display:flex; align-items:center; gap:8px;
  animation:toastIn .2s ease; max-width:80vw;
}
.toast.ok{border-color:var(--success);} .toast.ok .t-ico{color:var(--success);}
.toast.err{border-color:var(--danger);} .toast.err .t-ico{color:var(--danger);}
.toast .t-ico{display:flex;}
.toast .t-ico svg{width:15px; height:15px;}
@keyframes toastIn{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;}}
.toast.out{opacity:0; transform:translateY(-8px); transition:all .25s;}

/* ===================== 响应式 ===================== */
@media (max-width:1280px){
  .kpi-grid{grid-template-columns:repeat(4,1fr);}
  .charts-row{grid-template-columns:1fr 1fr;}
  .charts-row .card:last-child{grid-column:1/-1;}
  .dash-grid{grid-template-columns:1fr 1fr;}
  .dash-grid .card:last-child{grid-column:1/-1;}
  .apps-grid{grid-template-columns:repeat(5,1fr);}
  .notes-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:1024px){
  .sidebar{width:76px; padding:16px 10px;}
  .main{margin-left:76px;}
  .brand-name, .brand-sub, .nav-item .n-label, .nav-group, .side-foot .u-name, .side-foot .u-sub{display:none;}
  .nav-item{justify-content:center; padding:10px;}
  .nav-item .n-badge{display:none;}
  .side-foot{justify-content:center; padding:12px 0 2px;}
  .content{padding:18px 18px 60px;}
  .topbar{padding:12px 18px;}
  .focus-layout{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .charts-row{grid-template-columns:1fr;}
  .charts-row .card:last-child{grid-column:auto;}
  .dash-grid{grid-template-columns:1fr;}
  .dash-grid .card:last-child{grid-column:auto;}
  .apps-grid{grid-template-columns:repeat(3,1fr);}
  .notes-grid{grid-template-columns:repeat(2,1fr);}
  .week-grid{grid-template-columns:repeat(7,64px); overflow-x:auto;}
  .att-btns{justify-content:flex-start;}
  .att-stats{grid-template-columns:repeat(3,1fr);}
  .sales-form{grid-template-columns:1fr 1fr;}
  .sales-form .btn{grid-column:1/-1; justify-self:end;}
  .store-add{margin-left:0; width:100%;}
  .member-grid{grid-template-columns:repeat(3,1fr);}
  .tb-date{display:none;}
  .focus-box{max-width:none;}
}
@media (max-width:560px){
  body{font-size:15px;}
  .input, .field input, .field select, .field textarea{font-size:16px;}
  .sidebar{
    top:auto; bottom:0; width:100%; height:auto; flex-direction:row; align-items:center;
    padding:6px 8px; border-top:1px solid var(--border-strong); overflow-x:auto;
  }
  .brand, .side-foot{display:none;}
  .nav{flex-direction:row; gap:2px; padding:0;}
  .nav-group{display:none;}
  .nav-item{flex-direction:column; gap:3px; padding:8px 10px; min-height:44px; font-size:10px; min-width:56px;}
  .nav-item svg{width:19px; height:19px;}
  .nav-item .n-badge{position:absolute; margin:0; top:2px; right:4px;}
  .main{margin-left:0; padding-bottom:64px;}
  .topbar{padding:10px 12px; gap:8px;}
  .content{padding:14px 12px 20px;}
  .search-wrap{max-width:none;}
  .tb-title{font-size:15px;}
  .hero{padding:18px 16px;}
  .hero h2{font-size:18px;}
  .apps-grid{grid-template-columns:repeat(4,1fr);}
  .notes-grid{grid-template-columns:1fr;}
  .appr-item .a-acts{width:100%; justify-content:flex-end;}
}