:root{
  --fog-050:#f7f4ef;
  --paper-100:#f2e9de;
  --paper-200:#e6d7c6;
  --paper-300:#d6c2ae;
  --taupe-500:#988572;
  --taupe-600:#827566;
  --taupe-700:#6d6256;
  --ink-900:#2e2924;
  --ink-700:#554b40;
  --muted:#6f6256;
  --line:#dcccbc;
  --line-strong:#cbb8a4;
  --card:#fcf8f3;
  --card-strong:#f6eee4;
  --accent:#7d624a;
  --accent-press:#6d5744;
  --good:#2e8b59;
  --bad:#b84d3f;
  --warn:#be7f27;
  --idle:#4579a4;
  --font-zh:"PingFang SC","Noto Sans SC","Source Han Sans SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-en:"Avenir Next","SF Pro Display","Inter","Helvetica Neue",sans-serif;
  --font-mono:"SF Mono","Menlo","Consolas","Liberation Mono","Courier New",monospace;
  --shadow-soft:0 14px 36px rgba(73,56,40,.12);
  --shadow-strong:0 22px 56px rgba(73,56,40,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink-900);
  font-family:var(--font-zh);
  background:
    radial-gradient(1200px 700px at -5% -10%, rgba(130,117,102,.28) 0%, rgba(130,117,102,0) 60%),
    radial-gradient(900px 620px at 105% 0%, rgba(184,167,149,.24) 0%, rgba(184,167,149,0) 62%),
    linear-gradient(180deg, #f7f2ea 0%, #efe5d9 58%, #e8ddd1 100%);
}

.ambient{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      -35deg,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 8px,
      rgba(255,255,255,0) 8px,
      rgba(255,255,255,0) 24px
    );
  opacity:.45;
}

.wrap{
  position:relative;
  z-index:1;
  max-width:1240px;
  margin:26px auto;
  padding:0 18px 26px;
}

.top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.heroMain{
  flex:1;
  min-width:260px;
}

.eyebrow{
  margin:0 0 6px;
  color:var(--taupe-700);
  font-family:var(--font-en);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.title{
  margin:0;
  font-family:var(--font-en);
  font-size:34px;
  font-weight:540;
  letter-spacing:.01em;
}

.sub{
  margin-top:8px;
  color:var(--ink-700);
  font-size:15px;
  line-height:1.55;
}

.cardInset{
  min-width:min(100%,420px);
  max-width:520px;
}

.keypanel{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}

.keybox{
  display:flex;
  gap:10px;
  align-items:center;
}

.keybox input{flex:1}

.authHint{
  min-height:19px;
  color:var(--ink-700);
  font-size:13px;
  line-height:1.45;
}

.authHint.bad{color:var(--bad)}

.card{
  background:linear-gradient(180deg, rgba(252,248,243,.95), rgba(246,238,228,.93));
  border:1px solid var(--line);
  border-radius:20px;
  padding:16px;
  margin-bottom:14px;
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(1px);
}

.cardHighlight{
  border-color:var(--line-strong);
  box-shadow:var(--shadow-strong);
}

.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.row.compactRow{
  align-items:stretch;
}

.row.compactRow input{flex:1}

.h{
  font-weight:700;
  font-size:17px;
  letter-spacing:.01em;
}

.right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.lead{
  margin:0 0 12px;
  color:var(--ink-700);
  font-size:14px;
  line-height:1.55;
}

.divider{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
  margin:14px 0;
}

input[type="password"],
input[type="text"],
input[type="number"],
select,
input:not([type]),
textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  padding:11px 13px;
  background:rgba(255,255,255,.62);
  color:var(--ink-900);
  outline:none;
  font-family:inherit;
  font-size:14px;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

input::placeholder,
textarea::placeholder{
  color:rgba(85,75,64,.74);
}

input:focus,
textarea:focus{
  border-color:rgba(125,98,74,.75);
  box-shadow:0 0 0 3px rgba(125,98,74,.18);
  background:#fff;
}

button{
  border:1px solid var(--accent);
  background:linear-gradient(180deg, #8b6e55, #745a45);
  color:#fff;
  border-radius:13px;
  padding:10px 13px;
  font-weight:650;
  font-family:inherit;
  cursor:pointer;
  transition:filter .2s ease, transform .06s ease, background .2s ease;
}

button:hover{filter:brightness(1.05)}
button:active{transform:translateY(1px)}

.btn-secondary{
  display:inline-block;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.72);
  color:var(--ink-900);
  border-radius:13px;
  padding:8px 11px;
  font-weight:600;
  text-decoration:none;
}

.btn-secondary:hover{
  background:#fff;
  filter:none;
}

.btn-danger{
  border:1px solid rgba(184,77,63,.45);
  background:rgba(184,77,63,.12);
  color:#8c3327;
}

.btn-danger:hover{
  background:rgba(184,77,63,.2);
  filter:none;
}

.btn-secondary[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
}

.mono{
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:1.52;
  background:rgba(244,236,225,.86);
  border:1px solid var(--line);
  border-radius:13px;
  padding:11px 12px;
  white-space:pre-wrap;
  word-break:break-word;
  min-height:46px;
}

.installForm{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-bottom:10px;
}

.installPolicy{
  display:grid;
  gap:6px;
  margin:10px 0 14px;
  padding:12px 14px;
  border:1px solid rgba(125,98,74,.18);
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(246,238,228,.88)),
    radial-gradient(circle at top right, rgba(125,98,74,.08), transparent 58%);
}

