/* Barlow — einzige App-Schriftart (offline @font-face + CDN in login.html). */
@font-face {
  font-family: 'Barlow';
  src: url('../font/Barlow-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-sans);
}
html {
  -webkit-text-size-adjust: 100%; /* iOS / WebKit font scaling */
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  min-width: auto;  
  margin: 0;          
  padding: 0;         
  height: 100%;
  font-weight: 400;
  font-family: var(--font-sans);
}
input::placeholder {
  color: var(--light-gray);
  font-weight: 300;
}
.main-box{
  display: grid;
grid-template-columns: 240px 1fr; /* sidebar + main */
height: calc(100vh + 145px);
margin-top: 48px;
overflow: hidden;
}
.mainZhezhao {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.2;
  background-color: #fff;
  z-index: 10;
  display: none;
}
.tab_type li{
  display: none;
}
.power,.load{
  width: 30px;
  height: 25px;
  background-color:var(--btn-box);
  border-radius: 5px;
  cursor: pointer;
  z-index: 15;
  color: white;
}
#tipmessage {
  width: 100%;
  position: fixed;
  top: -40px;
  display: grid;
  justify-content: center;
  justify-items: center;
  align-items: center;
  left: 0;
  z-index: 19;
}
.slider {
  width: 0px;
  height: 10px;
  background-color: var(--primary);
  border-radius: 10px;
}
#tipmessage_box {
  width: 150px;
  height: 40px;
  line-height: 40px;
  background-color: white;
  color: var(--primary);
  justify-content: center;
  align-items: center;
  transition: top 0.5s ease;
  /* smooth slide-in */
  border-radius: 5px;
  display: grid;
  grid-template-columns: 23px 80px;
  justify-items: center;
  z-index: 16;
}

.tipmessage-box{
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: white;
  margin-left: 10px;
}

#tipmessage-img {
  width: 15px;
  height: 15px;
  background-image: url(../img/tip1.png);
  background-size: 100% 100%;
  margin-top: 5px;
  margin-left: 5px;
}

#tipnotmessage-img {
  width: 15px;
  height: 15px;
  background-image: url(../img/tip3.png);
  background-size: 100% 100%;
  margin-top: 5px;
  margin-left: 5px;
}

.tipmessage-img {
  background-image: url(../img/tip2.png) !important;
}

#tipmessage-data {
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
#tipnotmessage {
  width: 100%;
  position: fixed;
  top: -100px;
  height: auto;
  display: grid;
  justify-content: center;
  justify-items: center;
  align-items: center;
  /*        background-color: #00BBFE;*/
  z-index: 19;
  left: 0;
}

#tipnotmessage_box {
  width: auto;
  min-width: 150px;
  max-width: 800px;
  height: auto;
  min-height: 40px;
  /* line-height: 40px; */
  background-color: white;
  color: var(--primary);
  justify-content: center;
  align-items: center;
  transition: top 0.5s ease;
  /* smooth slide-in */
  border-radius: 5px;
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 10px;
  justify-items: center;
}
.show {
  top: 37px !important;
  /* 显示时移到屏幕右边 */
}
#tipnotmessage-data {
  width: auto;
  height: auto;
  text-align: left;
  margin-right: 10px;
}
.user_action,.user_inactive,.user_res,.user_res_no,.user_Routed,.user_Unrouted{
  /* display: none; */
}
:root {
  /* Colors — mapped 1:1 from the PureLink Apps design system (dark theme).
     Neutral-gray surfaces + blue accent (hsl 217 91% 48%). */
  --primary: #005ae5;          /* ref apps.purelink.de measured */
  --secondary: transparent;
  --secondary2:#151d2e;        /* --card     0 0% 10%    */
  --dark: #0b1120;             /* --background 0 0% 8%   */
  --light: #f1f5f9;            /* --foreground 0 0% 98%  */
  --gray: rgba(255,255,255,.08);             /* --border   0 0% 18%    */
  --light-gray: #94a3b8;       /* --muted-foreground 70% */
  --muted: #808080;
  --success: #10b981;          /* emerald-500 (ref apps) */
  --warning: #f59e0b;          /* amber-500 (ref apps)   */
  --danger: #ef4444;           /* red-500 */
  --titlelog: #f1f5f9;
  --input-co: #1e293b;         /* --popover  0 0% 15%    */
  --btn-box:#334155;           /* --secondary 0 0% 18%   */
  --btn-box2:#1e293b;          /* subtle raised surface  */
  --btn-box3:#e5e5e5;
  --btn-input:#1e293b;         /* filled control surface */
  --white:white;
  --green: #10b981;
  --gbg: rgba(16,185,129,.15);
  --yellow: #f59e0b;
  --ybg: rgba(245,158,11,.15);
  --blue: #818cf8;             /* ref apps dark blue */
  --bbg: rgba(129,140,248,.15);
  --light-left-gray: #94a3b8;
  --grayuser:#334155;
  --text2: #94a3b8;
  --bg-m: #334155;
  --video_res:#94a3b8;
  --ring: #005ae5;
  --sidebar: #0b1120;          /* --sidebar  0 0% 12%    */
  /* Sizes */
  --sidebar-width: 240px;
  --border-radius: 8px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-ti: 28px;
  /* Font sizes (matches DS text scale) */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 14px;
  --text-lg: 18px;
  --text-xl: 20px;
  /* Icon slot size */
  --icon-size: 16px;
  /* Typefaces + radii + shadows (PureLink Apps design system) */
  --font-sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 12px;                   /* radius-xl (cards)      */
  --rs: 8px;                   /* radius-lg (controls)   */
  --r-pill: 9999px;            /* rounded-full (badges)  */
  --shadow: 0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.2);
  --shadow-btn: 0 1px 3px rgba(0,0,0,.2);
  --shadow-pop: 0 20px 25px -5px rgba(0,0,0,.5), 0 8px 10px -6px rgba(0,0,0,.4);
}
.title_size{
  font-size: 14px;
  font-weight: 700;
}
.title_tab div{
  color: var(--light-gray);
  font-weight: 600;
}
body {
  background-color: var(--dark);
  color: var(--light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-y: hidden;
  overflow-x: auto;
  /* overflow-y: auto;
  overflow-x: visible; */
  line-height: 1.5;
  font-size: var(--text-sm);
}

/* Icon slot padding (all nav icons share the same footprint) */
.placeholder-icon {
  width: var(--text-base);
  height: var(--text-lg);
  background-image: url(../img/36CAC77117B3E932D9F58673ECF49BF9.png);
  display: inline-block;
  /* background-color: transparent; */
  /* border: 1px solid var(--gray); */
  /* border-radius: 2px; */
  margin-top: 4px;
}
.placeholder-icon_active{
  background-image: url(../img/2F2132D68E2D73B41C6CA8454BC325ED.png) !important;
}
.placeholder-icon_active_light{
background-image: url(../img/5F859ADF306B0FA6D431AE203CBC5DA6.png) !important;
}
.top-icon{
  width: 25px;
  height: 22px;
  background-image: url(../img/BD404C4C5A71F85908B0D165B3240688.png);
  display: inline-block;
  /* background-color: transparent; */
  /* border: 1px solid var(--gray); */
  /* border-radius: 2px; */
  margin-top: 2px;
}

/* Utility classes */
.hidden { display: none !important; }
.active { display: block !important; }
.w-full { width: 100%; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-4 { margin-top: var(--spacing-md); }
.mt-6 { margin-top: var(--spacing-lg); }
.mb-4 { margin-bottom: var(--spacing-md); }
.text-center { text-align: center; }
.text-muted { color: var(--muted); }
.text-success {     background: var(--gbg);color: var(--green);;width: 80px;float: right;width: 80px;border-radius: 10px;text-align: center !important;}
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.ml-auto { margin-left: auto; }
.front_selectactive{
  background-color: var(--primary) !important;
  border: none !important;
}
.tab-off{
  background-color: var(--btn-box3) !important;
}
.out_signal_action{
  background-color: rgba(22, 68, 68, 0.85) !important;
  border: 1px solid rgba(0, 205, 145, 1) !important;
  color: rgba(0, 205, 145, 1) !important;
}
/* 1. HDR status (violet pill) */
.btn-hdr {
  background-color: var(--bbg);
  color: var(--blue);
  border: none;
  border-radius: 999px;
  padding: 12px 32px;
}

/* 2. HDCP status (muted pill) */
.btn-hdcp {
  background: var(--bg-m);
  color: var(--text2);
  border-radius: 999px;
  padding: 12px 32px;
}

/* 3. Active status (green pill) */
.btn-active {
  background-color: var(--gbg);
  color: var(--green);
  border: none;
  border-radius: 999px;
  padding: 12px 32px;
}

/* 4. No Signal status (amber pill) */
.btn-no-signal {
  background-color: var(--ybg);
  color: var(--yellow);
  border: none;
  border-radius: 999px;
  padding: 12px 32px;
}

/* Login page (kit layout) */
.login-wrapper {
  display: grid;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  height: 100vh;
  padding: var(--spacing-md);
  background-color: var(--dark);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.data_{
  /* font-size: 28px; */
  /* font-weight: 600; */
}
.active_input{
  color: var(--green);
  display: grid;
  grid-template-columns: 20px auto;
  align-items: center;
  text-align: left;
  margin-left: -5px;
  margin-top: 10px;
}
.active_input_ye{
  color: var(--yellow);   
}
.jiantou{
  transform: rotate(270deg);
  width: 15px;
  height: 20px;
  display: block;
}
.login-container {
  width: 100%;
  max-width: 960px;
  height: 70vh;
  display: grid;
  grid-template-columns: repeat(2,386px);
  background-color: var(--secondary2);
  border-radius: var(--border-radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  width: 766px;
  max-width: 95vw;
  height: auto;
  /* background: var(--card); */
  border-radius: var(--r);
  box-shadow: rgba(0, 0, 0, 0.28) 0px 8px 40px;
  border: 1px solid var(--card-border);
  overflow: hidden;
  border-radius: 15px;
}

/* Desktop: side-by-side login columns */
@media (min-width: 768px) {
  .login-container {
      flex-direction: row;
      /* height: 85vh; */
  }
  /* .login-form-section, .login-logo-section {
      width: 50%;
  } */
}

.login-form-section {
  /* flex: 1; */
  padding: var(--spacing-ti);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-logo {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--spacing-lg) auto;
}

.login-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.login-title {
  font-size: var(--spacing-ti);
  font-weight: 300;
  color: var(--titlelog);
  margin-bottom: var(--spacing-xs);
  text-align: left;
}

.login-subtitle {
  font-size: var(--text-xs);
  color: var(--light-gray);
  text-align: left;
  font-weight: 400;
  /* margin-bottom: 20px; */
  /* margin-top: 30px; */
}

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--light-gray);
  margin-bottom: var(--spacing-xs);
  /* text-transform: uppercase; */
  letter-spacing: 0.5px;
  /* margin-top: 10px; */
}
input,select{
  background-color: var(--btn-input);
  border-radius: 10px;
  border: none;
  height: 40px;
  width: 100%;
  color: var(--light);
}
input[type="text"],
input[type="password"],
input[type="number"],
textarea{
  text-indent: 16px;
}
li{
  list-style: none;
}
.input-wrapper {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.form-input {
  width: 100%;
  padding: 10px 15px 10px 0px;
  background-color: var(--btn-input);
  border: 1px solid var(--gray);
  border-radius: var(--border-radius);
  color: var(--light);
  font-size: var(--text-base);
  outline: none;
  /* transition: border-color 0.2s ease; */
}
option {
  background-color:var(--btn-input);
  color:var(--white);
  padding: 8px 12px;
  font-size: var(--text-base);
  border-radius: var(--text-xl);
}
.form-input:focus {
  /* outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(26, 86, 219, 0.2); */
  box-shadow: none;
}

.form-input::placeholder {
  /* color: var(--muted); */
}
input, textarea, select, button {
  outline: none;
}
.file-input {
  padding: 8px 12px;
}

/* Buttons (kit) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: none;
  border-radius: var(--border-radius);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 6px;
}

.btn-primary {
  background-color: var(--primary);
  color: white;
}

.btn-primary:hover {
  background-color: var(--primary);
  filter: brightness(.92);
}

.btn-secondary {
  background-color: transparent;
  border: 1px solid var(--gray);
  color: var(--light);
}

/* .btn-secondary:hover {
  background-color: var(--btn-box2);
} */

.btn-sm {
  padding: 3px 8px;
  font-size: var(--text-xs);
}

.login-btn {
  width: 100%;
  padding: 12px;
  margin-bottom: var(--spacing-xl);
  margin-top: 14px;
}

.login-footer {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--muted);
}

/* Product photo panel */
.login-logo-section {
  /* flex: 1; */
  text-align: center;
  background-image: url(../img/FC3B600E834FC9E2A160D52B9434DC9D.png);
  /* width: 100%; */
  /* height: 100%; */
  /* background-size: 100% 100%; */
  /* display: flex;
  align-items: center;
  justify-content: center; */
  background-repeat: no-repeat;
  background-size: contain;
}

.brand-logo {
  width: 80px;
  height: 80px;
  margin-bottom: var(--spacing-md);
}

.brand-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: white;
  margin-bottom: var(--spacing-sm);
}

.brand-desc {
  font-size: var(--text-base);
  color: var(--light-gray);
  margin-bottom: var(--spacing-lg);
}

.brand-meta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  font-size: var(--text-sm);
  color: var(--muted);
}

/* Main shell (post-login) */
#main-interface {
  display: none;
  height: 100vh;
  flex-direction: row;
  /* grid-template-columns: 220px auto; */
}
#login-page{
  display: none;
}
/* 侧边栏 */
.sidebar {
  width: var(--sidebar-width);
  background-color: var(--secondary);
  border-right: 1px solid var(--gray);
  
  /* 高度 = 窗口高度 - 顶部60px，永远不被遮挡 */
  height: calc(100vh + 60px);
  max-height: calc(100vh + 60px);
  flex-shrink: 0;
  float: left;
  display: block;
}
.sidebar-nav {
  padding: var(--spacing-lg);
  width: 100%;
  float: left;
  height: calc(100vh - 200px);
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch; 
  padding: var(--spacing-md);
}
.sidebar-nav::-webkit-scrollbar {
  display: none;
}
.sidebar-header {
  padding: var(--spacing-lg);
  height: 60px;
  background: var(--dark);
  width: 220px;
  border-right: 1px solid var(--gray);
}

.sidebar-logo {
  width: 100%;
  height: 38px; /* ref apps: Logo 38px hoch (max 180px breit) */
  max-width: 180px;
  border: none;
  background-image: url(../img/purelink-logo-dark.png);
  background-repeat: no-repeat;
  background-size: contain;
  /* background-size: 100% 100%; */
  line-height: 38px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;             
  -ms-overflow-style: none;           
  -webkit-overflow-scrolling: touch; 
}
.sidebar-logo::-webkit-scrollbar {
  display: none !important;
  width: 0;
  height: 0;
}
.sidebar-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: var(--spacing-xs);
}

.sidebar-subtitle {
  font-size: var(--text-xs);
  color: var(--muted);
}

.sidebar-nav ul {
  list-style: none;
}

/* 导航分割线 */
.nav-divider {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  margin: 6px 0;
  gap: 8px;
}

.icon-placeholder {
  width: var(--icon-size);
  height: 1em;
  display: inline-block;
}

.divider-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  /* text-transform: uppercase; */
  letter-spacing: 1px;
}

/* 导航链接 */
.nav-link {
  display: flex !important;
  align-items: center;
  /* justify-content: center; */
  padding: 8px 12px;
  color: var(--light-left-gray);
  text-decoration: none;
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-xs);
  font-size: var(--text-base);
  gap: 5px;
  transition: all 0.2s ease;
}

.nav-link:hover {
  background-color: rgba(75, 85, 99, 0.2);
}

.nav-link.active {
  background-color: var(--btn-box2);
  color: var(--white);
  /* border-left: 2px solid var(--primary); */
  /* font-weight: 500; */
}

/* 主内容区 */
.main-content {
  flex: 1;
  /* overflow-y: auto; */
  background-color: var(--dark);
  /* -ms-overflow-style: none; */
  /* scrollbar-width: none; */
  width: 100%;
  min-height: auto;
  height: auto;
}
.main-content::-webkit-scrollbar {
  display: none;
  /* 或 width: 0; height: 0; 避免占位 */
}
/* Top bar */
.top-header {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: space-between;
  align-items: center;
  background-color: var(--secondary2);
  white-space: nowrap;
  /* No horizontal scrollbar in the header; overflowing info is clipped. */
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: fixed;
  width: 100%;
  z-index: 9;
  min-width: auto;
}
.top-header::-webkit-scrollbar { display: none; }
/* Left info block may hold many items on mid widths — clip, never scroll. */
.top-left-info { overflow: hidden; min-width: 0; }

/* 左侧信息容器 */
.top-left-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--light-gray);
}

/* 信息项样式 */
.info-item {
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 5px;
}

/* 分隔符样式 */
.info-divider {
  color: var(--gray);
  margin: 0 2px;
}

/* 右侧信息容器 */
.top-right-info {
  display: grid;
  grid-template-columns: 1fr 50px 30px 30px 60px;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--text-sm);
  justify-content: right;
}

/* 用户信息样式 */
.user-info {
  color: var(--light);
    font-weight: 500;
    /* max-width: 200px; */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: right;
}
.login_username{
  font-size: 14px;
  max-width: 100px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-weight: normal;
}
/* 样式切换按钮 */
.style-toggle-btn {
  padding: 5px 10px;
  font-size: var(--text-xs);
}

/* 内容区标题栏 */
.page-title-bar {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--gray);
}

.page-title-bar .page-heading {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--primary);
}

/* 内容容器 */
.tab-content {
  display: none;
  padding: var(--spacing-lg);
  width: 100%;
  /* 核心：让高度自适应窗口，永远不被遮挡 */
  height: calc(100vh + 145px);
  float: left;
  overflow-y: auto; /* 允许垂直滚动 */
  /* 隐藏滚动条，但保留滚动功能 */
  scrollbar-width: none;
  -ms-overflow-style: none; 
  -webkit-overflow-scrolling: touch;
}

/* Chrome / Safari 隐藏滚动条 */
.tab-content::-webkit-scrollbar {
  display: none;
}

/* Tab内容 */
.tab-content {
  display: none;
}

/* ========== Dashboard 严格按PDF排版样式 ========== */
/* 第一行：ACTIVE INPUTS + OUTPUT MODE + temperature (三列等宽) */
.dashboard-grid.row-1 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-lg);
  /* margin-bottom: var(--spacing-lg); */
}

/* 第二行：Video Routing + Output Settings (两列等宽) */
.dashboard-grid.row-2 {
  display: grid;
  grid-template-columns:1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

/* 第三行：Network (整列) */
.dashboard-grid.row-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

/* Dashboard卡片通用样式 */
.dashboard-card {
  background-color: var(--secondary2);
  border: 1px solid var(--gray);
  border-radius: var(--border-radius);
  /* padding: var(--spacing-lg); */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: var(--spacing-lg);
  /* max-width: 1080px; */
}
/* 卡片标题（严格匹配PDF大写样式） */
h3{
   font-size: 14px;
  font-weight: normal;
}
.dashboard-card .card-title {
  /* font-size: var(--text-lg);
  font-weight: 700; */
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  border-bottom: 1px solid var(--gray);
  /* text-transform: uppercase; */
  margin-bottom: 5px;
}
.dashboard-title {
  color: var(--light-gray) !important;
  border: none !important;
  display: grid !important;
  grid-template-columns:80% 20%;
}
.dashboard-card-box{
  padding: var(--spacing-lg);
  width: auto;
  height: 150px;
}
/* 第一行：ACTIVE INPUTS 样式 (修正为仅显示状态) */
.active-input-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: var(--spacing-md) 0;
}

.input-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid rgba(75, 85, 99, 0.1);
}

.input-item:last-child {
  border-bottom: none;
}

.input-label {
  font-size: var(--text-sm);
  color: var(--light-gray);
}

.input-status {
  font-size: var(--text-base);
  font-weight: 500;
}

/* 第一行：OUTPUT MODE 样式 (仅显示4K60) */
.output-mode-content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}

.main-mode {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--primary);
}

/* 第一行：TEMPERATURE 样式 */
.temperature-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg) 0;
}

.temp-value {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}

.temp-status {
  font-size: var(--text-base);
  margin-bottom: var(--spacing-xs);
}

.temp-desc {
  font-size: var(--text-xs);
  color: var(--muted);
}

/* 第二行：VIDEO ROUTING 样式 */
.routing-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.routing-desc {
  font-size: var(--text-sm);
  color: var(--light-gray);
}

.routing-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.routing-btn {
  width: 100%;
  padding: var(--spacing-md);
  text-align: left;
  justify-content: flex-start;
}

.routing-actions {
  display: flex;
  gap: var(--spacing-md);
}

/* 第二行：OUTPUT SETTINGS 样式 (包含所有冗余配置) */
.output-settings-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  /* align-items: center; */
  /* width: 328px; */
  margin-left: 16px;
  margin-right: 16px;
}

.setting-item {
  display: grid;
  grid-template-columns: 200px 35px 36px 40px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 16px 0px;
  border-bottom: 1px solid var(--gray);
  /* width: 90%; */
  grid-column-gap:5px;
}


.setting-item:last-child {
  border-bottom: none;
}

.setting-label {
  font-size: var(--text-sm);
  color: var(--muted);
}

.setting-value {
  font-size: var(--text-sm);
  font-weight: 500;
  margin-right: var(--spacing-md);
}

.edit-btn {
  padding: 2px 6px;
}

/* 第三行：NETWORK 样式 */
.network-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.network-grid {
  display: grid;
  grid-template-rows: repeat(6,1fr);
  /* gap: var(--spacing-md); */
}

.network-item {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: var(--spacing-xs);
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--gray);
  align-items: center;
  margin-right: 16px;
}

.network-value {
  text-align: right;
}

.network-edit-btn {
  width: fit-content;
  padding: 6px 12px;
}

/* 卡片样式 (PDF精准匹配) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.card {
  background-color: var(--secondary);
  border: 1px solid var(--gray);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.card-full {
  width: 100%;
  margin-bottom: var(--spacing-lg);
}

.card-title {
  /* font-size: var(--text-lg);
  font-weight: 700; */
  display: flex;
  align-items: center;
  gap: 6px;
  /* text-transform: uppercase; */
}

.card-list {
  list-style: none;
}

.card-list li {
  display: flex;
  justify-content: flex-start;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--gray);
  font-size: var(--text-sm);
  /* width: 348px; */
  margin-left: 16px;
}
.card-list .label{
  width: 120px;
}
.card-list li:last-child {
  border-bottom: none;
}

.label {
  color:var(--light-gray);
  font-size: 14px;
}

.value {
  /* font-weight: 500; */
}

/* 表单样式 */
.form-section {
  margin-bottom: var(--spacing-lg);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.form-select {
  width: 100%;
  padding: 8px 10px;
  background-color: var(--dark);
  border: 1px solid var(--gray);
  border-radius: var(--border-radius);
  color: var(--light);
  font-size: var(--text-base);
  cursor: pointer;
}

.form-select:focus {
  outline: none;
  border-color: var(--primary);
}

/* 按钮组样式 */
.btn-group {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.btn-group button {
  flex: 1;
}

.action-buttons {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

/* 表格样式 (PDF精准匹配) */
.table-container {
  overflow-x: auto;
  margin-bottom: var(--spacing-md);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table th {
  padding: 8px 10px;
  text-align: left;
  font-weight: 700;
  color: var(--light-gray);
  border-bottom: 1px solid var(--gray);
  /* text-transform: uppercase; */
}

.data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(75, 85, 99, 0.2);
}

.data-table tr:hover td {
  background-color: rgba(31, 41, 55, 0.3);
}

/* 切换按钮组 */
.toggle-group {
  display: flex;
  gap: var(--spacing-xs);
}

.toggle-group button {
  flex: 1;
  padding: 6px;
  font-size: var(--text-sm);
}

/* 控制台样式 */
.console-container {
  background-color: var(--dark);
  border: 1px solid var(--gray);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.console-log {
  padding: var(--spacing-md);
  height: 120px;
  overflow-y: auto;
  font-size: var(--text-sm);
  color: var(--light-gray);
}

.console-log p {
  margin-bottom: var(--spacing-xs);
}

.console-input {
  display: flex;
  border-top: 1px solid var(--gray);
}

.console-input .form-input {
  flex: 1;
  border: none;
  border-radius: 0;
  padding: 8px 12px;
}

.console-input button {
  border-radius: 0;
}

/* 网络统计样式 */
.network-stats {
  display: flex;
  gap: var(--spacing-lg);
  margin: var(--spacing-md) 0;
  font-size: var(--text-sm);
}

.network-stats .label {
  color: var(--muted);
}
/* @media (max-width: 1580px) {
  .dashboard-grid.row-1{
    grid-template-columns:auto !important
  }
} */
/* 响应式适配 (移动端) */
@media (max-width: 600px) {
  .user-info{
    /* max-width: 30px !important; */
  }
}
@media (max-width: 1024px) {
  .dashboard-grid.row-1 ,.Video-switch-box,.setting_device{
    grid-template-columns:auto !important;
  }
  .user-info{
    /* max-width: 100px; */
  }
  .dashboard-grid.row-2 {
      grid-template-columns: auto;
  }
  .network-grid {
      /* grid-template-columns: repeat(2, 1fr); */
  }
  .page_1280_box{
    grid-template-columns: auto !important;
    grid-column-gap: 16px !important;
    /* justify-items: left !important; */
    margin-top: 20px !important;
  }
  .text_color_box{
    /* grid-template-columns:repeat(2,170px) !important */
  }
  .logo_url{
    /* width: 340px !important; */
  }
  .line_1280{
    border:none !important;
    width: 100% !important;
    border-top: 1px solid var(--gray) !important;
    margin-top: 10px;
  }
  .setting_btn_box{
    margin-left: 16px !important;
  }
  .page_1280{
    grid-template-columns: repeat(1, 1fr) !important;
  }
  .page_1280_{
    /* width: 480px !important; */
  }
  .solid_box{
    justify-content: flex-start !important;
  }
  .page_1280_network{
    /* width: 460px !important; */
  }
  .signal-item{
    /* grid-template-columns:200px 210px !important; */
    /* width: 460px !important; */
  }
  .page_1280_ipmode{
    /* width: 448px !important; */
  }
  .network_row{
    grid-template-columns: auto !important;
  }
  .pagr_1280_display{
    /* width: 480px !important; */
    margin-left: 0px !important;
  }
  .pagr_1280_display_auto_power{
    grid-template-columns: auto !important;
    grid-row-gap: 10px !important;
    /* justify-items:left !important; */
  }
  .auto_power_command_row{
    /* grid-template-columns: 100px 80px 74px 60px !important; */
  }
  .page_1280_serial{
    /* grid-template-columns: 100px 60px 60px 40px 40px 60px !important; */
  }
  .auto_power_row{
    /* grid-template-columns: 100px 100px !important; */
  }
  .auto_power_time_row{
    /* grid-template-columns: 100px 100px 100px !important; */
  }
  .input_source_row{
    /* grid-template-columns: 100px 324px !important; */
  }
  .network_row,.rs232_box{
    grid-template-columns: auto !important;
  }
  .top-header{
    justify-content: space-between;
  }
  .sidebar{
    height: 100% !important;
  }
  .rs232_box_{
    grid-template-columns: auto !important;
    grid-row-gap: 10px;
  }
  /* .dashboard-card{
    width: 460px !important;
  } */
}
@media (max-width: 1380px) {
.top-header{
  justify-content:space-between;
}
}
/* @media (max-width: 768px) { */
  /* #main-interface {
      flex-direction: column;
      height: auto;
  } */
  
  /* .sidebar {
      width: 100%;
      height: auto;
      border-right: none;
      border-bottom: 1px solid var(--gray);
  } */
  
  /* .top-header {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--spacing-md);
  } */
  
  /* .header-right {
      width: 100%;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--spacing-md);
  }
  
  .status-bar {
      flex-wrap: wrap;
  }
  
  .card-grid, .form-grid {
      grid-template-columns: 1fr;
  }
  
  .btn-group, .action-buttons {
      flex-direction: column;
  } */
/* } */


/* upgrade password */
#changpassword {
  width: 480px;
  height: 530px;
  /* position: absolute; */
  border-radius: 12px;
  background-color:var(--secondary2);
  /* left: 50%; */
  /* margin-left: -240px; */
  z-index: 9;
  display: none;
}

#top_changpassword {
  height: 60px;
  margin-top: 80px;
}
.popup_close{
  font-size: var(--text-sm);
  color: var(--light-gray);
  text-align: center;
  float: left;
  width: 100%;
  margin-top: 30px;
}
#top_title {
  text-align: center;
  /* width: 100%; */
  float: left;
  font-size: var(--spacing-ti);
  font-weight: 300;
  color: var(--titlelog);
  background-position: center center;
}

.login_input {
  width: 355px;
  height: 35px;
}

#middle {
  width: 355px;
  height: 260px;
  margin: 0 auto;
  margin-top: 50px;
}

