:root{
  --bg:#0e1116; --panel:#151b24; --card:#0f141b; --border:#243144;
  --text:#e8eef6; --muted:#9bb0c7; --accent:#7c9cff; --accent-2:#9eaeff;
  --green:#22c55e; --red:#ef4444;
  --radius:12px; --gap:12px;
  --bg-image:none;
  --xp:#7c9cff;         /* for chips that reference --xp */
  --c1:#67e8f9;         /* cyan glow */
  --c2:#a78bfa;         /* purple glow */
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  isolation:isolate; /* prevents blend layers bleeding from ancestors */
}

/* Neon grid + corner glows (single, fixed layer) */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 12% -10%, color-mix(in oklab, var(--c1) 25%, transparent), transparent 60%),
    radial-gradient(1000px 700px at 88% 110%, color-mix(in oklab, var(--c2) 22%, transparent), transparent 60%),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 12px);
  background-position: 12% -10%, 88% 110%, 0 0, 0 0;
  background-size:     auto,      auto,      12px 12px, 12px 12px;
  background-repeat:   no-repeat, no-repeat, repeat,    repeat;
  background-blend-mode: screen, screen, normal, normal;
  filter: saturate(110%);
}

/* Subtle side rails */
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--c2) 16%, transparent) 0%,
      transparent 25%, transparent 75%,
      color-mix(in oklab, var(--c1) 16%, transparent) 100%);
  mix-blend-mode: screen;
  opacity:.8;
}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  height:48px; display:grid; grid-template-columns:1fr auto; align-items:center;
  background:rgba(10,14,20,.85); border-bottom:1px solid var(--border);
  backdrop-filter:blur(6px);
  padding:0 12px;
}
.topbar-center{ justify-self:center; transform:translateX(-14px) } /* optical center */
.logo-word{ letter-spacing:.14em; font-weight:800; opacity:.9 }
.topbar-right{ display:flex; gap:8px }
.icon-btn{
  background:transparent; border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:6px 8px; cursor:pointer;
}

/* ---------- App Grid ---------- */
.app{
  max-width:min(1600px,96vw); margin:10px auto 18px;
  display:grid; gap:var(--gap);
  grid-template-columns: 240px minmax(0,1fr) 360px;
}

/* ---------- Cards / Chrome ---------- */
.card,.panel,.toolbar,.drawer-card,.modal-card{
  background:rgba(21,27,36,.90);
  border:1px solid var(--border);
  border-radius:var(--radius);
  backdrop-filter:blur(6px);
}
.card-title{ padding:10px 12px; border-bottom:1px solid var(--border); font-weight:700 }
.card-title.tight{ padding:8px 12px }

