:root{--bg: #0f172a;--surface: #1e293b;--surface-2: #334155;--text: #f8fafc;--text-muted: #94a3b8;--accent: #38bdf8;--accent-2: #f472b6;--success: #22c55e;--danger: #ef4444;--warning: #f59e0b;--radius: 12px;--shadow: 0 10px 30px rgba(0,0,0,0.25);--max-width: 1500px;}*{box-sizing: border-box;}body{margin: 0;font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;background: var(--bg);color: var(--text);line-height: 1.6;}header{border-bottom: 1px solid var(--surface-2);background: rgba(15,23,42,0.95);backdrop-filter: blur(10px);position: sticky;top: 0;z-index: 50;}.header-inner{max-width: var(--max-width);margin: 0 auto;padding: 1rem 1.5rem;display: flex;align-items: center;justify-content: space-between;gap: 1rem;flex-wrap: wrap;}.brand h1{margin: 0;font-size: 1.25rem;letter-spacing: -0.02em;}.brand span{color: var(--text-muted);font-size: 0.8rem;}.header-actions{display: flex;gap: 0.75rem;align-items: center;flex-wrap: wrap;}.btn{border: none;padding: 0.6rem 1rem;border-radius: 10px;font-size: 0.9rem;font-weight: 600;cursor: pointer;transition: opacity 0.2s, transform 0.1s;display: inline-flex;align-items: center;gap: 0.4rem;}.btn:active{transform: scale(0.98);}.btn-primary{background: linear-gradient(135deg, var(--accent), var(--accent-2));color: #0f172a;}.btn-secondary{background: var(--surface-2);color: var(--text);}.btn-danger{background: rgba(239,68,68,0.15);color: var(--danger);}.btn-sm{padding: 0.4rem 0.7rem;font-size: 0.8rem;}.btn:hover{opacity: 0.9;}.lang-toggle, .mode-toggle{display: flex;gap: 0.25rem;background: var(--surface);padding: 0.3rem;border-radius: 100px;}.lang-toggle button, .mode-toggle button{border: none;background: transparent;color: var(--text-muted);padding: 0.45rem 0.9rem;border-radius: 100px;cursor: pointer;font-size: 0.8rem;font-weight: 600;}.lang-toggle button.active, .mode-toggle button.active{background: var(--accent);color: #0f172a;}main{max-width: var(--max-width);margin: 0 auto;padding: 1.5rem;display: grid;grid-template-columns: 1fr 460px;gap: 1.5rem;align-items: start;}@media (max-width: 1150px){main{grid-template-columns: 1fr;}}.panel{background: var(--surface);border-radius: var(--radius);padding: 1.5rem;box-shadow: var(--shadow);border: 1px solid var(--surface-2);}.panel h2{margin: 0 0 1rem;font-size: 0.95rem;text-transform: uppercase;letter-spacing: 0.08em;color: var(--text-muted);}.grid-2{display: grid;grid-template-columns: 1fr 1fr;gap: 1rem;}.grid-3{display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 1rem;}@media (max-width: 700px){.grid-2, .grid-3{grid-template-columns: 1fr;}.header-inner{flex-direction: column;align-items: stretch;}.header-actions{justify-content: flex-start;}}.field{display: flex;flex-direction: column;gap: 0.35rem;margin-bottom: 1rem;}label{font-size: 0.75rem;font-weight: 600;color: var(--text-muted);text-transform: uppercase;letter-spacing: 0.03em;display: flex;align-items: center;gap: 0.3rem;}.required{color: var(--danger);}input, select, textarea{background: var(--bg);border: 1px solid var(--surface-2);border-radius: 8px;padding: 0.65rem 0.8rem;color: var(--text);font-size: 0.95rem;outline: none;transition: border-color 0.2s, box-shadow 0.2s;}input:focus, select:focus, textarea:focus{border-color: var(--accent);box-shadow: 0 0 0 3px rgba(56,189,248,0.15);}input.error, select.error, textarea.error{border-color: var(--danger);}input.valid, select.valid, textarea.valid{border-color: var(--success);}textarea{min-height: 80px;resize: vertical;}.error-msg{color: var(--danger);font-size: 0.75rem;display: none;}.error-msg.show{display: block;}.counter{font-size: 0.75rem;color: var(--text-muted);text-align: right;}.counter.over{color: var(--danger);font-weight: 700;}.color-row{display: flex;gap: 0.75rem;align-items: center;}input[type="color"]{width: 48px;height: 40px;padding: 0.2rem;border-radius: 8px;cursor: pointer;}.hint{font-size: 0.75rem;color: var(--text-muted);}.section-group{border-top: 1px solid var(--surface-2);padding-top: 1.25rem;margin-top: 1.25rem;}.section-title{font-size: 1rem;font-weight: 700;margin-bottom: 1rem;display: flex;align-items: center;gap: 0.5rem;}.badge{background: var(--surface-2);color: var(--text-muted);font-size: 0.65rem;padding: 0.2rem 0.5rem;border-radius: 100px;font-weight: 700;}.section-list{display: flex;flex-direction: column;gap: 0.5rem;}.section-item{display: flex;align-items: center;gap: 0.75rem;padding: 0.6rem 0.8rem;background: var(--bg);border: 1px solid var(--surface-2);border-radius: 8px;cursor: move;transition: background 0.15s;}.section-item:hover{background: rgba(56,189,248,0.05);}.section-item.dragging{opacity: 0.5;}.section-item input[type="checkbox"]{width: 18px;height: 18px;accent-color: var(--accent);cursor: pointer;}.section-item span{flex: 1;font-weight: 500;}.drag-handle{color: var(--text-muted);cursor: grab;font-size: 1rem;}.asset-toolbar{display: flex;gap: 0.75rem;flex-wrap: wrap;align-items: center;margin-bottom: 1rem;}.asset-tabs{display: flex;gap: 0.5rem;flex-wrap: wrap;}.asset-tab{border: 1px solid var(--surface-2);background: var(--bg);color: var(--text-muted);padding: 0.4rem 0.8rem;border-radius: 100px;cursor: pointer;font-size: 0.8rem;font-weight: 500;}.asset-tab.active{background: var(--accent);color: #0f172a;border-color: var(--accent);}.asset-search{flex: 1;min-width: 180px;}.asset-filter{background: var(--bg);border: 1px solid var(--surface-2);color: var(--text);padding: 0.5rem 0.7rem;border-radius: 8px;font-size: 0.85rem;}.asset-grid{display: grid;grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));gap: 0.75rem;max-height: 420px;overflow-y: auto;padding-right: 0.5rem;}.asset-card{position: relative;background: var(--bg);border: 2px solid var(--surface-2);border-radius: 10px;overflow: hidden;cursor: pointer;transition: transform 0.15s, border-color 0.15s;}.asset-card:hover{transform: translateY(-2px);}.asset-card.selected{border-color: var(--accent);}.asset-card.hero{border-color: var(--accent-2);box-shadow: 0 0 0 2px var(--accent-2);}.asset-card img{width: 100%;height: 100px;object-fit: cover;display: block;}.asset-info{padding: 0.5rem;font-size: 0.72rem;}.asset-name{font-weight: 600;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;line-height: 1.3;}.asset-price{color: var(--accent);font-weight: 700;margin-top: 0.25rem;}.asset-check, .asset-hero-badge{position: absolute;top: 6px;width: 22px;height: 22px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 0.7rem;font-weight: 700;opacity: 0;transition: opacity 0.15s;}.asset-check{right: 6px;background: var(--accent);color: #0f172a;}.asset-hero-badge{left: 6px;background: var(--accent-2);color: white;}.asset-card.selected .asset-check{opacity: 1;}.asset-card.hero .asset-hero-badge{opacity: 1;}.hero-actions{display: flex;gap: 0.5rem;margin-bottom: 0.75rem;}.selected-summary{font-size: 0.85rem;color: var(--text-muted);margin-bottom: 0.75rem;display: flex;gap: 1rem;flex-wrap: wrap;}.selected-summary .warning{color: var(--warning);font-weight: 600;}.output-tabs{display: flex;gap: 0.5rem;margin-bottom: 1rem;}.output-tab{flex: 1;border: 1px solid var(--surface-2);background: var(--bg);color: var(--text-muted);padding: 0.6rem;border-radius: 8px;cursor: pointer;font-size: 0.85rem;font-weight: 500;}.output-tab.active{background: var(--surface-2);color: var(--text);}pre{background: var(--bg);border: 1px solid var(--surface-2);border-radius: 10px;padding: 1rem;overflow: auto;max-height: 55vh;font-size: 0.8rem;line-height: 1.5;white-space: pre-wrap;word-break: break-word;}.validation-status{margin-bottom: 1rem;padding: 0.75rem;border-radius: 8px;font-size: 0.85rem;display: none;}.validation-status.error{display: block;background: rgba(239,68,68,0.1);color: var(--danger);border: 1px solid rgba(239,68,68,0.3);}.validation-status.success{display: block;background: rgba(34,197,94,0.1);color: var(--success);border: 1px solid rgba(34,197,94,0.3);}.preset-row{display: flex;gap: 0.5rem;align-items: center;flex-wrap: wrap;}.preset-select{background: var(--bg);border: 1px solid var(--surface-2);color: var(--text);padding: 0.5rem 0.8rem;border-radius: 8px;font-size: 0.85rem;min-width: 200px;}.hero-preview{margin-top: 0.75rem;padding: 0.75rem;background: var(--bg);border: 1px solid var(--surface-2);border-radius: 8px;display: none;align-items: center;gap: 0.75rem;}.hero-preview.show{display: flex;}.hero-preview img{width: 80px;height: 60px;object-fit: cover;border-radius: 6px;}.toast{position: fixed;bottom: 1.5rem;right: 1.5rem;background: var(--success);color: white;padding: 0.75rem 1.25rem;border-radius: 10px;font-weight: 600;box-shadow: var(--shadow);transform: translateY(120%);transition: transform 0.3s;z-index: 100;}.toast.show{transform: translateY(0);}#outputPanel{position: sticky;top: 90px;align-self: start;}::-webkit-scrollbar{width: 8px;height: 8px;}::-webkit-scrollbar-track{background: var(--surface);}::-webkit-scrollbar-thumb{background: var(--surface-2);border-radius: 4px;}::-webkit-scrollbar-thumb:hover{background: var(--text-muted);}@media (max-width: 1150px){#outputPanel{position: static;top: auto;}}@media (max-width: 768px){.header-inner{flex-direction: column;align-items: stretch;gap: 0.75rem;padding: 0.75rem 1rem;}.brand h1{font-size: 1.1rem;}.brand span{font-size: 0.75rem;}.header-actions{flex-direction: column;align-items: stretch;gap: 0.6rem;}.preset-row{flex-direction: column;align-items: stretch;}.preset-select{width: 100%;min-width: auto;}.mode-toggle, .lang-toggle{justify-content: flex-start;width: 100%;flex-wrap: nowrap;overflow-x: auto;padding-bottom: 0.2rem;}.mode-toggle button, .lang-toggle button{flex: 0 0 auto;text-align: center;min-width: 90px;padding: 0.5rem 0.9rem;font-size: 0.8rem;white-space: nowrap;}.btn{width: 100%;justify-content: center;}main{padding: 0.75rem;gap: 0.75rem;}.panel{padding: 1rem;border-radius: 10px;}#outputPanel{position: static;top: auto;}.section-title{font-size: 0.95rem;}.section-item{padding: 0.8rem;min-height: 48px;}.section-item input[type="checkbox"]{width: 22px;height: 22px;}.asset-toolbar{flex-direction: column;align-items: stretch;gap: 0.6rem;}.asset-tabs{width: 100%;overflow-x: auto;flex-wrap: nowrap;padding-bottom: 0.3rem;}.asset-tab{white-space: nowrap;}.asset-search, .asset-filter{width: 100%;}.hero-actions{flex-direction: column;}.hero-preview{flex-direction: column;align-items: flex-start;}.hero-preview img{width: 100%;height: 120px;}.asset-grid{grid-template-columns: repeat(2, 1fr);gap: 0.6rem;max-height: 500px;}.asset-card img{height: 110px;}.asset-info{font-size: 0.75rem;}.asset-name{-webkit-line-clamp: 2;}.output-tabs{flex-direction: column;}pre{max-height: 50vh;font-size: 0.75rem;}.validation-status{font-size: 0.8rem;}.selected-summary{flex-direction: column;gap: 0.3rem;}.toast{left: 1rem;right: 1rem;bottom: 1rem;text-align: center;}}@media (max-width: 400px){.asset-grid{grid-template-columns: 1fr;}.asset-card img{height: 160px;}.lang-toggle button, .mode-toggle button{padding: 0.4rem 0.6rem;font-size: 0.75rem;}}