:root{--tk-bg:#f4f6f8;--tk-panel:#fff;--tk-text:#202124;--tk-muted:#6b7280;--tk-line:#e7e9ed;--tk-accent:#f28c28;--tk-accent-soft:#fff2e2;--tk-danger:#dc3545;--tk-shadow:0 5px 20px #33415512}
html[data-theme="night"]{--tk-bg:#101214;--tk-panel:#1b1e22;--tk-text:#f3f4f6;--tk-muted:#9ca3af;--tk-line:#30343a;--tk-accent:#f59e42;--tk-accent-soft:#3a2a18;--tk-shadow:none;color-scheme:dark}
html[data-theme="pomelo"]{--tk-bg:#fff8ef;--tk-panel:#fff;--tk-text:#3d2818;--tk-muted:#806b5a;--tk-line:#f1dfce;--tk-accent:#ed7b20;--tk-accent-soft:#ffedd8}
html,body{min-height:100%;background:var(--tk-bg)!important;color:var(--tk-text)!important;font-family:system-ui,"Microsoft JhengHei",sans-serif!important}
body{margin:0!important;font-size:16px;line-height:1.45}
.wrap,.page{width:min(100%,760px)!important;max-width:760px!important;margin:0 auto!important;padding:78px 16px 28px!important}
body.page-admin .wrap{width:min(100%,1180px)!important;max-width:1180px!important}
.top,.head{position:fixed!important;z-index:50;top:0;left:50%;transform:translateX(-50%);width:min(100%,760px)!important;height:64px!important;padding:0 14px!important;display:grid!important;grid-template-columns:minmax(48px,1fr) auto minmax(48px,1fr);align-items:center;background:color-mix(in srgb,var(--tk-panel) 94%,transparent)!important;border-bottom:1px solid var(--tk-line)!important;backdrop-filter:blur(14px)}
body.page-admin .top{width:min(100%,1180px)!important}
.top h1,.head h1{font-size:18px!important;text-align:center!important;margin:0!important;white-space:nowrap}.top>:last-child,.head>:last-child{justify-self:end}.top>:first-child,.head>:first-child{justify-self:start}
.back,.head button,.profileBack,.profileGear,.gear{border:0!important;background:transparent!important;color:var(--tk-text)!important;font-size:16px!important;font-weight:700!important;border-radius:12px!important;min-height:42px;padding:9px 11px!important}
.profileBack,.profileGear{position:fixed!important;z-index:55!important;top:11px!important}.profileBack{left:max(12px,calc(50% - 368px))!important}.profileGear{right:max(12px,calc(50% - 368px))!important}
body.page-profile:before{content:"我的資料";position:fixed;z-index:51;top:0;left:50%;transform:translateX(-50%);width:min(100%,760px);height:64px;display:grid;place-items:center;background:color-mix(in srgb,var(--tk-panel) 94%,transparent);border-bottom:1px solid var(--tk-line);font-size:18px;font-weight:800;backdrop-filter:blur(14px)}
.card,.section,.members,.bar,.panel.on,.panel.card{background:var(--tk-panel)!important;color:var(--tk-text)!important;border:1px solid var(--tk-line)!important;border-radius:18px!important;box-shadow:var(--tk-shadow)!important;margin:0 0 14px!important;padding:20px!important}
.bar{display:flex!important}.section{padding:0!important;overflow:hidden}.members{padding:20px!important}
.row{min-height:58px!important;padding:14px 2px!important;border-color:var(--tk-line)!important}.section .row{padding:15px 18px!important}.muted,.hint,.value,small{color:var(--tk-muted)!important}
button,input,select,textarea{font:inherit}input,select,textarea{background:var(--tk-panel)!important;color:var(--tk-text)!important;border:1px solid #cfd4dc!important;border-radius:11px!important;min-height:44px;padding:10px 12px!important}html[data-theme="night"] input,html[data-theme="night"] select,html[data-theme="night"] textarea{border-color:#40454d!important}
button{cursor:pointer}.green,.primary,.save,.privateSave{background:var(--tk-accent)!important;color:#fff!important;border:0!important;border-radius:11px!important}.danger,.logout{background:var(--tk-danger)!important;color:#fff!important;border:0!important;border-radius:11px!important}.switch.on{background:var(--tk-accent)!important}
.tabs{background:var(--tk-panel)!important;border:1px solid var(--tk-line)!important;border-radius:14px!important;padding:5px!important;box-shadow:var(--tk-shadow)!important}.tabs button.on{background:var(--tk-accent)!important;color:#fff!important;border-radius:10px!important}
table{background:var(--tk-panel)!important;color:var(--tk-text)!important}th,td{border-color:var(--tk-line)!important}.toast{z-index:100001!important}

/* Login, modal sheets and secondary views share the same visual language. */
body.page-login{display:grid!important;place-items:center!important;padding:20px!important;background:radial-gradient(circle at 15% 10%,var(--tk-accent-soft),transparent 42%),var(--tk-bg)!important}
body.page-login>.card{width:min(92vw,430px)!important;margin:0!important;padding:28px!important;border-radius:24px!important}
.page-login .tabs{display:flex!important;margin-bottom:18px!important}.page-login .tabs button{flex:1;border:0;background:transparent;color:var(--tk-muted);padding:10px}.page-login .tabs .on{background:var(--tk-accent)!important;color:#fff!important;box-shadow:none!important}
.page-login .sub,.page-login .hint{color:var(--tk-muted)!important}.page-login .forgot{color:var(--tk-accent)!important}.page-login .submit{background:var(--tk-accent)!important}.page-login .sheet{width:min(100%,430px)!important}

.layer,.deleteLayer,.qrLayer,.photoLayer{background:#000a!important;backdrop-filter:blur(3px)}
.sheet,.deleteSheet,.qrCard,.qrLayer>*,.photoLayer>*{background:var(--tk-panel)!important;color:var(--tk-text)!important;border:1px solid var(--tk-line)!important;box-shadow:0 20px 65px #0005!important}
.sheet{border-radius:20px 20px 0 0!important}.deleteSheet,.qrCard{border-radius:20px!important}.sheetHead{border-color:var(--tk-line)!important}.close,.cancel{color:var(--tk-muted)!important}.editor{background:var(--tk-panel)!important;color:var(--tk-text)!important;border-color:var(--tk-line)!important}
.friends{background:var(--tk-line)!important}.friend,.announcement{background:var(--tk-panel)!important;color:var(--tk-text)!important;border-color:var(--tk-line)!important}.friend:hover{background:var(--tk-accent-soft)!important}
.member span,.arrow,.hint,.announcement small{color:var(--tk-muted)!important}.add{color:var(--tk-muted)!important;border-color:var(--tk-muted)!important}.hint{font-size:22px!important}.switch{background:#7b818a!important}.switch.on{background:var(--tk-accent)!important}

.stat,.userHead,.userNode,.groupChild{background:var(--tk-panel)!important;color:var(--tk-text)!important;border-color:var(--tk-line)!important}.seq{background:var(--tk-accent-soft)!important;color:var(--tk-accent)!important}.tools button{background:var(--tk-panel)!important;color:var(--tk-text)!important;border-color:var(--tk-line)!important}.tools button.primary{background:var(--tk-accent)!important;color:#fff!important}
#blacklist>div{border-color:var(--tk-line)!important;background:var(--tk-panel)!important}#blacklist>div>div:first-child{background:var(--tk-bg)!important;color:var(--tk-text)!important}
.deleteCard{margin-top:26px!important;border-color:color-mix(in srgb,var(--tk-danger) 35%,var(--tk-line))!important}.deleteSheet>div{display:flex;justify-content:flex-end;gap:10px}

.qrBtn,.upload,.verify,.emailLine button{background:var(--tk-panel)!important;color:var(--tk-text)!important;border:1px solid var(--tk-line)!important}.qrBtn:hover,.upload:hover,.emailLine button:hover{background:var(--tk-accent-soft)!important}.verify{color:var(--tk-accent)!important}.bar{border-color:var(--tk-line)!important}

/* Mobile login: compact, fixed to one viewport, with normal-sized help copy. */
html:has(body.page-login),body.page-login{height:100%;height:100dvh;min-height:0!important;overflow:hidden!important}
body.page-login{padding:10px!important}
body.page-login>.card{width:min(94vw,430px)!important;max-height:calc(100dvh - 20px);overflow:hidden!important;padding:14px 20px!important;margin:0!important;border-radius:20px!important}
.page-login .talkerBrandLogo{width:min(170px,45vw)!important;max-height:105px!important;object-fit:contain;margin:0 auto 2px!important;border-radius:16px!important}
.page-login .sub{font-size:14px!important;line-height:1.3!important;margin:0 0 10px!important}
.page-login .tabs{margin-bottom:10px!important}
.page-login .tabs button{padding:8px!important;font-size:15px!important}
.page-login label{font-size:14px!important;line-height:1.3!important;margin:8px 0 4px!important}
.page-login input{min-height:42px!important;padding:8px 11px!important;font-size:16px!important}
.page-login .hint{font-size:13px!important;line-height:1.4!important}
.page-login .forgot{font-size:14px!important;margin:4px 0 0 auto!important;padding:3px!important}
.page-login .submit{font-size:15px!important;margin-top:8px!important;padding:10px!important}
.page-login .msg{font-size:13px!important;min-height:18px!important;margin-top:5px!important}
@media(max-height:700px){
  .page-login .talkerBrandLogo{width:125px!important;max-height:72px!important}
  .page-login .sub{display:none}
  body.page-login>.card{padding:10px 16px!important}
}
.page-login.keyboard-open .talkerBrandLogo,.page-login.keyboard-open .sub{display:none!important}
.page-login.keyboard-open>.card{padding:8px 16px!important}
.page-login.keyboard-open .tabs{margin-bottom:5px!important}
.page-login.keyboard-open .hint{display:none!important}
@media(max-width:700px){body{font-size:15px}.wrap,.page{padding:64px 0 18px!important}.top,.head{height:56px!important}.top h1,.head h1{font-size:17px!important}.profileBack,.profileGear{top:7px!important}.profileBack{left:7px!important}.profileGear{right:7px!important}body.page-profile:before{height:56px;font-size:17px}.card,.section,.members,.bar,.panel.on,.panel.card{border-left:0!important;border-right:0!important;border-radius:0!important;margin-bottom:10px!important;padding:16px!important;box-shadow:none!important}.section{padding:0!important}.section .row{padding:14px 16px!important}.top .back{font-size:0!important}.top .back:before{content:"‹";font-size:30px;font-weight:400}.scroll,.table{overflow:auto;-webkit-overflow-scrolling:touch}.actions{position:static!important}.bar{padding-top:22px!important}}
