/* =========================================
   LIFEOS GLOBAL DESIGN SYSTEM
========================================= */

:root {

--bg:#07080c;
--bg-soft:#0d1018;

--card:#111522;

--glass:
rgba(255,255,255,0.05);

--glass-hover:
rgba(255,255,255,0.09);

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

--gold:#d4af37;

--gold-light:#f5d76e;

--green:#7dd87d;

--blue:#5ca9ff;

--red:#ff6b6b;

--purple:#b388ff;

--text:#f4f7ff;

--muted:#9ca3af;

--shadow:
0 20px 60px rgba(0,0,0,.5);

--radius:22px;

}


* {

box-sizing:border-box;

margin:0;

padding:0;

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

}



html {

scroll-behavior:smooth;

}



body {

background:

radial-gradient(
circle at top right,
#182033,
transparent 35%
),

var(--bg);


color:var(--text);

min-height:100vh;

overflow-x:hidden;

}



/* =========================================
LOADING SCREEN
========================================= */


#loadingScreen {

position:fixed;

inset:0;

background:#050507;

display:flex;

justify-content:center;

align-items:center;

z-index:9999;

}



.loadingCard {

text-align:center;

}



.loadingLogo {

width:90px;

height:90px;

border-radius:30px;

background:
linear-gradient(
135deg,
var(--gold),
#8b6914
);


display:flex;

align-items:center;

justify-content:center;

font-size:40px;

color:black;

margin:auto;

}



.loadingCard h1 {

font-size:42px;

margin-top:20px;

}



.loadingCard p {

color:var(--muted);

margin-top:10px;

}



.loaderBar {

width:250px;

height:8px;

background:#222;

border-radius:20px;

margin-top:25px;

overflow:hidden;

}



.loaderProgress {

height:100%;

width:70%;

background:var(--gold);

animation:
load 2s infinite;

}


@keyframes load {

0% {

transform:translateX(-100%);

}


100% {

transform:translateX(150%);

}

}



/* =========================================
APP LAYOUT
========================================= */


#app {

display:flex;

min-height:100vh;

}



/* =========================================
SIDEBAR
========================================= */


.sidebar {

width:290px;

background:

rgba(10,12,18,.85);


backdrop-filter:
blur(20px);


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


padding:25px;


position:fixed;

height:100vh;

overflow-y:auto;

}



.logo {

display:flex;

align-items:center;

gap:15px;

margin-bottom:30px;

}



.logoIcon {

width:50px;

height:50px;

border-radius:16px;

background:var(--gold);

display:flex;

align-items:center;

justify-content:center;

color:black;

font-size:22px;

}



.logo h2 {

font-size:22px;

}



.logo span {

font-size:12px;

color:var(--muted);

}




.search {

background:var(--glass);

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

padding:12px 15px;

border-radius:15px;

display:flex;

gap:10px;

align-items:center;

margin-bottom:25px;

}



.search input {

background:none;

border:none;

outline:none;

color:white;

width:100%;

}



nav {

display:flex;

flex-direction:column;

gap:8px;

}



.navButton {

background:none;

border:none;

color:var(--muted);

padding:14px;

border-radius:14px;

display:flex;

align-items:center;

gap:15px;

font-size:15px;

cursor:pointer;

transition:.3s;

}



.navButton i {

width:20px;

}



.navButton:hover,
.navButton.active {


background:

linear-gradient(
90deg,
rgba(212,175,55,.2),
transparent
);


color:white;

}



.sidebarFooter {

margin-top:40px;

}



.levelCard {

background:var(--glass);

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

padding:20px;

border-radius:20px;

}



.levelCard h3 {

color:var(--gold);

}



.xpBar {

height:8px;

background:#222;

border-radius:20px;

margin:15px 0;

overflow:hidden;

}



.xpFill {

height:100%;

width:73%;

background:

linear-gradient(
90deg,
gold,
orange
);

}



/* =========================================
MAIN
========================================= */


.main {

margin-left:290px;

width:calc(100% - 290px);

padding:30px;

}



.topBar {

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}



.topBar h1 {

font-size:38px;

}



.topBar span {

color:var(--gold);

}



.topBar p {

color:var(--muted);

margin-top:8px;

}



.topButtons {

display:flex;

gap:12px;

}



