/* =========================================================
   PasTele — CANONICAL CLEAN UI SYSTEM
   Settings-inspired visual system for ALL non-admin pages.
   Loaded after page CSS so it normalizes legacy page styles.
   ========================================================= */

.app-page:not(.settings-page-body):not(.admin-page){
  --ui-bg:#f5f7fb;
  --ui-surface:#fff;
  --ui-surface-soft:#f8fafc;
  --ui-surface-hover:#f4f8fb;
  --ui-border:#e5e7eb;
  --ui-border-strong:#d7dce5;
  --ui-text:#111827;
  --ui-text-soft:#4b5563;
  --ui-muted:#6b7280;
  --ui-muted-2:#9ca3af;
  --ui-primary:#229ed9;
  --ui-primary-dark:#168ac1;
  --ui-primary-soft:#eaf7ff;
  --ui-success:#16a34a;
  --ui-success-soft:#ecfdf3;
  --ui-danger:#dc2626;
  --ui-danger-soft:#fef2f2;
  --ui-warning:#d97706;
  --ui-warning-soft:#fffbeb;
  --ui-purple:#7c3aed;
  --ui-purple-soft:#f5f3ff;
  --ui-pink:#db2777;
  --ui-pink-soft:#fdf2f8;
  --ui-shadow-sm:0 2px 8px rgba(15,23,42,.04);
  --ui-shadow:0 10px 30px rgba(15,23,42,.07);
  --ui-shadow-lg:0 20px 55px rgba(15,23,42,.11);
  --ui-radius-sm:12px;
  --ui-radius:16px;
  --ui-radius-lg:20px;
  background:var(--ui-bg);
  color:var(--ui-text);
  min-height:100vh;
  overflow-x:hidden;
}

html[data-theme="dark"] .app-page:not(.settings-page-body):not(.admin-page),
html.theme-dark .app-page:not(.settings-page-body):not(.admin-page),
body.theme-dark.app-page:not(.settings-page-body):not(.admin-page){
  --ui-bg:#0b1220;
  --ui-surface:#111827;
  --ui-surface-soft:#172033;
  --ui-surface-hover:#1a2638;
  --ui-border:#263247;
  --ui-border-strong:#344158;
  --ui-text:#f8fafc;
  --ui-text-soft:#cbd5e1;
  --ui-muted:#94a3b8;
  --ui-muted-2:#64748b;
  --ui-primary:#38bdf8;
  --ui-primary-dark:#229ed9;
  --ui-primary-soft:rgba(34,158,217,.12);
  --ui-success-soft:rgba(22,163,74,.13);
  --ui-danger-soft:rgba(220,38,38,.13);
  --ui-warning-soft:rgba(217,119,6,.12);
  --ui-purple-soft:rgba(124,58,237,.13);
  --ui-pink-soft:rgba(219,39,119,.13);
  --ui-shadow-sm:0 2px 8px rgba(0,0,0,.20);
  --ui-shadow:0 12px 35px rgba(0,0,0,.22);
  --ui-shadow-lg:0 20px 60px rgba(0,0,0,.34);
}

.app-page:not(.settings-page-body):not(.admin-page) *,
.app-page:not(.settings-page-body):not(.admin-page) *::before,
.app-page:not(.settings-page-body):not(.admin-page) *::after{box-sizing:border-box}
.app-page:not(.settings-page-body):not(.admin-page) img,
.app-page:not(.settings-page-body):not(.admin-page) svg,
.app-page:not(.settings-page-body):not(.admin-page) video{max-width:100%}
.app-page:not(.settings-page-body):not(.admin-page) button,
.app-page:not(.settings-page-body):not(.admin-page) input,
.app-page:not(.settings-page-body):not(.admin-page) select,
.app-page:not(.settings-page-body):not(.admin-page) textarea{font:inherit}
.app-page:not(.settings-page-body):not(.admin-page) a{color:inherit}

/* Consistent page containers */
.app-page:not(.settings-page-body):not(.admin-page) .container,
.app-page:not(.settings-page-body):not(.admin-page) .page-container,
.app-page:not(.settings-page-body):not(.admin-page) .main-container,
.app-page:not(.settings-page-body):not(.admin-page) .content-container{
  width:min(1160px,calc(100% - 32px));
  margin-inline:auto;
}

.app-page:not(.settings-page-body):not(.admin-page) main.section,
.app-page:not(.settings-page-body):not(.admin-page) main[class*="-section"],
.app-page:not(.settings-page-body):not(.admin-page) main[class*="-main"]{
  min-width:0;
  padding-top:34px;
  padding-bottom:70px;
}

