@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root{--ink:#172033;--muted:#667085;--line:#e8ecf3;--canvas:#f6f8fc;--surface:#fff;--primary:#635bff;--primary-dark:#4f46e5;--accent:#ee8b57;--shadow:0 12px 30px rgba(25,42,70,.07)}
*{box-sizing:border-box} body{min-height:100vh;background:var(--canvas);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:.95rem} a{text-decoration:none}
.navbar{min-height:76px!important;padding:0 1.4rem!important;background-color:#fff!important;background-image:none!important;opacity:1!important;border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(20,32,51,.06);backdrop-filter:none!important}
.navbar-brand{display:flex;align-items:center;gap:.6rem;color:var(--ink)!important;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;letter-spacing:-.04em;font-size:1.25rem}.navbar-brand:before{content:'S';display:grid;place-items:center;width:34px;height:34px;color:#fff;background:linear-gradient(135deg,var(--primary),#8b5cf6);border-radius:10px;font-size:.9rem;letter-spacing:0}
.navbar .nav-link{display:flex;align-items:center;gap:.45rem;padding:.65rem .8rem!important;margin:.2rem;color:#667085!important;border-radius:9px;font-weight:600;font-size:.88rem}.navbar .nav-link i{width:16px;text-align:center}.navbar .nav-link:hover,.navbar .nav-link.active{background:#eeedff;color:var(--primary-dark)!important}.navbar .nav-icon-hover{padding:.25rem!important;background:transparent!important}.navbar .dropdown-menu{border:1px solid var(--line);box-shadow:var(--shadow);border-radius:12px;padding:.5rem;min-width:175px}.navbar .dropdown-item{border-radius:7px;padding:.6rem .75rem}.navbar-toggler{border-color:var(--line)}
.page-wrapper{min-height:calc(100vh - 76px)}.container-fluid,.page-wrapper>.container{max-width:1440px;padding:2rem 2rem 1rem}.page-wrapper>.container{padding-top:2rem}.page-titles{margin:0 0 1.75rem!important;align-items:center}.page-titles h3,.page-heading h1{margin:0;color:var(--ink);font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;letter-spacing:-.045em;font-size:1.6rem}.breadcrumb{margin:.4rem 0 0;background:transparent;padding:0;font-size:.85rem}.breadcrumb-item a{color:var(--primary)}
.card{border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}.card-body{padding:1.35rem}.card-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;color:var(--ink)}
.btn{border-radius:9px;font-weight:700;padding:.58rem 1rem;transition:transform .18s ease,box-shadow .18s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 7px 16px rgba(79,70,229,.16)}.btn-primary{background:var(--primary);border-color:var(--primary)}.btn-primary:hover,.btn-primary:focus{background:var(--primary-dark);border-color:var(--primary-dark)}.btn-success{background:#16a875;border-color:#16a875}.btn-info{background:#0f91ad;border-color:#0f91ad;color:#fff}.btn-outline-secondary{color:#667085;border-color:#d5dae4}.btn-outline-secondary:hover{background:#f3f4f7;color:var(--ink);border-color:#d5dae4}
.form-control,.form-select{min-height:44px;border:1px solid #d9dee8;border-radius:9px;padding:.65rem .8rem;color:var(--ink)}.form-control:focus,.form-select:focus{border-color:#9d98ff;box-shadow:0 0 0 .22rem rgba(99,91,255,.13)}.form-group{margin-bottom:1.15rem}.form-group label,.col-form-label,.form-label{font-weight:700;color:#344054;margin-bottom:.45rem}.input-group{align-items:flex-start;margin-bottom:1.15rem;gap:0}.input-group>.col-form-label{padding-top:.65rem}.input-group>.form-control,.input-group>.col-md-10{border-radius:9px!important}.form-text{color:var(--muted)}
.alert{border:0;border-radius:11px;padding:1rem 1.1rem;box-shadow:0 5px 14px rgba(20,32,51,.04)}.alert-info{background:#e9f7ff;color:#075e7d}.footer{color:#98a2b3!important;font-size:.84rem;padding:2rem!important;background:transparent!important}.footer a{color:var(--primary);font-weight:700}
.dashboard-stat{position:relative;overflow:hidden}.dashboard-stat:after{content:'';position:absolute;width:100px;height:100px;right:-36px;top:-38px;border-radius:50%;background:rgba(99,91,255,.08)}.dashboard-stat .stat-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#eeedff;color:var(--primary);font-size:1.1rem;margin:0 auto .85rem}.dashboard-stat h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:2rem;font-weight:800;letter-spacing:-.06em;margin:.25rem 0}.dashboard-stat h6{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;font-size:.72rem}
.category-card,.png-card,.pack-card{height:100%;transition:transform .2s ease,box-shadow .2s ease}.category-card:hover,.png-card:hover,.pack-card:hover{transform:translateY(-4px);box-shadow:0 17px 30px rgba(25,42,70,.12)}.category-card .card-img-top{height:175px;object-fit:cover;background:#f1f3f8}.png-card{padding:0!important;overflow:hidden}.png-card img{height:175px;object-fit:contain;padding:1rem;background:#f8f9fc}.png-card .action-bar,.pack-card .action-bar{border-top:1px solid var(--line);gap:.45rem}.png-card .action-bar{padding:.7rem!important;justify-content:center}.png-card .btn,.pack-card .btn{min-width:42px;padding:.48rem .65rem}.pack-card{margin:0!important;padding:0!important;overflow:visible}.pack-card-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.2rem;border-bottom:1px solid var(--line)}.pack-card-title{margin:0;font-family:'Plus Jakarta Sans',sans-serif;font-size:1.05rem;font-weight:700;letter-spacing:-.03em}.pack-card-actions{display:flex;gap:.45rem;flex-shrink:0}.pack-sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:.8rem;padding:1.15rem}.pack-sticker{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#fff}.pack-sticker-image{display:block;width:100%;height:115px;object-fit:contain;padding:.55rem;background:#f8f9fc}.pack-sticker-name{display:block;overflow:hidden;padding:.5rem .6rem;white-space:nowrap;text-overflow:ellipsis;color:var(--ink);font-size:.76rem;font-weight:700}.pack-sticker-actions{display:flex;gap:.35rem;padding:.45rem;border-top:1px solid var(--line)}.pack-sticker-actions .btn{flex:1;min-width:0;padding:.38rem}.pack-empty{padding:1rem 1.2rem;color:var(--muted);font-size:.88rem}.pack-card-wrap{margin-bottom:1.5rem}.png-grid-item{margin-bottom:1.25rem}
.pagination{gap:.35rem;justify-content:center;margin:1.75rem 0}.page-link{border:1px solid var(--line);border-radius:8px!important;color:var(--primary);min-width:37px;text-align:center;margin:0 2px}.page-item.active .page-link{background:var(--primary);border-color:var(--primary)}.page-item.disabled>span{padding:.375rem .75rem;color:#98a2b3}
.login-page{background:radial-gradient(circle at top left,#e9e8ff 0,transparent 34%),radial-gradient(circle at bottom right,#ffeadf 0,transparent 30%),#f7f8fc}.login-card{max-width:420px;border:0;border-radius:22px;box-shadow:0 22px 60px rgba(40,45,85,.15)}.login-card .brand-mark{width:58px;height:58px;border-radius:16px;object-fit:cover;box-shadow:0 8px 18px rgba(99,91,255,.22)}.login-card h1{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.55rem;margin:1rem 0 .2rem}.login-card .card-body{padding:2.25rem}
@media(max-width:991px){.navbar{padding:.75rem 1rem!important}.navbar-nav{padding:.6rem 0}.container-fluid,.page-wrapper>.container{padding:1.5rem 1rem}.navbar .nav-link{margin:.08rem 0}.page-titles{gap:1rem}.page-titles .pull-right{float:none!important}}@media(max-width:575px){.page-titles h3{font-size:1.35rem}.card-body{padding:1rem}.input-group>.col-form-label{width:100%;padding-top:0}.input-group>.col-md-10{width:100%}.dashboard-stat h1{font-size:1.7rem}.pack-card-head{align-items:flex-start}.pack-sticker-grid{padding:.8rem}.pack-sticker{flex-basis:118px}}

/* Compact horizontal sticker strip within each pack. */
.pack-sticker-grid{display:flex;gap:.8rem;overflow-x:auto;overscroll-behavior-inline:contain;padding:1.15rem;scroll-snap-type:x proximity;scrollbar-color:#b9c1d0 transparent;scrollbar-width:thin}.pack-sticker-grid::-webkit-scrollbar{height:8px}.pack-sticker-grid::-webkit-scrollbar-thumb{background:#b9c1d0;border-radius:999px}.pack-sticker{flex:0 0 132px;scroll-snap-align:start}