* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; background:#f5f6fa; color:#333; min-height:100vh; }
header { background:#fff; padding:20px 32px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; box-shadow:0 1px 3px rgba(0,0,0,0.08); position:sticky; top:0; z-index:100; }
header h1 { font-size:22px; font-weight:600; color:#1a1a2e; }
.header-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
select, input[type="text"], input[type="number"], input[type="date"], input[type="search"], input[type="url"], textarea { padding:8px 12px; border:1px solid #d0d5dd; border-radius:6px; font-size:14px; background:#fff; outline:none; transition:border-color 0.2s; font-family:inherit; }
select:focus, input:focus { border-color:#4f6ef7; }
button { cursor:pointer; font-size:14px; border:none; border-radius:6px; padding:8px 16px; font-weight:500; transition:all 0.2s; }
.btn-primary { background:#4f6ef7; color:#fff; }
.btn-primary:hover { background:#3b5bdb; }
.btn-secondary { background:#e8ecf4; color:#333; }
.btn-secondary:hover { background:#d0d5dd; }
.btn-sm { padding:4px 10px; font-size:12px; }
.btn-danger { background:#e74c3c; color:#fff; }
.btn-danger:hover { background:#c0392b; }
#statsBar { margin:20px 32px; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.stat-card { background:#fff; padding:14px 18px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,0.06); display:flex; flex-direction:column; }
.stat-card .stat-label { font-size:12px; color:#888; margin-bottom:4px; }
.stat-numbers { display:flex; gap:10px; justify-content:space-around; }
.stat-item { display:flex; flex-direction:column; align-items:center; gap:1px; min-width:0; }
.stat-num-label { font-size:10px; color:#888; white-space:nowrap; }
.stat-num { font-size:20px; font-weight:600; }
.stat-num.in-progress { color:#f39c12; }
.stat-num.completed { color:#27ae60; }
.stat-num.rejected { color:#e74c3c; }
.stat-num.total { color:#4f6ef7; }
.stat-card.grand { border:1px solid #4f6ef7; background:#f0f2ff; }
.tab-bar { display:flex; margin:0 32px 16px; background:#e8ecf4; border-radius:8px; overflow:hidden; align-items:center; flex-wrap:wrap; }
.tab-bar .tab { padding:10px 24px; background:transparent; color:#666; font-weight:500; border-radius:0; cursor:pointer; border:none; }
.tab-bar .tab.active { background:#fff; color:#1a1a2e; box-shadow:0 1px 3px rgba(0,0,0,0.1); }
.tab-actions { margin-left:auto; display:flex; gap:8px; padding:6px 12px; align-items:center; flex-wrap:wrap; }
#cardGrid { margin:0 32px 32px; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.style-card { background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,0.06); cursor:pointer; transition:box-shadow 0.2s,transform 0.15s; }
.style-card:hover { box-shadow:0 4px 16px rgba(79,110,247,0.12); transform:translateY(-2px); }
.style-card .card-image { width:100%; height:140px; object-fit:contain; background:#f0f0f0; display:block; }
.style-card .card-image.empty { display:flex; align-items:center; justify-content:center; color:#bbb; font-size:32px; height:140px; }
.style-card .card-body { padding:14px; }
.style-card .card-body h3 { font-size:16px; font-weight:600; margin-bottom:6px; }
.style-card .card-body .studio-tag { font-size:12px; color:#4f6ef7; background:#eef1ff; padding:2px 8px; border-radius:4px; display:inline-block; margin-bottom:6px; }
.style-card .card-body .stage-badge { font-size:11px; padding:2px 8px; border-radius:10px; display:inline-block; }
.stage-badge.stage-intention { background:#fef3cd; color:#856404; }
.stage-badge.stage-drawing { background:#d1ecf1; color:#0c5460; }
.stage-badge.stage-selection { background:#ffeaa7; color:#6c5200; }
.stage-badge.stage-color { background:#e8d5f5; color:#5b2c6f; }
.stage-badge.stage-sample { background:#d4edda; color:#155724; }
.stage-badge.stage-order { background:#cce5ff; color:#004085; }
.stage-badge.stage-done { background:#27ae60; color:#fff; }
.card-footer { display:flex; justify-content:space-between; align-items:center; margin-top:8px; padding-top:8px; border-top:1px solid #f0f0f0; font-size:12px; color:#999; }
.card-order-note { font-size:11px; color:#888; padding:4px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.empty-state { grid-column:1/-1; text-align:center; padding:60px 20px; color:#999; font-size:15px; }
.progress-wrap { width:100%; height:4px; background:#e8ecf4; border-radius:2px; margin-top:6px; overflow:hidden; }
.progress-fill { height:100%; background:#4f6ef7; border-radius:2px; transition:width 0.3s; }
.progress-fill.completed { background:#27ae60; }
.progress-fill.abandoned { background:#e74c3c; }
.abandoned-chip { background:#e74c3c; color:#fff; font-size:11px; padding:2px 8px; border-radius:10px; display:inline-block; margin-left:6px; }
.modal { display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); align-items:center; justify-content:center; }
.modal.show { display:flex; }
.modal-content { background:#fff; border-radius:12px; padding:28px; width:90%; max-width:480px; max-height:90vh; overflow-y:auto; position:relative; animation:modalIn 0.2s; }
.modal-content.modal-lg { max-width:640px; }
@keyframes modalIn { from{opacity:0;transform:scale(0.95)translateY(10px)} to{opacity:1;transform:scale(1)translateY(0)} }
.close { position:absolute; z-index:10; right:16px; top:12px; font-size:28px; color:#999; cursor:pointer; }
.close:hover { color:#333; }
button.close { width:40px; height:40px; padding:0; border-radius:50%; background:transparent; line-height:1; }
button.close:hover { background:#f2f4f7; }
.modal-content h2 { font-size:18px; margin-bottom:20px; padding-right:24px; }
form label { display:block; margin-bottom:16px; font-size:14px; color:#555; }
form label select, form label input { display:block; width:100%; margin-top:6px; }
.inline-form { display:flex; gap:8px; margin-bottom:16px; }
.inline-form input { flex:1; }
.studio-item { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f0f0f0; font-size:14px; }
.studio-item:last-child { border-bottom:none; }
#styleDetailContent h3 { font-size:20px; margin-bottom:6px; }
.detail-meta { display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; font-size:13px; color:#888; }
.detail-image { width:100%; max-height:320px; object-fit:contain; background:#f8f8f8; border-radius:8px; cursor:pointer; margin-bottom:20px; display:block; }
.detail-image.empty { height:160px; display:flex; align-items:center; justify-content:center; color:#ccc; font-size:40px; cursor:default; }
.detail-info-section { background:#f8f9fc; border-radius:8px; padding:14px 18px; margin-bottom:16px; font-size:13px; line-height:1.8; color:#555; }
.detail-info-section .info-row { display:flex; align-items:baseline; gap:8px; }
.detail-info-section .info-label { color:#999; min-width:80px; flex-shrink:0; }
.detail-info-section .info-value { color:#333; word-break:break-all; }
.workflow-steps { display:flex; flex-direction:column; gap:6px; margin:20px 0; }
.workflow-step { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:8px; background:#f9f9fc; border:1px solid #eee; transition:all 0.2s; }
.workflow-step.active { background:#eef1ff; border-color:#4f6ef7; }
.workflow-step.completed { background:#e8f8e8; border-color:#27ae60; }
.workflow-step .step-icon { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; flex-shrink:0; background:#e8ecf4; color:#999; }
.workflow-step.completed .step-icon { background:#27ae60; color:#fff; }
.workflow-step.active .step-icon { background:#4f6ef7; color:#fff; }
.workflow-step .step-label { flex:1; font-size:14px; }
.workflow-step .step-action { flex-shrink:0; }
.workflow-step .step-action button { white-space:nowrap; }
.detail-actions { margin-top:20px; display:flex; gap:8px; }
.order-note-input { width:100%; min-height:60px; padding:8px 10px; border:1px solid #d0d5dd; border-radius:6px; font-size:13px; font-family:inherit; resize:vertical; }
#imageZoomModal { z-index:2000; padding:16px; }
.zoom-content { width:calc(100vw - 32px); height:calc(100dvh - 32px); display:flex; align-items:center; justify-content:center; }
.zoom-content img { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; border-radius:4px; }
.zoom-close { color:#fff; z-index:1001; }
.zoom-close:hover, button.zoom-close:hover { color:#ddd; background:rgba(255,255,255,.12); }
#loginView { display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%); }
.login-card { background:#fff; padding:40px 36px; border-radius:12px; width:380px; max-width:92vw; box-shadow:0 8px 32px rgba(0,0,0,0.2); }
.login-logo { font-size:28px; font-weight:700; color:#1a1a2e; text-align:center; margin-bottom:4px; }
.login-title { font-size:15px; color:#888; text-align:center; margin-bottom:28px; }
.login-field { margin-bottom:16px; }
.login-field label { display:block; font-size:13px; color:#555; margin-bottom:4px; }
.login-field input { width:100%; padding:10px 12px; border:1px solid #d0d5dd; border-radius:6px; font-size:14px; outline:none; }
.login-field input:focus { border-color:#4f6ef7; }
.login-btn { width:100%; padding:10px; font-size:15px; margin-top:8px; }
.login-hint { text-align:center; font-size:11px; color:#bbb; margin-top:16px; }
#filterBar { margin:0 32px 12px; display:flex; flex-direction:column; gap:6px; }
.filter-studios { display:flex; gap:6px; flex-wrap:wrap; }
.filter-studio-btn { padding:4px 12px; border:1px solid #d0d5dd; border-radius:14px; background:#fff; font-size:12px; cursor:pointer; transition:all 0.15s; color:#666; }
.filter-studio-btn:hover { border-color:#4f6ef7; color:#4f6ef7; }
.filter-studio-btn.active { background:#4f6ef7; color:#fff; border-color:#4f6ef7; }
.filter-dates { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.filter-dates input[type="date"] { padding:4px 8px; border:1px solid #d0d5dd; border-radius:6px; font-size:12px; background:#fff; outline:none; }
.filter-dates span { font-size:12px; color:#888; }
.card-view-link { color:#4f6ef7; cursor:pointer; font-size:12px; font-weight:500; }
#imagePreview { margin-top:8px; max-width:200px; border-radius:6px; overflow:hidden; }
#imagePreview img { width:100%; height:auto; display:block; }

.workspace-switch { display:flex; gap:6px; margin:18px 32px 14px; padding:5px; width:max-content; background:#e8ecf4; border-radius:10px; }
.workspace-tab { padding:9px 22px; background:transparent; color:#667085; }
.workspace-tab.active { color:#fff; background:#1a1a2e; box-shadow:0 2px 6px rgba(26,26,46,.18); }
.inspiration-summary { margin:0 32px 16px; padding:20px 22px; background:linear-gradient(135deg,#252a4a,#4f6ef7); color:#fff; border-radius:12px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.inspiration-summary h2 { font-size:21px; margin-bottom:5px; }
.inspiration-summary p { color:rgba(255,255,255,.78); font-size:13px; }
.inspiration-summary-actions { display:flex; gap:8px; flex-wrap:wrap; flex-shrink:0; }
.inspiration-summary-actions .btn-secondary { background:rgba(255,255,255,.92); }
.inspiration-summary-actions .btn-primary { background:#fff; color:#334fd6; }
.inspiration-toolbar { margin:0 32px 16px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.inspiration-toolbar input[type="search"] { flex:1; min-width:230px; }
.inspiration-filter-status { min-width:78px; color:#667085; font-size:12px; white-space:nowrap; }
.inspiration-grid { margin:0 32px 24px; display:grid; grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); gap:16px; }
.inspiration-card { background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 1px 5px rgba(16,24,40,.08); cursor:pointer; transition:transform .15s,box-shadow .2s; min-width:0; }
.inspiration-card:hover { transform:translateY(-2px); box-shadow:0 7px 22px rgba(79,110,247,.14); }
.inspiration-cover-wrap { position:relative; height:190px; background:#f0f1f5; }
.inspiration-cover { width:100%; height:100%; object-fit:cover; display:block; }
.image-count { position:absolute; right:9px; bottom:9px; padding:3px 8px; color:#fff; background:rgba(0,0,0,.62); border-radius:12px; font-size:11px; }
.inspiration-card-body { padding:13px 14px 14px; }
.inspiration-card-title { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
.inspiration-card-title h3 { font-size:15px; line-height:1.35; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.inspiration-meta { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:7px; }
.meta-chip { display:inline-flex; align-items:center; padding:2px 7px; border-radius:9px; background:#f1f3f9; color:#667085; font-size:11px; }
.meta-chip.platform { color:#3448b8; background:#edf0ff; }
.inspiration-note-preview { min-height:34px; color:#777; font-size:12px; line-height:1.45; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.inspiration-card-footer { display:flex; justify-content:space-between; gap:8px; margin-top:10px; padding-top:9px; border-top:1px solid #f0f0f0; color:#98a2b3; font-size:11px; }
.status-chip { display:inline-block; flex-shrink:0; padding:3px 8px; border-radius:10px; font-size:11px; font-weight:500; }
.status-collected { color:#3554d1; background:#edf1ff; }
.status-considering { color:#9a6200; background:#fff2c7; }
.status-adopted { color:#187646; background:#e2f7eb; }
.status-archived { color:#667085; background:#eaecf0; }
.inspiration-pagination { margin:0 32px 28px; display:flex; justify-content:center; align-items:center; gap:10px; }
.form-grid { display:grid; gap:0 14px; }
.form-grid.two-columns { grid-template-columns:1fr 1fr; }
.inspiration-editor-modal { max-width:760px !important; }
.inspiration-editor-modal form > label input, .inspiration-editor-modal form > label select { width:100%; margin-top:6px; }
.inspiration-upload-block { padding:14px; margin-bottom:16px; border:1px solid #dce1ef; border-radius:9px; background:#fafbfe; }
.upload-heading { display:flex; justify-content:space-between; gap:8px; margin-bottom:10px; font-size:14px; color:#555; }
#inspirationUploadStatus { color:#667085; font-size:12px; }
.upload-tip { margin-left:8px; font-size:11px; color:#98a2b3; }
.inspiration-drop-zone { margin-top:10px; padding:16px; border:1px dashed #aab4d6; border-radius:8px; color:#7b86a8; background:#fff; text-align:center; font-size:12px; }
.inspiration-drop-zone.dragover { border-color:#4f6ef7; background:#eef1ff; color:#4f6ef7; }
.inspiration-image-preview { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:10px; }
.inspiration-preview-item { position:relative; aspect-ratio:1; border-radius:7px; overflow:hidden; background:#e9ebf2; }
.inspiration-preview-item img { width:100%; height:100%; object-fit:cover; display:block; }
.inspiration-preview-item button { position:absolute; right:4px; top:4px; width:25px; height:25px; padding:0; border-radius:50%; background:rgba(0,0,0,.68); color:#fff; line-height:25px; }
.inspiration-preview-item .sort-index { position:absolute; left:5px; bottom:5px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; line-height:20px; text-align:center; color:#fff; background:rgba(0,0,0,.6); font-size:10px; }
.note-label textarea { width:100%; min-height:120px; margin-top:7px; resize:vertical; line-height:1.55; }
.voice-note-toolbar { display:flex; align-items:center; gap:9px; margin-top:7px; }
.voice-note-toolbar span { color:#98a2b3; font-size:11px; }
.voice-btn.listening { color:#fff; background:#e74c3c; animation:voicePulse 1.2s infinite; }
@keyframes voicePulse { 50% { box-shadow:0 0 0 5px rgba(231,76,60,.16); } }
.modal-form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
.inspiration-detail-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:0 0 14px; }
.inspiration-detail-image { position:relative; min-width:0; padding:0; overflow:hidden; border:1px solid #e6e9f0; border-radius:10px; background:#f7f8fb; cursor:zoom-in; }
.inspiration-detail-image img { display:block; width:100%; aspect-ratio:4/3; object-fit:contain; background:#f7f8fb; }
.inspiration-detail-image.is-primary { grid-column:1/-1; }
.inspiration-detail-image.is-primary img { height:clamp(280px,52vh,560px); aspect-ratio:auto; }
.inspiration-detail-image span { position:absolute; right:10px; bottom:10px; padding:5px 9px; border-radius:14px; color:#fff; background:rgba(17,24,39,.68); font-size:11px; opacity:0; transform:translateY(3px); transition:.18s ease; }
.inspiration-detail-image:hover span, .inspiration-detail-image:focus-visible span { opacity:1; transform:none; }
.inspiration-detail-title { padding-right:28px; }
.inspiration-detail-note { white-space:pre-wrap; word-break:break-word; }
.inspiration-detail-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.inspiration-source-link { color:#4f6ef7; word-break:break-all; }
.inline-pair { display:flex; gap:8px; margin-top:6px; }
.inline-pair input { flex:1; margin-top:0 !important; }
.inline-pair select { width:115px !important; margin-top:0 !important; }

@media(max-width:640px){
header{ padding:14px 16px; }
header h1{ font-size:18px; }
#statsBar{ margin:12px 16px; grid-template-columns:1fr 1fr; }
.tab-bar{ margin:0 16px 12px; overflow-x:auto; }
#cardGrid{ margin:0 16px 16px; grid-template-columns:1fr; }
#filterBar{ margin:0 16px 8px; }
.modal-content{ width:95%; padding:20px; }
.tab-actions{ margin-left:0; width:100%; justify-content:flex-end; }
.workflow-step{ flex-wrap:wrap; }
.workflow-step .step-action{ width:100%; margin-top:4px; }
.stat .stat-numbers{ display:flex !important; }
.stat-num{ font-size:16px !important; }
.stat-num-label{ font-size:9px !important; }
.style-card .card-image{ height:120px; }
.workspace-switch{ margin:12px 16px; width:calc(100% - 32px); }
.workspace-tab{ flex:1; padding:9px 8px; }
.inspiration-summary{ margin:0 16px 12px; padding:16px; align-items:flex-start; flex-direction:column; }
.inspiration-summary-actions{ width:100%; }
.inspiration-summary-actions button{ flex:1; }
.inspiration-toolbar{ margin:0 16px 12px; }
.inspiration-toolbar input[type="search"]{ min-width:100%; }
.inspiration-toolbar select{ flex:1; min-width:135px; }
.inspiration-filter-status{ width:100%; min-width:0; }
.inspiration-grid{ margin:0 16px 18px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.inspiration-cover-wrap{ height:145px; }
.inspiration-card-body{ padding:10px; }
.inspiration-card-title{ display:block; }
.inspiration-card-title .status-chip{ margin-top:5px; }
.inspiration-note-preview{ min-height:0; }
.inspiration-pagination{ margin:0 16px 20px; }
.form-grid.two-columns{ grid-template-columns:1fr; }
.inspiration-image-preview{ grid-template-columns:repeat(3,1fr); }
.inspiration-detail-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.inspiration-detail-image.is-primary img{ height:clamp(240px,46vh,440px); }
.inspiration-detail-image span{ opacity:1; }
.upload-tip{ display:block; margin:7px 0 0; }
}
@media(max-width:768px){
.modal-content{ width:100%; max-width:100%; height:100%; max-height:100vh; border-radius:0; padding:20px 16px; }
#cardGrid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
}

/* ===== 2026 usability refresh ===== */
body { background:#f3f5f9; color:#1f2937; }
button, select, input, textarea { touch-action:manipulation; }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline:3px solid rgba(79,110,247,.25); outline-offset:2px; }
.app-header { padding:14px 32px; min-height:70px; border-bottom:1px solid #e7eaf0; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.brand-heading { display:flex; align-items:center; gap:11px; min-width:0; }
.brand-mark { width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:11px; color:#fff; background:linear-gradient(145deg,#20253f,#4f6ef7); font-size:19px; font-weight:700; box-shadow:0 5px 14px rgba(79,110,247,.2); }
.brand-heading h1 { font-size:18px; line-height:1.25; }
.brand-heading p { margin-top:2px; color:#8a94a6; font-size:11px; }
.user-chip { padding:6px 10px; border-radius:18px; color:#536076; background:#f1f3f7; font-size:12px; }
.header-actions .btn-sm { min-height:32px; padding:6px 11px; }
.workspace-switch { margin-top:16px; margin-bottom:12px; }
#statsBar { margin-top:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.stat-card { min-width:0; border:1px solid #edf0f5; box-shadow:0 2px 9px rgba(16,24,40,.045); }
.stat-card.grand { border-color:#8fa2ff; background:linear-gradient(145deg,#f8f9ff,#eef1ff); }

.primary-toolbar { margin:0 32px 12px; padding:7px; overflow:visible; border:1px solid #e5e9f0; background:#fff; box-shadow:0 2px 10px rgba(16,24,40,.04); }
.status-tabs { display:flex; align-items:center; flex-shrink:0; }
.primary-toolbar .tab { min-height:38px; border-radius:7px; padding:8px 17px; }
.primary-toolbar .tab.active { color:#fff; background:#20253f; box-shadow:0 3px 8px rgba(32,37,63,.18); }
.primary-toolbar .tab-actions { gap:7px; padding:0; }
.style-search-wrap { display:flex; align-items:center; min-width:280px; }
.style-search-wrap input { width:235px; min-height:38px; border-radius:7px 0 0 7px; }
.style-search-wrap button { min-height:38px; border-radius:0 7px 7px 0; }
.primary-toolbar select, .filter-toggle, .add-style-btn, .management-menu > summary { min-height:38px; }
.filter-toggle { display:inline-flex; align-items:center; justify-content:center; gap:5px; }
.filter-count { min-width:18px; height:18px; align-items:center; justify-content:center; padding:0 5px; border-radius:9px; color:#fff; background:#4f6ef7; font-size:10px; }
.management-menu { position:relative; }
.management-menu > summary { display:flex; align-items:center; list-style:none; cursor:pointer; padding:8px 13px; border-radius:6px; color:#394150; background:#e8ecf4; font-size:14px; font-weight:500; }
.management-menu > summary::-webkit-details-marker { display:none; }
.management-menu-popover { position:absolute; z-index:120; top:calc(100% + 8px); right:0; width:170px; padding:8px; display:grid; gap:6px; border:1px solid #e2e7ef; border-radius:10px; background:#fff; box-shadow:0 12px 30px rgba(16,24,40,.15); }
.management-menu-popover button { width:100%; min-height:38px; text-align:left; }

#filterBar.filter-panel { display:none; margin:0 32px 12px; padding:16px 18px; gap:10px; border:1px solid #e0e5ed; border-radius:12px; background:#fff; box-shadow:0 5px 18px rgba(16,24,40,.06); }
#filterBar.filter-panel.show { display:flex; }
.filter-panel-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:3px; }
.filter-panel-close { width:34px; height:34px; padding:0; color:#758195; background:transparent; font-size:24px; }
.filter-studios { align-items:center; min-height:30px; }
.filter-group-label { width:58px; flex:0 0 58px; color:#7d8798; font-size:12px; }
.filter-studio-btn { min-height:30px; display:inline-flex; align-items:center; padding:5px 12px; border-radius:15px; }
.filter-dates:before { content:'创建日期'; width:58px; flex:0 0 58px; color:#7d8798; font-size:12px; }
.filter-panel-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:5px; padding-top:12px; border-top:1px solid #edf0f4; }
.filter-panel-actions button { min-width:92px; }
.filter-panel-overlay { display:none; }
.active-filters { display:flex; flex-wrap:wrap; gap:7px; margin:0 32px 12px; }
.active-filters:empty { display:none; }
.active-filter-chip { min-height:30px; padding:4px 10px; border:1px solid #ccd5ff; border-radius:16px; color:#4058c7; background:#f2f4ff; font-size:12px; }
.active-filter-chip span { margin-left:4px; color:#7d8fd8; font-size:16px; }
.clear-filter-link { min-height:30px; padding:4px 7px; color:#667085; background:transparent; font-size:12px; }

#cardGrid { grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:15px; }
.style-card { min-width:0; border:1px solid #e8ebf1; border-radius:12px; box-shadow:0 2px 10px rgba(16,24,40,.055); }
.style-card:hover { box-shadow:0 10px 26px rgba(56,75,160,.13); }
.card-image-button { display:block; width:100%; height:176px; padding:0; overflow:hidden; border:0; border-radius:0; background:#f0f2f6; }
.card-image-button.card-image.empty { display:flex; height:176px; align-items:center; justify-content:center; color:#b8bfcb; font-size:30px; }
.style-card .card-image { width:100%; height:100%; object-fit:contain; background:#f0f2f6; }
.style-card .card-body { padding:13px 14px 12px; }
.card-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.style-card .card-title-row h3 { min-width:0; margin:0; overflow:hidden; color:#1f2937; font-size:15px; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }
.card-title-row .stage-badge { flex-shrink:0; }
.card-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.style-card .studio-tag, .brand-tag { display:inline-flex; align-items:center; margin:0; padding:3px 7px; border-radius:5px; font-size:11px; }
.brand-tag { color:#6752b5; background:#f0edff; }
.card-meta-line { min-height:18px; margin-top:8px; overflow:hidden; color:#7d8798; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.card-progress-row:empty { display:none; }
.card-progress-row { margin-top:6px; }
.style-card .progress-wrap { margin-top:9px; }
.style-card .card-footer { margin-top:10px; padding-top:9px; }
.card-view-link { min-height:auto; padding:0; border:0; color:#4f6ef7; background:transparent; font-weight:600; }
.card-view-link:hover { color:#354fc5; background:transparent; }
.empty-state { display:flex; flex-direction:column; align-items:center; gap:9px; }
.empty-state strong { color:#515c70; font-size:16px; }
.empty-state span { color:#98a2b3; font-size:13px; }
.loading-spinner { width:22px; height:22px; border:3px solid #e4e8f1; border-top-color:#4f6ef7; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.error-state { color:#7d8798; }

#styleDetailModal .modal-content { max-width:880px; }
.detail-title { padding-right:32px; color:#182033; font-size:23px !important; }
.detail-meta { gap:7px; margin-bottom:14px; }
.detail-meta span { padding:4px 8px; border-radius:10px; color:#667085; background:#f2f4f7; font-size:11px; }
.current-action-card { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 18px; padding:16px 18px; border:1px solid #b9c5ff; border-radius:12px; background:linear-gradient(145deg,#f5f7ff,#edf1ff); }
.current-action-copy { min-width:180px; }
.current-action-kicker { display:block; margin-bottom:3px; color:#586bd1; font-size:11px; font-weight:600; }
.current-action-card strong { display:block; color:#243674; font-size:17px; }
.current-action-card p { margin-top:4px; color:#697595; font-size:12px; line-height:1.45; }
.current-action-buttons { display:flex; align-items:center; justify-content:flex-end; gap:8px; max-width:440px; }
.current-action-buttons button { min-height:40px; white-space:nowrap; }
.current-action-buttons .order-note-input { width:245px; min-height:56px; }
.action-complete { border-color:#a8dfbd; background:linear-gradient(145deg,#f1fbf5,#e5f7ed); }
.action-complete .current-action-kicker, .action-complete strong { color:#187646; }
.action-status-icon { color:#25a360; font-size:34px; }
.action-rejected { border-color:#f0c1bd; background:#fff5f4; }
.action-rejected .current-action-kicker, .action-rejected strong { color:#b53d34; }
.viewer-hint { flex-shrink:0; color:#7d8798; font-size:12px; }
.detail-overview-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:16px; align-items:start; }
.detail-image-column { min-width:0; }
.detail-image { max-height:350px; margin:0; }
.detail-info-section { height:100%; margin:0; }
.inline-sole-image { width:24px; height:24px; object-fit:contain; vertical-align:middle; margin-right:4px; border-radius:3px; cursor:pointer; }
.workflow-heading { display:flex; justify-content:space-between; margin:22px 0 10px; }
.workflow-heading strong { display:block; color:#2d3748; font-size:16px; }
.workflow-heading span { display:block; margin-top:2px; color:#98a2b3; font-size:11px; }
.workflow-current-label { padding:4px 8px; border-radius:9px; color:#4058c7; background:#dfe5ff; font-size:11px; }
.detail-actions { padding-top:14px; border-top:1px solid #edf0f4; }
.detail-actions button { min-height:38px; }

.form-intro { margin:-10px 0 18px; color:#7d8798; font-size:12px; line-height:1.5; }
.compact-form-grid label select, .compact-form-grid label input { width:100%; }
.required-mark { color:#e2493f; }
.optional-label { color:#98a2b3; font-size:11px; }
.form-upload-card { margin-bottom:14px; padding:14px; border:1px solid #dfe4ec; border-radius:10px; background:#fafbfc; }
.upload-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.optional-form-section { margin-bottom:16px; border:1px solid #dfe4ec; border-radius:10px; background:#fff; }
.optional-form-section > summary { padding:13px 14px; cursor:pointer; color:#3f4a5b; font-size:14px; font-weight:600; }
.optional-form-section > summary span { margin-left:5px; color:#98a2b3; font-size:11px; font-weight:400; }
.optional-form-body { padding:3px 14px 14px; }
.optional-form-body.full-span, .full-span { grid-column:1/-1; }
.required-upload-block { border-color:#ccd5ff; background:#f9faff; }
.upload-heading small { color:#98a2b3; font-weight:400; }
.sticky-form-actions { position:sticky; z-index:5; bottom:-28px; margin:10px -28px -28px; padding:13px 28px; border-top:1px solid #e5e9f0; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); }
.sticky-form-actions button { min-width:100px; min-height:40px; }

.toast-container { position:fixed; z-index:5000; right:20px; top:84px; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { max-width:340px; padding:11px 14px; transform:translateY(-8px); opacity:0; border:1px solid #d9e0ec; border-radius:9px; color:#354052; background:#fff; box-shadow:0 10px 28px rgba(16,24,40,.16); transition:.2s ease; font-size:13px; }
.toast.show { transform:translateY(0); opacity:1; }
.toast-success { border-color:#b8e2c8; color:#187646; background:#f2fbf6; }
.toast-error { border-color:#f0c2bd; color:#b42318; background:#fff6f5; }
.toast-info { border-color:#c8d2ff; color:#4058c7; background:#f5f7ff; }

@media(max-width:900px) {
  .primary-toolbar { align-items:flex-start; }
  .status-tabs { width:100%; }
  .primary-toolbar .tab-actions { width:100%; margin-left:0; }
  .style-search-wrap { flex:1; }
  .style-search-wrap input { width:100%; }
  .detail-overview-grid { grid-template-columns:1fr; }
  .detail-image { max-height:330px; }
}

@media(max-width:640px) {
  body.filter-panel-open { overflow:hidden; }
  .app-header { position:relative; min-height:auto; padding:12px 16px; align-items:flex-start; }
  .brand-mark { width:34px; height:34px; border-radius:9px; font-size:17px; }
  .brand-heading h1 { font-size:17px; }
  .brand-heading p { font-size:10px; }
  .header-actions { width:100%; gap:7px; }
  .header-actions .user-chip { display:none; }
  .header-actions .btn-sm { min-height:40px; flex:1; padding:7px 8px; font-size:12px; }
  .workspace-switch { margin:10px 16px; }
  #statsBar { display:flex; grid-template-columns:none; gap:9px; margin:10px 16px 12px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; }
  #statsBar::-webkit-scrollbar { display:none; }
  .stat-card { flex:0 0 180px; min-height:82px; padding:11px 12px; scroll-snap-align:start; }
  .stat-card .stat-num { font-size:16px; }
  .primary-toolbar { display:block; margin:0 16px 10px; padding:6px; }
  .status-tabs { display:grid; grid-template-columns:repeat(4,1fr); }
  .primary-toolbar .tab { min-width:0; min-height:42px; padding:8px 4px; font-size:12px; }
  .primary-toolbar .tab-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding-top:7px; }
  .style-search-wrap { grid-column:1/-1; min-width:0; }
  .style-search-wrap input { min-width:0; min-height:44px; }
  .style-search-wrap button { min-height:44px; }
  .primary-toolbar select, .filter-toggle, .add-style-btn, .management-menu > summary { width:100%; min-height:44px; }
  .management-menu { grid-column:1/-1; }
  .management-menu > summary { justify-content:center; }
  .management-menu-popover { position:static; width:100%; margin-top:6px; box-shadow:none; }
  .active-filters { margin:0 16px 10px; flex-wrap:nowrap; overflow-x:auto; }
  .active-filter-chip, .clear-filter-link { flex-shrink:0; min-height:36px; }
  #filterBar.filter-panel { position:fixed; z-index:1500; left:0; right:0; bottom:0; margin:0; max-height:82vh; overflow:auto; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); border-radius:18px 18px 0 0; box-shadow:0 -12px 35px rgba(16,24,40,.2); }
  #filterBar.filter-panel.show { display:flex; }
  .filter-panel-overlay.show { position:fixed; z-index:1490; inset:0; display:block; background:rgba(15,23,42,.42); }
  .filter-panel-header { position:sticky; z-index:2; top:-16px; padding:14px 0 9px; background:#fff; }
  .filter-studios { gap:7px; padding-bottom:4px; }
  .filter-group-label { width:100%; flex-basis:100%; font-size:12px; font-weight:600; }
  .filter-studio-btn { min-height:40px; padding:8px 14px; }
  .filter-dates:before { width:100%; flex-basis:100%; font-weight:600; }
  .filter-dates input[type="date"] { flex:1; min-width:130px; min-height:44px; }
  .filter-dates span { display:none; }
  .filter-dates button { width:100%; min-height:44px; }
  .filter-panel-actions { position:sticky; bottom:-16px; margin:4px -16px -16px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:#fff; }
  .filter-panel-actions button { flex:1; min-height:44px; }
  #cardGrid { display:block; margin:0 16px 16px; }
  .style-card { display:grid; grid-template-columns:116px minmax(0,1fr); min-height:150px; margin-bottom:10px; }
  .card-image-button, .card-image-button.card-image.empty { width:116px; height:100%; min-height:150px; border-right:1px solid #eef0f4; }
  .style-card .card-image { height:100%; min-height:150px; }
  .style-card .card-body { min-width:0; padding:11px 12px; }
  .style-card .card-title-row h3 { font-size:14px; }
  .card-title-row { display:block; }
  .card-title-row .stage-badge { display:inline-block; margin-top:5px; }
  .card-tags { margin-top:6px; }
  .card-meta-line { margin-top:6px; }
  .style-card .progress-wrap { margin-top:7px; }
  .style-card .card-footer { margin-top:7px; }
  #pagination { margin:14px 16px 22px !important; flex-wrap:wrap; }
  .modal-content { padding:18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .close { width:44px; height:44px; right:3px; top:2px; display:flex; align-items:center; justify-content:center; }
  .detail-title { padding-right:38px; font-size:20px !important; }
  .detail-meta { margin-bottom:12px; }
  .current-action-card { display:block; margin-bottom:14px; padding:14px; }
  .current-action-buttons { display:grid; grid-template-columns:1fr 1fr; max-width:none; margin-top:12px; }
  .current-action-buttons button { min-height:46px; white-space:normal; }
  .current-action-buttons .order-note-input { grid-column:1/-1; width:100%; min-height:72px; }
  .action-status-icon { display:none; }
  .detail-overview-grid { display:flex; flex-direction:column; }
  .detail-image-column, .detail-info-section { width:100%; }
  .detail-image { max-height:280px; }
  .workflow-step { min-height:56px; padding:10px 12px; }
  .workflow-step .step-action { width:auto; margin-top:0; }
  .workflow-step .step-action button { min-height:40px; }
  .detail-actions { display:grid; grid-template-columns:1fr 1fr; }
  .detail-actions button { min-height:44px; }
  .compact-form-grid label select, .compact-form-grid label input, .optional-form-body label select, .optional-form-body label input { min-height:44px; }
  .form-upload-card, .inspiration-upload-block { padding:12px; }
  .inspiration-drop-zone { display:none; }
  .inspiration-image-preview { grid-template-columns:repeat(3,1fr); }
  .optional-form-section > summary { min-height:48px; }
  .sticky-form-actions { bottom:calc(-18px - env(safe-area-inset-bottom)); margin:8px -16px calc(-18px - env(safe-area-inset-bottom)); padding:11px 16px calc(11px + env(safe-area-inset-bottom)); }
  .sticky-form-actions button { min-height:46px; flex:1; }
  .inspiration-summary { padding:14px; }
  .inspiration-summary p { line-height:1.45; }
  .inspiration-toolbar input, .inspiration-toolbar select, .inspiration-toolbar button { min-height:44px; }
  .inspiration-grid { display:block; margin:0 16px 18px; }
  .inspiration-card { display:grid; grid-template-columns:120px minmax(0,1fr); min-height:150px; margin-bottom:10px; }
  .inspiration-cover-wrap { height:100%; min-height:150px; }
  .inspiration-card-body { min-width:0; padding:11px; }
  .inspiration-note-preview { -webkit-line-clamp:2; }
  .toast-container { left:16px; right:16px; top:auto; bottom:calc(18px + env(safe-area-inset-bottom)); }
  .toast { width:100%; max-width:none; }
}

/* Four-stage workflow */
.status-tabs { display:flex; max-width:100%; overflow-x:auto; scrollbar-width:thin; }
.status-tabs .tab { flex:0 0 auto; white-space:nowrap; }
.status-tabs .trash-tab { color:#8b5b58; }
.workflow-badge { max-width:190px; line-height:1.25; white-space:normal; text-align:center; }
.stage-v2-pending { color:#805b18; background:#fff4cf; }
.stage-v2-development { color:#3158b8; background:#e9efff; }
.stage-v2-waiting_order { color:#7650a3; background:#f2eaff; }
.stage-v2-factory_sample { color:#9a4d19; background:#fff0e5; }
.stage-v2-bulk_tracking { color:#157052; background:#e4f7ef; }
.stage-v2-archived { color:#46705a; background:#e8f2ed; }
.stage-v2-rejected { color:#a43f38; background:#fdebea; }
.series-tag { display:inline-flex; align-items:center; padding:3px 8px; border-radius:10px; color:#6b4ca0; background:#f1eafb; font-size:11px; }
.deleted-card { opacity:.72; border-style:dashed; }
.deleted-card .card-image { filter:grayscale(.8); }
.restore-link { color:#187646; }
.empty-inline { margin:14px 0; padding:18px; border-radius:9px; color:#7d8798; background:#f7f8fa; text-align:center; font-size:13px; }
#seriesFilters select, #soleFilters select { min-width:180px; padding:7px 10px; border:1px solid #d0d5dd; border-radius:7px; background:#fff; }
.workflow-stat { min-width:285px; }
.workflow-stat .stat-numbers { display:grid; grid-template-columns:repeat(3,1fr); gap:8px 12px; }
.workflow-stat .stat-item { min-width:0; }
.workflow-stat .stat-num-label { white-space:nowrap; }
.detail-title small { color:#98a2b3; font-size:13px; font-weight:500; }
.workflow-v2-steps .workflow-step { grid-template-columns:34px minmax(0,1fr) auto; }
.workflow-v2-steps .step-label { line-height:1.35; }
.workflow-v2-steps .step-action { display:flex; align-items:center; gap:7px; }
.bulk-action-card { display:grid; grid-template-columns:minmax(200px,.7fr) minmax(360px,1.3fr); gap:20px; align-items:start; }
.bulk-tracking-form { display:grid; grid-template-columns:1fr 1fr; gap:9px; width:100%; }
.bulk-tracking-form input, .bulk-tracking-form textarea { width:100%; min-height:42px; padding:9px 10px; box-sizing:border-box; border:1px solid #d0d5dd; border-radius:7px; background:#fff; font:inherit; font-size:13px; }
.bulk-tracking-form textarea { grid-column:1/-1; min-height:70px; resize:vertical; }
.bulk-action-buttons { grid-column:1/-1; display:flex; justify-content:flex-end; gap:8px; }
.history-list { margin-bottom:18px; border:1px solid #e5e9f0; border-radius:10px; overflow:hidden; }
.history-item { display:grid; grid-template-columns:16px 1fr; gap:8px; padding:12px 14px; border-bottom:1px solid #edf0f4; background:#fff; }
.history-item:last-child { border-bottom:0; }
.history-dot { width:8px; height:8px; margin-top:5px; border:3px solid #dfe5ff; border-radius:50%; background:#4d67d5; }
.history-item strong { display:block; color:#344054; font-size:13px; }
.history-item span { display:block; margin-top:2px; color:#98a2b3; font-size:11px; }
.history-item p { margin:6px 0 0; color:#5d6878; font-size:12px; line-height:1.5; }
.edit-style-panel { margin-bottom:18px; padding:16px; border:1px solid #ccd5ff; border-radius:10px; background:#f8f9ff; }
.edit-style-panel h4 { margin:0 0 12px; color:#354052; }
.edit-style-panel label { display:block; color:#596476; font-size:12px; }
.edit-style-panel input, .edit-style-panel select { width:100%; min-height:40px; margin-top:4px; padding:8px 9px; box-sizing:border-box; border:1px solid #d0d5dd; border-radius:7px; background:#fff; }

@media(max-width:900px) {
  .bulk-action-card { grid-template-columns:1fr; }
}

@media(max-width:640px) {
  .status-tabs { display:flex; width:100%; scroll-snap-type:x proximity; }
  .primary-toolbar .status-tabs .tab { flex:0 0 auto; min-width:104px; padding:8px 10px; scroll-snap-align:start; }
  .workflow-badge { max-width:150px; font-size:10px; }
  .workflow-stat { flex-basis:255px; min-width:255px; }
  .workflow-stat .stat-numbers { grid-template-columns:repeat(3,1fr); }
  .bulk-tracking-form { grid-template-columns:1fr; }
  .bulk-tracking-form textarea, .bulk-action-buttons { grid-column:1; }
  .bulk-action-buttons { display:grid; grid-template-columns:1fr; }
  .bulk-action-buttons button { min-height:46px; }
  .workflow-v2-steps .workflow-step { grid-template-columns:34px minmax(0,1fr); }
  .workflow-v2-steps .step-action { grid-column:2; justify-content:flex-start; }
  #seriesFilters select, #soleFilters select { width:100%; min-height:44px; }
}

/* ===== Unified option controls · 2026-09-05 ===== */
.mobile-status-select { display:none; }

.multi-select-control { position:relative; width:min(100%, 340px); }
.multi-select-control > summary { display:flex; min-height:38px; align-items:center; justify-content:space-between; gap:12px; padding:7px 11px; list-style:none; cursor:pointer; border:1px solid #d0d5dd; border-radius:7px; color:#667085; background:#fff; font-size:12px; }
.multi-select-control > summary::-webkit-details-marker { display:none; }
.multi-select-control > summary:after { content:'⌄'; flex-shrink:0; color:#8490a4; font-size:14px; transition:transform .16s ease; }
.multi-select-control[open] > summary { border-color:#8093ef; box-shadow:0 0 0 3px rgba(79,110,247,.1); }
.multi-select-control[open] > summary:after { transform:rotate(180deg); }
.multi-select-control > summary span { flex-shrink:0; }
.multi-select-control > summary strong { min-width:0; margin-left:auto; overflow:hidden; color:#344054; font-size:12px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.multi-select-menu { position:absolute; z-index:350; top:calc(100% + 6px); left:0; width:max(100%, 230px); max-height:320px; overflow:auto; padding:7px; border:1px solid #e0e5ed; border-radius:10px; background:#fff; box-shadow:0 14px 34px rgba(16,24,40,.17); }
.multi-select-menu label, form .multi-select-menu label { display:flex; min-height:38px; align-items:center; gap:9px; margin:0; padding:7px 8px; cursor:pointer; border-radius:7px; color:#344054; font-size:13px; }
.multi-select-menu label:hover { background:#f3f5ff; }
.multi-select-menu input[type="checkbox"] { width:17px; height:17px; flex:0 0 17px; margin:0; accent-color:#4f6ef7; }
.multi-select-group { margin:5px 5px 2px; padding-top:6px; border-top:1px solid #eef0f4; color:#98a2b3; font-size:11px; font-weight:600; }
.multi-select-group:first-child { margin-top:0; padding-top:2px; border-top:0; }
.multi-select-actions { position:sticky; bottom:-7px; display:flex; justify-content:space-between; gap:8px; margin:6px -7px -7px; padding:8px; border-top:1px solid #edf0f4; background:#fff; }
.multi-select-actions button { min-height:34px; }

.filter-studios .multi-select-control { width:100%; }
.filter-studios .multi-select-control > summary { min-height:42px; }
.filter-studios .multi-select-menu { width:min(420px, calc(100vw - 76px)); display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
.filter-studios .multi-select-group, .filter-studios .multi-select-actions { grid-column:1/-1; }
.toolbar-multi-select { flex:0 1 180px; min-width:150px; }
.toolbar-multi-select .multi-select-control { width:100%; }
.form-multi-select { display:block; width:100%; margin-top:6px; }
.form-multi-select .multi-select-control { width:100%; }
.form-multi-select .multi-select-control > summary { min-height:40px; }
.form-multi-select .multi-select-menu { width:100%; }
.form-field { min-width:0; margin-bottom:16px; color:#555; font-size:14px; }
.form-field-label { display:block; }

.mega-menu .management-menu-popover { width:min(650px, calc(100vw - 64px)); grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; padding:14px; }
.mega-menu .management-menu-popover section { min-width:0; padding:10px; border:1px solid #edf0f4; border-radius:9px; background:#fafbfc; }
.mega-menu .management-menu-popover section > strong { display:block; margin:0 5px 7px; color:#667085; font-size:12px; }
.mega-menu .management-menu-popover button { min-height:40px; margin-top:5px; }

.date-range-picker:before { content:none; }
.date-range-picker .filter-group-label { display:block; }
.date-range-picker input[type="date"] { min-height:38px; }
.inline-date-field, form .inline-date-field { display:flex; min-width:0; align-items:center; gap:8px; margin:0; padding:0 10px; border:1px solid #d0d5dd; border-radius:7px; background:#fff; color:#667085; font-size:12px; }
.inline-date-field input[type="date"] { min-width:0; padding:7px 0; border:0; background:transparent; }

.split-button { position:relative; display:inline-flex; grid-column:1/-1; justify-self:end; border-radius:7px; box-shadow:0 1px 2px rgba(16,24,40,.08); }
.split-button > button { min-height:42px; border-radius:7px 0 0 7px; }
.split-button > details { position:relative; }
.split-button > details > summary { display:flex; width:42px; height:42px; align-items:center; justify-content:center; list-style:none; cursor:pointer; border-left:1px solid rgba(255,255,255,.36); border-radius:0 7px 7px 0; color:#fff; background:#4f6ef7; font-weight:700; }
.split-button > details > summary::-webkit-details-marker { display:none; }
.split-button > details[open] > summary, .split-button > details > summary:hover { background:#3b5bdb; }
.split-button > details > div { position:absolute; z-index:360; right:0; bottom:calc(100% + 7px); width:190px; padding:7px; border:1px solid #e0e5ed; border-radius:9px; background:#fff; box-shadow:0 12px 30px rgba(16,24,40,.18); }
.split-button > details > div button { width:100%; min-height:40px; color:#187646; background:#eef9f2; text-align:left; }

@media(max-width:640px) {
  .primary-toolbar .status-tabs { display:none; }
  .mobile-status-select { display:block; width:100%; min-height:44px; margin-bottom:7px; border-color:#ccd5ff; color:#26366f; background:#f5f7ff; font-weight:600; }
  .toolbar-multi-select { flex:1 1 calc(50% - 4px); min-width:calc(50% - 4px); }
  .toolbar-multi-select .multi-select-control > summary { min-height:44px; }
  .multi-select-menu, .filter-studios .multi-select-menu { position:static; width:100%; max-height:260px; margin-top:5px; grid-template-columns:1fr; box-shadow:none; }
  .filter-studios .multi-select-group, .filter-studios .multi-select-actions { grid-column:1; }
  .multi-select-menu label, form .multi-select-menu label { min-height:44px; }
  .mega-menu .management-menu-popover { width:100%; grid-template-columns:1fr; }
  .mega-menu .management-menu-popover section { padding:8px; }
  .date-range-picker .filter-group-label { width:100%; flex-basis:100%; font-weight:600; }
  .date-range-picker input[type="date"] { flex:1; min-width:130px; min-height:44px; }
  .inline-date-field, form .inline-date-field { min-height:44px; }
  .split-button { width:100%; justify-self:stretch; }
  .split-button > button { flex:1; min-height:46px; }
  .split-button > details > summary { width:46px; height:46px; }
  .split-button > details > div { bottom:auto; top:calc(100% + 7px); }
}