@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --primary: #1677ff; --primary-h: #4096ff; --primary-bg: #eff6ff; --primary-bd: #91caff;
    --s1: #FFFFFF; --s2: #FAFAFA; --bg: #F5F5F5;
    --t1: #1F2328; --t2: #656D76; --t3: #8B949E; --t4: #B1BAC4;
    --b1: #D1D9E0; --b2: #E8EBEF; --b3: #F0F2F4;
    --pos: #1A7F37; --pos-bg: #DAFBE1; --neg: #CF222E; --neg-bg: #FFEBE9;
    --warn: #BF8700; --warn-bg: #FFF8C5;
    --r: 3px; --r-md: 6px;
    --f: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
    --fm: 'JetBrains Mono',ui-monospace,'SF Mono',monospace;
    --shadow: 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 3px 8px rgba(0,0,0,0.06); --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
    --nav-w: 200px; --lib-w: 260px;
    /* compat aliases used by inline styles in views */
    --purple: var(--primary); --purple-l: var(--primary-h); --purple-d: #1361cc; --purple-bg: var(--primary-bg);
    --lime: var(--pos);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--f);background:var(--bg);color:var(--t1);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--primary);color:#fff}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--b1);border-radius:3px}
:focus-visible{outline:2px solid var(--primary);outline-offset:1px}

/* ═══ SHELL ═══ */
.app{display:flex;height:100vh;overflow:hidden}

/* ═══ SIDEBAR NAV ═══ */
.sidebar{width:var(--nav-w);flex-shrink:0;background:var(--s1);border-right:1px solid var(--b2);display:flex;flex-direction:column;transition:width .2s ease;overflow:hidden;z-index:30}
.sidebar.collapsed{width:0;border-right:none}

.s-logo{height:48px;padding:0 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--b2);flex-shrink:0}
.s-logo-icon{width:24px;height:24px;border-radius:var(--r-md);background:var(--primary);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.s-logo-text{font-size:14px;font-weight:700;letter-spacing:1px;white-space:nowrap}
.s-nav{flex:1;padding:8px;overflow-y:auto}
.s-item{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-md);color:var(--t2);font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;transition:background .1s;white-space:nowrap;border-left:3px solid transparent}
.s-item:hover{background:var(--bg);color:var(--t1);text-decoration:none}
.s-item.active{background:var(--primary-bg);color:var(--primary);font-weight:600;border-left-color:var(--primary)}
.s-item .ic{width:16px;text-align:center;font-size:12px;opacity:.5;flex-shrink:0}
.s-item.active .ic{opacity:1}
.s-section{font-size:11px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;padding:16px 12px 4px;white-space:nowrap}
.s-user{padding:12px 16px;border-top:1px solid var(--b2);display:flex;align-items:center;gap:8px;flex-shrink:0}
.s-avatar{width:24px;height:24px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff;flex-shrink:0}
.s-uname{font-size:12px;font-weight:600;white-space:nowrap}
.s-urole{font-size:11px;color:var(--t3);text-transform:uppercase;white-space:nowrap}

/* ═══ SIDEBAR LIB ═══ */
.sidebar-lib{width:var(--lib-w);flex-shrink:0;background:var(--s1);border-right:1px solid var(--b2);display:flex;flex-direction:column;transition:width .2s ease;overflow:hidden;z-index:20}
.sidebar-lib.collapsed{width:0;border-right:none}

.slib-header{height:48px;padding:0 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--b2);font-size:13px;font-weight:600;flex-shrink:0;white-space:nowrap}
.slib-header .cnt{font-size:11px;font-weight:500;color:var(--t3);margin-left:4px}
.slib-header .add-btn{margin-left:auto;width:24px;height:24px;border-radius:var(--r-md);border:1px solid var(--b1);background:var(--s1);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t3);font-size:14px;transition:all .15s;flex-shrink:0}
.slib-header .add-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-bg)}
.slib-search{padding:8px 12px;border-bottom:1px solid var(--b2);flex-shrink:0}
.slib-search input{width:100%;padding:5px 12px;background:var(--bg);border:1px solid var(--b2);border-radius:var(--r-md);font-family:var(--f);font-size:12px;color:var(--t1);outline:none}
.slib-search input:focus{border-color:var(--primary)}
.slib-search input::placeholder{color:var(--t4)}
.slib-list{flex:1;overflow-y:auto}
.slib-item{display:flex;align-items:center;gap:12px;padding:8px 16px;cursor:pointer;transition:background .1s;border-bottom:1px solid var(--b3);text-decoration:none;color:var(--t1);white-space:nowrap}
.slib-item:hover{background:var(--bg);text-decoration:none}
.slib-item.active{background:var(--primary-bg)}
.slib-item img{width:36px;height:36px;border-radius:var(--r-md);object-fit:cover;flex-shrink:0;border:1px solid var(--b2)}
.slib-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.slib-sub{font-size:11px;color:var(--t3);margin-top:1px}

