
body{margin:0;background:#F5F5F7;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",sans-serif;color:#1D1D1F;-webkit-font-smoothing:antialiased}

.customer-dashboard button,input{font-family:inherit}
.customer-dashboard button{cursor:pointer}
.customer-dashboard input:focus{outline:none;border-color:#1F5BFF !important;box-shadow:0 0 0 4px rgba(31,91,255,0.18)}
.customer-dashboard .glass{isolation:isolate;background:rgba(255,255,255,0.6);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border:1px solid rgba(255,255,255,0.85);box-shadow:inset 0 1px 0 rgba(255,255,255,0.95),0 1px 2px rgba(16,24,64,0.04),0 14px 40px rgba(16,24,64,0.07)}
.customer-dashboard .glass-strong{isolation:isolate;background:rgba(255,255,255,0.85);-webkit-backdrop-filter:blur(40px) saturate(200%);backdrop-filter:blur(40px) saturate(200%);border:1px solid rgba(255,255,255,0.95);box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(16,24,64,0.05),0 24px 60px rgba(16,24,64,0.09)}
.sf-num{font-variant-numeric:tabular-nums}
.sf-mono{font-family:"SF Mono",Menlo,Consolas,monospace}
.sf-nav{transition:background .15s ease,color .15s ease}
.sf-nav:hover{background:rgba(29,29,31,0.05)}
.sf-row:hover{background:rgba(31,91,255,0.04)}
@keyframes sfStripe{from{background-position:0 0}to{background-position:28px 0}}
@keyframes sfPing{0%{box-shadow:0 0 0 0 rgba(30,158,74,0.5)}80%,100%{box-shadow:0 0 0 7px rgba(30,158,74,0)}}
@keyframes sfIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
.sf-stripe{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,0.28) 0 7px,rgba(255,255,255,0) 7px 14px);animation:sfStripe 1.2s linear infinite}
.sf-ping{animation:sfPing 1.8s ease-out infinite}
.sf-in{animation:sfIn .35s ease-out both}

