/* DotDen v2.5 UI foundation — shared Admin, portal, auth and access states. */
:root{
  --dd-app-bg:#f6f4fa;
  --dd-app-surface:#ffffff;
  --dd-app-surface-soft:#fbfaff;
  --dd-app-navy:#11162a;
  --dd-app-navy-2:#171d35;
  --dd-app-purple:#6f4af2;
  --dd-app-purple-deep:#5934d8;
  --dd-app-purple-soft:#eee9ff;
  --dd-app-blue:#315ee8;
  --dd-app-ink:#151a2d;
  --dd-app-muted:#697089;
  --dd-app-line:#e5e2ec;
  --dd-app-line-strong:#d8d2e3;
  --dd-app-green:#12845a;
  --dd-app-green-soft:#e9f7f1;
  --dd-app-amber:#a45d08;
  --dd-app-amber-soft:#fff3df;
  --dd-app-red:#b93846;
  --dd-app-red-soft:#fdecef;
  --dd-app-shadow:0 14px 38px rgba(31,24,66,.07);
  --dd-app-shadow-hover:0 20px 48px rgba(31,24,66,.12);
  --dd-app-radius:16px;
  --dd-app-radius-sm:11px;
}

.dd-icon{
  width:20px;
  height:20px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.skip-link{
  position:fixed;
  top:12px;
  left:12px;
  z-index:1000;
  padding:10px 14px;
  border-radius:9px;
  background:#fff;
  color:var(--dd-app-navy);
  box-shadow:var(--dd-app-shadow-hover);
  transform:translateY(-150%);
  transition:transform .16s ease;
}
.skip-link:focus{transform:translateY(0)}

.app-body{
  display:block;
  min-height:100vh;
  margin:0;
  background:
    radial-gradient(circle at 88% 0,rgba(111,74,242,.075),transparent 27rem),
    var(--dd-app-bg);
  color:var(--dd-app-ink);
}

.app-sidebar{
  position:fixed;
  inset:0 auto 0 0;
  z-index:90;
  width:278px;
  height:100vh;
  padding:24px 18px 18px;
  display:flex;
  flex-direction:column;
  color:#eef0ff;
  background:
    radial-gradient(circle at 15% 0,rgba(123,92,255,.24),transparent 19rem),
    linear-gradient(180deg,var(--dd-app-navy-2),var(--dd-app-navy));
  border-right:1px solid rgba(255,255,255,.055);
  box-shadow:12px 0 40px rgba(12,14,32,.10);
  overflow:hidden;
}

.sidebar-head{
  min-height:55px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 4px 25px;
}
.app-sidebar .sidebar-logo{
  margin:0;
  padding:0 8px;
  display:flex;
  align-items:center;
  gap:11px;
  color:#fff;
}
.app-sidebar .sidebar-logo .brand-wordmark{font-size:29px}
.app-sidebar .sidebar-logo>span:last-child{
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  color:#c9c9df;
  font-size:9px;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.app-nav-close{
  display:none;
  width:38px;
  height:38px;
  padding:9px;
  border:0;
  border-radius:10px;
  color:#fff;
  background:rgba(255,255,255,.08);
}
.sidebar-section-label{
  display:block;
  margin:0 13px 9px;
  color:#868da8;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.app-sidebar nav{
  min-height:0;
  display:grid;
  align-content:start;
  gap:3px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.15) transparent;
}
.app-sidebar nav a{
  min-height:45px;
  padding:9px 11px;
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  align-items:center;
  gap:10px;
  border:1px solid transparent;
  border-radius:11px;
  color:#bec4da;
  font-size:12.5px;
  font-weight:720;
  text-decoration:none;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.app-sidebar nav a:hover{
  color:#fff;
  background:rgba(255,255,255,.07);
  transform:translateX(2px);
}
.app-sidebar nav a.active{
  color:#fff;
  background:linear-gradient(135deg,rgba(126,92,255,.34),rgba(90,60,220,.20));
  border-color:rgba(170,149,255,.19);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 8px 24px rgba(0,0,0,.13);
}
.app-sidebar .nav-icon{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:9px;
  color:#919ab7;
  background:rgba(255,255,255,.045);
}
.app-sidebar .nav-icon .dd-icon{width:17px;height:17px}
.app-sidebar nav a:hover .nav-icon,
.app-sidebar nav a.active .nav-icon{
  color:#fff;
  background:rgba(255,255,255,.105);
}

.app-sidebar .sidebar-foot{
  margin-top:auto;
  padding:16px 4px 0;
  display:grid;
  gap:12px;
  border-top:1px solid rgba(255,255,255,.09);
  color:#d5d8e8;
}
.sidebar-user{
  min-width:0;
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:10px;
  align-items:center;
}
.sidebar-avatar{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#fff;
  background:linear-gradient(135deg,#8c6cff,#6040db);
  font-size:13px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(83,48,214,.28);
}
.sidebar-user strong,
.sidebar-user small{
  min-width:0;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sidebar-user strong{font-size:10.5px;color:#f0f1fa}
.sidebar-user small{margin-top:3px;color:#8189a5;font-size:9.5px}
.sidebar-signout{
  width:100%;
  min-height:38px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:10px;
  color:#d9dced!important;
  background:rgba(255,255,255,.035)!important;
  font-size:11px;
}
.sidebar-signout:hover{color:#fff!important;background:rgba(255,255,255,.085)!important}
.sidebar-signout .dd-icon{width:16px;height:16px}

.app-main{
  min-width:0;
  min-height:100vh;
  margin-left:278px;
  padding:29px clamp(24px,3.3vw,54px) 60px;
}
.app-top{
  min-height:78px;
  margin:0 0 24px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
}
.app-title-block{min-width:0}
.app-top .eyebrow{
  color:var(--dd-app-purple);
  font-size:9.5px;
  letter-spacing:.15em;
}
.app-top h1{
  margin:6px 0 0;
  color:var(--dd-app-ink);
  font-size:clamp(31px,3vw,44px);
  line-height:1.02;
  letter-spacing:-.045em;
}
.top-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  flex-wrap:wrap;
}
.top-global-search{
  width:min(440px,38vw);
  display:grid;
  grid-template-columns:minmax(180px,1fr) auto;
  align-items:center;
  padding:4px;
  border:1px solid var(--dd-app-line);
  border-radius:12px;
  background:rgba(255,255,255,.88);
  box-shadow:0 8px 24px rgba(31,24,66,.04);
}
.top-global-search input{
  width:100%;
  min-height:37px;
  padding:8px 11px;
  border:0!important;
  outline:0;
  background:transparent!important;
  box-shadow:none!important;
  font-size:12px;
}
.top-global-search .button{min-height:37px}
.app-content{min-width:0}

.app-mobile-bar,
.app-nav-backdrop{display:none}

.app-body .button{
  min-height:43px;
  gap:8px;
  padding:11px 16px;
  border-radius:10px;
  font-size:12px;
  font-weight:850;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease,border-color .14s ease;
}
.app-body .button:hover{transform:translateY(-1px)}
.app-body .button.primary{
  color:#fff;
  background:linear-gradient(135deg,var(--dd-app-purple),var(--dd-app-purple-deep));
  box-shadow:0 10px 22px rgba(92,57,215,.20);
}
.app-body .button.primary:hover{box-shadow:0 14px 28px rgba(92,57,215,.28)}
.app-body .button.secondary{
  color:#34344a;
  background:#fff;
  border-color:var(--dd-app-line-strong);
  box-shadow:0 5px 14px rgba(31,24,66,.035);
}
.app-body .button.secondary:hover{border-color:#bab1cc;background:#fcfbff}
.app-body .button.small{min-height:38px;padding:9px 13px}
.app-body .button.tiny{min-height:34px;padding:7px 10px;font-size:10.5px}
.app-body .button .dd-icon{width:16px;height:16px}

.app-body :is(input,select,textarea){
  border-color:var(--dd-app-line-strong);
  border-radius:10px;
  color:var(--dd-app-ink);
  background:#fff;
  transition:border-color .14s ease,box-shadow .14s ease,background .14s ease;
}
.app-body :is(input,select,textarea):focus{
  outline:0;
  border-color:#9279ef!important;
  box-shadow:0 0 0 4px rgba(111,74,242,.11);
}
.app-body :is(input,select,textarea)::placeholder{color:#9799aa}
.app-body label{color:#3e4358}

.app-body :is(.workspace-card,.admin-section,.plain-card,.detail-card,.provider-card,.portal-command){
  border-color:var(--dd-app-line);
  border-radius:var(--dd-app-radius);
  background:var(--dd-app-surface);
  box-shadow:var(--dd-app-shadow);
}
.app-body .workspace-card,
.app-body .admin-section{padding:23px}
.app-body :is(.workspace-card,.admin-section,.plain-card,.detail-card,.provider-card){
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.app-body a:is(.workspace-card,.plain-card,.detail-card,.provider-card):hover{
  border-color:#c9c0dd;
  box-shadow:var(--dd-app-shadow-hover);
  transform:translateY(-2px);
}
.app-body .section-row{margin-bottom:17px}
.app-body .section-row h2,
.app-body .workspace-card h2,
.app-body .admin-section h2{
  color:#20243a;
  letter-spacing:-.025em;
}
.app-body .eyebrow{color:var(--dd-app-purple)}

.app-body .metric{
  min-height:132px;
  padding:20px;
  border-color:var(--dd-app-line);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(31,24,66,.055);
}
.app-body .metric strong{font-size:32px;letter-spacing:-.04em}
.app-body .metric span{color:var(--dd-app-muted)}
.app-body .metric.blue,
.app-body .metric.orange,
.app-body .metric.green,
.app-body .metric.purple{border-top-width:3px}

.app-body .workspace-table{
  overflow:hidden;
  border:1px solid var(--dd-app-line);
  border-radius:12px;
  background:#fff;
}
.app-body .workspace-table-row{
  min-height:62px;
  border-color:var(--dd-app-line);
  transition:background .14s ease;
}
.app-body a.workspace-table-row:hover{background:#faf8ff}
.app-body .table-wrap{
  border:1px solid var(--dd-app-line);
  border-radius:12px;
  background:#fff;
}
.app-body table{background:#fff}
.app-body th{
  padding:11px 13px;
  color:#7a7f94;
  background:#faf9fc;
  border-color:var(--dd-app-line);
  font-size:9px;
}
.app-body td{padding:14px 13px;border-color:var(--dd-app-line)}
.app-body tbody tr:hover{background:#fcfbff}

.app-body .status{
  align-items:center;
  min-height:24px;
  padding:5px 9px;
  border-radius:999px;
  font-size:9px;
  letter-spacing:.015em;
}
.app-body .status.green{color:var(--dd-app-green);background:var(--dd-app-green-soft)}
.app-body .status.orange{color:var(--dd-app-amber);background:var(--dd-app-amber-soft)}
.app-body .status.red{color:var(--dd-app-red);background:var(--dd-app-red-soft)}
.app-body .status.blue{color:#2853c4;background:#eaf0ff}
.app-body .status.purple{color:#6040d2;background:var(--dd-app-purple-soft)}

.app-body .empty{
  min-height:118px;
  padding:30px;
  display:grid;
  place-items:center;
  text-align:center;
  border:1px dashed #cfc8da;
  border-radius:13px;
  color:#777c90;
  background:linear-gradient(135deg,#fdfcff,#f8f6fc);
}
.app-body .locked-note{
  padding:16px;
  border:1px solid #e2d9b7;
  border-radius:11px;
  color:#675b34;
  background:#fffaf0;
}

.app-body .flash{
  position:relative;
  max-width:none;
  min-height:50px;
  margin:0 0 20px;
  padding:13px 48px 13px 16px;
  display:flex;
  align-items:center;
  border:1px solid #d9d0fb;
  border-left:4px solid var(--dd-app-purple);
  border-radius:12px;
  color:#4e3b9e;
  background:#f3efff;
  box-shadow:0 8px 22px rgba(72,48,150,.06);
  transition:opacity .18s ease,transform .18s ease;
}
.app-body .flash.success{color:#176848;border-color:#c8eadc;border-left-color:var(--dd-app-green);background:var(--dd-app-green-soft)}
.app-body .flash.error{color:#922f3a;border-color:#f3cbd1;border-left-color:var(--dd-app-red);background:var(--dd-app-red-soft)}
.app-body .flash.is-leaving{opacity:0;transform:translateY(-5px)}
body:not(.app-body)>.flash{
  position:relative;
  padding-right:48px;
}
.flash-copy{font-size:12px;font-weight:760}
.flash-dismiss{
  position:absolute;
  top:8px;
  right:8px;
  width:34px;
  height:34px;
  padding:8px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:9px;
  color:currentColor;
  background:transparent;
}
.flash-dismiss:hover{background:rgba(0,0,0,.045)}
.flash-dismiss .dd-icon{width:16px;height:16px}

.app-body .subnav{
  gap:6px;
  padding:4px;
  border:1px solid var(--dd-app-line);
  border-radius:12px;
  background:#f7f5fa;
}
.app-body .subnav a{
  min-height:34px;
  padding:8px 11px;
  display:flex;
  align-items:center;
  border:0;
  border-radius:8px;
  background:transparent;
}
.app-body .subnav a.active{
  color:#5131c3;
  background:#fff;
  box-shadow:0 4px 13px rgba(31,24,66,.08);
}

.app-body .portal-hero{
  border-color:#ddd6e9;
  border-radius:18px;
  background:linear-gradient(125deg,#f1edff,#fbfaff 58%,#eef2ff);
  box-shadow:var(--dd-app-shadow);
}
.app-body .portal-command{
  padding:26px;
  border-radius:18px;
}
.app-body .portal-command-grid article{
  border-color:var(--dd-app-line);
  border-radius:12px;
  background:#fbfaff;
}
.app-body .portal-command-grid a{color:var(--dd-app-purple-deep)}
.app-body .portal-status{
  border-color:var(--dd-app-line);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(31,24,66,.045);
}
.app-body .action-panel{
  border-color:#d7cef8;
  border-left-color:var(--dd-app-purple);
  border-radius:14px;
  background:#f3efff;
}

.app-body :focus-visible,
.access-denied-body :focus-visible{
  outline:3px solid rgba(111,74,242,.34);
  outline-offset:3px;
}

/* Authentication inherits the newer surface treatment without altering auth logic. */
.area-auth .auth-wrap{
  background:
    radial-gradient(circle at 15% 12%,rgba(145,118,255,.35),transparent 24rem),
    radial-gradient(circle at 90% 90%,rgba(60,96,232,.22),transparent 28rem),
    linear-gradient(145deg,#171b35,#0e1225);
}
.area-auth .auth-card{
  padding:42px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:20px;
  box-shadow:0 34px 90px rgba(5,7,24,.34);
}
.area-auth .auth-card input{border-radius:10px}
.area-auth .auth-card .button{border-radius:10px}

/* Purpose-built 403 state: no technical explanation or leaked destination details. */
.access-denied-body{
  min-height:100vh;
  margin:0;
  display:grid;
  place-items:center;
  padding:28px;
  color:var(--dd-app-ink);
  background:
    radial-gradient(circle at 20% 15%,rgba(132,96,255,.24),transparent 24rem),
    radial-gradient(circle at 85% 85%,rgba(49,94,232,.18),transparent 26rem),
    linear-gradient(145deg,#151a31,#0c1021);
}
.access-denied-shell{width:min(520px,100%)}
.access-denied-logo{
  width:max-content;
  margin:0 auto 22px;
  display:block;
  color:#fff;
  text-decoration:none;
}
.access-denied-card{
  padding:50px 42px 42px;
  text-align:center;
  border:1px solid rgba(255,255,255,.55);
  border-radius:24px;
  background:rgba(255,255,255,.97);
  box-shadow:0 35px 100px rgba(2,5,20,.38);
}
.access-denied-mark{
  width:64px;
  height:64px;
  margin:0 auto 23px;
  display:grid;
  place-items:center;
  border-radius:20px;
  color:var(--dd-app-purple);
  background:var(--dd-app-purple-soft);
  box-shadow:inset 0 0 0 1px rgba(111,74,242,.08);
}
.access-denied-mark .dd-icon{width:29px;height:29px}
.access-denied-card h1{
  margin:0;
  color:#171a2d;
  font-size:clamp(34px,8vw,48px);
  line-height:1.02;
  letter-spacing:-.05em;
}
.access-denied-actions{
  margin-top:32px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.access-denied-actions form{margin:0}
.access-denied-actions .button{
  width:100%;
  min-height:48px;
  padding:12px 16px;
  border-radius:11px;
}
.access-denied-actions .button.primary{
  color:#fff;
  background:linear-gradient(135deg,var(--dd-app-purple),var(--dd-app-purple-deep));
  box-shadow:0 12px 25px rgba(92,57,215,.24);
}
.access-denied-actions .button.secondary{
  color:#313348;
  background:#fff;
  border:1px solid var(--dd-app-line-strong);
}

@media(max-width:1180px){
  .app-sidebar{width:254px}
  .app-main{margin-left:254px;padding-inline:28px}
  .top-global-search{width:330px}
}

@media(max-width:960px){
  .app-body{padding-top:64px}
  .app-mobile-bar{
    position:fixed;
    inset:0 0 auto;
    z-index:80;
    height:64px;
    padding:0 17px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--dd-app-line);
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(16px);
    box-shadow:0 8px 24px rgba(31,24,66,.06);
  }
  .app-nav-toggle{
    min-height:40px;
    padding:8px 11px;
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid var(--dd-app-line);
    border-radius:10px;
    color:#32354a;
    background:#fff;
    font-size:11px;
    font-weight:850;
  }
  .app-nav-toggle .dd-icon{width:18px;height:18px}
  .app-mobile-logo{color:var(--dd-app-purple);text-decoration:none}
  .app-sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(300px,86vw)!important;
    height:100vh!important;
    padding:22px 17px 17px!important;
    display:flex!important;
    transform:translateX(-105%);
    transition:transform .2s ease;
    box-shadow:22px 0 70px rgba(5,7,24,.34);
  }
  .app-nav-open .app-sidebar{transform:translateX(0)}
  .app-nav-open{overflow:hidden}
  .app-nav-close{display:grid;place-items:center}
  .app-nav-backdrop{
    position:fixed;
    inset:0;
    z-index:85;
    display:block;
    visibility:hidden;
    opacity:0;
    background:rgba(7,9,23,.55);
    backdrop-filter:blur(2px);
    transition:opacity .2s ease,visibility .2s ease;
  }
  .app-nav-open .app-nav-backdrop{visibility:visible;opacity:1}
  .app-sidebar .sidebar-logo,
  .app-sidebar .sidebar-foot{display:flex}
  .app-sidebar .sidebar-foot{display:grid}
  .app-sidebar nav{display:grid!important;overflow-y:auto!important}
  .app-sidebar nav a{white-space:normal;grid-template-columns:32px minmax(0,1fr)}
  .app-sidebar .nav-icon{display:grid}
  .app-main{
    min-height:calc(100vh - 64px);
    margin-left:0;
    padding:24px 19px 45px;
  }
  .app-top{
    margin:0 0 20px;
    padding:0;
    position:relative;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }
  .top-actions{width:100%;justify-content:flex-start}
  .top-global-search{width:100%}
}

@media(max-width:640px){
  .app-top h1{font-size:34px}
  .app-body .workspace-card,
  .app-body .admin-section{padding:18px}
  .top-actions>.button,
  .top-actions>form:not(.top-global-search){flex:1}
  .access-denied-body{padding:18px}
  .access-denied-card{padding:38px 22px 24px;border-radius:20px}
  .access-denied-actions{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}