*{box-sizing:border-box}body{margin:0;background:#fff;color:#222;font-family:Arial,'Microsoft JhengHei',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #f76200;outline-offset:4px}.profile{width:min(760px,100%);margin:0 auto;padding:34px 30px 20px}.back{font-size:12px;color:#777}.profile-heading{display:flex;align-items:center;gap:24px;margin:40px 0 30px}.avatar{background:#f76200;color:#fff;width:82px;height:82px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:25px;font-weight:900;letter-spacing:-2px;flex-shrink:0}.avatar span{font-size:13px;letter-spacing:3px}.eyebrow{font-size:9px;letter-spacing:1.5px;color:#f76200;margin:0 0 9px}h1{font-size:27px;letter-spacing:2px;margin:0}.profile-subtitle{color:#888;font-size:12px;margin:9px 0 0}.introduction h2{font-size:18px;font-weight:600;line-height:1.6}.introduction>p{font-size:14px;line-height:1.9;color:#666}.demo-label{display:inline-block;color:#777;background:#f5f5f5;font-size:10px;padding:5px 8px}.profile-actions{display:flex;gap:12px;margin-top:22px}.profile-actions button,.profile-actions a{background:white;border:1px solid #ddd;padding:12px 20px;font-size:13px;border-radius:3px}.profile-actions button:hover,.profile-actions a:hover{border-color:#f76200;color:#f76200}.information{margin-top:46px}.information h2{font-size:17px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee;padding-bottom:17px}.information h2 span{font-size:9px;color:#999;letter-spacing:1px;font-weight:400}dl{margin:0}dl>div{display:grid;grid-template-columns:85px 1fr;gap:16px;margin:19px 0;font-size:14px;line-height:1.7}dt{color:#888;font-size:12px}dd{margin:0;overflow-wrap:anywhere}dd a{color:#d95000}.profile-art{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;height:180px;padding:30px 40px;margin-top:28px;border:1px solid #f7620020;background:#fff url('/assets/perspective-grid.svg') center bottom/100% 100% no-repeat;color:#f76200}.profile-art span{font-size:25px;line-height:1.6;font-weight:700}.profile-art b{font-size:100px;line-height:1;font-weight:400}.chat-primary{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#06c755;color:white;border:0;border-radius:4px;padding:17px;margin-top:16px;font-weight:700;font-size:16px}.chat-primary:hover{background:#05ad4a}.chat-icon{background:white;color:#06c755;border-radius:50%;width:22px;height:19px;line-height:12px;font-size:22px}.demo-note{font-size:11px;color:#888;line-height:1.6;text-align:center;margin:13px 0}footer{font-size:10px;color:#aaa;text-align:center;padding-top:18px}dialog{width:min(440px,calc(100vw - 32px));padding:35px;border:1px solid #eee;border-top:5px solid #f76200;color:#222}dialog::backdrop{background:#0006}dialog h2{font-size:24px;line-height:1.4}dialog>p:not(.eyebrow){font-size:14px;line-height:1.9;color:#777}.dialog-close{position:absolute;right:12px;top:10px;background:none;border:0;font-size:26px;color:#777}.email-action{display:block;background:#f76200;color:white;padding:15px;text-align:center;font-size:14px;margin-top:22px}@media(max-width:480px){.profile{padding:24px 22px}.profile-heading{gap:16px;margin-top:30px}.avatar{width:66px;height:66px;font-size:22px}h1{font-size:24px}.eyebrow{font-size:7px;letter-spacing:.8px}.information{margin-top:34px}dl>div{grid-template-columns:64px 1fr;gap:12px}.profile-art{padding:25px;height:150px}.profile-art span{font-size:22px}.profile-art b{font-size:75px}}

/* Live LINE contact details and independently scannable QR artwork. */
.line-qr-section{display:grid;grid-template-columns:1fr 232px;align-items:center;gap:30px;margin:36px 0;padding:28px;border:1px solid #e5e5e5;background:#fff;border-radius:8px}
.line-qr-section h2{font-size:20px;line-height:1.7;margin:0 0 12px}
.line-qr-section p:not(.eyebrow){font-size:13px;line-height:1.9;color:#666}
.line-account-id{display:inline-block;color:#07883d;font-weight:700;font-size:15px;margin-top:6px}
.line-qr-image{display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff}
.line-qr-image img{display:block;width:232px;max-width:100%;height:auto}
.line-qr-image span{font-size:12px;color:#555}
@media(max-width:600px){.line-qr-section{grid-template-columns:1fr;gap:16px;padding:22px;text-align:center}.line-qr-image{justify-self:center;width:232px;max-width:100%}.profile-actions{flex-wrap:wrap}}

/* LINE profile layout: a white content sheet on the brand-orange canvas. */
body{background:#f76200}
.profile{min-height:100vh;background:#fff;box-shadow:0 0 0 1px #e9e9e9}

/* Use the real monochrome site mark and move the QR code into the header. */
.profile-heading{align-items:flex-start}
.avatar{background:#fff;color:#111;border:1px solid #e5e5e5;overflow:hidden}
.avatar img{display:block;width:100%;height:100%;object-fit:cover}
.profile-identity{align-self:center;min-width:0}
.profile-qr{display:flex;flex-direction:column;align-items:center;gap:7px;width:154px;margin-left:auto;flex:0 0 auto;background:#fff;color:#555}
.profile-qr img{display:block;width:100%;height:auto}
.profile-qr span{font-size:10px;letter-spacing:.06em;color:#666}

/* This page keeps the shared footer content but removes its orange panel. */
.profile footer.studio-footer{background:#fff;color:#222;border-top:1px solid #e5e5e5}
.profile .footer-brand-name,.profile .footer-identity>p,.profile .footer-copyright,.profile .footer-sitemap h2,.profile .footer-sitemap a,.profile .footer-logo-reveal{color:#222}
.profile .footer-sitemap h2{border-bottom-color:#2223}
.profile .studio-footer a:focus-visible{outline-color:#f76200}

@media(max-width:600px){
  body{background:#fff}
  .profile{box-shadow:none}
  .profile-heading{align-items:flex-start;flex-wrap:wrap}
  .profile-qr{width:118px}
}
