@import "https://unpkg.com/open-props/normalize.min.css";

@import "https://unpkg.com/open-props/buttons.min.css";



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



@font-face {

    font-family: font;

    src: url('font/font.ttf');

}



@font-face {

    font-family: fonti;

    src: url('font/fonti.ttf');

}



@font-face {

    font-family: fontb;

    src: url('font/fontb.ttf');

}



@font-face {

    font-family: fontbi;

    src: url('font/fontbi.ttf');

}



:root {

    --accent: #3b82f6;

    --accent-hover: #2563eb;

    --accent-dark: #1e40af;

    --bg-primary: #0a0e1a;

    --bg-secondary: #121724;

    --text-primary: #e8eaed;

    --text-secondary: #9aa0a6;

    --border: #3b82f6;

    --error-red: #ef4444;

    --error-red-hover: #dc2626;

    --error-red-bg: rgba(239, 68, 68, 0.15);

    --error-red-border: rgba(239, 68, 68, 0.3);

    --success-green: #4ade80;

    --overlay-dark: rgba(0, 0, 0, 0.8);

    --overlay-darker: rgba(0, 0, 0, 0.9);

    --glass-bg: rgba(21, 25, 35, 0.7);

    --glass-border: rgba(255, 255, 255, 0.08);

    --pure-black: #000;

    --pure-white: #fff;

    --gray-dark: #888;

    --gray-light: #222;

    --transparent-white-1: rgba(255, 255, 255, 0.1);

    --transparent-white-2: rgba(255, 255, 255, 0.2);

    --transparent-white-5: rgba(255, 255, 255, 0.05);

    --transparent-white-8: rgba(255, 255, 255, 0.08);

}



body {

    font-family: "SUSE Mono";

    overflow: hidden;

    background: var(--bg-primary);

    color: var(--text-primary);

    user-select: none;

}



button,

input {

    font-family: font, "font" !important;

}



#bootloader {

    position: fixed;

    inset: 0;

    background: var(--bg-primary);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    z-index: 10000;

    opacity: 1;

    transition: opacity 0.5s ease;

    cursor: none;

    font-family: "SUSE Mono" !important;

}



#bootloader.hidden {

    opacity: 0;

    pointer-events: none;

}



#bootloader.notice-active {

    cursor: auto;

}



.boot-notice-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.78);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10005;

    cursor: auto;

    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));

}



.boot-notice-card {

    width: min(820px, 92vw);

    max-height: min(80vh, 640px);

    background: linear-gradient(160deg, rgba(33, 41, 58, 0.98), rgba(12, 16, 26, 0.98));

    border: 1px solid rgba(125, 211, 192, 0.25);

    border-radius: clamp(16px, 3vw, 24px);

    padding: clamp(1.6rem, 4.5vw, 2.6rem) clamp(1.4rem, 5vw, 2.9rem);

    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6);

    text-align: center;

    font-family: font, "font";

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: clamp(0.75rem, 2vw, 1.25rem);

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

}



.boot-notice-header {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.75rem;

    font-size: clamp(1.2rem, 4vw, 1.8rem);

    font-weight: 600;

    color: var(--text-primary);

}



.boot-notice-header i {

    color: var(--accent);

}



.boot-notice-message {

    font-size: clamp(0.95rem, 2.6vw, 1.1rem);

    line-height: 1.6;

    color: var(--text-secondary);

    max-width: 46rem;

}



.boot-notice-button {

    background: linear-gradient(135deg, var(--accent), var(--accent-hover));

    border: 1px solid var(--accent-dark);

    color: var(--pure-white);

    padding: clamp(0.65rem, 2.2vw, 0.85rem) clamp(1.6rem, 6vw, 2.4rem);

    border-radius: 10px;

    font-size: clamp(0.9rem, 2.6vw, 1.05rem);

    cursor: pointer;

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.boot-notice-button:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 24px rgba(59, 130, 246, 0.35);

}



.boot-logo {

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 1rem;

}



.boot-logo img {

    max-width: 100%;

    height: auto;

    object-fit: contain;

}



.boot-title {

    font-size: 1.6rem;

    font-weight: 400;

    color: var(--text-primary);

    margin-bottom: 0.5rem;

    letter-spacing: 4px;

}



.boot-version {

    font-size: 1rem;

    color: var(--gray-dark);

    margin-bottom: 3rem;

}



.boot-options {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    width: 600px;

}



.boot-option {

    background: transparent;

    border: 1.5px solid var(--gray-dark);

    border-radius: 5px;

    padding: 1.2rem 1.5rem;

    cursor: pointer;

    transition: all 0.2s ease;

    color: var(--text-primary);

    text-align: left;

    display: flex;

    align-items: center;

    gap: 1rem;

    cursor: none;

}



.boot-option i {

    font-size: 1.2rem;

    width: 24px;

    text-align: center;

}



.boot-option.selected {

    background: var(--text-primary);

    color: var(--bg-primary);

    border-color: var(--text-primary);

}



.boot-hint {

    position: absolute;

    bottom: 2rem;

    color: var(--gray-dark);

    font-size: 1rem;

    text-align: center;

}



.boot-hint i {

    font-size: 0.75rem;

}



.boot-loading {

    display: none;

    width: 600px;

    margin-top: 2rem;

}



.boot-loading.active {

    display: block;

}



.loading-bar-container {

    width: 100%;

    height: 4px;

    background: var(--gray-light);

    margin-bottom: 1.5rem;

    overflow: hidden;

    border-radius: 1px;

}



.loading-bar {

    height: 100%;

    background: var(--accent);

    width: 0%;

    transition: width 0.3s ease;

    border-radius: 1px;

}



.boot-messages {

    font-size: 0.85rem;

    color: var(--gray-dark);

    line-height: 1.6;

}



.boot-message {

    opacity: 0;

    animation: fadeInMsg 0.3s ease forwards;

}



@keyframes fadeInMsg {

    to {

        opacity: 1;

    }

}



#login {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: linear-gradient(135deg, var(--bg-primary) 0%, rgba(59, 130, 246, 0.35) 45%, var(--bg-primary) 100%);
  padding: clamp(1rem, 3vw, 2rem);
  overflow: hidden;
}

#login.active {
  display: flex;
  opacity: 1;
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.login-stage {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-wrapper {
  width: min(95vw, 1180px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding: clamp(1rem, 2vw, 2rem);
  border-radius: clamp(1.5rem, 3vw, 2.5rem);
  background: rgba(4, 8, 15, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(28px);
}

.chromebook-device {
  background: linear-gradient(145deg, rgba(12, 47, 120, 0.85), rgba(24, 64, 139, 0.9)), radial-gradient(circle at top right, rgba(59, 130, 246, 0.2), transparent 45%);
  border-radius: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.device-display {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.device-titles {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.device-titles h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: 0.12em;
}

.device-description {
  line-height: 1.6;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 85%;
}

.device-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.device-status-pill {
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.device-status-pill.accent {
  background: rgba(59, 130, 246, 0.25);
}

.device-panel {
  margin-top: 1rem;
  background: rgba(6, 9, 19, 0.55);
  border-radius: 1rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
}

.device-panel-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.panel-label {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  color: rgba(255, 255, 255, 0.65);
}

.panel-value {
  font-size: 1rem;
  font-weight: 600;
}

.chromebook-panel {
  background: rgba(18, 23, 36, 0.8);
  border-radius: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.panel-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.panel-badge {
  align-self: flex-start;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.1);
  color: var(--accent);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.panel-header h2 {
  margin: 0;
  font-family: fontb;
  font-size: 1.9rem;
  color: var(--text-primary);
}

.panel-subtitle {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.login-date {
  margin: 0.25rem 0 0;
  color: rgba(241, 245, 249, 0.75);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.chromebook-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.form-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.login-input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.9rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  font-size: 0.95rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.login-input:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.07);
  outline: none;
}

.password-wrapper {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.password-toggle:hover {
  color: var(--text-primary);
}

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.checkbox-container input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.forgot-link {
  color: var(--accent);
  font-size: 0.85rem;
  text-decoration: none;
}

.forgot-link:hover {
  text-decoration: underline;
}

.login-btn {
  margin-top: 0.4rem;
  padding: 0.95rem;
  border-radius: 1rem;
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--bg-primary);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.35);
}

.keyboard-tip {
  margin-top: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.panel-footer {
  margin-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.security-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.security-notice i {
  color: var(--accent);
}

.help-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.help-text a {
  color: var(--accent);
  text-decoration: none;
}

.help-text a:hover {
  text-decoration: underline;
}

.login-container.passwordless {
  min-height: 470px;
}

@media (max-width: 900px) {
  .login-wrapper {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .login-wrapper {
    padding: 1rem;
    border-radius: 1rem;
  }

  .chromebook-device,
  .chromebook-panel {
    padding: 1rem;
  }
}

#desktop {

    position: fixed;

    inset: 0;

    background: #01040f;

    background-image: radial-gradient(circle at 22% 10%, rgba(59, 130, 246, 0.18), transparent 45%),

        radial-gradient(circle at 70% 0%, rgba(14, 165, 233, 0.12), transparent 40%);

    display: none;

    opacity: 0;

    transition: opacity 0.5s ease;

    font-family: font, "font" !important;

    z-index: 1;

    overflow: hidden;

}



#desktop::before {

    content: "";

    position: absolute;

    inset: 0;

    background: radial-gradient(circle at 60% 20%, rgba(125, 211, 193, 0.22), transparent 45%),

        radial-gradient(circle at 30% 70%, rgba(59, 130, 246, 0.1), transparent 50%);

    filter: blur(32px);

    opacity: 0.8;

    pointer-events: none;

    z-index: -1;

}



#desktop::after {

    content: "";

    position: absolute;

    inset: 0;

    background-image: repeating-linear-gradient(

        130deg,

        rgba(255, 255, 255, 0.02) 0,

        rgba(255, 255, 255, 0.02) 1px,

        transparent 1px,

        transparent 30px

    );

    opacity: 0.2;

    pointer-events: none;

    z-index: -2;

}



#desktop.active {

    display: block;

    opacity: 1;

}



.wallpaper {

    position: absolute;

    inset: 0;

    background: radial-gradient(circle at 75% 15%, rgba(59, 130, 246, 0.18), transparent 40%),

        radial-gradient(circle at 15% 80%, rgba(236, 72, 153, 0.12), transparent 45%),

        linear-gradient(180deg, rgba(4, 7, 18, 0.95), rgba(2, 4, 15, 0.95));

    overflow: hidden;

    z-index: 0;

    display: flex;

    align-items: center;

    justify-content: center;

}



.wallpaper-glow {

    position: absolute;

    top: 25%;

    left: 50%;

    width: 420px;

    height: 420px;

    background: radial-gradient(circle, rgba(59, 130, 246, 0.28), transparent 70%);

    transform: translate(-50%, -50%);

    filter: blur(12px);

    opacity: 0.8;

    pointer-events: none;

}



.wallpaper-grid {

    position: relative;

    z-index: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.2rem;

    text-align: center;

    padding-top: 2rem;

}



.wallpaper-icon {

    width: 8rem;

    height: 8rem;

    filter: drop-shadow(0 15px 35px rgba(2, 6, 17, 0.8));

    pointer-events: none;

}



.wallpaper-text {

    font-size: clamp(3.5rem, 4vw, 4rem);

    font-family: fontb;

    letter-spacing: 0.3rem;

    color: var(--text-primary);

    text-transform: uppercase;

}



.wallpaper-byline {

    font-size: 1rem;

    letter-spacing: 0.5rem;

    text-transform: uppercase;

    color: rgba(237, 242, 247, 0.65);

}



.wallpaper-tagline {

    font-size: 0.85rem;

    color: rgba(255, 255, 255, 0.75);

    letter-spacing: 0.4rem;

    text-transform: uppercase;

    margin: -0.25rem 0 0;

}



.desktop-icons {

    position: absolute;

    top: calc(30px + var(--chat-button-offset, 0px));

    left: 20px;

    right: 20px;

    bottom: 80px;

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

    grid-auto-rows: 120px;

    gap: 0.8rem;

    justify-items: center;

    align-items: stretch;

    z-index: 1;

    overflow: visible; /* allow glow to extend outside the grid */

}





.desktop-icons.hidden {

    display: none;

}



.desktop-icon {

    width: 68px;

    height: 92px;

    padding: 0;

    position: relative;

    overflow: visible;

    border-radius: 18px;

    background: transparent;

    border: 1px solid transparent;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 0.2rem;

    text-align: center;

    cursor: pointer;

    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;

    color: inherit;

    font-family: 'Inter', sans-serif;

}



.desktop-icon:hover {

    border-color: rgba(125, 211, 192, 0.6);

    transform: translateY(-3px);

    box-shadow: 0 10px 26px rgba(3, 5, 12, 0.4);

}



.desktop-icon:active {

    transform: translateY(-1px);

}



.desktop-icon i,

.desktop-icon img {

    font-size: 2.2rem;

    width: 46px;

    height: 46px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.03);

    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);

    margin-bottom: 0;

    color: var(--text-primary);

    position: relative;

    z-index: 1;

}



.desktop-icon img {

    object-fit: cover;

}



.desktop-icon span {

    font-size: 0.75rem;

    font-weight: 600;

    color: rgba(255, 255, 255, 0.85);

    text-transform: none;

    line-height: 1.2;

    letter-spacing: 0.03em;

    padding: 0 0.25rem;

    position: relative;

    z-index: 1;

}



.desktop-icon.desktop-icon-gold-ring {

    background: rgba(34, 197, 94, 0.05);

    border-color: rgba(34, 197, 94, 0.35);

    box-shadow: none;

}



.desktop-icon.desktop-icon-red-ring {

    background: rgba(248, 113, 113, 0.05);

    border-color: rgba(248, 113, 113, 0.35);

    box-shadow: none;

}



.desktop-icon[data-app="browser"] i,

.desktop-icon[data-app="browser"] img {

  background: linear-gradient(135deg, #22c55e, #16a34a);

  color: #fff;

  padding: 0.55rem;

  border-radius: 14px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  box-shadow: none;

  font-size: 1.25rem;

}



.desktop-icon[data-app="games"] i,

.desktop-icon[data-app="games"] img {

  background: linear-gradient(135deg, #2563eb, #1d4ed8);

  color: #fff;

  padding: 0.55rem;

  border-radius: 14px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  box-shadow: none;

  font-size: 1.25rem;

}



.desktop-icon[data-app="blooket-bot"] i,

.desktop-icon[data-app="blooket-bot"] img {

  background: linear-gradient(135deg, #ef4444, #dc2626);

  color: #fff;

  padding: 0.6rem;

  border-radius: 14px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  box-shadow: none;

  font-size: 1.3rem;

}



.desktop-icon.selected {

    border-color: rgba(59, 130, 246, 0.7);

    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3), 0 12px 30px rgba(0, 0, 0, 0.45);

}



.desktop-icon.folder-app {

    border-color: rgba(59, 130, 246, 0.5);

}



.desktop-icon span.expanded {

    overflow: visible;

    white-space: normal;

}



.app-folder-overlay {

    position: fixed;

    inset: 0;

    background: rgba(2, 6, 17, 0.8);

    backdrop-filter: blur(26px);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 5;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s ease;

}



.app-folder-overlay.active {

    opacity: 1;

    pointer-events: auto;

}



.app-folder-panel {

    width: min(960px, 95vw);

    max-height: 80vh;

    background: rgba(9, 12, 21, 0.95);

    padding: 1.5rem;

    border-radius: 26px;

    border: 1px solid rgba(125, 211, 192, 0.25);

    box-shadow: 0 40px 120px rgba(2, 6, 17, 0.7);

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.app-folder-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

}



.app-folder-label {

    text-transform: uppercase;

    letter-spacing: 0.35rem;

    font-size: 0.7rem;

    color: rgba(125, 211, 192, 0.8);

    margin-bottom: 0.25rem;

}



.app-folder-panel h3 {

    margin: 0;

    font-size: 1.75rem;

    font-weight: 600;

}



.app-folder-subtitle {

    color: var(--text-secondary);

    margin: 0.25rem 0 0;

}



.app-folder-close {

    border: none;

    background: rgba(255, 255, 255, 0.08);

    color: var(--text-primary);

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: background 0.2s ease;

}



.app-folder-close:hover {

    background: rgba(125, 211, 192, 0.2);

}



.app-folder-grid {

    flex: 1;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

    gap: 1rem;

    overflow-y: auto;

    padding-right: 0.5rem;

}



.app-folder-item {

    background: rgba(15, 23, 42, 0.9);

    border-radius: 16px;

    border: 1px solid rgba(255, 255, 255, 0.05);

    padding: 1rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.4rem;

    text-align: center;

    cursor: pointer;

    transition: transform 0.2s ease, border-color 0.2s ease;

}



.app-folder-item:hover {

    border-color: rgba(125, 211, 192, 0.6);

    transform: translateY(-4px);

}



.app-folder-item i {

    font-size: 1.7rem;

    color: var(--accent);

}



.app-folder-item img {

    width: 2.1rem;

    height: 2.1rem;

    border-radius: 6px;

    object-fit: cover;

}



.app-folder-item span {

    font-size: 0.85rem;

    color: var(--text-primary);

}



.desktop-icon-hover-script {

    display: none;

}



.taskbar {

    position: fixed;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    background: rgba(21, 25, 35, 0.7);

    backdrop-filter: blur(40px) saturate(180%);

    border: 1px solid var(--border);

    border-radius: 16px;

    padding: 0.4rem 1rem;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

    z-index: 1000;

    animation: slideUp 0.5s ease;

}



@keyframes slideUp {

    from {

        transform: translateX(-50%) translateY(100px);

        opacity: 0;

    }



    to {

        transform: translateX(-50%) translateY(0);

        opacity: 1;

    }

}



.taskbar.full {

    bottom: 0;

    left: 0;

    transform: none;

    width: 100%;

    max-width: none;

    border-radius: 0;

    border-left: none;

    border-right: none;

    border-bottom: none;

    justify-content: flex-start;

    border-top: 1px solid var(--border);

    background: rgba(21, 25, 35, 0.85);

    /* Slightly more opaque */

    animation: slideUpFull 0.5s ease;

}



@keyframes slideUpFull {

    from {

        transform: translateY(100px);

        opacity: 0;

    }



    to {

        transform: translateY(0);

        opacity: 1;

    }

}



.taskbar-icon {

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    cursor: pointer;

    transition: all 0.2s ease;

    font-size: 1.4rem;

    position: relative;

    color: var(--accent);

}



.taskbar-icon:hover {

    background: rgba(107, 179, 160, 0.15);

}



.taskbar-icon::after {

    content: '';

    position: absolute;

    bottom: -15px;

    left: 50%;

    transform: translateX(-50%);

    opacity: 0;

    transition: all 0.2s ease;

}



.taskbar-icon.active::after {

    opacity: 1;

    bottom: 0px;

    width: 24px;

    height: 2px;

    background: var(--accent);

    border-radius: 1px;

}



.taskbar-icon.open:not(.active)::after {

    opacity: 1;

    bottom: 0px;

    width: 4px;

    height: 4px;

    background: var(--accent);

    border-radius: 50%;

}



.taskbar-divider {

    width: 1px;

    height: 28px;

    background: var(--border);

    margin: 0 0.5rem;

}



.system-tray {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding-left: 0rem;

    padding-right: 0.5rem;

    color: var(--text-primary);

    font-size: 0.85rem;

}



.start-menu {

    position: fixed;

    bottom: 98px;

    left: 50%;

    transform: translateX(-50%) scale(0.95);

    width: 650px;

    height: 520px;

    background: rgba(21, 25, 35, 0.9);

    backdrop-filter: blur(50px) saturate(180%);

    border: 1px solid var(--border);

    border-radius: 20px;

    padding: 2rem;

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);

    opacity: 0;

    pointer-events: none;

    transition: all 0.3s ease;

    z-index: 999;

    display: flex;

    flex-direction: column;

}



.start-menu.active {

    opacity: 1;

    transform: translateX(-50%) scale(1);

    pointer-events: all;

    animation: menuSlideIn 0.4s ease-out;

}



@keyframes menuSlideIn {

    from {

        opacity: 0;

        transform: translateX(-50%) scale(0.9) translateY(20px);

    }



    to {

        opacity: 1;

        transform: translateX(-50%) scale(1) translateY(0);

    }

}



.start-header {

    display: flex;

    align-items: center;

    gap: 1.25rem;

    margin-bottom: 2rem;

    padding-bottom: 1rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.start-avatar {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--accent), var(--accent-hover));

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.3rem;

    color: var(--bg-primary);

    overflow: hidden;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



.login-avatar.has-image i,

.start-avatar.has-image i {

    display: none;

}



.start-user {

    flex: 1;

}



.start-user h3 {

    color: var(--text-primary);

    margin-bottom: 0.15rem;

    font-size: 1rem;

    font-family: fontb;

}



.start-user p {

    color: var(--text-secondary);

    font-size: 0.8rem;

}



.app-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 0.875rem;

    overflow-y: auto;

    overflow-x: hidden;

    flex: 1;

    padding-right: 0.5rem;

    grid-auto-rows: 120px;

    align-content: start;

}



.start-search {

    padding: 0 1.5rem;

    margin-bottom: 1.25rem;

    position: relative;

}



.start-search-input {

    width: 100%;

    padding: 1rem 3.5rem 1rem 1.25rem;

    background: linear-gradient(135deg, rgba(30, 35, 48, 0.9), rgba(21, 25, 35, 0.8));

    border: 2px solid var(--border);

    border-radius: 16px;

    color: var(--text-primary);

    font-size: 1rem;

    font-family: font, "font" !important;

    transition: all 0.3s ease;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);

    backdrop-filter: blur(10px);

}



.start-search-input:focus {

    outline: none;

    border-color: var(--accent);

    background: linear-gradient(135deg, rgba(30, 35, 48, 0.95), rgba(21, 25, 35, 0.9));

    box-shadow: 0 0 0 4px rgba(125, 211, 192, 0.2), 0 8px 24px rgba(0, 0, 0, 0.3);

}



.start-search-input::placeholder {

    color: var(--text-secondary);

    opacity: 0.7;

}



.start-search-icon {

    position: absolute;

    right: 2.65rem;

    top: 50%;

    transform: translateY(-50%);

    color: var(--accent);

    font-size: 1.2rem;

    pointer-events: none;

    opacity: 0.9;

    transition: all 0.3s ease;

}



.app-grid::-webkit-scrollbar {

    width: 8px;

}



.app-grid::-webkit-scrollbar-track {

    background: transparent;

}



.app-grid::-webkit-scrollbar-thumb {

    background: rgba(255, 255, 255, 0.1);

    border-radius: 4px;

}



.app-grid::-webkit-scrollbar-thumb:hover {

    background: rgba(255, 255, 255, 0.2);

}



.app-folder-toggle i {

    font-size: 2rem;

}



.app-item {

    background: rgba(255, 255, 255, 0.02);

    border-radius: 18px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    padding: 1rem 0.75rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 0.45rem;

    min-height: 100px;

    min-width: 100px;

    cursor: pointer;

    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;

    position: relative;

    overflow: hidden;

}



.app-item:hover {

    border-color: rgba(125, 211, 192, 0.6);

    transform: translateY(-3px);

    box-shadow: 0 15px 32px rgba(3, 5, 12, 0.4);

}



.app-item:active {

    transform: translateY(-1px);

    box-shadow: 0 10px 18px rgba(3, 5, 12, 0.4);

}



.app-icon {

    width: 78px;

    height: 78px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(155deg, rgba(59, 130, 246, 0.25), rgba(14, 165, 233, 0.2));

    box-shadow: 0 18px 32px rgba(7, 10, 18, 0.45);

    position: relative;

}



.app-icon i,

.app-icon img {

    font-size: 2.15rem;

    color: #f8fafc;

    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.app-icon img {

    border-radius: 16px;

    object-fit: cover;

}



.app-label {

    font-size: 0.72rem;

    font-weight: 600;

    letter-spacing: 0.02em;

    color: rgba(255, 255, 255, 0.9);

    text-align: center;

    text-transform: none;

    line-height: 1.3;

    max-width: 110px;

    word-break: break-word;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}



.app-item.app-folder-toggle .app-icon {

    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.4));

}



.app-item.app-folder-toggle .app-label {

    color: rgba(125, 211, 192, 0.8);

}



.login-container.passwordless {

    min-height: 470px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.window {

    position: absolute;

    background: rgba(21, 25, 35, 0.85);

    backdrop-filter: blur(40px) saturate(180%);

    border: 1px solid var(--border);

    border-radius: 12px;

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

    overflow: hidden;

    z-index: 100;

    animation: windowOpen 0.1s ease;

    min-width: min(400px, 92vw);

    min-height: min(300px, 70vh);

    max-width: calc(100vw - 24px);

    max-height: calc(100vh - 120px);

}



.snap-overlay {

    position: absolute;

    pointer-events: none;

    border: 2px solid rgba(59, 130, 246, 0.6);

    border-radius: 14px;

    background: rgba(59, 130, 246, 0.35);

    opacity: 0;

    transform: scale(0.96);

    transition: opacity 0.15s ease, transform 0.15s ease;

    z-index: 5000;

    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.25);

}



.snap-overlay.visible {

    opacity: 1;

    transform: scale(1);

}



.snap-overlay.animate {

    animation: snapPulse 0.6s ease-in-out infinite alternate;

}



@keyframes snapPulse {

    0% {

        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.25);

    }



    100% {

        box-shadow: 0 0 24px 0 rgba(59, 130, 246, 0.45);

    }

}



