:root{
  --app-bg:#f6f7fb;
  --app-surface:#ffffff;
  --app-surface-2:#f1f3f9;
  --app-text:#0f172a;
  --app-muted:#64748b;
  --app-primary:#4f46e5;
  --app-primary-2:#4338ca;
  --app-success:#16a34a;
  --app-warning:#f59e0b;
  --app-danger:#ef4444;
  --app-radius:14px;
  --app-radius-sm:10px;
  --app-shadow:0 1px 2px rgba(0,0,0,.06),0 12px 32px rgba(15,23,42,.08);
  --app-shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --app-shadow-md:0 2px 6px rgba(15,23,42,.08),0 14px 36px rgba(15,23,42,.10);
  --app-shadow-lg:0 8px 18px rgba(15,23,42,.12),0 24px 64px rgba(15,23,42,.16);
  --app-border:rgba(15,23,42,.10);
  --app-ring:0 0 0 .25rem rgba(79,70,229,.22);
  --app-sidebar-w:290px;
  --bs-body-bg:var(--app-bg);
  --bs-body-color:var(--app-text);
  --bs-primary:var(--app-primary);
  --bs-link-color:var(--app-primary);
  --bs-link-hover-color:var(--app-primary-2);
  --bs-border-color:var(--app-border);
  --bs-border-radius:var(--app-radius);
  --bs-border-radius-sm:var(--app-radius-sm);
}

html,body{height:100%;}
body{font-feature-settings:"ss01" 1,"cv11" 1;}

a{text-decoration:none;}

.app-shell{min-height:100vh;}

.app-sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--app-sidebar-w);
  background:linear-gradient(180deg,#0b1220 0%,#0f172a 55%,#0b1220 100%);
  color:#e2e8f0;
  border-right:1px solid rgba(255,255,255,.08);
  padding:1rem;
  z-index:1030;
  height:100dvh;
  overflow:hidden;
}

.app-sidebar .sidebar-scroll{
  flex:1;
  min-height:0;
  overflow:auto;
  padding-right:.25rem;
  margin-top:.25rem;
  scrollbar-width:thin;
  scrollbar-color:rgba(226,232,240,.25) transparent;
}

.app-sidebar .sidebar-scroll::-webkit-scrollbar{width:10px;}
.app-sidebar .sidebar-scroll::-webkit-scrollbar-thumb{background:rgba(226,232,240,.18);border-radius:999px;border:3px solid transparent;background-clip:padding-box;}
.app-sidebar .sidebar-scroll::-webkit-scrollbar-track{background:transparent;}

.app-sidebar .sidebar-footer{padding-top:.75rem;border-top:1px solid rgba(255,255,255,.08);}

.app-sidebar .brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.5rem .75rem;
  border-radius:12px;
}

.app-sidebar .brand .logo{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:12px;
  background:rgba(79,70,229,.16);
  color:#c7d2fe;
}

.app-sidebar .nav .nav-link{
  color:rgba(226,232,240,.88);
  border-radius:12px;
  padding:.65rem .75rem;
  display:flex;
  align-items:center;
  gap:.7rem;
}

.app-sidebar .nav .nav-link:hover{background:rgba(255,255,255,.06);}

.app-sidebar .nav .nav-link.active{
  background:rgba(79,70,229,.16);
  color:#eef2ff;
}

.app-sidebar .nav .nav-link .icon{width:22px;text-align:center;opacity:.95;}

.app-content{
  margin-left:0;
  padding:1rem;
}

@media (min-width:992px){
  .app-content{margin-left:var(--app-sidebar-w);padding:1.25rem 1.5rem 1.5rem;}
}

@media (min-width:992px) and (max-width:1700px){
  :root{--app-sidebar-w:258px;}
  .app-sidebar{padding:.75rem;}
  .app-sidebar .brand{padding:.45rem .55rem;}
  .app-sidebar .brand .logo{width:34px;height:34px;border-radius:11px;}
  .app-sidebar .nav .nav-link{padding:.55rem .6rem;border-radius:11px;font-size:.95rem;gap:.6rem;}
  .app-sidebar .nav .nav-link .icon{width:20px;}
}

