/* ==========================================================
   星夜商城 — 自訂元件層
   所有原生控制項（捲軸 / 核取方塊 / 單選 / 開關 / 下拉 / 檔案 /
   數字 / 滑桿 / 提示 / 對話框）皆改為自訂樣式
   ========================================================== */

/* ------------------------------- 捲軸 ------------------------------- */
* { scrollbar-width: thin; scrollbar-color: #34343f var(--ink-2); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ink-2); border-left: 1px solid var(--line); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3a3a48, #2a2a35);
  border: 3px solid var(--ink-2); border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #4a4a5e, #35354a); }
::-webkit-scrollbar-thumb:active { background: var(--brand); }
::-webkit-scrollbar-corner { background: var(--ink-2); }

/* 面板內的小捲軸 */
.scroll-y { overflow-y: auto; max-height: 320px; }
.scroll-y::-webkit-scrollbar { width: 8px; }
.scroll-y::-webkit-scrollbar-thumb { border-width: 2px; }

/* ------------------------- 選取 / 游標 / 焦點 ------------------------- */
::selection { background: rgba(85, 102, 207, .35); color: #fff; }
.input, input, textarea { caret-color: var(--brand-soft); }
::placeholder { color: var(--text-3); opacity: 1; }
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px;
}
ul::marker, li::marker { color: var(--brand); }

/* ---------------------------- 核取方塊 ---------------------------- */
input[type="checkbox"]:not(.native) {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex-shrink: 0; margin: 0;
  border: 1px solid var(--line-2); border-radius: 4px;
  background: var(--ink-2); cursor: pointer; position: relative;
  transition: background .15s, border-color .15s;
}
input[type="checkbox"]:not(.native):hover { border-color: var(--brand-soft); }
input[type="checkbox"]:not(.native)::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0);
  transition: transform .15s ease;
}
input[type="checkbox"]:not(.native):checked {
  background: var(--brand); border-color: var(--brand);
}
input[type="checkbox"]:not(.native):checked::after { transform: rotate(45deg) scale(1); }
input[type="checkbox"]:not(.native):disabled { opacity: .45; cursor: not-allowed; }

/* ------------------------------ 單選 ------------------------------ */
input[type="radio"]:not(.native) {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex-shrink: 0; margin: 0;
  border: 1px solid var(--line-2); border-radius: 50%;
  background: var(--ink-2); cursor: pointer; position: relative;
  transition: border-color .15s;
}
input[type="radio"]:not(.native):hover { border-color: var(--brand-soft); }
input[type="radio"]:not(.native)::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--brand); transform: scale(0); transition: transform .15s ease;
}
input[type="radio"]:not(.native):checked { border-color: var(--brand); }
input[type="radio"]:not(.native):checked::after { transform: scale(1); }
input[type="radio"]:not(.native):disabled { opacity: .45; cursor: not-allowed; }

/* ---------------------------- 開關（Switch）---------------------------- */
.switch input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 42px; height: 23px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--ink-2);
  position: relative; cursor: pointer; transition: background .18s, border-color .18s;
}
.switch input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 17px; height: 17px; border-radius: 50%;
  background: #6e6e7e; transition: transform .18s ease, background .18s;
  border: 0; transform: none;
}
.switch input[type="checkbox"]:checked {
  background: rgba(85, 102, 207, .28); border-color: var(--brand);
}
.switch input[type="checkbox"]:checked::after {
  transform: translateX(19px); background: var(--brand-soft);
}
.switch { user-select: none; }

/* --------------------------- 下拉選單（原生）--------------------------- */
select.input {
  appearance: none; -webkit-appearance: none;
  padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238b8b96' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
}
select.input::-ms-expand { display: none; }