.middle_one {
  /* margin-top: 30px; */
  position: relative;
  color: white;
}

.middle_two {
  /* margin-top: 30px; */
  position: relative;
}

#changpassword_Submit {
  width: 355px;
  height: 35px;
  margin-top: 25px;
  line-height: 35px;
  color: #fff;
  cursor: pointer;
  text-align: center;
  border-radius: 8px;
}

/* dishboard */
.title-box{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  padding: var(--spacing-lg);
}
.title-box-btn{
  display: grid;
  grid-template-columns: auto auto;
  justify-content: end;
  justify-items: center;
  align-items: center;
  grid-column-gap: 20px;
}
/* .card-video-routing{
  width: 770px;
} */
.btn-box{
  background-color: transparent;
  color: var(--light);
  border: 1px solid var(--gray);
  border-radius: var(--border-radius);
  width: auto;
  text-align: center;
  padding: 5px 10px;
  cursor: pointer;
}
.btn-box:hover{
  background-color: var(--btn-box2);
  color: var(--light);
}
.routing-box{
  display: grid;
  grid-template-columns: repeat(6,1fr);
  background-color: var(--btn-box2);
  grid-column-gap: 10px;
  /* justify-content: center; */
  /* justify-items: center; */
  height: 67px;
  align-items: center;
  padding: var(--spacing-lg);
}
.btn-tab{
  width: 36px;
  height: 20px;
  border-radius: 20px;
  background-color: var(--primary);
  cursor: pointer;
}
.btn-tab-chang{
  width: 16px;
  height: 15px;
  border-radius: 50%;
  background-color: white;
  margin-top: 3px;
  margin-left: 2px;
}

/* video */
.Video-switch-box{
  width: 100%;
  display: grid;
  /* grid-template-columns: 628px 628px; */
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}
/* input */
.input_box{
  grid-template-columns: 200px auto;
  padding:16px 16px 16px 0px;
  margin-left: 16px;
  margin-right: 16px;
}
.edid-item{
  display: grid;
  grid-template-columns: 200px auto 100px;
  align-items: center;
  padding: 16px 16px 16px 0px;
  border-bottom: 1px solid var(--gray);
  grid-column-gap: 10px;
  margin-left: 16px;
  margin-right: 16px;
}
.Download_edid{
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 10px;
  justify-items: center;
  justify-content: left;
  align-items: center;
}
.edid_load_box input{
  display: none;
}
.edid_load_box{
  background-color: var(--btn-input);
  height: 40px;
  line-height: 40px;
  border-radius: 10px;
  /* display: grid; */
  /* justify-items: center; */
  /* grid-template-columns: 80px 240px; */
  justify-content: left;
  align-items: center;
  cursor: pointer;
  min-width: 0px;
}
.browse_btn{
  width: 60px;
  background-color: white;
  color: black;
  margin-left: 22px;
}
/* output */
.output_box{
  grid-template-columns: 70px 130px 60px 115px 120px 130px 170px 130px 100px;
}
.out_signal{
  background-color: var(--btn-box);
  color: var(--titlelog);
  width: 40px;
  height: 20px;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--light-gray);
  font-size: var(--spacing-md);
}
.out_signal:hover{
  background-color: var(--primary);
}
.devices-box{
  display: grid;
  grid-template-columns:repeat(4,1fr);
  background-color: var(--btn-box2);
  grid-column-gap: 20px;
  align-items: center;
  padding: var(--spacing-lg);
}
.down_edid{
  background-color: var(--btn-input);
  border-radius: 10px;
  border: none;
  height: 40px;
  color: white;
  width: 100%;
  text-indent: 16px;
  color: var(--light);
  line-height: 40px;
}
/* setting */
.setting_btn_box{
  display: grid;
  grid-template-rows:20px 40px 40px 40px 40px 40px;
  /* justify-items: center; */
  grid-row-gap: 16px;
  margin-top: 16px;
}
.setting_btn_box button{
  /* width: 448px; */
  height: 40px;
  border: none;
  display: grid;
  grid-template-columns: auto auto;
  justify-items: center;
  justify-content: left;
  align-items: center;
  grid-column-gap: 10px;
  margin-right: 16px;
}
.setting_device{
  display: grid;
  /* grid-template-columns: auto; */
  grid-template-rows: auto auto;
  grid-column-gap: 16px;
}
.signal-item{
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  justify-content: space-between;
  padding: 0px 0px 16px 0px;
  border-bottom: 1px solid var(--gray);
}
.front_box{
  display: grid;
  grid-template-columns: 1fr 50px 50px;
  grid-column-gap: 5px;
  justify-content: end;
  justify-items: end;
  align-items: center;
}
.front_box div{
  background-color: var(--btn-box);
  color: var(--light);
  width: 40px;
  height: 20px;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--light-gray);
  font-size: var(--spacing-md);
  color: white;
}
.front_select{
  background-color:var(--primary);
  border: 1px solid var(--primary);
}
/* update */
.Firmware_box{
  display: grid;
  margin-left: 16px;
  grid-template-columns: 1fr 80px;
  grid-column-gap: 20px;
  align-items: center;
  margin-top: 16px;
  margin-right: 16px;
}
.up_title{
  padding: 12px 16px 12px 16px;
  font-size: var(--spacing-lg);
  color: var(--light-gray);
  text-align: left;
}
.progress_bar{
  width: 400px;
  height: 10px;
  border-radius: 10px;
  background-color: var(--btn-box);
  margin-left: var(--icon-size);
}
.netwot_input{
  /* width: 210px; */
  height: 40px;
}
.network_row{
  width: 680px;
  display: grid;
  grid-template-columns: 380px 280px;
  grid-column-gap: 20px;
}
.power_row{
  display: grid;
  grid-template-columns: 200px auto;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--gray);
}
.progressValue{
  text-align: left;
  float: left;
}
/* display */
.auto_power{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  padding: 16px 16px 16px 0px;
  /* justify-items: center; */
  align-items: center;
  border-bottom: 1px solid var(--gray);
}
.auto_power_row{
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  grid-column-gap: 10px;
}
.auto_power_time{
  border-bottom: 1px solid var(--gray);
}
.auto_power_time_row{
  display: grid;
  grid-template-columns: 200px 1fr 100px;
  align-items: center;
  grid-column-gap: 10px;
  padding: 0px 16px 0px 0px;
}
.auto_power_command_row{
  display: grid;
  grid-template-columns: 200px 100px 1fr 60px;
  grid-column-gap: 10px;
  padding: 0px 16px 10px 0px;
  align-items: center;
}
.serial_box{
  display: grid;
  grid-template-columns: 200px 1fr 1fr 1fr 1fr 60px;
  grid-column-gap: 10px;
  align-items: center;
  padding: 0px 16px 10px 0px;
}
.input_source_row{
  display: grid;
  grid-template-columns: 224px 324px;
  align-items: center;
  padding:  16px 0px 16px 0px;
  border-bottom: 1px solid var(--gray);
}
.input_action_row{
  display: grid;
  grid-template-columns: 10px auto;
  align-items: center;
  grid-column-gap: 10px;
}
.input_action_box{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--green);
}
.input_action_box_yellow{
  width: 10px;
    height: 10px;
    border-radius: 50%;
  background-color: var(--yellow);
  display: none;
}
.input_action_box_{
  display: grid;
  grid-template-columns: repeat(4,auto);
  align-items: center;
  justify-items: center;
  justify-content: end;
  grid-column-gap: 5px;
}
.input_action_box_ div{
  /* background-color: var(--btn-box);
  color: var(--titlelog);
  border-radius: var(--spacing-lg);
  border: 1px solid var(--titlelog); */
  width: auto;
  height: auto;
  line-height: 10px;
  text-align: center;
  padding: 7px 10px 7px 10px;
}
/* rs232 */
.serial_box_row{
  display: grid;
  grid-template-columns: 1fr 60px;
  align-items: center;
  grid-column-gap: 10px;
  margin-left: 16px;
  padding: 0px 16px 10px 16px;
  margin-right: 16px;
}
.serial_printf{
  grid-row-gap: 5px;
  overflow-y: auto;
  height: 500px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--gray);
  -ms-overflow-style: none;
  scrollbar-width: none;

}
.sertime{
  color: var(--video_res);
}
.serial_printf::-webkit-scrollbar {
  display: none;
  /* 或 width: 0; height: 0; 避免占位 */
}
.serial_printf li{
  /* width: 638px; */
  border-bottom: 1px solid var(--gray);
  margin-left: 16px;
  display: grid;
  grid-template-columns: 200px 100px 1fr;
  align-items: center;
}
.serfrom{
  text-align: center;
}
.rs232_box{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  /* justify-content: left; */
  grid-column-gap: 20px;
}
/* cec */
.cec-img{
  background-image: url(../img/70D9060A30F058AA40DCE8B062EE8C49.png);
}
.cec_two{
  display: grid;
  grid-template-columns: repeat(2,43px);
  align-items: center;
  justify-content: center;
  grid-column-gap: 5px;
  margin-top: 5px;
}
.cec_one{
  display: grid;
  grid-template-columns: repeat(1,43px);
  align-items: center;
  justify-content: center;
  grid-column-gap: 5px;
  margin-top: 5px;
}
.cec_three{
  display: grid;
  grid-template-columns: repeat(3,43px);
  align-items: center;
  justify-content: center;
  /* grid-column-gap: 5px; */
  margin-top: 5px;
}
.cec_two div, .cec_three div,.cec_one div{
  width: 43px;
  height: 42px;
  border-radius: 5px;
  /* border: 1px solid var(--gray); */
  cursor: pointer;
}
.cec_box{
  margin-top: 20px;
  margin-left: 16px;
  border-bottom: 1px solid var(--gray);
  display: grid;
  grid-template-rows: repeat(8,1fr);
}
/* user */
.user-box{
  /* width: 568px; */
  display: grid;
  grid-template-columns: 150px 120px;
  justify-content: space-between;
  align-items: center;
}
.user_permission{
  display: none;
  grid-template-columns:30px 1fr 80px 60px 30px 30px;
  grid-column-gap: 16px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--gray);
}
.user_naem_box{
  width: 30px;
  height: 30px;
  background-color: var(--primary);
  border-radius: 5px;
  text-align: center;
  line-height: 30px;
  color: white;
}
.user_close{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* font-family: Barlow, sans-serif; */
  cursor: pointer;
  border: none;
  /* font-weight: 600; */
  transition: all 0.15s ease 0s;
  border-radius: var(--rs);
  font-size: 12px;
  padding: 5px 10px;
  line-height: 1;
  background: rgb(239, 68, 68);
  color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
  border-radius: 8px;
}
.user_action{
  width: auto;
  height: auto;
  text-align: center;
  background: var(--gbg); /* 按钮背景 */
  color: var(--green);
  border-radius: 20px;
  /* display: grid; */
  /* grid-template-columns: 10px 60px; */
  overflow-y: auto;
  scrollbar-width: none;
  align-items: center;
  justify-content: center;
  display: inline-block;
  max-width: 90px;
  padding: 3px 10px 3px 10px;
}
.offline_action{
  width: auto;
  height: auto;
  text-align: center;
  background: rgba(239,67,67,.15); /* 按钮背景 */
  color: rgb(239,67,67);
  border-radius: 20px;
  /* display: grid; */
  /* grid-template-columns: 10px 60px; */
  overflow-y: auto;
  scrollbar-width: none;
  align-items: center;
  justify-content: center;
  display: inline-block;
  max-width: 90px;
  padding: 3px 10px 3px 10px;
}
.user_inactive_title{
  text-align: center;
  float: left;
}
.user_res{
  width: auto;
  height: auto;
  text-align: center;
  /* background: var(--gbg);
  color: var(--green); */
  border-radius: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display:block;
  max-width: 130px;
  padding: 0px 3px 0px 3px;
}
.power_action{
  display: none;
}
.user_Routed{
  width: auto;
  height: auto;
  text-align: center;
  background: var(--gbg); /* 按钮背景 */
  color: var(--green);
  border-radius: 20px;
  display: inline-block;
  padding: 3px 5px 3px 5px;
  min-width: 65px;
}
.user_res_no{
  width: auto;
  height: auto;
  /* text-align: center; */
  /* background-color:var(--ybg);
  color: var(--yellow); */
  border-radius: 5px;
  /* line-height: 30px; */
}
.user_Unrouted{
  width: auto;
  height: auto;
  text-align: center;
  background-color:var(--ybg);
  color: var(--yellow);
  border-radius: 20px;
  display: inline-block;
  padding: 3px 5px 3px 5px;
  min-width: 75px;
}
.user_inactive{
  width: auto;
  height: auto;
  text-align: center;
  background-color:var(--ybg);
  color: var(--yellow);
  /* background: rgb(51,65,84);
  color: rgb(145,160,183); */
  border-radius: 20px;
  display: grid;
  margin-top: 4.5px;
  /* grid-template-columns: auto auto; */
  /* align-items: center; */
  /* justify-content: center; */
  display: inline-block;
  max-width: 90px;
  padding: 3px 5px 3px 5px;
}
.grayuser_inactive{
  width: auto;
  height: auto;
  text-align: center;
  /* background-color:var(--ybg);
  color: var(--yellow); */
  background: var(--grayuser);
  color: var(--light-gray);
  border-radius: 20px;
  display: grid;
  margin-top: 4.5px;
  /* grid-template-columns: auto auto; */
  /* align-items: center; */
  /* justify-content: center; */
  display: inline-block;
  max-width: 90px;
  padding: 3px 5px 3px 5px;
  border: 1px solid rgb(145,160,183);
}
.user_inactive_box{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border:1px solid rgb(145,160,183);
  float: left;
  margin-top: 10px;
    margin-right: 5px;
}
.user_inactive_box_ye{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border:1px solid var(--yellow);
  float: left;
  margin-top: 10px;
    margin-right: 5px;
}
.user_active_box{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: rgba(0, 205, 145, 1);
  float: left;
  margin-top: 10px;
  margin-right: 5px;
}
/* top */
.online_box{
  width: auto;
  display: grid;
  grid-template-columns: auto;
  background: var(--gbg);
  color: var(--green);
  border-radius: 20px;
  padding: 3px 10px 3px 10px;
  grid-column-gap: 5px;
  align-items: center;
}
.online_row{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  color: rgba(0, 205, 145, 1);
  background-color: rgba(0, 205, 145, 1);
}
.routing_box,.routing_box_video{
  width: 35px;
  height: 35px;
  line-height: 35px;
  background-color: var(--btn-box);
  border-radius: 5px;
  border: 1px solid gray;
  text-align: center;
  color: var(--titlelog);
  cursor: pointer;
}
/* login */
.logo_title_box{
  width: 250px;
  height: 100px;
  margin-left: 20px;
  margin-top: 420px;
}
.logo_title{
  text-align: left;
  font-size: 12px;
  opacity: 1;
  color: white;
}
.logo_title_2{
  text-align: left;
  font-size: 14px;
  font-weight: 400;
  font-size: 12px;
  /* opacity: 0.85; */
  color: white;
}

/* edid upload */
.edid_upload,#upload_browsw{
  text-indent: 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: var(--light);
}

/* network */
.front_select:hover{
  background-color: var(--primary);
}
.network-setting{
  text-align: left;
}
.input1res,.input2res,.inputname1,.inputname2{
  text-overflow: ellipsis;
  white-space: nowrap;
   overflow: hidden;
}
.output_resdata{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.management_active,.management_inactive{
  display: none;
}

.uploadactive{
  display: none;
}
/* control start */
.power_box{
  display: grid;grid-template-columns:repeat(2,120px);grid-column-gap: 10px;width: 100%;padding: var(--spacing-lg)
}
.power_box_{
  color: white;display: grid;grid-template-columns:8px 80px;justify-content: center;justify-items: center;align-items: center;height: 34px;border-radius: 5px;cursor: pointer;
}
.power_box_line{
  border-left: 4px solid white;height: 100%;height: 15px;
}
.input_switch{
  display: grid;
  grid-template-columns: repeat(3,120px);
  grid-column-gap: 10px;
  width: 100%;
  padding: var(--spacing-lg);
  /* justify-items: center; */
}
.input_switch_box{
  width: 120px;
}
/* audio */
.audio_signal{
  background-color: var(--btn-box);
  color: white;
  width: auto;
  height: 30px;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  font-size: var(--spacing-md);
  line-height: 30px;
}
.audio_signal:hover{
  background-color: var(--primary);
}
.audio_signalactive{
  background-color: var(--primary);
  border: none;
}
.break-card-box{
  padding: 10px 16px 0px 16px;
  margin-top: 10px;
}
.break-card{
  width: 205px;
  height: auto;
  background-color: var(--btn-box2);
  border-radius: 5px;
  padding: var(--spacing-lg);
  display: grid;
  grid-row-gap: 10px;
}
.audio_box{
  display: grid;
  grid-template-columns: repeat(2,80px);
  grid-column-gap: 5px;
}
/* local rs232 */
.rs232_box_big{
  padding: var(--spacing-lg);
}
.rs232_box_{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-column-gap: 100px;
  margin-top: 10px;
}
.rs232_box_local{
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  grid-column-gap: 10px;
}
.rs232_hex_ascii{
  display: grid;
  grid-template-columns: 60px 60px 40px;
}
.rs232_ending_local{
}
.rs232_command_local{
  display: grid;
  grid-template-columns: 150px 1fr 60px;
}
/* setting  */
.tab_box{
  display: grid;grid-template-columns: 100px 100px 110px;grid-column-gap: 10px;margin-bottom: 20px;margin-top: 20px;
}
.settings_box{
  display: none;
}
/* color  */
.color-tabs {
  display: grid;
  grid-template-columns: repeat(8, 30px);
  gap: 15px;
  margin-bottom: 15px;
  margin-top: 20px;
}
.tab {
  max-width: 30px;
  height: 30px;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
}
.color_box{
  display: grid;
  grid-template-columns:60px 60px 100px;
  grid-column-gap: 10px;
  align-items: center;
}
.tab.active {
  border-color: #333;
}
.color_box_big{
  border: 1px solid var(--gray);
  border-radius: 10px;
  margin-top: 30px;
}
.color_title{
  width: 120px;
  height: 30px;
  background-color: var(--secondary2);
  margin-top: -10px;
  margin-left: 15px;
  text-align: center;
  color: var(--light-gray);
}
.color-box{
padding: var(--spacing-lg);
}
/* text color */
.text_color_box{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  padding:  var(--spacing-lg);
}
.text_color_box_{
  display: grid;
  grid-template-columns: 60px 60px;
  grid-column-gap: 10px;
  align-items: center;
}
.logo_url{
  background-color: var(--btn-input);
  border-radius: 10px;
  border: none;
  height: 40px;
  width: 100%;
  text-indent: 16px;
  color: var(--light);
  line-height: 40px;
}
.mode_box{
  display: grid;
  grid-template-columns: 100px 100px;
  grid-column-gap: 10px;
}
.product_over li{
  display: flex;
  justify-content: flex-start;
  padding: var(--spacing-sm) 0;
  border-bottom: none;
  font-size: var(--text-sm);
  margin-left: 16px;
}
.key_list li{
  display: flex;
  justify-content: flex-start;
  padding: var(--spacing-sm) 0;
  border-bottom: none;
  font-size: var(--text-sm);
  position: relative; 
}
.key_list {
  padding-left: 16px;
}
.logo_text{
  padding:  var(--spacing-lg);
}
/* api */
.api_mode_box{
  /* display: flex;
  gap: 10px; */
  padding:  var(--spacing-lg);
}
.api_mode{
  width: auto;
  height: auto;
  text-align: center;
  border-radius: 5px;
  white-space: normal;
  overflow: visible;
  display: inline-block;
  padding: 4px;
  word-break: break-all;
  margin-top: 10px;
}
.api_mode_command_box{
  padding:  var(--spacing-lg);
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-column-gap: 10px;
}
.api_mode_command{
  display: grid;
  grid-template-rows: 20px 40px;
}
.tcpcommand{
  padding:0px 16px 10px 16px;
  /* max-width: 796px; */
}
/* font size */
.logo-box{
  width: 100%;
  display: grid;
  grid-template-columns: 150px 100px;
  justify-content: space-between;
  align-items: center;
}
/* 滑动条整体 */
#fontSizeSlider {
  width: 150px;
  -webkit-appearance: none;
  height: 6px;
  background: #ddd;
  border-radius: 6px;
  outline: none;
  /* 核心：让滑块垂直居中 */
  display: flex;
  align-items: center;
}

/* 滑块 8px 圆形 + 绝对垂直居中 */
#fontSizeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  /* 修复居中 */
  margin-top: -2px;
  margin-left: -0.5px;
}

#fontSizeSlider::-moz-range-thumb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: 0;
}

/* 左侧进度条颜色 */
#fontSizeSlider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 6px;
  margin-left: -1px;
  background: linear-gradient(to right,
    var(--primary) 0%,
    var(--primary) var(--progress),
    #ddd var(--progress),
    #ddd 100%
  );
  border: none;
}
#fontSizeSlider::-moz-range-track {
  height: 5px;
  border-radius: 5px;
  background: #ddd;
}
.solid_box{
  margin: 20px 0;
  display: grid;
  grid-template-columns: 30px 150px 20px;
  align-items: center;
  justify-content: end;
  gap: 8px;
  margin-right: 16px;
}

/* command table  */
.command_title{
  display: grid;
  grid-template-columns: 100px 150px 1fr 1fr 60px 120px;
  gap: 10px;
  border-bottom: 1px solid var(--gray);
  padding: var(--spacing-lg);
  align-items: center;
  width: 100%;
}

.blue_box{
  background-color: rgb(16,40,81,0.6);
  color: rgb(1,83,176);
  width: auto;
  height: auto;
  text-align: center;
  border-radius: 20px;
  padding: 3px 10px 3px 10px;
  max-width: 100px;
}
.yel_box{
  background-color: var(--ybg);
  color: var(--yellow);
  width: auto;
  height: auto;
  text-align: center;
  border-radius: 20px;
  padding: 3px 10px 3px 10px;
  max-width: 100px;
}
.parameter_box{
  display: grid;
  grid-template-columns: auto;
  grid-row-gap: 5px;
}

/* flex 容器移除无效 justify-items */
.data_box{
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: center;
}
.action_box{
  display: flex;
  gap: 10px;
  align-items: center;
}
.action_box {
  justify-content: flex-start;
  /* 宽度由内部内容决定 */
  width: fit-content;
  flex-wrap: nowrap;
}

.x_data,.y_data,.z_data{
  /* width: 100px; */
  /* 下拉框不被压缩 */
  flex-shrink: 0;
}

.description_box,.command_box{
  width: 100%;
  height: 30px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  line-height: 30px;
}
.description_box::-webkit-scrollbar {
  display: none !important;
  width: 0;
  height: 0;
}

/* 隐藏样式：display:none 彻底移除元素，宽度自动收缩 */
.data_box.hide-item {
  display: none;
}
/* 如需隐藏全部参数项 */
.parameter_box.hide-all {
  display: none;
}
.data_box_lin{
  height: 500px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.data_box_lin::-webkit-scrollbar {
  display: none !important;
  width: 0;
  height: 0;
}

.network-label {
  color: var(--light-gray) !important;
  /* font-weight: 400; */
}

.header-left{
  display: block;
}
.title_box{
  height: 40px;
  padding: 0px 16px 0px 16px;
  border-bottom: 1px solid var(--gray);
}
/* phone */
.header-left_phone{
  display: none;
}
/* Mobile menu button: CSS-drawn hamburger, integrated into the top bar.
   The `left` value (0 <-> 220px) is toggled by JS and must stay intact. */
.NavigationButton {
  width: 36px;
  height: 36px;
  position: fixed;
  top: 6px;
  /* left is set inline (0px) and moved to 220px by the toggle handler */
  display: none;
  z-index: 30;
  cursor: pointer;
  background-color: var(--btn-box2);
  border: 1px solid var(--gray);
  border-radius: var(--rs);
  transition: left 0.2s ease, background-color 0.15s ease;
}
.NavigationButton:hover { background-color: var(--btn-box); }
.NavigationButton::before {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 11px;
  height: 2px;
  border-radius: 2px;
  background: var(--light);
  box-shadow: 0 5px 0 var(--light), 0 10px 0 var(--light);
}
.nav-link-phone{
  display: flex !important;
  align-items: center;
  /* justify-content: center; */
  padding: 8px 12px;
  color: var(--light-left-gray);
  text-decoration: none;
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-xs);
  font-size: var(--text-base);
  gap: 5px;
  transition: all 0.2s ease;
}

.phone_sidebar{
  width: var(--sidebar-width);
  background-color: var(--secondary);
  border-right: 1px solid var(--gray);
  
  /* 高度 = 窗口高度 - 顶部60px，永远不被遮挡 */
  height: calc(100vh + 145px);
  flex-shrink: 0;
  float: left;
  display: none;
  z-index: 8;
}
.nav-link-phone.active {
  background-color: var(--btn-box2);
  color: var(--white);
  /* border-left: 2px solid var(--primary); */
  /* font-weight: 500; */
}
.pc_box{
  display: block;
}
.pohne_box_status{
  display: none;
}
.output1_name,.input1_name,.input2_name{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.system_box{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 20px;
}
.box_height{
  height: 260px;float: left;width: 100%;
}
.bottom_box{
  width: 100%;
  height: 60px;
  position: fixed;
  bottom: 0px;
  left: 0;
  background-color: var(--secondary2);
  text-align: center;
  line-height: 60px;
  display: none;
}
.mode_active_off{
  color:var(--light-gray) !important;
}
.mode_active,.switch_active,.cec_active,.autopower_active{
  color: var(--green);
}
.phone_box_da{
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 10px;
}
.api_mode_light{
  background-color: #E6E6E6;
  color: black;
}
.api_mode:hover{
  background-color:var(--primary);
  color: white;
}
.input_box_data{
  min-width: 0;
}
.resdata,.res2data,.output_resdata{
  text-align: left !important;
  max-width: none;
}
@media (max-width: 1580px) {
  .phone_box_da{
    grid-template-columns: auto;
  }
}
@media (min-width: 1025px) {
  .phone_sidebar{
    display: none !important;
  }
}
@media (max-width: 1024px) {
  .sidebar-header{
    background-color: var(--secondary2);
  }
  .bottom_box{
    display: block;
  }
  .system_box{
    grid-template-columns:auto;
  }
  .header-left_phone{
    display: block;
  }
  /* Make room for the fixed hamburger button next to the mobile logo */
  .header-left_phone .sidebar-header{
    padding-left: 52px !important;
  }
  .header-left{
    display: none;
  } 
  .NavigationButton {
    display: block;
  }
  .phone_sidebar{
    position: fixed !important;
    left: 0;
    top: 48px;
    height: calc(100vh - 48px) !important;
    max-height: calc(100vh - 48px) !important;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: none;
    box-shadow: var(--shadow-pop);
    background-color: var(--sidebar);
  }
  .phone_sidebar::-webkit-scrollbar{ display: none; }
  .main-box{
    grid-template-columns: 1fr;
    justify-content: center;
    /* justify-items: center; */
  }
  .sidebar{
    display: none !important;
  }
  
  .edid-item{
    /* grid-template-columns:120px 205px 60px; */
    /* width: 426px !important; */
  }
  #cec_input_sel,#cec_out_sel{
    /* width: 426px !important; */
  }
  .cec_box{
    /* width: 426px !important; */
  }
  .phone_box_setting{
    /* width: 426px !important; */
  }
  .network-item{
    /* width: 426px !important; */
  }
  .product_over{
    /* width: 460px !important; */
  }
  .product_over li{
    /* width: 460px !important; */
  }
  .pc_box{
    display: none;
  }
  .pohne_box_status{
    display: block;
  }
  .pohne_box_status_li {
    display: grid;
    grid-template-rows: 100px auto;
    grid-row-gap: 10px;
    padding: 16px;
  }
  .pohne_box_status_li_{
    display: grid;
    grid-template-columns: repeat(3,33%);
    grid-column-gap: 3px;
  }
  .pohne_box_usb_li_{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 10px;
  }
  .pohne_box_status_li_box{
    display: grid;
    grid-template-rows: 30px auto;
    grid-row-gap: 10px;
    /* padding: 16px; */
    align-items: center;
  }
  .phone_signal{
    /* width: 426px !important; */
  }
  .user-box{
    /* width: 426px !important; */
  }
  .user_permission{
    /* grid-template-columns: 30px 120px 80px 60px 30px 30px; */
  }
  .pohne_box_commane_li{
    display: grid;
    grid-template-rows: 100px auto;
    grid-row-gap: 10px;
    padding: 16px;
    border-bottom: 1px solid var(--gray);
  }
  .login-container {
    grid-template-columns: none;
    grid-template-rows: 500px 400px;
    width: 369px;
    height: 910px;
    
  }
  .phone_title{
    text-align: center;
  }
  .phone_logoimg{
    text-align: center;
    background-position: center center;
  }
  .logo_title_box{
    margin-left: 100px;
  }
  /* .serial_printf li{
    width: 426px;
    grid-template-columns: 150px 100px 1;
  } */
  .name_box{
    /* width: 135px; */
  }
}
@media (max-width: 500px) {
  .input_switch{
    grid-template-columns: repeat(3,90px);
  }
  .input_switch_box{
    width: 90px;
  }
  .sidebar-nav {
    height:calc(100vh - 300px) ;
    max-height:calc(100vh - 300px)
  }
  .box_height{
    height: 660px;
  }
  .auto_power_row{
    grid-template-columns: 100px 1fr;
  }
  .auto_power_time_row{
    grid-template-columns: 100px 1fr 100px;
  }
  .auto_power_command_row{
    grid-template-columns: 80px 1fr 1fr 60px;
  }
  .serial_box{
    grid-template-columns: 80px 1fr 1fr 1fr 1fr;
    gap: 10px;
  }
  .serial_printf li{
    grid-template-columns: 80px 80px 1fr;
  }
  .rs232_box_local{
    grid-template-columns: 100px 1fr;
  }
.sidebar-header{
  width: 100px;
  
}
.sidebar-logo{
  background-position: center center;
}
.input_box{
  grid-template-columns:80px 1fr;
}
.edid-item{
  grid-template-columns: 80px auto 100px;
}
.setting-item:last-child{
 grid-template-columns: 80px auto !important;
}
.signal-item{
  grid-template-columns:100px 1fr
}
.user_permission{
  grid-template-columns:1fr 1fr 80px 1fr 1fr 1fr;
}
.color-tabs{
  grid-template-columns: repeat(8,1fr);
}
.top-header{
  grid-template-columns: 100px 1fr;
}
}

/* =============================================================
   PureLink Design System — full "PT-PSW-52KVM kit" styling.
   Applied over the existing markup / JS (no functional changes).
   Colours use the app's theme variables so light/dark still work.
   ============================================================ */

/* ---- App shell: 48px card header + 240px sidebar ---- */
.top-header{ height: 48px; min-height: 48px; background-color: var(--secondary2); border-bottom: 1px solid var(--gray); }
.sidebar-header{ padding: 0 16px !important; height: 48px !important; width: 240px !important; display: flex; align-items: center; background: var(--secondary2); }
.header-left_phone .sidebar-header{ width: auto !important; }
.sidebar, .phone_sidebar{ background-color: var(--dark); border-right: 1px solid var(--gray); }
.main-content{ background-color: var(--dark); }

/* Top-bar readouts: label muted, value strong + mono */
.top-left-info{ gap: 12px; }
.info-divider{ color: var(--gray); }

/* ---- Sidebar nav (DS SideItem) ---- */
.nav-link, .nav-link-phone{ padding: 7px 8px; border-radius: var(--rs); color: var(--light); font-size: 13.5px; font-weight: 500; gap: 9px; margin-bottom: 1px; }
.nav-link:hover, .nav-link-phone:hover{ background-color: var(--btn-box2); }
.nav-link.active, .nav-link-phone.active{ background-color: var(--btn-box); color: var(--light); font-weight: 600; }
.nav-divider{ padding: 14px 8px 6px; margin: 0; }
.divider-text{ font-size: 11px; font-weight: 600; color: var(--light-gray); text-transform: uppercase; letter-spacing: .6px; }

/* ---- Cards (DS Card + CardHead) ---- */
.dashboard-card, .card, .card-video-routing, #changpassword{ background-color: var(--secondary2); border: 1px solid var(--gray); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.title-box, .title_box{ border-bottom: 1px solid var(--gray); }
.title_size{ font-size: 14px; font-weight: 700; color: var(--light); }
.title-box .login-subtitle{ font-size: 12px; color: var(--light-gray); }

/* KPI cards: small muted label + status-pill value */
.dashboard-card-box{ padding: 16px 20px; height: auto; min-height: 118px; }
.dashboard-title{ font-size: 12px !important; font-weight: 500; color: var(--light-gray) !important; margin-bottom: 8px; }

/* ---- Buttons (DS Button) ---- */
.btn{ padding: 7px 14px; border-radius: var(--rs); font-size: 13px; font-weight: 600; box-shadow: none; }
.btn-primary{ background-color: var(--primary); color: #fff; box-shadow: var(--shadow-btn); }
.btn-primary:hover{ transform: none; background-color: var(--primary); filter: brightness(.92); }
.btn-secondary{ background-color: transparent; border: 1px solid var(--gray); color: var(--light); }
.btn-box, .down_edid, .out_signal, .audio_signal, .routing_box, .routing_box_video, .front_box div, .power_box_{ border-radius: var(--rs); font-weight: 600; }
.btn-box:hover, .out_signal:hover, .audio_signal:hover{ background-color: var(--primary); }
.front_select, .audio_signalactive, .front_selectactive{ background-color: var(--primary); border-color: var(--primary); }

/* ---- Inputs / selects (DS control) ---- */
input, select, textarea, .form-input, .logo_url, .down_edid, .edid_load_box{ border-radius: var(--rs); background-color: var(--btn-input); border: 1px solid var(--gray); color: var(--light); font-size: 13px; transition: border-color .15s ease; }
input:focus, select:focus, textarea:focus, .form-input:focus{ border-color: var(--primary); box-shadow: none; }

/* ---- Status pills / badges (fg + tint) ---- */
.online_box, .offline_action, .offline_action.network_action, .user_action, .user_inactive, .grayuser_inactive, .user_Routed, .user_Unrouted, .blue_box, .yel_box{ border-radius: var(--r-pill); font-size: 12px; font-weight: 600; padding: 3px 9px; }

/* ---- Table / row headers (DS th) ---- */
.title_tab div, .data-table th{ font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--light-gray); }
.routing-box{ background-color: var(--btn-box2); }

/* ---- Command chips (DS CmdCode) ---- */
.api_mode{ font-family: var(--font-mono); font-size: 11px; font-weight: 500; border-radius: 4px; background: var(--btn-box2); color: var(--light-gray); border: 1px solid var(--gray); }

/* ---- Login modal (DS login) ---- */
.login-container{ border-radius: var(--r); box-shadow: var(--shadow-pop); border: 1px solid var(--gray); }
.login-btn{ font-weight: 600; }

/* ---- Technical values in Barlow (tabular nums) ---- */
.ip_addr_top, .ip_action, .gui_fw_top, .mcu_fw_top, .temp_data, .data_.user_inactive, .output_resdata, .user_res, .resdata, .res2data, .command_box, .description_box, .api_mode, .inputcolor1, .inputcolor2, .outputcolor, .input_depth1, .input_depth2, .output_depth1, .hdcp_input_, .output_hdcp_{ font-family: var(--font-mono); }

/* ---- Pixel pass: exact PT-PSW-52KVM kit sizing ---- */
.sidebar-header .sidebar-logo{ width: 132px; background-position: left center; background-repeat: no-repeat; }
.login_username{ font-size: 11px !important; color: var(--light-gray); font-weight: 400; }
.top-left-info{ font-size: 12px; }
.top-left-info .info-item > span:first-child{ color: var(--light-gray); }
.btn-box, .out_signal, .audio_signal, .front_box div, .routing_box, .routing_box_video, .btn-sm{ font-size: 12px; }
.title-box{ padding: 14px 18px; }

/* ---- Round 4: uniform Barlow, kit login, spacing, logo, logout ---- */
.tab-content{ padding: 18px 26px; }
.sidebar-header .sidebar-logo{ width: 116px; height: 26px; background-position: left center; }

/* Header buttons (DS ghost / icon) */
.logout-btn{ background: rgba(255,255,255,.06); border: 1px solid var(--gray); color: var(--light); font-size: 12px; font-weight: 600; padding: 5px 12px; box-shadow: none; }
.logout-btn:hover{ background: var(--btn-box2); color: var(--light); transform: none; }
.style-toggle-btn{ width: 30px; height: 30px; padding: 0; border-radius: var(--rs); border: 1px solid var(--gray); background: transparent; }

/* Kit login page */
.login-wrapper{ display: flex; align-items: center; justify-content: center; background-color: var(--dark); }
.login-container{ display: flex; flex-direction: row; width: 820px; max-width: 94vw; min-height: 520px; height: auto; background: var(--secondary2); border: 1px solid var(--gray); border-radius: var(--r); box-shadow: var(--shadow-pop); overflow: hidden; }
.login-container > .login-form-section{ flex: 1; padding: 56px 44px; display: flex; flex-direction: column; justify-content: center; }
.login-container .login-header{ text-align: left; margin-bottom: 0; }
.kit-login-logo{ width: 150px; height: 34px; background-image: url(../img/purelink-logo-dark.png); background-repeat: no-repeat; background-size: contain; background-position: left center; margin-bottom: 10px; }
.login-container .login-subtitle{ font-size: 12px; color: var(--light-gray); margin: 0 0 28px 0; text-align: left; }
.login-container .form-label{ font-size: 12px; font-weight: 600; color: var(--light-gray); }
.login-container .login-btn{ width: 100%; padding: 11px; margin-top: 20px; margin-bottom: 0; font-weight: 600; }
.login-photo{ width: 380px; flex-shrink: 0; background: url(../img/FC3B600E834FC9E2A160D52B9434DC9D.png) center/cover no-repeat; border-left: 1px solid var(--gray); position: relative; }
.login-photo-overlay{ position: absolute; bottom: 24px; left: 24px; right: 24px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.login-photo-title{ font-size: 20px; font-weight: 700; }
.login-photo-sub{ font-size: 12px; opacity: .85; margin-top: 2px; }
@media (max-width: 768px){
  .login-container{ flex-direction: column; width: 400px; max-width: 92vw; height: auto; min-height: 0; }
  .login-container > .login-form-section{ order: 2; padding: 36px 28px; }
  .login-photo{ width: 100%; height: 150px; order: 1; border-left: none; border-bottom: 1px solid var(--gray); }
}

/* ---- Round 5: logo switch, sidebar user + logout, header-right ---- */
/* Header right: theme + device icons only (Admin & header Logout removed) */
.top-right-info{ display: flex !important; align-items: center; gap: 10px; justify-content: flex-end; }

/* Sidebar user block (DS) with Logout beside AV Technician */
.sidebar-user{ display: grid; grid-template-columns: 32px 1fr auto; align-items: center; column-gap: 10px; padding: 12px 16px 0; }
.sidebar-user-avatar{ width: 32px; height: 32px; border-radius: 8px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sidebar-user-meta{ min-width: 0; }
.sidebar-user-name{ font-size: 13px; font-weight: 600; color: var(--light); }
.sidebar-user .login_username{ font-size: 11px !important; color: var(--light-gray); }
.sidebar-logout{ font-size: 12px; font-weight: 600; padding: 5px 12px; background: rgba(255,255,255,.06); border: 1px solid var(--gray); color: var(--light); box-shadow: none; }
.sidebar-logout:hover{ background: var(--btn-box2); color: var(--light); transform: none; }

/* ---- Round 6: table row heights, spacing, stacked view, footer ---- */

/* Compact desktop table rows (DS cell padding ~10x16) */
.routing-box{ height: auto !important; min-height: 0; padding: 11px 16px; align-items: center; }
.routing-box.title_box, .routing-box.title_tab{ padding: 9px 16px; height: auto !important; }
.setting-item{ padding: 12px 16px 12px 16px; }
.edid-item{ padding: 12px 16px; }
.signal-item{ padding: 0 0 12px 0; }
.network-item{ padding: 12px 16px; }
.power_row, .auto_power, .auto_power_time, .input_source_row{ padding: 12px 16px; }
.card-list li, .product_over li, .key_list li{ padding: 9px 0; }

/* Stacked (mobile) status + command rows: kill fixed 100px row, tighten */
.pohne_box_status_li{ grid-template-rows: auto !important; grid-row-gap: 14px; padding: 14px 16px; }
.pohne_box_commane_li{ grid-template-rows: auto !important; grid-row-gap: 14px; padding: 14px 16px; }
.pohne_box_status_li_{ grid-row-gap: 12px; }
.pohne_box_status_li_box{ grid-template-rows: auto auto !important; grid-row-gap: 3px; align-items: start; }
.pohne_box_status_li_box > div:first-child{ font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--light-gray); font-weight: 600; }

/* Footer / mobile bottom bar */
.bottom_box{ height: 44px; line-height: 44px; background: var(--secondary2); border-top: 1px solid var(--gray); color: var(--light-gray); font-size: 12px; }

/* ---- Round 7: Command Table (Result column, compact rows) ---- */
.command_title{ grid-template-columns: 92px 120px 1fr 1fr 1fr 52px 112px; padding: 10px 16px; align-items: center; }
#commandContainer .command_title{ align-items: center; min-height: 0; }
.command_title .action_box .btn-box{ font-size: 12px; padding: 4px 10px; }
.parameter_box{ grid-row-gap: 4px; }
.parameter_box .data_box{ align-items: center; }
.result_box{ font-size: 12px; color: var(--light-gray); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.result_box::-webkit-scrollbar{ display: none; }
.tcp_printf{ height: 300px; }

/* ---- Round 8: primary action buttons -> kit solid accent ---- */
.Console_send, .tcp_console_send, .get_data_send, .Download_edid_button{ background: var(--primary) !important; color: #fff !important; border: none; }
.Console_send:hover, .tcp_console_send:hover, .get_data_send:hover, .Download_edid_button:hover{ filter: brightness(.92); }
/* Segmented/toggle buttons: unselected slate, selected accent (kit outline->solid) */
.btn-box.display_dis, .btn-box.display_ena, .btn-box.screensou_dis, .btn-box.screensou_ena{ background: var(--btn-box); color: var(--light); }
/* Round 9: remove HDCP 'compatible' text + phantom resolution placeholder */
.hdcp_input_{ display: none !important; }
.routing-box .user_res_no, .pohne_box_status_li .user_res_no{ display: none !important; }

/* ---- System Logs ---- */
.syslog-filters{ display:flex; gap:8px; align-items:center; }
.syslog-filter, .syslog-clear{ font-size:12px; padding:5px 12px; }
.syslog-filter-active{ background: var(--primary) !important; color:#fff !important; }
.syslog-list{ list-style:none; }
.syslog-list li{ display:grid; grid-template-columns:72px 62px 1fr; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--gray); font-size:13px; color:var(--light); }
.syslog-time{ font-family:var(--font-mono); color:var(--light-gray); font-size:12px; }
.syslog-badge{ font-size:11px; font-weight:600; text-transform:uppercase; padding:2px 8px; border-radius:var(--r-pill); text-align:center; }
.syslog-badge.info{ background:var(--gbg); color:var(--green); }
.syslog-badge.warn{ background:var(--ybg); color:var(--yellow); }
.syslog-badge.error{ background:rgba(239,68,68,.15); color:var(--danger); }
.syslog-list li.warn{ background: var(--ybg); }
.syslog-list li.error{ background: rgba(239,68,68,.08); }
/* Read/Set clickable (load into console) */
.rw_box > div{ cursor: pointer; }
.rw_box > div:hover{ filter: brightness(1.1); }

/* ---- Round 10: logo sizing, login spacing, CEC, airier paddings ---- */
/* Login logo more prominent (was thin/small) */
.kit-login-logo{ width: 172px; height: 40px; margin-bottom: 12px; }
.login-container > .login-form-section{ padding: 52px 48px; }
/* Header logo slightly larger */
.sidebar-header .sidebar-logo{ width: 128px; height: 28px; }
/* CEC: symmetric spacing + consistent card padding */
.cec_box{ margin: 16px; }
.card-output-settings .setting-item{ padding: 16px !important; }
/* Airier KPI/card padding to match reference */
.dashboard-card-box{ padding: 18px 20px; }

/* ---- Round 11: consistent row alignment + dropdown/field spacing ---- */
.setting-item, .signal-item, .input_box, .edid-item, .power_row, .auto_power, .auto_power_time, .auto_power_time_row, .auto_power_command_row, .serial_box, .input_source_row, .network-item, .rs232_box_local, .rs232_command_local{ align-items: center; }
.setting-item select, .signal-item select, .input_box select, .edid-item select, .rs232_box_local select, select.network-input, .netwot_input input, .network-input{ width: 100%; }
select, input[type=text], input[type=password], input[type=number]{ min-height: 40px; }
option{ padding: 8px 12px; }
/* RS-232 Display card: align label rows with their fields */
.auto_power_row, .auto_power_command_row, .serial_box{ align-items: center; }

/* ---- Round 12: reference alignment (card titles, table hover) ---- */
.title_size{ font-size: 15px; }
.dashboard-card .card-title{ font-size: 15px; }
/* subtle row hover like reference tables */
#commandContainer .command_title:hover{ background: var(--btn-box2); }
.data-table tr:hover td{ background: var(--btn-box2); }

/* ---- Round 13: reference buttons (Try=blue, filter active) ---- */
.type_btn, .phone_type_btn{ background: var(--primary); color:#fff; }
.type_btn:hover, .phone_type_btn:hover{ filter: brightness(.92); }
.command_box_btn.front_selectactive, .api_mode.front_selectactive{ background: var(--primary); color:#fff; }

/* ---- Round 14: final reference polish (switches, labels, settings actions) ---- */
/* Toggle switch pill consistency (reference: blue pill + knob) */
.btn-tab{ width: 38px; height: 20px; }
.btn-tab-chang{ width: 14px; height: 14px; margin-top: 3px; margin-left: 3px; }
/* KPI card labels: uppercase eyebrow like reference */
.dashboard-title{ text-transform: uppercase; letter-spacing: .4px; }
/* Settings action buttons: subtle secondary; destructive tinted */
.setting_btn_box button{ background: var(--btn-box2); color: var(--light); border-radius: var(--rs); }
.setting_btn_box button:hover{ filter: brightness(1.08); }

/* ---- Round 15: HEADER 1:1 to reference TopBar ---- */
.top-header{ height:48px !important; min-height:48px; background:var(--secondary2); border-bottom:1px solid var(--gray); }
.sidebar-header{ width:240px !important; padding:0 16px !important; height:48px !important; display:flex; align-items:center; border-right:1px solid var(--gray); }
.sidebar-header .sidebar-logo{ width:auto; min-width:110px; max-width:150px; height:30px; background-position:left center; }
.top-left-info{ padding-left:26px; gap:10px; font-size:12px; }
.info-divider{ color:var(--gray); }
/* right icon buttons 30x30 (theme/power/reload) */
.style-toggle-btn{ width:30px !important; height:30px !important; padding:0 !important; border-radius:var(--rs) !important; }
.power, .load{ width:30px !important; height:30px !important; border-radius:var(--rs) !important; display:flex !important; align-items:center; justify-content:center; }
.power > div, .load > div{ margin:0 !important; }
.logout-btn{ font-size:12px; font-weight:600; padding:5px 12px; }

/* ---- Round 16: exact DS values (cards/KPI/tables) ---- */
.title_size{ font-size:14px; font-weight:700; }
.dashboard-card .card-title{ font-size:14px; font-weight:700; }
.dashboard-title{ font-size:12px !important; font-weight:500; color:var(--light-gray) !important; text-transform:none; letter-spacing:0; }
.data-table th, .title_tab div, .command_title > div{ font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--light-gray); font-weight:600; }
/* keep command DATA rows normal (only header row uppercase) */
#commandContainer .command_title > div, #commandContainer_phone .command_title > div{ text-transform:none; letter-spacing:0; font-weight:400; }
.command_box, .description_box{ font-size:13px; color:var(--light); text-transform:none; }
/* Light: content area slate-50 vs white cards (dark unaffected) */

/* ---- U-04: consistent dropdown spacing ----
   Normalise every <select>: kill the inherited text-indent, use even padding,
   and draw one consistent chevron so the arrow never collides with the text. */
select{
  text-indent: 0;
  padding: 8px 34px 8px 12px;
  line-height: 1.4;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b3b3b3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
}
select::-ms-expand{ display: none; }
select option{
  padding: 8px 12px;
  background-color: var(--btn-input);
  color: var(--light);
}

/* =============================================================
   DS canonical v2 — pixel-exact vs apps.purelink.de (measured).
   Wins over earlier Round N / legacy rules.
   ============================================================= */

/* Theme surfaces (html[data-theme] set in login.html + app.js) */
html[data-theme="dark"],
html:not([data-theme="light"]) {
  --login-surface: #0b1120;
  --login-card: #151d2e;
  --login-form-bg: #151d2e;
  --login-card-border: rgba(255,255,255,.08);
  --login-label: #94a3b8;
  --login-control-bg: #1e293b;
  --login-control-border: rgba(255,255,255,.14);
  --login-fg: #f1f5f9;
  --sidebar-surface: #0b1120;
}
html[data-theme="light"] {
  --login-surface: #ffffff;
  --login-card: #ffffff;
  --login-form-bg: #ffffff;
  --login-card-border: #e2e8f0;
  --login-label: #94a3b8;
  --login-control-bg: #f8fafc;
  --login-control-border: #cbd5e1;
  --login-fg: #0f172a;
  --sidebar-surface: #ffffff;
}

/* Sidebar: dedicated surface (#0b1120 dark / #ffffff light), not page bg */
.sidebar,
.phone_sidebar {
  background-color: var(--sidebar-surface) !important;
}

/* Hidden login shell — overrides .login-wrapper display:flex !important */
#login-page.login-hidden {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Login page — ref card 820×520, form 438px / photo 382px */
.login-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  height: 100vh !important;
  padding: 0 !important;
  background-color: var(--login-surface) !important;
  overflow-y: auto;
}
.login-container {
  display: flex !important;
  flex-direction: row !important;
  width: 820px !important;
  max-width: 94vw !important;
  min-height: 520px !important;
  height: 520px !important;
  max-height: 520px !important;
  background: var(--login-card) !important;
  border: 1px solid var(--login-card-border) !important;
  border-radius: 12px !important;
  box-shadow: rgba(0, 0, 0, 0.28) 0 8px 40px !important;
  overflow: hidden !important;
  grid-template-columns: unset !important;
}
.login-container > .login-form-section {
  flex: 0 0 438px !important;
  width: 438px !important;
  max-width: 100% !important;
  padding: 64px 44px !important;
  background: var(--login-form-bg) !important;
  justify-content: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
.login-container .login-header,
.login-container .form-group,
.login-container .input-wrapper,
.login-container .login-btn {
  width: 100% !important;
  max-width: 350px !important;
  box-sizing: border-box !important;
}
.login-container .login-header {
  text-align: left !important;
  margin-bottom: 0 !important;
}
.kit-login-logo,
.login-container .kit-login-logo.sidebar-logo {
  width: 172px !important;
  height: 36px !important;
  min-width: 0 !important;
  max-width: 172px !important;
  margin: 0 0 8px 0 !important;
  display: block !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: left center !important;
  text-align: left !important;
}
#login-page .kit-login-logo,
#login-page .login-subtitle {
  text-align: left !important;
}
.login-photo {
  width: 382px !important;
  flex: 1 1 382px !important;
  min-height: 520px;
  height: 520px !important;
  border-left: 1px solid var(--login-card-border) !important;
  background: url(../img/FC3B600E834FC9E2A160D52B9434DC9D.png) center center / cover no-repeat !important;
  position: relative;
}
html[data-theme="light"] .kit-login-logo {
  background-image: url(../img/purelink-logo-light.png) !important;
}
html[data-theme="dark"] .kit-login-logo,
html:not([data-theme="light"]) .kit-login-logo {
  background-image: url(../img/purelink-logo-dark.png) !important;
}
.login-container .login-subtitle {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--login-label) !important;
  margin: 0 0 12px 0 !important;
  text-align: left !important;
}
.login-container .form-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--login-label) !important;
  margin: 0 0 5px 0 !important;
  letter-spacing: 0 !important;
}
.login-container .form-group {
  margin-bottom: 14px !important;
}
.login-container .form-group:last-of-type {
  margin-bottom: 0 !important;
}
.login-container input.form-input {
  width: 100% !important;
  max-width: 350px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  text-indent: 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 19.5px !important;
  border-radius: 8px !important;
  background-color: var(--login-control-bg) !important;
  border: 1px solid var(--login-control-border) !important;
  color: var(--login-fg) !important;
}
.login-container select.form-input {
  width: 100% !important;
  max-width: 350px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 8px 34px 8px 12px !important;
  text-indent: 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  border-radius: 8px !important;
  background-color: var(--login-control-bg) !important;
  border: 1px solid var(--login-control-border) !important;
  color: var(--login-fg) !important;
}
html[data-theme="light"] .login-container select.form-input {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 14px !important;
}
.login-container .login-btn {
  width: 100% !important;
  max-width: 350px !important;
  height: 41px !important;
  min-height: 41px !important;
  padding: 10px !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  background-color: var(--primary) !important;
  border: none !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 21px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.login-photo-overlay {
  bottom: 24px !important;
  left: 24px !important;
  right: 24px !important;
}
.login-photo-title {
  font-size: 20px !important;
  font-weight: 800 !important;
}
.login-photo-sub {
  font-size: 12px !important;
  margin-top: 2px !important;
  opacity: 0.85;
}

/* Shell logos: sidebar, top bar (desktop + mobile), change-password */
.sidebar-header .sidebar-logo,
.header-left .sidebar-logo,
.header-left_phone .sidebar-logo,
#top_title.sidebar-logo {
  width: 128px !important;
  height: 28px !important;
  min-width: 128px;
  max-width: 128px;
  background-position: left center !important;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Buttons — ref: 13px/600 controls, 14px/700 login CTA */
.btn {
  padding: 7px 14px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.btn-primary {
  background-color: var(--primary) !important;
  color: #fff !important;
}
.btn-primary:hover {
  transform: none !important;
  filter: brightness(0.92);
}
.style-toggle-btn {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border-radius: 8px !important;
}
html[data-theme="light"] .logout-btn,
html[data-theme="light"] .sidebar-logout,
html[data-theme="light"] .style-toggle-btn {
  background: transparent !important;
}

/* Light theme: control borders match live reference */
html[data-theme="light"] input:not(.login-container input),
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .form-input {
  border-color: #cbd5e1 !important;
}

/* Mobile drawer overlay (reuses .mainZhezhao) */
@media (max-width: 1024px) {
  .mainZhezhao {
    z-index: 20;
    opacity: 0.55;
    background-color: #000;
    cursor: pointer;
  }
  .phone_sidebar {
    z-index: 25;
    transition: transform 0.2s ease;
  }
  .NavigationButton {
    left: 6px !important;
    top: 6px;
  }
  .header-left_phone .sidebar-header {
    padding-left: 52px !important;
    display: flex;
    align-items: center;
    height: 48px;
  }
}
@media (max-width: 768px) {
  .login-container {
    flex-direction: column !important;
    width: 400px !important;
    max-width: 92vw !important;
    min-height: 0 !important;
  }
  .login-container > .login-form-section {
    flex: none !important;
    width: 100% !important;
    order: 2;
    padding: 36px 28px !important;
  }
  .login-photo {
    width: 100% !important;
    flex: none !important;
    height: 150px !important;
    min-height: 150px !important;
    order: 1;
    border-left: none !important;
    border-bottom: 1px solid var(--login-card-border) !important;
  }
}

/* Light theme surface tokens (applied via JS setProperty on :root) */
:root {
  --light-bg: #ffffff;
  --light-card: #f1f5f9;
  --light-border: #e2e8f0;
  --light-muted-fg: #94a3b8;
  --foreground: #0f172a;
}

/* =============================================================
   DS canonical v3 — alignment, mobile drawer, RS-232 grid, fonts
   ============================================================= */

/* Card titles + rows share one left inset (16px) */
.title-box,
.title_box {
  padding: 14px 16px !important;
}

.dashboard-card .edid-item,
.dashboard-card .setting-item,
.dashboard-card .network-item,
.dashboard-card .routing-box.input_box,
.dashboard-card .auto_power_row,
.dashboard-card .auto_power_time_row,
.dashboard-card .auto_power_command_row,
.dashboard-card .serial_box,
.dashboard-card .serial_box_row,
.dashboard-card .output-settings-content,
.dashboard-card .rs232_box_big {
  padding-left: 16px !important;
  padding-right: 16px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.edid-item,
.setting-item {
  padding: 12px 16px !important;
}

/* Kill legacy row indents inside cards */
.dashboard-card [style*="margin-left: 16px"],
.dashboard-card [style*="margin-left:16px"] {
  margin-left: 0 !important;
}

/* RS-232 tab: two cards side-by-side (reference layout) */
.rs232-tab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.rs232-tab-grid > .dashboard-card {
  margin-bottom: 0 !important;
  height: 100%;
}
@media (max-width: 1280px) {
  .rs232-tab-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile drawer: logo inside menu, not in dimmed header */
.phone-drawer-header {
  display: none;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--gray);
  background: var(--sidebar-surface, var(--sidebar));
}
.phone-drawer-logo {
  width: 128px !important;
  height: 28px !important;
}
@media (max-width: 1024px) {
  .phone-drawer-header {
    display: flex;
  }
  body.phone-nav-open .header-left_phone .sidebar-logo {
    visibility: hidden;
    pointer-events: none;
  }
  body.phone-nav-open .header-left_phone .sidebar-header {
    background: transparent;
  }
}

/* Dropdowns / inputs — Barlow, no text-indent offset */
select,
select option {
  font-family: var(--font-sans, 'Barlow', sans-serif) !important;
  font-size: 13px !important;
}
input[type="text"],
input[type="password"],
input[type="number"],
textarea {
  text-indent: 0;
  padding-left: 12px;
  font-family: var(--font-sans, 'Barlow', sans-serif);
}
.login-container select.form-input {
  line-height: 1.4;
}
.login-container select.form-input option {
  background-color: var(--login-control-bg);
  color: var(--login-fg);
}

/* RS-232 local settings card */
#rs232-tab .rs232_box_big {
  padding: 16px !important;
}
#rs232-tab .rs232_box_ {
  grid-column-gap: 24px;
}
#rs232-tab .rs232_box_local {
  grid-template-columns: 120px 1fr;
  gap: 12px;
}
#rs232-tab .rs232_box_local > div:first-child {
  font-size: 12px;
  font-weight: 600;
  color: var(--light-gray);
}

