/* 1.15.24 – utannonsering (spelarens skärm). Mango-färger; fungerar även utan mango.css (egna reservvärden). */
.pan { position: fixed; top: 28px; left: 50%; transform: translateX(-50%); z-index: 9500; width: min(560px, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px 20px; border-radius: 14px; overflow: hidden;
  background: rgba(17, 18, 21, .96); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; color: #f2f3f5; animation: pan-in .35s cubic-bezier(.2, .9, .3, 1.2) both; pointer-events: none; }
.pan.out { animation: pan-out .4s ease forwards; }
.pan-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--mg-green, #22c55e); color: #fff; font-size: 17px; box-shadow: 0 6px 18px rgba(34, 197, 94, .35); }
.pan-b { flex: 1; min-width: 0; }
.pan-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.pan-h b { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mg-green2, #2fd16b); }
.pan-role { height: 19px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: #a4a8b0; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.pan-t { font-size: 15px; line-height: 1.45; font-weight: 500; color: #f2f3f5; white-space: pre-wrap; overflow-wrap: anywhere; }
.pan-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .06); }
.pan-bar span { display: block; height: 100%; width: 100%; background: var(--mg-green, #22c55e); transform-origin: left center; animation-name: pan-bar; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes pan-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes pan-in { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes pan-out { to { opacity: 0; transform: translate(-50%, -14px); } }

/* Panelens sida Annons */
.an-page { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 24px; max-width: 900px; }
.an-form { display: flex; flex-direction: column; gap: 10px; }
.an-ta { width: 100%; min-height: 96px; resize: vertical; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--mg-line, rgba(255,255,255,.07)); background: #111214; color: var(--mg-text, #f2f3f5); font: 500 13.5px/1.5 'Inter', 'Segoe UI', sans-serif; outline: 0; }
.an-ta:focus { border-color: rgba(34, 197, 94, .55); }
.an-row { display: flex; align-items: center; gap: 8px; }
.an-count { font-size: 11.5px; color: var(--mg-muted, #6c7079); font-variant-numeric: tabular-nums; }
.an-count.warn { color: var(--mg-amber, #f5b83d); }
.an-send { min-width: 150px; }
.an-stage { display: flex; justify-content: center; padding: 26px 14px; border-radius: 0 0 10px 10px;
  background: radial-gradient(ellipse at 50% 0%, rgba(34, 197, 94, .07), transparent 60%), repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 14px, transparent 14px 28px); }
.pan.an-inline { position: relative; top: auto; left: auto; transform: none; animation: none; pointer-events: auto; }
.pan.an-inline .an-ph { color: var(--mg-muted, #6c7079); font-style: italic; }
.pan-bar span.an-still { animation: none; width: 62%; }
.an-quote { padding: 10px 12px; border-left: 3px solid var(--mg-green, #22c55e); background: rgba(255, 255, 255, .03); border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }