*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#151b16;background:#fbfbfa}a{text-decoration:none;color:inherit}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8ffe9,#e9f6df);padding:24px}.login-card{width:100%;max-width:430px;background:white;border-radius:28px;padding:24px;box-shadow:0 24px 70px rgba(0,0,0,.08)}.login-logo{width:100%;max-height:150px;object-fit:contain;background:#fff8d8;border-radius:20px}.login-card h1{margin:18px 0 4px}.login-card p{color:#6d766d}.form{display:flex;flex-direction:column;gap:10px;margin-top:16px}label{font-weight:800}input,textarea,select{width:100%;border:1px solid #e4e7e1;border-radius:16px;padding:14px;font-size:15px;background:white}button,.small-btn,.ghost-danger{border:0;border-radius:16px;padding:12px 16px;font-weight:900;background:#2f8f31;color:white}.alert{padding:12px;border-radius:14px;margin:12px 0;font-weight:800}.danger{background:#ffe7e7;color:#a32020}.app-page,.admin-page{padding-bottom:105px;background:#fafafa}.pos-header,.admin-header{display:flex;align-items:center;gap:14px;padding:22px 18px 12px}.brand-pill{width:86px;height:86px;border-radius:50%;background:#fff8d8;display:grid;place-items:center;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.05);flex:0 0 auto}.brand-pill img{width:125%;height:125%;object-fit:contain}.admin-logo{width:96px;height:96px}.header-text{min-width:0}.pos-header p,.admin-header p{margin:0;color:#333}.pos-header h1,.admin-header h1{margin:2px 0;font-size:25px}.status-dot{color:#268d2d;font-weight:800}.small-btn,.bell{margin-left:auto;background:#fff;color:#111;border:1px solid #eee;box-shadow:0 8px 20px rgba(0,0,0,.04)}.app-container,.admin-container{padding:8px 18px 100px;max-width:960px;margin:auto}.summary-wide{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center;background:linear-gradient(100deg,#fff,#fbfff4);border:1px solid #edf0e8;border-radius:24px;padding:18px;box-shadow:0 12px 30px rgba(0,0,0,.05)}.sum-left{display:flex;gap:16px;align-items:center;border-right:1px solid #e6e6e6}.circle-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#81d36b;font-size:28px}.summary-wide span,.summary-wide small{color:#697069}.summary-wide strong{display:block;font-size:26px;color:#2d9232}.sum-right strong{color:#3478f6}.progress{height:8px;background:#e4e7ef;border-radius:20px;overflow:hidden;margin:10px 0}.progress i{display:block;height:100%;background:#3478f6;border-radius:20px}.section-title{display:flex;justify-content:space-between;align-items:center;margin:24px 0 14px}.section-title h2{margin:0}.ghost-danger{background:white;color:#222;border:1px solid #eee}.product-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.product-card{background:white;border:1px solid #eee;border-radius:20px;padding:12px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.04);overflow:hidden}.product-card img{width:100%;height:112px;object-fit:contain;border-radius:16px;background:linear-gradient(180deg,#fff,#fafafa)}.product-card h3{font-size:14px;margin:8px 0 2px}.product-card small{color:#777}.counter{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid #eee;border-radius:14px;overflow:hidden;margin-top:8px;align-items:center}.counter button{border-radius:0;padding:8px;background:white;color:#2e9232;font-size:20px;box-shadow:none}.counter b{font-size:18px}.order-panel,.white-panel,.card-panel{background:white;border:1px solid #eee;border-radius:22px;padding:16px;margin-top:20px;box-shadow:0 12px 30px rgba(0,0,0,.05)}.empty-order{text-align:center;color:#8b928b;padding:28px}.empty-cup{font-size:54px;opacity:.45}.order-row,.trx-card,.outlet-row,.product-row{display:flex;justify-content:space-between;gap:12px;align-items:center;border-top:1px solid #eee;padding:14px 0}.order-row:first-child,.trx-card:first-child,.outlet-row:first-child,.product-row:first-child{border-top:0}.order-row span,.trx-card span,.product-row span{display:block;color:#777;font-size:13px}.bottom-checkout{position:fixed;left:0;right:0;bottom:67px;background:white;border-radius:24px 24px 0 0;padding:14px 18px;display:grid;grid-template-columns:1fr 1fr 1.8fr;gap:12px;align-items:center;box-shadow:0 -12px 30px rgba(0,0,0,.08);z-index:20}.bottom-checkout span{display:block;color:#777}.bottom-checkout strong{font-size:22px;color:#2d9232}.bottom-checkout button{border-radius:999px;font-size:17px}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:72px;background:white;border-radius:24px 24px 0 0;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:0 -8px 25px rgba(0,0,0,.06);z-index:21}.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#686f70;font-weight:700;font-size:20px}.bottom-nav span{font-size:12px;margin-top:3px}.bottom-nav .active{color:#2d9232}.simple-header{display:flex;align-items:center;gap:16px;padding:20px}.simple-header a{font-size:26px}.simple-header h1{font-size:22px}.product-list{background:white;border-radius:22px;padding:12px}.product-row img{width:86px;height:86px;object-fit:contain;background:#f7f7f7;border-radius:18px}.product-row strong{font-size:18px}.product-row span{font-size:15px}.admin-header{padding-top:28px}.bell{border-radius:14px}.admin-hero{background:linear-gradient(100deg,#4ca544,#b4da86);border-radius:22px;color:white;padding:22px;display:flex;justify-content:space-between;align-items:center;overflow:hidden}.admin-hero span{opacity:.95}.admin-hero h2{font-size:42px;margin:12px 0}.admin-hero em{font-style:normal;background:rgba(255,255,255,.18);padding:8px 12px;border-radius:999px}.big-cup{font-size:86px}.quick-menu{display:grid;grid-template-columns:repeat(4,1fr);background:white;border:1px solid #eee;border-radius:22px;margin:18px 0;padding:16px;box-shadow:0 10px 28px rgba(0,0,0,.04)}.quick-menu a{text-align:center;border-right:1px solid #eee}.quick-menu a:last-child{border-right:0}.quick-menu b{display:inline-grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#edf8e8;font-size:24px}.quick-menu span{display:block;font-weight:800;margin-top:8px}.quick-menu small{color:#777}.admin-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}.admin-stats div{background:white;border:1px solid #eee;border-radius:18px;padding:18px;box-shadow:0 10px 28px rgba(0,0,0,.04)}.admin-stats span{color:#555}.admin-stats strong{display:block;font-size:24px;margin:8px 0}.admin-stats small{color:#2d9232;font-weight:800}.panel-title{display:flex;justify-content:space-between;align-items:center}.panel-title h2{font-size:20px}.panel-title a{color:#2d9232;font-weight:800}.top-products{display:flex;gap:12px;overflow-x:auto}.top-product{position:relative;min-width:120px;border:1px solid #eee;border-radius:16px;padding:12px;text-align:center}.top-product i{position:absolute;top:8px;left:8px;background:#f2c200;color:white;border-radius:50%;font-style:normal;width:22px;height:22px}.top-product img{width:84px;height:84px;object-fit:contain}.top-product strong,.top-product span{display:block}.top-product span{font-size:12px;color:#777}.ok,.wait{font-style:normal;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:900}.ok{background:#e8fff0;color:#16733a}.wait{background:#fff4d7;color:#9b6900}.empty-text{text-align:center;color:#777}.trx-card{display:block}.trx-card>b{display:block;color:#2d9232;font-size:20px;margin:8px 0}@media(max-width:740px){.product-grid{grid-template-columns:repeat(3,1fr)}.summary-wide{grid-template-columns:1fr}.sum-left{border-right:0;border-bottom:1px solid #eee;padding-bottom:14px}.admin-stats{grid-template-columns:1fr 1fr}.quick-menu{grid-template-columns:repeat(4,1fr);font-size:13px}.quick-menu b{width:44px;height:44px}.admin-hero h2{font-size:34px}}@media(max-width:430px){.brand-pill{width:78px;height:78px}.pos-header h1,.admin-header h1{font-size:23px}.product-grid{grid-template-columns:repeat(2,1fr)}.product-card img{height:128px}.bottom-checkout{grid-template-columns:1fr 1fr;bottom:67px}.bottom-checkout button{grid-column:1/3}.admin-stats{grid-template-columns:1fr}.big-cup{font-size:60px}.admin-hero h2{font-size:30px}.quick-menu{padding:12px}.quick-menu span{font-size:13px}.quick-menu small{font-size:11px}}
/* V6 admin hero sesuai contoh: logo sebagai isi card, bukan background menimpa layout */
.admin-header .bell{display:none!important}

