*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #051424;
  --surface:      #0d1c2d;
  --surface-high: #1c2b3c;
  --surface-var:  #273647;
  --border:       #334155;
  --border-dim:   rgba(255,255,255,.06);
  --text:         #d4e4fa;
  --muted:        #8a9bb4;
  --accent:       #9ecaff;
  --accent-dim:   rgba(158,202,255,.12);
  --green:        #10b981;
  --yellow:       #f59e0b;
  --red:          #f43f5e;
  --green-dim:    rgba(16,185,129,.12);
  --yellow-dim:   rgba(245,158,11,.12);
  --red-dim:      rgba(244,63,94,.12);
  --sidebar-w:    260px;
  --header-h:     56px;
  --radius:       6px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-var); border-radius: 10px; }

/* ── Header ── */
.header {
  height: var(--header-h);
  background: var(--surface-high);
  border-bottom: 1px solid var(--border-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  position: sticky;
  top: 0;
  z-index: 40;
  gap: 1rem;
}

.header__brand { display: flex; align-items: center; gap: .25rem; text-decoration: none; }
.header__logo  { font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.header__logo-accent { color: var(--accent); }
.header__sub   { font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; align-self: flex-end; margin-bottom: .15rem; }

.nav-item--btn { background: none; border: none; width: 100%; text-align: left; cursor: pointer; font-size: inherit; }

.header__search {
  flex: 1;
  max-width: 480px;
  position: relative;
}
.header__search svg {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.header__search input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  padding: .4rem .75rem .4rem 2.25rem;
  font-size: .8125rem;
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}
.header__search input::placeholder { color: var(--muted); }
.header__search input:focus { border-color: rgba(158,202,255,.4); }

/* ── Search autocomplete ── */
.search-suggest {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface-high);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.search-suggest--open { display: block; }
.search-suggest__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .85rem;
  text-decoration: none;
  color: var(--text);
  font-size: .8125rem;
  transition: background .1s;
  cursor: pointer;
}
.search-suggest__item + .search-suggest__item { border-top: 1px solid var(--border-dim); }
.search-suggest__item:hover,
.search-suggest__item--active { background: var(--surface-var); }
.search-suggest__dot { flex-shrink: 0; }
.search-suggest__title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-suggest__src { font-size: .7rem; color: var(--muted); flex-shrink: 0; }

.header__right { display: flex; align-items: center; gap: .75rem; }
.header__user  { font-size: .8125rem; color: var(--muted); }
.header__logout { font-size: .8125rem; color: var(--muted); text-decoration: none; padding: .3rem .6rem; border: 1px solid var(--border-dim); border-radius: var(--radius); transition: color .15s, border-color .15s; }
.header__logout:hover { color: var(--text); border-color: var(--muted); }

.filter-select {
  padding: .375rem .625rem;
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  font-size: .8125rem;
  color: var(--text);
  outline: none;
  cursor: pointer;
}
.filter-select:focus { border-color: rgba(158,202,255,.4); }

.filter-clear {
  color: var(--muted);
  text-decoration: none;
  font-size: .8125rem;
  padding: .2rem .4rem;
  border-radius: 4px;
  transition: background .15s;
}
.filter-clear:hover { background: var(--surface-var); color: var(--text); }

/* ── Layout ── */
.layout { display: flex; flex: 1; }

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border-dim);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--header-h);
  left: 0;
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  z-index: 30;
  justify-content: space-between;
  padding-bottom: 1rem;
}

.sidebar__section-label {
  font-size: .625rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 1rem .875rem .375rem;
  font-weight: 600;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .875rem;
  color: var(--muted);
  text-decoration: none;
  font-size: .875rem;
  border-radius: var(--radius);
  margin: .1rem .5rem;
  transition: background .15s, color .15s;
  position: relative;
}
.nav-item:hover { background: var(--surface-high); color: var(--text); }
.nav-item.active { background: var(--accent-dim); color: var(--accent); }
.nav-item.active::before {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  bottom: 20%;
  width: 2px;
  background: var(--accent);
  border-radius: 2px 0 0 2px;
}

.nav-item__dot    { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot--pending     { background: var(--yellow); }
.dot--approved    { background: var(--green); }
.dot--rejected    { background: var(--red); }
.dot--published   { background: var(--accent); }
.dot--unpublished { background: #f97316; }

.badge {
  margin-left: auto;
  background: var(--yellow);
  color: #000;
  font-size: .625rem;
  font-weight: 700;
  padding: .1rem .4rem;
  border-radius: 99px;
  line-height: 1.4;
}
.badge--alert { background: var(--red); color: #fff; }

/* Stats in sidebar */
.sidebar__stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--border-dim);
  border-bottom: 1px solid var(--border-dim);
  margin: .5rem 0;
}
.stat { padding: .75rem .5rem; text-align: center; }
.stat__num   { display: block; font-size: 1.125rem; font-weight: 700; color: var(--text); }
.stat__label { font-size: .5625rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }

/* Portals toggle */
.portals-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .875rem;
  background: none;
  border: none;
  color: var(--muted);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  margin: .25rem 0 0;
  transition: color .15s;
}
.portals-toggle:hover { color: var(--text); }
.portals-toggle__arrow { transition: transform .2s; flex-shrink: 0; }
.portals-toggle[aria-expanded="true"] .portals-toggle__arrow { transform: rotate(180deg); }

.portals-list { display: none; padding: 0 .5rem .5rem; }
.portals-list--open { display: block; }

.portal-link {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .375rem .375rem;
  color: var(--muted);
  text-decoration: none;
  font-size: .8125rem;
  border-radius: var(--radius);
  transition: background .15s, color .15s;
}
.portal-link:hover, .portal-link.active { background: var(--surface-high); color: var(--text); }

.portal-avatar {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--surface-var);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .5625rem;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  letter-spacing: -.02em;
}

.portal-link__name { flex: 1; }
.portal-link__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--surface-var); flex-shrink: 0; }
.portal-link__dot.dot--live { background: var(--green); box-shadow: 0 0 5px rgba(16,185,129,.5); }
.portal-link__count {
  font-size: .5625rem;
  background: var(--surface-var);
  color: var(--muted);
  padding: .1rem .3rem;
  border-radius: 99px;
  font-weight: 600;
  flex-shrink: 0;
}

/* ── Main ── */
.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-h));
}

