:root {
  --amber: #247fbd;
  --amber-light: #e7f3fb;
}

.app-shell { display: block; min-height: 100dvh; }
.topbar {
  position: sticky; top: 0; z-index: 12; width: 100%; height: 68px; min-height: 68px;
  border: 0; border-bottom: 1px solid #33444f; background: #172329;
  box-shadow: 0 5px 18px #13242e21; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.topbar-inner {
  display: flex; width: min(calc(100% - 40px), 1360px); height: 68px; min-height: 68px;
  flex-direction: row; align-items: center; gap: 17px; padding: 0; margin: 0 auto;
}
.topbar .brand { flex: 0 0 auto; padding: 0; color: #f5fafc; }
.topbar .brand-title { font-size: 15px; }
.topbar .brand-suffix { color: #a8bac3; }
.brand-mark {
  border-color: #4a839a; background: linear-gradient(145deg, #31b8ba, #2586c9);
  color: #fff; box-shadow: inset 0 1px #ffffff70, 0 3px 9px #07171e50;
}
.desktop-nav {
  display: flex; min-width: 0; flex: 1; align-self: stretch; flex-direction: row; align-items: center;
  gap: 2px; overflow-x: auto; margin: 0; scrollbar-width: none;
}
.desktop-nav::-webkit-scrollbar { display: none; }
.nav-button {
  min-height: 42px; flex: 0 0 auto; border: 0; border-radius: 5px; padding: 9px 10px;
  background: transparent; color: #bfd0d9; font-size: 12px; text-align: center;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.nav-button:hover { transform: translateY(-2px); border: 0; background: #2b404b; color: #fff; }
.nav-button.active { border: 0; background: #29404a; box-shadow: none; color: #fff; }
.nav-button.active::after {
  top: auto; right: 10px; bottom: 4px; left: 10px; width: auto; height: 2px;
  background: #41bdca;
}
.topbar-actions { width: auto; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 12px; margin: 0; }
.balance-mini { border: 0; padding: 0; color: #b8c7cf; }
.balance-mini strong { color: #fff; font-size: 16px; }
.account-button {
  width: auto; min-height: 38px; border: 1px solid #597582; background: #2b414b;
  box-shadow: inset 0 1px #ffffff21; color: #f2f8fa;
  transition: transform .18s ease, background-color .18s ease;
}
.account-button:hover { transform: translateY(-2px); background: #355764; }
.main-content {
  display: block; width: min(calc(100% - 40px), 1320px); min-height: calc(100dvh - 104px);
  margin: 22px auto; border: 0; padding: 26px 22px 78px; background: #fff;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}

.button-primary {
  border-color: #1676b8; background: linear-gradient(155deg, #329ee7, #197bc4 70%);
  box-shadow: inset 0 1px #ffffff70, inset 0 -1px #155f9760, 0 2px 0 #1369a5, 0 5px 12px #247bbf38;
}
.button-primary:hover:not(:disabled) {
  transform: translateY(-3px); background: linear-gradient(155deg, #2794dc, #116cad 70%);
  box-shadow: inset 0 1px #ffffff80, 0 3px 0 #1369a5, 0 8px 16px #247bbf40;
}
.button-secondary {
  border-color: #bfd5e0; background: linear-gradient(150deg, #fff, #ecf6fa);
  box-shadow: inset 0 1px #fff, 0 2px 0 #d5e4e9, 0 5px 12px #547c9a20; color: #245675;
}
.button-secondary:hover:not(:disabled) {
  transform: translateY(-3px); border-color: #81bdd5; background: #f2fbff;
  box-shadow: inset 0 1px #fff, 0 3px 0 #c7dfe7, 0 8px 16px #547c9a28;
}
.desktop-nav .nav-button.active {
  background: linear-gradient(155deg, #2d5665, #25444f);
  box-shadow: inset 0 1px #ffffff1f, 0 5px 13px #07171e3d;
}
.desktop-nav .nav-button.active::after { background: linear-gradient(90deg, #35bfc3, #4ca9ea); }
.heading-actions .button,
#batch-view .page-heading .button,
#recurring-view .page-heading .button,
#orders-view .page-heading .button,
#batch-view .form-footer .button,
#recurring-view .form-footer .button,
#orders-view .pagination .button {
  min-height: 40px; border-radius: 22px; padding-inline: 18px;
}
.segmented {
  gap: 5px; border: 1px solid #c8dfeb; border-radius: 24px; padding: 4px;
  background: #eef7fb; box-shadow: inset 0 1px #fff, 0 5px 13px #38779e1a;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.segmented > button {
  min-width: 96px; min-height: 38px; border: 1px solid transparent; border-radius: 20px;
  padding: 7px 18px; background: transparent; color: #476478; font-size: 13px;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.segmented > button:hover {
  transform: translateY(-2px); border-color: #b3d9e8; background: #fff; color: #176fae;
  box-shadow: 0 5px 12px #287ead20;
}
.segmented > button.active,
.segmented > button.active:hover {
  transform: translateY(-1px); border-color: #197fc6;
  background: linear-gradient(155deg, #35a4e9, #1a7fc5 68%, #168aae);
  box-shadow: inset 0 1px #ffffff73, 0 2px 0 #126ca8, 0 7px 15px #247fbd38;
  color: #fff;
}
.catalog-row, .catalog-row:nth-child(even) {
  position: relative; border: 2px solid transparent;
  background: linear-gradient(145deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 4px 20px #409eff14;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.catalog-row::before {
  position: absolute; top: 0; right: 0; left: 0; height: 5px; border-radius: 6px 6px 0 0;
  background: linear-gradient(90deg, #409eff, #66a9ff, #409eff);
  content: ""; opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.catalog-row:hover, .catalog-row:focus-within {
  transform: none; border-color: #409eff;
  background: linear-gradient(145deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 40px #409eff33;
}
.catalog-row:hover::before, .catalog-row:focus-within::before { opacity: 1; }
.platform-tabs { gap: 10px; padding: 4px 3px 12px; }
.platform-tab {
  min-height: 43px; border: 1px solid #d3e1ec; border-radius: 24px; padding: 9px 17px;
  background: #fff; color: #344e62;
  box-shadow: 0 2px 6px #235a8412;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.platform-tab:hover {
  transform: translateY(-3px); border-color: #6cb6e9; background: #f0f8ff;
  box-shadow: 0 7px 15px #268bd02c; color: #176eaf;
}
.platform-tab.active {
  border-color: #2789d5; background: linear-gradient(155deg, #45a6f0, #2586d6);
  box-shadow: inset 0 1px #ffffff60, 0 3px 0 #176db4, 0 7px 15px #258bd035;
  color: #fff;
}
.platform-tab.active:hover { border-color: #1678bf; background: #237fc9; color: #fff; }
.platform-tab.active .platform-tab-icon { filter: brightness(0) invert(1); opacity: 1; }
.platform-tab:focus-visible, .catalog-detail-button:focus-visible { outline: 3px solid #77c8f3; outline-offset: 3px; }
.catalog-row .catalog-detail-button {
  min-width: 92px; min-height: 35px; border-radius: 19px; padding: 7px 14px; color: #fff;
}
.catalog-row .catalog-detail-button:hover:not(:disabled) {
  transform: translateY(-3px); background: linear-gradient(155deg, #2794dc, #116cad 70%);
  box-shadow: inset 0 1px #ffffff80, 0 3px 0 #1369a5, 0 8px 16px #247bbf40;
}
.catalog-code, .catalog-price { color: #1b6488; }
.search-row input:focus, input:focus, select:focus, textarea:focus { border-color: #399ac5; box-shadow: 0 0 0 3px #5bb5d333; }
.recharge-presets button:hover, .api-copy:hover { border-color: #86c7da; background: #edf9fc; }
.status.done { border-color: #b9dfcf; background: #e7f6f0; color: #176d54; }
.product-dialog .dialog-header {
  position: sticky; z-index: 5; top: -24px; margin: -24px -28px 0; padding: 15px 16px 10px 28px;
  border-bottom: 1px solid #dce7ec; background: #fffffff5;
  box-shadow: 0 7px 14px #294c6112; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.product-dialog .dialog-close {
  border-color: #bcd7e5; background: #f4fbff; box-shadow: 0 3px 9px #2a729629;
  color: #1a6d9d;
}
.product-dialog .dialog-close:hover { border-color: #68afd2; background: #e7f6fd; color: #0c527e; }
.recharge-invoice .recharge-payable-row dt { color: #176b9b; font-weight: 750; }
.recharge-invoice .recharge-payable-row dd {
  color: #0879bd; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums;
  user-select: all;
}

body.profile-open { overflow: hidden; }
.profile-backdrop {
  position: fixed; z-index: 30; inset: 0; background: #0d1e2799;
  opacity: 0; transition: opacity .24s ease;
}
.profile-backdrop.is-open { opacity: 1; }
.profile-drawer {
  position: fixed; z-index: 31; top: 0; right: 0; width: min(430px, 100vw); height: 100dvh;
  overflow-y: auto; border-left: 1px solid #d6e4eb; padding: 28px 28px 40px;
  background: #fff; box-shadow: -16px 0 40px #0d263343;
  transform: translateX(100%); transition: transform .24s ease;
}
.profile-drawer.is-open { transform: translateX(0); }
.profile-drawer .page-heading { align-items: start; margin-bottom: 24px; }
.profile-drawer .profile-layout { display: block; border: 0; padding: 0; background: transparent; box-shadow: none; }
.profile-drawer .profile-balance { padding-bottom: 24px; }
.profile-drawer .profile-account { border-top: 1px solid var(--line); padding-top: 22px; }
.profile-drawer .profile-actions .button { flex: 1; }
.drawer-close {
  display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center;
  border: 1px solid #cfdee5; border-radius: 5px; background: #f6fafc;
  color: #344d5a; font-size: 22px; line-height: 1;
}
.drawer-close:hover { background: #e7f4fa; }
.profile-support { display: block; margin-top: 20px; color: #176e97; font-size: 13px; font-weight: 700; text-decoration: none; }
.profile-support:hover { text-decoration: underline; }
.profile-logout { width: 100%; margin-top: 25px; }

.announcement-dialog {
  width: min(calc(100% - 28px), 530px); max-height: min(82dvh, 700px);
  border: 1px solid #d5e3eb; border-radius: 8px; padding: 28px 30px 26px;
  background: #fff; color: #263742; box-shadow: 0 22px 65px #0f273e4d;
  overflow-y: auto;
}
.announcement-dialog::backdrop { background: #101f2e9c; backdrop-filter: blur(3px); }
.announcement-dialog h2 { margin: 2px 0 17px; font-size: 21px; line-height: 1.4; overflow-wrap: anywhere; }
.announcement-dialog #daily-announcement-content { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; font-size: 14px; }
.announcement-dialog .button { width: 100%; margin-top: 16px; }

@media (max-width: 899px) {
  .app-shell { display: block; }
  .topbar { height: 60px; min-height: 60px; background: #172329; }
  .topbar-inner { width: calc(100% - 24px); height: 60px; min-height: 60px; gap: 9px; }
  .desktop-nav { display: flex; margin: 0; }
  .nav-button { min-height: 38px; padding: 8px 9px; font-size: 12px; }
  .topbar-actions { width: auto; flex-direction: row; margin: 0; }
  .main-content { width: min(calc(100% - 24px), 1180px); min-height: calc(100dvh - 80px); margin: 10px auto; padding: 20px 14px 65px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mobile-nav { display: none; }
}
@media (max-width: 600px) {
  .topbar-inner { width: calc(100% - 16px); gap: 7px; }
  .topbar .brand-text, .topbar-actions { display: none; }
  .topbar .brand { min-width: 33px; gap: 0; }
  .topbar .brand-mark { width: 32px; height: 32px; flex-basis: 32px; }
  .desktop-nav { gap: 0; }
  .nav-button { min-height: 37px; padding: 8px 10px; }
  .main-content { width: 100%; margin: 0; padding: 18px 12px 65px; }
  .profile-drawer { padding: 22px 20px 38px; }
  .product-dialog .dialog-header { top: -20px; margin: -20px -18px 0; padding: 13px 12px 9px 18px; }
  .segmented { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .segmented > button { width: 100%; min-width: 0; padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-drawer, .profile-backdrop, .nav-button, .platform-tab, .catalog-detail-button, .catalog-row, .catalog-row::before, .segmented > button { transition-duration: .01ms; }
}