/* Secondary pages share the density, surfaces and hierarchy of the commerce redesign. */
:root[data-settings-mode] .settings-nav-group + .settings-nav-group{margin-top:20px;padding-top:15px;border-top:1px solid #ffffff14}
:root[data-settings-mode] .settings-nav-group[hidden]{display:none}
:root[data-settings-mode] .settings-nav-group>.settings-sidebar-label{margin-bottom:7px;color:#aaa;font-size:11px}
#main .secondary-workspace{max-width:1120px;margin:30px auto 0;min-width:0}
#main .account-workspace{max-width:784px}
#main .notices-workspace,#main .exports-workspace{max-width:1000px}
#main .secondary-workspace>.panel{margin:0}
#main :is(.secondary-workspace,.settings-content)>.stack{gap:18px}
#main .secondary-workspace .panel-heading,#main[data-view=settings]:is([data-settings-section=business],[data-settings-section=agents],[data-settings-section=api],[data-settings-section=templates]) .settings-content .panel-heading,
#main:is([data-view=roadmap],[data-view=incidents],[data-view=feedback],[data-view=operations],[data-view=diagnostics],[data-view=storage],[data-view=audit],[data-view=emails]) .settings-content .panel-heading{padding:18px 20px 10px;border-bottom:0}
#main .secondary-workspace .panel-heading h2,#main .settings-content .panel-heading h2{font-size:14px;font-weight:550;line-height:1.45;letter-spacing:0}
#main .secondary-workspace .panel-body{padding:16px 20px;font-size:12px;line-height:1.65}
#main .secondary-workspace .panel-body p + p{margin-top:10px}
#main .secondary-workspace .form-fields,#main .settings-content .form-fields{gap:18px}
#main :is(.secondary-workspace,.settings-content) .field label{font-size:12px;font-weight:450;color:var(--shell-ink);line-height:1.5}
#main :is(.secondary-workspace,.settings-content) .field :is(input,select,textarea){font-size:12px;min-height:33px;border-radius:9px;border-color:var(--shell-line);color:var(--shell-ink);background:var(--shell-surface)}
#main :is(.secondary-workspace,.settings-content) .field textarea{line-height:1.6;min-height:105px;resize:vertical}
#main :is(.secondary-workspace,.settings-content) .field small{font-size:11px;line-height:1.5}
#main :is(.secondary-workspace,.settings-content) .field :is(input,select,textarea):disabled{background:color-mix(in srgb,var(--shell-surface) 60%,var(--shell-line));color:var(--muted);cursor:not-allowed}
#main :is(.secondary-workspace,.settings-content) .settings-tabs{display:flex;gap:5px;flex-wrap:wrap;padding:5px;border:1px solid var(--shell-line);border-radius:13px;background:var(--shell-surface);margin:0 0 18px}
#main :is(.secondary-workspace,.settings-content) .settings-tabs a{padding:7px 13px;min-height:30px;border-radius:9px;font-size:12px;color:var(--muted)}
#main :is(.secondary-workspace,.settings-content) .settings-tabs a[aria-current=page]{background:color-mix(in srgb,var(--shell-line) 70%,var(--shell-surface));color:var(--shell-ink);box-shadow:none;font-weight:550}
#main :is(.secondary-workspace,.settings-content) .form-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:14px 0;margin-top:12px;border-top:1px solid var(--shell-line);background:transparent}
#main :is(.secondary-workspace,.settings-content) .edit-form[data-dirty=true]>.form-actions{position:sticky;bottom:0;z-index:2;padding:12px 16px;border:1px solid var(--shell-line);border-radius:12px;background:var(--shell-surface);box-shadow:0 -3px 16px #00000006}
#main :is(.secondary-workspace,.settings-content) .form-error:empty{display:none}
#main :is(.secondary-workspace,.settings-content) .table-toolbar{align-items:flex-end;gap:12px;background:var(--shell-surface)}
#main :is(.secondary-workspace,.settings-content) .table-scroll{max-width:100%;overflow:auto;border-radius:0 0 16px 16px}
#main :is(.secondary-workspace,.settings-content) .table-scroll td{font-size:12px;line-height:1.5;vertical-align:middle}
#main :is(.secondary-workspace,.settings-content) .table-footer{background:var(--shell-surface);font-size:11px;padding:12px 16px;gap:12px;flex-wrap:wrap;border-top:1px solid var(--shell-line)}
#main :is(.secondary-workspace,.settings-content) :is(.secondary,.primary){font-size:12px;min-height:30px;padding:6px 12px}
#main :is(.secondary-workspace,.settings-content) :is(.panel-body,.field,.form-actions)>a{overflow-wrap:anywhere}
#main .secondary-workspace .account-photo-settings{display:flex;align-items:center;gap:24px;background:var(--shell-surface)}
#main .account-photo-preview{flex:none}
#main .account-photo-avatar{width:80px;height:80px;border-radius:18px;background:#ededed;color:#303030;font-size:25px}
#main .stores-workspace .store-tools{padding:16px;border:1px solid var(--shell-line);border-radius:15px;background:var(--shell-surface);align-items:flex-end;gap:12px}
#main .stores-workspace .stores-overview{font-size:12px;color:var(--muted);gap:10px;flex-wrap:wrap}
#main .stores-workspace .store-card{border-color:var(--shell-line);border-radius:17px;box-shadow:0 2px 10px #00000005;background:var(--shell-surface)}
#main .stores-workspace .store-card-body{padding:20px;background:var(--shell-surface)}
#main .stores-workspace .store-card-heading h2{font-size:16px;letter-spacing:-.2px}
#main .stores-workspace .store-card-browser,#main .stores-workspace .store-card-footer{background:color-mix(in srgb,var(--shell-surface) 70%,var(--shell-line));border-color:var(--shell-line);font-size:11px}
#main .stores-workspace .store-preview-empty{background:color-mix(in srgb,var(--shell-surface) 65%,var(--shell-line));color:var(--shell-ink)}
#main .settings-template-mapping{gap:14px;padding:16px;border:1px solid var(--shell-line);border-radius:12px}
#main .settings-template-mapping:empty{display:none}
#main .settings-section-options{gap:14px;padding:14px 0;border-bottom:1px solid var(--shell-line)}
#main .settings-section-options label{font-size:12px}
#main:is([data-view=emails],[data-view=settings][data-settings-section=emails]) .settings-content{max-width:1100px}
#main .email-template-card[aria-pressed=true]{border-color:#777;box-shadow:0 0 0 1px #777}
#main .email-preview-devices [aria-pressed=true]{background:var(--shell-line);border-color:var(--shell-line);color:var(--shell-ink)}
#main .email-common-design{border-color:var(--shell-line);border-radius:16px}
#main .email-common-design>summary{padding:18px 20px}
#main .email-workspace-intro h2{font-size:17px;font-weight:550}
#main .email-workspace-intro p{line-height:1.5}
#main .email-template-thumbnail{background:#f5f5f5}
#main .email-common-design .panel-heading{padding-bottom:8px}
#main .settings-template-preview .panel{box-shadow:none}
#main .settings-template-preview td{white-space:normal;overflow-wrap:anywhere}
#main .secondary-workspace .inline-actions{flex-wrap:wrap;gap:8px}
/* Editors and details retain their contextual actions and familiar panel rhythm. */
#main[data-detail=true]:is([data-view=products],[data-view=collections],[data-view=variants],[data-view=customers],[data-view=orders],[data-view=files],[data-view=inventory],[data-view=promotions],[data-view=option-groups]) #content{max-width:1200px;margin:24px auto 0}
#main[data-detail=true] .panel-heading h2{font-size:14px;font-weight:550;letter-spacing:0}
#main[data-detail=true] .form-fields{gap:18px}
#main[data-detail=true] .field :is(input,select,textarea){border-radius:9px;border-color:var(--shell-line);font-size:12px}
#main[data-detail=true] .field label{font-size:12px;font-weight:450;color:var(--shell-ink)}
#main[data-detail=true] .panel-body{line-height:1.65}
#main[data-detail=true] .form-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
:root[data-theme=dark] #main .account-photo-avatar{background:#343b36;color:var(--shell-ink)}
:root[data-theme=dark] #main .email-template-thumbnail{background:#303731}
@media(max-width:1100px){#main .stores-workspace .stores-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){
 :root[data-settings-mode] .settings-nav-group + .settings-nav-group{border-top-color:var(--shell-line);margin-top:15px;padding-top:12px}
 :root[data-settings-mode] .settings-nav-group>.settings-sidebar-label{color:var(--muted)}
 #main .secondary-workspace{margin-top:16px}
 #main .secondary-workspace .panel-body{padding:15px 16px}
 #main .secondary-workspace .panel-heading{padding:16px 16px 8px}
 #main .secondary-workspace .account-photo-settings{align-items:flex-start;gap:16px}
 #main .secondary-workspace .account-photo-avatar{width:60px;height:60px;font-size:20px}
}
@media(max-width:600px){
 #main .stores-workspace .stores-grid{grid-template-columns:1fr}
 #main .stores-workspace .store-tools .field{min-width:0;flex-basis:100%}
 #main .secondary-workspace .settings-tabs a{padding:7px 10px;font-size:11px}
 #main .secondary-workspace .account-photo-settings{flex-direction:column}
 #main .settings-template-mapping{grid-template-columns:1fr;padding:12px}
 #main :is(.secondary-workspace,.settings-content) .table-toolbar .field{min-width:0;flex:1 1 100%}
 #main :is(.secondary-workspace,.settings-content) .table-footer .inline-actions{margin-left:auto}
}
/* Contextual detail composition: primary work first, publication/contact alongside it. */
#main .product-detail-page{display:flex;flex-direction:column;gap:18px;min-width:0}
#main .product-detail-editor{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:18px;align-items:start}
#main .product-detail-editor>.panel{grid-column:1;margin:0;min-width:0}
#main .product-detail-editor>.product-publication-card{grid-column:2;grid-row:1 / span 2}
#main .product-detail-editor>:is(.form-actions,.form-error),#main .product-detail-editor>p{grid-column:1 / -1}
#main .product-detail-editor .form-actions{margin:0}
#main .customer-detail-page{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);gap:18px;align-items:start}
#main .customer-detail-page>.panel{grid-column:1;margin:0;min-width:0}
#main .customer-detail-page>.customer-contact-editor{grid-column:2;grid-row:1 / span 3;min-width:0}
#main .customer-detail-page .customer-contact-editor>.panel{margin:0}
#main[data-detail=true] .order-detail-view>.panel,#main[data-detail=true] .order-detail-view>.detail-layout{margin-top:18px}
#main[data-detail=true] .order-detail-view .empty-state{padding:32px 20px;min-height:160px}
#main[data-detail=true] .order-detail-view .empty-state .empty-icon{width:42px;height:42px;margin-bottom:16px;font-size:22px}
@media(max-width:1050px){#main .product-detail-editor,#main .customer-detail-page{grid-template-columns:minmax(0,1fr)}#main .product-detail-editor>.product-publication-card,#main .customer-detail-page>.customer-contact-editor{grid-column:1;grid-row:auto}}