html, body {height:100%;font-size:62.5%; position:relative}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,acronym,address,big,cite,code,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin:0;padding:0;vertical-align:baseline;outline:0;background:transparent;border:0;text-decoration:none}
body {font-family: "Lato","SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;font-size:1.3rem; color:#1d1d1f; position:relative;min-width:320px;line-height: inherit;-webkit-text-size-adjust: none;overflow-x:hidden}
.container{position: relative; width: 100%;height: 100%; background-size: cover;}
.container.style_1{background-image: url("../images/bg.jpg");}
.login-body{position: absolute; width: 320px; min-width: 320px; padding: 10px;border-radius: 10px; left: 50%;top: 50%; background: rgba(255,255,255,.2); z-index: 1; transform: translateX(-50%) translateY(-55%);}
.login-main{background: rgba(255,255,255,1); padding: 30px 30px 20px; border-radius: 10px;}
.login-body h1{text-align: center; font-size: 2.2rem; color: #009688; margin-bottom: 10px;}
.login-body h4{text-align: center; color: #999;}
.login-body .layui-form-item{position: relative}
.login-body .layui-form-item .login-input-icon{position: absolute; right: 5px; top: 10px;color: #999;}
.login-body .layui-form-item span.lbl{position: relative; transform: translateY(5px); display: inline-block}
/* Pagination Container */
.pagination {display: flex;justify-content: center;align-items: center;margin-top: 30px;}
.pagination a,.pagination li span {color: black;float: left;padding: 8px 12px;text-decoration: none;transition: background-color .3s;border: 1px solid #ddd;margin: 0 2px;}
.pagination a:hover:not(.active) {background-color: #ddd;}
.pagination li.active span {background-color: #ff9118;color: white;border: 1px solid #ff7426;}
.pagination li.disabled span {color: #ccc;cursor: not-allowed;pointer-events: none;}
.gallery {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin: 30px 0}
.gallery-item{position: relative; margin-bottom: 30px;}
.gallery-item h4{text-align: center; margin: 10px 0;}
.gallery-operation{position: absolute; left: 0;top: 0; z-index: 1; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); display: flex;flex-direction: column;justify-content: center; align-items: center; gap:10px;opacity: 0;visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;}
.gallery-item:hover .gallery-operation{opacity: 1;visibility: visible;}
.gallery-operation button{border: 0; outline: 0; padding: 3px 0; width: 8rem; pointer-events: auto; font-size: 1.3rem; border-radius: 5px; cursor: pointer; background-color: rgba(255,255,255,1); margin: 0 10px;transition: all 0.3s ease; display: block}
.gallery-operation button:hover{background-color: #ff7426; color: #fff;}
.gallery img {width: 100%;height: 100%;object-fit: cover;border-radius: 8px;transition: transform 0.3s ease;}
.gallery img:hover {transform: scale(1.02);}
.gallery-folder{background-color: rgba(0,0,0,.03); padding: 3rem 0; display: grid;align-items: center;justify-content: center; text-align: center}
.gallery-folder i.layui-icon{font-size: clamp(3.6rem, 10vw, 9.6rem); color: #1E9FFF}
.gallery-folder h4{margin-top: 20px; font-weight: 700;}
.gallery-folder a{transition: transform 0.3s ease;}
.gallery-folder:hover a{transform: scale(1.05)}
.gallery-badge{position: absolute;top: 16px;left: 16px;background-color: #1E9FFF; color: white;font-size: 12px;padding: 4px 12px;border-radius: 20px;}
.gallery-edit{position: absolute;top: 10px;right: 10px; color: white;font-size: 12px; display: none}
.gallery-edit button{padding: 4px 5px; border: 0; outline: 0; background: rgba(0,0,0,.07); cursor: pointer;}
.gallery-edit button i{font-size: 2.2rem;}
.gallery-edit button:hover{background: #1E9FFF; color: #fff;}
.gallery-item:hover .gallery-edit{display: block}
.gallery-item-edit{background: rgba(0,0,0,.05); cursor: pointer; padding: 3px; border-radius: 4px; border: 0; margin-left: 5px; color: #666}
.gallery-item-edit:hover{background: #1E9FFF; color: #fff;}
.layui-layout-admin .layui-logo img{max-height: 50px; object-fit: cover;}