/* ═══════════════════════════════════════════════════════════════════
   market.css — 거래소 호가창 (바이낸스/업비트 스타일)
   한국 기준: 매수(삽니다) = 빨강, 매도(팝니다) = 파랑
   ═══════════════════════════════════════════════════════════════════ */

/* ── 페이지 래퍼 ────────────────────────────────────────────────── */
.market-page {
  display       : flex;
  flex-direction: column;
  height        : calc(100vh - var(--navbar-height));
  overflow      : hidden;
  background    : var(--color-bg-secondary);
  max-width     : 1200px;
  width         : 100%;
  border-left   : 1px solid var(--color-border);
  border-right  : 1px solid var(--color-border);
}

/* ── 탭 바 ─────────────────────────────────────────────────────── */
.market-tab-bar {
  display      : flex;
  align-items  : center;
  gap          : 0;
  border-bottom: 1px solid var(--color-border);
  background   : var(--color-bg);
  padding      : 0 1rem;
  flex-shrink  : 0;
  height       : 40px;
}
.market-tab {
  display      : flex;
  align-items  : center;
  height       : 40px;
  padding      : 0 1rem;
  font-size    : var(--font-size-sm);
  font-weight  : 600;
  color        : var(--color-text-muted);
  cursor       : pointer;
  border-bottom: 2px solid transparent;
  border-top   : 2px solid transparent;
  transition   : all var(--transition);
  background   : none;
  border-left  : none;
  border-right : none;
  white-space  : nowrap;
}
.market-tab:hover { color: var(--color-text); }
.market-tab.active {
  color             : var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ── 3패널 메인 레이아웃 ─────────────────────────────────────── */
.market-layout {
  display              : grid;
  grid-template-columns: 200px 1fr 240px;
  flex                 : 1;
  overflow             : hidden;
  min-height           : 0;
}

/* ═══════════════════════════════════════════════════════════
   왼쪽 패널: 종목 리스트
   ═══════════════════════════════════════════════════════════ */
.market-symbol-panel {
  background    : var(--color-bg);
  border-right  : 1px solid var(--color-border);
  display       : flex;
  flex-direction: column;
  overflow      : hidden;
}

.market-symbol-header {
  padding        : 0 0.75rem;
  height         : 36px;
  font-size      : 0.65rem;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : 0.08em;
  color          : var(--color-text-muted);
  border-bottom  : 1px solid var(--color-border);
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  flex-shrink    : 0;
}

.market-symbol-search {
  margin       : 0.375rem 0.5rem;
  padding      : 0.3rem 0.5rem;
  background   : var(--color-bg-card);
  border       : 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color        : var(--color-text);
  font-size    : 0.75rem;
  width        : calc(100% - 1rem);
  transition   : border-color var(--transition);
}
.market-symbol-search:focus { outline: none; border-color: var(--color-primary); }

.market-symbol-list {
  overflow-y: auto;
  flex      : 1;
}
.market-symbol-list::-webkit-scrollbar { width: 3px; }
.market-symbol-list::-webkit-scrollbar-thumb { background: var(--color-border); }

.symbol-item {
  display       : flex;
  flex-direction: column;
  padding       : 0.45rem 0.75rem;
  cursor        : pointer;
  border-bottom : 1px solid var(--color-border);
  transition    : background var(--transition);
  border-left   : 2px solid transparent;
}
.symbol-item:hover    { background: var(--color-bg-hover); }
.symbol-item.selected {
  background       : var(--color-bg-hover);
  border-left-color: var(--color-primary);
}

.symbol-name {
  font-size  : var(--font-size-sm);
  font-weight: 600;
  color      : var(--color-text);
  margin-bottom: 0.1rem;
}
.symbol-sub {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
}
.symbol-last-price {
  font-size  : 0.7rem;
  font-weight: 700;
  color      : var(--color-text-muted);
  font-family: var(--font-mono);
}
.symbol-last-price.has-price { color: var(--color-buy); }
.symbol-order-count {
  font-size    : 0.62rem;
  color        : var(--color-text-dim);
  background   : var(--color-bg-card);
  padding      : 0.05rem 0.3rem;
  border-radius: var(--radius-sm);
}
.symbol-empty {
  padding   : 2rem 0.75rem;
  text-align: center;
  color     : var(--color-text-dim);
  font-size : var(--font-size-sm);
}

/* ═══════════════════════════════════════════════════════════
   중앙 패널: 호가창
   ═══════════════════════════════════════════════════════════ */
.market-orderbook-panel {
  display       : flex;
  flex-direction: column;
  overflow      : hidden;
  background    : var(--color-bg-secondary);
}

.orderbook-header {
  padding        : 0 1rem;
  height         : 36px;
  background     : var(--color-bg);
  border-bottom  : 1px solid var(--color-border);
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  flex-shrink    : 0;
}
.orderbook-symbol-name {
  font-size  : var(--font-size-md);
  font-weight: 700;
}

.orderbook-col-header {
  display              : grid;
  grid-template-columns: 1fr 1fr 56px;
  padding              : 0 1rem;
  height               : 28px;
  font-size            : 0.62rem;
  font-weight          : 700;
  color                : var(--color-text-dim);
  text-transform       : uppercase;
  letter-spacing       : 0.06em;
  border-bottom        : 1px solid var(--color-border);
  background           : var(--color-bg);
  align-items          : center;
  flex-shrink          : 0;
  position             : relative;
}

.orderbook-col-header::after,
.order-row::after {
  content       : '';
  position      : absolute;
  top           : 0;
  bottom        : 0;
  left          : calc(50% - 28px);
  border-left   : 1px solid var(--color-border);
  z-index       : 0;
  pointer-events: none;
}

.orderbook-body {
  flex          : 1;
  overflow      : hidden;
  display       : flex;
  flex-direction: column;
}

/* ── 매도 섹션 (팝니다 = 파란색) ──────────────────────────── */
.sell-section, .buy-section {
  flex          : 1;
  overflow-y    : auto;
  display       : flex;
  flex-direction: column;
}
.sell-section { border-bottom: 1px solid var(--color-border); }
#sell-rows { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: min-content; }

.sell-section::-webkit-scrollbar,
.buy-section::-webkit-scrollbar { width: 3px; }
.sell-section::-webkit-scrollbar-thumb,
.buy-section::-webkit-scrollbar-thumb { background: var(--color-border); }

.section-label {
  padding       : 0.2rem 1rem;
  font-size     : 0.62rem;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink   : 0;
  position      : sticky;
  top           : 0;
  z-index       : 1;
}
/* 팝니다 = 파랑 */
.sell-section .section-label {
  color     : var(--color-sell);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}
/* 삽니다 = 빨강 */
.buy-section .section-label {
  color     : var(--color-buy);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

/* ── 호가 행 ─────────────────────────────────────────────── */
.order-row {
  display              : grid;
  grid-template-columns: 1fr 1fr 56px;
  padding              : 0.28rem 1rem;
  cursor               : pointer;
  transition           : background var(--transition);
  align-items          : center;
  position             : relative;
  overflow             : hidden;
  border-bottom        : 1px solid rgba(128, 128, 128, 0.05);
}
.order-row.sell-row { background: var(--color-sell-bg); }
.order-row.buy-row  { background: var(--color-buy-bg); }

/* 배경 강도 바 (거래량 시각화) */
.order-row::before {
  content       : '';
  position      : absolute;
  top: 0; bottom: 0; right: 0;
  width         : calc(var(--bar-ratio, 0) * (50% + 28px));
  opacity       : 0.12;
  pointer-events: none;
}
.sell-row::before { background: var(--color-sell); }
.buy-row::before  { background: var(--color-buy); }

.order-row:hover { background: var(--color-bg-hover); }
.order-row.sell-row:hover { background: var(--color-sell-hover); }
.order-row.buy-row:hover  { background: var(--color-buy-hover); }
.order-row.selected-row   { background: rgba(240, 185, 11, 0.08); outline: 1px solid rgba(240,185,11,0.3); }

.order-price {
  position   : relative;
  z-index    : 1;
  font-size  : var(--font-size-sm);
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.order-price.sell { color: var(--color-sell); }
.order-price.buy  { color: var(--color-buy); }

.order-qty {
  position            : relative;
  z-index             : 1;
  text-align          : right;
  font-size           : var(--font-size-sm);
  color               : var(--color-text-muted);
  font-family         : var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.order-badge {
  position       : relative;
  z-index        : 1;
  display        : flex;
  justify-content: flex-end;
}
.badge {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  padding        : 0.1rem 0.35rem;
  border-radius  : var(--radius-sm);
  font-size      : 0.6rem;
  font-weight    : 700;
}
.badge-seat  { background: rgba(240,185,11,0.15); color: var(--color-primary); }
.badge-carry { background: rgba(37,99,235,0.15);  color: var(--color-sell); }

/* 스프레드 구분선 */
.spread-divider {
  display        : flex;
  align-items    : center;
  justify-content: center;
  padding        : 0.3rem 1rem;
  background     : var(--color-bg);
  border-top     : 1px solid var(--color-border);
  border-bottom  : 1px solid var(--color-border);
  font-size      : 0.7rem;
  color          : var(--color-text-muted);
  gap            : 1rem;
  flex-shrink    : 0;
  font-family    : var(--font-mono);
}
.spread-divider strong { color: var(--color-primary); }

.order-row-empty {
  padding   : 2rem 1rem;
  text-align: center;
  color     : var(--color-text-dim);
  font-size : var(--font-size-sm);
}

/* ═══════════════════════════════════════════════════════════
   오른쪽 패널: 정보 + 액션
   ═══════════════════════════════════════════════════════════ */
.market-action-panel {
  background    : var(--color-bg);
  border-left   : 1px solid var(--color-border);
  display       : flex;
  flex-direction: column;
  overflow-y    : auto;
  padding       : 0.75rem;
  gap           : 0.5rem;
}
.market-action-panel::-webkit-scrollbar { width: 3px; }
.market-action-panel::-webkit-scrollbar-thumb { background: var(--color-border); }

.action-symbol-info {
  background   : var(--color-bg-card);
  border       : 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding      : 0.625rem 0.75rem;
}
.action-symbol-title {
  font-size    : var(--font-size-md);
  font-weight  : 700;
  margin-bottom: 0.375rem;
  color        : var(--color-text);
}
.action-price-row {
  display        : flex;
  justify-content: space-between;
  font-size      : 0.72rem;
  color          : var(--color-text-muted);
  margin-top     : 0.2rem;
}
.action-price-val { font-weight: 700; font-family: var(--font-mono); }
.action-price-val.sell-color { color: var(--color-sell); }
.action-price-val.buy-color  { color: var(--color-buy); }

/* 선택된 호가 표시 */
.selected-price-card {
  background   : var(--color-bg-card);
  border       : 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding      : 0.625rem 0.75rem;
  text-align   : center;
}
.selected-price-label { font-size: 0.65rem; color: var(--color-text-dim); margin-bottom: 0.2rem; }
.selected-price-val {
  font-size           : 1.2rem;
  font-weight         : 800;
  font-family         : var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.selected-price-val.sell { color: var(--color-sell); }
.selected-price-val.buy  { color: var(--color-buy); }
.selected-price-side { font-size: 0.7rem; margin-top: 0.15rem; color: var(--color-text-muted); }

/* 매수/매도 버튼 */
.action-buttons { display: flex; flex-direction: column; gap: 0.5rem; }
.btn-action {
  width        : 100%;
  padding      : 0.7rem;
  border-radius: var(--radius-sm);
  font-size    : var(--font-size-md);
  font-weight  : 700;
  border       : 1px solid transparent;
  cursor       : pointer;
  transition   : all var(--transition);
  font-family  : var(--font-main);
}
/* 팝니다(매도) = 파란색 */
.btn-sell {
  background: transparent;
  color     : var(--color-sell);
  border    : 1px solid var(--color-sell);
}
.btn-sell:hover { background: var(--color-sell-bg); }
/* 삽니다(매수) = 빨간색 */
.btn-buy {
  background: var(--color-buy);
  color     : #fff;
  border    : 1px solid var(--color-buy);
}
.btn-buy:hover { background: #b5283f; }
.btn-action:disabled {
  opacity: 0.3;
  cursor : not-allowed;
}

/* 내 주문 목록 */
.my-orders-section { margin-top: auto; }
.my-orders-title {
  font-size     : 0.65rem;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color         : var(--color-text-dim);
  margin-bottom : 0.375rem;
  padding-top   : 0.5rem;
  border-top    : 1px solid var(--color-border);
}
.my-order-item {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  padding        : 0.35rem 0;
  border-bottom  : 1px solid var(--color-border);
  font-size      : 0.72rem;
  font-family    : var(--font-mono);
}
.my-order-cancel {
  font-size  : 0.65rem;
  color      : var(--color-danger);
  cursor     : pointer;
  background : none;
  border     : none;
  font-family: var(--font-main);
}
.my-order-cancel:hover { text-decoration: underline; }

/* ── 주문 등록 버튼 ─────────────────────────────────────────── */
#btn-new-order {
  padding      : 0.3rem 0.75rem;
  font-size    : var(--font-size-sm);
  margin       : 0.375rem;
}

/* ── 주문 등록 모달 ─────────────────────────────────────────── */
.modal-backdrop {
  position       : fixed;
  inset          : 0;
  background     : rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index        : 2000;
  display        : flex;
  align-items    : center;
  justify-content: center;
  animation      : fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-box {
  background   : var(--color-bg-card);
  border       : 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding      : 1.25rem;
  width        : 100%;
  max-width    : 420px;
  animation    : slideUp 0.15s ease;
}
@keyframes slideUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal-title { font-size: var(--font-size-lg); font-weight: 700; margin-bottom: 1rem; }
.modal-field { margin-bottom: 0.75rem; }
.modal-field label {
  display      : block;
  font-size    : 0.7rem;
  color        : var(--color-text-muted);
  margin-bottom: 0.25rem;
  font-weight  : 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.modal-field input, .modal-field select, .modal-field textarea {
  width        : 100%;
  padding      : 0.45rem 0.625rem;
  background   : var(--color-bg-secondary);
  border       : 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color        : var(--color-text);
  font-size    : var(--font-size-sm);
  transition   : border-color var(--transition);
}
.modal-field input:focus, .modal-field select:focus, .modal-field textarea:focus {
  outline: none; border-color: var(--color-primary);
}
.modal-field textarea { resize: vertical; min-height: 48px; }
.modal-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }
.modal-actions button { flex: 1; padding: 0.55rem; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; border: 1px solid transparent; font-size: var(--font-size-sm); }
.modal-btn-submit { background: var(--color-primary); color: #1e2329; }
.modal-btn-submit:hover { background: var(--color-primary-hover); }
.modal-btn-cancel { background: transparent; color: var(--color-text-muted); border-color: var(--color-border) !important; }

/* 매도/매수 탭 */
.side-tabs { display: flex; gap: 0.375rem; margin-bottom: 0.875rem; }
.side-tab {
  flex        : 1;
  padding     : 0.45rem;
  border-radius: var(--radius-sm);
  font-size   : var(--font-size-sm);
  font-weight : 700;
  cursor      : pointer;
  border      : 1px solid var(--color-border);
  background  : transparent;
  color       : var(--color-text-muted);
  transition  : all var(--transition);
}
.side-tab.active-sell { border-color: var(--color-sell); color: var(--color-sell); background: var(--color-sell-bg); }
.side-tab.active-buy  { border-color: var(--color-buy);  color: var(--color-buy);  background: var(--color-buy-bg); }

/* ── 매칭 팝업 ─────────────────────────────────────────────── */
.match-popup {
  position     : fixed;
  bottom       : 4.5rem;
  right        : 1rem;
  background   : var(--color-bg-card);
  border       : 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding      : 1rem 1.25rem;
  width        : 290px;
  z-index      : 3000;
  animation    : slideUp 0.2s ease;
}
.match-popup-title { font-weight: 700; margin-bottom: 0.3rem; font-size: var(--font-size-md); }
.match-popup-char  {
  background   : var(--color-bg-secondary);
  border       : 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding      : 0.5rem;
  margin       : 0.5rem 0;
  font-size    : var(--font-size-sm);
}
.match-popup-char .nickname { font-weight: 700; color: var(--color-primary); }
.match-popup-timer {
  font-size   : 1.3rem;
  font-weight : 900;
  color       : var(--color-warning);
  text-align  : center;
  margin      : 0.5rem 0;
  font-family : var(--font-mono);
}
.match-popup-actions { display: flex; gap: 0.375rem; }
.match-popup-actions button {
  flex        : 1;
  padding     : 0.45rem;
  border-radius: var(--radius-sm);
  font-weight : 700;
  cursor      : pointer;
  border      : 1px solid transparent;
  font-size   : var(--font-size-sm);
}
.btn-accept { background: var(--color-buy);  color: #fff; }
.btn-reject { background: transparent; color: var(--color-danger); border-color: var(--color-danger) !important; }

/* ── 에스크로 배너 ──────────────────────────────────────────── */
.escrow-banner {
  position: fixed; inset: 0;
  display : flex; align-items: center; justify-content: center;
  background     : rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index : 3500;
}
.escrow-banner-box {
  background   : var(--color-bg-card);
  border       : 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding      : 1.5rem;
  max-width    : 420px;
  width        : 100%;
  text-align   : center;
  animation    : slideUp 0.15s ease;
  display      : flex;
  flex-direction: column;
  gap          : 0.75rem;
  max-height   : 90vh;
  overflow-y   : auto;
}
.escrow-banner-title { font-weight: 700; font-size: var(--font-size-lg); color: var(--color-text); }
.escrow-banner-timer {
  font-size  : 1.75rem;
  font-weight: 900;
  color      : var(--color-text);
  font-family: var(--font-mono);
}
.escrow-chars { display: flex; gap: 0.75rem; justify-content: center; align-items: center; }
.escrow-char-card {
  flex        : 1;
  background  : var(--color-bg-secondary);
  border      : 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding     : 0.75rem;
  font-size   : var(--font-size-sm);
}
.escrow-char-card .name { font-weight: 800; color: var(--color-text); font-size: var(--font-size-md); margin: 0.2rem 0; }
.escrow-btn-complete {
  width        : 100%;
  padding      : 0.7rem;
  border-radius: var(--radius-sm);
  font-size    : var(--font-size-md);
  font-weight  : 700;
  cursor       : pointer;
  border       : 1px solid var(--color-border);
  background   : var(--color-bg-secondary);
  color        : var(--color-text);
  transition   : all 0.1s ease;
}
.escrow-btn-complete:hover { background: var(--color-primary); border-color: var(--color-primary); color: #1e2329; }
.escrow-btn-complete:active { transform: scale(0.99); }

/* 에스크로 채팅창 */
.escrow-chat-container {
  display      : flex;
  flex-direction: column;
  background   : var(--color-bg-secondary);
  border       : 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  height       : 160px;
  text-align   : left;
}
.escrow-chat-messages {
  flex      : 1;
  overflow-y: auto;
  padding   : 0.5rem;
  display   : flex;
  flex-direction: column;
  gap       : 0.375rem;
}
.escrow-chat-message {
  font-size    : var(--font-size-sm);
  padding      : 0.375rem 0.625rem;
  border-radius: var(--radius-sm);
  max-width    : 85%;
  line-height  : 1.4;
}
.escrow-chat-message.mine   { background: var(--color-primary); color: #1e2329; align-self: flex-end; }
.escrow-chat-message.theirs { background: var(--color-bg-card); color: var(--color-text); align-self: flex-start; border: 1px solid var(--color-border); }
.escrow-chat-input-area { display: flex; border-top: 1px solid var(--color-border); }
.escrow-chat-input-area input {
  flex       : 1;
  background : transparent;
  border     : none;
  padding    : 0.45rem 0.625rem;
  color      : var(--color-text);
  font-size  : var(--font-size-sm);
}
.escrow-chat-input-area input:focus { outline: none; }
.escrow-chat-input-area button {
  background : var(--color-primary);
  color      : #1e2329;
  border     : none;
  padding    : 0 0.875rem;
  font-weight: 700;
  cursor     : pointer;
  font-size  : var(--font-size-sm);
}

/* ── 거래 확인 팝업 ─────────────────────────────────────────── */
.confirm-popup {
  position: fixed; inset: 0;
  display : flex; align-items: center; justify-content: center;
  background     : rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  z-index : 4000;
}
.confirm-popup-box {
  background   : var(--color-bg-card);
  border       : 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding      : 1.5rem;
  max-width    : 360px;
  width        : 100%;
  text-align   : center;
  animation    : slideUp 0.15s ease;
}
.confirm-popup-title { font-size: var(--font-size-lg); font-weight: 700; margin-bottom: 0.375rem; }
.confirm-popup-desc  { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-bottom: 1rem; }
.confirm-popup-timer {
  font-size  : 1.75rem;
  font-weight: 900;
  color      : var(--color-warning);
  margin-bottom: 1rem;
  font-family: var(--font-mono);
}
.confirm-popup-actions { display: flex; gap: 0.75rem; }
.confirm-popup-actions button {
  flex        : 1;
  padding     : 0.65rem;
  border-radius: var(--radius-sm);
  font-size   : var(--font-size-md);
  font-weight : 700;
  cursor      : pointer;
  border      : 1px solid transparent;
}
.btn-confirm-yes { background: var(--color-buy); color: #fff; }
.btn-confirm-no  { background: transparent; color: var(--color-sell); border-color: var(--color-sell) !important; }

/* ── 반응형 ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .market-layout { grid-template-columns: 160px 1fr; }
  .market-action-panel { display: none; }
}
@media (max-width: 600px) {
  .market-layout { grid-template-columns: 1fr; }
  .market-symbol-panel { display: none; }
  .match-popup { width: calc(100vw - 1.5rem); right: 0.75rem; }
}

/* ── 거래 완료 행 깜빡임 ─────────────────────────────────────── */
@keyframes flashRow {
  0%   { background-color: rgba(240, 185, 11, 0.35); }
  100% { background-color: transparent; }
}
.flash-matched {
  animation: flashRow 1.2s ease-out !important;
  position : relative;
  z-index  : 10;
}

/* ── btn-outline 범용 ─────────────────────────────────────────── */
.btn-outline {
  background   : transparent;
  border       : 1px solid var(--color-border);
  color        : var(--color-text-muted);
  padding      : 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size    : var(--font-size-sm);
  font-weight  : 600;
  transition   : all var(--transition);
}
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-text); }