:root {
  --navy: #15375e;
  --ink: #172b40;
  --muted: #64758a;
  --line: #dfe6ed;
  --paper: #f7f9fb;
  --gold: #4f7299;
  --shadow: none;
}

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.5; }
button { transition: background-color .16s ease, border-color .16s ease; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #477aa9; outline-offset: 2px; }
.shell { background: var(--paper); }
.sidebar { flex-shrink: 0; width: 224px; padding: 22px 12px; background: #173654; }
.brand { padding: 2px 10px 22px; gap: 10px; }
.brand-mark { border-radius: 5px; width: 34px; height: 34px; background: #fff; color: #173654; font-size: 21px; }
.brand b { letter-spacing: 1.2px; font-size: 12px; }
.brand small { font-size: 11px; color: #b4c3d1; }
.property-switch { margin: 0 4px 18px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.16); background: transparent; border-radius: 6px; }
.property-switch small { color: #a9bccd; font-size: 11px; }
.property-switch b { font-size: 13px; font-weight: 600; }
.nav-label { margin: 20px 12px 5px; color: #a4b8ca; letter-spacing: .4px; font-size: 11px; }
.nav-item { min-height: 40px; margin: 1px 0; padding: 9px 13px; border-radius: 4px; color: #d1dce6; font-size: 13px; gap: 0; }
.nav-item.active { background: #e9f1f8; color: #15375e; font-weight: 700; }
.nav-item:hover:not(.active) { background: rgba(255,255,255,.09); }
.sidebar-footer { padding: 16px 10px 0; border-top: 1px solid rgba(255,255,255,.17); border-radius: 0; }
.sidebar-footer:hover { background: transparent; }
.avatar { background: #e9f1f8; color: #173654; border-radius: 5px; }
.sidebar-footer b { font-size: 13px; }
.sidebar-footer small { color: #acbece; font-size: 11px; }
.sidebar-account { margin-top: auto; padding-top: 14px; flex-shrink: 0; }
.sidebar-account .sidebar-footer { width: 100%; margin: 0; padding: 12px 10px; border: 0; border-radius: 8px; background: #eef3f8; color: #193b59; text-align: left; }
.sidebar-account .sidebar-footer:hover { background: #e0eaf4; }
.sidebar-account .sidebar-account-text { min-width: 0; margin-left: 0; }
.sidebar-account .sidebar-footer b { color: #193b59; font-size: 13px; }
.sidebar-account .sidebar-footer small { color: #506780; font-size: 11px; }
.sidebar-account .sidebar-footer > span:last-child { color: #506780; margin-left: auto; }
.sidebar-account .sidebar-footer .avatar { margin-left: 0; color: #193b59; background: #dbe6f1; flex-shrink: 0; }
.sidebar-account .account-switch { display: block; width: 100%; margin-top: 8px; padding: 8px 12px; border: 1px solid #92abc1; border-radius: 6px; background: transparent; color: #fff; font: inherit; font-size: 13px; line-height: 20px; text-align: center; }
.sidebar-account .account-switch:hover { background: #294d6e; }
.sidebar-account .account-switch:disabled { opacity: .65; cursor: wait; }
.marketing-table .coupon-delete { color: #b4232c; }
.marketing-table .coupon-delete:disabled { color: #788697; cursor: not-allowed; }
@media (max-width: 680px) {
  .sidebar-account { display: flex; align-items: center; gap: 8px; padding-top: 0; margin-top: 6px; flex-wrap: wrap; }
  .sidebar-account .sidebar-footer { width: auto; padding: 7px 10px; }
  .sidebar-account .sidebar-footer .avatar { display: grid; }
  .sidebar-account .sidebar-footer .sidebar-account-text { display: block; }
  .sidebar-account .account-switch { width: auto; margin-top: 0; padding: 6px 12px; }
}
.topbar { height: 90px; padding: 18px 32px; }
.eyebrow { font-family: inherit; font-size: 12px; line-height: 1.3; letter-spacing: 0; color: #65798d; }
.topbar h1 { font-size: 23px; letter-spacing: 0; margin-top: 7px; }
.content { width: 100%; min-width: 0; max-width: none; padding: 26px 32px 42px; }
.page-header { align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.page-header h2 { font-size: 20px; }
.page-header p { font-size: 13px; line-height: 1.5; margin: 5px 0 0; }
.card { border: 1px solid var(--line); border-radius: 7px; box-shadow: none; }
.panel { padding: 18px 20px; }
.grid { gap: 12px; }
.kpi { min-height: 114px; padding: 16px 18px; }
.kpi-label, .panel-sub, .table, .panel-link { font-size: 12px; }
.kpi-icon { background: #edf3f8 !important; color: #315e88 !important; border-radius: 4px; }
.kpi-value { margin-top: 11px; font-size: 25px; font-weight: 700; letter-spacing: 0; }
.kpi-note { bottom: 13px; left: 18px; font-size: 11px; }
.panel-title { font-size: 15px; }
.table th { color: #64758a; font-size: 12px; font-weight: 600; padding: 0 10px 11px 0; }
.table td { padding: 12px 10px 12px 0; border-color: #e9eef3; }
.status, .tag { border-radius: 4px; font-size: 11px; }
.status.pending { background: #eef3f8; color: #315e88; }
.primary { min-height: 38px; padding: 8px 14px; border-radius: 5px; font-size: 13px; font-weight: 600; }
.primary:hover { background: #24517d; }
.filter, .date-filter { border-radius: 5px; font-size: 12px; }
.catalog-secondary, .homepage-soft-button { background: #fff; color: #28547e; border-color: #c8d7e5; border-radius: 5px; }
.catalog-secondary:hover, .homepage-soft-button:hover { background: #eef4f9; }
.catalog-link, .catalog-back { color: #24517d; }
.catalog-categories, .catalog-editor, .marketing-create-panel, .account-panel { box-shadow: none; }
.catalog-section { padding: 23px 26px; gap: 24px; }
.catalog-editor-head h2 { font-size: 22px; }
.catalog-section h3, .catalog-inline-head h3 { font-size: 15px; }
.catalog-field input, .catalog-field select, .catalog-field textarea, .catalog-category-row input, .catalog-rate-table input,
.settings-panel input, .settings-panel textarea, .marketing-create-panel input, .marketing-create-panel select,
.account-form input, .account-row select { border-radius: 5px; min-height: 40px; }
.catalog-image-preview, .homepage-space-card, .account-row, .staff-permission { border-radius: 5px; }
.catalog-actions { background: #fff; border-top: 1px solid var(--line); padding: 17px 26px; }
.catalog-policy { background: #f1f5f9; border-radius: 5px; }
.marketing-release-warning { border-radius: 5px; }
.edit-modal, .login-card { border-radius: 7px; box-shadow: 0 12px 32px rgba(15,42,69,.10); }
.login-card { width: min(390px, calc(100vw - 32px)); padding: 30px; }
.login-card h2 { font-size: 22px; margin-bottom: 18px; }
.login-card label { font-size: 13px; }
.login-card input { min-height: 42px; border-radius: 5px; }
.toast { border-radius: 5px; }
.modal-kicker { display: none; }

/* Keep action controls consistent without resizing navigation, product cards
   or icon-only controls. This stylesheet loads after the page-specific rules. */
#app-content :is(.primary, .catalog-secondary, .homepage-soft-button, .room-image-upload,
  .catalog-link, .catalog-back, .marketing-form-actions button, .account-row button,
  .homepage-row-actions button, .homepage-category-row button, .feedback-message button,
  .table td button),
.edit-modal :is(.primary, .room-image-upload), .topbar .preview-btn {
  box-sizing: border-box;
  min-height: 38px;
  max-width: 100%;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  vertical-align: middle;
  border-radius: 5px;
}
#app-content .primary, .edit-modal .primary {
  min-height: 40px;
  padding: 9px 16px;
  font-weight: 600;
}
#app-content .catalog-actions .primary { min-width: 112px; }
#app-content :is(.catalog-link, .catalog-back, .homepage-row-actions button,
  .homepage-category-row button, .table td button) {
  min-height: 34px;
  padding: 6px 10px;
}
#app-content .catalog-image-actions, #app-content .homepage-row-actions,
#app-content .marketing-form-actions, #app-content .account-actions {
  gap: 10px;
  flex-wrap: wrap;
}
#app-content button[hidden], .edit-modal button[hidden] { display: none !important; }

@media (max-width: 680px) {
  #app-content :is(.primary, .catalog-secondary, .homepage-soft-button, .room-image-upload,
    .catalog-link, .catalog-back, .marketing-form-actions button, .account-row button,
    .homepage-row-actions button, .homepage-category-row button, .feedback-message button,
    .table td button),
  .edit-modal :is(.primary, .room-image-upload), .topbar .preview-btn {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
  }
}

@media (max-width: 950px) {
  .sidebar { width: 190px; }
  .content, .topbar { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 680px) {
  .shell { display: block; }
  .sidebar { display: block; width: 100%; padding: 8px 10px; }
  .sidebar .brand, .sidebar .property-switch, .nav-label { display: none; }
  .sidebar nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .sidebar nav::-webkit-scrollbar { display: none; }
  .nav-item { flex: none; width: auto; white-space: nowrap; margin: 0; padding: 8px 11px; }
  .sidebar-footer { display: flex; width: auto; margin-top: 6px; padding: 7px 11px 0; }
  .sidebar-footer .avatar { width: 24px; height: 24px; font-size: 13px; }
  .sidebar-footer small, .sidebar-footer > span { display: none; }
  .topbar { min-height: 72px; padding: 14px 16px; }
  .content { padding: 18px 14px 32px; }
  .page-header { flex-wrap: wrap; }
  .kpi-grid, .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-section { padding: 18px; }
  .catalog-actions { padding: 16px 18px; }
}