/* Hatantsetseglash — Transition System (light theme) */
:root{--joy-accent:#D4898A;--joy-border:#e8e2e2;}

.joy-transition-overlay{position:fixed;inset:0;z-index:9998;pointer-events:none;background:rgba(255,255,255,.5);opacity:0;transition:opacity .24s cubic-bezier(.4,0,.2,1)}
.joy-transition-overlay.active{opacity:1}

.joy-progress{position:fixed;top:0;left:0;height:2px;width:0%;z-index:10000;background:linear-gradient(90deg,transparent,rgba(212,137,138,.7) 30%,#E8B4B5 50%,rgba(212,137,138,.7) 70%,transparent);background-size:200% 100%;box-shadow:0 0 10px rgba(212,137,138,.4);opacity:0;transition:width .35s cubic-bezier(.2,.8,.2,1),opacity .25s ease;animation:joyShimmer 1.1s linear infinite;animation-play-state:paused}
.joy-progress.run{opacity:1;width:78%;animation-play-state:running}
.joy-progress.done{width:100%;opacity:0;transition:width .25s ease,opacity .35s ease .1s}
@keyframes joyShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.joy-i18n{position:fixed;top:10px;right:56px;z-index:250;display:inline-flex;align-items:stretch;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border:1px solid #e8e2e2;border-radius:6px;padding:2px;pointer-events:auto}
.joy-i18n button{border:none;background:transparent;color:#a08888;padding:5px 10px;border-radius:4px;font-family:inherit;font-weight:800;font-size:.6rem;letter-spacing:.6px;cursor:pointer;transition:color .15s,background .15s;min-width:28px}
.joy-i18n button.active{background:rgba(212,137,138,.15);color:#D4898A;box-shadow:0 0 0 1px rgba(212,137,138,.2)}
.joy-i18n button:hover:not(.active){color:#1e1414}
@media(min-width:1024px){.joy-i18n{top:16px;right:80px;padding:3px}.joy-i18n button{font-size:.68rem;padding:6px 12px}}

body.joy-loading-hold{opacity:0!important}
body.joy-leaving{transition:opacity .22s ease,transform .22s cubic-bezier(.4,0,.2,1),filter .22s ease;opacity:.5;transform:translateY(-5px);filter:blur(.3px)}
body.joy-entering{animation:joyPageIn .42s cubic-bezier(.2,.8,.2,1)}
@keyframes joyPageIn{0%{opacity:0;transform:translateY(8px)}60%{opacity:1}100%{opacity:1;transform:translateY(0)}}

.joy-fade{opacity:0;transform:translateY(16px);transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1)}
.joy-fade.show{opacity:1;transform:translateY(0)}
.joy-fade[data-step="1"]{transition-delay:0s}.joy-fade[data-step="2"]{transition-delay:.07s}.joy-fade[data-step="3"]{transition-delay:.14s}.joy-fade[data-step="4"]{transition-delay:.21s}.joy-fade[data-step="5"]{transition-delay:.28s}.joy-fade[data-step="6"]{transition-delay:.35s}.joy-fade[data-step="7"]{transition-delay:.42s}.joy-fade[data-step="8"]{transition-delay:.49s}.joy-fade[data-step="9"]{transition-delay:.56s}.joy-fade[data-step="10"]{transition-delay:.63s}.joy-fade[data-step="11"]{transition-delay:.70s}.joy-fade[data-step="12"]{transition-delay:.77s}
.joy-scroll-in{opacity:0;transform:translateY(16px);transition:opacity .45s cubic-bezier(.4,0,.2,1),transform .45s cubic-bezier(.4,0,.2,1)}
.joy-scroll-in.show{opacity:1;transform:translateY(0)}

/* bottom bar — light */
body.joy-has-injected-bar{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
body.is-admin{padding-bottom:0!important}
body.is-admin .bottom-bar,body.is-admin .joy-fab,body.is-admin .joy-i18n{display:none!important}
.bottom-bar{position:fixed;bottom:0;left:0;right:0;z-index:300;background:rgba(255,255,255,.95);border-top:1px solid #e8e2e2;backdrop-filter:blur(20px);padding-bottom:env(safe-area-inset-bottom);transition:transform .35s cubic-bezier(.4,0,.2,1);will-change:transform}
.bottom-bar.bar-hidden{transform:translateY(100%)!important}
@media(min-width:1024px){.bottom-bar.bar-hidden{transform:translateY(-100%)!important}}
.bottom-bar-inner{display:flex;justify-content:space-around;align-items:stretch;height:52px;max-width:420px;margin:0 auto}
.bar-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:#c0a8a8;font-size:.46rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:0 10px;transition:color .15s;position:relative;flex:1}
.bar-item::before{content:'';position:absolute;top:0;left:25%;right:25%;height:2px;border-radius:0 0 2px 2px;background:var(--joy-accent);opacity:0;transition:opacity .2s,transform .2s;transform:scaleX(.4)}
.bar-item.bar-active{color:var(--joy-accent)}
.bar-item.bar-active::before{opacity:1;transform:scaleX(1)}
.bar-item svg{width:18px;height:18px;flex-shrink:0}
@media(min-width:1024px){.bottom-bar{height:56px}.bottom-bar-inner{max-width:1200px;height:56px}.bar-item{font-size:.52rem;flex-direction:row;gap:6px}body.joy-has-injected-bar{padding-bottom:64px}}

/* FAB */
.joy-fab{position:fixed;z-index:400;right:14px;bottom:calc(60px + env(safe-area-inset-bottom) + 14px);width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(212,137,138,.4);background:linear-gradient(135deg,#E8B4B5,#D4898A);color:#fff;text-decoration:none;box-shadow:0 8px 24px rgba(212,137,138,.3),0 2px 6px rgba(0,0,0,.08);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .25s;cursor:pointer;overflow:hidden}
.joy-fab:hover{transform:translateY(-2px) scale(1.04)}
.joy-fab:active{transform:scale(.94)}
.joy-fab svg{width:22px;height:22px;position:relative;z-index:1}
.joy-fab .joy-fab-ring{position:absolute;inset:-6px;border-radius:18px;border:2px solid rgba(212,137,138,.4);animation:joyFabRing 2.4s ease-out infinite;pointer-events:none}
@keyframes joyFabRing{0%{transform:scale(.9);opacity:.6}70%{transform:scale(1.25);opacity:0}100%{transform:scale(1.25);opacity:0}}
.joy-fab-label{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);background:rgba(0,0,0,.75);color:#fff;padding:6px 10px;border-radius:6px;font-size:.68rem;font-weight:700;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s}
.joy-fab:hover .joy-fab-label{opacity:1}
@media(min-width:1024px){.joy-fab{right:32px;bottom:calc(56px + 28px);width:60px;height:60px}.joy-fab svg{width:26px;height:26px}}

/* inputs focus */
.form-input:focus,.form-textarea:focus,.form-select:focus,.auth-input:focus,.field-input:focus,.search-input:focus{box-shadow:0 0 0 2px rgba(212,137,138,.2)}

/* success pop */
.success-msg.show .success-icon{animation:successPop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes successPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.submit-btn:active,.save-btn:active,.auth-btn:active{transform:scale(.97);transition:transform .08s}

/* skeleton */
.skel{background:#ede9e9;border-radius:6px;position:relative;overflow:hidden}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:skelPulse 1.5s infinite}
@keyframes skelPulse{100%{transform:translateX(100%)}}
.skel-wrap{transition:opacity .3s ease}
.skel-wrap.gone{opacity:0;pointer-events:none;position:absolute}
.skel-line{height:12px;border-radius:6px}
.skel-page{position:fixed;inset:0;z-index:9000;background:#fff;overflow-y:auto;transition:opacity .35s ease;padding:64px 16px calc(60px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}
.skel-page.gone{opacity:0;pointer-events:none}
.skel-page>.skel,.skel-page>.skel-row>.skel{width:100%;max-width:420px;margin:0 auto}
@media(min-width:1024px){.skel-page{padding:80px 40px calc(64px + 24px)}.skel-page>.skel{max-width:1200px}}
.skel-block{background:#ede9e9;background-size:200% 100%;animation:skelPulse 1.4s ease-in-out infinite;border-radius:6px;max-width:420px;margin:0 auto;width:100%}
@media(min-width:1024px){.skel-block{max-width:1200px}}

/* form skeletons */
.skel-page.tpl-form .skel-fm-header{height:48px;border-radius:6px}
.skel-page.tpl-form .skel-fm-intro{height:80px;border-radius:6px;margin-top:6px}
.skel-page.tpl-form .skel-fm-label{height:10px;width:90px;border-radius:3px;margin-top:8px}
.skel-page.tpl-form .skel-fm-input{height:44px;border-radius:8px}
.skel-page.tpl-form .skel-fm-textarea{height:90px;border-radius:8px}
.skel-page.tpl-form .skel-fm-submit{height:48px;border-radius:30px;margin-top:12px;background:linear-gradient(90deg,rgba(212,137,138,.12) 25%,rgba(212,137,138,.22) 50%,rgba(212,137,138,.12) 75%);background-size:200% 100%}

/* menu skeletons */
.skel-page.tpl-menu .skel-mn-header{height:48px;border-radius:6px}
.skel-page.tpl-menu .skel-mn-section{height:14px;width:130px;border-radius:3px;margin-top:14px}
.skel-page.tpl-menu .skel-mn-item{display:flex;gap:12px;align-items:center;padding:10px;border-radius:8px;background:rgba(0,0,0,.03);max-width:420px;margin:0 auto;width:100%}
@media(min-width:1024px){.skel-page.tpl-menu .skel-mn-item{max-width:1200px}}
.skel-page.tpl-menu .skel-mn-item .thumb{width:56px;height:56px;border-radius:8px;flex-shrink:0;background:#ede9e9}
.skel-page.tpl-menu .skel-mn-item .body{flex:1;display:flex;flex-direction:column;gap:6px}
.skel-page.tpl-menu .skel-mn-item .body span{height:12px;border-radius:3px;background:#ede9e9}
.skel-page.tpl-menu .skel-mn-item .body span:first-child{width:70%}
.skel-page.tpl-menu .skel-mn-item .body span:last-child{width:35%}

/* article skeletons */
.skel-page.tpl-article .skel-art-hero{height:220px;border-radius:10px}
.skel-page.tpl-article .skel-art-badge{height:18px;width:110px;border-radius:100px;margin-top:6px}
.skel-page.tpl-article .skel-art-title{height:28px;width:70%;border-radius:4px}
.skel-page.tpl-article .skel-art-line{height:10px;border-radius:4px}
.skel-page.tpl-article .skel-art-line.s2{width:95%}
.skel-page.tpl-article .skel-art-line.s3{width:85%}
.skel-page.tpl-article .skel-art-feat{height:76px;border-radius:8px;margin-top:6px}

@media(prefers-reduced-motion:reduce){
  .joy-fade,.joy-scroll-in,body.joy-entering,body.joy-leaving{opacity:1!important;transform:none!important;transition:none!important;animation:none!important;filter:none!important}
  .bottom-bar{transition:none!important}
  .joy-fab .joy-fab-ring,.joy-progress{animation:none!important}
}
dding: 0 0 32px; } }

.skel-page {
  position: fixed; inset: 0; z-index: 9000; background: var(--bg, #000);
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  transition: opacity .35s ease; padding: 64px 16px calc(60px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
}
.skel-page.gone { opacity: 0; pointer-events: none; }
.skel-page > .skel, .skel-page > .skel-row > .skel { width: 100%; max-width: 420px; margin: 0 auto; }
@media(min-width:1024px) { .skel-page { padding: 80px 40px calc(64px + 24px); gap: 18px; } .skel-page > .skel, .skel-page > .skel-row > .skel { max-width: 1200px; } }
.skel-row { display: flex; gap: 8px; justify-content: center; max-width: 420px; margin: 0 auto; width: 100%; }
.skel-block {
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);
  background-size: 200% 100%; animation: skelPulse 1.4s ease-in-out infinite;
  border-radius: 4px; max-width: 420px; margin: 0 auto; width: 100%;
}
@media(min-width:1024px) { .skel-block { max-width: 1200px; } }

.skel-page.tpl-article .skel-art-hero   { height: 220px; border-radius: 8px; }
.skel-page.tpl-article .skel-art-badge  { height: 18px; width: 110px; border-radius: 100px; margin-top: 6px; }
.skel-page.tpl-article .skel-art-title  { height: 26px; width: 70%; border-radius: 4px; }
.skel-page.tpl-article .skel-art-line   { height: 10px; border-radius: 4px; }
.skel-page.tpl-article .skel-art-line.s2{ width: 95%; }
.skel-page.tpl-article .skel-art-line.s3{ width: 85%; }
.skel-page.tpl-article .skel-art-feat   { height: 76px; border-radius: 6px; margin-top: 6px; }
@media(min-width:1024px) { .skel-page.tpl-article .skel-art-hero { height: 320px; } .skel-page.tpl-article .skel-art-title { height: 36px; } }

.skel-page.tpl-form .skel-fm-header  { height: 48px; border-radius: 6px; }
.skel-page.tpl-form .skel-fm-intro   { height: 96px; border-radius: 6px; margin-top: 6px; }
.skel-page.tpl-form .skel-fm-label   { height: 10px; width: 90px; border-radius: 3px; margin-top: 8px; }
.skel-page.tpl-form .skel-fm-input   { height: 46px; border-radius: 4px; }
.skel-page.tpl-form .skel-fm-textarea { height: 96px; border-radius: 4px; }
.skel-page.tpl-form .skel-fm-submit  {
  height: 50px; border-radius: 4px; margin-top: 12px;
  background: linear-gradient(90deg, rgba(212,137,138,.15) 25%, rgba(212,137,138,.28) 50%, rgba(212,137,138,.15) 75%);
  background-size: 200% 100%;
}
.skel-page.tpl-menu .skel-mn-header  { height: 48px; border-radius: 6px; }
.skel-page.tpl-menu .skel-mn-section { height: 14px; width: 130px; border-radius: 3px; margin-top: 14px; }
.skel-page.tpl-menu .skel-mn-item {
  display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 6px;
  background: rgba(255,255,255,.025); max-width: 420px; margin: 0 auto; width: 100%;
}
@media(min-width:1024px) { .skel-page.tpl-menu .skel-mn-item { max-width: 1200px; } }
.skel-page.tpl-menu .skel-mn-item .thumb { width: 56px; height: 56px; border-radius: 6px; flex-shrink: 0; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.1), rgba(255,255,255,.04)); background-size: 200% 100%; animation: skelPulse 1.4s ease-in-out infinite; }
.skel-page.tpl-menu .skel-mn-item .body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.skel-page.tpl-menu .skel-mn-item .body span { height: 12px; border-radius: 3px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.1), rgba(255,255,255,.04)); background-size: 200% 100%; animation: skelPulse 1.4s ease-in-out infinite; }
.skel-page.tpl-menu .skel-mn-item .body span:first-child { width: 70%; }
.skel-page.tpl-menu .skel-mn-item .body span:last-child  { width: 35%; }

.skel-detail { padding: 0 0 24px; }
.skel-detail .skel-back { width: 84px; height: 14px; margin: 14px 16px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06)); background-size: 200% 100%; animation: skelPulse 1.4s ease-in-out infinite; }
.skel-detail .skel-hero { width: 100%; aspect-ratio: 3/4; background: #0d0305; position: relative; overflow: hidden; }
.skel-detail .skel-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(255,255,255,.03), rgba(255,255,255,.08), rgba(255,255,255,.03)); background-size: 200% 200%; animation: skelPulse 1.6s ease-in-out infinite; }
.skel-detail .skel-content { padding: 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.skel-detail .skel-content .skel-line.long { width: 92%; }
.skel-detail .skel-content .skel-line.med  { width: 75%; }
.skel-detail .skel-actions { padding: 8px 16px 0; display: flex; flex-direction: column; gap: 10px; }
.skel-detail .skel-action { width: 100%; height: 50px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 200% 100%; animation: skelPulse 1.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .joy-fade, .joy-scroll-in, body.joy-entering, body.joy-leaving { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; filter: none !important; }
  .bottom-bar { transition: none !important; }
  .joy-fab .joy-fab-ring, .joy-progress { animation: none !important; }
}