:root{
  color-scheme:light;
  --bg:#f2f2f5;
  --surface:#ffffff;
  --surface-2:#f0f0f3;
  --surface-3:#e6e6ea;
  --border:#e3e3e8;
  --border-strong:#d3d3d9;
  --text:#1c1c1e;
  --text-2:#6e6e73;
  --text-3:#9a9aa1;
  --accent:#007aff;
  --accent-hover:#1f8bff;
  --accent-active:#0062cc;
  --accent-soft:rgba(0,122,255,.10);
  --accent-soft-strong:rgba(0,122,255,.2);
  --danger:#ff3b30;
  --danger-soft:rgba(255,59,48,.1);
  --mine-bubble:#007aff;
  --theirs-bubble:#e9e9eb;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --shadow-modal:0 20px 50px -14px rgba(28,28,30,.22), 0 0 0 1px rgba(28,28,30,.04);
  --shadow-card:0 1px 2px rgba(28,28,30,.06), 0 0 0 1px rgba(28,28,30,.03);
  /* iOS system-color palette — 8 hues chosen to stay visually distinct
     even at small avatar-circle size (two closely-related greens/oranges
     in an earlier version were indistinguishable at a glance) */
  --av-0:#007aff; --av-1:#ff3b30; --av-2:#34c759; --av-3:#ff9500;
  --av-4:#af52de; --av-5:#ff2d55; --av-6:#00b8d9; --av-7:#5856d6;
}
*{box-sizing:border-box}
html{height:100%}
body{
  margin:0;color:var(--text);
  background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',system-ui,Segoe UI,Arial,sans-serif;
  font-size:14.5px;line-height:1.45;
  height:100vh;height:100dvh;overflow:hidden;-webkit-text-size-adjust:100%;
  display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* A flat, textureless canvas is the single biggest "generated UI" tell —
   this dot grid is subtle enough to read as intentional craft rather than
   decoration, at low enough opacity it never competes with content. Applied
   directly on surfaces that paint their own opaque background (chat-main,
   auth form column), not just body, since those would otherwise cover it. */
.chat-main,.auth-form-col{
  background-color:var(--bg);
  background-image:radial-gradient(rgba(28,28,30,.05) 1px, transparent 1px);
  background-size:22px 22px;
}
#offline-banner{background:var(--danger);color:#fff;text-align:center;font-size:.8rem;font-weight:500;padding:7px;padding-top:calc(7px + env(safe-area-inset-top))}
#app{flex:1;min-height:0;display:flex;flex-direction:column}
.hidden{display:none!important}

/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px}
*::-webkit-scrollbar-thumb:hover{background:#b8b8c0}

/* ---------- icons ---------- */
.icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;display:block;flex-shrink:0}
.icon-muted{color:var(--text-3)}

/* ---------- typography / forms ---------- */
.brand-mark{width:44px;height:44px;border-radius:12px;background:linear-gradient(155deg,var(--accent),var(--accent-active));display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:16px;box-shadow:0 6px 16px -4px rgba(0,122,255,.45);flex-shrink:0}

/* ---------- auth screen: split shell, not a floating centered card ---------- */
.auth-shell{display:flex;min-height:100vh;min-height:100dvh;width:100%}
.auth-brand{
  flex:0 0 42%;max-width:520px;background:#111114;color:#f2f2f5;
  display:flex;align-items:center;position:relative;overflow:hidden;padding:56px;
}
.auth-brand::before{content:"";position:absolute;top:-15%;left:-15%;width:75%;height:75%;
  background:radial-gradient(circle,rgba(0,122,255,.24),transparent 65%);pointer-events:none}
.auth-brand::after{content:"";position:absolute;bottom:-25%;right:-20%;width:75%;height:75%;
  background:radial-gradient(circle,rgba(255,149,0,.12),transparent 65%);pointer-events:none}
