/* BrewLink Admin — Dark Chocolate & Gold Theme */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#f3ece3;background:#191210;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;width:100%}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
a{color:#c8a27a;text-decoration:none}
a:hover{opacity:.85}
h1,h2,h3{margin:0 0 .4rem;font-weight:600;letter-spacing:-.01em;color:#f3ece3}

/* Login */
.login-body{display:grid;place-items:center;min-height:100vh;background:radial-gradient(circle at 50% 40%, #2f201c 0%, #191210 100%);color:#f3ece3;font-family:Inter,system-ui,-apple-system,sans-serif;padding:1.5rem}
.login-card{width:100%;max-width:400px;background:#241916;border:1px solid rgba(236,226,215,.14);border-radius:20px;padding:2.5rem 2rem;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.login-card .brand{text-align:center;margin-bottom:1.5rem}
.brand-mark{display:inline-grid;place-items:center;width:48px;height:48px;background:#c8a27a;color:#191210;border-radius:14px;font-weight:700;font-size:22px}
.login-card h1{font-size:1.4rem;margin-top:.6rem;color:#f3ece3;font-weight:700}
.login-card p{color:#b0a496;font-size:.9rem;margin-top:.15rem}
.login-card label{display:block;margin:1rem 0;font-size:.88rem;color:#b0a496;font-weight:500}
.login-card input{width:100%;padding:.75rem .9rem;border:1px solid rgba(236,226,215,.18);border-radius:12px;margin-top:.4rem;font:inherit;font-size:.95rem;background:#1a1210;color:#f3ece3;transition:border-color .2s,background .2s}
.login-card input:focus{outline:none;border-color:#c8a27a;background:#201614}
.login-card .btn.primary{width:100%;padding:.8rem;border-radius:999px;background:#c8a27a;border:none;color:#191210;font-weight:700;font-size:.95rem;margin-top:.5rem;cursor:pointer;transition:all .2s ease;box-shadow:0 6px 18px rgba(200,162,122,.2)}
.login-card .btn.primary:hover{background:#dbb38a;transform:translateY(-1px)}
.login-card .hint{font-size:.82rem;color:#8c8072;text-align:center;margin-top:1.25rem}
.login-card .back-link{display:block;text-align:center;margin-top:1.25rem;font-size:.88rem;color:#c8a27a;font-weight:500}
.login-card .back-link:hover{text-decoration:underline}

/* Layout */
.layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{background:#1e1412;border-right:1px solid rgba(236,226,215,0.1);display:flex;flex-direction:column;padding:1.25rem 0;height:100vh;height:100dvh;position:sticky;top:0;align-self:start;overflow-y:auto}
.sidebar-brand{display:flex;gap:.75rem;align-items:center;padding:0 1.25rem 1.25rem;border-bottom:1px solid rgba(236,226,215,0.08)}
.sidebar-brand > div{min-width:0;flex:1}
.sidebar-brand .brand-mark{flex-shrink:0;width:40px;height:40px;font-size:18px;border-radius:12px}
.sidebar-brand strong{display:block;font-size:.95rem;color:#f3ece3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-brand small{display:block;color:#b0a496;font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-brand .nav-close{display:none}
.sidebar nav{display:flex;flex-direction:column;padding:.75rem .5rem;gap:.25rem;flex:1}
.sidebar nav a{padding:.65rem .85rem;border-radius:10px;color:#b0a496;font-size:.92rem;transition:all 0.15s ease;border-left:3px solid transparent}
.sidebar nav a:hover{background:rgba(200,162,122,0.1);color:#f3ece3}
.sidebar nav a.active{background:#2d1f1c;color:#c8a27a;font-weight:600;border-left-color:#c8a27a}
.sidebar-foot{padding:1rem 1.25rem 0;border-top:1px solid rgba(236,226,215,0.08);margin-top:auto}
.sidebar-foot .logout{color:#e57373;font-size:.9rem}

/* Mobile top bar + drawer (hidden on desktop) */
.mobile-topbar{display:none}
.nav-backdrop{display:none}
.nav-toggle{display:none}

/* Content */
.content{padding:0 2.25rem 2rem}
.page-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  position:sticky;
  top:0;
  z-index:80;
  margin:0 -2.25rem 1.5rem -2.25rem;
  padding:1.25rem 2.25rem;
  background:rgba(25,18,16,0.92);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(236,226,215,0.08);
  box-shadow:0 4px 20px rgba(0,0,0,0.25);
}
.page-head h1{font-size:1.4rem;color:#f3ece3;margin:0}
.page-head p{color:#b0a496;margin:.2rem 0 0}
.tabs{display:flex;gap:.35rem;flex-wrap:wrap}
.tab{padding:.4rem .85rem;border-radius:999px;background:#241916;border:1px solid rgba(236,226,215,0.14);font-size:.85rem;color:#b0a496;transition:all 0.15s ease}
.tab:hover{color:#f3ece3;border-color:#c8a27a}
.tab.active{background:#c8a27a;color:#191210;border-color:#c8a27a;font-weight:600}

/* Panels */
.panel{background:#241916;border:1px solid rgba(236,226,215,0.12);border-radius:16px;padding:1.25rem 1.25rem 1rem;margin-bottom:1.25rem;box-shadow:0 8px 25px rgba(0,0,0,0.3)}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.85rem}
.panel-head h2{font-size:1.05rem;color:#f3ece3}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.85rem;margin-bottom:1.25rem}
.stat{background:#241916;border:1px solid rgba(236,226,215,0.12);border-radius:16px;padding:1rem 1.1rem;box-shadow:0 6px 20px rgba(0,0,0,0.25)}
.stat span{font-size:.78rem;color:#b0a496;text-transform:uppercase;letter-spacing:.05em}
.stat strong{display:block;font-size:1.55rem;margin-top:.35rem;color:#f3ece3}

/* Chart */
.chart{display:flex;align-items:flex-end;gap:.6rem;height:180px;padding:.75rem 0}
.bar{display:flex;flex-direction:column;align-items:center;flex:1;gap:.35rem}
.bar-fill{width:100%;max-width:40px;background:#c8a27a;border-radius:8px 8px 0 0;min-height:4px}
.bar small{color:#b0a496;font-size:.75rem}

/* Tables */
.table{width:100%;border-collapse:collapse;font-size:.92rem}
.table th,.table td{padding:.75rem .65rem;text-align:left;border-bottom:1px solid rgba(236,226,215,0.08)}
.table th{font-weight:600;color:#b0a496;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;background:#1e1412}
.table td{color:#f3ece3}
.table tbody tr:hover{background:rgba(255,255,255,0.03)}
.table tfoot th{border-top:2px solid rgba(236,226,215,0.14)}
.row-actions a{margin-right:.75rem;font-size:.88rem;color:#c8a27a}
.row-actions a:last-child{color:#e57373}
.thumb{width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid rgba(236,226,215,0.14);background:#1e1412}
.thumb.placeholder{display:grid;place-items:center;color:#8c8072;background:#1e1412}
.thumb.wide{width:120px;height:60px}
.empty{text-align:center;color:#b0a496;padding:1.5rem 0}

/* Forms */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem 1rem}
.form-grid label{display:flex;flex-direction:column;font-size:.85rem;color:#b0a496;gap:.3rem}
.form-grid label.full{grid-column:1/-1}
.form-grid input[type=text],.form-grid input[type=number],.form-grid input[type=email],.form-grid select,.form-grid textarea,.form-grid input[type=color]{
    padding:.6rem .75rem;border:1px solid rgba(236,226,215,0.16);border-radius:10px;font:inherit;background:#1a1210;color:#f3ece3
}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:none;border-color:#c8a27a;background:#201614}
.form-grid .check{flex-direction:row;align-items:center;gap:.5rem;font-size:.9rem;color:#f3ece3}
.checkbox-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.5rem}
.repeat-row{display:flex;gap:.5rem;margin-bottom:.5rem}
.repeat-row input{flex:1}
.actions{display:flex;gap:.5rem;margin-top:1rem}
.actions-bar{display:flex;justify-content:flex-end;margin-top:1rem}

/* Buttons */
.btn{display:inline-block;padding:.55rem 1rem;border-radius:10px;border:1px solid rgba(236,226,215,0.18);background:#2d1f1c;color:#f3ece3;font:inherit;font-size:.9rem;cursor:pointer;transition:all .15s}
.btn:hover{background:#382723;border-color:#c8a27a}
.btn.primary{background:#c8a27a;border-color:#c8a27a;color:#191210;font-weight:600;box-shadow:0 4px 15px rgba(200,162,122,0.25)}
.btn.primary:hover{background:#dbb38a;transform:translateY(-1px)}
.btn.ghost{background:transparent;border-color:transparent;color:#c8a27a}
.btn.ghost:hover{color:#dbb38a;background:rgba(200,162,122,0.1)}
.btn.small{padding:.35rem .7rem;font-size:.8rem}

/* Badges */
.badge{display:inline-block;padding:.2rem .55rem;border-radius:999px;font-size:.75rem;font-weight:600}
.badge.ok{background:rgba(46,125,79,0.25);color:#5ed888;border:1px solid rgba(94,216,136,0.3)}
.badge.warn{background:rgba(200,162,122,0.2);color:#e8be92;border:1px solid rgba(200,162,122,0.4)}
.badge.info{background:rgba(42,90,160,0.25);color:#7cb0f8;border:1px solid rgba(124,176,248,0.3)}
.badge.off{background:rgba(255,255,255,0.08);color:#8a857f}

/* Alerts */
.alert{background:rgba(176,69,69,0.25);border:1px solid rgba(229,115,115,0.35);color:#ef9a9a;padding:.65rem .85rem;border-radius:10px;margin-bottom:.85rem;font-size:.9rem}

/* Filters */
.filters{display:flex;gap:.5rem;flex-wrap:wrap}
.filters input,.filters select{padding:.5rem .7rem;border:1px solid rgba(236,226,215,0.16);border-radius:10px;font:inherit;background:#1a1210;color:#f3ece3}

/* KV */
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.85rem}
.kv span{display:block;font-size:.75rem;color:#b0a496;text-transform:uppercase;letter-spacing:.05em}
.kv strong{display:block;font-size:1rem;margin-top:.15rem;color:#f3ece3}
.muted{color:#b0a496}
.small{font-size:.82rem}
.inline-form{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.inline-form input,.inline-form select{padding:.5rem .7rem;border:1px solid rgba(236,226,215,0.16);border-radius:10px;font:inherit;background:#1a1210;color:#f3ece3}

/* QR Grid */
.qr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.qr-card{background:#241916;border:1px solid rgba(236,226,215,0.12);border-radius:16px;padding:1rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.35rem;box-shadow:0 8px 25px rgba(0,0,0,0.3)}
.qr-card img{width:160px;height:160px;background:#fff;padding:8px;border-radius:12px}

/* Responsive */
@media (max-width:1200px){
  .content{padding:0 1.5rem 2rem}
  .page-head{margin:0 -1.5rem 1.25rem -1.5rem;padding:1.15rem 1.5rem}
  .form-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}

@media (max-width:900px){
  .layout{display:flex;flex-direction:column;min-height:100vh}
  .content{padding:1rem;min-width:0;flex:1}
  .form-grid{grid-template-columns:1fr}
  .page-head{
    position:static;
    margin:0 0 1.25rem 0;
    padding:0;
    background:transparent;
    border-bottom:none;
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    flex-direction:column;
    align-items:flex-start;
    gap:.6rem;
  }
  .page-head .btn{align-self:stretch;text-align:center}
  .panel-head{flex-wrap:wrap;gap:.5rem}
  .actions-bar{justify-content:flex-start}
  .actions-bar .btn{width:100%;text-align:center}

  /* Keep table layout intact; scroll the panel instead of display:block */
  .panel:has(.table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table{width:100%;min-width:560px}
  .table th{white-space:nowrap}

  .mobile-topbar{
    display:flex;align-items:center;gap:.85rem;
    position:sticky;top:0;z-index:110;
    box-sizing:border-box;
    min-height:56px;height:calc(56px + env(safe-area-inset-top, 0px));
    padding:.65rem 1rem;padding-top:calc(.65rem + env(safe-area-inset-top, 0px));
    background:#1e1412;
    border-bottom:1px solid rgba(236,226,215,0.1);
    box-shadow:0 4px 16px rgba(0,0,0,.35);
    flex-shrink:0
  }
  .mobile-brand{display:flex;flex-direction:column;min-width:0;flex:1}
  .mobile-brand strong{font-size:.95rem;color:#f3ece3;line-height:1.2}
  .mobile-brand small{color:#b0a496;font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .nav-toggle{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:10px;flex-shrink:0;
    border:1px solid rgba(236,226,215,0.16);border-radius:10px;
    background:#2d1f1c;cursor:pointer;-webkit-tap-highlight-color:transparent;
    touch-action:manipulation;position:relative;z-index:120
  }
  .nav-toggle-bar{display:block;height:2px;width:100%;background:#f3ece3;border-radius:1px;transition:transform .2s,opacity .2s}
  body.nav-open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .nav-toggle-bar:nth-child(2){opacity:0}
  body.nav-open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .nav-backdrop{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:100;
    top:calc(56px + env(safe-area-inset-top, 0px));
    background:rgba(0,0,0,.55);opacity:0;pointer-events:none;visibility:hidden;
    transition:opacity .25s ease,visibility .25s ease
  }
  body.nav-open .nav-backdrop{opacity:1;pointer-events:auto;visibility:visible}
  html.nav-open,body.nav-open{overflow:hidden}
  body.nav-open .layout{overflow:hidden;touch-action:none}

  .sidebar{
    position:fixed !important;left:0;bottom:0;z-index:105;
    top:calc(56px + env(safe-area-inset-top, 0px));
    width:min(280px,86vw);max-width:280px;
    height:auto;min-height:0;max-height:none;align-self:auto;
    display:flex;flex-direction:column;padding:1rem 0 1.25rem;
    border-right:1px solid rgba(236,226,215,0.1);border-bottom:none;
    background:#1e1412;
    transform:translate3d(-105%,0,0);
    transition:transform .25s ease,visibility .25s ease;
    box-shadow:8px 0 32px rgba(0,0,0,.4);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    visibility:hidden;pointer-events:none
  }
  body.nav-open .sidebar{
    transform:translate3d(0,0,0);
    visibility:visible;
    pointer-events:auto
  }
  .sidebar-brand{display:flex;position:relative;padding:0 1rem 1rem;padding-right:2.75rem}
  .sidebar-brand .nav-close{
    display:grid;place-items:center;position:absolute;top:0;right:.65rem;
    width:36px;height:36px;border:none;border-radius:10px;
    background:transparent;color:#b0a496;font-size:1.5rem;line-height:1;cursor:pointer
  }
  .sidebar-brand .nav-close:hover{color:#f3ece3;background:rgba(200,162,122,0.1)}
  .sidebar nav{flex-direction:column;padding:.5rem;flex-wrap:nowrap;min-width:0;gap:.25rem}
  .sidebar nav a{white-space:normal;padding:.65rem .85rem;font-size:.92rem}
  .sidebar-foot{display:block;padding:1rem 1rem 0}
}

@media (max-width:640px){
  .login-card{padding:2rem 1.25rem}
  .content{padding:.85rem}
  .panel{padding:1rem}
  .cards{grid-template-columns:1fr 1fr}
  .qr-grid{grid-template-columns:1fr}
  .repeat-row{flex-direction:column}
  .repeat-row .btn{width:auto;align-self:flex-end}
  .actions{flex-direction:column}
  .actions .btn,.actions-bar .btn{width:100%;text-align:center}
  .filters{flex-direction:column;align-items:stretch}
  .filters input,.filters select,.filters .btn{width:100%}
  .inline-form{flex-direction:column;align-items:stretch}
  .inline-form input,.inline-form select{width:100%}
  .inline-form .btn{width:100%;text-align:center}
  .qr-card .btn.small{width:auto}
  .qr-card .actions .btn{width:100%}
}

@media (max-width:420px){
  .cards{grid-template-columns:1fr}
  .tab{font-size:.75rem;padding:.35rem .7rem}
  .page-head h1{font-size:1.2rem}
  .table{min-width:480px}
}

@media (max-width:360px){
  .mobile-topbar{padding-left:calc(.6rem + env(safe-area-inset-left, 0px));padding-right:calc(.6rem + env(safe-area-inset-right, 0px));gap:.5rem}
  .mobile-brand strong{font-size:.88rem}
  .mobile-brand small{font-size:.7rem}
  .content{padding:.65rem}
  .page-head h1{font-size:1.15rem}
  .tab{font-size:.72rem;padding:.3rem .6rem}
}

/* Page Loading Screen */
.page-preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background-color: #191210;
  background: radial-gradient(circle at center, #271a17 0%, #191210 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s ease;
}
.page-preloader.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.35rem;
}
.preloader-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: preloaderLogoPulse 2s ease-in-out infinite;
}
.preloader-logo img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.preloader-brand-mark {
  width: 68px;
  height: 68px;
  background: #c8a27a;
  color: #191210;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-family: Inter, system-ui, sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(200, 162, 122, 0.3);
}
.preloader-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.preloader-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c8a27a;
  display: inline-block;
  animation: preloaderDotBounce 1.4s ease-in-out infinite both;
}
.preloader-dots span:nth-child(1) { animation-delay: -0.32s; }
.preloader-dots span:nth-child(2) { animation-delay: -0.16s; }
.preloader-dots span:nth-child(3) { animation-delay: 0s; }
@keyframes preloaderDotBounce {
  0%, 80%, 100% { transform: scale(0.5); opacity: 0.3; }
  40% { transform: scale(1.2); opacity: 1; }
}
@keyframes preloaderLogoPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Logout Confirmation Modal */
.logout-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(10, 7, 6, 0.75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s ease;
}

.logout-modal-overlay[hidden] {
  display: none;
}

.logout-modal-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.logout-modal-card {
  width: 100%;
  max-width: 420px;
  background: #241916;
  background: radial-gradient(circle at 50% 0%, #2f201c 0%, #241916 100%);
  border: 1px solid rgba(236, 226, 215, 0.16);
  border-radius: 20px;
  padding: 2rem 1.75rem;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  transform: scale(0.92) translateY(8px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.logout-modal-overlay.active .logout-modal-card {
  transform: scale(1) translateY(0);
}

.logout-modal-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: rgba(229, 115, 115, 0.12);
  border: 1px solid rgba(229, 115, 115, 0.28);
  color: #e57373;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(229, 115, 115, 0.15);
}

.logout-modal-icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
}

.logout-modal-title {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: #f3ece3;
  letter-spacing: -0.01em;
}

.logout-modal-desc {
  margin: 0 0 1.75rem;
  font-size: 0.92rem;
  color: #b0a496;
  line-height: 1.5;
}

.logout-modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.btn-cancel-logout,
.btn-confirm-logout {
  flex: 1;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.btn-cancel-logout {
  background: rgba(236, 226, 215, 0.08);
  border: 1px solid rgba(236, 226, 215, 0.18);
  color: #e2d7cb;
}

.btn-cancel-logout:hover,
.btn-cancel-logout:focus-visible {
  background: rgba(236, 226, 215, 0.15);
  color: #ffffff;
  border-color: rgba(236, 226, 215, 0.3);
  outline: none;
}

.btn-confirm-logout {
  background: #d32f2f;
  border: 1px solid #e53935;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(211, 47, 47, 0.35);
}

.btn-confirm-logout:hover,
.btn-confirm-logout:focus-visible {
  background: #b71c1c;
  border-color: #c62828;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(211, 47, 47, 0.45);
  outline: none;
}

.btn-cancel-logout:active,
.btn-confirm-logout:active {
  transform: scale(0.98);
}

@media (max-width: 360px) {
  .logout-modal-card {
    padding: 1.5rem 1.15rem;
    border-radius: 18px;
  }
  .logout-modal-title {
    font-size: 1.2rem;
  }
  .logout-modal-desc {
    font-size: 0.88rem;
    margin-bottom: 1.25rem;
  }
  .logout-modal-actions {
    flex-direction: column-reverse;
    gap: 0.5rem;
  }
  .btn-cancel-logout,
  .btn-confirm-logout {
    width: 100%;
  }
}