:root {
    /* ── NeuroCosm 우주 팔레트 (신경망 × 우주) ── */
    --bg:           #060512;   /* 심우주 인디고-블랙 */
    --bg-deep:      #03030a;
    --sidebar-bg:   #0a0818;
    --card-bg:      #120f26;
    --card-rgb:     18, 15, 38;             /* card-bg의 RGB — 반투명 카드(우주 배경 비침)용 */
    --card-alpha:   0.12;                    /* 카드 불투명도 — 뒤 신경망·별이 비치게 (다크·라이트 공통) */
    --card-blur:    2px;                     /* 카드 backdrop 블러 — 심플 모드에서 0으로 */
    --surface:      #0f0c22;   /* 불투명 패널·드롭다운·헤더 (우주 배경이 비치지 않게) */
    --card-hover:   #1a1640;
    --border:       #2a2552;
    --primary:      #8b6cff;   /* 코스믹 퍼플 */
    --primary-rgb:  139, 108, 255;              /* primary의 RGB 트리플 — 글로우·틴트가 참조해 테마 연동 */
    --primary-hover: #857fff;                    /* Primary 버튼 hover (다크=밝은 라벤더) */
    --primary-ink:  #8b6cff;                     /* primary가 '글자색'으로 쓰일 때(링크·활성·배지). 라이트에선 흰 배경 대비 확보용으로 짙게 */
    --primary-dim:  rgba(var(--primary-rgb), 0.15);
    --accent:       #22d3ee;   /* 시안 (성운/네뷸라) */
    --gold:         #f5c97b;   /* 골드 포인트 */
    --rose:         #f4a6c4;   /* 로즈골드 포인트 */
    --success:      #22c55e;
    --warning:      #f59e0b;
    --danger:       #ef4444;
    --text:         #eae8fb;   /* 별빛 화이트 */
    --text-sub:     #a8a3d4;
    --text-muted:   #9c98c4;
    --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    --font-sans:    'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --font-display: 'Space Grotesk', 'Pretendard', sans-serif;
    /* 글로우 */
    --glow-purple:  0 0 18px rgba(var(--primary-rgb), 0.45);
    --glow-cyan:    0 0 16px rgba(34,211,238,0.40);
    --glow-gold:    0 0 14px rgba(245,201,123,0.40);
    /* 테마 프리미티브 — 다크/라이트가 함께 제어(하드코딩 rgba 대체) */
    --hairline:     rgba(255,255,255,0.06);   /* 얇은 구분선(예전 rgba(255,255,255,0.03~0.08)) */
    --overlay:      rgba(255,255,255,0.05);    /* hover/코드 배경 오버레이 */
    --shadow:       rgba(0,0,0,0.42);          /* 카드·팝오버 그림자색 */
    --shadow-lg:    rgba(0,0,0,0.6);           /* 모달 등 큰 그림자 */
    --scrim:        rgba(0,0,0,0.65);          /* 모달 뒷 배경 딤 */
    --warning-dim:  rgba(245,158,11,0.12);     /* 경고 박스 배경(예전 정의 없이 인라인 fallback) */
    --code-bg:      #0b0c10;                   /* 코드 에디터 배경(core-lab 등) */
    --code-fg:      #d7dbe0;                   /* 코드 에디터 텍스트 */
    --tooltip-bg:   #1c1c2e;                   /* 호버 툴팁(data-tip) 배경 */
    --tooltip-fg:   #dcdaf0;                   /* 툴팁 글자 — 배경과 항상 대비되게 */
    --topbar-bg:    var(--bg);                  /* 상단바 배경 — 다크는 --bg 그대로 */
    /* 사이드바 글래스 그라디언트 — 테마별(예전엔 하드코딩되어 라이트에서 안 바뀜) */
    --sidebar-grad: linear-gradient(180deg, rgba(12,9,28,0.92), rgba(8,6,20,0.92));
}

/* ── 라이트 테마: "성간 여명(Interstellar Dawn)" ──
   순백/검정으로 뒤집지 않고, 같은 은하를 여명에 본 톤 —
   쿨 하늘-화이트 배경 + 딥 인디고 텍스트 + 로고 시안 계열 하늘색 primary.
   모든 면이 하나의 쿨 언더톤으로 층져 다크처럼 자연스럽게 어우러지게. */
[data-theme="light"] {
    /* 팔레트: "페리윙클 #4 + 카드 틴트 10%" — 배경은 더 화이트한 페리윙클,
       카드는 배경보다 진한 페리윙클 틴트라 밝기 대신 그림자+테두리로 떠 보임. */
    --bg:           #f6f6fc;   /* 화이트한 페리윙클 (본문, #4) */
    --bg-deep:      #f1f2fb;   /* 가장 낮은 backdrop */
    --sidebar-bg:   #f3f4fc;
    --card-bg:      #f0f1fb;   /* 카드 = 배경보다 진한 페리윙클(10%) — 그림자로 뜸 */
    --card-rgb:     240, 241, 251;          /* 라이트 card-bg의 RGB — 반투명 카드용 */
    --surface:      #f0f1fb;
    --card-hover:   #ecedfa;   /* 페리윙클 hover(살짝 더 진하게) */
    --border:       #e7e8f8;   /* 페리윙클 보더 */
    /* 페리윙클 인디고 primary. --primary-rgb를 바꾸면 글로우·틴트·테두리가 전부 함께. */
    --primary:      #6d76e8;
    --primary-rgb:  109, 118, 232;
    --primary-hover: #8a92f0;   /* hover는 살짝 밝은 인디고 */
    --primary-ink:  #454ec4;    /* 글자색용 짙은 인디고(카드 대비 6.4:1, AA) */
    /* --primary-dim은 :root의 rgba(var(--primary-rgb),.15) 정의를 상속 → 자동 인디고(override 제거) */
    --accent:       #0e93ab;   /* 시안 포인트 */
    --gold:         #b7852e;
    --rose:         #c8608f;
    --success:      #16a34a;
    --warning:      #d97706;
    --danger:       #dc2626;
    --text:         #20223f;   /* 검정 아님 — 딥 인디고 (대비 14:1) */
    --text-sub:     #40455e;
    --text-muted:   #575c78;   /* 배경 위 대비 6:1(AA) */
    --hairline:     rgba(70,75,140,0.09);
    --overlay:      rgba(70,75,140,0.04);
    --shadow:       rgba(65,70,135,0.13);
    --shadow-lg:    rgba(65,70,135,0.20);
    --scrim:        rgba(22,24,50,0.38);       /* 쿨 다크 스크림 */
    --warning-dim:  rgba(217,119,6,0.12);
    --code-bg:      #f2f2fb;                    /* 페리윙클 */
    --code-fg:      #2a2c48;
    --tooltip-bg:   #ffffff;                    /* 라이트 툴팁 — 흰 배경 + 다크 글자(테두리·그림자로 구분) */
    --tooltip-fg:   #20223f;
    --sidebar-grad: linear-gradient(180deg, #f3f4fc, #f0f1fb);   /* 페리윙클 #4 여명 */
    --topbar-bg:    #f3f4fc;                     /* 상단바 = 사이드바 맨 위 색 → 좌상단 이음새 없이 */
    /* 낮의 빛 — 네온 글로우 대신 부드러운 확산 그림자(페리윙클 인디고) */
    --glow-purple:  0 4px 18px rgba(109,118,232,0.22);
    --glow-cyan:    0 4px 16px rgba(14,147,171,0.18);
    --glow-gold:    0 4px 14px rgba(183,133,46,0.18);
}
[data-theme="light"] body {
    background:
        radial-gradient(1200px 800px at 78% -8%,  rgba(var(--primary-rgb), 0.10), transparent 60%),
        radial-gradient(1000px 700px at 12% 108%, rgba(34,211,238,0.07),  transparent 60%),
        radial-gradient(900px 600px at 95% 95%,   rgba(244,166,196,0.06), transparent 55%),
        var(--bg-deep);
}

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

body {
    /* 단색 배경만 — 색·모션은 배경 캔버스(cosmos-bg)가 담당. 파스텔 코너글로우/성운 없음.
       예전 background-attachment:fixed는 스크롤마다 리페인트돼 렉의 주범이라 제거함. */
    background: var(--bg-deep);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* ── Layout ── */
.layout { display: flex; min-height: 100vh; }

/* ── Sidebar ── */
.sidebar {
    width: 210px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 20px 12px;
    position: fixed;
    height: 100vh;
    top: 0; left: 0;
    z-index: 100;
}

.logo {
    display: flex;
    align-items: center;
    /* 상단바와 같은 띠(y=0~59)에 맞춰 로고 '글자'도 같은 높이로 세로중앙.
       margin-top -20로 사이드바 위 패딩(20)을 상쇄, 높이 59 = 상단바 높이.
       밑줄은 y=59에서 그대로 정렬(아래 margin-bottom 14로 토글까지 간격 유지). */
    height: 59px;
    margin-top: -20px;
    padding: 0 10px;
    font-family: 'Orbitron', 'Space Grotesk', sans-serif;
    font-size: 23px;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--primary);
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
}

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--text-sub);
    text-decoration: none;
    font-size: 13.5px;
    transition: background 0.15s, color 0.15s;
}
.nav-item:hover  { background: var(--card-bg); color: var(--text); }
.nav-item.active { background: var(--primary-dim); color: var(--primary-ink); font-weight: 600; }
.nav-icon { font-size: 15px; width: 18px; text-align: center; }

/* ── 사이드바 카테고리 그룹 ── */
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group-btn {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 13.5px;
    text-align: left;
}
.nav-group-btn.child-active { color: var(--primary); font-weight: 600; }
.nav-caret {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-muted);
    transform: rotate(-90deg);
    transition: transform 0.18s;
}
.nav-group.open .nav-caret { transform: rotate(0deg); }
.nav-sub {
    display: none;
    flex-direction: column;
    gap: 2px;
    margin-left: 14px;
    padding-left: 8px;
    border-left: 1px solid var(--hairline);
}
.nav-group.open .nav-sub { display: flex; }
.nav-sub .nav-item { padding: 8px 10px; font-size: 13px; }

.sidebar-footer { padding-top: 16px; border-top: 1px solid var(--border); }
.version-badge {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    padding: 2px 8px;
}