/* ═══ TOPBAR ═══ */
.topbar{height:48px;padding:0 20px;border-bottom:1px solid var(--b2);background:var(--s1);display:flex;align-items:center;gap:12px;flex-shrink:0}
.toggle-btn{width:28px;height:28px;border-radius:var(--r-md);border:1px solid var(--b2);background:var(--s1);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t3);font-size:14px;transition:all .1s;flex-shrink:0}
.toggle-btn:hover{background:var(--bg);color:var(--t1)}
.search-global{flex:1;position:relative;max-width:480px}
.search-global input{width:100%;padding:5px 12px 5px 30px;background:var(--bg);border:1px solid var(--b2);border-radius:var(--r-md);font-family:var(--f);font-size:12px;color:var(--t1);outline:none;transition:border-color .15s}
.search-global input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(22,119,255,.1)}
.search-global input::placeholder{color:var(--t4)}
.search-global .search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--t4);font-size:13px}
.search-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--s1);border:1px solid var(--b1);border-radius:var(--r-md);max-height:400px;overflow-y:auto;z-index:100;display:none;box-shadow:var(--shadow-lg)}
.search-dropdown.open{display:block}
.sr-item{display:flex;align-items:center;gap:12px;padding:8px 16px;cursor:pointer;border-bottom:1px solid var(--b3);color:var(--t1);transition:background .1s}
.sr-item:hover{background:var(--bg)}
.sr-item:last-child{border-bottom:none}
.sr-img{width:36px;height:36px;border-radius:var(--r-md);object-fit:cover;background:var(--bg);flex-shrink:0}
.sr-name{font-weight:600;font-size:13px}
.sr-sub{font-size:11px;color:var(--t3)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}

/* ═══ MAIN ═══ */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.content{flex:1;overflow-y:auto;overflow-x:auto;padding:24px}

/* ═══ CARDS ═══ */
.card{background:var(--s1);border:1px solid var(--b2);border-radius:var(--r-md);padding:20px}
.card-sm{padding:16px}
.card-title{font-size:13px;font-weight:600;margin-bottom:16px}
.card-sub{font-size:12px;color:var(--t3)}

/* ═══ ENTITY HEADER ═══ */
.entity-header{display:flex;align-items:center;gap:20px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--b2)}
.entity-img{width:72px;height:72px;border-radius:var(--r-md);object-fit:cover;flex-shrink:0;border:1px solid var(--b2);background:var(--bg);box-shadow:none}
.entity-name{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.entity-meta{font-size:12px;color:var(--t3);margin-top:2px}
.entity-meta .mono{font-family:var(--fm);font-size:11px;color:var(--t4)}
.entity-actions{margin-left:auto;display:flex;gap:8px}

/* ═══ TABS ═══ */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--b2);margin-bottom:20px;background:var(--s1);padding:0 12px;overflow-x:auto;flex-shrink:0;scrollbar-width:none;border-radius:var(--r-md) var(--r-md) 0 0}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:8px 16px;font-size:13px;font-weight:500;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;white-space:nowrap}
.tab:hover{color:var(--t1)}
.tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}

/* ═══ SUB-TABS ═══ */
.ptabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px}
.ptab{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;height:24px;border-radius:var(--r-md);font-size:12px;font-weight:500;cursor:pointer;color:var(--t3);background:transparent;border:1px solid var(--b2);transition:all .15s}
.ptab:hover{border-color:var(--b1);color:var(--t2)}
.ptab.active{background:var(--primary-bg);color:var(--primary);border-color:var(--primary-bd)}

/* ═══ TABLES ═══ */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:12px;font-weight:600;color:var(--t2);padding:8px 16px;border-bottom:1px solid var(--b2);background:var(--s2);position:sticky;top:0;z-index:1}
.tbl td{padding:8px 16px;font-size:13px;border-bottom:1px solid var(--b3)}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--s2)}
.tbl .rk{font-weight:600;color:var(--primary);font-family:var(--fm);font-size:14px}
.tbl .up{color:var(--pos)} .tbl .dn{color:var(--neg)}
.clickable{cursor:pointer} .clickable:hover{color:var(--primary)}

