/* Customer portal, second pass: per-view components (overview, orders, subscriptions, conversations, services, auth). */
.acct-nav a{display:inline-flex;align-items:center;gap:8px}
.acct-nav a svg{width:17px;height:17px;flex:none}
.chip{display:inline-flex;align-items:center;gap:7px}
.chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
.chip.warn .dot{animation:pulse 1.8s ease-in-out infinite}
.chip.price{font-variant-numeric:tabular-nums;font-weight:800;color:var(--c-text)}
@keyframes pulse{50%{opacity:.35}}
.chev{color:var(--c-muted);font-size:22px;transition:transform .4s var(--ease)}
[dir=rtl] .chev{transform:scaleX(-1)}

/* overview */
.ov-hero{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:clamp(22px,3vw,36px);background:radial-gradient(600px 240px at 100% 0%,color-mix(in srgb,var(--c-primary) 34%,transparent),transparent 70%),linear-gradient(165deg,var(--c-surface-alt),var(--c-surface))}
.ov-hero .chip{margin-inline-start:auto}
.ov-hero .acct-h{margin:0 0 6px}
.ov-hero .acct-sub{margin:0}
.ov-hi{margin:0 0 4px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--c-link);font-weight:700}
.avatar{width:72px;height:72px;border-radius:24px;display:grid;place-items:center;font-size:30px;font-weight:900;color:#fff;background:conic-gradient(from 200deg,var(--c-secondary),var(--c-primary),var(--c-accent),var(--c-secondary));box-shadow:0 18px 40px -14px var(--glow)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-block:16px}
.kpi{position:relative;display:flex;flex-direction:column;gap:4px;padding:22px;border-radius:var(--r-lg);border:1px solid var(--glass-line);background:linear-gradient(165deg,var(--c-surface-alt),var(--c-surface));transition:transform .5s var(--ease),border-color .3s,box-shadow .5s}
.kpi:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--c-link) 40%,transparent);box-shadow:0 30px 60px -30px var(--glow)}
.kpi b{font-size:clamp(34px,4vw,48px);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;margin-top:14px}
.kpi small{color:var(--c-muted);font-size:13px}
.kpi-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;color:var(--c-link);background:color-mix(in srgb,var(--c-primary) 16%,transparent);border:1px solid color-mix(in srgb,var(--c-link) 25%,transparent);flex:none}
.kpi-ic.warn{color:#fbbf24;background:#fbbf2418;border-color:#fbbf2440}
.kpi-ic svg{width:20px;height:20px}
.alert-row{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--glass-line);transition:padding .4s var(--ease),background .3s;border-radius:14px}
.alert-row:last-child{border:0}
.alert-row:hover{padding-inline:12px;background:color-mix(in srgb,var(--c-primary) 10%,transparent)}
.alert-row .chev{margin-inline-start:auto}
.ok-empty{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--c-muted)}
.ok-empty svg{width:34px;height:34px;color:#34d399}
.ok-empty::before{display:none!important}

/* orders */
.order-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.rail{display:flex;gap:6px;margin-top:14px;max-width:340px}
.rail span{flex:1;display:flex;flex-direction:column;gap:6px}
.rail i{display:block;height:4px;border-radius:4px;background:var(--glass-line);position:relative;overflow:hidden}
.rail i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--c-secondary),var(--c-primary));transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease)}
[dir=rtl] .rail i::after{transform-origin:100% 50%}
.rail .on i::after{transform:scaleX(1)}
.rail .half i::after{transform:scaleX(.5)}
.rail.bad .on i::after{background:#f87171}
.rail small{font-size:10px;color:var(--c-muted);letter-spacing:.04em}
.rail .on small{color:var(--c-text)}
.od-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;background:radial-gradient(520px 200px at 0% 0%,color-mix(in srgb,var(--c-secondary) 26%,transparent),transparent 70%),linear-gradient(165deg,var(--c-surface-alt),var(--c-surface))}
.od-hero .acct-h{margin:0 0 4px;font-size:clamp(22px,3.4vw,34px);letter-spacing:-.02em}
.od-hero .acct-sub{margin:0}
.od-total{text-align:end}
.od-total small{display:block;color:var(--c-muted);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.od-total b{font-size:clamp(30px,4vw,46px);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.back{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--glass-line);transition:background .3s,transform .4s var(--ease)}
.back:hover{background:color-mix(in srgb,var(--c-primary) 16%,transparent);transform:translateX(-3px)}
[dir=rtl] .back:hover{transform:translateX(3px)}
.timeline.stages4>li{padding-bottom:26px}
.timeline.stages4 .tl-dot{width:26px;height:26px;border-radius:50%;background:var(--c-surface-alt);border:1px solid var(--glass-line);font-weight:800}
.timeline.stages4 li.done .tl-dot{background:linear-gradient(135deg,var(--c-btn-from),var(--c-btn-to));border-color:transparent}
.timeline.stages4 li.current .tl-dot{border-color:var(--c-link);box-shadow:0 0 0 5px color-mix(in srgb,var(--c-primary) 28%,transparent);animation:pulse 2s infinite}
.timeline li b{color:var(--c-text);font-size:14px}
.delivery-code{font-size:13px;letter-spacing:.04em}

/* subscriptions */
.sub-card{display:grid;grid-template-columns:1fr auto;column-gap:24px}
.sub-card>*{grid-column:1/-1}
.sub-card>.row-head{grid-column:1}
.sub-card>.ring{grid-column:2;grid-row:1/span 4;align-self:start}
.ring{position:relative;width:104px;height:104px;display:grid;place-items:center;text-align:center}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6}
.ring-bg{stroke:var(--glass-line)}
.ring-fg{stroke:var(--c-primary);stroke-linecap:round;filter:drop-shadow(0 0 8px var(--glow))}
.ring b{font-size:28px;letter-spacing:-.04em;line-height:1;transform:translateY(-6px)}
.ring small{position:absolute;bottom:20px;font-size:9px;color:var(--c-muted)}