/* ---------- LEFT NAV ---------- */
.col.left{ position:sticky; top:60px; align-self:start }
.nav-header{
  padding:10px 12px; font-weight:800; letter-spacing:.03em;
  background:rgba(255,255,255,.02); border:1px solid var(--border);
  border-radius:var(--radius); margin-bottom:8px;
}
.nav-list{ display:flex; flex-direction:column; gap:6px }
.nav-row{
  display:grid; grid-template-columns:24px 1fr 16px; align-items:center;
  gap:10px; padding:9px 10px; cursor:pointer; border-radius:10px;
  background:rgba(255,255,255,.02); border:1px solid var(--border);
  color:var(--text); text-align:left;
}
.nav-row:hover{ background:rgba(124,156,255,.08) }
.nav-row .nav-chevron{ justify-self:end; opacity:.6 }
.nav-accent{ background:#181308; border-color:#5b4515; color:#ffd86b }
.sidebar-footer{ margin-top:8px }
.chip{
  display:block; border:1px dashed var(--border); border-radius:10px;
  padding:8px 10px; background:#0c1219
}

/* ---------- CENTER ---------- */
.col.center{ display:flex; flex-direction:column; gap:12px }

/* Section block with thin header */
.section{
  background:rgba(21,27,36,.90); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
}
.section-h{
  padding:8px 12px; font-size:12px; letter-spacing:.08em;
  color:var(--muted); text-transform:uppercase; border-bottom:1px solid var(--border);
}

/* Rows (Titan Conquest style) */
.row-line, .row-link{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid #1c2736;
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.section .row-line:last-child,
.section .row-link:last-child{ border-bottom:0 }
.row-left{ display:flex; align-items:center; gap:10px; min-width:0 }
.row-ico{
  width:28px; height:28px; display:grid; place-items:center;
  background:#0b1220; border:1px solid var(--border); border-radius:8px;
}
.row-text{ min-width:0 }
.row-title{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.row-sub{ font-size:12px }
.row-right{ display:flex; align-items:center; gap:8px }
.badge{ border:1px solid var(--border); border-radius:999px; padding:4px 8px; font-size:12px }

/* Clickable row */
.row-link{ width:100%; background:transparent; color:var(--text); cursor:pointer }
.row-link:hover{ background:rgba(124,156,255,.08) }
.nav-chevron{ opacity:.7 }

/* Slim variant */
.row-line.slim{ padding:8px 12px }

/* Progress */
.progress{
  position:relative; height:8px; border-radius:999px; background:#0b1220;
  border:1px solid var(--border); overflow:hidden; margin:6px 0 2px;
}
.progress-fill{
  position:absolute; inset:0; transform-origin:left; transform:scaleX(var(--pct, 0));
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow:inset 0 0 10px rgba(124,156,255,.35);
  transition:transform .3s ease;
}
.progress{ position:relative; }
.progress-count{
  position:absolute; top:50%; right:.5rem; transform:translateY(-50%);
  font-weight:700; font-variant-numeric: tabular-nums; opacity:.95; pointer-events:none;
}
.goal-count{ font-weight:600; margin-left:.25rem; }

/* Auth panel */
.auth-panel{ border-top:1px solid var(--border); padding:10px 12px }
.auth-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
.auth-grid .btn{ grid-column:1 / -1 }
.blurbs{ margin:8px 0 0 0; padding-left:18px }

/* ---------- Utilities ---------- */
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.panel-title{ padding:10px 12px; font-weight:700 }
.row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.wrap{ flex-wrap:wrap }
.pill-row{ display:flex; align-items:center; gap:8px }
.btn{
  background:transparent; border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:7px 9px; cursor:pointer; font-size:13px;
  position:relative; overflow:visible; /* for holo hover glow */
}
.btn.accent{ background:var(--accent); border-color:transparent; color:#0a1020 }
.btn.pill{ background:#152133 }
.btn.big{ padding:10px 12px }
.muted{ color:var(--muted) }
.mt-4{ margin-top:4px } .mt-6{ margin-top:6px } .mt-8{ margin-top:8px }

/* Lists / items */
.list .item{
  display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:8px; margin:6px 0;
}
.title{ font-weight:700 }
.sub{ font-size:12px; color:var(--muted) }
#enemyList{ display:grid; grid-template-columns:repeat(2,minmax(260px,1fr)); gap:8px }
#enemyList .item{ margin:0 }

/* ---------- Right rail ---------- */
.col.right{
  position:sticky; top:60px; align-self:start;
  display:grid;
  grid-template-rows: 320px 200px 200px auto; /* Global Chat, Combat Log, Events, People */
  gap:12px; min-height:0;
}
.chat-card{ display:flex; flex-direction:column; min-height:0; }
.chat-head{
  display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center;
  border-bottom:1px solid var(--border); padding:8px 12px;
}
.chat-input{
  background:#0f1724; border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:8px 10px; font-size:13px; min-width:160px;
}
.chat-send{ padding:8px 10px }
.notice{
  padding:8px 12px; font-size:12px; color:#9ec0ff; border-bottom:1px solid var(--border);
  background:rgba(124,156,255,.08)
}
.link{ color:#9ec0ff; text-decoration:underline; cursor:pointer }
.chatbox{ flex:1 1 auto; min-height:0; overflow:auto; }
.people{ list-style:none; margin:0; padding:8px }
.people li{ padding:6px 4px; border-bottom:1px solid var(--border) }

/* HP bars */
.bar{ height:8px; background:#0b1220; border:1px solid var(--border); border-radius:999px; overflow:hidden; min-width:200px }
.bar.small{ height:6px }
.bar-fill{ height:100%; width:0; background:var(--green); transition:width .25s }
.bar-fill.enemy{ background:var(--red) }
.bar-text{ font-size:12px; color:var(--muted) }

/* Drawer & Modal */
.drawer,.modal{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; padding:12px }
.drawer.show,.modal.show{ display:flex }
.drawer-card{ padding:14px; max-width:680px; width:100% }
.drawer-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px }
.enemy-name{ font-weight:800 }
.hp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:8px 0 }
.modal-card{ padding:14px; max-width:520px; width:100% }
.modal-title{ font-weight:800; margin-bottom:8px }

/* Badges / enemy emphasis */
.badge.engaged{ background:#1a0f14; border-color:#3a1822; color:#fda4af }
#enemyList .item.boss{ border-color:#f59e0b; box-shadow:0 0 0 1px #f59e0b33 }
#enemyList .item.world-boss{ border-color:#ef4444; box-shadow:0 0 0 1px #ef444433 }
#enemyList .item.cache{ border-color:#34d399; box-shadow:0 0 0 1px #34d39933 }
.badge.boss{ border-color:#f59e0b } .badge.world{ border-color:#ef4444 } .badge.cache{ border-color:#34d399 }

/* Rarities */
.rarity-common{ color:#9aa0a6 }
.rarity-uncommon{ color:#34d399 }
.rarity-rare{ color:#60a5fa }
.rarity-epic{ color:#a78bfa }
.rarity-legendary{ color:#f59e0b }
.rarity-mythic{ color:#ef4444 }

/* ---------- Stat badges ---------- */
.stat-badge{
  display:inline-flex; align-items:center; line-height:1;
  font-weight:700; font-size:12px; padding:2px 8px;
  border-radius:999px; border:1px solid var(--border);
  background:rgba(255,255,255,.03);
}
.stat-badge + .stat-badge{ margin-left:6px; }

.stat-badge.stat-hp   { background:rgba(34,197,94,.12);  border-color:rgba(34,197,94,.45);  color:#93f5c3; }
.stat-badge.stat-atk  { background:rgba(96,165,250,.10); border-color:rgba(96,165,250,.35); color:#dbeafe; }
.stat-badge.stat-def  { background:rgba(251,191,36,.10); border-color:rgba(251,191,36,.40); color:#fde68a; }
.stat-badge.stat-gold { background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.40); color:#ffdb8a; }
.stat-badge.stat-lp   { background:rgba(167,139,250,.12); border-color:rgba(167,139,250,.40); color:#e9d5ff; }
.stat-badge.stat-xp   { background:rgba(124,93,255,.12); border:1px solid rgba(124,93,255,.4); color:#c8c2ff; }

.stat-badge.stat-ac {
  background: rgba(255, 221, 86, .12);
  border-color: rgba(255, 221, 86, .45);
  color: #ffe28a;
}

/* Top-of-patrol stat chips */
.top-chip{ margin-right:8px; }

/* Make Look Around stand out */
#btnLookAround.btn,
.btn.look-btn{
  background:#08c79d;
  border-color:#3b82f6;
  box-shadow: inset 0 0 0 1px rgba(19,236,171,.35);
}
#btnLookAround.btn:hover, .btn.look-btn:hover{ filter:brightness(1.15); }

/* ---------- Gear compare arrows ---------- */
.arrow{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 6px; border-radius:999px; font-size:12px;
  border:1px solid var(--border); font-weight:700;
}
.arrow.up   { color:#22c55e; border-color:rgba(34,197,94,.35);  background:rgba(34,197,94,.10); }
.arrow.down { color:#ef4444; border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.10); }

/* Auth toggle */
body.authed #createHeroPanel, body.authed [data-auth-panel]{ display:none !important }
#btnLogout{ display:none } body.authed #btnLogout{ display:inline-block }

/* Travel modal tweaks */
#zoneModal .modal-card{ max-width:780px }
#zoneModal .modal-card, #zoneButtons{ overflow:hidden }
#zoneButtons{ max-height:72vh; overflow-y:auto; padding-right:8px }
#zoneButtons .zone-section{
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:10px 12px; margin-bottom:12px; box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}
#zoneButtons .zone-title{ font-weight:700; margin:2px 0 8px; color:var(--text); opacity:.9 }
#zoneButtons details{ background:rgba(255,255,255,.03); border-radius:10px; padding:4px 8px; margin:6px 0 }
#zoneButtons details > summary{ cursor:pointer; list-style:none; padding:8px 0; font-weight:600 }
#zoneButtons details > summary::-webkit-details-marker{ display:none }
#zoneButtons .node-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px; padding:6px 0 10px }
#zoneButtons .node{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#zoneButtons .node[disabled]{ opacity:.55; cursor:not-allowed }

/* Chat message styling */
#chatBox{
  display:flex; flex-direction:column; gap:10px; padding:6px;
  font-size:13.5px; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word;
}
#chatBox .msg{ display:grid; grid-template-columns:64px 1fr; grid-template-areas:"time bubble"; column-gap:10px; align-items:flex-start }
#chatBox .msg.mine{ grid-template-columns:1fr 64px; grid-template-areas:"bubble time" }
#chatBox .msg-time{ grid-area:time; align-self:start; font-size:11px; color:var(--muted); opacity:.85; text-align:right; padding-top:6px }
#chatBox .msg.mine .msg-time{ text-align:center }
#chatBox .msg-bubble{ grid-area:bubble; max-width:48ch; padding:9px 11px; border-radius:12px; background:rgba(124,156,255,.08); border:1px solid rgba(124,156,255,.22); box-shadow:0 1px 0 rgba(0,0,0,.22) inset }
#chatBox .msg.mine .msg-bubble{ background:rgba(124,156,255,.18); border-color:rgba(124,156,255,.35) }
#chatBox .msg-head{ margin-bottom:4px; line-height:1 }
#chatBox .msg-author{ display:inline-block; font-weight:700; font-size:12px; padding:2px 6px; border-radius:6px; border:1px solid rgba(124,156,255,.28); color:#dbe6ff; background:rgba(124,156,255,.16); white-space:nowrap }
#chatBox .msg-bubble{ --h:210 }
#chatBox .msg .msg-bubble{ background:hsl(var(--h) 28% 22% / .42); border-color:hsl(var(--h) 42% 48% / .50) }
#chatBox .msg .msg-author{ color:hsl(var(--h) 70% 85%); border-color:hsl(var(--h) 42% 48% / .45); background:hsl(var(--h) 28% 18% / .55) }
#chatBox .msg.mine .msg-author{ background:var(--accent); color:#0a1020; border-color:transparent }
#chatBox .msg.group .msg-time{ visibility:hidden }
#chatBox .msg.group .msg-head{ display:none }
#chatBox .msg.group .msg-bubble{ margin-top:-4px }

/* ---------- Patrol polish ---------- */
#view-patrol .toolbar{ display:flex; flex-direction:column; gap:10px; padding:8px 12px; }
#view-patrol .pill-row{ flex-wrap:wrap; }
#enemyList .item{ display:grid; grid-template-columns:1fr auto; align-items:center; }
#enemyList .item .btn{ white-space:nowrap; }

#monsterListContainer{ display:flex; align-items:center; gap:10px; padding:0 0 6px; }
#monsterList{ display:none; }

#btnLookAround{
  position:relative; border-radius:999px;
  padding:8px 14px 8px 36px; font-weight:600;
  background:linear-gradient(180deg, rgba(228,160,13,.452), rgba(228,160,13,.452));
  border:1px solid var(--border);
}
#btnLookAround::before{
  content:"📡";
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-size:14px; opacity:.9;
}
#btnLookAround.scanning{ cursor:wait; opacity:.8; }
#btnLookAround.scanning::after{
  content:""; position:absolute; left:22px; top:50%;
  width:6px; height:6px; border-radius:999px; transform:translate(-50%,-50%);
  box-shadow:0 0 0 0 rgba(13,207,100,.7);
  animation: ping 1.4s infinite;
}
@keyframes ping{
  0%{   box-shadow:0 0 0 0   rgba(124,156,255,.6); }
  70%{  box-shadow:0 0 0 12px rgba(124,156,255,0); }
  100%{ box-shadow:0 0 0 0   rgba(124,156,255,0); }
}

/* Enemy list tiles */
#enemyList{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:10px; }
#enemyList .enemy-row{
  padding:10px; border-radius:12px; background:var(--card); border:1px solid var(--border);
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px;
  transition:transform .06s ease, border-color .2s ease, box-shadow .2s ease;
}
#enemyList .enemy-row:hover{
  transform:translateY(-1px);
  border-color:rgba(124,156,255,.35);
  box-shadow:0 0 0 1px rgba(124,156,255,.15) inset;
}
#enemyList .enemy-row .name{ font-weight:700; }
#enemyList .enemy-row .muted{ margin-top:4px; }
#enemyList .enemy-row .btn{ border-radius:999px; padding:8px 12px; white-space:nowrap; }
#enemyList .enemy-row.cache .btn{ background:var(--green); border-color:transparent; color:#0a1020; }
#view-patrol .grid-2 > .card:only-child{ grid-column:1 / -1; }

/* Collections details/summary */
#view-collections details.zone-group{
  border:1px solid var(--panel-border,#2a2f3a); border-radius:12px;
  padding:8px 12px; margin:10px 0; background:rgba(255,255,255,0.02);
}
#view-collections details.zone-group > summary{
  cursor:pointer; list-style:none; font-size:14px; padding:6px 0 8px;
}
#view-collections details.zone-group > summary::-webkit-details-marker{ display:none; }
#view-collections details.zone-group[open] > summary{ margin-bottom:6px; }

.nav-row[disabled], .nav-row.disabled{ opacity:.55; pointer-events:none; }
#chipGoal.action{ box-shadow:0 0 0 2px var(--xp) inset; cursor:pointer; }

/* ---------- Visibility helpers ---------- */
.view{ display:none !important; }
.view.show{ display:block !important; }
[hidden]{ display:none !important; }

/* (Optional) highlight selected left-nav item */
.nav-row.active{
  background:rgba(124,156,255,.16);
  border-color:rgba(124,156,255,.25);
}

/* ---------- Responsive ---------- */
@media (max-width:1280px){
  .app{ grid-template-columns:220px minmax(0,1fr) }
  .col.right{ position:static; top:auto; grid-template-rows:auto; }
}
@media (max-width:1024px){
  #enemyList{ grid-template-columns:repeat(2,minmax(220px,1fr)) }
}
@media (max-width:720px){
  .app{ grid-template-columns:1fr; gap:8px; margin:8px auto }
  .col.left,.col.right{ position:static }
  .auth-grid{ grid-template-columns:1fr }
  #enemyList{ grid-template-columns:1fr }
}

/* ===========================
   HOLO PLATE (wrap clusters)
   =========================== */
.holo-plate{
  --holo-c1: var(--c1);
  --holo-c2: var(--c2);
  position:relative;
  padding:12px; border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)),
    rgba(16,20,28,.55);
  border:1px solid color-mix(in oklab, var(--accent) 20%, var(--border));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 0 1px rgba(0,0,0,.35);
}
.holo-plate::before{
  content:""; position:absolute; inset:-6px; z-index:-1; pointer-events:none;
  border-radius:inherit; background:linear-gradient(90deg, var(--holo-c1), var(--holo-c2));
  filter:blur(22px); opacity:.20;
}
.holo-plate::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%),
    linear-gradient(to right,  rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:100% 30%, 22px 100%, 100% 22px;
  mix-blend-mode:overlay; opacity:.18;
}
.holo-plate > .row-line,
.holo-plate > .row-link{ border-color:rgba(255,255,255,.06); background:rgba(255,255,255,.02); }
.holo-plate > .row-line:hover,
.holo-plate > .row-link:hover{ background:rgba(124,156,255,.10); }
.holo-plate.tight{ padding:8px; }

/* Button holo hover glow */
.btn::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  background:
    radial-gradient(24px 12px at 15% 50%, var(--c1), transparent 70%),
    radial-gradient(24px 12px at 85% 50%, var(--c2), transparent 70%);
  filter:blur(12px); opacity:0; transition:opacity .18s ease;
}
.btn:hover::after{ opacity:.35; }

/* Mail compose layout */
#mailModal .modal-inner,            /* whatever your inner box is called */
#mailCompose {
  max-height: min(80vh, 720px);
}

#mailCompose {
  display: grid;
  grid-template-rows: auto 1fr auto;   /* header | scroll | footer */
  gap: 10px;
  overflow: hidden;                     /* keep the grid from expanding */
  padding: 8px 0;
}

/* scrollable middle */
#mailCompose .attach-scroll {
  overflow: auto;
  padding-right: 6px;                   /* avoid scrollbar overlay */
}

/* sticky header/footer so they never scroll away */
#mailCompose .compose-header,
#mailCompose .compose-footer {
  position: sticky;
  z-index: 1;
  background: var(--panel, #111);       /* your panel color token */
  padding: 6px 0;
}
#mailCompose .compose-header { top: 0; }
#mailCompose .compose-footer { bottom: 0; display:flex; gap:10px; align-items:center; justify-content:space-between; }

/* compact attachment rows */
#mailCompose .attach-list .row.item {
  padding: 6px 8px;
  margin: 4px 0;
}
#mailAttachSummary { font-size: 0.95em; opacity: 0.9; }

/* optional: make the Send button stay visible even on tiny screens */
#mailSend { white-space: nowrap; }
#mailCompose { display:grid; grid-template-rows:auto minmax(120px,1fr) auto; }

/* Make icon-button anchors look like the icon buttons */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.icon-btn:hover { opacity: 0.9; }
.icon-btn:focus { outline: 2px solid rgba(255,255,255,0.35); outline-offset: 2px; }
.icon-btn svg { width: 22px; height: 22px; }

.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left | centered logo | right */
  align-items: center;
  padding: 0 12px;
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-left  { justify-self: start; }
.topbar-center{ justify-self: center; text-align: center; }
.topbar-right { justify-self: end; }

/* base icon buttons */
.icon-btn {
  display: grid;             /* centers the glyph nicely */
  place-items: center;
  width: 36px;               /* was smaller before */
  height: 36px;
  font-size: 18px;           /* emoji size */
  line-height: 1;            /* no extra vertical space */
  border-radius: 10px;       /* tweak as you like */
  padding: 0;                /* size comes from width/height */
}

/* optional large variant */
.icon-btn.lg {
  width: 44px;
  height: 44px;
  font-size: 22px;
}

/* make touch targets bigger on phones */
@media (pointer: coarse) {
  .icon-btn { width: 48px; height: 48px; font-size: 24px; }
}
.topbar-right { gap: 12px; }
/* center helpers */
.center-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;              /* space between buttons */
}

.center-block {
  display: block;
  margin: 0 auto;         /* centers a single element */
}

/* optional: make centered buttons the same width */
.center-row .btn,
.center-block.btn { min-width: 220px; }