:root{
  --bg:#121212; --card:#181818; --surface:#1f1f1f; --border:#4d4d4d;
  --text:#ffffff; --text2:#b3b3b3; --accent:#1ed760;
  --blue:#539df5; --orange:#ffa42b; --red:#f3727f;
  --radius:8px; --pill:500px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:-apple-system,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;font-size:14px}
#app{display:flex;height:100vh;overflow:hidden}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:14px;color:var(--text);background:var(--surface);border:1px solid transparent;border-radius:var(--pill);padding:10px 16px;outline:none;width:100%}
input:focus,textarea:focus{border-color:var(--accent)}
textarea{border-radius:var(--radius);resize:vertical;min-height:120px;line-height:1.6}

/* ===== Sidebar (desktop) ===== */
#sidebar{width:232px;background:var(--card);display:flex;flex-direction:column;padding:16px;gap:6px;flex-shrink:0}
.logo{display:flex;align-items:center;gap:10px;padding:8px;font-size:16px;font-weight:700}
#nav{display:flex;flex-direction:column;gap:6px}
#nav a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--pill);color:var(--text2);text-decoration:none;font-size:14px}
#nav a.active{background:var(--accent);color:#000;font-weight:700}
#nav a svg{flex-shrink:0}
.spacer{flex:1}
.bark-status{display:flex;align-items:center;gap:8px;padding:10px;border-radius:var(--pill);background:var(--surface);font-size:12px;color:var(--text2)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}
.dot.off{background:var(--border)}
.sep{color:var(--border);flex-shrink:0}

/* ===== Main ===== */
#main{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:20px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.topbar h1{font-size:24px}
.topbar .sub{color:var(--text2);font-size:13px;margin-top:4px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:var(--pill);background:var(--accent);color:#000;font-weight:700;font-size:14px}
.btn.ghost{background:transparent;color:var(--text);border:1px solid #7c7c7c}
.btn.sm{padding:8px 14px;font-size:13px}
.btn.danger{background:var(--red)}

/* ===== Cards ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--card);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:12px}
.card h2{font-size:18px;display:flex;justify-content:space-between;align-items:center}
.card h2 a,.link{color:var(--accent);font-size:13px;font-weight:500;text-decoration:none;cursor:pointer}
.stat .label{font-size:12px;color:var(--text2)}
.stat .value{font-size:24px;font-weight:700}
.stat .subtext{font-size:12px;color:var(--text2)}
.grid2{display:grid;grid-template-columns:1fr 400px;gap:16px;align-items:start}
.col{display:flex;flex-direction:column;gap:16px}

/* ===== List rows ===== */
.row{display:flex;align-items:center;gap:10px}
.row .grow{flex:1;min-width:0}
.row .time{font-size:12px;color:var(--text2);white-space:nowrap}
.bar3{width:3px;height:32px;border-radius:2px;flex-shrink:0}
.muted{color:var(--text2)}
.small{font-size:12px}
.strike{text-decoration:line-through;color:var(--text2)}
.badge{display:inline-flex;padding:4px 10px;border-radius:var(--pill);font-size:11px;font-weight:600}
.badge.green{background:rgba(30,215,96,.15);color:var(--accent)}
.badge.orange{background:rgba(255,164,43,.15);color:var(--orange)}
.badge.blue{background:rgba(83,157,245,.15);color:var(--blue)}

/* checkbox */
.chk{width:20px;height:20px;border-radius:5px;border:1.5px solid var(--border);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}
.chk.on{background:var(--accent);border-color:var(--accent)}
.chk.on::after{content:"";width:10px;height:6px;border-left:2px solid #000;border-bottom:2px solid #000;transform:rotate(-45deg) translateY(-1px)}
.chk.circle{width:26px;height:26px;border-radius:50%}
.chk.circle.on::after{width:12px;height:7px}

/* forms */
.form{display:flex;flex-direction:column;gap:10px}
.form-row{display:flex;gap:10px;flex-wrap:wrap}
.form-row>*{flex:1;min-width:120px}
label.fl{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text2);font-weight:500}

/* pills */
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{padding:8px 16px;border-radius:var(--pill);background:var(--surface);color:var(--text2);font-size:12px;font-weight:500;cursor:pointer;border:1px solid transparent;text-align:center}
.pill.on{border-color:var(--accent);color:var(--accent);font-weight:600}
.pill.fill.on{background:var(--accent);color:#000}

/* toggle */
.toggle{width:36px;height:20px;border-radius:10px;background:var(--border);position:relative;cursor:pointer;flex-shrink:0;transition:background .2s}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--text2);transition:all .2s}
.toggle.on{background:var(--accent)}
.toggle.on::after{left:19px;background:#000}

/* section title */
.sec-title{font-size:16px;font-weight:700;margin-top:4px}
.sec-label{font-size:13px;font-weight:600;color:var(--text2)}
.divider{height:1px;background:var(--surface)}

/* toast */
#toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(80px);background:var(--surface);color:var(--text);padding:12px 20px;border-radius:var(--pill);font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.5);transition:transform .25s;z-index:99;max-width:90vw}
#toast.show{transform:translateX(-50%) translateY(0)}

/* tabbar (mobile) */
#tabbar{display:none}

/* ===== 动画系统 ===== */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}

/* 视图切换：主内容逐层浮入（渲染替换 innerHTML 时触发） */
#main>*{animation:rise .35s cubic-bezier(.2,.7,.3,1) both}
#main>*:nth-child(2){animation-delay:.05s}
#main>*:nth-child(3){animation-delay:.1s}
#main>*:nth-child(4){animation-delay:.15s}
#main>*:nth-child(5){animation-delay:.2s}

/* 按钮：悬停提亮、按压回弹 */
.btn{transition:transform .15s ease,filter .15s ease}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:scale(.95)}
.btn.ghost:hover{border-color:var(--text);filter:none}

/* 卡片：悬停轻微浮起 */
.card{transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.35)}

/* 导航：背景与文字平滑过渡 */
#nav a{transition:background .2s ease,color .2s ease,transform .15s ease}
#nav a:not(.active):hover{background:var(--surface);color:var(--text)}
#nav a:active{transform:scale(.97)}
#tabbar a{transition:color .2s ease}

/* 勾选：打勾时弹跳 */
.chk{transition:background .15s ease,border-color .15s ease}
.chk.on{animation:pop .25s ease}
.chk.circle:hover{border-color:var(--accent)}

/* 药丸 / 开关 / 输入框 */
.pill{transition:all .15s ease}
.pill:hover{color:var(--text)}
input,textarea{transition:border-color .2s ease}

/* 列表行：悬停微亮 */
.card .row{border-radius:6px;padding:4px 6px;margin:0 -6px;transition:background .15s ease}
.card .row:hover{background:rgba(255,255,255,.04)}

/* 尊重系统减弱动效设置 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ===== Responsive: mobile ===== */
@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr}
}
@media (max-width:768px){
  #sidebar{display:none}
  #main{padding:16px 16px 84px}
  .topbar h1{font-size:20px}
  #tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--card);padding:8px 12px calc(8px + env(safe-area-inset-bottom));justify-content:space-between;z-index:50}
  #tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text2);text-decoration:none;font-size:10px;padding:4px 6px}
  #tabbar a.active{color:var(--accent);font-weight:600}
}