:root{
  --rk-bg:#f6f8fb;
  --rk-surface:#ffffff;
  --rk-text:#1c2730;
  --rk-muted:#52616b;
  --rk-border:rgba(28,39,48,.10);
  --rk-shadow:0 10px 30px rgba(0,0,0,.08);
  --rk-radius:16px;
  --rk-gap:14px;
  /* Rankaia brand colors */
  --rk-accent:#01b59c;
  --rk-accent-2:#b8ff00;
  --rk-accent-3:#30e079;
  --rk-accent-dark:#0a0a0a;
}

html[data-theme="dark"]{
  --rk-bg:#0b1116;
  --rk-surface:#0f1720;
  --rk-text:#e7eef5;
  --rk-muted:rgba(231,238,245,.72);
  --rk-border:rgba(231,238,245,.12);
  --rk-shadow:0 14px 36px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
body.rankaia-hub{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Kufi Arabic","Noto Sans Arabic",sans-serif;
  background:var(--rk-bg);
  color:var(--rk-text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* Subtle brand background wash (keeps Light as default) */
body.rankaia-hub:before{
  content:"";
  position:fixed;
  inset:-20vh -20vw;
  z-index:-1;
  background:
    radial-gradient(900px 500px at 15% 15%, color-mix(in srgb, var(--rk-accent) 18%, transparent), transparent 70%),
    radial-gradient(900px 500px at 85% 10%, color-mix(in srgb, var(--rk-accent-2) 16%, transparent), transparent 70%),
    radial-gradient(900px 600px at 80% 90%, color-mix(in srgb, var(--rk-accent-3) 12%, transparent), transparent 70%);
  pointer-events:none;
}
html[data-theme="dark"] body.rankaia-hub:before{
  background:
    radial-gradient(900px 500px at 15% 15%, color-mix(in srgb, var(--rk-accent) 14%, transparent), transparent 72%),
    radial-gradient(900px 500px at 85% 10%, color-mix(in srgb, var(--rk-accent-2) 10%, transparent), transparent 72%),
    radial-gradient(900px 600px at 80% 90%, color-mix(in srgb, var(--rk-accent-3) 10%, transparent), transparent 75%);
}

.hub-container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

.hub-header{
  position:sticky;
  top:0;
  z-index:50;
  background:color-mix(in srgb, var(--rk-bg) 90%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rk-border);
}

.hub-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:64px;
  gap:12px;
}

.hub-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
  min-width:0;
}

.hub-brand__img{
  height:34px;
  width:auto;
  display:block;
}

.hub-brand__img--dark{display:none}
html[data-theme="dark"] .hub-brand__img--light{display:none}
html[data-theme="dark"] .hub-brand__img--dark{display:block}

.hub-brand__sub{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:999px;
  background:var(--rk-surface);
  border:1px solid var(--rk-border);
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.hub-brand__sub-ico svg{width:18px;height:18px;fill:currentColor;opacity:.9}

.hub-nav{display:flex;align-items:center;gap:10px}

.hub-main{flex:1;padding:18px 0 22px}
.hub-main--login{flex:1;display:flex;align-items:center;padding:24px 0}

.hub-footer{
  border-top:1px solid var(--rk-border);
  background:var(--rk-bg);
  padding:14px 0;
}
.hub-footer__inner{display:flex;gap:10px;justify-content:center;align-items:center;color:var(--rk-muted);font-size:13px}
.hub-footer__sep{opacity:.5}

/* Buttons */
.hub-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--rk-border);
  background:var(--rk-surface);
  color:var(--rk-text);
  text-decoration:none;
  cursor:pointer;
  transition:transform .08s ease, box-shadow .15s ease;
}
.hub-btn:hover{box-shadow:0 10px 24px rgba(0,0,0,.08)}
.hub-btn:active{transform:translateY(1px)}

.hub-btn--ghost{background:transparent}
.hub-icon-btn{padding:10px;width:44px}

