:root{--bg-deep: #0a0e1a;--bg-card: #111827;--accent-lavender: #a78bfa;--accent-chamomile: #fbbf24;--accent-moon: #e0e7ff;--accent-mint: #6ee7b7;--accent-rose: #fda4af;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-muted: #64748b;--border-subtle: rgba(167, 139, 250, .15)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Outfit,sans-serif;background:var(--bg-deep);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;position:relative;overflow-x:hidden}.stars{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;opacity:0;-webkit-animation:twinkle var(--duration) ease-in-out infinite;animation:twinkle var(--duration) ease-in-out infinite;-webkit-animation-delay:var(--delay);animation-delay:var(--delay)}@-webkit-keyframes twinkle{0%,to{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}50%{opacity:var(--opacity);-webkit-transform:scale(1);transform:scale(1)}}@keyframes twinkle{0%,to{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}50%{opacity:var(--opacity);-webkit-transform:scale(1);transform:scale(1)}}.orb{position:fixed;border-radius:50%;filter:blur(80px);opacity:.3;pointer-events:none}.orb-1{width:400px;height:400px;background:radial-gradient(circle,var(--accent-lavender),transparent);top:-100px;right:-100px;animation:float 20s ease-in-out infinite,opacityVariance 15s ease-in-out infinite}.orb-2{width:300px;height:300px;background:radial-gradient(circle,var(--accent-chamomile),transparent);bottom:-50px;left:-50px;animation:float 25s ease-in-out infinite reverse,opacityVariance 18s ease-in-out infinite 3s}@keyframes float{0%,to{transform:translate(0) rotate(0)}33%{transform:translate(30px,-30px) rotate(120deg)}66%{transform:translate(-20px,20px) rotate(240deg)}}@keyframes opacityVariance{0%,to{opacity:.2}25%{opacity:.35}50%{opacity:.4}75%{opacity:.25}}.aurora{position:fixed;width:200%;height:200%;top:-50%;left:-50%;pointer-events:none;opacity:.15;transform:rotate(-25deg);z-index:1}.aurora-layer{position:absolute;width:100%;height:100%;filter:blur(60px)}.aurora-layer-1{background:linear-gradient(to bottom,transparent 0%,rgba(110,231,183,.3) 30%,rgba(167,139,250,.2) 50%,transparent 70%);animation:auroraWave1 25s ease-in-out infinite}.aurora-layer-2{background:linear-gradient(to bottom,transparent 20%,rgba(134,239,172,.25) 45%,rgba(96,165,250,.15) 65%,transparent 85%);animation:auroraWave2 30s ease-in-out infinite 5s}.aurora-layer-3{background:linear-gradient(to bottom,transparent 10%,rgba(74,222,128,.2) 35%,rgba(192,132,252,.15) 55%,transparent 75%);animation:auroraWave3 35s ease-in-out infinite 10s}@keyframes auroraWave1{0%,to{transform:translate(0) translateY(0) scaleY(1);opacity:.6}25%{transform:translate(-3%) translateY(2%) scaleY(1.1);opacity:.8}50%{transform:translate(2%) translateY(-1%) scaleY(.95);opacity:.7}75%{transform:translate(-1%) translateY(3%) scaleY(1.05);opacity:.9}}@keyframes auroraWave2{0%,to{transform:translate(2%) translateY(-1%) scaleY(.95);opacity:.5}30%{transform:translate(-2%) translateY(2%) scaleY(1.1);opacity:.7}60%{transform:translate(3%) translateY(1%) scaleY(1);opacity:.6}90%{transform:translate(-1%) translateY(-2%) scaleY(1.05);opacity:.8}}@keyframes auroraWave3{0%,to{transform:translate(-1%) translateY(1%) scaleY(1.05);opacity:.4}20%{transform:translate(2%) translateY(-2%) scaleY(.95);opacity:.6}50%{transform:translate(-3%) translateY(1%) scaleY(1.1);opacity:.7}80%{transform:translate(1%) translateY(2%) scaleY(1);opacity:.5}}.aurora-sparkle{position:fixed;width:3px;height:3px;border-radius:50%;background:#6ee7b7cc;box-shadow:0 0 8px #6ee7b799;pointer-events:none;z-index:2}.aurora-sparkle:nth-child(1){top:15%;left:20%;animation:sparkle 4s ease-in-out infinite}.aurora-sparkle:nth-child(2){top:35%;left:70%;animation:sparkle 5s ease-in-out infinite 1s}.aurora-sparkle:nth-child(3){top:55%;left:25%;animation:sparkle 6s ease-in-out infinite 2s}.aurora-sparkle:nth-child(4){top:75%;left:65%;animation:sparkle 4.5s ease-in-out infinite 3s}.aurora-sparkle:nth-child(5){top:25%;left:45%;animation:sparkle 5.5s ease-in-out infinite 1.5s}.aurora-sparkle:nth-child(6){top:65%;left:85%;animation:sparkle 6.5s ease-in-out infinite 2.5s}.aurora-sparkle:nth-child(7){top:45%;left:15%;animation:sparkle 5s ease-in-out infinite .5s}.aurora-sparkle:nth-child(8){top:85%;left:40%;animation:sparkle 4s ease-in-out infinite 3.5s}@keyframes sparkle{0%,to{opacity:0;transform:scale(.5)}10%,90%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}.card{background:linear-gradient(145deg,#111827f2,#0f172ae6);border:1px solid var(--border-subtle);border-radius:24px;padding:3rem;max-width:1200px;width:100%;position:relative;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 25px 50px -12px #00000080,0 0 0 1px #a78bfa1a,inset 0 1px #ffffff0d;-webkit-animation:cardAppear 1s ease-out;animation:cardAppear 1s ease-out}@media(min-width:1024px){.card{width:66.67vw;min-width:720px}}@-webkit-keyframes cardAppear{0%{opacity:0;-webkit-transform:translateY(30px) scale(.95);transform:translateY(30px) scale(.95)}to{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}}@keyframes cardAppear{0%{opacity:0;-webkit-transform:translateY(30px) scale(.95);transform:translateY(30px) scale(.95)}to{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}}.header{text-align:center;margin-bottom:2.5rem;position:relative}.moon-icon{width:48px;height:48px;margin-bottom:1rem;-webkit-animation:moonGlow 4s ease-in-out infinite;animation:moonGlow 4s ease-in-out infinite}@-webkit-keyframes moonGlow{0%,to{-webkit-filter:drop-shadow(0 0 8px rgba(224,231,255,.4));filter:drop-shadow(0 0 8px rgba(224,231,255,.4))}50%{-webkit-filter:drop-shadow(0 0 20px rgba(224,231,255,.7));filter:drop-shadow(0 0 20px rgba(224,231,255,.7))}}@keyframes moonGlow{0%,to{-webkit-filter:drop-shadow(0 0 8px rgba(224,231,255,.4));filter:drop-shadow(0 0 8px rgba(224,231,255,.4))}50%{-webkit-filter:drop-shadow(0 0 20px rgba(224,231,255,.7));filter:drop-shadow(0 0 20px rgba(224,231,255,.7))}}.title{font-family:Cormorant Garamond,serif;font-size:2rem;font-weight:300;color:var(--text-primary);letter-spacing:.05em;margin-bottom:.5rem}.subtitle{font-size:.85rem;font-weight:300;color:var(--text-muted);letter-spacing:.15em;text-transform:uppercase}.timeline{position:relative;padding-left:1rem}.timeline:before{content:"";position:absolute;left:6px;top:20px;bottom:20px;width:1px;background:linear-gradient(to bottom,transparent,var(--accent-lavender) 10%,var(--accent-lavender) 90%,transparent);opacity:.3}.step{display:grid;grid-template-columns:80px 1fr;gap:1.5rem;padding:1rem 0;position:relative;opacity:1;-webkit-animation:stepAppear .6s ease-out;animation:stepAppear .6s ease-out}.step:nth-child(1){-webkit-animation-delay:.2s;animation-delay:.2s}.step:nth-child(2){-webkit-animation-delay:.35s;animation-delay:.35s}.step:nth-child(3){-webkit-animation-delay:.5s;animation-delay:.5s}.step:nth-child(4){-webkit-animation-delay:.65s;animation-delay:.65s}.step:nth-child(5){-webkit-animation-delay:.8s;animation-delay:.8s}.step:nth-child(6){-webkit-animation-delay:.95s;animation-delay:.95s}.step:nth-child(7){-webkit-animation-delay:1.1s;animation-delay:1.1s}@-webkit-keyframes stepAppear{0%{opacity:0;-webkit-transform:translateX(-10px);transform:translate(-10px)}to{opacity:1;-webkit-transform:translateX(0);transform:translate(0)}}@keyframes stepAppear{0%{opacity:0;-webkit-transform:translateX(-10px);transform:translate(-10px)}to{opacity:1;-webkit-transform:translateX(0);transform:translate(0)}}.time-block{text-align:right;padding-right:1rem;position:relative}.time-block:after{content:"";position:absolute;right:-7px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--bg-deep);border:2px solid var(--accent-lavender);box-shadow:0 0 10px #a78bfa66}.time{font-size:.9rem;font-weight:500;color:var(--accent-moon)}.time-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}.content{background:#ffffff05;border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:1rem 1.25rem;transition:all .3s ease}.step:hover .content{background:#ffffff0a;border-color:#a78bfa33;transform:translate(4px)}.content-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.icon{width:20px;height:20px;flex-shrink:0}.compound-name{font-weight:500;color:var(--text-primary);font-size:.95rem}.dose{font-size:.75rem;color:var(--accent-lavender);background:#a78bfa1a;padding:.2rem .5rem;border-radius:4px;margin-left:auto;font-weight:400}.description{font-size:.8rem;color:var(--text-secondary);line-height:1.5;font-weight:300}.mechanism{display:flex;align-items:center;gap:.3rem;font-size:.7rem;color:var(--text-muted);margin-top:.5rem;padding:.25rem .5rem;background:#6ee7b714;border-radius:4px;width:100%}.mechanism-icon{width:12px;height:12px;opacity:.7}.footer{margin-top:2rem;padding-top:1.5rem;text-align:center}.sos-title{font-family:Cormorant Garamond,serif;font-size:1rem;font-weight:400;color:var(--accent-rose);margin-bottom:.75rem;display:flex;align-items:center;justify-content:center;gap:.5rem}.sos-content{font-size:.8rem;color:var(--text-secondary);line-height:1.6;font-weight:300}.sos-highlight{color:var(--accent-mint)}.breathing-hint{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1.5rem;color:var(--text-muted);font-size:.75rem}.breath-circle{width:12px;height:12px;border-radius:50%;background:var(--accent-lavender);opacity:.6;-webkit-animation:breathe 8s ease-in-out infinite;animation:breathe 8s ease-in-out infinite}@-webkit-keyframes breathe{0%,to{-webkit-transform:scale(.8);transform:scale(.8);opacity:.4}25%{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:.8}50%{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:.8}75%{-webkit-transform:scale(.8);transform:scale(.8);opacity:.4}}@keyframes breathe{0%,to{-webkit-transform:scale(.8);transform:scale(.8);opacity:.4}25%{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:.8}50%{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:.8}75%{-webkit-transform:scale(.8);transform:scale(.8);opacity:.4}}.editable{cursor:text;position:relative;transition:all .2s ease;border-radius:4px;padding:2px 4px;margin:-2px -4px;display:inline-block;min-width:20px}.editable:hover{background:#a78bfa1a;outline:1px dashed rgba(167,139,250,.3)}.editable:focus{background:#a78bfa26;outline:2px solid rgba(167,139,250,.5)}.editable-wrapper{position:relative;display:inline-block}.cancel-edit-button{position:absolute;bottom:-16px;right:-36px;background:#fbbf2426;border:1px solid rgba(251,191,36,.4);border-radius:4px;padding:3px 7px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:1;transform:scale(1);transition:all .2s ease;color:var(--accent-chamomile);font-size:.6rem;font-weight:500;line-height:1;letter-spacing:.5px;font-family:Outfit,sans-serif;z-index:10;pointer-events:all;box-shadow:0 2px 8px #0000004d}.cancel-edit-button:hover{background:#fbbf2440;border-color:#fbbf2499;transform:scale(1.05)}.cancel-edit-button:active{transform:scale(.95)}.toast{position:fixed;bottom:2rem;right:2rem;background:linear-gradient(145deg,#111827fa,#0f172af2);border:1px solid var(--accent-lavender);border-radius:12px;padding:1rem 1.5rem;display:flex;align-items:center;gap:1rem;box-shadow:0 10px 30px #00000080,0 0 20px #a78bfa33;animation:slideInUp .3s ease-out;z-index:1000;max-width:400px}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.toast-message{color:var(--text-primary);font-size:.9rem;flex:1}.toast-button{background:var(--accent-lavender);color:#fff;border:none;padding:.5rem 1rem;border-radius:6px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease}.toast-button:hover{background:var(--accent-mint);transform:scale(1.05)}.toast-close{background:transparent;color:var(--text-muted);border:none;font-size:1.2rem;cursor:pointer;padding:.25rem;transition:color .2s ease}.toast-close:hover{color:var(--text-primary)}.footer-divider{position:relative;height:1px;margin-bottom:1.5rem;background:var(--border-subtle)}.add-step-hover-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent-lavender),var(--accent-mint));border:none;color:#fff;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .3s ease;box-shadow:0 2px 10px #a78bfa4d}.footer:hover .add-step-hover-button{opacity:1;transform:translate(-50%,-50%) translateY(-4px)}.add-step-hover-button:hover{transform:translate(-50%,-50%) translateY(-6px) scale(1.1);box-shadow:0 4px 20px #a78bfa80}.delete-button{position:absolute;top:0;right:0;background:#fda4af1a;border:1px solid rgba(253,164,175,.3);border-radius:4px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:scale(.8);transition:all .25s ease;color:var(--accent-rose);font-size:.75rem;line-height:1;padding:.75rem;margin:-.75rem}.delete-button:hover{opacity:1;transform:scale(1);background:#fda4af33;border-color:var(--accent-rose)}.delete-button:active{transform:scale(1.15)}.icon-picker{position:relative}.icon-picker-trigger{background:transparent;border:1px dashed rgba(167,139,250,.3);border-radius:8px;padding:.5rem;display:flex;align-items:center;gap:.5rem;cursor:pointer;transition:all .2s ease}.icon-picker-trigger:hover{border-color:var(--accent-lavender);background:#a78bfa0d}.icon-preview{width:24px;height:24px}.icon-picker-label{font-size:.75rem;color:var(--text-muted)}.icon-picker-backdrop{position:fixed;inset:0;z-index:999}.icon-picker-dropdown{position:absolute;top:100%;left:0;margin-top:.5rem;background:linear-gradient(145deg,#111827fa,#0f172af2);border:1px solid var(--accent-lavender);border-radius:12px;padding:1rem;box-shadow:0 10px 30px #00000080;z-index:1000;min-width:320px}.icon-picker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.icon-option{background:#ffffff05;border:1px solid rgba(255,255,255,.05);border-radius:8px;padding:.75rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.icon-option:hover{background:#ffffff0d;border-color:#a78bfa4d;transform:scale(1.05)}.icon-option.active{background:#a78bfa26;border-color:var(--accent-lavender)}.icon-option svg{width:24px;height:24px}.new-step-form{background:#a78bfa0d;border:2px dashed var(--accent-lavender);border-radius:12px;padding:1.5rem;margin:1rem 0;opacity:1!important;animation:formAppear .3s ease-out!important;display:block!important;grid-template-columns:unset!important}.new-step-form form{display:grid;grid-template-columns:160px 1fr;gap:1.5rem}@keyframes formAppear{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.new-step-form .time-block input,.new-step-form .content input,.new-step-form .content textarea{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:.5rem;color:var(--text-primary);font-family:inherit;font-size:inherit;width:100%;transition:all .2s ease}.new-step-form .time-block{display:flex;flex-direction:column;gap:.5rem;min-width:160px}.new-step-form .time-block input{text-align:right}.new-step-form .time-block .time-label{font-size:.49rem;margin-top:.25rem}.new-step-form .content input:focus,.new-step-form .content textarea:focus{outline:none;border-color:var(--accent-lavender);background:#ffffff14}.new-step-form .content textarea{resize:vertical;min-height:60px;font-family:inherit;line-height:1.5}.new-step-form .mechanism input{background:transparent;border:none;padding:0;flex:1}.new-step-form .content{width:100%;min-width:0}.new-step-form .content-header{display:flex;align-items:center;gap:.75rem;width:100%}.new-step-form .content-header .icon-picker{flex:0 1 15%;max-width:120px}.new-step-form .content-header .compound-name{flex:0 1 55%;min-width:0}.new-step-form .content-header .dose{flex:0 1 30%;min-width:0}.form-actions{display:flex;gap:.75rem;margin-top:1rem;justify-content:flex-end}.btn-save,.btn-cancel{padding:.5rem 1rem;border-radius:6px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease;border:none}.btn-save{background:var(--accent-lavender);color:#fff}.btn-save:hover{background:var(--accent-mint);transform:scale(1.05)}.btn-cancel{background:#ffffff0d;color:var(--text-secondary);border:1px solid rgba(255,255,255,.1)}.btn-cancel:hover{background:#ffffff1a}@media(max-width:700px){.icon-picker-label{display:none}.new-step-form form{grid-template-columns:100px 1fr}.new-step-form .time-block{min-width:100px}.new-step-form .content-header{flex-wrap:wrap}.new-step-form .content-header .compound-name{flex:1;min-width:0}.new-step-form .content-header .dose{flex:1 1 100%;max-width:none;margin-top:.5rem}}@media(max-width:540px){.card{padding:2rem 1.5rem}.step{grid-template-columns:60px 1fr;gap:1rem}.new-step-form form{grid-template-columns:90px 1fr;gap:1rem}.new-step-form .time-block{min-width:90px;gap:.35rem}.new-step-form .time-block input{padding:.4rem;font-size:.85rem}.new-step-form .time-block .time-label{font-size:.45rem;margin-top:0}.title{font-size:1.6rem}.toast{bottom:1rem;right:1rem;left:1rem;max-width:none}.icon-picker-dropdown{left:auto;right:0;min-width:280px}.icon-picker-grid{grid-template-columns:repeat(3,1fr)}.formatting-toolbar{min-width:200px}.color-picker-dropdown{grid-template-columns:repeat(4,1fr)}}@keyframes fadeInUp{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}@keyframes slideUpDock{0%{opacity:0;transform:translate(-50%) translateY(100%)}to{opacity:1;transform:translate(-50%) translateY(0)}}.formatting-toolbar{position:fixed;transform:translate(-50%);background:linear-gradient(145deg,#111827fa,#0f172af2);border:1px solid var(--accent-lavender);border-radius:12px;padding:.5rem;box-shadow:0 10px 30px #00000080;z-index:1001;display:flex;align-items:center;gap:.25rem;animation:fadeInUp .2s ease-out;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.formatting-button{background:#ffffff05;border:1px solid rgba(255,255,255,.05);border-radius:6px;padding:.5rem .75rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;color:var(--text-primary);font-size:.9rem;font-weight:500;min-width:36px;height:36px}.formatting-button:hover{background:#ffffff0d;border-color:#a78bfa4d;transform:translateY(-1px)}.formatting-button:active{transform:translateY(0)}.formatting-button strong,.formatting-button em{font-style:normal}.formatting-button em{font-family:Cormorant Garamond,serif;font-size:1.1rem}.formatting-divider{width:1px;height:24px;background:#ffffff1a;margin:0 .25rem}.color-picker-wrapper{position:relative}.color-button svg{width:18px;height:18px}.color-picker-dropdown{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);background:linear-gradient(145deg,#111827fa,#0f172af2);border:1px solid var(--accent-lavender);border-radius:8px;padding:.5rem;box-shadow:0 10px 30px #00000080;z-index:1002;grid-template-columns:repeat(7,1fr);gap:.375rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.color-picker-wrapper:hover .color-picker-dropdown{display:grid}.color-option{width:28px;height:28px;border-radius:6px;border:2px solid rgba(255,255,255,.1);cursor:pointer;transition:all .2s ease;padding:0}.color-option:hover{transform:scale(1.15);border-color:#ffffff4d;box-shadow:0 4px 12px #0000004d}.color-option-inline{width:28px;height:28px;border-radius:6px;border:2px solid rgba(255,255,255,.1);cursor:pointer;transition:all .2s ease;padding:0;flex-shrink:0}.color-option-inline:hover{transform:scale(1.15);border-color:#ffffff4d;box-shadow:0 4px 12px #0000004d}.formatting-toolbar-dock{position:fixed!important;bottom:2rem!important;left:50%!important;transform:translate(-50%) translateZ(0)!important;z-index:9999!important;animation:slideUpDock .3s ease-out;box-shadow:0 10px 30px #0009,0 0 20px #a78bfa4d;border-radius:16px;top:auto!important;right:auto!important;will-change:transform;-webkit-transform:translateX(-50%) translateZ(0);pointer-events:auto!important;overflow:visible;-webkit-overflow-scrolling:auto;margin:0!important;contain:layout}