/* 薄巧两套皮肤：奶黄 + 深巧棕 + 雾薄荷
   白天（默认 :root）/ 黑夜（html[data-theme="dark"]，由 app.js 切换） */

:root{
  /* Noguchi 那套：雾绿 #a6baac / 米白 #ece0ca / 棕褐 #967462 / 深栗 #5d3e3f */
  --bg:#ece0ca;                    /* 主区：米白 */
  --bg-dot:rgba(166,186,172,.38);  /* 米白上的雾绿波点 */
  --bg-glow:#f4ecda;
  --side-bg:#967462;               /* 侧栏：棕褐 */
  --side-hover:rgba(255,255,255,.13);
  --side-text:#fcf6ea;
  --side-active-bg:#a6baac;
  --side-active-fg:#33403a;
  --card:#f9f3e5;                  /* 卡片：再亮一档的米 */
  --card-2:#fdf9f0;
  --input-bg:#fffdf7;
  --btn-bg:#fdf9ef;
  --btn-hover:#f2e9d6;
  --line:#ddd0b6;
  --line-soft:#eae0cb;
  --text:#5d3e3f;                  /* 正文：深栗 */
  --heading:#5d3e3f;               /* 标题：同上，够清楚 */
  --text-2:#4d7a6c;                /* 注解：深绿 */
  --muted:#6d9285;                 /* 更淡的注解绿 */
  --accent:#967462;                /* 按钮/链接/数字：棕褐 */
  --accent-deep:#7a5b4b;
  --accent-soft:rgba(150,116,98,.15);
  --mint:#a6baac;                  /* 雾绿：只做点缀 */
  --cocoa-soft:rgba(166,186,172,.34);
  --on-accent:#f7efe0;
  --ok:#4f7f63;   --ok-soft:rgba(79,127,99,.16);
  --warn:#9d7226; --warn-soft:rgba(157,114,38,.17);
  --err:#a94b44;  --err-soft:rgba(169,75,68,.14);
  --shadow:0 1px 2px rgba(93,62,63,.10), 0 8px 22px rgba(93,62,63,.12);
  --radius:12px;
}

html[data-theme="dark"]{
  /* 夜里的薄巧：外面是巧克力，里面还是那块乳黄 */
  --bg:#4a3830;                    /* 主区：浅巧克力 */
  --bg-glow:#57443a;
  --side-bg:#2b1d19;               /* 侧栏：深巧克力 */
  --side-hover:rgba(255,255,255,.10);
  --side-text:#f0e4cd;
  --side-active-bg:#a6baac;
  --side-active-fg:#2b1d19;
  --card:#eadfc7;                  /* 卡片：乳黄 */
  --card-2:#f2e9d5;
  --input-bg:#fffdf7;
  --btn-bg:#fdf9ef;
  --btn-hover:#f2e9d6;
  --line:#d8c9ab;
  --line-soft:#e4d8bd;
  --text:#d9c8b2;                  /* 主区（浅巧）上的字：浅米 */
  --heading:#f4ebda;
  --text-2:#c3ae97;
  --muted:#b09a86;
  --accent:#a6baac;                /* 主区上的强调：雾绿 */
  --accent-deep:#c3d5cb;
  --accent-soft:rgba(166,186,172,.16);
  --mint:#a6baac;
  --cocoa:#b08a72;
  --cocoa-soft:rgba(150,116,98,.26);
  --on-accent:#2b1d19;
  --ok:#8fc0a0;   --ok-soft:rgba(143,192,160,.14);
  --warn:#d6a85f; --warn-soft:rgba(214,168,95,.15);
  --err:#d9837a;  --err-soft:rgba(217,131,122,.14);
  --shadow:0 1px 2px rgba(0,0,0,.16), 0 10px 26px rgba(0,0,0,.2);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background-color:var(--bg);
  color:var(--text);font-size:14px;line-height:1.65;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background-color .2s,color .2s;
}
a{color:var(--accent-deep);text-decoration:none}
code{background:var(--cocoa-soft);color:var(--accent-deep);padding:1px 6px;border-radius:5px;font-size:12.5px}
.hidden{display:none !important}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.err{color:var(--err)}
.warn{color:var(--warn);font-size:12.5px}
.msg{font-size:12.5px;min-height:18px;margin-top:6px}
.msg.ok{color:var(--ok)}
.msg.bad{color:var(--err)}
::selection{background:var(--accent-soft)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--cocoa);background-clip:content-box}

