/* Shared visual rhythm; original icons, routes, safety notices and actions stay intact. */
html[data-changliao-ui=v4]{--ui-round:16px;--ui-shadow:0 5px 22px #14274808;--ui-duration:160ms;background:var(--canvas);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
html[data-changliao-ui=v4] body{background:var(--canvas);color:var(--ink);font-family:inherit;text-rendering:optimizeLegibility}
html[data-changliao-ui=v4] :is(button,a,input,textarea,select){-webkit-tap-highlight-color:transparent}
html[data-changliao-ui=v4] :is(button,a):focus-visible{outline:2px solid var(--accent)!important;outline-offset:3px}
html[data-changliao-ui=v4] button:disabled{cursor:default;opacity:.55}
html[data-changliao-ui=v4] :is(button,a){transition:background-color var(--ui-duration),color var(--ui-duration),opacity var(--ui-duration)}
html[data-changliao-ui=v4] input::placeholder,html[data-changliao-ui=v4] textarea::placeholder{color:var(--quiet);opacity:1}
html[data-changliao-ui=v4] :is(input,textarea,select):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]){font-size:16px}
html[data-changliao-ui=v4] :is(.page-header,#realChatView>header){background:var(--surface)!important;border-bottom:1px solid var(--edge);letter-spacing:.1px}
html[data-changliao-ui=v4] .page-header h1{font-weight:650}
html[data-changliao-ui=v4] .page-header :is(button,a){min-height:44px;min-width:44px}
html[data-changliao-ui=v4] :is(.inbox-search,.page-search){height:44px;min-height:44px;border:1px solid var(--edge);border-radius:13px;background:var(--surface)!important}
html[data-changliao-ui=v4] .inbox-search{margin-top:12px!important;margin-bottom:12px!important}
html[data-changliao-ui=v4] .inbox-search input{text-align:left;font-size:15px}
html[data-changliao-ui=v4] #showArchivedChats{min-height:44px;padding:10px 16px;margin:0 10px 10px;border:1px solid var(--edge);border-radius:12px;background:var(--surface);color:var(--quiet);font:inherit;font-size:12px}
html[data-changliao-ui=v4] .conversation-line{height:82px;padding:13px 16px;gap:14px}
html[data-changliao-ui=v4] .conversation-copy b{font-size:16px;line-height:1.4;font-weight:600}
html[data-changliao-ui=v4] .conversation-copy small{font-size:13px;line-height:1.5}
html[data-changliao-ui=v4] .conversation-meta{font-size:11px}
html[data-changliao-ui=v4] .conversation-line:after{left:78px;right:16px}
html[data-changliao-ui=v4] .conversation-line:active,html[data-changliao-ui=v4] .real-friend:active{background:var(--soft)!important}
html[data-changliao-ui=v4] .bottom-nav{box-shadow:0 -1px 0 var(--edge);padding-top:5px;padding-bottom:max(5px,env(safe-area-inset-bottom))}
html[data-changliao-ui=v4] .bottom-nav .nav-item{min-height:56px;font-size:11px;font-weight:500;gap:5px}
html[data-changliao-ui=v4] .bottom-nav .nav-item.active>span{width:48px;height:30px;border-radius:11px}
html[data-changliao-ui=v4] .section-label{font-size:12px;letter-spacing:.3px;color:var(--quiet)}
html[data-changliao-ui=v4] :is(.real-friend,.contact-row){min-height:76px;box-sizing:border-box;gap:14px}
html[data-changliao-ui=v4] .real-friend>a{min-width:0;overflow-wrap:anywhere}
html[data-changliao-ui=v4] .real-friend small{line-height:1.6;color:var(--quiet)}
html[data-changliao-ui=v4] .profile-card{box-shadow:var(--ui-shadow)}
html[data-changliao-ui=v4] :is(.profile-menu>a,.profile-menu>button,.settings-panel button){min-height:60px}
html[data-changliao-ui=v4] .settings-panel .settings-icon{width:30px;height:30px}
html[data-changliao-ui=v4] dialog:not(#friendCallDialog):not(.person-card):not(#realGroupInfo):not(.account-settings-pane):not(#payDialog):not(#walletPacketModal){border:1px solid var(--edge)!important;border-radius:22px!important;box-shadow:0 16px 60px #07152538;padding:24px;box-sizing:border-box;max-width:calc(100vw - 24px)}
html[data-changliao-ui=v4] dialog::backdrop{background:#101b2d66;backdrop-filter:none}
html[data-changliao-ui=v4] #friendCallDialog::backdrop{background:#101c26}
html[data-changliao-ui=v4] dialog:not(#friendCallDialog) :is(.close,.person-close){min-width:44px;min-height:44px}
html[data-changliao-ui=v4] dialog:not(#friendCallDialog) h2{font-weight:650;letter-spacing:.2px}
html[data-changliao-ui=v4] #accountDialog{width:420px}
html[data-changliao-ui=v4] #accountForm label{display:block;margin:16px 0;font-size:13px;line-height:1.6}
html[data-changliao-ui=v4] #accountForm :is(input,select){display:block;box-sizing:border-box;width:100%;min-height:48px;margin-top:7px;border-radius:12px;padding:10px 12px}
html[data-changliao-ui=v4] #accountDialog :is(#loginSubmit,#loginToggle){min-height:48px;border-radius:12px;box-sizing:border-box;width:100%}
html[data-changliao-ui=v4] #accountDialog #loginError{color:#c34655!important;white-space:pre-line}
html[data-changliao-ui=v4] #accountDialog p{line-height:1.7}
html[data-changliao-ui=v4] #accountDialog p:not(#loginError){color:var(--quiet)!important}
html[data-changliao-ui=v4] :is(#friendRequestsDialog,#addFriendDialog) button:not(.close){min-height:44px}
html[data-changliao-ui=v4] #addFriendIdentifier{min-height:48px;width:100%;box-sizing:border-box;border-radius:12px}
html[data-changliao-ui=v4] .friend-request{padding:14px 0;border-bottom:1px solid var(--edge);gap:10px}
html[data-changliao-ui=v4] #realChatView>header :is(button,a){min-height:44px}
html[data-changliao-ui=v4] #realMessages{overscroll-behavior-y:contain}
html[data-changliao-ui=v4] #realChatView .latest-messages{bottom:calc(var(--mchat-composer-height,70px) + 12px);min-height:44px;background:var(--surface);color:var(--accent);border-color:var(--edge);box-shadow:0 4px 18px #12284418;white-space:nowrap}
html[data-changliao-ui=v4] #realComposer .composer-line{align-items:flex-end}
html[data-changliao-ui=v4] #realComposer .composer-line>button{width:44px;height:44px;min-width:44px}
html[data-changliao-ui=v4] #realComposer #realSend{width:54px;min-width:54px;height:44px}
html[data-changliao-ui=v4] #realComposer #realText{min-height:44px!important;height:44px;max-height:110px;overflow-y:auto;border-radius:14px!important}
html[data-changliao-ui=v4] #realComposer .emoji-category-tab{min-height:44px}
html[data-changliao-ui=v4] #realComposer .chat-more>button{min-height:80px}
html[data-changliao-ui=v4] #realMessages[data-background=mint]{background-color:#e6f2e8!important;background-image:linear-gradient(135deg,#e6f2e8,#cde1d6)!important}
html[data-changliao-ui=v4] #realMessages[data-background=sky]{background-color:#e5effa!important;background-image:linear-gradient(135deg,#e5effa,#d6e0ee)!important}
html[data-changliao-ui=v4] #realMessages[data-background=sand]{background-color:#faf1df!important;background-image:linear-gradient(135deg,#faf1df,#e9ddcd)!important}
html[data-changliao-ui=v4] #realMessages[data-background=default]{background-image:none!important}
/* Standalone pages inherit the same preference, not a second wallet/theme system. */
html[data-ui-page=wallet] :is(main,header),html[data-ui-page=packet] main{background:var(--canvas);color:var(--ink)}
html[data-ui-page=wallet] header{min-height:68px;border-bottom:1px solid var(--edge)}
html[data-ui-page=wallet] header a{color:var(--accent);min-height:44px;display:flex;align-items:center;font-size:14px}
html[data-ui-page=wallet] .hero{background:linear-gradient(125deg,var(--soft),var(--surface));color:var(--ink);border:1px solid var(--edge);border-radius:24px;box-shadow:var(--ui-shadow);padding:26px 22px}
html[data-ui-page=wallet] #total{letter-spacing:-1px;font-variant-numeric:tabular-nums}
html[data-ui-page=wallet] :is(.asset-row,.record-row,.detail,.form-card){background:var(--surface);border-color:var(--edge);color:var(--ink);border-radius:16px;box-shadow:var(--ui-shadow)}
html[data-ui-page=wallet] :is(.asset-row small,.record-row small,footer){color:var(--quiet)}
html[data-ui-page=wallet] :is(form,#pending){background:var(--surface);color:var(--ink);border:1px solid var(--edge)}
html[data-ui-page=wallet] label{color:var(--ink)}
html[data-ui-page=wallet] :is(.asset-row em,#detail>button){color:var(--accent)}
html[data-ui-page=wallet] nav button{min-height:44px;background:var(--surface);color:var(--quiet);border:1px solid var(--edge);border-radius:12px}
html[data-ui-page=wallet] nav button.active{background:var(--accent);color:var(--action-ink)}
html[data-ui-page=wallet] :is(input,select){background:var(--surface);color:var(--ink);border-color:var(--edge);min-height:48px;border-radius:12px}
html[data-ui-page=wallet] .actions button,html[data-ui-page=wallet] :is(button[type=submit],.primary){min-height:46px;background:var(--accent);color:var(--action-ink);border-radius:12px}
html[data-ui-page=wallet] footer a{color:var(--accent)}
html[data-ui-page=packet] header{background:var(--surface);color:var(--ink);border-color:var(--edge)}
html[data-ui-page=packet] :is(.record-row,.history-row){background:var(--surface);color:var(--ink);border-color:var(--edge)}
html[data-ui-page=packet] :is(.menu-list,.menu-list button,.form-card,.blessing){background:var(--surface);color:var(--ink);border-color:var(--edge)}
html[data-ui-page=packet] :is(.form-card input,.form-card select,.blessing input){color:var(--ink)}
html[data-ui-page=packet] :is(.form-card label,.menu-list button){border-color:var(--edge)}
html[data-ui-page=packet] :is(.test-label,.footnote,.form-note,.balance-card small,.history-row small,.password-intro p){color:var(--quiet)}
html[data-ui-page=packet] :is(header a,.text-button){min-height:44px;display:inline-flex;align-items:center;color:var(--accent)}
html[data-ui-page=moments] .moments-body{background:var(--canvas);color:var(--ink)}
html[data-ui-page=moments] .moments-body>main>header{color:var(--ink)}
html[data-ui-page=moments] #composer>small{color:var(--quiet)}
html[data-ui-page=moments] :is(.cover,#composer,article){background:var(--surface);color:var(--ink);border:1px solid var(--edge);border-radius:20px;box-shadow:var(--ui-shadow)}
html[data-ui-page=moments] .cover{background:linear-gradient(130deg,var(--soft),var(--surface));padding:26px 22px}
html[data-ui-page=moments] .cover h1{font-size:26px;font-weight:650;letter-spacing:-.3px}
html[data-ui-page=moments] :is(.cover p,.cover small,.author small,.comment small,.foot,time){color:var(--quiet)}
html[data-ui-page=moments] :is(header a,header button,.actions button){color:var(--accent);min-height:44px;background:transparent;border-color:var(--edge)}
html[data-ui-page=moments] .comments{background:var(--soft)}
html[data-ui-page=moments] .avatar{background:var(--avatar);color:var(--accent)}
html[data-ui-page=moments] :is(textarea,input){background:var(--canvas);color:var(--ink);border-color:var(--edge);border-radius:12px}
html[data-ui-page=moments] :is(#publish,.upload){min-height:44px;background:var(--accent);color:var(--action-ink);border-radius:12px}
@media(max-width:360px){html[data-changliao-ui=v4] #realComposer{padding:8px!important}html[data-changliao-ui=v4] .conversation-line{padding-left:14px;padding-right:14px}html[data-changliao-ui=v4] dialog:not(#friendCallDialog):not(.person-card):not(#realGroupInfo):not(.account-settings-pane):not(#payDialog):not(#walletPacketModal){padding:20px}}
@media(prefers-reduced-motion:reduce){html[data-changliao-ui=v4] *,html[data-changliao-ui=v4] *::before,html[data-changliao-ui=v4] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}