/* ============================================================
   KANZ AI France — Admin Dashboard Styles
   ============================================================ */
body.admin-body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevent body scroll, let columns scroll */
  height: 100vh;
  display: flex;
  background-color: var(--bg);
  font-family: var(--font);
}

/* Base Layout */
.admin-layout {
  display: flex;
  width: 100vw;
  height: 100vh;
}

/* Sidebar */
.sidebar {
  width: 240px;
  background-color: var(--bg-white);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  flex-shrink: 0;
}

.sidebar__header {
  padding: 0 20px;
  margin-bottom: 30px;
}

.sidebar__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.04em;
}

.sidebar__logo-text { color: var(--text); }
.sidebar__logo-accent { color: var(--primary); position: relative; }

.sidebar__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  color: var(--text-3);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: all var(--transition);
}

.nav-item:hover {
  background-color: var(--bg-muted);
  color: var(--text);
}

.nav-item.active {
  background-color: var(--primary-glow);
  color: var(--primary);
  font-weight: 600;
}

.nav-item svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-item.active svg {
  stroke: var(--primary);
}

.sidebar__footer {
  padding: 16px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.user-profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition);
}

.user-profile:hover {
  background-color: var(--bg-muted);
}

.user-profile__left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--bg-muted);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text);
}

.user-role {
  font-size: 0.75rem;
  color: var(--text-4);
}

.user-profile__right svg {
    width: 16px; height: 16px; color: var(--text-4);
}

.sidebar__bottom-links {
    padding: 0 24px;
    margin-top: 10px;
    font-size: 0.75rem;
    color: var(--text-4);
    display: flex;
    gap: 12px;
}
.sidebar__bottom-links a { color: var(--text-4); }
.sidebar__bottom-links a:hover { color: var(--text); }
.sidebar__collapse {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    margin-top: 10px;
    font-size: 0.8125rem;
    color: var(--text-3);
    cursor: pointer;
    border-top: 1px solid var(--border);
}


/* Middle Column */
.middle-col {
  width: 340px;
  background-color: var(--bg-card-alt);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.middle-col__header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: var(--bg-white);
}

.add-channel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--bg-dark);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: opacity var(--transition);
}

.add-channel-btn:hover {
  opacity: 0.9;
}

.channel-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-size: 0.875rem;
    color: var(--text-3);
    cursor: pointer;
    background: var(--bg-white);
}

.search-input {
  position: relative;
  background-color: var(--bg-muted);
  border-radius: var(--radius-md);
  padding: 8px 12px 8px 36px;
}

.search-input input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.875rem;
  color: var(--text);
  font-family: inherit;
}

.search-input svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-4);
}

.middle-col__list {
  flex: 1;
  overflow-y: auto;
  background-color: var(--bg-white);
}

.channel-list-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  cursor: pointer;
  transition: background-color var(--transition);
}

.channel-list-item:hover {
  background-color: var(--bg-muted);
}

.channel-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.channel-icon svg { width: 24px; height: 24px; fill: white; }

.channel-icon--fb { background-color: #1877F2; }
.channel-icon--test { background-color: #E0E7FF; color: var(--primary); font-size: 1.125rem; }
.channel-icon--wa { background-color: #25D366; }

.channel-details {
  flex: 1;
  min-width: 0;
}

.channel-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--green);
}

.channel-meta {
  display: flex;
  gap: 4px;
}

.meta-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: var(--bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}
.meta-icon svg { width: 12px; height: 12px; color: var(--text-3); stroke: currentColor; stroke-width: 2;}
.meta-icon--active svg { color: var(--primary); }

.channel-time {
  font-size: 0.75rem;
  color: var(--text-4);
}


/* Main Content */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  min-width: 0;
}

.main-header {
  padding: 24px 32px;
  border-bottom: 1px solid var(--border);
  background-color: var(--bg-white);
}

.main-header__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.main-header__subtitle {
  font-size: 0.875rem;
  color: var(--text-3);
}

.main-body {
  flex: 1;
  padding: 60px 40px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.connect-area {
  max-width: 800px;
  width: 100%;
}

.connect-header {
  text-align: center;
  margin-bottom: 48px;
}

.connect-header h2 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.connect-header p {
  color: var(--text-3);
  font-size: 0.9375rem;
}

.connect-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.connect-card {
  background-color: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  transition: all var(--transition);
}

.connect-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-sm);
}

