:root{color-scheme:light;--ink:#071c27;--soft:#24414f;--muted:#657883;--green:#06c755;--green-dark:#039b42;--mint:#dff9e9;--paper:#fff;--border:#dce6e9;--shadow:0 24px 70px rgba(7,28,39,.14);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",sans-serif}
*{box-sizing:border-box}html{min-width:320px;background:#cfe5e5}body{margin:0;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 38% 16%,#f6ffff 0,#d6eceb 38%,#bdd8dc 100%)}button,input{font:inherit}button{color:inherit}.app-shell{min-height:100vh;display:grid;grid-template-columns:minmax(260px,.78fr) minmax(430px,1.16fr) minmax(320px,.9fr)}
.brand-rail{background:var(--ink);color:#fff;padding:clamp(30px,4vw,66px);display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;position:relative;overflow:hidden}.brand-rail:after{content:"";position:absolute;width:260px;height:260px;border:70px solid rgba(6,199,85,.14);border-radius:50%;bottom:8%;right:-150px}.brand-lockup{display:flex;align-items:center;gap:14px;position:relative;z-index:1}.brand-mark,.avatar,.mini-avatar{display:grid;place-items:center;background:var(--green);color:#fff;font-weight:900}.brand-mark{width:46px;height:46px;border-radius:14px;box-shadow:0 8px 22px rgba(6,199,85,.25)}.overline{margin:0 0 5px;font-size:.72rem;font-weight:800;letter-spacing:.16em;color:#82a1ad}.brand-name{margin:0;font-size:1.12rem;font-weight:800}.rail-copy{margin-top:clamp(80px,15vh,150px);position:relative;z-index:1}.eyebrow{color:#6de59b;font-weight:800;font-size:.78rem;letter-spacing:.08em}.rail-copy h1{margin:16px 0 24px;font-size:clamp(2.3rem,4.1vw,4.8rem);line-height:1.04;letter-spacing:-.055em}.rail-copy>p:last-child{max-width:32rem;color:#bcd0d8;line-height:1.8;font-size:1rem}.rail-status{position:relative;z-index:1;display:flex;gap:12px;align-items:center;border-top:1px solid rgba(255,255,255,.12);padding-top:24px}.rail-status strong,.rail-status span{display:block}.rail-status strong{font-size:.78rem;letter-spacing:.08em}.rail-status span:last-child{margin-top:4px;color:#8eabb7;font-size:.78rem}.status-pulse{width:11px;height:11px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(6,199,85,.16)}
.phone-stage{display:grid;place-items:center;min-width:0;padding:34px}.line-app{width:min(100%,540px);height:calc(100vh - 68px);min-height:690px;max-height:880px;background:#edf4f5;border:1px solid rgba(7,28,39,.08);border-radius:34px;box-shadow:var(--shadow);display:grid;grid-template-rows:auto auto 1fr auto;overflow:hidden}.line-header{min-height:76px;padding:12px 16px;display:grid;grid-template-columns:42px 1fr 42px;gap:8px;align-items:center;background:rgba(255,255,255,.96);border-bottom:1px solid var(--border)}.icon-button,.panel-close,.dialog-close{border:0;background:transparent;cursor:pointer}.icon-button{font-size:2rem;line-height:1}.dots{font-size:1rem;letter-spacing:.08em}.account-title{display:flex;gap:11px;align-items:center;min-width:0}.avatar{width:42px;height:42px;border-radius:50%;flex:0 0 auto}.account-title strong,.account-title span{display:block}.account-title strong{font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-title span{font-size:.73rem;color:var(--muted);margin-top:3px}.account-title i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:4px}.notice-bar{display:flex;gap:8px;align-items:center;min-height:40px;padding:8px 18px;background:#fff8df;border-bottom:1px solid #f1e1a9;color:#65582f;font-size:.76rem;line-height:1.4}.chat-scroll{min-height:0;overflow:auto;padding:18px;scroll-behavior:smooth}.time-label{text-align:center;color:#85959c;font-size:.7rem;margin:0 0 18px}
.message-row{display:flex;align-items:flex-start;gap:9px;margin-bottom:14px}.message-row.user-message{justify-content:flex-end}.mini-avatar{width:32px;height:32px;flex:0 0 auto;border-radius:50%;font-size:.78rem}.bubble{max-width:330px;padding:13px 15px;border-radius:5px 17px 17px 17px;background:var(--paper);box-shadow:0 5px 18px rgba(7,28,39,.06);font-size:.9rem;line-height:1.55}.user-message .bubble{background:#9be4b5;border-radius:17px 5px 17px 17px}.bubble strong{font-size:.92rem}.bubble p{margin:5px 0 0;color:var(--soft)}.message-time{font-size:.65rem;color:#87979e;margin-top:4px;display:block}.user-message .message-time{text-align:right}
.account-card{margin:8px 0 18px 41px;background:var(--ink);color:#fff;border-radius:20px;padding:20px;box-shadow:0 16px 36px rgba(7,28,39,.18);position:relative;overflow:hidden}.account-card:after{content:"";position:absolute;width:120px;height:120px;border:30px solid rgba(6,199,85,.16);border-radius:50%;top:-50px;right:-42px}.account-card-top,.due-row{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}.account-card-top span,.due-row span{color:#9fb6c0;font-size:.76rem}.account-card-top strong{display:block;margin-top:4px;font-size:1.75rem;letter-spacing:-.035em}.account-card-top .pill{background:#ffefc7;color:#5d480e;padding:5px 9px;border-radius:999px;font-weight:800}.due-row{border-top:1px solid rgba(255,255,255,.12);margin-top:15px;padding-top:13px;font-size:.86rem}.primary-action{width:100%;border:0;border-radius:12px;padding:13px 16px;margin-top:17px;background:var(--green);color:#fff;font-weight:850;cursor:pointer;transition:.18s;position:relative;z-index:1}.primary-action:hover{transform:translateY(-1px);background:var(--green-dark)}.primary-action:disabled{cursor:not-allowed;opacity:.45;transform:none}.account-card>p{margin:10px 0 0;text-align:center;color:#8ea5af;font-size:.68rem;position:relative;z-index:1}
.service-block{background:#fff;border-radius:20px;padding:18px;margin-left:41px;border:1px solid #e1eaed}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:14px}.section-heading span,.section-heading strong{display:block}.section-heading span{font-size:.69rem;color:var(--muted)}.section-heading strong{font-size:.92rem;margin-top:3px}.sync-state{border:1px solid var(--border);border-radius:999px;padding:5px 8px;white-space:nowrap}.sync-state.ready{color:#087c39;border-color:#a8dfbc;background:#ecfff3}.sync-state.fallback{color:#7d6011;border-color:#efd88f;background:#fff9e6}.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.service-button{min-height:84px;border:1px solid var(--border);border-radius:14px;background:#fbfdfd;text-align:left;padding:11px;cursor:pointer;transition:.16s}.service-button:hover,.service-button:focus-visible{border-color:var(--green);background:#f1fff6;transform:translateY(-1px);outline:0}.service-button>span{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:7px;background:var(--mint);color:#08873d;font-size:.65rem;font-weight:900;margin-bottom:8px}.service-button strong,.service-button small{display:block}.service-button strong{font-size:.86rem}.service-button small{margin-top:3px;font-size:.68rem;color:var(--muted)}.service-wide{grid-column:1/-1;min-height:66px;display:grid;grid-template-columns:32px auto;grid-template-rows:auto auto;align-items:center;column-gap:7px}.service-wide>span{grid-row:1/3;margin:0}.line-tabs{background:#fff;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(3,1fr);padding:7px 8px max(7px,env(safe-area-inset-bottom))}.line-tabs button{border:0;background:transparent;color:#819198;font-size:.68rem;display:grid;gap:3px;place-items:center;cursor:pointer}.line-tabs button span{font-size:1.05rem}.line-tabs button.active{color:var(--green-dark);font-weight:800}
.detail-panel{background:rgba(255,255,255,.86);backdrop-filter:blur(18px);border-left:1px solid rgba(7,28,39,.09);padding:clamp(28px,3.5vw,56px);overflow:auto}.panel-header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--border);padding-bottom:22px}.panel-header h2{margin:3px 0 0;font-size:clamp(1.65rem,2.2vw,2.25rem);letter-spacing:-.04em}.panel-close{display:none;font-size:1.8rem}.panel-content{padding-top:28px}.welcome-panel{max-width:420px}.welcome-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;color:#087c39;background:var(--mint);font-size:1.5rem;font-weight:800}.welcome-panel h3{margin:22px 0 10px;font-size:1.25rem}.welcome-panel>p,.security-note p{color:var(--muted);line-height:1.72}.security-note{margin-top:28px;padding:18px;border:1px solid var(--border);background:rgba(255,255,255,.7);border-radius:16px}.security-note p{margin:7px 0 0;font-size:.88rem}.detail-section{animation:panelIn .25s ease both}.detail-lead{margin:0 0 22px;color:var(--muted);line-height:1.7}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat-card,.invoice-card,.support-card,.step-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px}.stat-card span,.stat-card strong{display:block}.stat-card span{font-size:.75rem;color:var(--muted)}.stat-card strong{margin-top:7px;font-size:1.12rem}.progress-wrap{margin-top:18px;background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px}.progress-label{display:flex;justify-content:space-between;font-size:.82rem;margin-bottom:10px}.progress-track{height:10px;border-radius:99px;background:#e6eef0;overflow:hidden}.progress-bar{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green),#4be18a)}.progress-wrap>p{color:var(--muted);font-size:.78rem;line-height:1.6;margin:11px 0 0}.panel-action{border:0;border-radius:13px;background:var(--ink);color:#fff;padding:13px 17px;font-weight:800;cursor:pointer;width:100%;margin-top:16px}
.step-list,.invoice-list,.support-list{display:grid;gap:10px}.step-card{display:grid;grid-template-columns:34px 1fr;gap:11px;align-items:start}.step-number{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--mint);color:#087c39;font-weight:900;font-size:.78rem}.step-card strong{font-size:.9rem}.step-card p{margin:4px 0 0;color:var(--muted);font-size:.8rem;line-height:1.55}.field{display:grid;gap:7px;margin-top:14px}.field span{color:var(--soft);font-size:.78rem;font-weight:700}.field input{width:100%;border:1px solid #cddadd;background:#fff;border-radius:12px;padding:12px 13px;font-size:.9rem;outline:0}.field input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(6,199,85,.12)}.faq-list{display:grid;gap:9px}.faq-item{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden}.faq-item button{width:100%;border:0;background:transparent;padding:15px;display:flex;justify-content:space-between;gap:12px;text-align:left;font-weight:780;cursor:pointer}.faq-answer{display:none;padding:0 15px 15px;color:var(--muted);font-size:.84rem;line-height:1.68}.faq-item.open .faq-answer{display:block}.invoice-card,.support-card{display:flex;align-items:center;justify-content:space-between;gap:12px}.invoice-card span,.invoice-card strong,.support-card span,.support-card strong{display:block}.invoice-card span,.support-card span{color:var(--muted);font-size:.73rem;margin-top:4px}.tag-paid{color:#087c39!important;background:var(--mint);border-radius:99px;padding:5px 8px;font-size:.7rem!important;font-weight:850}.support-card button{border:1px solid var(--border);background:#f7fbfb;border-radius:10px;padding:9px 11px;cursor:pointer;font-weight:750}
.payment-dialog{border:0;border-radius:24px;width:min(92vw,430px);padding:0;box-shadow:0 30px 90px rgba(0,0,0,.28)}.payment-dialog::backdrop{background:rgba(4,20,28,.68);backdrop-filter:blur(4px)}.payment-dialog form{padding:30px;position:relative}.dialog-close{position:absolute;top:15px;right:16px;font-size:1.55rem}.dialog-kicker{color:#087c39;font-size:.67rem;letter-spacing:.12em;font-weight:900}.payment-dialog h2{margin:8px 0 22px;font-size:1.55rem}.payment-amount{background:var(--ink);color:#fff;border-radius:17px;padding:19px}.payment-amount span,.payment-amount strong{display:block}.payment-amount span{color:#9fb5bf;font-size:.75rem}.payment-amount strong{margin-top:5px;font-size:1.75rem}.payment-summary{padding:14px 0;border-bottom:1px solid var(--border)}.payment-summary p{display:flex;justify-content:space-between;gap:14px;margin:8px 0;font-size:.83rem}.payment-summary span{color:var(--muted)}.demo-check{display:flex;align-items:flex-start;gap:8px;margin-top:16px;font-size:.78rem;line-height:1.5;color:var(--soft)}.demo-check input{margin-top:3px;accent-color:var(--green)}.dialog-footnote{color:var(--muted);font-size:.7rem;text-align:center;line-height:1.5}.toast{position:fixed;z-index:50;left:50%;bottom:24px;transform:translate(-50%,18px);background:var(--ink);color:#fff;padding:11px 16px;border-radius:999px;font-size:.8rem;box-shadow:0 14px 35px rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:.22s}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes panelIn{from{opacity:0;transform:translateY(8px)}}
@media(max-width:1120px){.app-shell{grid-template-columns:250px minmax(420px,1fr)}.detail-panel{position:fixed;z-index:20;right:0;top:0;width:min(430px,92vw);height:100vh;box-shadow:-22px 0 65px rgba(7,28,39,.2);transform:translateX(105%);transition:transform .25s}.detail-panel.open{transform:translateX(0)}.panel-close{display:block}}
@media(max-width:760px){body{background:#edf4f5}.app-shell{display:block}.brand-rail{display:none}.phone-stage{padding:0;display:block}.line-app{width:100%;height:100dvh;min-height:620px;max-height:none;border:0;border-radius:0}.chat-scroll{padding:15px}.account-card,.service-block{margin-left:39px}.detail-panel{top:auto;bottom:0;width:100%;height:min(78vh,720px);border-radius:24px 24px 0 0;transform:translateY(105%);border-left:0;padding:26px 22px}.detail-panel.open{transform:translateY(0)}}
@media(max-width:420px){.account-card,.service-block{margin-left:0}.service-button{min-height:80px}.bubble{max-width:280px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}