:root{--bg:#07070b;--panel:#111119;--panel2:#191922;--border:#2b2b3b;--text:#f7f7fb;--muted:#9898a9;--a:#8b5cf6;--a2:#baa0ff;--green:#39d98a}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -10%,#2b1747,transparent 38%),linear-gradient(#0b0910,#07070b);color:var(--text);font:15px Inter,system-ui,sans-serif;overflow-x:hidden}a{text-decoration:none;color:inherit}.wrap{width:min(1160px,calc(100% - 34px));margin:auto;padding:24px 0 60px;position:relative;z-index:1}.ambient{position:fixed;border-radius:50%;filter:blur(110px);opacity:.16;pointer-events:none}.a1{width:280px;height:280px;background:#8b5cf6;left:-130px;top:30%}.a2{width:250px;height:250px;background:#5b21b6;right:-100px;bottom:10%}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:950;background:linear-gradient(135deg,#a16cff,#5b21b6);box-shadow:0 10px 30px #6d3df544}.logo{font-size:25px;font-weight:950;letter-spacing:-.04em}.logo span{color:var(--a2)}.brand-sub{font-size:10px;letter-spacing:.22em;color:var(--muted);font-weight:800}.top-actions{display:flex;gap:8px;align-items:center}.admin-btn{padding:10px 13px;border-radius:10px;background:#15151f;border:1px solid var(--border);font-size:12px;font-weight:900;color:#fff;cursor:pointer}.admin-btn:hover{border-color:#55516c;transform:translateY(-1px)}
.card{background:linear-gradient(135deg,#15141eeb,#0e0e14e8);border:1px solid var(--border);border-radius:22px;box-shadow:0 25px 70px #0005;backdrop-filter:blur(14px)}.hero{display:grid;grid-template-columns:1.3fr .7fr;gap:24px;padding:34px;overflow:hidden;position:relative}.hero:after{content:"";position:absolute;width:350px;height:350px;right:-130px;top:-160px;border-radius:50%;background:#8b5cf625;filter:blur(20px)}.hero-copy{position:relative;z-index:1}.eyebrow{display:flex;align-items:center;gap:8px;color:var(--a2);font-size:11px;letter-spacing:.18em;font-weight:950}.dot{width:7px;height:7px;border-radius:50%;background:#a78bfa;box-shadow:0 0 14px #a78bfa}.hero h1{font-size:clamp(38px,6vw,65px);line-height:.98;letter-spacing:-.055em;margin:13px 0 16px}.hero h1 span{color:var(--a2)}.hero p{color:var(--muted);font-size:16px;line-height:1.6;max-width:650px;margin:0 0 22px}.hero-buttons{display:flex;gap:9px;flex-wrap:wrap}.watch{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;min-height:46px;border-radius:11px;font-weight:900;border:1px solid var(--border);transition:.18s}.watch:hover{transform:translateY(-1px);border-color:#62577f}.platform-icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;line-height:0;overflow:visible}.platform-img{display:block;width:22px;height:22px;object-fit:contain;object-position:center}.kick-img{width:22px;height:22px;object-fit:contain;filter:none}.twitch-img{width:21px;height:21px;object-fit:contain}.kick-btn{background:linear-gradient(135deg,#9868ff,#6d3df5);box-shadow:0 12px 30px #6d3df530;border-color:#8e68e8;color:#fff}.twitch-btn{background:#181821;color:#fff}
.countdown-card{align-self:stretch;min-height:205px;display:flex;flex-direction:column;justify-content:center;padding:24px;border-radius:18px;background:linear-gradient(145deg,#1b1628,#11111a);border:1px solid #3b3150;position:relative;z-index:1}.count-label{font-size:10px;letter-spacing:.18em;color:var(--muted);font-weight:950}.next-title{font-size:20px;font-weight:900;margin-top:9px}.countdown{font-variant-numeric:tabular-nums;font-size:39px;line-height:1;font-weight:950;letter-spacing:-.05em;color:var(--a2);margin:14px 0 10px}.next-meta{color:var(--muted);font-size:13px}
.reveal-tab small{color:#626275;font-weight:600}.schedule-reveal.open .schedule-reveal.open .tabs{display:flex;gap:8px;margin:0 0 12px}.tab{padding:10px 14px;border-radius:10px;background:#13131c;color:#b0b0bf;border:1px solid var(--border);cursor:pointer;font-weight:850}.tab.active{background:var(--a);color:#fff;border-color:var(--a)}.week{display:grid;grid-template-columns:repeat(7,1fr);gap:9px}.day{min-height:225px;background:#0e0e14dc;border:1px solid var(--border);border-radius:15px;padding:11px}.day.today{border-color:#8b5cf6;box-shadow:inset 0 0 0 1px #8b5cf625}.dayhead{display:flex;justify-content:space-between;margin-bottom:12px;font-size:13px}.stream{background:linear-gradient(145deg,#1a1823,#15151d);border:1px solid #2d2c3c;border-radius:11px;margin-bottom:8px;overflow:hidden;transition:.18s}.stream:hover{transform:translateY(-1px);border-color:#4b4760}.stream-thumb{aspect-ratio:16/9;background:#0b0b10;overflow:hidden}.stream-thumb img{width:100%;height:100%;display:block;object-fit:cover}.stream-body{padding:11px}.time{font-weight:950;color:var(--a2);font-size:13px}.title{font-weight:900;margin-top:4px}.game,.hint{font-size:12px;color:var(--muted);margin-top:4px}.cancel{color:#ff9999}.empty{text-align:center;color:#656576;padding:30px 5px;font-size:13px}.admin-tools{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;margin-bottom:10px}.actions{display:flex;gap:6px;margin-top:9px}.actions button{font-size:11px;padding:6px 8px}.danger{background:#3a151a!important;color:#ff9ca3!important}.ghost{background:#171721;color:#fff;border:1px solid var(--border);padding:10px 13px;border-radius:10px;cursor:pointer;font-weight:850}
.feedback-section{margin-top:22px;padding:26px;display:grid;grid-template-columns:.85fr 1.15fr;gap:28px}.feedback-section h2{font-size:30px;margin:8px 0 10px;letter-spacing:-.04em}.feedback-section p{color:var(--muted);line-height:1.6;max-width:480px}.feedback-section form{display:flex;flex-direction:column;justify-content:center}.feedback-section input,.feedback-section textarea,.modalbox input,.modalbox select,.modalbox textarea{width:100%;padding:11px;border-radius:10px;border:1px solid var(--border);background:#09090e;color:#fff;outline:none;margin:6px 0}.feedback-section textarea{min-height:125px;resize:vertical}.feedback-section button{align-self:flex-end;padding:11px 15px;border:0;border-radius:10px;background:var(--a);color:#fff;font-weight:900;cursor:pointer}
footer{display:flex;justify-content:space-between;color:#5e5e6d;font-size:12px;margin-top:26px;padding:0 3px}.modal{display:none;position:fixed;inset:0;background:#000b;align-items:center;justify-content:center;padding:20px;z-index:20}.modal.show{display:flex}.modalbox{width:min(520px,100%);padding:24px;position:relative;background:#111119;border:1px solid var(--border);border-radius:18px;box-shadow:0 30px 100px #0009}.modalbox.wide{width:min(760px,100%);max-height:88vh;overflow:auto}.modal-x{position:absolute;right:12px;top:10px;background:none;border:0;color:#8d8d9c;font-size:25px;cursor:pointer}.modalbox h2{margin:0 0 5px}label{display:block;font-size:12px;font-weight:850;color:#c8c8d2;margin-top:12px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.row{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.msg{color:#ff9da3;min-height:18px}.muted{color:var(--muted)}.current-thumb{margin-top:7px}.current-thumb img{width:180px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:1px solid var(--border)}.feedback-inbox{display:flex;flex-direction:column;gap:12px;margin-top:15px}.feedback-item{background:#181821;border:1px solid var(--border);border-radius:12px;padding:14px}.feedback-head{display:flex;justify-content:space-between;gap:12px;color:#c7c7d2;font-size:12px}.feedback-message{white-space:pre-wrap;line-height:1.55;margin:10px 0;color:#eee}.feedback-reply{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}.feedback-reply textarea{min-height:75px}.feedback-item button{padding:8px 11px;border:0;border-radius:9px;background:var(--a);color:#fff;font-weight:850;cursor:pointer}
@media(max-width:900px){.hero{grid-template-columns:1fr}.week{grid-template-columns:repeat(2,1fr)}.feedback-section{grid-template-columns:1fr}.countdown-card{min-height:170px}}
@media(max-width:560px){.wrap{width:calc(100% - 22px);padding-top:15px}.topbar{align-items:flex-start}.brand-mark{width:38px;height:38px}.logo{font-size:21px}.hero{padding:24px 20px;border-radius:18px}.week{grid-template-columns:1fr}.day{min-height:140px}.grid2{grid-template-columns:1fr}.countdown{font-size:33px}.feedback-section{padding:20px}.feedback-section h2{font-size:25px}.reveal-tab small{display:none}footer{font-size:11px}}



/* V13: Seznam — compact cards + independent scrolling. */

.list-scroll{height:560px;max-height:560px;min-height:260px;overflow-y:auto!important;overflow-x:hidden!important;padding:10px 12px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(135deg,#15141eeb,#0e0e14e8);box-shadow:0 25px 70px #0005;scrollbar-width:auto;scrollbar-color:#7c4dff #0b0b11;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;}
.list-scroll-inner{display:flex!important;flex-direction:column!important;gap:10px!important;width:100%;}
.list-scroll .list-stream{display:grid!important;grid-template-columns:240px minmax(0,1fr)!important;grid-template-rows:minmax(135px,auto)!important;width:100%!important;min-height:135px!important;height:auto!important;margin:0!important;overflow:hidden!important;}
.list-scroll .list-stream .stream-thumb{width:240px!important;height:135px!important;min-height:135px!important;max-height:135px!important;aspect-ratio:auto!important;overflow:hidden!important;align-self:start!important;}
.list-scroll .list-stream .stream-thumb img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;}
.list-scroll .list-stream .stream-body{min-width:0!important;display:flex!important;flex-direction:column!important;justify-content:center!important;padding:14px 16px!important;}
.list-scroll::-webkit-scrollbar{width:12px}.list-scroll::-webkit-scrollbar-track{background:#0b0b11;border-radius:12px}.list-scroll::-webkit-scrollbar-thumb{background:#7c4dff;border-radius:12px;border:3px solid #0b0b11}.list-scroll::-webkit-scrollbar-thumb:hover{background:#9a78ff}
@media(max-width:700px){.list-scroll{height:520px;max-height:520px}.list-scroll .list-stream{grid-template-columns:150px minmax(0,1fr)!important;grid-template-rows:100px!important;min-height:100px!important}.list-scroll .list-stream .stream-thumb{width:150px!important;height:100px!important;min-height:100px!important;max-height:100px!important}.list-scroll .list-stream .stream-body{padding:10px!important}}
@media(max-width:560px){.list-scroll{height:500px;max-height:500px;padding:8px}.list-scroll .list-stream{grid-template-columns:1fr!important;grid-template-rows:120px auto!important;min-height:0!important}.list-scroll .list-stream .stream-thumb{width:100%!important;height:120px!important;min-height:120px!important;max-height:120px!important}.list-scroll .list-stream .stream-body{padding:11px!important}}

.list-scroll .list-stream{cursor:pointer;position:relative}.list-scroll .list-stream:focus-visible{outline:2px solid var(--a);outline-offset:2px}.list-scroll .list-stream::after{content:"Zobrazit detail →";position:absolute;right:12px;bottom:10px;color:#8f73d9;font-size:11px;font-weight:800;opacity:0;transition:.18s}.list-scroll .list-stream:hover::after{opacity:1}
.stream-detail-modal{background:rgba(2,2,8,.64)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:20px}.stream-detail-box{width:min(760px,100%);max-height:88vh;overflow:auto;background:linear-gradient(145deg,#171522f5,#0c0c13f5);border:1px solid #4a3c63;border-radius:22px;box-shadow:0 35px 120px #000b;position:relative;transform:translateY(8px) scale(.98);animation:detailIn .2s ease forwards}.stream-detail-box .modal-x{z-index:2;background:#0d0d14cc;border:1px solid #393345;border-radius:10px;width:36px;height:36px;line-height:28px}.detail-thumb{width:100%;aspect-ratio:16/9;background:#09090d;overflow:hidden;border-radius:21px 21px 0 0}.detail-thumb img{width:100%;height:100%;object-fit:cover;display:block}.detail-body{padding:24px 26px 28px}.detail-eyebrow{color:var(--a2);font-size:12px;font-weight:950;letter-spacing:.08em}.detail-body h2{font-size:30px;letter-spacing:-.04em;margin:7px 0 12px}.detail-game,.detail-status{display:inline-flex;align-items:center;margin:4px 6px 4px 0;padding:8px 11px;border:1px solid var(--border);border-radius:9px;background:#14141d;color:#d6d6e0;font-size:13px;font-weight:800}.detail-status{color:#a7eac9}.detail-note{color:#aaaabc;line-height:1.65;margin:16px 0 0;white-space:pre-wrap}@keyframes detailIn{to{transform:translateY(0) scale(1)}}
@media(max-width:560px){.stream-detail-modal{padding:10px}.stream-detail-box{max-height:92vh;border-radius:17px}.detail-thumb{border-radius:16px 16px 0 0}.detail-body{padding:20px}.detail-body h2{font-size:24px}}

/* V15: stream detail interaction */
.list-scroll .list-stream{cursor:pointer;user-select:none;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.list-scroll .list-stream:hover{transform:translateY(-2px);border-color:#67528d;box-shadow:0 10px 28px #0005}
.list-scroll .list-stream:active{transform:translateY(0)}
.list-scroll .list-stream:focus-visible{outline:2px solid var(--a);outline-offset:3px}
.stream-detail-modal{z-index:50}
.stream-detail-box{z-index:51}

/* V16 — list-only schedule */
.streams-section{margin-top:18px;padding:22px 22px 24px;overflow:hidden}
.streams-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.streams-section-head h2{font-size:26px;letter-spacing:-.04em;margin:6px 0 4px}
.streams-section-head p{margin:0;color:var(--muted);font-size:13px}
.streams-section #schedule{width:100%}
.streams-section .admin-tools{margin:0 0 10px}
.streams-section .list-scroll{height:560px;max-height:560px;overflow-y:auto;overflow-x:hidden;padding:2px 8px 8px 2px;scrollbar-width:thin;scroll-behavior:smooth}
.streams-section .list-scroll-inner{display:flex;flex-direction:column;gap:10px}
.streams-section .list-stream{display:grid!important;grid-template-columns:240px minmax(0,1fr)!important;min-height:135px;margin:0!important;cursor:pointer}
.streams-section .list-stream .stream-thumb{width:240px!important;height:135px!important;min-height:135px!important;max-height:135px!important;aspect-ratio:auto!important}
.streams-section .list-stream .stream-body{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:14px 16px}
.streams-section .list-stream:hover{border-color:#69528c;box-shadow:0 8px 28px #0004}
@media(max-width:700px){.streams-section{padding:18px 14px 20px}.streams-section .list-scroll{height:520px;max-height:520px}.streams-section .list-stream{grid-template-columns:150px minmax(0,1fr)!important;min-height:100px}.streams-section .list-stream .stream-thumb{width:150px!important;height:100px!important;min-height:100px!important;max-height:100px!important}}
@media(max-width:560px){.streams-section{padding:18px 10px}.streams-section-head h2{font-size:23px}.streams-section .list-scroll{height:500px;max-height:500px;padding-right:4px}.streams-section .list-stream{grid-template-columns:1fr!important;grid-template-rows:120px auto!important}.streams-section .list-stream .stream-thumb{width:100%!important;height:120px!important;min-height:120px!important;max-height:120px!important}.streams-section .list-stream .stream-body{padding:11px 12px 13px}}

/* V17: the list itself is the old expandable schedule panel */
.streams-reveal{position:relative;margin-top:18px}
.streams-reveal 
.streams-reveal .reveal-tab small{color:#626275;font-weight:600}
.streams-reveal .streams-panel{max-height:0;overflow:hidden;opacity:0;transform:translateY(-12px);transition:max-height .45s ease,opacity .25s ease,transform .45s ease}
.streams-reveal.open .streams-panel{max-height:5000px;opacity:1;transform:translateY(0)}
.streams-reveal.open 
.streams-reveal .streams-section{margin-top:0;border-radius:0 0 22px 22px;border-top:0}

@media(max-width:560px){.streams-reveal .reveal-tab small{display:none}}


@media (hover:none), (pointer:coarse){
  .schedule-reveal .schedule-panel{max-height:0!important;opacity:0!important;transform:translateY(-10px)!important}
  .schedule-reveal.open .schedule-panel{max-height:1000px!important;opacity:1!important;transform:translateY(0)!important}
  .schedule-reveal .schedule-reveal.open }

.schedule-reveal{position:relative;margin-top:18px}
.reveal-tab{height:46px;border:1px solid var(--border);border-radius:14px;background:#101019;color:#aaaabc;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:900;cursor:pointer;position:relative;z-index:2;transition:border-radius .28s ease,background .2s ease}
.schedule-panel{max-height:0;overflow:hidden;opacity:0;transform:translateY(-10px);transition:max-height .45s ease,opacity .22s ease,transform .45s ease}
.schedule-reveal.open .schedule-panel{max-height:1000px;opacity:1;transform:translateY(0)}
.schedule-reveal.open .schedule-reveal.open .reveal-tab{border-radius:14px 14px 0 0}


/* V22: smooth arrow animation — closed points up, open points down */
.schedule-reveal.open 
/* V23 — click-only list + correct animated arrow */
.streams-reveal .reveal-tab{
  cursor:pointer;
  user-select:none;
}
.streams-reveal .reveal-arrow{
  display:inline-block;
  transform:rotate(180deg);
  transform-origin:center;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  font-size:16px;
  line-height:1;
  will-change:transform;
}
.streams-reveal.open .reveal-arrow{
  transform:rotate(0deg);
}

/* V24 — MatroGram header */
.brand-mark{
  width:92px;
  height:92px;
  flex:0 0 92px;
  border-radius:24px;
  overflow:hidden;
  border:2px solid #9b5cff;
  box-shadow:0 0 28px rgba(139,92,246,.38);
  background:#17111f;
}
.profile-logo{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.brand-text .brand-title{
  font-size:clamp(34px,5vw,64px);
  line-height:.95;
  font-weight:950;
  letter-spacing:-.045em;
  color:#fff;
}
.brand-text .brand-title span{
  color:#a86bff;
}
.brand-text .brand-subtitle{
  margin-top:12px;
  font-size:clamp(14px,2vw,24px);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#a9a0c8;
  font-weight:800;
}
@media (max-width:700px){
  .brand-mark{width:70px;height:70px;flex-basis:70px;border-radius:19px}
  .brand-text .brand-title{font-size:36px}
  .brand-text .brand-subtitle{font-size:12px;margin-top:8px}
}

/* V25 — exact MatroGram header */
.topbar .brand{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
}
.topbar .brand-mark{
  width:92px;
  height:92px;
  flex:0 0 92px;
  padding:0;
  display:block;
  overflow:hidden;
  border-radius:24px;
  border:2px solid #9b5cff;
  background:#17111f;
  box-shadow:0 0 28px rgba(139,92,246,.38);
}
.topbar .profile-logo{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.topbar .brand-copy{
  min-width:0;
}
.topbar .brand-copy .logo{
  font-size:clamp(32px,5vw,62px);
  line-height:.95;
  font-weight:950;
  letter-spacing:-.045em;
  color:#fff;
  white-space:nowrap;
}
.topbar .brand-copy .logo span{
  color:#a86bff;
}
.topbar .brand-copy .brand-sub{
  margin-top:12px;
  font-size:clamp(12px,2vw,22px);
  line-height:1;
  letter-spacing:.18em;
  color:#a9a0c8;
  font-weight:800;
  text-transform:uppercase;
  white-space:nowrap;
}
@media(max-width:560px){
  .topbar .brand{gap:12px}
  .topbar .brand-mark{width:64px;height:64px;flex-basis:64px;border-radius:18px}
  .topbar .brand-copy .logo{font-size:32px}
  .topbar .brand-copy .brand-sub{font-size:10px;margin-top:7px;letter-spacing:.13em}
}

/* V26 — streamer visual theme; layout unchanged */
html, body{
  background:
    radial-gradient(circle at 8% 12%, rgba(0,190,255,.10), transparent 30%),
    radial-gradient(circle at 92% 18%, rgba(255,70,120,.08), transparent 28%),
    radial-gradient(circle at 50% 90%, rgba(0,120,255,.07), transparent 36%),
    #080b10 !important;
}
body{position:relative;isolation:isolate;overflow-x:hidden}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(125deg,transparent 0 45%,rgba(0,190,255,.035) 48%,transparent 51%),
    linear-gradient(305deg,transparent 0 58%,rgba(255,70,120,.025) 61%,transparent 64%);
  background-size:48px 48px,48px 48px,100% 100%,100% 100%;opacity:.65;
}
body::after{
  content:"";position:fixed;width:65vw;height:65vw;max-width:900px;max-height:900px;
  left:50%;top:35%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,190,255,.075) 0%,rgba(0,190,255,.025) 28%,transparent 67%);
  filter:blur(20px);animation:streamerGlow 12s ease-in-out infinite alternate;
}
@keyframes streamerGlow{
  0%{transform:translate(-58%,-48%) scale(.92);opacity:.65}
  100%{transform:translate(-42%,-52%) scale(1.08);opacity:1}
}
.card,.panel,.schedule-reveal,.stream-card,.feedback-card,.modal-card{
  background:rgba(15,20,27,.88) !important;
  border-color:rgba(150,170,190,.18) !important;
  box-shadow:0 18px 60px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.035) !important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.topbar{
  background:rgba(8,11,16,.68) !important;
  border-color:rgba(150,170,190,.14) !important;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
:root{--accent:#20c8ff;--accent-2:#587cff;--accent-soft:rgba(32,200,255,.14)}
.logo span,.hero h1 span,.accent,.brand-title span{color:#20c8ff !important}
.btn-primary,.follow-kick,.primary,.admin-btn:hover{
  background:linear-gradient(135deg,#20c8ff,#586cff) !important;
  border-color:transparent !important;color:#fff !important;
  box-shadow:0 10px 28px rgba(32,200,255,.18);
}
.reveal-tab{background:rgba(16,21,28,.92) !important;border-color:rgba(32,200,255,.24) !important}
.reveal-tab:hover{border-color:rgba(32,200,255,.55) !important;box-shadow:0 0 28px rgba(32,200,255,.08)}
.reveal-arrow{color:#20c8ff !important}
.topbar .brand-mark{
  border-color:#20c8ff !important;
  box-shadow:0 0 26px rgba(32,200,255,.20),0 0 60px rgba(88,124,255,.10) !important;
}
a:hover{color:#20c8ff !important}
*{scrollbar-color:#20c8ff rgba(255,255,255,.06)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.035)}
::-webkit-scrollbar-thumb{background:linear-gradient(#20c8ff,#587cff);border-radius:99px}
@media(max-width:700px){
  body::after{width:110vw;height:110vw;filter:blur(28px)}
  body::before{background-size:36px 36px,36px 36px,100% 100%,100% 100%;opacity:.42}
}

/* =========================================================
   V27 — BLACK / RED / WHITE STREAMER THEME
   Layout and functionality intentionally unchanged.
   ========================================================= */

html, body{
  background:#050505 !important;
  color:#f5f5f5;
}

body{
  position:relative;
  isolation:isolate;
  overflow-x:hidden;
}

/* Animated atmospheric background */
body::before{
  content:"";
  position:fixed;
  inset:-25%;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 18% 28%, rgba(255,20,35,.22) 0%, transparent 28%),
    radial-gradient(ellipse at 82% 68%, rgba(190,0,18,.16) 0%, transparent 30%),
    radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.035) 0%, transparent 35%);
  filter:blur(35px);
  animation:matroRedAtmosphere 14s ease-in-out infinite alternate;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.42;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255,30,45,.07) 46%, transparent 50%),
    linear-gradient(295deg, transparent 0 56%, rgba(255,255,255,.035) 59%, transparent 63%),
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 74px,
      rgba(255,255,255,.018) 75px,
      transparent 76px
    );
  animation:matroLines 18s linear infinite;
}

@keyframes matroRedAtmosphere{
  0%{
    transform:translate3d(-7%,-4%,0) scale(.94) rotate(-2deg);
    opacity:.72;
  }
  50%{
    transform:translate3d(3%,4%,0) scale(1.03) rotate(1deg);
    opacity:1;
  }
  100%{
    transform:translate3d(8%,-2%,0) scale(1.08) rotate(3deg);
    opacity:.78;
  }
}

@keyframes matroLines{
  from{transform:translate3d(-3%,0,0)}
  to{transform:translate3d(3%,2%,0)}
}

/* Fine red glow along the bottom edge */
main::after{
  content:"";
  position:fixed;
  left:10%;
  right:10%;
  bottom:-120px;
  height:220px;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse, rgba(220,0,25,.13), transparent 68%);
  filter:blur(25px);
  animation:matroBottomGlow 8s ease-in-out infinite alternate;
}

@keyframes matroBottomGlow{
  from{opacity:.45;transform:scaleX(.82)}
  to{opacity:.9;transform:scaleX(1.12)}
}

/* Dark glass panels */
.card,.panel,.schedule-reveal,.stream-card,.feedback-card,.modal-card{
  background:rgba(10,10,12,.88) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:
    0 20px 65px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.topbar{
  background:rgba(5,5,6,.72) !important;
  border-color:rgba(255,255,255,.10) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

/* Red / white accents */
:root{
  --accent:#ff2438;
  --accent-2:#b90018;
  --accent-soft:rgba(255,36,56,.14);
}

.logo span,.hero h1 span,.accent,.brand-title span{
  color:#ff2438 !important;
}

/* Main action buttons */
.btn-primary,.follow-kick,.primary{
  background:linear-gradient(135deg,#ff2438,#b90018) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 10px 32px rgba(255,20,40,.22);
}

.admin-btn:hover{
  background:#ff2438 !important;
  color:#fff !important;
  border-color:#ff2438 !important;
}

/* Stream list tab */
.reveal-tab{
  background:rgba(10,10,12,.94) !important;
  border-color:rgba(255,36,56,.28) !important;
  color:#f2f2f2 !important;
}

.reveal-tab:hover{
  border-color:rgba(255,36,56,.72) !important;
  box-shadow:0 0 30px rgba(255,20,40,.11);
}

.reveal-arrow{
  color:#ff2438 !important;
}

/* Profile image frame */
.topbar .brand-mark{
  border-color:#ff2438 !important;
  box-shadow:
    0 0 24px rgba(255,20,40,.22),
    0 0 55px rgba(255,20,40,.09) !important;
}

/* White typography with red interactive hover */
a:hover{
  color:#ff2438 !important;
}

/* Inputs */
input:focus,textarea:focus,select:focus{
  border-color:rgba(255,36,56,.7) !important;
  box-shadow:0 0 0 3px rgba(255,36,56,.10) !important;
}

/* Scrollbar */
*{scrollbar-color:#ff2438 rgba(255,255,255,.06)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#090909}
::-webkit-scrollbar-thumb{
  background:linear-gradient(#ff2438,#9f0017);
  border-radius:99px;
}

/* Mobile performance */
@media(max-width:700px){
  body::before{
    filter:blur(45px);
    animation-duration:18s;
  }
  body::after{
    opacity:.30;
  }
}

/* V28 — stronger BLACK / RED / WHITE streamer atmosphere */
html,body{
  background:#020203 !important;
  color:#fff;
}

body{
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,0,28,.18), transparent 24%),
    radial-gradient(circle at 88% 42%, rgba(255,0,20,.12), transparent 28%),
    linear-gradient(180deg,#030303 0%,#070707 48%,#020202 100%) !important;
}

/* Large, clearly visible animated red light fields */
body::before{
  content:"";
  position:fixed;
  z-index:-3;
  pointer-events:none;
  width:75vw;
  height:75vw;
  max-width:1000px;
  max-height:1000px;
  left:-22vw;
  top:-18vw;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(255,0,32,.40) 0%,
      rgba(255,0,24,.22) 22%,
      rgba(255,0,15,.07) 46%,
      transparent 70%);
  filter:blur(38px);
  animation:v28RedOrb1 10s ease-in-out infinite alternate;
}

body::after{
  content:"";
  position:fixed;
  z-index:-2;
  pointer-events:none;
  width:80vw;
  height:80vw;
  max-width:1050px;
  max-height:1050px;
  right:-30vw;
  bottom:-20vw;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(255,15,35,.34) 0%,
      rgba(200,0,20,.18) 24%,
      rgba(120,0,15,.06) 48%,
      transparent 70%);
  filter:blur(42px);
  animation:v28RedOrb2 13s ease-in-out infinite alternate;
}

@keyframes v28RedOrb1{
  0%{transform:translate3d(0,0,0) scale(.85)}
  50%{transform:translate3d(18vw,12vh,0) scale(1.12)}
  100%{transform:translate3d(32vw,2vh,0) scale(.96)}
}
@keyframes v28RedOrb2{
  0%{transform:translate3d(0,0,0) scale(.82)}
  50%{transform:translate3d(-18vw,-10vh,0) scale(1.08)}
  100%{transform:translate3d(-4vw,-24vh,0) scale(.92)}
}

/* Diagonal animated red beams */
body{
  --v28-beam:rgba(255,0,28,.10);
}
main{
  position:relative;
}
main::before{
  content:"";
  position:fixed;
  inset:-60%;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(115deg,
      transparent 0 47%,
      rgba(255,0,30,.10) 48%,
      rgba(255,0,30,.035) 49%,
      transparent 50%),
    linear-gradient(115deg,
      transparent 0 61%,
      rgba(255,255,255,.035) 62%,
      transparent 63%);
  transform:rotate(-8deg);
  animation:v28Beams 16s linear infinite;
}
@keyframes v28Beams{
  from{transform:translate3d(-7%,0,0) rotate(-8deg)}
  to{transform:translate3d(7%,4%,0) rotate(-8deg)}
}

/* Stronger black glass cards with crisp white borders */
.card,.panel,.schedule-reveal,.stream-card,.feedback-card,.modal-card{
  background:rgba(7,7,9,.91) !important;
  border-color:rgba(255,255,255,.15) !important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.62),
    0 0 36px rgba(255,0,25,.035),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
}

/* Red top/bottom accent on main containers */
.schedule-reveal,
.feedback-card{
  box-shadow:
    0 22px 70px rgba(0,0,0,.62),
    0 0 30px rgba(255,0,25,.07),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.topbar{
  background:rgba(2,2,3,.78) !important;
  border-color:rgba(255,255,255,.12) !important;
}

/* Red/white branding */
.logo span,.hero h1 span,.accent,.brand-title span{
  color:#ff1933 !important;
}
.hero h1,.logo,.brand-title{
  color:#fff !important;
}

/* Buttons: unmistakably red instead of purple */
.btn-primary,.primary,.follow-kick{
  background:linear-gradient(135deg,#ff1832 0%,#d6001e 100%) !important;
  color:#fff !important;
  border-color:#ff1832 !important;
  box-shadow:
    0 8px 28px rgba(255,0,30,.28),
    0 0 24px rgba(255,0,30,.12);
}
.admin-btn{
  background:#0a0a0c !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.18) !important;
}
.admin-btn:hover{
  background:#ff1933 !important;
  color:#fff !important;
  border-color:#ff1933 !important;
}

/* Stream tab becomes a black/red streamer control */
.reveal-tab{
  background:#070709 !important;
  color:#fff !important;
  border-color:rgba(255,25,50,.48) !important;
}
.reveal-tab:hover{
  border-color:#ff1933 !important;
  box-shadow:0 0 28px rgba(255,0,30,.18) !important;
}
.reveal-arrow{color:#ff1933 !important}

/* Red profile frame */
.topbar .brand-mark{
  border-color:#ff1933 !important;
  box-shadow:
    0 0 20px rgba(255,0,30,.30),
    0 0 50px rgba(255,0,30,.12) !important;
}

/* Red focus */
input:focus,textarea:focus,select:focus{
  border-color:#ff1933 !important;
  box-shadow:0 0 0 3px rgba(255,0,30,.12) !important;
}

/* White/gray secondary text */
.muted,.subtitle,.brand-sub{
  color:#aaa !important;
}

/* Strong red scrollbar */
*{scrollbar-color:#ff1933 #090909}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#050505}
::-webkit-scrollbar-thumb{
  background:#ff1933;
  border-radius:99px;
}

/* Slightly calmer on phones, but still clearly visible */
@media(max-width:700px){
  body::before{
    width:120vw;height:120vw;
    left:-42vw;top:-25vw;
    filter:blur(34px);
  }
  body::after{
    width:125vw;height:125vw;
    right:-48vw;bottom:-28vw;
    filter:blur(38px);
  }
  main::before{opacity:.55}
}

/* =========================================================
   V29 — REMOVE PURPLE FROM ALL BUTTONS / CONTROLS
   Black / red / white theme only.
   ========================================================= */

/* Generic buttons */
button,
.btn,
.button,
.btn-primary,
.btn-secondary,
.primary,
.secondary,
.admin-btn,
.follow-kick,
.follow-twitch,
.feedback-btn,
.feedback-submit,
#loginBtn,
#logoutBtn{
  color:#fff !important;
  border-color:rgba(255,255,255,.16) !important;
}

/* Main red action buttons */
.btn-primary,
.primary,
.follow-kick,
.feedback-submit,
#loginBtn:hover,
#logoutBtn:hover{
  background:linear-gradient(135deg,#ff1933 0%,#c9001d 100%) !important;
  color:#fff !important;
  border-color:#ff1933 !important;
  box-shadow:0 8px 28px rgba(255,0,30,.24) !important;
}

/* Dark secondary buttons */
.btn-secondary,
.secondary,
.admin-btn,
.follow-twitch,
.feedback-btn{
  background:#0b0b0d !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.30) !important;
}

/* Hover = red, never purple */
button:hover,
.btn:hover,
.button:hover,
.btn-secondary:hover,
.secondary:hover,
.admin-btn:hover,
.follow-twitch:hover,
.feedback-btn:hover{
  background:#17171a !important;
  color:#fff !important;
  border-color:#ff1933 !important;
  box-shadow:0 0 22px rgba(255,0,30,.14) !important;
}

/* Primary hover stays red */
.btn-primary:hover,
.primary:hover,
.follow-kick:hover,
.feedback-submit:hover{
  background:linear-gradient(135deg,#ff3148 0%,#d90020 100%) !important;
  color:#fff !important;
  border-color:#ff3148 !important;
}

/* Admin button when active/focused */
.admin-btn:focus,
.admin-btn:active,
button:focus-visible{
  outline:none !important;
  border-color:#ff1933 !important;
  box-shadow:0 0 0 3px rgba(255,0,30,.12) !important;
}

/* Remove purple from common status/accent controls */
.badge,
.tag,
.chip,
.pill{
  color:#fff !important;
  background:#101012 !important;
  border-color:rgba(255,255,255,.14) !important;
}

/* Any inline purple backgrounds/colors used by old versions */
[style*="#8"],
[style*="#9"],
[style*="#a"],
[style*="purple"]{
  /* Intentionally left as a fallback hook; normal CSS rules above handle buttons. */
}

/* Ensure the stream reveal itself stays black/red */
.reveal-tab{
  background:#070709 !important;
  color:#fff !important;
  border-color:rgba(255,25,50,.48) !important;
}
.reveal-tab:hover{
  background:#0e0e11 !important;
  color:#fff !important;
  border-color:#ff1933 !important;
}
.reveal-arrow{
  color:#ff1933 !important;
}

/* V30 — hard override for legacy purple buttons */
button,
a.btn,
a.button,
.btn,
.button,
button[class*="btn"],
a[class*="btn"],
[class*="follow"],
[class*="feedback"]{
  --purple:#ff1933 !important;
}

button,
a.btn,
a.button,
.btn,
.button,
button[class*="btn"],
a[class*="btn"],
[class*="follow"],
[class*="feedback"]{
  background:#09090b !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.35) !important;
  text-decoration:none !important;
}

button:hover,
a.btn:hover,
a.button:hover,
.btn:hover,
.button:hover,
button[class*="btn"]:hover,
a[class*="btn"]:hover,
[class*="follow"]:hover,
[class*="feedback"]:hover{
  background:#151518 !important;
  color:#fff !important;
  border-color:#ff1933 !important;
  box-shadow:0 0 24px rgba(255,0,30,.18) !important;
}

/* Primary CTA / KICK follow button */
.follow-kick,
.kick-btn,
.btn-primary,
.primary,
.feedback-submit,
button[type="submit"]{
  background:linear-gradient(135deg,#ff1933,#b90018) !important;
  color:#fff !important;
  border-color:#ff1933 !important;
  box-shadow:0 8px 28px rgba(255,0,30,.25) !important;
}
.follow-kick:hover,
.kick-btn:hover,
.btn-primary:hover,
.primary:hover,
.feedback-submit:hover,
button[type="submit"]:hover{
  background:linear-gradient(135deg,#ff3048,#d50020) !important;
  border-color:#ff3048 !important;
}

/* Keep the actual platform logos colored, but remove purple button backgrounds.
   Twitch logo may remain its official purple/white mark; this is not a page accent. */

/* =========================================================
   V31 — ZERO PURPLE / BLACK + RED + WHITE ONLY
   ========================================================= */

/* Kill the original purple variables everywhere */
:root{
  --a:#ff1933 !important;
  --a2:#ffffff !important;
  --green:#39d98a;
  --bg:#050505;
  --panel:#0b0b0d;
  --panel2:#111113;
  --border:#29292d;
  --text:#ffffff;
  --muted:#9b9b9f;
}

/* Remove old purple body atmosphere */
html,body{
  background:#020203 !important;
  color:#fff !important;
}
body{
  background:
    radial-gradient(circle at 10% 18%,rgba(255,0,25,.16),transparent 24%),
    radial-gradient(circle at 90% 78%,rgba(255,0,20,.12),transparent 27%),
    #020203 !important;
}

/* No purple in the old decorative elements */
.ambient,.a1,.a2{
  background:#ff1933 !important;
}
.a1{background:#ff1933 !important}
.a2{background:#b50018 !important}

/* Header */
.logo span,.brand-title span{
  color:#ff1933 !important;
}
.brand-sub{
  color:#bdbdbf !important;
}
.topbar .brand-mark{
  border-color:#ff1933 !important;
  box-shadow:0 0 24px rgba(255,0,25,.25) !important;
}

/* Hero — black, red, white */
.card,.hero{
  background:linear-gradient(145deg,rgba(9,9,11,.96),rgba(3,3,4,.94)) !important;
  border-color:rgba(255,255,255,.13) !important;
}
.hero:after{
  background:rgba(255,0,25,.10) !important;
}
.eyebrow{
  color:#ff1933 !important;
}
.dot{
  background:#ff1933 !important;
  box-shadow:0 0 14px #ff1933 !important;
}
.hero h1{
  color:#fff !important;
}
.hero h1 span{
  color:#ff1933 !important;
}
.hero p{
  color:#a5a5a8 !important;
}

/* All primary/secondary buttons */
.watch,
.kick-btn,
.twitch-btn,
.feedback-btn,
.feedback-submit,
.btn-primary,
.btn-secondary,
.primary,
.secondary,
.admin-btn,
.ghost{
  color:#fff !important;
  border-color:rgba(255,255,255,.16) !important;
}

/* KICK — red */
.kick-btn{
  background:linear-gradient(135deg,#ff1933,#c9001d) !important;
  border-color:#ff1933 !important;
  box-shadow:0 10px 30px rgba(255,0,25,.22) !important;
}
.kick-btn:hover{
  background:linear-gradient(135deg,#ff3047,#dd001f) !important;
  border-color:#ff3047 !important;
}

/* Twitch — black; logo can remain official purple */
.twitch-btn{
  background:#09090b !important;
  border-color:rgba(255,255,255,.16) !important;
}
.twitch-btn:hover{
  background:#121214 !important;
  border-color:#ff1933 !important;
}

/* Feedback + all main actions — red */
.feedback-submit,
.btn-primary,
.primary{
  background:linear-gradient(135deg,#ff1933,#c9001d) !important;
  border-color:#ff1933 !important;
  color:#fff !important;
  box-shadow:0 10px 28px rgba(255,0,25,.22) !important;
}

/* Feedback "Moje zpětná vazba" — black */
.feedback-btn,
.btn-secondary,
.secondary,
.ghost{
  background:#09090b !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.16) !important;
}
.feedback-btn:hover,
.btn-secondary:hover,
.secondary:hover,
.ghost:hover{
  background:#111113 !important;
  border-color:#ff1933 !important;
}

/* Admin */
.admin-btn{
  background:#09090b !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.16) !important;
}
.admin-btn:hover{
  background:#ff1933 !important;
  border-color:#ff1933 !important;
}

/* Countdown / next stream — remove lavender numbers */
.time,
.countdown,
.next-countdown{
  color:#ff1933 !important;
}
.next-stream,
.next-card{
  background:linear-gradient(145deg,#0d0d0f,#060607) !important;
  border-color:rgba(255,255,255,.13) !important;
}
.next-stream .eyebrow,
.next-card .eyebrow{
  color:#ff1933 !important;
}

/* All section labels — red, not lavender */
.section-label,
.feedback-label,
.stream-label,
.eyebrow,
.feedback-card .eyebrow{
  color:#ff1933 !important;
}

/* Planned streams reveal */
.reveal-tab{
  background:#060607 !important;
  color:#fff !important;
  border-color:rgba(255,25,51,.55) !important;
}
.reveal-tab:hover{
  background:#0d0d0f !important;
  border-color:#ff1933 !important;
}
.reveal-arrow{
  color:#ff1933 !important;
}
.reveal-tab small{
  color:#77777b !important;
}

/* Planned stream list — no purple cards / text */
.list-scroll{
  background:#070708 !important;
  border-color:rgba(255,255,255,.12) !important;
  scrollbar-color:#ff1933 #090909 !important;
}
.list-scroll::-webkit-scrollbar-track{background:#090909 !important}
.list-scroll::-webkit-scrollbar-thumb{background:#ff1933 !important}
.list-scroll .time{
  color:#ff1933 !important;
}
.list-scroll .list-stream::after{
  color:#ff1933 !important;
}
.stream{
  background:linear-gradient(145deg,#111113,#09090a) !important;
  border-color:#27272b !important;
}
.stream:hover{
  border-color:#ff1933 !important;
}

/* Tabs */
.tab.active{
  background:#ff1933 !important;
  border-color:#ff1933 !important;
  color:#fff !important;
}

/* Feedback panel */
.feedback-card{
  background:linear-gradient(145deg,#09090b,#040405) !important;
  border-color:rgba(255,255,255,.13) !important;
}
.feedback-card h2{
  color:#fff !important;
}
.feedback-card .eyebrow{
  color:#ff1933 !important;
}
.feedback-card p{
  color:#a5a5a8 !important;
}

/* Inputs */
input,textarea,select{
  background:#070708 !important;
  color:#fff !important;
  border-color:#29292d !important;
}
input:focus,textarea:focus,select:focus{
  border-color:#ff1933 !important;
  box-shadow:0 0 0 3px rgba(255,0,25,.10) !important;
}

/* Modal/list details */
.stream-detail-modal{
  background:rgba(0,0,0,.72) !important;
}
.stream-detail-box{
  background:linear-gradient(145deg,#0d0d0f,#050506) !important;
  border-color:#333337 !important;
}
.detail-eyebrow{
  color:#ff1933 !important;
}
.detail-game,.detail-status{
  background:#0c0c0e !important;
  border-color:#29292d !important;
}
.detail-status{
  color:#fff !important;
}

/* Admin feedback reply button */
.feedback-item button{
  background:#ff1933 !important;
  color:#fff !important;
}
.feedback-item button:hover{
  background:#d90020 !important;
}

/* Danger remains red/black, never purple */
.danger{
  background:#3a090f !important;
  color:#ff9ca3 !important;
  border-color:#66101b !important;
}

/* Ensure common accent classes cannot reintroduce purple */
[class*="purple"],[class*="violet"]{
  color:#fff !important;
}

/* V33 — show the complete MatroGram logo inside the profile frame */
.brand-mark img,
.profile-image,
img.profile-kick,
#profileImage{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
}

/* =========================================================
   V34 — subtle animated "shine" across buttons
   Black / red / white theme preserved.
   ========================================================= */

/* Keep button content above the shine */
button,
.btn,
.button,
.kick-btn,
.twitch-btn,
.feedback-btn,
.feedback-submit,
.btn-primary,
.btn-secondary,
.primary,
.secondary,
.admin-btn,
.ghost{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* Moving diagonal reflection */
button::after,
.btn::after,
.button::after,
.kick-btn::after,
.twitch-btn::after,
.feedback-btn::after,
.feedback-submit::after,
.btn-primary::after,
.btn-secondary::after,
.primary::after,
.secondary::after,
.admin-btn::after,
.ghost::after{
  content:"";
  position:absolute;
  top:-80%;
  left:-45%;
  width:30%;
  height:260%;
  pointer-events:none;
  z-index:0;
  transform:translateX(-180%) rotate(22deg);
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0) 20%,
    rgba(255,255,255,.42) 48%,
    rgba(255,255,255,.10) 58%,
    transparent 82%
  );
  filter:blur(1px);
  opacity:.0;
  animation:matroButtonShine 10s ease-in-out infinite;
}

/* Text/icons stay above the reflection */
button > *,
.btn > *,
.button > *,
.kick-btn > *,
.twitch-btn > *,
.feedback-btn > *,
.feedback-submit > *,
.btn-primary > *,
.btn-secondary > *,
.primary > *,
.secondary > *,
.admin-btn > *,
.ghost > *{
  position:relative;
  z-index:1;
}

@keyframes matroButtonShine{
  0%,70%{
    transform:translateX(-180%) rotate(22deg);
    opacity:0;
  }
  74%{
    opacity:.75;
  }
  90%{
    transform:translateX(620%) rotate(22deg);
    opacity:.62;
  }
  96%,100%{
    transform:translateX(620%) rotate(22deg);
    opacity:0;
  }
}

/* A little extra red glow on the primary action */
.kick-btn,
.feedback-submit,
.btn-primary,
.primary{
  box-shadow:
    0 8px 28px rgba(255,0,30,.22),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* Secondary buttons get a much softer white reflection */
.twitch-btn,
.feedback-btn,
.btn-secondary,
.secondary,
.admin-btn,
.ghost{
  box-shadow:
    0 8px 22px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}

/* Slightly faster shine on hover */
button:hover::after,
.btn:hover::after,
.button:hover::after,
.kick-btn:hover::after,
.twitch-btn:hover::after,
.feedback-btn:hover::after,
.feedback-submit:hover::after,
.btn-primary:hover::after,
.btn-secondary:hover::after,
.primary:hover::after,
.secondary:hover::after,
.admin-btn:hover::after,
.ghost:hover::after{
  animation-duration:10s;
}

/* V40 — standalone transparent MG logo, no black rectangle */
.topbar .brand-mark{
  width:92px !important;
  height:92px !important;
  flex:0 0 92px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  overflow:visible !important;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.topbar .profile-logo{
  width:92px !important;
  height:92px !important;
  display:block !important;
  object-fit:contain !important;
  object-position:center !important;
  border-radius:0 !important;
  background:transparent !important;
}
@media(max-width:560px){
  .topbar .brand-mark{
    width:64px !important;
    height:64px !important;
    flex-basis:64px !important;
  }
  .topbar .profile-logo{
    width:64px !important;
    height:64px !important;
  }
}

/* V42 — transparent MG logo: no box, no background */
.topbar .brand-mark{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  border-radius:0 !important;
}
.topbar .profile-logo{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  object-fit:contain !important;
  mix-blend-mode:normal !important;
}

/* =========================================================
   V43 — seamless feedback card + truly transparent MG logo
   ========================================================= */

/* The logo image itself is transparent; no wrapper can add a box. */
.topbar .brand-mark,
.topbar .profile-logo{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}
.topbar .profile-logo{
  object-fit:contain !important;
  mix-blend-mode:normal !important;
}

/* Make the feedback content visually belong to the outer card.
   No second rectangle, no inner clipping, no separate background. */
.feedback-section{
  background:linear-gradient(135deg,#111114ee,#0a0a0ce8) !important;
  border:1px solid rgba(255,22,56,.75) !important;
  border-radius:22px !important;
  overflow:hidden !important;
  box-shadow:0 0 30px rgba(255,0,30,.08) !important;
}

.feedback-section::before,
.feedback-section::after,
.feedback-copy::before,
.feedback-copy::after,
.feedback-section form::before,
.feedback-section form::after{
  content:none !important;
  display:none !important;
}

.feedback-section .feedback-copy,
.feedback-section > .feedback-copy,
.feedback-section form,
.feedback-section > form{
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

.feedback-section .feedback-copy{
  padding:0 !important;
  margin:0 !important;
}

.feedback-section form{
  padding:0 !important;
  margin:0 !important;
}

.feedback-section input,
.feedback-section textarea{
  background:#070708 !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:none !important;
}

.feedback-section input:focus,
.feedback-section textarea:focus{
  border-color:#ff1933 !important;
  box-shadow:0 0 0 3px rgba(255,0,30,.09) !important;
}

/* Keep the private-feedback button integrated instead of creating
   another purple/black panel. */
.feedback-section .my-feedback-btn{
  background:#09090b !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#fff !important;
  box-shadow:none !important;
}
.feedback-section .my-feedback-btn:hover{
  background:#111113 !important;
  border-color:#ff1933 !important;
}

/* The submit button remains the single red action. */
.feedback-section form > button[type="submit"]{
  background:linear-gradient(135deg,#ff1933,#c9001d) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 8px 25px rgba(255,0,30,.18) !important;
}


}

/* =========================================================
   V45 — FINAL MG LOGO FIX
   The old V39 ::before branding asset was still rendering the
   black rectangle. Disable it and show the actual transparent
   MG-only image from .brand-mark.
   ========================================================= */

/* IMPORTANT: remove the old full-header pseudo logo */
.topbar::before{
  content:none !important;
  display:none !important;
  background:none !important;
}

/* Restore the real MG logo element */
.topbar .brand-mark{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible !important;
  padding:0 !important;
}

.topbar .profile-logo{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  object-fit:contain !important;
  mix-blend-mode:normal !important;
}

/* Keep the MatroGram wordmark next to the MG logo */
.topbar .logo,
.topbar .brand-sub{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* Make the brand row compact and natural again */
.topbar .brand{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
}

/* =========================================================
   V46 — THREE-PANEL "BREATHING" RED GLOW
   Slow, smooth neon breathing — no flashing.
   Panels:
   1) Main stream schedule / hero
   2) Planned streams reveal/list area
   3) Feedback
   ========================================================= */

/* One shared slow breathing animation for the three outer panels. */
.hero,
.hero-section,
.feedback-section,
.feedback-card,
.reveal-tab{
  animation:v46BreathingGlow 6.5s ease-in-out infinite !important;
  will-change:box-shadow;
}

@keyframes v46BreathingGlow{
  0%,100%{
    box-shadow:
      0 0 3px rgba(255,22,56,.08),
      0 0 10px rgba(255,22,56,.025),
      inset 0 1px 0 rgba(255,255,255,.025);
  }

  50%{
    box-shadow:
      0 0 7px rgba(255,22,56,.38),
      0 0 22px rgba(255,22,56,.18),
      0 0 42px rgba(255,22,56,.07),
      inset 0 1px 0 rgba(255,255,255,.04);
  }
}

/* Keep the red border itself gently visible while the glow breathes. */
.feedback-section,
.feedback-card,
.reveal-tab{
  border-color:rgba(255,22,56,.72) !important;
}

/* The next-stream card shares the same breathing language,
   but remains slightly subtler so it doesn't compete with the main panels. */
.next-stream,
.next-card{
  animation:v46BreathingGlowSoft 6.5s ease-in-out infinite !important;
  will-change:box-shadow;
}

@keyframes v46BreathingGlowSoft{
  0%,100%{
    box-shadow:
      0 0 3px rgba(255,22,56,.05),
      0 0 9px rgba(255,22,56,.02);
  }
  50%{
    box-shadow:
      0 0 6px rgba(255,22,56,.24),
      0 0 18px rgba(255,22,56,.10);
  }
}

/* Respect accessibility settings. */
@media (prefers-reduced-motion: reduce){
  .hero,
  .hero-section,
  .feedback-section,
  .feedback-card,
  .reveal-tab,
  .next-stream,
  .next-card{
    animation:none !important;
  }
}

/* V47 — remove MG logo completely */
.topbar .brand-mark,
.topbar .profile-logo,
.topbar::before{
  display:none !important;
  content:none !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  width:0 !important;
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
}

/* Keep the MatroGram wordmark/subtitle as the header identity. */
.topbar .brand,
.topbar .brand-copy,
.topbar .brand-text,
.topbar .brand-title,
.topbar .brand-sub{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* V48 — CLEAN HEADER: no logo element, no pseudo logo, no reserved box */
.topbar::before,.topbar::after,.brand-mark,.profile-logo{display:none !important;content:none !important;width:0 !important;height:0 !important;padding:0 !important;margin:0 !important;background:none !important;border:0 !important;box-shadow:none !important;}
.brand-clean{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:1;}
.brand-clean .logo{font-size:32px;font-weight:950;letter-spacing:-.04em;color:#fff;}
.brand-clean .logo span{color:#ff1933 !important;}
.brand-clean .brand-sub{margin-top:7px;font-size:10px;letter-spacing:.13em;color:#aaa;font-weight:800;}
.topbar{display:flex !important;align-items:center !important;justify-content:space-between !important;}
@media(max-width:600px){.brand-clean .logo{font-size:26px}.brand-clean .brand-sub{font-size:9px}}

/* =========================================================
   V54 — CLEAN BREATHING RED FRAME
   Only these 3 visible frames glow:
   1) .hero.card
   2) .streams-reveal .reveal-tab
   3) .feedback-section.card

   IMPORTANT:
   .schedule-reveal is only the wrapper for the expandable list.
   It deliberately has NO border and NO glow.
   ========================================================= */

@keyframes matroV54Breath {
  0%, 100% {
    border-color: rgba(255, 25, 51, .55);
    box-shadow:
      0 0 0 1px rgba(255, 25, 51, .08),
      0 0 8px rgba(255, 25, 51, .07),
      0 0 18px rgba(255, 25, 51, .02);
  }
  50% {
    border-color: rgba(255, 25, 51, .98);
    box-shadow:
      0 0 0 1px rgba(255, 25, 51, .22),
      0 0 14px rgba(255, 25, 51, .42),
      0 0 32px rgba(255, 25, 51, .24),
      0 0 55px rgba(255, 25, 51, .10);
  }
}

/* Main page frames: the actual content panels glow; the reveal bar does not. */
.hero.card,
.streams-section.card,
.clips-section.card,
.feedback-section.card {
  border: 2px solid rgba(255, 25, 51, .55) !important;
  animation: matroV54Breath 6.5s ease-in-out infinite !important;
  will-change: box-shadow, border-color;
}

/* The expandable reveal bar is only a control, not a glowing content frame. */
.schedule-reveal,
.streams-reveal {
  border: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}

/* Never put the glow on the expanded wrapper/list or individual stream cards. */
.schedule-panel,
.streams-panel,
.list-scroll,
.list-scroll-inner,
.list-stream,
.streams-section .stream {
  box-shadow: none !important;
}

/* Keep old pseudo-element glow layers from interfering. */
.hero.card::after,
.streams-section.card::before,
.streams-section.card::after,
.clips-section.card::before,
.clips-section.card::after,
.feedback-section.card::before,
.feedback-section.card::after {
  box-shadow: none !important;
  animation: none !important;
}

/* Keep the glow smooth; no blink. */
@media (prefers-reduced-motion: reduce) {
  .hero.card,
  .streams-reveal .reveal-tab,
  .feedback-section.card {
    animation: none !important;
    border-color: rgba(255, 25, 51, .75) !important;
    box-shadow: 0 0 14px rgba(255, 25, 51, .18) !important;
  }
}

/* KLIPY — slightly smaller cards + matching breathing red frame */
.clips-section{
  margin-top:22px;
  padding:24px;
  overflow:hidden;
  will-change:box-shadow,border-color;
}
.clips-head{margin-bottom:16px}
.clips-head h2{font-size:clamp(25px,3vw,34px);line-height:1.05;letter-spacing:-.04em;margin:9px 0 7px}
.clips-head p{margin:0;color:var(--muted);line-height:1.5}
.clips-grid{
  width:min(900px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.clip-card{
  min-width:0;
  border:1px solid #2b2b3b;
  border-radius:16px;
  background:#09090d;
  overflow:hidden;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.clip-card:hover{
  transform:translateY(-2px);
  border-color:#ff1933;
  box-shadow:0 0 24px #ff193322;
}
.clip-video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  background:#000;
  object-fit:cover;
}
@media(max-width:800px){
  .clips-section{padding:20px}
  .clips-grid{width:100%;grid-template-columns:1fr;gap:14px}
}

/* =========================================================
   V58 — CLEAN PANELS + PAGE SCROLL FIX
   - Remove the heavy black rectangles behind content.
   - Let the page scroll normally even when the cursor is over a panel.
   - The planned-stream list is no longer a nested scroll container.
   - Keep only the four intended outer panel glows.
   ========================================================= */

/* Let the actual page/background show through the UI instead of stacking
   opaque black rectangles behind text and inner content. */
html, body {
  background-color: #050505 !important;
}

.topbar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.hero.card,
.streams-section.card,
.clips-section.card,
.feedback-section.card {
  background: rgba(7, 7, 9, .72) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Inner areas must not look like separate black panels. */
.streams-section .admin-tools,
.feedback-section .feedback-copy,
.feedback-section form,
.clips-head,
.clips-grid,
.list-scroll,
.list-scroll-inner {
  background: transparent !important;
  box-shadow: none !important;
}

/* Stream rows remain readable, but are translucent instead of solid black. */
.streams-section .list-stream,
.streams-section .stream {
  background: rgba(8, 8, 10, .58) !important;
  box-shadow: none !important;
}

/* Clip cards and feedback entries use the same glass treatment. */
.clip-card,
.feedback-item {
  background: rgba(8, 8, 10, .58) !important;
  box-shadow: none !important;
}

/* Inputs are still visibly inputs, not page-wide black rectangles. */
.feedback-section input,
.feedback-section textarea {
  background: rgba(5, 5, 7, .62) !important;
}

/* The reveal bar itself stays a simple control. */
.streams-reveal,
.schedule-reveal {
  background: transparent !important;
}

/* ---------------------------------------------------------
   PAGE SCROLL
   Do not trap the mouse wheel/touch inside the stream list.
   The whole document should scroll while the cursor is anywhere
   over the hero, schedule, clips or feedback sections.
   --------------------------------------------------------- */
body,
.wrap,
main {
  overflow-y: visible !important;
}

/* The expandable wrapper must not become a scrolling viewport. */
.streams-reveal,
.streams-reveal .schedule-panel,
.streams-reveal .streams-panel {
  overflow-x: visible !important;
}

/* Important: remove the old fixed-height nested scrollbar. */
.streams-section .list-scroll,
.list-scroll {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 2px 2px 8px !important;
  overscroll-behavior: auto !important;
  touch-action: auto !important;
  -webkit-overflow-scrolling: auto !important;
  scrollbar-width: auto !important;
}

/* Since the list now belongs to the page scroll, use normal document flow. */
.streams-section .list-scroll-inner,
.list-scroll-inner {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* Keep mobile cards readable without creating an inner scroll area. */
@media (max-width: 700px) {
  .streams-section .list-scroll,
  .list-scroll {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* =========================================================
   V59 — AUTHORITATIVE GLOW FOR ALL FOUR MAIN PANELS
   Hero + Planned Streams + Clips + Feedback.
   The reveal bar and individual stream/clip items stay unlit.
   ========================================================= */
@keyframes matroV59PanelBreath {
  0%, 100% {
    border-color: rgba(255, 25, 51, .62) !important;
    box-shadow:
      0 0 0 1px rgba(255, 25, 51, .08),
      0 0 9px rgba(255, 25, 51, .08),
      0 0 22px rgba(255, 25, 51, .025) !important;
  }
  50% {
    border-color: rgba(255, 25, 51, .98) !important;
    box-shadow:
      0 0 0 1px rgba(255, 25, 51, .20),
      0 0 16px rgba(255, 25, 51, .42),
      0 0 36px rgba(255, 25, 51, .22),
      0 0 58px rgba(255, 25, 51, .08) !important;
  }
}

.hero.card,
.streams-section.card,
.clips-section.card,
.feedback-section.card {
  border: 2px solid rgba(255, 25, 51, .62) !important;
  animation: matroV59PanelBreath 6.5s ease-in-out infinite !important;
  will-change: box-shadow, border-color;
}

/* The reveal control is NOT one of the glowing panels. */
.streams-reveal,
.schedule-reveal,
.streams-reveal .reveal-tab,
.schedule-reveal .reveal-tab {
  animation: none !important;
  box-shadow: none !important;
}

/* No glow leaks into the contents of the panels. */
.streams-section .stream,
.streams-section .list-stream,
.clip-card,
.feedback-item,
.streams-section .admin-tools,
.feedback-section .feedback-copy,
.feedback-section form {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero.card,
  .streams-section.card,
  .clips-section.card,
  .feedback-section.card {
    animation: none !important;
    border-color: rgba(255, 25, 51, .78) !important;
    box-shadow: 0 0 16px rgba(255, 25, 51, .20) !important;
  }
}

/* V59: authoritative breathing glow on all four main panels */
@keyframes matroV59PanelBreath {
  0%, 100% {
    border-color: rgba(255, 25, 51, .62) !important;
    box-shadow: 0 0 0 1px rgba(255,25,51,.08), 0 0 9px rgba(255,25,51,.08), 0 0 22px rgba(255,25,51,.025) !important;
  }
  50% {
    border-color: rgba(255, 25, 51, .98) !important;
    box-shadow: 0 0 0 1px rgba(255,25,51,.20), 0 0 16px rgba(255,25,51,.42), 0 0 36px rgba(255,25,51,.22), 0 0 58px rgba(255,25,51,.08) !important;
  }
}

.hero.card,
.streams-section.card,
.clips-section.card,
.feedback-section.card {
  border: 2px solid rgba(255, 25, 51, .62) !important;
  animation: matroV59PanelBreath 6.5s ease-in-out infinite !important;
  will-change: box-shadow, border-color;
}

.streams-reveal,
.schedule-reveal,
.streams-reveal .reveal-tab,
.schedule-reveal .reveal-tab {
  animation: none !important;
  box-shadow: none !important;
}

.streams-section .stream,
.streams-section .list-stream,
.clip-card,
.feedback-item,
.streams-section .admin-tools,
.feedback-section .feedback-copy,
.feedback-section form {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero.card,
  .streams-section.card,
  .clips-section.card,
  .feedback-section.card {
    animation: none !important;
    border-color: rgba(255, 25, 51, .78) !important;
    box-shadow: 0 0 16px rgba(255, 25, 51, .20) !important;
  }
}


/* V60 — HEADER ADMIN MENU
   Administrace lives beside Přihlásit/Odhlásit instead of inside the stream list. */
.top-actions{position:relative;display:flex;align-items:center;gap:8px;}
.admin-menu-wrap{position:relative;}
.admin-menu-wrap[hidden]{display:none!important;}
.admin-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:80;min-width:190px;padding:7px;background:rgba(12,12,18,.97);border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 45px rgba(0,0,0,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.admin-menu[hidden]{display:none!important;}
.admin-menu button{display:block;width:100%;padding:10px 12px;border:1px solid transparent;border-radius:9px;background:transparent;color:#fff;text-align:left;font:inherit;font-size:12px;font-weight:850;cursor:pointer;}
.admin-menu button:hover{background:#171721;border-color:#343342;}

/* V60 — the requested breathing glow belongs to the expandable
   "Naplánované streamy" bar itself. Content panels stay clean. */
.hero.card,.streams-section.card,.clips-section.card,.feedback-section.card{
  animation:none!important;
  box-shadow:none!important;
  border-color:var(--border)!important;
}
.streams-reveal,.schedule-reveal{
  border:0!important;
  box-shadow:none!important;
  animation:none!important;
}
.streams-reveal .reveal-tab{
  border:2px solid rgba(255,25,51,.58)!important;
  animation:matroV60RevealBreath 6.5s ease-in-out infinite!important;
  will-change:box-shadow,border-color;
}
@keyframes matroV60RevealBreath{
  0%,100%{
    border-color:rgba(255,25,51,.55);
    box-shadow:0 0 0 1px rgba(255,25,51,.07),0 0 8px rgba(255,25,51,.06),0 0 18px rgba(255,25,51,.02);
  }
  50%{
    border-color:rgba(255,25,51,.98);
    box-shadow:0 0 0 1px rgba(255,25,51,.20),0 0 14px rgba(255,25,51,.34),0 0 30px rgba(255,25,51,.18),0 0 48px rgba(255,25,51,.07);
  }
}
@media (prefers-reduced-motion:reduce){
  .streams-reveal .reveal-tab{animation:none!important;box-shadow:0 0 14px rgba(255,25,51,.18)!important;border-color:rgba(255,25,51,.78)!important;}
}


/* =========================================================
   V61 — FINAL PANEL BREATH + BUTTON SHINE TUNING
   - Breathing glow: Hero, Planned Streams, Clips, Feedback
   - No shine on Admin/Login/Logout/Feedback submit buttons
   - Other button shine is slightly slower and softer
   ========================================================= */
@keyframes matroV61PanelBreath {
  0%,100% {
    border-color: rgba(255,25,51,.58) !important;
    box-shadow:
      0 0 0 1px rgba(255,25,51,.07),
      0 0 10px rgba(255,25,51,.07),
      0 0 24px rgba(255,25,51,.025) !important;
  }
  50% {
    border-color: rgba(255,25,51,.92) !important;
    box-shadow:
      0 0 0 1px rgba(255,25,51,.16),
      0 0 18px rgba(255,25,51,.30),
      0 0 38px rgba(255,25,51,.16),
      0 0 56px rgba(255,25,51,.055) !important;
  }
}

.hero.card,
.streams-section.card,
.clips-section.card,
.feedback-section.card {
  animation: matroV61PanelBreath 6.8s ease-in-out infinite !important;
  border: 2px solid rgba(255,25,51,.58) !important;
  will-change: box-shadow, border-color;
}

/* The expandable bar has its own breathing glow too. */
.streams-reveal .reveal-tab {
  animation: matroV60RevealBreath 6.8s ease-in-out infinite !important;
}

/* Keep inner content clean — only the four main panels glow. */
.hero.card > *,
.streams-section.card > *,
.clips-section.card > *,
.feedback-section.card > * {
  animation: none !important;
}

/* Remove the moving reflection completely from these controls. */
.admin-btn::after,
#loginBtn::after,
#adminMenuBtn::after,
.feedback-section form button::after,
.feedback-submit::after {
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
}

/* Make the remaining button reflection just a touch slower/softer. */
button::after,
.btn::after,
.button::after,
.kick-btn::after,
.twitch-btn::after,
.feedback-btn::after,
.btn-primary::after,
.btn-secondary::after,
.primary::after,
.secondary::after,
.ghost::after {
  animation-duration: 11.5s !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero.card,
  .streams-section.card,
  .clips-section.card,
  .feedback-section.card,
  .streams-reveal .reveal-tab {
    animation: none !important;
    border-color: rgba(255,25,51,.72) !important;
    box-shadow: 0 0 15px rgba(255,25,51,.18) !important;
  }
}

/* =========================================================
   V62 — AUTHORITATIVE PANEL BREATH + MATCHED DELETE BUTTON
   ========================================================= */

/* Smazat = stejný vzhled jako Upravit */
.actions .danger,
.list-scroll .actions .danger,
.stream .actions .danger {
  background: #171721 !important;
  color: #fff !important;
  border: 1px solid var(--border) !important;
  padding: 10px 13px !important;
  border-radius: 10px !important;
  cursor: pointer;
  font-weight: 850 !important;
  box-shadow: none !important;
}
.actions .danger:hover,
.list-scroll .actions .danger:hover,
.stream .actions .danger:hover {
  background: #1d1d28 !important;
  border-color: #55516c !important;
  transform: translateY(-1px);
}

/* Skutečné hlavní panely — viditelný, plynulý „nádech/výdech“. */
@keyframes matroV62PanelBreath {
  0%, 100% {
    border-color: rgba(255, 25, 51, .52) !important;
    box-shadow:
      0 0 0 1px rgba(255, 25, 51, .045),
      0 0 12px rgba(255, 25, 51, .07),
      0 0 24px rgba(255, 25, 51, .025) !important;
  }
  50% {
    border-color: rgba(255, 25, 51, .95) !important;
    box-shadow:
      0 0 0 1px rgba(255, 25, 51, .18),
      0 0 20px rgba(255, 25, 51, .34),
      0 0 42px rgba(255, 25, 51, .19),
      0 0 64px rgba(255, 25, 51, .07) !important;
  }
}

.hero.card,
.streams-section.card,
.clips-section.card,
.feedback-section.card {
  animation: matroV62PanelBreath 6s ease-in-out infinite !important;
  border: 2px solid rgba(255, 25, 51, .52) !important;
  box-shadow: 0 0 0 1px rgba(255, 25, 51, .045), 0 0 12px rgba(255, 25, 51, .07) !important;
  will-change: box-shadow, border-color;
}

/* Rozbalovací lišta má svůj vlastní stejný dech. */
@keyframes matroV62RevealBreath {
  0%, 100% {
    border-color: rgba(255, 25, 51, .52) !important;
    box-shadow: 0 0 0 1px rgba(255,25,51,.05), 0 0 12px rgba(255,25,51,.07), 0 0 24px rgba(255,25,51,.025) !important;
  }
  50% {
    border-color: rgba(255, 25, 51, .95) !important;
    box-shadow: 0 0 0 1px rgba(255,25,51,.18), 0 0 20px rgba(255,25,51,.34), 0 0 42px rgba(255,25,51,.19), 0 0 64px rgba(255,25,51,.07) !important;
  }
}

.streams-reveal .reveal-tab {
  animation: matroV62RevealBreath 6s ease-in-out infinite !important;
  border-width: 2px !important;
  will-change: box-shadow, border-color;
}

/* Vnitřní prvky nesmí převzít animaci panelu. */
.hero.card > *,
.streams-section.card > *,
.clips-section.card > *,
.feedback-section.card > * {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero.card,
  .streams-section.card,
  .clips-section.card,
  .feedback-section.card,
  .streams-reveal .reveal-tab {
    animation: none !important;
    border-color: rgba(255,25,51,.72) !important;
    box-shadow: 0 0 16px rgba(255,25,51,.18) !important;
  }
}

/* =========================================================
   V63 — BREATHING GLOW FOR KICK + TWITCH FOLLOW BUTTONS
   ========================================================= */
@keyframes matroKickButtonBreath {
  0%, 100% {
    border-color: rgba(83, 252, 24, .55) !important;
    box-shadow:
      0 0 0 1px rgba(83, 252, 24, .04),
      0 0 8px rgba(83, 252, 24, .08),
      0 0 18px rgba(83, 252, 24, .035) !important;
  }
  50% {
    border-color: rgba(83, 252, 24, .98) !important;
    box-shadow:
      0 0 0 1px rgba(83, 252, 24, .16),
      0 0 16px rgba(83, 252, 24, .30),
      0 0 30px rgba(83, 252, 24, .16) !important;
  }
}

@keyframes matroTwitchButtonBreath {
  0%, 100% {
    border-color: rgba(145, 70, 255, .55) !important;
    box-shadow:
      0 0 0 1px rgba(145, 70, 255, .04),
      0 0 8px rgba(145, 70, 255, .08),
      0 0 18px rgba(145, 70, 255, .035) !important;
  }
  50% {
    border-color: rgba(145, 70, 255, .98) !important;
    box-shadow:
      0 0 0 1px rgba(145, 70, 255, .16),
      0 0 16px rgba(145, 70, 255, .30),
      0 0 30px rgba(145, 70, 255, .16) !important;
  }
}

/* Only the two follow buttons get these platform-specific breathing glows. */
.hero-buttons .kick-btn,
.hero-buttons .follow-kick {
  animation: matroKickButtonBreath 5.5s ease-in-out infinite !important;
  border-width: 1px !important;
  will-change: box-shadow, border-color;
}

.hero-buttons .twitch-btn,
.hero-buttons .follow-twitch {
  animation: matroTwitchButtonBreath 5.5s ease-in-out infinite !important;
  border-width: 1px !important;
  will-change: box-shadow, border-color;
}

@media (prefers-reduced-motion: reduce) {
  .hero-buttons .kick-btn,
  .hero-buttons .follow-kick,
  .hero-buttons .twitch-btn,
  .hero-buttons .follow-twitch {
    animation: none !important;
  }
}

/* =========================================================
   V64 — FINAL PANEL BREATH + DELETE/EDIT MATCH + PLATFORM GLOW
   These rules are intentionally LAST so older styles cannot override them.
   ========================================================= */

/* EDIT + DELETE: identical visual treatment. */
.actions .danger,
.actions .ghost,
.actions .delete-stream-btn,
.actions .edit-stream-btn {
  appearance: none !important;
  background: #171721 !important;
  color: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 6px 8px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
.actions .danger:hover,
.actions .ghost:hover,
.actions .delete-stream-btn:hover,
.actions .edit-stream-btn:hover {
  background: #20202b !important;
  color: #fff !important;
  border-color: #ff1933 !important;
  transform: translateY(-1px);
}

/* Strong, visible but smooth breathing glow on the four MAIN panels. */
@keyframes matroV64PanelBreath {
  0%, 100% {
    border-color: rgba(255,25,51,.50) !important;
    box-shadow:
      0 0 0 1px rgba(255,25,51,.04),
      0 0 10px rgba(255,25,51,.10),
      0 0 22px rgba(255,25,51,.035) !important;
  }
  50% {
    border-color: rgba(255,25,51,.98) !important;
    box-shadow:
      0 0 0 1px rgba(255,25,51,.20),
      0 0 18px rgba(255,25,51,.38),
      0 0 38px rgba(255,25,51,.22),
      0 0 58px rgba(255,25,51,.09) !important;
  }
}

.hero.card,
.streams-section.card,
.clips-section.card,
.feedback-section.card {
  border: 2px solid rgba(255,25,51,.50) !important;
  animation: matroV64PanelBreath 6.2s ease-in-out infinite !important;
  will-change: border-color, box-shadow;
}

/* The expandable "Naplánované streamy" bar also breathes, separately. */
@keyframes matroV64RevealBreath {
  0%, 100% {
    border-color: rgba(255,25,51,.50) !important;
    box-shadow: 0 0 10px rgba(255,25,51,.09), 0 0 22px rgba(255,25,51,.03) !important;
  }
  50% {
    border-color: rgba(255,25,51,.98) !important;
    box-shadow: 0 0 18px rgba(255,25,51,.38), 0 0 38px rgba(255,25,51,.20) !important;
  }
}
.streams-reveal .reveal-tab {
  border: 2px solid rgba(255,25,51,.50) !important;
  animation: matroV64RevealBreath 6.2s ease-in-out infinite !important;
  will-change: border-color, box-shadow;
}

/* KICK = exact official brand green #53FC18. */
.hero-buttons .kick-btn {
  animation: matroV64KickBreath 5.8s ease-in-out infinite !important;
  border: 1px solid rgba(83,252,24,.72) !important;
  box-shadow: 0 0 8px rgba(83,252,24,.10) !important;
}
@keyframes matroV64KickBreath {
  0%,100% { box-shadow: 0 0 8px rgba(83,252,24,.10), 0 0 18px rgba(83,252,24,.03) !important; border-color: rgba(83,252,24,.58) !important; }
  50% { box-shadow: 0 0 16px rgba(83,252,24,.34), 0 0 32px rgba(83,252,24,.18), 0 0 46px rgba(83,252,24,.07) !important; border-color: #53FC18 !important; }
}

/* TWITCH = exact official brand purple #9146FF. */
.hero-buttons .twitch-btn {
  animation: matroV64TwitchBreath 5.8s ease-in-out infinite !important;
  border: 1px solid rgba(145,70,255,.72) !important;
  box-shadow: 0 0 8px rgba(145,70,255,.10) !important;
}
@keyframes matroV64TwitchBreath {
  0%,100% { box-shadow: 0 0 8px rgba(145,70,255,.10), 0 0 18px rgba(145,70,255,.03) !important; border-color: rgba(145,70,255,.58) !important; }
  50% { box-shadow: 0 0 16px rgba(145,70,255,.34), 0 0 32px rgba(145,70,255,.18), 0 0 46px rgba(145,70,255,.07) !important; border-color: #9146FF !important; }
}


/* V65 — FORCE-VISIBLE BREATHING EFFECTS
   The animation intentionally changes both glow radius and opacity enough to be
   visibly breathing on normal displays. No transform is used on the panels. */
@keyframes v65PanelBreathing {
  0%, 100% {
    border-color: rgba(255,25,51,.45) !important;
    box-shadow: 0 0 4px rgba(255,25,51,.08), 0 0 12px rgba(255,25,51,.04), 0 0 24px rgba(255,25,51,.02) !important;
  }
  50% {
    border-color: rgba(255,25,51,1) !important;
    box-shadow: 0 0 8px rgba(255,25,51,.38), 0 0 24px rgba(255,25,51,.58), 0 0 48px rgba(255,25,51,.32), 0 0 72px rgba(255,25,51,.12) !important;
  }
}
.hero.card,
.streams-section.card,
.clips-section.card,
.feedback-section.card,
.streams-reveal .reveal-tab {
  animation: v65PanelBreathing 6s ease-in-out infinite !important;
}

@keyframes v65KickBreathing {
  0%,100% { border-color: rgba(83,252,24,.45) !important; box-shadow: 0 0 4px rgba(83,252,24,.06), 0 0 12px rgba(83,252,24,.03) !important; }
  50% { border-color: #53FC18 !important; box-shadow: 0 0 8px rgba(83,252,24,.40), 0 0 22px rgba(83,252,24,.62), 0 0 42px rgba(83,252,24,.28) !important; }
}
@keyframes v65TwitchBreathing {
  0%,100% { border-color: rgba(145,70,255,.45) !important; box-shadow: 0 0 4px rgba(145,70,255,.06), 0 0 12px rgba(145,70,255,.03) !important; }
  50% { border-color: #9146FF !important; box-shadow: 0 0 8px rgba(145,70,255,.40), 0 0 22px rgba(145,70,255,.62), 0 0 42px rgba(145,70,255,.28) !important; }
}
.hero-buttons .kick-btn { animation: v65KickBreathing 5.8s ease-in-out infinite !important; }
.hero-buttons .twitch-btn { animation: v65TwitchBreathing 5.8s ease-in-out infinite !important; }


/* V66 — ELECTRIC / TRACING BREATHING GLOW
   Inspired by the user's reference: the border itself stays clean while a
   bright energy segment travels around it and the surrounding glow breathes.
   CSS only — no image/video asset is used. */
@property --matro-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes matroV66Trace {
  from { --matro-angle: 0deg; }
  to   { --matro-angle: 360deg; }
}

@keyframes matroV66Breath {
  0%,100% { opacity:.34; filter:blur(.15px); }
  50% { opacity:1; filter:blur(.35px); }
}

/* Four main panels + expandable planned-stream bar. */
.hero.card,
.streams-section.card,
.clips-section.card,
.feedback-section.card,
.streams-reveal .reveal-tab {
  position:relative !important;
  isolation:isolate;
  overflow:visible !important;
  animation:none !important;
  border-color:rgba(255,25,51,.72) !important;
  box-shadow:0 0 8px rgba(255,25,51,.16), 0 0 22px rgba(255,25,51,.07) !important;
}

.hero.card::before,
.streams-section.card::before,
.clips-section.card::before,
.feedback-section.card::before,
.streams-reveal .reveal-tab::before {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:-2px !important;
  z-index:20 !important;
  pointer-events:none !important;
  border-radius:inherit !important;
  padding:2px !important;
  background:conic-gradient(from var(--matro-angle),
    transparent 0deg 275deg,
    rgba(255,25,51,.08) 286deg,
    rgba(255,25,51,.25) 300deg,
    #ff1933 313deg,
    #fff1f3 321deg,
    #ff1933 329deg,
    rgba(255,25,51,.18) 341deg,
    transparent 350deg 360deg) !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) !important;
  mask-composite:exclude !important;
  animation:matroV66Trace 3.8s linear infinite, matroV66Breath 5.8s ease-in-out infinite !important;
}

.hero.card::after,
.streams-section.card::after,
.clips-section.card::after,
.feedback-section.card::after,
.streams-reveal .reveal-tab::after {
  content:"" !important;
  position:absolute !important;
  inset:-5px !important;
  z-index:-1 !important;
  pointer-events:none !important;
  border-radius:inherit !important;
  background:transparent !important;
  box-shadow:0 0 10px rgba(255,25,51,.12), 0 0 26px rgba(255,25,51,.08), 0 0 48px rgba(255,25,51,.035) !important;
  animation:matroV66Breath 5.8s ease-in-out infinite !important;
}

/* Platform buttons: same moving energy, but in exact brand colours. */
.hero-buttons .kick-btn,
.hero-buttons .twitch-btn {
  position:relative !important;
  isolation:isolate;
  overflow:visible !important;
  animation:none !important;
}
.hero-buttons .kick-btn::before,
.hero-buttons .twitch-btn::before {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:-2px !important;
  z-index:5 !important;
  pointer-events:none !important;
  border-radius:inherit !important;
  padding:2px !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) !important;
  mask-composite:exclude !important;
  animation:matroV66Trace 3.8s linear infinite, matroV66Breath 5.8s ease-in-out infinite !important;
}
.hero-buttons .kick-btn::before {
  background:conic-gradient(from var(--matro-angle),transparent 0deg 275deg,rgba(83,252,24,.08) 286deg,rgba(83,252,24,.3) 300deg,#53FC18 313deg,#eaffdf 321deg,#53FC18 329deg,rgba(83,252,24,.18) 341deg,transparent 350deg 360deg) !important;
}
.hero-buttons .twitch-btn::before {
  background:conic-gradient(from var(--matro-angle),transparent 0deg 275deg,rgba(145,70,255,.08) 286deg,rgba(145,70,255,.3) 300deg,#9146FF 313deg,#f1e8ff 321deg,#9146FF 329deg,rgba(145,70,255,.18) 341deg,transparent 350deg 360deg) !important;
}
.hero-buttons .kick-btn::after,
.hero-buttons .twitch-btn::after {
  animation:none !important;
}
.hero-buttons .kick-btn { box-shadow:0 0 7px rgba(83,252,24,.16),0 0 20px rgba(83,252,24,.07) !important; }
.hero-buttons .twitch-btn { box-shadow:0 0 7px rgba(145,70,255,.16),0 0 20px rgba(145,70,255,.07) !important; }

@media (prefers-reduced-motion:reduce){
  .hero.card::before,.streams-section.card::before,.clips-section.card::before,.feedback-section.card::before,.streams-reveal .reveal-tab::before,
  .hero.card::after,.streams-section.card::after,.clips-section.card::after,.feedback-section.card::after,
  .hero-buttons .kick-btn::before,.hero-buttons .twitch-btn::before { animation:none !important; }
}

/* V67 — REMOVE THE ELECTRIC/TRACING EFFECT FROM HERO, CLIPS AND FEEDBACK.
   Keep the effect only on Planned Streams, its reveal bar, and Kick/Twitch buttons. */
.hero.card,
.clips-section.card,
.feedback-section.card {
  animation: none !important;
  box-shadow: none !important;
}

.hero.card::before,
.hero.card::after,
.clips-section.card::before,
.clips-section.card::after,
.feedback-section.card::before,
.feedback-section.card::after {
  display: none !important;
  content: none !important;
  animation: none !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce){
  .streams-section.card::before,
  .streams-section.card::after,
  .streams-reveal .reveal-tab::before,
  .streams-reveal .reveal-tab::after,
  .hero-buttons .kick-btn::before,
  .hero-buttons .twitch-btn::before {
    animation: none !important;
  }
}

/* =========================================================
   V68 — FINAL PANEL BREATHING GLOW
   Remove the old tracing/electric effect from the planned-streams
   area and use one shared, clearly visible red breathing glow on
   all four main panels: Hero, Planned Streams, Clips, Feedback.
   The expandable "Naplánované streamy" bar stays clean.
   ========================================================= */

@keyframes matroV68PanelBreath {
  0%, 100% {
    border-color: rgba(255, 45, 70, .62) !important;
    box-shadow:
      0 0 0 1px rgba(255, 45, 70, .10),
      0 0 10px rgba(255, 45, 70, .10),
      0 0 24px rgba(255, 45, 70, .045) !important;
  }
  50% {
    border-color: rgba(255, 105, 122, .98) !important;
    box-shadow:
      0 0 0 1px rgba(255, 70, 92, .22),
      0 0 18px rgba(255, 55, 78, .40),
      0 0 38px rgba(255, 55, 78, .23),
      0 0 58px rgba(255, 55, 78, .10) !important;
  }
}

/* The four main content panels breathe together. */
.hero.card,
.streams-section.card,
.clips-section.card,
.feedback-section.card {
  animation: matroV68PanelBreath 5.8s ease-in-out infinite !important;
  border-color: rgba(255, 45, 70, .62) !important;
  will-change: box-shadow, border-color;
}

/* Completely remove the old moving/tracing frame layers. */
.hero.card::before,
.hero.card::after,
.streams-section.card::before,
.streams-section.card::after,
.clips-section.card::before,
.clips-section.card::after,
.feedback-section.card::before,
.feedback-section.card::after {
  animation: none !important;
  box-shadow: none !important;
  background: none !important;
  display: none !important;
  content: none !important;
}

/* The expandable "Naplánované streamy" bar has no glow/tracing effect. */
.streams-reveal,
.schedule-reveal,
.streams-reveal .reveal-tab,
.schedule-reveal .reveal-tab {
  animation: none !important;
  box-shadow: none !important;
  border-color: var(--border) !important;
}

.streams-reveal .reveal-tab::before,
.streams-reveal .reveal-tab::after,
.schedule-reveal .reveal-tab::before,
.schedule-reveal .reveal-tab::after {
  animation: none !important;
  display: none !important;
  box-shadow: none !important;
  background: none !important;
  content: none !important;
}

/* No moving shine/tracing on these panels. */
@media (prefers-reduced-motion: reduce) {
  .hero.card,
  .streams-section.card,
  .clips-section.card,
  .feedback-section.card {
    animation: none !important;
    box-shadow: 0 0 18px rgba(255, 55, 78, .22) !important;
    border-color: rgba(255, 105, 122, .80) !important;
  }
}

/* =========================================================
   V70 — CLEAN BREATHING PANEL GLOW
   One border only. No second outline, no tracing, no moving segment.
   The existing panel border itself gently changes brightness and glow.
   ========================================================= */

@keyframes matroV70PanelBreath {
  0%, 100% {
    border-color: rgba(255, 45, 70, .38) !important;
    box-shadow:
      0 0 0 rgba(255, 70, 90, 0),
      0 0 8px rgba(255, 45, 70, .04) !important;
  }
  50% {
    border-color: rgba(255, 92, 112, .96) !important;
    box-shadow:
      0 0 7px rgba(255, 70, 90, .28),
      0 0 18px rgba(255, 45, 70, .22),
      0 0 34px rgba(255, 45, 70, .10) !important;
  }
}

.hero.card,
.streams-section.card,
.clips-section.card,
.feedback-section.card {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
  border: 1px solid rgba(255, 45, 70, .38) !important;
  animation: matroV70PanelBreath 5.8s ease-in-out infinite !important;
  will-change: border-color, box-shadow !important;
}

/* Remove all extra animated border layers from previous versions. */
.hero.card::before,
.hero.card::after,
.streams-section.card::before,
.streams-section.card::after,
.clips-section.card::before,
.clips-section.card::after,
.feedback-section.card::before,
.feedback-section.card::after {
  display: none !important;
  content: none !important;
  animation: none !important;
  box-shadow: none !important;
}

/* Keep every panel's content above any visual effects. */
.hero.card > *,
.streams-section.card > *,
.clips-section.card > *,
.feedback-section.card > * {
  position: relative;
  z-index: 1;
}

/* The expandable "Naplánované streamy" bar stays clean — no breathing glow. */
.streams-reveal,
.schedule-reveal,
.streams-reveal .reveal-tab,
.schedule-reveal .reveal-tab {
  animation: none !important;
}

/* Keep the effect active because it is an intentional page design choice. */
@media (prefers-reduced-motion: reduce) {
  .hero.card,
  .streams-section.card,
  .clips-section.card,
  .feedback-section.card {
    animation: matroV70PanelBreath 5.8s ease-in-out infinite !important;
  }
}

/* =========================================================
   V71 — BREATHING GLOW ON THE EXPANDABLE SCHEDULE BAR
   The "Naplánované streamy" reveal bar now uses the same
   clean single-border breathing glow as the main panels.
   No extra outline, tracing, shine, or moving segment.
   ========================================================= */
.streams-reveal .reveal-tab,
.schedule-reveal .reveal-tab {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
  border: 1px solid rgba(255, 45, 70, .38) !important;
  animation: matroV70PanelBreath 5.8s ease-in-out infinite !important;
  will-change: border-color, box-shadow !important;
}

.streams-reveal .reveal-tab::before,
.streams-reveal .reveal-tab::after,
.schedule-reveal .reveal-tab::before,
.schedule-reveal .reveal-tab::after {
  display: none !important;
  content: none !important;
  animation: none !important;
  box-shadow: none !important;
  background: none !important;
}


/* =========================================================
   V73 — RELIABLE BREATHING GLOW + CLEAN ACTION BUTTONS
   The previous breathing rules were blocked by legacy !important
   declarations. This version uses an inset overlay on the exact
   existing border, so there is no second/offset frame.
   ========================================================= */

/* Remove the moving shine from action buttons completely. */
button::after,
.btn::after,
.button::after,
.kick-btn::after,
.twitch-btn::after,
.feedback-btn::after,
.feedback-submit::after,
.btn-primary::after,
.btn-secondary::after,
.primary::after,
.secondary::after,
.admin-btn::after,
.ghost::after {
  display: none !important;
  animation: none !important;
  content: none !important;
}

button,
.btn,
.button,
.kick-btn,
.twitch-btn,
.feedback-btn,
.feedback-submit,
.btn-primary,
.btn-secondary,
.primary,
.secondary,
.admin-btn,
.ghost {
  overflow: visible !important;
}

/* Softer, slightly thicker red borders on the requested panels. */
.hero.card,
.streams-section.card,
.clips-section.card,
.feedback-section.card,
.streams-reveal .reveal-tab,
.schedule-reveal .reveal-tab {
  border: 2px solid rgba(255, 36, 56, .34) !important;
  box-shadow: none !important;
  position: relative !important;
  isolation: isolate !important;
}

/* One exact inset glow layer: it sits ON the existing border, never outside it. */
.hero.card::before,
.streams-section.card::before,
.clips-section.card::before,
.feedback-section.card::before,
.streams-reveal .reveal-tab::before,
.schedule-reveal .reveal-tab::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -2px !important;
  border: 2px solid rgba(255, 36, 56, .30) !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .55 !important;
  box-shadow:
    0 0 5px rgba(255, 36, 56, .06),
    0 0 12px rgba(255, 36, 56, .03) !important;
  animation: matroV73BorderBreath 5.8s ease-in-out infinite !important;
}

/* Never create another animated layer. */
.hero.card::after,
.streams-section.card::after,
.clips-section.card::after,
.feedback-section.card::after,
.streams-reveal .reveal-tab::after,
.schedule-reveal .reveal-tab::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

@keyframes matroV73BorderBreath {
  0%, 100% {
    opacity: .42;
    border-color: rgba(255, 36, 56, .30);
    box-shadow:
      0 0 5px rgba(255, 36, 56, .06),
      0 0 12px rgba(255, 36, 56, .03);
  }
  50% {
    opacity: 1;
    border-color: rgba(255, 115, 130, .92);
    box-shadow:
      0 0 7px rgba(255, 70, 90, .30),
      0 0 18px rgba(255, 45, 70, .20),
      0 0 30px rgba(255, 45, 70, .09);
  }
}

/* Keep content above the breathing border layer. */
.hero.card > *,
.streams-section.card > *,
.clips-section.card > *,
.feedback-section.card > *,
.streams-reveal .reveal-tab > *,
.schedule-reveal .reveal-tab > * {
  position: relative !important;
  z-index: 1 !important;
}

/* The two follow buttons: no shine, keep their existing platform glows. */
.hero-buttons .kick-btn::after,
.hero-buttons .twitch-btn::after {
  display: none !important;
}