:root{
  --bg-1:#ff7a18;
  --bg-2:#ffffff;
  --bg:#f6f7fb;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:rgba(15,23,42,.62);
  --line:rgba(15,23,42,.10);
  --shadow:0 20px 50px rgba(2,6,23,.12);
  --radius:16px;
  --sidebar-w:280px;
  --sidebar-collapsed:88px;
  --focus:rgba(255,122,24,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--ink);
  background: radial-gradient(1200px 800px at 15% 20%, rgba(255,122,24,.35), transparent 60%),
              radial-gradient(1000px 700px at 85% 25%, rgba(29,185,84,.25), transparent 55%),
              linear-gradient(135deg, rgba(255,122,24,.20), rgba(255,255,255,.70), rgba(29,185,84,.18));
}

h1,h2,h3,h4,h5,h6{font-weight:400; margin:0}

.app-shell{display:flex; min-height:100vh; flex-wrap:nowrap}

.sidebar{
  width:var(--sidebar-w);
  padding:8px 10px;
  position:sticky;
  top:0;
  height:100vh;
  min-height:0;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.82);
  border-right: 1px solid var(--line);
  display:flex;
  flex-direction:column;
}
.sidebar.is-collapsed{width:var(--sidebar-collapsed)}

.sidebar__brand{display:flex; align-items:center; gap:12px; padding:6px 8px 8px; margin-bottom:18px}
.sidebar__brand{gap:8px}
.sidebar__brand .brand__logo{display:grid}
.sidebar .brand__logo{width:42px; height:42px; border-radius:14px; box-shadow:none}
.sidebar .brand__img{border-radius:12px}
.brand__logo{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  box-shadow: 0 16px 40px rgba(2,6,23,.18);
  overflow:hidden;
}
.brand__img{width:100%; height:100%; object-fit:cover}
.brand__text{line-height:1.05}
.brand__name{font-weight:950; color:rgba(255,255,255,.98)}
.brand__sub{color:rgba(255,255,255,.82); font-size:12px; font-weight:800}

.sidebar .brand__name{color: var(--ink)}
.sidebar .brand__sub{color: var(--muted)}
.sidebar .brand__name{font-weight:600}
.sidebar .brand__sub{font-weight:500}
.sidebar .brand__logo{background: transparent; border-color: transparent; box-shadow:none}

