:root { font-family: Inter,"Microsoft YaHei UI","PingFang SC",sans-serif; color:#253f57; background:#edf4f8; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 88% 3%,rgba(70,148,219,.16),transparent 34%),radial-gradient(circle at 8% 98%,rgba(60,190,166,.11),transparent 32%),#edf4f8; }
button,input { font:inherit; }
button { cursor:pointer; }
.shell { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:28px 0 56px; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.topbar h1 { margin:4px 0 0; color:#173c5e; font-size:25px; }
.eyebrow { color:#4385bd; font-size:10px; font-weight:900; letter-spacing:2.5px; }
.session { display:flex; align-items:center; gap:12px; color:#648096; font-size:13px; }
.card { border:1px solid rgba(186,207,224,.8); border-radius:18px; background:rgba(255,255,255,.9); box-shadow:0 18px 50px rgba(40,76,108,.10); backdrop-filter:blur(20px); }
.login { width:min(440px,100%); margin:9vh auto 0; padding:32px; }
.brand { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.logo { width:56px; height:56px; display:grid; place-items:center; color:white; border-radius:15px; background:linear-gradient(145deg,#2d84d4,#3db49f); box-shadow:0 10px 22px rgba(45,132,212,.22); font-weight:900; }
h2 { margin:0; color:#214764; font-size:20px; }
.brand p,.section-head p { margin:5px 0 0; color:#7c92a4; font-size:12px; }
label { display:grid; gap:7px; color:#526f85; font-size:12px; font-weight:700; }
.login form { display:grid; gap:16px; }
input { width:100%; height:44px; padding:0 12px; color:#254964; border:1px solid #c4d6e4; border-radius:9px; outline:none; background:#f9fcfe; }
input:focus { border-color:#5b9bd5; box-shadow:0 0 0 3px rgba(63,139,207,.12); }
button { min-height:38px; padding:0 16px; border-radius:9px; border:0; font-weight:750; }
.primary { color:white; background:linear-gradient(135deg,#3187d4,#36ae9a); box-shadow:0 7px 16px rgba(44,132,191,.18); }
.primary:hover { filter:brightness(1.04); }
.ghost { color:#3d759f; border:1px solid #c8dbe9; background:rgba(248,252,255,.85); }
.message { min-height:19px; margin:12px 0 0; color:#c24e59; font-size:12px; line-height:1.6; }
.summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px; }
.stat { display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border:1px solid rgba(189,210,227,.78); border-radius:14px; background:rgba(255,255,255,.78); }
.stat span { color:#6e879a; font-size:13px; }.stat strong { color:#2178bd; font-size:29px; }
.devices-card { padding:24px; }
.section-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:15px; }
.device-list { display:grid; gap:11px; }
.device { display:grid; grid-template-columns:minmax(280px,1.8fr) minmax(140px,.8fr) minmax(140px,.8fr) auto; align-items:center; gap:16px; padding:15px 16px; border:1px solid #dae6ef; border-radius:12px; background:#fbfdff; }
.device-code { display:block; margin-top:5px; overflow:hidden; color:#6d8292; font:11px/1.4 Consolas,monospace; text-overflow:ellipsis; white-space:nowrap; }
.meta { color:#738b9d; font-size:11px; line-height:1.65; }.meta strong { display:block; color:#385d79; font-size:12px; }
.badge { display:inline-flex; padding:4px 8px; border-radius:999px; font-size:10px; font-weight:800; }
.badge.pending { color:#9b681e;background:#fff4da; }.badge.approved { color:#176e9f;background:#e5f5ff; }.badge.activated { color:#1d7a5e;background:#e5f8f0; }.badge.blocked,.badge.rejected { color:#a84752;background:#ffecef; }
.actions { display:flex; justify-content:flex-end; gap:7px; flex-wrap:wrap; }.actions button { min-height:32px; padding:0 10px; font-size:11px; }
.danger { color:#a53e49; border:1px solid #f0cbd0; background:#fff4f5; }
.empty { padding:55px 20px; color:#8196a7; text-align:center; font-size:13px; }
dialog { width:min(570px,calc(100% - 32px)); padding:0; border:1px solid #c9dbe8; border-radius:16px; color:#35536b; box-shadow:0 24px 80px rgba(23,56,86,.28); }
dialog::backdrop { background:rgba(28,51,71,.35); backdrop-filter:blur(4px); }
dialog form { display:grid; gap:15px; padding:24px; }
dialog header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:2px; }
.icon-button { min-width:34px; min-height:34px; padding:0; color:#7190a7; background:#edf4f8; font-size:20px; }
.row { display:grid; grid-template-columns:1fr 1.4fr; gap:12px; }
.hint { margin:-3px 0 0; color:#7a91a3; font-size:11px; line-height:1.65; }
dialog footer { display:flex; justify-content:flex-end; gap:9px; padding-top:4px; }
@media(max-width:760px){.shell{width:min(100% - 22px,1180px)}.summary-grid{grid-template-columns:1fr}.device{grid-template-columns:1fr}.actions{justify-content:flex-start}.row{grid-template-columns:1fr}}

.channels-dialog { width:min(760px,calc(100% - 32px)); }
.channels-panel { display:grid; gap:14px; padding:24px; }
.channels-panel > header { display:flex; justify-content:space-between; align-items:flex-start; }
.channels-panel > footer { display:flex; justify-content:flex-end; }
.dialog-subtitle { max-width:620px; margin:5px 0 0; overflow:hidden; color:#7890a2; font:11px/1.5 Consolas,monospace; text-overflow:ellipsis; white-space:nowrap; }
.admin-channel-list { display:grid; gap:9px; max-height:420px; overflow:auto; }
.admin-channel-row { display:grid; grid-template-columns:minmax(135px,1fr) 205px minmax(200px,auto); align-items:center; gap:10px; padding:12px; border:1px solid #d9e6ef; border-radius:11px; background:rgba(249,252,254,.9); }
.admin-channel-row.paused { border-color:#d7dde2; background:rgba(243,246,248,.9); }
.admin-channel-row.paused .admin-channel-info { opacity:.62; filter:grayscale(.55); }
.admin-channel-info { min-width:0; }
.admin-channel-info strong,.admin-channel-info small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.admin-channel-info strong { color:#2b5878; font-size:13px; }
.admin-channel-info small { margin-top:4px; color:#7b8f9f; font-size:10px; }
.admin-channel-row input { height:38px; }
.admin-channel-row button { min-height:36px; padding:0 10px; font-size:11px; }
.channel-row-actions { display:flex; justify-content:flex-end; gap:6px; }
.channel-row-actions button { flex:1 1 auto; white-space:nowrap; }
.channel-row-message { grid-column:1 / -1; min-height:14px; color:#66839a; font-size:10px; }
.channel-admin-empty { padding:28px 12px; color:#8095a5; text-align:center; border:1px dashed #cfdee9; border-radius:10px; font-size:12px; }
@media(max-width:760px){.admin-channel-row{grid-template-columns:1fr}.channel-row-actions{justify-content:stretch}.channel-row-message{grid-column:1}}

.channel-create-bar { display:grid; grid-template-columns:minmax(220px,1fr) auto; align-items:end; gap:10px; padding:12px; border:1px solid #cfe2ef; border-radius:11px; background:linear-gradient(135deg,rgba(235,246,255,.92),rgba(235,251,247,.92)); }
.channel-create-bar input { height:38px; }
.channel-create-bar button { min-height:38px; white-space:nowrap; }
@media(max-width:760px){.channel-create-bar{grid-template-columns:1fr}}