@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";:root{--bg-dark:#09090b;--bg-panel:#18181b;--bg-panel-hover:#27272a;--border-color:#3f3f46;--primary-purple:#a855f7;--primary-purple-hover:#9333ea;--primary-blue:#3b82f6;--text-main:#f4f4f5;--text-muted:#a1a1aa}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-main);direction:rtl;font-family:Outfit,sans-serif;overflow:hidden}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--primary-purple)}.app-container{flex-direction:column;height:100vh;display:flex}.navbar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-color);z-index:10;background:#18181bb3;justify-content:space-between;align-items:center;height:70px;padding:0 30px;display:flex}.brand{background:linear-gradient(90deg, var(--primary-purple), var(--primary-blue));-webkit-text-fill-color:transparent;-webkit-background-clip:text;align-items:center;gap:12px;font-size:22px;font-weight:700;display:flex}.search-container{width:350px;position:relative}.search-input{background:var(--bg-dark);border:1px solid var(--border-color);width:100%;color:var(--text-main);border-radius:20px;padding:10px 40px 10px 15px;font-family:inherit;transition:all .3s}.search-input:focus{border-color:var(--primary-purple);outline:none;box-shadow:0 0 10px #a855f74d}.search-icon{color:var(--text-muted);position:absolute;top:50%;right:12px;transform:translateY(-50%)}.content-area{flex:1;display:flex;overflow:hidden}.sidebar{background:var(--bg-panel);border-left:1px solid var(--border-color);flex-direction:column;width:380px;display:flex;overflow-y:auto}.level-item{border-bottom:1px solid var(--border-color)}.level-header{cursor:pointer;justify-content:space-between;align-items:center;padding:18px 20px;font-weight:600;line-height:1.4;transition:background .2s;display:flex}.level-header:hover{background:var(--bg-panel-hover)}.level-header.active{border-right:4px solid var(--primary-purple);background:#a855f71a}.sections-list{background:var(--bg-dark);padding:10px 0}.section-item{cursor:pointer;color:var(--text-muted);border-bottom:1px solid #3f3f464d;padding:12px 20px 12px 30px;font-size:15px;transition:all .2s}.section-item:hover{color:var(--text-main);background:var(--bg-panel)}.section-item.active{color:var(--primary-purple);background:#a855f70d;font-weight:500}.main-view{background:var(--bg-dark);flex:1;padding:40px;overflow-y:auto}.welcome-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex}.welcome-screen h2{color:var(--primary-purple);margin-bottom:15px;font-size:32px}.welcome-screen p{color:var(--text-muted);max-width:600px;font-size:18px}.html-content{max-width:900px;margin:0 auto;font-size:18px;line-height:1.9}.html-content h2{color:var(--primary-purple);border-bottom:1px solid var(--border-color);margin-top:40px;margin-bottom:20px;padding-bottom:10px;font-size:28px}.html-content h3{color:var(--primary-blue);margin-top:30px;margin-bottom:15px}.html-content p{color:#d4d4d8;margin-bottom:20px}.html-content .code-box{color:#e2e8f0;text-align:left;border-left:5px solid var(--primary-purple);white-space:pre-wrap;direction:ltr;background-color:#000;border-radius:10px;margin:25px 0;padding:20px;font-family:Consolas,monospace;font-size:16px;overflow-x:auto;box-shadow:inset 0 0 10px #00000080}.html-content .alert{color:#e0e7ff;border-right:5px solid var(--primary-purple);background:linear-gradient(90deg,#a855f71a 0%,#3b82f61a 100%);border-radius:8px;margin:25px 0;padding:20px;font-size:19px;box-shadow:0 4px 15px #0003}.html-content .vs-table{border-collapse:separate;border-spacing:0;border:1px solid var(--border-color);border-radius:8px;width:100%;margin:25px 0;font-size:17px;overflow:hidden;box-shadow:0 4px 6px #0000004d}.html-content .vs-table th,.html-content .vs-table td{text-align:right;border-bottom:1px solid var(--border-color);width:50%;padding:15px}.html-content .vs-table th{background-color:var(--bg-panel);color:var(--text-main);text-align:center}.html-content .vs-table td.vs-pro{background-color:#10b9811a;border-right:4px solid #10b981}.html-content .vs-table td.vs-con{background-color:#ef44441a;border-right:4px solid #ef4444}.html-content .result-box{color:#a7f3d0;background:linear-gradient(90deg,#10b9811a 0%,#10b9810d 100%);border-right:5px solid #10b981;border-radius:8px;margin-top:20px;padding:20px;font-size:18px;font-weight:700}