:root{
--accent: #0066ff;
--bg: #0b0d10;
--fg: #e6eef8;
--taskbar-bg: rgba(0,0,0,0.45);
--window-bg: #ffffff;
}
html[data-theme='light'] {
--bg: #e9eef8;
--fg: #0b1220;
--taskbar-bg: rgba(255,255,255,0.85);
--window-bg: #ffffff;
}

*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Segoe UI", Roboto, system-ui, sans-serif;
}
html, body {
width: 100%;
height: 100%;
}
/*:root{
  --accent: #0066ff;
  --bg: #0b0d10;
  --fg: #e6eef8;
  --taskbar-bg: rgba(0,0,0,0.45);
  --window-bg: #ffffff;
}
html[data-theme='light'] {
  --bg: #e9eef8;
  --fg: #0b1220;
  --taskbar-bg: rgba(255,255,255,0.85);
  --window-bg: #ffffff;
}
*{ 
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family: "Segoe UI", Roboto, system-ui, sans-serif; 
}
html,body{
  width:100%;
  height:100%;
}*/

/* Boot */
.boot-screen{ 
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center; 
  justify-content:center; 
  background: linear-gradient(180deg,#000814 0%, #071540 60%);
  color:var(--fg); 
  z-index:9999; 
}
.boot-logo{ 
  font-size:48px; 
  font-weight:800; 
  letter-spacing:6px; 
  margin-bottom:20px; 
}
.boot-progress{ 
  width:60%; 
  height:8px; 
  background:rgba(255,255,255,0.15); 
  border-radius:8px; 
  overflow:hidden;
}
#boot-bar{ 
  height:100%; 
  width:0%; 
  background:var(--accent); 
  transition:width 0.2s linear; 
}

/* Desktop */
.desktop{ 
  position:fixed; 
  inset:0; 
  background-size:cover; 
  background-position:center; 
  color:var(--fg); 
  transition:background-image .3s ease; 
  display:block; 
}
.hidden{ 
  display:none; 
}


.tab-bar {
  display: flex;
  align-items: center;
  background: var(--window-bg);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  overflow-x: auto;
}

.tab {
  padding: 8px 12px;
  margin: 2px;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.tab.active {
  background: rgba(255,255,255,0.15);
  font-weight: bold;
}

.tab .close-tab {
  background: transparent;
  border: none;
  color: var(--fg);
  cursor: pointer;
  font-size: 12px;
}

.new-tab-btn {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--fg);
  font-size: 16px;
  cursor: pointer;
}

.browser-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--window-bg);
  padding: 6px 10px;
}

#browser-url {
  flex: 1;
  padding: 6px 10px;
  border-radius: 6px;
  border: none;
  background: var(--bg);
  color: var(--fg);
}

.browser-frame {
  width: 100%;
  height: calc(100vh - 230px);
  border: none;
}


/* Trash Bin on Desktop */
.trash-bin {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--fg);
  cursor: pointer;
  user-select: none;
}

.trash-bin img {
  width: 64px;
  height: 64px;
  transition: transform 0.2s;
}
.trash-bin:hover img {
  transform: scale(1.1);
}

/* Trash Modal */
#trash-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  z-index: 2000;
}
#trash-modal.hidden { 
  display: none; 
}

#trash-modal .modal-content {
  background: var(--window-bg);
  color: var(--fg);
  width: 400px;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
#trash-list {
  list-style: none;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
  margin: 10px 0;
}
#trash-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
#trash-list li input[type="checkbox"] {
  margin-right: 8px;
}
.trash-actions {
  display: flex;
  justify-content: space-between;
}
.trash-actions .danger {
  background: #d9534f;
  color: #fff;
}


/* Desktop icon */
.icon{ 
  width:80px; 
  text-align:center; 
  position:absolute; 
  cursor:pointer; 
  user-select:none; 
  color:var(--fg); 
}
.icon img{ 
  width:50px; 
  height:50px; 
  display:block; 
  margin:0 auto; 
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); 
}
.icon p{
   margin-top:6px; 
   font-size:13px; 
   text-shadow:0 1px 2px rgba(0,0,0,0.6); 
}

.taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: var(--taskbar-bg);
  color: var(--fg);
  backdrop-filter: blur(8px);
  z-index: 999;
}

/* Keep Start & Right sections as-is */
.taskbar-left,
.taskbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ✅ CENTER the dock absolutely */
.dock {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: flex-end;
  justify-content: center;
  max-width: 900px;
}