.topButtons button,
button {


background:var(--glass);

border:

1px solid var(--border);

color:white;

padding:12px 18px;

border-radius:14px;

cursor:pointer;

transition:.3s;

}



button:hover {

background:var(--glass-hover);

transform:translateY(-2px);

}



.primaryButton {

background:var(--gold)!important;

color:black!important;

font-weight:700;

}


/* =========================================
CARDS
========================================= */


.hero,
.statsGrid,
.overview,
.goalGrid,
.habitGrid,
.financeOverview,
.analyticsGrid,
.readingStats,
.fitnessStats {


display:grid;

gap:20px;

}



.hero {

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

}



.heroCard,
.statCard,
.panel,
.goalCard,
.habitCard,
.financePanel,
.chartCard,
.readingStat,
.bookCard,
.movieCard,
.workoutCard,
.settingCard {


background:

linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
);


border:

1px solid var(--border);


border-radius:

var(--radius);


padding:25px;


box-shadow:

var(--shadow);


backdrop-filter:

blur(20px);


}



.cardTitle {

display:flex;

justify-content:space-between;

margin-bottom:20px;

}



.cardTitle i {

color:var(--gold);

}



.hero ul {

list-style:none;

}



.hero li {

padding:12px 0;

color:var(--muted);

}



.circleProgress {

width:130px;

height:130px;

margin:20px auto;

border-radius:50%;


background:

conic-gradient(
var(--gold) 82%,
#222 0
);


display:flex;

align-items:center;

justify-content:center;

}



.circleInner {

width:100px;

height:100px;

border-radius:50%;

background:var(--card);

display:flex;

align-items:center;

justify-content:center;

font-size:25px;

font-weight:800;

}
/* =========================================
   STATS GRID
========================================= */


.statsGrid {

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

margin-top:25px;

}



.statCard {

text-align:center;

}



.statCard i {

font-size:25px;

color:var(--gold);

margin-bottom:15px;

}



.statCard h1 {

font-size:32px;

margin:10px 0;

}



.statCard p {

color:var(--muted);

font-size:14px;

}





/* =========================================
   OVERVIEW SECTION
========================================= */


.overview {

grid-template-columns:
2fr 1fr 1fr;

margin-top:25px;

}



.panelHeader {

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}



.panelHeader h2 {

font-size:20px;

}



.event {

display:flex;

gap:20px;

padding:15px 0;

border-bottom:

1px solid var(--border);

}



.event h4 {

color:var(--gold);

}



.event p {

color:var(--muted);

}



.panel blockquote {

font-size:22px;

line-height:1.5;

color:white;

}



.achievement {

background:

rgba(212,175,55,.1);

border:

1px solid rgba(212,175,55,.3);

padding:14px;

border-radius:15px;

margin-bottom:12px;

}





/* =========================================
   PAGE SECTIONS
========================================= */


.pageSection {

margin-top:50px;

}



.sectionHeader {

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}



.sectionHeader h2 {

font-size:32px;

}



.sectionHeader p {

color:var(--muted);

margin-top:8px;

}



.sectionButtons {

display:flex;

gap:10px;

}





/* =========================================
   KANBAN TASKS
========================================= */


.kanbanBoard {

display:grid;

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

gap:20px;

}



.kanbanColumn {

background:

rgba(255,255,255,.03);

border:

1px solid var(--border);

border-radius:20px;

padding:20px;

}



.kanbanColumn h3 {

display:flex;

justify-content:space-between;

margin-bottom:20px;

}



.kanbanColumn h3 span {

background:

rgba(255,255,255,.1);

padding:4px 10px;

border-radius:20px;

font-size:12px;

}



.taskCard {

background:

var(--card);

border:

1px solid var(--border);

padding:18px;

border-radius:18px;

margin-bottom:15px;

transition:.3s;

}



.taskCard:hover {

transform:translateY(-5px);

}



.taskCard h4 {

margin-bottom:8px;

}



.taskCard p {

color:var(--muted);

font-size:14px;

}



.taskFooter {

display:flex;

justify-content:space-between;

margin-top:15px;

font-size:12px;

}



.taskCard.high {

border-left:

4px solid var(--red);

}



.taskCard.medium {

border-left:

4px solid var(--gold);

}



.taskCard.working {

border-left:

4px solid var(--blue);

}



.taskCard.completed {

opacity:.7;

}



.progressBar {

height:7px;

background:#222;

border-radius:20px;

margin-top:15px;

overflow:hidden;

}



