:root{
  --layout-bg:#060914;
  --layout-card:#0e1426cc;
  --layout-line:#223257;
  --layout-text:#e7f0ff;
  --layout-muted:#93a9cf;
  --layout-accent:#38bdf8;
}
*{box-sizing:border-box}
img,svg,video,canvas{max-width:100%;height:auto}
body{
  margin:0;
  font-family:Arial,sans-serif;
  color:var(--layout-text);
  background:
    radial-gradient(900px 420px at 10% -10%, #1d4ed833 0%, transparent 60%),
    radial-gradient(900px 420px at 90% -20%, #7c3aed33 0%, transparent 60%),
    var(--layout-bg);
  overflow-x:hidden;
}
.app-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.app-shell__top{
  display:flex;
  flex:1;
  min-height:0;
  min-width:0;
}
.app-shell.no-sidebar .app-main-wrap{width:100%}
.app-sidebar{
  width:260px;flex:0 0 260px;border-right:1px solid var(--layout-line);
  background:#0a1224;position:sticky;top:0;height:100vh;padding:18px 14px;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.sidebar-brand{font-weight:700;margin-bottom:16px;color:#c8e5ff}
.sidebar-nav{display:flex;flex-direction:column;gap:6px}
.sidebar-nav a{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--layout-muted);text-decoration:none;padding:9px 10px;border-radius:8px;border:1px solid transparent;
}
.nav-icon{
  width:18px;
  text-align:center;
  flex:0 0 18px;
  opacity:.95;
}
.sidebar-nav a:hover,.sidebar-nav a.active{color:#fff;border-color:#2b3e6a;background:#121d38}
.sidebar-group{display:flex;flex-direction:column}
.sidebar-group-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:var(--layout-muted);
  background:transparent;
  border:1px solid transparent;
  border-radius:8px;
  padding:9px 10px;
  cursor:pointer;
  font:inherit;
  text-align:left;
}
.sidebar-toggle-main{
  display:flex;
  align-items:center;
  gap:8px;
}
.sidebar-group-toggle:hover,.sidebar-group-toggle.active{color:#fff;border-color:#2b3e6a;background:#121d38}
.sidebar-group-toggle:focus-visible{outline:2px solid #93c5fd;outline-offset:2px}
.sidebar-chevron{
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .2s ease;
  margin-right:2px;
}
.sidebar-group.open .sidebar-chevron{transform:rotate(225deg)}
.sidebar-submenu{
  margin:2px 0 8px 14px;
  padding-left:10px;
  border-left:1px solid #2b3e6a;
  display:flex;
  flex-direction:column;
  gap:4px;
  max-height:0;
  overflow:hidden;
  opacity:.7;
  transition:max-height .28s ease,opacity .2s ease,margin .2s ease;
}
.sidebar-group.open .sidebar-submenu{
  max-height:2000px;
  overflow:visible;
  opacity:1;
  margin-top:4px;
  padding-right:0;
}
.sidebar-submenu a{
  font-size:13px;
  padding:7px 8px;
  margin:2px 0;
}
.app-main-wrap{flex:1;display:flex;flex-direction:column;min-width:0}
.app-topbar{
  height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px;
  border-bottom:1px solid var(--layout-line);background:#0a1224cc;backdrop-filter:blur(4px);
}
.topbar-nav-toggle{
  display:none;flex:0 0 auto;align-items:center;justify-content:center;
  width:44px;height:44px;margin:0;padding:0;border:1px solid #2b3e6a;border-radius:10px;
  background:#121d38;color:var(--layout-text);cursor:pointer;
}
.topbar-nav-toggle:hover{background:#1a2848;border-color:#365cf5}
.topbar-nav-toggle:focus-visible{outline:2px solid #93c5fd;outline-offset:2px}
.topbar-nav-toggle-box{
  display:flex;flex-direction:column;justify-content:center;gap:5px;width:20px;height:14px;
}
.topbar-nav-toggle-line{
  display:block;height:2px;width:100%;border-radius:1px;background:currentColor;
  transition:transform .2s ease,opacity .2s ease;
}
.app-shell--nav-open .topbar-nav-toggle-line:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.app-shell--nav-open .topbar-nav-toggle-line:nth-child(2){opacity:0}
.app-shell--nav-open .topbar-nav-toggle-line:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}
.topbar-brand{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  line-height:0;
  border-radius:8px;
  text-decoration:none;
}
.topbar-brand:focus-visible{
  outline:2px solid #93c5fd;
  outline-offset:2px;
}
.topbar-brand__img{
  height:36px;
  width:auto;
  max-width:96px;
  object-fit:contain;
  display:block;
}
.topbar-title{font-weight:700;min-width:0;flex:1}
.app-nav-backdrop{
  display:none;
}
.sidebar-mobile-header{
  display:none;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;padding-bottom:12px;
  border-bottom:1px solid var(--layout-line);
}
.sidebar-mobile-title{font-weight:700;font-size:14px;color:var(--layout-text)}
.sidebar-close-btn{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;margin:0;
  border:1px solid #2b3e6a;border-radius:10px;background:#121d38;color:var(--layout-text);
  font-size:22px;line-height:1;cursor:pointer;
}
.sidebar-close-btn:hover{background:#1a2848}
.sidebar-close-btn:focus-visible{outline:2px solid #93c5fd;outline-offset:2px}
.topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.topbar-actions a{color:#9bd5ff;text-decoration:none}
.topbar-user-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#dbeafe;
  font-size:13px;
  border:1px solid #2b3e6a;
  background:#101a33;
  padding:5px 9px;
  border-radius:999px;
}
.topbar-user-chip img{
  width:20px;
  height:20px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid #365cf5;
}
.topbar-login-switch{
  display:flex;
  align-items:center;
  gap:8px;
}
.topbar-login-switch span{
  color:#93a9cf;
  font-size:13px;
}
.topbar-login-switch a{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border:1px solid #2b3e6a;
  border-radius:8px;
  background:#152a54;
  color:#e7f0ff;
}
.topbar-login-single{
  display:inline-flex;
  align-items:center;
  padding:5px 11px;
  border:1px solid #2b3e6a;
  border-radius:8px;
  background:#152a54;
  color:#e7f0ff;
  font-size:13px;
}
.app-content{flex:1;width:100%;padding:18px;overflow-x:hidden}
.app-content > *{max-width:100%}
.app-content input,
.app-content select,
.app-content textarea{
  max-width:100%;
  min-width:0;
}
.app-content table{
  max-width:100%;
}
.app-footer{
  border-top:1px solid var(--layout-line);
  padding:clamp(14px,3vw,22px) clamp(12px,4vw,28px) clamp(16px,3.5vw,24px);
  color:var(--layout-muted);
  background:linear-gradient(180deg, transparent 0%, rgba(6,9,20,.35) 100%);
  width:100%;
  flex-shrink:0;
  box-sizing:border-box;
}
.app-footer__inner{
  width:100%;
  max-width:min(1100px,100%);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-sizing:border-box;
}
.app-footer__top{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px 24px;
}
.app-footer__brand-block{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:min(100%, 220px);
}
.app-footer__brand{
  font-size:clamp(13px,2.4vw,15px);
  font-weight:700;
  letter-spacing:0.02em;
  color:var(--layout-text);
}
.app-footer__tagline{
  margin:0;
  font-size:clamp(11px,2.1vw,12px);
  line-height:1.4;
  color:var(--layout-muted);
  max-width:min(28rem,100%);
}
.app-footer__meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  text-align:right;
}
.app-footer__copyright{
  margin:0;
  font-size:12px;
  line-height:1.45;
  color:var(--layout-muted);
}
.app-footer__mail{
  font-size:13px;
  font-weight:600;
  color:var(--layout-accent);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease,color .15s ease;
}
.app-footer__mail:hover{
  color:#7dd3fc;
  border-bottom-color:rgba(56,189,248,.45);
}
.app-footer__legal{
  margin:0;
  padding-top:12px;
  border-top:1px solid rgba(34,50,87,.65);
  font-size:clamp(10px,2vw,11px);
  line-height:1.55;
  color:rgba(147,169,207,.88);
  max-width:min(75ch,100%);
}
.app-footer__legal a{
  color:var(--layout-accent);
  text-decoration:none;
  border-bottom:1px solid rgba(56,189,248,.35);
}
.app-footer__legal a:hover{
  color:#7dd3fc;
  border-bottom-color:rgba(125,211,252,.5);
}
@media (max-width: 900px){
  body.app-shell-nav-open{
    overflow:hidden;
  }
  .topbar-nav-toggle{display:inline-flex}
  .app-nav-backdrop{
    display:block;position:fixed;inset:0;z-index:998;margin:0;padding:0;border:0;border-radius:0;
    background:rgba(2,6,18,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .22s ease,visibility .22s ease;
  }
  .app-shell--nav-open .app-nav-backdrop{
    opacity:1;visibility:visible;pointer-events:auto;
  }
  .app-sidebar{
    position:fixed;top:0;left:0;width:min(300px,88vw);max-width:100%;height:100vh;height:100dvh;
    flex:none;margin:0;padding:16px 14px 20px;border-right:1px solid var(--layout-line);border-bottom:none;
    z-index:999;transform:translate3d(-102%,0,0);
    transition:transform .26s cubic-bezier(.22,1,.36,1);
    box-shadow:12px 0 40px rgba(0,0,0,.35);
  }
  .app-shell--nav-open .app-sidebar{transform:translate3d(0,0,0)}
  .sidebar-mobile-header{display:flex}
  .app-sidebar > .sidebar-brand{display:none}
  .app-topbar{height:auto;min-height:52px;padding:10px 12px;gap:8px;flex-wrap:wrap}
  .topbar-brand__img{height:30px;max-width:80px}
  .topbar-title{font-size:14px}
  .app-content{padding:12px}
  .app-footer{padding:14px 12px 16px}
  .app-footer__top{flex-direction:column;align-items:stretch}
  .app-footer__meta{align-items:flex-start;text-align:left}
  .app-footer__legal{max-width:none;font-size:10.5px}
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce){
  .app-sidebar,.app-nav-backdrop,.topbar-nav-toggle-line{transition:none}
}
@media (max-width: 560px){
  .sidebar-nav a,.sidebar-group-toggle{padding:8px}
  .topbar-actions a{font-size:13px}
  .topbar-login-switch{
    width:100%;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
}

.portal-msg-bell{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:10px;
  border:1px solid #2b3e6a;
  background:#121d38;
  color:var(--layout-text,#e7f0ff);
  text-decoration:none;
  flex-shrink:0;
}
.portal-msg-bell:hover{
  background:#1a2848;
  border-color:#365cf5;
  color:#fff;
}
.portal-msg-bell:focus-visible{
  outline:2px solid #93c5fd;
  outline-offset:2px;
}
.portal-msg-bell__icon{
  font-size:18px;
  line-height:1;
}
.portal-msg-bell__badge{
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#dc2626;
  color:#fff;
  font-size:10px;
  font-weight:700;
  line-height:18px;
  text-align:center;
  box-shadow:0 0 0 2px #0a1224;
}