:root{--stf-primary:#833AB4;--stf-gradient:linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4);--stf-border:#dbdbdb;--stf-text:#262626;--stf-muted:#8e8e8e;--stf-bg:#fafafa;--stf-safe:#4caf50;--stf-warning:#ff9800;--stf-danger:#ed4956;--stf-blue:#0095f6}.stf-container button,.stf-container input,.stf-container select,.stf-container textarea,.stf-container label{font-family:inherit;box-sizing:border-box}.stf-container button{cursor:pointer;border:none;background:none;margin:0;font:inherit;color:inherit;text-decoration:none;text-transform:none;letter-spacing:normal;-webkit-appearance:none;appearance:none;line-height:1.4}.stf-container button:hover,.stf-container button:focus{text-decoration:none;outline:none}.stf-container{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;max-width:1300px;margin:0 auto;padding:20px;color:var(--stf-text);box-sizing:border-box}.stf-container *,.stf-container *::before,.stf-container *::after{box-sizing:border-box}.stf-header{text-align:center;margin-bottom:24px}.stf-header h2{margin:0 0 10px;font-size:28px;background:var(--stf-gradient);-webkit-background-clip:text;-webkit-text-fill-color:#fff0;background-clip:text;line-height:1.3}.stf-header p{color:var(--stf-muted);margin:0 auto;max-width:720px;font-size:15px;line-height:1.6}.stf-workspace{display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start}@media (max-width:900px){.stf-workspace{grid-template-columns:1fr}}.stf-input-panel{display:flex;flex-direction:column;gap:14px}.stf-panel{background:#fff;border:1px solid var(--stf-border);border-radius:12px;padding:18px;box-shadow:0 2px 8px rgb(0 0 0 / .04)}.stf-label{display:block;font-size:12px;font-weight:700;color:var(--stf-text);margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}.stf-textarea{width:100%;min-height:140px;padding:12px 14px;border:2px solid var(--stf-border);border-radius:8px;font-size:14px;line-height:1.5;resize:vertical;background:#fff;color:var(--stf-text);transition:border-color 0.2s}.stf-textarea:focus{outline:none;border-color:var(--stf-primary)}.stf-input-meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px;color:var(--stf-muted)}.stf-input-meta strong{color:var(--stf-text)}.stf-clear-btn{font-size:12px;color:var(--stf-danger);font-weight:600}.stf-clear-btn:hover{text-decoration:underline}.stf-controls-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px}.stf-controls-row:last-child{margin-bottom:0}.stf-control-group{display:flex;flex-direction:column}.stf-size-slider{display:flex;align-items:center;gap:10px}.stf-slider{flex:1;height:6px;background:#e5e7eb;border-radius:3px;outline:none;-webkit-appearance:none;appearance:none}.stf-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--stf-primary);border-radius:50%;cursor:pointer}.stf-slider::-moz-range-thumb{width:18px;height:18px;background:var(--stf-primary);border-radius:50%;cursor:pointer;border:none}.stf-size-value{font-size:13px;color:var(--stf-text);font-weight:600;min-width:46px}.stf-select{width:100%;padding:10px 12px;border:1px solid var(--stf-border);border-radius:8px;font-size:14px;background:#fff;color:var(--stf-text);cursor:pointer}.stf-select:focus{outline:none;border-color:var(--stf-primary)}.stf-align-btns{display:flex;gap:4px;background:var(--stf-bg);padding:4px;border-radius:8px}.stf-align-btn{flex:1;padding:8px;background:#fff0;border-radius:6px;transition:all 0.15s;color:var(--stf-muted);font-size:14px;position:relative}.stf-align-btn:hover{background:rgb(0 0 0 / .03)}.stf-align-btn.active{background:#fff;color:var(--stf-primary);box-shadow:0 1px 3px rgb(0 0 0 / .1)}.stf-align-btn[data-align="center"]::before{content:'☰';font-size:16px}.stf-align-btn[data-align="left"]::before{content:'⇤';font-size:16px}.stf-align-btn[data-align="right"]::before{content:'⇥';font-size:16px}.stf-align-btn::before{color:inherit}.stf-analysis-panel{background:linear-gradient(135deg,#fff 0%,#fafafa 100%)}.stf-analysis-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.stf-analysis-header .stf-label{margin:0}.stf-fit-badge{padding:5px 12px;border-radius:12px;font-size:11px;font-weight:700;background:#f0f0f0;color:var(--stf-muted);text-transform:uppercase;letter-spacing:.5px}.stf-fit-badge.perfect{background:#e8f5e9;color:#1b5e20}.stf-fit-badge.good{background:#e3f2fd;color:#0d47a1}.stf-fit-badge.tight{background:#fff8e1;color:#5d4037}.stf-fit-badge.overflow{background:#ffebee;color:#b71c1c}.stf-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}@media (max-width:500px){.stf-stats-grid{grid-template-columns:repeat(2,1fr)}}.stf-stat{padding:12px 8px;background:var(--stf-bg);border-radius:8px;text-align:center}.stf-stat-value{font-size:22px;font-weight:800;color:var(--stf-text);line-height:1;margin-bottom:4px}.stf-stat-value.warning{color:var(--stf-warning)}.stf-stat-value.danger{color:var(--stf-danger)}.stf-stat-value.safe{color:var(--stf-safe)}.stf-stat-label{font-size:11px;color:var(--stf-muted);font-weight:500;text-transform:uppercase;letter-spacing:.3px}.stf-suggestions{display:flex;flex-direction:column;gap:6px}.stf-suggestions:empty{display:none}.stf-suggestion{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.5}.stf-suggestion.pass{background:#e8f5e9;color:#1b5e20}.stf-suggestion.warn{background:#fff8e1;color:#5d4037}.stf-suggestion.error{background:#ffebee;color:#b71c1c}.stf-suggestion.info{background:#e3f2fd;color:#0d47a1}.stf-suggestion-icon{flex-shrink:0;font-weight:700;font-size:14px;width:18px;text-align:center}.stf-split-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.stf-split-header .stf-label{margin:0}.stf-split-btn{padding:8px 16px;background:var(--stf-gradient);color:#ffffff!important;border-radius:20px;font-size:12px;font-weight:700;transition:all 0.2s}.stf-split-btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 10px rgb(131 58 180 / .3)}.stf-split-btn:disabled{opacity:.4;cursor:not-allowed;background:#ccc}.stf-split-info{font-size:12px;color:var(--stf-muted);line-height:1.5}.stf-split-results{margin-top:14px;display:flex;flex-direction:column;gap:10px}.stf-split-slide{background:var(--stf-bg);border-left:3px solid var(--stf-primary);border-radius:6px;padding:12px 14px;animation:stfSlideIn 0.3s ease-out}@keyframes stfSlideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}.stf-split-slide-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.stf-split-slide-num{font-size:11px;font-weight:700;color:var(--stf-primary);text-transform:uppercase;letter-spacing:.5px}.stf-split-slide-copy{padding:4px 10px;background:var(--stf-primary);color:#ffffff!important;border-radius:4px;font-size:11px;font-weight:600;transition:all 0.15s}.stf-split-slide-copy:hover{background:#6a2e91}.stf-split-slide-copy.copied{background:var(--stf-safe)}.stf-split-slide-text{font-size:13px;line-height:1.5;color:var(--stf-text);white-space:pre-wrap;word-wrap:break-word}.stf-split-slide-meta{margin-top:6px;font-size:11px;color:var(--stf-muted)}.stf-preview-panel{position:sticky;top:20px;display:flex;flex-direction:column;align-items:center;gap:12px}.stf-preview-label{font-size:12px;font-weight:700;color:var(--stf-muted);text-transform:uppercase;letter-spacing:.5px}.stf-phone{width:340px;height:605px;background:#000;border-radius:40px;padding:12px;box-shadow:0 20px 40px rgb(0 0 0 / .2);position:relative}.stf-phone-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:100px;height:20px;background:#000;border-radius:0 0 16px 16px;z-index:10}.stf-story-canvas{width:100%;height:100%;border-radius:28px;overflow:hidden;position:relative;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb)}.stf-story-progress-row{position:absolute;top:26px;left:14px;right:14px;z-index:5}.stf-story-bar{height:3px;background:rgb(255 255 255 / .3);border-radius:2px;overflow:hidden}.stf-story-bar.active::after{content:'';display:block;height:100%;width:50%;background:#fff;border-radius:2px}.stf-story-header-row{position:absolute;top:38px;left:14px;right:14px;display:flex;align-items:center;gap:8px;z-index:5}.stf-story-avatar{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid #fff}.stf-story-username{font-size:12px;font-weight:600;color:#fff;text-shadow:0 1px 2px rgb(0 0 0 / .3)}.stf-story-time{font-size:11px;color:rgb(255 255 255 / .85)}.stf-safe-overlay{position:absolute;inset:0;pointer-events:none;z-index:3}.stf-safe-top,.stf-safe-bottom{position:absolute;left:0;right:0;background:repeating-linear-gradient(45deg,rgb(255 59 48 / .15),rgb(255 59 48 / .15) 8px,rgb(255 59 48 / .25) 8px,rgb(255 59 48 / .25) 16px);border:2px dashed rgb(255 59 48 / .6);transition:opacity 0.2s}.stf-safe-top{top:0;height:13%}.stf-safe-bottom{bottom:0;height:17%}.stf-safe-overlay.hidden .stf-safe-top,.stf-safe-overlay.hidden .stf-safe-bottom{opacity:0}.stf-story-text{position:absolute;top:13%;bottom:17%;left:5%;right:5%;display:flex;align-items:center;justify-content:center;color:#fff;z-index:4;overflow:hidden}.stf-story-text-inner{width:100%;white-space:pre-wrap;word-wrap:break-word;text-shadow:0 2px 8px rgb(0 0 0 / .3);font-weight:700;line-height:1.2;transform-origin:center}.stf-story-text-inner.classic{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif}.stf-story-text-inner.modern{font-family:'Georgia',serif;font-weight:800}.stf-story-text-inner.typewriter{font-family:'Courier New',monospace;font-weight:600}.stf-story-text-inner.bold{font-family:'Impact','Arial Black',sans-serif;font-weight:900;letter-spacing:.5px}.stf-story-text-inner.align-left{text-align:left}.stf-story-text-inner.align-center{text-align:center}.stf-story-text-inner.align-right{text-align:right}.stf-story-text-inner.overflow-warning{color:#ffcdd2}.stf-preview-toggle{display:flex;justify-content:center}.stf-toggle{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--stf-text);cursor:pointer}.stf-toggle input{width:16px;height:16px;accent-color:var(--stf-primary);cursor:pointer}.stf-toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(100px);background:#333;color:#fff;padding:12px 24px;border-radius:24px;font-size:14px;opacity:0;transition:all 0.3s;z-index:9999;pointer-events:none}.stf-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}