:root {
  color-scheme: dark;
  --canvas: #0c0d0f;
  --surface: #16181c;
  --surface-soft: #202228;
  --line: #32353d;
  --muted: #aeb2bc;
  --ink: #f6f7f9;
  --red: #e3333d;
  --red-dark: #b81923;
  --red-soft: #3f191d;
  --green: #5ed59a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--ink); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 264px minmax(0, 1fr); }
.sidebar { background: #101114; border-right: 1px solid var(--line); padding: 28px 18px 18px; display: flex; flex-direction: column; gap: 42px; }
.brand { color: var(--ink); text-decoration: none; font-size: 1.18rem; font-weight: 850; letter-spacing: -.04em; display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.brand span span { color: var(--red); }
.brand-mark { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--red); color: white; font-size: 1rem; }
.nav-list { display: grid; gap: 5px; }
.nav-item { border: 0; border-radius: 12px; background: transparent; color: var(--muted); text-align: left; padding: 12px 13px; font-size: .92rem; font-weight: 700; display: flex; align-items: center; gap: 12px; }
.nav-item > span { color: #d5d7dc; font-size: 1.1rem; width: 18px; text-align: center; }
.nav-item:hover { background: #1a1c20; color: white; }
.nav-item.active { background: var(--red-soft); color: white; }
.nav-item.active > span { color: var(--red); }
.orders-nav-group > summary { list-style:none; cursor:pointer; }
.orders-nav-group > summary::-webkit-details-marker { display:none; }
.orders-nav-group .submenu-chevron { margin-left:auto; width:auto; transition:transform .15s; }
.orders-nav-group:not([open]) .submenu-chevron { transform:rotate(-90deg); }
.orders-submenu { margin:4px 0 8px 20px; padding-left:10px; border-left:1px solid var(--line); display:grid; gap:4px; }
.orders-submenu .nav-item { font-size:.8rem; padding:10px 12px; }
.sidebar-footer { margin-top: auto; display: flex; gap: 9px; align-items: flex-start; padding: 15px 12px; border-radius: 14px; background: #17191d; color: var(--muted); font-size: .72rem; }
.sidebar-footer strong, .sidebar-footer small { display: block; }
.sidebar-footer strong { color: #e7e8eb; font-size: .76rem; margin-bottom: 2px; }
.status-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; margin-top: 4px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 3px #1d3b2d; }

.main-content { min-width: 0; }
#products .products-layout { grid-template-columns:minmax(0,1fr); }
#products .add-product-card { display:none; }
#new-product-dialog { width:min(590px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); padding:24px; border:1px solid #3b414b; border-radius:16px; background:#181b21; color:var(--text); box-shadow:0 24px 80px #000a; overflow:auto; }
#new-product-dialog::backdrop { background:#0009; backdrop-filter:blur(3px); }
#new-product-dialog .add-product-card { display:grid; gap:14px; position:static; padding:0; border:0; background:transparent; }
#new-product-dialog .card-heading { padding-right:42px; }
#business-settings-dialog { width:min(660px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); padding:24px; border:1px solid #3b414b; border-radius:16px; background:#181b21; color:var(--text); box-shadow:0 24px 80px #000a; overflow:auto; }
#business-settings-dialog::backdrop { background:#0009; backdrop-filter:blur(3px); }
#business-settings-dialog #profile { display:block; width:100%; padding:0; margin:0; }
#business-settings-dialog .page-heading { padding-right:42px; margin-bottom:20px; }
#business-settings-dialog h1 { font-size:1.4rem; }
#business-settings-dialog .settings-card { padding:16px; }
.settings-dialog-close { position:absolute; right:16px; top:16px; font-size:24px; cursor:pointer; }
.topbar { height: 70px; padding: 0 clamp(20px, 4vw, 58px); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: .86rem; }
.location { display: flex; gap: 8px; align-items: center; }
.location span { color: var(--red); font-size: 1.05rem; }
.sync-state { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: .78rem; }
.sync-state .status-dot { background: #858991; box-shadow: 0 0 0 3px #282a2f; }
.business-top-tools { display:flex; align-items:center; gap:24px; margin-left:auto; }
.business-top-tools summary { list-style:none; cursor:pointer; }
.business-top-tools summary::-webkit-details-marker { display:none; }
.top-dropdown { position:relative; }
.notification-trigger { position:relative; width:36px; height:42px; display:grid; place-items:center; color:#bfc7d0; }
.notification-trigger svg { width:29px; height:29px; }
.notification-count { position:absolute; right:-5px; top:-1px; min-width:21px; height:21px; padding:0 5px; border-radius:50%; background:#ed1426; color:white; font-size:12px; font-weight:700; display:grid; place-items:center; border:2px solid #15191e; }
.notification-count[hidden] { display:none; }
.business-account-trigger { display:flex; align-items:center; gap:12px; }
.business-avatar { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:#202731; color:#e8edf3; font-size:21px; font-weight:700; flex-shrink:0; }
.business-account-copy { display:grid; gap:4px; max-width:220px; }
.business-account-copy strong { color:#e3e7ed; font-size:16px; font-weight:600; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.business-account-copy small { color:#99a5b2; font-size:12px; }
.account-chevron { font-size:22px; color:#a6b2bf; margin-left:12px; }
.top-dropdown-panel { position:absolute; top:calc(100% + 12px); right:0; width:300px; max-width:calc(100vw - 24px); padding:16px; border:1px solid var(--line); border-radius:12px; background:#191e25; box-shadow:0 12px 35px #0009; z-index:30; }
.notification-order { display:grid; gap:5px; width:100%; padding:12px 0; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.notification-order small { color:var(--muted); }
@media(max-width:820px) { .topbar .sync-state, .topbar .location { display:none; } .business-top-tools { gap:16px; } .business-account-copy { max-width:150px; } .business-avatar { width:40px; height:40px; font-size:18px; } .business-account-copy strong { font-size:14px; } }
.menu-toggle { display:inline-grid; place-items:center; cursor:pointer; flex-shrink:0; }
.app-shell.menu-collapsed { grid-template-columns:0 minmax(0,1fr); }
.app-shell.menu-collapsed > .sidebar { visibility:hidden; overflow:hidden; padding:0; border:0; }
#orders { width:100%; max-width:none; margin:0; padding:0 4px; }
#orders > .page-heading { margin:0; padding:16px 12px; }
#orders > .orders-table-card { margin:0; border-radius:0; }
.orders-view .topbar { padding-inline:12px; }
.icon-button { border: 1px solid var(--line); background: var(--surface); color: white; width: 38px; height: 38px; border-radius: 10px; }

.view { display: none; width: min(1160px, 100%); margin: 0 auto; padding: clamp(30px, 4vw, 52px) clamp(20px, 4vw, 58px) 56px; }
.view.active { display: block; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 30px; }
.page-heading.compact { align-items: flex-start; }
.eyebrow { margin: 0 0 7px; color: var(--red); font-size: .69rem; font-weight: 850; letter-spacing: .11em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 7px; font-size: clamp(1.75rem, 3vw, 2.35rem); line-height: 1.1; letter-spacing: -.045em; }
h2 { margin-bottom: 0; font-size: 1.03rem; letter-spacing: -.015em; }
.subheading { max-width: 620px; margin-bottom: 0; color: var(--muted); font-size: .94rem; line-height: 1.55; }
.primary-button, .secondary-button, .text-button { border: 0; font-weight: 800; white-space: nowrap; }
.primary-button { min-height: 42px; padding: 0 15px; border-radius: 11px; background: var(--red); color: #fff; box-shadow: 0 7px 18px rgba(227, 51, 61, .16); }
.primary-button:hover { background: #f03f49; }
.primary-button span { font-size: 1.08rem; vertical-align: -1px; }
.secondary-button { min-height: 39px; padding: 0 13px; border-radius: 10px; background: #25272d; color: #f5f5f6; border: 1px solid #3b3e46; }
.text-button { background: transparent; color: var(--red); font-size: .83rem; padding: 5px 0; }

.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 15px; }
.metric-card, .panel-card, .settings-card { background: var(--surface); border: 1px solid var(--line); border-radius: 17px; }
.metric-card { min-height: 146px; padding: 20px; display: flex; flex-direction: column; }
.metric-card.accent { border-color: #6b242b; background: linear-gradient(135deg, #281719, #19191d); }
.metric-card p { color: var(--muted); margin-bottom: auto; font-size: .78rem; font-weight: 700; }
.metric-card strong { font-size: 1.7rem; letter-spacing: -.045em; }
.metric-card span { color: var(--muted); font-size: .73rem; margin-top: 6px; }
.content-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: 15px; margin-bottom: 15px; }
.panel-card { padding: 21px; }
.card-heading, .table-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.profile-empty, .empty-state { padding: 20px; border: 1px dashed #454850; border-radius: 12px; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.profile-data { display: grid; grid-template-columns: auto 1fr; gap: 9px 17px; font-size: .86rem; }
.profile-data dt { color: var(--muted); }
.profile-data dd { margin: 0; font-weight: 700; }
.connection-row { display: flex; gap: 13px; color: var(--muted); font-size: .82rem; line-height: 1.48; margin-bottom: 18px; }
.connection-row strong { display: block; color: white; font-size: .9rem; margin-bottom: 3px; }
.connection-row p { margin-bottom: 0; }
.connection-icon { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; color: var(--red); background: var(--red-soft); font-weight: 900; }
.product-preview { margin-bottom: 0; }
.product-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mini-product { padding: 13px; background: #1d1f24; border: 1px solid #2d3037; border-radius: 13px; }
.mini-product strong, .mini-product small { display: block; }
.mini-product strong { font-size: .87rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-product small { color: var(--muted); margin-top: 5px; font-size: .72rem; }

.settings-card { padding: clamp(20px, 3vw, 30px); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.form-grid.two-columns { gap: 12px; }
label { display: grid; gap: 8px; color: #e4e5e8; font-size: .83rem; font-weight: 750; }
label.wide { grid-column: 1 / -1; }
input, textarea, select { width: 100%; appearance: none; border: 1px solid #363941; border-radius: 11px; background: #111216; color: #fafafa; padding: 11px 12px; outline: none; font-size: .91rem; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: #777c86; }
input:focus, textarea:focus, select:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(227, 51, 61, .15); }
.toggle-row { margin-top: 23px; grid-template-columns: auto 1fr; align-items: center; cursor: pointer; }
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-control { width: 42px; height: 24px; padding: 3px; border-radius: 30px; background: #3a3d45; transition: .2s ease; }
.toggle-control::after { content: ""; display: block; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .2s ease; }
.toggle-row input:checked + .toggle-control { background: var(--red); }
.toggle-row input:checked + .toggle-control::after { transform: translateX(18px); }
.toggle-row small { display: block; margin-top: 3px; color: var(--muted); font-size: .74rem; font-weight: 500; line-height: 1.4; }
.form-actions { margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.form-actions p, .field-note { margin-bottom: 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }

.products-layout { display: grid; grid-template-columns: minmax(265px, .72fr) minmax(0, 1.28fr); gap: 15px; align-items: start; }
.add-product-card { display: grid; gap: 16px; }
.add-product-card .card-heading { margin-bottom: 2px; }
.input-hint { color: var(--muted); font-size: .72rem; font-weight: 500; }
.image-preview { min-height: 92px; display: grid; place-items: center; overflow: hidden; border: 1px dashed #464952; border-radius: 12px; color: var(--muted); font-size: .78rem; }
.image-preview img { width: 100%; height: 132px; object-fit: cover; }
.full-width { width: 100%; }
.products-table-card { min-height: 430px; }
.count-badge { padding: 5px 8px; border-radius: 8px; background: #292b31; color: var(--muted); font-size: .72rem; font-weight: 750; }
.orders-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.orders-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.orders-toolbar select { min-width:150px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:#1f2025; color:var(--text); font:inherit; font-size:.78rem; }
.order-summary-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0 0 18px; }
.order-summary-metrics article { padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#1a1b20; }
.order-summary-metrics span { display:block; color:var(--muted); font-size:.72rem; }
.order-summary-metrics strong { display:block; margin-top:5px; color:var(--text); font-size:1.2rem; }
.orders-table .secondary-button { white-space:nowrap; }
.history-filters { margin:0 0 20px; padding:16px; background:#191c22; border:1px solid var(--line); border-radius:10px; }
.history-filters[hidden] { display:none; }
.history-filter-fields { display:flex; align-items:end; flex-wrap:wrap; gap:12px; }
.history-filter-fields label { display:grid; gap:7px; color:var(--muted); font-size:.78rem; flex:1 1 160px; }
.history-filter-fields .history-search-label { flex:2 1 240px; }
.history-filter-fields input { width:100%; min-width:0; color-scheme:dark; }
#history-filter-error { color:#ff6670; margin:10px 0 0; }
#history-filter-error:empty { display:none; }
#history-result-summary { margin:12px 0 0; font-size:.85rem; }
.order-summary-metrics[hidden] { display:none; }
.cancelled-orders .history-filters { border-color:#65303a; background:linear-gradient(135deg,#271b20,#191c22); }
.cancelled-orders #history-result-summary { padding:12px; border-left:3px solid var(--red); border-radius:4px; background:#301e24; color:#ffb6be; font-weight:700; }
.cancelled-orders .empty-state { padding:48px 20px; border:1px dashed #65303a; border-radius:10px; color:#cbb4ba; }
.orders-table .order-address-column { display:table-cell; min-width:180px; max-width:320px; white-space:normal; overflow-wrap:anywhere; }
.orders-table .order-note-column { min-width:160px; max-width:280px; white-space:normal; overflow-wrap:anywhere; }
.orders-table [data-order-row] { cursor:pointer; }
.orders-table [data-order-row]:hover { background:#22252c; }
.orders-table [data-order-row]:focus-visible { outline:2px solid var(--red); outline-offset:-2px; }
.mini-order-list { display:grid; gap:8px; }
.mini-order { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:#1a1b20; }
.mini-order div { display:grid; gap:4px; }
.mini-order small { color:var(--muted); }
@media (max-width: 760px) { .order-summary-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .table-heading { flex-direction:column; } }
.incoming-order-backdrop { position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:22px; background:rgba(6,7,9,.76); backdrop-filter:blur(8px); }
.incoming-order-modal { width:min(1040px, calc(100vw - 48px)); max-height:min(90vh, 860px); overflow-x:hidden; overflow-y:auto; padding:30px; border:1px solid #454852; border-radius:20px; background:#1a1b20; box-shadow:0 24px 90px rgba(0,0,0,.5); }
.incoming-order-icon { width:42px; height:42px; display:grid; place-items:center; margin-bottom:16px; border-radius:50%; background:var(--accent); color:white; font-weight:800; font-size:1.3rem; }
.incoming-order-modal h2 { margin:5px 0; }
.incoming-order-meta { margin:0 0 18px; color:var(--muted); font-size:.82rem; }
.incoming-order-detail { display:grid; gap:7px; padding:15px; margin-bottom:20px; border:1px solid var(--line); border-radius:13px; background:#222329; }
.incoming-order-detail span { color:var(--muted); font-size:.85rem; }
.incoming-order-detail b { color:#ff6670; font-size:1.15rem; }
.incoming-order-expanded { max-height:min(88vh,760px); overflow:auto; }
.incoming-order-header { display:flex; align-items:center; gap:14px; margin:-30px -30px 0; padding:17px 24px 15px; background:linear-gradient(110deg,#151a20,#11161c); border-bottom:1px solid #2c333b; }
.incoming-order-header .incoming-order-icon { flex:0 0 auto; margin:0; }
.incoming-alert-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#ef3340; color:#fff; font-size:1.35rem; line-height:1; }
.incoming-alert-icon svg { width:20px; height:20px; }
.incoming-header-copy { flex:1; min-width:0; }
.incoming-header-copy .eyebrow { display:none; }
.incoming-header-copy h2 { margin:0 0 3px; font-size:1.18rem; }
.incoming-order-meta { margin:0; color:#a4aab3; font-size:.78rem; }
.incoming-head-meta { display:flex; margin-left:auto; }
.incoming-head-meta > div { display:grid; gap:2px; min-width:112px; padding:0 22px; border-left:1px solid #2e353e; }
.incoming-head-meta small { color:#969da8; font-size:.63rem; }
.incoming-head-meta strong { font-size:1rem; }
.incoming-head-meta span { color:#9299a4; font-size:.68rem; }
.incoming-new-badge { flex:0 0 auto; padding:8px 15px; border-radius:11px; background:#d9202f; color:#fff; font-size:.69rem; font-weight:800; }
.incoming-content-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(220px,.8fr); gap:18px; min-width:0; }
.incoming-content-grid > *, .incoming-content-grid aside { min-width:0; }
.incoming-flow { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; margin:20px 0 24px; position:relative; }
.incoming-flow::before { content:none; }
.incoming-flow-step { position:relative; z-index:1; display:grid; grid-template-rows:32px auto auto; align-content:start; justify-items:center; row-gap:8px; color:#aeb5bd; font-size:.88rem; text-align:center; }
.incoming-flow-step:not(:last-child)::after { content:""; position:absolute; top:15px; left:50%; width:100%; height:3px; background:#69717a; z-index:-1; }
.incoming-flow-step span { align-self:center; display:block; width:21px; height:21px; border:5px solid #858d96; border-radius:50%; background:#141b20; box-shadow:0 0 0 2px #242c33; }
.incoming-flow-step small { font-size:inherit; line-height:1.3; }
.incoming-flow-step.is-active { color:#fa1728; }
.incoming-flow-step.is-active span { border-color:#f51c2c; background:#fff; }
.incoming-flow-step.is-active:not(.is-current)::after { background:#fa1728; }
.incoming-flow-step.is-current span { width:29px; height:29px; border:5px solid #ff1428; background:#fff; box-shadow:0 0 0 2px #a4202b,inset 0 0 0 3px #fff,inset 0 0 0 8px #f51c2c; }
.incoming-flow-step.is-current:not(:last-child)::after { background:linear-gradient(to right,#fa1728 22%,#69717a 22%); }
.incoming-flow-step.is-current small { font-weight:600; }
.incoming-flow-time { color:#aeb5bd; font-size:.82rem; line-height:1; }
.incoming-meta-strip { display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0 -30px 16px; padding:12px 24px; background:#222a33; border-bottom:1px solid #2e353e; }
.incoming-meta-strip > div { display:flex; align-items:center; justify-content:center; gap:22px; min-height:64px; padding:0 28px; border:0; border-radius:0; background:transparent; }
.incoming-meta-strip > div + div { border-left:1px solid #3b434e; }
.incoming-meta-icon { width:52px; color:#f2f3f5; font-size:1.7rem; line-height:1; text-align:center; }
.incoming-meta-icon svg { display:block; width:48px; height:48px; margin:auto; }
.pickup-logo-mark { display:grid; place-items:center; width:32px; height:32px; margin:auto; border:1px solid #ef3340; border-radius:9px; background:#351c22; color:#ff5b64; font-size:1rem; font-weight:900; }
.pickup-logo-image { display:block; width:42px; height:42px; margin:auto; border-radius:8px; object-fit:contain; background:transparent; filter:invert(1); }
.incoming-meta-strip > div > span:last-child { display:grid; gap:2px; }
.incoming-meta-strip small { color:#a7afb8; font-size:.82rem; line-height:1.2; }
.incoming-meta-strip strong { color:#fff; font-size:1.12rem; line-height:1.2; }
.incoming-customer-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0; }
.incoming-customer-grid > div { display:grid; gap:5px; padding:11px; border:1px solid var(--line); border-radius:11px; background:#222329; }
.incoming-customer-grid small { color:var(--muted); font-size:.67rem; letter-spacing:.08em; }
.incoming-customer-grid span, .incoming-line small { color:var(--muted); font-size:.76rem; }
.incoming-timing { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 16px; }
.incoming-timing > div { display:grid; gap:5px; min-width:0; padding:11px; border:1px solid rgba(227,51,61,.35); border-radius:11px; background:rgba(227,51,61,.08); }
.incoming-timing small { color:var(--muted); font-size:.67rem; letter-spacing:.08em; }
.incoming-timing strong { color:#fff; }
.incoming-lines { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.incoming-lines-head, .incoming-line { display:grid; grid-template-columns:minmax(0,1fr) 52px 76px 86px; align-items:center; gap:12px; }
.incoming-lines-head { padding:10px 0; color:var(--muted); font-size:.68rem; letter-spacing:.06em; }
.incoming-line { padding:10px 0; border-top:1px solid var(--line); }
.order-line-product { display:flex; align-items:center; gap:12px; min-width:0; }
.order-item-visual { position:relative; flex:0 0 60px; width:60px; height:60px; border:1px solid #39414b; border-radius:10px; overflow:hidden; background:#252d36; color:#b6c0cb; display:grid; place-items:center; }
.order-item-visual svg { width:36px; height:36px; }
.order-item-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#252d36; }
@media(max-width:600px) { .order-item-visual { flex-basis:44px; width:44px; height:44px; } .order-line-product { gap:8px; } }
.incoming-line span { display:grid; gap:4px; min-width:0; }
.incoming-line span:nth-of-type(2) { display:block; color:var(--muted); }
.incoming-total { display:flex; justify-content:space-between; align-items:center; padding:15px 0 4px; color:var(--muted); }
.incoming-total strong { color:#ff6670; font-size:1.2rem; }
.incoming-total.breakdown { display:grid; grid-template-columns:minmax(0,1fr); justify-content:stretch; justify-items:stretch; width:100%; gap:8px; }
.incoming-total.breakdown span { display:flex; justify-content:space-between; align-items:baseline; min-width:0; gap:12px; }
.incoming-total.breakdown span b, .incoming-total.breakdown span strong { margin-left:auto; }
.incoming-total-card { min-width:0; overflow:hidden; padding:10px; border:1px solid var(--line); border-radius:13px; background:#222329; }
.incoming-total-heading { display:flex; align-items:center; gap:12px; padding:0 0 14px; margin:0 0 8px; border-bottom:1px solid #303842; }
.incoming-total-heading-icon { display:grid; place-items:center; width:30px; height:30px; color:#f3f5f7; }
.incoming-total-heading-icon svg { width:28px; height:28px; }
.incoming-total-card .eyebrow { margin:0; color:#f3f5f7; font-size:.94rem; letter-spacing:.02em; text-transform:none; }
.incoming-total.breakdown { min-width:0; }
.incoming-total.breakdown span { min-width:0; overflow-wrap:anywhere; }
.incoming-total.breakdown b, .incoming-total.breakdown strong { white-space:nowrap; }
.incoming-total.breakdown span { display:grid !important; grid-template-columns:minmax(0,1fr) 86px; column-gap:10px; align-items:baseline; width:100%; }
.incoming-total.breakdown span em { flex:1 1 auto; min-width:0; text-align:left; }
.incoming-total.breakdown span b, .incoming-total.breakdown span strong { flex:0 0 auto; justify-self:end; margin-left:0; text-align:right; }
.incoming-total.breakdown span em { font-style:normal; color:#c4c9d0; }
.incoming-total.breakdown .discount-row em, .incoming-total.breakdown .discount-row b { color:#35d27a; }
.incoming-total.breakdown .grand-total { margin-top:8px; padding-top:16px; border-top:1px solid #303842; }
.incoming-total.breakdown .grand-total em { color:#f3f5f7; font-weight:700; font-size:1rem; }
.incoming-total.breakdown .grand-total strong { color:#fff; font-size:1.5rem; }
.incoming-order-actions { position:relative; top:0; display:grid; grid-template-columns:1fr 1.2fr 1.1fr; gap:12px; margin:18px -30px -30px; padding:14px 15px; border-top:1px solid #2b3139; background:#11151a; }
.incoming-order-actions > button { min-width:0; min-height:36px; display:flex; align-items:center; justify-content:center; gap:10px; flex:none; padding:0 12px; border-radius:6px; font-size:.78rem; }
.incoming-order-actions > button::before { display:inline-grid; place-items:center; line-height:1; font-weight:800; }
.incoming-order-actions [data-incoming-reject]::before { content:"×"; font-size:1.35rem; font-weight:400; }
.incoming-order-actions [data-order-print]::before { content:"▣"; font-size:1rem; }
.incoming-order-actions [data-incoming-approve]::before { content:"✓"; font-size:1.2rem; }
.order-row-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.order-receipt-modal { width:min(620px,100%); max-height:min(90vh,820px); overflow:auto; padding:26px; border:1px solid #454852; border-radius:20px; background:#1a1b20; box-shadow:0 24px 90px rgba(0,0,0,.5); }
.receipt-header { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; padding-bottom:18px; border-bottom:1px solid var(--line); }
.receipt-header h2 { margin:5px 0 3px; letter-spacing:.04em; }
.receipt-header span, .receipt-columns span, .receipt-line small { color:var(--muted); font-size:.78rem; }
.receipt-status { display:flex; justify-content:space-between; align-items:center; padding:14px 0; color:var(--muted); font-size:.82rem; }
.receipt-columns { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.receipt-columns > div { display:grid; gap:5px; padding:13px; border:1px solid var(--line); border-radius:11px; background:#222329; }
.receipt-columns small { color:var(--muted); font-size:.68rem; letter-spacing:.08em; }
.receipt-lines { border-top:1px solid var(--line); }
.receipt-line { display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.receipt-line span { display:grid; gap:4px; }
.receipt-line-head { color:var(--muted); font-size:.72rem; text-transform:uppercase; }
.receipt-totals { display:grid; gap:8px; padding-top:16px; }
.receipt-totals span, .receipt-totals strong { display:flex; justify-content:space-between; gap:15px; }
.receipt-totals strong { padding-top:12px; margin-top:4px; border-top:1px solid var(--line); color:#ff6670; font-size:1.12rem; }
.receipt-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:20px; }
@media (max-width: 600px) { .receipt-columns { grid-template-columns:1fr; } }
@media (max-width: 760px) { .incoming-content-grid { grid-template-columns:1fr; } }
@media (max-width: 600px) { .incoming-customer-grid { grid-template-columns:1fr; } }
@media (max-width: 600px) { .incoming-timing { grid-template-columns:1fr; } }
@media (max-width: 600px) { .incoming-meta-strip { grid-template-columns:1fr; } }
@media (max-width: 900px) {
  .incoming-order-modal { width:min(720px, calc(100vw - 28px)); max-height:calc(100vh - 28px); padding:22px; overflow-y:auto; }
  .incoming-content-grid { grid-template-columns:1fr; gap:14px; }
  .incoming-customer-grid { grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); }
  .incoming-timing { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .incoming-customer-grid > div, .incoming-timing > div, .incoming-meta-strip > div { min-width:0; overflow:hidden; }
  .incoming-customer-grid strong, .incoming-customer-grid span, .incoming-timing strong { overflow-wrap:anywhere; }
  .incoming-head-meta { gap:16px; }
}
@media (max-width: 520px) {
  .incoming-order-modal { width:calc(100vw - 20px); padding:18px; border-radius:16px; }
  .incoming-order-header { align-items:flex-start; }
  .incoming-order-header h2 { font-size:1.25rem; }
  .incoming-head-meta { display:none; }
  .incoming-customer-grid, .incoming-timing { grid-template-columns:1fr 1fr; gap:8px; }
  .incoming-customer-grid > div, .incoming-timing > div { padding:10px; }
  .incoming-order-actions { position:sticky; bottom:-18px; margin:18px -18px -18px; padding:12px 18px; background:#1a1b20; border-top:1px solid var(--line); }
  .incoming-order-actions .secondary-button, .incoming-order-actions .primary-button { flex:1; padding-inline:10px; }
  .incoming-lines-head, .incoming-line { grid-template-columns:minmax(0,1fr) 36px 64px 72px; gap:7px; }
}
@media print { body * { visibility:hidden !important; } #order-detail-modal, #order-detail-modal * { visibility:visible !important; } #order-detail-modal { position:static; display:block; padding:0; background:#fff; } .order-receipt-modal { width:100%; max-height:none; border:0; box-shadow:none; color:#111; } .receipt-actions, .receipt-header .icon-button { display:none !important; } }

/* Zaman kartında eski kırmızı timing kurallarını ez ve referans düzenini koru. */
.incoming-timing.timing-card > .timing-card-header { display:flex !important; grid-template-columns:none !important; align-items:center !important; min-height:54px !important; margin:0 !important; padding:12px 15px !important; border:0 !important; border-bottom:1px solid #2b343d !important; border-radius:0 !important; background:#1d252c !important; }
.incoming-timing.timing-card > .timing-row { display:grid !important; grid-template-columns:36px minmax(0,1fr) auto !important; align-items:center !important; min-height:70px !important; margin:0 !important; padding:14px 15px !important; border:0 !important; border-bottom:1px solid #2b343d !important; border-radius:0 !important; background:#1c2329 !important; }
.incoming-timing.timing-card > .timing-row:last-child { border-bottom:0 !important; }
.incoming-timing.timing-card .timing-card-header strong { display:block !important; margin:0 !important; color:#f0f2f4 !important; font-size:1rem !important; line-height:1.15 !important; }
.incoming-timing.timing-card .timing-row small { color:#a4acb5 !important; font-size:.78rem !important; letter-spacing:0 !important; }
.incoming-timing.timing-card .timing-row strong { display:block !important; margin-top:2px !important; color:#f7f8f9 !important; font-size:1.22rem !important; line-height:1.2 !important; }
@media (max-width:600px) {
  .incoming-timing.timing-card > .timing-card-header { min-height:50px !important; padding:11px 12px !important; }
  .incoming-timing.timing-card > .timing-row { grid-template-columns:30px minmax(0,1fr) auto !important; min-height:64px !important; padding:11px 12px !important; }
  .incoming-timing.timing-card .timing-card-header strong { font-size:.9rem !important; }
  .incoming-timing.timing-card .timing-row strong { font-size:1.02rem !important; }
}

/* Referans sipariş penceresinin portre görünümü: koyu yüzey, kırmızı vurgu,
   eşit kart aralıkları ve taşmayan fiş içeriği. Masaüstü geniş görünümü etkilenmez. */
@media (max-width: 600px) {
  .incoming-order-backdrop { padding: 12px; align-items: center; }
  .incoming-order-modal.incoming-order-expanded {
    width: min(430px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    padding: 26px;
    border: 1px solid #4a4d57;
    border-radius: 20px;
    background: #1b1c21;
  }
  .incoming-order-header { gap: 12px; margin: -26px -26px 0; padding: 18px 18px 15px; border-bottom: 0; }
  .incoming-order-header .incoming-alert-icon { width: 34px; height: 34px; margin-top: 0; border-radius: 50%; background: #ef3340; color: #fff; font-size: 1.05rem; }
  .incoming-header-copy .eyebrow { color: #ff3340; font-size: .67rem; letter-spacing: .12em; }
  .incoming-order-header h2 { margin: 7px 0 4px; font-size: 1rem; letter-spacing: -.01em; }
  .incoming-order-meta { margin: 0; font-size: .75rem; }
  .incoming-meta-strip { grid-template-columns: 1fr 1fr; gap: 0; margin: 0 -26px 18px; padding: 9px 10px; }
  .incoming-meta-strip > div { min-height: 58px; padding: 8px 10px; }
  .incoming-meta-strip > div + div { border-left: 1px solid #3b434e; }
  .incoming-meta-icon { width: 30px; font-size: 1.3rem; }
  .incoming-meta-icon svg { width: 25px; height: 25px; }
  .pickup-logo-mark { width: 25px; height: 25px; border-radius: 7px; font-size: .82rem; }
  .pickup-logo-image { width: 32px; height: 32px; border-radius: 7px; }
  .incoming-meta-strip strong { font-size: .86rem; }
  .incoming-head-meta { display:flex; gap:0; margin-left:auto; }
  .incoming-head-meta > div { min-width:72px; padding:0 8px; }
  .incoming-head-meta strong { font-size:.82rem; }
  .incoming-head-meta span { font-size:.6rem; }
  .incoming-flow { gap: 0; margin: 16px 0 19px; }
  .incoming-flow::before { top: 12px; left: 9%; right: 9%; background: #4a4d57; }
  .incoming-flow-step { gap: 6px; font-size: .58rem; }
  .incoming-flow-step span { width:18px; height:18px; border-width:4px; }
  .incoming-flow-step.is-current span { width:26px; height:26px; }
  .incoming-flow-step small { font-size:.62rem; }
  .incoming-content-grid { grid-template-columns: 1fr; gap: 0; }
  .incoming-customer-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 10px; }
  .incoming-customer-grid > div { min-height: 118px; padding: 11px; border-radius: 11px; background: #23242a; }
  .incoming-customer-grid strong { font-size: .84rem; line-height: 1.35; }
  .incoming-customer-grid span { font-size: .72rem; line-height: 1.35; }
  .incoming-timing { grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
  .incoming-timing > div { min-height: 80px; padding: 11px; border-color: #8e2d36; border-radius: 11px; background: #2a1d21; }
  .incoming-timing strong { font-size: .86rem; }
  .incoming-lines { margin-top: 4px; }
  .incoming-lines-head { display: none; }
  .incoming-line { grid-template-columns: minmax(0,1fr) 32px 78px; gap: 8px; padding: 12px 0; }
  .incoming-line span:nth-of-type(2) { display: block; font-size: .72rem; }
  .incoming-line span:nth-of-type(3) { display: none; }
  .incoming-total-card { padding: 0; margin-top: 14px; border: 0; background: transparent; }
  .incoming-total-card .eyebrow { display: block; }
  .incoming-total { padding: 4px 0; font-size: .84rem; }
  .incoming-total strong { font-size: 1.15rem; }
  .incoming-total.breakdown span { align-items: baseline; }
  .incoming-total.breakdown span { grid-template-columns: minmax(0,1fr) 78px; column-gap:8px; }
  .incoming-order-actions { position:relative; top:0; grid-template-columns:1fr 1.2fr 1.1fr; margin:18px -26px -26px; padding:12px 14px; border-top:1px solid #343740; gap:8px; }
  .incoming-order-actions > button { min-height: 40px; border-radius: 8px; font-size: .75rem; gap:6px; }
}
@media (max-width: 430px) {
  .incoming-head-meta { display:none; }
}
.product-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.product-table th { color: var(--muted); text-align: left; font-size: .69rem; letter-spacing: .06em; text-transform: uppercase; padding: 0 8px 10px; }
.product-table td { padding: 13px 8px; border-top: 1px solid #2b2e35; vertical-align: middle; }
.product-table th:first-child, .product-table td:first-child { padding-left: 0; }
.product-table th:last-child, .product-table td:last-child { padding-right: 0; text-align: right; }
.product-name { display: block; font-weight: 800; }
.product-detail { display: block; margin-top: 3px; color: var(--muted); font-size: .72rem; }
.product-cell { display: flex; align-items: center; gap: 10px; }
.product-thumbnail { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 10px; background: var(--red-soft); color: var(--red); font-size: .7rem; }
.product-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.stock-badge { display: inline-block; padding: 4px 7px; border-radius: 7px; background: #202d26; color: #86dfae; font-size: .72rem; font-weight: 750; }
.stock-badge.low { background: #382d19; color: #f0c575; }
.delete-button { border: 0; background: transparent; color: #c0c2c7; padding: 5px; font-size: 1rem; }
.delete-button:hover { color: var(--red); }

/* Teslimat bilgileri: müşteri, telefon, adres ve notlar tek akışta */
.incoming-customer-grid.delivery-info-stack { display:grid; grid-template-columns:1fr; gap:0; margin:16px 0; padding:0; border:1px solid #2b3139; border-radius:8px; overflow:hidden; background:#1e2329; }
.delivery-info-stack .delivery-info-row { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:10px; min-width:0; padding:11px 12px; border:0; border-bottom:1px solid #303740; border-radius:0; background:transparent; }
.delivery-info-stack .delivery-info-row:last-child { border-bottom:0; }
.delivery-info-icon { display:grid; place-items:center; width:24px; height:24px; color:#d9dde3; font-size:.9rem; }
.delivery-info-icon svg { width:20px; height:20px; }
.delivery-info-main { min-width:0; display:grid; gap:4px; }
.delivery-info-main > small { color:#a8afb8; font-size:.67rem; }
.delivery-contact-row .delivery-info-main > small { display:block; margin:0; color:#f0f2f4; font-size:1rem; font-weight:700; line-height:1.15; letter-spacing:0; }
.delivery-info-main > strong { min-width:0; overflow-wrap:anywhere; color:#f5f6f7; font-size:.82rem; }
.delivery-info-main > span { color:#a8afb8; font-size:.72rem; }
.delivery-contact-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; }
.delivery-contact-fields > div { display:grid; gap:3px; min-width:0; }
.delivery-contact-fields > div + div { padding-left:14px; border-left:1px solid #3a424c; }
.delivery-contact-fields small { color:#929aa5; font-size:.65rem; }
.delivery-contact-fields strong { color:#f5f6f7; font-size:.83rem; overflow-wrap:anywhere; }
.delivery-action-button { width:31px; height:31px; display:grid; place-items:center; border:0; border-radius:5px; background:#ef3340; color:#fff; font-size:.95rem; cursor:pointer; }
.delivery-action-button svg { width:18px; height:18px; }
.delivery-action-button[aria-label="Haritada aç"] { background:#252c34; border:1px solid #3b454f; }
.delivery-note-box { min-width:0; padding:8px 10px; border:1px solid #303942; border-radius:6px; background:#20262c; color:#dce0e5; font-size:.74rem; line-height:1.35; overflow-wrap:anywhere; }
.delivery-address-row .delivery-info-main, .delivery-note-row .delivery-info-main { grid-template-columns:88px minmax(0,1fr); align-items:center; column-gap:0; }
.delivery-address-row .delivery-info-main > small, .delivery-note-row .delivery-info-main > small { grid-column:1; grid-row:1 / span 2; }
.delivery-address-row .delivery-info-main > strong, .delivery-note-row .delivery-info-main > .delivery-note-box { grid-column:2; grid-row:1; }
.delivery-address-row .delivery-info-main > span { grid-column:2; grid-row:2; }
.delivery-note-row .delivery-info-main > .delivery-note-box { width:100%; }
.incoming-timing.timing-card { display:grid; grid-template-columns:1fr; gap:0; min-width:0; margin:16px 0; padding:0; border:1px solid #2b343d; border-radius:8px; overflow:hidden; background:#1c2329; }
.timing-card-header { display:flex; align-items:center; gap:12px; min-height:54px; padding:12px 15px; border-bottom:1px solid #2b343d; background:#1d252c; }
.timing-card-header strong { display:block; margin:0; color:#f0f2f4; font-size:1rem; font-weight:750; line-height:1.15; letter-spacing:-.012em; }
.timing-icon { display:grid; place-items:center; align-self:center; flex:0 0 auto; width:28px; height:28px; color:#edf0f3; line-height:1; }
.timing-icon svg { width:23px; height:23px; }
.timing-row { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:12px; min-width:0; padding:14px 15px; border-bottom:1px solid #2b343d; background:#1c2329; }
.timing-row:last-child { border-bottom:0; }
.timing-row > div { min-width:0; display:grid; gap:3px; }
.timing-row small { color:#a4acb5; font-size:.78rem; line-height:1.25; }
.timing-row strong { display:block; margin-top:2px; color:#f7f8f9; font-size:1.22rem; line-height:1.2; letter-spacing:-.02em; overflow-wrap:anywhere; }
.timing-badge { padding:8px 12px; border:1px solid #35414d; border-radius:10px; background:#2b3641; color:#e0e5ea; font-size:.74rem; white-space:nowrap; }
@media (max-width:600px) {
  .incoming-customer-grid.delivery-info-stack { margin:0 0 10px; }
  .delivery-info-stack .delivery-info-row { padding:10px; }
  .delivery-info-main > small, .delivery-contact-fields small { font-size:.64rem; }
  .delivery-contact-row .delivery-info-main > small { font-size:.9rem; }
  .delivery-info-main > strong, .delivery-contact-fields strong { font-size:.81rem; }
  .delivery-contact-fields { gap:8px; }
  .delivery-contact-fields > div + div { padding-left:8px; }
  .delivery-address-row .delivery-info-main, .delivery-note-row .delivery-info-main { grid-template-columns:82px minmax(0,1fr); }
  .incoming-timing.timing-card { margin:0 0 14px; }
  .timing-card-header { padding:11px 12px; }
  .timing-card-header strong { font-size:.9rem; }
  .timing-row { grid-template-columns:30px minmax(0,1fr) auto; gap:8px; padding:11px 12px; }
  .timing-icon { width:26px; height:26px; }
  .timing-row strong { font-size:1.02rem; }
  .timing-badge { padding:6px 8px; font-size:.66rem; }
}

.integration-card { max-width: 870px; }
.integration-diagram { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; padding: 25px 0 30px; margin-bottom: 25px; border-bottom: 1px solid var(--line); }
.system-node { min-height: 128px; padding: 21px; border: 1px solid #393c44; border-radius: 15px; background: #17191e; text-align: center; }
.system-node.current { border-color: #753037; background: #251619; }
.system-node span, .system-node strong, .system-node small { display: block; }
.system-node span { color: var(--red); font-size: 1.35rem; margin-bottom: 9px; }
.system-node strong { font-size: .9rem; }
.system-node small { margin-top: 4px; color: var(--muted); font-size: .73rem; }
.connector { min-width: 120px; position: relative; color: var(--muted); text-align: center; font-size: .72rem; font-weight: 750; }
.connector::before { content: ""; position: absolute; top: 50%; left: -27px; right: -27px; z-index: 0; border-top: 1px dashed #6a3a3f; }
.connector span { position: relative; z-index: 1; padding: 0 8px; background: var(--surface); }
.field-note { margin-top: 9px; }
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 10; max-width: calc(100vw - 34px); padding: 12px 15px; border-radius: 11px; background: #f5f5f6; color: #141518; font-size: .84rem; font-weight: 750; opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 820px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-shell.menu-collapsed { grid-template-columns:1fr; }
  .app-shell.menu-collapsed > .sidebar { visibility:visible; overflow:auto; padding:28px 18px 18px; border-right:1px solid var(--line); }
  .sidebar { position: fixed; z-index: 5; inset: 0 auto 0 0; width: 248px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 16px 0 30px rgba(0,0,0,.35); }
  .sidebar.open { transform: translateX(0); }
  .menu-toggle { display: inline-grid; place-items: center; }
  .content-grid, .products-layout { grid-template-columns: 1fr; }
  .product-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 570px) {
  .topbar { padding: 0 16px; }
  .view { padding: 28px 16px 40px; }
  .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 24px; }
  .metric-grid, .form-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 116px; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions .primary-button { width: 100%; }
  .product-list { grid-template-columns: 1fr; }
  .integration-diagram { grid-template-columns: 1fr; }
  .connector { min-height: 22px; }
  .connector::before { top: 50%; left: 50%; right: auto; width: 1px; height: 38px; border-top: 0; border-left: 1px dashed #6a3a3f; transform: translateY(-50%); }
  .connector span { padding: 3px 8px; }
  .product-table th:nth-child(3), .product-table td:nth-child(3) { display: none; }
}

#product-form [hidden] { display:none !important; }
#restaurant-fields { display:grid;gap:14px; }

.order-line-product > span { min-width:0; }
.order-line-product small,.receipt-line small { display:block;white-space:normal;overflow-wrap:anywhere; }

.pc-intro{padding:18px;background:linear-gradient(120deg,#27181e,#191d24);border:1px solid #473039;border-radius:12px;margin:12px 0}.pc-intro>span{font-size:11px;letter-spacing:1.5px;color:#ff6b75;font-weight:800}.pc-intro h3{margin:8px 0}.pc-intro p,.pc-review p{color:#aeb6c3;font-size:13px;line-height:1.6;margin:7px 0 0}.pc-step{padding:18px 0;border-bottom:1px solid #303640}.pc-step h3{display:flex;align-items:center;gap:10px}.pc-step h3 b{display:inline-grid;place-items:center;width:26px;height:26px;background:#352128;color:#ff727b;border-radius:8px;font-size:13px}.pc-template{padding:12px;background:#13171c;border:1px dashed #3b424d;border-radius:9px;margin:12px 0}.pc-template summary{cursor:pointer;color:#b8c2d1;font-size:13px}.pc-template[open] summary{margin-bottom:12px}.pc-review{margin:18px 0 10px;padding:15px;border-left:3px solid #e52638;background:#1d2028}.pc-review strong{font-size:14px}#config-inline-category{padding:12px;background:#15191f;border-radius:8px;margin-top:10px}#config-inline-category[hidden]{display:none}