/* ============================================================
 * 补充样式 v3.0 - 所有组件类
 * ============================================================ */

/* ===== Layout ===== */
.section{background:var(--bg2);border-radius:var(--radius);margin:0 14px 14px;overflow:hidden;box-shadow:var(--shadow)}
.section-head{display:flex;justify-content:space-between;align-items:center;padding:14px 14px 8px}
.section-head h3{font-size:15px;font-weight:600;margin:0}
.section-head .more{font-size:12px;color:var(--primary)}
.page-toolbar{display:flex;gap:8px;align-items:center;padding:10px 14px;background:var(--bg2);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--border2)}
.list-toolbar{display:flex;gap:8px;align-items:center;padding:10px 14px;background:var(--bg2);border-bottom:1px solid var(--border2)}

/* ===== Search Box ===== */
.search-box{flex:1;display:flex;align-items:center;gap:6px;background:var(--bg3);border-radius:var(--radius-sm);padding:8px 12px}
.search-box input{flex:1;border:none;background:transparent;outline:none;color:var(--fg);font-size:13px}
.sb-ico{font-size:14px;color:var(--muted)}

/* ===== FAB ===== */
.fab{position:fixed;right:16px;bottom:calc(64px + var(--safe-b));width:52px;height:52px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 4px 16px rgba(45,108,223,.4);z-index:50;cursor:pointer;border:none}
.fab:active{transform:scale(.92)}

/* ===== Chips ===== */
.chip-row{display:flex;gap:6px;overflow-x:auto;padding:8px 14px;scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;padding:5px 12px;border-radius:14px;background:var(--bg3);color:var(--fg2);font-size:12px;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:all .15s}
.chip.active{background:var(--primary-bg);color:var(--primary);border-color:var(--primary)}

/* ===== Empty States ===== */
.empty-block{text-align:center;padding:40px 20px;color:var(--muted)}
.empty-block .empty-icon{font-size:40px;margin-bottom:10px;opacity:.5}
.empty-hero{text-align:center;padding:60px 20px 40px;color:var(--muted)}
.empty-hero .empty-icon{font-size:56px;margin-bottom:14px;opacity:.4}
.empty-mini{text-align:center;padding:30px 14px;color:var(--muted2);font-size:12px}

/* ===== Home: Hero ===== */
.hero-bg{background:linear-gradient(135deg,var(--primary),#1F5BC4);border-radius:0 0 24px 24px;padding:calc(var(--safe-t) + 16px) 16px 20px;color:#fff;position:relative;overflow:hidden}
.hero-content{position:relative;z-index:1}
.hero-greet{font-size:13px;opacity:.85;margin-bottom:4px}
.hero-content h2{font-size:20px;font-weight:700;margin:0 0 14px}
.hero-sub{font-size:12px;opacity:.8;margin-top:8px}
.hero-ring-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#fff}
.hero-ring-text b{font-size:22px;display:block;line-height:1}
.hero-ring-text span{font-size:10px;opacity:.85}

/* ===== Home: Stats ===== */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 14px;margin-top:-12px;position:relative;z-index:2}
.stat-card{background:var(--bg2);border-radius:var(--radius-sm);padding:10px 6px;text-align:center;box-shadow:var(--shadow)}
.stat-card .num{font-size:18px;font-weight:700;color:var(--fg);display:block}
.stat-card .lbl{font-size:10px;color:var(--muted);margin-top:2px}
.stat-card.warn .num{color:var(--warn)}
.stat-card.danger .num{color:var(--danger)}
.stat-card.success .num{color:var(--success)}

/* ===== Home: Quick Actions ===== */
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 14px}
.quick-btn{background:var(--bg2);border-radius:var(--radius-sm);padding:12px 4px;text-align:center;cursor:pointer;border:none;box-shadow:var(--shadow)}
.quick-btn .qb-ico{font-size:22px;display:block;margin-bottom:4px}
.quick-btn span{font-size:11px;color:var(--fg2)}

