/* 全局設定 */
        body {
            font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
            background-color: var(--smse-bgColor);
            color: var(--smse-textColor);
            margin: 0;
            padding: 20px;
        }

        /* 標題 */
        h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        /* 表單容器 */
        form {
            max-width: 800px;
            margin: 0 auto;
            padding: 80px;
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }


        /* 輸入框 */
        form input[type="text"],
        form input[type="email"],
        form input[type="password"],
        form input[type="url"] {
            
            padding: 10px 12px;
            margin-top: 6px;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s, box-shadow 0.3s;
        }

        /* 輸入框 focus 效果 */
        form input:focus {
            outline: none;
            border-color: #5583a2;
            box-shadow: 0 0 6px rgba(52, 152, 219, 0.3);
        }

        /* 提交按鈕 */
        form button {
            display: block;
            width: 100%;
            padding: 12px;
            margin-top: 3em;
            font-size: 16px;
            font-weight: 600;
            color: #fff;
 
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.3s;
            background: #dedede;
            cursor: not-allowed;
        }

        /* 提示訊息 */
        #resultMessage {
            text-align: center;
            margin-top: 20px;
            font-weight: 500;
            color: #27ae60;
        }
        #lookupMessage{
            text-align: center;
            margin-top: 20px;
            font-weight: 500;
            color: #d70000;
        }
        #part-1{
            transform: translateY(-50%);
            top: 50%;
            position: absolute;
            width: 100%;
            opacity: 1;
            transition: .3s;
            left: 0px;
        }

        .container-icon{
            position: fixed;
            top: 0px;
            left: 7%;
            height: 100%;
            z-index: -1;
        }
        .guide_box{
            margin: 20px auto;
            text-align: center;
        }
        .guide_msg{
            color: #EF3E5C;
        }
        .msg{
            margin: 10px auto;
            text-align: center;
            color: rgb(255, 255, 255);
            width: fit-content;
            padding: 10px;
        }
        .enable{
           background: #5583a2;
           cursor: pointer;
        }
        .enable:hover {
            background: #2980b9;
        }
.field-hint{
  color: red;
  font-size: 0.9em;
}


.verify-btn{
    border-radius: 12px;
    background: #83daa0;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    color: rgba(0, 0, 0, .55);
    font-size: 16px;
    flex: 0 0 auto;
    padding: 14px 20px;
    margin-top: 6px;
    width: unset;
    box-shadow: 2px 2px 4px gray;
}

.verify-btn.ghost{
  background:transparent;
}

.verify-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}


.field-hint.small{
  font-size:12px;
  opacity:.85;
}
.field.float{
  position: relative;
  /* margin: 14px 0; */
      /* display: flex;
    gap: 10px; */
}
/* ✅ 內層 row 才用 flex */
.field.float .field-row{
  display:flex;
  gap:10px;
  align-items:stretch;
}
.field-wrap{ margin: 14px 0; }       /* 統一每欄間距 */
.field.float .field-row input{
  flex: 1;
  width: auto; /* 取代你原本 input width:100% 的效果，避免把 suffix 擠出去 */
}
.field-wrap .field-hint{
  margin-top: 8px;
  color: #d40000;
  font-size: 0.9em;
  line-height: 1.4;
  min-height: 1.2em; /* 建議：預留高度，避免出現/消失時抖動 */
}
/* input 基本 */
.field.float input{
  width: 100%;
  padding: 18px 12px 10px;     /* 上面留空間給 label */
  font-size: 16px;
  border: 1px solid #cfd6e4;
  border-radius: 10px;
  outline: none;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.field.float input:focus{
  border-color: #3A7BD5;
  box-shadow: 0 0 0 3px rgba(58,123,213,.15);
}

/* 浮動 label */
.field.float .field-label{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-30%);
  padding: 0 6px;
  font-size: 14px;
  color: rgba(0,0,0,.55);
  pointer-events: none;
  background: transparent;
  transition: all .15s ease;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.field.float .field-label .req{
  color: #d40000;
  font-weight: 700;
}

/* 空值：label 在 input 內 */
.field.float input:placeholder-shown ~ .field-label{
  top: 50%;
  transform: translateY(-30%);
  font-size: 14px;
  background: transparent;
}

.field.float input:focus ~ .field-label,
.field.float input:not(:placeholder-shown) ~ .field-label{
  top: 0%;
  transform: translateY(-30%);
  font-size: 12px;
  color: #3A7BD5;
  background: #fff;
}

/* 密碼提示放在欄位底下 */
.field.float.pwd .field-hint{
  margin-top: 8px;
}



.domain-suffix{
  flex: 0 0 auto;
  padding: 18px 12px 10px;
  margin-top: 6px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  background: #f6f7f9;
  color: rgba(0,0,0,.55);
  white-space: nowrap;
  pointer-events: none;
}



/* 讓 suffix 看起來像一顆固定的小膠囊 */
.domain-row .domain-suffix{
  background: #f6f7f9;
  color: #555;
      width: 30%;
}


.pwd-wrap{ display: block; }
.pwd-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.pwd-row input{ flex:1; }
#pwd-hint{ margin-top:6px; }

#accountPassword{
    flex: 1;
}
.pwd-eye{
    flex: 0 0 56px;     /* ✅ 固定寬，不要用 10% */
    padding: 12px 25px;
    margin-top: 6px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    background: #f6f7f9;
    cursor: pointer;
}
.PSContainer{
    display: flex;
    gap: 10px;
}
#PS{
        flex: 1;
}
#togglePS{
    padding: 10px 12px;
    margin-top: 6px;
    width: 20%;
    cursor: pointer;
}
/* 手機驗證方式選擇框 */
.pv-overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 2147483647;
}
.pv-modal{
  width:min(460px, 92vw);
  background:#fff;
  border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
  padding:18px;
}
.pv-title{
  font-size:16px;
  font-weight:900;
  color:#1b2b3a;
}
.pv-sub{
  margin-top:6px;
  font-size:13px;
  color:#5b6b7a;
  line-height:1.5;
}
.pv-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:14px;
}
.pv-btn{
  border:1px solid #cfd6e4;
  border-radius:14px;
  background:#fff;
  padding:14px 14px;
  text-align:left;
  cursor:pointer;
}
.pv-btn strong{
  display:block;
  font-size:15px;
  font-weight:900;
  color:#0b5fff;
}
.pv-btn small{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:#607083;
  line-height:1.4;
}
.pv-btn.primary{
  border-color:#0b5fff;
}
.pv-foot{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}
.pv-cancel{
  border:0;
  background:transparent;
  cursor:pointer;
  font-weight:800;
  color:#7a8797;
}

@media only screen and (orientation: portrait) and (max-width: 500px) {
    form {
        padding: 60px 10px;
    }
    body{
        padding: 0px;
    }
}