:root{--bg: #f7f8fa;--card: #ffffff;--muted: #6b7280;--accent: #ef4444;--accent-2: #2563eb;--text: #111827;--success: #10b981;--danger: #ef4444;--radius: 10px;--gap: 12px;--shadow: 0 6px 18px rgba(17, 24, 39, .06);--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Segoe UI Mono", monospace;--transition: .18s cubic-bezier(.2, .9, .3, 1)}body{box-sizing:border-box;margin:0;padding:0}.form-root,.form-root *{box-sizing:border-box;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;transition:all var(--transition)}.form-root{background:var(--bg);padding:28px;display:flex;justify-content:center;height:fit-content}.form-card{width:100%;max-width:760px;background:var(--card);border-radius:calc(var(--radius) + 4px);box-shadow:var(--shadow);padding:20px;border:1px solid rgba(15,23,42,.04)}.form-controls{display:flex;gap:var(--gap);align-items:center;margin-bottom:16px;flex-wrap:wrap}.form-inputs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}.input-main{flex:1 1 180px;min-width:150px;padding:10px 12px;border-radius:8px;border:1px solid rgba(15,23,42,.08);background:#fff;color:var(--text);font-size:15px;outline:none;box-shadow:none}.story-detail{height:200px}.input-main:focus{border-color:var(--accent-2);outline:2px solid rgba(37,99,235,.2)}.input-main:nth-child(odd){background:#f9fafb}.btn{border:0;padding:10px 14px;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;background:transparent;color:var(--text);display:inline-flex;gap:8px;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;transition:transform .12s ease,box-shadow .12s ease}.btn:active{transform:translateY(1px)}.btn-primary{background:linear-gradient(180deg,var(--accent-2),#1e40af);color:#fff;box-shadow:0 6px 14px #2563eb1f}.btn-ghost{background:#0f172a08;color:var(--text)}.btn-save{background:linear-gradient(180deg,#22c55e,var(--success));color:#fff;box-shadow:0 6px 12px #10b98114}.btn-delete{background:transparent;color:var(--danger);border:1px dashed rgba(239,68,68,.12)}.btn-clear{background:transparent;color:var(--muted);font-size:13px}.story-list{display:flex;flex-direction:column;gap:10px;margin-top:18px}.story-item{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:10px;border:1px solid rgba(15,23,42,.04);background:linear-gradient(180deg,#fff9,#ffffffe6)}.story-details{display:flex;flex-direction:column;gap:4px}.inputResult{flex:1 1 auto;padding:10px 12px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text);font-size:15px;outline:none;height:180px}.input-edit{flex:1 1 auto;padding:10px 12px;border-radius:8px;border:1px solid rgba(37,99,235,.18);background:#fff;color:var(--text);font-size:15px;outline:none;box-shadow:0 6px 14px #2563eb0f}.edit-story-detail{height:200px}.item-controls{display:flex;gap:8px;flex-wrap:wrap}.item-controls .btn{padding:8px 10px;font-size:13px;border-radius:8px}.empty-state{color:var(--muted);text-align:center;padding:18px;border-radius:8px;background:#0f172a05;margin-top:12px;font-size:14px}.fade-in{animation:fadeIn .26s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.btn:hover{filter:brightness(.98);transform:translateY(-2px);box-shadow:0 8px 20px #0206170f}.story-item:hover{transform:translateY(-2px);box-shadow:0 8px 24px #1118270a}.input-main:focus,.input-edit:focus,.inputResult:focus,.btn:focus{outline:3px solid rgba(37,99,235,.12);outline-offset:2px}@media(max-width:520px){.form-card{padding:14px}.form-controls{flex-direction:column;gap:8px;align-items:stretch}.form-inputs{flex-direction:column}.btn{width:100%;justify-content:center}.item-controls{flex-wrap:wrap}}.no-page-container{background-color:#000;height:100vh;padding:0;margin:0!important;display:flex;justify-content:center;align-items:center}.no-page-container img{width:100%;height:50%;object-fit:contain}