.progressBar div {

height:100%;

background:var(--blue);

}





/* =========================================
   CALENDAR
========================================= */


.calendar {

background:

var(--card);

border:

1px solid var(--border);

border-radius:25px;

padding:25px;

}



.calendarHeader {

display:grid;

grid-template-columns:

repeat(7,1fr);

text-align:center;

color:var(--muted);

margin-bottom:15px;

}



.calendarGrid {

display:grid;

grid-template-columns:

repeat(7,1fr);

gap:12px;

}



.day {

height:80px;

background:

rgba(255,255,255,.04);

border-radius:15px;

display:flex;

align-items:center;

justify-content:center;

position:relative;

cursor:pointer;

transition:.3s;

}



.day:hover {

background:

rgba(212,175,55,.15);

}



.day.active {

background:

var(--gold);

color:black;

font-weight:bold;

}



.eventDot {

width:8px;

height:8px;

background:red;

border-radius:50%;

position:absolute;

bottom:10px;

}





/* =========================================
   GOALS
========================================= */


.goalGrid {

grid-template-columns:

repeat(4,1fr);

}



.goalCard h3 {

margin-bottom:25px;

}



.goalProgress {

height:10px;

background:#222;

border-radius:20px;

overflow:hidden;

}



.goalProgress div {

height:100%;

background:

linear-gradient(
90deg,
var(--gold),
orange
);

}



.goalCard p {

color:var(--muted);

margin-top:15px;

}





/* =========================================
   HABITS
========================================= */


.habitGrid {

grid-template-columns:

repeat(4,1fr);

}



.habitCard {

text-align:center;

}



.habitCard h1 {

font-size:42px;

color:var(--gold);

margin:15px;

}



.habitCard p {

color:var(--muted);

}





/* =========================================
   HABIT HEATMAP
========================================= */


.heatmap {

background:

var(--card);

padding:25px;

border-radius:20px;

margin-top:25px;

}



.heatRow {

display:flex;

gap:8px;

flex-wrap:wrap;

}



.heat {

width:28px;

height:28px;

border-radius:7px;

background:#222;

}



.heat.low {

background:#3b3b20;

}



.heat.medium {

background:#907c28;

}



.heat.high {

background:var(--gold);

}





/* =========================================
   PRODUCTIVITY INSIGHTS
========================================= */


.insightGrid {

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:20px;

}



.insightCard {

background:

var(--card);

border:

1px solid var(--border);

padding:25px;

border-radius:20px;

}



.insightCard i {

font-size:30px;

color:var(--gold);

margin-bottom:15px;

}



.insightCard p {

color:var(--muted);

margin-top:10px;

}
/* =========================================
   NOTES WORKSPACE
========================================= */


.notesLayout {

display:grid;

grid-template-columns:
220px 280px 1fr;

gap:20px;

min-height:650px;

}



.notesSidebar {

background:

var(--card);

border:

1px solid var(--border);

border-radius:22px;

padding:20px;

}



.noteFolder {

display:flex;

align-items:center;

gap:12px;

padding:14px;

border-radius:14px;

color:var(--muted);

cursor:pointer;

margin-bottom:8px;

}



.noteFolder:hover,
.noteFolder.active {

background:

rgba(212,175,55,.15);

color:white;

}



.noteFolder .count {

margin-left:auto;

font-size:12px;

color:var(--gold);

}





.notesList {

background:

var(--card);

border:

1px solid var(--border);

border-radius:22px;

padding:15px;

}



.notePreview {

padding:18px;

border-radius:16px;

cursor:pointer;

margin-bottom:10px;

transition:.3s;

}



.notePreview:hover,
.notePreview.active {

background:

rgba(255,255,255,.08);

}



.notePreview h3 {

margin-bottom:8px;

}



.notePreview p {

font-size:14px;

color:var(--muted);

line-height:1.5;

}



.notePreview span {

font-size:12px;

color:#777;

display:block;

margin-top:10px;

}





.noteEditor {

background:

var(--card);

border:

1px solid var(--border);

border-radius:22px;

padding:25px;

display:flex;

flex-direction:column;

}



.noteTitle {

font-size:30px;

background:none;

border:none;

outline:none;

color:white;

margin-bottom:20px;

}



.editorToolbar {

display:flex;

gap:10px;

padding-bottom:20px;

border-bottom:

1px solid var(--border);

}