/* Universal typography */
.app-page:not(.settings-page-body):not(.admin-page) h1,
.app-page:not(.settings-page-body):not(.admin-page) h2,
.app-page:not(.settings-page-body):not(.admin-page) h3,
.app-page:not(.settings-page-body):not(.admin-page) h4,
.app-page:not(.settings-page-body):not(.admin-page) h5{
  color:var(--ui-text);
  letter-spacing:-.025em;
}
.app-page:not(.settings-page-body):not(.admin-page) p{color:var(--ui-text-soft)}
.app-page:not(.settings-page-body):not(.admin-page) .muted,
.app-page:not(.settings-page-body):not(.admin-page) .hint,
.app-page:not(.settings-page-body):not(.admin-page) .help-text,
.app-page:not(.settings-page-body):not(.admin-page) small{color:var(--ui-muted)!important}

/* Common header systems */
.app-page:not(.settings-page-body):not(.admin-page) .page-head,
.app-page:not(.settings-page-body):not(.admin-page) .market-header,
.app-page:not(.settings-page-body):not(.admin-page) .tx-header,
.app-page:not(.settings-page-body):not(.admin-page) .wallet-heading,
.app-page:not(.settings-page-body):not(.admin-page) .withdraw-header,
.app-page:not(.settings-page-body):not(.admin-page) .purchases-header,
.app-page:not(.settings-page-body):not(.admin-page) .profile-hero,
.app-page:not(.settings-page-body):not(.admin-page) .create-detail-head,
.app-page:not(.settings-page-body):not(.admin-page) .create-hub-head,
.app-page:not(.settings-page-body):not(.admin-page) .product-page-header,
.app-page:not(.settings-page-body):not(.admin-page) .legal-head,
.app-page:not(.settings-page-body):not(.admin-page) .plans-hero,
.app-page:not(.settings-page-body):not(.admin-page) .plan-hero,
.app-page:not(.settings-page-body):not(.admin-page) .checkout-header{
  color:var(--ui-text);
}

.app-page:not(.settings-page-body):not(.admin-page) .badge,
.app-page:not(.settings-page-body):not(.admin-page) .chip,
.app-page:not(.settings-page-body):not(.admin-page) .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 10px;
  border:1px solid rgba(34,158,217,.18)!important;
  border-radius:999px!important;
  background:var(--ui-primary-soft)!important;
  color:var(--ui-primary)!important;
  font-size:11px;
  line-height:1.2;
  font-weight:850;
}

/* Canonical cards */
.app-page:not(.settings-page-body):not(.admin-page) .card,
.app-page:not(.settings-page-body):not(.admin-page) .panel,
.app-page:not(.settings-page-body):not(.admin-page) .box,
.app-page:not(.settings-page-body):not(.admin-page) .form-card,
.app-page:not(.settings-page-body):not(.admin-page) .content-card,
.app-page:not(.settings-page-body):not(.admin-page) .dashboard-card,
.app-page:not(.settings-page-body):not(.admin-page) .stat-card,
.app-page:not(.settings-page-body):not(.admin-page) .market-card,
.app-page:not(.settings-page-body):not(.admin-page) .product-card,
.app-page:not(.settings-page-body):not(.admin-page) .auth-card,
.app-page:not(.settings-page-body):not(.admin-page) .checkout-card,
.app-page:not(.settings-page-body):not(.admin-page) .legal-card,
.app-page:not(.settings-page-body):not(.admin-page) .settings-card{
  min-width:0;
  background:var(--ui-surface)!important;
  color:var(--ui-text)!important;
  border:1px solid var(--ui-border)!important;
  border-radius:var(--ui-radius)!important;
  box-shadow:var(--ui-shadow-sm)!important;
}

.app-page:not(.settings-page-body):not(.admin-page) .card:hover,
.app-page:not(.settings-page-body):not(.admin-page) .panel:hover,
.app-page:not(.settings-page-body):not(.admin-page) .market-card:hover,
.app-page:not(.settings-page-body):not(.admin-page) .product-card:hover,
.app-page:not(.settings-page-body):not(.admin-page) .content-card:hover{
  border-color:rgba(34,158,217,.28)!important;
  box-shadow:var(--ui-shadow)!important;
}

