/* Appearance layer. Loaded after v1.css so it can unify the whole canvas without changing layout. */
body[data-wallpaper="aurora"]{
  --app-wallpaper:radial-gradient(circle at 84% 12%,rgba(255,255,255,.74),transparent 34%),radial-gradient(circle at 14% 86%,rgba(129,205,184,.18),transparent 34%),var(--chat-wallpaper);
}
body[data-wallpaper="cloud"]{
  --app-wallpaper:radial-gradient(circle at 18% 18%,rgba(255,255,255,.88),transparent 25%),radial-gradient(circle at 80% 72%,rgba(255,255,255,.68),transparent 32%),var(--chat-wallpaper);
}
body[data-wallpaper="linen"]{
  --app-wallpaper:repeating-linear-gradient(0deg,rgba(80,66,45,.025) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(80,66,45,.02) 0 1px,transparent 1px 5px),linear-gradient(145deg,#eee9df,#f6f1e8);
}
body[data-wallpaper="none"]{--app-wallpaper:var(--chat-wallpaper)}
body[data-wallpaper="custom"]{--app-wallpaper:var(--custom-wallpaper)}
body[data-wallpaper] .app-shell{
  position:relative;
  isolation:isolate;
  background-color:#e8eff2;
  background-image:var(--app-wallpaper);
  background-position:center;
  background-size:cover;
  transition:background .34s ease,color .28s ease;
}
body[data-wallpaper] .app-shell:before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:linear-gradient(125deg,rgba(245,250,252,.16),rgba(225,237,240,.05));
  transition:background .34s ease;
}
body[data-wallpaper] .app-shell>*{position:relative;z-index:1}
body[data-wallpaper] .app-rail{background:linear-gradient(180deg,rgba(18,34,43,.96),rgba(8,20,27,.94));backdrop-filter:blur(20px) saturate(1.08)}
body[data-wallpaper] .conversation-panel,
body[data-wallpaper] .contacts-panel,
body[data-wallpaper] .profile-panel{
  background:linear-gradient(155deg,rgba(250,253,254,.82),rgba(235,243,246,.72));
  backdrop-filter:blur(25px) saturate(1.12);
  transition:background .3s ease,box-shadow .3s ease,color .25s ease;
}
body[data-wallpaper] .chat-panel{
  background:linear-gradient(145deg,rgba(246,251,252,.30),rgba(230,241,243,.18));
  backdrop-filter:blur(10px) saturate(1.05);
  transition:background .3s ease,color .25s ease;
}

