#lineAccountSettings{margin-top:20px;border-top:1px solid #eadeda;padding-top:18px;display:grid;gap:12px}
#lineAccountSettings .hkc-line-title{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
#lineAccountState{font-size:13px;color:#7c6668;background:#fbf4f2;padding:5px 10px;border-radius:20px}
#lineAccountSettings .hkc-line-desc{margin:0;color:#6e6663;font-size:14px;line-height:1.6}
#lineAccountSettings .hkc-line-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
#lineAccountSettings .hkc-line-actions a{font-size:13px;color:#8e3d50;text-decoration:underline}
#lineAccountSettings .hkc-line-prefs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px;background:#f9f5f4;border-radius:12px}
#lineAccountSettings .hkc-line-prefs label{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.45;cursor:pointer}
#lineAccountSettings .hkc-line-prefs input{width:17px;height:17px;accent-color:#9c4152;flex:none}
#lineAccountSettings .hkc-line-feedback{color:#705c60;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
@media(max-width:480px){#lineAccountSettings .hkc-line-prefs{grid-template-columns:1fr}}

/* Ensure the HTML hidden state wins over grid/flex layouts. */
#lineAccountSettings [hidden]{display:none!important}
#lineAccountSettings .hkc-line-prefs{border:1px solid #eee2df;gap:10px}
#lineAccountSettings .hkc-line-prefs label{padding:9px 10px;border-radius:9px;background:#fff;min-height:44px}
#lineAccountSettings .hkc-line-prefs label:focus-within{outline:2px solid #9c4152;outline-offset:2px}
#lineAccountSettings #lineSavePreferences{justify-self:start;min-height:40px}
@media(max-width:480px){#lineAccountSettings .hkc-line-prefs{grid-template-columns:1fr;gap:8px}#lineAccountSettings .hkc-line-title{align-items:flex-start}#lineAccountSettings .hkc-line-actions{gap:10px}}

/* LINE friendship state: customer-facing, responsive */
#lineAccountSettings .hkc-line-friend{padding:12px 14px;border-radius:12px;font-size:14px;line-height:1.6;border:1px solid #e9dcd9;background:#faf7f6;color:#67545a}
#lineAccountSettings .hkc-line-friend.friend{background:#edf9f0;border-color:#bde8c7;color:#226c37}
#lineAccountSettings .hkc-line-friend.not_friend{background:#fff7e9;border-color:#f1d8a4;color:#855a1e}
#lineAccountSettings #lineCheckFriend{justify-self:start;min-height:40px}
@media(max-width:480px){#lineAccountSettings #lineCheckFriend{width:100%;justify-self:stretch}}

/* Guided LINE setup: clear mobile-first actions */
#lineAccountSettings .hkc-line-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#lineAccountSettings #lineBind,#lineAccountSettings .hkc-line-actions>a{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:10px;padding:10px 12px;text-align:center;font-weight:700;text-decoration:none}
#lineAccountSettings .hkc-line-actions>a{border:1px solid #17a45b;background:#f0faf4;color:#167944;font-size:13px}
@media(max-width:560px){#lineAccountSettings .hkc-line-actions{grid-template-columns:1fr}#lineAccountSettings #lineBind,#lineAccountSettings .hkc-line-actions>a{width:100%}}