/* Portal typography */
.hub-title{font-size:22px;line-height:1.2;margin:0 0 10px}
.hub-muted{color:var(--rk-muted)}

/* Cards */
.hub-card{
  background:var(--rk-surface);
  border:1px solid var(--rk-border);
  border-radius:var(--rk-radius);
  padding:16px;
  box-shadow:var(--rk-shadow);
}

.hub-divider{height:1px;background:var(--rk-border);margin:16px 0}

.hub-breadcrumb{font-size:12px;color:var(--rk-muted);letter-spacing:.2px}
.hub-dashboard__title{margin:6px 0 0;font-size:22px;line-height:1.35}
.hub-dashboard__name{font-weight:800;color:var(--rk-text)}

.hub-widgets--nav .hub-widget--nav{display:block;text-decoration:none;color:inherit;transition:transform .08s ease, box-shadow .15s ease}
.hub-widgets--nav .hub-widget--nav:hover{box-shadow:0 12px 34px rgba(0,0,0,.10)}
.hub-widgets--nav .hub-widget--nav:active{transform:translateY(1px)}

.hub-latest__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.hub-latest__title{margin:0;font-size:16px}
.hub-latest__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hub-latest__item{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:14px;border:1px solid var(--rk-border);text-decoration:none;color:inherit;background:color-mix(in srgb, var(--rk-surface) 88%, transparent)}
.hub-latest__item:hover{border-color:color-mix(in srgb, var(--rk-accent) 35%, var(--rk-border))}
.hub-latest__name{font-weight:700}
.hub-latest__meta{font-size:12px;color:var(--rk-muted)}
@media (max-width: 768px){.hub-latest__list{grid-template-columns:1fr}}

.hub-row{display:flex;gap:12px;align-items:center}

@media (max-width: 768px){
  .hub-header__inner{min-height:60px}
  .hub-brand__img{height:30px}
  .hub-brand__sub{display:none}
}

/* Menu */
.hub-menu{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.hub-menu a{display:inline-flex;align-items:center;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--rk-muted)}
.hub-menu a:hover{background:color-mix(in srgb, var(--rk-surface) 70%, transparent);color:var(--rk-text)}

/* Ensure plugin tables are responsive */
.hub-table{width:100%;border-collapse:collapse}
.hub-table th,.hub-table td{padding:12px;border-bottom:1px solid var(--rk-border);text-align:right;white-space:nowrap}
.hub-table th{color:var(--rk-muted);font-size:13px}

/* Badges */
.hub-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--rk-border);font-size:12px}
.hub-badge--active{background:color-mix(in srgb, var(--rk-accent-3) 14%, transparent)}
.hub-badge--paused{background:color-mix(in srgb, #f59e0b 16%, transparent)}
.hub-badge--expired{background:color-mix(in srgb, #ef4444 16%, transparent)}

/* Login layout from plugin */
.hub-login-shell{max-width:520px;margin:0 auto;width:100%}
.hub-login-brand{display:flex;align-items:center;gap:10px}

/* Give plugin widgets a better grid */
.hub-widgets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--rk-gap);margin-top:14px}
@media (max-width: 1024px){.hub-widgets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 520px){.hub-widgets{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

.hub-widget{min-height:140px}
.hub-widget__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.hub-widget__ico{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--rk-accent) 14%, transparent);border:1px solid var(--rk-border);color:var(--rk-accent)}
.hub-widget__ico svg{width:22px;height:22px;fill:currentColor}
.hub-widget__title{margin:0;font-weight:700}
.hub-widget__desc{margin:6px 0 0;color:var(--rk-muted);font-size:13px}

.hub-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--rk-gap)}
@media (max-width: 1024px){.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 520px){.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* Forms */
.hub-form textarea{width:100%;border-radius:14px;border:1px solid var(--rk-border);padding:12px;background:transparent;color:var(--rk-text)}
.hub-form textarea:focus{outline:2px solid color-mix(in srgb, var(--rk-accent) 40%, transparent)}