:root {
  --tab-bg: rgba(255, 255, 255, 0.4);
  --tab-text: #000000;
  --tab-hover: rgba(255, 255, 255, 0.7);
  --tab-active: #FFFFFF;
  --urlbar: rgba(255, 255, 255, 0.95);
  --accent: #0284C3;
  --icon: #FFFFFF;
  --border: rgba(0, 0, 0, 0.4);
  --menu-bg: #F5F9FD;
  --menu-hover: #CDE0F5;
  --ntp-bg: #FFFFFF;
  --ntp-card: #F0F4F9;
  --ntp-text: #333333;
}

body.dark-mode {
  --tab-bg: rgba(255, 255, 255, 0.05);
  --tab-text: #FFFFFF;
  --tab-hover: rgba(255, 255, 255, 0.15);
  --tab-active: #111111;
  --urlbar: rgba(255, 255, 255, 0.95);
  --icon: #FFFFFF;
  --menu-bg: #222222;
  --menu-hover: #444444;
  --ntp-bg: #111111;
  --ntp-card: #222222;
  --ntp-text: #FFFFFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }

body {
  font-family: "Segoe UI", Arial, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: url('https://wallpapercave.com/wp/Wn3Dygb.jpg') no-repeat center center fixed;
  background-size: cover;
  padding: 0;
}

/* --- AERO GLASS --- */
#browser-ui {
  background-color: rgba(255, 255, 255, 0.26); /* #FFF4 */
  background-image: linear-gradient(241deg, rgba(0,0,0,0.2) 3%, rgba(255,255,255,0.2) 12%, rgba(0,0,0,0.2) 22%, rgba(0,0,0,0.2) 39%, rgba(255,255,255,0.2) 46%, rgba(0,0,0,0.2) 49%, rgba(0,0,0,0.2) 68%, rgba(255,255,255,0.2) 78%, rgba(0,0,0,0.2) 80%, rgba(255,255,255,0.2) 93%);
  background-size: 100vw 100vh;
  background-position: 50% 50%;
  background-attachment: fixed;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  
  /* border and outline */
  border: 1px solid rgba(255, 255, 255, 0.4);
  outline: 1px solid rgba(0, 0, 0, 0.4);
  
  border-radius: 8px 8px 0 0;
  
  flex-shrink: 0;
  z-index: 100;
  color: #000;
}

body.dark-mode #browser-ui {
  background-color: rgba(0, 0, 0, 0.5);
}

/* --- TITLE BAR --- */
#title-bar {
  display: flex; justify-content: space-between; align-items: flex-start;
  height: 10px; 
  width: 100%;
}

/* --- NAVIGATION ROW --- */
#nav-toolbar {
  display: flex; align-items: center; padding: 4px 10px 4px 10px; gap: 8px;
}

#nav-buttons {
  display: flex; align-items: center; gap: 0;
  position: relative; z-index: 10;
}

/* BACK BUTTON */
#back-btn {
  width: 42px; height: 42px; 
  border-radius: 50%;
  background: linear-gradient(to bottom, #5EC1F8 0%, #2096DA 48%, #0284C3 50%, #0274AA 100%);
  color: #FFFFFF;
  border: 1px solid #005A9E;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.6), 0 2px 4px rgba(0,0,0,0.2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  
  margin-bottom: -15px; 
  clip-path: inset(0px 0px 10px 0px);
}
#back-btn:hover:not(:disabled) { 
  background: linear-gradient(to bottom, #7CD0FF 0%, #30A6EB 48%, #0299E2 50%, #0287C6 100%);
}
#back-btn:disabled { 
  background: #C4D5E6; 
  color: #FFFFFF; 
  border: 1px solid #A4BDD6; 
  box-shadow: none;
}
#back-btn svg { width: 24px; height: 24px; fill: currentColor; }

