@import url("https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap");*,:after,:before{margin:0;padding:0;box-sizing:border-box}body{background:linear-gradient(135deg,#f6f7f9,#e9eef2);position:relative;display:flex;flex-direction:column;font-family:var(--body-font)}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 0 0,rgba(16,185,129,.05) 0,transparent 50%),radial-gradient(circle at 100% 0,rgba(52,211,153,.05) 0,transparent 50%),radial-gradient(circle at 50% 100%,rgba(5,150,105,.05) 0,transparent 50%);z-index:-1}body.light-mode{background-color:var(--background-light);color:var(--text-color-light);padding:20px;overflow:hidden}body.dark-mode{background-color:var(--background-dark);color:var(--text-color-dark);padding:20px;overflow:hidden;background:linear-gradient(135deg,#111827,#1f2937)}body.dark-mode:before{background:radial-gradient(circle at 0 0,rgba(16,185,129,.1) 0,transparent 50%),radial-gradient(circle at 100% 0,rgba(52,211,153,.1) 0,transparent 50%),radial-gradient(circle at 50% 100%,rgba(5,150,105,.1) 0,transparent 50%)}.container-flex{display:flex;gap:20px;margin:20px auto;padding:20px}.toggle-button{margin-bottom:15px;background-color:var(--black);color:#ffffff;border:none;padding:8px 16px;font-weight:700;border-radius:4px;cursor:pointer;font-size:30px;transition:background-color .3s ease}body.light-mode .toggle-button:hover{background-color:var(--primary-color)}body.dark-mode .toggle-button:hover{background-color:var(--white);color:var(--black)}.show-form-button{width:50px;height:50px;background-color:var(--secondary-color);color:#ffffff;border:none;font-size:2rem;font-weight:700;border-radius:50%;cursor:pointer;position:fixed;bottom:30px;right:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 8px var(--card-shadow-light);transition:transform .3s ease,background-color .3s ease}.show-form-button:hover{background-color:var(--secondary-color-hover);transform:scale(1.1)}.plus-icon{display:inline-block;line-height:1;transform:translateY(-2px)}.left-column{position:fixed;top:90px;margin-left:20px;left:0;width:30%;height:calc(100vh - 110px);background-color:var(--white);border-radius:8px;overflow-y:auto;padding:20px;border-right:1px solid var(--border-color-light);box-shadow:4px 0 8px rgba(0,0,0,.1);transition:transform .4s ease,opacity .4s ease;z-index:1000;display:block}.left-column,.left-column.hidden{opacity:0;transform:translateX(-100%)}.left-column.hidden{pointer-events:none}.left-column.visible{opacity:1;transform:translateX(0);pointer-events:auto}body.dark-mode .left-column{background-color:var(--dark-form-bg);border-right:1px solid var(--border-color-dark);box-shadow:4px 0 8px var(--card-shadow-dark)}.right-column{position:fixed;top:90px;right:20px;width:67%;height:calc(100vh - 110px);background-color:var(--white);padding:20px;border-radius:8px;box-shadow:0 4px 8px var(--card-shadow-light);overflow-y:auto;margin-bottom:20px}.right-column.expanded{width:calc(100% - 40px);right:0;padding-right:20px;margin-right:20px}body.dark-mode .right-column{background-color:var(--dark-form-bg);box-shadow:0 4px 8px var(--card-shadow-dark)}.main-title{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,var(--primary-green),var(--primary-green-dark));-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-align:center;margin:2rem 0;animation:title-appear .5s ease-out}@keyframes title-appear{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}body.dark-mode .main-title{color:var(--secondary-color);border-bottom:2px solid var(--dark-border)}.left-column::-webkit-scrollbar,.right-column::-webkit-scrollbar{width:8px}.left-column::-webkit-scrollbar-track,.right-column::-webkit-scrollbar-track{background-color:var(--background-light);border-radius:8px}body.dark-mode .left-column::-webkit-scrollbar-track,body.dark-mode .right-column::-webkit-scrollbar-track{background-color:var(--background-dark);border-radius:8px}.left-column::-webkit-scrollbar-thumb,.right-column::-webkit-scrollbar-thumb{background-color:rgba(29,185,84,.5);border-radius:8px}body.dark-mode .left-column::-webkit-scrollbar-thumb,body.dark-mode .right-column::-webkit-scrollbar-thumb{background-color:rgba(29,185,84,.7);border-radius:8px}.left-column::-webkit-scrollbar-thumb:hover,.right-column::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-color-hover)}.left-column,.right-column{scrollbar-width:thin;scrollbar-color:rgba(29,185,84,.5) var(--background-light);border-radius:8px}body.dark-mode .left-column,body.dark-mode .right-column{scrollbar-color:rgba(29,185,84,.7) var(--background-dark);border-radius:8px}@media (max-width:790px){.left-column{position:fixed;width:100%;height:100%;top:50px;margin-left:0;left:0;transform:translateX(-100%);transition:transform .4s ease,opacity .4s ease}.left-column.visible{transform:translateX(0)}.right-column{width:100%;padding:10px;margin-top:20px}.right-column.expanded{width:100%;padding-right:0;margin-right:5px;top:32px}}body,html{margin:0;padding:0;min-height:100vh;overflow-x:hidden}main{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:0 20px}.homePage{flex:1;display:flex;flex-direction:column;padding-top:60px}.container-flex.content{flex:1;display:flex;gap:20px;margin:0 auto;width:100%;max-width:1400px;padding:20px}.right-column.expanded{flex:1;padding:20px}@media (max-width:768px){.homePage{padding-top:50px}.container-flex.content{padding:12px}.navbar-title{font-size:1.5rem}}@media (max-width:480px){.container-flex.content{padding:8px}.navbar-title{font-size:1.3rem}}:root{--font-righteous:"Righteous",cursive;--font-inter:"Inter",sans-serif;--header-font:var(--font-righteous);--body-font:var(--font-inter);--primary-green:#10b981;--primary-green-light:#34d399}.header-font,.page-title,h1,h2,h3,h4,h5,h6{font-family:var(--header-font)}.page-subtitle{font-family:var(--body-font)}:root{--primary-color:#007bff;--secondary-color:#1db954;--secondary-color-hover:#17a84f;--danger-color:#ff595e;--danger-hover-bg:#e6454f;--background-light:#f5f5f5;--background-dark:#1a1a1a;--text-color-light:#333;--text-color-dark:#dcdcdc;--border-color-light:#ddd;--border-color-dark:#555;--card-shadow-light:rgba(0,0,0,0.1);--card-shadow-dark:rgba(0,0,0,0.3);--white:#ffffff;--black:#111;--primary-font:Arial,sans-serif;--dark-form-bg:#2a2a2a;--dark-border:#555;--dark-submit-hover-bg:#34a868}