.nav{display:flex; flex-direction:column; gap:3px; padding:8px 2px 2px; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding-bottom:72px}
.nav{scrollbar-width: thin; scrollbar-color: rgba(15,23,42,.28) transparent}
.nav::-webkit-scrollbar{width:10px}
.nav::-webkit-scrollbar-thumb{background: rgba(15,23,42,.22); border-radius:999px}
.nav::-webkit-scrollbar-thumb:hover{background: rgba(15,23,42,.32)}
.nav__group{margin-top:3px; padding-top:3px; border-top:1px solid rgba(15,23,42,.08)}
.nav__group:first-child{border-top:none; padding-top:0}
.nav__group-title{display:none}
.nav__item{
  display:flex; align-items:center; gap:8px;
  padding:7px 10px;
  border-radius:14px;
  color:var(--ink);
  text-decoration:none;
  border: 1px solid transparent;
  font-weight:400;
}
.nav__item:hover{background: rgba(15,23,42,.06); border-color: rgba(15,23,42,.10)}
.nav__item.is-active{
  background: linear-gradient(135deg, rgba(255,122,24,.98), rgba(29,185,84,.92));
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 18px 40px rgba(2,6,23,.14);
  position:relative;
}
.nav__item.is-active::before{content:""; position:absolute; left:8px; top:10px; bottom:10px; width:5px; border-radius:999px; background: rgba(255,255,255,.95)}
.nav__item.is-active{color:#fff}
.nav__item.is-active .nav__icon{color:#fff}
.nav__icon{width:24px; height:24px; display:grid; place-items:center; color: var(--ink)}
.nav__icon svg{width:18px; height:18px}
.nav__label{font-weight:400}

.nav__submenu{border:1px solid transparent; border-radius:14px;}
.nav__parent-row{display:flex; align-items:center; gap:8px;}
.nav__parent-link{
  flex:1;
  display:flex; align-items:center; justify-content:flex-start; gap:8px;
  padding:7px 10px;
  border-radius:14px;
  background:transparent;
  border:1px solid transparent;
  width:100%;
  cursor:pointer;
  text-align:left;
  color: var(--ink);
  font: inherit;
  font-weight:400;
  text-decoration:none;
}
.nav__parent-link:hover{background: rgba(15,23,42,.06); border-color: rgba(15,23,42,.10)}
.nav__parent-link.is-active{
  background: linear-gradient(135deg, rgba(255,122,24,.98), rgba(29,185,84,.92));
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 18px 40px rgba(2,6,23,.14);
  position:relative;
  color:#fff;
}
.nav__parent-link.is-active .nav__icon{color:#fff}
.nav__parent-link.is-active::before{content:""; position:absolute; left:8px; top:10px; bottom:10px; width:5px; border-radius:999px; background: rgba(255,255,255,.95)}
.nav__parent-toggle{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:14px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  display:grid;
  place-items:center;
  color: var(--ink);
}
.nav__parent-toggle:hover{background: rgba(15,23,42,.06); border-color: rgba(15,23,42,.10)}
.nav__parent{
  display:flex; align-items:center; justify-content:flex-start; gap:8px;
  padding:7px 10px;
  border-radius:14px;
  background:transparent;
  border:1px solid transparent;
  width:100%;
  cursor:pointer;
  text-align:left;
  color: var(--ink);
  font: inherit;
  font-weight:400;
}
.nav__parent:hover{background: rgba(15,23,42,.06); border-color: rgba(15,23,42,.10)}
.nav__submenu:not(.is-collapsed) > .nav__parent{
  background: rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.10);
}
.nav__parent.is-current{
  background: rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.10);
}
.nav__parent.is-active{
  background: linear-gradient(135deg, rgba(255,122,24,.98), rgba(29,185,84,.92));
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 18px 40px rgba(2,6,23,.14);
  position:relative;
  color:#fff;
}
.nav__parent.is-active .nav__icon{color:#fff}
.nav__parent.is-active::before{content:""; position:absolute; left:8px; top:10px; bottom:10px; width:5px; border-radius:999px; background: rgba(255,255,255,.95)}
.nav__chev{margin-left:auto; width:10px; height:10px; border-right:2px solid rgba(15,23,42,.55); border-bottom:2px solid rgba(15,23,42,.55); transform: rotate(45deg); transition: transform .15s ease; display:none;}
.nav__submenu.is-collapsed .nav__chev{transform: rotate(-135deg)}
.nav__children{padding:4px 4px 6px 36px; display:flex; flex-direction:column; gap:2px; max-height:none; overflow:visible}
.nav__children::-webkit-scrollbar{width:8px}
.nav__children::-webkit-scrollbar-thumb{background: rgba(15,23,42,.18); border-radius:999px}
.nav__submenu.is-collapsed .nav__children{display:none}
.nav__child{
  display:flex; align-items:center; gap:8px;
  text-decoration:none;
  color: var(--ink);
  padding:6px 8px;
  border-radius:12px;
  border:1px solid transparent;
  background: rgba(15,23,42,.05);
  font-weight:400;
}
.nav__child:hover{background: rgba(15,23,42,.08); border-color: rgba(15,23,42,.10)}
.nav__child.is-active{
  background: linear-gradient(135deg, rgba(255,122,24,.98), rgba(29,185,84,.92));
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 18px 40px rgba(2,6,23,.10);
  color:#fff;
  position:relative;
}
.nav__child.is-active .nav__child-ic{color:#fff}
.nav__child-ic{width:18px; height:18px; display:grid; place-items:center}

.sidebar__version{
  margin-top: auto;
  padding:12px 10px 8px;
  text-align:center;
  font-size:11px;
  font-weight:600;
  color: rgba(100,116,139,.70);
  border-top: 1px solid rgba(15,23,42,.08);
}

.sidebar.is-collapsed .brand__text{display:none}
.sidebar.is-collapsed .nav__group-title{display:none}
.sidebar.is-collapsed .nav__label{display:none}
.sidebar.is-collapsed .nav__chev{display:none}
.sidebar.is-collapsed .nav__children{display:none}
.sidebar.is-collapsed .nav__item, .sidebar.is-collapsed .nav__parent{justify-content:center}
.sidebar.is-collapsed .nav__item.is-active::before{display:none}

.main{flex:1; display:flex; flex-direction:column; min-width:0}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background: linear-gradient(90deg, rgba(255,122,24,.90), rgba(29,185,84,.90));
  border-bottom: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 16px 40px rgba(2,6,23,.10);
}
.topbar__left{display:flex; align-items:center; gap:12px}
.topbar__title{
  font-weight:950;
  letter-spacing:.02em;
  color:#fff;
}
.icon-btn{
  width:42px; height:42px; border-radius:14px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.14);
  display:grid; place-items:center;
  cursor:pointer;
  box-shadow: 0 10px 26px rgba(2,6,23,.14);
}
.icon-btn:hover{background: rgba(255,255,255,.20)}
.icon-btn:focus{outline:3px solid var(--focus); outline-offset:2px}
.icon-btn__bar{display:block; width:18px; height:2px; background: #fff; margin:2.5px 0; border-radius:999px; opacity:.95}
.icon-btn__bar:nth-child(2){width:14px}
.icon-btn__bar:nth-child(3){width:10px}

/* Close buttons inside white modals: keep the X visible */
.modal .icon-btn{
  border:1px solid var(--line);
  background:#fff;
  box-shadow:none;
}
.modal .icon-btn:hover{background: rgba(2,6,23,.04)}
.modal .icon-btn__bar{background: rgba(2,6,23,.92); opacity:1}

.user-chip{
  display:flex; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.14);
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
}
.user-chip:hover{background: rgba(255,255,255,.20)}
.user-chip__name{font-weight:700; color:#fff}
.user-chip__avatar{
  width:30px; height:30px; border-radius:12px;
  display:grid; place-items:center;
  color:#fff; font-weight:800;
  background: linear-gradient(135deg, #ff7a18, #1db954);
}
.user-chip__name{font-weight:700}

.store-switch{display:flex; align-items:center}
.store-switch__dropdown{position:relative}
.store-switch__btn{
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.14);
  padding:0 12px;
  font-weight:900;
  color:#fff;
  box-shadow: 0 10px 26px rgba(2,6,23,.12);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
}
.store-switch__btn:focus{outline:none; box-shadow: 0 0 0 3px rgba(255,122,24,.28), 0 12px 28px rgba(2,6,23,.14)}
.store-switch__btn-label{max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.store-switch__caret{width:10px; height:10px; border-right:2px solid rgba(255,255,255,.85); border-bottom:2px solid rgba(255,255,255,.85); transform: rotate(45deg); margin-left:4px}

.store-switch__panel{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:260px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.96);
  box-shadow: 0 22px 55px rgba(2,6,23,.18);
  overflow:hidden;
  display:none;
  z-index:80;
}
.store-switch__dropdown.is-open .store-switch__panel{display:block}
.store-switch__item{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:0;
  background: transparent;
  cursor:pointer;
  font-weight:900;
  color: rgba(15,23,42,.92);
}
.store-switch__item:hover{background: rgba(255,122,24,.10); color: rgba(154,52,18,.98)}
.store-switch__item.is-active{background: rgba(22,163,74,.12); color: rgba(20,83,45,.95)}

.user-menu{position:relative}
.user-chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.14);
  color:#fff;
  cursor:pointer;
  transition: background .15s ease, transform .15s ease;
}
.user-chip:hover{background: rgba(255,255,255,.18); transform: translateY(-1px)}
.user-chip:active{transform: translateY(0); background: rgba(255,255,255,.22)}
.user-menu.is-open .user-chip{background: rgba(255,255,255,.22)}
.user-chip:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.user-chip__avatar{
  width:32px;
  height:32px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:600;
  letter-spacing:.2px;
  color: rgba(15,23,42,.92);
  background: radial-gradient(16px 16px at 30% 30%, rgba(255,255,255,.65), rgba(255,255,255,0)),
              linear-gradient(135deg, rgba(255,122,24,.95), rgba(29,185,84,.85));
  box-shadow: 0 10px 18px rgba(2,6,23,.18);
}
.user-chip__name{font-weight:500; white-space:nowrap}
.user-menu__panel{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:220px;
  border-radius:16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.95);
  box-shadow: var(--shadow);
  display:none;
  overflow:hidden;
}
.user-menu.is-open .user-menu__panel{display:block}

@media (hover:hover) and (pointer:fine){
  .user-menu:hover .user-menu__panel{display:block}
}
.user-menu__section{padding:7px}
.user-menu__section + .user-menu__section{border-top:1px solid rgba(15,23,42,.08)}
.user-menu__role{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 9px;
  border-radius:12px;
  background: rgba(249,115,22,.08);
  border:1px solid rgba(249,115,22,.14);
  color: rgba(154,52,18,.98);
  font-weight:600;
  font-size:13px;
}
.user-menu__ic{width:18px; height:18px; display:grid; place-items:center; flex:0 0 18px}
.user-menu__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 9px;
  border-radius:12px;
  text-decoration:none;
  color: rgba(15,23,42,.92);
  font-weight:500;
  font-size:13px;
  transition: background .15s ease, transform .15s ease;
}
.user-menu__item:hover{background: rgba(15,23,42,.10); transform: translateX(1px)}
.user-menu__item:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.user-menu__item:active{background: rgba(15,23,42,.10)}
.user-menu__footer{padding:7px; display:flex; justify-content:flex-start; border-top:1px solid rgba(15,23,42,.08)}
.user-menu__logout{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  padding:7px 9px;
  border-radius:12px;
  font-weight:600;
  font-size:13px;
  color: rgba(153,27,27,.95);
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.18);
  width:100%;
  text-align:center;
  transition: background .15s ease, transform .15s ease;
}
.user-menu__logout:hover{background: rgba(239,68,68,.14); transform: translateX(1px)}
.user-menu__logout:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.user-menu__logout:active{background: rgba(239,68,68,.16)}