/* ===== Home: Today Timeline ===== */
.timeline{padding:0 14px}
.tl-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border2);position:relative}
.tl-item:last-child{border-bottom:none}
.tl-dot{width:10px;height:10px;border-radius:50%;background:var(--primary);margin-top:4px;flex-shrink:0;position:relative}
.tl-dot.done{background:var(--success)}
.tl-dot.overdue{background:var(--danger)}
.tl-dot::after{content:'';position:absolute;left:50%;top:14px;bottom:-14px;width:2px;background:var(--border2);transform:translateX(-50%)}
.tl-item:last-child .tl-dot::after{display:none}
.tl-body{flex:1;min-width:0}
.tl-title{font-size:13px;font-weight:500;color:var(--fg)}
.tl-sub{font-size:11px;color:var(--muted);margin-top:2px}
.tl-time{font-size:11px;color:var(--muted2);flex-shrink:0}
.tl-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;color:transparent;font-size:12px}
.tl-check.done{background:var(--success);border-color:var(--success);color:#fff}

/* ===== Home: Recent Animals ===== */
.recent-list{padding:0 14px}
.recent-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--radius-sm);background:var(--bg3);margin-bottom:6px;cursor:pointer}
.recent-code{font-size:13px;font-weight:600;color:var(--fg)}
.recent-info{flex:1;min-width:0}
.recent-name{font-size:12px;color:var(--muted)}
.recent-sub{font-size:11px;color:var(--muted2);margin-top:1px}
.recent-arrow{color:var(--muted2);font-size:14px}

/* ===== Home: Alert Banner ===== */
.alert-banner{display:flex;align-items:center;gap:10px;padding:10px 14px;margin:0 14px 14px;border-radius:var(--radius-sm);background:var(--warn-bg);color:var(--warn);font-size:12px}
.alert-banner.danger{background:var(--danger-bg);color:var(--danger)}
.alert-icon{font-size:16px}
.alert-text{flex:1}
.alert-arrow{font-size:14px}