.installPolicyTitle,
.installGuideTitle{
  font-weight:700;
  font-size:13px;
  color:var(--ink-800);
}

.installPolicyLine,
.installGuideLine{
  color:var(--ink-700);
  font-size:13px;
  line-height:1.55;
}

.installCmds{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:10px;
}

.installItem{
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.52);
  padding:10px;
}

.installHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.installHead .label{
  font-weight:700;
  font-size:14px;
}

.installGuide{
  display:grid;
  gap:5px;
  margin-bottom:8px;
  padding:10px 12px;
  border:1px dashed rgba(125,98,74,.28);
  border-radius:14px;
  background:rgba(246,238,228,.76);
}

.machines{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.adbLayout{
  display:grid;
  grid-template-columns:minmax(320px, 1.1fr) minmax(360px, 1fr);
  gap:14px;
}

.adbVisual,
.adbBlock{
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.58);
  padding:12px;
}

.adbToolbar{
  display:flex;
  gap:8px;
  margin-bottom:10px;
}

.adbToolbar select{
  flex:1;
}

.adbShotFrame{
  margin-top:10px;
  min-height:320px;
  border:1px dashed var(--line-strong);
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(246,238,228,.82)),
    repeating-linear-gradient(
      45deg,
      rgba(125,98,74,.05) 0px,
      rgba(125,98,74,.05) 10px,
      rgba(255,255,255,0) 10px,
      rgba(255,255,255,0) 24px
    );
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.adbShotFrame img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.adbControls{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.adbQuickGrid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:8px;
}

.adbBlock .mono{
  margin-top:10px;
}

.machine{
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.6);
  overflow:hidden;
}

.machineTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  background:linear-gradient(180deg, rgba(246,236,224,.78), rgba(250,244,236,.7));
}

.machineExpanded .machineTop{
  border-bottom:1px solid var(--line);
}

.machineTop .left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.machineTop .right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.machineName{
  padding:4px 10px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:rgba(255,255,255,.75);
  font-family:var(--font-mono);
  font-size:12.5px;
  cursor:pointer;
}

.machineNameWrap{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.lastSeen{
  color:var(--muted);
  font-size:12px;
}

.machineBody{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:12px;
}

.machineBody[hidden]{
  display:none !important;
}

.panel{
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.57);
  padding:10px;
}

.panelTitle{
  margin-bottom:8px;
  font-weight:700;
  font-size:14px;
}

.diagBox{
  margin:0;
  min-height:160px;
  max-height:360px;
  overflow:auto;
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.72);
  white-space:pre-wrap;
  word-break:break-word;
  font-size:12px;
  line-height:1.45;
}

