/* ====== Login Page ====== */
.login-page{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a1a 0%,#2d2c2a 50%,#1a1a1a 100%);z-index:9999}
.login-bg-pattern{position:absolute;inset:0;opacity:.03;background-image:radial-gradient(circle at 20% 30%,#fff 1px,transparent 1px),radial-gradient(circle at 80% 70%,#fff 1px,transparent 1px);background-size:60px 60px}
.login-card{background:#fff;border-radius:20px;padding:48px 44px;width:400px;max-width:92vw;box-shadow:0 24px 80px rgba(0,0,0,.3);position:relative;z-index:1;animation:loginIn .4s ease}
@keyframes loginIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.login-logo{font-size:26px;font-weight:700;color:var(--pri);text-align:center;margin-bottom:6px;letter-spacing:-.5px}
.login-subtitle{font-size:13px;color:var(--text2);text-align:center;margin-bottom:32px}
.login-form .form-group{margin-bottom:20px}
.login-form .form-label{font-size:12px;color:var(--text2);margin-bottom:6px;font-weight:550}
.login-form input{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:10px;font-size:14px;outline:none;background:var(--bg);transition:all var(--transition)}
.login-form input:focus{border-color:var(--pri);background:#fff;box-shadow:0 0 0 3px rgba(45,44,42,.05)}
.login-form .input-icon{position:relative}
.login-form .input-icon input{padding-left:42px}
.login-form .input-icon .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--text3)}
.login-btn{width:100%;padding:13px;background:var(--pri);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:all var(--transition);margin-top:8px}
.login-btn:hover{background:#444;transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.15)}
.login-btn:active{transform:translateY(0)}
.login-demo-hint{margin-top:24px;padding:14px 16px;background:var(--blu-lt);border-radius:10px;font-size:12px;color:var(--blu);line-height:1.8}
.login-demo-hint strong{font-weight:600}
.login-error{font-size:12px;color:var(--dan);margin-top:8px;display:none}
.login-error.show{display:block;animation:shake .3s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ====== Loading & States ====== */
.loading-overlay{position:fixed;inset:0;background:rgba(255,255,255,.8);z-index:3000;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.loading-spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--pri);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,var(--bg) 25%,var(--border) 50%,var(--bg) 75%);background-size:200% 100%;animation:skeleton 1.5s infinite;border-radius:var(--rs)}
@keyframes skeleton{to{background-position:-200% 0}}
.empty-state{text-align:center;padding:60px 20px;color:var(--text3)}
.empty-state-icon{font-size:48px;margin-bottom:12px}
.empty-state-text{font-size:14px;color:var(--text2)}
.error-state{text-align:center;padding:60px 20px;color:var(--dan)}
.error-state-icon{font-size:48px;margin-bottom:12px}

/* ====== Responsive ====== */
@media(max-width:1100px){
  .bi-designer{grid-template-columns:1fr}
  .bi-field-panel,.bi-preview-panel{border-radius:var(--r)}
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .perfume-grid{grid-template-columns:repeat(2,1fr)}
  .quote-form-header{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .bi-grid-2,.bi-grid-2-1,.bi-grid-1-2{grid-template-columns:1fr}
  .bi-grid-3{grid-template-columns:1fr 1fr}
  .bi-kpi-row{grid-template-columns:1fr 1fr}
  .bi-filter-bar{gap:6px}
  .bi-filter-chip{padding:4px 8px;font-size:11px}
  .sidebar{width:180px}
  .main{padding:20px}
  .grid2,.grid3,.grid4{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .perfume-grid{grid-template-columns:1fr}
  .mall-cat-grid{grid-template-columns:repeat(2,1fr)}
  .mall-stats{grid-template-columns:repeat(2,1fr)}
  .mall-trust{grid-template-columns:repeat(2,1fr)}
  .featured-section{grid-template-columns:1fr}
  .detail-wrap{flex-direction:column}
  .detail-gallery{width:100%}
  .detail-main-img{width:100%;height:280px}
  .modal-panel{width:94vw!important;max-width:94vw!important}
  .modal-quote,.modal-sample,.concept-modal{width:94vw!important;min-width:auto!important}
  .quote-form-header{grid-template-columns:1fr}
  .catalog-layout{flex-direction:column}
  .catalog-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border);max-height:300px}
  .params-layout{flex-direction:column}
  .params-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border)}
  .params-grid{grid-template-columns:1fr}
  .topbar{padding:0 16px}
  .topbar-toggle{margin-left:8px}
  .toggle-btn{padding:6px 12px;font-size:12px}
  .mall-top{padding:0 16px;gap:12px;flex-wrap:wrap}
  .mall-content{padding:16px}
  .mall-banner{height:auto;padding:32px 24px}
  .banner-text h2{font-size:22px}
  .mall-footer-grid{grid-template-columns:1fr}
  .concept-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .sidebar{width:160px}
  .prod-grid{grid-template-columns:1fr}
  .mall-cat-grid{grid-template-columns:1fr}
  .mall-stats{grid-template-columns:1fr}
  .bi-kpi-row{grid-template-columns:1fr}
  .concept-grid{grid-template-columns:1fr}
}