/* ── Main ── */
.main { margin-left: 210px; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-x: clip; }   /* 숨긴 툴팁(::after, position:absolute)이 우측으로 뻗어 생기는 팬텀 가로 스크롤 차단. clip=세로 스크롤엔 영향 없음, position:fixed 팝업/툴팁은 안 잘림 */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 높이를 로고 밑줄(사이드바 패딩20 + 로고 39 = 59)과 맞춰 두 밑줄이 한 줄로 이어지게.
       패딩 기반이면 우상단 버튼 높이에 따라 늘어나 어긋남 → 고정 높이 + 세로중앙. */
    height: 59px;
    padding: 0 32px;
    border-bottom: 1px solid var(--border);
    background: var(--topbar-bg);
    position: sticky;
    top: 0;
    z-index: 50;
}

.page-title { font-size: 18px; font-weight: 600; line-height: 22px; }

.topbar-right { display: flex; align-items: center; gap: 10px; }

.status-badge {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 500;
}
.badge-on  { background: rgba(34,197,94,0.12); color: var(--success); }
.badge-off { background: rgba(239,68,68,0.12);  color: var(--danger); }

.content { padding: 28px 32px; }

/* ── 메뉴 온보딩 힌트 (좌하단 '설명' 토글로 켜고 끔) ── */
/* html.hints-on 일 때, data-hint 가 있는 사이드바 메뉴 아래에 짧은 설명을 표시 */
html.hints-on .nav-studio .nav-item[data-hint] { flex-wrap: wrap; }
html.hints-on .nav-studio .nav-item[data-hint]::after {
    content: attr(data-hint);
    flex-basis: 100%;
    margin: 2px 0 3px 30px;
    padding-left: 9px;
    border-left: 2px solid var(--primary-dim);
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: 0;
    white-space: normal;
    word-break: keep-all;
}
/* 힌트 토글 버튼 (좌하단, 테마 버튼 위) */
.hints-toggle {
    display: flex; align-items: center; gap: 7px; width: 100%;
    background: transparent; border: 1px solid var(--border); border-radius: 9px;
    color: var(--text-sub); font-size: 12px; padding: 7px 11px; cursor: pointer;
    margin-bottom: 8px; transition: border-color .15s, color .15s;
}
.hints-toggle:hover { border-color: var(--primary); color: var(--text); }
.hints-label-on { display: none; }
.hints-label-off { display: inline; }
html.hints-on .hints-label-on { display: inline; }
html.hints-on .hints-label-off { display: none; }

/* 페이지 상단 내부 탭 바 (학습·토크나이저 등) — CORE AI 연구실 seg-tabs와 동일한 모양,
   단 각 탭이 형제 페이지로 이동하는 링크(방법 A). base.html에서 그룹별로 렌더. */
.page-tabs { display:flex; gap:6px; margin-bottom:20px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.page-tabs a {
    text-decoration:none; color:var(--text-muted); border-bottom:2px solid transparent;
    font-size:13px; font-weight:600; padding:8px 14px; display:inline-flex; align-items:center; gap:6px;
    transition:color .12s, border-color .12s;
}
.page-tabs a:hover { color:var(--text-sub); }
.page-tabs a.active { color:var(--text); border-bottom-color:var(--primary); }
.page-tabs a .licon { width:15px; height:15px; }

/* ── Cards ── */
.card {
    /* 반투명 프로스티드 글래스 — 뒤 신경망·별(cosmos-bg)이 은은히 비치되, 블러로
       움직임을 부드럽게 뭉개 가독성 유지. 불투명도는 --card-alpha(12%)로 조절. */
    background: rgba(var(--card-rgb), var(--card-alpha));
    -webkit-backdrop-filter: blur(var(--card-blur));
    backdrop-filter: blur(var(--card-blur));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px 24px;
    margin-bottom: 20px;
}
.card-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    margin-bottom: 18px;
}

/* ── Grids ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* ── Stat cards (Dashboard) ── */
.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
    transition: border-color 0.2s;
}
.stat-card:hover { border-color: var(--primary); }
.stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; }
.stat-value { font-size: 20px; font-weight: 700; font-family: var(--font-mono); }
.stat-tag {
    display: inline-block;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 600;
    margin-top: 6px;
}
.tag-on  { background: rgba(34,197,94,0.12); color: var(--success); }
.tag-off { background: rgba(136,136,170,0.12); color: var(--text-sub); }

/* ── Quick actions ── */
.action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.action-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    text-decoration: none;
    color: var(--text);
    transition: background 0.15s, border-color 0.15s;
    cursor: pointer;
}
.action-card:hover { background: rgba(var(--card-rgb), calc(var(--card-alpha) + 0.06)); border-color: var(--primary); }
.action-icon { font-size: 26px; }
.action-title { font-size: 14px; font-weight: 600; }
.action-desc { font-size: 12px; color: var(--text-sub); }

/* ── Forms ── */
.form-group { margin-bottom: 14px; }
.form-label { font-size: 12px; color: var(--text-sub); margin-bottom: 6px; display: block; font-weight: 500; }
.form-control {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--text);
    font-size: 13px;
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none;
}
.form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.13); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Buttons ── */
.btn {
    padding: 9px 18px;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-danger  { background: rgba(239,68,68,0.12); color: var(--danger); border: 1px solid rgba(239,68,68,0.25); }
.btn-danger:hover:not(:disabled) { background: rgba(239,68,68,0.22); }
.btn-success { background: rgba(34,197,94,0.12); color: var(--success); border: 1px solid rgba(34,197,94,0.25); }
.btn-success:hover:not(:disabled) { background: rgba(34,197,94,0.22); }
.btn-warning { background: rgba(245,158,11,0.12); color: var(--warning); border: 1px solid rgba(245,158,11,0.3); }
.btn-warning:hover:not(:disabled) { background: rgba(245,158,11,0.22); }

.mismatch-banner {
    padding: 12px 14px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 8px;
    margin-bottom: 14px;
}
.mismatch-banner-title {
    font-size: 11px; font-weight: 700; color: var(--warning);
    text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 6px;
}
.mismatch-list {
    font-size: 11.5px; color: var(--text-sub);
    margin: 0 0 10px 0; padding: 0; list-style: none; line-height: 1.8;
}
.input-mismatch { border-color: var(--warning) !important; }

.finetune-info-banner {
    padding: 10px 14px;
    background: rgba(var(--primary-rgb), 0.06);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-sub);
    margin-bottom: 14px;
}
.btn-ghost { background: var(--card-bg); color: var(--text-sub); border: 1px solid var(--border); }
.btn-ghost:hover:not(:disabled) { color: var(--text); border-color: var(--primary); }
.btn-group { display: flex; gap: 10px; margin-top: 6px; }

/* ── Status dots ── */
.dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
}
.dot-idle       { background: var(--text-muted); }
.dot-starting   { background: var(--warning); }
.dot-preparing  { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; animation: blink 1.5s infinite; }
.dot-running    { background: var(--primary); box-shadow: 0 0 6px var(--primary); animation: blink 1s infinite; }
.dot-paused     { background: #f59e0b; }
.dot-completed  { background: var(--success); }
.dot-stopped    { background: var(--warning); }
.dot-crashed    { background: var(--danger); }
.dot-error      { background: var(--danger); }

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ── Metrics strip ── */
.metrics-strip {
    display: flex;
    gap: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.metric { display: flex; flex-direction: column; gap: 4px; }
.metric-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); }
.metric-value { font-size: 22px; font-weight: 700; font-family: var(--font-mono); }

/* ── Log area ── */
.log-area {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    height: 160px;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-sub);
    line-height: 1.6;
}
.log-area::-webkit-scrollbar { width: 4px; }
.log-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Chart ── */
.chart-wrap {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    position: relative;
    height: 220px;
}

/* ── Chat ── */
/* ── Inference outer (사이드바 + 채팅) ── */
.inference-outer {
    display: flex;
    height: calc(100vh - 120px);
    gap: 0;
    overflow: hidden;
}

.conv-sidebar {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    padding: 0 0 0 0;
    background: var(--surface);
    border-radius: 12px 0 0 12px;
    overflow: hidden;
}

.conv-sidebar-header {
    height: 76px;                    /* 오른쪽 채팅 헤더와 선 높이 일치 */
    display: flex;
    align-items: center;             /* '+새 대화' 버튼 세로 중앙 정렬 */
    padding: 0 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.conv-list {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;   /* 대화 목록 스크롤도 페이지로 안 넘침 */
    padding: 6px;
}
.conv-list::-webkit-scrollbar { width: 3px; }
.conv-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.conv-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
    min-width: 0;
}
.conv-item:hover  { background: var(--card-hover); }
.conv-item.active { background: var(--primary-dim); }