.content{padding:0 20px 90px}

body.sidebar-open{overflow:hidden}
body.sidebar-open::before{
  content:"";
  position:fixed;
  inset:0;
  background: rgba(2,6,23,.35);
  backdrop-filter: blur(2px);
  z-index: 70;
}

@media (max-width: 980px){
  .app-shell{flex-wrap:nowrap}

  .sidebar{
    position:fixed;
    left:0;
    top:0;
    height:100vh;
    z-index: 80;
    transform: translateX(-105%);
    transition: transform .18s ease;
    box-shadow: 0 22px 60px rgba(2,6,23,.22);
  }
  .sidebar.is-open{transform: translateX(0)}

  .sidebar{width:min(var(--sidebar-w), 86vw)}
  .sidebar.is-collapsed{width:min(var(--sidebar-w), 86vw)}

  .topbar{padding:12px 12px}
  .topbar__title{font-size:16px; margin-left:8px}

  .content{padding:0 12px 90px}

  .store-switch__btn-label{max-width:140px}
}

@media (max-width: 640px){
  .kpi{grid-column: span 12}
  .kpis{gap:10px}

  .btn{padding:10px 12px; border-radius:14px}
  .input{padding:10px 12px; border-radius:14px}

  .store-switch__btn{height:40px}
  .icon-btn{width:40px; height:40px}
}

