/* PasTele — Unified UI System 2026.09.13
   Canonical final layer: consistency only; page styles remain responsible for page-specific layouts. */
:root{
  --pt-bg:#f5f7fb;--pt-surface:#fff;--pt-surface-2:#f8fafc;--pt-surface-3:#eef2f7;
  --pt-text:#0f172a;--pt-muted:#64748b;--pt-line:#e2e8f0;--pt-line-strong:#cbd5e1;
  --pt-primary:#635bff;--pt-primary-2:#8b5cf6;--pt-blue:#3b82f6;--pt-cyan:#06b6d4;
  --pt-green:#10b981;--pt-orange:#f59e0b;--pt-red:#ef4444;--pt-pink:#ec4899;
  --pt-radius:16px;--pt-radius-sm:12px;--pt-content:1180px;--pt-gutter:16px;--pt-nav-h:72px;
}
html[data-theme="dark"],html.theme-dark,body.theme-dark{
  --pt-bg:#080d16;--pt-surface:#101722;--pt-surface-2:#151e2b;--pt-surface-3:#1b2635;
  --pt-text:#f8fafc;--pt-muted:#94a3b8;--pt-line:rgba(255,255,255,.10);--pt-line-strong:rgba(255,255,255,.18);
}
html,body{max-width:100%;min-height:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
body{min-width:320px;margin:0;background:var(--pt-bg,#f5f7fb);color:var(--pt-text,#0f172a);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.6}
img,svg,video,canvas,iframe{max-width:100%}
button,input,select,textarea{font:inherit;max-width:100%}
input,select,textarea{min-width:0}
a{color:inherit}
button{touch-action:manipulation}
:where(.container,.page-container,.main-container,.content-container,.content-wrap,.page-wrap){width:min(var(--pt-content),calc(100% - 32px));max-width:100%;margin-inline:auto}
main{width:100%;min-width:0}
main>*{min-width:0}
:where(.card,.panel,.box,.form-card,.content-card,.dashboard-card,.stat-card,.market-card,.product-card,.settings-card,.purchase-item,.transaction-item,.notice-card,.withdraw-box){min-width:0;overflow-wrap:anywhere}
:where(.grid,.grid-2,.grid-3,.grid-4,.feature-grid,.market-grid,.create-grid,.profile-grid,.settings-grid,.subscription-grid,.premium-grid,.about-grid){min-width:0}
:where(.grid,.grid-2,.grid-3,.grid-4,.feature-grid,.market-grid,.create-grid,.profile-grid,.settings-grid,.subscription-grid,.premium-grid,.about-grid)>*{min-width:0}
.table-wrap{max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
pre,code,.code-box,.result-url,.share-url,.url-box,.link-box{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
:where(.modal,.dialog,[role="dialog"]){max-width:calc(100vw - 24px)}
:where(.toast,.toast-container){max-width:calc(100vw - 24px)}
:where(input,select,textarea){border-radius:var(--pt-radius-sm)}
:where(button,.btn,.button){min-height:40px;border-radius:var(--pt-radius-sm)}
:where(.btn-primary,.button-primary,.primary-btn){background:var(--pt-primary,#635bff);color:#fff;border-color:transparent}
:where(.btn-primary,.button-primary,.primary-btn):hover{filter:brightness(.97);transform:translateY(-1px)}
:where(.btn,.button,.btn-primary,.button-primary,.primary-btn){transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease}
:focus-visible{outline:3px solid color-mix(in srgb,var(--pt-primary) 30%,transparent);outline-offset:2px}
#navbar,#publicNavbar{width:100%;max-width:100%;min-width:0}
#navbar .pt-nav-inner{width:min(var(--pt-content),calc(100% - 32px));max-width:100%;margin-inline:auto}
.page-title,.hero-title,h1{overflow-wrap:anywhere}
@media(max-width:900px){
  :where(.container,.page-container,.main-container,.content-container,.content-wrap,.page-wrap){width:min(var(--pt-content),calc(100% - 24px))}
  :where(.grid-4,.feature-grid,.market-grid,.settings-grid,.profile-grid,.subscription-grid,.premium-grid,.about-grid){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  :where(.container,.page-container,.main-container,.content-container,.content-wrap,.page-wrap){width:calc(100% - 20px)}
  :where(.grid,.grid-2,.grid-3,.grid-4,.feature-grid,.market-grid,.create-grid,.profile-grid,.settings-grid,.subscription-grid,.premium-grid,.about-grid){grid-template-columns:1fr!important}
  :where(.card,.panel,.box,.form-card,.content-card,.dashboard-card,.stat-card,.market-card,.product-card,.settings-card){border-radius:14px}
  :where(.page-title,h1){font-size:clamp(1.5rem,7vw,2rem)}
  :where(h2){font-size:clamp(1.25rem,6vw,1.55rem)}
  :where(.btn,.button,.btn-primary,.button-primary,.primary-btn){width:auto;max-width:100%}
  :where(.actions,.form-actions,.button-row,.toolbar){flex-wrap:wrap;min-width:0}
}
@media(max-width:420px){
  :where(.container,.page-container,.main-container,.content-container,.content-wrap,.page-wrap){width:calc(100% - 16px)}
}