.snap-manager {

    padding: 1.75rem;

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    color: var(--text-primary);

}



.snap-section {

    background: rgba(16, 20, 32, 0.8);

    border: 1px solid var(--glass-border);

    border-radius: 16px;

    padding: 1.25rem 1.5rem;

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.snap-section-header {

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

}



.snap-section-title {

    display: flex;

    align-items: center;

    gap: 1rem;

}



.snap-section-title i {

    width: 44px;

    height: 44px;

    border-radius: 12px;

    background: rgba(125, 211, 192, 0.18);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--accent);

    font-size: 1.25rem;

}



.snap-section-title h2 {

    font-size: 1.35rem;

    font-family: fontb;

    margin-bottom: 0.25rem;

}



.snap-section-title p {

    font-size: 0.9rem;

    color: var(--text-secondary);

}



.snap-section-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

}



.snap-color-picker {

    display: flex;

    align-items: center;

    gap: 0.75rem;

}



.snap-color-picker input {

    width: 42px;

    height: 42px;

    border: none;

    border-radius: 12px;

    background: transparent;

    cursor: pointer;

}



.snap-color-picker span {

    font-size: 0.9rem;

    color: var(--text-secondary);

    letter-spacing: 0.05em;

}



.snap-section-heading h3 {

    font-size: 1.05rem;

    font-family: fontb;

    margin-bottom: 0.3rem;

}



.snap-section-heading {

    display: flex;

    flex-direction: column;

    gap: 0.35rem;

}



.snap-section-heading p {

    font-size: 0.86rem;

    color: var(--text-secondary);

    line-height: 1.4;

}



.snap-layout-list {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.snap-layout-card {

    background: rgba(10, 14, 26, 0.75);

    border: 1px solid var(--glass-border);

    border-radius: 14px;

    padding: 1.1rem 1.25rem;

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.snap-layout-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

}



.snap-layout-title {

    display: flex;

    flex-direction: column;

    gap: 0.25rem;

}



.snap-layout-title input {

    background: rgba(255, 255, 255, 0.04);

    border: 1px solid transparent;

    border-radius: 10px;

    padding: 0.5rem 0.75rem;

    color: var(--text-primary);

    font-family: fontb;

    font-size: 1rem;

    outline: none;

    transition: border 0.2s ease, background 0.2s ease;

}



.snap-layout-title input:focus {

    border-color: var(--accent);

    background: rgba(125, 211, 192, 0.12);

}



.snap-layout-title span {

    font-size: 0.8rem;

    color: var(--text-secondary);

}



.snap-remove-btn {

    width: 38px;

    height: 38px;

    border-radius: 10px;

    border: 1px solid rgba(239, 68, 68, 0.4);

    background: rgba(239, 68, 68, 0.08);

    color: var(--text-primary);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.2s ease;

}



.snap-remove-btn:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}



.snap-remove-btn:not(:disabled):hover {

    background: rgba(239, 68, 68, 0.2);

}



.snap-layout-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

    gap: 0.75rem;

}



.snap-field {

    display: flex;

    flex-direction: column;

    gap: 0.35rem;

}



.snap-field label {

    font-size: 0.78rem;

    color: var(--text-secondary);

    letter-spacing: 0.04em;

    text-transform: uppercase;

}



.snap-field input {

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 10px;

    padding: 0.5rem 0.6rem;

    color: var(--text-primary);

    font-size: 0.9rem;

    outline: none;

    transition: border 0.2s ease, background 0.2s ease;

}



.snap-field input:focus {

    border-color: var(--accent);

    background: rgba(125, 211, 192, 0.12);

}



.snap-layout-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    align-items: center;

}



.snap-layout-actions select {

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 10px;

    padding: 0.55rem 0.75rem;

    color: var(--text-primary);

    font-size: 0.9rem;

    outline: none;

    min-width: 180px;

}



.snap-layout-actions select:disabled {

    opacity: 0.6;

    cursor: not-allowed;

}



.snap-hotkey-row {

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.snap-hotkey-input {

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 10px;

    padding: 0.5rem 0.75rem;

    color: var(--text-primary);

    font-size: 0.9rem;

    min-width: 160px;

    text-align: center;

    cursor: pointer;

    transition: border 0.2s ease, background 0.2s ease;

}



.snap-hotkey-input.capturing {

    border-color: var(--accent);

    background: rgba(125, 211, 192, 0.15);

}



.snap-clear-btn {

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 10px;

    padding: 0.45rem 0.75rem;

    color: var(--text-secondary);

    font-size: 0.85rem;

    cursor: pointer;

    transition: all 0.2s ease;

}



.snap-clear-btn:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}



.snap-clear-btn:not(:disabled):hover {

    color: var(--text-primary);

    background: rgba(125, 211, 192, 0.18);

    border-color: rgba(125, 211, 192, 0.35);

}



.snap-add-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 0.75rem;

    align-items: center;

}



.snap-add-grid input,

.snap-add-grid select {

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 10px;

    padding: 0.5rem 0.75rem;

    color: var(--text-primary);

    font-size: 0.9rem;

    outline: none;

    transition: border 0.2s ease, background 0.2s ease;

}



.snap-add-grid input:focus,

.snap-add-grid select:focus {

    border-color: var(--accent);

    background: rgba(125, 211, 192, 0.12);

}



.snap-add-btn {

    background: var(--accent);

    color: var(--bg-primary);

    border: none;

    border-radius: 10px;

    padding: 0.6rem 1rem;

    font-size: 0.9rem;

    font-family: fontb;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.snap-add-btn:hover {

    transform: translateY(-1px);

    box-shadow: 0 6px 16px rgba(125, 211, 192, 0.25);

}



.snap-empty {

    text-align: center;

    padding: 1.5rem;

    color: var(--text-secondary);

    border: 1px dashed rgba(255, 255, 255, 0.08);

    border-radius: 12px;

}



@keyframes windowOpen {

    from {

        transform: scale(0.95);

        opacity: 0;

    }



    to {

        transform: scale(1);

        opacity: 1;

    }

}



.window.minimized {

    animation: windowMinimize 0.25s ease forwards;

}



@keyframes windowMinimize {

    to {

        transform: scale(0.1);

        opacity: 0;

    }

}



.window-header {

    background: rgba(30, 35, 48, 0.6);

    padding: 0.625rem 1rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    cursor: move;

    user-select: none;

    border-bottom: 1px solid var(--border);

}



.window-title {

    display: flex;

    align-items: center;

    gap: 0.625rem;

    color: var(--text-primary);

    font-family: fontb;

    font-size: 0.9rem;

}



.window-title i {

    color: var(--accent);

    font-size: 1rem;

}



.window-controls {

    display: flex;

    gap: 0.5rem;

}



.window-btn {

    width: 28px;

    height: 28px;

    border-radius: 6px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.2s ease;

    font-size: 0.875rem;

    color: var(--text-secondary);

}



.window-btn:hover {

    background: rgba(255, 255, 255, 0.08);

    color: var(--text-primary);

}



.window-btn.close:hover {

    background: var(--error-red);

    color: var(--pure-white);

}



.window-content {

    padding: 0;

    height: calc(100% - 48px);

    overflow: auto;

    color: var(--text-primary);

    background: rgba(10, 14, 26, 0.6);

}



.window-content.has-padding {

    padding: 0rem;

}



.window-content::-webkit-scrollbar {

    width: 8px;

}



.window-content::-webkit-scrollbar-track {

    background: transparent;

}



.window-content::-webkit-scrollbar-thumb {

    background: rgba(255, 255, 255, 0.1);

    border-radius: 4px;

}



.window-content::-webkit-scrollbar-thumb:hover {

    background: rgba(255, 255, 255, 0.2);

}



.resize-handle {

    position: absolute;

    right: 0;

    bottom: 0;

    width: 20px;

    height: 20px;

    cursor: nwse-resize;

    z-index: 10;

}



.resize-handle-top {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 5px;

    cursor: ns-resize;

    z-index: 10;

}



.resize-handle-right {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    width: 5px;

    cursor: ew-resize;

    z-index: 10;

}



.resize-handle-bottom {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 5px;

    cursor: ns-resize;

    z-index: 10;

}



.resize-handle-left {

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    width: 5px;

    cursor: ew-resize;

    z-index: 10;

}



.terminal {

    height: 100%;

    background: var(--pure-black);

    color: var(--accent);

    font-family: 'SUSE Mono', monospace !important;

    padding: 1rem;

    overflow-y: auto;

}



.terminal-line {

    margin-bottom: 0.5rem;

}



.terminal-prompt {

    color: var(--accent);

}



.terminal-input {

    background: transparent;

    border: none;

    color: var(--accent);

    font-family: 'SUSE Mono', monospace !important;

    font-size: 1rem;

    outline: none;

    width: calc(100% - 200px);

    display: inline;

}



#commandLineMode {

    position: fixed;

    inset: 0;

    background: #000;

    display: none;

    opacity: 0;

    transition: opacity 0.5s ease;

    z-index: 9998;

}



#commandLineMode.active {

    display: block;

    opacity: 1;

}



.cli-terminal {

    height: 100%;

    background: var(--pure-black);

    color: var(--accent);

    font-family: 'SUSE Mono', monospace !important;

    padding: 2rem;

    overflow-y: auto;

}



.cli-line {

    margin-bottom: 0.5rem;

}



.cli-prompt {

    color: var(--accent);

}



.cli-input {

    background: transparent;

    border: none;

    color: var(--accent);

    font-family: 'SUSE Mono', monospace !important;

    font-size: 1rem;

    outline: none;

    width: 80%;

}



.settings-section {

    margin-bottom: 1.5rem;

}



.settings-section h3 {

    color: var(--text-primary);

    margin-bottom: 0.875rem;

    font-size: 1.1rem;

    font-family: fontb;

}



.settings-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.875rem 1rem;

    background: rgba(30, 35, 48, 0.6);

    border-radius: 10px;

    margin-bottom: 0.5rem;

}



.settings-btn {

    padding: 0.875rem 1rem;

    background: rgba(125, 211, 192, 0.15);

    border: 1px solid rgba(125, 211, 192, 0.3);

    border-radius: 10px;

    color: var(--text-primary);

    cursor: pointer;

    transition: all 0.2s ease;

    font-size: 0.9rem;

    font-weight: 500;

    text-align: center;

}



.settings-btn:hover {

    background: rgba(125, 211, 192, 0.25);

    border-color: rgba(125, 211, 192, 0.5);

}



.toggle-switch {

    width: 44px;

    height: 24px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 12px;

    position: relative;

    cursor: pointer;

    transition: all 0.2s ease;

}



.toggle-switch.active {

    background: var(--accent);

}



.toggle-switch::after {

    content: '';

    position: absolute;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: var(--pure-white);

    top: 3px;

    left: 3px;

    transition: all 0.2s ease;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

}



.toggle-switch.active::after {

    left: 23px;

}



.file-explorer {

    display: flex;

    height: 100%;

    background: rgba(10, 14, 26, 0.6);

}