/* FORWARD BUTTON */
#forward-btn {
  width: 32px; height: 32px; 
  border-radius: 50%;
  background: linear-gradient(to bottom, #5EC1F8 0%, #2096DA 48%, #0284C3 50%, #0274AA 100%);
  color: #FFFFFF; 
  border: 1px solid #005A9E;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,0.2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 1;
  margin-left: -5px;
  margin-bottom: -5px; 
}
#forward-btn:hover:not(:disabled) { 
   background: linear-gradient(to bottom, #7CD0FF 0%, #30A6EB 48%, #0299E2 50%, #0287C6 100%);
}
#forward-btn:disabled { 
  background: transparent; 
  color: rgba(255, 255, 255, 0.6); 
  border: 1px solid rgba(0,0,0,0.15); 
  box-shadow: none;
}
#forward-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* --- ADDRESS BAR --- */
#urlbar-container { flex: 1; position: relative; margin-left: 6px; }
#urlbar-wrapper {
  display: flex; align-items: center; background: var(--urlbar);
  border: 1px solid rgba(0,0,0,0.4); height: 26px; padding: 0 6px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.5);
  border-radius: 2px;
}
#urlbar-wrapper:focus-within {
  border-color: #0284C3; box-shadow: 0 0 3px rgba(2, 132, 195, 0.6);
}
#url-icon { margin-right: 6px; }
#urlbar-input {
  flex: 1; background: transparent; border: none;
  color: #000000; font-size: 13px; outline: none; font-family: inherit;
}
#url-spinner {
  width: 14px; height: 14px; margin-right: 4px;
  border: 2px solid rgba(128,128,128,0.3); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.8s linear infinite; display: none;
}
.loading #url-spinner { display: block; }

.urlbar-icon {
  background: transparent; border: none; color: #444444;
  padding: 2px; cursor: pointer; display: flex; opacity: 0.8;
}
.urlbar-icon:hover { opacity: 1; background: rgba(0,0,0,0.05); border-radius: 2px; }
.urlbar-icon svg { width: 14px; height: 14px; fill: currentColor; }

/* --- RIGHT SIDE TOOLS --- */
#action-buttons {
  display: flex; gap: 4px;
}
.action-btn {
  width: 28px; height: 28px; border: 1px solid transparent;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 65%);
  display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 2px;
}
.action-btn:hover { 
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.4) 65%); 
  border: 1px solid rgba(0,0,0,0.2); 
  box-shadow: inset 0 0 2px rgba(255,255,255,0.6); 
}
.action-btn svg { width: 18px; height: 18px; }

/* Favorites Bar */
#favorites-bar {
  display: none; align-items: center; padding: 2px 12px; gap: 10px;
}
#favorites-bar.show { display: flex; }
.bookmark {
  display: flex; align-items: center; gap: 4px; padding: 4px 6px;
  color: #000; cursor: pointer; border: 1px solid transparent; 
  background: transparent; white-space: nowrap; font-size: 12px; border-radius: 2px;
  text-shadow: 0 0 4px rgba(255,255,255,0.8);
}
body.dark-mode .bookmark { color: #FFF; text-shadow: 0 0 4px rgba(0,0,0,0.8); }
.bookmark:hover { background: rgba(255,255,255,0.4); border: 1px solid rgba(0,0,0,0.3); box-shadow: inset 0 0 2px rgba(255,255,255,0.5); }
.bookmark img { width: 16px; height: 16px; }

/* --- TABS --- */
#tabs-strip {
  display: flex; align-items: flex-end; padding: 0 4px; height: 30px;
  border-top: 1px solid rgba(255,255,255,0.4); 
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
}
#tabs-container {
  display: flex; flex: 1; overflow-x: auto; gap: 1px; scrollbar-width: none; align-items: flex-end; padding-left: 32px;
}
.tab {
  display: flex; align-items: center; height: 28px; padding: 0 10px;
  color: #000; border: 1px solid rgba(0,0,0,0.4); border-bottom: none;
  border-radius: 4px 4px 0 0;
  min-width: 120px; max-width: 200px; font-size: 12px; cursor: pointer;
  background: var(--tab-bg); position: relative; flex-shrink: 0; 
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.5);
  text-shadow: 0 0 4px rgba(255,255,255,0.8);
}
body.dark-mode .tab { color: #FFF; text-shadow: 0 0 4px rgba(0,0,0,0.8); }
.tab:hover:not(.active) { background: var(--tab-hover); z-index: 1; }
.tab.active { 
  background: var(--tab-active); color: #000000; height: 30px; 
  border: 1px solid rgba(0,0,0,0.5); border-bottom: none; 
  z-index: 2; box-shadow: inset 0 1px 2px rgba(255,255,255,0.9);
  text-shadow: none;
}
.tab-icon-area { width: 16px; height: 16px; margin-right: 6px; flex-shrink: 0; display:flex; align-items:center; }
.tab-favicon { width: 16px; height: 16px; object-fit: contain; }
.tab-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 6px; }
.tab-close {
  width: 16px; height: 16px; border: none; background: transparent; color: inherit; 
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; border-radius: 2px;
}
.tab:hover .tab-close, .tab.active .tab-close { opacity: 1; }
.tab-close:hover { background: #E81123; color: white; text-shadow: none; }

#new-tab-btn {
  width: 26px; height: 22px; display: flex; align-items: center; justify-content: center;
  background: var(--tab-bg); border: 1px solid rgba(0,0,0,0.4); color: #000; border-bottom: none;
  cursor: pointer; flex-shrink: 0; margin-left: 2px; margin-bottom: 0px; border-radius: 4px 4px 0 0;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.5);
}
body.dark-mode #new-tab-btn { color: #FFF; }
#new-tab-btn:hover { background: var(--tab-hover); }
#new-tab-btn svg { width: 14px; height: 14px; fill: currentColor; }