.conv-item-title {
    font-size: 12px;
    color: var(--text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.conv-item.active .conv-item-title { color: var(--text); font-weight: 600; }

.conv-item-date {
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.conv-del-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 13px;
    border-radius: 4px;
    flex-shrink: 0;
    line-height: 1;
}
.conv-del-btn:hover { color: var(--danger); background: rgba(239,68,68,0.1); }
.conv-item:hover .conv-del-btn { display: block; }

.conv-rename-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 13px;
    border-radius: 4px;
    flex-shrink: 0;
    line-height: 1;
}
.conv-rename-btn:hover { color: var(--accent); background: rgba(99,102,241,0.1); }
.conv-item:hover .conv-rename-btn { display: block; }

.conv-rename-input {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    padding: 1px 4px;
    outline: none;
}

.chat-layout { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.chat-header {
    display: flex;
    align-items: center;               /* 원래 레이아웃 — 컨트롤 세로 중앙 */
    gap: 12px;
    height: 76px;                      /* 원래 높이대로 고정 → 아래 선 위치 확정 */
    padding: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    flex-shrink: 0;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;   /* 대화 박스 끝에 닿아도 스크롤이 페이지로 안 넘침(체이닝 방지) */
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-right: 4px;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.msg {
    display: flex;
    flex-direction: column;
    max-width: 72%;
}
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.ai   { align-self: flex-start; align-items: flex-start; max-width: 820px; }   /* 봇 답변 넓게(읽기 좋은 폭) */

.msg-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 4px; font-weight: 600; }

.msg-bubble {
    padding: 11px 15px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.55;
    word-break: break-word;
}
.msg.user .msg-bubble { background: var(--primary-dim); border: 1px solid rgba(var(--primary-rgb), 0.30); }
.msg.ai   .msg-bubble { background: transparent; border: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 2px 0; }   /* ChatGPT/Claude식 — 말풍선 없이 텍스트만 */

.msg.thinking .msg-bubble { opacity: 0.6; }

.chat-input-row {
    display: flex;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    margin-top: 14px;
}
.chat-input {
    flex: 1;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 14px;
    color: var(--text);
    font-size: 13.5px;
    resize: none;
    height: 46px;
    font-family: inherit;
    transition: border-color 0.15s;
}
.chat-input:focus { outline: none; border-color: var(--primary); }

/* ── Empty state ── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 0;
    color: var(--text-muted);
    font-size: 13px;
}
.empty-icon { font-size: 36px; opacity: 0.4; }

/* ── Alert ── */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
}
.alert-info { background: var(--primary-dim); border: 1px solid rgba(var(--primary-rgb), 0.2); color: var(--text-sub); }

/* ── Language switcher ── */
.lang-switch { display: flex; gap: 6px; margin-bottom: 10px; }
.lang-btn {
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.lang-btn:hover  { color: var(--text); border-color: var(--primary); }
.lang-btn.active { background: var(--primary-dim); color: var(--primary); border-color: var(--primary); }

/* ── 푸터 컨트롤: 세그먼트 알약 [테마 토글 | 심플 모드] ── */
.footer-controls {
    display: flex;
    align-items: stretch;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;                 /* 알약 모서리로 두 버튼을 하나로 묶음 */
    transition: border-color 0.15s;
}
.footer-controls:hover { border-color: rgba(var(--primary-rgb), 0.4); }

/* 심플/배터리 절약 토글 — 작은 정사각 아이콘 버튼(테마 버튼 왼쪽) */
.perf-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 46px; flex-shrink: 0;
    border: none;
    border-left: 1px solid var(--border);   /* 세그먼트 구분선 */
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 15px; line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.perf-toggle:hover { color: var(--text); background: var(--primary-dim); }
.perf-ico-saver { display: none; }
/* 심플 모드 ON → 아이콘 전환 + 활성 표시 */
html.perf-saver .perf-ico-full  { display: none; }
html.perf-saver .perf-ico-saver { display: inline; }
html.perf-saver .perf-toggle {
    color: var(--primary-ink);
    background: rgba(var(--primary-rgb), 0.12);
}

/* ── 테마 토글 (해/달) ── */
.theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    padding: 7px 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.theme-toggle:hover { color: var(--text); background: var(--primary-dim); }
.theme-ico { font-size: 14px; line-height: 1; }
/* 현재 테마에 맞는 아이콘·라벨만 노출: 다크→달·"다크모드", 라이트→해·"라이트모드" */
.theme-ico-light, .theme-label-light { display: none; }
[data-theme="light"] .theme-ico-dark,
[data-theme="light"] .theme-label-dark  { display: none; }
[data-theme="light"] .theme-ico-light   { display: inline; }
[data-theme="light"] .theme-label-light { display: inline; }

/* ── Upload zone ── */
.upload-zone {
    border: 2px dashed var(--border);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}
.upload-zone:hover  { border-color: var(--primary); }
.upload-zone.drag-over { border-color: var(--primary); background: var(--primary-dim); }
.upload-icon { font-size: 22px; }

/* ── Section label ── */
.section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* ── Custom Select Dropdown ── */
.custom-select-wrap { position: relative; }

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    min-width: 220px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    transition: border-color 0.15s;
    user-select: none;
}
.custom-select-trigger:hover { border-color: var(--primary); }

.dropdown-arrow {
    font-size: 11px;
    color: var(--text-muted);
    transition: transform 0.15s;
    flex-shrink: 0;
}
.custom-select-dropdown.open ~ .custom-select-trigger .dropdown-arrow,
.custom-select-dropdown.open + * .dropdown-arrow { transform: rotate(180deg); }

.custom-select-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    z-index: 300;
    box-shadow: 0 8px 24px var(--shadow);
    /* 모델이 많으면 목록이 화면 밖으로 잘리던 문제 — 최대 높이 + 내부 스크롤로 전부 접근 가능 */
    max-height: min(60vh, 440px);
    overflow-y: auto;
    overflow-x: visible;
}
.custom-select-dropdown.open { display: block; }

.custom-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    gap: 12px;
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid var(--border);
}
.custom-option:last-child { border-bottom: none; }
.custom-option:hover  { background: var(--card-hover); }
.custom-option.active { background: var(--primary-dim); }

.custom-option-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.custom-option.active .custom-option-name { color: var(--primary); }
.custom-option-size { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ── Lab ── */
.lab-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    height: calc(100vh - 160px);
}

.lab-sidebar {
    /* 카드와 동일한 반투명 유리(뒤 신경망·별 비침) */
    background: rgba(var(--card-rgb), var(--card-alpha));
    -webkit-backdrop-filter: blur(var(--card-blur));
    backdrop-filter: blur(var(--card-blur));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.lab-sidebar::-webkit-scrollbar { width: 4px; }
.lab-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.lab-viewer {
    /* 카드와 동일한 반투명 유리 — 코드/그래프 영역은 자체 배경(--code-bg 등)이라 불투명 유지 */
    background: rgba(var(--card-rgb), var(--card-alpha));
    -webkit-backdrop-filter: blur(var(--card-blur));
    backdrop-filter: blur(var(--card-blur));
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.lab-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.lab-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.lab-code-wrap {
    flex: 1;
    overflow: auto;
    background: var(--code-bg);
}
.lab-code-wrap pre {
    margin: 0;
    padding: 20px;
    font-size: 13px;
    line-height: 1.6;
    font-family: var(--font-mono);
}
.lab-code-wrap pre code { background: transparent !important; padding: 0 !important; }
.lab-code-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
.lab-code-wrap::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

#code-edit { display: none; flex: 1; flex-direction: column; }
#code-textarea {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: var(--code-bg);
    color: var(--code-fg);
    border: none;
    outline: none;
    resize: none;
    padding: 20px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    tab-size: 4;
    box-sizing: border-box;
}

.lab-model-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    cursor: pointer;
    margin-bottom: 8px;
    transition: background 0.15s, border-color 0.15s;
}
.lab-model-card:hover  { background: var(--card-hover); }
.lab-model-card.active { background: var(--primary-dim); border-color: rgba(var(--primary-rgb), 0.3); }

.lab-model-info { min-width: 0; }
.lab-model-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.lab-model-tags { display: flex; gap: 4px; flex-wrap: wrap; }

.template-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 4px;
}

.template-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 14px 8px;
    border-radius: 10px;
    border: 2px solid var(--border);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.template-card:hover  { border-color: var(--primary); background: var(--card-hover); }
.template-card.active { border-color: var(--primary); background: var(--primary-dim); }

.tmpl-icon { font-size: 22px; }
.tmpl-name { font-size: 13px; font-weight: 700; }
.tmpl-desc { font-size: 10px; color: var(--text-muted); line-height: 1.4; }

.lab-tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary);
    font-weight: 600;
}

/* ── Lab Info Panel ── */
.lab-info-panel {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    background: var(--surface);
    max-height: 280px;
    overflow-y: auto;
}

.lab-info-params {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--card);
    flex-wrap: wrap;
}

.lab-param-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.lab-param-item label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}
.lab-param-item input {
    width: 62px;
    padding: 3px 7px;
    font-size: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text);
    text-align: right;
}
.lab-param-item input:focus { outline: none; border-color: var(--primary); }

.lab-info-sep { width: 1px; height: 14px; background: var(--border); margin: 0 2px; }

.lab-info-metrics {
    display: flex;
    gap: 0;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    row-gap: 6px;
}

.lab-info-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 20px;
}
.lab-info-metric-label { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; }
.lab-info-metric-value { font-size: 14px; font-weight: 700; color: var(--text); }

.lab-info-sanity-ok   { color: var(--success); }
.lab-info-sanity-fail { color: var(--danger); }

.lab-device-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.lab-device-table th {
    text-align: left;
    padding: 6px 16px;
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
}
.lab-device-table td {
    padding: 7px 16px;
    border-bottom: 1px solid var(--hairline);
    color: var(--text-sub);
    white-space: nowrap;
}
.lab-device-table tr:last-child td { border-bottom: none; }
.lab-device-table tr.device-warn td { color: var(--text-muted); opacity: 0.5; }
.lab-device-count { font-weight: 700; color: var(--primary); }
.lab-device-time  { font-weight: 600; color: var(--text); }

/* ── Project row ── */
.project-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.project-row:last-child { border-bottom: none; }

/* ── Tokenizer Page ── */
.tok-detail-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.tok-badge {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 700;
    background: var(--primary-dim);
    color: var(--primary);
}
.tok-meta-item {
    font-size: 11px;
    color: var(--text-muted);
    padding: 3px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
}

.tok-panels {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tok-test-panel {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.tok-test-panel .panel-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 10px;
}
.tok-test-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.tok-test-input {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
}
.tok-test-input:focus { outline: none; border-color: var(--primary); }

.tok-result {
    display: none;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12px;
}
.tok-result-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    line-height: 1.5;
}
.tok-result-row:last-child { margin-bottom: 0; }
.tok-result-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 60px;
    flex-shrink: 0;
    padding-top: 1px;
}
.tok-result-value { color: var(--text-sub); word-break: break-all; }
.tok-token-chip {
    display: inline-block;
    padding: 1px 6px;
    background: var(--primary-dim);
    color: var(--primary);
    border-radius: 4px;
    font-size: 11px;
    font-family: var(--font-mono);
    margin: 1px 2px;
}

.tok-vocab-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px 20px 0;
}
.tok-vocab-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-shrink: 0;
}
.tok-vocab-search {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 12px;
    color: var(--text);
    font-size: 13px;
}
.tok-vocab-search:focus { outline: none; border-color: var(--primary); }
.tok-vocab-count { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

.tok-vocab-table {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px;
    background: var(--bg);
}
.tok-vocab-table::-webkit-scrollbar { width: 4px; }
.tok-vocab-table::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.tok-vocab-row {
    display: flex;
    align-items: center;
    padding: 5px 14px;
    border-bottom: 1px solid var(--hairline);
    font-size: 12px;
}
.tok-vocab-row:last-child { border-bottom: none; }
.tok-vocab-id {
    width: 48px;
    flex-shrink: 0;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
}
.tok-vocab-token {
    font-family: var(--font-mono);
    color: var(--text-sub);
    word-break: break-all;
}

.tok-vocab-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 0 14px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-muted);
}

/* ── Devices Page ── */
.dev-section { margin-bottom: 28px; }
.dev-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