.editorToolbar button {

width:40px;

height:40px;

padding:0;

}



.markdownEditor {

flex:1;

margin-top:20px;

resize:none;

background:

rgba(0,0,0,.25);

border:

none;

border-radius:15px;

padding:20px;

color:white;

font-size:16px;

line-height:1.7;

outline:none;

}



.editorFooter {

display:flex;

justify-content:space-between;

margin-top:15px;

color:var(--muted);

font-size:13px;

}





/* =========================================
   JOURNAL
========================================= */


.journalGrid {

display:grid;

grid-template-columns:

1fr 1fr;

gap:25px;

}



.journalPanel {

background:

var(--card);

border:

1px solid var(--border);

border-radius:22px;

padding:25px;

}



.moodSelector {

display:flex;

gap:12px;

margin:20px 0;

flex-wrap:wrap;

}



.moodSelector button {

font-size:25px;

width:55px;

height:55px;

padding:0;

}



.moodSelector button.active {

background:

var(--gold);

transform:scale(1.1);

}



.journalPrompt {

margin-top:20px;

}



.journalPrompt h4 {

margin-bottom:10px;

}



.journalPrompt textarea {

width:100%;

height:90px;

background:

rgba(255,255,255,.05);

border:

1px solid var(--border);

border-radius:15px;

padding:15px;

color:white;

resize:none;

}



.journalTitle {

width:100%;

background:

rgba(255,255,255,.05);

border:

1px solid var(--border);

padding:15px;

border-radius:15px;

color:white;

margin:15px 0;

}



.journalEditor {

height:350px;

background:

rgba(255,255,255,.05);

border:

1px solid var(--border);

border-radius:15px;

padding:20px;

color:white;

resize:none;

}



.journalTools {

display:flex;

gap:10px;

margin-top:15px;

}





/* JOURNAL TIMELINE */


.journalTimeline {

margin-top:30px;

background:

var(--card);

padding:25px;

border-radius:22px;

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

}



.timelineItem {

display:flex;

gap:20px;

padding:20px 0;

border-bottom:

1px solid var(--border);

}



.timelineDot {

width:15px;

height:15px;

border-radius:50%;

background:

var(--gold);

margin-top:5px;

}



.timelineItem p {

color:var(--muted);

margin-top:5px;

}





.moodStats {

display:grid;

grid-template-columns:

repeat(5,1fr);

gap:15px;

margin-top:25px;

}



.statBox {

background:

var(--card);

border:

1px solid var(--border);

padding:20px;

border-radius:20px;

text-align:center;

}



.statBox h2 {

color:var(--gold);

margin-top:10px;

}





/* =========================================
   FINANCE DASHBOARD
========================================= */


.financeOverview {

grid-template-columns:

repeat(4,1fr);

}



.moneyCard {

background:

var(--card);

border:

1px solid var(--border);

border-radius:22px;

padding:25px;

display:flex;

gap:20px;

align-items:center;

}



.moneyIcon {

width:55px;

height:55px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

}



.moneyIcon.green {

background:

rgba(125,216,125,.2);

color:var(--green);

}



.moneyIcon.gold {

background:

rgba(212,175,55,.2);

color:var(--gold);

}



.moneyIcon.red {

background:

rgba(255,107,107,.2);

color:var(--red);

}



.moneyIcon.blue {

background:

rgba(92,169,255,.2);

color:var(--blue);

}



.moneyCard p {

color:var(--muted);

}



.moneyCard h1 {

margin:8px 0;

}





.financeGrid {

display:grid;

grid-template-columns:

1fr 1fr;

gap:25px;

margin-top:25px;

}



.financePanel {

min-height:350px;

}





.transaction {

display:flex;

align-items:center;

gap:15px;

padding:15px 0;

border-bottom:

1px solid var(--border);

}



.transactionIcon {

font-size:28px;

}



.transaction div:nth-child(2) {

flex:1;

}



.transaction p {

color:var(--muted);

font-size:13px;

}



.income {

color:var(--green);

}





.budgetItem {

margin-bottom:20px;

}



.budgetHeader {

display:flex;

justify-content:space-between;

margin-bottom:8px;

}



.budgetBar {

height:9px;

background:#222;

border-radius:20px;

overflow:hidden;

}



.budgetBar div {

height:100%;

background:

var(--gold);

}





