:root { --bg:#080808; --paper:#f4e7be; --ink:#15120d; --green:#3bd56b; --gold:#f4cc50; --danger:#ff4a4a; --muted:#d8ccb0; --radius:24px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; background:radial-gradient(circle at top,#16371f 0,#080808 42%,#030303 100%); color:#fff; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.copa-noise { position:fixed; inset:0; pointer-events:none; opacity:.13; mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); z-index:0; }
.site-header { position:sticky; top:0; z-index:30; backdrop-filter:blur(18px); background:rgba(5,5,5,.72); border-bottom:1px solid rgba(255,255,255,.1); }
.nav { width:min(1240px,94vw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0; }
.nav-logo { display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.02em; }
.nav-logo img { width:82px; height:auto; filter:drop-shadow(0 8px 14px rgba(0,0,0,.55)); }
.nav-links { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.nav-links a { border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); padding:10px 13px; border-radius:999px; font-size:13px; font-weight:800; color:#f8f3df; transition:.2s; }
.nav-links a:hover { transform:translateY(-2px); border-color:rgba(59,213,107,.8); background:rgba(59,213,107,.13); }
.team-jump { position:relative; flex:0 0 auto; }
.team-jump summary { list-style:none; cursor:pointer; width:46px; height:46px; border:1px solid rgba(255,255,255,.18); border-radius:14px; background:rgba(255,255,255,.08); color:#f8f3df; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 28px rgba(0,0,0,.25); transition:.18s; }
.team-jump summary::-webkit-details-marker { display:none; }
.team-jump summary span { font-size:27px; line-height:1; font-weight:950; transform:translateY(-1px); }
.team-jump[open] summary, .team-jump summary:hover { border-color:rgba(59,213,107,.85); background:rgba(59,213,107,.14); transform:translateY(-1px); }
.team-jump-panel { position:absolute; top:calc(100% + 10px); right:0; z-index:50; width:min(290px,86vw); display:grid; gap:8px; padding:12px; border:1px solid rgba(255,255,255,.16); border-radius:18px; background:rgba(9,9,9,.96); box-shadow:0 22px 60px rgba(0,0,0,.55); backdrop-filter:blur(16px); }
.team-jump-panel a { padding:11px 12px; border-radius:12px; background:rgba(255,255,255,.07); color:#f8f3df; font-size:13px; font-weight:900; line-height:1.15; }
.team-jump-panel a:hover { background:rgba(59,213,107,.16); color:#fff; }
.hero { position:relative; z-index:1; width:min(1300px,94vw); margin:0 auto; min-height:86vh; display:grid; grid-template-columns:1.02fr .98fr; gap:34px; align-items:center; padding:46px 0 60px; }
.hero-copy { position:relative; }
.kicker { display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(244,204,80,.45); background:rgba(244,204,80,.13); color:#ffe79c; padding:9px 13px; border-radius:999px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; font-size:12px; }
h1 { margin:22px 0 14px; font-size:clamp(44px,6vw,92px); line-height:.92; letter-spacing:-.065em; text-transform:uppercase; }
.hero-copy p { color:#efe2bd; font-size:clamp(17px,2vw,22px); line-height:1.55; max-width:720px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.btn { border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 20px; border-radius:16px; font-weight:950; letter-spacing:-.02em; transition:.18s; box-shadow:0 16px 32px rgba(0,0,0,.35); }
.btn-primary { background:linear-gradient(135deg,var(--green),#d7ff6a); color:#061007; }
.btn-secondary { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.17); }
.btn-danger { background:linear-gradient(135deg,#ff3e3e,#ff9d2e); color:#130400; }
.btn:hover { transform:translateY(-2px) scale(1.01); }
.cover-card { position:relative; perspective:1400px; }
.cover-card img { width:100%; border-radius:34px; border:8px solid rgba(59,213,107,.95); box-shadow:0 44px 110px rgba(0,0,0,.65), inset 0 0 0 2px rgba(255,255,255,.1); transform:rotate(-2deg); animation:floatAlbum 5s ease-in-out infinite; }
.cover-card:after { content:""; position:absolute; inset:20px -20px -25px 30px; background:rgba(0,0,0,.5); filter:blur(28px); z-index:-1; border-radius:34px; }
@keyframes floatAlbum { 0%,100%{ transform:rotate(-2deg) translateY(0); } 50%{ transform:rotate(1deg) translateY(-14px); } }
.section { position:relative; z-index:1; width:min(1320px,94vw); margin:0 auto; padding:76px 0; }
.section-title { display:flex; align-items:flex-end; justify-content:space-between; gap:22px; margin-bottom:26px; }
.section-title h2 { margin:0; font-size:clamp(34px,4.2vw,64px); line-height:.95; letter-spacing:-.055em; text-transform:uppercase; }
.section-title p { max-width:560px; color:#ded1ae; line-height:1.5; margin:0; }
.album-team { --team:#3bd56b; margin:52px 0 80px; }
.team-top { display:grid; grid-template-columns:1fr auto; gap:18px; align-items:end; margin-bottom:18px; }
.team-identity { display:flex; align-items:center; gap:18px; min-width:0; }
.team-crest { flex:0 0 126px; width:126px; aspect-ratio:6/7; display:flex; align-items:center; justify-content:center; }
.team-crest img { width:100%; height:100%; object-fit:contain; }
.team-badge { display:inline-flex; width:max-content; align-items:center; gap:8px; background:color-mix(in srgb,var(--team) 24%,#000); border:1px solid color-mix(in srgb,var(--team) 80%,#fff); color:#fff; border-radius:999px; padding:8px 12px; font-weight:950; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.team-top h3 { margin:12px 0 8px; font-size:clamp(30px,4vw,56px); line-height:.96; letter-spacing:-.05em; }
.team-meta { color:#f7e9bd; display:grid; gap:5px; font-weight:700; line-height:1.25; }
.team-meta strong { color:#fff; font-weight:950; }
.progress-pill { min-width:170px; text-align:center; border-radius:20px; padding:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }
.progress-pill strong { display:block; font-size:30px; line-height:1; color:var(--team); }
.album-spread { display:grid; grid-template-columns:1fr 1fr; gap:0; perspective:1800px; filter:drop-shadow(0 40px 55px rgba(0,0,0,.52)); }
.album-page { min-height:720px; background:linear-gradient(135deg,#f8ecc7,#dfc991); color:var(--ink); border:1px solid rgba(0,0,0,.2); padding:24px; position:relative; overflow:hidden; }
.album-page:first-child { border-radius:32px 6px 6px 32px; transform-origin:right center; animation:pageLeft 1.1s both; }
.album-page:last-child { border-radius:6px 32px 32px 6px; transform-origin:left center; animation:pageRight 1.1s both; }
.album-page:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.13),transparent 12%,transparent 88%,rgba(0,0,0,.18)); pointer-events:none; }
.album-page:after { content:""; position:absolute; inset:16px; border:2px dashed rgba(0,0,0,.14); border-radius:22px; pointer-events:none; }
@keyframes pageLeft { from{ transform:rotateY(9deg); opacity:.75; } to{ transform:rotateY(0); opacity:1; } }
@keyframes pageRight { from{ transform:rotateY(-9deg); opacity:.75; } to{ transform:rotateY(0); opacity:1; } }
.page-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; position:relative; z-index:2; }
.page-title h4 { margin:0; font-size:23px; text-transform:uppercase; letter-spacing:-.03em; }
.page-title span { font-weight:950; color:var(--team); }
.sticker-grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.sticker { min-height:292px; border-radius:20px; background:#fff4cf; border:3px solid rgba(0,0,0,.82); box-shadow:0 12px 0 rgba(0,0,0,.09); padding:10px; display:flex; flex-direction:column; justify-content:space-between; transform:rotate(var(--r,-1deg)); transition:.18s; }
.sticker:hover { transform:rotate(0) translateY(-5px); }
.sticker-photo { width:100%; aspect-ratio:3/4; background:#181818; border:0; padding:0; border-radius:13px; overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; }
.sticker-photo img { width:100%; height:100%; object-fit:cover; }
.sticker-empty .sticker-photo img { object-fit:cover; opacity:.7; }
.sticker-pending .sticker-photo { background:repeating-linear-gradient(-35deg,#171717 0 12px,#242015 12px 24px); border:2px dashed rgba(0,0,0,.72); }
.sticker-pending .sticker-photo img { opacity:.22; filter:grayscale(1); }
.sticker-pending .sticker-name { color:#17110a; font-size:16px; }
.sticker-pending .sticker-caption { color:#7a5b18; }
[data-obs-reveal] { cursor:pointer; outline:2px dashed rgba(244,204,80,.55); outline-offset:4px; }
[data-obs-reveal]:hover { box-shadow:0 16px 0 rgba(0,0,0,.09), 0 0 0 5px rgba(244,204,80,.18); }
.sticker-number { position:absolute; top:8px; left:8px; background:var(--team); color:#000; width:40px; height:40px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-weight:1000; border:2px solid #000; }
.sticker-name { margin-top:9px; color:#14100b; font-weight:1000; text-transform:uppercase; line-height:1.05; font-size:18px; min-height:38px; }
.sticker-caption { color:#5c4c30; font-size:12px; font-weight:800; margin-top:5px; }
.sticker-actions { display:flex; gap:8px; margin-top:10px; }
.mini-link { flex:1; text-align:center; padding:8px 10px; border-radius:10px; background:#151515; color:#fff; font-weight:900; font-size:12px; }
.team-art { margin-top:18px; border-radius:26px; overflow:hidden; border:1px solid rgba(255,255,255,.14); box-shadow:0 24px 50px rgba(0,0,0,.35); }
.team-art img { width:100%; }
.dream-grid { display:grid; grid-template-columns:repeat(11,1fr); gap:10px; margin-top:18px; }
.dream-card { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:10px; min-height:165px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.dream-card img { width:76px; height:96px; object-fit:cover; border-radius:12px; border:2px solid var(--gold); margin-bottom:8px; }
.dream-card strong { font-size:12px; text-transform:uppercase; }
.modal { position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.78); backdrop-filter:blur(10px); }
.modal.is-open { display:flex; }
.modal-box { width:min(620px,96vw); max-height:92vh; overflow:auto; border-radius:28px; background:linear-gradient(145deg,#121212,#070707); border:1px solid rgba(255,255,255,.18); box-shadow:0 30px 90px rgba(0,0,0,.72); padding:24px; }
.modal-box h3 { margin:0 0 8px; font-size:30px; letter-spacing:-.04em; }
.modal-box p { color:#d8ccb0; line-height:1.5; }
.obs-reveal-modal { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.78); backdrop-filter:blur(12px); }
.obs-reveal-modal.is-open { display:flex; }
.obs-reveal-box { width:min(520px,94vw); border-radius:26px; padding:26px; background:linear-gradient(145deg,#121212,#050505); border:1px solid rgba(244,204,80,.42); box-shadow:0 32px 100px rgba(0,0,0,.72), 0 0 0 1px rgba(59,213,107,.16) inset; }
.obs-reveal-box h3 { margin:18px 0 8px; font-size:clamp(34px,5vw,56px); line-height:.92; letter-spacing:-.05em; text-transform:uppercase; }
.obs-reveal-box p { margin:0; color:#efe2bd; line-height:1.5; font-weight:700; }
.form-grid { display:grid; gap:12px; }
.input, .textarea, .select { width:100%; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08); color:#fff; border-radius:15px; padding:14px 15px; font:inherit; outline:none; }
.select option { color:#111; }
.textarea { min-height:110px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.toast { position:fixed; right:18px; bottom:18px; z-index:90; display:none; background:#101010; color:#fff; border:1px solid rgba(59,213,107,.5); border-radius:18px; padding:16px 18px; box-shadow:0 18px 40px rgba(0,0,0,.45); }
.toast.show { display:block; }
.footer { position:relative; z-index:1; text-align:center; padding:46px 18px; color:#afa486; border-top:1px solid rgba(255,255,255,.08); }
.admin-body { background:radial-gradient(circle at top left,#1b4324 0,#080808 38%,#050505 100%); min-height:100vh; }
.admin-wrap { width:min(1240px,94vw); margin:0 auto; padding:34px 0 80px; }
.admin-card { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:26px; padding:22px; box-shadow:0 24px 70px rgba(0,0,0,.34); backdrop-filter:blur(16px); margin-bottom:20px; }
.admin-head { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:20px; }
.admin-head h1 { font-size:clamp(34px,5vw,70px); margin:0; }
.admin-table { width:100%; border-collapse:separate; border-spacing:0 9px; }
.admin-table th { text-align:left; font-size:12px; color:#d8ccb0; text-transform:uppercase; letter-spacing:.08em; padding:0 10px; }
.admin-table td { background:rgba(255,255,255,.07); border-top:1px solid rgba(255,255,255,.09); border-bottom:1px solid rgba(255,255,255,.09); padding:12px 10px; vertical-align:middle; }
.admin-table td:first-child { border-left:1px solid rgba(255,255,255,.09); border-radius:14px 0 0 14px; }
.admin-table td:last-child { border-right:1px solid rgba(255,255,255,.09); border-radius:0 14px 14px 0; }
.admin-thumb { width:54px; height:70px; object-fit:cover; border-radius:10px; border:2px solid rgba(255,255,255,.22); }
.admin-tabs { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.admin-tabs a { padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); font-weight:900; }
.admin-tabs a.active { background:linear-gradient(135deg,var(--green),#d7ff6a); color:#061007; }
.alert { border-radius:16px; padding:14px 16px; margin:12px 0; font-weight:850; }
.alert-ok { background:rgba(59,213,107,.14); border:1px solid rgba(59,213,107,.45); color:#d9ffe3; }
.alert-error { background:rgba(255,74,74,.14); border:1px solid rgba(255,74,74,.45); color:#ffd9d9; }
.crop-area { display:none; margin-top:12px; }
.crop-area img { max-height:360px; border-radius:16px; }
@media (max-width:980px) { .hero { grid-template-columns:1fr; min-height:auto; } .album-spread { grid-template-columns:1fr; gap:18px; } .album-page, .album-page:first-child, .album-page:last-child { border-radius:28px; min-height:auto; transform:none; } .sticker-grid { grid-template-columns:repeat(2,1fr); } .dream-grid { grid-template-columns:repeat(3,1fr); } .team-top { grid-template-columns:1fr; } .nav { align-items:center; } .nav-links { display:none; } }
@media (max-width:560px) { .section { padding:50px 0; } .hero { padding-top:26px; } .nav-logo { min-width:0; gap:8px; } .nav-logo img { width:64px; } .nav-logo span { font-size:14px; line-height:1.05; } .team-identity { align-items:flex-start; gap:12px; } .team-crest { flex-basis:82px; width:82px; } .team-badge { font-size:10px; } .sticker-grid { grid-template-columns:1fr; } .sticker { min-height:0; } .form-row { grid-template-columns:1fr; } .dream-grid { grid-template-columns:repeat(2,1fr); } .admin-table { display:block; overflow-x:auto; } .btn { width:100%; } }