.dev-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    user-select: none;
}
.dev-card:hover { border-color: rgba(var(--primary-rgb), 0.4); }
.dev-card.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.dev-card-type {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.dev-card-type.type-cuda  { color: var(--success); }
.dev-card-type.type-mps   { color: #f59e0b; }
.dev-card-type.type-cpu   { color: var(--text-muted); }

.dev-card-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dev-bar-wrap {
    background: var(--hairline);
    border-radius: 4px;
    height: 5px;
    overflow: hidden;
    margin-bottom: 6px;
}
.dev-bar {
    height: 100%;
    border-radius: 4px;
    background: var(--primary);
    transition: width 0.6s ease;
}
.dev-bar.warn   { background: #f59e0b; }
.dev-bar.danger { background: var(--danger); }

.dev-stat {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
}
.dev-stat-val { color: var(--text-sub); font-family: var(--font-mono); }

.dev-cluster-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.dev-cluster-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 13px;
}
.dev-cluster-row:last-child { margin-bottom: 0; }
.dev-cluster-name { font-weight: 700; color: var(--text); flex: 1; min-width: 0; }
.dev-cluster-meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

.dev-chip {
    display: inline-block;
    padding: 2px 7px;
    background: var(--primary-dim);
    color: var(--primary);
    border-radius: 4px;
    font-size: 11px;
    font-family: var(--font-mono);
    margin: 1px 2px;
}
.dev-chip.type-cuda { background: rgba(34,197,94,0.12); color: var(--success); }
.dev-chip.type-mps  { background: rgba(245,158,11,0.12); color: #f59e0b; }

.dev-aws-box {
    padding: 28px;
    text-align: center;
    border: 2px dashed var(--border);
    border-radius: 12px;
}
.dev-aws-box-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-sub);
    margin-bottom: 6px;
}
.dev-aws-box-desc { font-size: 12px; color: var(--text-muted); }

/* ── AWS Panel ── */
.aws-connect-bar {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 14px;
}
.aws-connect-bar .form-group { margin: 0; flex: 1; min-width: 140px; }
.aws-connect-bar .form-label { font-size: 10px; margin-bottom: 4px; }
.aws-connect-bar .form-control { font-size: 12px; padding: 6px 10px; }

.aws-status-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(34,197,94,0.07);
    border: 1px solid rgba(34,197,94,0.2);
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 13px;
}
.aws-status-bar .aws-dot { color: var(--success); font-size: 10px; }
.aws-status-info { color: var(--text-sub); flex: 1; }

.aws-instance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.aws-inst-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
}
.aws-inst-card.state-running { border-color: rgba(34,197,94,0.35); }
.aws-inst-card.state-stopped { opacity: 0.7; }
.aws-inst-card.state-pending { border-color: rgba(245,158,11,0.35); }

.aws-inst-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
}
.aws-inst-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    flex: 1;
    min-width: 0;
    word-break: break-all;
}
.aws-state-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}
.aws-state-dot.running { background: var(--success); }
.aws-state-dot.stopped { background: var(--text-muted); }
.aws-state-dot.pending,
.aws-state-dot.stopping,
.aws-state-dot.starting { background: #f59e0b; }

.aws-inst-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
.aws-inst-meta span { margin-right: 8px; }
.aws-inst-ip {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-sub);
    margin-bottom: 10px;
}

.aws-inst-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.aws-inst-actions .btn { font-size: 11px; padding: 3px 10px; }

.aws-filter-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}
.aws-filter-bar .form-control { font-size: 12px; padding: 5px 10px; max-width: 180px; }

.aws-add-node-modal .form-group { margin-bottom: 12px; }

/* ── Weights Page ── */
.wt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.wt-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wt-card.missing { opacity: 0.55; border-style: dashed; }

.wt-card-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.wt-card-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    flex: 1;
    min-width: 0;
    word-break: break-all;
}
.wt-card-date { font-size: 10px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }

.wt-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.wt-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-sub);
    white-space: nowrap;
}
.wt-badge.primary { background: var(--primary-dim); border-color: transparent; color: var(--primary-ink); }
.wt-badge.ddp     { background: rgba(34,197,94,0.1); border-color: transparent; color: var(--success); }

.wt-stats {
    display: flex;
    gap: 14px;
    font-size: 11px;
    color: var(--text-muted);
}
.wt-stats span { display: flex; flex-direction: column; gap: 1px; }
.wt-stats strong { color: var(--text-sub); font-size: 12px; }

.wt-actions { display: flex; gap: 6px; margin-top: auto; }
.wt-actions .btn { font-size: 11px; padding: 4px 10px; }

.wt-filter-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.wt-filter-bar .form-control { font-size: 12px; padding: 5px 10px; max-width: 200px; }
.wt-count { font-size: 12px; color: var(--text-muted); margin-left: auto; }

/* ── Inline Rename ── */
.rename-wrap { display:flex; align-items:center; gap:4px; min-width:0; flex:1; }
.rename-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 11px; padding: 1px 3px;
    opacity: 0; transition: opacity 0.15s;
    flex-shrink: 0;
}
.rename-wrap:hover .rename-btn { opacity: 1; }
.rename-input {
    background: var(--bg); border: 1px solid var(--primary);
    border-radius: 4px; color: var(--text); font-size: inherit;
    font-family: inherit; font-weight: inherit;
    padding: 1px 6px; min-width: 0; flex: 1;
}
.rename-input:focus { outline: none; }
.rename-confirm { background:none; border:none; cursor:pointer; color:var(--success); font-size:13px; flex-shrink:0; }
.rename-cancel  { background:none; border:none; cursor:pointer; color:var(--danger);  font-size:13px; flex-shrink:0; }

/* ── Datasets Page ── */
.ds-stat-row {
    display: flex;
    gap: 16px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.ds-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ds-stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.ds-stat-val   { font-size: 13px; font-weight: 700; color: var(--text-sub); font-family: var(--font-mono); }

.ds-preview {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-sub);
    white-space: pre-wrap;
    word-break: break-all;
    background: var(--bg);
}
.ds-preview::-webkit-scrollbar { width: 4px; }
.ds-preview::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.ds-ref-banner {
    padding: 12px 14px;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 8px;
    margin: 12px 20px;
    font-size: 12px;
    color: var(--danger);
}

/* ── Help sections ── */
.help-section {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.help-summary {
    padding: 12px 18px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-sub);
    background: var(--card-bg);
    user-select: none;
    list-style: none;
}
.help-summary::-webkit-details-marker { display: none; }
.help-summary::after {
    content: ' ▸';
    color: var(--text-muted);
    font-size: 11px;
}
details[open] .help-summary::after { content: ' ▾'; }
.help-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: var(--bg);
    border-top: 1px solid var(--border);
}
.help-block { display: flex; flex-direction: column; gap: 8px; }
.help-block-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--primary);
}
.help-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.help-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--hairline);
    vertical-align: top;
}
.help-table td:first-child {
    white-space: nowrap;
    color: var(--text-sub);
    width: 130px;
    padding-right: 14px;
}
.help-steps {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-sub);
}
.btn-secondary {
    background: rgba(245,158,11,0.15);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,0.3);
}
.btn-secondary:hover:not(:disabled) {
    background: rgba(245,158,11,0.25);
}

/* ── GPU 가이드 ─────────────────────────────────────────── */
.gpu-guide-section {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 16px;
}
.gpu-guide-summary {
    padding: 11px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--warning);
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--card-bg);
}
.gpu-guide-summary::-webkit-details-marker { display: none; }
.gpu-guide-summary::after { content: ' ▸'; color: var(--text-muted); font-size: 11px; }
details[open] .gpu-guide-summary::after { content: ' ▾'; }
.gpu-guide-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: var(--bg);
    border-top: 1px solid var(--border);
}
.gpu-model-select {
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}
.gpu-model-select:focus { outline: none; border-color: var(--primary); }
.gpu-model-select option,
.gpu-model-select optgroup { background: var(--card-bg); }
.gpu-param-display {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--warning);
    letter-spacing: 0.5px;
    line-height: 1.2;
}
.gpu-param-sub {
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
    font-family: var(--font-mono);
}
.gpu-param-source {
    text-align: center;
    font-size: 11px;
    color: var(--primary);
    margin-top: 2px;
    font-weight: 600;
}
.gpu-slider-wrap {
    position: relative;
    padding-bottom: 24px;
}
.gpu-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    margin-top: 6px;
}
.gpu-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--warning);
    cursor: pointer;
    box-shadow: 0 0 8px rgba(245,158,11,0.6);
    transition: box-shadow 0.15s;
}
.gpu-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 12px rgba(245,158,11,0.9);
}
.gpu-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--warning);
    cursor: pointer;
    border: none;
}
.gpu-tick-row {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    pointer-events: none;
}
.gpu-tick {
    position: absolute;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    font-family: var(--font-mono);
}
.gpu-tick::before {
    content: '';
    display: block;
    width: 1px;
    height: 5px;
    background: var(--border);
    margin: 0 auto 1px;
}
.gpu-tick.active-tick { color: var(--warning); }
.gpu-tick.active-tick::before { background: var(--warning); }
.gpu-table-wrap { overflow: visible; }  /* 헤더 배지 툴팁이 잘리지 않도록 (overflow-x:auto는 세로도 클립함) */
.gpu-gtable {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 420px;
}
.gpu-gtable th {
    color: var(--text-muted);
    font-weight: 600;
    padding: 4px 8px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
}
.gpu-gtable td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--hairline);
    vertical-align: middle;
}
.gpu-gtable tr:hover td { background: var(--hairline); }
.gpu-bar-cell { width: 110px; min-width: 90px; }
.gpu-bar-track {
    height: 6px;
    background: var(--hairline);
    border-radius: 3px;
    overflow: hidden;
}
.gpu-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease, background-color 0.3s ease;
}
.gpu-status {
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.3px;
}
.gpu-st-ok   { background: rgba(34,197,94,0.12);  color: var(--success); }
.gpu-st-warn { background: rgba(245,158,11,0.12); color: var(--warning); }
.gpu-st-no   { background: rgba(239,68,68,0.12);  color: var(--danger);  }
.gpu-note {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.7;
    padding-top: 4px;
    border-top: 1px solid var(--border);
}

/* GPU 개수 컨트롤 */
.gpu-count-ctrl {
    display: flex;
    align-items: center;
    gap: 4px;
}
.gpu-count-btn {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-sub);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}
.gpu-count-btn:hover {
    background: var(--primary-dim);
    color: var(--primary);
    border-color: var(--primary);
}
.gpu-count-val {
    min-width: 22px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text);
}

