.qy-hero, .qy-hero * ,
.qy-card, .qy-card * ,
.qy-alert, .qy-alert * ,
.qy-form, .qy-form * { box-sizing:border-box; }
:root{ --qy-fallback-ac:#6a7eff; }
.qp-wrap{
--qy-ac:   var(--qt-buy-accent, var(--accent, var(--qy-fallback-ac)));
--qy-soft: var(--qt-buy-accent-soft, rgba(99,102,241,.18));
--qy-ink:#0f172a;
--qy-muted:#475569;
--qy-radius: 20px;
--qy-field-radius: 13px;
--qy-pad: 14px;
--qy-gap: 9px;
width:100%;
max-width: 760px;
margin-left:auto;
margin-right:auto;
padding-left: 14px;
padding-right: 14px;
}
.qy-hero{
position:relative;
margin: 0 0 10px;
border-radius: var(--qy-radius);
overflow:hidden;
background:
radial-gradient(900px 320px at 12% 40%, color-mix(in srgb, var(--qy-ac) 24%, transparent), transparent 72%),
radial-gradient(900px 320px at 88% 60%, color-mix(in srgb, var(--qy-ac) 20%, transparent), transparent 72%),
linear-gradient(90deg,
color-mix(in srgb, var(--qy-ac) 22%, #ffffff) 0%,
#ffffff 20%,
#ffffff 80%,
color-mix(in srgb, var(--qy-ac) 22%, #ffffff) 100%
);
border:1px solid color-mix(in srgb, var(--qy-ac) 18%, rgba(15,18,36,.06));
box-shadow:
0 14px 34px rgba(15,18,36,.10),
0 0 0 1px rgba(15,18,36,.03);
}
.qy-hero::before{
content:"";
position:absolute;
left:0; right:0; top:0;
height:3px;
background:linear-gradient(90deg,
rgba(255,255,255,0) 0%,
var(--qy-ac) 18%,
var(--qy-ac) 82%,
rgba(255,255,255,0) 100%);
opacity:.90;
pointer-events:none;
}
.qy-hero-inner{
position:relative;
padding: 12px 14px;
}
.qy-hero-inner h1{
margin:0 0 4px;
font: inherit;
font-size: clamp(1.05rem, 1.00rem + .35vw, 1.35rem);
font-weight: 900;
letter-spacing: -.01em;
color: var(--qy-ink);
display:flex;
align-items:center;
gap:9px;
}
.qy-hero-inner h1 i{
width:34px;
height:34px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
background: color-mix(in srgb, var(--qy-ac) 14%, rgba(255,255,255,.92));
border: 1px solid color-mix(in srgb, var(--qy-ac) 22%, rgba(148,163,184,.22));
color: color-mix(in srgb, var(--qy-ac) 76%, #111827);
}
.qy-hero-inner p{
margin:0;
max-width: 62ch;
font-size: .90rem;
line-height: 1.5;
color: color-mix(in srgb, var(--qy-ac) 16%, var(--qy-muted));
}
.qy-alert{
margin: 8px 0 10px;
padding: 9px 10px;
border-radius: 13px;
border:1px solid rgba(148,163,184,.35);
background: rgba(255,255,255,.96);
box-shadow: 0 10px 20px rgba(15,18,36,.06);
display:flex;
align-items:flex-start;
gap:10px;
font-size: .90rem;
line-height:1.45;
}
.qy-alert i{
margin-top:2px;
width:20px;
height:20px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
}
.qy-alert--success{
border-color: color-mix(in srgb, var(--qy-ac) 22%, rgba(16,185,129,.28));
background: linear-gradient(135deg, rgba(255,255,255,.98), color-mix(in srgb, var(--qy-ac) 10%, rgba(16,185,129,.10)));
}
.qy-alert--success i{ background: rgba(16,185,129,.14); color: #047857; }
.qy-alert--error{
border-color: rgba(239,68,68,.28);
background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,68,68,.08));
}
.qy-alert--error i{ background: rgba(239,68,68,.12); color:#b91c1c; }
.qy-card{
position:relative;
border-radius: var(--qy-radius);
padding: var(--qy-pad);
background:
radial-gradient(circle at 0 0, rgba(255,255,255,.96), transparent 55%),
radial-gradient(circle at 100% 0, rgba(255,255,255,.99), transparent 55%),
rgba(255,255,255,.975);
border:1px solid color-mix(in srgb, var(--qy-ac) 18%, rgba(15,18,36,.06));
box-shadow:
0 14px 34px rgba(15,18,36,.10),
0 0 0 1px rgba(15,18,36,.03);
overflow:hidden;
}
.qy-card::before{
content:"";
position:absolute;
left:0; right:0; top:0;
height:3px;
background:linear-gradient(90deg,
rgba(255,255,255,0) 0%,
var(--qy-ac) 18%,
var(--qy-ac) 82%,
rgba(255,255,255,0) 100%);
opacity:.90;
pointer-events:none;
}
.qy-card h2{
margin:0 0 6px;
font-size: 1.00rem;
font-weight: 900;
color: var(--qy-ink);
letter-spacing: -.01em;
}
.qy-note{
margin:0 0 10px;
font-size: .88rem;
color: var(--qy-muted);
line-height:1.45;
}
.qy-note strong{ color: color-mix(in srgb, var(--qy-ac) 70%, #111827); }
.qy-note__muted{ color: rgba(71,85,105,.9); margin-left:6px; }
.qy-form{
display:grid;
grid-template-columns: 1fr;
gap: var(--qy-gap);
}
.qy-form label{
font-size: .84rem;
font-weight: 800;
color:#111827;
margin-top: 1px;
}
.qy-form input[type="text"],
.qy-form input[type="email"],
.qy-form textarea{
width:100%;
padding: 10px 11px;
border-radius: var(--qy-field-radius);
border: 1px solid rgba(148,163,184,.36);
background: rgba(255,255,255,.96);
color:#0b1220;
font: inherit;
outline: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.qy-form textarea{
resize: vertical;
min-height: 96px;
max-height: 170px;
line-height: 1.5;
}
.qy-form input::placeholder,
.qy-form textarea::placeholder{ color: rgba(100,116,139,.9); }
.qy-form input:focus,
.qy-form textarea:focus{
border-color: color-mix(in srgb, var(--qy-ac) 40%, rgba(148,163,184,.34));
box-shadow:
0 0 0 4px color-mix(in srgb, var(--qy-ac) 12%, transparent),
inset 0 1px 0 rgba(255,255,255,.65);
}
.qy-rating{
display:flex;
flex-direction: row-reverse;
align-items:center;
gap: 6px;
width: 100%;
justify-content: flex-start;
padding: 9px 10px;
border-radius: var(--qy-field-radius);
border: 1px solid rgba(148,163,184,.32);
background: rgba(255,255,255,.96);
box-shadow: 0 10px 18px rgba(15,18,36,.04);
}
.qy-rating input{
position:absolute;
opacity:0;
pointer-events:none;
}
.qy-rating label{
cursor:pointer;
line-height:1;
margin:0;
padding: 4px 2px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius: 10px;
transition: transform .14s ease, filter .14s ease;
}
.qy-rating label i{
font-size: 1.00rem;
color: #d1d5db;
filter: drop-shadow(0 1px 0 rgba(0,0,0,.04));
}
.qy-rating label:hover i,
.qy-rating label:hover ~ label i{ color:#facc15; }
.qy-rating input:checked ~ label i{ color:#facc15; }
.qy-rating input:focus-visible + label{
box-shadow: 0 0 0 4px color-mix(in srgb, var(--qy-ac) 12%, transparent);
}
.qy-btn{
margin-top: 2px;
width: 100%;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding: 11px 12px;
border-radius: var(--qy-field-radius);
border: 1px solid color-mix(in srgb, var(--qy-ac) 28%, rgba(15,18,36,.10));
background:
linear-gradient(180deg,
color-mix(in srgb, var(--qy-ac) 92%, #ffffff) 0%,
var(--qy-ac) 100%);
color:#fff;
font-weight: 900;
letter-spacing: .01em;
cursor:pointer;
box-shadow:
0 16px 30px rgba(15,18,36,.10),
0 0 0 4px color-mix(in srgb, var(--qy-ac) 9%, transparent);
transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
user-select:none;
text-decoration:none;
}
.qy-btn:hover{
transform: translateY(-1px);
filter: saturate(1.06) contrast(1.02);
box-shadow:
0 20px 36px rgba(15,18,36,.14),
0 0 0 4px color-mix(in srgb, var(--qy-ac) 11%, transparent);
}
.qy-btn:active{ transform: translateY(0); }
.qy-btn:focus-visible{
outline:none;
box-shadow:
0 0 0 5px color-mix(in srgb, var(--qy-ac) 14%, transparent),
0 16px 30px rgba(15,18,36,.12);
}
.qy-legal{
margin: 6px 0 0;
font-size: .80rem;
line-height:1.45;
color: rgba(71,85,105,.95);
}
.qy-actions{
margin-top: 10px;
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 9px;
}
.qy-act{
display:flex;
align-items:center;
gap:10px;
padding: 9px 10px;
border-radius: 13px;
background: rgba(255,255,255,.96);
border: 1px solid rgba(148,163,184,.32);
box-shadow: 0 10px 18px rgba(15,18,36,.04);
text-decoration:none;
color:#0b1220;
transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.qy-act i{
width:36px;
height:36px;
border-radius: 12px;
display:inline-flex;
align-items:center;
justify-content:center;
background: color-mix(in srgb, var(--qy-ac) 12%, rgba(255,255,255,.92));
border: 1px solid color-mix(in srgb, var(--qy-ac) 20%, rgba(148,163,184,.22));
color: color-mix(in srgb, var(--qy-ac) 75%, #111827);
flex:0 0 auto;
}
.qy-act span{
display:block;
font-weight: 900;
font-size: .88rem;
line-height:1.15;
}
.qy-act small{
display:block;
font-size: .78rem;
color: rgba(71,85,105,.95);
}
.qy-act:hover{
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--qy-ac) 24%, rgba(148,163,184,.28));
box-shadow: 0 16px 28px rgba(15,18,36,.08);
}
.qy-act:focus-visible{
outline:none;
box-shadow: 0 0 0 5px color-mix(in srgb, var(--qy-ac) 12%, transparent);
}
.qy-chip{
display:inline-flex;
align-items:center;
gap:8px;
padding:6px 10px;
border-radius:999px;
background: color-mix(in srgb, var(--qy-ac) 12%, rgba(255,255,255,.94));
border:1px solid color-mix(in srgb, var(--qy-ac) 22%, rgba(148,163,184,.22));
font-weight:900;
color: color-mix(in srgb, var(--qy-ac) 78%, #111827);
margin-right:8px;
}
.qy-chip i{ opacity:.9; }
@media (max-width:640px){
.qp-wrap{
max-width: 520px;
padding-left: 12px;
padding-right: 12px;
--qy-radius: 18px;
--qy-field-radius: 13px;
--qy-pad: 12px;
--qy-gap: 8px;
}
.qy-hero-inner{ padding: 11px 12px; }
.qy-hero-inner h1{ font-size: 1.10rem; gap:8px; }
.qy-hero-inner h1 i{ width:32px; height:32px; }
.qy-hero-inner p{ font-size:.88rem; }
.qy-form textarea{
min-height: 88px;
max-height: 150px;
}
.qy-actions{ grid-template-columns: 1fr; }
.qy-legal{ font-size: .78rem; }
}