.dash-0{position: absolute; top: -300px; left: 300px; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(closest-side, #1F5BFF, rgba(255,255,255,0)); opacity: 0.12; filter: blur(30px)}
.dash-1{position: absolute; bottom: -380px; right: -200px; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(closest-side, #FF6B57, rgba(255,255,255,0)); opacity: 0.14; filter: blur(30px)}
.dash-2{position: absolute; left: 0; top: 0; bottom: 0; width: 248px; box-sizing: border-box; padding: 24px 16px; border-radius: 0; border-width: 0 1px 0 0; display: flex; flex-direction: column; gap: 6px}
.dash-3{display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; color: #1D1D1F}
.dash-4{font-size: 19px; font-weight: 700; letter-spacing: -0.02em}
.dash-5{height: 20px; padding: 0 7px; border-radius: 10px; background: #E8452F; color: #FFFFFF; font-size: 10px; font-weight: 800; letter-spacing: 0.05em; display: flex; align-items: center}
.dash-6{display: flex; flex-direction: column; gap: 4px}
.dash-7{height: 42px; box-sizing: border-box; padding: 0 12px; border: none; border-radius: 12px; font-size: 14px; display: flex; align-items: center; gap: 11px; text-align: left}
.dash-7[data-theme="off"]{ background:transparent}
.dash-7[data-theme="on"]{ background:rgba(31,91,255,0.10)}
.dash-7[data-theme="off"]{ color:#3A3A3C}
.dash-7[data-theme="on"]{ color:#1742D6}
.dash-7[data-theme="off"]{ font-weight:500}
.dash-7[data-theme="on"]{ font-weight:700}
.dash-8{flex-grow: 1}
.dash-9{height: 20px; min-width: 20px; box-sizing: border-box; padding: 0 6px; border-radius: 10px; background: rgba(29,29,31,0.07); color: #515154; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center}
.dash-10{margin-top: auto; box-sizing: border-box; padding: 14px; border-radius: 16px; background: rgba(255,255,255,0.75); border: 1px solid rgba(0,0,0,0.05); display: flex; flex-direction: column; gap: 10px}
.dash-11{display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #515154}
.dash-12{width: 8px; height: 8px; border-radius: 4px; background: #1E9E4A}
.dash-13{height: 36px; border-radius: 18px; background: #1F5BFF; color: #FFFFFF; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 7px; box-shadow: 0 6px 16px rgba(31,91,255,0.3)}
.dash-14{margin-top: 10px; padding: 8px; display: flex; align-items: center; gap: 10px}
.dash-15{width: 36px; height: 36px; flex-shrink: 0; border-radius: 18px; background: linear-gradient(135deg, #1F5BFF, #7A5CFF); color: #FFFFFF; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center}
.dash-16{flex-grow: 1; min-width: 0; display: flex; flex-direction: column}
.dash-17{font-size: 14px; font-weight: 700}
.dash-18{font-size: 12px; color: #6E6E73; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.dash-19{width: 32px; height: 32px; border-radius: 16px; color: #6E6E73; display: flex; align-items: center; justify-content: center}
.dash-20{position: absolute; left: 248px; top: 0; right: 0; bottom: 0; box-sizing: border-box; padding: 40px 48px}
.dash-21{display: flex; flex-direction: column; gap: 24px}
.dash-22{display: flex; align-items: flex-end; justify-content: space-between}
.dash-23{display: flex; flex-direction: column; gap: 6px}
.dash-24{margin: 0; font-size: 38px; line-height: 1.05; font-weight: 700; letter-spacing: -0.045em}
.dash-25{margin: 0; font-size: 16px; color: #515154}
.dash-26{height: 36px; padding: 0 6px 0 6px; border-radius: 18px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #1D1D1F}
.dash-27{height: 24px; padding: 0 9px; border-radius: 12px; background: #1F5BFF; color: #FFFFFF; font-size: 11px; font-weight: 800; display: flex; align-items: center}
.dash-28{margin-right: 6px}
.dash-29{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px}
.dash-30{position: relative; height: 246px; box-sizing: border-box; border-radius: 24px; padding: 24px; background: linear-gradient(160deg, #1B1E28 0%, #0E1016 70%); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(16,24,64,0.22)}
.dash-31{position: absolute; top: -140px; right: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, rgba(31,91,255,0.5), rgba(31,91,255,0))}
.dash-32{position: relative; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: #FF9A85}
.dash-33{position: relative; margin-top: 8px; display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: #FFFFFF}
.dash-34{height: 22px; padding: 0 8px; border-radius: 11px; background: rgba(255,255,255,0.12); color: #FFFFFF; font-size: 11px; font-weight: 700; display: flex; align-items: center}
.dash-35{position: relative; margin-top: 14px; display: flex; align-items: baseline; gap: 6px; color: #FFFFFF}
.dash-36{font-size: 36px; font-weight: 700; letter-spacing: -0.04em}
.dash-37{font-size: 14px; color: #A1A1A6}
.dash-38{position: relative; margin-top: 4px; font-size: 13px; color: #A1A1A6}
.dash-39{position: relative; margin-top: auto; align-self: flex-start; height: 40px; padding: 0 18px; border: none; border-radius: 20px; background: #FFFFFF; color: #1D1D1F; font-size: 14px; font-weight: 700}
.dash-40{height: 246px; box-sizing: border-box; border-radius: 24px; padding: 24px; display: flex; flex-direction: column}
.dash-41{font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: #1742D6}
.dash-42{margin-top: 12px; display: flex; align-items: baseline; gap: 8px}
.dash-43{font-size: 36px; font-weight: 700; letter-spacing: -0.04em}
.dash-44{font-size: 14px; color: #515154}
.dash-45{margin-top: 14px; height: 10px; border-radius: 5px; background: rgba(29,29,31,0.07); overflow: hidden}
.dash-46{width: 100%; height: 10px; border-radius: 5px; background-color: #3A4BFF}
.dash-47{margin-top: 8px; font-size: 12px; color: #6E6E73}
.dash-48{margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px}
.dash-49{display: flex; flex-direction: column}
.dash-50{font-size: 18px; font-weight: 700}
.dash-51{font-size: 12px; color: #6E6E73}
.dash-52{display: flex; flex-direction: column}
.dash-53{font-size: 18px; font-weight: 700}
.dash-54{font-size: 12px; color: #6E6E73}
.dash-55{display: flex; flex-direction: column}
.dash-56{font-size: 18px; font-weight: 700}
.dash-57{font-size: 12px; color: #6E6E73}
.dash-58{height: 246px; box-sizing: border-box; border-radius: 24px; padding: 24px; display: flex; flex-direction: column}
.dash-59{font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: #6E6E73}
.dash-60{margin-top: 14px; display: flex; align-items: center; gap: 14px}
.dash-61{flex-shrink: 0; filter: drop-shadow(0 6px 10px rgba(21,23,30,0.2))}
.dash-62{display: flex; flex-direction: column; gap: 3px}
.dash-63{font-size: 17px; font-weight: 700}
.dash-64{display: flex; align-items: center; gap: 6px; font-size: 13px; color: #515154}
.dash-65{width: 7px; height: 7px; border-radius: 4px; background: #1E9E4A}
.dash-66{margin-top: 12px; font-size: 12px; color: #6E6E73}
.dash-67{margin-top: auto; display: flex; align-items: center; gap: 14px}
.dash-68{height: 40px; padding: 0 16px 0 12px; border-radius: 20px; background: #1F5BFF; color: #FFFFFF; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 7px; box-shadow: 0 8px 20px rgba(31,91,255,0.3)}
.dash-69{font-size: 14px; font-weight: 600}
.dash-70{display: grid; grid-template-columns: 2fr 1fr; gap: 20px}
.dash-71{box-sizing: border-box; border-radius: 24px; padding: 22px 8px 12px; display: flex; flex-direction: column}
.dash-72{padding: 0 16px 12px; display: flex; align-items: center; justify-content: space-between}
.dash-73{font-size: 17px; font-weight: 700; letter-spacing: -0.01em}
.dash-74{border: none; background: transparent; color: #1D4ED8; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 4px}
.dash-75{display: grid; grid-template-columns: 1.3fr 1.2fr 70px 100px 44px; padding: 0 16px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6E6E73}
.dash-76{display: grid; grid-template-columns: 1.3fr 1.2fr 70px 100px 44px; align-items: center; height: 52px; padding: 0 16px; border-radius: 12px; border-top: 1px solid rgba(0,0,0,0.05); font-size: 14px}
.dash-77{display: flex; align-items: center; gap: 10px; font-weight: 600}
.dash-78{width: 30px; height: 30px; border-radius: 9px; background: rgba(31,91,255,0.1); color: #1F5BFF; display: flex; align-items: center; justify-content: center}
.dash-79{font-size: 12.5px; color: #515154}
.dash-80{font-weight: 600}
.dash-81{color: #515154}
.dash-82{width: 32px; height: 32px; border: none; border-radius: 16px; background: rgba(29,29,31,0.05); color: #515154; display: flex; align-items: center; justify-content: center}
.dash-83{box-sizing: border-box; border-radius: 24px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px}
.dash-84{display: flex; align-items: center; justify-content: space-between}
.dash-85{font-size: 17px; font-weight: 700; letter-spacing: -0.01em}
.dash-86{font-size: 13px; font-weight: 600; color: #515154}
.dash-87{display: flex; align-items: center; gap: 12px}
.dash-88{width: 40px; height: 40px; border-radius: 12px; background: rgba(29,29,31,0.05); color: #3A3A3C; display: flex; align-items: center; justify-content: center}
.dash-89{flex-grow: 1; display: flex; flex-direction: column; gap: 2px}
.dash-90{display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700}
.dash-91{height: 18px; padding: 0 6px; border-radius: 6px; background: rgba(31,91,255,0.1); color: #1742D6; font-size: 10px; font-weight: 800; display: flex; align-items: center}
.dash-92{font-size: 12px; color: #6E6E73}
.dash-93{margin-top: auto; align-self: flex-start; border: none; background: transparent; padding: 0; color: #1D4ED8; font-size: 14px; font-weight: 600}
.dash-94{display: flex; flex-direction: column; gap: 24px}
.dash-95{display: flex; flex-direction: column; gap: 6px}
.dash-96{margin: 0; font-size: 38px; line-height: 1.05; font-weight: 700; letter-spacing: -0.045em}
.dash-97{margin: 0; font-size: 16px; color: #515154}
.dash-98{display: grid; grid-template-columns: 1.75fr 1fr; gap: 20px}
.dash-99{display: flex; flex-direction: column; gap: 20px}
.dash-100{position: relative; box-sizing: border-box; border-radius: 24px; padding: 26px 28px; background: linear-gradient(160deg, #1B1E28 0%, #0E1016 70%); overflow: hidden; display: flex; align-items: center; gap: 24px; box-shadow: 0 24px 60px rgba(16,24,64,0.22)}
.dash-101{position: absolute; top: -160px; right: -100px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(closest-side, rgba(31,91,255,0.5), rgba(31,91,255,0))}
.dash-102{position: relative; flex-grow: 1; display: flex; flex-direction: column; gap: 6px}
.dash-103{font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: #FF9A85}
.dash-104{font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: #FFFFFF}
.dash-105{font-size: 14px; color: #C7C7CC}
.dash-106{color: #FFFFFF}
.dash-107{position: relative; height: 30px; padding: 0 12px; border-radius: 15px; background: rgba(52,199,89,0.16); border: 1px solid rgba(52,199,89,0.3); color: #BFF3CC; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px}
.dash-108{width: 7px; height: 7px; border-radius: 4px; background: #34C759}
.dash-109{box-sizing: border-box; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 16px}
.dash-110{font-size: 17px; font-weight: 700; letter-spacing: -0.01em}
.dash-111{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px}
.dash-112{position: relative; height: 104px; box-sizing: border-box; padding: 16px; border-radius: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; color: #1D1D1F}
.dash-112[data-theme="off"]{ border:rgba(29,29,31,0.10)}
.dash-112[data-theme="on"]{ border:#1F5BFF}
.dash-112[data-theme="off"]{ background:rgba(255,255,255,0.55)}
.dash-112[data-theme="on"]{ background:rgba(255,255,255,0.98)}
.dash-112[data-theme="off"]{ box-shadow:none}
.dash-112[data-theme="on"]{ box-shadow:0 0 0 4px rgba(31,91,255,0.12)}
.dash-113{font-size: 15px; font-weight: 700}
.dash-114{display: flex; align-items: baseline; gap: 4px}
.dash-115{font-size: 22px; font-weight: 700; letter-spacing: -0.03em}
.dash-116{font-size: 12px; color: #515154}
.dash-117{font-size: 12px; color: #6E6E73}
.dash-118{position: absolute; top: 12px; right: 12px; height: 20px; padding: 0 7px; border-radius: 6px; background: #1D1D1F; color: #FFFFFF; font-size: 10px; font-weight: 800; letter-spacing: 0.05em; display: flex; align-items: center}
.dash-119{box-sizing: border-box; padding: 14px 16px; border-radius: 16px; background: rgba(31,91,255,0.07); display: flex; align-items: center; gap: 14px}
.dash-120{flex-grow: 1; font-size: 14px; line-height: 1.4; color: #3A3A3C}
.dash-121{height: 40px; flex-shrink: 0; padding: 0 18px; border-radius: 20px; background: #1F5BFF; color: #FFFFFF; font-size: 14px; font-weight: 700; display: flex; align-items: center}
.dash-122{display: flex; flex-direction: column; gap: 20px}
.dash-123{box-sizing: border-box; border-radius: 24px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px}
.dash-124{font-size: 17px; font-weight: 700; letter-spacing: -0.01em}
.dash-125{display: flex; align-items: center; gap: 14px}
.dash-126{position: relative; width: 64px; height: 42px; border-radius: 8px; background: linear-gradient(135deg, #1B1E28, #3A3F52); box-shadow: 0 4px 10px rgba(16,24,64,0.2)}
.dash-127{position: absolute; left: 8px; top: 10px; width: 12px; height: 9px; border-radius: 2px; background: #D9C27A}
.dash-128{position: absolute; left: 8px; bottom: 6px; font-size: 7px; color: #FFFFFF; letter-spacing: 0.1em}
.dash-129{flex-grow: 1; display: flex; flex-direction: column}
.dash-130{font-size: 15px; font-weight: 700}
.dash-131{font-size: 13px; color: #6E6E73}
.dash-132{font-size: 14px; font-weight: 600}
.dash-133{box-sizing: border-box; border-radius: 24px; padding: 22px 24px; display: flex; flex-direction: column; gap: 6px}
.dash-134{font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px}
.dash-135{display: flex; flex-direction: column; gap: 24px}
.dash-136{display: flex; align-items: flex-end; justify-content: space-between}
.dash-137{display: flex; flex-direction: column; gap: 6px}
.dash-138{margin: 0; font-size: 38px; line-height: 1.05; font-weight: 700; letter-spacing: -0.045em}
.dash-139{margin: 0; font-size: 16px; color: #515154}
.dash-140{height: 42px; box-sizing: border-box; padding: 4px; border-radius: 21px; background: rgba(29,29,31,0.06); display: flex; gap: 4px}
.dash-141{height: 34px; padding: 0 14px; border: none; border-radius: 17px; color: #1D1D1F; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px}
.dash-141[data-theme="off"]{ background:transparent}
.dash-141[data-theme="on"]{ background:#FFFFFF}
.dash-141[data-theme="off"]{ box-shadow:none}
.dash-141[data-theme="on"]{ box-shadow:0 1px 3px rgba(16,24,64,0.12)}
.dash-142{font-weight: 600; color: #6E6E73}
.dash-143{box-sizing: border-box; border-radius: 24px; padding: 10px 8px}
.dash-144{display: grid; grid-template-columns: 1.4fr 1.3fr 90px 110px 120px 190px; padding: 12px 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6E6E73}
.dash-145{display: grid; grid-template-columns: 1.4fr 1.3fr 90px 110px 120px 190px; align-items: center; height: 60px; padding: 0 16px; border-radius: 12px; border-top: 1px solid rgba(0,0,0,0.05); font-size: 14px}
.dash-145[data-theme="off"]{ opacity:0.6}
.dash-145[data-theme="on"]{ opacity:1}
.dash-146{display: flex; align-items: center; gap: 10px; font-weight: 600}
.dash-147{width: 32px; height: 32px; border-radius: 9px; background: rgba(31,91,255,0.1); color: #1F5BFF; display: flex; align-items: center; justify-content: center}
.dash-148{font-size: 12.5px; color: #515154}
.dash-149{font-weight: 600}
.dash-150{color: #515154}
.dash-151{display: flex; align-items: center; gap: 6px}
.dash-151[data-theme="off"]{ color:#6E6E73}
.dash-151[data-theme="on"]{ color:#1D1D1F}
.dash-151[data-theme="off"]{ font-weight:600}
.dash-151[data-theme="on"]{ font-weight:500}
.dash-152{width: 7px; height: 7px; border-radius: 4px}
.dash-152[data-theme="off"]{ background:#AEAEB2}
.dash-152[data-theme="on"]{ background:#1E9E4A}
.dash-153{display: flex; justify-content: flex-end; gap: 8px}
.dash-154{height: 34px; padding: 0 12px; border: 1px solid rgba(0,0,0,0.1); border-radius: 17px; background: rgba(255,255,255,0.9); color: #1D1D1F; font-size: 13px; font-weight: 600}
.dash-155{height: 34px; padding: 0 12px; border: 1px solid rgba(201,54,31,0.3); border-radius: 17px; background: transparent; color: #B8301A; font-size: 13px; font-weight: 600}
.dash-156{display: flex; flex-direction: column; gap: 24px}
.dash-157{display: flex; flex-direction: column; gap: 24px}
.dash-158{display: flex; flex-direction: column; gap: 6px}
.dash-159{margin: 0; font-size: 38px; line-height: 1.05; font-weight: 700; letter-spacing: -0.045em}
.dash-160{margin: 0; font-size: 16px; color: #515154}
.dash-161{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px}
.dash-162{box-sizing: border-box; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 14px}
.dash-163{font-size: 17px; font-weight: 700; letter-spacing: -0.01em}
.dash-164{display: flex; flex-direction: column; gap: 6px}
.dash-165{font-size: 13px; font-weight: 600}
.dash-166{height: 44px; box-sizing: border-box; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.12); background: rgba(255,255,255,0.95); font-size: 15px; color: #1D1D1F}
.dash-167{display: flex; flex-direction: column; gap: 6px}
.dash-168{font-size: 13px; font-weight: 600}
.dash-169{display: flex; gap: 8px}
.dash-170{flex-grow: 1; height: 44px; box-sizing: border-box; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.12); background: rgba(255,255,255,0.95); font-size: 15px; color: #1D1D1F}
.dash-171{height: 44px; padding: 0 16px; border: 1px solid rgba(0,0,0,0.12); border-radius: 12px; background: rgba(255,255,255,0.9); color: #1D1D1F; font-size: 14px; font-weight: 600}
.dash-172{box-sizing: border-box; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 4px}
.dash-173{font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px}
.dash-174{display: flex; align-items: center; gap: 12px; min-height: 58px; border-top: 1px solid rgba(0,0,0,0.06)}
.dash-175{flex-grow: 1; display: flex; flex-direction: column; gap: 2px}
.dash-176{font-size: 15px; font-weight: 600}
.dash-177{font-size: 12px; color: #6E6E73}
.dash-178{position: relative; width: 46px; height: 28px; flex-shrink: 0; border: none; border-radius: 14px; padding: 0; transition: background .15s ease}
.dash-178[data-theme="off"]{ background:rgba(29,29,31,0.18)}
.dash-178[data-theme="on"]{ background:#1F5BFF}
.dash-178[data-theme="off"]{ opacity:0.55}
.dash-178[data-theme="on"]{ opacity:0.55}
.dash-179{position: absolute; top: 3px; width: 22px; height: 22px; border-radius: 11px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: left .15s ease}
.dash-179[data-theme="off"]{ left:3px}
.dash-179[data-theme="on"]{ left:21px}
.dash-180{box-sizing: border-box; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 14px}
.dash-181{font-size: 17px; font-weight: 700; letter-spacing: -0.01em}
.dash-182{display: flex; align-items: center; gap: 12px}
.dash-183{flex-grow: 1; font-size: 14px; line-height: 1.45; color: #3A3A3C}
.dash-184{height: 38px; flex-shrink: 0; padding: 0 16px; border: 1px solid rgba(0,0,0,0.12); border-radius: 19px; background: rgba(255,255,255,0.9); color: #1D1D1F; font-size: 14px; font-weight: 600}
.dash-185{height: 1px; background: rgba(0,0,0,0.06)}
.dash-186{display: flex; align-items: center; gap: 12px}
.dash-187{flex-grow: 1; font-size: 14px; line-height: 1.45; color: #3A3A3C}
.dash-188{height: 38px; flex-shrink: 0; padding: 0 16px; border: 1px solid rgba(201,54,31,0.35); border-radius: 19px; background: transparent; color: #B8301A; font-size: 14px; font-weight: 600}
/* Tab changes focus the heading for screen readers; keep focus rings on controls. */
#customer-dashboard h1[tabindex="-1"]:focus{outline:none}
#customer-dashboard [data-cloud-bar]{background-image:linear-gradient(135deg,rgba(255,255,255,.28) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 75%,transparent 75%,transparent);background-size:28px 28px;animation:dashboard-cloud-stripes 1.2s linear infinite}
#customer-dashboard [data-cloud-bar][data-animate="false"]{animation:none}
@keyframes dashboard-cloud-stripes{from{background-position:0 0}to{background-position:28px 0}}
#customer-dashboard .dashboard-password{padding:24px;border-radius:24px;background:#fff;border:1px solid #e8e8ed}
#customer-dashboard .dashboard-password h2{margin:0 0 16px;font-size:18px;font-weight:600}
#customer-dashboard .dashboard-password summary{cursor:pointer;min-height:44px;line-height:24px;padding:10px 0;color:#1d4ed8;font-weight:600}
#customer-dashboard .dashboard-password form{display:flex;flex-direction:column;gap:16px;max-width:420px;margin-top:16px}
#customer-dashboard .dashboard-password label{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600}
#customer-dashboard .dashboard-password [hidden]{display:none}
#customer-dashboard .dashboard-password input{width:100%;padding:12px 14px;min-height:46px;border:1px solid #d4d4da;border-radius:12px;font-size:16px;background:white;color:#1d1d1f}
#customer-dashboard .dashboard-password p{margin:0;font-size:14px;line-height:1.5;color:#6e6e73}
#customer-dashboard [data-action="export-data"]{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.dashboard-spinner{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:dashboard-spin .8s linear infinite;flex-shrink:0}
@keyframes dashboard-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.dashboard-spinner{animation:none}}
#customer-dashboard .dashboard-cancel{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:24px}
#customer-dashboard .dashboard-cancel-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border:1px solid #d4d4da;border-radius:24px;background:#fff;color:#1d1d1f;font-size:16px;line-height:24px;font-weight:600;text-decoration:none}
#customer-dashboard .dashboard-cancel p{margin:0;font-size:14px;line-height:1.5;color:#6e6e73}
body.is-authenticated{padding:0;margin:0;background:#f5f5f7}
body.is-authenticated>.account-header,body.is-authenticated>.account-legal,body.is-authenticated .account-story,body.is-authenticated .legacy-dashboard,body.is-authenticated .local-footnote{display:none!important}
body.is-authenticated .account-layout{display:block!important;margin:0!important;padding:0!important;min-height:0!important}
body.is-authenticated .account-card{padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important;max-width:none!important;min-height:0!important;margin:0!important;width:100%!important}
body.is-authenticated #message:not([hidden]){position:fixed;z-index:50;bottom:24px;left:calc(50% + 124px);transform:translateX(-50%);max-width:calc(100vw - 32px);background:white;border:1px solid #dce2eb;border-radius:16px;padding:16px 24px;box-shadow:0 8px 32px #10184026}
#customer-dashboard[hidden]{display:none!important}.customer-dashboard{position:relative;min-height:100dvh;background:#f5f5f7;color:#1d1d1f;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',sans-serif;isolation:isolate;overflow:hidden;-webkit-font-smoothing:antialiased}
.customer-dashboard *{box-sizing:border-box}:where(.customer-dashboard a){color:#1d4ed8;text-decoration:none}.customer-dashboard button{font-family:inherit;cursor:pointer}.customer-dashboard button:disabled{cursor:default;opacity:.55}.customer-dashboard button:focus-visible,.customer-dashboard a:focus-visible{outline:3px solid #1f5bff;outline-offset:4px}.customer-dashboard p,.customer-dashboard h2{margin:0}.customer-dashboard .dashboard-sidebar{position:fixed;z-index:5;height:100dvh}.customer-dashboard .dashboard-main{position:relative;left:auto;margin-left:248px;min-height:100dvh}.dashboard-ambient{pointer-events:none;z-index:-1}.dashboard-section{min-width:0}.dashboard-grid>*{min-width:0}.dashboard-muted,.dashboard-empty{font-size:14px;line-height:1.5;color:#6e6e73}.dashboard-empty{padding:24px 16px}.dashboard-device-actions{border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:16px;min-height:300px}.dashboard-device-actions h2{font-size:20px;letter-spacing:-.03em}.dashboard-device-actions p{font-size:14px;line-height:1.5;color:#515154}.dashboard-primary,.dashboard-secondary{min-height:40px;border-radius:22px;padding:10px 18px;border:0;font-size:14px;font-weight:700;background:#1f5bff;color:white!important;text-align:center}.dashboard-secondary{background:white;color:#1d1d1f!important;border:1px solid #d4d4da}.dashboard-text-button{background:transparent;border:0;color:#1d4ed8;font-size:13px;font-weight:600}.dashboard-consent{display:block;font-size:13px;line-height:1.6;color:#515154;width:100%}.dashboard-consent input[type="checkbox"]{margin:0 6px 0 0;width:16px;height:16px;vertical-align:middle}.dashboard-main [href="#cancel"][aria-disabled="true"],.dashboard-main a[aria-disabled="true"]{opacity:.5;pointer-events:none}.dashboard-table-row,.dashboard-recent-row{min-width:0}.dashboard-table-row>span,.dashboard-recent-row>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.customer-dashboard input{min-width:0}.dashboard-main .sf-in:has(>.dashboard-consent){flex-wrap:wrap}.customer-dashboard .dashboard-sidebar [aria-current="page"]{background:rgba(31,91,255,.1);color:#1742d6}.customer-dashboard [data-cloud-bar]{width:0}
@media(min-width:801px){.customer-dashboard .dashboard-section{width:100%;max-width:1200px;margin-inline:auto}}
@media(max-width:1199px){.customer-dashboard .dashboard-main{padding:32px 24px}.dashboard-section>.dashboard-grid{grid-template-columns:1fr!important}.dashboard-section>.dashboard-grid:first-of-type:has(>div:nth-child(3)){grid-template-columns:repeat(2,minmax(0,1fr))!important}.dashboard-table-row{grid-template-columns:minmax(150px,1.4fr) minmax(170px,1.3fr) 55px 90px 100px 170px!important}.dashboard-main .glass-strong:has(>.dashboard-table-row){overflow:auto}.dashboard-table-row{min-width:760px}.dashboard-recent-row{grid-template-columns:minmax(130px,1.3fr) minmax(130px,1.2fr) 50px 80px 32px!important}.dashboard-main .glass-strong:has(>.dashboard-recent-row){overflow:auto}.dashboard-recent-row{min-width:490px}}
@media(max-width:800px){.customer-dashboard .dashboard-sidebar{position:relative;width:100%;height:auto;padding:18px 20px;border-width:0 0 1px}.dashboard-sidebar nav{flex-direction:row!important;overflow:auto;gap:4px}.dashboard-sidebar nav button{flex-shrink:0;height:44px;white-space:nowrap}.dashboard-sidebar>a{padding-bottom:16px}.dashboard-sidebar>div:nth-last-child(2){display:none}.dashboard-sidebar>div:last-child{margin-top:12px}.customer-dashboard .dashboard-main{margin-left:0;padding:28px 20px;min-height:calc(100dvh - 190px)}.dashboard-section>div:first-child{gap:16px;flex-wrap:wrap}.dashboard-main h1{font-size:32px}.dashboard-grid{grid-template-columns:1fr!important}body.is-authenticated #message:not([hidden]){left:50%}}
@media(max-width:480px){.customer-dashboard .dashboard-main{padding:24px 16px}.dashboard-section>.dashboard-grid:first-of-type:has(>div:nth-child(3)){grid-template-columns:1fr!important}.dashboard-main h1{font-size:30px}.dashboard-grid .dashboard-grid:has(>sc-for){grid-template-columns:1fr!important}.dashboard-main [role="group"]{max-width:100%}.dashboard-main [role="group"] button{padding:0 10px}.dashboard-main .glass-strong{border-radius:20px}.dashboard-main .dashboard-grid button:has(.sf-num){height:auto;min-height:106px}.dashboard-main .dashboard-grid:has(>button){grid-template-columns:1fr!important}.dashboard-main .glass-strong>div:has(#st-email){min-width:0}}
@media(prefers-reduced-motion:reduce){.customer-dashboard *{animation:none!important;transition:none!important}}

.dashboard-status[data-live="false"]{color:#d2d2d7;background:#ffffff12;border-color:#ffffff26}.dashboard-status[data-live="false"]>span{background:#a1a1a6}


.customer-dashboard .dashboard-seat-picker{display:grid;grid-template-columns:minmax(0,1fr) 104px;align-items:center;gap:10px 20px;padding:20px 0;margin-top:8px;border-top:1px solid #e8e8ed}
.customer-dashboard .dashboard-seat-picker label{font-size:16px;line-height:24px;font-weight:600;color:#1d1d1f}
.customer-dashboard input[data-seat-quantity]{width:104px;min-height:48px;padding:10px 12px;border:1px solid #b8bdc7;border-radius:12px;background:#fff;color:#1d1d1f;font-family:inherit;font-size:18px;font-weight:600;line-height:24px;color-scheme:light}
.customer-dashboard input[data-seat-quantity]:focus-visible{outline:3px solid #1f5bff;outline-offset:3px}
.customer-dashboard .dashboard-seat-picker p{grid-column:1/-1;font-size:13px;line-height:20px;color:#6e6e73}

/* Empty state and licence management occupy their own rows, after device cards. */
.customer-dashboard .dashboard-macs-empty{grid-column:1/-1;margin:0}

.customer-dashboard .dashboard-macs-grid{margin:0}
.customer-dashboard .dashboard-macs-empty{margin:0!important}

/* Desktop Macs follows the same cards and occupancy language as the mobile view. */
.customer-dashboard .dashboard-macs-usage,.customer-dashboard .dashboard-mac-card{background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(16,24,64,.05),0 24px 60px rgba(16,24,64,.09)}
.customer-dashboard .dashboard-macs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.customer-dashboard .dashboard-macs-title{display:flex;flex-direction:column;gap:6px;min-width:0}
.customer-dashboard .dashboard-macs-title h1{margin:0;font-size:38px;line-height:1.05;letter-spacing:-.045em}
.customer-dashboard .dashboard-macs-title p{font-size:16px;line-height:1.5;color:#515154}
.customer-dashboard .dashboard-macs-usage{flex:0 0 280px;border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.customer-dashboard .dashboard-macs-usage>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:14px}
.customer-dashboard .dashboard-macs-usage .sf-num{font-size:15px;font-weight:700;white-space:nowrap}
.customer-dashboard .dashboard-macs-meter{display:flex;gap:5px;min-height:8px}
.customer-dashboard .dashboard-macs-meter span{height:8px;flex:1;border-radius:4px;background:rgba(29,29,31,.08)}
.customer-dashboard .dashboard-macs-meter span[data-theme="on"]{background:#1f5bff}
.customer-dashboard .dashboard-macs-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.customer-dashboard .dashboard-mac-card,.customer-dashboard .dashboard-mac-free{min-width:0;min-height:470px;border-radius:26px;padding:24px}
.customer-dashboard .dashboard-mac-card{display:flex;flex-direction:column}
.customer-dashboard .dashboard-mac-art{position:relative;height:150px;border-radius:18px;background:linear-gradient(180deg,#f3f4f8,#e7e9f0);display:flex;align-items:center;justify-content:center;overflow:hidden}
.customer-dashboard .dashboard-mac-device{display:flex;flex-direction:column;align-items:center;justify-content:center}
.customer-dashboard .dashboard-mac-screen{width:min(170px,100%);height:104px;border:5px solid #1d1d1f;border-radius:9px 9px 2px 2px;background:linear-gradient(135deg,#1f5bff,#7a5cff 55%,#ff6b57);box-shadow:0 14px 30px rgba(16,24,64,.18);display:flex;align-items:center;justify-content:center}
.customer-dashboard .dashboard-mac-screen img{width:28px;height:28px;object-fit:contain;border-radius:7px}
.customer-dashboard .dashboard-mac-base{width:190px;max-width:100%;height:9px;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#4a4a4f,#2c2c2e)}
.customer-dashboard .dashboard-mac-device[data-kind="desktop"] .dashboard-mac-screen{width:150px;height:100px;border-radius:9px}
.customer-dashboard .dashboard-mac-device[data-kind="desktop"] .dashboard-mac-base{width:58px;height:19px;border-radius:0 0 4px 4px;background:linear-gradient(180deg,#c7c7cc,#aeaeb2)}
.customer-dashboard .dashboard-mac-last{position:absolute;top:12px;left:12px;padding:6px 9px;border-radius:12px;background:#fff;color:#1742d6;font-size:11px;font-weight:800;letter-spacing:.04em}
.customer-dashboard .dashboard-mac-card h2{margin:20px 0 0;font-size:20px;line-height:1.2;letter-spacing:-.02em}
.customer-dashboard .dashboard-mac-seen{display:flex;align-items:center;gap:7px;margin:6px 0 0;font-size:14px;font-weight:600;color:#6e6e73}
.customer-dashboard .dashboard-mac-seen[data-theme="on"]{color:#1e7a3e}
.customer-dashboard .dashboard-mac-seen span{width:8px;height:8px;flex:none;border-radius:50%;background:#aeaeb2}
.customer-dashboard .dashboard-mac-seen[data-theme="on"] span{background:#1e9e4a}
.customer-dashboard .dashboard-mac-details{margin:16px 0 20px;font-size:14px;line-height:1.4}
.customer-dashboard .dashboard-mac-details div{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px;border-top:1px solid rgba(0,0,0,.06)}
.customer-dashboard .dashboard-mac-details dt{color:#6e6e73;flex:none}
.customer-dashboard .dashboard-mac-details dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
.customer-dashboard .dashboard-mac-card button{margin-top:auto;min-height:44px;font-size:15px;font-weight:600}
.customer-dashboard .dashboard-mac-free{border:2px dashed rgba(29,29,31,.16);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.customer-dashboard .dashboard-mac-plus{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:rgba(31,91,255,.1);color:#1f5bff;font-size:32px;font-weight:300;line-height:1}
.customer-dashboard .dashboard-mac-free strong{font-size:18px}
.customer-dashboard .dashboard-mac-free p{max-width:250px;font-size:14px;line-height:1.5;color:#515154;overflow-wrap:anywhere}
.customer-dashboard .dashboard-mac-free a{display:inline-flex;align-items:center;justify-content:center;margin-top:8px;min-height:44px;padding:0 20px;font-size:14px;text-decoration:none}
.customer-dashboard .dashboard-macs-tips{border-radius:20px;padding:18px 22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.customer-dashboard .dashboard-macs-tips>div{display:flex;flex-direction:column;gap:2px}
.customer-dashboard .dashboard-macs-tips strong{font-size:14px}
.customer-dashboard .dashboard-macs-tips p{font-size:13px;line-height:1.4;color:#515154}
#customer-dashboard [data-native-connection][hidden],#customer-dashboard [data-return-app][hidden],#customer-dashboard [data-bridge][hidden]{display:none!important}
#customer-dashboard .dashboard-native-connection{width:100%;border-radius:20px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
#customer-dashboard .dashboard-native-connection h2{margin:0 0 4px;font-size:18px;letter-spacing:-.02em}
#customer-dashboard .dashboard-native-connection p{margin:0;font-size:14px;line-height:1.5;color:#515154}
#customer-dashboard .dashboard-native-actions{display:flex;flex-wrap:wrap;gap:10px}
#customer-dashboard .dashboard-native-actions a{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:1000px){#customer-dashboard .dashboard-native-connection{flex-direction:column;align-items:stretch}}
@media(max-width:1199px){.customer-dashboard .dashboard-macs-head{align-items:stretch;flex-wrap:wrap}.customer-dashboard .dashboard-macs-usage{flex-basis:280px}.customer-dashboard .dashboard-macs-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-dashboard .dashboard-macs-tips{grid-template-columns:1fr}}
@media(max-width:950px){.customer-dashboard .dashboard-macs-cards{grid-template-columns:1fr}.customer-dashboard .dashboard-mac-card,.customer-dashboard .dashboard-mac-free{min-height:0}.customer-dashboard .dashboard-mac-free{padding-block:32px}}
