/* ============================================================
   植髮模擬 hairsim.css — 精緻醫療美學設計系統
   全部以 .hs- 前綴命名，避免與站台既有樣式衝突。
   主色改 --hs-primary 一個變數即可。
   ============================================================ */
.hs-app{
    /* 色彩 token */
    --hs-primary:#10796a;       /* 主色：精緻青綠 */
    --hs-primary-d:#0b5648;     /* 深青綠（文字/hover） */
    --hs-primary-l:#e7f2ef;     /* 青綠淡底 */
    --hs-accent:#b78a3c;        /* 金銅點綴（節制使用） */
    --hs-accent-l:#f7efdd;
    --hs-text:#26352f;
    --hs-muted:#6a7a74;
    --hs-bg:#ffffff;
    --hs-surface:#f4f8f6;
    --hs-line:#e2ebe7;
    --hs-shadow:0 1px 2px rgba(16,40,34,.05),0 10px 30px rgba(16,40,34,.06);
    --hs-shadow-sm:0 1px 2px rgba(16,40,34,.06);
    --hs-radius:16px;

    max-width:780px;
    margin:0 auto 56px;
    padding:0 16px;
    color:var(--hs-text);
    font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",-apple-system,system-ui,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
.hs-app *{box-sizing:border-box;}
.hs-app button span{font-size:14px;}

/* 置頂提醒：免責 + 隱私 ----------------------------------------- */
.hs-disclaimer{
    display:flex;gap:12px;align-items:flex-start;
    margin:4px 0 18px;padding:16px 18px;
    background:linear-gradient(180deg,#f0f7f5,#e7f2ef);
    border:1px solid #cfe4dd;border-left:4px solid var(--hs-primary-d);
    border-radius:14px;box-shadow:var(--hs-shadow-sm);
}
.hs-disclaimer .hs-disclaimer-ic{
    flex:0 0 auto;width:34px;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:#fff;color:var(--hs-primary-d);font-size:17px;box-shadow:var(--hs-shadow-sm);
}
.hs-disclaimer-tx{font-size:13px;line-height:1.75;color:#3c4a44;}
.hs-disclaimer-tx strong{color:var(--hs-primary-d);font-weight:700;}

.hs-privacy{
    display:flex;gap:9px;align-items:center;
    margin:0 0 14px;padding:11px 14px;
    background:var(--hs-primary-l);border-radius:11px;
    font-size:12.5px;line-height:1.6;color:var(--hs-primary-d);font-weight:500;
}
.hs-privacy .fa{font-size:14px;}

/* Hero ---------------------------------------------------------- */
.hs-hero{
    position:relative;text-align:center;overflow:hidden;
    padding:34px 24px 30px;margin-bottom:6px;border-radius:20px;
    background:
        radial-gradient(120% 90% at 50% -10%,#eaf4f1 0%,rgba(234,244,241,0) 60%),
        linear-gradient(180deg,#ffffff,#f7fbf9);
    border:1px solid var(--hs-line);box-shadow:var(--hs-shadow);
}
.hs-hero-badge{
    display:inline-flex;align-items:center;gap:7px;
    padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.04em;
    background: var(--hs-primary-l);color:var(--hs-primary-d);border:1px solid var(--hs-primary-d);margin-bottom:14px;
}
.hs-hero-title{
    font-size:32px;font-weight:700;line-height:1.22;letter-spacing:-.01em;
    color:var(--hs-primary-d);margin:0 0 10px;
}
.hs-hero-sub{font-size:15px;color:var(--hs-muted);margin:0;line-height:1.75;max-width:30em;margin-inline:auto;}

/* 進度條 -------------------------------------------------------- */
.hs-steps{
    display:flex;align-items:center;justify-content:center;gap:8px;
    list-style:none;margin:26px 0 8px;padding:0;
}
.hs-stepi{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--hs-muted);}
.hs-stepi-no{
    display:inline-flex;align-items:center;justify-content:center;
    width:24px;height:24px;border-radius:50%;font-size:12px;font-weight:600;
    background:#fff;color:var(--hs-muted);border:1.5px solid var(--hs-line);transition:all .2s;
}
.hs-stepi:not(:last-child)::after{content:"";width:30px;height:2px;border-radius:2px;background:var(--hs-line);margin-left:8px;transition:background .2s;}
.hs-stepi.is-active{color:var(--hs-primary-d);}
.hs-stepi.is-active .hs-stepi-no{background:var(--hs-primary);color:#fff;border-color:var(--hs-primary);box-shadow:0 2px 8px rgba(16,121,106,.3);}
.hs-stepi.is-done{color:var(--hs-primary-d);}
.hs-stepi.is-done .hs-stepi-no{background:var(--hs-primary);color:#fff;border-color:var(--hs-primary);}
.hs-stepi.is-done:not(:last-child)::after{background:var(--hs-primary);}

/* 步驟卡片 ------------------------------------------------------ */
.hs-step{
    margin:18px 0;padding:22px 22px 24px;
    background:var(--hs-bg);border:1px solid var(--hs-line);
    border-radius:var(--hs-radius);box-shadow:var(--hs-shadow-sm);
}
.hs-step-title{
    display:flex;align-items:center;gap:11px;
    font-size:17px;font-weight:700;color:var(--hs-text);margin:0 0 16px;letter-spacing:-.01em;
}
.hs-step-no{
    display:inline-flex;align-items:center;justify-content:center;
    width:26px;height:26px;border-radius:9px;font-size:13px;font-weight:700;
    background:var(--hs-primary);color:#fff;box-shadow:0 2px 6px rgba(16,121,106,.28);
}

/* 拍照引導 ------------------------------------------------------ */
.hs-guide{margin:0 0 16px;padding:14px 16px;background:var(--hs-surface);border-radius:12px;}
.hs-guide-label{font-size:12.5px;font-weight:600;color:var(--hs-primary-d);margin:0 0 8px;letter-spacing:.02em;}
.hs-tips{list-style:none;margin:0;padding:0;display:grid;gap:7px;}
.hs-tips li{font-size:13px;color:#4d5b55;line-height:1.6;display:flex;gap:8px;align-items:flex-start;}
.hs-ok{color:var(--hs-primary);margin-top:2px;}
.hs-no{color:#c2683f;margin-top:2px;}

/* 上傳 + 相機 --------------------------------------------------- */
.hs-uploadrow{display:flex;flex-direction:column;gap:10px;}
.hs-upload{
    display:block;cursor:pointer;border:1.5px dashed #c4d8d1;
    border-radius:14px;background:var(--hs-surface);overflow:hidden;transition:all .18s;
}
.hs-upload:hover{border-color:var(--hs-primary);background:var(--hs-primary-l);}
.hs-upload-empty{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:10px;padding:44px 16px;color:var(--hs-muted);
}
.hs-upload-empty .fa{font-size:34px;color:var(--hs-primary);}
.hs-upload-empty span{font-size:14.5px;font-weight:500;}
.hs-upload-preview{position:relative;text-align:center;background:#0c100f;}
.hs-upload-preview img{max-width:100%;max-height:440px;display:inline-block;}
.hs-reupload{
    position:absolute;right:10px;bottom:10px;
    background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:500;
    padding:7px 11px;border-radius:8px;backdrop-filter:blur(2px);
}
.hs-cam-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    border:1.5px solid var(--hs-line);background:#fff;color:var(--hs-primary-d);font-weight:600;
    border-radius:13px;padding:13px;font-size:14.5px;cursor:pointer;transition:all .16s;
}
.hs-cam-btn:hover{border-color:var(--hs-primary);background:var(--hs-primary-l);box-shadow:var(--hs-shadow-sm);}
.hs-camera{margin-top:14px;text-align:center;}
.hs-camera video{width:100%;max-width:430px;border-radius:16px;background:#000;transform:scaleX(-1);box-shadow:var(--hs-shadow);}
.hs-camera-actions{display:flex;gap:10px;justify-content:center;margin-top:12px;}

/* 角度預檢結果 -------------------------------------------------- */
.hs-angle{
    margin-top:14px;padding:11px 15px;border-radius:11px;
    font-size:13.5px;line-height:1.6;display:flex;align-items:flex-start;gap:9px;font-weight:500;
}
.hs-angle .fa{margin-top:2px;}
.hs-angle.is-checking{background:var(--hs-surface);color:var(--hs-muted);}
.hs-angle.is-ok{background:#e6f4ee;color:#16795b;}
.hs-angle.is-warn{background:#fdf2e2;color:#9a6212;}
.hs-angle-retry{margin-left:auto;flex:0 0 auto;font-size:12.5px;text-decoration:underline;color:inherit;cursor:pointer;background:none;border:0;padding:0;font-weight:600;}

/* 欄位標題 ------------------------------------------------------ */
.hs-field-label{font-size:13px;font-weight:600;color:var(--hs-text);margin:20px 0 9px;letter-spacing:.01em;}
.hs-field-label:first-child{margin-top:2px;}

/* 模擬項目（segmented）------------------------------------------ */
.hs-mode{display:flex;gap:5px;background:var(--hs-surface);border-radius:13px;padding:5px;}
.hs-mode-btn{
    flex:1;border:0;background:transparent;color:var(--hs-muted);cursor:pointer;
    padding:11px 8px;border-radius:9px;font-size:14px;font-weight:600;
    display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:all .16s;
}
.hs-mode-btn:hover{color:var(--hs-primary-d);}
.hs-mode-btn.is-active{background:#fff;color:var(--hs-primary-d);box-shadow:var(--hs-shadow-sm);}

/* 選項 chip ----------------------------------------------------- */
.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{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:5px;min-height:54px;padding:12px 8px;cursor:pointer;
    background:#fff;border:1.5px solid var(--hs-line);border-radius:13px;
    color:var(--hs-text);font-size:14px;font-weight:500;text-align:center;line-height:1.35;
    transition:all .15s;
}
.hs-opt:hover{border-color:#bcd5cd;background:var(--hs-surface);}
.hs-opt.is-active{
    border-color:var(--hs-primary);background:var(--hs-primary-l);color:var(--hs-primary-d);font-weight:700;
    box-shadow:0 0 0 1px var(--hs-primary) inset;
}
.hs-opt.is-active::after{
    content:"\2713";position:absolute;top:6px;right:8px;
    font-size:11px;font-weight:700;color:var(--hs-primary);
}

/* 動作（生成）-------------------------------------------------- */
.hs-actions{display:flex;flex-direction:column;align-items:center;gap:16px;margin:26px 0 8px;}
.hs-recaptcha{display:flex;justify-content:center;}
.hs-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 22px;border-radius:12px;border:1.5px solid var(--hs-line);
    background:#fff;color:var(--hs-text);font-size:14.5px;font-weight:600;cursor:pointer;
    text-decoration:none;transition:all .16s;
}
.hs-btn:hover{border-color:var(--hs-primary);color:var(--hs-primary-d);}
.hs-btn-primary{
    width:100%;max-width:360px;padding:15px 22px;font-size:15.5px;
    background:linear-gradient(180deg,#14887a,var(--hs-primary));
    border-color:var(--hs-primary);color:#fff;box-shadow:0 6px 18px rgba(16,121,106,.3);
}
.hs-btn-primary:hover{background:linear-gradient(180deg,#0f6f62,var(--hs-primary-d));border-color:var(--hs-primary-d);color:#fff;}
.hs-btn:disabled,.hs-btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;}
.hs-btn-primary:disabled{background:var(--hs-muted);border-color:var(--hs-muted);}

/* spinner ------------------------------------------------------- */
.hs-spinner{
    width:20px;height:20px;border:3px solid rgba(255,255,255,.4);
    border-top-color:#fff;border-radius:50%;animation:hs-spin .8s linear infinite;
}
@keyframes hs-spin{to{transform:rotate(360deg);}}

/* 載入 modal ---------------------------------------------------- */
.hs-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(14,28,24,.55);padding:20px;backdrop-filter:blur(3px);}
.hs-modal-box{width:100%;max-width:350px;background:#fff;border-radius:20px;padding:30px 26px 24px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);}
.hs-modal-ring{display:flex;justify-content:center;margin-bottom:18px;}
.hs-modal-ring .hs-spinner{width:46px;height:46px;border-width:4px;border-color:var(--hs-primary-l);border-top-color:var(--hs-primary);}
.hs-modal-title{font-size:18px;font-weight:700;color:var(--hs-text);margin:0 0 5px;}
.hs-modal-sub{font-size:13px;color:var(--hs-muted);margin:0 0 18px;}
.hs-modal-bar{height:9px;border-radius:999px;background:var(--hs-surface);overflow:hidden;}
.hs-modal-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--hs-primary),#3bbfa3);transition:width .4s ease;}
.hs-modal-pct{font-size:13px;color:var(--hs-primary-d);font-weight:600;margin:9px 0 0;}
.hs-modal-note{font-size:11px;color:var(--hs-muted);line-height:1.65;margin:15px 0 0;}

/* 錯誤 ---------------------------------------------------------- */
.hs-error{margin:16px 0;padding:13px 16px;border-radius:11px;background:#fdeceb;color:#a3261d;font-size:14px;line-height:1.6;border:1px solid #f4cfcb;}

/* before / after 對比 ------------------------------------------ */
.hs-result{margin-top:18px;padding:22px;background:var(--hs-bg);border:1px solid var(--hs-line);border-radius:var(--hs-radius);box-shadow:var(--hs-shadow);}
.hs-compare{position:relative;width:100%;overflow:hidden;border-radius:14px;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:3px 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:44px;height:44px;border-radius:50%;background:#fff;
    display:flex;align-items:center;justify-content:center;
    color:var(--hs-primary);box-shadow:0 2px 10px rgba(0,0,0,.35);cursor:ew-resize;
}
.hs-tag{position:absolute;top:12px;font-size:12px;font-weight:600;color:#fff;background:rgba(0,0,0,.58);padding:4px 10px;border-radius:7px;backdrop-filter:blur(2px);}
.hs-tag-before{left:12px;}
.hs-tag-after{right:12px;background:var(--hs-primary);}
.hs-result-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px;}
.hs-result-actions .hs-btn{flex:1 1 auto;min-width:140px;}
.hs-result-actions .hs-btn-primary{max-width:none;}

/* 響應式 -------------------------------------------------------- */
@media (max-width:600px){
    .hs-hero{padding:28px 18px 24px;}
    .hs-hero-title{font-size:25px;}
    .hs-step{padding:18px 16px 20px;}
    .hs-steps{gap:5px;}
    .hs-stepi{font-size:12px;gap:6px;}
    .hs-stepi:not(:last-child)::after{width:18px;margin-left:5px;}
    .hs-grid-4{grid-template-columns:repeat(2,1fr);}
    .hs-mode-btn{font-size:13px;padding:10px 6px;}
    .hs-result-actions .hs-btn{flex:1 1 100%;}
}

@media (prefers-reduced-motion:reduce){
    .hs-app *{transition:none !important;}
}

/* 真實案例輪播 ------------------------------------------------- */
.hs-cases{margin:30px 0 8px;padding:24px 22px;background:var(--hs-surface);border:1px solid var(--hs-line);border-radius:var(--hs-radius);}
.hs-cases-head{text-align:center;margin-bottom:18px;}
.hs-cases-title{font-size:20px;font-weight:700;color:var(--hs-primary-d);margin:0 0 6px;letter-spacing:-.01em;}
.hs-cases-sub{font-size:12.5px;color:var(--hs-muted);margin:0;line-height:1.6;}
.hs-carousel{position:relative;}
.hs-carousel-track{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scroll-behavior:smooth;padding:4px 2px 6px;scrollbar-width:none;
}
.hs-carousel-track::-webkit-scrollbar{display:none;}
.hs-case{flex:0 0 calc(50% - 7px);scroll-snap-align:start;background:#fff;border:1px solid var(--hs-line);border-radius:14px;overflow:hidden;box-shadow:var(--hs-shadow-sm);}
.hs-case-img{position:relative;aspect-ratio:4/3;min-height:150px;background:linear-gradient(135deg,#dfeae6,#cdded8);overflow:hidden;}
.hs-case-img img{width:100%;height:100%;object-fit:cover;display:block;}
.hs-case-tag{position:absolute;top:10px;left:10px;font-size:11.5px;font-weight:600;color:#fff;background:rgba(11,86,72,.82);padding:4px 10px;border-radius:999px;}
.hs-case-cap{font-size:13px;line-height:1.6;color:var(--hs-text);margin:0;padding:12px 14px 14px;}
.hs-carousel-arrow{
    position:absolute;top:calc(50% - 18px);transform:translateY(-50%);z-index:2;
    width:38px;height:38px;border-radius:50%;border:1px solid var(--hs-line);
    background:rgba(255,255,255,.96);color:var(--hs-primary-d);cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:var(--hs-shadow);transition:all .15s;
}
.hs-carousel-arrow:hover{background:var(--hs-primary);color:#fff;border-color:var(--hs-primary);}
.hs-carousel-arrow:disabled{opacity:0;pointer-events:none;}
.hs-carousel-prev{left:-6px;}
.hs-carousel-next{right:-6px;}
.hs-carousel-dots{display:flex;gap:7px;justify-content:center;margin-top:14px;}
.hs-carousel-dots button{width:7px;height:7px;border-radius:50%;border:0;background:var(--hs-line);cursor:pointer;padding:0;transition:all .2s;}
.hs-carousel-dots button.is-active{background:var(--hs-primary);width:20px;border-radius:999px;}
.hs-cases-cta{text-align:center;margin-top:20px;}
.hs-cases-cta .hs-btn-primary{max-width:300px;}
#hsGenerate i, #hsBookBtn i{margin-top:4px;}
@media (max-width:600px){
    .hs-case{flex:0 0 100%;}
    .hs-carousel-prev{left:2px;}
    .hs-carousel-next{right:2px;}
}