.app-topbar{
  position:sticky;
  top:0;
  z-index:1020;
  backdrop-filter:saturate(160%) blur(10px);
  background:rgba(246,247,251,.82);
  border-bottom:1px solid var(--app-border);
}

.dropdown-menu{z-index:1050!important;}
.dropdown.show,.dropup.show,.dropend.show,.dropstart.show{z-index:1050;}

.btn i,.dropdown-item i{line-height:1;vertical-align:-.12em;}

.app-topbar .search{
  background:var(--app-surface);
  border:1px solid var(--app-border);
  border-radius:999px;
  padding:.5rem .75rem;
  display:flex;
  align-items:center;
  gap:.5rem;
  box-shadow:var(--app-shadow-sm);
  width:100%;
  transition:box-shadow .22s ease, border-color .22s ease;
}

.app-topbar .search input{
  border:0;
  outline:0;
  background:transparent;
  width:100%;
}


.app-topbar .topbar-inner{position:relative;display:flex;align-items:center;min-height:52px;}
.app-topbar .topbar-search-zone{flex:1 1 auto;min-width:0;padding-right:var(--topbar-actions-space);transition:padding-right .22s ease;}
.app-topbar .topbar-actions{position:absolute;top:0;right:0;height:100%;display:flex;align-items:center;gap:.5rem;}

:root{--topbar-actions-space:152px;}
@media (min-width: 768px){:root{--topbar-actions-space:240px;}}
@media (min-width: 992px){:root{--topbar-actions-space:380px;}}

.topbar-search-wrap{width:100%;min-width:0;transition:transform .15s ease,opacity .15s ease;}

.app-topbar.is-search-expanded .topbar-search-zone{padding-right:0;}
.app-topbar.is-search-expanded .topbar-actions{opacity:0;pointer-events:none;}

.topbar-actions .btn{transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease,border-color .14s ease;}
@media (prefers-reduced-motion:no-preference){
  .topbar-actions .btn:hover{transform:translateY(-1px);box-shadow:var(--app-shadow-sm);}
}

.topbar-actions .btn.btn-light:hover{background:rgba(15,23,42,.04);}
.topbar-actions .btn.btn-light:active{transform:translateY(0);}

.app-topbar .search:focus-within{box-shadow:var(--app-shadow);border-color:rgba(79,70,229,.25);}

@media (prefers-reduced-motion:reduce){
  .app-topbar .search,.topbar-search-wrap,.app-topbar .topbar-search-zone,.topbar-actions .btn{transition:none;}
}

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

.app-card.is-invalid{border-color:rgba(220,53,69,.65);box-shadow:0 0 0 4px rgba(220,53,69,.10),var(--app-shadow-sm);}

.stat-tile{
  position:relative;
  overflow:hidden;
}

.stat-tile .badge-soft{
  background:rgba(79,70,229,.10);
  color:var(--app-primary);
  border:1px solid rgba(79,70,229,.20);
}

.btn{
  border-radius:12px;
}

.btn-primary{
  background:linear-gradient(180deg,var(--app-primary) 0%,var(--app-primary-2) 100%);
  border:0;
}

.btn-primary:focus{box-shadow:var(--app-ring);}

.form-control,.form-select{
  border-radius:12px;
  border-color:var(--app-border);
}

.form-control:focus,.form-select:focus{box-shadow:var(--app-ring);border-color:rgba(79,70,229,.55);}

.badge.rounded-pill{padding:.45em .75em;}

.app-bottom-nav{
  border-top:1px solid var(--app-border);
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(10px);
  padding-bottom:env(safe-area-inset-bottom);
}

.app-menu-sheet.offcanvas-bottom{
  height:80vh;
  max-height:80vh;
  border-top-left-radius:22px;
  border-top-right-radius:22px;
  overflow:hidden;
}