/* --- MENUS & CONTENT --- */
#menu-popup {
  position: absolute; top: 70px; right: 12px; width: 220px;
  background: var(--menu-bg); border: 1px solid rgba(0,0,0,0.5);
  box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
  display: none; flex-direction: column; padding: 2px 0; z-index: 999;
}
#menu-popup.show { display: flex; color: #000; }
.menu-item { padding: 6px 24px; cursor: pointer; font-size: 12px; color: #000; }
.menu-item:hover { background: var(--menu-hover); color: #000; }
.menu-sep { height: 1px; background: rgba(0,0,0,0.1); margin: 2px 0; }

#web-content { flex: 1; position: relative; background: var(--ntp-bg); border-top: 1px solid rgba(0,0,0,0.5); }
iframe.web-frame { width: 100%; height: 100%; border: none; display: none; background: #fff; }
iframe.web-frame.active { display: block; }

#status-bar {
  background-color: rgba(255, 255, 255, 0.26); /* #FFF4 */
  background-image: linear-gradient(241deg, rgba(0,0,0,0.2) 3%, rgba(255,255,255,0.2) 12%, rgba(0,0,0,0.2) 22%, rgba(0,0,0,0.2) 39%, rgba(255,255,255,0.2) 46%, rgba(0,0,0,0.2) 49%, rgba(0,0,0,0.2) 68%, rgba(255,255,255,0.2) 78%, rgba(0,0,0,0.2) 80%, rgba(255,255,255,0.2) 93%);
  background-size: 100vw 100vh;
  background-position: bottom center;
  background-attachment: fixed;
  backdrop-filter: blur(6px); 
  -webkit-backdrop-filter: blur(6px);
  color: #000; font-size: 11px;
  padding: 4px 10px; 
  border-top: 1px solid rgba(255,255,255,0.6); 
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
  text-shadow: 0 0 4px rgba(255,255,255,0.8);
}
body.dark-mode #status-bar { 
  background-color: rgba(0, 0, 0, 0.5); 
  color: #FFF; text-shadow: 0 0 4px rgba(0,0,0,0.8);
}

/* --- START PAGE (IE Style) --- */
.internal-page {
  background-color: var(--ntp-bg); color: var(--ntp-text); height: 100%; width: 100%;
  font-family: "Segoe UI", sans-serif; display: flex; flex-direction: column; align-items: center;
  padding-top: 10vh; overflow: hidden;
}
.ie-logo { width: 120px; height: 120px; margin-bottom: 5px; } 
.search-box {
  width: 90%; max-width: 500px; height: 40px; border: 1px solid #A3BDE3; background: #FFFFFF;
  display: flex; align-items: center; padding: 0 10px; margin-bottom: 30px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}
.search-input {
  flex: 1; background: transparent; border: none; font-size: 14px;
  color: var(--ntp-text); outline: none; margin-left: 8px;
}
.shortcuts-grid {
  display: flex; flex-direction: row; justify-content: center; gap: 15px;
  width: 100%; max-width: 700px; flex-wrap: wrap;
}
.shortcut {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; padding: 8px; transition: 0.1s; width: 90px; color: #000;
}
body.dark-mode .shortcut { color: #FFF; }
.shortcut:hover { outline: 1px solid rgba(0,0,0,0.1); background: var(--ntp-card); }
.sc-icon-box {
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
}
.sc-icon-box img { width: 32px; height: 32px; object-fit: contain; }
.sc-label { font-size: 12px; color: #0284C3; text-align: center; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@keyframes spin { to { transform: rotate(360deg); } }