/* ═══ KPI ═══ */
.kpi{background:var(--s1);border:1px solid var(--b2);border-radius:var(--r-md);padding:16px 20px}
.kpi-label{font-size:12px;color:var(--t3);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.kpi-val{font-size:24px;font-weight:700;letter-spacing:-.02em}
.kpi-change{font-size:12px;margin-top:2px}
.up{color:var(--pos)} .dn{color:var(--neg)}

/* ═══ GRID ═══ */
.g{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:1fr 1fr 1fr}
.g4{grid-template-columns:1fr 1fr 1fr 1fr}
.g5{grid-template-columns:1fr 1fr 1fr 1fr 1fr}

/* ═══ LIB GRID ═══ */
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.lib-card{background:var(--s1);border:1px solid var(--b2);border-radius:var(--r-md);padding:12px;cursor:pointer;text-decoration:none;color:var(--t1);display:block;transition:border-color .15s}
.lib-card:hover{border-color:var(--b1);text-decoration:none}
.lib-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);margin-bottom:8px;background:var(--bg)}
.lib-card .lib-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-card .lib-sub{font-size:11px;color:var(--t3);margin-top:2px}

/* ═══ BUTTONS ═══ */
.btn{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;height:28px;border-radius:var(--r-md);font-family:var(--f);font-size:13px;font-weight:500;border:1px solid var(--b1);cursor:pointer;transition:all .15s;text-decoration:none;background:var(--s1);color:var(--t1)}
.btn:hover{border-color:var(--t3);text-decoration:none}
.btn-p,.btn-l{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-p:hover,.btn-l:hover{background:var(--primary-h);border-color:var(--primary-h);color:#fff}
.btn-o{background:var(--s1);color:var(--t2);border:1px solid var(--b1)}
.btn-o:hover{border-color:var(--t3);color:var(--t1)}
.btn-sm{height:24px;padding:2px 10px;font-size:12px}
.btn-xs{height:20px;padding:1px 8px;font-size:11px}

/* ═══ PC DOT ═══ */
.pc-dot{width:8px;height:8px;border-radius:50%;display:inline-block}

/* ═══ UTILS ═══ */
.loading{display:flex;align-items:center;justify-content:center;padding:48px;color:var(--t3);font-size:13px}
.loading::after{content:'';width:16px;height:16px;border:2px solid var(--b2);border-top-color:var(--primary);border-radius:50%;animation:sp .5s linear infinite;margin-left:8px}
@keyframes sp{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:48px 20px;color:var(--t3)}
.empty-icon{font-size:32px;margin-bottom:12px;opacity:.2}
.empty-text{font-size:13px}
.mt2{margin-top:8px} .mt4{margin-top:16px} .mt6{margin-top:24px}
.mb2{margin-bottom:8px} .mb4{margin-bottom:16px}
.mono{font-family:var(--fm)} .muted{color:var(--t2)} .dim{color:var(--t3)}
.bold{font-weight:600} .sm{font-size:13px} .xs{font-size:11px}
.flex{display:flex} .items-c{align-items:center} .gap2{gap:8px} .gap4{gap:16px}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hidden{display:none}
.bento{border-radius:var(--r-md);padding:20px}

/* ═══ LOGIN ═══ */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.login-box{width:380px;background:var(--s1);border:1px solid var(--b2);border-radius:var(--r-md);padding:40px;box-shadow:var(--shadow-md)}
.login-box h1{text-align:center;font-size:20px;font-weight:700;letter-spacing:2px;margin:16px 0 4px}
.login-box .sub{text-align:center;font-size:11px;color:var(--t3);letter-spacing:1px;margin-bottom:32px}
.login-box label{display:block;font-size:12px;color:var(--t2);margin-bottom:4px;font-weight:500}
.login-box input{width:100%;padding:8px 12px;background:var(--s2);border:1px solid var(--b1);border-radius:var(--r-md);color:var(--t1);font-family:var(--f);font-size:13px;outline:none;margin-bottom:16px}
.login-box input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(22,119,255,.1)}
.login-box .btn{width:100%;justify-content:center;padding:8px;height:36px;font-size:14px}
.login-err{color:var(--neg);font-size:13px;text-align:center;margin-bottom:16px}

/* ═══ OVERLAY ═══ */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:15}
.sidebar-overlay.show{display:block}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1200px){.sidebar-lib{width:220px}}
@media(max-width:960px){
    .sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--nav-w);box-shadow:var(--shadow-lg)}
    .sidebar.collapsed{width:0}
    .sidebar-lib{position:fixed;left:var(--nav-w);top:0;bottom:0;width:var(--lib-w);box-shadow:var(--shadow-lg)}
    .sidebar-lib.collapsed{width:0}
    .content{padding:16px}
    .g2,.g3,.g4,.g5{grid-template-columns:1fr}
}
@media(max-width:640px){
    .topbar{padding:0 12px;gap:8px}
    .search-global{max-width:none}
    .entity-header{flex-direction:column;align-items:flex-start;gap:12px}
    .entity-actions{margin-left:0}
    .tabs{padding:0 8px}
}