.kv{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:8px 10px;
  font-size:13px;
}

.k{color:var(--ink-700)}
.v{
  min-width:0;
  word-break:break-word;
}

.vline{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.vtxt{
  flex:1;
  min-width:0;
}

.copyMini{
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.82);
  color:var(--ink-700);
  border-radius:10px;
  padding:3px 7px;
  font-size:11px;
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
}

.copyMini:hover{
  background:#fff;
  filter:none;
}

.copyMini.copyOk{
  color:var(--good);
  border-color:rgba(46,139,89,.45);
}

.copyMini.copyBad{
  color:var(--bad);
  border-color:rgba(184,77,63,.45);
}

.miniActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.dot{
  width:8px;
  height:8px;
  border-radius:99px;
  background:#9a8a7a;
}

.dot.good{background:var(--good)}
.dot.bad{background:var(--bad)}
.dot.warn{background:var(--warn)}
.dot.idle{background:var(--idle)}

.cmd{
  display:grid;
  grid-template-columns:minmax(180px,220px) minmax(0,1fr) auto;
  align-items:start;
  gap:8px;
  margin-bottom:10px;
}

.cmd #cmdDevice{max-width:220px}
.cmd #cmdText{
  width:100%;
  min-height:96px;
  resize:vertical;
}

.table{
  width:100%;
  border-collapse:collapse;
}

.table th,
.table td{
  padding:10px 8px;
  border-bottom:1px solid var(--line);
  font-size:13px;
}

.table th{
  color:var(--ink-700);
  font-weight:620;
  text-align:left;
}

.tablewrap{
  overflow:auto;
  border-radius:12px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.7);
  font-size:12px;
}

.terminalMeta{
  display:grid;
  grid-template-columns:1.8fr .8fr 1fr;
  gap:10px;
  margin-bottom:10px;
}

.terminalMetaItem label{
  display:block;
  margin-bottom:5px;
  color:var(--ink-700);
  font-size:12px;
}

.terminalWindowId{
  min-height:42px;
  display:flex;
  align-items:center;
}

.terminalInputRow{
  margin-bottom:10px;
}

.terminalInputRow textarea{
  width:100%;
  min-height:140px;
  resize:vertical;
}

.terminalActions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.terminalLog{
  max-height:58vh;
  overflow:auto;
}

.terminalLogBad{
  border-color:rgba(184,77,63,.72);
}

.loopbackBadge{
  display:inline-block;
  margin-top:8px;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(46,139,89,.12);
  border:1px solid rgba(46,139,89,.35);
  color:#1a6b3f;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
}

.keypanelCollapsed{
  opacity:.5;
  max-height:48px;
  overflow:hidden;
  transition:opacity .3s ease, max-height .3s ease;
}

.keypanelCollapsed:hover{
  opacity:1;
  max-height:200px;
}

.muted-ts{
  color:var(--muted);
  font-size:12px;
  font-family:var(--font-mono);
}

.autoRefreshLabel{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  color:var(--ink-700);
  cursor:pointer;
}

.autoRefreshLabel input{width:auto}

@media (max-width:1020px){
  .top{flex-direction:column}
  .cardInset{max-width:none;width:100%}
  .adbLayout{grid-template-columns:1fr}
  .machineBody{grid-template-columns:1fr}
  .terminalMeta{grid-template-columns:1fr}
}

@media (max-width:760px){
  .wrap{
    margin:16px auto;
    padding:0 12px 18px;
  }
  .title{
    font-size:28px;
  }
  .cmd{
    grid-template-columns:1fr;
  }
  .adbToolbar,
  .adbQuickGrid{
    grid-template-columns:1fr;
    display:grid;
  }
  .cmd #cmdDevice{
    max-width:none;
  }
  .kv{
    grid-template-columns:100px 1fr;
  }
  .vline{
    flex-direction:column;
    align-items:flex-start;
  }
  .machineTop{
    flex-direction:column;
    align-items:flex-start;
  }
  .machineTop .right{
    justify-content:flex-start;
  }
}