/* ============================================================
   SMMPIX UX Polish v137
   Pro UI/UX layer — mobile-first, logic-safe (CSS only)
   ============================================================ */

/* ---------- Global comfort ---------- */
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
*:focus-visible{outline:2px solid color-mix(in srgb,var(--p,#10b981) 55%,transparent);outline-offset:2px;border-radius:6px}
img,svg,video{max-width:100%;height:auto}
::selection{background:color-mix(in srgb,var(--p,#10b981) 28%,transparent);color:inherit}

/* ---------- Auth pages (login / register / 2FA) ---------- */
.auth-shell{
  min-height:100vh;min-height:100dvh;
  display:flex;align-items:stretch;justify-content:center;
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb,var(--p) 14%,transparent), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, color-mix(in srgb,var(--p) 8%,transparent), transparent 55%),
    var(--bg,#f5f7fb);
}
[data-theme="dark"] .auth-shell{
  background:
    radial-gradient(1000px 500px at 0% 0%, color-mix(in srgb,var(--p) 16%,transparent), transparent 55%),
    var(--bg,#0b1220);
}
.auth-split{width:100%;max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr}
@media(min-width:900px){
  .auth-split{grid-template-columns:1.05fr .95fr;min-height:100vh;min-height:100dvh;border-radius:0}
}
.auth-promo{
  display:none;padding:clamp(2rem,4vw,3rem);
  background:linear-gradient(145deg,var(--p),color-mix(in srgb,var(--p) 72%,#0f172a));
  color:#fff;position:relative;overflow:hidden;
}
.auth-promo::after{
  content:"";position:absolute;width:280px;height:280px;border-radius:50%;
  right:-80px;bottom:-100px;background:rgba(255,255,255,.08);pointer-events:none;
}
@media(min-width:900px){.auth-promo{display:flex;flex-direction:column;justify-content:center}}
.auth-promo h1{font-size:clamp(1.55rem,2.6vw,2.1rem);font-weight:800;margin:0 0 12px;line-height:1.2;letter-spacing:-.02em}
.auth-promo p{opacity:.94;font-size:14.5px;line-height:1.6;margin:0 0 1.25rem;max-width:28rem}
.auth-promo ul{margin:0;padding:0;list-style:none}
.auth-promo li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;margin:11px 0;opacity:.96}
.auth-panel{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1.25rem,3vw,2rem) 1rem;
}
.auth-box{
  width:100%;max-width:420px;
  background:var(--card,#fff);
  border:1px solid var(--bd,#e5e7eb);
  border-radius:18px;
  padding:clamp(1.35rem,3vw,1.75rem);
  box-shadow:0 18px 50px rgba(15,23,42,.07);
}
[data-theme="dark"] .auth-box{
  background:var(--card,#111827);
  border-color:var(--bd,#1f2a3a);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.auth-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:1.1rem}
.auth-brand img{height:38px;max-width:170px;object-fit:contain}
.auth-title{text-align:center;font-size:1.35rem;font-weight:800;letter-spacing:-.02em;margin:0 0 .35rem;color:var(--tx)}
.auth-sub{text-align:center;font-size:13px;color:var(--mu);margin:0 0 1.15rem;line-height:1.5}
.auth-label{
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;color:var(--tx);margin-bottom:6px;
}
.auth-input,.auth-box input[type="text"],.auth-box input[type="email"],
.auth-box input[type="password"],.auth-box input[type="tel"],.auth-box select{
  width:100%;box-sizing:border-box;
  border:1px solid var(--bd,#e5e7eb);
  background:var(--card,#fff);
  color:var(--tx);
  border-radius:12px;
  padding:12px 14px;
  font-size:15px;
  min-height:46px;
  transition:border-color .15s,box-shadow .15s;
}
.auth-input:focus,.auth-box input:focus,.auth-box select:focus{
  outline:0;border-color:var(--p);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 16%,transparent);
}
.auth-submit,.auth-box button[type="submit"],.auth-box .btn-primary{
  width:100%;min-height:46px;border:0;border-radius:12px;
  background:var(--p)!important;color:#fff!important;
  font-weight:800;font-size:14.5px;cursor:pointer;
  transition:filter .15s,transform .15s;
}
.auth-submit:hover,.auth-box button[type="submit"]:hover{filter:brightness(1.06);transform:translateY(-1px)}
.auth-alert{
  border-radius:12px;padding:10px 12px;font-size:13px;margin-bottom:12px;line-height:1.45;
}
.auth-alert.err,.auth-alert.error{background:rgba(239,68,68,.1);color:#b91c1c;border:1px solid rgba(239,68,68,.25)}
.auth-alert.ok,.auth-alert.success{background:rgba(16,185,129,.1);color:#047857;border:1px solid rgba(16,185,129,.25)}
.google-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:46px;border-radius:12px;
  border:1px solid var(--bd);background:var(--card);color:var(--tx);
  font-weight:700;font-size:13.5px;text-decoration:none;margin-bottom:12px;
  transition:border-color .15s,background .15s;
}
.google-btn:hover{border-color:color-mix(in srgb,var(--p) 35%,var(--bd));background:color-mix(in srgb,var(--p) 4%,var(--card))}
.auth-foot,.auth-links{text-align:center;font-size:13px;color:var(--mu);margin-top:1rem}
.auth-foot a,.auth-links a{color:var(--p);font-weight:700;text-decoration:none}
.auth-foot a:hover,.auth-links a:hover{text-decoration:underline}
@media(max-width:479px){
  .auth-box{border-radius:16px;padding:1.2rem 1rem;box-shadow:0 10px 28px rgba(15,23,42,.06)}
  .auth-panel{padding:1rem .75rem}
}

/* ---------- Client shell comfort ---------- */
body.is-client .main-pad{
  padding-top:clamp(12px,2vw,20px);
  padding-bottom:clamp(28px,4vw,48px);
}
body.is-client .page-head,
body.is-client .mo-page-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:12px;margin-bottom:1.1rem;
}
body.is-client .page-head h1,
body.is-client .mo-page-head h1{
  font-size:clamp(1.25rem,2.5vw,1.55rem);
  font-weight:850;letter-spacing:-.02em;line-height:1.2;margin:0;
}
body.is-client .page-head p,
body.is-client .mo-page-head p{
  margin:.25rem 0 0;font-size:13px;color:var(--mu);line-height:1.45;
}

/* Cards */
body.is-client .card,
body.is-client .ui-card,
body.is-client .xo-card,
body.is-client .client-section,
body.is-client .u6-card,
body.is-client .afx-card{
  border-radius:16px;
  border:1px solid var(--bd);
  background:var(--card);
  transition:border-color .18s ease,box-shadow .18s ease;
}
body.is-client .card:hover,
body.is-client .ui-card:hover,
body.is-client .xo-card:hover{
  border-color:color-mix(in srgb,var(--p) 20%,var(--bd));
  box-shadow:0 12px 32px rgba(15,23,42,.05);
}

/* Buttons */
body.is-client .btn,
body.is-client .btn-primary,
body.is-client .btn-b,
body.is-client .xo-submit,
body.is-client .afx-submit{
  min-height:42px;
  border-radius:11px;
  font-weight:750;
  transition:filter .15s,transform .15s,box-shadow .15s;
}
body.is-client .btn-primary,
body.is-client .btn-b,
body.is-client .xo-submit,
body.is-client .afx-submit{
  background:var(--p)!important;color:#fff!important;border:0;
}
body.is-client .btn-primary:hover,
body.is-client .btn-b:hover,
body.is-client .xo-submit:hover{filter:brightness(1.05);transform:translateY(-1px)}
body.is-client .btn-o,
body.is-client .btn-secondary{
  border:1px solid var(--bd);background:var(--card);color:var(--tx);
  border-radius:11px;min-height:42px;
}

/* Forms */
body.is-client input:not([type=checkbox]):not([type=radio]):not([type=color]),
body.is-client select,
body.is-client textarea{
  border-radius:11px;
  border:1px solid var(--bd);
  background:var(--card);
  color:var(--tx);
  transition:border-color .15s,box-shadow .15s;
}
body.is-client input:focus,
body.is-client select:focus,
body.is-client textarea:focus{
  outline:0;border-color:var(--p);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 14%,transparent);
}

/* Tables */
body.is-client .table-wrap,
body.is-client .overflow-x-auto{
  border-radius:14px;border:1px solid var(--bd);background:var(--card);
  -webkit-overflow-scrolling:touch;
}
body.is-client table{border-collapse:separate;border-spacing:0;width:100%}
body.is-client thead th{
  font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  font-weight:800;color:var(--mu);background:color-mix(in srgb,var(--bg,#f8fafc) 80%,var(--card));
  padding:12px 14px;white-space:nowrap;border-bottom:1px solid var(--bd);
}
body.is-client tbody td{
  padding:12px 14px;font-size:13px;border-bottom:1px solid color-mix(in srgb,var(--bd) 70%,transparent);
  vertical-align:middle;
}
body.is-client tbody tr:last-child td{border-bottom:0}
body.is-client tbody tr:hover td{background:color-mix(in srgb,var(--p) 3%,transparent)}

/* Status badges */
body.is-client .badge,
body.is-client .status-badge,
body.is-client .xo-status,
body.is-client [class*="is-success"],
body.is-client [class*="is-pending"],
body.is-client [class*="is-info"],
body.is-client [class*="is-warning"],
body.is-client [class*="is-danger"]{
  border-radius:999px;font-weight:750;font-size:11px;letter-spacing:.02em;
}

/* Dashboard hero polish */
.client-dashboard .db-hero{
  border-radius:20px;overflow:hidden;
  background:linear-gradient(135deg,var(--p),color-mix(in srgb,var(--p) 70%,#0f172a));
  color:#fff;margin-bottom:1.15rem;
  box-shadow:0 16px 40px color-mix(in srgb,var(--p) 22%,transparent);
}
.client-dashboard .db-hero-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.25rem;padding:clamp(1.25rem,3vw,1.75rem);
}
.client-dashboard .db-eyebrow{
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.85;margin-bottom:6px;
}
.client-dashboard .db-title{
  font-size:clamp(1.35rem,3vw,1.75rem);font-weight:850;letter-spacing:-.02em;line-height:1.2;margin:0 0 6px;
}
.client-dashboard .db-sub{opacity:.92;font-size:13.5px;line-height:1.5;max-width:36rem;margin:0 0 1rem}
.client-dashboard .db-hero-actions{display:flex;flex-wrap:wrap;gap:8px}
.client-dashboard .db-hero-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;padding:0 14px;border-radius:11px;font-weight:800;font-size:13px;text-decoration:none;
  border:1px solid rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.1);
  transition:background .15s,transform .15s;
}
.client-dashboard .db-hero-btn.primary{background:#fff;color:var(--p);border-color:#fff}
.client-dashboard .db-hero-btn:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)}
.client-dashboard .db-hero-btn.primary:hover{filter:brightness(.97);background:#fff}
.client-dashboard .db-balance{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:16px;padding:14px 18px;min-width:min(100%,180px);
}
.client-dashboard .db-balance-label{font-size:11px;font-weight:700;opacity:.85;text-transform:uppercase;letter-spacing:.05em}
.client-dashboard .db-balance-value{font-size:1.55rem;font-weight:850;margin-top:4px;letter-spacing:-.02em}
.client-dashboard .db-stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
}
@media(min-width:768px){.client-dashboard .db-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}}
.client-dashboard .db-stat{
  background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:14px;
  transition:border-color .15s,box-shadow .15s;
}
.client-dashboard .db-stat:hover{
  border-color:color-mix(in srgb,var(--p) 22%,var(--bd));
  box-shadow:0 10px 28px rgba(15,23,42,.05);
}
.client-dashboard .db-stat-label{font-size:11px;font-weight:800;color:var(--mu);text-transform:uppercase;letter-spacing:.04em}
.client-dashboard .db-stat-value{font-size:1.35rem;font-weight:850;color:var(--tx);margin-top:6px;letter-spacing:-.02em}
.client-dashboard .db-stat-meta{font-size:11.5px;color:var(--mu);margin-top:4px}

/* Empty states */
body.is-client .empty-state,
body.is-client .xo-empty,
body.is-client .client-empty{
  text-align:center;padding:2.25rem 1.25rem;border-radius:16px;
  border:1px dashed var(--bd);background:color-mix(in srgb,var(--card) 90%,var(--bg));
  color:var(--mu);
}

/* Public content pages */
.page-wrap,.blog-wrap{padding-top:clamp(1.25rem,3vw,2rem);padding-bottom:clamp(2rem,4vw,3rem)}
.page-body,.blog-body{font-size:15px;line-height:1.75;color:var(--tx)}
.page-body a,.blog-body a{color:var(--p);text-decoration:underline;text-underline-offset:2px}
.blog-card{
  border-radius:16px!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(15,23,42,.08)!important}

/* Guest public header comfort */
.site-header .site-nav a{border-radius:9px;padding:8px 10px}
.site-header .site-cta{border-radius:999px;font-weight:800}

/* ---------- Mobile refinements ---------- */
@media(max-width:767px){
  body.is-client .main-pad{padding-left:max(12px,env(safe-area-inset-left))!important;padding-right:max(12px,env(safe-area-inset-right))!important}
  body.is-client .page-head,
  body.is-client .mo-page-head{flex-direction:column;align-items:flex-start}
  body.is-client .card,
  body.is-client .client-section,
  body.is-client .xo-card{padding:14px;border-radius:14px}
  body.is-client input:not([type=checkbox]):not([type=radio]):not([type=color]),
  body.is-client select,
  body.is-client textarea{font-size:16px!important;min-height:44px} /* no iOS zoom */
  body.is-client .btn,
  body.is-client .btn-primary,
  body.is-client .btn-b{min-height:44px;width:auto}
  body.is-client .client-action-row{gap:8px}
  body.is-client .client-action-row > *{flex:1 1 auto;min-width:calc(50% - 8px);text-align:center}
  body.is-client thead th,body.is-client tbody td{padding:10px 12px}
  .client-dashboard .db-hero-inner{padding:1.15rem}
  .client-dashboard .db-balance{width:100%}
  .client-dashboard .db-hero-actions{width:100%}
  .client-dashboard .db-hero-btn{flex:1;text-align:center}
}
@media(max-width:479px){
  body.is-client .client-action-row > *{min-width:100%}
  .client-dashboard .db-stats{grid-template-columns:1fr 1fr;gap:8px}
  .client-dashboard .db-stat{padding:12px}
  .client-dashboard .db-stat-value{font-size:1.15rem}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}