/*
 * TK-HandCrafter V109.8.2 Premium UI skin
 * UI-only override for the V109.8.1 security baseline.
 * No API route, order, fund, grab, inventory, or account logic is changed.
 */

:root{
  --primary:#5148c8;
  --primary2:#7567df;
  --primary3:#9b8df0;
  --accent:#c58a57;
  --rose:#d4587d;
  --success:#188a64;
  --danger:#d64555;
  --warning:#c9852e;
  --bg:#f4f5f9;
  --surface:#ffffff;
  --surface-soft:#f8f8fc;
  --surface-tint:#f0effa;
  --text:#181a2d;
  --muted:#777d8e;
  --line:#e4e6ee;
  --shadow:0 10px 30px rgba(31,34,69,.075);
  --shadow-soft:0 4px 14px rgba(31,34,69,.055);
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:11px;
}

html{background:#e7e9f1!important}
body{background:#e7e9f1!important;color:var(--text)!important}
.app-shell{
  background:linear-gradient(180deg,#f7f7fb 0%,#f3f4f8 100%)!important;
  box-shadow:0 0 0 1px #dfe1e9,0 22px 70px rgba(28,31,64,.12)!important;
}

/* Global controls */
button,.btn,.pill,.cat,.tab,.nav-btn{transition:transform .14s ease,background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}
button:active,.btn:active,.pill:active,.cat:active{transform:scale(.98)}
.input,textarea,select{
  border-color:var(--line)!important;
  background:#fff!important;
  color:var(--text)!important;
  box-shadow:none!important;
}
.input:focus,textarea:focus,select:focus{
  border-color:#8b82df!important;
  box-shadow:0 0 0 3px rgba(81,72,200,.095)!important;
}
.btn{
  background:linear-gradient(100deg,var(--primary),var(--primary2))!important;
  box-shadow:0 7px 18px rgba(81,72,200,.18)!important;
  color:#fff!important;
}
.btn.secondary{background:var(--surface-tint)!important;color:var(--primary)!important;box-shadow:none!important}
.btn.gray{background:#eef0f4!important;color:#555c6d!important;box-shadow:none!important}
.btn.green{background:linear-gradient(100deg,#16835f,#26a579)!important}
.btn.red,.btn.fix-order{background:linear-gradient(100deg,#c94655,#e2765d)!important}

/* App header */
.topbar{
  height:60px!important;
  padding:9px 14px 7px!important;
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid rgba(227,228,236,.9)!important;
  box-shadow:0 4px 16px rgba(29,31,62,.035)!important;
  backdrop-filter:blur(14px);
}
.logo{gap:9px!important;min-width:0}
.brand-mark{
  width:33px!important;height:33px!important;border-radius:11px!important;
  background:linear-gradient(145deg,#403aa8,#7467df)!important;
  box-shadow:0 7px 17px rgba(70,62,173,.2)!important;
}
.brand-name{
  max-width:220px!important;
  font-size:20px!important;
  font-weight:800!important;
  letter-spacing:-.45px!important;
  background:linear-gradient(90deg,#1c1e37,#5148c8)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
.top-actions{gap:6px!important}
.pill{
  height:36px!important;min-width:36px!important;padding:0 10px!important;
  border:1px solid var(--line)!important;background:#fff!important;color:#5e6373!important;
  box-shadow:0 2px 7px rgba(31,34,69,.035)!important;font-weight:650!important;
}
.icon-pill #cartCount{background:var(--rose)!important}

/* Page rhythm */
.page{
  min-height:calc(100vh - 60px)!important;
  padding:13px 13px calc(82px + env(safe-area-inset-bottom))!important;
}
.section-title{margin:17px 1px 10px!important}
.section-title h3{font-size:18px!important;font-weight:760!important;letter-spacing:-.2px}
.section-title h3:before{width:4px!important;height:19px!important;background:linear-gradient(180deg,var(--primary),var(--primary3))!important}

/* Home: keep V109.7 structure only — banner, categories and products. */
#homePage .banner{
  min-height:116px!important;
  padding:20px 18px!important;
  border-radius:19px!important;
  background:
    radial-gradient(circle at 83% 25%,rgba(255,255,255,.22),transparent 26%),
    radial-gradient(circle at 66% 110%,rgba(197,138,87,.26),transparent 34%),
    linear-gradient(125deg,#29294f 0%,#4b44b5 52%,#8174df 100%)!important;
  box-shadow:0 13px 29px rgba(55,49,133,.2)!important;
  border:1px solid rgba(255,255,255,.18)!important;
}
#homePage .banner:after{
  right:-56px!important;top:-72px!important;width:190px!important;height:190px!important;
  background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.02))!important;
  border:1px solid rgba(255,255,255,.1)!important;
}
#homePage .banner h2{font-size:24px!important;font-weight:760!important;letter-spacing:-.35px!important}
#homePage .banner p{max-width:260px;color:rgba(255,255,255,.82)!important;font-size:13px!important;line-height:1.55!important}
.category-row{gap:7px!important;padding-bottom:8px!important}
.cat{
  padding:8px 13px!important;border-radius:12px!important;
  background:#fff!important;color:#646a7b!important;border-color:var(--line)!important;
  box-shadow:0 2px 7px rgba(31,34,69,.025)!important;font-size:12px!important;
}
.cat.active{
  background:#242642!important;color:#fff!important;border-color:#242642!important;
  box-shadow:0 5px 12px rgba(36,38,66,.12)!important;
}
.grid{gap:10px!important}
.product{
  border-radius:16px!important;
  border:1px solid rgba(226,227,235,.95)!important;
  box-shadow:var(--shadow-soft)!important;
  background:#fff!important;
}
.product img{background:#f0f1f5!important}
.product-body{padding:10px 10px 11px!important}
.product-name{height:37px!important;font-size:13.2px!important;font-weight:670!important;color:#292b3d!important}
.price{font-size:16px!important;font-weight:780!important;color:var(--rose)!important;margin:6px 0 4px!important}
.code{color:#8a8f9f!important;font-size:10.8px!important}
.fav{width:32px!important;height:32px!important;box-shadow:0 3px 9px rgba(27,30,57,.08)!important}
.buy-row .btn{min-height:38px!important;border-radius:10px!important;padding:8px!important;font-size:12px!important;box-shadow:none!important}

/* Quick query / grab: visual refinement only. IDs and events remain untouched. */
.quick-card{
  min-height:auto!important;
  justify-content:flex-start!important;
  padding:9px 0 20px!important;
}
.quick-box{text-align:left!important}
.quick-box>h2{
  margin:3px 1px 5px!important;font-size:21px!important;font-weight:760!important;letter-spacing:-.3px!important;
}
.quick-box>.notice{
  margin:0 0 12px!important;padding:10px 12px!important;border:1px solid #e8e8ef!important;
  border-radius:13px!important;background:#f8f8fb!important;color:#73798a!important;text-align:left!important;
}
.search-line{gap:8px!important;margin:0 0 10px!important}
.search-input{
  height:50px!important;border-radius:14px!important;
  font-size:19px!important;font-weight:760!important;letter-spacing:5px!important;
  border-color:#dfe1ea!important;box-shadow:0 3px 11px rgba(31,34,69,.035)!important;
}
.clear-btn{
  width:48px!important;border-radius:14px!important;border-color:#dfe1ea!important;
  background:#fff!important;color:#767b8b!important;
}
.code-keypad{
  margin-top:10px!important;padding:13px!important;border-radius:18px!important;
  border:1px solid #e2e4ec!important;box-shadow:var(--shadow-soft)!important;
}
.keypad-title{color:#7b8090!important;font-weight:650!important}
.keypad-grid{gap:8px!important}
.keypad-key{
  height:48px!important;border-radius:12px!important;background:#f7f7fa!important;
  border-color:#e5e6ed!important;color:#222437!important;font-size:18px!important;font-weight:720!important;
}
.keypad-key.fn{background:#efeff5!important;color:#616778!important}
.keypad-search{
  height:47px!important;border-radius:12px!important;
  background:linear-gradient(100deg,var(--primary),var(--primary2))!important;
  box-shadow:0 7px 17px rgba(81,72,200,.16)!important;
}
.result-card{border-radius:18px!important;border:1px solid #e3e4eb!important;box-shadow:var(--shadow)!important}
.search-product img{border-radius:14px!important}
.summary{background:#f7f7fa!important;border:1px solid #ececf1!important;border-radius:13px!important}
.summary-row.profit b{color:var(--success)!important}

/* Orders */
#ordersPage .tabs{
  position:sticky;top:60px;z-index:5;
  margin:-2px -2px 12px!important;padding:4px!important;
  background:rgba(246,247,250,.94)!important;border:1px solid #e6e7ee!important;border-radius:14px!important;
  backdrop-filter:blur(10px);
}
#ordersPage .tab{
  min-height:40px;padding:8px 11px!important;border:0!important;border-radius:10px!important;font-size:12px!important;
}
#ordersPage .tab.active{background:#fff!important;color:var(--primary)!important;box-shadow:0 3px 9px rgba(31,34,69,.07)!important}
.order-card{border-radius:16px!important;border:1px solid #e3e4eb!important;box-shadow:var(--shadow-soft)!important;padding:13px!important}
.order-main img{border-radius:12px!important}
.order-name{font-weight:700!important;color:#252739!important}
.status{font-weight:700!important}
.status.completed{background:#e9f7f1!important;color:#197257!important}
.status.pending,.status.reviewing{background:#fff3df!important;color:#a5651d!important}
.status.failed,.status.canceled{background:#fcebed!important;color:#b33e4d!important}

/* Profile / Me */
.profile-card{
  border-radius:19px!important;padding:16px!important;
  border:1px solid #e3e4eb!important;box-shadow:var(--shadow)!important;
  background:linear-gradient(145deg,#fff 0%,#fbfaff 100%)!important;
}
.avatar{background:linear-gradient(145deg,#3f3b9a,#806ede)!important;box-shadow:0 8px 18px rgba(70,62,173,.2)!important}
.user-name{font-weight:760!important;color:#222437!important}
.vip{background:linear-gradient(100deg,#b47843,#d6a16c)!important;border-radius:999px!important;padding:3px 7px!important}
.copy-id{color:var(--primary)!important;font-weight:700!important}
.bar{height:6px!important;background:#ececf2!important}
.bar div{background:linear-gradient(90deg,var(--primary),var(--primary3))!important}
.vip-upgrade-card,.balance-grid,.checkin-entry,.menu{
  border:1px solid #e4e5ec!important;
  box-shadow:var(--shadow-soft)!important;
}
.vip-upgrade-card{border-radius:17px!important;background:linear-gradient(145deg,#fff,#f8f7ff)!important}
.balance-grid{border-radius:16px!important}
.balance-item{padding:13px 4px!important;border-color:#ececf1!important}
.balance-item b{color:var(--rose)!important;font-weight:760!important}
.balance-item span{color:#656b7c!important}
.checkin-entry{border-radius:16px!important;background:linear-gradient(135deg,#fff8f6,#fff,#f7f6ff)!important;border-color:#f0d8d4!important}
.checkin-entry-icon{background:linear-gradient(145deg,#cf6652,#e88a62)!important;box-shadow:0 7px 17px rgba(207,102,82,.18)!important}
.menu-title{font-size:16px!important;font-weight:740!important;color:#292b3c!important;margin:18px 2px 8px!important}
.menu{border-radius:16px!important}
.menu-item{min-height:55px!important;padding:0 13px!important;border-color:#ededf2!important}
.menu-icon{background:#f0eff9!important;color:var(--primary)!important}
.menu-item-danger .menu-icon{background:#fceff0!important;color:var(--danger)!important}
.menu-chevron{color:#a1a5b2!important}

/* Bottom navigation */
.bottom-nav{
  height:calc(64px + env(safe-area-inset-bottom))!important;
  padding:4px 4px env(safe-area-inset-bottom)!important;
  background:rgba(255,255,255,.97)!important;
  border-top:1px solid rgba(225,226,234,.95)!important;
  box-shadow:0 -8px 24px rgba(31,34,69,.065)!important;
  backdrop-filter:blur(14px);
}
.nav-btn{height:56px!important;color:#888d9b!important;font-weight:570!important;font-size:10.5px!important;gap:3px!important}
.nav-btn .ico svg{stroke-width:1.85!important}
.nav-btn.active{color:var(--primary)!important}
.nav-btn.active .ico{
  width:34px!important;height:30px!important;border-radius:11px!important;
  background:#efedfb!important;
}

/* Auth: same V109.7 workflow, refined mobile composition. */
.auth-screen{
  display:block!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  padding:18px 14px calc(30px + env(safe-area-inset-bottom))!important;
  background:
    radial-gradient(circle at 86% 0%,rgba(127,111,223,.18),transparent 31%),
    linear-gradient(180deg,#eeedfa 0%,#f7f7fb 36%,#f1f2f7 100%)!important;
}
.auth-card{
  width:min(390px,100%)!important;
  margin:16px auto!important;
  max-height:none!important;
  overflow:visible!important;
  border-radius:22px!important;
  padding:20px 18px 18px!important;
  background:rgba(255,255,255,.985)!important;
  border:1px solid rgba(222,223,233,.95)!important;
  box-shadow:0 18px 50px rgba(37,38,78,.12)!important;
}
.auth-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
  gap:10px!important;
  margin-bottom:14px!important;
}
.auth-logo{font-size:21px!important;gap:9px!important;min-width:0!important;color:#252743!important}
.auth-logo .brand-mark{
  width:35px!important;height:35px!important;flex-basis:35px!important;border-radius:11px!important;
  background:linear-gradient(145deg,#423ca7,#7468dc)!important;
  box-shadow:0 7px 16px rgba(70,62,173,.2)!important;
}
.auth-logo .brand-name{
  min-width:0!important;max-width:none!important;overflow:visible!important;text-overflow:clip!important;
  white-space:nowrap!important;font-size:21px!important;font-weight:800!important;letter-spacing:-.45px!important;
  background:linear-gradient(90deg,#1e2039,#5148c8)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
.auth-brand-subtitle{margin:4px 0 0 44px!important;text-align:left!important;color:#898e9d!important;font-size:11.5px!important}
.auth-row{display:block!important;width:76px!important;max-width:76px!important;margin:0!important}
.auth-language{
  width:76px!important;max-width:76px!important;height:36px!important;min-height:36px!important;
  padding:0 24px 0 9px!important;border-radius:11px!important;background:#fafafe!important;
  border-color:#e1e2ea!important;font-size:11.5px!important;
}
.auth-tabs{margin:0 0 13px!important;padding:4px!important;border-radius:13px!important;background:#f1f0f8!important}
.auth-tab{height:40px!important;min-height:40px!important;border-radius:10px!important;font-size:13px!important;font-weight:650!important}
.auth-tab.active{color:var(--primary)!important;box-shadow:0 3px 10px rgba(31,34,69,.07)!important}
.auth-register-note{
  margin:-2px 0 13px!important;padding:8px 10px!important;border-radius:11px!important;
  background:#f7f7fa!important;border:1px solid #ececf1!important;color:#74798a!important;
  font-size:11.5px!important;line-height:1.45!important;
}
.auth-form{gap:8px!important;padding-bottom:3px!important}
.auth-form label{font-size:12.5px!important;font-weight:670!important;color:#2c2e42!important;margin-top:1px!important}
.auth-form .input{min-height:47px!important;height:47px!important;border-radius:12px!important;border-color:#dfe1e9!important}
.password-toggle{top:4px!important;right:4px!important;color:#858a99!important}
.auth-help-row{margin-top:-4px!important}
.auth-help-link{font-size:11.5px!important;font-weight:650!important;color:var(--primary)!important}
.captcha-panel{
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(82px,.8fr) 42px!important;
  gap:7px!important;align-items:end!important;
  padding:8px!important;margin:10px 0!important;border-radius:13px!important;
  background:#f8f8fb!important;border:1px solid #e5e6ed!important;
}
.captcha-panel label{font-size:10.5px!important;font-weight:650!important;color:#6f7484!important;margin:0 0 4px!important}
.captcha-question{height:39px!important;min-height:39px!important;border-radius:10px!important;font-size:14px!important;font-weight:760!important;border-color:#e0e2e9!important}
.captcha-answer{height:39px!important;min-height:39px!important;padding:0 9px!important;border-radius:10px!important}
.captcha-refresh{width:42px!important;height:39px!important;border-radius:10px!important;background:#242642!important}
.auth-primary{min-height:47px!important;margin-top:4px!important;border-radius:12px!important}
.auth-support-link{min-height:38px!important;color:#696e7e!important;font-weight:620!important}
.auth-support-link svg{stroke:var(--primary)!important}
.auth-security-note{margin-top:9px!important;color:#a0a4b1!important}
#forgotPasswordModal,#customerManagerModal{z-index:1400!important}
.contact-manager-sheet{border:1px solid #e2e3ea!important;box-shadow:0 20px 65px rgba(31,34,69,.18)!important}
.contact-manager-icon{background:#efedfb!important;color:var(--primary)!important}

/* Modal consistency */
.modal{background:rgba(24,25,45,.34)!important;backdrop-filter:blur(3px)}
.sheet{border:1px solid #e4e5ec!important;box-shadow:0 -12px 45px rgba(31,34,69,.14)!important}
.modal.center .sheet{box-shadow:0 20px 55px rgba(31,34,69,.16)!important}
.x{background:#f0f1f5!important;color:#656a79!important}
.notice{background:#f7f7fa!important;color:#717687!important;border:1px solid #ececf1!important}

/* Smaller phones */
@media(max-width:390px){
  .auth-card{padding:18px 15px 17px!important}
  .auth-logo .brand-name{font-size:19px!important}
  .auth-logo{font-size:19px!important}
  .auth-row{width:70px!important;max-width:70px!important}
  .auth-language{width:70px!important;max-width:70px!important;padding-left:7px!important;font-size:11px!important}
  .captcha-panel{grid-template-columns:minmax(0,1fr) 76px 40px!important;gap:6px!important}
  .captcha-refresh{width:40px!important}
  .page{padding-left:11px!important;padding-right:11px!important}
}
@media(max-width:350px){
  .auth-head{grid-template-columns:1fr!important}
  .auth-row{width:100%!important;max-width:100%!important}
  .auth-language{width:100%!important;max-width:100%!important}
  .auth-brand-subtitle{margin-left:44px!important}
  .captcha-panel{grid-template-columns:1fr 42px!important}
  .captcha-copy{grid-column:1/-1!important}
  .captcha-answer{grid-column:1!important}
}
@media(prefers-reduced-motion:reduce){button,.btn,.pill,.cat,.tab,.nav-btn{transition:none!important}}

/* V109.8.2 security-hotfix responsive correction */
@media(max-width:375px){
  .auth-head{grid-template-columns:1fr!important;gap:8px!important}
  .auth-row{width:100%!important;max-width:none!important;display:flex!important;justify-content:flex-end!important}
  .auth-language{width:88px!important;max-width:88px!important}
  .auth-logo .brand-name{font-size:18px!important;white-space:nowrap!important}
  .auth-brand-subtitle{margin-left:40px!important}
}