:root { --bg:#11161b; --panel:#182128; --line:#2b3841; --text:#e8f0f3; --muted:#94a6af; --blue:#3397e7; --green:#58c673; --amber:#eeae42; --red:#b95050; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); font:14px Arial,"Microsoft YaHei",sans-serif; }
aside { position:fixed; width:220px; inset:0 auto 0 0; padding:24px 14px; background:#0d1216; border-right:1px solid var(--line); display:flex; flex-direction:column; } .brand { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:700; padding:0 12px 34px; } .brand-mark { display:grid; place-items:center; width:31px; height:31px; color:#071017; background:var(--amber); border-radius:7px; } nav { display:grid; gap:5px; } nav button { color:var(--muted); padding:12px; border:0; border-radius:5px; text-align:left; background:transparent; cursor:pointer; font:inherit; } nav button.active { background:#21313d; color:white; border-left:3px solid var(--blue); padding-left:9px; } .server { margin-top:auto; display:flex; gap:8px; align-items:center; color:var(--muted); padding:12px; font-size:12px; } .dot,.status i { width:8px; height:8px; border-radius:50%; background:#6b7880; } .dot,.status.online i { background:var(--green); }
main { margin-left:220px; padding:34px; max-width:1800px; } header { display:flex; justify-content:space-between; align-items:end; margin-bottom:24px; } h1 { font-size:27px; margin:4px 0 0; } h2 { margin:0; font-size:16px; } h3 { margin:18px 0 7px; font-size:13px; color:var(--muted); } .eyebrow,#updated { margin:0; color:var(--muted); font-size:12px; }
.stats { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:14px; margin-bottom:14px; } .stat,.panel { background:var(--panel); border:1px solid var(--line); border-radius:6px; } .stat { padding:18px; } .stat b { display:block; font-size:25px; margin:7px 0 3px; } .stat span { color:var(--muted); } .panel { overflow:hidden; margin-bottom:14px; } .panel-title { display:flex; justify-content:space-between; align-items:center; padding:17px 18px; border-bottom:1px solid var(--line); }.panel-title span { color:var(--muted); }
.toolbar { display:flex; gap:9px; align-items:center; padding:12px 16px; flex-wrap:wrap; color:var(--muted); }.toolbar button,.form-panel button,.small-button,.actions button,.rig-config button { background:var(--blue); color:white; border:0; border-radius:4px; padding:8px 10px; cursor:pointer; }.toolbar .danger-button,.danger-button { background:var(--red); } .toolbar span { margin-right:auto; }
table { width:100%; border-collapse:collapse; } th { text-align:left; color:var(--muted); font-size:11px; font-weight:500; padding:13px 14px; background:#151e24; } td { padding:14px; border-top:1px solid var(--line); vertical-align:top; } .status { display:inline-flex; align-items:center; gap:7px; } .gpu { font-weight:600; }.sub { display:block; margin-top:3px; color:var(--muted); font-size:12px; }.temp.hot { color:#ff845d; }.empty { text-align:center; padding:36px; color:var(--muted); }.actions { min-width:190px; }.actions button { padding:5px 7px; margin:2px; font-size:11px; }.actions button:disabled { opacity:.35; cursor:not-allowed; }
.hidden { display:none !important; }.config-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.form-panel { padding:18px; }.form-panel h2 { margin-bottom:14px; }.form-panel form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.form-panel input,.form-panel select,.rig-config input,.rig-config select { width:100%; min-width:0; background:#11181d; color:var(--text); border:1px solid var(--line); border-radius:4px; padding:10px; }.form-panel button { grid-column:1 / -1; }.config-list,.template-list { padding:16px 18px; color:var(--muted); line-height:1.6; }.config-list b,.template-list b { color:var(--text); }.rig-config { display:grid; grid-template-columns:1.25fr 1fr 1fr 1fr 75px; gap:9px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }.template-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }.icon-button { width:29px; height:29px; border-radius:4px; border:1px solid var(--line); background:#11181d; color:#e99191; cursor:pointer; }.log-list { padding:8px 18px; }.log-row { display:grid; grid-template-columns:180px 140px 1fr; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); color:var(--muted); }.log-row b { color:var(--text); }.settings-panel { padding-top:18px; }.settings-panel .danger-button { margin:0 18px 18px; padding:9px 12px; border:0; border-radius:4px; color:white; cursor:pointer; }
.modal { position:fixed; inset:0; display:grid; place-items:center; background:#0009; z-index:5; }.login-box { width:min(380px,calc(100% - 30px)); background:var(--panel); border:1px solid var(--line); border-radius:7px; padding:25px; }.login-box p { color:var(--muted); }.login-box form { display:grid; gap:12px; }.login-box input { background:#11181d; color:var(--text); border:1px solid var(--line); border-radius:4px; padding:12px; }.login-box button { background:var(--blue); color:white; border:0; border-radius:4px; padding:12px; cursor:pointer; }.login-box #login-error { color:#ff806c; min-height:18px; }
@media(max-width:1000px){ .config-grid{grid-template-columns:1fr}.rig-config{grid-template-columns:1fr 1fr;}.rig-config button{grid-column:2}.log-row{grid-template-columns:1fr}.toolbar span{width:100%;order:3}.table-wrap{overflow:auto}table{min-width:1300px} } @media(max-width:800px){ aside{position:static;width:auto;padding:12px}.brand{padding:0 5px 12px}.server{display:none}nav{display:flex;overflow:auto}main{margin:0;padding:18px}.stats{grid-template-columns:repeat(2,1fr)} }