/* DM Digital Displays portal shell v0.7.0-alpha.4
   HostedTable-inspired navigation model: top navigation on desktop,
   compact header + bottom navigation and More sheet on mobile. */

:root{
  --dm-shell-navy:#071735;
  --dm-shell-navy-2:#0b2b55;
  --dm-shell-navy-3:#0a2345;
  --dm-shell-header:68px;
  --dm-shell-toolbar:58px;
}

body.dm-mobile-menu-open{overflow:hidden}

.portal-modern{
  display:block!important;
  min-height:100vh;
  background:radial-gradient(circle at 10% 0,#102238 0,var(--bg) 40%);
}

.portal-modern .sidebar{
  position:sticky!important;
  inset:auto!important;
  top:0!important;
  z-index:80;
  width:100%!important;
  height:var(--dm-shell-header)!important;
  min-height:var(--dm-shell-header);
  padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  background:linear-gradient(90deg,var(--dm-shell-navy) 0%,var(--dm-shell-navy-2) 58%,var(--dm-shell-navy-3) 100%)!important;
  box-shadow:0 5px 20px rgba(3,12,28,.3);
  backdrop-filter:none!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:12px;
}

.portal-modern .sidebar .brand{
  flex:0 0 auto;
  min-width:178px;
  padding:0!important;
  margin:0!important;
  justify-content:flex-start!important;
}

.portal-modern .sidebar .brand-logo-wrap{gap:8px}
.portal-modern .sidebar .brand-logo{
  width:auto!important;
  max-width:150px!important;
  max-height:40px!important;
  object-position:left center!important;
}
.portal-modern .sidebar .brand-product{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:#d6f9eb;
}

.portal-modern .nav{
  min-width:0;
  flex:1 1 auto;
  display:flex!important;
  align-items:center;
  gap:3px!important;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 2px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.portal-modern .nav::-webkit-scrollbar{display:none}
.portal-modern .nav .suite-nav-break{display:none!important}

.portal-modern .nav>button{
  flex:0 0 auto;
  min-height:42px;
  padding:0 11px!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:rgba(255,255,255,.76)!important;
  font-size:12px!important;
  font-weight:750!important;
  text-align:center!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  white-space:nowrap;
  transition:background .14s ease,color .14s ease,transform .14s ease;
}
.portal-modern .nav>button>span:first-child{font-size:14px;line-height:1}
.portal-modern .nav>button:hover{
  color:#fff!important;
  background:rgba(255,255,255,.08)!important;
}
.portal-modern .nav>button.active{
  color:#fff!important;
  background:#163f70!important;
  box-shadow:inset 0 -3px 0 #38bdf8;
}
.portal-modern .nav>button:active{transform:translateY(1px)}
.portal-modern .nav>button.shell-overflow-source{display:none!important}

.portal-modern .sidebar-footer{
  flex:0 0 auto;
  margin:0!important;
  padding:0!important;
  border:0!important;
}
.portal-modern .user-chip{
  min-width:126px;
  max-width:190px;
  padding:8px 10px!important;
  border:1px solid rgba(255,255,255,.14);
  border-radius:11px;
  background:rgba(255,255,255,.07);
  color:#fff;
  line-height:1.15;
}
.portal-modern .user-chip strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}
.portal-modern .user-chip span{
  margin-top:3px!important;
  color:rgba(255,255,255,.62)!important;
  font-size:9px!important;
}

.dm-desktop-more-wrap{
  position:relative;
  flex:0 0 auto;
}
.dm-desktop-more-button{
  min-height:42px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:9px;
  background:rgba(255,255,255,.07);
  color:#fff;
  font:750 12px/1 inherit;
  cursor:pointer;
}
.dm-desktop-more-button:hover,
.dm-desktop-more-button.active{background:rgba(255,255,255,.14)}
.dm-desktop-more-button .dots{margin-left:5px;letter-spacing:1px}

.dm-desktop-more-menu{
  position:absolute;
  z-index:100;
  top:calc(100% + 10px);
  right:0;
  width:min(390px,calc(100vw - 24px));
  max-height:min(72vh,680px);
  overflow:auto;
  padding:8px;
  border:1px solid #d9e1ea;
  border-radius:15px;
  background:#fff;
  color:#101828;
  box-shadow:0 22px 58px rgba(7,23,53,.32);
}
.dm-desktop-more-menu[hidden]{display:none}
.dm-shell-menu-group+.dm-shell-menu-group{
  margin-top:7px;
  padding-top:7px;
  border-top:1px solid #eef2f6;
}
.dm-shell-menu-title{
  padding:7px 9px 6px;
  color:#667085;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.dm-shell-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.dm-shell-menu-item{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:7px 9px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#344054;
  text-align:left;
  cursor:pointer;
}
.dm-shell-menu-item:hover{background:#f3f6fa;color:#071735}
.dm-shell-menu-item.active{background:#e9f2fb;color:#0b2b55}
.dm-shell-menu-icon{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:8px;
  background:#eef4fa;
  color:#17466f;
  font-size:15px;
}
.dm-shell-menu-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  font-weight:800;
}

.portal-modern .main{min-width:0!important}
.portal-modern .topbar{
  position:sticky!important;
  top:var(--dm-shell-header)!important;
  z-index:55;
  height:var(--dm-shell-toolbar)!important;
  padding:0 max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left))!important;
  border-bottom:1px solid var(--line)!important;
  background:rgba(7,16,29,.94)!important;
  box-shadow:0 7px 18px rgba(0,0,0,.12);
  backdrop-filter:blur(18px)!important;
}
.portal-modern .topbar h1{
  font-size:14px!important;
  font-weight:850;
  letter-spacing:.01em;
}
.portal-modern .top-actions{align-items:center}
.portal-modern .top-actions .btn{min-height:38px}

