.project-browser-container{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;z-index:10000;display:flex;align-items:center;justify-content:center;font-family:"Press Start 2P",cursive,monospace}.project-browser{width:90%;max-width:1200px;height:85vh;background:linear-gradient(135deg,#1a1a2e,#16213e);border:4px solid #6c6c6c;border-radius:12px;box-shadow:0 8px 32px #000c;display:flex;flex-direction:column;overflow:hidden}.browser-header{background:#2d2d44;border-bottom:3px solid #4a4a6a;padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.browser-title{font-size:14px;color:gold;margin:0;text-shadow:2px 2px 0px #000;letter-spacing:1px}.browser-close{background:#6c6c6c;border:2px solid #4a4a6a;color:#fff;font-size:16px;width:32px;height:32px;cursor:pointer;border-radius:4px;font-family:"Press Start 2P",cursive;transition:all .1s}.browser-close:hover{background:#f44;border-color:#c00;transform:scale(1.1)}.browser-close:active{transform:scale(.95)}.browser-content{display:flex;flex:1;overflow:hidden}.browser-sidebar{width:250px;background:#1a1a2e;border-right:3px solid #4a4a6a;padding:15px;overflow-y:auto;display:flex;flex-direction:column;gap:20px}.browser-search{margin-bottom:10px}.search-input{width:100%;padding:10px;background:#2d2d44;border:2px solid #4a4a6a;border-radius:6px;color:#fff;font-family:"Press Start 2P",cursive;font-size:10px;box-sizing:border-box}.search-input:focus{outline:none;border-color:#00bfff;box-shadow:0 0 8px #00bfff80}.browser-filters{display:flex;flex-direction:column;gap:15px}.filter-section h3{font-size:10px;color:gold;margin:0 0 10px;text-transform:uppercase;letter-spacing:.5px}.filter-buttons{display:flex;flex-direction:column;gap:6px}.filter-btn{background:#2d2d44;border:2px solid #4a4a6a;color:#ccc;padding:8px 12px;font-size:9px;font-family:"Press Start 2P",cursive;cursor:pointer;border-radius:4px;text-align:left;transition:all .1s}.filter-btn:hover{background:#3a3a5a;border-color:#6a6a8a}.filter-btn.active{background:#00bfff;border-color:#09c;color:#fff}.sort-select{width:100%;padding:10px;background:#2d2d44;border:2px solid #4a4a6a;border-radius:6px;color:#fff;font-family:"Press Start 2P",cursive;font-size:9px;cursor:pointer}.clear-filters-btn{background:#6c6c6c;border:2px solid #4a4a6a;color:#fff;padding:10px;font-size:9px;font-family:"Press Start 2P",cursive;cursor:pointer;border-radius:4px;transition:all .1s}.clear-filters-btn:hover{background:#8a8a8a}.browser-main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#0f0f1a}.browser-controls{padding:12px 20px;background:#2d2d44;border-bottom:2px solid #4a4a6a;display:flex;justify-content:space-between;align-items:center}.view-toggle{display:flex;gap:6px}.view-btn{background:#1a1a2e;border:2px solid #4a4a6a;color:#ccc;padding:6px 12px;font-size:9px;font-family:"Press Start 2P",cursive;cursor:pointer;border-radius:4px;transition:all .1s}.view-btn:hover{background:#2a2a3e}.view-btn.active{background:#00bfff;border-color:#09c;color:#fff}.project-count{font-size:9px;color:#ccc}.projects-grid,.projects-list{flex:1;padding:20px;overflow-y:auto;display:grid;gap:20px}.projects-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.projects-list{grid-template-columns:1fr}.project-card{background:#2d2d44;border:3px solid #4a4a6a;border-radius:8px;overflow:hidden;cursor:pointer;transition:all .2s;display:flex;flex-direction:column}.projects-list .project-card{flex-direction:row;max-height:200px}.project-card:hover{border-color:#00bfff;transform:translateY(-2px);box-shadow:0 4px 12px #00bfff4d}.project-card-image{position:relative;width:100%;height:160px;background:#1a1a2e;display:flex;align-items:center;justify-content:center;overflow:hidden}.projects-list .project-card-image{width:300px;flex-shrink:0}.project-card-image img{width:100%;height:100%;object-fit:cover}.project-placeholder{font-size:64px;opacity:.5}.project-status{position:absolute;top:8px;right:8px;padding:4px 8px;font-size:8px;border-radius:4px;font-family:"Press Start 2P",cursive}.project-status.active{background:#0fd75c;color:#000}.project-status.in-progress{background:gold;color:#000}.project-status.archived{background:#8a8a8a;color:#000}.project-card-content{padding:15px;flex:1;display:flex;flex-direction:column;gap:10px}.project-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.project-card-title{font-size:12px;color:#fff;margin:0;flex:1;line-height:1.4}.project-card-category{font-size:8px;color:#00bfff;background:#1a1a2e;padding:4px 8px;border-radius:4px;white-space:nowrap}.project-card-description{font-size:9px;color:#ccc;line-height:1.5;margin:0;flex:1}.project-card-tags{display:flex;flex-wrap:wrap;gap:6px}.project-tag{font-size:7px;color:gold;background:#2a2a3e;padding:3px 6px;border-radius:3px}.project-card-button{background:#00bfff;border:2px solid #0099cc;color:#fff;padding:10px;font-size:9px;font-family:"Press Start 2P",cursive;cursor:pointer;border-radius:4px;transition:all .1s;margin-top:auto}.project-card-button:hover{background:#09c;transform:scale(1.05)}.project-card-button:active{transform:scale(.95)}.no-projects{grid-column:1 / -1;text-align:center;padding:40px;color:#8a8a8a;font-size:12px}.browser-sidebar::-webkit-scrollbar,.projects-grid::-webkit-scrollbar,.projects-list::-webkit-scrollbar{width:8px}.browser-sidebar::-webkit-scrollbar-track,.projects-grid::-webkit-scrollbar-track,.projects-list::-webkit-scrollbar-track{background:#1a1a2e}.browser-sidebar::-webkit-scrollbar-thumb,.projects-grid::-webkit-scrollbar-thumb,.projects-list::-webkit-scrollbar-thumb{background:#4a4a6a;border-radius:4px}.browser-sidebar::-webkit-scrollbar-thumb:hover,.projects-grid::-webkit-scrollbar-thumb:hover,.projects-list::-webkit-scrollbar-thumb:hover{background:#6a6a8a}@media (max-width: 768px){.project-browser{width:100%;height:100vh;border-radius:0}.browser-sidebar{width:200px}.projects-grid{grid-template-columns:1fr}.projects-list .project-card{flex-direction:column;max-height:none}.projects-list .project-card-image{width:100%}}.project-browser-container{background:radial-gradient(circle at 20% 12%,rgb(45 212 191 / 16%) 0,transparent 38%),radial-gradient(circle at 88% 14%,rgb(245 158 11 / 14%) 0,transparent 40%),#030b11e0;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.project-browser{border:2px solid #2f5269;border-radius:14px;background:linear-gradient(180deg,#0c1f2cfa,#08151ffa);box-shadow:0 20px 40px #00000073}.browser-header{background:linear-gradient(180deg,#11374feb,#0c212ef5);border-bottom:2px solid #2f5269}.browser-title{font-size:12px;color:#f59e0b;text-shadow:1px 1px 0 #000}.browser-close{border:1px solid #2f5269;background:#07131beb}.browser-close:hover{background:#f9731638;border-color:#f97316;transform:none}.browser-sidebar{background:#050f17eb;border-right:2px solid #2f5269}.search-input,.sort-select{border:1px solid #2f5269;background:#07131be5;color:#eef6fb}.search-input:focus,.sort-select:focus{outline:2px solid rgb(45 212 191 / 45%);outline-offset:1px;box-shadow:none}.filter-section h3{color:#f59e0b}.filter-btn{border:1px solid #2f5269;color:#b7d1df;background:#07131be0}.filter-btn:hover{border-color:#2dd4bf8c;background:#11374f40}.filter-btn.active{color:#eef6fb;border-color:#2dd4bf;background:#2dd4bf42}.clear-filters-btn,.view-btn,.project-card-button{border:1px solid #2f5269;background:#07131be0;color:#eef6fb}.clear-filters-btn:hover,.view-btn:hover,.project-card-button:hover{transform:none;border-color:#f59e0b;background:#f59e0b33}.view-btn.active{border-color:#2dd4bf;background:#2dd4bf3d}.browser-main,.browser-controls{background:transparent;border-bottom:1px solid #2f5269}.project-card{border:1px solid #2f5269;background:linear-gradient(180deg,#0b1c28f2,#08151ff2)}.project-card:hover{border-color:#2dd4bf;transform:translateY(-1px);box-shadow:0 8px 20px #2dd4bf2e}.project-card-title{color:#eef6fb}.project-card-description{color:#b7d1df}.project-tag{border:1px solid rgb(45 212 191 / 45%);color:#2dd4bf;background:#06141fcc}.project-card-button:focus-visible,.browser-close:focus-visible,.view-btn:focus-visible,.filter-btn:focus-visible,.clear-filters-btn:focus-visible,.search-input:focus-visible,.sort-select:focus-visible{outline:2px solid #f59e0b;outline-offset:2px}@media (max-width: 960px){.project-browser{width:min(96vw,960px);height:min(92vh,860px)}.browser-content{flex-direction:column}.browser-sidebar{width:100%;max-height:38vh;border-right:0;border-bottom:1px solid #2f5269}}