:root {
  --glass: rgba(255, 255, 255, .68);
  --glass-strong: rgba(255, 255, 255, .86);
  --glass-line: rgba(255, 255, 255, .72);
  --glass-shadow: 0 18px 50px rgba(25, 79, 67, .10);
  --glass-shadow-hover: 0 24px 60px rgba(20, 103, 83, .16);
  --aqua: #0da58f;
  --aqua-soft: #79dfca;
  --sky: #76b9ff;
  --lavender: #b69bff;
  --peach: #ffb98b;
}

html {
  min-height: 100%;
  background: #edf8f5;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 6%, rgba(93, 221, 190, .28), transparent 28rem),
    radial-gradient(circle at 90% 14%, rgba(112, 174, 255, .22), transparent 30rem),
    radial-gradient(circle at 82% 92%, rgba(184, 139, 255, .16), transparent 28rem),
    linear-gradient(145deg, #eefaf6 0%, #f4f8ff 48%, #f8f4ff 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

.ambient-bubbles {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

#workspace,
.login-shell {
  position: relative;
  z-index: 1;
}

.ambient-bubble {
  position: absolute;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255,255,255,.5), rgba(255,255,255,.08));
  box-shadow: inset 8px 10px 25px rgba(255,255,255,.66), 0 18px 60px rgba(39,125,106,.13);
  backdrop-filter: blur(5px);
  animation: bubbleFloat 16s ease-in-out infinite alternate;
}

.ambient-bubble:nth-child(1) { width: 180px; height: 180px; left: 4%; top: 13%; animation-duration: 18s; }
.ambient-bubble:nth-child(2) { width: 320px; height: 320px; right: -90px; top: 20%; animation-duration: 22s; animation-delay: -5s; }
.ambient-bubble:nth-child(3) { width: 110px; height: 110px; left: 46%; top: 5%; animation-duration: 15s; animation-delay: -9s; }
.ambient-bubble:nth-child(4) { width: 240px; height: 240px; left: 20%; bottom: -80px; animation-duration: 20s; animation-delay: -3s; }
.ambient-bubble:nth-child(5) { width: 130px; height: 130px; right: 18%; bottom: 12%; animation-duration: 17s; animation-delay: -11s; }

@keyframes bubbleFloat {
  from { transform: translate3d(-12px, 18px, 0) rotate(-4deg); }
  to { transform: translate3d(18px, -28px, 0) rotate(6deg); }
}

aside,
header,
.panel,
.stat,
.financial-stats article,
.toolbar,
.house-card,
.warehouse-section,
.notice,
.login-panel form,
.login-story > div,
dialog {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

aside {
  background: rgba(247, 255, 252, .76);
  border-right-color: rgba(255,255,255,.9);
  box-shadow: 18px 0 55px rgba(24, 89, 74, .08);
}

header {
  position: sticky;
  top: 0;
  z-index: 15;
  background: rgba(250, 255, 253, .68);
  border-color: rgba(255,255,255,.78);
  box-shadow: 0 9px 30px rgba(24,75,64,.06);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

main { position: relative; }

.main-reveal > * {
  animation: glassReveal .56s cubic-bezier(.2,.75,.25,1) both;
}

.main-reveal > *:nth-child(2) { animation-delay: .04s; }
.main-reveal > *:nth-child(3) { animation-delay: .08s; }
.main-reveal > *:nth-child(4) { animation-delay: .12s; }
.main-reveal > *:nth-child(5) { animation-delay: .16s; }
.main-reveal > *:nth-child(n+6) { animation-delay: .2s; }

@keyframes glassReveal {
  from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.brand-mark {
  background: linear-gradient(145deg, #19b99e, #087866);
  box-shadow: 0 9px 22px rgba(10, 145, 120, .28), inset 0 1px rgba(255,255,255,.55);
}

.warehouse,
.profile,
nav a {
  border-color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.34);
}

nav a.active {
  background: linear-gradient(120deg, rgba(207,247,233,.88), rgba(223,239,255,.72));
  box-shadow: inset 0 1px rgba(255,255,255,.86), 0 8px 18px rgba(26,105,86,.08);
}

button {
  background: rgba(255,255,255,.7);
  border-color: rgba(255,255,255,.92);
  box-shadow: 0 5px 14px rgba(30,78,68,.07), inset 0 1px rgba(255,255,255,.95);
}

button:hover:not(:disabled) {
  background: rgba(255,255,255,.94);
  border-color: rgba(121,196,178,.65);
  box-shadow: 0 12px 26px rgba(22,100,82,.14), inset 0 1px rgba(255,255,255,1);
}

.primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #12a58d, #087766 70%);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 11px 25px rgba(7,126,104,.25), inset 0 1px rgba(255,255,255,.35);
}

.primary::after {
  content: '';
  position: absolute;
  inset: -60% auto -60% -45%;
  width: 35%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}

.primary:hover::after { left: 120%; }

input, select {
  background: rgba(255,255,255,.69);
  border-color: rgba(151,189,179,.35);
  box-shadow: inset 0 1px 3px rgba(38,94,80,.05), 0 1px rgba(255,255,255,.8);
}

input:focus, select:focus {
  background: rgba(255,255,255,.94);
  box-shadow: 0 0 0 4px rgba(31,178,148,.14), 0 9px 24px rgba(17,122,99,.08);
}

.page-heading h1 {
  background: linear-gradient(105deg, #143f38, #118973 62%, #377cb8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 28%, rgba(255,255,255,.5), transparent 18%),
    linear-gradient(120deg, rgba(202,244,231,.88), rgba(216,236,255,.76) 58%, rgba(238,224,255,.67));
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: 0 24px 55px rgba(28,96,80,.11), inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: blur(22px);
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: inset 6px 8px 18px rgba(255,255,255,.48);
  animation: heroBubble 9s ease-in-out infinite alternate;
}

.hero::before { width: 135px; height: 135px; right: 18%; top: -45px; background: rgba(92,206,180,.17); }
.hero::after { width: 72px; height: 72px; right: 6%; bottom: -17px; background: rgba(107,158,244,.2); animation-delay: -4s; }
@keyframes heroBubble { to { transform: translateY(18px) rotate(12deg); } }

.hero-symbol {
  background: rgba(255,255,255,.3);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 50%;
  width: 110px;
  height: 110px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 28px rgba(255,255,255,.55), 0 18px 40px rgba(24,102,84,.12);
  animation: symbolBreathe 5s ease-in-out infinite;
}
@keyframes symbolBreathe { 50% { transform: translateY(-7px) scale(1.05) rotate(4deg); } }

.stat,
.financial-stats article,
.panel,
.house-card {
  position: relative;
  overflow: hidden;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, border-color .32s ease;
}

.stat::before,
.financial-stats article::before,
.panel::before,
.house-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  pointer-events: none;
}

.stat:hover,
.financial-stats article:hover,
.panel:hover,
.house-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(22,62,56,.11);
  border-color: rgba(255,255,255,.9);
}

.stat strong { text-shadow: 0 6px 18px rgba(13,90,74,.08); }

.financial-stats article:first-child {
  background: linear-gradient(145deg, rgba(13,78,68,.94), rgba(11,118,99,.88));
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 20px 45px rgba(10,83,70,.22), inset 0 1px rgba(255,255,255,.25);
}

.toolbar { border-radius: 16px; padding: 12px; }
.panel { border-radius: 20px; }
.table-wrap { scrollbar-color: rgba(45,145,123,.45) transparent; }
thead { background: rgba(233,247,242,.65); backdrop-filter: blur(12px); }
tbody tr { transition: background .18s ease, transform .18s ease; }
tbody tr:hover { background: rgba(226,247,239,.5); }

.badge {
  box-shadow: inset 0 1px rgba(255,255,255,.65), 0 5px 14px rgba(31,100,84,.08);
}

.flow-item { transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.flow-item:hover { background: rgba(232,247,241,.78); transform: translateX(4px); box-shadow: 0 12px 26px rgba(25,82,72,.09); }

.chart-import,
.chart-export { transform-box: fill-box; transform-origin: center bottom; animation: chartGrow .8s cubic-bezier(.2,.8,.2,1) both; }
.chart-export { animation-delay: .08s; }
@keyframes chartGrow { from { transform: scaleY(0); opacity: .2; } }
.expiry-chart svg { filter: drop-shadow(0 12px 15px rgba(38,95,82,.11)); animation: donutArrive .7s ease both; }
@keyframes donutArrive { from { opacity: 0; transform: rotate(-12deg) scale(.82); } }

.house-card { background: rgba(255,255,255,.62); }
.house-open { background: linear-gradient(180deg, rgba(227,248,241,.69), rgba(255,255,255,.36) 84%); }
.house-open:hover { background: linear-gradient(180deg, rgba(210,244,233,.82), rgba(255,255,255,.56)); }
.house-art { animation: houseHover 6s ease-in-out infinite; }
@keyframes houseHover { 50% { transform: translateY(-7px); filter: drop-shadow(10px 17px 0 rgba(200,226,215,.85)); } }
.warehouse-section { background: rgba(255,255,255,.56); }
.floor-row { background: rgba(255,255,255,.33); }
.floor-label { background: rgba(226,244,237,.63); }
.lot-drag-handle { background: rgba(223,244,235,.86); border-color: rgba(255,255,255,.9); }
.lot-tile { background: rgba(255,255,255,.69); border-color: rgba(255,255,255,.9); box-shadow: 0 9px 22px rgba(31,89,76,.07); }
.lot-tile:hover { background: rgba(245,255,251,.94); transform: translateY(-3px); box-shadow: 0 15px 30px rgba(26,111,91,.14); }
.lot-drag-source { transform: scale(.96) rotate(1deg); filter: saturate(.7); }
.lot-dragging .floor-row.lot-drop-active { background: rgba(210,247,231,.76); box-shadow: inset 0 0 45px rgba(44,178,142,.13); }

dialog {
  background: rgba(251,255,254,.9);
  border-color: rgba(255,255,255,.92);
  box-shadow: 0 35px 100px rgba(12,58,50,.25), inset 0 1px rgba(255,255,255,1);
}

dialog::backdrop {
  background: rgba(21,53,49,.36);
  backdrop-filter: blur(10px) saturate(120%);
}

.detail-info,
.receipt-total,
.notice { background: rgba(230,247,240,.62); border: 1px solid rgba(255,255,255,.82); }

.picking-guide { margin: 18px 0; padding: 20px; border-radius: 18px; color: #143f38; background: linear-gradient(145deg, rgba(218,247,236,.9), rgba(224,239,255,.82)); border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 1px rgba(255,255,255,.9), 0 14px 32px rgba(28,102,82,.1); }
.picking-title { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.picking-title h3 { margin: 5px 0 0; }
.picking-symbol { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #0c8d76; color: white; font-size: 23px; box-shadow: 0 8px 18px rgba(9,125,103,.24); }
.picking-steps { display: grid; gap: 10px; }
.picking-steps article { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px; border-radius: 13px; background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9); }
.step-number { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #173f38; color: white; font-weight: 750; }
.picking-steps article > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.picking-steps small { font-size: 9px; letter-spacing: 1px; color: #668078; }
.picking-steps strong { overflow-wrap: anywhere; }
.picking-steps span { font-size: 12px; }
.pick-quantity { text-align: right; }
.pick-quantity strong { font-size: 25px; color: #087f70; }
.picking-guide > p { margin: 14px 0 0; font-size: 11px; color: #637970; }

@media (max-width: 560px) {
  .picking-steps article { grid-template-columns: auto 1fr; }
  .pick-quantity { grid-column: 2; text-align: left; flex-direction: row !important; align-items: baseline; }
}

#toast {
  background: rgba(16,57,50,.88);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 45px rgba(11,57,49,.28), inset 0 1px rgba(255,255,255,.22);
  backdrop-filter: blur(18px) saturate(145%);
}

.login-story {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(216,246,236,.88), rgba(220,237,255,.82), rgba(239,226,255,.72));
}
.login-story::after { content: ''; position: absolute; width: 330px; height: 330px; border-radius: 50%; right: -90px; bottom: -90px; background: rgba(255,255,255,.24); border: 1px solid rgba(255,255,255,.6); box-shadow: inset 20px 20px 50px rgba(255,255,255,.45); animation: bubbleFloat 14s ease-in-out infinite alternate; }
.login-story > * { position: relative; z-index: 1; }
.login-story > div { padding: 28px; border-radius: 28px; }
.login-panel { background: rgba(255,255,255,.45); }
.login-panel form { padding: 34px; border-radius: 28px; }

@supports not (backdrop-filter: blur(1px)) {
  aside, header, .panel, .stat, .financial-stats article, .toolbar, .house-card, .warehouse-section, .notice, dialog { background: rgba(255,255,255,.96); }
}

@media (max-width: 760px) {
  .ambient-bubble:nth-child(2), .ambient-bubble:nth-child(4) { display: none; }
  header { background: rgba(249,255,252,.86); }
  .hero { border-radius: 22px; }
  .stat:hover, .financial-stats article:hover, .panel:hover, .house-card:hover { transform: none; }
  .login-panel form { padding: 26px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

.profile-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.profile-copy > span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy small { margin-top: 3px; color: #6c8179; font-weight: 500; }
.medicine-label { display: inline-flex; flex-direction: column; gap: 4px; font-weight: 650; }
.medicine-label small { color: var(--muted); font-weight: 400; }
.account-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 18px; }
.account-summary article { display: flex; align-items: center; gap: 15px; padding: 20px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); backdrop-filter: blur(18px); }
.account-summary article > span { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 14px; color: white; background: linear-gradient(145deg,#16aa8f,#1477aa); font-size: 23px; }
.account-summary strong { display: block; font-size: 25px; }
.account-summary small { color: var(--muted); }
.account-person { display: flex; align-items: center; gap: 11px; }
.account-person > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #dff2ea; color: #087f70; font-weight: 750; }
.account-person small { display: block; margin-top: 4px; color: var(--muted); }
.account-actions { display: flex; gap: 7px; align-items: center; }
.account-actions button { padding: 7px 10px; font-size: 11px; }
.current-account { font-size: 11px; color: #648078; }
.role-manager { background: #e5dbff; color: #6947a8; }
.permission-note,.permission-preview { margin-bottom: 18px; padding: 15px 18px; border-radius: 14px; background: rgba(224,240,255,.68); border: 1px solid rgba(255,255,255,.82); font-size: 12px; line-height: 1.7; }
.permission-preview { display: flex; flex-direction: column; gap: 5px; margin-top: 18px; }
.account-active { justify-content: center; }

@media (max-width: 760px) {
  .account-summary { grid-template-columns: 1fr; }
  .account-actions { flex-wrap: wrap; }
}

/* Lightweight soft-glass pass for low-memory Oracle VM and mobile devices. */
:root {
  --glass: rgba(255,255,255,.80);
  --glass-strong: rgba(255,255,255,.92);
  --glass-line: rgba(255,255,255,.78);
  --glass-shadow: 0 8px 30px rgba(15,23,42,.08);
  --glass-shadow-hover: 0 14px 36px rgba(15,23,42,.11);
}

.ambient-bubbles {
  display: none;
}

aside,
header,
.panel,
.stat,
.financial-stats article,
.toolbar,
.house-card,
.warehouse-section,
.notice,
.login-panel form,
.login-story > div,
dialog {
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

header {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hero::before,
.hero::after,
.hero-symbol,
.house-art,
.login-story::after {
  animation: none;
}

.main-reveal > * {
  animation-duration: .24s;
  animation-timing-function: ease;
}

@keyframes glassReveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.stat,
.financial-stats article,
.panel,
.house-card,
.flow-item {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.chart-import,
.chart-export {
  animation-duration: .3s;
}

.expiry-chart svg {
  filter: none;
  animation-duration: .3s;
}

thead,
dialog::backdrop,
#toast,
.account-summary article {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.primary::after {
  display: none;
}

@media (max-width: 760px) {
  aside,
  header,
  .panel,
  .stat,
  .financial-stats article,
  .toolbar,
  .house-card,
  .warehouse-section,
  .notice,
  dialog {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}