.connect-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.connect-card__icon--fb { background-color: #E8F4FD; color: #1877F2; }
.connect-card__icon--ig { background-color: #FDF2F8; color: #E1306C; }
.connect-card__icon--wa { background-color: #DCFCE7; color: #25D366; }
.connect-card__icon--chat { background-color: #F3E8FF; color: var(--purple); }

.connect-card__icon svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
}
.connect-card__icon--ig svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.connect-card__icon--chat svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.connect-card__info {
  flex: 1;
}

.connect-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.connect-card__desc {
  font-size: 0.875rem;
  color: var(--text-3);
  line-height: 1.5;
}

.connect-card__action {
  flex-shrink: 0;
}

.btn-connect {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity var(--transition);
}

.btn-connect svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.btn-connect--fb svg { fill: currentColor; }
.btn-connect--ig svg { fill: none; stroke: currentColor; stroke-width: 2; }
.btn-connect--chat svg { fill: none; stroke: currentColor; stroke-width: 2; }

.btn-connect:hover { opacity: 0.9; transform: translateY(-1px); }

.btn-connect--fb { background-color: #1c1e21; color: white; }
.btn-connect--ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: white; }
.btn-connect--chat { background-color: #111827; color: white; }

.badge-coming-soon {
  background-color: var(--bg-muted);
  color: var(--text-4);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.badge-coming-soon svg {
    width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
}

.cancel-link {
    display: block;
    text-align: center;
    margin-top: 48px;
    color: var(--text-4);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}
.cancel-link:hover { color: var(--text); }

/* ============================================================
   DASHBOARD PAGE STYLES
   ============================================================ */
.dashboard-body { display:flex; flex-direction:column; gap:32px; padding:32px; overflow-y:auto; height:100%; }
.dashboard-welcome { display:flex; align-items:center; justify-content:space-between; }
.dashboard-welcome h1 { font-size:1.625rem; font-weight:800; letter-spacing:-.03em; color:var(--text); }
.dashboard-welcome h1 span { background:var(--gradient-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.dashboard-welcome p { color:var(--text-3); font-size:.9375rem; margin-top:4px; }
.dashboard-date { font-size:.8125rem; color:var(--text-4); background:var(--bg-white); border:1px solid var(--border); padding:8px 16px; border-radius:var(--radius-pill); }

.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat-widget { background:var(--bg-white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; transition:all var(--transition); position:relative; overflow:hidden; }
.stat-widget:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.stat-widget::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient); }
.stat-widget__label { font-size:.8125rem; color:var(--text-3); font-weight:500; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.stat-widget__label svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
.stat-widget__value { font-size:2rem; font-weight:800; letter-spacing:-.04em; color:var(--text); line-height:1; }
.stat-widget__value--green { color:var(--green); }
.stat-widget__value--purple { color:var(--purple); }
.stat-widget__value--blue { color:var(--primary); }
.stat-widget__change { display:inline-flex; align-items:center; gap:4px; font-size:.75rem; font-weight:600; margin-top:8px; padding:2px 8px; border-radius:var(--radius-pill); }
.stat-widget__change--up { background:var(--green-bg); color:var(--green); }
.stat-widget__change--up::before { content:'↑'; }
.stat-widget__change--down { background:#fef2f2; color:#dc2626; }
.stat-widget__change--down::before { content:'↓'; }

.dashboard-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:24px; }
.panel-card { background:var(--bg-white); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.panel-card__header { padding:20px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.panel-card__title { font-size:1rem; font-weight:700; color:var(--text); }
.panel-card__link { font-size:.8125rem; color:var(--primary); font-weight:500; }
.panel-card__link:hover { text-decoration:underline; }

.activity-list { display:flex; flex-direction:column; }
.activity-item { display:flex; align-items:center; gap:16px; padding:16px 24px; border-bottom:1px solid var(--border); transition:background var(--transition); cursor:pointer; }
.activity-item:last-child { border-bottom:none; }
.activity-item:hover { background:var(--bg-muted); }
.activity-avatar { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.875rem; color:#fff; flex-shrink:0; }
.activity-avatar--fb { background:#1877F2; }
.activity-avatar--ig { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.activity-avatar--wa { background:#25D366; }
.activity-info { flex:1; min-width:0; }
.activity-name { font-size:.875rem; font-weight:600; color:var(--text); margin-bottom:2px; }
.activity-msg { font-size:.8125rem; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.activity-right { text-align:right; flex-shrink:0; }
.activity-time { font-size:.75rem; color:var(--text-4); }
.activity-badge { display:inline-flex; width:20px; height:20px; background:var(--primary); color:#fff; border-radius:50%; font-size:.6875rem; font-weight:700; align-items:center; justify-content:center; margin-top:4px; }

.channel-status-list { display:flex; flex-direction:column; }
.channel-status-item { display:flex; align-items:center; gap:16px; padding:16px 24px; border-bottom:1px solid var(--border); }
.channel-status-item:last-child { border-bottom:none; }
.channel-status-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.channel-status-icon--fb { background:#e8f4fd; color:#1877F2; }
.channel-status-icon--ig { background:#fdf2f8; color:#E1306C; }
.channel-status-icon--wa { background:#dcfce7; color:#25D366; }
.channel-status-icon--chat { background:#f3e8ff; color:var(--purple); }
.channel-status-icon svg { width:20px; height:20px; fill:currentColor; }
.channel-status-name { flex:1; font-size:.875rem; font-weight:600; color:var(--text); }
.channel-status-pill { display:inline-flex; align-items:center; gap:5px; font-size:.75rem; font-weight:600; padding:4px 10px; border-radius:var(--radius-pill); }
.channel-status-pill--active { background:var(--green-bg); color:var(--green); }
.channel-status-pill--active::before { content:''; width:6px; height:6px; background:var(--green); border-radius:50%; display:inline-block; }
.channel-status-pill--soon { background:var(--bg-muted); color:var(--text-4); }
.channel-status-pill--disconnected { background:#fef2f2; color:#dc2626; }

/* ============================================================
   CONVERSATIONS / INBOX STYLES
   ============================================================ */
.inbox-layout { display:flex; flex:1; height:100%; overflow:hidden; }
.inbox-sidebar { width:320px; border-right:1px solid var(--border); background:var(--bg-white); display:flex; flex-direction:column; flex-shrink:0; }
.inbox-sidebar__header { padding:20px; border-bottom:1px solid var(--border); }
.inbox-sidebar__header h2 { font-size:1.125rem; font-weight:700; color:var(--text); margin-bottom:12px; }
.inbox-search { position:relative; }
.inbox-search svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-4); stroke:currentColor; fill:none; stroke-width:2; }
.inbox-search input { width:100%; border:1px solid var(--border); background:var(--bg-muted); border-radius:var(--radius-md); padding:8px 12px 8px 34px; font-size:.875rem; color:var(--text); font-family:inherit; outline:none; }
.inbox-search input:focus { border-color:var(--primary); }

.inbox-filters { display:flex; gap:8px; padding:12px 20px; border-bottom:1px solid var(--border); overflow-x:auto; }
.inbox-filter-btn { flex-shrink:0; padding:5px 12px; border-radius:var(--radius-pill); font-size:.8125rem; font-weight:600; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text-3); transition:all var(--transition); }
.inbox-filter-btn.active,.inbox-filter-btn:hover { background:var(--primary-glow); border-color:rgba(79,70,229,.2); color:var(--primary); }

.inbox-list { flex:1; overflow-y:auto; }
.inbox-item { display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--border); cursor:pointer; transition:background var(--transition); position:relative; }
.inbox-item:hover { background:var(--bg-muted); }
.inbox-item.active { background:var(--primary-glow); }
.inbox-item.unread .inbox-item__name { font-weight:700; }
.inbox-item__avatar { position:relative; flex-shrink:0; }
.inbox-item__pic { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:.9375rem; }
.inbox-item__channel-badge { position:absolute; bottom:-2px; right:-2px; width:16px; height:16px; border-radius:50%; border:2px solid var(--bg-white); display:flex; align-items:center; justify-content:center; }
.inbox-item__channel-badge svg { width:8px; height:8px; fill:white; }
.inbox-item__channel-badge--fb { background:#1877F2; }
.inbox-item__channel-badge--wa { background:#25D366; }
.inbox-item__channel-badge--ig { background:#E1306C; }
.inbox-item__body { flex:1; min-width:0; }
.inbox-item__name { font-size:.875rem; color:var(--text); margin-bottom:2px; }
.inbox-item__preview { font-size:.8125rem; color:var(--text-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inbox-item__meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.inbox-item__time { font-size:.75rem; color:var(--text-4); }
.inbox-item__unread { width:18px; height:18px; background:var(--primary); color:#fff; border-radius:50%; font-size:.6875rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.inbox-item__tag { font-size:.625rem; font-weight:700; padding:2px 7px; border-radius:var(--radius-pill); text-transform:uppercase; letter-spacing:.05em; }
.inbox-item__tag--ai { background:var(--primary-glow); color:var(--primary); }
.inbox-item__tag--human { background:#f0fdf4; color:var(--green); }

.chat-area { flex:1; display:flex; flex-direction:column; background:var(--bg); }
.chat-topbar { padding:16px 24px; background:var(--bg-white); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:16px; }
.chat-topbar__avatar { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; }
.chat-topbar__info { flex:1; }
.chat-topbar__name { font-size:1rem; font-weight:700; color:var(--text); }
.chat-topbar__status { font-size:.8125rem; color:var(--green); display:flex; align-items:center; gap:5px; }
.chat-topbar__status::before { content:''; width:6px; height:6px; background:var(--green); border-radius:50%; }
.chat-topbar__actions { display:flex; gap:8px; }
.chat-topbar__btn { width:36px; height:36px; border-radius:var(--radius-md); background:var(--bg-muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--transition); color:var(--text-3); }
.chat-topbar__btn:hover { border-color:var(--primary); color:var(--primary); }
.chat-topbar__btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }

.chat-messages { flex:1; overflow-y:auto; padding:24px; display:flex; flex-direction:column; gap:16px; }
.msg-row { display:flex; gap:12px; align-items:flex-end; }
.msg-row--ai { flex-direction:row; }
.msg-row--user { flex-direction:row-reverse; }
.msg-avatar { width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; }
.msg-bubble { max-width:65%; padding:12px 16px; border-radius:18px; font-size:.9rem; line-height:1.5; }
.msg-row--ai .msg-bubble { background:var(--bg-white); border:1px solid var(--border); border-bottom-left-radius:4px; color:var(--text); }
.msg-row--user .msg-bubble { background:var(--primary); color:#fff; border-bottom-right-radius:4px; }
.msg-bubble__sender { font-size:.6875rem; font-weight:700; margin-bottom:4px; }
.msg-row--ai .msg-bubble__sender { color:var(--primary); }
.msg-row--user .msg-bubble__sender { color:rgba(255,255,255,.75); }
.msg-bubble__time { font-size:.6875rem; margin-top:6px; opacity:.6; }

.chat-composer { padding:16px 24px; background:var(--bg-white); border-top:1px solid var(--border); display:flex; gap:12px; align-items:center; }
.chat-composer__input { flex:1; border:1px solid var(--border); border-radius:var(--radius-pill); padding:10px 18px; font-size:.9375rem; color:var(--text); font-family:inherit; outline:none; background:var(--bg-muted); transition:border-color var(--transition); }
.chat-composer__input:focus { border-color:var(--primary); background:var(--bg-white); }
.chat-composer__send { width:40px; height:40px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; transition:all var(--transition); flex-shrink:0; }
.chat-composer__send:hover { background:var(--primary-dark); transform:scale(1.05); }
.chat-composer__send svg { width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2; }
.chat-composer__ai-badge { display:flex; align-items:center; gap:6px; font-size:.75rem; color:var(--primary); background:var(--primary-glow); border:1px solid rgba(79,70,229,.15); border-radius:var(--radius-pill); padding:5px 12px; font-weight:600; cursor:pointer; flex-shrink:0; transition:all var(--transition); }
.chat-composer__ai-badge:hover { background:rgba(79,70,229,.15); }

.chat-detail-panel { width:280px; border-left:1px solid var(--border); background:var(--bg-white); padding:24px; overflow-y:auto; flex-shrink:0; }
.detail-avatar { width:64px; height:64px; border-radius:50%; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.5rem; color:#fff; }
.detail-name { text-align:center; font-weight:700; font-size:1.125rem; color:var(--text); margin-bottom:4px; }
.detail-channel { text-align:center; font-size:.8125rem; color:var(--text-3); margin-bottom:24px; }
.detail-section { margin-bottom:24px; }
.detail-section h4 { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-4); margin-bottom:12px; }
.detail-row { display:flex; align-items:center; justify-content:space-between; padding:6px 0; font-size:.875rem; }
.detail-row__label { color:var(--text-3); }
.detail-row__value { color:var(--text); font-weight:500; }
.detail-tag-list { display:flex; flex-wrap:wrap; gap:6px; }
.detail-tag { padding:4px 10px; background:var(--primary-glow); color:var(--primary); border-radius:var(--radius-pill); font-size:.75rem; font-weight:600; }
.detail-actions { display:flex; flex-direction:column; gap:8px; }
.detail-action-btn { display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:var(--radius-md); font-size:.875rem; font-weight:600; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text); transition:all var(--transition); width:100%; }
.detail-action-btn:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-glow); }
.detail-action-btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }