:root {
  --glass-hl: rgba(255, 255, 255, 0.8);
  --glass-sh: rgba(0, 0, 0, 0.16);
  --glass-inner: rgba(255, 255, 255, 0.08);
  --glass-edge: rgba(0, 0, 0, 0.18);
  --glass-bg: rgba(12, 12, 18, 0.62);
  --glass-bg-strong: rgba(12, 12, 18, 0.78);
  --glass-border: rgba(255, 255, 255, 0.08);
  --accent: #5b8def;
  --accent-soft: rgba(91, 141, 239, 0.12);
  --text-1: rgba(255, 255, 255, 0.93);
  --text-2: rgba(255, 255, 255, 0.58);
  --text-3: rgba(255, 255, 255, 0.32);
}

/* === GLOBAL BACKGROUND === */
html {
  background: url('/images/custom/background.png') center/cover no-repeat fixed !important;
  background-color: #080810 !important;
  min-height: 100vh !important;
}

body {
  background: rgba(8, 8, 14, 0.42) !important;
  color: var(--text-1) !important;
  min-height: 100vh !important;
}

/* === LIQUID GLASS PANELS (pidanai style) === */
#layout-sidebar {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
  border-right: 1px solid var(--glass-border) !important;
  box-shadow:
    inset 1px -1px 0.75px -1px rgba(255,255,255,0.38),
    inset -1px 1px 0.75px -1px rgba(255,255,255,0.30),
    inset 0 0 1px rgba(0,0,0,0.15),
    0 18px 54px rgba(0,0,0,0.18) !important;
}

#layout-sidebar::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), transparent 34%, transparent 78%),
    linear-gradient(315deg, rgba(0,0,0,0.05), transparent 44%) !important;
  opacity: 0.46 !important;
  pointer-events: none !important;
}

#layout-list {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.16) !important;
  backdrop-filter: blur(18px) saturate(1.16) !important;
  border-right: 1px solid var(--glass-border) !important;
  box-shadow:
    inset 1px -1px 0.75px -1px rgba(255,255,255,0.32),
    inset -1px 1px 0.75px -1px rgba(255,255,255,0.24),
    inset 0 0 1px rgba(0,0,0,0.12),
    0 14px 46px rgba(0,0,0,0.14) !important;
}

#layout-list::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), transparent 30%, transparent 76%),
    linear-gradient(315deg, rgba(0,0,0,0.04), transparent 40%) !important;
  opacity: 0.42 !important;
  pointer-events: none !important;
}

#layout-content {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
  border-left: 1px solid var(--glass-border) !important;
  box-shadow:
    inset 1px -1px 0.75px -1px rgba(255,255,255,0.34),
    inset -1px 1px 0.75px -1px rgba(255,255,255,0.28),
    inset 0 0 1px rgba(0,0,0,0.14),
    0 18px 54px rgba(0,0,0,0.18) !important;
}

#layout-content::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.16), transparent 32%, transparent 78%),
    linear-gradient(315deg, rgba(0,0,0,0.05), transparent 42%) !important;
  opacity: 0.44 !important;
  pointer-events: none !important;
}

/* Content inside panels above the ::before */
#layout-sidebar > *, #layout-list > *, #layout-content > * {
  position: relative !important;
  z-index: 2 !important;
}

/* === HEADERS & FOOTERS === */
#layout > div > .header {
  background: rgba(12, 12, 18, 0.72) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.12) !important;
  backdrop-filter: blur(12px) saturate(1.12) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  color: var(--text-1) !important;
}

#layout > div > .footer {
  background: rgba(12, 12, 18, 0.55) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  border-top: 1px solid var(--glass-border) !important;
  color: var(--text-2) !important;
}

.scroller { background: transparent !important; }

/* === LOGIN PAGE === */
.task-login #logo { display: none !important; }

.task-login body, .task-login #layout-content {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
}

.task-login #layout-content::before { display: none !important; }

#login-form {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: rgba(18, 18, 28, 0.52) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.24) !important;
  backdrop-filter: blur(18px) saturate(1.24) !important;
  border: 0 !important;
  border-radius: 24px !important;
  padding: 40px 36px !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  box-shadow:
    inset 1px -1px 0.75px -1px rgba(255,255,255,0.42),
    inset -1px 1px 0.75px -1px rgba(255,255,255,0.34),
    inset 0 0 1px rgba(0,0,0,0.18),
    0 24px 72px rgba(0,0,0,0.32) !important;
  animation: glassIn 600ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#login-form::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), transparent 28%, transparent 72%, rgba(0,0,0,0.06)),
    linear-gradient(315deg, rgba(0,0,0,0.05), transparent 38%) !important;
  opacity: 0.48 !important;
  pointer-events: none !important;
}

#login-form::after {
  content: "" !important;
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 24px !important;
  background: url('/images/custom/bypass.lat.png') center/contain no-repeat !important;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25)) !important;
  position: relative !important;
  z-index: 2 !important;
}

#login-form > * { position: relative !important; z-index: 2 !important; }

