:root{
--bg: #0a0f1c;
--fg: #f1f5f9;
--muted: #94a3b8;
--accent: #3b82f6;
--accent-hover: #2563eb;
--overlay-bg: rgba(10, 15, 28, 0.95);
--panel-bg: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
--panel-border: rgba(71, 85, 105, 0.3);
--btn-bg: rgba(30, 41, 59, 0.8);
--btn-bg-hover: rgba(51, 65, 85, 0.9);
--btn-border: rgba(71, 85, 105, 0.4);
--ring: 0 0 0 3px rgba(59, 130, 246, 0.4);
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
/* Fullscreen overlay */
.app-overlay{
position: fixed;
inset: 0;
display: none;
place-items: center;
background: var(--overlay-bg);
backdrop-filter: blur(12px);
z-index: 2147483647;
animation: overlay-fade-in 0.3s ease-out;
}
.app-overlay.open{ display: grid; }
@keyframes overlay-fade-in {
from {
opacity: 0;
backdrop-filter: blur(0px);
}
to {
opacity: 1;
backdrop-filter: blur(12px);
}
}
/* Dialog panel with modern glassmorphism effect */
.app-dialog{
width: min(95vw, 900px);
height: min(90vh, 700px);
background: var(--panel-bg);
border: 1px solid var(--panel-border);
border-radius: 1rem;
display: grid;
grid-template-rows: auto 1fr auto;
overflow: hidden;
color: var(--fg);
font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial;
box-shadow: var(--shadow-xl);
backdrop-filter: blur(20px);
animation: dialog-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes dialog-slide-in {
from {
opacity: 0;
transform: scale(0.9) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Header with gradient and better spacing */
.app-dialog__header{
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.5rem;
background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.8) 100%);
border-bottom: 1px solid var(--panel-border);
backdrop-filter: blur(10px);
}
.app-dialog__title{
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -0.025em;
background: linear-gradient(135deg, var(--fg), var(--muted));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.app-dialog__close{
border: 1px solid var(--btn-border);
background: var(--btn-bg);
color: var(--fg);
border-radius: 0.75rem;
padding: 0.5rem 0.75rem;
cursor: pointer;
font-weight: 600;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
box-shadow: var(--shadow-sm);
}
.app-dialog__close:hover{
background: var(--btn-bg-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.app-dialog__close:focus-visible{
outline: none;
box-shadow: var(--ring);
transform: translateY(-1px);
}
/* Body content with better scrolling */
.app-dialog__body{
padding: 1.5rem;
overflow: auto;
background: rgba(15, 23, 42, 0.3);
scrollbar-width: thin;
scrollbar-color: var(--muted) transparent;
}
.app-dialog__body::-webkit-scrollbar {
width: 6px;
}
.app-dialog__body::-webkit-scrollbar-track {
background: transparent;
}
.app-dialog__body::-webkit-scrollbar-thumb {
background: var(--muted);
border-radius: 3px;
}
.app-dialog__body::-webkit-scrollbar-thumb:hover {
background: var(--fg);
}
.app-slide{
display: none;
}
.app-slide.is-active{
display: block;
animation: app-fade 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Footer with modern button styling */
.app-dialog__footer{
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.5rem;
background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.8) 100%);
border-top: 1px solid var(--panel-border);
backdrop-filter: blur(10px);
}
.app-navbtn{
border: 1px solid var(--btn-border);
background: var(--btn-bg);
color: var(--fg);
border-radius: 0.75rem;
padding: 0.75rem 1.25rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
box-shadow: var(--shadow-sm);
font-size: 0.9rem;
}
.app-navbtn:hover{
background: var(--btn-bg-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.app-navbtn:focus-visible{
outline: none;
box-shadow: var(--ring);
transform: translateY(-1px);
}
.app-navbtn:active {
transform: translateY(0);
box-shadow: var(--shadow-sm);
}
.app-index{
color: var(--muted);
font-size: 0.95rem;
font-weight: 500;
padding: 0.5rem 1rem;
background: rgba(30, 41, 59, 0.5);
border-radius: 0.5rem;
border: 1px solid var(--panel-border);
}
@keyframes app-fade{
from {
opacity: 0;
transform: translateY(8px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Mobile responsive improvements */
@media (max-width: 768px) {
.app-dialog {
width: 100vw;
height: 100vh;
border-radius: 0;
animation: dialog-slide-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes dialog-slide-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
}
@media (max-width: 640px) {
.app-dialog__header,
.app-dialog__footer {
padding: 1rem;
}
.app-dialog__body {
padding: 1rem;
}
.app-dialog__title {
font-size: 1rem;
}
.app-navbtn {
padding: 0.625rem 1rem;
font-size: 0.85rem;
}
.app-index {
font-size: 0.875rem;
padding: 0.375rem 0.75rem;
}
}
@media (max-width: 480px) {
.app-dialog__header,
.app-dialog__footer {
padding: 0.875rem;
}
.app-dialog__body {
padding: 0.875rem;
}
.app-navbtn {
padding: 0.5rem 0.875rem;
font-size: 0.8rem;
}
.app-dialog__close {
padding: 0.375rem 0.625rem;
font-size: 0.875rem;
}
}