.savingsGrid {

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:20px;

}



.savingCard {

background:

var(--card);

padding:25px;

border:

1px solid var(--border);

border-radius:22px;

}



.savingTop {

display:flex;

justify-content:space-between;

}



.savingTop i {

color:var(--gold);

font-size:25px;

}
/* =========================================
   ANALYTICS
========================================= */


.analyticsGrid {

grid-template-columns:

repeat(3,1fr);

}



.chartCard {

background:

var(--card);

border:

1px solid var(--border);

border-radius:22px;

padding:25px;

}



.chartCard h3 {

margin-bottom:25px;

}



.fakeChart {

height:220px;

display:flex;

align-items:flex-end;

gap:15px;

}



.chartBar {

flex:1;

background:

linear-gradient(
180deg,
var(--gold),
orange
);

border-radius:10px 10px 0 0;

}



.chartLabels {

display:flex;

justify-content:space-around;

margin-top:15px;

color:var(--muted);

font-size:12px;

}



.circleProgress.large {

width:180px;

height:180px;

margin:auto;

}



.progressList div {

margin-bottom:18px;

}



.progressList span {

display:block;

margin-bottom:8px;

}



.smallBar {

height:8px;

background:#222;

border-radius:20px;

overflow:hidden;

}



.smallBar div {

height:100%;

background:var(--gold);

}



.analyticsInsights {

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:20px;

margin-top:25px;

}



.analyticsInsights > div {

background:

var(--card);

border:

1px solid var(--border);

border-radius:20px;

padding:25px;

}



.analyticsInsights i {

color:var(--gold);

font-size:30px;

margin-bottom:15px;

}





/* =========================================
   READING TRACKER
========================================= */


.readingStats {

grid-template-columns:

repeat(4,1fr);

}



.readingStat {

text-align:center;

}



.readingStat i {

font-size:30px;

color:var(--gold);

}



.readingStat h2 {

font-size:40px;

margin:15px 0;

}



.bookGrid {

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:20px;

margin-top:25px;

}



.bookCard {

display:flex;

gap:15px;

align-items:center;

}



.bookCover {

width:65px;

height:90px;

border-radius:12px;

background:

rgba(212,175,55,.15);

display:flex;

align-items:center;

justify-content:center;

font-size:35px;

}



.bookProgress {

height:7px;

background:#222;

border-radius:20px;

margin:15px 0;

overflow:hidden;

}



.bookProgress div {

height:100%;

background:var(--gold);

}



.quoteCard {

margin-top:25px;

padding:30px;

background:

linear-gradient(
135deg,
rgba(212,175,55,.2),
transparent
);

border-radius:25px;

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

}





/* =========================================
   MOVIE TRACKER
========================================= */


.movieFilters {

display:flex;

gap:15px;

margin-bottom:25px;

}



.movieFilters .active {

background:var(--gold);

color:black;

}



.movieGrid {

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:20px;

}



.movieCard {

text-align:center;

}



.moviePoster {

height:180px;

border-radius:20px;

background:

rgba(255,255,255,.05);

display:flex;

align-items:center;

justify-content:center;

font-size:70px;

margin-bottom:15px;

}



.rating {

color:var(--gold);

font-size:20px;

margin:10px;

}





/* =========================================
   WORKOUT
========================================= */


.fitnessStats {

grid-template-columns:

repeat(4,1fr);

}



.fitnessStats > div {

background:

var(--card);

padding:25px;

border-radius:22px;

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

text-align:center;

}



.fitnessStats i {

font-size:30px;

color:var(--gold);

}



.fitnessStats h2 {

font-size:35px;

margin:15px 0;

}



.workoutGrid {

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:20px;

margin-top:25px;

}



.workoutHeader {

display:flex;

justify-content:space-between;

}



.workoutHeader span {

color:var(--gold);

}



.workoutCard ul {

list-style:none;

margin:20px 0;

}



.workoutCard li {

padding:12px 0;

border-bottom:

1px solid var(--border);

display:flex;

justify-content:space-between;

}



.recordGrid {

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:20px;

}



.recordCard {

background:

var(--card);

border:

1px solid var(--border);

padding:25px;

border-radius:20px;

text-align:center;

}



.recordCard i {

color:var(--gold);

font-size:30px;

}





/* =========================================
   AI ASSISTANT
========================================= */