/* Hide shell while login is visible (fixes fixed sidebar-user bleed-through) */
#login-page:not(.login-hidden) ~ #main-interface {
  display: none !important;
  visibility: hidden !important;
}

/* Sidebar footer — anchored to sidebar, not viewport */
.sidebar {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - 48px) !important;
  max-height: calc(100vh - 48px) !important;
}
.sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.sidebar-footer {
  flex-shrink: 0;
  width: 100%;
  border-top: 1px solid var(--gray);
  padding: 12px 16px;
  background: inherit;
}

/* Full HD (1920) + desktop shell — PureLink Apps layout */
@media (min-width: 1025px) {
  #main-interface {
    display: grid !important;
    grid-template-rows: auto 1fr;
    height: 100vh !important;
    overflow: hidden;
  }
  .main-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    min-height: 0 !important;
    overflow: hidden;
  }
  .top-header {
    position: sticky !important;
    top: 0;
    left: auto !important;
    flex-shrink: 0;
  }
  .main-box {
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr) !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    overflow: hidden;
  }
  .content-container {
    float: none !important;
    min-width: 0;
    overflow-y: auto;
    height: 100%;
    border-top: 1px solid var(--gray);
  }
  .dashboard-grid.row-1 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  .phone_box_da {
    grid-template-columns: minmax(0, 1fr) 460px !important;
    gap: 16px !important;
    align-items: start;
  }
}
@media (min-width: 1920px) {
  .tab-content {
    padding: 20px 24px !important;
    max-width: 1680px;
  }
  .phone_box_da {
    grid-template-columns: minmax(0, 1fr) 520px !important;
    gap: 20px !important;
  }
  .dashboard-grid.row-1 {
    gap: 20px !important;
  }
  .rs232-tab-grid {
    gap: 24px !important;
  }
  .setting_device {
    grid-template-columns: minmax(0, 1fr) 520px !important;
    gap: 20px !important;
  }
  #control-tab.tab-content.active {
    gap: 20px !important;
    max-width: 1280px;
  }
}

/* Shell pages — same horizontal rhythm as login/cards (16px) */
.tab-content {
  padding: 16px !important;
}
.main-content .dashboard-card {
  margin-bottom: 20px;
}
.routing-box.input_box {
  padding: 11px 16px !important;
  align-items: center;
}
.routing-box.input_box .input_box_data {
  font-size: 12px;
  font-weight: 600;
  color: var(--light-gray);
}
.edid-item {
  grid-template-columns: minmax(140px, 1fr) 1fr auto !important;
  gap: 12px !important;
}

/* Shell logos — theme-aware (light sidebar was blank) */
html[data-theme="light"] .sidebar-header .sidebar-logo,
html[data-theme="light"] .header-left .sidebar-logo,
html[data-theme="light"] .header-left_phone .sidebar-logo,
html[data-theme="light"] #top_title.sidebar-logo {
  background-image: url(../img/purelink-logo-light.png) !important;
}
html[data-theme="dark"] .sidebar-header .sidebar-logo,
html[data-theme="dark"] .header-left .sidebar-logo,
html[data-theme="dark"] .header-left_phone .sidebar-logo,
html[data-theme="dark"] #top_title.sidebar-logo,
html:not([data-theme="light"]) .sidebar-header .sidebar-logo,
html:not([data-theme="light"]) .header-left .sidebar-logo,
html:not([data-theme="light"]) .header-left_phone .sidebar-logo,
html:not([data-theme="light"]) #top_title.sidebar-logo {
  background-image: url(../img/purelink-logo-dark.png) !important;
}

/* Settings System tab — two-column like dashboard */
@media (min-width: 1025px) {
  .setting_device {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 460px !important;
    gap: 16px !important;
    align-items: start;
  }
  .setting_device > .dashboard-card:nth-child(1),
  .setting_device > .dashboard-card:nth-child(2),
  .setting_device > .dashboard-card:nth-child(3) {
    grid-column: 1;
  }
  .setting_device > .dashboard-card:nth-child(4) {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
  }
  .system_box {
    display: block !important;
  }
}

/* Control tab — 2×2 card grid on desktop (only when active) */
@media (min-width: 1025px) {
  #control-tab.tab-content.active {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-content: start;
  }
  #control-tab.tab-content.active > .dashboard-card {
    margin-bottom: 0 !important;
  }
  #control-tab.tab-content.active > .box_height {
    display: none !important;
  }
}

/* Tab scroll area — no phantom overflow on FullHD */
@media (min-width: 1025px) {
  .tab-content {
    height: auto !important;
    min-height: 0 !important;
    float: none !important;
  }
}

/* =============================================================
   DS canonical v4 — 100 % Referenz-Paritaet (apps.purelink.de)
   Wins over all legacy + v2/v3 rules.
   ============================================================= */

/* Primary CTAs keep fill; secondary .btn-box stays ghost */
.btn-box.front_selectactive,
.input_switch_box.front_selectactive,
.tab_box_.front_selectactive,
.front_select.front_selectactive,
#deviceNameSave.front_select,
.Download_edid_button,
.Console_send,
.tcp_console_send,
.get_data_send,
.type_btn,
.phone_type_btn,
.command_box_btn.front_selectactive,
.api_mode.front_selectactive,
.syslog-filter-active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.btn-box.front_selectactive:hover,
.input_switch_box.front_selectactive:hover,
.tab_box_.front_selectactive:hover {
  filter: brightness(0.92);
  background-color: var(--primary) !important;
}
.btn-box:not(.front_selectactive):not(.Download_edid_button):not(.Console_send):not(.tcp_console_send):not(.get_data_send):not(.type_btn):not(.phone_type_btn):not(.command_box_btn):not(.syslog-filter-active):not(#deviceNameSave) {
  background: transparent !important;
  color: var(--light) !important;
  border: 1px solid var(--gray) !important;
}
.btn-box:not(.front_selectactive):hover:not(.Download_edid_button):not(.Console_send) {
  background: var(--btn-box2) !important;
  color: var(--light) !important;
}
.btn-box:disabled,
.btn-box.disabled,
#firmwarecon,
.edidupload.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* Power control — tokenized */
.power-box-on {
  background-color: var(--success) !important;
}
.power-box-standby {
  background-color: var(--danger) !important;
}

/* Unified badge / pill system (ref shadcn Badge) */
.user_action,
.user_Routed,
.online_box,
.blue_box {
  background: var(--gbg) !important;
  color: var(--green) !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
  border-radius: var(--r-pill) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
}
.offline_action,
.offline_action.network_action {
  background: rgba(239, 68, 68, 0.12) !important;
  color: var(--danger) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  border-radius: var(--r-pill) !important;
}
.yel_box,
.data_.user_inactive,
.user_inactive:not(.grayuser_inactive) {
  background: var(--ybg) !important;
  color: var(--warning) !important;
  border: 1px solid rgba(234, 179, 8, 0.35) !important;
  border-radius: var(--r-pill) !important;
}
.grayuser_inactive {
  background: var(--btn-box2) !important;
  color: var(--light-gray) !important;
  border: 1px solid var(--gray) !important;
  border-radius: var(--r-pill) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
}
html[data-theme="light"] .grayuser_inactive {
  background: #f8fafc !important;
  color: #64748b !important;
  border-color: #e2e8f0 !important;
}
html[data-theme="light"] .user_action,
html[data-theme="light"] .online_box {
  background: rgba(34, 197, 94, 0.1) !important;
  color: #16a34a !important;
  border-color: rgba(34, 197, 94, 0.25) !important;
}
html[data-theme="light"] .offline_action {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #dc2626 !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}

/* Settings sub-tabs */
.tab_box_ {
  border-radius: var(--rs) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
}
.tab_box_:not(.front_selectactive) {
  background: transparent !important;
  border: 1px solid var(--gray) !important;
  color: var(--light) !important;
}

/* Header status + logout light */
html[data-theme="light"] .logout-btn {
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .top-left-info,
html[data-theme="light"] .info-divider {
  color: #94a3b8 !important;
}
.ip_addr_top, .ip_action, .gui_fw_top, .mcu_fw_top, .temp_data,
.network-value, .resdata, .res2data, .output_resdata, .command_box,
.mac_infor, .ip_infor {
  font-family: var(--font-mono) !important;
}

/* Table headers */
.title_tab div,
.routing-box.title_tab div {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--light-gray) !important;
}

/* API mode chips */
.api_mode_light {
  background-color: var(--btn-box2) !important;
  color: var(--light-gray) !important;
  border: 1px solid var(--gray) !important;
}

/* Login CTA + controls — ref measured */
.login-container .login-btn {
  background-color: var(--primary) !important;
}
.login-container input.form-input,
.login-container select.form-input {
  border: 1px solid var(--login-control-border) !important;
  box-shadow: none !important;
  color: var(--login-fg) !important;
}
html[data-theme="light"] .login-container input.form-input,
html[data-theme="light"] .login-container select.form-input {
  color: #0f172a !important;
}

/* Card chrome */
.dashboard-card,
.card-video-routing {
  border-radius: var(--r) !important;
  box-shadow: var(--shadow) !important;
}

/* Nav section labels */
.divider-text {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--light-gray) !important;
}

html[data-theme="light"] body,
html[data-theme="light"] .login-container {
  color: #0f172a !important;
}
.login-subtitle,
.ip_action {
  font-weight: 400 !important;
}

/* D-S01: Settings action buttons — ghost like reference */
.setting_btn_box button {
  background: transparent !important;
  color: var(--light) !important;
  border: 1px solid var(--gray) !important;
  border-radius: var(--rs) !important;
}
.setting_btn_box button:hover {
  background: var(--btn-box2) !important;
  filter: none !important;
}