/* ── Portal filter bar (published page) ── */
.portal-filter-bar { display: flex; flex-wrap: nowrap; gap: .375rem; overflow-x: auto; scrollbar-width: none; }
.portal-filter-bar::-webkit-scrollbar { display: none; }
.portal-filter-btn { font-size: .75rem; font-weight: 600; padding: .3rem .75rem; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); text-decoration: none; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.portal-filter-btn:hover { background: var(--surface-high); color: var(--text); }
.portal-filter-btn--active { background: var(--surface-var); color: var(--text); border-color: var(--border); }

/* ── Stats row ── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 1.25rem 1.25rem 0;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  border-left: 3px solid transparent;
}
.stat-card--total    { border-left-color: var(--accent); }
.stat-card--pending  { border-left-color: var(--yellow); }
.stat-card--approved { border-left-color: var(--green); }
.stat-card--rejected { border-left-color: var(--red); }

.stat-card__label {
  font-size: .625rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
}
.stat-card__num {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin: .125rem 0;
}
.stat-card__sub { font-size: .6875rem; color: var(--muted); }

/* ── Article list ── */
.list-header {
  padding: 1.25rem 1.25rem .625rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
}
.list-header__row { display: flex; align-items: center; justify-content: space-between; }
.list-header__title { font-size: .9375rem; font-weight: 600; color: var(--text); }
.list-header__count { font-size: .8125rem; color: var(--muted); }

.article-list { padding: 0 1.25rem; display: flex; flex-direction: column; gap: .5rem; }

.article-card {
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .875rem 1rem;
  transition: border-color .15s, background .15s;
}
.article-card:hover { border-color: rgba(158,202,255,.2); background: var(--surface-high); }

.article-card__check { padding-top: .125rem; flex-shrink: 0; }
.article-card__check input[type=checkbox] { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; }

.article-card__img {
  width: 72px;
  height: 54px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-var);
  flex-shrink: 0;
}
.article-card__img img { width: 100%; height: 100%; object-fit: cover; }

.article-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }

.article-card__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.article-card__time { font-size: .6875rem; color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }

.article-card__title {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  line-height: 1.4;
  display: block;
}
.article-card__title:hover { color: var(--accent); }

.article-card__preview {
  font-size: .8125rem;
  color: var(--muted);
  line-height: 1.55;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.article-card__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .125rem; }

.article-card__actions { display: flex; flex-direction: column; gap: .375rem; flex-shrink: 0; }

/* ── Tags & badges ── */
.source-tag {
  background: var(--accent-dim);
  color: var(--accent);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .15rem .45rem;
  border-radius: 3px;
}
.cat-tag {
  background: rgba(255,255,255,.06);
  color: var(--muted);
  font-size: .625rem;
  font-weight: 600;
  padding: .15rem .45rem;
  border-radius: 3px;
}
.tag {
  background: var(--surface-var);
  color: var(--muted);
  font-size: .625rem;
  padding: .15rem .4rem;
  border-radius: 3px;
}
.quality-badge { font-size: .625rem; font-weight: 700; padding: .15rem .4rem; border-radius: 3px; }
.quality--high { background: var(--green-dim);  color: var(--green); }
.quality--mid  { background: var(--yellow-dim); color: var(--yellow); }
.quality--low  { background: var(--red-dim);    color: var(--red); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .375rem .75rem;
  border: none;
  border-radius: var(--radius);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s, background .15s;
  white-space: nowrap;
}
.btn:hover { opacity: .85; }
.btn--approve { background: var(--green-dim); color: var(--green); border: 1px solid rgba(16,185,129,.25); }
.btn--reject  { background: var(--red-dim);   color: var(--red);   border: 1px solid rgba(244,63,94,.25); }
.btn--edit    { background: var(--surface-var); color: var(--muted); border: 1px solid var(--border-dim); }
.btn--delete  { background: transparent; color: var(--red); border: 1px solid rgba(244,63,94,.3); margin-top: .5rem; }
.btn--save    { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(158,202,255,.2); margin-top: .5rem; }
.btn--save:hover { background: rgba(158,202,255,.2); }
.btn--save:disabled { opacity: .5; cursor: not-allowed; }
.save-result  { min-height: 1.25rem; margin-top: .25rem; text-align: center; }
.btn--full    { width: 100%; }

