*{box-sizing:border-box;margin:0;padding:0}:root{--bg-color:#f5f7fa;--text-color:#333;--panel-bg:#fff;--panel-border:#ddd;--heading-color:#2c3e50;--subtext-color:#7f8c8d;--btn-bg:#f8f9fa;--btn-color:#333;--btn-hover-bg:#e9ecef;--primary-btn-bg:#3498db;--primary-btn-hover:#2980b9;--secondary-btn-bg:#7f8c8d;--secondary-btn-hover:#636e72;--share-btn-bg:#27ae60;--share-btn-hover:#219653;--added-bg:#d4edda;--highlight-word-added-color:rgba(0,194,129,.289);--highlight-word-removed-color:hsla(0,89%,81%,.66);--highlight-added-color:#b5eac269;--highlight-removed-color:#e59ea544;--added-color:#155724;--removed-bg:#f8d7da;--removed-color:#721c24;--changed-bg:#fff3cd;--changed-color:#856404;--card-bg:#fff;--card-shadow:0 2px 10px rgba(0,0,0,.1);--primary-color:#39db34;--border-color:#ddd;--input-bg:#fff;--dialog-overlay:rgba(0,0,0,.5);--scrollbar-track:#f1f1f1;--scrollbar-thumb:#bbb;--scrollbar-thumb-hover:#999;--footer-border:#eee;--blank-color:#bbb;--unchanged-color:#333}.dark-mode{--bg-color:#1a1a2e;--text-color:#e6e6e6;--panel-bg:#2a2a40;--panel-border:#444;--heading-color:#61dafb;--subtext-color:#a0aec0;--btn-bg:#2c3e50;--btn-color:#e6e6e6;--btn-hover-bg:#3c4e60;--primary-btn-bg:#3498db;--primary-btn-hover:#2180b9;--secondary-btn-bg:#595959;--secondary-btn-hover:#444;--share-btn-bg:#27ae60;--share-btn-hover:#219653;--added-bg:#144620;--added-color:#a3cfbb;--highlight-word-added-color:#155724;--highlight-word-removed-color:#721c24;--highlight-added-color:#b5eac244;--highlight-removed-color:#e59ea54c;--removed-bg:#5e1c23;--removed-color:#e4bec3;--changed-bg:#5e4e1c;--changed-color:#e6d9b8;--card-bg:#2a2a40;--card-shadow:0 2px 10px rgba(0,0,0,.3);--primary-color:#66fb61;--border-color:#444;--input-bg:#1a1a2e;--dialog-overlay:rgba(0,0,0,.7);--scrollbar-track:#2a2a40;--scrollbar-thumb:#444;--scrollbar-thumb-hover:#555;--footer-border:#444;--blank-color:#666;--unchanged-color:#e6e6e6}body{background-color:var(--bg-color);color:var(--text-color);font-family:Arial,Helvetica,sans-serif;line-height:1.6;transition:background-color .3s ease,color .3s ease}.container{display:flex;flex-direction:column;margin:0;min-height:100vh;padding:0;width:100%}h1{font-size:2rem;margin-bottom:.5rem}h1,h2{color:var(--heading-color)}h2{font-size:1.2rem}h2,header{margin-bottom:1rem}header{background-color:#4caf50;box-shadow:0 1px 3px rgba(0,0,0,.1);color:#fff;padding:1rem;text-align:center;width:100%}header .main-nav-links a,header h1,header p{color:#fff!important}header .main-nav-links a:hover{color:hsla(0,0%,100%,.8)!important}header .main-nav-links a.active{color:#fff!important;font-weight:700}.dark-mode header{background-color:var(--panel-bg);color:var(--text-color)}@media (max-width:576px){header{padding:.75rem .5rem}}.header-content{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 auto;max-width:1200px;position:relative}@media (max-width:576px){.header-content{gap:.5rem;justify-content:center}.theme-toggle{margin-top:.5rem}}.app-title{align-items:center;display:flex;flex:1;flex-wrap:wrap;text-align:left}.site-logo{margin-right:15px}.logo-link{color:inherit;text-decoration:none}.app-title .site-name,.app-title h1{margin-right:15px}.subtitle{flex-basis:100%;font-size:.9rem;margin-top:5px}@media (min-width:768px){.subtitle{flex-basis:auto}}.app-title .site-name,.app-title h1{margin-bottom:.5rem}.main-nav{align-items:center;display:flex}.main-nav-links{display:flex;list-style:none;margin:0;padding:0}.main-nav-links li{margin:0 15px}.main-nav-links a{color:hsla(0,0%,100%,.95);font-weight:500;padding:.5rem 0;position:relative;text-decoration:none;transition:color .2s}.main-nav-links a:hover{color:var(--primary-color)}.main-nav-links a:after{background-color:#000;bottom:0;content:"";height:2px;left:0;position:absolute;transition:width .3s;width:0}.dark-mode .main-nav-links a:after{background-color:var(--primary-color)}.main-nav-links a:hover:after{width:100%}.main-nav-links a.active:after{background-color:#000}.dark-mode .main-nav-links a.active:after{background-color:var(--primary-color)}.theme-toggle{margin-left:20px}.feature-navigation{background-color:var(--btn-bg);border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.05);margin-top:15px;padding:10px 0}.feature-nav{display:flex;gap:25px;justify-content:center;list-style:none;margin:0;padding:0}.feature-nav a{border-radius:4px;color:var(--text-color);font-size:.95rem;font-weight:500;padding:6px 12px;text-decoration:none;transition:all .2s}.feature-nav a:hover{background-color:rgba(0,0,0,.05);color:var(--primary-color)}.feature-nav li.active a{background-color:var(--primary-color);color:#fff}.theme-btn{align-items:center;background:none;background-color:var(--btn-bg);border:none;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.1);cursor:pointer;display:flex;font-size:1.2rem;height:2.5rem;justify-content:center;padding:.3rem;width:2.5rem}.theme-btn:hover{background-color:var(--btn-hover-bg)}.dark-icon,.dark-mode .light-icon{display:none}.dark-mode .dark-icon{display:inline}header p{color:var(--subtext-color)}.text-areas{flex-direction:row;gap:.5rem;max-width:100%;overflow-x:hidden}.text-areas,.text-panel{display:flex;flex:1;margin-left:0}.text-panel{background-color:var(--panel-bg);border-radius:6px;box-shadow:0 2px 4px rgba(0,0,0,.1);flex-direction:column;padding:1rem}@media (max-width:768px){.app-layout{flex-direction:column}.sidebar{width:100%}.text-areas{flex-direction:row;gap:.5rem;width:100%}.comparison-display{gap:.1rem!important}.comparison-panel{padding:1rem .2rem!important}.text-panel{flex:1;font-size:.9rem;min-width:0}.compare-display,.highlight-overlay,.line-numbers,.text-area{font-size:.8rem}.line-numbers{padding:10px 2px}.toolbar{flex-wrap:wrap}}.panel-title{color:var(--text-color);font-weight:700}.toolbar{display:flex;justify-content:space-between;margin-bottom:.5rem}.text-area-container{border:1px solid rgba(10,14,6,.285);border-radius:10px;display:flex;gap:0;height:300px;position:relative;transition:all .3s ease;width:100%}.text-area-container.active{border:2px solid var(--primary-color);box-shadow:0 0 10px rgba(148,232,74,.2)}.line-numbers{color:var(--subtext-color);font-size:14px;overflow-y:hidden;padding:8px 4px;text-align:right;user-select:none}.line-numbers,.text-area{border:none;border-radius:inherit;font-family:monospace;line-height:1.5}.text-area{background-color:var(--panel-bg);color:var(--text-color);flex:1;font-size:13px;min-height:200px;overflow:auto;padding:8px;resize:none;scrollbar-color:#888 transparent;scrollbar-width:thin;transition:all .3s ease}.text-area::-webkit-scrollbar{height:6px;width:6px}.text-area::-webkit-scrollbar-track{background:transparent}.text-area::-webkit-scrollbar-thumb{background-color:#888;border-radius:3px}.text-area::-webkit-scrollbar-thumb:hover{background-color:#555}.text-area:focus{border-color:none;outline:none}.dark-mode .line-numbers{background-color:var(--panel-bg);border-color:var(--border-color);color:var(--subtext-color)}.dark-mode .text-area-container.active{border-color:var(--primary-color);box-shadow:0 0 10px rgba(74,134,232,.3)}.dark-mode .text-area{background-color:var(--panel-bg);border-color:var(--border-color);color:var(--text-color)}.highlight-overlay{bottom:0;font-family:monospace;font-size:.875rem;left:0;line-height:1.5;padding:.5rem;pointer-events:none;position:absolute;right:0;top:0;white-space:pre-wrap;word-wrap:break-word;color:var(--text-color);overflow:auto;overflow-wrap:break-word;word-break:break-word}.has-highlight-added{background-color:var(--highlight-word-added-color)}.highlight-added{border-radius:4px;min-height:inherit;padding:1px;white-space:pre-wrap}.has-highlight-removed{background-color:var(--highlight-word-removed-color)}.highlight-removed{border-radius:4px;min-height:inherit;padding:1px;white-space:pre-wrap}.blank{color:var(--blank-color)}.unchanged{color:var(--unchanged-color)}.collapsed-section{background-color:var(--panel-bg);border:1px solid var(--border-color);border-radius:4px}.collapsed-message{background-color:rgba(52,152,219,.1);border-bottom:1px dashed var(--border-color);color:var(--primary-color);cursor:pointer;font-size:.875rem;font-weight:700;line-height:1.5;padding:3px 10px;text-align:center;transition:background-color .2s}.collapsed-message:hover{background-color:rgba(52,152,219,.2)}.collapsed-content{max-height:400px;overflow-y:auto;padding:10px}.dark-mode .collapsed-message{background-color:rgba(97,218,251,.1)}.dark-mode .collapsed-message:hover{background-color:rgba(97,218,251,.2)}.identical-texts-message{align-items:center;background-color:#e6f7f2;border:1px solid #97e3d5;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.05);display:flex;flex-direction:column;justify-content:center;margin:1rem auto;max-width:500px;padding:2rem;text-align:center}.dark-mode .identical-texts-message{background-color:#1a3a32;border-color:#2d7d6c;color:#e6e6e6}.identical-icon{background-color:rgba(39,174,96,.15);border-radius:50%;color:#27ae60;font-size:3rem;height:64px;line-height:64px;margin-bottom:1rem;width:64px}.dark-mode .identical-icon{background-color:rgba(74,222,128,.15);color:#4ade80}.identical-texts-message h2{color:#2c3e50;font-size:1.8rem;margin-bottom:.5rem}.dark-mode .identical-texts-message h2{color:#e6e6e6}.identical-texts-message p{color:#7f8c8d;font-size:1rem}.dark-mode .identical-texts-message p{color:#a0aec0}.stats{color:var(--subtext-color);display:flex;flex-wrap:wrap;font-size:.8rem;gap:1rem;margin-top:.5rem}@media (max-width:768px){.stats{font-size:.75rem;justify-content:space-between;width:100%}}.app-layout{display:flex;margin:20px 0;min-height:calc(100vh - 200px);width:100%}.sidebar{background:var(--panel-bg);border-right:1px solid var(--panel-border);height:fit-content;min-width:220px;padding:15px;position:relative;transition:all .3s ease;width:220px}.sidebar.collapsed{border-right:none;margin:0;min-width:0;padding:0;width:0}.sidebar.collapsed .sidebar-content{display:none}.sidebar-toggle{align-items:center;background-color:var(--panel-bg);border:2px solid var(--panel-border);border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.15);cursor:pointer;display:flex;height:35px;justify-content:center;position:absolute;right:-35px;top:20px;transition:all .3s ease;width:35px;z-index:10}.sidebar:not(.collapsed) .sidebar-toggle{right:-20px}.sidebar-toggle:hover{background-color:var(--btn-hover-bg);box-shadow:0 4px 12px rgba(0,0,0,.2)}.sidebar:not(.collapsed) .toggle-icon{margin-top:.2rem;transform:rotate(180deg)}.sidebar.collapsed .toggle-icon{margin-bottom:.2rem}.toggle-icon{color:var(--text-color);display:inline-block;font-size:1.8rem;transition:transform .3s ease}.dark-mode .toggle-icon{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4)}.sidebar-content{height:100%;overflow-y:auto}.sidebar-section{margin-bottom:1.5rem}.sidebar-section h3{color:var(--text-color);font-size:.9rem;font-weight:600;margin-bottom:.75rem;margin-top:0;text-transform:uppercase}.ignore-buttons,.option-group{display:flex;flex-direction:column;gap:.75rem}.ignore-btn{background-color:var(--primary-btn-bg);border:1px solid var(--primary-btn-hover);border-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,.1);color:#fff;cursor:pointer;font-size:.9rem;font-weight:500;padding:.6rem 1rem;text-align:center;transition:all .2s ease}.ignore-btn:hover{background-color:var(--primary-btn-hover);box-shadow:0 3px 6px rgba(0,0,0,.15);transform:translateY(-1px)}.main-content{flex:1;min-width:0;transition:width .3s ease;width:100%}.sidebar:not(.collapsed)+.main-content{width:calc(100% - 220px)}.checkpoints-section{display:flex;flex-direction:column;gap:10px;margin-top:10px}.checkpoints-list{display:flex;flex-direction:column;gap:5px;max-height:200px;overflow-y:auto}.checkpoint-item{align-items:center;background-color:var(--btn-bg);border:1px solid var(--panel-border);border-radius:4px;cursor:pointer;display:flex;font-size:.85rem;justify-content:space-between;padding:6px 10px;transition:background-color .2s}.checkpoint-item:hover{background-color:var(--btn-hover-bg)}.checkpoint-item.active{background-color:rgba(52,152,219,.2);border-color:var(--primary-btn-bg)}.checkpoint-date{flex:1;font-weight:700}.checkpoint-delete{background:none;border:none;color:var(--removed-color);cursor:pointer;font-size:1rem;padding:0 5px}.option-group label{align-items:center;color:var(--text-color);cursor:pointer;display:flex;font-size:.9rem}.option-group input{margin-right:.5rem}.results-panel{animation:fadeInUp .4s ease-out;background-color:var(--panel-bg);border:1px solid var(--panel-border);border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.1);margin:.5rem 0 1rem;padding:.75rem}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.results{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}.result-item{align-items:center;border-radius:4px;display:flex;font-size:.9rem;gap:.25rem;padding:.3rem .75rem}@media (max-width:576px){.results{flex-direction:column;gap:.5rem}.result-item{font-size:.8rem;justify-content:center;width:100%}}.added{background-color:var(--added-bg);color:var(--added-color)}.removed{background-color:var(--removed-bg);color:var(--removed-color)}.changed{background-color:var(--changed-bg);color:var(--changed-color)}.comparison-panel{animation:slideDown .4s ease-out;border-radius:6px;box-shadow:0 2px 4px rgba(0,0,0,.1);margin:1.5rem 0;padding:1rem;transform-origin:top}@keyframes slideDown{0%{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}.comparison-content{background-color:var(--panel-bg);border:1px solid var(--panel-border);border-radius:4px;color:var(--text-color);font-family:monospace;font-size:13px;line-height:1.5;margin-top:1rem;min-height:200px;overflow-x:auto;padding:1rem;white-space:pre-wrap}.word-highlight-added{background-color:var(--added-bg);color:var(--added-color)}.word-highlight-added,.word-highlight-removed{border-radius:3px;display:inline-block;margin:0 1px;padding:2px 4px}.word-highlight-removed{background-color:var(--removed-bg);color:var(--removed-color);text-decoration:line-through}.btn{background-color:var(--btn-bg);border:1px solid var(--panel-border);border-radius:4px;color:var(--btn-color);cursor:pointer;font-size:.8rem;padding:.25rem .5rem}.btn:hover{background-color:var(--btn-hover-bg)}.actions{align-items:center;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}.top-actions{margin:.5rem 0 1rem;padding:0 1rem;width:100%}@media (max-width:576px){.actions{gap:.5rem}.actions,.top-actions{padding:0 .5rem}.primary-btn,.secondary-btn,.share-btn{font-size:.8rem;padding:.4rem .75rem}}.primary-btn{background-color:var(--primary-btn-bg);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;padding:.5rem 1rem}.primary-btn:hover{background-color:var(--primary-btn-hover)}.large-btn{font-size:1rem;font-weight:700;padding:.75rem 1.5rem}.compare-button-container{display:flex;justify-content:center;margin:1.5rem 0;width:100%}.secondary-btn{background-color:var(--btn-bg);border:1px solid var(--panel-border);border-radius:4px;color:var(--text-color);cursor:pointer;font-size:.9rem;font-weight:400;padding:.5rem 1rem}.secondary-btn:hover{background-color:var(--btn-hover-bg)}.share-btn{background-color:var(--btn-bg);border:1px solid var(--panel-border);border-radius:4px;color:var(--text-color);cursor:pointer;font-size:.9rem;font-weight:400;padding:.5rem 1rem}.share-btn:hover{background-color:var(--btn-hover-bg)}.share-dialog{align-items:center;backdrop-filter:blur(2px);background-color:var(--dialog-overlay);display:none;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.share-dialog.active{animation:fadeIn .3s ease-out;display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.share-dialog-content{animation:slideUp .3s ease-out;background-color:var(--panel-bg);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.15);color:var(--text-color);max-width:550px;padding:2.5rem;position:relative;width:90%}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.share-dialog-content h2{color:var(--heading-color);font-size:1.6em;margin-bottom:1rem;margin-top:0}.share-dialog-content p{line-height:1.5;margin-bottom:1.5rem}.close-button{align-items:center;border-radius:50%;color:var(--subtext-color);cursor:pointer;display:flex;font-size:1.8rem;height:30px;justify-content:center;line-height:1;position:absolute;right:20px;top:15px;transition:color .2s,transform .2s;width:30px}.close-button:hover{background-color:rgba(0,0,0,.05);color:var(--text-color);transform:rotate(90deg)}.share-url-container{border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.1);display:flex;margin:1.5rem 0;overflow:hidden}.share-url-container input{background-color:var(--input-bg);border:1px solid var(--border-color);border-radius:6px 0 0 6px;color:var(--text-color);flex:1;font-family:monospace;font-size:1rem;padding:.8rem 1rem}.share-url-container input:focus{border-color:var(--primary-color);outline:none}.share-url-container button{align-items:center;background-color:var(--btn-bg);border:1px solid var(--border-color);border-left:none;border-radius:0 6px 6px 0;color:var(--btn-color);cursor:pointer;display:flex;font-size:.95rem;font-weight:600;gap:6px;padding:.8rem 1.2rem;transition:all .2s}.share-url-container button:hover{background-color:var(--btn-hover-bg)}.copy-icon{font-size:1.1rem}.share-status{border-radius:6px;font-size:.95rem;margin-top:1.2rem;padding:.8rem;text-align:center;transition:all .3s}.share-status.success{animation:pulse 1.5s;background-color:var(--added-bg);color:var(--added-color)}.share-status.error{animation:shake .5s;background-color:var(--removed-bg);color:var(--removed-color)}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.03)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}.share-dialog-footer{border-top:1px solid var(--border-color);color:var(--subtext-color);display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:2rem;padding-top:1.5rem}.share-expiry,.share-security{align-items:center;display:flex;font-size:.9rem;gap:8px}.expiry-icon,.security-icon{font-size:1.2rem}.loading-spinner{animation:spin 1s linear infinite;border:2px solid hsla(0,0%,100%,.3);border-radius:50%;border-top-color:#fff;display:inline-block;height:1em;margin-right:.5rem;vertical-align:middle;width:1em}footer{background-color:var(--panel-bg);border-top:1px solid var(--footer-border);color:var(--subtext-color);font-size:.8rem;padding:1rem 0;text-align:center;width:100%}.footer-content{margin:0 auto;max-width:1200px;padding:1rem}.footer-main{margin-bottom:1.5rem}.footer-main h2{color:var(--heading-color);font-size:1.2rem;margin-bottom:.5rem}.footer-main p{color:var(--subtext-color);font-size:.9rem}.footer-bottom{align-items:center;border-top:1px solid var(--footer-border);display:flex;flex-wrap:wrap;justify-content:space-between;padding-top:1rem}.footer-bottom p{animation:gradientShift 10s linear infinite;background:linear-gradient(90deg,#3498db,#2ecc71);background-clip:text;-webkit-background-clip:text;color:transparent;font-size:.8rem;font-weight:600;margin-bottom:.5rem;padding:10px 0;text-shadow:0 2px 5px rgba(0,0,0,.1)}@keyframes gradientShift{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.footer-links{display:flex;gap:1rem}.footer-links a{color:var(--subtext-color);font-size:.8rem;text-decoration:none;transition:color .2s}.footer-links a:hover{color:var(--primary-color)}.page-content{margin:0 auto;max-width:1200px;padding:2rem 1rem}.page-header{margin-bottom:2rem;text-align:center}.page-header h1{color:var(--heading-color);font-size:2.5rem;margin-bottom:1rem}.page-intro{color:var(--subtext-color);font-size:1.1rem;margin:0 auto;max-width:800px}.about-section{margin-bottom:3rem}.about-section h2{border-bottom:2px solid var(--primary-color);color:var(--heading-color);display:inline-block;font-size:1.8rem;margin-bottom:1rem;padding-bottom:.5rem}.about-section p{line-height:1.6;margin-bottom:1rem}.feature-grid,.use-case-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin-top:1.5rem}.feature-item,.use-case-item{background-color:var(--panel-bg);border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);padding:1.5rem;transition:transform .2s,box-shadow .2s}.feature-item:hover,.use-case-item:hover{box-shadow:0 5px 15px rgba(0,0,0,.1);transform:translateY(-5px)}.feature-item h3,.use-case-item h3{color:var(--heading-color);font-size:1.2rem;margin-bottom:.75rem}.tech-stack-list{list-style-type:none;padding-left:1rem}.tech-stack-list li{margin-bottom:.75rem;padding-left:1.5rem;position:relative}.tech-stack-list li:before{color:var(--primary-color);content:"▹";left:0;position:absolute}.privacy-section{margin-bottom:2.5rem}.privacy-section h2{color:var(--heading-color);font-size:1.5rem;margin-bottom:1rem}.privacy-section h3{color:var(--heading-color);font-size:1.2rem;margin:1.5rem 0 .75rem}.privacy-section ul{margin-bottom:1rem;padding-left:1.5rem}.privacy-section li{margin-bottom:.5rem}.feedback-section{margin-bottom:3rem}.feedback-form-container{background-color:var(--panel-bg);border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);margin:0 auto;max-width:800px;padding:2rem}.feedback-form{gap:1.5rem}.feedback-form,.form-group{display:flex;flex-direction:column}.form-group{gap:.5rem}.form-group label{color:var(--text-color);font-weight:600}.form-group input,.form-group select,.form-group textarea{background-color:var(--input-bg);border:1px solid var(--border-color);border-radius:4px;color:var(--text-color);font-size:1rem;padding:.75rem}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary-color);outline:none}.btn-primary{background-color:var(--primary-btn-bg);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:1rem;padding:.75rem 1.5rem;transition:background-color .2s}.btn-primary:hover{background-color:var(--primary-btn-hover)}.btn-secondary{background-color:var(--secondary-btn-bg);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:1rem;padding:.75rem 1.5rem;transition:background-color .2s}.btn-secondary:hover{background-color:var(--secondary-btn-hover)}.submit-btn{align-self:flex-start}.feedback-response{text-align:center}.success-message{align-items:center;display:flex;flex-direction:column;gap:1rem}.success-message i{color:var(--share-btn-bg);font-size:3rem}.success-message h3{color:var(--heading-color);font-size:1.5rem}.success-message p{color:var(--text-color);margin-bottom:1.5rem}.faq-container{margin-top:1.5rem}.faq-item{border:1px solid var(--border-color);border-radius:8px;margin-bottom:1rem;overflow:hidden}.faq-question{align-items:center;background-color:var(--btn-bg);cursor:pointer;display:flex;justify-content:space-between;padding:1rem}.faq-question h3{color:var(--text-color);font-size:1.1rem;margin:0}.faq-toggle{transition:transform .3s}.faq-item.active .faq-toggle{transform:rotate(180deg)}.faq-answer{max-height:0;overflow:hidden;padding:0 1rem;transition:max-height .3s,padding .3s}.faq-item.active .faq-answer{max-height:500px;padding:1rem}.contact-methods{display:flex;flex-direction:column;gap:1rem;list-style-type:none;padding:0}.contact-methods li{align-items:center;display:flex;gap:.75rem}.contact-methods i{color:var(--primary-color);font-size:1.2rem;text-align:center;width:25px}.text-link{color:var(--primary-color);text-decoration:none;transition:color .2s}.text-link:hover{text-decoration:underline}.main-nav-links a.active{color:var(--primary-color);font-weight:700}.main-nav-links a.active:after{background-color:var(--primary-color);bottom:0;content:"";height:2px;left:0;position:absolute;width:100%}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}#comparisonDisplayPanels{border-bottom:1px solid var(--panel-border);margin-bottom:1.5rem;padding-bottom:1rem}#comparisonDisplayPanels h3{color:var(--text-color);margin-bottom:.75rem;margin-left:.75rem}.comparison-display{gap:.5rem}.comparison-panel{background-color:var(--panel-bg);border:1px solid var(--panel-border)}.compare-area-container{background-color:var(--textarea-bg);border:1px solid var(--panel-border);border-radius:4px;height:auto;min-height:fit-content;position:relative}.compare-display{color:var(--text-color);font-family:monospace;font-size:13px;height:100%;line-height:1.5;min-height:100%;overflow-wrap:break-word;padding:8px 4px;tab-size:4;width:100%}.code-comparison-section{background-color:var(--card-bg);border-radius:12px;box-shadow:var(--card-shadow);margin:30px 0;overflow:hidden;padding:30px;position:relative}.code-comparison-section:before{background:linear-gradient(90deg,var(--primary-color),var(--primary-btn-hover));content:"";height:5px;left:0;position:absolute;top:0;width:100%}.code-comparison-section h3{color:var(--heading-color);display:inline-block;font-size:1.6em;font-weight:700;margin-bottom:20px;position:relative}.code-comparison-section h3:after{background-color:var(--primary-color);bottom:-6px;content:"";height:3px;left:0;position:absolute;width:50px}.code-comparison-intro{line-height:1.6;margin-bottom:25px;max-width:900px}.code-comparison-features{display:grid;gap:25px;grid-template-columns:repeat(3,1fr);margin-top:25px}.feature-card{background-color:var(--bg-color);border:1px solid transparent;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.08);display:flex;flex-direction:column;height:100%;padding:20px;transition:transform .3s,box-shadow .3s}.feature-card:hover{border-color:var(--primary-color);box-shadow:0 6px 12px rgba(0,0,0,.15);transform:translateY(-5px)}.feature-card h4{color:var(--primary-color);font-size:1.2em;font-weight:600;margin-bottom:12px}.feature-card p{flex:1;font-size:.95em;margin-bottom:18px}.code-sample,.feature-card p{color:var(--text-color);line-height:1.5}.code-sample{background-color:var(--panel-bg);border-left:3px solid var(--primary-color);border-radius:6px;font-family:Consolas,Monaco,monospace;font-size:13px;margin:15px 0;overflow-x:auto;padding:12px}.option{margin-top:15px}.options-container{background-color:var(--panel-bg);border-radius:8px;margin-top:30px;padding:20px}.options-heading{color:var(--heading-color);font-size:1.1em;margin-bottom:15px}.language-selector{align-items:center;display:flex;flex-wrap:wrap;gap:15px;margin-top:25px}.language-selector label{color:var(--text-color);font-size:1em;font-weight:600}.language-selector select{background-color:var(--input-bg);border:1px solid var(--border-color);border-radius:6px;color:var(--text-color);cursor:pointer;font-size:.95em;min-width:200px;padding:10px 15px;transition:border-color .2s,box-shadow .2s}.language-selector select:focus,.language-selector select:hover{border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(52,152,219,.2);outline:none}.code-toggle-container{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}.code-toggle-btn{background-color:var(--btn-bg);border:1px solid var(--border-color);border-radius:4px;color:var(--text-color);cursor:pointer;font-size:.9em;padding:8px 16px;transition:all .2s}.code-toggle-btn:hover{background-color:var(--btn-hover-bg)}.code-toggle-btn.active{background-color:var(--primary-btn-bg);border-color:var(--primary-btn-hover);color:#fff}.secure-sharing-section{background-color:var(--card-bg);border-radius:12px;box-shadow:var(--card-shadow);margin:30px 0;overflow:hidden;padding:30px;position:relative}.secure-sharing-section:before{background:linear-gradient(90deg,var(--share-btn-bg),var(--share-btn-hover));content:"";height:5px;left:0;position:absolute;top:0;width:100%}.secure-sharing-section h3{color:var(--heading-color);display:inline-block;font-size:1.6em;font-weight:700;margin-bottom:20px;position:relative}.secure-sharing-section h3:after{background-color:var(--share-btn-bg);bottom:-6px;content:"";height:3px;left:0;position:absolute;width:50px}.secure-sharing-intro{line-height:1.6;margin-bottom:25px;max-width:900px}.security-features{list-style-type:none;margin:20px 0;padding-left:10px}.security-features li{line-height:1.6;margin-bottom:15px;padding-left:30px;position:relative}.security-features li:before{color:var(--share-btn-bg);content:"✓";font-size:1.1em;font-weight:700;left:0;position:absolute}.security-icon{color:var(--share-btn-bg);display:inline-block;font-size:1.2em;margin-right:10px;vertical-align:middle}.sharing-info-grid{display:grid;gap:25px;grid-template-columns:repeat(2,1fr);margin-top:30px}.sharing-info-card{background-color:var(--panel-bg);border-left:3px solid var(--share-btn-bg);border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.08);padding:20px}.sharing-info-card h4{color:var(--heading-color);font-size:1.1em;margin-bottom:12px}.sharing-info-card p{color:var(--text-color);font-size:.95em;line-height:1.5}.syntax-highlight{font-family:Consolas,Monaco,monospace;line-height:1.5;overflow-x:auto;tab-size:4;white-space:pre-wrap}.keyword{color:#569cd6}.string{color:#ce9178}.comment{color:#6a9955;font-style:italic}.number{color:#b5cea8}.function{color:#dcdcaa}.type{color:#4ec9b0}.variable{color:#9cdcfe}.bracket,.operator{color:#d4d4d4}.parameter,.property{color:#9cdcfe}.class-name{color:#4ec9b0}.dark-mode .keyword{color:#c586c0}.dark-mode .string{color:#ce9178}.dark-mode .comment{color:#6a9955}.dark-mode .number{color:#b5cea8}.dark-mode .function{color:#dcdcaa}.dark-mode .type{color:#4ec9b0}.dark-mode .variable{color:#9cdcfe}.dark-mode .bracket,.dark-mode .operator{color:#d4d4d4}.dark-mode .parameter,.dark-mode .property{color:#9cdcfe}.dark-mode .class-name{color:#4ec9b0}.line-number{color:var(--subtext-color);display:inline-block;height:1.5em;margin-right:.3em;text-align:center;user-select:none}#leftCompareDisplay .line-wrapper:not([data-line-number]) .line-content,#rightCompareDisplay .line-wrapper:not([data-line-number]) .line-content{background-color:#bfc6c645;color:#666}.mirror-overlay{box-sizing:border-box;font-family:monospace;font-size:14px;left:0;line-height:1.5;overflow:hidden;padding:8px;position:absolute;top:0;visibility:hidden;width:calc(100% - 40px)}.diff-normal-chunk,.mirror-overlay{white-space:pre-wrap;word-wrap:break-word}.diff-normal-chunk{overflow-wrap:break-word;word-break:break-all}.code-diff-line{padding:0 4px;position:relative}.code-diff-added{background-color:rgba(20,70,32,.5)}.code-diff-removed{background-color:rgba(94,28,35,.5)}.diff-marker{color:var(--subtext-color);left:3.5em;position:absolute;user-select:none}@media screen and (max-width:768px){.app-layout{flex-direction:column}.sidebar{border-right:none;margin-top:1rem;order:2}.sidebar,.sidebar.collapsed{border-bottom:1px solid var(--panel-border);min-width:100%;padding:15px;width:100%}.sidebar.collapsed{margin:0}.sidebar-toggle{display:none}.main-content{order:1;width:100%}.sidebar.collapsed+.main-content{width:100%}.code-comparison-features,.sharing-info-grid{grid-template-columns:1fr}.language-selector{align-items:flex-start;flex-direction:column}.language-selector select{width:100%}.code-toggle-container,.option-group{justify-content:center}.option-group{flex-direction:row;flex-wrap:wrap;gap:.5rem}.sidebar-section{margin-bottom:1rem}}@media (max-width:768px){.text-areas,.text-panel{margin-left:0}}@media screen and (min-width:768px){.app-layout{gap:0}.sidebar:not(.collapsed)+.main-content .text-areas{margin-left:1rem}.sidebar:not(.collapsed)+.main-content{width:calc(100% - 220px)}.sidebar:not(.collapsed)~.app-layout{gap:20px}}@media screen and (max-width:767px){.app-layout{gap:0}.sidebar:not(.collapsed)+.main-content{width:100%}.sidebar.collapsed{border-bottom:1px solid var(--panel-border);margin:0;min-width:100%;padding:15px;width:100%}.sidebar.collapsed .sidebar-content{display:block}.sidebar-toggle{display:none}}.line-wrapper{align-items:flex-start;display:flex;min-height:1.5em;position:relative;width:100%}.line-content{flex-grow:1;min-height:inherit;white-space:pre-wrap;word-break:break-word}.loader-container{align-items:center;display:flex;flex-direction:column;justify-content:center;margin:20px 0;padding:20px}.loader{animation:spin 1s linear infinite;border-top:4px solid var(--border-color);border:4px solid var(--border-color);border-radius:50%;border-top-color:var(--primary-color);height:40px;margin-bottom:10px;width:40px}.loader-text{color:var(--text-color);font-size:14px;text-align:center}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.dark-mode .loader{border-color:var(--dark-border-color);border-top-color:var(--primary-color)}.skip-link{background:#4a86e8;color:#fff;left:0;padding:8px;position:absolute;top:-40px;transition:top .3s;z-index:100}.skip-link:focus{top:0}:focus{outline:2px solid #4a86e8;outline-offset:2px}@media (prefers-contrast:high){:root{--text-color:#000;--bg-color:#fff}}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}.cookie-consent{background-color:var(--bg-color);bottom:0;box-shadow:0 -2px 10px rgba(0,0,0,.1);color:var(--text-color);display:none;left:0;padding:1rem;position:fixed;right:0;z-index:1000}.cookie-content{align-items:center;display:flex;gap:1rem;justify-content:space-between;margin:0 auto;max-width:1200px}.cookie-content p{flex:1;margin:0}.cookie-buttons{display:flex;gap:.5rem}.dark-mode .cookie-consent{background-color:var(--bg-color);box-shadow:0 -2px 10px rgba(0,0,0,.3)}.line-content:has(.highlight-added){background-color:var(--highlight-added-color)}.line-content:has(.highlight-removed){background-color:var(--highlight-removed-color)}.has-removed-highlight{background-color:var(--highlight-removed-color)}.has-added-highlight{background-color:var(--highlight-added-color)}@media (max-width:768px){.cookie-content{flex-direction:column;text-align:center}.cookie-buttons{justify-content:center;width:100%}}