:root {
  --k-dark: #141414;
  --k-brown: #5d2420;
  --k-brown-2: #7a332d;
  --k-cream: #ffe6dc;
  --k-bg: #fcf8f6;
  --k-border: #ead9d1;
  --k-text: #2d2624;
  --cui-primary: var(--k-brown);
  --cui-primary-rgb: 93,36,32;
  --cui-sidebar-bg: var(--k-dark);
  --cui-sidebar-nav-link-color: rgba(255,255,255,.76);
  --cui-sidebar-nav-link-hover-color: #fff;
  --cui-sidebar-nav-link-hover-bg: rgba(255,255,255,.08);
  --cui-sidebar-nav-link-active-color: #fff;
  --cui-sidebar-nav-link-active-bg: rgba(255,230,220,.12);
}
* { box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; color: var(--k-text); background: var(--k-bg); margin:0; }
a { text-decoration: none; }
.bg-shell { background: linear-gradient(180deg, #fff 0%, #fcf8f6 100%); }
.page-title { font-size: 1.25rem; font-weight: 800; color: var(--k-dark); }
.custom-sidebar { width: 280px; z-index: 1035; }
.app-wrapper { margin-left: 280px; transition: margin-left .25s ease; }
.brand-wrap { background: #100f0f; }
.brand-logo { max-width: 240px; height: auto; display: block; }
.sidebar-nav .nav-link { border-radius: 14px; margin: 4px 12px; padding: 12px 14px; font-weight: 600; }
.sidebar-nav .nav-link.active { box-shadow: inset 0 0 0 1px rgba(255,230,220,.1); }
.nav-icon { margin-right: 10px; }
.panel-card, .stat-card, .product-card, .auth-card { border: 1px solid var(--k-border); border-radius: 22px; box-shadow: 0 10px 30px rgba(19, 16, 15, .06); background: #fff; }
.panel-card .card-header, .product-card .card-header { background: transparent; border-bottom: 1px solid #f0e3de; padding: 18px 22px; font-weight: 700; color: var(--k-dark); }
.panel-card .card-body { padding: 22px; }
.stat-card .card-body { padding: 24px; }
.stat-card span { display: block; color: #7f6f69; margin-bottom: 8px; }
.stat-card h3 { font-size: 2rem; margin: 0; color: var(--k-brown); }
.table-theme thead th { background: #fff8f4; color: #6c5149; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid #f0e3de; }
.table-theme td, .table-theme th { padding: 14px 18px; vertical-align: middle; }
.badge-soft { background: #fff0e8; color: var(--k-brown); border: 1px solid #f4d1bf; }
.btn-brand { background: var(--k-brown); color: #fff; border: 1px solid var(--k-brown); border-radius: 14px; padding: .85rem 1.2rem; font-weight: 700; }
.btn-brand:hover { background: var(--k-brown-2); border-color: var(--k-brown-2); color: #fff; }
.btn-brand-outline { background: #fff; color: var(--k-brown); border: 1px solid #d8b8aa; border-radius: 12px; }
.btn-brand-outline:hover { background: #fff5f0; color: var(--k-brown); }
.form-control, .form-select { border-radius: 14px; border: 1px solid #dec9c0; min-height: 48px; }
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 .25rem rgba(93,36,32,.12); border-color: #bf8e84; }
.auth-body { background: linear-gradient(135deg, #141414 0%, #311916 40%, #fff1ea 100%); }
.auth-shell { background: transparent; }
.auth-left { background: transparent; }
.auth-right { background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); color: #fff; }
.auth-card { max-width: 760px; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.auth-logo { width: 380px; height: auto; }
.hero-copy { max-width: 540px; }
.hero-copy h1 { font-size: 3rem; line-height: 1.08; font-weight: 800; }
.hero-copy .lead { color: rgba(255,255,255,.82); }
.hero-badge { background: rgba(255,230,220,.14); border: 1px solid rgba(255,230,220,.2); color: #fff; padding: .65rem .85rem; border-radius: 999px; }
.hero-stat { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 18px; }
.hero-stat strong, .hero-stat span { display: block; }
.hero-stat span { color: rgba(255,255,255,.72); font-size: .9rem; }
.link-brand { color: var(--k-brown); font-weight: 700; }
.product-image { aspect-ratio: 16/10; background: #fff7f2; border-bottom: 1px solid #f0e3de; display: flex; align-items: center; justify-content: center; border-radius: 22px 22px 0 0; overflow: hidden; }
.product-image img { width: 100%; height: 100%; object-fit: cover; }
.product-placeholder { color: #9b837b; font-weight: 700; }
.banner-box { min-height: 180px; border: 1px dashed #d4b1a1; border-radius: 18px; background: linear-gradient(135deg, #fffaf7, #fff1ea); display: flex; align-items: end; justify-content: start; color: #7f6258; font-weight: 600; position: relative; overflow: hidden; }
.banner-box .banner-caption { margin: 14px; background: rgba(20,20,20,.72); color: #fff; padding: 6px 10px; border-radius: 999px; font-size: .85rem; }
.list-line { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0e3de; }
.list-line:last-child { border-bottom: 0; }
.progress-stack > div { margin-bottom: 18px; }
.progress { height: 10px; border-radius: 999px; background: #f6e7df; }
.progress-bar { background: linear-gradient(90deg, var(--k-brown), var(--k-brown-2)); border-radius: 999px; }
.password-field { position: relative; }
.password-field .form-control { padding-right: 48px; }
.password-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #7f6f69; width: 34px; height: 34px; border-radius: 999px; }
.password-toggle:hover { background: #fff3ee; color: var(--k-brown); }
.setting-switch .form-check-input { width: 3rem; height: 1.6rem; }
.setting-switch .form-check-input:checked { background-color: var(--k-brown); border-color: var(--k-brown); }
.g-recaptcha { overflow: hidden; border-radius: 16px; }
.sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1030; }

.text-bg-info, .text-bg-success, .text-bg-danger {color:white!important;}

@media (max-width: 991.98px) {
  .custom-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(280px, calc(100vw - 18px));
    max-width: calc(100vw - 18px);
    height: 100vh;
    transform: translate3d(-100%, 0, 0);
    transition: transform .25s ease;
    z-index: 1045;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 12px 32px rgba(0,0,0,.24);
  }

  .app-wrapper {
    margin-left: 0;
    width: 100%;
  }

  body.sidebar-mobile-open {
    overflow: hidden;
    touch-action: none;
  }

  body.sidebar-mobile-open .custom-sidebar {
    transform: translate3d(0, 0, 0);
  }

  body.sidebar-mobile-open .sidebar-backdrop {
    display: block;
    z-index: 1040;
  }

  .sidebar .sidebar-header,
  .sidebar-nav {
    width: 100%;
  }

  .hero-copy h1 { font-size: 2.25rem; }
  .auth-logo { width: 250px !important; }
  
  .sidebar:not(.sidebar-end):not(.show) {
      margin-left:0!important;
  }
  
  #sidebarCloseBtn {
      position: relative;
  top: -50px;
  right: 15px;
  background: #e1c7b0;
  color: #100f0f;
  }
}