/* ── Bulk bar ── */
.bulk-bar {
  background: var(--surface-high);
  border-bottom: 1px solid var(--border-dim);
  padding: .625rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.bulk-bar__count { font-size: .8125rem; color: var(--muted); margin-right: auto; }

/* ── Pagination ── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
}
.page-btn { color: var(--accent); text-decoration: none; font-size: .875rem; padding: .375rem .75rem; border-radius: var(--radius); border: 1px solid rgba(158,202,255,.2); transition: background .15s; }
.page-btn:hover { background: var(--accent-dim); }
.page-info { color: var(--muted); font-size: .875rem; }

/* ── Empty state ── */
.empty-state { padding: 5rem 1.25rem; text-align: center; color: var(--muted); }

/* ── Detail view ── */
.detail-layout { display: grid; grid-template-columns: 1fr 280px; gap: 1.25rem; padding: 1.25rem; align-items: start; }
.detail-img { width: 100%; max-height: 340px; object-fit: cover; border-radius: 8px; margin-bottom: 1.25rem; }
.detail-title { font-size: 1.375rem; font-weight: 700; line-height: 1.35; margin-bottom: .75rem; color: var(--text); }
.detail-meta { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.detail-link { color: var(--accent); text-decoration: none; font-size: .8125rem; }
.detail-link:hover { text-decoration: underline; }
.detail-body { font-size: .9375rem; line-height: 1.75; color: var(--muted); white-space: pre-wrap; }

.detail-sidebar {
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  padding: 1.25rem;
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.form-group { display: flex; flex-direction: column; gap: .375rem; }
.form-label { font-size: .625rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.form-hint { font-weight: 400; opacity: .7; }
.form-select, .form-input {
  padding: .5rem .75rem;
  background: var(--surface-high);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  font-size: .875rem;
  color: var(--text);
  outline: none;
  width: 100%;
  transition: border-color .15s;
}
.form-select:focus, .form-input:focus { border-color: rgba(158,202,255,.4); }
.detail-actions { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.quality-bar { height: 5px; background: var(--surface-var); border-radius: 99px; overflow: hidden; margin-top: .25rem; }
.quality-bar__fill { height: 100%; background: var(--accent); border-radius: 99px; }

/* ── Back link ── */
.back-link { color: var(--accent); text-decoration: none; font-size: .875rem; opacity: .8; }
.back-link:hover { opacity: 1; }

/* ── Portal page ── */
.portal-page { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }

.portal-breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--muted); }
.portal-breadcrumb a { color: var(--muted); text-decoration: none; }
.portal-breadcrumb a:hover { color: var(--accent); }
.portal-breadcrumb__current { color: var(--accent); }

.portal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--surface); border: 1px solid var(--border-dim); border-radius: 10px; padding: 1.25rem 1.5rem; }
.portal-header__left { display: flex; align-items: center; gap: 1rem; }
.portal-header__avatar { width: 52px; height: 52px; border-radius: 10px; background: var(--surface-var); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 700; color: var(--accent); letter-spacing: -.02em; flex-shrink: 0; }
.portal-header__name { font-size: 1.375rem; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.portal-header__meta { display: flex; align-items: center; gap: .75rem; margin-top: .25rem; }
.portal-header__domain { font-size: .8125rem; color: var(--muted); }
.portal-header__actions { display: flex; gap: .625rem; }

.portal-status { display: flex; align-items: center; gap: .375rem; font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.portal-status__dot { width: 6px; height: 6px; border-radius: 50%; }
.portal-status--active { color: var(--green); }
.portal-status--active .portal-status__dot { background: var(--green); box-shadow: 0 0 6px rgba(16,185,129,.6); }
.portal-status--idle { color: var(--muted); }
.portal-status--idle .portal-status__dot { background: var(--muted); }

.portal-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.portal-stat-card { background: var(--surface); border: 1px solid var(--border-dim); border-radius: 8px; padding: 1.125rem 1.25rem; border-left: 3px solid var(--surface-var); }
.portal-stat-card--pending  { border-left-color: var(--yellow); }
.portal-stat-card--approved { border-left-color: var(--green); }
.portal-stat-card--rejected { border-left-color: var(--red); }
.portal-stat__label { font-size: .625rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.portal-stat__num { font-size: 1.75rem; font-weight: 700; color: var(--text); line-height: 1.1; margin: .25rem 0 .125rem; }
.portal-stat__sub { font-size: .6875rem; color: var(--muted); }

.portal-feed-card { background: var(--surface); border: 1px solid var(--border-dim); border-radius: 10px; overflow: hidden; }
.portal-feed-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-dim); display: flex; align-items: center; justify-content: space-between; }
.portal-feed-header__title { font-size: .9375rem; font-weight: 600; color: var(--text); }
.portal-feed-header__new { display: flex; align-items: center; gap: .375rem; font-size: .75rem; color: var(--green); font-weight: 600; }
.portal-feed-header__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 5px rgba(16,185,129,.5); }

.portal-feed { }
.portal-feed-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-dim); transition: background .15s; }
.portal-feed-item:last-child { border-bottom: none; }
.portal-feed-item:hover { background: var(--surface-high); }

.portal-feed-item__img { width: 88px; height: 60px; border-radius: 5px; overflow: hidden; background: var(--surface-var); flex-shrink: 0; }
.portal-feed-item__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(30%); transition: filter .2s; }
.portal-feed-item:hover .portal-feed-item__img img { filter: grayscale(0); }

.portal-feed-item__body { flex: 1; min-width: 0; }
.portal-feed-item__meta { display: flex; align-items: center; gap: .625rem; margin-bottom: .3rem; }
.portal-feed-meta-cat { font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.portal-feed-meta-time { font-size: .625rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.portal-feed-item__title { font-size: .9375rem; font-weight: 600; color: var(--text); text-decoration: none; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s; }
.portal-feed-item__title:hover { color: var(--accent); }
.portal-feed-item__preview { font-size: .8125rem; color: var(--muted); line-height: 1.5; margin-top: .25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.portal-feed-item__actions { display: flex; flex-direction: column; gap: .375rem; flex-shrink: 0; }
.portal-feed-item__status { flex-shrink: 0; }

.status-pill { font-size: .625rem; font-weight: 700; padding: .2rem .5rem; border-radius: 99px; text-transform: uppercase; letter-spacing: .05em; }
.status-pill--approved { background: var(--green-dim); color: var(--green); }
.status-pill--rejected { background: var(--red-dim); color: var(--red); }

.portal-feed-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border-dim); display: flex; align-items: center; justify-content: center; gap: 1rem; }

.portal-empty { padding: 3rem 1.5rem; text-align: center; color: var(--muted); line-height: 1.8; }

/* ── Portal Management page ── */
.pm-page { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }

/* Stat cards */
.pm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.pm-stat-card { background: var(--surface-high); border: 1px solid var(--border); border-radius: .75rem; padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.pm-stat-card__label { font-size: .6875rem; font-weight: 600; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; margin-bottom: .5rem; }
.pm-stat-card__num { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--text); }
.pm-stat-card__num--green { color: var(--green); }
.pm-stat-card__num--status { font-size: 1.25rem; font-weight: 600; display: flex; align-items: center; gap: .45rem; }
.pm-stat-card__num--status::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); flex-shrink: 0; }
.pm-stat-card__icon { width: 48px; height: 48px; border-radius: .5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pm-stat-card__icon--blue  { background: rgba(33,117,155,.15); color: #21759b; }
.pm-stat-card__icon--green { background: var(--green-dim); color: var(--green); }
.pm-stat-card__icon--yellow{ background: var(--yellow-dim); color: var(--yellow); }

/* Mid section */
.pm-mid { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; }

/* Chart card */
.pm-chart-card { background: var(--surface-high); border: 1px solid var(--border); border-radius: .75rem; overflow: hidden; }
.pm-chart-card__header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-dim); display: flex; align-items: center; justify-content: space-between; }
.pm-chart-card__title { font-size: .9375rem; font-weight: 600; color: var(--text); }
.pm-chart-legend { display: flex; gap: 1rem; }
.pm-chart-legend__item { font-size: .75rem; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: .35rem; }
.pm-chart-legend__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.pm-chart-body { display: flex; align-items: flex-end; gap: .625rem; padding: 1rem 1.5rem 1.25rem; height: 200px; }
.pm-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .375rem; height: 100%; }
.pm-bar-col__label { font-size: .6875rem; font-weight: 600; color: var(--muted); }
.pm-bar-col__track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.pm-bar-col__fill { width: 100%; background: rgba(158,202,255,.35); border-radius: .25rem .25rem 0 0; min-height: 4px; transition: background .2s; }
.pm-bar-col:hover .pm-bar-col__fill { background: var(--accent); }
.pm-bar-col__count { font-size: .6875rem; color: var(--muted); }