/* Dock items styling */
.dock .dock-item {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.dock .dock-item img {
  width: 36px;
  height: 36px;
}

.dock .dock-item:hover {
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Time and date */
#datetime {
  opacity: 0.9;
}



.start-btn{
   width:44px;
   height:44px; 
   display:flex; 
   align-items:center; 
   justify-content:center; 
   background:transparent; 
   border-radius:8px; 
   cursor:pointer; 
   border:none; 
}
.start-btn img{ 
  width:28px; 
  height:28px; 
}
/* ===== Window ===== */
.window { 
  position: absolute; 
  top: 120px; 
  left: 150px; 
  width: 480px; 
  height: 360px; 
  background: var(--window-bg); 
  color: var(--fg); 
  border-radius: 10px; 
  box-shadow: 0 20px 60px rgba(2,6,23,0.5); 
  overflow: hidden; 
  display: flex; 
  flex-direction: column; 
  transition: all 0.3s ease;
}

/* Header */
.window-header { 
  height: 40px; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 0 10px; 
  cursor: move; 
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, black));
  color: #fff;
}

.window-header .title {
  font-weight: 700; 
  font-size: 15px; 
}

.window-header .controls { 
  display: flex; 
  gap: 6px; 
  align-items: center; 
}

.win-btn { 
  width: 34px; 
  height: 28px; 
  border-radius: 6px; 
  border: none; 
  background: transparent; 
  color: white; 
  font-weight: 700; 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  transition: background 0.2s;
}

.win-btn:hover { 
  background: rgba(255,255,255,0.08); 
}

.window-content { 
  height: calc(100% - 40px); 
  overflow: auto; 
  background: #fff; 
  color: #111; 
  flex: 1; 
}


/* ===== Responsive Design ===== */
@media (max-width: 1024px) {
  .window {
    width: 70%;
    height: 60%;
    left: 15%;
    top: 15%;
  }
}

@media (max-width: 768px) {
  .window {
    width: 85%;
    height: 65%;
    left: 7.5%;
    top: 10%;
  }
  .window-header .title {
    font-size: 14px;
  }
  .win-btn {
    width: 30px;
    height: 26px;
  }
}

@media (max-width: 480px) {
  .window {
    position: fixed;
    top: 10%;
    left: 5%;
    width: 90%;
    height: 75%;
    border-radius: 8px;
  }
  .window-header {
    height: 36px;
    padding: 0 8px;
  }
  .window-header .title {
    font-size: 13px;
  }
  .win-btn {
    width: 28px;
    height: 24px;
  }
  .window-content {
    font-size: 14px;
    padding: 8px;
  }
}



#settings-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-icon {
  width: 20px;
  height: 20px;
  filter: invert(1); /* makes it white on dark taskbar */
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.settings-icon:hover {
  opacity: 1;
}

/* Settings */
.settings-head{
  display: flex;
  gap: 13em;
}
.settings-panel{ 
  position:fixed; 
  right:20px; 
  bottom:80px; 
  width:340px; 
  background:var(--bg); 
  padding:12px; 
  border-radius:8px; 
  box-shadow:0 8px 20px rgba(0,0,0,0.25); 
  z-index:990; 
}
.settings-panel h3{ 
  margin-bottom:8px; 
  color:var(--fg);
} 
.setting-row{ 
  margin:8px 0; 
  display:flex; 
  flex-direction:column; 
  gap:6px; 
  color:var(--fg); 
}
.wall-list{ 
  display:flex; 
  gap:8px; 
  flex-wrap:wrap; 
}
.wall-thumb{ 
  width:80px; 
  height:60px; 
  border-radius:6px; 
  overflow:hidden; 
  cursor:pointer; 
  border:2px solid transparent; 
  background-size:cover;
}
.wall-thumb.selected{ 
  border-color:var(--accent); 
}



/* Context menu */
.ctx-menu{
   position:fixed; 
   width:200px; 
   background:var(--bg); 
   box-shadow:0 8px 20px rgba(0,0,0,0.25); 
   border-radius:6px; 
   z-index:9999; 
   overflow:hidden; 
}
.ctx-item{ 
  padding:10px; 
  cursor:pointer; 
  border-bottom:1px solid rgba(0,0,0,0.06); 
  color:var(--fg); 
}
.ctx-item:hover{ 
  background:rgba(0,0,0,0.06); 
}