.admin-hero.brand-card{
  position:relative;
  min-height:205px;
  background:linear-gradient(105deg,#fff8d8 0%,#fff8d8 43%,#24783a 44%,#24783a 100%)!important;
  color:#111!important;
  border-radius:28px!important;
  padding:26px!important;
  overflow:hidden!important;
  box-shadow:0 18px 44px rgba(35,120,58,.18)!important;
}

.admin-hero.brand-card .hero-content{
  position:relative;
  z-index:3;
  max-width:58%;
}

.admin-hero.brand-card span{
  color:#5b625b;
  font-weight:600;
}

.admin-hero.brand-card h2{
  color:#111;
  font-size:44px;
  margin:12px 0 8px;
}

.admin-hero.brand-card em{
  display:inline-block;
  color:#5f675f;
  background:rgba(255,255,255,.72);
  border-radius:999px;
  padding:9px 14px;
  font-style:normal;
  backdrop-filter:blur(8px);
}

.hero-logo-bg{
  position:absolute;
  z-index:2;
  width:58%;
  max-width:520px;
  right:80px;
  top:50%;
  transform:translateY(-50%);
  object-fit:contain;
  opacity:.98;
}

.hero-drink{
  position:absolute;
  z-index:3;
  width:120px;
  right:24px;
  bottom:18px;
  object-fit:contain;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.2));
}

