#app-header{display:flex;align-items:center;gap:12px;padding:12px 28px;background:var(--color-surface);border-bottom:1px solid var(--color-glass-border);position:relative;z-index:10}#app-header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,var(--color-primary) 30%,var(--color-primary) 70%,transparent 100%);opacity:0.3}#app-header h1{font-family:var(--font-display);font-size:1.6rem;letter-spacing:0.06em;color:var(--color-text);line-height:1;flex-shrink:0}#app-header h1 span{color:var(--color-primary)}.header-slogan{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'Bebas Neue',sans-serif;font-size:1.15rem;font-weight:400;letter-spacing:0.18em;color:var(--color-primary);margin:0;opacity:0.6;white-space:nowrap;pointer-events:none;text-transform:uppercase}.badge{font-family:var(--font-display);font-size:0.65rem;letter-spacing:0.12em;padding:4px 14px;border-radius:var(--radius-pill);background:var(--color-glass);border:1px solid var(--color-glass-border);color:var(--color-primary);text-transform:uppercase}#lang-select{font-size:0.7rem;padding:2px 6px;border-radius:var(--radius-sm);border:1px solid var(--color-glass-border);background:var(--color-glass);color:var(--color-text-muted);cursor:pointer;font-family:var(--font-sans);max-width:60px}.header-right{margin-left:auto;display:flex;align-items:center;gap:8px}#theme-toggle{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);border:1px solid var(--color-glass-border);background:var(--color-glass);color:var(--color-text-muted);transition:all var(--transition-fast)}#theme-toggle:hover{color:var(--color-primary);border-color:var(--color-primary);background:var(--color-amber-glow)}.theme-icon-sun,.theme-icon-moon{width:18px;height:18px}.theme-icon-sun{display:none}.theme-icon-moon{display:block}[data-theme="light"] .theme-icon-sun{display:block}[data-theme="light"] .theme-icon-moon{display:none}#app-main{display:flex;flex-direction:column;max-width:1200px;margin:0 auto;padding:20px 28px;gap:20px;position:relative;z-index:1}#right-area{flex:1;display:flex;flex-direction:column;gap:16px}#bottom-panels{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:16px}#bottom-panels .panel{min-height:200px;max-height:480px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--color-border) transparent;animation:panelFadeIn 0.5s cubic-bezier(0.16,1,0.3,1) both}#bottom-panels .panel:nth-child(1){animation-delay:0.1s}#bottom-panels .panel:nth-child(2){animation-delay:0.2s}#bottom-panels .panel:nth-child(3){animation-delay:0.3s}@keyframes panelFadeIn{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}#bottom-panels .panel::-webkit-scrollbar{width:4px}#bottom-panels .panel::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:2px}#bottom-panels #style-selector{overflow:hidden}.input-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}.input-row label{width:60px;font-size:0.7rem;font-weight:600;color:var(--color-text-muted);flex-shrink:0;text-transform:uppercase;letter-spacing:0.06em}.input-row input,.input-row select{flex:1;min-height:34px}#series{font-weight:600;font-size:0.95rem}.auto-color-row{margin-top:4px;gap:8px}.auto-color-row input[type="checkbox"]{width:16px;height:16px;accent-color:var(--color-primary);flex-shrink:0}.auto-color-row label{width:auto;font-size:0.75rem;cursor:pointer}.stepper-row{display:flex;align-items:center;gap:4px;margin-bottom:6px}.stepper-row label{width:60px;font-size:0.7rem;font-weight:600;color:var(--color-text-muted);flex-shrink:0;text-transform:uppercase;letter-spacing:0.06em}.score-stepper{display:flex;align-items:center;gap:0;background:var(--input-bg);border:1px solid var(--color-glass-border);border-radius:var(--radius-sm);flex:1;min-height:34px}.score-stepper button{width:36px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);transition:color var(--transition-fast),background var(--transition-fast);font-size:1rem;font-weight:600}.score-stepper button:hover{color:var(--color-primary);background:var(--color-amber-glow)}.score-stepper button:active{transform:scale(0.9)}.score-stepper input{width:36px;text-align:center;border:none;background:transparent;font-family:var(--font-display);font-size:1.2rem;letter-spacing:0.04em;padding:0;min-height:34px}.team-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}.team-row label{width:60px;font-size:0.7rem;font-weight:600;color:var(--color-text-muted);flex-shrink:0;text-transform:uppercase;letter-spacing:0.06em}.team-flag-thumb{width:24px;height:auto;border-radius:2px;box-shadow:0 1px 4px rgba(0,0,0,0.3);flex-shrink:0;opacity:0;transition:opacity var(--transition-normal)}.team-flag-thumb.loaded{opacity:1}.team-row input,.team-row select{flex:1;min-height:34px}#team-a-custom,#team-b-custom{flex:1;min-height:34px;margin-top:2px}#style-selector .template-carousel{display:flex;flex-wrap:wrap;gap:8px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--color-border) transparent;padding:4px 0;-webkit-overflow-scrolling:touch}#style-selector .template-carousel::-webkit-scrollbar{width:4px}#style-selector .template-carousel::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:2px}.template-card{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border:2px solid var(--color-glass-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);background:var(--color-glass);position:relative;width:96px}.template-card:hover{border-color:var(--color-text-muted);background:var(--color-surface-hover);transform:translateY(-2px)}.template-card.selected{border-color:var(--color-primary);background:var(--color-amber-glow);box-shadow:0 0 0 1px var(--color-primary),0 4px 16px var(--shadow-dot);transform:translateY(-2px) scale(1.02)}.template-card.selected::after{content:'';position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 6px var(--color-primary)}.template-card span{font-family:var(--font-display);font-size:0.78rem;letter-spacing:0.06em;color:var(--color-text-muted);text-transform:uppercase;white-space:nowrap}.template-card.selected span{color:var(--color-text)}.template-thumb-wrap{width:84px;height:56px;border-radius:var(--radius-sm);overflow:hidden;background:var(--color-bg);border:1px solid var(--color-glass-border)}.template-mini-preview{width:600px;height:400px;transform:scale(0.14);transform-origin:top left;pointer-events:none}.category-tabs{display:flex;gap:4px;margin-bottom:10px}.category-tab{font-family:var(--font-display);font-size:0.78rem;letter-spacing:0.08em;padding:4px 12px;border-radius:var(--radius-pill);border:1px solid var(--color-glass-border);background:var(--color-glass);color:var(--color-text-muted);text-transform:uppercase;transition:all var(--transition-fast)}.category-tab:hover{color:var(--color-text);border-color:var(--color-text-muted)}.category-tab.active{color:var(--color-primary);border-color:var(--color-primary);background:var(--color-amber-glow)}#customizer-controls{display:flex;flex-direction:column;gap:2px}.control-group{margin-bottom:2px}.control-group summary{font-family:var(--font-display);font-size:0.85rem;letter-spacing:0.08em;color:var(--color-text-muted);cursor:pointer;padding:6px 0;list-style:none;display:flex;align-items:center;gap:6px;text-transform:uppercase}.control-group summary::before{content:'▸';font-size:0.6rem;transition:transform var(--transition-fast)}.control-group[open] summary::before{transform:rotate(90deg)}.control-row{display:flex;align-items:center;gap:10px;padding:4px 0 4px 12px}.control-row label{font-size:0.7rem;font-weight:500;color:var(--color-text-muted);width:72px;flex-shrink:0}.control-row input[type="color"]{width:28px;height:28px}.control-row input[type="range"]{flex:1}.control-row select{flex:1;font-size:0.8rem;padding:5px 8px}.control-row .range-value{font-size:0.7rem;color:var(--color-text-muted);width:32px;text-align:right;flex-shrink:0;font-family:var(--font-mono)}.message-group{margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--color-glass-border)}.message-group .control-row input[type="text"]{flex:1;font-size:0.8rem;padding:5px 8px}.stepper-control-row .score-stepper{display:flex;align-items:center;gap:4px}.stepper-control-row .score-stepper button{width:26px;height:26px;border-radius:var(--radius-sm);background:var(--color-glass);border:1px solid var(--color-glass-border);color:var(--color-text-muted);font-size:0.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.stepper-control-row .score-stepper button:hover{background:var(--color-amber-glow);border-color:var(--color-primary);color:var(--color-primary)}.stepper-control-row .score-stepper input{width:40px;text-align:center;font-size:0.8rem;padding:3px;background:var(--color-surface);border:1px solid var(--color-glass-border);border-radius:var(--radius-sm);color:var(--color-text);-moz-appearance:textfield}.stepper-control-row .score-stepper input::-webkit-inner-spin-button,.stepper-control-row .score-stepper input::-webkit-outer-spin-button{-webkit-appearance:none}#app-footer{text-align:center;padding:16px;color:var(--color-text-muted);font-family:var(--font-display);font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;border-top:1px solid var(--color-glass-border);position:relative;z-index:1}@media (max-width:899px){#app-main{padding:12px 16px;gap:12px}#bottom-panels{grid-template-columns:1fr 1fr}#style-selector{grid-column:1 / -1}}@media (max-width:599px){#bottom-panels{grid-template-columns:1fr}#app-header{padding:12px 16px}#app-header h1{font-size:1.2rem}.header-slogan{display:none}.template-thumb-wrap{width:68px;height:45px}.template-mini-preview{transform:scale(0.113)}}