/* i3ucky's Tools – Design "Ring" (öffentlicher Shop, index.php). Wird nach theme.css geladen und gilt nur für body.sx.ring.
   Farben aus dem Logo: Blau führt, Pink und Violett nur als Akzent. Einziger Farbverlauf: der Ring (Linien, Rahmen, Avatar). */
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 400; font-display: swap; src: url('fonts/bricolage-grotesque-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 600; font-display: swap; src: url('fonts/bricolage-grotesque-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 700; font-display: swap; src: url('fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 800; font-display: swap; src: url('fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-weight: 400; font-display: swap; src: url('fonts/dm-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-weight: 500; font-display: swap; src: url('fonts/dm-mono-latin-500-normal.woff2') format('woff2'); }

body.sx.ring {
  --bg: #0e0e12; --panel: #16161c; --panel2: #1c1c24; --line: #2a2a33; --text: #f4f4f6; --muted: #a3a3ad; --dim: #72727e;
  --acc: #4cc3ff; --acc-h: #7dd3ff; --acc-ink: #04131c; --ok: #31cf79; --warn: #ffc93c;
  --pink: #ff6bf3; --vio: #a855f7;
  --t1: #4cc3ff; --t2: #ff6bf3; --t3: #a855f7; --t-ink: #0e0e12; --t1-txt: #4cc3ff; --t2-txt: #ff6bf3; --t3-txt: #c084fc;
  --ring: linear-gradient(90deg, #4cc3ff, #a855f7 55%, #ff3df0);
  --f-body: 'Bricolage Grotesque', system-ui, sans-serif; --f-head: 'Bricolage Grotesque', system-ui, sans-serif;
  --f-label: 'DM Mono', ui-monospace, monospace; --f-mono: 'DM Mono', ui-monospace, monospace;
  --hw: 800; --hls: -.03em; --lw: 500; --lls: 0; --ltt: none;
  --r: 6px; --r-s: 4px; --r-card: 8px;
  --top-bg: #0e0e12; --side-bg: #0b0b0e; --code-bg: #0b0b0e; --thumb-bg: #0b0b0e;
  --em-color: var(--text); --card-hover: #4a4a56;
  --cat-overlay: #ff6bf3; --cat-game: #4cc3ff; --cat-utility: #a855f7; --cat-other: #a3a3ad;
  font-size: 16.5px;
}
body.sx.ring ::selection { background: var(--acc); color: var(--acc-ink); }
.ring .sx-tier.t2 .n, .ring .sx-badges .new, .ring .nb, .ring .db-badge.new { color: var(--t-ink); }
.ring code { font-family: var(--f-mono); font-size: .9em; color: var(--acc); }

/* ---------- Kopfzeile ---------- */
.ring .sx-top { padding: 12px 28px; border-bottom: 0; background: var(--bg); }
.ring .sx-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--ring); }
.ring .sx-brand { gap: 12px; font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; }
.ring .sx-logo-img { width: 38px; height: 38px; border-radius: 50%; display: block; flex: none; }
.ring .sx-nav { gap: 22px; font-size: .95rem; }
.ring .sx-link { font-size: .95rem; color: #cfcfd6 !important; font-weight: 600; }
.ring .sx-nav .sx-link.on { color: var(--text) !important; box-shadow: inset 0 -2px 0 var(--acc); padding-bottom: 3px; }
.ring .sx-top .sx-btn.pri { background: transparent; color: var(--acc) !important; border: 1.5px solid var(--acc); }
.ring .sx-top .sx-btn.pri:hover { background: var(--acc); color: var(--acc-ink) !important; }
.ring .sx-avatar { border-radius: 50%; }

/* ---------- Knöpfe ---------- */
.ring .sx-btn { border-radius: var(--r); font-weight: 700; font-size: .98rem; }
.ring .sx-btn.pri { box-shadow: none; }
.ring .rg-link { font-weight: 700; color: var(--text); border-bottom: 2px solid var(--pink); padding-bottom: 2px; }
.ring .rg-link:hover { border-bottom-color: var(--text); }

/* ---------- Startseite ---------- */
.rg-wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.rg-hero { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; padding: 64px 0 52px; }
.rg-by { font: 400 .86rem var(--f-mono); color: var(--muted); margin: 0 0 18px; }
.rg-by b, .rg-by a { color: var(--text); font-weight: 500; }
.rg-by a:hover { color: var(--acc); }
.rg-hero h1 { font: 800 clamp(2.4rem, 4.4vw, 3.9rem)/1.02 var(--f-head); letter-spacing: -.04em; margin: 0 0 22px; text-wrap: balance; }
.rg-hero h1 u { text-decoration: none; box-shadow: inset 0 -.12em 0 var(--acc); }
.rg-lead { font-size: 1.12rem; line-height: 1.6; color: #c9c9d1; margin: 0 0 28px; max-width: 34em; }
.rg-btns { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.rg-btns .sx-btn { padding: 13px 22px; }
.rg-note { margin: 22px 0 0; font-size: .88rem; color: var(--dim); }

.rg-stream { padding: 2px; border-radius: 10px; background: var(--ring); }
.rg-stream-in { display: grid; grid-template-columns: 1fr 230px; border-radius: 8px; overflow: hidden; background: #000; }
.rg-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: radial-gradient(ellipse at 30% 20%, #2c2550 0, transparent 55%), radial-gradient(ellipse at 80% 90%, #13304a 0, transparent 50%), linear-gradient(160deg, #18161f, #0b0b10); }
.rg-stage iframe { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; border: 0; transform-origin: 0 0; background: transparent; pointer-events: none; }
.rg-chat .h .lv { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e91916; margin-right: 7px; vertical-align: 1px; }
.rg-chat { position: relative; background: #18181b; padding: 10px 12px; font: 13.5px/1.45 system-ui, 'Segoe UI', Roboto, sans-serif; display: flex; flex-direction: column; overflow: hidden; }
.rg-chat .h { font: 500 11px var(--f-mono); color: #adadb8; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid #2f2f35; padding-bottom: 8px; }
.rg-chat .ls { position: absolute; left: 12px; right: 12px; top: 36px; bottom: 8px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding-top: 8px; overflow: hidden;  -webkit-mask-image: linear-gradient(transparent, #000 28px); mask-image: linear-gradient(transparent, #000 28px); }
.rg-chat p { margin: 0; color: #efeff1; overflow-wrap: anywhere; animation: rgIn .25s ease-out; }
.rg-chat p b { font-weight: 700; }
.rg-chat p .c { font-family: var(--f-mono); font-size: 12.5px; }
.rg-chat p.bot { color: #adadb8; }
.rg-chat p.bot b { color: var(--vio); }
@keyframes rgIn { from { opacity: 0; transform: translateY(6px); } }
.rg-cap { display: flex; justify-content: space-between; gap: 16px; font: 400 .8rem var(--f-mono); color: var(--dim); margin-top: 10px; }
.rg-cap a { color: var(--muted); border-bottom: 1px solid var(--line); }
.rg-cap a:hover { color: var(--text); }

.rg-steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rg-steps > div { display: flex; gap: 14px; align-items: baseline; padding: 20px 24px 20px 0; }
.rg-steps > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.rg-steps em { font: 500 .9rem var(--f-mono); font-style: normal; color: var(--acc); }
.rg-steps b { display: block; font-size: 1.04rem; }
.rg-steps span { display: block; color: var(--muted); font-size: .92rem; line-height: 1.45; }

.rg-sec { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; padding: 60px 0 18px; scroll-margin-top: 70px; }
.rg-sec h2, .rg-h2 { font: 800 2.2rem/1.1 var(--f-head); letter-spacing: -.03em; margin: 0; }
.rg-sec p { margin: 6px 0 0; color: var(--muted); }
.ring .sx-filters { gap: 6px; }
.ring .sx-fchip { display: inline-flex; align-items: center; gap: 7px; border-radius: 5px; font: 400 .8rem var(--f-mono); padding: 6px 11px; color: #d6d6dc; }
.ring .sx-fchip.on { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 500; }
.rg-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: none; background: var(--cat-other); }
.rg-dot.overlay { background: var(--cat-overlay); } .rg-dot.game { background: var(--cat-game); } .rg-dot.utility { background: var(--cat-utility); }

.rg-feat { display: grid; grid-template-columns: 7fr 5fr; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.rg-feat:hover { border-color: var(--card-hover); }
.rg-feat .im { background: #0b0b0e center/cover; min-height: 320px; }
.rg-feat .tx { padding: 28px 32px; display: flex; flex-direction: column; }
.rg-kat { display: flex; align-items: center; gap: 8px; font: 400 .8rem var(--f-mono); color: var(--muted); }
.rg-feat h3 { font: 800 2rem/1.1 var(--f-head); letter-spacing: -.03em; margin: 10px 0 10px; }
.rg-feat p { color: #c9c9d1; margin: 0 0 16px; line-height: 1.55; }
.rg-feat .last { border-top: 1px solid var(--line); padding: 12px 0 0; font-size: .92rem; color: #c9c9d1; margin-bottom: 18px; }
.rg-feat .last time { display: block; font: 400 .78rem var(--f-mono); color: var(--dim); margin-bottom: 2px; }
.rg-feat .ft { margin-top: auto; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

.rg-rows { margin-top: 10px; }
.rg-row { display: grid; grid-template-columns: 136px minmax(0, 1fr) 150px 150px 92px 20px; gap: 22px; align-items: center; padding: 14px 6px 14px 0; border-bottom: 1px solid var(--line); }
.rg-row:hover { background: var(--panel); }
.rg-row:hover .ar { color: var(--text); transform: translateX(3px); }
.rg-row .th { width: 136px; aspect-ratio: 16 / 9; border-radius: 4px; background: #0b0b0e center/cover; display: grid; place-items: center;
  font: 800 1.5rem var(--f-head); color: var(--bg); }
.rg-row .th.ph { background: var(--panel2); border: 1px solid var(--line); color: var(--cat-other); }
.rg-row .th.ph.overlay { color: var(--cat-overlay); } .rg-row .th.ph.game { color: var(--cat-game); } .rg-row .th.ph.utility { color: var(--cat-utility); }
.rg-row h4 { margin: 0 0 3px; font: 800 1.2rem/1.2 var(--f-head); letter-spacing: -.02em; }
.rg-row h4 .nb { vertical-align: 3px; margin-left: 6px; }
.rg-row .d { color: var(--muted); font-size: .93rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rg-st { font: 400 .82rem var(--f-mono); color: var(--text); }
.rg-st.ok, .rg-st.free { color: var(--ok); }
.rg-st.tier2 { color: var(--t2-txt); } .rg-st.tier3 { color: var(--t3-txt); }
.rg-st.wip { color: var(--dim); }
.rg-up { font: 400 .8rem var(--f-mono); color: var(--dim); text-align: right; }
.rg-up.n { color: var(--ok); }
.rg-row .ar { color: var(--dim); transition: transform .15s, color .15s; }
.rg-empty { color: var(--muted); padding: 20px 0; }

.rg-two { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; padding: 64px 0 70px; align-items: start; }
.rg-tiers { margin-top: 20px; border-top: 1px solid var(--line); }
.rg-tiers > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); column-gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rg-tiers > div > span { grid-row: 1; grid-column: 1; padding-top: 4px; }
.rg-tiers > div > b { grid-row: 2; grid-column: 1; }
.rg-tiers > div > p { grid-row: 1 / 3; grid-column: 2; align-self: center; }
.rg-tiers span { font: 400 .8rem var(--f-mono); color: var(--acc); }
.rg-tiers .t2 span { color: var(--t2-txt); } .rg-tiers .t3 span { color: var(--t3-txt); } .rg-tiers .t0 span { color: var(--ok); }
.rg-tiers b { display: block; font: 800 1.3rem var(--f-head); letter-spacing: -.02em; margin: 2px 0 6px; }
.rg-tiers p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.rg-tiers .mine b::after { content: ' · dein Sub'; font: 400 .78rem var(--f-mono); color: var(--ok); letter-spacing: 0; }
html[lang=en] .rg-tiers .mine b::after { content: ' · your sub'; }
.rg-log { margin-top: 40px; }
.rg-log h3 { display: flex; justify-content: space-between; align-items: baseline; font: 800 1.3rem var(--f-head); letter-spacing: -.02em; margin: 0 0 8px; }
.rg-log h3 a { font: 400 .8rem var(--f-mono); color: var(--muted); border-bottom: 1px solid var(--line); letter-spacing: 0; }
.rg-log a.it { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: .95rem; color: #d6d6dc; }
.rg-log a.it:hover { color: var(--text); }
.rg-log time { font: 400 .8rem var(--f-mono); color: var(--dim); padding-top: 2px; }
.rg-log a.it small { color: var(--muted); }

.rg-me { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px; }
.rg-av { width: 92px; height: 92px; border-radius: 50%; padding: 3px; background: conic-gradient(#ff3df0, #4cc3ff, #a855f7, #ff3df0); }
.rg-av img { width: 100%; height: 100%; border-radius: 50%; display: block; border: 3px solid var(--panel); }
.rg-me h3 { font: 800 1.6rem var(--f-head); letter-spacing: -.02em; margin: 18px 0 8px; }
.rg-me p { color: #c9c9d1; margin: 0 0 12px; line-height: 1.6; }
.rg-me .ln { display: flex; flex-direction: column; margin-top: 18px; border-top: 1px solid var(--line); }
.rg-me .ln a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font: 500 .88rem var(--f-mono); color: var(--text); }
.rg-me .ln a span { color: var(--dim); font-weight: 400; }
.rg-me .ln a:hover { color: var(--acc); }

/* ---------- Tool-Ansicht, Updates, Support (gleiche Farben, ruhigere Formen) ---------- */
.ring .sx-layout { min-height: calc(100vh - 65px); }
.ring .sx-grp { font: 400 .74rem var(--f-mono); letter-spacing: 0; text-transform: none; color: var(--dim); display: flex; align-items: center; gap: 8px; }
.ring .sx-it.on { box-shadow: inset 3px 0 0 var(--acc); }
.ring .sx-it small { font-family: var(--f-mono); font-size: .74rem; text-transform: none; letter-spacing: 0; }
.ring .sx-crumb { font-family: var(--f-mono); font-size: .8rem; color: var(--dim); }
.ring .sx-box h1 { font-size: 2.1rem; letter-spacing: -.03em; }
.ring .sx-panel { border-radius: var(--r-card); }
.ring .sx-panel h2 { font-size: 1.2rem; }
.ring .sx-desc { color: #cfcfd6; font-size: 1rem; }
.ring .sx-desc a, .ring .sx-check a { color: var(--acc) !important; }
.ring .sx-steps .stp i { background: transparent; color: var(--acc); border: 1.5px solid var(--acc); font-family: var(--f-mono); font-weight: 500; }
.ring .sx-row button.on { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
.ring .sx-tag { font-family: var(--f-mono); text-transform: none; letter-spacing: 0; font-size: .74rem; }
.ring .sx-upd-k { font-family: var(--f-mono); }
.ring .sx-upd-k.improved { color: var(--t3-txt); }
.ring .sx-upd-b a { color: var(--acc) !important; }
.ring .sx-form input:focus, .ring .sx-form select:focus, .ring .sx-form textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(76,195,255,.2); }
.ring .sx-discord { background: var(--panel); }
.ring .sx-dc-icon { box-shadow: none; border-radius: 12px; }
.ring .sx-discord .sx-btn { box-shadow: none; color: #fff !important; }

/* Freischalt-Box (guard.php render_paywall_widget) */
.ring .pw-sub-box { border-radius: var(--r-card); box-shadow: inset 3px 0 0 var(--acc); }
.ring .pw-sub-icon { background: transparent; color: var(--acc); border: 1.5px solid var(--acc); border-radius: 50%; }
.ring .pw-sub-tier-badge { font-family: var(--f-mono); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--acc); border-color: var(--acc); }
.ring .pw-btn { border-radius: var(--r); font-weight: 700; }
.ring .pw-btn-primary { background: var(--acc); color: var(--acc-ink) !important; }
.ring .pw-btn-primary:hover { background: var(--acc-h); }
.ring .pw-btn-secondary:hover:not(:disabled) { border-color: var(--text); }
.ring .pw-sub-chip { border-radius: var(--r-s); font-family: var(--f-mono); font-weight: 500; }

/* ---------- Fußzeile ---------- */
.ring .pw-dash-footer { position: relative; border-top: 0; margin-top: 0; padding: 22px 40px 28px; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap;
  font: 400 .82rem var(--f-mono); color: var(--dim); }
.ring .pw-dash-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ring); }
.ring .pw-dash-footer a { color: var(--muted); }
.ring .pw-dash-footer a:hover { color: var(--text); }

/* ---------- Mobil ---------- */
@media (max-width: 1100px) {
  .rg-hero { grid-template-columns: 1fr; gap: 36px; padding-top: 44px; }
  .rg-row { grid-template-columns: 120px minmax(0, 1fr) 130px 84px; }
  .rg-row .th { width: 120px; }
  .rg-row .rg-kat, .rg-row .ar { display: none; }
}
@media (max-width: 900px) {
  .ring .sx-top { padding: 10px 16px; }
  .ring .sx-nav { gap: 8px 14px; }
  .rg-wrap { padding: 0 16px; }
  .rg-two { grid-template-columns: 1fr; gap: 36px; padding: 48px 0 50px; }
  .rg-feat { grid-template-columns: 1fr; }
  .rg-feat .im { min-height: 0; aspect-ratio: 16 / 9; }
  .rg-feat .tx { padding: 22px 20px; }
  .rg-steps { grid-template-columns: 1fr; }
  .rg-steps > div, .rg-steps > div + div { padding: 14px 0; border-left: 0; }
  .rg-steps > div + div { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .rg-stream-in { grid-template-columns: 1fr; }
  .rg-chat { height: 150px; }
  .rg-cap { flex-direction: column; gap: 4px; }
  .rg-row { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .rg-row .th { width: 96px; }
  .rg-row .rg-st, .rg-row .rg-up { grid-column: 2; }
  .rg-row .rg-up { text-align: left; margin-top: -10px; }
  .rg-tiers > div { grid-template-columns: 1fr; }
  .rg-tiers > div > p { grid-row: 3; grid-column: 1; }
  .rg-sec h2, .rg-h2 { font-size: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rg-chat p { animation: none; }
}

/* Live-Demo (demo_view.php) */
.ring .dm-it.on { border-color: var(--acc); }
.ring .dm-stage { border-radius: var(--r-card); }

/* Hero: Sub-Hinweise im Chat und Auswahl der Overlays */
.rg-chat p.ev { color: #c9c9d1; background: #1f1f26; border-left: 3px solid var(--vio); padding: 4px 8px; margin-left: -4px; border-radius: 2px; }
.rg-chat p.ev b { color: var(--text); }
.rg-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rg-pick button { position: relative; overflow: hidden; font: 400 .8rem var(--f-mono); color: var(--muted); background: none; border: 1px solid var(--line);
  border-radius: 5px; padding: 6px 11px; cursor: pointer; }
.rg-pick button:hover { color: var(--text); border-color: #4a4a56; }
.rg-pick button.on { color: var(--text); border-color: var(--acc); }
.rg-pick button i { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--acc); }
.rg-pick button.run i { animation: rgRun 30s linear forwards; }
@keyframes rgRun { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .rg-pick button.run i { animation: none; } }