.account-panel{padding:22px!important}
.account-head{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.account-head p{margin:0;color:#777}
.account-head h2{margin:2px 0;font-size:26px}
.logout-big{
  display:block;
  text-align:center;
  margin-top:14px;
  background:#111;
  color:#fff;
  border-radius:18px;
  padding:15px;
  font-weight:900;
}

@media(max-width:430px){
  .admin-hero.brand-card{
    min-height:176px;
    padding:20px!important;
  }
  .admin-hero.brand-card .hero-content{
    max-width:56%;
  }
  .admin-hero.brand-card h2{
    font-size:34px;
  }
  .admin-hero.brand-card em{
    font-size:14px;
    padding:8px 12px;
  }
  .hero-logo-bg{
    width:64%;
    right:52px;
  }
  .hero-drink{
    width:84px;
    right:12px;
    bottom:18px;
  }
}


/* V7 Dark Mode */
.theme-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:#f4f7ef;
  border:1px solid #e5ecdc;
  border-radius:18px;
  padding:14px;
  margin:16px 0;
}
.theme-box span{
  display:block;
  color:#777;
  font-size:13px;
  margin-top:3px;
}
.theme-toggle{
  background:#1f7a3f!important;
  color:#fff!important;
  white-space:nowrap;
}

html.dark-mode body,
html.dark-mode .app-page,
html.dark-mode .admin-page{
  background:#0e1511!important;
  color:#eef7ee!important;
}

html.dark-mode .login-page{
  background:linear-gradient(135deg,#101b14,#172a1d)!important;
}

html.dark-mode .login-card,
html.dark-mode .summary-wide,
html.dark-mode .product-card,
html.dark-mode .order-panel,
html.dark-mode .white-panel,
html.dark-mode .card-panel,
html.dark-mode .stat-card,
html.dark-mode .menu-card,
html.dark-mode .panel,
html.dark-mode .quick-menu,
html.dark-mode .admin-stats div,
html.dark-mode .product-list,
html.dark-mode .theme-box{
  background:#17231b!important;
  border-color:#263629!important;
  box-shadow:0 14px 36px rgba(0,0,0,.32)!important;
  color:#eef7ee!important;
}

html.dark-mode .pos-header,
html.dark-mode .admin-header,
html.dark-mode .simple-header{
  background:#0e1511!important;
  color:#eef7ee!important;
}

html.dark-mode .pos-header p,
html.dark-mode .admin-header p,
html.dark-mode .simple-header h1,
html.dark-mode .login-card p,
html.dark-mode .theme-box span,
html.dark-mode .summary-wide span,
html.dark-mode .summary-wide small,
html.dark-mode .product-card small,
html.dark-mode .order-row span,
html.dark-mode .trx-card span,
html.dark-mode .product-row span,
html.dark-mode .quick-menu small,
html.dark-mode .admin-stats span,
html.dark-mode .report-card span,
html.dark-mode .muted{
  color:#aab8ad!important;
}

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select{
  background:#101812!important;
  border-color:#2b3a2d!important;
  color:#eef7ee!important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder{
  color:#758377!important;
}

html.dark-mode .bottom-nav,
html.dark-mode .bottom-checkout{
  background:rgba(18,27,21,.96)!important;
  border-color:#263629!important;
  box-shadow:0 -14px 34px rgba(0,0,0,.45)!important;
  color:#eef7ee!important;
}

html.dark-mode .bottom-nav a{
  color:#9ca9a0!important;
}
html.dark-mode .bottom-nav .active{
  color:#7ee082!important;
}

html.dark-mode .small-btn,
html.dark-mode .bell,
html.dark-mode .ghost-danger{
  background:#17231b!important;
  border-color:#2a3a2e!important;
  color:#eef7ee!important;
}

html.dark-mode .brand-pill,
html.dark-mode .avatar{
  background:#fff8d8!important;
}

html.dark-mode .circle-icon,
html.dark-mode .quick-menu b{
  background:#233c29!important;
}

html.dark-mode .product-card img,
html.dark-mode .product-row img{
  background:#101812!important;
}

html.dark-mode .counter{
  border-color:#2b3a2d!important;
}
html.dark-mode .counter button{
  background:#111b14!important;
  color:#7ee082!important;
}
html.dark-mode .counter b{
  color:#eef7ee!important;
}

html.dark-mode .order-row,
html.dark-mode .trx-card,
html.dark-mode .outlet-row,
html.dark-mode .product-row,
html.dark-mode .quick-menu a{
  border-color:#2a3a2e!important;
}

html.dark-mode .empty-order,
html.dark-mode .empty-text{
  color:#99a79b!important;
}

html.dark-mode .ok{
  background:#15351f!important;
  color:#8dff9a!important;
}
html.dark-mode .wait{
  background:#3a2d12!important;
  color:#ffd36f!important;
}

html.dark-mode .admin-hero.brand-card{
  background:
    linear-gradient(105deg,rgba(255,248,216,.92) 0%,rgba(255,248,216,.92) 43%,rgba(36,120,58,.95) 44%,rgba(36,120,58,.95) 100%)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.35)!important;
}

html.dark-mode .admin-hero.brand-card h2{
  color:#111!important;
}
html.dark-mode .admin-hero.brand-card span{
  color:#5b625b!important;
}
html.dark-mode .admin-hero.brand-card em{
  color:#4d584d!important;
}

html.dark-mode .progress{
  background:#2d3a31!important;
}

html.dark-mode .logout-big{
  background:#ef4444!important;
}

html.dark-mode .alert.success{
  background:#14351d!important;
  color:#9dffa6!important;
}
html.dark-mode .alert.danger{
  background:#3a1717!important;
  color:#ffb4b4!important;
}


/* =========================
   V8 Premium Admin Polish
   ========================= */

/* Header logo: horizontal logo inside rounded rectangle, not forced circle crop */
.admin-header .brand-pill.admin-logo{
  width:126px!important;
  height:72px!important;
  border-radius:24px!important;
  background:#fff8d8!important;
  padding:6px!important;
}
.admin-header .brand-pill.admin-logo img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}