/* AWS 비용 표시 */
.gpu-cost {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-sub);
    margin-top: 3px;
    line-height: 1.5;
}
.gpu-cost strong {
    color: var(--accent);
}
.gpu-cost-mo {
    display: block;
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 1px;
}
.gpu-cost-na {
    font-size: 9px;
    color: var(--text-muted);
    font-style: italic;
    letter-spacing: 0.2px;
}

/* 현재 크기 근처 모델 배너 */
.gpu-near-models {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    padding: 4px 0;
}
.gpu-ref-badge {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary);
    border: 1px solid rgba(var(--primary-rgb), 0.25);
    white-space: nowrap;
    font-weight: 600;
}
.gpu-ref-est {
    background: rgba(167,139,250,0.1);
    color: #a78bfa;
    border-color: rgba(167,139,250,0.25);
    font-style: italic;
}

/* 유명 모델 랜드마크 */
.gpu-lm-row {
    position: relative;
    height: 52px;
    margin-bottom: 2px;
    pointer-events: none;
}
.gpu-lm {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.25;
    transition: opacity 0.2s;
}
.gpu-lm-label {
    font-size: 9px;
    white-space: nowrap;
    color: var(--text-muted);
    font-family: var(--font-mono);
    padding: 1px 4px;
    border-radius: 3px;
    margin-bottom: 2px;
    transition: color 0.2s, background 0.2s, font-weight 0.1s;
}
.gpu-lm-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: background 0.2s, transform 0.15s;
}
.gpu-lm-est .gpu-lm-label { font-style: italic; }

/* 가까운 모델 — 밝게 */
.gpu-lm.gpu-lm-near {
    opacity: 0.65;
}
.gpu-lm.gpu-lm-near .gpu-lm-label { color: var(--text-sub); }
.gpu-lm.gpu-lm-near .gpu-lm-dot   { background: var(--text-sub); }

/* 현재 위치 모델 — 강조 */
.gpu-lm.gpu-lm-hot {
    opacity: 1;
}
.gpu-lm.gpu-lm-hot .gpu-lm-label {
    color: var(--warning);
    font-weight: 700;
    background: rgba(245,158,11,0.12);
}
.gpu-lm.gpu-lm-hot .gpu-lm-dot {
    background: var(--warning);
    transform: scale(1.5);
    box-shadow: 0 0 6px rgba(245,158,11,0.7);
}
/* 추정치 모델은 보라색 강조 */
.gpu-lm-est.gpu-lm-hot .gpu-lm-label {
    color: #a78bfa;
    background: rgba(167,139,250,0.12);
}
.gpu-lm-est.gpu-lm-hot .gpu-lm-dot { background: #a78bfa; box-shadow: 0 0 6px rgba(167,139,250,0.7); }

/* ── 학습 시간 예측 패널 ─────────────────────────────────── */
/* ── 학습 시간 예측 패널 ──────────────────────────────────── */
.te-placeholder {
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    padding: 10px 0;
}
/* 좌우 2열 레이아웃 */
.te-layout {
    display: flex;
    gap: 24px;
    align-items: stretch;
}
.te-left {
    min-width: 180px;
    padding-right: 24px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.te-right {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    align-content: center;
}
/* 왼쪽: 시간 표시 */
.te-time-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.te-time-val {
    font-size: 32px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 6px;
}
.te-time-na {
    color: var(--text-muted);
    font-size: 22px;
}
.te-time-steps {
    font-size: 11px;
    color: var(--text-sub);
    font-family: var(--font-mono);
}
/* 오른쪽: 스탯 항목 */
.te-stat {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.te-stat-icon {
    font-size: 14px;
    line-height: 1.4;
    opacity: 0.7;
}
.te-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 2px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.te-stat-val {
    font-size: 12px;
    color: var(--text);
    font-family: var(--font-mono);
    font-weight: 600;
}
/* 하단 주석 */
.te-note {
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    line-height: 1.6;
}


/* ── 공용 툴팁 (data-tip) ─────────────────────────────────────
   순수 CSS — JS·리스너 없음. hover 0.2초 후 표시. */
[data-tip] { position: relative; cursor: help; }
select[data-tip], button[data-tip] { cursor: pointer; }   /* 조작 컨트롤은 도움말(?) 대신 포인터 유지(툴팁은 그대로) */
[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 0;
    width: max-content;
    max-width: 270px;
    padding: 8px 11px;
    background: var(--tooltip-bg);
    border: 1px solid rgba(var(--primary-rgb), 0.35);
    border-radius: 8px;
    color: var(--tooltip-fg);
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.55;
    white-space: pre-line;     /* data-tip 안의 \n을 줄바꿈으로 (없으면 영향 없음) */
    text-transform: none;      /* stat-label 등의 uppercase 상속 차단 */
    letter-spacing: normal;
    text-decoration: none;
    box-shadow: 0 6px 18px var(--shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.1s ease 0s, visibility 0s 0s;   /* 사라질 땐 즉시 */
    z-index: 300;
}
[data-tip]:hover::after {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.15s ease 0.2s, visibility 0s 0.2s;   /* 나타날 땐 0.2초 지연 */
}
/* 화면 가장자리용 변형: 아래로 열기 / 우측 끝 정렬 */
[data-tip][data-tip-down]::after  { bottom: auto; top: calc(100% + 7px); }
[data-tip][data-tip-right]::after { left: auto; right: 0; }
/* 개념 설명용 넓은 변형 — 긴 교육성 툴팁이 세로로 너무 길어지지 않게 */
[data-tip][data-tip-wide]::after  { max-width: 400px; }

/* 공개범위 토글 버튼 (나만보기 ↔ 로컬공유) — 목록 항목에서 버튼처럼 보이게 */
.vis-toggle {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; line-height: 1; padding: 2px 8px;
    border: 1px solid var(--border); border-radius: 10px;
    color: var(--text-sub); cursor: pointer; vertical-align: middle;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.vis-toggle:hover { background: var(--card-bg); border-color: var(--text-muted); color: var(--text); }
.vis-toggle.shared { color: var(--primary); border-color: var(--primary); }
.vis-toggle.shared:hover { background: var(--primary-dim); }
/* .vis-toggle 툴팁은 JS가 <body>에 fixed로 띄운다(스크롤/overflow 박스에 안 잘림) → CSS ::after 툴팁은 끔 */
.vis-toggle[data-tip]::after { content: none !important; display: none !important; }
.vis-tip {
    position: fixed; z-index: 9999;
    max-width: 300px; padding: 8px 11px;
    background: var(--tooltip-bg); border: 1px solid rgba(var(--primary-rgb), 0.35); border-radius: 8px;
    color: var(--tooltip-fg); font-size: 11.5px; line-height: 1.55;
    white-space: pre-line; box-shadow: 0 6px 18px var(--shadow);
    pointer-events: none; display: none;
}
/* 설명 있는 라벨임을 항상 보이게 — 점선 밑줄 */
label[data-tip], .form-label[data-tip], .stat-label[data-tip], th[data-tip] {
    text-decoration: underline dotted rgba(160, 160, 200, 0.5) 1px;
    text-underline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════
   NeuroCosm — 신경망 × 우주 디자인 레이어 (v3.0.0)
   ════════════════════════════════════════════════════════════ */

/* 절차적 별빛·신경망 배경 (cosmos-bg.js가 그림) */
#cosmos-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;                           /* 은은하게 */
    transform: translateZ(0);                /* GPU 독립 레이어 → 스크롤과 분리(렉 방지) */
    backface-visibility: hidden;
}
/* 콘텐츠는 배경 위에 */
.layout { position: relative; z-index: 1; }

/* ── 심플/배터리 절약 모드 ──
   카드 불투명(alpha 1) + 블러 0 + backdrop-filter 제거(GPU 안 씀) + 배경 캔버스 숨김.
   cosmos-bg.js도 perf-saver면 애니메이션 루프를 멈춘다. */
html.perf-saver { --card-alpha: 1; --card-blur: 0px; }
html.perf-saver #cosmos-bg { display: none; }
html.perf-saver .card,
html.perf-saver .lab-sidebar,
html.perf-saver .lab-viewer,
html.perf-saver .msg.ai .msg-bubble {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* 로고 — 우주 그라데이션 + 글로우 */
.logo span {
    background: linear-gradient(100deg, var(--rose) 0%, var(--primary) 42%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px rgba(var(--primary-rgb), 0.45));
}
/* 라이트에서도 로고는 다크 코스믹 색 고정 — 브랜드 아이덴티티 유지(테마 변수 안 따름) */
[data-theme="light"] .logo span {
    background: linear-gradient(100deg, #f4a6c4 0%, #8b6cff 42%, #22d3ee 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px rgba(139,108,255,0.45));
}

/* 사이드바 — 반투명 글래스 + 우경계 글로우 */
.sidebar {
    background: var(--sidebar-grad);
    backdrop-filter: blur(8px);
    border-right: 1px solid rgba(var(--primary-rgb), 0.18);
    box-shadow: 1px 0 24px rgba(var(--primary-rgb), 0.07);
}

/* 활성 내비 — 퍼플 글로우 강조 */
.nav-item.active {
    box-shadow: var(--glow-purple);
}
.nav-item.active .nav-icon { color: var(--accent); }

/* 기본 버튼 — 은은한 글로우 */
.btn-primary { box-shadow: 0 0 0 rgba(var(--primary-rgb), 0); transition: box-shadow .25s, transform .1s; }
.btn-primary:hover { box-shadow: var(--glow-purple); }

/* 연결 상태 배지 — 살아있는 별 글로우 */
.status-badge.badge-on { text-shadow: 0 0 10px rgba(34,197,94,0.6); }

/* 버전 배지 — 골드 포인트 */
.version-badge {
    color: var(--gold);
    text-shadow: var(--glow-gold);
    letter-spacing: 1px;
}

/* 카드 — 깊이감 있는 우주 표면 + 미세 테두리 글로우 */
.card, .rlab-card {
    border: 1px solid rgba(var(--primary-rgb), 0.14);
    box-shadow: 0 6px 30px var(--shadow-lg), inset 0 0 0 1px var(--hairline);
}

/* 페이지 제목 — 별빛 그라데이션 */
.page-title {
    background: linear-gradient(90deg, var(--text) 0%, var(--accent) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 모션 민감 사용자 배려 — 배경 애니메이션 정지 */
@media (prefers-reduced-motion: reduce) {
    #cosmos-bg { opacity: 0.3; }
}

/* ── 전역 마감 디테일 ── */
/* 우주색 스크롤바 */
* { scrollbar-width: thin; scrollbar-color: rgba(var(--primary-rgb), 0.45) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.55), rgba(34,211,238,0.45));
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--primary), var(--accent)); background-clip: padding-box; }

/* 드래그 선택 색 */
::selection { background: rgba(var(--primary-rgb), 0.35); color: #fff; }

/* 키보드 포커스 링 — 시안 글로우 (접근성) */
:focus-visible {
    outline: 2px solid rgba(34,211,238,0.7);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── 페이지: 챗봇 (/inference) ── */
/* 발신자 라벨 색 구분 — AI=시안, YOU=로즈 */
.msg.ai   .msg-label { color: var(--accent); }
.msg.user .msg-label { color: var(--rose); }
/* 말풍선 깊이감 */
.msg.user .msg-bubble {
    box-shadow: 0 2px 14px rgba(var(--primary-rgb), 0.14);
}
.msg.ai .msg-bubble {
    border: none;          /* ChatGPT/Claude식 — 봇 답변은 말풍선/그림자 없이 */
    box-shadow: none;
}
/* 입력창 포커스 — 보더 대신 은은한 글로우 링 */
.chat-input:focus { border-color: var(--primary); box-shadow: var(--glow-purple); }
/* 빈 상태 아이콘 — 우주 그라데이션 + 글로우 */
.empty-icon {
    background: linear-gradient(120deg, var(--rose), var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(var(--primary-rgb), 0.4));
}

/* ── 페이지: 데이터셋 (/datasets) ── */
/* 업로드 존 — hover/드래그 시 우주 글로우 */
.upload-zone {
    border-color: rgba(var(--primary-rgb), 0.28);
    background: rgba(var(--primary-rgb), 0.03);
}
.upload-zone:hover {
    border-color: var(--primary);
    background: var(--primary-dim);
    box-shadow: var(--glow-purple);
    color: var(--text-sub);
}
.upload-zone.drag-over {
    border-color: var(--accent);
    box-shadow: var(--glow-cyan);
}
.upload-icon {
    background: linear-gradient(120deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 8px rgba(var(--primary-rgb), 0.35));
}
/* 통계 값 — 가독성 위해 밝게 */
.ds-stat-val { color: var(--text); }

/* ── 페이지: 모델 설계 (/lab) · 토크나이저 랩 (공유 lab-*) ── */
.lab-model-card { transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; }
.lab-model-card.active { box-shadow: var(--glow-purple); }

/* ── 페이지: 디바이스 (/devices) ── */
.dev-card:hover { box-shadow: var(--glow-purple); }
/* 자원 사용량 바 — 에너지 미터(퍼플→시안). 경고(.warn/.danger)는 더 구체적이라 유지 */
.dev-bar { background: linear-gradient(90deg, var(--primary), var(--accent)); }

/* ════════════════════════════════════════════════════════════
   인증 UI — 우측 상단 로그인 패널 (로그인/가입 버튼·아바타·드롭다운·모달)
   ════════════════════════════════════════════════════════════ */

/* 슬롯 — JS(Auth.render)가 내용을 채움 */
#auth-slot { display: flex; align-items: center; gap: 8px; }

/* 로그아웃 상태 — 로그인 / 가입 버튼 */
.auth-btn {
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-sub);
}
.auth-btn-login { color: var(--text-sub); }
.auth-btn-login:hover { color: var(--text); }
.auth-btn-signup {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 0 0 rgba(var(--primary-rgb), 0);
}
.auth-btn-signup:hover { background: var(--primary-hover); box-shadow: var(--glow-purple); }

/* 로그인 상태 — 아바타 트리거 */
.auth-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border-radius: 22px;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--card-bg);
    transition: all 0.15s;
}
.auth-user:hover { border-color: var(--primary); }
.auth-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 13px; font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    background-size: cover; background-position: center;   /* 프로필 사진(background-image)이 원에 꽉 차게 */
    box-shadow: var(--glow-purple);
    flex: none;
}
.auth-avatar.has-img { box-shadow: none; }   /* 사진일 땐 글로우 제거 */
.auth-user-name {
    font-size: 12.5px; font-weight: 600; color: var(--text);
    max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auth-user-caret { font-size: 9px; color: var(--text-muted); transition: transform 0.15s; }
.auth-user.open .auth-user-caret { transform: rotate(180deg); }

/* 드롭다운 메뉴 */
.auth-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px var(--shadow-lg), var(--glow-purple);
    padding: 6px;
    z-index: 200;
    animation: authMenuIn 0.12s ease;
}
@keyframes authMenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.auth-menu-head {
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}
.auth-menu-name { font-size: 13px; font-weight: 700; color: var(--text); }
.auth-menu-sub  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.auth-menu-badge {
    display: inline-block; margin-left: 6px;
    font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
    color: var(--gold); border: 1px solid rgba(245,201,123,0.4);
    border-radius: 4px; padding: 1px 5px; vertical-align: middle;
}
.auth-menu-item {
    display: flex; align-items: center; gap: 9px;
    width: 100%; text-align: left;
    padding: 9px 12px; border-radius: 8px;
    font-size: 13px; color: var(--text-sub);
    background: transparent; border: none; cursor: pointer;
    text-decoration: none;
    transition: all 0.12s;
}
.auth-menu-item:hover { background: var(--card-hover); color: var(--text); }
.auth-menu-item .ico { width: 16px; text-align: center; opacity: 0.85; }
.auth-menu-item.disabled { color: var(--text-muted); cursor: default; }
.auth-menu-item.disabled:hover { background: transparent; color: var(--text-muted); }
.auth-menu-item.disabled .soon {
    margin-left: auto; font-size: 9px; color: var(--text-muted);
    border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
}
.auth-menu-item.danger { color: var(--rose); }
.auth-menu-item.danger:hover { background: rgba(244,166,196,0.1); color: var(--rose); }

/* ── 모달 ── */
.auth-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(3,3,10,0.72);
    backdrop-filter: blur(6px);
    display: grid; place-items: center;
    z-index: 1000;
    animation: authFade 0.15s ease;
}
.auth-modal-backdrop[hidden] { display: none; }
@keyframes authFade { from { opacity: 0; } to { opacity: 1; } }
.auth-modal {
    position: relative;
    width: min(400px, calc(100vw - 32px));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 70px var(--shadow-lg), 0 0 40px rgba(var(--primary-rgb), 0.12);
    padding: 28px 26px 24px;
    animation: authModalIn 0.18s ease;
}
@keyframes authModalIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.auth-modal-close {
    position: absolute; top: 14px; right: 16px;
    background: transparent; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 16px; line-height: 1;
    padding: 4px; border-radius: 6px; transition: all 0.12s;
}
.auth-modal-close:hover { color: var(--text); background: var(--card-hover); }
.auth-modal-title {
    font-family: var(--font-display);
    font-size: 20px; font-weight: 700; color: var(--text);
    margin-bottom: 4px;
}
.auth-modal-tagline { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }

.auth-field { margin-bottom: 14px; }
.auth-field label {
    display: block; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-muted); margin-bottom: 6px;
}
.auth-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    font-family: var(--font-sans);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.auth-input::placeholder { color: var(--text-muted); }

.auth-check {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--text-sub);
    cursor: pointer; margin-bottom: 16px; user-select: none;
}
.auth-check input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }

.auth-register-only { display: none; }
.auth-modal.mode-register .auth-register-only { display: block; }
.auth-modal.mode-register .auth-check.auth-register-only { display: flex; }

.auth-error {
    font-size: 12px; color: var(--danger);
    background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25);
    border-radius: 8px; padding: 9px 12px; margin-bottom: 14px;
}
.auth-error[hidden] { display: none; }

.auth-submit { width: 100%; justify-content: center; padding: 11px; font-size: 14px; }

.auth-switch {
    margin-top: 18px; text-align: center;
    font-size: 12.5px; color: var(--text-muted);
}
.auth-switch a {
    color: var(--primary); font-weight: 600; text-decoration: none; cursor: pointer;
    margin-left: 4px;
}
.auth-switch a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════
   내비 모드 토글 — 스튜디오 ↔ 소셜 (세그먼트 필, A안)
   nav-mode.js(ModeNav)가 .sidebar 에 mode-studio/mode-social 토글
   ════════════════════════════════════════════════════════════ */
.mode-switch {
    display: flex;
    gap: 2px;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 14px;
}
.mode-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 7px 4px;
    border: none; background: transparent;
    color: var(--text-muted);
    font-size: 12.5px; font-weight: 600;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.mode-btn .mode-ico { font-size: 13px; line-height: 1; }
.mode-btn:hover:not(.active) { color: var(--text-sub); }
.mode-btn.active {
    background: var(--primary);
    color: #fff;
    box-shadow: var(--glow-purple);
}

/* 모드별 메뉴 전환 — 한 번에 하나만 노출 */
.nav-social { display: none; }
.sidebar.mode-social .nav-studio { display: none; }
.sidebar.mode-social .nav-social { display: flex; }

/* 소셜 메뉴 — 6단계 전까지 준비 중 항목 */
.nav-item.disabled { cursor: default; opacity: 0.65; }
.nav-item.disabled:hover { background: transparent; color: var(--text-sub); }
.nav-soon {
    margin-left: auto;
    font-size: 9px; font-weight: 700; letter-spacing: 0.3px;
    color: var(--text-muted);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 1px 5px;
}
.nav-social-note {
    margin-top: 10px; padding: 10px 11px;
    font-size: 11px; line-height: 1.6; color: var(--text-muted);
    background: rgba(var(--primary-rgb), 0.05);
    border: 1px dashed var(--border); border-radius: 8px;
}

/* ════════════════════════════════════════════════════════════
   소셜 — 프로필 / 봇 카드 (6단계)
   ════════════════════════════════════════════════════════════ */
.profile-wrap { max-width: 860px; }
.profile-loading { color: var(--text-muted); font-size: 13px; padding: 20px 0; }

.profile-missing {
    text-align: center; padding: 60px 20px; color: var(--text-sub);
}
.profile-missing-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.8; }

