/* KissPHP v3.7: original KissKH-style slow-loader, lazy image spinners and Material feedback.
   Scoped visual behaviors only; existing grid, type, theme and single layouts remain intact. */
:root{--kh36-bg:#fffee4;--kh36-card:#424242;--kh36-pink:#ed688d}
/* Cream splash matching the saved kisskh.do screenshot; only displayed via JS on slow navigations. */
#kh-boot-loading,#kh-route-loading{position:fixed;inset:0;z-index:10000;background:var(--kh36-bg);color:#111;
 align-items:center;justify-content:center;flex-direction:column;font:400 14px/1.45 Roboto,Arial,sans-serif;
 box-sizing:border-box;pointer-events:none}
#kh-boot-loading:not(.kh36-visible),#kh-route-loading:not(.kh36-visible),#kh-boot-loading[hidden],#kh-route-loading[hidden]{display:none!important}
#kh-boot-loading.kh36-visible,#kh-route-loading.kh36-visible{display:flex!important}
.kh36-splash-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;display:flex;align-items:center;justify-content:center;margin:0}
.kh36-splash-mark>img{width:110px;height:52px;object-fit:contain;position:relative;z-index:1}
.kh36-splash-mark>svg{position:absolute;inset:0;width:100%;height:100%;animation:kh36-rotate 2s linear infinite}
.kh36-splash-mark>svg circle{stroke:#d9d8c4;stroke-width:3;fill:none;stroke-linecap:round;
 stroke-dasharray:1 200;animation:kh36-dash 1.5s ease-in-out infinite}
.kh36-loading-tagline{position:absolute;top:69%;left:0;right:0;text-align:center;margin:0;font-size:15px;font-weight:400}
.kh36-loading-help{position:absolute;top:76%;left:0;right:0;text-align:center;margin:0;font-size:12px;color:#111}
.kh36-loading-help button{border:0;background:transparent;color:#7b1fa2;font:inherit;padding:2px 3px;pointer-events:auto;cursor:pointer}
.kh36-loading-help button:hover,.kh36-loading-help button:focus-visible{text-decoration:underline}
@keyframes kh36-rotate{to{transform:rotate(360deg)}}
@keyframes kh36-dash{0%{stroke-dasharray:1 200;stroke-dashoffset:0}50%{stroke-dasharray:89 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89 200;stroke-dashoffset:-124px}}
/* Avoid visual flash of existing v3.5 route circle on dark background. */
#kh-boot-loading.kh36-visible>.kh-boot-spinner,#kh-route-loading.kh36-visible>.kh-route-spinner{display:none!important}
/* Card image loader. Native lazy image src only; one spinner while pending. */
.kh-card-img.kh36-img-pending,.kh36-account-thumb.kh36-img-pending{background:var(--kh36-card)!important;position:relative;isolation:isolate}
.kh-image-js .kh-card-img.kh36-img-pending img.kh-img-lazy,.kh-image-js .kh36-account-thumb.kh36-img-pending img.kh-img-lazy{opacity:0!important}
.kh-card-img.kh36-img-pending::after,.kh36-account-thumb.kh36-img-pending::after{content:"";position:absolute;z-index:3;pointer-events:none;
 left:50%;top:50%;width:96px;height:96px;transform:translate(-50%,-50%);
 background:url('/assets/kh36-card-spinner.svg') center/contain no-repeat;
 animation:kh36-petal 1.35s linear infinite}
@keyframes kh36-petal{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}
.kh-card-img img.kh-img-lazy.lazyloaded{opacity:1;transition:opacity .22s ease-out}
.kh-card-img.kh36-img-failed,.kh36-account-thumb.kh36-img-failed{background:var(--kh36-card)}
.kh-card-img.kh36-img-failed img.kh-img-lazy,.kh36-account-thumb.kh36-img-failed img.kh-img-lazy{visibility:hidden}
.kh-card-img.kh36-img-failed::after,.kh36-account-thumb.kh36-img-failed::after{content:"Image unavailable";position:absolute;top:50%;left:0;right:0;
 transform:translateY(-50%);text-align:center;color:#fff9;font-size:12px}
/* The original Material cards elevate on hover and expose a brief ripple on pointerdown. */
.kh-card,.kh35-mobile-item,.kh-toolbar .nav-link,.kh-toolbar .kh-signin,.kh-chip,.kh-row-controls button,.kh34-hero button{
 position:relative;isolation:isolate;overflow:hidden;-webkit-tap-highlight-color:transparent}
.kh-card{transition:box-shadow .28s cubic-bezier(.4,0,.2,1),background-color .2s ease!important}
.kh-card .kh-card-img img{transition:opacity .22s ease,filter .25s ease}
@media(hover:hover) and (pointer:fine){
 .kh-card:hover{box-shadow:0 6px 14px rgba(0,0,0,.42)!important}
 .kh-card:hover .kh-card-img img.lazyloaded{filter:brightness(1.04)}
 .kh-toolbar .nav-link:hover,.kh-toolbar .kh-signin:hover,.kh35-mobile-item:hover{background-color:rgba(255,255,255,.065)}
}
.kh-card:active{background-color:rgba(255,255,255,.075)}
.kh-toolbar .nav-link:active,.kh-toolbar .kh-signin:active,.kh35-mobile-item:active,.kh-chip:active{background-color:rgba(255,255,255,.14)!important}
.kh-card:focus-visible,.kh35-mobile-item:focus-visible,.kh-toolbar .nav-link:focus-visible,.kh-row-controls button:focus-visible,
.kh34-hero button:focus-visible{outline:2px solid var(--accent,#69f0ae);outline-offset:2px}
.kh36-ripple{position:absolute;z-index:20;display:block;border-radius:50%;background:rgba(255,255,255,.20);
 pointer-events:none;transform:scale(0);opacity:1;animation:kh36-ripple-anim .55s ease-out forwards}
@keyframes kh36-ripple-anim{to{transform:scale(1);opacity:0}}
/* Theme accents remain in the existing v3.5 palette; no forced color swap. */
@media(max-width:599px){
 .kh36-splash-mark{width:175px;height:175px}
 .kh36-splash-mark>img{width:96px;height:48px}
 .kh-card-img.kh36-img-pending::after,.kh36-account-thumb.kh36-img-pending::after{width:66px;height:66px}
 .kh36-loading-tagline{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
 .kh36-splash-mark>svg,.kh36-splash-mark>svg circle,.kh-card-img.kh36-img-pending::after,.kh36-account-thumb.kh36-img-pending::after{animation:none!important}
 .kh36-ripple{animation:none!important;display:none!important}
 .kh-card,.kh-card .kh-card-img img{transition:none!important}
}

/* Current mobile section, same green highlight language as the original default theme. */
.kh35-drawer .kh35-mobile-item[aria-current="page"]{background:rgba(255,255,255,.10);box-shadow:inset 3px 0 var(--accent,#69f0ae)}
.kh35-drawer .kh35-mobile-item[aria-current="page"]>.material-icons:first-child{color:var(--accent,#69f0ae)}

.kh36-account-thumb{display:block;position:relative;overflow:hidden;isolation:isolate}