/* Terminal, music, image viewer etc (light styling) */
.terminal{
   background:#0b1220;
   color:#9ef0a6; 
   font-family:monospace; 
   height:100%; 
   padding:8px; 
   border-radius:6px;
   display:flex; 
   flex-direction:column; 
   gap:8px; 
}
.music-player{ 
  display:flex; 
  flex-direction:column; 
  gap:8px; 
  height:100%; 
}
.playlist .track{ 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  gap:8px; 
  padding:6px; 
  border-radius:6px; 
  background:#fafafa; 
}

/* small helpers */
button{ 
  padding:8px 10px; 
  border-radius:6px; 
  border:1px solid rgba(0,0,0,0.08); 
  cursor:pointer; 
  background: #f6f6f7; 
}
button:active{ 
  transform:translateY(1px); 
}
.start-menu {
  position: fixed;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  width: 520px;
  max-height: 500px;
  overflow-y: auto;
  background: var(--bg);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
  color: var(--fg);
  padding: 16px;
  z-index: 2000;
  animation: fadeIn 0.15s ease;
}
.start-menu h3, .start-menu h4 {
  margin-bottom: 10px;
  color: var(--fg);
}
.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.app-icon {
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.app-icon:hover {
  transform: scale(1.08);
}
.app-icon img {
  width: 48px;
  height: 48px;
  display: block;
  margin: 0 auto;
}
.app-icon p {
  font-size: 13px;
  margin-top: 4px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.apps-grid.small img { 
  width: 36px; 
  height: 36px; 
}
.apps-grid.small p { 
  font-size: 12px; 
}
@keyframes fadeIn {
   from { 
    opacity: 0; 
    transform: translateY(10px) translateX(-50%); 
  }
   to { 
    opacity: 1; 
    transform: translateY(0) translateX(-50%); 
  } 
}






/* ✅ RESPONSIVE MEDIA QUERIES */




/* Tablet (below 992px) */
@media (max-width: 992px) {
.window {
width: 90%;
height: 70%;
top: 80px;
left: 5%;
}




.tab {
font-size: 13px;
padding: 6px 10px;
}




.browser-frame {
height: calc(100vh - 180px);
}




.dock {
gap: 8px;
}




.dock .dock-item {
width: 48px;
height: 48px;
}




.dock .dock-item img {
width: 30px;
height: 30px;
}




.start-menu {
width: 440px;
bottom: 70px;
}




.apps-grid {
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}




.trash-bin img {
width: 56px;
height: 56px;
}
}




/* Mobile (below 768px) */
@media (max-width: 768px) {
.window {
width: 94%;
height: 65%;
top: 70px;
left: 3%;
}




.window-header {
font-size: 14px;
height: 36px;
}




.taskbar {
height: 56px;
padding: 0 10px;
}

.dock {
gap: 6px;
bottom: 60px;
}
.dock .dock-item {
width: 44px;
height: 44px;
}
.dock .dock-item img {
width: 28px;
height: 28px;
}
.start-menu {
width: 90%;
max-height: 70vh;
bottom: 70px;
padding: 12px;
}
.apps-grid {
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
gap: 8px;
}
.app-icon img {
width: 40px;
height: 40px;
}
.app-icon p {
font-size: 12px;
}
.trash-bin {
top: 10px;
left: 10px;
}
.trash-bin img {
width: 48px;
height: 48px;
}
.window-content {
font-size: 14px;
}
}


/* Small mobile (below 480px) */
@media (max-width: 480px) {
.window {
width: 96%;
height: 60%;
top: 60px;
left: 2%;
}
.boot-logo {
font-size: 28px;
margin-bottom: 12px;
}
.boot-progress {
width: 80%;
}
.taskbar-left, .taskbar-right {
gap: 6px;
}
.start-btn img {
width: 24px;
height: 24px;
}
.dock .dock-item {
width: 38px;
height: 38px;
}
.dock .dock-item img {
width: 24px;
height: 24px;
}
.start-menu {
width: 92%;
bottom: 65px;
}
.settings-panel {
width: 90%;
right: 5%;
bottom: 70px;
}
.settings-head {
flex-direction: column;
gap: 1em;
}
}

/* Ultra-wide (above 1600px) */
@media (min-width: 1600px) {
.window {
width: 600px;
height: 420px;
}
.dock .dock-item {
width: 64px;
height: 64px;
}
.dock .dock-item img {
width: 44px;
height: 44px;
}
}