:root {
  --primary: #4f63d9;
  --primary-deep: #3346b8;
  --orange: #e98542;
  --orange-soft: #f6b56f;
  --green: #178c68;
  --red: #cf4d55;
  --purple: #7556c9;
  --bg: #edf0f6;
  --card: #f7f4f1;
  --text: #20283a;
  --muted: #778197;
  --border: rgba(159, 170, 194, .28);
}

* { box-sizing: border-box; }

body.admin-page,
body.login-page {
  margin: 0;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 登录页 */
body.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  padding: 36px;
  background:
    radial-gradient(circle at 10% 12%, rgba(246, 181, 111, .28), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(111, 132, 226, .25), transparent 30%),
    linear-gradient(145deg, #18223a 0%, #253657 48%, #3b4668 100%);
}

.login-shell {
  position: relative;
  display: grid;
  width: min(960px, 100%);
  min-height: 600px;
  grid-template-columns: .92fr 1.08fr;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(247, 238, 226, .98), rgba(235, 239, 252, .98));
  box-shadow: 0 40px 110px rgba(7, 14, 31, .38);
}

.login-brand-panel {
  position: relative;
  padding: 56px 46px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(155deg, #ea9b59 0%, #d9784f 45%, #5559a9 100%);
}

.login-brand-panel::before,
.login-brand-panel::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 244, 220, .2);
  border-radius: 50%;
}

.login-brand-panel::before {
  width: 340px;
  height: 340px;
  right: -190px;
  top: -110px;
  background: rgba(255, 239, 210, .08);
}

.login-brand-panel::after {
  width: 230px;
  height: 230px;
  left: -140px;
  bottom: -90px;
}

.login-brand-logo {
  position: relative;
  z-index: 1;
  display: flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 21px;
  color: #29324a;
  background: linear-gradient(145deg, #ffe0a9, #f4b868);
  box-shadow: 0 15px 36px rgba(63, 35, 15, .2);
  font-size: 30px;
  font-weight: 900;
}

.login-brand-kicker {
  position: relative;
  z-index: 1;
  margin-top: 78px;
  color: rgba(255, 244, 224, .72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 4px;
}

.login-brand-title {
  position: relative;
  z-index: 1;
  margin-top: 13px;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 2px;
}

.login-brand-desc {
  position: relative;
  z-index: 1;
  max-width: 310px;
  margin-top: 16px;
  color: rgba(255, 255, 255, .76);
  font-size: 15px;
  line-height: 1.8;
}

.login-feature-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  margin-top: 46px;
}

.login-feature {
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(255, 255, 255, .88);
  font-size: 14px;
  font-weight: 700;
}

.login-feature::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #f8d18f;
  box-shadow: 0 0 0 6px rgba(248, 209, 143, .13);
}