.file-sidebar {

    width: 250px;

    background: rgba(21, 25, 35, 0.8);

    border-right: 1px solid var(--border);

    overflow-y: auto;

    padding: 1rem;

}



.file-tree-item {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem;

    cursor: pointer;

    border-radius: 6px;

    transition: all 0.2s ease;

    color: var(--text-primary);

    font-size: 0.85rem;

    user-select: none;

}



.file-tree-item:hover {

    background: rgba(125, 211, 192, 0.1);

}



.file-tree-item.active {

    background: rgba(125, 211, 192, 0.2);

    color: var(--accent);

}



.file-tree-item i {

    font-size: 0.9rem;

    color: var(--accent);

    width: 16px;

}



.file-tree-item.folder>i {

    transition: transform 0.2s ease;

}



.file-tree-item.folder.expanded>i {

    transform: rotate(90deg);

}



.file-tree-children {

    margin-left: 1rem;

    display: none;

}



.file-tree-children.expanded {

    display: block;

}



.file-main {

    flex: 1;

    display: flex;

    flex-direction: column;

}



.file-toolbar {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.875rem 1rem;

    background: rgba(30, 35, 48, 0.6);

    border-bottom: 1px solid var(--border);

}



.file-breadcrumb {

    flex: 1;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    color: var(--text-secondary);

    font-size: 0.85rem;

}



.breadcrumb-item {

    cursor: pointer;

    transition: color 0.2s ease;

}



.breadcrumb-item:hover {

    color: var(--accent);

}



.breadcrumb-separator {

    color: var(--border);

}



.file-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

    gap: 1rem;

    padding: 1.5rem;

    overflow-y: auto;

    flex: 1;

}



.file-item {

    text-align: center;

    padding: 1rem;

    border-radius: 10px;

    cursor: pointer;

    transition: all 0.2s ease;

    height: fit-content;

}



.file-item:hover {

    background: rgba(125, 211, 192, 0.1);

}



.file-item i {

    font-size: 3rem;

    color: var(--accent);

    margin-bottom: 0.5rem;

}



.file-item span {

    display: block;

    font-size: 0.8rem;

    color: var(--text-primary);

    font-weight: 500;

}



.editor-toolbar {

    display: flex;

    gap: 0.5rem;

    padding: 0.875rem 1rem;

    border-bottom: 1px solid var(--border);

    background: rgba(30, 35, 48, 0.6);

    align-items: center;

}



.editor-btn {

    padding: 0.5rem 1rem;

    background: rgba(30, 35, 48, 0.8);

    border: 1px solid var(--border);

    border-radius: 8px;

    cursor: pointer;

    transition: all 0.2s ease;

    color: var(--text-primary);

    font-size: 0.85rem;

    font-weight: 500;

}



.editor-btn:hover {

    background: rgba(125, 211, 192, 0.15);

    border-color: rgba(125, 211, 192, 0.3);

}



.editor-filename {

    flex: 1;

    padding: 0.5rem 0.875rem;

    background: rgba(10, 14, 26, 0.8);

    border: 1px solid var(--border);

    border-radius: 8px;

    color: var(--text-primary);

    font-size: 0.85rem;

}



.editor-filename:focus {

    outline: none;

    border-color: var(--accent);

}



.editor-textarea {

    width: 100%;

    height: calc(100% - 54px);

    background: rgba(10, 14, 26, 0.8);

    border: none;

    padding: 1.5rem;

    color: var(--text-primary);

    font-family: 'SUSE Mono', monospace !important;

    font-size: 0.95rem;

    resize: none;

    line-height: 1.6;

}



.editor-textarea:focus {

    outline: none;

}



.editor-textarea::placeholder {

    color: var(--text-secondary);

}



.browser-placeholder {

    width: 100%;

    height: 100%;

    background: rgba(10, 14, 26, 0.8);

}



.browser-frame {

    width: 100%;

    height: 100%;

    border: none;

    background: #fff;

}



.help-content {

    padding: 1.5rem;

}



.help-section {

    margin-bottom: 2rem;

}



