/* ── Card ── */
    .card-panel {
      background: #fff;
      border-radius: 16px;
      padding: 30px 35px 35px;
      max-width: 520px;
      width: 100%;
      border:1px solid #e3ddeb;
    }
    .card-panel h2 {
      font-size: 26px;
      font-weight: 700;
      color: #623d90;
      margin: 0 0 14px;
      letter-spacing: .01em;
    }
    .desc-text {
      font-size: 16px;
      color: #4e4e4e;
      line-height: 1.7;
      margin-bottom: 6px;
    }
    .hint-text {
      font-size: 14px;
      color: #aab4be;
      margin: 0;
    }
    .divider {
      border: none;
      border-top: 1px solid #e8eaed;
      margin: 22px 0 26px;
    }

    /* ── Toggle ── */
    .toggle-row {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .toggle-label {
      font-size: 17px;
      font-weight: 500;
      color: #1e2a3a;
      user-select: none;
      cursor: pointer;
    }
    .switch {
      position: relative;
      display: inline-block;
      width: 54px;
      height: 30px;
      cursor: pointer;
      flex-shrink: 0;
    }
    .switch input { opacity: 0; width: 0; height: 0; }
    .slider-pwd {
      position: absolute;
      inset: 0;
      background: #d0d5dc;
      border-radius: 30px;
      transition: background .25s;
    }
    .slider-pwd::before {
      content: '';
      position: absolute;
      width: 22px; height: 22px;
      left: 4px; bottom: 4px;
      background: #fff;
      border-radius: 50%;
      transition: transform .25s;
      box-shadow: 0 1px 4px rgba(0,0,0,.18);
    }
    .switch input:checked + .slider-pwd { background: #34c759; }
    .switch input:checked + .slider-pwd::before { transform: translateX(24px); }

    /* ── Password section (shared wrapper) ── */
    .password-section {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      margin-top: 0;
      transition: max-height .4s cubic-bezier(.4,0,.2,1),
                  opacity .35s ease,
                  margin-top .35s ease;
    }
    .password-section.visible {
      max-height: 400px;
      opacity: 1;
      margin-top: 26px;
    }

    /* Label row with eye icon */
    .pwd-label-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
    }
    .pwd-label-row label {
      font-size: 16px;
      font-weight: 700;
      color: #1e2a3a;
      margin: 0;
    }
    .icon-btn {
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      color: #3a4a5c;
      font-size: 20px;
      line-height: 1;
      transition: color .2s;
    }
    .icon-btn:hover { color: #1e2a3a; }

    /* ── STATE 2: editable input ── */
    .pwd-input-wrap { 
      position: relative; 
      margin-top:30px;
    }

    /* input + edit icon side-by-side */
    .input-with-action {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .input-with-action .form-control {
      flex: 1;
      height: 52px;
      border-radius: 10px;
      border: 1.5px solid #dddddd;
      font-size: 20px;
      letter-spacing: 4px;
      padding: 10px 16px;
      color: #482d91;
      box-shadow: none;
      transition: border-color .2s, box-shadow .2s;
    }
    .input-with-action .form-control:focus {
      border-color:#dddddd;
      outline: none;
    }
    /* edit icon shown in saved state */
    .btn-edit-inline {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      background: none;
      border: none;
      cursor: pointer;
      color: #3a4a5c;
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      transition: color .2s, background .2s;
      /* hidden by default in editing mode */
    }
    .btn-edit-inline:hover {
      color: #1e2a3a;
      background: #f0f2f5;
    }

    /* readonly / saved input style */
    .form-control.saved-look {
      border-color: #d0d5dc !important;
      background: #f7f8fa;
      color: #7a8a9a;
      cursor: default;
      box-shadow: none !important;
    }

    .pwd-hint {
      font-size: 13px;
      color: #aab4be;
      margin: 7px 0 0;
    }

    /* ── Save Button ── */
    .btn-save {
      display: block;
      width: 220px;
      height: 50px;
      background: #6C3CA5;
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 16px;
      font-weight: 600;
      font-family: inherit;
      letter-spacing: .03em;
      cursor: pointer;
      margin-top: 22px;
      transition: background .2s, transform .1s;
    }
    .btn-save:hover { background: #6C3CA5; }
    .btn-save:active { transform: scale(.98); }

    /* error */
    .has-error .form-control {
      border-color: #e74c3c !important;
      box-shadow: 0 0 0 3px rgba(231,76,60,.15) !important;
    }
    .error-msg {
      font-size: 13px;
      color: #e74c3c;
      margin-top: 6px;
    }
    .has-error .error-msg { display: block; }

    /* ── Toast ── */
    .toast-wrap {
      position: fixed;
      top: 28px; left: 50%;
      transform: translateX(-50%) translateY(-20px);
      opacity: 0;
      transition: opacity .3s ease, transform .3s ease;
      z-index: 9999;
      pointer-events: none;
    }
    .toast-wrap.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    .toast-box {
      background: #6C3CA5;;
      color: #fff;
      padding: 12px 22px;
      border-radius: 10px;
      font-size: 14px;
      font-family: inherit;
      display: flex;
      align-items: center;
      gap: 9px;
      white-space: nowrap;
      box-shadow: 0 4px 16px rgba(0,0,0,.18);
    }
    .toast-box .fa { font-size: 16px; color: #fff; }

    /* ── Card ── */
    .card-panel {
      background: #fff;
      border-radius: 16px;
      padding: 36px 40px 40px;
      max-width: 500px;
      width: 100%;
    }

    .card-panel h2 {
      font-size: 26px;
      font-weight: 700;
      color: #1e2a3a;
      margin: 0 0 16px;
    }

    .desc-text {
      font-size: 14px;
      color: #3a4a5c;
      line-height: 1.75;
      margin-bottom: 12px;
    }
    .desc-text a {
      color: #7b2fbe;
      text-decoration: none;
      word-break: break-all;
    }
    .desc-text a:hover { text-decoration: underline; }

    .notes {
      font-size: 13px;
      color: #7a8a9a;
      line-height: 1.8;
      margin-bottom: 0;
    }

    .divider {
      border: none;
      border-top: 1px solid #e8eaed;
      margin: 22px 0 24px;
    }

    /* ── State: default (未設定) ── */
    .account-row {
      font-size: 16px;
      font-weight: 500;
      color: #1e2a3a;
      margin-bottom: 22px;
    }
    .account-row .account-val {
      color: #aab4be;
      font-weight: 400;
    }
    .account-row .account-val.is-set {
      color: #1e2a3a;
      font-weight: 600;
    }

    /* ── Primary button (purple) ── */
    .btn-primary-custom {
      display: inline-block;
      height: 48px;
      padding: 0 32px;
      background: #7b2fbe;
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 16px;
      font-weight: 600;
      font-family: inherit;
      letter-spacing: .03em;
      cursor: pointer;
      transition: background .2s, transform .1s;
      vertical-align: middle;
    }
    .btn-primary-custom:hover { background: #6a26a8; }
    .btn-primary-custom:active { transform: scale(.98); }

    /* ── Edit form (hidden by default) ── */
    .edit-section {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      margin-top: 0;
      transition: max-height .4s cubic-bezier(.4,0,.2,1),
                  opacity .35s ease,
                  margin-top .35s ease;
    }
    .edit-section.visible {
      max-height: 300px;
      opacity: 1;
      margin-top: 0;
    }

    .field-label {
      font-size: 16px;
      font-weight: 700;
      color: #1e2a3a;
      margin-bottom: 10px;
      display: block;
      margin-top:40px;
    }

    .form-control-custom {
      width: 100%;
      height: 48px;
      border-radius: 8px;
      border: 1.5px solid #c0c8d4;
      font-size: 15px;
      padding: 0 14px;
      color: #1e2a3a;
      font-family: inherit;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
      background: #fff;
    }
    .form-control-custom::placeholder { color: #c0c8d4; }
    .form-control-custom:focus {
      border-color: #7b2fbe;
      box-shadow: 0 0 0 3px rgba(123,47,190,.15);
    }
    .has-error .form-control-custom {
      border-color: #e74c3c;
      box-shadow: 0 0 0 3px rgba(231,76,60,.13);
    }

    .field-hint {
      font-size: 13px;
      color: #aab4be;
      margin: 7px 0 0;
    }
    .error-msg {
      font-size: 13px;
      color: #e74c3c;
      margin-top: 6px;
      display: none;
    }
    .has-error .error-msg { display: block; }
    .has-error .field-hint { display: none; }

    .btn-save {
      display: inline-block;
      height: 48px;
      padding: 0 36px;
      background: #1e2a3a;
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 16px;
      font-weight: 600;
      font-family: inherit;
      letter-spacing: .03em;
      cursor: pointer;
      margin-top: 20px;
      transition: background .2s, transform .1s;
    }
    .btn-save:hover { background: #2d3e52; }
    .btn-save:active { transform: scale(.98); }

    /* ── Toast ── */
    .toast-wrap {
      position: fixed;
      top: 28px; left: 50%;
      transform: translateX(-50%) translateY(-20px);
      opacity: 0;
      transition: opacity .3s ease, transform .3s ease;
      z-index: 9999;
      pointer-events: none;
    }
    .toast-wrap.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    .toast-box {
      background: #1e2a3a;
      color: #fff;
      padding: 12px 22px;
      border-radius: 10px;
      font-size: 14px;
      font-family: inherit;
      display: flex;
      align-items: center;
      gap: 9px;
      white-space: nowrap;
      box-shadow: 0 4px 16px rgba(0,0,0,.18);
    }
    .toast-box .fa { font-size: 16px; color: #34c759; }


    /* ── Account display row  ── */
    .account-display {
      font-size: 15px;
      color: #1e2a3a;
      font-weight: 500;
      margin-bottom: 20px;
    }
    .account-display .val-set {
      color: #1e2a3a;
      font-weight: 600;
    }

    /* ── Purple button ── */
    .btn-purple {
      height: 46px;
      padding: 0 28px;
      background: #7b2fbe;
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 600;
      font-family: inherit;
      cursor: default;
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    /* ── Divider between two states ── */
    .states-divider {
      border: none;
      border-top: 2px dashed #e8eaed;
      margin: 32px 0;
      position: relative;
    }
    .states-divider::after {
      content: '編輯狀態';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      padding: 0 12px;
      font-size: 12px;
      color: #aab4be;
      font-weight: 500;
      letter-spacing: .05em;
      white-space: nowrap;
    }

    /* ── Field label ── */
    .field-label {
      font-size: 15px;
      font-weight: 700;
      color: #1e2a3a;
      display: block;
      margin-bottom: 10px;
    }

    /* ── Input ── */
    .input-custom {
      width: 100%;
      height: 48px;
      border-radius: 8px;
      border: 1.5px solid #dddddd;
      font-size: 14px;
      padding: 0 14px;
      color: #1e2a3a;
      font-family: inherit;
      background: #fff;
      outline: none;
    }
    .input-custom::placeholder { color: #c0c8d4; }

    .field-hint {
      font-size: 13px;
      color: #aab4be;
      margin: 7px 0 0;
    }

    /* ── Dark save button ── */
    .btn-dark {
      height: 46px;
      padding: 0 32px;
      background: #1e2a3a;
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 600;
      font-family: inherit;
      cursor: default;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 20px;
    }