/* 헤더 */
.profile-header {
    display: flex; align-items: flex-start; gap: 20px;
    padding: 8px 0 22px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 22px;
}
.profile-avatar {
    width: 76px; height: 76px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 30px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    background-size: cover; background-position: center;
    box-shadow: var(--glow-purple); flex: none;
}
.profile-avatar.has-img { background-image: none; }   /* inline style 로 url 지정 */
.profile-head-main { flex: 1; min-width: 0; }
.profile-name-row { display: flex; align-items: center; gap: 8px; }
.profile-name {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 700; color: var(--text);
}
.profile-handle { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.profile-bio { font-size: 13.5px; color: var(--text-sub); line-height: 1.6; margin-top: 10px; }
.profile-stats { display: flex; gap: 18px; margin-top: 14px; font-size: 13px; color: var(--text-muted); }
.profile-stats strong { color: var(--text); font-weight: 700; }
.profile-head-actions { flex: none; }
.profile-head-actions .btn { min-width: 92px; justify-content: center; }

/* 섹션 */
.profile-section-title {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--text-muted); margin-bottom: 14px;
}

/* 봇 카드 그리드 */
.bot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.bot-empty { color: var(--text-muted); font-size: 13px; padding: 8px 0; }
.bot-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 16px 14px;
    display: flex; flex-direction: column; gap: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.bot-card:hover { border-color: var(--primary); box-shadow: var(--glow-purple); }
.bot-card-top { display: flex; align-items: center; gap: 8px; }
.bot-card-name {
    font-size: 14.5px; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.bot-card-desc {
    font-size: 12.5px; color: var(--text-sub); line-height: 1.55;
    min-height: 34px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bot-card-nodesc { color: var(--text-muted); font-style: italic; }
.bot-card-chat { justify-content: center; margin-top: 2px; }

/* 공개범위 배지 */
.bot-vis {
    flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px;
    padding: 2px 7px; border-radius: 5px; border: 1px solid transparent;
}
.bot-vis-public    { color: var(--accent); border-color: rgba(34,211,238,0.35);  background: rgba(34,211,238,0.08); }
.bot-vis-followers { color: var(--primary-ink); border-color: rgba(var(--primary-rgb), 0.4);  background: rgba(var(--primary-rgb), 0.1); }
.bot-vis-selected  { color: var(--gold);   border-color: rgba(245,201,123,0.4);  background: rgba(245,201,123,0.08); }

/* ── 소셜: 탐색(/explore) ── */
.explore-wrap { max-width: 720px; }
.explore-search { margin-bottom: 18px; }
.explore-search .auth-input { width: 100%; }
.explore-status { color: var(--text-muted); font-size: 13px; padding: 10px 0; }

.user-grid { display: flex; flex-direction: column; gap: 10px; }
.user-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px 14px;
    transition: border-color 0.15s;
}
.user-card:hover { border-color: var(--primary); }
.user-card-link {
    display: flex; align-items: center; gap: 12px;
    flex: 1; min-width: 0; text-decoration: none;
}
.user-card-avatar {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    font-size: 17px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    background-size: cover; background-position: center;
}
.user-card-avatar.has-img { background-image: none; }
.user-card-info { display: flex; flex-direction: column; min-width: 0; }
.user-card-name {
    font-size: 14px; font-weight: 600; color: var(--text);
    display: flex; align-items: center; gap: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-card-handle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.user-card-follow { flex: none; min-width: 86px; justify-content: center; }

/* ── 소셜: 프로필 편집 모달 ── */
.edit-avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.edit-avatar { width: 64px; height: 64px; font-size: 26px; flex: none; }
.edit-avatar-hint { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
textarea.auth-input { resize: vertical; min-height: 64px; font-family: var(--font-sans); line-height: 1.5; }

/* ── 가중치: 공개범위 버튼 + 공개 모달 (6단계 ③) ── */
.wt-publish { gap: 5px; }
.wt-publish.bot-vis-public    { color: var(--accent);  border-color: rgba(34,211,238,0.4); }
.wt-publish.bot-vis-followers { color: var(--primary-ink); border-color: rgba(var(--primary-rgb), 0.45); }
.wt-publish.bot-vis-selected  { color: var(--gold);    border-color: rgba(245,201,123,0.45); }

.pub-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.pub-opt {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px;
    cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.pub-opt:hover { border-color: var(--primary); }
.pub-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-dim); }
.pub-opt input { margin-top: 2px; accent-color: var(--primary); flex: none; }
.pub-opt span { display: flex; flex-direction: column; gap: 2px; }
.pub-opt strong { font-size: 13.5px; color: var(--text); font-weight: 600; }
.pub-opt em { font-size: 11.5px; color: var(--text-muted); font-style: normal; }

.pub-people { margin-bottom: 16px; }
.pub-people .auth-input { width: 100%; }
.pub-people-results {
    display: flex; flex-direction: column; gap: 2px; margin-top: 6px;
    max-height: 180px; overflow-y: auto;
}
.pub-person {
    display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
    padding: 8px 10px; border: none; background: transparent; border-radius: 8px;
    color: var(--text-sub); font-size: 13px; cursor: pointer; transition: background 0.12s;
}
.pub-person:hover { background: var(--card-hover); color: var(--text); }
.pub-person-handle { color: var(--text-muted); font-size: 11.5px; }
.pub-person-empty { font-size: 12px; color: var(--text-muted); padding: 8px 10px; }
.pub-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pub-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 6px 4px 10px; border-radius: 14px;
    background: var(--primary-dim); border: 1px solid rgba(var(--primary-rgb), 0.4);
    color: var(--text); font-size: 12px;
}
.pub-chip button {
    border: none; background: transparent; color: var(--text-muted);
    cursor: pointer; font-size: 12px; padding: 0 2px; border-radius: 50%;
}
.pub-chip button:hover { color: var(--danger); }

/* ── 소셜: 공개 챗봇과 대화 페이지 (/c/{id}, 7단계) ── */
.csocial-wrap { max-width: 880px; margin: 0 auto; }   /* 가운데 + 넓게(페이지 활용, 여백 축소) */
.csocial-body { display: flex; flex-direction: column; height: calc(100vh - 160px); min-height: 420px; }
.csocial-header {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--border);
}
.csocial-bot-avatar {
    width: 42px; height: 42px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-size: 18px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: var(--glow-purple);
}
.csocial-bot-name { font-size: 15px; font-weight: 700; color: var(--text); }
.csocial-bot-owner { font-size: 12px; color: var(--text-muted); text-decoration: none; }
.csocial-bot-owner:hover { color: var(--primary); }

.csocial-messages {
    flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
    padding: 4px 2px;
}
.cs-msg { display: flex; }
.cs-msg-user { justify-content: flex-end; }
.cs-bubble {
    max-width: 78%; padding: 9px 13px; border-radius: 14px;
    font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.cs-msg-user .cs-bubble { background: var(--primary-dim); color: var(--text); border: 1px solid rgba(var(--primary-rgb),0.3); border-bottom-right-radius: 4px; }   /* 은은한 유저 버블 */
.cs-msg-bot  .cs-bubble { max-width: 100%; background: transparent; border: none; color: var(--text); padding: 2px 0; border-radius: 0; }   /* 봇: 말풍선 없이 텍스트만 */
.cs-msg-error .cs-bubble { color: var(--danger); border-color: rgba(239,68,68,0.3); }

.csocial-input-row { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.csocial-input {
    flex: 1; resize: none; max-height: 140px;
    padding: 10px 12px; background: var(--bg-deep); border: 1px solid var(--border);
    border-radius: 10px; color: var(--text); font-size: 14px; font-family: var(--font-sans); line-height: 1.5;
}
.csocial-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.csocial-input-row .btn { flex: none; height: 40px; }
.csocial-hint { font-size: 11px; color: var(--text-muted); margin-top: 8px; text-align: center; }

/* ── 소셜: 피드 봇 카드 소유자 링크 ── */
.feed-wrap { max-width: 860px; }
.bot-card-owner {
    font-size: 11.5px; color: var(--text-muted); text-decoration: none; margin-top: -2px;
}
.bot-card-owner:hover { color: var(--primary); }

/* 비소유자(스튜디오 잠김) — 스튜디오 토글 숨김(소셜 전용 UI) */
.sidebar.no-studio .mode-switch { display: none; }

/* hidden 속성을 항상 우선 — .btn/.auth-menu-badge 등 display 를 지정하는 클래스가
   [hidden]의 UA display:none 을 덮어써 'hidden'이 안 먹던 문제 방지(프로필 편집 버튼·
   기업 배지 등이 항상 보이던 버그). */
[hidden] { display: none !important; }

/* GPU 가이드는 스튜디오용 도구 — 소셜 페이지(피드·탐색·프로필·대화)에선 숨김 */
body[data-mode="social"] .gpu-guide-section { display: none; }

/* 프로필 팔로워/팔로잉 — 클릭하면 명단 모달 */
.profile-stat {
    background: none; border: none; padding: 0; cursor: pointer; font: inherit;
    color: var(--text-muted); display: inline-flex; gap: 4px; align-items: baseline;
}
.profile-stat strong { color: var(--text); font-weight: 700; }
.profile-stat:hover { color: var(--text); }
.profile-stat:hover strong { text-decoration: underline; }
/* 명단 리스트(모달 내부 스크롤) */
.follow-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; margin-top: 4px; }

/* ── 소셜: 내 대화 기록 목록 (/my-chats) ── */
.mychats-wrap { max-width: 720px; }
.mc-list { display: flex; flex-direction: column; gap: 8px; }
.mc-row {
    display: flex; align-items: center; gap: 10px;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 12px; padding: 10px 12px; transition: border-color 0.15s;
}
.mc-row:hover { border-color: var(--primary); }
.mc-row-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; }
.mc-row-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mc-row-name { font-size: 14px; font-weight: 600; color: var(--text); }
.mc-row-owner { font-size: 11.5px; font-weight: 400; color: var(--text-muted); }
.mc-row-preview {
    font-size: 12.5px; color: var(--text-sub); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px;
}
.mc-row-when { font-size: 11px; color: var(--text-muted); flex: none; }
.mc-row-del { flex: none; padding: 4px 9px; font-size: 12px; }

/* 모드 토글은 클릭 버튼 — data-tip의 기본 cursor:help 대신 pointer 유지 */
.mode-btn[data-tip] { cursor: pointer; }