.help-section h3 {

    color: var(--accent);

    margin-bottom: 1rem;

    font-size: 1.2rem;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.help-section p {

    color: var(--text-secondary);

    line-height: 1.6;

    margin-bottom: 0.75rem;

}



.help-section ul {

    list-style: none;

    padding-left: 1rem;

}



.help-section li {

    color: var(--text-secondary);

    line-height: 1.8;

    margin-bottom: 0.5rem;

}



.help-section li::before {

    content: '➤';

    color: var(--accent);

    margin-right: 0.5rem;

}



.help-code {

    background: var(--pure-black);

    color: var(--pure-white);

    padding: 0.15rem 0.5rem;

    border-radius: 5px;

    font-family: 'SUSE Mono', monospace !important;

    font-size: 0.9rem;

    border: 1px solid var(--accent);

}



.toast-container {

    position: fixed;

    top: 20px;

    right: 20px;

    z-index: 10001;

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    pointer-events: none;

}



.toast {

    background: rgba(21, 25, 35, 0.95);

    backdrop-filter: blur(40px) saturate(180%);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 1rem 1.25rem;

    min-width: 300px;

    max-width: 400px;

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

    display: flex;

    align-items: center;

    gap: 0.75rem;

    animation: toastSlideIn 0.3s ease;

    pointer-events: all;

    font-family: font, "font" !important;

}



.toast.hiding {

    animation: toastSlideOut 0.3s ease forwards;

}



@keyframes toastSlideIn {

    from {

        transform: translateX(400px);

        opacity: 0;

    }



    to {

        transform: translateX(0);

        opacity: 1;

    }

}



@keyframes toastSlideOut {

    to {

        transform: translateX(400px);

        opacity: 0;

    }

}



.toast-icon {

    font-size: 1.25rem;

    color: var(--accent);

    flex-shrink: 0;

}



.toast-message {

    flex: 1;

    color: var(--text-primary);

    font-size: 0.9rem;

    line-height: 1.4;

}



.toast-close {

    width: 24px;

    height: 24px;

    border-radius: 6px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.2s ease;

    color: var(--text-secondary);

    flex-shrink: 0;

}



.toast-close:hover {

    background: var(--transparent-white-8);

    color: var(--text-primary);

}



.chat-toast {

    max-width: 220px;

    font-size: 11px;

    padding: 6px 8px;

    border-radius: 10px;

    line-height: 1.2;

}



.context-menu {

    position: fixed;

    background: rgba(21, 25, 35, 0.95);

    backdrop-filter: blur(40px) saturate(180%);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 0.5rem;

    min-width: 200px;

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

    z-index: 10002;

    display: none;

    font-family: font, "font" !important;

}



.context-menu.active {

    display: block;

    animation: contextMenuAppear 0.15s ease;

}



@keyframes contextMenuAppear {

    from {

        opacity: 0;

        transform: scale(0.95);

    }



    to {

        opacity: 1;

        transform: scale(1);

    }

}



.context-menu-item {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.625rem 1rem;

    color: var(--text-primary);

    cursor: pointer;

    border-radius: 8px;

    transition: all 0.15s ease;

    font-size: 0.9rem;

}



.context-menu-item:hover {

    background: rgba(125, 211, 192, 0.15);

    color: var(--accent);

}



.context-menu-item i {

    width: 16px;

    text-align: center;

    color: var(--accent);

    font-size: 0.9rem;

}



.context-menu-divider {

    height: 1px;

    background: var(--border);

    margin: 0.5rem 0;

}



.context-menu-item.disabled {

    opacity: 0.4;

    cursor: not-allowed;

    pointer-events: none;

}



.whats-new-content {

    padding: 2rem;

    max-width: 800px;

    margin: 0 auto;

    text-align: center;

}



.whats-new-header {

    position: relative;

    left: 50%;

    transform: translateX(-50%);

    margin-bottom: 3rem;

}



.whats-new-header h1 {

    font-size: 2.2rem;

    color: var(--accent);

    margin-bottom: 0.5rem;

    font-family: fontb;

    line-height: 1.3;

    text-align: center;

}



.whats-new-header p {

    color: var(--text-secondary);

    font-size: 1.1rem;

    text-align: center;

}



.carousel-container {

    position: relative;

    background: rgba(30, 35, 48, 0.6);

    border-radius: 16px;

    padding: 2.5rem 2rem;

    margin-bottom: 3rem;

    min-height: 340px;

    overflow: hidden;

    border: 1px solid var(--border);

}



.carousel-container h2 {

    position: relative;

    left: 50%;

    transform: translateX(-50%);

}



.carousel-slide {

    display: none;

    animation: fadeIn 0.5s ease;

}



.carousel-slide.active {

    display: block;

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(10px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.carousel-illustration {

    width: 100%;

    height: 150px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 1rem;

    position: relative;

}



.illustration-folder {

    width: 140px;

    height: 100px;

    background: var(--accent);

    border-radius: 0 8px 8px 8px;

    position: relative;

    animation: float 3s ease-in-out infinite;

}



.illustration-folder::before {

    content: '';

    position: absolute;

    top: -19px;

    left: 0;

    width: 70px;

    height: 20px;

    background: var(--accent);

    border-radius: 8px 8px 0 0;

}



.illustration-tree {

    display: flex;

    gap: 0.5rem;

    align-items: flex-start;

}



.illustration-tree-item {

    width: 80px;

    height: 80px;

    background: rgba(125, 211, 192, 0.2);

    border: 2px solid var(--accent);

    border-radius: 8px;

    position: relative;

    animation: float 3s ease-in-out infinite;

}



.illustration-tree-item:nth-child(2) {

    animation-delay: 0.5s;

    margin-top: 20px;

}



.illustration-tree-item:nth-child(3) {

    animation-delay: 1s;

    margin-top: 40px;

}



.illustration-context {

    position: relative;

    width: 130px;

    height: 140px;

}



.illustration-context-box {

    width: 100%;

    height: 100%;

    background: rgba(21, 25, 35, 0.95);

    border: 2px solid var(--accent);

    border-radius: 12px;

    padding: 1rem;

    animation: float 3s ease-in-out infinite;

}



.illustration-context-item {

    height: 20px;

    background: rgba(125, 211, 192, 0.3);

    border-radius: 4px;

    margin-bottom: 0.5rem;

}



.illustration-window {

    width: 200px;

    height: 150px;

    background: rgba(21, 25, 35, 0.85);

    border: 2px solid var(--accent);

    border-radius: 12px;

    position: relative;

    animation: float 3s ease-in-out infinite;

}



.illustration-window-header {

    height: 30px;

    background: rgba(30, 35, 48, 0.8);

    border-radius: 10px 10px 0 0;

    border-bottom: 2px solid var(--accent);

}



.illustration-taskbar {

    width: 280px;

    height: 56px;

    background: rgba(21, 25, 35, 0.9);

    border: 2px solid var(--accent);

    border-radius: 16px;

    display: flex;

    align-items: center;

    padding: 0 1rem;

    gap: 0.75rem;

    animation: float 3s ease-in-out infinite;

    position: relative;

}



.illustration-taskbar-square {

    width: 28px;

    height: 28px;

    background: var(--accent);

    border-radius: 8px;

    position: relative;

}



.illustration-taskbar-divider {

    width: 2px;

    height: 28px;

    background: rgba(125, 211, 192, 0.3);

}



.illustration-taskbar-circles {

    display: flex;

    gap: 0.5rem;

}



.illustration-taskbar-circle {

    width: 28px;

    height: 28px;

    background: rgba(125, 211, 192, 0.2);

    border-radius: 8px;

    position: relative;

    animation: taskbarPulse 2s ease-in-out infinite;

}



.illustration-taskbar-circle:nth-child(1) {

    animation-delay: 0s;

}



.illustration-taskbar-circle:nth-child(2) {

    animation-delay: 0.3s;

}



.illustration-taskbar-circle:nth-child(3) {

    animation-delay: 0.6s;

}



.illustration-taskbar-circle:nth-child(4) {

    animation-delay: 0.9s;

}



.illustration-taskbar-circle::after {

    content: '';

    position: absolute;

    bottom: -8px;

    left: 50%;

    transform: translateX(-50%);

    width: 4px;

    height: 4px;

    background: var(--accent);

    border-radius: 50%;

}



.illustration-taskbar-circle:nth-child(2)::after {

    width: 20px;

    height: 2px;

    bottom: -7px;

    border-radius: 1px;

}



@keyframes taskbarPulse {



    0%,

    100% {

        background: rgba(125, 211, 192, 0.2);

    }



    50% {

        background: rgba(125, 211, 192, 0.4);

    }

}



.illustration-boot {

    display: flex;

    align-items: center;

    gap: 2rem;

}



.illustration-boot-icon {

    width: 80px;

    height: 80px;

    background: rgba(125, 211, 192, 0.2);

    border: 2px solid var(--accent);

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    color: var(--accent);

    animation: float 3s ease-in-out infinite;

}



.illustration-boot-icon:nth-child(3) {

    animation-delay: 0.5s;

}



.illustration-boot-divider {

    width: 3px;

    height: 100px;

    background: var(--accent);

    opacity: 0.4;

    border-radius: 2px;

}



.illustration-store {

    width: 230px;

    height: 150px;

    background: rgba(21, 25, 35, 0.95);

    border: 2px solid var(--accent);

    border-radius: 16px;

    padding: 1rem;

    animation: float 3s ease-in-out infinite;

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



.illustration-store-header {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding-bottom: 0.5rem;

    border-bottom: 2px solid rgba(125, 211, 192, 0.3);

}



.illustration-store-title-bar {

    flex: 1;

    height: 10px;

    background: rgba(125, 211, 192, 0.3);

    border-radius: 3px;

}



.illustration-store-icon {

    width: 28px;

    height: 28px;

    background: var(--accent);

    border-radius: 6px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.9rem;

    color: var(--bg-primary);

}



.illustration-store-items {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.illustration-store-item {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.5rem;

    background: rgba(30, 35, 48, 0.6);

    border-radius: 8px;

    animation: fadeInStore 0.5s ease forwards;

    opacity: 0;

}



.illustration-store-item:nth-child(1) {

    animation-delay: 0.2s;

}



@keyframes fadeInStore {

    to {

        opacity: 1;

    }

}



.illustration-store-item-icon {

    width: 32px;

    height: 32px;

    background: rgba(125, 211, 192, 0.3);

    border: 1px solid var(--accent);

    border-radius: 8px;

    flex-shrink: 0;

}



.illustration-store-item-info {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 0.15rem;

}



.illustration-store-item-name {

    height: 8px;

    background: rgba(125, 211, 192, 0.4);

    border-radius: 2px;

    width: 80%;

}



.illustration-store-item-desc {

    height: 6px;

    background: rgba(125, 211, 192, 0.2);

    border-radius: 2px;

    width: 60%;

}



.illustration-store-item-btn {

    width: 50px;

    height: 24px;

    background: var(--accent);

    border-radius: 6px;

    flex-shrink: 0;

}



.illustration-cogs {

    display: flex;

    gap: .7rem;

    align-items: center;

    margin-top: -100px;

    margin-bottom: -100px;

}



.illustration-cog {

    font-size: 4rem;

    color: var(--accent);

    animation: rotateCog 10s linear infinite;

}



.illustration-cog:nth-child(2) {

    animation-direction: reverse;

    margin-bottom: 50px;

}



@keyframes rotateCog {

    from {

        transform: rotate(0deg);

    }



    to {

        transform: rotate(360deg);

    }

}



.illustration-login {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1rem;

}



.illustration-avatar {

    width: 80px;

    height: 80px;

    background: linear-gradient(135deg, var(--accent), var(--accent-hover));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2.5rem;

    color: var(--bg-primary);

    animation: float 3s ease-in-out infinite;

}



.illustration-input {

    width: 180px;

    height: 40px;

    background: rgba(30, 35, 48, 0.8);

    border: 2px solid var(--accent);

    border-radius: 10px;

    animation: float 3s ease-in-out infinite;

    animation-delay: 0.3s;

}



.illustration-window-header {

    height: 30px;

    background: rgba(30, 35, 48, 0.8);

    border-radius: 10px 10px 0 0;

    border-bottom: 2px solid var(--accent);

}



.illustration-tree-item {

    width: 80px;

    height: 80px;

    background: rgba(125, 211, 192, 0.2);

    border: 2px solid var(--accent);

    border-radius: 8px;

    position: relative;

    animation: float 3s ease-in-out infinite;

}



.illustration-tree-item::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 20px;

    background: rgba(30, 35, 48, 0.8);

    border-bottom: 2px solid var(--accent);

    border-radius: 6px 6px 0 0;

}



.scroll-indicator {

    position: fixed;

    bottom: 120px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 999;

    opacity: 0;

    transition: opacity 0.3s ease;

    pointer-events: none;

}



.scroll-indicator.visible {

    opacity: 1;

    animation: bounce 2s infinite;

}



.scroll-indicator-circle {

    width: 50px;

    height: 50px;

    background: rgba(125, 211, 192, 0.2);

    border: 2px solid var(--accent);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    backdrop-filter: blur(10px);

}



.scroll-indicator-circle i {

    font-size: 1.5rem;

    color: var(--accent);

}



@keyframes bounce {



    0%,

    20%,

    50%,

    80%,

    100% {

        transform: translateY(0);

    }



    40% {

        transform: translateY(-10px);

    }



    60% {

        transform: translateY(-5px);

    }

}



@keyframes float {



    0%,

    100% {

        transform: translateY(0px);

    }



    50% {

        transform: translateY(-10px);

    }

}



@keyframes tileAppear {

    from {

        transform: scale(0);

        opacity: 0;

    }



    to {

        transform: scale(1);

        opacity: 1;

    }

}



@keyframes tileMerge {

    0% {

        transform: scale(1);

    }



    50% {

        transform: scale(1.2);

    }



    100% {

        transform: scale(1);

    }

}



@keyframes slideLeft {

    from {

        transform: translateX(110px);

    }



    to {

        transform: translateX(0);

    }

}



@keyframes slideRight {

    from {

        transform: translateX(-110px);

    }



    to {

        transform: translateX(0);

    }

}



@keyframes slideUp {

    from {

        transform: translateY(110px);

    }



    to {

        transform: translateY(0);

    }

}



@keyframes slideDown {

    from {

        transform: translateY(-110px);

    }



    to {

        transform: translateY(0);

    }

}



@keyframes scoreIncrease {

    0% {

        transform: scale(1);

        color: var(--accent);

    }



    50% {

        transform: scale(1.1);

        color: var(--success-green);

    }



    100% {

        transform: scale(1);

        color: var(--accent);

    }

}



.tile-new {

    animation: tileAppear 0.2s ease;

}



.tile-merge {

    animation: tileMerge 0.3s ease;

}



.score-increase {

    animation: scoreIncrease 0.3s ease;

}



.tile-slide-left {

    animation: slideLeft 0.2s ease;

}



.tile-slide-right {

    animation: slideRight 0.2s ease;

}



.tile-slide-up {

    animation: slideUp 0.2s ease;

}



.tile-slide-down {

    animation: slideDown 0.2s ease;

}



@keyframes scoreIncrease {

    0% {

        transform: scale(1);

        color: var(--accent);

    }



    50% {

        transform: scale(1.1);

        color: var(--success-green);

    }



    100% {

        transform: scale(1);

        color: var(--accent);

    }

}



.tile-new {

    animation: tileAppear 0.2s ease;

}



.tile-merge {

    animation: tileMerge 0.3s ease;

}



.score-increase {

    animation: scoreIncrease 0.3s ease;

}



.tile-slide-left {

    animation: slideLeft 0.2s ease;

}



.tile-slide-right {

    animation: slideRight 0.2s ease;

}



.tile-slide-up {

    animation: slideUp 0.2s ease;

}



.tile-slide-down {

    animation: slideDown 0.2s ease;

}



.carousel-content {

    text-align: center;

}



.carousel-content h2 {

    color: var(--accent);

    font-size: 1.8rem;

    margin-bottom: 1rem;

}



.carousel-content p {

    color: var(--text-secondary);

    font-size: 1rem;

    line-height: 1.8;

    max-width: 600px;

    margin: 0 auto;

}



.carousel-controls {

    display: flex;

    justify-content: center;

    gap: 1rem;

    margin-top: 2rem;

}



.carousel-btn {

    width: 40px;

    height: 40px;

    background: rgba(125, 211, 192, 0.2);

    border: 1px solid var(--accent);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.3s ease;

    color: var(--accent);

}



.carousel-btn:hover {

    background: var(--accent);

    color: var(--bg-primary);

    transform: scale(1.1);

}



.carousel-dots {

    display: flex;

    justify-content: center;

    gap: 0.5rem;

    margin-top: 1.5rem;

}



.carousel-dot {

    width: 10px;

    height: 10px;

    background: rgba(125, 211, 192, 0.3);

    border-radius: 50%;

    cursor: pointer;

    transition: all 0.3s ease;

}



.carousel-dot.active {

    background: var(--accent);

    width: 30px;

    border-radius: 5px;

}



.whats-new-footer {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1.5rem;

    margin-top: 0.5rem;

}



.footer-card {

    background: rgba(30, 35, 48, 0.6);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 1.5rem;

    transition: all 0.3s ease;

}



.footer-card:hover {

    background: rgba(125, 211, 192, 0.1);

    border-color: rgba(125, 211, 192, 0.3);

    transform: translateY(-2px);

}



.footer-card h3 {

    color: var(--accent);

    margin-bottom: 0.75rem;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-size: 1.1rem;

}



.footer-card p {

    color: var(--text-secondary);

    line-height: 1.6;

    font-size: 0.9rem;

    margin-bottom: 1rem;

}



.footer-card a {

    color: var(--accent);

    text-decoration: none;

    font-family: fontb;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    transition: all 0.2s ease;

}



.footer-card a:hover {

    gap: 0.75rem;

}



.illustration-apps-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 0.75rem;

    width: 260px;

}



.illustration-apps-icon {

    width: 56px;

    height: 56px;

    background: rgba(125, 211, 192, 0.2);

    border: 2px solid var(--accent);

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

    color: var(--accent);

    animation: float 3s ease-in-out infinite;

}



.illustration-apps-icon:nth-child(1) {

    animation-delay: 0s;

}



.illustration-apps-icon:nth-child(2) {

    animation-delay: 0.2s;

}



.illustration-apps-icon:nth-child(3) {

    animation-delay: 0.4s;

}



.illustration-apps-icon:nth-child(4) {

    animation-delay: 0.6s;

}



.illustration-apps-icon:nth-child(5) {

    animation-delay: 0.8s;

}



.illustration-apps-icon:nth-child(6) {

    animation-delay: 1s;

}



.illustration-apps-icon:nth-child(7) {

    animation-delay: 1.2s;

}



.illustration-apps-icon:nth-child(8) {

    animation-delay: 1.4s;

}



.file-actions {

    position: absolute;

    bottom: 100%;

    left: 50%;

    transform: translateX(-50%) translateY(-10px);

    display: none;

    gap: 0.5rem;

    background: rgba(21, 25, 35, 0.95);

    backdrop-filter: blur(20px);

    border: 1px solid var(--border);

    border-radius: 8px;

    padding: 0.5rem;

    z-index: 10;

    white-space: nowrap;

}



.file-item.selected {

    background: rgba(125, 211, 192, 0.2);

    border: 2px solid var(--accent);

    padding: calc(1rem - 2px);

}



.file-item.selected .file-actions {

    display: flex;

}



.file-action-btn {

    padding: 0.4rem 0.8rem;

    background: rgba(30, 35, 48, 0.8);

    border: 1px solid var(--border);

    border-radius: 6px;

    color: var(--text-primary);

    font-size: 0.75rem;

    cursor: pointer;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    gap: 0.4rem;

}



.file-action-btn:hover {

    background: rgba(125, 211, 192, 0.15);

    border-color: var(--accent);

}



.file-action-btn.delete:hover {

    background: rgba(239, 68, 68, 0.2);

    border-color: #ef4444;

    color: #ef4444;

}



.file-item.drag-over {

    background: rgba(125, 211, 192, 0.3);

    border: 2px dashed var(--accent);

    padding: calc(1rem - 2px);

}



.appstore-content {

    display: flex;

    height: 100%;

    background: rgba(10, 14, 26, 0.6);

}



.appstore-sidebar {

    width: 200px;

    background: rgba(21, 25, 35, 0.8);

    border-right: 1px solid var(--border);

    padding: 1rem;

}



.appstore-section {

    padding: 0.75rem 1rem;

    margin-bottom: 0.5rem;

    border-radius: 8px;

    cursor: pointer;

    transition: all 0.2s ease;

    color: var(--text-primary);

    display: flex;

    align-items: center;

    gap: 0.75rem;

    font-size: 0.9rem;

}



.appstore-section:hover {

    background: rgba(125, 211, 192, 0.1);

}



.appstore-section.active {

    background: rgba(125, 211, 192, 0.2);

    color: var(--accent);

}



.appstore-section i {

    color: var(--accent);

    font-size: 1rem;

}



.appstore-main {

    flex: 1;

    overflow-y: auto;

    padding: 2rem;

}



.appstore-header {

    margin-bottom: 2rem;

}



.appstore-header h2 {

    color: var(--accent);

    font-size: 1.8rem;

    margin-bottom: 0.5rem;

}



.appstore-header p {

    color: var(--text-secondary);

    font-size: 0.95rem;

}



.appstore-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 1.5rem;

}



.appstore-item {

    background: rgba(30, 35, 48, 0.6);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 1.5rem;

    transition: all 0.2s ease;

    cursor: pointer;

}



.appstore-item:hover {

    background: rgba(125, 211, 192, 0.1);

    border-color: rgba(125, 211, 192, 0.3);

    transform: translateY(-2px);

}



.appstore-item-icon {

    width: 60px;

    height: 60px;

    background: linear-gradient(135deg, var(--accent), var(--accent-hover));

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.8rem;

    color: var(--bg-primary);

    margin-bottom: 1rem;

}



.appstore-item-name {

    font-size: 1.1rem;

    color: var(--text-primary);

    font-family: fontb;

    margin-bottom: 0.5rem;

}



.appstore-item-desc {

    font-size: 0.85rem;

    color: var(--text-secondary);

    line-height: 1.5;

    margin-bottom: 1rem;

    word-wrap: break-word;

    overflow-wrap: break-word;

    hyphens: auto;

}



.appstore-item-btn {

    padding: 0.6rem 1.2rem;

    background: var(--accent);

    border: none;

    border-radius: 8px;

    color: var(--bg-primary);

    font-size: 0.85rem;

    font-family: fontb;

    cursor: pointer;

    transition: all 0.2s ease;

    width: 100%;

}



.appstore-item-btn:hover {

    background: var(--accent-hover);

    transform: translateY(-1px);

}



.appstore-item-btn.installed {

    background: rgba(125, 211, 192, 0.2);

    color: var(--accent);

    border: 1px solid var(--accent);

}



.appstore-empty {

    text-align: center;

    padding: 4rem 2rem;

}



.appstore-empty i {

    font-size: 4rem;

    color: rgba(125, 211, 192, 0.3);

    margin-bottom: 1.5rem;

}



.appstore-empty h3 {

    color: var(--text-primary);

    font-size: 1.3rem;

    margin-bottom: 0.5rem;

}



.appstore-empty p {

    color: var(--text-secondary);

    font-size: 0.95rem;

}



.music-player {

    background: rgba(10, 14, 26, 0.8);

    height: 100%;

    display: flex;

    flex-direction: column;

    padding: 2rem;

    gap: 2rem;

}



.music-header {

    display: flex;

    align-items: center;

    gap: 1.5rem;

}



.music-artwork {

    width: 120px;

    height: 120px;

    background: linear-gradient(135deg, var(--accent), var(--accent-hover));

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 3rem;

    color: var(--bg-primary);

    flex-shrink: 0;

}



.music-info {

    flex: 1;

}



.music-title {

    font-size: 1.3rem;

    font-family: fontb;

    color: var(--text-primary);

    margin-bottom: 0.5rem;

}



.music-artist {

    font-size: 0.95rem;

    color: var(--text-secondary);

}



.music-progress-section {

    display: flex;

    align-items: center;

    gap: 1rem;

}



.music-time {

    font-size: 0.85rem;

    color: var(--text-secondary);

    min-width: 40px;

    text-align: center;

}



.music-progress-bar {

    flex: 1;

    height: 6px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 3px;

    cursor: pointer;

    position: relative;

    overflow: hidden;

}



.music-progress-fill {

    height: 100%;

    background: var(--accent);

    width: 0%;

    border-radius: 3px;

    transition: width 0.1s linear;

}



.music-controls {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 1.5rem;

}



.music-control-btn {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: rgba(30, 35, 48, 0.8);

    border: 1px solid var(--border);

    color: var(--text-primary);

    font-size: 1.2rem;

    cursor: pointer;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    justify-content: center;

}



.music-control-btn:hover {

    background: rgba(125, 211, 192, 0.15);

    border-color: var(--accent);

    transform: scale(1.05);

}



.music-control-btn.play-btn {

    width: 65px;

    height: 65px;

    background: linear-gradient(135deg, var(--accent), var(--accent-hover));

    border: none;

    color: var(--bg-primary);

    font-size: 1.5rem;

}



.music-control-btn.play-btn:hover {

    transform: scale(1.1);

}



.music-volume-section {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 0 1rem;

}



.music-volume-section i {

    color: var(--accent);

    font-size: 1.1rem;

}



.music-volume-slider {

    flex: 1;

    height: 6px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 3px;

    outline: none;

    -webkit-appearance: none;

}



.music-volume-slider::-webkit-slider-thumb {

    -webkit-appearance: none;

    width: 16px;

    height: 16px;

    background: var(--accent);

    border-radius: 50%;

    cursor: pointer;

}



.music-volume-slider::-moz-range-thumb {

    width: 16px;

    height: 16px;

    background: var(--accent);

    border-radius: 50%;

    cursor: pointer;

    border: none;

}



#volumePercent {

    min-width: 40px;

    text-align: right;

    color: var(--text-secondary);

    font-size: 0.85rem;

}



.music-load-section {

    display: flex;

    align-items: center;

    margin-left: auto;

}



.music-load-btn {

    padding: 0.75rem 1.25rem;

    background: rgba(125, 211, 192, 0.15);

    border: 1px solid rgba(125, 211, 192, 0.3);

    border-radius: 10px;

    color: var(--text-primary);

    cursor: pointer;

    transition: all 0.2s ease;

    font-size: 0.9rem;

    font-family: fontb;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    white-space: nowrap;

}



.music-load-btn:hover {

    background: rgba(125, 211, 192, 0.25);

    border-color: rgba(125, 211, 192, 0.5);

    transform: translateY(-2px);

}



.music-control-btn.active {

    background: rgba(125, 211, 192, 0.3);

    border-color: var(--accent);

    color: var(--accent);

}



.browser-container {

    display: flex;

    flex-direction: column;

    height: 100%;

    background: rgba(10, 14, 26, 0.8);

}



.browser-header {

    background: rgba(21, 25, 35, 0.9);

    border-bottom: 1px solid var(--border);

    padding: 0.5rem;

}





.browser-tabs::-webkit-scrollbar {

    height: 4px;

}



.browser-tabs::-webkit-scrollbar-thumb {

    background: rgba(255, 255, 255, 0.2);

    border-radius: 2px;

}



.browser-tab {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 0.75rem;

    background: rgba(30, 35, 48, 0.6);

    border: 1px solid var(--border);

    border-radius: 8px;

    min-width: 150px;

    max-width: 200px;

    cursor: pointer;

    transition: all 0.2s ease;

    position: relative;

}



.browser-tab:hover {

    background: rgba(30, 35, 48, 0.8);

}



.browser-tab.active {

    background: rgba(125, 211, 192, 0.15);

    border-color: var(--accent);

}



.browser-tab-icon {

    font-size: 0.9rem;

    color: var(--accent);

    flex-shrink: 0;

}



.browser-tab-title {

    flex: 1;

    font-size: 0.85rem;

    color: var(--text-primary);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.browser-tab-close {

    width: 18px;

    height: 18px;

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.7rem;

    color: var(--text-secondary);

    transition: all 0.2s ease;

    flex-shrink: 0;

}



.browser-tab-close:hover {

    background: rgba(239, 68, 68, 0.3);

    color: #ef4444;

}



.browser-new-tab {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(30, 35, 48, 0.6);

    border: 1px solid var(--border);

    border-radius: 6px;

    cursor: pointer;

    transition: all 0.2s ease;

    color: var(--accent);

    flex-shrink: 0;

    margin-top: 1.5px;

    margin-left: 4px;

}



.browser-new-tab:hover {

    background: rgba(125, 211, 192, 0.15);

    border-color: var(--accent);

}



.browser-controls {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem;

}



.browser-nav-btn {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(30, 35, 48, 0.8);

    border: 1px solid var(--border);

    border-radius: 6px;

    cursor: pointer;

    transition: all 0.2s ease;

    color: var(--text-primary);

    font-size: 0.9rem;

}



.browser-nav-btn:hover:not(:disabled) {

    background: rgba(125, 211, 192, 0.15);

    border-color: var(--accent);

}



.browser-nav-btn:disabled {

    opacity: 0.4;

    cursor: not-allowed;

}



.browser-url-bar {

    flex: 1;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    background: rgba(10, 14, 26, 0.8);

    border: 1px solid var(--border);

    border-radius: 8px;

    padding: 0 0.75rem;

    height: 36px;

}



.browser-url-bar:focus-within {

    border-color: var(--accent);

}



.browser-url-bar i {

    color: var(--text-secondary);

    font-size: 0.9rem;

}



.browser-url-input {

    flex: 1;

    background: transparent;

    border: none;

    color: var(--text-primary);

    font-size: 0.9rem;

    outline: none;

}



.browser-url-input::placeholder {

    color: var(--text-secondary);

}



.browser-view.active {

    display: block;

}



.browser-iframe {

    width: 100%;

    height: 100%;

    border: none;

    background: #fff;

}



.browser-landing {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    height: 100%;

    padding: 2rem;

    background: linear-gradient(135deg, #404040 0%, rgba(107, 179, 160, 0.1) 50%, #404040 100%);

}



.browser-landing-logo {

    font-size: 4rem;

    color: var(--accent);

    margin-bottom: 2rem;

}



.browser-landing-search {

    width: 100%;

    max-width: 600px;

    display: flex;

    align-items: center;

    gap: 0.75rem;

    background: rgba(21, 25, 35, 0.8);

    border: 1px solid var(--border);

    border-radius: 50px;

    padding: 0 1.5rem;

    height: 56px;

    transition: all 0.2s ease;

}



.browser-landing-search:focus-within {

    border-color: var(--accent);

    box-shadow: 0 4px 20px rgba(125, 211, 192, 0.2);

}



.browser-landing-search i {

    color: var(--text-secondary);

    font-size: 1.2rem;

}



.browser-landing-input {

    flex: 1;

    background: transparent;

    border: none;

    color: var(--text-primary);

    font-size: 1rem;

    outline: none;

}



.browser-landing-input::placeholder {

    color: var(--text-secondary);

}



.browser-loading {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: rgba(125, 211, 192, 0.2);

    overflow: hidden;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.2s ease;

    z-index: 10;

}



.browser-loading.active {

    opacity: 1;

}



.browser-header {

    background: rgba(21, 25, 35, 0.9);

    border-bottom: 1px solid var(--border);

    padding: 0.5rem;

    position: relative;

}



.browser-tabs {

    display: flex;

    gap: 0.25rem;

    padding: 0 0.5rem 0.5rem;

    overflow-x: auto;

    scrollbar-width: thin;

    position: relative;

}



.browser-content-container a {

    color: #0066cc;

    text-decoration: underline;

    cursor: pointer;

}



.browser-content {

    flex: 1;

    position: relative;

    overflow: hidden;

    background: var(--pure-white);

    isolation: isolate;

    contain: layout style paint;

}



.browser-view {

    display: none;

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    background: #fff;

    overflow: auto;

    isolation: isolate;

}



.browser-view iframe {

    display: none;

}





.browser-view {

    display: none;

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    background: var(--pure-white);

    overflow: auto;

    isolation: isolate;

    contain: strict;

}



.browser-view.active {

    display: block;

    z-index: 2;

}





.browser-content-container {

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    width: 100% !important;

    height: 100% !important;

    overflow: auto !important;

    padding: 0 !important;

    margin: 0 !important;

    background: var(--pure-white) !important;

    color: var(--pure-black) !important;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;

    box-sizing: border-box !important;

    isolation: isolate !important;

    z-index: 1 !important;

    contain: strict !important;

    transform: translateZ(0) !important;

    border: none !important;

    outline: none !important;

}





.browser-content-container>div {

    position: relative !important;

    isolation: isolate !important;

    all: initial !important;

    display: block !important;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;

    font-size: 16px !important;

    line-height: 1.5 !important;

    color: var(--pure-black) !important;

    background: var(--pure-white) !important;

    padding: 1rem !important;

    min-height: 100% !important;

    box-sizing: border-box !important;

}



.browser-content-container * {

    max-width: 100% !important;

}



.browser-content-container img {

    max-width: 100% !important;

    height: auto !important;

}



.browser-view style,

.browser-content-container style {

    display: none !important;

}



.browser-content-container h1,

.browser-content-container h2,

.browser-content-container h3,

.browser-content-container h4,

.browser-content-container h5,

.browser-content-container h6 {

    margin: 1em 0 0.5em;

    color: var(--pure-black);

}



.browser-content-container p {

    margin: 0.5em 0;

    line-height: 1.6;

}



.browser-loading-bar {

    height: 100%;

    background: var(--accent);

    width: 30%;

    animation: browserLoading 1.5s ease-in-out infinite;

}



@keyframes browserLoading {

    0% {

        transform: translateX(-100%);

    }



    50% {

        transform: translateX(350%);

    }



    100% {

        transform: translateX(-100%);

    }

}



.browser-error {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    height: 100%;

    padding: 2rem;

    text-align: center;

    background: rgba(10, 14, 26, 0.8);

}



.start-signout-btn {

    height: 40px;

    padding: 0 0.875rem;

    background: var(--error-red-bg);

    border: 1px solid var(--error-red-border);

    color: var(--error-red);

    border-radius: 10px;

    font-size: 0.85rem;

    font-family: fontb;

    cursor: pointer;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    gap: 0.4rem;

    white-space: nowrap;

}



.start-signout-btn:hover {

    background: rgba(239, 68, 68, 0.25);

    border-color: rgba(239, 68, 68, 0.5);

    transform: scale(1.05);

}



.start-signout-btn i {

    font-size: 0.9rem;

}



.browser-error-icon {

    font-size: 4rem;

    color: var(--error-red);

    margin-bottom: 1.5rem;

}



.browser-error-title {

    font-size: 1.5rem;

    color: var(--text-primary);

    margin-bottom: 0.5rem;

    font-family: fontb;

}



.browser-error-message {

    color: var(--text-secondary);

    margin-bottom: 2rem;

    max-width: 500px;

}



.browser-error-btn {

    padding: 0.75rem 1.5rem;

    background: rgba(125, 211, 192, 0.15);

    border: 1px solid var(--accent);

    border-radius: 8px;

    color: var(--text-primary);

    cursor: pointer;

    transition: all 0.2s ease;

    font-size: 0.95rem;

}



.browser-error-btn:hover {

    background: rgba(125, 211, 192, 0.25);

    transform: translateY(-2px);

}



.achievements-content {

    padding: 1.5rem;

    height: 100%;

    overflow-y: auto;

}



.achievements-header {

    text-align: center;

    margin-bottom: 2rem;

    padding-bottom: 1.5rem;

    border-bottom: 2px solid var(--border);

}



.achievements-header h2 {

    color: var(--accent);

    font-size: 1.8rem;

    margin-bottom: 0.5rem;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.75rem;

}



.achievements-stats {

    display: flex;

    justify-content: center;

    gap: 2rem;

    margin-top: 1rem;

}



.achievements-stat {

    text-align: center;

}



.achievements-stat-value {

    font-size: 2rem;

    font-family: fontb;

    color: var(--accent);

}



.achievements-stat-label {

    color: var(--text-secondary);

    font-size: 0.85rem;

    margin-top: 0.25rem;

}



.achievements-section {

    margin-bottom: 2rem;

}



.achievements-section h3 {

    color: var(--text-primary);

    font-size: 1.2rem;

    margin-bottom: 1rem;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.achievements-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 1rem;

}



.achievement-card {

    background: rgba(30, 35, 48, 0.6);

    border: 2px solid var(--border);

    border-radius: 12px;

    padding: 1.25rem;

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

}



.achievement-card.unlocked {

    border-color: var(--accent);

    background: rgba(125, 211, 192, 0.1);

}



.achievement-card.locked {

    opacity: 0.6;

}



.achievement-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(125, 211, 192, 0.2);

}



.achievement-icon {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    margin: 0 auto 1rem;

    position: relative;

}



.achievement-card.unlocked .achievement-icon {

    background: linear-gradient(135deg, var(--accent), var(--accent-hover));

    color: var(--bg-primary);

    box-shadow: 0 4px 12px rgba(125, 211, 192, 0.4);

}



.achievement-card.locked .achievement-icon {

    background: rgba(255, 255, 255, 0.1);

    color: var(--text-secondary);

}



.achievement-badge {

    position: absolute;

    top: -5px;

    right: -5px;

    width: 24px;

    height: 24px;

    background: var(--accent);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.75rem;

    color: var(--bg-primary);

    font-family: fontb;

    box-shadow: 0 2px 8px rgba(125, 211, 192, 0.6);

}



.achievement-name {

    text-align: center;

    color: var(--text-primary);

    font-size: 1rem;

    font-family: fontb;

    margin-bottom: 0.5rem;

}



.achievement-card.locked .achievement-name {

    color: var(--text-secondary);

}



.achievement-description {

    text-align: center;

    color: var(--text-secondary);

    font-size: 0.85rem;

    line-height: 1.5;

    margin-bottom: 0.75rem;

}



.achievement-progress {

    width: 100%;

    height: 6px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 3px;

    overflow: hidden;

    margin-top: 0.75rem;

}



.achievement-progress-bar {

    height: 100%;

    background: var(--accent);

    border-radius: 3px;

    transition: width 0.5s ease;

}



.achievement-date {

    text-align: center;

    color: var(--accent);

    font-size: 0.75rem;

    margin-top: 0.5rem;

    font-family: fontb;

}



.achievement-card.locked .achievement-date {

    color: var(--text-secondary);

}



.easter-egg-card {

    background: rgba(30, 35, 48, 0.6);

    border: 2px solid rgba(138, 43, 226, 0.5);

    border-radius: 12px;

    padding: 1.25rem;

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

}



.easter-egg-card.unlocked {

    border-color: #8a2be2;

    background: rgba(138, 43, 226, 0.1);

}



.easter-egg-card.locked {

    opacity: 0.6;

}



.easter-egg-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(138, 43, 226, 0.3);

}



.easter-egg-icon {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    margin: 0 auto 1rem;

}



.easter-egg-card.unlocked .easter-egg-icon {

    background: linear-gradient(135deg, #8a2be2, #9b30ff);

    color: var(--pure-white);

    box-shadow: 0 4px 12px rgba(138, 43, 226, 0.4);

}



.easter-egg-card.locked .easter-egg-icon {

    background: rgba(255, 255, 255, 0.1);

    color: var(--text-secondary);

}



.illustration-achievements {

    display: flex;

    gap: 1rem;

    align-items: center;

    justify-content: center;

}



.illustration-achievement-badge {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--accent), var(--accent-hover));

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2.5rem;

    color: var(--bg-primary);

    animation: float 3s ease-in-out infinite;

    position: relative;

}



