@layer reset{*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{overflow-x:hidden}img{max-width:100%;display:block}button{font:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:none}a{color:inherit;text-decoration:none}input,select,textarea{font:inherit;color:inherit;background:0 0;border:none}}@layer base{body{font-family:var(--font-body);color:var(--color-text);background-color:var(--color-bg);transition:background-color var(--transition-base), color var(--transition-base);font-size:16px;line-height:1.6}h1,h2,h3,h4{font-family:var(--font-display);color:var(--color-purple);font-weight:700;line-height:1.2}h1{text-wrap:balance;font-size:clamp(2rem,3.5vw + 1rem,3.5rem)}h2{text-wrap:balance;font-size:clamp(1.5rem,2.5vw + .5rem,2.25rem)}h3{font-size:clamp(1.2rem,1.5vw + .5rem,1.5rem)}p{text-wrap:pretty}}@layer theme{:root{--font-display:"Playfair Display", Georgia, serif;--font-body:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-8:3rem;--space-10:4rem;--space-12:6rem;--radius-sm:.375rem;--radius-md:.75rem;--radius-lg:1rem;--radius-xl:1.5rem;--radius-full:9999px;--shadow-sm:0 1px 3px #0000000d;--shadow-md:0 4px 6px -1px #0000000d, 0 2px 4px -1px #00000008;--shadow-lg:0 10px 15px -3px #00000014, 0 4px 6px -2px #0000000a;--shadow-xl:0 20px 25px -5px #512d4d14, 0 10px 10px -5px #512d4d08;--transition-fast:.15s ease;--transition-base:.25s cubic-bezier(.4, 0, .2, 1);--transition-slow:.4s cubic-bezier(.4, 0, .2, 1);--color-gold:#d4af37;--color-gold-light:#e5c158;--color-gold-dark:#b8962e;--color-purple:#512d4d;--color-purple-light:#7b4f78;--color-purple-dark:#3d1f3a;--color-accent:#e85a4f;--color-success:#2e8b78;--color-bg:#faf8f5;--color-surface:#fff;--color-surface-subtle:#f6f3ed;--color-text:#2c1810;--color-text-muted:#6b5b5b;--color-border:#eae3d8;--shadow-color:#512d4d14;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}html[data-theme=dark]{--color-gold:#e5c158;--color-gold-light:#f3d782;--color-gold-dark:#cbb046;--color-purple:#e8dcf3;--color-purple-light:#a48fa3;--color-purple-dark:#150814;--color-accent:#ff7060;--color-success:#38c7b0;--color-bg:#110810;--color-surface:#1e111d;--color-surface-subtle:#291827;--color-text:#f3eae2;--color-text-muted:#a895a5;--color-border:#3a2338;--shadow-color:#0006;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root{--scrollbar-track:var(--lightningcss-light,#f6f3ed)var(--lightningcss-dark,#1e111d);--scrollbar-thumb:var(--lightningcss-light,#d4af37)var(--lightningcss-dark,#e5c158);scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);scrollbar-width:thin}@supports not (scrollbar-color:auto){::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg)}::-webkit-scrollbar-thumb{background:var(--color-gold);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-gold-dark)}}}@layer layout{.app-container{grid-template-columns:280px 1fr;min-height:100vh;display:grid}@media (width<=1024px){.app-container{grid-template-rows:auto 1fr;grid-template-columns:1fr}}.sidebar{background-color:var(--color-surface);border-right:1px solid var(--color-border);padding:var(--space-6);transition:background-color var(--transition-base), border-color var(--transition-base);flex-direction:column;justify-content:space-between;height:100vh;display:flex;position:sticky;top:0}@media (width<=1024px){.sidebar{border-right:none;border-bottom:1px solid var(--color-border);height:auto;padding:var(--space-4);align-items:center;gap:var(--space-4);flex-flow:wrap;position:relative;top:auto}}.main-content{padding:var(--space-8);max-height:100vh;overflow-y:auto}@media (width<=768px){.main-content{padding:var(--space-4) var(--space-5);max-height:none}}}@layer components{.logo-area{align-items:center;gap:var(--space-3);margin-bottom:var(--space-8);display:flex}@media (width<=1024px){.logo-area{margin-bottom:0}}.logo-badge{border-radius:var(--radius-md);background:linear-gradient(135deg, var(--color-purple), var(--color-purple-light));width:44px;height:44px;color:var(--color-gold);font-family:var(--font-display);justify-content:center;align-items:center;font-size:1.5rem;font-weight:700;display:flex;box-shadow:0 4px 10px #512d4d26}.logo-text-title{font-family:var(--font-display);color:var(--color-purple);font-size:1.25rem;font-weight:800}.logo-text-sub{color:var(--color-text-muted);letter-spacing:.1em;text-transform:uppercase;font-size:.7rem;font-weight:600}.nav-menu{gap:var(--space-2);flex-direction:column;flex-grow:1;display:flex}@media (width<=1024px){.nav-menu{gap:var(--space-1);flex-direction:row;flex-grow:0}}@media (width<=640px){.nav-menu{justify-content:space-around;width:100%}}.nav-item{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);color:var(--color-text-muted);transition:all var(--transition-fast);text-align:left;font-size:.95rem;font-weight:600;display:flex}.nav-item:hover{background-color:var(--color-surface-subtle);color:var(--color-purple)}.nav-item.active{color:var(--color-purple);box-shadow:inset 3px 0 0 var(--color-gold);background-color:#512d4d14}html[data-theme=dark] .nav-item.active{background-color:#e8dcf31a}@media (width<=1024px){.nav-item{padding:var(--space-2) var(--space-3);font-size:.85rem}.nav-item.active{box-shadow:inset 0 -3px 0 var(--color-gold)}}.sidebar-footer{gap:var(--space-4);border-top:1px solid var(--color-border);padding-top:var(--space-4);flex-direction:column;display:flex}@media (width<=1024px){.sidebar-footer{border-top:none;flex-direction:row;align-items:center;padding-top:0}}.theme-toggle-btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);border:1px solid var(--color-border);transition:all var(--transition-fast);font-size:.85rem;font-weight:500;display:flex}.theme-toggle-btn:hover{background-color:var(--color-surface-subtle)}.dashboard-grid{gap:var(--space-5);margin-top:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(320px,1fr));display:grid}.card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm);transition:transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base)}.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.card-header-flex{margin-bottom:var(--space-3);justify-content:space-between;align-items:flex-start;display:flex}.card-icon{border-radius:var(--radius-md);width:40px;height:40px;color:var(--color-gold-dark);background-color:#d4af371a;place-items:center;display:grid}html[data-theme=dark] .card-icon{color:var(--color-gold);background-color:#e5c1581a}.badge{align-items:center;gap:var(--space-1);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em;padding:.25rem .6rem;font-size:.75rem;font-weight:600;display:inline-flex}.badge-success{color:var(--color-success);background-color:#2e8b781a}.badge-primary{color:var(--color-purple);background-color:#512d4d1a}.badge-warning{color:var(--color-gold-dark);background-color:#d4af371a}html[data-theme=dark] .badge-warning{color:var(--color-gold)}.badge-danger{color:var(--color-accent);background-color:#e85a4f1a}.form-group{margin-bottom:var(--space-4)}.form-label{color:var(--color-text);margin-bottom:var(--space-1);font-size:.85rem;font-weight:600;display:block}.form-input{width:100%;padding:var(--space-3);border:2px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface-subtle);transition:all var(--transition-fast);font-size:.95rem}.form-input:focus{border-color:var(--color-gold);background-color:var(--color-surface);outline:none;box-shadow:0 0 0 3px #d4af3726}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em;transition:all var(--transition-base);font-size:.85rem;font-weight:600;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));color:var(--color-purple-dark);box-shadow:0 4px 10px #d4af3733}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 14px #d4af374d}.btn-outline{border:2px solid var(--color-border);color:var(--color-text)}.btn-outline:hover{background-color:var(--color-surface-subtle);border-color:var(--color-gold)}.calculator-box{background-color:var(--color-surface-subtle);border-radius:var(--radius-lg);padding:var(--space-5);border:1px solid var(--color-border)}.slider-container{margin:var(--space-5) 0}.range-slider{-webkit-appearance:none;border-radius:var(--radius-full);background:var(--color-border);width:100%;height:8px;accent-color:var(--color-gold);outline:none}.calc-metrics{gap:var(--space-4);margin-top:var(--space-5);grid-template-columns:1fr 1fr;display:grid}.metric-box{background-color:var(--color-surface);padding:var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-border);text-align:center}.metric-value{font-family:var(--font-display);color:var(--color-success);font-size:1.8rem;font-weight:700}.roadmap-steps{gap:var(--space-3);margin-top:var(--space-4);flex-direction:column;display:flex}.roadmap-step{align-items:center;gap:var(--space-4);padding:var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-border);background-color:var(--color-surface);transition:all var(--transition-fast);display:flex}.roadmap-step.completed{border-left:4px solid var(--color-success)}.roadmap-step.active{border-left:4px solid var(--color-gold);background-color:var(--color-surface-subtle)}.step-num{border-radius:var(--radius-full);background-color:var(--color-border);place-items:center;width:32px;height:32px;font-size:.85rem;font-weight:700;display:grid}.roadmap-step.completed .step-num{background-color:var(--color-success);color:#fff}.roadmap-step.active .step-num{background-color:var(--color-gold);color:var(--color-purple-dark)}.chat-console{border-radius:var(--radius-lg);border:2px solid var(--color-purple-light);height:350px;box-shadow:var(--shadow-lg);background-color:#110b10;flex-direction:column;display:flex;overflow:hidden}.chat-header{background-color:var(--color-purple-dark);padding:var(--space-3) var(--space-4);align-items:center;gap:var(--space-3);border-bottom:1px solid #ffffff1a;display:flex}.chat-body{padding:var(--space-4);gap:var(--space-3);flex-direction:column;flex-grow:1;display:flex;overflow-y:auto}.chat-message{max-width:80%;padding:var(--space-3);border-radius:var(--radius-md);font-size:.9rem;line-height:1.4}.chat-message.platform{border-left:3px solid var(--color-gold);color:#ede2ec;background-color:#1f121e;align-self:flex-start}.chat-message.customer{border-right:3px solid var(--color-purple-light);color:#f7eff6;background-color:#382436;align-self:flex-end}.chat-time{opacity:.6;margin-top:var(--space-1);text-align:right;font-size:.7rem;display:block}.chat-footer{padding:var(--space-3);gap:var(--space-2);border-top:1px solid #ffffff1a;display:flex}.custom-table-container{width:100%;margin-top:var(--space-4);overflow-x:auto}.custom-table{border-collapse:collapse;text-align:left;width:100%}.custom-table th{background-color:var(--color-surface-subtle);padding:var(--space-3) var(--space-4);color:var(--color-purple);border-bottom:2px solid var(--color-border);font-weight:700}.custom-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);font-size:.9rem}.custom-table tr:hover{background-color:var(--color-surface-subtle)}}@layer utilities{.text-center{text-align:center}.flex-row-between{justify-content:space-between;align-items:center;display:flex}.grid-2{gap:var(--space-5);grid-template-columns:1fr 1fr;display:grid}@media (width<=768px){.grid-2{grid-template-columns:1fr}}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mb-4{margin-bottom:var(--space-4)}.color-gold{color:var(--color-gold)}.color-purple{color:var(--color-purple)}}