/* Admin hero: clean green card with subtle logo watermark */
.admin-hero.brand-card{
  position:relative!important;
  min-height:210px!important;
  background:linear-gradient(135deg,#2f8f31 0%,#1d7736 55%,#0f4d24 100%)!important;
  color:#fff!important;
  border-radius:30px!important;
  padding:26px!important;
  overflow:hidden!important;
  box-shadow:0 22px 50px rgba(31,122,63,.24)!important;
}

html.dark-mode .admin-hero.brand-card{
  background:linear-gradient(135deg,#1e7a34 0%,#145329 58%,#0b2f19 100%)!important;
  box-shadow:0 22px 50px rgba(0,0,0,.44)!important;
}

.admin-hero.brand-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.22),transparent 26%),
    radial-gradient(circle at 88% 15%,rgba(255,255,255,.12),transparent 24%);
  pointer-events:none;
  z-index:1;
}

.admin-hero.brand-card .hero-content{
  position:relative!important;
  z-index:4!important;
  max-width:68%!important;
}

.admin-hero.brand-card span{
  color:rgba(255,255,255,.86)!important;
  font-weight:800!important;
  letter-spacing:.1px;
}

.admin-hero.brand-card h2{
  color:#fff!important;
  font-size:46px!important;
  line-height:1.05!important;
  margin:12px 0 14px!important;
  text-shadow:0 8px 24px rgba(0,0,0,.18);
}