/* D-S02: Display/black-screen segmented buttons — ghost when inactive */
.btn-box.display_dis,
.btn-box.display_ena,
.btn-box.screensou_dis,
.btn-box.screensou_ena {
  background: transparent !important;
  color: var(--light) !important;
  border: 1px solid var(--gray) !important;
}
.btn-box.display_dis.front_selectactive,
.btn-box.display_ena.front_selectactive,
.btn-box.screensou_dis.front_selectactive,
.btn-box.screensou_ena.front_selectactive {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

/* D-S03: Front-panel toggle segments */
.front_box div {
  background: transparent !important;
  color: var(--light) !important;
  border: 1px solid var(--gray) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  width: 40px !important;
  height: 28px !important;
  line-height: 26px !important;
  border-radius: var(--rs) !important;
}
.front_box div.front_select,
.front_box div.front_selectactive {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

/* D-L01: Login control border exact match */
html[data-theme="light"] .login-container input.form-input,
html[data-theme="light"] .login-container select.form-input {
  border-color: #cbd5e1 !important;
}

/* D-L02: Logo vertical rhythm (ref measured) */
.login-container .kit-login-logo,
.kit-login-logo {
  margin: 0 0 4px 0 !important;
}

/* D-L01b: Login border exact hex (Chromium cascade) */
html[data-theme="light"] .login-container input.form-input,
html[data-theme="light"] .login-container select.form-input {
  border: 1px solid #cbd5e1 !important;
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
}

/* Shell surfaces — sidebar vs main (ref tokens) */
.sidebar,
.phone_sidebar {
  background-color: var(--sidebar-surface) !important;
  border-right: 1px solid var(--gray) !important;
}
.sidebar-header {
  width: var(--sidebar-width) !important;
  background: var(--secondary2) !important;
}
.main-content {
  background-color: var(--dark) !important;
}

/* Audio / signal segmented buttons — ghost inactive */
.audio_signal:not(.audio_signalactive),
.out_signal:not(.audio_signalactive):not(.front_selectactive) {
  background: transparent !important;
  color: var(--light) !important;
  border: 1px solid var(--gray) !important;
  border-radius: var(--rs) !important;
}
.audio_signal.audio_signalactive,
.out_signal.audio_signalactive,
.out_signal.front_selectactive {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

/* Routing toggle chips */
.routing_box:not(.front_selectactive),
.routing_box_video:not(.front_selectactive) {
  background: transparent !important;
  border: 1px solid var(--gray) !important;
  color: var(--light) !important;
}
.routing_box.front_selectactive,
.routing_box_video.front_selectactive {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

/* CEC toggle + mode badge */
.cec_active {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: lowercase !important;
  border-radius: var(--r-pill) !important;
  padding: 3px 9px !important;
}
.mode_active_off {
  background: var(--btn-box2) !important;
  color: var(--light-gray) !important;
  border: 1px solid var(--gray) !important;
}

/* Syslog filter chips — ghost default */
.syslog-filter:not(.syslog-filter-active) {
  background: transparent !important;
  border: 1px solid var(--gray) !important;
  color: var(--light) !important;
}

/* Dark theme sidebar token */
html[data-theme="dark"],
html:not([data-theme="light"]) {
  --sidebar-surface: #0b1120;
}
html[data-theme="light"] {
  --sidebar-surface: #ffffff;
}

/* =============================================================
   DS canonical v5 - Auth reference parity layer
   Final cascade source for PureLink Apps parity. It neutralizes
   legacy filled controls without touching JS behavior.
   ============================================================= */
:root {
  --primary: #005ae5;
  --background: #0b1120;
  --foreground: #f1f5f9;
  --card-bg: #151d2e;
  --border-ref: rgba(255,255,255,.08);
  --muted-fg: #94a3b8;
  --control-bg: #1e293b;
  --sidebar-surface: #0b1120;
  --login-surface: #0b1120;
  --login-card: #151d2e;
  --login-form-bg: #151d2e;
  --login-card-border: rgba(255,255,255,.08);
  --login-label: #94a3b8;
  --login-control-bg: #1e293b;
  --login-control-border: rgba(255,255,255,.08);
  --login-fg: #f1f5f9;
  --shadow: 0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.2);
  --shadow-pop: 0 20px 25px -5px rgba(0,0,0,.5), 0 8px 10px -6px rgba(0,0,0,.4);
}
html[data-theme="dark"] {
  --dark: #0b1120;
  --gray: rgba(255,255,255,.08);
  --light: #f1f5f9;
  --light-gray: #94a3b8;
  --secondary2: #151d2e;
  --btn-input: #1e293b;
  --white: #ffffff;
  --btn-box: #334155;
  --btn-box2: #1e293b;
  --sidebar: #0b1120;
  --background: #0b1120;
  --foreground: #f1f5f9;
  --card-bg: #151d2e;
  --border-ref: rgba(255,255,255,.08);
  --muted-fg: #94a3b8;
  --control-bg: #1e293b;
  --sidebar-surface: #0b1120;
  --login-surface: #0b1120;
  --login-card: #151d2e;
  --login-form-bg: #151d2e;
  --login-card-border: rgba(255,255,255,.08);
  --login-label: #94a3b8;
  --login-control-bg: #1e293b;
  --login-control-border: rgba(255,255,255,.08);
  --login-fg: #f1f5f9;
}
html[data-theme="light"] {
  --dark: #f1f5f9;
  --gray: #e2e8f0;
  --light: #0f172a;
  --light-gray: #94a3b8;
  --secondary2: #ffffff;
  --btn-input: #f8fafc;
  --white: #0f172a;
  --btn-box: #f1f5f9;
  --btn-box2: #f8fafc;
  --sidebar: #ffffff;
  --background: #ffffff;
  --foreground: #0f172a;
  --card-bg: #ffffff;
  --border-ref: #e2e8f0;
  --muted-fg: #94a3b8;
  --control-bg: #f8fafc;
  --sidebar-surface: #ffffff;
  --login-surface: #f1f5f9;
  --login-card: #ffffff;
  --login-form-bg: #ffffff;
  --login-card-border: #e2e8f0;
  --login-label: #94a3b8;
  --login-control-bg: #f8fafc;
  --login-control-border: #cbd5e1;
  --login-fg: #0f172a;
  --shadow: 0 1px 2px 0 rgba(15,23,42,.08);
  --shadow-pop: 0 8px 40px rgba(15,23,42,.14);
}

body,
#main-interface,
.main-content {
  color: var(--light) !important;
  background: var(--dark) !important;
  font-family: var(--font-sans) !important;
}
.main-box {
  grid-template-columns: 240px minmax(0, 1fr) !important;
  height: calc(100vh - 48px) !important;
  margin-top: 48px !important;
  overflow: hidden !important;
}
.top-header {
  height: 48px !important;
  min-height: 48px !important;
  background: var(--secondary2) !important;
  border-bottom: 1px solid var(--gray) !important;
  overflow: hidden !important;
}
.sidebar,
.phone_sidebar {
  background: var(--sidebar-surface) !important;
  border-right: 1px solid var(--gray) !important;
}
.sidebar-header {
  width: 240px !important;
  height: 48px !important;
  padding: 0 16px !important;
  background: var(--secondary2) !important;
  border-right: 1px solid var(--gray) !important;
}
.top-left-info {
  padding-left: 24px !important;
  gap: 10px !important;
  color: var(--light) !important;
}
.info-item span:first-child,
.top-left-info .login-subtitle,
.divider-text {
  color: var(--light-gray) !important;
}

.nav-link,
.nav-link-phone {
  min-height: 34px !important;
  padding: 7px 10px !important;
  margin: 0 8px 2px !important;
  border-radius: 8px !important;
  color: var(--light-gray) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
.nav-link:hover,
.nav-link-phone:hover {
  color: var(--light) !important;
  background: var(--btn-box2) !important;
}
.nav-link.active,
.nav-link-phone.active {
  color: var(--light) !important;
  background: var(--btn-box2) !important;
  border-color: var(--gray) !important;
  font-weight: 600 !important;
}

.tab-content {
  padding: 16px !important;
  background: var(--dark) !important;
  color: var(--light) !important;
  overflow: auto !important;
}
@media (min-width: 1920px) {
  .tab-content {
    padding: 20px 24px !important;
    max-width: 1680px !important;
  }
}
.dashboard-card,
.card,
.card-video-routing,
#changpassword {
  background: var(--secondary2) !important;
  border: 1px solid var(--gray) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
  color: var(--light) !important;
  overflow: hidden !important;
}
.title-box,
.title_box,
.card-title,
.signal-item,
.setting-item,
.edid-item,
.routing-box,
.network-item,
.rs232_box_local,
.rs232_command_local,
.pohne_box_status_li,
.command_title,
.syslog-list li {
  border-color: var(--gray) !important;
}
.title-box,
.title_box {
  padding: 14px 16px !important;
}
.title_size,
.dashboard-card .card-title {
  color: var(--light) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
}
.login-subtitle,
.dashboard-title,
.title_tab div,
.data-table th,
.command_title > div:first-child,
.form-label {
  color: var(--light-gray) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.data-table th,
.title_tab div {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}

input,
select,
textarea,
.form-input,
.logo_url,
.edid_load_box,
.network-input {
  background: var(--btn-input) !important;
  border: 1px solid var(--gray) !important;
  border-radius: 8px !important;
  color: var(--light) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  min-height: 36px;
  box-shadow: none !important;
}
input:focus,
select:focus,
textarea:focus,
.form-input:focus {
  border-color: var(--primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px var(--primary) !important;
}

.btn,
.btn-box,
.down_edid,
.out_signal,
.audio_signal,
.routing_box,
.routing_box_video,
.front_box div,
.power_box_,
.type_btn,
.phone_type_btn,
.command_box_btn,
.api_mode,
.syslog-filter,
.syslog-clear,
.setting_btn_box button {
  border-radius: 8px !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}
.btn-box:not(.front_selectactive):not(.audio_signalactive):not(.Download_edid_button):not(.Console_send):not(.tcp_console_send):not(.get_data_send):not(.type_btn):not(.phone_type_btn):not(.command_box_btn):not(.syslog-filter-active):not(#deviceNameSave),
.down_edid,
.out_signal:not(.front_selectactive),
.audio_signal:not(.audio_signalactive),
.routing_box:not(.front_selectactive),
.routing_box_video:not(.front_selectactive),
.command_box_btn:not(.front_selectactive),
.api_mode:not(.front_selectactive),
.syslog-filter:not(.syslog-filter-active),
.syslog-clear,
.setting_btn_box button,
.btn-secondary {
  background: transparent !important;
  color: var(--light) !important;
  border: 1px solid var(--gray) !important;
}
.btn-box:not(.front_selectactive):not(.audio_signalactive):hover,
.down_edid:hover,
.out_signal:not(.front_selectactive):hover,
.audio_signal:not(.audio_signalactive):hover,
.routing_box:not(.front_selectactive):hover,
.routing_box_video:not(.front_selectactive):hover,
.command_box_btn:not(.front_selectactive):hover,
.api_mode:not(.front_selectactive):hover,
.syslog-filter:not(.syslog-filter-active):hover,
.syslog-clear:hover,
.setting_btn_box button:hover,
.btn-secondary:hover {
  background: var(--btn-box2) !important;
  color: var(--light) !important;
  filter: none !important;
}
.btn-primary,
.login-btn,
.Console_send,
.tcp_console_send,
.get_data_send,
.Download_edid_button,
.btn-box.front_selectactive,
.input_switch_box.front_selectactive,
.tab_box_.front_selectactive,
.front_selectactive,
.front_select.front_selectactive,
.audio_signalactive,
.type_btn,
.phone_type_btn,
.command_box_btn.front_selectactive,
.api_mode.front_selectactive,
.syslog-filter-active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.btn-box.display_dis,
.btn-box.display_ena,
.btn-box.screensou_dis,
.btn-box.screensou_ena,
.audio_dis,
.audio_ena {
  min-width: 78px !important;
  height: 32px !important;
  line-height: 30px !important;
  display: inline-grid !important;
  place-items: center !important;
}
.btn-box.display_dis:not(.audio_signalactive):not(.front_selectactive),
.btn-box.display_ena:not(.audio_signalactive):not(.front_selectactive),
.btn-box.screensou_dis:not(.audio_signalactive):not(.front_selectactive),
.btn-box.screensou_ena:not(.audio_signalactive):not(.front_selectactive),
.audio_dis:not(.audio_signalactive),
.audio_ena:not(.audio_signalactive) {
  background: transparent !important;
  border: 1px solid var(--gray) !important;
  color: var(--light) !important;
}
.btn-box.display_dis.audio_signalactive,
.btn-box.display_ena.audio_signalactive,
.btn-box.screensou_dis.audio_signalactive,
.btn-box.screensou_ena.audio_signalactive,
.audio_dis.audio_signalactive,
.audio_ena.audio_signalactive {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.front_box {
  grid-column-gap: 6px !important;
  align-items: center !important;
}
.front_box div {
  width: 40px !important;
  height: 28px !important;
  line-height: 26px !important;
  background: transparent !important;
  border: 1px solid var(--gray) !important;
  color: var(--light) !important;
}
.front_box div.front_select,
.front_box div.front_selectactive {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.user_action,
.user_Routed,
.online_box,
.blue_box,
.offline_action,
.user_inactive,
.grayuser_inactive,
.user_Unrouted,
.user_res,
.user_res_no,
.yel_box,
.syslog-badge {
  min-height: 22px !important;
  width: auto !important;
  display: inline-grid !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px 9px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  border: 1px solid currentColor !important;
  box-shadow: none !important;
}
.user_action,
.user_Routed,
.online_box,
.blue_box {
  background: rgba(16,185,129,.12) !important;
  color: #10b981 !important;
  border-color: rgba(16,185,129,.32) !important;
}
.offline_action,
.user_inactive,
.grayuser_inactive,
.user_Unrouted,
.user_res_no {
  background: var(--btn-box2) !important;
  color: var(--light-gray) !important;
  border-color: var(--gray) !important;
}
.yel_box,
.syslog-badge.warn {
  background: rgba(245,158,11,.14) !important;
  color: #f59e0b !important;
  border-color: rgba(245,158,11,.32) !important;
}

.login-wrapper {
  background: var(--login-surface) !important;
  padding: 0 !important;
}
.login-container {
  width: 820px !important;
  height: 520px !important;
  min-height: 520px !important;
  max-width: 94vw !important;
  background: var(--login-card) !important;
  border: 1px solid var(--login-card-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.28) !important;
  overflow: hidden !important;
}
.login-container > .login-form-section {
  flex: 0 0 438px !important;
  width: 438px !important;
  padding: 64px 44px !important;
  background: var(--login-form-bg) !important;
  align-items: flex-start !important;
}
.login-container .login-header,
.login-container .form-group,
.login-container .input-wrapper,
.login-container .login-btn {
  width: 350px !important;
  max-width: 350px !important;
}
.login-container .login-header {
  margin-bottom: 0 !important;
  text-align: left !important;
}
.login-container .kit-login-logo,
.kit-login-logo {
  width: 172px !important;
  height: 36px !important;
  margin: 0 0 4px 0 !important;
  background-position: left center !important;
  background-size: contain !important;
}
.login-container .login-subtitle {
  margin: 0 0 12px 0 !important;
  color: var(--login-label) !important;
}
.login-container .form-label {
  margin: 0 0 5px 0 !important;
  color: var(--login-label) !important;
  font-weight: 600 !important;
}
.login-container .form-group {
  margin-bottom: 14px !important;
}
.login-container input.form-input,
.login-container select.form-input {
  width: 350px !important;
  max-width: 350px !important;
  background: var(--login-control-bg) !important;
  border: 1px solid var(--login-control-border) !important;
  border-color: var(--login-control-border) !important;
  color: var(--login-fg) !important;
  box-shadow: none !important;
}
.login-container input.form-input {
  height: 38px !important;
  min-height: 38px !important;
}
.login-container select.form-input {
  height: 36px !important;
  min-height: 36px !important;
}
.login-container .login-btn {
  height: 41px !important;
  min-height: 41px !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  background: var(--primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 21px !important;
}
.login-photo {
  width: 382px !important;
  min-height: 520px !important;
  height: 520px !important;
  border-left: 1px solid var(--login-card-border) !important;
}
html[data-theme="light"] .login-container input.form-input,
html[data-theme="light"] .login-container select.form-input {
  border: 1px solid #cbd5e1 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .style-toggle-btn,
html[data-theme="light"] .logout-btn,
html[data-theme="light"] .sidebar-logout {
  background: transparent !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

.setting_btn_box {
  margin-left: 0 !important;
  padding: 0 16px !important;
}
.setting_btn_box button {
  height: 40px !important;
  padding: 0 14px !important;
  text-align: left !important;
}
.dashboard-card [style*="margin-left: 16px"],
.dashboard-card [style*="margin-left:16px"] {
  margin-left: 0 !important;
}
.cec_box,
.audio_box,
.output-settings-content,
.setting-item,
.signal-item,
.edid-item,
.network-item,
.rs232_box_local,
.rs232_command_local {
  color: var(--light) !important;
}
.syslog-list li {
  background: transparent !important;
}
.syslog-list li:hover,
#commandContainer .command_title:hover,
.data-table tr:hover td {
  background: var(--btn-box2) !important;
}

/* DS canonical v5.1 - PureLink Apps reference dark palette (neutral gray) */
html[data-theme="dark"] {
  --dark: #0b1120;
  --gray: rgba(255,255,255,.08);
  --light: #f1f5f9;
  --light-gray: #94a3b8;
  --secondary2: #151d2e;
  --btn-input: #1e293b;
  --white: #ffffff;
  --btn-box: #334155;
  --btn-box2: #1e293b;
  --sidebar: #0b1120;
  --background: #0b1120;
  --foreground: #f1f5f9;
  --card-bg: #151d2e;
  --border-ref: rgba(255,255,255,.08);
  --muted-fg: #94a3b8;
  --control-bg: #1e293b;
  --sidebar-surface: #0b1120;
  --login-surface: #0b1120;
  --login-card: #151d2e;
  --login-form-bg: #151d2e;
  --login-card-border: rgba(255,255,255,.08);
  --login-label: #94a3b8;
  --login-control-bg: #1e293b;
  --login-control-border: #4d4d4d;
  --login-fg: #f1f5f9;
}


/* D-L02 audit parity: reference subtitle reports a zero-width solid border. */
.login-container .login-subtitle {
  border: 0 solid var(--login-label) !important;
}


/* DS canonical v5.2 - PureLink Apps reference light shell palette */
html[data-theme="light"] {
  --dark: #ffffff;
  --gray: #e2e8f0;
  --light: #0f172a;
  --light-gray: #64748b;
  --secondary2: #ffffff;
  --btn-input: #ffffff;
  --white: #0f172a;
  --btn-box: #f1f5f9;
  --btn-box2: #f1f5f9;
  --sidebar: #ffffff;
  --background: #ffffff;
  --foreground: #0f172a;
  --card-bg: #ffffff;
  --border-ref: #e2e8f0;
  --muted-fg: #64748b;
  --control-bg: #ffffff;
  --sidebar-surface: #ffffff;
  --login-surface: #ffffff;
  --login-card: #f1f5f9;
  --login-form-bg: #f1f5f9;
  --login-card-border: #e2e8f0;
  --login-label: #64748b;
  --login-control-bg: #ffffff;
  --login-control-border: #cbd5e1;
  --login-fg: #0f172a;
}

/* DS canonical v5.3 - measured shell action button fills */
html[data-theme="light"] {
  --action-muted-bg: #94a3b8;
  --action-muted-fg: #ffffff;
  --outline-button-bg: rgba(0, 0, 0, 0.06);
  --outline-button-fg: #334155;
}
html[data-theme="dark"] {
  --action-muted-bg: #334155;
  --action-muted-fg: #f1f5f9;
  --outline-button-bg: rgba(255, 255, 255, 0.06);
  --outline-button-fg: #f1f5f9;
}
.type_btn:not(.front_selectactive),
.phone_type_btn:not(.front_selectactive),
.command_box_btn:not(.front_selectactive),
.api_mode:not(.front_selectactive),
.routing_box:not(.front_selectactive),
.routing_box_video:not(.front_selectactive),
.audio_signal:not(.audio_signalactive),
.out_signal:not(.front_selectactive),
.btn-box.display_dis:not(.audio_signalactive):not(.front_selectactive),
.btn-box.display_ena:not(.audio_signalactive):not(.front_selectactive),
.btn-box.screensou_dis:not(.audio_signalactive):not(.front_selectactive),
.btn-box.screensou_ena:not(.audio_signalactive):not(.front_selectactive),
.audio_dis:not(.audio_signalactive),
.audio_ena:not(.audio_signalactive) {
  background: var(--action-muted-bg) !important;
  border: 0 !important;
  color: var(--action-muted-fg) !important;
}
.type_btn:not(.front_selectactive):hover,
.phone_type_btn:not(.front_selectactive):hover,
.command_box_btn:not(.front_selectactive):hover,
.api_mode:not(.front_selectactive):hover,
.routing_box:not(.front_selectactive):hover,
.routing_box_video:not(.front_selectactive):hover,
.audio_signal:not(.audio_signalactive):hover,
.out_signal:not(.front_selectactive):hover,
.btn-box.display_dis:not(.audio_signalactive):not(.front_selectactive):hover,
.btn-box.display_ena:not(.audio_signalactive):not(.front_selectactive):hover,
.btn-box.screensou_dis:not(.audio_signalactive):not(.front_selectactive):hover,
.btn-box.screensou_ena:not(.audio_signalactive):not(.front_selectactive):hover,
.audio_dis:not(.audio_signalactive):hover,
.audio_ena:not(.audio_signalactive):hover {
  filter: brightness(.94) !important;
  background: var(--action-muted-bg) !important;
}
.logout-btn,
.sidebar-logout,
.btn-secondary,
.setting_btn_box button,
.syslog-clear,
.btn-box:disabled,
button:disabled {
  background: var(--outline-button-bg) !important;
  border: 1px solid var(--gray) !important;
  color: var(--outline-button-fg) !important;
}
.style-toggle-btn {
  background: transparent !important;
  border: 1px solid var(--login-control-border) !important;
}

/* DS canonical v5.4 - measured header icon button colors */
.power {
  background: var(--primary) !important;
  border: 0 !important;
  color: #ffffff !important;
}
.load {
  background: var(--action-muted-bg) !important;
  border: 0 !important;
  color: #ffffff !important;
}
.power,
.load {
  width: 32px !important;
  height: 22px !important;
  min-height: 22px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}
.power > div,
.load > div {
  margin: 0 !important;
}

/* DS canonical v5.5 - measured light header outline controls */
html[data-theme="light"] .style-toggle-btn {
  background: transparent !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .logout-btn {
  height: 24px !important;
  min-height: 24px !important;
  padding: 5px 10px !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  line-height: 12px !important;
}

/* DS canonical v5.6 - marked screenshot spacing and dark shell parity */
.main-content {
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

.top-header {
  height: 48px !important;
  min-height: 48px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
}

.main-box {
  margin-top: 0 !important;
  height: calc(100vh - 48px) !important;
  min-height: 0 !important;
}

.sidebar,
.phone_sidebar {
  height: calc(100vh - 48px) !important;
  min-height: 0 !important;
}

.sidebar {
  display: flex !important;
  flex-direction: column !important;
}

.sidebar-footer {
  margin-top: auto !important;
}

.tab-content {
  padding: 18px 16px 16px 26px !important;
}

.top-right-info {
  margin-right: 16px !important;
}

html[data-theme="dark"] {
  --dark: #0b1120;
  --gray: rgba(255,255,255,.08);
  --light: #f1f5f9;
  --light-gray: #94a3b8;
  --secondary2: #151d2e;
  --btn-input: #1e293b;
  --white: #ffffff;
  --btn-box: #334155;
  --btn-box2: #1e293b;
  --sidebar: #0b1120;
  --background: #0b1120;
  --foreground: #f1f5f9;
  --card-bg: #151d2e;
  --border-ref: rgba(255,255,255,.08);
  --muted-fg: #94a3b8;
  --control-bg: #1e293b;
  --sidebar-surface: #0b1120;
  --login-surface: #0b1120;
  --login-card: #151d2e;
  --login-form-bg: #151d2e;
  --login-card-border: rgba(255,255,255,.08);
  --login-label: #94a3b8;
  --login-control-bg: #1e293b;
  --login-control-border: #4d4d4d;
  --login-fg: #f1f5f9;
  --action-muted-bg: #334155;
  --action-muted-fg: #f1f5f9;
  --outline-button-bg: rgba(255, 255, 255, 0.06);
  --outline-button-fg: #f1f5f9;
}

html[data-theme="dark"] .top-header,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-video-routing,
html[data-theme="dark"] #changpassword,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .phone_sidebar,
html[data-theme="dark"] .title-box,
html[data-theme="dark"] .title_box,
html[data-theme="dark"] .data-table th,
html[data-theme="dark"] .data-table td,
html[data-theme="dark"] .network-row,
html[data-theme="dark"] .routing-box,
html[data-theme="dark"] .command_title,
html[data-theme="dark"] .syslog-list li,
html[data-theme="dark"] .sidebar-footer {
  border-color: rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .phone_sidebar,
html[data-theme="dark"] .sidebar-header,
html[data-theme="dark"] .sidebar-footer {
  background: #0b1120 !important;
}

html[data-theme="dark"] .style-toggle-btn {
  width: 30px !important;
  height: 30px !important;
  background: transparent !important;
  border: 1px solid #4d4d4d !important;
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .power {
  background: rgba(0, 90, 229, 0.80) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .load {
  background: #334155 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .logout-btn {
  height: 24px !important;
  min-height: 24px !important;
  padding: 5px 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
  line-height: 12px !important;
}

/* DS canonical v5.7 - sidebar footer bottom anchoring */
.sidebar-nav {
  height: auto !important;
  max-height: none !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.sidebar-footer {
  flex: 0 0 auto !important;
  margin-top: auto !important;
}

/* DS canonical v5.8 - measured dashboard KPI grid rhythm */
.dashboard-grid.row-1 {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.dashboard-grid.row-1 > .dashboard-card-box {
  height: 132px !important;
  min-height: 132px !important;
  padding: 20px !important;
}

.dashboard-grid.row-1 .dashboard-card .card-title,
.dashboard-grid.row-1 .dashboard-title {
  margin-bottom: 8px !important;
}

/* DS canonical v5.9 - dashboard reference slot and 1px shell edge correction */
.tab-content {
  padding: 17px 16px 16px 26px !important;
}

.dashboard-grid.row-1 > .dashboard-card-box {
  margin-bottom: 0 !important;
}


/* DS canonical v5.10 - authenticated reference dashboard column threshold */
.dashboard-grid.row-1 {
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)) !important;
}

/* DS canonical v5.11 - authenticated dashboard quick cards */
.dashboard-grid.row-1 {
  margin-bottom: 0 !important;
}

@media (min-width: 1500px) {
  .dashboard-grid.row-1 {
    margin-bottom: 20px !important;
  }
}

.dashboard-quick-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

.dashboard-quick-card {
  height: 156px !important;
  min-height: 156px !important;
  margin-bottom: 0 !important;
}

.dashboard-quick-card .title-box {
  height: 60px !important;
  padding: 14px 16px !important;
}

.quick-card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 14px 16px 0 !important;
}

.quick-card-actions .btn-box {
  min-width: 72px !important;
  height: 28px !important;
  line-height: 26px !important;
  text-align: center !important;
}

.quick-card-current {
  padding: 10px 16px 0 !important;
}

/* DS canonical v5.12 - symmetric authenticated content inset */
.tab-content {
  padding: 17px 26px 16px 26px !important;
}

/* DS canonical v6 - responsive spacing, console density, tablet parity */
:root {
  --shell-inset: 26px;
  --card-gap: 16px;
  --row-gap: 16px;
  --field-height: 36px;
  --console-height: 150px;
  --tablet-inset: 18px;
  --mobile-inset: 14px;
}

.tab-content {
  padding: var(--shell-inset) !important;
  background: var(--dark) !important;
}

.dashboard-card,
.card,
.card-video-routing,
#changpassword {
  margin-bottom: var(--row-gap) !important;
}

.dashboard-grid,
.rs232-tab-grid,
.setting_device,
.phone_box_da,
.page_1280_box,
.rs232_box,
.status-rename-grid {
  gap: var(--card-gap) !important;
}

input,
select,
textarea,
.form-input,
.network-input,
.logo_url,
.edid_load_box {
  min-height: var(--field-height) !important;
}

.top-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  overflow: visible !important;
}

.top-left-info,
.top-right-info {
  min-width: 0 !important;
}

.top-left-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.top-right-info {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-right: 16px !important;
  white-space: nowrap !important;
}

.sidebar-header {
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
}

.sidebar-header .sidebar-logo,
.header-left_phone .sidebar-logo,
.phone-drawer-logo,
#top_title.sidebar-logo {
  width: 132px !important;
  min-width: 132px !important;
  height: 30px !important;
  background-size: contain !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
}

.style-toggle-btn {
  font-size: 0 !important;
  overflow: hidden !important;
}

.style-toggle-btn::before {
  content: "☀";
  font-size: 13px;
  line-height: 1;
}

html[data-theme="light"] .style-toggle-btn::before {
  content: "☾";
}

.load > div {
  font-size: 0 !important;
}

.load > div::before {
  content: "↻";
  font-size: 13px;
  line-height: 22px;
}

.dashboard-grid.row-1 {
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)) !important;
  gap: var(--card-gap) !important;
  margin-bottom: var(--card-gap) !important;
}

.dashboard-grid.row-1 > .dashboard-card-box {
  min-height: 132px !important;
  height: 132px !important;
  margin-bottom: 0 !important;
}

.dashboard-quick-row {
  gap: var(--card-gap) !important;
}

.phone_box_da {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, .75fr) !important;
  align-items: start !important;
}

#dashboard-tab .pc_box .routing-box,
#status-tab .pc_box .routing-box {
  display: grid !important;
  grid-template-columns: minmax(76px, .8fr) minmax(126px, 1.15fr) minmax(104px, .95fr) minmax(108px, .95fr) minmax(84px, .75fr) minmax(72px, .65fr) !important;
  column-gap: 12px !important;
  min-height: 56px !important;
  align-items: center !important;
}

#dashboard-tab .pc_box .routing-box > *,
#status-tab .pc_box .routing-box > * {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

#dashboard-tab .user_res,
#status-tab .user_res,
#dashboard-tab .resdata,
#dashboard-tab .res2data,
#dashboard-tab .output_resdata,
#status-tab .resdata,
#status-tab .res2data,
#status-tab .output_resdata {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

#status-tab .dashboard-grid.row-2 {
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .75fr) minmax(280px, .75fr) !important;
  align-items: start !important;
}

#status-tab .dashboard-card.card-output-settings {
  min-width: 0 !important;
  margin-bottom: 0 !important;
}

#audio-tab .break-card-box {
  padding: 16px !important;
  margin-top: 0 !important;
}

#audio-tab .break-card {
  width: 100% !important;
  min-height: 72px !important;
  padding: 16px !important;
  display: grid !important;
  grid-template-columns: minmax(140px, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  background: var(--btn-box2) !important;
  border: 1px solid var(--gray) !important;
  border-radius: 8px !important;
}

#audio-tab .audio_box {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}

#audio-tab .audio_signal {
  min-width: 86px !important;
  height: 30px !important;
  line-height: 28px !important;
}

#cec-tab .rs232_box {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--card-gap) !important;
}

#cec-tab .rs232_box > .dashboard-card {
  margin-bottom: 0 !important;
}

#cec-tab .serial_box_row {
  margin-left: 16px !important;
  margin-right: 16px !important;
  grid-template-columns: minmax(0, 1fr) 60px !important;
  gap: 10px !important;
}

#rs232-tab .rs232-tab-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
}

#rs232-tab .serial_box,
#rs232-tab .auto_power_command_row,
#rs232-tab .auto_power_time_row {
  gap: 10px !important;
}

#rs232-tab .rs232_box_big {
  padding: 16px !important;
}

#rs232-tab .rs232_box_ {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 12px !important;
}

#rs232-tab .rs232_box_[style*="margin-top: 40px"] {
  margin-top: 16px !important;
  margin-bottom: 12px !important;
}

#rs232-tab .rs232_box_local,
#rs232-tab .rs232_command_local {
  grid-template-columns: 120px minmax(0, 1fr) !important;
}

#rs232-tab .rs232_command_local {
  grid-template-columns: 120px minmax(0, 1fr) 60px !important;
}

.serial_printf,
.tcp_printf {
  height: var(--console-height) !important;
  min-height: var(--console-height) !important;
  max-height: var(--console-height) !important;
  overflow-y: auto !important;
}

#command-tab .dashboard-card,
#rs232-tab > .dashboard-card {
  margin-bottom: var(--row-gap) !important;
}

#command-tab .api_mode_box {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 16px 16px 8px !important;
}

#command-tab .api_mode_command_box {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto !important;
  gap: 10px !important;
  padding: 0 16px 16px !important;
  align-items: end !important;
}

#command-tab .tcpcommand {
  padding: 8px 16px 0 !important;
}

#commandContainer,
#commandContainer_phone {
  height: 360px !important;
  max-height: 45vh !important;
}

.command_title {
  min-width: 920px !important;
}

#command-tab .pc_box {
  overflow-x: auto !important;
}

.setting_device {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px) !important;
  align-items: start !important;
}

.setting_btn_box {
  margin-left: 0 !important;
  padding: 16px !important;
  display: grid !important;
  gap: 8px !important;
}

.setting_btn_box button {
  height: 34px !important;
  text-align: left !important;
  padding: 0 12px !important;
}

.front_box {
  justify-content: end !important;
}

.page_1280_box {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
  align-items: stretch !important;
}

.color_box_big {
  margin-top: 20px !important;
  min-width: 0 !important;
}

.color-tabs {
  grid-template-columns: repeat(auto-fit, minmax(24px, 30px)) !important;
  gap: 12px !important;
}

.login-container {
  width: min(820px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 32px) !important;
}

@media (min-width: 1500px) {
  :root {
    --card-gap: 20px;
    --row-gap: 20px;
  }
}

@media (max-width: 1280px) {
  .tab-content {
    padding: var(--tablet-inset) !important;
  }

  .dashboard-grid.row-1 {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  }

  .phone_box_da,
  .setting_device,
  #rs232-tab .rs232-tab-grid,
  #cec-tab .rs232_box {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #status-tab .dashboard-grid.row-2 {
    grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr) !important;
  }

  #command-tab .api_mode_command_box {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
  }
}

@media (max-width: 1024px) {
  #main-interface {
    display: grid !important;
    grid-template-rows: 48px minmax(0, 1fr) !important;
  }

  .main-box {
    display: block !important;
    height: calc(100vh - 48px) !important;
    overflow: hidden !important;
  }

  .content-container {
    height: 100% !important;
    overflow-y: auto !important;
  }

  .sidebar {
    display: none !important;
  }

  .header-left_phone {
    display: flex !important;
    align-items: center !important;
    min-width: 180px !important;
  }

  .header-left_phone .sidebar-header {
    padding-left: 52px !important;
    width: auto !important;
    background: var(--secondary2) !important;
  }

  .NavigationButton {
    display: block !important;
    left: 6px !important;
    top: 6px !important;
    z-index: 60 !important;
  }

  body.phone-nav-open .NavigationButton {
    left: 246px !important;
  }

  .phone_sidebar {
    position: fixed !important;
    top: 48px !important;
    left: 0 !important;
    width: 240px !important;
    height: calc(100vh - 48px) !important;
    max-height: calc(100vh - 48px) !important;
    z-index: 50 !important;
    display: none;
    flex-direction: column !important;
    background: var(--sidebar-surface) !important;
    box-shadow: var(--shadow-pop) !important;
  }

  body.phone-nav-open .phone_sidebar {
    display: flex !important;
  }

  .phone-drawer-header {
    display: flex !important;
    flex: 0 0 48px !important;
    padding: 0 16px !important;
    background: var(--sidebar-surface) !important;
  }

  .phone_sidebar .sidebar-nav {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
  }

  .phone_sidebar .sidebar-footer {
    margin-top: auto !important;
  }

  .top-header {
    grid-template-columns: minmax(180px, 1fr) auto !important;
  }

  .top-right-info {
    gap: 8px !important;
    margin-right: 12px !important;
  }

  .dashboard-grid.row-1 {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }

  .dashboard-grid.row-1 > .dashboard-card-box {
    height: 118px !important;
    min-height: 118px !important;
  }

  .dashboard-quick-row,
  .phone_box_da,
  .setting_device,
  #rs232-tab .rs232-tab-grid,
  #cec-tab .rs232_box,
  .page_1280_box {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .line_1280 {
    display: none !important;
  }

  #status-tab .dashboard-grid.row-2,
  #command-tab .api_mode_command_box {
    grid-template-columns: 1fr !important;
  }

  .command_title {
    min-width: 860px !important;
  }

  .login-container {
    width: min(820px, calc(100vw - 28px)) !important;
  }
}

@media (max-width: 760px) {
  .tab-content {
    padding: var(--mobile-inset) !important;
  }

  .top-header {
    grid-template-columns: minmax(124px, 1fr) auto !important;
  }

  .header-left_phone {
    min-width: 124px !important;
  }

  .header-left_phone .sidebar-logo {
    width: 118px !important;
    min-width: 118px !important;
  }

  .top-right-info {
    gap: 6px !important;
    margin-right: 8px !important;
  }

  .logout-btn {
    padding: 5px 8px !important;
  }

  .dashboard-grid.row-1,
  .dashboard-quick-row,
  .phone_box_da,
  .setting_device,
  #rs232-tab .rs232-tab-grid,
  #cec-tab .rs232_box,
  .page_1280_box,
  #command-tab .api_mode_command_box {
    grid-template-columns: 1fr !important;
  }

  .dashboard-grid.row-1 > .dashboard-card-box {
    height: auto !important;
    min-height: 112px !important;
  }

  #audio-tab .break-card,
  #rs232-tab .rs232_box_,
  #rs232-tab .rs232_box_local,
  #rs232-tab .rs232_command_local,
  .serial_box_row {
    grid-template-columns: 1fr !important;
  }

  #audio-tab .audio_box {
    justify-content: flex-start !important;
  }

  .serial_printf,
  .tcp_printf {
    height: 132px !important;
    min-height: 132px !important;
  }

  .login-container {
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: auto !important;
  }

  .login-photo {
    width: 100% !important;
    min-height: 132px !important;
    height: 132px !important;
    border-left: none !important;
    border-top: 1px solid var(--login-card-border) !important;
  }

  .login-form {
    width: 100% !important;
    padding: 28px 24px !important;
  }
}

@media (max-width: 560px) {
  .dashboard-grid.row-1 {
    grid-template-columns: 1fr !important;
  }

  .header-left_phone .sidebar-logo {
    width: 104px !important;
    min-width: 104px !important;
  }
}

/* DS canonical v6.1 - preserve authenticated desktop shell inset */
@media (min-width: 1025px) {
  .tab-content {
    padding: 17px 26px 16px 26px !important;
  }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  .tab-content {
    padding: 17px 26px 16px 26px !important;
  }
}

/* DS canonical v6.2 - status input/output row pairing */
#status-tab .dashboard-grid.row-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
}

#status-tab .dashboard-grid.row-2 > .dashboard-card:first-child {
  grid-column: 1 / -1 !important;
}

@media (max-width: 760px) {
  #status-tab .dashboard-grid.row-2 {
    grid-template-columns: 1fr !important;
  }
}

/* DS canonical v6.3 - status rename cards sit as a paired row */
#status-tab.tab-content.active,
#status-tab[style*="display: block"] {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--card-gap) !important;
  align-items: start !important;
}

#status-tab.tab-content.active > .dashboard-grid.row-2,
#status-tab[style*="display: block"] > .dashboard-grid.row-2 {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

#status-tab > .card-output-settings {
  min-width: 0 !important;
  margin: 0 !important;
}

@media (max-width: 760px) {
  #status-tab.tab-content.active,
  #status-tab[style*="display: block"] {
    grid-template-columns: 1fr !important;
  }
}

/* DS canonical v6.4 - prevent legacy status rename overlap */
#status-tab.tab-content.active > .card-output-settings,
#status-tab[style*="display: block"] > .card-output-settings {
  position: static !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  grid-column: auto !important;
  align-self: start !important;
}

@media (max-width: 760px) {
  #status-tab.tab-content.active > .card-output-settings,
  #status-tab[style*="display: block"] > .card-output-settings {
    grid-column: 1 / -1 !important;
  }
}

/* DS canonical v6.5 - mobile status rename cards stack in separate rows */
@media (max-width: 760px) {
  #status-tab.tab-content.active,
  #status-tab[style*="display: block"] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;
  }

  #status-tab.tab-content.active > .card-output-settings,
  #status-tab[style*="display: block"] > .card-output-settings {
    grid-column: 1 / 2 !important;
    grid-row: auto !important;
  }
}

/* DS canonical v6.6 - mobile status uses flex stack for legacy-safe flow */
@media (max-width: 760px) {
  #status-tab.tab-content.active,
  #status-tab[style*="display: block"] {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--card-gap) !important;
  }

  #status-tab.tab-content.active > *,
  #status-tab[style*="display: block"] > * {
    width: 100% !important;
  }
}

/* DS canonical v6.7 - full-width mobile status rename cards */
@media (max-width: 760px) {
  #status-tab.tab-content.active > .card-output-settings,
  #status-tab[style*="display: block"] > .card-output-settings {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }
}