.illustration-achievement-badge::after {

    content: '';

    position: absolute;

    top: -8px;

    right: -8px;

    width: 28px;

    height: 28px;

    background: var(--accent);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

}



.illustration-achievement-badge:nth-child(2) {

    animation-delay: 0.3s;

    background: linear-gradient(135deg, #8a2be2, #9b30ff);

}



.illustration-achievement-badge:nth-child(3) {

    animation-delay: 0.6s;

    opacity: 0.5;

    background: rgba(255, 255, 255, 0.2);

}



.calculator {

    display: flex;

    flex-direction: column;

    height: 100%;

    background: rgba(10, 14, 26, 0.8);

    padding: 1.5rem;

    gap: 1rem;

}



.calculator-display {

    background: rgba(0, 0, 0, 0.5);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 1rem 1.5rem 0.8rem 1.5rem;

    text-align: right;

    color: var(--text-primary);

    font-size: 2.5rem;

    font-family: 'SUSE Mono', monospace !important;

    min-height: 80px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    word-break: break-all;

}



.calculator-history {

    font-size: 1rem;

    color: var(--text-secondary);

    min-height: 1.2rem;

    margin-bottom: 0.5rem;

}



.calculator-buttons {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 0.75rem;

    flex: 1;

}



.calculator-btn {

    background: rgba(30, 35, 48, 0.8);

    border: 1px solid var(--border);

    border-radius: 10px;

    color: var(--text-primary);

    font-size: 1.5rem;

    font-family: fontb;

    cursor: pointer;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 60px;

}



.calculator-btn:hover {

    background: rgba(125, 211, 192, 0.15);

    border-color: var(--accent);

    transform: scale(1.05);

}



.calculator-btn:active {

    transform: scale(0.95);

}



.calculator-btn.operator {

    background: rgba(125, 211, 192, 0.2);

    color: var(--accent);

}



.calculator-btn.operator:hover {

    background: rgba(125, 211, 192, 0.3);

}



.calculator-btn.equals {

    background: linear-gradient(135deg, var(--accent), var(--accent-hover));

    color: var(--bg-primary);

    grid-column: span 2;

}



.calculator-btn.equals:hover {

    transform: scale(1.02);

    box-shadow: 0 4px 12px rgba(125, 211, 192, 0.3);

}



.calculator-btn.clear {

    background: rgba(239, 68, 68, 0.2);

    color: var(--error-red);

}



.calculator-btn.clear:hover {

    background: rgba(239, 68, 68, 0.3);

}



.illustration-browser-window {

    width: 240px;

    height: 160px;

    background: rgba(21, 25, 35, 0.95);

    border: 2px solid var(--accent);

    border-radius: 12px;

    overflow: hidden;

    animation: float 3s ease-in-out infinite;

}



.illustration-browser-header {

    height: 35px;

    background: rgba(30, 35, 48, 0.8);

    border-bottom: 2px solid var(--accent);

    display: flex;

    align-items: center;

    padding: 0 0.75rem;

    gap: 0.75rem;

}



.illustration-browser-controls {

    display: flex;

    gap: 0.35rem;

}



.illustration-browser-controls::before,

.illustration-browser-controls::after {

    content: '';

    width: 8px;

    height: 8px;

    background: rgba(125, 211, 192, 0.4);

    border-radius: 50%;

}



.illustration-browser-url {

    flex: 1;

    height: 18px;

    background: rgba(125, 211, 192, 0.2);

    border: 1px solid var(--accent);

    border-radius: 4px;

}



.illustration-browser-content {

    padding: 0.75rem;

    height: calc(100% - 35px);

}



@keyframes browserPageLoad {



    0%,

    100% {

        opacity: 0.3;

    }



    50% {

        opacity: 0.7;

    }

}



.illustration-calculator {

    width: 200px;

    height: 160px;

    background: rgba(21, 25, 35, 0.95);

    border: 2px solid var(--accent);

    border-radius: 12px;

    padding: 1rem;

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    animation: float 3s ease-in-out infinite;

}



.illustration-calc-display {

    background: rgba(0, 0, 0, 0.5);

    border: 1px solid var(--accent);

    border-radius: 8px;

    padding: 0.75rem;

    text-align: right;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

}



.illustration-calc-number {

    color: var(--accent);

    font-size: 1.5rem;

    font-family: 'SEUS Mono', monospace;

    font-weight: bold;

    animation: calcNumberBlink 2s ease-in-out infinite;

}



@keyframes calcNumberBlink {



    0%,

    100% {

        opacity: 1;

    }



    50% {

        opacity: 0.5;

    }

}



.notification-center {

    position: fixed;

    top: 20px;

    right: 20px;

    width: 350px;

    padding: 0rem 0.5rem 0.1rem 0.5rem;

    max-height: 500px;

    background: rgba(21, 25, 35, 0.95);

    backdrop-filter: blur(40px) saturate(180%);

    border: 1px solid var(--border);

    border-radius: 16px;

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

    z-index: 10001;

    opacity: 0;

    pointer-events: none;

    transform: translateY(-20px);

    transition: all 0.3s ease;

    overflow: hidden;

}



.notification-center.active {

    opacity: 1;

    pointer-events: all;

    transform: translateY(0);

}



.notification-center-header {

    padding: 1.25rem 1.5rem;

    border-bottom: 1px solid var(--border);

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.notification-center-header h3 {

    color: var(--text-primary);

    font-size: 1.1rem;

    font-family: fontb;

    margin: 0;

}



.notification-center-clear {

    background: rgba(239, 68, 68, 0.15);

    border: 1px solid rgba(239, 68, 68, 0.3);

    border-radius: 8px;

    padding: 0.5rem 0.75rem;

    color: #ef4444;

    font-size: 0.85rem;

    cursor: pointer;

    transition: all 0.2s ease;

}



.notification-center-clear:hover {

    background: rgba(239, 68, 68, 0.25);

}



.notification-center-list {

    max-height: 400px;

    overflow-y: auto;

    padding: 0.5rem;

}



.notification-center-list::-webkit-scrollbar {

    width: 8px;

}



.notification-center-list::-webkit-scrollbar-track {

    background: transparent;

}



.notification-center-list::-webkit-scrollbar-thumb {

    background: rgba(255, 255, 255, 0.1);

    border-radius: 4px;

}



.notification-item {

    background: rgba(30, 35, 48, 0.6);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 1rem;

    margin-bottom: 0.5rem;

    display: flex;

    gap: 0.75rem;

    transition: all 0.2s ease;

    cursor: pointer;

}



.notification-item:hover {

    background: rgba(125, 211, 192, 0.1);

    border-color: var(--accent);

}



.notification-item-icon {

    width: 40px;

    height: 40px;

    background: rgba(125, 211, 192, 0.2);

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--accent);

    font-size: 1.1rem;

    flex-shrink: 0;

}



.notification-item-content {

    flex: 1;

    min-width: 0;

}



.notification-item-title {

    color: var(--text-primary);

    font-family: fontb;

    font-size: 0.9rem;

    margin-bottom: 0.25rem;

}



.notification-item-message {

    color: var(--text-secondary);

    font-size: 0.85rem;

    line-height: 1.4;

}



.notification-item-time {

    color: var(--text-secondary);

    font-size: 0.75rem;

    margin-top: 0.5rem;

}



.notification-center-empty {

    text-align: center;

    padding: 3rem 2rem;

}



.notification-center-empty i {

    font-size: 3rem;

    color: rgba(125, 211, 192, 0.3);

    margin-bottom: 1rem;

}



.notification-center-empty p {

    color: var(--text-secondary);

    font-size: 0.9rem;

}



.illustration-calc-buttons {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 0.5rem;

    flex: 1;

}



.illustration-calc-btn {

    background: rgba(30, 35, 48, 0.8);

    border: 1px solid var(--border);

    border-radius: 6px;

}



.illustration-calc-btn:nth-child(1) {

    animation-delay: 0s;

}



.illustration-calc-btn:nth-child(2) {

    animation-delay: 0.2s;

}



.illustration-calc-btn:nth-child(3) {

    animation-delay: 0.4s;

}



.illustration-calc-btn:nth-child(5) {

    animation-delay: 0.6s;

}



.illustration-calc-btn:nth-child(6) {

    animation-delay: 0.8s;

}



.illustration-calc-btn:nth-child(7) {

    animation-delay: 1s;

}



.illustration-calc-btn.accent {

    background: rgba(125, 211, 192, 0.2);

    border-color: var(--accent);

}



.illustration-calc-btn.accent2 {

    background: var(--accent);

}



.quick-actions {

    position: fixed;

    top: 20px;

    right: 20px;

    background: rgba(21, 25, 35, 0.95);

    backdrop-filter: blur(40px) saturate(180%);

    border: 1px solid var(--border);

    border-radius: 16px;

    padding: 1rem 1rem 0.5rem 1rem;

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

    opacity: 0;

    pointer-events: none;

    transform: scale(0.95);

    transition: all 0.2s ease;

    z-index: 999;

    width: 300px;

}



.quick-actions.active {

    opacity: 1;

    pointer-events: all;

    transform: scale(1);

}



.quick-actions-header {

    color: var(--text-primary);

    font-size: 0.9rem;

    font-family: fontb;

    margin-bottom: 1rem;

    padding-bottom: 0.75rem;

    border-bottom: 1px solid var(--border);

}



.quick-action-item {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 0.875rem;

    background: rgba(30, 35, 48, 0.6);

    border: 1px solid var(--border);

    border-radius: 10px;

    margin-bottom: 0.5rem;

    cursor: pointer;

    transition: all 0.2s ease;

}



.quick-action-item:hover {

    background: rgba(125, 211, 192, 0.15);

    border-color: var(--accent);

    transform: translateX(2px);

}



.quick-action-item i {

    width: 40px;

    height: 40px;

    background: rgba(125, 211, 192, 0.2);

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--accent);

    font-size: 1.1rem;

}



.quick-action-content {

    flex: 1;

}



.quick-action-title {

    color: var(--text-primary);

    font-size: 0.9rem;

    font-family: fontb;

    margin-bottom: 0.15rem;

}



.quick-action-desc {

    color: var(--text-secondary);

    font-size: 0.75rem;

}





.app-item[data-app="links"] .app-icon {

    background: #000;

    border: 1px solid rgba(255, 255, 255, 0.18);

}



.app-item[data-app="links"] .app-icon i {

    color: #fff;

}



.desktop-icon.links-app-icon i {

    background: #000;

    color: #fff;

    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9);

}



.links-app-window {

    display: flex;

    flex-direction: column;

    gap: 1.2rem;

    padding: 1.5rem;

    background: linear-gradient(180deg, rgba(8, 10, 16, 0.95), rgba(10, 14, 26, 0.95));

    color: var(--text-primary);

    height: 100%;

    box-sizing: border-box;

}