/* ═══ PROMO BUILDER TEMPLATE STYLES ═══ */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Serif+Display&family=IBM+Plex+Mono:wght@400;500;600&family=Syne:wght@400;600;700;800&family=Instrument+Serif&family=Nanum+Myeongjo:wght@400;700;800&family=Cormorant+Garamond:wght@300;400;600&family=Outfit:wght@300;400;600;700;800&family=Caveat:wght@400;600;700&family=Patrick+Hand&family=Architects+Daughter&family=Share+Tech+Mono&family=Unbounded:wght@300;400;700;900&display=swap');

.pv{max-width:420px;width:100%}
/* T0 Clean */
.pv.t0{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.12);font-family:'Inter',sans-serif}
.pv.t0 .hero{position:relative;aspect-ratio:1;overflow:hidden;background:#111}.pv.t0 .hero img{width:100%;height:100%;object-fit:cover}
.pv.t0 .hov{position:absolute;bottom:0;left:0;right:0;padding:24px;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.pv.t0 .hov h2{font-size:22px;font-weight:800;color:#fff}.pv.t0 .hov p{font-size:13px;color:rgba(255,255,255,.8);margin-top:4px}
.pv.t0 .lk{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid #f0f0f0;cursor:pointer;text-decoration:none;color:#333;transition:background .1s}.pv.t0 .lk:last-child{border-bottom:none}.pv.t0 .lk:hover{background:#f9f9f9}
.pv.t0 .li{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.pv.t0 .ln{flex:1;font-size:14px;font-weight:600}.pv.t0 .la{padding:4px 14px;border:1px solid #ddd;border-radius:100px;font-size:12px;color:#888}
.pv.t0 .ft{padding:12px;text-align:center;border-top:1px solid #f0f0f0;font-size:10px;color:#ccc;letter-spacing:1px;text-transform:uppercase}
/* T1 Brutalist */
.pv.t1{background:#FFFBE6;color:#111;border:4px solid #111;box-shadow:12px 12px 0 #111;font-family:'Space Mono',monospace;overflow:hidden}
.pv.t1 .hero{position:relative;border-bottom:4px solid #111;overflow:hidden}.pv.t1 .hero img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(.3) contrast(1.2)}
.pv.t1 .hov{position:absolute;bottom:0;left:0;right:0;padding:16px 20px;background:#CCFF00;border-top:4px solid #111}.pv.t1 .hov h2{font-size:28px;font-weight:700}.pv.t1 .hov p{font-size:11px;text-transform:uppercase;letter-spacing:1px}
.pv.t1 .lk{display:flex;align-items:center;padding:14px 20px;border-bottom:3px solid #111;cursor:pointer;text-decoration:none;color:#111;transition:background .15s}.pv.t1 .lk:hover{background:#CCFF00}
.pv.t1 .li{width:40px;height:40px;border:3px solid #111;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;margin-right:14px;background:#fff}
.pv.t1 .ln{flex:1;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px}.pv.t1 .la{padding:6px 16px;border:3px solid #111;font-size:11px;font-weight:700;text-transform:uppercase;background:#fff}
.pv.t1 .ft{padding:12px;border-top:4px solid #111;background:#111;text-align:center;color:#CCFF00;font-size:10px;font-weight:700;letter-spacing:3px}
/* T2 Vinyl */
.pv.t2{background:#1a1208;color:#E8DCC8;border-radius:24px;overflow:hidden;font-family:'DM Serif Display',serif}
.pv.t2 .hero{padding:32px;text-align:center}.pv.t2 .disc{width:180px;height:180px;border-radius:50%;margin:0 auto;position:relative;background:conic-gradient(from 0deg,#111,#222,#111,#1a1a1a,#111,#222,#111,#1a1a1a,#111,#222,#111);box-shadow:0 0 0 3px #333;animation:promoSpin 8s linear infinite}
.pv.t2 .disc img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid #444}
.pv.t2 .disc::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:#E8DCC8;z-index:2}
@keyframes promoSpin{to{transform:rotate(360deg)}}
.pv.t2 .hov{padding:20px 32px;text-align:center}.pv.t2 .hov h2{font-size:28px;letter-spacing:1px}.pv.t2 .hov p{font-size:12px;color:#9A8C74;margin-top:4px;font-family:'IBM Plex Mono',monospace}
.pv.t2 .lk{display:flex;align-items:center;gap:14px;padding:12px 32px;cursor:pointer;text-decoration:none;color:#E8DCC8;transition:background .2s;border-radius:8px;margin:0 16px 4px}.pv.t2 .lk:hover{background:rgba(232,220,200,.08)}
.pv.t2 .li{width:32px;height:32px;border-radius:50%;border:1px solid #3D3222;display:flex;align-items:center;justify-content:center;font-size:11px;color:#9A8C74;flex-shrink:0}
.pv.t2 .ln{flex:1;font-size:15px}.pv.t2 .la{font-size:11px;color:#9A8C74;font-family:'IBM Plex Mono',monospace}
.pv.t2 .ft{padding:20px;text-align:center;font-size:9px;color:#3D3222;letter-spacing:4px;text-transform:uppercase;font-family:'IBM Plex Mono',monospace}
/* T3 Holo */
.pv.t3{background:linear-gradient(135deg,#0f0f1a,#1a1025,#0f1a1a);border-radius:20px;overflow:hidden;font-family:'Syne',sans-serif}
.pv.t3 .hero{position:relative;overflow:hidden}.pv.t3 .hero img{width:100%;aspect-ratio:1;object-fit:cover;filter:saturate(1.3)}
.pv.t3 .hero::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,0,128,.15),rgba(0,200,255,.1),rgba(128,0,255,.15));mix-blend-mode:overlay}
.pv.t3 .hov{position:absolute;bottom:0;left:0;right:0;padding:24px;background:linear-gradient(transparent,rgba(15,15,26,.95))}
.pv.t3 .hov h2{font-size:26px;font-weight:800;background:linear-gradient(135deg,#FF6EC7,#7B68EE,#00CED1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.pv.t3 .hov p{font-size:12px;color:rgba(255,255,255,.5)}
.pv.t3 .lk{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;margin:0 16px 4px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);cursor:pointer;text-decoration:none;color:#fff;transition:all .25s}.pv.t3 .lk:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
.pv.t3 .li{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.7)}
.pv.t3 .ln{flex:1;font-size:14px;font-weight:600}.pv.t3 .la{font-size:11px;padding:4px 14px;border-radius:100px;background:linear-gradient(135deg,rgba(255,110,199,.2),rgba(123,104,238,.2));color:rgba(255,255,255,.8)}
.pv.t3 .ft{padding:16px;text-align:center;font-size:9px;color:rgba(255,255,255,.15);letter-spacing:3px;text-transform:uppercase}
/* T4 Magazine */
.pv.t4{background:#F7F3ED;color:#1a1a1a;overflow:hidden;font-family:'Instrument Serif',serif;border:1px solid #D4CFC5}
.pv.t4 .hero{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #D4CFC5}.pv.t4 .hero>div:first-child{aspect-ratio:.8;overflow:hidden}.pv.t4 .hero>div:first-child img{width:100%;height:100%;object-fit:cover;filter:sepia(.1)}
.pv.t4 .hov{padding:28px 20px;display:flex;flex-direction:column;justify-content:flex-end}.pv.t4 .hov h2{font-size:36px;line-height:.95;letter-spacing:-2px}.pv.t4 .hov p{font-size:11px;color:#888;margin-top:10px;font-family:'IBM Plex Mono',monospace}
.pv.t4 .lk{display:flex;align-items:center;gap:16px;padding:14px 24px;border-bottom:1px solid #E8E4DC;cursor:pointer;text-decoration:none;color:#1a1a1a;transition:background .15s}.pv.t4 .lk:hover{background:#EDE8DF}
.pv.t4 .li{font-size:22px;color:#ccc;min-width:28px;font-family:'Instrument Serif',serif}.pv.t4 .ln{flex:1;font-size:17px;letter-spacing:-.5px}
.pv.t4 .la{font-size:10px;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:2px;color:#999;padding:5px 12px;border:1px solid #D4CFC5}
.pv.t4 .ft{padding:14px 24px;border-top:1px solid #D4CFC5;display:flex;justify-content:space-between;font-size:9px;font-family:'IBM Plex Mono',monospace;color:#bbb;letter-spacing:3px}
/* T5 Terminal */
.pv.t5{background:#0a0a0a;color:#00FF41;border:1px solid #00FF4130;border-radius:4px;overflow:hidden;font-family:'IBM Plex Mono',monospace;position:relative}
.pv.t5::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,65,.015) 2px,rgba(0,255,65,.015) 4px);pointer-events:none}
.pv.t5 .hero{position:relative;border-bottom:1px solid #00FF4130;overflow:hidden}.pv.t5 .hero img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1) brightness(.4) contrast(1.4)}
.pv.t5 .hov{position:absolute;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(transparent,#0a0a0a)}.pv.t5 .hov h2{font-size:20px;color:#00FF41;text-shadow:0 0 20px rgba(0,255,65,.5);letter-spacing:2px}.pv.t5 .hov p{font-size:11px;color:#00FF4180}
.pv.t5 .lk{display:flex;align-items:center;gap:12px;padding:10px 16px;border:1px solid transparent;margin:0 8px 2px;border-radius:2px;cursor:pointer;text-decoration:none;color:#00FF41;transition:all .15s}.pv.t5 .lk:hover{border-color:#00FF4130;background:rgba(0,255,65,.05)}
.pv.t5 .li{font-size:11px;min-width:28px;color:#00FF4180}.pv.t5 .ln{flex:1;font-size:13px}.pv.t5 .la{font-size:10px;color:#00FF4160;padding:2px 10px;border:1px solid #00FF4130}
.pv.t5 .ft{padding:12px 16px;border-top:1px solid #00FF4115;font-size:9px;color:#00FF4130;text-align:center}
/* T6 Aurora */
.pv.t6{border-radius:28px;overflow:hidden;font-family:'Outfit',sans-serif;background:linear-gradient(160deg,#0B1120,#0D1B2A,#1B2838)}
.pv.t6 .hero{padding:32px;text-align:center}.pv.t6 .hero img{width:140px;height:140px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.1);box-shadow:0 0 60px rgba(0,255,170,.15)}
.pv.t6 .hov{text-align:center;padding:16px}.pv.t6 .hov h2{font-size:28px;font-weight:800;color:#fff}.pv.t6 .hov p{font-size:13px;color:rgba(255,255,255,.4)}
.pv.t6 .lk{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;margin:0 20px 8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);cursor:pointer;text-decoration:none;color:#fff;transition:all .3s}.pv.t6 .lk:hover{background:rgba(255,255,255,.1);transform:translateX(4px)}
.pv.t6 .li{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;font-weight:700}
.pv.t6 .ln{flex:1;font-size:15px;font-weight:600}.pv.t6 .la{font-size:14px;color:rgba(255,255,255,.2)}
.pv.t6 .ft{padding:20px;text-align:center;font-size:10px;color:rgba(255,255,255,.12);letter-spacing:3px;text-transform:uppercase}
/* T7 Korean */
.pv.t7{background:#FAF6F0;color:#2C2420;overflow:hidden;font-family:'Nanum Myeongjo',serif}
.pv.t7 .hero{padding:40px 32px 20px;text-align:center;border-bottom:1px solid #E0D5C5}.pv.t7 .hero img{width:150px;height:150px;object-fit:cover;display:block;margin:0 auto;filter:sepia(.15)}
.pv.t7 .hov{text-align:center;padding:20px 32px}.pv.t7 .hov h2{font-size:30px;font-weight:800;letter-spacing:4px}.pv.t7 .hov p{font-size:13px;color:#8A7A68;font-style:italic;margin-top:6px}
.pv.t7 .lk{display:flex;align-items:center;gap:16px;padding:14px 32px;border-bottom:1px solid #EDE5DA;cursor:pointer;text-decoration:none;color:#2C2420;transition:padding .2s}.pv.t7 .lk:hover{padding-left:40px}
.pv.t7 .li{width:6px;height:6px;border-radius:50%;flex-shrink:0;opacity:.6}.pv.t7 .ln{flex:1;font-size:16px;font-weight:700;letter-spacing:1px}.pv.t7 .la{font-size:11px;color:#A0907E;font-family:'Cormorant Garamond',serif;font-style:italic}
.pv.t7 .ft{padding:24px;text-align:center;font-size:16px;color:#C4463A;font-weight:800;transform:rotate(-8deg);opacity:.5}
/* T8 Polaroid */
.pv.t8{background:#E8DFD4;border-radius:20px;overflow:hidden;font-family:'Outfit',sans-serif;padding:28px 24px}
.pv.t8 .hero{text-align:center;margin-bottom:16px}.pv.t8 .hero>div{display:inline-block;background:#fff;padding:10px 10px 32px;box-shadow:0 4px 20px rgba(0,0,0,.12);transform:rotate(-2deg)}
.pv.t8 .hero img{width:180px;height:180px;object-fit:cover;display:block}
.pv.t8 .hov{text-align:center;margin-bottom:16px}.pv.t8 .hov h2{font-size:26px;font-weight:800}.pv.t8 .hov p{font-family:'Caveat',cursive;font-size:18px;color:#8A7A68}
.pv.t8 .lw{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.pv.t8 .lk{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #F0EBE4;cursor:pointer;text-decoration:none;color:#3E3428;transition:background .15s}.pv.t8 .lk:hover{background:#FAF6F0}
.pv.t8 .li{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.pv.t8 .ln{flex:1;font-size:14px;font-weight:600}.pv.t8 .la{font-family:'Caveat',cursive;font-size:15px;color:#A0907E}
.pv.t8 .ft{margin-top:16px;text-align:center;font-family:'Caveat',cursive;font-size:14px;color:#A0907E}
/* T9 Liquid */
.pv.t9{background:#fff;border-radius:24px;overflow:hidden;font-family:'Unbounded',sans-serif}
.pv.t9 .hero{position:relative;height:280px;overflow:hidden;background:linear-gradient(135deg,#667eea,#764ba2)}
.pv.t9 .hero img{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:150px;height:150px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 12px 40px rgba(0,0,0,.2);z-index:2}
.pv.t9 .hov{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);z-index:3;background:rgba(0,0,0,.3);padding:4px 16px;border-radius:100px;white-space:nowrap}
.pv.t9 .hov h2{font-size:11px;font-weight:700;letter-spacing:2px;color:#fff}
.pv.t9 .lk{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;margin:4px 16px;background:#F8F8FC;cursor:pointer;text-decoration:none;color:#333;transition:all .2s}.pv.t9 .lk:hover{transform:scale(1.02);box-shadow:0 4px 20px rgba(102,126,234,.15)}
.pv.t9 .li{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;flex-shrink:0;color:#fff}
.pv.t9 .ln{flex:1;font-size:13px;font-weight:700}.pv.t9 .la{font-size:10px;color:#999;text-transform:uppercase;padding:4px 12px;border-radius:100px;background:#EDEDF5}
.pv.t9 .ft{padding:16px;text-align:center;font-size:9px;color:#ccc;letter-spacing:4px;text-transform:uppercase}
/* T10 Blueprint */
.pv.t10{background:#1B3A5C;color:#A8D8F0;overflow:hidden;font-family:'Share Tech Mono',monospace;position:relative}
.pv.t10::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 19px,rgba(168,216,240,.06) 19px,rgba(168,216,240,.06) 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,rgba(168,216,240,.06) 19px,rgba(168,216,240,.06) 20px)}
.pv.t10>*{position:relative;z-index:1}
.pv.t10 .hero{padding:24px;border-bottom:1px dashed rgba(168,216,240,.2)}.pv.t10 .hero img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid rgba(168,216,240,.2);filter:saturate(.3) brightness(.8);opacity:.7}
.pv.t10 .hov{margin-top:12px}.pv.t10 .hov h2{font-size:18px;letter-spacing:4px;text-transform:uppercase}.pv.t10 .hov p{font-size:10px;color:rgba(168,216,240,.4);letter-spacing:2px}
.pv.t10 .lk{display:flex;align-items:center;gap:12px;padding:10px 16px;border:1px dashed transparent;margin:0 16px 2px;cursor:pointer;text-decoration:none;color:#A8D8F0;transition:all .2s}.pv.t10 .lk:hover{border-color:rgba(168,216,240,.3);background:rgba(168,216,240,.04)}
.pv.t10 .li{font-size:10px;min-width:24px;color:rgba(168,216,240,.3)}.pv.t10 .ln{flex:1;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.pv.t10 .la{font-size:9px;padding:2px 8px;border:1px solid rgba(168,216,240,.2);color:rgba(168,216,240,.5)}
.pv.t10 .ft{padding:12px;border-top:1px dashed rgba(168,216,240,.15);text-align:center;font-size:8px;color:rgba(168,216,240,.2);letter-spacing:2px}
/* T11 Doodle */
.pv.t11{background:#FFF;position:relative;border:2px solid #333;box-shadow:4px 4px 0 #E8DFD4;font-family:'Patrick Hand',cursive;overflow:visible}
.pv.t11::before,.pv.t11::after{content:'';position:absolute;width:50px;height:20px;background:rgba(255,228,150,.6);border:1px solid rgba(200,180,100,.3);z-index:10;top:-10px}
.pv.t11::before{left:30px;transform:rotate(-3deg)}.pv.t11::after{right:30px;transform:rotate(2deg)}
.pv.t11 .hero{padding:32px 28px 16px;text-align:center;border-bottom:2px dashed #ccc;position:relative}
.pv.t11 .hero::after{content:'♪ ♫ ♪';position:absolute;top:10px;right:16px;font-size:14px;color:#F4A261;opacity:.5;transform:rotate(12deg);font-family:'Caveat',cursive}
.pv.t11 .hero>div{display:inline-block;position:relative}
.pv.t11 .hero img{width:150px;height:150px;object-fit:cover;border:3px solid #333;box-shadow:3px 3px 0 #FFF,5px 5px 0 #333;transform:rotate(-2deg)}
.pv.t11 .hero>div::after{content:'⭐';position:absolute;top:-8px;right:-12px;font-size:18px;transform:rotate(15deg)}
.pv.t11 .hov{text-align:center;padding:16px 28px}
.pv.t11 .hov h2{font-family:'Architects Daughter',cursive;font-size:32px;color:#333;position:relative;display:inline-block}
.pv.t11 .hov h2::after{content:'';position:absolute;bottom:-2px;left:-4px;right:-4px;height:8px;background:url("data:image/svg+xml,%3Csvg width='200' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4Q10 0 20 4T40 4T60 4T80 4T100 4T120 4T140 4T160 4T180 4T200 4' stroke='%23F4A261' stroke-width='2.5' fill='none'/%3E%3C/svg%3E") repeat-x;background-size:200px 8px}
.pv.t11 .hov p{font-size:15px;color:#999;margin-top:8px}
.pv.t11 .lk{display:flex;align-items:center;gap:12px;padding:10px 24px;margin-bottom:4px;border:2px solid transparent;border-radius:4px;cursor:pointer;text-decoration:none;color:#333;transition:all .15s}
.pv.t11 .lk:hover{border-color:#333;border-style:dashed;background:#FFFBF0;transform:translateX(4px) rotate(-.3deg)}
.pv.t11 .li{width:38px;height:38px;border:2px solid #333;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;background:#fff;box-shadow:2px 2px 0 #E8DFD4}
.pv.t11 .lk:nth-child(even) .li{transform:rotate(1.5deg)}.pv.t11 .lk:nth-child(odd) .li{transform:rotate(-1deg)}
.pv.t11 .ln{font-size:17px;flex:1}.pv.t11 .la{font-family:'Caveat',cursive;font-size:14px;color:#999;padding:2px 10px;border:1.5px solid #ddd;border-radius:100px}
.pv.t11 .ft{border-top:2px dashed #ccc;padding:12px 28px;display:flex;justify-content:space-between;align-items:center;font-family:'Architects Daughter',cursive;font-size:13px;color:#ccc}

/* ═══ NOTIFICATIONS ═══ */
.noti-wrap{position:relative}
.noti-bell{background:none;border:none;font-size:18px;cursor:pointer;padding:4px 8px;position:relative}
.noti-count{position:absolute;top:0;right:2px;background:var(--neg);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;line-height:1.3}
.noti-dropdown{position:absolute;top:100%;right:0;width:360px;max-height:420px;background:var(--s1);border:1px solid var(--b2);border-radius:var(--r-md);box-shadow:var(--shadow-lg);z-index:100;display:none;flex-direction:column}
.noti-dropdown.open{display:flex}
.noti-header{padding:12px 16px;font-size:13px;font-weight:700;border-bottom:1px solid var(--b2)}
.noti-list{flex:1;overflow-y:auto;max-height:360px}
.noti-item{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid var(--b3);font-size:12px;cursor:pointer;transition:background .1s}
.noti-item:hover{background:var(--s2)}
.noti-item:last-child{border-bottom:none}
.noti-item.unread{background:var(--primary-bg)}
.noti-dot{width:8px;height:8px;border-radius:50%;margin-top:4px;flex-shrink:0}
.noti-text{flex:1;line-height:1.4}
.noti-time{font-size:10px;color:var(--t4);flex-shrink:0}

/* ═══ INTEGRATED SEARCH RESULTS ═══ */
.sr-section{padding:6px 12px;font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;background:var(--s2);border-bottom:1px solid var(--b3)}