:root { --bg:#0d1117; --panel:#171e27; --panel2:#202a36; --line:#2b3949; --text:#e7edf4; --muted:#8d9bad; --gold:#e6b451; --green:#42d3aa; --red:#ff7069; --blue:#64b4ff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.5 "Microsoft YaHei",system-ui,sans-serif; }
.hidden { display:none !important; } .muted,.hint { color:var(--muted); } .mono { font-family:Consolas,monospace; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 50% 0,#202a36 0,#0d1117 50%); }
.login-panel,.panel { width:min(100%,720px); background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 50px #0006; }
.login-panel { max-width:410px; padding:30px; } .login-panel h1 { margin:4px 0 8px; font-size:26px; color:var(--gold); }
.eyebrow { color:var(--gold); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; } label { display:block; margin:18px 0 6px; color:var(--muted); font-size:12px; }
input,select { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:8px; background:#10161e; color:var(--text); outline:none; font:inherit; } input:focus,select:focus { border-color:var(--gold); }
.button { border:1px solid var(--line); border-radius:8px; background:var(--panel2); color:var(--text); padding:10px 14px; cursor:pointer; font:inherit; } .button:hover { border-color:var(--gold); color:var(--gold); }
.button.primary { background:var(--gold); color:#191307; border-color:var(--gold); font-weight:700; } .button.success { color:var(--green); border-color:#318d76; } .button.danger { color:var(--red); border-color:#85443f; } .button.ghost { background:transparent; } .button.small { padding:6px 10px; font-size:12px; } .button:disabled { opacity:.45; cursor:not-allowed; }
.login-panel .button { width:100%; margin-top:16px; } .message { min-height:20px; margin-top:12px; color:var(--red); font-size:13px; } .message.ok { color:var(--green); }
.card-shop-link { display:inline-block;text-align:center;text-decoration:none;white-space:nowrap;flex-shrink:0; }
.login-panel .card-shop-link { display:block;margin-top:10px; }
.topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:16px; padding:12px max(18px,calc((100% - 1120px)/2)); background:#121820ee; border-bottom:1px solid var(--line); backdrop-filter:blur(8px); }
.brand { color:var(--gold); font-weight:700; font-size:16px; } .brand span { color:var(--muted); font-weight:400; font-size:12px; margin-left:7px; } .top-actions { margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.badge { display:inline-block; padding:4px 9px; border:1px solid #886a2d; border-radius:999px; color:var(--gold); font:12px Consolas,monospace; } .muted-badge { color:var(--muted); border-color:var(--line); font-family:inherit; }
.content { width:min(100% - 32px,900px); margin:24px auto; } .notice { padding:10px 12px; border:1px solid #8a473f; color:var(--red); background:#321c1b; border-radius:8px; margin-bottom:14px; }
.panel { padding:22px; margin-bottom:16px; } .panel-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } h2 { margin:3px 0 0; font-size:20px; }
.segmented { display:flex; gap:8px; padding:5px; background:#10161e; border:1px solid var(--line); border-radius:9px; } .seg { flex:1; padding:9px; border:1px solid transparent; border-radius:6px; color:var(--muted); background:transparent; cursor:pointer; font:inherit; } .seg.active { border-color:#90702e; background:#3a2c14; color:var(--gold); }
.account-heading { display:flex; justify-content:space-between; align-items:end; gap:12px; margin-top:6px; } .account-heading label { margin-bottom:0; } .account-heading .hint { margin:3px 0 0; font-size:12px; } .account-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px; } .account-item { display:grid; gap:6px; padding:12px; border:1px solid var(--line); border-radius:8px; background:#10161e; } .account-item span { color:var(--muted); font-size:12px; }
.actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); } .actions .button:first-child { min-width:100px; } .row { display:flex; flex-wrap:wrap; gap:6px; }
.actions .add-account-button { margin-left:auto; }
.result-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .result-grid div { padding:12px; background:#10161e; border:1px solid var(--line); border-radius:8px; } .result-grid span,.result-grid strong { display:block; } .result-grid strong { margin-top:5px; } .room-list { margin-top:12px; color:var(--muted); font-family:Consolas,monospace; white-space:pre-wrap; }
.admin-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .admin-form label { margin:12px 0 0; } .admin-form input,.admin-form select { margin-top:5px; } .compact-input { width:100px; } .code-output { display:block; width:100%; min-height:110px; margin-top:12px; padding:10px; resize:vertical; color:var(--green); background:#10161e; border:1px solid var(--line); border-radius:8px; font:13px/1.6 Consolas,monospace; } .list-tools { display:flex; gap:8px; margin-top:12px; } .list-tools input { max-width:300px; } .pager { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:12px; } th,td { padding:9px 8px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; } th { color:var(--muted); font-size:12px; font-weight:500; }
.line-setting { display:flex; align-items:end; gap:12px; max-width:520px; } .line-setting label { flex:1; margin:10px 0 0; } .line-setting input { margin-top:5px; }
@media (max-width:620px) { .topbar { align-items:flex-start; flex-wrap:wrap; } .top-actions { width:100%; margin-left:0; justify-content:flex-start; } .content { width:min(100% - 20px,900px); margin:12px auto; } .panel { padding:16px; } .account-grid,.result-grid { grid-template-columns:1fr; } .actions .button { flex:1 1 42%; } }
@media (max-width:620px) { .admin-form { grid-template-columns:1fr 1fr; } .list-tools { flex-wrap:wrap; } .list-tools select,.list-tools input { max-width:none; flex:1 1 100%; } .compact-input { flex:1 1 100%; width:auto; } }
@media (max-width:620px) { .line-setting { align-items:stretch; flex-direction:column; gap:8px; } }

.operator-content { width:min(100% - 32px,1280px); }
.quota-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px; }
.quota-card { padding:18px 22px;border:1px solid var(--line);border-radius:12px;background:var(--panel);display:flex;flex-direction:column;gap:6px; }
.quota-card:last-child { grid-column:1 / -1; }
.stats-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:-8px 0 18px; }
.quota-card strong { font-size:24px;color:var(--gold);font-weight:600; }
.accounts-panel { width:100%;max-width:none; }
.table-scroll { overflow:auto; } #accountTable { width:100%;border-collapse:collapse; } #accountTable input[type=checkbox] { width:16px;height:16px;accent-color:var(--gold); }
#accountTable td .hint { white-space:normal;max-width:300px;font-size:12px; } .task-message { white-space:normal;min-width:280px;max-width:440px;line-height:1.45;vertical-align:top; } .task-status { color:var(--muted); } .task-status.active { color:var(--green); } .empty { padding:48px;text-align:center;color:var(--muted); }
.task-runtime { margin-top:5px; } .task-runtime strong { display:block;color:var(--green);font-size:13px;font-weight:600; } .runtime-duration { display:flex;align-items:baseline;gap:7px;margin-top:4px;color:var(--muted);font-size:12px; } .runtime-duration b { color:var(--gold);font-size:15px;font-weight:600; } .runtime-facts { display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:3px;color:var(--muted);font-size:12px; } .runtime-facts span { white-space:normal; }
dialog { width:min(620px,calc(100% - 24px));max-height:90vh;overflow:auto;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text); } dialog::backdrop { background:#000a; } dialog .account-item { margin-top:14px; } dialog .account-item span { display:block;margin-bottom:6px;color:var(--gold); } dialog .account-item input { margin-bottom:8px; }
.stats-detail { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px; }
.stats-detail div { padding:14px;border:1px solid var(--line);border-radius:8px;background:#10161e; }
.stats-detail span,.stats-detail strong { display:block; }.stats-detail span { color:var(--muted);font-size:12px; }.stats-detail strong { margin-top:5px;color:var(--gold);font-size:20px; }
.valuable-items { display:grid;gap:8px; } .valuable-item { display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:10px 12px;border:1px solid var(--line);border-radius:8px; } .valuable-item b { color:var(--gold);white-space:nowrap; }
@media(max-width:700px){.quota-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.quota-card{min-width:0;padding:12px 10px}.quota-card strong{font-size:20px;overflow-wrap:anywhere}.panel-title{flex-wrap:wrap}}
@media(max-width:620px){.stats-grid{grid-template-columns:1fr;gap:8px;margin-top:-2px}.stats-grid .quota-card{padding:12px 10px}}
@media(max-width:620px){
  #appView .topbar{align-items:center;flex-wrap:nowrap;gap:8px;padding:12px 10px;}
  #appView .brand{flex:0 0 auto;white-space:nowrap;}
  #appView .top-actions{width:auto;min-width:0;flex:1;margin-left:auto;flex-wrap:nowrap;justify-content:flex-end;gap:6px;}
  #codeBadge{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #logoutBtn{flex:0 0 auto;padding:6px 8px;white-space:nowrap;}
  #appView .card-shop-link{padding:6px 8px;}
  input,select,textarea{font-size:16px;}
  .operator-content{width:100%;margin:0 auto;}
  .accounts-panel{padding:12px 10px;border-left:0;border-right:0;border-radius:0;}
  .accounts-panel .actions{margin:0 -2px 12px;padding:0 0 12px;border-top:0;border-bottom:1px solid var(--line);gap:6px;}
  .accounts-panel .actions .button{flex:1 1 calc(50% - 6px);min-width:0;padding:9px 7px;font-size:12px;}
  .accounts-panel .actions .add-account-button{flex:1 1 100%;margin-left:0;}
  .table-scroll{overflow:visible;}
  #accountTable,#accountTable tbody{display:block;width:100%;}
  #accountTable thead{display:none;}
  #accountTable tr{position:relative;display:grid;gap:8px;margin:0 0 10px;padding:14px 12px 12px;border:1px solid var(--line);border-radius:10px;background:#10161e;box-shadow:0 4px 16px #0003;}
  #accountTable td{display:block;padding:0;border:0;white-space:normal;text-align:left;}
  #accountTable td:nth-child(1):not(.empty){position:absolute;top:14px;right:12px;z-index:1;}
  #accountTable td:nth-child(2){padding-right:30px;font-size:15px;font-weight:600;color:var(--text);}
  #accountTable td:nth-child(3){color:var(--muted);font-size:12px;}
  #accountTable td:nth-child(3) .hint{display:inline;margin-left:8px;}
  #accountTable td:nth-child(4){margin-top:2px;}
  #accountTable td:nth-child(5){min-width:0;max-width:none;}
  #accountTable td:nth-child(6) .row{display:flex;gap:6px;}
  #accountTable td:nth-child(6) .button{flex:1;}
  #accountTable .task-message{min-width:0;max-width:none;}
  #accountTable .empty{padding:28px 12px;text-align:center;white-space:normal;}
}