/* DS canonical v6.8 - drawer/header order and neutral dark surfaces */
html[data-theme="dark"] {
  --background: #0b1120 !important;
  --dark: #0b1120 !important;
  --secondary2: #151d2e !important;
  --sidebar-surface: #0b1120 !important;
  --gray: rgba(255,255,255,.08) !important;
  --border-ref: rgba(255,255,255,.08) !important;
  --btn-box: #1e293b !important;
  --btn-box-hover: #334155 !important;
  --outline-button-bg: #1e293b !important;
  --outline-button-border: rgba(255,255,255,.08) !important;
  --outline-button-fg: #f1f5f9 !important;
  --action-muted-bg: #1e293b !important;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .main-box,
html[data-theme="dark"] .content-container {
  background: var(--background) !important;
}

html[data-theme="dark"] .top-header,
html[data-theme="dark"] .header-left_phone .sidebar-header {
  background: var(--secondary2) !important;
  border-color: var(--gray) !important;
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .phone_sidebar,
html[data-theme="dark"] .phone-drawer-header {
  background: var(--sidebar-surface) !important;
  border-color: var(--gray) !important;
}

html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-video-routing,
html[data-theme="dark"] .signal-item,
html[data-theme="dark"] #changpassword {
  background: var(--secondary2) !important;
  border-color: var(--gray) !important;
}

@media (max-width: 1024px) {
  .NavigationButton,
  body.phone-nav-open .NavigationButton {
    left: 8px !important;
    top: 7px !important;
    z-index: 80 !important;
  }

  .header-left_phone {
    min-width: 180px !important;
  }

  .header-left_phone .sidebar-header {
    padding-left: 52px !important;
    padding-right: 8px !important;
  }

  .header-left_phone .sidebar-logo {
    margin-left: 0 !important;
  }

  .phone-drawer-header {
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 16px !important;
    align-items: center !important;
  }

  .phone_sidebar .sidebar-logo {
    width: 132px !important;
    min-width: 132px !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 420px) {
  .top-header {
    grid-template-columns: minmax(154px, 1fr) auto !important;
  }

  .header-left_phone {
    min-width: 154px !important;
  }

  .header-left_phone .sidebar-logo {
    width: 120px !important;
    min-width: 120px !important;
  }
}

/* DS canonical v6.9 - Settings/System cards full-width like Actions & Controls */
#settings-tab .settings_box:first-of-type .system_box,
#settings-tab .settings_box:first-of-type .setting_device {
  width: 100% !important;
  max-width: none !important;
}

#settings-tab .settings_box:first-of-type .setting_device {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--card-gap) !important;
  align-items: stretch !important;
}

#settings-tab .settings_box:first-of-type .setting_device > .dashboard-card,
#settings-tab .settings_box:first-of-type .setting_device > .full-width {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#settings-tab .settings_box:first-of-type .setting_device + .dashboard-card,
#settings-tab .settings_box:first-of-type .page_1280_ {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* DS canonical v6.10 - robust Settings/System full-width selector */
#settings-tab .system_box,
#settings-tab .system_box .setting_device {
  width: 100% !important;
  max-width: none !important;
}

#settings-tab .system_box .setting_device {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--card-gap) !important;
  align-items: stretch !important;
}

#settings-tab .system_box .setting_device > .dashboard-card,
#settings-tab .system_box .setting_device > .full-width {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#settings-tab .system_box > .dashboard-card,
#settings-tab .system_box > .page_1280_ {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* DS canonical v6.11 - Command list consumes remaining page space */
#command-tab.tab-content.active,
#command-tab[style*="display: block"] {
  min-height: calc(100vh - 48px) !important;
  display: flex !important;
  flex-direction: column !important;
}

#command-tab > .box_height {
  display: none !important;
  height: 0 !important;
}

#command-tab > .dashboard-card:last-of-type {
  flex: 1 1 auto !important;
  min-height: 520px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#command-tab > .dashboard-card:last-of-type .pc_box {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#command-tab > .dashboard-card:last-of-type .pc_box > .command_title {
  flex: 0 0 auto !important;
}

#commandContainer {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 440px !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#commandContainer_phone {
  height: auto !important;
  min-height: 440px !important;
  max-height: none !important;
  overflow-y: auto !important;
}

@media (max-width: 760px) {
  #command-tab > .dashboard-card:last-of-type {
    min-height: 480px !important;
  }

  #commandContainer,
  #commandContainer_phone {
    min-height: 420px !important;
  }
}

/* DS canonical v6.12 - viewport-bounded Command table area */
#command-tab > .dashboard-card:nth-of-type(4) {
  height: calc(100vh - 92px) !important;
  min-height: 560px !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#command-tab > .dashboard-card:nth-of-type(4) .pc_box {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#command-tab > .dashboard-card:nth-of-type(4) .pc_box > .command_title {
  flex: 0 0 auto !important;
}

#commandContainer {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#command-tab > .box_height {
  display: none !important;
}

@media (max-width: 760px) {
  #command-tab > .dashboard-card:nth-of-type(4) {
    height: calc(100vh - 84px) !important;
    min-height: 480px !important;
  }
}

/* DS canonical v6.13 - global card spacing pass and RS-232 compact grids */
:root {
  --card-gap: 16px;
  --row-gap: 16px;
}

.tab-content.active > .dashboard-card,
.tab-content.active > .dashboard-grid,
.tab-content.active > .rs232-tab-grid,
.tab-content.active > .phone_box_da,
.tab-content.active > .setting_device,
.tab-content.active > .page_1280_box,
.tab-content.active > .box_height {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.tab-content.active > .box_height {
  display: none !important;
  height: 0 !important;
}

.tab-content.active > :not(.box_height) + :not(.box_height) {
  margin-top: var(--card-gap) !important;
}

.tab-content.active .dashboard-grid,
.tab-content.active .rs232-tab-grid,
.tab-content.active .phone_box_da,
.tab-content.active .setting_device,
.tab-content.active .page_1280_box,
.tab-content.active .dashboard-quick-row {
  gap: var(--card-gap) !important;
}

.tab-content.active .dashboard-card {
  overflow: hidden !important;
}

#settings-tab .settings_box[style*="display: block"] > * + *,
#settings-tab .settings_box:first-of-type > * + *,
#settings-tab .system_box > * + * {
  margin-top: var(--card-gap) !important;
}

#settings-tab .system_box .setting_device > .dashboard-card + .dashboard-card {
  margin-top: 0 !important;
}

#rs232-tab > .box_height,
#cec-tab > .box_height,
#audio-tab > .box_height,
#video-tab > .box_height,
#settings-tab > .box_height,
#command-tab > .box_height {
  display: none !important;
  height: 0 !important;
}

#rs232-tab .rs232-tab-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: var(--card-gap) !important;
}

#rs232-tab .output-settings-content {
  padding: 16px !important;
  display: grid !important;
  gap: 16px !important;
}

#rs232-tab .output-settings-content > div,
#rs232-tab .auto_power_time {
  margin: 0 !important;
}

#rs232-tab .output-settings-content [style*="height: 30px"],
#rs232-tab .output-settings-content [style*="height:30px"] {
  display: none !important;
  height: 0 !important;
}

#rs232-tab .auto_power_command_row {
  grid-template-columns: minmax(132px, 1.1fr) minmax(86px, 104px) minmax(78px, 1fr) 58px !important;
  gap: 8px !important;
  align-items: center !important;
}

#rs232-tab .auto_power_command_row select,
#rs232-tab .auto_power_command_row input,
#rs232-tab .auto_power_command_row .btn-box {
  width: 100% !important;
  min-width: 0 !important;
}

#rs232-tab .serial_box.page_1280_serial {
  grid-template-columns: minmax(116px, 1fr) repeat(4, minmax(54px, 70px)) 56px !important;
  gap: 8px !important;
  align-items: center !important;
  margin: 0 !important;
}

#rs232-tab .serial_box.page_1280_serial select,
#rs232-tab .serial_box.page_1280_serial .btn-box {
  width: 100% !important;
  min-width: 0 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

#rs232-tab .serial_box.page_1280_serial .btn-box {
  justify-content: center !important;
  text-align: center !important;
}

#rs232-tab .rs232_box_big {
  padding: 16px !important;
  display: grid !important;
  gap: 14px !important;
}

#rs232-tab .rs232_box_,
#rs232-tab .rs232_box_local {
  gap: 10px !important;
  min-width: 0 !important;
}

#rs232-tab .rs232_command_local {
  grid-template-columns: minmax(96px, 120px) minmax(0, 1fr) 60px !important;
}

#rs232-tab .serial_printf {
  height: 150px !important;
  min-height: 150px !important;
}

@media (max-width: 1024px) {
  #rs232-tab .rs232-tab-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .tab-content.active > :not(.box_height) + :not(.box_height) {
    margin-top: 14px !important;
  }

  #rs232-tab .auto_power_command_row,
  #rs232-tab .serial_box.page_1280_serial,
  #rs232-tab .rs232_command_local {
    grid-template-columns: 1fr !important;
  }
}

/* DS canonical v6.14 - remove doubled card margins and fix RS-232 row overflow */
.tab-content.active .dashboard-card,
.tab-content.active .card,
.tab-content.active .card-video-routing,
.tab-content.active .card-output-settings {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#settings-tab .system_box .setting_device > .dashboard-card,
#settings-tab .system_box > .dashboard-card,
#settings-tab .system_box > .page_1280_,
#command-tab > .dashboard-card {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#command-tab > .dashboard-card + .dashboard-card,
#settings-tab .system_box > * + * {
  margin-top: var(--card-gap) !important;
}

#settings-tab .system_box .setting_device {
  gap: var(--card-gap) !important;
}

#rs232-tab .auto_power {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

#rs232-tab .auto_power_row {
  display: grid !important;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
}

#rs232-tab .auto_power_row select,
#rs232-tab .auto_power_row input {
  width: 100% !important;
  min-width: 0 !important;
}

#rs232-tab .auto_power_time_row {
  display: grid !important;
  grid-template-columns: minmax(150px, 1fr) minmax(74px, 92px) minmax(70px, auto) !important;
  gap: 10px !important;
  align-items: center !important;
}

#rs232-tab .auto_power_time_row input {
  width: 100% !important;
  min-width: 0 !important;
}

#rs232-tab .auto_power_command_row {
  grid-template-columns: minmax(126px, 1fr) minmax(66px, 78px) minmax(0, 1fr) 52px !important;
  gap: 6px !important;
}

#rs232-tab .auto_power_command_row .btn-box {
  min-width: 0 !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

#rs232-tab .serial_box.page_1280_serial {
  grid-template-columns: minmax(96px, 1fr) repeat(4, minmax(48px, 56px)) 50px !important;
  gap: 6px !important;
}

#rs232-tab .serial_box.page_1280_serial select,
#rs232-tab .serial_box.page_1280_serial .btn-box {
  min-width: 0 !important;
  width: 100% !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  font-size: 12px !important;
}

#rs232-tab .serial_box.page_1280_serial > div,
#rs232-tab .serial_box.page_1280_serial label {
  min-width: 0 !important;
}

@media (max-width: 760px) {
  #command-tab > .dashboard-card + .dashboard-card,
  #settings-tab .system_box > * + * {
    margin-top: 14px !important;
  }
}

/* DS canonical v6.15 - Settings/System uses one vertical card rhythm */
#settings-tab .settings_box[style*="display: block"] .system_box,
#settings-tab .system_box {
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
}

#settings-tab .system_box > .setting_device {
  margin-bottom: var(--card-gap) !important;
}

#settings-tab .system_box > .page_1280_,
#settings-tab .system_box > .dashboard-card.page_1280_ {
  margin-top: 0 !important;
}

#settings-tab .system_box .setting_device > .dashboard-card {
  margin: 0 !important;
}

/* DS canonical v6.16 - header/sidebar/content alignment */
:root {
  --sidebar-width: 250px;
}

@media (min-width: 1025px) {
  .top-header {
    display: grid !important;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) auto !important;
    height: 48px !important;
    min-height: 48px !important;
    align-items: center !important;
    border-bottom: 1px solid var(--gray) !important;
    overflow: hidden !important;
  }

  .header-left {
    display: contents !important;
  }

  .header-left .sidebar-header {
    grid-column: 1 !important;
    width: var(--sidebar-width) !important;
    height: 48px !important;
    padding: 0 28px !important;
    border-right: 1px solid var(--gray) !important;
    border-bottom: 1px solid var(--gray) !important;
    background: var(--secondary2) !important;
    display: flex !important;
    align-items: center !important;
  }

  .header-left .sidebar-logo {
    width: 132px !important;
    min-width: 132px !important;
    height: 30px !important;
    margin: 0 !important;
    background-position: left center !important;
  }

  .top-left-info {
    grid-column: 2 !important;
    height: 48px !important;
    padding-left: 26px !important;
    padding-right: 12px !important;
    border-left: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .top-right-info {
    grid-column: 3 !important;
  }

  .main-box {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important;
  }

  .sidebar {
    width: var(--sidebar-width) !important;
    border-right: 1px solid var(--gray) !important;
  }

  .content-container {
    border-top: none !important;
  }

  .tab-content {
    padding-left: 26px !important;
    padding-right: 26px !important;
  }
}

/* DS canonical v6.17 - logo cell stays left, header info starts at content edge */
@media (min-width: 1025px) {
  .top-header {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) auto !important;
  }

  .header-left {
    display: contents !important;
  }

  .top-left-info {
    grid-column: 1 / 3 !important;
    display: flex !important;
    align-items: center !important;
    height: 48px !important;
    padding: 0 !important;
    gap: 10px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .top-left-info > .sidebar-header {
    flex: 0 0 var(--sidebar-width) !important;
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width) !important;
    height: 48px !important;
    padding: 0 28px !important;
    margin: 0 !important;
    border-right: 1px solid var(--gray) !important;
    border-bottom: 1px solid var(--gray) !important;
    background: var(--secondary2) !important;
    display: flex !important;
    align-items: center !important;
  }

  .top-left-info > .sidebar-header + .info-item {
    margin-left: 26px !important;
  }

  .top-left-info .sidebar-logo {
    width: 132px !important;
    min-width: 132px !important;
    height: 30px !important;
    margin: 0 !important;
    background-position: left center !important;
  }

  .top-right-info {
    grid-column: 3 !important;
    z-index: 2 !important;
    background: var(--secondary2) !important;
  }
}

/* DS canonical v6.22 - card body values align with card heading inset */
:root {
  --card-inset-x: 16px;
  --card-label-col: 200px;
}

.dashboard-card > .title-box,
.dashboard-card > .title_box,
.card-output-settings > .title-box,
.card-output-settings > .title_box {
  padding-left: var(--card-inset-x) !important;
  padding-right: var(--card-inset-x) !important;
}

.dashboard-card > .title-box > *,
.dashboard-card > .title_box > *,
.card-output-settings > .title-box > *,
.card-output-settings > .title_box > * {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.dashboard-card > .output-settings-content,
.card-output-settings > .output-settings-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

.dashboard-card > .setting-item,
.dashboard-card > .signal-item,
.dashboard-card > .edid-item,
.dashboard-card > .network-item,
.dashboard-card > .input_source_row,
.dashboard-card > .power_row,
.dashboard-card > .auto_power_row,
.dashboard-card > .auto_power_time_row,
.dashboard-card > .auto_power_command_row,
.dashboard-card > .serial_box,
.dashboard-card > .serial_box_row,
.dashboard-card > .rs232_box_local,
.dashboard-card > .rs232_command_local,
.dashboard-card > .output-settings-content > .setting-item,
.dashboard-card > .output-settings-content > .signal-item,
.dashboard-card > .output-settings-content > .edid-item,
.dashboard-card > .output-settings-content > .network-item,
.card-output-settings > .output-settings-content > .setting-item,
.card-output-settings > .output-settings-content > .signal-item,
.card-output-settings > .output-settings-content > .edid-item,
.card-output-settings > .output-settings-content > .network-item {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--card-inset-x) !important;
  padding-right: var(--card-inset-x) !important;
  box-sizing: border-box !important;
}

#video-tab .card-output-settings .setting-item {
  display: grid !important;
  grid-template-columns: minmax(180px, var(--card-label-col)) minmax(0, 1fr) !important;
  column-gap: 16px !important;
  justify-content: stretch !important;
  min-height: 73px !important;
}

#video-tab .card-output-settings .setting-item > :first-child,
#video-tab .card-output-settings .setting-item > :first-child > *,
#video-tab .card-output-settings .setting-item > :first-child > * > * {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

#video-tab .card-output-settings .setting-item select,
#video-tab .card-output-settings .setting-item input {
  width: 100% !important;
  min-width: 0 !important;
}

#settings-tab .system_box .dashboard-card > .setting-item,
#settings-tab .system_box .dashboard-card > .signal-item,
#settings-tab .system_box .dashboard-card > .output-settings-content > .setting-item,
#network-tab .dashboard-card > .signal-item,
#network-tab .dashboard-card > .output-settings-content > .signal-item,
#cec-tab .dashboard-card > .signal-item,
#cec-tab .dashboard-card > .serial_box_row,
#usb-tab .dashboard-card > .signal-item,
#command-tab .dashboard-card > .signal-item,
#command-tab .api_mode_box,
#command-tab .api_mode_command_box,
#command-tab .tcpcommand {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--card-inset-x) !important;
  padding-right: var(--card-inset-x) !important;
}

#command-tab .api_mode_box,
#command-tab .api_mode_command_box,
#command-tab .tcpcommand {
  box-sizing: border-box !important;
}

@media (max-width: 760px) {
  :root {
    --card-inset-x: 14px;
    --card-label-col: 150px;
  }

  #video-tab .card-output-settings .setting-item {
    grid-template-columns: 1fr !important;
    row-gap: 8px !important;
  }
}

/* DS canonical v6.23 - command table stays inside the card on tablet/mobile */
#command-tab .dashboard-card,
#command-tab #commandContainer,
#command-tab #commandContainer_phone,
#command-tab .command_title {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#command-tab #commandContainer,
#command-tab #commandContainer_phone {
  overflow-x: auto !important;
  overflow-y: auto !important;
}

#command-tab .command_title {
  width: max-content !important;
}

@media (max-width: 1024px) {
  #command-tab .dashboard-card {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #command-tab .api_mode_command_box {
    grid-template-columns: 1fr !important;
  }

  #command-tab .api_mode_command,
  #command-tab .api_mode_command input,
  #command-tab .tcpcommand,
  #command-tab .tcpcommand input {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* DS canonical v6.24 - tablet/mobile content cannot grow wider than viewport */
@media (max-width: 1024px) {
  html,
  body,
  #main-interface,
  .main-box,
  .content-container,
  .tab-content,
  .tab-content.active {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body {
    overflow-x: hidden !important;
  }

  .content-container {
    overflow-x: hidden !important;
  }

  .tab-content,
  .tab-content.active {
    display: none !important;
    overflow-x: hidden !important;
  }

  .tab-content.active {
    display: flex !important;
  }

  .tab-content.active > *,
  .tab-content.active .dashboard-card,
  .tab-content.active .card-output-settings,
  .tab-content.active .dashboard-grid,
  .tab-content.active .rs232-tab-grid,
  .tab-content.active .phone_box_da,
  .tab-content.active .setting_device,
  .tab-content.active .page_1280_box {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #command-tab #commandContainer,
  #command-tab #commandContainer_phone {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  #command-tab .command_title {
    min-width: 920px !important;
    width: 920px !important;
    max-width: none !important;
  }
}

/* DS canonical v6.25 - true mobile stacks functional cards instead of squeezing columns */
@media (max-width: 560px) {
  #cec-tab .rs232_box,
  #cec-tab .dashboard-grid,
  #rs232-tab .rs232-tab-grid,
  #rs232-tab .phone_box_da,
  #rs232-tab .page_1280_box,
  #settings-tab .setting_device,
  #settings-tab .phone_box_da {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #cec-tab .rs232_box > *,
  #rs232-tab .rs232-tab-grid > *,
  #rs232-tab .phone_box_da > *,
  #rs232-tab .page_1280_box > *,
  #settings-tab .setting_device > *,
  #settings-tab .phone_box_da > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* DS canonical v6.26 - active tabs stack vertically on true mobile */
@media (max-width: 560px) {
  .tab-content.active,
  #cec-tab.tab-content.active,
  #rs232-tab.tab-content.active,
  #command-tab.tab-content.active,
  #video-tab.tab-content.active,
  #settings-tab.tab-content.active {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* DS canonical v6.27 - full responsive/card repair pass */
:root {
  --shell-inset-desktop: 26px;
  --shell-inset-tablet: 18px;
  --shell-inset-mobile: 14px;
  --card-gap: 16px;
  --card-gap-mobile: 14px;
  --card-inset-x: 16px;
  --row-compact-height: 52px;
  --field-height: 40px;
}

html[data-theme="light"] {
  --foreground: #0f172a;
  --light: #0f172a;
  --light-gray: #64748b;
  --muted: #64748b;
  --gray: #e2e8f0;
  --login-control-border: #cbd5e1;
  --secondary2: #ffffff;
  --background: #ffffff;
  --btn-box: #f1f5f9;
  --btn-box2: #f1f5f9;
  --sidebar-surface: #ffffff;
}

html[data-theme="dark"] {
  --foreground: #f1f5f9;
  --light: #f1f5f9;
  --light-gray: #94a3b8;
  --muted: #94a3b8;
  --gray: rgba(255,255,255,.08);
  --secondary2: #151d2e;
  --background: #0b1120;
  --btn-box: #334155;
  --btn-box2: #1e293b;
  --sidebar-surface: #0b1120;
}

.dashboard-card,
.card-output-settings,
.card-video-routing {
  color: var(--foreground) !important;
}

.login-subtitle,
.card-subtitle,
.title_tab,
.routing-box.title_tab,
.network-item > :first-child,
.signal-item > :first-child,
.setting-label,
.color_title {
  color: var(--light-gray) !important;
}

input,
select,
textarea,
.network-input,
.btn-box,
.front_select,
.switch_active,
.mode_active,
.mode_active_off {
  min-height: var(--field-height) !important;
  box-sizing: border-box !important;
}

select,
input,
textarea,
.network-input {
  border-color: var(--login-control-border) !important;
  color: var(--foreground) !important;
}

.tab-content.active {
  gap: var(--card-gap) !important;
}

.tab-content.active > .dashboard-card,
.tab-content.active > .card-output-settings,
.tab-content.active > .card-video-routing,
.tab-content.active > .dashboard-grid,
.tab-content.active > .phone_box_da,
.tab-content.active > .rs232-tab-grid,
.tab-content.active > .setting_device,
.tab-content.active > .page_1280_box {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.dashboard-card > .title-box,
.dashboard-card > .title_box,
.card-output-settings > .title-box,
.card-output-settings > .title_box,
.dashboard-card > .signal-item:first-child,
.card-output-settings > .signal-item:first-child {
  padding: 14px var(--card-inset-x) !important;
}

.dashboard-card > .title-box > *,
.dashboard-card > .title_box > *,
.dashboard-card > .signal-item:first-child > *,
.card-output-settings > .signal-item:first-child > * {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.setting-item,
.signal-item,
.network-item,
.edid-item,
.input_source_row,
.power_row,
.auto_power_row,
.auto_power_time_row,
.auto_power_command_row,
.serial_box,
.serial_box_row,
.rs232_box_local,
.rs232_command_local {
  min-height: var(--row-compact-height) !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  box-sizing: border-box !important;
}

.dashboard-card > .output-settings-content,
.card-output-settings > .output-settings-content {
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

.dashboard-card > .output-settings-content > .setting-item,
.dashboard-card > .output-settings-content > .signal-item,
.dashboard-card > .output-settings-content > .network-item,
.dashboard-card > .output-settings-content > .edid-item,
.card-output-settings > .output-settings-content > .setting-item,
.card-output-settings > .output-settings-content > .signal-item,
.card-output-settings > .output-settings-content > .network-item,
.card-output-settings > .output-settings-content > .edid-item,
.dashboard-card > .serial_box_row,
.dashboard-card > .rs232_box_big,
.dashboard-card > .api_mode_box,
.dashboard-card > .api_mode_command_box,
.dashboard-card > .tcpcommand {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--card-inset-x) !important;
  padding-right: var(--card-inset-x) !important;
}

.dashboard-card > div[style*="margin-left: 16px"],
.dashboard-card > div[style*="margin-left:16px"] {
  margin-left: var(--card-inset-x) !important;
  margin-right: var(--card-inset-x) !important;
}

.dashboard-card > .serial_box_row,
.card-output-settings > .serial_box_row {
  margin-left: var(--card-inset-x) !important;
  margin-right: var(--card-inset-x) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: calc(100% - (2 * var(--card-inset-x))) !important;
}

#dashboard-tab.tab-content.active,
#video-tab.tab-content.active,
#audio-tab.tab-content.active,
#cec-tab.tab-content.active,
#usb-tab.tab-content.active,
#rs232-tab.tab-content.active,
#network-tab.tab-content.active,
#settings-tab.tab-content.active,
#command-tab.tab-content.active {
  flex-direction: column !important;
  align-items: stretch !important;
}

#dashboard-tab .dashboard-grid.row-1 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: var(--card-gap) !important;
  width: 100% !important;
}

#dashboard-tab .dashboard-card-box {
  min-height: 112px !important;
  height: auto !important;
}

#dashboard-tab .dashboard-quick-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--card-gap) !important;
  width: 100% !important;
}

#dashboard-tab .dashboard-quick-card {
  width: 100% !important;
  min-height: 0 !important;
}

#dashboard-tab .quick-card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 14px var(--card-inset-x) 8px !important;
}

#dashboard-tab .quick-card-actions .btn-box {
  min-width: 76px !important;
}

#dashboard-tab .quick-card-current {
  padding: 0 var(--card-inset-x) 14px !important;
}

#dashboard-tab .phone_box_da,
#dashboard-tab .dashboard-grid.row-2,
#status-tab .dashboard-grid.row-2 {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr) !important;
  gap: var(--card-gap) !important;
  width: 100% !important;
}

#dashboard-tab .phone_box_da > .dashboard-grid.row-2,
#status-tab .dashboard-grid.row-2 {
  grid-column: 1 / -1 !important;
}

#dashboard-tab .pc_box,
#status-tab .pc_box {
  overflow-x: auto !important;
  max-width: 100% !important;
}

#dashboard-tab .pc_box .routing-box,
#status-tab .pc_box .routing-box {
  display: grid !important;
  grid-template-columns: minmax(96px, 1fr) minmax(132px, 1.25fr) minmax(122px, 1fr) minmax(110px, 1fr) minmax(88px, .8fr) minmax(80px, .8fr) !important;
  gap: 8px 14px !important;
  align-items: center !important;
  min-width: 720px !important;
  padding: 10px var(--card-inset-x) !important;
}

#dashboard-tab .pc_box .routing-box > *,
#status-tab .pc_box .routing-box > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

#dashboard-tab .user_res,
#status-tab .user_res,
#dashboard-tab .user_action,
#status-tab .user_action,
#dashboard-tab .grayuser_inactive,
#status-tab .grayuser_inactive {
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#video-tab .card-output-settings .setting-item,
#network-tab .phone_signal {
  grid-template-columns: minmax(180px, 200px) minmax(0, 1fr) !important;
  column-gap: 16px !important;
  min-height: var(--row-compact-height) !important;
}

#network-tab .front_box {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 10px !important;
  align-items: center !important;
}

#network-tab .mac_infor,
#network-tab .network-label {
  color: var(--foreground) !important;
}

#cec-tab .rs232_box {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--card-gap) !important;
  width: 100% !important;
}

#cec-tab > .dashboard-card:first-child {
  width: 100% !important;
  min-height: 0 !important;
}

#cec-tab .dashboard-card > div[style*="margin-left"] select,
#cec-tab .dashboard-card > div[style*="margin-left"] input {
  width: 100% !important;
}

#cec-tab .cec_box {
  margin: 14px var(--card-inset-x) !important;
  width: calc(100% - (2 * var(--card-inset-x))) !important;
  max-width: calc(100% - (2 * var(--card-inset-x))) !important;
  justify-items: center !important;
}

#rs232-tab .rs232-tab-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--card-gap) !important;
  width: 100% !important;
}

#rs232-tab .rs232-tab-grid > .dashboard-card,
#rs232-tab > .dashboard-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

#rs232-tab .output-settings-content {
  padding: 0 !important;
  gap: 0 !important;
}

#rs232-tab .auto_power,
#rs232-tab .auto_power_time {
  padding: 12px var(--card-inset-x) !important;
  margin: 0 !important;
}

