:root {
  font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  color: #233b30;
  background: #fafbf8;
  font-synthesis: none;
  --accent: #153e2f;
  --accent-hover: #24533f;
  --orange: #ff8b08;
  --muted: #62715f;
  --border: #e3e9e1;
  --line: #edf0eb;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
a { color: var(--accent); }
p { line-height: 1.8; }
h1, h2 { color: var(--accent); }
h1 { font-size: 27px; line-height: 1.35; letter-spacing: -.6px; font-weight: 650; margin: 0; }
h2 { font-size: 15px; line-height: 1.5; margin: 0; font-weight: 600; }
input, select, textarea {
  min-width: 0;
  max-width: 100%;
  border: 1px solid #dfe6dc;
  border-radius: 8px;
  background: #fff;
  color: inherit;
  padding: 11px 13px;
  transition: border-color .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover { border-color: #bccbbd; }
input:focus, select:focus, textarea:focus { border-color: #547a61; box-shadow: 0 0 0 3px #153e2f0a; }
button:focus-visible, input:focus-visible, a:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #ff8b0870;
  outline-offset: 3px;
}
.btn {
  border: 1px solid #dce5d9;
  background: #fff;
  color: #385141;
  border-radius: 8px;
  padding: 10px 16px;
  line-height: 1.4;
  white-space: nowrap;
  font-weight: 500;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover:not(:disabled) { background: #f2f6ef; border-color: #bccdb8; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { color: #a94937; background: #fffaf7; border-color: #eddcd3; }
.btn.danger:hover:not(:disabled) { background: #fff0e9; border-color: #dfb5a6; }
.btn.quiet { border-color: transparent; background: transparent; color: var(--muted); }
.btn.quiet:hover:not(:disabled) { color: var(--accent); background: #f2f6ef; border-color: transparent; }
.subtle { font-size: 14px; color: var(--muted); line-height: 1.8; }
.note { font-size: 12px; color: #62715f; line-height: 1.85; overflow-wrap: anywhere; }
.error-text { color: #b14c36; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.formfield { display: grid; gap: 9px; margin: 18px 0; color: #67766a; font-size: 13px; line-height: 1.5; }
.formfield input, .formfield select { width: 100%; font-size: 14px; color: #233b30; }

/* Login uses the selected image asset within a responsive layout. */
.login-screen {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #fafbf8;
}
.login-header {
  width: 100%;
  max-width: 1520px;
  min-height: 120px;
  margin: 0 auto;
  padding: 30px clamp(28px, 6.7vw, 100px);
  display: flex;
  align-items: center;
  gap: 26px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--accent); text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.brand-logo { display: block; width: 46px; height: 46px; object-fit: contain; flex-shrink: 0; }
.brand-name { font-size: 36px; line-height: 1.2; letter-spacing: -.7px; font-weight: 700; }
.brand-caption { padding-left: 26px; border-left: 1px solid #cfd9cd; color: #7b8278; font-size: 18px; line-height: 28px; letter-spacing: 1px; white-space: nowrap; }
.login-layout {
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 55% 45%;
  align-items: center;
  min-width: 0;
}
.login-art { position: relative; align-self: stretch; min-width: 0; min-height: 720px; overflow: hidden; }
.login-hero { position: absolute; display: block; width: 112%; height: auto; max-width: none; left: -6%; top: 50%; transform: translateY(-50%); object-fit: contain; object-position: center; }
.login-form-area {
  min-width: 0;
  min-height: 710px;
  border-left: 1px solid #e0e5dc;
  display: flex;
  align-items: center;
  padding: 42px clamp(34px, 6.6vw, 98px);
}
.login-card { width: 100%; max-width: 470px; margin: 0 auto; }
.login-card h1 { font-size: 44px; font-weight: 650; letter-spacing: -.8px; }
.login-heading-rule { width: 30px; height: 2px; margin: 22px 0 17px; background: var(--orange); }
.login-card > .subtle { margin: 0 0 48px; font-size: 20px; color: #62715f; }
.login-card .formfield { margin: 28px 0; gap: 16px; font-size: 18px; color: #647269; }
.login-card .formfield input {
  height: 66px;
  padding: 14px 16px;
  background: #f8faf7;
  border-color: #e0e5de;
  border-radius: 9px;
  font-size: 16px;
}
.login-card .formfield input:focus { background: #fff; border-color: #547a61; }
.login-submit { width: 100%; min-height: 66px; position: relative; margin-top: 5px; padding: 15px 50px; border-radius: 9px; font-size: 20px; letter-spacing: 4px; font-weight: 600; }
.button-arrow { position: absolute; top: 50%; right: 22px; transform: translateY(-50%); width: 25px; height: 25px; filter: invert(65%) sepia(80%) saturate(2917%) hue-rotate(357deg) brightness(101%) contrast(106%); }
.login-card .note { min-height: 20px; margin: 12px 0 0; }
.login-card .error-text { margin: -4px 0 15px; }
.login-footer { min-height: 60px; display: flex; align-items: center; justify-content: center; padding: 18px 24px; color: #879080; font-size: 14px; letter-spacing: .6px; text-align: center; }

/* Existing workspace controls retain their behavior and class names. */
.topbar {
  min-height: 80px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 max(28px, calc((100vw - 1280px) / 2));
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar .brand { gap: 9px; }
.topbar .brand-logo { width: 34px; height: 34px; }
.topbar .brand-name { font-size: 24px; letter-spacing: -.5px; }
.topbar nav { display: flex; align-items: center; gap: 5px; align-self: stretch; }
.topbar nav button { min-height: 40px; border: 1px solid transparent; border-radius: 8px; background: transparent; padding: 9px 22px; color: #62715f; font-weight: 500; }
.topbar nav button:hover { background: #f4f7f1; color: var(--accent); }
.topbar nav button.active { background: #edf3e9; border-color: #e2eadc; color: var(--accent); font-weight: 600; }
.user-menu { display: flex; align-items: center; gap: 14px; margin-left: auto; font-size: 12px; color: var(--muted); min-width: 0; }
.user-menu span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main { max-width: 1280px; margin: 0 auto; padding: 38px 28px 64px; min-width: 0; }
.heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 24px; }
.heading p { margin: 10px 0 0; }
.panel { background: #fff; border: 1px solid var(--border); border-radius: 12px; margin: 22px 0; overflow: hidden; min-width: 0; }
.panel-head { padding: 20px 24px; border-bottom: 1px solid var(--line); }
.pad { padding: 22px 24px; }
.compact-panel summary { font-weight: 550; padding: 19px 24px; color: #4c6250; }
.compact-panel[open] > summary { border-bottom: 1px solid var(--line); }
.compact-panel summary:hover { background: #fcfdfb; }
.table-tools { padding: 16px 24px; border-bottom: 1px solid var(--line); }
.table-tools input { max-width: 320px; width: 100%; padding: 10px 12px; font-size: 13px; }
.table-tools input::placeholder { color: #62715f; }
.tablewrap { width: 100%; max-width: 100%; overflow: auto; overscroll-behavior-inline: contain; }
table { border-collapse: collapse; width: 100%; min-width: 640px; text-align: left; font-size: 13px; line-height: 1.6; }
th { font-weight: 500; color: #62715f; background: #f7faf4; font-size: 12px; white-space: nowrap; }
td, th { padding: 18px 24px; border-bottom: 1px solid var(--line); vertical-align: middle; }
td strong { font-weight: 550; }
td small { display: block; color: #62715f; font-size: 11px; margin-top: 5px; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fcfdfb; }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.actions .btn { font-size: 12px; padding: 8px 12px; }
.tag { display: inline-block; border-radius: 5px; background: #f1f4ed; color: #62715f; padding: 5px 9px; white-space: nowrap; font-size: 11px; line-height: 1.5; }
.tag.ok { background: #eaf3e6; color: #4d7748; }
.device-overview { display: flex; gap: 24px; flex-wrap: wrap; color: #62715f; font-size: 12px; margin: 0 0 22px; align-items: center; }
.connection:before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: #bcc7b5; border-radius: 50%; vertical-align: middle; }
.connection.connected:before { background: #729b62; }
.connection-form { display: flex; align-items: end; gap: 14px; max-width: 680px; }
.connection-form .formfield { flex: 1; margin: 0; min-width: 0; }
.reason { border: 1px solid #eedfc9; border-radius: 9px; background: #fffaf1; color: #986c3a; padding: 14px 17px; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.empty { padding: 46px 24px; text-align: center; color: #62715f; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.stat { position: relative; padding: 23px; background: #fff; border: 1px solid var(--border); border-radius: 11px; min-width: 0; }
.stat span { display: block; font-size: 12px; color: #62715f; }
.stat b { display: block; font-weight: 600; font-size: 25px; letter-spacing: -.7px; margin-top: 14px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; color: var(--accent); }
.stat small { display: block; color: #62715f; font-size: 11px; line-height: 1.7; margin-top: 9px; }
.kv { display: grid; grid-template-columns: 125px minmax(0, 1fr); gap: 14px 22px; font-size: 13px; line-height: 1.8; margin: 8px 0 26px; }
.kv dt { color: #62715f; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.check { display: flex; align-items: center; gap: 9px; font-size: 13px; line-height: 1.8; margin: 18px 0; }
.check input { flex-shrink: 0; accent-color: var(--accent); width: 15px; height: 15px; }
.settlement-controls { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; }
.settlement-controls .formfield { flex: 1; min-width: 180px; margin: 0; }
.settlement-controls .check { margin: 8px 0; }
.settlement-scroll { max-height: 390px; overflow: auto; }
.settlement-scroll th { position: sticky; top: 0; z-index: 1; }
.settlement-json { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 300px; overflow: auto; font-size: 11px; line-height: 1.8; background: #f6f8f3; padding: 14px; border-radius: 7px; border: 1px solid var(--line); }
details summary { cursor: pointer; color: var(--accent); font-size: 13px; line-height: 1.5; }
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; border-radius: 9px; padding: 14px 22px; font-size: 13px; max-width: 90vw; line-height: 1.8; z-index: 20; box-shadow: 0 8px 28px #153e2f20; overflow-wrap: anywhere; }
noscript { display: block; padding: 20px; color: #a94937; text-align: center; }
.text-button { border:0; padding:12px 0 0; background:transparent; color:var(--accent); font-size:13px; text-decoration:underline; text-underline-offset:4px; }
.role-badge { padding:4px 7px; border-radius:5px; background:#edf3e9; color:var(--accent); font-size:11px; white-space:nowrap; }
.type-filter { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.type-filter .selected { color:var(--accent); border-color:#9eb8a0; background:#edf3e9; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; }
.team-root { display:flex; align-items:center; gap:20px; padding:17px 20px; background:#edf3e9; border-radius:10px; color:var(--accent); margin-bottom:22px; }
.team-root span,.node-caption { color:#62715f; font-size:12px; font-weight:400; margin-left:10px; }
.portal-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
#register-form .btn { min-height:46px; }
.team-node { margin-left:20px; }
@media(max-width:760px) {
 .topbar { flex-wrap:wrap; gap:10px; padding:12px 16px 8px; }
 .topbar nav { order:3; width:100%; flex-basis:100%; min-width:0; overflow-x:auto; gap:3px; }
 .topbar nav button { flex:1; padding:9px 12px; }
 .topbar .user-menu { margin-left:auto; gap:7px; }
 .topbar .user-menu #current-user { max-width:85px; }
 .topbar .user-menu .role-badge { padding:4px 6px; }
 .form-grid { grid-template-columns:1fr; }
 .portal-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .portal-stats .stat { padding:14px 10px; }
 .portal-stats .stat b { font-size:22px; }
 .team-root { gap:4px; justify-content:space-between; font-size:13px; }
 .team-root span { font-size:11px; }
 .team-node { margin-left:0; }
}

@media (min-width: 1600px) {
  .login-form-area { padding-right: 90px; padding-left: 100px; }
}
@media (max-width: 1100px) {
  .login-header { padding-left: 48px; padding-right: 48px; min-height: 108px; }
  .login-layout { grid-template-columns: 52% 48%; }
  .login-form-area { padding: 34px 40px; min-height: 590px; }
  .login-art { min-height: 610px; }
  .login-card h1 { font-size: 36px; }
  .login-card > .subtle { font-size: 17px; margin-bottom: 32px; }
  .login-card .formfield { margin: 23px 0; gap: 12px; font-size: 15px; }
  .login-card .formfield input { height: 56px; }
  .login-submit { min-height: 56px; font-size: 17px; }
  .topbar { gap: 26px; }
}
@media (max-width: 900px) {
  .login-header { min-height: 100px; padding: 26px 34px; }
  .brand-name { font-size: 28px; }
  .brand-logo { width: 40px; height: 40px; }
  .brand-caption { padding-left: 20px; font-size: 14px; }
  .login-form-area { padding: 28px 30px; }
  .login-card > .subtle { font-size: 14px; margin-bottom: 32px; }
  .login-card .formfield { font-size: 14px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar { padding: 0 24px; gap: 22px; }
  .topbar nav button { padding: 9px 17px; }
  td, th { padding: 16px 20px; }
}
@media (max-width: 700px) {
  .login-screen { grid-template-rows: auto 1fr auto; }
  .login-header { min-height: 90px; padding: 24px 26px; gap: 18px; }
  .login-header .brand { gap: 9px; }
  .login-header .brand-name { font-size: 27px; }
  .login-header .brand-logo { width: 37px; height: 37px; }
  .brand-caption { padding-left: 18px; line-height: 24px; font-size: 12px; letter-spacing: .3px; }
  .login-layout { display: block; align-self: center; padding: 28px 26px 46px; }
  .login-art { display: none; }
  .login-form-area { min-height: 0; border: 0; padding: 0; }
  .login-card { max-width: 420px; }
  .login-card h1 { font-size: 32px; }
  .login-heading-rule { margin: 20px 0 16px; }
  .login-card > .subtle { margin-bottom: 34px; font-size: 14px; }
  .login-card .formfield { margin: 23px 0; gap: 11px; font-size: 14px; }
  .login-card .formfield input { height: 54px; }
  .login-submit { min-height: 54px; font-size: 16px; }
  .login-footer { min-height: 56px; padding: 16px 22px; font-size: 11px; }
}
@media (max-width: 600px) {
  .topbar { min-height: 68px; padding: 0 16px; gap: 15px; }
  .topbar .brand { gap: 7px; }
  .topbar .brand-logo { width: 29px; height: 29px; }
  .topbar .brand-name { font-size: 20px; }
  .topbar nav { gap: 2px; }
  .topbar nav button { min-height: 36px; padding: 8px 12px; font-size: 13px; }
  .user-menu { gap: 4px; }
  .user-menu span { max-width: 70px; font-size: 11px; }
  .user-menu button { padding: 8px; font-size: 12px; }
  main { padding: 28px 16px 44px; }
  .heading { align-items: start; gap: 14px; margin-bottom: 22px; }
  h1 { font-size: 24px; }
  .heading p { font-size: 12px; margin-top: 9px; }
  .heading > .btn { padding: 9px 12px; font-size: 12px; }
  .device-overview { gap: 16px; margin-bottom: 20px; font-size: 11px; }
  .panel { margin: 18px 0; border-radius: 10px; }
  .pad { padding: 19px 18px; }
  .panel-head, .compact-panel summary { padding: 17px 18px; }
  .stats { gap: 11px; margin: 20px 0; }
  .stat { padding: 18px; }
  .stat b { font-size: 22px; }
  .stat span { font-size: 11px; }
  .stat small { font-size: 10px; }
  .kv { grid-template-columns: 95px minmax(0, 1fr); gap: 12px 16px; font-size: 12px; }
  .connection-form { display: block; }
  .connection-form button { margin-top: 14px; }
  .settlement-controls .formfield { min-width: 140px; }
  .settlement-controls { gap: 14px 11px; }
  .settlement-controls .btn { font-size: 12px; padding: 10px 12px; }
  .actions { min-width: 170px; }
  .actions .btn { padding: 7px 10px; }
  .table-tools { padding: 14px 18px; }
  .reason { padding: 12px 15px; font-size: 12px; }
  #toast { bottom: 18px; padding: 13px 18px; }
}
@media (max-width: 380px) {
  .topbar { padding: 0 12px; gap: 11px; }
  .topbar nav button { padding: 8px 10px; }
  .user-menu span { display: none; }
  .brand-caption { padding-left: 14px; }
  .login-header { gap: 14px; }
}
@media (max-height: 720px) and (min-width: 701px) {
  .login-header { min-height: 92px; padding-top: 20px; padding-bottom: 20px; }
  .login-form-area { min-height: 0; padding-top: 25px; padding-bottom: 20px; }
  .login-art { min-height: 475px; }
  .login-card > .subtle { margin-bottom: 25px; }
  .login-card .formfield { margin: 19px 0; }
  .login-card .formfield input { height: 51px; }
  .login-submit { min-height: 51px; }
  .login-footer { min-height: 48px; padding-top: 12px; padding-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  input, select, textarea, .btn { transition: none; }
}
@media(max-width:760px) {
 .topbar { padding:12px 16px 8px; gap:10px; }
 .topbar nav { width:100%; flex-basis:100%; order:3; }
 .topbar .user-menu #current-role { display:inline-block; }
}


/* Keep daily work separate from administrator setup. */
.topbar { min-height:72px; gap:32px; }
.topbar nav { gap:3px; }
.topbar nav button { padding:9px 18px; }
main { padding-top:32px; }
.heading { margin-bottom:22px; }
.heading h1 { font-size:26px; }
.heading p { margin-top:7px; }
.environment-panel { margin-top:0; }
.resource-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 18px; padding:18px 22px; border-bottom:1px solid var(--line); }
.resource-filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; flex:1; min-width:0; }
.resource-filters input { width:260px; flex:1 1 220px; min-width:0; font-size:13px; }
.resource-filters select { width:140px; max-width:190px; font-size:13px; }
.resource-count { color:var(--muted); font-size:12px; white-space:nowrap; }
.resource-empty { min-height:280px; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:42px 24px; text-align:center; }
.resource-empty h2 { font-size:20px; font-weight:600; }
.resource-empty p { color:var(--muted); font-size:13px; max-width:420px; margin:12px 0 24px; }
.resource-footer { display:flex; justify-content:space-between; align-items:center; gap:16px; color:var(--muted); font-size:12px; margin-top:16px; line-height:1.7; }
.status-link,.inline-link { border:0; padding:0; background:transparent; color:var(--accent); font-size:inherit; text-decoration:underline; text-underline-offset:3px; }
.status-link { white-space:nowrap; }
.settings-layout { display:grid; grid-template-columns:180px minmax(0,1fr); gap:26px; align-items:start; }
.settings-nav { display:grid; gap:6px; padding:8px 0; }
.settings-nav button { text-align:left; border:0; border-radius:8px; background:transparent; padding:13px 16px; color:var(--muted); }
.settings-nav button.selected { background:#edf3e9; color:var(--accent); font-weight:600; }
.settings-content { min-width:0; }
.settings-content > .panel { margin-top:0; }
.settings-description { margin:0 0 18px; color:var(--muted); font-size:13px; }
.settings-form { max-width:680px; }
.credentials-modal { position:fixed; inset:0; margin:auto; width:min(720px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); padding:0; overflow:auto; border:1px solid #dce5d9; border-radius:16px; background:#fff; color:#233b30; box-shadow:0 24px 90px #102f2840; }
.credentials-modal.wide-modal { width:min(1040px,calc(100vw - 32px)); }
.credentials-modal .settings-form { max-width:none; }
.credentials-modal .settlement-controls { flex-wrap:wrap; }
.action-confirm { width:min(460px,calc(100vw - 32px)); }
.action-confirm .actions { justify-content:flex-end; margin-top:24px; }
html { scrollbar-gutter:stable; }
.credentials-modal:not([open]) { display:none; }
.credentials-modal::backdrop { background:#102b2459; }
.credentials-modal .panel { margin:0; border:0; }
.credentials-modal .panel-head { padding-right:68px; }
.credentials-modal-close { position:absolute; top:14px; right:14px; z-index:1; padding:4px 9px; line-height:1; font-size:23px; }
.device-state-button { display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:5px; margin:-5px; border:1px solid transparent; border-radius:8px; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.device-state-button:hover,.device-state-button:focus-visible { border-color:#a9c0ad; background:#f3f8f1; }
.device-state-button small { font-size:11px; color:#607267; }
.tag.status-normal { color:#205b3e; background:#eaf4e6; }
.tag.status-abnormal,.tag.status-disabled { color:#9b3434; background:#fceeee; }
.tag.status-verification,.tag.status-restricted,.tag.status-maintenance { color:#8a6125; background:#fff4dd; }
.detail-clear { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:400; }
.detail-clear input { width:auto; }
.detail-actions { margin-top:20px; flex-wrap:wrap; }
.environment-panel td { padding-top:12px; padding-bottom:12px; }
.environment-panel .environment-select { width:34px; padding-left:16px; padding-right:6px; }
.environment-select input { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
.environment-panel .device-detail-row>td { padding:0 16px 14px; background:#f5f8f3; }
.device-details-float { box-sizing:border-box; max-width:calc(100vw - 68px); margin:0; padding:10px 16px 12px; border:1px solid #d7e2d4; border-radius:10px; background:white; box-shadow:0 5px 16px #183c2712; font-size:13px; }
.device-details-float header { display:flex; align-items:center; justify-content:space-between; padding-bottom:6px; }
.device-details-float header .btn { padding:0 7px; font-size:20px; line-height:1.2; }
.detail-line { display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:12px; min-height:36px; margin:0; padding:3px 0; border-top:1px solid #f0f3ed; }
.detail-line>span,.detail-line>label { color:#67766a; font-size:12px; }
.detail-line input,.detail-line select { box-sizing:border-box; width:100%; padding:6px 9px; height:32px; min-height:0; font-size:13px; border-radius:6px; }
.detail-value { display:flex; align-items:center; gap:10px; min-width:0; }
.detail-value>input { flex:1; min-width:0; }
.detail-clear { flex-shrink:0; gap:4px; white-space:nowrap; }
.detail-line .detail-clear input { width:13px; height:13px; padding:0; }
.detail-states { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.detail-state-select { display:flex; gap:8px; align-items:center; font-size:12px; }
.detail-state-select select { width:140px; }
.device-details-float .detail-actions { margin:8px 0 0 64px; gap:8px; }
.device-details-float .btn { padding:6px 12px; font-size:12px; }
.device-details-float small { color:#7a877d; font-size:11px; }
.detail-message { margin:8px 0; }
.batch-selection { max-height:100px; overflow:auto; font-size:13px; color:#67766a; }
@media(max-width:600px) { .detail-states { gap:8px; } .detail-state-select select { width:105px; } .device-details-float { padding:8px 10px; } .detail-line { grid-template-columns:40px minmax(0,1fr); gap:6px; } .device-details-float .detail-actions { margin-left:46px; } }
html:has(.credentials-modal[open]) { overflow:hidden; }
.settings-content .connection-form { margin-top:22px; }
.settings-content .form-grid .formfield { margin-top:8px; }
.section-tabs { display:flex; align-items:center; gap:22px; border-bottom:1px solid var(--border); margin:20px 0 0; }
.section-tabs button { border:0; border-bottom:2px solid transparent; padding:11px 0; margin-bottom:-1px; background:transparent; color:var(--muted); }
.section-tabs button.selected { color:var(--accent); border-color:var(--accent); font-weight:600; }
@media(max-width:1000px) {
 .topbar { gap:22px; }
 .topbar nav button { padding:9px 13px; }
 .user-menu { gap:8px; }
}
@media(max-width:760px) {
 .topbar { min-height:0; padding:12px 16px 8px; gap:10px; }
 .topbar nav { margin-top:2px; }
 .topbar nav button { min-width:0; padding:9px 8px; font-size:12px; }
 .settings-layout { grid-template-columns:1fr; gap:16px; }
 .settings-nav { display:flex; gap:6px; padding:0; overflow-x:auto; }
 .settings-nav button { text-align:center; flex:1; padding:12px 10px; white-space:nowrap; font-size:13px; }
 .resource-toolbar { padding:14px; gap:10px; flex-wrap:wrap; }
 .resource-filters { gap:8px; flex-basis:100%; }
 .resource-filters input { width:100%; flex:1 1 100%; }
 .resource-filters select { width:130px; max-width:44%; padding-left:8px; padding-right:8px; }
 .resource-count { margin-left:auto; }
 .resource-empty { min-height:260px; padding:34px 20px; }
 .resource-footer { align-items:start; flex-direction:column; gap:8px; }
 .heading .actions { min-width:0; gap:6px; justify-content:end; }
 .heading .actions .btn { padding:8px 11px; }
 .heading h1 { font-size:24px; }
 .resource-empty .actions { min-width:0; }
}
/* Keep the full Windows cluster name visible in the type selector. */
.resource-filters #env-filter { width:174px; flex:0 0 174px; max-width:100%; }
.device-requests-panel { margin-top:0; }
.device-requests-panel td { padding-top:12px; padding-bottom:12px; }
.request-counts { font-size:12px; color:var(--muted); white-space:nowrap; }
.request-date { white-space:nowrap; font-size:12px; }
.tag.request-status-pending { color:#8a6125; background:#fff4dd; }
.tag.request-status-preparing { color:#35668b; background:#edf4fb; }
.tag.request-status-completed { color:#205b3e; background:#eaf4e6; }
.tag.request-status-rejected { color:#9b3434; background:#fceeee; }
.request-rejection { max-width:260px; white-space:normal; overflow-wrap:anywhere; }
.device-request-modal { width:min(520px,calc(100vw - 32px)); }
.device-request-modal .formfield:first-child { margin-top:0; }
.request-dialog-actions { margin-top:22px; justify-content:flex-end; flex-wrap:wrap; }
.request-review-summary { overflow-wrap:anywhere; line-height:1.8; }
@media(max-width:760px) { .topbar nav { overflow-x:auto; } .topbar nav button { flex-shrink:0; white-space:nowrap; } }
.environment-panel .environment-actions { width:76px; text-align:right; }
.device-action-cell { display:flex; justify-content:flex-end; }
.device-actions-trigger.btn { width:34px; height:30px; padding:0 0 8px; font-size:24px; line-height:1; letter-spacing:1px; border:1px solid #dce5d9; background:#fff; color:#4a5b50; }
.device-actions-trigger.btn:hover,.device-actions-trigger[aria-expanded="true"] { border-color:#a9c0ad; background:#f2f6ef; }
.device-action-menu { position:fixed; z-index:30; min-width:176px; max-width:calc(100vw - 16px); padding:5px; border:1px solid #dfe6dc; border-radius:9px; background:#fff; box-shadow:0 9px 28px #193b2724; overflow:auto; overscroll-behavior:contain; }
.device-action-menu .actions { display:flex; flex-direction:column; align-items:stretch; min-width:0; gap:2px; }
.device-action-menu .btn { display:block; width:100%; border:0; border-radius:5px; padding:9px 12px; color:#385141; background:transparent; font-size:13px; font-weight:400; line-height:1.5; text-align:left; text-decoration:none; }
.device-action-menu .btn:hover:not(:disabled),.device-action-menu .btn:focus-visible { background:#f0f5ed; }
.device-action-menu .btn.danger { color:#a94937; }
.device-action-menu .btn.danger:hover:not(:disabled) { background:#fff0e9; }
.device-action-menu .btn:disabled { opacity:.4; }
.device-action-menu .note { margin:0; padding:8px 12px; font-size:12px; }
.node-label-button { border:0; border-bottom:1px dashed #afbfad; padding:0; background:transparent; color:#62715f; font-size:11px; line-height:1.6; text-align:left; cursor:pointer; }
.node-label-button:hover { color:var(--accent); border-bottom-color:var(--accent); }
.node-inline-form { width:180px; max-width:100%; margin-top:5px; }
.node-inline-form input { width:100%; height:30px; padding:4px 7px; border-radius:5px; font-size:12px; }
.node-inline-actions { display:flex; align-items:center; flex-wrap:wrap; gap:4px; margin-top:5px; }
.node-inline-actions .btn { padding:3px 8px; border-radius:5px; font-size:11px; }
.node-inline-form .node-inline-error { max-width:220px; margin-top:5px; color:#a94937; white-space:normal; overflow-wrap:anywhere; }
.bulk-delete-confirm .pad>p { max-height:min(50vh,360px); overflow:auto; white-space:pre-line; overflow-wrap:anywhere; padding-right:6px; }
/* AdsPower client handover and the two work-order queues. */
.ads-client-modal,.ads-team-modal { width:min(620px,calc(100vw - 32px)); }
.ads-delivery-details { display:grid; grid-template-columns:108px minmax(0,1fr); gap:12px 16px; margin:0 0 20px; font-size:14px; }
.ads-delivery-details dt { color:var(--muted); }
.ads-delivery-details dd { margin:0; overflow-wrap:anywhere; }
.ads-client-close { margin-top:22px; justify-content:flex-end; }
.request-tabs { display:flex; align-items:center; gap:8px; margin:0 0 18px; }
.request-tabs .btn.active { color:#174c37; background:#eaf2e4; border-color:#c4d7bc; font-weight:600; }
.request-checkbox { display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.8; margin:16px 0; }
.request-checkbox input { flex:0 0 auto; width:16px; height:16px; margin-top:4px; }
.request-team-summary { padding:12px 14px; border-radius:8px; background:#f2f6ef; font-size:13px; overflow-wrap:anywhere; }
.request-team-summary small { display:block; margin-top:5px; color:var(--muted); }
.request-profile-list { max-height:200px; overflow:auto; padding:8px 8px 8px 30px; border-radius:7px; background:#f7f9f5; overflow-wrap:anywhere; font-size:13px; }
.request-history { padding-left:20px; margin:18px 0 0; }
.request-history>li { padding:0 0 18px 8px; border-left:1px solid #dfe7d9; margin:0 0 2px; font-size:13px; overflow-wrap:anywhere; }
.request-history>li>small { display:block; margin-top:5px; color:var(--muted); }
.request-history>li>p { margin:8px 0; line-height:1.7; }
.request-history .ads-delivery-details { margin:12px 0 0; font-size:13px; }
.tag.request-status-awaiting_receipt { color:#79572c; background:#fff1d9; }
.ads-team-ready { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:13px; }
.ads-onboarding-panel .panel-head { flex-wrap:wrap; gap:12px; }
@media(max-width:600px) { .ads-delivery-details { grid-template-columns:90px minmax(0,1fr); gap:10px; } .ads-onboarding-panel .panel-head .actions { flex-wrap:wrap; } .request-counts { white-space:normal; } }
.ads-onboarding-guide { padding:14px 16px; border:1px solid #ecd5b5; border-radius:9px; background:#fff6e8; color:#63451f; }
.ads-onboarding-guide h3 { margin:0 0 10px; font-size:15px; line-height:1.5; color:#684114; }
.ads-onboarding-guide ol { display:flex; flex-wrap:wrap; gap:6px 10px; list-style:none; padding:0; margin:0 0 9px; font-size:13px; font-weight:600; line-height:1.7; }
.ads-onboarding-guide li { display:flex; align-items:center; gap:10px; }
.ads-onboarding-guide li:not(:last-child)::after { content:'→'; color:#ad8150; font-weight:400; }
.ads-onboarding-guide p { margin:0; font-size:13px; line-height:1.8; }
.ads-onboarding-guide strong { color:#8a4a12; font-weight:700; margin:0 2px; }
@media(max-width:800px),(max-height:600px) { .ads-onboarding-guide { padding:11px 13px; } .ads-onboarding-guide h3 { margin-bottom:7px; } .ads-onboarding-guide ol { margin-bottom:6px; } }
/* Administrator work-order notifications stay outside the page render surface. */
.work-order-notifications-toggle.btn { display:inline-flex; align-items:center; gap:6px; padding:7px 9px; white-space:nowrap; }
.work-order-notifications-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:10px; color:#fff; background:#bd582e; font-size:10px; font-weight:600; line-height:1; }
.work-order-notifications-popover { position:fixed; z-index:45; top:68px; right:24px; display:flex; flex-direction:column; width:390px; max-width:calc(100vw - 24px); max-height:min(580px,calc(100dvh - 86px)); border:1px solid #dbe4d6; border-radius:12px; background:#fff; box-shadow:0 15px 45px #153e2f26; overflow:hidden; }
.work-order-notifications-popover>header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; padding:14px 16px; border-bottom:1px solid var(--line); }
.work-order-notifications-popover>header h2 { font-size:14px; }
.work-order-notifications-popover>header .actions { gap:4px; }
.work-order-notifications-popover>header .btn { padding:5px 7px; font-size:12px; }
.notification-close.btn { padding:2px 7px; font-size:22px; line-height:1; }
.work-order-notifications-list { list-style:none; min-height:0; overflow:auto; overscroll-behavior:contain; padding:0; margin:0; }
.work-order-notification { border-bottom:1px solid var(--line); }
.work-order-notification:last-child { border-bottom:0; }
.work-order-notification>button { display:block; width:100%; border:0; padding:14px 16px; background:#fff; color:inherit; text-align:left; }
.work-order-notification.is-unread>button { background:#f6f9f2; }
.work-order-notification>button:hover { background:#edf4e7; }
.notification-item-title { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.notification-unread-dot { flex:0 0 auto; width:7px; height:7px; background:#c97037; border-radius:50%; }
.notification-item-summary { display:block; margin:7px 0; color:#63705e; font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.work-order-notification small { color:#7a8575; font-size:11px; }
.notification-empty { padding:30px 16px; text-align:center; color:var(--muted); font-size:13px; }
.notification-error { margin:0; padding:10px 16px; color:#a94937; font-size:12px; line-height:1.6; }
.work-order-notifications-card { position:fixed; z-index:42; right:24px; bottom:24px; width:340px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 40px); overflow:auto; padding:18px; border:1px solid #d9e3d1; border-radius:12px; background:#fff; box-shadow:0 12px 42px #153e2f26; }
.work-order-notifications-card strong { display:block; padding-right:26px; color:var(--accent); font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.work-order-notifications-card p { margin:8px 0 14px; color:var(--muted); font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.work-order-notifications-card>.notification-close { position:absolute; top:12px; right:10px; }
.work-order-notifications-card>.btn.primary { padding:7px 12px; font-size:12px; }
.notification-list-caption { margin:0; padding:8px 16px; border-top:1px solid var(--line); color:#7a8575; font-size:11px; }
@media(max-width:800px) { .work-order-notifications-popover { right:12px; } .work-order-notifications-card { right:12px; bottom:12px; } .user-menu .work-order-notifications-toggle { padding:6px; } }
@media(max-height:560px) { .work-order-notifications-card { bottom:10px; padding:14px; } .work-order-notifications-popover>header { padding:10px 14px; } .work-order-notification>button { padding:11px 14px; } }
/* Keep compact navigation horizontal when the administrator message entry is visible. */
@media(max-width:960px) {
 .topbar { display:grid; grid-template-columns:max-content minmax(0,1fr); align-items:center; min-height:0; gap:10px 16px; padding:12px 16px 8px; }
 .topbar>.brand { grid-column:1; grid-row:1; white-space:nowrap; }
 .topbar>.user-menu { grid-column:2; grid-row:1; justify-self:end; max-width:100%; margin-left:0; gap:8px; }
 .topbar .user-menu #current-user { max-width:120px; }
 .topbar .user-menu .role-badge,.topbar .user-menu>button { flex-shrink:0; }
 .topbar>nav { grid-column:1 / -1; grid-row:2; width:100%; min-width:0; margin:0; flex-basis:auto; align-self:auto; overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap; gap:4px; }
 .topbar>nav button { flex:0 0 auto; min-width:max-content; min-height:36px; padding:8px 14px; white-space:nowrap; }
}
@media(max-width:480px) {
 .topbar { column-gap:10px; padding-left:12px; padding-right:12px; }
 .topbar .user-menu #current-user { display:none; }
 .topbar .user-menu { gap:5px; }
 .topbar>nav button { padding:8px 12px; }
}
/* Give page actions a clear hierarchy without enlarging table or menu controls. */
.heading .actions>.btn.primary,.resource-toolbar>.actions>.btn.primary,#ads-team-create {
 min-height:44px; padding:11px 18px; border-radius:9px; font-size:14px; font-weight:600; line-height:1.4; color:#fff; background:#174d36; border-color:#174d36; box-shadow:0 4px 12px #174d3626;
}
.heading .actions>.btn.primary:hover:not(:disabled),.resource-toolbar>.actions>.btn.primary:hover:not(:disabled),#ads-team-create:hover:not(:disabled) { background:#216342; border-color:#216342; box-shadow:0 5px 14px #174d3633; }
#create-device-request,#ads-team-create { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; font-size:15px; font-weight:600; }
#create-device-request::before,#ads-team-create::before { content:'＋'; display:inline-block; flex:0 0 auto; font-size:20px; font-weight:400; line-height:1; }
#refresh-device-requests,#ads-team-refresh,#portal-refresh {
 display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:10px 15px; border:1px solid #94b18b; border-radius:9px; color:#24583b; background:#f1f7eb; font-size:14px; font-weight:600; line-height:1.4;
}
#refresh-device-requests::before,#ads-team-refresh::before,#portal-refresh::before { content:'↻'; display:inline-block; flex:0 0 auto; font-size:21px; font-weight:400; line-height:1; }
#refresh-device-requests:hover:not(:disabled),#ads-team-refresh:hover:not(:disabled),#portal-refresh:hover:not(:disabled) { background:#e6f0de; border-color:#6e9666; color:#194a30; }
#create-device-request:focus-visible,#ads-team-create:focus-visible,#refresh-device-requests:focus-visible,#ads-team-refresh:focus-visible,#portal-refresh:focus-visible { outline:3px solid #ff8b0880; outline-offset:3px; }
.heading .actions>.btn.primary:disabled,.resource-toolbar>.actions>.btn.primary:disabled,#ads-team-create:disabled { box-shadow:none; }
@media(max-width:600px) {
 .heading:has(#create-device-request) { flex-wrap:wrap; gap:12px; }
 .heading:has(#create-device-request)>.actions { min-width:0; max-width:100%; margin-left:auto; flex-wrap:wrap; gap:8px; }
 #create-device-request,#ads-team-create { padding:11px 14px; font-size:14px; }
 #refresh-device-requests,#ads-team-refresh,#portal-refresh { padding:10px 12px; }
 .ads-onboarding-panel .panel-head .actions { min-width:0; max-width:100%; }
}

.device-pagination { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 20px; border-top:1px solid #e6ece4; color:#56716a; font-size:13px; }
.device-pagination .actions { display:flex; gap:8px; }
.device-pagination .btn { min-height:36px; white-space:nowrap; }
@media(max-width:600px) { .device-pagination { align-items:flex-start; flex-direction:column; padding:14px; } .device-pagination .actions { align-self:flex-end; } }

/* Neutral text hierarchy: near-black content, gray supporting text, green actions. */
:root {
 --text-primary:#171a1f;
 --text-body:#292e36;
 --text-secondary:#667085;
 --muted:var(--text-secondary);
 --border:#dfe3e8;
 --line:#e9edf1;
 color:var(--text-body);
 background:#f5f6f8;
}
h1,h2,.panel-head h2,.compact-panel summary,.device-details-float header strong { color:var(--text-primary); }
th { color:#414957; background:#f1f3f5; font-weight:600; }
td { color:var(--text-body); }
td strong { color:var(--text-primary); font-weight:650; }
td small,.note,.subtle,.resource-count,.resource-footer,.device-pagination,.settings-description { color:var(--text-secondary); }
tbody tr:hover { background:#f7f9fb; }
.topbar nav button { color:#4b5563; }
.topbar nav button.active { color:var(--text-primary); font-weight:650; }
#current-user { color:var(--text-body); font-weight:500; }
.btn { color:var(--text-body); border-color:#dce1e7; }
.btn.quiet:not(.danger) { color:#4b5563; }
.btn.primary { color:#fff; }
/* Floating menus use a light surface, including their primary entry actions. */
.device-action-menu .btn.primary { color:#153e2f; background:#edf5ef; font-weight:600; }
.btn:disabled,.btn.quiet:disabled,.device-action-menu .btn:disabled,
.resource-toolbar>.actions>.btn.primary:disabled,.heading .actions>.btn.primary:disabled,
#ads-team-create:disabled,#refresh-device-requests:disabled,#ads-team-refresh:disabled,#portal-refresh:disabled {
 opacity:1; color:#818894; background:#f0f2f5; border-color:#e0e4e9; box-shadow:none;
}
input,select,textarea,.formfield input,.formfield select,.credentials-modal { color:var(--text-body); }
input::placeholder,textarea::placeholder,.table-tools input::placeholder { color:var(--text-secondary); opacity:1; }
.formfield,.detail-line>span,.detail-line>label { color:#414957; }
.device-state-button { color:var(--text-body); }
.device-state-button small { color:var(--text-secondary); }
.device-state-button .tag.status-details-empty{color:#667085;background:#f0f2f5;white-space:nowrap}
.device-state-button .tag.status-details-partial{color:#8a5b12;background:#fff5df;white-space:nowrap}
.tag:not(.ok):not([class*="status-"]) { color:#475467; background:#f0f2f5; }
.tag.ok { color:#286035; background:#e9f3e8; }
.notification-item-title,.work-order-notifications-card strong { color:var(--text-primary); }
.notification-item-summary,.work-order-notification small { color:var(--text-secondary); }
/* Device authorization: the API completion result is distinct from login details. */
.authorization-warning{display:inline-flex;vertical-align:middle;margin-left:3px;color:#dc2626}
.authorization-warning svg{fill:currentColor}
.authorization-warning .authorization-warning-mark{fill:#fff}
.authorization-start{border:0;background:transparent;padding:4px 8px;color:#b42318;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit}
.authorization-start:disabled{color:#667085;text-decoration:none;cursor:default}
.authorization-start:focus-visible{outline:2px solid #176b50;outline-offset:2px;border-radius:4px}
.device-authorization-modal{width:min(560px,calc(100vw - 32px))}
.device-authorization-modal .actions{flex-wrap:wrap;margin:16px 0}
.device-authorization-modal .authorization-guide{padding:12px;background:#f3f4f6;border-radius:8px;line-height:1.7}
.device-authorization-modal form{margin-top:18px}
.personal-invitation{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.personal-invitation code{font-size:22px;letter-spacing:1px;color:#171a1f;overflow-wrap:anywhere}
.personal-invitation .note{margin:8px 0}
.team-users-table{min-width:0;table-layout:fixed}
.team-users-table th:first-child{width:52%}
.team-users-table th:nth-child(2),.team-users-table th:last-child{width:24%}
.team-users-table th,.team-users-table td{padding:16px 20px;overflow-wrap:anywhere}
.team-users-table strong{color:#171a1f}
.team-tree-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border,#e4e7ec);color:#667085;font-size:13px;flex-wrap:wrap}
.team-tree-toolbar .actions{gap:6px}
.team-tree-toolbar .btn{min-height:34px;padding:6px 10px}
.team-users-table tbody[hidden]{display:none}
.team-leader-row td{background:#f6f9f6}
.team-node-toggle{display:flex;align-items:center;gap:12px;text-align:left;border:0;padding:0;background:transparent;color:#171a1f;font:inherit;cursor:pointer;width:100%}
.team-node-toggle:focus-visible{outline:2px solid #176b50;outline-offset:6px;border-radius:3px}
.team-node-toggle small{margin-top:4px;color:#667085;font-size:12px}
.team-node-arrow{display:inline-block;font-size:26px;line-height:1;width:14px;flex-shrink:0;color:#52655a;transition:transform .15s}
.team-node-toggle[aria-expanded="true"] .team-node-arrow{transform:rotate(90deg)}
.team-member-row td{padding-top:12px;padding-bottom:12px}
.team-member-row td:first-child{padding-left:56px;position:relative}
.team-member-row td:first-child:before{content:"";position:absolute;left:31px;top:calc(50% - 10px);width:12px;height:12px;border-left:1px solid #cbd5ce;border-bottom:1px solid #cbd5ce}
.team-children-empty{padding-left:56px!important;color:#667085;font-size:13px}
.team-section-label{background:#fafbfc;font-size:12px;color:#667085;padding-top:10px!important;padding-bottom:10px!important}
@media(max-width:600px){.team-tree-toolbar{padding:12px}.team-users-table th,.team-users-table td{padding-left:12px;padding-right:12px}.team-member-row td:first-child{padding-left:38px}.team-member-row td:first-child:before{left:17px}.team-node-toggle{gap:7px}}
.temporary-login-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 28px;background:#fff4df;color:#704600;border-bottom:1px solid #f2d39d}
.temporary-login-banner .btn{white-space:nowrap}
@media(max-width:600px){.temporary-login-banner{padding:12px 16px}.personal-invitation .actions{width:100%;flex-wrap:wrap}}

.authorization-account-info{margin:0 0 18px;padding:12px;border:1px solid #dce5df;border-radius:10px;background:#f8faf8}
.authorization-account-info header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 6px}
.authorization-account-info h3{margin:0 auto 0 0;font-size:14px;color:#173c2e}
.authorization-account-info .btn{padding:5px 9px;font-size:12px}
.authorization-account-row{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:8px;align-items:start;padding:8px 0;border-top:1px solid #e5ebe6;font-size:13px}
.authorization-account-value{white-space:pre-wrap;overflow-wrap:anywhere;max-height:8em;overflow:auto;user-select:text;color:#1b3027}
#authorization-account-copy-fallback{width:100%;min-height:72px;margin-top:10px;box-sizing:border-box}

/* Selected team workspace. Keep the theme inside the platform shell. */
#workspace {
 --accent:#123f32;
 --accent-hover:#205743;
 --text-primary:#171f28;
 --text-body:#303b49;
 --text-secondary:#748091;
 --muted:var(--text-secondary);
 --border:#e2e8e8;
 --line:#edf0f2;
 min-height:100svh;
 color:var(--text-body);
 background:#f8faf9;
 font-size:14px;
 line-height:1.5;
}
#workspace .topbar {
 display:flex;
 align-items:center;
 gap:34px;
 min-height:76px;
 padding:0 30px;
 border-bottom:1px solid #dfe6e4;
 background:#fff;
 box-shadow:none;
 z-index:15;
}
#workspace .topbar .brand { gap:10px; }
#workspace .topbar .brand-logo { width:36px; height:36px; }
#workspace .topbar .brand-name { color:#123f32; font-size:28px; font-weight:750; letter-spacing:-1px; }
#workspace .topbar nav { display:flex; align-items:center; align-self:stretch; gap:8px; }
#workspace .topbar nav button {
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:7px;
 min-height:42px;
 padding:10px 20px;
 border:1px solid transparent;
 border-radius:8px;
 background:transparent;
 color:#384454;
 font-size:14px;
 font-weight:500;
 white-space:nowrap;
}
#workspace .topbar nav button:hover { color:#123f32; background:#f3f7f3; }
#workspace .topbar nav button.active { color:#123f32; background:#edf5eb; border-color:#edf5eb; font-weight:700; }
#workspace .user-menu { gap:12px; color:#42505f; font-size:13px; }
#workspace #current-user { max-width:160px; color:#1a2832; font-weight:650; }
#workspace .role-badge { color:#234b3c; background:#eff5ef; padding:4px 7px; font-size:11px; }
#workspace .user-menu .btn { min-height:36px; padding:7px 9px; }
#workspace .work-order-notifications-badge { background:#ed812b; color:#fff; }
#workspace #main { max-width:1640px; margin:0 auto; padding:30px 30px 44px; min-width:0; }
#workspace h1 { color:var(--text-primary); font-size:25px; font-weight:730; line-height:1.3; letter-spacing:-.6px; }
#workspace h2 { color:var(--text-primary); font-weight:650; font-size:15px; }
#workspace h3 { color:var(--text-primary); }
#workspace .heading { margin-bottom:22px; align-items:center; }
#workspace .heading p { margin-top:6px; color:var(--text-secondary); line-height:1.7; }
#workspace .panel { border-color:var(--border); border-radius:11px; margin:20px 0; box-shadow:none; background:#fff; }
#workspace .panel-head { padding:18px 22px; border-color:var(--line); }
#workspace .pad { padding:22px; }
#workspace .actions { gap:8px; min-width:0; }
#workspace .btn {
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:7px;
 min-height:38px;
 padding:8px 13px;
 border:1px solid #d5dedb;
 border-radius:7px;
 background:#fff;
 color:#25473b;
 font-size:13px;
 font-weight:550;
 text-decoration:none;
 line-height:1.5;
 box-shadow:none;
}
#workspace .btn:hover:not(:disabled) { border-color:#86a694; background:#f5f9f4; color:#123f32; }
#workspace .btn.primary { background:#123f32; border-color:#123f32; color:#fff; font-weight:650; box-shadow:none; }
#workspace .btn.primary:hover:not(:disabled) { background:#205743; border-color:#205743; color:#fff; }
#workspace .btn.quiet { background:transparent; border-color:transparent; color:#526254; }
#workspace .btn.quiet:hover:not(:disabled) { color:#123f32; background:#f1f6f0; }
#workspace .btn.danger { color:#b34b42; border-color:#ead7d3; background:#fff; }
#workspace .btn.danger:hover:not(:disabled) { color:#9d302a; border-color:#daaba3; background:#fff7f5; }
#workspace .btn:disabled,
#workspace .heading .actions>.btn.primary:disabled,
#workspace .resource-toolbar>.actions>.btn.primary:disabled,
#workspace #ads-team-create:disabled,
#workspace #portal-refresh:disabled,
#workspace #refresh-device-requests:disabled,
#workspace #ads-team-refresh:disabled { color:#8b95a2; border-color:#e4e8eb; background:#f3f5f6; opacity:1; box-shadow:none; }
#workspace input,#workspace select,#workspace textarea { border-color:#dbe3e2; border-radius:7px; padding:10px 12px; color:#303b49; background:#fff; box-shadow:none; font-size:13px; }
#workspace input::placeholder,#workspace textarea::placeholder { color:#8a94a3; }
#workspace input:hover,#workspace select:hover,#workspace textarea:hover { border-color:#abc0b4; }
#workspace input:focus,#workspace select:focus,#workspace textarea:focus { border-color:#537f68; box-shadow:0 0 0 3px #eaf2e9; }
#workspace input[type="checkbox"] { width:16px; height:16px; padding:0; accent-color:#174c39; flex-shrink:0; }
#workspace .formfield { color:#526170; font-size:13px; gap:8px; margin:16px 0; }
#workspace .formfield input,#workspace .formfield select { color:#303b49; font-size:14px; }
#workspace .note,#workspace .subtle,#workspace td small { color:var(--text-secondary); }
#workspace .reason { border-color:#eedabd; background:#fff9ed; color:#8c632c; font-size:13px; }
#workspace .tag { border-radius:5px; padding:4px 8px; font-size:11px; font-weight:500; line-height:1.5; }
#workspace .tag.ok,#workspace .tag.status-normal { color:#275b3c; background:#eaf4e8; }
#workspace .tag.status-verification,#workspace .tag.status-restricted,#workspace .tag.status-maintenance { color:#98622d; background:#fff2df; }
#workspace .tag.status-disabled,#workspace .tag.status-abnormal { color:#ab4040; background:#fcecec; }
#workspace table { color:var(--text-body); font-size:13px; line-height:1.5; }
#workspace th { background:#f4f6f7; color:#465262; font-size:12px; font-weight:650; }
#workspace th,#workspace td { padding:16px 20px; border-color:var(--line); }
#workspace td strong { color:#19232d; font-weight:650; }
#workspace td small { font-size:11px; line-height:1.7; }
#workspace tbody tr:hover { background:#fbfdfb; }
#workspace .empty { color:var(--text-secondary); padding:46px 22px; }
#workspace .compact-panel summary { padding:17px 22px; color:#475c4f; }
#workspace .stat { border-color:var(--border); border-radius:10px; padding:22px; }
#workspace .stat b { color:#123f32; font-size:29px; font-weight:700; margin-top:10px; }
#workspace .stat span { color:#657580; font-size:13px; }
#workspace .stat small { color:#8a95a0; }
#workspace .settings-nav button.selected,#workspace .request-tabs .btn.active { background:#edf5eb; color:#174c39; }
#workspace .section-tabs { margin-top:18px; gap:24px; }
#workspace .section-tabs button { color:#748091; padding:12px 0; }
#workspace .section-tabs button.selected { color:#174c39; border-color:#174c39; }
#workspace .personal-invitation code { color:#123f32; }
#workspace .team-leader-row td { background:#f3f8f1; }
#workspace .credentials-modal { border-color:#dce5df; border-radius:13px; box-shadow:0 24px 80px #183b2c40; }
#workspace .credentials-modal::backdrop { background:#13271f70; }
#workspace .credentials-modal .panel { border:0; border-radius:inherit; margin:0; }
#workspace .credentials-modal .panel-head { padding-right:64px; }
#workspace .credentials-modal-close { display:flex; min-height:30px; padding:3px 8px; font-size:22px; }
#workspace .work-order-notifications-popover,#workspace .work-order-notifications-card { border-color:#dfe7df; border-radius:11px; }
#workspace .work-order-notifications-popover>header .btn { min-height:30px; }
#workspace .work-order-notification.is-unread>button { background:#f3f8ee; }
#workspace .temporary-login-banner { margin:-30px -30px 24px; padding:11px 30px; }
#workspace .veec-icon { display:inline-block; width:19px; height:19px; flex:0 0 auto; vertical-align:middle; object-fit:contain; }
#workspace .veec-provider-icon { display:block; width:28px; height:28px; flex:0 0 auto; object-fit:contain; }

/* Team-first device page: member scope at left, operational records at right. */
#workspace .veec-device-page { min-width:0; }
#workspace .veec-page-head { display:flex; justify-content:space-between; align-items:center; gap:18px; margin:0 0 22px; }
#workspace .veec-page-head h1 { margin:0; }
#workspace .veec-page-head p { margin:6px 0 0; color:#7a8593; font-size:13px; line-height:1.6; }
#workspace .veec-page-head .actions { flex-shrink:0; }
#workspace .veec-page-head .btn { min-height:42px; padding:10px 17px; font-size:14px; }
#workspace .veec-device-layout { display:grid; grid-template-columns:206px minmax(0,1fr); align-items:start; gap:24px; min-width:0; }
#workspace .veec-member-sidebar { background:#fff; border:1px solid var(--border); border-radius:10px; padding:18px 11px 12px; position:sticky; top:100px; min-width:0; max-height:calc(100dvh - 124px); overflow-y:auto; overscroll-behavior:contain; }
#workspace .veec-sidebar-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:9px; padding:0 5px 15px; }
#workspace .veec-sidebar-head strong,#workspace .veec-sidebar-head h2 { color:#1c2931; font-size:15px; font-weight:700; }
#workspace .veec-sidebar-head a,#workspace .veec-sidebar-head .text-button { color:#285b44; font-size:11px; margin:0; padding:0; text-decoration:underline; text-underline-offset:3px; }
#workspace .veec-member-button {
 display:flex;
 align-items:center;
 gap:10px;
 position:relative;
 width:100%;
 min-height:43px;
 margin:3px 0;
 padding:10px 10px;
 border:1px solid transparent;
 border-radius:6px;
 color:#4a5868;
 background:transparent;
 text-align:left;
 font:inherit;
 font-size:13px;
}
#workspace .veec-member-button:hover { background:#f5f8f4; color:#174c39; }
#workspace .veec-member-button.selected { color:#123f32; background:#eef6ec; border-left:3px solid #f2872f; padding-left:8px; font-weight:650; }
#workspace .veec-member-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#workspace .veec-member-count { margin-left:auto; color:#8b95a0; font-size:12px; font-variant-numeric:tabular-nums; }
#workspace .veec-member-button.selected .veec-member-count { color:#285b44; }
#workspace .veec-member-avatar { display:inline-flex; align-items:center; justify-content:center; width:29px; height:29px; border-radius:50%; background:#edf4ed; color:#2d5c45; flex:0 0 auto; font-size:12px; font-weight:600; }
#workspace .veec-member-divider { border:0; border-top:1px solid #e7ece9; margin:13px 8px; }
#workspace .veec-member-list { display:grid; gap:2px; margin:8px 0; }
#workspace .veec-roster-footer { display:flex; align-items:center; gap:9px; margin:24px 7px 2px; padding:15px 3px 4px; border-top:1px solid #e7ece9; color:#23503b; font-size:12px; font-weight:550; text-decoration:none; }
#workspace .veec-roster-footer:hover { color:#123f32; text-decoration:underline; text-underline-offset:3px; }
#workspace .veec-member-sidebar>.note { padding:8px 9px 0; margin:5px 0 0; font-size:11px; }
#workspace .veec-sidebar-footer { margin-top:24px; padding:10px 7px 0; border-top:1px solid #edf0ed; }
#workspace .veec-sidebar-footer .btn { justify-content:flex-start; width:100%; padding:7px 4px; font-size:12px; }
#workspace .veec-device-main { min-width:0; }
#workspace .veec-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:0 0 22px; }
#workspace .veec-metric { display:grid; grid-template-columns:46px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; column-gap:18px; row-gap:4px; min-height:105px; padding:20px 23px; border:1px solid #dfe8e2; border-radius:10px; background:#fff; }
#workspace .veec-metric-icon { display:block; grid-column:1; grid-row:1/3; width:46px; height:46px; padding:10px; border-radius:9px; background:#eff6ed; object-fit:contain; }
#workspace .veec-metric-icon .veec-icon { width:25px; height:25px; }
#workspace .veec-metric-label { display:block; grid-column:2; grid-row:1; align-self:end; color:#667582; font-size:13px; line-height:1.5; }
#workspace .veec-metric-value { display:block; grid-column:2; grid-row:2; align-self:start; color:#183e30; font-size:33px; font-weight:720; letter-spacing:-.9px; font-variant-numeric:tabular-nums; line-height:1.2; margin-top:0; }
#workspace #veec-authorization-summary { display:block; grid-column:2; grid-row:2; align-self:start; }
#workspace #veec-authorization-summary .status-link { font-size:11px; margin-top:5px; }
#workspace .veec-metric-value small { color:#7a8990; font-size:12px; font-weight:400; letter-spacing:0; margin-left:7px; }
#workspace .veec-metric-note { display:block; margin:5px 0 0; color:#8d97a1; font-size:11px; line-height:1.6; }
#workspace .veec-metrics>.veec-metric-note { grid-column:1/-1; margin-top:-8px; padding-left:2px; }
#workspace .veec-device-main>.environment-panel { margin:0; border-color:#e2e8e8; border-radius:9px; overflow:visible; }
#workspace .veec-device-main .resource-toolbar { padding:16px; gap:12px; align-items:center; border-color:#e8edef; }
#workspace .veec-device-main .resource-filters { gap:9px; }
#workspace .veec-device-main .resource-filters select { height:39px; padding:8px 30px 8px 11px; width:132px; flex:0 1 132px; max-width:100%; font-size:12px; }
#workspace .veec-device-main .resource-filters #env-filter { width:156px; flex-basis:156px; }
#workspace .veec-device-main .resource-filters input { min-width:150px; height:39px; padding:9px 12px; flex:1 1 190px; font-size:12px; }
#workspace .veec-device-main .resource-toolbar>.actions { gap:8px; margin-left:auto; }
#workspace .veec-device-main #portal-refresh { min-height:39px; padding:8px 11px; border-color:transparent; background:transparent; color:#28533e; font-size:13px; box-shadow:none; }
#workspace .veec-device-main #portal-refresh::before { content:none; }
#workspace .veec-device-main #portal-refresh:hover:not(:disabled) { border-color:#d8e5d6; background:#f4f8f0; }
#workspace .veec-device-main .resource-count { color:#8b95a0; font-size:11px; }
#workspace .veec-device-table { min-width:0; width:100%; table-layout:fixed; }
#workspace .veec-device-table th,#workspace .veec-device-table td { padding:17px 12px; overflow-wrap:anywhere; vertical-align:middle; }
#workspace .veec-device-table th { padding-top:14px; padding-bottom:14px; font-size:11px; color:#465262; background:#f5f7f8; }
#workspace .veec-device-table .device-column-sort { display:inline-flex; align-items:center; gap:5px; padding:0; min-height:24px; border:0; background:transparent; box-shadow:none; color:inherit; font:inherit; font-weight:600; cursor:pointer; text-align:left; }
#workspace .veec-device-table .device-column-sort>span { color:#85928b; font-size:12px; }
#workspace .veec-device-table th[aria-sort=ascending] .device-column-sort,#workspace .veec-device-table th[aria-sort=descending] .device-column-sort { color:#164b35; }
#workspace .veec-device-table .device-column-sort:focus-visible { outline:2px solid #3b765c; outline-offset:3px; border-radius:3px; }
#workspace .veec-device-table .device-column-filter { display:block; width:100%; min-width:0; min-height:28px; height:28px; margin:7px 0 0; padding:3px 19px 3px 6px; border:1px solid #dce5df; border-radius:5px; background-color:#fff; color:#42594e; font-size:11px; text-overflow:ellipsis; }
#workspace .veec-device-table .veec-device-selection { width:38px; padding-left:15px; padding-right:7px; }
#workspace .veec-device-table .veec-device-identity { width:22%; }
#workspace .veec-device-table .veec-device-usage { width:15%; }
#workspace .veec-device-table .veec-device-account { width:17%; }
#workspace .veec-device-table .veec-device-auth { width:10%; text-align:center; }
#workspace .veec-device-table .veec-device-actions { width:155px; text-align:right; padding-right:15px; }
#workspace .veec-device-table thead th.environment-select { width:38px; padding-left:15px; padding-right:7px; }
#workspace .veec-device-table:has(thead .environment-select) thead th:nth-child(2),#workspace .veec-device-table:not(:has(thead .environment-select)) thead th:first-child { width:23%; }
#workspace .veec-device-table:has(thead .environment-select) thead th:nth-child(3),#workspace .veec-device-table:not(:has(thead .environment-select)) thead th:nth-child(2) { width:13%; }
#workspace .veec-device-table:has(thead .environment-select) thead th:nth-child(4),#workspace .veec-device-table:not(:has(thead .environment-select)) thead th:nth-child(3) { width:12%; }
#workspace .veec-device-table:has(thead .environment-select) thead th:nth-child(5),#workspace .veec-device-table:not(:has(thead .environment-select)) thead th:nth-child(4) { width:16%; }
#workspace .veec-device-table:has(thead .environment-select) thead th:nth-child(6),#workspace .veec-device-table:not(:has(thead .environment-select)) thead th:nth-child(5) { width:10%; text-align:center; }
#workspace .veec-device-table thead th.environment-actions { width:155px; padding-right:15px; text-align:right; }
#workspace .veec-device-row { background:#fff; }
#workspace .veec-device-row.is-selected,#workspace .veec-device-row:has(input[data-select-env]:checked) { background:#f1f8ee; }
#workspace .veec-device-identity>div,#workspace .veec-device-name { display:flex; align-items:center; gap:11px; min-width:0; }
#workspace .veec-device-title>div { flex:1; min-width:0; }
#workspace .veec-device-identity strong { color:#17252b; font-size:13px; font-weight:700; }
#workspace .veec-device-identity small { font-size:10px; line-height:1.65; }
#workspace .veec-device-meta { margin-top:5px; color:#8b95a1; font-size:11px; line-height:1.65; }
#workspace .veec-device-meta .node-label-button { color:#78868f; font-size:11px; }
#workspace .veec-device-reference { display:block; color:#8b95a1; margin-top:4px; font-size:10px; line-height:1.5; }
#workspace .veec-device-reference[data-device-reference] { overflow-wrap:anywhere; }
#workspace .veec-device-account .device-state-button { gap:0; margin:0; padding:0; border-radius:5px; }
#workspace .veec-device-account .device-state-button:hover { border-color:transparent; background:transparent; }
#workspace .veec-device-account .device-state-button small { font-size:10px; }
#workspace .veec-account-line { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin:5px 0; color:#7d8895; font-size:11px; }
#workspace .veec-account-line>span:first-child { color:#7d8895; }
#workspace .veec-device-auth .authorization-start { border:0; border-radius:5px; padding:5px 8px; color:#b14442; background:#fff0ee; text-decoration:none; font-size:11px; font-weight:550; }
#workspace .veec-device-auth .authorization-start:hover:not(:disabled) { background:#ffe3df; }
#workspace .veec-device-auth .authorization-start:disabled { color:#89949d; background:#f1f3f5; }
#workspace .veec-device-auth .tag { white-space:normal; }
#workspace .veec-device-actions .device-action-cell { gap:7px; align-items:center; justify-content:flex-end; flex-wrap:nowrap; }
#workspace .veec-row-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:nowrap; gap:7px; min-width:0; }
#workspace .veec-row-actions>.device-action-cell { flex:0 0 auto; }
#workspace .veec-row-actions>.veec-device-open { min-width:0; overflow-wrap:anywhere; white-space:normal; }
#workspace .veec-device-actions .btn { min-height:33px; padding:6px 10px; font-size:11px; white-space:nowrap; }
#workspace .veec-device-actions .veec-use-button,#workspace .veec-device-actions .veec-device-open,#workspace .veec-device-actions .btn.primary { min-width:87px; border-color:#8aab94; color:#1e4d38; background:#fff; box-shadow:none; }
#workspace .veec-device-actions .veec-use-button:hover:not(:disabled),#workspace .veec-device-actions .veec-device-open:hover:not(:disabled),#workspace .veec-device-actions .btn.primary:hover:not(:disabled) { background:#edf5e9; border-color:#477b59; color:#123f32; }
#workspace .veec-device-actions .device-actions-trigger.btn { width:32px; min-width:32px; height:33px; padding:0 0 7px; color:#3f505a; border:1px solid #dce3e5; border-radius:6px; background:#fafcfc; font-size:23px; }
#workspace .veec-row-actions .device-actions-trigger.btn:has(img) { padding:0; }
#workspace .veec-row-actions .device-actions-trigger .veec-icon { width:20px; height:20px; }
#workspace .veec-device-main .device-pagination { padding:16px; border-top:1px solid #eef1f2; background:#fff; border-radius:0 0 9px 9px; color:#83909b; font-size:11px; }
#workspace .veec-device-main .device-pagination .btn { min-height:33px; padding:6px 10px; font-size:11px; }
#workspace .veec-device-main .resource-footer { margin:13px 2px 20px; font-size:11px; }
#workspace .veec-device-main .resource-footer>span { color:#99a1a9; }
#workspace .veec-device-main .compact-panel { margin-top:19px; }
#workspace .veec-device-main .compact-panel summary { font-size:12px; padding:15px 18px; color:#61736b; }
#workspace .veec-device-table .device-detail-row>td,#workspace .veec-device-table .veec-device-detail-row>td { padding:0 13px 13px; background:#f2f7ee; }
#workspace .veec-device-table .device-details-float { max-width:100%; border-color:#dce8da; border-radius:8px; padding:12px 16px; box-shadow:none; }
#workspace .veec-device-table .device-details-float header { padding-bottom:9px; }
#workspace .veec-device-table .detail-line { min-height:37px; padding:4px 0; }
#workspace .veec-device-table .detail-line input,#workspace .veec-device-table .detail-line select { height:31px; min-height:0; padding:5px 8px; font-size:12px; }
#workspace .veec-selection-bar { position:sticky; bottom:0; z-index:10; display:flex; align-items:center; flex-wrap:wrap; gap:13px; margin:20px 0 -20px; padding:16px 22px; border:1px solid #d8e5da; border-radius:10px; background:#fff; box-shadow:0 -5px 20px #274f3310; }
#workspace .veec-selection-bar>strong { margin-right:6px; color:#174a36; font-size:15px; white-space:nowrap; }
#workspace .veec-selection-bar form { display:flex; align-items:center; flex-wrap:wrap; gap:11px; min-width:0; }
#workspace .veec-selection-bar .formfield { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin:0; }
#workspace .veec-selection-bar label { color:#566656; font-size:12px; }
#workspace .veec-selection-bar select { width:190px; min-height:39px; font-size:12px; }
#workspace .veec-selection-bar .btn { min-height:39px; padding:8px 14px; font-size:12px; }
#workspace .veec-selection-bar .note { margin:0 0 0 auto; font-size:11px; }
#workspace .veec-selection-bar>small { display:block; width:100%; margin-top:0; color:#8b969c; font-size:10px; line-height:1.6; }

/* Menus are portalled to body by the existing menu controller. */
body:has(#workspace:not([hidden]))>.device-action-menu { padding:6px; border-color:#dce5df; border-radius:9px; background:#fff; box-shadow:0 10px 30px #243f2826; }
body:has(#workspace:not([hidden]))>.device-action-menu .btn { border:0; border-radius:5px; color:#41564a; font-size:13px; padding:9px 12px; }
body:has(#workspace:not([hidden]))>.device-action-menu .btn.primary { color:#164b35; background:#edf5e9; }
body:has(#workspace:not([hidden]))>.device-action-menu .btn:hover:not(:disabled) { color:#174b36; background:#f1f7ec; }
body:has(#workspace:not([hidden]))>.device-action-menu .btn.danger { color:#ac463b; }
body:has(#workspace:not([hidden]))>.device-action-menu .btn.danger:hover:not(:disabled) { background:#fff1ed; }

@media(min-width:1600px) {
 #workspace .topbar { padding-left:max(30px,calc((100vw - 1580px)/2)); padding-right:max(30px,calc((100vw - 1580px)/2)); }
 #workspace .veec-device-table th,#workspace .veec-device-table td { padding-left:16px; padding-right:16px; }
}
@media(max-width:1200px) {
 #workspace .topbar { gap:24px; padding-left:24px; padding-right:24px; }
 #workspace .topbar nav { gap:3px; }
 #workspace .topbar nav button { padding:10px 13px; }
 #workspace #main { padding:24px 22px 36px; }
 #workspace .veec-device-layout { grid-template-columns:184px minmax(0,1fr); gap:18px; }
 #workspace .veec-member-sidebar { padding-left:9px; padding-right:9px; }
 #workspace .veec-device-table th,#workspace .veec-device-table td { padding-left:9px; padding-right:9px; }
 #workspace .veec-device-table .veec-device-actions { width:142px; }
 #workspace .veec-device-table thead th.environment-actions { width:142px; }
 #workspace .veec-device-identity strong { font-size:12px; }
 #workspace .veec-device-main .resource-filters select { width:116px; flex-basis:116px; }
 #workspace .veec-device-main .resource-filters #env-filter { width:147px; flex-basis:147px; }
 #workspace .veec-device-main .resource-filters input { flex-basis:180px; }
 #workspace .temporary-login-banner { margin:-24px -22px 22px; padding:11px 22px; }
}
@media(max-width:1020px) {
 #workspace .topbar { display:grid; grid-template-columns:max-content minmax(0,1fr); min-height:0; gap:10px 18px; padding:13px 22px 8px; }
 #workspace .topbar>.brand { grid-column:1; grid-row:1; }
 #workspace .topbar>.user-menu { grid-column:2; grid-row:1; margin-left:0; justify-self:end; gap:9px; }
 #workspace .topbar>nav { grid-column:1/-1; grid-row:2; width:100%; min-width:0; margin:0; align-self:auto; gap:5px; overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap; }
 #workspace .topbar>nav button { min-height:36px; padding:8px 16px; flex:0 0 auto; }
 #workspace .veec-device-layout { grid-template-columns:1fr; gap:17px; }
 #workspace .veec-member-sidebar { position:static; display:flex; align-items:center; gap:7px; overflow-x:auto; overflow-y:hidden; max-height:none; padding:10px 12px; border-radius:8px; }
 #workspace .veec-sidebar-head { padding:0 12px 0 0; flex:0 0 auto; display:grid; gap:4px; }
 #workspace .veec-sidebar-head strong,#workspace .veec-sidebar-head h2 { font-size:12px; }
 #workspace .veec-sidebar-head a { font-size:10px; }
 #workspace .veec-member-button { width:auto; min-width:max-content; min-height:38px; padding:8px 12px; flex:0 0 auto; gap:8px; font-size:12px; }
 #workspace .veec-member-button.selected { padding-left:10px; }
 #workspace .veec-member-count { margin-left:4px; font-size:11px; }
 #workspace .veec-member-sidebar>.note,#workspace .veec-sidebar-footer { display:none; }
 #workspace .veec-member-list { display:flex; gap:7px; margin:0; flex:0 0 auto; }
 #workspace .veec-roster-footer { flex:0 0 auto; white-space:nowrap; margin:0 0 0 8px; padding:8px 5px 8px 12px; border-top:0; border-left:1px solid #e7ece9; font-size:11px; }
 #workspace .veec-member-divider { align-self:stretch; width:1px; border:0; border-left:1px solid #e7ece9; margin:3px 7px; }
 #workspace .veec-member-avatar { width:24px; height:24px; font-size:10px; }
 #workspace .veec-metrics { margin-bottom:18px; }
 #workspace .veec-metric { min-height:96px; padding:17px 20px; }
 #workspace .veec-metric-value { font-size:30px; }
 #workspace .veec-device-main .resource-filters input { flex-basis:210px; }
}
@media(max-width:760px) {
 #workspace .topbar { gap:9px 12px; padding:12px 16px 8px; }
 #workspace .topbar .brand { gap:8px; }
 #workspace .topbar .brand-logo { width:30px; height:30px; }
 #workspace .topbar .brand-name { font-size:23px; }
 #workspace .topbar>.user-menu { gap:6px; font-size:11px; }
 #workspace .topbar .user-menu #current-user { max-width:100px; font-size:12px; }
 #workspace .topbar>nav { gap:3px; }
 #workspace .topbar>nav button { min-height:35px; padding:8px 13px; font-size:12px; }
 #workspace .topbar .user-menu .btn { padding:5px 7px; min-height:32px; font-size:11px; }
 #workspace .topbar .role-badge { padding:3px 5px; font-size:10px; }
 #workspace #main { padding:19px 14px 30px; }
 #workspace h1 { font-size:22px; }
 #workspace .heading { flex-wrap:wrap; gap:12px; margin-bottom:17px; }
 #workspace .heading .actions { margin-left:auto; }
 #workspace .panel-head,#workspace .pad { padding:17px; }
 #workspace .stats { gap:10px; }
 #workspace .stat { padding:16px 12px; }
 #workspace .stat b { font-size:24px; }
 #workspace .stat span { font-size:11px; }
 #workspace .portal-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
 #workspace .portal-stats .stat b { font-size:21px; }
 #workspace .veec-page-head { gap:12px; margin-bottom:17px; align-items:flex-start; }
 #workspace .veec-page-head p { font-size:12px; max-width:220px; }
 #workspace .veec-page-head .actions { flex-wrap:wrap; justify-content:flex-end; gap:6px; }
 #workspace .veec-page-head .btn { min-height:37px; padding:8px 12px; font-size:12px; }
 #workspace .veec-member-sidebar { margin:0; padding:8px 10px; gap:5px; }
 #workspace .veec-sidebar-head { padding-right:9px; }
 #workspace .veec-member-button { padding:7px 10px; font-size:11px; min-height:35px; }
 #workspace .veec-member-button.selected { padding-left:8px; }
 #workspace .veec-member-button .veec-icon { width:16px; height:16px; }
 #workspace .veec-member-avatar { width:22px; height:22px; }
 #workspace .veec-metrics { gap:10px; margin-bottom:16px; }
 #workspace .veec-metric { min-height:102px; padding:14px; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; row-gap:7px; }
 #workspace .veec-metric-icon { display:none; }
 #workspace .veec-metric-label { grid-column:1; font-size:11px; }
 #workspace .veec-metric-value { grid-column:1; font-size:29px; margin-top:0; }
 #workspace #veec-authorization-summary { grid-column:1; }
 #workspace .veec-metric-note { font-size:10px; }
 #workspace .veec-device-main>.environment-panel { background:transparent; border:0; }
 #workspace .veec-device-main .resource-toolbar { display:flex; align-items:center; padding:12px; gap:10px; border:1px solid var(--border); border-radius:9px; background:#fff; margin-bottom:12px; }
 #workspace .veec-device-main .resource-filters { display:flex; gap:8px; flex-basis:100%; }
 #workspace .veec-device-main .resource-filters select,#workspace .veec-device-main .resource-filters #env-filter { width:calc(50% - 4px); flex:1 1 calc(50% - 4px); max-width:100%; height:37px; font-size:12px; }
 #workspace .veec-device-main .resource-filters input { width:100%; flex:1 1 100%; min-width:0; height:37px; }
 #workspace .veec-device-main .resource-toolbar>.actions { width:100%; justify-content:space-between; flex-wrap:wrap; }
 #workspace .veec-device-main #portal-refresh { min-height:33px; padding:5px 8px; }
 #workspace .veec-device-main .tablewrap { overflow:visible; }
 #workspace .veec-device-table { display:block; min-width:0; width:100%; border-collapse:separate; table-layout:auto; }
 #workspace .veec-device-table thead { display:block; }
 #workspace .veec-device-table thead tr { display:flex; align-items:center; gap:8px; padding:0 5px 9px; }
 #workspace .veec-device-table thead th { display:none; }
 #workspace .veec-device-table thead th.environment-select { display:flex; width:auto; align-items:center; gap:9px; border:0; padding:0; background:transparent; color:#6a7782; font-size:11px; }
 #workspace .veec-device-table thead th.environment-select::after { content:'全选本页'; }
 #workspace .veec-device-table tbody { display:grid; gap:12px; }
 #workspace .veec-device-table .veec-device-row { display:grid; grid-template-columns:24px minmax(0,1fr) minmax(0,1fr); gap:0 8px; padding:14px; border:1px solid #dfe7e2; border-radius:9px; background:#fff; }
 #workspace .veec-device-row.is-selected,#workspace .veec-device-row:has(input[data-select-env]:checked) { border-color:#b9cfb6; background:#f3f9ef; }
 #workspace .veec-device-table .veec-device-row>td { display:block; width:auto; padding:8px 0; border:0; font-size:12px; overflow-wrap:anywhere; }
 #workspace .veec-device-table .veec-device-row>.veec-device-selection { grid-column:1; grid-row:1; width:24px; padding-top:2px; }
 #workspace .veec-device-table .veec-device-row>.veec-device-identity { grid-column:2/-1; grid-row:1; padding-top:0; padding-bottom:11px; }
 #workspace .veec-device-table .veec-device-row>.veec-device-identity::before { display:none; }
 #workspace .veec-device-table .veec-device-identity strong { font-size:14px; }
 #workspace .veec-device-table .veec-device-identity small { font-size:11px; }
 #workspace .veec-provider-icon { width:27px; height:27px; }
 #workspace .veec-device-table .veec-device-row>td[data-label]::before { display:block; content:attr(data-label); margin-bottom:5px; color:#85929a; font-size:10px; font-weight:400; line-height:1.5; }
 #workspace .veec-device-table .veec-device-row>td:not(.veec-device-selection):not(.veec-device-identity):not(.veec-device-actions) { grid-column:auto; }
 #workspace .veec-device-table .veec-device-row>.veec-device-selection~td:not(.veec-device-identity):not(.veec-device-actions) { margin-left:0; }
 #workspace .veec-device-table .veec-device-row>.veec-device-usage { grid-column:2!important; }
 #workspace .veec-device-table .veec-device-row>.veec-device-account { grid-column:3!important; grid-row:2/span 2; }
 #workspace .veec-device-table .veec-device-row>.veec-device-auth { grid-column:2!important; text-align:left; }
 #workspace .veec-device-table .veec-device-row>.veec-device-owner { grid-column:2/-1!important; grid-row:4; padding-top:7px; padding-bottom:6px; border-top:1px solid #edf1ec; }
 #workspace .veec-device-table .veec-device-row>.veec-device-owner::before { display:inline; margin-right:7px; }
 #workspace .veec-device-owner small { display:inline; margin-left:8px; font-size:11px; }
 #workspace .veec-device-table .veec-device-row>.veec-device-actions { grid-column:2/-1; padding-top:9px; padding-bottom:0; margin-top:2px; border-top:1px solid #edf1ec; text-align:left; }
 #workspace .veec-device-table .veec-device-row>.veec-device-actions::before { display:none; }
 #workspace .veec-device-actions .device-action-cell { justify-content:space-between; gap:9px; }
 #workspace .veec-row-actions { justify-content:space-between; gap:9px; }
 #workspace .veec-device-actions .btn { min-height:36px; padding:7px 13px; font-size:12px; }
 #workspace .veec-device-actions .veec-use-button,#workspace .veec-device-actions .veec-device-open,#workspace .veec-device-actions .btn.primary { min-width:112px; }
 #workspace .veec-device-actions .device-actions-trigger.btn { height:36px; min-height:36px; width:36px; min-width:36px; }
 #workspace .veec-device-table .device-detail-row,#workspace .veec-device-table .veec-device-detail-row { display:block; margin-top:-6px; }
 #workspace .veec-device-table .device-detail-row>td,#workspace .veec-device-table .veec-device-detail-row>td { display:block; border:0; padding:0; border-radius:8px; }
 #workspace .veec-device-table .device-details-float { max-width:100%; padding:11px 12px; border-color:#b9cfb6; }
 #workspace .veec-device-table .device-details-float header strong { font-size:12px; }
 #workspace .veec-device-table .device-details-float .detail-line { grid-template-columns:40px minmax(0,1fr); gap:7px; }
 #workspace .veec-device-table .device-details-float .detail-actions { margin-left:47px; }
 #workspace .veec-device-main .device-pagination { margin-top:12px; padding:12px; border:1px solid var(--border); border-radius:8px; display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:10px; }
 #workspace .veec-device-main .device-pagination .actions { margin-left:auto; }
 #workspace .veec-device-main .resource-footer { font-size:10px; }
 #workspace .veec-selection-bar { gap:9px; padding:13px; margin:16px 0 -15px; border-radius:9px; }
 #workspace .veec-selection-bar>strong { width:100%; margin:0; font-size:13px; }
 #workspace .veec-selection-bar form { width:100%; gap:9px; align-items:flex-end; }
 #workspace .veec-selection-bar .formfield { display:grid; gap:6px; flex:1 1 140px; }
 #workspace .veec-selection-bar select { width:auto; flex:1 1 130px; min-width:100px; }
 #workspace .veec-selection-bar .btn { min-height:36px; font-size:11px; padding:7px 10px; }
 #workspace .veec-selection-bar .note { width:100%; margin:0; font-size:10px; }
 #workspace .temporary-login-banner { margin:-19px -14px 17px; padding:10px 14px; font-size:12px; }
}
@media(max-width:480px) {
 #workspace .topbar { padding-left:12px; padding-right:12px; }
 #workspace .topbar .user-menu #current-user { display:none; }
 #workspace .topbar nav button { padding-left:11px; padding-right:11px; }
 #workspace .veec-page-head { flex-wrap:wrap; }
 #workspace .veec-page-head .actions { margin-left:auto; }
 #workspace .veec-page-head p { max-width:none; }
 #workspace .veec-device-table .veec-device-row { grid-template-columns:19px minmax(0,1fr) minmax(0,1fr); gap:0 6px; padding:12px; }
 #workspace .veec-device-table .veec-device-identity>div,#workspace .veec-device-name { gap:9px; }
 #workspace .veec-metric { padding:13px 12px; }
 #workspace .veec-metric-value { font-size:28px; }
 #workspace .veec-metric-note { line-height:1.5; }
 #workspace .veec-selection-bar label { width:100%; }
 #workspace .veec-selection-bar select { flex-basis:150px; }
}

/* Match the selected reference: a flat workspace and one horizontal summary. */
#workspace { background:#fff; }
#workspace .topbar nav button { font-size:15px; }
#workspace #main:has(.veec-device-page) { max-width:none; padding:0; }
#workspace .veec-device-layout { grid-template-columns:220px minmax(0,1fr); gap:0; }
#workspace .veec-member-sidebar { display:flex; flex-direction:column; align-items:stretch; top:76px; min-height:calc(100svh - 76px); max-height:calc(100dvh - 76px); padding:28px 13px 20px; border:0; border-right:1px solid #e4e9e8; border-radius:0; background:#fff; }
#workspace .veec-sidebar-head { padding:0 7px 20px; }
#workspace .veec-sidebar-head strong,#workspace .veec-sidebar-head h2 { font-size:17px; }
#workspace .veec-sidebar-head a { font-size:12px; }
#workspace .veec-member-button { min-height:48px; gap:11px; padding:12px 12px; font-size:14px; border-radius:6px; }
#workspace .veec-member-button.selected { padding-left:10px; }
#workspace .veec-member-button .veec-icon { width:22px; height:22px; }
#workspace .veec-member-count { font-size:13px; }
#workspace .veec-roster-footer { margin-top:auto; padding-top:19px; font-size:14px; }
#workspace .veec-device-main { padding:0 26px 32px; background:#fff; }
#workspace .veec-metrics { display:flex; align-items:center; flex-wrap:wrap; gap:0; min-height:100px; margin:0 -26px 24px; padding:20px 26px; border-bottom:1px solid #e5eae8; background:#fff; }
#workspace .veec-metric { display:flex; align-items:center; flex-wrap:nowrap; min-height:0; gap:12px; margin:0; padding:0 28px; border:0; border-radius:0; background:transparent; }
#workspace .veec-metric:first-child { padding-left:4px; border-right:1px solid #dfe7e4; }
#workspace .veec-metric-icon { display:block; width:27px; height:27px; padding:0; border-radius:0; background:transparent; }
#workspace .veec-metric-label { font-size:15px; line-height:1.5; white-space:nowrap; }
#workspace .veec-metric-value { display:inline-block; font-size:35px; line-height:1.2; margin:0 0 0 2px; }
#workspace #veec-authorization-summary { display:block; }
#workspace .veec-metrics>.veec-metric-note { margin:0 0 0 16px; padding:0; color:#8a95a1; font-size:12px; }
#workspace .veec-page-head { margin-bottom:20px; }
#workspace .veec-page-head h1 { font-size:27px; }
#workspace .veec-page-head p { font-size:14px; }
#workspace .veec-page-head>.btn { min-height:41px; padding:9px 19px; font-size:14px; }
#workspace .veec-device-main>.environment-panel { border-radius:6px; }
#workspace table { font-size:14px; }
#workspace th { font-size:13px; }
#workspace td small { font-size:12px; }
#workspace .veec-device-table { font-size:14px; }
#workspace .veec-device-table th { font-size:12px; padding-top:16px; padding-bottom:16px; }
#workspace .veec-device-table td { padding-top:19px; padding-bottom:19px; }
#workspace .veec-device-identity strong { font-size:15px; }
#workspace .veec-device-identity small { font-size:12px; }
#workspace .veec-device-title { gap:12px; }
#workspace .veec-provider-icon { width:31px; height:31px; }
#workspace .veec-device-title [data-device-reference] small,#workspace .veec-device-title .node-label-button { font-size:12px; }
#workspace .veec-device-account .device-state-button small { font-size:11px; }
#workspace .veec-device-table .tag { padding:5px 9px; font-size:12px; }
#workspace .veec-device-auth .authorization-start { padding:6px 10px; font-size:12px; }
#workspace .veec-device-actions .btn { min-height:38px; padding:8px 12px; font-size:13px; }
#workspace .veec-device-actions .device-actions-trigger.btn { width:35px; min-width:35px; height:38px; min-height:38px; }
#workspace .veec-device-main .resource-toolbar { padding:15px 16px; }
#workspace .veec-device-main .resource-filters select,#workspace .veec-device-main .resource-filters input { height:42px; font-size:13px; }
#workspace .veec-device-main #portal-refresh { min-height:40px; font-size:14px; }
#workspace .veec-device-main .resource-count { font-size:12px; }
#workspace .veec-device-main .device-pagination { font-size:12px; }
#workspace .veec-device-main .device-pagination .btn { min-height:36px; font-size:12px; }
#workspace .veec-selection-bar { border-radius:0; margin-left:-26px; margin-right:-26px; padding:17px 26px; border-left:0; border-right:0; }
#workspace .veec-selection-bar>strong { font-size:16px; }
#workspace .veec-selection-bar .btn,#workspace .veec-selection-bar select,#workspace .veec-selection-bar .formfield { font-size:13px; }
#workspace .temporary-login-banner { margin:0; padding:11px 26px; }
@media(min-width:1600px) {
 #workspace .veec-device-identity strong { font-size:16px; }
}
@media(max-width:1200px) {
 #workspace .veec-device-layout { grid-template-columns:220px minmax(0,1fr); gap:0; }
 #workspace .veec-device-main { padding-left:22px; padding-right:22px; }
 #workspace .veec-metrics { margin-left:-22px; margin-right:-22px; padding-left:22px; padding-right:22px; }
 #workspace .veec-metric { gap:9px; padding-left:19px; padding-right:19px; }
 #workspace .veec-metric-label { font-size:14px; }
 #workspace .veec-metric-value { font-size:32px; }
 #workspace .veec-metrics>.veec-metric-note { flex-basis:100%; margin:10px 0 0 4px; font-size:11px; }
 #workspace .veec-selection-bar { margin-left:-22px; margin-right:-22px; padding-left:22px; padding-right:22px; }
}
@media(max-width:1020px) {
 #workspace .veec-device-layout { grid-template-columns:1fr; gap:0; }
 #workspace .veec-member-sidebar { flex-direction:row; align-items:center; gap:7px; min-height:0; max-height:none; padding:10px 20px; border:0; border-bottom:1px solid #e5eae8; border-radius:0; position:static; }
 #workspace .veec-sidebar-head { padding:0 14px 0 0; }
 #workspace .veec-sidebar-head strong,#workspace .veec-sidebar-head h2 { font-size:13px; }
 #workspace .veec-sidebar-head a { font-size:11px; }
 #workspace .veec-member-button { min-height:39px; padding:8px 12px; font-size:13px; }
 #workspace .veec-member-count { font-size:12px; }
 #workspace .veec-roster-footer { margin:0 0 0 8px; padding:8px 5px 8px 12px; font-size:12px; }
 #workspace .veec-metrics { min-height:86px; padding-top:18px; padding-bottom:18px; margin-bottom:22px; }
 #workspace .veec-metrics>.veec-metric-note { flex-basis:auto; margin:0 0 0 18px; }
}
@media(max-width:760px) {
 #workspace .topbar nav button { font-size:13px; }
 #workspace .veec-device-main { padding:0 14px 28px; }
 #workspace .veec-member-sidebar { padding:9px 12px; }
 #workspace .veec-member-button { min-height:37px; padding:7px 10px; font-size:12px; }
 #workspace .veec-member-button .veec-icon { width:19px; height:19px; }
 #workspace .veec-metrics { min-height:86px; margin:0 -14px 19px; padding:15px 14px; }
 #workspace .veec-metric { min-height:0; gap:8px; padding:0 14px; }
 #workspace .veec-metric:first-child { padding-left:0; }
 #workspace .veec-metric-icon { width:21px; height:21px; }
 #workspace .veec-metric-label { font-size:12px; }
 #workspace .veec-metric-value { font-size:29px; }
 #workspace .veec-metrics>.veec-metric-note { flex-basis:100%; margin:9px 0 0; font-size:11px; }
 #workspace .veec-page-head h1 { font-size:23px; }
 #workspace .veec-page-head p { font-size:13px; }
 #workspace .veec-device-main>.environment-panel { border:0; border-radius:0; }
 #workspace .veec-device-table .veec-device-row>td { font-size:13px; padding-top:8px; padding-bottom:8px; }
 #workspace .veec-device-table .veec-device-identity strong { font-size:15px; }
 #workspace .veec-device-table .veec-device-identity small { font-size:12px; }
 #workspace .veec-device-table .veec-device-row>.veec-device-selection { padding-top:2px; }
 #workspace .veec-device-table .veec-device-row>.veec-device-identity { padding-top:0; padding-bottom:12px; }
 #workspace .veec-device-table .veec-device-row>td[data-label]::before { font-size:11px; }
 #workspace .veec-device-table .tag { font-size:12px; padding:4px 8px; }
 #workspace .veec-device-actions .btn { min-height:38px; font-size:13px; padding:8px 13px; }
 #workspace .veec-device-main .resource-filters select,#workspace .veec-device-main .resource-filters input { height:39px; font-size:13px; }
 #workspace .veec-selection-bar { margin-left:-14px; margin-right:-14px; padding:14px; border-radius:0; }
 #workspace .veec-selection-bar>strong { font-size:14px; }
 #workspace .veec-selection-bar .btn,#workspace .veec-selection-bar select,#workspace .veec-selection-bar .formfield { font-size:12px; }
 #workspace .veec-device-table .device-detail-row>td,#workspace .veec-device-table .veec-device-detail-row>td { display:block; padding:0; }
 #workspace .temporary-login-banner { margin:0; padding:10px 14px; }
}
@media(max-width:420px) {
 #workspace .veec-metric { gap:6px; padding-left:10px; padding-right:10px; }
 #workspace .veec-metric-label { font-size:11px; }
 #workspace .veec-metric-value { font-size:27px; }
 #workspace .veec-metric-icon { width:19px; height:19px; }
}

/* Final desktop reading scale for the selected team layout. */
@media(min-width:1021px) {
 #workspace .veec-metric-label { font-size:16px; }
 #workspace .veec-metric-value { font-size:40px; color:#111c19; }
 #workspace .veec-member-button { font-size:15px; }
 #workspace .veec-sidebar-head strong { font-size:17px; }
 #workspace .veec-device-identity strong { font-size:16px; }
 #workspace .veec-device-identity small,#workspace .veec-login-marker { font-size:12px; }
}
/* Preserve the source's readable desktop hierarchy without changing compact breakpoints. */
@media(min-width:1300px) {
 #workspace .veec-device-layout { grid-template-columns:280px minmax(0,1fr); }
 #workspace .veec-member-button { font-size:16px; }
 #workspace .veec-sidebar-head strong { font-size:19px; }
 #workspace .veec-sidebar-head a { font-size:14px; }
 #workspace .veec-metric-label { font-size:18px; }
 #workspace .veec-metric-value { font-size:44px; }
 #workspace .veec-device-table { font-size:15px; }
 #workspace .veec-device-table th { font-size:14px; }
 #workspace .veec-device-table td { padding-top:17px; padding-bottom:17px; }
 #workspace .veec-device-identity strong { font-size:18px; margin-bottom:5px; }
 #workspace .veec-device-identity small { display:inline; font-size:13px; }
 #workspace .veec-device-identity [data-device-reference] { display:inline; margin-left:7px; font-size:13px; }
 #workspace .veec-device-account .tag,#workspace .veec-device-usage .tag { font-size:13px; }
 #workspace .veec-login-marker { font-size:13px; }
 #workspace .veec-device-main .resource-filters select,#workspace .veec-device-main .resource-filters input { font-size:14px; }
}
@media(min-width:1300px) {
 #workspace .veec-device-identity strong { display:block; }
}

/* A readable connection address, without a separate naming workflow. */
#workspace .veec-device-address { display:block; margin:4px 0; font-size:13px; line-height:1.5; color:#35483f; overflow-wrap:anywhere; }
#workspace .veec-device-address>span:first-child { color:#6a776f; }

/* Weekly quantity billing. */
.weekly-billing-notice{margin:16px 28px 0;padding:14px 20px;border:1px solid #c8dcd1;background:#eff8f2;border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#143d2c;font-weight:600}
.weekly-billing-notice[hidden]{display:none}
.weekly-billing-tabs{margin-bottom:22px;gap:10px}
.weekly-bill-dialog{width:min(880px,calc(100vw - 32px));max-height:86dvh;margin:auto;padding:0;border:1px solid #d8e2dc;border-radius:16px;background:#fff;color:#152b23;overflow:auto;box-shadow:0 24px 100px #132d3240}
.weekly-bill-dialog::backdrop{background:#142c3366;backdrop-filter:blur(3px)}
.weekly-bill-dialog .panel-head{display:flex;justify-content:space-between;align-items:center}
.weekly-bill-dialog textarea{width:100%;min-height:76px}
.weekly-bill-dialog details{margin-top:22px}
.stat .weekly-bill-period{font-size:20px}
@media(max-width:640px){.weekly-billing-notice{margin:10px 12px 0;padding:12px;align-items:flex-start;flex-wrap:wrap}.weekly-bill-dialog{width:calc(100vw - 20px)}}

.resource-subnav{margin:18px 28px 0;display:flex;gap:10px;border-bottom:1px solid #e0e7e2;padding-bottom:12px}.resource-subnav[hidden]{display:none}.resource-subnav .btn{min-width:84px}@media(max-width:640px){.resource-subnav{margin:12px 14px 0}}

/* Resource tabs stay below the actual responsive header height. */
.resource-subnav{position:sticky;top:var(--resource-header-height,80px);z-index:4;background:#fff;margin-top:0;padding-top:12px;padding-bottom:12px;box-shadow:0 5px 8px #183c2508}
.list-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-top:1px solid #e0e7e2;color:#52645a;font-size:13px;scroll-margin-top:calc(var(--resource-header-height,80px) + 76px)}
.list-pagination:focus{outline:none}.list-pagination .actions{gap:8px}
.environment-panel{scroll-margin-top:calc(var(--resource-header-height,80px) + 76px)}
@media(max-width:640px){.resource-subnav{margin-top:0}.list-pagination{flex-wrap:wrap;padding:12px 16px}}

.page-numbers{display:flex;gap:6px;overflow-x:auto;max-width:100%;flex-wrap:nowrap}.page-numbers .btn{flex-shrink:0;min-width:36px}.list-pagination{flex-wrap:wrap}.proxy-full-address{display:flex;align-items:center;gap:12px}.proxy-full-address code{word-break:break-all;white-space:normal;user-select:text}#proxy-search{flex:1;min-width:200px}

/* Domain-organized email resources. */
.email-resource-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0}.email-resource-toolbar form{flex:1;min-width:0}.email-resource-toolbar input{min-width:180px;flex:1;max-width:380px}
.email-resource-layout{display:grid;grid-template-columns:minmax(190px,240px) minmax(0,1fr);gap:20px;align-items:start}.email-domain-panel,.email-resource-table{margin:0}.email-domain-list{padding:8px;max-height:65vh;overflow-y:auto}.email-domain{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:12px;border:0;border-radius:8px;background:transparent;color:#273f34;text-align:left;cursor:pointer}.email-domain>span:first-child{overflow-wrap:anywhere}.email-domain>span:last-child{font-size:12px;flex-shrink:0;color:#63766b}.email-domain.active{background:#eaf2e8;color:#153f2e;font-weight:600}.email-domain:hover{background:#f1f5ef}.email-resource-table .panel-head{justify-content:space-between}.email-resource-table td:first-child{overflow-wrap:anywhere}.email-state{display:inline-block;white-space:nowrap;font-size:12px;padding:4px 9px;border-radius:5px;background:#f0f2f4;color:#54616c}.email-state.is-normal{background:#e8f3e6;color:#214f36}.email-state.is-banned{background:#fff0ee;color:#b3342a}.resource-subnav{overflow-x:auto}.resource-subnav .btn{flex-shrink:0}
@media(max-width:800px){.email-resource-layout{grid-template-columns:1fr}.email-domain-list{display:flex;overflow-x:auto;max-height:none;gap:4px}.email-domain{width:auto;min-width:150px;flex-shrink:0}.email-resource-toolbar .actions{flex-wrap:wrap}.email-resource-toolbar input{max-width:none}.email-resource-toolbar select{min-width:140px;flex:1}}
.email-domain.is-unassigned,.email-domain-value.is-unassigned{color:#168047}.email-domain.is-assigned,.email-domain.is-assigned.active,.email-domain.is-assigned:hover,.email-domain.is-assigned:focus-visible,.email-domain-value.is-assigned{color:#c03333}.email-domain.is-assigned.active{background:#fff0ee}.email-domain.is-assigned:hover{background:#fff5f3}.email-domain-meta{display:flex;align-items:center;gap:7px;flex-shrink:0}.email-domain-assigned-badge{display:inline-block;padding:2px 5px;border-radius:4px;background:#fff0ee;color:#c03333;font-size:11px;line-height:1.5;white-space:nowrap;font-weight:500}.email-domain.is-assigned.active .email-domain-assigned-badge,.email-domain.is-assigned:hover .email-domain-assigned-badge{color:#c03333;background:#ffe4e1}.email-domain-value{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.email-domain-count{font-size:12px;color:#63766b}

/* Device tags are user text, independent from status badges. */
.veec-device-tags{min-width:110px;max-width:190px}.device-labels{display:flex;gap:5px;flex-wrap:wrap}.device-label{font-size:12px;line-height:1.5;color:#3b5d45;background:#f0f5eb;border:1px solid #dce6d5;border-radius:5px;padding:2px 7px;overflow-wrap:anywhere;max-width:170px}.device-label-empty{color:#8b978f}

#workspace .veec-device-table th.device-tags-heading{width:12%;text-align:left}#workspace .veec-device-table .veec-device-tags{width:12%}

#workspace .veec-device-table:has(thead .environment-select) thead th:nth-child(6),#workspace .veec-device-table:not(:has(thead .environment-select)) thead th:nth-child(5){width:16%;text-align:left}#workspace .veec-device-table:has(thead .environment-select) thead th:nth-child(7),#workspace .veec-device-table:not(:has(thead .environment-select)) thead th:nth-child(6){width:10%;text-align:center}

/* Explicit claim outcome; never hide a rejected result behind a generic conflict. */
.authorization-claim-result{border:1px solid #e4d8bc;border-radius:10px;padding:16px;margin:16px 0;background:#fffdf7;overflow-wrap:anywhere}
.authorization-claim-result>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.authorization-claim-result h3{margin:0;font-size:16px;color:#233d30}.authorization-claim-result>header>span{font-size:12px;background:#f4eacd;color:#745c2d;border-radius:5px;padding:3px 8px;white-space:nowrap}
.authorization-claim-result>p{margin:10px 0}.authorization-claim-result details{border-top:1px solid #e8e3d5;margin-top:12px;padding-top:10px}.authorization-claim-result summary{cursor:pointer;color:#52695b;font-size:13px}.authorization-claim-result details p{margin:8px 0;font-size:12px;word-break:break-word}.authorization-claim-actions{margin-top:15px;flex-wrap:wrap}

/* Authorization inventory and link renewal keep the next action visible. */
.authorization-inventory{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 16px;padding:16px;margin:0 0 16px;border:1px solid #c8dfd3;border-radius:12px;background:#f1f8f4}
.authorization-inventory>div{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}.authorization-inventory strong{font-size:24px;color:#173e31}.authorization-inventory .note{grid-column:1/-1;margin:0}
.authorization-link-expired{padding:14px;border:1px solid #efd5b5;border-radius:10px;background:#fff8ed;margin:12px 0}.authorization-link-expired p{margin:0 0 12px}
@media(max-width:480px){.authorization-inventory{gap:8px;padding:12px}.authorization-inventory>div{gap:6px}.authorization-inventory strong{font-size:21px}}

/* Email usage is independent from the Claude ban status. */
.email-state.is-unused{background:#e8f3e6;color:#214f36}.email-state.is-used{background:#fff0ee;color:#b3342a}

.email-resource-table .email-password{min-width:150px;max-width:260px;overflow-wrap:anywhere;user-select:text}.email-password code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;white-space:pre-wrap;color:#182c24}.email-resource-table .email-notes{min-width:130px;max-width:240px;white-space:pre-wrap;overflow-wrap:anywhere;color:#34483e}

/* Long email forms keep close/save/cancel visible; only fields scroll. */
#email-resource-dialog[open]{display:flex;flex-direction:column;overflow:hidden}#email-resource-dialog>.panel-head{flex:none;background:#fff}#email-resource-form{display:flex;flex-direction:column;min-height:0;max-width:none;overflow:hidden;flex:1;margin:0}#email-resource-form>.email-resource-fields{padding:24px;min-height:0;overflow:auto;overscroll-behavior:contain;scroll-padding-block:12px}#email-resource-form>.email-resource-footer{flex:none;padding:16px 24px;border-top:1px solid #e4eae6;background:#fff;margin:0}#email-resource-close{flex:none;min-width:44px;min-height:44px}
#account-resource-dialog[open]{display:flex;flex-direction:column;overflow:hidden}#account-resource-dialog>.panel-head{flex:none;background:#fff}#account-resource-form{display:flex;flex-direction:column;min-height:0;max-width:none;overflow:hidden;flex:1;margin:0}#account-resource-form>.email-resource-fields{padding:24px;min-height:0;overflow:auto;overscroll-behavior:contain;scroll-padding-block:12px}#account-resource-form>.email-resource-footer{flex:none;padding:16px 24px;border-top:1px solid #e4eae6;background:#fff;margin:0}#account-resource-close{flex:none;min-width:44px;min-height:44px}
@media(max-width:640px){#account-resource-form>.email-resource-fields{padding:16px}#account-resource-form>.email-resource-footer{padding:12px 16px}}
@media(max-width:640px){#email-resource-form>.email-resource-fields{padding:16px}#email-resource-form>.email-resource-footer{padding:12px 16px}}

/* Account health display: signed-out is distinct from a ban. */
#workspace .tag.account-signed-out,#workspace .email-state.account-signed-out,#workspace .account-signed-out,.account-signed-out{color:#b42318}
.account-merged-table td:first-child{min-width:190px;overflow-wrap:anywhere}.account-merged-table td{vertical-align:middle}.account-merged-table td:nth-child(n+5){font-variant-numeric:tabular-nums}.account-merged-table .actions{flex-wrap:nowrap}.account-merged-table .tag{white-space:nowrap}

/* Assignment state uses persistent owner IDs, independently for each line. */
#workspace .veec-device-owner .veec-assignment.is-assigned { color:#c03333; }
#workspace .veec-device-owner .veec-assignment.is-unassigned { color:#168047; }

#workspace .login-order-resource-badge.btn { display:block; max-width:220px; min-height:0; margin:4px 0 0; padding:2px 0; text-align:left; white-space:normal; overflow-wrap:anywhere; color:#326c54; font-size:11px; line-height:1.5; }

/* Device-column controls stay available in the compact card layout. */
#workspace .veec-device-table .device-column-filter { min-width:88px; }
@media(max-width:760px) {
 #workspace .veec-device-table thead tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:12px; margin-bottom:12px; border:1px solid #dfe7e2; border-radius:9px; background:#fff; }
 #workspace .veec-device-table thead th:not(.environment-actions) { display:block; width:auto!important; border:0; padding:0!important; background:transparent; text-align:left!important; }
 #workspace .veec-device-table thead th.environment-select { grid-column:1/-1; display:flex; }
 #workspace .veec-device-table .device-column-filter { min-height:34px; height:34px; font-size:12px; }
}


#workspace .veec-device-table .device-column-filter { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2367776e' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 6px center; background-size:10px 7px; }