#login-form h1, #login-form .boxtitle { color: var(--text-1) !important; font-weight: 600 !important; text-align: center !important; }
#login-form .hint, #login-form .login-hint { color: var(--text-3) !important; text-align: center !important; }

/* Inputs - pidanai style with inset light edges */
#login-form input[type="text"],
#login-form input[type="password"],
#login-form input[type="email"] {
  border: 0 !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.058) !important;
  color: var(--text-1) !important;
  padding: 11px 14px !important;
  outline: none !important;
  box-shadow:
    inset 1px -1px 0.75px -1px var(--glass-hl),
    inset -1px 1px 0.75px -1px var(--glass-hl),
    inset 0 0 1px rgba(0,0,0,0.28) !important;
  -webkit-backdrop-filter: blur(1.2px) !important;
  backdrop-filter: blur(1.2px) !important;
}

#login-form input[type="text"]:focus,
#login-form input[type="password"]:focus {
  background: rgba(255,255,255,0.09) !important;
  box-shadow:
    inset 1px -1px 0.75px -1px var(--glass-hl),
    inset -1px 1px 0.75px -1px var(--glass-hl),
    inset 0 0 1px rgba(0,0,0,0.28),
    0 0 0 2px rgba(91,141,239,0.15) !important;
}

#login-form input::placeholder { color: var(--text-3) !important; }
#login-form label, #login-form .form-label { color: var(--text-2) !important; font-weight: 500 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }

/* Submit button - pidanai pill style */
#login-form button[type="submit"],
#login-form .mainaction {
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 900 !important;
  min-height: 48px !important;
  padding: 0 20px !important;
  box-shadow:
    inset 1px -1px 0.75px -1px rgba(255,255,255,0.38),
    inset -1px 1px 0.75px -1px rgba(255,255,255,0.28),
    0 10px 28px rgba(91,141,239,0.16) !important;
  transition: transform 180ms ease, box-shadow 180ms ease !important;
}

#login-form button[type="submit"]:hover,
#login-form .mainaction:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    inset 1px -1px 0.75px -1px rgba(255,255,255,0.42),
    inset -1px 1px 0.75px -1px rgba(255,255,255,0.32),
    0 14px 38px rgba(91,141,239,0.24) !important;
}

/* === TEXT COLORS === */
#layout-sidebar *, #layout-list *, #layout-content * { color: var(--text-1) !important; }
.date, .messagelist .date, .listing .date, .records-table .date,
.pagenav .count, .hint, .login-hint,
#layout > div > .footer * { color: var(--text-3) !important; }
.subject, .header-subject, .boxtitle { color: var(--text-1) !important; font-weight: 600 !important; }

/* === FOLDER LIST === */
#mailboxlist li a, .folderlist li a, .treelist li a {
  border-radius: 14px !important; margin: 2px 6px !important; padding: 6px 10px !important;
  color: var(--text-2) !important; transition: background 180ms ease, color 180ms ease !important;
}
#mailboxlist li a:hover, .treelist li a:hover { background: rgba(255,255,255,0.06) !important; color: var(--text-1) !important; }
#mailboxlist li.selected > a, .treelist li.selected > a { background: var(--accent-soft) !important; color: var(--accent) !important; font-weight: 600 !important; }

/* === MAIL LIST === */
.listing tbody td, .listing li, .listing td, .records-table td, .records-table tr { color: var(--text-2) !important; border-bottom-color: rgba(255,255,255,0.04) !important; }
.listing tbody tr:hover td, .listing li:hover, .records-table tr:hover td { background-color: rgba(255,255,255,0.04) !important; color: var(--text-1) !important; }
.listing thead th, .records-table thead th { color: var(--text-3) !important; background-color: rgba(255,255,255,0.03) !important; border-bottom-color: var(--glass-border) !important; }
.listing tbody tr.selected td, .listing li.selected, .records-table tr.selected td { background-color: var(--accent-soft) !important; color: var(--text-1) !important; }
.unread .subject, .listing li.unread a { font-weight: 600 !important; color: var(--text-1) !important; }

/* === INPUTS - pidanai style === */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], input[type="tel"],
input[type="url"], textarea, select {
  border: 0 !important; border-radius: 16px !important;
  background: rgba(255,255,255,0.058) !important; color: var(--text-1) !important;
  outline: none !important;
  box-shadow:
    inset 1px -1px 0.75px -1px var(--glass-hl),
    inset -1px 1px 0.75px -1px var(--glass-hl),
    inset 0 0 1px rgba(0,0,0,0.28) !important;
  -webkit-backdrop-filter: blur(1.2px) !important;
  backdrop-filter: blur(1.2px) !important;
}

input:focus, textarea:focus, select:focus {
  background: rgba(255,255,255,0.09) !important;
  box-shadow:
    inset 1px -1px 0.75px -1px var(--glass-hl),
    inset -1px 1px 0.75px -1px var(--glass-hl),
    inset 0 0 1px rgba(0,0,0,0.28),
    0 0 0 2px rgba(91,141,239,0.12) !important;
}

input::placeholder, textarea::placeholder { color: var(--text-3) !important; }

