:root{--bg:#f5f5f3;--card:#fff;--text:#1e1e1e;--muted:#888884;--green:#96b487;--green-light:#d4e3ce;--green-dark:#6a8f5c;--purple:#c3b4d2;--purple-light:#e8e2f0;--purple-dark:#8a6fa8;--border:#e4e0da;--font-serif:"Playfair Display", Georgia, serif;--font-sans:"DM Sans", system-ui, sans-serif;--radius-card:14px;--shadow-card:0 2px 12px #0000000f;--shadow-card-hover:0 8px 24px #0000001a;--header-height:68px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;font-size:16px}body{font-family:var(--font-sans);background:var(--bg);color:var(--text);min-height:100vh;font-weight:400}#root{width:100%}.serif{font-family:var(--font-serif)}.label{font-family:var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-size:10px;font-weight:500}.card{background:var(--card);border-radius:var(--radius-card);border:1px solid var(--border);box-shadow:var(--shadow-card);transition:transform .18s,box-shadow .18s}.card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}.page-wrapper{max-width:1360px;margin:0 auto;padding:40px 48px}@media (width<=768px){.page-wrapper{padding:24px 20px}}.spinner-wrap{height:calc(100vh - var(--header-height));justify-content:center;align-items:center;display:flex}.spinner{border:3px solid var(--green-light);border-top-color:var(--green-dark);border-radius:50%;width:44px;height:44px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-wrap{height:calc(100vh - var(--header-height));text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;display:flex}.error-wrap h2{font-family:var(--font-serif);color:var(--text);font-size:22px}.error-wrap p{color:var(--muted);max-width:420px;font-size:14px}.btn-retry{border:1px solid var(--green);background:var(--green-light);color:var(--green-dark);font-family:var(--font-sans);cursor:pointer;border-radius:8px;margin-top:8px;padding:10px 24px;font-size:14px;font-weight:500;transition:background .15s}.btn-retry:hover{background:var(--green);color:#fff}.header{z-index:100;height:var(--header-height);border-bottom:1px solid var(--border);background:#fff;justify-content:space-between;align-items:center;padding:0 48px;display:flex;position:sticky;top:0;box-shadow:0 2px 12px #0000000a}@media (width<=768px){.header{padding:0 20px}}.header-left{align-items:center;gap:12px;display:flex}.logo-mark{background:linear-gradient(135deg, var(--green), var(--purple));border-radius:6px;flex-shrink:0;width:32px;height:32px}.logo-text h1{font-family:var(--font-serif);color:var(--text);font-size:17px;font-weight:700;line-height:1.2}.logo-text span{font-family:var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-size:9px;font-weight:500;display:block}.header-right{align-items:center;gap:16px;display:flex}.client-pill{border:1px solid var(--border);background:#fff;border-radius:40px;align-items:center;gap:10px;padding:6px 14px 6px 6px;display:flex}.client-avatar{background:var(--green-dark);color:#fff;letter-spacing:.04em;width:32px;height:32px;font-size:11px;font-weight:600;font-family:var(--font-sans);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.client-info strong{color:var(--text);font-size:13px;font-weight:500;line-height:1.2;display:block}.client-info span{color:var(--muted);font-size:11px}.live-badge{color:var(--green-dark);letter-spacing:.08em;text-transform:uppercase;font-size:11px;font-weight:600;font-family:var(--font-sans);background:#f0faf0;border:1px solid #c3e0c3;border-radius:20px;flex-shrink:0;align-items:center;gap:6px;padding:5px 12px;display:flex}.live-dot{width:8px;height:8px;position:relative}.live-dot:before{content:"";background:var(--green);opacity:0;border-radius:50%;animation:2s ease-out infinite pulse-ring;position:absolute;inset:-4px}.live-dot:after{content:"";background:var(--green-dark);border-radius:50%;position:absolute;inset:0}@keyframes pulse-ring{0%{opacity:.6;transform:scale(.6)}80%,to{opacity:0;transform:scale(1.8)}}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:32px;display:flex}.page-title h2{font-family:var(--font-serif);color:var(--text);font-size:36px;font-weight:400;line-height:1.1}.page-title h2 em{color:var(--green-dark);font-style:italic}.page-title p{letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:6px;font-size:11px;font-weight:500}.month-selector{flex-direction:column;align-items:flex-end;gap:10px;display:flex}.month-nav{align-items:center;gap:12px;display:flex}.month-nav button{border:1px solid var(--border);background:var(--card);width:32px;height:32px;color:var(--text);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;font-size:16px;transition:background .15s,color .15s;display:flex}.month-nav button:hover:not(:disabled){background:var(--green-light);color:var(--green-dark)}.month-nav button:disabled{opacity:.35;cursor:not-allowed}.month-name{font-family:var(--font-serif);text-align:center;min-width:160px;font-size:18px;font-weight:400}.view-toggle{border:1px solid var(--border);background:var(--card);border-radius:8px;display:flex;overflow:hidden}.view-toggle button{font-family:var(--font-sans);letter-spacing:.06em;color:var(--muted);cursor:pointer;background:0 0;border:none;padding:6px 16px;font-size:12px;font-weight:500;transition:background .15s,color .15s}.view-toggle button.active{background:var(--green-dark);color:#fff}.date-range-inputs{align-items:center;gap:10px;display:flex}.date-range-field{flex-direction:column;gap:3px;display:flex}.date-range-field label{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-size:10px;font-weight:500}.date-range-field input[type=date]{font-family:var(--font-sans);color:var(--text);background:var(--card);border:1px solid var(--border);cursor:pointer;border-radius:8px;outline:none;padding:6px 10px;font-size:13px;font-weight:500;transition:border-color .15s}.date-range-field input[type=date]:focus{border-color:var(--green-dark)}.date-range-sep{color:var(--muted);margin-top:14px;font-size:16px}.ytd-strip{grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:40px;display:grid}@media (width<=768px){.ytd-strip{grid-template-columns:1fr}}.ytd-card{border-radius:var(--radius-card);background:linear-gradient(135deg, var(--green-light), var(--purple-light));border:1px solid var(--border);box-shadow:var(--shadow-card);padding:28px 28px 24px;transition:transform .18s,box-shadow .18s}.ytd-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}.ytd-card .label{color:var(--green-dark);margin-bottom:10px}.ytd-card .ytd-value{font-family:var(--font-serif);color:var(--text);font-size:38px;font-weight:700;line-height:1}.ytd-card .ytd-sub{color:var(--muted);margin-top:6px;font-size:12px}.section-label{font-family:var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-size:11px;font-weight:500}.kpi-grid{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;display:grid}@media (width<=900px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=480px){.kpi-grid{grid-template-columns:1fr}}.kpi-card{border-radius:var(--radius-card);border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow-card);padding:22px 22px 18px;transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden}.kpi-card:before{content:"";height:3px;position:absolute;top:0;left:0;right:0}.kpi-card.border-green:before{background:var(--green)}.kpi-card.border-purple:before{background:var(--purple)}.kpi-card.border-none:before{display:none}.kpi-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}.kpi-card .label{margin-bottom:8px}.kpi-value{font-family:var(--font-serif);color:var(--text);font-size:30px;font-weight:700;line-height:1}.kpi-bottom{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px;margin-top:10px;display:flex}.kpi-subtext{color:var(--muted);font-size:11px}.delta{border-radius:20px;padding:2px 7px;font-size:11px;font-weight:600}.delta.positive{color:var(--green-dark);background:var(--green-light)}.delta.negative{color:var(--muted);background:#f0eeeb}.section-row{grid-template-columns:60fr 40fr;align-items:start;gap:24px;margin-bottom:32px;display:grid}@media (width<=768px){.section-row{grid-template-columns:1fr}}.funnel-card{padding:28px 28px 24px}.funnel-card h3{font-family:var(--font-serif);margin-bottom:4px;font-size:18px;font-weight:400}.funnel-card p.sub{color:var(--muted);margin-bottom:24px;font-size:12px}.funnel-stages{flex-direction:column;gap:12px;display:flex}.funnel-stage{flex-direction:column;gap:4px;display:flex}.funnel-stage-label{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-size:10px;font-weight:500}.funnel-bar-track{background:var(--bg);border-radius:6px;width:100%;height:30px;overflow:hidden}.funnel-bar-fill{background:linear-gradient(to right, var(--green), var(--purple));border-radius:6px;align-items:center;min-width:48px;height:100%;padding-left:10px;transition:width .4s;display:flex}.funnel-bar-fill span{color:#fff;white-space:nowrap;font-size:12px;font-weight:500}.roas-card{text-align:center;flex-direction:column;align-items:center;padding:28px 24px 24px;display:flex}.roas-card h3{font-family:var(--font-serif);margin-bottom:4px;font-size:18px;font-weight:400}.roas-card p.sub{color:var(--muted);margin-bottom:12px;font-size:12px}.roas-ring-wrap{width:200px;height:200px;position:relative}.roas-center{pointer-events:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.roas-center .roas-number{font-family:var(--font-serif);color:var(--text);font-size:32px;font-weight:700;line-height:1}.roas-center .roas-label{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px;font-size:10px;font-weight:500}.roas-tagline{color:var(--muted);max-width:220px;margin-top:16px;font-size:13px;line-height:1.5}.roas-tagline strong{color:var(--green-dark);font-weight:600}.trend-card{margin-bottom:32px;padding:28px 28px 20px}.trend-card h3{font-family:var(--font-serif);margin-bottom:4px;font-size:18px;font-weight:400}.trend-card p.sub{color:var(--muted);margin-bottom:20px;font-size:12px}.chart-wrap{height:280px}.sales-card{margin-bottom:40px;padding:28px 28px 20px;overflow-x:auto}.sales-header-row{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:20px;display:flex}.sales-header-row h3{font-family:var(--font-serif);font-size:18px;font-weight:400}.sales-meta{color:var(--muted);font-size:12px}.sales-meta strong{color:var(--green-dark)}table{border-collapse:collapse;width:100%;min-width:480px}thead th{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;border-bottom:1px solid var(--border);padding:8px 12px;font-size:10px;font-weight:500}tbody tr{border-bottom:1px solid var(--border);transition:background .12s}tbody tr:last-child{border-bottom:none}tbody tr:hover{background:#fafaf9}tbody td{color:var(--text);vertical-align:middle;padding:14px 12px;font-size:14px}.td-name{font-weight:500}.td-price{font-family:var(--font-serif);color:var(--green-dark);font-size:16px;font-weight:700}.pill{letter-spacing:.04em;border-radius:20px;align-items:center;padding:3px 10px;font-size:11px;font-weight:600;display:inline-flex}.pill-installment{background:var(--purple-light);color:var(--purple-dark)}.pill-full{color:var(--muted);background:#f0eeeb}.pill-sold{background:var(--green-light);color:var(--green-dark)}.empty-table{text-align:center;color:var(--muted);padding:48px 20px;font-size:14px}.footer{text-align:center;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:24px 20px 40px;font-size:11px;font-weight:500}.footer .cm-green{color:var(--green-dark)}.section-block{margin-bottom:40px}
