/* Shared, fixed visual design for the after-sales workspace. */
:root{--accent:#147d71;--accent-dark:#0d6258;--accent-light:#218c80;--ink:#203b3b;--muted:#6c8080;--line:#dce7e4;--surface:#fff;--soft:#f4f8f6}
*{box-sizing:border-box;margin:0;padding:0}body{font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);background:#f2f6f4;min-height:100vh;padding:0 32px 48px;font-size:14px;line-height:1.5}button,input,select,textarea{font:inherit}button,a,input,select,textarea{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s}button:disabled{opacity:.55;cursor:wait}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #75bbad;outline-offset:3px}input:focus,select:focus,textarea:focus,[contenteditable]:focus{outline:none;border-color:var(--accent)!important;box-shadow:0 0 0 3px #147d7114}::selection{background:#cce9e0}::placeholder{color:#94a4a1;font-weight:400}.container{max-width:1320px;margin:auto}.app-header{min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);margin-bottom:0}.brand{display:inline-flex;align-items:center;gap:12px;font-size:19px;font-weight:700;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--accent);color:white;font-size:23px;box-shadow:0 5px 12px #147d7117}.brand-caption{display:block;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:2px;margin-top:1px}.header-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.btn-mapping{display:inline-flex;align-items:center;justify-content:center;padding:9px 15px;min-height:39px;background:#fff;border:1px solid var(--line);border-radius:9px;color:#45605b;font-size:13px;font-weight:500;white-space:nowrap}.btn-mapping:hover{border-color:#9ebfb6;background:#eaf3ee}.user-menu{position:relative;display:none;margin-left:12px}.user-greeting{display:flex;gap:8px;align-items:center;border:0;background:transparent;color:var(--ink);padding:4px}.user-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e0ebe3;color:#4c6b57;font-size:12px}.user-caret{color:var(--muted)}.user-dropdown{position:absolute;right:0;top:calc(100% + 10px);display:none;background:white;border:1px solid var(--line);border-radius:10px;padding:6px;min-width:130px;z-index:30;box-shadow:0 10px 30px #203b3b15}.user-menu.open .user-dropdown{display:block}.logout-btn{padding:9px 12px;width:100%;border:0;border-radius:6px;background:white;text-align:left;color:#b84c4c}.logout-btn:hover{background:#fff1ef}.page-intro{display:flex;align-items:center;justify-content:space-between;padding:30px 0 25px;gap:16px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--accent);margin-bottom:8px}.page-intro h1{font-size:26px;letter-spacing:.3px;font-weight:650;margin-bottom:7px}.page-intro p:last-child{color:var(--muted);font-size:13px}.intro-tag{border:1px solid #d2e2d9;color:#5b7b65;border-radius:20px;padding:6px 13px;font-size:12px;background:#e9f1e9}.intro-tag::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#6a977a;margin-right:7px}.main-content{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:22px;align-items:start}.preview-section,.form-section{min-width:0;background:white;padding:26px;border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 18px #203b3b04}.preview-section{position:sticky;top:20px}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:21px;gap:12px}.section-kicker{font-size:11px;color:#849791;display:block;margin-bottom:3px}.section-header h2{font-size:19px;font-weight:650}.btn-clear{background:transparent;border:1px solid var(--line);padding:6px 11px;border-radius:7px;font-size:12px;color:var(--muted)}.btn-clear:hover{background:var(--soft);color:var(--accent)}.preview-box{min-height:424px;max-height:65vh;padding:22px;background:#f6f9f7;border:1px solid #e2eae5;border-radius:10px;white-space:pre-wrap;line-height:1.9;font-size:14px;color:#36534b;overflow-y:auto;overflow-wrap:anywhere}.preview-box:empty::before{content:attr(data-placeholder);color:#8da39a;pointer-events:none}.preview-hint{font-size:11px;color:var(--muted);margin:16px 0 12px;line-height:1.7}.btn-copy,.btn-fetch,.btn-add{border:0;background:var(--accent);color:#fff;border-radius:8px;font-weight:500;padding:11px 18px}.btn-copy{width:100%;padding:12px;font-size:14px;box-shadow:0 4px 8px #147d7117}.btn-copy:hover,.btn-fetch:hover,.btn-add:hover{background:var(--accent-dark)}#mainForm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}.form-group{min-width:0}.form-group:first-child,.form-group:nth-child(n+4){grid-column:1/-1}.form-group label{display:block;color:#4c625c;font-size:13px;font-weight:500;margin-bottom:7px}.form-group input[type=text],.form-group input[type=number],.form-group select,.form-group textarea{width:100%;min-width:0;padding:10px 12px;background:#fff;border:1px solid #d9e4de;border-radius:8px;color:var(--ink);transition:border-color .15s,box-shadow .15s;font-weight:400}.form-group textarea{resize:vertical;display:block;min-height:65px}.input-with-btn{display:flex;gap:8px}.input-with-btn input,.input-with-btn select{flex:1;min-width:0}.btn-fetch{white-space:nowrap;padding:10px 20px}input[type=checkbox]{accent-color:var(--accent)}.btn-option-manage{flex-shrink:0;display:grid;place-items:center;border:1px solid var(--line);background:var(--soft);color:#70877d;border-radius:8px;width:40px}.btn-option-manage:hover{color:var(--accent);background:#eaf3ed}.attachments{border:1px dashed #bdd1c5;border-radius:10px;padding:14px;text-align:center;background:#f8faf8;min-height:95px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;cursor:pointer}.attachments:hover{border-color:var(--accent);background:#f0f7f2}.attachments.has-files{justify-content:flex-start}.upload-placeholder{width:100%;color:#70877b;font-size:12px}.upload-placeholder svg{width:25px;height:25px;margin-bottom:3px;opacity:.7}.upload-placeholder small{font-size:10px;color:#96a59c;display:block;margin-top:3px}.attachment-item{position:relative;width:80px;height:80px;border-radius:8px;overflow:hidden}.attachment-item img{width:100%;height:100%;object-fit:cover}.attachment-item .remove{position:absolute;top:4px;right:4px;border:0;border-radius:50%;background:white;width:22px;height:22px;color:#c45050}.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#142e3159;backdrop-filter:blur(4px);z-index:10000}.modal-content{background:white;border:1px solid var(--line);border-radius:16px;width:90%;max-width:500px;max-height:80vh;overflow:hidden;box-shadow:0 24px 90px #102d302e}.modal-header{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.modal-header h3{font-size:18px}.modal-close{background:none;border:0;font-size:24px;color:var(--muted);width:30px;height:30px}.modal-body{padding:24px;max-height:calc(80vh - 80px);overflow:auto}.option-item{display:flex;gap:8px;align-items:center;margin-bottom:10px}.option-item input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:7px}.option-item button{padding:8px 10px;border:1px solid var(--line);background:#fff;border-radius:7px;color:#b35c53}#optionList{margin-bottom:15px}#reissueModal,#initModal{background:#142e3159!important;backdrop-filter:blur(4px)}#reissueModal>div,#initModal>div{border-radius:16px!important;border:1px solid var(--line);box-shadow:0 24px 90px #102d302e!important}#reissueBtn,#initBtnSend,#initBtnVerify{background:var(--accent)!important}#reissueText,#initSmsCode{border-color:var(--line)!important;color:var(--ink)}
/* Compact mode keeps the existing one-column workflow. */
.btn-compact.active{background:var(--accent);border-color:var(--accent);color:white}body.compact-mode{padding:8px 10px 90px}body.compact-mode .container{max-width:460px}body.compact-mode .app-header{flex-wrap:wrap;gap:12px;padding:8px 0 12px;min-height:0}body.compact-mode .brand{font-size:15px}body.compact-mode .brand-mark{width:33px;height:33px;font-size:18px;border-radius:10px}body.compact-mode .brand-caption{font-size:10px}body.compact-mode .header-actions{gap:5px;width:100%}body.compact-mode .btn-mapping{font-size:11px;padding:6px 8px;min-height:30px}body.compact-mode .user-menu{margin-left:auto}body.compact-mode .user-greeting{font-size:11px}body.compact-mode .user-avatar{display:none}body.compact-mode .page-intro{display:none}body.compact-mode .main-content{grid-template-columns:1fr;gap:12px;margin-top:14px}body.compact-mode .preview-section,body.compact-mode .form-section{padding:15px;position:static}body.compact-mode .section-header{margin-bottom:10px}body.compact-mode .section-header h2{font-size:15px}body.compact-mode .section-kicker{display:none}body.compact-mode .preview-box{min-height:110px;max-height:160px;padding:12px;font-size:12px}body.compact-mode .preview-hint{font-size:10px;margin:8px 0}body.compact-mode .btn-copy{padding:8px}body.compact-mode #mainForm{gap:12px}body.compact-mode .form-group input,body.compact-mode .form-group select,body.compact-mode .form-group textarea{padding:8px;font-size:12px}body.compact-mode .btn-fetch{padding:8px 12px}body.compact-mode .attachments{min-height:75px}
@media(max-width:1050px){body{padding:0 20px 90px}.app-header{flex-wrap:wrap;gap:12px;padding:20px 0}.page-intro h1{font-size:23px}.preview-section,.form-section{padding:20px}.main-content{gap:16px}.user-menu{margin-left:0}}
@media(max-width:760px){body{padding:0 14px 90px}.main-content{grid-template-columns:1fr}.preview-section{position:static}.preview-box{min-height:190px;max-height:300px}.page-intro{padding:22px 0}.page-intro h1{font-size:21px}.intro-tag{display:none}.header-actions{gap:6px}.btn-mapping{padding:8px 10px;font-size:12px}.user-greeting{font-size:12px}.brand{font-size:17px}.brand-mark{width:38px;height:38px}.section-header h2{font-size:17px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}