/* ==========================================================================
   Theme Pack 164 — BARK  (v1.9.0)
   Re-brand per app: change only --tp-h (0-360). It is declared on <html>
   together with data-theme, as required by the pack.
   Every component in app.css / admin.css uses var(--tp-*) exclusively.
   ========================================================================== */

@keyframes tp-pop{0%{transform:scale(.88);opacity:0}62%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
@keyframes tp-up{from{transform:translateY(var(--tp-reveal-dist,16px));opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes tp-down{from{transform:translateY(-16px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes tp-sheet{from{transform:translateY(102%)}to{transform:translateY(0)}}
@keyframes tp-fade{from{opacity:0}to{opacity:1}}
@keyframes tp-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes tp-curtain{from{clip-path:inset(100% 0 0 0);transform:translateY(var(--tp-reveal-dist,16px))}to{clip-path:inset(0 0 0 0);transform:translateY(0)}}
@keyframes tp-rise{from{clip-path:inset(0 0 100% 0);transform:translateY(var(--tp-reveal-dist,16px))}to{clip-path:inset(0 0 0 0);transform:translateY(0)}}
@keyframes tp-blur-in{from{opacity:0;filter:blur(16px);transform:scale(1.05) translateY(var(--tp-reveal-dist,16px))}to{opacity:1;filter:blur(0);transform:scale(1) translateY(0)}}
@keyframes tp-glitch{0%{opacity:0;transform:translate3d(-6px,0,0);clip-path:inset(40% 0 38% 0)}18%{opacity:1;transform:translate3d(5px,0,0);clip-path:inset(12% 0 62% 0)}36%{transform:translate3d(-3px,0,0);clip-path:inset(68% 0 6% 0)}54%{transform:translate3d(2px,0,0);clip-path:inset(0 0 0 0)}72%{transform:translate3d(-1px,0,0)}100%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes tp-tape{from{opacity:0;transform:rotate(-9deg) translateY(var(--tp-reveal-dist,16px)) scale(.95)}to{opacity:1;transform:rotate(var(--tp-img-tilt,0deg)) translateY(0) scale(1)}}
@keyframes tp-zoom{from{transform:scale(1.16)}to{transform:scale(1)}}
@keyframes tp-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tp-shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(3px)}50%{transform:translateX(-4px)}}
@keyframes tp-pulse{0%,100%{opacity:1}50%{opacity:.42}}
@keyframes tp-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes tp-shimmer{from{background-position:-160% 0}to{background-position:260% 0}}
@keyframes tp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes tp-spin{to{transform:rotate(360deg)}}
@keyframes tp-blink{50%{opacity:0}}
@keyframes tp-tilt{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes tp-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4%,-3%,0) scale(1.12)}100%{transform:translate3d(0,0,0) scale(1)}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}

.tp-web-stage{position:relative;isolation:isolate;overflow:hidden;animation:var(--tp-3d-web,none);transform-origin:50% 50%}
.tp-web-stage>.tp-fx{inset:-20%}
.tp-fx{position:absolute;inset:-40%;z-index:-1;pointer-events:none;background:var(--tp-fx);background-size:var(--tp-fx-size);opacity:var(--tp-fx-op);mix-blend-mode:var(--tp-fx-blend);transform:var(--tp-fx-tf);animation:var(--tp-fx-anim)}
.tp-screen{position:relative;isolation:isolate;overflow:hidden}
.tp-stage{transform:var(--tp-3d);animation:var(--tp-3d-anim);transform-style:preserve-3d}

[data-theme="academy"]{--tp-h:220;--tp-fx:radial-gradient(circle at 18% 15%,rgba(241,183,28,.16),transparent 25%),radial-gradient(circle at 85% 78%,rgba(54,113,191,.13),transparent 28%);--tp-fx-size:auto;--tp-fx-anim:tp-drift 16s ease-in-out infinite;--tp-fx-op:1;--tp-fx-blend:normal;--tp-fx-tf:none;--tp-3d:none;--tp-3d-anim:none;--tp-3d-web:none;--tp-dur-slow:620ms;--tp-stagger:70ms;--tp-reveal:tp-up;--tp-reveal-dist:20px;--tp-img-r:24px;--tp-img-frame:none;--tp-img-sh:0 24px 70px rgba(16,42,94,.16);--tp-img-filter:saturate(1.03) contrast(1.02);--tp-img-overlay-op:0;--tp-img-blend:normal;--tp-img-tilt:0deg;--tp-img-ar:4 / 3;--tp-bg:#f4f7fc;--tp-canvas:linear-gradient(180deg,#fbfcff 0%,#f5f8fd 52%,#ffffff 100%);--tp-surf:#ffffff;--tp-surf-2:#edf3fb;--tp-ink:#102a5e;--tp-mute:#61708d;--tp-acc:#f1b71c;--tp-acc-2:#2f69b3;--tp-acc-ink:#102a5e;--tp-line:#dbe4f1;--tp-grad:linear-gradient(135deg,#102a5e,#2f69b3 64%,#4d88cf);--tp-r:14px;--tp-r-sm:9px;--tp-r-lg:28px;--tp-r-btn:99px;--tp-sh:0 28px 80px rgba(16,42,94,.13);--tp-sh-sm:0 12px 32px rgba(16,42,94,.09);--tp-bw:1px;--tp-font-display:'Outfit',system-ui,sans-serif;--tp-font-body:'Manrope',system-ui,sans-serif;--tp-font-mono:'Manrope',system-ui,sans-serif;--tp-w-display:700;--tp-track-display:-0.035em;--tp-case-display:none;--tp-hero:clamp(50px,6vw,86px);--tp-dur:220ms;--tp-ease:cubic-bezier(.22,1,.36,1);--tp-press:.97;--tp-tex:none;--tp-blur:blur(18px);}

/* --------------------------------------------------------------------------
   Layout + typography scale.
   The pack's token set does not define a spacing scale, a shell width or
   intermediate text sizes; these are the token proposals for this app so that
   no component has to inline a raw value.
   -------------------------------------------------------------------------- */
[data-theme="academy"]{
    --tp-ar-font-display:'Noto Kufi Arabic', 'Bricolage Grotesque', system-ui;
    --tp-ar-font-body:'IBM Plex Sans Arabic', 'DM Sans', system-ui;
    --tp-text-xs:12px;
    --tp-text-sm:13px;
    --tp-text-base:16px;
    --tp-text-md:17px;
    --tp-text-lg:20px;
    --tp-text-xl:26px;
    --tp-text-2xl:34px;
    --tp-text-3xl:44px;
    --tp-space-1:4px;
    --tp-space-2:8px;
    --tp-space-3:12px;
    --tp-space-4:16px;
    --tp-space-5:22px;
    --tp-space-6:30px;
    --tp-space-7:44px;
    --tp-space-8:64px;
    --tp-shell:1240px;
    --tp-shell-narrow:760px;
    --tp-header-h:84px;
    --tp-tap:44px;
}

/* Arabic script: swap the display/body stacks, keep the same tokens. */
html[lang="ar"],
html[lang="ar"][data-theme="academy"]{--tp-font-display:var(--tp-ar-font-display);--tp-font-body:var(--tp-ar-font-body)}

/* Wraps every photo in the theme's image treatment. */
.tp-media{position:relative;overflow:hidden;aspect-ratio:var(--tp-img-ar);border-radius:var(--tp-img-r);border:var(--tp-img-frame);box-shadow:var(--tp-img-sh);filter:var(--tp-img-filter);transform:rotate(var(--tp-img-tilt));margin:0;background:var(--tp-grad)}
.tp-media>img,.tp-media>video{display:block;width:100%;height:100%;object-fit:cover}
.tp-media::after{content:"";position:absolute;inset:0;background:var(--tp-grad);opacity:var(--tp-img-overlay-op);mix-blend-mode:var(--tp-img-blend);pointer-events:none}