/* CLN24 premium UX layer — teal/navy, no purple / cream kitsch */

:root{
  --ux-panel: linear-gradient(155deg, rgba(12,42,62,.97), rgba(5,22,36,.98));
  --ux-panel-border: rgba(120,210,220,.2);
  --ux-glow: rgba(37,226,216,.16);
  --ux-input: #071b2c;
  --ux-input-border: rgba(139,207,214,.26);
  --ux-label: #d8eaf1;
  --ux-help: #8099aa;
  --ux-radius: 22px;
}

/* ——— Auth ——— */
.ux-auth{
  min-height: calc(100vh - 74px);
  padding: 56px 0 72px;
  background:
    radial-gradient(ellipse 70% 50% at 8% 0%, rgba(19,198,199,.18), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 20%, rgba(78,124,255,.1), transparent 50%),
    linear-gradient(160deg, #031321, #061c2f 55%, #041622);
}
.ux-auth-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px, 4vw, 48px);
  align-items:center;
}
.ux-auth-grid.single{ grid-template-columns: minmax(0,520px); justify-content:center; }
.ux-auth-brand{ max-width: 520px; }
.ux-auth-title{
  font-family: var(--font-display), Georgia, serif;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 12px 0 14px;
  color: #f7fbff;
}
.ux-auth-lead{ color:#9db0c1; font-size:1.05rem; max-width:40ch; }
.ux-auth-points{
  list-style:none; padding:0; margin:28px 0 0; display:grid; gap:12px;
}
.ux-auth-points li{
  display:flex; gap:12px; align-items:flex-start;
  color:#c9dbe6; font-weight:600; font-size:.95rem;
}
.ux-auth-points li:before{
  content:""; width:10px; height:10px; margin-top:.45em; border-radius:50%;
  background: linear-gradient(135deg, var(--brand-hot), #0cb5c2);
  box-shadow: 0 0 0 4px var(--ux-glow);
  flex:none;
}
.ux-panel,
.auth-card.ux-panel,
.premium-form.ux-panel{
  background: var(--ux-panel);
  border: 1px solid var(--ux-panel-border);
  border-radius: var(--ux-radius);
  padding: clamp(22px, 3vw, 32px);
  box-shadow: 0 28px 70px rgba(0,8,18,.35), inset 0 1px 0 rgba(255,255,255,.04);
  position: relative;
  overflow: hidden;
}
.ux-panel-head{ margin-bottom: 18px; }
.ux-panel-head h2{
  margin: 6px 0 0;
  font-family: var(--font-display), Georgia, serif;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  color:#f7fbff;
}
.panel-kicker{
  display:inline-block; font-size:11px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color: var(--brand-hot);
}
.ux-auth-links{
  display:flex; flex-wrap:wrap; gap:14px 18px;
  margin-top:18px; justify-content:space-between;
}
.ux-auth-links a{ color: var(--brand-hot); font-weight:700; font-size:.92rem; }
.ux-submit{ margin-top: 8px; min-height: 52px; font-size: 1rem; }
.ux-legal{
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(160,200,225,.12);
  color:#8fa5b4; font-size:.86rem;
}
.ux-legal a{ color:#9ef0ea; font-weight:650; }
.ux-legal ul{ margin:8px 0 0; padding-left:1.1rem; }

/* ——— Forms ——— */
.ux-form-grid{ gap: 16px 18px; }
.ux-field{ display:grid; gap:8px; align-content:start; }
.ux-label{
  display:block; font-size:.78rem; font-weight:750;
  letter-spacing:.02em; color: var(--ux-label);
}
.ux-label i{ color: var(--brand-hot); font-style:normal; }
.ux-control .input,
.ux-field .input,
.ux-panel .input,
.ux-panel select,
.ux-panel textarea,
.commerce-shell .ux-panel .input{
  width:100%;
  min-height: 50px;
  background: var(--ux-input) !important;
  border: 1px solid var(--ux-input-border) !important;
  color: #f2f8fb !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ux-panel textarea.input{ min-height: 110px; resize: vertical; }
.ux-control .input:focus,
.ux-panel .input:focus,
.ux-panel select:focus,
.ux-panel textarea:focus{
  outline:0;
  border-color: #25e2d8 !important;
  box-shadow: 0 0 0 3px rgba(37,226,216,.16);
}
.ux-field.has-error .input{
  border-color: rgba(255,107,121,.55) !important;
}
.ux-help{ color: var(--ux-help); font-size:.8rem; line-height:1.4; }
.ux-error, .field-error{ color:#ff9ca7; font-size:.82rem; font-weight:650; }
.ux-check{
  display:flex; gap:12px; align-items:flex-start;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(160,200,225,.14);
  background: rgba(255,255,255,.03);
  cursor:pointer;
  color:#e6f2f7; font-weight:650;
}
.ux-check input{
  width:18px !important; height:18px !important; min-height:18px !important;
  margin-top:2px; accent-color: #13c6c7;
}
.ux-choice-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:10px;
}
.ux-choice{
  display:flex; gap:10px; align-items:flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(160,200,225,.16);
  background: rgba(7,27,44,.72);
  cursor:pointer;
  color:#dcecf2; font-size:.9rem; font-weight:600;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.ux-choice:hover{ border-color: rgba(37,226,216,.35); transform: translateY(-1px); }
.ux-choice:has(input:checked){
  border-color: rgba(37,226,216,.55);
  background: rgba(19,198,199,.12);
  box-shadow: 0 0 0 1px rgba(37,226,216,.2);
}
.ux-choice input{ margin-top:3px; accent-color:#13c6c7; }

/* ——— Profile ——— */
.ux-profile-hero{
  display:flex; justify-content:space-between; gap:24px; align-items:end;
  margin-bottom: 28px;
}
.ux-profile-hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.ux-profile-grid{
  display:grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); gap:22px;
}
.ux-identity-strip{
  display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:10px;
  margin: 0 0 18px;
}
.ux-identity-strip div{
  padding:14px 16px; border-radius:14px;
  background: rgba(255,255,255,.035);
  border:1px solid rgba(160,200,225,.12);
}
.ux-identity-strip span{ display:block; color:#8099aa; font-size:.75rem; margin-bottom:4px; }
.ux-identity-strip b{ color:#f4fafc; font-size:.95rem; }
.ux-callout{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  padding:16px 18px; margin-bottom:18px; border-radius:16px;
  background: rgba(255,194,74,.08); border:1px solid rgba(255,194,74,.22);
}
.ux-callout p{ margin:0; color:#f3e2b5; font-weight:650; }
.ux-callout.soft{
  background: rgba(37,226,216,.07);
  border-color: rgba(37,226,216,.2);
}
.ux-callout.soft p{ color:#c5eef0; font-weight:600; }

/* Messenger bind (replaces phone bind gate) */
.bind-messenger-panel .bind-messenger-lead{
  margin-top:-6px;
  margin-bottom:18px;
}
.bind-messenger-steps{
  margin:0 0 18px;
  padding-left:1.2em;
  color:#b7c9d5;
  display:grid;
  gap:8px;
}
.bind-messenger-status{
  margin-bottom:18px;
  display:grid;
  gap:12px;
}
.bind-messenger-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}
.bind-messenger-list li{
  display:flex;
  gap:10px;
  align-items:baseline;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(140,214,222,.18);
}
.bind-messenger-list small{ color:#8ea5b3; }
.bind-messenger-actions{ margin:4px 0 8px; }
.bind-messenger-continue{ margin-top:16px; }
.bind-messenger-hint,
.bind-messenger-footnote{
  margin:14px 0 0;
  font-size:.9rem;
}
.bind-messenger-panel .bot-qr-row{ margin-top:8px; }
.ux-side-stack{ display:grid; gap:16px; align-content:start; }
.ux-link-list{ display:grid; gap:8px; margin-top:8px; }
.ux-link-list a{
  display:block; padding:12px 14px; border-radius:12px;
  background: rgba(255,255,255,.03); border:1px solid rgba(160,200,225,.1);
  color:#d5e8f0; font-weight:650; transition: border-color .2s, background .2s;
}
.ux-link-list a:hover{ border-color: rgba(37,226,216,.35); background: rgba(19,198,199,.08); color:#fff; }

/* ——— Order ——— */
.ux-order-intro{
  display:flex; justify-content:space-between; gap:24px; align-items:end;
  margin-bottom: 28px;
}
.ux-order-steps{ display:flex; gap:8px; flex-wrap:wrap; }
.ux-step{
  display:flex; align-items:center; gap:8px;
  padding: 8px 12px; border-radius:999px;
  background: rgba(255,255,255,.04); border:1px solid rgba(160,200,225,.12);
  color:#8fa5b4; font-size:.8rem; font-weight:700;
}
.ux-step b{
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background: rgba(255,255,255,.08); font-size:.72rem;
}
.ux-step.is-active{
  color:#e8fbff; border-color: rgba(37,226,216,.35);
  background: rgba(19,198,199,.12);
}
.ux-step.is-active b{ background: linear-gradient(135deg,#25e2d8,#0cb5c2); color:#032027; }
.ux-order-layout{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(300px,360px); gap:24px; align-items:start;
}
.ux-section{ padding: 8px 0 22px; border-bottom: 1px solid rgba(160,200,225,.1); margin-bottom: 8px; }
.ux-section:last-of-type{ border-bottom:0; }
.ux-section-head{
  display:flex; gap:14px; align-items:flex-start; margin-bottom:16px;
}
.ux-section-head > span{
  font-family: var(--font-brand), sans-serif;
  font-weight:800; font-size:1.1rem; color: var(--brand-hot);
  letter-spacing: -.02em;
}
.ux-section-head h2{ margin:0; font-size:1.25rem; color:#f7fbff; }
.ux-section-head p{ margin:4px 0 0; color:#8099aa; font-size:.88rem; }
.ux-quote-card{
  position: sticky; top: 92px;
  padding: 24px;
  border-radius: var(--ux-radius);
  background: linear-gradient(160deg, rgba(10,40,58,.98), rgba(4,20,34,.99));
  border: 1px solid rgba(37,226,216,.22);
  box-shadow: 0 28px 70px rgba(0,8,18,.4);
  overflow: hidden;
}
.ux-quote-glow{
  position:absolute; inset:auto -20% 40% -20%; height:180px;
  background: radial-gradient(circle, rgba(37,226,216,.22), transparent 70%);
  pointer-events:none;
}
.ux-quote-card h3{ margin:6px 0 0; font-family: var(--font-display), Georgia, serif; font-size:1.5rem; }
.ux-quote-card .price-big{ margin: 10px 0 18px; color: var(--brand-hot); }
.ux-quote-lines{ display:grid; gap:10px; margin-bottom:18px; }
.ux-quote-lines p{
  display:flex; justify-content:space-between; gap:12px; margin:0;
  color:#8fa5b4; font-size:.9rem;
}
.ux-quote-lines b{ color:#eef7fb; }
.ux-trust-mini{
  display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:8px; margin: 16px 0;
}
.ux-trust-mini div{
  padding:10px; border-radius:12px; background: rgba(255,255,255,.04);
  border:1px solid rgba(160,200,225,.1);
}
.ux-trust-mini b{ display:block; font-size:.78rem; color:#eaf6f8; }
.ux-trust-mini small{ color:#8099aa; font-size:.7rem; }
.quote-updated .ux-quote-card .price-big{
  animation: uxPulse .45s ease;
}
@keyframes uxPulse{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.04); }
  100%{ transform: scale(1); }
}

/* ——— Service detail ——— */
.ux-service-grid{
  display:grid; grid-template-columns: 1.15fr .85fr; gap:28px; align-items:start;
}
.ux-service-desc{ color:#a8bac7; font-size:1.05rem; max-width: 54ch; }
.ux-metric-row{
  display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:10px;
  margin: 22px 0 26px;
}
.ux-metric{
  padding:16px; border-radius:16px;
  background: rgba(255,255,255,.04); border:1px solid rgba(160,200,225,.14);
}
.ux-metric b{ display:block; font-size:1.05rem; color:#f7fbff; margin-bottom:4px; }
.ux-metric span{ color:#8099aa; font-size:.78rem; }
.ux-media-frame{
  border-radius: 22px; overflow:hidden; margin-bottom:14px;
  border:1px solid rgba(160,200,225,.16);
  box-shadow: 0 24px 60px rgba(0,8,18,.3);
}
.ux-media-frame img{ width:100%; height: min(340px, 42vw); object-fit:cover; display:block; }
.ux-check-list{ list-style:none; padding:0; margin:0 0 16px; display:grid; gap:10px; }
.ux-check-list li{
  display:flex; gap:10px; color:#d5e8f0; font-weight:600; font-size:.92rem;
}
.ux-check-list li:before{
  content:"✓"; color:#25e2d8; font-weight:900;
}
.ux-extra-list{ display:grid; gap:8px; }
.ux-extra-row{
  display:flex; justify-content:space-between; gap:12px;
  padding:10px 0; border-bottom:1px solid rgba(255,255,255,.07);
  color:#c5d8e3; font-size:.9rem;
}
.ux-extra-row b{ color:#f4fafc; }

/* ——— Cards polish ——— */
.pcard{
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .25s ease;
}
.pcard:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 60px rgba(0,10,22,.35);
  border-color: rgba(37,226,216,.28);
}
.pcard-actions .btn-primary{
  background: linear-gradient(135deg, #25e2d8, #0cb5c2);
  color:#032027;
}
.pprofile-panel-inner .btn-primary{
  min-height: 50px;
}
.ux-provider-page .pprofile-hero{
  position:relative;
}
.ux-provider-page .pprofile-hero:before{
  content:""; position:absolute; inset:0 0 auto 0; height:55%;
  background: radial-gradient(ellipse 60% 80% at 70% 0%, rgba(19,198,199,.14), transparent 70%);
  pointer-events:none;
}

/* Social auth polish */
.social-auth-stack{ display:grid; gap:10px; margin-bottom: 4px; }
.social-btn{
  min-height:48px; border-radius:14px; font-weight:750;
  border:1px solid rgba(160,200,225,.18);
}
.auth-divider{
  display:flex; align-items:center; gap:12px; margin:16px 0;
  color:#7f96a7; font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700;
}
.auth-divider:before, .auth-divider:after{
  content:""; height:1px; flex:1; background: linear-gradient(90deg, transparent, rgba(160,200,225,.25), transparent);
}

/* Reveal already exists — ensure panels animate */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible{ opacity:1; transform:none; }

@media (max-width: 980px){
  .ux-auth-grid,
  .ux-profile-grid,
  .ux-order-layout,
  .ux-service-grid{ grid-template-columns: 1fr; }
  .ux-quote-card{ position:static; }
  .ux-order-intro,
  .ux-profile-hero{ flex-direction:column; align-items:flex-start; }
  .ux-identity-strip,
  .ux-metric-row,
  .ux-trust-mini{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .ux-identity-strip,
  .ux-metric-row,
  .ux-trust-mini{ grid-template-columns: 1fr; }
  .form-grid.two{ grid-template-columns: 1fr; }
  .span-2{ grid-column: auto; }
  .ux-auth{ padding-top: 36px; }
}

@media (prefers-reduced-motion: reduce){
  .reveal, .pcard, .ux-choice, .quote-updated .price-big{ transition:none !important; animation:none !important; }
}

.ux-field.is-focused .ux-label{ color: var(--brand-hot); }
.ux-field.is-filled .ux-label{ color: #b9d4df; }


/* ——— Providers catalog ——— */
.ux-providers-hero .lead{ max-width: 52ch; color:#9db0c1; }
.ux-providers-page .provider-catalog{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.ux-providers-page .kind-filter-row{
  display:flex; flex-wrap:wrap; gap:8px; margin-top: 18px;
}
.ux-providers-page .service-chip.is-active{
  border-color: rgba(37,226,216,.45);
  background: rgba(19,198,199,.14);
  color:#e8fbff;
}
.pcard-stage{
  position:relative;
}
.pcard-verify, .pprofile-avatar-check{
  box-shadow: 0 0 0 3px rgba(3,19,33,.65), 0 8px 20px rgba(19,198,199,.25);
}


/* ——— File inputs & simple forms ——— */
.ux-control input[type="file"],
.ux-field input[type="file"]{
  padding: 14px !important;
  min-height: 54px;
  color: #c5d8e3 !important;
  background: rgba(7,27,44,.85) !important;
}
.ux-simple-form .narrow{ max-width: 720px; }
.ux-simple-form .lead{ color:#9db0c1; max-width: 48ch; }
.ux-form-page .page-hero{
  background:
    radial-gradient(ellipse 55% 40% at 90% 0%, rgba(19,198,199,.12), transparent 55%),
    transparent;
}


/* Provider workspace nav & ops */
.pw-nav{
  display:grid; gap:14px;
  margin: 0 0 28px;
  padding: 18px 20px;
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(12,42,62,.96), rgba(5,22,36,.98));
  border: 1px solid rgba(120,210,220,.18);
  box-shadow: 0 18px 50px rgba(0,8,18,.28);
}
.pw-nav-kicker{
  display:block; font-size:11px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color: var(--brand-hot);
}
.pw-nav-brand strong{ color:#f7fbff; font-size:1.05rem; }
.pw-nav-links{ display:flex; flex-wrap:wrap; gap:8px; }
.pw-link{
  display:inline-flex; align-items:center; gap:6px;
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid rgba(160,200,225,.14);
  background: rgba(255,255,255,.03);
  color:#c9dbe6; font-weight:700; font-size:.86rem;
  transition: border-color .2s, background .2s, color .2s;
}
.pw-link:hover{ border-color: rgba(37,226,216,.35); color:#fff; }
.pw-link.is-active{
  border-color: rgba(37,226,216,.5);
  background: rgba(19,198,199,.14);
  color:#e8fbff;
}
.pw-stat-row{
  display:grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
  gap:12px; margin-bottom: 22px;
}
.pw-stat{
  padding:16px; border-radius:16px;
  background: rgba(255,255,255,.04); border:1px solid rgba(160,200,225,.14);
}
.pw-stat b{ display:block; font-size:1.35rem; color:#f7fbff; }
.pw-stat span{ color:#8099aa; font-size:.78rem; }
.pw-board{ display:grid; gap:16px; }
.pw-lane{
  padding:16px; border-radius:18px;
  background: rgba(7,27,44,.55); border:1px solid rgba(160,200,225,.12);
}
.pw-lane h3{ margin:0 0 12px; font-size:1rem; color:#eaf6f8; }
.pw-job{
  display:grid; gap:6px; padding:12px 14px; margin-bottom:8px;
  border-radius:14px; background: rgba(255,255,255,.03);
  border:1px solid rgba(160,200,225,.1); color:#d5e8f0;
}
.pw-job a{ color:#f7fbff; font-weight:750; }
.pw-job small{ color:#8099aa; }
.order-checklist li.is-done span{ opacity:.55; text-decoration: line-through; }
.order-ops-panel h3{ margin: 12px 0 8px; font-size:1rem; }
@media (max-width:720px){
  .pw-nav{ padding:14px; }
}