.app-action-sheet.offcanvas-bottom{
  max-height:60vh;
  border-top-left-radius:22px;
  border-top-right-radius:22px;
  overflow:hidden;
}

.app-menu-sheet .offcanvas-body,.app-action-sheet .offcanvas-body{
  padding-bottom:calc(1rem + env(safe-area-inset-bottom));
}

.app-bottom-nav .nav-link{
  color:var(--app-muted);
  padding:.55rem .35rem;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.15rem;
  min-width:64px;
}

.app-bottom-nav .nav-link.active{color:var(--app-primary);background:rgba(79,70,229,.08);}

.kicker{letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;color:var(--app-muted);}

.anim-in{animation:fadeUp .45s cubic-bezier(.2,.9,.2,1) both;}
@keyframes fadeUp{ from{ opacity:0; } to{ opacity:1; } }

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

.installer-wrap{min-height:100vh;display:flex;align-items:center;}
.wizard-steps{display:flex;gap:.75rem;flex-wrap:wrap;}
.wizard-step{flex:1;min-width:160px;display:flex;align-items:center;gap:.65rem;padding:.6rem .75rem;border-radius:12px;background:var(--app-surface-2);border:1px solid var(--app-border);color:var(--app-muted);}
.wizard-step .dot{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;background:rgba(79,70,229,.12);color:var(--app-primary);font-weight:700;}
.wizard-step .label{font-weight:600;}
.wizard-step.is-active{background:rgba(79,70,229,.08);border-color:rgba(79,70,229,.25);color:var(--app-text);}

.auth-shell{
  min-height:100vh;
  background:radial-gradient(1200px 600px at 20% 10%,rgba(79,70,229,.12) 0%,rgba(246,247,251,0) 55%),
             radial-gradient(900px 500px at 80% 0%,rgba(34,197,94,.10) 0%,rgba(246,247,251,0) 60%),
             var(--app-bg);
}

.auth-logo{
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:12px;
  background:rgba(79,70,229,.14);
  color:var(--app-primary);
}

.auth-alert{border-radius:12px;box-shadow:var(--app-shadow-sm);border-color:var(--app-border);}

.icon-bubble{
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:14px;
  background:rgba(79,70,229,.10);
  color:var(--app-primary);
  border:1px solid var(--app-border);
}


.tour-row{display:flex;align-items:flex-start;gap:1rem;}
.tour-row .icon-bubble{flex:0 0 44px;margin-top:.1rem;}
.tour-row>div:last-child{min-width:0;}
#packrTour .modal-body{padding-bottom:1rem;}
#packrTour .modal-footer{gap:.5rem;flex-wrap:wrap;}
@media (max-width:575.98px){
  #packrTour .modal-content{border-radius:0;}
  #packrTour .modal-footer .btn{flex:1 1 auto;}
}

.color-dot{
  width:14px;height:14px;
  display:inline-block;
  border-radius:999px;
  background:rgba(148,163,184,.25);
  border:1px solid var(--app-border);
}

.input-group .form-control-color{
  width:3rem;
  flex:0 0 auto;
  padding:.375rem;
}

.thumb{
  width:46px;height:46px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--app-border);
  background:var(--app-surface-2);
  display:flex;
  align-items:center;
  justify-content:center;
}

.thumb img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

.thumb-lg{width:100%;height:auto;aspect-ratio:4/3;border-radius:18px;}

.thumb-fallback{
  width:100%;height:100%;
  display:grid;place-items:center;
  color:var(--app-muted);
  background:radial-gradient(350px 220px at 30% 20%,rgba(79,70,229,.08),transparent 55%),var(--app-surface-2);
}

.stat-tile{
  transition:transform .18s ease, box-shadow .18s ease;
}

@media (prefers-reduced-motion:no-preference){
  .stat-tile:hover{transform:translateY(-2px);box-shadow:var(--app-shadow-md);}
  .app-card:hover{box-shadow:var(--app-shadow-md);}
}