.assistantLayout {

display:grid;

grid-template-columns:

1fr 280px;

gap:25px;

}



.chatWindow {

background:

var(--card);

border:

1px solid var(--border);

border-radius:25px;

padding:25px;

}



.chatMessage {

display:flex;

gap:15px;

padding:18px;

border-radius:18px;

margin-bottom:15px;

}



.chatMessage.ai {

background:

rgba(255,255,255,.05);

}



.chatMessage.user {

background:

rgba(212,175,55,.15);

}



.avatar {

font-size:30px;

}



.chatInput {

display:flex;

gap:10px;

margin-top:20px;

}



.chatInput input {

flex:1;

background:

rgba(255,255,255,.05);

border:

1px solid var(--border);

border-radius:15px;

padding:15px;

color:white;

}



.assistantSuggestions {

background:

var(--card);

padding:25px;

border-radius:25px;

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

}



.assistantSuggestions button {

width:100%;

margin-bottom:12px;

}



.assistantStatus {

display:flex;

align-items:center;

gap:10px;

}



.onlineDot {

width:10px;

height:10px;

background:var(--green);

border-radius:50%;

}





/* =========================================
   SEARCH + COMMAND
========================================= */


.searchOverlay,
.commandPalette {

position:fixed;

inset:0;

background:

rgba(0,0,0,.7);

display:none;

align-items:flex-start;

justify-content:center;

padding-top:100px;

z-index:1000;

}



.searchModal,
.commandBox {

width:600px;

background:

var(--card);

border:

1px solid var(--border);

border-radius:25px;

padding:25px;

}



.searchHeader {

display:flex;

gap:15px;

}



.searchHeader input {

flex:1;

background:none;

border:none;

color:white;

outline:none;

font-size:20px;

}



.searchResults div,
.commandBox div {

padding:18px;

border-radius:15px;

cursor:pointer;

}



.searchResults div:hover,
.commandBox div:hover {

background:

rgba(255,255,255,.08);

}





/* =========================================
   PROFILE
========================================= */


.profileCard {

max-width:600px;

margin:auto;

text-align:center;

background:

var(--card);

padding:40px;

border-radius:30px;

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

}



.profileAvatar {

width:100px;

height:100px;

background:

var(--gold);

color:black;

font-size:50px;

font-weight:bold;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin:auto;

}



.profileStats {

display:grid;

grid-template-columns:

repeat(3,1fr);

margin-top:30px;

}



.profileStats h2 {

color:var(--gold);

}





/* =========================================
   SETTINGS + THEMES
========================================= */


.settingsGrid {

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:20px;

}



.settingCard i {

font-size:30px;

color:var(--gold);

margin-bottom:20px;

}



.themeGrid {

display:grid;

grid-template-columns:

repeat(6,1fr);

gap:20px;

}



.themeCard {

height:120px;

border-radius:25px;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

}



.themeCard.dark {

background:#050505;

}



.themeCard.gold {

background:

linear-gradient(
135deg,
gold,
black
);

}



.themeCard.cyber {

background:

linear-gradient(
135deg,
#00ffff,
#ff00ff
);

}



.themeCard.forest {

background:

linear-gradient(
135deg,
#355c3a,
#0b1f10
);

}



.themeCard.ocean {

background:

linear-gradient(
135deg,
#0077ff,
#001a33
);

}



.themeCard.sunset {

background:

linear-gradient(
135deg,
orange,
purple
);

}





/* =========================================
   NOTIFICATIONS
========================================= */


.notificationPanel {

position:fixed;

right:30px;

top:30px;

width:350px;

background:

var(--card);

border:

1px solid var(--border);

border-radius:25px;

padding:25px;

display:none;

z-index:999;

}



.notification {

padding:15px;

background:

rgba(255,255,255,.05);

border-radius:15px;

margin-top:12px;

}





/* =========================================
   FLOATING BUTTON
========================================= */


.floatingButton {

position:fixed;

right:35px;

bottom:35px;

width:65px;

height:65px;

border-radius:50%;

background:

var(--gold);

color:black;

font-size:25px;

box-shadow:

0 20px 50px rgba(212,175,55,.4);

}





/* =========================================
   FOOTER
========================================= */


footer {

margin-top:60px;

padding:40px;

border-top:

1px solid var(--border);

display:flex;

justify-content:space-between;

color:var(--muted);

}