.auth-brand-inner{position:relative;z-index:1;max-width:340px}
.auth-brand .brand-mark{width:52px;height:52px;border-radius:14px;margin-bottom:26px}
.auth-brand h1{font-size:1.85rem;font-weight:800;letter-spacing:-.02em;margin:0 0 14px;color:#fff}
.auth-brand p.sub{color:#adadb3;font-size:.92rem;line-height:1.6;margin:0 0 30px}
.auth-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}
.auth-facts li{display:flex;align-items:flex-start;gap:10px;font-size:.83rem;color:#c7c7cc;line-height:1.4}
.auth-facts .icon{width:16px;height:16px;color:#5eb0ff;flex-shrink:0;margin-top:1px;stroke-width:2}

.auth-form-col{flex:1;display:flex;align-items:center;justify-content:center;padding:32px}
.auth-form-card{width:100%;max-width:340px}
.auth-form-card h1{font-size:1.28rem;font-weight:700;margin:0 0 5px;letter-spacing:-.01em}
.auth-form-card p.sub{color:var(--text-2);font-size:.85rem;margin:0 0 22px;line-height:1.5}
.auth-mobile-brand{display:none}
label{display:block;font-size:.78rem;font-weight:500;color:var(--text-2);margin:14px 0 6px}
input[type=text],input[type=password]{
  width:100%;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);
  background:var(--surface-2);color:var(--text);font-size:16px;font-family:inherit;
  transition:border-color .15s,box-shadow .15s;
}
input[type=text]::placeholder,input[type=password]::placeholder{color:var(--text-3)}
input[type=text]:focus,input[type=password]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input[readonly]{color:var(--text-2);cursor:default}
.input-with-btn{display:flex;gap:6px;align-items:stretch}
.input-with-btn input{flex:1;min-width:0}
.input-with-btn .icon-btn{background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-sm)}
.input-with-btn .icon-btn:hover{background:var(--surface-3)}
.input-with-btn .icon-btn.copied{color:var(--accent);border-color:var(--accent)}

button{cursor:pointer;border:none;border-radius:var(--radius-sm);padding:10px 16px;font-size:.88rem;font-weight:600;font-family:inherit;touch-action:manipulation;transition:background-color .15s,color .15s,opacity .15s,transform .05s}
button:active{transform:scale(.98)}
button:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.msg-delete:focus-visible,.user-item-remove:focus-visible{outline-offset:0;border-radius:5px}
.btn-primary{background:var(--accent);color:#fff;width:100%;margin-top:20px;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:active{background:var(--accent-active)}
.btn-inline{width:auto;margin-top:0;flex-shrink:0}
.btn-icon-label{display:inline-flex;align-items:center;gap:7px}
.btn-icon-label .icon{width:16px;height:16px}
.btn-link{background:none;color:var(--accent);padding:4px;font-weight:500;width:100%;margin-top:12px;font-size:.85rem}
.btn-link:hover{color:var(--accent-hover)}
.btn-secondary{background:var(--surface-3);color:var(--text);border:1px solid var(--border-strong)}
.btn-secondary:hover{background:#d8d8de}
.error-msg{color:var(--danger);font-size:.82rem;margin-top:10px;min-height:1em;line-height:1.4}
.error-msg.success{color:var(--accent)}
.notice{background:#eaf9ea;border:1px solid #bfe6b8;color:#1f6f2b;font-size:.8rem;padding:10px;border-radius:var(--radius-sm);margin-top:12px}

/* ---------- avatars ---------- */
.avatar{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:32px;height:32px;border-radius:50%;color:#fff;font-weight:600;font-size:.74rem;
  letter-spacing:.02em;user-select:none;
}
.avatar.sm{width:26px;height:26px;font-size:.66rem}
.avatar.md{width:38px;height:38px;font-size:.78rem}
.avatar.group{border-radius:9px}

/* ---------- layout shell ---------- */
.chat-layout{flex:1;display:flex;min-height:0}
.sidebar{width:272px;border-right:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column}
.sidebar-header{padding:14px 12px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:8px}
.me-row{display:flex;align-items:center;gap:9px;min-width:0}
.sidebar-header .me{font-weight:600;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-actions{display:flex;align-items:center;flex-shrink:0}
.icon-btn{background:none;color:var(--text-2);padding:7px;line-height:0;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center}
.icon-btn:hover{color:var(--text);background:var(--surface-3)}
.icon-btn:active{transform:scale(.94)}
.btn-back{display:none;margin-right:2px}

.menu-wrap{position:relative;display:inline-flex}
.dropdown-menu{
  position:absolute;top:calc(100% + 6px);right:0;min-width:208px;background:var(--surface-3);
  border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-modal);
  padding:6px;z-index:20;
}
.dropdown-item{
  width:100%;background:none;color:var(--text);font-weight:500;font-size:.85rem;
  padding:9px 10px;border-radius:var(--radius-sm);display:flex;align-items:center;gap:10px;
  text-align:left;margin:0;
}
.dropdown-item:hover{background:var(--surface-2)}
.dropdown-item .icon{width:17px;height:17px;color:var(--text-2)}
.dropdown-item.danger{color:var(--danger)}
.dropdown-item.danger .icon{color:var(--danger)}
.dropdown-item.danger:hover{background:var(--danger-soft)}
.dropdown-sep{height:1px;background:var(--border);margin:6px 4px}

.sidebar-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding:4px 8px 8px}
.list-section-header{padding:14px 6px 6px;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);font-weight:700;display:flex;justify-content:space-between;align-items:center}
.user-list{display:flex;flex-direction:column;gap:1px}
.user-item{
  padding:8px 8px 8px 11px;border-radius:var(--radius-sm);cursor:pointer;font-size:.87rem;
  display:flex;align-items:center;gap:10px;transition:background-color .12s;
  border-left:3px solid transparent;
}
.user-item:hover{background:var(--surface-2)}
.user-item.active{background:var(--accent-soft-strong);border-left-color:var(--accent)}
.user-item.active .user-item-name{color:var(--text);font-weight:600}
/* two-line body — name+time on top, last-message preview+unread below,
   the same rhythm every real chat app uses so the sidebar reads as a
   list of live conversations, not just a bare contact directory */
.user-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.user-item-top{display:flex;align-items:baseline;gap:6px}
.user-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.user-item-time{flex-shrink:0;font-size:.71rem;color:var(--text-3);font-weight:400}
.user-item.active .user-item-time{color:var(--accent)}
.user-item-bottom{display:flex;align-items:center;gap:6px}
.user-item-preview{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.79rem;color:var(--text-3)}
.user-item.active .user-item-preview{color:var(--text-2)}
.user-item-remove{background:none;color:var(--text-3);padding:5px;border-radius:6px;opacity:.4;flex-shrink:0;display:flex;align-self:flex-start;margin-top:1px}
.user-item-remove .icon{width:15px;height:15px}
.user-item-remove:hover{color:var(--danger);background:var(--danger-soft)}
@media (hover:hover){
  .user-item-remove{opacity:0}
  .user-item:hover .user-item-remove{opacity:.55}
  .user-item-remove:hover{opacity:1!important}
}
.unread-badge{background:var(--accent);color:#fff;border-radius:999px;font-size:.68rem;font-weight:700;padding:2px 6.5px;min-width:18px;text-align:center;flex-shrink:0}

/* ---------- chat main ---------- */
.chat-main{flex:1;display:flex;flex-direction:column;min-width:0}
.chat-header{padding:11px 16px;border-bottom:1px solid var(--border);font-weight:600;font-size:.92rem;background:var(--surface);display:flex;align-items:center;gap:10px}
#chat-header-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#ttl-select{
  margin-left:auto;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);padding:5px 9px;font-size:.76rem;font-weight:500;font-family:inherit;max-width:44%;
}
#ttl-select:focus{outline:none;border-color:var(--accent)}
.chat-header #btn-search,.chat-header #btn-group-info{margin-left:auto}
.chat-header #btn-group-info{margin-left:0}

.session-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--border)}
.session-row:last-child{border-bottom:none}
.session-line1{font-size:.87rem;font-weight:500}
.session-line2{font-size:.74rem;color:var(--text-3);margin-top:2px}

