.referral-workspace { padding:24px 28px; color:#292b3e; background:#fff; min-height:calc(100vh - 80px); }
.referral-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.referral-heading h1 { margin:0; font-size:26px; letter-spacing:-.6px; }
.referral-heading-actions { display:flex; align-items:center; gap:14px; }
.referral-month { display:flex; align-items:center; gap:10px; font-size:12px; color:#84889a; }
.referral-month input { width:145px; }
.referral-heading-actions .referral-month { display:flex; flex-direction:row; align-items:center; margin:0; height:40px; white-space:nowrap; }
.referral-heading-actions .referral-month input,.referral-heading-actions #referralNew { box-sizing:border-box; height:40px; min-height:40px; margin:0; line-height:normal; }
.referral-heading-actions #referralNew { display:inline-flex; align-items:center; justify-content:center; }
.referral-notice { margin:0; color:#997442; font-size:12px; line-height:1.6; }
.referral-notice::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:#d6a361; margin-right:7px; vertical-align:middle; }
.referral-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; padding:18px 26px; margin-bottom:22px; border-radius:16px; background:linear-gradient(110deg,#f5f4ff,#fafaff 65%,#f5faf9); }
.referral-stat { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.referral-stat span { color:#73788d; font-size:12px; }
.referral-stat strong { font-size:27px; font-weight:650; letter-spacing:-1px; color:#34327c; }
.referral-stat:nth-child(2) strong { color:#238576; }
.referral-layout { display:grid; grid-template-columns:285px minmax(0,1fr); gap:30px; height:calc(100dvh - 268px); min-height:480px; max-height:1000px; align-items:stretch; }
.referral-records { display:flex; flex-direction:column; min-width:0; min-height:0; padding:16px 12px; border-radius:16px; background:#f7f7fc; }
.referral-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.referral-toolbar .referral-search { grid-column:1/-1; }
.referral-toolbar input,.referral-toolbar select,.referral-month input { border:0; background:#fff; border-radius:9px; min-height:38px; padding:8px 11px; font:inherit; font-size:12px; color:#555b74; box-sizing:border-box; max-width:100%; }
.referral-month input { background:#f6f6fa; }
.referral-caption { color:#9498a8; font-size:11px; line-height:1.8; }
#referralLoadStatus { padding:0 4px; margin:15px 0 8px; }
#referralList { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.referral-record { display:flex; gap:10px; width:100%; background:transparent; border:0; padding:15px 10px; margin-bottom:6px; cursor:pointer; text-align:left; border-radius:12px; color:inherit; }
.referral-record:hover { background:#eeeef8; }
.referral-record[aria-pressed="true"] { background:#ebeaff; }
.referral-record-monogram { display:grid; place-items:center; flex:0 0 32px; height:32px; background:#fff; border-radius:10px; color:#5856a3; font-size:13px; }
.referral-record-body { min-width:0; flex:1; }
.referral-record strong { font-size:13px; display:block; overflow-wrap:anywhere; margin-bottom:4px; }
.referral-company { display:block; color:#848899; font-size:11px; line-height:1.6; margin:4px 0 9px; overflow-wrap:anywhere; }
.referral-record small { font-size:10px; display:block; color:#989bab; margin-top:9px; }
.referral-chip { display:inline-flex; color:#8a8e9e; background:#f0f0f6; font-size:10px; line-height:1.6; padding:3px 9px; border-radius:20px; }
.referral-chip.valid { color:#25806a; background:#e7f5ed; }
.referral-chip.warn { color:#9b7032; background:#fcf1df; }
.referral-pagination { display:flex; align-items:center; justify-content:space-between; padding-top:10px; gap:4px; font-size:10px; color:#9599a8; }
.referral-pagination .btn { padding:6px; font-size:11px; }
.referral-editor { min-width:0; min-height:0; overflow:auto; padding:6px 24px 0; scrollbar-width:thin; scroll-padding:18px; }
#referralForm { max-width:880px; margin:0 auto; }
.referral-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:260px; height:100%; padding:24px; box-sizing:border-box; color:#9297a8; text-align:center; font-size:12px; line-height:1.8; }
.referral-empty h2 { color:#555975; font-size:18px; font-weight:550; margin:16px 0 0; }
.referral-empty p { margin:8px 0; }
.referral-empty-mark { display:grid; place-items:center; width:66px; height:66px; border-radius:22px; background:#f0effd; color:#7672c0; font-size:30px; }
.referral-empty-mark svg { width:30px; height:30px; }
.referral-records .referral-empty { min-height:160px; padding:20px 8px; }
.referral-records .referral-empty h2 { font-size:14px; }
.referral-form-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:30px; }
.referral-form-head h2 { font-size:21px; font-weight:650; margin:0; }
.referral-form-section { margin:0 0 28px; padding:0; border:0; min-width:0; }
.referral-form-section legend { display:block; font-size:13px; font-weight:650; margin:0 0 18px; padding:0; color:#414561; }
.referral-form-section legend span { color:#9b98be; font-size:10px; margin-right:9px; font-weight:500; }
.referral-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; }
.referral-editor label { display:flex; flex-direction:column; gap:8px; font-size:11px; color:#85899b; min-width:0; }
.referral-editor label em { color:#9c8294; font-style:normal; }
.referral-editor input,.referral-editor textarea,.referral-editor select { box-sizing:border-box; width:100%; border:1px solid transparent; background:#f7f7fb; border-radius:10px; min-height:42px; padding:11px 13px; font:inherit; font-size:13px; color:#33384e; }
.referral-editor input::placeholder,.referral-editor textarea::placeholder { color:#b0b2c0; }
.referral-editor input:focus,.referral-editor textarea:focus,.referral-editor select:focus { border-color:#c8c5ed; outline:3px solid #eeedfa; background:#fff; }
.referral-editor input[readonly] { color:#6e7286; }
.referral-editor textarea { min-height:116px; resize:vertical; line-height:1.8; }
.referral-editor label.referral-wide { grid-column:1/-1; }
.referral-contact { margin:0 0 18px; padding:0; }
.referral-contact-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:11px; color:#8b8fa3; }
.referral-contact-head strong { font-weight:500; }
.referral-contact-head .btn { color:#aaa2a9; font-size:11px; padding:4px 8px; }
.referral-optional { margin:0 0 20px; }
.referral-optional summary { cursor:pointer; font-size:12px; color:#555977; padding:14px 0; }
.referral-optional summary span { font-size:11px; color:#a0a3b0; margin-left:10px; }
.referral-optional[open] summary { margin-bottom:10px; }
.referral-feedback { padding:12px 16px; background:#f7f7fc; border-radius:10px; margin-bottom:22px; font-size:12px; color:#777d91; }
.referral-feedback h3 { margin:0 0 10px; font-size:13px; }
.referral-feedback p { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.8; margin:0; }
.referral-feedback dl,.referral-meta dl { display:grid; grid-template-columns:auto 1fr; gap:9px 18px; font-size:11px; }
.referral-feedback dt,.referral-meta dt { color:#969aab; }
.referral-feedback dd,.referral-meta dd { margin:0; overflow-wrap:anywhere; }
.referral-actions { position:sticky; bottom:0; z-index:2; background:#fffffff5; backdrop-filter:blur(8px); padding:14px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.referral-actions small { font-size:11px; color:#9e9588; }
.referral-actions .btn { min-width:116px; }
.referral-action-buttons,.referral-spu-search { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.referral-actions { flex-wrap:wrap; }
.referral-spu-search { margin-top:14px; }
.referral-spu-search input { flex:1; min-width:160px; }
.referral-spu-option { display:block; width:100%; text-align:left; border:0; background:#f6f6fc; border-radius:10px; padding:12px 14px; margin-top:8px; cursor:pointer; color:#414561; }
.referral-spu-option small { display:block; margin-top:5px; color:#85899b; }
.referral-spu-option:hover { background:#ebeaff; }
.referral-spu-option:disabled { opacity:.5; cursor:not-allowed; }
.referral-editor [role="alert"] { color:#b54732; font-size:12px; line-height:1.7; scroll-margin-bottom:76px; }
.referral-meta { margin:18px 0; }
.referral-meta summary { font-size:11px; color:#9296a8; cursor:pointer; }
.referral-report-footer { margin-top:18px; display:flex; flex-wrap:wrap; gap:12px 30px; }
.referral-team { font-size:12px; }
.referral-team[open] { flex:1 0 100%; }
.referral-team summary { cursor:pointer; color:#868aa0; font-size:11px; }
.referral-table-scroll { overflow-x:auto; margin-top:12px; }
.referral-team table { width:100%; border-collapse:collapse; text-align:left; white-space:nowrap; }
.referral-team th,.referral-team td { padding:12px 16px; border:0; }
.referral-team th { color:#8d92a5; font-weight:500; }
.referral-team tbody tr:nth-child(odd) { background:#f8f8fc; }
.referral-workspace button:focus-visible,.referral-workspace summary:focus-visible { outline:2px solid #7773d8; outline-offset:2px; }
@media(max-width:1200px) { .referral-layout { grid-template-columns:250px minmax(0,1fr); gap:18px; } .referral-editor { padding-right:12px; padding-left:12px; } .referral-stats { gap:18px; padding:16px; } .referral-stat { flex-direction:column; align-items:flex-start; gap:4px; } }
@media(max-width:800px) { .referral-workspace { padding:20px 14px; } .referral-heading { align-items:flex-start; flex-direction:column; } .referral-heading-actions { width:100%; justify-content:space-between; } .referral-layout { grid-template-columns:1fr; height:auto; max-height:none; } .referral-records { max-height:340px; } #referralList { min-height:100px; } .referral-editor { padding:20px 4px 0; overflow:visible; } .referral-field-grid { grid-template-columns:1fr; } .referral-stat strong { font-size:23px; } .referral-stats { gap:12px; } .referral-stat span { font-size:10px; } .referral-month { gap:6px; } }