/* ===== Home: Flow Track (今日流程) ===== */
.flow-track{display:flex;overflow-x:auto;padding:10px 14px;gap:8px;scrollbar-width:none}
.flow-track::-webkit-scrollbar{display:none}
.ft-item{flex-shrink:0;width:80px;text-align:center}
.ft-dot{width:32px;height:32px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;margin:0 auto 6px;font-size:14px}
.ft-dot.done{background:var(--success);color:#fff}
.ft-dot.current{background:var(--primary);color:#fff}
.ft-name{font-size:10px;color:var(--muted)}
.ft-time{font-size:10px;color:var(--muted2);margin-top:1px}
.ft-line{position:absolute}

/* ===== Animal Card ===== */
.animal-list{padding:8px 14px 80px}
.animal-card{display:flex;align-items:stretch;background:var(--bg2);border-radius:var(--radius);margin-bottom:8px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s}
.animal-card:active{transform:scale(.98)}
.animal-card.selected{background:var(--primary-bg)}
.ac-check{display:flex;align-items:center;padding:0 8px 0 12px}
.ac-check input{width:18px;height:18px;accent-color:var(--primary)}
.ac-status{width:4px;flex-shrink:0;background:var(--muted2)}
.ac-status.active{background:var(--primary)}
.ac-status.pending{background:var(--muted2)}
.ac-status.completed{background:var(--success)}
.ac-status.dead{background:var(--danger)}
.ac-status.excluded{background:var(--warn)}
.ac-main{flex:1;padding:10px 12px;min-width:0}
.ac-row1{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.ac-code{font-size:14px;font-weight:600;color:var(--fg)}
.ac-tag{font-size:10px;padding:2px 8px;border-radius:10px;background:var(--primary-bg);color:var(--primary);white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.ac-row2{font-size:11px;color:var(--muted);margin-bottom:6px}
.ac-row3{display:flex;align-items:center;gap:6px}
.ac-step{display:flex;align-items:center;gap:4px;flex:1;min-width:0}
.ac-step-ico{font-size:14px}
.ac-step-time{font-size:11px;color:var(--muted2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-arrow{color:var(--muted2);font-size:14px;flex-shrink:0;padding:0 4px}

/* ===== Animal Detail ===== */
.detail-hero{background:linear-gradient(135deg,var(--primary),#1F5BC4);padding:calc(var(--safe-t) + 16px) 16px 20px;color:#fff}
.dh-status{display:inline-block;font-size:11px;padding:3px 10px;border-radius:12px;background:rgba(255,255,255,.2);margin-bottom:8px}
.dh-code{font-size:22px;font-weight:700;margin-bottom:4px}
.dh-group{font-size:13px;opacity:.85}
.dh-info{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}
.dh-row{display:flex;flex-direction:column;gap:2px}
.dh-row .lbl{font-size:10px;opacity:.7}
.dh-row .val{font-size:13px;font-weight:500}

/* ===== Next Step Card ===== */
.next-step-card{margin:0 14px 14px;background:var(--bg2);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);border-left:4px solid var(--primary)}
.ns-row{display:flex;align-items:center;gap:10px}
.ns-ico{font-size:24px}
.ns-main{flex:1}
.ns-label{font-size:11px;color:var(--muted)}
.ns-name{font-size:15px;font-weight:600;color:var(--fg)}
.ns-time{font-size:12px;color:var(--primary);margin-top:2px}

/* ===== Info List (animal detail) ===== */
.info-list{padding:0 14px}
.info-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border2);font-size:13px}
.info-row:last-child{border-bottom:none}
.info-row .lbl{color:var(--muted)}
.info-row .val{color:var(--fg);font-weight:500;text-align:right;max-width:60%;word-break:break-all}

/* ===== Notes Box ===== */
.notes-box{margin:0 14px 14px;padding:12px;background:var(--warn-bg);border-radius:var(--radius-sm);font-size:12px;color:var(--fg2);line-height:1.5}

/* ===== Task Card ===== */
.task-list{padding:8px 14px 80px}
.task-card{background:var(--bg2);border-radius:var(--radius);margin-bottom:8px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s}
.task-card:active{transform:scale(.98)}
.task-card.overdue{border-left:3px solid var(--danger)}
.task-card.today{border-left:3px solid var(--primary)}
.task-card.done{opacity:.6}
.tc-body{display:flex;align-items:center;gap:10px;padding:12px}
.tc-check{width:24px;height:24px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;color:transparent;font-size:12px;transition:all .15s}
.tc-check.done{background:var(--success);border-color:var(--success);color:#fff}
.tc-ico{font-size:20px;flex-shrink:0}
.tc-main{flex:1;min-width:0}
.tc-row1{display:flex;justify-content:space-between;align-items:center;gap:6px}
.tc-name{font-size:14px;font-weight:600;color:var(--fg)}
.tc-code{font-size:12px;color:var(--muted);margin-top:1px}
.tc-row2{display:flex;align-items:center;gap:6px;margin-top:4px}
.tc-time{font-size:11px;color:var(--muted2)}
.tc-time.overdue{color:var(--danger)}
.tc-time.today{color:var(--primary)}
.tc-sep{color:var(--border)}
.tc-badge{font-size:10px;padding:1px 6px;border-radius:8px;background:var(--bg3);color:var(--muted)}
.tc-badge.custom{background:var(--purple-bg);color:var(--purple)}
.tc-arrow{color:var(--muted2);font-size:14px;flex-shrink:0}

/* ===== Task Tabs ===== */
.task-tabs{display:flex;background:var(--bg2);border-bottom:1px solid var(--border2);position:sticky;top:0;z-index:10}
.task-tabs .seg-control{flex:1;background:transparent;padding:0;border-radius:0}
.task-tabs .seg-btn{flex:1;border-radius:0;background:transparent;padding:12px 4px;font-size:13px;position:relative}
.task-tabs .seg-btn.active{color:var(--primary);font-weight:600}
.task-tabs .seg-btn.active::after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:2px;background:var(--primary);border-radius:1px}

/* ===== Task Detail ===== */
.task-detail{padding:0 14px 14px}
.td-header{display:flex;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--border2);margin-bottom:14px}
.td-name{font-size:16px;font-weight:600}
.td-type{font-size:12px;color:var(--muted)}

/* ===== Upcoming (tasks) ===== */
.upcoming-list{padding:0 14px}
.up-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--radius-sm);background:var(--bg3);margin-bottom:6px}
.up-main{flex:1;min-width:0}
.up-title{font-size:13px;font-weight:500}
.up-sub{font-size:11px;color:var(--muted);margin-top:1px}
.up-tag{font-size:10px;padding:2px 8px;border-radius:8px;background:var(--primary-bg);color:var(--primary)}
.up-bar{width:3px;height:24px;border-radius:2px;background:var(--primary);flex-shrink:0}

/* ===== Data: Charts ===== */
.chart-flex{display:flex;align-items:center;gap:14px;padding:14px}
.chart-sub{font-size:12px;color:var(--muted);margin-top:6px}

/* ===== Data: Legend ===== */
.legend-inline{display:flex;flex-wrap:wrap;gap:8px 14px;padding:0 14px 14px}
.legend-item{display:flex;align-items:center;gap:5px;font-size:12px}
.legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.legend-label{color:var(--fg2)}
.legend-val{color:var(--muted);font-weight:600}

/* ===== Settings ===== */
.setting-block{background:var(--bg2);border-radius:var(--radius);margin:0 14px 14px;overflow:hidden;box-shadow:var(--shadow)}
.setting-label{font-size:12px;color:var(--muted);padding:14px 14px 6px;font-weight:600}
.setting-desc{font-size:11px;color:var(--muted2);padding:0 14px 8px;line-height:1.5}

/* ===== Switch ===== */
.switch-row{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border2)}
.switch-row:last-child{border-bottom:none}
.switch-row .lbl{font-size:13px;font-weight:500}
.switch-row .desc{font-size:11px;color:var(--muted);margin-top:1px}
.switch{width:44px;height:26px;border-radius:13px;background:var(--border);position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
.switch.on{background:var(--success)}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch.on::after{transform:translateX(18px)}

/* ===== Icon Grid (settings) ===== */
.icon-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:0 14px 14px}
.icon-btn{padding:8px;border-radius:var(--radius-sm);border:2px solid transparent;background:var(--bg3);cursor:pointer;transition:all .15s}
.icon-btn.active{border-color:var(--primary);background:var(--primary-bg)}
.icon-btn img{width:100%;height:auto;border-radius:12px;display:block}

/* ===== Color Picker ===== */
.color-picker{display:flex;gap:8px;padding:0 14px 14px;flex-wrap:wrap}
.cp-btn{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .15s}
.cp-btn.active{border-color:var(--fg);transform:scale(1.1)}

/* ===== Template Items ===== */
.tpl-list{padding:0}
.tpl-item{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border2);gap:8px}
.tpl-item:last-child{border-bottom:none}
.tpl-item-main{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.tpl-item-main>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.tpl-item-main b{font-size:13px}
.tpl-item-main span{font-size:11px;color:var(--muted)}
.tpl-item-actions{display:flex;gap:4px;flex-shrink:0}
.tpl-chip{font-size:10px;padding:2px 8px;border-radius:8px;background:var(--bg3);color:var(--muted)}
.tpl-quick{display:flex;gap:6px;padding:10px 14px;overflow-x:auto;scrollbar-width:none}
.tpl-quick::-webkit-scrollbar{display:none}
.tpl-quick .chip{flex-shrink:0}

/* ===== About ===== */
.about-desc{font-size:12px;color:var(--muted);line-height:1.6;padding:0 14px 14px}

/* ===== Form ===== */
.form-row{margin-bottom:12px}
.form-row label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;font-weight:500}
.form-row .hint{font-size:11px;color:var(--muted2);margin-top:3px}
.text-input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg3);color:var(--fg);font-size:13px;outline:none;transition:border-color .15s}
.text-input:focus{border-color:var(--primary)}
textarea.text-input{resize:vertical;min-height:60px;font-family:inherit}