/* ════════════════════════════════════════════════════════════
   사이드바 접기/펼치기 — 아이콘 레일 (B)
   ════════════════════════════════════════════════════════════ */
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sidebar-toggle {
    flex: none; display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 8px;
    background: transparent; border: 1px solid var(--border);
    color: var(--text-sub); cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.sidebar-toggle:hover { color: var(--text); border-color: var(--primary); background: var(--card-bg); }

/* 부드러운 전환 */
.sidebar { transition: width 0.18s ease, padding 0.18s ease; }
.main    { transition: margin-left 0.18s ease; }

/* ── 접힘 상태(아이콘 레일) ── */
.layout.sidebar-collapsed .sidebar { width: 60px; padding-left: 8px; padding-right: 8px; }
.layout.sidebar-collapsed .main    { margin-left: 60px; }

/* 텍스트·부가요소 숨기고 아이콘만 */
.layout.sidebar-collapsed .logo span,
.layout.sidebar-collapsed .nav-item span:not(.nav-icon),
.layout.sidebar-collapsed .nav-caret,
.layout.sidebar-collapsed .nav-soon,
.layout.sidebar-collapsed .mode-btn span:not(.mode-ico),
.layout.sidebar-collapsed .nav-sub,
.layout.sidebar-collapsed .nav-social-note,
.layout.sidebar-collapsed .sidebar-footer { display: none; }

/* 아이콘 가운데 정렬 */
.layout.sidebar-collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
.layout.sidebar-collapsed .nav-icon { width: auto; }
.layout.sidebar-collapsed .nav-group-btn { justify-content: center; }
/* HuggingFace 항목의 인라인 좌우 패딩 대비 */
.layout.sidebar-collapsed .nav > a[href="/hub"] { padding-left: 0 !important; padding-right: 0 !important; }

/* 모드 토글 — 접히면 세로 2칸(아이콘만) */
.layout.sidebar-collapsed .mode-switch { flex-direction: column; gap: 4px; }
.layout.sidebar-collapsed .mode-btn { padding: 8px 0; }

/* 로고 — 접히면 'N' 마크만 */
.layout.sidebar-collapsed .logo { justify-content: center; padding: 0; }
.layout.sidebar-collapsed .logo::after {
    content: "N"; color: var(--primary);
    font-family: 'Orbitron', 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700;
}

/* 도움말(summary) 앞 아이콘 — Lucide book-search (CSS 마스크, currentColor 상속) */
.help-summary::before {
    content: "";
    display: inline-block;
    width: 15px; height: 15px;
    vertical-align: -2px;
    margin-right: 7px;
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 22H5.5a1 1 0 0 1 0-5h4.501"/><path d="m21 22-1.879-1.878"/><path d="M3 19.5v-15A2.5 2.5 0 0 1 5.5 2H18a1 1 0 0 1 1 1v8"/><circle cx="17" cy="18" r="3"/></svg>') center/contain no-repeat;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 22H5.5a1 1 0 0 1 0-5h4.501"/><path d="m21 22-1.879-1.878"/><path d="M3 19.5v-15A2.5 2.5 0 0 1 5.5 2H18a1 1 0 0 1 1 1v8"/><circle cx="17" cy="18" r="3"/></svg>') center/contain no-repeat;
}

/* 사이드바 메뉴 아이콘 — 인라인 Lucide SVG 크기(currentColor로 색 상속) */
.nav-icon svg { width: 16px; height: 16px; vertical-align: middle; }

/* 업로드 드롭존 아이콘 — folder-open SVG (블록형) */
.upload-icon svg { width: 26px; height: 26px; vertical-align: middle; }

/* 접힘(레일) 상태: 모드 토글 툴팁이 화면 밖(왼쪽)으로 안 빠지게 오른쪽으로 열기 */
.layout.sidebar-collapsed .mode-btn::after { left: 0; right: auto; }
/* nav 항목 툴팁(data-tip) — 클릭형이라 help 커서 대신 pointer 유지 */
.nav-item[data-tip] { cursor: pointer; }
/* 사이드바 메뉴 설명 툴팁은 오른쪽으로 펼침(수직 가운데) — 아래 메뉴를 가리지 않게.
   data-tip-down(아래)·기본(위) 모두 덮어씀. 펼침·접힘(레일) 상태 공통. */
.nav-item[data-tip]::after,
.nav-group-btn[data-tip]::after {
    bottom: auto;
    top: 50%;
    left: calc(100% + 10px);
    right: auto;
    transform: translateY(-50%);
}

/* ── 챗봇 답변 마크다운 (md-lite.js 렌더 결과) ── */
.msg-bubble strong, .cs-bubble strong { font-weight:700; }
.msg-bubble em, .cs-bubble em { font-style:italic; }
.msg-bubble a, .cs-bubble a { color:var(--primary-ink); text-decoration:underline; }
.msg-bubble code, .cs-bubble code { background:var(--overlay); padding:1px 5px; border-radius:4px;
    font-family:var(--font-mono,ui-monospace,monospace); font-size:.92em; }
.msg-bubble pre.md-pre, .cs-bubble pre.md-pre { background:var(--shadow); padding:9px 11px; border-radius:7px;
    overflow-x:auto; margin:6px 0; }
.msg-bubble pre.md-pre code, .cs-bubble pre.md-pre code { background:none; padding:0; }
.msg-bubble ul, .msg-bubble ol, .cs-bubble ul, .cs-bubble ol { margin:4px 0; padding-left:20px; }
.msg-bubble li, .cs-bubble li { margin:2px 0; }
.msg-bubble .md-h, .cs-bubble .md-h { font-weight:700; margin:6px 0 2px; }

/* ── Toast (util.js window.toast) — 우하단 비블로킹 알림 ── */
#toast-host {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    cursor: pointer;
    min-width: 220px;
    max-width: 380px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    color: var(--text);
    font-size: 13px;
    line-height: 1.45;
    box-shadow: 0 8px 28px var(--shadow);
    white-space: pre-line;   /* 메시지의 \n을 줄바꿈으로 (SSH/보안경고 등 여러 줄) */
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.28s ease, transform 0.28s ease;
    word-break: break-word;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { border-left-color: var(--success); }
.toast-error   { border-left-color: var(--danger); }
.toast-info    { border-left-color: var(--primary); }

/* ── 반응형 — 태블릿/모바일 (순수 CSS, JS 레이아웃 연산 없음) ──
   기존 sidebar-collapsed(아이콘 레일)를 뷰포트 기반으로 자동 적용. */

/* ≤980px: 2열 그리드 → 1열, 4열 → 2열 */
@media (max-width: 980px) {
    .grid-2 { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .action-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ≤820px: 사이드바 자동 축소(아이콘 레일 60px). 테마·언어 버튼은 접근 유지 */
@media (max-width: 820px) {
    .sidebar { width: 60px; padding-left: 8px; padding-right: 8px; }
    .main    { margin-left: 60px; }
    .logo span,
    .nav-item span:not(.nav-icon),
    .nav-caret, .nav-soon,
    .mode-btn span:not(.mode-ico),
    .nav-sub, .nav-social-note,
    .version-badge { display: none; }
    .nav-item { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
    .nav-icon { width: auto; }
    .nav-group-btn { justify-content: center; }
    .mode-switch { flex-direction: column; gap: 4px; }
    .mode-btn { padding: 8px 0; }
    .logo { justify-content: center; padding: 0; }
    .sidebar-toggle { display: none; }        /* 좁은 화면에선 수동 토글 무의미 */
    /* 푸터(테마·언어)는 남기되 컴팩트하게 — 모바일에서도 전환 가능 */
    .theme-toggle { justify-content: center; padding: 7px 0; }
    .theme-toggle .theme-label { display: none; }
    .lang-switch { flex-wrap: wrap; gap: 4px; }
    .lang-btn { padding: 4px 6px; font-size: 11px; }
}

/* ≤560px: 콘텐츠 여백 축소 + 잔여 2열 그리드 1열 */
@media (max-width: 560px) {
    .content { padding: 16px 14px; }
    .topbar  { padding: 0 14px; }
    .grid-4, .action-grid { grid-template-columns: 1fr; }
    .page-title { font-size: 16px; }
}

/* ══ 반투명 유리 표면 — 콘텐츠 카드/패널 일괄 통일(뒤 신경망·별 비침) ══
   한 곳에서 관리. --card-alpha/--card-blur 공유(심플 모드에서 불투명·정지).
   제외(불투명 유지): 드롭다운·모달·토스트·입력·버튼·배지·hover.
   .card/.lab-sidebar/.lab-viewer/.msg.ai .msg-bubble는 각 규칙에서 이미 유리. */
.stat-card, .action-card, .conv-sidebar, .lab-info-panel,
.dev-card, .aws-inst-card, .wt-card, .bot-card, .user-card,
.cs-msg-bot .cs-bubble {
    background: rgba(var(--card-rgb), var(--card-alpha));
    -webkit-backdrop-filter: blur(var(--card-blur));
    backdrop-filter: blur(var(--card-blur));
}
html.perf-saver .stat-card, html.perf-saver .action-card, html.perf-saver .conv-sidebar,
html.perf-saver .lab-info-panel, html.perf-saver .dev-card, html.perf-saver .aws-inst-card,
html.perf-saver .wt-card, html.perf-saver .bot-card, html.perf-saver .user-card,
html.perf-saver .cs-msg-bot .cs-bubble {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Lucide 인라인 아이콘 유틸 — 이모지 아이콘을 Lucide SVG로 통일할 때 사용.
   글자와 나란히 놓이는 버튼·탭·헤더용. 색은 currentColor(테마 자동). */
.licon { width: 1em; height: 1em; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    vertical-align: -0.15em; flex-shrink: 0; }

/* 클라우드 대화방 → 목록 돌아가기 버튼 */
.csocial-back {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    font-size: 12.5px; color: var(--text-muted); text-decoration: none;
    padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px;
    transition: background .15s, color .15s, border-color .15s;
}
.csocial-back:hover { color: var(--text); border-color: var(--primary); background: var(--primary-dim); }

/* ══ 성능(A): 화면 밖 카드/목록 항목·메시지는 렌더·블러를 스킵 ══
   보이는 것만 그림 → 긴 목록(피드·가중치·디바이스·대화·내 대화) 스크롤 비용 급감.
   시각 변화 0. contain-intrinsic-size auto = 최초 렌더 후 실제 크기 기억(스크롤바 튐 방지). */
.bot-card, .user-card, .wt-card, .dev-card, .aws-inst-card,
.mc-row, .msg, .cs-msg {
    content-visibility: auto;
    contain-intrinsic-size: auto 120px;
}