:root{
  --menro-bg:#f3f5f9;
  --menro-card:#ffffff;
  --menro-text:#0f172a;
  --menro-muted:#64748b;
  --menro-border:rgba(15,23,42,.08);
  --menro-green:#18b45b;
  --menro-green-2:#11a37f;
  --menro-sidebar:#132433;
  --menro-sidebar-2:#0f1f2b;
  --menro-shadow:0 10px 25px rgba(15,23,42,.08);
  --menro-radius:18px;
  --menro-transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html,body{height:100%;background:#f3f5f9}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--menro-text);
  background:var(--menro-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}

/* Mobile menu overlay */
.menro-mobile-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.55);
  z-index:25;
  animation:fadeIn 0.3s ease;
}

.menro-mobile-overlay.show{
  display:block;
}

/* Hamburger menu button */
.menro-hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  width:44px;
  height:44px;
  padding:10px;
  background:transparent;
  border:none;
  cursor:pointer;
  order:-1;
  margin-right:8px;
}

.menro-hamburger span{
  width:24px;
  height:2px;
  background:rgba(15,23,42,.85);
  border-radius:2px;
  transition:var(--menro-transition);
}

.menro-hamburger.active span:nth-child(1){
  transform:rotate(45deg) translate(8px, 8px);
}

.menro-hamburger.active span:nth-child(2){
  opacity:0;
}

.menro-hamburger.active span:nth-child(3){
  transform:rotate(-45deg) translate(8px, -8px);
}

