body{font-family:Arial,sans-serif;background:#f6f7fb;margin:0;color:#1f2937}
.nav{background:#263b7a;color:white;padding:12px 18px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.nav a{color:white;text-decoration:none;background:#4156a6;padding:7px 10px;border-radius:6px}
.nav span{margin-left:auto}
.wrap{max-width:1280px;margin:22px auto;padding:0 16px}
.card{background:white;border-radius:12px;padding:18px;box-shadow:0 2px 10px #0001;margin-bottom:16px}table{width:100%;border-collapse:collapse;background:white}th,td{padding:9px;border-bottom:1px solid #e5e7eb;text-align:left;vertical-align:top}th{background:#eef2ff}input,select,textarea{padding:8px;border:1px solid #cbd5e1;border-radius:6px;margin:4px;max-width:100%}button,.btn{background:#4156a6;color:white;border:0;border-radius:6px;padding:8px 12px;text-decoration:none;display:inline-block;margin:2px;cursor:pointer}
.btn2{background:#0f766e}
.danger{background:#b91c1c}
.muted{color:#64748b}
.err{color:#b91c1c;font-weight:bold}
.ok{color:#15803d;font-weight:bold}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.search{width:98%;font-size:16px}
.tiny{font-size:12px;color:#64748b}

/* === M-SENSE PHASE B2.2 MOBILE RESPONSIVE CSS START === */
*{box-sizing:border-box}
img,svg,video{max-width:100%;height:auto}
input,select,textarea,button{max-width:100%}

@media (max-width: 900px){
  .wrap{max-width:100%;margin:14px auto;padding:0 10px}
  .card{margin-bottom:12px}
  table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  th,td{padding:9px 8px;font-size:13px}
}

@media (max-width: 640px){
  body{font-size:14px}
  .nav{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:10px 12px}
  .nav a{display:block;text-align:center;padding:9px 10px}
  .nav span{margin-left:0;text-align:center;font-size:12px;line-height:1.35}
  .wrap{margin:10px auto;padding:0 8px}
  .card{padding:12px;border-radius:10px}
  h1{font-size:22px;line-height:1.25;margin:12px 0}
  h2{font-size:20px;line-height:1.25;margin:10px 0}
  h3{font-size:17px;line-height:1.25;margin:10px 0}
  .btn,a.btn,button,input[type=submit]{display:inline-block;min-height:38px;line-height:1.2}
  input,select,textarea{font-size:16px}
  th,td{padding:8px 7px;font-size:12px}
}

@media (max-width: 420px){
  .wrap{padding:0 6px}
  .card{padding:10px}
  .nav{padding:8px}
  .nav a{padding:8px}
  table{font-size:12px}
}
/* === M-SENSE PHASE B2.2 MOBILE RESPONSIVE CSS END === */

/* === M-SENSE PHASE B2.3B MOBILE TABLE CARDS BEGIN === */
@media (max-width: 700px) {
  .wrap {
    max-width: 100%;
    margin: 10px auto;
    padding: 0 8px;
    box-sizing: border-box;
  }

  .card {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 10px;
  }

  .card input,
  .card select,
  .card textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  table {
    display: block;
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    overflow: visible;
  }

  thead {
    display: none;
  }

  tbody {
    display: block;
    width: 100%;
  }

  tr {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #dde3ee;
    border-radius: 10px;
    margin: 0 0 12px 0;
    padding: 8px 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  }

  td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 2px;
    border-bottom: 1px solid #eef2f7;
    text-align: right;
    white-space: normal;
    word-break: break-word;
  }

  td:last-child {
    border-bottom: 0;
  }

  td::before {
    content: attr(data-label);
    flex: 0 0 46%;
    max-width: 46%;
    text-align: left;
    font-weight: 700;
    color: #475569;
    word-break: normal;
  }

  td:empty::after {
    content: "-";
    color: #94a3b8;
  }

  td a,
  td button,
  td .btn,
  .btn {
    white-space: nowrap;
  }

  td a.btn,
  td .btn {
    min-width: 74px;
    text-align: center;
  }
}
/* === M-SENSE PHASE B2.3B MOBILE TABLE CARDS END === */

/* === M-SENSE PHASE B2.4 MOBILE NAV HEADER POLISH BEGIN === */
@media (max-width: 700px) {
  .nav {
    padding: 10px 10px;
    gap: 8px;
    align-items: stretch;
  }

  .nav > b,
  .nav > strong {
    flex: 1 0 100%;
    display: block;
    font-size: 18px;
    line-height: 1.25;
    margin-bottom: 2px;
  }

  .nav a {
    flex: 1 1 auto;
    min-width: 92px;
    text-align: center;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
  }

  .nav span {
    flex: 1 0 100%;
    margin-left: 0;
    font-size: 13px;
    line-height: 1.35;
    opacity: 0.95;
    overflow-wrap: anywhere;
  }

  h2 {
    font-size: 20px;
    line-height: 1.25;
    margin: 8px 0 12px 0;
  }

  h3 {
    font-size: 17px;
    line-height: 1.25;
  }

  .tiny {
    font-size: 11px;
  }
}

@media (max-width: 420px) {
  .nav a {
    min-width: calc(50% - 6px);
    font-size: 13px;
    padding: 9px 8px;
  }

  .nav > b,
  .nav > strong {
    font-size: 17px;
  }
}
/* === M-SENSE PHASE B2.4 MOBILE NAV HEADER POLISH END === */

/* === M-SENSE PHASE2 LOGO SET + PER-USER THEME V1 BEGIN === */
:root{
  --ms-page-bg:#f6f7fb;--ms-text:#1f2937;--ms-nav-bg:#263b7a;--ms-nav-text:#ffffff;
  --ms-nav-button-bg:#4156a6;--ms-nav-button-text:#ffffff;--ms-card-bg:#ffffff;
  --ms-primary-bg:#4156a6;--ms-primary-text:#ffffff;--ms-secondary-bg:#0f766e;--ms-secondary-text:#ffffff;
  --ms-table-header-bg:#eef2ff;--ms-table-header-text:#1f2937;--ms-border:#e5e7eb;
  --ms-input-bg:#ffffff;--ms-input-text:#1f2937;--ms-muted:#64748b;--ms-success:#15803d;
  --ms-danger:#b91c1c;--ms-link:#4156a6;
}
body{background:var(--ms-page-bg);color:var(--ms-text)}
.nav{background:var(--ms-nav-bg);color:var(--ms-nav-text)}
.nav a{background:var(--ms-nav-button-bg);color:var(--ms-nav-button-text)}
.card,table{background:var(--ms-card-bg);color:var(--ms-text)}
th{background:var(--ms-table-header-bg);color:var(--ms-table-header-text)}
th,td{border-bottom-color:var(--ms-border)}
input,select,textarea{background:var(--ms-input-bg);color:var(--ms-input-text);border-color:var(--ms-border)}
button,.btn{background:var(--ms-primary-bg);color:var(--ms-primary-text)}
.btn2{background:var(--ms-secondary-bg);color:var(--ms-secondary-text)}
.danger{background:var(--ms-danger);color:#fff}
.muted,.tiny{color:var(--ms-muted)}
.err{color:var(--ms-danger)}
.ok{color:var(--ms-success)}
.wrap a:not(.btn){color:var(--ms-link)}
.nav .msense-brand{background:transparent!important;color:var(--ms-nav-text)!important;padding:0!important;margin:0 6px 0 0;display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.msense-brand-logo{display:block;max-width:160px;max-height:48px;width:auto;height:auto;object-fit:contain}
.msense-brand-title{color:var(--ms-nav-text);white-space:nowrap}
.p2bt-user-branding{margin:14px 0;padding:14px;border:1px solid var(--ms-border);border-radius:10px;background:var(--ms-card-bg)}
.p2bt-theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px 12px;margin:12px 0}
.p2bt-color-field{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--ms-border);border-radius:8px;padding:7px 9px}
.p2bt-color-field input[type=color]{width:48px;height:34px;padding:2px;margin:0;cursor:pointer}
.p2bt-logo-preview{display:inline-flex;vertical-align:middle;margin-left:12px;padding:6px 10px;border:1px solid var(--ms-border);border-radius:8px;background:var(--ms-input-bg)}
.p2bt-logo-preview img{max-width:160px;max-height:48px}
.p2bt-logo-master-row{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:18px;align-items:center}
.p2bt-logo-master-preview{display:flex;align-items:center;justify-content:center;min-height:100px;padding:14px;border:1px solid var(--ms-border);border-radius:10px;background:var(--ms-input-bg)}
.p2bt-logo-master-preview img{max-width:220px;max-height:90px}
@media (max-width:700px){
  tr{background:var(--ms-card-bg)!important;border-color:var(--ms-border)!important}
  td{border-bottom-color:var(--ms-border)!important}
  td::before{color:var(--ms-muted)!important}
  .nav .msense-brand{flex:1 0 100%;justify-content:center;margin:0 0 4px 0}
  .msense-brand-logo{max-width:140px;max-height:42px}
  .msense-brand-title{white-space:normal;text-align:left}
  .p2bt-logo-master-row{grid-template-columns:1fr}
  .p2bt-theme-grid{grid-template-columns:1fr}
}
/* === M-SENSE PHASE2 LOGO SET + PER-USER THEME V1 END === */


/* BEGIN MSENSE HEADER VISUAL V1.1 */
.nav.msense-header{
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);
  align-items:center;
  gap:18px;
  position:relative;
  min-height:78px;
  padding:10px 18px;
}
.msense-header-title{
  justify-self:start;
  color:var(--ms-nav-text);
  font-size:18px;
  white-space:nowrap;
}
.nav.msense-header .msense-header-logo{
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent!important;
  padding:0!important;
  margin:0!important;
  min-width:0;
}
.nav.msense-header .msense-header-logo .msense-brand-logo{
  display:block;
  width:auto;
  height:auto;
  max-width:192px;
  max-height:58px;
  object-fit:contain;
}
.msense-header-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  min-width:0;
}
.msense-header-actions span{
  margin-left:0;
  white-space:nowrap;
}
.msense-version-badge{
  position:fixed;
  right:10px;
  bottom:7px;
  z-index:50;
  padding:3px 7px;
  border-radius:5px;
  background:rgba(255,255,255,.76);
  color:#475569;
  font-size:11px;
  line-height:1;
  box-shadow:0 1px 4px rgba(15,23,42,.12);
  pointer-events:none;
  backdrop-filter:blur(3px);
}
@media (max-width:900px){
  .nav.msense-header{
    grid-template-columns:1fr auto;
    min-height:auto;
  }
  .msense-header-title{grid-column:1;grid-row:1}
  .nav.msense-header .msense-header-logo{grid-column:2;grid-row:1}
  .msense-header-actions{
    grid-column:1 / -1;
    grid-row:2;
    justify-self:stretch;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
}
@media (max-width:700px){
  .nav.msense-header{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    padding:10px;
  }
  .msense-header-title{
    grid-column:1;
    grid-row:1;
    justify-self:start;
    font-size:17px;
  }
  .nav.msense-header .msense-header-logo{
    grid-column:1;
    grid-row:2;
    justify-self:center;
  }
  .nav.msense-header .msense-header-logo .msense-brand-logo{
    max-width:168px;
    max-height:51px;
  }
  .msense-header-actions{
    grid-column:1;
    grid-row:3;
    justify-self:stretch;
    justify-content:center;
    gap:8px;
  }
  .msense-header-actions span{
    flex:1 0 100%;
    text-align:center;
  }
}
/* END MSENSE HEADER VISUAL V1.1 */


/* BEGIN MSENSE BRANDING BACKGROUND PHASEB V1 */
.p2bt-background-settings{
  margin:14px 0;
  padding:12px;
  border:1px solid var(--ms-border);
  border-radius:10px;
  background:var(--ms-card-bg);
}
.p2bt-background-settings h4{margin:0 0 8px}
.p2bt-background-preview{
  margin:10px 0;
  max-width:440px;
  overflow:hidden;
  border:1px solid var(--ms-border);
  border-radius:9px;
  background:var(--ms-input-bg);
}
.p2bt-background-preview img{
  display:block;
  width:100%;
  height:160px;
  object-fit:fill;
}
.p2bt-background-remove{display:block;margin-top:8px}
.msbb-background-status{display:inline-block;margin-left:8px}
.msbb-default-brand-card{border:2px solid var(--ms-border)}
/* END MSENSE BRANDING BACKGROUND PHASEB V1 */