*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}html,body{height:100%}ul,ol{list-style:none}button{background:transparent;border:none;font:inherit;cursor:pointer}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}:root{--primary:#5b5fde;--primary-dark:#4a4ebd;--primary-light:#7b7ef3;--primary-hover:#4a4ebd;--secondary:#ff6b6b;--secondary-dark:#ff5252;--secondary-light:#ff8787;--neutral-50:#fafafa;--neutral-100:#f5f5f5;--neutral-200:#eeeeee;--neutral-300:#e0e0e0;--neutral-400:#bdbdbd;--neutral-500:#9e9e9e;--neutral-600:#757575;--neutral-700:#616161;--neutral-800:#424242;--neutral-900:#212121;--success:#4ade80;--success-light:#86efac;--success-dark:#22c55e;--success-hover:#22c55e;--warning:#fbbf24;--warning-light:#fcd34d;--warning-dark:#f59e0b;--danger:#ef4444;--danger-light:#f87171;--danger-dark:#dc2626;--danger-hover:#dc2626;--info:#3b82f6;--info-light:#60a5fa;--info-dark:#2563eb;--bg-primary:#ffffff;--bg-secondary:#fafafa;--bg-tertiary:#f5f5f5;--bg-card:#ffffff;--bg-input:#fafafa;--bg-hover:#f5f5f5;--bg-dark:#0f0f0f;--bg-dark-secondary:#1a1a1a;--bg-dark-tertiary:#242424;--text-primary:#1a1a1a;--text-secondary:#666666;--text-tertiary:#999999;--text-muted:#bdbdbd;--text-inverse:#ffffff;--border:rgba(0,0,0,0.06);--border-dark:rgba(255,255,255,0.06);--border-hover:rgba(0,0,0,0.12);--space-xs:0.25rem;--space-sm:0.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Inter','SF Pro Display',sans-serif;--font-mono:'SF Mono','Monaco','Consolas','Liberation Mono','Courier New',monospace;--font-light:300;--font-normal:400;--font-medium:500;--font-semibold:600;--font-bold:700;--font-extrabold:800;--leading-tight:1.25;--leading-normal:1.5;--leading-relaxed:1.625;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--shadow-xs:0 1px 2px 0 rgba(0,0,0,0.05);--shadow-sm:0 2px 4px -1px rgba(0,0,0,0.06),0 1px 2px -1px rgba(0,0,0,0.03);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.07),0 2px 4px -2px rgba(0,0,0,0.03);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.08),0 4px 6px -4px rgba(0,0,0,0.03);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.08),0 8px 10px -6px rgba(0,0,0,0.03);--shadow-2xl:0 25px 50px -12px rgba(0,0,0,0.15);--transition-fast:150ms ease;--transition-base:200ms ease;--transition-slow:300ms ease;--z-base:0;--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:1050;--z-popover:1060;--z-tooltip:1070;--sidebar-width:280px;--header-height:64px;--max-content-width:1200px;--touch-target-min:44px;--touch-target-ideal:48px;--card-padding:var(--space-lg);--card-padding-mobile:var(--space-md);--input-padding-y:12px;--input-padding-x:16px;--button-padding-y:12px;--button-padding-x:20px;--section-gap:var(--space-2xl);--component-gap:var(--space-lg);--element-gap:var(--space-md);--contrast-ratio-aa-normal:4.5;--contrast-ratio-aa-large:3;--contrast-ratio-aaa-normal:7;--success-contrast-min:#166534;--success-contrast-max:#4ade80;--danger-contrast-min:#991b1b;--danger-contrast-max:#f87171;--warning-contrast-min:#92400e;--warning-contrast-max:#fbbf24}:root{--radius-2px:2px;--radius-4px:4px;--radius-6px:6px;--radius-8px:8px;--radius-10px:10px;--radius-12px:12px;--radius-16px:16px;--radius-20px:20px;--radius-24px:24px;--radius-32px:32px;--radius-50:50%;--space-2px:2px;--space-4px:4px;--space-6px:6px;--space-8px:8px;--space-10px:10px;--space-12px:12px;--space-14px:14px;--space-16px:16px;--space-20px:20px;--space-24px:24px;--space-32px:32px;--space-40px:40px;--space-48px:48px;--space-64px:64px;--transition-all-fast:all 150ms ease;--transition-all-base:all 200ms ease;--transition-all-slow:all 300ms ease;--transition-all-slower:all 400ms ease;--transition-all-slowest:all 500ms ease;--transition-colors:background-color 200ms ease,border-color 200ms ease,color 200ms ease;--transition-transform:transform 200ms ease;--transition-opacity:opacity 200ms ease;--transition-shadow:box-shadow 200ms ease;--duration-fast:150ms;--duration-base:200ms;--duration-slow:300ms;--duration-slower:400ms;--duration-slowest:500ms;--duration-1s:1000ms;--text-10px:0.625rem;--text-11px:0.6875rem;--text-13px:0.8125rem;--text-14px:0.875rem;--text-15px:0.9375rem;--text-16px:1rem;--text-18px:1.125rem;--text-20px:1.25rem;--text-22px:1.375rem;--text-24px:1.5rem;--text-28px:1.75rem;--text-32px:2rem;--size-icon-sm:16px;--size-icon-md:20px;--size-icon-lg:24px;--size-icon-xl:32px;--size-icon-2xl:40px;--size-icon-3xl:48px;--size-button-sm:32px;--size-button-md:40px;--size-button-lg:48px;--size-button-xl:56px;--z-negative:-1;--z-0:0;--z-10:10;--z-20:20;--z-30:30;--z-40:40;--z-50:50;--z-100:100;--z-200:200;--z-500:500;--z-1000:1000;--z-9999:9999;--opacity-0:0;--opacity-5:0.05;--opacity-10:0.1;--opacity-20:0.2;--opacity-30:0.3;--opacity-40:0.4;--opacity-50:0.5;--opacity-60:0.6;--opacity-70:0.7;--opacity-80:0.8;--opacity-90:0.9;--opacity-95:0.95;--opacity-100:1;--blur-sm:4px;--blur-md:8px;--blur-lg:16px;--blur-xl:24px;--blur-2xl:40px;--gap-2px:2px;--gap-4px:4px;--gap-6px:6px;--gap-8px:8px;--gap-10px:10px;--gap-12px:12px;--gap-16px:16px;--gap-20px:20px;--gap-24px:24px;--gap-32px:32px}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:1.6;color:var(--text-primary);font-weight:var(--font-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;background:var(--bg-primary);margin:0;padding:0;min-height:100vh}h1,h2,h3,h4,h5,h6{margin:0 0 var(--space-md) 0;font-weight:var(--font-semibold);line-height:1.2;color:var(--text-primary);letter-spacing:-0.02em}h1{font-size:var(--text-4xl);font-weight:var(--font-bold);letter-spacing:-0.03em}h2{font-size:var(--text-3xl);font-weight:var(--font-semibold)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}h5{font-size:var(--text-lg)}h6{font-size:var(--text-base)}p{margin:0 0 var(--space-md) 0;line-height:1.7}.lead{font-size:var(--text-lg);line-height:1.7;color:var(--text-secondary);font-weight:var(--font-light)}small,.small{font-size:var(--text-sm);line-height:1.5}a{color:var(--primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--primary-dark);text-decoration:underline}a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-2px)}ul,ol{margin:0 0 var(--space-md) 0;padding-left:var(--space-xl);line-height:1.7}li{margin-bottom:var(--space-xs)}code{font-family:var(--font-mono);font-size:0.875em;padding:0.2em 0.4em;background:var(--bg-tertiary);border-radius:var(--radius-sm);color:var(--text-primary)}pre{font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.5;background:var(--bg-tertiary);border-radius:var(--radius-lg);padding:var(--space-lg);overflow-x:auto;margin:0 0 var(--space-md) 0}pre code{background:none;padding:0}blockquote{margin:0 0 var(--space-md) 0;padding:var(--space-md) var(--space-lg);border-left:4px solid var(--primary);background:var(--bg-tertiary);border-radius:var(--radius-md);font-style:italic;color:var(--text-secondary)}.text-primary{color:var(--text-primary) !important}.text-secondary{color:var(--text-secondary) !important}.text-tertiary{color:var(--text-tertiary) !important}.text-muted{color:var(--text-muted) !important}.text-inverse{color:var(--text-inverse) !important}.text-success{color:var(--success) !important}.text-danger{color:var(--danger) !important}.text-warning{color:var(--warning) !important}.text-info{color:var(--info) !important}.font-light{font-weight:var(--font-light) !important}.font-normal{font-weight:var(--font-normal) !important}.font-medium{font-weight:var(--font-medium) !important}.font-semibold{font-weight:var(--font-semibold) !important}.font-bold{font-weight:var(--font-bold) !important}.text-left{text-align:left !important}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-justify{text-align:justify !important}.text-uppercase{text-transform:uppercase !important}.text-lowercase{text-transform:lowercase !important}.text-capitalize{text-transform:capitalize !important}.text-underline{text-decoration:underline !important}.text-line-through{text-decoration:line-through !important}.text-no-decoration{text-decoration:none !important}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.text-gradient{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}::selection{background:var(--primary);color:white}@media (max-width:768px){h1{font-size:var(--text-3xl)}h2{font-size:var(--text-2xl)}h3{font-size:var(--text-xl)}h4{font-size:var(--text-lg)}h5{font-size:var(--text-base)}h6{font-size:var(--text-sm)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}@keyframes slideInLeft{from{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes scaleIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleOut{from{transform:scale(1);opacity:1}to{transform:scale(0.9);opacity:0}}@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:0.8}100%{transform:scale(1);opacity:1}}@keyframes pulseShadow{0%{box-shadow:0 0 0 0 rgba(91,95,222,0.7)}70%{box-shadow:0 0 0 10px rgba(91,95,222,0)}100%{box-shadow:0 0 0 0 rgba(91,95,222,0)}}@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes rotateScale{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}@keyframes shimmer{0%{background-position:-1000px 0}100%{background-position:1000px 0}}@keyframes wave{0%,100%{transform:translateY(0)}25%{transform:translateY(-5px)}75%{transform:translateY(5px)}}@keyframes glow{0%{box-shadow:0 0 5px rgba(91,95,222,0.5)}50%{box-shadow:0 0 20px rgba(91,95,222,0.8),0 0 30px rgba(91,95,222,0.6)}100%{box-shadow:0 0 5px rgba(91,95,222,0.5)}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-5px)}20%,40%,60%,80%{transform:translateX(5px)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes progress{0%{width:0%}100%{width:100%}}@keyframes ripple{0%{transform:scale(0);opacity:1}100%{transform:scale(4);opacity:0}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}.animate-fadeIn{animation:fadeIn 0.3s ease}.animate-fadeInUp{animation:fadeInUp 0.4s ease}.animate-fadeInDown{animation:fadeInDown 0.4s ease}.animate-slideIn{animation:slideIn 0.3s ease}.animate-scaleIn{animation:scaleIn 0.3s ease}.animate-bounce{animation:bounce 1s ease infinite}.animate-pulse{animation:pulse 2s ease infinite}.animate-spin{animation:spin 1s linear infinite}.animate-float{animation:float 3s ease-in-out infinite}.animation-delay-100{animation-delay:100ms}.animation-delay-200{animation-delay:200ms}.animation-delay-300{animation-delay:300ms}.animation-delay-400{animation-delay:400ms}.animation-delay-500{animation-delay:500ms}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}:root{--safe-area-inset-top:env(safe-area-inset-top,0px);--safe-area-inset-right:env(safe-area-inset-right,0px);--safe-area-inset-bottom:env(safe-area-inset-bottom,0px);--safe-area-inset-left:env(safe-area-inset-left,0px)}*{-webkit-tap-highlight-color:transparent;-webkit-overflow-scrolling:touch}button,a,.clickable,input[type='button'],input[type='submit'],.tab-nav-item,.nav-link{min-height:44px;min-width:44px;position:relative}button+button,.button+.button{margin-left:8px}@media (max-width:768px){.dashboard-container{padding-bottom:calc(60px+var(--safe-area-inset-bottom))}.app-header{position:sticky;top:0;z-index:1000;padding-top:var(--safe-area-inset-top)}.main-content-new{padding:var(--space-md);padding-bottom:calc(80px+var(--safe-area-inset-bottom));min-height:calc(100vh - 120px - var(--safe-area-inset-top))}.card{margin-bottom:16px;border-radius:var(--radius-lg);box-shadow:0 2px 8px rgba(0,0,0,0.1)}input,textarea,select{font-size:var(--text-base);padding:var(--space-12px) 16px;border-radius:var(--radius-md)}.button-group{display:flex;flex-direction:column;gap:var(--space-12px)}.button-group .button{width:100%;justify-content:center}.modal{margin:var(--space-md);max-height:calc(100vh - 32px - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));width:calc(100% - 32px);max-width:none}.modal-content{max-height:calc(100vh - 64px - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));overflow-y:auto}.top-navigation{position:fixed;bottom:0;left:0;right:0;top:auto;padding-bottom:var(--safe-area-inset-bottom);box-shadow:0 -2px 10px rgba(0,0,0,0.1)}.tab-content{padding-bottom:calc(60px+var(--safe-area-inset-bottom))}.timer-display{font-size:48px;padding:var(--space-lg);text-align:center}.audio-player{padding:var(--space-md)}.waveform-container{height:100px;margin:var(--space-md) 0}.audio-controls{flex-wrap:wrap;justify-content:center;gap:var(--space-12px)}.metronome-container{padding:var(--space-md)}.bpm-display{font-size:36px}.tempo-slider{width:100%;height:44px}.session-card{padding:var(--space-md);margin-bottom:12px}.goal-card{padding:var(--space-md);margin-bottom:12px}.goal-progress-bar{height:8px;border-radius:var(--radius-4px)}.stats-grid{grid-template-columns:1fr;gap:var(--space-md)}.stat-card{padding:var(--space-20px);text-align:center}.calendar-container{overflow-x:auto;-webkit-overflow-scrolling:touch}.calendar-grid{min-width:320px}.repertoire-item{padding:var(--space-md);margin-bottom:12px;border-radius:var(--radius-md)}.settings-section{margin-bottom:24px}.settings-group{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-md);margin-bottom:16px}.theme-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-12px)}.theme-option{padding:var(--space-12px);border-radius:var(--radius-md)}}@media (hover:none) and (pointer:coarse){.button:hover,.nav-link:hover{transform:none;box-shadow:none}.button:active,.nav-link:active,.clickable:active{transform:scale(0.95);opacity:0.8}input[type='range']::-webkit-slider-thumb{width:var(--size-icon-xl);height:var(--size-icon-xl)}input[type='range']::-moz-range-thumb{width:var(--size-icon-xl);height:var(--size-icon-xl)}}@media (max-width:768px) and (orientation:landscape){.app-header{padding-top:0;height:50px}.main-content-new{padding-top:12px}.timer-display{font-size:36px;padding:var(--space-md)}.modal{max-height:calc(100vh - 24px);margin:var(--space-12px)}}@media (max-width:375px){.app-header h1{font-size:var(--text-lg)}.tab-nav-item{font-size:10px}.timer-display{font-size:36px}.button{font-size:var(--text-sm);padding:10px var(--space-md)}.card{padding:var(--space-12px)}}@supports (-webkit-touch-callout:none){input,textarea{-webkit-appearance:none;border-radius:0}input[type='text'],input[type='number'],input[type='email'],input[type='password'],select,textarea{font-size:var(--text-base) !important}}.swipe-area{position:absolute;top:0;bottom:0;width:var(--size-icon-md);z-index:10}.swipe-area-left{left:0}.swipe-area-right{right:0}.pull-to-refresh{position:fixed;top:-60px;left:50%;transform:translateX(-50%);width:var(--size-icon-2xl);height:var(--size-icon-2xl);background:var(--bg-primary);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;transition:top 0.3s ease;z-index:1001;box-shadow:0 2px 8px rgba(0,0,0,0.1)}.pull-to-refresh.visible{top:calc(16px+var(--safe-area-inset-top))}.pull-to-refresh.refreshing{animation:spin 1s linear infinite}@keyframes spin{100%{transform:translateX(-50%) rotate(360deg)}}.skeleton{background:linear-gradient( 90deg,var(--bg-secondary) 25%,var(--bg-tertiary) 50%,var(--bg-secondary) 75% );background-size:200% 100%;animation:loading 1.5s infinite;border-radius:var(--radius-4px)}@keyframes loading{0%{background-position:200% 0}100%{background-position:-200% 0}}@media (max-width:768px){#notification,.notification{position:fixed !important;top:auto !important;bottom:calc(16px+var(--safe-area-inset-bottom)) !important;right:16px !important;left:16px !important;max-width:none !important;width:auto !important;height:auto !important;z-index:999999 !important;animation:slideInUp 0.3s ease}}@keyframes slideInDown{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}:focus:not(:focus-visible){outline:none}html:not(.theme-ready) body{visibility:hidden}html[data-theme]{transition:background-color 0.2s ease,color 0.2s ease}html:not(.theme-transitioning) body,html:not(.theme-transitioning) .header,html:not(.theme-transitioning) .sidebar,html:not(.theme-transitioning) .card,html:not(.theme-transitioning) .modal,html:not(.theme-transitioning) .btn,html:not(.theme-transitioning) .form-control,html:not(.theme-transitioning) .achievement-item,html:not(.theme-transitioning) .stats-card,html:not(.theme-transitioning) .practice-session-item,html:not(.theme-transitioning) .tab-content,html:not(.theme-transitioning) .nav-tabs,html:not(.theme-transitioning) .nav-tab{transition:background-color 0.2s ease,color 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease}html:not(.theme-transitioning) .text-muted,html:not(.theme-transitioning) .text-secondary,html:not(.theme-transitioning) .icon,html:not(.theme-transitioning) h1,html:not(.theme-transitioning) h2,html:not(.theme-transitioning) h3,html:not(.theme-transitioning) h4,html:not(.theme-transitioning) h5,html:not(.theme-transitioning) h6,html:not(.theme-transitioning) p,html:not(.theme-transitioning) span,html:not(.theme-transitioning) a,html:not(.theme-transitioning) label{transition:color 0.2s ease,fill 0.2s ease}html:not(.theme-transitioning) svg,html:not(.theme-transitioning) svg path,html:not(.theme-transitioning) svg rect,html:not(.theme-transitioning) svg circle{transition:fill 0.2s ease,stroke 0.2s ease}html:not(.theme-transitioning) .progress,html:not(.theme-transitioning) .progress-bar,html:not(.theme-transitioning) .timer-ring,html:not(.theme-transitioning) .timer-ring-fill{transition:background-color 0.2s ease,stroke 0.2s ease}button,.btn,.button,a.btn,input[type='button'],input[type='submit'],input[type='reset'],.nav-item,.tab-button,.icon-button,.practice-button,.goal-button,.theme-selector button,.audio-control,.metronome-control{min-height:var(--touch-target-min);min-width:var(--touch-target-min);display:inline-flex;align-items:center;justify-content:center;padding:var(--button-padding-y) var(--button-padding-x)}.button-group>*,.nav-list>*,.tab-list>*{margin:calc(var(--space-xs) / 2)}input[type='text'],input[type='email'],input[type='password'],input[type='number'],input[type='tel'],input[type='url'],input[type='search'],input[type='date'],input[type='time'],textarea,select{min-height:var(--touch-target-min);padding:var(--input-padding-y) var(--input-padding-x);line-height:var(--leading-normal)}input[type='checkbox'],input[type='radio']{position:relative;width:var(--size-icon-md);height:var(--size-icon-md);cursor:pointer}input[type='checkbox']::before,input[type='radio']::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--touch-target-min);height:var(--touch-target-min);cursor:pointer}*:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}.skip-to-main{position:absolute;top:-100px;left:0;background:var(--bg-primary);color:var(--text-primary);padding:var(--space-md);z-index:var(--z-tooltip);text-decoration:none;border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}.skip-to-main:focus{top:var(--space-md);left:var(--space-md)}.disabled,:disabled,[aria-disabled='true']{opacity:var(--opacity-disabled);cursor:not-allowed;pointer-events:none}@media (prefers-contrast:high){*{--border:rgba(0,0,0,0.5) !important}button,.btn,input,select,textarea{border:2px solid var(--border) !important}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}h1{font-size:var(--text-3xl);font-weight:var(--font-bold);line-height:var(--leading-tight);margin-bottom:var(--space-lg)}h2{font-size:var(--text-2xl);font-weight:var(--font-semibold);line-height:var(--leading-tight);margin-bottom:var(--space-md)}h3{font-size:var(--text-xl);font-weight:var(--font-semibold);line-height:var(--leading-tight);margin-bottom:var(--space-md)}h4{font-size:var(--text-lg);font-weight:var(--font-medium);line-height:var(--leading-normal);margin-bottom:var(--space-sm)}a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}a:hover{color:var(--primary-dark)}a:visited{color:var(--primary-dark)}.card,.practice-card,.stats-card,.goal-card{padding:var(--card-padding);margin-bottom:var(--component-gap)}section,.section,.content-section{margin-bottom:var(--section-gap)}.component,.widget,.module{margin-bottom:var(--component-gap)}.form-group,.input-group,.button-group{margin-bottom:var(--element-gap)}body{font-size:var(--text-base);line-height:var(--leading-normal);font-weight:var(--font-normal)}p{margin-bottom:var(--space-md);line-height:var(--leading-relaxed)}ul,ol{margin-bottom:var(--space-md);padding-left:var(--space-lg)}li{margin-bottom:var(--space-xs);line-height:var(--leading-normal)}table{width:100%;border-collapse:collapse;margin-bottom:var(--space-lg)}th,td{padding:var(--space-sm) var(--space-md);text-align:left;border-bottom:1px solid var(--border)}th{font-weight:var(--font-semibold);background:var(--bg-secondary)}img:not([alt]){outline:3px solid var(--danger)}.loading::after{content:' Loading...';color:var(--text-secondary);font-style:italic}.error,.error-message,[role='alert']{color:var(--danger);font-weight:var(--font-medium);margin:var(--space-sm) 0}.success,.success-message{color:var(--success-dark);font-weight:var(--font-medium);margin:var(--space-sm) 0}.icon-button{padding:var(--space-sm);border-radius:var(--radius-full)}.icon-button svg,.icon-button i{width:var(--size-icon-lg);height:var(--size-icon-lg)}[data-theme]{position:relative}[data-theme] body{background:var(--bg-primary);background-image:var(--gradient-background,none);background-attachment:fixed;background-size:cover;min-height:100vh}[data-theme] .card,[data-theme] .practice-card,[data-theme] .stats-card,[data-theme] .goal-card,[data-theme] .repertoire-card{background:var(--bg-card);background-image:var(--gradient-card,none);position:relative;overflow:hidden}[data-theme] .card::before,[data-theme] .practice-card::before,[data-theme] .stats-card::before,[data-theme] .goal-card::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient( 135deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.05) 100% );pointer-events:none;z-index:1}[data-theme] .card>*,[data-theme] .practice-card>*,[data-theme] .stats-card>*,[data-theme] .goal-card>*{position:relative;z-index:2}[data-theme] .header,[data-theme] .top-navigation{background:var(--bg-secondary);background-image:linear-gradient( 180deg,var(--bg-secondary) 0%,rgba(var(--bg-secondary),0.95) 100% );backdrop-filter:blur(10px)}[data-theme] .btn-primary,[data-theme] .practice-button{background:var(--primary);background-image:var( --gradient-primary,linear-gradient(135deg,var(--primary-light) 0%,var(--primary) 50%,var(--primary-dark) 100%) );position:relative;overflow:hidden}[data-theme] .btn-success{background:var(--success);background-image:var( --gradient-success,linear-gradient(135deg,var(--success-light) 0%,var(--success) 50%,var(--success-dark) 100%) )}[data-theme] .btn-danger{background:var(--danger);background-image:var( --gradient-danger,linear-gradient(135deg,var(--danger-light) 0%,var(--danger) 50%,var(--danger-dark) 100%) )}[data-theme] .modal-backdrop{background:var(--bg-overlay);backdrop-filter:blur(4px)}[data-theme] .modal-content{background:var(--bg-card);background-image:var(--gradient-card,none)}[data-theme] .sidebar{background:var(--bg-sidebar);background-image:linear-gradient(180deg,var(--bg-sidebar) 0%,var(--bg-secondary) 100%)}[data-theme] .progress-bar{background:var(--primary);background-image:var( --gradient-primary,linear-gradient(90deg,var(--primary-dark) 0%,var(--primary) 50%,var(--primary-light) 100%) )}[data-theme] .tab-button.active{background:var(--bg-primary);background-image:linear-gradient(180deg,var(--bg-primary) 0%,var(--bg-secondary) 100%)}[data-theme] input:not([type='checkbox']):not([type='radio']),[data-theme] textarea,[data-theme] select{background:var(--bg-input);background-image:linear-gradient(180deg,var(--bg-input) 0%,rgba(var(--bg-input),0.95) 100%)}[data-theme] .btn:hover,[data-theme] .card:hover{background-image:linear-gradient(135deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%),var(--gradient-primary,none)}[data-theme] .achievement-badge{background:var(--bg-secondary);background-image:radial-gradient( ellipse at center,var(--bg-secondary) 0%,var(--bg-tertiary) 100% )}[data-theme] .quick-stats{background:var(--bg-card);background-image:linear-gradient(135deg,var(--bg-card) 0%,var(--bg-secondary) 100%)}[data-theme] .calendar-day:hover{background-image:radial-gradient( circle at center,rgba(var(--primary-rgb,91,95,222),0.1) 0%,rgba(var(--primary-rgb,91,95,222),0) 70% )}[data-theme] .tooltip{background:var(--bg-tertiary);background-image:linear-gradient(135deg,var(--bg-tertiary) 0%,var(--bg-secondary) 100%)}[data-theme='dark'] .card::before,[data-theme='midnight-blue'] .card::before,[data-theme='forest-green'] .card::before,[data-theme='cyberpunk'] .card::before{background:linear-gradient( 135deg,rgba(255,255,255,0.03) 0%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.1) 100% )}[data-theme='light'] .card::before,[data-theme*='pastel'] .card::before{background:linear-gradient( 135deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.02) 100% )}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}[data-theme] .loading{background:linear-gradient( 90deg,var(--bg-secondary) 25%,var(--bg-tertiary) 50%,var(--bg-secondary) 75% );background-size:200% 100%;animation:gradientShift 1.5s ease infinite}.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--space-md)}.grid{display:grid;gap:var(--space-md)}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.gap-0{gap:0}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.gap-xl{gap:var(--space-xl)}.col-span-1{grid-column:span 1 / span 1}.col-span-2{grid-column:span 2 / span 2}.col-span-3{grid-column:span 3 / span 3}.col-span-4{grid-column:span 4 / span 4}.col-span-5{grid-column:span 5 / span 5}.col-span-6{grid-column:span 6 / span 6}.col-span-full{grid-column:1 / -1}.flex{display:flex}.inline-flex{display:inline-flex}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-initial{flex:0 1 auto}.flex-none{flex:none}.page-layout{min-height:100vh;display:flex;flex-direction:column}.content-layout{flex:1;display:flex}.main-content{flex:1;padding:var(--space-xl)}.aspect-square{aspect-ratio:1 / 1}.aspect-video{aspect-ratio:16 / 9}.aspect-4-3{aspect-ratio:4 / 3}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky;top:0}.inset-0{top:0;right:0;bottom:0;left:0}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-auto{z-index:auto}.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-width);background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:var(--z-sticky);transition:transform var(--transition-base)}.sidebar-header{padding:var(--space-xl) var(--space-lg);border-bottom:1px solid var(--border);background:var(--bg-primary)}.sidebar-header h2{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary);margin:0;display:flex;align-items:center;gap:var(--space-sm)}.nav-menu{flex:1;overflow-y:auto;padding:var(--space-lg) 0;list-style:none;margin:0}.nav-menu::-webkit-scrollbar{width:4px}.nav-menu::-webkit-scrollbar-track{background:transparent}.nav-menu::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius-2px)}.nav-menu::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.nav-item{margin:var(--space-xs) var(--space-md);border-radius:var(--radius-lg);transition:all var(--transition-fast);cursor:pointer;position:relative;overflow:hidden}.nav-item::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:0;background:var(--primary);border-radius:0 2px 2px 0;transition:height var(--transition-base)}.nav-item:hover{background:var(--bg-hover)}.nav-item.active{background:var(--bg-hover)}.nav-item.active::before{height:var(--size-icon-lg)}.nav-item{display:flex;align-items:center;padding:var(--space-sm) var(--space-md);color:var(--text-secondary);text-decoration:none;font-size:var(--text-sm);font-weight:var(--font-medium);gap:var(--space-md)}.nav-item:hover{color:var(--text-primary)}.nav-item.active{color:var(--primary)}.nav-item .icon{font-size:1.25rem;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}.nav-item span{flex:1}.sidebar-footer{padding:var(--space-lg);border-top:1px solid var(--border);background:var(--bg-primary)}.logout-btn{width:100%;justify-content:flex-start}@media (max-width:768px){.sidebar{transform:translateX(-100%);width:85vw;max-width:320px}.sidebar.active{transform:translateX(0);box-shadow:0 0 50px rgba(0,0,0,0.8)}.sidebar.active::after{content:'';position:fixed;top:0;left:var(--sidebar-width);right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:-1}}@keyframes slideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}.nav-item{animation:slideIn 0.3s ease forwards;animation-delay:calc(var(--i,0) * 0.05s);opacity:0}.nav-item:nth-child(1){--i:1}.nav-item:nth-child(2){--i:2}.nav-item:nth-child(3){--i:3}.nav-item:nth-child(4){--i:4}.nav-item:nth-child(5){--i:5}.nav-item:nth-child(6){--i:6}.nav-item:nth-child(7){--i:7}.nav-item:nth-child(8){--i:8}.app-header{position:fixed;top:0;left:0;right:0;background:rgba(15,23,42,0.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.1);z-index:1000;transition:var(--transition-all-slow)}.header-main-container{display:flex;flex-direction:column}.header-container{height:56px;max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 2rem}.header-left{flex:0 0 auto;min-width:auto}.header-tab-name{font-size:1.375rem;font-weight:700;color:#ffffff;margin:0;letter-spacing:-0.025em;text-shadow:0 2px 4px rgba(0,0,0,0.1)}.header-center{flex:1;display:flex;justify-content:center;align-items:center;padding:0 2rem}.header-status{display:inline-flex;align-items:center;gap:0.75rem;padding:0.5rem 1.25rem;border-radius:var(--radius-2xl);font-size:0.875rem;font-weight:500;backdrop-filter:blur(8px);transition:var(--transition-all-slow);white-space:nowrap}.header-status.status-success{background:rgba(34,197,94,0.15);color:#22c55e;border:1px solid rgba(34,197,94,0.2)}.header-status.status-warning{background:rgba(251,146,60,0.15);color:#fb923c;border:1px solid rgba(251,146,60,0.2)}.header-status.status-error{background:rgba(239,68,68,0.15);color:#ef4444;border:1px solid rgba(239,68,68,0.2)}.status-indicator{width:8px;height:8px;border-radius:var(--radius-full);background:currentColor;box-shadow:0 0 0 2px rgba(255,255,255,0.2);animation:pulse 2s infinite}@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(0.95)}}.status-text{color:inherit}.header-right{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:0.75rem}.sync-status{display:inline-flex;align-items:center;padding:0.375rem 0.875rem;border-radius:var(--radius-2xl);font-size:0.813rem;font-weight:500;transition:var(--transition-all-base);white-space:nowrap}.sync-status.demo-mode{background:rgba(239,68,68,0.15);color:#ef4444;border:1px solid rgba(239,68,68,0.2)}.sync-status.cloud-mode{background:rgba(34,197,94,0.15);color:#22c55e;border:1px solid rgba(34,197,94,0.2)}.header-right{gap:0.5rem}.app-header .theme-toggle{background:rgba(99,102,241,0.2) !important;border:2px solid rgba(99,102,241,0.3) !important;width:var(--size-icon-2xl) !important;height:var(--size-icon-2xl) !important;border-radius:var(--radius-full) !important;padding:0 !important;cursor:pointer;transition:var(--transition-all-slow);display:flex !important;align-items:center;justify-content:center;flex-shrink:0}.theme-name{color:rgba(255,255,255,0.7);font-size:0.813rem;font-weight:500;white-space:nowrap;text-align:right;min-width:100px}.app-header .theme-toggle:hover{background:rgba(255,255,255,0.15) !important;border-color:rgba(255,255,255,0.3) !important;transform:scale(1.05) !important}.app-header .theme-icon{font-size:1.25rem;line-height:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.logout-btn{display:flex;align-items:center;gap:0.25rem;padding:0.375rem 0.75rem;background:transparent;color:rgba(255,255,255,0.7);border:none;font-size:0.813rem;font-weight:500;cursor:pointer;transition:var(--transition-all-base)}.logout-btn:hover{color:#ef4444}.logout-icon{font-size:1rem}.logout-text{white-space:nowrap}.user-avatar{width:36px;height:36px;border-radius:var(--radius-full);background:rgba(255,255,255,0.1);border:2px solid rgba(255,255,255,0.2);padding:0;cursor:pointer;transition:var(--transition-all-base);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.user-avatar:hover{border-color:var(--primary);transform:scale(1.05);box-shadow:0 0 0 3px rgba(99,102,241,0.3)}.user-avatar:active{transform:scale(0.95)}.avatar-image{width:100%;height:100%;object-fit:cover}.avatar-initials{font-size:0.875rem;font-weight:600;color:white;text-transform:uppercase;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);width:100%;height:100%;display:flex;align-items:center;justify-content:center}@media (max-width:1024px){.header-container{padding:0 1.5rem}.header-left{min-width:auto}.header-tab-name{font-size:1.25rem}}@media (max-width:768px){.header-container{padding:0 1rem}.header-left{min-width:auto}.header-tab-name{font-size:1.125rem}.header-center{padding:0 1rem}.header-status{padding:0.375rem 0.875rem;font-size:0.813rem}.theme-name{display:none}.logout-text{display:none}.logout-btn{padding:0.5rem}}[data-theme='light'] .app-header{background:rgba(255,255,255,0.95);border-bottom:1px solid rgba(0,0,0,0.1)}[data-theme='light'] .header-tab-name{color:#1a1a1a}[data-theme='light'] .app-header .theme-toggle{background:rgba(0,0,0,0.05) !important;border-color:rgba(0,0,0,0.1) !important}[data-theme='light'] .app-header .theme-toggle:hover{background:rgba(0,0,0,0.08) !important;border-color:rgba(0,0,0,0.15) !important}[data-theme='light'] .theme-name{color:rgba(0,0,0,0.7)}[data-theme='light'] .logout-btn{color:rgba(0,0,0,0.7)}[data-theme='light'] .logout-btn:hover{color:#ef4444}[data-theme='light'] .user-avatar{background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.1)}[data-theme='light'] .avatar-initials{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%)}@media (min-width:576px){.container{padding:0 var(--space-lg)}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:text-base{font-size:var(--text-base)}}@media (min-width:768px){.main-content{margin-left:0}.mobile-menu-toggle{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:space-x-4>*+*{margin-left:var(--space-md)}.md\:text-lg{font-size:var(--text-lg)}.md\:text-xl{font-size:var(--text-xl)}.md\:block{display:block}.md\:hidden{display:none}}@media (min-width:992px){.container{padding:0 var(--space-xl)}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:text-2xl{font-size:var(--text-2xl)}.lg\:text-3xl{font-size:var(--text-3xl)}}@media (min-width:1200px){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}@media (min-width:1536px){.container{max-width:1536px}.xxl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}@media print{.sidebar,.top-bar,.nav-item,.btn,.mobile-menu-toggle{display:none !important}.main-content{margin:0 !important;padding:0 !important}body{background:white;color:black}.page-break-before{page-break-before:always}.page-break-after{page-break-after:always}.avoid-break{page-break-inside:avoid}}@media (hover:hover){.hover\:scale-105:hover{transform:scale(1.05)}.hover\:shadow-lg:hover{box-shadow:var(--shadow-lg)}.hover\:bg-primary:hover{background-color:var(--primary)}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}@media (prefers-color-scheme:dark){}@media (prefers-color-scheme:light){:root[data-theme='auto']{--bg-dark:#ffffff;--bg-card:#f9fafb;--bg-input:#f3f4f6;--text-primary:#111827;--text-secondary:#4b5563}}@media (prefers-contrast:high){:root{--border:#ffffff;--text-secondary:#e5e7eb}}.btn,button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);font-size:var(--text-base);font-weight:var(--font-medium);line-height:1;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);text-decoration:none;white-space:nowrap;user-select:none;background:var(--bg-secondary);color:var(--text-primary)}button{font-family:inherit}.btn:hover,button:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.btn:active,button:active{transform:translateY(0)}.btn:disabled,button:disabled{opacity:0.5;cursor:not-allowed;transform:none}.btn-primary{background:var(--primary);color:white;border-color:var(--primary)}.btn-primary:hover{background:var(--primary-hover)}.btn-secondary{background:transparent;color:var(--primary);border-color:var(--primary)}.btn-secondary:hover{background:var(--primary);color:white}.btn-danger{background:var(--danger);color:white;border-color:var(--danger)}.btn-ghost{background:transparent;border-color:transparent;padding:var(--space-sm)}.btn-ghost:hover{background:var(--bg-secondary)}.btn-sm{padding:var(--space-xs) var(--space-md);font-size:var(--text-sm)}.btn-lg{padding:var(--space-md) var(--space-xl);font-size:var(--text-lg)}.btn-icon{padding:var(--space-sm);width:2.5rem;height:2.5rem}.btn-icon.btn-sm{width:2rem;height:2rem;padding:var(--space-xs)}.btn-icon.btn-lg{width:3rem;height:3rem;padding:var(--space-md)}.btn-block{width:100%}.btn-group{display:flex;gap:var(--space-xs)}.btn-group .btn{border-radius:0}.btn-group .btn:first-child{border-radius:var(--radius-md) 0 0 var(--radius-md)}.btn-group .btn:last-child{border-radius:0 var(--radius-md) var(--radius-md) 0}.btn-loading{color:transparent;position:relative}.btn-loading::after{content:'';position:absolute;width:1rem;height:1rem;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin 0.5s linear infinite}input[type="date"]{position:relative;color-scheme:light dark;background-color:var(--bg-input);color:var(--text-primary)}input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:1 !important;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3e%3cline x1='16' y1='2' x2='16' y2='6'/%3e%3cline x1='8' y1='2' x2='8' y2='6'/%3e%3cline x1='3' y1='10' x2='21' y2='10'/%3e%3c/svg%3e") !important;background-repeat:no-repeat !important;background-position:center !important;background-size:18px 18px !important;width:25px !important;height:25px !important;transition:all 0.2s;color:transparent !important;background-color:rgba(255,255,255,0.2) !important;border-radius:4px !important;padding:2px !important}input[type="date"]::-webkit-calendar-picker-indicator:hover{background-color:rgba(255,255,255,0.3) !important;transform:scale(1.1)}input[type="date"]::-moz-calendar-picker-indicator{cursor:pointer;opacity:1 !important;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3e%3cline x1='16' y1='2' x2='16' y2='6'/%3e%3cline x1='8' y1='2' x2='8' y2='6'/%3e%3cline x1='3' y1='10' x2='21' y2='10'/%3e%3c/svg%3e") !important;width:25px !important;height:25px !important}input[type="date"]::-webkit-inner-spin-button,input[type="date"]::-webkit-clear-button{display:none !important;-webkit-appearance:none !important}[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,[data-theme="classic"] input[type="date"]::-webkit-calendar-picker-indicator,[data-theme="pastel"] input[type="date"]::-webkit-calendar-picker-indicator{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3e%3cline x1='16' y1='2' x2='16' y2='6'/%3e%3cline x1='8' y1='2' x2='8' y2='6'/%3e%3cline x1='3' y1='10' x2='21' y2='10'/%3e%3c/svg%3e") !important;background-color:rgba(0,0,0,0.05) !important}[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator:hover,[data-theme="classic"] input[type="date"]::-webkit-calendar-picker-indicator:hover,[data-theme="pastel"] input[type="date"]::-webkit-calendar-picker-indicator:hover{background-color:rgba(0,0,0,0.1) !important}.modal-content input[type="date"]::-webkit-calendar-picker-indicator,#goalModal input[type="date"]::-webkit-calendar-picker-indicator{opacity:1 !important;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3e%3cline x1='16' y1='2' x2='16' y2='6'/%3e%3cline x1='8' y1='2' x2='8' y2='6'/%3e%3cline x1='3' y1='10' x2='21' y2='10'/%3e%3c/svg%3e") !important;background-color:rgba(255,255,255,0.25) !important}.form-group{margin-bottom:var(--space-lg)}.form-group label{display:block;margin-bottom:var(--space-sm);font-weight:var(--font-medium);color:var(--text-primary);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:0.025em}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-lg)}.form-control,input[type='text'],input[type='email'],input[type='password'],input[type='number'],input[type='tel'],input[type='url'],input[type='date'],input[type='time'],select,textarea{width:100%;padding:0.75rem 1rem;background:var(--bg-input);border:2px solid transparent;border-radius:var(--radius-lg);color:var(--text-primary);font-size:var(--text-base);font-family:var(--font-sans);transition:all var(--transition-fast);outline:none}.form-control:focus,input:focus,select:focus,textarea:focus{background:var(--bg-primary);border-color:var(--primary);box-shadow:0 0 0 3px rgba(91,95,222,0.1)}.form-control:hover:not(:focus),input:hover:not(:focus),select:hover:not(:focus),textarea:hover:not(:focus){background:var(--bg-hover)}.form-control:disabled,input:disabled,select:disabled,textarea:disabled{opacity:0.5;cursor:not-allowed;background:var(--bg-tertiary)}.form-control:invalid:not(:placeholder-shown),input:invalid:not(:placeholder-shown){border-color:var(--danger)}::placeholder{color:var(--text-muted);opacity:1}select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23999' stroke='%23999' stroke-width='0.5' d='M8 11L3 6h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem;appearance:none;background-size:16px 16px}textarea{min-height:120px;resize:vertical;line-height:1.5}input[type='checkbox'],input[type='radio']{width:1.25rem;height:1.25rem;margin:0;cursor:pointer;accent-color:var(--primary)}.checkbox-label,.radio-label{display:flex;align-items:center;gap:var(--space-sm);cursor:pointer;font-size:var(--text-base);color:var(--text-primary);user-select:none}.checkbox-label:hover input[type='checkbox'],.radio-label:hover input[type='radio']{transform:scale(1.1)}.file-input{display:block;width:100%;padding:var(--space-sm);background:var(--bg-input);border:2px dashed var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast)}.file-input:hover{border-color:var(--primary);background:var(--bg-hover)}.file-input::-webkit-file-upload-button{padding:var(--space-sm) var(--space-md);margin-right:var(--space-md);background:var(--primary);border:none;border-radius:var(--radius-md);color:white;font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-fast)}.file-input::-webkit-file-upload-button:hover{background:var(--primary-dark)}input[type='range']{width:100%;height:6px;background:var(--bg-tertiary);border-radius:var(--radius-full);outline:none;cursor:pointer;-webkit-appearance:none}input[type='range']::-webkit-slider-thumb{-webkit-appearance:none;width:var(--size-icon-md);height:var(--size-icon-md);background:var(--primary);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);box-shadow:0 2px 8px rgba(91,95,222,0.3)}input[type='range']::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 2px 12px rgba(91,95,222,0.5)}input[type='range']::-moz-range-thumb{width:var(--size-icon-md);height:var(--size-icon-md);background:var(--primary);border:none;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);box-shadow:0 2px 8px rgba(91,95,222,0.3)}.form-stats{display:flex;justify-content:space-between;margin:var(--space-lg) 0;padding:var(--space-md);background:var(--bg-tertiary);border-radius:var(--radius-lg)}.stat-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs)}.stat-label{font-size:var(--text-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.05em}.stat-value{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--primary)}.error-message{display:none;margin-top:var(--space-xs);font-size:var(--text-sm);color:var(--danger)}.error-message:not(:empty){display:block}.form-actions{display:flex;gap:var(--space-md);margin-top:var(--space-xl)}@media (max-width:768px){.form-grid{grid-template-columns:1fr}.form-stats{flex-direction:column;gap:var(--space-md)}}.practice-form{padding-bottom:20px}.card{background:var(--bg-card);border-radius:var(--radius-xl);padding:var(--space-xl);box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:all var(--transition-base);position:relative;overflow:hidden}.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.card-gradient{background:var(--bg-card);position:relative;padding:var(--space-xl);border-radius:var(--radius-xl)}.card-gradient::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--radius-xl);padding:1px;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.dashboard-widget{background:var(--bg-card);border-radius:var(--radius-xl);padding:var(--space-xl);box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:all var(--transition-base)}.widget-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg)}.widget-title{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary);margin:0}.widget-action{font-size:var(--text-sm);color:var(--primary);cursor:pointer;background:none;border:none;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);transition:all var(--transition-fast)}.widget-action:hover{background:var(--bg-hover)}.practice-tips{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:white;padding:var(--space-xl);border-radius:var(--radius-xl);margin-bottom:var(--space-lg);position:relative;overflow:hidden}.practice-tips::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%);animation:float 20s ease-in-out infinite}@keyframes float{0%,100%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(30px,-30px) rotate(120deg)}66%{transform:translate(-20px,20px) rotate(240deg)}}.practice-tip{display:flex;align-items:center;gap:var(--space-md);position:relative;z-index:1}.tip-icon{font-size:var(--text-2xl);filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2))}.tip-text{flex:1}.tip-title{font-weight:var(--font-semibold);margin-bottom:var(--space-xs);font-size:var(--text-base)}.tip-description{font-size:var(--text-sm);opacity:0.95;line-height:1.5}.session-item{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-md);margin-bottom:var(--space-sm);transition:all var(--transition-fast);cursor:pointer}.session-item:hover{background:var(--bg-hover);border-color:var(--primary);transform:translateX(4px)}.session-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}.session-date{color:var(--text-secondary);font-size:var(--text-sm)}.session-duration{color:var(--primary);font-weight:var(--font-semibold);font-size:var(--text-sm)}.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-lg);text-align:center;transition:all var(--transition-base)}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.stat-value{font-size:var(--text-3xl);font-weight:var(--font-bold);color:var(--primary);margin-bottom:var(--space-xs)}.stat-label{font-size:var(--text-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.05em}#quickStats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}.quick-stat{text-align:center;padding:var(--space-lg);background:var(--bg-input);border-radius:var(--radius-lg);border:1px solid var(--border);transition:all var(--transition-fast)}.quick-stat:hover{background:var(--bg-hover);border-color:var(--primary)}.empty-state{text-align:center;color:var(--text-secondary);padding:var(--space-2xl);font-style:italic}.empty-state p{margin:var(--space-sm) 0}.empty-state .text-muted{color:var(--text-muted);font-size:var(--text-sm)}@media (max-width:768px){.card,.dashboard-widget{padding:var(--space-lg)}#quickStats{grid-template-columns:1fr}}.modal,.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.75);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:1000001;opacity:0;visibility:hidden;transition:opacity 0.2s ease,visibility 0.2s ease}.modal.show,.modal-overlay-active,.modal[style*='display:block']{display:flex !important;opacity:1 !important;visibility:visible !important}.modal-content{position:relative;background:var(--bg-card);border-radius:12px;box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04),0 0 0 1px rgba(0,0,0,0.05);width:90%;max-width:600px;max-height:85vh;display:flex;flex-direction:column;transform:scale(0.95);transition:transform 0.2s ease;margin:2rem auto;overflow:hidden}.modal.show .modal-content,.modal-active .modal-content,.modal[style*='opacity:1'] .modal-content{transform:scale(1)}.modal-sm .modal-content{max-width:400px}.modal-lg .modal-content{max-width:700px}.modal-xl .modal-content{max-width:900px}.modal-full .modal-content{max-width:95%}.modal-header{padding:0.75rem 1.5rem;background:var(--bg-primary);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.modal-header h2,.modal-header h3{margin:0;font-size:1rem;font-weight:600;color:var(--text-primary);letter-spacing:-0.025em}.modal-close{width:28px;height:28px;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);transition:all 0.2s ease;font-size:1.25rem;line-height:1}.modal-close:hover{background:var(--bg-hover);color:var(--text-primary)}.modal-body{padding:0.75rem 1.5rem;overflow-y:auto;flex:1}.modal-footer{padding:1.5rem 2rem;background:var(--bg-primary);border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:0.75rem;flex-shrink:0}.modal-actions{display:flex;justify-content:flex-end;gap:0.75rem;margin-top:1rem}.modal-body form{display:flex;flex-direction:column;gap:0.5rem}.modal-body .form-group{display:flex;flex-direction:column;gap:0.25rem}.modal-body .form-row{display:flex;gap:1rem}.modal-body .form-row .form-group{flex:1}.modal-body label{font-weight:500;color:var(--text-secondary);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.025em;margin-bottom:0.25rem}.modal-body input,.modal-body select,.modal-body textarea,.modal-input{padding:0.5rem 0.75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text-primary);font-size:0.875rem;transition:border-color 0.2s ease;width:100%}.modal-body input:focus,.modal-body select:focus,.modal-body textarea:focus,.modal-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.1)}.modal-body textarea{min-height:40px;resize:vertical}.modal-body::-webkit-scrollbar{width:8px}.modal-body::-webkit-scrollbar-track{background:var(--bg);border-radius:4px}.modal-body::-webkit-scrollbar-thumb{background:var(--text-tertiary);border-radius:4px}.modal-body::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.modal-alert .modal-footer{justify-content:center}.modal-confirm .modal-footer,.modal-prompt .modal-footer{justify-content:flex-end;gap:0.5rem}@media (max-width:768px){.modal-content{width:95%;margin:1rem;max-height:calc(100vh - 2rem)}.modal-header{padding:1rem}.modal-body{padding:1.5rem}.modal-footer{padding:1rem;flex-wrap:wrap}.modal-footer .btn{flex:1;min-width:100px}}[data-theme='dark'] .modal-content{background:var(--bg-card);border:1px solid var(--border)}.save-loop-modal .modal-content{padding:2rem 2.5rem !important;max-width:500px}.save-loop-modal h3{margin-bottom:1.5rem;font-size:1.25rem;font-weight:600}.save-loop-modal input[type="text"]{width:100%;margin-bottom:1rem}.save-loop-modal .form-group{margin-bottom:1.5rem}.save-loop-modal .modal-actions{margin-top:1.5rem;display:flex;gap:1rem;justify-content:flex-end}.modal-actions{display:flex;justify-content:flex-end;gap:0.75rem;margin-top:1.5rem}.goal-input-row{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;background:var(--bg);padding:1rem;border-radius:var(--radius-lg)}.goal-input-row .goal-minutes-input{width:80px;padding:0.75rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-card);color:var(--text-primary);text-align:center;font-weight:500}.goal-input-row .goal-area-select{flex:1;padding:0.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-card);color:var(--text-primary);font-size:1rem}.goal-input-row .remove-goal-btn{width:40px;height:40px;padding:0;border:none;background:var(--danger);color:white;border-radius:var(--radius-lg);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;line-height:1;transition:all 0.2s ease}.goal-input-row .remove-goal-btn:hover{background:var(--danger-hover);transform:scale(1.05)}.drill-modal .modal-content,.admin-drill-modal .modal-content{padding:1.5rem !important}.drill-modal .modal-body,.admin-drill-modal .modal-body{margin-bottom:0.75rem !important}.drill-modal .modal-body form,.admin-drill-modal .modal-body form{gap:0.25rem !important}.drill-modal .form-group,.admin-drill-modal .form-group{margin-bottom:0.5rem !important}.drill-modal .form-row,.admin-drill-modal .form-row{gap:0.75rem !important;margin-bottom:0.5rem !important}.drill-modal div[style*='margin-top:0.75rem'],.admin-drill-modal div[style*='margin-top:0.75rem']{margin-top:0.25rem !important}.drill-modal textarea,.admin-drill-modal textarea{min-height:2.5rem !important;height:2.5rem !important;resize:vertical;overflow-y:hidden;transition:height 0.2s ease}.drill-modal textarea:focus,.admin-drill-modal textarea:focus,.drill-modal textarea:not(:placeholder-shown),.admin-drill-modal textarea:not(:placeholder-shown){height:auto !important;min-height:60px !important}.drill-modal h4,.admin-drill-modal h4{margin-bottom:0.5rem !important;font-size:0.9rem !important}.drill-modal #drillDescription,.admin-drill-modal #drillDescription,.drill-modal label[for='drillDescription'],.admin-drill-modal label[for='drillDescription'],.drill-modal .form-group:has(#drillDescription),.admin-drill-modal .form-group:has(#drillDescription){display:none !important;visibility:hidden !important;height:0 !important;margin:0 !important;padding:0 !important;overflow:hidden !important}.timer-wrapper{padding:var(--space-2xl);background:var(--bg-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);border:1px solid var(--border)}.timer-display{font-size:var(--text-8xl);font-weight:300;text-align:center;margin:var(--space-xl) auto;padding:var(--space-md);font-variant-numeric:tabular-nums;color:var(--primary);line-height:1.2;min-height:80px;font-family:var(--font-mono)}.timer-subtitle{text-align:center;color:var(--text-secondary);margin-bottom:var(--space-xl);font-size:var(--text-base)}.timer-controls{display:flex;justify-content:center;gap:var(--space-md);margin-bottom:var(--space-xl);flex-wrap:wrap}.timer-sync-control{text-align:center;margin:var(--space-xl) 0;padding:var(--space-xl);background:var(--bg-input);border-radius:var(--radius-lg);border:1px solid var(--border)}.sync-toggle-label{display:inline-flex;align-items:center;gap:var(--space-sm);cursor:pointer;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);transition:var(--transition-base)}.sync-toggle-label:hover{background:var(--bg-card)}.sync-status{margin-top:var(--space-sm);font-size:var(--text-sm);color:var(--text-secondary)}.timer-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);margin-top:var(--space-xl)}.timer-stat{text-align:center}.timer-goal-select{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);color:var(--text-primary);font-size:var(--text-base);width:100%;max-width:150px;cursor:pointer}.timer-progress{background:var(--bg-input);height:var(--size-icon-md);border-radius:var(--radius-full);overflow:hidden;position:relative;width:100%;margin-top:var(--space-sm);border:1px solid var(--border)}.timer-progress-bar{height:100%;background:linear-gradient(90deg,var(--primary) 0%,var(--secondary) 100%);transition:width 0.3s ease;width:0%}.compact-timer-section{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-lg);border:1px solid var(--border)}.compact-timer-wrapper{display:flex;gap:var(--space-xl);align-items:center}@media (max-width:768px){.compact-timer-wrapper{flex-direction:column}}.compact-timer-left{flex:1}.compact-timer-display{font-size:var(--text-3xl);font-weight:300;font-variant-numeric:tabular-nums;color:var(--primary);text-align:center;margin-bottom:var(--space-md)}.compact-timer-controls{display:flex;justify-content:center;gap:var(--space-sm)}.compact-start-btn,.compact-stop-btn,.compact-reset-btn{padding:var(--space-sm) var(--space-md);font-size:var(--text-sm)}.compact-timer-right{flex:1;display:flex;flex-direction:column;gap:var(--space-md)}.compact-timer-goal{display:flex;align-items:center;gap:var(--space-sm)}.compact-timer-goal label{font-size:var(--text-sm);color:var(--text-secondary)}.compact-timer-goal select{flex:1;padding:var(--space-xs) var(--space-sm);font-size:var(--text-sm)}.compact-timer-progress{flex:1}.compact-progress-bar{background:var(--bg-input);height:12px;border-radius:var(--radius-full);overflow:hidden;border:1px solid var(--border)}.compact-progress-fill{height:100%;background:linear-gradient(90deg,var(--primary) 0%,var(--secondary) 100%);transition:width 0.3s ease;width:0%}.compact-timer-sync{display:flex;align-items:center;gap:var(--space-xs)}.compact-sync-toggle{width:var(--size-icon-sm);height:var(--size-icon-sm);cursor:pointer}.compact-sync-label{font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer;user-select:none}@keyframes timerPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}.timer-display.active{animation:timerPulse 1s ease-in-out infinite}.session-timer-widget{position:fixed;bottom:var(--space-xl);left:var(--space-xl);background:var(--bg-card);border:2px solid var(--primary);border-radius:var(--radius-lg);padding:var(--space-md);box-shadow:var(--shadow-xl);z-index:var(--z-fixed);min-width:200px}.session-timer-widget .timer-display{font-size:var(--text-2xl);margin:0;min-height:auto}.session-timer-widget .timer-controls{margin:var(--space-sm) 0 0;gap:var(--space-xs)}.session-timer-widget .btn{padding:var(--space-xs) var(--space-sm);font-size:var(--text-sm)}.timer-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-lg);box-shadow:var(--shadow-md)}.timer-widget{text-align:center}.timer-title{font-size:1.25rem;margin-bottom:var(--space-md);color:var(--text-primary);display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}.timer-display{font-size:3rem;font-weight:700;font-family:'SF Mono','Monaco','Inconsolata','Fira Code',monospace;color:var(--primary);margin:var(--space-lg) 0;letter-spacing:0.05em}.timer-controls{display:flex;gap:var(--space-md);justify-content:center;margin-bottom:var(--space-md)}.timer-controls .btn{min-width:120px}.timer-hint{font-size:0.875rem;color:var(--text-secondary);font-style:italic}.audio-layout,.metronome-layout{display:flex;flex-direction:column;gap:var(--space-lg)}.log-practice-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:var(--space-lg);overflow:hidden;transition:var(--transition-all-slow)}.log-practice-section.collapsed{max-height:60px}.log-practice-section.collapsed .log-practice-content{display:none}.timer-controls button{cursor:pointer;transition:var(--transition-all-base)}.timer-controls button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.timer-controls button:active{transform:translateY(0);box-shadow:var(--shadow-sm)}@media (max-width:768px){.timer-display{font-size:var(--text-3xl);min-height:60px;margin:var(--space-md) 0}.timer-controls{flex-direction:column;gap:var(--space-sm)}.timer-controls .btn{width:100%;min-width:unset;padding:var(--space-md)}.compact-timer-display{font-size:var(--text-2xl)}.compact-timer-wrapper{flex-direction:column;gap:var(--space-md)}}.timer-sync-label{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-md);font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer}.timer-sync-label input[type='checkbox']{cursor:pointer}.timer-sync-label:hover{color:var(--text-primary)}.timer-widget{background:var(--bg-card);border-radius:var(--radius-xl);padding:var(--space-lg) var(--space-xl);box-shadow:var(--shadow-xl);border:1px solid var(--border)}.timer-main-row{display:flex;align-items:center;gap:var(--space-xl);margin-bottom:var(--space-md)}.timer-widget .timer-title{font-size:1.25rem;margin:0;color:var(--text-primary);display:flex;align-items:center;gap:var(--space-sm);white-space:nowrap}.timer-widget .timer-display{font-size:2.5rem;font-weight:700;color:var(--primary);font-family:'SF Mono','Monaco','Inconsolata','Fira Code',monospace;letter-spacing:0.05em;margin:0;flex:1;text-align:center}.timer-widget .timer-controls{display:flex;gap:var(--space-sm);margin-left:auto;margin-bottom:0}.timer-widget .timer-controls .btn{padding:var(--space-sm) var(--space-lg);font-size:1rem;display:flex;align-items:center;gap:var(--space-xs);white-space:nowrap;min-width:auto}.timer-footer{display:flex;justify-content:space-between;align-items:center;padding:0 var(--space-sm)}.timer-widget .timer-sync-label{display:flex;align-items:center;gap:var(--space-sm);cursor:pointer;font-size:0.875rem;color:var(--text-secondary);margin-top:0}.timer-widget .timer-sync-label input[type='checkbox']{width:18px;height:18px;cursor:pointer}.timer-widget .timer-hint{font-size:0.875rem;color:var(--text-secondary);font-style:italic}@media (max-width:768px){.timer-main-row{flex-wrap:wrap;gap:var(--space-md)}.timer-widget .timer-title{width:100%;justify-content:center}.timer-widget .timer-display{font-size:2rem;width:100%}.timer-widget .timer-controls{width:100%;justify-content:center;margin-left:0}.timer-footer{flex-direction:column;gap:var(--space-sm);align-items:center;text-align:center}}.practice-log-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:1000}.practice-log-content{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-lg);max-width:500px;width:90%;max-height:80vh;overflow-y:auto}:root{--audio-icon-play:36px;--audio-icon-stop:36px;--audio-icon-loop:32px;--audio-icon-clear:30px}.audio-section{background:var(--bg-card);border-radius:var(--radius-xl);padding:var(--space-xl);box-shadow:var(--shadow-xl);border:1px solid var(--border)}.audio-upload{text-align:center;margin-bottom:var(--space-xl);padding:var(--space-xl);background:var(--bg-input);border-radius:var(--radius-lg);border:2px dashed var(--border);transition:var(--transition-base)}.audio-upload:hover{border-color:var(--primary);background:var(--bg-card)}.audio-browse-section{padding:1rem !important}.browse-audio-btn{margin-bottom:0.5rem !important}.file-hint{margin-top:0.25rem !important;margin-bottom:0 !important}#audioFileName{margin-top:var(--space-sm);color:var(--text-secondary);font-size:var(--text-sm)}#audioError{margin-top:var(--space-sm);color:var(--danger);font-size:var(--text-sm)}#audioControls{display:none}.audio-controls{display:flex;align-items:center;justify-content:center;gap:var(--space-lg);margin:var(--space-lg) 0;padding:var(--space-lg);background:var(--bg-secondary);border-radius:var(--radius-lg)}.audio-player{background:var(--bg-card);border-radius:var(--radius-xl);padding:var(--space-xl);box-shadow:var(--shadow-lg);margin-bottom:var(--space-xl)}.audio-player-minimal{padding-top:0.5rem !important}.audio-player-minimal .waveform-container{margin-top:1rem !important}.waveform-container{position:relative;background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary) 100%);border-radius:var(--radius-lg);padding:0;margin:var(--space-xl) 0;box-shadow:inset 0 2px 8px rgba(0,0,0,0.1);height:60px;display:flex;align-items:center;justify-content:center;overflow:hidden}.waveform-loading{text-align:center;color:var(--text-secondary)}.btn-control{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-sm);cursor:pointer;transition:var(--transition-base);display:flex;align-items:center;justify-content:center;color:var(--text-primary)}.btn-control:hover{background:var(--bg-hover);border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-control:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.btn-control.active{background:var(--primary);color:white;border-color:var(--primary)}.btn-play-pause svg,.btn-stop svg,#playPauseBtn svg,#stopBtn svg,#youtubePlayPauseBtn svg,#youtubeStopBtn svg,.audio-controls-enhanced .btn-play-pause svg,.audio-controls-enhanced .btn-stop svg,.audio-controls-compact .btn-play-pause svg,.audio-controls-compact .btn-stop svg{width:var(--audio-icon-play) !important;height:var(--audio-icon-play) !important;min-width:var(--audio-icon-play) !important;min-height:var(--audio-icon-play) !important}.loop-toggle svg,.btn-loop-toggle svg,#loopToggleBtn svg,.audio-controls-enhanced .loop-toggle svg,.audio-controls-compact .loop-toggle svg{width:var(--audio-icon-loop) !important;height:var(--audio-icon-loop) !important;min-width:var(--audio-icon-loop) !important;min-height:var(--audio-icon-loop) !important}.btn-loop-clear svg,#loopClearBtn svg,.audio-controls-enhanced .btn-loop-clear svg,.audio-controls-compact .btn-loop-clear svg{width:var(--audio-icon-clear) !important;height:var(--audio-icon-clear) !important;min-width:var(--audio-icon-clear) !important;min-height:var(--audio-icon-clear) !important}.loop-toggle-btn,.btn-loop-toggle,#youtubeLoopToggleBtn,#loopToggleBtn{position:relative;transition:all 0.3s ease;background:var(--bg-secondary);border:2px solid var(--border);transform:scale(1)}.loop-toggle-btn.active,.btn-loop-toggle.active,#youtubeLoopToggleBtn.active,#loopToggleBtn.active,.loop-toggle-btn[data-looping="true"],.btn-loop-toggle[data-looping="true"]{background:var(--primary) !important;color:white !important;border-color:var(--primary-dark) !important;box-shadow:0 0 0 3px rgba(91,95,222,0.2),0 4px 12px rgba(91,95,222,0.3) !important;transform:scale(1.05)}.loop-toggle-btn.active svg,.btn-loop-toggle.active svg,#youtubeLoopToggleBtn.active svg,#loopToggleBtn.active svg{fill:white !important;color:white !important}.loop-toggle-btn:not(.active):hover,.btn-loop-toggle:not(.active):hover,#youtubeLoopToggleBtn:not(.active):hover,#loopToggleBtn:not(.active):hover{background:var(--bg-hover);border-color:var(--primary);transform:translateY(-2px)}@keyframes loopPulse{0%,100%{box-shadow:0 0 0 3px rgba(91,95,222,0.2),0 4px 12px rgba(91,95,222,0.3)}50%{box-shadow:0 0 0 5px rgba(91,95,222,0.15),0 4px 16px rgba(91,95,222,0.4)}}.loop-toggle-btn.active,.btn-loop-toggle.active{animation:loopPulse 2s ease-in-out infinite}.controls-playback-loop{display:flex !important;justify-content:center !important;align-items:center !important;gap:var(--space-xl) !important;margin-bottom:24px !important;padding:var(--space-12px);background:rgba(0,0,0,0.05);border-radius:var(--radius-lg)}.controls-main{display:flex !important;gap:var(--space-lg) !important}.controls-loop{display:flex !important;gap:var(--space-lg) !important}.controls-separator{margin:0 8px !important;opacity:0.3 !important}.audio-controls-compact{text-align:center !important}.controls-speed-pitch{display:flex !important;width:100% !important;max-width:622px !important;padding:var(--space-sm) var(--space-md) !important;margin:var(--space-12px) auto 0 !important;box-sizing:border-box !important;align-items:center !important;justify-content:center !important;flex-wrap:nowrap !important;gap:0 !important;background:rgba(255,255,255,0.03);border-radius:var(--radius-md)}.speed-controls-wrapper,.pitch-controls-wrapper{display:flex !important;align-items:center !important;gap:var(--space-sm) !important;flex-wrap:nowrap !important}.speed-controls-group,.pitch-controls-group{display:flex !important;align-items:center !important;gap:var(--space-xs) !important;flex-shrink:0}.controls-divider{color:var(--text-muted,#6b7280) !important;opacity:0.7 !important;font-size:var(--text-2xl) !important;margin:0 var(--space-sm) !important;user-select:none !important;font-weight:300 !important}.speed-label,.pitch-label{font-size:var(--text-sm) !important;margin-right:var(--space-xs) !important;color:var(--text-secondary);font-weight:600}.value-display-input{min-width:55px !important;max-width:55px !important;padding:4px var(--space-xs) !important;font-size:var(--text-sm) !important;text-align:center !important;color:var(--primary) !important;font-weight:600 !important;background:var(--bg-input) !important;border:1px solid var(--border) !important;border-radius:var(--radius-sm) !important;transition:var(--transition-base) !important}#speedSlider,#youtubeSpeedSlider{max-width:65px !important;min-width:55px !important;width:65px !important}.btn-reset{min-width:55px !important;width:55px !important;padding:var(--space-xs) !important;font-size:var(--text-sm) !important;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-base)}.btn-reset:hover{background:var(--bg-hover);border-color:var(--primary)}#pitchUpBtn,#pitchDownBtn,#youtubePitchUp,#youtubePitchDown{min-width:32px !important;max-width:32px !important;padding:var(--space-xs) 2px !important}#pitchValue,#youtubePitchValue{min-width:25px !important}.loop-controls{display:flex;align-items:center;gap:var(--space-md);margin-top:var(--space-lg)}.loop-toggle{display:flex;align-items:center;gap:var(--space-sm);color:var(--text-secondary)}.loop-marker{display:none;padding:var(--space-xs) var(--space-md);background:var(--bg-secondary);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--text-secondary)}.loop-marker.active{display:block;background:var(--primary);color:white}.save-session-controls{display:flex;align-items:center;margin-bottom:var(--space-xl);padding:var(--space-md);background:var(--bg-secondary);border-radius:var(--radius-lg);justify-content:space-between}.save-session-label{display:flex;align-items:center;gap:var(--space-sm);font-weight:600;color:var(--text-primary)}.volume-control{display:flex;align-items:center;gap:var(--space-md);margin-top:var(--space-lg)}.volume-slider{flex:1;height:6px;background:var(--bg-tertiary);border-radius:var(--radius-full);outline:none;-webkit-appearance:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--primary);border-radius:var(--radius-full);cursor:pointer;box-shadow:var(--shadow-md)}.volume-slider::-moz-range-thumb{width:18px;height:18px;background:var(--primary);border-radius:var(--radius-full);cursor:pointer;box-shadow:var(--shadow-md);border:none}@media (max-width:768px){.audio-browse-section{padding:0.75rem !important}.audio-player-minimal .waveform-container{margin-top:0.75rem !important}.controls-speed-pitch{flex-wrap:wrap !important;gap:var(--space-sm) !important;padding:var(--space-sm) !important}.controls-divider{display:none !important}.speed-controls-wrapper,.pitch-controls-wrapper{width:100%;justify-content:center}.audio-controls{flex-wrap:wrap;gap:var(--space-md);padding:var(--space-md)}.waveform-container{padding:0;height:60px}}@media (max-width:480px){.value-display-input{min-width:50px !important;max-width:50px !important}.btn-reset{min-width:50px !important;width:50px !important;font-size:var(--text-xs) !important}#speedSlider,#youtubeSpeedSlider{max-width:60px !important;min-width:50px !important;width:60px !important}.audio-player{padding:var(--space-md)}.audio-section{padding:var(--space-md)}}.audio-file-player{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-md)}.audio-file-player .audio-controls{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}.audio-file-player .audio-main-controls{display:flex;gap:var(--space-sm)}.audio-file-player .audio-time-display{font-size:var(--text-sm);color:var(--text-secondary)}.audio-file-player .audio-btn{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);cursor:pointer;transition:var(--transition-base);font-size:1.2rem}.audio-file-player .audio-btn:hover{background:var(--bg-hover);border-color:var(--primary);transform:translateY(-1px);box-shadow:var(--shadow-md)}.audio-file-player .audio-btn:active{transform:translateY(0)}.audio-file-player .audio-btn.active{background:var(--primary);color:white;border-color:var(--primary)}.audio-file-player .waveform-container{position:relative;background:var(--bg-secondary);border-radius:var(--radius-md);padding:var(--space-md);margin:var(--space-md) 0;min-height:100px}.audio-file-player .waveform{width:100%;height:100px;cursor:pointer}.audio-file-player .loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--text-secondary)}.audio-file-player .audio-loop-controls{display:flex;align-items:center;gap:var(--space-sm);margin:var(--space-md) 0}.audio-file-player .loop-info{margin-left:var(--space-md);font-size:var(--text-sm);color:var(--text-secondary)}.audio-file-player .audio-speed-pitch-controls{display:flex;gap:var(--space-lg);margin-top:var(--space-md)}.audio-file-player .control-group{flex:1}.audio-file-player .control-group label{display:block;margin-bottom:var(--space-xs);font-size:var(--text-sm);color:var(--text-secondary)}.audio-file-player .control-group input[type='range']{width:100%;height:6px;background:var(--bg-tertiary);border-radius:var(--radius-full);outline:none;-webkit-appearance:none}.audio-file-player .control-group input[type='range']::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--primary);border-radius:var(--radius-full);cursor:pointer}.audio-file-player .control-group input[type='range']::-moz-range-thumb{width:16px;height:16px;background:var(--primary);border-radius:var(--radius-full);cursor:pointer;border:none}[data-theme='dark'] .audio-player,[data-theme='dark'] .audio-section{background:var(--bg-dark-secondary);border-color:var(--border-dark)}[data-theme='dark'] .waveform-container{background:linear-gradient(135deg,var(--bg-dark) 0%,var(--bg-dark-tertiary) 100%)}[data-theme='dark'] .btn-control{background:var(--bg-dark-tertiary);border-color:var(--border-dark);color:white !important}[data-theme='dark'] .btn-control:hover{background:var(--bg-dark-secondary);color:white !important}[data-theme*='dark'] .btn-control,[data-theme*='dark'] .btn-play-pause,[data-theme*='dark'] .btn-stop,[data-theme*='dark'] .btn-loop-toggle,[data-theme*='dark'] .btn-loop-clear,[data-theme*='dark'] .loop-toggle,[data-theme='coffee-brown'] .btn-control,[data-theme='coffee-brown'] .btn-play-pause,[data-theme='coffee-brown'] .btn-stop,[data-theme='coffee-brown'] .btn-loop-toggle,[data-theme='coffee-brown'] .btn-loop-clear,[data-theme='coffee-brown'] .loop-toggle,[data-theme='cosmic-purple'] .btn-control,[data-theme='cosmic-purple'] .btn-play-pause,[data-theme='cosmic-purple'] .btn-stop,[data-theme='cosmic-purple'] .btn-loop-toggle,[data-theme='cosmic-purple'] .btn-loop-clear,[data-theme='cosmic-purple'] .loop-toggle,[data-theme='midnight-blue'] .btn-control,[data-theme='midnight-blue'] .btn-play-pause,[data-theme='midnight-blue'] .btn-stop,[data-theme='midnight-blue'] .btn-loop-toggle,[data-theme='midnight-blue'] .btn-loop-clear,[data-theme='midnight-blue'] .loop-toggle,[data-theme='forest-green'] .btn-control,[data-theme='forest-green'] .btn-play-pause,[data-theme='forest-green'] .btn-stop,[data-theme='forest-green'] .btn-loop-toggle,[data-theme='forest-green'] .btn-loop-clear,[data-theme='forest-green'] .loop-toggle,[data-theme='dracula'] .btn-control,[data-theme='dracula'] .btn-play-pause,[data-theme='dracula'] .btn-stop,[data-theme='dracula'] .btn-loop-toggle,[data-theme='dracula'] .btn-loop-clear,[data-theme='dracula'] .loop-toggle,[data-theme='synthwave'] .btn-control,[data-theme='synthwave'] .btn-play-pause,[data-theme='synthwave'] .btn-stop,[data-theme='synthwave'] .btn-loop-toggle,[data-theme='synthwave'] .btn-loop-clear,[data-theme='synthwave'] .loop-toggle{color:white !important}[data-theme*='dark'] .btn-control svg,[data-theme*='dark'] .btn-play-pause svg,[data-theme*='dark'] .btn-stop svg,[data-theme*='dark'] .btn-loop-toggle svg,[data-theme*='dark'] .btn-loop-clear svg,[data-theme*='dark'] .loop-toggle svg,[data-theme='coffee-brown'] .btn-control svg,[data-theme='coffee-brown'] .btn-play-pause svg,[data-theme='coffee-brown'] .btn-stop svg,[data-theme='coffee-brown'] .btn-loop-toggle svg,[data-theme='coffee-brown'] .btn-loop-clear svg,[data-theme='coffee-brown'] .loop-toggle svg,[data-theme='cosmic-purple'] .btn-control svg,[data-theme='cosmic-purple'] .btn-play-pause svg,[data-theme='cosmic-purple'] .btn-stop svg,[data-theme='cosmic-purple'] .btn-loop-toggle svg,[data-theme='cosmic-purple'] .btn-loop-clear svg,[data-theme='cosmic-purple'] .loop-toggle svg,[data-theme='midnight-blue'] .btn-control svg,[data-theme='midnight-blue'] .btn-play-pause svg,[data-theme='midnight-blue'] .btn-stop svg,[data-theme='midnight-blue'] .btn-loop-toggle svg,[data-theme='midnight-blue'] .btn-loop-clear svg,[data-theme='midnight-blue'] .loop-toggle svg,[data-theme='forest-green'] .btn-control svg,[data-theme='forest-green'] .btn-play-pause svg,[data-theme='forest-green'] .btn-stop svg,[data-theme='forest-green'] .btn-loop-toggle svg,[data-theme='forest-green'] .btn-loop-clear svg,[data-theme='forest-green'] .loop-toggle svg,[data-theme='dracula'] .btn-control svg,[data-theme='dracula'] .btn-play-pause svg,[data-theme='dracula'] .btn-stop svg,[data-theme='dracula'] .btn-loop-toggle svg,[data-theme='dracula'] .btn-loop-clear svg,[data-theme='dracula'] .loop-toggle svg,[data-theme='synthwave'] .btn-control svg,[data-theme='synthwave'] .btn-play-pause svg,[data-theme='synthwave'] .btn-stop svg,[data-theme='synthwave'] .btn-loop-toggle svg,[data-theme='synthwave'] .btn-loop-clear svg,[data-theme='synthwave'] .loop-toggle svg{fill:white !important;color:white !important}[data-theme*='dark'] .btn-control svg path,[data-theme='coffee-brown'] .btn-control svg path,[data-theme='cosmic-purple'] .btn-control svg path,[data-theme='midnight-blue'] .btn-control svg path,[data-theme='forest-green'] .btn-control svg path,[data-theme='dracula'] .btn-control svg path,[data-theme='synthwave'] .btn-control svg path{fill:white !important}[data-theme*='dark'] #youtubePlayPauseBtn svg,[data-theme*='dark'] #youtubeStopBtn svg,[data-theme*='dark'] #youtubeLoopToggleBtn svg,[data-theme*='dark'] #youtubeLoopClearBtn svg,[data-theme='coffee-brown'] #youtubePlayPauseBtn svg,[data-theme='coffee-brown'] #youtubeStopBtn svg,[data-theme='coffee-brown'] #youtubeLoopToggleBtn svg,[data-theme='coffee-brown'] #youtubeLoopClearBtn svg,[data-theme='cosmic-purple'] #youtubePlayPauseBtn svg,[data-theme='cosmic-purple'] #youtubeStopBtn svg,[data-theme='cosmic-purple'] #youtubeLoopToggleBtn svg,[data-theme='cosmic-purple'] #youtubeLoopClearBtn svg,[data-theme='midnight-blue'] #youtubePlayPauseBtn svg,[data-theme='midnight-blue'] #youtubeStopBtn svg,[data-theme='midnight-blue'] #youtubeLoopToggleBtn svg,[data-theme='midnight-blue'] #youtubeLoopClearBtn svg,[data-theme='forest-green'] #youtubePlayPauseBtn svg,[data-theme='forest-green'] #youtubeStopBtn svg,[data-theme='forest-green'] #youtubeLoopToggleBtn svg,[data-theme='forest-green'] #youtubeLoopClearBtn svg,[data-theme='dracula'] #youtubePlayPauseBtn svg,[data-theme='dracula'] #youtubeStopBtn svg,[data-theme='dracula'] #youtubeLoopToggleBtn svg,[data-theme='dracula'] #youtubeLoopClearBtn svg,[data-theme='synthwave'] #youtubePlayPauseBtn svg,[data-theme='synthwave'] #youtubeStopBtn svg,[data-theme='synthwave'] #youtubeLoopToggleBtn svg,[data-theme='synthwave'] #youtubeLoopClearBtn svg{fill:white !important}[data-theme*='dark'] #youtubePlayPauseBtn svg path,[data-theme*='dark'] #youtubeStopBtn svg path,[data-theme*='dark'] #youtubeLoopToggleBtn svg path,[data-theme='coffee-brown'] #youtubePlayPauseBtn svg path,[data-theme='coffee-brown'] #youtubeStopBtn svg path,[data-theme='coffee-brown'] #youtubeLoopToggleBtn svg path,[data-theme='cosmic-purple'] #youtubePlayPauseBtn svg path,[data-theme='cosmic-purple'] #youtubeStopBtn svg path,[data-theme='cosmic-purple'] #youtubeLoopToggleBtn svg path,[data-theme='midnight-blue'] #youtubePlayPauseBtn svg path,[data-theme='midnight-blue'] #youtubeStopBtn svg path,[data-theme='midnight-blue'] #youtubeLoopToggleBtn svg path,[data-theme='forest-green'] #youtubePlayPauseBtn svg path,[data-theme='forest-green'] #youtubeStopBtn svg path,[data-theme='forest-green'] #youtubeLoopToggleBtn svg path,[data-theme='dracula'] #youtubePlayPauseBtn svg path,[data-theme='dracula'] #youtubeStopBtn svg path,[data-theme='dracula'] #youtubeLoopToggleBtn svg path,[data-theme='synthwave'] #youtubePlayPauseBtn svg path,[data-theme='synthwave'] #youtubeStopBtn svg path,[data-theme='synthwave'] #youtubeLoopToggleBtn svg path{fill:white !important}.audio-controls-enhanced{background:transparent;padding:0}.audio-controls-enhanced .waveform-container{position:relative;background:rgba(0,0,0,0.3);border-radius:var(--radius-lg);padding:0;margin:0 0 20px 0;height:60px;overflow:hidden}.audio-controls-enhanced .waveform{width:100%;height:60px;display:block}.audio-controls-enhanced .time-display{text-align:center;margin-bottom:20px;font-size:18px;color:var(--text-primary);font-family:monospace}.audio-controls-enhanced .btn-control{width:48px;height:48px;border-radius:8px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color 0.2s,transform 0.2s,box-shadow 0.2s}.audio-controls-enhanced .btn-control:hover{background:var(--bg-hover);transform:scale(1.05)}.audio-controls-enhanced .btn-control svg{width:24px;height:24px;fill:currentColor}.audio-controls-enhanced .btn-adjust{width:32px;height:32px;border-radius:6px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;font-size:18px;font-weight:600;transition:background-color 0.2s,transform 0.2s,box-shadow 0.2s;display:flex;align-items:center;justify-content:center}.audio-controls-enhanced .btn-adjust:hover{background:var(--bg-hover);border-color:var(--primary)}.audio-controls-enhanced .slider{-webkit-appearance:none;appearance:none;background:transparent;outline:none}.audio-controls-enhanced .slider::-webkit-slider-track{background:var(--bg-tertiary);height:6px;border-radius:3px}.audio-controls-enhanced .slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--primary);border-radius:50%;cursor:pointer;margin-top:-5px}.audio-controls-enhanced .slider::-moz-range-track{background:var(--bg-tertiary);height:6px;border-radius:3px}.audio-controls-enhanced .slider::-moz-range-thumb{width:16px;height:16px;background:var(--primary);border-radius:50%;cursor:pointer;border:none}.metronome-widget{max-width:400px;margin:0 auto;background:var(--bg-card);border-radius:var(--radius-lg);padding:1rem;border:1px solid var(--border);position:relative}.metronome-widget.enhanced{max-width:500px}.metronome-header{text-align:center;margin-bottom:1rem}.metronome-header h3{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin:0;display:flex;align-items:center;justify-content:center;gap:0.5rem}.audio-status{position:absolute;top:1rem;right:1rem;display:flex;align-items:center;gap:0.5rem;font-size:0.875rem}.bpm-display-container{text-align:center;margin:1rem 0}.bpm-display{display:inline-flex;align-items:baseline;gap:0.5rem;background:var(--bg-secondary);border:2px solid var(--primary);border-radius:var(--radius-md);padding:0.75rem 1.5rem;margin:0 auto}.bpm-display.pulse{animation:pulse 0.2s ease-out}.bpm-value-input{font-size:var(--text-3xl);font-weight:var(--font-bold);text-align:center;background:transparent;border:2px solid transparent;border-radius:var(--radius-md);padding:0.25rem 0.5rem;width:120px;color:var(--text-primary);transition:all var(--transition-base);cursor:text}.bpm-value-input:hover{background:var(--bg-hover);border-color:var(--border)}.bpm-value-input:focus{outline:none;background:var(--bg-input);border-color:var(--primary);box-shadow:0 0 0 3px rgba(91,95,222,0.1)}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}.bpm-value{font-size:2.5rem;font-weight:700;color:var(--primary);line-height:1;font-family:'SF Mono','Monaco','Inconsolata',monospace}.bpm-label{font-size:0.875rem;color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:0.05em}.beat-indicator{margin:1rem 0}.beat-lights{display:flex;gap:0.5rem;justify-content:center}.beat-light{width:12px;height:12px;border-radius:var(--radius-full);background:var(--text-muted);opacity:0.3;transition:all 0.1s ease}.beat-light.active{background:var(--primary);opacity:1;transform:scale(1.2)}.beat-light.accent{background:#fbbf24}.beat-counter{text-align:center;margin-top:1rem;font-size:0.875rem;color:var(--text-secondary)}.bpm-controls{display:flex;align-items:center;justify-content:center;gap:0.5rem;margin:1rem 0}.bpm-adjust-btn{background:var(--bg-input);border:1px solid var(--border);color:var(--text-primary);padding:0.75rem 1.25rem;border-radius:var(--radius-md);font-size:1rem;font-weight:500;cursor:pointer;transition:var(--transition-all-base)}.bpm-adjust-btn:hover{background:var(--bg-dark);transform:translateY(-1px)}.bpm-adjust-btn.stop{background:#ef4444;color:white;border:none;padding:0.75rem 2rem}.bpm-adjust-btn.stop:hover{background:#dc2626}.bpm-slider-container{margin:2rem 0;padding:0 1rem}.bpm-slider{width:100%;height:6px;background:linear-gradient( to right,var(--bg-input) 0%,var(--bg-input) var(--progress,50%),var(--border) var(--progress,50%),var(--border) 100% );border-radius:3px;outline:none;appearance:none;cursor:pointer}.bpm-slider::-webkit-slider-thumb{appearance:none;width:var(--size-icon-lg);height:var(--size-icon-lg);background:#6366f1;border-radius:var(--radius-full);cursor:pointer;box-shadow:0 2px 8px rgba(99,102,241,0.3)}.bpm-slider::-moz-range-thumb{width:var(--size-icon-lg);height:var(--size-icon-lg);background:#6366f1;border-radius:var(--radius-full);cursor:pointer;border:none;box-shadow:0 2px 8px rgba(99,102,241,0.3)}.bpm-range-labels{display:flex;justify-content:space-between;margin-top:0.5rem;font-size:0.75rem;color:var(--text-secondary)}.playback-controls{display:flex;justify-content:center;gap:1rem;margin:2rem 0}.play-pause-btn{background:linear-gradient(135deg,#6366f1 0%,#a855f7 100%);color:white;border:none;padding:1rem 2.5rem;border-radius:var(--radius-lg);font-size:1.125rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:0.5rem;transition:var(--transition-all-base);box-shadow:0 4px 16px rgba(99,102,241,0.3)}.play-pause-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(99,102,241,0.4)}.stop-btn{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border);padding:1rem 2rem;border-radius:var(--radius-lg);font-size:1.125rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:0.5rem;transition:var(--transition-all-base)}.stop-btn:hover{background:var(--bg-dark);transform:translateY(-2px)}.metronome-settings{display:grid;grid-template-columns:1fr auto;gap:2rem;margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border)}.setting-group{display:flex;flex-direction:column;gap:0.5rem}.setting-group label{font-size:0.875rem;color:var(--text-secondary);font-weight:500}.setting-group select{padding:0.75rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-input);color:var(--text-primary);font-size:1rem}.accent-pattern{display:flex;align-items:center;gap:0.5rem}.accent-beat-btn{width:var(--size-icon-2xl);height:var(--size-icon-2xl);border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-weight:600;cursor:pointer;transition:var(--transition-all-base)}.accent-beat-btn.accented{background:#6366f1;color:white;border-color:#6366f1}.checkbox-label{display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;color:var(--text-primary);cursor:pointer}.checkbox-label input[type='checkbox']{width:18px;height:18px;accent-color:var(--primary)}.sound-selector{display:flex;flex-direction:column;gap:0.5rem}.enhanced-features{margin-top:var(--space-xl);padding-top:var(--space-xl);border-top:1px solid var(--border)}.enhanced-features h4{margin:0 0 var(--space-lg) 0;color:var(--text-primary);font-size:var(--text-base)}.feature-section{background:var(--bg-input);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-md)}.feature-header{margin-bottom:var(--space-md)}.feature-header label{display:flex;align-items:center;gap:var(--space-sm);cursor:pointer;color:var(--text-primary);font-weight:600}.feature-controls{margin-top:var(--space-md)}.control-row{display:grid;grid-template-columns:120px 1fr auto;gap:var(--space-sm);align-items:center;margin-bottom:var(--space-sm)}.control-row label{color:var(--text-secondary);font-size:var(--text-sm)}.control-row input[type='number']{width:80px;padding:var(--space-xs) var(--space-sm);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);text-align:center}.progression-status{margin-top:var(--space-md);padding:var(--space-sm);background:var(--bg-card);border-radius:var(--radius-sm);text-align:center;color:var(--primary);font-weight:600}.dropout-pattern{display:flex;gap:var(--space-xs)}.dropout-beat-btn{width:var(--size-icon-xl);height:var(--size-icon-xl);border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-all-base)}.dropout-beat-btn:hover{background:var(--bg-hover);border-color:var(--primary)}.dropout-beat-btn.active{background:var(--danger);color:white;border-color:var(--danger)}.subdivision-controls{display:flex;gap:var(--space-sm);align-items:center}.subdivision-controls select:disabled{opacity:0.5}#metronomePanel .metronome-image-section,.mode-panel.active .metronome-image-section{display:block !important;visibility:visible !important;opacity:1 !important}.metronome-image-section{margin-bottom:20px;width:100%;display:block !important;visibility:visible !important;position:relative;z-index:10}.image-preview{position:relative;width:100%;max-width:600px;margin:0 auto 16px;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-tertiary);box-shadow:0 2px 8px rgba(0,0,0,0.1)}.image-preview img{width:100%;height:auto;display:block;max-height:400px;object-fit:contain;background:white;cursor:zoom-in;transition:opacity 0.2s ease}.image-preview img:hover{opacity:0.9}.remove-image-btn{position:absolute;top:8px;right:8px;width:var(--size-icon-xl);height:var(--size-icon-xl);border-radius:var(--radius-full);background:rgba(0,0,0,0.7);color:white;border:none;font-size:var(--text-xl);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-all-base);z-index:10}.remove-image-btn:hover{background:rgba(0,0,0,0.9);transform:scale(1.1)}.remove-image-btn:active{transform:scale(0.95)}.image-upload-controls{text-align:center}.paste-hint{margin-top:8px;font-size:var(--text-13px);color:var(--text-muted);font-style:italic}.upload-image-btn{background:rgba(99,102,241,0.1);color:var(--color-primary);border:2px dashed var(--color-primary);border-radius:var(--radius-lg);padding:var(--space-12px) 24px;font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:var(--transition-all-base);display:inline-flex !important;align-items:center;gap:var(--space-sm);visibility:visible !important;opacity:1 !important}.upload-image-btn:hover{background:rgba(99,102,241,0.2);border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-1px)}.upload-image-btn:active{transform:scale(0.98)}.upload-image-btn span{font-size:var(--text-lg)}@media (max-width:768px){.metronome-image-section{margin-bottom:16px}.image-preview{margin-bottom:12px;border-radius:var(--radius-md)}.image-preview img{max-height:250px}.remove-image-btn{width:28px;height:28px;font-size:var(--text-lg);top:6px;right:6px}.upload-image-btn{width:100%;justify-content:center;padding:10px var(--space-20px);font-size:var(--text-13px)}.paste-hint{font-size:var(--text-xs);margin-top:6px}}@media (max-width:375px){.image-preview img{max-height:200px}.upload-image-btn{padding:var(--space-sm) 16px;font-size:var(--text-xs)}.upload-image-btn span{font-size:var(--text-base)}}@media (max-width:768px) and (orientation:landscape){.image-preview img{max-height:150px}.metronome-image-section{margin-bottom:12px}}[data-theme='dark'] .image-preview{background:var(--bg-secondary)}[data-theme='dark'] .upload-image-btn{background:var(--bg-secondary);border-color:var(--border-color)}[data-theme='dark'] .upload-image-btn:hover{background:var(--bg-tertiary)}.image-preview.loading{min-height:200px;display:flex;align-items:center;justify-content:center}.image-preview.loading::after{content:'Loading...';color:var(--text-muted);font-size:var(--text-sm)}.image-preview.error{min-height:100px;display:flex;align-items:center;justify-content:center;color:var(--color-error);font-size:var(--text-sm);padding:var(--space-20px);text-align:center}.image-lightbox{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:9999;padding:var(--space-20px);cursor:zoom-out;animation:fadeIn 0.3s ease}.image-lightbox img{max-width:90vw;max-height:90vh;object-fit:contain;box-shadow:0 4px 20px rgba(0,0,0,0.5);background:white;cursor:default}.image-lightbox-close{position:absolute;top:20px;right:20px;width:var(--size-icon-2xl);height:var(--size-icon-2xl);background:rgba(255,255,255,0.1);border:2px solid white;border-radius:var(--radius-full);color:white;font-size:var(--text-2xl);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-all-base);z-index:10000}.image-lightbox-close:hover{background:rgba(255,255,255,0.2);transform:scale(1.1)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@media (max-width:768px){.image-lightbox{padding:10px}.image-lightbox img{max-width:95vw;max-height:95vh}.image-lightbox-close{top:10px;right:10px;width:36px;height:36px;font-size:var(--text-xl)}}.achievements-section{border-radius:var(--radius-xl);padding:var(--space-xl);box-shadow:var(--shadow-xl);border:1px solid var(--border);max-width:800px;margin-left:auto;margin-right:auto;width:100%}.achievements-section h2{margin-bottom:var(--space-lg);color:var(--text-primary)}.achievements-progress{margin-bottom:var(--space-xl)}.progress-bar-container{background:var(--bg-input);height:var(--size-icon-md);border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-sm);border:1px solid var(--border)}.progress-bar{height:100%;background:linear-gradient(90deg,var(--primary) 0%,var(--secondary) 100%);transition:width 0.5s ease}.progress-text{text-align:center;font-size:var(--text-sm);color:var(--text-secondary)}.achievements-filter{display:flex;gap:var(--space-sm);margin-bottom:var(--space-xl);justify-content:center}.filter-btn{padding:var(--space-sm) var(--space-lg);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:var(--transition-base)}.filter-btn:hover{background:var(--bg-card);border-color:var(--primary)}.filter-btn.active{background:var(--primary);border-color:var(--primary);color:white}.achievements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-lg)}.achievement-badge{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);padding:var(--space-md);background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-lg);transition:var(--transition-all-slow);opacity:0.3;min-width:80px;cursor:default;text-align:center}.achievement-badge:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.achievement-badge.earned{border-color:var(--primary);background:var(--bg-input);opacity:1}.achievement-badge.earned:hover{border-color:var(--success);background:rgba(16,185,129,0.1)}.achievement-badge .badge-icon{font-size:var(--text-2xl)}.achievement-badge .badge-name{font-size:11px;color:var(--text-secondary);text-align:center;line-height:1.3;font-weight:500}.achievement-badge.earned .badge-name{color:var(--text-primary)}.achievement-badge .badge-locked{font-size:10px;color:var(--text-secondary);margin-top:2px}.achievement-badge{position:relative}.achievement-badge .badge-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--bg-dark);color:var(--text-primary);padding:0.5rem 0.75rem;border-radius:var(--radius-sm);font-size:var(--text-xs);white-space:nowrap;opacity:0;visibility:hidden;transition:var(--transition-all-base);z-index:1000;box-shadow:0 4px 12px rgba(0,0,0,0.3);margin-bottom:0.5rem;max-width:200px;white-space:normal;text-align:center}.achievement-badge .badge-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--bg-dark)}.achievement-badge:hover .badge-tooltip{opacity:1;visibility:visible}.achievements-section-header{margin-top:var(--space-2xl);margin-bottom:var(--space-lg)}.achievements-section-header h3{font-size:var(--text-lg);font-weight:600;color:var(--text-primary)}.streak-achievements{grid-template-columns:repeat(6,1fr) !important;gap:var(--space-md);margin-bottom:var(--space-2xl);max-width:800px;margin-left:auto;margin-right:auto}@media (max-width:1400px){.streak-achievements{grid-template-columns:repeat(6,1fr) !important}}@media (min-width:768px){.achievements-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}@media (max-width:768px){.achievements-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.streak-achievements{grid-template-columns:repeat(3,1fr) !important;gap:var(--space-sm)}}@media (max-width:480px){.streak-achievements{grid-template-columns:repeat(2,1fr) !important}}@keyframes confettiFall{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}.confetti{position:fixed;width:10px;height:10px;background:var(--primary);top:-10px;opacity:0.8;transform:rotate(0deg);animation:confettiFall linear;z-index:var(--z-notification);pointer-events:none}.achievement-notification{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-card);border:2px solid var(--primary);border-radius:var(--radius-xl);padding:var(--space-2xl);text-align:center;z-index:var(--z-modal);animation:scaleIn 0.5s ease;box-shadow:var(--shadow-2xl)}.achievement-notification-icon{font-size:var(--text-5xl);margin-bottom:var(--space-lg);animation:bounce 1s ease infinite}.achievement-notification-title{font-size:var(--text-2xl);font-weight:700;margin-bottom:var(--space-sm);background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.achievement-notification-text{font-size:var(--text-lg);color:var(--text-secondary)}.achievement-details{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-lg)}.achievement-details-icon{font-size:var(--text-5xl)}.achievement-details-info h3{margin-bottom:var(--space-sm);font-size:var(--text-2xl)}.achievement-details-description{font-size:var(--text-lg);color:var(--text-secondary);margin-bottom:var(--space-lg)}.achievement-details-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg);width:100%}.achievement-stat{background:var(--bg-input);padding:var(--space-md);border-radius:var(--radius-lg)}.achievement-stat-label{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-xs)}.achievement-stat-value{font-size:var(--text-xl);font-weight:600;color:var(--primary)}.achievement-categories{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-xl)}.category-chip{padding:var(--space-xs) var(--space-md);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-full);font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer;transition:var(--transition-base)}.category-chip:hover{background:var(--bg-card);border-color:var(--primary)}.category-chip.active{background:var(--primary);border-color:var(--primary);color:white}.achievement-rarity{position:absolute;top:var(--space-sm);right:var(--space-sm);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:600;text-transform:uppercase}.rarity-common{background:var(--bg-input);color:var(--text-secondary)}.rarity-rare{background:var(--primary);color:white}.rarity-epic{background:var(--secondary);color:white}.rarity-legendary{background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);color:white}.lazy-image-wrapper{position:relative;display:inline-block;overflow:hidden}.lazy-image-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--bg-secondary,#f3f4f6);display:flex;align-items:center;justify-content:center;z-index:1}.lazy-spinner{width:var(--size-icon-lg);height:var(--size-icon-lg);border:2px solid var(--border,#e5e7eb);border-top-color:var(--primary,#6366f1);border-radius:var(--radius-full);animation:spin 0.8s linear infinite}.lazy-error-icon{font-size:var(--text-2xl);color:var(--error,#ef4444);margin-bottom:8px}.lazy-error-text{font-size:var(--text-xs);color:var(--text-secondary,#6b7280)}.lazy-image{display:block;width:100%;height:auto;opacity:0;transition:opacity 0.3s ease}.lazy-image.lazy-loading{opacity:0}.lazy-image.lazy-loaded{opacity:1}.lazy-image.lazy-error{opacity:0.5}.achievement-badge{position:relative;transition:transform 0.2s ease}.achievement-badge.badge-loaded{animation:fadeInScale 0.4s ease}.badge-image{width:60px;height:60px;object-fit:contain}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeInScale{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}@media (max-width:768px){.badge-image{width:50px;height:50px}.lazy-spinner{width:var(--size-icon-md);height:var(--size-icon-md)}}@keyframes highlightNew{0%{background-color:var(--success);transform:scale(1.02);box-shadow:0 0 20px rgba(16,185,129,0.5)}50%{background-color:var(--success);transform:scale(1.01)}100%{background-color:#1a2744;transform:scale(1);box-shadow:none}}.goal-item.highlight-new{animation:highlightNew 2s ease-out}.goals-page{max-width:800px !important;margin:0 auto !important;padding:0;width:100%;box-sizing:border-box}#goals-tab,.tab-pane:has(.goals-page){max-width:800px !important;margin:0 auto !important;width:100%}.goals-list{border-radius:var(--radius-xl);padding:var(--space-xl);box-shadow:var(--shadow-xl);border:0px solid var(--border)}.goal-form{background:var(--bg-input);padding:var(--space-xl);border-radius:var(--radius-lg);margin-bottom:var(--space-xl)}.goal-search{margin-bottom:var(--space-md)}.goal-metrics-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-md);margin-bottom:var(--space-md)}@media (max-width:768px){.goal-metrics-row{grid-template-columns:1fr}}/*!* Goals stats *!*/ .goal-stat{text-align:center}#goalsList{max-height:600px;overflow-y:auto}.goal-progress{display:none}.progress-display .goal-progress{display:block;margin:var(--space-sm) 0}.progress-bar-container{background:var(--bg-card);height:6px;border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-xs)}.progress-bar{height:100%;background:var(--primary);transition:width 0.5s ease}.progress-text{font-size:var(--text-xs);color:var(--text-secondary);text-align:right}.goal-item[data-priority='5']{border-left:4px solid var(--danger)}.goal-item[data-priority='4']{border-left:4px solid var(--warning)}.goal-item[data-priority='3']{border-left:4px solid var(--primary)}.goal-item[data-priority='2']{border-left:4px solid var(--success)}@keyframes goalComplete{0%{transform:scale(1)}50%{transform:scale(1.05);background:var(--success)}100%{transform:scale(1)}}.goal-item.completing{animation:goalComplete 0.5s ease}.btn-update{padding:var(--space-sm) var(--space-md);background:var(--primary);color:white;border:none;border-radius:var(--radius-md);font-size:var(--text-sm)}.btn-update:hover{background:var(--primary-dark)}.goal-categories{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-lg)}.goal-category-filter{padding:var(--space-xs) var(--space-md);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-full);font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer;transition:var(--transition-base)}.goal-category-filter:hover{background:var(--bg-card);border-color:var(--primary)}.goal-category-filter.active{background:var(--primary);border-color:var(--primary);color:white}.goal-stats-breakdown{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md);margin-top:var(--space-xl)}.goal-stat-card{background:var(--bg-input);padding:var(--space-lg);border-radius:var(--radius-lg);text-align:center}.goal-stat-icon{font-size:var(--text-2xl);margin-bottom:var(--space-sm)}.goal-stat-value{font-size:var(--text-3xl);font-weight:700;color:var(--primary);margin-bottom:var(--space-xs)}.goal-stat-label{font-size:var(--text-sm);color:var(--text-secondary)}@keyframes goalParticle{0%{transform:translate(-50%,-50%) scale(0);opacity:1}100%{transform:translate(calc(-50%+var(--particle-x)),calc(-50%+var(--particle-y))) scale(1);opacity:0}}.goal-particle{position:fixed;width:8px;height:8px;background:var(--primary);left:50%;top:50%;border-radius:var(--radius-full);pointer-events:none;animation:goalParticle 1s ease-out;z-index:var(--z-notification)}.btn-icon{padding:0.25rem 0.5rem;font-size:1rem;background:transparent;border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-all-base)}.btn-icon:hover{background:var(--bg-hover);transform:translateY(-1px)}.btn-icon.btn-danger{border-color:rgba(239,68,68,0.3)}.btn-icon.btn-danger:hover{background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.5)}.goals-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-xl)}.goals-filters{display:flex;gap:var(--space-md);margin-bottom:var(--space-xl);justify-content:center}.filter-btn{padding:var(--space-sm) var(--space-lg);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:var(--transition-all-base)}.filter-btn.active{background:var(--primary);color:white;border-color:var(--primary)}.goals-stats{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:var(--space-sm);margin-bottom:var(--space-xl);border-radius:var(--radius-xl);padding:var(--space-lg);box-shadow:var(--shadow-xl);border:0px solid var(--border);max-width:800px;margin-left:auto;margin-right:auto}.goals-stats .stat-card{padding:var(--space-md) var(--space-sm);text-align:center;border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60px}.goals-stats .stat-value{display:block;font-weight:700;color:var(--primary);margin-bottom:2px}.goals-stats .stat-label{font-size:var(--text-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px}@media (max-width:800px){.goals-stats{grid-template-columns:repeat(2,1fr);max-width:100%}}.goals-list{display:grid;gap:var(--space-md)}.goal-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-sm) var(--space-md);transition:var(--transition-all-base);display:flex;align-items:center;gap:var(--space-md)}.goal-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.goal-card.completed{opacity:0.7;border-color:var(--success)}.goal-card.overdue{border-color:var(--danger)}.goal-header{display:flex;align-items:center;gap:var(--space-sm);flex:1}.goal-title{margin:0;font-size:var(--text-base);font-weight:600;color:var(--text-primary);flex:1}.goal-card.completed .goal-title{text-decoration:line-through;color:var(--text-secondary)}.goal-actions{display:flex;gap:var(--space-xs);align-items:center;flex-shrink:0}.goal-actions .btn-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:0.875rem;cursor:pointer;transition:var(--transition-all-base)}.goal-actions .btn-icon:hover{background:var(--bg-hover);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.goal-actions .update-progress-btn{background:var(--primary);color:white;border-color:var(--primary)}.goal-actions .update-progress-btn:hover{background:var(--primary-dark);border-color:var(--primary-dark)}.goal-actions .complete-goal-btn{font-size:1.2rem}.goal-actions .edit-goal-btn{color:var(--primary)}.goal-actions .delete-goal-btn{color:var(--danger)}.goal-actions .delete-goal-btn:hover{background:var(--danger);color:white;border-color:var(--danger)}.goal-meta{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-sm);flex-shrink:0}.progress-display{margin-bottom:1.5rem}.progress-display .progress-bar-container{height:var(--size-icon-md);background:var(--bg-input);border-radius:var(--radius-full);overflow:hidden;margin-bottom:0.5rem}.progress-display .progress-bar{height:100%;background:var(--primary);transition:width 0.3s ease}#progressModal .modal-content{max-width:400px}#progressInfo{padding:var(--space-md)}.goal-description{display:none}.goal-criteria{display:none}.goal-completed-info{margin-top:var(--space-md);font-size:var(--text-sm);color:var(--success);font-style:italic}.goal-category{padding:2px var(--space-sm);border-radius:var(--radius-sm);font-weight:500;font-size:0.75rem}.category-technique{background:rgba(99,102,241,0.1);color:var(--primary)}.category-repertoire{background:rgba(168,85,247,0.1);color:var(--secondary)}.category-theory{background:rgba(59,130,246,0.1);color:var(--info)}.category-speed{background:rgba(245,158,11,0.1);color:var(--warning)}.category-accuracy{background:rgba(16,185,129,0.1);color:var(--success)}.category-performance{background:rgba(239,68,68,0.1);color:var(--danger)}.category-other{background:rgba(156,163,175,0.1);color:var(--text-secondary)}.goal-date{color:var(--text-secondary);font-size:0.75rem}.goal-date.overdue{color:var(--danger);font-weight:600}.goal-type{font-size:0.75rem;color:var(--text-secondary)}.goal-description{color:var(--text-secondary);font-size:var(--text-sm);margin-bottom:var(--space-md)}.goal-criteria{padding:var(--space-md);background:var(--bg-input);border-radius:var(--radius-md);font-size:var(--text-sm);margin-bottom:var(--space-md)}.goal-completed-info{color:var(--success);font-size:var(--text-sm);font-style:italic}.linked-drill-item{transition:all 0.2s ease}.linked-drill-item:hover{background:var(--bg-hover) !important;border-color:var(--primary) !important;transform:translateX(4px)}.linked-drill-item .navigate-to-drill{transition:all 0.2s ease}.linked-drill-item .navigate-to-drill:hover{background:var(--primary-dark) !important;transform:scale(1.1);box-shadow:0 2px 8px rgba(99,102,241,0.3)}.unified-dashboard{max-width:100%;margin:0 auto}.dashboard-header{text-align:center;margin-bottom:2rem;padding:1.5rem;background:linear-gradient(135deg,rgba(99,102,241,0.1),rgba(243,156,18,0.1));border-radius:var(--radius-lg);border:1px solid var(--border)}.dashboard-header h3{margin:0 0 0.5rem 0;color:var(--text-primary);font-size:1.75rem;font-weight:700}.dashboard-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:2rem}.summary-card{display:flex;align-items:center;gap:1rem;padding:1.25rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all 0.3s ease}.summary-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--primary)}.summary-card.highlight{background:linear-gradient(135deg,rgba(243,156,18,0.1),rgba(243,156,18,0.05));border-color:var(--accent)}.summary-icon{font-size:2rem;filter:grayscale(0.2)}.summary-content{flex:1}.summary-value{display:block;font-size:1.75rem;font-weight:700;color:var(--primary);line-height:1.2}.summary-label{display:block;font-size:0.85rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px;margin-top:0.25rem}.dashboard-goals{display:flex;flex-direction:column;gap:1.5rem}.dashboard-goal-card{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;transition:all 0.3s ease}.dashboard-goal-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.15)}.dashboard-goal-card.completed{border-color:var(--success);background:linear-gradient(135deg,rgba(16,185,129,0.05),transparent)}.dashboard-goal-card.good{border-color:var(--accent)}.dashboard-goal-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}.dashboard-goal-info{flex:1}.dashboard-goal-title{margin:0 0 0.5rem 0;font-size:1.25rem;font-weight:700;color:var(--text-primary)}.dashboard-goal-meta{font-size:0.875rem;color:var(--text-secondary);display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap}.dashboard-goal-progress-circle{position:relative;width:60px;height:60px;flex-shrink:0}.dashboard-goal-progress-circle .progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:0.875rem;font-weight:700;color:var(--text-primary)}.dashboard-goal-values{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:1.5rem;padding:1rem;background:var(--bg-secondary);border-radius:var(--radius-md)}.value-item{display:flex;flex-direction:column;align-items:center;gap:0.25rem}.value-label{font-size:0.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px}.value-number{font-size:1.25rem;font-weight:700;color:var(--primary)}.value-arrow{font-size:1.5rem;color:var(--accent)}.dashboard-goal-drills{margin-top:1rem}.drills-header{margin-bottom:0.75rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border)}.drills-title{font-size:0.95rem;font-weight:600;color:var(--text-primary)}.drills-list{display:flex;flex-direction:column;gap:0.75rem}.dashboard-drill-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.875rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);transition:all 0.2s ease}.dashboard-drill-item:hover{background:var(--bg-hover);border-color:var(--primary);transform:translateX(4px)}.drill-item-info{flex:1}.drill-item-title{font-weight:600;color:var(--text-primary);margin-bottom:0.25rem;font-size:0.95rem}.drill-item-meta{font-size:0.8rem;color:var(--text-secondary)}.drill-navigate-btn{flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--primary);color:white;border:none;border-radius:var(--radius-md);font-size:1rem;cursor:pointer;transition:all 0.2s ease}.drill-navigate-btn:hover{background:var(--primary-dark);transform:scale(1.1);box-shadow:0 4px 12px rgba(99,102,241,0.3)}.filter-btn.dashboard-btn{background:linear-gradient(135deg,rgba(99,102,241,0.1),rgba(243,156,18,0.1));border-color:var(--accent);font-weight:600}.filter-btn.dashboard-btn.active{background:linear-gradient(135deg,var(--primary),var(--accent));border-color:var(--accent)}@media (max-width:768px){.dashboard-summary{grid-template-columns:repeat(2,1fr)}.dashboard-goal-header{flex-direction:column;gap:1rem}.dashboard-goal-progress-circle{align-self:center}.dashboard-goal-values{flex-direction:column;gap:1rem}.value-arrow{transform:rotate(90deg)}.dashboard-drill-item{flex-direction:column;align-items:flex-start}.drill-navigate-btn{align-self:stretch;width:100%}}.stats-panel{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);margin-bottom:var(--space-xl);max-width:800px;margin-left:auto;margin-right:auto;width:100%}.stats-panel .stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-lg);text-align:center}.stats-panel .stat-value{display:block;font-size:var(--text-2xl);font-weight:700;color:var(--primary);margin-bottom:var(--space-xs)}.stats-panel .stat-label{font-size:var(--text-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px}@media (max-width:768px){.stats-panel{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.stats-panel{grid-template-columns:1fr}}.stats-overview{background:var(--bg-card);border-radius:var(--radius-xl);padding:var(--space-xl);box-shadow:var(--shadow-xl);border:1px solid var(--border)}.stats-detail-content h4{margin-bottom:var(--space-lg);color:var(--text-primary)}.area-breakdown{margin-top:var(--space-xl)}.area-item{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md)}.area-name{font-weight:500}.area-bar{background:var(--bg-input);height:var(--size-icon-md);border-radius:var(--radius-full);overflow:hidden;position:relative}.area-progress{height:100%;background:linear-gradient(90deg,var(--primary) 0%,var(--secondary) 100%);transition:width 0.5s ease}.area-time{font-size:var(--text-sm);color:var(--text-secondary);font-weight:600}.weekday-chart{display:flex;align-items:flex-end;justify-content:space-between;height:150px;margin:var(--space-xl) 0}.weekday-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:var(--space-sm)}.bar-fill{width:100%;background:linear-gradient(to top,var(--primary) 0%,var(--secondary) 100%);border-radius:var(--radius-sm) var(--radius-sm) 0 0;position:relative;transition:height 0.5s ease}.bar-value{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:var(--text-xs);font-weight:600;color:var(--text-primary)}.bar-label{font-size:var(--text-xs);color:var(--text-secondary)}.duration-chart{margin-top:var(--space-xl)}.duration-bar{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md)}.duration-label{font-size:var(--text-sm);color:var(--text-secondary);text-align:right}.bar-container{background:var(--bg-input);height:var(--size-icon-lg);border-radius:var(--radius-full);overflow:hidden;position:relative}.bar-count{position:absolute;right:var(--space-sm);top:50%;transform:translateY(-50%);font-size:var(--text-xs);font-weight:600;color:white;text-shadow:1px 1px 2px rgba(0,0,0,0.5)}.consistency-meter{background:var(--bg-input);height:30px;border-radius:var(--radius-full);overflow:hidden;position:relative;margin-bottom:var(--space-md)}.meter-fill{height:100%;background:linear-gradient(90deg,var(--danger) 0%,var(--warning) 50%,var(--success) 100%);transition:width 0.5s ease}.meter-label{position:absolute;right:var(--space-md);top:50%;transform:translateY(-50%);font-weight:600;color:white;text-shadow:1px 1px 2px rgba(0,0,0,0.5)}.consistency-message{text-align:center;color:var(--text-secondary);font-style:italic}.recommendation{background:var(--bg-input);padding:var(--space-lg);border-radius:var(--radius-lg);border-left:4px solid var(--primary);font-style:italic;color:var(--text-secondary)}.solo-equivalents{background:var(--bg-input);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-xl)}.solo-list{display:flex;flex-direction:column;gap:var(--space-md);margin-bottom:var(--space-lg)}.solo-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border);transition:var(--transition-all-base)}.solo-item:hover{transform:translateX(4px);border-color:var(--primary)}.solo-emoji{font-size:2rem;min-width:var(--size-icon-2xl);text-align:center}.solo-info{display:flex;align-items:baseline;gap:var(--space-sm);flex:1;flex-wrap:wrap}.solo-count{font-size:1.5rem;font-weight:700;color:var(--primary);min-width:60px}.solo-name{font-weight:600;color:var(--text-primary);flex:1}.solo-artist{font-size:0.875rem;color:var(--text-secondary);font-style:italic}.solo-message{text-align:center;color:var(--text-secondary);font-style:italic;margin:0;padding-top:var(--space-sm);border-top:1px solid var(--border)}.stats-export{display:flex;justify-content:flex-end;margin-top:var(--space-xl)}.milestone-notification{position:fixed;bottom:var(--space-xl);right:var(--space-xl);background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:white;padding:var(--space-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-2xl);animation:slideInRight 0.5s ease;z-index:var(--z-notification)}.milestone-icon{font-size:var(--text-2xl);margin-bottom:var(--space-sm)}.milestone-text{font-weight:600;margin-bottom:var(--space-xs)}.milestone-subtext{font-size:var(--text-sm);opacity:0.9}.compact-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}@media (min-width:768px){.compact-stats{grid-template-columns:repeat(4,1fr)}}.compact-stats .stat-card{padding:var(--space-md)}.compact-stats .stat-value{font-size:var(--text-2xl)}.compact-stats .stat-label{font-size:var(--text-xs)}.stats-comparison{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-lg);align-items:center;margin-top:var(--space-xl)}.comparison-period{text-align:center}.comparison-period h4{margin-bottom:var(--space-md);color:var(--text-secondary)}.comparison-value{font-size:var(--text-3xl);font-weight:700;color:var(--primary)}.comparison-arrow{font-size:var(--text-2xl);color:var(--text-secondary)}.comparison-arrow.positive{color:var(--success)}.comparison-arrow.negative{color:var(--danger)}.practice-time-chart{margin-top:var(--space-xl);padding:var(--space-lg);background:var(--bg-input);border-radius:var(--radius-lg)}.chart-container{position:relative;height:300px}.chart-tooltip{position:absolute;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-sm);font-size:var(--text-sm);box-shadow:var(--shadow-lg);pointer-events:none;z-index:var(--z-tooltip);opacity:0;transition:opacity 0.2s ease}.chart-tooltip.show{opacity:1}.fun-charts-section{margin-top:var(--space-2xl);padding:var(--space-xl);background:var(--bg-surface);border-radius:var(--radius-xl);border:1px solid var(--border)}.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);margin-bottom:var(--space-2xl)}@media (max-width:968px){.charts-grid{grid-template-columns:1fr}}.chart-container{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-lg);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center}.chart-container h3{margin-bottom:var(--space-lg);font-size:var(--text-lg);color:var(--text-primary);display:flex;align-items:center;justify-content:center;gap:var(--space-sm);width:100%}.pie-chart-container{text-align:center;padding-bottom:var(--space-md)}#practiceAreasPieChart{max-width:100%;height:auto;margin:0 auto;display:block}.chart-legend{margin-top:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm)}.legend-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);transition:background-color var(--transition-base)}.legend-item:hover{background:var(--bg-hover)}.legend-color{width:16px;height:16px;border-radius:var(--radius-xs);flex-shrink:0}.legend-label{flex:1;text-align:left;font-size:var(--text-sm);color:var(--text-primary)}.legend-time{font-size:var(--text-xs);color:var(--text-secondary);font-weight:600}.line-chart-container{padding-bottom:var(--space-xl)}.line-chart-container canvas{max-width:100%;height:auto;display:block;margin:0 auto}.fun-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-lg)}.fun-stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-lg);display:flex;align-items:center;gap:var(--space-md);transition:all var(--transition-base);cursor:pointer}.fun-stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--primary)}.fun-stat-icon{font-size:2.5rem;width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary-alpha-10) 0%,var(--secondary-alpha-10) 100%);border-radius:var(--radius-lg)}.fun-stat-content{flex:1;min-width:0}.fun-stat-label{display:block;font-size:var(--text-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:var(--space-xs)}.fun-stat-value{display:block;font-size:var(--text-lg);font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fun-stat-value a{color:inherit;text-decoration:none}.fun-stat-value a:hover{text-decoration:underline}@media (max-width:768px){.fun-stats-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.fun-stat-card{padding:var(--space-md)}.fun-stat-icon{font-size:2rem;width:50px;height:50px}}@media (max-width:480px){.fun-stats-grid{grid-template-columns:1fr}.charts-grid{gap:var(--space-lg)}}#quickStats{display:flex;justify-content:center;align-items:center;width:100%;flex:1;min-height:60px}.stats-grid{display:flex;justify-content:center;align-items:center;gap:3rem;padding:0;width:100%;text-align:center;margin:auto 0}.stat-item{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;min-width:80px}.stat-value{font-size:2rem;font-weight:700;color:var(--primary);margin-bottom:0.25rem;font-family:'SF Mono','Monaco','Inconsolata',monospace}.stat-label{font-size:0.875rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.05em;font-weight:500}@media (max-width:480px){.stats-grid{gap:1rem}.stat-value{font-size:1.5rem}.stat-label{font-size:0.75rem}}#favoriteYouTube{width:100%;min-height:45px;display:flex;align-items:center}.fun-stat-card:has(#favoriteYouTube){min-width:280px}.fun-stat-card:has(#favoriteYouTube) .fun-stat-content{flex:1;width:100%}#favoriteYouTube img{transition:transform 0.2s ease,box-shadow 0.2s ease}#favoriteYouTube a:hover img{transform:scale(1.05);box-shadow:0 4px 8px rgba(0,0,0,0.3) !important}#favoriteYouTube a:hover{text-decoration:none !important}#favoriteYouTube a:hover>div>div:first-child{color:var(--primary-dark,var(--primary));text-decoration:underline}#favoriteYouTube.loading{opacity:0.7}@media (max-width:768px){#favoriteYouTube img{width:60px;height:34px}.fun-stat-card:has(#favoriteYouTube){min-width:100%}}[data-theme="dark"] #favoriteYouTube img{border:1px solid rgba(255,255,255,0.1)}.youtube-skeleton{display:flex;align-items:center;gap:12px}.youtube-skeleton-thumb{width:80px;height:45px;background:linear-gradient(90deg,var(--bg-secondary) 25%,var(--bg-tertiary) 50%,var(--bg-secondary) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}.youtube-skeleton-text{flex:1}.youtube-skeleton-title{height:16px;width:70%;background:linear-gradient(90deg,var(--bg-secondary) 25%,var(--bg-tertiary) 50%,var(--bg-secondary) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px;margin-bottom:6px}.youtube-skeleton-subtitle{height:12px;width:40%;background:linear-gradient(90deg,var(--bg-secondary) 25%,var(--bg-tertiary) 50%,var(--bg-secondary) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}.streak-heatmap{background:var(--bg-card);border-radius:var(--radius-xl);padding:var(--space-xl);box-shadow:var(--shadow-xl);border:1px solid var(--border)}.streak-heatmap h3{margin-bottom:var(--space-lg);text-align:center;color:var(--text-primary)}.heatmap-container{overflow-x:auto}.heatmap-controls{display:flex;justify-content:center;align-items:center;gap:var(--space-lg);margin-bottom:var(--space-lg)}.year-display{font-size:var(--text-xl);font-weight:600;color:var(--text-primary)}.heatmap-legend{display:flex;align-items:center;justify-content:center;gap:var(--space-md);margin-bottom:var(--space-lg);font-size:var(--text-sm);color:var(--text-secondary)}.legend-scale{display:flex;gap:3px}.legend-box{width:12px;height:12px;border-radius:var(--radius-2px);border:1px solid var(--border)}.legend-box[data-level='0']{background:var(--bg-input)}.legend-box[data-level='1']{background:rgba(99,102,241,0.3)}.legend-box[data-level='2']{background:rgba(99,102,241,0.5)}.legend-box[data-level='3']{background:rgba(99,102,241,0.7)}.legend-box[data-level='4']{background:var(--primary)}.heatmap-wrapper{position:relative}.heatmap-months{display:grid;grid-template-columns:repeat(53,1fr);margin-bottom:var(--space-xs);padding-left:30px}.month-label{font-size:var(--text-xs);color:var(--text-secondary);text-align:center}.heatmap-grid{display:flex;gap:var(--space-sm)}.weekday-labels{display:grid;grid-template-rows:repeat(7,1fr);gap:3px;margin-right:var(--space-sm);font-size:var(--text-xs);color:var(--text-secondary)}.weekday-labels div{height:13px;display:flex;align-items:center}.heatmap-calendar-container{overflow-x:auto}.heatmap-calendar{display:grid;grid-template-columns:repeat(53,1fr);grid-template-rows:repeat(7,1fr);gap:3px;grid-auto-flow:column}.heatmap-day{width:13px;height:13px;border-radius:var(--radius-2px);background:var(--bg-input);border:1px solid var(--border);cursor:pointer;transition:var(--transition-fast);position:relative}.heatmap-day.empty{visibility:hidden}.heatmap-day[data-level='0']{background:var(--bg-input)}.heatmap-day[data-level='1']{background:rgba(99,102,241,0.3);border-color:rgba(99,102,241,0.5)}.heatmap-day[data-level='2']{background:rgba(99,102,241,0.5);border-color:rgba(99,102,241,0.7)}.heatmap-day[data-level='3']{background:rgba(99,102,241,0.7);border-color:rgba(99,102,241,0.9)}.heatmap-day[data-level='4']{background:var(--primary);border-color:var(--primary-dark)}.heatmap-day:hover{transform:scale(1.5);border-color:var(--primary);z-index:10;box-shadow:var(--shadow-md)}.heatmap-day::after{content:attr(title);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--bg-card);border:1px solid var(--border);padding:var(--space-sm);border-radius:var(--radius-md);font-size:var(--text-xs);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.2s ease;z-index:var(--z-tooltip)}.heatmap-day:hover::after{opacity:1}.heatmap-stats{display:flex;justify-content:center;gap:var(--space-xl);margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid var(--border)}.heatmap-stats .stat{text-align:center;font-size:var(--text-sm);color:var(--text-secondary)}.heatmap-stats strong{color:var(--primary);font-size:var(--text-base)}.streak-badges{display:flex;justify-content:center;gap:var(--space-md);margin-top:var(--space-xl);flex-wrap:wrap}.streak-badge{display:flex;flex-direction:column;align-items:center;padding:var(--space-md);background:var(--bg-input);border:2px solid var(--border);border-radius:var(--radius-lg);min-width:80px;transition:var(--transition-base)}.streak-badge.earned{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);border-color:var(--primary)}.badge-icon{font-size:var(--text-2xl);margin-bottom:var(--space-xs)}.badge-label{font-size:var(--text-xs);font-weight:600;color:var(--text-secondary)}.streak-badge.earned .badge-label{color:white}@media (max-width:768px){.heatmap-calendar{min-width:750px}.heatmap-stats{flex-direction:column;gap:var(--space-md)}}#waveform{width:100%;height:150px;cursor:pointer;display:block;position:relative;z-index:1}.waveform-container{position:relative;background:#1a1a2e;border-radius:var(--radius-lg);padding:var(--space-md);margin-bottom:var(--space-lg);border:1px solid var(--border);overflow:hidden}.waveform-loading{display:flex;align-items:center;justify-content:center;height:150px;color:var(--text-secondary)}.waveform-loading-spinner{width:var(--size-icon-2xl);height:var(--size-icon-2xl);border:3px solid var(--bg-input);border-top-color:var(--primary);border-radius:var(--radius-full);animation:spin 1s linear infinite}.waveform-error{display:flex;align-items:center;justify-content:center;height:150px;color:var(--danger);text-align:center}.waveform-playhead{position:absolute;top:0;bottom:0;width:2px;background:white;pointer-events:none;transition:none;z-index:5}.waveform-playhead::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:white;border-radius:var(--radius-full);box-shadow:0 0 8px rgba(255,255,255,0.5)}.waveform-time-markers{display:flex;justify-content:space-between;margin-top:var(--space-sm);font-size:var(--text-xs);color:var(--text-secondary)}.waveform-loop-region{position:absolute;top:0;bottom:0;background:rgba(99,102,241,0.1);pointer-events:none;z-index:2}.waveform-loop-start,.waveform-loop-end{position:absolute;top:0;bottom:0;width:2px;pointer-events:none;z-index:10}.waveform-loop-start{background:transparent;border-left:2px dashed var(--success,#10b981)}.waveform-loop-end{background:transparent;border-right:2px dashed var(--danger,#ef4444)}.waveform-container .waveform-loop-start:not(:first-of-type),.waveform-container .waveform-loop-end:not(:first-of-type){display:none !important}.waveform-loop-label{position:absolute;top:4px;padding:2px 6px;background:var(--bg-card);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:600;z-index:11}.waveform-loop-start .waveform-loop-label{left:4px;color:var(--success,#10b981)}.waveform-loop-end .waveform-loop-label{right:4px;color:var(--danger,#ef4444)}.waveform-zoom-controls{position:absolute;top:var(--space-sm);right:var(--space-sm);display:flex;gap:var(--space-xs);z-index:15}.zoom-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-base);font-size:var(--text-sm)}.zoom-btn:hover{background:var(--primary);border-color:var(--primary);color:white;transform:scale(1.05)}.waveform-regions{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:3}.waveform-region{position:absolute;top:0;bottom:0;border:1px solid var(--border);border-radius:var(--radius-sm)}.waveform-region.verse{background:rgba(99,102,241,0.1);border-color:var(--primary)}.waveform-region.chorus{background:rgba(168,85,247,0.1);border-color:var(--secondary)}.waveform-region.bridge{background:rgba(16,185,129,0.1);border-color:var(--success)}.waveform-region-label{position:absolute;bottom:4px;left:4px;padding:2px 6px;background:var(--bg-card);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:500;color:var(--text-secondary)}.waveform-container:hover .waveform-time-cursor{opacity:1}.waveform-time-cursor{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,0.3);pointer-events:none;opacity:0;transition:opacity 0.2s ease;z-index:4}.waveform-time-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--bg-card);border:1px solid var(--border);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:var(--text-xs);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.2s ease;z-index:20}.waveform-container:hover .waveform-time-tooltip{opacity:1}@media (max-width:768px){#waveform{height:100px}.waveform-container{padding:var(--space-sm)}.waveform-zoom-controls{display:none}.waveform-loop-label{font-size:10px;padding:1px var(--space-xs)}}#notification{position:fixed !important;bottom:20px !important;right:20px !important;z-index:999999 !important;max-width:400px !important;width:auto !important;height:auto !important;min-height:auto !important;max-height:none !important;display:none;top:auto !important;left:auto !important}#notification.notification-show{display:block !important;animation:notificationSlideIn 0.3s ease}#notification>*{width:auto !important;height:auto !important;max-height:none !important}.notification-container.show{position:fixed !important;top:20px !important;right:20px !important;z-index:99999 !important;max-width:400px !important;pointer-events:none !important;display:block !important;visibility:visible !important;opacity:1 !important}.notification{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-lg);margin-bottom:var(--space-md);box-shadow:var(--shadow-xl);display:flex;align-items:center;gap:var(--space-md);max-width:400px;pointer-events:auto;animation:notificationSlide 0.3s ease;transition:var(--transition-base)}@keyframes notificationSlide{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes notificationSlideIn{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.notification-icon{font-size:var(--text-xl)}.notification-content{flex:1}.notification-message{font-size:var(--text-sm);font-weight:500;color:var(--text-primary)}.notification.success .notification-message,.notification.error .notification-message,.notification.warning .notification-message,.notification.info .notification-message{color:white}.notification-close{width:var(--size-icon-lg);height:var(--size-icon-lg);display:flex;align-items:center;justify-content:center;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-base);font-size:var(--text-sm)}.notification-close:hover{background:var(--danger);border-color:var(--danger);color:white}.notification.success{background:linear-gradient(135deg,var(--success) 0%,var(--success-dark) 100%);border-color:var(--success);color:white}.notification.success .notification-close{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.3);color:white}.notification.error{background:linear-gradient(135deg,var(--danger) 0%,var(--danger-dark) 100%);border-color:var(--danger);color:white}.notification.error .notification-close{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.3);color:white}.notification.warning{background:linear-gradient(135deg,var(--warning) 0%,var(--warning-dark) 100%);border-color:var(--warning);color:white}.notification.warning .notification-close{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.3);color:white}.notification.info{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);border-color:var(--primary);color:white}.notification.info .notification-close{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.3);color:white}.notification-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,0.3);border-radius:0 0 var(--radius-lg) var(--radius-lg);overflow:hidden}.notification-progress-bar{height:100%;background:white;animation:notificationProgress var(--notification-duration) linear}@keyframes notificationProgress{from{width:100%}to{width:0%}}.notification-actions{display:flex;gap:var(--space-sm);margin-top:var(--space-sm)}.notification-action{padding:var(--space-xs) var(--space-sm);background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3);border-radius:var(--radius-sm);color:white;font-size:var(--text-sm);cursor:pointer;transition:var(--transition-base)}.notification-action:hover{background:rgba(255,255,255,0.3)}@media (max-width:768px){.notification-container{top:var(--space-md);right:var(--space-md);left:var(--space-md)}.notification{max-width:none}}.system-notification{position:fixed;top:0;left:0;right:0;background:var(--bg-card);border-bottom:2px solid var(--primary);padding:var(--space-md);text-align:center;z-index:var(--z-notification);animation:slideInDown 0.3s ease}.system-notification-content{max-width:var(--container-max);margin:0 auto;display:flex;align-items:center;justify-content:center;gap:var(--space-md)}.system-notification-icon{font-size:var(--text-xl)}.system-notification-message{font-weight:500}.system-notification-action{padding:var(--space-xs) var(--space-md);background:var(--primary);color:white;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-base)}.system-notification-action:hover{background:var(--primary-dark)}.app-footer{position:fixed;bottom:0;left:0;right:0;background:var(--bg-secondary);backdrop-filter:blur(12px);border-top:1px solid var(--border);z-index:1000;height:var(--size-icon-3xl);transition:var(--transition-all-slow)}.footer-container{max-width:900px;margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;overflow:visible}.footer-left{display:flex;align-items:center;flex-shrink:0;min-width:auto}.footer-branding{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.footer-copyright{color:var(--text-secondary);font-size:0.875rem;font-weight:500;white-space:nowrap}.footer-version-badge{display:inline-flex;align-items:center;padding:0.25rem 0.75rem;background:var(--bg-input);color:var(--primary);font-size:0.75rem;font-weight:600;border-radius:var(--radius-lg);border:1px solid var(--border);cursor:help;transition:var(--transition-all-base);white-space:nowrap}.footer-version-badge:hover{background:var(--bg-hover);border-color:var(--primary);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.footer-nav{display:flex;align-items:center;gap:var(--space-20px);height:100%;flex-shrink:1}.footer-dropdown{position:relative;height:100%;display:flex;align-items:center}.footer-dropdown-trigger{background:none;border:none;color:var(--text-tertiary);font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:0 10px;height:100%;cursor:pointer;transition:color 0.2s ease}.footer-dropdown:hover .footer-dropdown-trigger{color:var(--primary)}.footer-dropdown-content{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-sm) 0;min-width:180px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:var(--transition-all-base);margin-bottom:8px;backdrop-filter:blur(12px)}.footer-dropdown:hover .footer-dropdown-content{opacity:1;visibility:visible}.footer-dropdown-content a{display:block;padding:var(--space-sm) 16px;color:var(--text-secondary);text-decoration:none;font-size:var(--text-13px);transition:var(--transition-all-base);white-space:nowrap}.footer-dropdown-content a:hover{background:var(--bg-hover);color:var(--primary)}.footer-dropdown-content a i{margin-right:6px}.footer-right{display:flex;align-items:center;flex-shrink:0}.main-content{padding-bottom:60px}@media (max-width:768px){.app-footer{left:0}.footer-container{padding:0 10px}.footer-branding{flex-direction:column;align-items:flex-start;gap:0.5rem}.footer-copyright{font-size:0.8rem}.footer-version-badge{font-size:0.7rem;padding:0.2rem 0.6rem}.footer-nav{gap:15px}.footer-dropdown-trigger{font-size:10px;padding:0 6px}.footer-dropdown-content{left:0;transform:none;min-width:150px}}@keyframes version-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}.footer-version-badge.new-version{animation:version-pulse 2s ease-in-out 3}.shortcuts-list{display:flex;flex-direction:column;gap:0.75rem}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:0.5rem;background:var(--bg-input);border-radius:var(--radius-sm)}.shortcut-item kbd{background:var(--bg-card);border:1px solid var(--border);padding:0.25rem 0.5rem;border-radius:var(--radius-4px);font-family:monospace;font-size:0.875rem;box-shadow:0 2px 0 rgba(0,0,0,0.2)}.footer-feedback-btn{background:none;border:none;color:var(--text-tertiary);font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:0 10px;cursor:pointer;transition:color 0.2s ease;text-decoration:none}.footer-feedback-btn:hover{color:var(--primary)}@media (max-width:640px){.footer-feedback-btn{font-size:10px;padding:0 6px}}.tips-popup{position:fixed;bottom:20px;left:20px;max-width:350px;background:rgba(99,102,241,0.95);color:white;border-radius:var(--radius-lg);padding:var(--space-md) 20px;box-shadow:0 4px 20px rgba(0,0,0,0.3);transform:translateX(-120%);transition:transform 0.4s ease-out;z-index:1500;backdrop-filter:blur(10px)}.tips-popup.show{transform:translateX(0)}.tips-popup-content{display:flex;align-items:center;gap:var(--space-12px)}.tips-popup-icon{font-size:var(--text-2xl);flex-shrink:0}.tips-popup-text{font-size:var(--text-sm);line-height:1.4;font-weight:500}[data-theme='light'] .tips-popup{background:rgba(99,102,241,0.9);box-shadow:0 4px 20px rgba(0,0,0,0.15)}@media (max-width:768px){.tips-popup{bottom:70px;left:10px;right:10px;max-width:none}}@keyframes slideInBounce{0%{transform:translateX(-120%)}70%{transform:translateX(10px)}100%{transform:translateX(0)}}.tips-popup.show{animation:slideInBounce 0.5s ease-out}.tips-popup.tip-type-tip{background:rgba(99,102,241,0.95)}.tips-popup.tip-type-quote{background:rgba(168,85,247,0.95)}.tips-popup.tip-type-nudge{background:rgba(34,197,94,0.95)}[data-theme='light'] .tips-popup.tip-type-tip{background:rgba(99,102,241,0.9)}[data-theme='light'] .tips-popup.tip-type-quote{background:rgba(147,51,234,0.9)}[data-theme='light'] .tips-popup.tip-type-nudge{background:rgba(22,163,74,0.9)}[data-theme='dark'] .tips-popup.tip-type-tip{background:rgba(79,70,229,0.95)}[data-theme='dark'] .tips-popup.tip-type-quote{background:rgba(124,58,237,0.95)}[data-theme='dark'] .tips-popup.tip-type-nudge{background:rgba(21,128,61,0.95)}.cloud-sync-manager{padding:var(--space-20px);max-width:600px;margin:0 auto}.cloud-sync-manager h3{margin-bottom:20px;color:var(--text-primary)}.sync-controls{display:flex;flex-direction:column;gap:var(--space-20px)}.sync-status{display:flex;justify-content:space-between;align-items:center;padding:15px;background:var(--bg-card);border-radius:var(--radius-md);margin-bottom:20px;border:1px solid var(--border)}.status-indicator{display:flex;align-items:center;gap:var(--space-10px);font-weight:500}.status-indicator i{font-size:10px}.status-indicator.connected{color:var(--success)}.status-indicator.disconnected{color:var(--danger)}.pending-sync{display:flex;align-items:center;gap:var(--space-sm);color:var(--warning);font-size:var(--text-sm)}.pending-sync i{animation:spin 2s linear infinite}.user-info{display:flex;align-items:center;gap:var(--space-10px);padding:var(--space-12px) 20px;background:var(--bg-input);border-radius:var(--radius-md);margin-bottom:20px;color:var(--text-secondary);border:1px solid var(--border)}.sync-actions{display:grid;grid-template-columns:1fr;gap:var(--space-10px);margin-bottom:20px}.sync-actions button{display:flex;align-items:center;justify-content:center;gap:var(--space-10px);padding:var(--space-12px) 20px;width:100%}.sync-settings{padding:var(--space-20px);background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border);margin-bottom:20px}.checkbox-label{display:flex;align-items:center;gap:var(--space-10px);cursor:pointer}.checkbox-label input[type='checkbox']{width:var(--size-icon-md);height:var(--size-icon-md);cursor:pointer}.danger-zone{margin-top:40px;padding:var(--space-20px);background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);border-radius:var(--radius-md)}.danger-zone h4{color:var(--danger);margin-bottom:15px}.danger-zone button{width:100%}.sync-auth{text-align:center;padding:40px var(--space-20px);background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border)}.sync-auth p{margin-bottom:20px;color:var(--text-secondary)}.sync-auth button{width:100%;margin-bottom:10px}.sync-auth button:last-child{margin-bottom:0}.auth-modal{max-width:400px}.auth-modal .form-group{margin-bottom:15px}.auth-modal .form-actions{display:flex;gap:var(--space-10px);justify-content:flex-end;margin-top:20px}.auth-modal .form-actions button{flex:1}.sync-notifications{position:fixed;bottom:20px;right:20px;z-index:1000;display:flex;flex-direction:column;gap:var(--space-10px);max-width:400px}.notification{display:flex;align-items:center;gap:var(--space-10px);padding:var(--space-12px) 20px;background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);animation:slideIn 0.3s ease-out;color:var(--text-primary)}.notification.success{background:#059669;color:white;border-left:none}.notification.error{background:#dc2626;color:white;border-left:none}.notification.info{background:#3730a3;color:white;border-left:none}.notification.fade-out{animation:slideOut 0.3s ease-out forwards}@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@media (max-width:768px){.cloud-sync-manager{padding:15px}.sync-notifications{left:10px;right:10px;bottom:10px}.notification{font-size:var(--text-sm)}}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:0.7;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}.status-dot{display:inline-block;width:8px;height:8px;border-radius:var(--radius-full);margin-right:8px}.status-indicator.connected .status-dot{background-color:#4ade80;animation:pulse 2s ease-in-out infinite}.status-indicator.disconnected .status-dot{background-color:#ff6b6b}.toggle-switch{display:flex;align-items:center;gap:var(--space-12px);cursor:pointer;margin:var(--space-md) 0}.toggle-switch input{display:none}.toggle-slider{position:relative;width:var(--size-icon-3xl);height:var(--size-icon-lg);background-color:#374151;border-radius:var(--radius-2xl);transition:background-color 0.3s ease}.toggle-slider::after{content:'';position:absolute;width:var(--size-icon-md);height:var(--size-icon-md);border-radius:var(--radius-full);background-color:white;top:2px;left:2px;transition:transform 0.3s ease}.toggle-switch input:checked+.toggle-slider{background-color:#4ade80}.toggle-switch input:checked+.toggle-slider::after{transform:translateX(24px)}.toggle-label{font-size:var(--text-sm);color:var(--text-primary)}.sync-description{font-size:var(--text-13px);color:var(--text-secondary);margin-top:8px;line-height:1.5}.sync-benefit{display:flex;align-items:center;gap:var(--space-12px);margin-bottom:12px;font-size:15px;color:var(--text-primary)}.benefit-icon{font-size:var(--text-2xl)}.auth-buttons{display:flex;gap:var(--space-12px);margin-top:20px}.auth-buttons .btn{flex:1}.account-actions{margin-top:24px;padding-top:24px;border-top:1px solid var(--border)}#syncNowBtn,#migrateBtn,#downloadBtn{display:none}.cloud-sync-status{cursor:pointer;transition:var(--transition-all-base);background:transparent !important;border:none !important;padding:var(--space-xs) 8px !important}.cloud-sync-status:hover{background:var(--bg-secondary) !important}.sync-details{display:none !important}.top-navigation{width:100%;background:transparent;border-top:1px solid rgba(255,255,255,0.1);flex-shrink:0;padding:0}.nav-container{display:flex;align-items:center;justify-content:center;gap:0.25rem;padding:0.5rem;max-width:900px;margin:0 auto}.top-nav-item{display:flex;flex-direction:column;align-items:center;gap:0.125rem;padding:0.5rem 0.75rem;background:transparent;border:none;border-radius:var(--radius-sm);color:rgba(255,255,255,0.7);cursor:pointer;transition:var(--transition-all-base);position:relative}.top-nav-item:hover{background:rgba(255,255,255,0.1);color:white}.top-nav-item.active{color:#818cf8;background:rgba(99,102,241,0.15)}.top-nav-item.active::after{content:'';position:absolute;bottom:-0.5rem;left:50%;transform:translateX(-50%);width:30px;height:2px;background:#818cf8;border-radius:var(--radius-2px)}.nav-icon{font-size:1.125rem;line-height:1}.nav-label{font-size:0.7rem;font-weight:500;white-space:nowrap}@media (max-width:768px){.nav-container{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.nav-container::-webkit-scrollbar{display:none}.top-nav-item{padding:0.5rem 1rem}}@media (max-width:640px){.top-nav-item{padding:0.375rem 0.75rem;white-space:nowrap}.nav-icon{font-size:1rem}.nav-label{font-size:0.625rem}}.app-header .top-nav-item{color:rgba(255,255,255,0.7)}.app-header .top-nav-item:hover{background:rgba(255,255,255,0.1);color:white}.app-header .top-nav-item.active{color:#818cf8;background:rgba(99,102,241,0.15)}[data-theme='light'] .app-header .top-nav-item{color:rgba(0,0,0,0.7)}[data-theme='light'] .app-header .top-nav-item:hover{background:rgba(0,0,0,0.08);color:rgba(0,0,0,0.9)}[data-theme='light'] .app-header .top-nav-item.active{color:var(--primary);background:rgba(99,102,241,0.1)}[data-theme='light'] .app-header .top-navigation{border-top:1px solid rgba(0,0,0,0.08)}.support-modal .modal-content{max-width:500px;width:90%}.support-form{display:flex;flex-direction:column;gap:1.5rem}.support-form .form-group{display:flex;flex-direction:column;gap:0.5rem}.support-form label{font-weight:500;color:var(--text-primary);font-size:0.875rem}.support-form .form-control{width:100%;padding:0.75rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-input);color:var(--text-primary);font-size:1rem;transition:var(--transition-all-base)}.support-form .form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb,91,95,222),0.1)}.support-form textarea.form-control{resize:vertical;min-height:120px;font-family:inherit;line-height:1.5}.support-form select.form-control{cursor:pointer;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 0.75rem center;background-size:16px;padding-right:2.5rem;appearance:none}.support-form .text-muted{font-size:0.813rem;color:var(--text-secondary);line-height:1.4}@media (max-width:768px){.support-modal .modal-content{width:95%;max-height:90vh}.support-form{gap:1rem}}.practice-form{padding-bottom:20px}.tempo-input-group{display:flex;align-items:center;gap:var(--space-10px);position:relative}.tempo-input-group input{flex:1;padding-right:60px}.tempo-suffix{position:absolute;right:15px;color:var(--text-secondary);font-weight:500;pointer-events:none}.tempo-toggle-btn{background:none;border:none;color:var(--primary);cursor:pointer;padding:var(--space-xs) 8px;border-radius:var(--radius-4px);transition:var(--transition-all-base);margin-left:10px;display:inline-flex;align-items:center;gap:var(--space-xs)}.tempo-toggle-btn:hover{background:var(--bg-input);transform:scale(1.05)}.toggle-icon{font-size:0.9em;display:inline-block;transition:transform 0.3s ease}.tempo-toggle-btn:hover .toggle-icon{transform:rotate(180deg)}.tempo-hint{font-size:0.875rem;color:var(--text-secondary);margin-top:4px}.tempo-input-group input:invalid{border-color:var(--danger)}.percentage-mode .tempo-suffix{color:var(--secondary)}.percentage-mode .tempo-input-group input{border-color:var(--secondary)}.percentage-mode .tempo-toggle-btn{color:var(--secondary)}.audio-file-section{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-12px) 16px;margin:var(--space-md) 0}.audio-file-info{display:flex;align-items:center;gap:var(--space-10px)}.audio-file-label{color:var(--text-secondary);font-size:0.875rem;font-weight:500}.audio-file-name{color:var(--primary);font-size:0.875rem;font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.log-practice-content{overflow:visible !important}.practice-form .btn-primary{margin-top:16px;margin-bottom:8px}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(99,102,241,0.7);transform:scale(1)}50%{box-shadow:0 0 0 10px rgba(99,102,241,0);transform:scale(1.05)}100%{box-shadow:0 0 0 0 rgba(99,102,241,0);transform:scale(1)}}@keyframes confettiFall{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}.notification.success{animation:successPulse 0.5s ease-out}@keyframes successPulse{0%{transform:scale(0.8);opacity:0}50%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}button[type='submit']:disabled{opacity:0.6;cursor:not-allowed;background:var(--bg-input) !important}.practice-log-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;z-index:1000}.practice-log-modal.show{display:flex}.practice-log-content{background:#2a2a3e;border:3px solid rgba(255,255,255,0.2);border-radius:var(--radius-xl);padding:2rem 2.5rem;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 30px 60px -15px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.1),0 0 40px rgba(99,102,241,0.2);position:relative;transform:scale(0.95);transition:transform 0.3s ease}.practice-log-modal.show .practice-log-content{transform:scale(1)}.practice-log-content h2{color:var(--text-primary);margin-bottom:0.75rem;font-size:1.25rem;font-weight:600;text-align:left}.practice-log-content .form-group{background:transparent;padding:0;border-radius:0;margin-bottom:1rem;border:none}.practice-log-content .form-group label{color:var(--text-secondary);font-size:0.875rem;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.05em;display:block}.practice-log-content input,.practice-log-content select,.practice-log-content textarea{background:var(--bg-input);border:1px solid rgba(255,255,255,0.1);color:var(--text-primary);width:100%;padding:var(--space-12px);border-radius:var(--radius-md);font-size:1rem;transition:var(--transition-all-base)}.practice-log-content input:focus,.practice-log-content select:focus,.practice-log-content textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,0.1);outline:none}.practice-log-content input[readonly],.practice-log-content textarea[readonly]{background:rgba(255,255,255,0.02);color:var(--text-secondary);cursor:not-allowed}.practice-log-content .modal-actions{display:flex;gap:var(--space-12px);margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.1)}.practice-log-content .modal-actions .btn{flex:1;padding:var(--space-12px) 24px;font-weight:600;font-size:1rem}.practice-log-content .btn-secondary{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1)}.practice-log-content .btn-secondary:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2)}.practice-log-content::-webkit-scrollbar{width:8px}.practice-log-content::-webkit-scrollbar-track{background:rgba(255,255,255,0.05);border-radius:var(--radius-4px)}.practice-log-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:var(--radius-4px)}.practice-log-content::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.3)}.practice-log-content .info-text{font-size:0.875rem;color:var(--text-secondary);font-style:italic;margin-top:8px}.practice-log-content .session-info{display:flex;gap:2rem;margin-bottom:1rem;padding-bottom:0.75rem;border-bottom:1px solid rgba(255,255,255,0.1)}.practice-log-content .session-info-item{display:flex;flex-direction:column;gap:0.25rem}.practice-log-content .session-info-label{font-size:0.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.05em}.practice-log-content .session-info-value{font-size:1.125rem;font-weight:600;color:var(--text-primary)}.practice-log-content .practice-thumbnail{width:100%;max-width:100%;height:auto;max-height:150px;object-fit:contain;background:rgba(255,255,255,0.05);border-radius:var(--radius-md);margin-bottom:1.5rem;margin-top:0.5rem}.practice-log-content input[type="text"],.practice-log-content input[type="number"],.practice-log-content select{padding:0.5rem 0.75rem;font-size:0.875rem}@media (max-width:768px){.practice-log-content{padding:1.5rem 2rem;width:95%;max-height:90vh}.practice-log-content h2{font-size:1.25rem}.practice-log-content .form-group{padding:var(--space-12px)}.practice-log-content .modal-actions{flex-direction:column}.practice-log-content .modal-actions .btn{width:100%}}@keyframes modalFadeIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.practice-log-modal,.practice-log-content{transition:none}}.repertoire-page{max-width:800px !important;margin:0 auto !important;padding:0;width:100%;box-sizing:border-box}#repertoire-tab,.tab-pane:has(.repertoire-page){max-width:800px !important;margin:0 auto !important;width:100%}.repertoire-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-xl)}.repertoire-header h2{margin:0;color:var(--text-primary);font-size:var(--text-2xl)}.repertoire-controls{margin-bottom:var(--space-xl)}.repertoire-controls .history-filters{display:flex;gap:var(--space-md);align-items:center;flex-wrap:wrap}.search-bar{flex:1}.search-bar input{width:100%}.repertoire-filters{display:flex;gap:var(--space-md)}.repertoire-filters select{min-width:150px}.repertoire-controls .history-filters .filter-select{padding:0.5rem 1rem;height:38px;min-width:120px;border:none;border-radius:6px;background:var(--bg-input);color:var(--text-primary)}.repertoire-controls .history-filters .search-input{padding:0.5rem 1rem;height:38px;width:200px;border:none;border-radius:6px;background:var(--bg-input);color:var(--text-primary)}.repertoire-controls .history-filters input.search-input:focus,.repertoire-controls .history-filters select.filter-select:focus{box-shadow:0 0 0 2px rgba(91,95,222,0.2)}.repertoire-controls .history-filters input.search-input::placeholder{color:var(--text-secondary);opacity:0.8}[data-theme*="dark"] .repertoire-controls .history-filters input.search-input::placeholder,[data-theme*="night"] .repertoire-controls .history-filters input.search-input::placeholder,[data-theme*="midnight"] .repertoire-controls .history-filters input.search-input::placeholder{color:var(--text-secondary);opacity:0.9}.repertoire-controls .history-filters select.filter-select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 8px center;background-size:14px 10px;padding-right:30px;min-width:150px}.repertoire-stats{display:flex;justify-content:space-around;align-items:center;margin-bottom:var(--space-xl);border:0px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-lg) var(--space-xl);box-sizing:border-box}@media (max-width:600px){.repertoire-stats{flex-direction:column;align-items:center;gap:var(--space-sm)}.repertoire-stats .stat-card{width:80%}}.repertoire-stats .stat-card{padding:var(--space-md) var(--space-xl);text-align:center;border-radius:var(--radius);flex:0 0 auto;min-width:225px;max-width:225px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box}.repertoire-stats .stat-value{display:block;font-size:var(--text-2xl);font-weight:700;color:var(--primary);margin-bottom:var(--space-xs)}.repertoire-stats .stat-label{font-size:var(--text-sm);color:var(--text-secondary)}.repertoire-grid{display:grid;grid-template-columns:1fr;gap:var(--space-sm)}.song-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:var(--transition-all-base);position:relative;overflow:hidden}.song-row{display:flex !important;align-items:center !important;gap:var(--space-md);min-height:44px}.song-row>*{display:flex;align-items:center;margin:0}.song-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--primary)}.song-header[data-toggle='collapse']{padding:var(--space-md) var(--space-lg);cursor:pointer;background:var(--bg-card);transition:background-color 0.2s ease;user-select:none;margin-bottom:0}.song-header[data-toggle='collapse']:hover{background:var(--bg-secondary)}.song-header-content{display:grid;grid-template-columns:2fr 1.5fr auto auto;gap:1rem;align-items:center;width:100%}.collapse-icon{font-size:0.8rem;color:var(--text-secondary);transition:transform 0.2s ease;justify-self:end}.song-header.expanded .collapse-icon{transform:rotate(180deg)}.song-details-collapsible{padding:0 var(--space-lg) var(--space-lg);background:var(--bg-card);border-top:1px solid var(--border);animation:slideDown 0.2s ease}@keyframes slideDown{from{opacity:0;max-height:0}to{opacity:1;max-height:1000px}}.song-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-md)}.song-title{margin:0;font-size:var(--text-base);color:var(--text-primary);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-header-content .song-artist{color:var(--text-secondary);font-size:var(--text-sm);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-details-collapsible .song-artist{color:var(--text-secondary);font-size:var(--text-base);margin:0 0 var(--space-md) 0}.song-status{padding:0.125rem 0.5rem;border-radius:var(--radius-full);font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap;display:inline-flex !important;align-items:center;height:fit-content}.youtube-link,.load-youtube-link{display:inline-flex !important;align-items:center;height:fit-content}.status-learning{background:rgba(245,158,11,0.1);color:var(--warning)}.status-polishing{background:rgba(59,130,246,0.1);color:var(--info)}.status-performance-ready{background:rgba(16,185,129,0.1);color:var(--success)}.status-inactive{background:rgba(156,163,175,0.1);color:var(--text-muted)}.song-details{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-bottom:var(--space-md);font-size:var(--text-sm)}.difficulty{padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-weight:500}.difficulty-beginner{background:rgba(16,185,129,0.1);color:var(--success)}.difficulty-intermediate{background:rgba(245,158,11,0.1);color:var(--warning)}.difficulty-advanced{background:rgba(239,68,68,0.1);color:var(--danger)}.song-key,.song-tempo{color:var(--text-secondary)}.last-practiced{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-sm)}.song-stats{display:flex;gap:var(--space-lg);margin-bottom:var(--space-lg);padding:var(--space-sm) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:var(--text-sm);color:var(--text-secondary)}.song-stats .icon{margin-right:var(--space-xs)}.song-actions{display:flex;gap:var(--space-sm);flex-wrap:wrap}.btn-icon{display:inline-flex !important;align-items:center;justify-content:center;height:var(--size-icon-xl);width:var(--size-icon-xl);padding:0}.song-actions .btn{flex:1;min-width:100px}#songModal{position:fixed !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;display:flex !important;align-items:center !important;justify-content:center !important;z-index:9999 !important;background:rgba(0,0,0,0.8) !important;backdrop-filter:blur(4px)}#songModal .modal-content{position:relative;max-width:600px;width:90%;max-height:90vh;margin:auto;background:var(--bg-card);border-radius:var(--radius-xl);box-shadow:0 20px 60px rgba(0,0,0,0.5);overflow-y:auto;transform:scale(1);padding:2rem}#songModal input,#songModal select,#songModal textarea,#songModal input[type="text"],#songModal input[type="number"],#songModal input[type="url"],#songModal .form-control{border:2px solid #ff9500 !important;background:rgba(255,255,255,0.15) !important;background-color:rgba(255,255,255,0.15) !important;transition:all var(--transition-fast);color:var(--text-primary) !important;outline:1px solid rgba(255,165,0,0.3) !important}#songModal input:focus,#songModal select:focus,#songModal textarea:focus,#songModal input[type="text"]:focus,#songModal input[type="number"]:focus,#songModal input[type="url"]:focus,#songModal .form-control:focus{border-color:#ffa500 !important;border-width:2px !important;background:rgba(255,255,255,0.2) !important;background-color:rgba(255,255,255,0.2) !important;box-shadow:0 0 0 3px rgba(255,165,0,0.25) !important;outline:1px solid rgba(255,165,0,0.5) !important}#songModal input[type="text"]:hover:not(:focus),#songModal input[type="number"]:hover:not(:focus),#songModal input[type="url"]:hover:not(:focus),#songModal select:hover:not(:focus),#songModal textarea:hover:not(:focus){border-color:rgba(255,165,0,0.6) !important;background:rgba(255,255,255,0.1) !important}#songModal input::placeholder,#songModal textarea::placeholder{color:rgba(255,255,255,0.5) !important;opacity:1 !important}#songModal select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFA500' stroke='%23FFA500' stroke-width='0.5' d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 1rem center !important;padding-right:2.5rem !important;appearance:none !important}#songModal select option{background-color:var(--bg-primary) !important;color:var(--text-primary) !important;padding:0.5rem !important}[data-theme*="dark"] #songModal select option,[data-theme*="night"] #songModal select option,[data-theme*="midnight"] #songModal select option,[data-theme*="ocean"] #songModal select option{background-color:#2a2a2a !important;color:#ffffff !important}[data-theme="light"] #songModal select option,[data-theme="classic"] #songModal select option,[data-theme="pastel"] #songModal select option{background-color:#ffffff !important;color:#1a1a1a !important}#songModal select option:hover{background-color:var(--primary) !important;color:var(--text-inverse) !important}[data-theme="light"] #songModal input,[data-theme="light"] #songModal select,[data-theme="light"] #songModal textarea,[data-theme="classic"] #songModal input,[data-theme="classic"] #songModal select,[data-theme="classic"] #songModal textarea,[data-theme="pastel"] #songModal input,[data-theme="pastel"] #songModal select,[data-theme="pastel"] #songModal textarea{border:2px solid rgba(255,140,0,0.6) !important;background:rgba(0,0,0,0.04) !important;color:var(--text-primary) !important}[data-theme="light"] #songModal input:focus,[data-theme="light"] #songModal select:focus,[data-theme="light"] #songModal textarea:focus,[data-theme="classic"] #songModal input:focus,[data-theme="classic"] #songModal select:focus,[data-theme="classic"] #songModal textarea:focus,[data-theme="pastel"] #songModal input:focus,[data-theme="pastel"] #songModal select:focus,[data-theme="pastel"] #songModal textarea:focus{border-color:rgba(255,140,0,0.9) !important;background:rgba(0,0,0,0.02) !important}[data-theme="light"] #songModal input::placeholder,[data-theme="light"] #songModal textarea::placeholder,[data-theme="classic"] #songModal input::placeholder,[data-theme="classic"] #songModal textarea::placeholder,[data-theme="pastel"] #songModal input::placeholder,[data-theme="pastel"] #songModal textarea::placeholder{color:rgba(0,0,0,0.5) !important;opacity:1 !important}#songModal h3{margin-top:0;margin-bottom:1.5rem;color:var(--text-primary);display:flex;justify-content:space-between;align-items:center}#songModal .close-btn{background:none;border:none;font-size:1.5rem;color:var(--text-secondary);cursor:pointer;padding:0.5rem;border-radius:var(--radius-full);transition:var(--transition-all-base);line-height:1}#songModal .form-row{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-bottom:0.5rem}#songModal .required{color:var(--danger)}.repertoire-grid .empty-state{grid-column:1 / -1;text-align:center;padding:var(--space-3xl);color:var(--text-secondary)}.repertoire-grid .empty-state .icon{display:block;margin-bottom:var(--space-lg)}@media (max-width:768px){.repertoire-controls .history-filters{flex-direction:column;align-items:stretch}.repertoire-controls .history-filters input.search-input,.repertoire-controls .history-filters select.filter-select{width:100%;max-width:100%}.repertoire-filters{flex-direction:column}.repertoire-filters select{width:100%}.repertoire-grid{grid-template-columns:1fr}.song-actions{flex-direction:column}.song-actions .btn{width:100%}#songModal .modal-content{width:95%;max-width:95%;max-height:95vh;margin:2.5vh auto}#songModal .form-row{grid-template-columns:1fr}.song-header-content{grid-template-columns:1fr auto auto}.song-header-content .song-artist{display:none}}#songModal .modal-content input,#songModal .modal-content select,#songModal .modal-content textarea{border:2px solid #ff9500 !important;background-color:rgba(255,255,255,0.15) !important;outline:1px solid rgba(255,149,0,0.3) !important;min-height:40px !important}#songModal .modal-content input::placeholder,#songModal .modal-content textarea::placeholder{color:rgba(255,255,255,0.6) !important;opacity:1 !important}.btn.loading{position:relative;cursor:wait;opacity:0.8}.btn.loading:disabled{cursor:wait !important}.btn.loading .icon{animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}#songModal button[type="submit"]{min-width:120px;transition:background-color 0.2s ease,opacity 0.2s ease}#songModal button[type="submit"]:disabled{background-color:var(--primary);opacity:0.7}.btn.loading .icon{display:inline-block;animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}#songModal.saving{pointer-events:none}#songModal.saving .modal-content{pointer-events:auto}#songModal.saving .modal-close,#songModal.saving .btn-secondary{pointer-events:none;opacity:0.5}.unified-practice-minimal{padding:1.5rem;background:var(--bg-secondary);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);position:relative}.timer-display-section{position:sticky;top:0;background:var(--bg-card);z-index:100;padding:0.75rem 1rem;margin-bottom:1rem;border-radius:var(--radius-lg);box-shadow:0 2px 8px rgba(0,0,0,0.1);backdrop-filter:blur(10px);border:1px solid var(--border);text-align:center;transition:box-shadow 0.3s ease;display:flex;flex-direction:column;align-items:center;gap:0.5rem}.timer-display-section.scrolled{box-shadow:var(--shadow-lg)}.unified-practice-minimal .timer-display{font-size:2.5rem;margin:0;min-height:auto;line-height:1.2;font-weight:700;color:var(--primary);font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0.05em;user-select:none;cursor:default;transition:color 0.3s ease;text-align:center;width:100%}.timer-controls-wrapper{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.timer-controls-row{display:flex;gap:1rem;justify-content:center;align-items:center;width:100%}.unified-practice-minimal .timer-controls{display:flex;gap:0.5rem;justify-content:center;align-items:center}.timer-control-btn{padding:0.5rem 1rem;font-size:0.875rem;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;transition:all 0.2s ease;font-weight:500;display:flex;align-items:center;gap:0.5rem}.timer-control-btn.primary{background:var(--primary);color:white;border-color:var(--primary)}.timer-control-btn.primary:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.timer-control-btn.secondary{background:var(--bg-secondary);color:var(--text-primary)}.timer-control-btn.secondary:hover{background:var(--bg-hover);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.timer-sync-row{display:flex;align-items:center;justify-content:center;gap:0.5rem;width:100%}.sync-checkbox{display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;color:var(--text-secondary);cursor:pointer;padding:0.25rem 0.5rem;border-radius:var(--radius-sm);transition:background-color 0.2s ease}.sync-checkbox:hover{background-color:var(--bg-hover)}.sync-checkbox input[type='checkbox']{cursor:pointer}.save-session-btn{padding:0.5rem 1.25rem;background:var(--success);color:white;border:none;border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;white-space:nowrap}.save-session-btn:hover{background:var(--success-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.mode-tabs{display:flex;gap:0.5rem;margin-bottom:2rem;border-bottom:2px solid var(--border);padding-bottom:0;z-index:10}.mode-tab{flex:1;padding:0.75rem 1rem;background:transparent;border:none;border-bottom:3px solid transparent;color:var(--text-secondary);cursor:pointer;transition:all 0.2s ease;font-size:0.875rem;font-weight:500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.25rem;position:relative;bottom:-2px;min-height:60px}.mode-tab:hover{color:var(--text-primary);background:var(--bg-hover)}.mode-tab.active{color:var(--primary);border-bottom-color:var(--primary);background:var(--bg-card)}.tab-icon{font-size:1.25rem;line-height:1;display:flex;align-items:center;justify-content:center}.tab-text{font-weight:500}.mode-content-area{min-height:400px;position:relative;width:100%;overflow:hidden;contain:layout style}.mode-panel{display:none;animation:fadeIn 0.3s ease;width:100%;position:relative;min-height:400px;overflow:visible}.mode-panel.active{display:block}.audio-upload-minimal{width:100%;padding:1rem;position:relative;min-height:200px}.metronome-minimal-container{background:var(--bg-card);padding:2rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:1.5rem}.bpm-section{text-align:center;margin-bottom:1rem}.bpm-display-minimal{display:inline-flex;align-items:center;gap:1rem;padding:1rem 2rem;background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border);margin-bottom:1rem}.bpm-value{font-size:3rem;font-weight:700;color:var(--primary);font-family:var(--font-mono);min-width:120px;text-align:center;position:relative}.bpm-display-minimal input#bpmValueInput{font-size:3rem;font-weight:700;color:var(--primary);font-family:var(--font-mono);background:transparent;border:none;outline:none;width:120px;text-align:center;cursor:pointer;padding:0;margin:0;transition:all 0.2s ease}.bpm-display-minimal input#bpmValueInput:hover{background:var(--bg-hover);border-radius:var(--radius-sm);padding:0 0.5rem}.bpm-display-minimal input#bpmValueInput:focus{background:var(--bg-primary);color:var(--text-primary);padding:0 0.5rem;border-radius:var(--radius-sm)}.bpm-label{font-size:1.25rem;color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:0.05em}.bpm-slider-minimal{margin:0.5rem 0;width:250px;flex-shrink:0}.slider-label{display:flex;justify-content:space-between;margin-bottom:0.5rem;font-size:0.875rem;color:var(--text-secondary)}.minimal-slider{width:100%;height:8px;background:var(--bg-secondary);outline:none;border-radius:4px;-webkit-appearance:none;appearance:none;cursor:pointer}.minimal-slider:hover{background:var(--bg-hover)}.minimal-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;background:var(--primary);cursor:pointer;border-radius:50%;transition:all 0.2s ease;box-shadow:0 2px 4px rgba(0,0,0,0.2)}.minimal-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 4px 8px rgba(0,0,0,0.3)}.minimal-slider::-moz-range-thumb{width:24px;height:24px;background:var(--primary);cursor:pointer;border-radius:50%;border:none;transition:all 0.2s ease;box-shadow:0 2px 4px rgba(0,0,0,0.2)}.minimal-slider::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 4px 8px rgba(0,0,0,0.3)}.metronome-button-row{display:flex;gap:0.75rem;justify-content:center;margin-top:0.5rem;align-items:center}.metronome-button-row:has(.minimal-select){display:grid;grid-template-columns:150px 150px;gap:1rem;justify-content:center;margin-top:0.5rem}.metronome-labels-row{display:flex;justify-content:center;gap:2rem;margin-top:1rem}.metronome-btn{padding:0.5rem 1rem;border:none;border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:all 0.2s ease;font-size:0.8rem;display:flex;align-items:center;gap:0.25rem;min-width:80px;justify-content:center;white-space:nowrap}.metronome-btn.start{background:var(--success);color:white}.metronome-btn.start:hover{background:var(--success-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.metronome-btn.stop{background:var(--danger);color:white}.metronome-btn.stop:hover{background:var(--danger-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.metronome-btn.tap{background:var(--primary);color:white;min-width:80px}.metronome-btn.tap:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.audio-player-minimal{background:var(--bg-card);padding:2rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:1.5rem}.browse-audio-container{display:flex;align-items:center;gap:1rem;justify-content:center;flex-wrap:wrap}.browse-audio-container .browse-audio-btn{flex:0 1 auto;width:auto;margin-bottom:0}.browse-audio-container .file-hint{flex:0 0 auto;font-size:0.75rem;color:var(--text-muted);margin:0;white-space:nowrap}.youtube-player-minimal{background:var(--bg-card);padding:2rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:1.5rem}.youtube-input-minimal .url-input-group{display:flex;gap:0.75rem;align-items:center;max-width:600px;margin:0 auto}.youtube-input-minimal .youtube-url-input{flex:1;min-width:0}.youtube-input-minimal .load-btn{flex:0 0 auto;padding:0.75rem 1.5rem;white-space:nowrap}.youtube-controls-minimal{display:flex;gap:1rem;justify-content:center;margin-top:1rem;flex-wrap:wrap}.practice-controls-section{background:var(--bg-card);padding:1.5rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-top:1.5rem;text-align:center}.practice-form-input{width:100%;padding:0.75rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-secondary);color:var(--text-primary);font-size:1rem;transition:all 0.2s ease}.practice-form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-alpha)}@media (max-width:768px){.unified-practice-minimal{padding:1rem}.timer-display-section{padding:0.4rem 0.75rem}.unified-practice-minimal .timer-display{font-size:2rem}.mode-tabs{flex-wrap:wrap}.mode-tab{flex:1 0 auto;min-width:100px;padding:0.5rem 1rem}.bpm-display-minimal{padding:0.75rem 1rem}.bpm-value,.bpm-display-minimal input#bpmValueInput{font-size:2rem}.metronome-btn{padding:0.5rem 1rem;min-width:100px}.browse-audio-container{justify-content:flex-start}.browse-audio-container .browse-audio-btn{flex:1 1 auto}.browse-audio-container .file-hint{flex:1 0 100%;text-align:center;margin-top:0.5rem}.youtube-input-minimal .url-input-group{flex-wrap:nowrap}.youtube-input-minimal .load-btn{padding:0.75rem 1rem;min-width:80px}}.mode-tabs{z-index:10}.practice-modes{z-index:1}.main-content-new{position:relative}[data-theme] .timer-display-section{background:var(--bg-card);border-color:var(--border)}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.metronome-btn:active,.timer-control-btn:active{transform:scale(0.98)}.loading{opacity:0.6;pointer-events:none}.error{border-color:var(--danger)}.error-message{color:var(--danger);font-size:0.875rem;margin-top:0.5rem}.accent-pattern-minimal{text-align:center;margin-bottom:1.5rem}.accent-pattern-minimal label{display:block;margin-bottom:0.75rem;color:var(--text-secondary);font-size:0.875rem;font-weight:500}.accent-beats{display:inline-flex;gap:0.5rem;justify-content:center;align-items:center}.accent-btn{width:32px;height:32px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:50%;color:var(--text-primary);font-size:0.75rem;font-weight:500;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.accent-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.accent-btn.active{background:var(--primary);color:white;border-color:var(--primary)}.advanced-features-minimal{margin-top:1.5rem;background:var(--bg-tertiary);border-radius:var(--radius-lg);border:1px solid var(--border);padding:1rem;transition:all 0.3s ease}.advanced-features-minimal summary{cursor:pointer;color:var(--text-primary);font-weight:500;font-size:0.875rem;user-select:none;display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.5rem;margin:-0.5rem;border-radius:var(--radius-md);transition:all 0.2s ease}.advanced-features-minimal summary:hover{background:var(--bg-hover)}.advanced-features-minimal[open] summary{margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}.feature-section-minimal{margin-bottom:1rem;padding:0.5rem}.minimal-select{width:auto;min-width:80px;max-width:120px;padding:0.5rem 0.75rem;padding-right:2rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-secondary);color:var(--text-primary);font-size:0.8rem;font-weight:500;cursor:pointer;transition:all 0.2s ease;text-align:center;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.5rem center}.minimal-select:hover{background-color:var(--bg-hover);border-color:var(--primary)}.minimal-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-alpha)}.metronome-labels-row{display:grid;grid-template-columns:150px 150px;gap:1rem;justify-content:center;margin-top:1rem;margin-bottom:0.25rem}.metronome-label{font-size:0.875rem;color:var(--text-secondary);font-weight:500;text-align:center;width:100%}.tempo-controls-compact{display:grid;grid-template-columns:250px 1fr;align-items:center;margin-bottom:1.5rem;gap:2rem}.tempo-buttons-group{display:flex;gap:1.5rem;justify-content:center}.compact-metronome-controls{display:grid;grid-template-columns:auto auto 1fr;gap:1rem;align-items:center;justify-content:start;margin-bottom:1.5rem;padding:0.75rem 1rem;background:var(--bg-tertiary);border-radius:var(--radius-lg);border:1px solid var(--border)}.control-group{display:flex;flex-direction:column;gap:0.25rem;align-items:center}.control-group label{font-size:0.7rem;color:var(--text-secondary);font-weight:500;text-align:center}.compact-metronome-controls .accent-pattern-minimal{margin-bottom:0}.compact-metronome-controls .accent-beats{gap:0.25rem}.progression-input{-webkit-appearance:none;-moz-appearance:textfield;appearance:none}.progression-input::-webkit-outer-spin-button,.progression-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.progression-input::-moz-outer-spin-button,.progression-input::-moz-inner-spin-button{-moz-appearance:none;margin:0}.progression-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(91,95,222,0.1);background:var(--bg-primary)}.progression-input:hover:not(:focus){border-color:var(--border-hover);background:var(--bg-hover)}@media (max-width:768px){.youtube-speed-progression-controls>div{grid-template-columns:auto 1fr !important;gap:var(--space-xs) var(--space-sm) !important}.progression-input{width:50px !important;font-size:var(--text-xs) !important}}.daily-practice-suggestion{background:linear-gradient(135deg,var(--primary-light,#8b92ff) 0%,var(--primary) 100%);color:white;border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:2rem;position:relative;box-shadow:0 4px 12px rgba(0,0,0,0.1);animation:fadeIn 0.3s ease}.dismiss-btn{position:absolute;top:12px;right:12px;background:rgba(255,255,255,0.2);border:none;color:white;font-size:var(--text-2xl);width:var(--size-icon-xl);height:var(--size-icon-xl);border-radius:var(--radius-full);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-all-base);line-height:1}.dismiss-btn:hover{background:rgba(255,255,255,0.3);transform:scale(1.1)}.suggestion-header{display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem}.suggestion-icon{font-size:1.5rem}.suggestion-title{margin:0;font-size:0.9rem;text-transform:uppercase;letter-spacing:0.5px;opacity:0.9}.suggestion-content h4{margin:0 0 0.5rem 0;font-size:1.25rem}.suggestion-description{margin:0 0 1rem 0;opacity:0.95;line-height:1.5}.suggested-exercises{background:rgba(255,255,255,0.15);border-radius:var(--radius-md);padding:1rem;margin-bottom:1rem}.suggested-exercises h5{margin:0 0 0.5rem 0;font-size:0.9rem;opacity:0.9}.suggested-exercises .exercise-list{list-style:none;padding:0;margin:0}.suggested-exercises .exercise-item{display:flex;justify-content:space-between;align-items:center;padding:0.5rem 0;border-bottom:1px solid rgba(255,255,255,0.1)}.suggested-exercises .exercise-item:last-child{border-bottom:none}.exercise-name{opacity:0.95}.exercise-duration{font-size:0.85rem;opacity:0.8;white-space:nowrap}.start-suggestion-btn{background:white;color:var(--primary);border:none;padding:0.75rem 1.5rem;font-weight:600;transition:var(--transition-all-base);border-radius:var(--radius-sm)}.start-suggestion-btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.2)}@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}@media (max-width:768px){.daily-practice-suggestion{padding:1.25rem;margin-bottom:1.5rem}.suggestion-header{gap:0.5rem}.suggestion-icon{font-size:1.25rem}.suggestion-title{font-size:0.8rem}.suggestion-content h4{font-size:1.1rem}.suggestion-description{font-size:0.9rem}.suggested-exercises{padding:0.75rem}.start-suggestion-btn{width:100%;padding:0.875rem}}[data-theme='dark'] .daily-practice-suggestion{background:linear-gradient(135deg,var(--primary-dark,#5a61d8) 0%,var(--primary) 100%)}[data-theme*='pastel'] .daily-practice-suggestion{background:linear-gradient(135deg,var(--primary-pastel,#b8bfff) 0%,var(--primary) 100%);color:var(--text-primary)}[data-theme*='pastel'] .dismiss-btn{background:rgba(0,0,0,0.1);color:var(--text-primary)}[data-theme*='pastel'] .dismiss-btn:hover{background:rgba(0,0,0,0.15)}[data-theme*='pastel'] .start-suggestion-btn{background:var(--bg-primary);color:white}[data-theme*='pastel'] .suggested-exercises{background:rgba(0,0,0,0.05)}.modal{position:fixed !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;display:none;align-items:center !important;justify-content:center !important;z-index:1000001 !important}.modal.show,.modal[style*='display:block'],.modal[style*='display:flex']{display:flex !important;align-items:center !important;justify-content:center !important;position:fixed !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important}#songModal,#goalModal,#dailyGoalsModal,#drillModal{position:fixed !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;display:none;align-items:center !important;justify-content:center !important}#songModal.show,#goalModal.show,#dailyGoalsModal.show,#drillModal.show{display:flex !important}.modal-content{position:relative !important;margin:auto !important;max-height:90vh !important;overflow-y:auto !important}@media (min-width:769px){.modal{position:fixed !important;top:0 !important;left:0 !important;transform:none !important}.modal-content{transform:none !important}}@media (max-width:768px){.modal{padding:var(--space-md) !important}.modal-content{width:100% !important;max-width:calc(100% - 32px) !important;margin:auto !important}}#addGoalBtn{cursor:pointer !important;pointer-events:auto !important}#dailyGoalsModal .modal-content{max-width:500px !important;width:90% !important}#goalModal .modal-content,#songModal .modal-content{position:relative !important}#goalModal .close-btn,#songModal .close-btn{position:absolute !important;top:1rem !important;right:1rem !important;z-index:1000 !important}.fretboard-game{padding:2rem;max-width:800px;margin:0 auto}.game-header{text-align:center;margin-bottom:2rem}.game-header h2{color:var(--text-primary);margin-bottom:0.5rem}.game-description{color:var(--text-secondary);font-size:1.1rem}.game-controls{margin-bottom:2rem}.controls-row{display:flex;align-items:center;justify-content:center;gap:2rem}.mic-permission-panel{margin-top:2rem;padding:2rem;background:var(--bg-card);border:2px solid var(--danger);border-radius:12px;text-align:center}.permission-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.permission-icon{font-size:3rem;display:block}.mic-permission-panel p{color:var(--text-primary);font-size:1.1rem;margin:0}.mic-permission-panel ol{text-align:left;max-width:400px;margin:0 auto 1rem;padding-left:1.5rem}.mic-permission-panel ol li{margin-bottom:0.5rem;color:var(--text-secondary);line-height:1.5}.mic-permission-panel .btn{min-width:200px}.duration-selector{display:flex;align-items:center;gap:0.5rem}.duration-selector label{color:var(--text-primary);font-weight:500}.duration-select{padding:0.5rem 1rem;background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius);font-size:1rem}.start-game-btn{padding:0.75rem 2rem;font-size:1.1rem;font-weight:600}.game-display{text-align:center}.timer-display{margin-bottom:2rem;font-size:1.5rem}.time-label{color:var(--text-secondary);margin-right:0.5rem}.time-value{color:var(--primary);font-weight:600;font-family:'Courier New',monospace}.note-display{margin-bottom:2rem}.current-note{width:300px;height:300px;margin:0 auto 1rem;background:var(--bg-card);border:4px solid var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 30px rgba(var(--primary-rgb),0.4);transition:all 0.3s ease;position:relative}.note-value{font-size:8rem;font-weight:700;color:var(--primary);line-height:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;padding:0}.note-feedback{height:2rem;font-size:1.2rem;font-weight:600;transition:all 0.3s ease}.note-feedback.success{color:var(--success)}.note-feedback.error{color:var(--danger)}.score-display{display:flex;justify-content:center;gap:3rem;margin-bottom:2rem}.score-item{display:flex;align-items:center;gap:0.5rem}.score-label{color:var(--text-secondary);font-size:1.1rem}.score-value{color:var(--text-primary);font-size:1.3rem;font-weight:600}.pitch-indicator{max-width:400px;margin:2rem auto}.audio-level-container{margin-bottom:1.5rem;display:flex;align-items:center;gap:1rem}.audio-level-label{color:var(--text-secondary);font-size:0.9rem;min-width:80px}.audio-level-bar{flex:1;height:20px;background:var(--bg-secondary);border-radius:10px;overflow:hidden;position:relative}.audio-level-fill{height:100%;width:0%;background:var(--primary);transition:width 0.1s ease,background-color 0.2s ease;border-radius:10px}.pitch-meter{display:flex;align-items:center;gap:1rem;margin-bottom:0.5rem}.pitch-low,.pitch-high{font-size:1.5rem;color:var(--text-secondary)}.pitch-bar{flex:1;height:30px;background:var(--bg-secondary);border-radius:15px;position:relative;overflow:hidden}.pitch-marker{position:absolute;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;background:var(--primary);border-radius:50%;transition:left 0.1s ease,background-color 0.2s ease;opacity:0}.detected-info{text-align:center;margin-top:1rem;padding:1rem;background:var(--bg-secondary);border-radius:var(--radius);border:1px solid var(--border)}.detected-note{color:var(--primary);font-size:1.8rem;font-weight:700;margin-bottom:0.5rem;letter-spacing:0.05em}.detected-frequency{color:var(--text-primary);font-size:1.2rem;font-weight:500}.detected-info.active{background:var(--bg-card);border-color:var(--primary);box-shadow:0 2px 8px rgba(var(--primary-rgb),0.2)}.stop-game-btn{margin-top:2rem}.game-results{text-align:center;padding:2rem;background:var(--bg-card);border-radius:var(--radius-lg);margin-bottom:2rem}.game-results h3{color:var(--primary);margin-bottom:1.5rem;font-size:2rem}.results-stats{display:flex;justify-content:center;gap:2rem;margin-bottom:2rem}.stat-item{text-align:center}.stat-label{display:block;color:var(--text-secondary);margin-bottom:0.5rem}.stat-value{display:block;color:var(--text-primary);font-size:1.5rem;font-weight:600}.leaderboard{margin-top:3rem;padding:2rem;background:var(--bg-card);border-radius:var(--radius-lg)}.leaderboard h3{color:var(--text-primary);margin-bottom:1.5rem;text-align:center}.leaderboard-items{display:grid;gap:1rem}.leaderboard-item{padding:1rem;background:var(--bg-secondary);border-radius:var(--radius)}.leaderboard-item h4{color:var(--primary);margin-bottom:0.75rem}.leaderboard-stats-row{display:flex;align-items:center;justify-content:center;gap:0.5rem;color:var(--text-secondary);font-size:0.95rem}.stat-inline{display:inline-flex;align-items:center;gap:0.5rem}.stat-inline strong{color:var(--text-primary);font-weight:600}.stat-separator{color:var(--text-muted);margin:0 0.5rem}.empty-state{text-align:center;color:var(--text-secondary);padding:2rem}.loading-text{text-align:center;color:var(--text-secondary)}.calibration-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:10000;padding:1rem}.calibration-content{background:var(--bg-card);padding:2rem;border-radius:12px;max-width:500px;width:100%;text-align:center}.calibration-content h3{color:var(--primary);margin-bottom:1rem}.calibration-content p{color:var(--text-secondary);margin-bottom:1.5rem}.noise-level-display{margin:1.5rem 0;padding:1rem;background:var(--bg-secondary);border-radius:8px}.noise-meter{height:30px;background:var(--bg-tertiary);border-radius:15px;overflow:hidden;margin-bottom:0.5rem}.noise-meter-fill{height:100%;background:var(--primary);transition:width 0.1s ease;border-radius:15px}.noise-level-text{color:var(--text-primary);font-weight:600}.calibration-timer{font-size:2rem;color:var(--primary);font-weight:600;margin:1rem 0}.calibration-note-circle{width:150px;height:150px;margin:0 auto;background:var(--bg-card);border:3px solid var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(var(--primary-rgb),0.3)}.calibration-note-value{font-size:4rem;font-weight:700;color:var(--primary);line-height:1}.calibration-mode-toggle{margin:1rem 0;padding:1rem;background:var(--bg-secondary);border-radius:8px}.calibration-mode-toggle label{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.calibration-mode-toggle input[type="checkbox"]{transform:scale(1.5);margin-left:1rem;cursor:pointer}.calibration-mode-toggle strong{color:var(--text-primary);font-weight:600}.calibration-mode-toggle small{color:var(--text-secondary);font-size:0.875rem;line-height:1.4}@media (max-width:768px){.fretboard-game{padding:1rem}.controls-row{flex-direction:row;flex-wrap:wrap;gap:0.5rem;justify-content:center}.duration-selector{flex-basis:100%;justify-content:center}.controls-row .btn{flex:0 0 auto;min-width:140px}.current-note{width:200px;height:200px}.note-value{font-size:5rem}.score-display{flex-direction:column;gap:1rem}.results-stats{flex-direction:column;gap:1rem}.leaderboard-stats-row{flex-wrap:wrap;justify-content:center}.stat-separator:last-of-type{display:none}}.my-drills-page{padding:2rem;max-width:1400px;margin:0 auto}.drill-item.completed{background:linear-gradient(135deg,rgba(76,175,80,0.05),transparent);border-left:3px solid var(--success)}.drill-item.completed .drill-checkbox{background:var(--success);color:white;font-weight:bold;display:flex;align-items:center;justify-content:center}.completed-banner{position:absolute;top:10px;right:-35px;background:linear-gradient(135deg,#e74c3c,#c0392b);color:white;padding:6px 40px;font-size:0.7rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;transform:rotate(45deg);box-shadow:0 3px 10px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.3),inset 0 -1px 0 rgba(0,0,0,0.2);z-index:10;overflow:hidden;width:150px;text-align:center}.completed-banner::before,.completed-banner::after{content:'';position:absolute;top:100%;width:0;height:0;border-style:solid;z-index:-1}.completed-banner::before{left:0;border-width:0 0 10px 10px;border-color:transparent transparent #8e2a1f transparent}.completed-banner::after{right:0;border-width:0 10px 10px 0;border-color:transparent #8e2a1f transparent transparent}.completed-banner span{display:block;animation:bannerShine 3s ease-in-out infinite}@keyframes bannerShine{0%,100%{opacity:1;text-shadow:0 0 5px rgba(255,255,255,0.5)}50%{opacity:0.95;text-shadow:0 0 15px rgba(255,255,255,0.8)}}.drill-item.completed .drill-info{opacity:0.7}.drill-item.completed .drill-title{text-decoration:line-through;opacity:0.8}.completion-star{display:inline-block;margin-right:4px;font-size:0.9em;animation:starPop 0.3s ease}@keyframes starPop{0%{transform:scale(0) rotate(0deg)}50%{transform:scale(1.2) rotate(180deg)}100%{transform:scale(1) rotate(360deg)}}.mini-drill.completed{background:linear-gradient(90deg,rgba(76,175,80,0.15),transparent);border-left:2px solid var(--success);padding-left:6px}.mini-drill.completed .drill-name{text-decoration:line-through;opacity:0.7}.stat-item.all-completed{color:var(--success);font-weight:bold;background:linear-gradient(135deg,rgba(76,175,80,0.1),transparent);padding:0.25rem 0.5rem;border-radius:var(--radius-md);animation:celebratePulse 2s ease infinite}@keyframes celebratePulse{0%,100%{transform:scale(1);background:linear-gradient(135deg,rgba(76,175,80,0.1),transparent)}50%{transform:scale(1.02);background:linear-gradient(135deg,rgba(76,175,80,0.2),transparent)}}.drills-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.drills-header h2{font-size:1.75rem;font-weight:600;margin:0;color:var(--text-primary)}.view-switcher{display:flex;gap:0.5rem;background:var(--bg-secondary);padding:0.25rem;border-radius:var(--radius-lg)}.view-btn{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1.25rem;border:none;background:transparent;color:var(--text-secondary);border-radius:var(--radius-md);cursor:pointer;transition:all 0.2s;font-size:0.95rem;font-weight:500}.view-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.view-btn.active{background:var(--bg-primary);color:var(--primary);box-shadow:var(--shadow-sm)}.view-btn .icon{font-size:1.1rem}.today-practice{width:100%;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.practice-card{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:1.5rem;border:1px solid var(--border);width:100%;overflow:visible;max-width:900px}.practice-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.practice-card-title{font-size:1.25rem;font-weight:600;display:flex;align-items:center;gap:0.5rem}.practice-stats{display:flex;gap:1.5rem;color:var(--text-secondary);font-size:0.9rem}.stat-item{display:flex;align-items:center;gap:0.25rem}.start-practice-btn{background:var(--primary);color:white;border:none;padding:1rem 2rem;border-radius:var(--radius-md);font-size:1.1rem;font-weight:600;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:0.5rem}.start-practice-btn:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}.drill-list{display:flex;flex-direction:column;gap:0.75rem;overflow:visible;padding-right:20px}.drill-item{position:relative !important;display:flex;align-items:center;gap:1rem;padding:1rem;padding-right:3rem;background:var(--bg-primary);border-radius:var(--radius-md);border:1px solid var(--border);transition:all 0.2s;cursor:pointer;overflow:visible}.drill-item:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)}.drill-item.completed{opacity:0.7;background:var(--success-bg)}.drill-checkbox{width:1.5rem;height:1.5rem;border-radius:var(--radius-sm);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all 0.2s}.drill-item.completed .drill-checkbox{background:var(--success);border-color:var(--success);color:white}.drill-info{flex:1}.drill-title{font-weight:600;margin-bottom:0.25rem}.drill-meta{display:flex;gap:1rem;font-size:0.85rem;color:var(--text-secondary)}.drill-duration{background:var(--bg-tertiary);padding:0.25rem 0.5rem;border-radius:var(--radius-sm);font-size:0.85rem}.active-programs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}.program-card{background:var(--bg-primary);border-radius:var(--radius-md);padding:1.25rem;border:1px solid var(--border);transition:all 0.2s}.program-card:hover{box-shadow:var(--shadow-sm)}.program-title{font-weight:600;margin-bottom:0.5rem}.program-progress{margin:1rem 0}.progress-bar{height:8px;background:var(--bg-tertiary);border-radius:4px;overflow:hidden;margin-bottom:0.5rem}.progress-fill{height:100%;background:var(--primary);transition:width 0.3s}.progress-text{font-size:0.85rem;color:var(--text-secondary);display:flex;justify-content:space-between}.quick-drills{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.quick-drill-card{background:var(--bg-primary);border-radius:var(--radius-md);padding:1rem;border:1px solid var(--border);cursor:pointer;transition:all 0.2s;text-align:center}.quick-drill-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.quick-drill-icon{font-size:2rem;margin-bottom:0.5rem}.quick-drill-title{font-weight:600;margin-bottom:0.25rem}.quick-drill-duration{font-size:0.85rem;color:var(--text-secondary)}.library-search-row{display:flex;gap:1rem;margin-bottom:1rem;align-items:center}.search-bar{flex:1;padding:0.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-primary);font-size:0.95rem}.library-actions-row{display:flex;gap:0.75rem;margin-bottom:1rem;align-items:center}.library-filters{display:flex;gap:0.75rem;margin-bottom:1.5rem;flex-wrap:wrap;align-items:center}.filter-toggle{padding:0.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-primary);font-size:0.95rem;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:0.5rem;font-weight:500}.filter-toggle:hover{background:var(--bg-hover);border-color:var(--primary)}.filter-toggle.active{background:var(--primary);color:white;border-color:var(--primary)}.filter-toggle.active:hover{background:var(--primary-dark)}.filter-select{padding:0.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-primary);font-size:0.95rem;cursor:pointer}.create-drill-btn{padding:0.75rem 1.5rem;background:var(--primary);color:white;border:none;border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:0.5rem}.create-drill-btn:hover{background:var(--primary-dark)}.drills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}.library-drill-card{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:1.25rem;border:1px solid var(--border);transition:all 0.2s;cursor:pointer;min-height:220px;display:flex;flex-direction:column}.library-drill-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md)}.drill-card-thumbnail{width:100%;height:120px;margin-bottom:1rem;border-radius:var(--radius-md);overflow:hidden;background:var(--bg-tertiary)}.drill-card-thumbnail img{width:100%;height:100%;object-fit:cover;object-position:center}.drill-card-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:0.75rem}.drill-badges{display:flex;gap:0.5rem;align-items:center}.media-source-badge{display:inline-flex;align-items:center;padding:0.25rem 0.5rem;background:var(--bg-tertiary);border-radius:var(--radius-sm);font-size:0.875rem;border:1px solid var(--border)}.drill-card-title{font-weight:600;font-size:1.1rem}.drill-type-badge{padding:0.25rem 0.5rem;border-radius:var(--radius-sm);font-size:0.75rem;font-weight:600;text-transform:uppercase}.drill-type-badge.system{background:var(--info-bg);color:var(--info)}.drill-type-badge.personal{background:var(--success-bg);color:var(--success)}.drill-type-badge.session{background:var(--warning-bg);color:var(--warning)}.drill-card-description{color:var(--text-secondary);font-size:0.9rem;margin-bottom:1rem;line-height:1.4}.drill-card-meta{display:flex;gap:1rem;font-size:0.85rem;color:var(--text-secondary)}.drill-card-actions{display:flex;gap:0.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}.drill-action-btn{flex:1;padding:0.5rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-primary);font-size:0.85rem;cursor:pointer;transition:all 0.2s}.drill-action-btn:hover{background:var(--bg-hover)}.drill-action-btn.primary{background:var(--primary);color:white;border-color:var(--primary)}.drill-action-btn.primary:hover{background:var(--primary-dark)}.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-secondary)}.empty-state-icon{font-size:4rem;margin-bottom:1rem;opacity:0.5}.empty-state-title{font-size:1.25rem;font-weight:600;margin-bottom:0.5rem;color:var(--text-primary)}.empty-state-description{margin-bottom:2rem}.empty-state-actions{display:flex;gap:1.5rem;justify-content:center;align-items:stretch;max-width:600px;margin:0 auto}.empty-state-actions .create-drill-btn{flex:1;min-width:180px;justify-content:center}.create-drill-btn.primary{background:var(--primary);color:white}.create-drill-btn.primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(99,102,241,0.3)}.create-drill-btn.secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border)}.create-drill-btn.secondary:hover{background:var(--bg-hover);border-color:var(--primary)}@media (max-width:480px){.empty-state-actions{flex-direction:column;max-width:100%}.empty-state-actions .create-drill-btn{width:100%;max-width:300px}}.stat-cards{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:1rem;max-width:600px;margin:0 auto}.stat-cards .stat-card{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:1.5rem;border:1px solid var(--border);transition:all 0.2s;text-align:center;display:flex;flex-direction:column;justify-content:center;min-height:120px}.stat-cards .stat-card:hover{border-color:var(--primary);box-shadow:var(--shadow-sm);transform:translateY(-2px)}.stat-cards .stat-value{font-size:2rem;font-weight:700;color:var(--primary);margin-bottom:0.5rem}.stat-cards .stat-label{font-size:0.9rem;color:var(--text-secondary);font-weight:500}@media (max-width:768px){.drills-header{flex-direction:column;align-items:stretch}.view-switcher{justify-content:center}.view-btn{flex:1;padding:0.5rem}.view-btn .icon{display:none}.drills-grid{grid-template-columns:1fr}.active-programs{grid-template-columns:1fr}.stat-cards{grid-template-columns:1fr;grid-template-rows:auto;max-width:100%}.stat-cards .stat-card{min-height:100px;padding:1rem}.stat-cards .stat-value{font-size:1.5rem}}.goal-badge{display:inline-flex;align-items:center;gap:0.25rem;padding:0.25rem 0.5rem;background:linear-gradient(135deg,var(--accent-light,#f39c12),var(--accent,#e67e22));color:white;border-radius:var(--radius-sm);font-size:0.75rem;font-weight:600;cursor:pointer;transition:all 0.2s;border:1px solid transparent}.goal-badge:hover{transform:scale(1.05);box-shadow:0 2px 8px rgba(243,156,18,0.3)}.drill-action-btn.goal-btn{background:var(--accent-light,#f39c12);color:white;border-color:var(--accent,#e67e22);font-weight:600}.drill-action-btn.goal-btn:hover{background:var(--accent,#e67e22);transform:translateY(-1px);box-shadow:0 2px 8px rgba(243,156,18,0.3)}.linked-goals-section{margin-top:1.5rem;padding:1rem;background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border)}.linked-goals-section h4{margin:0 0 1rem 0;font-size:0.95rem;color:var(--text-secondary);display:flex;align-items:center;gap:0.5rem}.linked-goals-section h4::before{content:'🎯'}.linked-goals-list{display:flex;flex-direction:column;gap:0.75rem}.linked-goal-item{padding:0.75rem;background:var(--bg-primary);border-radius:var(--radius-sm);border:1px solid var(--border);cursor:pointer;transition:all 0.2s}.linked-goal-item:hover{border-color:var(--accent);box-shadow:var(--shadow-sm);transform:translateX(4px)}.linked-goal-item.completed{background:linear-gradient(135deg,rgba(76,175,80,0.1),transparent);border-left:3px solid var(--success)}.linked-goal-item.good{background:linear-gradient(135deg,rgba(243,156,18,0.1),transparent);border-left:3px solid var(--accent)}.linked-goal-item .goal-title{font-weight:600;margin-bottom:0.5rem;font-size:0.95rem}.linked-goal-item .goal-progress{display:flex;align-items:center;gap:0.75rem}.goal-progress-bar{flex:1;height:6px;background:var(--bg-tertiary);border-radius:3px;overflow:hidden}.goal-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-light,#f39c12));transition:width 0.3s ease}.linked-goal-item.completed .goal-progress-fill{background:linear-gradient(90deg,var(--success),#4caf50)}.goal-progress-text{font-size:0.85rem;font-weight:600;color:var(--text-secondary);min-width:45px;text-align:right}.linked-goal-item.completed .goal-progress-text{color:var(--success)}.highlight-flash{animation:highlightPulse 2s ease}@keyframes highlightPulse{0%,100%{box-shadow:none;transform:scale(1)}25%,75%{box-shadow:0 0 20px var(--accent);transform:scale(1.02)}50%{box-shadow:0 0 30px var(--accent);transform:scale(1.03)}}.goal-drills-list{display:flex;flex-direction:column;gap:0.75rem}.goal-drill-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;background:var(--bg-primary);border-radius:var(--radius-md);border:1px solid var(--border);cursor:pointer;transition:all 0.2s}.goal-drill-item:hover{border-color:var(--accent);box-shadow:var(--shadow-sm);transform:translateX(4px)}.goal-drill-info{flex:1;display:flex;flex-direction:column;gap:0.5rem}.goal-drill-info .drill-title{font-weight:600;font-size:1rem;display:flex;align-items:center;gap:0.5rem}.goal-count-badge{display:inline-flex;align-items:center;gap:0.25rem;padding:0.125rem 0.5rem;background:linear-gradient(135deg,var(--accent-light,#f39c12),var(--accent,#e67e22));color:white;border-radius:var(--radius-sm);font-size:0.75rem;font-weight:600}.goal-context{display:flex;flex-direction:column;gap:0.25rem}.goal-label{font-size:0.85rem;color:var(--text-secondary);font-weight:500}.goal-progress-inline{display:flex;align-items:center;gap:0.5rem}.goal-progress-bar-inline{flex:1;height:4px;background:var(--bg-tertiary);border-radius:2px;overflow:hidden;max-width:150px}.goal-progress-fill-inline{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-light,#f39c12));transition:width 0.3s ease}.goal-progress-text-inline{font-size:0.8rem;font-weight:600;color:var(--accent);min-width:40px}.drill-meta-compact{display:flex;align-items:center;gap:0.5rem;font-size:0.8rem;color:var(--text-secondary)}.practice-goal-drill-btn{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--accent);color:white;border:none;border-radius:var(--radius-md);font-size:1.2rem;cursor:pointer;transition:all 0.2s}.practice-goal-drill-btn:hover{background:var(--accent-dark,#d35400);transform:scale(1.1);box-shadow:0 2px 8px rgba(243,156,18,0.3)}.info-badge{font-size:0.8rem;opacity:0.6;cursor:help;transition:opacity 0.2s}.info-badge:hover{opacity:1}.view-all-goals-link{transition:all 0.2s}.view-all-goals-link:hover{color:var(--accent);transform:translateX(4px)}@media (max-width:768px){.goal-drill-item{flex-direction:column;align-items:flex-start}.practice-goal-drill-btn{align-self:stretch;width:100%}.goal-progress-bar-inline{max-width:100%}}.add-today-btn{background:var(--primary) !important;color:white !important;border:none !important}.add-today-btn:hover{background:var(--primary-dark) !important;transform:translateY(-2px)}.remove-drill-btn{position:absolute !important;top:50% !important;right:10px !important;transform:translateY(-50%) !important;background:rgba(239,68,68,0.08) !important;color:rgba(239,68,68,0.6) !important;border:1px solid rgba(239,68,68,0.2) !important;border-radius:50% !important;width:24px !important;height:24px !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:14px !important;font-weight:600 !important;cursor:pointer !important;transition:all 0.2s ease !important;z-index:100 !important;padding:0 !important;margin:0 !important;line-height:1 !important;opacity:0.5 !important}.remove-drill-btn:hover{background:rgba(239,68,68,0.2) !important;color:#ef4444 !important;border-color:rgba(239,68,68,0.4) !important;transform:translateY(-50%) scale(1.1) !important;opacity:1 !important}.remove-drill-btn:active{transform:translateY(-50%) scale(0.9) !important}.drill-item:hover .remove-drill-btn{opacity:0.8 !important}.drill-item.completed .remove-drill-btn{display:flex !important;opacity:0.7 !important}.drill-item.completed:hover .remove-drill-btn{opacity:1 !important}.today-action-buttons{display:flex;gap:1rem;margin-top:1.5rem}.add-more-drills-btn{flex:1;padding:0.875rem 1.5rem;background:rgba(99,102,241,0.1);color:var(--primary);border:2px solid rgba(99,102,241,0.3);border-radius:var(--radius-md);font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;gap:0.5rem}.add-more-drills-btn:hover{background:rgba(99,102,241,0.2);border-color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 12px rgba(99,102,241,0.2)}.start-practice-btn{flex:2}@media (max-width:768px){.today-action-buttons{flex-direction:column}.start-practice-btn{flex:1}}.admin-drills-v2{padding:0;max-width:none !important;width:100% !important;margin:0;overflow:visible !important}.drills-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;gap:1rem}.drills-header h2{font-size:1.75rem;font-weight:600;color:var(--text-primary);margin:0}.view-tabs{display:flex;gap:0.5rem;background:var(--bg-secondary);padding:0.25rem;border-radius:var(--radius-lg)}.tab-btn{padding:0.75rem 1.5rem;border:none;background:transparent;color:var(--text-secondary);border-radius:var(--radius-md);cursor:pointer;font-weight:500;transition:all 0.2s}.tab-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.tab-btn.active{background:var(--bg-primary);color:var(--primary);box-shadow:var(--shadow-sm)}.drills-view{background:transparent;border-radius:0;padding:0;width:100% !important;max-width:none !important;overflow:visible !important}.drills-toolbar{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem;width:100%;background:var(--bg-secondary);border-radius:var(--radius-lg);padding:1.5rem}.drills-toolbar .filters{display:flex;flex-direction:column;gap:0.75rem;width:100%}.drills-toolbar .search-container{width:100%;margin-bottom:0.5rem}.drills-toolbar .search-input{padding:0.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-primary);font-size:0.95rem;width:100%;max-width:400px}.drills-toolbar .filter-row{display:flex !important;gap:0.75rem !important;flex-wrap:nowrap !important;align-items:center !important;width:100% !important;flex-direction:row !important}.drills-toolbar .actions{display:flex !important;gap:0.5rem !important;margin-top:0.5rem !important;width:100% !important;justify-content:flex-start !important}.drills-toolbar .filter-row .filter-select,.filter-select{padding:0.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-primary);font-size:0.95rem;cursor:pointer;min-width:140px;flex:1;max-width:200px;display:inline-block !important}.btn{padding:0.75rem 1.25rem;border:none;border-radius:var(--radius-md);font-size:0.95rem;font-weight:500;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:0.5rem}.btn-primary{background:var(--primary);color:white}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary)}.btn-secondary:hover{background:var(--bg-hover)}.drills-table{overflow-x:auto;overflow-y:visible;margin:2rem 0;width:100%;background:var(--bg-secondary);border-radius:var(--radius-lg);padding:1.5rem;-webkit-overflow-scrolling:touch}.drills-table::-webkit-scrollbar{height:12px}.drills-table::-webkit-scrollbar-track{background:var(--bg-tertiary);border-radius:var(--radius-sm)}.drills-table::-webkit-scrollbar-thumb{background:var(--primary);border-radius:var(--radius-sm)}.drills-table::-webkit-scrollbar-thumb:hover{background:var(--primary-dark)}.drills-table table{width:100%;min-width:1200px;border-collapse:separate;border-spacing:0;table-layout:fixed}.drills-table th{text-align:left;padding:1rem;font-weight:600;color:var(--text-secondary);border-bottom:2px solid var(--border);font-size:0.9rem;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap}.drills-table th:nth-child(1),.drills-table td:nth-child(1){width:300px;max-width:300px}.drills-table th:nth-child(2),.drills-table td:nth-child(2){width:120px}.drills-table th:nth-child(3),.drills-table td:nth-child(3){width:130px}.drills-table th:nth-child(4),.drills-table td:nth-child(4){width:120px}.drills-table th:nth-child(5),.drills-table td:nth-child(5){width:80px;text-align:center}.drills-table th:nth-child(6),.drills-table td:nth-child(6){width:90px;text-align:center}.drills-table th:nth-child(7),.drills-table td:nth-child(7){width:200px;max-width:200px}.drills-table th:nth-child(8),.drills-table td:nth-child(8){width:160px;text-align:right;padding-right:1rem}.drills-table td{padding:1rem;border-bottom:1px solid var(--border);color:var(--text-primary);overflow:hidden;text-overflow:ellipsis}.drill-title{font-weight:500}.badge{display:inline-block;padding:0.25rem 0.75rem;border-radius:var(--radius-full);font-size:0.85rem;font-weight:500}.badge-type{background:var(--bg-info);color:var(--text-info)}.badge-category{background:var(--bg-success);color:var(--text-success)}.badge-beginner{background:var(--bg-success);color:var(--text-success)}.badge-intermediate{background:var(--bg-warning);color:var(--text-warning)}.badge-advanced{background:var(--bg-error);color:var(--text-error)}.tags{font-size:0.9rem;color:var(--text-secondary)}.actions{display:flex;gap:0.5rem;justify-content:flex-end;align-items:center;flex-wrap:nowrap;min-width:140px !important}.btn-icon{background:var(--bg-secondary);border:1px solid var(--border);cursor:pointer;font-size:1.1rem;padding:0.4rem 0.5rem;border-radius:var(--radius-sm);transition:all 0.2s;flex-shrink:0;min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center}.btn-icon:hover{background:var(--bg-hover);transform:scale(1.05);border-color:var(--primary)}.empty-state{text-align:center;padding:3rem;color:var(--text-secondary)}.quick-drills-section{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border)}.quick-drills-section h3{font-size:1.25rem;font-weight:600;margin-bottom:1rem;color:var(--text-primary)}.quick-drills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.quick-drill-card{background:var(--bg-primary);border-radius:var(--radius-lg);padding:1.5rem;text-align:center;border:1px solid var(--border);transition:all 0.2s}.quick-drill-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--primary)}.drill-icon{font-size:2.5rem;margin-bottom:0.75rem}.drill-name{font-weight:600;font-size:1.1rem;margin-bottom:0.5rem;color:var(--text-primary)}.drill-duration{color:var(--text-secondary);font-size:0.9rem;margin-bottom:1rem}.drill-actions{display:flex;gap:0.5rem;justify-content:center}.btn-small{padding:0.5rem 1rem;font-size:0.85rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all 0.2s}.btn-small:hover{background:var(--primary);color:white;border-color:var(--primary)}.programs-view{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:1.5rem}.programs-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;gap:1rem}.programs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}.program-card{background:var(--bg-primary);border-radius:var(--radius-lg);padding:1.5rem;border:1px solid var(--border);transition:all 0.2s}.program-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.program-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.program-header h4{font-size:1.1rem;font-weight:600;color:var(--text-primary);margin:0}.duration{background:var(--bg-secondary);padding:0.25rem 0.75rem;border-radius:var(--radius-full);font-size:0.85rem;color:var(--text-secondary)}.description{color:var(--text-secondary);font-size:0.95rem;margin-bottom:1rem;line-height:1.5}.program-meta{display:flex;gap:1rem;margin-bottom:1rem;font-size:0.9rem;color:var(--text-secondary)}.program-actions{display:flex;gap:0.5rem}@media (max-width:768px){.drills-toolbar{flex-direction:column}.filters{width:100%}.search-input{max-width:none}.quick-drills-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.programs-grid{grid-template-columns:1fr}.drills-table{font-size:0.9rem}.drills-table th,.drills-table td{padding:0.75rem 0.5rem}}.drill-editor-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:flex;justify-content:center;align-items:center;z-index:10000;padding:1rem;overflow-y:auto}.drill-editor-modal{background:var(--bg-primary);border-radius:var(--radius-lg);max-width:800px;width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--shadow-xl)}.drill-editor-modal .modal-header{padding:1.5rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.drill-editor-modal .modal-header h2{margin:0;font-size:1.5rem;font-weight:600;color:var(--text-primary)}.drill-editor-modal .modal-close{background:transparent;border:none;font-size:2rem;color:var(--text-secondary);cursor:pointer;padding:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);transition:all 0.2s}.drill-editor-modal .modal-close:hover{background:var(--bg-hover);color:var(--text-primary)}.drill-editor-modal .modal-body{padding:1.25rem;overflow-y:auto;flex:1}.drill-editor-modal .form-section{margin-bottom:1.25rem}.drill-editor-modal .form-section:last-child{margin-bottom:0}.drill-editor-modal .form-section h3{font-size:1.1rem;font-weight:600;margin-bottom:0.75rem;color:var(--text-primary);padding-bottom:0.5rem;border-bottom:1px solid var(--border)}.drill-editor-modal .form-group{margin-bottom:1rem}.drill-editor-modal .form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.drill-editor-modal label{display:block;margin-bottom:0.5rem;font-weight:500;color:var(--text-primary);font-size:0.95rem}.drill-editor-modal label[title]{cursor:help}.drill-editor-modal label[title] span{display:inline-block;margin-left:0.25rem;vertical-align:middle}.drill-editor-modal input[type="text"],.drill-editor-modal input[type="url"],.drill-editor-modal input[type="number"],.drill-editor-modal input[type="file"],.drill-editor-modal select,.drill-editor-modal textarea{width:100%;padding:0.75rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-secondary);color:var(--text-primary);font-size:0.95rem;transition:all 0.2s}.drill-editor-modal input:focus,.drill-editor-modal select:focus,.drill-editor-modal textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-alpha-20)}.drill-editor-modal textarea{resize:vertical;font-family:inherit}.drill-editor-modal input[type="checkbox"]{width:auto;margin-right:0.5rem}.drill-editor-modal .info-text{color:var(--text-secondary);font-size:0.9rem;margin:0}.drill-editor-modal .file-info{color:var(--text-secondary);font-size:0.85rem;margin-top:0.5rem}.drill-editor-modal .form-help{display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--text-secondary);font-style:italic}.drill-editor-modal .modal-footer{padding:1.5rem;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:1rem}.drill-editor-modal .btn{padding:0.75rem 1.5rem;border:none;border-radius:var(--radius-md);font-size:0.95rem;font-weight:500;cursor:pointer;transition:all 0.2s}.drill-editor-modal .btn-primary{background:var(--primary);color:white}.drill-editor-modal .btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}.drill-editor-modal .btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border)}.drill-editor-modal .btn-secondary:hover{background:var(--bg-hover)}@media (max-width:768px){.drill-editor-modal{max-height:100vh;border-radius:0}.drill-editor-modal-overlay{padding:0}.drill-editor-modal .form-row{grid-template-columns:1fr}}.compact-media-source{padding:1rem 0}.compact-media-source h3{font-size:1rem;margin-bottom:0.75rem}.media-type-select{width:100%;padding:0.75rem;font-size:1rem;border:2px solid var(--border);border-radius:var(--radius-md);background:var(--bg-secondary);cursor:pointer;transition:all 0.2s ease}.media-type-select:hover{border-color:var(--primary)}.media-type-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(91,95,222,0.1)}.metronome-image-section{display:flex;align-items:center;gap:1rem;margin:1rem 0}.metronome-image-section .or-text{color:var(--text-secondary);font-weight:500}.metronome-image-section .url-input{flex:1;padding:0.5rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-secondary)}.image-preview{margin-top:1rem;position:relative;display:inline-block}.remove-image-btn{position:absolute;top:0.5rem;right:0.5rem;padding:0.25rem 0.5rem;background:rgba(239,68,68,0.9);color:white;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:0.875rem}.remove-image-btn:hover{background:rgba(220,38,38,1)}.admin-section{background:var(--accent-bg);border:2px solid var(--primary);border-radius:var(--radius-lg);padding:1rem;margin-bottom:1.5rem}.admin-section h3{color:var(--primary);margin-bottom:0.75rem}.checkbox-label{display:flex;align-items:center;cursor:pointer;font-weight:500}.checkbox-label input[type="checkbox"]{margin-right:0.5rem;width:18px;height:18px;cursor:pointer}.media-type-selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0.75rem;margin-top:0.5rem}.radio-option{display:flex;align-items:center;padding:0.75rem;background:var(--bg-secondary);border:2px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all 0.2s ease}.radio-option:hover{border-color:var(--primary);background:var(--accent-bg)}.radio-option input[type="radio"]{margin-right:0.5rem}.radio-option input[type="radio"]:checked+span{font-weight:600;color:var(--primary)}.media-options{margin-top:1rem;padding:1rem;background:var(--bg-secondary);border-radius:var(--radius-md)}.file-input{width:100%;padding:0.5rem;border:2px dashed var(--border);border-radius:var(--radius-md);background:var(--bg-primary);cursor:pointer;transition:border-color 0.2s ease}.file-input:hover{border-color:var(--primary)}.file-info{display:flex;align-items:center;gap:0.5rem;margin-top:0.5rem;padding:0.5rem;background:var(--accent-bg);border-radius:var(--radius-sm);font-size:0.9rem}.file-size{color:var(--text-secondary);font-size:0.85rem}.upload-progress{margin-top:1rem}.upload-progress.hidden{display:none}.progress-bar{height:24px;background:var(--bg-secondary);border-radius:12px;overflow:hidden;position:relative}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-light));border-radius:12px;transition:width 0.3s ease}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:600;color:var(--text-primary);font-size:0.85rem}.help-text{margin-top:0.5rem;font-size:0.85rem;color:var(--text-secondary);font-style:italic}.form-section{margin-bottom:1.5rem}.form-section h3{margin-bottom:1rem;color:var(--text-primary);font-size:1.1rem;font-weight:600}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:0.25rem;font-weight:500;color:var(--text-secondary);font-size:0.9rem}.form-group input,.form-group select,.form-group textarea{width:100%;padding:0.5rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-primary);font-size:1rem;transition:border-color 0.2s ease}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary)}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.focus-point-item{display:flex;gap:0.5rem;margin-bottom:0.5rem}.focus-point-item input{flex:1}.focus-point-item .remove-btn{padding:0.5rem;background:var(--danger);color:white;border:none;border-radius:var(--radius-sm);cursor:pointer;font-weight:bold;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.focus-point-item .remove-btn:hover{background:var(--danger-dark)}.add-btn{padding:0.5rem 1rem;background:var(--primary);color:white;border:none;border-radius:var(--radius-md);cursor:pointer;font-weight:500;transition:background 0.2s ease}.add-btn:hover{background:var(--primary-dark)}[data-theme="dark"] .admin-section{background:rgba(91,95,222,0.1);border-color:var(--primary)}[data-theme="dark"] .radio-option{background:var(--bg-dark)}[data-theme="dark"] .media-options{background:var(--bg-dark)}[data-theme="dark"] .file-input{background:var(--bg-dark)}[data-theme="dark"] .progress-bar{background:var(--bg-dark)}.schedule-view-controls{display:flex !important;justify-content:center;width:100%;margin-bottom:1.5rem}.today-practice .schedule-view-controls{display:flex !important;visibility:visible !important}.view-toggle-group{display:flex;background:var(--bg-secondary);border-radius:12px;padding:4px;gap:4px}.view-toggle{padding:0.75rem 1.5rem;background:transparent;border:none;border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all 0.2s;font-size:0.95rem;font-weight:500}.view-toggle:hover{background:var(--bg-tertiary);color:var(--text-primary)}.view-toggle.active{background:var(--accent);color:white}.week-schedule{background:transparent;border-radius:12px;padding:1rem 0;width:100vw;max-width:100vw;margin-left:calc(-50vw+50%);margin-right:calc(-50vw+50%);display:flex;flex-direction:column;align-items:center}.week-header{margin-bottom:1.5rem;text-align:center;width:100%}.week-header h2{margin:0;font-size:1.5rem;color:var(--text-primary)}.week-grid{display:grid;grid-template-columns:repeat(7,minmax(140px,1fr));gap:0.5rem;width:95%;max-width:1400px;margin:0 auto}@media (max-width:1400px){.calendar-container,.week-grid{width:98%}.calendar-weekdays,.calendar-days-grid,.week-grid{grid-template-columns:repeat(7,minmax(120px,1fr))}}@media (max-width:1200px){.calendar-weekdays,.calendar-days-grid,.week-grid{grid-template-columns:repeat(7,minmax(100px,1fr))}}@media (max-width:768px){.calendar-weekdays,.calendar-days-grid,.week-grid{grid-template-columns:repeat(7,minmax(80px,1fr));gap:0.25rem}.calendar-day,.week-day{min-height:100px;padding:0.5rem}}@media (max-width:480px){.calendar-weekdays,.calendar-days-grid,.week-grid{grid-template-columns:repeat(7,minmax(60px,1fr));gap:0.15rem}.calendar-day,.week-day{min-height:80px;padding:0.35rem}}.week-day{background:var(--bg-secondary);border-radius:8px;padding:1rem;border:2px solid var(--border);transition:all 0.2s;cursor:pointer;min-height:120px;display:flex;flex-direction:column}.week-day:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}.week-day.today{border-color:var(--accent);background:linear-gradient(135deg,var(--bg-secondary),var(--accent-light));position:relative}.week-day.today::before{content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:var(--accent);border-radius:8px;opacity:0.2;z-index:-1}.week-day.has-drills{border-color:var(--accent-light)}.day-header{display:flex;justify-content:space-between;margin-bottom:0.75rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border)}.day-name{font-weight:600;color:var(--text-primary);font-size:0.95rem}.day-num{color:var(--text-secondary);font-size:1.1rem;font-weight:500}.week-day.today .day-num{color:var(--accent);font-weight:bold}.day-content{flex:1;display:flex;flex-direction:column;gap:0.5rem}.drill-count-badge{display:none}.day-drills{margin-top:0.5rem;display:flex;flex-direction:column;gap:0.35rem}.mini-drill{font-size:0.75rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0.2rem 0.35rem;background:var(--bg-primary);border-radius:3px;border-left:2px solid var(--accent);display:flex;justify-content:space-between;align-items:center;gap:0.2rem;cursor:pointer;transition:all 0.2s ease}.mini-drill:hover{background:var(--bg-secondary);border-left-color:var(--primary);transform:translateX(2px)}.mini-drill-edit-btn{background:transparent;border:none;font-size:0.85rem;padding:0.15rem 0.3rem;cursor:pointer;opacity:0;transition:opacity 0.2s;flex-shrink:0}.mini-drill:hover .mini-drill-edit-btn{opacity:1}.mini-drill-edit-btn:hover{background:var(--bg-tertiary);border-radius:3px}.mini-drill .drill-name{flex:1;overflow:hidden;text-overflow:ellipsis;font-size:0.72rem}.mini-drill .drill-tempo{font-size:0.7rem;color:var(--accent);font-weight:500;flex-shrink:0;background:var(--bg-secondary);padding:0.05rem 0.25rem;border-radius:3px}.mini-drill.completed{opacity:0.6;text-decoration:line-through}.more-drills{font-size:0.85rem;color:var(--accent);font-weight:500}.empty-day{color:var(--text-tertiary);font-size:0.85rem;text-align:center;padding:0.5rem 0;opacity:0.6}.day-actions{margin-top:0.75rem;display:flex;justify-content:flex-end}.add-drill-btn{width:28px;height:28px;border-radius:50%;background:var(--accent);color:white;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:all 0.2s}.add-drill-btn:hover{background:var(--accent-dark);transform:scale(1.1)}.calendar-schedule{background:transparent;border-radius:12px;padding:1rem 0;width:100vw;max-width:100vw;margin-left:calc(-50vw+50%);margin-right:calc(-50vw+50%);display:flex;flex-direction:column;align-items:center}.calendar-header{display:flex;justify-content:center;align-items:center;margin-bottom:1.5rem;gap:2rem;width:100%}.calendar-header h2{margin:0;font-size:1.5rem;color:var(--text-primary);min-width:200px;text-align:center}.calendar-nav{width:36px;height:36px;border-radius:50%;background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:all 0.2s}.calendar-nav:hover{background:var(--bg-tertiary);border-color:var(--accent)}.calendar-container{width:95%;max-width:1400px;background:transparent;border-radius:8px;overflow:visible;margin:0 auto}.calendar-weekdays{display:grid;grid-template-columns:repeat(7,minmax(140px,1fr));gap:0.5rem;margin-bottom:0.75rem;width:100%}.weekday-header{padding:0.75rem 0.5rem;text-align:center;font-weight:600;font-size:0.95rem;color:var(--text-primary);background:var(--bg-secondary);border-radius:6px;display:flex;align-items:center;justify-content:center}.calendar-days-grid{display:grid;grid-template-columns:repeat(7,minmax(140px,1fr));gap:0.5rem;width:100%;grid-auto-rows:minmax(120px,auto)}.calendar-day{min-height:120px;background:var(--bg-secondary);border-radius:8px;padding:0.75rem;border:2px solid var(--border);cursor:pointer;transition:all 0.2s;position:relative;display:flex;flex-direction:column;width:100%}.calendar-day:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}.calendar-day.other-month{opacity:0.4;background:var(--bg-primary)}.calendar-day.today{border-color:var(--accent);background:linear-gradient(135deg,var(--bg-secondary),var(--accent-light))}.calendar-day.today .day-number{color:var(--accent);font-weight:bold}.calendar-day.has-drills{border-color:var(--accent-light)}.day-number{font-size:1.1rem;color:var(--text-primary);font-weight:600}.calendar-day-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:0.5rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border)}.calendar-day-content{flex:1;display:flex;flex-direction:column;gap:0.35rem;overflow-y:auto;max-height:100px}.drill-indicators{display:flex;flex-wrap:wrap;gap:0.25rem;margin-top:auto}.drill-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}.drill-count{background:var(--accent);color:white;font-size:0.75rem;padding:0.15rem 0.4rem;border-radius:10px;font-weight:600}.calendar-drill-count{background:var(--accent);color:white;font-size:0.7rem;padding:0.15rem 0.4rem;border-radius:8px;font-weight:600}.calendar-legend{margin-top:1rem;display:flex;gap:2rem;justify-content:center;font-size:0.9rem;color:var(--text-secondary);width:100%;max-width:1400px}.calendar-legend span{display:flex;align-items:center;gap:0.5rem}.legend-dot{width:12px;height:12px;border-radius:50%;background:var(--bg-secondary)}.legend-dot.today{background:var(--accent-light)}.legend-dot.has-drills{background:var(--accent)}.day-details-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;display:flex;align-items:center;justify-content:center}.day-details-modal .modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7)}.day-details-modal .modal-content{position:relative;background:var(--bg-primary);border-radius:12px;width:90%;max-width:500px;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.3)}.day-details-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid var(--border)}.day-details-modal .modal-header h3{margin:0;font-size:1.2rem;color:var(--text-primary)}.day-details-modal .close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-secondary);padding:0.5rem}.day-details-modal .modal-body{padding:1.5rem}.day-drill-list{display:flex;flex-direction:column;gap:1rem}.scheduled-drill-item{background:var(--bg-secondary);border-radius:8px;padding:1rem;display:flex;justify-content:space-between;align-items:center}.scheduled-drill-item .drill-info h4{margin:0 0 0.5rem 0;font-size:1rem;color:var(--text-primary)}.scheduled-drill-item .drill-meta{display:flex;gap:1rem;font-size:0.9rem;color:var(--text-secondary)}.progression-info{color:var(--accent);font-weight:500}.drill-actions{display:flex;gap:0.5rem}.action-btn{width:32px;height:32px;border-radius:50%;background:var(--bg-tertiary);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;font-size:0.9rem}.action-btn:hover{background:var(--bg-primary);border-color:var(--accent);transform:scale(1.1)}.modal-footer{padding:1rem 1.5rem 1.5rem;text-align:center}.add-more-btn{padding:0.75rem 1.5rem;background:var(--accent);color:white;border:none;border-radius:8px;cursor:pointer;font-size:1rem;transition:all 0.2s}.add-more-btn:hover{background:var(--accent-dark);transform:translateY(-2px)}.session-item{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem;background:var(--bg-input);border-radius:var(--radius-md);margin-bottom:0.5rem;transition:var(--transition-all-base);position:relative}.session-item:hover{background:var(--bg-hover);transform:translateX(2px)}.session-info{flex:1;min-width:0}.session-title{font-weight:500;color:var(--text-primary);margin-bottom:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.session-meta{display:flex;gap:1rem;font-size:0.813rem;color:var(--text-secondary)}.session-date{display:flex;align-items:center}.session-duration{color:var(--primary);font-weight:500}.session-item .delete-session-btn{opacity:0;transition:opacity 0.2s ease;background:transparent;border:none;color:var(--text-secondary);font-size:1rem;cursor:pointer;padding:0.5rem;border-radius:var(--radius-md);transition:var(--transition-all-base)}.session-item:hover .delete-session-btn{opacity:1}.delete-session-btn:hover{color:var(--danger);background:rgba(239,68,68,0.1)}.delete-session-btn:disabled{cursor:not-allowed;opacity:0.5}.recent-sessions-widget.compact .session-item{padding:0.625rem 0.75rem;margin-bottom:0.375rem}.recent-sessions-widget.compact .session-title{font-size:0.875rem}.recent-sessions-widget.compact .session-meta{font-size:0.75rem}.empty-state{text-align:center;padding:2rem 1rem;color:var(--text-secondary)}.empty-state p{margin:0}.empty-state-hint{font-size:0.813rem;margin-top:0.5rem;opacity:0.7}.widget-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.widget-action{background:none;border:none;color:var(--primary);font-size:0.813rem;font-weight:500;cursor:pointer;padding:0.25rem 0.5rem;border-radius:var(--radius-sm);transition:var(--transition-all-base)}.widget-action:hover{background:rgba(99,102,241,0.1);color:var(--primary-dark)}@media (max-width:480px){.session-item{padding:0.625rem 0.75rem}.session-title{font-size:0.875rem}.session-meta{font-size:0.75rem;gap:0.75rem}}.calendar-stats-container{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border)}.calendar-stats-container .stats-panel{max-width:1200px;margin:0 auto}@media (max-width:768px){.calendar-stats-container{margin-top:1.5rem;padding-top:1.5rem}}.history-header{margin-bottom:var(--space-lg)}.history-header h2{margin:0;margin-bottom:var(--space-md)}.history-controls{margin-bottom:var(--space-lg)}.history-filters{display:flex;gap:var(--space-md);align-items:center;flex-wrap:wrap}.history-filters .filter-select{padding:0.5rem 1rem;height:38px;min-width:120px}.history-filters .search-input{padding:0.5rem 1rem;height:38px}@media (max-width:768px){.history-filters{flex-direction:column;width:100%}.history-filters>*{width:100%}}.history-item{cursor:pointer;transition:var(--transition-all-base);display:flex;align-items:center;padding:0.5rem 1.5rem !important;margin-bottom:0.375rem !important}.history-item:hover{background:var(--bg-hover);transform:translateX(4px);transform:translateY(-1px) !important}.history-item button{cursor:pointer}.history-item.has-image{display:flex;gap:var(--space-md);align-items:center;position:relative}.history-item.has-image::before{content:'🎸 Click to load in metronome';position:absolute;top:-20px;left:50%;transform:translateX(-50%);background:var(--bg-primary);color:var(--text-muted);padding:var(--space-xs) 12px;border-radius:var(--radius-xl);font-size:var(--text-xs);opacity:0;transition:opacity 0.3s ease;pointer-events:none;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,0.1)}.history-item.has-image:hover::before{opacity:1}.history-item-thumbnail{flex-shrink:0;width:80px;height:80px;border-radius:var(--radius-md);overflow:hidden;background:white;box-shadow:0 2px 8px rgba(0,0,0,0.1);cursor:zoom-in;transition:transform 0.2s ease;position:relative}.history-item-thumbnail:hover{transform:scale(1.05);overflow:visible;z-index:100}.history-item-thumbnail:hover::after{content:'';position:absolute;top:0;left:0;width:250px;height:250px;background-image:inherit;background-size:cover;background-position:center;border-radius:var(--radius-lg);box-shadow:0 10px 40px rgba(0,0,0,0.3);pointer-events:none;transform:translate(-85px,-85px);z-index:1000}.history-thumbnail{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.3s ease}.history-item-thumbnail:hover .history-thumbnail{position:fixed;width:min(400px,80vw);height:min(400px,80vh);left:50%;top:50%;transform:translate(-50%,-50%);z-index:1001;border-radius:var(--radius-lg);box-shadow:0 20px 60px rgba(0,0,0,0.5);object-fit:contain;background:var(--bg-primary);padding:8px}.history-item-thumbnail.loading{background:var(--bg-secondary);position:relative}.history-item-thumbnail.loading::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--size-icon-md);height:var(--size-icon-md);border:2px solid var(--border-color);border-top-color:var(--color-primary);border-radius:var(--radius-full);animation:spin 1s linear infinite}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.history-item.has-image .history-item-content{flex:1;min-width:0}.history-item-content{display:flex;flex-direction:column;justify-content:center;width:100%}.history-item-header{margin-bottom:0.25rem !important}.history-item-header h4{font-size:1rem !important;font-weight:500 !important;line-height:1.2 !important;color:var(--text-primary);margin:0 0 8px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-item-header h4:not(:contains('Practice Session')){color:var(--color-primary)}.history-item:has(h4:not(:contains('Practice Session'))){border-left:3px solid var(--color-primary);padding-left:12px}.history-item-details{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem !important;font-size:0.8125rem !important;margin-top:0.25rem}.history-item-details span{display:inline-flex;align-items:center;gap:var(--space-xs)}.history-item-details .icon{font-size:0.875rem !important;vertical-align:middle;line-height:1}.history-date{font-size:0.75rem !important}.history-notes{margin-top:0.25rem !important;font-size:0.75rem !important;line-height:1.3 !important}.history-audio{display:inline-flex;align-items:center;line-height:1.5;gap:0.25rem}.history-audio>*{vertical-align:middle}.history-audio .youtube-practice-link,.history-audio .audio-practice-link{display:inline-flex;align-items:center;vertical-align:middle;line-height:inherit}.history-item-actions{display:flex;align-items:center;gap:0.5rem !important}.history-item-actions .btn-icon{padding:0.375rem !important;font-size:0.875rem !important;min-width:var(--size-icon-xl) !important;min-height:var(--size-icon-xl) !important}.practice-again-btn{background:rgba(99,102,241,0.1);color:var(--color-primary);border:1px solid var(--color-primary);padding:6px var(--space-12px);border-radius:var(--radius-sm);font-size:var(--text-sm);cursor:pointer;transition:var(--transition-all-base);margin-right:8px}.practice-again-btn:hover{background:rgba(99,102,241,0.2);transform:translateY(-1px)}.practice-again-btn:active{transform:scale(0.95)}.history-sheet-music{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) 8px;background:rgba(99,102,241,0.1);border-radius:var(--radius-4px);font-size:var(--text-xs);color:var(--color-primary)}.history-item:has(.history-sheet-music){border-left:3px solid var(--color-primary);padding-left:12px}.history-month-header{font-size:1.125rem !important;margin-bottom:0.75rem !important;margin-top:1.25rem !important}.history-month-group:first-child .history-month-header{margin-top:0 !important}#sessionName{font-size:var(--text-lg);font-weight:600;padding:var(--space-md) 20px;border:3px solid rgba(99,102,241,0.3) !important;border-radius:var(--radius-lg);background:rgba(255,255,255,0.9) !important;color:#1f2937 !important;transition:var(--transition-all-slow);box-shadow:inset 0 2px 4px rgba(0,0,0,0.1),0 4px 12px rgba(0,0,0,0.05);position:relative}#sessionName:hover{border-color:rgba(99,102,241,0.4);transform:translateY(-1px);box-shadow:inset 0 2px 4px rgba(0,0,0,0.1),0 6px 16px rgba(0,0,0,0.08)}#sessionName:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 4px rgba(99,102,241,0.2),inset 0 2px 4px rgba(0,0,0,0.1),0 8px 20px rgba(99,102,241,0.15);transform:translateY(-2px)}#sessionName::placeholder{color:var(--text-muted);opacity:0.6;font-weight:400;font-style:italic}#sessionName::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient( 90deg,var(--color-primary) 0%,#a855f7 50%,var(--color-primary) 100% );transform:scaleX(0);transition:transform 0.3s ease}#sessionName:focus::after{transform:scaleX(1)}.history-list{max-height:calc(100vh - 200px) !important;overflow-y:auto !important}.tab-content{height:calc(100vh - 150px) !important;overflow:hidden !important;display:flex !important;flex-direction:column !important}#historyList{flex:1 !important;overflow-y:auto !important}.compact-history .history-item{padding:0.5rem 0.75rem !important;margin-bottom:0.25rem !important}.compact-history .history-item-header{margin-bottom:0 !important}.compact-history .history-item-details{display:inline-flex !important;margin-left:0.5rem !important;margin-top:0 !important}.compact-history .history-notes{display:none !important}@media (max-width:768px){.history-item{padding:0.625rem 0.75rem !important;margin-bottom:0.375rem !important}.history-item.has-image{gap:var(--space-12px)}.history-item-thumbnail{width:60px;height:60px;border-radius:var(--radius-sm)}.history-item-header h4{font-size:0.9375rem !important}.history-item-details{font-size:0.75rem !important;gap:0.5rem !important}.history-item-actions .btn-icon{padding:0.25rem !important;font-size:0.8125rem !important;min-width:28px !important;min-height:28px !important}.practice-again-btn{padding:var(--space-sm);font-size:var(--text-base);min-width:36px;min-height:36px;display:flex;align-items:center;justify-content:center}.history-item-actions{display:flex;align-items:center;gap:var(--space-sm)}.history-date{font-size:var(--text-xs);margin-right:auto}}[data-theme='dark'] .history-item-thumbnail{background:var(--bg-secondary);box-shadow:0 2px 8px rgba(0,0,0,0.3)}.session-image-preview{margin:var(--space-20px) 0;padding:var(--space-md);background:rgba(99,102,241,0.05);border:2px solid rgba(99,102,241,0.2);border-radius:var(--radius-lg)}.image-preview-label{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-sm);font-weight:500;color:var(--color-primary);margin-bottom:12px}.image-preview-label .icon{font-size:var(--text-lg)}.image-thumbnail-container{width:100%;max-width:300px;margin:0 auto;border-radius:var(--radius-md);overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.1);background:white}.session-image-thumbnail{width:100%;height:auto;max-height:200px;object-fit:contain;display:block;cursor:zoom-in;transition:transform 0.2s ease}.session-image-thumbnail:hover{transform:scale(1.02)}.save-session-popup .session-image-preview{animation:slideIn 0.3s ease}@keyframes slideIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}[data-theme='dark'] .session-image-preview{background:rgba(99,102,241,0.1);border-color:rgba(99,102,241,0.3)}[data-theme='dark'] .image-thumbnail-container{background:var(--bg-secondary)}@media (max-width:768px){.session-image-preview{margin:var(--space-md) 0;padding:var(--space-12px)}.image-preview-label{font-size:var(--text-13px)}.image-thumbnail-container{max-width:100%}.session-image-thumbnail{max-height:150px}}.session-saved-notification{position:fixed;top:20px;right:20px;background:#10b981;color:white;padding:var(--space-12px) 20px;border-radius:var(--radius-md);display:flex;align-items:center;gap:var(--space-sm);box-shadow:0 4px 12px rgba(0,0,0,0.15);animation:slideInRight 0.3s ease,slideOutRight 0.3s ease 2.7s;z-index:10000}.session-saved-notification .icon{font-size:var(--text-xl)}@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes slideOutRight{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}.waveform-container,.youtube-waveform,.audio-controls-enhanced .waveform-container{height:60px !important;max-height:60px !important;min-height:60px !important;padding:0 !important;overflow:hidden !important}.waveform,#youtubeWaveformCanvas,.waveform-container canvas{height:60px !important;max-height:60px !important}.waveform-container{background:rgba(0,0,0,0.3);border-radius:var(--radius-lg);transition:height 0.3s ease}@media (max-width:768px){.waveform-container,.youtube-waveform,.audio-controls-enhanced .waveform-container{height:50px !important;max-height:50px !important;min-height:50px !important}.waveform,#youtubeWaveformCanvas,.waveform-container canvas{height:50px !important;max-height:50px !important}}.repertoire-page .repertoire-controls .search-bar input#repertoireSearch,.repertoire-page .repertoire-controls .search-bar input.form-control,.repertoire-page .repertoire-controls .search-bar input[type="text"],.repertoire-page .repertoire-controls .search-bar input{height:40px;min-height:40px;max-height:40px;padding:8px 12px;margin:0;border:none;border-width:0;border-style:none;border-color:transparent;outline:none;outline-width:0;box-shadow:none;font-size:14px;line-height:24px;box-sizing:border-box;background:var(--bg-input);background-color:var(--bg-input);border-radius:8px;color:var(--text-primary);-webkit-appearance:none;-moz-appearance:none;appearance:none}.repertoire-page .repertoire-controls .repertoire-filters select#difficultyFilter,.repertoire-page .repertoire-controls .repertoire-filters select#statusFilter,.repertoire-page .repertoire-controls .repertoire-filters select.form-control,.repertoire-page .repertoire-controls .repertoire-filters select{height:40px;min-height:40px;max-height:40px;padding:8px 12px;padding-right:35px;margin:0;border:none;border-width:0;border-style:none;border-color:transparent;outline:none;outline-width:0;box-shadow:none;font-size:14px;line-height:24px;box-sizing:border-box;background:var(--bg-input);background-color:var(--bg-input);border-radius:8px;color:var(--text-primary);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23999' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:14px 10px}.repertoire-page .repertoire-controls input::placeholder,.repertoire-controls .search-bar input::placeholder{color:var(--text-secondary);opacity:0.85}[data-theme*="dark"] .repertoire-controls input::placeholder,[data-theme*="night"] .repertoire-controls input::placeholder,[data-theme*="midnight"] .repertoire-controls input::placeholder,[data-theme*="ocean"] .repertoire-controls input::placeholder{color:rgba(200,200,200,0.7);opacity:1}.repertoire-page .repertoire-controls input:focus,.repertoire-page .repertoire-controls select:focus{border:none;outline:none;box-shadow:0 0 0 2px rgba(91,95,222,0.2)}.repertoire-page .repertoire-controls input:hover:not(:focus),.repertoire-page .repertoire-controls select:hover:not(:focus){background:var(--bg-hover)}#repertoire-tab .repertoire-page .repertoire-controls .search-bar input,#repertoire-tab .repertoire-page .repertoire-controls .repertoire-filters select{border:0;border-style:none}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);padding:var(--space-xl)}.auth-container{width:100%;max-width:450px}.auth-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-2xl);box-shadow:var(--shadow-2xl)}.auth-header{text-align:center;margin-bottom:var(--space-2xl)}.auth-header h1{font-size:var(--text-3xl);margin-bottom:var(--space-sm);background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.auth-header .subtitle{font-size:var(--text-lg);color:var(--text-secondary)}.auth-tabs{display:flex;margin-bottom:var(--space-xl);background:var(--bg-input);border-radius:var(--radius-lg);padding:var(--space-xs)}.auth-tab{flex:1;padding:var(--space-sm) var(--space-lg);text-align:center;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-base);font-weight:500;color:var(--text-secondary)}.auth-tab:hover{color:var(--text-primary)}.auth-tab.active{background:var(--bg-card);color:var(--primary);box-shadow:var(--shadow-sm)}.auth-form{display:none}.auth-form.active{display:block}.auth-form .form-group{margin-bottom:var(--space-lg)}.auth-form .btn-full{margin-top:var(--space-xl)}.demo-info{margin-top:var(--space-2xl);padding:var(--space-lg);background:var(--bg-input);border-radius:var(--radius-lg);border:1px solid var(--border)}.demo-info p{margin-bottom:var(--space-sm);font-size:var(--text-sm);color:var(--text-secondary)}.demo-credentials{background:var(--bg-card);padding:var(--space-md);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--text-sm);color:var(--primary);cursor:pointer;transition:var(--transition-base);margin-bottom:var(--space-md)}.demo-credentials:hover{background:var(--primary);color:white}.device-note{margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--border)}.device-note ul{margin-top:var(--space-sm);padding-left:var(--space-lg);list-style:disc}.device-note li{margin-bottom:var(--space-xs);font-size:var(--text-sm);color:var(--text-secondary)}.social-login{margin-top:var(--space-xl)}.social-divider{display:flex;align-items:center;margin:var(--space-xl) 0}.social-divider::before,.social-divider::after{content:'';flex:1;height:1px;background:var(--border)}.social-divider span{padding:0 var(--space-md);font-size:var(--text-sm);color:var(--text-secondary)}.social-buttons{display:flex;gap:var(--space-md)}.social-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-base);font-weight:500}.social-btn:hover{background:var(--bg-card);border-color:var(--primary)}.social-icon{width:var(--size-icon-md);height:var(--size-icon-md)}.auth-footer{margin-top:var(--space-xl);text-align:center;font-size:var(--text-sm);color:var(--text-secondary)}.auth-footer a{color:var(--primary);text-decoration:underline}@media (max-width:768px){.auth-page{padding:var(--space-md)}.auth-card{padding:var(--space-xl)}.auth-header h1{font-size:var(--text-2xl)}}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-dark);padding:var(--space-20px)}.auth-container{width:100%;max-width:450px}.auth-card{background:var(--bg-card);border-radius:var(--radius-xl);padding:40px;box-shadow:var(--shadow-2xl);border:1px solid var(--border)}.auth-card h1{text-align:center;color:var(--primary);margin-bottom:10px;font-size:2rem}.auth-subtitle{text-align:center;color:var(--text-secondary);margin-bottom:30px}.auth-tabs{display:flex;margin-bottom:30px;border-bottom:1px solid var(--border)}.auth-tab{flex:1;padding:var(--space-12px);background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:1rem;transition:var(--transition-all-base);border-bottom:2px solid transparent}.auth-tab.active{color:var(--primary);border-bottom-color:var(--primary)}.auth-form{display:flex;flex-direction:column;gap:var(--space-20px)}.btn-block{width:100%}.auth-link{text-align:center;color:var(--primary);text-decoration:none;font-size:0.875rem}.auth-link:hover{text-decoration:underline}.demo-section{margin-top:30px}.divider{text-align:center;color:var(--text-secondary);margin:var(--space-20px) 0;position:relative}.divider::before,.divider::after{content:'';position:absolute;top:50%;width:40%;height:1px;background:var(--border)}.divider::before{left:0}.divider::after{right:0}.auth-status{margin-top:20px;padding:var(--space-12px);border-radius:var(--radius-md);text-align:center;display:none}.auth-status.info{background:var(--info-bg);color:var(--info);border:1px solid var(--info)}.auth-status.success{background:var(--success-bg);color:var(--success);border:1px solid var(--success)}.auth-status.error{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger)}.sync-info{margin-top:30px;padding:var(--space-20px);background:var(--bg-input);border-radius:var(--radius-lg);font-size:0.875rem}.sync-info h4{margin-bottom:10px;color:var(--primary)}.sync-info ul{margin:0;padding-left:20px;color:var(--text-secondary)}.sync-info li{margin-bottom:5px}.cloud-status{padding:15px;background:var(--bg-input);border-radius:var(--radius-lg);margin-bottom:20px}.sync-indicator{display:flex;align-items:center;gap:var(--space-10px)}.sync-icon{font-size:1.5rem;animation:rotate 2s linear infinite}.sync-icon.paused{animation-play-state:paused}@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.cloud-status.online{border:1px solid var(--success)}.cloud-status.offline{border:1px solid var(--danger)}.sync-success{color:var(--success)}.sync-error{color:var(--danger)}.sync-progress{color:var(--warning)}*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%}html{overflow-x:hidden;overflow-y:scroll}body{overflow-x:hidden}#app{min-height:100vh;position:relative;background:var(--bg-primary)}#app{display:flex;flex-direction:column;min-height:100vh;background:var(--bg-primary)}.top-navigation{background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0;padding:0.25rem 0}.nav-container{display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.5rem;max-width:1000px;margin:0 auto}.top-nav-item{display:flex;flex-direction:column;align-items:center;gap:0.125rem;padding:0.5rem 1rem;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:var(--transition-all-base);position:relative}.top-nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}.top-nav-item.active{color:var(--primary);background:rgba(99,102,241,0.1)}.top-nav-item.active::after{content:'';position:absolute;bottom:-0.5rem;left:50%;transform:translateX(-50%);width:var(--size-icon-2xl);height:3px;background:var(--primary);border-radius:3px}.nav-icon{font-size:1.125rem}.nav-label{font-size:0.7rem;font-weight:500}.main-content{flex:1;padding-top:140px;background:var(--bg-primary);overflow-x:hidden;width:100%}.tab-pane{display:none;max-width:800px;margin:1rem auto 2rem;padding:0 1rem;width:100%;box-sizing:border-box;animation:fadeIn 0.3s ease}.tab-pane.active{display:block}.tab-pane.wide,.tab-pane.full{max-width:800px}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.practice-bottom-widgets{display:flex;flex-direction:column;gap:1.5rem;width:100%}.practice-page-layout{display:grid;grid-template-columns:1fr 280px;gap:0.75rem;height:100%;padding:0.5rem}.practice-sidebar{display:flex;flex-direction:column;gap:0.5rem}.welcome-section{text-align:center;padding:3rem;background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border)}.welcome-section h2{font-size:2rem;margin-bottom:0.5rem;color:var(--text-primary)}.welcome-section p{color:var(--text-secondary);margin-bottom:2rem}.dashboard-widget{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border);padding:1.5rem;transition:var(--transition-all-slow);overflow:hidden}.dashboard-widget.compact{padding:1.25rem;display:flex;flex-direction:column;min-height:150px}.dashboard-widget.compact .widget-title{margin-bottom:0;flex-shrink:0}.dashboard-widget.compact #quickStats{flex:1;display:flex;align-items:center;justify-content:center}.widget-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.widget-title{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin:0}.widget-action{padding:0.375rem 0.75rem;background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:0.813rem;font-weight:500;cursor:pointer;transition:var(--transition-all-base)}.widget-action:hover{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--primary)}.recent-sessions-widget{max-height:300px;overflow-y:auto}.recent-sessions-widget.compact{max-height:200px}.recent-session-item{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;background:var(--bg-secondary);border-radius:var(--radius-sm);transition:var(--transition-all-base);font-size:0.875rem;margin-bottom:0.5rem}.recent-session-item:hover{background:var(--bg-hover)}.session-icon{font-size:1.25rem}.session-details{flex:1}.session-title{font-weight:500;color:var(--text-primary);font-size:0.875rem}.session-meta{font-size:0.75rem;color:var(--text-secondary)}.session-item{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-sm)}.session-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}.session-date{color:var(--text-secondary);font-size:0.875rem}.session-duration{color:var(--primary);font-weight:600}.session-notes{margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid var(--border);font-size:0.875rem;color:var(--text-secondary);font-style:italic}#quickStats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}.quick-stat{text-align:center;padding:var(--space-md);background:var(--bg-input);border-radius:var(--radius-md)}.stat-value{font-size:var(--text-2xl);font-weight:700;color:var(--primary);margin-bottom:var(--space-xs)}.stat-label{font-size:var(--text-sm);color:var(--text-secondary)}.stats-grid,.stats-panel{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;max-width:800px;margin:0 auto}.stat-card{display:flex;align-items:center;gap:1rem;padding:1.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:var(--transition-all-base)}.stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}.stat-icon{font-size:2.5rem}.stat-content{flex:1}.stats-mini-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:0.5rem}.stat-mini{text-align:center}.stat-mini .stat-value{font-size:1rem;font-weight:600;color:var(--primary);margin-bottom:0}.stat-mini .stat-label{font-size:0.75rem;color:var(--text-secondary)}.practice-tips{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:white;padding:var(--space-lg);border-radius:var(--radius-lg);margin-bottom:var(--space-lg)}.practice-tip{display:flex;align-items:center;gap:var(--space-md)}.tip-icon{font-size:var(--text-2xl)}.tip-text{flex:1}.tip-title{font-weight:600;margin-bottom:var(--space-xs)}.tip-description{font-size:var(--text-sm);opacity:0.9}.practice-tips-widget{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;border-radius:var(--radius-md);padding:0.75rem}.practice-tips-widget h4{margin:0 0 0.25rem 0;font-size:0.8125rem;font-weight:600}.practice-tips-widget p{margin:0;font-size:0.75rem;line-height:1.4}.timer-section{text-align:center;padding:1rem;background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border);margin-bottom:var(--space-lg)}.unified-timer-display{font-size:2.25rem;font-weight:300;font-family:'SF Mono','Monaco','Inconsolata',monospace;color:var(--primary);margin-bottom:0.5rem;letter-spacing:0.05em}.timer-controls{display:flex;gap:0.5rem;justify-content:center;margin-bottom:0.5rem}.timer-controls .btn{padding:0.5rem 1rem;font-size:0.875rem}.timer-controls .btn-icon{font-size:1rem}.sync-metronome-label{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.8125rem;color:var(--text-secondary);cursor:pointer}.sync-metronome-label input[type='checkbox']{width:var(--size-icon-sm);height:var(--size-icon-sm);cursor:pointer}.mode-selection{display:flex;gap:0.5rem;padding:0.5rem;background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border);margin-bottom:1.5rem}.mode-btn{flex:1;padding:0.5rem;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:var(--transition-all-base);display:flex;align-items:center;justify-content:center;gap:0.5rem}.mode-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.mode-btn.active{background:var(--primary);color:white;border-color:var(--primary)}.mode-icon{font-size:1.25rem}.mode-text{font-size:0.875rem;font-weight:500}.mode-panel{display:none;animation:fadeIn 0.3s ease;min-height:0}.mode-panel.active{display:block;min-height:500px}.fretboard-panel-wrapper{width:100%;min-height:500px}#fretboardGameContainer{min-height:500px;width:100%;position:relative}.practice-form-section{background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border);padding:1rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}.practice-form-section h3{font-size:1rem;margin-bottom:0.75rem;color:var(--text-primary)}.form-group{margin-bottom:var(--space-lg)}.form-group label{display:block;margin-bottom:var(--space-sm);font-weight:500;color:var(--text-secondary);font-size:0.875rem}.form-control,.form-select{width:100%;padding:var(--space-sm) var(--space-md);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--text-base);transition:var(--transition-all-base)}.form-control:disabled{opacity:0.6;cursor:not-allowed}.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,0.1)}textarea.form-control{resize:vertical;min-height:60px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:0.75rem}.form-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:1.5rem}.checkbox-label{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md);cursor:pointer}.checkbox-label input[type='checkbox']{width:18px;height:18px;cursor:pointer}.checkbox-label span{user-select:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.5rem 1rem;border:none;border-radius:var(--radius-sm);font-size:0.875rem;font-weight:500;cursor:pointer;transition:var(--transition-all-base)}.btn-primary{background:var(--primary);color:white}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background:var(--bg-hover)}.btn-sm{padding:0.375rem 0.75rem;font-size:0.8125rem}.btn-large{padding:1rem 2rem;font-size:1.125rem;display:inline-flex;align-items:center;gap:0.5rem}.btn-icon{background:none;border:none;cursor:pointer;padding:var(--space-xs);border-radius:var(--radius-sm);transition:var(--transition-all-base);font-size:1rem;line-height:1;color:var(--text-secondary)}.delete-session-btn{opacity:0.5}.history-item:hover .delete-session-btn{opacity:1}.delete-session-btn:hover{color:var(--danger);background:rgba(239,68,68,0.1);transform:scale(1.1)}.delete-session-btn:disabled{cursor:not-allowed;opacity:0.5}.audio-upload-section,.youtube-input-section{padding:1rem;background:var(--bg-secondary);border-radius:var(--radius-sm);text-align:center;border:2px dashed var(--border);margin-bottom:1rem}.upload-hint{font-size:0.75rem;color:var(--text-secondary);margin-top:0.5rem}.youtube-input{flex:1;padding:0.75rem 1rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-size:1rem;margin-bottom:0.5rem;width:100%}.log-practice-section{background:var(--bg-card);border-radius:var(--radius-lg);margin-bottom:var(--space-lg);overflow:hidden;transition:var(--transition-all-slow)}.log-practice-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg);cursor:pointer;user-select:none;min-height:60px}.log-practice-header:hover{background:rgba(255,255,255,0.02)}.log-practice-title{display:flex;align-items:center;gap:var(--space-md)}.log-practice-title h3{margin:0;font-size:1.125rem;font-weight:600;color:var(--text-primary)}.log-practice-title .icon{font-size:1.25rem;display:flex;align-items:center}.collapse-icon{font-size:1rem;color:var(--text-secondary);transition:transform 0.3s ease;display:flex;align-items:center}.log-practice-section:not(.collapsed) .collapse-icon{transform:rotate(90deg)}.log-practice-content{max-height:0;overflow:hidden;transition:max-height 0.3s ease}.log-practice-section:not(.collapsed) .log-practice-content{max-height:1000px;padding:0 var(--space-lg) var(--space-lg)}.goals-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl)}.stats-layout{display:grid;gap:var(--space-xl);max-width:800px;margin:0 auto;padding:2rem}.admin-tabs{display:flex;gap:1rem;margin-bottom:2rem;border-bottom:1px solid var(--border);padding-bottom:1rem}.admin-panel{display:none}.admin-panel.active{display:block}.history-layout{max-width:1000px;margin:0 auto}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-xl)}.history-header h2{margin:0}.history-filters{display:flex;gap:var(--space-md)}.filter-select{padding:var(--space-sm) var(--space-md);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer}.history-list{max-height:600px;overflow-y:auto}.history-month-group{margin-bottom:var(--space-2xl)}.history-month-header{font-size:var(--text-xl);margin-bottom:var(--space-lg);color:var(--primary)}.history-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-md);transition:var(--transition-all-base);position:relative}.history-item:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.history-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}.history-item-header h4{margin:0;font-size:var(--text-lg);font-weight:600;color:var(--text-primary)}.history-date{font-size:var(--text-sm);color:var(--text-secondary)}.history-item-details{display:flex;flex-wrap:wrap;gap:var(--space-md);font-size:var(--text-sm)}.history-item-details span{display:inline-flex;align-items:center;gap:var(--space-xs)}.history-duration{color:var(--primary);font-weight:600}.history-tempo,.history-key,.history-audio{color:var(--text-secondary)}.history-notes{margin-top:var(--space-sm);font-size:var(--text-sm);color:var(--text-secondary);font-style:italic}.history-item-actions{display:flex;align-items:center;gap:var(--space-md)}.settings-layout{max-width:800px;margin:0 auto}.settings-section{background:var(--bg-card);padding:var(--space-xl);border-radius:var(--radius-lg);margin-bottom:var(--space-xl);border:1px solid var(--border)}.settings-section h3{margin-bottom:var(--space-lg);color:var(--text-primary)}.settings-actions{display:flex;gap:var(--space-md);flex-wrap:wrap}.storage-indicator{margin-bottom:var(--space-lg)}.storage-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}.storage-bar{background:var(--bg-input);height:8px;border-radius:var(--radius-full);overflow:hidden}.storage-bar-fill{height:100%;background:var(--primary);transition:width 0.3s ease}.storage-percentage{font-weight:600}.about-info{font-size:var(--text-sm)}.about-info p{margin:var(--space-sm) 0}.unified-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn 0.2s ease}.unified-popup{background:var(--bg-primary);border-radius:var(--radius-xl);width:90%;max-width:800px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.3)}.popup-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;background:var(--bg-secondary);border-bottom:1px solid var(--border)}.popup-header h2{margin:0;font-size:1.5rem}.popup-close{background:none;border:none;font-size:1.5rem;color:var(--text-secondary);cursor:pointer;padding:0.5rem;border-radius:var(--radius-md);transition:var(--transition-all-base)}.popup-close:hover{background:var(--bg-hover);color:var(--text-primary)}.popup-content{flex:1;overflow-y:auto;padding:2rem}.empty-state{text-align:center;color:var(--text-secondary);padding:var(--space-xl);font-style:italic}.audio-player-wrapper{padding:var(--space-lg)}.metronome-wrapper{padding:var(--space-lg)}.fab{display:none}.app-loading{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg-dark);z-index:9999}.loading-spinner{border:3px solid var(--border);border-top-color:var(--primary);border-radius:var(--radius-full);animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}#error-message{max-width:90%;margin:0 auto;padding:2rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 4px 20px rgba(0,0,0,0.3)}#error-message strong{color:var(--danger);display:block;margin-bottom:1rem;font-size:1.2rem}#error-message button{margin:0.5rem;padding:0.75rem 1.5rem;border:none;border-radius:var(--radius-md);cursor:pointer;font-weight:600;transition:var(--transition-all-base)}#error-message button:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.2)}@media (max-width:640px){.practice-page-layout{grid-template-columns:1fr;gap:0.5rem;padding:0.5rem}.practice-sidebar{order:2}.app-header{padding:0.375rem 0.5rem}.header-tab-name{font-size:1.125rem}.header-status{display:none}.nav-container{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.nav-container::-webkit-scrollbar{display:none}.top-nav-item{padding:0.375rem 0.75rem;white-space:nowrap}.nav-icon{font-size:1rem}.nav-label{font-size:0.625rem}.unified-timer-display{font-size:1.75rem}.timer-controls{gap:0.375rem}.timer-controls .btn{padding:0.375rem 0.75rem;font-size:0.8125rem}.mode-btn{padding:0.375rem;font-size:0.8125rem}.mode-icon{font-size:1rem}.mode-text{font-size:0.75rem}.form-row{grid-template-columns:1fr}.dashboard-widget{padding:0.5rem}.widget-title{font-size:0.8125rem}.stats-mini-grid{grid-template-columns:1fr;gap:0.375rem;padding:0.375rem}.stat-mini .stat-value{font-size:0.875rem}.practice-tips-widget{padding:0.5rem}.practice-tips-widget h4{font-size:0.75rem}.practice-tips-widget p{font-size:0.7rem}}@media (max-width:768px){.header-container{padding:0.5rem}.header-tab-name{font-size:1.25rem}.header-status{font-size:0.75rem;padding:0.25rem 0.75rem}.nav-container{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.nav-container::-webkit-scrollbar{display:none}.top-nav-item{padding:0.5rem 1rem}.main-content-new,.main-content{padding:1rem}.stats-grid,.stats-panel{grid-template-columns:1fr}.modal-content,.unified-popup{width:100%;height:100%;max-width:none;max-height:100vh;border-radius:0;margin:0}.form-row{grid-template-columns:1fr}.practice-page-layout{grid-template-columns:1fr}.practice-sidebar{order:-1}.stats-mini-grid{grid-template-columns:1fr;gap:0.5rem}.tab-content-container,.tab-content{padding:1rem}.dashboard-widget{padding:1rem}.widget-title{font-size:1rem}.history-header{flex-direction:column;align-items:flex-start;gap:var(--space-md)}.history-filters{width:100%;flex-direction:column}.filter-select{width:100%}#quickStats{grid-template-columns:1fr}.goals-layout{grid-template-columns:1fr}.fab{display:flex}.main-content .menu-toggle{display:block}}@media (max-width:992px){.goals-layout{grid-template-columns:1fr}}@media (max-width:768px){.modal{padding:0}.modal-content{width:100%;max-width:100%;height:100vh;max-height:100vh;margin:0;border-radius:0;display:flex;flex-direction:column}.modal-header{flex-shrink:0;padding:1rem;position:sticky;top:0;z-index:10;background:var(--bg-card)}.modal-body{flex:1;overflow-y:auto;padding:1rem;-webkit-overflow-scrolling:touch}.modal-footer{flex-shrink:0;padding:1rem;position:sticky;bottom:0;background:var(--bg-card);border-top:1px solid var(--border)}#goalModal .modal-content{padding:1rem !important;min-height:auto}.goal-input-row{flex-direction:column;gap:0.75rem}.goal-area-select,.goal-minutes-input{width:100%;flex:none}.modal-actions{flex-direction:column;gap:0.5rem}.modal-actions .btn{width:100%}.add-song-modal .modal-content{height:auto;max-height:95vh}.practice-form-section{padding:0.75rem}.unified-popup{position:fixed;top:0;left:0;right:0;bottom:0}.popup-header{padding:1rem}.popup-content{padding:1rem}}@media (max-width:480px){.modal-header h2,.popup-header h2{font-size:1.125rem}.modal-body,.popup-content{padding:0.75rem}.form-control,.form-select,input[type='text'],input[type='number'],select,textarea{font-size:var(--text-base);padding:0.625rem}.btn{width:100%;padding:0.625rem 1rem}.btn-group{display:flex;flex-direction:column;gap:0.5rem}}@media (max-height:600px) and (orientation:landscape){.modal-content{max-height:100vh;overflow:hidden}.modal-header{padding:0.5rem 1rem}.modal-body{overflow-y:auto;max-height:calc(100vh - 8rem)}.unified-timer-display{font-size:1.5rem}.header-tab-name{font-size:1rem}}@keyframes dashboardLoad{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.tab-pane.active{animation:dashboardLoad 0.4s ease}.stats-content,.history-content,.calendar-content,.goals-content,.repertoire-content,.settings-content,.drills-content,.learning-content,.achievements-container,.achievement-grid,.stats-tab,.history-tab,.calendar-tab{padding-bottom:2rem !important}.achievements-section{margin-bottom:2rem}.practice-streaks-section{margin-bottom:2rem}.tab-pane>*:last-child{margin-bottom:2rem}.calendar-page{max-width:1200px;margin:0 auto;padding:var(--space-xl)}#calendarContainer{max-width:1000px;margin:0 auto}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-xl);flex-wrap:wrap;gap:var(--space-md)}.calendar-navigation{display:flex;align-items:center;justify-content:center;gap:var(--space-lg);margin-bottom:var(--space-xl)}.nav-btn{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);cursor:pointer;transition:var(--transition-base)}.nav-btn:hover{background:var(--bg-input);transform:translateY(-2px)}#currentMonth{font-size:var(--text-2xl);font-weight:600;min-width:200px;text-align:center}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2px;margin-bottom:var(--space-xl)}.calendar-day-header{background:var(--bg-card);padding:var(--space-sm);text-align:center;font-weight:600;color:var(--text-secondary);font-size:var(--text-sm);height:var(--size-icon-2xl);display:flex;align-items:center;justify-content:center}.calendar-day{background:var(--bg-card);aspect-ratio:1;position:relative;cursor:pointer;transition:var(--transition-all-base);min-height:60px;padding:0;box-sizing:border-box;display:block}.calendar-day:hover{background:var(--bg-input);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:10}.calendar-day.empty{background:var(--bg-dark);cursor:default}.calendar-day.empty:hover{background:var(--bg-dark);transform:none;box-shadow:none}.calendar-day.today{border:2px solid var(--primary)}.calendar-day.overflow-day{opacity:0.4}.calendar-day.overflow-day:hover{opacity:0.6;transform:translateY(-1px)}.calendar-day.overflow-day .calendar-day-number{color:var(--text-tertiary)}.calendar-day.overflow-day .practice-minutes{opacity:0.7}.calendar-day.overflow-day .calendar-quadrants{opacity:0.6}.calendar-day-number{position:absolute;top:4px;left:4px;font-size:0.7rem;color:var(--text-secondary);font-weight:400;z-index:1;margin:0;padding:0;line-height:1}.minutes-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:var(--radius-full);background:var(--accent,var(--primary));color:var(--accent-foreground,var(--primary-foreground,white));display:flex;align-items:center;justify-content:center;font-weight:600;font-size:0.65rem;z-index:3;box-shadow:0 2px 4px var(--shadow-color,rgba(0,0,0,0.1))}.calendar-day.today .minutes-circle{background:var(--success)}.calendar-day:hover .minutes-circle{transform:translate(-50%,-50%) scale(1.1)}.practice-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--size-icon-2xl);height:var(--size-icon-2xl);display:flex;align-items:center;justify-content:center;z-index:10}.progress-circle{position:absolute;top:0;left:0;z-index:1}.practice-minutes{position:relative;z-index:2;font-weight:bold;font-size:var(--text-sm);color:var(--text-primary)}.calendar-quadrants{position:absolute;top:4px;right:4px;width:var(--size-icon-lg);height:var(--size-icon-lg);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;border-radius:var(--radius-4px);overflow:hidden;z-index:2}.calendar-quadrant{background:var(--bg-input);transition:var(--transition-all-slow)}.calendar-quadrant.completed{background:var(--primary) !important;opacity:0.8}.calendar-quadrant.partial{opacity:0.6}.session-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:0 10px 30px rgba(0,0,0,0.3);z-index:1000;max-width:400px;max-height:80vh;overflow-y:auto;animation:popupFadeIn 0.2s ease}@keyframes popupFadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.session-popup-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.session-popup-header h4{margin:0;font-size:1.125rem;color:var(--text-primary)}.session-popup-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-secondary);padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:var(--transition-all-base)}.session-popup-close:hover{background:var(--bg-input);color:var(--text-primary)}.session-list{display:flex;flex-direction:column;gap:0.75rem}.session-item{background:var(--bg-input);padding:0.75rem;border-radius:var(--radius-md);border:1px solid var(--border);transition:var(--transition-all-base);cursor:pointer}.session-item:hover{border-color:var(--primary);background-color:var(--bg-hover)}.session-details-container{color:var(--text-secondary)}.session-details-container strong{color:var(--text-primary);font-weight:500}.session-details-container a{color:var(--primary);text-decoration:none}.session-details-container a:hover{text-decoration:underline}.session-time{font-weight:600;color:var(--primary);margin-bottom:0.25rem}.session-area{color:var(--text-primary);margin-bottom:0.25rem}.session-details{font-size:0.875rem;color:var(--text-secondary);line-height:1.4}.calendar-legend{display:flex;justify-content:center;gap:var(--space-xl);margin-bottom:var(--space-xl);flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-sm);color:var(--text-secondary)}.legend-box{width:var(--size-icon-sm);height:var(--size-icon-sm);border-radius:var(--radius-sm)}.calendar-stats{margin:40px auto;max-width:640px}.stats-headers{display:flex;gap:var(--space-20px);margin-bottom:16px;justify-content:center}.stat-header-title{flex:1;max-width:300px;text-align:center;font-size:var(--text-sm);font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.05em}.stats-boxes{display:flex;gap:var(--space-20px);justify-content:center}.stat-box{flex:1;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-xl);max-width:300px;text-align:center;transition:var(--transition-all-base)}.stat-box:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.08)}.stat-header{margin-bottom:24px}.stat-header h3{margin:0;font-family:inherit;font-size:var(--text-13px);font-weight:500;color:var(--text-secondary);letter-spacing:0.08em;text-transform:uppercase;opacity:0.7}.stat-grid{display:flex;justify-content:space-between;align-items:center;gap:40px}.stat-item{text-align:center}.stat-value{font-family:inherit;font-size:36px;font-weight:600;color:var(--text-primary);line-height:1;margin-bottom:8px}.stat-sublabel{font-family:inherit;font-size:var(--text-sm);font-weight:400;color:var(--text-secondary);opacity:0.6}.stat-time{display:flex;align-items:baseline;justify-content:center;gap:var(--space-xs)}.stat-time .stat-value{font-family:inherit;font-size:36px;font-weight:600;margin-bottom:8px}.stat-label{font-family:inherit;font-size:var(--text-13px);font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.08em;opacity:0.7}.stat-days-section{margin-bottom:8px}.stat-days-value{font-size:48px;font-weight:700;color:var(--primary);margin-right:8px}.stat-days-label{font-size:var(--text-2xl);color:var(--text-secondary);font-weight:400}.stat-practiced-label{font-size:var(--text-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:24px;opacity:0.7}.stat-time-section{margin-top:20px}.stat-time-value{font-size:32px;font-weight:600;color:var(--text-primary);margin-bottom:8px}.stat-total-time-label{font-size:var(--text-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.1em;opacity:0.7}@media (max-width:768px){.calendar-stats{margin:var(--space-lg) 16px}.stats-headers,.stats-boxes{flex-direction:column;gap:var(--space-md)}.stat-header-title,.stat-box{max-width:none;width:100%}.stat-box{padding:var(--space-lg)}.stat-days-value{font-size:36px}.stat-days-label{font-size:var(--text-xl)}.stat-time-value{font-size:28px}.stat-grid{gap:32px}.stat-value,.stat-time .stat-value{font-size:32px}}.streak-display{text-align:center;margin-bottom:var(--space-xl)}.streak-display h3{margin-bottom:var(--space-lg);font-size:var(--text-xl);color:var(--text-primary)}.badges{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-md);max-width:800px;margin:0 auto}.badge{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);padding:var(--space-md);background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-lg);transition:var(--transition-all-slow);opacity:0.3;min-width:80px;cursor:default}.badge:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.badge.earned{border-color:var(--primary);background:var(--bg-input);opacity:1}.badge.earned:hover{border-color:var(--success);background:rgba(16,185,129,0.1)}.badge-icon{font-size:var(--text-2xl)}.badge-label{font-size:11px;color:var(--text-secondary);text-align:center;line-height:1.3;white-space:pre-line}.calendar-actions{display:flex;gap:1rem}.day-summary{display:flex;justify-content:space-around;padding:var(--space-lg);background:var(--bg-input);border-radius:var(--radius-md);margin-bottom:var(--space-lg)}.summary-stat{text-align:center}.goal-progress-section{margin-bottom:var(--space-xl)}.goal-progress-grid{display:grid;gap:var(--space-md)}.goal-progress-item{background:var(--bg-input);padding:var(--space-md);border-radius:var(--radius-md);border:1px solid var(--border)}.goal-progress-item.completed{border-color:var(--success)}.goal-progress-header{display:flex;justify-content:space-between;margin-bottom:var(--space-sm)}.goal-area{font-weight:600;color:var(--text-primary)}.goal-percentage{color:var(--primary);font-weight:600}.goal-progress-text{font-size:var(--text-sm);color:var(--text-secondary);margin-top:var(--space-sm)}.sessions-list{display:flex;flex-direction:column;gap:var(--space-md)}.session-detail{background:var(--bg-input);padding:var(--space-lg);border-radius:var(--radius-md);border:1px solid var(--border)}.session-header{display:flex;justify-content:space-between;margin-bottom:var(--space-sm)}.session-duration{color:var(--primary);font-weight:600}.session-info{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-xs)}.session-notes{margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid var(--border);font-size:var(--text-sm);color:var(--text-secondary);font-style:italic}#dayDetailModal{z-index:999999}@media (max-width:1400px){.badges{grid-template-columns:repeat(6,1fr);max-width:800px}}@media (max-width:1024px){.badges{grid-template-columns:repeat(3,1fr);max-width:450px}}@media (max-width:768px){.calendar-stats{grid-template-columns:1fr}.stat-card{padding:var(--space-md)}.stat-grid{gap:var(--space-lg)}.stat-value{font-size:var(--text-2xl)}.calendar-grid{gap:1px;padding:1px}.calendar-day{min-height:60px}.minutes-circle{width:28px;height:28px;font-size:0.65rem}.calendar-quadrants{width:var(--size-icon-md);height:var(--size-icon-md)}.calendar-day-number{font-size:0.65rem}.session-popup{max-width:90vw;left:5vw !important;right:5vw !important}.calendar-header{flex-direction:column;align-items:flex-start}.calendar-actions{width:100%}.calendar-actions .btn{flex:1}.badges{grid-template-columns:repeat(2,1fr);max-width:300px;gap:var(--space-sm)}.badge{min-width:auto;padding:var(--space-sm)}.badge-icon{font-size:var(--text-lg)}.badge-label{font-size:0.75rem}}.learning-badge{position:absolute;bottom:4px;left:4px;width:var(--size-icon-lg);height:var(--size-icon-lg);background:var(--primary);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);box-shadow:0 2px 4px rgba(0,0,0,0.2);z-index:3}@media (max-width:768px){.learning-badge{width:var(--size-icon-md);height:var(--size-icon-md);font-size:var(--text-xs)}}.settings-page{max-width:800px;margin:0 auto;padding:var(--space-xl)}.settings-header{margin-bottom:var(--space-2xl)}.settings-header h2{margin:0;font-size:var(--text-2xl);color:var(--text-primary)}.settings-sections{display:flex;flex-direction:column;gap:var(--space-xl)}.settings-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-xl)}.settings-section h3{margin:0 0 var(--space-lg) 0;font-size:var(--text-lg);color:var(--text-primary);display:flex;align-items:center;gap:var(--space-sm)}.settings-content{display:flex;flex-direction:column;gap:var(--space-md)}.setting-item{display:flex;flex-direction:column;gap:var(--space-sm)}.setting-item label{color:var(--text-primary);font-weight:500;display:flex;align-items:center;gap:var(--space-sm)}.setting-item input[type='checkbox']{width:18px;height:18px;accent-color:var(--primary)}.setting-item input[type='number'],.setting-item input[type='time'],.setting-item select{padding:var(--space-sm) var(--space-md);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--text-base);max-width:200px}.data-actions{display:flex;gap:var(--space-md);flex-wrap:wrap}.data-stats{margin-top:var(--space-lg);padding:var(--space-md);background:var(--bg-input);border-radius:var(--radius-md)}.data-stats p{margin:0;color:var(--text-secondary)}.about-links{display:flex;gap:var(--space-lg);margin-top:var(--space-md)}.about-links a{color:var(--primary);text-decoration:none;transition:opacity 0.2s ease}.about-links a:hover{opacity:0.8;text-decoration:underline}@media (max-width:768px){.settings-page{padding:var(--space-lg)}.settings-section{padding:var(--space-lg)}.data-actions{flex-direction:column}.data-actions .btn{width:100%}.about-links{flex-direction:column;gap:var(--space-sm)}}.drills-page{max-width:800px !important;margin:0 auto !important;padding:0;width:100%;box-sizing:border-box}.drills-controls .form-control{width:auto !important;display:inline-block !important}.drills-controls input.form-control{width:100% !important;display:block !important}#drillsTab,.tab-pane:has(.drills-page){max-width:800px !important;margin:0 auto !important;width:100%}.drills-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-xl)}.drills-header h2{margin:0;color:var(--text-primary);font-size:var(--text-2xl)}.drills-header .btn-primary{background:#00d9ff;color:#000;border:none;padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-lg);font-weight:600;cursor:pointer;display:flex;align-items:center;gap:var(--space-sm);transition:all var(--transition-base)}.drills-header .btn-primary:hover{background:#00bfe6;transform:translateY(-1px)}.drills-controls{display:flex !important;flex-direction:row !important;gap:var(--space-md);margin-bottom:var(--space-xl);align-items:center;flex-wrap:nowrap !important}.search-bar{flex:1;min-width:0}.search-bar input{width:100% !important;padding:var(--space-md);font-size:var(--text-base);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);transition:all var(--transition-base)}.drills-filters{display:flex !important;flex-direction:row !important;gap:var(--space-md);flex-shrink:0;flex-wrap:nowrap !important}.drills-filters select{display:inline-block !important;width:auto !important;min-width:140px;padding:var(--space-md);font-size:var(--text-base);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;transition:all var(--transition-base)}.drills-filters select:hover,.drills-filters select:focus,.search-bar input:focus{outline:none;border-color:#00d9ff;box-shadow:0 0 0 3px rgba(0,217,255,0.2)}.drills-filters select{background-color:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border)}.drills-filters select option{background-color:var(--bg-primary);color:var(--text-primary)}.drills-stats{display:flex !important;gap:var(--space-lg);margin-bottom:var(--space-xl);justify-content:space-between}.drills-stats .stat-card{background:var(--bg-card);border:1px solid var(--border);padding:var(--space-xl);text-align:center;border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:120px;flex:1}.drills-stats .stat-value{display:block;font-size:var(--text-3xl);font-weight:700;color:#00d9ff;margin-bottom:var(--space-xs)}.drills-stats .stat-label{font-size:var(--text-sm);color:#00d9ff;text-transform:uppercase;letter-spacing:0.5px;font-weight:600}.drills-grid{min-height:400px}.drills-table{width:100%;border-collapse:collapse}.drills-table th{text-align:left;padding:var(--space-md,1rem) var(--space-sm,0.5rem);font-size:var(--text-sm,0.875rem);color:var(--text-secondary,#9ca3af);font-weight:var(--font-medium,500);border-bottom:1px solid var(--border,rgba(255,255,255,0.1))}.drills-table th.sortable{cursor:pointer;user-select:none;transition:color var(--transition-base)}.drills-table th.sortable:hover{color:var(--text-primary)}.sort-icon{display:inline-block;margin-left:var(--space-xs);font-size:var(--text-xs);opacity:0.5;transition:opacity var(--transition-base)}.sort-icon.active{opacity:1;color:var(--primary)}.drills-table td{padding:var(--space-md,1rem) var(--space-sm,0.5rem);font-size:var(--text-sm,0.875rem);color:var(--text-primary,#f9fafb);border-bottom:1px solid var(--border,rgba(255,255,255,0.05))}.drills-table tr:hover{background:var(--bg-secondary,#1a1a1a)}.drill-actions-cell{text-align:right;white-space:nowrap}.action-btn{background:transparent;border:1px solid var(--border,rgba(255,255,255,0.1));color:var(--text-secondary,#9ca3af);width:var(--size-icon-xl);height:var(--size-icon-xl);border-radius:var(--radius-md,0.5rem);cursor:pointer;transition:all var(--transition-base,200ms ease);margin-left:var(--space-xs,0.25rem);font-size:var(--text-sm,0.875rem)}.action-btn:hover{background:var(--bg-secondary,#1a1a1a);color:var(--text-primary,#f9fafb);border-color:var(--primary,#6366f1)}.action-btn.start-drill-btn:hover{color:var(--primary,#6366f1)}.action-btn.favorite-btn{color:var(--text-muted,#6b7280)}.action-btn.favorite-btn.active,.action-btn.favorite-btn:hover{color:#f59e0b}.favorite-star{color:#f59e0b;margin-right:var(--space-xs,0.25rem)}.drill-name{font-weight:var(--font-medium,500);color:var(--text-primary,#f9fafb)}.difficulty-badge{display:inline-block;padding:var(--space-xs,0.25rem) var(--space-sm,0.5rem);border-radius:var(--radius-sm,0.375rem);font-size:var(--text-xs,0.75rem);font-weight:var(--font-medium,500);text-transform:uppercase}.difficulty-badge.beginner{background:rgba(16,185,129,0.1);color:#10b981;border:1px solid rgba(16,185,129,0.2)}.difficulty-badge.intermediate{background:rgba(59,130,246,0.1);color:#3b82f6;border:1px solid rgba(59,130,246,0.2)}.difficulty-badge.advanced{background:rgba(245,158,11,0.1);color:#f59e0b;border:1px solid rgba(245,158,11,0.2)}.difficulty-badge.expert{background:rgba(239,68,68,0.1);color:#ef4444;border:1px solid rgba(239,68,68,0.2)}.no-drills{grid-column:1 / -1;text-align:center;padding:80px var(--space-20px);color:var(--text-secondary,#9ca3af);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px}.no-drills svg{margin-bottom:var(--space-lg,1.5rem);opacity:0.3;stroke:currentColor}.no-drills h3{font-size:var(--text-xl,1.25rem);margin-bottom:var(--space-sm,0.5rem);color:var(--text-primary,#f9fafb)}.no-drills p{margin:0;font-size:var(--text-base,1rem)}@media (max-width:768px){.drills-controls{flex-wrap:wrap}.search-bar{width:100%;flex-basis:100%}.drills-filters{width:100%;justify-content:space-between;margin-top:var(--space-md)}.drills-filters select{flex:1;min-width:0}.drills-stats{flex-direction:column;gap:var(--space-md)}.drills-table th:nth-child(3),.drills-table td:nth-child(3),.drills-table th:nth-child(4),.drills-table td:nth-child(4){display:none}.drills-table{font-size:var(--text-xs,0.75rem)}.drills-table th,.drills-table td{padding:var(--space-sm,0.5rem) var(--space-xs,0.25rem)}}#drillsTab .drills-controls{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important}#drillsTab .search-bar{flex:1 !important;min-width:0 !important}#drillsTab .drills-filters{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important}#drillsTab .drills-controls select.form-control,#drillsTab .drills-filters select.form-control{width:auto !important;min-width:140px !important;display:inline-block !important}#drillsTab .search-bar input.form-control{width:100% !important;display:block !important}.progress-chart-modal .modal-content{max-width:700px;width:90%}.progress-chart-container{display:flex;justify-content:center;align-items:center;padding:var(--space-20px);background:var(--bg-secondary);border-radius:var(--radius-md);margin-bottom:20px}.progress-stats{display:flex;gap:30px;justify-content:center}.progress-stats .stat{text-align:center}.progress-stats label{display:block;color:var(--text-secondary);font-size:0.875rem;margin-bottom:4px}.progress-stats span{font-size:1.25rem;font-weight:600;color:var(--primary)}.drill-type-icon{font-size:1.25rem}.badge{display:inline-block;padding:2px var(--space-sm);border-radius:var(--radius-lg);font-size:0.75rem;font-weight:600;margin-right:8px;vertical-align:middle}.badge-app{background:#2196f3;color:white}.badge-custom{background:#4caf50;color:white}.action-btn.disabled{opacity:0.4;cursor:not-allowed;padding:var(--space-xs) 8px;pointer-events:none}.about-page,.features-page,.whats-new-page,.roadmap-page{max-width:900px;margin:0 auto;padding:2rem;color:var(--text-primary)}.about-page h1,.about-page h2,.about-page h3,.features-page h1,.features-page h2,.features-page h3,.whats-new-page h1,.whats-new-page h2,.whats-new-page h3,.roadmap-page h1,.roadmap-page h2,.roadmap-page h3{color:var(--text-primary)}.about-page p,.features-page p,.whats-new-page p,.roadmap-page p{color:var(--text-secondary)}.about-page .lead,.about-page blockquote{color:var(--text-secondary)}.page-header{text-align:center;margin-bottom:3rem}.page-header h1{font-size:2.5rem;margin-bottom:0.5rem;color:var(--primary)}.subtitle{font-size:1.25rem;color:var(--text-secondary)}.hero-section{background:var(--bg-card);padding:2rem;border-radius:var(--radius-xl);margin-bottom:3rem}.lead{font-size:1.125rem;line-height:1.8;color:var(--text-secondary)}.philosophy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:2rem}.philosophy-card{background:var(--bg-card);padding:2rem;border-radius:var(--radius-lg);text-align:center;transition:transform 0.2s ease}.philosophy-card:hover{transform:translateY(-4px)}.philosophy-card .icon{font-size:3rem;margin-bottom:1rem}.story-section,.mission-section,.team-section,.support-section{margin-bottom:3rem}.mission-section blockquote{font-size:1.5rem;font-style:italic;text-align:center;color:var(--primary);margin:2rem 0;padding:2rem;background:var(--bg-card);border-radius:var(--radius-lg)}.features-grid{display:flex;flex-direction:column;gap:3rem}.feature-category h2{color:var(--primary);margin-bottom:2rem;font-size:2rem}.feature-list{display:grid;gap:2rem}.feature-item{background:var(--bg-card);padding:2rem;border-radius:var(--radius-lg);border:1px solid var(--border);user-select:text;cursor:auto}.feature-item h3{color:var(--text-primary);margin-bottom:1rem}.feature-item p{color:var(--text-secondary);margin-bottom:1rem;line-height:1.6}.feature-item ul{list-style:none;padding:0;margin-top:1rem}.feature-item li{padding:0.5rem 0;padding-left:1.5rem;position:relative;color:var(--text-secondary);list-style:none}.feature-item li::before{content:'✓';position:absolute;left:0;color:var(--success)}.whats-new-container{position:relative}.latest-release-hero{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark,var(--primary)) 100%);color:white;padding:3rem;border-radius:var(--radius-xl);margin-bottom:3rem;position:relative;overflow:hidden}.latest-release-hero::before{content:'';position:absolute;top:-50%;right:-10%;width:50%;height:200%;background:rgba(255,255,255,0.05);transform:rotate(15deg)}.release-hero-content{position:relative;z-index:1}.version-header{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}.version-label{font-size:0.875rem;text-transform:uppercase;letter-spacing:1px;opacity:0.9}.version-number{font-size:3rem;font-weight:700;margin:0;line-height:1}.release-date{font-size:1rem;opacity:0.8;margin-bottom:1.5rem}.release-summary h2{font-size:1.5rem;margin-bottom:0.5rem;font-weight:600}.release-summary p{font-size:1.125rem;line-height:1.6;opacity:0.95;max-width:600px}.release-changes-section{margin-bottom:3rem}.section-title{font-size:1.5rem;color:var(--text-primary);margin-bottom:2rem;font-weight:600}.changes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.change-item{display:flex;gap:1rem;padding:1.5rem;background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border);transition:var(--transition-all-base)}.change-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}.change-icon{flex-shrink:0;width:var(--size-icon-2xl);height:var(--size-icon-2xl);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--bg-input)}.change-item.change-fixed .change-icon{color:var(--success);background:rgba(var(--success-rgb,76,175,80),0.1)}.change-item.improved .change-icon{color:var(--info);background:rgba(var(--info-rgb,33,150,243),0.1)}.change-icon svg{width:var(--size-icon-md);height:var(--size-icon-md)}.change-content h4{font-size:1rem;color:var(--text-primary);margin-bottom:0.5rem;font-weight:600}.change-content p{font-size:0.875rem;color:var(--text-secondary);line-height:1.5}.previous-releases{margin-bottom:3rem}.release-timeline{position:relative;padding-left:2rem}.release-timeline::before{content:'';position:absolute;left:0.5rem;top:0;bottom:0;width:2px;background:var(--border)}.timeline-item{position:relative;margin-bottom:2rem;transition:var(--transition-all-slow)}.timeline-item.collapsed+.timeline-item:not(.collapsed){display:none}.timeline-item.timeline-hidden{display:none}.timeline-item.collapsed~.timeline-item.timeline-hidden{display:block}.timeline-marker{position:absolute;left:-1.75rem;top:0.5rem;width:1rem;height:1rem;border-radius:var(--radius-full);background:var(--bg-card);border:3px solid var(--primary)}.timeline-content{background:var(--bg-card);padding:1.5rem;border-radius:var(--radius-lg);border:1px solid var(--border)}.timeline-header{display:flex;align-items:center;gap:1rem;margin-bottom:0.75rem}.timeline-version{font-size:0.875rem;font-weight:600;color:var(--primary)}.timeline-date{font-size:0.75rem;color:var(--text-secondary)}.timeline-content h4{font-size:1.125rem;color:var(--text-primary);margin-bottom:0.75rem;font-weight:600}.timeline-changes{list-style:none;padding:0;margin:0}.timeline-changes li{font-size:0.875rem;color:var(--text-secondary);padding:0.25rem 0;padding-left:1.25rem;position:relative}.timeline-changes li::before{content:'•';position:absolute;left:0;color:var(--primary)}.timeline-expand-btn{width:100%;padding:0.75rem;background:none;border:none;color:var(--primary);font-size:0.875rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.5rem;transition:var(--transition-all-base)}.timeline-expand-btn:hover{background:var(--bg-hover)}.timeline-expand-btn svg{width:var(--size-icon-sm);height:var(--size-icon-sm);transition:transform 0.3s ease}.timeline-item.collapsed .timeline-expand-btn svg{transform:rotate(-90deg)}.timeline-item.collapsed .expand-text::after{content:' releases'}.timeline-item:not(.collapsed) .expand-text::after{content:' less'}.stay-updated-section{background:var(--bg-card);padding:3rem;border-radius:var(--radius-xl);text-align:center;border:1px solid var(--border)}.update-icon{width:60px;height:60px;margin:0 auto 1.5rem;background:var(--bg-input);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center}.update-icon svg{width:30px;height:30px;color:var(--primary)}.stay-updated-section h3{font-size:1.5rem;color:var(--text-primary);margin-bottom:0.5rem}.stay-updated-section p{font-size:1rem;color:var(--text-secondary);margin-bottom:2rem;max-width:500px;margin-left:auto;margin-right:auto}.update-benefits{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}.benefit{display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;color:var(--text-secondary)}.benefit svg{width:var(--size-icon-sm);height:var(--size-icon-sm);color:var(--success)}.roadmap-timeline{position:relative;padding-left:2rem}.roadmap-timeline::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--border)}.roadmap-section{margin-bottom:3rem;position:relative}.roadmap-section::before{content:'';position:absolute;left:-2rem;top:2rem;width:12px;height:12px;border-radius:var(--radius-full);background:var(--bg-card);border:2px solid var(--primary)}.section-header{margin-bottom:2rem}.status-badge{display:inline-block;padding:0.25rem 0.75rem;border-radius:var(--radius-full);font-size:0.875rem;font-weight:600;margin-bottom:0.5rem}.status-badge.in-progress{background:var(--success);color:white}.status-badge.planned{background:var(--info);color:white}.status-badge.future{background:var(--warning);color:white}.roadmap-items{display:grid;gap:1.5rem}.roadmap-item{display:flex;gap:1.5rem;padding:1.5rem;background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border);transition:transform 0.2s ease}.roadmap-item:hover{transform:translateX(4px)}.item-icon{font-size:2.5rem;flex-shrink:0}.item-content h3{margin-bottom:0.5rem;color:var(--text-primary)}.features-list{margin-top:1rem;display:flex;flex-wrap:wrap;gap:0.5rem}.feature-tag{display:inline-block;padding:0.25rem 0.75rem;background:var(--bg-input);border-radius:var(--radius-full);font-size:0.875rem;color:var(--text-secondary)}.cta-section,.feedback-section,.commitment-section{text-align:center;margin-top:3rem;padding:2rem;background:var(--bg-card);border-radius:var(--radius-xl)}.content-section h2,.philosophy-section h2,.story-section h2,.mission-section h2,.team-section h2,.support-section h2,.contact-section h2{color:var(--text-primary)}.tech-stack h3,.tech-stack strong{color:var(--text-primary)}.tech-stack li,.support-section li{color:var(--text-secondary)}.contact-buttons a{color:inherit;text-decoration:none}.legal-content h3,.legal-content h4{color:var(--text-primary)}.legal-content p{color:var(--text-secondary)}.shortcuts-modal h3{color:var(--text-primary)}.shortcuts-list .shortcut-item{color:var(--text-primary)}.shortcuts-list .shortcut-item span{color:var(--text-secondary)}.contact-buttons,.feedback-actions{display:flex;gap:1rem;justify-content:center;margin-top:1.5rem}.commitments{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-top:1.5rem}.commitment{text-align:center}.commitment .icon{font-size:2rem;margin-bottom:0.5rem}@media (max-width:768px){.about-page,.features-page,.whats-new-page,.roadmap-page{padding:1rem}.page-header h1{font-size:2rem}.roadmap-timeline{padding-left:1rem}.roadmap-item{flex-direction:column;text-align:center}.contact-buttons,.feedback-actions{flex-direction:column}.latest-release-hero{padding:2rem 1.5rem}.version-number{font-size:2.5rem}.release-summary h2{font-size:1.25rem}.release-summary p{font-size:1rem}.changes-grid{grid-template-columns:1fr;gap:1rem}.change-item{padding:1rem}.release-timeline{padding-left:1.5rem}.timeline-marker{left:-1.5rem}.update-benefits{flex-direction:column;gap:1rem;align-items:center}.stay-updated-section{padding:2rem 1.5rem}.page-modal .whats-new-container{padding:1rem}}[data-theme]{--bg-hover:var(--bg-secondary);--bg-modal:rgba(0,0,0,0.5);--bg-overlay:rgba(0,0,0,0.3);--primary-hover:var(--primary-dark);--success-hover:var(--success-dark);--danger-hover:var(--danger-dark);--warning-hover:var(--warning-dark);--info-hover:var(--info-dark);--border-light:var(--border);--border-focus:var(--primary);--border-error:var(--danger);--border-success:var(--success);--text-disabled:var(--text-muted);--text-inverse:var(--bg-primary);--bg-card-hover:var(--bg-hover);--bg-input-hover:var(--bg-hover);--bg-sidebar:var(--bg-secondary);--scrollbar-track:var(--bg-secondary);--scrollbar-thumb:var(--border);--scrollbar-thumb-hover:var(--text-tertiary);--code-bg:var(--bg-secondary);--code-text:var(--text-primary);--code-comment:var(--success-dark);--code-string:var(--danger-dark);--code-keyword:var(--info-dark);--opacity-hover:0.95;--opacity-disabled:0.6;--opacity-overlay:0.5}[data-theme] .timer-widget,[data-theme] .log-practice-section,[data-theme] .metronome-container,[data-theme] .dashboard-widget,[data-theme] .practice-tips,[data-theme] .audio-player{transition:all var(--transition-base)}*{transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}@media (max-width:768px){[data-theme]{--card-padding:var(--space-md);--section-gap:var(--space-xl);--component-gap:var(--space-md)}}[data-theme='dark']{--primary:#6366f1;--primary-dark:#4f46e5;--primary-light:#818cf8;--secondary:#a855f7;--secondary-dark:#9333ea;--secondary-light:#c084fc;--success:#34d399;--success-dark:#10b981;--success-light:#6ee7b7;--danger:#f87171;--danger-dark:#ef4444;--danger-light:#fca5a5;--warning:#fbbf24;--warning-dark:#f59e0b;--warning-light:#fcd34d;--info:#60a5fa;--info-dark:#3b82f6;--info-light:#93c5fd;--bg-primary:#0a0a0a;--bg-secondary:#141414;--bg-tertiary:#1a1a1a;--bg-card:#141414;--bg-input:#1a1a1a;--bg-dark:#0a0a0a;--bg-dark-secondary:#141414;--bg-dark-tertiary:#1a1a1a;--text-primary:#f5f5f5;--text-secondary:#a3a3a3;--text-tertiary:#737373;--text-muted:#525252;--border:rgba(255,255,255,0.15);--border-hover:rgba(255,255,255,0.25);--shadow-xs:0 1px 2px 0 rgba(0,0,0,0.3);--shadow-sm:0 2px 4px -1px rgba(0,0,0,0.4),0 1px 2px -1px rgba(0,0,0,0.3);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.5),0 2px 4px -2px rgba(0,0,0,0.4);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.6),0 4px 6px -4px rgba(0,0,0,0.5);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.7),0 8px 10px -6px rgba(0,0,0,0.5);--shadow-2xl:0 25px 50px -12px rgba(0,0,0,0.8);--gradient-primary:linear-gradient(135deg,#6366f1 0%,#818cf8 100%);--gradient-success:linear-gradient(135deg,#10b981 0%,#34d399 100%);--gradient-danger:linear-gradient(135deg,#ef4444 0%,#f87171 100%);--gradient-warning:linear-gradient(135deg,#f59e0b 0%,#fbbf24 100%);--gradient-background:linear-gradient(180deg,#0a0a0a 0%,#0f0f0f 50%,#141414 100%);--gradient-card:linear-gradient(135deg,#141414 0%,#1a1a1a 100%)}[data-theme='dark'] .timer-widget,[data-theme='dark'] .log-practice-section,[data-theme='dark'] .metronome-container,[data-theme='dark'] .dashboard-widget,[data-theme='dark'] .practice-tips,[data-theme='dark'] .audio-player{box-shadow:0 0 0 1px rgba(255,255,255,0.06),var(--shadow-lg)}[data-theme='dark'] .timer-widget,[data-theme='dark'] .log-practice-section,[data-theme='dark'] .metronome-container{background:#161616}[data-theme='light']{--primary:#6366f1;--primary-dark:#4f46e5;--primary-light:#818cf8;--secondary:#a855f7;--secondary-dark:#9333ea;--secondary-light:#c084fc;--success:#10b981;--success-dark:#059669;--success-light:#34d399;--danger:#ef4444;--danger-dark:#dc2626;--danger-light:#f87171;--warning:#f59e0b;--warning-dark:#d97706;--warning-light:#fbbf24;--info:#3b82f6;--info-dark:#2563eb;--info-light:#60a5fa;--bg-dark:#ffffff;--bg-darker:#f9fafb;--bg-primary:#ffffff;--bg-secondary:#f9fafb;--bg-tertiary:#f3f4f6;--bg-card:#ffffff;--bg-card-hover:#f9fafb;--bg-input:#f3f4f6;--bg-input-hover:#e5e7eb;--bg-modal:rgba(0,0,0,0.5);--bg-sidebar:#f9fafb;--bg-overlay:rgba(0,0,0,0.3);--text-primary:#111827;--text-secondary:#6b7280;--text-tertiary:#9ca3af;--text-muted:#d1d5db;--text-disabled:#e5e7eb;--border:#e5e7eb;--border-light:#f3f4f6;--border-focus:#6366f1;--border-error:#ef4444;--border-success:#10b981;--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1);--shadow-2xl:0 25px 50px -12px rgba(0,0,0,0.25);--shadow-inner:inset 0 2px 4px 0 rgba(0,0,0,0.06);--shadow-glow:0 0 20px rgba(99,102,241,0.2);--scrollbar-track:#f3f4f6;--scrollbar-thumb:#d1d5db;--scrollbar-thumb-hover:#9ca3af;--code-bg:#f3f4f6;--code-text:#374151;--code-comment:#059669;--code-string:#dc2626;--code-keyword:#2563eb;--gradient-primary:linear-gradient(135deg,#6366f1 0%,#a855f7 100%);--gradient-success:linear-gradient(135deg,#10b981 0%,#059669 100%);--gradient-danger:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);--gradient-warning:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);--gradient-light:linear-gradient(135deg,#ffffff 0%,#f3f4f6 100%);--gradient-background:linear-gradient(180deg,#ffffff 0%,#f9fafb 60%,#f3f4f6 100%);--gradient-card:linear-gradient(135deg,#ffffff 0%,#fafbfc 100%);--opacity-hover:0.95;--opacity-disabled:0.6;--opacity-overlay:0.5}[data-theme='cosmic-purple']{--primary:#b794f4;--primary-dark:#9f7aea;--primary-light:#d6bcfa;--primary-rgb:183,148,244;--bg-dark:#0f0818;--bg-primary:#1a0f3a;--bg-secondary:#251854;--bg-tertiary:#312168;--bg-card:#2d1b5f;--bg-input:#382470;--bg-hover:#432d7a;--text-primary:#f3e8ff;--text-secondary:#d6bcfa;--text-tertiary:#c8a8f0;--text-muted:#9f7aea;--text-inverse:#0f0818;--border:#432d7a;--border-light:#553c8b;--border-hover:#b794f4;--success:#68d391;--success-dark:#48bb78;--success-light:#9ae6b4;--warning:#fbb034;--warning-dark:#f49e0b;--warning-light:#fcd34d;--danger:#fc8181;--danger-dark:#f56565;--danger-light:#feb2b2;--info:#63b3ed;--info-dark:#4299e1;--info-light:#90cdf4;--shadow-sm:0 1px 3px rgba(0,0,0,0.4);--shadow-md:0 4px 6px rgba(0,0,0,0.5);--shadow-lg:0 10px 15px rgba(0,0,0,0.6);--shadow-xl:0 20px 25px rgba(0,0,0,0.7);--glow-primary:0 0 30px rgba(183,148,244,0.7);--glow-success:0 0 20px rgba(104,211,145,0.5);--glow-danger:0 0 20px rgba(252,129,129,0.5);--gradient-primary:linear-gradient(135deg,#9f7aea 0%,#d6bcfa 100%);--gradient-dark:linear-gradient(135deg,#1a0f3a 0%,#0f0818 100%);--gradient-card:linear-gradient(135deg,#2d1b5f 0%,#251854 100%)}.audio-controls{display:flex;flex-direction:column;gap:var(--space-lg)}.speed-control-section{background:var(--bg-input);border-radius:var(--radius-lg);padding:var(--space-lg)}.speed-buttons{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg)}.speed-decrease-buttons{display:flex;gap:var(--space-sm)}.speed-increase-buttons{display:flex;gap:var(--space-sm);margin-left:auto}.speed-buttons>.btn{min-width:60px}.speed-buttons>.btn:nth-child(1),.speed-buttons>.btn:nth-child(2),.speed-buttons>.btn:nth-child(3){margin-right:0}.speed-buttons>.btn:nth-child(4){margin-left:auto}.speed-buttons>.btn:nth-child(4),.speed-buttons>.btn:nth-child(5),.speed-buttons>.btn:nth-child(6){margin-left:var(--space-sm)}.speed-display{flex:1;text-align:center;font-size:var(--text-lg);font-weight:600;color:var(--primary)}.speed-control-grid{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-lg)}.speed-control-grid .speed-decrease-buttons{justify-self:start}.speed-control-grid .speed-increase-buttons{justify-self:end}#audioTab .metronome-widget,#audioTab .metronome-container,#audioTab .metronome-section,#audioTab .metronome-component,#audioTab [class*='metronome']:not(.btn){display:none !important}.audio-layout .metronome-widget,.audio-layout .metronome-container,.audio-layout .metronome-section,.audio-layout .metronome-component{display:none !important}.tab-pane[data-tab='audio'] .metronome-widget,.tab-pane[data-tab='audio'] .metronome-container,.tab-pane[data-tab='audio'] .metronome-section{display:none !important}#metronomeTab .metronome-widget,#metronomeTab .metronome-container,#metronomeTab .metronome-section,#metronomeTab .metronome-component{display:block !important}.tab-pane[data-tab='metronome'] .metronome-widget,.tab-pane[data-tab='metronome'] .metronome-container{display:block !important}.pitch-control-section{background:var(--bg-input);border-radius:var(--radius-lg);padding:var(--space-lg);margin-top:var(--space-lg)}.pitch-buttons{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg)}.pitch-decrease-buttons{display:flex;gap:var(--space-sm)}.pitch-increase-buttons{display:flex;gap:var(--space-sm);margin-left:auto}@media (max-width:768px){.speed-buttons,.pitch-buttons{flex-direction:column;gap:var(--space-md)}.speed-decrease-buttons,.speed-increase-buttons,.pitch-decrease-buttons,.pitch-increase-buttons{width:100%;justify-content:center;margin-left:0}.speed-display{order:-1;margin-bottom:var(--space-md)}.speed-buttons .btn,.pitch-buttons .btn{min-width:80px}}.audio-player-container{display:flex;flex-direction:column;gap:var(--space-lg)}.audio-player-controls{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-lg)}.transport-controls{display:flex;justify-content:center;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg)}.progress-section{margin-bottom:var(--space-lg)}.loop-controls{background:var(--bg-input);border-radius:var(--radius-lg);padding:var(--space-md);margin-top:var(--space-lg)}.loop-controls h4{margin:0 0 var(--space-sm) 0;font-size:var(--text-base)}.loop-content{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}.loop-main-controls{display:flex;align-items:center;gap:var(--space-md);flex:0 0 75%;justify-content:space-between}.loop-main-controls .btn-sm{padding:var(--space-xs) var(--space-sm);font-size:var(--text-sm);white-space:nowrap;flex:0 0 auto}.loop-info{color:var(--primary);font-weight:600;font-size:var(--text-sm);background:var(--bg-dark);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-md);border:1px solid var(--border);white-space:nowrap;flex:0 0 auto}.loop-enable{margin:0;font-size:var(--text-sm);display:flex;align-items:center;gap:var(--space-xs);white-space:nowrap;flex:0 0 auto}@media (max-width:768px){.loop-content{flex-direction:column;gap:var(--space-sm)}.loop-main-controls{flex:1 1 100%;width:100%;justify-content:center;gap:var(--space-sm)}.loop-enable{width:auto}}@media (max-width:1024px){.loop-main-controls{flex:0 0 70%;gap:var(--space-sm)}}.save-session-btn{display:flex;align-items:center;gap:var(--space-sm);margin:var(--space-lg) auto 0;padding:var(--space-md) var(--space-xl);background:var(--success);color:white;border:none;border-radius:var(--radius-lg);font-weight:600;cursor:pointer;transition:var(--transition-base)}.save-session-btn:hover{background:var(--success-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.flex-start{display:flex;align-items:center;justify-content:flex-start}.flex-col{display:flex;flex-direction:column}.flex-col-center{display:flex;flex-direction:column;align-items:center;justify-content:center}.gap-2{gap:var(--space-2px)}.gap-4{gap:var(--space-4px)}.gap-8{gap:var(--space-8px)}.gap-12{gap:var(--space-12px)}.gap-16{gap:var(--space-16px)}.gap-20{gap:var(--space-20px)}.gap-24{gap:var(--space-24px)}.gap-32{gap:var(--space-32px)}.transition-all{transition:var(--transition-all-base)}.transition-colors{transition:var(--transition-colors)}.transition-transform{transition:var(--transition-transform)}.transition-opacity{transition:var(--transition-opacity)}.transition-shadow{transition:var(--transition-shadow)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:var(--radius-full)}.absolute{position:absolute}.relative{position:relative}.fixed{position:fixed}.sticky{position:sticky}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.btn,button,.button,a.btn,.btn-primary,.btn-secondary,.btn-success,.btn-danger,.btn-warning{transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast),opacity var(--transition-fast) !important;will-change:transform,box-shadow}.btn:not(:hover),button:not(:hover){will-change:auto}input,textarea,select,.form-control,.form-input,.form-select{transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background-color var(--transition-fast) !important;will-change:auto}input:focus,textarea:focus,select:focus{will-change:border-color,box-shadow}.card,.practice-card,.session-card,.goal-card,.stats-card{transition:transform var(--transition-fast),box-shadow var(--transition-fast) !important;will-change:auto}.card:hover{will-change:transform,box-shadow}.modal,.modal-overlay,.modal-content{transition:opacity var(--transition-base),transform var(--transition-base) !important;will-change:opacity,transform}.modal.show{will-change:auto}.nav-link,.nav-item,.tab-nav-item,.nav-tab,.mode-tab{transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast) !important;will-change:auto}.nav-link:hover,.nav-item:hover,.tab-nav-item:hover{will-change:background-color,color}.audio-control,.play-button,.pause-button,.loop-button,.audio-slider{transition:background-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast),opacity var(--transition-fast) !important;will-change:auto}.audio-control:hover{will-change:transform,background-color}.metronome-control,.bpm-control,.tempo-tap-button{transition:background-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast) !important;will-change:auto}.progress-bar,.goal-progress-bar,.achievement-progress{transition:width var(--transition-base),background-color var(--transition-base) !important;will-change:width}.theme-option,.theme-selector button{transition:background-color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast) !important;will-change:auto}.timer-display,.metronome-visual,.waveform-progress,.loading-spinner{transform:translateZ(0);will-change:transform,opacity}.fade-in,.fade-out,.animate-fadeIn,.animate-fadeOut{will-change:opacity}.slide-in,.slide-out,.animate-slideIn,.animate-slideOut{will-change:transform,opacity}.draggable,.movable,.sortable-item{will-change:transform}.scroll-container,.overflow-auto,.overflow-scroll{-webkit-overflow-scrolling:touch;will-change:scroll-position}.timer-display,.audio-time-display,.metronome-bpm-display,.progress-value{contain:layout style paint}.modal,.dropdown-menu,.tooltip,.popover{transform:translateZ(0);backface-visibility:hidden}@media (prefers-reduced-motion:no-preference){.animate-complex{animation:complexAnimation 1s ease}}@media (max-width:768px){.card,.modal,.dropdown{box-shadow:0 2px 4px rgba(0,0,0,0.1) !important}@media (hover:none){.btn:hover,.card:hover,.nav-link:hover{transform:none !important;will-change:auto !important}}}.gpu-accelerated{transform:translateZ(0);backface-visibility:hidden;perspective:1000px}.no-transition{transition:none !important}.transition-opacity{transition:opacity var(--transition-fast) !important}.transition-transform{transition:transform var(--transition-fast) !important}.transition-colors{transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast) !important}.transition-all{transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base),transform var(--transition-base),opacity var(--transition-base) !important}.transition-all-fast{transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast),opacity var(--transition-fast) !important}.transition-all-slow{transition:background-color var(--transition-slow),border-color var(--transition-slow),color var(--transition-slow),transform var(--transition-slow),opacity var(--transition-slow) !important}.debug-performance [style*="transition:all"]{outline:2px solid red !important}.debug-performance *:not([will-change="auto"]){outline:1px solid orange !important}.history-list{max-height:none !important;overflow-y:visible !important;height:auto !important}.tab-content{height:auto !important;overflow:visible !important;display:block !important}#audioTab .audio-layout,#metronomeTab .metronome-layout{height:auto !important;overflow-y:visible !important;overflow-x:visible !important}#metronomeTab .metronome-wrapper{overflow-y:visible !important}@media (min-width:769px){.modal-body{overflow-y:visible !important;max-height:none !important}.popup-content{overflow-y:visible !important}}.practice-layout-simple,.practice-main-content,.practice-container-wrapper{height:auto !important;min-height:auto !important;overflow:visible !important}.main-content-new,.main-content,.tab-pane,.tab-content-container{height:auto !important;min-height:auto !important;max-height:none !important;overflow:visible !important}.recent-sessions-widget{max-height:none !important;overflow-y:visible !important}.history-content,.stats-content,.goals-content,.repertoire-content,.settings-content{max-height:none !important;overflow:visible !important}.dashboard-widget{height:auto !important;min-height:auto !important;max-height:none !important;overflow:visible !important}body{padding-bottom:0 !important}.tab-pane>*:last-child{margin-bottom:calc(48px+2rem) !important}@media (min-width:769px){.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);max-height:90vh;overflow-y:auto;height:auto;width:auto}.modal-content{height:auto;max-height:90vh;overflow-y:auto}}@media (max-width:768px){.modal{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100vh;overflow:visible}.modal-content{height:100vh;overflow:visible;display:flex;flex-direction:column}.modal-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}}@media screen and (max-width:430px){html,body{position:relative !important;width:100% !important;height:auto !important;min-height:100vh !important;overflow-x:hidden !important;overflow-y:auto !important;overscroll-behavior:none}#app{position:relative !important;display:flex !important;flex-direction:column !important;min-height:100vh !important;width:100% !important;overflow:visible !important}.app-header{position:sticky !important;top:0 !important;left:0 !important;right:0 !important;width:100% !important;height:auto !important;min-height:calc(var(--mobile-header-height,60px)+var(--iphone-safe-top,0px)) !important;padding-top:var(--iphone-safe-top,0px) !important;z-index:1000 !important;background:var(--bg-primary) !important;backdrop-filter:blur(20px) !important;-webkit-backdrop-filter:blur(20px) !important;border-bottom:0.5px solid rgba(255,255,255,0.1) !important}.main-content,.main-content-new{position:relative !important;flex:1 !important;width:100% !important;padding:1rem !important;padding-top:1rem !important;padding-bottom:calc(var(--mobile-nav-height,56px)+var(--iphone-safe-bottom,34px)+2rem) !important;overflow:visible !important;-webkit-overflow-scrolling:touch !important;min-height:auto !important;height:auto !important}.top-navigation{position:fixed !important;bottom:0 !important;left:0 !important;right:0 !important;top:auto !important;width:100% !important;height:calc(var(--mobile-nav-height,56px)+var(--iphone-safe-bottom,34px)) !important;padding-bottom:var(--iphone-safe-bottom,34px) !important;background:rgba(var(--bg-primary-rgb,15,15,15),0.95) !important;backdrop-filter:blur(20px) saturate(180%) !important;-webkit-backdrop-filter:blur(20px) saturate(180%) !important;border-top:0.5px solid rgba(255,255,255,0.1) !important;box-shadow:0 -2px 10px rgba(0,0,0,0.1) !important;z-index:999 !important}.tab-nav{display:flex !important;flex-direction:row !important;justify-content:space-around !important;align-items:center !important;width:100% !important;height:100% !important;padding:0 !important;margin:0 !important;gap:0 !important}.tab-nav-item{flex:1 !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:4px !important;padding:8px 4px !important;margin:0 !important;min-height:44px !important;background:transparent !important;border:none !important;border-radius:0 !important;color:var(--text-secondary) !important;transition:color 0.2s ease !important}.tab-nav-item.active{color:var(--primary) !important}.tab-nav-item .icon{font-size:20px !important;line-height:1 !important}.tab-nav-item span:not(.icon){font-size:10px !important;font-weight:500 !important}}@media screen and (max-width:430px){.tab-pane{display:none;width:100% !important;max-width:100% !important;margin:0 !important;padding:1rem !important;padding-bottom:2rem !important;overflow:visible !important;height:auto !important}.tab-pane.active{display:block !important}.tab-content,.tab-content-container{width:100% !important;height:auto !important;overflow:visible !important;padding:0 !important}}@media screen and (max-width:430px){.modal-overlay{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:100% !important;height:100vh !important;background:rgba(0,0,0,0.75) !important;z-index:10000 !important;display:flex !important;align-items:flex-end !important;overflow:hidden !important}.modal,.modal-content{position:relative !important;width:100% !important;max-width:100% !important;max-height:calc(100vh - var(--iphone-safe-top,0px) - 20px) !important;margin:0 !important;border-radius:24px 24px 0 0 !important;padding-bottom:var(--iphone-safe-bottom,34px) !important;background:var(--bg-primary) !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important}.modal-body{padding:16px !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important}}@media screen and (max-width:430px){button,a,.btn,input[type="button"],input[type="submit"],.clickable{min-height:44px !important;min-width:44px !important}html{-webkit-text-size-adjust:100% !important;-moz-text-size-adjust:100% !important;-ms-text-size-adjust:100% !important;text-size-adjust:100% !important}input,textarea,select{font-size:16px !important;-webkit-appearance:none !important;appearance:none !important}*{-webkit-tap-highlight-color:rgba(99,102,241,0.2) !important}}@media screen and (max-width:430px){.dashboard-widget,.card,.session-card,.goal-card{width:100% !important;margin-bottom:16px !important;padding:16px !important;border-radius:16px !important;overflow:visible !important}.timer-display{font-size:clamp(48px,12vw,64px) !important;padding:24px 16px !important;background:var(--bg-secondary) !important;border-radius:16px !important;margin:16px 0 !important}.timer-controls{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:12px !important;padding:0 !important;margin-bottom:16px !important}.btn,button:not(.tab-nav-item){min-height:48px !important;border-radius:12px !important;font-size:16px !important;font-weight:600 !important;padding:12px 20px !important}}@media screen and (max-width:430px){input[type="text"],input[type="number"],input[type="email"],input[type="password"],textarea,select{width:100% !important;min-height:48px !important;padding:12px 16px !important;font-size:16px !important;border-radius:12px !important;border:1px solid var(--border) !important;background:var(--bg-secondary) !important;color:var(--text-primary) !important}textarea{min-height:100px !important;resize:vertical !important}select{-webkit-appearance:none !important;appearance:none !important;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 16px center !important;padding-right:40px !important}}@media screen and (max-width:430px){.audio-player-container,.audio-player-wrapper{width:100% !important;padding:16px !important;overflow:visible !important}.waveform-container{height:80px !important;margin:16px 0 !important;border-radius:12px !important;overflow:hidden !important;background:var(--bg-secondary) !important}.audio-controls{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:8px !important;margin:16px 0 !important}}@media screen and (max-width:430px){.metronome-container,.metronome-wrapper{width:100% !important;padding:16px !important;overflow:visible !important}.bpm-display{font-size:clamp(36px,10vw,48px) !important;padding:20px !important;background:var(--bg-secondary) !important;border-radius:16px !important;margin-bottom:16px !important;text-align:center !important}.tempo-slider{width:100% !important;height:48px !important}}@media screen and (max-width:430px){.stats-grid,.stats-panel{grid-template-columns:1fr !important;gap:16px !important}.stat-card{padding:16px !important;border-radius:12px !important}.history-list{max-height:none !important;overflow-y:visible !important}.history-item,.session-item{margin-bottom:12px !important;padding:16px !important;border-radius:12px !important}}@media screen and (max-width:430px){.goals-layout{grid-template-columns:1fr !important;gap:16px !important}.goal-card{padding:16px !important;border-radius:12px !important}.achievement-grid{grid-template-columns:repeat(2,1fr) !important;gap:12px !important}}@media screen and (max-width:932px) and (orientation:landscape){.app-header{min-height:50px !important;padding-top:0 !important}.header-tab-name{font-size:1.125rem !important}.main-content{padding-top:0.75rem !important}.timer-display{font-size:clamp(36px,8vw,48px) !important;padding:16px !important}}@media screen and (max-width:374px){.header-tab-name{font-size:1.125rem !important}.tab-nav-item span:not(.icon){font-size:9px !important}.timer-display{font-size:clamp(36px,10vw,48px) !important}.btn{font-size:14px !important;padding:10px 16px !important}}@media screen and (max-width:430px){.main-content,.tab-pane,.modal-body{transform:translateZ(0) !important;will-change:scroll-position !important}*{-webkit-backface-visibility:hidden !important;backface-visibility:hidden !important}@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}}@media screen and (max-width:430px) and (prefers-color-scheme:dark){:root{--bg-primary-rgb:15,15,15}.app-header,.top-navigation{background:rgba(15,15,15,0.95) !important}}@media screen and (max-width:430px){:focus-visible{outline:3px solid var(--primary) !important;outline-offset:2px !important}@media (prefers-contrast:high){.btn,.card,input,select,textarea{border:2px solid currentColor !important}}}.modal-content{position:relative}.modal-content .close-btn,#goalModal .close-btn,#songModal .close-btn{position:absolute !important;top:1rem !important;right:1rem !important;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;background:transparent;border:none;font-size:1.5rem;line-height:1;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);transition:background-color var(--transition-base),color var(--transition-base);z-index:10}.modal-content .close-btn:hover,#goalModal .close-btn:hover,#songModal .close-btn:hover{background-color:var(--bg-hover);color:var(--text-primary)}.modal-content h3,#goalModal h3,#songModal h3{padding-right:3rem}