/* ---------- messages ---------- */
.messages{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;align-items:center}
.messages-col{width:100%;max-width:800px;display:flex;flex-direction:column;gap:3px;flex:1}
.msg{
  max-width:min(65%,480px);padding:8px 13px;border-radius:var(--radius-lg);font-size:.9rem;line-height:1.42;
  word-wrap:break-word;white-space:pre-wrap;box-shadow:var(--shadow-card);position:relative;margin:2px 0 0;
}
.msg:not(.grouped){margin-top:12px}
.messages-col > .msg:first-child{margin-top:0}
.msg.mine{align-self:flex-end;background:var(--mine-bubble);color:#fff;border-bottom-right-radius:5px}
.msg.theirs{align-self:flex-start;background:var(--theirs-bubble);color:var(--text);border-bottom-left-radius:5px}
.msg-sender{display:block;font-size:.72rem;font-weight:700;color:var(--accent);margin-bottom:3px}
.msg .meta{display:flex;align-items:center;gap:4px;font-size:.67rem;color:var(--text-3);margin-top:4px}
.msg.mine .meta{color:rgba(255,255,255,.75)}
.msg.broken{color:var(--danger);font-style:italic}
.msg .ticks{display:inline-flex;align-items:center;opacity:.7}
.msg .ticks svg{width:13px;height:13px}
.msg .ticks.double svg:last-child{margin-left:-7px}
.msg .ticks.read{opacity:1}
.msg-delete{background:none;color:var(--text-3);padding:2px;margin-left:2px;border-radius:5px;opacity:.4;display:inline-flex}
.msg.mine .msg-delete{color:rgba(255,255,255,.75)}
.msg:hover .msg-delete{opacity:.8}
.msg-delete:hover{opacity:1!important;color:var(--danger)}
.msg.mine .msg-delete:hover{color:#fff}
.msg-delete .icon{width:13px;height:13px}
.msg-deleted{font-style:italic;color:var(--text-3);display:flex;align-items:center;gap:6px}
.msg-deleted .icon{width:14px;height:14px}

.file-bubble{display:flex;align-items:center;gap:10px;cursor:pointer;padding:2px 0}
.file-bubble .file-icon-wrap{width:36px;height:36px;border-radius:9px;background:rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.file-bubble .file-icon-wrap .icon{width:18px;height:18px;color:var(--text-2)}
.file-bubble .file-name{font-size:.85rem;font-weight:500;word-break:break-all}
.file-bubble .file-size{font-size:.72rem;color:var(--text-3);display:flex;align-items:center;gap:4px;margin-top:1px}
.file-bubble .file-size .icon{width:11px;height:11px}
.msg.mine .file-bubble .file-icon-wrap{background:rgba(255,255,255,.2)}
.msg.mine .file-bubble .file-icon-wrap .icon{color:#fff}
.msg.mine .file-bubble .file-size{color:rgba(255,255,255,.75)}
.msg-image{max-width:100%;border-radius:var(--radius-md);display:block;cursor:pointer;margin-bottom:5px}

/* location share — deliberately no embedded live map tile (that would leak
   the coordinates to whichever tile provider renders it, passively, before
   anyone clicks anything); just a card with the raw coordinates and an
   explicit opt-in link the recipient clicks themselves when they want to
   actually open a map. */
.location-card{display:flex;align-items:center;gap:10px;padding:2px 0}
.location-card .location-icon-wrap{width:36px;height:36px;border-radius:9px;background:rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.location-card .location-icon-wrap .icon{width:18px;height:18px;color:var(--text-2)}
.location-card .location-title{font-size:.85rem;font-weight:500}
.location-card .location-coords{font-size:.72rem;color:var(--text-3);margin-top:1px}
.location-card .location-link{font-size:.78rem;color:inherit;text-decoration:underline;text-underline-offset:2px}
.msg.mine .location-card .location-icon-wrap{background:rgba(255,255,255,.2)}
.msg.mine .location-card .location-icon-wrap .icon{color:#fff}
.msg.mine .location-card .location-coords{color:rgba(255,255,255,.75)}

.search-bar{display:flex;align-items:center;gap:8px;padding:9px 16px;border-bottom:1px solid var(--border);background:var(--surface)}
.search-bar input{flex:1;min-width:0;background:transparent;border:none;padding:4px 0;font-size:.88rem}
.search-bar input:focus{outline:none;box-shadow:none;border:none}

.composer{display:flex;align-items:center;gap:8px;padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--surface)}
.composer input{flex:1;min-width:0;border-radius:21px;padding:10px 17px;background:var(--surface-2)}
.btn-send{width:38px;height:38px;padding:0;margin-top:0;border-radius:50%;display:flex;align-items:center;justify-content:center}
.btn-send .icon{width:17px;height:17px;margin-left:-1px}

.empty-state{margin:auto;color:var(--text-3);font-size:.87rem;text-align:center;max-width:280px;line-height:1.5;display:flex;flex-direction:column;align-items:center;gap:14px}
.empty-state-icon-wrap{width:52px;height:52px;border-radius:15px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center}
.empty-state-icon{width:24px;height:24px;color:var(--accent);opacity:.9;stroke-width:1.6}

.day-sep{display:flex;justify-content:center;margin:16px 0 8px}
.day-sep span{background:var(--surface-2);color:var(--text-2);font-size:.72rem;font-weight:600;padding:4px 13px;border-radius:999px;border:1px solid var(--border)}

/* Mobile: one pane at a time (contact list <-> conversation), like a normal messenger */
@media (max-width: 860px){
  .auth-brand{display:none}
  .auth-mobile-brand{display:flex;align-items:center;gap:10px;margin-bottom:26px}
  .auth-mobile-brand .brand-mark{width:34px;height:34px;border-radius:10px;margin-bottom:0}
  .auth-mobile-title{font-size:1.1rem;font-weight:800;letter-spacing:-.01em}
}
@media (max-width: 720px){
  .sidebar{width:100%;padding-top:env(safe-area-inset-top)}
  .sidebar-header{padding-top:calc(14px + env(safe-area-inset-top))}
  .btn-back{display:inline-flex}
  .chat-layout:not(.chat-open) .chat-main{display:none}
  .chat-layout.chat-open .sidebar{display:none}
  .msg{max-width:82%}
  .modal{width:94%;max-height:85vh;overflow-y:auto}
}

.modal-backdrop{position:fixed;inset:0;background:rgba(5,6,8,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:10}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;max-width:440px;width:90%;box-shadow:var(--shadow-modal)}
.modal h2{margin-top:0;font-size:1.08rem;font-weight:700;letter-spacing:-.01em}
.modal textarea{width:100%;min-height:90px;background:var(--surface-2);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:9px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;resize:vertical}
.modal textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.modal .actions{display:flex;gap:8px;margin-top:16px;justify-content:flex-end}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#e0362c}

/* ---------- toast notifications ---------- */
#toast-stack{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;padding-top:env(safe-area-inset-top)}
.toast{
  display:flex;align-items:center;gap:10px;background:var(--surface-3);border:1px solid var(--border-strong);
  border-radius:var(--radius-md);padding:11px 16px;box-shadow:var(--shadow-modal);font-size:.85rem;font-weight:500;
  max-width:min(90vw,420px);animation:toast-in .18s ease-out;pointer-events:auto;
}
.toast.error{border-color:rgba(255,59,48,.35)}
.toast.error .icon{color:var(--danger)}
.toast.success .icon{color:var(--accent)}
.toast.leaving{animation:toast-out .15s ease-in forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes toast-out{to{opacity:0;transform:translateY(-8px)}}

/* ---------- install banner (PWA) ---------- */
#install-banner{display:flex;align-items:center;gap:10px;background:var(--surface-2);border-bottom:1px solid var(--border);padding:9px 14px;font-size:.82rem}
#install-banner .icon{color:var(--accent);flex-shrink:0}

/* ---------- "Pokój widmo" (burn room) creation modal ----------
   Deliberately warmer than the rest of the app (see pokoj.html/pokoj.js)
   so the feature reads as visually distinct the moment the modal opens. */
.modal-burn-header{display:flex;align-items:center;gap:12px;margin-bottom:2px}
.modal-burn-badge{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(155deg,#ff9500,#ff3b30);box-shadow:0 4px 14px -4px rgba(255,90,0,.5)}
.modal-burn-badge .icon{width:19px;height:19px;color:#fff}
.modal-burn-header h2{margin:0}

.burn-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
@media (max-width:480px){.burn-options{grid-template-columns:1fr}}
.burn-options label{margin-top:0}
.burn-options select{
  width:100%;background:var(--surface-2);color:var(--text);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);padding:9px 10px;font-size:.85rem;font-family:inherit;
}
.burn-options select:focus{outline:none;border-color:var(--ember-1,#ff9500);box-shadow:0 0 0 3px rgba(255,149,0,.16)}
.burn-options input[type=text]{font-size:.85rem;padding:9px 10px}
.burn-options input[type=text]:focus{border-color:var(--ember-1,#ff9500);box-shadow:0 0 0 3px rgba(255,149,0,.16)}

.burn-pin-toggle{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:.85rem;font-weight:500;color:var(--text);cursor:pointer;user-select:none}
.burn-pin-toggle input{width:16px;height:16px;accent-color:var(--ember-1,#ff9500);cursor:pointer}
#burn-pin-fields{margin-top:10px}

.btn-ember{background:linear-gradient(135deg,#ff9500,#ff3b30);color:#fff;border:none}
/* .btn-primary:hover (background:var(--accent-hover)) outranks a bare
   .btn-ember on specificity — a class+pseudo-class beats a single class
   regardless of source order — so it silently won hover and flashed the
   button blue. Redeclaring the gradient here, not just brightness(), is
   what actually fixes it. */
.btn-ember:hover{background:linear-gradient(135deg,#ff9500,#ff3b30);filter:brightness(1.06)}
.btn-ember:active{filter:brightness(.94)}

.burn-link-ready{border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:14px;margin-top:2px;background:var(--surface-2)}
.burn-link-ready label{margin-top:0}
#install-banner span{flex:1}