:root{--pn-primary:#0b7bc1;--pn-primary-soft:#e6f3fb;--pn-bg:#f4f8fb;--pn-card:#fff;--pn-border:#dbe8f2;--pn-text:#1d2b36;--pn-side:#fff;--pn-radius:.85rem}
[data-bs-theme=dark]{--pn-primary-soft:#12324a;--pn-bg:#0f1720;--pn-card:#17212c;--pn-border:#263646;--pn-text:#e6edf3;--pn-side:#131c26}
html,body{height:100%}
body{background:var(--pn-bg);color:var(--pn-text);-webkit-tap-highlight-color:transparent}
.btn-primary{--bs-btn-bg:#0b7bc1;--bs-btn-border-color:#0b7bc1;--bs-btn-hover-bg:#0969a5;--bs-btn-hover-border-color:#0969a5;--bs-btn-active-bg:#085a8e}
.btn-outline-primary{--bs-btn-color:#0b7bc1;--bs-btn-border-color:#0b7bc1;--bs-btn-hover-bg:#0b7bc1;--bs-btn-hover-border-color:#0b7bc1}
a{color:#0b7bc1}
.btn,.form-control,.form-select{min-height:2.5rem}
.pn-icon{flex:none;vertical-align:-.2em}
.pn-brand{font-weight:700;color:var(--pn-primary);letter-spacing:.2px}
.pn-logo{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:.9rem;background:var(--pn-primary);color:#fff;font-weight:800}
.pn-logo.sm{width:2rem;height:2rem;border-radius:.6rem;font-size:.8rem}
.pn-card{background:var(--pn-card);border:1px solid var(--pn-border);border-radius:var(--pn-radius);box-shadow:0 1px 2px rgba(11,123,193,.06)}
.pn-auth-wrap{max-width:26rem;margin:0 auto;padding:2rem 1rem}
/* shell */
.pn-shell{display:flex;min-height:100%}
.pn-sidebar{width:16rem;background:var(--pn-side);border-right:1px solid var(--pn-border)}
@media(min-width:992px){.pn-sidebar{position:sticky;top:0;height:100vh;flex:none}}
.pn-side-brand{align-items:center;gap:.6rem;padding:1rem}
.pn-nav .nav-link{display:flex;align-items:center;gap:.7rem;color:var(--pn-text);padding:.65rem .8rem;border-radius:.6rem;margin-bottom:.15rem}
.pn-nav .nav-link:hover{background:var(--pn-primary-soft)}
.pn-nav .nav-link.active{background:var(--pn-primary-soft);color:var(--pn-primary);font-weight:600}
.pn-main{flex:1;min-width:0;display:flex;flex-direction:column}
.pn-topbar{display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;padding-top:calc(.6rem + env(safe-area-inset-top));background:var(--pn-card);border-bottom:1px solid var(--pn-border);position:sticky;top:0;z-index:20}
.pn-search{flex:1 1 auto;max-width:28rem}
.pn-status{display:flex;align-items:center;gap:.4rem}
.pn-content{padding:1rem;padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));max-width:72rem;width:100%;margin:0 auto}
@media(min-width:768px){.pn-content{padding:1.5rem}}
/* components */
.pn-stat{padding:1rem;display:block;color:inherit;text-decoration:none}
.pn-stat .num{font-size:1.6rem;font-weight:700;line-height:1.1}
.pn-stat .lbl{font-size:.8rem;color:var(--bs-secondary-color)}
a.pn-stat:hover{border-color:var(--pn-primary)}
.pn-empty{text-align:center;padding:2.5rem 1rem;color:var(--bs-secondary-color)}
.pn-note{padding:.9rem 1rem;border-left:.3rem solid transparent;cursor:pointer;height:100%}
.pn-note h3{font-size:1rem;margin:0 0 .25rem}
.pn-note .snip{font-size:.88rem;color:var(--bs-secondary-color);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;word-break:break-word}
.pn-c-red{border-left-color:#e5534b}.pn-c-orange{border-left-color:#f0883e}.pn-c-green{border-left-color:#3fb950}.pn-c-blue{border-left-color:#0b7bc1}.pn-c-purple{border-left-color:#a371f7}
.pn-editor{min-height:50vh;resize:vertical}
.pn-skel{background:linear-gradient(90deg,var(--pn-border),var(--pn-primary-soft),var(--pn-border));background-size:200% 100%;animation:pn-sh 1.2s infinite;border-radius:.6rem;height:4.5rem}
@keyframes pn-sh{to{background-position:-200% 0}}
.pn-task.done .t{text-decoration:line-through;opacity:.6}
.pn-overdue{color:#c0392b;font-weight:600}
.pn-sync-dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:#6c757d;margin-right:.3rem}
.pn-pending{opacity:.75}
.pn-item-row{display:flex;align-items:center;gap:.6rem;padding:.55rem 0;border-bottom:1px solid var(--pn-border)}
.pn-item-row.bought .nm{text-decoration:line-through;opacity:.6}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.pn-sidebar,.pn-topbar,.no-print{display:none!important}.pn-content{max-width:none;padding:0}}

/* ===== premium layer: depth, motion, hero, slider ===== */
:root{--pn-glass:rgba(255,255,255,.8);--pn-shadow:0 1px 2px rgba(11,60,100,.06),0 10px 26px -14px rgba(11,123,193,.28);--pn-ease:cubic-bezier(.2,.7,.2,1)}
[data-bs-theme=dark]{--pn-glass:rgba(19,28,38,.8);--pn-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -16px rgba(0,0,0,.75)}
body{transition:background-color .35s,color .35s}
.pn-card{box-shadow:var(--pn-shadow);transition:transform .25s var(--pn-ease),box-shadow .25s,border-color .25s,background-color .35s}
.pn-topbar{background:var(--pn-glass);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px)}
.btn{transition:transform .15s var(--pn-ease),box-shadow .2s,background-color .2s,border-color .2s}.btn:active{transform:scale(.96)}
.btn-primary{background-image:linear-gradient(135deg,#25a0e6,#0b7bc1);box-shadow:0 8px 18px -10px rgba(11,123,193,.9)}
.pn-nav .nav-link{position:relative;transition:background .2s,transform .2s,color .2s}.pn-nav .nav-link:hover{transform:translateX(3px)}
.pn-nav .nav-link.active::before{content:"";position:absolute;left:-.5rem;top:22%;bottom:22%;width:.28rem;border-radius:0 .3rem .3rem 0;background:var(--pn-primary);animation:pn-bar .4s var(--pn-ease)}
@keyframes pn-bar{from{transform:scaleY(0)}}
.pn-hero{position:relative;overflow:hidden;border-radius:1.15rem;padding:1.25rem 1.25rem 1.1rem;color:#fff;background:linear-gradient(135deg,#0a67ab 0%,#1f9be0 55%,#74c8f4 100%);box-shadow:0 22px 44px -24px rgba(11,123,193,.95)}
[data-bs-theme=dark] .pn-hero{background:linear-gradient(135deg,#0a4f82 0%,#1479b8 55%,#3aa3da 100%)}
.pn-hero::before,.pn-hero::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.14);animation:pn-float 9s ease-in-out infinite}
.pn-hero::before{width:11rem;height:11rem;right:-3rem;top:-4.5rem}.pn-hero::after{width:7rem;height:7rem;right:5.5rem;bottom:-4rem;animation-delay:-4s}
@keyframes pn-float{50%{transform:translateY(14px) scale(1.07)}}
.pn-hero>*{position:relative;z-index:1;animation:pn-rise .6s var(--pn-ease) both}
.pn-hero .text-body-secondary{color:rgba(255,255,255,.85)!important}
.pn-hero h1{font-weight:700;letter-spacing:-.2px}
.pn-hero .btn-outline-primary{--bs-btn-color:#fff;--bs-btn-border-color:rgba(255,255,255,.7);--bs-btn-hover-bg:rgba(255,255,255,.22);--bs-btn-hover-border-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-bg:rgba(255,255,255,.3);--bs-btn-active-color:#fff}
.pn-hero .btn-primary{--bs-btn-color:#0a67ab;--bs-btn-hover-color:#0a67ab;background:#fff;border-color:#fff;background-image:none;box-shadow:0 8px 18px -10px rgba(0,0,0,.5)}
.pn-stat{display:flex;gap:.8rem;align-items:center;overflow:hidden}
.pn-stat>div{min-width:0}.pn-stat .num{font-size:clamp(1.15rem,4.8vw,1.6rem);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
a.pn-stat:hover{transform:translateY(-4px);box-shadow:0 18px 32px -18px rgba(11,123,193,.55)}
.pn-chip{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;border-radius:.9rem;background:var(--pn-primary-soft);color:var(--pn-primary);transition:transform .3s var(--pn-ease)}
a.pn-stat:hover .pn-chip{transform:rotate(-8deg) scale(1.12)}
.pn-stagger>*:nth-child(4n+2) .pn-chip{background:#e6f6ee;color:#1b8a4b}.pn-stagger>*:nth-child(4n+3) .pn-chip{background:#fff1dd;color:#c26a00}.pn-stagger>*:nth-child(4n) .pn-chip{background:#efe9fd;color:#6b46d6}
[data-bs-theme=dark] .pn-stagger>*:nth-child(4n+2) .pn-chip{background:#12342a;color:#4fd08a}[data-bs-theme=dark] .pn-stagger>*:nth-child(4n+3) .pn-chip{background:#3a2a10;color:#f3a54a}[data-bs-theme=dark] .pn-stagger>*:nth-child(4n) .pn-chip{background:#2a2250;color:#a98dff}
.pn-stagger>*{animation:pn-rise .55s var(--pn-ease) both}
@keyframes pn-rise{from{opacity:0;transform:translateY(14px) scale(.98)}}
.pn-stagger>*:nth-child(1){animation-delay:0.03s}
.pn-stagger>*:nth-child(2){animation-delay:0.08s}
.pn-stagger>*:nth-child(3){animation-delay:0.14s}
.pn-stagger>*:nth-child(4){animation-delay:0.20s}
.pn-stagger>*:nth-child(5){animation-delay:0.25s}
.pn-stagger>*:nth-child(6){animation-delay:0.31s}
.pn-stagger>*:nth-child(7){animation-delay:0.36s}
.pn-stagger>*:nth-child(8){animation-delay:0.42s}
.pn-stagger>*:nth-child(9){animation-delay:0.47s}
.pn-stagger>*:nth-child(10){animation-delay:0.53s}
.pn-stagger>*:nth-child(11){animation-delay:0.58s}
.pn-stagger>*:nth-child(12){animation-delay:0.64s}
.pn-content>*{animation:pn-fade .4s ease both}@keyframes pn-fade{from{opacity:0}}
.toast{animation:pn-rise .35s var(--pn-ease) both}
/* admin section slider */
.pn-slider{position:relative;margin:0 -.25rem 1rem}
.pn-sl-track{display:flex;gap:.65rem;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:.4rem .25rem .9rem;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 1.1rem,#000 calc(100% - 1.1rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 1.1rem,#000 calc(100% - 1.1rem),transparent)}
.pn-sl-track::-webkit-scrollbar{display:none}.pn-sl-track.drag{cursor:grabbing;scroll-snap-type:none}
.pn-sl-item{flex:none;scroll-snap-align:center;display:flex;align-items:center;gap:.65rem;min-width:11.5rem;padding:.6rem .85rem;border-radius:1rem;background:var(--pn-card);border:1px solid var(--pn-border);color:var(--pn-text);text-decoration:none;box-shadow:var(--pn-shadow);user-select:none;-webkit-user-drag:none;transition:transform .25s var(--pn-ease),background .25s,color .25s,box-shadow .25s,border-color .25s;animation:pn-rise .5s var(--pn-ease) both}
.pn-sl-item:hover{transform:translateY(-3px);border-color:var(--pn-primary);color:var(--pn-text)}
.pn-sl-item .t{font-weight:600;font-size:.9rem;line-height:1.15}
.pn-sl-item.active{background:linear-gradient(135deg,#0a72b9,#35a6e8);color:#fff;border-color:transparent;box-shadow:0 16px 28px -16px rgba(11,123,193,1)}
.pn-sl-item.active .pn-chip{background:rgba(255,255,255,.22);color:#fff}
.pn-sl-btn{position:absolute;top:42%;transform:translateY(-50%);z-index:2;width:2.2rem;height:2.2rem;padding:0;border-radius:50%;border:1px solid var(--pn-border);background:var(--pn-card);color:var(--pn-text);display:flex;align-items:center;justify-content:center;box-shadow:var(--pn-shadow);transition:opacity .2s,transform .2s}
.pn-sl-btn.prev{left:-.35rem}.pn-sl-btn.next{right:-.35rem}.pn-sl-btn:hover{transform:translateY(-50%) scale(1.1)}.pn-sl-btn[disabled]{opacity:0;pointer-events:none}
@media (hover:none){.pn-sl-btn{display:none}}