/* Add card */
.pm-add-card { background: var(--surface-high); border: 1px solid rgba(158,202,255,.2); border-radius: .75rem; padding: 2rem 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1rem; }
.pm-add-card__icon { color: var(--accent); opacity: .8; }
.pm-add-card__title { font-size: 1.125rem; font-weight: 600; color: var(--text); }
.pm-add-card__desc { font-size: .8125rem; color: var(--muted); line-height: 1.6; }
.pm-add-card__btn { display: flex; align-items: center; gap: .5rem; background: var(--accent); color: #051424; font-size: .875rem; font-weight: 700; border: none; border-radius: .5rem; padding: .75rem 1.5rem; cursor: pointer; transition: opacity .15s; }
.pm-add-card__btn:hover { opacity: .85; }

/* Add form */
.pm-add-form { background: var(--surface); border: 1px solid var(--border-dim); border-radius: .75rem; padding: 1.5rem; }
.pm-add-form__title { font-size: .9375rem; font-weight: 600; color: var(--text); margin-bottom: 1.25rem; }
.pm-add-form__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.pm-field-wide { grid-column: span 2; }
.pm-add-form__actions { grid-column: span 4; display: flex; justify-content: flex-end; gap: .625rem; padding-top: .25rem; }
.pm-preview-header { display:flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:600; color:var(--text); margin-bottom:1rem; padding-bottom:.75rem; border-bottom:1px solid var(--border-dim); }
.pm-preview-articles { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.25rem; }
.pm-preview-card { background:var(--surface-var); border:1px solid var(--border-dim); border-radius:.5rem; overflow:hidden; }
.pm-preview-card__img { width:100%; height:140px; object-fit:cover; display:block; }
.pm-preview-card__no-img { width:100%; height:140px; background:var(--surface-high); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.75rem; }
.pm-preview-card__body { padding:.875rem; display:flex; flex-direction:column; gap:.5rem; }
.pm-preview-card__meta { display:flex; flex-wrap:wrap; gap:.3rem; }
.pm-preview-card__title { font-size:.9375rem; font-weight:600; color:var(--text); line-height:1.4; text-decoration:none; display:block; }
.pm-preview-card__title:hover { color:var(--accent); }
.pm-preview-card__body-text { font-size:.8125rem; color:var(--muted); line-height:1.55; }
.pm-preview-card__stats { font-size:.75rem; color:var(--accent); font-weight:500; }
.pm-preview-card__link { font-size:.75rem; color:var(--accent); text-decoration:none; }
.pm-preview-card__link:hover { text-decoration:underline; }
.pm-preview-actions { display:flex; justify-content:flex-end; gap:.75rem; padding-top:.75rem; border-top:1px solid var(--border-dim); }

/* Table card */
.pm-table-card { background: var(--surface-high); border: 1px solid var(--border); border-radius: .75rem; overflow: hidden; }
.pm-table-card__header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-dim); background: rgba(13,28,45,.5); display: flex; align-items: center; justify-content: space-between; }
.pm-table-card__title { font-size: .9375rem; font-weight: 600; color: var(--text); }
.pm-table-card__sub { font-size: .875rem; color: var(--muted); font-weight: 400; margin-left: .5rem; }
.pm-table-card__actions { display: flex; gap: .5rem; }
.pm-icon-btn { background: var(--surface-var); border: none; color: var(--muted); width: 34px; height: 34px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color .15s, background .15s; text-decoration: none; }
.pm-icon-btn:hover { color: var(--accent); background: var(--accent-dim); }

.pm-table { width: 100%; border-collapse: collapse; }
.pm-table th { padding: .875rem 1.25rem; text-align: left; font-size: .6875rem; font-weight: 600; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--border-dim); background: rgba(1,15,31,.3); }
.pm-table td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-dim); vertical-align: middle; }
.pm-table tbody tr:last-child td { border-bottom: none; }
.pm-tr { transition: transform .15s, background .15s; }
.pm-tr:hover { background: var(--surface-var); transform: translateX(4px); }
.pm-tr--inactive { opacity: .45; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.pm-portal-cell { display: flex; align-items: center; gap: .875rem; }
.pm-portal-avatar { width: 40px; height: 40px; border-radius: var(--radius); background: var(--surface-var); border: 1px solid var(--border); color: var(--accent); font-weight: 700; font-size: .875rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pm-portal-name { font-weight: 600; color: var(--text); font-size: .9375rem; }
.pm-portal-slug { font-size: .75rem; color: var(--muted); font-family: monospace; margin-top: .1rem; }

.pm-domain { font-size: .875rem; color: var(--accent); }
.pm-status { display: flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 600; margin-top: .35rem; }
.pm-status__dot { width: 7px; height: 7px; border-radius: 50%; }
.pm-status--on { color: var(--green); }
.pm-status--on .pm-status__dot { background: var(--green); }
.pm-status--off { color: var(--yellow); }
.pm-status--off .pm-status__dot { background: var(--yellow); }

.pm-selector { font-family: monospace; font-size: .775rem; color: var(--text); }
.pm-rss-url { font-family: monospace; font-size: .7rem; color: var(--muted); margin-top: .25rem; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pm-sync-time { font-family: monospace; font-size: .8125rem; color: var(--text); }
.pm-sync-none { color: var(--muted); }
.pm-sync-status { font-size: .75rem; font-weight: 600; margin-top: .2rem; }
.pm-sync-status--ok  { color: var(--green); }
.pm-sync-status--err { color: #f87171; font-weight: 500; }

.pm-article-count { font-size: 1.125rem; font-weight: 700; color: var(--text); text-decoration: none; }
.pm-article-count:hover { color: var(--accent); }
.pm-no-count { font-size: 1.125rem; font-weight: 700; color: var(--muted); }

.pm-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: .375rem; }
.pm-action-btn { background: none; border: none; width: 34px; height: 34px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); transition: color .15s, background .15s; }
.pm-action-btn--toggle:hover { color: var(--accent); background: var(--accent-dim); }
.pm-action-btn--delete:hover { color: var(--red); background: var(--red-dim); }

.pm-table-footer { padding: .875rem 1.5rem; background: rgba(13,28,45,.3); border-top: 1px solid var(--border-dim); font-size: .8125rem; color: var(--muted); }

/* ── Settings Drawer ── */
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .25s; }
.drawer-overlay--visible { opacity: 1; pointer-events: all; }

.drawer { position: fixed; top: 0; left: 0; height: 100vh; width: 420px; max-width: 100vw; background: var(--surface); border-right: 1px solid var(--border); z-index: 100; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1); }
.drawer--open { transform: translateX(0); }

.drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 1.125rem 1.25rem; border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
.drawer__title { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 700; color: var(--text); }
.drawer__close { background: none; border: none; color: var(--muted); cursor: pointer; padding: .375rem; border-radius: var(--radius); transition: color .15s, background .15s; display: flex; }
.drawer__close:hover { color: var(--text); background: var(--surface-high); }

.drawer__body { overflow-y: auto; padding: 1.25rem 1.25rem 3rem; height: calc(100vh - 57px - 75px); }

.drawer__section { background: var(--surface-high); border: 1px solid var(--border-dim); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.25rem; }
.drawer__section-header { display: flex; gap: .875rem; align-items: flex-start; padding: 1rem 1.125rem; border-bottom: 1px solid var(--border-dim); }
.drawer__section-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius); background: var(--accent-dim); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.drawer__section-title { font-size: .875rem; font-weight: 600; color: var(--text); margin-bottom: .2rem; }
.drawer__section-desc { font-size: .775rem; color: var(--muted); line-height: 1.55; }
.drawer__fields { padding: 1.125rem; display: flex; flex-direction: column; gap: 1rem; }

.settings-select { background: var(--surface-var); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: .875rem; padding: .575rem .75rem; outline: none; width: 100%; transition: border-color .15s; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a9bb4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.25rem; }
.settings-select:focus { border-color: var(--accent); }
.settings-select option { background: var(--surface-var); }

.drawer__footer { border-top: 1px solid var(--border-dim); padding: 1rem 1.25rem; flex-shrink: 0; display: flex; flex-direction: column; gap: .75rem; }
.drawer__footer-actions { display: flex; gap: .625rem; justify-content: flex-end; }
.drawer__cancel { background: none; border: 1px solid var(--border); border-radius: var(--radius); color: var(--muted); font-size: .875rem; padding: .5rem 1rem; cursor: pointer; transition: color .15s, border-color .15s; }
.drawer__cancel:hover { color: var(--text); border-color: var(--text); }
.drawer__save { background: var(--accent); color: #051424; font-size: .875rem; font-weight: 600; border: none; border-radius: var(--radius); padding: .5rem 1.25rem; cursor: pointer; transition: opacity .15s; }
.drawer__save:hover { opacity: .85; }
.drawer__save:disabled { opacity: .5; cursor: not-allowed; }

.drawer__toast { font-size: .8125rem; padding: 0; border-radius: var(--radius); transition: all .2s; }
.drawer__toast--ok  { background: var(--green-dim); color: var(--green); padding: .6rem .875rem; border: 1px solid rgba(16,185,129,.2); }
.drawer__toast--err { background: var(--red-dim);   color: var(--red);   padding: .6rem .875rem; border: 1px solid rgba(244,63,94,.2); }

/* ── AI Analysis panel ── */
.ai-analysis { border: 1px solid var(--border-dim); border-radius: var(--radius); overflow: hidden; margin-top: 1rem; }
.ai-analysis__header { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; font-size: .8125rem; font-weight: 600; color: var(--accent); border-bottom: 1px solid var(--border-dim); background: var(--accent-dim); }
.ai-result { padding: 1rem; }
.ai-result--empty { display: flex; align-items: center; justify-content: center; min-height: 60px; }
.ai-result__row { display: flex; justify-content: space-between; align-items: center; }
.ai-result__label { font-size: .8125rem; color: var(--muted); }
.ai-result__value { font-size: .9375rem; font-weight: 700; color: var(--text); }
.ai-score-bar { height: 6px; background: var(--surface-high); border-radius: 99px; overflow: hidden; margin-top: .5rem; }
.ai-score-bar__fill { height: 100%; border-radius: 99px; transition: width .4s ease; }
.ai-result__bias { font-size: .75rem; font-weight: 600; padding: .2rem .6rem; border-radius: 99px; }
.bias--neutral           { background: rgba(148,163,184,.15); color: #94a3b8; }
.bias--left-leaning      { background: rgba(99,102,241,.15);  color: #818cf8; }
.bias--right-leaning     { background: rgba(245,158,11,.15);  color: var(--yellow); }
.bias--strongly-left     { background: rgba(99,102,241,.25);  color: #a5b4fc; }
.bias--strongly-right    { background: rgba(244,63,94,.15);   color: var(--red); }
.ai-result__explanation  { font-size: .75rem; color: var(--muted); margin-top: .75rem; line-height: 1.5; font-style: italic; }
.btn--analyze { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(158,202,255,.2); display: flex; align-items: center; justify-content: center; gap: .4rem; border-radius: 0 0 var(--radius) var(--radius); padding: .625rem; font-size: .8125rem; font-weight: 500; cursor: pointer; width: 100%; transition: background .15s; }
.btn--analyze:hover { background: rgba(158,202,255,.2); }
.btn--analyze:disabled { opacity: .5; cursor: not-allowed; }
.btn--publish { background: var(--green-dim); color: var(--green); border: 1px solid rgba(52,211,153,.2); display: flex; align-items: center; justify-content: center; gap: .4rem; border-radius: var(--radius); padding: .625rem; font-size: .8125rem; font-weight: 500; cursor: pointer; width: 100%; transition: background .15s; margin-bottom: .5rem; }
.btn--publish:hover { background: rgba(52,211,153,.2); }
.btn--publish:disabled { opacity: .5; cursor: not-allowed; }
.btn--published { background: var(--surface-high); color: var(--muted); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: .4rem; border-radius: var(--radius); padding: .625rem; font-size: .8125rem; margin-bottom: .5rem; }
.publish-result { text-align: center; margin-bottom: .5rem; min-height: 1.2rem; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Sidebar bottom ── */
.sidebar__bottom { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border-dim); }

/* ── Settings page ── */
.sp-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; padding: 1.5rem; align-items: start; min-height: calc(100vh - var(--header-h)); }
.sp-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.sp-sidebar { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; margin-top: 3rem; }

.sp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .25rem; }
.sp-title { font-size: 1.5rem; font-weight: 700; color: var(--text); }
.sp-tabs { display: flex; gap: 1.5rem; }
.sp-tab { font-size: .875rem; color: var(--muted); text-decoration: none; padding-bottom: .375rem; transition: color .15s; }
.sp-tab--active { color: var(--accent); border-bottom: 2px solid var(--accent); font-weight: 600; }
.sp-tab:hover:not(.sp-tab--active) { color: var(--text); }
.sp-toast { background: var(--green-dim); color: var(--green); border: 1px solid rgba(16,185,129,.25); border-radius: .5rem; padding: .75rem 1rem; font-size: .875rem; }

/* Glass panel */
.sp-glass { background: rgba(30,41,59,.4); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.06); border-radius: 1rem; overflow: hidden; }
.sp-glass--pad { padding: 1.25rem; }

/* AI card header */
.sp-card-head { display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem 1.5rem 0; margin-bottom: 1.5rem; }
.sp-card-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: .625rem; background: var(--accent-dim); border: 1px solid rgba(158,202,255,.2); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.sp-card-title { font-size: 1.0625rem; font-weight: 600; color: var(--text); margin-bottom: .3rem; }
.sp-card-desc { font-size: .8125rem; color: var(--muted); line-height: 1.6; max-width: 440px; }

/* Form inside card */
.sp-form { padding: 0 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.sp-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sp-label { font-size: .6875rem; font-weight: 600; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.sp-mono { font-family: monospace; font-size: .8375rem; }
.sp-token-label { display: flex; align-items: center; justify-content: space-between; }
.sp-hint { display: flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--muted); opacity: .7; }

.sp-bulk-actions { display: flex; flex-direction: column; gap: 0; }
.sp-bulk-action-row { display: flex; align-items: center; gap: 1rem; padding: .875rem 0; border-top: 1px solid var(--border-dim); }
.sp-bulk-action-row:first-child { border-top: none; }
.sp-bulk-action-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.sp-bulk-action-title { font-size: .9375rem; font-weight: 600; color: var(--text); }
.sp-bulk-action-desc { font-size: .8125rem; color: var(--muted); }
.sp-bulk-status { font-size: .8125rem; color: var(--muted); white-space: nowrap; }
.sp-toggle-row { display: flex; align-items: center; gap: .6rem; cursor: pointer; color: var(--muted); font-size: .875rem; font-weight: 500; }
.sp-toggle-row input[type=checkbox] { width: 1rem; height: 1rem; accent-color: var(--accent); cursor: pointer; }
.sp-toggle-label { user-select: none; }
.sp-form-footer { display: flex; align-items: center; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-dim); }
.sp-test-btn { display: flex; align-items: center; gap: .4rem; background: none; border: 1px solid var(--border); border-radius: .5rem; color: var(--muted); font-size: .875rem; font-weight: 600; padding: .625rem 1rem; cursor: pointer; transition: all .15s; }
.sp-test-btn:hover { color: var(--text); border-color: var(--text); }
.sp-test-btn:disabled { opacity: .5; cursor: not-allowed; }
.sp-test-result { font-size: .8125rem; flex: 1; }
.sp-test-result--ok  { color: var(--green); }
.sp-test-result--err { color: var(--red); }
.sp-save-btn { margin-left: auto; background: var(--accent); color: #051424; font-size: .9375rem; font-weight: 700; border: none; border-radius: .75rem; padding: .75rem 2rem; cursor: pointer; transition: opacity .15s, transform .1s; }
.sp-save-btn:hover { opacity: .9; transform: scale(1.02); }

/* Bottom section grid */
.sp-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.sp-bottom-chart { display: flex; flex-direction: column; }
.sp-bottom-portals { }

/* Mini section headers */
.sp-mini-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.sp-mini-title { font-size: .875rem; font-weight: 600; color: var(--text); }
.sp-mini-badge { font-size: .6875rem; font-weight: 700; color: var(--green); background: var(--green-dim); padding: .15rem .5rem; border-radius: 99px; }
.sp-mini-link { font-size: .75rem; color: var(--accent); text-decoration: none; }
.sp-mini-link:hover { text-decoration: underline; }

/* Chart */
.sp-chart-tall { display: flex; align-items: flex-end; gap: 4px; height: 120px; margin-bottom: .5rem; position: relative; padding-top: 1rem; }
.sp-chart-tall::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--border-dim) 1px, transparent 1px) top / 100% 33.33%,
    linear-gradient(var(--border-dim) 1px, transparent 1px) top / 100% 66.66%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
