:root { --ctv-sticky-top: 76px; }
.ctv-page { background: radial-gradient(circle at 12% -8%, rgba(37,99,235,.33), transparent 30%), radial-gradient(circle at 94% 20%, rgba(8,145,178,.2), transparent 28%), #06101d; }
.ctv-header { z-index: 80; }
.ctv-header-inner { display: flex; align-items: center; justify-content: space-between; }
.ctv-global-nav a { white-space: nowrap; }
.ctv-global-nav .button.primary { box-shadow: 0 8px 28px rgba(37,99,235,.23); }
.ctv-tabs { position: sticky; top: var(--ctv-sticky-top); z-index: 70; border-bottom: 1px solid rgba(84,124,163,.25); background: rgba(7,18,32,.9); backdrop-filter: blur(18px); }
.ctv-tabs-track { display: flex; align-items: center; gap: 5px; min-height: 56px; overflow-x: auto; scrollbar-width: none; }
.ctv-tabs-track::-webkit-scrollbar { display: none; }
.ctv-tabs a { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 8px 13px; border: 1px solid transparent; border-radius: 10px; color: #7f9ab7; text-decoration: none; font-size: 11px; font-weight: 800; }
.ctv-tabs a span { font-size: 13px; }
.ctv-tabs a:hover, .ctv-tabs a.active { border-color: #274a70; background: #102844; color: #fff; }
.ctv-tabs a.active { box-shadow: inset 0 -2px #38bdf8; }
.ctv-main { padding-bottom: 70px; }
.ctv-main [id] { scroll-margin-top: 148px; }
.ctv-intro { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); align-items: center; gap: 42px; padding-top: 58px; padding-bottom: 34px; }
.ctv-intro h1 { margin: 10px 0 13px; font-size: clamp(34px,5vw,58px); line-height: 1.05; letter-spacing: -.055em; }
.ctv-intro h1 em { font-style: normal; background: linear-gradient(90deg,#60a5fa,#22d3ee); background-clip: text; -webkit-background-clip: text; color: transparent; }
.ctv-intro p { max-width: 690px; margin: 0; color: #93a9bf; font-size: 14px; line-height: 1.75; }
.ctv-intro-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 18px; border: 1px solid #203c5b; border-radius: 18px; background: linear-gradient(145deg,rgba(15,36,59,.92),rgba(7,25,42,.92)); box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.ctv-intro-actions .button { width: 100%; min-height: 46px; }
.ctv-intro-actions small { grid-column: 1/-1; color: #6f8ba8; font-size: 9px; text-align: center; }
.ctv-workspace { display: grid; gap: 18px; }
.account-panel { padding: 21px; background: linear-gradient(150deg,rgba(12,30,51,.98),rgba(7,20,35,.98)); box-shadow: 0 24px 80px rgba(0,0,0,.2); }
.status-card { min-height: 190px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 28px; text-align: left; border: 1px solid #244567; border-radius: 17px; background: linear-gradient(115deg,#102c50,#0a2137); }
.status-copy { display: flex; align-items: center; gap: 18px; }
.status-copy h2 { margin: 6px 0; font-size: 24px; }
.status-copy p { max-width: 620px; margin: 0; color: #91abc3; font-size: 12px; line-height: 1.65; }
.status-icon { width: 66px; height: 66px; flex: 0 0 auto; margin: 0; border-radius: 19px; display: grid; place-items: center; background: linear-gradient(135deg,#2563eb,#06b6d4); color: #fff; font-size: 28px; box-shadow: 0 14px 30px rgba(37,99,235,.28); }
.status-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.pending-card { border-color: #765b20; background: linear-gradient(115deg,#352d16,#102339); }
.pending-card .status-icon { background: linear-gradient(135deg,#f59e0b,#ea580c); }
.affiliate-dashboard { display: grid; gap: 17px; }
.affiliate-dashboard-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px; }
.affiliate-identity { display: flex; align-items: center; gap: 13px; min-width: 0; }
.affiliate-avatar { width: 56px; height: 56px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 17px; background: linear-gradient(135deg,#7c3aed,#0ea5e9); color: #fff; font-size: 16px; font-weight: 900; box-shadow: 0 10px 28px rgba(14,165,233,.2); }
.affiliate-avatar.has-image{background-size:cover;background-position:center;color:transparent}.avatar-file-field{position:relative}.avatar-file-field small{color:var(--muted);font-size:10px}.avatar-file-field .avatar-clear{width:max-content;min-height:40px;margin-top:5px;padding:0 12px}.ctv-avatar-picker{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:9px}.ctv-avatar-preview{width:52px;height:52px;display:grid;place-items:center;overflow:hidden;border-radius:14px;background:linear-gradient(135deg,#7c3aed,#0ea5e9);color:#fff;font-size:13px;font-weight:900}.ctv-avatar-preview img{width:100%;height:100%;object-fit:cover}.ctv-avatar-picker input[type="file"]{min-width:0;padding:6px;font-size:10px}
.affiliate-identity h2 { margin: 4px 0 2px; font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.affiliate-identity p { margin: 0; color: #819ab4; font-size: 9px; }
.affiliate-head-actions { display: flex; gap: 8px; }
.affiliate-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.affiliate-kpis article { position: relative; overflow: hidden; min-height: 145px; padding: 18px; border: 1px solid #25415e; border-radius: 17px; background: linear-gradient(145deg,#102844,#091a2e); box-shadow: 0 13px 30px rgba(0,0,0,.1); }
.affiliate-kpis article::after { content: ""; position: absolute; right: -28px; bottom: -34px; width: 115px; height: 115px; border-radius: 50%; background: currentColor; opacity: .1; }
.affiliate-kpis article.clicks { color: #38bdf8; }
.affiliate-kpis article.orders { color: #a78bfa; }
.affiliate-kpis article.rate { color: #34d399; }
.affiliate-kpis article.commission { color: #fbbf24; }
.kpi-icon { position: absolute; right: 15px; top: 15px; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 10px; background: rgba(56,189,248,.08); font-size: 12px; font-weight: 900; }
.affiliate-kpis small, .affiliate-kpis span { display: block; color: #829db9; }
.affiliate-kpis small { padding-right: 36px; font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.affiliate-kpis strong { display: block; margin: 20px 0 7px; color: #fff; font-size: clamp(23px,3vw,31px); letter-spacing: -.04em; }
.affiliate-kpis span { font-size: 9px; }
.affiliate-link-card { display: grid; grid-template-columns: minmax(220px,.65fr) minmax(360px,1.35fr); align-items: center; gap: 18px; padding: 20px; border: 1px solid #2b6b98; border-radius: 17px; background: radial-gradient(circle at 0 50%,rgba(37,99,235,.24),transparent 42%),linear-gradient(110deg,#0d2948,#082333); }
.link-card-copy h3 { margin: 6px 0; font-size: 16px; }
.link-card-copy p { margin: 0; color: #77a0c1; font-size: 9px; line-height: 1.55; }
.affiliate-link { display: flex; gap: 8px; margin: 0; }
.affiliate-link .input { min-width: 0; flex: 1; background: rgba(3,15,27,.8); }
.affiliate-link .button { min-width: 146px; }
.rate-note { grid-column: 2; color: #81d9f1; font-size: 9px; }
.affiliate-data-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 11px; }
.data-card { min-width: 0; min-height: 245px; padding: 17px; border: 1px solid #1f3854; border-radius: 16px; background: #081727; }
.mini-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 9px; margin-bottom: 13px; }
.mini-head h3 { margin: 4px 0 0; font-size: 14px; }
.mini-head>span { padding: 5px 8px; border-radius: 999px; background: #112942; color: #86a9c7; font-size: 8px; font-weight: 800; }
.conversion-list, .timeline-list { display: grid; gap: 8px; }
.conversion-list>div, .timeline-list>div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 53px; padding: 11px 12px; border: 1px solid #17304a; border-radius: 11px; background: #0d2035; }
.conversion-list span { display: grid; gap: 3px; }
.conversion-list span:last-child { text-align: right; }
.conversion-list strong, .timeline-list strong { font-size: 10px; }
.conversion-list small, .conversion-list p, .timeline-list p { margin: 0; color: #718ba5; font-size: 8px; }
.conversion-list span:last-child strong { color: #72e6b4; }
.timeline-list div { display: grid; }
.timeline-list div strong { color: #e8f3ff; }
.application-panel { max-width: 920px; width: 100%; margin: 0 auto; padding: 27px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.section-heading h2 { margin: 6px 0 4px; font-size: 21px; }
.section-heading p { margin: 0; color: #7790a9; font-size: 10px; }
.approval-pill { padding: 7px 10px; border-radius: 999px; background: #392f15; color: #fbd36a; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.field small { color: #708ba5; font-size: 9px; }
.bank-qr { margin: 10px 0 4px; padding: 14px; border: 1px dashed #294766; border-radius: 13px; background: #081727; }
.bank-qr strong { font-size: 11px; }
.bank-qr p { margin: 5px 0 0; color: #7089a3; font-size: 9px; line-height: 1.55; }
.policy-section { padding-top: 65px; }
.policy-section .section-title { margin-bottom: 24px; }
.policy-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.policy-grid article { min-height: 190px; padding: 20px; border: 1px solid #213b58; border-radius: 17px; background: linear-gradient(145deg,#0f2239,#081827); }
.policy-grid article>span { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; background: #173965; color: #7bcfff; font-size: 10px; font-weight: 900; }
.policy-grid h3 { margin: 20px 0 8px; font-size: 14px; }
.policy-grid p { margin: 0; color: #7e96ae; font-size: 10px; line-height: 1.65; }
.qr-dialog { border: 0; border-radius: 17px; padding: 14px; background: #fff; }
.qr-dialog img { display: block; width: min(82vw,430px); }
.qr-dialog .button { width: 100%; margin-top: 10px; }
.hidden { display: none !important; }

@media (max-width: 1000px) {
    .ctv-intro { grid-template-columns: 1fr; gap: 20px; }
    .ctv-intro-actions { max-width: 640px; }
    .affiliate-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .affiliate-link-card { grid-template-columns: 1fr; }
    .rate-note { grid-column: auto; }
    .policy-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    :root { --ctv-sticky-top: 66px; }
    .ctv-header .shell { width: calc(100% - 20px); }
    .ctv-global-nav a[href="/"], .ctv-global-nav a[href="/gia"] { display: none; }
    .ctv-global-nav a { padding: 0 10px; }
    .ctv-tabs-track { width: 100%; padding: 0 10px; }
    .ctv-main [id] { scroll-margin-top: 132px; }
    .ctv-intro { padding-top: 34px; }
    .ctv-intro h1 { font-size: 37px; }
    .ctv-intro-actions { grid-template-columns: 1fr; }
    .ctv-intro-actions small { grid-column: auto; }
    .status-card { align-items: stretch; flex-direction: column; padding: 20px; }
    .status-actions { width: 100%; flex-wrap: wrap; }
    .status-actions .button { flex: 1; }
    .affiliate-dashboard-head { align-items: flex-start; }
    .affiliate-head-actions { flex-shrink: 0; }
    .affiliate-head-actions a { display: none; }
    .affiliate-link { display: grid; }
    .affiliate-link .button { min-height: 44px; }
    .affiliate-data-grid { grid-template-columns: 1fr; }
    .application-panel { padding: 20px; }
    .policy-section { padding-top: 46px; }
}
@media (max-width: 600px) {
    .ctv-header .brand strong { font-size: 14px; }
    .ctv-global-nav a[href="/studio.html"] { width: 42px; padding: 0; font-size: 0; }
    .ctv-global-nav a[href="/studio.html"]::before { content: "▶"; font-size: 12px; }
    .ctv-global-nav .button.primary { padding: 0 11px; font-size: 10px; }
    .ctv-tabs a { min-height: 42px; padding: 8px 11px; }
    .ctv-intro, .policy-section { width: calc(100% - 24px); }
    .ctv-intro h1 { font-size: 32px; }
    .ctv-intro p { font-size: 12px; }
    .ctv-workspace { width: 100%; }
    .account-panel { padding: 12px; border-right: 0; border-left: 0; border-radius: 0; }
    .status-copy { align-items: flex-start; }
    .status-icon { width: 50px; height: 50px; border-radius: 14px; font-size: 20px; }
    .status-copy h2 { font-size: 18px; }
    .status-actions { display: grid; }
    .affiliate-dashboard-head { display: grid; }
    .affiliate-head-actions, .affiliate-head-actions .button { width: 100%; }
    .affiliate-kpis { gap: 8px; }
    .affiliate-kpis article { min-height: 120px; padding: 14px; }
    .affiliate-kpis strong { margin: 15px 0 5px; font-size: 21px; }
    .kpi-icon { width: 28px; height: 28px; right: 11px; top: 11px; }
    .affiliate-link-card { padding: 16px; }
    .application-panel { border-right: 0; border-left: 0; border-radius: 0; }
    .form-grid { grid-template-columns: 1fr; }
    .span-2 { grid-column: auto; }
    .bank-qr, .policy-grid { grid-template-columns: 1fr; }
    .commerce-footer { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
}