:root {
        --canvas: #f7f6f1;
        --ink: #20251b;
        --muted: #7b8073;
        --soft-muted: #92978a;
        --line: #e8e5db;
        --card: #ffffff;
        --olive: #ddeb78;
        --olive-deep: #68752f;
        --olive-soft: #f1f7d9;
        --orange-soft: #fff0db;
        --orange: #a56334;
        --blue-soft: #e4eefb;
        --blue: #557397;
        --green-soft: #def0e4;
        --green: #4e775c;
        --red-soft: #fff1ef;
        --red: #a64d43;
        --shadow: 0 14px 36px rgba(75, 70, 52, 0.08);
        --shadow-small: 0 7px 20px rgba(75, 70, 52, 0.08);
        --radius: 24px;
      }

      * { box-sizing: border-box; }
      html { background: var(--canvas); }
      body {
        margin: 0;
        background: var(--canvas);
        color: var(--ink);
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        font-size: 14px;
      }
      button, input, select, textarea { font: inherit; }
      .deadline-time[title]:not([title=""]) { cursor: help; }
      button { cursor: pointer; }
      button:disabled { cursor: not-allowed; opacity: 0.55; }
      a { color: inherit; text-decoration: none; }
      .app { min-height: 100vh; display: flex; }
      .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 20;
        display: flex;
        width: 256px;
        flex-direction: column;
        background: var(--ink);
        color: #f8faef;
        padding: 22px 10px 18px;
      }
      .brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 22px; }
      .brand-mark {
        display: grid;
        width: 38px;
        height: 38px;
        place-items: center;
        justify-items: center;
        border-radius: 14px;
        background: var(--olive);
        color: var(--ink);
        font-weight: 900;
        box-shadow: 0 8px 18px rgba(221, 235, 120, 0.18);
      }
      .brand strong { display: block; font-size: 15px; letter-spacing: -0.02em; }
      .brand span { display: block; margin-top: 3px; color: rgba(248, 250, 239, 0.56); font-size: 10px; }
      .brand .brand-mark { display: grid; margin-top: 0; color: var(--ink); font-size: 16px; }
      .sidebar-label { margin: 8px 10px 8px; color: rgba(248, 250, 239, 0.4); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; }
      .nav { display: grid; gap: 5px; }
      .nav button {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 10px;
        border: 0;
        border-radius: 14px;
        background: transparent;
        color: rgba(248, 250, 239, 0.63);
        padding: 11px 12px;
        text-align: left;
        transition: 160ms ease;
      }
      .nav button:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
      .nav button.active { background: var(--olive); color: var(--ink); font-weight: 800; }
      .nav-icon { width: 20px; text-align: center; font-size: 16px; }
      .admin-app .brand, .admin-app .sidebar-label, .admin-app .side-foot { flex-shrink: 0; }
      .admin-app .nav { flex: 1; min-height: 0; overflow-y: auto; align-content: start; gap: 8px; scrollbar-width: thin; scrollbar-color: rgba(248,250,239,.2) transparent; }
      .admin-app .nav .nav-group-toggle { gap: 8px; padding: 9px 10px; font-size: 12px; font-weight: 700; color: rgba(248,250,239,.82); }
      .admin-app .nav .nav-group-toggle.current { color: var(--olive); }
      .nav-chevron { margin-left: auto; font-size: 22px; line-height: 1; transition: transform 160ms ease; }
      .nav-chevron.expanded { transform: rotate(90deg); }
      .nav-submenu { display: grid; gap: 3px; margin: 2px 0 0 16px; padding-left: 6px; border-left: 1px solid rgba(248,250,239,.12); }
      .admin-app .nav .nav-submenu button { padding: 9px 8px; gap: 8px; font-size: 12px; border-radius: 10px; }
      .side-foot { margin-top: auto; padding: 13px 10px 0; color: rgba(248, 250, 239, 0.45); font-size: 11px; line-height: 1.65; }
      .main-wrap { width: 100%; min-width: 0; margin-left: 256px; }
      .topbar {
        position: sticky;
        top: 0;
        z-index: 12;
        display: flex;
        min-height: 72px;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        border-bottom: 1px solid rgba(232, 229, 219, 0.92);
        background: rgba(255, 255, 255, 0.9);
        padding: 12px 28px;
        backdrop-filter: blur(18px);
      }
      .topbar-title small { display: block; color: var(--olive-deep); font-size: 10px; font-weight: 800; letter-spacing: 0.16em; }
      .topbar-title h1 { margin: 4px 0 0; font-size: 18px; letter-spacing: -0.03em; }
      .role-switch { display: flex; max-width: 100%; gap: 5px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #f8f7f2; padding: 4px; }
      .role-switch button { flex: 0 0 auto; border: 0; border-radius: 10px; background: transparent; color: var(--muted); padding: 8px 11px; font-size: 12px; font-weight: 700; }
      .role-switch button:hover { color: var(--ink); background: #fff; }
      .role-switch button.active { background: var(--ink); color: var(--olive); box-shadow: var(--shadow-small); }
      .content { max-width: 1420px; margin: 0 auto; padding: 28px; }
      .actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
      .btn {
        display: inline-flex;
        min-height: 38px;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: 1px solid transparent;
        border-radius: 12px;
        padding: 0 14px;
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
        flex-shrink: 0;
        transition: 160ms ease;
      }
      .btn.primary { background: var(--ink); color: #fff; }
      .btn.primary:hover { background: #3b4233; }
      .btn.soft { border-color: #dce6ae; background: var(--olive-soft); color: var(--olive-deep); }
      .btn.soft:hover { background: #e8f1be; }
      .btn.outline { border-color: var(--line); background: #fff; color: #51584a; }
      .btn.outline:hover { border-color: #cdd5a7; background: #fbfcf5; }
      .btn.danger { border-color: #f0c9c3; background: var(--red-soft); color: var(--red); }
      .btn.small { min-height: 32px; border-radius: 10px; padding: 0 10px; font-size: 11px; }
      .grid { display: grid; gap: 16px; }
      .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .stats-five { grid-template-columns:repeat(5,minmax(0,1fr)); }
      .filter-control input, .filter-control select, .topbar label select { min-width:0;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);padding:9px 11px;outline:none; }
      .card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-small); }
      .card.pad { padding: 20px; }
      .stat { position: relative; min-height: 126px; overflow: hidden; padding: 18px; }
      .admin-app .stat { border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--shadow-small); }
      .stat::after { position: absolute; top: -28px; right: -24px; width: 100px; height: 100px; border-radius: 50%; background: var(--olive-soft); content: ""; }
      .stat-label { position: relative; z-index: 1; display: block; color: var(--muted); font-size: 11px; font-weight: 800; }
      .stat-value { position: relative; z-index: 1; display: block; margin-top: 13px; font-size: 27px; font-weight: 900; letter-spacing: -0.04em; }
      .stat-note { position: relative; z-index: 1; display: block; margin-top: 7px; color: var(--soft-muted); font-size: 11px; }
      .overview-table-grid.two-col { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .overview-table-grid table { min-width:0; }
      .overview-table-grid .empty { min-width:0; }
      .topbar .actions { min-width:0;flex-wrap:wrap; }
      .two-col { grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr); }
      .section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid #efede6; }
      .section-title h3 { margin: 0; font-size: 15px; letter-spacing: -0.02em; }
      .section-title p { margin: 4px 0 0; color: var(--soft-muted); font-size: 11px; }
      .section-body { padding: 18px 20px; }
      .table-wrap { overflow-x: auto; }
      .table-actions-cell { width: 1%; white-space: nowrap; }
      .table-actions { justify-content: flex-start; align-items: center; flex-wrap: nowrap; width: max-content; }
      .table-actions .btn { min-height: 32px; }
      .batch-toolbar { margin-bottom: 14px; padding: 12px 16px; }
      .batch-toolbar .actions { justify-content: flex-start; }
      .batch-toolbar .tiny { flex: 0 0 auto; margin-right: 8px; }
      .classification-tabs { margin-bottom: 16px; }
      .settings-table { min-width: 520px; }
      .settings-table td:first-child { width: 24%; }
      .settings-table td:nth-child(2) { width: 24%; font-weight: 700; }
      .time-editor-field { padding: 12px 0; border-bottom: 1px solid var(--line); }
      .time-editor-field:last-child { border-bottom: 0; }
      .filter-actions { margin-left: auto; }
      .page-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
      .page-toolbar > .actions { margin-left: auto; }
      .nav-header { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
      .stock-inline { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
      .stock-edit { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--olive-deep); cursor: pointer; }
      .modal.detail-modal { width: min(900px, calc(100vw - 28px)); }
      .modal { min-width: 0; overflow-x: hidden; }
      .modal-body, .modal .form-grid, .modal .field { min-width: 0; }
      .modal .field > span, .modal .field-note { overflow-wrap: anywhere; }
      .modal-foot { align-items: center; margin-top: 16px; }
      table { width: 100%; min-width: 760px; border-collapse: collapse; }
      th { background: #fbfaf7; color: var(--muted); font-size: 11px; font-weight: 800; text-align: left; white-space: nowrap; }
      .timing-table { min-width: 0; }
      .timing-table th, .timing-table td { padding: 11px 8px; }
      .timing-table select, .timing-table input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 7px; font-size: 12px; }
      .timing-table td:first-child { width: 24%; }
      .timing-table td:nth-child(2) { width: 24%; }
      .timing-table td:nth-child(3) { width: 18%; }
      .detail-field-table { min-width: 0; }
      .detail-field-table td { overflow-wrap: anywhere; }
      .detail-field-table td:first-child { width: 34%; }
      th, td { border-bottom: 1px solid #f0eee8; padding: 13px 15px; vertical-align: middle; }
      td { color: #434a3d; font-size: 12px; }
      tr:last-child td { border-bottom: 0; }
      .muted { color: var(--muted); }
      .tiny { color: var(--soft-muted); font-size: 11px; line-height: 1.6; }
      .strong { color: var(--ink); font-weight: 850; }
      .badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 9px; font-size: 10px; font-weight: 800; white-space: nowrap; }
      .badge.green { background: var(--green-soft); color: var(--green); }
      .badge.olive { background: var(--olive-soft); color: var(--olive-deep); }
      .badge.orange { background: var(--orange-soft); color: var(--orange); }
      .badge.blue { background: var(--blue-soft); color: var(--blue); }
      .badge.gray { background: #efeee9; color: #73786e; }
      .badge.red { background: var(--red-soft); color: var(--red); }
      .list { display: grid; gap: 0; }
      .list-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #f0eee8; padding: 13px 0; }
      .list-row:last-child { border-bottom: 0; padding-bottom: 0; }
      .list-row:first-child { padding-top: 0; }
      .list-main { min-width: 0; }
      .list-main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
      .list-main span { display: block; margin-top: 4px; color: var(--soft-muted); font-size: 10px; }
      .empty { display: grid; min-height: 150px; place-items: center; padding: 24px; color: var(--muted); text-align: center; }
      .empty strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: 14px; }
      .notice { border: 1px solid #dce6ae; border-radius: 15px; background: #f5f9e7; color: var(--olive-deep); padding: 12px 14px; font-size: 11px; line-height: 1.7; }
      .notice.warn { border-color: #efd9b8; background: #fff8ec; color: #8b642e; }
      .notice.info { border-color: #c9d9ed; background: #f2f7fd; color: #526e92; }
      .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .product-card { display: flex; min-height: 250px; flex-direction: column; padding: 18px; }
      .product-card h3 { margin: 11px 0 0; font-size: 15px; }
      .time-summary { display: grid; gap: 5px; padding: 11px 0; border-bottom: 1px solid #f0eee8; }
      .time-summary strong { line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
      .product-card .product-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 15px; }
      .meta-box { border-radius: 13px; background: #f7f6f0; padding: 9px; }
      .meta-box span { display: block; color: var(--soft-muted); font-size: 10px; }
      .meta-box strong { display: block; margin-top: 4px; font-size: 12px; }
      .product-card .card-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 18px; }
      .switch { position: relative; display: inline-flex; width: 44px; height: 25px; flex: 0 0 auto; border: 0; border-radius: 999px; background: #d8d8d1; padding: 3px; transition: 160ms ease; }
      .switch::after { width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12); content: ""; transition: 160ms ease; }
      .switch.on { background: var(--olive-deep); }
      .switch.on::after { transform: translateX(19px); }
      .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
      .field { display: grid; gap: 6px; }
      .field.full { grid-column: 1 / -1; }
      .field[data-rule-part][hidden] { display: none; }
      .field label { color: #555c4d; font-size: 11px; font-weight: 800; }
      .field input, .field select, .field textarea { width: 100%; border: 1px solid #dedbd1; border-radius: 11px; background: #fff; color: var(--ink); outline: 0; padding: 10px 11px; font-size: 12px; }
      .field textarea { min-height: 76px; resize: vertical; }
      .field input:focus, .field select:focus, .field textarea:focus { border-color: #aec13d; box-shadow: 0 0 0 3px rgba(174, 193, 61, .16); }
      .field input[readonly] { background: #f2f3e8; color: var(--olive-deep); }
      .field-note { color: var(--soft-muted); font-size: 10px; line-height: 1.5; }
      .modal-layer { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(32, 37, 27, .42); padding: 20px; }
      .modal { width: min(680px, 100%); max-height: min(88vh, 820px); overflow: auto; border: 1px solid rgba(255,255,255,.55); border-radius: 26px; background: var(--canvas); box-shadow: 0 28px 80px rgba(32, 37, 27, .28); }
      .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.84); padding: 18px 20px; }
      .modal-head h3 { margin: 0; font-size: 16px; }
      .modal-close { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 10px; background: #f0efe9; color: #5e6458; font-size: 20px; }
      .modal-body { padding: 20px; }
      .modal-foot { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); padding-top: 16px; }
      .toast-stack { position: fixed; right: 20px; bottom: 22px; z-index: 90; display: grid; gap: 8px; width: min(360px, calc(100% - 40px)); }
      .toast { border: 1px solid #d9e4ac; border-radius: 14px; background: var(--ink); color: #fff; padding: 12px 14px; box-shadow: var(--shadow); font-size: 12px; animation: toast-in 180ms ease; }
      @keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
      .payment-layer { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 20px; background: rgba(32, 37, 27, .52); }
      .payment-modal { width: min(430px, 100%); max-height: min(88vh, 760px); overflow: auto; border: 1px solid rgba(255,255,255,.65); border-radius: 24px; background: var(--canvas); box-shadow: 0 28px 80px rgba(32, 37, 27, .3); }
      .payment-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.84); padding: 17px 20px; }
      .payment-head strong, .payment-head small { display: block; }
      .payment-head strong { font-size: 16px; }
      .payment-head small { margin-top: 4px; color: var(--soft-muted); font-size: 10px; overflow-wrap: anywhere; }
      .payment-close { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 10px; background: #f0efe9; color: #5e6458; font-size: 20px; }
      .payment-body { display: grid; justify-items: center; gap: 13px; padding: 22px 20px; text-align: center; }
      .payment-status { color: var(--ink); font-size: 13px; font-weight: 800; line-height: 1.6; }
      .payment-qr { display: grid; width: 252px; height: 252px; place-items: center; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
      .payment-qr svg { display: block; width: 240px; height: 240px; }
      .payment-open { display: inline-flex; text-decoration: none; }
      .payment-note { max-width: 330px; margin: 0; color: var(--soft-muted); font-size: 11px; line-height: 1.7; }
      .payment-error { width: 100%; border: 1px solid #f0c9c3; border-radius: 12px; background: #fff1ef; color: #a63c2c; padding: 9px 11px; font-size: 11px; line-height: 1.6; text-align: left; overflow-wrap: anywhere; }
      .payment-foot { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); padding: 14px 20px 18px; }
      .disclaimer { position: fixed; right: 18px; bottom: 8px; z-index: 10; color: rgba(75, 80, 67, .62); font-size: 10px; pointer-events: none; }
      .mobile-menu { display: none; border: 0; border-radius: 10px; background: #f0efe9; padding: 8px 10px; color: var(--ink); }
      .sidebar-close { display: none; }
      .segmented { display: inline-flex; gap: 4px; border-radius: 12px; background: #f2f1ec; padding: 4px; }
      .segmented button { border: 0; border-radius: 9px; background: transparent; color: var(--muted); padding: 8px 11px; font-size: 11px; font-weight: 800; }
      .segmented button.active { background: #fff; color: var(--ink); box-shadow: 0 3px 9px rgba(75,70,52,.07); }
      .metric-inline { display: flex; align-items: center; gap: 7px; }
      .metric-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--olive); }
      .money { color: #c45b43; font-weight: 900; }
      .nowrap { white-space: nowrap; }
      @media (max-width: 1050px) {
        .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      }
      @media (max-width: 760px) {
        .sidebar { transform: translateX(-105%); transition: transform 180ms ease; box-shadow: 16px 0 40px rgba(32,37,27,.15); }
        .sidebar.open { transform: translateX(0); }
        .sidebar-close { display: inline-flex; position: absolute; top: 12px; right: 12px; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; background: transparent; color: white; font-size: 24px; }
        .admin-app .brand { padding-right: 34px; }
        .main-wrap { margin-left: 0; }
        .topbar { min-height: 64px; padding: 10px 14px; }
        .topbar-title h1 { font-size: 15px; }
        .topbar-title small { font-size: 8px; }
        .mobile-menu { display: inline-flex; }
        .content { padding: 18px 14px 50px; }
        .actions { justify-content: flex-start; }
        .two-col { grid-template-columns: 1fr; }
        .overview-table-grid.two-col { grid-template-columns:1fr; }
        .product-grid { grid-template-columns: 1fr; }
        .form-grid { grid-template-columns: 1fr; }
        .field.full { grid-column: auto; }
        .disclaimer { right: 10px; bottom: 5px; font-size: 9px; }
      }
      @media (max-width: 470px) {
        .stats { grid-template-columns: 1fr 1fr; gap: 9px; }
        .stat { min-height: 112px; padding: 13px; }
        .stat-value { font-size: 22px; }
        .stat-note { font-size: 9px; }
        .section-title, .section-body { padding-left: 14px; padding-right: 14px; }
      }

      .filterbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
      .filter-field { display: grid; min-width: 145px; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; }
      .filter-field.keyword { min-width: 220px; flex: 1 1 220px; }
      .filter-field input, .filter-field select { min-height: 35px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); padding: 8px 10px; outline: 0; font-size: 12px; }
      .filter-field input:focus, .filter-field select:focus { border-color: #aec13d; box-shadow: 0 0 0 3px rgba(174, 193, 61, .16); }
      .chart-panel .section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
      .chart-panel .chart-heading { flex-wrap: wrap; padding: 0 0 14px; border-bottom: 0; }
      .chart-panel .segmented { max-width: 100%; flex-wrap: wrap; }

.profile-invite-actions { justify-content: flex-start; margin-top: 12px; }

.payment-layer [hidden] { display: none !important; }