.admin-hero.brand-card em{
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  color:#fff!important;
  background:rgba(255,255,255,.18)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  border-radius:999px!important;
  padding:10px 14px!important;
  font-size:15px!important;
  line-height:1.35!important;
  font-style:normal!important;
  backdrop-filter:blur(12px)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

.hero-logo-bg{
  position:absolute!important;
  z-index:2!important;
  width:42%!important;
  max-width:360px!important;
  right:96px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  object-fit:contain!important;
  opacity:.10!important;
  filter:grayscale(1) brightness(2.1)!important;
  pointer-events:none!important;
}

.hero-drink{
  position:absolute!important;
  z-index:3!important;
  width:128px!important;
  right:24px!important;
  bottom:16px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.28))!important;
}

/* Cards and menus: cleaner dark mode contrast */
html.dark-mode .quick-menu,
html.dark-mode .admin-stats div,
html.dark-mode .white-panel{
  background:#142019!important;
  border-color:#28402e!important;
}

html.dark-mode .admin-stats strong,
html.dark-mode .white-panel h2,
html.dark-mode .quick-menu span,
html.dark-mode .outlet-row strong{
  color:#f2fff4!important;
}

html.dark-mode .admin-stats span,
html.dark-mode .outlet-row span,
html.dark-mode .panel-title a{
  color:#aebdaf!important;
}

/* Outlet status spacing fix */
.outlet-name{
  display:flex!important;
  align-items:baseline!important;
  gap:8px!important;
}
.outlet-name strong{
  min-width:42px;
}
.outlet-name span{
  display:inline!important;
}

/* Admin nav label: Laporan polish */
.bottom-nav a span{
  letter-spacing:.1px;
}

/* Account page contrast */
html.dark-mode .account-head h2{
  color:#f2fff4!important;
}

/* Mobile hero tuning */
@media(max-width:430px){
  .admin-header{
    align-items:center!important;
  }
  .admin-header .brand-pill.admin-logo{
    width:108px!important;
    height:66px!important;
    border-radius:22px!important;
  }
  .admin-hero.brand-card{
    min-height:180px!important;
    padding:20px!important;
  }
  .admin-hero.brand-card .hero-content{
    max-width:72%!important;
  }
  .admin-hero.brand-card h2{
    font-size:36px!important;
  }
  .admin-hero.brand-card span{
    font-size:15px!important;
  }
  .admin-hero.brand-card em{
    font-size:13px!important;
    padding:8px 12px!important;
    max-width:210px!important;
  }
  .hero-logo-bg{
    width:46%!important;
    right:58px!important;
    opacity:.09!important;
  }
  .hero-drink{
    width:88px!important;
    right:12px!important;
    bottom:20px!important;
  }
  .outlet-name{
    gap:6px!important;
  }
  .outlet-name strong{
    min-width:38px;
  }
}