:root{
  --bg:#f4f6f8;
  --panel:#ffffff;
  --text:#18202a;
  --muted:#6b7280;
  --line:#e5e7eb;
  --blue:#2563eb;
  --green:#059669;
  --red:#dc2626;
  --amber:#d97706;
  --radius:8px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Microsoft YaHei",Arial,sans-serif;font-size:14px}
a{color:inherit;text-decoration:none}
.cs-shell{display:flex;min-height:100vh}
.cs-side{width:248px;background:#111827;color:#fff;display:flex;flex-direction:column;padding:20px 16px;position:fixed;inset:0 auto 0 0}
.cs-brand{display:flex;gap:12px;align-items:center;padding:4px 4px 24px}
.cs-brand-mark{width:40px;height:40px;border-radius:8px;background:#2563eb;display:grid;place-items:center;font-weight:700}
.cs-brand strong{display:block;font-size:16px}
.cs-brand span,.cs-side-footer span{display:block;color:#9ca3af;font-size:12px;margin-top:4px}
.cs-nav{display:flex;flex-direction:column;gap:6px}
.cs-nav a{padding:11px 12px;border-radius:8px;color:#d1d5db}
.cs-nav a:hover,.cs-nav a.is-active{background:#1f2937;color:#fff}
.cs-side-footer{margin-top:auto;border-top:1px solid #374151;padding-top:16px}
.cs-side-footer strong{display:block;margin:4px 0 12px}
.cs-side-footer a{color:#93c5fd}
.cs-main{margin-left:248px;width:calc(100% - 248px);padding:24px}
.cs-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.cs-top h1{font-size:24px;margin:0 0 6px}
.cs-top p{margin:0;color:var(--muted)}
.cs-primary,.cs-button{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--blue);background:var(--blue);color:#fff;cursor:pointer}
.cs-button.secondary{background:#fff;color:var(--text);border-color:var(--line)}
.cs-button.danger{background:var(--red);border-color:var(--red)}
.cs-flash{padding:12px 14px;border-radius:8px;margin-bottom:16px;background:#ecfdf5;color:#065f46;border:1px solid #bbf7d0}
.cs-flash.warning,.cs-flash.error{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.cs-grid{display:grid;gap:16px}
.cs-grid.stats{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:16px}
.cs-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.cs-card h2{font-size:16px;margin:0 0 14px}
.cs-stat span{display:block;color:var(--muted);margin-bottom:10px}
.cs-stat strong{font-size:30px}
.cs-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px}
input,select,textarea{width:100%;min-height:36px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:8px 10px;font:inherit;color:var(--text)}
textarea{min-height:92px;resize:vertical}
.cs-toolbar input,.cs-toolbar select{width:160px}
.cs-toolbar .wide{width:240px}
.cs-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.cs-table th,.cs-table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cs-table th{background:#f9fafb;color:#4b5563;font-weight:600}
.cs-table tr:last-child td{border-bottom:none}
.cs-table tr.has-record-image td{height:96px;vertical-align:middle}
.cs-badge{display:inline-flex;height:24px;align-items:center;border-radius:999px;padding:0 9px;background:#eef2ff;color:#3730a3;font-size:12px}
.cs-badge.new{background:#eff6ff;color:#1d4ed8}
.cs-badge.processing{background:#fff7ed;color:#c2410c}
.cs-badge.waiting_customer{background:#fefce8;color:#a16207}
.cs-badge.resolved{background:#ecfdf5;color:#047857}
.cs-badge.closed{background:#f3f4f6;color:#4b5563}
.cs-thumb{width:50px;height:50px;border-radius:8px;border:1px solid var(--line);object-fit:cover;background:#fff}
.cs-muted{color:var(--muted)}
.cs-record-product-cell{display:flex;gap:10px;align-items:center;min-width:180px}
.cs-product-list-thumb{width:44px;height:44px;border-radius:8px;border:1px solid var(--line);background:#f9fafb;display:grid;place-items:center;overflow:hidden;flex:0 0 auto;color:var(--muted);font-size:12px}
.cs-product-list-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cs-record-list-image{width:48px;height:48px;border-radius:8px;border:1px solid var(--line);background:#f9fafb;display:block;overflow:hidden;position:relative}
.cs-table tr.has-record-image .cs-record-list-image{width:96px;height:96px}
.cs-record-list-image img{width:100%;height:100%;object-fit:cover;display:block}
.cs-record-list-image span{position:absolute;right:4px;bottom:4px;height:18px;min-width:18px;border-radius:999px;background:rgba(17,24,39,.78);color:#fff;font-size:12px;line-height:18px;text-align:center;padding:0 5px}
.cs-form{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px}
.cs-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cs-field.full{grid-column:1/-1}
.cs-field label{display:block;margin-bottom:6px;color:#374151;font-weight:600}
.cs-actions{display:flex;gap:10px;margin-top:18px}
.cs-actions.full{grid-column:1/-1}
.cs-row-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cs-row-actions form{margin:0}
.cs-text-link{color:#1d4ed8;text-decoration:none;font-weight:600}
.cs-text-link:hover{text-decoration:underline}
.cs-product-list-link{display:inline-flex}
.cs-product-issue-pills{display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:520px}
.cs-product-issue-pill{display:inline-flex;align-items:center;min-height:22px;border-radius:999px;padding:2px 8px;background:#f1f5f9;border:1px solid #e2e8f0;color:#475569;font-size:12px;line-height:16px;white-space:nowrap}
.cs-product-detail{display:flex;flex-direction:column;gap:16px}
.cs-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.cs-section-head h2{margin:0 0 6px;font-size:18px}
.cs-section-head p{margin:0;color:var(--muted)}
.cs-category-inline-form{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.cs-product-category-table{margin-top:0}
.cs-issue-editor{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.cs-issue-row{display:grid;grid-template-columns:minmax(180px,1.1fr) minmax(180px,1fr) 92px;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}
.cs-issue-row:last-child{border-bottom:none}
.cs-issue-head{background:#f9fafb;color:#4b5563;font-weight:600}
.cs-issue-row input{min-height:38px}
.cs-issue-row.is-deleted{display:none}
.cs-issue-empty{border:0;border-radius:0;margin:0}
.cs-button.danger-text{color:#b91c1c;border-color:#fecaca;background:#fff}
.cs-button.danger-text:hover{background:#fef2f2}
.cs-product-editor{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;align-items:start}
.cs-product-main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cs-product-image{border-right:1px solid var(--line);padding-right:22px}
.cs-product-select{position:relative}
.cs-product-select-trigger{width:100%;min-height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:5px 9px;display:flex;align-items:center;gap:10px;font:inherit;color:var(--text);cursor:pointer;text-align:left}
.cs-product-select-trigger b{margin-left:auto;color:var(--muted);font-size:16px;font-weight:400}
.cs-product-select-menu{display:none;position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;max-height:280px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 28px rgba(15,23,42,.14);padding:6px}
.cs-product-select.is-open .cs-product-select-menu{display:block}
.cs-product-option{width:100%;min-height:46px;border:0;background:#fff;border-radius:6px;padding:6px;display:flex;align-items:center;gap:10px;font:inherit;color:var(--text);cursor:pointer;text-align:left}
.cs-product-option:hover,.cs-product-option.is-selected{background:#eff6ff}
.cs-product-mini{width:34px;height:34px;border-radius:6px;border:1px solid var(--line);background:#f9fafb;display:grid;place-items:center;overflow:hidden;flex:0 0 auto;color:var(--muted);font-size:12px}
.cs-product-mini img{width:100%;height:100%;object-fit:cover;display:block}
.cs-product-option-empty{padding:12px;color:var(--muted);text-align:center}
.cs-product-select-menu [data-choice-empty]{display:none!important}
.cs-choice-select{position:relative}
.cs-choice-select-trigger{width:100%;min-height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:5px 12px;display:flex;align-items:center;gap:10px;font:inherit;color:var(--text);cursor:pointer;text-align:left}
.cs-choice-select.is-disabled .cs-choice-select-trigger{background:#f9fafb;color:var(--muted)}
.cs-choice-select-trigger b{margin-left:auto;color:var(--muted);font-size:16px;font-weight:400}
.cs-choice-select-menu{display:none;position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;max-height:280px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 28px rgba(15,23,42,.14);padding:6px}
.cs-choice-select.is-open .cs-choice-select-menu{display:block}
.cs-choice-option{width:100%;min-height:46px;border:0;background:#fff;border-radius:6px;padding:6px 10px;display:flex;align-items:center;gap:10px;font:inherit;color:var(--text);cursor:pointer;text-align:left}
.cs-choice-option:hover,.cs-choice-option.is-selected{background:#eff6ff}
.cs-choice-option-empty{padding:12px;color:var(--muted);text-align:center}
.cs-image-label{display:block;margin-bottom:10px;color:#374151;font-weight:600}
.cs-image-preview{width:200px;height:200px;border:1px dashed #cbd5e1;border-radius:8px;background:#f9fafb;display:grid;place-items:center;overflow:hidden;color:var(--muted)}
.cs-image-preview img{width:100%;height:100%;object-fit:cover;display:none}
.cs-image-preview img.is-visible{display:block}
.cs-file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.cs-file-button{width:200px;margin-top:12px}
.cs-file-name{width:200px;min-height:20px;margin-top:8px;color:var(--muted);font-size:12px;word-break:break-all}
.cs-record-uploader{min-height:188px;border:1px solid var(--line);border-radius:8px;padding:16px;background:#f8fafc}
.cs-record-upload-actions{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.cs-record-upload-card{width:220px;min-height:124px;border:1px solid #d9dee7;border-radius:8px;background:#fff;display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:6px 12px;padding:18px;text-align:left;color:#1f2937;cursor:pointer;box-shadow:0 1px 3px rgba(15,23,42,.05)}
.cs-record-upload-card:hover,.cs-record-upload-card:focus{border-color:#93b4f6;box-shadow:0 0 0 3px rgba(37,99,235,.1);outline:none}
.cs-record-upload-card.paste{border-style:dashed;background:#fbfdff}
.cs-record-uploader.is-paste-ready .cs-record-upload-card.paste{border-color:var(--green);box-shadow:0 0 0 3px rgba(5,150,105,.12)}
.cs-record-upload-card.has-images{align-content:start}
.cs-record-action-icon{width:36px;height:36px;border-radius:8px;background:#eff6ff;color:var(--blue);display:grid;place-items:center;font-size:20px;font-weight:700;line-height:1}
.cs-record-upload-card.paste .cs-record-action-icon{background:#ecfdf5;color:var(--green);font-size:15px}
.cs-record-card-copy{display:grid;gap:4px;min-width:0}
.cs-record-upload-card strong{font-size:15px;line-height:20px}
.cs-record-upload-card small{color:var(--muted);font-size:12px;line-height:16px}
.cs-record-inline-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,56px);gap:7px;margin-top:6px}
.cs-record-inline-grid:empty{display:none}
.cs-record-inline-tile{width:56px;height:56px;border:1px solid var(--line);border-radius:6px;background:#fff;overflow:hidden;position:relative}
.cs-record-inline-tile img{width:100%;height:100%;object-fit:cover;display:block}
.cs-record-image-status{min-height:22px;margin-top:10px;color:var(--muted);font-size:12px}
.cs-record-image-status.is-ready{color:#047857}
.cs-record-image-status.is-warning{color:#b45309}
.cs-record-image-panel{display:none;border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.cs-record-image-panel.is-visible,.cs-record-image-panel.existing{display:block}
.cs-record-image-panel-title{font-weight:600;color:#374151;margin-bottom:8px}
.cs-record-image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,112px));gap:10px}
.cs-record-image-grid:empty{display:none}
.cs-record-image-tile{width:112px;height:136px;border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden;position:relative;display:block;color:var(--text)}
.cs-record-image-tile img{width:112px;height:96px;object-fit:cover;display:block;background:#eef2f7}
.cs-record-image-tile span{display:block;height:40px;padding:5px 7px;color:var(--muted);font-size:12px;line-height:15px;overflow:hidden;word-break:break-all}
.cs-record-image-remove{position:absolute;top:4px;right:4px;border:0;border-radius:999px;background:rgba(17,24,39,.78);color:#fff;min-width:20px;height:20px;padding:0 6px;font:inherit;font-size:13px;line-height:20px;cursor:pointer}
.cs-detail{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.cs-log{display:flex;flex-direction:column;gap:10px}
.cs-log-item{border:1px solid var(--line);border-radius:8px;padding:12px;background:#fff}
.cs-log-item span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
.cs-bar-row{display:grid;grid-template-columns:120px 1fr 40px;gap:12px;align-items:center;margin:10px 0}
.cs-bar-row div{height:10px;background:#eef2f7;border-radius:999px;overflow:hidden}
.cs-bar-row i{display:block;height:100%;background:var(--blue);border-radius:999px}
.cs-empty{color:var(--muted);padding:18px;text-align:center}
@media (max-width:1000px){
  .cs-side{position:static;width:100%;height:auto}
  .cs-shell{display:block}
  .cs-main{margin-left:0;width:100%;padding:16px}
  .cs-grid.stats,.cs-grid.two,.cs-form-grid,.cs-detail,.cs-product-editor,.cs-product-main{grid-template-columns:1fr}
  .cs-issue-row{grid-template-columns:1fr}
  .cs-issue-head{display:none}
  .cs-product-image{border-right:0;border-bottom:1px solid var(--line);padding:0 0 18px}
  .cs-record-upload-card{width:100%}
  .cs-record-inline-grid{grid-template-columns:repeat(auto-fill,56px)}
  .cs-toolbar input,.cs-toolbar select,.cs-toolbar .wide{width:100%}
}