/* === BUTTONS - pidanai pill style === */
.btn, .button, a.button {
  border: 0 !important; border-radius: 16px !important;
  background: rgba(255,255,255,0.06) !important; color: var(--text-2) !important;
  box-shadow:
    inset 1px -1px 0.75px -1px rgba(255,255,255,0.32),
    inset -1px 1px 0.75px -1px rgba(255,255,255,0.22),
    inset 0 0 1px rgba(0,0,0,0.12) !important;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease !important;
}

.btn:hover, .button:hover, a.button:hover { background: rgba(255,255,255,0.1) !important; color: var(--text-1) !important; transform: translateY(-1px) !important; }

.btn-primary, .button.mainaction {
  background: var(--accent) !important; color: #fff !important; font-weight: 900 !important;
  box-shadow:
    inset 1px -1px 0.75px -1px rgba(255,255,255,0.38),
    inset -1px 1px 0.75px -1px rgba(255,255,255,0.28),
    0 10px 28px rgba(91,141,239,0.18) !important;
}

/* === TOOLBAR === */
.toolbar a.button, .toolbar button { background-color: transparent !important; color: var(--text-2) !important; border: none !important; }
.toolbar a.button:hover, .toolbar button:hover { background-color: rgba(255,255,255,0.06) !important; color: var(--text-1) !important; }

/* === POPUPS - liquid glass === */
.popup, .ui-dialog, .popupmenu {
  position: relative !important; overflow: hidden !important; isolation: isolate !important;
  background: rgba(18,18,28,0.72) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.22) !important;
  backdrop-filter: blur(18px) saturate(1.22) !important;
  border: 0 !important; border-radius: 24px !important;
  box-shadow:
    inset 1px -1px 0.75px -1px rgba(255,255,255,0.38),
    inset -1px 1px 0.75px -1px rgba(255,255,255,0.30),
    inset 0 0 1px rgba(0,0,0,0.16),
    0 24px 72px rgba(0,0,0,0.32) !important;
  color: var(--text-1) !important;
  animation: glassIn 250ms cubic-bezier(0.34,1.56,0.64,1) !important;
}

.popup::before, .ui-dialog::before {
  content: "" !important; position: absolute !important; inset: 1px !important; z-index: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), transparent 28%, transparent 72%, rgba(0,0,0,0.06)),
    linear-gradient(315deg, rgba(0,0,0,0.05), transparent 38%) !important;
  opacity: 0.46 !important; pointer-events: none !important;
}

.popup > *, .ui-dialog > * { position: relative !important; z-index: 2 !important; }
.ui-dialog .ui-dialog-titlebar { background: rgba(255,255,255,0.03) !important; border-bottom: 1px solid var(--glass-border) !important; }

/* === MENUS === */
.menu, .toolbarmenu {
  background: rgba(18,18,28,0.82) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
  border: 1px solid var(--glass-border) !important; border-radius: 16px !important;
  box-shadow:
    inset 1px -1px 0.75px -1px rgba(255,255,255,0.28),
    inset -1px 1px 0.75px -1px rgba(255,255,255,0.22),
    0 18px 54px rgba(0,0,0,0.28) !important;
}
.menu a, .toolbarmenu a { color: var(--text-2) !important; transition: background 180ms ease !important; }
.menu a:hover, .toolbarmenu a:hover { background-color: var(--accent-soft) !important; color: var(--text-1) !important; }

/* === TASK MENU === */
#taskmenu, .taskmenu { background: transparent !important; }
#taskmenu a, .taskmenu a { color: var(--text-2) !important; transition: color 500ms ease, background 180ms ease !important; }
#taskmenu a:hover, .taskmenu a:hover { color: var(--text-1) !important; background-color: rgba(255,255,255,0.06) !important; }
#taskmenu a.selected, .taskmenu a.selected { color: var(--accent) !important; background-color: var(--accent-soft) !important; }

/* === MISC === */
#message-header, .messageheader { background-color: rgba(255,255,255,0.03) !important; border-bottom: 1px solid var(--glass-border) !important; }
#message-content, .message-part, .message-htmlpart { background: transparent !important; color: var(--text-1) !important; }
.settings, #settings-sections, .formcontent { background-color: transparent !important; }
table.propform td.title { color: var(--text-2) !important; }
.attachmentslist li { background-color: rgba(255,255,255,0.04) !important; border: 1px solid var(--glass-border) !important; border-radius: 16px !important; color: var(--text-2) !important; }

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }
::selection { background: rgba(91,141,239,0.22); color: white; }

/* === ANIMATIONS === */
@keyframes glassIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

#layout-sidebar { animation: slideInLeft 350ms cubic-bezier(0,0,0.2,1) both !important; }
#layout-list { animation: glassIn 300ms cubic-bezier(0,0,0.2,1) both !important; animation-delay: 50ms !important; }
#layout-content { animation: slideInRight 350ms cubic-bezier(0,0,0.2,1) both !important; animation-delay: 100ms !important; }

/* Watermark page */
.watermark { background: transparent !important; }

/* Responsive */
@media (max-width: 768px) {
  #login-form { margin: 12px; padding: 24px 20px; }
}