.sp-chart-col { flex: 1; display: flex; align-items: flex-end; height: 100%; position: relative; z-index: 1; }
.sp-chart-bar { width: 100%; background: linear-gradient(to top, rgba(99,179,237,.55), rgba(99,179,237,.12)); border-radius: 3px 3px 0 0; min-height: 3px; transition: all .15s; cursor: default; }
.sp-chart-col:hover .sp-chart-bar { background: linear-gradient(to top, var(--accent), rgba(99,179,237,.35)); transform: scaleX(1.08); }
.sp-chart-col:last-child .sp-chart-bar { background: linear-gradient(to top, var(--green), rgba(52,211,153,.15)); }
.sp-chart-labels { display: flex; justify-content: space-between; font-size: .6375rem; color: var(--muted); font-family: monospace; margin-bottom: .875rem; letter-spacing: .01em; }
.sp-chart-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--border-dim); }
.sp-chart-stat { text-align: center; padding: .25rem 0; }
.sp-chart-stat__num { display: block; font-size: 1.375rem; font-weight: 700; color: var(--accent); letter-spacing: -.02em; }
.sp-chart-stat__label { display: block; font-size: .6875rem; color: var(--muted); margin-top: .2rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }

/* Portal status list (expanded) */
.sp-portal-status-list { display: flex; flex-direction: column; gap: .375rem; }
.sp-portal-status-row { display: flex; align-items: center; justify-content: space-between; padding: .5rem .375rem; border-radius: .375rem; transition: background .15s; }
.sp-portal-status-row:hover { background: var(--surface-var); }
.sp-portal-status-left { display: flex; align-items: center; gap: .625rem; }
.sp-portal-status-avatar { width: 28px; height: 28px; border-radius: 4px; background: var(--surface-var); border: 1px solid var(--border-dim); color: var(--accent); font-size: .6875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sp-portal-status-name { font-size: .8375rem; color: var(--text); font-weight: 500; }
.sp-portal-status-domain { font-size: .7rem; color: var(--muted); }
.sp-portal-status-right { display: flex; align-items: center; gap: .625rem; }
.sp-portal-sync { font-size: .7rem; color: var(--muted); font-family: monospace; }
.sp-portal-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sp-portal-dot--on  { background: var(--green); }
.sp-portal-dot--off { background: var(--yellow); }
.sp-portal-status-val { display: flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; }
.sp-portal-status-val--ok  { color: var(--green); }
.sp-portal-status-val--off { color: var(--yellow); }
.sp-portals-link { display: block; text-align: center; font-size: .8125rem; color: var(--muted); text-decoration: none; padding: .5rem; border: 1px solid var(--border-dim); border-radius: .5rem; transition: color .15s, border-color .15s; margin-top: .75rem; }
.sp-portals-link:hover { color: var(--accent); border-color: var(--accent); }

/* Portal status list */
.sp-portal-status-list { display: flex; flex-direction: column; gap: .625rem; margin-bottom: 1rem; }
.sp-portal-status-row { display: flex; align-items: center; justify-content: space-between; }
.sp-portal-status-left { display: flex; align-items: center; gap: .5rem; }
.sp-portal-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sp-portal-dot--on  { background: var(--green); }
.sp-portal-dot--off { background: var(--yellow); }
.sp-portal-status-name { font-size: .8375rem; color: var(--muted); }
.sp-portal-status-val { font-size: .75rem; font-weight: 600; font-family: monospace; }
.sp-portal-status-val--ok  { color: var(--green); }
.sp-portal-status-val--off { color: var(--yellow); }
.sp-portals-link { display: block; text-align: center; font-size: .8125rem; color: var(--muted); text-decoration: none; padding: .5rem; border: 1px solid var(--border-dim); border-radius: .5rem; transition: color .15s, border-color .15s; }
.sp-portals-link:hover { color: var(--accent); border-color: var(--accent); }

/* Right sidebar */
.sp-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }
.sp-health-head { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 600; color: var(--accent); margin-bottom: 1.25rem; }
.sp-health-section { margin-bottom: 1rem; }
.sp-health-row-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.sp-health-bar-track { height: 6px; background: var(--surface-var); border-radius: 99px; overflow: hidden; margin-bottom: .4rem; }
.sp-health-bar-fill { height: 100%; background: var(--accent); border-radius: 99px; }
.sp-health-sub { font-size: .7rem; color: var(--muted); }
.sp-health-divider { height: 1px; background: var(--border-dim); margin: .75rem 0; }
.sp-health-rows { display: flex; flex-direction: column; gap: .625rem; }
.sp-health-row { display: flex; justify-content: space-between; align-items: center; }
.sp-health-key { font-size: .8375rem; color: var(--muted); }
.sp-health-val { font-size: .875rem; font-weight: 700; font-family: monospace; }
.sp-health-val--blue   { color: var(--accent); }
.sp-health-val--green  { color: var(--green); }
.sp-health-val--yellow { color: var(--yellow); }
.sp-health-val--red    { color: var(--red); }
.sp-health-badge { font-size: .7rem; font-weight: 600; background: var(--accent-dim); color: var(--accent); padding: .15rem .5rem; border-radius: 4px; font-family: monospace; }