/* -------------------------- 下拉選單（自訂）-------------------------- */
.ui-select { position: relative; }
.ui-select > select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.ui-select-btn {
  width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; background: var(--ink-2); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r);
  transition: border-color .15s;
}
.ui-select-btn:hover { border-color: var(--text-3); }
.ui-select.open .ui-select-btn { border-color: var(--brand); }
.ui-select-btn .v { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-select-btn .arrow {
  width: 9px; height: 9px; border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s;
}
.ui-select.open .ui-select-btn .arrow { transform: rotate(-135deg) translate(-3px, -3px); }
.ui-select-menu {
  position: absolute; z-index: 60; top: calc(100% + 5px); left: 0; right: 0;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
  padding: 5px; max-height: 268px; overflow-y: auto; display: none;
  animation: uiDrop .14s ease;
}
.ui-select.open .ui-select-menu { display: block; }
@keyframes uiDrop { from { opacity: 0; transform: translateY(-4px); } }
.ui-option {
  padding: 9px 12px; border-radius: 4px; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ui-option:hover, .ui-option.focus { background: rgba(85, 102, 207, .16); }
.ui-option.on { color: var(--brand-soft); font-weight: 600; }
.ui-option.on::after {
  content: ""; width: 5px; height: 9px; border: solid var(--brand-soft);
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); flex-shrink: 0;
}

/* ---------------------------- 數字輸入 ---------------------------- */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ui-number { position: relative; display: block; }
.ui-number > .input { padding-right: 40px; }
.ui-number .steps {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 2px;
}
.ui-number .steps button {
  width: 26px; height: 15px; padding: 0; line-height: 1;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text-2);
  cursor: pointer; border-radius: 3px; font-size: 9px;
  display: grid; place-items: center;
}
.ui-number .steps button:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------------------------- 檔案選擇 ---------------------------- */
.ui-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ui-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ui-file .pick {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: 1px dashed var(--line-2); border-radius: var(--r);
  background: var(--ink-2); cursor: pointer; font-size: 14px; color: var(--text-2);
  transition: .15s;
}
.ui-file .pick:hover { border-color: var(--brand); color: var(--text); background: rgba(85, 102, 207, .08); }
.ui-file .pick::before {
  content: ""; width: 13px; height: 13px; flex-shrink: 0;
  border: 1.5px solid currentColor; border-radius: 2px;
  border-top-width: 4px;
}
.ui-file .names { font-size: 13px; color: var(--text-3); }
.ui-file .names b { color: var(--text-2); font-weight: 500; }

/* ------------------------------ 滑桿 ------------------------------ */
input[type="range"] {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 4px; border-radius: 3px; background: var(--line-2); outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand); border: 2px solid var(--ink); cursor: pointer;
  box-shadow: 0 0 0 1px var(--brand);
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--brand);
  border: 2px solid var(--ink); cursor: pointer;
}

/* ---------------------------- 提示泡泡 ---------------------------- */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: #1b1b23; color: var(--text); border: 1px solid var(--line-2);
  padding: 6px 11px; border-radius: 5px; font-size: 12.5px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: .15s; z-index: 70;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
}
[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ------------------------- 載入中 / 進度條 ------------------------- */
.spinner {
  width: 15px; height: 15px; border-radius: 50%; display: inline-block;
  border: 2px solid rgba(255, 255, 255, .25); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn.loading { pointer-events: none; opacity: .8; }
.btn.loading::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .3); border-top-color: currentColor;
  animation: spin .7s linear infinite;
}
.progress { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--brand); transition: width .2s; }

.skeleton {
  background: linear-gradient(90deg, #16161c 25%, #1e1e26 50%, #16161c 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 4px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* --------------------------- 確認對話框 --------------------------- */
.ui-dialog {
  position: fixed; inset: 0; z-index: 200; display: none;
  place-items: center; padding: 22px; background: rgba(4, 4, 8, .74);
}
.ui-dialog.show { display: grid; }
.ui-dialog-card {
  width: min(430px, 100%); background: var(--panel);
  border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6); animation: uiPop .16s ease;
  overflow: hidden;
}
@keyframes uiPop { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.ui-dialog-card .bar { height: 3px; background: var(--brand); }
.ui-dialog-card.danger .bar { background: var(--danger); }
.ui-dialog-card .body { padding: 24px 24px 20px; }
.ui-dialog-card h3 { font-size: 17px; margin-bottom: 8px; }
.ui-dialog-card p { font-size: 14px; color: var(--text-2); white-space: pre-wrap; }
.ui-dialog-card .foot {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 14px 24px; border-top: 1px solid var(--line); background: var(--ink-2);
}
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #d0706c; border-color: #d0706c; }

/* --------------------------- 其他細節 --------------------------- */
.chip, .btn, .ui-option, .opt, .switch { -webkit-tap-highlight-color: transparent; }
details.ui > summary { cursor: pointer; list-style: none; }
details.ui > summary::-webkit-details-marker { display: none; }
img[loading="lazy"] { background: var(--panel-2); }


/* --------------------- 包裝層在既有版面中的伸縮 --------------------- */
.row > .ui-select, .row > .ui-number, .row > .ui-file { flex: 1; min-width: 0; }
.ui-number, .ui-select { width: 100%; }
.ui-number > .input { width: 100%; }
.field > .ui-select, .field > .ui-number { margin-top: 0; }
.inline-input > .ui-select, .inline-input > .ui-number { flex: 1; }