:root { --accent: #e05a7a; --accent-2: #c0392b; --accent-glow: rgba(224, 90, 122, 0.12); --bg-primary: #0d0d0f; --bg-secondary: #171419; --bg-tertiary: #1b161e; --bg-input: #1d161f; --bg-hover: #2a2a3a; --bg-active: #2f2f42; --border: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.12); --text-primary: #f0f0f5; --text-secondary: rgba(240,240,245,0.6); --text-muted: rgba(240,240,245,0.35); --anti-text-primary: #0f0f0f; --msg-user-bg: #2b4a72; --msg-user-border: rgba(80,140,220,0.3); --msg-bot-bg: #1e2030; --msg-bot-border: rgba(255,255,255,0.06); --shadow-sm: 0 2px 8px rgba(0,0,0,0.3); --shadow-md: 0 4px 20px rgba(0,0,0,0.4); --shadow-lg: 0 8px 40px rgba(0,0,0,0.5); --shadow-accent: 0 4px 20px rgba(224,90,122,0.2); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 32px; --pattern-opacity: 0.12; } [data-theme="light"] { --bg-primary: #f0f0f5; --bg-secondary: #e8e8f0; --bg-tertiary: #dddde8; --bg-card: #ffffff; --bg-input: #ebebf5; --bg-hover: #e0e0ee; --bg-active: #d5d5e8; --border: rgba(0,0,0,0.08); --border-strong: rgba(0,0,0,0.14); --text-primary: #1a1a2e; --text-secondary: rgba(26,26,46,0.6); --text-muted: rgba(26,26,46,0.35); --msg-user-bg: #d0e4ff; --msg-user-border: rgba(80,140,220,0.25); --msg-bot-bg: #ffffff; --msg-bot-border: rgba(0,0,0,0.08); --shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --shadow-md: 0 4px 20px rgba(0,0,0,0.1); --shadow-lg: 0 8px 40px rgba(0,0,0,0.12); --shadow-accent: 0 4px 20px rgba(224,90,122,0.15); --pattern-opacity: 0.08; } *, *::before, *::after { box-sizing: border-box; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } li { list-style-type: none; margin: 0; padding: 0; } ul { margin: 0; padding: 0; } body, html { margin: 0; padding: 0; background-color: var(--bg-primary); font-family: 'Montserrat Alternates', 'Segoe UI', sans-serif; width: 100vw; height: 100vh; display: flex; justify-content: center; overflow: hidden; position: relative; overscroll-behavior: none; } .app { width: 100%; height: 100%; z-index: 100; background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.4)), url("./images/bg.png"); background-size: cover; background-repeat: no-repeat; background-position: center; } .app-wrapper { height: 97%; display: flex; justify-content: center; align-items: center; } .main-window { width: 400px; height: 600px; background: linear-gradient(-30deg, var(--bg-secondary) 25%, var(--bg-tertiary) 100%);; color:var(--text-primary); border-radius: 48px; display: flex; flex-direction: column; box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.3); } .title-window{ padding: 15px; font-size: 24pt; text-align: center; height: 15%; } .window-info{ width: 100%; height: 88%; border-radius: 0 0 48px 48px; background: linear-gradient(30deg, var(--accent-glow) 2px, transparent 2px), linear-gradient(150deg, var(--accent-glow) 2px, transparent 2px); background-size: 40px 70px; color: var(--text-primary); } .window-info h1 { margin: 0; padding: 0 30px 0 30px; font-size: 32pt; font-weight: 400; line-height: 40px; } .window-info p { font-size: 16pt; margin: 0; padding: 7px 30px 24px 30px; font-weight: 400; } .window-info input { background: var(--bg-secondary); border: 2px solid var(--text-primary); width: 90%; display: flex; justify-self: center; height: 15%; font-size: 24pt; text-align: center; color: var(--text-primary); border-radius: 24px; transition: ease-in 200ms; } .window-info input:focus { border: 3px solid var(--text-primary);; background-color: var(--bg-input); outline: none; transition: ease-in 200ms; } .footer { padding-left: 15px; height: 3%; color: #fff; display: flex; justify-content: space-between; align-items: center; backdrop-filter: blur(5px); width: 100%; } .title{ font-size: 24pt; text-align: center; } .subtitle { font-size: 16pt; text-align: left; } .page-settings{ width: 10%; display: flex; justify-content: space-around; } .buttons{ padding-top: 15px; display: flex; justify-content: center; height: 15%; gap: 10px } .buttons button { width: 175px; height: 100%; border-radius: 12px; font-size: 16pt; color: var(--text-primary); } button.primary { color: var(--bg-secondary); border: none; } button.secondary { background-color: var(--bg-secondary); border: 2px solid var(--text-muted); }