:root{
  --bg:#050708;
  --panel:#0b1114;
  --panel-2:#10171b;
  --line:#203238;
  --line-hot:#2bdad2;
  --text:#edf9fb;
  --muted:#8ca2a9;
  --cyan:#36f0e6;
  --teal:#12bfb8;
  --amber:#f6b24a;
  --rose:#e36b9b;
  --green:#55d688;
  --red:#f05f63;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  background:
    linear-gradient(115deg,rgba(54,240,230,.10),transparent 28%),
    radial-gradient(circle at 78% 10%,rgba(246,178,74,.10),transparent 24%),
    radial-gradient(circle at 28% 90%,rgba(227,107,155,.10),transparent 28%),
    var(--bg);
  color:var(--text);
  font-family:Inter,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  letter-spacing:0;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(54,240,230,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(54,240,230,.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.58),transparent 78%);
}

a{color:var(--cyan);text-decoration:none}
button,input,textarea,select{font:inherit}

.shell{min-height:100vh;display:flex;flex-direction:column}

.topbar{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 24px;
  border-bottom:1px solid rgba(54,240,230,.18);
  background:rgba(5,7,8,.86);
  backdrop-filter:blur(18px);
  position:sticky;
  top:0;
  z-index:10;
}

.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand img{width:148px;height:auto;display:block}
.brand-sub{color:var(--muted);font-size:13px;white-space:nowrap}

.nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nav a,.chip{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border:1px solid var(--line);
  background:rgba(16,23,27,.72);
  color:var(--text);
  border-radius:999px;
  font-size:13px;
}

.chip.ok{border-color:rgba(85,214,136,.45);color:#b9ffd2}
.chip.warn{border-color:rgba(246,178,74,.5);color:#ffdda1}

.layout{
  width:min(1520px,100%);
  margin:0 auto;
  padding:22px;
  display:grid;
  grid-template-columns:minmax(300px,380px) minmax(0,1fr) minmax(300px,390px);
  gap:16px;
}

.layout.two{grid-template-columns:minmax(320px,430px) minmax(0,1fr)}
.stack{display:flex;flex-direction:column;gap:16px}

.panel{
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(16,23,27,.90),rgba(8,13,15,.92));
  border-radius:8px;
  box-shadow:0 18px 60px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.045);
}

.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 16px 0;
}

.panel-title{margin:0;font-size:15px;font-weight:800;color:#f5feff}
.panel-body{padding:16px}

.headline{margin:0 0 8px;font-size:28px;line-height:1.18;font-weight:900}
.subtext{margin:0;color:var(--muted);font-size:14px;line-height:1.6}

.textarea,input{
  width:100%;
  border:1px solid #294047;
  background:#070c0e;
  color:var(--text);
  border-radius:8px;
  outline:none;
}

.textarea{
  min-height:154px;
  resize:vertical;
  padding:13px;
  line-height:1.55;
}

input{height:42px;padding:0 12px}

.textarea:focus,input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(54,240,230,.10)}

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

.btn{
  min-height:40px;
  border:1px solid rgba(54,240,230,.38);
  background:#0c171a;
  color:var(--text);
  border-radius:8px;
  padding:9px 13px;
  cursor:pointer;
  font-weight:800;
}

.btn.primary{
  border-color:rgba(54,240,230,.72);
  background:linear-gradient(135deg,#16d9d2,#f6b24a);
  color:#031112;
}

.btn.ghost{background:transparent;color:var(--muted)}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.56;cursor:not-allowed}

.preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}
.preset-grid .btn{font-size:13px;text-align:left;justify-content:flex-start}

.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.metric{
  border:1px solid var(--line);
  background:#071014;
  border-radius:8px;
  padding:12px;
  min-width:0;
}
.metric span{display:block;color:var(--muted);font-size:12px}
.metric b{display:block;margin-top:4px;font-size:28px;line-height:1;color:var(--cyan)}
.metric:nth-child(2) b{color:var(--amber)}
.metric:nth-child(3) b{color:var(--green)}

.list{display:flex;flex-direction:column;gap:8px}
.row{
  border:1px solid rgba(32,50,56,.9);
  background:#071014;
  border-radius:8px;
  padding:11px;
}
.row-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.row h3{margin:0;font-size:15px;line-height:1.3}
.row p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}

.badge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(54,240,230,.42);
  color:#adfffa;
  background:rgba(54,240,230,.08);
  font-size:12px;
  white-space:nowrap;
}

.badge.amber{border-color:rgba(246,178,74,.55);color:#ffdda1;background:rgba(246,178,74,.08)}
.badge.green{border-color:rgba(85,214,136,.55);color:#b9ffd2;background:rgba(85,214,136,.08)}
.badge.red{border-color:rgba(240,95,99,.55);color:#ffc5c7;background:rgba(240,95,99,.08)}

.kv{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;padding:7px 0;border-bottom:1px solid rgba(32,50,56,.72)}
.kv:last-child{border-bottom:0}
.kv span:first-child{color:var(--muted)}
.kv span:last-child{overflow-wrap:anywhere}

.empty,.loading,.error{
  border:1px dashed rgba(54,240,230,.26);
  border-radius:8px;
  padding:18px;
  color:var(--muted);
  line-height:1.6;
}
.error{border-color:rgba(240,95,99,.45);color:#ffc5c7}

pre{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  max-height:540px;
  overflow:auto;
  border:1px solid var(--line);
  background:#05090a;
  border-radius:8px;
  padding:13px;
  color:#d8fffb;
}

.task-list{display:flex;flex-direction:column;gap:8px;max-height:560px;overflow:auto}
.task-item{cursor:pointer}
.task-item:hover{border-color:rgba(54,240,230,.56)}

@media (max-width:1180px){
  .layout,.layout.two{grid-template-columns:1fr}
  .topbar{position:relative}
}

@media (max-width:680px){
  .topbar{align-items:flex-start;flex-direction:column;padding:14px}
  .brand img{width:128px}
  .brand-sub{white-space:normal}
  .layout{padding:12px}
  .metric-grid,.preset-grid{grid-template-columns:1fr}
  .headline{font-size:23px}
}