:root{--bg-main: #020617;--bg-elevated: #020617;--bg-card: #020617;--bg-card-soft: #020617;--border-subtle: rgba(148, 163, 184, .3);--accent: #6366f1;--accent-soft: rgba(99, 102, 241, .2);--accent-strong: #4f46e5;--accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);--accent-text: #e5e7eb;--text-main: #e5e7eb;--text-soft: #9ca3af;--text-muted: #6b7280;--danger: #f97373;--success: #22c55e;--radius-xl: 20px;--radius-full: 999px;--shadow-soft: 0 18px 45px rgba(15, 23, 42, .85);--shadow-button: 0 8px 25px rgba(88, 80, 236, .4)}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,sans-serif;background:radial-gradient(circle at 0 0,rgba(56,189,248,.14) 0,transparent 55%),radial-gradient(circle at 100% 0,rgba(129,140,248,.2) 0,transparent 60%),radial-gradient(circle at 0 100%,rgba(236,72,153,.16) 0,transparent 55%),radial-gradient(circle at 100% 100%,rgba(45,212,191,.16) 0,transparent 60%),radial-gradient(circle at 50% 30%,rgba(37,99,235,.25) 0,transparent 55%),#020617;color:var(--text-main);-webkit-font-smoothing:antialiased}body::-webkit-scrollbar{width:10px}body::-webkit-scrollbar-track{background:rgba(15,23,42,.9)}body::-webkit-scrollbar-thumb{background:rgba(99,102,241,.6);border-radius:999px}.app{min-height:100vh;display:flex;flex-direction:column;align-items:stretch}.app-header{padding:24px 16px 8px;max-width:1120px;margin:0 auto}.header-bar{display:flex;align-items:center;justify-content:space-between;gap:16px}.header-left{display:flex;align-items:center}.logo{display:flex;align-items:center;gap:10px}.logo-mark{width:42px;height:42px;border-radius:999px;display:grid;place-items:center;background:radial-gradient(circle at 30% 0%,#f97316,#facc15);box-shadow:0 0 24px #facc1580}.logo-svg{width:24px;height:24px}.logo-text span{display:block;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:15px}.logo-text small{display:block;margin-top:2px;font-size:11px;text-transform:uppercase;color:var(--text-soft)}.header-right{display:flex;align-items:center;gap:12px}.lang-toggle{display:inline-flex;padding:2px;border-radius:999px;background:rgba(15,23,42,.9);border:1px solid rgba(148,163,184,.5);-moz-background-origin:blur(16px)}.lang-btn{border:none;background:transparent;color:var(--text-soft);font-size:12px;padding:6px 12px;border-radius:999px;cursor:pointer;transition:background .16s ease,color .16s ease,transform .08s ease}.lang-btn:hover{background:rgba(148,163,184,.2);transform:translateY(-1px)}.lang-btn.lang-active{background:var(--accent-gradient);color:#f9fafb}.menu-wrapper{position:relative}.menu-button{border-radius:999px;border:1px solid rgba(148,163,184,.6);background:rgba(15,23,42,.85);width:34px;height:34px;cursor:pointer;color:var(--text-main);display:grid;place-items:center;font-size:18px;padding:0;box-shadow:0 12px 22px #0f172ae6}.menu-button:hover{background:rgba(30,64,175,.65)}.menu-dropdown{position:absolute;right:0;top:42px;min-width:210px;border-radius:18px;background:radial-gradient(circle at 0 0,rgba(56,189,248,.16),transparent 60%),radial-gradient(circle at 100% 100%,rgba(129,140,248,.2),transparent 60%),rgba(15,23,42,.98);border:1px solid rgba(148,163,184,.65);box-shadow:0 24px 60px #0f172af2;padding:6px;z-index:30}.menu-item{display:block;padding:7px 11px;font-size:13px;border-radius:12px;color:var(--text-soft);text-decoration:none;transition:background .12s ease,color .12s ease,transform .08s ease}.menu-item:hover{background:rgba(55,65,81,.8);color:#f9fafb;transform:translateY(-1px)}.menu-item.menu-active{background:rgba(99,102,241,.28);color:#e5e7eb}.tagline{margin:18px 0 10px;font-size:14px;color:var(--text-soft)}.hero{margin-top:8px;margin-bottom:12px;padding:18px 18px 20px;border-radius:26px;border:1px solid rgba(148,163,184,.65);background:radial-gradient(circle at 0 0,rgba(59,130,246,.25),transparent 55%),radial-gradient(circle at 100% 0,rgba(168,85,247,.28),transparent 55%),radial-gradient(circle at 0 100%,rgba(236,72,153,.28),transparent 55%),rgba(15,23,42,.96);box-shadow:0 22px 60px #0f172af2}.hero-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:4px 10px;border-radius:999px;background:rgba(15,23,42,.9);border:1px solid rgba(148,163,184,.7);color:#e5e7eb;text-transform:uppercase;letter-spacing:.14em}.hero-title{margin:10px 0 8px;font-size:clamp(22px,4vw,26px);font-weight:700}.hero-sub{margin:0;font-size:14px;color:var(--text-soft)}.topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px;margin-bottom:18px}.topic-card{border-radius:20px;padding:14px 14px 16px;border:1px solid rgba(148,163,184,.6);background:radial-gradient(circle at 0 0,rgba(59,130,246,.22),transparent 65%),rgba(15,23,42,.96)}.topic-card:nth-child(2){background:radial-gradient(circle at 0 0,rgba(248,250,252,.05),transparent 65%),rgba(15,23,42,.96)}.topic-card:nth-child(3){background:radial-gradient(circle at 100% 0,rgba(52,211,153,.16),transparent 65%),rgba(15,23,42,.96)}.topic-card h3{margin:0 0 6px;font-size:14px}.topic-card p{margin:0;font-size:13px;color:var(--text-soft)}.topic-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}.topic-link{font-size:13px;color:#bfdbfe;text-decoration:none}.topic-link:hover{text-decoration:underline}.topic-ad-btn{font-size:11px;text-transform:uppercase;letter-spacing:.12em;padding:6px 10px;border-radius:999px;border:1px dashed rgba(248,250,252,.85);background:rgba(30,64,175,.85);color:#f9fafb;text-decoration:none;white-space:nowrap}.topic-ad-btn{position:relative;overflow:hidden}.topic-ad-btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(120deg,transparent,rgba(248,250,252,.5),transparent);transform:translate(-120%);opacity:0;pointer-events:none}.topic-ad-btn:hover:after{animation:sprx-shine .8s forwards}@keyframes sprx-shine{0%{transform:translate(-120%);opacity:0}40%{opacity:.8}to{transform:translate(120%);opacity:0}}.app-main{flex:1;padding:8px 16px 28px;max-width:1120px;margin:0 auto}.single-column{display:flex;flex-direction:column;gap:18px}.card{border-radius:26px;padding:18px 18px 20px;background:rgba(15,23,42,.96);border:1px solid rgba(148,163,184,.7);box-shadow:var(--shadow-soft)}.card-secondary{background:radial-gradient(circle at 0 0,rgba(129,140,248,.2),transparent 50%),rgba(15,23,42,.98)}.card-header h2{margin:0;font-size:18px}.card-header p{margin:4px 0 0;font-size:13px;color:var(--text-soft)}.upload-area{display:block;border-radius:20px;border:1px dashed rgba(148,163,184,.8);background:radial-gradient(circle at 0 0,rgba(59,130,246,.18),transparent 60%),rgba(15,23,42,.92);padding:18px 16px;margin-top:18px;cursor:pointer;position:relative;overflow:hidden}.upload-area input[type=file]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.upload-inner{display:flex;align-items:center;gap:14px}.upload-icon{width:40px;height:40px;border-radius:16px;display:grid;place-items:center;font-size:22px;background:rgba(15,23,42,.9);border:1px solid rgba(148,163,184,.7)}.upload-title{margin:0;font-size:14px;font-weight:500}.upload-subtitle{margin:2px 0 0;font-size:12px;color:var(--text-soft)}.file-list{margin-top:14px;border-radius:16px;border:1px solid rgba(31,41,55,.9);background:rgba(15,23,42,.96);padding:8px 10px;max-height:220px;overflow:auto}.file-list.single{max-height:none}.file-list-header{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:4px}.file-list ul{list-style:none;margin:0;padding:0}.file-item{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;border-bottom:1px solid rgba(31,41,55,.7)}.file-item:last-child{border-bottom:none}.file-name{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{color:var(--text-muted)}.link-button{border:none;background:transparent;color:#bfdbfe;cursor:pointer;font-size:12px;text-decoration:underline;padding:0}.field-row{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}.field-row>span{color:var(--text-soft)}.format-tabs{display:inline-flex;padding:2px;border-radius:999px;background:rgba(15,23,42,.96);border:1px solid rgba(55,65,81,.9)}.format-tab{border:none;background:transparent;color:var(--text-soft);padding:5px 10px;border-radius:999px;font-size:12px;cursor:pointer;transition:background .12s ease,color .12s ease,transform .08s ease}.format-tab:hover{background:rgba(55,65,81,.9);transform:translateY(-1px)}.format-tab.format-active{background:var(--accent-gradient);color:#f9fafb}.text-input,.text-area{width:100%;border-radius:12px;border:1px solid rgba(55,65,81,.95);background:rgba(15,23,42,.95);color:var(--text-main);font-size:13px;padding:8px 10px;outline:none}.text-input:focus,.text-area:focus{border-color:#818cf8cc;box-shadow:0 0 0 1px #818cf899}.actions-row{margin-top:18px;display:flex;justify-content:flex-start}.primary-button{border-radius:999px;padding:9px 20px;font-size:14px;font-weight:500;border:none;cursor:pointer;color:#f9fafb;background-image:var(--accent-gradient);box-shadow:var(--shadow-button);transition:transform .09s ease,box-shadow .12s ease,filter .12s ease}.primary-button.secondary{background-image:linear-gradient(135deg,#0f172a,#1e293b);border:1px solid rgba(129,140,248,.8);box-shadow:0 14px 30px #0f172ae6}.primary-button.outline{background:transparent;border:1px solid rgba(148,163,184,.8);box-shadow:none}.primary-button:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-1px)}.primary-button:disabled{opacity:.6;cursor:default;box-shadow:none}.progress-wrapper{margin-top:14px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-soft)}.progress-bar{flex:1;height:6px;border-radius:999px;background:rgba(31,41,55,.9);overflow:hidden}.progress-fill{height:100%;border-radius:inherit;background-image:linear-gradient(90deg,#6366f1,#ec4899);transition:width .18s ease}.status-banner{margin-top:14px;font-size:12px;padding:7px 10px;border-radius:999px;border:1px solid rgba(148,163,184,.5);background:rgba(15,23,42,.96)}.status-success{border-color:#22c55ebf;color:#bbf7d0}.status-error{border-color:#f87171d9;color:#fecaca}.status-info{border-color:#818cf8cc;color:#c7d2fe}.hint.small{margin-top:10px;font-size:11px;color:var(--text-muted)}.image-preview-box{margin-top:14px;border-radius:16px;border:1px solid rgba(31,41,55,.9);background:rgba(15,23,42,.98);max-height:260px;overflow:hidden;display:grid;place-items:center}.image-preview-box img{max-width:100%;max-height:240px;border-radius:12px}.image-preset-row{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px}.preset-label{color:var(--text-soft)}.preset-buttons{display:flex;gap:6px}.preset-btn{border-radius:999px;border:1px solid rgba(55,65,81,.9);background:rgba(15,23,42,.98);color:var(--text-soft);font-size:11px;padding:4px 9px;cursor:pointer}.preset-btn:hover{background:rgba(30,64,175,.9);color:#e5e7eb}.page-text{margin-top:10px;font-size:13px;color:var(--text-soft)}.page-text h3{margin-top:12px;margin-bottom:6px;font-size:14px}.page-text ul{padding-left:16px;margin:4px 0 8px}.app-footer{padding:16px;text-align:center;font-size:12px;color:var(--text-muted);border-top:1px solid rgba(15,23,42,.8);margin-top:auto;background:radial-gradient(circle at 50% 0,rgba(15,23,42,.95),#020617)}.footer-sub{margin:2px 0 0}.page-ad{margin:0 auto;max-width:1120px;padding:0 16px}.page-ad .ad-banner{margin-top:8px;margin-bottom:8px}.ad-banner{margin-top:14px;margin-bottom:6px;padding:10px 14px;border-radius:20px;border:1px dashed rgba(248,250,252,.75);background:radial-gradient(circle at 0 0,rgba(251,191,36,.22),transparent 60%),radial-gradient(circle at 100% 100%,rgba(96,165,250,.24),transparent 60%),rgba(15,23,42,.96);display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;cursor:pointer;box-shadow:0 16px 40px #0f172ae6;position:relative;overflow:hidden}.ad-banner:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(120deg,transparent,rgba(248,250,252,.7),transparent);transform:translate(-130%);opacity:0;pointer-events:none}.ad-banner:hover:after{animation:ad-shine .9s forwards}@keyframes ad-shine{0%{transform:translate(-130%);opacity:0}30%{opacity:.8}to{transform:translate(130%);opacity:0}}.ad-badge{font-size:11px;text-transform:uppercase;letter-spacing:.14em;padding:4px 9px;border-radius:999px;background:rgba(15,23,42,.9);border:1px solid rgba(248,250,252,.7);color:#f9fafb;white-space:nowrap}.ad-text{flex:1;font-size:12px;color:#e5e7eb}.ad-text span{color:#facc15;font-weight:500}.ad-cta{font-size:11px;text-transform:uppercase;letter-spacing:.12em;padding:6px 10px;border-radius:999px;border:none;background:linear-gradient(135deg,#6366f1,#ec4899);color:#f9fafb;box-shadow:0 10px 24px #5850ec99;white-space:nowrap}@media (max-width: 720px){.ad-banner{flex-direction:column;align-items:flex-start}.ad-cta{width:100%;text-align:center}}@media (max-width: 900px){.topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 720px){.app-header{padding-top:18px}.header-bar{flex-direction:row;align-items:center}.hero{padding:16px 14px 18px}.hero-title{font-size:20px}.topic-grid{grid-template-columns:minmax(0,1fr)}.card{padding:16px 14px 18px}.upload-inner{align-items:flex-start}.field-row,.image-preset-row,.topic-actions{flex-direction:column;align-items:flex-start}.topic-ad-btn{width:100%;text-align:center;justify-content:center}.page-ad{padding:0 14px}}
