html{overflow-x:hidden;}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#121418;color:#F5F7FA;min-height:100vh;padding-bottom:70px;overflow-x:hidden;}

/* ТИПОГРАФИКА */
.text-screen-title{font-size:28px;font-weight:750;line-height:34px;letter-spacing:-0.025em;color:#F4F6FA;}
.text-section-title{font-size:21px;font-weight:700;line-height:27px;letter-spacing:-0.02em;color:#F4F6FA;}
.text-card-title{font-size:17px;font-weight:650;line-height:22px;letter-spacing:-0.01em;color:#F4F6FA;}
.text-metric{font-size:36px;font-weight:750;line-height:40px;letter-spacing:-0.03em;color:#F4F6FA;}
.text-body{font-size:15px;font-weight:500;line-height:21px;color:#F4F6FA;}
.text-secondary{font-size:14px;font-weight:450;line-height:20px;color:#A2AAB8;}
.text-small{font-size:12px;font-weight:600;line-height:16px;color:#7A8494;}
.text-muted{color:#7A8494;}
.text-gold{color:#D6B35C;}
.text-success{color:#36D675;}
.text-error{color:#FF4D4F;}
.text-warning{color:#FFB020;}

.header{background:#1A1E24;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2B313C;}
.avatar{width:38px;height:38px;background:linear-gradient(135deg,#C39846,#8a6820);border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;flex-shrink:0;}
.header-info{flex:1;margin-left:12px;}
.header-name{font-size:17px;font-weight:650;color:#F4F6FA;}
.header-role{font-size:14px;font-weight:450;color:#A2AAB8;margin-top:1px;}
.header-date{font-size:12px;font-weight:600;color:#7A8494;}
.section{display:none;padding:16px;padding-bottom:90px;max-width:100vw;overflow-x:hidden;}
.section.active{display:block;}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.kettle-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.kettle{box-sizing:border-box;background:#1A2029;border:1px solid #2B3442;border-radius:22px;padding:18px;cursor:pointer;position:relative;overflow:hidden;height:156px;min-height:156px;max-height:156px;transition:background 200ms ease-out,border-color 200ms ease-out;}
.kettle:active{background:#222A35;}
.kettle *{box-sizing:border-box;}
.k-top{position:absolute;top:0;left:0;right:0;height:3px;border-radius:22px 22px 0 0;background:#2B3442;}
.k-num{font-size:11px;font-weight:600;line-height:14px;color:#7A8494;letter-spacing:1px;text-transform:uppercase;margin-top:6px;margin-bottom:8px;}
.k-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;font-size:12px;font-weight:600;line-height:16px;}
.k-timer{font-size:14px;font-weight:450;line-height:20px;color:#A2AAB8;font-variant-numeric:tabular-nums;margin-bottom:6px;}
.k-status{display:flex;align-items:center;justify-content:center;gap:6px;}
.k-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.k-status-text{font-size:12px;font-weight:600;line-height:16px;}
.k-free{display:flex;flex-direction:column;align-items:center;justify-content:center;height:110px;}
.k-free-num{font-size:36px;font-weight:750;line-height:40px;letter-spacing:-0.03em;color:#2B3442;}
.k-free-txt{font-size:11px;color:#6F7887;margin-top:4px;}
@keyframes glow-hell{0%,100%{box-shadow:0 0 10px rgba(225,15,30,0.08);}50%{box-shadow:0 0 22px rgba(225,15,30,0.22);}}
@keyframes glow-cyber{0%,100%{box-shadow:0 0 10px rgba(106,37,255,0.08);}50%{box-shadow:0 0 22px rgba(106,37,255,0.22);}}
@keyframes glow-aureus{0%,100%{box-shadow:0 0 10px rgba(195,152,70,0.08);}50%{box-shadow:0 0 22px rgba(195,152,70,0.22);}}
@keyframes glow-death{0%,100%{box-shadow:0 0 10px rgba(247,22,101,0.08);}50%{box-shadow:0 0 22px rgba(247,22,101,0.22);}}
@keyframes glow-noar{0%,100%{box-shadow:0 0 10px rgba(158,11,33,0.08);}50%{box-shadow:0 0 22px rgba(158,11,33,0.22);}}
.brew-hell{border-color:rgba(225,15,30,0.3);animation:glow-hell 2.5s ease-in-out infinite;}
.brew-cyber{border-color:rgba(106,37,255,0.3);animation:glow-cyber 2.5s ease-in-out infinite;}
.brew-aureus{border-color:rgba(195,152,70,0.3);animation:glow-aureus 2.5s ease-in-out infinite;}
.brew-death{border-color:rgba(247,22,101,0.3);animation:glow-death 2.5s ease-in-out infinite;}
.brew-noar{border-color:rgba(158,11,33,0.3);animation:glow-noar 2.5s ease-in-out infinite;}
.aroma-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.aroma-card{background:#1A2029;border:1px solid #2B3442;border-radius:22px;padding:18px;cursor:pointer;text-align:center;position:relative;overflow:hidden;transition:background 200ms ease-out,border-color 200ms ease-out,box-shadow 200ms ease-out;}
.aroma-card:active{background:#222A35;}
.aroma-hell{border-top:1px solid rgba(225,15,30,0.35);box-shadow:inset 0 1px 0 rgba(225,15,30,0.25);}
.aroma-cyber{border-top:1px solid rgba(106,37,255,0.35);box-shadow:inset 0 1px 0 rgba(106,37,255,0.25);}
.aroma-aureus{border-top:1px solid rgba(195,152,70,0.35);box-shadow:inset 0 1px 0 rgba(195,152,70,0.25);}
.aroma-death{border-top:1px solid rgba(247,22,101,0.35);box-shadow:inset 0 1px 0 rgba(247,22,101,0.25);}
.aroma-noar{border-top:1px solid rgba(158,11,33,0.35);box-shadow:inset 0 1px 0 rgba(158,11,33,0.25);}
.greenhouse-item{background:#1A2029;border:1px solid rgba(255,255,255,0.08);border-radius:22px;padding:18px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;}
.greenhouse-count{font-size:32px;font-weight:750;color:#C39846;}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:1000000;align-items:flex-end;}
.modal.open{display:flex;}
.modal-content{background:#1D232C;border-radius:24px 24px 0 0;padding:24px;width:100%;max-height:80vh;overflow-y:auto;border-top:1px solid #2B3442;}
.modal-title{font-size:17px;font-weight:700;margin-bottom:16px;}
.select-list{list-style:none;}
.select-list li{padding:16px 14px;border-bottom:1px solid rgba(255,255,255,0.06);cursor:pointer;font-size:15px;display:flex;align-items:center;gap:10px;border-radius:8px;transition:background 200ms ease-out;}
.select-list li:active{background:rgba(255,255,255,0.03);}
.select-list li:last-child{border-bottom:none;}
.flavor-item{padding:16px 14px;border-bottom:1px solid rgba(255,255,255,0.06);cursor:pointer;font-size:15px;color:#F4F6FA;transition:background 200ms ease-out;}
.flavor-item:active{background:rgba(255,255,255,0.03);}
.flavor-item:last-child{border-bottom:none;}
.btn{width:100%;padding:14px;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;margin-top:8px;font-family:'Inter',sans-serif;}
.btn-primary{background:#C39846;color:#101318;border:1px solid #C39846;}
.btn-secondary{background:#1D232C;color:#F4F6FA;border:1px solid #2B3442;}
.btn-success{background:rgba(54,214,117,0.12);border:1px solid rgba(54,214,117,0.35);color:#36D675;}
.btn-danger{background:rgba(255,77,79,0.12);border:1px solid rgba(255,77,79,0.35);color:#FF4D4F;}
.btn-warning{background:rgba(255,176,32,0.12);border:1px solid rgba(255,176,32,0.35);color:#FFB020;}
.input-group{margin-bottom:14px;}
.input-label{font-size:13px;color:#A2AAB8;margin-bottom:8px;font-weight:600;}
.input{width:100%;background:#1A2029;border:1px solid #2B3442;border-radius:12px;padding:14px;color:#F4F6FA;font-size:15px;outline:none;font-family:'Inter',sans-serif;transition:border-color 200ms ease-out;}
.input:focus{border-color:rgba(195,152,70,0.35);}
.nav{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#171B22 !important;
  border-top:1px solid rgba(255,255,255,0.08) !important;
  display:flex;
  align-items:center;
  padding:4px 2px;
  padding-bottom:env(safe-area-inset-bottom);
  height:64px;
  box-sizing:border-box;
  z-index:9999 !important;
  overflow:hidden;
  width:100%;
}

.nav-item{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  cursor:pointer;
  padding:4px 2px;
  margin:0 2px;
  position:relative;
  color:#7A8494;
  background:transparent;
  border:1px solid transparent;
  border-radius:14px;
  box-sizing:border-box;
  transition:color 180ms ease-out, background 180ms ease-out, border-color 180ms ease-out;
}

.nav-item.active{
  background:rgba(195,152,70,0.10) !important;
  border-color:rgba(195,152,70,0.22) !important;
  color:#D6B35C !important;
}

.nav-icon{color:inherit;width:20px;height:20px;stroke-width:2.2;}
.nav-label{font-size:9.5px;font-weight:600;color:inherit;line-height:12px;white-space:nowrap;letter-spacing:-0.02em;}
.nav-item.active .nav-icon{color:#D6B35C !important;}
.nav-item.active .nav-label{color:#D6B35C !important;}

.scroll-chips{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;padding-bottom:4px;max-width:100%;-webkit-overflow-scrolling:touch;}
.scroll-chips::-webkit-scrollbar{display:none;}
.seg-tab{flex:1;text-align:center;padding:10px 0;background:#1D232C;border:1px solid #2B3442;color:#A2AAB8;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;box-sizing:border-box;transition:background 180ms,border-color 180ms,color 180ms;}
.seg-tab.active{background:rgba(195,152,70,0.12)!important;border-color:rgba(195,152,70,0.35)!important;color:#D6B35C!important;}
/* Фасовка */
.pack-brand-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.pack-brand-card{background:#1A2029;border:1px solid #2B3442;border-radius:22px;padding:18px;cursor:pointer;text-align:center;position:relative;overflow:hidden;transition:background 200ms ease-out,border-color 200ms ease-out,box-shadow 200ms ease-out;}
.pack-brand-card:active{background:#222A35;}
.pack-brand-card.selected{border-width:2px;}
#pb-Hell.selected,#pb-Hell:hover{box-shadow:0 0 12px rgba(225,15,30,0.15);}
#pb-Cyber.selected,#pb-Cyber:hover{box-shadow:0 0 12px rgba(106,37,255,0.15);}
#pb-Aureus.selected,#pb-Aureus:hover{box-shadow:0 0 12px rgba(195,152,70,0.15);}
#pb-DeathPunch.selected,#pb-DeathPunch:hover{box-shadow:0 0 12px rgba(247,22,101,0.15);}
#pb-Noar.selected,#pb-Noar:hover{box-shadow:0 0 12px rgba(158,11,33,0.15);}
.pack-size-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px;}
.pack-size-btn{background:#1A2029;border:1px solid #2B3442;border-radius:16px;padding:16px 8px;cursor:pointer;text-align:center;transition:background 200ms ease-out,border-color 200ms ease-out;}
.pack-size-btn:active{background:#222A35;}
.pack-size-btn.selected{background:#1D232C;border-color:rgba(195,152,70,0.28);}
.pack-size-btn .size-val{font-size:20px;font-weight:750;color:#F4F6FA;}
.pack-size-btn .size-lbl{font-size:11px;color:#A2AAB8;margin-top:4px;}
.pack-step{margin-bottom:20px;}
.pack-step-label{font-size:12px;font-weight:600;line-height:16px;color:#7A8494;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;}
.pack-selected-info{background:#1D232C;border:1px solid #2B3442;border-radius:20px;padding:18px;margin-bottom:16px;font-size:14px;line-height:1.8;}
.pack-history-item{background:#1A2029;border:1px solid rgba(255,255,255,0.08);border-radius:22px;padding:18px;margin-bottom:12px;}
.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#34C759;color:#fff;padding:16px 32px;border-radius:16px;font-size:16px;font-weight:600;z-index:999;opacity:0;transition:opacity 0.3s;pointer-events:none;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,0.3);}
.toast.show{opacity:1;}
.toast.error{background:#FF453A;}

/* ЕДИНАЯ СИСТЕМА КАРТОЧЕК */
.app-card{background:#1A2029;border:1px solid rgba(255,255,255,0.08);border-radius:22px;padding:18px;overflow:hidden;}
.app-card-elevated{background:#1D232C;border:1px solid #2B3442;border-radius:24px;padding:20px;}
.app-card-interactive{background:#1A2029;border:1px solid rgba(255,255,255,0.08);border-radius:22px;padding:18px;cursor:pointer;transition:background 200ms ease-out,border-color 200ms ease-out;}
.app-card-interactive:active{background:#222A35;border-color:rgba(195,152,70,0.28);}

/* METRIC CARD */
.metric-card{background:#1A2029;border:1px solid rgba(255,255,255,0.08);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:8px;}
.metric-icon{color:#C39846;display:flex;align-items:center;justify-content:flex-start;}
.metric-value{font-size:28px;font-weight:750;line-height:32px;letter-spacing:-0.03em;color:#F4F6FA;white-space:nowrap;}
.metric-label{font-size:14px;font-weight:450;line-height:20px;color:#A2AAB8;}

/* MODULE CARD */
.module-card{background:#1A2029;border:1px solid rgba(255,255,255,0.08);border-radius:22px;padding:18px;cursor:pointer;transition:background 200ms ease-out,border-color 200ms ease-out;}
.module-card:active{background:#222A35;border-color:rgba(195,152,70,0.28);}
.module-icon-container{width:40px;height:40px;border-radius:14px;background:rgba(195,152,70,0.10);border:1px solid rgba(195,152,70,0.24);display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.module-title{font-size:17px;font-weight:650;line-height:22px;letter-spacing:-0.01em;color:#F4F6FA;margin-bottom:6px;}
.module-description{font-size:14px;font-weight:450;line-height:20px;color:#A2AAB8;}

/* PROCESS CARD */
.process-card{background:#1A2029;border:1px solid #2B3442;border-radius:22px;padding:18px;position:relative;overflow:hidden;cursor:pointer;transition:background 200ms ease-out,border-color 200ms ease-out;}
.process-card:active{background:#222A35;}
.process-card-top-line{position:absolute;top:0;left:0;right:0;height:3px;border-radius:22px 22px 0 0;}
.process-card-free{border-color:#2B3442;}
.process-card-free .process-status-text{color:#6F7887;}

/* STATUS BADGE */
.status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;font-size:11px;font-weight:600;}
.status-dot{width:6px;height:6px;border-radius:50%;}

/* EMPTY STATE */
.empty-state{background:#1A2029;border:1px dashed rgba(255,255,255,0.12);border-radius:20px;padding:24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;}
.empty-state-icon{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;margin-bottom:6px;color:#7A8494;}
.empty-state-title{font-size:16px;font-weight:650;color:#F4F6FA;line-height:21px;}
.empty-state-desc{font-size:14px;font-weight:450;color:#A2AAB8;line-height:20px;}
.empty-state-btn{margin-top:8px;background:rgba(195,152,70,0.12);border:1px solid rgba(195,152,70,0.35);color:#D6B35C;border-radius:12px;padding:8px 16px;font-size:14px;font-weight:650;cursor:pointer;}
.error-state{background:rgba(255,77,79,0.08);border:1px solid rgba(255,77,79,0.24);border-radius:20px;padding:24px;text-align:center;}

/* PROGRESS BAR */
.progress-track{height:5px;background:#2B3442;border-radius:999px;overflow:hidden;}
.progress-fill{height:100%;border-radius:999px;transition:width 300ms ease-out;}

/* SECTION HEADER */
.section-header{margin-bottom:12px;}
.section-title{font-size:21px;font-weight:700;line-height:27px;letter-spacing:-0.02em;color:#F4F6FA;}
.section-subtitle{font-size:14px;color:#A2AAB8;margin-top:4px;}

/* GRID SYSTEM */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.section-gap{margin-bottom:20px;}