/* Stat pills */
.sp-stat-pills { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; margin-bottom: 1rem; }
.sp-stat-pill { border-radius: .625rem; padding: .75rem; border: 1px solid var(--border-dim); }
.sp-stat-pill--blue   { background: rgba(33,117,155,.12); border-color: rgba(33,117,155,.2); }
.sp-stat-pill--yellow { background: var(--yellow-dim); border-color: rgba(245,158,11,.2); }
.sp-stat-pill--green  { background: var(--green-dim); border-color: rgba(16,185,129,.2); }
.sp-stat-pill--red    { background: var(--red-dim); border-color: rgba(244,63,94,.2); }
.sp-stat-pill__num   { font-size: 1.375rem; font-weight: 700; line-height: 1; margin-bottom: .2rem; }
.sp-stat-pill--blue   .sp-stat-pill__num { color: #7dd3fc; }
.sp-stat-pill--yellow .sp-stat-pill__num { color: var(--yellow); }
.sp-stat-pill--green  .sp-stat-pill__num { color: var(--green); }
.sp-stat-pill--red    .sp-stat-pill__num { color: var(--red); }
.sp-stat-pill__label { font-size: .7rem; color: var(--muted); font-weight: 500; }

/* AI config status */
.sp-ai-status__label { font-size: .6875rem; font-weight: 600; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; margin-bottom: .625rem; }
.sp-ai-status__row { display: flex; align-items: center; justify-content: space-between; padding: .4rem 0; border-bottom: 1px solid var(--border-dim); }
.sp-ai-status__row:last-child { border-bottom: none; }
.sp-ai-status__key { font-size: .8125rem; color: var(--muted); }
.sp-ai-status__missing { display: flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--yellow); }
.sp-ai-status__ok { display: flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--green); font-weight: 600; }

/* Insight card */
.sp-insight-card { position: relative; background: linear-gradient(135deg, rgba(13,28,45,.95) 0%, rgba(30,41,59,.7) 100%); border: 1px solid rgba(158,202,255,.15); border-radius: 1rem; padding: 1.5rem; overflow: hidden; }
.sp-insight-glow { position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(158,202,255,.15) 0%, transparent 70%); pointer-events: none; }
.sp-insight-icon { color: var(--accent); margin-bottom: .75rem; }
.sp-insight-label { font-size: .6875rem; font-weight: 700; color: var(--accent); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .5rem; }
.sp-insight-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .625rem; line-height: 1.4; }
.sp-insight-text { font-size: .8125rem; color: var(--muted); line-height: 1.6; margin-bottom: 1rem; }
.sp-insight-link { font-size: .8125rem; font-weight: 600; color: var(--accent); text-decoration: none; transition: opacity .15s; }
.sp-insight-link:hover { opacity: .75; }

