* { margin: 0; padding: 0; box-sizing: border-box; } /* 配对履约事件工作台：样式仅作用于此功能项 */ #page-pairingcases .pc-help{color:var(--text3);font-size:12px;line-height:1.75;margin:7px 0 14px} #page-pairingcases .pc-id{overflow-wrap:anywhere;font-family:ui-monospace,Consolas,monospace;font-size:12px} #page-pairingcases .pc-muted{color:var(--text3);font-size:12px} #page-pairingcases .pc-alert{color:var(--danger);font-size:13px} #page-pairingcases button{cursor:pointer;transition:background .15s,border-color .15s;} #page-pairingcases button:disabled{opacity:.5;cursor:not-allowed} #page-pairingcases .list-workspace-header{flex-wrap:wrap} #page-pairingcases .pc-create-case{min-height:42px;flex-shrink:0;gap:8px;padding:10px 16px;border-radius:9px;font-family:inherit;font-size:13px;line-height:1.5;white-space:nowrap;box-shadow:0 4px 10px #24634f22} #page-pairingcases .pc-create-case svg{flex-shrink:0} #page-pairingcases .pc-create-case:active:not(:disabled){background:#3347b4;box-shadow:inset 0 2px 4px #203b3220} #page-pairingcases .pc-secondary,#page-pairingcases .pc-record-pagination button{background:var(--card);color:var(--text2);border:1px solid var(--border);border-radius:8px;padding:9px 12px;font-size:12px} #page-pairingcases .pc-secondary:hover{background:#f2f5fc;border-color:#bfcaf0} #page-pairingcases .pc-list-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:6px 0 24px} #page-pairingcases .pc-list-metrics>div{position:relative;background:linear-gradient(125deg,#f7f9ff,#fff);border:1px solid var(--border);border-radius:12px;padding:20px 22px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center} #page-pairingcases .pc-list-metrics>div:first-child{border-color:#dfe5ff;background:#f2f5ff} #page-pairingcases .pc-list-metrics span{font-size:13px;color:var(--text2);font-weight:600} #page-pairingcases .pc-list-metrics strong{grid-column:2;grid-row:1 / 3;font-size:32px;line-height:1.3;color:var(--primary);font-weight:650;font-variant-numeric:tabular-nums} #page-pairingcases .pc-list-metrics small{font-size:11px;color:var(--text3)} #page-pairingcases .pc-stage-chips{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 16px} #page-pairingcases .pc-stage-chips button{background:#f7f9fc;color:var(--text2);border:1px solid var(--border);border-radius:20px;padding:7px 12px;font-size:12px} #page-pairingcases .pc-stage-chips button.is-active{background:#eaf0ff;border-color:#bbc8fa;color:var(--primary);font-weight:650} #page-pairingcases .toolbar{padding:16px;background:#f9fafc;box-shadow:none;margin-bottom:12px} #page-pairingcases .pc-list-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--text3);font-size:11px;margin:14px 0} #page-pairingcases .pc-case-table{min-width:850px} #page-pairingcases .pc-case-table th{font-size:11px;background:#f4f7ef;padding:13px 14px} #page-pairingcases .pc-case-table td{padding:18px 14px;vertical-align:middle} #page-pairingcases .pc-case-table tr:hover td{background:#f9fbff} #page-pairingcases .pc-case-table small{display:block;font-size:11px;color:var(--text3);margin-top:6px} #page-pairingcases .pc-pet-title{font-size:15px;font-weight:650;display:block;max-width:240px;overflow-wrap:anywhere} #page-pairingcases .pc-pet-title span,#page-pairingcases .pc-heading h3>span{color:#9caac1;margin:0 5px;font-weight:400} #page-pairingcases .pc-case-sub{display:flex;align-items:center;gap:9px;margin-top:9px;color:var(--text3);font-size:10px} #page-pairingcases .pc-case-sub .platform-badge{font-size:10px} #page-pairingcases .pc-stage{display:inline-flex;align-items:center;border-radius:6px;padding:5px 8px;font-size:11px;line-height:1.35;font-weight:600;white-space:nowrap} #page-pairingcases .pc-tone-blue{color:#425dc5;background:#edf1ff} #page-pairingcases .pc-tone-amber{color:#936322;background:#fff3dc} #page-pairingcases .pc-tone-green{color:#257859;background:#eaf7ef} #page-pairingcases .pc-money-cell>strong{font-size:16px;letter-spacing:-.03em;font-variant-numeric:tabular-nums} #page-pairingcases .pc-update-time{color:var(--text3);font-size:11px;max-width:100px} #page-pairingcases .pc-attention{display:block;width:fit-content;background:#fff3df;border:1px solid #f0dfbd;padding:4px 7px;border-radius:5px;color:#92601d;font-size:11px;margin:4px 0} #page-pairingcases .pc-row-open{display:flex;align-items:center;gap:10px;background:#edf1ff;color:var(--primary);padding:8px 10px;border:1px solid #dee6ff;border-radius:7px;white-space:nowrap;font-size:12px} #page-pairingcases .pc-row-open:hover{background:#e0e8ff} #page-pairingcases .pc-empty{text-align:center;padding:48px 24px;color:var(--text3);border:1px dashed var(--border);border-radius:12px;background:#fcfdff} #page-pairingcases .pc-empty h4{font-size:15px;color:var(--text2);margin:12px 0 6px} #page-pairingcases .pc-empty p{font-size:12px;line-height:1.7;margin-bottom:18px} #page-pairingcases .pc-empty button{padding:8px 13px;border-radius:7px;border:1px solid var(--border);background:white;color:var(--primary)} #page-pairingcases .pc-empty-symbol{font-size:28px;color:#9baae0} #page-pairingcases .pc-empty-small{padding:22px 16px} #page-pairingcases .pc-empty-small p{margin-bottom:0} #page-pairingcases .pc-loading-dot{display:inline-block;width:22px;height:22px;border:2px solid #e5eafa;border-top-color:var(--primary);border-radius:50%;animation:pc-spin .8s linear infinite} #page-pairingcases .pc-detail{min-width:0} #page-pairingcases .pc-back{border:0;background:transparent;color:var(--text3);padding:5px 0;margin-bottom:18px;font-size:12px} #page-pairingcases .pc-back:hover{color:var(--primary)} #page-pairingcases .pc-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px} #page-pairingcases .pc-heading h3{font-size:30px;letter-spacing:-.035em;font-weight:650;line-height:1.4;margin:7px 0 10px} #page-pairingcases .pc-kicker{color:var(--primary);font-size:11px;letter-spacing:.08em;font-weight:600} #page-pairingcases .pc-heading-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:var(--text3);font-size:11px} #page-pairingcases .pc-heading .actions{display:flex;gap:8px;flex-wrap:wrap} #page-pairingcases .pc-progress{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:0;list-style:none;padding:22px 18px;margin-bottom:18px;background:var(--card);border:1px solid var(--border);border-radius:12px} #page-pairingcases .pc-progress li{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;color:#75849b;text-align:center;min-width:0} #page-pairingcases .pc-progress li:not(:last-child)::after{content:'';height:1px;background:#e2e7f2;width:calc(100% - 32px);position:absolute;left:calc(50% + 17px);top:15px} #page-pairingcases .pc-progress li>span{z-index:1;display:grid;place-items:center;width:30px;height:30px;border:1px solid #e1e6f1;background:#f7f9fc;border-radius:50%;font-size:12px} #page-pairingcases .pc-progress strong{font-size:11px;font-weight:500} #page-pairingcases .pc-progress .is-done{color:#2b7d61} #page-pairingcases .pc-progress .is-done>span{color:#2b7d61;border-color:#cce9dc;background:#ecf7f0} #page-pairingcases .pc-progress .is-current{color:var(--primary)} #page-pairingcases .pc-progress .is-current>span{background:var(--primary);border-color:var(--primary);color:white;box-shadow:0 0 0 4px #24634f13} #page-pairingcases .pc-notice{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border:1px solid #dfe5f8;border-radius:9px;background:#eef3ff;color:#465e91;padding:13px 16px;margin-bottom:18px;font-size:12px;line-height:1.8} #page-pairingcases .pc-notice-amber{background:#fff7e9;border-color:#ecdcbe;color:#916329} #page-pairingcases .pc-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start} #page-pairingcases .pc-detail-main{min-width:0} #page-pairingcases .pc-tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid #dce3f0;margin-bottom:20px;scrollbar-width:thin} #page-pairingcases .pc-tabs button{background:transparent;color:var(--text3);border:0;border-bottom:2px solid transparent;padding:13px 12px;white-space:nowrap;font-size:12px} #page-pairingcases .pc-tabs button.is-active{color:var(--primary);border-bottom-color:var(--primary);font-weight:650} #page-pairingcases .pc-surface{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:22px;margin-bottom:18px;min-width:0} #page-pairingcases h4{font-size:14px;font-weight:650;margin-bottom:12px} #page-pairingcases .pc-section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px;flex-wrap:wrap} #page-pairingcases .pc-section-heading h4{margin:0} #page-pairingcases .pc-section-heading>strong{font-size:13px} #page-pairingcases .pc-panel p{overflow-wrap:anywhere;line-height:1.8;font-size:12px;margin:8px 0} #page-pairingcases .pc-parties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px} #page-pairingcases .pc-party{display:flex;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:22px;min-width:0} #page-pairingcases .pc-party>div{min-width:0} #page-pairingcases .pc-party-mark{flex-shrink:0;display:grid;place-items:center;border-radius:12px;background:#eef2ff;color:#6279c6;width:42px;height:42px;font-size:18px} #page-pairingcases .pc-party:nth-child(2) .pc-party-mark{background:#fbf0f3;color:#b87890} #page-pairingcases .pc-party h4{font-size:19px;margin:3px 0 6px} #page-pairingcases .pc-party p{font-size:12px;color:var(--text2);margin:0 0 7px} #page-pairingcases .pc-party code{display:block;color:var(--text3);font-size:10px} #page-pairingcases .pc-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;padding-top:6px} #page-pairingcases .pc-info{min-width:0} #page-pairingcases .pc-info dt{font-size:11px;color:var(--text3);margin-bottom:6px} #page-pairingcases .pc-info dd{font-size:12px;overflow-wrap:anywhere;white-space:pre-wrap;line-height:1.7} #page-pairingcases .pc-milestone{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;border-bottom:1px solid #eef1f6} #page-pairingcases .pc-milestone strong{font-size:12px} #page-pairingcases .pc-milestone small{display:block;color:var(--text3);font-size:10px;margin-top:5px} #page-pairingcases .pc-confirm-pair{display:flex;flex-wrap:wrap;gap:7px} #page-pairingcases .pc-confirm-pair span{font-size:10px;white-space:nowrap;padding:4px 7px;background:#f4f6fa;border-radius:5px;color:var(--text3)} #page-pairingcases .pc-confirm-pair .is-confirmed{color:#2a7b5e;background:#eaf6ee} #page-pairingcases .pc-milestone+.pc-info-grid{margin-top:20px} #page-pairingcases pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.9;background:#f7f9fc;padding:18px;border-radius:8px;margin-top:12px;font-size:12px} #page-pairingcases summary{color:var(--primary);cursor:pointer;padding:10px 0;font-size:12px} #page-pairingcases .pc-fund-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} #page-pairingcases .pc-fund-amount{display:block;font-size:29px;color:var(--text);font-variant-numeric:tabular-nums;margin:8px 0;letter-spacing:-.04em} #page-pairingcases .pc-settlements{list-style:none} #page-pairingcases .pc-settlements li{border:1px solid #e0e7f5;border-radius:9px;padding:16px;margin:12px 0;background:#fafbfe} #page-pairingcases .pc-fund-route{display:flex;align-items:center;gap:12px;margin:10px 0;font-size:12px} #page-pairingcases .pc-fund-route>span:nth-child(2){color:#91a1c5} #page-pairingcases .pc-settlements code{color:var(--text3)} #page-pairingcases .pc-operation{position:sticky;top:22px;background:var(--card);border:1px solid #dce3f3;border-radius:12px;padding:22px;box-shadow:0 6px 28px #253d7210} #page-pairingcases .pc-role-label{font-size:10px;color:#6475aa;background:#f0f3fc;padding:4px 7px;border-radius:4px} #page-pairingcases .pc-action-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:18px} #page-pairingcases .pc-action-picker button{border:1px solid var(--border);border-radius:7px;background:#fafbfd;color:var(--text2);padding:9px 8px;text-align:left;font-size:11px;line-height:1.6} #page-pairingcases .pc-action-picker button.is-active{border-color:#acbdfa;background:#edf2ff;color:var(--primary);font-weight:600} #page-pairingcases .pc-action-block{background:#fff8eb;border-left:3px solid #d5a345;border-radius:4px;padding:10px 12px;color:#916522} #page-pairingcases .pc-form{display:grid;grid-template-columns:minmax(0,1fr);gap:13px;min-width:0} #page-pairingcases .pc-wide{grid-column:1 / -1} #page-pairingcases .pc-field{display:flex;flex-direction:column;gap:7px;min-width:0;font-size:12px} #page-pairingcases .pc-field>span{color:var(--text2);font-weight:550} #page-pairingcases .pc-field input,#page-pairingcases .pc-field select,#page-pairingcases .pc-field textarea{width:100%;min-width:0;max-width:100%;border:1px solid #dce5d9;border-radius:7px;padding:10px 11px;background:var(--card);color:var(--text);font-size:12px;line-height:1.7} #page-pairingcases .pc-field textarea{resize:vertical;min-height:96px} #page-pairingcases .pc-field [readonly],#page-pairingcases .pc-field select:disabled{background:#f4f7ef;color:var(--text2)} #page-pairingcases .pc-check{display:flex;align-items:flex-start;gap:9px;font-size:11px;line-height:1.8;color:var(--text2);background:#f6f8f2;border:1px solid var(--border);border-radius:7px;padding:12px} #page-pairingcases .pc-check input{flex:0 0 auto;margin-top:4px;accent-color:var(--primary)} #page-pairingcases .pc-form button[type=submit]{padding:12px 15px;border-radius:8px;background:var(--primary);color:white;border:0;font-size:12px;font-weight:600} #page-pairingcases .pc-operation-guide{background:#f4f7ef;border-radius:7px;padding:13px;color:var(--text2);font-size:12px;line-height:1.8} #page-pairingcases .pc-operation-guide p{font-size:11px;margin-top:5px;color:var(--text3)} #page-pairingcases .pc-operation-guide .pc-alert{color:var(--danger)} #page-pairingcases .pc-operation-footnote{border-top:1px solid var(--border);padding-top:13px;margin-top:16px;margin-bottom:0;font-size:10px} #page-pairingcases .pc-plan-preview{display:flex;flex-direction:column;gap:7px;background:#eff7f2;border:1px solid #d9eadf;border-radius:8px;padding:13px;font-size:11px;color:#4e6f5d} #page-pairingcases .pc-plan-preview strong{color:#256f50;font-size:13px} #page-pairingcases .pc-plan-preview small{font-size:10px;line-height:1.8} #page-pairingcases .pc-events{list-style:none;margin-top:18px} #page-pairingcases .pc-events>li{position:relative;border-left:1px solid #dbe3f1;padding:0 0 25px 22px;margin-left:5px} #page-pairingcases .pc-events>li:last-child{padding-bottom:6px} #page-pairingcases .pc-event-dot{position:absolute;top:5px;left:-5px;width:9px;height:9px;background:#8eaae1;border:2px solid #edf2fe;border-radius:50%} #page-pairingcases .pc-event-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px} #page-pairingcases .pc-event-heading time{font-size:10px;color:var(--text3)} #page-pairingcases .pc-record>div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px;padding:9px 0;border-bottom:1px solid var(--border);font-size:11px} #page-pairingcases .pc-record dt{color:var(--text3)} #page-pairingcases .pc-record dd{white-space:pre-wrap;overflow-wrap:anywhere} #page-pairingcases .pc-record-pagination{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-top:18px;color:var(--text3);font-size:11px} #page-pairingcases .pc-evidence-group{border-bottom:1px solid var(--border);padding:14px 0} #page-pairingcases .pc-evidence-group:last-child{border-bottom:0} #page-pairingcases .pc-evidence-grid{display:flex;gap:10px;flex-wrap:wrap;padding-top:10px} #page-pairingcases .pc-evidence-grid a{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:8px;text-decoration:none;overflow:hidden;width:110px;background:#f6f8fc} #page-pairingcases .pc-evidence-grid img{width:110px;height:96px;object-fit:cover} #page-pairingcases .pc-evidence-grid span{text-align:center;padding:7px;font-size:10px;color:var(--primary)} #page-pairingcases .pc-evidence-unavailable{display:flex;flex-direction:column;justify-content:center;align-items:center;width:110px;min-height:126px;border:1px dashed var(--border);border-radius:8px;background:#f7f9fc;font-size:11px;color:var(--text3)} #page-pairingcases .pc-text-button{border:0;background:transparent;color:var(--primary);font-size:11px;padding:5px 0} #page-pairingcases .pc-spaced-heading{margin-top:20px} @media(max-width:600px){#page-pairingcases .pc-create-case{width:100%}} @keyframes pc-spin{to{transform:rotate(360deg)}} @media(max-width:1180px){#page-pairingcases .pc-detail-grid{grid-template-columns:minmax(0,1fr) 300px;gap:16px}#page-pairingcases .pc-party{padding:16px;gap:10px}#page-pairingcases .pc-surface,#page-pairingcases .pc-operation{padding:18px}#page-pairingcases .pc-info-grid{gap:14px}#page-pairingcases .pc-milestone{flex-wrap:wrap}} @media(max-width:960px){#page-pairingcases .pc-detail-grid{grid-template-columns:minmax(0,1fr)}#page-pairingcases .pc-operation{position:static}#page-pairingcases .pc-action-picker{grid-template-columns:repeat(3,minmax(0,1fr))}#page-pairingcases .pc-list-metrics>div{padding:16px}#page-pairingcases .pc-list-metrics strong{font-size:25px}#page-pairingcases .pc-list-metrics small{max-width:130px}} @media(max-width:600px){#page-pairingcases .pc-list-metrics{grid-template-columns:minmax(0,1fr);gap:9px}#page-pairingcases .pc-list-metrics>div{padding:12px 16px}#page-pairingcases .pc-list-metrics small{max-width:none}#page-pairingcases .pc-heading{flex-direction:column;align-items:flex-start}#page-pairingcases .pc-heading h3{font-size:25px}#page-pairingcases .pc-progress{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 0;padding:18px 10px}#page-pairingcases .pc-progress li:nth-child(4)::after{display:none}#page-pairingcases .pc-parties,#page-pairingcases .pc-fund-cards,#page-pairingcases .pc-info-grid{grid-template-columns:minmax(0,1fr)}#page-pairingcases .pc-action-picker{grid-template-columns:repeat(2,minmax(0,1fr))}#page-pairingcases .pc-tabs button{padding:12px 10px}#page-pairingcases .pc-record>div{grid-template-columns:minmax(0,1fr);gap:4px}} @media(prefers-reduced-motion:reduce){#page-pairingcases .pc-loading-dot{animation:none}#page-pairingcases button{transition:none}} body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body.modal-open { overflow: hidden; } [hidden] { display: none !important; } :root { --primary: #24634f; --danger: #c4404f; --success: #287352; --warning: #95621a; --bg: #f5f6f2; --card: #fff; --border: #dfe6df; --text: #203b32; --text2: #566b60; --text1: var(--text); --text3: #61736a; --gold: #bc9557; --shadow: 0 3px 12px rgba(31, 63, 40, .025), 0 1px 2px rgba(31, 63, 40, .025); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } button, input, select, textarea { font: inherit; } input::placeholder, textarea::placeholder { color: var(--text3); opacity: 1; } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid #24634f; outline-offset: 2px; } /* Login: brand-led welcome with a lightweight, local illustration. */ .login-wrap { display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; min-height: 100vh; position: relative; background: #fafbf7; } .login-brand { position: absolute; top: 42px; left: 5vw; display: flex; align-items: center; gap: 12px; color: #f4f7eb; font-size: 22px; font-weight: 650; z-index: 1; } .login-brand img { width: 44px; height: 44px; border-radius: 14px; } .login-brand small { display: block; margin-top: 4px; font-size: 11px; color: #b4c8bb; font-weight: 400; letter-spacing: .14em; } .login-story { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding: 155px 5vw 48px; overflow: hidden; color: #f4f7eb; background: radial-gradient(ellipse at 90% 70%, #284d3f 0, transparent 65%), #122e26; } .login-overline { font-size: 11px; letter-spacing: .22em; color: #bdd2b5; } .login-story h2 { margin: 24px 0 20px; font-size: clamp(34px, 3.3vw, 58px); font-weight: 550; letter-spacing: -.045em; line-height: 1.42; } .brand-period { color: #d5e7a7; } .login-story > p { color: #b6c9bc; line-height: 1.9; font-size: 13px; } .login-platforms { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; padding-top: 25px; border-top: 1px solid #ffffff19; color: #b4c6b9; font-size: 11px; letter-spacing: .04em; } .login-brand-art { position: relative; display: grid; place-items: center; width: min(100%, 540px); height: 270px; margin-top: 25px; } .brand-orbit { position: absolute; border: 1px solid #b7d2b52b; border-radius: 50%; transform: rotate(-24deg); } .orbit-outer { width: 90%; height: 76%; } .orbit-inner { width: 65%; height: 95%; transform: rotate(27deg); border-color: #b7d2b51a; } .brand-orbit::before { content: ''; position: absolute; top: 10%; left: 18%; width: 8px; height: 8px; border-radius: 50%; background: #cce3a5; box-shadow: 0 0 0 6px #cce3a510; } .orbit-inner::before { top: auto; left: auto; bottom: 12%; right: 11%; width: 5px; height: 5px; background: #8caf96; } .brand-art-core { display: grid; place-items: center; width: 114px; height: 114px; border: 1px solid #e5eed747; border-radius: 32px; background: #c0d9b414; box-shadow: 0 22px 50px #071e2830, inset 0 1px 0 #ffffff22; transform: rotate(-9deg); } .brand-art-core img { width: 82px; height: 82px; border-radius: 24px; } .brand-art-tag { position: absolute; display: flex; align-items: center; gap: 8px; padding: 11px 16px; border: 1px solid #adc8ac30; border-radius: 30px; background: #244438; color: #dce8d6; font-size: 11px; box-shadow: 0 8px 24px #0b221c26; } .brand-art-tag i { width: 5px; height: 5px; background: #c7dca6; border-radius: 50%; } .tag-community { top: 40px; right: 7%; } .tag-service { bottom: 58px; left: 5%; } .brand-art-caption { position: absolute; bottom: 0; font-size: 8px; letter-spacing: .2em; color: #96b29f; } .login-card { width: min(400px, calc(100% - 60px)); margin: 60px auto; text-align: left; } .login-card .section-kicker { color: var(--primary); } .login-card h1 { margin: 15px 0 12px; font-size: 34px; font-weight: 600; letter-spacing: -.04em; } .login-card p { color: var(--text2); margin-bottom: 34px; font-size: 13px; line-height: 1.8; } .login-label { display: block; margin: 20px 0 9px; color: var(--text2); font-size: 12px; font-weight: 500; } .login-card input { width: 100%; height: 52px; padding: 13px 16px; border: 1px solid #d8e1d7; background: #fff; color: var(--text); border-radius: 10px; font-size: 14px; transition: border-color .18s, box-shadow .18s; } .login-card input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px #24634f0d; } .login-card .login-password { margin-top: 0; } .login-card .err { color: var(--danger); margin-top: 10px; font-size: 13px; } .login-card button { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 28px; min-height: 52px; padding: 15px 18px; border: 1px solid #164c3b; border-radius: 10px; background: var(--primary); box-shadow: 0 5px 12px #1b503319, inset 0 1px 0 #ffffff18; color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; } .login-card button::after { content: '→'; font-size: 20px; font-weight: 400; transition: transform .18s; } .login-card button:hover:not(:disabled) { background: #174c3b; } .login-card button:hover:not(:disabled)::after { transform: translateX(3px); } .login-card button:disabled { opacity: .5; cursor: not-allowed; } .login-footnote { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 27px; color: var(--text3); font-size: 11px; } .login-footnote svg { width: 15px; height: 15px; } @media (max-width: 760px) { .login-wrap { display: flex; min-height: 100vh; } .login-story { display: none; } .login-card { margin: 140px auto 50px; } .login-brand { left: 30px; top: 36px; color: var(--text); } .login-brand small { color: var(--text2); } } /* Workspace shell */ .app { display: none; min-height: 100vh; } .app.show { display: flex; } .sidebar { width: 248px; background: #17392f; color: #edf4e8; border-right: 1px solid #24483c; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; } .sidebar .logo { display: flex; align-items: center; gap: 11px; min-height: 94px; padding: 23px 21px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; } .sidebar .logo img { width: 39px; height: 39px; border-radius: 12px; } .sidebar .logo small { display: block; margin-top: 5px; color: #afc4b7; font-size: 7px; font-weight: 500; letter-spacing: .12em; } .brand-console { margin-left: auto; align-self: flex-start; margin-top: 4px; padding: 3px 6px; border: 1px solid #b7d5bd33; border-radius: 5px; color: #c3d6bb; font-size: 10px; font-weight: 400; } .sidebar .nav { flex: 1; min-height: 0; padding: 0 14px 12px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #507061 transparent; } .nav-section-label { padding: 20px 12px 9px; color: #a3beac; font-size: 10px; font-weight: 500; letter-spacing: .12em; } .sidebar .nav-link { position: relative; font-weight: 400; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 39px; margin: 3px 0; padding: 9px 12px; color: #cfddd1; font-size: 12px; text-align: left; cursor: pointer; border: 1px solid transparent; border-radius: 8px; background: transparent; } .nav-icon { width: 17px; height: 17px; flex: 0 0 17px; opacity: .8; } .nav-label { flex: 1; } .sidebar .nav-link:hover { color: #fff; background: #ffffff0d; } .sidebar .nav-link.active { color: #1b3b2d; background: #d7e7b8; border-color: #e5eecf; box-shadow: 0 3px 8px #0a241722; font-weight: 600; } .sidebar .nav-link.active .nav-icon { opacity: 1; } .sidebar-account { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin: 12px 20px 0; padding: 18px 0 7px; border-top: 1px solid #ffffff18; } .account-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid #bcd2b83d; border-radius: 11px; color: #e0ebcc; background: #ffffff0a; font-size: 13px; font-weight: 500; } .admin-identity { color: #e0eade; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; } .live-activity-status { display: flex; align-items: center; gap: 6px; padding-top: 3px; color: #b4c9ba; font-size: 10px; line-height: 1.5; } .live-activity-status.is-error { color: #ffb5af; } .live-activity-dot { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #bfd99a; } .live-activity-status.is-syncing .live-activity-dot { animation: live-activity-pulse 1s ease-in-out infinite; } .live-activity-status.is-error .live-activity-dot { background: #ffb5af; } .sidebar #refreshActivityBtn { padding: 4px 0; margin-top: 3px; border-radius: 4px; background: transparent; color: #d0dfbd; font-size: 10px; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; } .nav-badge { display: inline-block; min-width: 20px; height: 20px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; border: 0; border-radius: 6px; text-align: center; line-height: 20px; margin-left: 6px; padding: 0 6px; } .nav-badge[hidden] { display: none; } .nav-badge.is-new { animation: nav-badge-pop .42s ease-out; } @keyframes nav-badge-pop { 0% { transform: scale(.72); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } } @keyframes live-activity-pulse { 50% { opacity: .42; transform: scale(.76); } } .sidebar .logout-btn { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin: 0 18px 16px; padding: 9px 45px; background: transparent; border: 0; color: #b5cbbb; font-size: 11px; text-align: left; cursor: pointer; border-radius: 7px; } .sidebar .logout-btn:hover { color: #ffd3ca; background: #ffffff09; } .main { margin-left: 248px; min-width: 0; flex: 1; padding: 0 36px 36px; } .mobile-menu-btn { display: none; align-items: center; gap: 8px; margin-bottom: 16px; border: 1px solid var(--border); background: #fff; color: var(--text); border-radius: 8px; padding: 9px 14px; cursor: pointer; } .page { display: none; max-width: 1500px; margin-inline: auto; } .page.active { display: block; animation: workspace-enter .28s ease-out; } .workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 70px; margin: 0 -36px 30px; padding: 0 36px; background: #ffffffb3; border-bottom: 1px solid var(--border); font-size: 11px; color: var(--text2); } .workspace-breadcrumb { display: flex; align-items: center; gap: 14px; } .workspace-breadcrumb strong { color: var(--text); font-weight: 500; } .workspace-header i { font-style: normal; color: #9aab9b; } .workspace-platforms { display: flex; align-items: center; gap: 5px; } .workspace-platforms span { padding: 4px 9px; border: 1px solid #e4e9df; border-radius: 6px; color: var(--text2); font-size: 10px; background: #fafbf7; } .workspace-platforms span:first-child { color: #426a44; background: #edf3e4; border-color: #dce6ce; } .page-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; } .page-intro h2 { margin: 7px 0 8px; } .page-intro p { max-width: 900px; color: var(--text2); font-size: 13px; line-height: 1.8; } .permission-tag { display: inline-flex; padding: 6px 10px; border: 1px solid #dce5d9; border-radius: 7px; color: var(--text2); background: #fff; font-size: 11px; white-space: nowrap; } .overview-banner { margin-bottom: 26px; } .overview-banner .page-help { margin: 0; color: #566f54; font-size: 12px; } .dashboard-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; } .dashboard-heading h2 { font-size: 32px; margin: 9px 0 7px; letter-spacing: -.035em; font-weight: 600; } .dashboard-heading .section-kicker { color: #627d52; font-size: 10px; letter-spacing: .16em; } .metric-heading { display: flex; align-items: center; justify-content: space-between; grid-column: 1 / -1; gap: 16px; padding-top: 13px; color: var(--text); } .metric-heading h3 { font-size: 14px; font-weight: 600; } .metric-heading span { color: var(--text3); font-size: 11px; } .operations-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--border); border-radius: 16px; background: var(--border); overflow: hidden; } .operations-grid .stat-card { border: 0; border-radius: 0; box-shadow: none; padding: 22px 24px; background: #fff; } .operations-grid .value { font-size: 27px; } /* Metrics and chart surfaces */ .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 30px; } .stat-card { position: relative; min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); } .stat-card .label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); margin-bottom: 17px; min-height: 18px; } .stat-card .value { font-size: 37px; font-weight: 550; line-height: 1.15; color: var(--text); letter-spacing: -.045em; font-variant-numeric: tabular-nums; } .stat-card .value.value-small { font-size: 21px; line-height: 1.35; } .stat-card .sub { font-size: 11px; color: var(--text3); margin-top: 15px; line-height: 1.8; } .stat-card.stat-showcase { background: #fff; } .stat-card.stat-showcase .value { color: var(--primary); } .stat-card.stat-snack { background: #fff; } .stat-card.stat-snack .value { color: #94651b; } .trend-card { grid-column: 1 / -1; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); } .trend-card h3 { font-size: 15px; margin-bottom: 10px; } .trend-legend { display: flex; gap: 18px; justify-content: flex-end; color: var(--text2); font-size: 11px; margin-bottom: 8px; } .trend-legend span { display: inline-flex; align-items: center; gap: 6px; } .trend-legend i { width: 7px; height: 7px; border-radius: 50%; } .legend-user, .trend-user { background: var(--primary); } .legend-post, .trend-post { background: #bbd19d; } .trend-chart { height: 215px; background: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), #edf1e9 calc(25% - 1px), #edf1e9 25%); display: flex; align-items: flex-end; gap: clamp(2px, .5vw, 7px); border-bottom: 1px solid var(--border); padding: 6px 2px 0; } .trend-day { flex: 1; min-width: 4px; height: 100%; display: flex; align-items: flex-end; gap: 1px; } .trend-bar { display: block; width: 50%; min-height: 2px; border-radius: 4px 4px 0 0; transform-origin: bottom; animation: chart-enter .45s ease-out; } .empty-inline { margin: auto; color: var(--text2); font-size: 12px; align-self: center; } /* 显摆局运营 */ .showcase-admin-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0; margin-bottom: 26px; } .showcase-admin-hero h2 { margin: 7px 0 8px; color: var(--text); } .showcase-admin-hero p { max-width: 900px; color: var(--text2); font-size: 12px; line-height: 1.8; } .showcase-admin-hero button, .maintenance-card button { flex-shrink: 0; padding: 9px 16px; border: 0; border-radius: 7px; color: #fff; background: var(--primary); cursor: pointer; font-weight: 600; } .section-kicker { display: inline-block; color: var(--primary); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .showcase-kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; } .showcase-kpi { min-width: 0; padding: 16px; border-radius: 12px; background: var(--card); border: 1px solid #e5e7eb; box-shadow: 0 2px 8px rgba(0,0,0,.04); } .showcase-kpi .kpi-label { color: var(--text2); font-size: 12px; } .showcase-kpi .kpi-value { margin-top: 12px; color: #24634f; font-size: 29px; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; } .showcase-kpi .kpi-sub { margin-top: 5px; color: var(--text2); font-size: 12px; line-height: 1.4; } .showcase-kpi.kpi-alert .kpi-value { color: var(--danger); } .operation-note { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; padding: 12px 14px; border-radius: 9px; color: var(--text2); font-size: 12px; line-height: 1.55; background: #eef4e8; border: 1px solid #dce6d4; } .operation-note strong { white-space: nowrap; } .showcase-thumb { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: #edf3f2; } .topic-chip { display: inline-block; max-width: 260px; margin-bottom: 5px; padding: 3px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #17665f; background: #e4f6f2; border-radius: 10px; font-size: 12px; font-weight: 700; } .showcase-copy { max-width: 320px; color: var(--text); font-size: 14px; line-height: 1.5; white-space: normal; word-break: break-word; } .interaction-row { display: flex; gap: 10px; flex-wrap: wrap; color: var(--text2); font-size: 12px; white-space: nowrap; } .recommend-row { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; } .recommend-chip { padding: 2px 6px; border-radius: 9px; color: #6d28d9; background: #f2eaff; font-size: 12px; font-weight: 700; } .recommend-chip.home { color: #9a3412; background: #fff0e8; } .recommend-chip.pin { color: #17665f; background: #e4f6f2; } /* 徽章与零食运营 */ .feature-admin-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0; margin-bottom: 26px; } .feature-admin-hero h2 { margin: 4px 0 8px; } .feature-admin-hero p { max-width: 900px; color: var(--text2); font-size: 12px; line-height: 1.8; } .feature-admin-hero button { flex-shrink: 0; padding: 9px 16px; border: 0; border-radius: 7px; color: #fff; cursor: pointer; font-weight: 700; } .badge-admin-hero { background: transparent; } .badge-admin-hero h2 { color: var(--text); } .badge-admin-hero .section-kicker { color: var(--text2); } .badge-admin-hero button { background: var(--primary); } .snack-admin-hero { background: transparent; } .snack-admin-hero h2 { color: var(--text); } .snack-admin-hero .section-kicker { color: var(--text2); } .snack-admin-hero button { background: var(--primary); } .splash-admin-hero { background: transparent; } .splash-admin-hero h2 { color: var(--text); } .splash-admin-hero .section-kicker { color: var(--text2); } .splash-admin-hero button { background: var(--primary); } .app-splash-admin-grid { display: grid; grid-template-columns: minmax(300px, .7fr) minmax(380px, 1fr); gap: 18px; } .app-splash-config-card { min-width: 0; padding: 22px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); } .app-splash-current { display: grid; justify-items: center; gap: 14px; } .app-splash-current-state { display: flex; align-items: center; justify-self: stretch; gap: 10px; } .app-splash-state-dot { width: 10px; height: 10px; border-radius: 50%; background: #9ca3af; box-shadow: 0 0 0 4px #f1f2f4; } .app-splash-current-state.enabled .app-splash-state-dot { background: #1e9d55; box-shadow: 0 0 0 4px #e5f7ec; } .app-splash-preview { display: block; width: min(100%, 240px); aspect-ratio: 4 / 9; object-fit: cover; border: 1px solid #cfe1dd; border-radius: 14px; background: #fbf8f1; box-shadow: 0 10px 28px rgba(30,89,83,.13); } .app-splash-meta-list { display: grid; justify-self: stretch; gap: 8px; color: var(--text2); font-size: 13px; } .app-splash-meta-list span { color: var(--text); font-weight: 600; } .app-splash-upload-form { display: grid; gap: 13px; } .app-splash-upload-form > label:first-child { font-size: 13px; font-weight: 700; } .app-splash-upload-form input[type="file"] { width: 100%; padding: 10px; border: 1px dashed #cbd4f0; border-radius: 9px; background: #f6f8f2; } .app-splash-enable-row { display: flex; align-items: center; gap: 9px; color: var(--text); font-size: 14px; cursor: pointer; } .app-splash-enable-row input { width: 18px; height: 18px; accent-color: #187e75; } .app-splash-field-grid { display: grid; grid-template-columns: 1fr; gap: 11px; } .app-splash-field-grid label { display: grid; gap: 6px; color: var(--text2); font-size: 12px; font-weight: 700; } .app-splash-field-grid input { width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; color: var(--text); background: #fff; } .app-splash-upload-form code { color: #17665f; } .app-splash-upload-form .err { min-height: 20px; color: var(--danger); font-size: 13px; } .app-splash-button-row { display: flex; flex-wrap: wrap; gap: 10px; } .app-splash-button-row button { padding: 10px 18px; border: 0; border-radius: 8px; color: #fff; background: var(--primary); cursor: pointer; font-weight: 700; } .app-splash-button-row .btn-secondary { color: #17665f; background: #e4f6f2; } .app-splash-button-row button:disabled { opacity: .55; cursor: wait; } .badge-kpi { border-top: 3px solid #d2a729; } .badge-kpi .kpi-value { color: #806008; } .snack-kpi-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); } .snack-kpi { border-top: 3px solid #dc842e; } .snack-kpi .kpi-value { color: #a64b00; } .snack-kpi .kpi-unit { margin-left: 4px; font-size: 12px; font-weight: 700; color: var(--text2); } .snack-kpi-orders { border-top-color: #dc842e; } .snack-kpi-amount { border-top-color: #187e75; } .snack-kpi-amount .kpi-value { color: #187e75; } .snack-kpi-attention { border-top-color: #d6a216; } .snack-kpi-wallet { border-top-color: #8a67b5; } .snack-kpi-wallet .kpi-value { color: #725099; } .showcase-kpi .kpi-value.kpi-text { font-size: 17px; line-height: 1.35; } .catalog-panel { margin: 4px 0 26px; padding: 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.04); } .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .section-heading h3 { margin-bottom: 4px; font-size: 17px; } .section-heading p { color: var(--text2); font-size: 12px; line-height: 1.5; } .section-heading.list-heading { margin-top: 4px; } .catalog-filter { color: var(--text2); font-size: 12px; white-space: nowrap; } .catalog-filter select { margin-left: 6px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; background: #fff; } .badge-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .badge-catalog-card { min-width: 0; padding: 14px; border: 1px solid #e6e1d5; border-left-width: 4px; border-radius: 10px; background: #fffdf8; } .badge-card-top { display: flex; align-items: center; gap: 10px; } .badge-medal { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff2c3; font-size: 20px; } .badge-catalog-card h4 { font-size: 14px; } .rarity-label { color: var(--text2); font-size: 12px; } .badge-catalog-card p { min-height: 34px; margin: 10px 0; color: var(--text2); font-size: 12px; line-height: 1.45; } .badge-card-counts { display: flex; gap: 12px; padding-top: 9px; border-top: 1px solid #eee8da; color: var(--text2); font-size: 12px; } .badge-card-counts strong { color: var(--text); font-size: 15px; } .rarity-bronze { border-left-color: #b46f45; } .rarity-silver { border-left-color: #8794a6; } .rarity-gold { border-left-color: #d6a515; } .rarity-obsidian { border-left-color: #32313b; } .rarity-legend { border-left-color: #8048b8; } .badge-chip-row { display: flex; flex-wrap: wrap; gap: 4px; } .badge-name-chip { display: inline-block; padding: 3px 7px; border-radius: 9px; color: #69500b; background: #fff2c5; font-size: 12px; white-space: nowrap; } .muted { margin-top: 3px; color: var(--text2); font-size: 12px; } .environment-chip { display: inline-block; margin-top: 5px; padding: 2px 7px; border-radius: 9px; font-size: 12px; font-weight: 700; } .environment-chip.production { color: #17613a; background: #e6f6ec; } .environment-chip.sandbox { color: #714e05; background: #fff1c7; } .mono-value { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; } .order-status-stack { display: flex; flex-wrap: wrap; gap: 4px; min-width: 92px; } .snack-order-table { min-width: 1040px; } /* 数据清理与维护 */ .maintenance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; } .maintenance-card { padding: 20px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.04); } .maintenance-card h3 { margin: 5px 0 8px; font-size: 17px; } .maintenance-card p { min-height: 44px; margin-bottom: 16px; color: var(--text2); font-size: 13px; line-height: 1.55; } .maintenance-card button.danger { background: var(--danger); } .maintenance-danger { border-color: #efc0ba; background: #fffafa; } .maintenance-danger .section-kicker { color: var(--danger); } /* Table */ h2 { font-size: 28px; font-weight: 600; letter-spacing: -.035em; margin-bottom: 20px; } .toolbar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: var(--shadow); } .toolbar select, .toolbar input, .toolbar button { min-height: 40px; padding: 10px 13px; color: #435c4e; background: #fff; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; } .toolbar select:focus, .toolbar input:focus { border-color: var(--primary); } .toolbar button { background: var(--primary); color: #fff; border: none; cursor: pointer; font-weight: 600; } .toolbar button:hover:not(:disabled) { filter: brightness(.94); box-shadow: 0 3px 8px #183e2514; } .toolbar button:disabled { opacity: 0.45; cursor: not-allowed; } .toolbar button.danger { background: var(--danger); } .toolbar button.success { background: var(--success); } .toolbar .search { width: 230px; } .toolbar.dashboard-platform-toolbar { flex-shrink: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; } .dashboard-platform-toolbar select { background: #fff; min-width: 130px; } .toolbar-date-filter { display: flex; flex-direction: column; align-items: stretch; gap: 6px; color: var(--text2); font-size: 12px; white-space: nowrap; } .toolbar-date-filter input { min-width: 145px; } .pairing-analytics { margin-bottom: 24px; padding: 24px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: var(--shadow); } .pairing-analytics-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .pairing-analytics-header h3 { margin: 3px 0 6px; color: var(--text); font-size: 18px; } .pairing-analytics-header p { color: var(--text2); font-size: 13px; line-height: 1.55; } .pairing-analytics-header button { flex-shrink: 0; padding: 10px 17px; border: 0; border-radius: 8px; color: #fff; background: var(--primary); cursor: pointer; font-weight: 700; } .pairing-analytics-header button:disabled { opacity: .55; cursor: wait; } .pairing-analytics-filters { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 11px; margin-top: 17px; padding: 15px; border: 1px solid #e7ebf5; border-radius: 12px; background: #f6f8f2; } .pairing-analytics-filters label { display: grid; gap: 6px; color: var(--text2); font-size: 12px; font-weight: 700; } .pairing-analytics-filters select { min-width: 0; width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; color: var(--text); background: #fff; font-size: 13px; outline: none; } .pairing-analytics-filters select:focus { border-color: #187e75; box-shadow: 0 0 0 2px rgba(24,126,117,.11); } .pairing-analytics-status { min-height: 20px; margin: 10px 0 3px; color: var(--text2); font-size: 12px; } .pairing-analytics-status.error { color: var(--danger); font-weight: 700; } .pairing-analytics-kpis { display: grid; grid-template-columns: repeat(6, minmax(110px, 1fr)); gap: 10px; } .pairing-analytics-kpis > .loading { grid-column: 1 / -1; padding: 30px 20px; } .pairing-analytics-kpi { min-width: 0; padding: 14px; border: 1px solid #dcebe8; border-radius: 11px; background: #fff; } .pairing-analytics-kpi span { display: block; color: var(--text2); font-size: 12px; } .pairing-analytics-kpi strong { display: block; margin-top: 5px; color: #24634f; font-size: 23px; line-height: 1.1; } .pairing-analytics-kpi small { display: block; margin-top: 5px; color: var(--text2); font-size: 12px; line-height: 1.4; } .pairing-ranking { margin-top: 14px; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; } .pairing-ranking-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; border-bottom: 1px solid #edf0ef; } .pairing-ranking-heading h4 { margin: 0; color: var(--text); font-size: 15px; } .pairing-ranking-heading span { color: var(--text2); font-size: 12px; } .pairing-ranking .loading { padding: 28px 20px; } .pairing-ranking table { min-width: 720px; } .pairing-ranking th, .pairing-ranking td { padding: 10px 12px; } .pairing-rank-number { display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: var(--text2); background: #eff3f2; font-weight: 800; } .pairing-rank-number.top { color: #fff; background: #edf0fd; color: #5d6bd2; } .pairing-ranking-value { color: #24634f; font-size: 16px; font-weight: 800; } .pairing-analytics-help { margin: 10px 2px 0; color: var(--text2); font-size: 12px; line-height: 1.55; } @media (max-width: 1180px) { .pairing-analytics-filters { grid-template-columns: repeat(3, minmax(130px, 1fr)); } .pairing-analytics-kpis { grid-template-columns: repeat(3, minmax(110px, 1fr)); } } @media (max-width: 680px) { .pairing-analytics { padding: 15px; } .pairing-analytics-header { flex-direction: column; } .pairing-analytics-header button { width: 100%; } .pairing-analytics-filters { grid-template-columns: 1fr; } .pairing-analytics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pairing-ranking-heading { align-items: flex-start; flex-direction: column; } } .table-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; background: #fff; scrollbar-width: thin; scrollbar-color: #c3d2bf #f4f7ef; } table { width: 100%; min-width: 760px; border-collapse: collapse; background: var(--card); border-radius: 10px; overflow: hidden; } th { background: #f4f7ef; padding: 15px 20px; text-align: left; font-size: 13px; color: var(--text2); font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; } td { padding: 18px 20px; font-size: 13px; border-bottom: 1px solid #edf1e9; } tbody tr:hover { background: #f5f8f0; } tbody tr:last-child td { border-bottom: 0; } td img { width: 50px; height: 50px; object-fit: cover; border-radius: 9px; } td .badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; } .badge-normal { background: #eaf5f0; color: var(--success); } .badge-hidden { background: #ffebee; color: var(--danger); } .badge-pending { background: #fff4e1; color: var(--warning); } .badge-done { background: #e8f5e9; color: var(--success); } .badge-rejected { background: #ffebee; color: var(--danger); } .cat-chip { display: inline-block; background: #f2f4ed; color: var(--text2); padding: 5px 10px; border: 1px solid #e5e9dd; border-radius: 6px; margin: 3px 4px; font-size: 12px; } td .actions { display: flex; gap: 6px; flex-wrap: wrap; min-width: 170px; } th input[type="checkbox"], td input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; accent-color: var(--primary); } td .actions button { min-height: 30px; padding: 6px 10px; border: 1px solid transparent; border-radius: 7px; font-size: 12px; cursor: pointer; font-weight: 500; } td .actions .btn-pass { background: #e8f5ef; color: var(--success); } td .actions .btn-hide { background: var(--warning); color: #fff; } td .actions .btn-reject { background: #fceeea; color: var(--danger); } td .actions .btn-edit { background: #edf4e9; color: #24634f; } td .actions .btn-delete { background: #fceeea; color: var(--danger); } .actions .btn-neutral { background: #e7e9ec; color: var(--text); } .actions .btn-hot { background: #c2410c; color: #fff; } .actions .btn-cat-hot { background: #6d28d9; color: #fff; } .media-preview { border: 1px solid #24634f; background: #f0f5ed; color: #24533f; padding: 5px 8px; border-radius: 5px; cursor: pointer; } .action-large { padding: 9px 13px; border: 0; border-radius: 6px; color: #fff; cursor: pointer; font-weight: 600; } .action-large.btn-pass { background: var(--success); } .action-large.btn-reject { background: var(--danger); } .action-large.btn-edit, .btn-edit { background: #24634f; color: #fff; } .btn-edit { padding: 6px 11px; border: 0; border-radius: 5px; cursor: pointer; font-weight: 600; } .pagination { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: flex-end; } .pagination-navigation, .pagination-pages, .pagination-jump, .pagination-jump label { display: flex; align-items: center; } .pagination-navigation { gap: 8px; } .pagination-pages { gap: 6px; } .pagination button { min-height: 34px; padding: 6px 12px; border: 1px solid var(--border); background: #fff; border-radius: 6px; cursor: pointer; color: var(--text); } .pagination button:hover:not(:disabled) { background: #eff5e7; border-color: #a6bda1; } .pagination button:focus-visible, .pagination input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .pagination button:disabled { opacity: 0.3; cursor: not-allowed; } .pagination .pagination-page { min-width: 34px; padding-inline: 8px; } .pagination .pagination-page.is-active { border-color: var(--primary); background: var(--primary); color: #fff; font-weight: 700; } .pagination span, .pagination-jump label { font-size: 14px; color: var(--text2); } .pagination-ellipsis { min-width: 18px; text-align: center; } .pagination-jump { gap: 6px; } .pagination-jump label { gap: 5px; } .pagination-jump input { width: 64px; height: 34px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); text-align: center; } /* Modal */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(14,35,26,.42); backdrop-filter: blur(5px); z-index: 100; align-items: center; justify-content: center; } .modal-overlay.show { display: flex; } .modal { background: #fff; border: 1px solid #dfe7d9; border-radius: 20px; padding: 30px; width: 480px; max-height: 80vh; overflow-y: auto; box-shadow: 0 24px 80px rgba(11,32,22,.2), 0 4px 16px rgba(11,32,22,.08); } .modal h3 { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 20px; font-weight: 650; letter-spacing: -.025em; } .modal-wide { width: 680px; max-width: 95vw; } .modal-report { width: 720px; max-width: 95vw; } .modal-scroll { overflow-y: auto; } .modal-scroll-post { max-height: 60vh; } .modal-scroll-report { max-height: 65vh; } .modal-video { width: 100%; max-height: 60vh; border-radius: 8px; } .modal .btn-row.modal-footer { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); } .modal .btn-row.modal-footer-flat { margin-top: 0; } .modal .field { margin-bottom: 16px; } .modal .field label { display: block; font-size: 13px; color: var(--text2); margin-bottom: 4px; } .modal .field input, .modal .field textarea, .modal .field select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; outline: none; } .modal .field textarea { min-height: 80px; resize: vertical; } .modal .field input:focus, .modal .field textarea:focus, .modal .field select:focus { border-color: var(--primary); } .admin-price-input { display: flex; align-items: center; gap: 8px; } .admin-price-input input { flex: 1; } .admin-price-input input::placeholder { text-align: center; } .admin-price-input span { flex-shrink: 0; color: var(--text2); font-size: 14px; } .post-edit-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; } .post-edit-images { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } .post-edit-image { position: relative; width: 92px; height: 92px; border-radius: 8px; overflow: hidden; background: #f3f3f3; border: 1px solid var(--border); } .post-edit-image img { width: 100%; height: 100%; object-fit: cover; } .post-edit-image button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(0,0,0,.62); cursor: pointer; } .post-edit-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 18px 0 10px; } .post-edit-section-heading > div:first-child { display: grid; gap: 3px; } .post-edit-section-heading strong { color: var(--text1); font-size: 15px; } .post-edit-section-heading span { color: var(--text3); font-size: 12px; } .post-edit-section-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .post-edit-section-actions button { width: auto; padding: 7px 11px; font-size: 12px; } .post-edit-regions { display: grid; gap: 10px; } .post-edit-region { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: #fafcfb; } .post-edit-region.legacy { grid-template-columns: minmax(0, 1fr) auto; } .post-edit-region.nationwide { display: flex; align-items: center; justify-content: space-between; color: var(--primary); font-weight: 700; } .post-edit-region .field { margin: 0; } .post-edit-region button { width: auto; min-width: 36px; padding: 8px 10px; } .post-edit-location-empty { padding: 13px; border: 1px dashed var(--border); border-radius: 10px; color: var(--text3); font-size: 13px; text-align: center; } .post-edit-credential-groups { display: grid; gap: 12px; } .post-edit-credential-group { padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: #fafcfb; } .post-edit-credential-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; } .post-edit-credential-title strong { font-size: 13px; } .post-edit-credential-title span { color: var(--text3); font-size: 12px; } .post-edit-credential-images { display: flex; flex-wrap: wrap; gap: 9px; } .post-edit-credential-image { position: relative; width: 86px; height: 86px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: #fff; } .post-edit-credential-image img { width: 100%; height: 100%; object-fit: contain; } .post-edit-credential-image button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(0,0,0,.62); } .post-edit-credential-upload { display: grid; place-items: center; width: 86px; min-height: 86px; margin: 0; padding: 8px; border: 1px dashed var(--primary); border-radius: 8px; color: var(--primary); background: #fff; font-size: 12px; text-align: center; cursor: pointer; } .post-edit-credential-upload input { display: none; } .post-detail-credential-groups { display: grid; gap: 10px; margin: 8px 0; } .post-detail-credential-group { padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #fafcfb; } .post-detail-credential-group strong { display: block; margin-bottom: 7px; font-size: 13px; } .post-detail-credential-images { display: flex; flex-wrap: wrap; gap: 8px; } .post-detail-credential-images a { display: block; } .post-detail-credential-images img { width: 110px; height: 90px; object-fit: contain; border-radius: 7px; background: #fff; } @media (max-width: 560px) { .post-edit-field-grid { grid-template-columns: 1fr; } } @media (max-width: 700px) { .post-edit-section-heading { align-items: flex-start; flex-direction: column; } .post-edit-region { grid-template-columns: 1fr; } .post-edit-region.legacy { grid-template-columns: 1fr; } } .modal .btn-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; } .modal .btn-row button { padding: 10px 20px; border: none; border-radius: 6px; font-size: 14px; cursor: pointer; font-weight: 600; } .modal .btn-row .btn-cancel { background: #f1f4ec; color: var(--text2); } .modal .btn-row .btn-save { background: var(--primary); color: #fff; } .modal .btn-row .btn-danger { background: var(--danger); color: #fff; } .danger-summary { background: #fff3f1; border-left: 4px solid var(--danger); border-radius: 6px; padding: 10px 12px; margin-bottom: 16px; color: #6b1710; line-height: 1.5; } .confirm-message { white-space: pre-wrap; line-height: 1.6; margin-bottom: 16px; } .confirm-option { display: flex; align-items: center; gap: 9px; margin: 4px 0 16px; padding: 12px 14px; border: 1px solid rgba(231,76,60,.2); border-radius: 8px; background: rgba(231,76,60,.05); cursor: pointer; } .confirm-option[hidden] { display: none; } .confirm-option input { width: 17px; height: 17px; margin: 0; accent-color: var(--danger); } .confirm-option span { color: var(--text); font-size: 14px; } .field-help, .page-help { color: var(--text2); font-size: 13px; line-height: 1.7; } .field-help.field-error { color: var(--danger); font-weight: 600; } .page-help { margin: -8px 0 24px; } .feedback-table { min-width: 1080px; } .feedback-reply-cell { min-width: 220px; max-width: 320px; vertical-align: top; } .feedback-reply-text, .feedback-original { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; } .feedback-reply-cell small { display: block; margin-top: 6px; color: var(--text2); } .feedback-no-reply { color: var(--text2); font-size: 12px; } .feedback-original { margin: 12px 0 18px; padding: 12px 14px; max-height: 150px; overflow-y: auto; border-radius: 8px; background: #f7f8fa; border-left: 4px solid var(--primary); color: var(--text); } .feedback-reply-count { margin-top: 6px; color: var(--text2); font-size: 12px; text-align: right; } /* User Detail Modal */ .user-detail-modal { width: 860px; max-width: 95vw; max-height: 85vh; padding: 20px 24px; } .ud-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .ud-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #f0f0f0; } .ud-header-info { flex: 1; } .ud-header-info .ud-nickname { font-size: 20px; font-weight: 700; } .ud-header-info .ud-meta { font-size: 12px; color: var(--text2); margin-top: 4px; display: flex; gap: 12px; flex-wrap: wrap; } .ud-header-info .ud-meta span { white-space: nowrap; } .ud-uid, .copy-value { cursor: pointer; color: var(--primary); font-family: monospace; font-size: 12px; background: transparent; border: 0; padding: 1px 2px; } .ud-stats-row { display: flex; gap: 12px; margin-bottom: 16px; } .ud-stat { flex: 1; background: #f9f9f9; border-radius: 8px; padding: 10px; text-align: center; } .ud-stat .val { font-size: 22px; font-weight: 700; color: var(--primary); } .ud-stat .lbl { font-size: 12px; color: var(--text2); margin-top: 2px; } .ud-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 12px; } .ud-tab { padding: 8px 16px; font-size: 13px; cursor: pointer; color: var(--text2); border: 0; border-bottom: 2px solid transparent; background: transparent; margin-bottom: -2px; transition: all .2s; } .ud-tab:hover { color: var(--text); } .ud-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; } .ud-tab-content { display: none; } .ud-tab-content.active { display: block; } .ud-mini-table { width: 100%; border-collapse: collapse; font-size: 12px; } .ud-mini-table th { background: #fafafa; padding: 8px 10px; text-align: left; font-size: 12px; color: var(--text2); border-bottom: 1px solid var(--border); position: sticky; top: 0; } .ud-mini-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; } .ud-mini-table tr:hover td { background: #fafafa; } .ud-mini-table .btn-xs { padding: 2px 8px; border: none; border-radius: 3px; font-size: 12px; cursor: pointer; font-weight: 600; } .ud-scroll { max-height: 320px; overflow-y: auto; } .ud-nickname-hist { margin-top: 12px; } .ud-nickname-hist .nh-title { font-size: 12px; color: var(--text2); margin-bottom: 6px; font-weight: 600; } .ud-nickname-hist .nh-item { font-size: 12px; padding: 4px 0; border-bottom: 1px dotted var(--border); display: flex; gap: 8px; align-items: center; } .ud-nickname-hist .nh-old { color: var(--text2); text-decoration: line-through; } .ud-nickname-hist .nh-arrow { color: var(--primary); } .ud-nickname-hist .nh-new { color: var(--text); font-weight: 600; } .ud-nickname-hist .nh-time { color: var(--text2); font-size: 12px; margin-left: auto; } .ud-nickname-hist .nh-empty { color: var(--text2); font-size: 12px; } .ud-profile-actions { margin-top: 16px; padding: 14px; border: 1px solid #f0ddc5; border-radius: 8px; background: #fffaf3; display: flex; gap: 10px; align-items: center; } .ud-profile-actions-copy { flex: 1; min-width: 220px; } .ud-profile-actions-copy strong, .ud-profile-actions-copy span { display: block; } .ud-profile-actions-copy strong { font-size: 13px; color: var(--text); } .ud-profile-actions-copy span { margin-top: 3px; font-size: 12px; color: var(--text2); line-height: 1.45; } .ud-profile-actions button { padding: 8px 14px; border: none; border-radius: 6px; font-size: 13px; cursor: pointer; font-weight: 600; white-space: nowrap; } .ud-profile-actions button:disabled { cursor: not-allowed; opacity: .55; } .ud-ban-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: center; } .ud-ban-section button { padding: 8px 18px; border: none; border-radius: 6px; font-size: 13px; cursor: pointer; font-weight: 600; } .ud-ban-input { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; outline: none; } .ud-ban-input:focus { border-color: var(--primary); } .ud-ban-type { flex: 0 0 120px; } .ud-ban-hours { flex: 0 0 110px; } .ud-registered { color: var(--success); } .ud-unregistered { color: var(--warning); } .ud-row-clickable { cursor: pointer; transition: background .15s; } .ud-row-clickable:hover { background: #f5f7fa !important; } .nick-link { color: var(--primary); cursor: pointer; font-weight: 500; border: 0; background: transparent; padding: 0; text-align: left; } .nick-link:hover { text-decoration: underline; } .cleanup-result { max-width: 320px; white-space: pre-wrap; word-break: break-word; color: var(--text2); font-size: 12px; } .user-badge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: 320px; overflow-y: auto; } .user-badge-card { display: flex; gap: 10px; align-items: flex-start; padding: 11px; border: 1px solid var(--border); border-left-width: 4px; border-radius: 8px; } .user-badge-icon { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 50%; background: #fff4ce; } .user-badge-card strong { font-size: 13px; } .wallet-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .wallet-summary div { padding: 12px; border-radius: 8px; background: #fff8ef; text-align: center; border: 1px solid #f0ddc5; } .wallet-summary strong { display: block; color: #a64b00; font-size: 20px; } .wallet-summary span { display: block; margin-top: 3px; color: var(--text2); font-size: 12px; } /* Toast */ .toast { position: fixed; top: 20px; right: 20px; padding: 12px 24px; border-radius: 8px; color: #fff; font-size: 14px; z-index: 200; opacity: 0; transition: opacity .3s; } .toast.show { opacity: 1; } .trend-axis { display: flex; justify-content: space-between; margin-top: 10px; color: var(--text3); font-size: 12px; } .category-summary { grid-column: 1 / -1; padding: 17px 20px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--text2); font-size: 12px; } @media (min-width: 901px) and (max-width: 1200px) { .main { padding-inline: 24px; } .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .toast.success { background: var(--success); } .toast.error { background: var(--danger); } /* Loading */ .loading { text-align: center; padding: 60px 20px; color: var(--text2); } .spinner { display: inline-block; width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 900px) { .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 6px 0 24px rgba(0,0,0,.2); } .app.sidebar-open .sidebar { transform: translateX(0); } .main { margin-left: 0; padding: 0 18px 24px; width: 100%; } .workspace-header { min-height: 60px; margin-bottom: 18px; } .mobile-menu-btn { display: inline-flex; } .stats-grid, .operations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .showcase-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .snack-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .app-splash-admin-grid { grid-template-columns: 1fr; } .toolbar { align-items: stretch; } .toolbar select, .toolbar input, .toolbar button, .toolbar .search { width: 100%; } .toolbar-date-filter { width: 100%; } } @media (max-width: 560px) { .login-card { width: calc(100% - 24px); padding: 28px 22px; } .main { padding: 0 14px 20px; } .dashboard-heading h2 { font-size: 26px; } .dashboard-heading { align-items: flex-start; flex-direction: column; margin-bottom: 20px; } .toolbar.dashboard-platform-toolbar { width: 100%; } .metric-heading { align-items: flex-start; } .metric-heading span { max-width: 50%; text-align: right; } .stats-grid, .operations-grid { grid-template-columns: 1fr; } .showcase-admin-hero { align-items: stretch; flex-direction: column; padding: 18px; } .showcase-admin-hero button { width: 100%; } .feature-admin-hero { align-items: stretch; flex-direction: column; padding: 18px; } .feature-admin-hero button { width: 100%; } .showcase-kpi-grid, .maintenance-grid { grid-template-columns: 1fr; } .badge-catalog-grid, .user-badge-grid { grid-template-columns: 1fr; } .section-heading { align-items: stretch; flex-direction: column; } .wallet-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .operation-note { flex-direction: column; gap: 4px; } .modal { width: calc(100vw - 24px) !important; max-width: none !important; padding: 22px 18px; max-height: 90vh; } .ud-stats-row { display: grid; grid-template-columns: repeat(2, 1fr); } .ud-tabs { overflow-x: auto; } .ud-tab { white-space: nowrap; } .ud-profile-actions { align-items: stretch; flex-direction: column; } .ud-profile-actions-copy { min-width: 0; } .ud-ban-section { align-items: stretch; flex-direction: column; } .ud-ban-type, .ud-ban-hours { flex-basis: auto; } .toast { left: 12px; right: 12px; top: 12px; text-align: center; } .pagination { align-items: stretch; } .pagination-navigation { width: 100%; justify-content: center; } .pagination-direction { flex: 0 1 auto; } .pagination-pages { min-width: 0; flex: 1 1 auto; overflow-x: auto; padding: 2px; } .pagination-summary { width: 100%; text-align: center; } } /* 步行街统一管理 */ .walk-admin { max-width: 1560px; margin: 0 auto; } .walk-admin-header { display: flex; align-items: flex-start; flex-direction: column; justify-content: space-between; gap: 24px; margin-bottom: 26px; padding: 0; } .walk-admin-heading h2 { margin: 5px 0 6px; color: var(--text); font-size: 28px; } .walk-admin-heading p { color: var(--text2); font-size: 12px; } .walk-admin-tabs { display: flex; gap: 5px; padding: 4px; border-radius: 11px; background: #eaf0f9; } .walk-admin-tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 15px; border: 0; border-radius: 8px; color: var(--text2); background: transparent; cursor: pointer; font-size: 12px; font-weight: 800; transition: color .16s, background .16s, box-shadow .16s; } .walk-admin-tab:hover { color: #225f57; } .walk-admin-tab.active { color: var(--primary); background: #fff; box-shadow: 0 2px 8px #24387210; } .walk-admin-tab-badge { min-width: 19px; padding: 2px 5px; border-radius: 999px; color: #fff; background: #b85d45; font-size: 12px; line-height: 15px; text-align: center; } .walk-upgrade-controls { margin-bottom: 18px; padding: 20px 22px; border: 1px solid #dfe7e4; border-radius: 16px; background: #fff; box-shadow: 0 6px 22px rgba(29,62,58,.05); } .walk-upgrade-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; } .walk-upgrade-heading h3 { margin: 4px 0 5px; color: #203330; font-size: 18px; } .walk-upgrade-heading p { color: var(--text2); font-size: 12px; line-height: 1.6; } .walk-upgrade-access { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; color: #256057; background: #e9f5f2; font-size: 12px; font-weight: 800; } .walk-upgrade-grid { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: 11px; } .walk-upgrade-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 14px 15px; border: 1px solid #e2e9e7; border-radius: 12px; background: #f9fbfa; cursor: pointer; } .walk-upgrade-copy { display: grid; gap: 4px; min-width: 0; } .walk-upgrade-copy strong { overflow: hidden; color: #2a403c; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .walk-upgrade-copy small { color: var(--text2); font-size: 12px; font-weight: 800; } .walk-upgrade-copy small.is-upgrading { color: #b65a45; } .walk-switch { position: relative; flex: 0 0 auto; width: 42px; height: 24px; } .walk-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; } .walk-switch span { position: absolute; inset: 0; border-radius: 999px; background: #ccd6d3; transition: background .18s, opacity .18s; } .walk-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(26,54,49,.2); transition: transform .18s; } .walk-switch input:checked + span { background: #b65a45; } .walk-switch input:checked + span::after { transform: translateX(18px); } .walk-switch input:focus-visible + span { outline: 3px solid rgba(47,118,108,.2); outline-offset: 2px; } .walk-switch input:disabled + span { cursor: wait; opacity: .58; } .walk-upgrade-controls .field-error { min-height: 0; margin-top: 10px; } .walk-admin-panel[hidden] { display: none !important; } .walk-admin .promotion-admin { max-width: none; margin: 0; } /* 商家及个人付费推广 */ .promotion-admin { max-width: 1560px; margin: 0 auto; } .promotion-hero { position: relative; display: grid; grid-template-columns: minmax(420px, 1fr) auto; align-items: center; gap: 42px; margin-bottom: 14px; padding: 30px 34px; overflow: hidden; border: 1px solid #2b3b69; border-radius: 12px; color: #f5fffc; background: linear-gradient(120deg, #192747, #354c81); box-shadow: 0 16px 36px rgba(24,61,57,.16); } .promotion-hero::after { content: ''; position: absolute; right: -80px; bottom: -150px; width: 330px; height: 330px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 48px rgba(255,255,255,.025), 0 0 0 96px rgba(255,255,255,.018); } .promotion-hero-copy { position: relative; z-index: 1; min-width: 0; } .promotion-eyebrow { color: #d8bc78; font-size: 12px; font-weight: 800; letter-spacing: .18em; } .promotion-title-row { display: flex; align-items: center; gap: 13px; margin: 9px 0 10px; } .promotion-title-row h2 { margin: 0; color: #fff; font-size: 28px; letter-spacing: .02em; } .promotion-hero-mark { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(242,209,137,.45); border-radius: 11px; color: #f4d48d; background: rgba(255,255,255,.08); font-size: 17px; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); } .promotion-hero-copy p { max-width: 700px; color: rgba(239,251,248,.75); font-size: 13px; line-height: 1.75; } .promotion-flow { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; } .promotion-flow div { display: grid; gap: 6px; min-width: 82px; padding: 12px 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background: rgba(255,255,255,.065); backdrop-filter: blur(8px); } .promotion-flow span { color: #d8bc78; font-size: 12px; font-weight: 800; letter-spacing: .08em; } .promotion-flow strong { color: #f7fffd; font-size: 12px; white-space: nowrap; } .promotion-flow i { width: 18px; height: 1px; background: rgba(216,188,120,.55); } .promotion-risk-note { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; padding: 10px 14px; border: 1px solid #eadfca; border-radius: 10px; color: var(--text2); background: #fffcf5; font-size: 12px; line-height: 1.55; } .promotion-risk-note span { flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; color: #815d19; background: #f6e8c9; font-size: 12px; font-weight: 800; } .promotion-risk-note p { margin: 0; } .promotion-plan-panel, .promotion-application-panel, .promotion-fee-section { margin-bottom: 20px; padding: 24px; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: var(--shadow); } .promotion-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px; } .promotion-section-heading h3 { margin: 4px 0 5px; color: #203330; font-size: 19px; } .promotion-section-heading p { max-width: 760px; color: var(--text2); font-size: 12px; line-height: 1.6; } .promotion-section-kicker { color: #9a742b; font-size: 12px; font-weight: 800; letter-spacing: .12em; } .promotion-access-chip { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; color: #256057; background: #e9f5f2; font-size: 12px; font-weight: 700; } .promotion-plan-workspace { display: grid; grid-template-columns: minmax(330px, .72fr) minmax(0, 1.28fr); gap: 20px; align-items: start; } .promotion-exposure-editor { margin-bottom: 20px; padding: 17px 18px; border: 1px solid #eadfca; border-radius: 14px; background: #fffcf5; } .promotion-exposure-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .promotion-exposure-heading span { color: #624e29; font-size: 13px; font-weight: 800; } .promotion-exposure-heading p { margin-top: 4px; color: var(--text2); font-size: 12px; } .promotion-exposure-heading strong { padding: 4px 9px; border-radius: 999px; color: #72571f; background: #f4e5c3; font-size: 12px; } .promotion-exposure-grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)) auto; gap: 11px; align-items: end; margin-top: 14px; } .promotion-exposure-grid > button { min-height: 42px; padding: 0 16px; border: 0; border-radius: 9px; cursor: pointer; font-size: 12px; font-weight: 800; } .promotion-exposure-editor .field-error { min-height: 0; margin-top: 8px; } .promotion-plan-editor { min-width: 0; padding: 20px; border: 1px solid #dce7e4; border-radius: 14px; background: #f7faf9; } .promotion-editor-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 18px; } .promotion-editor-heading > div { display: grid; gap: 3px; } .promotion-editor-heading span { color: #9a742b; font-size: 12px; font-weight: 800; letter-spacing: .08em; } .promotion-editor-heading h4 { color: #263a37; font-size: 16px; } .promotion-editor-heading small { color: var(--text2); font-size: 12px; text-align: right; } .promotion-plan-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .promotion-field { display: grid; gap: 7px; min-width: 0; } .promotion-field > span { color: #53615f; font-size: 12px; font-weight: 700; } .promotion-plan-description, .promotion-plan-actions { grid-column: 1 / -1; } .promotion-field input, .promotion-field select, .promotion-field textarea { width: 100%; min-width: 0; border: 1px solid #ccd8d5; border-radius: 9px; color: #243532; background: #fff; outline: none; transition: border-color .18s, box-shadow .18s, background .18s; } .promotion-field input, .promotion-field select { height: 42px; padding: 0 12px; } .promotion-field textarea { min-height: 78px; padding: 11px 12px; resize: vertical; line-height: 1.55; } .promotion-field input:hover, .promotion-field select:hover, .promotion-field textarea:hover { border-color: #aebfbb; } .promotion-field input:focus, .promotion-field select:focus, .promotion-field textarea:focus { border-color: #2f766c; box-shadow: 0 0 0 3px rgba(47,118,108,.12); background: #fff; } .promotion-input-unit { display: flex; align-items: center; height: 42px; overflow: hidden; border: 1px solid #ccd8d5; border-radius: 9px; background: #fff; transition: border-color .18s, box-shadow .18s; } .promotion-input-unit:focus-within { border-color: #2f766c; box-shadow: 0 0 0 3px rgba(47,118,108,.12); } .promotion-input-unit input { height: 40px; border: 0; border-radius: 0; box-shadow: none !important; } .promotion-input-unit em { flex: 0 0 auto; padding: 0 12px; color: var(--text2); font-size: 12px; font-style: normal; } .promotion-input-unit:not(.promotion-price-input) em { border-left: 1px solid #e0e6e4; } .promotion-price-input em { padding-right: 0; color: var(--text2); font-weight: 800; } .promotion-plan-actions { display: flex; gap: 9px; padding-top: 2px; } .promotion-plan-actions button, .promotion-refresh-btn { min-height: 40px; padding: 0 17px; border: 0; border-radius: 9px; cursor: pointer; font-size: 12px; font-weight: 800; transition: transform .16s, box-shadow .16s, background .16s; } .promotion-plan-actions button:hover, .promotion-refresh-btn:hover { transform: translateY(-1px); } .promotion-primary-btn { color: #fff; background: var(--primary); box-shadow: 0 5px 12px rgba(34,95,87,.18); } .promotion-primary-btn:hover { background: #194e47; } .promotion-secondary-btn { color: #566360; background: #e9eeec; } .promotion-secondary-btn:hover { background: #dfe7e4; } .promotion-plan-editor .field-error { min-height: 18px; margin-top: 10px; } .promotion-plan-list { min-width: 0; } .promotion-list-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 12px; } .promotion-list-heading > div { display: flex; align-items: baseline; gap: 9px; } .promotion-list-heading span { color: var(--text2); font-size: 12px; font-weight: 700; } .promotion-list-heading strong { color: #9a742b; font-size: 12px; } .promotion-list-heading p { color: var(--text2); font-size: 12px; } .promotion-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(250px, 1fr)); gap: 12px; } .promotion-plan-card { display: grid; gap: 13px; min-width: 0; padding: 16px; border: 1px solid #dfe7e4; border-radius: 13px; background: #fff; box-shadow: 0 3px 12px rgba(34,67,63,.045); } .promotion-plan-card.is-disabled { opacity: .72; background: #fafbfb; } .promotion-plan-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .promotion-plan-category { max-width: 70%; padding: 4px 8px; overflow: hidden; border-radius: 999px; color: #346158; background: #edf6f3; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; } .promotion-plan-state { display: inline-flex; align-items: center; gap: 5px; color: var(--text2); font-size: 12px; font-weight: 800; } .promotion-plan-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #36a66a; box-shadow: 0 0 0 3px #e6f6ec; } .promotion-plan-state.off { color: var(--text2); } .promotion-plan-state.off::before { background: #ad7b74; box-shadow: 0 0 0 3px #f5e9e7; } .promotion-plan-card h4 { overflow: hidden; color: #243532; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; } .promotion-plan-card-copy p { min-height: 34px; margin-top: 4px; color: var(--text2); font-size: 12px; line-height: 1.55; } .promotion-plan-metrics { display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; border: 1px solid #edf0ef; border-radius: 10px; background: #fafcfb; } .promotion-plan-metrics div { display: grid; gap: 3px; padding: 10px 11px; } .promotion-plan-metrics div + div { border-left: 1px solid #e8edeb; } .promotion-plan-metrics span { color: var(--text2); font-size: 12px; } .promotion-plan-metrics strong { color: #2e4541; font-size: 15px; } .promotion-plan-metrics .promotion-price { color: #986c1d; } .promotion-plan-card-actions { display: flex; justify-content: flex-end; gap: 7px; padding-top: 1px; } .promotion-plan-card-actions button { padding: 7px 11px; border: 0; border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 800; } .promotion-plan-card-actions .btn-edit { color: #255e56; background: #e8f3f0; } .promotion-plan-card-actions .btn-hide { color: #8b520b; background: #fff0d8; } .promotion-plan-card-actions .btn-pass { color: #17613a; background: #e4f4ea; } .promotion-empty-state { display: grid; place-items: center; min-height: 180px; padding: 24px; border: 1px dashed #cddbd7; border-radius: 13px; color: var(--text2); background: #fafcfb; text-align: center; } .promotion-empty-state strong { color: #344b47; font-size: 14px; } .promotion-empty-state p { max-width: 360px; margin-top: 6px; font-size: 12px; line-height: 1.6; } .promotion-application-panel { padding-bottom: 20px; } .promotion-application-heading { align-items: flex-end; margin-bottom: 16px; } .promotion-application-heading > strong { color: #9a742b; font-size: 12px; } .promotion-filterbar { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 16px; padding: 13px; border: 1px solid #e4e9e7; border-radius: 11px; background: #f8faf9; } .promotion-filterbar label { display: grid; gap: 5px; } .promotion-filterbar label span { color: var(--text2); font-size: 12px; font-weight: 700; } .promotion-filterbar select { min-width: 180px; height: 38px; padding: 0 34px 0 11px; border: 1px solid #d2dcda; border-radius: 8px; color: #354542; background: #fff; outline: none; } .promotion-filterbar select:focus { border-color: #2f766c; box-shadow: 0 0 0 3px rgba(47,118,108,.1); } .promotion-refresh-btn { margin-left: auto; min-height: 38px; color: #fff; background: var(--primary); } .promotion-application-panel .table-scroll { border: 1px solid #e4e9e7; box-shadow: none; } .promotion-application-panel table { border-radius: 0; } .promotion-application-panel th { color: var(--text2); background: #f8faf9; } .promotion-application-panel td { border-color: #edf0ef; } .promotion-table { min-width: 1180px; } .promotion-content-cell { display: flex; align-items: flex-start; gap: 10px; min-width: 230px; } .promotion-content-cell img { width: 58px; height: 58px; flex: 0 0 58px; border-radius: 10px; object-fit: cover; } .promotion-content-cell small { display: block; margin-bottom: 3px; color: var(--text2); } .promotion-content-cell strong { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .promotion-content-cell p { max-width: 240px; margin: 5px 0 0; overflow: hidden; color: var(--text2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .promotion-duration { color: #8a621a; font-weight: 700; } .promotion-duration span { color: #75500c; font-variant-numeric: tabular-nums; } .promotion-application-panel .action-btns button { padding: 7px 10px; border: 0; border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 800; } .promotion-application-panel .action-btns .btn-pass { color: #fff; background: var(--primary); } .promotion-application-panel .action-btns .btn-danger { color: #fff; background: var(--danger); } .promotion-fee-admin { min-width: 0; } .promotion-fee-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 14px; padding: 26px 28px; border: 1px solid #d7e4e0; border-radius: 18px; background: linear-gradient(135deg, #f6fbf9 0%, #fffaf0 100%); box-shadow: 0 8px 26px rgba(29,62,58,.06); } .promotion-fee-hero h2 { margin: 6px 0 7px; color: #203330; font-size: 24px; } .promotion-fee-hero p { max-width: 780px; color: var(--text2); font-size: 12px; line-height: 1.65; } .promotion-fee-filterbar { display: flex; align-items: flex-end; gap: 11px; margin-bottom: 10px; padding: 16px 18px; border: 1px solid #e0e6e4; border-radius: 14px; background: #fff; } .promotion-fee-filterbar label { display: grid; gap: 6px; } .promotion-fee-filterbar label span { color: var(--text2); font-size: 12px; font-weight: 800; } .promotion-fee-filterbar input, .promotion-fee-filterbar select { min-width: 170px; height: 40px; padding: 0 11px; border: 1px solid #d2dcda; border-radius: 8px; color: #354542; background: #fff; outline: none; } .promotion-fee-filterbar input:focus, .promotion-fee-filterbar select:focus { border-color: #2f766c; box-shadow: 0 0 0 3px rgba(47,118,108,.1); } .promotion-fee-filterbar button { min-height: 40px; margin-left: auto; padding: 0 18px; border: 0; border-radius: 9px; cursor: pointer; font-size: 12px; font-weight: 800; } .promotion-fee-filterbar button:disabled { cursor: wait; opacity: .62; } .promotion-fee-status { min-height: 18px; margin: 0 2px 13px; color: var(--text2); font-size: 12px; } .promotion-fee-status.error { color: var(--danger); } .promotion-fee-status.warning { color: #a46712; } .promotion-fee-kpis { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; } .promotion-fee-kpis > .loading { grid-column: 1 / -1; } .promotion-fee-kpi { min-width: 0; padding: 18px; border: 1px solid #e0e7e5; border-radius: 14px; background: #fff; box-shadow: 0 5px 18px rgba(29,62,58,.045); } .promotion-fee-kpi span { display: block; color: var(--text2); font-size: 12px; font-weight: 800; letter-spacing: .04em; } .promotion-fee-kpi strong { display: block; margin-top: 8px; overflow: hidden; color: #24413c; font-size: 24px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } .promotion-fee-kpi small { display: block; margin-top: 6px; color: var(--text2); font-size: 12px; line-height: 1.45; } .promotion-fee-kpi.primary { border-color: #bcd8d1; background: linear-gradient(145deg, #f4fbf8, #fff); } .promotion-fee-kpi.primary strong { color: #1f695d; } .promotion-fee-kpi.refund strong { color: var(--text2); } .promotion-fee-kpi.net strong.is-negative { color: var(--danger); } .promotion-fee-section { min-width: 0; } .promotion-fee-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; } .promotion-fee-section-heading span { color: #9a742b; font-size: 12px; font-weight: 800; letter-spacing: .12em; } .promotion-fee-section-heading h3 { margin: 4px 0 0; color: #203330; font-size: 18px; } .promotion-fee-section-heading p { max-width: 580px; color: var(--text2); font-size: 12px; line-height: 1.5; text-align: right; } .promotion-fee-table { min-width: 980px; } .promotion-fee-table th { color: var(--text2); background: #f8faf9; } .promotion-fee-table td { border-color: #edf0ef; font-variant-numeric: tabular-nums; } .promotion-fee-money-positive { color: #246758; font-weight: 800; } .promotion-fee-money-negative { color: var(--danger); font-weight: 800; } .promotion-fee-breakdown { display: grid; gap: 3px; min-width: 160px; } .promotion-fee-breakdown small { color: var(--text2); } .promotion-review-summary { max-height: min(58vh, 620px); margin-bottom: 14px; padding: 12px; overflow: auto; border-radius: 10px; background: #f7f9fb; color: var(--text2); font-size: 13px; line-height: 1.55; } .promotion-review-summary p { margin: 7px 0; overflow-wrap: anywhere; } .promotion-review-meta { margin-bottom: 14px; padding: 12px 14px; border: 1px solid #e4e9ee; border-radius: 12px; background: #fff; } .promotion-structured-content { margin: 12px 0; overflow: hidden; border: 1px solid #e3e8ed; border-radius: 14px; background: #fff; } .promotion-structured-heading { padding: 14px 16px; border-bottom: 1px solid #edf0f2; background: linear-gradient(135deg, #fff8ef, #fff); } .promotion-structured-heading span { color: #a85a18; font-size: 12px; font-weight: 700; } .promotion-structured-heading h3 { margin: 4px 0 0; color: var(--text1); font-size: 18px; } .promotion-structured-section { padding: 13px 16px; border-top: 1px solid #edf0f2; } .promotion-structured-section:first-of-type { border-top: 0; } .promotion-structured-section h4 { margin: 0 0 10px; color: var(--text1); font-size: 14px; } .promotion-structured-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; } .promotion-structured-field { min-width: 0; } .promotion-structured-field span { display: block; margin-bottom: 2px; color: var(--text3); font-size: 12px; } .promotion-structured-field strong { display: block; color: var(--text1); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; white-space: pre-wrap; } .promotion-review-media { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .promotion-review-media img { width: 100%; aspect-ratio: 1; border-radius: 9px; object-fit: cover; } .promotion-structured-fallback { padding: 14px; border-radius: 10px; background: #fff; white-space: pre-wrap; } .promotion-edit-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 16px 0 10px; } .promotion-edit-heading strong { color: var(--text1); font-size: 15px; } .promotion-edit-heading span { color: var(--text3); font-size: 12px; } #postEditPromotionFields .field.is-wide { grid-column: 1 / -1; } @media (max-width: 680px) { .promotion-structured-grid { grid-template-columns: 1fr; } .promotion-review-media { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1240px) { .walk-upgrade-grid { grid-template-columns: repeat(2, minmax(170px, 1fr)); } .promotion-hero { grid-template-columns: 1fr; gap: 24px; } .promotion-flow { justify-content: space-between; } .promotion-flow div { flex: 1; } .promotion-plan-workspace { grid-template-columns: 1fr; } .promotion-plan-editor { max-width: none; } .promotion-exposure-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); } .promotion-exposure-grid > button { grid-column: 1 / -1; } .promotion-fee-kpis { grid-template-columns: repeat(2, minmax(170px, 1fr)); } } @media (max-width: 760px) { .walk-admin-header { align-items: stretch; flex-direction: column; padding: 18px; } .walk-admin-tabs { width: 100%; overflow-x: auto; } .walk-admin-tab { flex: 1 0 auto; } .promotion-hero { padding: 24px; border-radius: 16px; } .promotion-flow { display: grid; grid-template-columns: repeat(2, 1fr); } .promotion-flow i { display: none; } .promotion-plan-panel, .promotion-application-panel, .promotion-fee-section { padding: 18px; border-radius: 14px; } .promotion-section-heading, .promotion-list-heading { align-items: flex-start; flex-direction: column; gap: 10px; } .promotion-plan-grid { grid-template-columns: 1fr; } .promotion-filterbar { align-items: stretch; flex-direction: column; } .promotion-filterbar select { width: 100%; } .promotion-refresh-btn { width: 100%; margin-left: 0; } .promotion-fee-hero, .promotion-fee-section-heading { align-items: flex-start; flex-direction: column; } .promotion-fee-section-heading p { text-align: left; } .promotion-fee-filterbar { align-items: stretch; flex-direction: column; } .promotion-fee-filterbar input, .promotion-fee-filterbar select, .promotion-fee-filterbar button { width: 100%; } .promotion-fee-filterbar button { margin-left: 0; } } @media (max-width: 520px) { .walk-admin-tabs { gap: 3px; overflow: visible; } .walk-admin-tab { min-width: 0; flex: 1 1 0; padding: 0 6px; font-size: 12px; white-space: nowrap; } .walk-upgrade-heading { align-items: stretch; flex-direction: column; } .walk-upgrade-access { align-self: flex-start; } .walk-upgrade-grid { grid-template-columns: 1fr; } .promotion-title-row h2 { font-size: 24px; } .promotion-risk-note { align-items: flex-start; } .promotion-plan-form { grid-template-columns: 1fr; } .promotion-plan-description, .promotion-plan-actions { grid-column: auto; } .promotion-plan-actions { flex-direction: column; } .promotion-plan-actions button { width: 100%; } .promotion-editor-heading { align-items: flex-start; flex-direction: column; } .promotion-editor-heading small { text-align: left; } .promotion-exposure-grid { grid-template-columns: 1fr; } .promotion-exposure-grid > button { grid-column: auto; } .promotion-fee-kpis { grid-template-columns: 1fr; } } /* Shared list and analytics workspaces */ .filter-field { display: grid; align-content: start; gap: 6px; min-width: 125px; } .filter-field label { color: var(--text2); font-size: 11px; font-weight: 500; } .filter-field select, .filter-field input { width: 100%; } .list-workspace { padding: 0 0 16px; margin-bottom: 24px; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: #fff; box-shadow: var(--shadow); } .list-workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px 0; } .list-workspace-header h3 { font-size: 14px; font-weight: 600; } .list-workspace-header > span { color: var(--text3); font-size: 12px; } .list-workspace .toolbar { margin: 0; padding: 17px 22px 20px; border: 0; border-radius: 0; border-bottom: 1px solid var(--border); } .list-workspace .table-scroll { border: 0; border-radius: 0; box-shadow: none; } .list-workspace .pagination { padding: 0 22px; } .list-workspace .loading { border: 0; background: #fff; } .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; border-bottom: 1px solid var(--border); } .panel-heading h3 { font-size: 15px; font-weight: 600; line-height: 1.4; } .panel-heading p { margin-top: 5px; font-size: 13px; line-height: 1.65; color: var(--text2); } .primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 38px; padding: 9px 15px; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; } .primary-button { color: #fff; background: var(--primary); box-shadow: 0 3px 8px #24634f1a; } .primary-button:hover { background: #3b50c4; } .primary-button:disabled { opacity: .5; cursor: wait; } .secondary-button { border-color: #dce5d9; background: #fff; color: var(--text2); } .secondary-button:hover { background: #f3f7ee; color: var(--primary); } .dashboard-insights { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(270px, 1fr); grid-column: 1 / -1; gap: 20px; } .dashboard-insights .trend-card { grid-column: auto; padding: 0; overflow: hidden; } .trend-plot { padding: 18px 24px 22px; } .trend-card .panel-heading h3 { margin: 0; } .trend-card .trend-legend { margin: 0; justify-content: flex-start; } .queue-card { min-width: 0; border: 1px solid var(--border); border-radius: 16px; background: #fff; overflow: hidden; } .queue-list { padding: 8px 16px; } .queue-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 17px 9px; background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 8px; cursor: pointer; text-align: left; } .queue-row:last-child { border-bottom: 0; } .queue-row:hover .queue-copy strong { color: var(--primary); } .queue-copy { display: grid; gap: 4px; } .queue-copy strong { font-size: 12px; font-weight: 500; color: #435c4e; } .queue-copy small { font-size: 12px; color: var(--text3); } .queue-number { display: flex; align-items: center; gap: 12px; color: var(--text2); font-size: 12px; } .queue-number b { color: #24634f; font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; } .dashboard-kpi-symbol { display: grid; place-items: center; width: 32px; height: 32px; color: #527148; background: #edf3e6; border: 1px solid #e1e9d6; border-radius: 10px; font-size: 16px; } .stats-grid > .loading { grid-column: 1 / -1; } .category-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .category-summary strong { color: var(--text); font-weight: 500; } /* Notification composer, live preview and delivery ledger */ .notification-channels { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; padding: 16px 20px; border: 1px solid #dbe6d4; border-radius: 10px; background: #edf3e6; } .channel-symbol { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 35px; border: 1px solid #dbe5d1; border-radius: 9px; background: #fff; color: #4c7860; font-size: 21px; } .notification-channels strong { color: var(--text2); font-size: 12px; font-weight: 600; } .notification-channels p { margin-top: 4px; font-size: 12px; color: var(--text2); line-height: 1.7; } .notification-channels > span { margin-left: auto; color: var(--text2); font-size: 12px; white-space: nowrap; } .notification-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 350px; align-items: start; gap: 24px; margin-bottom: 26px; } .push-composer, .push-preview-panel, .push-scope-panel, .push-history-panel { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: var(--shadow); } .draft-tag { padding: 4px 8px; border: 1px solid #e5e9f2; border-radius: 5px; color: var(--text2); font-size: 12px; } .custom-push-form { display: block; } .push-form-section { padding: 24px; border-bottom: 1px solid var(--border); } .push-section-title { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 22px; } .push-section-title > span { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 27px; border: 1px solid #e1e6fa; border-radius: 7px; background: #edf3e6; color: #6d7eda; font-size: 12px; font-weight: 600; } .push-section-title h4 { color: #40516e; font-size: 13px; font-weight: 600; } .push-section-title p { margin-top: 4px; color: var(--text2); font-size: 13px; line-height: 1.7; } .push-field { display: grid; gap: 8px; margin-top: 18px; min-width: 0; } .push-field[hidden] { display: none; } .push-field label { color: var(--text2); font-size: 13px; font-weight: 600; } .push-label-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; } .push-label-row > span { color: var(--text2); font-size: 12px; font-variant-numeric: tabular-nums; } .custom-push-form input, .custom-push-form select, .custom-push-form textarea { width: 100%; min-width: 0; padding: 11px 13px; border: 1px solid #dfe5f1; border-radius: 7px; color: #364864; background: #fff; font: inherit; font-size: 13px; transition: border-color .15s, box-shadow .15s; } .custom-push-form textarea { resize: vertical; min-height: 70px; line-height: 1.8; } .custom-push-form #customPushContent { min-height: 140px; } .custom-push-form input::placeholder, .custom-push-form textarea::placeholder { color: var(--text3); font-size: 13px; } .custom-push-form :is(input,select,textarea):focus { border-color: #7b8ee9; box-shadow: 0 0 0 3px #24634f0c; } .custom-push-form :is(input,select,textarea):disabled { background: #f6f8f2; color: var(--text2); } .push-target-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .push-target-grid .push-field { margin-top: 0; } .input-hint { color: var(--text2); font-size: 13px; line-height: 1.7; } .push-composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; background: #fbfcff; } .push-composer-footer p { max-width: 380px; color: var(--text2); font-size: 12px; line-height: 1.8; } .push-composer-footer .primary-button { flex-shrink: 0; min-width: 140px; } .push-result:empty { display: none; } .push-result { margin: 0 24px 20px; padding: 12px 14px; border: 1px solid #e3e9f5; border-radius: 7px; color: var(--text2); background: #f6f8fd; font-size: 12px; line-height: 1.8; } .push-result.is-success { border-color: #d6ece2; color: var(--text2); background: #f1faf6; } .push-result.is-error { border-color: #f2dce1; color: var(--danger); background: #fff6f8; } .push-preview-column { display: grid; gap: 20px; } .push-preview-column .panel-heading { padding: 20px; } .preview-live { display: inline-flex; gap: 5px; align-items: center; color: var(--text2); font-size: 12px; } .preview-live i { width: 5px; height: 5px; border-radius: 50%; background: #52b095; } .message-preview-surface { margin: 20px; padding: 20px 15px; border: 1px solid #e5eaf5; border-radius: 13px; background: linear-gradient(165deg, #f5f7fd, #ecf0fb); } .message-preview-top { display: flex; justify-content: space-between; color: var(--text2); font-size: 12px; padding: 0 2px 16px; } .message-preview-card { padding: 17px; border: 1px solid #dfe7d9; border-radius: 10px; background: #fff; box-shadow: 0 7px 20px #273c7010; } .message-preview-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; } .message-preview-brand img { width: 29px; height: 29px; border-radius: 8px; } .message-preview-brand > div { display: grid; gap: 2px; } .message-preview-brand strong { color: #4a5b74; font-size: 12px; font-weight: 600; } .message-preview-brand span, .message-preview-brand small { color: var(--text2); font-size: 12px; } .message-preview-brand small { margin-left: auto; } .message-preview-card h4 { color: #344662; font-size: 14px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; } .message-preview-card > p { min-height: 64px; max-height: 210px; margin-top: 9px; overflow-y: auto; color: var(--text2); font-size: 13px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; } .message-preview-bottom { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 12px; border-top: 1px solid #eef1f7; color: var(--text2); font-size: 12px; } .preview-watermark { padding-top: 24px; color: var(--text2); text-align: center; font-size: 7px; letter-spacing: .18em; } .preview-disclaimer { padding: 0 20px 18px; color: var(--text2); font-size: 12px; line-height: 1.8; } .push-scope-panel .panel-heading { border: 0; padding-bottom: 8px; } .push-scope-panel dl { padding: 0 20px 16px; } .push-scope-panel dl > div { display: flex; justify-content: space-between; gap: 15px; padding: 10px 0; border-bottom: 1px dashed #e7ecf4; font-size: 12px; } .push-scope-panel dl > div:last-child { border: 0; } .push-scope-panel dt { color: var(--text2); white-space: nowrap; } .push-scope-panel dd { color: var(--text2); text-align: right; } .push-delivery-note { display: flex; align-items: flex-start; gap: 9px; padding: 15px 20px; background: #fafbfe; color: var(--text2); font-size: 12px; line-height: 1.8; } .push-history-panel > .panel-heading { padding: 22px 24px; } .push-history-summary { display: flex; align-items: center; gap: 28px; padding: 15px 24px; border-bottom: 1px solid var(--border); background: #fcfdff; } .push-history-summary:empty { display: none; } .push-history-summary span { color: var(--text2); font-size: 12px; } .push-history-summary strong { margin-left: 8px; color: #4d5f7d; font-size: 13px; font-weight: 600; } .push-history-panel .table-scroll { border: 0; border-radius: 0; } .push-history-table { min-width: 940px; } .push-history-table th { font-size: 13px; padding-block: 13px; } .push-history-table td { font-size: 13px; vertical-align: top; padding-block: 20px; } .push-history-table th:first-child { width: 34%; } .campaign-copy { min-width: 210px; max-width: 400px; } .campaign-copy strong { display: block; margin-bottom: 6px; font-size: 12px; color: #415471; font-weight: 600; overflow-wrap: anywhere; } .campaign-copy p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text2); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; } .campaign-copy small { display: block; margin-top: 9px; color: var(--text2); font-size: 12px; } .campaign-scope { display: grid; gap: 7px; min-width: 130px; color: var(--text2); font-size: 12px; } .campaign-scope small { color: var(--text2); font-size: 12px; } .campaign-state { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 5px; background: #f1f3f7; color: var(--text2); font-size: 12px; white-space: nowrap; } .campaign-state::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; } .campaign-state.is-queued { color: #785013; background: #fbf4e8; } .campaign-state.is-running { color: #3e50b6; background: #eef2ff; } .campaign-state.is-completed { color: #21664c; background: #ebf7f1; } .campaign-state.is-failed { color: #a12e46; background: #fff0f3; } .campaign-error { margin-top: 8px; max-width: 180px; color: var(--danger); font-size: 12px; overflow-wrap: anywhere; } .campaign-number { color: #4f6280; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; } .campaign-split { color: var(--text2); font-size: 12px; } .campaign-split span { display: block; margin-top: 5px; } .push-history-panel .pagination { margin: 18px 24px 0; } .history-footnote { padding: 14px 24px 20px; color: var(--text2); font-size: 12px; line-height: 1.8; } .studio-empty { display: grid; place-items: center; padding: 44px 20px; text-align: center; } .studio-empty-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border: 1px solid #e2e8f7; border-radius: 12px; background: #f3f7ee; color: var(--text2); font-size: 22px; } .studio-empty strong { color: var(--text2); font-size: 12px; font-weight: 500; } .studio-empty p { max-width: 500px; margin-top: 7px; color: var(--text2); font-size: 12px; line-height: 1.8; } .studio-empty.is-error strong { color: var(--danger); } @media (max-width: 1280px) { .notification-workspace { grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; } .push-composer-footer { align-items: flex-start; flex-direction: column; gap: 12px; } } @media (max-width: 1100px) { .notification-workspace { grid-template-columns: 1fr; } .push-preview-column { grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; } .dashboard-insights { grid-template-columns: 1fr; } } @media (max-width: 900px) { .workspace-header { margin-inline: -18px; padding-inline: 18px; min-height: 58px; margin-bottom: 22px; } .workspace-platforms { display: none; } .filter-field { width: 100%; } .list-workspace .toolbar { padding: 16px; } .list-workspace-header { padding-inline: 16px; } .operations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .page-intro { align-items: flex-start; } .page-intro h2 { font-size: 25px; } .page-intro p { font-size: 13px; } .permission-tag { display: none; } .notification-channels { padding: 14px; align-items: flex-start; } .notification-channels > span { display: none; } .push-preview-column, .push-target-grid { grid-template-columns: 1fr; } .panel-heading, .push-form-section, .push-history-panel > .panel-heading { padding: 18px; } .push-composer-footer { padding: 18px; } .push-composer-footer .primary-button { width: 100%; } .push-history-summary { gap: 15px; flex-wrap: wrap; padding: 15px 18px; } .push-history-summary span { font-size: 12px; } .list-workspace-header > span { display: none; } .operations-grid { grid-template-columns: 1fr; } .push-history-panel .pagination { justify-content: center; } } .operations-grid.is-reviewer { grid-template-columns: repeat(3, minmax(0,1fr)); } .dashboard-kpi-symbol svg { width: 15px; height: 15px; } @media (max-width: 900px) { .operations-grid.is-reviewer { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 600px) { .operations-grid.is-reviewer { grid-template-columns: 1fr; } .workspace-header { margin-inline: -14px; padding-inline: 14px; } } .match-detail-modal { width: 1100px; max-width: 95vw; } .match-detail-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; overflow: auto; max-height: 60vh; } .match-detail-post { min-width: 0; overflow-wrap: anywhere; } .match-detail-post h4 { margin-bottom: 16px; color: var(--primary); } .post-detail-comments { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); } .post-detail-comments h4 { margin-bottom: 12px; color: var(--text); } .post-detail-comment { padding: 14px 0; border-bottom: 1px solid var(--border); } .post-detail-comment-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .post-detail-comment-meta time { color: var(--text2); font-size: 12px; } .post-detail-comment-content { margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; } /* 微信宠物擂台监管 */ #page-arena button{cursor:pointer;font-family:inherit}#page-arena .arena-tabs button{padding:9px 16px;border-radius:8px;font-size:14px}#page-arena [data-action="arena-refresh"],#page-arena [data-action="arena-close"]{padding:9px 14px;border:0;border-radius:8px;background:var(--primary);color:#fff;font-size:13px}#page-arena .arena-detail .actions button{padding:6px 10px;border:0;border-radius:6px;font-size:12px}.arena-detail .actions .btn-pass{background:#e8f5ef;color:var(--success)}.arena-detail .actions .btn-hide{background:var(--warning);color:#fff}.arena-detail .actions .btn-delete{background:#fceeea;color:var(--danger)} #page-arena .page-title-row,.arena-detail-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px} #page-arena [hidden]{display:none!important} .arena-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px} .arena-kpi{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:10px;padding:22px;background:var(--card,#fff);color:var(--text,#222);border:1px solid var(--border,#e6e8ed);border-radius:16px;cursor:pointer} .arena-kpi b{font-size:32px;line-height:1.2}.arena-kpi small{font-size:12px;color:var(--muted,#6b7280);line-height:1.6} .arena-panel{background:var(--card,#fff);border:1px solid var(--border,#e6e8ed);border-radius:16px;padding:22px;margin-bottom:20px;min-width:0} .arena-panel h3,.arena-panel h4{margin:0 0 16px}.arena-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:0}.arena-flow li{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:10px;background:var(--bg,#f6f7fb)}.arena-flow span{font-size:13px;color:var(--muted,#6b7280);line-height:1.7} .arena-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.arena-tabs button{background:var(--bg,#f6f7fb);color:var(--text,#222);border:1px solid var(--border,#e6e8ed)}.arena-tabs button.active{background:var(--primary,#39795f);color:#fff;border-color:transparent} #page-arena .filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}#arenaSearch{flex:1;min-width:180px}#page-arena select,#arenaSearch{padding:10px 12px;border-radius:8px;border:1px solid var(--border,#e6e8ed);background:#fff;color:var(--text,#222)} #page-arena .table-scroll{overflow:auto}#page-arena table{width:100%;table-layout:fixed;min-width:660px}#page-arena th,#page-arena td{overflow-wrap:anywhere;vertical-align:top}#page-arena td small{display:block;line-height:1.7;color:var(--muted,#6b7280);margin-top:6px}.arena-post-cell{width:32%}.arena-cover{width:72px;aspect-ratio:4/3;object-fit:cover;border-radius:8px;float:left;margin:0 12px 8px 0}.arena-copy{white-space:pre-wrap;line-height:1.6}.arena-id{overflow-wrap:anywhere;font-size:12px;color:var(--muted,#6b7280)} .arena-detail{scroll-margin-top:90px}.arena-detail-top,.arena-lanes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.arena-images{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.arena-images a{display:block;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--bg,#f6f7fb)}.arena-images img{width:100%;height:100%;object-fit:cover}.arena-body{white-space:pre-wrap;line-height:1.8;margin:16px 0}.arena-metadata{display:flex;flex-direction:column;gap:8px;font-size:13px}.arena-facts{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px;font-size:13px;line-height:1.7}.arena-facts dt{color:var(--muted,#6b7280)}.arena-facts dd{margin:0;overflow-wrap:anywhere}.arena-count-line{font-size:13px;line-height:1.9;margin-top:16px;padding-top:16px;border-top:1px solid var(--border,#e6e8ed)} .arena-score-head{display:flex;justify-content:space-between;gap:20px;font-size:14px}.arena-score-head>*:last-child{text-align:right}.arena-score-bar{height:10px;border-radius:8px;background:#f5a875;margin:14px 0;overflow:hidden}.arena-score-bar span{display:block;height:100%;background:#6ba995}.arena-score .muted{margin:14px 0 0;font-size:13px;line-height:1.8}.arena-side{display:inline-block;font-size:12px;border-radius:6px;padding:3px 8px}.arena-defend{background:#e5f4ef;color:#2d6c58}.arena-attack{background:#fff0e6;color:#a45824}.arena-legacy{background:#eee;color:#555}.arena-comment-copy p{white-space:pre-wrap;line-height:1.7;margin:10px 0}.arena-lanes table{min-width:480px!important}.arena-lanes th:first-child{width:34%}.arena-lanes td,.arena-lanes th{font-size:12px;padding:10px 8px!important}.arena-lanes .actions{gap:5px;flex-wrap:wrap}.arena-lanes button{font-size:12px;padding:5px 8px}.arena-audit{list-style:none;margin:0;padding:0}.arena-audit li{padding:16px 0;border-bottom:1px solid var(--border,#e6e8ed);font-size:13px;line-height:1.7}.arena-audit small{display:block;color:var(--muted,#6b7280)}.arena-audit p{margin:6px 0} @media(max-width:1100px){.arena-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.arena-flow{grid-template-columns:repeat(3,minmax(0,1fr))}.arena-detail-top,.arena-lanes{grid-template-columns:1fr}} @media(max-width:600px){.arena-panel{padding:16px}.arena-kpi{padding:16px}.arena-flow{grid-template-columns:1fr}.arena-score-head{font-size:12px;gap:12px}#page-arena .page-title-row{align-items:flex-start;flex-wrap:wrap}.arena-detail-heading{align-items:flex-start}} .insights-disclosure { border: 1px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden; margin: 24px 0; } .insights-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; cursor: pointer; list-style: none; } .insights-disclosure > summary::-webkit-details-marker { display: none; } .insights-disclosure > summary > span:first-child { display: grid; gap: 6px; } .insights-disclosure summary b { font-size: 14px; font-weight: 600; } .insights-disclosure summary small, .disclosure-label { font-size: 11px; color: var(--text3); } .insights-disclosure summary .disclosure-label::after { content: '+'; display: inline-block; font-size: 20px; margin-left: 16px; vertical-align: -2px; } .insights-disclosure[open] summary .disclosure-label::after { content: '−'; } .insights-disclosure[open] > summary { border-bottom: 1px solid var(--border); background: #f8faf5; } .insights-disclosure .pairing-analytics { margin: 0; border: 0; border-radius: 0; box-shadow: none; } /* Shared feedback: cosmetic only, with no timers or additional requests. */ button { transition: background-color .16s, border-color .16s, color .16s, box-shadow .16s, transform .16s; } button:active:not(:disabled) { transform: translateY(1px); } button:disabled { cursor: not-allowed; } input, select, textarea { accent-color: var(--primary); } input:not([type=checkbox]):not([type=radio]), select, textarea { transition: border-color .16s, box-shadow .16s; } input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 4px #24634f0c; } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid #54876a; outline-offset: 3px; } .sidebar button:focus-visible { outline-color: #d7e7b8; } tbody tr { transition: background-color .16s; } .actions button:hover:not(:disabled) { filter: brightness(.95); box-shadow: 0 2px 4px #233b2810; } .queue-row:hover { background: #f4f8ef; } .queue-number > span { transition: transform .16s; } .queue-row:hover .queue-number > span { transform: translateX(3px); } .stats-grid > .stat-card:first-child { background: #254f40; border-color: #254f40; box-shadow: 0 6px 16px #284e3b12; } .stats-grid > .stat-card:first-child .value { color: #f2f6e7; } .stats-grid > .stat-card:first-child .label { color: #d4e2cf; } .stats-grid > .stat-card:first-child .sub { color: #bbcfbd; } .stats-grid > .stat-card:first-child .dashboard-kpi-symbol { background: #ffffff0d; border-color: #ffffff1c; color: #dae6c4; } .showcase-kpi, .maintenance-card, .pairing-analytics, .push-composer-panel, .push-preview-panel, .push-scope-panel, .push-history-panel { border-radius: 16px; box-shadow: var(--shadow); } .modal-overlay.show .modal { animation: workspace-enter .22s ease-out; } .toast { box-shadow: 0 8px 30px #17392f26; border: 1px solid #ffffff30; } .empty { color: var(--text2); } .arena-kpi:hover { background: #f4f8ef; border-color: #afc7a6; } #page-pairingcases .pc-list-metrics > div, #page-pairingcases .pc-surface, #page-pairingcases .pc-operation { border-radius: 16px; box-shadow: var(--shadow); } @keyframes workspace-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes chart-enter { from { transform: scaleY(.2); } to { transform: scaleY(1); } } @media (min-width: 901px) and (max-width: 1200px) { .workspace-header { margin-inline: -24px; padding-inline: 24px; } } @media (max-width: 900px) { .sidebar { width: 248px; } } @media (max-width: 600px) { .overview-banner .page-help { font-size: 12px; line-height: 1.8; } .dashboard-heading .section-kicker { font-size: 9px; } .stat-card { padding: 22px; } .workspace-breadcrumb { gap: 10px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* Post details: grouped information, one scrolling body, unchanged palette. */ #postDetailModal > .modal, #matchDetailModal > .modal { display: flex; flex-direction: column; width: min(860px, 94vw); max-height: 88vh; max-height: 88dvh; overflow: hidden; } #matchDetailModal > .modal { width: min(1180px, 94vw); } #postDetailModal > .modal > h3, #matchDetailModal > .modal > h3, #postDetailModal > .modal > .modal-footer, #matchDetailModal > .modal > .modal-footer { flex-shrink: 0; } #postDetailBody, #matchDetailBody { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 8px; } .post-dossier { min-width: 0; } .post-dossier-header { padding: 0 0 20px; } .post-dossier-labels { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .post-dossier-category { font-size: 13px; font-weight: 650; } .post-dossier-state { padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--text2); } .post-dossier-pet { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; } .post-dossier-pet-symbol { display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px; border: 1px solid var(--border); border-radius: 14px; font-size: 24px; } .post-dossier-pet > div { min-width: 0; } .post-dossier-eyebrow { font-size: 11px; color: var(--text3); } .post-dossier-pet h4 { margin: 3px 0 6px; font-size: 23px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; } .post-dossier-pet p { color: var(--text2); line-height: 1.7; font-size: 13px; overflow-wrap: anywhere; } .post-dossier-pet p > span { margin-inline: 3px; } .post-dossier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; margin: 0; } .post-dossier-publishing { padding: 16px 18px; border: 1px solid var(--border); border-radius: 10px; } .post-dossier-field { min-width: 0; } .post-dossier-field.is-wide { grid-column: 1 / -1; } .post-dossier-field dt { margin-bottom: 7px; font-size: 12px; color: var(--text3); } .post-dossier-field dd { margin: 0; line-height: 1.7; font-size: 14px; color: var(--text); overflow-wrap: anywhere; } .post-dossier-section { margin: 0; padding: 22px 0; border-top: 1px solid var(--border); } .post-dossier .post-dossier-section-title { margin: 0 0 16px; font-size: 14px; font-weight: 650; line-height: 1.5; color: var(--text); } .post-dossier-tags { display: flex; flex-wrap: wrap; gap: 6px; } .post-dossier-tags > span { padding: 3px 9px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; } .post-dossier-topic { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px; } .post-dossier-topic > span { font-size: 12px; color: var(--text3); } .post-dossier-topic > strong { font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; } .post-dossier-copy { padding: 16px 18px; border: 1px solid var(--border); border-radius: 10px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.9; } .post-dossier-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: start; gap: 12px; } .post-dossier-images img { display: block; width: 100%; max-height: 300px; object-fit: contain; border: 1px solid var(--border); border-radius: 10px; } .post-dossier-videos { display: grid; gap: 12px; } .post-dossier-videos video { display: block; width: 100%; max-height: 360px; border-radius: 10px; } .post-dossier-credentials > p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; } .post-dossier-credentials .post-detail-credential-groups { margin: 0; gap: 12px; } .post-dossier-credentials .post-detail-credential-group { padding: 14px; } .post-dossier-credentials .post-detail-credential-group strong { margin-bottom: 12px; } .post-dossier-credentials .post-detail-credential-images { gap: 10px; } .post-dossier-credentials .post-detail-credential-images img { width: 132px; height: 108px; } .post-dossier-review { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--border); border-left: 3px solid var(--danger); border-radius: 6px; color: var(--danger); } .post-dossier-review strong { font-size: 13px; } .post-dossier-review p { margin-top: 6px; font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; } .post-dossier-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 0 0; border-top: 1px solid var(--border); color: var(--text2); font-size: 12px; } .post-dossier-engagement { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-variant-numeric: tabular-nums; } .post-dossier .post-dossier-actions { margin-top: 16px; } .match-detail-post .post-dossier-pet h4 { margin: 3px 0 6px; color: var(--text); } .match-detail-post .post-dossier-section-title { margin: 0 0 16px; color: var(--text); } @media (max-width: 700px) { #matchDetailBody { grid-template-columns: minmax(0, 1fr); } .post-dossier-grid { gap: 15px 18px; } .post-dossier-section { padding-block: 18px; } .post-dossier-pet h4 { font-size: 20px; } } @media (max-width: 420px) { .post-dossier-grid { grid-template-columns: minmax(0, 1fr); } .post-dossier-publishing { padding: 14px; } .post-dossier-images { grid-template-columns: minmax(0, 1fr); } .post-dossier-credentials .post-detail-credential-images img { width: 108px; height: 90px; } } /* Open canvas console: primary navigation above the work; all tools in a drawer. */ :root { --primary:#31312f; --bg:#f6f5f1; --border:#e5e3dd; --text:#262622; --text2:#66655f; --text3:#74736c; --shadow:0 4px 18px #24221b04; } .app.show { display:block; } .main { margin-left:0; padding:0 48px 48px; width:100%; } .workspace-header { display:flex; align-items:center; gap:36px; min-height:88px; margin:0 -48px 30px; padding:0 48px; background:#fff; border-bottom:1px solid var(--border); } .console-brand { display:flex; align-items:center; gap:10px; flex-shrink:0; border:0; background:transparent; padding:0; text-align:right; cursor:pointer; color:var(--text); } .console-brand img { width:40px; height:40px; border-radius:12px; } .console-brand strong { display:block; font-size:20px; font-weight:750; letter-spacing:-.06em; line-height:1.2; } .console-brand small { display:block; margin-top:4px; font-size:8px; color:#797870; letter-spacing:.18em; } @media(max-width:360px) { .console-brand small { display:none; } } .console-nav { display:flex; align-self:stretch; align-items:stretch; gap:6px; margin-left:auto; } .console-nav button { position:relative; padding:0 19px; font-size:13px; font-weight:550; color:var(--text2); background:transparent; border:0; cursor:pointer; } .console-nav button:hover { color:var(--text); background:#f8f7f3; } .console-nav button[aria-current="page"] { color:var(--text); } .console-nav button[aria-current="page"]::after { content:''; position:absolute; bottom:0; left:20px; right:20px; height:3px; background:#ee8645; border-radius:3px 3px 0 0; } .workspace-header .mobile-menu-btn { display:flex; align-items:center; gap:9px; margin:0; background:#f4f3ef; border-color:#e8e6df; border-radius:25px; font-size:12px; padding:11px 16px; flex-shrink:0; } .menu-grid-icon { display:grid; grid-template-columns:4px 4px; gap:3px; } .menu-grid-icon i { width:4px; height:4px; border-radius:1px; background:currentColor; } .workspace-breadcrumb { display:flex; max-width:1500px; margin:0 auto 24px; color:var(--text3); gap:11px; font-size:11px; } .workspace-breadcrumb i { font-style:normal; color:#a8a69c; } .workspace-breadcrumb strong { color:var(--text2); font-weight:500; } .sidebar { width:390px; max-width:calc(100vw - 24px); left:0; right:auto; z-index:91; background:#242624; color:#f6f5ef; border:0; transform:translateX(-100%); visibility:hidden; transition:transform .25s cubic-bezier(.22,1,.36,1),visibility 0s .25s; box-shadow:20px 0 70px #0002; } .app.sidebar-open .sidebar { transform:translateX(0); visibility:visible; transition-delay:0s; } body.drawer-open { overflow:hidden; } .sidebar-backdrop { position:fixed; z-index:90; inset:0; background:#181c1a66; opacity:0; visibility:hidden; transition:opacity .2s,visibility .2s; backdrop-filter:blur(5px); } .sidebar-open .sidebar-backdrop { opacity:1; visibility:visible; } .sidebar .logo { min-height:94px; padding:26px 28px 20px; } .sidebar .logo small { color:#b7b9ae; } .drawer-title { color:#f3f3ea; font-size:18px; } .drawer-close { margin-left:auto; width:34px; height:34px; background:#ffffff0c; border:1px solid #ffffff20; color:#e7e7df; border-radius:50%; font-size:23px; line-height:1; cursor:pointer; } .sidebar .nav { padding-inline:20px; scrollbar-color:#7b8073 transparent; } .sidebar .nav-link { color:#d4d7cd; min-height:42px; padding-inline:14px; margin-block:3px; font-size:13px; border-radius:9px; } .sidebar .nav-link.active { color:#fbe8d2; background:#b66b302b; border-color:#d59a6333; box-shadow:none; } .nav-section-label { color:#90998c; padding-top:24px; } .sidebar-account { margin-inline:30px; } .sidebar .logout-btn { padding-left:44px; } .page h2 { letter-spacing:-.045em; } .overview-banner { margin-bottom:22px; } .dashboard-heading { align-items:center; margin-bottom:0; } .dashboard-heading h2 { font-size:27px; margin:0; letter-spacing:-.045em; } .dashboard-heading .section-kicker { display:none; } .overview-banner .page-help { margin-top:5px; color:var(--text3); } .dashboard-platform-toolbar { margin:0; } .dashboard-platform-toolbar .filter-field { display:flex; flex-direction:row; align-items:center; gap:10px; } .dashboard-platform-toolbar select { min-width:125px; background:#fff; } .dashboard-platform-toolbar label { white-space:nowrap; } .dashboard-workbench { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(290px,1fr); gap:24px; } .console-hero { position:relative; grid-column:1/-1; display:grid; grid-template-columns:1.1fr 1fr; min-height:342px; overflow:hidden; isolation:isolate; border-radius:22px; color:#f8f7ef; background:#272a26; } .console-hero::before { content:''; position:absolute; z-index:-1; width:510px; height:510px; top:-230px; right:-100px; border:1px solid #a4b09426; border-radius:50%; } .console-hero-copy { position:relative; padding:32px 0 30px 42px; z-index:2; } .hero-eyebrow { display:flex; align-items:center; gap:8px; font-size:9px; color:#b9c4b0; letter-spacing:.11em; } .hero-eyebrow i { width:6px; height:6px; border-radius:50%; background:#d5e4ac; box-shadow:0 0 0 4px #d5e4ac0e; } .console-hero h3 { margin:21px 0 12px; font-size:clamp(32px,3vw,48px); line-height:1.28; font-weight:650; letter-spacing:-.045em; } .console-hero h3 > span { color:#f3a165; } .console-hero-copy > p { color:#bfc5b8; font-size:12px; line-height:1.8; } .hero-community-total { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px 16px; margin-top:21px; } .hero-community-total > span:first-child { font-size:11px; color:#c8cfc0; } .hero-community-total > strong { font-size:40px; letter-spacing:-.05em; font-weight:500; line-height:1.15; font-variant-numeric:tabular-nums; } .hero-community-total .hero-today { align-self:center; padding:4px 8px; color:#dce7c8; font-size:10px; background:#adc78b14; border:1px solid #b0c18e23; border-radius:5px; } .hero-community-meta { display:flex; gap:22px; font-size:10px; color:#aeb9a6; margin-top:12px; } .hero-community-meta b { margin-left:6px; color:#e7ebdf; font-weight:500; } .console-hero-visual { position:relative; min-width:0; align-self:stretch; } .console-hero-visual img { position:absolute; z-index:1; width:410px; height:410px; max-width:none; object-fit:contain; left:46%; top:49%; transform:translate(-50%,-50%); filter:drop-shadow(0 20px 15px #0002); animation:companion-enter .7s cubic-bezier(.22,1,.36,1) both; } .hero-orbit { position:absolute; width:330px; height:330px; border-radius:50%; background:#3a4033; border:1px solid #87986d22; left:46%; top:50%; transform:translate(-50%,-50%); } .hero-orbit::after { content:''; position:absolute; inset:-28px; border:1px solid #a7b49514; border-radius:50%; } .hero-art-label { position:absolute; top:35px; right:32px; writing-mode:vertical-rl; font-size:8px; letter-spacing:.22em; color:#a9b398; } .hero-sticker { position:absolute; z-index:2; right:24px; bottom:58px; transform:rotate(10deg); border-radius:50%; width:86px; height:86px; display:grid; place-content:center; background:#dce7b9; color:#3c4533; border:5px solid #272a26; box-shadow:0 0 0 1px #dce7b970; font-size:9px; font-weight:700; text-align:center; line-height:1.6; letter-spacing:.03em; } .hero-edition { position:absolute; bottom:18px; right:32px; font-size:8px; letter-spacing:.16em; color:#a5af99; } .console-actions { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .console-action { display:flex; flex-direction:column; min-width:0; padding:20px 26px; border:1px solid #e7ddc9; border-radius:16px; text-align:left; background:#eee8d9; color:#33332b; cursor:pointer; box-shadow:0 2px 0 #fff7 inset; } .action-matches { background:#e3e9da; border-color:#d8e0cd; } .action-reports { background:#e9e5ed; border-color:#dfd9e5; } .action-topline { display:flex; justify-content:space-between; align-items:center; width:100%; font-size:9px; letter-spacing:.12em; color:#717365; } .action-arrow { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; background:#ffffff70; font-size:20px; color:#424739; transition:transform .2s,background .2s; } .action-main { display:flex; align-items:baseline; flex-wrap:wrap; gap:15px; margin:2px 0 8px; } .action-main strong { font-size:43px; line-height:1.3; font-weight:550; font-variant-numeric:tabular-nums; letter-spacing:-.05em; } .action-main > span { font-size:14px; font-weight:550; } .action-foot { font-size:11px; color:#717365; } .console-action:hover { transform:translateY(-3px); box-shadow:0 9px 20px #393d2810; } .console-action:hover .action-arrow { transform:rotate(45deg); background:#fff; } .console-pulse { grid-column:1/-1; display:grid; grid-template-columns:1fr .8fr .85fr 1.4fr; gap:28px; padding:23px 0 29px; border-bottom:1px solid #deded5; margin-bottom:2px; } .pulse-title { padding-left:4px; } .pulse-title h3 { font-size:20px; margin-top:6px; font-weight:600; letter-spacing:-.04em; } .pulse-title button { margin-top:17px; border:0; padding:0; background:transparent; font-size:11px; color:var(--text2); cursor:pointer; } .pulse-title button span { margin-left:22px; font-size:16px; } .pulse-metric { display:flex; flex-direction:column; border-left:1px solid #dddfd5; padding-left:28px; min-width:0; } .pulse-metric > span { font-size:12px; color:var(--text2); } .pulse-metric > strong { margin:6px 0; font-size:35px; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.04em; } .pulse-metric > small { font-size:10px; color:var(--text3); line-height:1.7; } .section-kicker { color:var(--text3); font-size:9px; letter-spacing:.12em; } .dashboard-section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 28px 18px; } .dashboard-section-heading h3 { font-size:20px; margin:6px 0 0; font-weight:600; letter-spacing:-.03em; } .dashboard-section-heading > span { font-size:10px; color:var(--text3); text-align:right; } .dashboard-trend,.dashboard-service { min-width:0; border:1px solid var(--border); border-radius:17px; background:#fff; box-shadow:none; } .dashboard-trend { grid-column:auto; padding:0; overflow:hidden; } .dashboard-trend .trend-plot { padding:0 28px 25px; } .dashboard-trend .trend-chart { height:210px; margin-top:18px; padding-top:5px; background:repeating-linear-gradient(to top,#e9e9e1 0,#e9e9e1 1px,transparent 1px,transparent 25%); border-bottom:1px solid #e7e6df; } .dashboard-trend .trend-legend { justify-content:flex-start; gap:22px; font-size:10px; } .trend-bar.trend-user,.legend-user { background:#788f69; } .trend-bar.trend-post,.legend-post { background:#dfbc85; } .trend-bar { border-radius:3px 3px 0 0; min-width:3px; } .trend-day:hover { background:#6474570c; outline:1px solid #64745715; } .dashboard-service { background:#f0f0e8; border-color:#e1e3d6; } .dashboard-service .service-symbol { font-size:39px; font-weight:300; color:#818e70; } .service-metrics { padding:0 28px 12px; } .service-metrics > div { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 0; border-bottom:1px solid #dadfd0; } .service-metrics > div:last-child { border:0; } .service-metrics dt { font-size:12px; color:#5d6754; } .service-metrics dt small { display:block; margin-top:4px; font-size:10px; color:#737f68; } .service-metrics dd { margin:0; font-size:26px; font-weight:500; font-variant-numeric:tabular-nums; } .service-metrics dd small { font-size:12px; margin-left:3px; } .service-metrics .service-text { font-size:13px; } .dashboard-ledger { grid-column:1/-1; border:1px solid var(--border); border-radius:17px; background:#fff; overflow:hidden; } .dashboard-ledger .operations-grid { background:transparent; border:0; border-radius:0; } .dashboard-ledger .operations-grid.is-reviewer { grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-ledger .stat-card { border-right:1px solid var(--border); margin-block:4px 26px; padding:0 28px; } .dashboard-ledger .stat-card:last-child { border:0; } .dashboard-ledger .category-summary { margin:0; border:0; border-top:1px solid var(--border); border-radius:0; background:#fbfaf7; padding:15px 28px; } /* Full-width filters keep room for content. */ .filter-workspace { display:block; border-radius:16px; } .filter-workspace > .list-workspace-header { padding:22px 24px; border-bottom:1px solid var(--border); } .filter-workspace > .toolbar { display:flex; flex-direction:row; align-items:flex-end; justify-content:flex-start; flex-wrap:wrap; gap:12px; padding:18px 24px; border-right:0; border-bottom:1px solid var(--border); background:#faf9f6; } .filter-workspace .filter-field { width:auto; min-width:0; flex:1 1 140px; gap:7px; } .filter-workspace .toolbar .search,.filter-workspace .toolbar input,.filter-workspace .toolbar select { width:100%; min-width:0; } .filter-workspace .toolbar-date-filter { min-width:0; flex:1 1 145px; font-size:11px; } .filter-workspace .toolbar > button { width:auto; } .filter-workspace > .pagination { margin-top:0; padding:18px 24px; border-top:1px solid var(--border); } .filter-workspace .table-scroll { border:0; border-radius:0; } .filter-workspace td { padding:20px 18px; } .filter-workspace th { padding:14px 18px; background:#f8f7f3; } .login-story { background:#272a26; } .login-overline,.login-brand small { color:#c4cdb9; } .login-story > p { color:#bec7b6; } .brand-period { color:#f3a165; } .login-companions { display:block; width:min(100%,440px); height:310px; object-fit:contain; margin:0 auto; filter:drop-shadow(0 20px 22px #0002); } .login-platforms { color:#c0c9b4; } .login-card button { border-color:#33372e; } .login-card button:hover:not(:disabled) { background:#484f40; } .showcase-admin-hero { padding:0; background:transparent; border:0; box-shadow:none; margin-bottom:22px; } .showcase-admin-hero h2 { font-size:30px; } .showcase-kpi-grid { gap:0; border-block:1px solid var(--border); padding-block:20px; margin-bottom:18px; } .showcase-kpi { border:0; border-right:1px solid var(--border); padding:0 24px; border-radius:0; background:transparent; box-shadow:none; } .showcase-kpi:first-child { padding-left:0; } .showcase-kpi:last-child { border-right:0; } .showcase-kpi .kpi-value { color:var(--text); font-size:29px; } .showcase-kpi .kpi-sub { font-size:11px; } @media(max-width:600px) { .showcase-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 0; } .showcase-kpi:nth-child(odd) { padding-left:0; } .showcase-kpi:nth-child(even) { border-right:0; } .showcase-kpi:last-child { grid-column:1/-1; } } .showcase-admin-hero::after { display:none; } @keyframes companion-enter { from { opacity:0; margin-top:14px; } to { opacity:1; margin-top:0; } } @media(min-width:1600px) { .workspace-header { padding-inline:max(48px,calc((100vw - 1500px)/2)); } } @media(max-width:1200px) { .main { padding-inline:28px; } .workspace-header { margin-inline:-28px; padding-inline:28px; gap:25px; } .console-nav { gap:0; } .console-nav button { padding-inline:14px; } .console-hero-visual img { width:380px; height:380px; } .hero-sticker { right:12px; bottom:44px; } .console-pulse { gap:20px; } .pulse-metric { padding-left:20px; } } @media(max-width:900px) { .main { padding-inline:22px; } .workspace-header { margin-inline:-22px; padding-inline:22px; min-height:78px; gap:0 20px; flex-wrap:wrap; } .console-nav { order:3; width:100%; height:44px; border-top:1px solid var(--border); gap:0; } .console-nav button { flex:1; font-size:12px; } .workspace-header .mobile-menu-btn { margin-left:0; } .console-brand { margin-block:16px; margin-left:auto; } .console-hero-copy { padding-left:28px; } .console-hero h3 { font-size:35px; } .hero-eyebrow { font-size:8px; max-width:250px; line-height:1.8; } .console-hero-visual img { width:340px; height:340px; left:47%; } .hero-orbit { width:260px; height:260px; } .hero-sticker { width:70px; height:70px; font-size:7px; right:10px; } .console-action { padding:17px 19px; } .action-main { gap:9px; } .action-main strong { font-size:37px; } .action-main > span { font-size:12px; } .console-pulse { grid-template-columns:repeat(3,minmax(0,1fr)); } .pulse-title { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; } .pulse-title .section-kicker { display:none; } .pulse-title button,.pulse-title h3 { margin:0; } .pulse-metric:nth-child(2) { border-left:0; padding-left:0; } .dashboard-workbench { grid-template-columns:1fr; } .service-metrics { display:grid; grid-template-columns:1fr 1fr; gap:0 25px; } .service-metrics > div { min-width:0; } .service-metrics > div:nth-child(3) { border:0; } } @media(max-width:600px) { .main { padding:0 16px 25px; } .workspace-header { padding-inline:16px; margin:0 -16px 20px; gap:0; } .console-brand strong { font-size:19px; } .console-brand img { width:35px; height:35px; } .console-nav button { padding-inline:5px; font-size:11px; } .console-nav button[aria-current="page"]::after { left:10px; right:10px; } .workspace-header .mobile-menu-btn { padding:9px 12px; font-size:11px; } .workspace-breadcrumb { font-size:10px; margin-bottom:20px; } .dashboard-heading h2 { font-size:23px; } .dashboard-platform-toolbar label { display:none; } .dashboard-platform-toolbar select { min-width:100px; padding:8px 10px; } .overview-banner .page-help { font-size:11px; margin-top:9px; } .dashboard-workbench { gap:18px; } .console-hero { display:flex; flex-direction:column; min-height:0; border-radius:18px; } .console-hero-copy { padding:27px 26px 0; } .hero-eyebrow { max-width:none; font-size:8px; letter-spacing:.03em; } .console-hero h3 { font-size:36px; margin-top:18px; } .console-hero-copy > p { font-size:11px; max-width:260px; } .hero-community-total { margin-top:20px; gap:10px; } .hero-community-total > strong { font-size:38px; } .console-hero-visual { height:245px; margin-top:5px; } .console-hero-visual img { width:300px; height:300px; top:49%; left:50%; } .hero-orbit { width:200px; height:200px; top:51%; left:50%; } .hero-sticker { right:16px; bottom:36px; width:64px; height:64px; font-size:6px; } .hero-art-label { top:25px; right:20px; font-size:7px; } .hero-edition { font-size:7px; bottom:15px; right:22px; } .console-actions { grid-template-columns:1fr; gap:10px; } .console-action { display:grid; grid-template-columns:1fr auto; padding:17px 20px; gap:2px 12px; } .action-topline { grid-column:1; font-size:8px; } .action-arrow { display:none; } .action-main { grid-column:2; grid-row:1/3; flex-direction:row-reverse; align-items:center; margin:0; gap:12px; } .action-main strong { font-size:33px; } .action-main > span { font-size:11px; } .action-foot { font-size:9px; } .console-pulse { grid-template-columns:1fr 1fr; padding:14px 0 24px; gap:24px 18px; } .pulse-title h3 { font-size:19px; } .pulse-metric > strong { font-size:31px; } .pulse-metric > span { font-size:11px; } .pulse-metric:nth-child(4) { grid-column:1/-1; border:0; padding:0; } .dashboard-section-heading { padding:22px 20px 16px; } .dashboard-section-heading h3 { font-size:18px; } .dashboard-section-heading > span { max-width:40%; font-size:9px; } .dashboard-trend .trend-plot { padding-inline:20px; } .dashboard-trend .trend-chart { height:160px; gap:3px; } .trend-day { gap:1px; } .trend-bar { min-width:1px; } .service-metrics { grid-template-columns:1fr; padding-inline:20px; } .service-metrics > div:nth-child(3) { border-bottom:1px solid #dadfd0; } .dashboard-ledger .operations-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-ledger .stat-card { padding:16px 20px; margin:0; border-bottom:1px solid var(--border); } .dashboard-ledger .stat-card .value { font-size:26px; } .dashboard-ledger .category-summary { padding:15px 20px; } .filter-workspace > .list-workspace-header { padding:18px; } .filter-workspace > .toolbar { padding:16px; gap:12px; } .filter-workspace .filter-field { flex-basis:130px; } .filter-workspace > .pagination { padding:18px 12px; } .sidebar { width:350px; } } @media(prefers-reduced-motion:reduce) { .console-hero-visual img,.console-action,.action-arrow,.sidebar,.sidebar-backdrop { animation:none; transition:none; } } /* Content review gallery / table. Append after the main v2 layout styles. */ .content-review-page .content-review-workspace { display: block; overflow: hidden; } .content-review-workspace > .list-workspace-header { padding: 22px 24px; gap: 18px; } .review-heading { display: grid; gap: 6px; } .review-heading h3 { margin: 0; font-size: 17px; letter-spacing: -.02em; } .review-heading > span { font-size: 11px; color: var(--text3); } .review-view-switch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 11px; background: #f3f5f0; flex: 0 0 auto; } .review-view-switch > button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 8px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--text2); cursor: pointer; font: inherit; font-size: 12px; white-space: nowrap; } .review-view-switch > button[aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: 0 2px 6px #1b2e1810; } .review-view-switch > button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; } .content-review-workspace > .toolbar { display: flex; flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: 12px; padding: 17px 24px 21px; background: #fff; border-right: 0; border-bottom: 1px solid var(--border); } .content-review-workspace .toolbar .filter-field { flex: 0 1 150px; width: auto; min-width: 130px; gap: 7px; } .content-review-workspace .toolbar .filter-field:has(input[type="search"]) { flex: 1 1 220px; } .content-review-workspace .toolbar > button { width: auto; min-height: 40px; padding-inline: 22px; } .content-review-workspace > .pagination { margin: 0; padding: 19px 24px; border-top: 1px solid var(--border); } /* Native table markup and all existing actions remain in a single DOM tree. */ .content-review-page[data-content-view="gallery"] .content-review-workspace > div:not(.toolbar):not(.pagination) { padding: 24px; background: #f6f7f3; } .content-review-page[data-content-view="gallery"] .table-scroll { overflow: visible; background: transparent; } .content-review-page[data-content-view="gallery"] .content-review-table { display: block; position: relative; width: 100%; min-width: 0; border: 0; border-radius: 0; overflow: visible; background: transparent; } .content-review-page[data-content-view="gallery"] .content-review-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .content-review-page[data-content-view="gallery"] .content-review-table tbody { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 22px; } .content-review-page[data-content-view="gallery"] .content-review-table tbody tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-areas: 'media media' 'category status' 'copy copy' 'author platform' 'time time' 'actions actions'; grid-template-rows: 220px auto minmax(66px,1fr) auto auto auto; min-width: 0; overflow: hidden; background: #fff; border: 1px solid #e2e7dc; border-radius: 18px; box-shadow: 0 3px 8px #293c1704; transition: transform .18s, box-shadow .18s, border-color .18s; } .content-review-page[data-content-view="gallery"] .content-review-table tbody tr:hover { border-color: #bdcbb2; box-shadow: 0 10px 26px #263c1b0d; transform: translateY(-3px); } .content-review-page[data-content-view="gallery"] .content-review-table td { display: block; min-width: 0; max-width: none !important; border: 0; padding: 0; text-align: left; overflow-wrap: anywhere; vertical-align: top; line-height: 1.65; } .content-review-page[data-content-view="gallery"] .content-review-table .review-media-cell { grid-area: media; position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 220px; overflow: hidden; background: linear-gradient(135deg,#eef2e7,#e5eadf); } .content-review-page[data-content-view="gallery"] .review-media-cell img { display: block; width: 100%; height: 100%; max-height: none; border-radius: 0; object-fit: cover; transition: transform .3s; } .content-review-page[data-content-view="gallery"] .review-media-cell img { object-fit: contain; object-position: center; } .content-review-page[data-content-view="gallery"] tr:hover .review-media-cell img { transform: scale(1.025); } .content-review-page[data-content-view="gallery"] .review-media-cell > span { display: grid; place-items: center; gap: 10px; font-size: 12px; } .content-review-page[data-content-view="gallery"] .review-media-cell > span::before { content: '◈'; font-size: 38px; font-weight: 400; opacity: .35; } .content-review-page[data-content-view="gallery"] .review-media-cell .media-preview { position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px); padding: 9px 12px; border: 1px solid #ffffffb3; border-radius: 10px; background: #ffffffed; color: var(--text); box-shadow: 0 2px 12px #16301918; cursor: pointer; font-size: 11px; } .content-review-page[data-content-view="gallery"] .content-review-table .review-category-cell { grid-area: category; padding: 17px 6px 0 18px; color: var(--text2); } .content-review-page[data-content-view="gallery"] .content-review-table .review-status-cell { grid-area: status; padding: 17px 18px 0 6px; text-align: right; font-size: 11px; } .content-review-page[data-content-view="gallery"] .review-status-cell .badge { padding: 4px 9px; font-size: 10px; } .content-review-page[data-content-view="gallery"] .review-status-cell .muted { margin-top: 7px; font-size: 10px; line-height: 1.6; } .content-review-page[data-content-view="gallery"] .content-review-table .review-copy-cell { grid-area: copy; padding: 17px 18px 18px; font-size: 14px; line-height: 1.75; white-space: normal; } .content-review-page[data-content-view="gallery"] .review-copy-cell > strong { font-weight: 550; white-space: pre-wrap; } .content-review-page[data-content-view="gallery"] .content-review-table .review-author-cell { grid-area: author; padding: 0 6px 0 18px; font-size: 12px; } .content-review-page[data-content-view="gallery"] .content-review-table .review-platform-cell { grid-area: platform; padding: 0 18px 0 6px; text-align: right; } .content-review-page[data-content-view="gallery"] .review-author-cell::before, .content-review-page[data-content-view="gallery"] .review-platform-cell::before { content: attr(data-label); display: block; margin-bottom: 5px; font-size: 10px; color: var(--text3); font-weight: 400; } .content-review-page[data-content-view="gallery"] .content-review-table .review-time-cell { grid-area: time; padding: 13px 18px 18px; color: var(--text3); font-size: 10px !important; } .content-review-page[data-content-view="gallery"] .review-time-cell::before { content: attr(data-label); margin-right: 8px; } .content-review-page[data-content-view="gallery"] .content-review-table .review-actions-cell { grid-area: actions; align-self: end; padding: 13px 14px; border-top: 1px solid #edf0e8; background: #fbfcf8; } .content-review-page[data-content-view="gallery"] .review-actions-cell .actions { min-width: 0; gap: 7px; } .content-review-page[data-content-view="gallery"] .review-actions-cell button { flex: 1 1 auto; max-width: 100%; min-height: 34px; padding: 7px 10px; font-size: 11px; white-space: normal; } .content-review-page[data-content-view="gallery"] .review-actions-cell .actions > .muted { flex: 1 0 100%; font-size: 10px; } .content-review-page[data-content-view="gallery"] .content-review-table.showcase-table tbody tr { grid-template-areas: 'media media' 'copy copy' 'author platform' 'engagement status' 'time time' 'actions actions'; grid-template-rows: 220px minmax(112px,1fr) auto auto auto auto; } .content-review-page[data-content-view="gallery"] .content-review-table .review-engagement-cell { grid-area: engagement; padding: 17px 6px 0 18px; } .content-review-page[data-content-view="gallery"] .review-engagement-cell .interaction-row { display: flex; gap: 8px; flex-wrap: wrap; font-size: 10px; } .content-review-page[data-content-view="gallery"] .review-copy-cell .topic-chip { margin: 0 0 9px; font-size: 10px; white-space: normal; } .content-review-page[data-content-view="gallery"] .review-copy-cell .showcase-copy { max-width: none; margin: 0; font-size: 14px; line-height: 1.75; } @media (min-width: 1800px) { .content-review-page[data-content-view="gallery"] .content-review-table tbody { grid-template-columns: repeat(4,minmax(0,1fr)); } } @media (max-width: 1150px) { .content-review-page[data-content-view="gallery"] .content-review-table tbody { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 700px) { .content-review-workspace > .list-workspace-header { flex-wrap: wrap; padding: 18px; } .review-view-switch { width: 100%; } .review-view-switch > button { flex: 1; } .content-review-workspace > .toolbar { padding: 16px 18px 18px; gap: 12px; } .content-review-workspace .toolbar .filter-field { flex: 1 1 calc(50% - 12px); min-width: 0; } .content-review-workspace .toolbar .filter-field:has(input[type="search"]) { flex-basis: 100%; } .content-review-workspace .toolbar > button { width: 100%; } .content-review-page[data-content-view="gallery"] .content-review-workspace > div:not(.toolbar):not(.pagination) { padding: 16px; } .content-review-page[data-content-view="gallery"] .content-review-table tbody { grid-template-columns: minmax(0,1fr); gap: 18px; } .content-review-page[data-content-view="gallery"] .content-review-table tbody tr, .content-review-page[data-content-view="gallery"] .content-review-table.showcase-table tbody tr { grid-template-rows: 240px auto auto auto auto auto; } .content-review-page[data-content-view="gallery"] .content-review-table .review-media-cell { height: 240px; } } @media (prefers-reduced-motion: reduce) { .content-review-page[data-content-view="gallery"] .content-review-table tbody tr, .content-review-page[data-content-view="gallery"] .review-media-cell img { transition: none; } .content-review-page[data-content-view="gallery"] .content-review-table tbody tr:hover, .content-review-page[data-content-view="gallery"] tr:hover .review-media-cell img { transform: none; } } /* Compact companion composition leaves room for the work queue on phones. */ @media(max-width:600px) { .dashboard-heading { flex-direction:row; align-items:center; } .dashboard-heading h2 { font-size:21px; text-align:left; } .toolbar.dashboard-platform-toolbar { width:auto; } .dashboard-platform-toolbar .filter-field { width:auto; min-width:100px; } .console-hero-copy { padding:24px; } .console-hero h3 { font-size:30px; line-height:1.3; margin-block:16px 10px; } .console-hero-copy > p { max-width:145px; font-size:10px; } .hero-community-total { display:grid; grid-template-columns:1fr; justify-items:start; gap:5px; max-width:150px; margin-top:24px; } .hero-community-total > strong { font-size:35px; } .hero-community-total .hero-today { font-size:9px; padding:3px 7px; } .hero-community-meta { max-width:145px; flex-wrap:wrap; gap:5px 10px; font-size:9px; } .hero-community-meta b { margin-left:3px; } .console-hero-visual { position:absolute; right:-7px; bottom:2px; width:180px; height:190px; margin:0; } .console-hero-visual img { width:205px; height:205px; left:50%; top:50%; } .hero-orbit { width:160px; height:160px; left:50%; top:50%; } .hero-orbit::after { inset:-12px; } .hero-art-label,.hero-edition,.hero-sticker { display:none; } } /* Keep mobile form focus from zooming the entire console, including modal editors. Override module and inline font sizes while preserving desktop typography. */ @media (max-width: 900px), (hover: none) and (pointer: coarse) { input, select, textarea { font-size: 16px !important; } }