@import url(https://api.fontshare.com/v2/css?f[]=clash-display@500,700&display=swap);*{box-sizing:border-box}body,html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Clash Display,sans-serif;margin:0;overflow-x:hidden;padding:0;position:relative;width:100%}body{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}#root{min-height:100vh;width:100%}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}@font-face{font-display:swap;font-family:Clash Display;font-style:normal;font-weight:400;src:url(/static/media/ClashDisplay-Regular.ccc51e2a3c40ce9bca53.otf) format("opentype")}@font-face{font-display:swap;font-family:Clash Display;font-style:normal;font-weight:500;src:url(/static/media/ClashDisplay-Medium.afcc86306d88484344b4.otf) format("opentype")}@font-face{font-display:swap;font-family:Clash Display;font-style:normal;font-weight:600;src:url(/static/media/ClashDisplay-Semibold.4502ac103e57426165ae.otf) format("opentype")}@font-face{font-display:swap;font-family:Clash Display;font-style:normal;font-weight:700;src:url(/static/media/ClashDisplay-Bold.2ac7f694be4905551147.otf) format("opentype")}.price-table-modal-overlay{align-items:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#09090bd1;display:flex;inset:0;justify-content:center;padding:1.5rem;position:fixed;z-index:1000}.price-table-modal-container{background:radial-gradient(circle at top left,#ffe90014,#0000 46%),radial-gradient(circle at bottom right,#ffd5000f,#0000 42%),#111214;border:1px solid #ffe90033;border-radius:28px;box-shadow:0 36px 80px #00000073;color:#f8f8f8;padding:2.75rem;position:relative;width:min(960px,100%)}.price-table-modal-container h1{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;letter-spacing:-.01em;margin:0 0 2.25rem;text-align:center}.price-table-close-button{align-items:center;background:#11100c99;border:1px solid #ffe90066;border-radius:50%;color:#ffe900;cursor:pointer;display:flex;font-size:1.25rem;height:38px;justify-content:center;line-height:1;position:absolute;right:18px;top:18px;transition:transform .15s ease,box-shadow .2s ease;width:38px}.price-table-close-button:hover{box-shadow:0 10px 20px #ffe90026;transform:translateY(-1px)}.price-table-grid{grid-gap:1.75rem;display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.price-card{background:hsla(0,0%,100%,.035);border:1px solid #ffe9001f;border-radius:22px;box-shadow:inset 0 1px 0 #ffffff14;display:flex;flex-direction:column;min-height:320px;padding:2rem;position:relative;transition:transform .2s ease,box-shadow .3s ease,border-color .2s ease}.price-card:hover{border-color:#ffe90059;box-shadow:0 25px 50px #00000059;transform:translateY(-6px)}.price-card--featured{background:linear-gradient(155deg,#ffe9001f,#14120ceb 36%,#0c0c0cf0);border:1px solid #ffe90099;box-shadow:0 25px 60px #ffe9002e}.price-card--current{border-color:#6366f166;box-shadow:inset 0 0 0 1px #6366f14d}.price-card__badge{background:#ffe900;border-radius:999px;box-shadow:0 12px 22px #ffe90059;color:#0f0f0f;font-size:.72rem;font-weight:700;letter-spacing:.08em;padding:6px 14px;position:absolute;right:24px;text-transform:uppercase;top:-12px}.price-card__header{align-items:baseline;display:flex;gap:1rem;justify-content:space-between;margin-bottom:1.5rem}.price-card__title{font-size:1.5rem;font-weight:600;letter-spacing:-.01em;margin:0}.price-card__price{background:#ffe9001a;border:1px solid #ffe90059;border-radius:999px;color:#ffe900;font-size:1rem;font-weight:600;padding:.35rem .85rem;white-space:nowrap}.price-card__features{grid-gap:.65rem;color:#ffffffd9;display:grid;flex:1 1;gap:.65rem;list-style:none;margin:0 0 1.75rem;padding:0}.price-card__feature{align-items:center;display:flex;font-size:.95rem;gap:.5rem}.price-card__feature:before{color:#ffe900;content:"✓";font-size:.95rem;font-weight:700}.price-card__cta{background:#ffe900;border:none;border-radius:12px;color:#0f0f0f;cursor:pointer;font-size:1rem;font-weight:700;padding:.85rem 1.2rem;transition:transform .2s ease,box-shadow .2s ease}.price-card__cta:hover{box-shadow:0 12px 24px #ffe90059;transform:translateY(-2px)}.price-card__cta:active{box-shadow:none;transform:translateY(0)}.price-card__cta:disabled{background:#ffffff2e;box-shadow:none;color:#ffffffa6;cursor:default;pointer-events:none;transform:none}@media (max-width:720px){.price-table-modal-container{padding:2.25rem 1.75rem}.price-card{padding:1.75rem}.price-card__header{align-items:flex-start;flex-direction:column}.price-card__badge{right:16px}}.dashboard-header{background-color:initial;position:-webkit-sticky;position:sticky;top:0;z-index:1000}.desktop-header-layout{align-items:center;display:flex;justify-content:space-between;padding:1.5rem 5rem}.mobile-header-layout{display:none}@media (max-width:768px){.desktop-header-layout{display:none}.mobile-header-layout{align-items:center;display:flex;gap:1rem;justify-content:space-between;padding:1rem 1.5rem}}@media (max-width:480px){.mobile-header-layout{gap:.5rem;padding:.75rem 1rem}.mobile-header-logo{height:32px;width:auto}.create-player-icon-btn{font-size:20px;height:40px;width:40px}.analytics-time-filter{border-radius:8px;font-size:12px;padding:6px 24px 6px 8px}.search-icon-btn{height:36px;width:36px}.search-bar-expanded{background:#fff;border:2px solid #000;border-radius:25px;min-width:200px;padding:4px 9px}.search-input{font-size:.85rem;padding:4px 0}}.mobile-header-logo{height:40px;width:auto}.mobile-header-controls{align-items:center;display:flex;gap:1rem}.header-logo{height:40px}.header-controls,.header-placeholder{flex:1 1}.header-controls{align-items:center;display:flex;justify-content:flex-end}.analytics-time-filter{-webkit-appearance:none;appearance:none;background-color:var(--side-panel-bg);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;background-size:16px;border:1px solid var(--border-color);border-radius:12px;box-shadow:0 2px 8px #0000000d;color:var(--text-black);cursor:pointer;font-family:var(--font-inter);font-size:14px;font-weight:500;outline:none;padding:8px 32px 8px 12px;transition:all .2s ease}.analytics-time-filter:hover{border-color:#ffe900;border-color:var(--butter-yellow);box-shadow:0 4px 12px #00000014}.analytics-time-filter:focus{border-color:#ffe900;border-color:var(--butter-yellow);box-shadow:0 0 0 3px #ffe9001a}.create-player-icon-btn{align-items:center;color:#1a1a1a;color:var(--rich-black);display:flex;font-size:24px;font-weight:700;justify-content:center}.create-player-icon-btn:before{content:"+"}.create-player-icon-btn:hover{background-color:#ffce00;background-color:var(--golden-crust);box-shadow:0 6px 20px #00000026;transform:scale(1.05)}.create-player-icon-btn:active{box-shadow:0 2px 8px #0003;transform:scale(.95)}.logout-icon-btn{align-items:center;background:#0000;border:none;border-radius:50%;cursor:pointer;display:flex;height:40px;justify-content:center;padding:8px;position:relative;transition:all .3s cubic-bezier(.25,.8,.25,1);width:40px}.logout-icon-btn:hover{background:#0000001a;transform:scale(1.05)}.logout-icon-btn:active{transform:scale(.95)}.logout-icon{height:20px;transition:all .2s ease;width:20px}.search-icon-btn{align-items:center;background:#ffe900;background:var(--butter-yellow);border:none;border-radius:50%;box-shadow:0 2px 8px #0000001a;color:#1a1a1a;color:var(--rich-black);cursor:pointer;display:flex;height:44px;justify-content:center;margin-right:12px;transition:all .2s ease;width:44px}.search-icon-btn:hover{background:#ffce00;background:var(--golden-crust);box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}.search-bar-expanded{align-items:center;animation:expandSearch .3s cubic-bezier(.25,.8,.25,1);background:#fff;border:2px solid #000;border-radius:20px;box-shadow:0 2px 8px #0000001a;display:flex;margin-right:12px;min-width:280px;padding:4px 10px}@keyframes expandSearch{0%{opacity:0;transform:translateX(20px);width:44px}to{opacity:1;transform:translateX(0);width:280px}}.search-input{background:#0000;border:none;color:#1a1a1a;color:var(--rich-black);flex:1 1;font-family:var(--font-inter),sans-serif;font-size:.95rem;font-weight:500;outline:none;padding:8px 0}.search-input::placeholder{color:#888;font-weight:400;opacity:.8}.auth-container{align-items:center;background-color:var(--churned-cream);background-image:url(/static/media/sound.5d1946dd35b432ba430e.png);display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:20px}.artwork-section,.auth-container{background-position:50%;background-repeat:no-repeat;background-size:cover}.artwork-section{background-image:url(/static/media/wave.0c9afc8505970311ddf4.png);border-radius:30px 0 0 30px;flex:1 1}.login-actions{align-items:center;display:flex;flex-direction:column;width:100%}.forgot-password-link{margin-top:10px;text-align:center;width:100%}.login-side{justify-content:center}.login-card,.login-side{align-items:center;display:flex;flex-direction:column;padding:20px}.login-card{background-color:#ffffffe6;border-bottom:2px solid #ffd600;border-radius:16px;box-shadow:0 4px 8px #0000001a;max-width:520px;min-width:400px}.auth-container button,.auth-container button.google-button,.auth-container input[type=email],.auth-container input[type=password],.auth-container input[type=text]{border:1px solid #ccc;border-radius:5px;box-sizing:border-box;padding:10px;width:100%}.auth-container button,.auth-container button.google-button{background-color:#202021;color:#fff;cursor:pointer;margin:10px 0}.success-message{background-color:#d4edda;border:1px solid #c3e6cb;border-radius:5px;color:#155724;font-size:14px;margin:10px 0;padding:10px}.auth-container input[type=checkbox]{margin-right:10px;vertical-align:middle;width:auto}.auth-container label{display:block;margin:5px 0}.auth-label{width:100%}.google-button{align-items:center;background-color:#fff;color:#000;display:flex;justify-content:center}.google-logo{margin-right:10px;max-height:20px}.error-message{color:red;margin:10px 0}.or-divider{margin:10px 0;text-align:center}.terms-checkbox{align-items:center;display:flex;margin:10px 0}.terms-checkbox input[type=checkbox]{margin-right:5px}.terms-checkbox span{vertical-align:middle}@media (max-width:768px){.auth-container{flex-direction:column}.artwork-section{display:none}}.auth-container a{color:#141e4f;cursor:pointer;text-decoration:none}.input-login{width:100%}.login-button{background-color:#ffd600;box-shadow:0 3px 3px #00000040;color:#000;font-family:Clash Display,sans-serif}.logo{width:50%}.auth-title{font-family:Clash Display,sans-serif;font-family:var(--font-clash,"Clash Display",sans-serif);font-size:28px;font-weight:500;margin:0 0 8px}.auth-subtitle,.auth-title{text-align:center;width:100%}.auth-subtitle{color:#555;margin:0 0 12px}.login-card.is-signup .terms-checkbox{margin-top:6px}.auth-info-slider{align-items:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:#ffffff59;border:1px solid #fff6;border-radius:16px;box-shadow:0 10px 30px #00000014;display:flex;margin-bottom:12px;max-width:520px;min-height:56px;overflow:hidden;padding:12px 16px;width:100%}.auth-info-slider .info-slide{animation:slideFade .5s ease;color:#1a1a1a;font-family:Inter,sans-serif;font-family:var(--font-inter,"Inter",sans-serif);font-size:14px;text-align:center;width:100%}@keyframes slideFade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.signup-grid{grid-gap:12px 16px;display:grid;gap:12px 16px;grid-template-columns:1fr 1fr;padding-bottom:10px;width:100%}.signup-grid .form-field{display:flex;flex-direction:column}@media (max-width:600px){.signup-grid{grid-template-columns:1fr}}@media (max-width:480px){.auth-container,.login-side{padding:12px}.auth-info-slider{margin-bottom:10px;max-width:100%;padding:10px 12px}.login-card{border-radius:14px;min-width:0;padding:16px;width:100%}}.skeleton-element{animation:skeleton-loading 1.5s ease-in-out infinite;background-color:#e0e0e0;border-radius:4px}@keyframes skeleton-loading{0%{background-color:#e0e0e0}50%{background-color:#f5f5f5}to{background-color:#e0e0e0}}.card{background:#fff;border:none;box-shadow:0 4px 12px #00000014;overflow:hidden;padding:1.25rem;position:relative;transition:transform .2s ease,box-shadow .2s ease}.card:before{animation:shimmerGlow 2.5s ease-in-out infinite;background:linear-gradient(90deg,#ffe900,#ffce00,#ffb800);content:"";height:3px;left:0;position:absolute;right:0;top:0}@keyframes shimmerGlow{0%,to{opacity:.5}50%{opacity:1}}.card:hover{box-shadow:0 8px 20px #0000001f;transform:translateY(-1px)}@media (min-width:768px){.card{border-radius:20px;padding:1.5rem}}@media (min-width:1024px){.card{padding:2rem}}.plays-overview-card-skeleton{margin-bottom:1.5rem}.overview-header-skeleton{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;margin-bottom:1.5rem}.overview-stats-skeleton{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}@media (min-width:768px){.overview-stats-skeleton{display:flex;gap:2rem}}.stat-item-skeleton{background:#ffe9000d;border:1px solid #ffe9001a;border-radius:12px;display:flex;flex-direction:column;gap:.5rem;padding:.75rem}.duration-analytics-card-skeleton .card-body-skeleton{display:flex;flex-direction:column;gap:1.5rem}@media (min-width:768px){.duration-analytics-card-skeleton .card-body-skeleton{align-items:center;flex-direction:row;gap:2rem}}.duration-header-skeleton{margin-bottom:1rem}.duration-stats-skeleton{display:flex;flex-direction:column;gap:1rem;min-width:200px}.leaderboard-header-skeleton{margin-bottom:1.25rem}.leaderboard-list-skeleton{display:flex;flex-direction:column;gap:1rem}.leaderboard-item-skeleton{align-items:center;background:#ffe90008;border-radius:12px;display:flex;gap:.75rem;padding:.75rem;transition:background-color .2s ease}.leaderboard-item-skeleton:hover{background:#ffe90014}@media (max-width:767px){.plays-overview-card-skeleton{margin-bottom:1rem}.overview-header-skeleton{align-items:stretch;flex-direction:column;text-align:center}.stat-item-skeleton{padding:1rem;text-align:center}.leaderboard-item-skeleton{padding:1rem}}.dashboard-container{background-color:#fdf6e3;background-color:var(--churned-cream);box-sizing:border-box;display:flex;flex-direction:column;max-width:100vw;overflow-x:hidden;padding:20px;width:100%}.dashboard-main-content{grid-gap:24px;display:grid;gap:24px;grid-template-columns:1fr 1fr;margin:0 auto;max-width:1200px;width:100%}.dashboard-left-panel{grid-gap:24px;display:grid;gap:24px;grid-auto-rows:-webkit-min-content;grid-auto-rows:min-content}.dashboard-right-panel .card{height:100%}.card{background-color:#fff;background-color:var(--side-panel-bg);border-radius:16px;border-radius:var(--border-radius);box-shadow:0 4px 12px #0000000d;box-sizing:border-box;padding:24px;width:100%}@media (max-width:1024px){.dashboard-main-content{grid-template-columns:1fr;max-width:800px}.dashboard-container{padding:16px}}@media (max-width:768px){.dashboard-container{padding:12px}.dashboard-main-content{gap:16px}.card{padding:16px}}@media (max-width:480px){.dashboard-container{padding:8px}.dashboard-main-content{gap:12px}.card{padding:12px}}.plays-overview-wrapper{background:#0e0e0e;border-radius:20px;box-shadow:0 4px 20px #0000001a;box-sizing:border-box;color:#fffcf2;min-height:280px;padding:24px;width:100%}.plays-overview-header{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:24px}.plays-overview-title-section{display:flex;flex-direction:column;gap:4px}.plays-overview-title{font-family:"Clash Display",var(--font-inter);font-size:1.1rem;font-weight:700;letter-spacing:.5px;margin:0;text-transform:uppercase}.plays-overview-subtitle{color:#e5e5e5;font-family:var(--font-inter);font-size:.8rem;margin:0;opacity:.7}.plays-overview-filter-container{min-width:80px}.plays-overview-filter .MuiOutlinedInput-root{background:#ffffff0d!important;border-radius:8px!important;color:#fffcf2!important;height:32px;min-width:85px;transition:all .2s ease!important}.plays-overview-filter .MuiOutlinedInput-root:hover{background:#ffffff14!important}.plays-overview-filter .MuiOutlinedInput-notchedOutline{border:none!important}.plays-overview-filter .MuiSelect-select{color:#fffcf2!important;font-family:"Clash Display",var(--font-inter)!important;font-size:.75rem!important;font-weight:600!important;letter-spacing:.5px;padding:8px 12px!important;text-transform:uppercase!important}.plays-overview-filter .MuiSelect-icon{color:#fffcf2!important;opacity:.7}.MuiPaper-root.MuiMenu-paper{background:#1a1a1a!important;border:1px solid #ffffff1a!important;border-radius:8px!important;box-shadow:0 4px 20px #0006!important;margin-top:4px}.MuiMenuItem-root{color:#e5e5e5!important;font-family:"Clash Display",var(--font-inter)!important;font-size:.75rem!important;font-weight:500!important;letter-spacing:.5px;padding:12px 16px!important;text-transform:uppercase!important;transition:all .15s ease!important}.MuiMenuItem-root:hover{background:#ffffff14!important;color:#fffcf2!important}.MuiMenuItem-root.Mui-selected{background:#ffe9001a!important;color:#ffe900!important}.MuiMenuItem-root.Mui-selected:hover{background:#ffe90026!important}.plays-overview-content{grid-gap:32px;align-items:center;display:grid;gap:32px;grid-template-columns:1fr 1fr}.plays-overview-metrics{display:flex;flex-direction:column;gap:20px}.plays-overview-main-stat{display:flex;flex-direction:column;gap:8px}.plays-overview-stat-label{color:#e5e5e5;font-family:var(--font-inter);font-size:.9rem;opacity:.8}.plays-overview-stat-value{color:#fffcf2;font-family:"Clash Display",var(--font-inter);font-size:3rem;font-weight:700;letter-spacing:-.5px;line-height:1}.plays-overview-secondary-stats{display:flex;gap:24px}.plays-overview-stat-item{display:flex;flex-direction:column;gap:4px}.plays-overview-stat-number{color:#ffe900;font-family:"Clash Display",var(--font-inter);font-size:1.4rem;font-weight:600}.plays-overview-stat-text{color:#e5e5e5;font-family:var(--font-inter);font-size:.75rem;letter-spacing:.5px;opacity:.7;text-transform:uppercase}.plays-overview-chart{align-items:flex-end;display:flex;justify-content:center}.plays-overview-bars{align-items:flex-end;display:flex;gap:16px;height:120px}.plays-overview-bar-group{align-items:center;display:flex;flex-direction:column;gap:8px}.plays-overview-bar-container{align-items:flex-end;display:flex;height:100px}.plays-overview-bar{background:linear-gradient(180deg,#ffe900,#ffce00);border-radius:8px;cursor:pointer;position:relative;transition:all .3s ease;width:32px}.plays-overview-bar:hover{box-shadow:0 4px 12px #ffe9004d;transform:translateY(-2px)}.plays-overview-bar-value{background:#000c;border-radius:4px;color:#ffe900;font-family:var(--font-inter);font-size:.7rem;font-weight:600;left:50%;opacity:0;padding:2px 6px;pointer-events:none;position:absolute;top:-24px;transform:translateX(-50%);transition:opacity .2s ease;white-space:nowrap}.plays-overview-bar:hover .plays-overview-bar-value{opacity:1}.plays-overview-bar-label{color:#e5e5e5;font-family:var(--font-inter);font-size:.75rem;letter-spacing:.5px;opacity:.8;text-transform:uppercase}@media (max-width:768px){.plays-overview-content{gap:24px;grid-template-columns:1fr}.plays-overview-stat-value{font-size:2.2rem}.plays-overview-secondary-stats{justify-content:space-between}.plays-overview-bars{height:80px}.plays-overview-bar-container{height:60px}}@media (max-width:480px){.plays-overview-wrapper{padding:20px}.plays-overview-header{align-items:flex-start;flex-direction:column;gap:16px}.plays-overview-stat-value{font-size:1.8rem}.plays-overview-secondary-stats{flex-direction:column;gap:12px}}.duration-analytics-card{background-color:#f0fdf4;color:#1a1a1a;min-height:300px}.duration-analytics-card .duration-header{align-items:center;display:flex;justify-content:space-between}.duration-analytics-card h3{font-family:var(--font-inter);font-size:1.1rem;font-weight:600}.duration-analytics-card .card-actions span{cursor:pointer;font-weight:700;margin-left:8px}.duration-analytics-card .card-body{text-align:center}.duration-chart{height:auto;margin:0;padding:0;width:100%}.duration-stats{display:flex;justify-content:space-around;margin-top:8px}.stat-item p{color:#7a7a7a;font-family:var(--font-inter);margin-bottom:4px}.stat-item h4{font-family:var(--font-clash);font-size:1.2rem;font-weight:600;margin:0}@media (max-width:768px){.duration-chart{font-size:.75rem;height:min(100px,25vw);margin:0 auto 12px;width:min(100px,25vw)}.stat-item h4{font-size:1rem}}@media (max-width:480px){.duration-chart{font-size:.7rem;height:min(80px,20vw);margin:0 auto 8px;width:min(80px,20vw)}.stat-item h4{font-size:.9rem}}.listening-time-chart{height:200px;width:100%}.chart-placeholder{align-items:center;color:#666;display:flex;font-style:italic;height:200px;justify-content:center}.leaderboard-card{background-color:var(--side-panel-bg)}.leaderboard-card .card-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.leaderboard-card h3{font-family:Clash Display,sans-serif;font-size:1.1rem;font-weight:600;margin:0}.view-mode-switch{background:#fff;border:2px solid #e5e5e5;border-radius:100px;box-shadow:0 4px 12px #0000000d;display:grid;grid-template-columns:1fr 1fr;height:38px;padding:2px;place-items:center;position:relative;width:200px}.view-mode-switch:before{background:#000;border-radius:100px;content:"";height:calc(100% - 4px);left:2px;position:absolute;top:2px;transition:transform .22s cubic-bezier(0,0,.2,1);width:calc(50% - 2px);z-index:1}.view-mode-switch:has([data-mode=personal]:checked):before{transform:translateX(0)}.view-mode-switch:has([data-mode=worldwide]:checked):before{transform:translateX(100%)}.mode-input{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.mode-label{color:#b3b3b3;cursor:pointer;display:grid;font-family:Clash Display,sans-serif;font-size:.75rem;font-weight:500;height:100%;place-items:center;position:relative;text-transform:uppercase;transition:color .22s cubic-bezier(0,0,.2,1);width:100%;z-index:2}.mode-input:checked+.mode-label{color:#fff}.leaderboard-list{list-style:none;margin:0;padding:0}.leaderboard-item{align-items:center;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding:12px 0}.leaderboard-item:last-child{border-bottom:none}.player-info{align-items:center;display:flex;flex:1 1}.player-rank{color:var(--rich-black);font-family:Clash Display,sans-serif;font-size:1.1rem;font-weight:700;margin-right:12px;min-width:32px}.player-details{display:flex;flex:1 1;flex-direction:column}.player-name{font-family:Clash Display,sans-serif;font-weight:500;margin-bottom:4px}.player-meta{display:flex;flex-direction:column;gap:2px}.last-updated{color:var(--text-light)}.last-updated,.page-url{font-family:Clash Display,sans-serif;font-size:.75rem}.page-url{color:var(--butter-yellow);font-weight:500;max-width:200px;overflow:hidden;text-decoration:none;text-overflow:ellipsis;transition:all .2s ease;white-space:nowrap}.page-url:hover{color:var(--golden-crust);text-decoration:underline;text-underline-offset:2px}.player-plays{color:var(--text-light);font-family:Clash Display,sans-serif;font-size:.9rem;font-weight:600}.player-avatar{font-size:1.5rem;margin-right:16px}.loading-state{align-items:center;border:none;display:flex;justify-content:center;padding:30px 20px}.no-data{color:var(--text-light);font-family:Clash Display,sans-serif;font-style:italic;padding:20px;text-align:center}.bottom-nav{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0b09091a;border:1px solid #fff3;border-radius:50px;bottom:20px;box-shadow:0 4px 30px #0000001a;display:flex;gap:1rem;left:50%;padding:.75rem 1rem;position:fixed;transform:translateX(-50%);z-index:1000}.nav-item{align-items:center;border-radius:55px;color:#333;display:flex;flex-direction:column;font-size:12px;gap:4px;padding:.5rem 1rem;text-decoration:none;transition:background-color .3s ease,color .3s ease}.nav-item svg{font-size:20px}.nav-item.active{color:#333}.nav-item.active,.nav-item:hover{background-color:#ffe90080}@media (max-width:768px){.bottom-nav{bottom:16px;gap:.5rem;padding:.5rem .75rem}.nav-item{font-size:11px;min-height:44px;min-width:44px;padding:.5rem .75rem}.nav-item svg{font-size:18px}}@media (max-width:480px){.bottom-nav{bottom:12px;gap:0;justify-content:space-around;left:12px;padding:.5rem;right:12px;transform:none;width:calc(100% - 24px)}.nav-item{flex:1 1;font-size:10px;gap:2px;padding:.5rem}.nav-item span{font-size:10px;line-height:1}.nav-item svg{font-size:16px}}.upgrade-prompt-container{background-color:#f8f9fa;border-radius:8px;box-shadow:0 4px 6px #0000001a;margin:2rem auto;max-width:600px;padding:2rem;text-align:center}.upgrade-prompt-container h2{color:#333;font-size:1.8rem;margin-bottom:1rem}.upgrade-prompt-container p{color:#666;font-size:1rem;line-height:1.5;margin-bottom:1.5rem}.feature-list{margin-bottom:1.5rem;text-align:left}.feature-list h3{color:#333;font-size:1.2rem;margin-bottom:.5rem}.feature-list ul{list-style-type:none;padding-left:0}.feature-list li{color:#555;font-size:.9rem;margin-bottom:.5rem;padding-left:1.5rem;position:relative}.feature-list li:before{color:#28a745;content:"✓";left:0;position:absolute}.pricing-info{background-color:#e9ecef;border-radius:4px;margin-bottom:1.5rem;padding:1rem}.pricing-info .price{color:#28a745;font-size:1.2rem;font-weight:700}.upgrade-button{background-color:#000;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:1rem;padding:.75rem 1.5rem;transition:background-color .3s ease}.upgrade-button:hover{background-color:#0056b3}.dashboard{background-color:#fdf6e3;display:flex;flex-direction:column;height:100vh;overflow:hidden}.dashboard-content{box-sizing:border-box;display:flex;flex:1 1;flex-direction:column;overflow:hidden}.modal-overlay-playground{align-items:center!important;animation:fadeInModal .2s ease-out!important;-webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important;background:#000c!important;display:flex!important;height:100vh!important;justify-content:center!important;left:0!important;position:fixed!important;top:0!important;width:100vw!important;z-index:999999!important}.text-modal-container-playground{animation:slideUpModal .3s ease-out!important;background:#fff!important;border-radius:12px!important;box-shadow:0 25px 50px #00000040,0 10px 20px #00000026!important;max-height:70vh!important;max-width:500px!important;overflow:hidden!important;position:relative!important;width:100%!important}.text-modal-header-playground{align-items:center;background:var(--white);border-bottom:1px solid #00000014;display:flex;justify-content:space-between;padding:24px 28px 20px}.text-modal-header-playground h3{align-items:center;color:#1a1a1a;color:var(--rich-black,#1a1a1a);display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-family:var(--font-clash,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);font-size:1.5rem;font-weight:600;gap:10px;margin:0}.text-modal-header-playground h3:before{content:"✨";font-size:1.25rem}.close-modal-btn-playground{align-items:center;background:#0000000d;border:none;border-radius:8px;color:#666;color:var(--graphite,#666);cursor:pointer;display:flex;font-size:16px;font-weight:500;height:32px;justify-content:center;transition:all .2s ease;width:32px}.close-modal-btn-playground:hover{background:#ff44441a;color:#f44;transform:scale(1.05)}.text-modal-content-playground{background:#fff;background:var(--white,#fff);padding:20px}.text-input-section-playground{display:flex;flex-direction:column;gap:16px}.text-input-header-playground{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:12px}.input-label-playground{display:flex;flex-direction:column;gap:4px}.input-title-playground{color:#1a1a1a;color:var(--rich-black,#1a1a1a);font-size:14px;font-weight:600}.input-label-playground span:last-child,.input-title-playground{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-family:var(--font-inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif)}.input-label-playground span:last-child{color:#666;color:var(--graphite,#666);font-size:12px}.char-count-playground{font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-family:var(--font-mono,"SF Mono",Monaco,"Cascadia Code","Roboto Mono",Consolas,"Courier New",monospace)}.char-limit-playground{color:#0006;font-weight:400}.text-modal-textarea-playground{background:#00000003;border:1.5px solid #0000001a;border-radius:12px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-family:var(--font-inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);font-size:14px;line-height:1.5;min-height:200px;padding:16px;resize:vertical;transition:all .2s ease}.text-modal-textarea-playground:focus{border-color:#ffe900;border-color:var(--butter-yellow,#ffe900);box-shadow:inset 0 1px 3px #0000000d,0 0 0 3px #ffe9001a;outline:none}.text-modal-textarea-playground::placeholder{color:#0006;line-height:1.4}.text-modal-footer-playground{background:#00000005;border-top:1px solid #0000000f;display:flex;gap:12px;justify-content:flex-end;padding:5px 18px}.modal-btn-playground{align-items:center;border:1px solid #0000;border-radius:8px;cursor:pointer;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-family:var(--font-inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);font-size:14px;font-weight:500;gap:8px;justify-content:center;padding:12px 24px;transition:all .2s ease}.modal-btn-secondary-playground{background:#fff;background:var(--white,#fff);border-color:#00000026;color:#666;color:var(--graphite,#666)}.modal-btn-secondary-playground:hover{background:#0000000d;border-color:#00000040}.modal-btn-primary-playground{background:#ffe900;background:var(--butter-yellow,#ffe900);border-color:#ffe900;border-color:var(--butter-yellow,#ffe900);color:#1a1a1a;color:var(--rich-black,#1a1a1a);font-weight:600}.modal-btn-primary-playground:hover:not(:disabled){background:#e6d200;background:var(--golden-crust,#e6d200);border-color:#e6d200;border-color:var(--golden-crust,#e6d200);box-shadow:0 4px 12px #ffe90040;transform:translateY(-1px)}.modal-btn-primary-playground:disabled{box-shadow:none;cursor:not-allowed;opacity:.4;transform:none}@keyframes fadeInModal{0%{opacity:0}to{opacity:1}}@keyframes slideUpModal{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width:640px){.text-modal-container-playground{margin:16px!important;max-height:calc(100vh - 32px)!important;max-width:calc(100vw - 32px)!important}.text-modal-content-playground,.text-modal-footer-playground,.text-modal-header-playground{padding-left:20px;padding-right:20px}.text-modal-textarea-playground{min-height:150px}}.action-buttons-container{display:flex;gap:12px;justify-content:flex-start;padding:0}.action-btn{align-items:center;border:none;border-radius:40px;cursor:pointer;display:flex;font-family:var(--font-inter);font-size:14px;font-weight:600;height:48px;justify-content:center;min-width:120px;padding:12px 24px;transition:all .2s ease}.action-btn:disabled{cursor:not-allowed;opacity:.6}.cancel-btn{background:#6666661a;border:1px solid #6663;color:var(--graphite)}.cancel-btn:hover:not(:disabled){background:#66666626;border-color:#6666664d}.save-btn{background:var(--butter-yellow);border:1px solid var(--golden-crust);color:var(--rich-black)}.save-btn:hover:not(:disabled){background:var(--golden-crust);box-shadow:0 4px 16px #ffce004d;transform:translateY(-1px)}.save-btn.disabled-free{background:#6666661a;border:1px solid #6663;color:var(--graphite);opacity:.8}.save-btn.disabled-free:hover{background:#ffce001a;border-color:var(--butter-yellow);box-shadow:none;cursor:pointer;transform:none}.generate-btn{background:linear-gradient(135deg,var(--butter-yellow),var(--golden-crust));border:1px solid var(--golden-crust);color:var(--rich-black);font-weight:700;overflow:hidden;position:relative}.generate-btn:hover:not(:disabled){box-shadow:0 8px 24px #ffce0066;transform:translateY(-2px)}.generate-btn:before{background:linear-gradient(90deg,#0000,#ffffff4d,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.generate-btn:hover:not(:disabled):before{left:100%}@media (max-width:768px){.action-buttons-container{flex-wrap:wrap;gap:8px}.action-btn{font-size:12px;height:44px;min-width:100px;padding:10px 16px}}.action-btn:disabled{box-shadow:none!important;transform:none!important}.audio-content-input-group-playground{align-items:center;background:#fff;background:var(--white,#fff);border:2px solid #e5e5e5;border:2px solid var(--soft-gray,#e5e5e5);border-radius:12px;cursor:pointer;display:flex;justify-content:space-between;overflow:hidden;padding:16px;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1)}.audio-content-input-group-playground:before{background:linear-gradient(135deg,#ffe9001a,#ffce000d);bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .25s ease;z-index:1}.audio-content-input-group-playground:hover{border-color:#ffe900;border-color:var(--butter-yellow,#ffe900);box-shadow:0 8px 25px #ffe90026;transform:translateY(-2px)}.audio-content-input-group-playground:hover:before{opacity:1}.audio-content-preview-playground{flex:1 1;min-height:24px;position:relative;z-index:2}.audio-text-preview-playground{color:#1a1a1a;color:var(--rich-black,#1a1a1a);display:block;font-weight:400;line-height:1.5}.audio-placeholder-playground,.audio-text-preview-playground{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-family:var(--font-inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);font-size:15px}.audio-placeholder-playground{align-items:center;color:#666;color:var(--graphite,#666);display:flex;font-style:italic;gap:8px;opacity:.65}.audio-placeholder-playground:before{content:"✍️";font-size:16px}.audio-content-info-playground{margin-left:16px;position:relative;z-index:2}.char-count-playground{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fffc;border:1px solid #00000014;border-radius:6px;color:#666;color:var(--graphite,#666);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-family:var(--font-inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);font-size:12px;font-weight:500;padding:4px 8px}.char-limit-playground{opacity:.6}.section-title-preset{align-items:center;color:#1a1a1a;color:var(--rich-black,#1a1a1a);display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-family:var(--font-inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);font-size:1.1rem;font-weight:600;gap:8px;justify-content:space-between;margin-bottom:16px}.input-mode-switch-playground{background:#fff;border:2px solid #e5e5e5;border-radius:100px;box-shadow:0 4px 12px #0000000d;display:grid;grid-template-columns:1fr 1fr;height:32px;padding:2px;place-items:center;position:relative;width:160px}.input-mode-switch-playground:before{background:#000;border-radius:100px;content:"";height:calc(100% - 4px);left:2px;position:absolute;top:2px;transition:transform .22s cubic-bezier(0,0,.2,1);width:calc(50% - 2px);z-index:1}.input-mode-switch-playground:has([data-mode=generate]:checked):before{transform:translateX(0)}.input-mode-switch-playground:has([data-mode=upload]:checked):before{transform:translateX(100%)}.mode-input-playground{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.mode-label-playground{color:#b3b3b3;cursor:pointer;display:grid;font-family:Clash Display,sans-serif;font-size:.75rem;font-weight:500;height:100%;place-items:center;position:relative;text-transform:uppercase;transition:color .22s cubic-bezier(0,0,.2,1);width:100%;z-index:2}.mode-input-playground:checked+.mode-label-playground{color:#fff}.audio-history-section-playground{background:#00000005;border:1px solid #00000014;border-radius:12px;margin-bottom:20px;padding:16px}.audio-history-title-playground{color:#1a1a1a;color:var(--rich-black,#1a1a1a);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-family:var(--font-inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);font-size:14px;font-weight:600;margin:0 0 12px}.audio-history-list-playground{display:flex;flex-direction:column;gap:8px}.audio-history-item-playground{align-items:center;background:#fff;background:var(--white,#fff);border:1px solid #00000014;border-radius:8px;display:flex;justify-content:space-between;padding:12px;transition:all .2s ease}.audio-history-item-playground.active{background:#ffe9000d;border-color:#ffe900;border-color:var(--butter-yellow,#ffe900)}.audio-history-item-playground:hover{border-color:#00000026;transform:translateY(-1px)}.audio-item-info-playground{display:flex;flex:1 1;flex-direction:column;gap:4px}.audio-item-title-playground{color:#1a1a1a;color:var(--rich-black,#1a1a1a);font-size:13px;font-weight:500;line-height:1.3}.audio-item-title-playground,.audio-item-type-playground{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-family:var(--font-inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif)}.audio-item-type-playground{color:#666;color:var(--graphite,#666);font-size:11px;font-weight:400}.audio-item-actions-playground{align-items:center;display:flex;gap:8px}.audio-action-btn-playground{background:#fff;background:var(--white,#fff);border:1px solid #00000026;border-radius:6px;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-family:var(--font-inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);font-size:11px;font-weight:500;padding:6px 12px;transition:all .2s ease}.audio-action-btn-playground:hover{border-color:#00000040;transform:translateY(-1px)}.audio-action-btn-playground.play-btn{padding:6px;text-align:center;width:28px}.audio-action-btn-playground.use-btn{background:#ffe900;background:var(--butter-yellow,#ffe900);border-color:#ffe900;border-color:var(--butter-yellow,#ffe900);color:#1a1a1a;color:var(--rich-black,#1a1a1a);font-weight:600}.active-badge-playground{background:#10b9811a;border-radius:4px;color:#10b981;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-family:var(--font-inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);font-size:11px;font-weight:600;padding:4px 8px}.file-upload-section-playground{margin-top:16px}.file-input-hidden-playground{display:none}.file-upload-area-playground{align-items:center;background:#00000003;border:2px dashed #00000026;border-radius:12px;cursor:pointer;display:flex;justify-content:center;min-height:80px;padding:24px;transition:all .3s ease}.file-upload-area-playground:hover{background:#ffe9000d}.file-upload-area-playground.drag-over,.file-upload-area-playground:hover{border-color:#ffe900;border-color:var(--butter-yellow,#ffe900);transform:translateY(-2px)}.file-upload-area-playground.drag-over{background:#ffe9001a;border-style:solid;box-shadow:0 8px 25px #ffe90033}.upload-placeholder-playground{align-items:center;display:flex;flex-direction:column;gap:8px;text-align:center}.upload-icon-playground{font-size:24px}.upload-text-playground{color:#1a1a1a;color:var(--rich-black,#1a1a1a);font-size:14px;font-weight:500}.upload-hint-playground,.upload-text-playground{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-family:var(--font-inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif)}.upload-hint-playground{color:#666;color:var(--graphite,#666);font-size:12px}.uploaded-file-preview-playground{align-items:center;display:flex;gap:12px;position:relative;width:100%}.remove-file-button-playground{align-items:center;background-color:#ef4444;border:none;border-radius:50%;box-shadow:0 2px 8px #00000026;color:#fff;cursor:pointer;display:flex;height:28px;justify-content:center;opacity:0;position:absolute;right:-8px;top:-8px;transition:all .2s ease;visibility:hidden;width:28px;z-index:10}.remove-file-button-playground:hover{background-color:#dc2626;transform:scale(1.1)}.uploaded-file-preview-playground:hover .remove-file-button-playground{opacity:1;visibility:visible}.file-icon-playground{font-size:24px}.file-info-playground{display:flex;flex-direction:column;gap:4px}.file-name-playground{color:#1a1a1a;color:var(--rich-black,#1a1a1a);font-size:14px;font-weight:500}.file-name-playground,.file-size-playground{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-family:var(--font-inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif)}.file-size-playground{color:#666;color:var(--graphite,#666);font-size:12px}.info-icon-playground{background:#0000000d;color:#666;color:var(--graphite,#666);font-size:14px;font-weight:700;height:18px;transition:all .2s ease;width:18px}.info-icon-playground:hover{background:var(--butter-yellow,#ffe900);color:#1a1a1a;color:var(--rich-black,#1a1a1a)}@media (max-width:768px){.audio-content-input-group-playground{align-items:flex-start;flex-direction:column;gap:12px;padding:14px}.audio-content-info-playground{align-self:flex-end;margin-left:0}.audio-placeholder-playground,.audio-text-preview-playground{font-size:14px}}.generate-section-playground{margin-top:16px}.generate-button-playground{background:#ffe900;background:var(--butter-yellow,#ffe900);border:none;border-radius:8px;color:#1a1a1a;color:var(--rich-black,#1a1a1a);cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-family:var(--font-inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);font-size:14px;font-weight:600;padding:12px 24px;transition:all .25s cubic-bezier(.4,0,.2,1);width:100%}.generate-button-playground:hover:not(:disabled){background:#ffce00;background:var(--golden-crust,#ffce00);box-shadow:0 8px 25px #ffe90040;transform:translateY(-2px)}.generate-button-playground:disabled{cursor:not-allowed;opacity:.6;transform:none}@media (max-width:480px){.audio-content-input-group-playground{padding:12px}.-preset{font-size:1rem}}.audio-history-menu-item{align-items:flex-start;display:flex;flex-direction:column;padding:4px 0;width:100%}.audio-history-menu-text{color:#333!important;font-size:13px!important;font-weight:500;line-height:1.2;margin-bottom:2px;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.audio-history-menu-meta{color:#666!important;font-size:11px!important;font-style:italic}.audio-history-storage-info{margin-top:8px;padding:6px 0}.storage-info-label{color:#ffffffb3;font-size:11px;margin-bottom:4px;text-align:center}.audio-history-header-compact{align-items:center;background:#ffffff08;border:1px solid #ffffff0d;border-radius:6px;cursor:pointer;display:flex;justify-content:space-between;padding:8px 12px;transition:all .2s ease}.audio-history-header-compact:hover{background:#ffffff0d}.audio-history-title-compact{color:var(--butter-yellow);font-size:13px;font-weight:500}.audio-history-toggle{color:#fff9;font-size:10px;transition:transform .2s ease}.audio-history-dropdown-content{animation:slideDown .2s ease;background:#ffffff05;border:1px solid #ffffff0d;border-radius:6px;margin-top:4px;padding:8px}@keyframes slideDown{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.audio-history-storage-compact{margin-bottom:8px}.storage-compact-label{color:#fff9;font-size:10px;margin-bottom:3px}.storage-usage-bar{background:#ffffff1a;border-radius:2px;height:3px;overflow:hidden}.storage-usage-fill{background:var(--butter-yellow);border-radius:2px;height:100%;transition:width .3s ease}.audio-history-list-compact{display:flex;flex-direction:column;gap:3px}.audio-history-item-compact{align-items:center;background:#ffffff05;border:1px solid #ffffff08;border-radius:4px;display:flex;justify-content:space-between;padding:6px 8px}.audio-history-preview-compact{flex:1 1;min-width:0}.audio-history-text-compact{color:#fffc;font-size:10px;line-height:1.2;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.audio-history-meta-compact{color:#ffffff80;font-size:8px}.audio-history-controls-compact{display:flex;gap:3px;margin-left:8px}.audio-history-btn-compact{align-items:center;background:#ffffff14;border:none;border-radius:3px;color:#ffffffb3;cursor:pointer;display:flex;font-size:9px;height:18px;justify-content:center;transition:all .2s ease;width:18px}.audio-history-btn-compact:hover{background:#f6c64426}.audio-history-btn-compact.playing{background:#f6c64433;color:var(--butter-yellow)}.audio-history-btn-compact.delete:hover{background:#ff636326;color:#ff6363}.audio-history-empty-compact{color:#ffffff80;font-size:10px;font-style:italic;padding:8px;text-align:center}.audio-history-view-all-btn{background:#f6c6441a;border:1px solid #f6c64433;border-radius:4px;color:var(--butter-yellow);cursor:pointer;font-size:10px;margin-top:6px;padding:6px;transition:all .2s ease;width:100%}.audio-history-view-all-btn:hover{background:#f6c64426}.audio-history-warning-compact{background:#ffc10714;border:1px solid #ffc10733;border-radius:3px;color:#ffc107;font-size:9px;margin-top:6px;padding:4px 6px;text-align:center}.audio-history-modal-overlay{align-items:center;background:#000000b3;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:9999999}.audio-history-modal{background:var(--rich-black);border:1px solid #ffffff1a;border-radius:12px;max-height:80vh;max-width:600px;overflow:hidden;width:100%}.audio-history-modal-header{align-items:center;border-bottom:1px solid #ffffff1a;display:flex;justify-content:space-between;padding:16px 20px}.audio-history-modal-header h3{color:var(--butter-yellow);font-size:16px;margin:0}.audio-history-modal-close{align-items:center;background:none;border:none;color:#ffffffb3;cursor:pointer;display:flex;font-size:20px;height:24px;justify-content:center;padding:0;width:24px}.audio-history-modal-close:hover{color:#ffffffe6}.audio-history-modal-content{max-height:calc(80vh - 80px);overflow-y:auto;padding:20px}.audio-history-storage{margin-bottom:16px}.storage-usage-label{align-items:center;color:#ffffffb3;display:flex;font-size:12px;justify-content:space-between;margin-bottom:6px}.audio-history-list{display:flex;flex-direction:column;gap:8px}.audio-history-item{background:#ffffff05;border:1px solid #ffffff0d;border-radius:8px;transition:all .2s ease}.audio-history-item:hover{background:#ffffff0d}.audio-history-item-main{align-items:center;display:flex;justify-content:space-between;padding:12px}.audio-history-preview{flex:1 1;min-width:0}.audio-history-text{color:#fffc;font-size:13px;line-height:1.3;margin-bottom:6px;word-break:break-word}.audio-history-metadata{align-items:center;display:flex;flex-wrap:wrap;gap:12px}.audio-history-voice{background:#f6c6441a;border-radius:4px;color:var(--butter-yellow);font-size:10px;font-weight:500;padding:2px 6px}.audio-history-date{color:#ffffff80;font-size:10px}.audio-history-size{color:#fff6;font-size:10px}.audio-history-controls{display:flex;gap:6px;margin-left:12px}.audio-history-delete-btn,.audio-history-play-btn{align-items:center;background:#ffffff14;border:none;border-radius:4px;cursor:pointer;display:flex;font-size:12px;height:28px;justify-content:center;transition:all .2s ease;width:28px}.audio-history-play-btn:hover{background:#f6c64426}.audio-history-play-btn.playing{background:#f6c64433;color:var(--butter-yellow)}.audio-history-delete-btn:hover{background:#ff636326}.audio-history-delete-btn:disabled,.audio-history-play-btn:disabled{cursor:not-allowed;opacity:.3}.audio-history-audio-element{display:none}.issue-alert-button{align-items:center;background:linear-gradient(140deg,#ef4444eb,#f87171f2);border:none;border-radius:999px;bottom:28px;box-shadow:0 16px 32px #ef444459;color:#fff8f6;cursor:pointer;display:flex;font-weight:600;gap:10px;padding:12px 18px;position:fixed;right:28px;transition:transform .2s ease,box-shadow .2s ease;z-index:1000}.issue-alert-button:hover{box-shadow:0 20px 36px #ef444473;transform:translateY(-2px)}.issue-alert-icon{background:#fecaca;border-radius:50%;box-shadow:0 0 0 4px #fecaca59;flex-shrink:0;height:10px;width:10px}.issue-alert-label{font-size:14px}.issue-alert-count{align-items:center;background:#ffffff38;border-radius:50%;display:inline-flex;font-size:13px;font-weight:600;height:28px;justify-content:center;min-width:28px}.issue-alert-overlay{inset:0;position:fixed;z-index:1100}.issue-alert-backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#09090bb3;inset:0;position:absolute}.issue-alert-modal{background:#111214;border:1px solid #ffe90029;border-radius:24px;box-shadow:0 36px 72px #00000073;color:#f8f8f8;display:flex;flex-direction:column;left:50%;max-height:min(80vh,680px);overflow:hidden;position:absolute;top:50%;transform:translate(-50%,-50%);width:min(640px,calc(100vw - 48px))}.issue-alert-header{align-items:flex-start;display:flex;gap:16px;padding:26px 32px 18px}.issue-alert-header-copy h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:0}.issue-alert-header-copy p{color:#f8f8f8bf;font-size:14px;margin:8px 0 0}.issue-alert-close{background:#ffffff14;border:1px solid #ffe9002e;border-radius:50%;color:#f8f8f8;cursor:pointer;font-size:18px;height:36px;margin-left:auto;transition:background .2s ease;width:36px}.issue-alert-close:hover{background:#ffffff29}.issue-alert-body{display:flex;flex:1 1;flex-direction:column;gap:14px;overflow-y:auto;padding:0 32px 16px}.issue-alert-card{background:#ffffff0a;border:1px solid #ffe90024;border-radius:16px;box-shadow:inset 0 1px 0 #ffffff0f;display:flex;gap:14px;padding:16px 18px}.issue-alert-bullet{border-radius:999px;flex-shrink:0;width:10px}.issue-alert-content{display:flex;flex:1 1;flex-direction:column;gap:6px}.issue-alert-row{align-items:center;display:flex;gap:12px;justify-content:space-between}.issue-alert-heading{font-size:14px;font-weight:600}.issue-alert-chip{background:#ffffff1a;border-radius:999px;color:#f8f8f8;font-size:12px;font-weight:500;padding:4px 10px;white-space:nowrap}.issue-alert-description{color:#f8f8f8e6;font-size:13px;line-height:1.5;margin:0}.issue-alert-meta{color:#a6adbae6;font-size:12px;margin:0}.issue-alert-cta{border-top:1px solid #ffe9002e;color:#f8f8f8d9;display:flex;flex-direction:column;gap:10px;margin-top:16px;padding-top:14px}.issue-alert-cta p{font-size:13px;margin:0}.issue-alert-report{align-self:flex-start;background:linear-gradient(140deg,#ffe900eb,#fef08af2);border:none;border-radius:999px;box-shadow:0 12px 22px #ffe90038;color:#1f2937;cursor:pointer;font-size:13px;font-weight:600;padding:8px 16px;transition:transform .2s ease,box-shadow .2s ease}.issue-alert-report:hover{box-shadow:0 16px 28px #ffe9004d;transform:translateY(-1px)}.issue-alert-footer{border-top:1px solid #ffe90029;display:flex;justify-content:flex-end;padding:18px 32px 26px}.issue-alert-dismiss{background:#ffffff14;border:1px solid #ffffff24;border-radius:12px;color:#f8f8f8;cursor:pointer;font-size:14px;font-weight:500;padding:10px 18px;transition:background .2s ease,border .2s ease}.issue-alert-dismiss:hover{background:#ffffff29;border-color:#ffffff38}.issue-alert-meta-row{align-items:center;display:flex;justify-content:space-between;margin-top:8px}.issue-alert-dismiss-btn{background:none;border:none;border-radius:6px;color:#a6adbae6;cursor:pointer;font-size:12px;font-weight:500;padding:4px;transition:background-color .2s,color .2s}.issue-alert-dismiss-btn:hover{background-color:#ffffff1a;color:#f8f8f8}.issue-alert-dismiss-btn:disabled{color:#a6adba80;cursor:not-allowed}@media (max-width:640px){.issue-alert-button{bottom:16px;padding:10px 14px;right:16px}.issue-alert-modal{width:calc(100vw - 32px)}.issue-alert-body,.issue-alert-footer,.issue-alert-header{padding-left:20px;padding-right:20px}.issue-alert-row{align-items:flex-start;flex-direction:column;gap:6px}}:root{--side-panel-bg:#f0f0f0}.playground-container-new{background-color:#fdf6e3;background-color:var(--churned-cream);box-sizing:border-box;display:grid;grid-template-columns:360px 1fr 360px;overflow:visible;padding:0 24px}.playground-left-panel,.playground-right-panel{background:#f0f0f0;background:var(--side-panel-bg);border-radius:16px;border-radius:var(--border-radius);box-shadow:0 6px 16px #00000012;box-shadow:var(--card-shadow);display:flex;flex-direction:column;overflow-x:visible;overflow-y:auto;padding:16px;position:relative;z-index:1}.playground-center-panel{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:400px;padding:10px 20px}.player-selector-container{display:flex;flex-direction:column;gap:8px}.player-selector-container label{color:#333;color:var(--graphite);font-size:.9rem;font-weight:600}.config-tabs{display:flex;flex-direction:column;gap:8px}.config-tab{align-items:center;border:2px solid #0000;border-radius:12px;color:#333;color:var(--graphite);cursor:pointer;display:flex;font-size:1rem;font-weight:500;gap:12px;padding:14px 20px;transition:all .2s ease}.config-tab:hover{background-color:#eaeaea;background-color:var(--soft-gray)}.config-tab.active{background-color:#fff;background-color:var(--white);border-color:#ffe900;border-color:var(--butter-yellow);color:#1a1a1a;color:var(--rich-black);font-weight:600}.config-tab-icon{font-size:1.2rem}.config-panel{animation:slideIn .3s ease-out}.config-panel .section-title{border-bottom:1px solid #eaeaea;border-bottom:1px solid var(--soft-gray);font-family:Clash Display,sans-serif;font-family:var(--font-clash);font-size:1.25rem;font-weight:600;margin-bottom:24px;margin-top:0;padding-bottom:12px}.form-label{display:block;font-size:.9rem;font-weight:600;margin-bottom:8px}.form-input,.form-textarea{background-color:#fff;background-color:var(--white);border:1px solid #dcdcdc;border-radius:8px;font-size:1rem;padding:12px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.form-input:focus,.form-textarea:focus{border-color:#ffce00;border-color:var(--golden-crust);box-shadow:0 0 0 3px #ffce004d;outline:none}.form-group{margin-top:.75rem}.form-group .MuiInputLabel-root{font-size:12px;font-weight:600}.form-group .MuiInputLabel-root,.form-group .MuiSelect-select{color:#333;color:var(--graphite);font-family:Inter,sans-serif;font-family:var(--font-inter)}.form-group .MuiSelect-select{font-size:14px}.color-picker-group{align-items:center;gap:24px}.color-picker input[type=color]{border:none;border-radius:8px;cursor:pointer;height:48px;padding:0;width:48px}.btn{background:#000;color:#fff;font-weight:700;padding:14px 28px}.btn,.btn:hover{border:2px solid #000}.btn:hover{background:#fff;color:#000}.loading{font-size:1.2rem;padding:80px;text-align:center}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.section-title{color:var(--text-black);font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:.9rem;font-weight:600;gap:6px;margin-bottom:.25rem;overflow:visible;z-index:3}.info-icon-playground,.section-title{align-items:center;display:flex;position:relative}.info-icon-playground{background:var(--text-black);border-radius:50%;color:#fff;cursor:help;font-size:10px;height:14px;justify-content:center;width:14px;z-index:4}.info-icon-playground:hover{background:#ffe900;background:var(--butter-yellow)}.react-tooltip,[data-tooltip-id]{z-index:999999!important}.react-tooltip{position:fixed!important}.embed-code-section{margin:0 24px;padding:0}.embed-code-container{background:#eaeaea;background:var(--soft-gray);border:1px solid #eaeaea;border:1px solid var(--soft-gray);border-radius:8px;cursor:pointer;margin:12px 0;position:relative;transition:all .2s ease}.embed-code-container:hover{background:#e8e8e8}.embed-code-container.disabled{cursor:not-allowed;opacity:.7}.embed-code-container.disabled:hover{background:#eaeaea;background:var(--soft-gray)}.embed-code{color:#333;color:var(--graphite);display:block;font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;font-size:13px;line-height:1.5;margin:0;padding:16px 40px 16px 16px;transition:all .2s ease;white-space:pre-wrap;word-break:break-all}.embed-code.blurred{filter:blur(4px);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.copy-embed-btn{color:#333;color:var(--graphite);opacity:.6;padding:4px;pointer-events:none;position:absolute;right:12px;top:12px;transition:all .2s ease}.copy-embed-btn.disabled{filter:grayscale(1);opacity:.3}.embed-instructions{color:#333;color:var(--graphite);font-size:12px;line-height:1.4;margin:8px 0 0;opacity:.8}.save-button-container{margin:20px 0;text-align:center}.save-button{background:#000;border:2px solid #000;border-radius:8px;color:#fff;cursor:pointer;font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:1rem;font-weight:700;min-width:160px;padding:16px 32px;transition:all .15s ease}.save-button:hover:not(:disabled){background:#fff;border:2px solid #000;color:#000}.save-button:disabled{background:var(--inactive-gray);border:2px solid var(--inactive-gray);color:#fff;cursor:not-allowed;opacity:.6}.color-pickers-container{display:flex;gap:16px}.brand-link{align-items:center;color:var(--text-light);display:inline-flex;font-size:.8rem;gap:8px;margin-top:24px;text-decoration:none;transition:color .2s ease}.brand-logo{height:16px;opacity:.7;transition:opacity .2s ease}.brand-link:hover{color:var(--text-black)}.brand-link:hover .brand-logo{opacity:1}.toggle-switch{align-items:center;display:flex;gap:12px}.switch{background:var(--inactive-gray);border-radius:12px;cursor:pointer;height:24px;position:relative;transition:all .3s ease;width:44px}.switch.active{background:#ffe900;background:var(--butter-yellow)}.switch-handle{background:#fff;border-radius:50%;box-shadow:0 2px 4px #0000001a;height:20px;left:2px;position:absolute;top:2px;transition:all .3s ease;width:20px}.switch.active .switch-handle{transform:translateX(20px)}.color-picker-group{display:flex;flex-direction:column;gap:12px}.color-picker{gap:12px}.color-input{background:none;border:2px solid var(--border-color);border-radius:8px;cursor:pointer;height:40px;padding:0;width:40px}.color-input::-webkit-color-swatch{border:none;border-radius:6px}.color-input::-webkit-color-swatch-wrapper{border:none;border-radius:6px;padding:0}.reset-button{background:none;border:2px solid var(--alert-red);border-radius:8px;color:var(--alert-red);cursor:pointer;font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:.9rem;font-weight:500;padding:10px 16px;transition:all .2s ease}.reset-button:hover{background:var(--alert-red);color:#fff}.loading{align-items:center;color:var(--inactive-gray);display:flex;font-family:Inter,sans-serif;font-family:var(--font-inter);height:200px;justify-content:center}@media (max-width:1200px){.component-categories{gap:40px}.component-grid{gap:30px}}.config-sections{display:flex;flex-direction:column;gap:0}.config-section{border-bottom:1px solid #eaeaea;border-bottom:1px solid var(--soft-gray);overflow:visible;padding:12px 0;position:relative;z-index:2}.config-section:last-child{border-bottom:none}.config-input{background:#0000;border:1px solid #eaeaea;border:1px solid var(--soft-gray);border-radius:6px;font-family:var(--font-body);font-size:14px;padding:8px 12px;transition:border-color .2s ease;width:100%}.config-input:focus{border-color:#ffe900;border-color:var(--butter-yellow);outline:none}.domain-input-group{align-items:center;display:flex;gap:8px}.domain-icon{filter:grayscale(1) opacity(.6);flex-shrink:0}.domain-icon.complete{filter:invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%)}.color-controls{display:flex;flex-direction:column;gap:8px}.color-control{align-items:center;display:flex;gap:8px;justify-content:space-between}.color-control label{color:var(--text-black);font-size:12px;font-weight:400}.color-picker{border:none;border-radius:6px;cursor:pointer;height:35px;width:50px}.form-range{-webkit-appearance:none;appearance:none;background:#eaeaea;background:var(--soft-gray);border-radius:2px;height:4px;margin:4px 0;outline:none;width:100%}.form-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#ffe900;background:var(--butter-yellow);border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px #0000001a;cursor:pointer;height:16px;width:16px}.form-range::-moz-range-thumb{background:#ffe900;background:var(--butter-yellow);border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px #0000001a;cursor:pointer;height:16px;width:16px}.api-key-inline-section{display:flex;flex-direction:column;gap:12px}.api-key-inline-description{color:#4a4a4a;font-size:.9rem;margin:0}.api-key-inline-input{background:#fffffff2;border:1.5px solid #00000026;border-radius:10px;font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:14px;padding:12px 14px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.api-key-inline-input:focus{border-color:#ffe900;border-color:var(--butter-yellow);box-shadow:0 0 0 3px #ffe90040;outline:none}.api-key-inline-error{color:#d35400;font-size:.85rem;font-weight:600}.api-key-inline-success{color:#1f8a4d;font-size:.85rem;font-weight:600}.api-key-inline-actions{align-items:center;display:flex;flex-wrap:wrap;gap:12px}.api-key-inline-actions button{border:none;border-radius:10px;cursor:pointer;font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:14px;font-weight:600;padding:10px 18px;transition:transform .15s ease,box-shadow .15s ease}.api-key-inline-actions button:active{transform:translateY(1px)}.api-key-inline-save{background:#000;color:#fff}.api-key-inline-save:disabled{cursor:not-allowed;opacity:.6}.api-key-inline-settings{background:#ffe900;background:var(--butter-yellow);color:#000}.range-value{color:var(--text-black);font-size:11px;font-weight:400;margin-left:6px}.checkbox-label{align-items:center;color:var(--text-black);cursor:pointer;display:flex;font-size:12px;gap:6px}.checkbox-label input[type=checkbox]{accent-color:#ffe900;accent-color:var(--butter-yellow);height:18px;width:18px}.audio-selector,.player-selector{padding:8px 0}.player-selector .form-label{color:var(--text-black);display:block;font-size:12px;font-weight:400;margin-bottom:4px}.standalone-controls-row{display:flex;gap:16px;margin-bottom:12px;padding:8px 0;width:100%}.standalone-controls-row .audio-selector,.standalone-controls-row .player-selector{flex:1 1;margin-bottom:0}@media (max-width:1200px){.playground-container-new{grid-template-columns:300px 1fr 300px;padding:16px}}@media (max-width:768px){.playground-container-new{gap:16px;grid-template-columns:1fr;grid-template-rows:auto auto 1fr;padding:12px}.playground-left-panel,.playground-right-panel{padding:16px}.config-tabs{flex-direction:row;gap:8px;overflow-x:auto}.config-tab{min-width:-webkit-fit-content;min-width:fit-content;white-space:nowrap}.preset-content-section{background:#fff;background:var(--white);border-radius:16px;border-radius:var(--border-radius);box-shadow:0 6px 16px #00000012;box-shadow:var(--card-shadow);margin-bottom:24px;padding:24px}.content-input-tabs{border-bottom:2px solid #eaeaea;border-bottom:2px solid var(--soft-gray);display:flex;gap:8px;margin-bottom:24px;padding-bottom:16px}.content-input-tabs .tab-button{background:none;border:none;border-radius:8px;color:#333;color:var(--graphite);cursor:pointer;font-family:Inter,sans-serif;font-family:var(--font-inter);font-weight:500;padding:8px 16px;transition:all .2s ease}.content-input-tabs .tab-button:hover{background:#ffe9001a}.content-input-tabs .tab-button.active{background:#ffe900;background:var(--butter-yellow);color:#1a1a1a;color:var(--rich-black)}.text-input-section{display:flex;flex-direction:column;gap:16px}.input-header{align-items:center;display:flex;justify-content:between}.input-header h3{color:#1a1a1a;color:var(--rich-black);font-family:Clash Display,sans-serif;font-family:var(--font-clash);font-size:18px;font-weight:600;margin:0}.char-count{color:#333;color:var(--graphite);font-size:12px;opacity:.7}.audio-text-input,.char-count{font-family:Inter,sans-serif;font-family:var(--font-inter)}.audio-text-input{border:2px solid #eaeaea;border:2px solid var(--soft-gray);border-radius:12px;font-size:14px;line-height:1.5;min-height:120px;padding:16px;resize:vertical;transition:border-color .2s ease;width:100%}.audio-text-input:focus{border-color:#ffe900;border-color:var(--butter-yellow);outline:none}.generation-controls{display:flex;justify-content:flex-start}.generate-audio-btn{background:#ffe900;background:var(--butter-yellow);border:none;border-radius:8px;color:#1a1a1a;color:var(--rich-black);cursor:pointer;font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:14px;font-weight:600;padding:12px 24px;transition:all .2s ease}.generate-audio-btn:hover:not(:disabled){background:#ffce00;background:var(--golden-crust);transform:translateY(-1px)}.generate-audio-btn:disabled{cursor:not-allowed;opacity:.6}.file-upload-section{margin-top:24px}.upload-divider{margin:24px 0;position:relative;text-align:center}.upload-divider:before{background:#eaeaea;background:var(--soft-gray);content:"";height:1px;left:0;position:absolute;right:0;top:50%;z-index:1}.upload-divider span{background:#fff;background:var(--white);color:#333;color:var(--graphite);font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:12px;font-weight:500;padding:0 16px;position:relative;z-index:2}.file-upload-area{position:relative}.file-input{display:none}.file-upload-label{border:2px dashed #eaeaea;border:2px dashed var(--soft-gray);border-radius:12px;cursor:pointer;display:block;padding:32px 24px;text-align:center;transition:all .2s ease}.file-upload-label:hover{background:#ffe9000d;border-color:#ffe900;border-color:var(--butter-yellow)}.upload-content{align-items:center;display:flex;flex-direction:column;gap:8px}.upload-icon{font-size:32px;margin-bottom:8px}.upload-content span{color:#1a1a1a;color:var(--rich-black);font-weight:500}.upload-content small,.upload-content span{font-family:Inter,sans-serif;font-family:var(--font-inter)}.upload-content small{color:#333;color:var(--graphite);font-size:12px;opacity:.7}.upload-progress{align-items:center;display:flex;flex-direction:column;gap:12px}.progress-bar{background:#eaeaea;background:var(--soft-gray);border-radius:3px;height:6px;overflow:hidden;width:200px}.progress-fill{background:#ffe900;background:var(--butter-yellow);height:100%;transition:width .3s ease}.upload-section{display:flex;flex-direction:column;gap:16px}.uploaded-file-info{align-items:flex-start;background:#ffe9001a;border:1px solid #ffe9004d;border-radius:12px;display:flex;justify-content:space-between;padding:16px}.file-details h3{color:#1a1a1a;color:var(--rich-black);font-family:Clash Display,sans-serif;font-family:var(--font-clash);font-size:16px;font-weight:600;margin:0 0 8px}.file-details p{color:#333;color:var(--graphite);font-size:14px;margin:4px 0}.file-details p,.remove-file-btn{font-family:Inter,sans-serif;font-family:var(--font-inter)}.remove-file-btn{background:#fff;background:var(--white);border:1px solid #eaeaea;border:1px solid var(--soft-gray);border-radius:8px;color:#1a1a1a;color:var(--rich-black);cursor:pointer;font-size:12px;padding:8px 16px;transition:all .2s ease}.remove-file-btn:hover{background:#f44;border-color:#f44;color:#fff}.preset-player-info{background:#fff;background:var(--white);border-radius:16px;border-radius:var(--border-radius);box-shadow:0 6px 16px #00000012;box-shadow:var(--card-shadow);margin-bottom:24px;padding:24px}.preset-info-content{display:flex;flex-direction:column;gap:16px}.preset-status{align-items:center;display:flex;gap:12px}.status-complete{color:#7ac043}.status-complete,.status-incomplete{align-items:center;display:flex;font-family:Inter,sans-serif;font-family:var(--font-inter);font-weight:500;gap:8px}.preset-description,.status-incomplete{color:#333;color:var(--graphite)}.preset-description{font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:14px;line-height:1.5;margin:0}.audio-content-input-group-playground{align-items:center;background:#fff;background:var(--white);border:2px solid #eaeaea;border:2px solid var(--soft-gray);border-radius:12px;cursor:pointer;display:flex;justify-content:space-between;overflow:hidden;padding:16px;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1)}.audio-content-input-group-playground:before{background:linear-gradient(135deg,#ffe9001a,#ffce000d);bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .25s ease;z-index:1}.audio-content-input-group-playground:hover{border-color:#ffe900;border-color:var(--butter-yellow);box-shadow:0 8px 25px #ffe90026;transform:translateY(-2px)}.audio-content-input-group-playground:hover:before{opacity:1}.audio-content-preview-playground{flex:1 1;min-height:24px;position:relative;z-index:2}.audio-text-preview-playground{color:#1a1a1a;color:var(--rich-black);display:block;font-weight:400;line-height:1.5}.audio-placeholder-playground,.audio-text-preview-playground{font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:15px}.audio-placeholder-playground{align-items:center;color:#333;color:var(--graphite);display:flex;font-style:italic;gap:8px;opacity:.65}.audio-placeholder-playground:before{content:"✍️";font-size:16px}.audio-content-info-playground{margin-left:16px;position:relative;z-index:2}.char-count-playground{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fffc;border-radius:6px;color:#333;color:var(--graphite);font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:12px;font-weight:500;padding:4px 8px}.input-icon-playground{font-size:14px}@keyframes fadeInModal{0%{opacity:0}to{opacity:1}}@keyframes slideUpModal{0%{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.floating-generate-container-playground{animation:slideInUp .4s cubic-bezier(.4,0,.2,1);bottom:32px;position:fixed;right:32px;z-index:9999}@keyframes slideInUp{0%{opacity:0;transform:translateY(100px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}.floating-generate-btn-playground{align-items:center;background:linear-gradient(135deg,#ffe900,#ffce00);background:linear-gradient(135deg,var(--butter-yellow) 0,var(--golden-crust) 100%);border:2px solid #ffffff4d;border-radius:50px;box-shadow:0 12px 40px #ffe9004d,0 4px 12px #0000001a;color:#1a1a1a;color:var(--rich-black);cursor:pointer;display:flex;font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:16px;font-weight:700;gap:10px;overflow:hidden;padding:18px 32px;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1)}.floating-generate-btn-playground:before{background:linear-gradient(90deg,#0000,#ffffff4d,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.floating-generate-btn-playground:hover:before{left:100%}.floating-generate-btn-playground:after{content:"⚡";font-size:18px;margin-left:4px}.floating-generate-btn-playground:hover:not(:disabled){background:linear-gradient(135deg,#ffce00,#ffe900);background:linear-gradient(135deg,var(--golden-crust) 0,var(--butter-yellow) 100%);border-color:#ffffff80;box-shadow:0 16px 50px #ffe90066,0 8px 20px #00000026;transform:translateY(-4px) scale(1.05)}.floating-generate-btn-playground:disabled{background:#eaeaea;background:var(--soft-gray);color:#333;color:var(--graphite);cursor:not-allowed;opacity:.6}.floating-generate-btn-playground:disabled:after{content:"⏳"}.floating-generate-btn-playground:disabled:hover{box-shadow:0 12px 40px #0000001a;transform:none}}.unified-settings-overlay{align-items:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffffe6;border-radius:16px;border-radius:var(--border-radius);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;transition:all .3s ease;z-index:10}.overlay-message{align-items:center;background:#fff;background:var(--white);border:1px solid #0000001a;border-radius:12px;box-shadow:0 8px 25px #00000026;display:flex;flex-direction:column;gap:12px;padding:24px 32px;text-align:center}.overlay-icon{font-size:24px;margin-bottom:4px}.overlay-text{color:#333;color:var(--graphite);font-size:14px;font-weight:500;line-height:1.4}.overlay-subtext,.overlay-text{font-family:Inter,sans-serif;font-family:var(--font-inter)}.overlay-subtext{color:#666c;font-size:12px;font-weight:400;line-height:1.3;margin-top:4px;text-align:center}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.voice-preview-loading{align-items:center;background:#ffffff0d;border:1px dashed #ffe9004d;border-radius:12px;display:flex;flex-direction:column;justify-content:center;min-height:80px;padding:30px 20px}.voice-preview-loading span{color:#333;color:var(--graphite);font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:14px;font-weight:500;margin-top:12px;opacity:.7}.player-preview .blob-player{height:clamp(180px,22vw,240px)!important;max-height:240px!important}.design-install-box{background-color:#f0f0f0;border-bottom:2px solid #ffd600;border-radius:8px;box-shadow:0 4px 8px #0000001a;margin:5% auto auto;max-width:600px;padding:20px}.platform-tabs{display:flex;justify-content:space-evenly;margin-bottom:20px}.tab{align-items:center;background:none;border:none;color:#000;cursor:pointer;display:flex;flex-direction:column;font-family:Clash Display,sans-serif;font-weight:700;padding:10px;text-align:center}.tab.active{color:#ffd600}.platform-icon{height:24px;margin-right:8px}.instruction-steps{background-color:#fff;border-radius:8px;padding:20px}.instruction-steps h2{margin-bottom:10px}.instruction-steps ol{padding-left:20px}.install-title{padding-top:10px}.widget-copy-box{align-items:center;background-color:#fff;border:1px solid #ccc;border-radius:4px;contain:content;cursor:pointer;display:flex;font-size:.8rem;overflow:auto;padding:10px;position:relative}.copy-notification{color:green;margin-top:10px;text-align:center}:root{--rich-black:#1a1a1a;--graphite:#333;--soft-gray:#eaeaea;--white:#fff;--card-shadow:0 6px 16px #00000012}.players-page-container{background-color:#fdf6e3;background-color:var(--churned-cream);color:#1a1a1a;color:var(--rich-black);font-family:Inter,sans-serif;font-family:var(--font-inter);padding:24px}.players-main-content{margin:0 auto;max-width:1200px}.players-header-controls{align-items:center;display:flex;justify-content:space-between;margin-bottom:40px}.players-title{font-family:Clash Display,sans-serif;font-family:var(--font-clash);font-size:2.5rem;font-weight:600;margin:0}.create-player-icon-btn{background-color:#ffe900;background-color:var(--butter-yellow);border:none;border-radius:50%;box-shadow:0 4px 12px #0000001a;cursor:pointer;height:50px;position:relative;transition:all .3s cubic-bezier(.25,.8,.25,1);width:50px}.copy-embed-btn-small{background:#ffe900;background:var(--butter-yellow);border:none;border-radius:6px;color:#1a1a1a;color:var(--rich-black);cursor:pointer;font-size:11px;font-weight:600;margin-top:8px;padding:4px 8px;transition:all .2s ease}.copy-embed-btn-small:hover{background:#ffce00;background:var(--golden-crust);transform:translateY(-1px)}.player-card-actions{margin-top:12px}.create-player-icon-btn:after,.create-player-icon-btn:before{background-color:#1a1a1a;background-color:var(--rich-black);content:"";left:50%;position:absolute;top:50%;transition:all .3s cubic-bezier(.25,.8,.25,1)}.create-player-icon-btn:before{height:3px;transform:translate(-50%,-50%);width:20px}.create-player-icon-btn:after{height:20px;transform:translate(-50%,-50%);width:3px}.create-player-icon-btn:hover{box-shadow:0 8px 20px #00000026;transform:translateY(-3px) scale(1.05)}.create-player-icon-btn:hover:after,.create-player-icon-btn:hover:before{transform:translate(-50%,-50%) rotate(180deg)}.players-grid{grid-gap:32px;display:grid;gap:32px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.player-card{background-color:#f0f0f0;border-radius:16px;border-radius:var(--border-radius);box-shadow:0 6px 16px #00000012;box-shadow:var(--card-shadow);cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:space-between;min-height:200px;padding:20px;position:relative;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.player-card:hover{box-shadow:0 10px 20px #0000001a;transform:translateY(-5px)}.player-card-top{display:flex;height:24px;justify-content:flex-end}.player-card-middle{align-items:center;display:flex;flex-direction:column;flex-grow:1;justify-content:center;text-align:center}.player-card-bottom{align-items:center;display:flex;height:32px;justify-content:space-between}.api-logo{filter:grayscale(1);height:24px;opacity:.4;width:24px}.player-card-title{color:#1a1a1a;color:var(--rich-black);font-family:Clash Display,sans-serif;font-family:var(--font-clash);font-size:1.5rem;font-weight:500;margin:0 0 4px}.player-card-domain,.player-card-preset-info{align-items:center;color:#333;color:var(--graphite);display:flex;font-size:1rem;gap:8px}.player-card-domain.no-domain{color:#888}.domain-icon{filter:grayscale(1) brightness(.4);height:16px;width:16px}.domain-icon.incomplete{filter:invert(30%) sepia(99%) saturate(1500%) hue-rotate(335deg) brightness(90%) contrast(101%)}.player-card-preset-info,.preset-icon{font-size:1rem}.action-icon,.player-card-actions{align-items:center;display:flex}.action-icon{background:#0000;border:none;border-radius:6px;cursor:pointer;height:32px;justify-content:center;opacity:.8;transition:all .2s ease;width:32px}.action-icon:hover{opacity:1;transform:translateY(-1px)}.copy-icon,.info-icon{color:#333;color:var(--graphite)}.copy-icon:hover,.info-icon:hover{background:#ffe900;background:var(--butter-yellow);box-shadow:0 2px 8px #f6c6444d;color:#1a1a1a;color:var(--rich-black)}.copy-icon.disabled{cursor:not-allowed;opacity:.3}.copy-icon.disabled:hover{background:#0000;box-shadow:none;color:#333;color:var(--graphite);transform:none}.player-type-badge{border-radius:6px;font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:10px;font-weight:600;letter-spacing:.5px;padding:4px 8px;text-transform:uppercase}.player-type-badge.cms{background:#10b9811a;border:1px solid #10b98133;color:#059669}.player-type-badge.standalone{background:#ffe90033;border:1px solid #ffe90066;color:#b45309}.delete-button-hover{align-items:center;background-color:#ef4444;border:none;border-radius:50%;box-shadow:0 2px 8px #00000026;color:#fff;cursor:pointer;display:flex;height:28px;justify-content:center;opacity:0;position:absolute;right:-8px;top:-8px;transition:all .2s ease;visibility:hidden;width:28px;z-index:10}.delete-button-hover:hover{background-color:#dc2626;transform:scale(1.1)}.player-card:hover .delete-button-hover{opacity:1;visibility:visible}.loading-screen{color:#333;color:var(--graphite);font-family:Clash Display,sans-serif;font-family:var(--font-clash);font-size:1.5rem;height:100vh}.loading-screen,.modal-overlay{align-items:center;display:flex;justify-content:center}.modal-overlay{animation:fadeIn .2s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1000}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-container{animation:slideUp .3s ease-out;background:#fff;background:var(--white);border-radius:16px;border-radius:var(--border-radius);box-shadow:0 20px 60px #0003;max-height:80vh;max-width:600px;overflow-y:auto;padding:32px;width:90%}.modal-container h2{color:#1a1a1a;color:var(--rich-black);font-family:Clash Display,sans-serif;font-family:var(--font-clash);font-size:1.75rem;font-weight:600;margin:0 0 8px;text-align:center}.modal-container p{color:#333;color:var(--graphite);font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:1rem;margin:0 0 24px;text-align:center}.player-type-options{grid-gap:16px;display:grid;grid-template-columns:1fr 1fr;margin-bottom:0}.player-type-card{background:#fdf6e3;background:var(--churned-cream);border:2px solid #0000;border-radius:12px;padding:20px;text-align:center}.player-type-card:hover{border-color:#ffe900;box-shadow:0 8px 24px #0000001a}.player-type-card h3{color:#1a1a1a;color:var(--rich-black);font-family:Clash Display,sans-serif;font-family:var(--font-clash);font-size:1.125rem;font-weight:600;margin:0 0 8px}.player-type-card p{color:#333;color:var(--graphite);font-size:.9rem;margin:0 0 12px;text-align:left}.player-type-card ul{color:#333;color:var(--graphite);font-size:.85rem;list-style:none;margin:0;padding:0}.player-type-card li{padding:2px 0;text-align:left}.player-type-card li:before{color:#ffe900;color:var(--butter-yellow);content:"✓";font-weight:700;margin-right:6px}.delete-modal{max-width:480px}.delete-warning{color:#ef4444;font-size:.9rem;font-weight:500;margin:16px 0 24px}.modal-actions{gap:12px;margin-top:24px}.btn{font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:.9rem;padding:10px 20px}.btn-secondary{background:#eaeaea;background:var(--soft-gray);color:#333;color:var(--graphite)}.btn-secondary:hover{background:#ddd;transform:translateY(-1px)}.btn-danger{background:#ef4444}.btn-danger:hover{background:#dc2626;box-shadow:0 4px 12px #ef44444d;transform:translateY(-1px)}.player-type-modal-overlay{align-items:center;animation:fadeIn .2s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.player-type-modal-content{animation:slideUp .3s ease-out;background:#fff;background:var(--white);border-radius:16px;border-radius:var(--border-radius);max-width:500px;padding:32px;position:relative;width:90%}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.close-modal-button{align-items:center;background:none;border:none;border-radius:50%;color:#333;color:var(--graphite);cursor:pointer;display:flex;font-size:24px;height:32px;justify-content:center;position:absolute;right:16px;top:16px;transition:all .2s ease;width:32px}.close-modal-button:hover{background:#eaeaea;background:var(--soft-gray);color:#1a1a1a;color:var(--rich-black)}.player-type-modal-content h2{color:#1a1a1a;color:var(--rich-black);font-family:Clash Display,sans-serif;font-family:var(--font-clash);font-size:1.5rem;font-weight:600;margin:0 0 8px}.player-type-modal-content>p{color:#333;color:var(--graphite);font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:.95rem;margin:0 0 24px}.player-type-options{display:flex;flex-direction:column;gap:16px}.player-type-option{border:2px solid #eaeaea;border:2px solid var(--soft-gray);border-radius:12px;cursor:pointer;padding:20px;text-align:center;transition:all .2s ease}.player-type-option:hover{background:#ffe9000d;border-color:#ffe900;border-color:var(--butter-yellow);box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.option-icon{font-size:2rem;margin-bottom:12px}.player-type-option h3{color:#1a1a1a;color:var(--rich-black);font-family:Clash Display,sans-serif;font-family:var(--font-clash);font-size:1.1rem;font-weight:600;margin:0 0 8px}.player-type-option p{color:#333;color:var(--graphite);font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:.9rem;line-height:1.4;margin:0}.delete-modal-overlay{align-items:center;animation:fadeIn .2s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.delete-modal-content{animation:slideUp .3s ease-out;background:#fff;background:var(--white);border-radius:16px;border-radius:var(--border-radius);max-width:400px;padding:32px;text-align:center;width:90%}.delete-modal-content h3{color:#1a1a1a;color:var(--rich-black);font-family:Clash Display,sans-serif;font-family:var(--font-clash);font-size:1.3rem;font-weight:600;margin:0 0 16px}.delete-modal-content p{color:#333;color:var(--graphite);font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:.95rem;line-height:1.4;margin:0 0 24px}.delete-modal-actions{display:flex;gap:12px;justify-content:center}.cancel-button{background:var(--white);border:2px solid #eaeaea;border:2px solid var(--soft-gray);border-radius:8px;color:#333;color:var(--graphite);cursor:pointer;font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:.9rem;font-weight:500;padding:12px 24px;transition:all .2s ease}.cancel-button:hover{background:#eaeaea;background:var(--soft-gray);transform:translateY(-1px)}.confirm-button{background:#ef4444;border:none;border-radius:8px;color:#fff;cursor:pointer;font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:.9rem;font-weight:500;padding:12px 24px;transition:all .2s ease}.confirm-button:hover{background:#dc2626;box-shadow:0 4px 12px #ef44444d;transform:translateY(-1px)}.no-results{color:#333;color:var(--graphite);font-family:Inter,sans-serif;font-family:var(--font-inter);padding:40px 20px;text-align:center}.no-results p{font-size:1.1rem;margin:0}.pagination{align-items:center;display:flex;gap:16px;justify-content:center;margin-top:40px;padding:20px 0}.pagination-btn{background:#fff;background:var(--white);border:2px solid #eaeaea;border:2px solid var(--soft-gray);border-radius:8px;color:#333;color:var(--graphite);font-size:16px;font-weight:500;height:40px;width:40px}.pagination-btn:hover:not(.disabled){background:#ffe900;background:var(--butter-yellow);border-color:#ffe900;border-color:var(--butter-yellow);color:#1a1a1a;color:var(--rich-black);transform:translateY(-1px)}.pagination-btn.disabled{background:#eaeaea;background:var(--soft-gray);cursor:not-allowed;opacity:.4}.pagination-info{align-items:center;display:flex;gap:8px}.page-numbers{display:flex;gap:4px}.page-number{align-items:center;background:#1a1a1a;background:var(--rich-black);border:2px solid #eaeaea;border:2px solid var(--soft-gray);border-radius:8px;color:#fff;color:var(--white);cursor:pointer;display:flex;font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:.9rem;font-weight:500;height:40px;justify-content:center;transition:all .2s ease;width:40px}.page-number:hover{background:#ffe9001a}.page-number.active,.page-number:hover{border-color:#ffe900;border-color:var(--butter-yellow);color:#1a1a1a;color:var(--rich-black)}.page-number.active{background:#ffe900;background:var(--butter-yellow);font-weight:600}@media (max-width:768px){.players-main-content{padding:16px}.players-header-controls{margin-bottom:24px}.players-title{font-size:2rem}.players-grid{gap:20px;grid-template-columns:1fr}.player-card{padding:16px}.modal-container{padding:24px;width:95%}.player-type-options{gap:12px;grid-template-columns:1fr}.search-icon-btn{height:40px;width:40px}.search-bar-expanded{min-width:240px;padding:6px 12px}@keyframes expandSearch{0%{opacity:.7;width:40px}to{opacity:1;width:240px}}.pagination{gap:8px;margin-top:24px;padding:16px 0}.pagination-btn{font-size:14px;height:36px;width:36px}.page-number{font-size:.85rem;height:36px;width:36px}.page-numbers{gap:2px}}@media (max-width:480px){.players-main-content{padding:12px}.players-title{font-size:1.5rem}.create-player-icon-btn{height:44px;width:44px}.create-player-icon-btn:before{width:16px}.create-player-icon-btn:after{height:16px}.players-grid{gap:16px}.player-card{padding:12px}.player-card-title{font-size:1.25rem}.modal-container{padding:20px;width:95%}.delete-modal-content,.player-type-modal-content{padding:24px;width:95%}.search-icon-btn{height:36px;width:36px}.search-bar-expanded{min-width:200px;padding:4px 8px}@keyframes expandSearch{0%{opacity:.7;width:36px}to{opacity:1;width:200px}}.pagination{flex-wrap:wrap;gap:4px;margin-top:20px;padding:12px 0}.pagination-btn{font-size:12px;height:32px;width:32px}.page-number{font-size:.8rem;height:32px;width:32px}.page-numbers{gap:2px}.no-results p{font-size:1rem}}.analytics-page-container{padding:24px}.key-metrics-grid-skeleton{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:24px}.metric-card-skeleton{background-color:#fff;border:1px solid #eaeaea;border-radius:12px;display:flex;flex-direction:column;gap:8px;padding:20px}.analytics-layout-skeleton{grid-gap:24px;display:grid;gap:24px;grid-template-columns:3fr 1fr}.main-chart-area-skeleton,.top-domains-card-skeleton{background-color:#fff;border:1px solid #eaeaea;border-radius:12px;padding:20px}.domains-list-skeleton{display:flex;flex-direction:column;gap:16px}.domain-item-skeleton{align-items:center;display:flex;justify-content:space-between}.animated-radar-chart{background:#fff;height:300px;margin:0 auto;position:relative;width:300px}.animated-radar-chart canvas{display:block;opacity:0;transition:opacity .4s ease}.point-area{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.radar-point{background:#fff;border:2px solid #ffe900;border-radius:50%;cursor:pointer;height:8px;margin:-6px 0 0 -6px;pointer-events:auto;position:absolute;transition:all .2s ease;width:8px;z-index:10}.radar-point:hover{border-width:3px;box-shadow:0 2px 8px #ffe90066;height:16px;margin:-8px 0 0 -8px;transform:scale(1.1);width:16px}.balloon-area{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:20}.tooltip{background:#1a1a1a;border:2px solid #ffe900;border-radius:8px;box-shadow:0 4px 16px #0003;color:#fff;display:none;min-width:120px;padding:12px 16px}.tooltip,.tooltip:after{position:absolute;transform:translateX(-50%)}.tooltip:after{border:8px solid #0000;border-top-color:#ffe900;content:"";left:50%;top:100%}.tooltip:before{border:6px solid #0000;border-top-color:#1a1a1a;content:"";left:50%;position:absolute;top:100%;transform:translateX(-50%);z-index:1}.tooltip-label{color:#ffe900;font-family:Clash Display,sans-serif;font-size:.75rem;font-weight:600;margin:0 0 4px;text-align:center;text-transform:uppercase}.tooltip-value{color:#fff;font-family:Inter,sans-serif;font-size:.875rem;font-weight:500;margin:0;text-align:center}.animated-radar-chart.animating canvas{opacity:1}@media (max-width:768px){.animated-radar-chart{height:250px;width:250px}.tooltip{min-width:100px;padding:8px 12px}.tooltip-label{font-size:.7rem}.tooltip-value{font-size:.8rem}}.animated-radar-chart canvas:hover{opacity:.9}.animated-radar-chart:after{bottom:-25px;color:#999;content:"Click to replay animation";font-family:Inter,sans-serif;font-size:.7rem;left:50%;opacity:0;position:absolute;transform:translateX(-50%);transition:opacity .3s ease}.animated-radar-chart:hover:after{opacity:1}:root{--butter-yellow:#ffe900;--golden-crust:#ffce00;--churned-cream:#fdf6e3;--side-panel-bg:#fff;--text-black:#1a1a1a;--text-light:#7a7a7a;--border-color:#eaeaea;--font-clash:"Clash Display",sans-serif;--font-inter:"Inter",sans-serif;--border-radius:16px;--success-green:#10b981;--warning-orange:#f59e0b;--error-red:#ef4444}.analytics-page-container{background-color:#fdf6e3;background-color:var(--churned-cream);box-sizing:border-box;min-height:100vh;padding:0}.analytics-main-content{display:flex;flex-direction:column;gap:24px;margin:0 auto;max-width:1200px;padding:20px}@media (max-width:768px){.analytics-main-content{gap:16px;padding:16px}.analytics-metric-card{padding:16px}.analytics-charts-grid{gap:16px;grid-template-columns:1fr}}@media (max-width:600px){.analytics-metrics-grid{gap:16px;grid-template-columns:1fr}}@media (max-width:480px){.analytics-main-content{gap:12px;padding:12px}.analytics-metric-card{padding:12px}}.analytics-metrics-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.analytics-metric-card{background-color:#fff;background-color:var(--side-panel-bg);border:1px solid #eaeaea;border:1px solid var(--border-color);border-radius:16px;border-radius:var(--border-radius);box-shadow:0 4px 12px #0000000d;padding:24px;transition:transform .2s ease,box-shadow .2s ease}.analytics-metric-card:hover{border-color:#ffe900;border-color:var(--butter-yellow);box-shadow:0 8px 24px #00000014;transform:translateY(-2px)}.metric-content{flex:1 1}.metric-content h3{color:#1a1a1a;color:var(--text-black);font-family:Clash Display,sans-serif;font-family:var(--font-clash);font-size:2.5rem;font-weight:700;line-height:1;margin:0 0 8px}.metric-content p{color:#7a7a7a;color:var(--text-light);font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:15px;font-weight:500;letter-spacing:.5px;margin:0;text-transform:uppercase}.metric-trend{align-items:center;display:flex;font-size:12px;font-weight:500;gap:4px}.metric-trend.positive{color:#10b981;color:var(--success-green)}.metric-trend.negative{color:#ef4444;color:var(--error-red)}.metric-trend svg{font-size:12px}.analytics-charts-grid{grid-gap:24px;display:grid;gap:24px;grid-template-columns:minmax(0,2fr) minmax(0,1fr)}@media (max-width:1024px){.analytics-charts-grid{grid-template-columns:1fr}}.chart-card{background-color:#fff;background-color:var(--side-panel-bg);border:1px solid #eaeaea;border:1px solid var(--border-color);border-radius:16px;border-radius:var(--border-radius);box-shadow:0 4px 12px #0000000d;padding:24px;transition:transform .2s ease,box-shadow .2s ease}.chart-card:hover{box-shadow:0 8px 24px #00000014;transform:translateY(-2px)}.chart-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.chart-header h3{color:#1a1a1a;color:var(--text-black);font-family:Clash Display,sans-serif;font-family:var(--font-clash);font-size:1.2rem;font-weight:600;letter-spacing:.5px;margin:0;text-transform:uppercase}.radar-chart-card{display:flex;flex-direction:column;min-height:380px}.radar-chart-container{align-items:center;display:flex;flex-grow:1;justify-content:center;padding:20px 0}.radar-chart{height:100%;max-height:280px;width:100%}.radar-label{font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase}.chart-content{align-items:center;display:flex;flex-grow:1;justify-content:center;min-height:200px}.simple-chart{align-items:flex-end;display:flex;gap:8px;height:150px;justify-content:space-around;padding:0 20px}.chart-bar{align-items:center;display:flex;flex:1 1;flex-direction:column;gap:8px;max-width:40px}.bar-fill{background:linear-gradient(180deg,#ffe900,#ffce00);background:linear-gradient(180deg,var(--butter-yellow),var(--golden-crust));border-radius:4px 4px 0 0;min-height:8px;transition:height .3s ease;width:100%}.bar-label{color:#7a7a7a;color:var(--text-light);font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:12px;font-weight:500;text-align:center}.performance-metrics{display:flex;flex-direction:column;gap:16px}.performance-item{align-items:center;border-bottom:1px solid #eaeaea;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding:12px 0}.performance-item:last-child{border-bottom:none}.performance-label{color:#7a7a7a;color:var(--text-light);font-weight:500}.performance-label,.performance-value{font-family:Inter,sans-serif;font-family:var(--font-inter);font-size:14px}.performance-value{color:#1a1a1a;color:var(--text-black);font-weight:600}.empty-state{color:#7a7a7a;color:var(--text-light);font-size:14px;font-style:italic;margin:20px 0;text-align:center}.insufficient-data{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:200px;padding:40px 20px;text-align:center}.insufficient-data-icon{font-size:3rem;margin-bottom:16px;opacity:.6}.insufficient-data-content h4{color:#1a1a1a;color:var(--text-black);font-family:Clash Display,sans-serif;font-family:var(--font-clash);font-size:1.25rem;font-weight:600;margin:0 0 12px}.insufficient-data-content p{color:#7a7a7a;color:var(--text-light);font-size:14px;line-height:1.5;margin:0 0 20px;max-width:300px}.data-progress{max-width:200px;width:100%}.progress-bar{background-color:#eaeaea;background-color:var(--border-color);border-radius:4px;height:8px;margin-bottom:8px;overflow:hidden;width:100%}.progress-fill{background:linear-gradient(90deg,#ffe900,#ffce00);background:linear-gradient(90deg,var(--butter-yellow),var(--golden-crust));border-radius:4px;height:100%;transition:width .5s ease}.data-progress small{color:#7a7a7a;color:var(--text-light);font-size:12px;font-weight:500}@media (max-width:1024px){.analytics-charts-grid{grid-template-columns:1fr}.analytics-main-content{padding:16px}.analytics-metrics-grid{gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}@media (max-width:768px){.analytics-header-controls{align-items:flex-start;flex-direction:column;gap:16px}.analytics-filter-container{min-width:auto;width:100%}.chart-card{padding:16px}.chart-content{height:150px}}@media (max-width:480px){.analytics-main-content{gap:12px;padding:8px}.chart-card{padding:12px}.analytics-title{font-size:2rem}.metric-content h3{font-size:1.5rem}.chart-content{height:120px}.simple-chart{height:100px;padding:0 10px}}.plays-over-time-chart{height:auto;width:100%}.chart-header-with-controls{align-items:center;display:flex;justify-content:space-between;margin-bottom:15px;padding:0 10px}.chart-header-with-controls h3{color:#333;font-size:16px;font-weight:600;margin:0}.chart-pagination-controls{align-items:center;display:flex;gap:8px;justify-content:flex-end}.pagination-btn{align-items:center;background:#f5f5f5;border:1px solid #ddd;border-radius:4px;color:#666;cursor:pointer;display:flex;font-size:12px;height:28px;justify-content:center;transition:all .2s ease;width:28px}.pagination-btn:hover{background:#ffe900;border-color:#ccc;color:#333}.pagination-info{color:#666;font-size:11px;font-weight:500}.chart-placeholder-analytics{align-items:center;color:#666;display:flex;font-style:italic;justify-content:center}.chart-tooltip{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:10px}.tooltip-label{color:#333;font-weight:700;margin-bottom:5px}.chart-tooltip p{font-size:12px;margin:2px 0}.debugger-app{background:var(--churned-cream);min-height:100vh;padding:24px}.debugger-layout{display:flex;flex-direction:column;gap:24px;margin:0 auto;max-width:1000px}.debugger-header{margin-bottom:8px;text-align:center}.debugger-header h1{color:var(--rich-black);font-family:var(--font-clash);font-size:2.2rem;font-weight:600;margin:0 0 8px}.debugger-header p{color:var(--graphite);font-family:var(--font-inter);font-size:1rem;margin:0}.input-section{background:var(--white);border-radius:var(--border-radius);box-shadow:var(--card-shadow);padding:20px}.input-column{display:flex;flex-direction:column;gap:12px}.url-input-compact{border:2px solid var(--soft-gray);border-radius:8px;font-family:var(--font-inter);font-size:1rem;padding:12px 16px;transition:border-color .2s ease;width:100%}.url-input-compact:focus{border-color:var(--butter-yellow);outline:none}.test-btn-compact{align-self:flex-start;background:var(--butter-yellow);border:none;border-radius:8px;color:var(--rich-black);cursor:pointer;font-family:var(--font-inter);font-size:1rem;font-weight:600;padding:12px 24px;transition:all .2s ease;white-space:nowrap}.test-btn-compact:hover:not(:disabled){background:var(--golden-crust);transform:translateY(-1px)}.test-btn-compact:disabled{cursor:not-allowed;opacity:.6}.error-compact{background:#d32f2f1a;border:1px solid #d32f2f33;border-radius:6px;color:#d32f2f;font-family:var(--font-inter);font-size:.9rem;margin-top:12px;padding:12px}.results-layout{display:flex;flex-direction:column;gap:20px}.status-card{background:var(--white);border-left:4px solid;border-radius:var(--border-radius);box-shadow:var(--card-shadow);padding:24px}.status-header{gap:16px;margin-bottom:20px}.status-header,.status-icon{align-items:center;display:flex}.status-icon{border-radius:50%;font-size:24px;height:50px;justify-content:center;width:50px}.status-text h2{font-family:var(--font-clash);font-size:1.5rem;font-weight:600;margin:0 0 4px}.status-text p{color:var(--graphite);font-family:var(--font-inter);font-size:.95rem;margin:0}.quick-stats{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.quick-stat{background:#00000005;border-radius:8px;padding:12px;text-align:center}.stat-value{color:var(--rich-black);display:block;font-family:var(--font-clash);font-size:1.1rem;font-weight:600}.stat-label{color:var(--graphite);display:block;font-family:var(--font-inter);font-size:.8rem;margin-top:2px}.simple-results{background:var(--white);border-radius:var(--border-radius);box-shadow:var(--card-shadow);overflow:hidden}.diagnostics-layout{display:flex;flex-direction:column;gap:24px}.diagnostic-failure,.diagnostic-success{border-radius:8px;overflow:hidden}.diagnostic-success{border:2px solid #2e7d32}.diagnostic-failure{border:2px solid #d32f2f}.diagnostic-header{align-items:center;display:flex;font-family:var(--font-clash);font-weight:600;gap:12px;padding:16px 20px}.diagnostic-success .diagnostic-header{background:#2e7d321a;color:#2e7d32}.diagnostic-failure .diagnostic-header{background:#d32f2f1a;color:#d32f2f}.diagnostic-icon{font-size:20px}.diagnostic-header h4{font-size:1.1rem;margin:0}.diagnostic-details{background:var(--white);font-family:var(--font-inter);font-size:.9rem;line-height:1.5;padding:16px 20px}.diagnostic-details p{margin:0 0 12px}.diagnostic-details p:last-child{margin:0}.diagnostic-details ul{margin:8px 0 0;padding-left:20px}.diagnostic-details li{margin-bottom:6px}.diagnostic-details code{background:var(--churned-cream);border-radius:4px;color:var(--rich-black);font-size:.85rem;padding:2px 6px}.page-structure h4{color:var(--rich-black);font-family:var(--font-clash);font-size:1.1rem;font-weight:600;margin:0 0 16px}.structure-grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(4,1fr)}.structure-item{background:var(--churned-cream);border-radius:8px;padding:12px;text-align:center}.structure-count{color:var(--rich-black);display:block;font-family:var(--font-clash);font-size:1.2rem;font-weight:600}.structure-label{color:var(--graphite);display:block;font-family:var(--font-inter);font-size:.75rem;margin-top:4px}.troubleshooting h4{color:var(--rich-black);font-family:var(--font-clash);font-size:1.1rem;font-weight:600;margin:0 0 16px}.troubleshoot-steps{display:flex;flex-direction:column;gap:12px}.troubleshoot-step{align-items:flex-start;background:var(--churned-cream);border-radius:8px;display:flex;gap:12px;padding:12px}.step-number{color:var(--rich-black);font-family:var(--font-clash);font-size:.8rem;font-weight:600;height:24px;width:24px}.step-text{color:var(--rich-black);font-family:var(--font-inter);font-size:.9rem;line-height:1.4}.content-preview-tab{display:flex;flex-direction:column;gap:12px}.content-header{align-items:center;display:flex;justify-content:space-between}.content-header h4{color:var(--rich-black);font-family:var(--font-clash);font-size:1.1rem;font-weight:600;margin:0}.content-length{border-radius:4px;font-size:.85rem;padding:4px 8px}.content-length,.content-text-preview{background:var(--churned-cream);color:var(--graphite);font-family:var(--font-inter)}.content-text-preview{border:1px solid var(--soft-gray);border-radius:8px;font-size:.9rem;line-height:1.6;max-height:300px;overflow-y:auto;padding:16px;white-space:pre-wrap}.technical-grid{gap:16px}.technical-grid,.technical-item{display:flex;flex-direction:column}.technical-item{gap:6px}.technical-item label{color:var(--graphite);font-family:var(--font-inter);font-size:.85rem;font-weight:600}.technical-item code{background:var(--churned-cream);border:1px solid var(--soft-gray);border-radius:4px;color:var(--rich-black);font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;font-size:.8rem;padding:8px 12px;word-break:break-all}.technical-item span{color:var(--rich-black);font-family:var(--font-inter);font-size:.9rem;padding:4px 0}.help-compact{background:var(--white);border-radius:var(--border-radius);box-shadow:var(--card-shadow);overflow:hidden}.help-compact details{padding:0}.help-compact summary{background:var(--churned-cream);border:none;color:var(--graphite);cursor:pointer;font-family:var(--font-inter);font-weight:600;outline:none;padding:16px 20px}.help-compact summary:hover{background:#ffe9001a}.help-content{display:flex;flex-direction:column;gap:8px;padding:16px 20px}.help-content p{color:var(--graphite);font-family:var(--font-inter);font-size:.85rem;line-height:1.4;margin:0}.help-content strong{color:var(--rich-black)}@media (max-width:768px){.debugger-app{padding:16px}.debugger-header h1{font-size:1.8rem}.input-column{gap:8px}.test-btn-compact{align-self:stretch}.status-header{flex-direction:column;gap:12px;text-align:center}.quick-stats{gap:12px;grid-template-columns:1fr}.structure-grid{gap:8px;grid-template-columns:repeat(2,1fr)}.troubleshoot-step{flex-direction:column;text-align:center}.step-number{align-self:center}}.sandbox-player{background:#2a2a2a;border-radius:20px;box-shadow:0 10px 30px #0000004d;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;margin:0 auto;max-width:500px;padding:30px;width:100%}.sandbox-waveform-container{align-items:center;cursor:pointer;display:flex;height:45px;position:relative;transition:height .5s ease;-webkit-user-select:none;user-select:none}.sandbox-player:not(:has(.sandbox-waveform.playing)) .sandbox-waveform-container{height:22px}.sandbox-waveform{align-items:flex-end;display:flex;gap:2px;height:100%;justify-content:center;position:relative;transform-origin:bottom;transition:transform .5s ease;width:100%}.sandbox-waveform:not(.playing){transform:scaleY(.3)}.sandbox-waveform:not(.playing) .sandbox-waveform-bar:not(.active){background:#555!important}.sandbox-waveform:not(.playing) .sandbox-waveform-bar.active{background:#ffe900!important}.sandbox-waveform-bar{background:#555;border-radius:2px;min-width:1px;transition:background-color .2s ease,height .3s ease;width:calc(1.25% - 1.975px)}.sandbox-waveform-bar.active{background:#ffe900}.sandbox-time-display{color:#fff;display:flex;font-size:16px;font-weight:500;justify-content:space-between}.sandbox-current-time{color:#fff}.sandbox-total-time{color:#aaa}.sandbox-controls{gap:30px}.sandbox-control-btn,.sandbox-controls{align-items:center;display:flex;justify-content:center}.sandbox-control-btn{background:none;border:none;border-radius:50%;color:#fff;cursor:pointer;padding:8px;transition:all .2s ease}.sandbox-control-btn:hover{background:#ffffff1a;transform:scale(1.05)}.sandbox-control-btn:active{transform:scale(.95)}.sandbox-play-pause{background:#ffffff1a;border:2px solid #fff3;height:60px;width:60px}.sandbox-play-pause:hover{background:#fff3;border-color:#ffffff4d}.sandbox-skip-back,.sandbox-skip-forward{height:44px;width:44px}.sandbox-skip-back svg,.sandbox-skip-forward svg{opacity:.8}.sandbox-skip-back:hover svg,.sandbox-skip-forward:hover svg{opacity:1}@media (min-width:1200px){.sandbox-player{max-width:600px;padding:35px}.sandbox-waveform-container{height:55px}.sandbox-player:not(:has(.sandbox-waveform.playing)) .sandbox-waveform-container{height:28px}.sandbox-controls{gap:40px}.sandbox-play-pause{height:70px;width:70px}}@media (max-width:1024px) and (min-width:769px){.sandbox-player{max-width:500px;padding:25px}.sandbox-waveform-container{height:42px;margin-bottom:15px}.sandbox-player:not(:has(.sandbox-waveform.playing)) .sandbox-waveform-container{height:21px}.sandbox-controls{gap:25px}.sandbox-play-pause{height:55px;width:55px}.sandbox-skip-back,.sandbox-skip-forward{height:42px;width:42px}}@media (max-width:768px){.sandbox-player{border-radius:15px;margin:0 10px;max-width:100%;padding:20px}.sandbox-waveform-container{height:38px;margin-bottom:12px}.sandbox-player:not(:has(.sandbox-waveform.playing)) .sandbox-waveform-container{height:19px}.sandbox-waveform-bar{gap:1.5px;min-width:1px;width:calc(1.25% - 1.48125px)}.sandbox-time-display{font-size:14px}.sandbox-controls{gap:20px}.sandbox-play-pause{height:50px;width:50px}.sandbox-skip-back,.sandbox-skip-forward{height:40px;width:40px}}@media (max-width:480px){.sandbox-player{border-radius:12px;margin:0 5px;padding:15px}.sandbox-waveform-container{height:35px;margin-bottom:10px}.sandbox-player:not(:has(.sandbox-waveform.playing)) .sandbox-waveform-container{height:18px}.sandbox-waveform-bar{gap:1px;min-width:.5px;width:calc(1.25% - .9875px)}.sandbox-waveform{gap:1px}.sandbox-time-display{font-size:13px}.sandbox-controls{gap:15px}.sandbox-play-pause{height:45px;width:45px}.sandbox-skip-back,.sandbox-skip-forward{height:36px;width:36px}.sandbox-skip-back svg,.sandbox-skip-forward svg{height:20px;width:20px}.sandbox-play-pause svg{height:24px;width:24px}}@media (max-width:360px){.sandbox-player{border-radius:10px;padding:12px}.sandbox-waveform-container{height:32px;margin-bottom:8px}.sandbox-player:not(:has(.sandbox-waveform.playing)) .sandbox-waveform-container{height:16px}.sandbox-time-display{font-size:12px}.sandbox-controls{gap:12px}.sandbox-play-pause{height:40px;width:40px}.sandbox-skip-back,.sandbox-skip-forward{height:32px;width:32px}}.blob-player{height:100%;margin:0 auto;max-height:300px;overflow:hidden;position:relative;width:100%}.blob-player canvas{height:100%!important;width:100%!important}@media (max-width:480px){.blob-player{height:250px}}@media (max-width:360px){.blob-player{height:220px}}.blob-player.synesthesia-mode{transition:all .3s ease}.blob-player.synesthesia-mode canvas{filter:brightness(1.1) saturate(1.2);transition:filter .5s ease}.blob-player canvas{transition:filter .3s ease-in-out}.player-selector{display:flex;justify-content:flex-end}.player-dropdown{background:#fff;border:1px solid #ddd;border-radius:8px;color:#333;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;min-width:150px;outline:none;padding:8px 12px;transition:all .2s ease}.player-dropdown:hover{border-color:#ffe900}.player-dropdown:focus{border-color:#ffe900;box-shadow:0 0 0 2px #ffe90033}@media (max-width:768px){.player-selector{justify-content:center;margin-bottom:12px}.player-dropdown{font-size:13px;min-width:140px;padding:7px 10px}}@media (max-width:480px){.player-dropdown{max-width:200px;width:100%}}.sandbox-audio-player{align-items:center;background:#282828;border-radius:100px!important;box-shadow:inset 0 -3px 4px 0 #00000040,0 3px 4px 0 #00000040;box-sizing:border-box;display:flex;height:75px;justify-content:space-between;max-width:450px;padding:15px;position:relative;width:100%}.sandbox-audio-player__play-pause-btn{align-items:center;border:none;border-radius:50%;cursor:pointer;display:flex;font-size:20px;font-weight:700;height:45px;justify-content:center;width:45px}.sandbox-audio-player__progress-container{background-color:#ffffff29;border-radius:5px;cursor:pointer;flex-grow:1;height:10px;margin-left:15px;position:relative}.sandbox-audio-player__progress-bar{border-radius:5px;height:100%;width:0}.sandbox-audio-player__theme{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:50px;justify-content:center;width:50px}.sandbox-audio-player__time{font-size:16px;margin-left:15px;text-align:right}.sandbox-widget-outline{align-items:center;display:flex;flex-direction:column;width:100%}@media (max-width:480px){.sandbox-audio-player{height:60px;max-width:350px;padding:12px}.sandbox-audio-player__theme{height:40px;width:40px}.sandbox-audio-player__play-pause-btn{font-size:16px;height:35px;width:35px}.sandbox-audio-player__progress-container{height:8px;margin-left:12px}.sandbox-audio-player__time{font-size:14px;margin-left:12px}}@media (max-width:360px){.sandbox-audio-player{height:55px;max-width:320px;padding:10px}.sandbox-audio-player__theme{height:36px;width:36px}.sandbox-audio-player__play-pause-btn{font-size:14px;height:32px;width:32px}.sandbox-audio-player__progress-container{height:6px;margin-left:10px}.sandbox-audio-player__time{font-size:12px;margin-left:10px}}@media (max-width:550px){.sandbox-audio-player{align-items:center;border-radius:100px!important;box-shadow:inset 0 -1px 2px 0 #00000040,0 1px 2px 0 #00000040;box-sizing:border-box;display:flex;height:50px;justify-content:space-between;max-width:95%;padding:15px;position:relative;width:350px}.sandbox-audio-player__play-pause-btn{align-items:center;border:none;border-radius:50%;cursor:pointer;display:flex;font-size:16px;height:28px;justify-content:center;padding:0;width:28px}.sandbox-audio-player__progress-container{border-radius:5px;cursor:pointer;flex-grow:1;height:7px;margin-left:10px;position:relative}.sandbox-audio-player__theme{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:30px;justify-content:center;width:30px}.sandbox-audio-player__time{font-size:12px;margin-left:10px;text-align:right}}.ferrofluid-player-container{align-items:center;display:flex;flex-direction:column;position:relative;width:100%}.ferrofluid-player{background:#0000;border-radius:8px;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none}.ferrofluid-player:hover{transform:translateY(-2px)}.ferrofluid-player:active{transform:translateY(0)}.ferrofluid-player canvas{border-radius:inherit;height:100%!important;width:100%!important}.ferrofluid-player.synesthesia-mode,.ferrofluid-player:not(.initialized){background:#0000}@media (max-width:768px){.ferrofluid-player{border-radius:6px}}@media (max-width:480px){.ferrofluid-player{border-radius:4px}}@media (prefers-contrast:high){.ferrofluid-player{border:2px solid #ffffff4d}}@media (prefers-reduced-motion:reduce){.ferrofluid-player{transition:none}.ferrofluid-player:hover{transform:none}}.canvas-container{background-color:#f8f9fa;display:flex;height:100vh}.sidebar{background:linear-gradient(135deg,#fff,#f0f0f0);border-right:1px solid #e0e0e0;box-shadow:2px 0 10px #0000000d;display:flex;flex-direction:column;overflow-y:auto;padding:20px;width:300px}.sidebar h2{color:#333;font-size:1.5rem;margin-bottom:20px}.color-picker{align-items:center;display:flex;margin-bottom:15px}.color-picker label{color:#555;flex:1 1;margin-right:10px}.color-picker input{border:2px solid #ddd;border-radius:6px;box-shadow:0 2px 4px #0000001a;cursor:pointer;height:40px;transition:border-color .2s;width:40px}.color-picker input:hover{border-color:#999}.drop-zone{border-radius:8px;color:#666;margin:20px 0}.drop-zone:hover{background-color:#f9f9f9;border-color:#999}.drop-zone.dragging{background-color:#f0f8ff;border-color:#007bff;transform:scale(1.02)}.drop-zone.has-audio{background-color:#f8fff9;border-color:#28a745}.drop-zone-content{align-items:center;display:flex;flex-direction:column;gap:8px}.drop-icon{font-size:2rem}.drop-text{font-weight:500}.drop-subtext{font-size:.875rem;opacity:.7}.audio-status{background:#e8f5e8;border:1px solid #28a745;border-radius:8px;margin:15px 0;padding:12px}.audio-indicator{color:#155724;font-weight:500;margin-bottom:8px}.sample-audio-btn{background:#007bff;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:14px;margin-bottom:15px;padding:10px;transition:background-color .2s;width:100%}.sample-audio-btn:hover{background:#0056b3}.clear-audio-btn{background:#dc3545;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:12px;padding:6px 12px;transition:background-color .2s}.clear-audio-btn:hover{background:#c82333}.brand-toggle,.synesthesia-toggle{background:#f0f8ff;border:1px solid #007bff;border-radius:8px;margin:15px 0;padding:12px}.brand-toggle{align-items:center;background:#f8f9fa;border-color:#dee2e6;display:flex;padding:10px 0}.brand-toggle label,.synesthesia-toggle label{color:#555;font-weight:500;margin-right:10px}.synesthesia-description{color:#666;font-size:12px;font-style:italic;margin-top:8px}.player-preview{align-items:center;display:flex;flex:1 1;justify-content:center;min-height:0;padding:20px}.mobile-frame{background:#0000;border-radius:12px;height:auto;max-width:375px;overflow:hidden;position:relative;width:100%}@media (max-width:1024px){.sidebar{width:280px}.mobile-frame{max-width:320px}}@media (max-width:768px){.canvas-container{flex-direction:column;height:auto;min-height:100vh}.sidebar{border-bottom:1px solid #e0e0e0;border-right:none;width:100%}.player-preview,.sidebar{padding:15px}.mobile-frame{max-width:none;width:100%}.color-picker{margin-bottom:12px}.drop-zone{margin:15px 0;padding:15px}}@media (max-width:480px){.sidebar{padding:12px}.sidebar h2{font-size:1.25rem;margin-bottom:15px}.color-picker input{height:35px;width:35px}}.header-demo{background-color:#000;border-radius:50px;box-shadow:0 2px 4px #0000001a;justify-content:flex-start;margin:auto;max-width:1200px;padding:10px 20px;position:relative;width:90%}.header-demo,.header__actions,.header__logo,.header__nav{align-items:center;display:flex}.header__logo img{flex-grow:1;height:30px;margin-left:20px}.header__nav{flex-grow:1;gap:20px;justify-content:flex-start}.header__actions{margin-left:auto}.nav__items{display:flex;margin-right:0;padding-left:20px}.action__link,.nav__link{color:#fff;font-weight:700;padding-left:10px;padding-right:10px;text-decoration:none}.header__actions{align-items:center;display:flex;gap:15px}.login__button{background-color:#ffe900;border:none;border-radius:20px;color:#000;cursor:pointer;font-family:Clash Display,sans-serif;font-size:16px;font-weight:600;padding:8px 15px}.login__button:hover{background-color:#000;color:#fff}.nav-toggle{background:none;border:none;cursor:pointer;display:none}.nav-toggle .hamburger{background:#fff;display:block;height:2px;position:relative;transition:background 0s ease-in-out .3s;width:30px}.nav-toggle.toggled .hamburger{background:#0000}.nav-toggle .hamburger:after,.nav-toggle .hamburger:before{background:#fff;content:"";display:block;height:2px;position:absolute;transition:transform .3s ease-in-out;width:30px}.nav-toggle .hamburger:before{transform:translateY(8px) rotate(45deg)}.nav-toggle .hamburger:after{transform:translateY(-8px) rotate(-45deg)}.nav-toggle.toggled .hamburger:before{transform:rotate(-45deg)}.nav-toggle.toggled .hamburger:after{transform:rotate(45deg)}@media (max-width:768px){.header-demo{justify-content:space-between;padding-left:5%;padding-right:5%;width:80%}.header__actions,.header__logo,.header__nav{width:auto}.nav-toggle{align-items:center;cursor:pointer;display:flex;height:40px;justify-content:flex-start;margin-left:auto;position:relative;width:40px;z-index:10}.header__nav{background-color:#000;border-radius:0 0 20px 20px;display:none;flex-direction:column;overflow:hidden;position:absolute;right:0;top:100%;width:100%;z-index:5}.nav-visible{display:flex}.header__actions,.nav__items{align-items:center;display:flex;flex-direction:column;width:100%}.action__link,.nav__link{padding:10px;text-align:center;width:100%}.login__button{width:calc(100% - 40px)}}.audio-player{align-items:center;background:#282828;border-radius:100px!important;box-shadow:inset 0 -3px 4px 0 #00000040,0 3px 4px 0 #00000040;box-sizing:border-box;display:flex;height:75px;justify-content:space-between;padding:15px;position:relative;width:450px}.audio-player__play-pause-btn{align-items:center;border:none;border-radius:50%;cursor:pointer;display:flex;font-size:20px;font-weight:700;height:45px;justify-content:center;width:45px}.audio-player__progress-container{background-color:#ffffff29;border-radius:5px;cursor:pointer;flex-grow:1;height:10px;margin-left:15px;position:relative}.audio-player__progress-bar{border-radius:5px;height:100%;width:0}.audio-player__theme{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:50px;justify-content:center;width:50px}.audio-player__time{font-size:16px;margin-left:15px;text-align:right}.audio-player-widget,.widget-outline{align-items:center;display:flex;flex-direction:column;width:100%}.audio-player-widget{height:100%;justify-content:center;padding-top:2%}.loader-container{align-items:center;display:flex;justify-content:center}.svg-button{background:#0000;max-width:150px}.powered-by-logo{color:#000;margin-top:10px;text-align:center}.powered-by-logo a{color:#000;text-decoration:none}@media (max-width:480px){.audio-player{height:60px;padding:12px;width:350px}.audio-player__theme{height:40px;width:40px}.audio-player__play-pause-btn{font-size:16px;height:35px;width:35px}.audio-player__progress-container{height:8px;margin-left:12px}.audio-player__time{font-size:14px;margin-left:12px}}@media (max-width:360px){.audio-player{height:55px;padding:10px;width:320px}.audio-player__theme{height:36px;width:36px}.audio-player__play-pause-btn{font-size:14px;height:32px;width:32px}.audio-player__progress-container{height:6px;margin-left:10px}.audio-player__time{font-size:12px;margin-left:10px}}.powered-by-logo img{height:20px;vertical-align:middle}.out-of-credits-container img{display:block;margin:0 auto;max-width:150px}@media (max-width:550px){.audio-player{align-items:center;border-radius:100px!important;box-shadow:inset 0 -1px 2px 0 #00000040,0 1px 2px 0 #00000040;box-sizing:border-box;display:flex;height:50px;justify-content:space-between;max-width:95%;padding:15px;position:relative;width:350px}.audio-player__play-pause-btn{align-items:center;border:none;border-radius:50%;cursor:pointer;display:flex;font-size:16px;height:28px;justify-content:center;padding:0;width:28px}.audio-player__progress-container{border-radius:5px;cursor:pointer;flex-grow:1;height:7px;margin-left:10px;position:relative}.audio-player__theme{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:30px;justify-content:center;width:30px}.audio-player__time{font-size:12px;margin-left:10px;text-align:right}.out-of-credits-container img,.svg-button{max-width:100px}}.demo-full-page{background-image:linear-gradient(#fff5c7,#fcffe7);min-height:100vh;padding-top:10px}.demo-page{display:flex;flex-direction:row;margin:20px}.left-panel{max-width:50vw}.left-panel,.right-side-demo{display:flex;flex:1 1;flex-direction:column;margin:10px}.right-side-demo{align-items:stretch;padding:20px;position:relative}.design-demo-component{background-color:#f0f0f0;border-bottom:2px solid #ffd600;border-radius:8px;box-shadow:0 4px 8px #0000001a;margin:20px auto;max-width:600px;padding:20px;width:90%}design-demo-component h2{margin-bottom:10px;text-align:center}.question,.questions{margin-bottom:10px}.question{display:flex}.question label{flex:0 0 120px;line-height:32px}.color-boxes{align-items:center;display:flex}.color-box{border-radius:5px;cursor:pointer;height:25px;margin-right:10px;width:50px}.voice-options{border-radius:70px;font-family:Clash Display,sans-serif;padding:10px;width:100px}.drop-zone{border:2px dashed #ccc;border-radius:4px;cursor:pointer;padding:20px;text-align:center;transition:all .3s ease}.drop-zone.dragging{background-color:#f0f0f0;border-color:#999}.drop-zone.has-file{background-color:#e6f7ff;border-color:#1890ff}.money-icon{height:16px;margin-left:5px;vertical-align:middle;width:16px}@media (max-width:768px){.demo-page{flex-direction:column;margin:10px}.left-panel,.right-side-demo{margin:10px 0;max-width:100%}.left-panel{order:1}.right-side-demo{order:2;padding:10px}design-demo-component{margin-top:20px;padding:10px 10px 5%}.demo-full-page{height:100%}}.design-option{align-items:center;display:flex;margin-bottom:10px}.design-option label{align-items:center;display:flex;margin-right:10px}.btn-large{font-size:1rem;padding:.75rem 1.75rem}.language-step{display:flex;flex-direction:column;gap:2rem}.language-step__header{text-align:center}.language-step__title{color:var(--text-black);font-family:var(--font-clash);font-size:2rem;margin:0}.language-step__subtitle{color:#0e0e0eb3;font-size:1rem;margin-top:.5rem}.language-step__grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}.language-step__option{align-items:center;background:#fff;border:2px solid #e5e7eb;border-radius:var(--border-radius);cursor:pointer;display:flex;flex-direction:column;gap:.75rem;justify-content:center;padding:1.5rem 1rem;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.language-step__option:focus-visible{border-color:var(--butter-yellow);box-shadow:0 0 0 3px #f6c64459;outline:none}.language-step__option:hover{transform:translateY(-4px)}.language-step__option.is-selected,.language-step__option:hover{border-color:var(--butter-yellow);box-shadow:var(--card-shadow)}.language-step__emoji{display:block;font-size:2.75rem;line-height:1}.language-step__label{color:var(--text-black);font-size:1rem;font-weight:600}.overview-step{align-items:stretch;display:flex;flex-direction:column;gap:2rem}.overview-step__header{text-align:center}.overview-step__title{font-family:var(--font-clash);font-size:2rem;margin:0}.overview-step__subtitle{color:#0e0e0eb3;font-size:1.05rem;margin:0 0 1.5rem;text-align:left}.overview-step__cards{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}.overview-step__card{background:#fff;border:2px solid #e5e7eb;border-radius:var(--border-radius);cursor:pointer;display:flex;flex-direction:column;gap:1rem;padding:1.75rem;position:relative;text-align:left;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.overview-step__card:hover{transform:translateY(-6px)}.overview-step__card.is-selected,.overview-step__card:hover{border-color:var(--butter-yellow);box-shadow:var(--card-shadow)}.overview-step__card.is-selected{transform:translateY(-8px)}.overview-step__card.is-locked{border-style:dashed;cursor:not-allowed;opacity:.6}.overview-step__card.is-locked:hover{border-color:#d1d5db;box-shadow:none;transform:none}.overview-step__lock-banner{align-items:center;background:#0e0e0eeb;border-radius:999px;color:#fff;display:inline-flex;font-size:.75rem;font-weight:600;gap:.25rem;letter-spacing:.01em;padding:.35rem .6rem;position:absolute;right:1rem;top:1rem}.overview-step__lock-icon{font-size:.85rem;line-height:1}.overview-step__card h4{font-family:var(--font-clash);font-size:1.4rem;margin:0 0 .5rem}.overview-step__card p{color:#0e0e0ebf;margin:0}.overview-step__card ul{color:var(--text-black);margin:0;padding-left:1.25rem}.overview-step__card li{margin-bottom:.4rem}.overview-step__examples{display:flex;flex-direction:column;gap:.5rem}.overview-step__examples-label{color:#0e0e0e99;font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.overview-step__examples-links{display:flex;flex-direction:column;gap:.35rem}.overview-step__examples-links a{align-items:center;color:var(--text-black);display:inline-flex;font-size:.95rem;gap:.4rem;text-decoration:none}.overview-step__examples-links a:hover{text-decoration:underline}.overview-step__example-icon{border-radius:4px;height:18px;object-fit:cover;width:18px}.overview-step__cta{align-items:center;background:var(--cream-alt);border-radius:var(--border-radius);display:flex;gap:1.5rem;justify-content:space-between;margin-bottom:20px;padding:1.5rem}.overview-step__cta-text h5{font-family:var(--font-clash);font-size:1.25rem;margin:0}.overview-step__cta-text p{color:#0e0e0ebf;margin:.5rem 0 0}.overview-step__cta-buttons{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:flex-end}.plan-step__header{margin-bottom:2rem;text-align:center}.plan-step__header h3{font-family:var(--font-clash);font-size:2rem;margin:0}.plan-step__header p{color:#0e0e0eb3;margin:.75rem auto 0;max-width:640px}.showcase-step{display:flex;flex-direction:column;gap:2rem}.showcase-step__header{text-align:center}.showcase-step__title{font-family:var(--font-clash);font-size:2rem;margin:0}.showcase-step__subtitle{color:#0e0e0eb3;margin:.75rem auto 0;max-width:640px}.showcase-step__carousel{grid-gap:1rem;align-items:center;display:grid;gap:1rem;grid-template-columns:auto 1fr auto}.showcase-step__nav{background:#fff;border:none;border-radius:50%;box-shadow:var(--card-shadow);cursor:pointer;font-size:1.5rem;height:48px;transition:transform .2s ease;width:48px}.showcase-step__nav:hover{transform:translateY(-2px)}.showcase-step__card{background:#fff;border:2px solid #e5e7eb;border-radius:var(--border-radius);box-shadow:var(--card-shadow);display:flex;flex-direction:column;gap:1rem;padding:2rem;text-align:left}.showcase-step__card h4{font-family:var(--font-clash);font-size:1.5rem;margin:0}.showcase-step__card p{color:#0e0e0ebf;line-height:1.6;margin:0}.showcase-step__link{color:var(--text-black);font-weight:600;text-decoration:none}.showcase-step__link:hover{text-decoration:underline}.showcase-step__badge{align-self:flex-start;border-radius:999px;font-size:.75rem;font-weight:600;letter-spacing:.02em;padding:.35rem .75rem;text-transform:uppercase}.showcase-step__badge--standalone{background:var(--butter-yellow);color:#000}.showcase-step__badge--cms{background:#e0e7ff;color:#312e81}.showcase-step__dots{display:flex;gap:.5rem;justify-content:center}.showcase-step__dot{background:#0e0e0e33;border:none;border-radius:50%;cursor:pointer;height:10px;width:10px}.showcase-step__dot.is-active{background:var(--butter-yellow)}@media (max-width:1024px){.overview-step__cards{grid-template-columns:1fr}}@media (max-width:768px){.language-step__grid{grid-template-columns:1fr}.overview-step__cta{align-items:stretch;flex-direction:column}.overview-step__cta-buttons{justify-content:stretch}.overview-step__cta-buttons .btn{flex:1 1}.showcase-step__carousel{grid-template-columns:1fr}.showcase-step__nav{order:-1}}:root{--butter-yellow:#f6c644;--butter-dark:#c7a032;--cream-bg:#fcfcfa;--cream-alt:#f4f2ec;--text-black:#0e0e0e;--rich-black:#000;--alert-red:#cb3e20;--inactive-gray:#b3b3b3;--bottom-nav-reserve:100px;--border-radius:14px;--card-shadow:0 4px 20px #0000001a;--butter-gradient:linear-gradient(135deg,#f6c644,#c7a032);--font-clash:"Clash Display",-apple-system,BlinkMacSystemFont,sans-serif;--font-body:"Inter",-apple-system,BlinkMacSystemFont,sans-serif}.onboarding-container{box-sizing:border-box;display:flex;flex-direction:column;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-body);margin:0 auto;max-width:1200px;min-height:100vh;padding:1rem;width:100%}.onboarding-blob-player{background:#0000;border-radius:14px;border-radius:var(--border-radius);flex-shrink:0;height:300px;margin:0 auto 1.5rem;overflow:hidden;width:100%}.onboarding-content{flex-direction:column;overflow:visible;padding-bottom:calc(100px + env(safe-area-inset-bottom));padding-bottom:calc(var(--bottom-nav-reserve) + env(safe-area-inset-bottom))}.current-step,.onboarding-content{display:flex;flex:1 1;min-height:0}.current-step{flex-direction:column}.step-content{display:flex;flex:0 1 auto;flex-direction:column;justify-content:flex-start;min-height:0;padding-top:1rem}.step-number{align-items:center;background:#f6c644;background:var(--butter-yellow);border-radius:50%;color:#0e0e0e;color:var(--text-black);display:flex;flex-shrink:0;font-size:1rem;font-weight:700;height:40px;justify-content:center;width:40px}.current-step{background:#fff;border:1px solid #e5e7eb;border-radius:14px;border-radius:var(--border-radius);box-shadow:0 4px 20px #0000001a;box-shadow:var(--card-shadow);flex:0 1 auto;height:auto;max-height:calc(100vh - 100px - 8rem);max-height:calc(100vh - var(--bottom-nav-reserve) - 8rem);overflow-y:auto;padding:2.5rem}.current-step-header{align-items:center;border-bottom:2px solid #e5e7eb;display:flex;gap:.5rem;margin-bottom:.5rem}.current-step .step-title{color:#0e0e0e;color:var(--text-black);flex-grow:1;font-family:Clash Display,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-clash);font-size:1.75rem;font-weight:700;letter-spacing:-.02em;margin:0}.step-container{width:100%}.step-subtitle{color:#0e0e0e;color:var(--text-black);font-size:1rem;line-height:1.5;margin-bottom:2rem;opacity:.8}.btn{border:none;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-body);font-size:.875rem;gap:.375rem;min-width:120px;padding:.625rem 1.25rem;transition:all .15s ease;white-space:nowrap}.btn-primary,.btn-primary:hover{border:2px solid #000}.btn-primary:hover{background:#fff;color:#000}.redirect-message{background:#f4f2ec;background:var(--cream-alt);border-radius:14px;border-radius:var(--border-radius);box-shadow:0 4px 20px #0000001a;box-shadow:var(--card-shadow);color:#000;color:var(--rich-black);font-size:1.1rem;font-weight:600;margin-bottom:2rem;padding:1rem 1.5rem}.btn-primary:disabled{background:#b3b3b3;background:var(--inactive-gray);border:2px solid #b3b3b3;border:2px solid var(--inactive-gray);color:#fff;cursor:not-allowed}.btn-secondary,.btn-secondary:hover{border:2px solid #000}.btn-secondary:hover{background:#000;color:#fff}.step-actions{align-items:center;border-top:1px solid #e5e7eb;display:flex;gap:.75rem;justify-content:space-between;margin-top:2rem;padding-top:1.5rem}.provider-options{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:1fr 1fr;margin:0 auto;max-width:1000px}.provider-card{background:#fff;border:2px solid #e5e7eb;border-radius:14px;border-radius:var(--border-radius);cursor:pointer;padding:1.5rem;transition:all .2s ease}.provider-card:hover{box-shadow:0 4px 20px #0000001a;box-shadow:var(--card-shadow)}.provider-card.selected,.provider-card:hover{border-color:#f6c644;border-color:var(--butter-yellow)}.provider-card.selected{background:#f6c644;background:var(--butter-yellow);color:#0e0e0e;color:var(--text-black)}.provider-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:.5rem}.provider-info{gap:1rem}.provider-icon,.provider-info{align-items:center;display:flex}.provider-icon{background:#f4f2ec;background:var(--cream-alt);border-radius:50%;font-size:1.5rem;height:48px;justify-content:center;width:48px}.provider-logo{height:24px;width:24px}.provider-card.selected .provider-icon{background:#fff;color:#f6c644;color:var(--butter-yellow)}.provider-title{font-family:Clash Display,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-clash);font-size:1.25rem;font-weight:600;margin:0 0 .25rem}.provider-description{font-size:.9rem;margin:0;opacity:.8}.provider-checkbox{align-items:center;background:#fff;border:2px solid #e5e7eb;border-radius:50%;display:flex;height:24px;justify-content:center;width:24px}.provider-card.selected .provider-checkbox{background:#000;background:var(--rich-black);border-color:#000;border-color:var(--rich-black);color:#fff}.api-key-section{background:#f4f2ec;background:var(--cream-alt);border:1px solid #e5e7eb;border-radius:14px;border-radius:var(--border-radius);margin-top:1rem;padding:1.25rem}.api-key-input-group{align-items:stretch;flex-direction:column;gap:.5rem;margin-bottom:1rem}.api-key-input{background:#fff;border:2px solid #e5e7eb;border-radius:14px;border-radius:var(--border-radius);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-body);font-size:1rem;padding:1rem 1.25rem;transition:all .2s ease}.api-key-input.locked{background-color:#f0f9ff;border-color:#10b981}.api-key-input:focus{border-color:#f6c644;border-color:var(--butter-yellow);box-shadow:0 0 0 3px #f6c6441a;outline:none}.api-key-input::placeholder{color:#b3b3b3;color:var(--inactive-gray);opacity:.8}.test-button{background:#fff;border:2px solid #000;border-radius:8px;color:#000;cursor:pointer;flex-shrink:0;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-body);font-size:.875rem;font-weight:600;min-width:0;padding:.75rem 1.25rem;transition:all .15s ease;width:100%}.reset-button-onboarding{background:none;border:2px solid #cb3e20;border:2px solid var(--alert-red);border-radius:8px;color:#cb3e20;color:var(--alert-red);cursor:pointer;font-family:var(--font-inter);font-size:.9rem;font-weight:500;padding:10px 16px;transition:all .2s ease;width:100%}.reset-button-onboarding:hover{background:#cb3e20;background:var(--alert-red);color:#fff}.test-button:hover{background:#000;border:2px solid #000;color:#fff}.test-button:disabled{background:#0000;border-color:#b3b3b3;border-color:var(--inactive-gray);color:#b3b3b3;color:var(--inactive-gray);cursor:not-allowed}.status-message{border-radius:14px;border-radius:var(--border-radius);font-size:.9rem;font-weight:500;margin-bottom:1rem;padding:.75rem 1rem}.status-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534}.status-error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}.status-loading{background:#f0f9ff;border:1px solid #bfdbfe;color:#1e40af}.instructions-link{background:none;border:none;color:#c7a032;color:var(--butter-dark);cursor:pointer;display:block;font-size:.9rem;margin-bottom:1rem;padding:.5rem 0;text-decoration:underline;transition:all .2s ease}.instructions-link,.notice{font-weight:500;text-align:center}.notice{border-radius:14px;border-radius:var(--border-radius);margin-top:1.25rem;padding:.875rem 1rem;width:100%}.notice .notice-text{margin:0}.notice-error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}.notice-warning{background:#fef3cd;border:1px solid #fcd34d;color:#92400e}.instructions-link:hover{color:#0e0e0e;color:var(--text-black);-webkit-text-decoration-color:#f6c644;text-decoration-color:#f6c644;-webkit-text-decoration-color:var(--butter-yellow);text-decoration-color:var(--butter-yellow)}.security-note{color:#b3b3b3;color:var(--inactive-gray);font-size:.85rem;font-style:italic;margin:0;padding:.5rem 0;text-align:center}.player-preview-onboarding{margin-bottom:1.5rem;padding:.5rem 1.5rem;text-align:center}.preview-title{font-size:1.1rem;font-weight:600;margin:0 0 .5rem}.preview-subtitle,.preview-title{color:#0e0e0e;color:var(--text-black)}.preview-subtitle{font-size:.9rem;margin:0 0 1rem;opacity:.7}.player-type-options-onboarding{grid-gap:1.5rem;align-items:stretch;display:grid;gap:1.5rem;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 auto;max-width:1000px}.player-type-card{background:#fff;border:2px solid #e5e7eb;border-radius:14px;border-radius:var(--border-radius);cursor:pointer;display:flex;flex-direction:column;height:100%;padding:1.5rem;position:relative;text-align:left;transition:all .2s ease}.player-config-title{color:#0e0e0e;color:var(--text-black);font-family:Clash Display,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-clash);font-size:1.5rem;font-weight:600;margin-bottom:1rem;text-align:center}.player-type-desc{color:#718096;font-size:.95rem;line-height:1.4;margin:.5rem 0 0}.player-type-best{background:#f7fafc;border-radius:8px;color:#4a5568;font-size:.85rem;margin-top:1rem;padding:.75rem}.player-type-best.active{background:#00000014;color:#0e0e0e;color:var(--text-black)}.player-type-card:hover{transform:translateY(-2px)}.player-type-card.selected,.player-type-card:hover{border-color:#f6c644;border-color:var(--butter-yellow);box-shadow:0 4px 20px #0000001a;box-shadow:var(--card-shadow)}.player-type-card.selected{background:#f6c644;background:var(--butter-yellow);color:#0e0e0e;color:var(--text-black);transform:translateY(-4px)}.player-type-title{color:#0e0e0e;color:var(--text-black);font-family:Clash Display,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-clash);font-size:1.25rem;font-weight:600;margin-bottom:.75rem}.plan-card{background:#fff;border:2px solid #e5e7eb;border-radius:14px;border-radius:var(--border-radius);cursor:pointer;padding:1.5rem;position:relative;transition:all .2s ease}.plan-card:hover{transform:translateY(-2px)}.plan-card.selected,.plan-card:hover{border-color:#f6c644;border-color:var(--butter-yellow);box-shadow:0 4px 20px #0000001a;box-shadow:var(--card-shadow)}.plan-card.selected{transform:translateY(-4px)}.plans-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 auto;max-width:900px}.plan-card .plan-card-top{align-items:center;display:flex;justify-content:space-between;margin-bottom:.75rem}.plan-card .plan-price{background:#f6c644;background:var(--butter-yellow);border-radius:6px;color:#000;font-size:.85rem;font-weight:600;padding:4px 8px}.plan-card-dark{background:#000;color:#fff}.plan-card-dark .plan-title{color:#fff}.plan-card-dark .plan-features{color:#ffffffd9}.plan-badge{font-size:.7rem;padding:3px 8px;position:absolute;right:12px;top:-8px}.plan-badge.deal{background:#f6c644;background:var(--butter-yellow);color:#000}.plan-badge.best{background:#cb3e20;color:#fff}@media (max-width:768px){.plans-grid{gap:1rem;grid-template-columns:1fr;max-width:640px}}@media (max-width:480px){.plans-grid{gap:12px;max-width:100%}.plan-card{border-radius:12px;padding:12px}.plan-card .plan-card-top{margin-bottom:6px}.plan-card .plan-title{font-size:1rem}.plan-card .plan-price{border-radius:6px;font-size:.8rem;padding:3px 6px}.plan-badge{font-size:.65rem;padding:2px 6px;right:10px;top:-6px}.plan-features{font-size:.9rem;opacity:.85}.plan-features li{padding:4px 0}.plan-features li:nth-child(n+3){display:none}}.plan-title{font-family:Clash Display,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-clash);font-size:1.5rem;margin:0}.plan-price,.plan-title{color:#0e0e0e;color:var(--text-black);font-weight:600}.plan-price{background:linear-gradient(135deg,#f6c644,#c7a032);background:var(--butter-gradient);border-radius:14px;border-radius:var(--border-radius);font-size:1rem;padding:8px 16px}.plan-features{color:#0e0e0e;color:var(--text-black);list-style:none;margin:0;opacity:.8;padding:0}.plan-features li{border-bottom:1px solid #f4f2ec;border-bottom:1px solid var(--cream-alt);padding:.5rem 0}.plan-features li:last-child{border-bottom:none}@media (max-width:768px){.current-step{flex:0 1 auto;height:auto;max-height:calc(100vh - 100px - 6rem);max-height:calc(100vh - var(--bottom-nav-reserve) - 6rem);padding:1.25rem}.current-step-header{gap:1rem;margin-bottom:2rem;padding-bottom:1rem}.current-step .step-title{font-size:1.5rem}.step-actions{flex-direction:column;gap:.75rem}.btn{justify-content:center;width:100%}.player-type-options-onboarding,.provider-options{gap:1rem;grid-template-columns:1fr}.player-type-options-onboarding{max-width:640px}.player-type-card{padding:1.5rem}.api-key-input-group{align-items:stretch;flex-direction:column;gap:.5rem}.api-key-section{padding:1.5rem}.api-key-input{font-size:.95rem;padding:.875rem 1rem}.test-button{align-self:stretch;min-width:auto;text-align:center;width:100%}.step-content{padding:0 1rem 1rem}.onboarding-container{min-height:100vh;padding:1rem}.onboarding-blob-player{height:250px;margin-bottom:.75rem;max-width:100%}.step-content{padding:.75rem .5rem}.plan-card{padding:1.5rem}.step-content>div[style*="grid-template-columns: repeat(3, 1fr)"]{grid-template-columns:1fr!important;max-width:400px!important}}@media (max-width:480px){.onboarding-container{padding-left:16px;padding-right:16px}.current-step{border-radius:16px;border-radius:calc(var(--border-radius) + 2px);padding:1rem}.current-step-header{margin-bottom:1rem;padding-bottom:.75rem}.current-step .step-title{font-size:1.35rem}.step-actions{gap:.5rem}}@media (max-width:360px){.onboarding-container{padding-left:12px;padding-right:12px}.current-step .step-title{font-size:1.25rem}}@media (max-height:740px){.onboarding-blob-player{height:240px;margin-bottom:.75rem;max-width:100%}.current-step{max-height:calc(100vh - 100px - 4rem);max-height:calc(100vh - var(--bottom-nav-reserve) - 4rem);padding:1rem}.current-step-header{margin-bottom:.75rem;padding-bottom:.75rem}.step-actions{margin-top:1rem;padding-top:1rem}.player-type-options-onboarding,.provider-options{gap:.75rem}.api-key-section,.plan-card,.player-type-card,.provider-card{padding:1rem}}.settings-container{background:#fdf6e3;font-family:Inter,sans-serif;margin:0 auto;max-width:800px;min-height:100vh;width:100%}.mobile-menu-header{display:none}.settings-tabs{display:flex;padding-bottom:.5rem}.mobile-menu-dropdown{display:none}@media (max-width:768px){.settings-container{padding:1rem}.desktop-tabs{display:none!important}.mobile-menu-header{align-items:center;border-bottom:2px solid var(--butter-yellow);display:flex;justify-content:space-between;margin-bottom:1rem;padding:1rem 0}.current-tab-title{color:#1a1a1a;font-family:Clash Display,sans-serif;font-size:1.5rem;font-weight:700;margin:0;width:100%}.mobile-menu-toggle{align-items:center;background:none;border:none;color:#1a1a1a;cursor:pointer;display:flex;font-size:1.5rem;justify-content:flex-end;padding:.25rem;transition:all .2s ease}.mobile-menu-toggle:hover{color:#666;transform:scale(1.1)}.mobile-menu-dropdown{animation:fadeIn .3s ease-out;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0006;bottom:0;display:block;left:0;position:fixed;right:0;top:0;z-index:2000}.mobile-menu-content{animation:slideDown .4s cubic-bezier(.25,.8,.25,1) forwards;background:#fff;border-radius:0 0 24px 24px;box-shadow:0 8px 32px #0003;left:0;padding:2rem 0 1rem;position:absolute;right:0;top:0;transform:translateY(-100%)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.mobile-tab-button{align-items:center;background:none;border:none;color:#666;cursor:pointer;display:flex;font-family:Clash Display,sans-serif;font-size:1.1rem;font-weight:500;overflow:hidden;padding:1.25rem 2rem;position:relative;text-align:left;transition:all .3s cubic-bezier(.25,.8,.25,1);width:100%}.mobile-tab-button:before{background:var(--butter-yellow);bottom:0;content:"";left:0;position:absolute;top:0;transform:scaleY(0);transition:transform .3s cubic-bezier(.25,.8,.25,1);width:4px}.mobile-tab-button:hover{background:linear-gradient(90deg,#ffe9001a,#0000);color:#1a1a1a;transform:translateX(8px)}.mobile-tab-button.active{background:linear-gradient(90deg,#ffe90033,#0000);color:#1a1a1a;font-weight:700}.mobile-tab-button.active:before{transform:scaleY(1)}}.tab-button{background:none;border:none;border-bottom:3px solid #0000;color:#b3b3b3;cursor:pointer;font-family:Clash Display,sans-serif;font-size:.875rem;font-weight:500;padding:1rem 1.5rem;text-transform:uppercase;transition:all .2s ease}.tab-button:hover{color:#1a1a1a}.tab-button.active{border-bottom-color:#ffe900;color:#000}.privacy-toggle{align-items:center;display:flex;gap:1rem;margin-top:.75rem}.toggle-label{color:#000;font-family:Clash Display,sans-serif;font-size:.8rem;font-weight:500;text-transform:uppercase}.settings-container .switch{display:inline-block;height:28px;position:relative;width:50px}.settings-container .switch input{height:0;opacity:0;width:0}.settings-container .slider{background-color:#e5e5e5;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s}.settings-container .slider:before{background-color:#fff;bottom:4px;content:"";height:20px;left:4px;position:absolute;transition:.4s;width:20px}.settings-container input:checked+.slider{background-color:#000}.settings-container input:focus+.slider{box-shadow:0 0 1px #000}.settings-container input:checked+.slider:before{transform:translateX(22px)}.settings-container .slider.round{border-radius:34px}.settings-container .slider.round:before{border-radius:50%}.settings-content{background:#fff;border-radius:16px;box-shadow:0 6px 16px #00000012;max-height:60vh;overflow-y:auto;padding:2rem;position:relative;transition:transform .3s cubic-bezier(.25,.8,.25,1)}.bug-report-form{max-width:100%}.bug-report-form input[type=email],.bug-report-form input[type=text],.bug-report-form select,.bug-report-form textarea{background:#fff;border:2px solid #e5e7eb;border-radius:8px;box-sizing:border-box;font-family:Inter,sans-serif;font-size:14px;padding:12px 16px;transition:all .2s ease;width:100%}.bug-report-form input[type=email]:focus,.bug-report-form input[type=text]:focus,.bug-report-form select:focus,.bug-report-form textarea:focus{border-color:#f6c644;box-shadow:0 0 0 3px #f6c6441a;outline:none}.bug-report-form label{color:#374151;display:block;font-family:Inter,sans-serif;font-size:14px;font-weight:600;margin-bottom:8px}.bug-report-form .form-group{margin-bottom:24px}.form-row{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-bottom:1rem}@media (max-width:768px){.form-row{grid-template-columns:1fr}}.file-upload-area{margin-top:8px}.upload-zone{background:#f9fafb;border:2px dashed #d1d5db;border-radius:12px;cursor:pointer;padding:32px 24px;position:relative;text-align:center;transition:all .2s ease}.upload-zone.drag-active,.upload-zone:hover{background:#fefce8;border-color:#f6c644}.upload-zone.drag-active{transform:scale(1.02)}.file-input{cursor:pointer;height:100%;opacity:0;position:absolute;width:100%}.upload-label{cursor:pointer;display:block}.upload-icon{font-size:32px;margin-bottom:12px;opacity:.7}.upload-text{color:#374151;font-size:16px;font-weight:500;margin-bottom:8px}.upload-hint{color:#6b7280;font-size:14px;font-weight:400}.uploaded-files{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;margin-top:16px;padding:16px}.uploaded-files h4{color:#374151;font-family:Inter,sans-serif;font-size:14px;font-weight:600;margin:0 0 12px}.file-item{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:6px;display:flex;justify-content:space-between;margin-bottom:8px;padding:8px 12px}.file-item:last-child{margin-bottom:0}.file-info{align-items:center;display:flex;gap:8px}.file-name{color:#374151;font-size:14px;font-weight:500;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{color:#6b7280;font-size:12px;font-weight:400}.remove-file-btn{align-items:center;background:#ef4444;border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:12px;font-weight:600;height:24px;justify-content:center;transition:background-color .2s ease;width:24px}.remove-file-btn:hover{background:#dc2626}.success-message{background:#f0f9ff;border:1px solid #0ea5e9;border-radius:12px;margin-bottom:1rem;padding:2rem;text-align:center}.success-icon{font-size:3rem;margin-bottom:1rem}.success-message h3{color:#0c4a6e;font-family:Clash Display,sans-serif;font-weight:600;margin-bottom:.5rem}.success-message p{color:#0369a1;font-family:Inter,sans-serif;margin-bottom:1.5rem}.bug-report-form .btn{align-items:center;border:none;border-radius:8px;cursor:pointer;display:inline-flex;font-family:Inter,sans-serif;font-size:14px;font-weight:600;justify-content:center;min-height:44px;padding:12px 24px;transition:all .2s ease}.bug-report-form .btn-primary{background:#f6c644;color:#1a1a1a}.bug-report-form .btn-primary:hover:not(:disabled){background:#e6b63a;box-shadow:0 4px 12px #f6c6444d;transform:translateY(-1px)}.bug-report-form .btn-primary:disabled{background:#d1d5db;box-shadow:none;color:#6b7280;cursor:not-allowed;transform:none}.bug-report-form .btn-secondary{background:#6b7280;color:#fff}.bug-report-form .btn-secondary:hover{background:#4b5563}@media (max-width:768px){.settings-content{border-radius:20px;padding:1.5rem;touch-action:pan-x;-webkit-user-select:none;user-select:none}.settings-content:before{background:linear-gradient(90deg,var(--butter-yellow),var(--golden-crust));border-radius:2px;content:"";height:4px;opacity:.6;top:12px;width:40px}.settings-content:after,.settings-content:before{left:50%;position:absolute;transform:translateX(-50%)}.settings-content:after{animation:fadeInOut 3s ease-in-out infinite;bottom:12px;color:#999;content:"← Swipe to navigate →";font-family:Inter,sans-serif;font-size:11px;font-weight:500;opacity:.7}@keyframes fadeInOut{0%,to{opacity:.3}50%{opacity:.8}}}.tab-content h2{color:#000;font-family:Clash Display,sans-serif;font-size:1.5rem;font-weight:600;margin-bottom:1rem;text-transform:uppercase}.tab-description{color:#333;font-size:.9rem;line-height:1.5;margin-bottom:1rem}.settings-container .form-group{display:flex;flex-direction:column;gap:8px;margin-bottom:1rem}.settings-container label{color:#333;font-family:Inter,sans-serif;font-size:.9rem;font-weight:600}.settings-container input[type=email],.settings-container input[type=password],.settings-container input[type=text]{background-color:#fff;border:2px solid #e5e5e5;border-radius:12px;color:#333;font-family:Inter,sans-serif;font-size:.95rem;padding:12px 16px;transition:all .2s ease;width:100%}.settings-container input::placeholder{color:#9ca3af}.settings-container input:focus{border-color:#ffe900;box-shadow:0 0 0 3px #ffe90033;outline:none}.readonly-input{background:#f8f8f8!important;color:#999!important;cursor:not-allowed}.settings-container input:disabled{background:#f8f8f8;color:#999;cursor:not-allowed}.select-input{background:#fff;border:1.5px solid #e0e0e0;border-radius:10px;color:#333;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-family:var(--font-inter,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:14px;padding:12px 14px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.select-input:focus{border-color:#ffe900;box-shadow:0 0 0 3px #ffe90033;outline:none}.api-key-section{background:#fdf6e3;border:1px solid #e5e5e5;border-radius:16px;margin-bottom:1.5rem;padding:1.5rem}.api-provider-header{align-items:center;display:flex;gap:1rem;margin-bottom:1rem}.provider-logo{height:32px;object-fit:contain;width:32px}.api-provider-header h3{color:#000;font-family:Clash Display,sans-serif;font-size:1rem;font-weight:600;margin:0;text-transform:uppercase}.api-provider-header p{color:#333;font-size:.8rem;margin:.25rem 0 0}.api-key-input-group{display:flex;gap:.75rem}.api-key-input{flex:1 1;font-family:SF Mono,Monaco,monospace;font-size:.85rem}.api-key-input.validated{background:#f0f9ff!important;border-color:#7ac043!important}.validation-message{border-radius:8px;font-size:.8rem;margin-top:.75rem;padding:.75rem}.validation-message.success{background:#79c0436b;color:#000}.validation-message.error{background:#e437278c;color:#fff}.validation-message.loading{background:#ffea00b3;color:#000}.security-notice{background:#fdf6e3;border:1px solid #ffe900;border-radius:8px;margin-top:1.5rem;padding:1rem}.security-notice p{color:#000;font-size:.8rem;margin:0}.voice-defaults-section{display:flex;flex-direction:column;gap:24px}.voice-form-group{display:flex;flex-direction:column;gap:8px}.voice-form-label{font-size:.9rem;font-weight:600;margin-bottom:0}.voice-form-label,.voice-form-select{color:#333;font-family:Inter,sans-serif}.voice-form-select{-webkit-appearance:none;appearance:none;background-color:#fff;background-image:url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23333333" d="m0 1 2 2 2-2z"/></svg>');background-position:right 16px center;background-repeat:no-repeat;background-size:12px;border:2px solid #e5e5e5;border-radius:12px;cursor:pointer;font-size:.95rem;padding:12px 16px;transition:all .2s ease;width:100%}.voice-form-select:focus{border-color:#ffe900;box-shadow:0 0 0 3px #ffe90033;outline:none}.voice-form-select:hover{border-color:#ffce00}.provider-select-group{position:relative}.provider-select-group .voice-form-select{background-color:#fdf6e3;border-color:#ffe900;font-weight:600}.voice-select-group{position:relative}.voice-select-group .voice-form-select option{font-size:.9rem;padding:8px}.model-select-group{position:relative}.model-select-group .voice-form-select{background-color:#f8f9fa}.speed-control-group{display:flex;flex-direction:column;gap:12px}.speed-label-container{align-items:center;display:flex;justify-content:space-between}.speed-value-display{background:#000;border-radius:20px;color:#ffe900;font-family:Clash Display,sans-serif;font-size:.8rem;font-weight:600;padding:4px 12px}.speed-slider{-webkit-appearance:none;appearance:none;background:#e5e5e5;border-radius:4px;cursor:pointer;height:8px;margin:8px 0;outline:none;width:100%!important}.speed-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#ffe900;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 6px #00000026;cursor:pointer;height:20px;-webkit-transition:all .2s ease;transition:all .2s ease;width:20px}.speed-slider::-webkit-slider-thumb:hover{background:#ffce00;transform:scale(1.1)}.speed-slider::-moz-range-thumb{background:#ffe900;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 6px #00000026;cursor:pointer;height:20px;-moz-transition:all .2s ease;transition:all .2s ease;width:20px}.speed-slider::-moz-range-thumb:hover{background:#ffce00;transform:scale(1.1)}.speed-labels{color:#b3b3b3;display:flex;font-size:.75rem;justify-content:space-between;margin-top:.5rem}.voice-save-button{align-self:flex-start;background:#000;border:2px solid #000;border-radius:12px;color:#fff;cursor:pointer;font-family:Inter,sans-serif;font-size:.95rem;font-weight:600;margin-top:16px;padding:16px 32px;transition:all .2s ease}.voice-save-button:hover:not(:disabled){background:#fff;border:2px solid #000;color:#000}.voice-save-button:disabled{background:#b3b3b3;border:2px solid #b3b3b3;color:#fff;cursor:not-allowed;opacity:.6}.usage-overview{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:2rem}.usage-card{background:#0e0e0e;border-radius:20px;color:#fffcf2;padding:1.5rem;text-align:center}.usage-card h3{color:#b3b3b3;font-size:.75rem;font-weight:500;margin:0 0 1rem;text-transform:uppercase}.usage-card h3,.usage-number{font-family:Clash Display,sans-serif}.usage-number{color:#fffcf2;font-size:2rem;font-weight:700;margin:.5rem 0}.usage-card small{color:#b3b3b3;font-size:.75rem}.last-updated{color:#b3b3b3;font-size:.8rem;margin-bottom:1.5rem;text-align:center}.usage-note{background:#ffe900;border-radius:8px;color:#000;margin-top:1.5rem;padding:1rem}.usage-note p{font-size:.8rem;margin:0}.dangerous-zone{border-top:2px solid #e43727;margin-top:2rem;padding-top:1.5rem}.dangerous-zone h3{color:#e43727;font-family:Clash Display,sans-serif;font-size:1rem;font-weight:600;margin-bottom:1rem;text-transform:uppercase}.button-group{display:flex;gap:.75rem}.btn{align-items:center;border:2px solid;border-radius:8px;cursor:pointer;display:inline-flex;font-family:Clash Display,sans-serif;font-size:.75rem;font-weight:500;justify-content:center;padding:.75rem 1.5rem;text-decoration:none;text-transform:uppercase;transition:all .2s ease}.btn:disabled{cursor:not-allowed;opacity:.5}.btn-primary{background:#000;border-color:#000;color:#fff}.btn-primary:hover:not(:disabled),.btn-secondary{background:#fff;color:#000}.btn-secondary{border-color:#000}.btn-secondary:hover:not(:disabled){background:#000;color:#fff}.btn-danger{background:#e43727;border-color:#e43727;color:#fff}.btn-danger:hover:not(:disabled){background:#cb3e20;border-color:#cb3e20}.cancel-button,.danger,.login-button{align-items:center;border:2px solid;border-radius:8px;cursor:pointer;display:inline-flex;font-family:Clash Display,sans-serif;font-size:.75rem;font-weight:500;justify-content:center;padding:.75rem 1.5rem;text-decoration:none;text-transform:uppercase;transition:all .2s ease}.login-button{background:#000;border-color:#000;color:#fff}.cancel-button,.login-button:hover:not(:disabled){background:#fff;color:#000}.cancel-button{border-color:#000}.cancel-button:hover:not(:disabled){background:#000;color:#fff}.danger{background:#e43727;border-color:#e43727;color:#fff}.danger:hover:not(:disabled){background:#cb3e20;border-color:#cb3e20}.error-message{background:#e43727;border-radius:8px;color:#fff;font-size:.8rem;margin-bottom:1.5rem;padding:1rem;text-align:center}.loading-spinner{color:#b3b3b3;font-family:Clash Display,sans-serif;font-size:.9rem;height:200px;text-transform:uppercase}.loading-spinner,.settings-modal-overlay{align-items:center;display:flex;justify-content:center}.settings-modal-overlay{background:#00000080;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1000}.settings-modal-container{background:#fff;border-radius:16px;box-shadow:0 6px 16px #00000012;max-width:600px;padding:2rem;width:90%}.settings-modal-container h3{color:#000;font-family:Clash Display,sans-serif;font-size:1.125rem;font-weight:600;margin-bottom:1rem;text-transform:uppercase}.modal-actions{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.5rem}@media (max-width:768px){.settings-container{padding:1rem}.settings-tabs{flex-wrap:wrap}.tab-button{font-size:.75rem;padding:.75rem 1rem}.usage-overview{grid-template-columns:1fr}.api-key-input-group,.button-group{flex-direction:column}}.subscription-zone{background:#ffe9000d;border:2px solid #e5e7eb;border-radius:12px;margin:24px 0;padding:24px}.subscription-zone h3{color:var(--text-black);font-family:var(--font-clash);margin:0 0 16px}.current-plan-info{display:flex;flex-direction:column;gap:16px}.plan-status{align-items:center;display:flex;gap:12px}.plan-tier-label{background:#10b9811f;border-radius:999px;color:#065f46;letter-spacing:.02em;padding:4px 10px}.plan-badge,.plan-tier-label{font-size:.75rem;font-weight:600;text-transform:uppercase}.plan-badge{border-radius:6px;letter-spacing:.5px;padding:6px 12px}.plan-status-text{color:#10b981;font-size:.875rem;font-weight:500}.plan-note{color:#6b7280;font-size:.85rem;line-height:1.4;margin:0}.plan-actions{display:flex;flex-wrap:wrap;gap:12px}.upgrade-cta{display:flex;flex-direction:column;gap:20px}.upgrade-info h4{color:var(--text-black);font-family:var(--font-clash);font-size:1.125rem;font-weight:600;margin:0 0 8px}.upgrade-info p{color:#6b7280;line-height:1.5;margin:0 0 16px}.free-plan-limitations{list-style:none;margin:0;padding:0}.free-plan-limitations li{color:#9ca3af;font-size:.875rem;margin-bottom:4px}.upgrade-btn{align-self:flex-start;background:var(--butter-yellow)!important;border:none!important;color:var(--text-black)!important;font-weight:600!important;padding:12px 20px!important;transition:all .2s ease!important}.upgrade-btn:hover{background:#e6c200!important;transform:translateY(-2px)}@media (max-width:768px){.plan-actions{flex-direction:column}.plan-actions .btn{justify-content:center;width:100%}}