@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Oswald:wght@400;500;600;700&family=Anton&display=swap');

.te-glow { position: fixed; pointer-events: none; z-index: 0; }
.te-glow-a { width: 520px; height: 520px; left: -160px; top: -200px; background: radial-gradient(circle, rgba(255,255,255,.05), transparent 62%); filter: blur(30px); animation: cfGlowPulse 9s ease-in-out infinite; }
.te-glow-b { width: 440px; height: 440px; right: -140px; bottom: -180px; background: radial-gradient(circle, rgba(255,255,255,.035), transparent 62%); filter: blur(34px); animation: cfGlowPulse 11s ease-in-out infinite reverse; }
@keyframes cfGlowPulse { 0%, 100% { opacity: .45 } 50% { opacity: .9 } }

.te-page { max-width: none; padding: 0; position: relative; z-index: 1; }
.te-body { display: flex; align-items: stretch; justify-content: center; min-height: 100vh; }
.te-form { flex: 1; min-width: 0; max-width: 760px; padding: 34px 40px 60px; }

.te-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--cf-text-4); text-decoration: none; margin-bottom: 10px; transition: color .14s ease; }
.te-back:hover { color: var(--cf-text-2); }
.te-title { margin: 0 0 22px; font-size: 26px; font-weight: 900; letter-spacing: -.03em; }