/* Buttons */
.app-page:not(.settings-page-body):not(.admin-page) .btn,
.app-page:not(.settings-page-body):not(.admin-page) .button,
.app-page:not(.settings-page-body):not(.admin-page) button.primary,
.app-page:not(.settings-page-body):not(.admin-page) .btn-primary,
.app-page:not(.settings-page-body):not(.admin-page) .button-primary{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 15px;
  border:1px solid var(--ui-border-strong)!important;
  border-radius:12px!important;
  background:var(--ui-surface)!important;
  color:var(--ui-text)!important;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,opacity .18s ease;
}
.app-page:not(.settings-page-body):not(.admin-page) .btn:hover,
.app-page:not(.settings-page-body):not(.admin-page) .button:hover{
  transform:translateY(-1px);
  background:var(--ui-surface-soft)!important;
  border-color:rgba(34,158,217,.34)!important;
  box-shadow:var(--ui-shadow-sm);
}
.app-page:not(.settings-page-body):not(.admin-page) .btn:active,
.app-page:not(.settings-page-body):not(.admin-page) .button:active{transform:translateY(0)}
.app-page:not(.settings-page-body):not(.admin-page) .btn.primary,
.app-page:not(.settings-page-body):not(.admin-page) .btn-primary,
.app-page:not(.settings-page-body):not(.admin-page) .button-primary,
.app-page:not(.settings-page-body):not(.admin-page) button.primary{
  border-color:transparent!important;
  background:linear-gradient(135deg,var(--ui-primary),var(--ui-primary-dark))!important;
  color:#fff!important;
  box-shadow:0 8px 22px rgba(34,158,217,.20);
}
.app-page:not(.settings-page-body):not(.admin-page) .btn.primary *,
.app-page:not(.settings-page-body):not(.admin-page) .btn-primary *,
.app-page:not(.settings-page-body):not(.admin-page) .button-primary *{color:#fff!important}

/* Forms */
.app-page:not(.settings-page-body):not(.admin-page) input:not([type="checkbox"]):not([type="radio"]),
.app-page:not(.settings-page-body):not(.admin-page) select,
.app-page:not(.settings-page-body):not(.admin-page) textarea,
.app-page:not(.settings-page-body):not(.admin-page) .input,
.app-page:not(.settings-page-body):not(.admin-page) .select,
.app-page:not(.settings-page-body):not(.admin-page) .textarea{
  width:100%;
  max-width:100%;
  min-height:46px;
  padding:11px 13px;
  border:1px solid var(--ui-border-strong)!important;
  border-radius:12px!important;
  outline:0;
  background:var(--ui-surface)!important;
  color:var(--ui-text)!important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.app-page:not(.settings-page-body):not(.admin-page) input:focus,
.app-page:not(.settings-page-body):not(.admin-page) select:focus,
.app-page:not(.settings-page-body):not(.admin-page) textarea:focus,
.app-page:not(.settings-page-body):not(.admin-page) .input:focus,
.app-page:not(.settings-page-body):not(.admin-page) .select:focus,
.app-page:not(.settings-page-body):not(.admin-page) .textarea:focus{
  border-color:var(--ui-primary)!important;
  box-shadow:0 0 0 4px rgba(34,158,217,.10)!important;
}
.app-page:not(.settings-page-body):not(.admin-page) label{color:var(--ui-text);font-weight:750}

/* Common grid helpers */
.app-page:not(.settings-page-body):not(.admin-page) .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.app-page:not(.settings-page-body):not(.admin-page) .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.app-page:not(.settings-page-body):not(.admin-page) .grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}

/* Tables */
.app-page:not(.settings-page-body):not(.admin-page) .table-wrap,
.app-page:not(.settings-page-body):not(.admin-page) .table-container,
.app-page:not(.settings-page-body):not(.admin-page) .data-table-wrap{
  max-width:100%;
  overflow:auto;
  border:1px solid var(--ui-border)!important;
  border-radius:16px!important;
  background:var(--ui-surface)!important;
  box-shadow:var(--ui-shadow-sm);
  -webkit-overflow-scrolling:touch;
}
.app-page:not(.settings-page-body):not(.admin-page) table{border-collapse:collapse;color:var(--ui-text)}
.app-page:not(.settings-page-body):not(.admin-page) th{
  background:var(--ui-surface-soft);
  color:var(--ui-muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.app-page:not(.settings-page-body):not(.admin-page) td,
.app-page:not(.settings-page-body):not(.admin-page) th{border-color:var(--ui-border)}

/* Lists / rows */
.app-page:not(.settings-page-body):not(.admin-page) .list-item,
.app-page:not(.settings-page-body):not(.admin-page) .activity-row,
.app-page:not(.settings-page-body):not(.admin-page) .recent-item,
.app-page:not(.settings-page-body):not(.admin-page) .notification-item,
.app-page:not(.settings-page-body):not(.admin-page) .transaction-item,
.app-page:not(.settings-page-body):not(.admin-page) .purchase-item{
  min-width:0;
  background:var(--ui-surface);
  color:var(--ui-text);
  border-color:var(--ui-border);
}
.app-page:not(.settings-page-body):not(.admin-page) .list-item:hover,
.app-page:not(.settings-page-body):not(.admin-page) .activity-row:hover,
.app-page:not(.settings-page-body):not(.admin-page) .recent-item:hover,
.app-page:not(.settings-page-body):not(.admin-page) .notification-item:hover,
.app-page:not(.settings-page-body):not(.admin-page) .transaction-item:hover,
.app-page:not(.settings-page-body):not(.admin-page) .purchase-item:hover{
  background:var(--ui-surface-soft);
}

/* Clickable elements: visual feedback without inventing destinations */
.app-page:not(.settings-page-body):not(.admin-page) a[href],
.app-page:not(.settings-page-body):not(.admin-page) button:not(:disabled),
.app-page:not(.settings-page-body):not(.admin-page) [role="button"],
.app-page:not(.settings-page-body):not(.admin-page) [data-href],
.app-page:not(.settings-page-body):not(.admin-page) [data-url]{
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.app-page:not(.settings-page-body):not(.admin-page) [role="button"]:focus-visible,
.app-page:not(.settings-page-body):not(.admin-page) [data-href]:focus-visible,
.app-page:not(.settings-page-body):not(.admin-page) [data-url]:focus-visible,
.app-page:not(.settings-page-body):not(.admin-page) a[href]:focus-visible,
.app-page:not(.settings-page-body):not(.admin-page) button:focus-visible{
  outline:3px solid rgba(34,158,217,.22);
  outline-offset:2px;
}

/* Empty/loading states */
.app-page:not(.settings-page-body):not(.admin-page) .empty,
.app-page:not(.settings-page-body):not(.admin-page) .loading,
.app-page:not(.settings-page-body):not(.admin-page) .empty-state{
  padding:40px 20px;
  text-align:center;
  color:var(--ui-muted)!important;
}
.app-page:not(.settings-page-body):not(.admin-page) .empty i,
.app-page:not(.settings-page-body):not(.admin-page) .empty-state i{color:var(--ui-muted-2)}

/* Toasts / dialogs */
.app-page:not(.settings-page-body):not(.admin-page) .toast,
.app-page:not(.settings-page-body):not(.admin-page) .modal-content,
.app-page:not(.settings-page-body):not(.admin-page) .modal-card,
.app-page:not(.settings-page-body):not(.admin-page) .dialog{
  background:var(--ui-surface)!important;
  color:var(--ui-text)!important;
  border:1px solid var(--ui-border)!important;
  box-shadow:var(--ui-shadow-lg)!important;
}

/* Common action cards */
.app-page:not(.settings-page-body):not(.admin-page) .action-card,
.app-page:not(.settings-page-body):not(.admin-page) .choice-card,
.app-page:not(.settings-page-body):not(.admin-page) .create-choice,
.app-page:not(.settings-page-body):not(.admin-page) .quick-card,
.app-page:not(.settings-page-body):not(.admin-page) .settings-quick-card{
  background:var(--ui-surface)!important;
  color:var(--ui-text)!important;
  border:1px solid var(--ui-border)!important;
  border-radius:var(--ui-radius)!important;
  box-shadow:var(--ui-shadow-sm)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.app-page:not(.settings-page-body):not(.admin-page) .action-card:hover,
.app-page:not(.settings-page-body):not(.admin-page) .choice-card:hover,
.app-page:not(.settings-page-body):not(.admin-page) .create-choice:hover,
.app-page:not(.settings-page-body):not(.admin-page) .quick-card:hover{
  transform:translateY(-2px);
  border-color:rgba(34,158,217,.30)!important;
  background:var(--ui-surface-soft)!important;
  box-shadow:var(--ui-shadow)!important;
}

/* Auth/public pages */
.app-page.public-no-navbar{
  background:var(--ui-bg,#f5f7fb);
  color:var(--ui-text,#111827);
}
.app-page.public-no-navbar .auth-card,
.app-page.public-no-navbar .auth-recovery-card{
  background:var(--ui-surface,#fff)!important;
  border:1px solid var(--ui-border,#e5e7eb)!important;
  box-shadow:var(--ui-shadow,0 10px 30px rgba(15,23,42,.07))!important;
}

/* Mobile */
@media(max-width:1000px){
  .app-page:not(.settings-page-body):not(.admin-page) .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-page:not(.settings-page-body):not(.admin-page) .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .app-page:not(.settings-page-body):not(.admin-page) .container,
  .app-page:not(.settings-page-body):not(.admin-page) .page-container,
  .app-page:not(.settings-page-body):not(.admin-page) .main-container,
  .app-page:not(.settings-page-body):not(.admin-page) .content-container{width:calc(100% - 20px)}
  .app-page:not(.settings-page-body):not(.admin-page) main.section,
  .app-page:not(.settings-page-body):not(.admin-page) main[class*="-section"],
  .app-page:not(.settings-page-body):not(.admin-page) main[class*="-main"]{padding-top:28px;padding-bottom:55px}
  .app-page:not(.settings-page-body):not(.admin-page) .grid-2,
  .app-page:not(.settings-page-body):not(.admin-page) .grid-3,
  .app-page:not(.settings-page-body):not(.admin-page) .grid-4{grid-template-columns:1fr}
  .app-page:not(.settings-page-body):not(.admin-page) .card,
  .app-page:not(.settings-page-body):not(.admin-page) .panel{border-radius:15px!important}
  .app-page:not(.settings-page-body):not(.admin-page) table{min-width:640px}
  .app-page:not(.settings-page-body):not(.admin-page) .btn,
  .app-page:not(.settings-page-body):not(.admin-page) .button{min-height:46px}
}
@media(prefers-reduced-motion:reduce){
  .app-page:not(.settings-page-body):not(.admin-page) *,
  .app-page:not(.settings-page-body):not(.admin-page) *::before,
  .app-page:not(.settings-page-body):not(.admin-page) *::after{animation:none!important;transition:none!important}
}
@media(hover:none){
  .app-page:not(.settings-page-body):not(.admin-page) .btn:hover,
  .app-page:not(.settings-page-body):not(.admin-page) .button:hover,
  .app-page:not(.settings-page-body):not(.admin-page) .action-card:hover,
  .app-page:not(.settings-page-body):not(.admin-page) .choice-card:hover,
  .app-page:not(.settings-page-body):not(.admin-page) .create-choice:hover{transform:none}
}

/* =========================================================
   ADMIN — same clean visual language, admin-specific markup kept
   ========================================================= */
.admin-page{
  --ad-bg:#f5f7fb;
  --ad-surface:#fff;
  --ad-soft:#f8fafc;
  --ad-border:#e5e7eb;
  --ad-border-strong:#d7dce5;
  --ad-text:#111827;
  --ad-muted:#6b7280;
  --ad-primary:#229ed9;
  --ad-shadow-sm:0 2px 8px rgba(15,23,42,.04);
  --ad-shadow:0 10px 30px rgba(15,23,42,.07);
  background:var(--ad-bg);
  color:var(--ad-text);
}
html[data-theme="dark"] .admin-page,
html.theme-dark .admin-page,
body.theme-dark .admin-page{
  --ad-bg:#0b1220;
  --ad-surface:#111827;
  --ad-soft:#172033;
  --ad-border:#263247;
  --ad-border-strong:#344158;
  --ad-text:#f8fafc;
  --ad-muted:#94a3b8;
  --ad-primary:#38bdf8;
  --ad-shadow-sm:0 2px 8px rgba(0,0,0,.20);
  --ad-shadow:0 12px 35px rgba(0,0,0,.22);
}
.admin-page .card,.admin-page .panel,.admin-page .box,.admin-page .stat-card,.admin-page .content-card{
  background:var(--ad-surface)!important;
  color:var(--ad-text)!important;
  border:1px solid var(--ad-border)!important;
  border-radius:16px!important;
  box-shadow:var(--ad-shadow-sm)!important;
}
.admin-page .card:hover,.admin-page .panel:hover{border-color:rgba(34,158,217,.28)!important;box-shadow:var(--ad-shadow)!important}
.admin-page .btn,.admin-page button,.admin-page .button{
  border-radius:12px;
  touch-action:manipulation;
}
.admin-page input,.admin-page select,.admin-page textarea{
  background:var(--ad-surface)!important;
  color:var(--ad-text)!important;
  border-color:var(--ad-border-strong)!important;
  border-radius:12px!important;
}

/* =========================================================
   Dashboard generated rows/cards
   ========================================================= */
.dashboard-page .recent-item.is-clickable,
.dashboard-page .activity-row.is-clickable{
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.dashboard-page .recent-item.is-clickable:hover,
.dashboard-page .activity-row.is-clickable:hover{
  transform:translateY(-1px);
  border-color:rgba(34,158,217,.28)!important;
  background:var(--ui-surface-soft)!important;
  box-shadow:var(--ui-shadow-sm);
}
.dashboard-page .recent-item.is-clickable:focus-visible,
.dashboard-page .activity-row.is-clickable:focus-visible{
  outline:3px solid rgba(34,158,217,.20);
  outline-offset:2px;
}