/* ===========================================================================
   BotaniQX Knowledge Base — Layer 3 UI
   Desktop: left sidebar. Mobile (<760px): bottom tab bar, Chinese labels only.
   =========================================================================== */
:root{
  --green:#1f7a4d; --green-d:#0f5132; --leaf:#2f9e63; --gold:#b8862b;
  --ink:#1d2b22; --ink2:#3c5346; --paper:#f7faf8; --line:#dbe7df;
  --soft:#eef5f0; --soft2:#e3efe8; --red:#c0392b; --blue:#2d6cb5;
  --purple:#7d4fb0; --shadow:0 2px 8px rgba(20,60,40,.08);
  --r:12px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; height:100%;}
body{
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",-apple-system,sans-serif;
  background:var(--paper); color:var(--ink); font-size:15px; line-height:1.55;
}
#app{height:100%;}

/* ---------- layout ---------- */
.shell{display:flex; min-height:100vh;}
.side{
  width:216px; flex:none; background:var(--green-d); color:#e8f3ec;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.side .brand{padding:20px 18px 14px; font-weight:700; font-size:17px; color:#fff;}
.side .brand small{display:block; font-weight:400; font-size:11px; opacity:.7; margin-top:2px;}
.side nav{flex:1; overflow-y:auto;}
.side a{
  display:flex; align-items:center; gap:10px; padding:11px 18px; color:#cfe5d8;
  text-decoration:none; font-size:14.5px; border-left:3px solid transparent;
}
.side a.active{background:rgba(255,255,255,.08); color:#fff; border-left-color:var(--gold);}
.side a:hover{background:rgba(255,255,255,.06); color:#fff;}
.side .foot{padding:14px 18px; font-size:12px; opacity:.75;}
.side .foot button{margin-top:6px;}
.main{flex:1; min-width:0; padding:22px 26px 90px;}

/* topbar */
.topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:10px; flex-wrap:wrap;}
.topbar h1{font-size:21px; margin:0; color:var(--green-d);}
.topbar .crumb{font-size:12.5px; color:#7d917f;}

/* language toggle */
.langtog{
  border:1px solid var(--line); background:#fff; border-radius:20px; padding:3px;
  display:inline-flex; cursor:pointer; user-select:none;
}
.langtog span{padding:3px 12px; border-radius:16px; font-size:12.5px; color:var(--ink2);}
.langtog span.on{background:var(--green); color:#fff;}

/* ---------- mobile ---------- */
.bottomnav{display:none;}
@media (max-width:760px){
  .side{display:none;}
  .main{padding:14px 14px 86px;}
  .bottomnav{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:50;
    background:#fff; border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .bottomnav a{
    flex:1; text-align:center; padding:8px 2px 6px; text-decoration:none;
    color:#7d917f; font-size:11px;
  }
  .bottomnav a .ico{display:block; font-size:20px; line-height:1.2;}
  .bottomnav a.active{color:var(--green);}
  .topbar h1{font-size:18px;}
  table.list{font-size:13px;}
  .hide-mobile{display:none !important;}
}

/* ---------- cards, tables, forms ---------- */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px 18px; margin-bottom:14px;}
.card h3{margin:0 0 10px; font-size:15.5px; color:var(--green-d);}
.grid{display:grid; gap:12px;}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}

.stat{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; box-shadow:var(--shadow);}
.stat .n{font-size:26px; font-weight:700; color:var(--green-d);}
.stat .l{font-size:12.5px; color:#7d917f;}

table.list{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); font-size:14px;}
table.list th{background:var(--green-d); color:#fff; text-align:left; padding:9px 12px; font-weight:600; font-size:12.5px; white-space:nowrap;}
table.list td{padding:9px 12px; border-top:1px solid var(--soft2); color:var(--ink2); vertical-align:top;}
table.list tr.click{cursor:pointer;}
table.list tr.click:hover td{background:var(--soft);}

label.f{display:block; margin-bottom:10px; font-size:13px; color:var(--ink2);}
label.f b{display:block; margin-bottom:4px; font-weight:600; color:var(--ink);}
label.f b .req{color:var(--red);}
input[type=text],input[type=number],input[type=date],input[type=password],select,textarea{
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:14px; background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(47,158,99,.35); border-color:var(--leaf);}
textarea{min-height:64px; resize:vertical;}
.row{display:flex; gap:10px; flex-wrap:wrap;}
.row > *{flex:1; min-width:130px;}

button,.btn{
  border:none; border-radius:9px; padding:9px 16px; font:inherit; font-size:14px;
  cursor:pointer; background:var(--green); color:#fff; font-weight:600;
}
button:hover{filter:brightness(1.07);}
button.sec{background:var(--soft2); color:var(--green-d);}
button.warn{background:#a93226;}
button.ghost{background:transparent; color:var(--green-d); border:1px dashed var(--leaf);}
button.sm{padding:5px 11px; font-size:12.5px; border-radius:7px;}
button:disabled{opacity:.5; cursor:not-allowed;}

.badge{display:inline-block; font-size:11px; padding:2px 9px; border-radius:18px; background:var(--soft2); color:var(--green-d); white-space:nowrap;}
.badge.gold{background:#f7ecd4; color:#8a6516;}
.badge.red{background:#fde8ea; color:#b23a4a;}
.badge.blue{background:#e7f0fb; color:#2d6cb5;}
.badge.purple{background:#efe7f7; color:#6b3fa0;}
.badge.gray{background:#eef0ef; color:#7d8c84;}

.empty{color:#90a496; font-size:13.5px; padding:18px; text-align:center;}
.err{background:#fde8ea; color:#b23a4a; border-radius:9px; padding:9px 13px; font-size:13.5px; margin:8px 0;}
.okmsg{background:#e8f7ee; color:#1f7a4d; border-radius:9px; padding:9px 13px; font-size:13.5px; margin:8px 0;}

/* ---------- modal ---------- */
.modal-bg{position:fixed; inset:0; background:rgba(15,40,28,.45); z-index:100; display:flex; align-items:flex-start; justify-content:center; padding:30px 12px; overflow-y:auto;}
.modal{background:#fff; border-radius:14px; width:100%; max-width:560px; padding:20px 22px; box-shadow:0 10px 40px rgba(0,0,0,.25); margin:auto 0;}
.modal h3{margin:0 0 14px; color:var(--green-d);}
.modal .acts{display:flex; gap:10px; justify-content:flex-end; margin-top:16px;}
@media (max-width:760px){ .modal{max-width:none; border-radius:12px;} .modal-bg{padding:10px 8px;} }

/* ---------- login ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--green-d),var(--leaf)); padding:20px;}
.login{background:#fff; border-radius:16px; padding:34px 30px; width:100%; max-width:380px; box-shadow:0 14px 50px rgba(0,0,0,.3);}
.login h1{margin:0 0 4px; font-size:22px; color:var(--green-d); text-align:center;}
.login .sub{text-align:center; color:#7d917f; font-size:13px; margin-bottom:22px;}

/* ---------- process chain (drag & drop) ---------- */
.chain{display:flex; gap:0; overflow-x:auto; padding:12px 4px 16px; align-items:stretch;}
.chain .node{
  flex:none; width:172px; background:#fff; border:1.5px solid var(--line);
  border-radius:12px; padding:10px 12px; position:relative; cursor:grab;
}
.chain .node.dragging{opacity:.45; border-style:dashed;}
.chain .node .ttl{font-weight:600; font-size:13.5px; color:var(--green-d);}
.chain .node .sub{font-size:11.5px; color:#7d917f; margin:2px 0 6px;}
.chain .node .pv{font-size:11.5px; color:var(--ink2); font-family:Consolas,monospace; background:var(--soft); border-radius:6px; padding:4px 7px; margin-top:6px; word-break:break-all;}
.chain .arrow{flex:none; align-self:center; padding:0 6px; color:#9bb6a7; font-size:18px;}
.chain .node.cleaning{border-color:#cbb9d9; background:#fbf8ff;}
.chain .node.prep{border-color:#d9c98f;}
.chain .addnode{
  flex:none; width:120px; border:2px dashed var(--leaf); border-radius:12px;
  display:flex; align-items:center; justify-content:center; color:var(--green);
  font-size:13px; cursor:pointer; background:transparent; min-height:88px;
}

/* ---------- side panel (in-context reference) ---------- */
.sidepanel-bg{position:fixed; inset:0; background:rgba(15,40,28,.25); z-index:90;}
.sidepanel{
  position:fixed; top:0; right:0; bottom:0; width:min(560px,94vw); z-index:95;
  background:#fff; box-shadow:-8px 0 30px rgba(0,0,0,.2); display:flex; flex-direction:column;
}
.sidepanel .head{display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--line);}
.sidepanel iframe{flex:1; border:none; width:100%;}
.sidepanel .openext{font-size:12.5px;}

/* ---------- trial detail sections ---------- */
.runs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.runs a{font-size:12.5px; text-decoration:none; padding:4px 12px; border-radius:16px;
  background:var(--soft2); color:var(--green-d);}
.runs a.cur{background:var(--green); color:#fff;}
.kv{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:13.5px;}
.kv dt{color:#7d917f;} .kv dd{margin:0; color:var(--ink);}
.evgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px;}
.ev{background:var(--soft); border-radius:9px; padding:8px 11px;}
.ev .k{font-size:11.5px; color:#7d917f;}
.ev .v{font-size:15px; font-weight:600; color:var(--green-d);}
.ev .v small{font-weight:400; font-size:11px; color:#7d917f;}

.section-h{display:flex; align-items:center; justify-content:space-between; margin:18px 0 8px;}
.section-h h3{margin:0; font-size:15.5px; color:var(--green-d);}

.timeline{border-left:2px solid var(--soft2); margin-left:8px; padding-left:16px;}
.timeline .ti{position:relative; padding:6px 0;}
.timeline .ti:before{content:""; position:absolute; left:-21px; top:13px; width:9px; height:9px;
  border-radius:50%; background:var(--leaf); border:2px solid #fff;}
.timeline .ti .when{font-size:11.5px; color:#90a496;}

a.plain{color:var(--green-d);}
.spin{display:inline-block; width:16px; height:16px; border:2px solid var(--soft2);
  border-top-color:var(--green); border-radius:50%; animation:sp 0.8s linear infinite; vertical-align:-3px;}
@keyframes sp{to{transform:rotate(360deg);}}