/* ============================================================
   PAY66 Design System v1.0 · Utilities
   工具类：间距、排版、颜色、显示等
   依赖：pay66-core.css（CSS变量已定义）
   ============================================================ */

/* ---- Display ---- */
.p66-hidden{display:none !important}
.p66-block{display:block}
.p66-inline{display:inline}
.p66-inline-flex{display:inline-flex}
.p66-flex{display:flex}

/* ---- Text alignment ---- */
.p66-text-left{text-align:left}
.p66-text-center{text-align:center}
.p66-text-right{text-align:right}

/* ---- Text size ---- */
.p66-text-xs{font-size:var(--p66-text-xs)}
.p66-text-sm{font-size:var(--p66-text-sm)}
.p66-text-base{font-size:var(--p66-text-base)}
.p66-text-md{font-size:var(--p66-text-md)}
.p66-text-lg{font-size:var(--p66-text-lg)}
.p66-text-xl{font-size:var(--p66-text-xl)}
.p66-text-2xl{font-size:var(--p66-text-2xl)}
.p66-text-3xl{font-size:var(--p66-text-3xl)}

/* ---- Text weight ---- */
.p66-font-normal{font-weight:var(--p66-font-normal)}
.p66-font-medium{font-weight:var(--p66-font-medium)}
.p66-font-semibold{font-weight:var(--p66-font-semibold)}
.p66-font-bold{font-weight:var(--p66-font-bold)}

/* ---- Text color ---- */
.p66-text-primary{color:var(--p66-text)}
.p66-text-secondary{color:var(--p66-text-secondary)}
.p66-text-muted{color:var(--p66-text-muted)}
.p66-text-navy{color:var(--p66-navy)}
.p66-text-gold{color:var(--p66-gold)}
.p66-text-green{color:var(--p66-green)}
.p66-text-red{color:var(--p66-red)}
.p66-text-orange{color:var(--p66-orange)}
.p66-text-blue{color:var(--p66-blue)}

/* ---- Text transform ---- */
.p66-uppercase{text-transform:uppercase;letter-spacing:0.04em}
.p66-mono{font-family:var(--p66-font-mono)}

/* ---- Margin ---- */
.p66-m-0{margin:0}
.p66-mt-1{margin-top:var(--p66-space-xs)}
.p66-mt-2{margin-top:var(--p66-space-sm)}
.p66-mt-3{margin-top:var(--p66-space-md)}
.p66-mt-4{margin-top:var(--p66-space-lg)}
.p66-mt-5{margin-top:var(--p66-space-xl)}
.p66-mt-6{margin-top:var(--p66-space-2xl)}
.p66-mt-8{margin-top:var(--p66-space-3xl)}
.p66-mt-10{margin-top:var(--p66-space-4xl)}
.p66-mt-12{margin-top:var(--p66-space-5xl)}
.p66-mb-1{margin-bottom:var(--p66-space-xs)}
.p66-mb-2{margin-bottom:var(--p66-space-sm)}
.p66-mb-3{margin-bottom:var(--p66-space-md)}
.p66-mb-4{margin-bottom:var(--p66-space-lg)}
.p66-mb-5{margin-bottom:var(--p66-space-xl)}
.p66-mb-6{margin-bottom:var(--p66-space-2xl)}
.p66-mb-8{margin-bottom:var(--p66-space-3xl)}
.p66-mb-10{margin-bottom:var(--p66-space-4xl)}
.p66-ml-auto{margin-left:auto}
.p66-mr-auto{margin-right:auto}

/* ---- Padding ---- */
.p66-p-0{padding:0}
.p66-p-2{padding:var(--p66-space-sm)}
.p66-p-3{padding:var(--p66-space-md)}
.p66-p-4{padding:var(--p66-space-lg)}
.p66-p-5{padding:var(--p66-space-xl)}
.p66-p-6{padding:var(--p66-space-2xl)}
.p66-p-8{padding:var(--p66-space-3xl)}
.p66-px-4{padding-left:var(--p66-space-lg);padding-right:var(--p66-space-lg)}
.p66-px-6{padding-left:var(--p66-space-2xl);padding-right:var(--p66-space-2xl)}
.p66-py-2{padding-top:var(--p66-space-sm);padding-bottom:var(--p66-space-sm)}
.p66-py-3{padding-top:var(--p66-space-md);padding-bottom:var(--p66-space-md)}
.p66-py-4{padding-top:var(--p66-space-lg);padding-bottom:var(--p66-space-lg)}
.p66-py-6{padding-top:var(--p66-space-2xl);padding-bottom:var(--p66-space-2xl)}
.p66-py-12{padding-top:var(--p66-space-5xl);padding-bottom:var(--p66-space-5xl)}
.p66-pt-6{padding-top:var(--p66-space-2xl)}
.p66-pt-8{padding-top:var(--p66-space-3xl)}
.p66-pb-6{padding-bottom:var(--p66-space-2xl)}
.p66-pb-8{padding-bottom:var(--p66-space-3xl)}

