/* ============================================================
   植髮模擬 hairsim.css
   全部以 .hs- 前綴命名，避免與站台既有 542KB 樣式衝突。
   改色只要動 --hs-primary 一個變數即可。
   ============================================================ */
.hs-app{
    --hs-primary:#1f7a68;          /* 主色，可改成品牌色 */
    --hs-primary-d:#155848;
    --hs-bg:#ffffff;
    --hs-surface:#f6f7f8;
    --hs-line:#e4e6e8;
    --hs-text:#222;
    --hs-muted:#6b7177;
    max-width:760px;
    margin:0 auto 48px;
    padding:0 16px;
    color:var(--hs-text);
    -webkit-font-smoothing:antialiased;
}

.hs-step{margin:28px 0;}
.hs-step-title{
    display:flex;align-items:center;gap:10px;
    font-size:18px;font-weight:500;margin:0 0 12px;
}
.hs-step-no{
    display:inline-flex;align-items:center;justify-content:center;
    width:24px;height:24px;border-radius:50%;
    background:var(--hs-primary);color:#fff;font-size:13px;font-weight:500;
}
.hs-hint{font-size:13px;color:var(--hs-muted);line-height:1.7;margin:0 0 12px;}

/* 上傳 ---------------------------------------------------------- */
.hs-upload{
    display:block;cursor:pointer;border:1.5px dashed var(--hs-line);
    border-radius:12px;background:var(--hs-surface);overflow:hidden;
    transition:border-color .15s;
}
.hs-upload:hover{border-color:var(--hs-primary);}
.hs-upload-empty{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:8px;padding:40px 16px;color:var(--hs-muted);
}
.hs-upload-empty .fa{font-size:32px;color:var(--hs-primary);}
.hs-upload-empty span{font-size:14px;}
.hs-upload-preview{position:relative;text-align:center;background:#000;}
.hs-upload-preview img{max-width:100%;max-height:420px;display:inline-block;}
.hs-reupload{
    position:absolute;right:10px;bottom:10px;
    background:rgba(0,0,0,.6);color:#fff;font-size:12px;
    padding:6px 10px;border-radius:6px;
}

/* 選項 ---------------------------------------------------------- */
.hs-options{display:grid;gap:10px;}
.hs-grid-2{grid-template-columns:repeat(2,1fr);}
.hs-grid-3{grid-template-columns:repeat(3,1fr);}
.hs-grid-4{grid-template-columns:repeat(4,1fr);}
.hs-opt{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:6px;min-height:64px;padding:10px 8px;
    border:1.5px solid var(--hs-line);border-radius:10px;
    background:var(--hs-bg);color:var(--hs-text);
    font-size:13px;cursor:pointer;transition:all .12s;line-height:1.4;
}
.hs-opt .fa{font-size:20px;color:var(--hs-muted);transition:color .12s;}
.hs-opt:hover{border-color:var(--hs-primary);}
.hs-opt.is-active{
    border-color:var(--hs-primary);
    background:rgba(31,122,104,.07);
    color:var(--hs-primary-d);font-weight:500;
}
.hs-opt.is-active .fa{color:var(--hs-primary);}

/* 按鈕 ---------------------------------------------------------- */
.hs-actions{margin:24px 0;text-align:center;}
.hs-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 22px;border:1.5px solid var(--hs-line);border-radius:10px;
    background:var(--hs-bg);color:var(--hs-text);font-size:15px;
    cursor:pointer;text-decoration:none;transition:all .12s;
}
.hs-btn:hover{border-color:var(--hs-primary);color:var(--hs-primary-d);}
.hs-btn-primary{background:var(--hs-primary);border-color:var(--hs-primary);color:#fff;}
.hs-btn-primary:hover{background:var(--hs-primary-d);border-color:var(--hs-primary-d);color:#fff;}
.hs-btn:disabled{opacity:.45;cursor:not-allowed;border-color:var(--hs-line);}
.hs-btn-primary:disabled:hover{background:var(--hs-primary);}

/* 載入 / 錯誤 --------------------------------------------------- */
.hs-loading{
    display:flex;align-items:center;justify-content:center;gap:12px;
    padding:20px;color:var(--hs-muted);font-size:14px;
}
.hs-spinner{
    width:20px;height:20px;border:3px solid var(--hs-line);
    border-top-color:var(--hs-primary);border-radius:50%;
    animation:hs-spin .8s linear infinite;
}
@keyframes hs-spin{to{transform:rotate(360deg);}}
.hs-error{
    margin:16px 0;padding:12px 16px;border-radius:10px;
    background:#fdecec;color:#a3261d;font-size:14px;line-height:1.6;
}

/* before / after 對比 ------------------------------------------ */
.hs-result{margin-top:32px;}
.hs-compare{
    position:relative;width:100%;overflow:hidden;border-radius:12px;
    background:#000;user-select:none;touch-action:none;
}
.hs-compare img{display:block;width:100%;pointer-events:none;}
.hs-compare-after{width:100%;}
.hs-compare-before{
    position:absolute;top:0;left:0;height:100%;width:50%;overflow:hidden;
    border-right:2px solid #fff;
}
.hs-compare-before img{
    position:absolute;top:0;left:0;height:100%;width:auto;max-width:none;
}
.hs-compare-handle{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:40px;height:40px;border-radius:50%;background:#fff;
    display:flex;align-items:center;justify-content:center;
    color:var(--hs-primary);box-shadow:0 1px 6px rgba(0,0,0,.3);cursor:ew-resize;
}
.hs-tag{
    position:absolute;top:10px;font-size:12px;color:#fff;
    background:rgba(0,0,0,.55);padding:3px 8px;border-radius:5px;
}
.hs-tag-before{left:10px;}
.hs-tag-after{right:10px;}
.hs-result-actions{
    display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px;
}

/* 免責 ---------------------------------------------------------- */
.hs-disclaimer{
    margin:32px 0 0;padding-top:16px;border-top:1px solid var(--hs-line);
    font-size:12px;color:var(--hs-muted);line-height:1.7;text-align:center;
}

.hs-recaptcha{display:flex;justify-content:center;margin-bottom:16px;}

/* RWD ---------------------------------------------------------- */
@media (max-width:560px){
    .hs-grid-4{grid-template-columns:repeat(2,1fr);}
    .hs-opt{min-height:60px;}
    .hs-result-actions .hs-btn{flex:1 1 100%;}
}