@media (max-width: 980px){
  .content table{display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .content table thead, .content table tbody, .content table tr{width:max-content}
}

@media (max-width: 980px){
  .cash-grid{grid-template-columns: 1fr 1fr !important}
}

@media (max-width: 640px){
  .cash-grid{grid-template-columns: 1fr !important}
}

.modal{position:fixed; inset:0; display:none; z-index:60}
.modal.is-open{display:block}
.modal__backdrop{position:absolute; inset:0; background: rgba(2,6,23,.45); backdrop-filter: blur(6px)}
.modal__dialog{
  position:relative;
  width:min(920px, calc(100% - 24px));
  margin: 56px auto;
  padding:16px;
  max-height: calc(100vh - 112px);
}
.modal__header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; position:sticky; top:0; z-index:2; background: rgba(255,255,255,.88); border-bottom:1px solid rgba(15,23,42,.10); padding:10px 12px; margin:-14px -14px 12px; border-top-left-radius:14px; border-top-right-radius:14px; backdrop-filter: blur(10px)}
.modal__body{padding-top:6px}

.modal .card.panel{max-height: calc(100vh - 144px); overflow:auto; box-shadow: 0 24px 60px rgba(2,6,23,.22)}

.modal table{width:100%; border-collapse:collapse; table-layout:auto}
.modal table thead th{position:sticky; top:58px; z-index:1; background: rgba(248,250,252,.96)}
.modal table th{font-weight:600; color:rgba(100,116,139,.95); font-size:12px}
.modal table td{font-weight:400; color:rgba(15,23,42,.92)}
.modal .label{font-weight:500}

@media (max-width: 640px){
  .modal__dialog{width: calc(100% - 16px); margin: 36px auto; padding:10px}
  .modal__header{padding:10px 10px; margin:-14px -14px 12px}
}

/* Confirm delete modal */
#confirmDeleteModal .btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
  filter:saturate(.7);
}
#confirmDeleteModal .input{letter-spacing:.04em;}

.store-actions{display:inline-flex; gap:8px; align-items:center; white-space:nowrap}
.store-actions__form{display:inline-flex; margin:0}
.action-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.85);
  color: rgba(15,23,42,.92);
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
}
.action-btn--icon{width:38px; height:38px; padding:0; justify-content:center}
.action-btn:hover{background: rgba(15,23,42,.06)}
.action-btn:disabled{opacity:.6; cursor:default}
.action-btn:disabled:hover{background: rgba(22,163,74,.10)}
.action-btn__ic{display:grid; place-items:center}
.action-btn__ic svg{display:block}

.action-btn--primary{border-color: rgba(249,115,22,.22); background: rgba(249,115,22,.10); color: rgba(154,52,18,.98)}
.action-btn--primary:hover{background: rgba(249,115,22,.14)}

.action-btn--success{border-color: rgba(22,163,74,.22); background: rgba(22,163,74,.10); color: rgba(20,83,45,.95)}
.action-btn--success:hover{background: rgba(22,163,74,.14)}

.action-btn--danger{border-color: rgba(239,68,68,.22); background: rgba(239,68,68,.10); color: rgba(153,27,27,.95)}
.action-btn--danger:hover{background: rgba(239,68,68,.14)}

.action-btn--muted{border-color: rgba(100,116,139,.24); background: rgba(100,116,139,.10); color: rgba(15,23,42,.85)}
.action-btn--muted:hover{background: rgba(100,116,139,.14)}

.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.page-title{font-size:22px; font-weight:400; margin: 12px 0 4px}
.page-subtitle{color:var(--muted); margin: 0 0 18px}

.kpis{display:grid; grid-template-columns: repeat(12, 1fr); gap:14px}
.app-footer{
  position:fixed;
  left: var(--sidebar-w);
  right:0;
  bottom:0;
  z-index: 10;
  padding:12px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color: rgba(100,116,139,.95);
  font-weight:700;
  font-size:12px;
  background: rgba(255,255,255,.82);
  border-top: 1px solid var(--line);
}

