/* One-Home Reference UI 6.2.0 — feature-card clarity and ticket workspace. */

.flagshipV620 .refFeatureRow{
  align-items:stretch!important;
  grid-auto-rows:1fr!important;
}
.flagshipV620 .refFeature{
  --card-accent:#22d5ff;
  position:relative!important;
  isolation:isolate!important;
  display:block!important;
  min-height:252px!important;
  padding:20px 20px 19px!important;
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,var(--card-accent) 34%,transparent)!important;
  background:
    radial-gradient(circle at 92% 82%,color-mix(in srgb,var(--card-accent) 24%,transparent),transparent 48%),
    linear-gradient(150deg,rgba(6,42,76,.98),rgba(3,20,43,.98))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.055),0 18px 36px rgba(0,4,18,.22)!important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important;
}
.flagshipV620 .refFeature::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(120deg,rgba(12,73,123,.5),transparent 58%);
}
.flagshipV620 .refFeature::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  z-index:4;
  background:linear-gradient(90deg,var(--card-accent),transparent 78%);
  box-shadow:0 0 20px color-mix(in srgb,var(--card-accent) 70%,transparent);
}
.flagshipV620 .refFeature:hover,
.flagshipV620 .refFeature:focus-visible{
  transform:translateY(-3px)!important;
  border-color:color-mix(in srgb,var(--card-accent) 62%,transparent)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 24px 46px rgba(0,4,18,.34)!important;
}
.flagshipV620 .refFeature.refF2{--card-accent:#b76cff}
.flagshipV620 .refFeature.refF3{--card-accent:#27e6b4}
.flagshipV620 .refFeature.refF4{--card-accent:#39a9ff}
.flagshipV620 .refFeature.refF5{--card-accent:#b86cff}
.flagshipV620 .refFeature>b{
  position:relative!important;
  z-index:3!important;
  display:grid!important;
  width:44px!important;
  height:44px!important;
  place-items:center!important;
  border:1px solid color-mix(in srgb,var(--card-accent) 30%,transparent)!important;
  background:color-mix(in srgb,var(--card-accent) 17%,rgba(3,25,49,.9))!important;
  color:var(--card-accent)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 10px 24px rgba(0,0,0,.18)!important;
}
.flagshipV620 .refFeature>b svg{width:23px!important;height:23px!important}
.flagshipV620 .refFeature>div{
  position:relative!important;
  z-index:3!important;
  display:flex!important;
  width:75%!important;
  min-height:166px!important;
  flex-direction:column!important;
}
.flagshipV620 .refFeature h3{
  margin:16px 0 8px!important;
  font-size:17px!important;
  line-height:1.18!important;
  letter-spacing:-.25px!important;
}
.flagshipV620 .refFeature p{
  margin:0!important;
  font-size:11.5px!important;
  line-height:1.58!important;
  color:#c5dceb!important;
}
.flagshipV620 .refFeature span{
  margin-top:auto!important;
  padding-top:13px!important;
  color:var(--card-accent)!important;
  font-size:11px!important;
  font-weight:850!important;
}
.flagshipV620 .refFeatureArt{
  position:absolute!important;
  z-index:1!important;
  right:-5%!important;
  bottom:-5%!important;
  width:58%!important;
  height:66%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:right bottom!important;
  opacity:.82!important;
  filter:saturate(1.08) drop-shadow(0 18px 30px rgba(0,0,0,.28))!important;
}

/* Ticket workspace deliberately reuses the proven customer-portal shell. */
.clientPortalV620 .clientTicketLayout{display:grid;grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr);gap:14px;align-items:start}
.clientPortalV620 .clientTicketComposer,.clientPortalV620 .clientTicketQueue,.clientPortalV620 .clientTicketDetail{border:1px solid rgba(49,157,244,.2);border-radius:16px;background:linear-gradient(145deg,rgba(5,35,66,.94),rgba(3,22,46,.97));box-shadow:inset 0 1px rgba(255,255,255,.04)}
.clientPortalV620 .clientTicketComposer,.clientPortalV620 .clientTicketQueue{padding:20px}
.clientPortalV620 .clientTicketComposer h3,.clientPortalV620 .clientTicketQueue h3,.clientPortalV620 .clientTicketDetail h3{margin:0;font-size:20px;letter-spacing:-.5px}
.clientPortalV620 .clientTicketComposer>p,.clientPortalV620 .clientTicketQueue>p{margin:6px 0 18px;color:#82a6c1;font-size:12px;line-height:1.55}
.clientPortalV620 .clientTicketForm{display:grid;gap:11px}
.clientPortalV620 .clientTicketForm label{display:grid;gap:6px;color:#d9edf9;font-size:11px;font-weight:750}
.clientPortalV620 .clientTicketForm input,.clientPortalV620 .clientTicketForm select,.clientPortalV620 .clientTicketForm textarea,.clientPortalV620 .clientTicketReply textarea{width:100%;min-width:0;border:1px solid rgba(52,153,230,.24);border-radius:11px;background:#031a35;color:#f4fbff;padding:11px 12px;outline:none}
.clientPortalV620 .clientTicketForm textarea,.clientPortalV620 .clientTicketReply textarea{min-height:116px;resize:vertical}
.clientPortalV620 .clientTicketForm input:focus,.clientPortalV620 .clientTicketForm select:focus,.clientPortalV620 .clientTicketForm textarea:focus,.clientPortalV620 .clientTicketReply textarea:focus{border-color:#29d9ff;box-shadow:0 0 0 3px rgba(41,217,255,.1)}
.clientPortalV620 .clientTicketList{display:grid;gap:9px}
.clientPortalV620 .clientTicketItem{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:100%;padding:13px;text-align:left;border:1px solid rgba(48,144,218,.16);border-radius:12px;background:rgba(5,29,57,.76);color:#edf8ff;cursor:pointer}
.clientPortalV620 .clientTicketItem:hover,.clientPortalV620 .clientTicketItem.active{border-color:rgba(44,215,255,.46);background:rgba(7,44,81,.9)}
.clientPortalV620 .clientTicketItem strong,.clientPortalV620 .clientTicketItem small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clientPortalV620 .clientTicketItem small{margin-top:4px;color:#7fa5c0;font-size:10px}
.clientPortalV620 .clientTicketItem em{font-style:normal;color:#64daf8;font-size:9px;font-weight:850;white-space:nowrap}
.clientPortalV620 .clientTicketDetail{grid-column:1/-1;overflow:hidden}
.clientPortalV620 .clientTicketHead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:19px 20px;border-bottom:1px solid rgba(48,144,218,.14)}
.clientPortalV620 .clientTicketHead small{display:block;color:#59d9fb;font-size:9px;font-weight:850;letter-spacing:.12em;margin-bottom:7px}
.clientPortalV620 .clientTicketHead>div:last-child{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.clientPortalV620 .clientTicketMessages{display:grid;gap:10px;padding:18px 20px;max-height:480px;overflow:auto}
.clientPortalV620 .clientTicketMessage{max-width:78%;padding:13px 14px;border:1px solid rgba(48,144,218,.16);border-radius:13px;background:#061c36}
.clientPortalV620 .clientTicketMessage.mine{justify-self:end;background:linear-gradient(145deg,rgba(5,73,110,.9),rgba(5,42,79,.94));border-color:rgba(42,211,251,.3)}
.clientPortalV620 .clientTicketMessage.admin{justify-self:start}
.clientPortalV620 .clientTicketMessage header{display:flex;justify-content:space-between;gap:14px;margin-bottom:6px;font-size:9px;color:#78a7c3}
.clientPortalV620 .clientTicketMessage p{margin:0;color:#d9eaf5;font-size:12px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.clientPortalV620 .clientTicketReply{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:0 20px 20px;align-items:end}
.clientPortalV620 .clientTicketReply textarea{min-height:76px}
.clientPortalV620 .clientTicketReply button{height:44px}

@media(max-width:1180px){
  .flagshipV620 .refFeatureRow{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .flagshipV620 .refFeature:nth-child(n){grid-column:auto!important;min-height:238px!important}
  .flagshipV620 .refFeature:last-child{grid-column:1/-1!important}
  .flagshipV620 .refFeature:last-child>div{width:50%!important}
  .flagshipV620 .refFeature:last-child .refFeatureArt{width:42%!important}
}
@media(max-width:900px){.clientPortalV620 .clientTicketLayout{grid-template-columns:1fr}.clientPortalV620 .clientTicketDetail{grid-column:auto}}
@media(max-width:700px){
  .flagshipV620 .refFeatureRow{grid-template-columns:1fr!important;gap:10px!important}
  .flagshipV620 .refFeature:nth-child(n){grid-column:auto!important;min-height:220px!important;padding:18px!important}
  .flagshipV620 .refFeature>div,.flagshipV620 .refFeature:last-child>div{width:72%!important;min-height:144px!important}
  .flagshipV620 .refFeatureArt,.flagshipV620 .refFeature:last-child .refFeatureArt{width:51%!important;height:61%!important;right:-7%!important}
  .clientPortalV620 .clientTicketComposer,.clientPortalV620 .clientTicketQueue{padding:16px}
  .clientPortalV620 .clientTicketHead{display:grid;padding:16px}
  .clientPortalV620 .clientTicketHead>div:last-child{justify-content:flex-start}
  .clientPortalV620 .clientTicketMessages{padding:14px 16px;max-height:none}
  .clientPortalV620 .clientTicketMessage{max-width:92%}
  .clientPortalV620 .clientTicketReply{grid-template-columns:1fr;padding:0 16px 16px}
  .clientPortalV620 .clientTicketReply button{width:100%}
}
@media(max-width:430px){
  .flagshipV620 .refFeature>div,.flagshipV620 .refFeature:last-child>div{width:78%!important}
  .flagshipV620 .refFeature p{font-size:11px!important}
  .clientPortalV620 .clientTicketItem{grid-template-columns:1fr}
}