:root {
--ae-orange: #ea580c;
--ae-orange-soft: #f97316;
--ae-orange-pale: #fdba74;
--ae-orange-deep: #9a3412;
--ae-navy: #1e293b;
--ae-navy-2: #1e3a8a;
--ae-indigo: #4338ca;
--ae-indigo-2: #4f46e5;
--ae-indigo-soft: #6366f1;
--ae-slate: #475569;
--ae-slate-2: #334155;
--ae-slate-bg: #f8fafc;
--ae-border: #e2e8f0;
--ae-text: #0f172a;
--ae-text-soft: #475569;
--ae-card-radius: 20px;
--ae-btn-radius: 999px;
--ae-header-radius: 0;
--ae-chip-radius: 999px;
--ae-soft-shadow: 0 10px 30px rgba(15,23,42,0.08);
--ae-strong-shadow: 0 20px 60px rgba(15,23,42,0.18);
--ae-brand-gradient: linear-gradient(90deg, var(--ae-text) 0%, var(--ae-navy-2) 55%, var(--ae-orange) 100%);
--ae-primary-gradient: linear-gradient(135deg, #fff7eb 0%, #fef1e0 100%);
--ae-primary-text: #c2410c;
--ae-primary-border: rgba(234,88,12,0.42);
--ae-body-gradient:
radial-gradient(circle at 18% 12%, rgba(249,115,22,0.14) 0%, transparent 42%),
radial-gradient(circle at 82% 88%, rgba(30,58,138,0.22) 0%, transparent 58%),
linear-gradient(160deg, #fafbff 0%, #f4f1ea 48%, #eef2f7 100%);
--ae-paint-noise: url("data:image/svg+xml;utf8,");
--ae-paint-noise-strong: url("data:image/svg+xml;utf8,");
--ae-paint-shadow:
0 18px 38px rgba(15,23,42,0.18),
0 5px 14px rgba(234,88,12,0.10),
0 2px 5px rgba(67,56,202,0.07),
inset 0 1px 0 rgba(255,255,255,0.55),
inset 0 -2px 0 rgba(15,23,42,0.08);
--ae-paint-border:
1.9px solid rgba(15,23,42,0.11),
0 0 0 1px rgba(249,115,22,0.10) inset;
--ae-paint-primary-shadow:
0 20px 44px rgba(234,88,12,0.40),
0 8px 18px rgba(67,56,202,0.22),
inset 0 2px 0 rgba(255,255,255,0.42),
inset 0 -3px 0 rgba(15,23,42,0.20);
--ae-icon-shadow-paint:
0 3px 7px rgba(15,23,42,0.22),
0 1px 2px rgba(234,88,12,0.18),
inset 0 0.5px 0 rgba(255,255,255,0.55);
--ae-paint-chip-shadow:
0 7px 18px rgba(15,23,42,0.12),
0 2px 6px rgba(234,88,12,0.08),
0 1px 3px rgba(67,56,202,0.06),
inset 0 1px 0 rgba(255,255,255,0.75),
inset 0 -1.5px 0 rgba(15,23,42,0.06);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: var(--ae-body-gradient);
min-height: 100vh;
color: var(--ae-text);
-webkit-font-smoothing: antialiased;
position: relative;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 260px 260px;
opacity: 0.11;
mix-blend-mode: multiply;
z-index: 1;
}
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise-strong);
background-size: 180px 180px;
opacity: 0.035;
mix-blend-mode: overlay;
z-index: 1;
}
body > * {
position: relative;
z-index: 2;
}
.brand-letters {
display: inline-flex;
align-items: baseline;
font-weight: 900;
letter-spacing: 0.01em;
gap: 0;
color: var(--ae-text);
}
.brand-letters span {
display: inline-block;
position: relative;
backface-visibility: hidden;
}
.brand-letters span:nth-child(1){ color: var(--ae-orange); transform: translate(0.4px, -0.6px) rotate(-0.8deg); }
.brand-letters span:nth-child(2){ color: var(--ae-orange-soft); transform: translate(-0.3px, 0.5px) rotate(0.6deg); }
.brand-letters span:nth-child(3){ color: var(--ae-orange-pale); transform: translate(0.2px, -0.3px) rotate(-0.4deg); }
.brand-letters span:nth-child(4){ color: var(--ae-text); transform: translate(0.1px, 0.4px) rotate(0.3deg); }
.brand-letters span:nth-child(5){ color: var(--ae-indigo); transform: translate(-0.2px, -0.5px) rotate(-0.5deg); }
.brand-letters span:nth-child(6){ color: var(--ae-indigo-2); transform: translate(0.3px, 0.3px) rotate(0.6deg); }
.brand-letters span:nth-child(7){ color: var(--ae-indigo-soft); transform: translate(-0.4px, -0.2px) rotate(-0.3deg); }
.brand-letters.on-slate { color: #fff; }
.brand-letters.on-slate span:nth-child(4){ color: #fff; }
.brand-letters.on-slate span:nth-child(5){ color: #c7d2fe; }
.brand-letters.on-slate span:nth-child(6){ color: #a5b4fc; }
.brand-letters.on-slate span:nth-child(7){ color: #818cf8; }
.brand-letters::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 120px 120px;
opacity: 0.10;
mix-blend-mode: overlay;
}
.brand-letters {
position: relative;
isolation: isolate;
}
.brand-suffix {
color: var(--ae-text-soft);
font-weight: 700;
margin-left: 8px;
letter-spacing: 0.02em;
opacity: 0.95;
}
.brand-suffix.on-slate { color: rgba(255,255,255,0.85); }
.brand-suffix::before {
content: "・";
opacity: 0.7;
margin-right: 6px;
}
.container {
max-width: 1220px;
margin: 0 auto;
padding: 0 22px;
}
.header,
.header-stream {
background:
radial-gradient(circle at 6% 18%, rgba(249,115,22,0.07) 0%, transparent 38%),
radial-gradient(circle at 94% 12%, rgba(30,58,138,0.08) 0%, transparent 40%),
#ffffff;
color: var(--ae-text);
padding: 20px 0 18px;
margin-bottom: 28px;
border-bottom: 1.4px solid rgba(15,23,42,0.08);
box-shadow:
0 6px 20px rgba(15,23,42,0.06),
0 2px 6px rgba(234,88,12,0.04),
inset 0 -1px 0 rgba(255,255,255,0.9);
backdrop-filter: none;
position: relative;
overflow: hidden;
isolation: isolate;
}
.header::before,
.header-stream::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--ae-paint-noise);
background-size: 220px 220px;
opacity: 0.055;
mix-blend-mode: multiply;
pointer-events: none;
z-index: 1;
}
.header > *,
.header-stream > * {
position: relative;
z-index: 2;
}
.header .header-row,
.header-stream > .container,
.header > .container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.header-brand-block {
display: flex;
flex-direction: column;
gap: 7px;
}
.header-brand-row {
display: flex;
align-items: center;
gap: 12px;
}
.header-emblem {
width: 44px;
height: 44px;
border-radius: 13px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
object-fit: cover;
box-shadow:
0 7px 18px rgba(15,23,42,0.22),
0 2px 5px rgba(234,88,12,0.22),
0 1px 2px rgba(67,56,202,0.12),
inset 0 0 0 1.5px rgba(255,255,255,0.45),
inset 0 -1.5px 0 rgba(15,23,42,0.12);
flex: 0 0 auto;
position: relative;
border: 1.2px solid rgba(234,88,12,0.32);
outline: 1px solid rgba(67,56,202,0.18);
outline-offset: -1px;
transform: rotate(-1deg);
}
.header-emblem::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background-image: var(--ae-paint-noise-strong);
background-size: 70px 70px;
opacity: 0.06;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 2;
}
.header-emblem::after {
content: "";
position: absolute;
inset: -2px;
border-radius: 15px;
background-image: var(--ae-paint-noise);
background-size: 90px 90px;
opacity: 0.22;
mix-blend-mode: overlay;
pointer-events: none;
}
.header-brand-block h1.logo {
font-size: 1.85rem;
margin: 0;
filter: drop-shadow(0 1.5px 1.5px rgba(234,88,12,0.08));
}
.back-btn {
margin-bottom: 0 !important;
}
.back-btn a {
color: var(--ae-indigo-2);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
background:
radial-gradient(circle at 10% 20%, rgba(255,255,255,0.9) 0%, transparent 40%),
rgba(99,102,241,0.08);
border-radius: 999px;
border-top-left-radius: calc(999px + 2px);
border-bottom-right-radius: calc(999px + 2px);
font-weight: 800;
font-size: 0.88rem;
border: 1.4px solid rgba(99,102,241,0.22);
box-shadow:
0 4px 12px rgba(99,102,241,0.10),
inset 0 1px 0 rgba(255,255,255,0.9);
transition: all 0.18s ease;
position: relative;
overflow: hidden;
isolation: isolate;
}
.back-btn a::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--ae-paint-noise);
background-size: 110px 110px;
opacity: 0.06;
mix-blend-mode: multiply;
pointer-events: none;
z-index: 1;
}
.back-btn a > * { position: relative; z-index: 2; }
.back-btn a:hover {
background:
radial-gradient(circle at 10% 20%, rgba(255,255,255,0.9) 0%, transparent 40%),
rgba(99,102,241,0.14);
transform: translateY(-1.5px) rotate(-0.15deg);
box-shadow:
0 8px 20px rgba(99,102,241,0.16),
inset 0 1px 0 rgba(255,255,255,0.95);
}
.logo {
font-size: 2.25rem;
font-weight: 900;
margin-bottom: 4px;
display: inline-flex;
align-items: center;
gap: 12px;
letter-spacing: 0.01em;
filter: drop-shadow(0 1.5px 1.5px rgba(234,88,12,0.07));
}
.logo-emblem {
width: 46px;
height: 46px;
border-radius: 13px;
border-top-left-radius: 15px;
border-bottom-right-radius: 16px;
object-fit: cover;
box-shadow:
0 8px 22px rgba(15,23,42,0.24),
0 3px 7px rgba(234,88,12,0.24),
0 1px 3px rgba(67,56,202,0.12),
inset 0 0 0 1.5px rgba(255,255,255,0.45),
inset 0 -1.5px 0 rgba(15,23,42,0.12);
flex: 0 0 auto;
position: relative;
border: 1.2px solid rgba(234,88,12,0.34);
outline: 1px solid rgba(67,56,202,0.20);
outline-offset: -1px;
transform: rotate(-0.8deg);
}
.logo-emblem::before {
content: "";
position: absolute; inset: 0; border-radius: inherit;
background-image: var(--ae-paint-noise-strong);
background-size: 70px 70px;
opacity: 0.06;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 2;
}
.subtitle {
font-size: 0.95rem;
color: var(--ae-text-soft);
font-weight: 600;
letter-spacing: 0.015em;
filter: drop-shadow(0 0.5px 0 rgba(255,255,255,0.8));
}
main {
padding-bottom: 60px;
}
.card {
background:
radial-gradient(circle at 8% 8%, rgba(249,115,22,0.05) 0%, transparent 38%),
radial-gradient(circle at 92% 92%, rgba(67,56,202,0.06) 0%, transparent 42%),
#ffffff;
border-radius: var(--ae-card-radius);
border-top-left-radius: calc(var(--ae-card-radius) + 3px);
border-top-right-radius: calc(var(--ae-card-radius) - 1px);
border-bottom-left-radius: calc(var(--ae-card-radius) - 2px);
border-bottom-right-radius: calc(var(--ae-card-radius) + 4px);
padding: 28px 28px 26px;
margin-bottom: 26px;
box-shadow: var(--ae-paint-shadow);
border: 1.9px solid rgba(15,23,42,0.09);
position: relative;
overflow: hidden;
isolation: isolate;
}
.card::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 210px 210px;
opacity: 0.09;
mix-blend-mode: multiply;
z-index: 1;
}
.card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise-strong);
background-size: 160px 160px;
opacity: 0.028;
mix-blend-mode: overlay;
z-index: 1;
}
.card > * { position: relative; z-index: 2; }
.card h2 {
font-size: 1.35rem;
margin-bottom: 10px;
color: var(--ae-text);
font-weight: 900;
letter-spacing: 0.02em;
}
.description {
color: var(--ae-text-soft);
margin-bottom: 20px;
line-height: 1.7;
}
.form {
max-width: 720px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 700;
color: var(--ae-text);
font-size: 0.95rem;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 13px 17px;
border: 1.7px solid rgba(15,23,42,0.10);
border-radius: 15px;
border-top-left-radius: 17px;
border-bottom-right-radius: 16px;
font-size: 1rem;
transition: all 0.18s ease;
font-family: inherit;
background:
radial-gradient(circle at 5% 10%, rgba(249,115,22,0.04) 0%, transparent 40%),
#ffffff;
color: var(--ae-text);
box-shadow:
inset 0 2px 4px rgba(15,23,42,0.04),
0 1px 0 rgba(255,255,255,0.9);
position: relative;
}
.form-group input::placeholder,
.form-group select::placeholder,
.form-group textarea::placeholder {
color: rgba(71,85,105,0.55);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: rgba(234,88,12,0.55);
box-shadow:
0 0 0 4px rgba(249,115,22,0.14),
inset 0 2px 4px rgba(234,88,12,0.05),
0 6px 18px rgba(234,88,12,0.08);
background:
radial-gradient(circle at 5% 10%, rgba(249,115,22,0.07) 0%, transparent 40%),
#fffdf7;
}
.form-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.btn {
padding: 12px 22px;
border: none;
border-radius: var(--ae-btn-radius);
border-top-left-radius: calc(var(--ae-btn-radius) + 2px);
border-bottom-right-radius: calc(var(--ae-btn-radius) + 3px);
font-size: 0.98rem;
font-weight: 800;
cursor: pointer;
transition: all 0.18s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
letter-spacing: 0.02em;
position: relative;
overflow: hidden;
isolation: isolate;
box-shadow:
0 12px 26px rgba(15,23,42,0.16),
0 4px 10px rgba(234,88,12,0.08),
0 2px 5px rgba(67,56,202,0.05),
inset 0 1px 0 rgba(255,255,255,0.6),
inset 0 -2px 0 rgba(15,23,42,0.10);
border: 1.2px solid rgba(15,23,42,0.09);
}
.btn::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 150px 150px;
opacity: 0.14;
mix-blend-mode: overlay;
z-index: 1;
}
.btn > * { position: relative; z-index: 2; }
.btn::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.26) 50%, rgba(255,255,255,0) 100%);
transform: translateX(-100%); transition: transform 0.5s ease;
pointer-events: none;
z-index: 3;
}
.btn:hover {
transform: translateY(-2px) rotate(-0.15deg);
filter: brightness(1.04);
box-shadow:
0 18px 36px rgba(15,23,42,0.22),
0 6px 14px rgba(234,88,12,0.14),
0 3px 7px rgba(67,56,202,0.08),
inset 0 1px 0 rgba(255,255,255,0.65),
inset 0 -2px 0 rgba(15,23,42,0.12);
}
.btn:hover::after { transform: translateX(100%); }
.btn:active {
transform: translateY(0);
box-shadow:
0 6px 14px rgba(15,23,42,0.16),
0 2px 5px rgba(234,88,12,0.08),
inset 0 2px 4px rgba(15,23,42,0.10);
}
.btn:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none !important;
filter: none !important;
box-shadow:
0 4px 10px rgba(15,23,42,0.08),
inset 0 1px 0 rgba(255,255,255,0.45),
inset 0 -1px 0 rgba(15,23,42,0.06);
}
.btn:disabled::after { display: none; }
.btn-primary {
background:
radial-gradient(circle at 10% 10%, rgba(255,255,255,0.20) 0%, transparent 36%),
linear-gradient(135deg, #fb923c 0%, #ea580c 32%, #c2410c 55%, #4338ca 100%);
color: white;
box-shadow:
0 20px 48px rgba(234,88,12,0.42),
0 8px 18px rgba(67,56,202,0.22),
0 3px 7px rgba(15,23,42,0.10),
inset 0 2px 0 rgba(255,255,255,0.45),
inset 0 -3px 0 rgba(15,23,42,0.20);
border: 1.5px solid rgba(234,88,12,0.42);
}
.btn-primary::before {
opacity: 0.18;
}
.btn-primary:hover {
box-shadow:
0 26px 56px rgba(234,88,12,0.50),
0 10px 22px rgba(67,56,202,0.28),
0 4px 9px rgba(15,23,42,0.12),
inset 0 2px 0 rgba(255,255,255,0.50),
inset 0 -3px 0 rgba(15,23,42,0.22);
}
.btn-success {
background:
radial-gradient(circle at 10% 10%, rgba(255,255,255,0.22) 0%, transparent 36%),
linear-gradient(135deg, #34d399 0%, #10b981 30%, #059669 60%, #047857 100%);
color: white;
box-shadow:
0 18px 38px rgba(16,185,129,0.36),
0 5px 13px rgba(4,120,87,0.22),
0 2px 5px rgba(15,23,42,0.08),
inset 0 2px 0 rgba(255,255,255,0.40),
inset 0 -3px 0 rgba(15,23,42,0.18);
border: 1.3px solid rgba(5,150,105,0.38);
}
.btn-success::before { opacity: 0.16; }
.btn-danger {
background:
radial-gradient(circle at 10% 10%, rgba(255,255,255,0.20) 0%, transparent 36%),
linear-gradient(135deg, #f87171 0%, #ef4444 30%, #dc2626 60%, #b91c1c 100%);
color: white;
box-shadow:
0 18px 38px rgba(239,68,68,0.38),
0 5px 13px rgba(185,28,28,0.22),
0 2px 5px rgba(15,23,42,0.08),
inset 0 2px 0 rgba(255,255,255,0.40),
inset 0 -3px 0 rgba(15,23,42,0.18);
border: 1.3px solid rgba(220,38,38,0.38);
}
.btn-danger::before { opacity: 0.16; }
.btn-secondary {
background:
radial-gradient(circle at 8% 8%, rgba(249,115,22,0.05) 0%, transparent 40%),
radial-gradient(circle at 92% 92%, rgba(67,56,202,0.06) 0%, transparent 42%),
#ffffff;
color: var(--ae-text);
border: 1.6px solid rgba(15,23,42,0.10);
box-shadow:
0 9px 20px rgba(15,23,42,0.10),
0 2px 6px rgba(234,88,12,0.06),
0 1px 3px rgba(67,56,202,0.05),
inset 0 1px 0 rgba(255,255,255,0.85),
inset 0 -1.5px 0 rgba(15,23,42,0.06);
}
.btn-secondary::before { opacity: 0.12; }
.btn-secondary:hover {
border-color: rgba(99,102,241,0.48);
box-shadow:
0 14px 30px rgba(99,102,241,0.18),
0 4px 10px rgba(234,88,12,0.08),
0 2px 5px rgba(15,23,42,0.06),
inset 0 1px 0 rgba(255,255,255,0.9),
inset 0 -1.5px 0 rgba(67,56,202,0.08);
}
.btn-large {
padding: 16px 32px;
font-size: 1.08rem;
}
.streams-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 18px;
margin-top: 20px;
}
.stream-card {
background:
radial-gradient(circle at 6% 6%, rgba(249,115,22,0.06) 0%, transparent 40%),
radial-gradient(circle at 94% 94%, rgba(67,56,202,0.07) 0%, transparent 44%),
#ffffff;
border-radius: 18px;
border-top-left-radius: 21px;
border-top-right-radius: 17px;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 22px;
padding: 20px;
cursor: pointer;
transition: all 0.22s ease;
border: 1.7px solid rgba(15,23,42,0.09);
box-shadow:
0 12px 30px rgba(15,23,42,0.14),
0 4px 11px rgba(234,88,12,0.07),
0 2px 5px rgba(67,56,202,0.05),
inset 0 1px 0 rgba(255,255,255,0.75),
inset 0 -1.5px 0 rgba(15,23,42,0.05);
position: relative;
overflow: hidden;
isolation: isolate;
}
.stream-card::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 200px 200px;
opacity: 0.085;
mix-blend-mode: multiply;
z-index: 1;
}
.stream-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise-strong);
background-size: 140px 140px;
opacity: 0.03;
mix-blend-mode: overlay;
z-index: 1;
}
.stream-card > * { position: relative; z-index: 2; }
.stream-card:hover {
transform: translateY(-4px) rotate(-0.2deg);
border-color: rgba(234,88,12,0.48);
box-shadow:
0 24px 54px rgba(234,88,12,0.26),
0 8px 18px rgba(67,56,202,0.12),
0 3px 7px rgba(15,23,42,0.08),
inset 0 1px 0 rgba(255,255,255,0.85),
inset 0 -2px 0 rgba(234,88,12,0.08);
}
.stream-title {
font-size: 1.18rem;
font-weight: 800;
margin-bottom: 10px;
color: var(--ae-text);
word-break: break-all;
line-height: 1.4;
}
.stream-info {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.88rem;
color: var(--ae-text-soft);
}
.streamer-name {
display: flex;
align-items: center;
gap: 6px;
}
.viewer-count {
display: flex;
align-items: center;
gap: 6px;
color: #c2410c;
font-weight: 900;
filter: drop-shadow(0 1px 0 rgba(194,65,12,0.15));
}
.live-badge {
display: inline-block;
background:
radial-gradient(circle at 10% 15%, rgba(255,255,255,0.22) 0%, transparent 40%),
linear-gradient(135deg, #f97316 0%, #ea580c 35%, #dc2626 70%, #991b1b 100%);
color: white;
padding: 5px 14px 4px;
border-radius: 999px;
border-top-left-radius: calc(999px + 2px);
border-top-right-radius: calc(999px - 1px);
border-bottom-left-radius: calc(999px - 1px);
border-bottom-right-radius: calc(999px + 3px);
font-size: 0.76rem;
font-weight: 900;
animation: pulse 1.5s infinite;
margin-bottom: 10px;
letter-spacing: 0.06em;
position: relative;
box-shadow:
0 8px 20px rgba(220,38,38,0.40),
0 3px 8px rgba(234,88,12,0.28),
0 1px 3px rgba(15,23,42,0.10),
inset 0 1.5px 0 rgba(255,255,255,0.42),
inset 0 -2px 0 rgba(127,29,29,0.35);
border: 1.2px solid rgba(220,38,38,0.45);
isolation: isolate;
transform: rotate(-0.3deg);
}
.live-badge::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background-image: var(--ae-paint-noise-strong);
background-size: 110px 110px;
opacity: 0.06;
mix-blend-mode: multiply;
z-index: 1;
}
.live-badge::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 90px 90px;
opacity: 0.18;
mix-blend-mode: overlay;
z-index: 1;
}
.live-badge > * { position: relative; z-index: 2; }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.empty-state {
text-align: center;
padding: 44px 20px;
color: var(--ae-text-soft);
grid-column: 1 / -1;
background: rgba(248,250,252,0.6);
border-radius: 16px;
border: 1px dashed var(--ae-border);
}
.empty-state p {
margin-bottom: 8px;
}
.small {
font-size: 0.9rem;
}
.footer {
background: #ffffff;
color: var(--ae-text-soft);
text-align: center;
padding: 22px 0 24px;
border-top: 1px solid var(--ae-border);
backdrop-filter: none;
font-size: 0.9rem;
}
.stream-page {
display: grid;
grid-template-columns: 1fr 350px;
gap: 20px;
min-height: calc(100vh - 220px);
}
@media (max-width: 900px) {
.stream-page {
grid-template-columns: 1fr;
}
}
.video-section {
background: #ffffff;
border-radius: 20px;
border-top-left-radius: 22px;
border-bottom-right-radius: 22px;
overflow: hidden;
display: flex;
flex-direction: column;
border: 1.7px solid rgba(15,23,42,0.08);
box-shadow: var(--ae-paint-shadow);
position: relative;
isolation: isolate;
}
.video-section::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 220px 220px;
opacity: 0.05;
mix-blend-mode: multiply;
z-index: 1;
}
.video-section > * { position: relative; z-index: 2; }
.video-container {
position: relative;
background: #000;
aspect-ratio: 16 / 9;
display: flex;
align-items: center;
justify-content: center;
}
.video-container video {
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
}
.video-container canvas {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
background: #0b1220;
}
.video-overlay {
position: absolute;
top: 16px;
left: 16px;
right: 16px;
display: flex;
justify-content: space-between;
align-items: flex-start;
pointer-events: none;
z-index: 20;
}
.video-overlay .live-badge {
font-size: 1rem;
padding: 6px 14px;
}
.video-info {
background:
radial-gradient(circle at 8% 10%, rgba(249,115,22,0.05) 0%, transparent 45%),
radial-gradient(circle at 92% 90%, rgba(67,56,202,0.06) 0%, transparent 50%),
linear-gradient(180deg, rgba(255,250,240,0.6), rgba(243,246,255,0.4));
color: var(--ae-text);
padding: 18px 24px 16px;
border-top: 1.7px solid rgba(15,23,42,0.08);
position: relative;
overflow: hidden;
isolation: isolate;
}
.video-info::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 200px 200px;
opacity: 0.07;
mix-blend-mode: multiply;
z-index: 1;
}
.video-info > * { position: relative; z-index: 2; }
.video-info h2 {
font-size: 1.25rem;
margin-bottom: 6px;
color: var(--ae-text);
font-weight: 900;
letter-spacing: 0.02em;
filter: drop-shadow(0 1px 0 rgba(255,255,255,0.8));
}
.video-info p {
font-size: 0.9rem;
color: var(--ae-text-soft);
font-weight: 600;
}
.controls {
background:
radial-gradient(circle at 10% 20%, rgba(249,115,22,0.14) 0%, transparent 50%),
radial-gradient(circle at 90% 80%, rgba(67,56,202,0.18) 0%, transparent 55%),
linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #312e81 100%);
padding: 18px 22px;
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
color: #fff;
position: relative;
overflow: hidden;
isolation: isolate;
border-top: 1.7px solid rgba(255,255,255,0.08);
}
.controls::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise-strong);
background-size: 150px 150px;
opacity: 0.04;
mix-blend-mode: overlay;
z-index: 1;
}
.controls::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 210px 210px;
opacity: 0.08;
mix-blend-mode: multiply;
z-index: 1;
}
.controls > * { position: relative; z-index: 2; }
.controls-left {
display: flex;
gap: 12px;
align-items: center;
}
.status {
color: #e2e8f0;
display: flex;
align-items: center;
gap: 8px;
font-weight: 800;
letter-spacing: 0.02em;
filter: drop-shadow(0 1.5px 1.5px rgba(0,0,0,0.4));
}
.status-dot {
width: 11px;
height: 11px;
border-radius: 50%;
border-top-left-radius: calc(50% + 1px);
border-top-right-radius: calc(50% - 1px);
border-bottom-left-radius: calc(50% - 1px);
border-bottom-right-radius: calc(50% + 1px);
background: radial-gradient(circle at 30% 30%, #86efac 0%, #22c55e 60%, #15803d 100%);
box-shadow:
0 0 12px rgba(34,197,94,0.7),
0 0 0 2px rgba(22,163,74,0.3),
inset 0 1px 0 rgba(255,255,255,0.45),
inset 0 -1px 0 rgba(21,128,61,0.4);
animation: pulse 1.5s infinite;
}
.chat-section {
background:
radial-gradient(circle at 10% 8%, rgba(249,115,22,0.07) 0%, transparent 42%),
radial-gradient(circle at 92% 94%, rgba(67,56,202,0.09) 0%, transparent 48%),
#ffffff;
border-radius: 20px;
border-top-left-radius: 23px;
border-top-right-radius: 19px;
border-bottom-left-radius: 21px;
border-bottom-right-radius: 24px;
display: flex;
flex-direction: column;
overflow: hidden;
height: calc(100vh - 220px);
min-height: 400px;
max-height: calc(100vh - 220px);
border: 1.7px solid rgba(15,23,42,0.08);
box-shadow:
0 18px 40px rgba(15,23,42,0.16),
0 6px 16px rgba(234,88,12,0.08),
0 2px 6px rgba(67,56,202,0.06),
inset 0 1px 0 rgba(255,255,255,0.85),
inset 0 -1.5px 0 rgba(15,23,42,0.07);
position: relative;
isolation: isolate;
align-self: start;
}
.chat-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise-strong);
background-size: 150px 150px;
opacity: 0.03;
mix-blend-mode: overlay;
z-index: 1;
}
.chat-section::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 200px 200px;
opacity: 0.075;
mix-blend-mode: multiply;
z-index: 1;
}
.chat-section > * { position: relative; z-index: 2; }
.chat-header {
background:
radial-gradient(circle at 12% 10%, rgba(249,115,22,0.14) 0%, transparent 48%),
radial-gradient(circle at 88% 90%, rgba(67,56,202,0.12) 0%, transparent 50%),
linear-gradient(135deg, #fff7ed 0%, #fef3c7 35%, #eff6ff 100%);
padding: 18px 22px;
border-bottom: 1.7px solid rgba(15,23,42,0.09);
font-weight: 900;
font-size: 1.02rem;
letter-spacing: 0.03em;
color: var(--ae-text);
position: relative;
overflow: hidden;
isolation: isolate;
}
.chat-header::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise-strong);
background-size: 140px 140px;
opacity: 0.03;
mix-blend-mode: overlay;
z-index: 1;
}
.chat-header::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 170px 170px;
opacity: 0.075;
mix-blend-mode: multiply;
z-index: 1;
}
.chat-header > * { position: relative; z-index: 2; }
.chat-messages {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
min-height: 0;
padding: 12px 12px;
display: flex;
flex-direction: column;
gap: 8px;
background:
radial-gradient(circle at 90% 10%, rgba(67,56,202,0.035) 0%, transparent 40%),
radial-gradient(circle at 10% 90%, rgba(249,115,22,0.03) 0%, transparent 40%);
position: relative;
scrollbar-width: thin;
scrollbar-color: rgba(71, 85, 105, 0.7) rgba(226, 232, 240, 0.5);
}
.chat-messages::-webkit-scrollbar {
width: 12px;
}
.chat-messages::-webkit-scrollbar-track {
background: rgba(226, 232, 240, 0.5);
border-radius: 8px;
}
.chat-messages::-webkit-scrollbar-thumb {
background-color: rgba(71, 85, 105, 0.7);
border-radius: 8px;
border: 2px solid rgba(226, 232, 240, 0.5);
}
.chat-messages::-webkit-scrollbar-thumb:hover {
background-color: rgba(51, 65, 85, 0.9);
}
.chat-messages::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 220px 220px;
opacity: 0.045;
mix-blend-mode: multiply;
z-index: 0;
}
.chat-messages > * { position: relative; z-index: 1; }
.chat-message {
padding: 8px 12px;
border-radius: 10px;
border-top-left-radius: 13px;
border-top-right-radius: 9px;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 13px;
font-size: 0.82rem;
animation: fadeIn 0.3s ease-in;
background:
radial-gradient(circle at 10% 15%, rgba(67,56,202,0.035) 0%, transparent 45%),
#f8fafc;
border: 1.5px solid rgba(15,23,42,0.07);
box-shadow:
0 4px 12px rgba(15,23,42,0.06),
0 1px 3px rgba(234,88,12,0.04),
inset 0 1px 0 rgba(255,255,255,0.75);
position: relative;
overflow: hidden;
isolation: isolate;
flex-shrink: 0;
}
.chat-message::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise-strong);
background-size: 130px 130px;
opacity: 0.025;
mix-blend-mode: overlay;
z-index: 1;
}
.chat-message::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 150px 150px;
opacity: 0.07;
mix-blend-mode: multiply;
z-index: 1;
}
.chat-message > * { position: relative; z-index: 2; }
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.chat-message.system {
background:
radial-gradient(circle at 10% 15%, rgba(67,56,202,0.08) 0%, transparent 45%),
radial-gradient(circle at 90% 85%, rgba(234,88,12,0.06) 0%, transparent 45%),
linear-gradient(135deg, #eff6ff 0%, #faf5ff 100%);
color: var(--ae-navy-2);
text-align: center;
font-size: 0.75rem;
font-weight: 800;
border-color: #e0e7ff;
box-shadow:
0 3px 10px rgba(79,70,229,0.10),
inset 0 1px 0 rgba(255,255,255,0.85);
letter-spacing: 0.02em;
}
.chat-message.viewer {
background:
radial-gradient(circle at 10% 15%, rgba(249,115,22,0.03) 0%, transparent 45%),
#ffffff;
border-color: #eef2f7;
}
.chat-message.streamer {
background:
radial-gradient(circle at 10% 15%, rgba(249,115,22,0.10) 0%, transparent 45%),
radial-gradient(circle at 90% 85%, rgba(67,56,202,0.06) 0%, transparent 45%),
linear-gradient(135deg, #fff7ed 0%, #eff6ff 100%);
border-left: 5px solid var(--ae-orange);
border-color: #fdba74;
box-shadow:
0 5px 14px rgba(234,88,12,0.12),
0 2px 5px rgba(67,56,202,0.06),
inset 0 1px 0 rgba(255,255,255,0.8);
}
.chat-message .name {
font-weight: 900;
margin-bottom: 3px;
font-size: 0.78rem;
letter-spacing: 0.01em;
filter: drop-shadow(0 0.5px 0 rgba(255,255,255,0.9));
}
.chat-message.viewer .name {
color: var(--ae-text);
}
.chat-message.streamer .name {
color: #c2410c;
filter: drop-shadow(0 0.5px 0 rgba(255,255,255,0.9));
}
.chat-message .time {
font-size: 0.68rem;
color: #94a3b8;
margin-top: 4px;
font-weight: 600;
}
.chat-message .content {
word-break: break-word;
line-height: 1.6;
font-weight: 500;
}
.chat-input-container {
padding: 16px 18px 18px;
border-top: 1.7px solid rgba(15,23,42,0.09);
display: flex;
gap: 10px;
background:
radial-gradient(circle at 10% 8%, rgba(249,115,22,0.06) 0%, transparent 45%),
radial-gradient(circle at 90% 92%, rgba(67,56,202,0.07) 0%, transparent 45%),
linear-gradient(180deg, #fefefe 0%, #fafafa 100%);
position: relative;
overflow: visible;
isolation: isolate;
}
.chat-input-container::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 190px 190px;
opacity: 0.065;
mix-blend-mode: multiply;
z-index: 1;
}
.chat-input-container > * { position: relative; z-index: 2; }
.emoji-btn {
background: #fff;
border: 1.7px solid rgba(15,23,42,0.10);
border-radius: 12px;
width: 44px;
min-width: 44px;
height: 44px;
font-size: 1.2rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.18s ease;
box-shadow:
inset 0 2px 4px rgba(15,23,42,0.05),
inset 0 1px 0 rgba(255,255,255,0.95);
align-self: flex-end;
}
.emoji-btn:hover {
transform: translateY(-1px);
border-color: var(--ae-orange);
box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
}
.emoji-btn.active {
border-color: var(--ae-orange);
background: #fff7ed;
}
.emoji-picker {
position: absolute;
bottom: 100%;
left: 18px;
margin-bottom: 6px;
background: #fff;
border: 1.7px solid rgba(15,23,42,0.12);
border-radius: 14px;
padding: 10px;
box-shadow: 0 12px 32px rgba(15,23,42,0.18), 0 4px 10px rgba(15,23,42,0.08);
z-index: 100;
max-width: 300px;
max-height: 320px;
overflow-y: auto;
overflow-x: hidden;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
scrollbar-width: thin;
scrollbar-color: rgba(249,115,22,0.4) transparent;
}
.emoji-picker::-webkit-scrollbar {
width: 8px;
}
.emoji-picker::-webkit-scrollbar-track {
background: transparent;
}
.emoji-picker::-webkit-scrollbar-thumb {
background: rgba(249,115,22,0.35);
border-radius: 8px;
}
.emoji-picker::-webkit-scrollbar-thumb:hover {
background: rgba(249,115,22,0.55);
}
.emoji-picker .emoji-item {
font-size: 1.25rem;
padding: 5px;
border: none;
background: transparent;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s ease;
line-height: 1;
min-width: 0;
width: 100%;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
}
.emoji-picker .emoji-item:hover {
background: rgba(249,115,22,0.12);
}
.emoji-picker .emoji-category {
grid-column: 1 / -1;
font-size: 0.72rem;
font-weight: 800;
color: #64748b;
padding: 6px 4px 2px;
letter-spacing: 0.03em;
white-space: nowrap;
}
.chat-input {
flex: 1;
padding: 12px 16px;
border: 1.7px solid rgba(15,23,42,0.10);
border-radius: 15px;
border-top-left-radius: 17px;
border-top-right-radius: 14px;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 17px;
font-size: 0.95rem;
line-height: 1.35;
min-height: 44px;
max-height: 140px;
resize: none;
overflow-y: auto;
overflow-x: hidden;
font-family: inherit;
background:
radial-gradient(circle at 10% 15%, rgba(249,115,22,0.04) 0%, transparent 45%),
#ffffff;
transition: all 0.18s ease;
font-weight: 500;
box-shadow:
inset 0 2px 4px rgba(15,23,42,0.05),
inset 0 1px 0 rgba(255,255,255,0.95);
position: relative;
}
.chat-input::placeholder {
color: var(--ae-text-soft);
opacity: 0.75;
font-weight: 500;
font-size: 0.82rem;
line-height: 1.2;
white-space: nowrap;
overflow: visible;
text-overflow: ellipsis;
letter-spacing: 0.01em;
}
.chat-input:focus {
outline: none;
border-color: var(--ae-orange);
box-shadow:
0 0 0 4px rgba(249,115,22,0.10),
0 4px 12px rgba(234,88,12,0.06),
inset 0 1px 0 rgba(255,255,255,0.95);
transform: translateY(-0.5px);
}
.send-btn {
padding: 12px 26px;
background:
radial-gradient(circle at 18% 22%, rgba(255,255,255,0.55) 0%, transparent 40%),
linear-gradient(135deg, #fed7aa 0%, #fb923c 25%, #ea580c 60%, #9a3412 95%);
color: white;
border: 1.7px solid rgba(194,65,12,0.4);
border-radius: 15px;
border-top-left-radius: 17px;
border-top-right-radius: 14px;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 18px;
font-weight: 900;
cursor: pointer;
transition: all 0.18s ease;
box-shadow:
0 10px 26px rgba(234,88,12,0.26),
0 4px 11px rgba(124,45,18,0.14),
0 1px 3px rgba(67,56,202,0.05),
inset 0 1.2px 0 rgba(255,255,255,0.55),
inset 0 -1.8px 0 rgba(124,45,18,0.22);
letter-spacing: 0.03em;
font-size: 0.95rem;
position: relative;
overflow: hidden;
isolation: isolate;
}
.send-btn::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise-strong);
background-size: 130px 130px;
opacity: 0.045;
mix-blend-mode: overlay;
z-index: 1;
}
.send-btn::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 150px 150px;
opacity: 0.12;
mix-blend-mode: multiply;
z-index: 1;
}
.send-btn > * { position: relative; z-index: 2; }
.send-btn:hover {
transform: translateY(-2px) rotate(-0.12deg);
filter: brightness(1.06);
box-shadow:
0 14px 34px rgba(234,88,12,0.34),
0 5px 14px rgba(124,45,18,0.16),
0 2px 5px rgba(67,56,202,0.05),
inset 0 1.2px 0 rgba(255,255,255,0.6),
inset 0 -1.8px 0 rgba(124,45,18,0.22);
}
.send-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
filter: grayscale(20%);
box-shadow:
0 4px 12px rgba(15,23,42,0.08),
inset 0 1px 0 rgba(255,255,255,0.45);
}
.waiting-message {
color: var(--ae-text-soft);
text-align: center;
padding: 50px 20px;
font-weight: 600;
background:
radial-gradient(circle at 50% 20%, rgba(249,115,22,0.06) 0%, transparent 50%);
}
.waiting-message p {
margin-bottom: 12px;
opacity: 0.85;
font-size: 0.95rem;
letter-spacing: 0.02em;
}
.spinner {
width: 46px;
height: 46px;
border: 5px solid rgba(249,115,22,0.14);
border-top-color: var(--ae-orange);
border-right-color: rgba(234,88,12,0.4);
border-radius: 50%;
border-top-left-radius: calc(50% + 2px);
border-top-right-radius: calc(50% - 2px);
border-bottom-left-radius: calc(50% - 2px);
border-bottom-right-radius: calc(50% + 2px);
animation: spin 1s linear infinite;
margin: 24px auto;
box-shadow:
0 0 18px rgba(249,115,22,0.18),
inset 0 1px 0 rgba(255,255,255,0.6);
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.error-message {
background:
radial-gradient(circle at 10% 15%, rgba(220,38,38,0.09) 0%, transparent 45%),
linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
color: #be123c;
padding: 14px 18px;
border-radius: 15px;
border-top-left-radius: 17px;
border-top-right-radius: 14px;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 17px;
margin-bottom: 20px;
border: 1.7px solid #fecdd3;
font-weight: 800;
letter-spacing: 0.01em;
box-shadow:
0 8px 22px rgba(225,29,72,0.12),
inset 0 1px 0 rgba(255,255,255,0.9);
position: relative;
overflow: hidden;
isolation: isolate;
}
.error-message::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 160px 160px;
opacity: 0.07;
mix-blend-mode: multiply;
z-index: 1;
}
.error-message > * { position: relative; z-index: 2; }
.success-message {
background:
radial-gradient(circle at 10% 15%, rgba(22,163,74,0.08) 0%, transparent 45%),
linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
color: #166534;
padding: 14px 18px;
border-radius: 15px;
border-top-left-radius: 17px;
border-top-right-radius: 14px;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 17px;
margin-bottom: 20px;
border: 1.7px solid #bbf7d0;
font-weight: 800;
letter-spacing: 0.01em;
box-shadow:
0 8px 22px rgba(16,185,129,0.12),
inset 0 1px 0 rgba(255,255,255,0.9);
position: relative;
overflow: hidden;
isolation: isolate;
}
.success-message::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 160px 160px;
opacity: 0.07;
mix-blend-mode: multiply;
z-index: 1;
}
.success-message > * { position: relative; z-index: 2; }
#userNav,
#userNavShell {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
max-width: 100%;
}
.user-nav-link {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 17px;
border-radius: 999px;
border-top-left-radius: calc(999px + 3px);
border-top-right-radius: calc(999px - 1px);
border-bottom-left-radius: calc(999px - 1px);
border-bottom-right-radius: calc(999px + 3px);
color: var(--ae-text-soft);
font-weight: 800;
font-size: 0.92rem;
text-decoration: none;
border: 1.7px solid rgba(15,23,42,0.10);
background:
radial-gradient(circle at 10% 15%, rgba(255,255,255,0.9) 0%, transparent 40%),
radial-gradient(circle at 85% 85%, rgba(249,115,22,0.04) 0%, transparent 45%),
radial-gradient(circle at 15% 90%, rgba(67,56,202,0.04) 0%, transparent 45%),
#ffffff;
transition: all 0.18s ease;
letter-spacing: 0.015em;
box-shadow:
0 7px 18px rgba(15,23,42,0.10),
0 2px 6px rgba(234,88,12,0.06),
0 1px 3px rgba(67,56,202,0.05),
inset 0 1px 0 rgba(255,255,255,0.92),
inset 0 -1.5px 0 rgba(15,23,42,0.05);
position: relative;
overflow: hidden;
isolation: isolate;
}
.user-nav-link::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise-strong);
background-size: 130px 130px;
opacity: 0.028;
mix-blend-mode: overlay;
z-index: 1;
}
.user-nav-link::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 140px 140px;
opacity: 0.085;
mix-blend-mode: multiply;
z-index: 1;
}
.user-nav-link > * { position: relative; z-index: 2; }
.user-nav-link:hover {
transform: translateY(-1.8px) rotate(-0.15deg);
border-color: rgba(79,70,229,0.50);
color: var(--ae-indigo-2);
box-shadow:
0 14px 30px rgba(79,70,229,0.18),
0 5px 13px rgba(234,88,12,0.10),
0 2px 5px rgba(15,23,42,0.06),
inset 0 1px 0 rgba(255,255,255,0.95),
inset 0 -2px 0 rgba(79,70,229,0.08);
}
.user-nav-avatar {
width: 42px; height: 42px;
border-radius: 999px;
border-top-left-radius: calc(999px + 3px);
border-top-right-radius: calc(999px - 1px);
border-bottom-left-radius: calc(999px - 1px);
border-bottom-right-radius: calc(999px + 3px);
display: inline-flex; align-items: center; justify-content: center;
background:
radial-gradient(circle at 30% 25%, rgba(255,255,255,0.95) 0%, transparent 50%),
radial-gradient(circle at 70% 75%, rgba(249,115,22,0.12) 0%, transparent 50%),
linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
border: 1.7px solid rgba(15,23,42,0.10);
color: var(--ae-text-soft);
font-size: 19px;
cursor: pointer;
transition: all 0.18s ease;
box-shadow:
0 7px 18px rgba(15,23,42,0.11),
0 2px 6px rgba(234,88,12,0.06),
0 1px 3px rgba(67,56,202,0.05),
inset 0 1px 0 rgba(255,255,255,0.95),
inset 0 -1.5px 0 rgba(15,23,42,0.06);
font-weight: 900;
filter: drop-shadow(0 1px 0 rgba(255,255,255,0.8));
position: relative;
overflow: hidden;
isolation: isolate;
}
.user-nav-avatar::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise-strong);
background-size: 110px 110px;
opacity: 0.03;
mix-blend-mode: overlay;
z-index: 1;
}
.user-nav-avatar::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 130px 130px;
opacity: 0.075;
mix-blend-mode: multiply;
z-index: 1;
}
.user-nav-avatar > * { position: relative; z-index: 2; }
.user-nav-avatar:hover {
border-color: rgba(79,70,229,0.55);
color: var(--ae-indigo-2);
transform: translateY(-2px) rotate(-0.3deg);
box-shadow:
0 14px 28px rgba(79,70,229,0.20),
0 5px 12px rgba(234,88,12,0.08),
0 2px 5px rgba(15,23,42,0.06),
inset 0 1px 0 rgba(255,255,255,0.98),
inset 0 -2px 0 rgba(79,70,229,0.08);
}
/* ==========================================================
* 投げ銭 / Super Chat
* ========================================================== */
.pinned-tips {
padding: 10px 18px 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.pinned-tip {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px 12px;
padding: 13px 16px;
border-radius: 13px;
border-top-left-radius: 16px;
border-top-right-radius: 12px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 16px;
color: #fff;
box-shadow:
0 10px 28px rgba(15,23,42,0.28),
0 4px 12px rgba(234,88,12,0.10),
inset 0 1.5px 0 rgba(255,255,255,0.35),
inset 0 -1.5px 0 rgba(0,0,0,0.22);
animation: fadeIn .4s ease;
position: relative;
overflow: hidden;
isolation: isolate;
border: 1.7px solid rgba(255,255,255,0.12);
}
.pinned-tip::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise-strong);
background-size: 130px 130px;
opacity: 0.05;
mix-blend-mode: overlay;
z-index: 1;
}
.pinned-tip::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 150px 150px;
opacity: 0.12;
mix-blend-mode: multiply;
z-index: 1;
}
.pinned-tip > * { position: relative; z-index: 2; }
.pinned-tip .pinned-amount {
grid-column: 1 / -1;
font-size: 1.22rem;
font-weight: 900;
letter-spacing: .4px;
filter: drop-shadow(0 1.5px 1.5px rgba(0,0,0,0.3));
}
.pinned-tip .pinned-name {
font-weight: 800;
opacity: .96;
font-size: .9rem;
letter-spacing: 0.01em;
}
.pinned-tip .pinned-msg {
font-size: .95rem;
line-height: 1.55;
word-break: break-word;
opacity: .98;
font-weight: 500;
}
.pinned-tip .pinned-pin {
position: absolute;
right: 12px;
top: 10px;
font-size: .78rem;
opacity: .9;
font-weight: 800;
letter-spacing: 0.03em;
z-index: 3;
}
.pinned-tip.color-blue { background: radial-gradient(circle at 20% 15%, rgba(255,255,255,0.30) 0%, transparent 45%), linear-gradient(135deg,#2196F3 0%,#1976D2 100%); }
.pinned-tip.color-green { background: radial-gradient(circle at 20% 15%, rgba(255,255,255,0.28) 0%, transparent 45%), linear-gradient(135deg,#43A047 0%,#2E7D32 100%); }
.pinned-tip.color-yellow { background: radial-gradient(circle at 20% 15%, rgba(255,255,255,0.45) 0%, transparent 45%), linear-gradient(135deg,#FDD835 0%,#F9A825 100%); color:#333; }
.pinned-tip.color-orange { background: radial-gradient(circle at 20% 15%, rgba(255,255,255,0.30) 0%, transparent 45%), linear-gradient(135deg,#FB8C00 0%,#E65100 100%); }
.pinned-tip.color-magenta { background: radial-gradient(circle at 20% 15%, rgba(255,255,255,0.28) 0%, transparent 45%), linear-gradient(135deg,#EC407A 0%,#C2185B 100%); }
.pinned-tip.color-red { background: radial-gradient(circle at 20% 15%, rgba(255,255,255,0.26) 0%, transparent 45%), linear-gradient(135deg,#EF5350 0%,#C62828 100%); }
.pinned-tip.color-default { background: radial-gradient(circle at 20% 15%, rgba(255,255,255,0.30) 0%, transparent 45%), linear-gradient(135deg,#667eea 0%,#764ba2 100%); }
.chat-message.superchat {
color: #fff;
border: 1.7px solid rgba(255,255,255,0.12);
border-radius: 14px;
border-top-left-radius: 17px;
border-top-right-radius: 13px;
border-bottom-left-radius: 13px;
border-bottom-right-radius: 17px;
padding: 13px 16px;
animation: popIn .4s cubic-bezier(.2,1.2,.4,1);
box-shadow:
0 10px 28px rgba(15,23,42,0.26),
0 4px 12px rgba(234,88,12,0.10),
inset 0 1.5px 0 rgba(255,255,255,0.35),
inset 0 -1.5px 0 rgba(0,0,0,0.20);
}
.chat-message.superchat::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise-strong);
background-size: 120px 120px;
opacity: 0.05;
mix-blend-mode: overlay;
z-index: 1;
}
.chat-message.superchat::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 140px 140px;
opacity: 0.13;
mix-blend-mode: multiply;
z-index: 1;
}
@keyframes popIn {
0% { transform: scale(.6); opacity: 0; }
60% { transform: scale(1.06); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
.chat-message.superchat .name {
color: rgba(255,255,255,.93) !important;
font-weight: 900;
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.28));
}
.chat-message.superchat .amount {
font-weight: 900;
font-size: 1.12rem;
letter-spacing: .3px;
margin-bottom: 6px;
display: flex;
justify-content: space-between;
align-items: center;
filter: drop-shadow(0 1.5px 1.5px rgba(0,0,0,0.3));
}
.chat-message.superchat .time {
color: rgba(255,255,255,.82) !important;
}
.chat-message.superchat.color-yellow {
color: #222;
}
.chat-message.superchat.color-yellow .name,
.chat-message.superchat.color-yellow .time {
color: #333 !important;
filter: drop-shadow(0 0.5px 0 rgba(255,255,255,0.6));
}
.tip-box {
background:
radial-gradient(circle at 8% 10%, rgba(249,115,22,0.07) 0%, transparent 45%),
radial-gradient(circle at 92% 90%, rgba(67,56,202,0.08) 0%, transparent 48%),
linear-gradient(180deg, #fefdff 0%, #fafbff 100%);
border-top: 1.7px solid rgba(15,23,42,0.09);
padding: 16px 18px;
position: relative;
overflow: hidden;
isolation: isolate;
}
.tip-box::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 200px 200px;
opacity: 0.065;
mix-blend-mode: multiply;
z-index: 1;
}
.tip-box > * { position: relative; z-index: 2; }
.tip-box .tip-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
cursor: pointer;
user-select: none;
padding: 4px 0;
}
.tip-box .tip-header h4 {
font-size: 1.02rem;
color: var(--ae-text);
font-weight: 900;
letter-spacing: 0.02em;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.tip-toggle {
background: transparent;
border: none;
font-size: 1rem;
cursor: pointer;
color: #64748b;
padding: 4px 8px;
border-radius: 8px;
transition: all 0.18s ease;
display: flex;
align-items: center;
gap: 6px;
font-weight: 700;
}
.tip-toggle:hover {
background: rgba(249,115,22,0.10);
color: var(--ae-orange);
}
.tip-toggle .chevron {
transition: transform 0.25s ease;
display: inline-block;
}
.tip-box.open .tip-toggle .chevron {
transform: rotate(180deg);
}
.tip-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, margin-top 0.3s ease;
margin-top: 0;
}
.tip-box.open .tip-body {
max-height: 600px;
margin-top: 12px;
}
.tip-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: .72rem;
padding: 3px 10px;
border-radius: 999px;
background: #eef2f7;
color: #555;
font-weight: 800;
letter-spacing: 0.02em;
border: 1.5px solid rgba(15,23,42,0.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
position: relative;
overflow: hidden;
}
.tip-badge.demo { background:#FFF4DE; color:#8a5a00; border-color: rgba(251,146,60,0.25); }
.tip-badge.stripe { background:#e7f4ff; color:#0058a3; border-color: rgba(59,130,246,0.25); }
.tip-tiers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 10px;
}
.tip-tier {
padding: 10px 6px;
border-radius: 11px;
border-top-left-radius: 13px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 13px;
border: 1.7px solid rgba(255,255,255,0.14);
font-weight: 900;
font-size: .88rem;
cursor: pointer;
color: #fff;
text-align: center;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
user-select: none;
letter-spacing: 0.02em;
box-shadow:
0 6px 16px rgba(15,23,42,0.14),
0 2px 5px rgba(234,88,12,0.06),
inset 0 1.2px 0 rgba(255,255,255,0.35),
inset 0 -1.2px 0 rgba(0,0,0,0.20);
position: relative;
overflow: hidden;
isolation: isolate;
}
.tip-tier::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise-strong);
background-size: 110px 110px;
opacity: 0.055;
mix-blend-mode: overlay;
z-index: 1;
}
.tip-tier::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 130px 130px;
opacity: 0.14;
mix-blend-mode: multiply;
z-index: 1;
}
.tip-tier > * { position: relative; z-index: 2; }
.tip-tier:hover { transform: translateY(-1.5px) rotate(-0.1deg); }
.tip-tier.active {
border-color: rgba(255,255,255,0.65);
box-shadow:
0 0 0 2.5px #fff,
0 0 0 4.5px rgba(99,102,241,0.5),
0 10px 26px rgba(79,70,229,0.22),
0 3px 8px rgba(234,88,12,0.08),
inset 0 1.2px 0 rgba(255,255,255,0.45),
inset 0 -1.2px 0 rgba(0,0,0,0.20);
}
.tip-tier.color-blue { background: radial-gradient(circle at 20% 15%, rgba(255,255,255,0.35) 0%, transparent 45%), linear-gradient(135deg,#2196F3,#1976D2); }
.tip-tier.color-green { background: radial-gradient(circle at 20% 15%, rgba(255,255,255,0.32) 0%, transparent 45%), linear-gradient(135deg,#43A047,#2E7D32); }
.tip-tier.color-yellow { background: radial-gradient(circle at 20% 15%, rgba(255,255,255,0.55) 0%, transparent 45%), linear-gradient(135deg,#FDD835,#F9A825); color:#333; }
.tip-tier.color-orange { background: radial-gradient(circle at 20% 15%, rgba(255,255,255,0.35) 0%, transparent 45%), linear-gradient(135deg,#FB8C00,#E65100); }
.tip-tier.color-magenta { background: radial-gradient(circle at 20% 15%, rgba(255,255,255,0.32) 0%, transparent 45%), linear-gradient(135deg,#EC407A,#C2185B); }
.tip-tier.color-red { background: radial-gradient(circle at 20% 15%, rgba(255,255,255,0.30) 0%, transparent 45%), linear-gradient(135deg,#EF5350,#C62828); }
.tip-custom {
display: flex;
align-items: center;
gap: 8px;
margin: 8px 0 12px;
}
.tip-custom input {
flex: 1;
padding: 10px 12px;
border: 1.7px solid rgba(15,23,42,0.10);
border-radius: 11px;
border-top-left-radius: 13px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 13px;
font-size: .95rem;
background:
radial-gradient(circle at 10% 15%, rgba(249,115,22,0.035) 0%, transparent 45%),
#ffffff;
font-weight: 600;
box-shadow:
inset 0 2px 4px rgba(15,23,42,0.045),
inset 0 1px 0 rgba(255,255,255,0.95);
transition: all 0.18s ease;
}
.tip-custom input:focus {
outline: none;
border-color: rgba(99,102,241,0.55);
box-shadow:
0 0 0 4px rgba(99,102,241,0.10),
0 4px 12px rgba(79,70,229,0.08),
inset 0 1px 0 rgba(255,255,255,0.95);
transform: translateY(-0.5px);
}
.tip-msg {
width: 100%;
padding: 10px 12px;
border: 1.7px solid rgba(15,23,42,0.10);
border-radius: 11px;
border-top-left-radius: 13px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 13px;
font-family: inherit;
font-size: .9rem;
resize: none;
margin-bottom: 10px;
background:
radial-gradient(circle at 10% 15%, rgba(67,56,202,0.035) 0%, transparent 45%),
#ffffff;
font-weight: 500;
box-shadow:
inset 0 2px 4px rgba(15,23,42,0.045),
inset 0 1px 0 rgba(255,255,255,0.95);
transition: all 0.18s ease;
}
.tip-msg:focus {
outline: none;
border-color: rgba(99,102,241,0.55);
box-shadow:
0 0 0 4px rgba(99,102,241,0.10),
0 4px 12px rgba(79,70,229,0.08),
inset 0 1px 0 rgba(255,255,255,0.95);
}
.tip-card-wrap {
margin-bottom: 10px;
}
.tip-card-label {
display: block;
font-size: 0.78rem;
font-weight: 800;
color: var(--ae-text-soft);
margin-bottom: 6px;
letter-spacing: 0.02em;
}
.tip-card-element {
padding: 11px 14px;
border: 1.7px solid rgba(15,23,42,0.10);
border-radius: 12px;
background: #fff;
min-height: 42px;
box-shadow:
0 2px 6px rgba(15,23,42,0.04),
inset 0 1px 0 rgba(255,255,255,0.9);
}
.tip-card-element.StripeElement--focus {
border-color: rgba(99,102,241,0.55);
box-shadow: 0 0 0 4px rgba(99,102,241,0.10);
}
.tip-card-element.StripeElement--invalid {
border-color: rgba(239,68,68,0.55);
}
.tip-summary {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
background:
radial-gradient(circle at 10% 15%, rgba(99,102,241,0.08) 0%, transparent 45%),
radial-gradient(circle at 90% 85%, rgba(249,115,22,0.06) 0%, transparent 45%),
#eef2ff;
border-radius: 11px;
border-top-left-radius: 13px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 13px;
margin-bottom: 10px;
font-size: .88rem;
color: var(--ae-text-soft);
font-weight: 700;
letter-spacing: 0.015em;
border: 1.5px solid rgba(99,102,241,0.14);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.9),
0 3px 10px rgba(79,70,229,0.08);
position: relative;
overflow: hidden;
}
.tip-summary::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 150px 150px;
opacity: 0.06;
mix-blend-mode: multiply;
z-index: 1;
}
.tip-summary > * { position: relative; z-index: 2; }
.tip-summary .amt {
color: #4f46e5;
font-weight: 900;
font-size: 1.1rem;
filter: drop-shadow(0 0.5px 0 rgba(255,255,255,0.9));
}
.tip-send-btn {
width: 100%;
padding: 13px 16px;
border-radius: 13px;
border-top-left-radius: 16px;
border-top-right-radius: 12px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 16px;
font-weight: 900;
font-size: 1.02rem;
border: 1.7px solid rgba(236,72,153,0.35);
color: white;
cursor: pointer;
background:
radial-gradient(circle at 18% 22%, rgba(255,255,255,0.50) 0%, transparent 40%),
linear-gradient(135deg,#F093FB 0%,#F5576C 42%,#EC4899 72%,#FDD835 100%);
transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
letter-spacing: 0.03em;
box-shadow:
0 12px 32px rgba(236,72,153,0.28),
0 5px 14px rgba(245,87,108,0.18),
0 1px 3px rgba(249,115,22,0.05),
inset 0 1.2px 0 rgba(255,255,255,0.45),
inset 0 -1.8px 0 rgba(190,24,93,0.22);
position: relative;
overflow: hidden;
isolation: isolate;
}
.tip-send-btn::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise-strong);
background-size: 130px 130px;
opacity: 0.05;
mix-blend-mode: overlay;
z-index: 1;
}
.tip-send-btn::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 150px 150px;
opacity: 0.13;
mix-blend-mode: multiply;
z-index: 1;
}
.tip-send-btn > * { position: relative; z-index: 2; }
.tip-send-btn:disabled {
opacity:.55;
cursor:not-allowed;
filter: grayscale(20%);
box-shadow:
0 4px 12px rgba(15,23,42,0.08),
inset 0 1px 0 rgba(255,255,255,0.4);
}
.tip-send-btn:not(:disabled):hover {
transform: translateY(-2px) rotate(-0.12deg);
filter: brightness(1.06);
box-shadow:
0 16px 40px rgba(236,72,153,0.36),
0 6px 16px rgba(245,87,108,0.20),
0 2px 5px rgba(249,115,22,0.05),
inset 0 1.2px 0 rgba(255,255,255,0.5),
inset 0 -1.8px 0 rgba(190,24,93,0.22);
}
/* Dashboard */
.dash-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.dash-card {
background: #fff;
padding: 20px 22px;
border-radius: 16px;
box-shadow: 0 6px 20px rgba(0,0,0,.06);
border-left: 5px solid #667eea;
}
.dash-card h4 { font-size: .85rem; color:#777; margin-bottom:6px; font-weight:600; }
.dash-card .num { font-size: 1.6rem; font-weight: 800; color:#222; }
.dash-card.fee { border-left-color:#C62828; }
.dash-card.earn { border-left-color:#2E7D32; }
.dash-card.count { border-left-color:#F9A825; }
.dash-table {
width: 100%;
border-collapse: collapse;
font-size: .9rem;
}
.dash-table th, .dash-table td {
padding: 10px 12px;
border-bottom: 1px solid #eef0f4;
text-align: left;
}
.dash-table th { background: #fafbff; font-weight: 700; color:#666; }
.dash-table tr:hover td { background: #fafbff; }
.dash-table .amount-bold { font-weight: 800; color:#222; }
.badge-status {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: .75rem;
font-weight: 700;
}
.badge-status.paid { background: #e7f7ec; color:#1c7a3f; }
.badge-status.pending { background: #fff4de; color:#8a5a00; }
.badge-status.failed { background: #fde6e6; color:#c0392b; }
.badge-status.refunded { background: #f1f2f6; color:#666; }
.header-right-btns {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.btn-outline {
padding: 9px 18px;
border-radius: 999px;
border-top-left-radius: calc(999px + 3px);
border-top-right-radius: calc(999px - 1px);
border-bottom-left-radius: calc(999px - 1px);
border-bottom-right-radius: calc(999px + 3px);
border: 1.7px solid rgba(15,23,42,0.10);
color: var(--ae-text-soft);
font-weight: 800;
cursor: pointer;
background:
radial-gradient(circle at 10% 15%, rgba(255,255,255,0.9) 0%, transparent 40%),
radial-gradient(circle at 85% 85%, rgba(249,115,22,0.04) 0%, transparent 45%),
radial-gradient(circle at 15% 90%, rgba(67,56,202,0.04) 0%, transparent 45%),
#ffffff;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 7px;
transition: all 0.18s ease;
font-size: 0.92rem;
letter-spacing: 0.015em;
box-shadow:
0 7px 18px rgba(15,23,42,0.10),
0 2px 6px rgba(234,88,12,0.06),
0 1px 3px rgba(67,56,202,0.05),
inset 0 1px 0 rgba(255,255,255,0.92),
inset 0 -1.5px 0 rgba(15,23,42,0.05);
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn-outline::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise-strong);
background-size: 130px 130px;
opacity: 0.028;
mix-blend-mode: overlay;
z-index: 1;
}
.btn-outline::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 140px 140px;
opacity: 0.085;
mix-blend-mode: multiply;
z-index: 1;
}
.btn-outline > * { position: relative; z-index: 2; }
.btn-outline:hover {
transform: translateY(-1.8px) rotate(-0.15deg);
border-color: rgba(79,70,229,0.50);
color: var(--ae-indigo-2);
box-shadow:
0 14px 30px rgba(79,70,229,0.18),
0 5px 13px rgba(234,88,12,0.10),
0 2px 5px rgba(15,23,42,0.06),
inset 0 1px 0 rgba(255,255,255,0.95),
inset 0 -2px 0 rgba(79,70,229,0.08);
}
/* Dashboard */
.dash-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.dash-card {
background:
radial-gradient(circle at 12% 10%, rgba(249,115,22,0.06) 0%, transparent 45%),
radial-gradient(circle at 88% 90%, rgba(67,56,202,0.07) 0%, transparent 48%),
#ffffff;
padding: 20px 22px;
border-radius: 18px;
border-top-left-radius: 21px;
border-top-right-radius: 16px;
border-bottom-left-radius: 17px;
border-bottom-right-radius: 22px;
box-shadow:
0 14px 34px rgba(15,23,42,0.14),
0 4px 12px rgba(234,88,12,0.07),
0 2px 5px rgba(67,56,202,0.05),
inset 0 1px 0 rgba(255,255,255,0.75),
inset 0 -1.5px 0 rgba(15,23,42,0.06);
border: 1.7px solid rgba(15,23,42,0.08);
border-left: 5.5px solid var(--ae-orange);
position: relative;
overflow: hidden;
isolation: isolate;
}
.dash-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(249,115,22,0.04) 0%, rgba(30,58,138,0.04) 100%);
pointer-events: none;
z-index: 1;
}
.dash-card::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 190px 190px;
opacity: 0.09;
mix-blend-mode: multiply;
z-index: 2;
}
.dash-card > * {
position: relative;
z-index: 3;
}
.dash-card h4 {
font-size: .85rem; color: var(--ae-text-soft);
margin-bottom:6px; font-weight:800;
letter-spacing: 0.02em;
position: relative;
z-index: 3;
}
.dash-card .num {
font-size: 1.75rem; font-weight: 900;
background: var(--ae-brand-gradient);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 1px 0 rgba(234,88,12,0.10));
position: relative;
z-index: 3;
letter-spacing: 0.02em;
}
.dash-card.fee { border-left-color:#c0392b; }
.dash-card.earn { border-left-color:#16a34a; }
.dash-card.count { border-left-color:#f59e0b; }
.dash-tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.dash-tabs button,
.tabs .tab,
.stream-tab,
.sort-btn,
.category-chip {
padding: 11px 19px;
border-radius: 999px;
border-top-left-radius: calc(999px + 3px);
border-top-right-radius: calc(999px - 1px);
border-bottom-left-radius: calc(999px - 1px);
border-bottom-right-radius: calc(999px + 3px);
border: 1.7px solid rgba(15,23,42,0.10);
background:
radial-gradient(circle at 10% 15%, rgba(249,115,22,0.04) 0%, transparent 45%),
radial-gradient(circle at 90% 85%, rgba(67,56,202,0.04) 0%, transparent 45%),
#ffffff;
cursor: pointer;
font-weight: 800;
color: var(--ae-text-soft);
transition: all 0.18s ease;
font-size: 0.95rem;
letter-spacing: 0.02em;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: var(--ae-paint-chip-shadow);
position: relative;
overflow: hidden;
isolation: isolate;
}
.dash-tabs button::before,
.tabs .tab::before,
.stream-tab::before,
.sort-btn::before,
.category-chip::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise-strong);
background-size: 140px 140px;
opacity: 0.025;
mix-blend-mode: overlay;
z-index: 1;
}
.dash-tabs button::after,
.tabs .tab::after,
.stream-tab::after,
.sort-btn::after,
.category-chip::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 150px 150px;
opacity: 0.085;
mix-blend-mode: multiply;
z-index: 1;
}
.dash-tabs button > *,
.tabs .tab > *,
.stream-tab > *,
.sort-btn > *,
.category-chip > * { position: relative; z-index: 2; }
.dash-tabs button .chip-icon,
.tabs .tab .chip-icon,
.stream-tab .chip-icon,
.sort-btn .chip-icon,
.category-chip .chip-icon,
.dash-tabs button .count,
.tabs .tab .count,
.stream-tab .count,
.sort-btn .count,
.category-chip .count {
filter: drop-shadow(0 2px 2px rgba(15,23,42,0.14));
}
.dash-tabs button:hover,
.tabs .tab:hover,
.stream-tab:hover,
.sort-btn:hover,
.category-chip:hover {
transform: translateY(-1.5px) rotate(-0.12deg);
border-color: rgba(79,70,229,0.48);
color: var(--ae-indigo-2);
box-shadow:
0 12px 28px rgba(79,70,229,0.14),
0 4px 11px rgba(234,88,12,0.09),
0 2px 5px rgba(15,23,42,0.06),
inset 0 1px 0 rgba(255,255,255,0.9),
inset 0 -1.5px 0 rgba(79,70,229,0.08);
}
.dash-tabs button.active,
.stream-tab.active,
.sort-btn.active,
.category-chip.active,
.tabs .tab.active {
background:
radial-gradient(circle at 10% 15%, rgba(249,115,22,0.04) 0%, transparent 45%),
radial-gradient(circle at 90% 85%, rgba(67,56,202,0.04) 0%, transparent 45%),
#ffffff;
color: var(--ae-text-soft);
border-color: rgba(15,23,42,0.10);
box-shadow: var(--ae-paint-chip-shadow);
}
.dash-tabs button.active {
background:
radial-gradient(circle at 12% 18%, rgba(255,255,255,0.25) 0%, transparent 48%),
radial-gradient(circle at 88% 82%, rgba(99,102,241,0.55) 0%, transparent 52%),
linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
color: #ffffff;
border-color: rgba(67,56,202,0.85);
box-shadow:
0 14px 30px rgba(67,56,202,0.32),
0 4px 11px rgba(99,102,241,0.22),
inset 0 1.5px 0 rgba(255,255,255,0.4),
inset 0 -2px 0 rgba(15,23,42,0.25);
}
.dash-tabs button.active::after {
opacity: 0.18;
mix-blend-mode: overlay;
}
.stream-tab.active::after,
.sort-btn.active::after,
.category-chip.active::after,
.tabs .tab.active::after {
opacity: 0.085;
mix-blend-mode: multiply;
}
.tabs {
display: flex;
gap: 10px;
margin-bottom: 22px;
flex-wrap: wrap;
padding-bottom: 14px;
border-bottom: 1px solid var(--ae-border);
}
.global-nav-tabs {
display: flex;
width: 100%;
box-sizing: border-box;
gap: 10px;
flex-wrap: wrap;
margin: 14px 0 26px 0;
padding: 16px 20px;
background:
radial-gradient(circle at 8% 10%, rgba(249,115,22,0.11) 0%, transparent 45%),
radial-gradient(circle at 92% 90%, rgba(30,58,138,0.14) 0%, transparent 55%),
linear-gradient(135deg, #fffaf3 0%, #f3f6ff 100%);
border-radius: 24px;
border-top-left-radius: 28px;
border-top-right-radius: 22px;
border-bottom-left-radius: 23px;
border-bottom-right-radius: 29px;
border: 1.7px solid rgba(15,23,42,0.08);
box-shadow:
0 14px 34px rgba(15,23,42,0.12),
0 5px 14px rgba(234,88,12,0.07),
inset 0 1px 0 rgba(255,255,255,0.92);
position: relative;
overflow: hidden;
isolation: isolate;
}
.global-nav-tabs::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--ae-paint-noise);
background-size: 200px 200px;
opacity: 0.075;
mix-blend-mode: multiply;
pointer-events: none;
z-index: 1;
}
.global-nav-tabs::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--ae-paint-noise-strong);
background-size: 150px 150px;
opacity: 0.03;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 1;
}
.global-nav-tabs > * {
position: relative;
z-index: 2;
}
a.global-nav-tab {
flex: 1 1 0;
min-width: 0;
min-inline-size: 128px;
max-width: none;
width: auto;
box-sizing: border-box;
text-decoration: none;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
gap: 8px;
padding: 12px 16px;
border-radius: 999px;
border-top-left-radius: calc(999px + 3px);
border-top-right-radius: calc(999px - 1px);
border-bottom-left-radius: calc(999px - 1px);
border-bottom-right-radius: calc(999px + 3px);
border: 1.7px solid rgba(15,23,42,0.10);
background:
radial-gradient(circle at 10% 15%, rgba(255,255,255,0.9) 0%, transparent 40%),
#ffffff;
cursor: pointer;
font-weight: 800;
color: var(--ae-text-soft);
transition: all 0.18s ease;
font-size: 0.96rem;
letter-spacing: 0.015em;
box-shadow:
0 7px 18px rgba(15,23,42,0.10),
0 2px 6px rgba(234,88,12,0.06),
0 1px 3px rgba(67,56,202,0.05),
inset 0 1px 0 rgba(255,255,255,0.92),
inset 0 -1.5px 0 rgba(15,23,42,0.05);
position: relative;
overflow: hidden;
isolation: isolate;
}
a.global-nav-tab::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise-strong);
background-size: 130px 130px;
opacity: 0.028;
mix-blend-mode: overlay;
z-index: 1;
}
a.global-nav-tab::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 140px 140px;
opacity: 0.085;
mix-blend-mode: multiply;
z-index: 1;
}
a.global-nav-tab > * { position: relative; z-index: 2; }
a.global-nav-tab .tab-icon {
font-size: 1.1rem;
line-height: 1;
display: inline-flex;
align-items: center;
filter:
drop-shadow(0 2.5px 2.5px rgba(15,23,42,0.20))
drop-shadow(0 0.5px 0 rgba(234,88,12,0.08));
transform: translate(0.3px, -0.4px) rotate(-0.5deg);
}
a.global-nav-tab .tab-label {
font-size: 0.95rem;
line-height: 1;
display: inline-flex;
align-items: center;
letter-spacing: 0.01em;
}
a.global-nav-tab:hover {
transform: translateY(-1.8px) rotate(-0.15deg);
border-color: rgba(79,70,229,0.50);
color: var(--ae-indigo-2);
box-shadow:
0 14px 30px rgba(79,70,229,0.18),
0 5px 13px rgba(234,88,12,0.10),
0 2px 5px rgba(15,23,42,0.06),
inset 0 1px 0 rgba(255,255,255,0.95),
inset 0 -2px 0 rgba(79,70,229,0.08);
}
a.global-nav-tab:hover .tab-icon {
filter:
drop-shadow(0 3px 3px rgba(67,56,202,0.25))
drop-shadow(0 0.5px 0 rgba(255,255,255,0.6));
}
a.global-nav-tab.is-active {
background:
radial-gradient(circle at 12% 14%, rgba(255,255,255,0.95) 0%, transparent 42%),
radial-gradient(circle at 88% 90%, rgba(79,70,229,0.36) 0%, transparent 56%),
linear-gradient(135deg, #fff1e0 0%, #eef2ff 58%, #fff7ed 100%);
color: var(--ae-text);
border-color: rgba(234,88,12,0.55);
box-shadow:
0 16px 34px rgba(234,88,12,0.22),
0 7px 18px rgba(79,70,229,0.18),
0 2px 6px rgba(15,23,42,0.06),
inset 0 1.5px 0 rgba(255,255,255,0.98),
inset 0 -2.2px 0 rgba(234,88,12,0.12);
}
a.global-nav-tab.is-active::before {
background-image: var(--ae-paint-noise-strong);
background-size: 110px 110px;
opacity: 0.055;
mix-blend-mode: overlay;
}
a.global-nav-tab.is-active::after {
background-image: var(--ae-paint-noise);
background-size: 130px 130px;
opacity: 0.11;
mix-blend-mode: multiply;
}
a.global-nav-tab.is-active .tab-icon {
filter:
drop-shadow(0 3px 3px rgba(234,88,12,0.32))
drop-shadow(0 0.6px 0 rgba(67,56,202,0.20));
}
a.global-nav-tab.is-active:hover {
transform: translateY(-1.8px) rotate(-0.15deg);
border-color: rgba(79,70,229,0.65);
color: var(--ae-indigo-2);
box-shadow:
0 18px 40px rgba(79,70,229,0.24),
0 8px 20px rgba(234,88,12,0.18),
0 2.5px 7px rgba(15,23,42,0.08),
inset 0 1.5px 0 rgba(255,255,255,0.98),
inset 0 -2.5px 0 rgba(79,70,229,0.10);
}
.dash-table {
width: 100%;
border-collapse: collapse;
font-size: .92rem;
}
.dash-table th, .dash-table td {
padding: 12px 14px;
border-bottom: 1px solid #eef2f7;
text-align: left;
}
.dash-table th {
background: linear-gradient(135deg, #fff7ed 0%, #eff6ff 100%);
font-weight: 800;
color: var(--ae-text);
letter-spacing: 0.02em;
}
.dash-table th:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 0;
}
.dash-table th:last-child {
border-top-right-radius: 10px;
}
.dash-table tr:hover td {
background: #fffbeb;
}
.dash-table .amount-bold {
font-weight: 900;
color: var(--ae-text);
font-size: 0.98rem;
}
.badge-status {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
font-size: .76rem;
font-weight: 800;
letter-spacing: 0.02em;
}
.badge-status.paid { background: #dcfce7; color:#166534; }
.badge-status.pending { background: #ffedd5; color:#9a3412; }
.badge-status.failed { background: #fee2e2; color:#991b1b; }
.badge-status.refunded { background: #f1f5f9; color:#475569; }
.mod-tools-btn {
background:
radial-gradient(circle at 20% 15%, rgba(255,255,255,0.32) 0%, transparent 45%),
linear-gradient(135deg,#5865F2,#8b5cf6);
color: #ffffff;
border: 1.5px solid rgba(0,0,0,0.18);
padding: 6px 14px;
border-radius: 9px;
border-top-left-radius: 11px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 11px;
font-size: .85rem;
font-weight: 800;
cursor: pointer;
letter-spacing: 0.02em;
box-shadow:
0 4px 14px rgba(88,101,242,0.28),
inset 0 1px 0 rgba(255,255,255,0.32);
transition: all 0.18s ease;
position: relative;
overflow: hidden;
isolation: isolate;
}
.mod-tools-btn::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--ae-paint-noise);
background-size: 120px 120px;
opacity: 0.06;
mix-blend-mode: overlay;
z-index: 1;
}
.mod-tools-btn > * { position: relative; z-index: 2; }
.mod-tools-btn:hover {
background:
radial-gradient(circle at 20% 15%, rgba(255,255,255,0.45) 0%, transparent 45%),
linear-gradient(135deg,#4f46e5,#7c3aed);
transform: translateY(-1px);
box-shadow:
0 7px 20px rgba(88,101,242,0.38),
inset 0 1px 0 rgba(255,255,255,0.42);
color: #ffffff;
}
.chat-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.mod-panel {
margin: 6px 10px 4px;
border: 1px solid rgba(15, 23, 42, 0.55);
border-radius: 12px;
background: #ffffff;
color: #0f172a;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
overflow: hidden;
max-height: 420px;
overflow-y: auto;
animation: modFade .18s ease-out;
}
@keyframes modFade { from { opacity:0; transform: translateY(-4px);} to { opacity:1; transform:none;} }
.mod-panel-inner { padding: 12px; color: #0f172a; }
.mod-panel-header {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
.mod-panel-header h4 { margin: 0; font-size: 1rem; color: #0f172a; font-weight: 800; }
.mod-close {
border: 1px solid #0f172a; background: #ffffff; color: #0f172a;
width: 28px; height: 28px; border-radius: 8px; cursor: pointer; line-height: 1; font-size: 1.1rem;
font-weight: 700;
}
.mod-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mod-tab {
padding: 6px 11px; border-radius: 8px; background: #f1f5f9;
border: 1px solid #cbd5e1; color: #0f172a; font-size: .82rem; cursor: pointer; font-weight: 600;
}
.mod-tab.active { background: linear-gradient(135deg,#5865F2,#8b5cf6); color: #ffffff; border-color: transparent; font-weight: 700; }
.mod-tab-panel { display: flex; flex-direction: column; gap: 6px; color: #0f172a; }
.mod-empty { color: #475569; font-size: .88rem; padding: 10px; text-align: center; margin: 0; font-weight: 500; }
.mod-row {
display: flex; justify-content: space-between; align-items: center; gap: 8px;
background: #f8fafc; border: 1px solid #e2e8f0;
border-radius: 10px; padding: 8px 10px; color: #0f172a;
}
.mod-row-main { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.mod-badge {
font-size: .7rem; padding: 2px 7px; border-radius: 999px; font-weight: 700;
background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe;
}
.mod-badge.simple { background: #dcfce7; color: #166534; border-color: #86efac; }
.mod-badge.regex { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.mod-badge.ban { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.mod-badge.mod { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }
.mod-note { color: #475569; font-size: .78rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; color: #0f172a; }
.mod-small {
padding: 4px 9px; border-radius: 8px; font-size: .78rem; cursor: pointer; border: 1px solid transparent;
flex-shrink: 0; font-weight: 600;
}
.mod-small.danger { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.mod-small.success { background: #dcfce7; color: #166534; border-color: #86efac; }
.mod-small:hover { filter: brightness(0.97); transform: translateY(-0.5px); }
.mod-form {
display: flex; flex-direction: column; gap: 6px;
padding: 10px; background: #eef2ff; border: 1px dashed #818cf8;
border-radius: 10px; margin-top: 4px; color: #0f172a;
}
.mod-form h5 { margin: 0; font-size: .95rem; color: #0f172a; font-weight: 800; }
.mod-form input[type=text], .mod-form input[type=number] {
background: #ffffff; color: #0f172a; border: 1px solid #cbd5e1;
border-radius: 8px; padding: 6px 8px; font-size: .88rem;
}
.mod-form label { font-size: .82rem; color: #334155; display: flex; align-items: center; gap: 6px; font-weight: 500; }
.mod-form .btn { padding: 6px 12px; font-size: .86rem; margin-top: 2px; }
/* Chat message badges */
.msg-badge {
display: inline-block; font-size: .66rem; font-weight: 800; padding: 1px 6px; border-radius: 6px; margin-right: 4px;
vertical-align: middle;
}
.msg-badge.streamer { background: linear-gradient(135deg,#ef4444,#f59e0b); color: white; }
.msg-badge.mod { background: linear-gradient(135deg,#5865F2,#8b5cf6); color: white; }
/* Chat Context Menu */
.chat-ctx-menu {
position: absolute; z-index: 9999; min-width: 240px;
background: rgba(15,23,42,.98); border: 1px solid rgba(142,156,172,.28);
border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
padding: 4px; backdrop-filter: blur(10px);
}
/* 📹 カメラ背景 選択 カスタム pulldown
- 配信画面 の