#rs232-tab .auto_power_row {
  grid-template-columns: minmax(150px, 1fr) minmax(0, 1fr) !important;
  gap: 10px !important;
}

#rs232-tab .auto_power_time_row {
  grid-template-columns: minmax(150px, 1fr) minmax(82px, 104px) minmax(82px, auto) !important;
  gap: 10px !important;
}

#rs232-tab .auto_power_command_row {
  grid-template-columns: minmax(128px, 1fr) minmax(76px, 90px) minmax(0, 1fr) 58px !important;
  gap: 8px !important;
}

#rs232-tab .serial_box.page_1280_serial {
  grid-template-columns: minmax(96px, 1fr) repeat(4, minmax(54px, 70px)) 58px !important;
  gap: 8px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#rs232-tab .rs232_box_big {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 16px !important;
  align-items: end !important;
}

#rs232-tab .rs232_box_,
#rs232-tab .rs232_box_local,
#rs232-tab .rs232_command_local {
  min-width: 0 !important;
  width: 100% !important;
}

#rs232-tab .rs232_command_local {
  grid-template-columns: minmax(0, 1fr) 64px !important;
  gap: 10px !important;
}

#rs232-tab .serial_printf,
#rs232-tab .tcp_printf {
  height: 150px !important;
  min-height: 150px !important;
  max-height: 150px !important;
}

#command-tab .api_mode_box,
#command-tab .api_mode_command_box,
#command-tab .tcpcommand {
  width: 100% !important;
  max-width: 100% !important;
}

#command-tab #commandContainer,
#command-tab #commandContainer_phone {
  overflow-x: auto !important;
  max-width: 100% !important;
}

@media (max-width: 1024px) {
  html,
  body,
  #main-interface,
  .main-box,
  .content-container,
  .tab-content,
  .tab-content.active {
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body {
    overflow-x: hidden !important;
  }

  .top-header {
    height: 48px !important;
    min-height: 48px !important;
    grid-template-columns: minmax(180px, auto) minmax(0, 1fr) auto !important;
    background: var(--secondary2) !important;
    border-bottom: 1px solid var(--gray) !important;
  }

  .header-left_phone {
    height: 48px !important;
    min-width: 180px !important;
    background: var(--secondary2) !important;
    border-right: 1px solid var(--gray) !important;
  }

  .header-left_phone .sidebar-header {
    height: 48px !important;
    padding-left: 58px !important;
    padding-right: 20px !important;
    background: transparent !important;
    border: 0 !important;
  }

  .header-left_phone .sidebar-logo {
    width: 132px !important;
    height: 30px !important;
    margin: 0 !important;
    background-position: left center !important;
  }

  .NavigationButton,
  body.phone-nav-open .NavigationButton {
    left: 8px !important;
    top: 7px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 6px !important;
    background: var(--btn-box) !important;
    border: 1px solid var(--login-control-border) !important;
    color: var(--foreground) !important;
    z-index: 90 !important;
  }

  .sidebar {
    display: none !important;
  }

  .phone_sidebar {
    top: 48px !important;
    width: 260px !important;
    height: calc(100vh - 48px) !important;
    background: var(--sidebar-surface) !important;
    color: var(--foreground) !important;
    border-right: 1px solid var(--gray) !important;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .18) !important;
  }

  .phone_sidebar .sidebar-logo {
    width: 132px !important;
    height: 30px !important;
    margin: 16px 20px 14px !important;
    background-position: left center !important;
  }

  .phone_sidebar .nav-link-phone,
  .phone_sidebar .divider-text,
  .phone_sidebar .sidebar-user-name,
  .phone_sidebar .login_username {
    color: var(--foreground) !important;
  }

  .phone_sidebar .divider-text,
  .phone_sidebar .login_username {
    color: var(--light-gray) !important;
  }

  body.phone-nav-open::after {
    content: "" !important;
    position: fixed !important;
    inset: 48px 0 0 260px !important;
    background: rgba(15, 23, 42, .42) !important;
    z-index: 45 !important;
    pointer-events: none !important;
  }

  .content-container,
  .tab-content.active {
    background: var(--background) !important;
    overflow-x: hidden !important;
  }

  .tab-content.active {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--card-gap) !important;
    padding-left: var(--shell-inset-tablet) !important;
    padding-right: var(--shell-inset-tablet) !important;
  }

  #dashboard-tab .dashboard-grid.row-1 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #dashboard-tab .phone_box_da,
  #dashboard-tab .dashboard-grid.row-2,
  #status-tab .dashboard-grid.row-2,
  #rs232-tab .rs232-tab-grid,
  #settings-tab .setting_device,
  #settings-tab .phone_box_da {
    grid-template-columns: 1fr !important;
  }

  #cec-tab .rs232_box {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #rs232-tab .rs232_box_big {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #rs232-tab .serial_box.page_1280_serial,
  #rs232-tab .auto_power_command_row {
    grid-template-columns: 1fr 1fr !important;
  }

  #rs232-tab .serial_box.page_1280_serial > div:first-child,
  #rs232-tab .auto_power_command_row > div:first-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  :root {
    --card-inset-x: 14px;
  }

  .tab-content.active {
    gap: var(--card-gap-mobile) !important;
    padding-left: var(--shell-inset-mobile) !important;
    padding-right: var(--shell-inset-mobile) !important;
  }

  #dashboard-tab .dashboard-grid.row-1,
  #dashboard-tab .dashboard-quick-row,
  #dashboard-tab .phone_box_da,
  #dashboard-tab .dashboard-grid.row-2,
  #status-tab .dashboard-grid.row-2,
  #cec-tab .rs232_box,
  #rs232-tab .rs232-tab-grid,
  #rs232-tab .rs232_box_big,
  #settings-tab .setting_device,
  #settings-tab .phone_box_da {
    grid-template-columns: 1fr !important;
  }

  #dashboard-tab .pc_box .routing-box,
  #status-tab .pc_box .routing-box {
    grid-template-columns: minmax(92px, 1fr) minmax(128px, 1.2fr) minmax(112px, 1fr) !important;
    min-width: 390px !important;
  }

  #video-tab .card-output-settings .setting-item,
  #network-tab .phone_signal,
  #rs232-tab .auto_power_row,
  #rs232-tab .auto_power_time_row,
  #rs232-tab .auto_power_command_row,
  #rs232-tab .serial_box.page_1280_serial,
  #rs232-tab .rs232_box_local,
  #rs232-tab .rs232_command_local {
    grid-template-columns: 1fr !important;
    row-gap: 8px !important;
  }

  #network-tab .front_box {
    grid-template-columns: 1fr auto auto !important;
  }

  #rs232-tab .serial_console_box,
  #rs232-tab .serial_printf {
    width: 100% !important;
  }
}

@media (max-width: 430px) {
  .top-header {
    grid-template-columns: minmax(184px, 1fr) auto !important;
  }

  .top-left-info {
    display: none !important;
  }

  .top-right-info {
    gap: 6px !important;
  }

  #dashboard-tab .dashboard-card-box {
    min-height: 104px !important;
  }
}

/* DS canonical v6.28 - direct light/dark shell colors and dashboard card width polish */
#dashboard-tab .dashboard-grid.row-1 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

@media (min-width: 1600px) {
  #dashboard-tab .dashboard-grid.row-1 {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  }
}

html[data-theme="light"] .NavigationButton,
html:not([data-theme="dark"]) .NavigationButton,
html[data-theme="light"] body.phone-nav-open .NavigationButton,
html:not([data-theme="dark"]) body.phone-nav-open .NavigationButton {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html[data-theme="light"] .NavigationButton::before,
html:not([data-theme="dark"]) .NavigationButton::before {
  filter: none !important;
}

html[data-theme="light"] .top-header,
html[data-theme="light"] .header-left_phone,
html[data-theme="light"] .header-left_phone .sidebar-header,
html[data-theme="light"] .phone_sidebar,
html[data-theme="light"] .content-container,
html[data-theme="light"] .tab-content.active,
html:not([data-theme="dark"]) .top-header,
html:not([data-theme="dark"]) .header-left_phone,
html:not([data-theme="dark"]) .header-left_phone .sidebar-header,
html:not([data-theme="dark"]) .phone_sidebar,
html:not([data-theme="dark"]) .content-container,
html:not([data-theme="dark"]) .tab-content.active {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="light"] .phone_sidebar .nav-link-phone,
html[data-theme="light"] .phone_sidebar .sidebar-user-name,
html:not([data-theme="dark"]) .phone_sidebar .nav-link-phone,
html:not([data-theme="dark"]) .phone_sidebar .sidebar-user-name {
  color: #0f172a !important;
}

html[data-theme="light"] .phone_sidebar .divider-text,
html[data-theme="light"] .phone_sidebar .login_username,
html:not([data-theme="dark"]) .phone_sidebar .divider-text,
html:not([data-theme="dark"]) .phone_sidebar .login_username {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .NavigationButton,
html[data-theme="dark"] body.phone-nav-open .NavigationButton {
  background: #1e293b !important;
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: rgba(255,255,255,.14) !important;
}

@media (max-width: 1024px) {
  #dashboard-tab .dashboard-grid.row-1 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  #dashboard-tab .dashboard-grid.row-1 {
    grid-template-columns: 1fr !important;
  }
}

/* DS canonical v6.29 - hard override mobile burger surface after legacy rules */
html[data-theme="light"] body .top-header .NavigationButton.NavigationButton,
html[data-theme="light"] body.phone-nav-open .top-header .NavigationButton.NavigationButton,
html:not([data-theme="dark"]) body .top-header .NavigationButton.NavigationButton,
html:not([data-theme="dark"]) body.phone-nav-open .top-header .NavigationButton.NavigationButton {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

html[data-theme="dark"] body .top-header .NavigationButton.NavigationButton,
html[data-theme="dark"] body.phone-nav-open .top-header .NavigationButton.NavigationButton {
  background: #1e293b !important;
  background-color: #1e293b !important;
  background-image: none !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* DS canonical v6.30 - no transient off-brand mobile shell colors */
@media (max-width: 1024px) {
  .top-header,
  .header-left_phone,
  .header-left_phone .sidebar-header,
  .NavigationButton,
  .phone_sidebar,
  .content-container,
  .tab-content.active {
    transition-property: none !important;
    transition-duration: 0s !important;
  }
}

/* DS canonical v6.31 - close open responsive/card parity tasks */
:root {
  --row-compact-height: 44px;
  --field-height: 36px;
  --console-height: 120px;
  --card-inset-x: 16px;
  --card-gap: 16px;
  --shell-inset-desktop: 26px;
  --shell-inset-tablet: 18px;
  --shell-inset-mobile: 14px;
}

html[data-theme="light"] {
  --foreground: #0f172a;
  --light: #0f172a;
  --light-gray: #64748b;
  --muted: #64748b;
  --gray: #e2e8f0;
  --login-control-border: #cbd5e1;
  --secondary2: #ffffff;
  --background: #ffffff;
  --btn-box: #f1f5f9;
  --sidebar-surface: #ffffff;
}

html[data-theme="dark"] {
  --foreground: #f1f5f9;
  --light: #f1f5f9;
  --light-gray: #94a3b8;
  --muted: #94a3b8;
  --gray: rgba(255,255,255,.08);
  --login-control-border: #4d4d4d;
  --secondary2: #151d2e;
  --background: #0b1120;
  --btn-box: #334155;
  --sidebar-surface: #0b1120;
}

body,
.top-header,
.sidebar,
.phone_sidebar,
.dashboard-card,
.card-output-settings,
.card-video-routing,
.tab-content.active,
input,
select,
textarea,
.btn-box,
.network-value,
.card-list .value,
.command_title,
.data_box_lin {
  color: var(--foreground) !important;
}

.login-subtitle,
.dashboard-title,
.title_tab,
.card-list .label,
.network-label,
.signal-item > div:first-child,
.setting-item > div:first-child,
.api_mode_command > div:first-child,
.pohne_box_status_li_box > div:first-child {
  color: var(--light-gray) !important;
}

.top-header {
  height: 48px !important;
  min-height: 48px !important;
  background: var(--secondary2) !important;
  border-bottom: 1px solid var(--gray) !important;
  overflow: hidden !important;
}

.header-left,
.header-left_phone {
  height: 48px !important;
  min-height: 48px !important;
  background: var(--secondary2) !important;
  border-right: 1px solid var(--gray) !important;
}

.header-left .sidebar-header,
.header-left_phone .sidebar-header {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 20px 0 38px !important;
  align-items: center !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

.header-left .sidebar-logo,
.header-left_phone .sidebar-logo {
  width: 132px !important;
  height: 30px !important;
  margin: 0 !important;
  background-position: left center !important;
}

.top-left-info {
  height: 48px !important;
  min-height: 48px !important;
  align-items: center !important;
  padding-left: 0 !important;
  gap: 12px !important;
}

.header-right,
.top-right-info {
  height: 48px !important;
  align-items: center !important;
}

.NavigationButton,
body.phone-nav-open .NavigationButton {
  top: 7px !important;
  left: 8px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 6px !important;
  background: var(--secondary2) !important;
  background-color: var(--secondary2) !important;
  border: 1px solid var(--login-control-border) !important;
  color: var(--foreground) !important;
  z-index: 120 !important;
}

.card-master-volume,
.dashboard-preset-card,
.dashboard-quick-card.preset,
.dashboard-quick-card:has(.quick-card-current) + .dashboard-quick-card {
  display: none !important;
}

#dashboard-tab .dashboard-grid.row-1 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: var(--card-gap) !important;
  width: 100% !important;
}

#dashboard-tab .dashboard-card-box {
  min-height: 96px !important;
  padding: 14px 16px !important;
}

#dashboard-tab .dashboard-card-box .card-title {
  margin: 0 0 8px !important;
}

#dashboard-tab .dashboard-quick-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--card-gap) !important;
  width: 100% !important;
}

#dashboard-tab .dashboard-input-switch {
  padding: 12px var(--card-inset-x) 8px !important;
  gap: 10px !important;
}

#dashboard-tab .dashboard-switch-input {
  min-width: 96px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
}

#dashboard-tab .quick-card-current {
  padding: 0 var(--card-inset-x) 12px !important;
}

.dashboard-card,
.card-output-settings,
.card-video-routing {
  border-radius: 8px !important;
  overflow: hidden !important;
}

.dashboard-card > .title-box,
.dashboard-card > .title_box,
.card-output-settings > .title-box,
.card-output-settings > .title_box,
.dashboard-card > .signal-item:first-child,
.card-output-settings > .signal-item:first-child {
  min-height: 56px !important;
  padding: 12px var(--card-inset-x) !important;
  margin: 0 !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.title_size {
  line-height: 18px !important;
}

.login-subtitle {
  line-height: 16px !important;
}

input,
select,
textarea,
.network-input,
.btn-box,
.front_select,
.mode_active,
.mode_active_off,
.user_action,
.user_inactive,
.offline_action,
.grayuser_inactive {
  min-height: var(--field-height) !important;
  height: var(--field-height) !important;
  box-sizing: border-box !important;
}

.user_action,
.user_inactive,
.offline_action,
.grayuser_inactive,
.data_ {
  min-height: 24px !important;
  height: 24px !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.setting-item,
.signal-item,
.network-item,
.edid-item,
.input_source_row,
.power_row,
.auto_power_row,
.auto_power_time_row,
.auto_power_command_row,
.serial_box,
.serial_box_row,
.rs232_box_local,
.rs232_command_local,
.card-list li {
  min-height: var(--row-compact-height) !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.dashboard-card > .output-settings-content,
.card-output-settings > .output-settings-content,
.output-settings-content {
  margin: 0 !important;
  padding: 0 !important;
}

.dashboard-card > .output-settings-content > *,
.card-output-settings > .output-settings-content > *,
.dashboard-card > .api_mode_box,
.dashboard-card > .api_mode_command_box,
.dashboard-card > .tcpcommand,
.dashboard-card > .rs232_box_big,
.dashboard-card > .serial_box_row,
.dashboard-card > .cec_box,
.dashboard-card > div[style*="margin-left: 16px"],
.dashboard-card > div[style*="margin-left:16px"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--card-inset-x) !important;
  padding-right: var(--card-inset-x) !important;
  box-sizing: border-box !important;
}

#video-tab .card-output-settings .setting-item,
#network-tab .phone_signal,
#settings-tab .system_box .setting-item,
#settings-tab .system_box .signal-item {
  grid-template-columns: minmax(180px, 216px) minmax(0, 1fr) !important;
  column-gap: 16px !important;
}

#network-tab .front_box {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 10px !important;
  align-items: center !important;
  width: 100% !important;
}

#network-tab .front_box[style*="grid-template-columns:1fr 50px"] {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

#network-tab .mac_infor {
  justify-self: start !important;
  font-family: var(--font-mono) !important;
}

#cec-tab .rs232_box {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--card-gap) !important;
  width: 100% !important;
}

#cec-tab .rs232_box > .dashboard-card {
  margin-bottom: 0 !important;
  min-width: 0 !important;
}

#cec-tab .dashboard-card > div[style*="margin-left: 16px"] {
  margin: 12px 0 0 !important;
  padding: 0 var(--card-inset-x) !important;
}

#cec-tab .cec_box {
  margin: 12px 0 !important;
  padding: 0 var(--card-inset-x) !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-items: center !important;
  box-sizing: border-box !important;
}

#cec-tab .login-subtitle[style*="margin-left: 16px"] {
  margin: 10px 0 0 !important;
  padding: 0 var(--card-inset-x) !important;
}

#cec-tab .serial_box_row {
  margin: 0 !important;
  padding: 0 var(--card-inset-x) !important;
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) 60px !important;
  gap: 10px !important;
}

#rs232-tab .rs232-tab-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--card-gap) !important;
  width: 100% !important;
}

#rs232-tab .rs232-tab-grid > .dashboard-card {
  margin-bottom: 0 !important;
  min-width: 0 !important;
}

#rs232-tab .auto_power,
#rs232-tab .auto_power_time,
#rs232-tab .output-settings-content > div {
  margin: 0 !important;
  padding: 10px var(--card-inset-x) !important;
}

#rs232-tab .auto_power_row {
  grid-template-columns: minmax(150px, 1fr) minmax(0, 1fr) !important;
  gap: 10px !important;
  min-height: 42px !important;
}

#rs232-tab .auto_power_time_row {
  grid-template-columns: minmax(150px, 1fr) minmax(82px, 104px) auto !important;
  gap: 10px !important;
  min-height: 42px !important;
}

#rs232-tab .auto_power_command_row {
  grid-template-columns: minmax(124px, 1fr) minmax(74px, 88px) minmax(0, 1fr) 58px !important;
  gap: 8px !important;
  min-height: 42px !important;
}

#rs232-tab .serial_box.page_1280_serial {
  grid-template-columns: minmax(112px, 1fr) repeat(4, minmax(54px, 72px)) 58px !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 6px 0 !important;
}

#rs232-tab .output-settings-content [style*="height: 30px"],
#cec-tab [style*="height: 30px"],
#command-tab [style*="height: 20px"],
#command-tab [style*="height: 24px"],
#command-tab [style*="height: 4px"] {
  height: 0 !important;
  min-height: 0 !important;
}

#rs232-tab .rs232_box_big {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 16px !important;
  padding: 14px var(--card-inset-x) !important;
}

#rs232-tab .rs232_box_ {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
}

#rs232-tab .rs232_box_[style*="margin-top: 40px"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#rs232-tab .rs232_box_local {
  display: grid !important;
  grid-template-columns: minmax(110px, 140px) minmax(0, 1fr) !important;
  gap: 10px !important;
  min-height: 42px !important;
  padding: 0 !important;
}

#rs232-tab .rs232_command_local {
  grid-template-columns: minmax(110px, 140px) minmax(0, 1fr) 60px !important;
}

#rs232-tab .serial_printf,
#rs232-tab .tcp_printf,
#command-tab .tcp_printf {
  height: var(--console-height) !important;
  min-height: var(--console-height) !important;
  max-height: var(--console-height) !important;
}

#rs232-tab .serial_box_row,
#command-tab .serial_box_row {
  grid-template-columns: 96px minmax(0, 1fr) 60px !important;
  gap: 10px !important;
  padding: 0 var(--card-inset-x) !important;
  width: 100% !important;
  margin: 0 !important;
}

#rs232-tab .serial_box_row + div[style*="margin-top: 16px"] {
  margin: 10px 0 0 !important;
  padding: 0 var(--card-inset-x) !important;
  grid-template-columns: 96px minmax(0, 1fr) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#command-tab.tab-content.active {
  min-height: calc(100vh - 48px) !important;
}

#command-tab > .dashboard-card {
  margin-bottom: 0 !important;
}

#command-tab > .dashboard-card:last-of-type,
#command-tab > .dashboard-card:nth-of-type(4) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

#command-tab > .dashboard-card:last-of-type .pc_box,
#command-tab > .dashboard-card:nth-of-type(4) .pc_box {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#command-tab #commandContainer {
  max-height: calc(100vh - 430px) !important;
  min-height: 220px !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
}

#command-tab .command_title {
  min-height: 38px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  align-items: center !important;
}

#command-tab .api_mode_box {
  padding-top: 10px !important;
  padding-bottom: 8px !important;
  gap: 6px !important;
}

#command-tab .api_mode_command_box {
  padding-top: 0 !important;
  padding-bottom: 12px !important;
  gap: 10px !important;
}

#settings-tab .system_box .setting_device,
#settings-tab .setting_device {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--card-gap) !important;
  width: 100% !important;
}

#settings-tab .system_box .setting_device > .dashboard-card,
#settings-tab .system_box > .dashboard-card,
#settings-tab .settings_box > .dashboard-card,
#settings-tab .settings_box .dashboard-card {
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 0 !important;
}

#settings-tab .setting_btn_box,
#settings-tab .front_box {
  gap: 8px !important;
}

#settings-tab .setting_btn_box button,
#settings-tab .setting_btn_box .btn-box,
#settings-tab .front_box .front_select {
  min-height: 34px !important;
  height: 34px !important;
}

@media (max-width: 1024px) {
  .top-header {
    display: grid !important;
    grid-template-columns: minmax(188px, auto) minmax(0, 1fr) auto !important;
    background: var(--secondary2) !important;
  }

  .header-left_phone {
    display: block !important;
    width: 188px !important;
    min-width: 188px !important;
    background: var(--secondary2) !important;
  }

  .header-left_phone .sidebar-header {
    padding-left: 62px !important;
    padding-right: 12px !important;
  }

  .header-left_phone .sidebar-logo {
    width: 126px !important;
  }

  .phone_sidebar {
    position: fixed !important;
    top: 48px !important;
    left: -280px !important;
    width: 260px !important;
    height: calc(100vh - 48px) !important;
    background: var(--sidebar-surface) !important;
    border-right: 1px solid var(--gray) !important;
    box-shadow: 0 18px 48px rgba(15,23,42,.24) !important;
    z-index: 80 !important;
  }

  body.phone-nav-open .phone_sidebar,
  .phone_sidebar[style*="display: block"] {
    left: 0 !important;
  }

  .phone_sidebar .phone-drawer-header {
    display: block !important;
    padding: 16px 20px 12px !important;
    border-bottom: 1px solid var(--gray) !important;
    background: var(--sidebar-surface) !important;
  }

  .phone_sidebar .sidebar-logo {
    margin: 0 !important;
    width: 132px !important;
    height: 30px !important;
  }

  .content-container,
  .tab-content.active {
    background: var(--background) !important;
    overflow-x: hidden !important;
  }

  #dashboard-tab .dashboard-grid.row-1 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #rs232-tab .rs232-tab-grid,
  #settings-tab .setting_device,
  #dashboard-tab .phone_box_da,
  #dashboard-tab .dashboard-grid.row-2,
  #status-tab .dashboard-grid.row-2 {
    grid-template-columns: 1fr !important;
  }

  #cec-tab .rs232_box {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  :root {
    --card-inset-x: 14px;
    --console-height: 104px;
  }

  .tab-content.active {
    padding-left: var(--shell-inset-mobile) !important;
    padding-right: var(--shell-inset-mobile) !important;
  }

  #dashboard-tab .dashboard-grid.row-1,
  #cec-tab .rs232_box,
  #rs232-tab .rs232_box_big,
  #rs232-tab .rs232_box_,
  #settings-tab .phone_box_da {
    grid-template-columns: 1fr !important;
  }

  #rs232-tab .auto_power_row,
  #rs232-tab .auto_power_time_row,
  #rs232-tab .auto_power_command_row,
  #rs232-tab .serial_box.page_1280_serial,
  #rs232-tab .rs232_box_local,
  #rs232-tab .rs232_command_local,
  #network-tab .phone_signal,
  #video-tab .card-output-settings .setting-item,
  #command-tab .api_mode_command_box {
    grid-template-columns: 1fr !important;
  }

  #rs232-tab .serial_box_row,
  #command-tab .serial_box_row,
  #cec-tab .serial_box_row {
    grid-template-columns: 1fr !important;
  }

  #command-tab #commandContainer {
    max-height: none !important;
    min-height: 260px !important;
  }
}


/* DS canonical v6.32 - keep login subtitle at measured reference height */
#login-page .login-subtitle,
.login-container .login-subtitle {
  line-height: 18px !important;
  min-height: 18px !important;
  height: 18px !important;
}

/* DS canonical v6.33 - non-pixel QA fixes for dark tokens, RS-232 and compact rows */
html[data-theme="dark"] {
  --background: #0b1120 !important;
  --dark: #0b1120 !important;
  --secondary2: #151d2e !important;
  --sidebar-surface: #0b1120 !important;
  --btn-box: #334155 !important;
  --btn-box2: #1e293b !important;
  --light: #f1f5f9 !important;
  --light-gray: #94a3b8 !important;
  --gray: rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .content-container,
html[data-theme="dark"] .tab-content.active {
  background: var(--background) !important;
}

html[data-theme="dark"] .top-header,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .phone_sidebar,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .card-output-settings,
html[data-theme="dark"] .card-video-routing {
  background: var(--secondary2) !important;
}

#rs232-tab .rs232-tab-grid,
#rs232-tab .rs232-tab-grid > .dashboard-card,
#rs232-tab .rs232_box_big,
#rs232-tab .rs232_box_,
#rs232-tab .rs232_box_local,
#rs232-tab .rs232_command_local,
#rs232-tab .auto_power_command_row,
#rs232-tab .serial_box.page_1280_serial {
  min-width: 0 !important;
  max-width: 100% !important;
}

#rs232-tab .rs232_box_big {
  grid-template-columns: 1fr !important;
}

#rs232-tab .rs232_box_ {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#rs232-tab .rs232_command_local {
  grid-template-columns: minmax(100px, 130px) minmax(0, 1fr) auto !important;
}

#rs232-tab .auto_power_command_row {
  grid-template-columns: minmax(118px, 150px) minmax(70px, 88px) minmax(0, 1fr) auto !important;
}

#rs232-tab .serial_box.page_1280_serial {
  grid-template-columns: minmax(96px, 130px) repeat(4, minmax(58px, 1fr)) auto !important;
}

.setting-item,
.signal-item,
.network-item,
.edid-item,
.input_source_row,
.power_row,
.auto_power_row,
.auto_power_time_row,
.auto_power_command_row,
.serial_box,
.serial_box_row,
.rs232_box_local,
.rs232_command_local,
.command_title,
.card-list li {
  min-height: 40px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

@media (max-width: 1280px) {
  #rs232-tab .rs232-tab-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  #rs232-tab .rs232_box_,
  #rs232-tab .rs232_command_local,
  #rs232-tab .auto_power_command_row,
  #rs232-tab .serial_box.page_1280_serial {
    grid-template-columns: 1fr !important;
  }

  #rs232-tab .auto_power_time_row {
    grid-template-columns: 1fr !important;
  }

  .setting-item,
  .signal-item,
  .network-item,
  .edid-item,
  .input_source_row,
  .power_row,
  .auto_power_row,
  .auto_power_time_row,
  .auto_power_command_row,
  .serial_box,
  .serial_box_row,
  .rs232_box_local,
  .rs232_command_local,
  .command_title,
  .card-list li {
    min-height: 38px !important;
  }
}

