.portal-shell { max-width: 1560px; height: 100vh; display:flex; flex-direction:column; }
.portal-app { min-height:0; display:flex; flex-direction:column; flex:1; }
.portal-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin:20px 0 14px; flex:0 0 auto; }
.portal-heading h1 { margin:7px 0 0; font-size:28px; }.heading-actions,.toolbar-group,.toolbar-actions,.table-tools { display:flex; align-items:center; gap:10px; }.sync-pill { padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; }.sync-pill.syncing { background:#fff3d6;color:#986510; }.sync-pill.synced { background:#e6f6ef;color:#16815e; }.sync-pill.failed { background:#fff0f0;color:var(--danger); }
.portal-toolbar { display:flex; align-items:end; justify-content:space-between; gap:18px; padding:12px 16px; margin-bottom:12px; flex:0 0 auto; }.portal-toolbar label { display:grid; gap:5px; color:var(--muted); font-weight:600; min-width:180px; }.portal-toolbar select,.portal-toolbar input { border:1px solid var(--line); border-radius:6px; padding:8px 10px; color:var(--ink); background:#fff; min-width:170px; }.portal-toolbar .search-label { min-width:280px; }.check-label { display:flex !important; align-items:center; min-width:auto !important; white-space:nowrap; }.check-label input { min-width:auto; }.run-strip { display:grid; grid-template-columns:1.4fr 1fr 1fr .8fr 1fr; gap:1px; overflow:hidden; margin-bottom:12px; flex:0 0 auto; background:var(--line); }.run-strip>div { background:#fff; padding:11px 14px; min-width:0; }.strip-label { display:block;color:var(--muted);font-size:12px;margin-bottom:4px; }.run-strip strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.new-data-banner { display:flex; align-items:center; justify-content:center; gap:14px; background:#e7f5f6; color:var(--primary-dark); padding:7px; border-radius:6px; margin-bottom:10px; flex:0 0 auto; }
.portal-grid { margin-bottom:12px; grid-template-columns:1fr 1fr; min-height:0; flex:0 0 230px; }.table-panel { padding:14px; overflow:hidden; }.device-panel,.alert-panel { min-height:0; }.section-heading { margin:0 0 10px; }.alert-list { display:grid; gap:7px; overflow:auto; max-height:170px; }.alert-item { display:grid; gap:3px; padding:9px 11px; border:1px solid #f2d0d0; border-left:3px solid var(--danger); background:#fff7f7; border-radius:6px; text-align:left; color:var(--ink); }.alert-item:hover { background:#fff0f0; }.alert-title { display:flex; justify-content:space-between; gap:8px; color:#8d3030; }.alert-title span { color:var(--muted);font-size:12px; }.alert-result { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted); }.alert-link { color:var(--primary); font-size:12px; }.danger-text { color:var(--danger); font-weight:700; }
.portal-telemetry { display:flex; flex-direction:column; min-height:0; flex:1; margin-bottom:0; }.telemetry-scroll { min-height:0; flex:1; overflow:auto; border:1px solid var(--line); border-radius:6px; }.telemetry-table { min-width:980px; }.telemetry-table tbody tr { cursor:pointer; }.telemetry-table tbody tr:hover { background:#f4fbfb; }.telemetry-table .row-abnormal { background:#fffafa; }.result-cells { display:grid; grid-template-columns:repeat(3,minmax(70px,1fr)); gap:8px; color:var(--ink); }.result-cells span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.pagination { display:flex; justify-content:center; align-items:center; gap:14px; padding-top:10px; flex:0 0 auto; }.mini:disabled { opacity:.45; cursor:not-allowed; }.metric { padding:14px 18px; }.metric .value { font-size:28px; }.metric-note { color:var(--muted); font-size:12px; margin-top:4px; }.metric-3 .value { color:var(--danger); }
.portal-bottom-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }.task-list { display:grid; gap:8px; max-height:230px; overflow:auto; }.task-card { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:#fbfdfe; }.task-stats { display:flex; flex-direction:column; align-items:end; gap:3px; color:var(--muted); font-size:12px; white-space:nowrap; }.trend-chart { display:grid; gap:8px; }.trend-row { display:grid; grid-template-columns:45px 1fr 32px; align-items:center; gap:8px; color:var(--muted); font-size:12px; }.trend-bar { display:flex; height:12px; background:#eef3f6; border-radius:999px; overflow:hidden; }.trend-bar i { display:block; height:100%; }.trend-bar .normal { background:#24a979; }.trend-bar .abnormal { background:#dc6b6b; }.trend-bar .failed { background:#e9ac4c; }
.drawer { position:fixed; inset:0; z-index:20; }.drawer-backdrop { position:absolute; inset:0; background:rgba(18,38,58,.35); }.drawer-panel { position:absolute; top:0; right:0; bottom:0; width:min(560px,94vw); background:#fff; box-shadow:-12px 0 30px rgba(18,38,58,.18); display:flex; flex-direction:column; }.drawer-header { display:flex; justify-content:space-between; align-items:center; padding:22px; border-bottom:1px solid var(--line); }.drawer-header h2 { margin:6px 0 0; }.drawer-body { padding:22px; overflow:auto; }.detail-status { display:flex; justify-content:space-between; padding:12px; border-radius:6px; background:#eaf7f1; color:#16815e; font-weight:700; margin-bottom:18px; }.detail-status.disabled { background:#fff0f0;color:var(--danger); }.detail-status span { font-weight:400;color:var(--muted); }.detail-grid { display:grid; grid-template-columns:90px 1fr; gap:10px 14px; margin:0 0 20px; }.detail-grid dt { color:var(--muted); }.detail-grid dd { margin:0; word-break:break-all; }.detail-block { border-top:1px solid var(--line); padding-top:14px; margin-top:14px; }.detail-block h4 { margin:0 0 8px; }.detail-block p { line-height:1.7; white-space:pre-wrap; word-break:break-all; }.detail-image { max-width:100%; border:1px solid var(--line); border-radius:6px; }.empty-state { color:var(--muted); padding:20px 0; text-align:center; }
body.portal-live { overflow:hidden; }.portal-live .shell { overflow:hidden; }.portal-live .topbar { flex:0 0 auto; }.portal-live .data-table th { position:sticky; top:0; z-index:1; }.review-form { display:grid; gap:8px; }.review-form select,.review-form textarea { border:1px solid var(--line); border-radius:6px; padding:8px 10px; resize:vertical; }
@media (max-width:1000px) { .portal-toolbar { align-items:stretch; flex-direction:column; }.toolbar-group { flex-wrap:wrap; }.toolbar-actions { justify-content:space-between; }.portal-grid { flex-basis:210px; }.run-strip { grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px) { .shell { padding:12px; }.portal-heading,.toolbar-group { align-items:flex-start; flex-direction:column; }.heading-actions { width:100%; justify-content:flex-end; }.portal-toolbar label,.portal-toolbar .search-label { width:100%; min-width:0; }.portal-toolbar select,.portal-toolbar input { width:100%; }.portal-grid,.portal-bottom-grid { grid-template-columns:1fr; flex-basis:380px; }.run-strip { grid-template-columns:repeat(2,1fr); }.metrics { grid-template-columns:repeat(2,1fr); }.portal-live .topbar .subbrand { display:none; }.portal-live .topbar { padding:12px; }.portal-live .brand { font-size:18px; }.drawer-panel { width:100%; } }
.keyboard-library-panel { margin: 0 0 12px; padding: 14px; flex: 0 0 auto; }
.keyboard-library-panel { order: 10; }
.keyboard-library-toolbar { display:flex; align-items:end; gap:10px; margin-bottom:12px; }
.keyboard-library-toolbar label { display:grid; gap:5px; min-width:280px; color:var(--muted); font-weight:600; }
.keyboard-library-toolbar input { border:1px solid var(--line); border-radius:6px; padding:8px 10px; color:var(--ink); background:#fff; }
.keyboard-upload-form { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.4fr 1.4fr auto; gap:10px; align-items:end; padding:12px; border:1px solid var(--line); border-radius:6px; background:#f7fafc; }
.keyboard-upload-form label { display:grid; gap:5px; color:var(--muted); font-weight:600; font-size:12px; }
.keyboard-upload-form input { min-width:0; border:1px solid var(--line); border-radius:6px; padding:8px 9px; color:var(--ink); background:#fff; }
.keyboard-profile-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; margin-top:12px; max-height:245px; overflow:auto; }
.keyboard-profile-card { border:1px solid var(--line); border-radius:7px; padding:12px; background:#fff; display:grid; gap:8px; }
.keyboard-profile-card h4 { margin:0; font-size:15px; }
.keyboard-profile-meta { color:var(--muted); font-size:12px; line-height:1.6; }
.keyboard-profile-actions { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.keyboard-profile-actions input[type=file] { max-width:170px; font-size:12px; }
@media (max-width:1000px) { .keyboard-upload-form { grid-template-columns:repeat(3,1fr); }.keyboard-upload-form button { width:100%; } }
@media (max-width:700px) { .keyboard-library-toolbar { align-items:stretch; flex-direction:column; }.keyboard-library-toolbar label { min-width:0; }.keyboard-library-toolbar input { width:100%; }.keyboard-upload-form { grid-template-columns:1fr; }.keyboard-profile-list { max-height:none; } }
body.portal-live { overflow:auto; }.portal-live .shell { overflow:visible; min-height:100vh; height:auto; }.portal-live .portal-app { overflow:visible; }