.links-app-hero {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding-bottom: 0.5rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.links-app-hero-icon {

    width: 64px;

    height: 64px;

    border-radius: 18px;

    background: #000;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);

}



.links-app-hero h2 {

    margin: 0;

    font-size: 1.7rem;

}



.links-app-hero-label {

    margin: 0;

    text-transform: uppercase;

    letter-spacing: 0.3em;

    font-size: 0.65rem;

    color: rgba(255, 255, 255, 0.65);

}



.links-app-section {

    background: rgba(10, 14, 26, 0.8);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 18px;

    padding: 1rem 1.2rem;

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



.links-app-section h3 {

    margin: 0;

    font-size: 1.1rem;

    color: var(--accent);

}



.links-app-section p {

    margin: 0;

    color: rgba(255, 255, 255, 0.8);

    line-height: 1.5;

}



.links-link-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 0.75rem;

}



.links-link-card {

    padding: 0.65rem 0.8rem;

    border-radius: 16px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    background: rgba(5, 7, 12, 0.85);

    color: #fff;

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: 0.75rem;

    transition: transform 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;

    min-height: 64px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);

}



.links-link-card:hover {

    border-color: var(--accent);

    transform: translateY(-2px);

    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);

}



.links-link-icon {

    width: 44px;

    height: 44px;

    border-radius: 12px;

    background: #000;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2rem;

    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);

}



.links-link-icon i {

    color: #fff;

}



.links-link-content {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 0.15rem;

    min-width: 0;

}



.links-link-label {

    font-weight: 600;

    font-size: 0.95rem;

    color: #f8fafc;

}



.links-link-url {

    font-size: 0.75rem;

    color: rgba(248, 250, 252, 0.7);

    word-break: break-all;

}



.links-link-badge {

    padding: 0.25rem 0.6rem;

    border-radius: 999px;

    background: rgba(59, 130, 246, 0.18);

    color: #7dd3fc;

    font-size: 0.7rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;

}



.popular-apps-window {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    gap: 1.25rem;

    background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(7, 11, 22, 0.95));

    padding: 1.5rem;

    border-radius: 30px;

    box-sizing: border-box;

}



.popular-apps-window header {

    display: flex;

    flex-direction: column;

    gap: 0.25rem;

}



.popular-apps-label {

    margin: 0;

    font-size: 0.78rem;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: rgba(125, 211, 192, 0.9);

}



.popular-apps-window h2 {

    margin: 0;

    font-size: 1.8rem;

    color: #f8fafc;

}



.popular-apps-subtext {

    margin: 0;

    color: rgba(241, 245, 249, 0.7);

    font-size: 0.9rem;

}



.popular-apps-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 1rem;

}



.popular-app-card {

    background: rgba(18, 21, 33, 0.8);

    padding: 0.85rem;

    border-radius: 22px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);

    cursor: pointer;

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

    align-items: center;

    justify-content: center;

    min-height: 170px;

    text-align: center;

    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;

    outline: none;

}



.popular-app-card:hover,

.popular-app-card:focus-visible {

    transform: translateY(-6px);

    border-color: rgba(59, 130, 246, 0.6);

    box-shadow: 0 26px 45px rgba(0, 0, 0, 0.55);

}



.popular-app-card-art {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    aspect-ratio: 1 / 1;

    background: rgba(255, 255, 255, 0.03);

    border-radius: 16px;

    padding: 1rem;

}



.popular-app-card-art img {

    width: min(85%, 140px);

    height: min(85%, 140px);

    object-fit: contain;

    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.3));

}



.popular-app-label {

    font-size: 0.95rem;

    font-weight: 600;

    color: #f8fafc;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}



.browser-wisp-overlay {

    position: absolute;

    inset: 0;

    background: rgba(6, 8, 16, 0.9);

    backdrop-filter: blur(20px);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 1rem;

    z-index: 20;

    transition: opacity 0.35s ease;

}



.browser-wisp-card {

    background: rgba(15, 20, 42, 0.95);

    padding: 2rem;

    border-radius: 24px;

    border: 1px solid rgba(125, 211, 192, 0.2);

    max-width: 460px;

    width: 100%;

    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);

}



.browser-wisp-card h2 {

    margin: 0 0 0.35rem 0;

    font-size: 1.6rem;

}



.browser-wisp-description {

    color: rgba(248, 250, 252, 0.7);

    margin-bottom: 1rem;

    line-height: 1.4;

    font-size: 0.95rem;

}



.browser-wisp-group {

    margin-bottom: 0.8rem;

}



.browser-wisp-group label {

    display: block;

    font-size: 0.8rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    margin-bottom: 0.25rem;

    color: rgba(125, 211, 192, 0.85);

}



.browser-wisp-select,

.browser-wisp-input {

    width: 100%;

    border-radius: 12px;

    border: 1px solid rgba(255, 255, 255, 0.15);

    padding: 0.65rem 0.85rem;

    background: rgba(6, 8, 16, 0.75);

    color: #fff;

    font-size: 0.95rem;

    font-family: 'Inter', sans-serif;

}



.browser-wisp-actions {

    display: flex;

    justify-content: flex-end;

}



.browser-wisp-btn {

    padding: 0.65rem 1.25rem;

    border-radius: 999px;

    border: none;

    background: linear-gradient(135deg, var(--accent), var(--accent-hover));

    color: #0f172a;

    font-weight: 600;

    cursor: pointer;

    transition: transform 0.2s ease;

}



.browser-wisp-btn:hover {

    transform: translateY(-1px);

}



.browser-wisp-hidden {

    opacity: 0;

    pointer-events: none;

    visibility: hidden;

}



.links-app-link-btn {

    align-self: flex-start;

    padding: 0.6rem 1rem;

    border-radius: 999px;

    border: 1px solid rgba(255, 255, 255, 0.3);

    background: rgba(255, 255, 255, 0.1);

    color: #fff;

    text-decoration: none;

    font-weight: 600;

    transition: background 0.2s ease, border 0.2s ease;

}



.links-app-link-btn:hover {

    background: rgba(255, 255, 255, 0.2);

    border-color: var(--accent);

}



.links-app-link-btn.secondary {

    border-color: rgba(144, 100, 255, 0.6);

    background: rgba(79, 70, 229, 0.15);

}



.links-app-footer p {

    font-size: 0.9rem;

}



.window.shake {

    animation: shake 0.5s ease;

}



@keyframes shake {



    0%,

    100% {

        transform: translateX(0);

    }



    10%,

    30%,

    50%,

    70%,

    90% {

        transform: translateX(-5px);

    }



    20%,

    40%,

    60%,

    80% {

        transform: translateX(5px);

    }

}



.window.bounce {

    animation: bounce-window 0.6s ease;

}



@keyframes bounce-window {



    0%,

    20%,

    50%,

    80%,

    100% {

        transform: translateY(0);

    }



    40% {

        transform: translateY(-20px);

    }



    60% {

        transform: translateY(-10px);

    }

}



.start-signout-btn {

    height: 40px;

    padding: 0 1rem;

    background: rgba(239, 68, 68, 0.15);

    border: 1px solid rgba(239, 68, 68, 0.3);

    border-radius: 10px;

    color: #ef4444;

    font-size: 0.9rem;

    font-family: fontb;

    cursor: pointer;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    white-space: nowrap;

}



.start-signout-btn:hover {

    background: rgba(239, 68, 68, 0.25);

    border-color: rgba(239, 68, 68, 0.5);

    transform: scale(1.05);

}



.photos-grid {

    flex: 1;

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

    gap: 1.5rem;

    padding: 1.5rem;

    overflow-y: auto;

}



.photo-item {

    position: relative;

    background: rgba(30, 35, 48, 0.6);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 0.75rem;

    cursor: pointer;

    transition: all 0.2s ease;

}



.photo-item:hover {

    background: rgba(125, 211, 192, 0.1);

    border-color: var(--accent);

    transform: translateY(-2px);

}



.photo-thumbnail {

    width: 100%;

    height: 150px;

    object-fit: cover;

    border-radius: 8px;

    margin-bottom: 0.5rem;

}



.photo-name {

    font-size: 0.85rem;

    color: var(--text-primary);

    text-overflow: ellipsis;

    overflow: hidden;

    white-space: nowrap;

}



.photo-delete-btn {

    position: absolute;

    top: 1rem;

    right: 1rem;

    width: 32px;

    height: 32px;

    background: rgba(239, 68, 68, 0.9);

    border: none;

    border-radius: 6px;

    color: var(--pure-white);

    cursor: pointer;

    opacity: 0;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    justify-content: center;

}



.photo-item:hover .photo-delete-btn {

    opacity: 1;

}



.photo-delete-btn:hover {

    background: var(--error-red-hover);

    transform: scale(1.1);

}



.custom-modal {

    position: fixed;

    inset: 0;

    background: var(--overlay-dark);

    backdrop-filter: blur(10px);

    z-index: 10005;

    display: none;

    align-items: center;

    font-family: font, "font" !important;

    justify-content: center;

    animation: fadeIn 0.2s ease;

}



.custom-modal.active {

    display: flex;

}



.modal-content {

    background: rgba(21, 25, 35, 0.95);

    backdrop-filter: blur(40px) saturate(180%);

    border: 1px solid var(--border);

    border-radius: 16px;

    padding: 2rem;

    max-width: 500px;

    width: 90%;

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

    animation: scaleIn 0.2s ease;

}



@keyframes scaleIn {

    from {

        transform: scale(0.9);

        opacity: 0;

    }



    to {

        transform: scale(1);

        opacity: 1;

    }

}



.modal-header {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    margin-bottom: 1.5rem;

}



.modal-icon {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

    flex-shrink: 0;

}



.modal-icon.warning {

    background: rgba(239, 68, 68, 0.2);

    color: var(--error-red);

}



.modal-icon.info {

    background: rgba(125, 211, 192, 0.2);

    color: var(--accent);

}



.modal-title {

    color: var(--text-primary);

    font-size: 1.3rem;

    font-family: fontb;

}



.modal-body {

    color: var(--text-secondary);

    line-height: 1.6;

    margin-bottom: 1.5rem;

    font-size: 0.95rem;

}



.modal-input {

    width: 100%;

    padding: 0.875rem 1rem;

    background: rgba(30, 35, 48, 0.8);

    border: 1px solid var(--border);

    border-radius: 10px;

    color: var(--text-primary);

    font-size: 0.95rem;

    margin-bottom: 1.5rem;

}



.modal-input:focus {

    outline: none;

    border-color: var(--accent);

}



.modal-buttons {

    display: flex;

    gap: 0.75rem;

    justify-content: flex-end;

}



.modal-btn {

    padding: 0.75rem 1.5rem;

    border: none;

    border-radius: 10px;

    font-size: 0.9rem;

    font-family: fontb;

    cursor: pointer;

    transition: all 0.2s ease;

}



.modal-btn-primary {

    background: linear-gradient(135deg, var(--accent), var(--accent-hover));

    color: var(--bg-primary);

}



.modal-btn-primary:hover {

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(125, 211, 192, 0.3);

}



.modal-btn-secondary {

    background: rgba(125, 211, 192, 0.15);

    border: 1px solid rgba(125, 211, 192, 0.3);

    color: var(--text-primary);

}



.modal-btn-secondary:hover {

    background: rgba(125, 211, 192, 0.25);

}



.modal-btn-danger {

    background: rgba(239, 68, 68, 0.2);

    border: 1px solid var(--error-red-border);

    color: var(--error-red);

}



.modal-btn-danger:hover {

    background: rgba(239, 68, 68, 0.3);

}



.properties-tooltip {

    position: fixed;

    background: rgba(21, 25, 35, 0.98);

    backdrop-filter: blur(40px) saturate(180%);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 1.25rem;

    min-width: 280px;

    max-width: 350px;

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

    z-index: 10003;

    display: none;

    font-family: font, "font" !important;

    animation: tooltipAppear 0.2s ease;

}



.properties-tooltip.active {

    display: block;

}



@keyframes tooltipAppear {

    from {

        opacity: 0;

        transform: scale(0.9);

    }



    to {

        opacity: 1;

        transform: scale(1);

    }

}



.properties-header {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-bottom: 1.25rem;

    padding-bottom: 1rem;

    border-bottom: 1px solid var(--border);

}



.properties-icon {

    width: 50px;

    height: 50px;

    background: rgba(125, 211, 192, 0.2);

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--accent);

    font-size: 1.5rem;

    flex-shrink: 0;

}



.properties-title {

    flex: 1;

}



.properties-name {

    color: var(--text-primary);

    font-size: 1.1rem;

    font-family: fontb;

    margin-bottom: 0.25rem;

}



.properties-type {

    color: var(--text-secondary);

    font-size: 0.8rem;

}



.properties-body {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



.properties-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0.5rem 0;

}



.properties-label {

    color: var(--text-secondary);

    font-size: 0.85rem;

}



.properties-value {

    color: var(--text-primary);

    font-weight: 500;

    font-size: 0.85rem;

    text-align: right;

}



.properties-badge {

    padding: 0.25rem 0.75rem;

    border-radius: 20px;

    font-size: 0.75rem;

    font-family: fontb;

}



.properties-badge.preinstalled {

    background: rgba(125, 211, 192, 0.2);

    color: var(--accent);

    border: 1px solid var(--accent);

}



.properties-badge.installed {

    background: rgba(59, 130, 246, 0.2);

    color: #3b82f6;

    border: 1px solid #3b82f6;

}



.properties-close {

    position: absolute;

    top: 0.75rem;

    right: 0.75rem;

    width: 28px;

    height: 28px;

    border-radius: 6px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.2s ease;

    color: var(--text-secondary);

}



.properties-close:hover {

    background: rgba(255, 255, 255, 0.08);

    color: var(--text-primary);

}



.settings-container {

    display: flex;

    height: 100%;

    background: rgba(10, 14, 26, 0.8);

}



.settings-sidebar {

    width: 200px;

    background: rgba(21, 25, 35, 0.9);

    border-right: 1px solid var(--border);

    padding: 1rem 0.5rem;

    overflow-y: auto;

}



.settings-nav-item {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.875rem 1rem;

    border-radius: 10px;

    cursor: pointer;

    transition: all 0.2s ease;

    color: var(--text-secondary);

    margin-bottom: 0.25rem;

    font-weight: 500;

}



.settings-nav-item:hover {

    background: rgba(125, 211, 192, 0.1);

    color: var(--text-primary);

}



.settings-nav-item.active {

    background: rgba(125, 211, 192, 0.2);

    color: var(--accent);

    border: 1px solid var(--accent);

    padding-left: calc(1rem - 3px);

}



.settings-nav-item i {

    font-size: 1.1rem;

    width: 20px;

    text-align: center;

}



.settings-content-area {

    flex: 1;

    overflow-y: auto;

    padding: 2rem;

}



.settings-tab-content {

    display: none;

}



.settings-tab-content.active {

    display: block;

    animation: fadeIn 0.3s ease;

}



.settings-tab-content h2 {

    color: var(--text-primary);

    font-size: 1.8rem;

    margin-bottom: 1.5rem;

    display: flex;

    align-items: center;

    gap: 0.75rem;

}



.settings-card {

    background: rgba(30, 35, 48, 0.6);

    border: 1px solid var(--border);

    border-radius: 12px;

    margin-bottom: 1.5rem;



}



.settings-card.danger {

    border-color: rgba(239, 68, 68, 0.3);

}



.settings-card-header {

    background: rgba(21, 25, 35, 0.8);

    padding: 1rem 1.25rem;

    border-bottom: 1px solid var(--border);

    border-radius: 12px 12px 0 0;

    display: flex;

    align-items: center;

    gap: 0.75rem;

    color: var(--text-primary);

    font-family: fontb;

    font-size: 1rem;

}



.settings-card.danger .settings-card-header {

    border-bottom-color: rgba(239, 68, 68, 0.3);

}



.settings-card-body {

    padding: 1.25rem;

}



.settings-item-text {

    flex: 1;

}



.settings-item-title {

    color: var(--text-primary);

    font-family: fontb;

    margin-bottom: 0.25rem;

    font-size: 0.95rem;

}



.settings-item-desc {

    color: var(--text-secondary);

    font-size: 0.85rem;

}



.settings-item-value {

    color: var(--accent);

    font-family: fontb;

    font-size: 0.95rem;

}



.settings-description {

    color: var(--text-secondary);

    line-height: 1.6;

    margin-bottom: 1rem;

    font-size: 0.9rem;

}



.settings-action-btn {

    padding: 0.75rem 1.5rem;

    background: rgba(125, 211, 192, 0.15);

    border: 1px solid rgba(125, 211, 192, 0.3);

    border-radius: 10px;

    color: var(--text-primary);

    cursor: pointer;

    transition: all 0.2s ease;

    font-size: 0.9rem;

    font-family: fontb;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

}



.settings-action-btn:hover {

    background: rgba(125, 211, 192, 0.25);

    border-color: rgba(125, 211, 192, 0.5);

    transform: translateY(-1px);

}



.settings-danger-btn {

    padding: 0.75rem 1.5rem;

    background: rgba(239, 68, 68, 0.15);

    border: 1px solid rgba(239, 68, 68, 0.3);

    border-radius: 10px;

    color: var(--error-red);

    cursor: pointer;

    transition: all 0.2s ease;

    font-size: 0.9rem;

    font-family: fontb;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

}



.settings-danger-btn:hover {

    background: rgba(239, 68, 68, 0.25);

    border-color: rgba(239, 68, 68, 0.5);

    transform: translateY(-1px);

}



.settings-empty {

    text-align: center;

    padding: 3rem 2rem;

}



.settings-empty i {

    font-size: 4rem;

    color: rgba(125, 211, 192, 0.3);

    margin-bottom: 1.5rem;

}



.settings-empty h3 {

    color: var(--text-primary);

    font-size: 1.3rem;

    margin-bottom: 0.75rem;

}



.settings-empty p {

    color: var(--text-secondary);

    margin-bottom: 1.5rem;

    font-size: 0.95rem;

}



.theme-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

    gap: 1rem;

}



.theme-card {

    background: rgba(21, 25, 35, 0.6);

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 1rem;

    text-align: center;

    transition: all 0.2s ease;

}



.theme-card:hover {

    border-color: var(--accent);

    transform: translateY(-2px);

}



