/* Admin interaction layer. Existing layouts, business states and embedded apps remain independent. */
:root { --motion-fast: 160ms; --motion-ease: cubic-bezier(.22, 1, .36, 1); }
:where(.primary, .secondary, .text-button, .back-button, .logout-button, .danger-button, .theme-toggle-button, .nav-item, .directory-tool-button, .directory-icon-button, .benefit-navigation button, .benefit-user-navigation button, .quick-grid button, .benefit-entry-grid button) {
  transition: transform var(--motion-fast) var(--motion-ease), box-shadow 200ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease, opacity 180ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
:where(.primary, .secondary, .text-button, .back-button, .logout-button, .danger-button, .theme-toggle-button, .nav-item, .directory-tool-button, .directory-icon-button, .benefit-navigation button, .benefit-user-navigation button, .quick-grid button, .benefit-entry-grid button):not(:disabled):active { transform: scale(.975); }
:where(.primary, .secondary, .text-button, .back-button, .logout-button, .danger-button, .nav-item, .directory-tool-button, .directory-icon-button):focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
:where(button):disabled { cursor: not-allowed; }
.login-button:disabled, button[aria-busy="true"] { cursor: wait; }
.nav-item .icon-wrap { transition: background-color 180ms ease, color 180ms ease, transform 220ms var(--motion-ease); }
.nav-item.active .icon-wrap { background: var(--primary); color: #fff; box-shadow: 0 3px 8px rgba(73, 152, 44, .2); }
.nav-item .ui-icon { width: 18px; height: 18px; }
.side-nav .nav-item { transform: none; transition: background-color 160ms ease, color 160ms ease; }
.side-nav .nav-item:active { transform: none; }
.side-nav .nav-item:not(.active):hover { background: rgba(32, 61, 53, .035); box-shadow: none; }
.side-nav .nav-item.active { color: var(--primary-dark); background: var(--primary-pale); box-shadow: inset 4px 0 0 var(--primary); }
.side-nav .nav-item .icon-wrap { transform: none; }
.side-nav .nav-item .ui-icon { transition: transform 180ms var(--motion-ease); transform-origin: center; }
.benefit-entry-icon .ui-icon { width: 22px; height: 22px; }
.benefit-entry-icon { transition: transform 240ms var(--motion-ease), background-color 200ms ease; }
.benefit-entry-grid em { transition: transform 220ms var(--motion-ease), color 180ms ease; }
.stat-grid > article, .article-row, .material-row, .benefit-admin-row, .feedback-record {
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 220ms ease;
}
.stat-grid > article { min-width: 0; box-shadow: 0 4px 16px rgba(40, 96, 64, .045); }
.stat-grid small { overflow-wrap: anywhere; }
/* Glass uses real page colors underneath, without decorative overlay layers. */
.app-shell { background: radial-gradient(ellipse at 5% 0%, rgba(98, 193, 62, .11), transparent 48%), radial-gradient(ellipse at 95% 5%, rgba(243, 154, 88, .07), transparent 40%), var(--page); }
.sidebar { z-index: 20; }
.topbar { box-shadow: 0 5px 20px rgba(40, 96, 64, .045); }
:root[data-theme="dark"] .app-shell { background: radial-gradient(ellipse at 5% 0%, rgba(104, 201, 139, .1), transparent 48%), radial-gradient(ellipse at 95% 5%, rgba(241, 170, 108, .06), transparent 40%), var(--page); }
:root[data-theme="dark"] .sidebar, :root[data-theme="dark"] .topbar { border-color: var(--line); background: rgba(24, 36, 31, .82); }
:root[data-theme="dark"] .logout-button { color: #ffb69d; border-color: rgba(255, 142, 105, .35); background: #35221f; }
:root[data-theme="dark"] .logout-button:hover { background: #4a2b25; }
:root[data-theme="dark"] .toast { background: #d9f4e3; color: #153329; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar, .topbar {
    background: rgba(255, 255, 255, .76);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
    backdrop-filter: blur(18px) saturate(1.12);
  }
  #dashboardView > .stat-grid > article {
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(12px) saturate(1.08);
    backdrop-filter: blur(12px) saturate(1.08);
  }
  .modal-backdrop {
    background: rgba(24, 41, 37, .24);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }
  .material-edit-dialog, .material-category-dialog { background: rgba(255, 255, 255, .95); }
}
:root[data-theme="dark"] .nav-item i { color: #a9c9ba; background: #22382f; }
:root[data-theme="dark"] .nav-item.active i { color: #102218; background: var(--primary); }
:root[data-theme="dark"] .side-nav .nav-item:not(.active):hover { background: rgba(216, 245, 226, .08); }
:root[data-theme="dark"] .overview-stat-grid article { background: rgba(24, 36, 31, .82); }
:root[data-theme="dark"] #dashboardView > .stat-grid > article { background: rgba(24, 36, 31, .82); }
:root[data-theme="dark"] .overview-stat-grid article:first-child { border-top-color: #68c98b; }
:root[data-theme="dark"] .overview-stat-grid article:nth-child(2) { border-top-color: #f1aa6c; }
:root[data-theme="dark"] .overview-stat-grid article:nth-child(3) { border-top-color: #8bb7e8; }
:root[data-theme="dark"] .material-directory-tree, :root[data-theme="dark"] #materialListCard > .list-toolbar { background: #15221d; }
:root[data-theme="dark"] .material-directory-content, :root[data-theme="dark"] .material-browser, :root[data-theme="dark"] .content-card { background: var(--panel); }
:root[data-theme="dark"] .batch-preview-head, :root[data-theme="dark"] .wechat-data-detail h3, :root[data-theme="dark"] .batch-table th { background: #1d2b25; }
:root[data-theme="dark"] .modal-close { color: var(--muted); background: #263a31; }
:root[data-theme="dark"] .text-button { background: #203b2d; }
:root[data-theme="dark"] .text-button.warn { background: #3a2b23; }
:root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { color: var(--text); border-color: var(--line); background: #122019; }
:root[data-theme="dark"] input:focus, :root[data-theme="dark"] textarea:focus, :root[data-theme="dark"] select:focus { background: #1b2b24; }
:root[data-theme="dark"] .wechat-chart-card, :root[data-theme="dark"] .wechat-chart-insight { background: linear-gradient(145deg, #1b2a24, #15221d); }
:root[data-theme="dark"] .wechat-chart-svg text, :root[data-theme="dark"] .wechat-chart-svg .chart-label { fill: #a2b9af; }
:root[data-theme="dark"] .wechat-chart-svg .chart-grid line { stroke: #355044; }
:root[data-theme="dark"] .material-edit-dialog, :root[data-theme="dark"] .material-category-dialog { color: var(--text); background: rgba(24, 36, 31, .96); border-color: #426252; }
:root[data-theme="dark"] .stat-grid article, :root[data-theme="dark"] .info-card, :root[data-theme="dark"] .quick-grid button, :root[data-theme="dark"] .content-card, :root[data-theme="dark"] .wechat-data-metric, :root[data-theme="dark"] .wechat-data-detail, :root[data-theme="dark"] .wechat-chart-card, :root[data-theme="dark"] .wechat-chart-insight, :root[data-theme="dark"] .batch-preview, :root[data-theme="dark"] .material-category-item, :root[data-theme="dark"] .website-hint, :root[data-theme="dark"] .ai-writing-bar { color: var(--text); border-color: var(--line); background: var(--panel); }
:root[data-theme="dark"] .wechat-data-table-head, :root[data-theme="dark"] .wechat-data-table-row, :root[data-theme="dark"] .article-row, :root[data-theme="dark"] .material-row, :root[data-theme="dark"] .batch-table th, :root[data-theme="dark"] .batch-table td { border-color: #294137; }
:root[data-theme="dark"] .material-directory-head, :root[data-theme="dark"] .modal-head, :root[data-theme="dark"] .section-toolbar { color: var(--text); }
:root[data-theme="dark"] .material-directory-content .material-row:hover, :root[data-theme="dark"] .article-row:hover, :root[data-theme="dark"] .material-row:hover { background: #20342a; }
:root[data-theme="dark"] .empty-state { color: var(--muted); }
.danger-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.admin-click-effect { position: fixed; z-index: 1000; overflow: hidden; pointer-events: none; contain: strict; }
.admin-click-ripple { position: absolute; display: block; border-radius: 50%; background: currentColor; opacity: .15; transform-origin: center; }
.toast-host { display: grid; gap: 10px; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; overflow-wrap: anywhere; }
.toast .ui-icon { width: 19px; height: 19px; }
@media (hover: hover) and (pointer: fine) {
  :where(.primary, .secondary, .logout-button, .danger-button):not(:disabled):hover:not(:active) { transform: translateY(-1px); box-shadow: 0 7px 17px rgba(40, 96, 64, .13); }
  .quick-grid button:hover:not(:active), .benefit-entry-grid button:hover:not(:active) { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(40, 96, 64, .1); }
  .benefit-entry-grid button:hover .benefit-entry-icon { transform: scale(1.1); }
  .benefit-entry-grid button:hover em { transform: translateX(3px); color: var(--primary-dark); }
  .stat-grid > article:hover { border-color: #b7d7bc; box-shadow: 0 5px 18px rgba(40, 96, 64, .065); }
  :where(.article-row, .material-row, .benefit-admin-row, .feedback-record):hover { border-color: #c3dfcc; background-color: #fbfefb; }
}
/* Magnify only the current glyph; selection frames and neighboring items stay still. */
@media (min-width: 681px) and (hover: hover) and (pointer: fine) {
  .side-nav .nav-item:not(:disabled):is(:hover, :focus-visible) .ui-icon { transform: scale(1.16); }
}
@media (prefers-reduced-transparency: reduce) {
  .sidebar, .topbar, #dashboardView > .stat-grid > article, .material-edit-dialog, .material-category-dialog { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .modal-backdrop { background: rgba(24, 41, 37, .28); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.primary, .secondary, .text-button, .back-button, .logout-button, .danger-button, .theme-toggle-button, .nav-item, .nav-item .ui-icon, .directory-tool-button, .directory-icon-button, .benefit-navigation button, .benefit-user-navigation button, .quick-grid button, .benefit-entry-grid button, .icon-wrap, .benefit-entry-icon, .benefit-entry-grid em, .quick-icon, .stat-grid > article, .article-row, .material-row, .benefit-admin-row, .feedback-record) { transition: none !important; transform: none !important; }
  .admin-click-effect { display: none; }
  .toast { animation: none; }
}