*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --pink:#E91E8C;--pink-dark:#C4007A;--pink-pale:#FFF0F7;--pink-bg:#FEF6FA;
  --border:#F0DDE9;--text:#2a2a2a;--muted:#888;--sidebar:#2a2a2a;
}
html{-webkit-text-size-adjust:100%}
body{font-family:'Poppins',sans-serif;background:var(--pink-bg);color:var(--text);min-height:100vh;overflow-x:hidden}
body.admin-menu-open{overflow:hidden}
a{text-decoration:none;color:inherit}

.admin-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh;position:relative}
.admin-overlay{display:none}
.admin-main-wrap{min-width:0;display:flex;flex-direction:column;min-height:100vh}

.sidebar{
  background:var(--sidebar);color:#ccc;padding:0;
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;z-index:800;
}
.sidebar-top{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:.75rem;padding:1.5rem 1.25rem 1rem;border-bottom:1px solid #3a3a3a;
}
.sidebar-close{display:none}
.sidebar-scroll{overflow-y:auto;flex:1;padding-bottom:1.5rem;-webkit-overflow-scrolling:touch}
.sidebar-brand h1{font-size:1rem;color:var(--pink);font-weight:700;line-height:1.2}
.sidebar-brand p{font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:#666;margin-top:.25rem}
.sidebar nav{display:flex;flex-direction:column;gap:.15rem;padding:0 .75rem}
.sidebar nav a{
  padding:.72rem 1rem;border-radius:10px;font-size:.78rem;color:#aaa;
  transition:.2s;display:flex;align-items:center;gap:.5rem;min-height:44px;
}
.sidebar nav a:hover,.sidebar nav a.active{background:rgba(233,30,140,.15);color:#fff}
.sidebar nav a.active{color:var(--pink)}
.sidebar-section{font-size:.58rem;text-transform:uppercase;letter-spacing:.15em;color:#555;padding:1rem 1.25rem .35rem}

.admin-mobile-header{
  display:none;align-items:center;gap:.75rem;padding:.85rem 1rem;
  background:#fff;border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:700;box-shadow:0 2px 12px rgba(233,30,140,.06);
}
.admin-menu-btn{
  width:44px;height:44px;border:none;background:var(--pink-pale);border-radius:12px;
  cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;flex-shrink:0;transition:background .2s;
}
.admin-menu-btn:hover{background:#ffe3f1}
.admin-menu-btn span{
  display:block;width:18px;height:2px;background:var(--pink);border-radius:2px;
  transition:transform .3s,opacity .3s;
}
.admin-shell.sidebar-open .admin-menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.admin-shell.sidebar-open .admin-menu-btn span:nth-child(2){opacity:0}
.admin-shell.sidebar-open .admin-menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.admin-mobile-heading{flex:1;min-width:0}
.admin-mobile-heading strong{
  display:block;font-size:.92rem;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.admin-mobile-heading small{
  display:block;font-size:.68rem;color:var(--muted);margin-top:.1rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.user-chip-mobile{
  max-width:92px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:.4rem .65rem;font-size:.68rem;
}

.main{padding:1.5rem 2rem;flex:1;width:100%;max-width:100%}
.topbar-admin{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;gap:1rem;flex-wrap:wrap}
.topbar-admin h2{font-size:1.35rem;font-weight:700;line-height:1.2}
.topbar-admin p{color:var(--muted);font-size:.82rem;margin-top:.2rem}
.user-chip{background:#fff;border:1px solid var(--border);padding:.45rem .9rem;border-radius:999px;font-size:.75rem;max-width:100%}

.card{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 20px rgba(233,30,140,.06);margin-bottom:1.25rem;max-width:100%;overflow:hidden}
.card h3{font-size:.95rem;margin-bottom:1rem;color:var(--text);line-height:1.35}
.grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat-card{background:#fff;border-radius:16px;padding:1.2rem 1.4rem;box-shadow:0 4px 20px rgba(233,30,140,.06)}
.stat-card .n{font-size:1.8rem;font-weight:700;color:var(--pink);line-height:1}
.stat-card .l{font-size:.68rem;color:#aaa;margin-top:.35rem;text-transform:uppercase;letter-spacing:.08em}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.65rem 1.2rem;border-radius:999px;border:none;font-family:inherit;
  font-size:.75rem;font-weight:600;cursor:pointer;transition:.2s;
  min-height:44px;text-align:center;
}
.btn-primary{background:var(--pink);color:#fff;box-shadow:0 4px 15px rgba(233,30,140,.25)}
.btn-primary:hover{background:var(--pink-dark)}
.btn-outline{background:#fff;color:var(--pink);border:1.5px solid var(--pink)}
.btn-outline:hover{background:var(--pink-pale)}
.btn-danger{background:#fde8ef;color:#b4005a}
.btn-sm{padding:.45rem .85rem;font-size:.68rem;min-height:38px}

.table-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:0 -.25rem;padding:0 .25rem;
  scrollbar-width:thin;
}
.table-wrap::after{
  content:'';display:block;height:1px;
}
table{width:100%;border-collapse:collapse;font-size:.78rem;min-width:560px}
th,td{padding:.75rem .6rem;text-align:left;border-bottom:1px solid #f3edf1;vertical-align:top}
th{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:#aaa;font-weight:600;white-space:nowrap}
tr:hover td{background:#fffbfd}
td .actions{min-width:max-content}

.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.form-grid .full{grid-column:1/-1}
.field label{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:#aaa;margin-bottom:.35rem;font-weight:600}
.field input,.field select,.field textarea{
  width:100%;padding:.7rem .9rem;border:1.5px solid #f0e6ef;border-radius:10px;
  font-family:inherit;font-size:.82rem;outline:none;background:#fff;
  max-width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--pink)}
.field textarea{min-height:110px;resize:vertical}

.alert{padding:.85rem 1rem;border-radius:12px;margin-bottom:1rem;font-size:.82rem;line-height:1.5}
.alert-success{background:#e8f8ef;color:#1b7a3a}
.alert-error{background:#fde8ef;color:#b4005a}
.badge{display:inline-block;padding:.25rem .55rem;border-radius:999px;font-size:.62rem;font-weight:600;white-space:nowrap}
.badge-pending{background:#fff4e5;color:#a66a00}
.badge-confirmed{background:#e8f8ef;color:#1b7a3a}
.badge-cancelled{background:#fde8ef;color:#b4005a}
.badge-completed{background:#eef3ff;color:#3355aa}
.actions{display:flex;gap:.4rem;flex-wrap:wrap}
.thumb{width:48px;height:48px;border-radius:10px;object-fit:cover;background:var(--pink-pale)}
.card-note{font-size:.85rem;color:#666;line-height:1.7;margin-bottom:1rem}
.card-actions{margin-top:1rem}
.inline-form{display:inline}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.5rem;margin-top:.5rem}

.login-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:1rem;background:linear-gradient(135deg,#fff 0%,var(--pink-bg) 100%);
}
.login-box{background:#fff;border-radius:20px;padding:2.5rem;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(233,30,140,.12)}
.login-box h1{color:var(--pink);font-size:1.3rem;margin-bottom:.35rem}
.login-box .field + .field{margin-top:1rem}
.login-box .btn{width:100%;margin-top:.5rem}
.toggle{display:flex;align-items:center;gap:.5rem;font-size:.82rem;flex-wrap:wrap}
.preview-img{max-width:180px;width:100%;border-radius:12px;margin-top:.5rem;height:auto}

/* ══ TABLET ══ */
@media(max-width:1100px){
  .main{padding:1.25rem 1.25rem}
  .form-grid{grid-template-columns:1fr}
}

/* ══ MOBILE ADMIN ══ */
@media(max-width:991px){
  .admin-shell{grid-template-columns:1fr}
  .admin-overlay{
    display:block;position:fixed;inset:0;background:rgba(42,42,42,.55);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s,visibility .3s;z-index:850;
  }
  .admin-shell.sidebar-open .admin-overlay{opacity:1;visibility:visible;pointer-events:auto}

  .sidebar{
    position:fixed;top:0;left:0;width:min(300px,88vw);height:100vh;
    transform:translate3d(-100%,0,0);transition:transform .32s cubic-bezier(.4,0,.2,1);
    box-shadow:8px 0 30px rgba(0,0,0,.2);z-index:900;
    backface-visibility:hidden;-webkit-backface-visibility:hidden;
    -webkit-font-smoothing:antialiased;
  }
  .admin-shell.sidebar-open .sidebar{transform:translate3d(0,0,0)}
  .sidebar-close{
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;border:none;background:rgba(233,30,140,.15);
    color:var(--pink);font-size:1.5rem;line-height:1;border-radius:50%;cursor:pointer;flex-shrink:0;
  }

  .admin-mobile-header{display:flex}
  .topbar-admin{display:none}
  .main{padding:1rem}
  .topbar-admin h2{font-size:1.15rem}

  .grid-stats{grid-template-columns:repeat(2,1fr);gap:.75rem}
  .stat-card{padding:1rem 1.1rem}
  .stat-card .n{font-size:1.5rem}

  .card{padding:1.1rem;border-radius:14px}
  .card h3{font-size:.9rem}

  table{min-width:520px;font-size:.74rem}
  th,td{padding:.65rem .5rem}

  .login-box{padding:1.75rem 1.25rem;border-radius:16px}
}

@media(max-width:640px){
  .admin-mobile-header{padding:.75rem .85rem;gap:.55rem}
  .admin-mobile-heading strong{font-size:.86rem}
  .user-chip-mobile{display:none}
  .main{padding:.85rem}

  .grid-stats{grid-template-columns:1fr 1fr}
  .stat-card .n{font-size:1.35rem}
  .stat-card .l{font-size:.62rem}

  .card{padding:1rem;margin-bottom:1rem}
  .btn{width:100%}
  .actions{width:100%}
  .actions .btn,.actions form{width:100%}
  .actions form .btn{width:100%}
  .inline-form{display:block;width:100%}
  .inline-form .btn{width:100%}

  table{min-width:480px}
  .table-wrap{
    margin:0 -.5rem;padding-bottom:.25rem;
    background:
      linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 12px) 0 0,
      linear-gradient(270deg,#fff 0%,rgba(255,255,255,0) 12px) 100% 0;
    background-size:12px 100%,12px 100%;
    background-repeat:no-repeat;
    background-attachment:local,local;
  }

  .topbar-admin,.card .btn-primary[type="submit"],
  .card > form > .btn,.card-actions .btn{width:100%}
  .btn-sm{min-height:40px}
  .settings-grid{grid-template-columns:1fr}
  .preview-img{max-width:100%}
  .user-chip{font-size:.7rem;padding:.4rem .75rem}
}

@media(max-width:400px){
  .grid-stats{grid-template-columns:1fr}
  .admin-mobile-heading small{display:none}
}