/* ===================== Mint-Y base theme ===================== */
:root {
  --accent: #92b372;         /* Mint-Y green */
  --accent-strong: #8fa876;
  --accent-hi: #9ab87c;
  --sel-text: #ffffff;

  --panel-bg: rgba(28, 28, 28, 0.985);
  --panel-fg: #dadada;
  --panel-h: 40px;

  --win-bg: #f5f5f5;
  --win-fg: #303030;
  --win-fg-dim: #7a7a7a;
  --titlebar-bg: linear-gradient(#e8e8e8, #dcdcdc);
  --titlebar-solid: #e0e0e0;
  --titlebar-fg: #333333;
  --titlebar-unfocused-bg: #ececec;
  --titlebar-unfocused-fg: #9a9a9a;
  --win-border: #c7c7c7;
  --content-bg: #ffffff;
  --sidebar-bg: #ededed;
  --input-bg: #ffffff;
  --input-border: #cfcfcf;
  --hover-bg: rgba(0,0,0,0.06);
  --press-bg: rgba(0,0,0,0.12);
  --menu-bg: #f7f7f7;
  --menu-fg: #333;
  --menu-border: #cccccc;
  --btn-bg: linear-gradient(#fdfdfd, #f0f0f0);
  --btn-border: #c4c4c4;
  --radius: 8px;
  --shadow-focus: 0 10px 34px rgba(0,0,0,0.42), 0 2px 8px rgba(0,0,0,0.24);
  --shadow-blur: 0 6px 20px rgba(0,0,0,0.26);
  --font: "Ubuntu", "Noto Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Ubuntu Mono", "Menlo", "DejaVu Sans Mono", "Consolas", monospace;
}

.theme-dark {
  --win-bg: #383838;
  --win-fg: #e6e6e6;
  --win-fg-dim: #9a9a9a;
  --titlebar-bg: linear-gradient(#3e3e3e, #333333);
  --titlebar-solid: #383838;
  --titlebar-fg: #dedede;
  --titlebar-unfocused-bg: #2f2f2f;
  --titlebar-unfocused-fg: #808080;
  --win-border: #1f1f1f;
  --content-bg: #2f2f2f;
  --sidebar-bg: #333333;
  --input-bg: #262626;
  --input-border: #1c1c1c;
  --hover-bg: rgba(255,255,255,0.08);
  --press-bg: rgba(255,255,255,0.15);
  --menu-bg: #333333;
  --menu-fg: #e2e2e2;
  --menu-border: #222222;
  --btn-bg: linear-gradient(#454545, #3a3a3a);
  --btn-border: #262626;
}

.accent-green  { --accent:#92b372; --accent-strong:#8fa876; --accent-hi:#9ab87c; }
.accent-aqua   { --accent:#6cabcd; --accent-strong:#5b9bbd; --accent-hi:#7db8d8; }
.accent-blue   { --accent:#5a8ec9; --accent-strong:#4d7fb8; --accent-hi:#6d9dd3; }
.accent-orange { --accent:#d39a63; --accent-strong:#c68a51; --accent-hi:#dba672; }
.accent-pink   { --accent:#c76ba0; --accent-strong:#b85c92; --accent-hi:#d07cab; }
.accent-purple { --accent:#8c6ec9; --accent-strong:#7d5fba; --accent-hi:#9a7ed3; }
.accent-red    { --accent:#c15b58; --accent-strong:#b34c49; --accent-hi:#cb6b68; }
.accent-sand   { --accent:#bfa878; --accent-strong:#b09968; --accent-hi:#cab488; }
.accent-teal   { --accent:#579c8e; --accent-strong:#488d7f; --accent-hi:#67aa9c; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: var(--font);
  font-size: 13px;
  background: #000;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
button { font-family: var(--font); cursor: default; }
input, textarea { font-family: var(--font); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.45); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,0.7); background-clip: content-box; border: 2px solid transparent; }

/* ===================== Boot screen ===================== */
#boot-screen {
  position: fixed; inset: 0; z-index: 10000;
  background: #000; display: flex; align-items: center; justify-content: center;
}
.boot-center { text-align: center; }
.boot-logo { width: 96px; height: 96px; opacity: 0.95; }
.boot-dots { margin-top: 34px; display: flex; gap: 10px; justify-content: center; }
.boot-dots span {
  width: 9px; height: 9px; border-radius: 50%; background: #4c4c4c;
  animation: bootdot 1.2s infinite;
}
.boot-dots span:nth-child(2) { animation-delay: 0.15s; }
.boot-dots span:nth-child(3) { animation-delay: 0.3s; }
.boot-dots span:nth-child(4) { animation-delay: 0.45s; }
@keyframes bootdot { 0%,100% { background:#3a3a3a; } 40% { background:#87cf3e; } }
#boot-log {
  position: absolute; left: 24px; bottom: 20px; right: 24px;
  font-family: var(--mono); font-size: 12px; color: #7f8b7a; line-height: 1.5;
  opacity: 0.85; white-space: pre-wrap;
}
#boot-log .ok { color: #87cf3e; }

/* ===================== Login screen ===================== */
#login-screen { position: fixed; inset: 0; z-index: 9000; overflow: hidden; }
.login-backdrop {
  position: absolute; inset: -30px;
  background: url("../assets/wallpapers/virginia.svg") center/cover;
  filter: blur(14px) brightness(0.62);
}
.login-clock { position: absolute; top: 7%; left: 0; right: 0; text-align: center; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
.login-time { font-size: 64px; font-weight: 300; letter-spacing: 1px; }
.login-date { font-size: 17px; opacity: 0.85; margin-top: 4px; }
.login-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -44%);
  width: 340px; padding: 30px 34px 22px;
  background: rgba(20, 24, 21, 0.72); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 14px;
  text-align: center; color: #eee;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: loginIn 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes loginIn { from { opacity: 0; transform: translate(-50%, -40%) scale(0.96); } }
.login-avatar {
  width: 88px; height: 88px; margin: 0 auto 14px; border-radius: 50%;
  background: linear-gradient(135deg, #92b372, #5d8a4a);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.25);
}
.login-user { font-size: 19px; font-weight: 500; margin-bottom: 16px; }
.login-pw-row { display: flex; gap: 8px; }
.login-pw-row input {
  flex: 1; padding: 9px 12px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.35); color: #fff; font-size: 13px; outline: none;
}
.login-pw-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(146,179,114,0.35); }
.login-go {
  width: 38px; border-radius: 7px; border: none; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.login-go:hover { background: var(--accent-hi); }
.login-go:active { background: var(--accent-strong); }
.login-hint { margin-top: 10px; font-size: 11px; color: rgba(255,255,255,0.45); }
.login-card.shake { animation: shake 0.4s; }
@keyframes shake { 0%,100%{transform:translate(-50%,-44%)} 20%{transform:translate(calc(-50% - 10px),-44%)} 40%{transform:translate(calc(-50% + 10px),-44%)} 60%{transform:translate(calc(-50% - 6px),-44%)} 80%{transform:translate(calc(-50% + 6px),-44%)} }
.login-session { margin-top: 16px; font-size: 11.5px; color: rgba(255,255,255,0.55); display:flex; align-items:center; justify-content:center; gap:6px; }
.login-footer {
  position: absolute; left: 0; right: 0; bottom: 0; height: 52px; padding: 0 20px;
  display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.8);
  background: rgba(0,0,0,0.35); font-size: 13px;
}
.login-footer em { font-style: italic; opacity: 0.7; }
.login-footer-logo { width: 22px; height: 22px; }
.login-footer-right { margin-left: auto; }
.login-footer-right button {
  background: none; border: none; color: rgba(255,255,255,0.75); padding: 8px; border-radius: 6px;
}
.login-footer-right button:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* ===================== Desktop root ===================== */
#desktop-root { position: fixed; inset: 0; }
#wallpaper {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: background-image 0.001s, opacity 0.35s;
}
#desktop-area { position: absolute; inset: 0; bottom: var(--panel-h); }
#window-layer { position: absolute; inset: 0; bottom: var(--panel-h); pointer-events: none; }
#window-layer > * { pointer-events: auto; }

/* Desktop icons */
#desktop-icons { position: absolute; inset: 0; }
.desk-icon {
  position: absolute; width: 88px; padding: 8px 4px 6px; border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center; color: #fff;
}
.desk-icon .di-img { width: 52px; height: 52px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45)); pointer-events: none; }
.desk-icon .di-label {
  font-size: 12px; line-height: 1.25; text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.5);
  word-break: break-word; max-height: 32px; overflow: hidden; padding: 1px 4px; border-radius: 4px;
  pointer-events: none;
}
.desk-icon:hover { background: rgba(255,255,255,0.12); }
.desk-icon.selected { background: rgba(146,179,114,0.42); outline: 1px solid rgba(146,179,114,0.85); }
.desk-icon.dragging { opacity: 0.7; }
#rubber-band {
  position: absolute; display: none; z-index: 5;
  background: rgba(146,179,114,0.18); border: 1px solid rgba(146,179,114,0.8);
}

/* ===================== Snap preview ===================== */
#snap-preview {
  position: absolute; z-index: 4999; display: none; pointer-events: none;
  background: rgba(146,179,114,0.22); border: 2px solid rgba(146,179,114,0.75);
  border-radius: 6px; transition: all 0.14s ease-out;
}

/* ===================== Notifications ===================== */
#notification-stack {
  position: fixed; top: 12px; right: 12px; z-index: 8500;
  display: flex; flex-direction: column; gap: 10px; width: 350px; pointer-events: none;
}
.notification {
  pointer-events: auto;
  background: rgba(38, 38, 38, 0.97); color: #e8e8e8;
  border: 1px solid rgba(255,255,255,0.09); border-radius: 9px;
  padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  transform: translateX(380px); opacity: 0;
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.3s;
}
.notification.show { transform: translateX(0); opacity: 1; }
.notification.hide { transform: translateX(380px); opacity: 0; }
.notif-icon { width: 32px; height: 32px; flex-shrink: 0; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.notif-text { font-size: 12px; color: #b9b9b9; line-height: 1.4; }
.notif-close { background: none; border: none; color: #999; font-size: 15px; padding: 0 2px; border-radius: 4px; line-height: 1; }
.notif-close:hover { color: #fff; background: rgba(255,255,255,0.12); }

/* ===================== OSD ===================== */
#osd {
  position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%);
  z-index: 8600; display: none; align-items: center; gap: 14px;
  background: rgba(30,30,30,0.94); color: #eee; border-radius: 12px;
  padding: 16px 22px; min-width: 280px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
#osd.visible { display: flex; animation: osdIn 0.15s ease-out; }
@keyframes osdIn { from { opacity: 0; transform: translateX(-50%) scale(0.94); } }
.osd-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.18); border-radius: 3px; overflow: hidden; }
#osd-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.1s; }
#osd-val { font-size: 13px; width: 38px; text-align: right; color: #ccc; }

#ws-osd {
  position: fixed; left: 50%; top: 44%; transform: translate(-50%,-50%);
  z-index: 8600; display: none; gap: 12px; padding: 18px 22px;
  background: rgba(30,30,30,0.92); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
#ws-osd.visible { display: flex; }
.ws-box { width: 92px; height: 56px; border-radius: 6px; border: 2px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); position: relative; }
.ws-box.current { border-color: var(--accent); background: rgba(146,179,114,0.2); }
.ws-box .ws-num { position: absolute; inset: 0; display:flex; align-items:center; justify-content:center; color: rgba(255,255,255,0.6); font-size: 15px; }

/* ===================== Tooltip ===================== */
#tooltip {
  position: fixed; z-index: 9500; display: none; pointer-events: none;
  background: rgba(35,35,35,0.97); color: #e5e5e5; font-size: 11.5px;
  padding: 4px 9px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 3px 12px rgba(0,0,0,0.4); white-space: nowrap;
}

/* ===================== Context menu ===================== */
#context-menu { position: fixed; z-index: 9000; display: none; }
.ctx-menu {
  min-width: 210px; padding: 5px 0;
  background: var(--menu-bg); color: var(--menu-fg);
  border: 1px solid var(--menu-border); border-radius: 7px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.32);
  animation: ctxIn 0.1s ease-out;
}
@keyframes ctxIn { from { opacity: 0; transform: scale(0.97); } }
.ctx-item {
  display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 12px;
  font-size: 13px; position: relative; white-space: nowrap;
}
.ctx-item .ci-ico { width: 16px; height: 16px; display:flex; align-items:center; justify-content:center; opacity: 0.85; flex-shrink: 0; }
.ctx-item:hover { background: var(--accent); color: var(--sel-text); }
.ctx-item:hover .ci-ico { opacity: 1; }
.ctx-item.disabled { opacity: 0.45; pointer-events: none; }
.ctx-item .ci-accel { margin-left: auto; opacity: 0.55; font-size: 11.5px; padding-left: 22px; }
.ctx-sep { height: 1px; margin: 4px 8px; background: var(--menu-border); }
.ctx-sub-arrow { margin-left: auto; opacity: 0.6; padding-left: 18px; }
.ctx-submenu { position: absolute; left: 100%; top: -6px; display: none; }
.ctx-item:hover > .ctx-submenu { display: block; }

/* ===================== Dialogs ===================== */
#dialog-layer { position: fixed; inset: 0; z-index: 8000; display: none; }
#dialog-layer.visible { display: block; }
.dialog-modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.25); }
.mint-dialog {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  min-width: 380px; max-width: 520px;
  background: var(--win-bg); color: var(--win-fg);
  border: 1px solid var(--win-border); border-radius: var(--radius);
  box-shadow: var(--shadow-focus); overflow: hidden;
  animation: dlgIn 0.16s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes dlgIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.94); } }
