/* =========================================================================
   Try It On —— 鑽石手上模擬器（三層合成）
   搭配 Views/Shared/_TryItOn.cshtml 與 Scripts/try-it-on.js

   本檔刻意不使用任何寬度斷點與視窗寬度單位；每一個會顯示文字的選擇器都
   明確寫 font-size；所有規則都掛在 .tio 前綴底下，避免與全站樣式撞名。
   ========================================================================= */

.tio, .tio *, .tio *::before, .tio *::after { box-sizing: border-box; margin: 0; padding: 0; }

.tio {
    --tio-gold: #b09c57;
    --tio-gold-dark: #8a7840;
    --tio-ink: #303030;
    --tio-muted: #6f6b66;
    --tio-line: #e2e0dd;
    --tio-ivory: #faf9f7;
    --tio-white: #fff;
    --tio-warn: #c8791f;
    --tio-ok: #3f7d4e;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    color: var(--tio-ink);
    font-size: 14px;
    line-height: 1.75;
}

.tio h2 { font-size: 26px; font-weight: 600; letter-spacing: .02em; margin-bottom: 8px; }
.tio .tio-lede { font-size: 14px; color: var(--tio-muted); margin-bottom: 24px; max-width: 720px; }

/* ---------------------------------------------------------------- 校正列 */
.tio .tio-cal { border: 1px solid var(--tio-line); background: var(--tio-ivory); margin-bottom: 22px; }
.tio .tio-cal-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; }
.tio .tio-cal-head:hover { background: #f4f2ee; }

.tio .tio-badge {
    font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
    padding: 4px 12px; border-radius: 20px; white-space: nowrap; border: 1px solid;
}
.tio .tio-badge.is-off { color: var(--tio-warn); border-color: var(--tio-warn); background: #fdf6ec; }
.tio .tio-badge.is-on { color: var(--tio-ok); border-color: var(--tio-ok); background: #eef6f0; }

.tio .tio-cal-msg { font-size: 13.5px; color: var(--tio-muted); flex: 1; }
.tio .tio-cal-msg b { color: var(--tio-ink); font-weight: 600; }

.tio .tio-cal-toggle {
    font-size: 13px; color: var(--tio-gold-dark); border: 1px solid var(--tio-gold);
    background: var(--tio-white); padding: 7px 16px; cursor: pointer;
    white-space: nowrap; font-family: inherit;
}
/* 第一次來的時候呼吸式閃動，校正完就拿掉 */
.tio .tio-cal-toggle.is-shine { animation: tioShine 1.6s ease-in-out infinite; }
@keyframes tioShine {
    0%, 100% { box-shadow: 0 0 0 0 rgba(176,156,87,.55); background: var(--tio-white); }
    50% { box-shadow: 0 0 0 7px rgba(176,156,87,0); background: #fdfaf2; }
}
/* 使用者若關閉系統動態效果就不要閃 */
@media (prefers-reduced-motion: reduce) {
    .tio .tio-cal-toggle.is-shine { animation: none; }
}

.tio .tio-cal-body { border-top: 1px solid var(--tio-line); padding: 20px 18px; }
.tio .tio-cal-steps { font-size: 13.5px; color: var(--tio-muted); margin-bottom: 16px; }
.tio .tio-cal-steps b { color: var(--tio-ink); }

.tio .tio-refbtns { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tio .tio-refbtns button {
    font-family: inherit; font-size: 13px; padding: 7px 14px;
    border: 1px solid var(--tio-line); background: var(--tio-white);
    color: var(--tio-ink); cursor: pointer;
}
.tio .tio-refbtns button.is-on {
    border-color: var(--tio-gold); background: #fdfaf2;
    color: var(--tio-gold-dark); font-weight: 600;
}
.tio .tio-refhint { font-size: 12.5px; color: var(--tio-muted); margin-bottom: 12px; }

.tio .tio-cal-stage {
    position: relative; background: var(--tio-white); border: 1px solid var(--tio-line);
    height: 150px; margin-bottom: 14px; overflow: hidden;
}
.tio .tio-refobj {
    position: absolute; left: 24px; top: 22px;
    border: 2px solid var(--tio-gold); background: rgba(176,156,87,.10);
}
.tio .tio-refobj.is-round { border-radius: 50%; }

.tio .tio-calrow { display: flex; align-items: center; gap: 14px; }
.tio .tio-calrow input[type=range] { flex: 1; accent-color: var(--tio-gold); }
.tio .tio-calrow .tio-calval { font-size: 13px; color: var(--tio-muted); width: 150px; text-align: right; }

.tio .tio-cal-done { margin-top: 14px; display: flex; gap: 10px; align-items: center; }
.tio .tio-cal-done button {
    font-family: inherit; font-size: 13px; padding: 8px 20px; cursor: pointer;
    border: 1px solid var(--tio-gold); background: var(--tio-gold); color: #fff;
}
.tio .tio-cal-done .tio-cal-reset {
    background: var(--tio-white); color: var(--tio-muted); border-color: var(--tio-line);
}

/* ------------------------------------------------ 主體：左舞台 / 右控制項 */
.tio .tio-wrap { display: flex; gap: 40px; align-items: flex-start; }
.tio .tio-stagecol { flex: 0 0 auto; }

.tio .tio-stage {
    position: relative; background: var(--tio-ivory);
    border: 1px solid var(--tio-line); overflow: hidden;
}
.tio .tio-stage .tio-hand { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.tio .tio-stage .tio-layer { position: absolute; transform-origin: center center; }
.tio .tio-stage .tio-layer img { width: 100%; height: auto; display: block; }

.tio .tio-scalenote { font-size: 12.5px; margin-top: 10px; }
.tio .tio-scalenote.is-off { color: var(--tio-warn); }
.tio .tio-scalenote.is-on { color: var(--tio-ok); }
.tio .tio-cap { font-size: 12.5px; color: var(--tio-muted); margin-top: 8px; max-width: 470px; line-height: 1.7; }

.tio .tio-ctrlcol { flex: 1 1 auto; min-width: 0; }
.tio .tio-ctrl { margin-bottom: 26px; }
.tio .tio-ctrl-hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.tio .tio-ctrl-hd .tio-n { font-size: 12px; color: var(--tio-gold); font-weight: 600; letter-spacing: .1em; }
.tio .tio-ctrl-hd .tio-t { font-size: 15px; font-weight: 600; }
.tio .tio-ctrl-hd .tio-s { font-size: 12.5px; color: var(--tio-muted); }

.tio .tio-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tio .tio-chips button {
    font-family: inherit; font-size: 13.5px; padding: 8px 15px; line-height: 1.4;
    border: 1px solid var(--tio-line); background: var(--tio-white);
    color: var(--tio-ink); cursor: pointer; transition: .18s;
}
.tio .tio-chips button:hover { border-color: var(--tio-gold); }
.tio .tio-chips button.is-on {
    border-color: var(--tio-gold); background: var(--tio-gold); color: #fff; font-weight: 600;
}
.tio .tio-chips button .tio-sub { display: block; font-size: 11.5px; opacity: .72; font-weight: 400; }
.tio .tio-onlyone { font-size: 13px; color: var(--tio-muted); padding: 8px 0; }

.tio .tio-caratwrap { padding: 2px 4px 0; }
.tio .tio-caratwrap input[type=range] { width: 100%; accent-color: var(--tio-gold); }
.tio .tio-ticks { display: flex; justify-content: space-between; margin-top: 4px; }
.tio .tio-ticks span { font-size: 11.5px; color: var(--tio-muted); width: 34px; text-align: center; }
.tio .tio-ticks span.is-on { color: var(--tio-gold-dark); font-weight: 700; }

.tio .tio-readout {
    border: 1px solid var(--tio-line); background: var(--tio-ivory);
    padding: 16px 18px; font-size: 13.5px; line-height: 1.9;
}
.tio .tio-readout .tio-rd-hd { font-size: 19px; font-weight: 600; color: var(--tio-ink); margin-bottom: 6px; }
.tio .tio-readout .tio-k { color: var(--tio-muted); }

/* ---------------------------------------------------------------- 分享列 */
.tio .tio-share { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--tio-line); }
.tio .tio-share-hd { font-size: 12.5px; color: var(--tio-muted); margin-bottom: 10px; }
.tio .tio-share-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.tio .tio-share-btns button {
    font-family: inherit; font-size: 13px; padding: 8px 16px; cursor: pointer;
    border: 1px solid var(--tio-line); background: var(--tio-white); color: var(--tio-ink);
    display: inline-flex; align-items: center; gap: 6px; transition: .18s;
}
.tio .tio-share-btns button:hover { border-color: var(--tio-gold); color: var(--tio-gold-dark); }
.tio .tio-share-btns button.is-copied { border-color: var(--tio-ok); color: var(--tio-ok); }
.tio .tio-share-note { font-size: 12px; color: var(--tio-muted); margin-top: 8px; }