:root {
  --navy: #061f3f;
  --deep: #03152e;
  --ink: #07162b;
  --muted: #64748b;
  --line: #dce6ef;
  --soft: #f5f8fb;
  --blue: #0f74e8;
  --teal: #07a899;
  --green: #13a86d;
  --orange: #ff9f1f;
  --red: #ff5361;
  --purple: #7b74ff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #eef3f8; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(7,168,153,.28); outline-offset: 2px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 270px minmax(0, 1fr); }
.sidebar {
  min-height: 100vh;
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #f2f8ff;
  background: radial-gradient(circle at 12% 0%, rgba(4, 201, 215, .3), transparent 26%), linear-gradient(180deg, #06284d, #03162f 72%, #021126);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 6px 8px; }
.brand-mark { width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; color: #06243d; background: linear-gradient(135deg, #21d6d0, #08a899); font-weight: 950; font-size: 24px; }
.brand strong { font-size: 30px; letter-spacing: 0; }
.branch-select { border: 1px solid rgba(226, 241, 255, .22); border-radius: 8px; padding: 10px 12px; display: grid; gap: 8px; background: rgba(255, 255, 255, .055); }
.branch-select span { font-size: 13px; font-weight: 780; }
.branch-select select { width: 100%; color: #d9eaff; background: transparent; border: 0; outline: 0; }
.nav { display: grid; gap: 7px; }
.nav-item, .sub-nav {
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #eaf5ff;
  background: transparent;
  font-weight: 730;
  text-align: left;
}
.nav-item i { width: 24px; height: 24px; border: 1px solid rgba(213, 232, 248, .45); border-radius: 7px; display: grid; place-items: center; color: #9fd7e5; font-size: 10px; font-style: normal; }
.nav-item b { margin-left: auto; min-width: 30px; height: 24px; border-radius: 999px; display: grid; place-items: center; color: #fff; background: var(--teal); font-size: 12px; }
.nav-item.active, .nav-item:hover { background: linear-gradient(135deg, rgba(12, 181, 172, .96), rgba(5, 91, 121, .92)); }
.sub-nav { margin-left: 42px; min-height: 30px; color: #bdd0e6; border-left: 1px solid rgba(220, 236, 255, .24); }
.sub-nav.active { color: #2be4d0; }
.summary-card, .user-card { border: 1px solid rgba(226, 241, 255, .2); border-radius: 8px; background: rgba(255, 255, 255, .06); }
.summary-card { margin-top: auto; padding: 16px; }
.summary-card h3 { margin: 0 0 14px; font-size: 14px; }
.ring { width: 96px; height: 96px; margin: 0 auto 16px; border-radius: 999px; display: grid; place-items: center; position: relative; background: conic-gradient(#1dc8ff 0 76%, rgba(255,255,255,.16) 76% 100%); }
.ring:after { content: ""; position: absolute; inset: 14px; border-radius: inherit; background: #082440; }
.ring strong { z-index: 1; font-size: 24px; }
.summary-card p { display: flex; justify-content: space-between; margin: 10px 0; color: #d9e7f4; }
.user-card { display: flex; gap: 12px; align-items: center; padding: 12px; }
.user-card span, .avatar { width: 42px; height: 42px; border-radius: 999px; display: inline-grid; place-items: center; color: #26364d; background: #dce8f5; font-weight: 850; }
.user-card small { display: block; color: #bdd0e6; }

.workspace { min-width: 0; overflow-x: auto; }
.topbar { min-height: 76px; padding: 15px 24px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); position: sticky; top: 0; z-index: 20; }
.title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.demo-badge { border: 1px solid rgba(7,168,153,.22); border-radius: 999px; padding: 5px 10px; color: #08756d; background: #e7fbf8; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.demo-strip { margin: 14px 24px 0; border: 1px solid rgba(7,168,153,.2); border-radius: 8px; padding: 12px 14px; color: #075d58; background: linear-gradient(135deg,#e7fbf8,#f7fffd); font-weight: 750; }
.topbar h1 { margin: 0; font-size: 24px; }
.topbar p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.top-select { margin-left: auto; }
.top-select select, .date-btn, .icon-btn { height: 42px; border: 1px solid #cbd8e5; border-radius: 8px; background: #fff; color: var(--ink); }
.top-select select { min-width: 190px; padding: 0 12px; }
.date-btn { padding: 0 18px; }
.icon-btn { width: 42px; font-weight: 850; }
.alert { color: var(--red); }

.view { display: none; padding: 20px 24px; }
.view.active { display: block; }
.panel, .kpi-card, .quick-actions, .flow-section, .metric-card { border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.97); box-shadow: 0 14px 32px rgba(25,46,72,.06); }
.panel { padding: 16px; min-width: 0; }
.panel-head, .rule-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel h2, .panel-head h2 { margin: 0; font-size: 16px; }

.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(170px, 1fr)); gap: 14px; }
.kpi-card { min-height: 120px; padding: 20px; display: flex; align-items: center; gap: 16px; }
.kpi-icon { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; color: #fff; font-weight: 950; font-size: 22px; }
.kpi-icon.blue { background: linear-gradient(135deg, #1786ff, #045fd0); }
.kpi-icon.orange { background: linear-gradient(135deg, #ffb43f, #ff8b00); }
.kpi-icon.purple { background: linear-gradient(135deg, #8f97ff, #606cff); }
.kpi-icon.green { background: linear-gradient(135deg, #35d48b, #0b9b61); }
.kpi-icon.red { background: linear-gradient(135deg, #ff7d88, #ff4658); }
.kpi-card p { margin: 0; color: var(--muted); font-weight: 760; }
.kpi-card strong { display: block; margin: 3px 0; color: var(--ink); font-size: 30px; }
.kpi-card small { color: var(--green); }
.kpi-card:last-child small { color: var(--red); }

.quick-actions { min-height: 78px; margin: 14px 0; padding: 16px; display: grid; grid-template-columns: 150px repeat(5, 1fr); gap: 12px; align-items: center; }
.quick-actions h2 { margin: 0; font-size: 16px; }
.quick-actions button { height: 50px; border: 1px solid rgba(15,116,232,.35); border-radius: 8px; color: #066bd4; background: #f7fbff; font-weight: 850; }
.quick-actions button:nth-child(3), .quick-actions button:nth-child(5) { color: #087545; border-color: rgba(19,168,109,.34); background: #f6fffb; }
.quick-actions button:nth-child(6) { color: #6d35c9; border-color: rgba(123,116,255,.35); background: #fbf8ff; }

.dashboard-grid { display: grid; grid-template-columns: 1.25fr 1fr 1.25fr; gap: 14px; }
.customers-panel { grid-column: 1 / 3; }
.route-layout { display: grid; grid-template-columns: 250px 1fr; gap: 16px; }
.route-list { margin: 0; padding-left: 28px; border-left: 2px dashed #bdd1e5; }
.route-list li { margin: 0 0 16px; padding-left: 10px; position: relative; }
.route-list li:before { content: counter(list-item); position: absolute; left: -37px; top: 0; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; color: #fff; background: var(--blue); font-size: 12px; font-weight: 900; }
.route-list b, .route-list strong, .route-list small { display: block; }
.route-list b { color: var(--blue); }
.route-list small { color: var(--muted); }
.route-map { min-height: 235px; border-radius: 8px; position: relative; overflow: hidden; background: linear-gradient(35deg, transparent 45%, rgba(15,116,232,.08) 46%, transparent 47%), repeating-linear-gradient(0deg, #edf1f5 0 2px, transparent 2px 28px), repeating-linear-gradient(90deg, #edf1f5 0 2px, transparent 2px 34px), #f7fafc; }
.route-map svg { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
.pin { position: absolute; z-index: 1; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; color: #fff; background: var(--blue); font-weight: 900; }
.p1 { left: 60%; top: 16%; }.p2 { right: 12%; top: 22%; }.p3 { left: 42%; top: 56%; }.p4 { left: 22%; top: 68%; }.p5 { right: 28%; bottom: 14%; }
.route-panel footer { margin-top: 10px; color: var(--muted); display: flex; gap: 34px; }
.funnel { padding: 16px 26px 0; display: grid; gap: 2px; }
.funnel i { height: 42px; background: linear-gradient(135deg, #3f9df7, #0f74e8); clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); }
.funnel i:nth-child(2) { margin: 0 15px; background: linear-gradient(135deg, #ffb23c, #ff8b00); }
.funnel i:nth-child(3) { margin: 0 32px; background: linear-gradient(135deg, #8c77ef, #6d5ce7); }
.funnel i:nth-child(4) { margin: 0 48px; }
.funnel i:nth-child(5) { margin: 0 64px; background: linear-gradient(135deg, #58d890, #16a66a); }
.funnel i:nth-child(6) { margin: 0 80px; background: linear-gradient(135deg, #31c786, #0b9b61); }
.funnel-labels { margin-top: 12px; }
.funnel-labels p { display: flex; justify-content: space-between; margin: 7px 0; color: var(--muted); }
.payment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.payment-grid button { min-height: 96px; border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: grid; gap: 6px; text-align: left; background: #fff; }
.payment-grid strong { font-size: 22px; }
.payment-grid span { color: var(--green); font-size: 12px; }
.payment-grid button:first-child { border-color: #ffb5b5; background: #fff8f8; }
.payment-grid button:first-child span { color: var(--red); }

table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { padding: 10px 8px; border-bottom: 1px solid #ebf1f6; text-align: left; vertical-align: middle; }
th { color: var(--muted); font-weight: 740; }
.avatar { width: 32px; height: 32px; margin-right: 8px; background: #d8e6ff; color: #4f68ab; font-size: 12px; }
.tag { padding: 4px 8px; border-radius: 7px; font-size: 11px; }
.green-tag { color: #087545; background: #dff8e9; }
.orange-tag { color: #b45700; background: #fff0df; }
.link-btn { width: 100%; height: 36px; border: 0; margin-top: 10px; color: var(--blue); background: transparent; font-weight: 780; }
.pickup-panel .panel-head button { border: 1px solid #bad7ff; border-radius: 8px; color: var(--blue); background: #f5faff; padding: 8px 12px; }
.driver { color: var(--muted); }
.pickup-list p { display: grid; grid-template-columns: 58px 1fr 58px; align-items: center; margin: 13px 0; }
.pickup-list b { color: #334155; }
.pickup-list span { padding: 5px 7px; border-radius: 7px; color: #087545; background: #dff8e9; font-size: 12px; text-align: center; }
.notice-list { display: grid; gap: 8px; }
.notice-list button { border: 0; border-bottom: 1px solid #edf2f7; padding: 8px 0; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; background: transparent; text-align: left; }
.notice-list span { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; color: #fff; background: var(--green); font-size: 10px; font-weight: 900; }
.notice-list small { display: block; color: var(--muted); }
.notice-list em { padding: 4px 8px; border-radius: 7px; color: #087545; background: #dff8e9; font-size: 11px; font-style: normal; }
.notice-list .warn { color: #b45700; background: #fff0df; }

.order-layout { display: grid; grid-template-columns: 305px minmax(760px, 1fr) 390px; gap: 14px; }
.order-list-panel, .order-main, .comm-panel { border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.order-list-panel { padding: 14px; }
.order-list-panel h2 { margin: 0 0 14px; }
.search-box { height: 42px; border: 1px solid var(--line); border-radius: 8px; display: grid; grid-template-columns: 1fr 58px; align-items: center; overflow: hidden; }
.search-box input { border: 0; outline: 0; padding-left: 12px; }
.search-box span { height: 100%; display: grid; place-items: center; color: var(--muted); border-left: 1px solid var(--line); font-size: 12px; }
.filter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; }
.filter-grid button { min-height: 34px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #53657c; }
.filter-grid .active { color: #087545; border-color: #8bd8bd; background: #f4fffb; }
.order-list { display: grid; gap: 9px; }
.order-card { min-height: 112px; border: 1px solid var(--line); border-radius: 8px; padding: 13px; display: grid; grid-template-columns: 1fr auto; gap: 6px; background: #fff; text-align: left; }
.order-card.active { border-color: var(--blue); background: #f3f8ff; }
.order-card span, .order-card small { grid-column: 1 / -1; color: #243248; }
.order-card small { color: var(--muted); }
.order-card em { padding: 4px 8px; border-radius: 7px; color: var(--blue); background: #e6f1ff; font-style: normal; font-size: 11px; }
.order-card .ready { color: #087545; background: #dff8e9; }
.order-card .pending { color: #64748b; background: #edf2f7; }
.order-card b { font-size: 18px; }
.new-order { width: 100%; height: 54px; margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #334155; }

.order-head { min-height: 82px; padding: 14px 18px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.order-head h1 { margin: 0; font-size: 30px; }
.order-head small { color: var(--muted); }
.order-head span { padding: 8px 12px; border-radius: 8px; color: var(--blue); background: #e8f2ff; }
.order-head button { margin-left: auto; height: 42px; border: 1px solid #ccd8e5; border-radius: 8px; background: #fff; padding: 0 16px; }
.order-head button + button { margin-left: 0; }
.green-btn { color: #fff !important; border: 0 !important; background: var(--green) !important; }
.blue-btn { color: #fff !important; border: 0 !important; background: var(--blue) !important; }
.dark-btn { color: #fff !important; border: 0 !important; background: #061f3f !important; }
.operation-grid { padding: 14px; display: grid; grid-template-columns: 1.2fr .9fr .58fr; gap: 12px; }
.customer-card { grid-column: span 2; }
.customer-map { display: grid; grid-template-columns: 1fr 230px; gap: 16px; }
.customer-map p { color: var(--muted); }
.customer-map b, .customer-map small { display: block; color: var(--ink); margin-top: 4px; }
.map-card { min-height: 180px; border: 1px solid var(--line); border-radius: 8px; position: relative; background: repeating-linear-gradient(35deg, #e5ebf1 0 3px, transparent 3px 24px), #f5f8fb; }
.map-card span { position: absolute; left: 50%; top: 46%; width: 28px; height: 28px; border-radius: 999px; background: var(--red); transform: translate(-50%, -50%); }
.schedule-card p { display: grid; grid-template-columns: 120px 1fr auto; gap: 8px; align-items: center; padding: 12px 0; margin: 0; border-bottom: 1px solid #edf2f7; color: var(--muted); }
.schedule-card b { color: var(--ink); }
.schedule-card em { padding: 4px 8px; border-radius: 7px; color: var(--green); background: #dff8e9; font-style: normal; font-size: 11px; }
.schedule-card .warn { color: #b45700; background: #fff0df; }
.schedule-card button { border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.carpet-card { grid-column: span 2; }
.rug { width: 42px; height: 34px; border-radius: 6px; display: inline-block; margin-right: 8px; vertical-align: middle; background: linear-gradient(135deg, #d8c4a3, #8e795e); }
.r2 { background: linear-gradient(135deg, #baa18f, #6f594a); }
.r3 { background: linear-gradient(135deg, #c8ced6, #6b7280); }
.total-card p { display: flex; justify-content: space-between; margin: 20px 0; color: var(--muted); }
.total-card p:last-child b { color: var(--blue); font-size: 20px; }
.process-card { grid-column: 1 / -1; }
.process { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 18px; }
.process button { border: 0; background: transparent; color: var(--muted); display: grid; gap: 8px; justify-items: center; }
.process span { width: 58px; height: 58px; border-radius: 999px; display: grid; place-items: center; border: 1px solid #cbd8e5; background: #fff; font-weight: 900; }
.process .done span { color: #fff; border-color: var(--green); background: var(--green); }
.process .active { color: var(--blue); font-weight: 850; }
.process .active span { color: #fff; border-color: var(--blue); background: var(--blue); }
.process small { font-size: 11px; }
.stage-detail { margin-top: 16px; border: 1px solid #e3ecf5; border-radius: 8px; padding: 12px; display: grid; grid-template-columns: 1fr 1.4fr .8fr; gap: 20px; color: var(--muted); }
.stage-detail b { color: var(--ink); }
.progress { height: 10px; margin: 10px 0; border-radius: 999px; background: #e6edf4; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--blue); }
.notes-card, .photos-card { grid-column: span 1; }
.photos-card { grid-column: span 2; }
.photo-row { display: grid; grid-template-columns: repeat(3, 1fr) 120px; gap: 10px; }
.photo-row span, .photo-row button { min-height: 92px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(135deg, #d7c9b2, #8c7b68); }
.photo-row span:nth-child(2) { background: linear-gradient(135deg, #cbb59a, #745d4d); }
.photo-row span:nth-child(3) { background: linear-gradient(135deg, #d5d9de, #7a838f); }
.photo-row button { color: var(--muted); background: #fff; }

.comm-panel { display: grid; gap: 12px; align-content: start; padding: 12px; }
.chat { min-height: 260px; padding: 18px; border-radius: 8px; background: #f5efe9; }
.chat p { width: fit-content; max-width: 86%; padding: 12px 14px; border-radius: 8px; line-height: 1.45; background: #fff; }
.chat small { display: block; margin-top: 8px; text-align: right; color: var(--muted); }
.outgoing { margin-left: auto; background: #dcf8c6 !important; }
.message-input { height: 42px; margin-top: 10px; border: 1px solid var(--line); border-radius: 999px; padding: 11px 14px; color: var(--muted); }
.sms-card p, .sms-preview, .preview-message { border: 1px solid var(--line); border-radius: 8px; padding: 14px; color: #334155; background: #fbfdff; line-height: 1.45; }
.sms-card button { width: 52px; height: 42px; float: right; border: 0; border-radius: 8px; color: #fff; background: var(--teal); }
.order-payment h2 span { float: right; padding: 6px 10px; border-radius: 7px; color: #c55a00; background: #fff0df; font-size: 12px; }
.order-payment p { display: flex; justify-content: space-between; color: var(--muted); }
.order-payment p:last-of-type b { color: var(--red); font-size: 18px; }
.order-payment div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.order-payment button { height: 70px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #334155; font-weight: 800; }

.automation-layout { display: grid; grid-template-columns: minmax(880px, 1fr) 390px; gap: 14px; }
.flow-section { padding: 14px; }
.rule-head { min-height: 64px; margin-bottom: 12px; }
.rule-head h1 { margin: 0 0 8px; font-size: 20px; }
.rule-head h2 { margin: 0; font-size: 17px; }
.rule-head h2 span { margin-left: 12px; padding: 4px 10px; border-radius: 999px; color: var(--green); background: #dff8e9; font-size: 12px; }
.rule-head button { height: 38px; min-width: 92px; border: 1px solid #ccd8e5; border-radius: 8px; background: #fff; }
.publish-btn { color: #fff !important; border: 0 !important; background: linear-gradient(135deg, #0bb58a, #079c8f) !important; }
.flow-canvas { height: 640px; border: 1px solid var(--line); border-radius: 8px; position: relative; overflow: hidden; background-image: radial-gradient(#dce7ef 1px, transparent 1px); background-size: 14px 14px; }
.flow-canvas:before { content: ""; position: absolute; left: 165px; right: 195px; top: 112px; height: 2px; background: #0b2447; }
.flow-canvas:after { content: ""; position: absolute; left: 165px; right: 325px; top: 390px; height: 2px; background: #0b2447; }
.toolbox { position: absolute; left: 10px; top: 10px; width: 42px; display: grid; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; z-index: 2; }
.toolbox button { height: 30px; border: 0; border-radius: 6px; background: transparent; font-size: 10px; }
.node { position: absolute; min-width: 142px; min-height: 62px; border: 1px solid #91d8bd; border-radius: 8px; padding: 10px; display: grid; place-items: center; background: #f8fffc; color: #172033; font-weight: 780; text-align: center; box-shadow: 0 10px 24px rgba(14,42,70,.06); }
.node.blue { border-color: #7eb6f4; background: #f4f9ff; }.node.purple { border-color: #b5a4f5; background: #fbf8ff; }.node.green { border-color: #8bd8bd; background: #f6fffb; }.node.orange { border-color: #ffc174; background: #fffaf2; }.node.red { border-color: #ff9d9d; background: #fff8f8; }.node.teal { border-color: #6fd2cc; background: #f2fffd; }
.decision { min-width: 86px; min-height: 86px; transform: rotate(45deg); border-color: #ffa826; color: #d77100; background: #fffaf0; }
.decision:hover { transform: rotate(45deg) translateY(-2px); }
.n1 { left: 82px; top: 82px; }.n2 { left: 265px; top: 82px; }.n3 { left: 448px; top: 82px; }.n4 { left: 632px; top: 82px; }.n5 { left: 845px; top: 82px; }.d1 { right: 100px; top: 72px; }
.n6 { right: 70px; top: 230px; }.n7 { left: 82px; top: 360px; }.n8 { left: 275px; top: 360px; }.n9 { left: 468px; top: 360px; }.n10 { left: 660px; top: 360px; }.d2 { left: 855px; top: 350px; }.n11 { left: 800px; top: 500px; }.n12 { right: 70px; top: 360px; }
.automation-side { display: grid; gap: 12px; align-content: start; }
.preview-message { margin-top: 12px; background: #dcf8c6; }
.preview-message small, .sms-preview small { display: block; margin-top: 8px; color: var(--muted); text-align: right; }
.variables p { display: grid; grid-template-columns: 1fr 1fr; padding: 8px 0; margin: 0; border-bottom: 1px solid #edf2f7; color: var(--teal); font-weight: 850; }
.variables span { color: var(--muted); font-weight: 500; }
.automation-bottom { margin-top: 14px; display: grid; grid-template-columns: 180px 180px 180px 1.3fr 1fr; gap: 12px; }
.metric-card { min-height: 118px; padding: 16px; }
.metric-card small, .metric-card span { color: var(--muted); }
.metric-card strong { display: block; margin: 10px 0; font-size: 30px; }
.failures h2 b, .reminders h2 b { float: right; width: 26px; height: 26px; border-radius: 999px; display: inline-grid; place-items: center; color: var(--red); background: #ffe2e2; font-size: 12px; }
.reminders h2 b { color: #c96b00; background: #fff1d9; }

.selected { outline: 2px solid rgba(15,116,232,.34) !important; outline-offset: -2px; }
tbody tr, .kpi-card, .node, .metric-card { cursor: pointer; }
tbody tr:hover, .kpi-card:hover, .node:hover, .metric-card:hover, .order-card:hover { outline: 2px solid rgba(8,168,153,.22); outline-offset: -2px; }
.toast { position: fixed; right: 22px; bottom: 22px; padding: 14px 18px; border-radius: 8px; color: #fff; background: #061f3f; box-shadow: 0 18px 36px rgba(0,0,0,.22); opacity: 0; transform: translateY(18px); pointer-events: none; transition: .2s; z-index: 50; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1300px) {
  .app-shell { grid-template-columns: 230px 1fr; }
  .kpi-grid, .dashboard-grid, .order-layout, .automation-layout, .automation-bottom { grid-template-columns: 1fr; }
  .customers-panel, .route-panel, .payment-panel, .carpet-card, .process-card, .notes-card, .photos-card { grid-column: auto; }
  .flow-canvas { min-width: 1080px; }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { min-height: auto; }
  .topbar { flex-wrap: wrap; }
  .top-select { margin-left: 0; width: 100%; }
  .top-select select { width: 100%; }
  .quick-actions, .route-layout, .operation-grid, .customer-map, .process, .stage-detail, .photo-row, .payment-grid { grid-template-columns: 1fr; }
}