/* 卡片是乳黄底，里面的字自动切回深色那套（不管外面是白天还是黑夜） */
.card, .item, .stat, .modal, .login-box, .node-row{
  --text:#5d3e3f;
  --heading:#5d3e3f;
  --text-2:#4d7a6c;
  --muted:#6d9285;
  --accent:#967462;
  --accent-deep:#7a5b4b;
  --accent-soft:rgba(150,116,98,.15);
  --line:#ddd0b6;
  --line-soft:#eae0cb;
  --input-bg:#fffdf7;
  --btn-bg:#fdf9ef;
  --btn-hover:#f2e9d6;
  --on-accent:#f7efe0;
  --ok:#4f7f63;   --ok-soft:rgba(79,127,99,.16);
  --warn:#9d7226; --warn-soft:rgba(157,114,38,.17);
  --err:#a94b44;  --err-soft:rgba(169,75,68,.14);
}

/* 登录 */
.login-mask{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;
  background-color:var(--bg);}
.login-box{
  background:linear-gradient(180deg,var(--card-2),var(--card));
  border:1px solid var(--line);border-radius:18px;padding:30px;width:100%;max-width:390px;box-shadow:var(--shadow);
}
.login-box h1{font-size:17px;margin:0 0 6px;letter-spacing:.3px}
.login-box h1::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--accent);margin-right:9px;vertical-align:middle}
.login-box p{margin:0 0 18px}
.login-box input{width:100%;margin-bottom:12px}

/* 布局 */
#app{display:flex;min-height:100vh}
.side{width:200px;flex:0 0 200px;background:var(--side-bg);
  border-right:1px solid var(--line-soft);display:flex;flex-direction:column;padding:20px 12px;position:sticky;top:0;height:100vh}
.brand{font-weight:600;font-size:14.5px;padding:0 6px 18px 10px;display:flex;align-items:center;gap:8px;letter-spacing:.4px;color:var(--side-text)}
.icon-btn{margin-left:auto;width:30px;height:30px;padding:0;display:inline-flex;align-items:center;
  justify-content:center;border-radius:8px;background:transparent;border-color:transparent;color:var(--side-text)}
.icon-btn:hover{background:var(--side-hover);border-color:transparent;color:var(--text)}
.icon-btn svg{width:17px;height:17px;display:block}
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.14em}
.ico-xs{width:.8em;height:.8em;vertical-align:-.05em;margin-left:2px;opacity:.75}
.ico-choco{width:18px;height:18px;flex:0 0 auto;color:var(--mint)}
#theme-toggle .ico-sun{display:none}
html[data-theme="dark"] #theme-toggle .ico-sun{display:block}
html[data-theme="dark"] #theme-toggle .ico-moon{display:none}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
.side nav{display:flex;flex-direction:column;gap:2px;flex:1}
.side nav a{padding:9px 12px;border-radius:9px;color:var(--side-text);cursor:pointer;font-size:13.5px;
  border-left:2px solid transparent;transition:background .14s,color .14s}
.side nav a:hover{background:var(--side-hover);color:#ffffff}
.side nav a.active{background:var(--side-active-bg);color:var(--side-active-fg);font-weight:600;border-left-color:transparent}
.side-foot{padding-top:12px;border-top:1px solid rgba(255,255,255,.18);display:flex;gap:6px;flex-wrap:wrap}
.side-foot button{color:var(--side-text);background:rgba(255,255,255,.14);border-color:transparent}
.side-foot button:hover{background:rgba(255,255,255,.26);border-color:transparent;color:#ffffff}
html[data-theme="dark"] .side-foot{border-top-color:rgba(255,255,255,.07)}
.main{flex:1;padding:28px 30px 70px;max-width:1020px}
.main h2{font-size:19px;margin:0 0 18px;font-weight:600;letter-spacing:.2px;color:var(--heading)}
.page{display:none}
.page.active{display:block;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* 元件 */
input,select,textarea{
  font:inherit;color:var(--text);background:var(--input-bg);border:1px solid var(--line);
  border-radius:9px;padding:8px 11px;outline:none;transition:border-color .14s,box-shadow .14s;
}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
select option{background:var(--input-bg);color:var(--text)}
textarea{width:100%;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
button{font:inherit;border:1px solid var(--line);background:var(--btn-bg);color:var(--text);
  border-radius:9px;padding:8px 15px;cursor:pointer;transition:background .14s,border-color .14s,transform .06s}
button:hover{background:var(--btn-hover);border-color:var(--cocoa)}
button:active{transform:translateY(1px)}
button.primary{background:var(--accent);border-color:transparent;color:var(--on-accent);
  font-weight:600;box-shadow:0 2px 10px var(--accent-soft)}
button.primary:hover{filter:brightness(1.05);background:var(--accent)}
button.danger{color:var(--err);border-color:var(--err-soft);background:var(--err-soft)}
button.danger:hover{filter:brightness(.97)}
button.ghost{background:transparent}
button.small{padding:4px 10px;font-size:12.5px;border-radius:7px}
button.wide{width:100%}
button:disabled{opacity:.45;cursor:not-allowed}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:17px 19px;margin-bottom:15px;box-shadow:var(--shadow)}
.card h3{font-size:13.5px;margin:0 0 12px;font-weight:600;color:var(--heading);letter-spacing:.3px;
  display:flex;align-items:center;gap:8px}
.card h3::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--accent)}
.form-row{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.form-row input{flex:1;min-width:150px}
label.inline{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--text-2)}
ol.steps{margin:0;padding-left:20px;font-size:13.5px;color:var(--text-2)}
ol.steps li{margin:5px 0}
ol.steps b{color:var(--text)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:13px;margin-bottom:15px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px;
  position:relative;overflow:hidden;box-shadow:var(--shadow)}
.stat::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--mint),transparent)}
.stat .n{font-size:23px;font-weight:600;letter-spacing:.3px;font-variant-numeric:tabular-nums;color:var(--accent)}
.stat .l{font-size:12.5px;color:var(--muted);margin-top:2px}