/* Smooth transitions */
* {
  transition-property: background-color, border-color, color, fill, stroke, opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

button, a, input, select, textarea {
  -webkit-user-select: none;
  user-select: none;
}

/* Touch feedback animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes slideOutLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.menro-shell{display:flex;min-height:100vh}

/* Sidebar */
.menro-sidebar{
  width:280px;
  background:linear-gradient(180deg,var(--menro-sidebar) 0%, var(--menro-sidebar-2) 100%);
  color:#e2e8f0;
  position:sticky;
  top:0;
  align-self:flex-start;
  min-height:100vh;
  border-right:1px solid rgba(255,255,255,.06);
}

.menro-brand{display:flex;gap:12px;align-items:center;padding:22px 20px 14px}
.menro-brand .logo{
  width:40px;height:40px;border-radius:12px;
  background:rgba(24,180,91,.18);
  display:grid;place-items:center;
  border:1px solid rgba(24,180,91,.35);
}
.menro-brand .title{font-weight:800;letter-spacing:.3px}
.menro-brand .sub{font-size:12px;color:rgba(226,232,240,.75);margin-top:2px}
.menro-user{
  display:flex;gap:12px;align-items:center;
  padding:14px 20px 18px;
}
.menro-avatar{width:44px;height:44px;border-radius:999px;background:rgba(16,185,129,.18);border:1px solid rgba(16,185,129,.35);display:grid;place-items:center;font-weight:700}
.menro-user .name{font-weight:700}
.menro-user .role{font-size:12px;color:rgba(226,232,240,.7)}
.menro-user .dot{margin-left:auto;width:10px;height:10px;border-radius:999px;background:rgba(34,197,94,1)}

.menro-nav{padding:6px 10px}
.menro-nav .section{padding:14px 10px 8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(226,232,240,.45)}

.menro-link{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border-radius:12px;
  color:rgba(226,232,240,.82);
}
.menro-link:hover{background:rgba(255,255,255,.06)}
.menro-link.active{
  background:rgba(24,180,91,.14);
  color:#e8fff2;
  position:relative;
}
.menro-link.active:before{
  content:"";
  position:absolute;
  left:-10px;top:8px;bottom:8px;
  width:4px;border-radius:4px;
  background:var(--menro-green);
}
.menro-ic{width:18px;height:18px;display:inline-block;color:rgba(226,232,240,.7)}

.menro-sidebar-footer{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:rgba(226,232,240,.55)}
.menro-collapse{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px}
.menro-collapse:hover{background:rgba(255,255,255,.06)}

/* Main */
.menro-main{flex:1;min-width:0}

.menro-topbar{
  height:76px;
  display:flex;align-items:center;gap:18px;justify-content:space-between;
  padding:14px 24px;
  border-bottom:1px solid var(--menro-border);
  background:rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  position:sticky;top:0;z-index:20;
}

.menro-burger{
  width:42px;height:42px;border-radius:14px;
  border:1px solid var(--menro-border);
  background:#fff;
  display:grid;place-items:center;
  color:rgba(15,23,42,.8);
  cursor:pointer;
}
.menro-burger:hover{background:rgba(15,23,42,.04)}

.menro-search{flex:1;max-width:640px}
.menro-search input{
  width:100%;
  border:1px solid var(--menro-border);
  background:#fff;
  border-radius:14px;
  padding:12px 14px 12px 42px;
  outline:none;
}
.menro-search .icon{
  position:relative;
}
.menro-search .icon:before{
  content:"";
  position:absolute;
  left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;
  background:currentColor;
  color:rgba(100,116,139,.75);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m21 21-4.35-4.35M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.menro-actions{display:flex;align-items:center;gap:12px;margin-left:auto;justify-content:flex-end;padding-right:2px}
.menro-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  border:1px solid var(--menro-border);
  background:#fff;
  color:rgba(15,23,42,.8);
}
.menro-pill.green{background:rgba(24,180,91,.10);border-color:rgba(24,180,91,.18);color:#0f7a3d}
.menro-pill .dot{width:8px;height:8px;border-radius:999px;background:var(--menro-green)}

.menro-bell{width:42px;height:42px;border-radius:14px;border:1px solid var(--menro-border);background:#fff;display:grid;place-items:center;position:relative}
.menro-bell .badge{position:absolute;top:6px;right:6px;background:#ef4444;color:#fff;border-radius:999px;font-size:11px;padding:1px 6px}

.menro-userchip{display:flex;align-items:center;gap:12px;justify-content:flex-end;min-width:220px}
.menro-userchip .meta{line-height:1.1;text-align:right}
.menro-userchip .meta .top{font-weight:700;font-size:14px}
.menro-userchip .meta .bottom{font-size:12px;color:var(--menro-muted)}
.menro-userchip .circle{width:40px;height:40px;border-radius:999px;background:var(--menro-green);color:#fff;display:grid;place-items:center;font-weight:800}
.menro-logout{
  width:40px;height:40px;border-radius:14px;
  border:1px solid rgba(239,68,68,.20);
  background:rgba(239,68,68,.08);
  display:grid;place-items:center;color:#ef4444;
}

.menro-content{padding:22px 24px 34px}

/* Modal confirmations */
.menro-modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;z-index:80;padding:18px}
.menro-modal-overlay.show{display:flex}
.menro-modal{width:100%;max-width:520px;border-radius:18px;background:#fff;border:1px solid var(--menro-border);box-shadow:0 18px 44px rgba(15,23,42,.18);overflow:hidden}
.menro-modal .hd{padding:16px 18px;border-bottom:1px solid rgba(15,23,42,.06);display:flex;justify-content:space-between;align-items:center}
.menro-modal .ttl{font-weight:900;color:rgba(15,23,42,.92)}
.menro-modal .bd{padding:16px 18px;color:rgba(100,116,139,.92);line-height:1.5}
.menro-modal .ft{padding:14px 18px;border-top:1px solid rgba(15,23,42,.06);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.menro-modal .btn{padding:10px 14px;border-radius:12px;border:1px solid var(--menro-border);background:#fff;font-weight:800;cursor:pointer}
.menro-modal .btn.primary{background:rgba(24,180,91,.10);border-color:rgba(24,180,91,.22);color:#0f7a3d}
.menro-modal .btn.danger{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.18);color:#b91c1c}

/* Page header */
.menro-crumb{display:flex;align-items:center;gap:10px;color:rgba(100,116,139,.8);font-size:13px;margin-bottom:6px}
.menro-h1{display:flex;align-items:center;gap:12px;margin:0}
.menro-h1 .ic{
  width:44px;height:44px;border-radius:14px;background:rgba(24,180,91,.14);
  display:grid;place-items:center;border:1px solid rgba(24,180,91,.20);
}
.menro-h1 .text{font-size:32px;font-weight:800;letter-spacing:-.02em}
.menro-subtitle{color:rgba(100,116,139,.85);margin-top:2px}

/* Cards */
.menro-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.menro-card{
  background:var(--menro-card);
  border:1px solid var(--menro-border);
  border-radius:var(--menro-radius);
  box-shadow:0 1px 0 rgba(15,23,42,.04);
}
.menro-card.pad{padding:18px}

.stat{
  border-radius:18px;
  padding:18px 18px;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.stat .k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.stat .v{font-size:44px;line-height:1.0;margin-top:6px;font-weight:900}
.stat .s{opacity:.9;font-size:13px;margin-top:6px}
.stat .trend{font-size:13px;margin-top:10px;opacity:.95}
.stat .bubble{position:absolute;right:-22px;top:18px;width:120px;height:120px;border-radius:999px;background:rgba(255,255,255,.18)}
.stat .bubble.small{right:30px;top:-30px;width:70px;height:70px;opacity:.18}

.grad-purple{background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%)}
.grad-magenta{background:linear-gradient(135deg,#7c3aed 0%,#db2777 100%)}
.grad-rose{background:linear-gradient(135deg,#be123c 0%,#f43f5e 100%)}
.grad-indigo{background:linear-gradient(135deg,#312e81 0%,#4338ca 100%)}
.grad-orange{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%)}
.grad-red{background:linear-gradient(135deg,#ef4444 0%,#b91c1c 100%)}
.grad-blue{background:linear-gradient(135deg,#4f46e5 0%,#3730a3 100%)}
.grad-green{background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%)}

.card-title{font-size:20px;font-weight:800;margin:0}
.card-sub{font-size:13px;color:rgba(100,116,139,.85);margin-top:2px}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.card-menu{color:rgba(100,116,139,.8);font-size:22px;line-height:1}

/* Table */
.menro-table{width:100%;border-collapse:collapse}
.menro-table th{
  text-align:left;
  font-size:12px;
  color:rgba(100,116,139,.85);
  font-weight:700;
  padding:12px 12px;
  border-bottom:1px solid rgba(15,23,42,.06);
}
.menro-table td{
  padding:14px 12px;
  border-bottom:1px solid rgba(15,23,42,.06);
  font-size:14px;
}
.menro-table tr:last-child td{border-bottom:none}

.link-blue{color:#4f46e5;font-weight:700}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  border:1px solid transparent;
}
.pill.pending{background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.18);color:#b45309}
.pill.resolved{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.18);color:#15803d}
.pill.investigating{background:rgba(99,102,241,.14);border-color:rgba(99,102,241,.18);color:#4338ca}

.pill.good{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.18);color:#15803d}
.pill.moderate{background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.18);color:#b45309}
.pill.unhealthy{background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.16);color:#e11d48}

.dot-sev{width:8px;height:8px;border-radius:999px;display:inline-block}
.dot-low{background:#22c55e}
.dot-medium{background:#f59e0b}
.dot-high{background:#f97316}
.dot-critical{background:#ef4444}

.footer-note{color:rgba(100,116,139,.5);text-align:center;font-size:12px;margin-top:22px}

/* Auth */
.auth-shell{min-height:100vh;display:grid;grid-template-columns: 1.1fr .9fr}
.auth-hero{
  background:radial-gradient( circle at 25% 20%, rgba(24,180,91,.25), transparent 60%),
             radial-gradient( circle at 70% 70%, rgba(17,163,127,.25), transparent 55%),
             linear-gradient(135deg, #0b1f25 0%, #0a2b2b 55%, #0b1f25 100%);
  color:#e2e8f0;
  padding:44px 56px;
  position:relative;
  overflow:hidden;
}
.auth-hero:before{
  content:"";
  position:absolute;
  left:-180px;top:-120px;
  width:560px;height:560px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
}
.auth-hero:after{
  content:"";
  position:absolute;
  left:180px;top:190px;
  width:420px;height:420px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
}
.auth-brand{display:flex;align-items:center;gap:12px;position:relative;z-index:2}
.auth-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:rgba(24,180,91,.14);border:1px solid rgba(24,180,91,.25);margin-top:34px;position:relative;z-index:2}
.auth-title{font-size:64px;line-height:1.03;font-weight:900;margin:24px 0 14px;position:relative;z-index:2;letter-spacing:-.02em}
.auth-title .green{color:var(--menro-green)}
.auth-desc{max-width:520px;color:rgba(226,232,240,.72);line-height:1.6;position:relative;z-index:2}
.auth-stats{display:flex;gap:18px;margin-top:62px;position:relative;z-index:2}
.auth-stat{flex:1;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px 16px}
.auth-stat .v{font-size:26px;font-weight:900}
.auth-stat .k{font-size:12px;color:rgba(226,232,240,.7)}

.auth-panel{display:flex;align-items:center;justify-content:center;padding:34px}
.auth-card{width:520px;background:#fff;border-radius:18px;box-shadow:var(--menro-shadow);border:1px solid var(--menro-border);padding:26px}
.auth-head{display:flex;align-items:flex-start;gap:14px}
.auth-head .shield{width:46px;height:46px;border-radius:14px;background:rgba(24,180,91,.12);border:1px solid rgba(24,180,91,.18);display:grid;place-items:center;color:var(--menro-green)}
.auth-head .h{font-size:24px;font-weight:900;margin:0}
.auth-head .p{margin:2px 0 0;color:var(--menro-muted);font-size:13px}

.field{margin-top:16px}
.field label{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:rgba(15,23,42,.75)}
.field input{margin-top:8px;width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--menro-border);outline:none;box-sizing:border-box}

/* Keep only the custom password toggle icon. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear{
  display:none;
}

.password-wrap{position:relative}
.password-wrap input{padding-right:46px}
.password-toggle-btn{
  position:absolute;
  right:10px;
  top:calc(50% + 4px);
  transform:translateY(-50%);
  width:30px;
  height:30px;
  border:none;
  background:transparent;
  border-radius:8px;
  color:rgba(100,116,139,.9);
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:2;
}
.password-toggle-btn:hover{background:rgba(15,23,42,.05)}
.password-toggle-btn .eye{display:block}
.password-toggle-btn .eye-closed{display:none}
.password-toggle-btn.is-visible .eye-open{display:none}
.password-toggle-btn.is-visible .eye-closed{display:block}

.password-wrap input:focus + .password-toggle-btn{color:rgba(15,23,42,.95)}

.auth-btn{margin-top:18px;width:100%;border:none;border-radius:14px;padding:14px 16px;background:var(--menro-green);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;gap:10px}
.auth-btn:hover{filter:brightness(.97)}

.demo{margin-top:18px;background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.18);border-radius:14px;padding:14px}
.demo .t{display:flex;align-items:center;gap:10px;color:#1d4ed8;font-weight:800;font-size:13px}
.demo .row{margin-top:10px;background:#fff;border:1px solid rgba(15,23,42,.06);border-radius:12px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.demo .left{font-size:13px}
.demo .left b{color:#1d4ed8}
.demo .right{font-size:12px;color:#2563eb}

.auth-foot{margin-top:18px;color:rgba(100,116,139,.7);font-size:12px;text-align:center}

@media (max-width: 768px){
  .menro-shell{flex-direction:column}
  
  /* Hide sidebar by default on mobile */
  .menro-sidebar{
    display:none;
    position:fixed;
    left:-280px;
    top:0;
    width:280px;
    height:100vh;
    background:linear-gradient(180deg,var(--menro-sidebar) 0%, var(--menro-sidebar-2) 100%);
    transition:left 0.3s ease;
    z-index:1000;
    overflow-y:auto;
    border-right:1px solid rgba(255,255,255,.06);
  }
  
  /* Show sidebar when active */
  .menro-sidebar.active{
    display:block;
    left:0;
  }
  
  /* Overlay backdrop */
  .menro-mobile-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:999}
  .menro-mobile-overlay.active{display:block}
  
  /* Show hamburger button */
  .menro-hamburger{display:flex}
  
  /* Main content full width */
  .menro-main{width:100%;min-width:0;flex:1}
  
  /* ===== TOPBAR FIXES ===== */
  .menro-topbar{
    padding:8px 10px;
    gap:6px;
    height:auto;
    min-height:52px;
    flex-wrap:wrap;
    justify-content:space-between;
    border-bottom:1px solid rgba(15,23,42,.06);
    background:#fff;
  }
  
  .menro-search{max-width:none;flex:1;order:3;min-width:100%;margin-top:6px}
  .menro-search input{padding:9px 12px 9px 36px;font-size:13px;width:100%}
  .menro-actions{order:1;justify-content:flex-end;gap:6px;width:auto;flex-wrap:wrap}
  .menro-userchip{min-width:auto;gap:6px}
  .menro-userchip .meta{display:none}
  .menro-userchip .circle{width:32px;height:32px;font-size:12px}
  .menro-pill{
    padding:6px 10px;
    font-size:11px;
    border-radius:10px;
  }
  
  /* ===== CONTENT FIXES ===== */
  .menro-content{
    padding:14px 12px 20px;
    margin:0;
    width:100%;
    max-width:100%;
    background:#f2f4f8;
  }
  
  /* ===== CARD STYLING FOR APP FEEL ===== */
  .menro-grid{
    grid-template-columns:1fr;
    gap:14px;
    padding:0;
  }
  
  .menro-card{
    border-radius:16px;
    padding:16px;
    background:#fff;
    box-shadow:0 8px 20px rgba(15,23,42,0.10);
    border:1px solid rgba(15,23,42,.08);
    margin:0;
  }
  
  .menro-card.pad{padding:16px}
  
  /* ===== HEADER FIXES ===== */
  .menro-h1{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
    gap:8px;
    margin-bottom:12px;
  }
  
  .menro-h1 .ic{
    width:36px;
    height:36px;
    border-radius:12px;
    margin:0;
  }
  
  .menro-h1 .text{
    font-size:20px;
    line-height:1.25;
    font-weight:800;
  }
  
  .menro-subtitle{
    font-size:12px;
    color:rgba(100,116,139,.8);
    margin:0;
  }
  
  .menro-crumb{
    display:none;
  }
  
  /* ===== TABLE FIXES ===== */
  .menro-table{
    font-size:13px;
    width:100%;
    border-collapse:collapse;
  }
  
  .menro-table th{
    padding:12px 10px;
    font-size:11px;
    font-weight:700;
    text-align:left;
    background:rgba(15,23,42,.04);
    border-bottom:2px solid rgba(15,23,42,.06);
  }
  
  .menro-table td{
    padding:12px 10px;
    font-size:13px;
    border-bottom:1px solid rgba(15,23,42,.06);
  }
  
  .menro-table tr:last-child td{
    border-bottom:none;
  }
  
  /* Make table horizontally scrollable on tiny screens */
  @media (max-width: 480px){
    .menro-table{
      display:block;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }
    
    .menro-table th, .menro-table td{
      white-space:nowrap;
    }
  }
  
  /* ===== STAT CARDS ===== */
  .stat{
    padding:16px 14px;
    border-radius:14px;
    box-shadow:0 2px 8px rgba(15,23,42,0.08);
  }
  
  .stat .k{font-size:11px;opacity:.85}
  .stat .v{font-size:28px;margin-top:6px;font-weight:900}
  .stat .s{font-size:12px;margin-top:4px;opacity:.85}
  
  /* ===== FORM FIXES ===== */
  .field{
    margin-top:14px;
    width:100%;
  }
  
  .field label{
    font-size:12px;
    font-weight:700;
    color:rgba(15,23,42,.8);
    display:block;
    margin-bottom:6px;
  }
  
  .field input,
  .field select,
  .field textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select{
    width:100%;
    padding:12px;
    border:1px solid var(--menro-border);
    border-radius:10px;
    font-size:14px;
    box-sizing:border-box;
    font-family:inherit;
  }
  
  input[type="file"]{
    padding:8px;
    font-size:12px;
  }
  
  /* ===== BUTTONS ===== */
  button,
  .auth-btn,
  input[type="submit"]{
    width:100%;
    padding:14px 16px;
    border-radius:10px;
    font-size:14px;
    font-weight:700;
    border:none;
    cursor:pointer;
    transition:var(--menro-transition);
    margin-top:12px;
  }
  
  .auth-btn{
    background:var(--menro-green);
    color:#fff;
  }
  
  .auth-btn:active{
    filter:brightness(.95);
  }
  
  /* ===== CARD HEADS ===== */
  .card-head{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    margin-bottom:12px;
  }
  
  .card-title{
    font-size:17px;
    font-weight:800;
    margin:0;
  }
  
  .card-sub{
    font-size:12px;
    color:rgba(100,116,139,.85);
    margin:0;
  }
  
  .card-menu{
    display:none;
  }
  
  /* ===== PILLS & BADGES ===== */
  .pill{
    font-size:12px;
    padding:6px 10px;
    border-radius:999px;
    display:inline-block;
  }
  
  .dot-sev{
    width:6px;
    height:6px;
    display:inline-block;
    margin-right:4px;
  }
  
  /* ===== AUTH CARDS ===== */
  .auth-card{
    padding:16px 14px;
    border-radius:14px;
    width:100%;
    box-shadow:0 2px 8px rgba(15,23,42,0.08);
  }
  
  .auth-head{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    margin-bottom:14px;
  }
  
  .auth-head .shield{
    width:36px;
    height:36px;
    border-radius:10px;
  }
  
  .auth-head .h{
    font-size:18px;
    font-weight:700;
    margin:0;
  }
  
  .auth-head .p{
    font-size:12px;
    margin:0;
  }
  
  /* ===== MODAL ===== */
  .menro-modal-overlay{
    padding:12px;
  }
  
  .menro-modal{
    border-radius:14px;
    max-width:100%;
    width:100%;
  }
  
  .menro-modal .hd{
    padding:14px;
    font-size:14px;
    font-weight:700;
  }
  
  .menro-modal .bd{
    padding:14px;
    font-size:13px;
  }
  
  .menro-modal .ft{
    padding:12px 14px;
    gap:8px;
  }
  
  .menro-modal .btn{
    flex:1;
    min-height:40px;
    padding:10px 12px;
    font-size:13px;
    border-radius:10px;
  }
  
  /* ===== GENERAL SPACING ===== */
  .footer-note{
    font-size:11px;
    margin-top:16px;
    padding:0 12px;
  }
  
  .link-blue{
    font-weight:600;
    color:#3b82f6;
  }
}

@media (max-width: 700px){
  .auth-hero{padding:24px 14px;min-height:300px}
  .auth-title{font-size:34px;line-height:1.08}
  .auth-desc{font-size:13px;line-height:1.45}
  .auth-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .auth-stat{padding:12px}
  .auth-stat .v{font-size:22px}
  .auth-card{padding:18px 14px;border-radius:14px}
  .field input{padding:11px 12px}
  .password-wrap input{padding-right:42px}
  .password-toggle-btn{right:8px;width:28px;height:28px}
  .menro-topbar{padding:10px}
  .menro-bell{width:38px;height:38px;border-radius:12px}
  .menro-userchip .meta{display:none}
  .menro-userchip .circle{width:34px;height:34px}
  .menro-logout{width:34px;height:34px;border-radius:10px}
  .menro-h1 .ic{width:36px;height:36px;border-radius:12px}
  .menro-h1 .text{font-size:20px}
  .card-title{font-size:17px}
  .demo .row{flex-direction:column;align-items:flex-start}
}

/* Extra small devices (< 480px) */
@media (max-width: 480px){
  .menro-topbar{
    padding:8px;
    min-height:50px;
  }
  
  .menro-hamburger{
    width:40px;
    height:40px;
    padding:8px;
  }
  
  .menro-hamburger span{
    width:20px;
  }
  
  .menro-content{padding:10px}
  
  .menro-grid{gap:10px}
  
  .menro-h1{margin-bottom:10px}
  .menro-h1 .ic{width:32px;height:32px}
  .menro-h1 .text{font-size:16px}
  .menro-subtitle{font-size:11px}
  
  .card-title{font-size:14px}
  .card-sub{font-size:11px}
  
  .menro-card{padding:12px}
  
  .stat{padding:12px}
  .stat .k{font-size:10px}
  .stat .v{font-size:24px}
  .stat .s{font-size:11px}
  
  .field{margin-top:10px}
  .field input, select, textarea{padding:10px;font-size:13px}
  
  button, .auth-btn, input[type="submit"]{
    padding:12px 14px;
    font-size:13px;
    margin-top:10px;
  }
  
  .menro-table{font-size:12px}
  .menro-table th{padding:8px;font-size:10px}
  .menro-table td{padding:8px;font-size:11px}
  
  .menro-modal .hd{padding:10px;font-size:13px}
  .menro-modal .bd{padding:10px;font-size:12px}
  .menro-modal .ft{padding:10px}
  .menro-modal .btn{font-size:12px}
}

/* Landscape mode */
@media (max-height: 500px) and (orientation: landscape){
  .menro-sidebar{height:auto;max-height:none}
  .menro-topbar{min-height:48px;padding:6px}
  .menro-content{padding:10px 12px}
  .menro-h1{margin-bottom:8px}
  .menro-grid{gap:10px}
  .menro-card{padding:12px}
}

/* Touch-friendly buttons for mobile */
@media (hover: none) and (pointer: coarse){
  button, a[role="button"], .auth-btn, .menro-link, .pill, input[type="submit"]{
    min-height:44px;
    min-width:44px;
    padding:12px 16px;
  }
  
  .menro-link{min-height:40px}
  .menro-modal .btn{min-height:40px;padding:10px 14px}
}