/* notifications */
.notif-row{display:flex;align-items:center;gap:14px;width:100%;flex-direction:row;text-align:start;background:none;border:0;border-bottom:1px solid var(--glass-line);color:var(--c-muted);padding:16px 8px;transition:background .3s}
.notif-row:hover{background:color-mix(in srgb,var(--c-primary) 8%,transparent)}
.notif-row span{flex:1}
.notif-row small{white-space:nowrap}
.notif-row .n-dot{width:9px;height:9px;border-radius:50%;background:transparent;flex:none}
.notif-row.unread{border-inline-start:0;padding-inline-start:8px;color:var(--c-text);font-weight:600}
.notif-row.unread .n-dot{background:var(--c-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-primary) 25%,transparent)}

/* conversations */
.thread{gap:14px;display:flex;flex-direction:column}
.msg{max-width:min(620px,88%);padding:14px 16px;border-radius:20px 20px 6px 20px;background:linear-gradient(135deg,color-mix(in srgb,var(--c-primary) 30%,var(--c-surface-alt)),color-mix(in srgb,var(--c-secondary) 18%,var(--c-surface)));border:1px solid color-mix(in srgb,var(--c-link) 22%,transparent);align-self:flex-end}
[dir=rtl] .msg{border-radius:20px 20px 20px 6px}
.msg.staff{align-self:flex-start;border-radius:20px 20px 20px 6px;background:var(--c-surface-alt);border-color:var(--glass-line)}
[dir=rtl] .msg.staff{border-radius:20px 20px 6px 20px}
.msg b{font-size:12px;letter-spacing:.06em;color:var(--c-link)}
.msg.staff b{color:#34d399}
.msg small{display:block;margin-top:6px;opacity:.7}
.card textarea.field-area{min-height:110px}

/* services */
.svc-tl{display:flex;gap:0;margin:22px 0;overflow-x:auto;padding-bottom:8px}
.svc-tl li{position:relative;flex:1;min-width:120px;padding:44px 4px 0!important;text-align:center;align-items:center}
.svc-tl li::before{content:"";position:absolute;inset-inline-start:calc(-50% + 14px)!important;top:13px!important;bottom:auto!important;width:calc(100% - 28px)!important;height:2px!important;display:block!important;background:var(--glass-line)}
.svc-tl li:first-child::before{display:none!important}
.svc-tl li.done::before{background:var(--c-primary)}
.svc-tl .tl-dot{position:absolute!important;top:0;inset-inline-start:calc(50% - 13px)!important}
.progress{height:6px;max-width:320px}
.progress span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--c-secondary),var(--c-primary));transition:width 1s var(--ease)}