.theme-preview {

    width: 100%;

    height: 80px;

    background: linear-gradient(135deg, rgba(125, 211, 192, 0.2), rgba(125, 211, 192, 0.1));

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 0.75rem;

}



.theme-preview i {

    font-size: 2rem;

    color: var(--accent);

}



.theme-name {

    color: var(--text-primary);

    font-family: fontb;

    margin-bottom: 0.75rem;

    font-size: 0.9rem;

}



.help-topics-container {

    height: 100%;

    position: relative;

    background: rgba(10, 14, 26, 0.8);

}



.help-topics-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

    gap: 1.5rem;

    padding: 2rem;

    overflow-y: auto;

    height: 100%;

}



.help-topic-card {

    background: rgba(30, 35, 48, 0.8);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 2rem 1.5rem;

    text-align: center;

    cursor: pointer;

    transition: all 0.3s ease;

    height: 180px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.help-topic-card:hover {

    background: rgba(125, 211, 192, 0.15);

    border-color: var(--accent);

    transform: translateY(-5px);

    box-shadow: 0 8px 24px rgba(125, 211, 192, 0.2);

}



.help-topic-icon {

    width: 70px;

    height: 70px;

    background: rgba(125, 211, 192, 0.2);

    border-radius: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 1rem;

}



.help-topic-icon i {

    font-size: 2rem;

    color: var(--accent);

}



.help-topic-title {

    color: var(--text-primary);

    font-size: 1.1rem;

    font-family: fontb;

    margin-bottom: 0.5rem;

}



.help-topic-preview {

    color: var(--text-secondary);

    font-size: 0.85rem;

}



.help-expanded-view {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(10, 14, 26, 0.95);

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s ease;

    display: flex;

    flex-direction: column;

}



.help-expanded-view.active {

    opacity: 1;

    pointer-events: all;

}



.help-expanded-header {

    padding: 1.5rem 2rem;

    border-bottom: 1px solid var(--border);

    background: rgba(21, 25, 35, 0.9);

}



.help-back-btn {

    padding: 0.75rem 1.5rem;

    background: rgba(125, 211, 192, 0.15);

    border: 1px solid rgba(125, 211, 192, 0.3);

    border-radius: 10px;

    color: var(--text-primary);

    cursor: pointer;

    transition: all 0.2s ease;

    font-size: 0.9rem;

    font-family: fontb;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

}



.help-back-btn:hover {

    background: rgba(125, 211, 192, 0.25);

    transform: translateX(-3px);

}



.help-expanded-content {

    flex: 1;

    overflow-y: auto;

    padding: 2rem;

}



.help-expanded-content h2 {

    color: var(--accent);

    font-size: 2rem;

    margin-bottom: 1rem;

    display: flex;

    align-items: center;

    gap: 0.75rem;

}



.help-expanded-content h3 {

    color: var(--text-primary);

    font-size: 1.3rem;

    margin-top: 2rem;

    margin-bottom: 0.75rem;

}



.help-expanded-content p {

    color: var(--text-secondary);

    line-height: 1.8;

    margin-bottom: 1rem;

    font-size: 1rem;

}



.help-expanded-content ul {

    list-style: none;

    padding-left: 0;

    margin-bottom: 1.5rem;

}



.help-expanded-content li {

    color: var(--text-secondary);

    line-height: 2;

    padding-left: 2rem;

    position: relative;

    margin-bottom: 0.5rem;

}



.help-expanded-content li::before {

    content: '➤';

    position: absolute;

    left: 0;

    color: var(--accent);

    font-size: 1.1rem;

}



.help-expanded-content strong {

    color: var(--accent);

    font-family: fontb;

}



.cloaking-container {

    display: flex;

    height: 100%;

    background: rgba(10, 14, 26, 0.8);

}



.cloaking-sidebar {

    width: 200px;

    background: rgba(21, 25, 35, 0.9);

    border-right: 1px solid var(--border);

    padding: 1rem 0.5rem;

    overflow-y: auto;

}



.cloaking-nav-item {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.875rem 1rem;

    border-radius: 10px;

    cursor: pointer;

    transition: all 0.2s ease;

    color: var(--text-secondary);

    margin-bottom: 0.25rem;

    font-weight: 500;

    font-size: 0.9rem;

}



.cloaking-nav-item:hover {

    background: rgba(125, 211, 192, 0.1);

    color: var(--text-primary);

}



.cloaking-nav-item.active {

    background: rgba(125, 211, 192, 0.2);

    color: var(--accent);

    border: 1px solid var(--accent);

    padding-left: calc(1rem - 3px);

}



.cloaking-nav-item i {

    font-size: 1rem;

    width: 18px;

    text-align: center;

}



.cloaking-content-area {

    flex: 1;

    overflow-y: auto;

    padding: 2rem;

}



.cloaking-tab {

    display: none;

}



.cloaking-tab.active {

    display: block;

    animation: fadeIn 0.3s ease;

}



.cloaking-header {

    margin-bottom: 2rem;

}



.cloaking-header h2 {

    color: var(--text-primary);

    font-size: 1.8rem;

    margin-bottom: 0.5rem;

    display: flex;

    align-items: center;

    gap: 0.75rem;

}



.cloaking-header p {

    color: var(--text-secondary);

    font-size: 1rem;

}



.cloaking-preview-card {

    background: rgba(30, 35, 48, 0.6);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 1.5rem;

    margin-bottom: 1.5rem;

}



.cloaking-preview-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1rem;

}



.cloaking-preview-label {

    color: var(--text-primary);

    font-family: fontb;

    font-size: 0.9rem;

}



.cloaking-preview-btn {

    padding: 0.5rem 1rem;

    background: rgba(125, 211, 192, 0.15);

    border: 1px solid rgba(125, 211, 192, 0.3);

    border-radius: 8px;

    color: var(--text-primary);

    cursor: pointer;

    transition: all 0.2s ease;

    font-size: 0.85rem;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.cloaking-preview-btn:hover {

    background: rgba(125, 211, 192, 0.25);

}



.cloaking-preview-tab {

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 9px 9px 0 0;

    padding: 0.75rem 1rem;

    display: flex;

    align-items: center;

    gap: 0.75rem;

    max-width: 250px;

}



.cloaking-preview-favicon {

    width: 20px;

    height: 20px;

    border-radius: 3px;

    flex-shrink: 0;

}



.cloaking-preview-title {

    color: var(--text-primary);

    font-size: 0.9rem;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.cloaking-form-card {

    background: rgba(30, 35, 48, 0.6);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 1.5rem;

    margin-bottom: 1.5rem;

}



.cloaking-form-group {

    margin-bottom: 1.5rem;

}



.cloaking-form-group:last-child {

    margin-bottom: 0;

}



.cloaking-label {

    display: block;

    color: var(--text-primary);

    font-family: fontb;

    margin-bottom: 0.75rem;

    font-size: 0.95rem;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.cloaking-input {

    width: 100%;

    padding: 0.875rem 1rem;

    background: rgba(10, 14, 26, 0.8);

    border: 1px solid var(--border);

    border-radius: 10px;

    color: var(--text-primary);

    font-size: 0.95rem;

    transition: all 0.2s ease;

}



.cloaking-input:focus {

    outline: none;

    border-color: var(--accent);

    background: rgba(10, 14, 26, 0.95);

}



.cloaking-hint {

    color: var(--text-secondary);

    font-size: 0.85rem;

    margin-top: 0.5rem;

}



.cloaking-actions {

    display: flex;

    gap: 0.75rem;

    margin-top: 1.5rem;

}



.cloaking-btn {

    padding: 0.875rem 1.5rem;

    border: none;

    border-radius: 10px;

    font-size: 0.95rem;

    font-family: fontb;

    cursor: pointer;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    justify-content: center;

}



.cloaking-btn.primary {

    background: linear-gradient(135deg, var(--accent), var(--accent-hover));

    color: var(--bg-primary);

    flex: 1;

}



.cloaking-btn.primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(125, 211, 192, 0.3);

}



.cloaking-btn.secondary {

    background: rgba(125, 211, 192, 0.15);

    border: 1px solid rgba(125, 211, 192, 0.3);

    color: var(--text-primary);

    flex: 1;

}



.cloaking-btn.secondary:hover {

    background: rgba(125, 211, 192, 0.25);

}



.cloaking-btn.warning {

    background: rgba(255, 165, 0, 0.15);

    border: 1px solid rgba(255, 165, 0, 0.3);

    color: #FFA500;

    width: 100%;

}



.cloaking-btn.warning:hover {

    background: rgba(255, 165, 0, 0.25);

    transform: translateY(-2px);

}



.cloaking-status-card {

    background: rgba(30, 35, 48, 0.6);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 1.5rem;

    margin-bottom: 1.5rem;

}



.cloaking-status-indicator {

    display: flex;

    align-items: center;

    gap: 1.5rem;

}



.cloaking-status-indicator.active .cloaking-status-icon {

    background: rgba(125, 211, 192, 0.2);

    color: var(--accent);

}



.cloaking-status-icon {

    width: 60px;

    height: 60px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.8rem;

    color: var(--text-secondary);

    flex-shrink: 0;

}



.cloaking-status-text {

    flex: 1;

}



.cloaking-status-title {

    color: var(--text-primary);

    font-family: fontb;

    font-size: 1.1rem;

    margin-bottom: 0.25rem;

}



.cloaking-status-desc {

    color: var(--text-secondary);

    font-size: 0.9rem;

}



.cloaking-slider-group {

    display: flex;

    align-items: center;

    gap: 1rem;

}



.cloaking-slider {

    flex: 1;

    height: 6px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 3px;

    outline: none;

    -webkit-appearance: none;

    cursor: pointer;

}



.cloaking-slider::-webkit-slider-thumb {

    -webkit-appearance: none;

    width: 20px;

    height: 20px;

    background: var(--accent);

    border-radius: 50%;

    cursor: pointer;

    transition: all 0.2s ease;

}



.cloaking-slider::-webkit-slider-thumb:hover {

    transform: scale(1.2);

}



.cloaking-slider::-moz-range-thumb {

    width: 20px;

    height: 20px;

    background: var(--accent);

    border-radius: 50%;

    cursor: pointer;

    border: none;

}



.cloaking-slider-value {

    color: var(--accent);

    font-family: fontb;

    font-size: 1rem;

    min-width: 50px;

    text-align: right;

}



.cloaking-rotation-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1rem;

}



.cloaking-add-btn {

    padding: 0.5rem 1rem;

    background: rgba(125, 211, 192, 0.15);

    border: 1px solid rgba(125, 211, 192, 0.3);

    border-radius: 8px;

    color: var(--text-primary);

    cursor: pointer;

    transition: all 0.2s ease;

    font-size: 0.85rem;

    font-family: fontb;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.cloaking-add-btn:hover {

    background: rgba(125, 211, 192, 0.25);

}



.cloaking-rotation-list {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    max-height: 300px;

    overflow-y: auto;

}



.cloaking-hotkey-display {

    padding: 1rem 1.5rem;

    background: rgba(10, 14, 26, 0.8);

    border: 2px dashed var(--border);

    border-radius: 10px;

    color: var(--accent);

    font-size: 1.1rem;

    font-family: fontb;

    text-align: center;

    cursor: pointer;

    transition: all 0.2s ease;

    font-family: 'Courier New', monospace;

}



.cloaking-hotkey-display:hover {

    border-color: var(--accent);

    background: rgba(125, 211, 192, 0.1);

}



.cloaking-hotkey-display.recording {

    border-color: var(--accent);

    background: rgba(125, 211, 192, 0.2);

    animation: pulse 1s infinite;

}



@keyframes pulse {



    0%,

    100% {

        opacity: 1;

    }



    50% {

        opacity: 0.7;

    }

}



.cloaking-panic-test {

    margin-top: 1.5rem;

    padding-top: 1.5rem;

    border-top: 1px solid var(--border);

}



.cloaking-presets-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

    gap: 1.5rem;

}



.cloaking-preset-card {

    background: rgba(30, 35, 48, 0.6);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 1.5rem;

    text-align: center;

    cursor: pointer;

    transition: all 0.3s ease;

}



.cloaking-preset-card:hover {

    border-color: var(--accent);

    transform: translateY(-5px);

    box-shadow: 0 8px 24px rgba(125, 211, 192, 0.2);

}



.cloaking-preset-icon {

    width: 70px;

    height: 70px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1rem;

    font-size: 2rem;

    color: white;

}



.cloaking-preset-name {

    color: var(--text-primary);

    font-family: fontb;

    font-size: 1rem;

    margin-bottom: 0.5rem;

}



.cloaking-preset-url {

    color: var(--text-secondary);

    font-size: 0.85rem;

}



.cl-checkbox {

    position: relative;

    display: inline-block;

}





.cl-checkbox>input {

    appearance: none;

    -moz-appearance: none;

    -webkit-appearance: none;

    z-index: -1;

    position: absolute;

    left: -10px;

    top: -9px;

    display: block;

    margin: 0;

    border-radius: 50%;

    width: 40px;

    height: 40px;

    background-color: rgba(0, 0, 0, 0.6);

    box-shadow: none;

    outline: none;

    opacity: 0;

    transform: scale(1);

    pointer-events: none;

    transition: opacity 0.3s, transform 0.2s;

}





.cl-checkbox>span {

    display: inline-block;

    width: 100%;

    cursor: pointer;

}





.cl-checkbox>span::before {

    content: "";

    display: inline-block;

    box-sizing: border-box;

    margin: 2px 11px 3px 1px;

    border: solid 2px;



    border-color: rgba(255, 255, 255, 0.6);

    border-radius: 2px;

    width: 18px;

    height: 18px;

    vertical-align: top;

    transition: border-color 0.2s, background-color 0.2s;

}





.cl-checkbox>span::after {

    content: "";

    display: block;

    position: absolute;

    top: 3px;

    left: 1px;

    width: 10px;

    height: 5px;

    border: solid 2px transparent;

    border-right: none;

    border-top: none;

    transform: translate(3px, 4px) rotate(-45deg);

}





.cl-checkbox>input:checked,

.cl-checkbox>input:indeterminate {

    background-color: var(--accent);

}



.cl-checkbox>input:checked+span::before,

.cl-checkbox>input:indeterminate+span::before {

    border-color: var(--accent);

    background-color: var(--accent);

}



.cl-checkbox>input:checked+span::after,

.cl-checkbox>input:indeterminate+span::after {

    border-color: #fff;

}



.cl-checkbox>input:indeterminate+span::after {

    border-left: none;

    transform: translate(4px, 3px);

}





.cl-checkbox:hover>input {

    opacity: 0.04;

}



.cl-checkbox>input:focus {

    opacity: 0.12;

}



.cl-checkbox:hover>input:focus {

    opacity: 0.16;

}





.cl-checkbox>input:active {

    opacity: 1;

    transform: scale(0);

    transition: transform 0s, opacity 0s;

}



.cl-checkbox>input:active+span::before {

    border-color: var(--border);

}



.cl-checkbox>input:checked:active+span::before {

    border-color: transparent;

    background-color: rgba(0, 0, 0, 0.6);

}





.cl-checkbox>input:disabled {

    opacity: 0;

}



.cl-checkbox>input:disabled+span {

    color: rgba(0, 0, 0, 0.38);

    cursor: initial;

}



.cl-checkbox>input:disabled+span::before {

    border-color: currentColor;

}



.cl-checkbox>input:checked:disabled+span::before,

.cl-checkbox>input:indeterminate:disabled+span::before {

    border-color: transparent;

    background-color: currentColor;

}



.cl-checkbox::selection {

    background: transparent;

}



.searchEngineI {

    height: 40px;

    width: 350px;

    margin-left: 20px;

    padding: 10px 20px;

    border-radius: 10px;

    border: none;

    background: var(--bg-primary);

    color: var(--text-primary);

    transition: 0.2s;

    font-family: font !important;

    font-size: 14px;

}



.searchEngineI:focus {

    outline: none;

    box-shadow: 0 0 0 2px var(--accent);

    background: var(--bg-secondary);

}



/* Custom Settings Dropdown */

.custom-select {

    position: relative;

    width: 100%;

    margin-top: 0.5rem;

}



.select-trigger {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0.75rem 1rem;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid var(--border);

    border-radius: 8px;

    cursor: pointer;

    transition: all 0.2s ease;

    color: var(--text-primary);

}



.select-trigger:hover {

    background: rgba(255, 255, 255, 0.05);

    border-color: var(--accent);

}



.select-options {

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    margin-top: 0.5rem;

    background: var(--bg-secondary);

    border: 1px solid var(--border);

    border-radius: 8px;

    z-index: 9999999;

    display: none;

    max-height: 200px;

    overflow-y: auto;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

}



.select-options.show {

    display: block;

    animation: fadeIn 0.15s ease;

}



.select-option {

    padding: 0.75rem 1rem;

    cursor: pointer;

    transition: background 0.2s;

    display: flex;

    align-items: center;

    gap: 0.75rem;

}



.select-option:hover {

    background: rgba(125, 211, 192, 0.1);

    color: var(--accent);

}



.select-option i {

    width: 20px;

    text-align: center;

    color: var(--text-secondary);

}



.select-option:hover i {

    color: var(--accent);

}











select {



    /* opt into customizing select */

    &,

    &::picker(select) {

        appearance: base-select;

    }



    font-size: 14px;



    /* removing open props normalize styles */

    background: none;

    padding: 0;



    /* enable transitions in the drop down */

    &::picker(select) {

        transition:

            opacity .2s ease,

            transform .2s,

            display .2s allow-discrete,

            overlay .2s allow-discrete;

    }



    &::picker-icon {

        display: none;

    }



    /* set the off stage styles */

    &:not(:open)::picker(select) {

        opacity: 0;

        transform: scale(.95);

    }



    /* set the on stage styles */

    &:open::picker(select) {

        opacity: 1;

        transform: scale(1);

    }



    /* transition the selected option changing */

    selectedcontent>* {

        transition:

            transform 1s ease,

            display 1s allow-discrete,

            opacity 1s;



        @starting-style {

            opacity: 0;

            transform: translateY(10px);

        }



        opacity: 1;

    }



    /* customize the invoking button */

    >button {

        --_text: var(--text-1);



        &:focus-visible {

            outline-offset: -3px;

        }



        &:has(selectedcontent) {

            align-items: start;

            min-inline-size: 20ch;

            flex-direction: column;

        }



        &.primary {

            --_bg: #1d1d1d;

            --_border: none;

            --_text: var(--surface-1);

            --_ink-shadow: none;

        }



        >div {

            inline-size: 100%;

            display: flex;

            justify-content: space-between;

            gap: var(--size-3);

        }



        &>small {

            color: var(--text-2);

        }



        & svg {

            inline-size: 2ch;

            transition: transform .3s var(--ease-elastic-out-2);

        }

    }



    &:open>button svg {

        transform: rotate(.5turn);

    }



    /* reset some picker styles */

    &::picker(select) {

        background: light-dark(white, var(--surface-2));

        border-radius: 15px;

        padding: 0;

        margin-block: 5px;

        box-shadow: var(--shadow-5);



        @media (forced-colors: none) {

            border: none;

        }

    }



    /* customize the picker contents */

    >div {

        min-inline-size: calc(anchor-size(self-inline) + 20px);

        scroll-behavior: smooth;



        &.scrollable {

            max-block-size: 20lh;

            scrollbar-width: thin;

        }



        & hr {

            margin-block: var(--size-2);

        }



        & label {

            display: block;

            position: sticky;

            top: 0;

            z-index: 1;

            background: var(--surface-3);

            font-size: var(--font-size-0);

            color: var(--text-2);

            font-weight: var(--font-weight-7);

            padding-block: var(--size-1);

            padding-inline: var(--size-3);

        }



        & option {

            display: flex;

            align-items: center;

            gap: var(--size-3);

            padding-block: var(--size-2);

            padding-inline: var(--size-3);

            font-size: var(--font-size-1);



            cursor: pointer;

            outline-offset: -1px;



            &::checkmark {

                font-weight: var(--font-weight-8);

            }



            &:focus-visible {

                outline-offset: -1px;

            }



            &:is(:focus, :hover) {

                background: oklch(from var(--accent-dark) l c h / 25%);

                color: inherit;

            }



            &:is(:checked) {

                background: var(--accent);

                color: var(--surface-1);

                font-weight: var(--font-weight-8);

            }

        }

    }

}



/* utilities to aid in custom select children */

.custom-option {

    display: flex;

    gap: var(--size-3);

    align-items: center;

    justify-content: space-between;



    .primary & {

        display: grid;

        gap: var(--size-1);

    }



    &:has(.description) {

        display: grid;

        justify-items: start;

        gap: var(--size-2);

        padding-block: var(--size-2);

        text-shadow: none;



        & .description {

            color: var(--text-2);

        }

    }



    option:is(:checked) & .description {

        font-weight: normal;

        color: var(--surface-2);

    }



    selectedcontent & .description {

        display: none;

    }

}



.indicator {

    display: inline-block;

    block-size: var(--size-2);

    inline-size: var(--size-2);

    border-radius: var(--radius-round);

    background: var(--gray-5);



    &.success {

        background: var(--green-5);

    }



    &.danger {

        background: var(--red-5);

    }

}



.option-text {

    flex: 2;

}



.avatar {

    border-radius: var(--radius-round);

    overflow: hidden;

}





@layer demo.support {

    body {

        display: grid;

        place-items: start;

        place-content: center;

        padding: var(--size-5);

        gap: var(--size-5);

    }

}



.offline-support {

    background: var(--bg-secondary);

    padding: 5px 7px;

    border: 1px solid var(--border);

    border-radius: 10px;

    text-align: center;

    width: 100%;

    font-size: 12px;

    position: absolute;

    margin-top: 10px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



/* ========== PYTHON INTERPRETER STYLES ========== */



.python-interpreter {

    display: flex;

    flex-direction: column;

    height: 100%;

    background: var(--bg-primary);

}



.python-toolbar {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.75rem;

    background: rgba(30, 35, 48, 0.6);

    border-bottom: 1px solid var(--border);

}



.python-editor-container {

    display: flex;

    flex: 1;

    overflow: hidden;

}



.python-editor-section {

    flex: 1;

    display: flex;

    flex-direction: column;

    border-right: 1px solid var(--border);

}



.python-output-section {

    flex: 1;

    display: flex;

    flex-direction: column;

    background: rgba(10, 14, 26, 0.8);

}



.python-section-header {

    padding: 0.75rem 1rem;

    background: rgba(30, 35, 48, 0.6);

    border-bottom: 1px solid var(--border);

    color: var(--text-primary);

    font-family: fontb;

    font-size: 0.9rem;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.python-code-editor {

    flex: 1;

    width: 100%;

    padding: 1rem;

    background: var(--bg-primary);

    color: var(--text-primary);

}



/* ========== Global Chat UI ========== */



#globalChatWindow {

  position: fixed;

  bottom: 1.5rem;

  right: 1.5rem;

  width: min(420px, 92vw);

  max-height: 80vh;

  display: none;

  flex-direction: column;

  background: rgba(6, 10, 20, 0.9);

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 1.5rem;

  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.55);

  overflow: hidden;

  opacity: 0;

  pointer-events: none;

  transform: translateY(25px);

  transition: opacity 0.35s ease, transform 0.35s ease;

  backdrop-filter: blur(22px);

  z-index: 9999;

}



#globalChatWindow.open {

  display: flex;

  opacity: 1;

  pointer-events: auto;

  transform: translateY(0);

}