.portal-modern .content{
  width:min(1560px,100%);
  max-width:none!important;
  padding:28px clamp(18px,3vw,38px) 52px!important;
}
.portal-modern .page-head{
  margin-bottom:20px;
  padding:2px 0 4px;
}
.portal-modern .page-head h2{
  font-size:clamp(1.65rem,2.4vw,2.15rem)!important;
  letter-spacing:-.035em;
}
.portal-modern .page-head p{max-width:800px;line-height:1.55}
.portal-modern .stats,
.portal-modern .suite-metrics{gap:12px}
.portal-modern .stat,
.portal-modern .suite-metric,
.portal-modern .panel,
.portal-modern .card{
  border-color:#243850;
  box-shadow:0 12px 32px rgba(0,0,0,.12);
}
.portal-modern .panel,
.portal-modern .card{border-radius:17px}
.portal-modern .panel-head{min-height:54px}
.portal-modern .btn{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.portal-modern input,
.portal-modern select,
.portal-modern textarea{
  min-height:42px;
}
.portal-modern textarea{resize:vertical}

.portal-modern .table-wrap{
  border-radius:0 0 16px 16px;
  -webkit-overflow-scrolling:touch;
}
.portal-modern table{min-width:720px}
.portal-modern th{position:sticky;top:0;background:#0e1a2b;z-index:1}

/* Mobile navigation mirrors the HostedTable interaction model. */
.dm-mobile-nav,
.dm-mobile-sheet-backdrop{display:none}

@media(max-width:1280px){
  .portal-modern .sidebar .brand{min-width:148px}
  .portal-modern .sidebar .brand-logo{max-width:125px!important}
  .portal-modern .user-chip{min-width:108px;max-width:145px}
  .portal-modern .nav>button{padding:0 9px!important}
}

@media(max-width:900px){
  :root{--dm-shell-header:64px;--dm-shell-toolbar:52px}
  .portal-modern .sidebar{
    padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))!important;
  }
  .portal-modern .sidebar .brand{min-width:0;flex:1 1 auto}
  .portal-modern .sidebar .brand-logo{max-width:145px!important}
  .portal-modern .sidebar .brand-product{display:inline-flex!important}
  .portal-modern .nav,
  .dm-desktop-more-wrap{display:none!important}
  .portal-modern .sidebar-footer{
    display:block!important;
    flex:0 0 auto;
  }
  .portal-modern .user-chip{
    display:grid!important;
    place-items:center;
    min-width:38px;
    width:38px;
    height:38px;
    padding:0!important;
    border-radius:50%;
    background:#fff;
    color:#0b2b55;
  }
  .portal-modern .user-chip strong{
    width:100%;
    text-align:center;
    font-size:0!important;
    overflow:visible;
  }
  .portal-modern .user-chip strong:after{
    content:attr(data-initials);
    font-size:10px;
    font-weight:950;
  }
  .portal-modern .user-chip span{display:none!important}

  .portal-modern .topbar{
    padding:0 14px!important;
    box-shadow:0 4px 14px rgba(0,0,0,.1);
  }
  .portal-modern .topbar h1{font-size:13px!important}
  .portal-modern .top-actions{gap:6px}
  .portal-modern #logout{display:none!important}
  .portal-modern #refresh{
    min-width:38px;
    width:38px;
    height:38px;
    padding:0!important;
    overflow:hidden;
    font-size:0;
  }
  .portal-modern #refresh:before{
    content:"↻";
    font-size:18px;
  }

  .portal-modern .content{
    padding:17px 12px calc(102px + env(safe-area-inset-bottom))!important;
  }
  .portal-modern .page-head{
    display:grid!important;
    gap:13px!important;
    margin-bottom:16px!important;
  }
  .portal-modern .page-head>div:last-child,
  .portal-modern .page-head .top-actions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .portal-modern .page-head .top-actions>*{min-width:0}
  .portal-modern .page-head .btn{width:100%;min-height:44px}
  .portal-modern .suite-org-picker{grid-column:1/-1!important}
  .portal-modern .suite-org-picker select{min-height:44px!important}

  .portal-modern .stats,
  .portal-modern .suite-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .portal-modern .stat,
  .portal-modern .suite-metric{
    min-width:0;
    padding:14px!important;
    border-radius:13px!important;
  }
  .portal-modern .stat strong,
  .portal-modern .suite-metric strong{font-size:1.45rem!important}

  .portal-modern .cards{grid-template-columns:1fr!important;gap:10px}
  .portal-modern .card{padding:14px;border-radius:14px}
  .portal-modern .panel{border-radius:14px}
  .portal-modern .panel-head{
    align-items:flex-start;
    gap:10px;
    padding:14px;
  }
  .portal-modern .panel-body{padding:14px}
  .portal-modern .panel-head>div:last-child{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:6px;
  }
  .portal-modern .suite-grid,
  .portal-modern .grid-2,
  .portal-modern .field-grid,
  .portal-modern .check-list,
  .portal-modern .template-grid,
  .portal-modern .playlist-edit-row{grid-template-columns:1fr!important}
  .portal-modern .suite-list{grid-template-columns:1fr!important}
  .portal-modern .suite-row{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .portal-modern .suite-row>div:last-child{width:100%}
  .portal-modern .suite-row .btn{min-height:40px}

  .portal-modern .table-wrap{
    margin:0 -1px;
    overflow-x:auto;
    scrollbar-width:thin;
  }
  .portal-modern table{min-width:680px}
  .portal-modern th,.portal-modern td{padding:11px 13px}

  .portal-modern input,
  .portal-modern select,
  .portal-modern textarea{
    font-size:16px!important;
  }
  .portal-modern button,
  .portal-modern .btn{
    touch-action:manipulation;
  }

  .modal-backdrop{
    align-items:flex-end!important;
    padding:0!important;
  }
  .modal{
    width:100%!important;
    max-width:none!important;
    max-height:92dvh!important;
    border-radius:24px 24px 0 0!important;
    border-bottom:0!important;
  }
  .modal-head{
    position:sticky;
    top:0;
    z-index:2;
    padding:16px 16px 13px!important;
    background:#0c1828;
  }
  .modal-body{padding:16px!important}
  .modal-actions{
    position:sticky;
    bottom:0;
    z-index:2;
    margin:18px -16px -16px!important;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
    background:#0c1828;
  }
  .modal-actions .btn{flex:1;min-height:46px}
  .modal-designer{
    height:94dvh!important;
    border-radius:20px 20px 0 0!important;
  }

  .toast-stack{
    left:10px!important;
    right:10px!important;
    bottom:calc(86px + env(safe-area-inset-bottom))!important;
  }
  .toast{width:100%;min-width:0!important}

  .dm-mobile-nav{
    position:fixed;
    z-index:90;
    left:8px;
    right:8px;
    bottom:calc(7px + env(safe-area-inset-bottom));
    min-height:64px;
    display:flex;
    align-items:stretch;
    justify-content:space-around;
    gap:3px;
    padding:5px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:20px;
    background:rgba(29,41,57,.98);
    box-shadow:0 14px 38px rgba(0,0,0,.34);
    backdrop-filter:blur(18px);
  }
  .dm-mobile-nav-button{
    appearance:none;
    flex:1 1 0;
    min-width:0;
    border:0;
    border-radius:14px;
    background:transparent;
    color:#d0d5dd;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    font:750 9px/1.05 inherit;
    cursor:pointer;
  }
  .dm-mobile-nav-button.active{
    background:#fff;
    color:#101828;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
  }
  .dm-mobile-nav-icon{
    display:grid;
    place-items:center;
    min-height:24px;
    font-size:20px;
    line-height:1;
  }
  .dm-mobile-nav-label{
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:center;
  }

  .dm-mobile-sheet-backdrop{
    position:fixed;
    z-index:110;
    inset:0;
    display:flex;
    align-items:flex-end;
    background:rgba(16,24,40,.55);
    backdrop-filter:blur(3px);
  }
  .dm-mobile-sheet-backdrop[hidden]{display:none!important}
  .dm-mobile-sheet{
    width:100%;
    max-height:86dvh;
    overflow:auto;
    padding:8px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius:26px 26px 0 0;
    background:#fff;
    color:#101828;
    box-shadow:0 -20px 60px rgba(16,24,40,.28);
  }
  .dm-mobile-sheet-handle{
    width:38px;
    height:4px;
    margin:0 auto 12px;
    border-radius:999px;
    background:#d0d5dd;
  }
  .dm-mobile-sheet-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:13px;
  }
  .dm-mobile-sheet-account{display:grid;gap:2px;min-width:0}
  .dm-mobile-sheet-account small{color:#667085;font-size:9px}
  .dm-mobile-sheet-account strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:15px;
  }
  .dm-mobile-sheet-close{
    flex:0 0 auto;
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    background:#f2f4f7;
    color:#344054;
    font-size:23px;
  }
  .dm-mobile-sheet-group+.dm-mobile-sheet-group{margin-top:14px}
  .dm-mobile-sheet-title{
    margin:0 0 7px;
    color:#667085;
    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  .dm-mobile-sheet-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .dm-mobile-sheet-item{
    min-width:0;
    min-height:58px;
    padding:8px 11px;
    border:1px solid #e4e7ec;
    border-radius:13px;
    background:#fff;
    color:#344054;
    display:flex;
    align-items:center;
    gap:9px;
    text-align:left;
    font:750 11px/1.15 inherit;
  }
  .dm-mobile-sheet-item.active{
    border-color:#b8cbe0;
    background:#eef4fa;
    color:#0b2b55;
  }
  .dm-mobile-sheet-item .dm-shell-menu-icon{
    flex:0 0 auto;
  }
  .dm-mobile-sheet-utilities{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid #eef2f6;
  }
  .dm-mobile-sheet-utility{
    min-height:44px;
    border:0;
    border-radius:12px;
    background:#f2f4f7;
    color:#475467;
    font:800 11px/1 inherit;
  }
  .dm-mobile-sheet-utility.danger{color:#b42318;background:#fff1f0}
}

@media(max-width:480px){
  .portal-modern .sidebar .brand-logo{max-width:122px!important}
  .portal-modern .sidebar .brand-product{font-size:.58rem;padding:3px 6px}
  .portal-modern .stats,
  .portal-modern .suite-metrics{grid-template-columns:1fr 1fr!important}
  .portal-modern .page-head .top-actions{grid-template-columns:1fr!important}
  .dm-mobile-sheet-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:360px){
  .portal-modern .sidebar .brand-product{display:none!important}
  .dm-mobile-nav-button{font-size:8px}
}

/* v0.8 control-centre redesign
   Light HostedTable-style workspace with DM Digital navy navigation. */
.portal-modern{
  --bg:#f4f7fa;
  --panel:#ffffff;
  --panel-2:#f7f9fc;
  --text:#182230;
  --muted:#667085;
  --line:#dce3eb;
  --accent:#16816f;
  --accent-2:#1476a8;
  --success:#17875f;
  --danger:#c63b4c;
  color:var(--text)!important;
  background:#f4f7fa!important;
  background-image:
    radial-gradient(circle at 8% 0,rgba(35,114,160,.07),transparent 30rem),
    linear-gradient(#f8fafc,#f4f7fa 24rem)!important;
}
.portal-modern .main{background:transparent!important}
.portal-modern .topbar{
  top:var(--dm-shell-header)!important;
  height:var(--dm-shell-toolbar)!important;
  border-bottom:1px solid #dfe5ec!important;
  background:rgba(255,255,255,.94)!important;
  color:#182230!important;
  box-shadow:0 1px 0 rgba(16,24,40,.02)!important;
  backdrop-filter:blur(14px)!important;
}
.portal-modern .topbar h1{
  color:#344054!important;
  font-weight:850!important;
  letter-spacing:-.01em;
}
.portal-modern .content{
  max-width:1560px!important;
  padding:26px clamp(16px,2.6vw,38px) 46px!important;
}
.portal-modern .page-head h2,
.portal-modern .panel h3,
.portal-modern .card h3{color:#182230!important}
.portal-modern .page-head p,
.portal-modern .muted{color:#667085!important}

.portal-modern .panel,
.portal-modern .card,
.portal-modern .stat,
.portal-modern .suite-metric,
.portal-modern .ux-item,
.portal-modern .ux-zone-card{
  border:1px solid #e0e6ed!important;
  background:#fff!important;
  color:#182230!important;
  box-shadow:0 1px 2px rgba(16,24,40,.035),0 8px 24px rgba(16,24,40,.045)!important;
}
.portal-modern .panel,
.portal-modern .card{border-radius:15px!important}
.portal-modern .panel-head{
  border-bottom:1px solid #edf0f4!important;
  background:linear-gradient(180deg,#fff,#fcfdff)!important;
}
.portal-modern .panel-body{color:#344054}
.portal-modern .empty{
  border-color:#d9e1ea!important;
  background:#f8fafc!important;
  color:#7b8797!important;
}
.portal-modern .pill,
.portal-modern .tag{
  border-color:#d9e2eb!important;
  background:#f5f8fb!important;
  color:#475467!important;
}
.portal-modern .status{color:#475467!important}
.portal-modern .status.online{color:#147a57!important}
.portal-modern .status.offline{color:#b42318!important}

.portal-modern .btn{
  border-radius:9px!important;
  font-weight:800!important;
  box-shadow:none!important;
}
.portal-modern .btn-primary{
  border-color:#176e63!important;
  background:linear-gradient(180deg,#1e8c79,#177665)!important;
  color:#fff!important;
  text-shadow:0 1px 0 rgba(0,0,0,.08);
}
.portal-modern .btn-primary:hover{background:linear-gradient(180deg,#238f7d,#126959)!important}
.portal-modern .btn-ghost,
.portal-modern .btn:not(.btn-primary):not(.btn-danger){
  border-color:#d3dce6!important;
  background:#fff!important;
  color:#344054!important;
}
.portal-modern .btn-ghost:hover,
.portal-modern .btn:not(.btn-primary):not(.btn-danger):hover{
  border-color:#b9c6d3!important;
  background:#f7f9fb!important;
}
.portal-modern .btn-danger{
  border-color:#f2c5ca!important;
  background:#fff3f4!important;
  color:#b4233c!important;
}
.portal-modern .btn-danger:hover{background:#ffe8ea!important}

.portal-modern .field label,
.portal-modern label.field,
.portal-modern .ux-grid label{
  color:#475467!important;
  font-weight:750!important;
}
.portal-modern input,
.portal-modern select,
.portal-modern textarea{
  border:1px solid #cfd8e3!important;
  background:#fff!important;
  color:#182230!important;
  border-radius:9px!important;
  box-shadow:0 1px 2px rgba(16,24,40,.025)!important;
}
.portal-modern input:focus,
.portal-modern select:focus,
.portal-modern textarea:focus{
  border-color:#66a6c8!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(20,118,168,.11)!important;
}
.portal-modern input[type="color"]{padding:4px!important}
.portal-modern .check,
.portal-modern .check-item{
  border-color:#e0e6ed!important;
  background:#f8fafc!important;
  color:#344054!important;
}
.portal-modern code{
  border-radius:6px;
  background:#eef2f6;
  color:#344054;
}

.portal-modern table{background:#fff!important}
.portal-modern th{
  position:sticky;
  top:0;
  z-index:1;
  border-bottom-color:#e2e8ef!important;
  background:#f6f8fb!important;
  color:#667085!important;
}
.portal-modern td{
  border-bottom-color:#edf1f5!important;
  color:#344054!important;
}
.portal-modern tbody tr:hover td{background:#fbfcfe!important}

/* Overview becomes a command-centre rather than a collection of legacy cards. */
.dm-dashboard-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  margin-bottom:16px;
  padding:25px 27px;
  overflow:hidden;
  border:1px solid #163d68;
  border-radius:18px;
  background:
    radial-gradient(circle at 82% -40%,rgba(73,190,178,.32),transparent 46%),
    linear-gradient(125deg,#071735 0%,#0b2c56 64%,#123e67 100%);
  color:#fff;
  box-shadow:0 16px 38px rgba(7,23,53,.16);
}
.dm-dashboard-hero-copy{min-width:0}
.dm-eyebrow{
  display:block;
  margin-bottom:8px;
  color:#8eddd2;
  font-size:10px;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.dm-dashboard-hero h2{
  margin:0!important;
  color:#fff!important;
  font-size:clamp(1.7rem,3vw,2.45rem)!important;
  letter-spacing:-.045em!important;
}
.dm-dashboard-hero p{
  max-width:720px;
  margin:8px 0 15px;
  color:#d4deea;
  line-height:1.5;
}
.dm-hero-status{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px 10px;
  color:#c6d3e0;
  font-size:12px;
}
.dm-hero-status strong{color:#fff}
.dm-live-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#56d6a0;
  box-shadow:0 0 0 5px rgba(86,214,160,.13);
}
.dm-dashboard-actions{
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  max-width:400px;
}
.dm-dashboard-hero .btn-primary{
  border-color:#fff!important;
  background:#fff!important;
  color:#0b2b55!important;
}
.dm-dashboard-hero .btn-ghost{
  border-color:rgba(255,255,255,.2)!important;
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
}
.dm-dashboard-hero .btn-danger{
  border-color:rgba(255,180,190,.26)!important;
  background:rgba(153,27,45,.32)!important;
  color:#fff!important;
}

.dm-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;
  margin-bottom:16px;
}
.dm-kpi{
  appearance:none;
  min-width:0;
  min-height:112px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:15px;
  border:1px solid #e0e6ed;
  border-radius:14px;
  background:#fff;
  color:#182230;
  text-align:left;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(16,24,40,.025);
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease;
}
.dm-kpi:hover{
  transform:translateY(-1px);
  border-color:#c8d5e2;
  box-shadow:0 8px 24px rgba(16,24,40,.07);
}
.dm-kpi-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:11px;
  background:#edf5f8;
  color:#176b86;
  font-size:21px;
}
.dm-kpi>span:last-child{min-width:0;display:grid;gap:2px}
.dm-kpi small{
  color:#667085;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.dm-kpi strong{
  color:#182230;
  font-size:1.65rem;
  line-height:1.05;
  letter-spacing:-.04em;
}
.dm-kpi strong b{
  margin-left:2px;
  color:#98a2b3;
  font-size:.9rem;
  font-weight:750;
}
.dm-kpi em{
  overflow:hidden;
  color:#7a8696;
  font-size:10px;
  font-style:normal;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dm-kpi em.good{color:#147a57}
.dm-kpi em.warn{color:#b45d12}

.dm-dashboard-grid{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);
  align-items:start;
  gap:14px;
}
.dm-dashboard-stack{display:grid;gap:14px}
.dm-panel-kicker{
  display:block;
  margin-bottom:3px;
  color:#7a8696;
  font-size:9px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.dm-health-panel .table-wrap{border-radius:0 0 15px 15px!important}
.dm-status-list{display:grid;gap:7px}
.dm-status-list>button{
  appearance:none;
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:0;
  border-radius:10px;
  background:#f8fafc;
  color:#344054;
  cursor:pointer;
  text-align:left;
}
.dm-status-list>button:hover{background:#f1f5f9}
.dm-status-list>button>span{min-width:0;display:flex;align-items:center;gap:9px}
.dm-status-list b{font-size:12px}
.dm-status-list>button>strong{font-size:16px}
.dm-status-icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:28px;
  height:28px;
  border-radius:8px;
  background:#eaf1f7;
  color:#3b647d;
  font-style:normal;
  font-size:12px;
}
.dm-status-icon.good{background:#e8f7f0;color:#147a57}
.dm-status-icon.warn{background:#fff3e5;color:#b45d12}
.dm-quick-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.dm-quick-grid>button{
  appearance:none;
  min-width:0;
  min-height:95px;
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  align-content:center;
  align-items:center;
  gap:1px 9px;
  padding:11px;
  border:1px solid #e2e7ed;
  border-radius:11px;
  background:#fff;
  color:#344054;
  text-align:left;
  cursor:pointer;
}
.dm-quick-grid>button:hover{border-color:#becbd8;background:#f9fbfc}
.dm-quick-grid>button>span{
  grid-row:1/3;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:9px;
  background:#edf5f8;
  color:#176b86;
  font-size:16px;
}
.dm-quick-grid b{font-size:11px}
.dm-quick-grid small{
  min-width:0;
  overflow:hidden;
  color:#7a8696;
  font-size:9px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Playlist studio / zone editor */
.portal-modern .ux-toolbar{
  border-color:#e0e6ed!important;
  background:#f8fafc!important;
}
.portal-modern .ux-note{
  border-color:#dce6ef!important;
  background:#f4f8fb!important;
  color:#536274!important;
}
.portal-modern .ux-item{
  border-radius:13px!important;
}
.portal-modern .ux-thumb{
  border:1px solid #e1e7ee;
  background:#eef2f6!important;
  color:#667085!important;
}
.portal-modern .ux-drag{color:#8a96a5!important}
.portal-modern .ux-zones{
  margin-top:16px;
  overflow:hidden;
}
.portal-modern .ux-zone-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))!important;
  gap:11px!important;
}
.portal-modern .ux-zone-card{
  min-width:0;
  padding:14px!important;
  border-radius:13px!important;
  box-shadow:none!important;
}
.portal-modern .ux-zone-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.portal-modern .ux-zone-title>div{display:grid;gap:2px;min-width:0}
.portal-modern .ux-zone-title small{
  color:#7a8696;
  font-size:9px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.portal-modern .ux-zone-title strong{
  overflow:hidden;
  color:#182230;
  font-size:14px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.portal-modern .ux-zone-title>span{
  flex:0 0 auto;
  color:#7a8696;
  font-size:9px;
}
.portal-modern .ux-zone-checks{
  max-height:190px!important;
  padding:5px;
  border:1px solid #e1e7ee;
  border-radius:9px;
  background:#f8fafc;
}
.portal-modern .ux-zone-save{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding-top:2px;
}

/* Global dialogs follow the same light control-centre language. */
.modal-backdrop{
  background:rgba(8,20,38,.56)!important;
  backdrop-filter:blur(4px);
}
.modal{
  border:1px solid #d8e0e9!important;
  background:#fff!important;
  color:#182230!important;
  box-shadow:0 26px 70px rgba(5,20,40,.24)!important;
}
.modal-head{
  border-bottom:1px solid #e5eaf0!important;
  background:#fff!important;
  color:#182230!important;
}
.modal-head h3{color:#182230!important}
.modal-body{
  background:#fff!important;
  color:#344054!important;
}
.modal-body .field label{color:#475467!important}
.modal-body input,
.modal-body select,
.modal-body textarea{
  border:1px solid #cfd8e3!important;
  background:#fff!important;
  color:#182230!important;
}
.modal-body .muted{color:#667085!important}
.modal-body .check,
.modal-body .check-item{
  border-color:#e0e6ed!important;
  background:#f8fafc!important;
  color:#344054!important;
}
.modal-actions{
  border-top-color:#e7ebf0!important;
  background:#fff!important;
}
.modal .close{color:#667085!important}
.toast{
  border-color:#d8e0e9!important;
  background:#fff!important;
  color:#182230!important;
  box-shadow:0 12px 38px rgba(16,24,40,.18)!important;
}
.toast.error{border-color:#efb9c0!important;color:#a71d34!important}

@media(max-width:1120px){
  .dm-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dm-dashboard-grid{grid-template-columns:1fr}
  .dm-dashboard-stack{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .portal-modern .topbar{top:var(--dm-shell-header)!important}
  .portal-modern .content{padding:15px 12px calc(104px + env(safe-area-inset-bottom))!important}
  .dm-dashboard-hero{
    display:grid;
    gap:17px;
    padding:20px 17px;
    border-radius:15px;
  }
  .dm-dashboard-actions{
    max-width:none;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    justify-content:stretch;
  }
  .dm-dashboard-actions .btn{width:100%}
  .dm-dashboard-actions .btn-danger:last-child:nth-child(3){grid-column:1/-1}
  .dm-dashboard-stack{grid-template-columns:1fr}
  .portal-modern .ux-zone-grid{grid-template-columns:1fr!important}
  .portal-modern .ux-zone-save{align-items:stretch;flex-direction:column}
  .portal-modern .ux-zone-save .btn{width:100%}
  .modal-head{background:#fff!important}
  .modal-actions{background:#fff!important}
}
@media(max-width:700px){
  .dm-kpi-grid{grid-template-columns:1fr 1fr;gap:8px}
  .dm-kpi{min-height:102px;grid-template-columns:36px minmax(0,1fr);gap:9px;padding:12px}
  .dm-kpi-icon{width:36px;height:36px;font-size:17px}
  .dm-kpi strong{font-size:1.4rem}
  .dm-quick-grid{grid-template-columns:1fr 1fr}

  /* Tables turn into labelled cards instead of forcing horizontal scrolling. */
  .portal-modern .table-wrap{overflow:visible!important;margin:0!important}
  .portal-modern table,
  .portal-modern tbody{display:block!important;width:100%!important;min-width:0!important}
  .portal-modern thead{display:none!important}
  .portal-modern tbody{padding:9px}
  .portal-modern tbody tr{
    display:block!important;
    margin:0 0 8px;
    overflow:hidden;
    border:1px solid #e0e6ed;
    border-radius:11px;
    background:#fff;
  }
  .portal-modern tbody tr:last-child{margin-bottom:0}
  .portal-modern tbody td{
    display:grid!important;
    grid-template-columns:minmax(90px,.38fr) minmax(0,1fr);
    align-items:start;
    gap:10px;
    width:100%!important;
    padding:9px 11px!important;
    border:0!important;
    border-bottom:1px solid #eef1f4!important;
    background:#fff!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
  }
  .portal-modern tbody td:last-child{border-bottom:0!important}
  .portal-modern tbody td:before{
    content:attr(data-label);
    color:#7a8696;
    font-size:9px;
    font-weight:850;
    letter-spacing:.045em;
    text-transform:uppercase;
  }
  .portal-modern tbody td:empty{display:none!important}
}
@media(max-width:480px){
  .dm-dashboard-hero p{font-size:12px}
  .dm-hero-status{font-size:10px}
  .dm-dashboard-actions{grid-template-columns:1fr}
  .dm-dashboard-actions .btn-danger:last-child:nth-child(3){grid-column:auto}
  .dm-kpi-grid{grid-template-columns:1fr 1fr!important}
  .dm-kpi{
    min-height:94px;
    display:block;
    padding:11px!important;
  }
  .dm-kpi-icon{width:29px;height:29px;margin-bottom:8px;font-size:14px}
  .dm-kpi small{font-size:8px}
  .dm-kpi strong{font-size:1.28rem}
  .dm-kpi em{font-size:8px}
  .dm-quick-grid{grid-template-columns:1fr 1fr}
  .portal-modern tbody td{grid-template-columns:82px minmax(0,1fr)}
}


/* v0.8 alpha.6 accessibility + colour refresh
   High-contrast light workspace with DM Digital navy/teal accents. */
.portal-modern{
  color-scheme:light;
  --bg:#eef3f8;
  --panel:#ffffff;
  --panel-2:#f6f9fc;
  --text:#142033;
  --muted:#526276;
  --line:#cfd9e4;
  --accent:#0f766e;
  --accent-2:#0b6f9c;
  --success:#067647;
  --warning:#a15c07;
  --danger:#b42335;
  background:#eef3f8!important;
  background-image:
    radial-gradient(circle at 8% 0,rgba(14,116,144,.09),transparent 30rem),
    linear-gradient(180deg,#f8fafc 0,#eef3f8 22rem)!important;
  color:#142033!important;
}
.portal-modern .content{color:#142033!important}
.portal-modern .page-head h2,
.portal-modern .panel h3,
.portal-modern .card h3,
.portal-modern strong{color:#142033}
.portal-modern .page-head p,
.portal-modern .muted,
.portal-modern .small{color:#526276!important}
.portal-modern .card p{color:#526276!important}
.portal-modern .card,
.portal-modern .panel,
.portal-modern .stat,
.portal-modern .suite-metric{
  border-color:#d6e0ea!important;
  background:#fff!important;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 28px rgba(15,23,42,.055)!important;
}
.portal-modern .card:hover{border-color:#bdcbd9!important}
.portal-modern .panel-head{
  border-bottom-color:#e3e9f0!important;
  background:#fbfcfe!important;
}
.portal-modern .topbar{
  border-bottom-color:#d7e0e9!important;
  background:rgba(255,255,255,.97)!important;
}
.portal-modern .topbar h1{color:#26364a!important}

/* Readable device cards */
.portal-modern .device-grid{gap:9px}
.portal-modern .device-grid span{
  border:1px solid #c8d5e2!important;
  background:#f7fafc!important;
  color:#52657a!important;
  font-size:11px!important;
  font-weight:700;
}
.portal-modern .device-grid strong{
  color:#142033!important;
  font-size:12px!important;
  font-weight:850!important;
}
.portal-modern .card .small{color:#526276!important}
.portal-modern .pill,
.portal-modern .tag{
  border-color:#cad6e2!important;
  background:#f3f7fb!important;
  color:#33465c!important;
  font-weight:750;
}
.portal-modern .warn-pill{
  border-color:#e7c88d!important;
  background:#fff8e8!important;
  color:#8a4b04!important;
}
.portal-modern .good-pill{
  border-color:#abd8c4!important;
  background:#edf9f3!important;
  color:#05603a!important;
}
.portal-modern .status{color:#33465c!important;font-weight:850!important}
.portal-modern .status.online{color:#067647!important}
.portal-modern .status.offline{color:#b42335!important}

/* Forms, buttons and selectable controls */
.portal-modern input,
.portal-modern select,
.portal-modern textarea{
  border:1px solid #bccbd9!important;
  background:#fff!important;
  color:#142033!important;
}
.portal-modern input::placeholder,
.portal-modern textarea::placeholder{color:#77879a!important}
.portal-modern input:focus,
.portal-modern select:focus,
.portal-modern textarea:focus{
  border-color:#0b7aa6!important;
  box-shadow:0 0 0 3px rgba(11,122,166,.13)!important;
}
.portal-modern .field label,
.portal-modern label.field,
.portal-modern .playlist-edit-row label{color:#33465c!important}
.portal-modern .btn-primary{
  border-color:#0b665f!important;
  background:linear-gradient(180deg,#138276,#0d6f66)!important;
  color:#fff!important;
}
.portal-modern .btn-primary:hover{background:linear-gradient(180deg,#0f766e,#0a625b)!important}
.portal-modern .btn-ghost,
.portal-modern .btn:not(.btn-primary):not(.btn-danger){
  border-color:#becbd8!important;
  background:#fff!important;
  color:#26384e!important;
}
.portal-modern .btn-ghost:hover,
.portal-modern .btn:not(.btn-primary):not(.btn-danger):hover{
  border-color:#96aabc!important;
  background:#f4f7fa!important;
  color:#10233a!important;
}
.portal-modern .btn-danger{
  border-color:#e8b6bd!important;
  background:#fff2f3!important;
  color:#a7192f!important;
}

/* Tables and suite surfaces */
.portal-modern table{color:#26384e!important}
.portal-modern th{
  border-bottom-color:#d9e2eb!important;
  background:#f3f6fa!important;
  color:#526276!important;
}
.portal-modern td{border-bottom-color:#e6ebf1!important;color:#26384e!important}
.portal-modern tbody tr:hover td{background:#f9fbfd!important}
.portal-modern .suite-metric span{color:#526276!important}
.portal-modern .suite-metric strong{color:#142033!important}
.portal-modern .suite-row{border-bottom-color:#e0e7ee!important}
.portal-modern .suite-row span,
.portal-modern .suite-row small{color:#526276!important}
.portal-modern .suite-list div{
  border-color:#d4dee8!important;
  background:#f8fafc!important;
}
.portal-modern .suite-list span{color:#526276!important}
.portal-modern .suite-list strong{color:#142033!important}
.portal-modern .check-list .check,
.portal-modern .check-item,
.portal-modern .day-check{
  border-color:#ced9e4!important;
  background:#f8fafc!important;
  color:#26384e!important;
}
.portal-modern .check-list small{color:#5d6e82!important}
.portal-modern .playlist-edit-row{border-bottom-color:#e0e7ee!important}
.portal-modern .playlist-edit-row .check{color:#142033!important}
.portal-modern .playlist-edit-row .check span{color:#526276!important}
.portal-modern .fit-help{
  border-color:#c9d6e2!important;
  background:#f4f8fb!important;
  color:#40546a!important;
}
.portal-modern code{
  border-color:#cad6e2!important;
  background:#f3f6fa!important;
  color:#0b5f84!important;
}

/* Keep editing/design canvases deliberately dark while making their controls legible. */
.portal-modern .layout-mini,
.portal-modern .designer-stage-wrap,
.portal-modern .designer-stage{color:#eef6ff}
.portal-modern .designer-inspector{
  border-color:#d4dee8!important;
  background:#f8fafc!important;
  color:#26384e!important;
}
.portal-modern .suite-kicker{color:#0b6f9c!important}
.portal-modern .suite-org-picker{color:#40546a!important}

/* Stronger navigation contrast without losing the DM Digital navy identity. */
.portal-modern .sidebar{
  background:linear-gradient(90deg,#06152f 0%,#0a2b55 58%,#082344 100%)!important;
}
.portal-modern .nav>button{color:#d9e5f2!important}
.portal-modern .nav>button:hover{background:rgba(255,255,255,.11)!important;color:#fff!important}
.portal-modern .nav>button.active{
  background:#16497d!important;
  color:#fff!important;
  box-shadow:inset 0 -3px 0 #59d5ef!important;
}
.portal-modern .user-chip span{color:#c3d3e5!important}
.dm-desktop-more-button{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.10)}
.dm-desktop-more-button:hover,.dm-desktop-more-button.active{background:rgba(255,255,255,.18)}

@media(max-width:700px){
  .portal-modern tbody tr{border-color:#d5dfe9!important}
  .portal-modern tbody td{border-bottom-color:#e4eaf0!important;color:#26384e!important}
  .portal-modern tbody td:before{color:#526276!important}
}


/* v0.8 alpha.7 navigation polish */
.portal-modern .sidebar{
  border-bottom:1px solid rgba(255,255,255,.12)!important;
  background:linear-gradient(90deg,#07182a 0%,#0b2948 58%,#0a2440 100%)!important;
  box-shadow:0 4px 16px rgba(6,24,42,.20)!important;
}
.portal-modern .nav>button{
  min-height:40px!important;
  padding:0 12px!important;
  border-radius:10px!important;
  color:#d7e3ef!important;
  font-weight:760!important;
  box-shadow:none!important;
}
.portal-modern .nav>button:hover{
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
}
.portal-modern .nav>button.active{
  background:#f8fbff!important;
  color:#0b2948!important;
  box-shadow:0 1px 2px rgba(2,12,27,.14),0 0 0 1px rgba(255,255,255,.28)!important;
}
.portal-modern .nav>button.active>span:first-child{color:#0f7490!important}
.portal-modern .brand-product{
  border-color:rgba(255,255,255,.20)!important;
  background:rgba(255,255,255,.09)!important;
  color:#e2edf7!important;
}
.dm-desktop-more-button{
  border-color:rgba(255,255,255,.20)!important;
  background:rgba(255,255,255,.08)!important;
  color:#f8fbff!important;
}
.dm-desktop-more-button:hover,
.dm-desktop-more-button.active{background:rgba(255,255,255,.15)!important}
.portal-modern .user-chip{
  border-color:rgba(255,255,255,.18)!important;
  background:rgba(255,255,255,.08)!important;
}
.portal-modern .user-chip strong{color:#fff!important}
.portal-modern .user-chip span{color:#c7d6e5!important}


/* v0.9 control-centre overhaul */
.portal-modern{
  --dm-workspace:#eef3f7;
  --dm-ink:#142236;
  --dm-copy:#42556c;
  --dm-border:#cfdae5;
  --dm-teal:#0f7c78;
  --dm-blue:#17658e;
}
.portal-modern .content{
  width:min(1720px,100%)!important;
  padding:26px clamp(18px,2.2vw,34px) 54px!important;
}
.portal-modern .sidebar{
  background:linear-gradient(90deg,#0a1d32 0%,#0c2946 58%,#0b243d 100%)!important;
  box-shadow:0 4px 14px rgba(6,19,34,.18)!important;
}
.portal-modern .nav>button{
  color:#d6e2ee!important;
  background:transparent!important;
}
.portal-modern .nav>button:hover{
  color:#fff!important;
  background:rgba(255,255,255,.08)!important;
}
.portal-modern .nav>button.active{
  color:#fff!important;
  background:rgba(25,112,139,.28)!important;
  box-shadow:inset 0 -3px 0 #5fd2d2!important;
}
.portal-modern .nav>button.active>span:first-child{color:#8ce3e0!important}
.dm-desktop-more-button{
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(255,255,255,.16)!important;
}
.dm-desktop-more-button.active{
  background:rgba(25,112,139,.28)!important;
  box-shadow:inset 0 -3px 0 #5fd2d2!important;
}
.portal-modern .user-chip{background:rgba(255,255,255,.06)!important}
.portal-modern .topbar{
  min-height:54px!important;
  background:#fff!important;
  border-bottom:1px solid #d9e2ea!important;
}
.portal-modern .topbar h1{color:#21334a!important}

.dm-page-head{
  align-items:center!important;
  margin-bottom:18px!important;
  padding:2px 0 0!important;
}
.dm-page-head>div:first-child{max-width:880px}
.dm-page-head .top-actions{
  flex:0 0 auto;
  justify-content:flex-end;
}
.dm-page-eyebrow{
  display:block;
  margin-bottom:5px;
  color:#0e6b86;
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.dm-page-head h2{
  margin:0!important;
  color:#142236!important;
}
.dm-page-head p{
  margin-top:6px!important;
  color:#52657b!important;
}

.dm-page-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:0 0 18px;
}
.dm-page-metric{
  min-width:0;
  padding:14px 15px;
  border:1px solid #d5e0e9;
  border-radius:13px;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.035);
}
.dm-page-metric span{
  display:block;
  margin-bottom:5px;
  color:#607186;
  font-size:9px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.dm-page-metric strong{
  display:block;
  color:#142236!important;
  font-size:1.55rem;
  line-height:1;
  letter-spacing:-.035em;
}
.dm-page-metric small{
  display:block;
  margin-top:5px;
  color:#68798d;
  font-size:10px;
}
.dm-page-metric.good{border-color:#b8dccb;background:#f7fcf9}
.dm-page-metric.good strong{color:#076b45!important}
.dm-page-metric.bad{border-color:#ecc5ca;background:#fff9f9}
.dm-page-metric.bad strong{color:#aa2338!important}

.dm-fleet-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:14px;
  align-items:start;
}
.dm-fleet-side{display:grid;gap:14px}
.dm-panel-toolbar{
  align-items:center!important;
  gap:16px;
}
.dm-filter-bar{
  display:flex;
  align-items:center;
  gap:8px;
}
.dm-filter-bar input{
  width:min(280px,28vw);
  min-height:36px!important;
}
.dm-filter-bar select{
  min-width:130px;
  min-height:36px!important;
}
.dm-fleet-table{min-width:980px!important}
.dm-fleet-table td{vertical-align:middle}
.dm-row-title{
  appearance:none;
  display:grid;
  gap:2px;
  padding:0;
  border:0;
  background:transparent;
  color:#142236;
  text-align:left;
  cursor:pointer;
}
.dm-row-title strong{font-size:12px}
.dm-row-title small,
.dm-table-sub{
  display:block;
  margin-top:2px;
  color:#68798d!important;
  font-size:9px;
  line-height:1.35;
}
.dm-row-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
}
.dm-row-actions .btn{min-height:32px!important}
.dm-attention-list,
.dm-mini-list{display:grid;gap:7px}
.dm-attention-list>button,
.dm-mini-list>button{
  appearance:none;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  padding:10px;
  border:1px solid #e0e7ee;
  border-radius:10px;
  background:#fafcfd;
  color:#26384e;
  text-align:left;
  cursor:pointer;
}
.dm-attention-list>button:hover,
.dm-mini-list>button:hover{border-color:#bfcddb;background:#f4f8fb}
.dm-attention-list>button>span,
.dm-mini-list>button>span:last-child{display:grid;gap:2px;min-width:0}
.dm-attention-list strong,
.dm-mini-list strong{font-size:11px!important}
.dm-attention-list small,
.dm-mini-list small{color:#68798d;font-size:9px}
.dm-attention-list b{color:#0d6b89;font-size:10px}
.status-dot{
  flex:0 0 auto;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#b42335;
}
.status-dot.online{background:#078653}
.dm-good-callout{
  display:grid;
  gap:4px;
  padding:13px;
  border:1px solid #b9dfcc;
  border-radius:10px;
  background:#f2fbf6;
}
.dm-good-callout strong{color:#076b45!important;font-size:12px}
.dm-good-callout span{color:#557064;font-size:10px}

.dm-resource-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:12px;
  align-items:stretch;
}
.dm-resource-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:15px!important;
}
.dm-resource-card .card-actions{margin-top:auto}
.dm-resource-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.dm-resource-head>div{min-width:0}
.dm-resource-head h3{
  overflow:hidden;
  margin:2px 0 0!important;
  font-size:15px!important;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dm-resource-type{
  color:#66798e;
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.dm-resource-meta{
  color:#68798d;
  font-size:9px;
}
.dm-card-actions{
  padding-top:4px;
  border-top:1px solid #edf1f5;
}
.dm-card-actions .btn-primary:first-child{margin-right:auto}
.dm-playlist-facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}
.dm-playlist-facts>span{
  min-width:0;
  padding:9px;
  border:1px solid #e1e8ef;
  border-radius:9px;
  background:#f8fafc;
}
.dm-playlist-facts strong{
  display:block;
  color:#17283d!important;
  font-size:14px;
}
.dm-playlist-facts small{
  color:#6a7c90;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.dm-chip-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 14px;
}
.dm-chip-row>span:first-child:not(.pill){
  margin-right:3px;
  color:#66798e;
  font-size:9px;
  font-weight:850;
  text-transform:uppercase;
}
.dm-chip-row.compact{margin:0}
.dm-media-grid .media-thumb{
  height:170px;
  margin:0;
  border:1px solid #d6e0e9;
  background:#0a1420;
}
.dm-media-web{
  color:#dce8f3;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
}
.dm-section-block{
  margin:0 0 22px;
  padding:0;
}
.dm-section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin:0 0 11px;
}
.dm-section-heading h3{
  margin:2px 0!important;
  color:#17283d!important;
  font-size:18px!important;
}
.dm-section-heading p{
  margin:0;
  color:#607287;
  font-size:11px;
}
.dm-design-preview{
  aspect-ratio:16/9;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid #1e4654;
  border-radius:11px;
  background:
    linear-gradient(135deg,rgba(44,183,176,.10),rgba(25,77,100,.12)),
    #0b2026;
  color:#8de5db;
  font-size:10px;
  font-weight:800;
}
.dm-design-preview.portrait{
  aspect-ratio:9/16;
  max-height:250px;
  width:auto;
  min-width:140px;
}
.dm-layout-grid .layout-mini{margin:0}
.dm-venue-grid .dm-playlist-facts{margin-top:1px}

.dm-detail-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:4px 0 14px;
}
.dm-detail-hero h3{
  margin:7px 0 2px!important;
  color:#142236!important;
  font-size:22px!important;
}
.dm-detail-hero p{margin:0;color:#607287}
.dm-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.dm-detail-grid>div{
  min-width:0;
  padding:12px;
  border:1px solid #dce5ed;
  border-radius:10px;
  background:#f8fafc;
}
.dm-detail-grid span{
  display:block;
  margin-bottom:4px;
  color:#68798d;
  font-size:8px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.dm-detail-grid strong{
  display:block;
  overflow-wrap:anywhere;
  color:#1d3046!important;
  font-size:11px;
}
.dm-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.dm-detail-actions{margin-top:14px!important}

@media(max-width:1180px){
  .dm-page-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dm-fleet-layout{grid-template-columns:1fr}
  .dm-fleet-side{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .dm-page-head{align-items:stretch!important}
  .dm-page-head .top-actions{width:100%;display:grid!important;grid-template-columns:1fr 1fr}
  .dm-page-metrics{grid-template-columns:1fr 1fr}
  .dm-fleet-side{grid-template-columns:1fr}
  .dm-filter-bar{width:100%;display:grid;grid-template-columns:1fr 130px}
  .dm-filter-bar input{width:100%}
  .dm-resource-grid{grid-template-columns:1fr}
  .dm-section-heading{align-items:flex-start;flex-direction:column}
  .dm-detail-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .dm-page-metrics{grid-template-columns:1fr 1fr}
  .dm-page-metric{padding:11px}
  .dm-page-metric strong{font-size:1.25rem}
  .dm-filter-bar{grid-template-columns:1fr}
  .dm-page-head .top-actions{grid-template-columns:1fr}
  .dm-playlist-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* v0.9 alpha.2 studio launch feedback */
.dm-studio-loading{z-index:1200!important}
.dm-loading-state{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:72px;
  color:#26384e;
}
.dm-loading-state>div{display:grid;gap:3px}
.dm-loading-state strong{color:#142236!important;font-size:13px}
.dm-loading-state span:last-child{color:#66798e;font-size:10px}
.dm-spinner{
  width:22px;
  height:22px;
  flex:0 0 auto;
  border:3px solid #d7e1ea;
  border-top-color:#0f7c78;
  border-radius:50%;
  animation:dm-spin .8s linear infinite;
}
@keyframes dm-spin{to{transform:rotate(360deg)}}