.prose{line-height:1.6;}
.prose a{color:var(--app-primary);}

.media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
@media (max-width:380px){.media-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:768px){.media-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}

.media-thumb{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--app-border);background:var(--app-surface-2);aspect-ratio:1/1;}
.media-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.media-actions{position:absolute;top:8px;right:8px;display:flex;gap:6px;}
.media-actions .btn{border-radius:12px;padding:.25rem .45rem;}
.media-empty{padding:12px;border:1px dashed var(--app-border);border-radius:14px;background:var(--app-surface-2);}

.activity-card{padding:12px 14px;border-radius:18px;border:1px solid var(--app-border);background:var(--app-surface-2);}

.table>thead th{color:var(--app-muted);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;}
.table>tbody td{vertical-align:middle;}

.dataTables_wrapper .dataTables_paginate .paginate_button{padding:0 !important;}
.dataTables_wrapper .dataTables_paginate .paginate_button a{border-radius:10px !important;}

.pack-fab{
  position:fixed;
  right:16px;
  bottom:calc(74px + env(safe-area-inset-bottom));
  width:56px;
  height:56px;
  border-radius:999px;
  background:var(--app-primary);
  color:#fff;
  display:grid;
  place-items:center;
  text-decoration:none;
  box-shadow:var(--app-shadow-lg);
  z-index:1060;
}

.pack-fab:active{transform:translateY(1px);}

@media (prefers-reduced-motion:no-preference){
  .pack-fab{transition:transform .15s ease, box-shadow .15s ease;}
  .pack-fab:hover{transform:translateY(-2px);}
}

.chip-grid.is-invalid{border:1px solid rgba(220,53,69,.55);background:rgba(220,53,69,.06);border-radius:18px;padding:.5rem;}
.chip{
  border:1px solid var(--app-border);
  background:var(--app-surface);
  color:var(--app-text);
  border-radius:999px;
  padding:.55rem .8rem;
  display:flex;
  align-items:center;
  gap:.5rem;
  font-weight:600;
  box-shadow:var(--app-shadow-sm);
}
.chip .dot{width:10px;height:10px;border-radius:50%;background:var(--app-muted);}
.chip.active{border-color:rgba(79,70,229,.35);background:rgba(79,70,229,.10);}
.chip:active{transform:translateY(1px);}

.pack-card{border-radius:22px;}
.pack-card .kicker{margin-bottom:.4rem;}

.scan-reader{
  width:100%;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--app-border);
  background:var(--app-surface-2);
}

.scan-reader video{width:100% !important;height:auto !important;}

.scan-status{display:flex;justify-content:center;margin-bottom:.75rem;}
.scan-status-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .85rem;border-radius:999px;border:1px solid var(--app-border);background:var(--app-surface);box-shadow:var(--app-shadow-sm);font-weight:700;color:var(--app-text);font-size:.95rem;}
.scan-status-pill.scan-status-search{color:var(--app-muted);}
.scan-status-pill.scan-status-detected{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08);}
.scan-status-pill.scan-status-read{border-color:rgba(34,197,94,.55);background:rgba(34,197,94,.14);}
.scan-reader.scan-success{border-color:rgba(34,197,94,.55);box-shadow:0 0 0 4px rgba(34,197,94,.12);}
@media (prefers-reduced-motion:no-preference){
  .scan-reader.scan-success{animation:scanPulse .45s ease;}
  @keyframes scanPulse{0%{transform:scale(1);}50%{transform:scale(1.01);}100%{transform:scale(1);}}
}
@media (prefers-reduced-motion:reduce){
  .scan-reader.scan-success{animation:none;}
}


@media (prefers-reduced-motion:reduce){
  .pack-fab,.chip{transition:none !important;}
  .pack-fab:active,.chip:active{transform:none;}
}

.page-head{ position: relative; z-index: 1010; }

.smtp-settings.is-disabled{opacity:.65;}