/* ================================================================
   ULLIM — Admin CSS
   Design tokens: 01_웹_핸드오프.md
   ================================================================ */

/* 폰트는 Site.Master에서 <link>로 병렬 로드 */

/* ── Design Tokens ── */
:root {
  --primary:     #6366f1;
  --primary-dp:  #4f46e5;
  --primary-400: #818cf8;
  --primary-300: #a5b4fc;
  --primary-200: #c7cbff;

  --bg-page:    #0a0b0f;
  --bg-sidebar: #0c0e14;
  --bg-card:    #101218;
  --bg-input:   #13151d;
  --bg-player:  #0a0b12;

  --bd1: #1a1d26; --bd2: #1e2230; --bd3: #1f2430;
  --bd4: #2a2f3c; --bd5: #262b38; --bd-upload: #3a4256;

  --txt-title: #f2f3f7;
  --txt-str:   #e7e9f0; --txt-str2: #c5cad6;
  --txt-sub:   #9aa1b2; --txt-sub2: #8b91a0;
  --txt-dim:   #6b7280; --txt-dim2: #5f6675;
  --txt-dmr:   #4a5160; --txt-dmr2: #3a4150;

  --success: #34d399;
  --danger:  #f87171;

  --r-card: 13px; --r-btn: 10px; --r-inp: 11px; --r-pill: 99px;

  --shadow-btn:   0 6px 16px rgba(79,70,229,.4);
  --shadow-btn-h: 0 8px 22px rgba(79,70,229,.45);

  --grad-brand: linear-gradient(150deg,#818cf8,#4f46e5);
  --grad-btn:   linear-gradient(180deg,#6366f1,#4f46e5);
  --grad-login: linear-gradient(165deg,#1b1f30,#0b0d14);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: 'Pretendard', -apple-system, sans-serif;
             background: var(--bg-page); color: var(--txt-str);
             -webkit-font-smoothing: antialiased; font-size: 14px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bd4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--bd5); }

/* ================================================================
   LAYOUT (Site.Master)
   ================================================================ */
.layout { display: flex; height: 100vh; overflow: hidden; }

/* ── Sidebar ── */
.sidebar {
  width: 182px; min-width: 182px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--bd1);
  display: flex; flex-direction: column;
  height: 100vh; overflow-y: auto;
}

.sidebar-logo {
  padding: 22px 20px 18px;
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit; cursor: pointer;
}

.logo-icon {
  width: 38px; height: 38px;
  background: var(--grad-brand); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.logo-bars { display: flex; align-items: flex-end; gap: 2.5px; height: 18px; }
.logo-bar  {
  width: 3px; background: #fff; border-radius: 1.5px;
  animation: eq-scale var(--dur,1s) ease-in-out infinite alternate;
  animation-delay: var(--dly,0s);
}
.logo-bar:nth-child(1){--dur:.85s;--dly:0s;  height:55%}
.logo-bar:nth-child(2){--dur:1.1s;--dly:.15s;height:100%}
.logo-bar:nth-child(3){--dur:.95s;--dly:.3s; height:70%}
.logo-bar:nth-child(4){--dur:1.2s;--dly:.1s; height:45%}
@keyframes eq-scale{ from{transform:scaleY(.3)} to{transform:scaleY(1)} }

.logo-txt { display: flex; flex-direction: column; line-height: 1.2; }
/* 로고 아이콘(38px)과 동일한 세로 크기 */
.logo-name { font-size:34px; line-height:38px; font-weight:700; color:var(--txt-title); letter-spacing:-.3px; }
.logo-role { font-family:'DM Mono',monospace; font-size:9px; color:var(--txt-dim); letter-spacing:1px; }

.sidebar-nav { flex:1; padding: 8px 12px; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 9px;
  color: var(--txt-sub2); font-size: 14px; font-weight: 500;
  cursor: pointer; margin-bottom: 2px;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(99,102,241,.07); color: var(--txt-str); }
.nav-item.active {
  background: rgba(99,102,241,.13); color: var(--primary-200);
  box-shadow: inset 3px 0 0 var(--primary);
}
.nav-item svg { width:18px; height:18px; flex-shrink:0; }

.sidebar-footer {
  padding: 14px 20px;
  /* 상단 울림 로고(.sidebar-logo, 좌측 패딩 20px)와 왼쪽 라인 맞춤 */
  text-align: left;
}
/* 좌우 패딩(20px)을 제외한 폭에 맞춰 로고를 채움 — 왼쪽/오른쪽 여백 동일 */
.sidebar-footer img { width: 100%; height: auto; opacity: .95; }

/* ── Content shell ── */
.content { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

/* ── Header ── */
.page-header {
  height: 74px; min-height: 74px;
  border-bottom: 1px solid var(--bd1);
  display: flex; align-items: center;
  padding: 0 28px; gap: 16px;
}
.page-title {
  font-size:21px; font-weight:800; color:var(--txt-title);
  letter-spacing:-.3px; flex:1;
}

.chip-online {
  display: flex; align-items: center; gap: 7px;
  background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.2);
  border-radius: var(--r-pill); padding: 5px 12px;
  font-family:'DM Mono',monospace; font-size:11px; color:var(--success);
  white-space: nowrap;
}
.dot-green {
  width:7px; height:7px; background:var(--success);
  border-radius:50%; box-shadow:0 0 6px var(--success); flex-shrink:0;
}

.search-box { position:relative; width:200px; }
.search-box input {
  width:100%; background:var(--bg-input); border:1px solid var(--bd3);
  border-radius:var(--r-inp); padding:8px 12px 8px 34px;
  color:var(--txt-str); font-size:13px; outline:none; transition:border-color .15s;
}
.search-box input:focus { border-color:rgba(99,102,241,.5); }
.search-box input::placeholder { color:var(--txt-dmr); }
.search-icon {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color:var(--txt-dim); pointer-events:none;
}

.btn-primary {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--grad-btn); color:#fff; border:none;
  border-radius:var(--r-btn); padding:9px 16px;
  font-size:13px; font-weight:700; cursor:pointer;
  box-shadow:var(--shadow-btn); white-space:nowrap;
  transition:box-shadow .15s, transform .1s;
}
.btn-primary:hover { box-shadow:var(--shadow-btn-h); transform:translateY(-1px); }
.btn-primary:active { transform:translateY(0); }

.account-info {
  display:flex; align-items:center; gap:10px;
  border-left:1px solid var(--bd3); padding-left:16px;
  cursor:pointer; position:relative; user-select:none;
  text-decoration:none; color:inherit;
}
.account-info:hover .account-name { color:var(--txt-title); }

/* 헤더 우측 로그아웃 버튼 */
.btn-header-logout {
  display:flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:var(--r-btn);
  border:1px solid rgba(248,113,113,.25); background:rgba(248,113,113,.07);
  color:var(--danger); font-size:13px; font-weight:500;
  text-decoration:none; white-space:nowrap; flex-shrink:0;
  transition:background .12s, border-color .12s;
}
.btn-header-logout:hover { background:rgba(248,113,113,.14); border-color:rgba(248,113,113,.45); }
.avatar {
  width:36px; height:36px; background:var(--grad-brand);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:#fff; flex-shrink:0;
}
.account-text { display:flex; flex-direction:column; }
.account-name { font-size:13px; font-weight:600; color:var(--txt-str); }
.account-role { font-size:11px; color:var(--txt-sub); }

.account-dropdown {
  position:absolute; top:calc(100% + 8px); right:0;
  background:#16192290; backdrop-filter:blur(12px);
  border:1px solid var(--bd2); border-radius:10px;
  min-width:160px; padding:6px; z-index:100; display:none;
}
.account-dropdown.show { display:block; }
.account-dropdown a {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:7px;
  color:var(--txt-sub); font-size:13px;
  transition:background .12s, color .12s;
}
.account-dropdown a:hover {
  background:rgba(99,102,241,.1); color:var(--txt-str);
}

/* ── Main area ── */
.main { flex:1; overflow-y:auto; padding:24px 28px; }

/* ================================================================
   STATS CARDS
   ================================================================ */
.stats-row { display:grid; gap:14px; margin-bottom:20px; }
.stats-row.cols-4 { grid-template-columns:repeat(4,1fr); }
.stats-row.cols-3 { grid-template-columns:repeat(3,1fr); }

.stat-card {
  background:var(--bg-card); border:1px solid var(--bd2);
  border-radius:var(--r-card); padding:18px 20px;
}
.stat-card.accent {
  background:rgba(99,102,241,.08); border-color:rgba(99,102,241,.3);
}
.stat-label {
  font-size:11px; font-weight:600; color:var(--txt-dim);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px;
}
.stat-value {
  font-family:'DM Mono',monospace; font-size:26px;
  font-weight:700; color:var(--txt-title); line-height:1;
}
.stat-value.green  { color:var(--success); }
.stat-value.play   { font-family:'Pretendard',sans-serif; font-size:14px; font-weight:600; }
.stat-sub  { font-size:11px; color:var(--txt-dim); margin-top:4px; }

/* ================================================================
   UPLOAD AREA
   ================================================================ */
.upload-area {
  border:1.5px dashed var(--bd-upload);
  background:rgba(99,102,241,.05);
  border-radius:14px; padding:14px 20px;
  display:flex; align-items:center; gap:16px;
  margin-bottom:16px; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.upload-area:hover,
.upload-area.drag-over {
  border-color:rgba(99,102,241,.6);
  background:rgba(99,102,241,.1);
}
.upload-left { display:flex; align-items:center; gap:14px; flex:1; min-width:0; }
.upload-divider { width:1px; height:44px; background:var(--bd2); flex-shrink:0; margin:0 4px; }
.upload-ctrls { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.upload-icon-wrap {
  width:38px; height:38px;
  background:rgba(99,102,241,.15); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; color:var(--primary-400);
}
.upload-text  { flex:1; min-width:0; }
.upload-title { font-size:13px; font-weight:600; color:var(--txt-str); margin-bottom:2px; }
.upload-hint  { font-size:11px; color:var(--txt-dim); }

.upload-progress { margin-top:10px; }
.progress-wrap { height:4px; background:var(--bd4); border-radius:2px; overflow:hidden; }
.progress-fill {
  height:100%; background:var(--grad-btn); border-radius:2px;
  width:0; transition:width .1s;
}

/* ================================================================
   TOOLBAR
   ================================================================ */
.table-toolbar {
  display:flex; align-items:center;
  justify-content:space-between;
  margin-bottom:8px; padding:0 2px;
}
.toolbar-hint {
  display:flex; align-items:center; gap:7px;
  font-size:12px; color:var(--txt-dim);
}
.toolbar-right { display:flex; align-items:center; gap:12px; }
.toolbar-label { font-size:12px; color:var(--txt-sub); }

.segment-ctrl {
  display:flex; background:var(--bg-input);
  border:1px solid var(--bd3); border-radius:8px;
  padding:2px; gap:2px;
}
.seg-btn {
  padding:5px 12px; border-radius:6px;
  border:none; background:transparent;
  color:var(--txt-dim); font-size:12px; font-weight:500;
  cursor:pointer; transition:background .12s, color .12s;
}
.seg-btn.active { background:rgba(99,102,241,.2); color:var(--primary-200); }

.btn-ghost {
  background:transparent; border:1px solid var(--bd4);
  border-radius:var(--r-btn); color:var(--txt-sub);
  font-size:12px; font-weight:500;
  padding:6px 14px; cursor:pointer;
  transition:border-color .12s, color .12s;
}
.btn-ghost:hover { border-color:var(--primary-400); color:var(--txt-str); }

/* ================================================================
   MUSIC TABLE
   ================================================================ */
.table-wrap {
  background:var(--bg-card); border:1px solid var(--bd2);
  border-radius:var(--r-card); overflow:hidden;
}
.music-table { width:100%; border-collapse:collapse; }
.music-table colgroup .col-handle { width:62px; }
.music-table colgroup .col-title  { }
.music-table colgroup .col-dur    { width:84px; }
.music-table colgroup .col-date   { width:94px; }
.music-table colgroup .col-size   { width:82px; }
.music-table colgroup .col-status { width:126px; }
.music-table colgroup .col-action { width:118px; }

.music-table th {
  background:var(--bg-card); padding:11px 14px;
  text-align:left; font-size:11px; font-weight:600;
  color:var(--txt-dim); text-transform:uppercase;
  letter-spacing:.5px; border-bottom:1px solid var(--bd1);
}
.music-table td {
  padding:12px 14px; font-size:13px;
  border-bottom:1px solid #14171f; vertical-align:middle;
}
.music-table tr:last-child td { border-bottom:none; }
.music-table tr.playing {
  background:rgba(99,102,241,.07);
  box-shadow:inset 3px 0 0 var(--primary);
}
.music-table tr:hover:not(.playing) { background:rgba(255,255,255,.02); }
.music-table tr.sortable-ghost { opacity:.4; background:rgba(99,102,241,.15)!important; }

.drag-handle { cursor:grab; color:var(--txt-dmr2); }
.drag-handle:active { cursor:grabbing; }
.row-num { font-family:'DM Mono',monospace; font-size:12px; color:var(--txt-dmr); }

.track-info { display:flex; align-items:center; gap:10px; }
.track-icon {
  width:34px; height:34px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:15px;
}
.track-icon.예배 { background:rgba(99,102,241,.14); color:#818cf8; }
.track-icon.찬양 { background:rgba(168,85,247,.14);  color:#c084fc; }
.track-icon.기도 { background:rgba(6,182,212,.13);   color:#22d3ee; }
.track-icon.예식 { background:rgba(251,191,36,.13);  color:#fbbf24; }
.track-icon.default { background:rgba(148,163,184,.12); color:#9aa1b2; }

.track-title {
  font-weight:600; color:var(--txt-str); margin-bottom:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px;
}
.track-artist { font-size:12px; color:var(--txt-dim); }

.td-mono { font-family:'DM Mono',monospace; font-size:12px; color:var(--txt-sub); }

.badge {
  display:inline-flex; align-items:center;
  padding:3px 9px; border-radius:var(--r-pill);
  font-size:11px; font-weight:600;
}
.badge.예배 { background:rgba(99,102,241,.14);  color:#a5b4fc; }
.badge.찬양 { background:rgba(168,85,247,.14);  color:#c084fc; }
.badge.기도 { background:rgba(6,182,212,.13);   color:#22d3ee; }
.badge.예식 { background:rgba(251,191,36,.13);  color:#fbbf24; }

.badge.Admin    { background:rgba(99,102,241,.16);  color:#c7cbff; }
.badge.Operator { background:rgba(56,189,248,.14);  color:#7dd3fc; }
.badge.Viewer   { background:rgba(148,163,184,.14); color:#9aa1b2; }

.playing-status {
  display:flex; align-items:center; gap:6px;
  color:var(--success); font-size:12px; font-weight:600;
}
.mini-eq { display:flex; align-items:flex-end; gap:1.5px; height:14px; }
.mini-eq span {
  width:2.5px; background:var(--success); border-radius:1px;
  animation:eq-scale var(--dur,.9s) ease-in-out infinite alternate;
  animation-delay:var(--dly,0s);
}
.mini-eq span:nth-child(1){--dur:.8s; --dly:0s;  height:50%}
.mini-eq span:nth-child(2){--dur:1s;  --dly:.1s; height:100%}
.mini-eq span:nth-child(3){--dur:.85s;--dly:.2s; height:60%}

.action-btns { display:flex; align-items:center; gap:5px; }
.action-btn {
  width:30px; height:30px; border-radius:7px; border:none;
  background:transparent; color:var(--txt-dim);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .12s, color .12s;
}
.action-btn:hover         { background:rgba(255,255,255,.07); color:var(--txt-str); }
.action-btn.del:hover     { background:rgba(248,113,113,.12); color:var(--danger); }
.action-btn.play-btn:hover{ background:rgba(99,102,241,.15);  color:var(--primary-400); }

/* ================================================================
   PLAYER BAR
   ================================================================ */
.player-bar {
  background:var(--bg-player); border-top:1px solid var(--bd1);
  padding:12px 24px; display:flex; align-items:center;
  gap:20px; flex-shrink:0;
}
.player-track { display:flex; align-items:center; gap:12px; width:220px; min-width:120px; flex-shrink:1; }
.player-art {
  width:44px; height:44px; background:var(--grad-brand);
  border-radius:10px; display:flex; align-items:center;
  justify-content:center; flex-shrink:0;
}
.player-track-info { overflow:hidden; }
.player-title {
  font-size:13px; font-weight:600; color:var(--txt-str);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.player-sub {
  font-size:11px; color:var(--txt-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.transport { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.t-btn {
  width:34px; height:34px; background:transparent; border:none;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--txt-sub); cursor:pointer; transition:background .12s, color .12s;
}
.t-btn:hover { background:rgba(255,255,255,.07); color:var(--txt-str); }
.t-play {
  width:42px; height:42px; background:var(--grad-btn);
  border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; cursor:pointer; box-shadow:var(--shadow-btn);
  transition:box-shadow .12s, transform .1s;
}
.t-play:hover { box-shadow:var(--shadow-btn-h); transform:scale(1.05); }

.seek-wrap { flex:1; display:flex; align-items:center; gap:10px; min-width:0; }
.time-lbl {
  font-family:'DM Mono',monospace; font-size:11px;
  color:var(--txt-dim); flex-shrink:0; width:34px;
}
.time-lbl.right { text-align:right; }
.seek-track {
  flex:1; height:4px; background:var(--bd4);
  border-radius:2px; position:relative; cursor:pointer;
}
.seek-fill {
  height:100%; background:var(--primary);
  border-radius:2px; position:relative; pointer-events:none;
}
.seek-thumb {
  width:12px; height:12px; background:#fff; border-radius:50%;
  position:absolute; right:-6px; top:-4px;
  box-shadow:0 0 4px rgba(0,0,0,.5); pointer-events:none;
}

.vol-wrap { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.vol-btn { background:transparent; border:none; color:var(--txt-sub); cursor:pointer; padding:0; display:flex; }
.vol-slider {
  width:72px; flex:none; appearance:none; height:4px;
  background:var(--bd4); border-radius:2px; outline:none; cursor:pointer;
}
.vol-slider::-webkit-slider-thumb {
  appearance:none; width:12px; height:12px;
  background:var(--primary-300); border-radius:50%; cursor:pointer;
}
.vol-pct { font-family:'DM Mono',monospace; font-size:11px; color:var(--txt-dim); width:28px; text-align:right; margin:0 4px; flex-shrink:0; }

.player-sep { width:1px; height:32px; background:var(--bd1); flex-shrink:0; }

.player-ctrls { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.ctrl-btn {
  display:flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:8px;
  border:1px solid var(--bd4); background:transparent;
  color:var(--txt-sub2); font-size:12px; font-weight:500;
  cursor:pointer; transition:background .12s, color .12s, border-color .12s;
}
.ctrl-btn:hover  { background:rgba(255,255,255,.05); color:var(--txt-str); }
.ctrl-btn.muted  { color:var(--danger); border-color:rgba(248,113,113,.25); }
.ctrl-btn.muted:hover { background:rgba(248,113,113,.1); }

/* ================================================================
   LOGIN PAGE
   ================================================================ */
.login-page  { display:flex; min-height:100vh; background:var(--bg-page); }

.login-brand {
  width:44%; background:var(--grad-login);
  padding:52px 48px; display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}
.login-brand::after {
  content:''; position:absolute; right:-80px; bottom:-80px;
  width:360px; height:360px;
  background:radial-gradient(circle,rgba(99,102,241,.25),transparent 70%);
  pointer-events:none;
}

.system-chip {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.2);
  border-radius:var(--r-pill); padding:5px 12px;
  font-family:'DM Mono',monospace; font-size:11px; color:var(--success);
  width:fit-content; margin-bottom:40px;
}

.login-content {
  flex:1; display:flex; flex-direction:column; justify-content:center;
}

.login-brand-logo {
  width:72px; height:72px; background:var(--grad-brand);
  border-radius:18px; display:flex; align-items:center;
  justify-content:center; margin-bottom:20px;
}
.login-brand-logo-bars { display:flex; align-items:flex-end; gap:3px; height:28px; }
.login-brand-bar {
  width:5px; background:#fff; border-radius:2px;
  animation:eq-scale var(--dur,1s) ease-in-out infinite alternate;
  animation-delay:var(--dly,0s);
}
.login-brand-bar:nth-child(1){--dur:.85s;--dly:0s;  height:55%}
.login-brand-bar:nth-child(2){--dur:1.1s;--dly:.15s;height:100%}
.login-brand-bar:nth-child(3){--dur:.95s;--dly:.3s; height:70%}
.login-brand-bar:nth-child(4){--dur:1.2s;--dly:.1s; height:45%}

.login-brand-title {
  font-size:44px; font-weight:800; color:var(--txt-title);
  letter-spacing:-.5px; line-height:1; margin-bottom:12px;
}
.login-brand-desc {
  font-size:15px; color:var(--txt-sub); line-height:1.65;
  max-width:300px; margin-bottom:24px;
}
.feature-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.feature-list li {
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--txt-sub);
}
.feature-list li svg { color:var(--primary-400); flex-shrink:0; }

.login-wave {
  margin-top:auto; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.06);
}
.wave-bars {
  display:flex; align-items:center; gap:2px;
  height:40px; opacity:.2; margin-bottom:16px;
}
.wave-bar {
  flex:1; background:var(--primary-400); border-radius:1px;
  animation:wave-anim var(--dur,1s) ease-in-out infinite alternate;
  animation-delay:var(--dly,0s);
}
@keyframes wave-anim{ from{transform:scaleY(.05)} to{transform:scaleY(1)} }

.brand-logo-wrap img { height:36px; opacity:.95; }

/* ── Login form panel ── */
.login-form-panel {
  flex:1; display:flex; align-items:center;
  justify-content:center; padding:40px;
}
.login-form-inner { width:100%; max-width:380px; }

.login-eyebrow {
  font-family:'DM Mono',monospace; font-size:12px;
  letter-spacing:2px; color:var(--txt-dim);
  text-transform:uppercase; margin-bottom:10px;
}
.login-form-title {
  font-size:30px; font-weight:800; color:var(--txt-title);
  letter-spacing:-.3px; margin-bottom:6px;
}
.login-form-sub { font-size:14px; color:var(--txt-sub); margin-bottom:32px; }

.form-group { margin-bottom:16px; }
.form-label {
  display:block; font-size:12px; font-weight:600;
  color:var(--txt-sub); margin-bottom:6px;
  text-transform:uppercase; letter-spacing:.5px;
}
.input-wrap { position:relative; }
.input-icon {
  position:absolute; left:12px; top:50%;
  transform:translateY(-50%); color:var(--txt-dmr); pointer-events:none;
}
.input-wrap input {
  width:100%; background:var(--bg-input); border:1px solid var(--bd3);
  border-radius:var(--r-inp); padding:12px 12px 12px 40px;
  color:var(--txt-str); font-size:14px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.input-wrap input.has-eye { padding-right:42px; }
.input-wrap input:focus {
  border-color:rgba(99,102,241,.5);
  box-shadow:0 0 0 3px rgba(99,102,241,.12);
}
.input-wrap input::placeholder { color:var(--txt-dmr); }
.eye-btn {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:transparent; border:none; color:var(--txt-dmr);
  cursor:pointer; padding:2px; display:flex; border-radius:4px;
}

.form-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.checkbox-wrap { display:flex; align-items:center; gap:8px; cursor:pointer; }
.checkbox-wrap input[type=checkbox] { width:16px; height:16px; accent-color:var(--primary); cursor:pointer; }
.checkbox-label { font-size:13px; color:var(--txt-sub); }
.forgot-link { font-size:13px; color:var(--primary-400); }
.forgot-link:hover { text-decoration:underline; }

.btn-login {
  width:100%; padding:14px; background:var(--grad-btn);
  border:none; border-radius:13px; color:#fff;
  font-size:16px; font-weight:700; cursor:pointer;
  box-shadow:var(--shadow-btn);
  transition:box-shadow .15s, transform .1s;
}
.btn-login:hover { box-shadow:var(--shadow-btn-h); transform:translateY(-1px); }
.btn-login:active { transform:translateY(0); }

.login-footer {
  text-align:center; margin-top:32px;
  font-size:12px; color:var(--txt-dmr);
  font-family:'DM Mono',monospace;
}

.error-msg { color:var(--danger); font-size:12px; margin-top:8px; display:none; }
.error-msg.show { display:block; }

/* ================================================================
   ACCOUNTS TABLE
   ================================================================ */
.accounts-table { width:100%; border-collapse:collapse; }
.accounts-table th {
  background:var(--bg-card); padding:11px 14px;
  text-align:left; font-size:11px; font-weight:600;
  color:var(--txt-dim); text-transform:uppercase;
  letter-spacing:.5px; border-bottom:1px solid var(--bd1);
}
.accounts-table td {
  padding:13px 14px; border-bottom:1px solid #14171f; vertical-align:middle;
}
.accounts-table tr:last-child td { border-bottom:none; }
.accounts-table tr:hover { background:rgba(255,255,255,.02); }

.account-cell { display:flex; align-items:center; gap:10px; }
.avatar-sm {
  width:32px; height:32px; background:var(--grad-brand);
  border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:700; color:#fff; flex-shrink:0;
}
.acct-name { font-weight:600; color:var(--txt-str); }
.acct-id   { font-family:'DM Mono',monospace; font-size:12px; color:var(--txt-sub); }

.online-ind { display:inline-flex; align-items:center; gap:6px; font-size:12px; }
.dot { width:7px; height:7px; border-radius:50%; }
.dot.on  { background:var(--success); box-shadow:0 0 6px var(--success); }
.dot.off { background:#3a4150; }

/* ================================================================
   MODAL
   ================================================================ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px); display:none;
  align-items:center; justify-content:center; z-index:1000;
}
.modal-overlay.show { display:flex; }
.modal {
  background:#16192295; backdrop-filter:blur(20px);
  border:1px solid var(--bd2); border-radius:16px;
  padding:28px; width:440px; max-width:95vw;
}
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.modal-title { font-size:18px; font-weight:700; color:var(--txt-title); }
.modal-close {
  background:transparent; border:none; color:var(--txt-dim);
  cursor:pointer; padding:4px; display:flex; border-radius:6px;
  transition:background .12s;
}
.modal-close:hover { background:rgba(255,255,255,.07); }
.modal-footer { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }

.btn-cancel {
  padding:9px 18px; border-radius:var(--r-btn);
  border:1px solid var(--bd4); background:transparent;
  color:var(--txt-sub); font-size:13px; cursor:pointer;
  transition:background .12s;
}
.btn-cancel:hover { background:rgba(255,255,255,.04); }

.form-select {
  width:100%; background:var(--bg-input); border:1px solid var(--bd3);
  border-radius:var(--r-inp); padding:11px 36px 11px 12px;
  color:var(--txt-str); font-size:14px; outline:none; cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%236b7280' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right 10px center; background-size:16px;
}
.form-select:focus { border-color:rgba(99,102,241,.5); }

/* ================================================================
   PROFILE PAGE
   ================================================================ */
.profile-hero {
  display:flex; align-items:center; gap:18px;
  background:var(--bg-card); border:1px solid var(--bd2);
  border-radius:var(--r-card); padding:22px 24px; margin-bottom:20px;
}
.profile-avatar {
  width:56px; height:56px; background:var(--grad-brand);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700; color:#fff; flex-shrink:0;
}
.profile-hero-name { font-size:18px; font-weight:700; color:var(--txt-title); margin-bottom:6px; }
.profile-hero-meta { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--txt-sub); }

.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.section-card {
  background:var(--bg-card); border:1px solid var(--bd2);
  border-radius:var(--r-card); padding:22px 24px;
}
.section-card-header {
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; color:var(--txt-str);
  margin-bottom:20px; padding-bottom:14px;
  border-bottom:1px solid var(--bd1);
}
.section-card-header svg { color:var(--primary-400); flex-shrink:0; }

.profile-input {
  width:100%; background:var(--bg-input); border:1px solid var(--bd3);
  border-radius:var(--r-inp); padding:11px 12px;
  color:var(--txt-str); font-size:13px; outline:none;
  transition:border-color .15s;
}
.profile-input:focus { border-color:rgba(99,102,241,.5); }
.profile-input[readonly] { opacity:.45; cursor:default; }
.profile-input::placeholder { color:var(--txt-dmr); }

.profile-card-footer { margin-top:20px; display:flex; justify-content:flex-end; }

/* ================================================================
   TOAST
   ================================================================ */
.toast-container {
  position:fixed; bottom:24px; right:24px;
  display:flex; flex-direction:column; gap:8px; z-index:2000;
}
.toast {
  background:#1e2230; border:1px solid var(--bd4);
  border-radius:10px; padding:12px 16px;
  font-size:13px; color:var(--txt-str);
  display:flex; align-items:center; gap:10px;
  animation:toast-in .2s ease; min-width:240px;
}
.toast.success { border-color:rgba(52,211,153,.3); }
.toast.error   { border-color:rgba(248,113,113,.3); }
@keyframes toast-in{ from{transform:translateY(8px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ================================================================
   SETTINGS MODAL
   ================================================================ */
.settings-modal { width:360px; }

.settings-section { margin-bottom:20px; }
.settings-section-label {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; color:var(--txt-dim);
  margin-bottom:12px; padding-bottom:8px;
  border-bottom:1px solid var(--bd1);
}

.settings-item { padding:4px 0 12px; }
.settings-item-info { margin-bottom:10px; }
.settings-item-title { font-size:13px; font-weight:600; color:var(--txt-str); display:block; margin-bottom:2px; }
.settings-item-desc  { font-size:11px; color:var(--txt-dim); }

.settings-slider-row {
  display:flex; align-items:center; gap:12px;
}
/* 최소/최대 행 사이 세로 간격 */
.settings-slider-row + .settings-slider-row { margin-top: 16px; }
.settings-range {
  flex:1; appearance:none; height:4px;
  background:var(--bd4); border-radius:2px; outline:none; cursor:pointer;
}
.settings-range::-webkit-slider-thumb {
  appearance:none; width:16px; height:16px;
  background:var(--primary); border-radius:50%; cursor:pointer;
  box-shadow:0 0 6px rgba(99,102,241,.5);
}
.settings-val {
  font-family:'DM Mono',monospace; font-size:13px;
  color:var(--primary-300); width:36px; text-align:right; flex-shrink:0;
}

.settings-row-label {
  font-size:11px; color:var(--txt-dim); width:24px; flex-shrink:0;
}

.btn-logout-settings {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:10px 18px; border-radius:var(--r-btn);
  border:1px solid rgba(248,113,113,.25); background:rgba(248,113,113,.07);
  color:var(--danger); font-size:13px; font-weight:500;
  cursor:pointer; transition:background .12s, border-color .12s;
}
.btn-logout-settings:hover { background:rgba(248,113,113,.14); border-color:rgba(248,113,113,.45); }