/* DS canonical v6.34 - compact mobile row layout without horizontal overflow */
@media (max-width: 760px) {
  #video-tab .card-output-settings .setting-item,
  #network-tab .phone_signal {
    grid-template-columns: minmax(96px, 118px) minmax(0, 1fr) !important;
    column-gap: 10px !important;
    min-height: 44px !important;
  }

  #network-tab .page_1280_network {
    min-height: 56px !important;
  }

  #cec-tab .serial_box_row,
  #command-tab .serial_box_row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    min-height: 44px !important;
  }

  #cec-tab .serial_box_row > div:first-child,
  #command-tab .serial_box_row > div:first-child {
    grid-column: 1 / -1 !important;
    min-height: 16px !important;
  }

  #rs232-tab .auto_power_row {
    grid-template-columns: minmax(126px, 150px) minmax(0, 1fr) !important;
    min-height: 44px !important;
  }

  #rs232-tab .auto_power_time_row {
    grid-template-columns: minmax(126px, 150px) minmax(78px, 92px) auto !important;
    gap: 8px !important;
    min-height: 44px !important;
  }

  #rs232-tab .auto_power_command_row {
    grid-template-columns: minmax(96px, 124px) minmax(68px, 78px) minmax(0, 1fr) auto !important;
    gap: 8px !important;
    min-height: 44px !important;
  }

  #rs232-tab .serial_box.page_1280_serial {
    grid-template-columns: minmax(84px, 110px) repeat(4, minmax(42px, 1fr)) auto !important;
    gap: 6px !important;
    min-height: 44px !important;
  }

  #rs232-tab .rs232_command_local {
    grid-template-columns: minmax(84px, 110px) minmax(0, 1fr) auto !important;
    gap: 8px !important;
    min-height: 44px !important;
  }

  #rs232-tab .serial_box_row {
    grid-template-columns: minmax(84px, 110px) minmax(0, 1fr) auto !important;
    gap: 8px !important;
    min-height: 44px !important;
  }
}

@media (max-width: 430px) {
  #rs232-tab .auto_power_command_row,
  #rs232-tab .serial_box.page_1280_serial {
    font-size: 12px !important;
  }

  #rs232-tab .auto_power_command_row select,
  #rs232-tab .auto_power_command_row input,
  #rs232-tab .auto_power_command_row .btn-box,
  #rs232-tab .serial_box.page_1280_serial select,
  #rs232-tab .serial_box.page_1280_serial .btn-box {
    padding-left: 8px !important;
    padding-right: 8px !important;
    min-width: 0 !important;
  }
}

/* DS canonical v6.35 - compact mobile headers and command table rows */
#command-tab .command_title {
  align-items: center !important;
  min-height: 42px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

#command-tab .command_title > div,
#command-tab .command_title .description_box,
#command-tab .command_title .parameter_box,
#command-tab .command_title .command_box {
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 18px !important;
}

#command-tab #commandContainer {
  overflow-x: auto !important;
}

#syslog-tab .syslog-filters,
#command-tab .api_mode_box {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  overflow-x: auto !important;
  max-width: 100% !important;
  scrollbar-width: thin;
}

#syslog-tab .syslog-filter,
#syslog-tab .syslog-clear,
#command-tab .api_mode {
  flex: 0 0 auto !important;
}

@media (max-width: 760px) {
  #cec-tab .card-output-settings > .setting-item:first-child {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 10px var(--card-inset-x) !important;
    min-height: 58px !important;
    gap: 10px !important;
  }

  #network-tab .page_1280_network {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 10px var(--card-inset-x) !important;
    min-height: 58px !important;
    gap: 10px !important;
  }

  #syslog-tab .signal-item:first-child {
    grid-template-columns: 1fr !important;
    padding: 10px var(--card-inset-x) !important;
    min-height: 72px !important;
    gap: 8px !important;
  }

  #syslog-tab .syslog-filters {
    width: 100% !important;
  }

  #command-tab .command_title {
    min-height: 38px !important;
  }
}

/* DS canonical v6.36 - compact dynamic command parameter cells */
#command-tab .command_title .parameter_box {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  max-height: 34px !important;
  min-height: 24px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: thin;
}

#command-tab .command_title .parameter_box .data_box {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 24px !important;
  height: 28px !important;
  white-space: nowrap !important;
}

#command-tab .command_title .parameter_box select,
#command-tab .command_title .parameter_box input {
  height: 28px !important;
  min-height: 28px !important;
  max-width: 120px !important;
}



/* DS canonical v6.37 - exact PureLink reference CSS tokens from index-CBxnMoAA.css */
:root,
html[data-theme="light"],
html:not([data-theme="dark"]) {
  --background-hsl: 0 0% 100%;
  --foreground-hsl: 0 0% 9%;
  --border-hsl: 0 0% 90%;
  --input-hsl: 0 0% 75%;
  --ring-hsl: 217 91% 48%;
  --card-hsl: 0 0% 98%;
  --primary-hsl: 217 91% 48%;
  --secondary-hsl: 0 0% 93%;
  --muted-hsl: 217 8% 92%;
  --muted-foreground-hsl: 0 0% 35%;
  --accent-hsl: 217 12% 91%;
  --sidebar-hsl: 0 0% 96%;
  --sidebar-accent-hsl: 217 15% 88%;
  --sidebar-border-hsl: 0 0% 92%;
  --radius: .5rem;
  --primary: hsl(var(--primary-hsl));
  --foreground: hsl(var(--foreground-hsl));
  --background: hsl(var(--background-hsl));
  --secondary2: hsl(var(--card-hsl));
  --sidebar-surface: hsl(var(--sidebar-hsl));
  --light: hsl(var(--foreground-hsl));
  --white: hsl(var(--foreground-hsl));
  --light-gray: hsl(var(--muted-foreground-hsl));
  --muted: hsl(var(--muted-foreground-hsl));
  --gray: hsl(var(--border-hsl));
  --border-ref: hsl(var(--border-hsl));
  --input-border: hsl(var(--input-hsl));
  --login-control-border: hsl(var(--input-hsl));
  --btn-box: hsl(var(--secondary-hsl));
  --btn-box2: hsl(var(--muted-hsl));
  --btn-box-hover: hsl(var(--accent-hsl));
  --shadow: 0 1px 2px rgba(0,0,0,.06);
}

html[data-theme="dark"] {
  --background-hsl: 0 0% 8%;
  --foreground-hsl: 0 0% 98%;
  --border-hsl: 0 0% 18%;
  --input-hsl: 0 0% 30%;
  --ring-hsl: 217 91% 52%;
  --card-hsl: 0 0% 10%;
  --primary-hsl: 217 91% 48%;
  --secondary-hsl: 0 0% 18%;
  --muted-hsl: 217 8% 20%;
  --muted-foreground-hsl: 0 0% 70%;
  --accent-hsl: 217 12% 19%;
  --sidebar-hsl: 0 0% 12%;
  --sidebar-accent-hsl: 217 15% 18%;
  --sidebar-border-hsl: 0 0% 16%;
  --primary: hsl(var(--primary-hsl));
  --foreground: hsl(var(--foreground-hsl));
  --background: hsl(var(--background-hsl));
  --secondary2: hsl(var(--card-hsl));
  --sidebar-surface: hsl(var(--sidebar-hsl));
  --light: hsl(var(--foreground-hsl));
  --white: hsl(var(--foreground-hsl));
  --light-gray: hsl(var(--muted-foreground-hsl));
  --muted: hsl(var(--muted-foreground-hsl));
  --gray: hsl(var(--border-hsl));
  --border-ref: hsl(var(--border-hsl));
  --input-border: hsl(var(--input-hsl));
  --login-control-border: hsl(var(--input-hsl));
  --btn-box: hsl(var(--secondary-hsl));
  --btn-box2: hsl(var(--muted-hsl));
  --btn-box-hover: hsl(var(--accent-hsl));
  --shadow: 0 1px 2px rgba(0,0,0,.3);
}

body,
button,
input,
select,
textarea {
  font-family: "Barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.font-mono,
code,
pre,
.ip_action,
.mac_infor,
.command_box,
.phonecommand_box,
#command-tab .command_title,
.value {
  font-family: "Barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-variant-numeric: tabular-nums;
}

body,
.main-box,
.content-container,
.tab-content.active {
  color: var(--foreground) !important;
  background: var(--background) !important;
}

.top-header,
.dashboard-card,
.card-output-settings,
.card-video-routing,
.login-container,
#changpassword {
  background: var(--secondary2) !important;
  border-color: var(--gray) !important;
  color: var(--foreground) !important;
  border-radius: var(--radius) !important;
}

.sidebar,
.phone_sidebar,
.phone-drawer-header,
.header-left_phone .sidebar-header {
  background: var(--sidebar-surface) !important;
  border-color: hsl(var(--sidebar-border-hsl)) !important;
  color: var(--foreground) !important;
}

.title_size,
.card-title,
.dashboard-title,
.sidebar-user-name,
.nav-link.active,
.nav-link-phone.active,
label,
.setting-item > div:first-child,
.signal-item > div:first-child,
.network-item > div:first-child {
  color: var(--foreground) !important;
}

.login-subtitle,
.divider-text,
.user-info,
.network-item .label,
.card-list .label,
.title_box,
.routing-box.title_tab,
.command_title:first-child,
.placeholder-icon + span {
  color: var(--light-gray) !important;
}

input,
select,
textarea,
.network-input {
  color: var(--foreground) !important;
  background: var(--background) !important;
  border-color: var(--input-border) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--light-gray) !important;
  opacity: 1 !important;
}

.title-box,
.title_box,
.routing-box,
.setting-item,
.signal-item,
.network-item,
.card-list li,
.command_title {
  border-color: var(--gray) !important;
}

.btn-box:not(.front_selectactive):not(.btn-primary):not(.login-btn),
.nav-link.active,
.nav-link-phone.active {
  background: var(--btn-box) !important;
  border-color: var(--gray) !important;
  color: var(--foreground) !important;
}

.front_selectactive,
.btn-primary,
.login-btn,
#command-tab .front_selectactive,
#settings-tab .tab_box .btn-box.front_selectactive {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #f1f5f9 !important;
}

/* DS canonical v6.38 - enforce reference colors over older direct slate !important rules */
html[data-theme="light"] body,
html[data-theme="light"] .main-box,
html[data-theme="light"] .content-container,
html[data-theme="light"] .tab-content.active,
html[data-theme="light"] .dashboard-card,
html[data-theme="light"] .card-output-settings,
html[data-theme="light"] .card-video-routing,
html[data-theme="light"] .title_size,
html[data-theme="light"] .card-title,
html[data-theme="light"] .dashboard-title,
html[data-theme="light"] .sidebar-user-name,
html[data-theme="light"] .sidebar-logo,
html[data-theme="light"] .nav-link,
html[data-theme="light"] .nav-link-phone,
html[data-theme="light"] .setting-item,
html[data-theme="light"] .signal-item,
html[data-theme="light"] .network-item,
html[data-theme="light"] .card-list,
html[data-theme="light"] .command_title,
html[data-theme="light"] label,
html[data-theme="light"] .value,
html[data-theme="light"] .btn-box:not(.front_selectactive):not(.btn-primary):not(.login-btn) {
  color: #0f172a !important;
}

html[data-theme="light"] .login-subtitle,
html[data-theme="light"] .divider-text,
html[data-theme="light"] .user-info,
html[data-theme="light"] .network-item .label,
html[data-theme="light"] .card-list .label,
html[data-theme="light"] .title_box,
html[data-theme="light"] .routing-box.title_tab,
html[data-theme="light"] .placeholder-icon,
html[data-theme="light"] .nav-icon,
html[data-theme="light"] .input_tips,
html[data-theme="light"] .device-meta,
html[data-theme="light"] .login_username {
  color: #64748b !important;
}

html[data-theme="light"] .content-container,
html[data-theme="light"] .tab-content.active,
html[data-theme="light"] body {
  background: hsl(0 0% 100%) !important;
}

html[data-theme="light"] .top-header,
html[data-theme="light"] .dashboard-card,
html[data-theme="light"] .card-output-settings,
html[data-theme="light"] .card-video-routing,
html[data-theme="light"] .login-container,
html[data-theme="light"] #changpassword {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .phone_sidebar,
html[data-theme="light"] .phone-drawer-header,
html[data-theme="light"] .header-left_phone .sidebar-header {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .network-input {
  color: #0f172a !important;
  background: #f8fafc !important; /* ref: input bg = --bg-s */
  border-color: #cbd5e1 !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #64748b !important;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .main-box,
html[data-theme="dark"] .content-container,
html[data-theme="dark"] .tab-content.active {
  color: #f1f5f9 !important;
  background: #0b1120 !important;
}

html[data-theme="dark"] .top-header,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .card-output-settings,
html[data-theme="dark"] .card-video-routing,
html[data-theme="dark"] .login-container,
html[data-theme="dark"] #changpassword {
  color: #f1f5f9 !important;
  background: #151d2e !important;
  border-color: rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .phone_sidebar,
html[data-theme="dark"] .phone-drawer-header,
html[data-theme="dark"] .header-left_phone .sidebar-header {
  color: #f1f5f9 !important;
  background: #0b1120 !important;
  border-color: rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .title_size,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .dashboard-title,
html[data-theme="dark"] .sidebar-user-name,
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .nav-link-phone,
html[data-theme="dark"] .setting-item,
html[data-theme="dark"] .signal-item,
html[data-theme="dark"] .network-item,
html[data-theme="dark"] .card-list,
html[data-theme="dark"] .command_title,
html[data-theme="dark"] label,
html[data-theme="dark"] .value,
html[data-theme="dark"] .btn-box:not(.front_selectactive):not(.btn-primary):not(.login-btn) {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .login-subtitle,
html[data-theme="dark"] .divider-text,
html[data-theme="dark"] .user-info,
html[data-theme="dark"] .network-item .label,
html[data-theme="dark"] .card-list .label,
html[data-theme="dark"] .title_box,
html[data-theme="dark"] .routing-box.title_tab,
html[data-theme="dark"] .placeholder-icon,
html[data-theme="dark"] .nav-icon,
html[data-theme="dark"] .input_tips,
html[data-theme="dark"] .device-meta,
html[data-theme="dark"] .login_username {
  color: #94a3b8 !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .network-input {
  color: #f1f5f9 !important;
  background: #1e293b !important; /* ref: input bg = --bg-s */
  border-color: rgba(255,255,255,.14) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #94a3b8 !important;
}

/* DS canonical v6.39 - enforce reference input border over legacy login/control rules */
html[data-theme="light"] body input,
html[data-theme="light"] body select,
html[data-theme="light"] body textarea,
html[data-theme="light"] body .network-input,
html[data-theme="light"] #login-page input,
html[data-theme="light"] #login-page select,
html[data-theme="light"] #main-interface input,
html[data-theme="light"] #main-interface select,
html[data-theme="light"] #main-interface textarea {
  border-color: #cbd5e1 !important;
}

html[data-theme="dark"] body input,
html[data-theme="dark"] body select,
html[data-theme="dark"] body textarea,
html[data-theme="dark"] body .network-input,
html[data-theme="dark"] #login-page input,
html[data-theme="dark"] #login-page select,
html[data-theme="dark"] #main-interface input,
html[data-theme="dark"] #main-interface select,
html[data-theme="dark"] #main-interface textarea {
  border-color: rgba(255,255,255,.14) !important;
}


/* DS canonical v6.40 - reference styled preview/info toast */
#tipmessage,
#tipnotmessage {
  pointer-events: none !important;
  z-index: 2000 !important;
}

#tipmessage.show,
#tipnotmessage.show {
  top: 54px !important;
}

#tipmessage_box,
#tipnotmessage_box {
  min-width: 280px !important;
  max-width: min(720px, calc(100vw - 32px)) !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 8px 14px !important;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  justify-items: start !important;
  border: 1px solid var(--gray) !important;
  border-radius: var(--radius) !important;
  background: var(--secondary2) !important;
  color: var(--foreground) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  line-height: 20px !important;
  pointer-events: auto !important;
}

#tipmessage-data,
#tipnotmessage-data {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  line-height: 20px !important;
  margin: 0 !important;
  color: var(--foreground) !important;
  font-family: "Barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: left !important;
  overflow-wrap: anywhere !important;
}

.tipmessage-box,
.tipnotmessage-box {
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: hsl(var(--primary-hsl) / .12) !important;
  display: grid !important;
  place-items: center !important;
}

#tipmessage-img,
#tipnotmessage-img {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
}

html[data-theme="dark"] #tipmessage_box,
html[data-theme="dark"] #tipnotmessage_box {
  box-shadow: 0 10px 28px rgba(0,0,0,.35) !important;
}


/* DS canonical v6.41 - exact reference toast dark surface */
html[data-theme="dark"] #tipmessage_box,
html[data-theme="dark"] #tipnotmessage_box {
  background: #151d2e !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #f1f5f9 !important;
}

html[data-theme="light"] #tipmessage_box,
html[data-theme="light"] #tipnotmessage_box {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}


/* DS canonical v6.42 - normalize section descriptions across all cards */
.dashboard-card > .title-box,
.card-output-settings > .title-box,
.card-video-routing > .title-box,
.dashboard-card > .signal-item:first-child,
.card-output-settings > .signal-item:first-child,
.card-video-routing > .signal-item:first-child,
#cec-tab .card-output-settings > .setting-item:first-child,
#network-tab .page_1280_network,
#syslog-tab .signal-item:first-child,
#settings-tab .page_1280_ > div > .signal-item,
#settings-tab .page_1280_ .signal-item[style*="border-bottom:none"] {
  min-height: 56px !important;
  padding: 12px var(--card-inset-x) !important;
  align-items: center !important;
  border-bottom: 1px solid var(--gray) !important;
  box-sizing: border-box !important;
}

.dashboard-card > .title-box .vdeo_box > div:first-child:not(.login-subtitle),
.card-output-settings > .title-box .vdeo_box > div:first-child:not(.login-subtitle),
.card-video-routing > .title-box .vdeo_box > div:first-child:not(.login-subtitle),
.dashboard-card > .title-box > div:first-child > div:first-child:not(.login-subtitle),
.card-output-settings > .title-box > div:first-child > div:first-child:not(.login-subtitle),
.dashboard-card > .signal-item:first-child > div:first-child div:first-child div:first-child:not(.login-subtitle),
.card-output-settings > .signal-item:first-child > div:first-child div:first-child div:first-child:not(.login-subtitle),
#cec-tab .card-output-settings > .setting-item:first-child > div:first-child div:first-child div:first-child:not(.login-subtitle),
#network-tab .page_1280_network > div:first-child div:first-child div:first-child:not(.login-subtitle),
#syslog-tab .signal-item:first-child > div:first-child div:first-child div:first-child:not(.login-subtitle),
#settings-tab .page_1280_ .signal-item > div:first-child div:first-child div:first-child:not(.login-subtitle) {
  color: var(--foreground) !important;
  font-family: "Barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

.title_size {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
}

.dashboard-card > .title-box .login-subtitle,
.card-output-settings > .title-box .login-subtitle,
.card-video-routing > .title-box .login-subtitle,
.dashboard-card > .signal-item:first-child .login-subtitle,
.card-output-settings > .signal-item:first-child .login-subtitle,
.card-video-routing > .signal-item:first-child .login-subtitle,
#cec-tab .card-output-settings > .setting-item:first-child .login-subtitle,
#network-tab .page_1280_network .login-subtitle,
#syslog-tab .signal-item:first-child .login-subtitle,
#settings-tab .page_1280_ .signal-item .login-subtitle {
  color: var(--light-gray) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  margin: 2px 0 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

#cec-tab .card-output-settings > .setting-item:first-child {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
}

#cec-tab .dashboard-card > .login-subtitle[style*="margin-left: 16px"] {
  display: block !important;
  margin: 0 !important;
  padding: 10px var(--card-inset-x) 6px !important;
  border-top: 1px solid var(--gray) !important;
  color: var(--light-gray) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
}

#cec-tab .dashboard-card > .serial_box_row {
  margin: 0 !important;
  padding: 0 var(--card-inset-x) 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 760px) {
  .dashboard-card > .title-box,
  .card-output-settings > .title-box,
  .card-video-routing > .title-box,
  .dashboard-card > .signal-item:first-child,
  .card-output-settings > .signal-item:first-child,
  .card-video-routing > .signal-item:first-child,
  #cec-tab .card-output-settings > .setting-item:first-child,
  #network-tab .page_1280_network,
  #syslog-tab .signal-item:first-child {
    min-height: 52px !important;
    padding: 10px var(--card-inset-x) !important;
  }
}


/* DS canonical v6.43 - shell menu/background reference surface lock */
:root,
html[data-theme="light"],
html:not([data-theme="dark"]) {
  --background-hsl: 0 0% 100%;
  --card-hsl: 0 0% 98%;
  --sidebar-hsl: 0 0% 96%;
  --border-hsl: 0 0% 90%;
  --sidebar-border-hsl: 0 0% 92%;
  --foreground-hsl: 0 0% 9%;
  --muted-foreground-hsl: 0 0% 35%;
  --background: hsl(var(--background-hsl));
  --secondary2: hsl(var(--card-hsl));
  --sidebar-surface: hsl(var(--sidebar-hsl));
  --gray: hsl(var(--border-hsl));
  --foreground: hsl(var(--foreground-hsl));
  --light: hsl(var(--foreground-hsl));
  --light-gray: hsl(var(--muted-foreground-hsl));
}

html[data-theme="dark"] {
  --background-hsl: 0 0% 8%;
  --card-hsl: 0 0% 10%;
  --sidebar-hsl: 0 0% 12%;
  --border-hsl: 0 0% 18%;
  --sidebar-border-hsl: 0 0% 16%;
  --foreground-hsl: 0 0% 98%;
  --muted-foreground-hsl: 0 0% 70%;
  --background: hsl(var(--background-hsl));
  --secondary2: hsl(var(--card-hsl));
  --sidebar-surface: hsl(var(--sidebar-hsl));
  --gray: hsl(var(--border-hsl));
  --foreground: hsl(var(--foreground-hsl));
  --light: hsl(var(--foreground-hsl));
  --light-gray: hsl(var(--muted-foreground-hsl));
}

body,
#main-interface,
.main-box,
.content-container,
.tab-content.active {
  background: var(--background) !important;
  color: var(--foreground) !important;
}

.top-header,
.header-left_phone,
.header-left_phone .sidebar-header {
  background: var(--secondary2) !important;
  border-color: var(--gray) !important;
  color: var(--foreground) !important;
}

.sidebar,
.phone_sidebar,
.phone-drawer-header,
.phone_sidebar .phone-drawer-header {
  background: var(--sidebar-surface) !important;
  border-color: hsl(var(--sidebar-border-hsl)) !important;
  color: var(--foreground) !important;
}

html[data-theme="light"] .phone_sidebar .nav-link-phone,
html[data-theme="light"] .phone_sidebar .sidebar-user-name,
html[data-theme="light"] .phone_sidebar .sidebar-logo,
html:not([data-theme="dark"]) .phone_sidebar .nav-link-phone,
html:not([data-theme="dark"]) .phone_sidebar .sidebar-user-name,
html:not([data-theme="dark"]) .phone_sidebar .sidebar-logo {
  color: #0f172a !important;
}

html[data-theme="light"] .phone_sidebar .divider-text,
html[data-theme="light"] .phone_sidebar .login_username,
html:not([data-theme="dark"]) .phone_sidebar .divider-text,
html:not([data-theme="dark"]) .phone_sidebar .login_username {
  color: #64748b !important;
}

@media (max-width: 1024px) {
  .top-header {
    background: var(--secondary2) !important;
    border-bottom: 1px solid var(--gray) !important;
  }

  .header-left_phone {
    background: var(--secondary2) !important;
    border-right: 1px solid var(--gray) !important;
  }

  .header-left_phone .sidebar-header {
    background: transparent !important;
  }

  .phone_sidebar {
    background: var(--sidebar-surface) !important;
    border-right: 1px solid hsl(var(--sidebar-border-hsl)) !important;
  }

  body.phone-nav-open::after {
    background: hsl(0 0% 9% / .42) !important;
  }

  html[data-theme="dark"] body.phone-nav-open::after {
    background: hsl(0 0% 0% / .58) !important;
  }
}


/* DS canonical v6.44 - override legacy important shell variables and mobile specificity */
:root,
html[data-theme="light"],
html:not([data-theme="dark"]) {
  --background-hsl: 0 0% 100% !important;
  --card-hsl: 0 0% 98% !important;
  --sidebar-hsl: 0 0% 96% !important;
  --border-hsl: 0 0% 90% !important;
  --sidebar-border-hsl: 0 0% 92% !important;
  --foreground-hsl: 0 0% 9% !important;
  --muted-foreground-hsl: 0 0% 35% !important;
  --background: hsl(var(--background-hsl)) !important;
  --secondary2: hsl(var(--card-hsl)) !important;
  --sidebar-surface: hsl(var(--sidebar-hsl)) !important;
  --gray: hsl(var(--border-hsl)) !important;
  --foreground: hsl(var(--foreground-hsl)) !important;
  --light: hsl(var(--foreground-hsl)) !important;
  --light-gray: hsl(var(--muted-foreground-hsl)) !important;
}

html[data-theme="dark"] {
  --background-hsl: 0 0% 8% !important;
  --card-hsl: 0 0% 10% !important;
  --sidebar-hsl: 0 0% 12% !important;
  --border-hsl: 0 0% 18% !important;
  --sidebar-border-hsl: 0 0% 16% !important;
  --foreground-hsl: 0 0% 98% !important;
  --muted-foreground-hsl: 0 0% 70% !important;
  --background: hsl(var(--background-hsl)) !important;
  --secondary2: hsl(var(--card-hsl)) !important;
  --sidebar-surface: hsl(var(--sidebar-hsl)) !important;
  --gray: hsl(var(--border-hsl)) !important;
  --foreground: hsl(var(--foreground-hsl)) !important;
  --light: hsl(var(--foreground-hsl)) !important;
  --light-gray: hsl(var(--muted-foreground-hsl)) !important;
}

html[data-theme="light"] body,
html[data-theme="light"] #main-interface,
html[data-theme="light"] .main-box,
html[data-theme="light"] .content-container,
html[data-theme="light"] .tab-content.active,
html:not([data-theme="dark"]) body,
html:not([data-theme="dark"]) #main-interface,
html:not([data-theme="dark"]) .main-box,
html:not([data-theme="dark"]) .content-container,
html:not([data-theme="dark"]) .tab-content.active {
  background: hsl(0 0% 100%) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .top-header,
html[data-theme="light"] .header-left_phone,
html[data-theme="light"] .header-left_phone .sidebar-header,
html:not([data-theme="dark"]) .top-header,
html:not([data-theme="dark"]) .header-left_phone,
html:not([data-theme="dark"]) .header-left_phone .sidebar-header {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .phone_sidebar,
html[data-theme="light"] .phone-drawer-header,
html[data-theme="light"] .phone_sidebar .phone-drawer-header,
html:not([data-theme="dark"]) .sidebar,
html:not([data-theme="dark"]) .phone_sidebar,
html:not([data-theme="dark"]) .phone-drawer-header,
html:not([data-theme="dark"]) .phone_sidebar .phone-drawer-header {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html[data-theme="dark"] body,
html[data-theme="dark"] #main-interface,
html[data-theme="dark"] .main-box,
html[data-theme="dark"] .content-container,
html[data-theme="dark"] .tab-content.active {
  background: #0b1120 !important;
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .top-header,
html[data-theme="dark"] .header-left_phone,
html[data-theme="dark"] .header-left_phone .sidebar-header {
  background: #151d2e !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .phone_sidebar,
html[data-theme="dark"] .phone-drawer-header,
html[data-theme="dark"] .phone_sidebar .phone-drawer-header {
  background: #0b1120 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #f1f5f9 !important;
}