:root {
  color-scheme: dark;
  --navy: #090a18;
  --panel: #111a31;
  --panel-2: #182343;
  --cream: #f7f4ec;
  --muted: #aab5cf;
  --purple: #8b5cf6;
  --cyan: #00d4ff;
  --coral: #ff6b57;
  --lime: #b8ff3c;
  --line: rgba(255, 255, 255, .12);
  font-family: "Noto Sans Thai", "Leelawadee UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--navy); }
body { margin: 0; min-height: 100vh; color: var(--cream); background: radial-gradient(circle at 15% 0%, rgba(139,92,246,.22), transparent 35%), radial-gradient(circle at 90% 18%, rgba(0,212,255,.12), transparent 32%), var(--navy); }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

.site-header { min-height: 76px; padding: 14px clamp(18px,4vw,56px); display: flex; align-items: center; justify-content: space-between; gap: 28px; border-bottom: 1px solid var(--line); background: rgba(9,10,24,.82); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand span:last-child { display: grid; line-height: 1.05; }
.brand strong { font-size: 1.08rem; letter-spacing: .02em; }
.brand small { margin-top: 5px; color: var(--muted); font-size: .72rem; }
.brand-mark { width: 44px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg,var(--purple),var(--cyan)); color: white; font-weight: 900; box-shadow: 0 12px 28px rgba(139,92,246,.35); }
.role-switcher { display: flex; gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.04); }
.role-switcher a { padding: 9px 14px; border-radius: 11px; color: var(--muted); text-decoration: none; font-size: .9rem; }
.role-switcher a[aria-current] { color: white; background: linear-gradient(135deg,rgba(139,92,246,.9),rgba(0,212,255,.35)); }

main { width: min(1180px, calc(100% - 36px)); min-height: calc(100vh - 210px); margin: 0 auto; padding: clamp(42px,7vw,92px) 0; }
.placeholder-card { max-width: 760px; padding: clamp(28px,5vw,56px); border: 1px solid var(--line); border-radius: 32px; background: linear-gradient(145deg,rgba(24,35,67,.95),rgba(17,26,49,.85)); box-shadow: 0 30px 80px rgba(0,0,0,.28); }
.placeholder-card h1 { margin: 8px 0 12px; font-size: clamp(2.2rem,8vw,5.6rem); line-height: .98; }
.placeholder-card p:last-child { color: var(--muted); font-size: 1.05rem; }
.eyebrow { margin: 0; color: var(--lime); text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 800; }
.demo-notice { width: min(1180px, calc(100% - 36px)); margin: 0 auto 28px; padding: 16px 18px; display: flex; gap: 12px; border: 1px solid rgba(184,255,60,.25); border-radius: 16px; background: rgba(184,255,60,.07); color: var(--muted); font-size: .84rem; }
.demo-notice strong { flex: 0 0 auto; color: var(--lime); }
footer { padding: 24px clamp(18px,4vw,56px); display: flex; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }

@media (max-width: 720px) {
  .site-header { align-items: flex-start; flex-direction: column; gap: 12px; }
  .role-switcher { width: 100%; overflow-x: auto; }
  .role-switcher a { flex: 1 0 max-content; text-align: center; }
  .demo-notice, footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

button { color: inherit; border: 0; cursor: pointer; }
.primary-btn,.ghost-btn { min-height: 48px; padding: 12px 20px; border-radius: 14px; font-weight: 800; }
.primary-btn { background: linear-gradient(135deg,var(--lime),#74e800); color: #111827; box-shadow: 0 12px 30px rgba(184,255,60,.18); }
.ghost-btn { border: 1px solid var(--line); background: rgba(255,255,255,.05); }
.primary-btn.full { width: 100%; }
.hero-grid { min-height: 640px; display: grid; grid-template-columns: 1.08fr .72fr; align-items: center; gap: clamp(40px,8vw,110px); }
.hero-copy h1 { margin: 12px 0 24px; font-size: clamp(3rem,7vw,6.6rem); line-height: .92; letter-spacing: -.045em; }
.hero-copy h1 span,.price-teaser strong,.quote-amount strong,.ring strong,.arrival strong,.metric-float b { color: var(--lime); }
.hero-lead { max-width: 680px; color: var(--muted); font-size: 1.12rem; line-height: 1.8; }
.hero-actions,.trust-row { display: flex; flex-wrap: wrap; gap: 12px; }.hero-actions { margin: 30px 0; }.trust-row { gap: 18px; color: var(--muted); font-size: .84rem; }
.phone-preview { width: min(380px,100%); margin-inline: auto; padding: 18px; border: 8px solid #202c4e; border-radius: 42px; background: #0d152a; box-shadow: 0 40px 100px rgba(0,0,0,.45),0 0 60px rgba(0,212,255,.08); transform: rotate(2deg); }
.phone-top { display: flex; justify-content: space-between; color: var(--muted); font-size: .7rem; }
.phone-card { margin-top: 20px; padding: 20px; display: grid; gap: 5px; border: 1px solid var(--line); border-radius: 20px; }.accent-card { background: linear-gradient(145deg,rgba(139,92,246,.32),rgba(0,212,255,.08)); }
.status-chip,.recommend-chip,.live-chip { width: max-content; padding: 5px 9px; border-radius: 999px; color: var(--lime); background: rgba(184,255,60,.1); font-size: .7rem; }
.mini-map,.fictional-map,.route-map { position: relative; overflow: hidden; border-radius: 20px; background: linear-gradient(28deg,transparent 46%,rgba(255,255,255,.08) 47% 50%,transparent 51%),linear-gradient(118deg,transparent 45%,rgba(255,255,255,.07) 46% 49%,transparent 50%),#121f3b; background-size: 85px 85px; }
.mini-map { height: 180px; margin: 14px 0; }.map-route,.route-line { position: absolute; border: 3px dashed var(--cyan); border-color: var(--cyan) transparent transparent var(--cyan); border-radius: 50%; transform: rotate(-14deg); }.map-route { width: 180px; height: 90px; left: 60px; top: 55px; }
.pin,.route-home,.route-tech { display: grid; place-items: center; position: absolute; border-radius: 50%; font-style: normal; box-shadow: 0 8px 18px rgba(0,0,0,.3); }.pin { width: 38px; height: 38px; }.customer-pin { left: 46px; bottom: 32px; background: var(--coral); }.tech-pin { right: 48px; top: 30px; background: var(--lime); color: #111; }
.tech-mini,.tech-profile { display: flex; align-items: center; gap: 12px; }.tech-mini div,.tech-profile div { display: grid; flex: 1; }.tech-mini small,.tech-profile p { color: var(--muted); }
.avatar { width: 42px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg,var(--purple),var(--cyan)); font-weight: 900; }.avatar.large { width: 56px; border-radius: 18px; }
.progress-mini { display: flex; gap: 7px; margin-top: 18px; }.progress-mini i { height: 5px; flex: 1; border-radius: 99px; background: rgba(255,255,255,.1); }.progress-mini i.done { background: var(--lime); }.progress-mini i.current { background: var(--cyan); }
.app-panel,.tracking-main,.timeline-card { padding: clamp(24px,5vw,48px); border: 1px solid var(--line); border-radius: 30px; background: linear-gradient(145deg,rgba(24,35,67,.94),rgba(12,19,38,.94)); box-shadow: 0 30px 90px rgba(0,0,0,.28); }
.scene-heading,.panel-footer,.tracking-title { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }.scene-heading { margin-bottom: 34px; }.scene-heading h1,.tracking-title h1 { margin: 7px 0 8px; font-size: clamp(2rem,4vw,3.6rem); line-height: 1.08; }.scene-heading p:not(.eyebrow),.tracking-title p { color: var(--muted); }
.step-pill { padding: 8px 12px; border-radius: 999px; background: rgba(0,212,255,.1); color: var(--cyan); font-size: .8rem; }
.form-section { margin: 28px 0; }.section-label { display: block; margin-bottom: 12px; color: var(--muted); font-size: .84rem; font-weight: 700; }
.choice-grid { display: grid; gap: 10px; }.choice-grid.three { grid-template-columns: repeat(3,1fr); }.choice-grid.six { grid-template-columns: repeat(6,1fr); }
.choice-card { min-height: 86px; padding: 14px 10px; display: grid; place-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.035); }.choice-card.is-selected { border-color: var(--cyan); background: rgba(0,212,255,.09); }.choice-icon { font-size: 1.55rem; }.choice-card strong { font-size: .82rem; }
.segmented { width: max-content; max-width: 100%; padding: 5px; display: flex; gap: 4px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.03); }.segmented button { padding: 9px 16px; border-radius: 10px; background: transparent; color: var(--muted); }.segmented button.active { color: white; background: var(--purple); }
.detail-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 16px; } textarea { width: 100%; resize: vertical; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(0,0,0,.2); color: white; }
.upload-zone { min-height: 130px; display: grid; place-items: center; align-content: center; gap: 4px; border: 1px dashed rgba(255,255,255,.25); border-radius: 16px; background: rgba(255,255,255,.025); }.upload-zone.has-photo { border-color: var(--lime); background: rgba(184,255,60,.06); }.upload-zone span { font-size: 1.6rem; color: var(--lime); }.upload-zone small { color: var(--muted); }
.panel-footer { margin-top: 28px; padding-top: 22px; align-items: center; border-top: 1px solid var(--line); }.price-teaser { color: var(--muted); }.price-teaser strong { margin-left: 10px; font-size: 1.18rem; }
.multi-layout,.schedule-grid,.match-layout,.tracking-layout,.estimate-layout { display: grid; gap: 22px; }.multi-layout { grid-template-columns: 1.15fr .85fr; }.schedule-grid { grid-template-columns: 1.1fr .9fr; }.match-layout { grid-template-columns: 1fr 320px; }.tracking-layout { grid-template-columns: 1fr 350px; }.estimate-layout { min-height: 620px; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }
.building-card,.insight-card,.match-summary { padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.035); }.building-top { display: flex; gap: 12px; align-items: center; }.building-top div { display: grid; flex: 1; }.building-top small { color: var(--muted); }.building-icon { font-size: 2rem; }.building-top b { padding: 7px 10px; border-radius: 10px; background: rgba(0,212,255,.1); color: var(--cyan); }
.point-list { display: grid; gap: 9px; margin: 20px 0; }.point-list article { padding: 13px; display: flex; gap: 12px; align-items: center; border-radius: 14px; background: rgba(0,0,0,.18); }.point-list article div { display: grid; flex: 1; }.point-list article small { color: var(--muted); }.point-list article button { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,107,87,.1); color: var(--coral); }.add-point { width: 100%; padding: 11px; border: 1px dashed rgba(184,255,60,.35); border-radius: 12px; background: transparent; color: var(--lime); }
.insight-card { background: linear-gradient(145deg,rgba(139,92,246,.18),rgba(0,212,255,.06)); }.insight-card h2 { font-size: 2.25rem; margin: 8px 0 18px; }.insight-card ul { padding-left: 20px; color: var(--muted); line-height: 1.9; }.saving { margin-top: 20px; padding: 16px; display: grid; border-radius: 15px; background: rgba(184,255,60,.08); }.saving span { color: var(--muted); font-size: .8rem; }
.fictional-map { min-height: 410px; }.zone { position: absolute; color: rgba(255,255,255,.35); font-size: .72rem; }.z1 { left: 14%; top: 20%; }.z2 { right: 16%; bottom: 23%; }.location-pin { width: 58px; aspect-ratio: 1; display: grid; place-items: center; position: absolute; left: 48%; top: 44%; border-radius: 50% 50% 50% 8px; background: var(--coral); font-size: 1.4rem; transform: rotate(-45deg); box-shadow: 0 15px 35px rgba(255,107,87,.35); }.map-caption { padding: 12px 14px; display: grid; position: absolute; left: 18px; right: 18px; bottom: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(9,10,24,.86); }.map-caption span { color: var(--muted); font-size: .7rem; }
.date-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 24px; }.date-row button,.slot-list button { border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.03); }.date-row button { padding: 12px; display: grid; place-items: center; }.date-row button.active,.slot-list button.active { border-color: var(--cyan); background: rgba(0,212,255,.08); }.date-row small,.date-row span,.slot-list small { color: var(--muted); }.date-row strong { font-size: 1.45rem; }.slot-list { display: grid; gap: 9px; }.slot-list button { padding: 14px; display: flex; align-items: center; gap: 12px; text-align: left; }.slot-list button div { display: grid; }
.error-banner { padding: 12px; border: 1px solid rgba(255,107,87,.4); border-radius: 12px; color: #ffaea2; background: rgba(255,107,87,.08); }
.quote-main h1 { margin: 10px 0 28px; font-size: clamp(2.5rem,5vw,5rem); line-height: 1; }.quote-amount { width: max-content; max-width: 100%; padding: 20px 24px; display: grid; border: 1px solid rgba(184,255,60,.25); border-radius: 20px; background: rgba(184,255,60,.07); }.quote-amount small,.quote-amount span,.breakdown span,.fine-print { color: var(--muted); }.quote-amount strong { font-size: clamp(2.2rem,5vw,4rem); }.breakdown { margin: 20px 0; border-top: 1px solid var(--line); }.breakdown div { padding: 12px 0; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }.fine-print { font-size: .82rem; line-height: 1.7; }
.quote-visual { min-height: 520px; position: relative; display: grid; place-items: center; }.ring { width: 300px; aspect-ratio: 1; display: grid; place-items: center; align-content: center; border: 2px solid rgba(0,212,255,.5); border-radius: 50%; background: radial-gradient(circle,rgba(0,212,255,.14),transparent 65%); box-shadow: 0 0 0 35px rgba(0,212,255,.035),0 0 0 70px rgba(139,92,246,.025); }.ring strong { font-size: 7rem; line-height: .9; }.ring small,.ring span { color: var(--muted); }.metric-float { min-width: 150px; padding: 13px; display: grid; position: absolute; border: 1px solid var(--line); border-radius: 14px; background: rgba(17,26,49,.9); }.metric-float small { color: var(--muted); }.m1 { left: 2%; top: 12%; }.m2 { right: 2%; top: 25%; }.m3 { left: 10%; bottom: 10%; }
.match-list { display: grid; gap: 10px; }.match-card { padding: 16px; display: flex; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.025); }.match-card.recommended { border-color: rgba(184,255,60,.35); background: rgba(184,255,60,.04); }.rank { color: var(--muted); font-weight: 900; }.match-info { flex: 1; }.match-info>div:first-child { display: flex; gap: 8px; align-items: center; }.match-info h2 { margin: 0; font-size: 1.05rem; }.match-info p { margin: 5px 0; color: var(--muted); font-size: .82rem; }.reason-row { display: flex; flex-wrap: wrap; gap: 6px; }.reason-row span { color: var(--cyan); font-size: .68rem; }.arrival { min-width: 100px; display: grid; justify-items: end; }.arrival small { color: var(--muted); }.arrival button { margin-top: 8px; padding: 7px 10px; border-radius: 9px; background: var(--purple); font-size: .75rem; }.match-summary h3 { font-size: 1.5rem; }.match-summary dl div { padding: 11px 0; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }.match-summary dt,.match-summary p { color: var(--muted); }.match-summary p { line-height: 1.7; font-size: .82rem; }
.tracking-main,.timeline-card { padding: 28px; }.route-map { min-height: 340px; margin: 24px 0; }.route-line { width: 58%; height: 45%; left: 20%; top: 28%; border-color: var(--cyan) var(--cyan) transparent transparent; }.route-home,.route-tech { width: 48px; height: 48px; }.route-home { left: 15%; bottom: 20%; background: var(--coral); }.route-tech { right: 18%; top: 16%; background: var(--lime); color: #111; }.eta-card { padding: 12px 16px; display: grid; position: absolute; left: 50%; top: 48%; border-radius: 14px; background: rgba(9,10,24,.9); transform: translate(-50%,-50%); }.eta-card small,.eta-card span { color: var(--muted); font-size: .72rem; }.eta-card strong { color: var(--lime); font-size: 1.5rem; }.tech-profile h2,.tech-profile p { margin: 0; }.tech-profile button { padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.06); }
.timeline { margin: 20px 0; }.timeline-item { min-height: 58px; display: flex; gap: 12px; position: relative; }.timeline-item:not(:last-child)::after { content:""; width: 2px; position: absolute; left: 13px; top: 28px; bottom: 0; background: var(--line); }.timeline-item i { width: 28px; height: 28px; display: grid; place-items: center; z-index: 1; border: 2px solid var(--line); border-radius: 50%; background: var(--panel); color: #111; font-style: normal; }.timeline-item.done i { border-color: var(--lime); background: var(--lime); }.timeline-item span { display: grid; }.timeline-item small { color: var(--muted); }.line-preview { margin-top: 15px; padding: 13px; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; border-radius: 14px; background: rgba(6,199,85,.08); }.line-badge { grid-row: 1/3; align-self: center; padding: 6px; border-radius: 8px; background: #06c755; font-size: .65rem; font-weight: 900; }.line-preview p { margin: 0; font-size: .78rem; }.line-preview small { color: var(--muted); font-size: .66rem; }

@media (max-width:900px) { .hero-grid,.estimate-layout,.multi-layout,.schedule-grid,.match-layout,.tracking-layout { grid-template-columns: 1fr; }.phone-preview { transform: none; }.choice-grid.six { grid-template-columns: repeat(3,1fr); }.match-summary { order: -1; }.quote-visual { min-height: 430px; } }
@media (max-width:560px) { main { width: min(100% - 22px,1180px); padding-block: 24px; }.hero-copy h1 { font-size: 3.25rem; }.hero-actions,.panel-footer,.scene-heading,.tracking-title { flex-direction: column; align-items: stretch; }.choice-grid.three,.choice-grid.six { grid-template-columns: repeat(2,1fr); }.detail-grid { grid-template-columns: 1fr; }.segmented { width: 100%; overflow-x: auto; }.segmented button { flex: 1 0 max-content; }.match-card { align-items: flex-start; flex-wrap: wrap; }.arrival { width: 100%; grid-template-columns: 1fr 1fr auto; align-items: center; justify-items: start; }.arrival button { margin: 0; }.tracking-main,.timeline-card,.app-panel { padding: 20px; }.fictional-map { min-height: 320px; } }

.technician-shell { display:grid;grid-template-columns:250px 1fr;min-height:650px;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:rgba(12,19,38,.9);box-shadow:0 30px 90px rgba(0,0,0,.28) }
.technician-side { padding:24px;display:flex;flex-direction:column;border-right:1px solid var(--line);background:rgba(255,255,255,.025) }.profile-block{display:flex;gap:11px;align-items:center}.profile-block div{display:grid}.profile-block small{color:var(--muted);font-size:.68rem}.availability{margin:22px 0;padding:10px;border-radius:12px;background:rgba(255,255,255,.05)}.availability i{width:8px;height:8px;margin-right:8px;display:inline-block;border-radius:50%}.availability.online i{background:var(--lime)}.availability.offline i{background:var(--coral)}.technician-side nav{display:grid;gap:6px}.technician-side nav a{padding:11px;border-radius:10px;color:var(--muted)}.technician-side nav a.active{color:white;background:rgba(139,92,246,.15)}.technician-side nav b{float:right}.day-summary{margin-top:auto;padding:15px;display:grid;border-radius:14px;background:rgba(0,212,255,.07)}.day-summary small,.day-summary span{color:var(--muted)}
.technician-content{padding:clamp(24px,4vw,44px)}.tech-head,.job-banner,.accept-actions,.status-action-card,.completion-strip{display:flex;justify-content:space-between;gap:16px;align-items:center}.tech-head h1{margin:6px 0;font-size:clamp(1.8rem,3vw,3rem)}.countdown{padding:10px;border-radius:12px;background:rgba(255,107,87,.08);color:var(--muted)}.countdown b{color:var(--coral)}.incoming-job{margin-top:24px;padding:24px;border:1px solid rgba(184,255,60,.25);border-radius:22px;background:rgba(184,255,60,.035)}.urgent-dot{width:10px;height:10px;border-radius:50%;background:var(--coral)}.job-banner>div{flex:1}.job-banner small{color:var(--muted)}.job-banner h2{margin:4px 0}.price-chip{padding:8px 12px;border-radius:10px;background:rgba(184,255,60,.1);color:var(--lime);font-weight:800}.incoming-grid{margin:22px 0;display:grid;grid-template-columns:1fr 1fr;gap:18px}.job-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}.job-facts>div{padding:12px;display:flex;gap:9px;border-radius:12px;background:rgba(255,255,255,.035)}.job-facts p{margin:0;display:grid}.job-facts small{color:var(--muted)}.job-map,.field-map{min-height:240px;position:relative;overflow:hidden;border-radius:16px;background:#121f3b}.short-route{width:50%;height:35%;position:absolute;left:24%;top:28%;border:3px dashed var(--cyan);border-color:var(--cyan) var(--cyan) transparent transparent;border-radius:50%;transform:rotate(-14deg)}.job-map>b{padding:7px 10px;position:absolute;right:10px;bottom:10px;border-radius:10px;background:rgba(9,10,24,.85);color:var(--lime);font-size:.75rem}.customer-note{padding:14px;border-left:3px solid var(--cyan);background:rgba(0,212,255,.05);color:var(--muted)}.reject-btn{padding:12px 18px;border-radius:12px;background:rgba(255,107,87,.08);color:#ffaea2}.auto-note{text-align:center;color:var(--muted);font-size:.75rem}.empty-dispatch{text-align:center}.empty-icon{font-size:5rem;color:var(--cyan)}
.progress-layout{display:grid;grid-template-columns:1fr 300px;gap:20px}.field-map{min-height:380px}.status-action-card{margin-top:14px;padding:16px;border-radius:16px;background:rgba(0,212,255,.06)}.status-action-card>div{flex:1}.status-action-card h2,.status-action-card p{margin:2px 0}.status-action-card p{color:var(--muted);font-size:.8rem}.pulse-icon{color:var(--cyan)}.field-timeline{padding:20px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025)}.field-step{min-height:64px;display:flex;gap:11px;position:relative}.field-step:not(:last-of-type)::after{content:"";position:absolute;left:12px;top:26px;bottom:0;width:2px;background:var(--line)}.field-step i{width:26px;height:26px;display:grid;place-items:center;z-index:1;border:2px solid var(--line);border-radius:50%;background:var(--panel);font-style:normal}.field-step.done i{border-color:var(--lime);color:#111;background:var(--lime)}.field-step span{display:grid}.field-step small{color:var(--muted)}.ghost-btn.full{width:100%}
.evidence-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}.evidence-card{padding:15px;display:grid;gap:14px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.025);text-align:left}.evidence-card.captured{border-color:rgba(184,255,60,.4)}.evidence-visual{height:270px;position:relative;overflow:hidden;border-radius:15px;background:radial-gradient(circle at 65% 60%,#7193a9 0 6%,transparent 7%),linear-gradient(120deg,#32495d,#152336 55%,#805f4d)}.evidence-visual.after{background:radial-gradient(circle at 65% 60%,#cbe7f5 0 6%,transparent 7%),linear-gradient(120deg,#52758d,#213a51 55%,#b78a6f)}.evidence-visual i{padding:7px 10px;position:absolute;left:10px;top:10px;border-radius:9px;background:rgba(9,10,24,.8);font-style:normal}.evidence-card div{display:grid}.evidence-card small{color:var(--muted)}.evidence-arrow{font-size:2rem;color:var(--cyan)}.completion-strip{margin-top:22px;padding:17px;border-radius:17px;background:rgba(255,255,255,.035)}.completion-strip>div{display:grid}.completion-strip small{color:var(--muted)}
.operations-shell{min-height:650px}.ops-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-end}.ops-head h1{margin:6px 0;font-size:clamp(2.4rem,5vw,4.6rem)}.ops-head p:not(.eyebrow),.ops-date small{color:var(--muted)}.ops-date{display:grid;text-align:right}.metric-grid{margin:28px 0 18px;display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.metric-grid article{padding:17px;display:flex;gap:13px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.03)}.metric-grid article.danger{border-color:rgba(255,107,87,.25)}.metric-grid article div{display:grid}.metric-grid small{color:var(--muted)}.metric-grid strong{font-size:2rem}.metric-grid b{color:var(--cyan);font-size:.68rem}.metric-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;font-size:1.2rem}.metric-icon.cyan{background:rgba(0,212,255,.1);color:var(--cyan)}.metric-icon.lime{background:rgba(184,255,60,.1);color:var(--lime)}.metric-icon.purple{background:rgba(139,92,246,.15);color:#b99aff}.metric-icon.coral{background:rgba(255,107,87,.1);color:var(--coral)}
.ops-body{display:grid;grid-template-columns:1fr 360px;gap:16px}.jobs-panel,.dispatch-map{border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.025)}.jobs-panel{padding:18px}.panel-title{display:flex;justify-content:space-between;align-items:center}.panel-title h2{margin:0}.panel-title span{color:var(--muted)}.filter-row{margin:16px 0;display:flex;gap:6px;overflow-x:auto}.filter-row button{padding:7px 11px;flex:0 0 auto;border-radius:999px;background:rgba(255,255,255,.04);color:var(--muted)}.filter-row button.active{background:var(--purple);color:white}.job-table{display:grid;gap:7px}.job-row{padding:11px;display:grid;grid-template-columns:auto 1fr auto 150px 105px auto;gap:10px;align-items:center;border-radius:13px;background:rgba(0,0,0,.16)}.job-type{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.05)}.job-main{display:grid}.job-main small,.job-main span,.assignee small,.sla small{color:var(--muted);font-size:.65rem}.urgency{padding:5px 7px;border-radius:999px;font-size:.65rem}.urgency.emergency{color:var(--coral);background:rgba(255,107,87,.1)}.urgency.same-day{color:#ffd166;background:rgba(255,209,102,.1)}.urgency.normal{color:var(--cyan);background:rgba(0,212,255,.1)}.assignee,.sla{display:grid}.sla.late strong{color:var(--coral)}.assign-btn{padding:7px;border-radius:8px;background:var(--purple);font-size:.7rem}.dispatch-map{min-height:430px;position:relative;overflow:hidden;background:#121f3b}.map-label{position:absolute;color:rgba(255,255,255,.35);font-size:.68rem}.map-label.l1{left:12%;top:20%}.map-label.l2{right:15%;bottom:23%}.ops-pin,.tech-dot{position:absolute;display:grid;place-items:center;box-shadow:0 8px 18px rgba(0,0,0,.25)}.ops-pin{width:38px;height:38px;border-radius:50% 50% 50% 8px;background:var(--coral)}.p1{left:20%;top:35%}.p2{right:24%;top:20%}.p3{left:55%;bottom:22%}.tech-dot{width:32px;height:32px;border-radius:50%;background:var(--lime);color:#111;font-size:.65rem;font-weight:900}.d1{left:37%;top:25%}.d2{right:12%;top:45%}.d3{left:26%;bottom:17%}.d4{right:34%;bottom:35%}.map-legend{padding:9px;display:flex;gap:12px;position:absolute;left:12px;bottom:12px;border-radius:10px;background:rgba(9,10,24,.85);font-size:.65rem}.map-legend i{width:8px;height:8px;margin-right:4px;display:inline-block;border-radius:50%}.job-key{background:var(--coral)}.tech-key{background:var(--lime)}
.sla-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.sla-focus,.sla-queue{padding:24px;border:1px solid rgba(255,107,87,.25);border-radius:20px;background:rgba(255,107,87,.04)}.sla-focus{display:flex;gap:22px;align-items:center}.alarm-ring{width:150px;aspect-ratio:1;display:grid;place-items:center;align-content:center;flex:0 0 auto;border:8px solid rgba(255,107,87,.2);border-top-color:var(--coral);border-radius:50%}.alarm-ring strong{color:var(--coral);font-size:3.4rem;line-height:1}.alarm-ring small{color:var(--muted)}.sla-focus h2{font-size:2rem}.sla-focus p{color:var(--muted)}.sla-actions{display:flex;gap:8px}.sla-queue{display:grid;gap:9px;border-color:var(--line);background:rgba(255,255,255,.025)}.sla-queue article{padding:13px;display:flex;gap:12px;align-items:center;border-radius:12px;background:rgba(0,0,0,.15)}.sla-queue article>span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:rgba(184,255,60,.1);color:var(--lime)}.sla-queue article.warning>span{background:rgba(255,107,87,.1);color:var(--coral)}.sla-queue article div{display:grid;flex:1}.sla-queue small{color:var(--muted)}.sla-queue b{color:var(--lime);font-size:.7rem}.sla-queue .warning b{color:var(--coral)}.line-preview.wide{margin-top:18px;grid-template-columns:auto 1fr auto;align-items:center}
.workflow-scene{min-height:650px;display:grid;align-content:center}.workflow-title{text-align:center}.workflow-title h1{margin:8px 0;font-size:clamp(2.6rem,5vw,5.2rem);line-height:1}.workflow-title p{color:var(--muted)}.workflow-lanes{margin:40px 0;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:center}.workflow-lanes article{min-height:240px;padding:24px;position:relative;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,rgba(139,92,246,.11),rgba(0,212,255,.04));text-align:center}.workflow-lanes article>i{width:62px;height:62px;margin:auto;display:grid;place-items:center;border-radius:20px;background:linear-gradient(135deg,var(--purple),var(--cyan));font-size:1.7rem;font-style:normal}.workflow-lanes p{color:var(--muted);line-height:1.7}.workflow-lanes b{color:var(--lime);font-size:.72rem}.lane-number{position:absolute;left:15px;top:12px;color:rgba(255,255,255,.22);font-size:1.5rem;font-weight:900}.flow-arrow{color:var(--cyan);font-size:2rem}.delivery-banner{padding:18px 22px;display:grid;grid-template-columns:repeat(4,1fr) auto;gap:20px;align-items:center;border:1px solid rgba(184,255,60,.25);border-radius:18px;background:rgba(184,255,60,.06)}.delivery-banner div{display:grid}.delivery-banner small{color:var(--muted)}.delivery-banner strong{color:var(--lime);font-size:1.3rem}.delivery-banner>span{color:var(--muted);font-size:.72rem}
@media(max-width:1000px){.technician-shell,.progress-layout,.ops-body,.sla-layout{grid-template-columns:1fr}.technician-side{border-right:0;border-bottom:1px solid var(--line)}.technician-side nav{grid-template-columns:repeat(2,1fr)}.day-summary{margin-top:18px}.metric-grid{grid-template-columns:repeat(2,1fr)}.job-row{grid-template-columns:auto 1fr auto}.assignee,.sla{display:none}.dispatch-map{min-height:350px}.workflow-lanes{grid-template-columns:1fr}.flow-arrow{transform:rotate(90deg);text-align:center}.delivery-banner{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.incoming-grid,.evidence-grid{grid-template-columns:1fr}.evidence-arrow{transform:rotate(90deg);text-align:center}.job-facts{grid-template-columns:1fr}.tech-head,.job-banner,.accept-actions,.status-action-card,.completion-strip,.ops-head,.sla-focus{align-items:stretch;flex-direction:column}.metric-grid{grid-template-columns:1fr 1fr}.job-row{grid-template-columns:auto 1fr}.urgency,.assign-btn{grid-column:2}.workflow-lanes{margin-block:24px}.delivery-banner{grid-template-columns:1fr}.line-preview.wide{grid-template-columns:auto 1fr}.line-preview.wide>small{grid-column:2}}