/* reviews */
.stars-in{gap:6px}
.stars-in button{font-size:32px;line-height:1;color:var(--c-border);transition:transform .35s var(--ease),color .2s;padding:0 2px}
.stars-in button.on{color:#f5b942;text-shadow:0 0 18px #f5b94266}
.stars-in button:hover{transform:scale(1.25) rotate(-8deg)}
.thumbs img{border-radius:14px;transition:transform .5s var(--ease)}
.thumbs img:hover{transform:scale(1.06)}

/* auth + forms */
.auth-badge{width:60px;height:60px;border-radius:20px;display:grid;place-items:center;margin-bottom:18px;color:#fff;background:conic-gradient(from 200deg,var(--c-secondary),var(--c-primary),var(--c-accent),var(--c-secondary));box-shadow:0 18px 40px -12px var(--glow)}
.auth-badge svg{width:28px;height:28px}
.pw-wrap{position:relative}
.pw-wrap .field{padding-inline-end:48px}
.pw-eye{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:0;background:none;color:var(--c-muted);display:grid;place-items:center;transition:color .3s,background .3s}
.pw-eye:hover,.pw-eye[aria-pressed=true]{color:var(--c-text);background:color-mix(in srgb,var(--c-primary) 18%,transparent)}
.pw-eye svg{width:18px;height:18px}
.error:not(:empty){padding:10px 14px;border-radius:12px;background:#f8717118;border:1px solid #f8717144}
.success:not(:empty){padding:10px 14px;border-radius:12px;background:#34d39918;border:1px solid #34d39944}

/* loading + empty */
.skel{display:grid;gap:14px}
.skel i{display:block;border-radius:14px;background:linear-gradient(100deg,var(--c-surface) 30%,var(--c-surface-alt) 50%,var(--c-surface) 70%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.sk-h{height:42px;width:min(320px,60%)}
.sk-p{height:16px;width:min(460px,80%)}
.sk-card{display:grid;gap:12px;padding:20px;border:1px solid var(--glass-line);border-radius:var(--r-lg)}
.sk-card i{height:54px}
@keyframes shimmer{to{background-position:-200% 0}}
.empty::before{content:"";display:block;width:46px;height:46px;margin:0 auto 14px;opacity:.55;background:var(--c-link);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h5l1 3h6l1-3h5'/%3E%3Cpath d='M5 13 7 5h10l2 8v6H5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h5l1 3h6l1-3h5'/%3E%3Cpath d='M5 13 7 5h10l2 8v6H5z'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:700px){.sub-card{grid-template-columns:1fr}.sub-card>.ring{grid-column:1;grid-row:auto;margin:10px 0}.msg{max-width:94%}.kpis{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.skel i,.chip .dot,.timeline li.current .tl-dot{animation:none}}

input[type=file]{width:100%;padding:10px;border-radius:14px;border:1px dashed var(--glass-line);background:color-mix(in srgb,var(--c-bg) 50%,transparent);color:var(--c-muted);cursor:pointer}
input[type=file]::file-selector-button{margin-inline-end:14px;padding:9px 16px;border:0;border-radius:999px;font-weight:700;color:var(--c-btn-text);background:linear-gradient(110deg,var(--c-btn-from),var(--c-btn-to));cursor:pointer}
:focus-visible{outline:2px solid var(--c-link);outline-offset:3px}

.count-pill{margin-inline-start:auto;min-width:28px;height:28px;padding:0 9px;display:inline-grid;place-items:center;border-radius:999px;font-size:13px;background:#fbbf2422;color:#fcd34d;border:1px solid #fbbf2455}
.alert-row .chev{margin-inline-start:0}

/* password strength + security card */
.meter{display:flex;align-items:center;gap:5px;margin-top:8px}
.meter i{flex:1;max-width:60px;height:4px;border-radius:4px;background:var(--glass-line);transition:background .4s}
.meter small{margin-inline-start:8px;font-size:11px;color:var(--c-muted);min-width:54px}
.meter[data-s="1"] i:nth-child(-n+1){background:#f87171}
.meter[data-s="2"] i:nth-child(-n+2){background:#fbbf24}
.meter[data-s="3"] i:nth-child(-n+3){background:#a3e635}
.meter[data-s="4"] i:nth-child(-n+4){background:#34d399}
.sec-card h3{display:flex;align-items:center;gap:12px}
.auth-box .back{margin-bottom:16px}
.auth-box .btn-link{padding:0}
[dir=rtl] .auth-box .acct-sub[dir=ltr]{text-align:right}