.container{max-width:1200px;margin:0 auto;padding:25px 20px}header{text-align:center;margin-bottom:20px}header h1{font-size:48px;font-weight:900;background:linear-gradient(135deg,#7c3aed,#3b82f6,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:3px;margin-bottom:4px}header p{font-size:12px;color:#c8c8ff80;letter-spacing:2px;text-transform:uppercase}.device-badge{display:inline-block;font-size:10px;padding:3px 10px;border-radius:10px;margin-top:4px;letter-spacing:2px;text-transform:uppercase}.device-desktop{background:#3b82f626;color:#60a5fa;border:1px solid rgba(59,130,246,.3)}.device-mobile{background:#10b98126;color:#34d399;border:1px solid rgba(16,185,129,.3)}.main-panel{display:flex;gap:20px;align-items:flex-start}.input-section,.preview-section{flex:1;min-width:0}textarea{width:100%;height:100px;background:#12122a;border:2px solid rgba(100,140,255,.2);border-radius:10px;color:#e0e8ff;font-size:14px;padding:12px;resize:vertical;outline:none;transition:border-color .3s;font-family:inherit}textarea:focus{border-color:#648cff99}textarea::placeholder{color:#b4bedc4d}.fps-row{display:flex;align-items:center;gap:10px;margin-top:10px}.fps-row label{font-size:11px;color:#c8d2f099;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}.fps-row input[type=range]{flex:1;accent-color:#7c3aed}.fps-row .fps-value{font-size:12px;font-weight:700;color:#a78bfa;min-width:45px;text-align:center}.fps-label{font-size:10px;color:#c8d2f04d}.btn-row{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}button{padding:9px 14px;border-radius:8px;border:none;font-size:11px;font-weight:700;cursor:pointer;letter-spacing:1px;text-transform:uppercase;transition:all .2s;white-space:nowrap;font-family:inherit}.btn-generate{background:linear-gradient(135deg,#7c3aed,#3b82f6);color:#fff}.btn-generate:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 18px #6450ff59}.btn-generate:disabled{opacity:.5;cursor:not-allowed}.btn-record{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.btn-record:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 18px #ef444459}.btn-record.recording{background:linear-gradient(135deg,#10b981,#059669)}.btn-render{background:#648cff1a;border:2px solid rgba(100,140,255,.3);color:#80a0ff}.btn-render:hover:not(:disabled){background:#648cff33;transform:translateY(-1px)}.btn-new{background:#14c8781a;border:2px solid rgba(20,200,120,.3);color:#40ffa0}.btn-new:hover:not(:disabled){background:#14c87833;transform:translateY(-1px)}.btn-gallery{background:linear-gradient(135deg,#8b5cf6,#06b6d4);color:#fff}.btn-gallery:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 18px #8b5cf64d}.preview-box{width:100%;aspect-ratio:16/9;min-height:200px;background:#08081a;border:2px solid rgba(100,140,255,.12);border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.preview-placeholder{text-align:center;color:#b4bedc40}.preview-placeholder .icon{font-size:50px;margin-bottom:6px}.preview-placeholder p{font-size:12px;letter-spacing:2px}.status-bar{margin-top:10px;text-align:center;font-size:11px;color:#c8d2f080;letter-spacing:1px}.status-bar .spinner{display:inline-block;width:11px;height:11px;border:2px solid rgba(100,140,255,.2);border-top-color:#7c3aed;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:5px}@keyframes spin{to{transform:rotate(360deg)}}.status-error{color:#ff6060}.status-success{color:#40ffa0}.recording-indicator{display:inline-block;width:9px;height:9px;background:#ef4444;border-radius:50%;animation:pulse .8s infinite;margin-right:5px;vertical-align:middle}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.examples{margin-top:14px}.examples p{font-size:10px;color:#b4bedc4d;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}.example-tags{display:flex;flex-wrap:wrap;gap:5px}.example-tag{padding:4px 10px;background:#648cff0f;border:1px solid rgba(100,140,255,.12);border-radius:14px;font-size:10px;color:#c8d2f080;cursor:pointer;transition:all .2s}.example-tag:hover{background:#648cff26;border-color:#648cff4d;color:#e0e8ff}.gallery-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;z-index:1000;display:flex;align-items:center;justify-content:center}.gallery-panel{background:#0d0d28;border:2px solid rgba(100,140,255,.2);border-radius:14px;width:95%;max-width:1100px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden}.gallery-header{padding:16px 20px;border-bottom:1px solid rgba(100,140,255,.15);display:flex;align-items:center;justify-content:space-between}.gallery-header h2{font-size:18px;font-weight:800;letter-spacing:1px;background:linear-gradient(135deg,#7c3aed,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.gallery-close{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#e0e8ff;font-size:20px;width:34px;height:34px;border-radius:8px;cursor:pointer}.gallery-close:hover{background:#ef444433;border-color:#ef444466}.gallery-stats{padding:8px 20px;display:flex;gap:20px;font-size:10px;color:#b4bedc66;letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid rgba(100,140,255,.08)}.gallery-stats span{color:#a78bfa;font-weight:700}.gallery-body{flex:1;overflow-y:auto;padding:16px 20px}.gallery-loading{text-align:center;padding:40px;color:#b4c8f04d}.gallery-section{margin-bottom:20px}.gallery-section h3{font-size:13px;font-weight:700;color:#b4c8f080;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(100,140,255,.08)}.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}.template-card{background:#648cff0a;border:1px solid rgba(100,140,255,.1);border-radius:10px;overflow:hidden;transition:.2s;cursor:pointer}.template-card:hover{background:#648cff1a;border-color:#648cff4d;transform:translateY(-1px)}.card-info{padding:12px 14px}.card-name{font-size:14px;font-weight:700;color:#e0e8ff;margin-bottom:4px}.card-desc{font-size:11px;color:#b4c8f073;line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-tags{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:4px}.card-tag{font-size:9px;padding:2px 7px;background:#7c3aed26;border-radius:8px;color:#a78bfa}.card-subs{font-size:9px;color:#b4c8f04d}.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}.category-card{background:#14c87808;border:1px solid rgba(20,200,120,.1);border-radius:8px;padding:10px 12px;cursor:pointer;transition:.2s}.category-card:hover{background:#14c87814;border-color:#14c87840}.cat-icon{font-size:24px;margin-bottom:2px}.cat-name{font-size:13px;font-weight:700;color:#e0e8ff}.cat-count{font-size:9px;color:#b4c8f059}.file-list{display:flex;flex-wrap:wrap;gap:5px}.file-tag{font-size:10px;padding:4px 8px;background:#648cff0f;border-radius:6px;color:#b4c8f080;font-family:monospace}@media (max-width: 768px){.main-panel{flex-direction:column}.preview-section{flex:1 1 auto;min-height:320px;width:100%;height:auto}.preview-box{min-height:320px;width:100%;max-width:100vw;aspect-ratio:unset;display:block}header h1{font-size:32px}.btn-row{flex-direction:column}button{width:100%!important}.template-grid,.category-grid{grid-template-columns:1fr}}