.chat-header {

  padding: 1rem 1.25rem;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

  background: linear-gradient(180deg, rgba(17, 21, 34, 0.92), rgba(9, 12, 20, 0.9));

}



.chat-title {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  font-weight: 600;

  letter-spacing: 0.02em;

}



.chat-status {

  display: flex;

  align-items: center;

  gap: 0.25rem;

  font-size: 0.85rem;

  color: rgba(255, 255, 255, 0.7);

}



.chat-status .online-count {

  font-weight: 700;

  color: var(--accent);

}



.chat-actions {

  display: flex;

  gap: 0.4rem;

}



.chat-action-btn {

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid transparent;

  border-radius: 999px;

  padding: 0.4rem 0.65rem;

  color: var(--text-primary);

  font-size: 0.85rem;

  cursor: pointer;

  transition: background 0.2s ease, transform 0.2s ease;

}



.chat-action-btn i {

  font-size: 0.95rem;

}



.chat-action-btn:hover {

  background: rgba(255, 255, 255, 0.14);

}



.chat-messages {

  flex: 1;

  overflow-y: auto;

  padding: 1rem;

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 55%),

    rgba(5, 8, 16, 0.95);

  min-height: 0;

}



.chat-message {

  padding: 0.65rem 0.9rem;

  border-radius: 0.9rem;

  border: 1px solid rgba(255, 255, 255, 0.05);

  background: rgba(255, 255, 255, 0.03);

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);

  font-size: 0.9rem;

  line-height: 1.4;

}



.chat-message.system,

.chat-system-message {

  background: rgba(255, 255, 255, 0.06);

  border-color: rgba(255, 255, 255, 0.08);

  color: rgba(255, 255, 255, 0.8);

}



.chat-message.user {

  align-self: flex-end;

  background: rgba(76, 175, 255, 0.14);

  border-color: rgba(76, 175, 255, 0.35);

}



.chat-message-header {

  display: flex;

  justify-content: space-between;

  font-size: 0.75rem;

  color: rgba(255, 255, 255, 0.6);

  margin-bottom: 0.4rem;

}



.chat-input-area {

  display: flex;

  align-items: stretch;

  gap: 0;

  padding: 0;

  background: rgba(255, 255, 255, 0.02);

  border-top: 1px solid rgba(255, 255, 255, 0.06);

}



.chat-input-wrapper {

  position: relative;

  flex: 1;

  min-width: 0;

}



.mention-suggestions {

  position: absolute;

  left: 0;

  right: 0;

  bottom: calc(100% + 8px);

  display: none;

  flex-direction: column;

  gap: 4px;

  background: rgba(15, 23, 42, 0.95);

  border: 1px solid rgba(125, 211, 192, 0.35);

  border-radius: 12px;

  padding: 6px 0;

  max-height: 220px;

  overflow-y: auto;

  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.75);

  z-index: 40;

  backdrop-filter: blur(8px);

}



.mention-suggestions.visible {

  display: flex;

}



.mention-suggestion-item {

  padding: 8px 12px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 8px;

  font-size: 0.9rem;

  color: rgba(248, 250, 252, 0.9);

  cursor: pointer;

  border-radius: 8px;

  transition: background 0.2s ease;

}



.mention-suggestion-item.active,

.mention-suggestion-item:hover {

  background: rgba(125, 211, 192, 0.15);

}



.mention-suggestion-meta {

  font-size: 0.7rem;

  color: rgba(255, 255, 255, 0.6);

  text-transform: capitalize;

}



.chat-input {

  flex: 1;

  padding: 0.85rem 1.1rem;

  border-radius: 0;

  border: none;

  background: rgba(255, 255, 255, 0.03);

  color: #fff;

  font-size: 0.95rem;

  outline: none;

  transition: border 0.2s ease, background 0.2s ease;

  width: 100%;

}



.chat-input::placeholder {

  color: rgba(255, 255, 255, 0.55);

}



.chat-input:focus {

  border-color: rgba(76, 175, 255, 0.7);

  background: rgba(255, 255, 255, 0.08);

}



.chat-send-btn {

  border: none;

  border-radius: 0;

  padding: 0.85rem 1rem;

  background: linear-gradient(135deg, rgba(87, 158, 255, 0.9), rgba(66, 121, 255, 1));

  color: #fff;

  font-weight: 600;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 12px 24px rgba(43, 63, 132, 0.5);

  cursor: pointer;

  transition: transform 0.2s ease;

  min-width: 70px;

}



.chat-send-btn:hover {

  transform: translateY(-1px);

}



.chat-users {

  padding: 0.85rem 1rem 1rem;

  background: rgba(7, 10, 20, 0.9);

  border-top: 1px solid rgba(255, 255, 255, 0.05);

}



.chat-users-header {

  display: flex;

  align-items: center;

  gap: 0.35rem;

  font-weight: 600;

  font-size: 0.85rem;

  color: rgba(255, 255, 255, 0.75);

  margin-bottom: 0.5rem;

}



.chat-users-list {

  display: flex;

  flex-direction: column;

  gap: 0.35rem;

  max-height: 120px;

  overflow-y: auto;

  padding-right: 0.2rem;

}



.chat-user {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0.45rem 0.75rem;

  border-radius: 0.85rem;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.05);

  font-size: 0.85rem;

  color: rgba(255, 255, 255, 0.88);

}



.chat-user i {

  font-size: 0.6rem;

}



.chat-user-status {

  margin-left: 0.5rem;

  color: rgba(255, 255, 255, 0.65);

  font-size: 0.75rem;

}



.python-output {

    flex: 1;

    padding: 1rem;

    overflow-y: auto;

    font-family: "SUSE Mono", monospace;

    font-size: 0.9rem;

    line-height: 1.6;

}



.python-output-line {

    color: var(--text-primary);

    margin-bottom: 0.25rem;

    white-space: pre-wrap;

    word-wrap: break-word;

}



/* Nautilus AI Illustration */

.illustration-nautilus-ai {

    width: 260px;

    height: 160px;

    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

    border: 2px solid var(--accent);

    border-radius: 12px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

}



.illustration-nautilus-ai-header {

    height: 35px;

    background: rgba(15, 23, 42, 0.9);

    border-bottom: 1px solid rgba(125, 211, 192, 0.3);

    display: flex;

    align-items: center;

    padding: 0 0.75rem;

    gap: 0.5rem;

}



.illustration-nautilus-ai-icon {

    font-size: 14px;

    color: var(--accent);

}



.illustration-nautilus-ai-title {

    font-size: 10px;

    color: var(--accent);

    font-family: fontb;

}



.illustration-nautilus-ai-content {

    flex: 1;

    padding: 0.75rem;

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.illustration-nautilus-ai-msg-ai {

    background: rgba(125, 211, 192, 0.1);

    border: 1px solid rgba(125, 211, 192, 0.3);

    border-radius: 8px 8px 8px 0;

    padding: 6px;

    width: 80%;

    align-self: flex-start;

}



.illustration-nautilus-ai-line {

    height: 4px;

    background: rgba(125, 211, 192, 0.4);

    border-radius: 2px;

    margin-bottom: 3px;

}



.illustration-nautilus-ai-msg-user {

    background: rgba(30, 41, 59, 0.8);

    border: 1px solid rgba(148, 163, 184, 0.3);

    border-radius: 8px 8px 0 8px;

    padding: 6px;

    width: 70%;

    align-self: flex-end;

}



/* AI Snake Illustration */

.illustration-ai-snake {

    width: 260px;

    height: 160px;

    background: rgba(10, 14, 26, 0.9);

    border: 2px solid var(--accent);

    border-radius: 12px;

    padding: 0.75rem;

    display: flex;

    gap: 0.75rem;

}



.illustration-ai-snake-stats {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 0.4rem;

    justify-content: center;

}



.illustration-ai-snake-stat {

    height: 20px;

    background: rgba(30, 35, 48, 0.6);

    border: 1px solid var(--accent);

    border-radius: 4px;

    display: flex;

    align-items: center;

    padding: 0 4px;

    gap: 4px;

}



.illustration-ai-snake-stat-icon {

    width: 8px;

    height: 8px;

    background: var(--accent);

    border-radius: 50%;

}



.illustration-ai-snake-stat-line {

    height: 4px;

    background: rgba(125, 211, 192, 0.3);

    border-radius: 2px;

    flex: 1;

}



.illustration-ai-snake-board {

    width: 100px;

    height: 100px;

    border: 1px solid var(--accent);

    border-radius: 6px;

    background: rgba(0, 0, 0, 0.5);

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 1px;

    align-self: center;

    padding: 2px;

}



.illustration-ai-snake-cell {

    background: rgba(255, 255, 255, 0.05);

    border-radius: 1px;

    width: 100%;

    height: 100%;

}



.illustration-ai-snake-cell.snake {

    background: var(--accent);

}



/* Desktop Selection Box */

.selection-box {

    position: fixed;

    border: 1px solid var(--accent);

    background: rgba(125, 211, 192, 0.2);

    display: none;

    z-index: 999;

    pointer-events: none;

}

/* Start Menu Full Mode */

.start-menu.full-mode {

    bottom: 55px; /* Just above taskbar */

    left: 10px;

    transform: none !important;

    transform-origin: bottom left;

    -webkit-transform: none !important;

}



.start-menu.full-mode.active {

    animation: menuSlideInFull 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);

}



@keyframes menuSlideInFull {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* System Tray Full Mode Adjustment */

.system-tray.full-mode {

   /* Push to the right in flex-start container */

   margin-left: auto; 

   padding-right: 1rem;

}



/* Desktop Offset for Full Taskbar */

#desktop.full-taskbar-offset {

    bottom: 48px; /* Height of full taskbar */

}



/* Adjust Full Taskbar Layout */

.taskbar.full {

    padding-left: 0.5rem;

    padding-right: 0.5rem;

}



/* About window tweaks */

.about-app-container {

    -webkit-overflow-scrolling: touch;

}

.about-app-container::-webkit-scrollbar {

    width: 10px;

    height: 10px;

}

.about-app-container::-webkit-scrollbar-thumb {

    background: rgba(255,255,255,0.06);

    border-radius: 6px;

    border: 1px solid rgba(255,255,255,0.02);

}

.about-app-container details summary {

    list-style: none;

}

.about-app-container details summary::-webkit-details-marker { display:none; }



/* Prevent scroll chaining on the outer About container so it handles top/bottom scrolling */

.about-app-container {

    overscroll-behavior: contain;

    /* ensure footer (which uses margin-top:auto) is reachable at the bottom */

    display: flex;

    flex-direction: column;

}



/* Ensure dev-info panels can scroll internally but allow scroll chaining to outer container */

.dev-info {

    overflow: hidden;

}

.dev-info > div {

        overflow: auto;

        max-height: 40vh;

        overscroll-behavior: auto;

}



/* make footer a normal block inside the about container */

.about-footer {

    position: relative;

    z-index: 1;

}



/* Nebulo V5 refresh */

body {

    background: radial-gradient(circle at top, rgba(59, 130, 246, 0.16), transparent 45%),

        radial-gradient(circle at 20% 80%, rgba(236, 72, 153, 0.18), transparent 50%),

        linear-gradient(180deg, #03060f, #070c1c 65%, #01030a);

    color: #f8fbff;

    font-family: 'Inter', 'SUSE Mono', sans-serif;

}



#desktop {

    background: linear-gradient(130deg, rgba(5, 8, 18, 0.9), rgba(3, 5, 12, 0.98));

    padding: clamp(1rem, 3vw, 2.5rem) clamp(1.5rem, 3.5vw, 3rem);

    display: flex;

    flex-direction: column;

    gap: 0.8rem;

}



#desktop::before {

    background: radial-gradient(circle at 25% 20%, rgba(125, 211, 192, 0.3), transparent 50%),

        radial-gradient(circle at 70% 0%, rgba(58, 123, 213, 0.25), transparent 55%);

    opacity: 0.7;

}



#desktop::after {

    background-image: repeating-linear-gradient(

        135deg,

        rgba(255, 255, 255, 0.04) 0,

        rgba(255, 255, 255, 0.04) 1px,

        transparent 1px,

        transparent 10px

    );

    opacity: 0.2;

}



.wallpaper {

    background: radial-gradient(circle at 50% 10%, rgba(5, 89, 128, 0.35), transparent 35%),

        radial-gradient(circle at 80% 90%, rgba(236, 72, 153, 0.35), transparent 40%),

        linear-gradient(195deg, rgba(9, 17, 32, 0.9), rgba(2, 4, 9, 0.96));

    z-index: 0;

    opacity: 1;

}



.wallpaper-grid {

    text-align: center;

    gap: 0.4rem;

    padding-top: 2.2rem;

}



.desktop-hero-pill {

    display: flex;

    flex-direction: column;

    gap: 0.55rem;

    margin-top: 0.9rem;

}



.desktop-hero-pill span {

    background: rgba(255, 255, 255, 0.07);

    padding: 0.35rem 1.1rem;

    border-radius: 999px;

    font-size: 0.78rem;

    letter-spacing: 0.12rem;

    color: rgba(248, 251, 255, 0.85);

    border: 1px solid rgba(125, 211, 192, 0.25);

}