/* ====================================================
   JOSC GALLERY — ADMIN CSS — FINAL
   ==================================================== */
:root{
  --pink-50:#fff0f6;--pink-100:#ffe0ed;--pink-200:#ffb3d1;
  --pink-300:#f9a8c9;--pink-400:#f472b6;--pink-500:#ec4899;
  --pink-600:#db2777;--pink-700:#be185d;
  --bg-main:#fff5f8;--bg-card:#ffffff;--bg-glass:rgba(255,255,255,.92);
  --text-primary:#3d1a2e;--text-secondary:#6b2d50;--text-muted:#9d6b85;
  --border:rgba(249,168,201,.35);
  --shadow-sm:0 2px 12px rgba(236,72,153,.08);
  --shadow-md:0 8px 32px rgba(236,72,153,.14);
  --sidebar-w:240px;--topbar-h:62px;
  --radius-sm:10px;--radius-md:16px;--radius-lg:20px;--radius-full:9999px;
  --font-body:'Nunito',sans-serif;--font-display:'Playfair Display',serif;
  --tr:0.22s cubic-bezier(0.4,0,0.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg-main);color:var(--text-primary);overflow-x:hidden}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font-family:inherit}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:var(--pink-200);border-radius:999px}

/* LOGIN */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(160deg,#fff0f8 0%,#fde8f3 50%,#fff0f6 100%);position:relative;overflow:hidden}
.login-deco{position:absolute;inset:0;pointer-events:none}
.ld-circle{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(249,168,201,.2),transparent 70%)}
.ldc1{width:500px;height:500px;top:-150px;right:-100px}
.ldc2{width:350px;height:350px;bottom:-100px;left:-80px}
.login-card{position:relative;z-index:1;background:var(--bg-glass);border:1px solid rgba(249,168,201,.4);border-radius:var(--radius-lg);padding:40px 36px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(236,72,153,.15);text-align:center}
.login-icon{font-size:3rem;margin-bottom:12px;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.login-title{font-family:var(--font-display);font-size:1.8rem;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.login-sub{font-size:.9rem;color:var(--text-muted);margin-bottom:28px}
.login-form{display:flex;flex-direction:column;gap:16px;text-align:left}
.field-label{display:block;font-size:.82rem;font-weight:700;color:var(--text-secondary);margin-bottom:6px}
.field-wrap{position:relative;display:flex;align-items:center}
.field-icon{position:absolute;left:13px;color:var(--text-muted);font-size:.85rem;pointer-events:none}
.field-input{width:100%;padding:11px 38px 11px 36px;border:2px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.92rem;background:var(--bg-card);color:var(--text-primary);outline:none;transition:border-color var(--tr),box-shadow var(--tr)}
.field-input:focus{border-color:var(--pink-400);box-shadow:0 0 0 3px rgba(244,114,182,.15)}
.field-input::placeholder{color:rgba(157,107,133,.5)}
.field-textarea{padding:11px 13px;resize:vertical;min-height:80px;line-height:1.6}
.pass-toggle{position:absolute;right:12px;color:var(--text-muted);font-size:.9rem;transition:color var(--tr)}
.pass-toggle:hover{color:var(--pink-500)}
.login-error{font-size:.82rem;color:#ef4444;font-weight:600;min-height:1em;text-align:center}
.login-btn{padding:12px;background:linear-gradient(135deg,var(--pink-400),var(--pink-600));color:#fff;border-radius:var(--radius-sm);font-size:.95rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;transition:all var(--tr);box-shadow:0 4px 16px rgba(236,72,153,.3)}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(236,72,153,.4)}
.login-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}
.login-back{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font-size:.85rem;color:var(--text-muted);transition:color var(--tr)}
.login-back:hover{color:var(--pink-500)}

/* LAYOUT */
.admin-app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:linear-gradient(170deg,#3d1a2e,#5e2444);color:#fff;display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:200;transition:transform var(--tr)}
.sidebar-header{padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between}
.sb-brand{font-size:1.1rem;font-weight:700;font-family:var(--font-display)}
.sb-close{display:none;color:rgba(255,255,255,.6);font-size:1rem;transition:color var(--tr)}
.sb-close:hover{color:#fff}
.sb-nav{flex:1;padding:12px 8px;display:flex;flex-direction:column;gap:2px}
.sb-item{width:100%;text-align:left;padding:11px 14px;border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:10px;transition:all var(--tr)}
.sb-item i{width:18px;text-align:center}
.sb-item:hover{background:rgba(255,255,255,.1);color:#fff}
.sb-item.active{background:linear-gradient(135deg,rgba(244,114,182,.3),rgba(236,72,153,.4));color:#fff;box-shadow:inset 2px 0 0 var(--pink-300)}
.sb-footer{padding:12px 8px;border-top:1px solid rgba(255,255,255,.1)}
.sb-logout{width:100%;text-align:left;padding:10px 14px;border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;color:rgba(255,150,150,.8);display:flex;align-items:center;gap:10px;transition:all var(--tr)}
.sb-logout:hover{background:rgba(239,68,68,.15);color:#fca5a5}
.admin-main{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-height:100vh}
.admin-topbar{height:var(--topbar-h);background:var(--bg-glass);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-sm)}
.topbar-left{display:flex;align-items:center;gap:14px}
.topbar-hamburger{display:none;color:var(--text-secondary);font-size:1.2rem;transition:color var(--tr)}
.topbar-hamburger:hover{color:var(--pink-500)}
.topbar-title{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--text-primary)}
.topbar-right{display:flex;align-items:center;gap:12px}
.topbar-btn{display:flex;align-items:center;gap:7px;padding:8px 16px;border-radius:var(--radius-full);font-size:.85rem;font-weight:700;background:var(--pink-100);color:var(--pink-600);transition:all var(--tr)}
.topbar-btn:hover{background:var(--pink-500);color:#fff}
.topbar-user{display:flex;align-items:center;gap:7px;font-size:.85rem;font-weight:700;color:var(--text-secondary)}
.admin-content{flex:1;padding:28px 24px}
.page-section{display:none}
.page-section.active{display:block}
.page-header{margin-bottom:24px}
.page-header h3{font-family:var(--font-display);font-size:1.4rem;color:var(--text-primary);margin-bottom:4px}
.page-header p{color:var(--text-muted);font-size:.9rem}

/* STATS */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:28px}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-sm);transition:transform var(--tr),box-shadow var(--tr)}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.sc-icon{width:52px;height:52px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;flex-shrink:0}
.sc-num{font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:var(--text-primary)}
.sc-label{font-size:.78rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.dash-section{margin-bottom:28px}
.ds-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.ds-header h4{font-size:1rem;color:var(--text-primary)}
.ds-more{font-size:.82rem;color:var(--pink-500);font-weight:700}
.recent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.recent-thumb{aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;border:2px solid var(--border);transition:transform var(--tr)}
.recent-thumb:hover{transform:scale(1.04)}
.recent-thumb img{width:100%;height:100%;object-fit:cover}
.dash-empty{color:var(--text-muted);font-size:.88rem;padding:20px 0}
.quick-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.qa-btn{display:flex;align-items:center;gap:8px;padding:12px 22px;border-radius:var(--radius-md);font-size:.9rem;font-weight:700;background:var(--pink-100);color:var(--pink-600);border:2px solid var(--border);transition:all var(--tr)}
.qa-btn:hover{background:var(--pink-500);color:#fff;border-color:transparent}

/* UPLOAD */
.dropzone{border:2.5px dashed var(--pink-300);border-radius:var(--radius-lg);background:var(--pink-50);padding:48px 24px;text-align:center;cursor:pointer;transition:all var(--tr);margin-bottom:24px}
.dropzone:hover,.dropzone.drag-over{border-color:var(--pink-400);background:var(--pink-100)}
.dz-icon{font-size:3rem;margin-bottom:12px}
.dz-title{font-size:1.1rem;font-weight:700;color:var(--text-primary);margin-bottom:6px}
.dz-sub{color:var(--text-muted);font-size:.85rem;margin-bottom:12px}
.dz-browse{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;background:linear-gradient(135deg,var(--pink-400),var(--pink-600));color:#fff;border-radius:var(--radius-full);font-size:.9rem;font-weight:700;cursor:pointer;transition:all var(--tr);box-shadow:0 4px 14px rgba(236,72,153,.3)}
.dz-browse:hover{transform:translateY(-1px)}
.dz-hint{font-size:.78rem;color:var(--text-muted);margin-top:12px}
.upload-form{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px}
.uf-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.uf-header h4{font-size:1rem;color:var(--text-primary)}
.uf-clear{display:flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;color:#ef4444}
.uf-shared{background:var(--pink-50);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;margin-bottom:18px}
.field-row{display:flex;gap:12px;flex-wrap:wrap}
.field-row .field-group{flex:1;min-width:200px}
.field-group{margin-bottom:12px}
.file-previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:20px}
.file-preview-card{background:var(--pink-50);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.fp-thumb{aspect-ratio:4/3;overflow:hidden;background:var(--pink-100)}
.fp-thumb img{width:100%;height:100%;object-fit:cover}
.fp-body{padding:10px}
.fp-name{font-size:.75rem;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px}
.fp-input{width:100%;padding:6px 8px;font-size:.78rem;font-family:var(--font-body);border:1.5px solid var(--border);border-radius:6px;background:var(--bg-card);color:var(--text-primary);outline:none}
.fp-input:focus{border-color:var(--pink-400)}
.fp-remove{width:100%;margin-top:8px;padding:5px;font-size:.72rem;background:rgba(239,68,68,.1);color:#ef4444;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:4px;transition:all var(--tr)}
.fp-remove:hover{background:rgba(239,68,68,.2)}
.fp-status{text-align:center;padding:6px;font-size:.78rem;font-weight:700}
.fp-status.uploading{color:var(--pink-500)}
.fp-status.done{color:#16a34a}
.fp-status.error{color:#ef4444}
.btn-upload-all{width:100%;padding:14px;background:linear-gradient(135deg,var(--pink-400),var(--pink-600));color:#fff;border-radius:var(--radius-md);font-size:1rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 4px 16px rgba(236,72,153,.3);transition:all var(--tr)}
.btn-upload-all:hover{transform:translateY(-1px)}
.btn-upload-all:disabled{opacity:.6;cursor:not-allowed;transform:none}
.upload-progress-wrap{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;margin-top:20px}
.up-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.up-header h4{font-size:1rem}
.up-count{font-size:.9rem;font-weight:700;color:var(--pink-500)}
.progress-bar-wrap{height:8px;background:var(--pink-100);border-radius:999px;overflow:hidden;margin-bottom:16px}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--pink-400),var(--pink-500));border-radius:999px;width:0%;transition:width .4s ease}
.up-list{display:flex;flex-direction:column;gap:8px}
.up-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--pink-50);border-radius:var(--radius-sm);font-size:.85rem}
.up-item-name{flex:1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-item-status{font-weight:700}
.up-item-status.uploading{color:var(--pink-400)}
.up-item-status.done{color:#16a34a}
.up-item-status.error{color:#ef4444}

/* MANAGE */
.manage-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.btn-refresh{padding:11px 14px;border:2px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);transition:all var(--tr)}
.btn-refresh:hover{border-color:var(--pink-400);color:var(--pink-500)}
.manage-info{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.85rem;color:var(--text-muted);margin-bottom:18px}
.btn-select-all{display:flex;align-items:center;gap:6px;padding:6px 14px;background:var(--pink-50);color:var(--pink-600);border:1px solid var(--border);border-radius:var(--radius-full);font-size:.82rem;font-weight:700;transition:all var(--tr)}
.btn-select-all:hover{background:var(--pink-100)}
.btn-delete-selected{display:flex;align-items:center;gap:6px;padding:6px 14px;background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-full);font-size:.82rem;font-weight:700;transition:all var(--tr)}
.btn-delete-selected:hover{background:rgba(239,68,68,.2)}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.admin-card{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:all var(--tr);position:relative}
.admin-card.selected{border-color:var(--pink-400);box-shadow:0 0 0 3px rgba(244,114,182,.2)}
.admin-card:hover{box-shadow:var(--shadow-md)}
.ac-select{position:absolute;top:8px;left:8px;z-index:2;width:22px;height:22px;background:rgba(255,255,255,.9);border-radius:6px;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--tr)}
.ac-select.checked{background:var(--pink-500);border-color:var(--pink-500);color:#fff}
.ac-thumb{aspect-ratio:4/3;overflow:hidden;background:var(--pink-50)}
.ac-thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--tr)}
.admin-card:hover .ac-thumb img{transform:scale(1.04)}
.ac-body{padding:10px}
.ac-title{font-size:.82rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.ac-cat{font-size:.72rem;color:var(--text-muted);margin-bottom:8px}
.ac-actions{display:flex;gap:6px}
.ac-btn{flex:1;padding:6px;border-radius:6px;font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:4px;transition:all var(--tr)}
.ac-btn-edit{background:var(--pink-50);color:var(--pink-600)}
.ac-btn-edit:hover{background:var(--pink-100)}
.ac-btn-del{background:rgba(239,68,68,.1);color:#ef4444}
.ac-btn-del:hover{background:rgba(239,68,68,.2)}
.spinner-wrap{text-align:center;padding:30px;font-size:1.5rem;letter-spacing:4px}
.sakura-spinner-sm{font-size:1.5rem;letter-spacing:4px}
.loadmore-wrap{text-align:center;padding:20px}
.btn-loadmore{padding:11px 28px;background:linear-gradient(135deg,var(--pink-400),var(--pink-500));color:#fff;border-radius:var(--radius-full);font-size:.9rem;font-weight:700;box-shadow:0 4px 14px rgba(236,72,153,.3);transition:all var(--tr)}
.btn-loadmore:hover{transform:translateY(-1px)}

/* PROFILE */
.profile-form-wrap{display:flex;flex-direction:column;gap:20px}
.pf-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px}
.pf-title{font-size:.95rem;font-weight:700;color:var(--text-secondary);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.pf-actions{text-align:right}
.btn-save-profile{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;background:linear-gradient(135deg,var(--pink-400),var(--pink-600));color:#fff;border-radius:var(--radius-md);font-size:.95rem;font-weight:700;box-shadow:0 4px 16px rgba(236,72,153,.3);transition:all var(--tr)}
.btn-save-profile:hover{transform:translateY(-1px)}
.btn-save-profile:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* MODAL */
.modal-overlay{position:fixed;inset:0;z-index:500;background:rgba(30,5,20,.75);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px}
.modal-box{background:var(--bg-card);border-radius:var(--radius-lg);width:100%;max-width:480px;box-shadow:0 24px 60px rgba(0,0,0,.3);animation:modalIn .25s ease}
.modal-sm{max-width:360px}
@keyframes modalIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border)}
.modal-header h4{font-size:1rem;font-weight:700}
.modal-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-muted);transition:all var(--tr)}
.modal-close:hover{background:var(--pink-100);color:var(--pink-500)}
.modal-body{padding:20px;display:flex;flex-direction:column;gap:14px}
.modal-preview{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--border)}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--border)}
.btn-modal-cancel{padding:9px 20px;border:2px solid var(--border);border-radius:var(--radius-sm);font-size:.88rem;font-weight:700;color:var(--text-muted);transition:all var(--tr)}
.btn-modal-cancel:hover{border-color:var(--pink-300);color:var(--pink-500)}
.btn-modal-save{padding:9px 20px;background:linear-gradient(135deg,var(--pink-400),var(--pink-600));color:#fff;border-radius:var(--radius-sm);font-size:.88rem;font-weight:700;display:flex;align-items:center;gap:6px;transition:all var(--tr)}
.btn-modal-save:hover{transform:translateY(-1px)}
.btn-modal-delete{padding:9px 20px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border-radius:var(--radius-sm);font-size:.88rem;font-weight:700;display:flex;align-items:center;gap:6px;transition:all var(--tr)}
.btn-modal-delete:hover{transform:translateY(-1px)}

/* TOAST */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--radius-md);font-size:.88rem;font-weight:600;color:#fff;box-shadow:var(--shadow-md);animation:toastIn .3s ease;max-width:320px}
.toast.success{background:linear-gradient(135deg,#22c55e,#16a34a)}
.toast.error{background:linear-gradient(135deg,#ef4444,#dc2626)}
.toast.info{background:linear-gradient(135deg,var(--pink-400),var(--pink-500))}
@keyframes toastIn{from{transform:translateX(100px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastOut{from{transform:translateX(0);opacity:1}to{transform:translateX(100px);opacity:0}}

/* RESPONSIVE */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.3)}
  .sb-close{display:flex}
  .admin-main{margin-left:0}
  .topbar-hamburger{display:flex}
  .topbar-btn span{display:none}
  .admin-content{padding:16px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .file-previews{grid-template-columns:1fr 1fr}
  .admin-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .login-card{padding:28px 20px}
  .stats-grid{grid-template-columns:1fr}
  .admin-grid{grid-template-columns:1fr 1fr;gap:10px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}