.login-card {
  width: auto;
  align-self: center;
  margin: 44px 54px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.login-form-kicker {
  color: var(--orange);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 3px;
}

.login-card h1 {
  margin: 10px 0 0;
  color: #222b40;
  font-size: 31px;
  font-weight: 900;
}

.login-subtitle {
  margin: 10px 0 30px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.login-card .field { margin-bottom: 20px; }
.login-card label { margin-bottom: 0; color: #454f64; font-size: 13px; }

.login-card input {
  width: 100%;
  height: 50px;
  margin-top: 8px;
  padding: 0 16px;
  border: 1px solid rgba(134, 147, 177, .32);
  border-radius: 15px;
  outline: none;
  color: #273047;
  background: linear-gradient(145deg, rgba(255, 248, 238, .82), rgba(238, 242, 253, .88));
  font-size: 15px;
  transition: .2s ease;
}

.login-card input:focus {
  border-color: rgba(79, 99, 217, .62);
  box-shadow: 0 0 0 4px rgba(79, 99, 217, .1);
}

.login-card .slider {
  position: relative;
  height: 50px;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid rgba(134, 147, 177, .28);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(226, 231, 244, .92), rgba(242, 233, 224, .92));
  user-select: none;
}

.login-card .slider-fill {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(246, 181, 111, .75), rgba(79, 99, 217, .75));
}

.login-card .slider-btn {
  position: absolute;
  z-index: 3;
  top: 4px;
  left: 0;
  display: flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  color: var(--primary);
  background: linear-gradient(145deg, #fff7ec, #e9edfa);
  box-shadow: 0 7px 18px rgba(36, 45, 73, .2);
  font-size: 23px;
  font-weight: 900;
  cursor: grab;
}

.login-card .slider-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #798399;
  font-size: 13px;
  font-weight: 800;
}

.login-card .slider-target {
  position: absolute;
  z-index: 2;
  top: 8px;
  width: 4px;
  height: 34px;
  border-radius: 999px;
  background: #e98542;
  box-shadow: 0 0 0 6px rgba(233, 133, 66, .14);
}

.login-submit {
  width: 100%;
  height: 50px;
  margin-top: 10px;
  border: 0;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, #e98a49 0%, #d87853 45%, #5363ce 100%);
  box-shadow: 0 15px 30px rgba(99, 84, 145, .24);
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.login-submit:hover { transform: translateY(-2px); box-shadow: 0 19px 36px rgba(99, 84, 145, .3); }
.login-card .msg { margin-bottom: 18px; padding: 12px 14px; border: 1px solid rgba(207, 77, 85, .18); border-radius: 13px; color: #b93f49; background: rgba(255, 231, 230, .72); font-size: 13px; }

/* 管理后台 */
body.admin-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 3%, rgba(247, 186, 119, .18), transparent 22%),
    radial-gradient(circle at 91% 10%, rgba(112, 132, 220, .16), transparent 25%),
    linear-gradient(150deg, #f1e8de 0%, #ececf6 38%, #e5f1f1 72%, #e9edf5 100%);
}

.admin-page .layout { min-height: 100vh; }

.admin-page .sidebar {
  width: 272px;
  padding: 26px 18px 22px;
  overflow: hidden;
  color: #c9d2e2;
  background: linear-gradient(175deg, #172033 0%, #1d2943 53%, #323456 100%);
  box-shadow: 12px 0 42px rgba(24, 30, 51, .2);
}

.admin-page .sidebar::before,
.admin-page .sidebar::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.admin-page .sidebar::before {
  width: 260px;
  height: 260px;
  right: -160px;
  top: -80px;
  border: 1px solid rgba(247, 195, 128, .17);
  background: rgba(238, 152, 81, .07);
}

.admin-page .sidebar::after {
  width: 210px;
  height: 210px;
  left: -150px;
  bottom: -80px;
  border: 1px solid rgba(127, 142, 227, .14);
}

.admin-page .brand {
  position: relative;
  z-index: 1;
  gap: 14px;
  margin-bottom: 32px;
  padding: 0 8px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.admin-page .brand-logo {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 232, 191, .4);
  border-radius: 17px;
  color: #273148;
  background: linear-gradient(145deg, #ffdda3, #e9a45c);
  box-shadow: 0 12px 28px rgba(8, 15, 33, .28);
  font-size: 22px;
  font-weight: 900;
}

.admin-page .brand-title { font-size: 19px; letter-spacing: 1px; }
.admin-page .brand-sub { color: rgba(221, 227, 239, .52); font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; }
.admin-page .menu-title { padding: 8px 13px 10px; color: rgba(207, 216, 231, .43); font-size: 11px; font-weight: 800; letter-spacing: 2px; }

.admin-page .menu-item {
  position: relative;
  z-index: 1;
  gap: 13px;
  margin: 6px 0;
  padding: 13px 14px;
  border: 1px solid transparent;
  border-radius: 15px;
  color: #c6cfde;
  font-size: 14px;
  font-weight: 700;
  transition: .22s ease;
}

.admin-page .menu-item:hover { background: rgba(255, 255, 255, .06); transform: translateX(2px); }

.admin-page .menu-item.active,
.admin-page .menu-item.active:hover {
  border-color: rgba(255, 224, 177, .22);
  color: #fff;
  background: linear-gradient(135deg, rgba(235, 145, 73, .96), rgba(102, 91, 181, .96));
  box-shadow: 0 13px 28px rgba(9, 17, 38, .28);
}

.admin-page .menu-icon {
  display: flex;
  width: 31px;
  height: 31px;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  color: #f2c58c;
  background: rgba(255, 255, 255, .06);
  font-size: 13px;
  font-weight: 900;
}

.admin-page .menu-item.active .menu-icon { color: #fff; background: rgba(255, 255, 255, .14); }

.sidebar-footer {
  position: absolute;
  z-index: 1;
  right: 22px;
  bottom: 24px;
  left: 22px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 15px;
  color: rgba(213, 220, 234, .58);
  background: rgba(255, 255, 255, .035);
  font-size: 11px;
  line-height: 1.65;
}

.sidebar-status { display: flex; align-items: center; gap: 8px; color: #e9eef7; font-weight: 800; }
.sidebar-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #65d39e; box-shadow: 0 0 0 6px rgba(101, 211, 158, .1); }

.admin-page .main { margin-left: 272px; }

.admin-page .topbar {
  left: 272px;
  height: 82px;
  padding: 0 32px;
  border-bottom: 1px solid rgba(153, 165, 192, .22);
  background: linear-gradient(105deg, rgba(248, 239, 229, .94), rgba(237, 239, 251, .94), rgba(229, 243, 241, .94));
  box-shadow: 0 10px 35px rgba(44, 53, 82, .08);
  backdrop-filter: blur(16px);
}

.admin-page .page-title { color: #20283b; font-size: 21px; font-weight: 900; letter-spacing: .5px; }
.topbar-meta { display: flex; align-items: center; gap: 12px; }
.topbar-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border: 1px solid rgba(145, 157, 184, .2); border-radius: 999px; background: rgba(255, 255, 255, .42); }
.admin-page .avatar { width: 36px; height: 36px; color: #fff; background: linear-gradient(145deg, #e89854, #5967cf); box-shadow: 0 7px 16px rgba(83, 87, 151, .22); }
.admin-page .pill { border: 1px solid rgba(207, 77, 85, .13); color: #b34750; background: rgba(255, 233, 230, .72); transition: .2s ease; }
.admin-page .pill:hover { background: rgba(255, 221, 218, .92); }

.admin-page .content { padding: 108px 30px 46px; }

.dashboard-hero {
  position: relative;
  display: flex;
  min-height: 164px;
  margin-bottom: 18px;
  padding: 28px 30px;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255, 225, 183, .3);
  border-radius: 25px;
  color: #fff;
  background: linear-gradient(130deg, #e99a57 0%, #d97853 42%, #5765c8 100%);
  box-shadow: 0 20px 45px rgba(92, 78, 124, .18);
}

.dashboard-hero::before,
.dashboard-hero::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .15); }
.dashboard-hero::before { width: 280px; height: 280px; right: -100px; top: -160px; background: rgba(255, 239, 212, .07); }
.dashboard-hero::after { width: 170px; height: 170px; left: 44%; bottom: -140px; }
.dashboard-kicker { position: relative; z-index: 1; color: rgba(255, 241, 217, .72); font-size: 11px; font-weight: 900; letter-spacing: 3px; }
.dashboard-title { position: relative; z-index: 1; margin-top: 10px; font-size: 29px; font-weight: 900; }
.dashboard-desc { position: relative; z-index: 1; margin-top: 10px; color: rgba(255, 255, 255, .74); font-size: 13px; }
.dashboard-date { position: relative; z-index: 1; padding: 13px 17px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 15px; background: rgba(255, 255, 255, .11); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); font-size: 13px; font-weight: 800; }

.admin-page .stats { gap: 14px; margin-bottom: 18px; }

.admin-page .stat-card {
  position: relative;
  min-height: 112px;
  padding: 19px 20px;
  overflow: hidden;
  border: 1px solid rgba(153, 166, 191, .22);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(248, 238, 226, .9), rgba(234, 239, 251, .9));
  box-shadow: 0 13px 30px rgba(47, 58, 89, .08);
}

.admin-page .stat-card:nth-child(2) { background: linear-gradient(145deg, rgba(232, 239, 252, .94), rgba(240, 232, 249, .92)); }
.admin-page .stat-card:nth-child(3) { background: linear-gradient(145deg, rgba(227, 244, 239, .94), rgba(235, 239, 250, .92)); }
.admin-page .stat-card:nth-child(4) { background: linear-gradient(145deg, rgba(246, 231, 226, .94), rgba(237, 233, 250, .92)); }
.admin-page .stat-card::after { content: ""; position: absolute; width: 86px; height: 86px; right: -35px; top: -38px; border-radius: 50%; background: rgba(99, 112, 200, .08); }
.admin-page .stat-label { color: #747e92; font-size: 12px; font-weight: 700; }
.admin-page .stat-value { margin-top: 9px; color: #273149; font-size: 27px; }
.stat-note { margin-top: 4px; color: #9aa2b2; font-size: 11px; }

.admin-page .card {
  padding: 23px;
  border: 1px solid rgba(153, 166, 191, .23);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(248, 242, 234, .94), rgba(237, 240, 250, .94), rgba(231, 244, 242, .9));
  box-shadow: 0 16px 38px rgba(42, 53, 83, .085), inset 0 1px 0 rgba(255, 255, 255, .7);
}

.admin-page .card-title { color: #273047; font-size: 18px; font-weight: 900; }
.admin-page .card-title::before { content: ""; display: inline-block; width: 4px; height: 18px; margin-right: 9px; border-radius: 999px; vertical-align: -3px; background: linear-gradient(180deg, #e99450, #5f68cc); }
.admin-page .card-desc { color: #818b9e; }

.admin-page label { color: #4b556b; font-size: 12px; font-weight: 800; }

.admin-page input,
.admin-page select {
  height: 42px;
  margin-top: 7px;
  padding: 0 12px;
  border: 1px solid rgba(143, 157, 184, .3);
  border-radius: 12px;
  outline: none;
  color: #2c354b;
  background: linear-gradient(145deg, rgba(255, 249, 240, .75), rgba(235, 240, 251, .82));
  transition: .2s ease;
}

.admin-page input:focus,
.admin-page select:focus { border-color: rgba(79, 99, 217, .58); box-shadow: 0 0 0 4px rgba(79, 99, 217, .09); }
.admin-page input[type=file] { padding: 9px; }

.admin-page .btn {
  height: 40px;
  padding: 0 15px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #e78b49 0%, #d87652 42%, #5664cc 100%);
  box-shadow: 0 8px 18px rgba(87, 82, 144, .18);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.admin-page .btn:hover { transform: translateY(-1px); box-shadow: 0 11px 23px rgba(87, 82, 144, .25); }
.admin-page .btn:active { transform: scale(.98); }
.admin-page .btn-freeze { background: linear-gradient(135deg, #5670d6, #4052b6); }
.admin-page .btn-unfreeze { background: linear-gradient(135deg, #2aaa7c, #177c60); }
.admin-page .btn-delete { background: linear-gradient(135deg, #db6d6d, #bd3f4b); }

.admin-page .category-tabs { align-items: center; }
.admin-page .cat-tab { min-height: 40px; padding: 9px 15px; border-color: rgba(145, 158, 185, .27); color: #697389; background: linear-gradient(145deg, rgba(248, 242, 235, .84), rgba(232, 237, 249, .86)); transition: .2s ease; }
.admin-page .cat-tab:hover { transform: translateY(-1px); }
.admin-page .cat-tab.active { border-color: transparent; background: linear-gradient(135deg, #566bd7, #4656b6); box-shadow: 0 9px 20px rgba(69, 86, 183, .22); }
.admin-page .cat-tab.orange-active.active { border-color: transparent; background: linear-gradient(135deg, #eea15a, #dc7647); box-shadow: 0 9px 20px rgba(210, 111, 54, .22); }

.admin-page .table-wrap { border-color: rgba(151, 164, 188, .25); border-radius: 16px; background: rgba(238, 241, 248, .48); }
.admin-page th,
.admin-page td { border-bottom-color: rgba(155, 168, 192, .18); background: rgba(249, 247, 244, .66); }
.admin-page th { height: 48px; color: #626d82; background: linear-gradient(135deg, rgba(235, 238, 247, .95), rgba(240, 233, 227, .95)); font-size: 12px; font-weight: 900; }
.admin-page tbody tr { transition: .18s ease; }
.admin-page tbody tr:hover td { background: rgba(232, 238, 249, .82); }
.admin-page .sticky-action { background: rgba(245, 243, 241, .96); box-shadow: -12px 0 22px rgba(53, 64, 92, .06); }
.admin-page tbody tr:hover .sticky-action { background: rgba(232, 238, 249, .96); }
.admin-page .table-wrap th.sticky-action { background: linear-gradient(135deg, rgba(235, 238, 247, .98), rgba(240, 233, 227, .98)); }
.admin-page .brand-logo-img { width: 48px; height: 48px; border-color: rgba(145, 158, 182, .24); border-radius: 14px; background: linear-gradient(145deg, #f6eee4, #e8edf8); }
.admin-page .quote-img { border-color: rgba(145, 158, 182, .25); box-shadow: 0 6px 15px rgba(49, 59, 84, .1); }

.admin-page .badge { padding: 6px 10px; border: 1px solid transparent; }
.admin-page .badge.used { border-color: rgba(79, 99, 217, .12); color: #4659be; background: rgba(225, 232, 255, .86); }
.admin-page .badge.demo { border-color: rgba(225, 133, 66, .12); color: #c76e32; background: rgba(255, 233, 207, .88); }
.admin-page .badge.ok { border-color: rgba(23, 140, 104, .12); color: #177c60; background: rgba(220, 245, 235, .9); }
.admin-page .badge.frozen,
.admin-page .badge.missing { color: #7f8795; background: rgba(228, 230, 236, .9); }

.admin-page .modal { padding: 72px 28px 36px; background: rgba(19, 26, 44, .66); backdrop-filter: blur(7px); }
.admin-page .modal-card { border: 1px solid rgba(255, 255, 255, .45); border-radius: 24px; background: linear-gradient(145deg, #f8eee2 0%, #edf0fa 52%, #e4f2ef 100%); box-shadow: 0 32px 95px rgba(12, 18, 34, .4); }
.admin-page .modal-title { color: #273047; }
.admin-page .modal-close { color: #667086; background: linear-gradient(145deg, #eee4db, #e2e7f4); transition: .2s ease; }
.admin-page .modal-close:hover { color: #b4474f; transform: rotate(8deg); }
.admin-page .info-grid div { border-color: rgba(145, 158, 184, .24); background: linear-gradient(145deg, rgba(245, 237, 228, .88), rgba(231, 236, 248, .88)); }
.admin-page .shop-photo-preview,
.admin-page .price-thumb { border-color: rgba(145, 158, 184, .24); background: linear-gradient(145deg, #f3e9dd, #e8edf8); }
.admin-page .empty-image { border-color: rgba(145, 158, 184, .36); color: #8e97a8; background: rgba(234, 238, 247, .52); }
.admin-page .field-tip { color: #d2763c; }
.admin-page #accounts table { min-width: 760px; }
.admin-page #announcements table { min-width: 760px; }
.admin-page #contacts table { min-width: 900px; }

.user-empty-state { padding: 58px 24px; text-align: center; }
.user-empty-icon { display: flex; width: 66px; height: 66px; margin: 0 auto 17px; align-items: center; justify-content: center; border-radius: 21px; color: #fff; background: linear-gradient(145deg, #efa15a, #6670d5); box-shadow: 0 13px 28px rgba(92, 83, 145, .2); font-size: 24px; font-weight: 900; }
.user-empty-title { color: #354057; font-size: 17px; font-weight: 900; }
.user-empty-desc { margin-top: 8px; color: #8a93a5; font-size: 13px; }

@media (max-width: 1100px) {
  .admin-page .sidebar { width: 232px; }
  .admin-page .main { margin-left: 232px; }
  .admin-page .topbar { left: 232px; }
  .admin-page .stats { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}

@media (max-width: 900px) {
  body.login-page { padding: 18px; }
  .login-shell { width: min(560px, 100%); grid-template-columns: 1fr; }
  .login-brand-panel { min-height: 220px; padding: 28px 32px; }
  .login-brand-kicker { margin-top: 30px; }
  .login-brand-title { font-size: 28px; }
  .login-feature-list { display: none; }
  .login-card { margin: 38px 34px 42px; }

  .admin-page .sidebar { position: relative; width: 100%; padding: 16px; overflow-x: auto; white-space: nowrap; }
  .admin-page .brand { display: inline-flex; margin: 0 18px 0 0; padding: 0 18px 0 0; border-right: 1px solid rgba(255, 255, 255, .08); border-bottom: 0; vertical-align: middle; }
  .admin-page .brand-logo { width: 40px; height: 40px; }
  .admin-page .menu-item { display: inline-flex; margin: 0 3px; padding: 10px 12px; }
  .admin-page .menu-title,
  .sidebar-footer { display: none; }
  .admin-page .main { margin-left: 0; }
  .admin-page .topbar { position: relative; left: 0; height: auto; min-height: 74px; padding: 14px 18px; }
  .admin-page .content { padding: 18px; }
  .dashboard-hero { min-height: 150px; padding: 24px; }
}

@media (max-width: 620px) {
  body.login-page { align-items: flex-start; }
  .login-shell { border-radius: 25px; }
  .login-brand-panel { min-height: 190px; }
  .login-brand-logo { width: 52px; height: 52px; border-radius: 17px; font-size: 24px; }
  .login-brand-kicker { margin-top: 24px; }
  .login-brand-desc { display: none; }
  .login-card { margin: 31px 24px 34px; }
  .login-card h1 { font-size: 27px; }

  .admin-page .topbar { align-items: flex-start; gap: 12px; }
  .topbar-meta { gap: 7px; }
  .topbar-user { padding-left: 8px; }
  .topbar-user .muted { display: none; }
  .dashboard-hero { align-items: flex-start; flex-direction: column; gap: 20px; }
  .dashboard-title { font-size: 24px; }
  .admin-page .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .admin-page .stat-card { min-height: 102px; padding: 16px; }
  .admin-page .card { padding: 17px; border-radius: 18px; }
  .admin-page .form-grid { grid-template-columns: 1fr; }
  .admin-page .add-product-btn { width: 100%; margin-left: 0; }
  .admin-page .modal { padding: 25px 12px; }
  .admin-page .modal-card { padding: 18px; border-radius: 20px; }
  .admin-page .modal-form .btn { width: 100%; }
}