.mint-dialog .dlg-title {
  padding: 8px 14px; background: var(--titlebar-bg); color: var(--titlebar-fg);
  font-weight: 600; font-size: 13px; text-align: center;
  border-bottom: 1px solid var(--win-border);
}
.mint-dialog .dlg-body { padding: 20px 22px; display: flex; gap: 16px; align-items: flex-start; font-size: 13px; line-height: 1.5; }
.mint-dialog .dlg-body .dlg-ico { flex-shrink: 0; }
.mint-dialog .dlg-input { width: 100%; margin-top: 10px; padding: 6px 9px; border: 1px solid var(--input-border); border-radius: 5px; background: var(--input-bg); color: var(--win-fg); outline: none; font-size: 13px; }
.mint-dialog .dlg-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(146,179,114,0.3); }
.mint-dialog .dlg-buttons { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--win-border); background: color-mix(in srgb, var(--win-bg) 92%, #000 4%); }
.mint-btn {
  padding: 6px 18px; border-radius: 5px; border: 1px solid var(--btn-border);
  background: var(--btn-bg); color: var(--win-fg); font-size: 13px;
}
.mint-btn:hover { filter: brightness(1.04); }
.mint-btn:active { filter: brightness(0.94); }
.mint-btn.suggested { background: linear-gradient(var(--accent-hi), var(--accent)); border-color: var(--accent-strong); color: #fff; }
.mint-btn.destructive { background: linear-gradient(#e07a72, #ca564e); border-color: #b34a43; color: #fff; }

/* ===================== Lock screen ===================== */
#lock-screen {
  position: fixed; inset: 0; z-index: 9600; color: #fff;
  background: rgba(6, 10, 8, 0.96);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: none;
}
.lock-time { font-size: 96px; font-weight: 200; letter-spacing: 2px; }
.lock-date { font-size: 20px; opacity: 0.7; margin-top: 6px; }
.lock-hint { position: absolute; bottom: 60px; font-size: 13px; opacity: 0; transition: opacity 0.6s; }
#lock-screen.hinting .lock-hint { opacity: 0.55; }

/* ===================== Shutdown screen ===================== */
#off-screen { position: fixed; inset: 0; z-index: 10001; background: #000; display: flex; align-items: center; justify-content: center; }
.off-inner { text-align: center; color: #bbb; }
.off-inner img { width: 72px; opacity: 0.9; }
.off-text { margin-top: 22px; font-size: 15px; }
#off-reboot { margin-top: 26px; padding: 8px 22px; border-radius: 6px; border: 1px solid #3a3a3a; background: #1c1c1c; color: #ddd; font-size: 13px; }
#off-reboot:hover { background: #2a2a2a; border-color: #87cf3e; color: #fff; }

/* Screen fades */
.fade-out { animation: fadeOut 0.4s forwards; }
@keyframes fadeOut { to { opacity: 0; } }
.fade-in { animation: fadeIn 0.4s; }
@keyframes fadeIn { from { opacity: 0; } }

/* ===================== Icon sizing (SVGs fill their fixed containers) ===================== */
.pl-ico svg, .wl-ico svg, .ci-ico svg, .ns-ico svg, .mc-ico svg, .ma-ico svg,
.at-ico svg, .di-img svg, .fi-img svg, .st-ico svg, .sm-ico svg, .fq-ico svg,
.notif-icon svg, .dlg-ico svg, .vol-ico svg, .win-title-icon svg,
#osd-icon svg, #vol-popup-icon svg, #battery-popup-icon span svg, .mm-fav svg {
  width: 100%; height: 100%; display: block;
}
.tb-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.mm-search > svg { width: 13px; height: 13px; flex-shrink: 0; }
.settings-back svg { width: 13px; height: 13px; }
.fr-ico { display: inline-block; }
.fr-ico svg { width: 100%; height: 100%; }

/* cursor helpers */
.cur-move { cursor: move !important; }
.cur-text { cursor: text; }
.cur-pointer { cursor: pointer; }