:root{--primary: #3b82f6;--primary-hover: #2563eb;--primary-dark: #1e40af;--primary-color: #3b82f6;--title-color: #3b82f6;--background: #f0f4f8;--text: #1e293b;--text-primary: #1e293b;--card-bg: #ffffff;--card-shadow: rgba(0, 0, 0, .08);--input-bg: #ffffff;--input-border: #cbd5e1;--border-color: #cbd5e1;--filter-bg: #f9fafb;--completed-color: #4fe285;--accent-easy: #22c55e;--accent-medium: #f59e0b;--accent-hard: #ef4444;--accent-easy-bg: #d1fae5;--accent-medium-bg: #fef08a;--accent-hard-bg: #fecaca;--status-button: #22c55e;--accent-easy-nav: #22c55e;--accent-medium-nav: #f59e0b;--accent-hard-nav: #ef4444}body.dark{--primary: #60a5fa;--primary-hover: #3b82f6;--primary-dark: #2563eb;--primary-color: #60a5fa;--title-color: #1974e3;--background: #0d1117;--text: #f3f4f6;--text-primary: #f3f4f6;--card-bg: #1e293b;--card-shadow: rgba(255, 255, 255, .04);--input-bg: #111827;--input-border: #374151;--border-color: #374151;--filter-bg: #1f2937;--completed-color: #2dd46a;--accent-easy: #d1fae5;--accent-medium: #fef08a;--accent-hard: #fecaca;--accent-easy-bg: #1fac53;--accent-medium-bg: #f7b715;--accent-hard-bg: #f65959;--status-button: #22c55e;--accent-easy-nav: #22c55e;--accent-medium-nav: #f59e0b;--accent-hard-nav: #ef4444}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin:0;padding:0;background-color:var(--background);color:var(--text);transition:background-color .3s,color .3s;max-width:100vw;overflow-x:hidden}.problems-container{max-width:1200px;margin:auto;padding:2rem;width:100%;box-sizing:border-box;overflow-x:hidden}.problems-inner{width:100%;max-width:100vw;box-sizing:border-box;overflow-x:hidden}.navbar{display:flex;justify-content:space-between;align-items:center;background-color:var(--filter-bg);padding:1rem 1.5rem;border-radius:16px;margin-bottom:1.5rem;transition:all .3s ease-in-out}.navbar-title{font-size:26px;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:10px}.navbar-title img{height:24px;width:24px}.navbar-progress{margin-left:1rem;font-size:14px;font-weight:500;color:var(--text)}.navbar-diff span{margin-left:1rem;padding:5px 12px;border-radius:9999px;font-size:13px;font-weight:600;box-shadow:0 2px 6px var(--card-shadow);display:inline-block}.diff-easy{color:var(--accent-easy-nav);border:1px solid var(--accent-easy-nav)}.diff-medium{color:var(--accent-medium-nav);border:1px solid var(--accent-medium-nav)}.diff-hard{color:var(--accent-hard-nav);border:1px solid var(--accent-hard-nav)}.filters-section{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:1.5rem;background-color:var(--filter-bg);padding:1rem;border-radius:10px;align-items:center}.filters-section input,.filters-section select,.filters-section button{padding:8px 12px;border:1px solid var(--input-border);background-color:var(--input-bg);border-radius:6px;font-size:14px;color:var(--text);transition:.2s ease}.filters-section button{background-color:var(--primary);color:#fff;border:none}.filters-section button:hover{background-color:var(--primary-hover)}.rating-input-group{display:flex;align-items:center;gap:8px;color:var(--text)}.rating-input-group input{width:110px;color:var(--text)}.filters-top{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px;width:100%}.filters-bottom{display:flex;justify-content:center;gap:12px;width:100%}.filters-bottom button{padding:8px 14px;border-radius:6px;border:none;background-color:var(--primary);color:#fff;font-size:14px;cursor:pointer;transition:.2s ease}.filters-bottom button:hover{background-color:var(--primary-hover)}.problems-table-container{background:var(--card-bg);padding:1.5rem;border-radius:12px;overflow-x:auto;box-shadow:0 4px 12px var(--card-shadow);transition:background-color .3s ease}.problems-table{width:100%;border-collapse:collapse;min-width:900px}.problems-table th,.problems-table td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--border-color);font-size:14px}.problems-table th{background-color:var(--table-head-bg);font-weight:600;color:var(--table-head-text);cursor:pointer;position:sticky;top:0;z-index:1;transition:background-color .3s ease}.problems-table tr{transition:background-color .2s ease}.problems-table tr:hover{background-color:var(--table-row-hover)}.completed-row{background-color:var(--completed-color)!important;transition:.3s ease}.difficulty-easy{background-color:var(--accent-easy-bg);color:var(--accent-easy)}.difficulty-medium{background-color:var(--accent-medium-bg);color:var(--accent-medium)}.difficulty-hard{background-color:var(--accent-hard-bg);color:var(--accent-hard)}.difficulty-easy,.difficulty-medium,.difficulty-hard{padding:4px 10px;border-radius:20px;font-size:13px;font-weight:500;text-transform:capitalize}.topic-badge,.company-badge{display:inline-block;background:var(--tag-bg, #e0e7ff);color:var(--tag-text, #3730a3);font-size:12px;padding:4px 8px;border-radius:12px;margin:2px;transition:background .2s}.topic-badge:hover,.company-badge:hover{background:var(--tag-bg-hover, #c7d2fe)}.status-btn{padding:6px 12px;font-size:13px;border-radius:6px;cursor:pointer;border:1px solid var(--border-color);background-color:var(--input-bg);color:var(--text);transition:.3s ease}.status-btn:hover{background-color:var(--table-row-hover)}.status-btn.completed{background-color:var(--status-button);color:#fff;border:none}.status-btn.completed:hover{background-color:#059669}.problems-table th.sortable{position:relative;transition:color .2s ease}.sort-arrow{display:inline-block;margin-left:6px;font-size:12px;transition:transform .2s ease;opacity:.7}.sort-asc .sort-arrow{transform:rotate(180deg)}.sort-active{font-weight:700;color:var(--primary)}.problems-table-container::-webkit-scrollbar{height:6px}.problems-table-container::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:4px}.pagination{display:flex;justify-content:center;gap:8px;margin-top:1.5rem;flex-wrap:wrap}.pagination button{padding:6px 10px;border-radius:6px;border:1px solid var(--border-color);background-color:var(--card-bg);font-size:14px;cursor:pointer;color:var(--text);margin-bottom:6px}.pagination button.active{background-color:var(--primary);color:#fff;border-color:var(--primary)}.pagination button:hover:not(.active){background-color:var(--table-row-hover)}.feedback-section{margin-top:2rem;background:var(--card-bg);padding:1.5rem;border-radius:10px;box-shadow:0 4px 12px var(--card-shadow);transition:background .3s ease,color .3s ease}.feedback-section h3{margin-bottom:.75rem;font-size:18px;font-weight:600;color:var(--text-primary)}.feedback-section textarea{width:98%;min-height:100px;margin-bottom:1rem;padding:12px;font-size:14px;border:1px solid var(--border-color);border-radius:8px;resize:vertical;background:var(--input-bg);color:var(--text-primary);transition:border .2s ease,background .3s ease}.feedback-section textarea:focus{border-color:var(--primary-color);outline:none}.feedback-section button{background-color:var(--primary-color);color:#fff;padding:10px 16px;border-radius:8px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:background .3s ease,transform .2s ease}.feedback-section button:hover{background-color:var(--primary-dark);transform:translateY(-1px)}.theme-toggle-btn{background:transparent;border:none;font-size:20px;cursor:pointer;margin-left:16px;color:var(--primary);transition:color .3s ease}.theme-toggle-btn:hover{color:var(--accent-hard)}.rating-na-note{font-size:15px;margin-top:20px;color:var(--text)}@media (max-width: 768px){.filters-section{flex-direction:column;gap:10px;padding:1rem}.filters-section input,.filters-section select,.filters-section button{font-size:13px;padding:8px;width:100%}.filters-bottom{flex-direction:column;align-items:stretch}.filters-bottom button{font-size:15px;padding:10px;width:100%}.navbar{background:var(--card-bg);border-radius:22px;box-shadow:0 2px 12px #00000014;padding:2.5rem 1rem 1.5rem;margin-bottom:1.5rem;display:flex;flex-direction:column;align-items:center;position:relative}.navbar-title{font-size:2rem;font-weight:800;color:var(--primary);text-align:center;margin-bottom:.3rem}.navbar-progress{font-size:1.1rem;color:var(--text);margin-bottom:1.1rem;margin-top:2.5rem;text-align:center;display:block}.navbar-diff{display:flex;flex-direction:column;align-items:center;gap:.7rem;width:100%;margin-bottom:.7rem}.diff-easy,.diff-medium,.diff-hard{font-size:1.1rem;font-weight:700;border-radius:999px;padding:.5rem 1.5rem;border-width:2px;background:#fff;box-shadow:0 1px 4px #0000000a;text-align:center;width:fit-content;margin:0 auto}.theme-toggle-btn{position:absolute;top:1.1rem;right:1.1rem;font-size:2rem;background:transparent;border:none;color:var(--primary);z-index:2;margin:0;padding:0}.problems-container{padding:1rem}.problem-card{max-width:98vw;margin:0 auto 1rem;box-sizing:border-box;padding:.75rem .5rem}.pagination{flex-wrap:wrap;justify-content:center}.pagination button{margin-bottom:6px}.feedback-section{padding:1rem}.feedback-section textarea,.feedback-section button{width:100%;box-sizing:border-box}.feedback-section textarea{min-height:90px;font-size:15px}.feedback-section button{margin-top:8px;font-size:15px;padding:12px 0}}@media (max-width: 768px){.problems-table{display:block}.problems-table thead{display:none}.problems-table tr{display:flex;flex-direction:column;padding:12px;border:1px solid var(--border-color);border-radius:8px;margin-bottom:12px;background:var(--card-bg)}.problems-table td{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;border:none}.problems-table td:before{content:attr(data-label);font-weight:600;color:var(--text);margin-right:10px}.status-btn{align-self:flex-end;margin-top:10px}}.problems-table-container{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.problems-table-container::-webkit-scrollbar{height:4px}.problems-table-container::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:2px}.problems-table-container{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:1rem;box-sizing:border-box;width:100%}.problems-table{width:100%;border-collapse:collapse;table-layout:fixed}.problems-table th,.problems-table td{padding:10px 8px;word-wrap:break-word;font-size:13px}@media (max-width: 768px){.problems-container{padding:1rem}.problems-table th,.problems-table td{font-size:12px;padding:8px 6px}.filters-section{padding:1rem}.navbar{flex-direction:column;gap:10px;align-items:flex-start}.navbar-diff{display:flex;flex-wrap:wrap;gap:6px}}@media (max-width: 768px){.problems-table{display:none}.problem-card{background:var(--card-bg);padding:1rem;border-radius:10px;box-shadow:0 2px 6px var(--card-shadow);margin-bottom:1rem;width:100%}.problem-card h3{font-size:16px;margin:0 0 .5rem}.problem-card .meta{display:flex;flex-wrap:nowrap;gap:8px;align-items:center;margin-bottom:.5rem}.problem-card .badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:.5rem}.problem-card .status-btn{margin-top:.5rem}}@media (max-width: 768px){.problems-table{border:0}.problems-table thead{display:none}.problems-table tr{display:block;margin-bottom:1rem;border:1px solid var(--border-color);border-radius:10px;padding:1rem;background-color:var(--card-bg);box-shadow:0 2px 6px var(--card-shadow)}.problems-table td{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;border-bottom:1px solid var(--border-color)}.problems-table td:last-child{border-bottom:none}.problems-table td:before{content:attr(data-label);font-weight:600;color:var(--text);flex:1;padding-right:8px;text-transform:capitalize}.problems-table td a{word-break:break-word;text-align:right}}.compact-filter{width:auto;font-size:13px;padding:6px 8px;box-sizing:border-box;min-width:unset;max-width:unset;flex:1 1 120px}.filters-top input.compact-filter,.filters-top select.compact-filter{flex:1 1 120px;width:auto}.rating-input-group.compact-filter{display:flex;gap:4px;flex:1.7 1 200px;min-width:unset;max-width:unset;width:auto}.rating-input-group.compact-filter input{flex:1 1 100px;width:100%;min-width:0;max-width:120px;font-size:13px;padding:6px}.help-btn{background:transparent;border:none;color:var(--primary);font-size:16px;cursor:pointer;margin-left:10px;transition:.2s ease}.help-btn:hover{text-decoration:underline}
