:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e8f0fb;
  background: #08111f;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body, #root { min-height: 100%; margin: 0; }
body {
  min-width: 320px;
  background:
    radial-gradient(circle at 80% -10%, rgba(0, 194, 255, .15), transparent 35rem),
    radial-gradient(circle at -10% 60%, rgba(32, 224, 171, .08), transparent 30rem),
    #08111f;
}
button, input, select, textarea { font: inherit; }

.boot-screen {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  color: #8da2bc;
}
.boot-mark {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 20px;
  color: #07121f;
  font-weight: 900;
  font-size: 24px;
  background: linear-gradient(135deg, #28e0b2, #41a9ff);
  box-shadow: 0 16px 60px rgba(40, 224, 178, .22);
}

.scada-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px 16px;
  background: rgba(7, 16, 29, .92);
  border-right: 1px solid rgba(141, 162, 188, .13);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 26px; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; display:grid; place-items:center; font-weight:900; color:#07121f; background:linear-gradient(135deg,#28e0b2,#41a9ff); }
.brand-title { font-weight: 760; letter-spacing: -.02em; }
.brand-subtitle { color: #688099; font-size: 12px; margin-top: 2px; }
.nav-button { width:100%; border:0; background:transparent; color:#8da2bc; padding:11px 12px; margin:3px 0; border-radius:10px; text-align:left; cursor:pointer; }
.nav-button:hover { color:#e8f0fb; background:rgba(65,169,255,.08); }
.nav-button.active { color:#e8f0fb; background:linear-gradient(90deg,rgba(40,224,178,.14),rgba(65,169,255,.08)); box-shadow:inset 3px 0 #28e0b2; }
.sidebar-footer { position:absolute; left:16px; right:16px; bottom:18px; color:#688099; font-size:12px; }

.main { padding: 26px clamp(18px, 3vw, 42px) 60px; overflow: hidden; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:30px; }
.eyebrow { color:#28e0b2; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.15em; }
.page-title { margin:5px 0 0; font-size:clamp(27px,3.5vw,42px); letter-spacing:-.045em; }
.muted { color:#8296ad; }
.status-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid rgba(141,162,188,.16); border-radius:999px; background:rgba(14,29,48,.72); color:#a9bbcd; font-size:13px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#6a7b90; box-shadow:0 0 0 4px rgba(106,123,144,.1); }
.status-dot.connected { background:#28e0b2; box-shadow:0 0 0 4px rgba(40,224,178,.12); }
.status-dot.degraded { background:#ffb84d; box-shadow:0 0 0 4px rgba(255,184,77,.12); }
.status-dot.disconnected { background:#ff6b78; box-shadow:0 0 0 4px rgba(255,107,120,.12); }

.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.card { border:1px solid rgba(141,162,188,.14); border-radius:16px; background:linear-gradient(145deg,rgba(17,35,57,.83),rgba(11,23,40,.8)); box-shadow:0 16px 50px rgba(0,0,0,.16); }
.metric { padding:18px; }
.metric-label { color:#7f94ab; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.metric-value { margin-top:9px; font-size:28px; font-weight:760; letter-spacing:-.035em; }
.metric-note { margin-top:6px; color:#668097; font-size:12px; }
.section-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr); gap:18px; }
.section-card { padding:20px; min-width:0; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.section-head > div { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.section-title { margin:0; font-size:17px; }
.controller-row { display:grid; grid-template-columns:1.1fr .8fr .7fr auto; align-items:center; gap:14px; padding:14px 0; border-top:1px solid rgba(141,162,188,.11); }
.controller-row:first-of-type { border-top:0; }
.controller-name { font-weight:700; }
.controller-address { color:#698199; font-size:12px; margin-top:3px; }
.controller-diagnostics { display:grid; gap:9px; margin:14px 0 18px; }
.diagnostic-row { display:grid; grid-template-columns:10px minmax(0,1fr); gap:11px; align-items:start; padding:12px 14px; border:1px solid rgba(141,162,188,.13); border-radius:12px; background:rgba(4,13,24,.3); }
.diagnostic-row > .status-dot { margin-top:5px; }
.diagnostic-row strong { margin-right:9px; }
.diagnostic-state { font-size:11px; font-weight:800; text-transform:uppercase; }
.diagnostic-state.connected { color:#28e0b2; }
.diagnostic-state.degraded { color:#ffb84d; }
.diagnostic-state.disconnected { color:#ff6b78; }
.diagnostic-state.unknown { color:#8da2bc; }
.diagnostic-error { margin-top:5px; color:#ff9ca5; font-size:12px; overflow-wrap:anywhere; }
.param-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.param { padding:13px 14px; border-radius:12px; background:rgba(5,14,26,.42); border:1px solid rgba(141,162,188,.09); }
.param-name { color:#7f94ab; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.param-value { margin-top:7px; font-weight:720; font-size:19px; }
.quality { font-size:10px; text-transform:uppercase; color:#28e0b2; letter-spacing:.08em; margin-left:5px; }
.dashboard-card { margin-top:18px; }
.dashboard-subtitle { margin-left:10px; font-size:12px; }
.dashboard-editor { margin:0 0 18px; padding:18px; border:1px solid rgba(65,169,255,.22); border-radius:14px; background:rgba(6,16,29,.7); }
.dashboard-editor-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.dashboard-editor-head h3 { margin:0 0 5px; font-size:15px; }
.dashboard-editor-head p { margin:0 0 14px; font-size:12px; }
.dashboard-selection-count { flex:none; padding:7px 10px; border-radius:999px; color:#a9d9ff; background:rgba(65,169,255,.1); font-size:12px; }
.dashboard-search { width:min(100%,560px); margin-bottom:12px; }
.dashboard-parameter-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:7px; max-height:300px; overflow:auto; padding:2px; }
.dashboard-parameter-option { display:flex; align-items:flex-start; gap:10px; padding:10px 11px; border:1px solid rgba(141,162,188,.1); border-radius:10px; background:rgba(12,29,48,.55); cursor:pointer; }
.dashboard-parameter-option:hover { border-color:rgba(40,224,178,.28); background:rgba(40,224,178,.05); }
.dashboard-parameter-option input { flex:none; margin-top:3px; accent-color:#28e0b2; }
.dashboard-parameter-name { display:block; color:#dce9f6; font-size:13px; font-weight:700; }
.dashboard-editor-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.small-button.primary-small { border:0; color:#06121d; background:linear-gradient(135deg,#28e0b2,#41a9ff); font-weight:800; }
.dashboard-table-wrap { overflow:auto; border:1px solid rgba(141,162,188,.14); border-radius:14px; }
.dashboard-table { min-width:680px; }
.dashboard-table th { padding:14px 16px; color:#d9efff; background:#126da6; border-left:1px solid rgba(255,255,255,.12); }
.dashboard-table th:first-child { width:42%; background:#0d5a8e; border-left:0; }
.dashboard-controller-title { font-size:13px; font-weight:850; letter-spacing:.02em; text-transform:none; }
.dashboard-controller-meta { display:flex; align-items:center; gap:7px; margin-top:6px; color:rgba(255,255,255,.72); font-size:10px; letter-spacing:0; text-transform:none; }
.dashboard-controller-meta .status-dot { width:6px; height:6px; box-shadow:none; }
.dashboard-table td { padding:11px 16px; background:rgba(8,21,36,.38); border-left:1px solid rgba(141,162,188,.08); }
.dashboard-table tr:nth-child(even) td { background:rgba(18,38,61,.38); }
.dashboard-table td:first-child { border-left:0; }
.dashboard-row-name { display:inline; color:#d3e0ed; font-weight:650; }
.dashboard-unit { margin-left:7px; color:#688099; font-size:11px; }
.dashboard-value-cell { text-align:center; }
.dashboard-value { color:#f0f7ff; font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; }
.dashboard-quality { display:block; margin-top:2px; color:#28e0b2; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.dashboard-value-cell.stale .dashboard-quality { color:#ffb84d; }
.dashboard-value-cell.bad .dashboard-quality, .dashboard-value-cell.unknown .dashboard-quality { color:#ff7c88; }
.dashboard-update-strip { display:flex; flex-wrap:wrap; gap:20px; padding:14px 3px 0; }
.dashboard-update-item { display:flex; align-items:center; gap:10px; min-width:240px; }
.dashboard-update-item div { display:grid; gap:2px; }
.dashboard-update-item strong { font-size:12px; }
.dashboard-update-item div span { color:#71869d; font-size:11px; }
.alarm-item { padding:12px 0; border-top:1px solid rgba(141,162,188,.11); }
.alarm-item:first-of-type { border-top:0; }
.alarm-severity { color:#ff6b78; font-size:11px; font-weight:800; text-transform:uppercase; }
.empty-state { padding:30px 14px; text-align:center; color:#688099; }

.login-layout { min-height:100vh; display:grid; grid-template-columns:minmax(380px,.9fr) minmax(430px,1.1fr); }
.login-visual { position:relative; overflow:hidden; padding:60px; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(145deg,#0d2137,#091523); }
.login-visual::after { content:""; position:absolute; width:580px; height:580px; border:1px solid rgba(40,224,178,.16); border-radius:50%; right:-230px; top:18%; box-shadow:0 0 0 80px rgba(65,169,255,.025),0 0 0 160px rgba(40,224,178,.018); }
.login-copy { position:relative; z-index:1; max-width:560px; }
.login-copy h1 { font-size:clamp(38px,5vw,68px); line-height:.98; letter-spacing:-.055em; margin:22px 0; }
.login-copy p { color:#90a7bd; font-size:17px; line-height:1.65; max-width:470px; }
.login-panel { display:grid; place-items:center; padding:36px; }
.login-card { width:min(100%,440px); padding:30px; }
.login-card.invitation-card { width:min(100%,560px); }
.login-card h2 { margin:0 0 8px; font-size:25px; }
.form-field { display:grid; margin-top:17px; }
.form-field label { display:grid; gap:7px; color:#8da2bc; font-size:12px; font-weight:700; }
.form-field input { width:100%; color:#e8f0fb; background:#091626; border:1px solid rgba(141,162,188,.2); border-radius:10px; padding:12px 13px; outline:none; }
.form-field input:focus { border-color:#28e0b2; box-shadow:0 0 0 3px rgba(40,224,178,.08); }
.primary-button { width:100%; margin-top:22px; border:0; border-radius:11px; padding:13px 18px; color:#06121d; background:linear-gradient(135deg,#28e0b2,#41a9ff); font-weight:800; cursor:pointer; }
.primary-button:disabled { opacity:.5; cursor:wait; }
.login-link-button { width:100%; margin-top:12px; border:0; padding:8px; color:#8fcff8; background:transparent; cursor:pointer; }
.login-link-button:hover { color:#c8eaff; }
.error-box { margin-top:16px; padding:12px; border:1px solid rgba(255,107,120,.3); border-radius:10px; background:rgba(255,107,120,.08); color:#ff9da6; font-size:13px; }

.table-wrap { overflow:auto; border-radius:14px; border:1px solid rgba(141,162,188,.12); }
table { width:100%; border-collapse:collapse; min-width:760px; }
th { text-align:left; color:#71869d; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:12px 14px; background:rgba(5,14,26,.38); }
td { padding:12px 14px; border-top:1px solid rgba(141,162,188,.09); font-size:13px; }
.search { width:min(100%,360px); color:#e8f0fb; background:#091626; border:1px solid rgba(141,162,188,.18); border-radius:10px; padding:10px 12px; outline:none; }
.trend-controls { width:min(100%,860px); }
.trend-controls .search { width:auto; min-width:190px; max-width:100%; }
.trend-controls .range-select { min-width:130px; }
.trend-register-select { position:relative; flex:1 1 320px; min-width:250px; }
.trend-controls .trend-register-trigger { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-width:0; color:#e8f0fb; text-align:left; cursor:pointer; }
.trend-register-trigger > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trend-register-trigger.open { border-color:rgba(40,224,178,.46); box-shadow:0 0 0 3px rgba(40,224,178,.07); }
.trend-register-chevron { flex:none; color:#8da2bc; font-size:17px; line-height:1; transition:transform .15s ease; }
.trend-register-trigger.open .trend-register-chevron { transform:rotate(180deg); }
.trend-register-menu { position:absolute; z-index:35; top:calc(100% + 6px); left:0; right:0; min-width:310px; overflow:hidden; border:1px solid rgba(141,162,188,.24); border-radius:11px; background:#091626; box-shadow:0 18px 45px rgba(0,0,0,.42); }
.trend-register-search { width:100%; border:0; border-bottom:1px solid rgba(141,162,188,.16); padding:12px 13px; color:#e8f0fb; background:#0c1b2d; outline:none; }
.trend-register-search:focus { box-shadow:inset 0 -2px #28e0b2; }
.trend-register-options { max-height:310px; overflow-y:auto; padding:5px; }
.trend-register-option { display:grid; width:100%; gap:2px; border:0; border-radius:8px; padding:9px 10px; color:#dce8f4; background:transparent; text-align:left; cursor:pointer; }
.trend-register-option:hover { background:rgba(65,169,255,.09); }
.trend-register-option.selected { color:#aaf5e2; background:rgba(40,224,178,.1); }
.trend-register-option span { overflow:hidden; font-size:13px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.trend-register-option small { color:#71869d; font-size:10px; }
.role-register-access { display:grid; gap:12px; min-width:0; }
.role-register-access-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.role-register-access-head p { margin:5px 0 0; }
.role-register-actions { display:flex; flex-wrap:wrap; gap:8px; }
.role-register-picker { position:relative; width:min(100%,620px); }
.role-register-trigger { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; color:#e8f0fb; text-align:left; cursor:pointer; }
.role-register-trigger.open { border-color:rgba(40,224,178,.46); box-shadow:0 0 0 3px rgba(40,224,178,.07); }
.role-register-menu { position:absolute; z-index:40; top:calc(100% + 6px); left:0; right:0; min-width:310px; overflow:hidden; border:1px solid rgba(141,162,188,.24); border-radius:11px; background:#091626; box-shadow:0 18px 45px rgba(0,0,0,.42); }
.role-register-options { max-height:340px; overflow-y:auto; padding:5px; }
.role-register-option { display:flex; align-items:flex-start; gap:9px; width:100%; border-radius:8px; padding:9px 10px; color:#dce8f4; background:transparent; cursor:pointer; }
.role-register-option:hover { background:rgba(65,169,255,.09); }
.role-register-option.selected { color:#aaf5e2; background:rgba(40,224,178,.1); }
.role-register-option input { flex:none; margin-top:3px; accent-color:#28e0b2; }
.role-register-option div { display:grid; min-width:0; gap:2px; }
.role-register-option span { overflow:hidden; font-size:13px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.role-register-option small { color:#71869d; font-size:10px; }
.role-register-more { padding:9px 10px; color:#71869d; font-size:11px; text-align:center; }
.chart-loading { position:absolute; left:50%; margin-top:16px; transform:translateX(-50%); z-index:2; color:#8da2bc; font-size:13px; }
.trend-selected { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 18px; }
.trend-chip { display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid rgba(141,162,188,.2); border-radius:20px; background:rgba(5,14,26,.3); color:#dce8f4; font-size:13px; }
.trend-color { width:9px; height:9px; flex:none; border-radius:50%; }
.trend-chip button { border:0; background:transparent; color:#8da2bc; font-size:19px; line-height:1; cursor:pointer; }
.trend-chip button:disabled { opacity:.25; cursor:default; }
.trend-picker-footer { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-top:1px solid rgba(141,162,188,.16); color:#8da2bc; }
.trend-register-option:disabled { opacity:.4; cursor:default; }
.chart-export-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:15px 0 8px; }
.chart-export-actions small { color:#8da2bc; font-size:12px; }
.small-button { border:1px solid rgba(40,224,178,.24); background:rgba(40,224,178,.07); color:#aaf5e2; border-radius:8px; padding:7px 10px; cursor:pointer; }
.small-button:disabled { opacity:.45; cursor:not-allowed; }
.policy-editor { margin:16px 0; padding:14px; border:1px solid rgba(141,162,188,.16); border-radius:12px; background:rgba(8,18,30,.62); }
.toggle-row { display:flex; align-items:center; gap:9px; margin:9px 0; color:#8da2bc; }
.toggle-row input { width:auto; accent-color:#28e0b2; }
.database-console { margin-top:18px; }
.admin-tabs { position:sticky; top:0; z-index:12; display:flex; gap:7px; margin:-4px 0 18px; padding:7px; overflow-x:auto; border:1px solid rgba(141,162,188,.14); border-radius:12px; background:rgba(7,16,29,.94); backdrop-filter:blur(10px); }
.admin-tab { flex:none; border:1px solid transparent; border-radius:9px; padding:9px 13px; color:#8da2bc; background:transparent; cursor:pointer; }
.admin-tab:hover { color:#dce8f4; background:rgba(141,162,188,.07); }
.admin-tab.active { border-color:rgba(40,224,178,.28); color:#aaf5e2; background:rgba(40,224,178,.09); }
.sql-editor { width:100%; min-height:120px; resize:vertical; margin-bottom:12px; padding:14px; border:1px solid rgba(141,162,188,.2); border-radius:10px; background:#06101c; color:#d9e8f5; font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }
.user-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:22px; }
.user-grid select { width:100%; color:#e8f0fb; background:#091626; border:1px solid rgba(141,162,188,.2); border-radius:10px; padding:12px 13px; }
.role-editor { margin-top:24px; padding-top:18px; border-top:1px solid rgba(141,162,188,.12); }
.role-editor-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.role-editor-heading h3, .role-editor-heading p { margin-top:0; }
.role-editor-heading p { max-width:760px; margin-bottom:0; line-height:1.5; }
.role-management-layout { display:grid; grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr); align-items:start; gap:18px; }
.role-list { display:grid; gap:10px; }
.role-card { display:grid; gap:9px; padding:13px; border:1px solid rgba(141,162,188,.14); border-radius:12px; background:rgba(4,13,24,.35); }
.role-card.selected { border-color:rgba(40,224,178,.42); box-shadow:0 0 0 1px rgba(40,224,178,.08); background:rgba(40,224,178,.05); }
.role-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.role-kind { flex:none; padding:3px 7px; border-radius:999px; color:#aaf5e2; background:rgba(40,224,178,.1); font-size:10px; font-weight:800; }
.role-kind.built-in { color:#afc9e4; background:rgba(65,169,255,.1); }
.role-card-stats { display:flex; flex-wrap:wrap; gap:6px; }
.role-card-stats span { padding:3px 6px; border-radius:6px; color:#8da2bc; background:rgba(141,162,188,.07); font-size:10px; }
.role-capability-summary { max-height:3.7em; overflow:hidden; line-height:1.25; }
.role-scope-summary { font-size:11px; }
.role-card-actions { display:flex; flex-wrap:wrap; gap:7px; }
.role-card-actions .small-button { justify-self:start; }
.role-protected-note { font-size:11px; }
.role-form-panel { padding:17px; border:1px solid rgba(141,162,188,.16); border-radius:13px; background:rgba(8,18,30,.62); }
.role-form-panel > h3 { margin:0 0 6px; }
.role-form-panel > p { margin:0 0 14px; line-height:1.5; }
.role-scope-box { margin:12px 0; padding:12px; border:1px solid rgba(141,162,188,.13); border-radius:10px; background:rgba(4,13,24,.34); }
.role-scope-box p { margin:5px 0 4px; font-size:12px; }
.inline-warning { margin-top:8px; color:#ffc989; font-size:12px; }
.role-presets { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.role-presets > span { align-self:center; font-size:12px; }
.capability-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.capability-group { padding:12px; border:1px solid rgba(141,162,188,.12); border-radius:10px; background:rgba(4,13,24,.3); }
.capability-group > strong { color:#cfe0ef; font-size:12px; }
.capability-group .toggle-row { margin:8px 0 0; font-size:12px; line-height:1.35; }
.role-platform-note { margin:12px 0; font-size:11px; line-height:1.45; }
.role-form-actions, .role-delete-actions { display:flex; flex-wrap:wrap; gap:9px; }
.role-form-actions .primary-button { width:auto; margin:0; }
.role-delete-confirm { margin-top:14px; padding:13px; border:1px solid rgba(255,107,120,.3); border-radius:10px; color:#f3ccd0; background:rgba(255,107,120,.07); }
.role-delete-confirm p { margin:7px 0 11px; color:#c9aeb2; font-size:12px; line-height:1.5; }
.user-account-card { margin-bottom:10px; padding:12px; border:1px solid rgba(141,162,188,.12); border-radius:12px; background:rgba(4,13,24,.35); }
.user-account-card .controller-row { padding:0 0 10px; border:0; }
.user-role-toggles { display:flex; flex-wrap:wrap; gap:6px 14px; margin-bottom:10px; }
.user-role-toggles .toggle-row { margin:0; font-size:12px; }
.user-account-actions { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.user-self-note { font-size:11px; }
.invite-role-list { display:grid; gap:2px; margin-top:14px; }
.invite-result { display:grid; gap:10px; margin-top:16px; padding:14px; border:1px solid rgba(40,224,178,.24); border-radius:12px; background:rgba(40,224,178,.06); }
.invite-result p { margin:0; font-size:12px; line-height:1.5; }
.invite-result input { width:100%; min-width:0; padding:10px 11px; border:1px solid rgba(141,162,188,.2); border-radius:8px; color:#dce9f6; background:#06101c; font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; }
.invitation-list { display:grid; gap:9px; }
.invitation-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0; }
.totp-setup { display:grid; grid-template-columns:150px minmax(0,1fr); align-items:center; gap:18px; margin:18px 0; padding:15px; border:1px solid rgba(65,169,255,.2); border-radius:13px; background:rgba(65,169,255,.05); }
.totp-setup img { width:150px; height:150px; padding:7px; border-radius:10px; background:#fff; }
.totp-setup p { margin:7px 0; font-size:12px; line-height:1.45; }
.totp-secret { overflow-wrap:anywhere; color:#cceaff; font:700 13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.setup-step { margin-top:18px; }
.capability-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 14px; margin:12px 0; }
.mimic-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:14px 0; padding:12px; border:1px solid rgba(141,162,188,.12); border-radius:12px; background:rgba(8,18,30,.48); }
.mimic-tools-label { margin-right:3px; color:#71869d; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.mimic-template-button { border-color:rgba(65,169,255,.42); color:#b9e3ff; background:rgba(65,169,255,.1); }
.mimic-align-tools { margin-top:-6px; }
.mimic-align-select { min-width:220px; max-width:100%; color:#e8f0fb; background:#091626; border:1px solid rgba(141,162,188,.2); border-radius:8px; padding:7px 10px; }
.small-button.danger { border-color:rgba(255,107,120,.35); color:#ff9da6; background:rgba(255,107,120,.08); }
.history-chart { width:100%; height:min(55vh,460px); min-height:300px; }

.modal-backdrop {
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:clamp(10px,3vh,28px);
  overflow:hidden;
  background:rgba(3,8,15,.82);
  backdrop-filter:blur(8px);
}
.modal-card {
  width:min(100%,600px);
  max-height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.modal-scroll { min-height:0; padding:26px 28px 18px; overflow-y:auto; overscroll-behavior:contain; }
.modal-scroll h2 { margin:0 0 8px; }
.modal-actions {
  flex:none;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:14px 28px 20px;
  border-top:1px solid rgba(141,162,188,.12);
  background:rgba(9,22,38,.96);
}
.modal-actions .primary-button { margin:0; }
.modal-actions .modal-cancel { width:auto; margin:0; padding:12px 16px; }

.mimic-header-actions { display:flex; flex-wrap:wrap; gap:8px; }
.mimic-document-picker { min-width:min(100%,320px); }
.mimic-document-picker .section-title { margin-bottom:6px; }
.mimic-document-select { width:min(100%,360px); color:#e8f0fb; background:#091626; border:1px solid rgba(141,162,188,.2); border-radius:9px; padding:8px 10px; }
.mimic-controller-select { width:150px; }
.mimic-viewport { width:100%; overflow:auto; overscroll-behavior-x:contain; border-radius:14px; background:#07101d; }
.mimic-mobile-hint { display:none; margin:8px 2px 0; color:#71869d; font-size:11px; }
.mimic-canvas {
  position:relative;
  width:100%;
  min-width:680px;
  overflow:hidden;
  container-type:inline-size;
  border:1px solid rgba(141,162,188,.12);
  border-radius:14px;
  background:linear-gradient(145deg,#07101d,#0c1c2e);
}
.mimic-canvas.editing {
  min-width:720px;
  background-color:#07101d;
  background-image:linear-gradient(rgba(141,162,188,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(141,162,188,.06) 1px,transparent 1px);
  background-size:24px 24px;
}
.mimic-node { min-width:0; min-height:0; overflow:hidden; border-radius:12px; padding:clamp(6px,1.1vw,14px); }
.mimic-node-controller { display:flex; flex-direction:column; background:rgba(15,35,56,.78); border:1px solid rgba(141,162,188,.08); }
.mimic-node-text { display:flex; align-items:center; }
.mimic-node-pipe { padding:0; overflow:visible; border-radius:0; }
.mimic-node-source, .mimic-node-sensor, .mimic-node-pump, .mimic-node-valve, .mimic-node-exchanger, .mimic-node-radiator, .mimic-node-elevator { padding:4px; overflow:visible; }
.mimic-node-indicator { padding:8px 12px; border:1px solid rgba(141,162,188,.2); background:rgba(9,22,38,.88); }
.mimic-node-text h2 { max-width:100%; margin:0; font-size:clamp(11px,1.7cqw,22px); line-height:1.15; overflow:hidden; overflow-wrap:anywhere; }
.mimic-node.editing { border:1px dashed transparent; }
.mimic-node.editing:hover { border-color:rgba(40,224,178,.55); }
.mimic-node.editing.selected { border:2px solid #28e0b2; box-shadow:0 0 0 4px rgba(40,224,178,.12); }
.mimic-resize-handle { position:absolute; right:-7px; bottom:-7px; z-index:20; width:18px; height:18px; border:2px solid #07101d; border-radius:50%; background:#28e0b2; box-shadow:0 0 0 2px rgba(40,224,178,.38); cursor:nwse-resize; touch-action:none; }
.mimic-node.editing iframe { pointer-events:none; }
.mimic-controller-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-bottom:8px; }
.mimic-controller-head h3 { margin:0; }
.mimic-controller-head .status-pill { padding:5px 8px; font-size:11px; }
.mimic-register-list { min-height:0; overflow:auto; border-top:1px solid rgba(141,162,188,.11); }
.mimic-register-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid rgba(141,162,188,.09); color:#a9bbcd; font-size:clamp(10px,1.1vw,13px); }
.mimic-register-row > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mimic-register-value { color:#e8f0fb; font-weight:750; }
.mimic-widget { width:100%; height:100%; border:0; }
.equipment { width:100%; height:100%; display:flex; align-items:center; gap:clamp(5px,.8vw,12px); min-width:0; color:#dbeaf7; }
.equipment-label { max-width:100%; color:#9eb2c7; font-size:clamp(6px,1.05cqw,12px); font-weight:700; line-height:1.15; overflow:hidden; overflow-wrap:anywhere; }
.equipment-value { margin-top:4px; color:#f4f9ff; font-size:clamp(8px,1.5cqw,19px); font-weight:850; font-variant-numeric:tabular-nums; white-space:nowrap; }
.equipment-state { display:block; margin-top:2px; color:#71869d; font-size:clamp(7px,.7vw,10px); }
.equipment-source { padding:8px 10px; border:1px solid rgba(255,112,88,.32); border-radius:10px; background:rgba(92,30,25,.42); }
.equipment-source.cold { border-color:rgba(65,169,255,.35); background:rgba(20,62,96,.42); }
.source-glyph { display:flex; align-items:center; gap:2px; flex:none; color:#ff735e; font-size:clamp(19px,2.1vw,34px); line-height:1; }
.equipment-source.cold .source-glyph { color:#41a9ff; }
.source-glyph strong { font-size:.9em; }
.equipment-pipe { position:relative; width:100%; height:100%; }
.equipment-pipe.horizontal::before { content:""; position:absolute; left:0; right:0; top:50%; height:9px; transform:translateY(-50%); border-top:2px solid rgba(255,111,88,.9); border-bottom:2px solid rgba(255,111,88,.48); background:rgba(255,111,88,.14); }
.equipment-pipe.horizontal::after { content:"▶"; position:absolute; right:2%; top:50%; color:#ff735e; font-size:13px; transform:translateY(-52%); }
.equipment-pipe.horizontal.left::after { content:"◀"; left:2%; right:auto; }
.equipment-pipe.horizontal.cold::before { border-color:rgba(65,169,255,.9) rgba(65,169,255,.48); background:rgba(65,169,255,.14); }
.equipment-pipe.horizontal.cold::after { color:#41a9ff; }
.equipment-pipe.horizontal.none::after { content:none; }
.equipment-pipe.vertical::before { content:""; position:absolute; top:0; bottom:0; left:50%; width:9px; transform:translateX(-50%); border-left:2px solid rgba(255,111,88,.9); border-right:2px solid rgba(255,111,88,.48); background:rgba(255,111,88,.14); }
.equipment-pipe.vertical::after { content:"▼"; position:absolute; left:50%; bottom:3%; color:#ff735e; font-size:13px; transform:translateX(-50%); }
.equipment-pipe.vertical.up::after { content:"▲"; top:3%; bottom:auto; }
.equipment-pipe.vertical.none::after { content:none; }
.equipment-pipe.vertical.cold::before { border-color:rgba(65,169,255,.9) rgba(65,169,255,.48); background:rgba(65,169,255,.14); }
.equipment-pipe.vertical.cold::after { color:#41a9ff; }
.sensor-glyph { display:grid; place-items:center; flex:none; width:clamp(34px,3.5vw,54px); aspect-ratio:1; border:3px solid #e7f1fb; border-radius:50%; color:#e7f1fb; background:#0b1b2c; font-size:clamp(15px,1.6vw,24px); font-weight:900; box-shadow:0 0 0 3px rgba(65,169,255,.15); }
.equipment-sensor.bad .sensor-glyph, .equipment-sensor.unknown .sensor-glyph { border-color:#ff6b78; color:#ff9da6; }
.pump-glyph { position:relative; display:grid; place-items:center; flex:none; width:clamp(42px,4.4vw,68px); aspect-ratio:1; border:4px solid #88a0b8; border-radius:50%; background:#0b1b2c; color:#88a0b8; }
.pump-glyph::before, .pump-glyph::after { content:""; position:absolute; left:-12px; width:11px; height:9px; border-top:3px solid #88a0b8; border-bottom:3px solid #88a0b8; }
.pump-glyph::after { left:auto; right:-12px; }
.pump-rotor { display:block; font-size:clamp(27px,3vw,45px); line-height:1; }
.pump-flow-arrow { position:absolute; right:-19px; bottom:-17px; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#dbeaf7; background:#0b1b2c; font-size:16px; font-weight:900; }
.equipment-pump.active .pump-glyph { border-color:#28e0b2; color:#28e0b2; box-shadow:0 0 16px rgba(40,224,178,.22); }
.equipment-pump.active .pump-rotor { animation:mimic-pump-spin 1.2s linear infinite; }
.equipment-pump.active .equipment-state { color:#28e0b2; }
.equipment-pump.unknown .pump-glyph { border-color:#71869d; color:#71869d; }
@keyframes mimic-pump-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .equipment-pump.active .pump-rotor { animation:none; } }
.valve-glyph { position:relative; display:flex; align-items:center; flex:none; width:clamp(48px,5.2vw,78px); height:clamp(36px,3.8vw,58px); }
.valve-glyph::before { content:""; position:absolute; left:50%; top:-12px; width:3px; height:18px; background:#9eb2c7; }
.valve-glyph span { width:50%; height:100%; background:#0b1b2c; border:3px solid #9eb2c7; }
.valve-glyph span:first-child { clip-path:polygon(0 0,100% 50%,0 100%); }
.valve-glyph span:last-child { clip-path:polygon(100% 0,0 50%,100% 100%); }
.equipment-valve.active .valve-glyph span { border-color:#28e0b2; }
.exchanger-glyph { display:flex; align-items:stretch; justify-content:space-evenly; flex:none; width:clamp(54px,5.6vw,88px); height:clamp(58px,5.7vw,90px); padding:8px 10px; border:3px solid #8aa8bb; border-radius:8px; background:linear-gradient(90deg,rgba(255,112,88,.18) 50%,rgba(65,169,255,.18) 50%); }
.exchanger-glyph span { width:3px; height:100%; transform:skewY(-28deg); background:linear-gradient(#ff735e 45%,#41a9ff 55%); border-radius:2px; }
.radiator-glyph { position:relative; display:flex; align-items:stretch; gap:3px; flex:none; width:clamp(54px,5.6vw,88px); height:clamp(50px,5.2vw,82px); padding:6px 4px; }
.radiator-glyph::before, .radiator-glyph::after { content:""; position:absolute; left:2px; right:2px; height:5px; border-radius:4px; background:#a7b5bf; }
.radiator-glyph::before { top:3px; }
.radiator-glyph::after { bottom:3px; }
.radiator-glyph span { flex:1; border:2px solid #c9d3d9; border-radius:5px; background:linear-gradient(#e49675,#8ba5bb); box-shadow:inset 0 0 0 2px rgba(11,27,44,.24); }
.elevator-glyph { position:relative; display:flex; align-items:center; flex:none; width:clamp(70px,7.2vw,112px); height:clamp(42px,4.5vw,70px); }
.elevator-glyph::before, .elevator-glyph::after { content:""; width:18%; height:26%; border-top:3px solid #a9bbc9; border-bottom:3px solid #a9bbc9; }
.elevator-nozzle { width:28%; height:44%; clip-path:polygon(0 25%,100% 0,100% 100%,0 75%); background:linear-gradient(90deg,#ff735e,#c6d3dd); }
.elevator-chamber { width:36%; height:72%; border:3px solid #a9bbc9; border-radius:45% 18% 18% 45%; background:linear-gradient(135deg,rgba(255,115,94,.28),rgba(65,169,255,.3)); }
.equipment-indicator { justify-content:flex-start; padding:5px 8px; }
.equipment-indicator .equipment-label { font-size:clamp(8px,1.1cqw,13px); }
.equipment-indicator .equipment-value { font-size:clamp(11px,1.8cqw,21px); }
.equipment-indicator.bad, .equipment-indicator.unknown { border-color:rgba(255,107,120,.45); }
.binding-picker { margin-top:15px; padding:12px; border:1px solid rgba(141,162,188,.13); border-radius:11px; background:rgba(4,13,24,.42); }
.binding-picker-label { margin-bottom:7px; color:#8da2bc; font-size:12px; font-weight:750; }
.binding-current { margin-bottom:8px; color:#aaf5e2; font-size:12px; }
.binding-picker .search { width:100%; }
.binding-results { display:grid; gap:4px; max-height:190px; overflow:auto; margin-top:7px; }
.binding-result { width:100%; padding:8px 9px; border:1px solid transparent; border-radius:8px; color:#c9d8e6; background:rgba(15,35,56,.6); text-align:left; cursor:pointer; }
.binding-result:hover, .binding-result.selected { border-color:rgba(40,224,178,.3); background:rgba(40,224,178,.08); }
.binding-result div { font-size:12px; font-weight:700; }
.binding-result span { display:block; margin-top:2px; color:#698199; font-size:10px; }
.mimic-node-command { padding:clamp(7px,1.2cqw,16px); border:1px solid rgba(65,169,255,.22); background:rgba(9,22,38,.92); }
.mimic-command { height:100%; display:flex; flex-direction:column; gap:clamp(5px,.8cqw,10px); min-width:0; overflow:auto; }
.mimic-command-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.mimic-command-head > div:first-child { min-width:0; display:grid; gap:2px; }
.mimic-command-head strong { overflow:hidden; color:#eef7ff; font-size:clamp(9px,1.5cqw,16px); text-overflow:ellipsis; white-space:nowrap; }
.mimic-command-head span { overflow:hidden; color:#7890a8; font-size:clamp(7px,1cqw,11px); text-overflow:ellipsis; white-space:nowrap; }
.mimic-command-current { flex:none; display:grid; justify-items:end; }
.mimic-command-current strong { color:#aaf5e2; font-size:clamp(11px,1.8cqw,20px); }
.mimic-command-input { width:100%; min-height:30px; border:1px solid rgba(141,162,188,.22); border-radius:8px; padding:clamp(5px,.8cqw,10px); color:#e8f0fb; background:#06101c; font-size:clamp(8px,1.15cqw,13px); outline:none; }
.mimic-command-input:focus { border-color:#28e0b2; }
.mimic-command-auth { display:grid; grid-template-columns:1fr .6fr; gap:7px; }
.mimic-command-auth > :only-child { grid-column:1 / -1; }
.mimic-command-actions { display:flex; flex-wrap:wrap; gap:7px; }
.mimic-command-actions .small-button { flex:1 1 120px; }
.mimic-command-prepare { width:100%; }
.mimic-command-preview, .mimic-command-message { padding:8px; border-radius:8px; color:#8da2bc; background:rgba(65,169,255,.07); font-size:clamp(7px,1cqw,11px); }
.empty-state.compact { padding:12px; font-size:12px; }
.mimic-inspector { margin-top:14px; padding:18px; border:1px solid rgba(141,162,188,.16); border-radius:14px; background:rgba(8,18,30,.62); }
.mimic-inspector h3 { margin:0 0 6px; }
.mimic-geometry-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.mimic-inspector select { width:100%; color:#e8f0fb; background:#091626; border:1px solid rgba(141,162,188,.2); border-radius:10px; padding:12px 13px; }
.mimic-canvas-tools .form-field { flex:1 1 170px; margin:0; }
.mimic-canvas-tools .form-field:first-of-type { flex-basis:280px; }
.mimic-canvas-tools .form-field input { padding:8px 10px; }
.mimic-zoom-value { min-width:48px; color:#dce8f4; text-align:center; font-variant-numeric:tabular-nums; }
.status-toast { position:fixed; right:clamp(12px,2.5vw,30px); bottom:clamp(12px,2.5vw,30px); z-index:180; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:10px; width:min(430px,calc(100vw - 24px)); padding:14px 15px; border:1px solid rgba(141,162,188,.2); border-radius:13px; color:#e8f0fb; background:rgba(8,18,30,.97); box-shadow:0 18px 55px rgba(0,0,0,.42); }
.status-toast.success { border-color:rgba(40,224,178,.42); }
.status-toast.error { border-color:rgba(255,107,120,.46); }
.status-toast-icon { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; font-size:18px; font-weight:900; line-height:1; }
.status-toast.success .status-toast-icon { color:#07241c; background:#28e0b2; }
.status-toast.error .status-toast-icon { color:#2c080c; background:#ff6b78; }
.status-toast-message { min-width:0; padding-top:3px; overflow-wrap:anywhere; font-size:13px; line-height:1.45; }
.status-toast-close { border:0; padding:1px 3px; color:#8da2bc; background:transparent; font-size:20px; line-height:1; cursor:pointer; }
.operator-guide-hero { margin-bottom:18px; background:linear-gradient(135deg,rgba(40,224,178,.09),rgba(65,169,255,.07)); }
.operator-guide-hero h2 { margin:7px 0 10px; font-size:clamp(24px,3vw,38px); }
.operator-guide-lead { max-width:820px; margin:0; color:#a9bbcd; font-size:15px; line-height:1.65; }
.operator-access-summary { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; margin-top:20px; padding:13px 15px; border:1px solid rgba(40,224,178,.18); border-radius:12px; color:#8da2bc; background:rgba(4,13,24,.44); }
.operator-access-summary strong { color:#e8f0fb; }
.operator-guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.operator-guide-section { position:relative; padding:22px; overflow:hidden; }
.operator-guide-section h3 { margin:3px 0 14px; font-size:19px; }
.operator-guide-section > p { margin:10px 0; color:#9eb2c7; line-height:1.6; }
.guide-section-number { color:#28e0b2; font-size:11px; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
.guide-step { display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; margin:13px 0; }
.guide-step-number { display:grid; place-items:center; width:26px; height:26px; border:1px solid rgba(40,224,178,.3); border-radius:50%; color:#aaf5e2; background:rgba(40,224,178,.08); font-size:11px; font-weight:850; }
.guide-step strong { color:#dce8f4; font-size:13px; }
.guide-step p { margin:3px 0 0; color:#8da2bc; font-size:13px; line-height:1.5; }
.operator-guide-section .guide-note { padding:10px 12px; border-left:3px solid #41a9ff; border-radius:0 8px 8px 0; color:#a9bbcd; background:rgba(65,169,255,.08); }
.polling-config-editor { display:grid; gap:16px; margin-top:22px; padding-top:20px; border-top:1px solid rgba(141,162,188,.13); }
.poll-schedule-card, .role-access-template { display:grid; gap:10px; padding:16px; border:1px solid rgba(141,162,188,.16); border-radius:14px; background:rgba(4,13,24,.32); }
.poll-schedule-head, .polling-config-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.poll-schedule-card textarea { min-height:92px; }

@media (max-width: 1050px) {
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .section-grid { grid-template-columns:1fr; }
  .user-grid { grid-template-columns:1fr; }
  .login-layout { grid-template-columns:1fr; }
  .login-visual { min-height:320px; padding:40px; }
  .operator-guide-grid { grid-template-columns:1fr; }
  .role-management-layout { grid-template-columns:1fr; }
  .role-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 980px) {
  .scada-shell { grid-template-columns:1fr; }
  .sidebar { position:sticky; z-index:40; height:auto; display:flex; gap:6px; overflow-x:auto; padding:10px 12px; border-right:0; border-bottom:1px solid rgba(141,162,188,.13); scrollbar-width:none; }
  .sidebar::-webkit-scrollbar { display:none; }
  .brand { padding:0 10px 0 0; min-width:max-content; }
  .brand-title, .brand-subtitle, .sidebar-footer { display:none; }
  .nav-button { width:auto; min-width:max-content; padding:10px; }
  .main { padding-top:20px; }
  .topbar { align-items:flex-start; flex-wrap:wrap; }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .param-grid { grid-template-columns:1fr; }
  .controller-row { grid-template-columns:1fr auto; }
  .controller-row > :nth-child(2), .controller-row > :nth-child(3) { display:none; }
  .login-visual { display:none; }
  .login-panel { min-height:100vh; padding:18px; }
  .section-head { align-items:flex-start; flex-direction:column; }
  .section-head > div { width:100%; justify-content:flex-start; }
  .trend-controls .search { width:100%; }
  .mimic-section-head { flex-direction:column; }
  .mimic-header-actions { width:100%; }
  .mimic-geometry-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .modal-backdrop { place-items:stretch; padding:8px; }
  .modal-card { width:100%; max-height:100%; }
  .modal-scroll { padding:20px 18px 14px; }
  .modal-actions { grid-template-columns:1fr; padding:12px 18px 16px; }
  .modal-actions .modal-cancel { width:100%; }
}
@media (max-width: 520px) {
  .totp-setup { grid-template-columns:1fr; justify-items:center; text-align:center; }
  .invitation-row { align-items:flex-start; flex-direction:column; }
  .metric-grid { grid-template-columns:1fr; }
  .main { padding-left:12px; padding-right:12px; }
  .section-card { padding:14px; }
  .status-pill { padding:7px 9px; }
  .topbar { margin-bottom:20px; }
  .mimic-align-select { width:100%; min-width:0; }
  .sidebar .brand { display:none; }
  .mimic-mobile-hint { display:block; }
  .role-editor-heading { flex-direction:column; }
  .role-list, .capability-groups { grid-template-columns:1fr; }
  .register-table { min-width:0; table-layout:fixed; }
  .register-table th:nth-child(3), .register-table td:nth-child(3),
  .register-table th:nth-child(4), .register-table td:nth-child(4),
  .register-table th:nth-child(5), .register-table td:nth-child(5) { display:none; }
  .register-table th:first-child, .register-table td:first-child { width:58px; }
  .register-table th:last-child, .register-table td:last-child { width:88px; padding-left:6px; padding-right:6px; }
  .register-table th, .register-table td { padding:10px 8px; }
}