.list{display:flex;flex-direction:column;gap:13px}
.item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 17px;box-shadow:var(--shadow);transition:border-color .16s}
.item:hover{border-color:var(--cocoa)}
.item-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.item-title{font-weight:600;display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:14px;color:var(--heading)}
.item-url{font-size:12.5px;color:var(--muted);word-break:break-all;margin-top:3px}
.item-url.note{color:var(--accent-deep);opacity:.92}
.actions{display:flex;flex-wrap:wrap;gap:7px}
.pill{font-size:11.5px;padding:2px 9px;border-radius:999px;background:var(--cocoa-soft);color:var(--text-2);font-weight:500}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.bad{background:var(--err-soft);color:var(--err)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 9px;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{color:var(--muted);font-weight:500;font-size:12.5px;letter-spacing:.2px}
tbody tr:hover{background:var(--cocoa-soft)}
tr:last-child td{border-bottom:none}

.node-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);
  border-radius:9px;margin-bottom:7px;background:var(--line-soft);cursor:grab;
  transition:border-color .14s,background .14s}
.node-row:hover{border-color:var(--cocoa)}
.node-row.dragging{opacity:.4}
.node-row .idx{width:22px;color:var(--muted);font-size:12px;text-align:center;font-variant-numeric:tabular-nums}
.node-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.node-row .nm b{color:var(--accent-deep);font-weight:600}
.node-row .st{font-size:12px}
.node-row.disabled{opacity:.5}

.kv{display:flex;gap:11px;align-items:flex-start;margin:11px 0}
.kv>label{flex:0 0 96px;font-size:13px;color:var(--muted);padding-top:9px}
.copyline{display:flex;gap:7px;flex:1;flex-wrap:wrap}
.copyline input{flex:1;min-width:180px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}

.modal-mask{position:fixed;inset:0;background:rgba(89,60,52,.34);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:60;padding:18px}
.modal{background:var(--card);border:1px solid var(--line);
  border-radius:16px;width:100%;max-width:660px;max-height:86vh;display:flex;flex-direction:column;
  padding:20px;box-shadow:var(--shadow)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.modal-head h3{margin:0;font-size:15px}
.modal-body{overflow:auto;flex:1;margin:12px 0;border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);padding:9px 0}
.modal-foot{display:flex;justify-content:space-between;align-items:center;gap:10px}
.check-row{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:7px;cursor:pointer}
.check-row:hover{background:var(--cocoa-soft)}
.check-row span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.check-row input{accent-color:var(--accent)}

.chat-meta{font-size:12.5px;color:var(--text-2);margin-top:10px;white-space:pre-wrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.7}
.out{background:var(--line-soft);border:1px solid var(--line);border-radius:10px;padding:14px;min-height:90px;
  white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;margin:0;color:var(--text)}
.banner{background:var(--warn-soft);border:1px solid var(--warn);color:var(--warn);
  border-radius:10px;padding:11px 15px;margin-bottom:15px;font-size:13px}

@media (max-width:820px){
  #app{flex-direction:column}
  .side{width:auto;flex:none;height:auto;position:static;border-right:none;
    border-bottom:1px solid rgba(0,0,0,.16);padding:14px 12px;
    box-shadow:0 2px 10px rgba(0,0,0,.12)}
  .brand{padding-bottom:12px}
  .side nav{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px}
  .side nav a{white-space:nowrap;border-left:none;border-radius:999px;padding:6px 14px;
    background:rgba(255,255,255,.13)}
  .side nav a.active{background:var(--side-active-bg);color:var(--side-active-fg)}
  .side-foot{display:none}
  .main{padding:18px 15px 60px}
  .kv{flex-direction:column;gap:5px}
  .kv>label{flex:none;padding-top:0}
  .card{padding:15px}
}