:root{
    --bg:#040408;--card:rgba(20,20,40,0.8);--accent:#a78bfa;--accent2:#7c3aed;
    --text:#e2e0e7;--dim:#b8977a;--border:rgba(255,255,255,0.06);--r:16px;--rs:14px;
    --input-bg:rgba(45,30,60,0.75);--sheet-bg:rgba(20,20,45,0.98);--modal-bg:rgba(0,0,0,0.85);
    --topbar-bg:rgba(6,6,14,0.92);--icon-btn-bg:rgba(255,255,255,0.06);--icon-btn-border:rgba(255,255,255,0.1);
    --glow:0 0 0 2px rgba(167,139,250,0.12),0 0 20px rgba(167,139,250,0.08);
    --btn-glow:0 4px 24px rgba(124,58,237,0.35),0 1px 0 rgba(255,255,255,0.08) inset;
    --btn-glow-hover:0 6px 32px rgba(124,58,237,0.5),0 0 60px rgba(167,139,250,0.15),0 1px 0 rgba(255,255,255,0.12) inset;
    --font-serif:'Palatino Linotype','Book Antiqua',Palatino,Georgia,'Songti SC','Noto Serif CJK SC',serif;
    --font-sans:-apple-system,'PingFang SC',system-ui,sans-serif;
    --fuzz:0 0 0 1px rgba(139,115,85,0.06),0 0 0 3px rgba(139,115,85,0.03);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
    font-family:var(--font-serif);
    background:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh;
    display:flex;flex-direction:column;color-scheme:dark;transition:background 0.5s;
    position:relative;
}
body::before{
    content:'';position:fixed;inset:0;
    background:radial-gradient(ellipse at 50% 0%,var(--accent) 0%,transparent 50%),
               radial-gradient(ellipse at 80% 20%,rgba(167,139,250,0.04) 0%,transparent 40%),
               radial-gradient(ellipse at 20% 80%,rgba(167,139,250,0.03) 0%,transparent 40%);
    opacity:1;pointer-events:none;z-index:-1;transition:opacity 0.8s;
}
body::after{
    content:'';position:fixed;inset:0;pointer-events:none;z-index:999;
    opacity:0.06;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.topbar{
    display:flex;align-items:center;gap:4px;padding:6px 12px;
    background:var(--topbar-bg);border-bottom:1px solid var(--border);
    border-radius:0 0 var(--r) var(--r);
    position:sticky;top:0;z-index:10;backdrop-filter:blur(30px) saturate(1.8);
    -webkit-backdrop-filter:blur(30px) saturate(1.8);
    box-shadow:0 0 0 1px rgba(255,255,255,0.03),0 8px 32px rgba(0,0,0,0.5);
    filter:url(#fluffy-topbar);
}
.topbar h1{font-size:1.35rem;font-weight:700;flex:1;font-family:var(--font-serif);letter-spacing:-0.03em;white-space:nowrap;
    background:linear-gradient(135deg,var(--accent),#e879f9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;}
.hat-i{position:relative;font-size:2em;display:inline-block;transform:translateY(3px) scaleX(0.8);margin:0 -0.05em;background:inherit;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tall-letter{font-size:2em;display:inline-block;transform:scaleX(0.8);margin:0 -0.05em;background:inherit;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.top-hat{position:absolute;bottom:calc(100% - 16px);left:50%;transform:translateX(-50%) rotate(-14deg);width:0.8em}
.top-hat .hat-body{fill:#d4c8e8}
.top-hat .hat-band{fill:var(--accent)}
.cat-on-letter{display:inline;width:5em;height:1.85em;vertical-align:baseline;margin-left:-28px;transform:translateY(10.5px) scaleX(1.5) scaleY(1.0);filter:brightness(1.5) saturate(0) drop-shadow(0 0 3px var(--accent)) drop-shadow(0 0 0 #c3b091);opacity:0.7}
.cat-tint{position:relative;display:inline-block}
.cat-tint::after{display:none}
.cat-tint::before{display:none}
.purr-text{position:absolute;top:calc(-1.4em + 11px);right:6px;font-size:0.55em;font-style:italic;color:var(--bg);-webkit-text-fill-color:var(--bg);font-family:var(--font-serif);pointer-events:none;white-space:nowrap;background:var(--accent);padding:2px 8px;border-radius:9px 9px 2px 9px;line-height:1.2}
.purr-text::after{content:"";position:absolute;bottom:-3px;left:4px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid var(--accent)}
@media(max-width:768px){.hat-i{font-size:2.5em}.top-hat{width:1.1em;bottom:calc(100% - 16px)}.tab{font-size:0.68rem;padding:11px 2px}}
/* Cat paw loader */
.paw-loader{display:inline-flex;align-items:flex-end;gap:2px;height:1em;vertical-align:middle;margin-right:4px}
.paw-pad{display:inline-block;border-radius:50%;background:var(--accent);animation:pawBounce .6s ease-in-out infinite}
.paw-pad.lg{width:8px;height:8px;animation-delay:0s}
.paw-pad.sm{width:5px;height:5px}
.paw-pad.sm:nth-child(2){animation-delay:.1s}
.paw-pad.sm:nth-child(3){animation-delay:.2s}
.paw-pad.sm:nth-child(4){animation-delay:.3s}
@keyframes pawBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.topbar .badge{font-size:0.65rem;color:var(--dim);border:1px solid var(--border);border-radius:6px;padding:2px 6px;}
.icon-btn{
    width:36px;height:36px;border-radius:50%;border:1px solid var(--icon-btn-border);
    background:var(--icon-btn-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    color:var(--text);font-size:1rem;font-family:inherit;
    display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
    transition:transform .15s,background .2s,border-color .2s,box-shadow .2s;
    box-shadow:0 2px 8px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.06) inset;
    filter:url(#fluffy-light);
}
.icon-btn:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.22);transform:scale(1.06);box-shadow:0 4px 16px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255,0.08) inset}
.icon-btn:active{background:var(--accent2);transform:scale(0.94)}
.pwd-row{display:flex;gap:6px;padding:10px 12px;align-items:center;}
.pwd-row input{
    flex:1;padding:12px 14px;border-radius:var(--r);border:2px solid var(--border);
    background:var(--input-bg);color:var(--text);font-size:0.9rem;outline:none;min-width:0;font-family:inherit;
    transition:border-color .4s,box-shadow .4s;font-weight:600;
    filter:url(#fluffy-edge);
    box-shadow:inset 0 1px 4px rgba(0,0,0,0.15);
}
.pwd-row input:focus{border-color:var(--accent);box-shadow:inset 0 1px 4px rgba(0,0,0,0.15),0 0 0 3px var(--a12)}
.tabs{display:flex;border-bottom:1px solid var(--border);margin:0 12px}
.tab{
    flex:1;text-align:center;padding:11px 4px;font-size:0.85rem;font-weight:600;letter-spacing:0.01em;
    color:var(--dim);cursor:pointer;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    filter:url(#fluffy-edge);
}
.tab:hover{color:#bbb}
.tab.active{color:var(--tab-active-color,var(--accent));border-bottom-color:var(--tab-active-color,var(--accent))}
.content{flex:1;display:flex;flex-direction:column;padding:10px 12px;gap:10px;overflow-y:auto}
.panel{display:none;flex-direction:column;gap:8px;flex:1}
.panel.active{display:flex}
textarea{
    flex:1;min-height:140px;padding:16px;border-radius:var(--r);border:2px solid var(--border);
    background:var(--input-bg);color:var(--text);font-size:0.9rem;line-height:1.6;
    resize:none;outline:none;font-family:var(--font-serif);transition:border-color .4s,box-shadow .4s;font-weight:600;
    -webkit-text-stroke:0.35px var(--text);
    text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;text-decoration-thickness:0.5px;
    filter:url(#fluffy-edge);
    box-shadow:inset 0 1px 4px rgba(0,0,0,0.15);
}
textarea:focus{border-color:var(--accent);box-shadow:inset 0 1px 4px rgba(0,0,0,0.15),0 0 0 3px var(--a12)}
textarea[readonly]{background:var(--input-bg);cursor:default;border-style:solid;font-family:var(--font-serif);letter-spacing:0.02em}
.btn-row{display:flex;gap:6px;flex-wrap:wrap}
.btn{
    padding:11px 18px;border-radius:var(--r);border:none;font-size:0.82rem;font-weight:600;
    cursor:pointer;display:flex;align-items:center;gap:5px;font-family:inherit;
    transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .4s,opacity .3s,background .3s;
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
    filter:url(#fluffy-light);
}
.btn:active{transform:scale(0.96);box-shadow:0 1px 2px rgba(0,0,0,0.4),inset 0 1px 3px rgba(0,0,0,0.3)}
.btn-primary{background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff;flex:1;justify-content:center;box-shadow:var(--btn-glow);font-size:0.88rem;padding:13px 18px}
.btn-primary:hover{box-shadow:var(--btn-glow-hover);transform:translateY(-1px)}
.btn-primary:active{opacity:.9}
.btn-copy{background:var(--btn-copy-bg,rgba(16,185,129,0.1));color:var(--btn-copy-color,#6ee7b7);border:1px solid var(--btn-copy-border,rgba(16,185,129,0.15));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-copy:hover{background:var(--btn-copy-hover-bg,rgba(16,185,129,0.16));border-color:var(--btn-copy-border,rgba(16,185,129,0.25));box-shadow:0 0 16px var(--btn-copy-shadow,rgba(16,185,129,0.1))}
.btn-outline{background:var(--btn-outline-bg,rgba(255,255,255,0.1));color:var(--btn-outline-color,#ddd);border:1px solid var(--btn-outline-border,rgba(255,255,255,0.12));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);justify-content:center}
.btn-outline:hover{background:var(--btn-outline-hover-bg,rgba(255,255,255,0.16));color:var(--btn-outline-hover-color,#fff);border-color:var(--btn-outline-border,rgba(255,255,255,0.2));box-shadow:0 0 12px var(--btn-outline-shadow,rgba(255,255,255,0.06))}
.char-count{font-size:0.7rem;color:var(--dim);text-align:right}
#lyricModal,#quizModal,#guideModal,#settingsModal{display:none;position:fixed;inset:0;z-index:100;background:var(--modal-bg);
    backdrop-filter:blur(4px);justify-content:flex-end;align-items:stretch}
#lyricModal.show,#quizModal.show,#guideModal.show,#settingsModal.show{display:flex}
#lyricModal .sheet,#quizModal .sheet,#guideModal .sheet,#settingsModal .sheet{
    background:var(--sheet-bg);border-radius:16px 16px 0 0;padding:16px;
    max-height:75vh;width:100%;overflow-y:auto;display:flex;flex-direction:column;gap:10px;
}
#confirmModal .sheet,#pwdPromptModal .sheet,#lyricDecModal .sheet,#lyricFeedbackModal .sheet,#rtcSignalModal .sheet{background:var(--sheet-bg);border-radius:14px}
#lyricModal .sheet h3,#quizModal .sheet h3,#guideModal .sheet h3,#settingsModal .sheet h3{font-size:1rem;text-align:center;color:var(--h3-color,var(--text))}
#quizModal .preview{background:var(--card);border:1px solid var(--border);border-radius:var(--rs);padding:10px}
#quizModal .modal-btns{display:flex;gap:8px}
#quizModal .modal-btns .btn{flex:1;justify-content:center}
#lyricModal select{
    padding:10px;border-radius:var(--rs);border:1px solid var(--border);
    background:var(--input-bg);color:var(--text);font-size:0.85rem;outline:none;
}
#lyricModal select:disabled{opacity:.35}
/* 自定义下拉替换原生 select */
.lyric-custom-select,.pwd-custom-select {
    position:relative;font-family:var(--font-serif);
}
.lyric-custom-select .lcs-trigger,.pwd-custom-select .lcs-trigger {
    width:100%;padding:10px;border-radius:var(--rs);border:1px solid var(--border);
    background:var(--input-bg);color:var(--dim);font-size:0.85rem;font-family:inherit;
    text-align:left;outline:none;cursor:pointer;
}
.pwd-custom-select .lcs-trigger{padding:6px 8px;font-size:0.7rem;filter:url(#fluffy-light)}
.lyric-custom-select .lcs-trigger:not(:disabled),.pwd-custom-select .lcs-trigger:not(:disabled){color:var(--text)}
.lyric-custom-select .lcs-options,.pwd-custom-select .lcs-options {
    display:none;position:absolute;left:0;right:0;
    max-height:180px;overflow-y:auto;border-radius:var(--rs);
    border:1px solid var(--border);background:var(--sheet-bg);
    z-index:10;margin-top:2px;font-family:inherit;
}
.pwd-custom-select .lcs-options{max-height:160px;filter:url(#fluffy-light)}
.lyric-custom-select.open .lcs-options,.pwd-custom-select.open .lcs-options{display:block}
.lyric-custom-select .lcs-opt,.pwd-custom-select .lcs-opt {
    padding:10px 12px;cursor:pointer;font-size:0.82rem;color:var(--text);font-family:inherit;
}
.pwd-custom-select .lcs-opt{padding:8px 10px;font-size:0.7rem}
.lyric-custom-select .lcs-opt:hover,.lyric-custom-select .lcs-opt:active,
.pwd-custom-select .lcs-opt:hover,.pwd-custom-select .lcs-opt:active{background:var(--a25)}
#lyricModal .preview{padding:10px;border-radius:var(--rs);background:var(--card);border:1px solid var(--border);font-size:0.85rem;font-style:italic;line-height:1.4}
#lyricModal .modal-btns{display:flex;gap:8px}
#lyricModal .modal-btns .btn{flex:1;justify-content:center}
.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);
    background:rgba(16,185,129,0.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    color:#fff;padding:8px 20px;border-radius:20px;font-size:0.8rem;z-index:200;
    opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;
    box-shadow:0 4px 12px rgba(16,185,129,0.3);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-2px)}
/* Emoji cipher mode */
.emoji-cipher{font-size:1.25rem;line-height:1.8;word-break:break-all;letter-spacing:2px;min-height:60px;max-height:180px;overflow-y:auto;padding:12px;border-radius:var(--rs);background:var(--card);border:1px solid var(--border);user-select:all;
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.15) transparent}
.emoji-cipher::-webkit-scrollbar{width:8px}
.emoji-cipher::-webkit-scrollbar-track{background:transparent}
.emoji-cipher::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:4px}
/* Share modal */
#shareModal{display:none;position:fixed;inset:0;z-index:100;background:var(--modal-bg);backdrop-filter:blur(4px);justify-content:center;align-items:flex-end}
#shareModal.show{display:flex}
#shareModal .sheet{background:var(--sheet-bg);border-radius:16px 16px 0 0;padding:16px;width:100%;max-height:70vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px;
    scrollbar-width:auto;scrollbar-color:rgba(255,255,255,0.3) transparent}
#shareModal .sheet::-webkit-scrollbar{width:20px}
#shareModal .sheet::-webkit-scrollbar-track{background:transparent}
#shareModal .sheet::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.22);border-radius:10px;border:4px solid transparent;background-clip:content-box}
#shareModal .sheet::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.4);background-clip:content-box}
#shareModal .sheet h3{font-size:1rem;text-align:center;color:var(--h3-color,var(--text))}
#shareModal input{width:100%;padding:10px;border-radius:var(--rs);border:1px solid var(--border);background:var(--input-bg);color:var(--text);font-size:0.8rem;outline:none}
#shareModal .modal-btns{display:flex;flex-direction:column;gap:10px}
#shareModal .modal-btns .btn-row{display:flex;gap:8px}
#shareModal .modal-btns .btn-row .btn{flex:1;justify-content:center}
#shareLink{word-break:break-all;font-size:0.65rem;color:var(--accent);background:var(--card);padding:10px;border-radius:var(--rs);border:1px solid var(--border);max-height:100px;overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.25) transparent}
#shareLink::-webkit-scrollbar{width:16px}
#shareLink::-webkit-scrollbar-track{background:transparent}
#shareLink::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:8px;border:3px solid transparent;background-clip:content-box}
/* Chat mode */
.chat-area{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:6px 0;min-height:200px;max-height:50vh;position:relative}
.chat-msg{max-width:85%;padding:10px 14px;border-radius:16px;font-size:0.85rem;line-height:1.45;animation:msgIn .3s ease;word-break:break-word;position:relative}
@keyframes msgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.chat-msg.me{align-self:flex-end;background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff;border-bottom-right-radius:4px}
.chat-msg.them{align-self:flex-start;background:rgba(255,255,255,0.08);border:1px solid var(--border);border-bottom-left-radius:4px}
.chat-msg .meta{font-size:0.6rem;opacity:.6;margin-bottom:3px;display:flex;justify-content:space-between;gap:8px}
.chat-msg .cipher-preview{font-size:0.6rem;opacity:.45;margin-top:4px;font-family:monospace;word-break:break-all;max-height:24px;overflow:hidden}
.chat-date-sep{text-align:center;padding:4px 0;font-size:0.55rem;color:var(--dim)}
.chat-date-sep span{background:rgba(255,255,255,0.06);padding:2px 10px;border-radius:10px}
.chat-input-row{display:flex;gap:6px;align-items:flex-end}
.chat-input-row textarea{flex:1;min-height:44px;max-height:80px;padding:10px;border-radius:var(--rs);border:1px solid var(--border);background:rgba(0,0,0,0.25);color:var(--text);font-size:0.85rem;resize:none;outline:none;font-family:inherit}
.chat-input-row textarea:focus{border-color:var(--accent)}
.chat-actions{display:flex;gap:6px;padding:4px 0}
.empty-chat{text-align:center;color:var(--dim);font-size:0.8rem;padding:30px 0}
/* Password strength */
/* Lyric autocomplete */
.lyric-ac-item{padding:8px 12px;font-size:0.72rem;color:var(--text);cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.03);line-height:1.4;transition:background .15s}
.lyric-ac-item:hover,.lyric-ac-item:focus{background:var(--a12);color:var(--accent)}
.lyric-ac-item mark{background:rgba(251,191,36,0.3);color:#fff;border-radius:2px;padding:0 1px}

.pwd-strength{height:3px;border-radius:2px;margin:0 12px;background:rgba(255,255,255,0.06);overflow:hidden;transition:all .3s}
.pwd-strength div{height:100%;transition:width .4s,background .4s;width:0}
.pwd-label{font-size:0.6rem;text-align:right;padding:2px 12px 0;min-height:14px}
/* 标题类使用衬线字体 */
.sheet h3,.modal h3,#guideModal h3,#quizModal h3,#settingsModal h3,#lyricModal h3{font-family:var(--font-serif);letter-spacing:0.01em}
.pwd-masked{-webkit-text-security:disc}
/* Incognito toggle */
.incog-toggle{display:flex;align-items:center;gap:4px;cursor:pointer;font-size:0.65rem}
.incog-toggle input{display:none}
.incog-toggle .switch{width:32px;height:18px;border-radius:9px;background:rgba(255,255,255,0.15);position:relative;transition:background .3s}
.incog-toggle .switch::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .3s}
.incog-toggle input:checked+.switch{background:#ef4444}
.incog-toggle input:checked+.switch::after{left:16px}
/* Self-destruct */
.sd-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:0.72rem}
.sd-row .sd-toggle{display:flex;align-items:center;gap:3px;cursor:pointer}
.sd-row .sd-toggle input{display:none}
.sd-row .sd-toggle .switch{width:28px;height:16px;border-radius:8px;background:rgba(255,255,255,0.12);position:relative;transition:background .3s;flex-shrink:0}
.sd-row .sd-toggle .switch::after{content:'';position:absolute;top:1.5px;left:1.5px;width:13px;height:13px;border-radius:50%;background:#fff;transition:left .3s}
.sd-row .sd-toggle input:checked+.switch{background:#f97316}
.sd-row .sd-toggle input:checked+.switch::after{left:13.5px}
.sd-row .sd-opts{display:none;align-items:center;gap:4px;flex-wrap:wrap}
.sd-row .sd-opts.show{display:flex}
.sd-row .sd-time{display:flex;align-items:center;gap:2px}
.sd-row .sd-time input{width:34px;padding:3px;border-radius:4px;border:1px solid var(--border);background:rgba(0,0,0,0.25);color:var(--text);font-size:0.7rem;text-align:center;outline:none}
.sd-row .sd-time input:focus{border-color:var(--accent)}
.sd-badge{display:inline-block;font-size:0.55rem;background:#f97316;color:#fff;padding:1px 5px;border-radius:3px;margin-left:4px;vertical-align:middle}
/* Share dropdown */
.share-dropdown{position:relative;display:inline-flex}
.share-dropdown .share-menu{display:none;position:absolute;bottom:100%;left:0;margin-bottom:4px;background:var(--sheet-bg);border:1px solid var(--border);border-radius:8px;overflow:hidden;z-index:10;min-width:120px;max-width:calc(100vw - 24px);box-shadow:0 4px 16px rgba(0,0,0,0.4);filter:url(#fluffy-light)}
.share-dropdown.open .share-menu{display:block}
.share-dropdown .share-menu button{display:block;width:100%;padding:8px 12px;border:none;background:transparent;color:var(--text);font-size:0.75rem;cursor:pointer;text-align:left;white-space:nowrap;font-family:var(--font-serif)}
.share-dropdown .share-menu button:hover{background:var(--btn-copy-bg,var(--a15))}
.share-dropdown .share-menu button small{font-weight:400}
.sd-countdown{font-size:0.55rem;color:#f97316;margin-left:4px}
/* Auto-paste toggle (standalone, not inside sd-row) */
.chat-auto-toggle{display:flex;align-items:center;cursor:pointer}
.chat-auto-toggle input{display:none}
.chat-auto-toggle .switch{width:36px;height:20px;border-radius:10px;background:rgba(255,255,255,0.12);position:relative;transition:background .3s;flex-shrink:0}
.chat-auto-toggle .switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .3s}
.chat-auto-toggle input:checked+.switch{background:var(--accent)}
.chat-auto-toggle input:checked+.switch::after{left:18px}
/* QR分享弹窗 */
#qrShareModal .qr-preview{background:var(--card);border-radius:12px;padding:12px;display:inline-block;box-shadow:0 4px 20px rgba(0,0,0,0.3)}
#qrShareModal .qr-preview canvas{display:block;border-radius:4px}
#qrShareModal .sheet{background:var(--sheet-bg)}
#qrShareRaw{max-width:100%;overflow:hidden}
#qrShareRaw img{max-width:100%;height:auto}
#qrShareHint{font-size:0.8rem;padding:10px;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,0.05);color:var(--text);outline:none;width:100%;box-sizing:border-box}
#qrShareHint:focus{border-color:var(--accent)}/* ═══ P2P WebRTC 状态栏 ═══ */
.rtc-status-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    margin-bottom: 4px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.02);
    font-size: 0.65rem;
    flex-wrap: wrap;
}
.rtc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #888;
    flex-shrink: 0;
    transition: background 0.3s;
}
.rtc-dot.connecting { background: #f0c040; animation: rtc-pulse 1s ease-in-out infinite; }
.rtc-dot.connected { background: #4caf50; }
.rtc-dot.disconnected { background: #f44336; }
@keyframes rtc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.rtc-label {
    flex: 1;
    min-width: 0;
    color: var(--dim);
    font-size: 0.62rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rtc-btn {
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
    color: var(--dim);
    font-size: 0.58rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
    font-family: var(--font-sans);
}
.rtc-btn:hover {
    background: rgba(167,139,250,0.12);
    color: var(--accent);
    border-color: rgba(167,139,250,0.3);
}
.rtc-btn.hidden { display: none; }
#panelChat.rtc-active .chat-input-row textarea {
    border-color: rgba(76,175,80,0.3);
    box-shadow: 0 0 0 1px rgba(76,175,80,0.1);
}
.rtc-signal-tab {
    border: none;
    background: transparent;
    color: var(--dim);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    font-family: var(--font-sans);
}
.rtc-signal-tab.active {
    background: rgba(167,139,250,0.12);
    color: var(--accent);
}
.rtc-signal-tab:hover { background: rgba(255,255,255,0.04); }
#rtcSignalModal textarea {
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text);
    font-family: monospace;
    font-size: 0.6rem;
    resize: vertical;
    outline: none;
}
#rtcSignalModal textarea:focus { border-color: var(--accent); }
.p2p-badge {
    display: inline-block;
    font-size: 0.5rem;
    background: rgba(76,175,80,0.15);
    color: #4caf50;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
}
/* P2P QR in signal modal — 内部分辨率320，CSS自适应 */
#rtcOfferQR, #rtcAnswerQR {
    overflow: hidden;
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1;
    margin-left: auto !important;
    margin-right: auto !important;
}
#rtcOfferQR img, #rtcAnswerQR img {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;  /* keep QR sharp, no anti-alias blur */