body[data-mode="dark"]{
  --ink:#edf4f7;
  --muted:#9fb0ba;
  --line:rgba(226,239,246,.09);
  --panel:rgba(20,32,41,.88);
  --chat-wallpaper:linear-gradient(155deg,#101b23,#172730 55%,#0d171e);
  --dark-canvas:#0d161c;
  --dark-panel:#14212a;
  --dark-card:#1b2a34;
  --dark-field:#12202a;
  --dark-border:rgba(218,235,243,.13);
  --dark-muted:#9fb0ba;
  background:var(--dark-canvas);
  color:var(--ink);
  color-scheme:dark;
}
body[data-mode="dark"][data-wallpaper="aurora"]{--app-wallpaper:radial-gradient(circle at 84% 10%,rgba(72,132,151,.22),transparent 35%),radial-gradient(circle at 16% 86%,rgba(34,141,91,.17),transparent 36%),linear-gradient(145deg,#0b151c,#13242d 55%,#091219)}
body[data-mode="dark"][data-wallpaper="cloud"]{--app-wallpaper:radial-gradient(circle at 18% 18%,rgba(115,151,169,.15),transparent 27%),radial-gradient(circle at 80% 72%,rgba(73,112,129,.14),transparent 34%),linear-gradient(145deg,#0d171e,#192934 58%,#0b151b)}
body[data-mode="dark"][data-wallpaper="linen"]{--app-wallpaper:repeating-linear-gradient(0deg,rgba(202,224,234,.026) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(202,224,234,.02) 0 1px,transparent 1px 5px),linear-gradient(145deg,#101a21,#18252d)}
body[data-mode="dark"][data-wallpaper="none"]{--app-wallpaper:linear-gradient(145deg,#0b141a,#14222b 56%,#091218)}
body[data-mode="dark"][data-wallpaper="custom"] .app-shell{background-image:linear-gradient(rgba(4,11,16,.55),rgba(4,11,16,.62)),var(--custom-wallpaper)}
body[data-mode="dark"] .app-shell:before{background:linear-gradient(125deg,rgba(109,157,175,.035),rgba(0,0,0,.15) 72%)}
body[data-mode="dark"] .app-rail{background:linear-gradient(180deg,rgba(12,25,33,.95),rgba(6,15,21,.93));box-shadow:12px 0 34px rgba(0,0,0,.24)}
body[data-mode="dark"] .conversation-panel,
body[data-mode="dark"] .contacts-panel,
body[data-mode="dark"] .profile-panel{
  border-color:rgba(225,239,245,.055);
  background:linear-gradient(158deg,rgba(24,39,49,.90),rgba(13,25,33,.86) 74%);
  box-shadow:inset -1px 0 rgba(255,255,255,.025),10px 0 32px rgba(0,0,0,.10);
  backdrop-filter:blur(28px) saturate(1.12);
  color:var(--ink);
}
body[data-mode="dark"] .chat-panel{
  background:radial-gradient(circle at 88% 9%,rgba(93,147,165,.075),transparent 35%),linear-gradient(145deg,rgba(8,17,23,.55),rgba(16,29,37,.68));
  box-shadow:inset 16px 0 42px rgba(0,0,0,.10);
  backdrop-filter:blur(13px) saturate(1.08);
}
body[data-mode="dark"] .chat-panel:before{opacity:.13;background-image:radial-gradient(circle at 20% 40%,rgba(161,205,219,.14) 1px,transparent 1.5px)}

body[data-mode="dark"] .list-header,
body[data-mode="dark"] .profile-panel>header,
body[data-mode="dark"] .chat-header{color:var(--ink)}
body[data-mode="dark"] .search-box,
body[data-mode="dark"] .composer-field{border-color:var(--dark-border);background:var(--dark-field);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
body[data-mode="dark"] .search-box input,
body[data-mode="dark"] .composer textarea{color:var(--ink);caret-color:var(--accent)}
body[data-mode="dark"] .search-box input::placeholder,
body[data-mode="dark"] .composer textarea::placeholder{color:#718690}
body[data-mode="dark"] .search-action,
body[data-mode="dark"] .tool-button{border:1px solid var(--dark-border);background:#1b2a34;color:#c6d4db;box-shadow:0 5px 14px rgba(0,0,0,.18)}
body[data-mode="dark"] .policy-note,
body[data-mode="dark"] .contact-intro{border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 12%,#14222b),#17262f);box-shadow:0 8px 18px rgba(0,0,0,.14);color:var(--ink)}
body[data-mode="dark"] .policy-note span,
body[data-mode="dark"] .contact-intro span{color:var(--dark-muted)}

body[data-mode="dark"] .conversation-item,
body[data-mode="dark"] .contact-card{color:var(--ink)}
body[data-mode="dark"] .conversation-item:hover{background:rgba(49,72,84,.58)}
body[data-mode="dark"] .conversation-item.active,
body[data-mode="dark"] .contact-card{border-color:var(--dark-border);background:linear-gradient(145deg,#22343f,#192b33);box-shadow:0 10px 22px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04)}
body[data-mode="dark"] .team-invite-card{border-color:color-mix(in srgb,var(--accent) 42%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 16%,#1a2a33),#172831)}
body[data-mode="dark"] .conversation-copy span,
body[data-mode="dark"] .conversation-time,
body[data-mode="dark"] .contact-copy em,
body[data-mode="dark"] .profile-card small,
body[data-mode="dark"] .profile-card em,
body[data-mode="dark"] .settings-card small,
body[data-mode="dark"] .settings-card em{color:var(--dark-muted)}
body[data-mode="dark"] .contact-chat-icon{background:linear-gradient(180deg,#243944,#192b33);box-shadow:0 5px 11px rgba(0,0,0,.2);color:color-mix(in srgb,var(--accent) 78%,#fff)}
body[data-mode="dark"] .contact-tools button{border-color:var(--dark-border);background:linear-gradient(160deg,#21333e,#17262f);box-shadow:0 8px 18px rgba(0,0,0,.19),inset 0 1px 0 rgba(255,255,255,.04);color:#d8e3e8}
body[data-mode="dark"] .contact-tool-art{border-color:rgba(255,255,255,.24)!important;box-shadow:0 10px 20px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.2)!important}

body[data-mode="dark"] .profile-panel>header{background:linear-gradient(180deg,rgba(20,34,43,.98),rgba(20,34,43,.8))}
body[data-mode="dark"] .profile-card{
  border-color:rgba(226,239,246,.09);
  background:linear-gradient(145deg,rgba(50,67,78,.84),rgba(25,39,48,.80));
  box-shadow:0 18px 42px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.07);
  color:var(--ink);
}
body[data-mode="dark"] .settings-card{
  border-color:rgba(226,239,246,.075);
  background:linear-gradient(155deg,rgba(37,53,63,.84),rgba(20,33,42,.82));
  box-shadow:0 15px 34px rgba(0,0,0,.19),inset 0 1px rgba(255,255,255,.05);
  color:var(--ink);
}
body[data-mode="dark"] .profile-card strong,
body[data-mode="dark"] .settings-card b{color:#f2f7f9}
body[data-mode="dark"] .profile-card>i,
body[data-mode="dark"] .settings-card i{color:#78909c}
body[data-mode="dark"] .settings-card button{border-color:var(--dark-border);color:var(--ink)}
body[data-mode="dark"] .settings-card button:hover{background:rgba(78,107,120,.14)}
body[data-mode="dark"] .settings-card .wallet-setting-row{border-color:var(--dark-border)}
body[data-mode="dark"] .settings-card .wallet-inline-actions button{border-color:rgba(241,158,74,.3);background:linear-gradient(180deg,#2c2925,#211f1d);box-shadow:0 4px 10px rgba(0,0,0,.16);color:#ffad5b}
body[data-mode="dark"] .profile-logout{border:1px solid rgba(245,111,111,.18);background:#1c2931;color:#ff8585}

body[data-mode="dark"] .chat-header,
body[data-mode="dark"] .composer,
body[data-mode="dark"] .emoji-panel{border-color:var(--dark-border);background:rgba(16,28,36,.94);color:var(--ink);box-shadow:0 10px 28px rgba(0,0,0,.2)}
body[data-mode="dark"] .group-notice,
body[data-mode="dark"] .pinned-message-bar,
body[data-mode="dark"] .reply-bar{border-color:var(--dark-border);background:rgba(25,42,51,.92);box-shadow:0 7px 20px rgba(0,0,0,.18);color:var(--ink)}
body[data-mode="dark"] .group-notice span,
body[data-mode="dark"] .pinned-message-bar span,
body[data-mode="dark"] .reply-bar span{color:#a7b6be}
body[data-mode="dark"] .message-bubble{border-color:rgba(220,235,242,.12);background:linear-gradient(145deg,rgba(31,47,57,.96),rgba(24,39,48,.94));box-shadow:0 12px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04);color:#edf4f7}
body[data-mode="dark"] .message-row.own .message-bubble{border-color:rgba(87,203,143,.2);background:linear-gradient(145deg,#184b35,#173c2e);box-shadow:0 12px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);color:#effaf4}
body[data-mode="dark"] .reply-quote{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:rgba(8,17,22,.24)}
body[data-mode="dark"] .file-card,
body[data-mode="dark"] .message-actions button{border-color:var(--dark-border);background:#15242d;color:#d9e4e9}
body[data-mode="dark"] .system-message,
body[data-mode="dark"] .deleted-message,
body[data-mode="dark"] .empty-chat p{color:#8fa2ac}
body[data-mode="dark"] .empty-chat>span{background:#1d313c;color:#8eb4c4}
body[data-mode="dark"] .account-alert{background:#3c2a1e;color:#ffc083}
body[data-mode="dark"] .emoji-tabs{border-color:var(--dark-border);background:rgba(16,28,36,.98)}
body[data-mode="dark"] .emoji-tabs button,
body[data-mode="dark"] .emoji-panel button{color:#dfe8ec}
body[data-mode="dark"] .emoji-tabs button.active,
body[data-mode="dark"] .emoji-panel button:hover{background:#233a34;color:#77dfa7}
body[data-mode="dark"] .classic-emoji small{color:#9dafb8}
body[data-mode="dark"] .attachment-menu{border-color:var(--dark-border);background:rgba(23,38,47,.97);box-shadow:0 18px 45px rgba(0,0,0,.34)}
body[data-mode="dark"] .attachment-menu label,
body[data-mode="dark"] .attachment-menu button{background:#20313b;color:#c7d5dc}
body[data-mode="dark"] .attachment-menu span{background:#15232c;color:#65d69a}
body[data-mode="dark"] .mobile-tabs{border-color:var(--dark-border);background:rgba(14,25,32,.97)!important}
body[data-mode="dark"] .mobile-tabs button{color:#879aa4}
body[data-mode="dark"] .mobile-tabs button.active{color:#54d993}

body[data-mode="dark"] dialog,
body[data-mode="dark"] .result-dialog,
body[data-mode="dark"] .sheet-dialog{border:1px solid var(--dark-border);background:linear-gradient(155deg,#1b2b35,#121f27);box-shadow:0 30px 80px rgba(0,0,0,.5);color:var(--ink)}
body[data-mode="dark"] .result-dialog p{color:var(--dark-muted)}
body[data-mode="dark"] .dialog-close{background:#263842;color:#dbe5e9}
body[data-mode="dark"] .auth-screen{background:radial-gradient(circle at 14% 18%,rgba(34,119,78,.22),transparent 34%),radial-gradient(circle at 86% 8%,rgba(54,99,160,.2),transparent 30%),linear-gradient(145deg,#111d25,#0b141a)}
body[data-mode="dark"] .auth-card{border-color:var(--dark-border);background:rgba(20,32,41,.92);box-shadow:0 28px 70px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05)}
body[data-mode="dark"] .auth-tabs{background:#101d25}
body[data-mode="dark"] .auth-tabs button{color:#93a7b2}
body[data-mode="dark"] .auth-tabs button.active{background:#253741;color:#f1f6f8;box-shadow:0 5px 15px rgba(0,0,0,.24)}
body[data-mode="dark"] .auth-form label span,
body[data-mode="dark"] .sheet-dialog form>label span{color:#c5d2d8}
body[data-mode="dark"] .auth-form input,
body[data-mode="dark"] .sheet-dialog input,
body[data-mode="dark"] .sheet-dialog textarea,
body[data-mode="dark"] .sheet-dialog select,
body[data-mode="dark"] .result-dialog form input,
body[data-mode="dark"] .wallet-unlock-dialog input{border-color:var(--dark-border);background:var(--dark-field);color:var(--ink)}
body[data-mode="dark"] .auth-form input:focus,
body[data-mode="dark"] .sheet-dialog input:focus,
body[data-mode="dark"] .sheet-dialog textarea:focus,
body[data-mode="dark"] .wallet-unlock-dialog input:focus{border-color:color-mix(in srgb,var(--accent) 70%,#fff);background:#162832}

body[data-mode="dark"] .info-list div,
body[data-mode="dark"] .favorite-list>div,
body[data-mode="dark"] .device-list>div,
body[data-mode="dark"] .sticker-manager>div{background:#1d2e38;color:var(--ink)}
body[data-mode="dark"] .info-list span,
body[data-mode="dark"] .favorite-list small,
body[data-mode="dark"] .device-list small{color:var(--dark-muted)}
body[data-mode="dark"] .favorite-list button,
body[data-mode="dark"] .device-list button{background:#2b3941;color:#ff8585}
body[data-mode="dark"] .settings-note{background:#193228;color:#a9d4ba}
body[data-mode="dark"] .segmented label{border:1px solid var(--dark-border);background:#1a2a34;color:#c4d1d7}
body[data-mode="dark"] .segmented label:has(input:checked){border-color:color-mix(in srgb,var(--accent) 70%,#fff);background:color-mix(in srgb,var(--accent) 18%,#17252e);color:#f3f8f9}
body[data-mode="dark"] .theme-grid input:checked+span,
body[data-mode="dark"] .wallpaper-grid input:checked+span{border-color:#17242c;outline-color:color-mix(in srgb,var(--accent) 78%,#fff)}
body[data-mode="dark"] .wallet-preview-banner{background:linear-gradient(145deg,#3a301d,#272619);color:#f5d899}
body[data-mode="dark"] .wallet-preview-form>label>span{color:#b5c3ca}
body[data-mode="dark"] .wallet-preview-form>label>div,
body[data-mode="dark"] .wallet-preview-form select{border-color:var(--dark-border);background:#14232c;color:var(--ink)}
body[data-mode="dark"] .checkin-calendar-wrap{background:#17252e;color:var(--ink)}
body[data-mode="dark"] .calendar-head button{border-color:var(--dark-border);background:#22343e;color:#dbe5e9}
body[data-mode="dark"] .calendar-day{background:#21323c;color:#c0ced5}
body[data-mode="dark"] .calendar-day.missed{background:#1a2831;color:#71848e}
body[data-mode="dark"] .calendar-day.future{background:#18262f;color:#536974}
body[data-mode="dark"] .team-card{border-color:color-mix(in srgb,var(--accent) 32%,transparent);background:linear-gradient(145deg,#193128,#17252e);box-shadow:0 12px 26px rgba(0,0,0,.2)}
body[data-mode="dark"] .team-card>p,
body[data-mode="dark"] .team-members span{color:var(--dark-muted)}
body[data-mode="dark"] .team-link-box,
body[data-mode="dark"] .team-members div{background:#13242c;color:#c8d5db}
body[data-mode="dark"] .identity-safety-note{background:#372f1f;color:#f0d18f}
body[data-mode="dark"] .identity-detect{border-color:var(--dark-border);background:#172731;color:var(--ink)}
body[data-mode="dark"] .identity-detect span{color:var(--dark-muted)}
body[data-mode="dark"] .identity-detect[data-state="success"]{border-color:#367d59;background:#173728;color:#8ce0af}
body[data-mode="dark"] .identity-detect[data-state="error"]{border-color:#87494d;background:#3a2226;color:#ff9ea2}
body[data-mode="dark"] .wallet-reserved-actions button{border-color:#43535d;background:#1a2932;color:#8799a3}
body[data-mode="dark"] .wallet-filter button{background:#20313b;color:#b5c5cc}
body[data-mode="dark"] .wallet-filter button.active{background:var(--accent);color:#fff}
body[data-mode="dark"] .wallet-ledger>div{border-color:var(--dark-border)}
body[data-mode="dark"] .wallet-ledger small,
body[data-mode="dark"] .wallet-ledger>p{color:var(--dark-muted)}
body[data-mode="dark"] .activity-dialog .activity-hero{background:linear-gradient(145deg,#382f20,#3a2424);color:#f5e7d1}
body[data-mode="dark"] .activity-dialog .activity-hero.quiz{background:linear-gradient(145deg,#1e3042,#2d2947);color:#e7e7ff}
body[data-mode="dark"] *{scrollbar-color:#536b77 #14232c}

.toast.toast-in-dialog{z-index:2147483647;bottom:24px;max-width:min(520px,calc(100% - 36px));background:rgba(8,18,24,.97);box-shadow:0 16px 42px rgba(0,0,0,.44),0 0 0 1px rgba(255,255,255,.16);filter:none;backdrop-filter:none}