/* Quick actions */
.sp-qa-title { font-size: .875rem; font-weight: 600; color: var(--text); margin-bottom: .875rem; }
.sp-qa-list { display: flex; flex-direction: column; gap: .5rem; }
.sp-qa-item { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: .5rem; text-decoration: none; transition: background .15s; }
.sp-qa-item:hover { background: var(--surface-var); }
.sp-qa-icon { width: 32px; height: 32px; border-radius: .5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sp-qa-icon--blue   { background: rgba(33,117,155,.2); color: #7dd3fc; }
.sp-qa-icon--yellow { background: var(--yellow-dim); color: var(--yellow); }
.sp-qa-text { flex: 1; }
.sp-qa-name { font-size: .875rem; font-weight: 500; color: var(--text); }
.sp-qa-sub { font-size: .75rem; color: var(--muted); margin-top: .1rem; }
.sp-qa-arrow { color: var(--muted); flex-shrink: 0; }

/* Shared fields (reused across settings + portals) */
.settings-field { display: flex; flex-direction: column; gap: .375rem; }
.settings-label { font-size: .8125rem; font-weight: 500; color: var(--muted); }
.settings-input { background: var(--surface-var); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: .875rem; padding: .7rem .875rem; outline: none; transition: border-color .15s; width: 100%; }
.settings-input:focus { border-color: var(--accent); }
.settings-hint { font-size: .75rem; color: var(--muted); }
.settings-input-wrap { position: relative; display: flex; align-items: center; }
.settings-input-wrap .settings-input { padding-right: 2.5rem; }
.settings-toggle-token { position: absolute; right: .625rem; background: none; border: none; color: var(--muted); cursor: pointer; padding: .25rem; display: flex; align-items: center; }
.settings-toggle-token:hover { color: var(--accent); }
.settings-actions { display: flex; justify-content: flex-end; padding-top: .5rem; }
.btn-save { background: var(--accent); color: #051424; font-size: .875rem; font-weight: 600; border: none; border-radius: var(--radius); padding: .625rem 1.25rem; cursor: pointer; transition: opacity .15s; }
.btn-save:hover { opacity: .85; }
.settings-toast { background: var(--green-dim); color: var(--green); border: 1px solid rgba(16,185,129,.25); border-radius: var(--radius); padding: .75rem 1rem; font-size: .875rem; }

/* ── Responsive ── */

/* Large screens: settings sidebar becomes 2-col row */
@media (max-width: 1280px) {
  .sp-layout { grid-template-columns: 1fr 280px; }
}

@media (max-width: 1100px) {
  /* Settings: sidebar drops below main */
  .sp-layout { grid-template-columns: 1fr; }
  .sp-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

  /* Portals: mid section stacks */
  .pm-mid { grid-template-columns: 1fr; }
  .pm-add-card { flex-direction: row; text-align: left; padding: 1.5rem; }
  .pm-add-card__icon { display: none; }
}

@media (max-width: 900px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
  .detail-layout { grid-template-columns: 1fr; }

  /* Article list: smaller padding */
  .article-list { padding: 0 .75rem; }
  .article-card { padding: .75rem .875rem; gap: .625rem; }
  .article-card__img { width: 60px; height: 45px; }

  /* Portal detail: 2-col stats, wrap header */
  .portal-stats { grid-template-columns: 1fr 1fr; }
  .portal-header { flex-wrap: wrap; }
  .portal-header__actions { width: 100%; }

  /* Settings form rows become single column */
  .sp-row-2 { grid-template-columns: 1fr; }
  .sp-bottom-grid { grid-template-columns: 1fr; }
  .sp-form-footer { flex-wrap: wrap; }
  .sp-save-btn { margin-left: 0; width: 100%; justify-content: center; }

  /* Portals stats 2-col */
  .pm-stats { grid-template-columns: 1fr 1fr; }
  .pm-add-form__grid { grid-template-columns: 1fr 1fr; }
  .pm-field-wide { grid-column: span 2; }
}

@media (max-width: 768px) {
  /* Sidebar goes to 1-col */
  .sp-sidebar { grid-template-columns: 1fr; }

  /* Portals table: hide less important columns */
  .pm-table th:nth-child(3),
  .pm-table td:nth-child(3),
  .pm-table th:nth-child(4),
  .pm-table td:nth-child(4) { display: none; }

  /* Portal management: reduce padding */
  .pm-page { padding: 1rem; }
  .pm-portals-page { padding: 1rem; }
}

@media (max-width: 640px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
  .article-card__img { display: none; }
  .article-card { flex-wrap: wrap; }
  .article-card__body { min-width: 0; width: 100%; }
  .list-header__row { flex-wrap: wrap; gap: .375rem; }
  .sidebar { display: none; }
  .main { margin-left: 0; }

  /* Portal detail: single-col stats, stacked feed items */
  .portal-stats { grid-template-columns: 1fr; }
  .portal-feed-item { flex-direction: column; }
  .portal-feed-item__img { width: 100%; height: 160px; }
  .portal-feed-item__actions { flex-direction: row; }
  .portal-page { padding: .75rem; }

  /* Settings full-width */
  .sp-layout { padding: 1rem; gap: 1rem; }
  .sp-header { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .sp-stat-pills { grid-template-columns: 1fr 1fr; }
  .sp-form-footer { flex-direction: column; align-items: stretch; }
  .sp-test-btn { justify-content: center; }
  .sp-save-btn { text-align: center; }

  /* Portals page */
  .pm-stats { grid-template-columns: 1fr 1fr; }
  .pm-add-form__grid { grid-template-columns: 1fr; }
  .pm-field-wide { grid-column: span 1; }
  .pm-add-form__actions { grid-column: span 1; flex-direction: column; }
  .pm-portals-page__header { flex-direction: column; align-items: flex-start; }

  /* Table scrollable horizontally */
  .pm-table-card { overflow-x: auto; }
  .pm-table { min-width: 600px; }
}

/* ── Article preview modal (portals preview) ─────────────────────────────── */
.apm-overlay {
  position: fixed; inset: 0;
  background: rgba(5,20,36,.88);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.apm-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.apm-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}
.apm-dialog__label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.apm-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  padding: .25rem;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.apm-close:hover { color: var(--text); background: var(--surface-high); }
.apm-dialog__body {
  overflow-y: auto;
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
}
.apm-img { width: 100%; max-height: 340px; object-fit: cover; border-radius: 4px; display: block; }
.apm-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}
.apm-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  align-items: center;
}
.apm-body {
  font-size: .9375rem;
  line-height: 1.75;
  color: #b6c8e0;
  white-space: pre-wrap;
  word-break: break-word;
}
.apm-source-link {
  font-size: .8125rem;
  color: var(--accent);
  text-decoration: none;
  border-top: 1px solid var(--border-dim);
  padding-top: .75rem;
}
.apm-source-link:hover { text-decoration: underline; }

/* "Shiko të plotë" button + foot row on preview card */
.pm-preview-card__foot {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .625rem;
}
.pm-preview-card__view-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  font-weight: 600;
  padding: .35rem .75rem;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid rgba(158,202,255,.2);
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s;
}
.pm-preview-card__view-btn:hover { background: rgba(158,202,255,.22); }

/* ── Published-article slim state ────────────────────────────────────────── */
.article-card__wp-link {
  font-size: .75rem;
  color: var(--accent);
  text-decoration: none;
}
.article-card__wp-link:hover { text-decoration: underline; }

.detail-body--published {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  padding: 1rem 1.25rem;
  background: var(--surface-high);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.6;
}
.detail-body--published svg { color: var(--green); flex-shrink: 0; }
.detail-body--published a { color: var(--accent); text-decoration: none; }
.detail-body--published a:hover { text-decoration: underline; }