/* MIYI warm ivory / forest palette. Screen-only: receipt/invoice paper styles remain independent. */
@media screen {
  html:root {
    color-scheme: light;
    --m-bg: #f4f3ef; --m-panel: #ffffff; --m-raised: #f1f3ef;
    --m-border: #d8dfd9; --m-text: #253b33; --m-muted: #516158;
    --m-accent: #28604d; --m-accent-ink: #ffffff; --m-hover: #e9f0eb;
    --bg: var(--m-bg); --card: var(--m-panel); --ink: var(--m-text);
    --txt: var(--m-text); --muted: var(--m-muted); --line: var(--m-border);
    --primary: var(--m-accent); --green: var(--m-accent); --blue: var(--m-accent);
    --teal: #497a80; --navy: #405a6a; --amber: #94703d; --red: #b34e50;
  }
  html body, html body.gray-bg, html body.white-bg, html #page-wrapper {
    background: var(--m-bg) !important; color: var(--m-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "Yu Gothic", sans-serif;
    font-size: 14px; line-height: 1.6;
  }
  html body a { color: var(--m-accent); }
  html body a:hover { color: #1c4b3b; }
  html body h1, html body h2, html body h3, html body h4, html body h5 { color: var(--m-text); }
  html body .text-muted, html body .help-block, html body .muted { color: var(--m-muted); }
  html body .text-success, html body .text-navy { color: var(--m-accent); }
  html body .text-warning { color: #8a642b; }
  html body .text-danger, html body label.error { color: #b13d49; }
  html body hr { border-color: var(--m-border); }
  html body :focus-visible { outline: 2px solid var(--m-accent); outline-offset: 3px; }
  html body input[type=checkbox], html body input[type=radio] { accent-color: var(--m-accent); }
  html body .container-div { padding: 24px; height: auto; min-height: 100%; }
  html body .container-div > .row { margin: 0; }
  html body .search-collapse, html body .select-table, html body .ibox-content,
  html body .panel, html body .panel-body, html body .modal-content,
  html body .well, html body .list-group-item, html body .white-bg.wrapper {
    color: var(--m-text); background: var(--m-panel); border-color: var(--m-border);
    box-shadow: none;
  }
  html body .search-collapse { margin: 0 0 18px; padding: 18px 20px; border: 1px solid var(--m-border); border-radius: 12px; }
  html body .select-table { padding: 16px 18px; border: 1px solid var(--m-border); border-radius: 12px; margin-top: 0; }
  html body .ibox { border-radius: 12px; overflow: hidden; }
  html body .ibox-title, html body .panel-heading, html body .modal-header {
    color: var(--m-text); background: var(--m-raised); border-color: var(--m-border);
  }
  html body .panel-footer, html body .modal-footer { background: var(--m-panel); border-color: var(--m-border); }
  html body .select-list ul { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; margin: 0; padding: 0; }
  html body .select-list li { float: none; margin: 0; height: auto; display: flex; flex-direction: column; gap: 5px; }
  html body .select-list li > label { width: auto; text-align: left; color: var(--m-muted); margin: 0; font-size: 12px; }
  html body .select-list li.miyi-search-actions { flex-direction: row; align-items: center; gap: 8px; }
  html body .select-list input, html body .select-list select { width: 180px; }
  html body .form-control, html body .select-list input, html body .select-list select,
  html body .select2-container--default .select2-selection--single,
  html body .select2-container--default .select2-selection--multiple,
  html body .input-group-addon, html body textarea, html body .chosen-container-single .chosen-single {
    background: #f7f7f3; color: var(--m-text); border: 1px solid #ccd8ce;
    border-radius: 7px; box-shadow: none; min-height: 38px;
  }
  html body .form-control:focus, html body .select-list input:focus, html body .select-list select:focus {
    border-color: var(--m-accent); box-shadow: 0 0 0 3px #28604d18;
  }
  html body input::placeholder, html body textarea::placeholder { color: #405b4d; opacity: 1; }
  html body .form-control[readonly], html body .form-control[disabled] { background: #ffffff; color: #405b4d; }
  html body .form-horizontal { max-width: 1160px; margin: 0 auto; }
  html body .form-horizontal .form-group { margin-bottom: 20px; }
  html body .form-horizontal .control-label { color: #405b4d; font-weight: 500; }
  html body .wrapper-content { padding: 24px; }
  html body .wrapper-content.ibox-content { display: flow-root; }
  html body .is-required:before { color: #b13d49 !important; }
  html body .btn { background: #ffffff; color: #405b4d; border-color: #ccd8ce; border-radius: 7px; min-height: 36px; padding: 7px 13px; font-weight: 600; transition: background .12s; }
  html body .btn.btn-xs { min-height: 28px; padding: 3px 9px; font-size: 12px; }
  html body .btn-primary, html body .btn-success { background: var(--m-accent); border-color: var(--m-accent); color: var(--m-accent-ink); }
  html body .btn-primary:hover, html body .btn-success:hover { background: #204f3f; border-color: #204f3f; color: #ffffff; }
  html body .btn-default, html body .btn-white, html body .btn-info { background: #ffffff; color: #405b4d; border-color: #ccd8ce; }
  html body .btn-warning { background: #fbf3e4; color: #805b20; border-color: #ddc49d; }
  html body .btn-danger { background: #fbebeb; color: #a53f48; border-color: #e5bfc3; }
  html body #toolbar { margin: 0 0 12px; }
  html body #toolbar .btn { margin: 3px 4px 3px 0; }
  html body .table, html body .table > thead > tr > th, html body .table > tbody > tr > td,
  html body .table > tfoot > tr > td, html body .fixed-table-container, html body .fixed-table-footer,
  html body .fixed-table-header { color: var(--m-text); border-color: var(--m-border); }
  html body .table > thead > tr > th { background: #ffffff; font-size: 12px; font-weight: 600; color: #405b4d; }
  html body .table > tbody > tr > td { padding: 13px 12px; vertical-align: middle; }
  html body .table > tbody > tr > td, html body .table > thead > tr > th, html body .table > tfoot > tr > th { border-color: var(--m-border) !important; }
  html body .table-striped > tbody > tr:nth-of-type(odd) { background: #ffffff; }
  html body .table-hover > tbody > tr:hover, html body .table > tbody > tr.selected > td { background: #eaf0e9; }
  html body .table > tbody > tr > td.active, html body .table > tbody > tr > td.success { background: #eaf0e9; }
  html body .fixed-table-container .fixed-table-loading { background: var(--m-panel); color: var(--m-text); }
  html body .fixed-table-footer { background: #ffffff; font-variant-numeric: tabular-nums; }
  html body .pagination > li > a, html body .pagination > li > span { background: #f7f7f3; border-color: var(--m-border); color: #405b4d; }
  html body .pagination > .active > a, html body .pagination > .active > span { background: var(--m-accent); color: #ffffff; }
  html body .dropdown-menu, html body .select2-dropdown, html body .bootstrap-select .dropdown-menu,
  html body .chosen-container .chosen-drop { background: #ffffff; color: var(--m-text); border-color: #ccd8ce; }
  html body .dropdown-menu > li > a, html body .select2-results__option { color: var(--m-text); }
  html body .dropdown-menu > li > a:hover, html body .select2-results__option--highlighted[aria-selected] { background: #28604d; color: white; }
  html body .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--m-text); line-height: 36px; }
  html body .select2-search__field { background: #f7f7f3; color: var(--m-text); }
  html body .select2-container--default .select2-selection--multiple .select2-selection__choice { background: #eaf0e9; border-color: #ccd8ce; }
  html body .nav-tabs { border-color: var(--m-border); margin-bottom: 20px; }
  html body .nav-tabs > li > a { color: var(--m-muted); padding: 12px 20px; border-radius: 8px 8px 0 0; }
  html body .nav-tabs > li.active > a, html body .nav-tabs > li > a:hover { background: #eaf0e9; color: var(--m-accent); border-color: var(--m-border); }
  html body .alert { border-radius: 9px; }
  html body .alert-info { background: #edf4f5; color: #365f69; border-color: #c6dadd; }
  html body .alert-success { background: #edf5ef; color: #356548; border-color: #c4d9cb; }
  html body .alert-warning { background: #faf3e7; color: #815e28; border-color: #dfcda9; }
  html body .alert-danger { background: #fbedee; color: #a3404a; border-color: #e4c1c5; }
  html body .label-primary, html body .label-success, html body .badge-primary { background: #eaf0e9; color: #405b4d; }
  html body .label-warning { background: #f5ecdc; color: #795b29; }
  html body .layui-layer { background: #f7f7f3; color: var(--m-text); border: 1px solid #ccd8ce; border-radius: 12px; overflow: hidden; }
  html body .layui-layer-title { background: #ffffff !important; color: var(--m-text) !important; border-color: #ccd8ce !important; font-weight: 600; }
  html body .layui-layer-btn { border-top: 1px solid var(--m-border) !important; background: #f7f7f3 !important; }
  html body .layui-layer-btn a { background: #eaf0e9 !important; color: #405b4d !important; border-color: #ccd8ce !important; border-radius: 6px; }
  html body .layui-layer-btn .layui-layer-btn0 { background: var(--m-accent) !important; color: #ffffff !important; border-color: var(--m-accent) !important; }
  html body .layui-layer-setwin a { filter: none; }
  html body .layui-laydate, html body .layui-laydate-content, html body .datepicker, html body .datetimepicker { background: #ffffff; color: var(--m-text); }
  html body .layui-laydate-header, html body .layui-laydate-footer { border-color: var(--m-border); }
  html body .layui-laydate td, html body .layui-laydate th, html body .layui-laydate-header i, html body .layui-laydate-header span { color: #405b4d; }
  html body .layui-laydate .layui-this, html body .datepicker td.active { background: #28604d !important; color: #ffffff !important; }
  html body .ztree li a { color: #405b4d; }
  html body .ztree li a.curSelectedNode { background: #eaf0e9; border-color: #ccd8ce; }
  html body .ui-layout-west, html body .ui-layout-center, html body .ui-layout-pane { background: var(--m-bg); border-color: var(--m-border); }
  html body .box, html body .box-header, html body .ui-layout-content { background: var(--m-panel); color: var(--m-text); border-color: var(--m-border); }
  html body .box-header .box-title { color: var(--m-text); }
  html body .box-header .btn-box-tool { background: transparent; padding: 4px 8px; min-height: 32px; color: var(--m-accent); }
  html body .note-editor, html body .note-editable, html body pre { background: #f7f7f3; color: #405b4d; border-color: var(--m-border); }
  /* Navigation stays compatible with RuoYi's mini/canvas menu and iframe tabs. */
  html body #wrapper, html body .navbar-static-side, html body .sidebar-collapse { background: #f7f7f3; }
  html body .navbar-static-side { border-right: 1px solid #ccd8ce; }
  html body .logo { background: transparent !important; border-bottom: 1px solid #ccd8ce; height: 74px; line-height: 74px; }
  html body .logo-lg { font-size: 20px; font-weight: 600; letter-spacing: 1px; }
  html body .user-panel { padding: 20px 15px; background: #f7f7f3 !important; border-bottom: 1px solid #ccd8ce; }
  html body .navbar-static-side > a { display: block; background: #f7f7f3; }
  html body .user-panel > .info { padding-top: 3px; font-size: 12px; }
  html body #side-menu { padding-bottom: 24px; }
  html body #side-menu li { border-left: 0; }
  html body #side-menu > li > a { padding: 15px 18px; font-weight: 500; color: #405b4d; }
  html body #side-menu .nav-second-level li a { padding: 12px 10px 12px 44px; font-weight: 400; font-size: 13px; color: #405b4d; }
  html body #side-menu li.active { background: #ffffff; }
  html body #side-menu li.selected > a, html body #side-menu a:hover { background: #eaf0e9 !important; color: #405b4d !important; }
  html body #side-menu a > .fa { width: 20px; font-size: 16px; }
  html body .navbar-static-top { background: #f7f7f3 !important; border-bottom: 1px solid #ccd8ce; min-height: 60px; }
  html body .navbar-header .navbar-minimalize { background: #eaf0e9; color: #405b4d; border: 0; }
  html body .navbar-top-links > li > a { color: #405b4d; }
  html body .content-tabs, html body .content-tabs .roll-nav, html body .page-tabs a { background: #f7f7f3; color: #405b4d; border-color: #ccd8ce; }
  html body .page-tabs a.active { background: #eaf0e9; color: #405b4d; border-bottom: 2px solid var(--m-accent); }
  html body .footer { background: #f7f7f3; color: #405b4d; border-color: #ccd8ce; }
  .miyi-page-heading { margin: 0 0 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  .miyi-page-heading h2 { margin: 0 0 6px; font-size: 25px; font-weight: 650; letter-spacing: -.5px; }
  .miyi-page-heading p { margin: 0; color: var(--m-muted); font-size: 13px; }
  .miyi-eyebrow { color: var(--m-accent); font-size: 10px; font-weight: 600; letter-spacing: 2px; margin-bottom: 7px; }
  html body .select-list .btn-default { background: #eaf0e9 !important; color: #405b4d !important; border-color: #ccd8ce; width: auto !important; }
  html body .select-list .miyi-filter-toggle { align-self: flex-end; }
  html body .select-list li.miyi-filter-hidden { display: none; }
  .miyi-steps { display: flex; gap: 24px; margin: 0 0 22px; padding: 16px 20px; background: #ffffff; border: 1px solid #ccd8ce; border-radius: 10px; color: #405b4d; }
  .miyi-steps b { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: #eaf0e9; color: #405b4d; }
  html body .sales-page-title { padding: 0; margin-bottom: 24px; }
  html body .sales-page-title h2 { color: var(--m-text); font-size: 25px; }
  html body .sales-page-title p { color: var(--m-muted); }
  html body .money-cell { color: #405b4d; }
  html body .miyi-price-column { color: #405b4d !important; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
  html body input[name=priceTaxJpy], html body #grossUnit { background: #ffffff; border-color: #ccd8ce; font-size: 20px; font-weight: 600; min-height: 46px; }
  html body .status-badge { white-space: nowrap; }
  html body .status-paid { color: #405b4d; background: #eaf0e9; }
  html body .status-unpaid { color: #795b29; background: #f5ecdc; }
  html body .recurring-page { max-width: 1600px; padding: 26px; margin: auto; }
  @media (max-height: 650px) {
    html body .recurring-page { padding: 16px 22px; }
    html body .recurring-page .miyi-page-heading { margin-bottom: 12px; }
    html body .recurring-page .miyi-page-heading h2 { font-size: 21px; margin-bottom: 2px; }
    html body .recurring-page .miyi-eyebrow { display: none; }
    html body .recurring-page .miyi-steps { padding: 8px 12px; margin-bottom: 12px; }
    html body .recurring-page .nav-tabs { margin-bottom: 10px; }
    html body .recurring-page .recurring-filters { padding: 10px 14px; margin-top: 10px; }
  }
  html body .recurring-filters { background: #f7f7f3; border: 1px solid #ccd8ce; border-radius: 10px; padding: 18px; margin-bottom: 12px; }
  html body .recurring-summary { padding: 15px 18px; background: #ffffff; border-radius: 10px; }
  html body #recurring-selection > .recurring-summary { position: sticky; bottom: 0; z-index: 3; border: 1px solid #ccd8ce; box-shadow: 0 -6px 20px #293a3010; }
  html body .stock-head { padding: 0 0 22px; margin: 0; background: transparent; border-bottom: 1px solid var(--m-border); border-radius: 0; }
  html body .stock-head h2 { color: var(--m-text); font-size: 25px; font-weight: 650; }
  html body .stock-head p { color: var(--m-muted); }
  html body .stock-nav { margin-bottom: 12px; }
  html body .stock-actions { align-items: center; }
  html body .stock-preview { background: #eaf0e9; border: 1px solid #ccd8ce; }
  html body .stock-preview strong { color: #405b4d; }
  html body .stock-quantity { font-size: 18px; color: #405b4d; }
  html body .stock-quantity.is-empty { color: #805b20; }
  html body #serviceTable { min-width: 1000px; }
  html body #serviceTable .form-control { min-width: 88px; }
  html body .ibox-title:has(.ibox-tools .btn) { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px; flex-wrap: wrap; }
  html body .ibox-title .ibox-tools { position: static; }
  html body .topbar, html body .card, html body .pill { background: var(--m-panel); color: var(--m-text); border-color: var(--m-border); }
  html body .wrap table td, html body .wrap table th { background: var(--m-panel); color: var(--m-text); border-color: var(--m-border); }
  html body .wrap table th, html body .wrap table .sum { background: #eaf0e9; color: #405b4d; }
  /* POS: a touch-first catalogue and clearly separated checkout. */
  html body .pos-card, html body .catalog-tools, html body .cart-item { background: var(--m-panel); border-color: var(--m-border); }
  html body .pos-main { padding: 18px; }
  html body .brand-badge { background: #eaf0e9; color: #405b4d; }
  html body .pos-shell .btn-primary, html body .pos-shell .btn-success { color: #ffffff; }
  html body .pos-shell a.btn { display: inline-flex; align-items: center; gap: 5px; }
  html body .pos-shell a.btn[hidden] { display: none; }
  html body .category-nav { background: #f7f7f3; border-color: var(--m-border); width: 126px; }
  html body .category-btn { color: #405b4d; min-height: 66px; }
  html body .category-btn.active { background: #eaf0e9; border-color: #ccd8ce; color: #405b4d; box-shadow: none; }
  html body .category-btn.active small { color: #405b4d; }
  html body .category-btn:hover { background: #eaf0e9; }
  html body .category-btn small { color: #405b4d; }
  html body .svc-btn { background: #ffffff; color: var(--m-text); border-color: #ccd8ce; border-radius: 10px; min-height: 115px; padding: 14px; }
  html body .svc-btn:hover, html body .svc-btn.selected { background: #eaf0e9; border-color: #ccd8ce; box-shadow: none; }
  html body .svc-price { color: #405b4d; }
  html body .svc-tag, html body .cart-count { background: #eaf0e9; color: #405b4d; }
  html body .checkout { background: #f7f7f3; border-color: #ccd8ce; }
  html body .pos-tax-details { color: #405b4d; font-size: 12px; }
  html body .pos-tax-details summary { cursor: pointer; padding: 2px 0 6px; }
  html body .pos-card:nth-child(2) > .pos-body { min-height: 110px; }
  html body .pos-shell .checkout { max-height: 72%; overflow-y: auto; padding: 10px 12px; }
  html body .pos-shell .sum-strong { padding-top: 4px; margin: 4px 0 8px; min-height: 42px; }
  html body .pos-shell .sum-strong #sumIncl { font-size: 30px; line-height: 1.2; }
  html body .pos-shell .checkout-actions { margin-top: 8px; }
  html body .pos-shell .checkout-actions .btn { height: 48px; }
  html body .pos-shell .checkout-field label { margin-bottom: 2px; }
  html body .pos-shell .pos-head { padding: 12px; }
  html body .pos-shell .pos-head .pos-sub { font-size: 11px; }
  html body .pos-shell .catalog-tools { padding: 10px; }
  html body .pos-shell ::-webkit-scrollbar { width: 7px; height: 7px; }
  html body .pos-shell ::-webkit-scrollbar-track { background: #f7f7f3; }
  html body .pos-shell ::-webkit-scrollbar-thumb { background: #eaf0e9; border-radius: 8px; }
  html body .sum-row, html body .checkout-field label, html body .chip { color: #405b4d; }
  html body .sum-strong { color: var(--m-text); border-color: #ccd8ce; }
  html body .sum-strong #sumIncl { color: var(--m-accent); }
  html body .danger-link { background: #fbefef; color: #a53f48; }
  html body .empty, html body .kbd { background: #ffffff; color: #405b4d; border-color: #ccd8ce; }
  html body .pos-shell .form-control { min-height: 44px; }
  html body .logo, html body .logo-lg, html body .user-panel > .info,
  html body .user-panel > .info > a { color: var(--m-text) !important; }
  html body .user-panel > .info > p,
  html body .navbar-header .navbar-minimalize { color: var(--m-text) !important; }
  html body .signup-footer { color: var(--m-muted) !important; }
  html body.signin input::placeholder { color: var(--m-muted) !important; opacity: 1; }
  html body .signinpanel, html body .signinpanel h4, html body .signinpanel p,
  html body .signin-info strong, html body .signin-info li { color: var(--m-text) !important; }
  html body .form-control::placeholder { color: #6d7a72; }
  html body .search-collapse, html body .select-table { box-shadow: 0 3px 16px #293a3005; }
  html body .navbar-static-side { background: #eeeee7; }
  html body .navbar-static-side, html body .sidebar-collapse { background: #eeeee7; }
  html body #side-menu li.selected > a { box-shadow: inset 3px 0 #28604d; }
  /* Login uses the existing corporate logo, with no replacement branding. */
  html body.signin { background: radial-gradient(ellipse at 20% 20%, #eaf0e9 0, #f7f7f3 65%) !important; }
  html body .signinpanel { margin: 12vh auto 0; background: #f7f7f3; border: 1px solid #ccd8ce; box-shadow: 0 24px 90px #293a3012; border-radius: 18px; padding: 44px; }
  html body .signinpanel form { background: #f7f7f3; border: 1px solid #ccd8ce; border-radius: 12px; padding: 26px; box-shadow: none; }
  html body .signinpanel .form-control { margin-top: 16px; height: 44px; }
  html body .signin-info { padding-top: 20px; }
  /* Own every button state; legacy Bootstrap/RuoYi rules otherwise mix palettes. */
  html body .btn {
    --button-bg: #ffffff; --button-ink: #253b33; --button-border: #82968a;
    --button-hover: #e4ece6;
    background-color: var(--button-bg) !important;
    background-image: none !important;
    color: var(--button-ink) !important;
    border-color: var(--button-border) !important;
    text-shadow: none;
  }
  html body .btn.btn-primary, html body .btn.btn-success {
    --button-bg: #245640; --button-ink: #ffffff; --button-border: #245640;
    --button-hover: #193f2e;
  }
  html body .btn.btn-info {
    --button-bg: #edf3f8; --button-ink: #244d6b; --button-border: #7895aa;
    --button-hover: #dce8f1;
  }
  html body .btn.btn-warning {
    --button-bg: #fff3d9; --button-ink: #704607; --button-border: #b29459;
    --button-hover: #f4e4bf;
  }
  html body .btn.btn-danger {
    --button-bg: #fbecef; --button-ink: #942d3a; --button-border: #bd7b85;
    --button-hover: #f3d8de;
  }
  html body .btn.btn-outline { --button-bg: #ffffff; }
  html body .btn.btn-primary.btn-outline, html body .btn.btn-success.btn-outline {
    --button-ink: #245640; --button-hover: #e4ece6;
  }
  html body .btn:hover, html body .btn:focus, html body .btn:active,
  html body .btn.active, html body .open > .dropdown-toggle.btn {
    background-color: var(--button-hover) !important;
    color: var(--button-ink) !important;
    border-color: var(--button-border) !important;
  }
  html body .btn:focus-visible {
    outline: 3px solid #244d6b !important; outline-offset: 3px;
  }
  html body .btn.disabled, html body .btn[disabled], html body fieldset[disabled] .btn,
  html body .btn[aria-disabled="true"] {
    background-color: #e5e9e6 !important; color: #536259 !important;
    border-color: #a3afa7 !important; opacity: 1 !important;
    box-shadow: none !important; cursor: not-allowed;
  }
  html body .btn > .fa, html body .btn > .glyphicon,
  html body .btn > span:not(.badge) { color: inherit !important; }
  html body .form-control, html body .select-list input, html body .select-list select {
    border-color: #899b8e;
  }
  @media (pointer: coarse) {
    html body .btn:not(.btn-xs), html body .select-list input, html body .select-list select { min-height: 44px; }
    html body .form-control { font-size: 16px; }
  }
  @media (max-width: 767px) {
    html body .container-div, html body .recurring-page, html body .wrapper-content { padding: 14px; }
    html body .search-collapse { padding: 14px; }
    html body .select-list li { flex: 1 1 140px; }
    html body .select-list input, html body .select-list select { width: 100%; }
    .miyi-page-heading { align-items: flex-start; flex-direction: column; }
    .miyi-steps { gap: 10px; font-size: 12px; padding: 12px; flex-wrap: wrap; }
    html body .signinpanel { margin: 30px 15px; width: auto; padding: 20px; }
    html body .category-nav { width: 96px; }
  }
  @media (prefers-reduced-motion: reduce) { html body .btn { transition: none; } }
}