/* ============================================================
   Ry.hk unified interface layer
   Loaded after the page-specific storefront styles. It settles the
   shared geometry and typography without taking over bespoke heroes.
   ============================================================ */
:root{
    --ry-brand:#4D33DE;
    --ry-brand-dark:#3920C5;
    --ry-brand-deep:#241478;
    --ry-brand-soft:#F3F0FF;
    --ry-surface:#FFFFFF;
    --ry-canvas:#F7F6FC;
    --ry-line:#E7E4F2;
    --ry-text:#16142B;
    --ry-muted:#6B6785;
    --ry-card-radius:14px;
    --ry-control-radius:10px;
    --ry-pill-radius:999px;
    --ry-card-shadow:0 1px 2px rgba(22,20,43,.05),0 8px 26px rgba(22,20,43,.045);
    --ry-focus:0 0 0 4px rgba(77,51,222,.16);
}
:root[data-theme="dark"]{
    --ry-surface:#171532;
    --ry-canvas:#0F0D26;
    --ry-line:#302D54;
    --ry-text:#C9CBE4;
    --ry-muted:#9A9DC4;
    --ry-card-shadow:0 1px 2px rgba(0,0,0,.38),0 10px 30px rgba(0,0,0,.25);
}
html{text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h,73px) + 18px)}
body{color:var(--ry-text);line-height:1.62;text-rendering:optimizeLegibility}
body :is(p,li){text-wrap:pretty}
body :is(h1,h2,h3,h4){text-wrap:balance;letter-spacing:-.025em}
body :is(a,button,input,select,textarea,summary):focus-visible{outline:none;box-shadow:var(--ry-focus)}
body :is(.container,.dd-container,.dx-wrap){width:min(100%,1240px)}

/* Shared control geometry. Page-specific colours and states still apply. */
html body :is(.btn,.dd-btn,.pn-btn,.dx-btn){height:44px;min-height:44px;border-radius:var(--ry-control-radius)!important;font-weight:700;letter-spacing:-.01em}
html body :is(.dx-form>button,.dd-search-btn,.sg-search-submit,.form-actions .btn,.pn-card-actions .btn){border-radius:var(--ry-control-radius)!important}
html body .dd-account-main .btn-sm{height:38px;min-height:38px;padding-inline:14px;font-size:13px;border-radius:9px!important}
html body .dd-account-main .btn-xs{height:32px;min-height:32px;padding-inline:10px;font-size:12px;border-radius:8px!important}
html body :is(.form-control,.pn-input,.dd-input,.dx-filter,.dx-formblock input,.dx-formblock select){border-radius:var(--ry-control-radius);border-color:var(--ry-line)}
html body :is(.form-control,.pn-input,.dd-input):focus{border-color:var(--ry-brand);box-shadow:var(--ry-focus)}
html body :is(.pn-card,.dd-card){border-color:var(--ry-line);border-radius:var(--ry-card-radius);box-shadow:var(--ry-card-shadow)}
html body :is(.pn-card-header,.dd-card-head){border-color:var(--ry-line);padding:18px 22px}
html body :is(.pn-card-body,.dd-card-body){padding:24px}
html body :is(.pn-table,.dd-table) th{border-color:var(--ry-line)}
html body :is(.pn-table,.dd-table) td{border-color:color-mix(in srgb,var(--ry-line) 78%,transparent)}

/* Account area: legacy page-specific card classes now share one surface. */
.dd-account-main :is(.page-header,.pn-page-header){align-items:flex-end;gap:18px;margin-bottom:26px}
.dd-account-main :is(.page-header,.pn-page-header) h1,
.dd-account-main .page-header>div>h1,
.dd-account-main .pn-page-title{font-size:28px;line-height:1.22;font-weight:800;color:var(--dd-ink);letter-spacing:-.025em}
.dd-account-main .page-header>div:first-child{min-width:0}
.dd-account-main .page-header>div:last-child{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dd-account-main :is(.bk-card,.cr-card,.ct-card,.db-card,.dz-card,.em-card,.fe-card,.ft-card,.ra-card,.sd-card){border:1px solid var(--dd-line);border-radius:var(--ry-card-radius);background:var(--dd-card);box-shadow:none}
.dd-account-main :is(.bk-card,.cr-card,.ct-card,.db-card,.dz-card,.em-card,.fe-card,.ft-card,.ra-card,.sd-card)>header,
.dd-account-main :is(.bk-card,.cr-card,.ct-card,.db-card,.dz-card,.em-card,.fe-card,.ft-card,.ra-card,.sd-card)>:first-child{border-top-left-radius:var(--ry-card-radius);border-top-right-radius:var(--ry-card-radius)}
.dd-account-main :is(.text-muted,.dd-dim){color:var(--dd-muted)}
.dd-account-main .badge{border-radius:var(--ry-pill-radius);font-weight:700}

/* Consistent public-page section rhythm and surface details. */
body:not(.page-ownhero) :is(.dx-sec,.dd-section){padding-top:clamp(44px,6vw,72px);padding-bottom:clamp(44px,6vw,72px)}
body :is(.dx-item,.tool-card,.market-entry,.mk-action-card){border-color:var(--ry-line)}
body:not(.page-ownhero) :is(.dx-item,.tool-card,.market-entry,.mk-action-card){border-radius:var(--ry-card-radius)}
body :is(.dx-head h2,.dx-tablebar h2){letter-spacing:-.03em}
body :is(button,summary){-webkit-tap-highlight-color:transparent}
body .dx-scroll,body .dd-table-wrap{overscroll-behavior-inline:contain}


@media(max-width:900px){
    html body :is(.pn-card-body,.dd-card-body){padding:20px}
    .dd-account-main :is(.page-header,.pn-page-header) h1,
    .dd-account-main .page-header>div>h1,
    .dd-account-main .pn-page-title{font-size:25px}
}
@media(max-width:600px){
    html body :is(.btn,.dd-btn,.pn-btn,.dx-btn){height:42px;min-height:42px}
    html body .dd-account-main .btn-sm{height:36px;min-height:36px}
    html body .dd-account-main .btn-xs{height:32px;min-height:32px}
    html body :is(.pn-card-header,.dd-card-head){padding:15px 17px}
    html body :is(.pn-card-body,.dd-card-body){padding:17px}
    .dd-account-main :is(.page-header,.pn-page-header){align-items:flex-start;margin-bottom:20px}
    .dd-account-main :is(.page-header,.pn-page-header)>div:last-child{width:100%}
}
@media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto!important}
    body :where(.btn,.dd-btn,.pn-btn,.dx-btn,.dd-card-hover){transition:none!important}
}