/* ===== Select All Bar ===== */
.select-all{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--bg3);font-size:12px;color:var(--fg2)}
.sel-actions{display:flex;gap:6px;padding:8px 14px;background:var(--bg2);border-top:1px solid var(--border2)}
.sel-count{font-size:12px;color:var(--primary);font-weight:600}

/* ===== Action Grid (animal detail) ===== */
.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 14px 14px}
.action-btn{background:var(--bg3);border:none;border-radius:var(--radius-sm);padding:12px 4px;text-align:center;cursor:pointer}
.action-btn .ico{font-size:20px;display:block;margin-bottom:4px}
.action-btn span{font-size:11px;color:var(--fg2)}
.action-btn.primary{background:var(--primary-bg)}
.action-btn.primary .ico{color:var(--primary)}
.action-btn.danger{background:var(--danger-bg)}
.action-btn.danger .ico{color:var(--danger)}

/* ===== Action List ===== */
.action-list{padding:0 14px}
.action-row{display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--radius-sm);background:var(--bg3);margin-bottom:6px;cursor:pointer}
.action-row .ico{font-size:18px}
.action-row .lbl{flex:1;font-size:13px}
.action-row .arrow{color:var(--muted2)}

/* ===== Log Text ===== */
.log-text{font-size:12px;color:var(--fg2);padding:8px 14px;border-bottom:1px solid var(--border2)}
.log-text:last-child{border-bottom:none}
.log-text .time{font-size:10px;color:var(--muted2);margin-right:6px}

/* ===== Score Selector ===== */
.score-opts{display:flex;flex-direction:column;gap:6px}
.score-opt{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--radius-sm);border:2px solid var(--border);cursor:pointer;transition:all .15s}
.score-opt.active{border-color:var(--primary);background:var(--primary-bg)}
.score-opt .v{width:28px;height:28px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
.score-opt.active .v{background:var(--primary);color:#fff}
.score-opt .l{font-size:12px;color:var(--fg2)}

/* ===== Misc ===== */
.due{color:var(--danger)}
.warn{color:var(--warn)}
.primary{color:var(--primary)}
.sm{font-size:11px}
.ver{font-size:11px;color:var(--muted2)}
.btn-primary{background:var(--primary);color:#fff}
.btn-text{background:transparent;color:var(--primary);border:none;padding:8px 12px;font-size:13px;cursor:pointer}