@media (max-width: 980px){
  .app-footer{left:0}
}

.kpi{grid-column: span 3; padding:14px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease}
.kpi:hover{transform: translateY(-2px); box-shadow: 0 20px 45px rgba(2,6,23,.18)}
.kpi__label{color:var(--muted); font-size:12px}
.kpi__value{font-size:26px; font-weight:600; margin-top:6px}
.kpi__trend{margin-top:6px; font-size:12px; color:rgba(15,23,42,.75)}

.grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:14px; margin-top:14px}
.grid__col-8{grid-column: span 8}
.grid__col-4{grid-column: span 4}
.panel{padding:14px}
.panel__title{font-weight:400 !important; margin:0 0 8px}
.panel__meta{color:var(--muted); margin:0}

.table{width:100%; border-collapse: collapse}
.table th, .table td{padding:10px; text-align:left; border-bottom:1px solid var(--line)}
.table th{font-weight:600; color:var(--ink); background: rgba(15,23,42,.04)}
.table tr:hover{background: rgba(15,23,42,.02)}
.text-center{text-align:center}
.text-right{text-align:right}

.tabs{margin-top:14px}
.tabs__bar{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.tabs__btn{
  width:auto;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background: linear-gradient(135deg, rgba(255,122,24,.12), rgba(29,185,84,.12));
  color: rgba(15,23,42,.92);
  font-weight:500;
  cursor:pointer;
}
.tabs__btn:hover{background: linear-gradient(135deg, rgba(255,122,24,.18), rgba(29,185,84,.18)); border-color: rgba(255,122,24,.32)}
.tabs__btn.is-active{
  color:#fff;
  border-color: rgba(15,23,42,.10);
  background: linear-gradient(135deg, #ff7a18, #1db954);
  box-shadow: 0 18px 35px rgba(29,185,84,.18);
}
.tabs__panel{display:none; margin-top:12px}
.tabs__panel.is-active{display:block}

@media (max-width: 640px){
  .tabs__btn{flex:1 1 auto; justify-content:center; text-align:center}
}

.auth-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:22px;
}
.auth-card{
  width:min(980px, 100%);
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  overflow:hidden;
}
.auth-left{padding:28px}
.auth-right{
  background: linear-gradient(135deg, rgba(255,122,24,.95), rgba(255,255,255,.55), rgba(29,185,84,.75));
  padding:28px;
  place-items:center;
  display:grid;
}
.auth-footer{
  text-align:center;
  color: rgba(100,116,139,.85);
  font-weight:600;
  font-size:12px;
  margin-top:22px;
}
.auth-right > div{width:100%}
.auth-right .auth-right__stack{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px}
.auth-title{font-size:28px; font-weight:600; margin:0 0 6px}
.auth-sub{color:var(--muted); margin:0 0 18px}

.form-row{margin-bottom:12px}
.label{display:block; font-weight:500; margin-bottom:6px}
.input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.65);
  outline:none;
}
.input:focus{outline:3px solid var(--focus); border-color: rgba(255,122,24,.35)}

.btn{
  width:100%;
  border:none;
  cursor:pointer;
  padding:12px 14px;
  border-radius:14px;
  font-weight:850;
  color:#fff;
  background: linear-gradient(135deg, #ff7a18, #1db954);
  box-shadow: 0 18px 35px rgba(29,185,84,.18);
}
.btn:focus{outline:3px solid var(--focus); outline-offset:2px}

.alert{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(239,68,68,.30);
  background: rgba(239,68,68,.08);
  color: rgba(127,29,29,.95);
  margin-bottom:12px;
}

@media (max-width: 980px){
  .kpi{grid-column: span 6}
  .grid__col-8{grid-column: span 12}
  .grid__col-4{grid-column: span 12}
  .auth-card{grid-template-columns: 1fr}
  .auth-right{min-height:160px}
}