/* ShiftControl Starter Theme (Visual Readiness) — scoped to SCC frontend classes only */

:root {
  --scc-bg: #0b1220;
  --scc-surface: #111a2b;
  --scc-surface-2: #0f172a;
  --scc-border: rgba(255,255,255,0.08);
  --scc-text: rgba(255,255,255,0.92);
  --scc-muted: rgba(255,255,255,0.72);
  --scc-soft: rgba(255,255,255,0.10);
  --scc-accent: #22d3ee;
  --scc-accent-2: #2dd4bf;
  --scc-accent-violet: #a78bfa;
  --scc-danger: #fb7185;
  --scc-warn: #fbbf24;
  --scc-ok: #34d399;

  --scc-radius: 14px;
  --scc-radius-sm: 10px;
  --scc-pad: 16px;
  --scc-gap: 14px;
  --scc-shadow: 0 8px 24px rgba(0,0,0,0.35);
  --scc-hover-lift: 1px;

  /* Typography + rhythm (POLISH pass) */
  --scc-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --scc-fs: 15px;
  --scc-lh: 1.6;
  --scc-fs-sm: 13px;
  --scc-fs-lg: 18px;
  --scc-h2: 22px;
  --scc-space-1: 6px;
  --scc-space-2: 10px;
  --scc-space-3: 14px;
  --scc-space-4: 18px;
  --scc-space-5: 24px;
}

/* Only apply when ShiftControl containers exist */
.scc-feed,
.scc-profile,
.scc-profile-feed,
.scc-notifications,
.scc-settings {
  color: var(--scc-text);
  font-family: var(--scc-font);
  font-size: var(--scc-fs);
  line-height: var(--scc-lh);
}

/* Shared primitives */
.scc-muted { color: var(--scc-muted); }

.scc-h2 {
  font-size: var(--scc-h2);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}

.scc-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  border: 1px solid var(--scc-border);
  border-radius: var(--scc-radius);
  padding: var(--scc-pad);
  box-shadow: var(--scc-shadow);
}

.scc-stack { display: grid; gap: var(--scc-space-3); }

.scc-actions { display:flex; gap: var(--scc-space-2); align-items:center; flex-wrap:wrap; }

.scc-btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: var(--scc-text);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.scc-btn:hover { border-color: rgba(34, 211, 238, 0.35); background: rgba(34, 211, 238, 0.10); }

.scc-btn-primary {
  border-color: rgba(34, 211, 238, 0.38);
  background: rgba(34, 211, 238, 0.10);
}

.scc-btn-ghost {
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.02);
}

.scc-check { display:flex; gap: 10px; align-items:center; }
.scc-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--scc-accent); }

.scc-notice {
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}
.scc-notice-success { border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.08); }
.scc-notice-error { border-color: rgba(251, 113, 133, 0.35); background: rgba(251, 113, 133, 0.08); }

.scc-settings-header { margin: 0 0 var(--scc-space-3) 0; }

.scc-auth-required {
  background: var(--scc-surface);
  border: 1px solid var(--scc-border);
  border-radius: var(--scc-radius);
  padding: 18px;
  color: var(--scc-muted);
}

.scc-section-title {
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
  margin: 0 0 10px 0;
}

.scc-section-body {
  background: transparent;
}

.scc-feed-list {
  display: grid;
  gap: var(--scc-gap);
}

.scc-post,
.scc-profile-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid var(--scc-border);
  border-radius: var(--scc-radius);
  padding: var(--scc-pad);
  box-shadow: var(--scc-shadow);
}

.scc-post:hover,
.scc-profile-card:hover {
  border-color: rgba(34, 211, 238, 0.22);
  transform: translateY(calc(-1 * var(--scc-hover-lift)));
}

.scc-post,
.scc-profile-card {
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.scc-post-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.scc-author-avatar,
.scc-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.scc-author-name,
.scc-name {
  font-size: 15px;
  font-weight: 650;
  color: var(--scc-text);
}

.scc-post-content {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
  margin: 10px 0 12px 0;
  white-space: pre-wrap;
}

.scc-post-media {
  margin: 10px 0 12px;
}

.scc-post-img {
  width: 100%;
  height: auto;
  border-radius: var(--scc-radius-sm);
  border: 1px solid rgba(255,255,255,0.10);
}

.scc-post-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.scc-post-meta {
  font-size: 13px;
  color: var(--scc-muted);
}

.scc-like-btn,
.scc-comment-submit,
.scc-post-submit,
.scc-follow-btn,
.scc-profile-more {
  appearance: none;
  border: 1px solid rgba(34, 211, 238, 0.25);
  background: rgba(34, 211, 238, 0.08);
  color: rgba(255,255,255,0.92);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.scc-like-btn:hover,
.scc-comment-submit:hover,
.scc-post-submit:hover,
.scc-follow-btn:hover,
.scc-profile-more:hover {
  border-color: rgba(34, 211, 238, 0.45);
  background: rgba(34, 211, 238, 0.12);
}

.scc-like-btn[disabled],
.scc-comment-submit[disabled],
.scc-post-submit[disabled],
.scc-follow-btn[disabled],
.scc-profile-more[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.scc-comment-input,
.scc-post-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--scc-text);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}

.scc-comment-input:focus,
.scc-post-input:focus {
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.10);
}

.scc-counts {
  color: var(--scc-muted);
  font-size: 13px;
  margin-top: 4px;
}

/* SCC-UI-PRIMITIVES-V1: Cover + Header */
.scc-cover-header{
  position: relative;
  width: 100%;
  margin-bottom: var(--sc-gap);
}
.scc-cover{
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(135deg, rgba(9,18,33,0.85), rgba(17,32,68,0.55));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 3 / 1;
  min-height: 160px;
  max-height: 360px;
  overflow: hidden;
}
.scc-header{
  display: flex;
  align-items: center;
  gap: 14px;
}
.scc-header__avatar{
  width: 64px;
  height: 64px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
  flex: 0 0 auto;
}
.scc-header__avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scc-header__title{
  font-size: 18px;
  font-weight: 600;
  color: var(--scc-text);
}
.scc-header__subtitle{
  font-size: 13px;
}
.scc-header--overlay{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(11,18,32,0.55);
  backdrop-filter: blur(8px);
}