/* ══════════════════════════════════════════════
DESIGN TOKENS — UC ORIGINAL SYSTEM
══════════════════════════════════════════════ */
:root{
--blue:#003399;--light:#f7f7f7;--grey:#cccccc;--dark:#333333;
--black:#000000;--white:#ffffff;--gold:#c9a84c;--gold-light:#fdf8ee;
--x:46px;--pad:92px;
--base:https://unitedcultures.org;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Open Sans',sans-serif;font-size:18px;line-height:1.5;color:var(--dark);background:var(--white)}
h1,h2,h3,h4,h5,h6{font-family:'Open Sans',sans-serif;font-weight:700;color:var(--black)}
p{color:var(--dark);max-width:72ch}
/* ══════════════════════════════════════════════
LANGUAGE BAR
══════════════════════════════════════════════ */
#lang-bar{
height:var(--x);background:#111;
border-top:1px solid #1e1e1e;border-bottom:none;
display:flex;align-items:center;justify-content:space-between;
padding:0 var(--pad);
}
.langs{display:flex;gap:16px;list-style:none}
.langs a{
color:var(--dark);text-decoration:none;
font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:10px;
transition:color .2s
}
.langs a:hover{color:var(--blue)}
.lang-bar-right{display:flex;align-items:center;gap:0}
.donate-pill a{
background:var(--gold);color:var(--black);
padding:6px 20px;font-size:11px;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
transition:background .15s,color .15s
}
.donate-pill a:hover{background:var(--white);color:var(--black)}
.donate-pill{display:flex}
/* ══════════════════════════════════════════════
MASTHEAD
══════════════════════════════════════════════ */
#masthead{
position:fixed;top:0;left:0;right:0;z-index:999;
height:calc(var(--x)*2);background:var(--white);
border-bottom:1px solid var(--grey);
display:flex;align-items:center;justify-content:space-between;
padding:0 var(--pad);
}
.logolink{display:flex;align-items:center;text-decoration:none}
.logo-img{height:calc(var(--x)*1.8);width:auto;display:block}
.logo-fallback{display:flex;align-items:center;gap:14px}
.logo-mark{
width:52px;height:52px;background:var(--blue);
display:flex;flex-direction:column;align-items:flex-start;
justify-content:center;padding:8px;gap:4px;flex-shrink:0
}
.logo-mark span{display:block;background:var(--white)}
.lm1{width:36px;height:10px}.lm2{width:24px;height:4px}.lm3{width:30px;height:4px}
.logo-txt .ln{font-size:21px;font-weight:700;color:var(--black);letter-spacing:.12em;text-transform:uppercase;line-height:1}
.logo-txt .ln span{color:var(--blue)}
.logo-txt .ls{font-size:9px;font-weight:400;color:var(--dark);letter-spacing:.22em;text-transform:uppercase;margin-top:3px}
.mast-right{display:flex;align-items:center;gap:20px}
.mast-search{display:flex}
.si{height:44px;border:2px solid var(--grey);border-right:none;padding:0 12px;font-family:'Open Sans',sans-serif;font-size:13px;background:var(--light);outline:none;width:160px}
.sb{height:44px;padding:0 16px;background:var(--white);border:2px solid var(--grey);font-family:'Open Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s}
.sb:hover{background:var(--black);color:var(--white);border-color:var(--black)}
.mast-login{display:flex;align-items:center;gap:8px}
.mast-login a{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--dark);padding:8px 14px;border:2px solid var(--grey);transition:all .15s}
.mast-login a:hover,.mast-login a.login-act{background:var(--black);color:var(--white);border-color:var(--black)}
.mast-login a.join{background:var(--blue);color:var(--white);border-color:var(--blue)}
.mast-login a.join:hover{background:var(--black);border-color:var(--black)}
/* ══════════════════════════════════════════════
PRIMARY NAVIGATION
══════════════════════════════════════════════ */
#navbar{
position:fixed;top:calc(var(--x)*2);left:0;right:0;z-index:998;
height:var(--x);background:var(--white);
border-bottom:2px solid var(--black);
display:flex;align-items:center;
padding:0 var(--pad) 0 calc(var(--pad) - 12px);
overflow-x:auto;
}
#navbar>a,.drop>a,.nl{
display:inline-flex;align-items:center;justify-content:center;
height:var(--x);padding:0 15px;
font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
text-decoration:none;color:var(--black);
transition:background .15s,color .15s;white-space:nowrap;
cursor:pointer;background:none;border:none;font-family:'Open Sans',sans-serif
}
#navbar>a:hover,#navbar>a.act,.drop>a:hover,.drop>a.act,.nl:hover,.nl.act{
background:var(--black);color:var(--white)
}
.nl-blue{background:var(--blue)!important;color:var(--white)!important}
.nl-blue:hover{background:var(--black)!important}
.nl-gold{background:var(--gold)!important;color:var(--black)!important}
.nl-gold:hover{background:var(--black)!important;color:var(--white)!important}
/* DROPDOWN MENUS */
.drop{position:relative}
.drop>a::after,.drop>button::after{content:" ▾";font-size:8px}
.dm{
display:none;position:absolute;top:100%;left:0;min-width:200px;
background:var(--black);border:2px solid var(--black);z-index:2000
}
.drop:hover .dm{display:block}
.dm a,.dm button{
display:block;width:100%;height:44px;line-height:44px;padding:0 16px;
font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--white);text-decoration:none;border:none;background:transparent;
border-bottom:1px solid rgba(255,255,255,.1);font-family:'Open Sans',sans-serif;
text-align:left;cursor:pointer;transition:background .15s
}
.dm a:hover,.dm button:hover{background:var(--blue);color:var(--white)}
.dm-portal{border-left:3px solid var(--blue)}
.dm-portal:hover{border-left-color:var(--gold)}
.dm-wide{min-width:220px}
.nav-sep{width:1px;height:28px;background:var(--grey);margin:0 4px;flex-shrink:0}
/* SECONDARY SUB-NAV (per portal) */
#sub-nav{
position:fixed;top:calc(var(--x)*3);left:0;right:0;z-index:997;
height:0;overflow:hidden;background:var(--blue);
transition:height .25s ease;
display:flex;align-items:center;
padding:0 var(--pad);
border-bottom:2px solid var(--black);
}
#sub-nav.visible{height:var(--x)}
#sub-nav a,#sub-nav button{
display:inline-flex;align-items:center;justify-content:center;
height:var(--x);padding:0 14px;
font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
text-decoration:none;color:rgba(255,255,255,.8);
cursor:pointer;background:none;border:none;font-family:'Open Sans',sans-serif;
transition:all .15s;white-space:nowrap
}
#sub-nav a:hover,#sub-nav button:hover,#sub-nav a.on,#sub-nav button.on{
background:rgba(255,255,255,.15);color:var(--white)
}
#sub-nav .sn-gold{color:var(--gold)}
#sub-nav .sn-gold:hover{background:var(--gold);color:var(--black)}
.sub-sep{width:1px;height:20px;background:rgba(255,255,255,.2);margin:0 2px}
/* ══════════════════════════════════════════════
LAYOUT OFFSET (accounts for all three bars)
══════════════════════════════════════════════ */
#wrap{padding-top:calc(var(--x)*3)}
#wrap.subnav-open{padding-top:calc(var(--x)*4)}
/* ══════════════════════════════════════════════
PORTAL VIEWS — each portal gets its own wrapper
.portal — hidden by default, .portal.on — visible
══════════════════════════════════════════════ */
.portal{display:none}
.portal.on{display:block}
/* ══════════════════════════════════════════════
SHARED: BUTTONS, SECTIONS, TYPOGRAPHY
══════════════════════════════════════════════ */
.btn{
display:inline-flex;align-items:center;justify-content:center;
width:160px;height:60px;font-family:'Open Sans',sans-serif;
font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
text-decoration:none;cursor:pointer;border:2px solid;transition:all .15s
}
.bw{background:transparent;color:var(--white);border-color:var(--white)}.bw:hover{background:var(--black);border-color:var(--black);color:var(--white)}
.bd{background:var(--black);color:var(--white);border-color:var(--black)}.bd:hover{background:var(--white);color:var(--black)}
.bo{background:transparent;color:var(--black);border-color:var(--black)}.bo:hover{background:var(--black);color:var(--white)}
.bb{background:var(--blue);color:var(--white);border-color:var(--blue)}.bb:hover{background:var(--black);border-color:var(--black)}
.bg{background:var(--gold);color:var(--black);border-color:var(--gold)}.bg:hover{background:var(--black);border-color:var(--black);color:var(--white)}
.sec{padding:calc(var(--x)*2) var(--pad)}
.sg{padding:calc(var(--x)*2) var(--pad);background:var(--light)}
.sb2{padding:calc(var(--x)*2) var(--pad);background:var(--blue)}
.st{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--black);display:inline-block;margin-bottom:var(--x)}
.st::after{content:'';display:block;margin-top:6px;width:40px;height:3px;background:var(--blue)}
.stw{color:var(--white)}.stw::after{background:var(--white)}
h2.ph{font-size:clamp(22px,2.8vw,40px);font-weight:700;color:var(--black);letter-spacing:.03em;text-transform:uppercase;line-height:1.1}
h2.ph::after{content:'';display:block;margin-top:10px;width:40px;height:3px;background:var(--blue)}
h2.pw{color:var(--white)}
h2.pw::after{background:var(--white)}
.bt{color:var(--dark);line-height:1.5;max-width:64ch;font-size:17px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--grey)}
.stat{background:var(--white);padding:calc(var(--x)*1.5) var(--x);text-align:center}
.sn{font-size:46px;font-weight:700;color:var(--blue);line-height:1;display:block}
.sl2{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--dark);margin-top:8px;display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--x)*2);align-items:center;margin-top:var(--x)}
.two.rev{direction:rtl}.two.rev>*{direction:ltr}
.col-img{width:100%;height:340px;object-fit:cover;display:block}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--x);margin-top:var(--x)}
.card{background:var(--white);border:1px solid var(--grey);overflow:hidden;transition:transform .2s,box-shadow .2s}
.card:hover{box-shadow:0 8px 24px rgba(0,0,0,.12)}
.ci{width:100%;height:220px;object-fit:cover;display:block;background:var(--grey)}
.cb{padding:16px}
.ctag{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.ct{font-size:15px;font-weight:700;color:var(--black);line-height:1.3;margin-bottom:8px}
.cm{font-size:13px;color:var(--dark);line-height:1.5}
.clabel{padding:12px 16px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dark);border-top:1px solid var(--grey);display:flex;justify-content:space-between;align-items:center}
.ecards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--x);margin-top:var(--x)}
.ecard{background:var(--white);border:1px solid var(--grey);overflow:hidden;transition:transform .2s,box-shadow .2s}
.ecard:hover{box-shadow:0 6px 20px rgba(0,0,0,.1)}
.ei{width:100%;height:180px;object-fit:cover;display:block;background:var(--grey)}
.edb{background:var(--blue);color:var(--white);padding:10px 14px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.ebody{padding:14px}
.et{font-size:14px;font-weight:700;color:var(--black);margin-bottom:4px}
.eloc{font-size:12px;color:var(--dark)}
.ul{margin-top:var(--x);border-top:2px solid var(--black)}
.ui{display:grid;grid-template-columns:80px 1fr auto;gap:var(--x);align-items:center;padding:var(--x) 0;border-bottom:1px solid var(--grey)}
.uy{font-size:10px;font-weight:700;letter-spacing:.15em;color:var(--blue);text-transform:uppercase}
.um{font-size:22px;font-weight:700;color:var(--black);text-transform:uppercase}
.util{font-size:15px;font-weight:700;color:var(--black);margin-bottom:4px}
.uloc{font-size:13px;color:var(--dark)}
.utime{font-size:12px;color:var(--dark);margin-bottom:8px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--x);margin-top:var(--x)}
.pillar{padding:var(--x);border:1px solid var(--grey);transition:border-color .2s,background .2s}
.pillar:hover{border-color:var(--blue);background:var(--light)}
.pnum{font-size:34px;font-weight:700;color:var(--blue);line-height:1;margin-bottom:10px}
.pcode{font-size:10px;font-weight:700;color:var(--blue);letter-spacing:.1em;margin-bottom:6px}
.pname{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--black);margin-bottom:8px}
.pillar p{font-size:14px;color:var(--dark);line-height:1.5}
.ptabs{display:flex;gap:0;margin-top:var(--x);flex-wrap:wrap}
.ptab{height:44px;padding:0 18px;background:var(--white);border:2px solid var(--grey);font-family:'Open Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .15s;margin-right:-2px;margin-bottom:-2px}
.ptab:hover,.ptab.on{background:var(--black);color:var(--white);border-color:var(--black)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--x);margin-top:var(--x)}
.pitem{border:1px solid var(--grey);overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s}
.pitem:hover{box-shadow:0 6px 20px rgba(0,0,0,.1)}
.pimg{width:100%;height:160px;object-fit:cover;display:block;background:var(--grey)}
.ngrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--x);margin-top:var(--x)}
.ncard{border:1px solid var(--grey);overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s}
.ncard:hover{box-shadow:0 6px 20px rgba(0,0,0,.1)}
.nimg{width:100%;height:160px;object-fit:cover;display:block;background:var(--grey)}
.nbody{padding:14px}
.ncat{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--blue);margin-bottom:4px}
.ntit{font-size:14px;font-weight:700;color:var(--black);margin-bottom:6px;line-height:1.3}
.ndate{font-size:12px;color:var(--dark)}
.phero{height:300px;background:var(--blue);display:flex;align-items:center;padding:0 var(--pad);position:relative;overflow:hidden}
.phero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2}
.phero h1{font-size:clamp(26px,3.8vw,50px);font-weight:700;color:var(--white);letter-spacing:.08em;text-transform:uppercase;position:relative;z-index:1}
.about-img{width:100%;height:320px;object-fit:cover;display:block}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--x);margin-top:var(--x)}
.sitem{padding:var(--x);background:var(--white);border-left:4px solid var(--blue)}
.sitem h3{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--black);margin-bottom:8px}
.sitem p{font-size:14px;color:var(--dark);line-height:1.5}
.lm{display:flex;justify-content:center;gap:var(--x);margin-top:calc(var(--x)*1.5)}
.page{display:none}.page.on{display:block}
.fu{opacity:0;transform:translateY(26px);transition:opacity .6s,transform .6s}
.fu.vis{opacity:1;transform:none}
/* HERO SLIDER */
#hero{position:relative;height:520px;overflow:hidden;background:var(--blue)}
.sl{position:absolute;inset:0;display:flex;align-items:center;padding:0 var(--pad);opacity:0;transition:opacity .9s}
.sl.on{opacity:1}
.sl-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22}
.slc{position:relative;z-index:1;max-width:680px}
.slc h1{font-size:clamp(30px,4.2vw,56px);font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:.05em;line-height:1.05;margin-bottom:var(--x)}
.slc p{font-size:17px;color:rgba(255,255,255,.88);line-height:1.6;max-width:56ch;margin-bottom:var(--x)}
.hc{position:absolute;bottom:var(--x);right:var(--pad);display:flex;align-items:center;gap:10px}
.hb{width:40px;height:40px;background:transparent;border:2px solid rgba(255,255,255,.65);color:var(--white);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.hb:hover{background:var(--black);border-color:var(--black)}
.hd{width:10px;height:10px;border:2px solid rgba(255,255,255,.6);background:transparent;cursor:pointer;transition:background .2s}
.hd.on{background:var(--white);border-color:var(--white)}
/* ══════════════════════════════════════════════
PORTAL: DONATE
══════════════════════════════════════════════ */
/* Donate styles injected from donate file */
.d-hero{min-height:400px;background:linear-gradient(135deg,var(--black) 0%,#1a1a1a 50%,#0a0a0a 100%);display:flex;align-items:center;padding:0 var(--pad);position:relative;overflow:hidden}
.d-hero::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,transparent,transparent 60px,rgba(0,51,153,.06) 60px,rgba(0,51,153,.06) 61px)}
.d-hero-content{position:relative;z-index:1;max-width:640px}
.d-eyebrow{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.d-eyebrow::before{content:'';width:24px;height:2px;background:var(--gold);display:inline-block}
.d-hero h1{font-size:clamp(32px,4vw,58px);font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:.04em;line-height:1.05;margin-bottom:20px}
.d-hero h1 em{color:var(--gold);font-style:normal}
.d-hero p{font-size:16px;color:rgba(255,255,255,.8);line-height:1.7;margin-bottom:32px}
.d-strip{display:grid;grid-template-columns:repeat(5,1fr);background:var(--black);border-bottom:2px solid #1a1a1a}
.d-box{padding:calc(var(--x)*1.2) var(--x);text-align:center;border-right:1px solid #1a1a1a}
.d-box:last-child{border-right:none}
.d-num{display:block;font-size:32px;font-weight:700;line-height:1;margin-bottom:8px}
.d-lab{display:block;font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.donate-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;background:var(--grey);margin-top:var(--x)}
.donate-type{background:var(--white);padding:calc(var(--x)*1.5) var(--x);cursor:pointer;transition:all .2s;position:relative}
.donate-type:hover,.donate-type.selected{background:var(--blue);color:var(--white)}
.donate-type h3{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;color:var(--black);transition:color .2s}
.donate-type:hover h3,.donate-type.selected h3{color:var(--white)}
.donate-type p{font-size:13px;color:var(--dark);line-height:1.5;transition:color .2s}
.donate-type:hover p,.donate-type.selected p{color:rgba(255,255,255,.85)}
.donate-type .check{position:absolute;top:16px;right:16px;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--black);display:none;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.donate-type.selected .check{display:flex}
.donate-amounts{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--x)}
.da{height:52px;min-width:90px;padding:0 16px;border:2px solid var(--grey);background:var(--white);font-family:'Open Sans',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:all .15s}
.da:hover,.da.on{background:var(--black);color:var(--white);border-color:var(--black)}
.da.custom{border-color:var(--blue)}
.pay-tabs{display:flex;gap:0;margin-top:var(--x)}
.pay-tab{height:52px;padding:0 24px;border:2px solid var(--grey);border-right:none;background:var(--white);font-family:'Open Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:8px}
.pay-tab:last-child{border-right:2px solid var(--grey)}
.pay-tab:hover,.pay-tab.on{background:var(--black);color:var(--white);border-color:var(--black)}
.pay-content{display:none;margin-top:24px;padding:24px;border:2px solid var(--grey);background:var(--light)}
.pay-content.on{display:block}
/* ══════════════════════════════════════════════
PORTAL: MEMBERSHIP
══════════════════════════════════════════════ */
.mem-hero{min-height:480px;position:relative;display:flex;align-items:center;overflow:hidden}
.mh-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mh-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.85) 40%,rgba(0,0,0,.4) 100%)}
.mh-c{position:relative;z-index:1;padding:0 var(--pad);max-width:700px}
.mh-eyebrow{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.mh-c h1{font-size:clamp(32px,4vw,62px);font-weight:700;color:var(--white);letter-spacing:.04em;text-transform:uppercase;line-height:1.05;margin-bottom:16px}
.mh-c h1 em{color:var(--gold);font-style:italic}
.mh-c p{font-size:16px;color:rgba(255,255,255,.85);max-width:56ch;line-height:1.7;margin-bottom:28px}
.mh-btns{display:flex;gap:12px;flex-wrap:wrap}
.plan-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--grey)}
.plan-box{background:var(--white);padding:calc(var(--x)*1.5) var(--x);text-align:center;transition:all .2s;cursor:pointer}
.plan-box:hover,.plan-box.featured{background:var(--blue);color:var(--white)}
.plan-box.featured{position:relative}
.plan-box-badge{position:absolute;top:0;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--black);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 16px}
.plan-type-label{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dark);margin-bottom:8px;transition:color .2s}
.plan-box:hover .plan-type-label,.plan-box.featured .plan-type-label{color:rgba(255,255,255,.65)}
.plan-price-big{font-size:52px;font-weight:700;color:var(--blue);line-height:1;transition:color .2s}
.plan-box:hover .plan-price-big,.plan-box.featured .plan-price-big{color:var(--white)}
.plan-price-per{font-size:12px;color:var(--dark);margin-bottom:8px;transition:color .2s}
.plan-box:hover .plan-price-per,.plan-box.featured .plan-price-per{color:rgba(255,255,255,.7)}
.plan-box h3{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--black);margin-bottom:12px;transition:color .2s}
.plan-box:hover h3,.plan-box.featured h3{color:var(--white)}
.plan-box ul{list-style:none;text-align:left;margin-bottom:20px}
.plan-box ul li{font-size:13px;padding:5px 0;border-bottom:1px solid rgba(0,0,0,.06);color:var(--dark);transition:color .2s;padding-left:14px;position:relative}
.plan-box ul li::before{content:'→';position:absolute;left:0;color:var(--blue);font-weight:700;transition:color .2s}
.plan-box:hover ul li,.plan-box.featured ul li{color:rgba(255,255,255,.85)}
.plan-box:hover ul li::before,.plan-box.featured ul li::before{color:var(--gold)}
.contrib-table{width:100%;border-collapse:collapse;margin-top:var(--x)}
.contrib-table th{background:var(--black);color:var(--white);padding:14px 16px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:left}
.contrib-table td{padding:14px 16px;border-bottom:1px solid var(--grey);font-size:14px;color:var(--dark)}
.contrib-table tr:nth-child(even) td{background:var(--light)}
.contrib-table tr:hover td{background:var(--blue);color:var(--white)}
.contrib-table tr:hover .contrib-apply{background:var(--gold);color:var(--black);border-color:var(--gold)}
.contrib-apply{height:36px;padding:0 16px;background:var(--white);border:2px solid var(--black);font-family:'Open Sans',sans-serif;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .15s}
.contrib-apply:hover{background:var(--black);color:var(--white)}
/* ══════════════════════════════════════════════
PORTAL: EVENTS
══════════════════════════════════════════════ */
.ev-hero{height:480px;position:relative;overflow:hidden;background:var(--black);display:flex;align-items:flex-end;padding:0 var(--pad) calc(var(--x)*1.5)}
.ev-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.ev-hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.3) 60%,transparent 100%)}
.ev-hero-c{position:relative;z-index:1;max-width:800px}
.ev-eyebrow{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.ev-hero-c h1{font-size:clamp(28px,3.5vw,54px);font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:.05em;line-height:1.05;margin-bottom:14px}
.ev-hero-c p{font-size:15px;color:rgba(255,255,255,.8);max-width:56ch;line-height:1.65;margin-bottom:24px}
.ev-hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.events-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--x);margin-top:var(--x)}
.event-card{border:1px solid var(--grey);overflow:hidden;cursor:pointer;transition:all .2s}
.event-card:hover{box-shadow:0 10px 32px rgba(0,0,0,.12)}
.ec-img-wrap{position:relative;height:220px;overflow:hidden;background:var(--blue)}
.ec-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.event-card:hover .ec-img{transform:scale(1.04)}
.ec-date-badge{position:absolute;top:12px;left:12px;background:var(--black);color:var(--white);padding:8px 12px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.ec-status{position:absolute;top:12px;right:12px;padding:5px 12px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ec-status.open{background:var(--gold);color:var(--black)}
.ec-status.upcoming{background:var(--blue);color:var(--white)}
.ec-body{padding:20px}
.ec-city{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.ec-title{font-size:17px;font-weight:700;color:var(--black);margin-bottom:6px;line-height:1.3}
.ec-desc{font-size:13px;color:var(--dark);line-height:1.5;margin-bottom:14px}
.ec-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--light);padding-top:12px}
/* ══════════════════════════════════════════════
PORTAL: INVEST
══════════════════════════════════════════════ */
.inv-hero{min-height:440px;position:relative;display:flex;align-items:center;overflow:hidden}
.inv-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.inv-hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.88) 40%,rgba(0,51,153,.5) 100%)}
.inv-hero-c{position:relative;z-index:1;padding:calc(var(--x)*3) var(--pad)}
.inv-hero-c h1{font-size:clamp(30px,4vw,58px);font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:.04em;line-height:1.05;margin-bottom:16px}
.inv-hero-c h1 em{color:var(--gold);font-style:normal}
.inv-hero-c p{font-size:16px;color:rgba(255,255,255,.85);max-width:58ch;line-height:1.7;margin-bottom:28px}
.inv-stat-strip{display:grid;grid-template-columns:repeat(5,1fr);background:var(--black);border-bottom:2px solid #1a1a1a}
.isbox{padding:calc(var(--x)*1.2) var(--x);text-align:center;border-right:1px solid #222}
.isbox:last-child{border-right:none}
.isn{display:block;font-size:32px;font-weight:700;line-height:1;margin-bottom:8px}
.isl{display:block;font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--x);margin-top:var(--x)}
.proj-card{border:1px solid var(--grey);overflow:hidden;cursor:pointer;transition:all .2s}
.proj-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.1)}
.proj-img{width:100%;height:200px;object-fit:cover;display:block;background:var(--light)}
.proj-body{padding:20px}
.proj-cat{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.proj-title{font-size:16px;font-weight:700;color:var(--black);margin-bottom:8px;line-height:1.3}
.proj-desc{font-size:13px;color:var(--dark);line-height:1.5;margin-bottom:14px}
.proj-prog{background:var(--light);height:6px;border-radius:3px;margin-bottom:8px;overflow:hidden}
.proj-prog-bar{height:100%;background:var(--blue);border-radius:3px;transition:width .4s}
.proj-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--dark)}
.shares-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--x);margin-top:var(--x)}
.share-tier{padding:calc(var(--x)*1.5) var(--x);border:2px solid var(--grey);text-align:center;cursor:pointer;transition:all .2s}
.share-tier:hover,.share-tier.featured-tier{border-color:var(--blue);background:var(--blue);color:var(--white)}
.share-tier .s-price{font-size:42px;font-weight:700;color:var(--blue);line-height:1;margin-bottom:4px;transition:color .2s}
.share-tier:hover .s-price,.share-tier.featured-tier .s-price{color:var(--white)}
/* Investment Bank Tabs */
.inv-tab{height:44px;padding:0 20px;border:none;background:transparent;font-family:'Open Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dark);cursor:pointer;transition:all .15s;border-bottom:2px solid transparent;white-space:nowrap}
.inv-tab:hover{color:var(--black);background:var(--light)}
.inv-tab-on{color:var(--black);border-bottom:2px solid var(--black)}
.inv-sec{display:none}
.inv-sec.on{display:block}
/* ══════════════════════════════════════════════
PROJECTS PLATFORM
══════════════════════════════════════════════ */
.pj-filter{padding:6px 14px;border:1px solid #cccccc;background:var(--white);font-family:'Open Sans',sans-serif;font-size:11px;font-weight:600;color:var(--dark);cursor:pointer;transition:all .15s}
.pj-filter:hover{border-color:var(--black);color:var(--black)}
.pj-filter-on{background:var(--black);color:var(--white);border-color:var(--black)}
.pj-badge{padding:2px 8px;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.pj-featured-card{border:1px solid #cccccc;overflow:hidden}
.pj-card{border:1px solid #cccccc;overflow:hidden;cursor:pointer;transition:border-color .15s}
.pj-card:hover{border-color:var(--black)}
.pj-card-img{height:180px;display:flex;align-items:center;justify-content:center}
.pj-card-body{padding:18px}
.pj-card-cat{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.pj-card-title{font-size:16px;font-weight:700;color:var(--black);margin-bottom:6px;line-height:1.3}
.pj-card-desc{font-size:12px;color:var(--dark);line-height:1.5;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pj-card-bar{background:var(--light);height:6px;margin-bottom:6px;overflow:hidden}.pj-card-bar>div{height:100%;background:var(--blue)}
.pj-card-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--dark);margin-bottom:6px}
.pj-card-info{display:flex;gap:12px;font-size:10px;color:var(--dark)}
.pj-label{font-size:11px;font-weight:700;color:var(--dark);display:block;margin-bottom:4px}
.pj-input{width:100%;padding:12px;border:1.5px solid #cccccc;border-radius:0;font-family:'Open Sans',sans-serif;font-size:13px}
/* ══════════════════════════════════════════════
PORTAL: COMMUNITY (embedded)
══════════════════════════════════════════════ */
.comm-hero{min-height:440px;background:linear-gradient(135deg,var(--blue) 0%,#001a66 100%);display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.ch-left{padding:calc(var(--x)*2) var(--pad);display:flex;flex-direction:column;justify-content:center}
.ch-left h1{font-size:clamp(28px,3.5vw,52px);font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:.04em;line-height:1.05;margin-bottom:16px}
.ch-left p{font-size:16px;color:rgba(255,255,255,.8);max-width:50ch;line-height:1.7;margin-bottom:28px}
.ch-right{display:flex;align-items:center;justify-content:center;padding:var(--x);position:relative;overflow:hidden}
.ch-right::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.2);background-image:repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(255,255,255,.02) 40px,rgba(255,255,255,.02) 41px)}
.auth-toggle-bar{display:flex;background:rgba(255,255,255,.1);border-radius:4px;padding:4px;width:100%;max-width:360px;margin-bottom:16px}
.atb{flex:1;height:38px;border:none;border-radius:3px;font-family:'Open Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .2s;color:rgba(255,255,255,.6);background:transparent}
.atb.on{background:var(--white);color:var(--black)}
.auth-box{background:var(--white);padding:28px;max-width:360px;width:100%;position:relative;z-index:1;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.auth-box h3{font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--black);margin-bottom:4px}
.auth-box p{font-size:12px;color:var(--dark);margin-bottom:18px}
.af{display:none}.af.on{display:block}
.plan-pills{display:flex;gap:4px;margin-bottom:16px}
.pp{flex:1;border:2px solid var(--grey);padding:8px 4px;text-align:center;cursor:pointer;transition:all .15s}
.pp.on{border-color:var(--blue);background:rgba(0,51,153,.05)}
.pp-n{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:3px;color:var(--dark)}
.pp.on .pp-n{color:var(--blue)}
.pp-p{font-size:13px;font-weight:700;color:var(--blue);display:block}
.comm-features{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--x);margin-top:var(--x)}
.cf-card{padding:var(--x);border:1px solid var(--grey);transition:all .2s;position:relative}
.cf-card:hover{border-color:var(--blue);background:var(--light)}
.cf-icon{font-size:36px;margin-bottom:14px;display:block}
.cf-card h3{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--black);margin-bottom:8px}
.cf-card p{font-size:14px;color:var(--dark);line-height:1.5}
.cf-locked{position:absolute;top:12px;right:12px;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;background:var(--gold-light);color:#8a6420}
/* ══════════════════════════════════════════════
PORTAL TRANSITION BLOCK
Shows on homepage when user clicks portal links
══════════════════════════════════════════════ */
.portal-banner{
background:var(--black);color:var(--white);
padding:14px var(--pad);
display:none;align-items:center;gap:16px;
border-bottom:2px solid var(--blue);
font-size:13px;font-weight:600;letter-spacing:.04em
}
.portal-banner.show{display:flex}
.pb-back{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;background:var(--white);color:var(--black);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border:none;font-family:'Open Sans',sans-serif;transition:background .15s;flex-shrink:0}
.pb-back:hover{background:var(--grey)}
.pb-breadcrumb{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.pb-breadcrumb span{color:rgba(255,255,255,.5)}
.pb-breadcrumb a{color:var(--gold);cursor:pointer}
/* ══════════════════════════════════════════════
FORMS (shared across portals)
══════════════════════════════════════════════ */
.form-grid{display:grid;grid-template-columns:1fr 280px;gap:calc(var(--x)*2);align-items:start}
.form-section{background:var(--white)}
.fg{margin-bottom:16px}
.fg label{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dark);margin-bottom:6px}
.fg input,.fg select,.fg textarea{width:100%;height:52px;border:2px solid var(--grey);padding:0 14px;font-family:'Open Sans',sans-serif;font-size:14px;background:var(--white);outline:none;transition:border-color .2s;color:var(--black)}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--blue)}
.fg textarea{height:auto;padding:14px;resize:vertical;min-height:80px}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--x)}
.form-submit{height:60px;padding:0 32px;background:var(--blue);color:var(--white);border:none;font-family:'Open Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;transition:background .15s;width:100%}
.form-submit:hover{background:var(--black)}
.form-submit-gold{background:var(--gold);color:var(--black)}.form-submit-gold:hover{background:var(--black);color:var(--white)}
.sidebar-card{background:var(--white);border:2px solid var(--grey);padding:var(--x)}
.sidebar-card h3{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--black);margin-bottom:var(--x);padding-bottom:8px;border-bottom:2px solid var(--blue)}
.payment-box{background:var(--blue);color:var(--white);padding:24px;text-align:center;margin-top:20px}
.payment-box .pb-logo{font-size:24px;font-weight:800;color:var(--white);letter-spacing:.02em;margin-bottom:6px}
.payment-box .pb-url{font-size:13px;color:rgba(255,255,255,.75);margin-bottom:16px}
.pay-btn{display:block;width:100%;height:52px;background:var(--white);color:var(--blue);border:none;font-family:'Open Sans',sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .15s}
.pay-btn:hover{background:var(--gold);color:var(--black)}
.bunq-cause{font-size:10px;color:rgba(255,255,255,.5);margin-top:10px;line-height:1.5;text-align:center;font-style:italic}
.bunq-cause-dark{font-size:10px;color:#333333;margin-top:10px;line-height:1.5;text-align:center;font-style:italic}
/* ══════════════════════════════════════════════
HOMEPAGE QUICK-ACCESS PORTALS GRID
(shown on home page as a navigation module)
══════════════════════════════════════════════ */
.portal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--grey);margin-top:calc(var(--x)*1)}
.pg-item{background:var(--white);padding:calc(var(--x)*1.5) var(--x);cursor:pointer;transition:all .2s;position:relative;overflow:hidden;display:flex;flex-direction:column}
.pg-item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.pg-item:hover::after{transform:scaleX(1)}
.pg-item:hover{background:var(--light)}
.pg-icon{font-size:36px;margin-bottom:14px;display:block}
.pg-num{font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:4px}
.pg-title{font-size:16px;font-weight:700;color:var(--black);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.pg-desc{font-size:13px;color:var(--dark);line-height:1.55;flex:1;margin-bottom:14px}
.pg-cta{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:6px}
.pg-cta::after{content:'→';transition:transform .2s}
.pg-item:hover .pg-cta::after{transform:translateX(4px)}
/* ══════════════════════════════════════════════
FOOTER — shared, identical across all portals
══════════════════════════════════════════════ */
#footer{background:#0a0a0a;color:var(--white);padding:calc(var(--x)*2) var(--pad) var(--x);border-top:3px solid var(--blue)}
.ftop{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;gap:var(--x);flex-wrap:wrap}
#footer h4{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:var(--x);padding-bottom:8px;border-bottom:2px solid var(--blue);display:inline-block;color:var(--white)}
#footer ul{list-style:none}
#footer ul li{margin-bottom:8px}
#footer ul li a{color:var(--grey);text-decoration:none;font-size:13px;transition:color .2s}
#footer ul li a:hover{color:var(--white)}
#footer p{font-size:13px;color:var(--grey);line-height:1.6}
.fbot{border-top:1px solid #1e1e1e;padding-top:var(--x);display:flex;justify-content:space-between;align-items:center;font-size:11px;color:rgba(255,255,255,.5);flex-wrap:wrap;gap:10px}
.fbot a{color:rgba(255,255,255,.5);text-decoration:none;transition:color .2s}.fbot a:hover{color:var(--white)}
.fcl{font-size:12px;color:var(--grey);margin-bottom:8px}
.footer-logo{height:50px;width:auto;display:block;margin-bottom:var(--x)}
/* ══════════════════════════════════════════════
PORTAL SUCCESS OVERLAYS
══════════════════════════════════════════════ */
.success-overlay{
position:fixed;inset:0;z-index:2000;
background:var(--black);
display:none;flex-direction:column;align-items:center;justify-content:center;
padding:var(--pad);text-align:center
}
.success-overlay.show{display:flex}
.so-amount{font-size:80px;font-weight:700;color:var(--gold);line-height:1;margin-bottom:16px}
.so-title{font-size:clamp(22px,3vw,38px);font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
.so-msg{font-size:16px;color:rgba(255,255,255,.75);max-width:52ch;line-height:1.7;margin-bottom:32px}
/* ══════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════ */
@media(max-width:1100px){
:root{--pad:46px}
.cards{grid-template-columns:1fr 1fr}
.ecards{grid-template-columns:1fr 1fr}
.pgrid{grid-template-columns:1fr 1fr 1fr}
.stats{grid-template-columns:1fr 1fr}
.ftop{grid-template-columns:1fr 1fr}
.portal-grid{grid-template-columns:1fr 1fr}
.plan-strip{grid-template-columns:1fr}
.events-row{grid-template-columns:1fr 1fr}
.projects-grid{grid-template-columns:1fr 1fr}
.shares-grid{grid-template-columns:1fr 1fr}
.comm-hero{grid-template-columns:1fr}
.d-strip{grid-template-columns:repeat(3,1fr)}
.donate-grid{grid-template-columns:1fr 1fr}
.form-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
:root{--pad:20px}
.two,.two.rev{grid-template-columns:1fr;direction:ltr}
.cards,.ngrid{grid-template-columns:1fr}
.ecards{grid-template-columns:1fr}
.pgrid{grid-template-columns:1fr 1fr}
.pillars{grid-template-columns:1fr}
.stats{grid-template-columns:1fr 1fr}
.ftop{grid-template-columns:1fr}
.portal-grid{grid-template-columns:1fr}
.events-row{grid-template-columns:1fr}
.projects-grid{grid-template-columns:1fr}
.shares-grid{grid-template-columns:1fr}
.mast-search{display:none}
.mast-login .join{display:flex}
.d-strip{grid-template-columns:1fr 1fr}
.donate-grid{grid-template-columns:1fr}
.fg-row{grid-template-columns:1fr}
.comm-features{grid-template-columns:1fr}
}
/* Image placeholder fallback */
img { color: transparent; }
.sl-bg, .phero-bg, .ev-hero-bg, .inv-hero-bg, .mh-bg, .col-img, .about-img,
.ec-img, .proj-img, .ci, .ei, .nimg, .pimg {
background: linear-gradient(135deg, #001a66 0%, #003399 100%);
min-height: 180px;
}
.sl-bg { background: linear-gradient(135deg, #001a66, #003399, #0040cc); min-height: 0; }
/* ── Hide Google Translate toolbar ── */
.goog-te-banner-frame, .skiptranslate { display: none !important; }
body { top: 0 !important; }
.goog-te-gadget { display: none !important; }
.lang-btn {
height: 28px; padding: 0 9px;
background: transparent; border: none; border-right: 1px solid rgba(255,255,255,.15);
font-family: 'Open Sans', sans-serif; font-size: 10px; font-weight: 700;
letter-spacing: .06em; cursor: pointer; color: rgba(255,255,255,.6); transition: all .12s; white-space: nowrap;
}
.lang-btn:hover, .lang-btn.lang-active { background: var(--white); color: var(--black); }
.lang-btn:first-child { border-left: 1px solid rgba(255,255,255,.15); }
#lang-menu button {
width: 100%; text-align: left; padding: 7px 10px;
background: none; border: none; font-family: 'Open Sans', sans-serif;
font-size: 11px; cursor: pointer; color: var(--dark); transition: background .1s;
}
#lang-menu button:hover { background: var(--light); color: var(--blue); font-weight: 700; }
/* ══════════════════════════════════════════════
UC ENCYCLOPEDIA STYLES
══════════════════════════════════════════════ */
.enc-section { display:none }
.enc-section.enc-active { display:block }
.enc-pill {
height:30px; padding:0 14px;
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
color:rgba(255,255,255,.75); font-family:'Open Sans',sans-serif;
font-size:11px; font-weight:600; cursor:pointer; transition:all .15s; white-space:nowrap;
}
.enc-pill:hover { background:var(--gold); color:var(--black); border-color:var(--gold); }
.enc-chip {
height:30px; padding:0 14px; background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.7);
font-family:'Open Sans',sans-serif; font-size:10px; font-weight:700;
letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:all .15s;
}
.enc-chip:hover, .enc-chip.enc-chip-active {
background:var(--gold); color:var(--black); border-color:var(--gold);
}
.enc-culture-card {
background:var(--white); cursor:pointer; position:relative; overflow:hidden;
transition:transform .2s, box-shadow .2s;
}
.enc-culture-card:hover { box-shadow:0 12px 40px rgba(0,0,0,.12); }
.enc-culture-card .enc-card-img {
height:180px; background:linear-gradient(135deg,#001a66,#003399);
position:relative; overflow:hidden;
}
.enc-culture-card .enc-card-body { padding:20px; }
.enc-culture-card .enc-card-tag {
font-size:8px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
color:var(--blue); margin-bottom:6px; display:block;
}
.enc-culture-card .enc-card-title {
font-family:'Playfair Display',serif; font-size:18px; font-weight:700;
color:var(--black); margin-bottom:8px; line-height:1.25;
}
.enc-culture-card .enc-card-desc {
font-size:12px; color:var(--dark); line-height:1.65; margin-bottom:14px;
}
.enc-culture-card .enc-card-footer {
display:flex; justify-content:space-between; align-items:center;
border-top:1px solid var(--grey); padding-top:12px;
}
.enc-result-row {
display:flex; gap:16px; padding:18px 20px; background:var(--light);
cursor:pointer; transition:background .15s; border-left:3px solid transparent;
}
.enc-result-row:hover { background:#eef2ff; border-left-color:var(--blue); }
.enc-result-row .enc-rr-icon { font-size:28px; flex-shrink:0; line-height:1.2; }
.enc-result-row .enc-rr-tag { font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); margin-bottom:4px; }
.enc-result-row .enc-rr-title { font-family:'Playfair Display',serif; font-size:17px; font-weight:700; color:var(--black); margin-bottom:4px; }
.enc-result-row .enc-rr-excerpt { font-size:12px; color:var(--dark); line-height:1.6; }
.enc-region-card {
padding:32px 28px; cursor:pointer; position:relative; overflow:hidden;
transition:transform .2s;
}
.enc-region-card:hover { }
.enc-topic-card {
padding:24px 20px; background:var(--black); color:var(--white); cursor:pointer;
transition:background .15s; display:flex; gap:14px; align-items:center;
}
.enc-topic-card:hover { background:var(--blue); }
.enc-uni-card {
padding:22px 20px; background:var(--light);
border-left:3px solid transparent; transition:all .15s;
}
.enc-uni-card:hover { border-left-color:var(--blue); background:#eef2ff; }
/* Profile page styles */
.enc-profile-hero { min-height:320px; position:relative; display:flex; align-items:flex-end; }
.enc-profile-nav { display:flex; gap:0; border-bottom:2px solid var(--black); overflow-x:auto; }
.enc-profile-nav button { height:44px; padding:0 20px; background:none; border:none; font-family:'Open Sans',sans-serif; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; color:var(--dark); border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap; transition:all .15s; }
.enc-profile-nav button:hover, .enc-profile-nav button.ep-active { border-bottom-color:var(--blue); color:var(--black); }
.enc-section-panel { display:none; }
.enc-section-panel.ep-active { display:block; }
/* ══════════════════════════════════════════════
UC TUBE — VIDEO PLATFORM STYLES
══════════════════════════════════════════════ */
.tube-tab {
height: 46px; padding: 0 20px; background: transparent; border: none;
border-bottom: 3px solid transparent; color: rgba(255,255,255,.45);
font-family: 'Open Sans', sans-serif; font-size: 11px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
transition: all .15s; white-space: nowrap; flex-shrink: 0;
}
.tube-tab:hover { color: var(--white); background: rgba(255,255,255,.05); }
.tube-tab-act { color: var(--white) !important; border-bottom-color: var(--gold) !important; }
.tube-tab-gold { color: var(--gold) !important; }
.tube-tab-gold:hover { background: rgba(201,168,76,.1) !important; }
.tube-pill {
height: 34px; padding: 0 16px;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
color: rgba(255,255,255,.55); font-family: 'Open Sans', sans-serif;
font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
cursor: pointer; transition: all .15s; border-radius: 0; white-space: nowrap;
}
.tube-pill:hover { background: rgba(255,255,255,.12); color: var(--white); }
.tube-pill-act { background: var(--white) !important; color: var(--black) !important; border-color: var(--white) !important; }
/* Video card */
.tube-card {
background: #1a1a1a; cursor: pointer;
transition: transform .2s, box-shadow .2s;
overflow: hidden; position: relative;
}
.tube-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.tube-thumb {
position: relative; aspect-ratio: 16/9; overflow: hidden;
background: linear-gradient(135deg, #0d0020 0%, #001a33 100%);
display: flex; align-items: center; justify-content: center;
}
.tube-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tube-thumb-emoji { font-size: 40px; opacity: .4; }
.tube-duration {
position: absolute; bottom: 8px; right: 8px;
background: rgba(0,0,0,.85); color: var(--white);
font-size: 10px; font-weight: 700; padding: 2px 6px;
letter-spacing: .04em;
}
.tube-play-overlay {
position: absolute; inset: 0; display: flex; align-items: center;
justify-content: center; background: rgba(0,0,0,0); transition: background .2s;
}
.tube-card:hover .tube-play-overlay { background: rgba(0,0,0,.35); }
.tube-play-btn {
width: 52px; height: 52px; background: rgba(255,255,255,.9);
border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-size: 18px; opacity: 0; transform: scale(.8); transition: all .2s;
padding-left: 4px;
}
.tube-card:hover .tube-play-btn { opacity: 1; transform: scale(1); }
.tube-card-info { padding: 12px 14px 14px; }
.tube-card-cat {
font-size: 8px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
color: var(--gold); margin-bottom: 5px;
}
.tube-card-title {
font-size: 13px; font-weight: 700; color: var(--white); line-height: 1.35;
margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden;
}
.tube-card-meta {
font-size: 11px; color: rgba(255,255,255,.35);
display: flex; gap: 10px; flex-wrap: wrap;
}
.tube-card-culture { color: rgba(255,255,255,.5); font-weight: 600; font-size: 11px; margin-top: 4px; }
/* Culture browse card */
.tube-culture-card {
background: #1a1a1a; padding: 16px; cursor: pointer;
transition: all .2s; border: 1px solid transparent;
text-align: center;
}
.tube-culture-card:hover { background: #252525; border-color: var(--gold); }
.tube-culture-flag { font-size: 36px; margin-bottom: 8px; display: block; }
.tube-culture-name { font-size: 12px; font-weight: 700; color: var(--white); margin-bottom: 3px; }
.tube-culture-count { font-size: 10px; color: rgba(255,255,255,.35); }
/* Related video small card */
.tube-rel-card {
flex-shrink: 0; width: 180px; cursor: pointer; transition: opacity .15s;
}
.tube-rel-card:hover { opacity: .8; }
.tube-rel-thumb {
width: 100%; aspect-ratio: 16/9;
background: linear-gradient(135deg, #1a1a1a, #252525);
margin-bottom: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.tube-rel-title { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.7); line-height: 1.3; }
.tube-rel-meta { font-size: 10px; color: rgba(255,255,255,.3); margin-top: 3px; }
@keyframes tvpulse{0%,100%{opacity:1}50%{opacity:.3}}
/* ══════════════════════════════════════════════
UC CULTURAL SEARCH ENGINE
══════════════════════════════════════════════ */
#se-hero{
position:relative;min-height:520px;
background:linear-gradient(160deg,#000711 0%,#001233 30%,#003399 60%,#001a4e 100%);
display:flex;align-items:center;justify-content:center;
overflow:hidden;padding:60px var(--pad) 48px;
}
#se-particles{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.5}
#se-hero-inner{position:relative;z-index:1;text-align:center;max-width:800px;width:100%}
#se-globe-anim{margin:0 auto 20px;width:80px;height:80px}
.se-orbit{animation:se-spin 20s linear infinite;transform-origin:60px 60px}
@keyframes se-spin{to{transform:rotate(360deg)}}
#se-title{font-size:42px;font-weight:800;color:var(--white);letter-spacing:.06em;margin-bottom:8px}
#se-title span{color:var(--gold)}
#se-subtitle{font-size:15px;color:rgba(255,255,255,.55);letter-spacing:.04em;margin-bottom:36px;line-height:1.5}
/* Search Bar */
#se-bar{
display:flex;align-items:center;
background:var(--white);border-radius:60px;
box-shadow:0 8px 40px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.05);
padding:6px 6px 6px 22px;max-width:680px;margin:0 auto;
transition:box-shadow .3s,transform .2s;
}
#se-bar:focus-within{box-shadow:0 4px 20px rgba(0,51,153,.2),0 0 0 2px var(--dark)}
#se-bar-icon{color:#333333;flex-shrink:0;display:flex;margin-right:12px}
#se-input{
flex:1;border:none;outline:none;font-size:17px;font-family:'Open Sans',sans-serif;
color:var(--dark);background:transparent;padding:14px 0;min-width:0;
}
#se-input::placeholder{color:#bbb}
#se-btn{
flex-shrink:0;background:var(--blue);color:var(--white);border:none;
font-family:'Open Sans',sans-serif;font-size:14px;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;
padding:14px 32px;border-radius:50px;cursor:pointer;
transition:background .2s,transform .15s;
}
#se-btn:hover{background:#002277;transform:scale(1.02)}
/* Category Chips */
#se-cats{
display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
margin-top:24px;
}
.se-chip{
padding:7px 16px;border-radius:0;border:1.5px solid rgba(255,255,255,.2);
background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);
font-family:'Open Sans',sans-serif;font-size:12px;font-weight:600;
letter-spacing:.04em;cursor:pointer;transition:all .2s;
}
.se-chip:hover{background:rgba(255,255,255,.12);color:var(--white);border-color:rgba(255,255,255,.3)}
.se-chip-on{background:var(--gold)!important;color:var(--black)!important;border-color:var(--gold)!important;font-weight:700}
/* Trending */
#se-trending{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
.se-trend-label{font-size:11px;font-weight:700;color:rgba(255,255,255,.35);letter-spacing:.1em;text-transform:uppercase}
.se-trend{
padding:5px 14px;border-radius:0;border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.04);color:rgba(255,255,255,.5);
font-family:'Open Sans',sans-serif;font-size:11px;cursor:pointer;transition:all .2s;
}
.se-trend:hover{background:rgba(255,255,255,.1);color:var(--white)}
/* ── RESULTS AREA ── */
#se-results{background:var(--white);min-height:60vh}
#se-results-bar{
background:var(--white);border-bottom:1px solid #f7f7f7;
padding:16px var(--pad);position:sticky;top:138px;z-index:50;
}
#se-results-query{display:flex;align-items:center;gap:12px;margin-bottom:10px}
#se-back-btn{
width:36px;height:36px;border-radius:50%;border:1.5px solid #cccccc;
background:var(--white);display:flex;align-items:center;justify-content:center;
cursor:pointer;transition:all .2s;flex-shrink:0;color:var(--dark);
}
#se-back-btn:hover{background:var(--light);border-color:var(--blue);color:var(--blue)}
#se-inline-bar{
flex:1;display:flex;align-items:center;
border:2px solid #cccccc;border-radius:40px;padding:4px 4px 4px 16px;
transition:border-color .2s;max-width:600px;
}
#se-inline-bar:focus-within{border-color:var(--blue)}
#se-inline-input{
flex:1;border:none;outline:none;font-size:15px;font-family:'Open Sans',sans-serif;
color:var(--dark);background:transparent;padding:8px 0;
}
#se-inline-btn{
width:36px;height:36px;border-radius:50%;border:none;
background:var(--blue);color:var(--white);display:flex;align-items:center;justify-content:center;
cursor:pointer;flex-shrink:0;transition:background .2s;
}
#se-inline-btn:hover{background:#002277}
#se-results-meta{font-size:12px;color:#333333;margin-bottom:10px;letter-spacing:.02em}
#se-results-meta span+span::before{content:" · "}
/* Source tabs */
#se-source-tabs{display:flex;gap:4px;flex-wrap:wrap}
.se-src-tab{
padding:6px 16px;border-radius:0;border:1.5px solid #cccccc;
background:var(--white);font-family:'Open Sans',sans-serif;font-size:12px;
font-weight:600;color:#666;cursor:pointer;transition:all .2s;
}
.se-src-tab:hover{border-color:var(--blue);color:var(--blue)}
.se-src-on{background:var(--blue)!important;color:var(--white)!important;border-color:var(--blue)!important}
/* Results body */
#se-results-body{padding:32px var(--pad);max-width:1100px}
/* AI Answer Panel */
#se-ai-panel{
background:linear-gradient(135deg,#fefcf7 0%,#fff9ee 50%,#fef7e0 100%);
border:1.5px solid #e8d9a8;border-radius:0;
padding:28px 32px;margin-bottom:32px;
box-shadow:0 2px 16px rgba(201,168,76,.08);
}
#se-ai-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px}
#se-ai-badge{
display:flex;align-items:center;gap:6px;
font-size:13px;font-weight:700;color:var(--blue);letter-spacing:.04em;
}
#se-ai-model{font-size:10px;color:#333333;letter-spacing:.06em;text-transform:uppercase}
#se-ai-content{font-size:15px;line-height:1.75;color:var(--dark)}
#se-ai-answer h3{font-size:17px;font-weight:700;color:var(--blue);margin:18px 0 8px}
#se-ai-answer h3:first-child{margin-top:0}
#se-ai-answer p{margin-bottom:12px}
#se-ai-answer ul{margin:8px 0 14px 20px;list-style:disc}
#se-ai-answer li{margin-bottom:4px;font-size:14px}
#se-ai-answer strong{color:var(--black);font-weight:700}
#se-ai-answer blockquote{
border-left:3px solid var(--gold);padding:8px 16px;margin:14px 0;
background:rgba(201,168,76,.06);font-style:italic;color:#333333;
}
/* AI Loading animation */
#se-ai-loading{display:flex;align-items:center;gap:14px;padding:20px 0}
.se-ai-dots{display:flex;gap:5px}
.se-ai-dots span{
width:8px;height:8px;border-radius:50%;background:var(--gold);
animation:se-dot-bounce .8s ease-in-out infinite;
}
.se-ai-dots span:nth-child(2){animation-delay:.15s}
.se-ai-dots span:nth-child(3){animation-delay:.3s}
@keyframes se-dot-bounce{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
#se-ai-loading p{font-size:13px;color:#333333;font-style:italic}
/* AI Sources */
#se-ai-sources{margin-top:20px;padding-top:16px;border-top:1px solid #e8d9a8}
.se-ai-src-title{font-size:11px;font-weight:700;color:#333333;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
#se-ai-src-list{display:flex;flex-wrap:wrap;gap:8px}
.se-ai-src{
display:flex;align-items:center;gap:6px;padding:5px 12px;
border-radius:0;background:rgba(255,255,255,.7);border:1px solid #e0d5b0;
font-size:11px;color:var(--blue);text-decoration:none;transition:all .2s;
}
.se-ai-src:hover{background:var(--white);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.se-ai-src-fav{width:14px;height:14px;border-radius:3px;background:#f7f7f7;display:flex;align-items:center;justify-content:center;font-size:9px}
/* AI Actions */
#se-ai-actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.se-ai-act{
padding:8px 18px;border-radius:0;border:1.5px solid #d4c490;
background:transparent;font-family:'Open Sans',sans-serif;font-size:12px;
font-weight:600;color:#8a7530;cursor:pointer;transition:all .2s;
}
.se-ai-act:hover{background:var(--gold);color:var(--black);border-color:var(--gold)}
/* Web Results */
.se-panel-title{font-size:14px;font-weight:700;color:var(--dark);margin-bottom:16px;letter-spacing:.02em}
.se-web-item{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid #f0f0f0}
.se-web-item:last-child{border-bottom:none}
.se-web-url{font-size:12px;color:#2a8529;display:flex;align-items:center;gap:6px;margin-bottom:4px}
.se-web-url-fav{width:16px;height:16px;border-radius:50%;background:#f7f7f7;display:flex;align-items:center;justify-content:center;font-size:9px}
.se-web-title{font-size:18px;font-weight:600;color:var(--blue);text-decoration:none;display:block;margin-bottom:4px;line-height:1.3}
.se-web-title:hover{text-decoration:underline}
.se-web-snippet{font-size:14px;color:#333333;line-height:1.6}
.se-web-snippet em{font-weight:700;font-style:normal;color:var(--dark)}
.se-web-date{font-size:11px;color:#333333;margin-top:4px}
/* Wiki results */
.se-wiki-card{
background:var(--light);border-radius:0;padding:24px;margin-bottom:16px;
border:1px solid var(--light);
}
.se-wiki-card h4{font-size:17px;font-weight:700;color:var(--dark);margin-bottom:8px}
.se-wiki-card h4 a{color:var(--blue);text-decoration:none}
.se-wiki-card h4 a:hover{text-decoration:underline}
.se-wiki-card p{font-size:14px;color:#333333;line-height:1.7}
.se-wiki-card img{float:right;margin:0 0 12px 16px;width:160px;height:120px;object-fit:cover;border-radius:0}
.se-wiki-meta{font-size:11px;color:#333333;margin-top:8px;display:flex;gap:16px}
/* Image results */
#se-img-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.se-img-item{
border-radius:0;overflow:hidden;position:relative;cursor:pointer;
aspect-ratio:4/3;background:#f0f0f0;
}
.se-img-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.se-img-item:hover img{transform:scale(1.05)}
.se-img-cap{
position:absolute;bottom:0;left:0;right:0;padding:8px 12px;
background:linear-gradient(transparent,rgba(0,0,0,.7));
font-size:11px;color:var(--white);font-weight:600;
}
/* Related searches */
#se-related{padding:24px var(--pad);border-top:1px solid #f7f7f7;max-width:1100px}
#se-related h4{font-size:13px;font-weight:700;color:#333333;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
#se-related-list{display:flex;flex-wrap:wrap;gap:8px}
.se-rel-item{
padding:8px 18px;border-radius:0;border:1.5px solid #cccccc;
background:var(--white);font-family:'Open Sans',sans-serif;font-size:13px;
color:var(--blue);cursor:pointer;transition:all .2s;
}
.se-rel-item:hover{background:var(--blue);color:var(--white);border-color:var(--blue)}
/* Domain cards */
.se-domain{cursor:pointer;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden}
.se-domain:hover{box-shadow:0 8px 24px rgba(0,0,0,.08)}
.se-domain-icon{font-size:36px;margin-bottom:12px}
/* Partner logos */
.se-partner{
display:flex;flex-direction:column;align-items:center;gap:4px;
padding:20px 28px;background:var(--white);border-radius:0;
border:1px solid var(--light);min-width:110px;transition:transform .2s;
}
.se-partner:hover{border-color:var(--dark)}
.se-partner-logo{font-size:32px}
.se-partner span{font-size:13px;font-weight:700;color:var(--dark)}
.se-partner small{font-size:10px;color:#333333;letter-spacing:.04em}
/* Streaming text animation */
@keyframes se-cursor-blink{0%,100%{opacity:1}50%{opacity:0}}
.se-cursor{
display:inline-block;width:2px;height:1em;background:var(--gold);
margin-left:2px;vertical-align:text-bottom;
animation:se-cursor-blink .7s ease-in-out infinite;
}
/* Source filter visibility */
#se-web-panel[data-hidden="true"],
#se-wiki-panel[data-hidden="true"],
#se-img-panel[data-hidden="true"],
#se-ai-panel[data-hidden="true"]{display:none}
/* Responsive */
/* ══════════════════════════════════════════════
UC RADIO — Global Cultural Radio Platform
══════════════════════════════════════════════ */
#rd-hero{
position:relative;min-height:420px;
background:linear-gradient(150deg,#0a0a12 0%,#121228 25%,#1a1040 50%,#0d0d2b 75%,#050510 100%);
display:flex;align-items:center;justify-content:center;
overflow:hidden;padding:60px var(--pad) 40px;
}
#rd-viz{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.6}
#rd-hero-inner{position:relative;z-index:1;text-align:center;max-width:700px;width:100%}
/* Radio tower animation */
#rd-logo-anim{position:relative;width:100px;height:100px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center}
.rd-ring{position:absolute;border:2px solid rgba(201,168,76,.25);border-radius:50%;animation:rd-pulse 3s ease-out infinite}
.rd-ring1{width:60px;height:60px;animation-delay:0s}
.rd-ring2{width:80px;height:80px;animation-delay:.6s}
.rd-ring3{width:100px;height:100px;animation-delay:1.2s}
@keyframes rd-pulse{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.4);opacity:0}}
.rd-tower{font-size:36px;position:relative;z-index:2;filter:drop-shadow(0 0 12px rgba(201,168,76,.5))}
#rd-title{font-size:40px;font-weight:800;color:var(--white);letter-spacing:.06em;margin-bottom:6px}
#rd-title span{color:var(--gold)}
#rd-subtitle{font-size:14px;color:rgba(255,255,255,.5);letter-spacing:.03em;margin-bottom:30px;line-height:1.5}
#rd-search-bar{
display:flex;align-items:center;gap:10px;
background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.12);
border-radius:40px;padding:8px 20px;max-width:480px;margin:0 auto;
transition:border-color .2s,background .2s;
}
#rd-search-bar:focus-within{border-color:var(--gold);background:rgba(255,255,255,.12)}
#rd-search{
flex:1;border:none;outline:none;background:transparent;
font-family:'Open Sans',sans-serif;font-size:14px;color:var(--white);padding:6px 0;
}
#rd-search::placeholder{color:rgba(255,255,255,.35)}
/* NOW PLAYING BAR */
#rd-player{
position:fixed;bottom:0;left:0;right:0;z-index:1000;
background:linear-gradient(135deg,#0d0d1a 0%,#1a1035 100%);
border-top:2px solid var(--gold);
box-shadow:0 -4px 30px rgba(0,0,0,.5);
}
#rd-player-inner{
display:flex;align-items:center;justify-content:space-between;
padding:10px var(--pad);max-width:1400px;margin:0 auto;gap:16px;
}
#rd-player-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
#rd-player-art{
width:46px;height:46px;border-radius:0;
background:linear-gradient(135deg,var(--blue),#4a2090);
display:flex;align-items:center;justify-content:center;
font-size:22px;flex-shrink:0;
}
#rd-player-name{font-size:14px;font-weight:700;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rd-player-loc{font-size:11px;color:rgba(255,255,255,.45)}
#rd-player-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}
#rd-player-controls button{
width:40px;height:40px;border-radius:50%;border:none;
background:rgba(255,255,255,.08);color:var(--white);
font-size:14px;cursor:pointer;transition:all .2s;
display:flex;align-items:center;justify-content:center;
}
#rd-player-controls button:hover{background:rgba(255,255,255,.15)}
#rd-play-btn{width:50px!important;height:50px!important;background:var(--gold)!important;color:var(--black)!important;font-size:18px!important}
#rd-play-btn:hover{transform:scale(1.06)}
#rd-player-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
/* Equalizer bars */
#rd-player-eq{display:flex;align-items:flex-end;gap:2px;height:24px}
.rd-eq-bar{
width:3px;background:var(--gold);border-radius:2px;
animation:rd-eq 1s ease-in-out infinite;
}
.rd-eq-bar:nth-child(1){height:8px;animation-delay:0s}
.rd-eq-bar:nth-child(2){height:16px;animation-delay:.15s}
.rd-eq-bar:nth-child(3){height:12px;animation-delay:.3s}
.rd-eq-bar:nth-child(4){height:20px;animation-delay:.1s}
.rd-eq-bar:nth-child(5){height:10px;animation-delay:.25s}
@keyframes rd-eq{0%,100%{height:4px}50%{height:22px}}
.rd-eq-paused .rd-eq-bar{animation:none!important;height:4px!important}
#rd-volume{
-webkit-appearance:none;appearance:none;width:80px;height:4px;
background:rgba(255,255,255,.2);border-radius:4px;outline:none;cursor:pointer;
}
#rd-volume::-webkit-slider-thumb{
-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
background:var(--gold);cursor:pointer;
}
#rd-close-player{
width:30px;height:30px;border-radius:50%;border:none;
background:rgba(255,255,255,.05);color:rgba(255,255,255,.4);
font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
#rd-close-player:hover{background:rgba(255,60,60,.2);color:#ff6666}
/* FILTER TABS */
#rd-filters{
background:var(--white);border-bottom:1px solid #f7f7f7;
padding:16px var(--pad) 12px;
position:sticky;top:138px;z-index:50;
}
#rd-filter-row,#rd-genre-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.rd-tab{
padding:7px 16px;border-radius:0;border:1.5px solid #cccccc;
background:var(--white);font-family:'Open Sans',sans-serif;font-size:12px;
font-weight:600;color:#666;cursor:pointer;transition:all .2s;
}
.rd-tab:hover{border-color:var(--blue);color:var(--blue)}
.rd-tab-on{background:var(--blue)!important;color:var(--white)!important;border-color:var(--blue)!important}
.rd-genre{
padding:5px 12px;border-radius:0;border:1px solid var(--grey);
background:var(--light);font-family:'Open Sans',sans-serif;font-size:11px;
font-weight:600;color:var(--dark);cursor:pointer;transition:all .2s;
}
.rd-genre:hover{color:var(--black);border-color:var(--dark)}
.rd-genre-on{background:var(--black)!important;color:var(--white)!important;border-color:var(--black)!important}
#rd-counter{font-size:12px;color:#333333;margin-top:4px;letter-spacing:.02em}
/* STATIONS GRID */
#rd-stations-wrap{padding:28px var(--pad);background:var(--white)}
#rd-stations{
display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;
}
.rd-card{
border-radius:0;overflow:hidden;border:1.5px solid #f7f7f7;
background:var(--white);cursor:pointer;transition:all .25s;
position:relative;
}
.rd-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.08);border-color:var(--blue)}
.rd-card-top{
height:80px;display:flex;align-items:center;padding:16px;gap:14px;
position:relative;overflow:hidden;
}
.rd-card-bg{position:absolute;inset:0;opacity:.12}
.rd-card-flag{font-size:32px;flex-shrink:0;z-index:1}
.rd-card-meta{flex:1;min-width:0;z-index:1}
.rd-card-name{font-size:14px;font-weight:700;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-card-country{font-size:11px;color:#333333;margin-top:2px}
.rd-card-bottom{
padding:10px 16px;display:flex;align-items:center;justify-content:space-between;
border-top:1px solid #f0f0f0;background:var(--light);
}
.rd-card-genre{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.rd-card-play{
width:32px;height:32px;border-radius:50%;border:none;
background:var(--blue);color:var(--white);font-size:12px;
cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:all .2s;
}
.rd-card-play:hover{background:var(--gold);color:var(--black);transform:scale(1.1)}
.rd-card.rd-playing{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,168,76,.25)}
.rd-card.rd-playing .rd-card-play{background:var(--gold);color:var(--black)}
.rd-card-live{
position:absolute;top:8px;right:8px;
display:flex;align-items:center;gap:4px;
padding:2px 8px;border-radius:0;
background:rgba(229,57,53,.9);font-size:8px;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;color:var(--white);z-index:2;
}
.rd-card-live::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--white);animation:rd-live-blink 1.2s infinite}
@keyframes rd-live-blink{0%,100%{opacity:1}50%{opacity:.3}}
/* Continent color accents */
.rd-c-africa .rd-card-top{background:linear-gradient(135deg,#f0e6d3,#f7f0e0)}
.rd-c-americas .rd-card-top{background:linear-gradient(135deg,#d6eaf8,#e8f4f8)}
.rd-c-asia .rd-card-top{background:linear-gradient(135deg,#fdebd0,#fef5e7)}
.rd-c-europe .rd-card-top{background:linear-gradient(135deg,#d5e8d4,#e8f5e9)}
.rd-c-middle-east .rd-card-top{background:linear-gradient(135deg,#f5e0d0,#fdf2ec)}
.rd-c-oceania .rd-card-top{background:linear-gradient(135deg,#d4e6f1,#eaf2f8)}
@media(max-width:768px){
#rd-hero{padding:40px 16px 28px;min-height:340px}
#rd-title{font-size:28px}
#rd-player-inner{padding:8px 12px}
#rd-player-right{display:none}
#rd-filters{padding:10px 12px 8px;top:108px}
#rd-stations-wrap{padding:16px 12px}
#rd-stations{grid-template-columns:1fr 1fr;gap:10px}
}
@media(max-width:480px){
#rd-stations{grid-template-columns:1fr}
}
/* ══════════════════════════════════════════════
UC LIBRARY — Knowledge & Content Hub
══════════════════════════════════════════════ */
#lib-hero{
position:relative;min-height:440px;
background:linear-gradient(150deg,#1a0f05 0%,#2d1810 30%,#3e2518 50%,#1a1008 100%);
display:flex;align-items:center;justify-content:center;
overflow:hidden;padding:60px var(--pad) 40px;
}
#lib-hero::before{
content:'';position:absolute;inset:0;
background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30h60M30 0v60' stroke='rgba(201,168,76,0.04)' stroke-width='1'/%3E%3C/svg%3E");
z-index:0;
}
#lib-hero-inner{position:relative;z-index:1;text-align:center;max-width:760px;width:100%}
#lib-icon{font-size:52px;margin-bottom:14px;filter:drop-shadow(0 0 20px rgba(201,168,76,.3))}
#lib-title{font-size:40px;font-weight:800;color:var(--white);letter-spacing:.05em;margin-bottom:6px}
#lib-title span{color:var(--gold)}
#lib-sub{font-size:14px;color:rgba(255,255,255,.45);margin-bottom:28px;line-height:1.5}
#lib-search-bar{
display:flex;align-items:center;gap:10px;
background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.1);
border-radius:40px;padding:8px 20px;max-width:520px;margin:0 auto;
transition:border-color .2s;
}
#lib-search-bar:focus-within{border-color:var(--gold)}
#lib-search{
flex:1;border:none;outline:none;background:transparent;
font-family:'Open Sans',sans-serif;font-size:14px;color:var(--white);padding:6px 0;
}
#lib-search::placeholder{color:rgba(255,255,255,.3)}
/* Filters */
#lib-filters{
background:var(--white);border-bottom:1px solid #f7f7f7;
padding:14px var(--pad) 10px;position:sticky;top:138px;z-index:50;
}
#lib-counter{font-size:12px;color:#333333;margin-top:4px}
/* Content grid */
#lib-grid-wrap{padding:24px var(--pad);background:var(--white)}
#lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.lib-card{
border-radius:0;overflow:hidden;border:1.5px solid #f7f7f7;
background:var(--white);transition:all .25s;display:flex;flex-direction:column;cursor:pointer;
}
.lib-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.06);border-color:var(--dark)}
.lib-card-cover{
height:170px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.lib-cover-inner{
display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;
}
.lib-cover-badge{
position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:0;
font-size:10px;font-weight:800;letter-spacing:.06em;
}
.lib-badge-free{background:rgba(46,125,50,.9);color:var(--white)}
.lib-badge-paid{background:rgba(201,168,76,.9);color:var(--black)}
.lib-cover-fmt{
position:absolute;bottom:8px;left:10px;padding:3px 8px;border-radius:0;
background:rgba(0,0,0,.4);font-size:9px;font-weight:700;color:var(--white);
letter-spacing:.08em;
}
.lib-card-head{padding:18px 18px 12px;flex:1}
.lib-card-type{
display:inline-flex;align-items:center;gap:4px;
padding:3px 10px;border-radius:0;font-size:10px;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;
}
.lib-t-research{background:#e3f2fd;color:#1565c0}
.lib-t-report{background:#e8f5e9;color:#2e7d32}
.lib-t-media{background:#fff3e0;color:#e65100}
.lib-t-article{background:#f3e5f5;color:#7b1fa2}
.lib-t-dataset{background:#e0f2f1;color:#00695c}
.lib-t-toolkit{background:#fce4ec;color:#c62828}
.lib-t-video{background:#ede7f6;color:#4527a0}
.lib-t-audio{background:#fff8e1;color:#f57f17}
.lib-t-traditions{background:#fce4ec;color:#880e4f}
.lib-t-cuisine{background:#fff3e0;color:#e65100}
.lib-t-fashion{background:#f3e5f5;color:#6a1b9a}
.lib-t-health{background:#e8f5e9;color:#2e7d32}
.lib-t-music{background:#fff8e1;color:#f57f17}
.lib-t-language{background:#e3f2fd;color:#1565c0}
.lib-t-religion{background:#ede7f6;color:#4527a0}
.lib-t-history{background:#e0f2f1;color:#00695c}
.lib-t-art{background:#fff3e0;color:#bf360c}
.lib-t-festivals{background:#fce4ec;color:#c62828}
.lib-card-title{font-size:16px;font-weight:700;color:var(--dark);line-height:1.35;margin-bottom:6px}
.lib-card-desc{font-size:13px;color:#333333;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lib-card-meta{
padding:10px 18px;display:flex;align-items:center;justify-content:space-between;
border-top:1px solid #f0f0f0;background:var(--light);flex-wrap:wrap;gap:6px;
}
.lib-card-author{font-size:11px;color:#333333;display:flex;align-items:center;gap:4px}
.lib-card-author strong{color:var(--dark)}
.lib-card-actions{display:flex;gap:6px}
.lib-btn-view{
padding:6px 14px;border-radius:0;border:1.5px solid #cccccc;
background:var(--white);font-family:'Open Sans',sans-serif;font-size:11px;
font-weight:600;color:var(--dark);cursor:pointer;transition:all .2s;text-decoration:none;
}
.lib-btn-view:hover{border-color:var(--blue);color:var(--blue)}
.lib-btn-buy{
padding:6px 14px;border-radius:0;border:none;
background:var(--gold);font-family:'Open Sans',sans-serif;font-size:11px;
font-weight:700;color:var(--black);cursor:pointer;transition:all .2s;text-decoration:none;
}
.lib-btn-buy:hover{background:#b8952f;transform:scale(1.03)}
.lib-card-free{
padding:6px 14px;border-radius:0;
background:#e8f5e9;font-size:11px;font-weight:700;color:#2e7d32;
}
.lib-card-price{font-size:11px;font-weight:700;color:var(--gold)}
.lib-card-tags{padding:6px 18px 12px;display:flex;gap:4px;flex-wrap:wrap}
.lib-tag{padding:2px 8px;border-radius:0;background:var(--light);font-size:10px;color:#333333;border:1px solid var(--light)}
/* Upload modal */
#lib-upload-modal{
display:none;position:fixed;inset:0;z-index:2000;
background:rgba(0,0,0,.7);align-items:center;justify-content:center;
}
#lib-upload-modal.lib-show{display:flex}
#lib-upload-box{
width:90%;max-width:640px;background:var(--white);border-radius:0;
padding:36px;max-height:90vh;overflow-y:auto;position:relative;
}
/* Book Detail Modal */
#lib-detail-modal{
display:none;position:fixed;inset:0;z-index:2000;
background:rgba(0,0,0,.7);align-items:center;justify-content:center;
}
#lib-detail-modal.lib-show{display:flex}
#lib-detail-box{
width:90%;max-width:720px;background:var(--white);border-radius:0;
padding:36px;max-height:90vh;overflow-y:auto;position:relative;
}
@media(max-width:768px){
#lib-hero{padding:40px 16px 28px;min-height:340px}
#lib-title{font-size:28px}
#lib-filters{padding:10px 12px 6px;top:108px}
#lib-grid-wrap{padding:14px 12px}
#lib-grid{grid-template-columns:1fr}
#lib-upload-box{padding:20px;width:96%}
}
/* ══════════════════════════════════════════════
UC AI HUB — Cultural AI Communication Centre
══════════════════════════════════════════════ */
#ai-hero{
position:relative;min-height:440px;
background:linear-gradient(145deg,#050510 0%,#0a0a2e 30%,#0f1555 55%,#1a0a3e 80%,#0a0a1a 100%);
display:flex;align-items:center;justify-content:center;overflow:hidden;padding:60px var(--pad) 40px;
}
#ai-hero-particles{position:absolute;inset:0;z-index:0;pointer-events:none}
#ai-hero-inner{position:relative;z-index:1;text-align:center;max-width:720px}
#ai-orb{
width:90px;height:90px;margin:0 auto 18px;border-radius:50%;
background:radial-gradient(circle at 35% 35%,#7c4dff,#651fff 40%,#304ffe 70%,#1a237e);
display:flex;align-items:center;justify-content:center;font-size:38px;
box-shadow:0 0 40px rgba(101,31,255,.35),0 0 80px rgba(101,31,255,.15);
animation:ai-pulse 3s ease-in-out infinite;
}
@keyframes ai-pulse{0%,100%{box-shadow:0 0 40px rgba(101,31,255,.35),0 0 80px rgba(101,31,255,.15)}50%{box-shadow:0 0 60px rgba(101,31,255,.5),0 0 120px rgba(101,31,255,.25)}}
#ai-title{font-size:38px;font-weight:800;color:var(--white);letter-spacing:.04em;margin-bottom:6px}
#ai-title span{background:linear-gradient(135deg,#b388ff,#7c4dff,var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
#ai-sub{font-size:14px;color:rgba(255,255,255,.45);line-height:1.6;margin-bottom:24px}
#ai-lang-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:20px}
.ai-lang{padding:4px 12px;border-radius:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:10px;color:rgba(255,255,255,.5);transition:all .2s;cursor:default}
.ai-lang:hover{background:rgba(124,77,255,.15);border-color:rgba(124,77,255,.3);color:rgba(255,255,255,.8)}
/* Chat window */
#ai-chat-wrap{max-width:860px;margin:0 auto;padding:0 var(--pad)}
#ai-chat-box{
background:var(--white);border-radius:0;overflow:hidden;
box-shadow:0 8px 40px rgba(0,0,0,.06);border:1.5px solid #e8e8f0;
margin-top:-50px;position:relative;z-index:2;
}
#ai-chat-head{
background:linear-gradient(135deg,#1a1040,#2a1870,#3a20a0);
padding:16px 22px;display:flex;align-items:center;gap:12px;
}
#ai-chat-avatar{
width:40px;height:40px;border-radius:50%;
background:linear-gradient(135deg,#7c4dff,#b388ff);
display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
}
#ai-chat-hdr-info{flex:1}
#ai-chat-hdr-name{font-size:14px;font-weight:700;color:var(--white)}
#ai-chat-hdr-status{font-size:10px;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:4px}
#ai-chat-hdr-status::before{content:'';width:6px;height:6px;border-radius:50%;background:#4caf50}
#ai-chat-lang-sel{
height:30px;border-radius:0;border:1px solid rgba(255,255,255,.15);
background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);
font-family:'Open Sans',sans-serif;font-size:10px;padding:0 8px;outline:none;
}
#ai-chat-lang-sel option{color:var(--dark);background:var(--white)}
#ai-messages{
height:380px;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;
background:linear-gradient(180deg,#fafaff,#fff);
}
.ai-msg{max-width:80%;display:flex;gap:10px;animation:ai-fade-in .3s ease}
@keyframes ai-fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ai-msg-bot{align-self:flex-start}
.ai-msg-user{align-self:flex-end;flex-direction:row-reverse}
.ai-msg-avi{
width:30px;height:30px;border-radius:50%;flex-shrink:0;
display:flex;align-items:center;justify-content:center;font-size:14px;
}
.ai-msg-bot .ai-msg-avi{background:linear-gradient(135deg,#7c4dff,#b388ff)}
.ai-msg-user .ai-msg-avi{background:linear-gradient(135deg,var(--blue),#42a5f5)}
.ai-msg-bubble{
padding:12px 16px;border-radius:0;font-size:13px;line-height:1.6;
}
.ai-msg-bot .ai-msg-bubble{background:#f0f0ff;color:var(--dark);border-bottom-left-radius:4px}
.ai-msg-user .ai-msg-bubble{background:var(--blue);color:var(--white);border-bottom-right-radius:4px}
.ai-msg-time{font-size:9px;color:#bbb;margin-top:4px}
.ai-typing{display:flex;gap:4px;padding:8px 16px}
.ai-typing-dot{width:6px;height:6px;border-radius:50%;background:#b388ff;animation:ai-blink 1.2s infinite}
.ai-typing-dot:nth-child(2){animation-delay:.2s}
.ai-typing-dot:nth-child(3){animation-delay:.4s}
@keyframes ai-blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
#ai-input-bar{
display:flex;align-items:center;gap:8px;padding:14px 18px;
border-top:1px solid #f7f7f7;background:var(--white);
}
#ai-input{
flex:1;border:2px solid #e8e8f0;border-radius:0;padding:10px 16px;
font-family:'Open Sans',sans-serif;font-size:13px;outline:none;
transition:border-color .2s;resize:none;max-height:80px;
}
#ai-input:focus{border-color:#7c4dff}
#ai-send{
width:42px;height:42px;border-radius:50%;border:none;
background:linear-gradient(135deg,#7c4dff,#651fff);color:var(--white);
font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:transform .15s,box-shadow .2s;flex-shrink:0;
}
#ai-send:hover{transform:scale(1.05);box-shadow:0 4px 16px rgba(101,31,255,.3)}
/* Quick action chips */
#ai-quick-actions{display:flex;flex-wrap:wrap;gap:6px;padding:10px 18px;border-top:1px solid #f0f0f0;background:#fafaff}
.ai-chip{
padding:6px 14px;border-radius:0;border:1.5px solid #e0e0f0;
background:var(--white);font-size:11px;color:#333333;cursor:pointer;
font-family:'Open Sans',sans-serif;transition:all .2s;
}
.ai-chip:hover{border-color:#7c4dff;color:#7c4dff;background:#f5f0ff}
/* Campaign/CRM sections */
.ai-section-card{
background:var(--white);border-radius:0;border:1.5px solid #e8e8f0;
padding:24px;transition:all .25s;
}
.ai-section-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.06);border-color:#d0d0e0}
.ai-feat-icon{
width:44px;height:44px;border-radius:0;
display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:12px;
}
/* Campaign composer modal */
#ai-campaign-modal{
display:none;position:fixed;inset:0;z-index:2000;
background:rgba(0,0,0,.6);align-items:center;justify-content:center;
}
#ai-campaign-modal.ai-show{display:flex}
#ai-campaign-box{
width:90%;max-width:700px;background:var(--white);border-radius:0;
padding:28px;max-height:90vh;overflow-y:auto;position:relative;
}
@media(max-width:768px){
#ai-hero{min-height:340px;padding:40px 16px 28px}
#ai-title{font-size:26px}
#ai-chat-box{margin-top:-30px;border-radius:0}
#ai-messages{height:300px}
.ai-msg{max-width:92%}
#ai-chat-wrap{padding:0 12px}
}
/* ══════════════════════════════════════════════
UC TV — Global Cultural Television
══════════════════════════════════════════════ */
#tv-hero{
position:relative;min-height:460px;
background:linear-gradient(150deg,#050508 0%,#0a0a1a 25%,#0d1025 50%,#08081a 100%);
display:flex;align-items:center;justify-content:center;
overflow:hidden;padding:60px var(--pad) 40px;
}
#tv-scanlines{
position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.08;
background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.03) 2px,rgba(255,255,255,.03) 4px);
}
#tv-hero-inner{position:relative;z-index:1;text-align:center;max-width:740px;width:100%}
#tv-icon{
width:80px;height:80px;margin:0 auto 18px;position:relative;
background:linear-gradient(135deg,#1a1a3a,#2a2050);border-radius:0;
display:flex;align-items:center;justify-content:center;font-size:40px;
box-shadow:0 0 40px rgba(201,168,76,.2),inset 0 1px 0 rgba(255,255,255,.06);
}
#tv-icon::after{
content:'';position:absolute;top:6px;right:6px;width:8px;height:8px;
border-radius:50%;background:#e53935;animation:tvpulse 1.5s infinite;
}
#tv-title{font-size:42px;font-weight:800;color:var(--white);letter-spacing:.06em;margin-bottom:6px}
#tv-title span{color:var(--gold)}
#tv-sub{font-size:14px;color:rgba(255,255,255,.45);margin-bottom:28px;line-height:1.5}
#tv-search-bar{
display:flex;align-items:center;gap:10px;
background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.1);
border-radius:40px;padding:8px 20px;max-width:500px;margin:0 auto;
transition:border-color .2s,background .2s;
}
#tv-search-bar:focus-within{border-color:var(--gold);background:rgba(255,255,255,.1)}
#tv-search{
flex:1;border:none;outline:none;background:transparent;
font-family:'Open Sans',sans-serif;font-size:14px;color:var(--white);padding:6px 0;
}
#tv-search::placeholder{color:rgba(255,255,255,.3)}
/* Player overlay */
#tv-player-overlay{
display:none;position:fixed;inset:0;z-index:2000;
background:rgba(0,0,0,.92);
align-items:center;justify-content:center;
}
#tv-player-overlay.tv-show{display:flex}
#tv-player-box{
width:90%;max-width:960px;background:#000;border-radius:0;overflow:hidden;
box-shadow:0 20px 80px rgba(0,0,0,.6);position:relative;
}
#tv-player-video{width:100%;aspect-ratio:16/9;background:#111;display:flex;align-items:center;justify-content:center}
#tv-player-video iframe{width:100%;height:100%;border:none}
#tv-player-video .tv-placeholder{text-align:center;padding:40px;color:rgba(255,255,255,.4)}
#tv-player-video .tv-placeholder .tv-ph-icon{font-size:64px;margin-bottom:12px}
#tv-player-video .tv-placeholder p{font-size:14px}
#tv-player-bar{
display:flex;align-items:center;justify-content:space-between;
padding:14px 20px;background:linear-gradient(135deg,#0d0d1a,#1a1035);
border-top:2px solid var(--gold);
}
#tv-player-info{flex:1;min-width:0}
#tv-player-ch{font-size:15px;font-weight:700;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tv-player-meta{font-size:11px;color:rgba(255,255,255,.4)}
#tv-player-close{
width:36px;height:36px;border-radius:50%;border:none;
background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);
font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:all .2s;flex-shrink:0;
}
#tv-player-close:hover{background:rgba(255,60,60,.3);color:#ff6666}
/* Filters */
#tv-filters{
background:var(--white);border-bottom:1px solid #f7f7f7;
padding:14px var(--pad) 10px;position:sticky;top:138px;z-index:50;
}
#tv-filter-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
#tv-genre-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:4px}
#tv-counter{font-size:12px;color:#333333}
/* Channel grid */
#tv-channels-wrap{padding:24px var(--pad);background:var(--white)}
#tv-channels{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.tv-card{
border-radius:0;overflow:hidden;border:1.5px solid #f7f7f7;
background:var(--white);cursor:pointer;transition:all .25s;position:relative;
}
.tv-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08);border-color:var(--blue)}
.tv-card-preview{
height:120px;position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:center;
}
.tv-card-preview img{width:100%;height:100%;object-fit:cover}
.tv-card-no-img{
width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
font-size:36px;
}
.tv-card-no-img span{font-size:10px;margin-top:6px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.tv-card-live{
position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:4px;
padding:3px 8px;border-radius:0;background:rgba(229,57,53,.9);
font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--white);z-index:2;
}
.tv-card-live::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--white);animation:rd-live-blink 1.2s infinite}
.tv-card-hd{
position:absolute;top:8px;right:8px;padding:2px 6px;border-radius:4px;
background:rgba(0,0,0,.5);font-size:8px;font-weight:800;color:var(--white);
letter-spacing:.08em;
}
.tv-card-play{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,.3);opacity:0;transition:opacity .25s;
}
.tv-card:hover .tv-card-play{opacity:1}
.tv-card-play-btn{
width:48px;height:48px;border-radius:50%;background:var(--gold);
display:flex;align-items:center;justify-content:center;
font-size:18px;color:var(--black);box-shadow:0 4px 16px rgba(0,0,0,.3);
transition:transform .2s;
}
.tv-card:hover .tv-card-play-btn{transform:scale(1.1)}
.tv-card-body{padding:12px 14px}
.tv-card-name{font-size:13px;font-weight:700;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-card-loc{font-size:11px;color:#333333;margin-top:2px}
.tv-card-foot{
padding:8px 14px;display:flex;align-items:center;justify-content:space-between;
border-top:1px solid #f0f0f0;background:var(--light);
}
.tv-card-genre{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.tv-card-lang{font-size:10px;color:#333333}
/* Continent color accents */
.tv-c-africa .tv-card-no-img{background:linear-gradient(135deg,#8B4513,#D2691E)}
.tv-c-americas .tv-card-no-img{background:linear-gradient(135deg,#1565C0,#42A5F5)}
.tv-c-asia .tv-card-no-img{background:linear-gradient(135deg,#C62828,#E57373)}
.tv-c-europe .tv-card-no-img{background:linear-gradient(135deg,#1B5E20,#66BB6A)}
.tv-c-middle-east .tv-card-no-img{background:linear-gradient(135deg,#E65100,#FFB74D)}
.tv-c-oceania .tv-card-no-img{background:linear-gradient(135deg,#00838F,#4DD0E1)}
@media(max-width:768px){
#tv-hero{padding:40px 16px 28px;min-height:340px}
#tv-title{font-size:28px}
#tv-filters{padding:10px 12px 6px;top:108px}
#tv-channels-wrap{padding:14px 12px}
#tv-channels{grid-template-columns:1fr 1fr;gap:10px}
#tv-player-box{width:96%;border-radius:0}
}
@media(max-width:480px){#tv-channels{grid-template-columns:1fr}}
/* ══════════════════════════════════════════════
FAQ ACCORDION
══════════════════════════════════════════════ */
.faq-cat-head{
font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--blue);padding:20px 0 10px;margin-top:16px;border-bottom:2px solid var(--blue);
}
.faq-cat-head:first-child{margin-top:0}
.faq-item{border-bottom:1px solid var(--light)}
.faq-item[style*="display: none"]{border:none}
.faq-q{
width:100%;background:none;border:none;padding:18px 0;
display:flex;align-items:center;justify-content:space-between;gap:16px;
font-family:'Open Sans',sans-serif;font-size:15px;font-weight:600;
color:var(--dark);cursor:pointer;text-align:left;transition:color .2s;
}
.faq-q:hover{color:var(--blue)}
.faq-arrow{
font-size:20px;color:#ccc;flex-shrink:0;transition:transform .3s,color .3s;
width:28px;height:28px;display:flex;align-items:center;justify-content:center;
}
.faq-q.faq-open .faq-arrow{transform:rotate(45deg);color:var(--gold)}
.faq-q.faq-open{color:var(--blue)}
.faq-a{
max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;
padding:0 0 0 0;
}
.faq-a p{font-size:14px;line-height:1.75;color:#333333;padding-bottom:18px}
.faq-a a{color:var(--blue);font-weight:600;text-decoration:none}
.faq-a a:hover{text-decoration:underline}
@media(max-width:768px){
#se-hero{padding:40px 20px 32px}
#se-title{font-size:28px}
#se-bar{border-radius:0;flex-wrap:wrap}
#se-btn{width:100%;border-radius:0;margin-top:4px}
#se-results-bar{padding:12px 16px;top:108px}
#se-results-body{padding:20px 16px}
#se-ai-panel{padding:18px 16px}
#se-related{padding:16px}
}
/* Stats bar — horizontal stat display */
.sbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2px;background:var(--grey)}
.sbar .si{background:var(--white);padding:24px 16px;text-align:center;height:auto;width:auto;border:none;font-family:inherit;font-size:inherit}
.sbar .si .sn{font-size:46px;font-weight:700;color:var(--blue);line-height:1;display:block}
.sbar .si .sl2{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--dark);margin-top:8px;display:block}
@media(max-width:680px){.sbar{grid-template-columns:1fr 1fr}}