/* ---- Width ---- */
.p66-w-full{width:100%}
.p66-w-auto{width:auto}
.p66-max-w-sm{max-width:480px}
.p66-max-w-md{max-width:640px}
.p66-max-w-lg{max-width:880px}
.p66-max-w-xl{max-width:1280px}

/* ---- Height ---- */
.p66-h-full{height:100%}

/* ---- Flex & Grid ---- */
.p66-flex-col{flex-direction:column}
.p66-flex-wrap{flex-wrap:wrap}
.p66-flex-1{flex:1}
.p66-flex-shrink-0{flex-shrink:0}
.p66-items-start{align-items:flex-start}
.p66-items-center{align-items:center}
.p66-items-end{align-items:flex-end}
.p66-justify-start{justify-content:flex-start}
.p66-justify-center{justify-content:center}
.p66-justify-end{justify-content:flex-end}
.p66-justify-between{justify-content:space-between}
.p66-gap-1{gap:var(--p66-space-xs)}
.p66-gap-2{gap:var(--p66-space-sm)}
.p66-gap-3{gap:var(--p66-space-md)}
.p66-gap-4{gap:var(--p66-space-lg)}
.p66-gap-5{gap:var(--p66-space-xl)}
.p66-gap-6{gap:var(--p66-space-2xl)}
.p66-gap-8{gap:var(--p66-space-3xl)}
.p66-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--p66-space-2xl)}
.p66-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--p66-space-2xl)}
.p66-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--p66-space-2xl)}
@media (max-width:1024px){
    .p66-grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
    .p66-grid-2,.p66-grid-3,.p66-grid-4{grid-template-columns:1fr}
}

/* ---- Border ---- */
.p66-border{border:1px solid var(--p66-border)}
.p66-border-t{border-top:1px solid var(--p66-border)}
.p66-border-b{border-bottom:1px solid var(--p66-border)}
.p66-border-light{border-color:var(--p66-border-light)}
.p66-rounded-sm{border-radius:var(--p66-radius-sm)}
.p66-rounded-md{border-radius:var(--p66-radius-md)}
.p66-rounded-lg{border-radius:var(--p66-radius-lg)}

/* ---- Shadow ---- */
.p66-shadow-sm{box-shadow:var(--p66-shadow-sm)}
.p66-shadow-md{box-shadow:var(--p66-shadow-md)}
.p66-shadow-lg{box-shadow:var(--p66-shadow-lg)}

/* ---- Background ---- */
.p66-bg-surface{background:var(--p66-bg-surface)}
.p66-bg-soft{background:var(--p66-bg)}
.p66-bg-hover{background:var(--p66-bg-hover)}
.p66-bg-navy{background:var(--p66-navy)}

/* ---- Overflow ---- */
.p66-overflow-hidden{overflow:hidden}
.p66-overflow-auto{overflow:auto}
.p66-truncate{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* ---- Position ---- */
.p66-relative{position:relative}
.p66-absolute{position:absolute}
.p66-fixed{position:fixed}
.p66-inset-0{inset:0}

/* ---- Container ---- */
.p66-container{
    max-width:1280px;
    margin-left:auto;
    margin-right:auto;
    padding-left:var(--p66-space-2xl);
    padding-right:var(--p66-space-2xl);
}
.p66-container-sm{max-width:960px}
.p66-container-narrow{max-width:720px}

/* ---- Spacing section ---- */
.p66-section{
    padding-top:var(--p66-space-6xl);
    padding-bottom:var(--p66-space-6xl);
}
.p66-section-sm{
    padding-top:var(--p66-space-4xl);
    padding-bottom:var(--p66-space-4xl);
}

/* ---- Responsive ---- */
@media (max-width:768px){
    .p66-hide-mobile{display:none !important}
    .p66-section{padding-top:var(--p66-space-4xl);padding-bottom:var(--p66-space-4xl)}
}
@media (min-width:769px){
    .p66-show-mobile{display:none !important}
}