/* Customer-facing visual layer; shared admin components stay unchanged. */
body.delivery-client {
  color: #18223c;
  background: radial-gradient(ellipse at 88% 1%, rgba(255,197,124,.28), transparent 24%),
    radial-gradient(ellipse at 66% 2%, rgba(221,177,255,.36), transparent 30%),
    radial-gradient(ellipse at 3% 45%, rgba(190,195,255,.19), transparent 30%), #fafbfe;
}
.delivery-client header { height: 76px; background: rgba(255,255,255,.9); border-color: #e9ebf3; }
.delivery-client .brand { display: inline-flex; align-items: center; color: #13213a; letter-spacing: -.02em; }
.delivery-client .brand img { width: 34px; height: 34px; object-fit: contain; margin-right: 9px; }
.delivery-client .brand span { color: #66738b; border-color: #dfe3ee; }
.delivery-client #identity { color: #65718b; font-size: 13px; }
.delivery-client main { max-width: 1280px; }
.delivery-client .banner { background: #fff8e7; border: 1px solid #f3e0b5; color: #76531b; border-radius: 9px; padding: 10px 14px; }
.delivery-client .eyebrow { color: #6652e6; }
.delivery-client .muted, .delivery-client small { color: #5e6c82; }
.delivery-client footer { color: #69758c; }
.delivery-client .login-shell { position: relative; isolation: isolate; overflow: hidden; min-height: 590px; border: 1px solid rgba(255,255,255,.95); border-radius: 22px; background: linear-gradient(115deg,rgba(255,255,255,.94) 5%,rgba(251,247,255,.88) 56%,rgba(255,232,218,.82)); box-shadow: 0 18px 52px rgba(73,63,130,.09); }
.delivery-client .login-atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.delivery-client .login-atmosphere::before { content: ''; position: absolute; width: 650px; height: 650px; right: -170px; top: -290px; border-radius: 50%; border: 1px solid rgba(145,100,231,.22); box-shadow: 0 0 0 54px rgba(184,136,247,.07), 0 0 0 108px rgba(243,155,206,.06), 0 0 0 162px rgba(247,191,142,.05); animation: workspace-orbit 24s linear infinite; }
.delivery-client .login-atmosphere::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(95,83,190,.23) .8px, transparent .8px); background-size: 22px 22px; mask-image: linear-gradient(110deg,transparent 30%,#000 100%); opacity: .28; }
.delivery-client .login-atmosphere b { position: absolute; width: 330px; height: 330px; right: 10%; top: -75px; border: 1px solid rgba(139,115,224,.12); border-radius: 50%; animation: workspace-orbit 18s linear infinite; }
.delivery-client .login-atmosphere b::after { content: ''; position: absolute; width: 8px; height: 8px; top: 48px; left: 38px; border-radius: 50%; background: #a78ceb; box-shadow: 0 0 0 5px rgba(167,140,235,.12), 0 0 20px rgba(135,111,228,.45); }
.delivery-client .login-atmosphere i { position: absolute; display: block; width: 7px; height: 7px; background: #a994f0; border-radius: 50%; box-shadow: 0 0 14px #a994f0; animation: workspace-pulse 5s ease-in-out infinite alternate; }
.delivery-client .login-atmosphere i:nth-child(1) { left: 55%; top: 19%; }
.delivery-client .login-atmosphere i:nth-child(2) { left: 78%; top: 70%; width: 5px; height: 5px; animation-delay: -2s; background: #e19eb8; }
.delivery-client .login-atmosphere i:nth-child(3) { left: 25%; top: 78%; width: 4px; height: 4px; animation-delay: -3s; }
.delivery-client .login { max-width: none; min-height: 590px; margin: 0; padding: clamp(32px,6vw,76px); display: grid; grid-template-columns: minmax(0,1.15fr) minmax(330px,.85fr); gap: 50px; align-items: center; }
.delivery-client .login-intro { max-width: 550px; }
.delivery-client .login-kicker { display: flex; align-items: center; gap: 9px; color: #5d4bd6; font-size: 13px; font-weight: 700; }
.delivery-client .login-kicker span { width: 8px; height: 8px; background: #7869ee; border-radius: 50%; box-shadow: 0 0 0 5px rgba(120,105,238,.12); }
.delivery-client .login h1 { font-size: clamp(36px,4.4vw,57px); line-height: 1.22; letter-spacing: -.04em; color: #18213c; margin: 24px 0 18px; }
.delivery-client .login-intro p { color: #596881; font-size: 15px; line-height: 1.9; }
.delivery-client .login-line { display: flex; align-items: center; gap: 7px; margin-top: 48px; }
.delivery-client .login-line span { width: 28px; height: 3px; background: #cbc4f4; border-radius: 9px; }
.delivery-client .login-line span:first-child { width: 62px; background: #6d59e8; }
.delivery-client .login-line span:last-child { background: #efc1b9; }
.delivery-client .login-panel .card { margin: 0; padding: 38px; background: rgba(255,255,255,.92); border-color: #e7e5f2; border-radius: 16px; box-shadow: 0 16px 42px rgba(59,50,108,.08); }
.delivery-client .login-panel-label { color: #6c5fcb; font-size: 10px; font-weight: 750; letter-spacing: .16em; }
.delivery-client .login-panel h2 { margin: 15px 0 6px; font-size: 23px; color: #1b2640; }
.delivery-client .login-panel-desc { color: #5c6b83; font-size: 13px; line-height: 1.8; margin: 0 0 26px; }
.delivery-client .login-panel label { color: #283650; font-size: 13px; }
.delivery-client .login-panel input { height: 50px; border-radius: 9px; border-color: #d7ddec; background: #fbfbff; }
.delivery-client .login-panel input:focus { border-color: #7564e8; outline: 3px solid rgba(117,100,232,.13); }
.delivery-client .login-panel .actions { margin-top: 22px; }
.delivery-client .login-panel .actions button { min-height: 48px; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 18px; background: #5e4dea; font-weight: 700; }
.delivery-client .login-help { margin: 18px 0 0; color: #69758a; font-size: 12px; line-height: 1.7; }
.delivery-client .customer-heading { position: relative; overflow: hidden; margin: 18px 0 24px; padding: 34px 38px; border: 1px solid rgba(255,255,255,.95); border-radius: 20px; background: linear-gradient(112deg,rgba(255,255,255,.96) 12%,rgba(255,255,255,.9) 54%,rgba(243,223,255,.75) 80%,rgba(255,222,188,.78)); }
.delivery-client .customer-heading::after { content: ''; position: absolute; right: 7%; top: -160px; height: 230px; width: 230px; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; box-shadow: 0 0 0 32px rgba(198,152,255,.1), 0 0 0 64px rgba(255,176,208,.08); pointer-events: none; }
.delivery-client .customer-heading > * { position: relative; z-index: 1; }
.delivery-client .customer-heading h1 { color: #18213c; }
.delivery-client .customer-heading p:not(.eyebrow) { color: #596881; }
.delivery-client .resource-total { border-color: #d8cce9; }
.delivery-client .phase-track { gap: 12px; }
.delivery-client .phase-step { color: #53617a; background: rgba(255,255,255,.8); border-color: #e5e5f0; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.delivery-client .phase-step:hover { transform: translateY(-2px); border-color: #b5a5ed; }
.delivery-client .phase-step.is-current { background: linear-gradient(135deg,#f0ebff,#f8efff); border-color: #b7a5ed; color: #4b34ab; }
.delivery-client .phase-step.is-done { background: #eef8f4; border-color: #d6ede4; color: #276c59; }
.delivery-client .latest-panel { background: linear-gradient(115deg,#fff 10%,#f6f0ff 68%,#fff0e7); border-color: #e8e4f4; }
.delivery-client .resource-tile { background: #fff; border-color: #e5e5ef; box-shadow: 0 8px 24px rgba(53,47,102,.045); }
.delivery-client .resource-art { background: linear-gradient(135deg,#e8e5fb,#f7e7f1 70%,#ffede1); }
.delivery-client .resource-tile:nth-child(3n + 2) .resource-art { background: linear-gradient(135deg,#e3ecff,#eee8fb 70%,#fbe7ef); }
.delivery-client .plan-section, .delivery-client #client-contribution { background: rgba(255,255,255,.92); border: 1px solid #e5e6f0; box-shadow: 0 10px 32px rgba(51,46,100,.05); }
.delivery-client .plan-task, .delivery-client .contribution-grid form { background: #f8f8fd; }
.delivery-client .feedback-link { color: #5541ae; background: #f0ecff; }
.delivery-client .material-dialog { border: 1px solid #e5e4f0; }
@keyframes workspace-orbit { to { transform: rotate(360deg); } }
@keyframes workspace-pulse { from { opacity: .3; transform: scale(.7); } to { opacity: .85; transform: scale(1.25); } }
@media (max-width: 760px) {
  .delivery-client header { height: 66px; }
  .delivery-client .brand img { width: 29px; height: 29px; }
  .delivery-client main { margin-top: 18px; }
  .delivery-client .login-shell { min-height: auto; }
  .delivery-client .login { display: block; min-height: 0; padding: 34px 22px 24px; }
  .delivery-client .login h1 { font-size: clamp(32px,8.4vw,43px); margin: 20px 0 14px; }
  .delivery-client .login-intro p { font-size: 14px; }
  .delivery-client .login-line { margin: 24px 0 30px; }
  .delivery-client .login-panel .card { padding: 26px 22px; }
  .delivery-client .login-atmosphere::before { width: 350px; height: 350px; right: -185px; top: -105px; }
  .delivery-client .customer-heading { align-items: flex-start; padding: 26px 22px; gap: 16px; }
  .delivery-client .customer-heading h1 { font-size: 27px; }
  .delivery-client .resource-total { padding-left: 12px; min-width: 58px; }
  .delivery-client .resource-total span { word-break: keep-all; }
  .delivery-client .phase-step { padding: 16px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .delivery-client .login-atmosphere::before, .delivery-client .login-atmosphere i, .delivery-client .login-atmosphere b { animation: none; }
  .delivery-client .phase-step { transition: none; }
}
@media (max-width: 520px) {
  .delivery-client .customer-heading { display: block; }
  .delivery-client .resource-total { display: flex; align-items: baseline; gap: 8px; border-left: 0; border-top: 1px solid #ded4ec; margin-top: 18px; padding: 12px 0 0; }
  .delivery-client .resource-total strong { display: inline; font-size: 27px; }
}

.delivery-client .operation-progress { margin: 14px 0 0; color: #5b4c93; font-size: 13px; line-height: 1.5; }
.delivery-client .operation-progress[hidden] { display: none; }
.delivery-client .operation-track { display: block; height: 4px; margin-bottom: 8px; overflow: hidden; border-radius: 4px; background: #e9e4f6; }
.delivery-client .operation-track i { display: block; width: 38%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#7c62d7,#b38dea); animation: operation-moving 1.25s ease-in-out infinite alternate; }
@keyframes operation-moving { from { transform: translateX(0); } to { transform: translateX(165%); } }
@media (prefers-reduced-motion: reduce) { .delivery-client .operation-track i { animation: none; width: 100%; } }

.delivery-client .operation-progress progress { display:block; width:100%; height:7px; margin:0 0 9px; accent-color:#8063d9; border:0; }
.delivery-client .operation-progress progress[hidden], .delivery-client .operation-progress .operation-track[hidden], .delivery-client .operation-progress .upload-percent[hidden] { display:none; }
.delivery-client .operation-progress small { display:block; color:#7b8498; margin-top:3px; }
.delivery-client .operation-progress .upload-percent { float:right; font-variant-numeric:tabular-nums; font-weight:700; }