/* ============================================================ Viziona — shared dark cinematic theme Extracted from index.html. Linked by every page for a consistent look. Load the Sen font from Google Fonts in . ============================================================ */ :root{ --bg:#08080c; --bg2:#0e0e15; --surface:#15151f; --card:#1a1a26; --text:#ffffff; --text2:#b6b4c2; --muted:#74727f; --red:#ff3b30; --orange:#ff8a00; --grad:linear-gradient(95deg,#ff3b30 0%,#ff6b1a 55%,#ff9a00 100%); --border:rgba(255,255,255,.08); --border2:rgba(255,255,255,.14); --r:16px; --rl:22px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--text);font-family:'Sen',sans-serif;overflow-x:hidden;line-height:1.5} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} .wrap{max-width:1240px;margin:0 auto;padding:0 28px} /* ===== HEADER ===== */ header{position:sticky;top:0;z-index:50;backdrop-filter:blur(18px);background:rgba(8,8,12,.6);border-bottom:1px solid var(--border)} .nav{display:flex;align-items:center;justify-content:space-between;height:74px} .nav .logo{height:30px;width:auto} .nav nav{display:flex;gap:34px;font-size:15px;color:var(--text2);font-weight:500} .nav nav a:hover{color:#fff} .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-weight:700;font-size:15px;border:none;cursor:pointer;border-radius:999px;padding:13px 26px;transition:.22s} .btn-grad{background:var(--grad);color:#fff;box-shadow:0 8px 28px rgba(255,75,40,.32)} .btn-grad:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(255,75,40,.45)} .btn-out{background:transparent;color:#fff;border:1.5px solid var(--border2)} .btn-out:hover{border-color:#fff;background:rgba(255,255,255,.06)} @media(max-width:780px){.nav nav{display:none}} /* ===== HERO ===== */ .hero{position:relative;padding:120px 0 110px;text-align:center;overflow:hidden} .hero::before{content:"";position:absolute;inset:0;background: radial-gradient(900px 540px at 50% -8%,rgba(255,75,40,.30),transparent 60%), radial-gradient(700px 480px at 88% 12%,rgba(255,138,0,.18),transparent 60%), radial-gradient(680px 520px at 8% 22%,rgba(120,40,255,.10),transparent 60%); z-index:0} .hero::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");z-index:0;pointer-events:none} .hero>*{position:relative;z-index:1} .tag{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#ffcab0;background:rgba(255,75,40,.12);border:1px solid rgba(255,75,40,.30);padding:8px 16px;border-radius:999px;margin-bottom:30px;animation:rise .7s .05s both} .hero-logo{height:74px;width:auto;margin:0 auto 30px;animation:rise .7s .12s both} .hero h1{font-size:clamp(38px,6.2vw,76px);font-weight:800;line-height:1.04;letter-spacing:-.02em;max-width:14ch;margin:0 auto 22px;animation:rise .7s .2s both} .hero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .hero p.sub{font-size:clamp(16px,2vw,20px);color:var(--text2);max-width:62ch;margin:0 auto 38px;animation:rise .7s .3s both} .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;animation:rise .7s .4s both} .hero .note{margin-top:22px;font-size:13.5px;color:var(--muted);animation:rise .7s .5s both} @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} /* ===== CATEGORY RAIL ===== */ section{padding:74px 0} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:30px} .sec-head h2{font-size:clamp(24px,3.4vw,36px);font-weight:800;letter-spacing:-.01em} .sec-head .accent{width:46px;height:4px;background:var(--grad);border-radius:4px;margin-bottom:14px} .rail{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:820px){.rail{grid-template-columns:1fr}} .ccard{position:relative;border-radius:var(--rl);padding:30px;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border:1px solid var(--border);transition:.28s} .ccard:hover{transform:translateY(-6px);border-color:var(--border2)} .ccard .glow{position:absolute;inset:0;z-index:0;opacity:.92} .ccard.live .glow{background:linear-gradient(150deg,#e0221b,#7d1410)} .ccard.movies .glow{background:linear-gradient(150deg,#d97a13,#7a3a05)} .ccard.series .glow{background:linear-gradient(150deg,#5a3bd6,#241a6e)} .ccard .ic{position:absolute;top:24px;left:26px;font-size:30px;z-index:1;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))} .ccard .badge{position:absolute;top:28px;right:26px;z-index:1;font-size:11px;font-weight:800;letter-spacing:.1em;background:rgba(0,0,0,.4);padding:6px 12px;border-radius:999px;backdrop-filter:blur(4px)} .ccard .count{position:relative;z-index:1;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:6px} .ccard h3{position:relative;z-index:1;font-size:34px;font-weight:800;letter-spacing:-.01em;line-height:1} .ccard .desc{position:relative;z-index:1;font-size:14px;color:rgba(255,255,255,.74);margin-top:8px} /* ===== FEATURES ===== */ .features{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px} @media(max-width:980px){.fgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:540px){.fgrid{grid-template-columns:1fr}} .fcard{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:26px 24px;transition:.24s} .fcard:hover{border-color:rgba(255,75,40,.4);transform:translateY(-4px)} .fcard .fic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:22px;background:rgba(255,75,40,.12);border:1px solid rgba(255,75,40,.26);margin-bottom:16px} .fcard h4{font-size:17px;font-weight:700;margin-bottom:7px} .fcard p{font-size:14px;color:var(--text2);line-height:1.55} /* ===== CTA STRIP ===== */ .ctastrip{text-align:center;position:relative;overflow:hidden} .ctastrip::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 360px at 50% 120%,rgba(255,75,40,.26),transparent 60%);z-index:0} .ctastrip>*{position:relative;z-index:1} .ctastrip h2{font-size:clamp(28px,4.4vw,46px);font-weight:800;letter-spacing:-.02em;margin-bottom:16px} .ctastrip p{color:var(--text2);font-size:18px;max-width:54ch;margin:0 auto 32px} /* ===== FOOTER (home) ===== */ footer{background:#050507;border-top:1px solid var(--border);padding:54px 0 40px} .fwrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start} footer .logo{height:26px;margin-bottom:14px} footer .tagf{color:var(--muted);font-size:14px;max-width:36ch} .fcols{display:flex;gap:64px;flex-wrap:wrap} .fcol h5{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-weight:700} .fcol a{display:block;color:var(--text2);font-size:14.5px;margin-bottom:10px} .fcol a:hover{color:#fff} .fbottom{margin-top:42px;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:13px} /* ============================================================ SUB-PAGE COMPONENTS (auth / manage / add-playlist / legal) ============================================================ */ /* Page shells */ .page{max-width:460px;margin:0 auto;padding:56px 24px 80px} .page.wide{max-width:760px} .page-title{font-size:28px;font-weight:800;text-align:center;letter-spacing:-.01em;margin-bottom:8px} .page-sub{font-size:15px;color:var(--text2);text-align:center;margin-bottom:30px} .page-head h1{font-size:26px;font-weight:800;letter-spacing:-.01em} .page-head p{font-size:14px;color:var(--text2);margin-top:4px} /* Card */ .card{background:var(--card);border:1px solid var(--border);border-radius:var(--rl);padding:30px;box-shadow:0 18px 50px rgba(0,0,0,.45)} /* Buttons used in forms (gradient + ghost), full-width via .btn-block */ .btn-red{background:var(--grad);color:#fff;box-shadow:0 8px 28px rgba(255,75,40,.32)} .btn-red:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(255,75,40,.45)} .btn-ghost{background:rgba(255,255,255,.04);color:#fff;border:1.5px solid var(--border2)} .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none} .btn-block{display:flex;width:100%} /* Tabs (pill switcher) */ .tabs{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:5px;gap:5px;margin-bottom:24px} .tab{flex:1;text-align:center;padding:11px 0;font-size:14px;font-weight:700;color:var(--text2);cursor:pointer;border-radius:999px;transition:.2s} .tab.active{background:var(--grad);color:#fff} .tab:hover:not(.active){color:#fff} .tab-content{display:none} .tab-content.active{display:block} /* Form fields */ .form-group{margin-bottom:16px} .form-group label,.field label{display:block;font-size:13px;font-weight:600;color:var(--text2);margin-bottom:7px} .form-group input,.form-group select,.input{ width:100%;padding:13px 16px;font-size:15px;font-family:inherit; border:1px solid var(--border2);border-radius:13px;background:var(--surface); color:#fff;outline:none;transition:.2s} .form-group input::placeholder,.input::placeholder{color:var(--muted)} .form-group input:focus,.form-group select:focus,.input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,59,48,.25)} .form-group input[type="file"]{padding:11px 13px;color:var(--text2)} select.input,.form-group select{appearance:none;-webkit-appearance:none} .form-actions{display:flex;gap:12px;margin-top:8px} /* Divider */ .divider{display:flex;align-items:center;text-align:center;color:var(--muted);font-size:13px;margin:22px 0} .divider::before,.divider::after{content:"";flex:1;border-bottom:1px solid var(--border)} .divider span{padding:0 12px} /* OAuth buttons */ .btn-oauth{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px;border:1px solid var(--border2);border-radius:14px;background:var(--surface);color:#fff;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;margin-bottom:12px;transition:.2s} .btn-oauth:hover{background:#1d1d2a;border-color:rgba(255,255,255,.28)} .btn-oauth svg{width:20px;height:20px} /* Status messages */ .status{padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:14px;display:none;border:1px solid transparent} .status.show{display:block} .status.info{background:rgba(56,132,255,.12);color:#bcd4ff;border-color:rgba(56,132,255,.3)} .status.error{background:rgba(255,59,48,.12);color:#ffb3ad;border-color:rgba(255,59,48,.3)} .status.success{background:rgba(52,199,89,.12);color:#a6e9bd;border-color:rgba(52,199,89,.3)} .fine-print{text-align:center;margin-top:20px;color:var(--muted);font-size:13px} .fine-print a{color:var(--text2)} .fine-print a:hover{color:#fff} /* Header user area (manage) */ .nav-user{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--text2)} .nav-user .email{font-weight:600;color:#fff;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .link-btn{color:var(--red);font-weight:700;font-size:14px;cursor:pointer;background:none;border:none;font-family:inherit} .link-btn:hover{opacity:.8} /* Toolbar + pair hint (manage) */ .toolbar{display:flex;gap:12px;margin:22px 0 24px;flex-wrap:wrap;align-items:center} .pair-wrap{display:flex;flex-direction:column;gap:4px} .pair-hint-inline{font-size:12px;color:var(--muted);display:none} .pair-hint-inline.show{display:block} /* Playlist list (manage) */ .pl-list{display:flex;flex-direction:column;gap:12px} .pl-item{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:.2s} .pl-item:hover{border-color:var(--border2)} .pl-info{min-width:0} .pl-name{font-size:16px;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pl-meta{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pl-badge{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:3px 9px;border-radius:999px;background:rgba(255,75,40,.14);color:#ffb09e;border:1px solid rgba(255,75,40,.3)} .pl-actions{display:flex;gap:8px;flex-shrink:0} .icon-btn{width:38px;height:38px;border-radius:11px;border:1px solid var(--border2);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;font-size:15px} .icon-btn:hover{background:#1d1d2a} .icon-btn.danger:hover{border-color:rgba(255,59,48,.5);background:rgba(255,59,48,.12)} .empty{text-align:center;background:var(--card);border:1px solid var(--border);border-radius:var(--rl);padding:48px 24px;color:var(--text2)} .empty h3{color:#fff;font-size:18px;margin-bottom:6px} .loading{text-align:center;color:var(--muted);padding:48px 0} /* QR section (add-playlist) */ .qr-section{text-align:center;margin-top:36px;padding:32px;background:var(--card);border:1px solid var(--border);border-radius:var(--rl)} .qr-section h3{font-size:18px;font-weight:700;margin-bottom:16px} #qrcode{display:inline-block;padding:16px;background:#fff;border-radius:14px} #qrcode img{display:block} .footer-note{text-align:center;margin-top:24px;color:var(--muted);font-size:13px;line-height:1.8} /* Modal (pairing) */ .modal-overlay{position:fixed;inset:0;background:rgba(4,4,8,.78);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px;z-index:200} .modal-overlay.show{display:flex} .modal{background:var(--card);border:1px solid var(--border2);border-radius:var(--rl);padding:32px;width:100%;max-width:420px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6)} .modal h2{font-size:20px;font-weight:800;margin-bottom:6px} .modal p.sub{font-size:14px;color:var(--text2);margin-bottom:22px} #pair-qr{display:inline-block;padding:16px;background:#fff;border-radius:14px} #pair-qr img{display:block} .pair-code{font-family:'SF Mono',ui-monospace,Menlo,monospace;font-size:30px;font-weight:800;letter-spacing:6px;margin:20px 0 6px;color:#fff} .pair-hint{font-size:13px;color:var(--muted);margin-bottom:18px} .countdown{font-size:14px;font-weight:700;color:var(--orange);margin-bottom:22px} .countdown.expired{color:#ffb3ad} .modal-close{margin-top:4px} /* ===== LEGAL PAGES (terms / privacy) ===== */ .legal-hero{text-align:center;padding:64px 0 30px} .badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#ffcab0;background:rgba(255,75,40,.12);border:1px solid rgba(255,75,40,.30);padding:8px 16px;border-radius:999px;margin-bottom:18px} .legal-hero h1{font-size:clamp(30px,5vw,44px);font-weight:800;letter-spacing:-.02em;margin-bottom:10px} .legal-hero p{color:var(--text2);font-size:15px} .legal{padding:0 0 80px} .legal .card{padding:42px;max-width:880px;margin:0 auto} .legal-hero .wrap{max-width:880px} .legal h2{font-size:21px;font-weight:800;margin:30px 0 12px;color:#fff} .legal h2:first-child{margin-top:0} .legal h2 .accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .legal h3{font-size:16px;font-weight:700;margin:18px 0 8px;color:#fff} .legal p{color:var(--text2);margin-bottom:14px;font-size:15.5px} .legal ul{padding-left:20px;margin-bottom:14px} .legal li{color:var(--text2);margin-bottom:8px;font-size:15.5px} .legal strong{color:#fff} .legal a{color:var(--orange)} .highlight{background:rgba(255,75,40,.08);border-left:3px solid var(--red);padding:16px 20px;border-radius:10px;margin:20px 0} .highlight strong{color:var(--orange)} /* ===== AUTH-AWARE HEADER (viziona-auth.js) ===== */ .viz-auth{display:flex;align-items:center;gap:14px;position:relative;min-height:44px} .nav-signin{color:var(--text2);font-weight:600;font-size:15px} .nav-signin:hover{color:#fff} .chip{display:flex;align-items:center;gap:10px;cursor:pointer;padding:5px 14px 5px 5px;border:1px solid var(--border2);border-radius:999px;background:var(--surface);transition:.2s} .chip:hover{border-color:rgba(255,255,255,.28)} .chip-name{font-size:14px;font-weight:700;color:#fff;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chip svg{width:15px;height:15px;color:var(--text2);transition:.2s} .chip.open svg{transform:rotate(180deg)} .avatar-circle{border-radius:50%;overflow:hidden;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--grad);flex-shrink:0;text-transform:uppercase} .avatar-circle img{width:100%;height:100%;object-fit:cover} .chip .avatar-circle{width:32px;height:32px;font-size:13px} .chip-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--card);border:1px solid var(--border2);border-radius:14px;padding:8px;min-width:216px;box-shadow:0 20px 50px rgba(0,0,0,.5);z-index:60} .chip-menu[hidden]{display:none} .chip-menu .who{padding:8px 12px 10px;border-bottom:1px solid var(--border);margin-bottom:6px} .chip-menu .who b{display:block;color:#fff;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chip-menu .who span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} .chip-menu a,.chip-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 12px;border-radius:10px;font-size:14px;font-weight:600;color:var(--text2);background:none;border:none;cursor:pointer;font-family:inherit} .chip-menu a:hover,.chip-menu button:hover{background:rgba(255,255,255,.06);color:#fff} .chip-menu .signout{color:#ff6b60} .chip-menu .signout:hover{color:#ff8178;background:rgba(255,59,48,.1)} /* ===== ACCOUNT PAGE ===== */ .profile-head{display:flex;align-items:center;gap:20px} .avatar-lg{width:88px;height:88px;font-size:32px} .avatar-lg.avatar-circle{position:relative} .profile-id{min-width:0} .profile-id .pname{font-size:22px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .profile-id .pmail{font-size:14px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .photo-row{display:flex;align-items:center;gap:12px;margin-top:14px} .photo-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:10px 16px;border-radius:999px;border:1.5px solid var(--border2);background:rgba(255,255,255,.04);color:#fff;font-size:14px;font-weight:700;transition:.2s} .photo-btn:hover{border-color:#fff;background:rgba(255,255,255,.08)} .acct-section{margin-bottom:18px} .acct-section h2{font-size:16px;font-weight:800;margin-bottom:4px} .acct-section .hint{font-size:13px;color:var(--muted);margin-bottom:16px} .acct-section.danger{border-color:rgba(255,59,48,.32)} .acct-section.danger h2{color:#ffb3ad} .btn-danger{background:rgba(255,59,48,.12);color:#ff6b60;border:1.5px solid rgba(255,59,48,.4)} .btn-danger:hover{background:rgba(255,59,48,.2);transform:translateY(-1px)} .row-2{display:flex;gap:12px;flex-wrap:wrap} .row-2 .form-group{flex:1;min-width:200px} /* Simple footer for sub-pages */ .minifoot{background:#050507;border-top:1px solid var(--border);padding:30px 0;text-align:center;color:var(--muted);font-size:13px} .minifoot a{color:var(--text2)} .minifoot a:hover{color:#fff} @media(max-width:640px){ .legal-hero h1{font-size:30px} .legal .card{padding:26px 20px} .pl-item{flex-direction:column;align-items:stretch} .pl-actions{justify-content:flex-end} }