.te-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--cf-border); margin-bottom: 22px; }
.te-tab { padding: 11px 17px; border: none; background: none; color: var(--cf-text-4); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .14s ease; }
.te-tab:hover { color: var(--cf-text-2); }
.te-tab.active { color: #fff; border-bottom-color: #fff; }

.te-panel { display: none; }
.te-panel.active { display: block; }
.te-card { border: 1px solid var(--cf-border); border-radius: 14px; background: var(--cf-surface); padding: 18px; margin-bottom: 14px; }
.te-fl { font-size: 11px; font-weight: 600; color: var(--cf-text-4); text-transform: uppercase; margin-bottom: 7px; }
.te-legend { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--cf-muted); margin-bottom: 14px; }
.te-hint { font-size: 11.5px; color: #5b6067; margin: -4px 0 14px; }
.te-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.te-grid3 { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 14px; align-items: end; }
.te-off { opacity: .4; pointer-events: none; }

.te-input, .te-textarea { width: 100%; border-radius: 10px; background: var(--cf-input); border: 1px solid var(--cf-border-active); color: var(--cf-text); font-family: inherit; font-size: 14px; outline: none; box-sizing: border-box; transition: border-color .14s ease; }
.te-input { height: 44px; padding: 0 14px; }
.te-textarea { height: 118px; padding: 11px 13px; line-height: 1.5; resize: none; font-size: 13.5px; }
.te-input:focus, .te-textarea:focus { border-color: #3a3d42; }
.te-num { height: 44px; padding: 0 13px; font-size: 13.5px; border-color: var(--cf-border-2); }

.te-dd { position: relative; }
.te-dd-trigger { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 13px; border-radius: 10px; background: var(--cf-input); border: 1px solid var(--cf-border-active); cursor: pointer; transition: border-color .14s ease; }
.te-dd.soft .te-dd-trigger { border-color: var(--cf-border-2); }
.te-dd.open .te-dd-trigger { border-color: #3a3d42; }
.te-dd-label { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.te-dd-chev { flex: none; color: var(--cf-text-4); transition: transform .18s ease; }
.te-dd.open .te-dd-chev { transform: rotate(180deg); }
.te-dd-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; border-radius: 12px; background: var(--cf-surface-3); border: 1px solid #23252a; box-shadow: 0 18px 44px rgba(0,0,0,.55); overflow: hidden; display: none; }
.te-dd.open .te-dd-menu { display: block; }
.te-dd-opt { display: flex; align-items: center; gap: 9px; padding: 11px 13px; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background .14s ease; }
.te-dd-opt:hover { background: #16181b; }
.te-dd-opt.sel { background: #16181b; }
.te-dd-check { width: 15px; flex: none; color: #8a9; opacity: 0; font-family: 'Geologica', sans-serif; font-size: 13px; font-weight: 600; }
.te-dd-opt.sel .te-dd-check { opacity: 1; }
.te-dd-menu::-webkit-scrollbar { width: 9px; }
.te-dd-menu::-webkit-scrollbar-thumb { background: #23252a; border-radius: 6px; border: 2px solid var(--cf-surface-3); }

.te-color { position: relative; display: flex; align-items: center; gap: 11px; height: 44px; padding: 0 13px; border-radius: 10px; background: var(--cf-input); border: 1px solid var(--cf-border-2); font-size: 13px; color: var(--cf-text-3); }
.te-color input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; border: none; cursor: pointer; }
.te-color-sw { width: 22px; height: 22px; border-radius: 6px; border: 1px solid #2c2e32; flex: none; }

.te-sl { -webkit-user-select: none; user-select: none; }
.te-sl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.te-sl-head .te-fl { margin-bottom: 0; }
.te-sl-val { font-size: 12.5px; font-weight: 700; color: var(--cf-text-2); }
.te-sl-hit { height: 16px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.te-sl-track { height: 6px; width: 100%; border-radius: 3px; background: #1c1e21; position: relative; }
.te-sl-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; border-radius: 3px; }
.te-sl-knob { position: absolute; left: 0; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }

.te-check { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.te-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.te-check-box { width: 20px; height: 20px; border-radius: 6px; background: transparent; border: 1.5px solid #3a3d42; display: flex; align-items: center; justify-content: center; flex: none; transition: all .14s ease; }
.te-check-box svg { opacity: 0; }
.te-check input:checked + .te-check-box { background: #fff; border-color: #fff; }
.te-check input:checked + .te-check-box svg { opacity: 1; }
.te-check-txt { font-size: 13.5px; font-weight: 600; }

.te-seg { display: flex; gap: 4px; padding: 4px; border-radius: 11px; background: var(--cf-input); border: 1px solid var(--cf-border-2); }
.te-seg-btn { flex: 1; display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 8px; border: none; border-radius: 8px; background: transparent; color: var(--cf-text-4); font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .14s ease; }
.te-seg-btn.active { background: var(--cf-surface); color: #fff; }

.te-actions { margin-top: 22px; display: flex; gap: 10px; }
.te-save { height: 44px; padding: 0 30px; border: none; border-radius: 11px; background: #fff; color: #000; font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer; transition: filter .14s ease; }
.te-save:hover { filter: brightness(.93); }
.te-cancel { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border: 1px solid var(--cf-border-2); border-radius: 11px; background: none; color: #9a9fa6; font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; transition: all .14s ease; }
.te-cancel:hover { border-color: #2c2e32; color: #fff; }

.pp { position: relative; }
.pp-trigger { display: flex; align-items: center; gap: 11px; height: 46px; padding: 0 14px; border-radius: 11px; background: var(--cf-input); border: 1px solid var(--cf-border-active); cursor: pointer; transition: border-color .14s ease; }
.pp.open .pp-trigger { border-color: #3a3d42; }
.pp-trigger-ic { color: var(--cf-text-2); display: flex; flex: none; }
.pp-trigger-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-trigger-chev { flex: none; color: var(--cf-text-4); transition: transform .18s ease; }
.pp.open .pp-trigger-chev { transform: rotate(180deg); }
.pp-panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; border: 1px solid #23252a; border-radius: 13px; background: var(--cf-surface-3); box-shadow: 0 18px 44px rgba(0,0,0,.55); max-height: 300px; overflow-y: auto; display: none; }
.pp.open .pp-panel { display: block; }
.pp-panel::-webkit-scrollbar { width: 9px; }
.pp-panel::-webkit-scrollbar-thumb { background: #23252a; border-radius: 6px; border: 2px solid var(--cf-surface-3); }
.pp-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 14px; cursor: pointer; border-bottom: 1px solid #141517; }
.pp-row:hover { background: #16181b; }
.pp-row.sel { background: #141619; }
.pp-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #3a3d42; display: flex; align-items: center; justify-content: center; flex: none; }
.pp-row.sel .pp-radio { border-color: #fff; }
.pp-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.pp-row.sel .pp-dot { background: #fff; }
.pp-row-ic { color: #9aa0a7; display: flex; flex: none; }
.pp-row-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-row-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; color: var(--cf-text-4); flex: none; cursor: pointer; }
.pp-row-btn:hover { background: #1c1e22; color: #fff; }
.pp-row-btn.del:hover { background: rgba(229,72,77,.14); color: var(--cf-red); }
.pp-add { display: flex; align-items: center; gap: 9px; padding: 12px 14px; cursor: pointer; color: var(--cf-text-2); font-size: 13px; font-weight: 700; }
.pp-add:hover { background: #16181b; }
.pp-edit { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50; border: 1px solid #2a4d6a; border-radius: 13px; background: var(--cf-surface-3); box-shadow: 0 18px 44px rgba(0,0,0,.6); padding: 16px; display: none; }
.pp-edit.show { display: block; }
.pp-edit-head { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; font-weight: 800; margin-bottom: 14px; }
.pp-edit-x { color: var(--cf-muted); cursor: pointer; flex: none; }
.pp-edit-x:hover { color: #fff; }
.pp-edit-lbl { font-size: 11px; font-weight: 600; color: var(--cf-text-4); text-transform: uppercase; margin-bottom: 7px; }
.pp-edit .te-input { height: 40px; margin-bottom: 14px; }
.pp-edit-actions { display: flex; gap: 9px; margin-top: 14px; }
.pp-edit-actions .te-save { flex: 1; height: 42px; padding: 0; border-radius: 10px; font-size: 13px; }
.pp-edit-actions .te-cancel { height: 42px; padding: 0 18px; border-radius: 10px; font-size: 13px; }

.te-preview-col { width: 420px; flex: none; padding: 34px 30px 60px; display: flex; flex-direction: column; align-items: center; }
.te-preview-sticky { position: sticky; top: 30px; display: flex; flex-direction: column; align-items: center; }

.te-plat { display: flex; gap: 5px; padding: 5px; border-radius: 15px; background: var(--cf-surface); border: 1px solid var(--cf-border); margin-bottom: 24px; }
.te-plat-btn { display: flex; align-items: center; justify-content: center; gap: 9px; height: 42px; padding: 0 26px; border: none; border-radius: 11px; background: transparent; color: var(--cf-text-4); font-size: 14.5px; font-weight: 700; font-family: inherit; cursor: pointer; transition: all .14s ease; }
.te-plat-btn.active { background: var(--cf-surface); color: #fff; }
.te-plat-btn svg { width: 20px; height: 20px; flex: none; }

.te-phone { position: relative; border: 4px solid #222; border-radius: 2.5rem; background: #0a0a0a; box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04); }
.te-screen { position: relative; width: 300px; height: 617px; border-radius: calc(2.5rem - 4px); background: #000; overflow: hidden; touch-action: none; }
.te-home { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 90px; height: 3px; background: #444; border-radius: 100px; z-index: 5; }

.te-scr-bg { position: absolute; inset: 0; }
.te-video { position: absolute; left: 0; right: 0; top: 42px; height: 533px; overflow: hidden; }
.te-vid-bg { position: absolute; inset: 0; }
.te-prev-clip { position: absolute; background: linear-gradient(135deg, #33363c, #141619); border: 1px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; cursor: grab; }
.te-prev-clip svg { width: 24px; height: 24px; fill: rgba(255,255,255,.7); pointer-events: none; }
.te-prev-caption { position: absolute; left: 8px; right: 8px; text-align: center; cursor: grab; color: rgba(255,255,255,.72); font-weight: 600; font-size: 15px; text-shadow: 0 1px 3px #000; }
.te-prev-subtitle { position: absolute; left: 8px; right: 8px; text-align: center; cursor: grab; line-height: 1.12; text-shadow: 0 1px 5px rgba(0,0,0,.95); }
.te-prev-banner { position: absolute; border: 1.5px dashed rgba(255,255,255,.5); border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: grab; color: rgba(255,255,255,.5); font-size: 9px; font-weight: 700; letter-spacing: 2px; }
.te-prev-banner::after { content: 'BANNER'; pointer-events: none; }

.te-chrome { position: absolute; inset: 0; pointer-events: none; color: #fff; display: none; }
.te-chrome.on { display: block; }
.te-chrome::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 88px; background: linear-gradient(180deg, rgba(0,0,0,.5), transparent); }
.te-chrome::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 200px; background: linear-gradient(0deg, rgba(0,0,0,.6), transparent); }
.te-chrome svg { stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; fill: none; filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
.te-chrome svg.solid { fill: currentColor; stroke: none; }

.ch-stack { position: absolute; right: 12px; bottom: 112px; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.ch-act { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; }
.ch-cover { border-radius: 7px; background: linear-gradient(140deg, #3a3d44, #17181b); border: 1.5px solid rgba(255,255,255,.75); }
.ch-avatar { border-radius: 50%; background: linear-gradient(140deg, #43464d, #1a1b1f); border: 1.5px solid rgba(255,255,255,.7); flex: none; }
.ch-arow { display: flex; align-items: center; }
.ch-nick { font-size: 12.5px; }

.rc-head { position: absolute; top: 34px; left: 0; right: 0; display: flex; align-items: center; gap: 20px; padding: 0 16px; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.rc-title { margin-left: 26px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.rc-friends { font-size: 19px; font-weight: 600; color: rgba(255,255,255,.62); letter-spacing: -.02em; }
.rc-more { position: absolute; right: 12px; bottom: 34px; display: flex; flex-direction: column; align-items: center; gap: 13px; }
.rc-more .ch-cover { width: 26px; height: 26px; }
.rc-author { position: absolute; left: 16px; right: 64px; bottom: 40px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.rc-author .ch-arow { gap: 9px; margin-bottom: 6px; }
.rc-author .ch-avatar { width: 26px; height: 26px; }
.rc-author .ch-nick { font-weight: 600; }
.rc-follow { font-size: 11px; font-weight: 700; padding: 3px 11px; border: 1px solid rgba(255,255,255,.9); border-radius: 8px; }
.rc-sound { display: flex; align-items: center; gap: 5px; font-size: 11px; opacity: .95; margin-bottom: 5px; }
.rc-see { font-size: 11.5px; color: rgba(255,255,255,.72); }

.sc-head { position: absolute; top: 34px; right: 16px; display: flex; gap: 19px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.sc-author { position: absolute; left: 16px; right: 62px; bottom: 48px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.sc-author .ch-arow { gap: 9px; margin-bottom: 8px; }
.sc-author .ch-avatar { width: 27px; height: 27px; }
.sc-author .ch-nick { font-weight: 700; }
.sc-sub { font-size: 11px; font-weight: 700; padding: 4px 13px; background: #fff; color: #0a0a0a; border-radius: 100px; }
.sc-title { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-stack .ch-cover { width: 27px; height: 27px; }

@media (max-width: 1280px) {
  .te-body { flex-direction: column; }
  .te-form { max-width: none; }
  .te-preview-col { width: auto; padding: 0 30px 60px; }
  .te-preview-sticky { position: static; }
}