/* Fuba22 modern layer: design tokens + overrides. Loaded after style.css; admin colors from layout/style.phtml still win where they use !important. */
:root{
  --f-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-bg:#f6f7fb;
  --f-surface:#fff;
  --f-surface-2:#f1f3f9;
  --f-border:#e6e8f0;
  --f-text:#0f172a;
  --f-text-2:#475569;
  --f-text-3:#94a3b8;
  --f-primary:#4f46e5;
  --f-primary-hover:#4338ca;
  --f-primary-soft:#eef2ff;
  --f-success:#16a34a;
  --f-danger:#e11d48;
  --f-header:#0f172a;
  --f-r-sm:8px;
  --f-r-md:12px;
  --f-r-lg:16px;
  --f-shadow-1:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06);
  --f-shadow-2:0 4px 6px -2px rgba(15,23,42,.05),0 12px 24px -6px rgba(15,23,42,.10);
  --f-ease:cubic-bezier(.2,.7,.2,1);
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--f-font);background:var(--f-bg);color:var(--f-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body,button,input,select,textarea,h1,h2,h3,h4,h5,h6,.btn,.form-control{font-family:var(--f-font)}
a{transition:color .15s var(--f-ease)}
::selection{background:var(--f-primary-soft);color:var(--f-primary-hover)}

/* Header */
.navbar-default:not(#welcomeheader){background:rgba(15,23,42,.92)!important;-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);box-shadow:0 1px 0 rgba(255,255,255,.06),0 4px 16px rgba(15,23,42,.12)!important}
.fuba22-brand{font-size:24px;font-weight:800;letter-spacing:-.04em}

/* Cards */
.wow_content,.post,.panel,.sidebar-conatnier,.wowonder-well,.setting-panel,.wo_settings_page .setting-panel{background:var(--f-surface);border:1px solid var(--f-border);border-radius:var(--f-r-md);box-shadow:var(--f-shadow-1)}
.post{margin-bottom:16px;transition:box-shadow .2s var(--f-ease)}
.post:hover{box-shadow:var(--f-shadow-2)}
.post .post-heading .meta .title a{color:var(--f-text);font-weight:600}
.post .post-heading .meta .time{color:var(--f-text-3)}
.post .post-heading .avatar,.wow_hdr_menu_usr_lnk img{border-radius:50%}

/* Buttons */
.btn,.btn-mat,.btn-main{border-radius:var(--f-r-sm);font-weight:600;letter-spacing:0;transition:background-color .15s var(--f-ease),box-shadow .15s var(--f-ease),transform .1s var(--f-ease)}
.btn:active,.btn-mat:active{transform:translateY(1px)}
.btn-main,.btn-primary{background:var(--f-primary);border-color:var(--f-primary);color:#fff}
.btn-main:hover,.btn-main:focus,.btn-primary:hover,.btn-primary:focus{background:var(--f-primary-hover);border-color:var(--f-primary-hover);color:#fff}
.btn-mat-raised{box-shadow:var(--f-shadow-1)}

/* Forms */
.form-control,input[type=text],input[type=email],input[type=password],input[type=search],textarea,select{border:1px solid var(--f-border);border-radius:var(--f-r-sm);background:var(--f-surface);color:var(--f-text);box-shadow:none;transition:border-color .15s var(--f-ease),box-shadow .15s var(--f-ease)}
.form-control:focus,input:focus,textarea:focus,select:focus{border-color:var(--f-primary);box-shadow:0 0 0 3px rgba(79,70,229,.15);outline:0}
::placeholder{color:var(--f-text-3)}

/* Modals, dropdowns */
.modal-content{border:0;border-radius:var(--f-r-lg);box-shadow:var(--f-shadow-2)}
.dropdown-menu{border:1px solid var(--f-border);border-radius:var(--f-r-md);box-shadow:var(--f-shadow-2);padding:6px}
.dropdown-menu>li>a{border-radius:var(--f-r-sm)}
.dropdown-menu>li>a:hover{background:var(--f-primary-soft);color:var(--f-primary-hover)}
.nav-tabs>li.active>a{color:var(--f-primary)}

/* Images, scrollbars */
img.avatar,.avatar{object-fit:cover}
*{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px}

/* Perf: skip render work for off-screen posts */
.post{content-visibility:auto;contain-intrinsic-size:auto 400px}

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

/* Accessibility and polish */
a:focus-visible,button:focus-visible,.btn:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--f-primary)!important;outline-offset:2px;border-radius:var(--f-r-sm)}
.tooltip-inner{background:var(--f-header);border-radius:var(--f-r-sm);font-weight:500}
.badge,.label{border-radius:999px;font-weight:600}
.list-group-item{border-color:var(--f-border)}
hr{border-color:var(--f-border)}
img{max-width:100%}
.alert{border-radius:var(--f-r-md);border:0}