* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #070914;
color: white;
min-height: 100vh;
}

.background {
position: fixed;
inset: 0;
z-index: -1;


background:
    radial-gradient(
        circle at 10% 10%,
        rgba(100, 80, 255, 0.25),
        transparent 35%
    ),
    radial-gradient(
        circle at 90% 90%,
        rgba(0, 210, 255, 0.18),
        transparent 35%
    ),
    radial-gradient(
        circle at 50% 50%,
        rgba(80, 50, 180, 0.08),
        transparent 45%
    );


}

header {
min-height: 72px;


display: flex;
align-items: center;
gap: 25px;

padding: 12px 5%;

border-bottom: 1px solid rgba(255,255,255,0.1);

background: rgba(8,10,22,0.82);

backdrop-filter: blur(20px);

position: sticky;
top: 0;

z-index: 10;


}

.logo {
display: flex;
align-items: center;


gap: 10px;

font-size: 21px;
font-weight: bold;

white-space: nowrap;


}

.main-nav {
display: flex;
align-items: center;
gap: 5px;


flex: 1;

overflow-x: auto;


}

.nav-button {
background: transparent;


color: #8e96ad;

padding: 10px 13px;

border-radius: 10px;

white-space: nowrap;

font-size: 13px;


}

.nav-button:hover {
color: white;
background: rgba(255,255,255,0.07);
}

.nav-button.active {
color: white;


background: rgba(113,103,255,0.18);

border: 1px solid rgba(113,103,255,0.25);


}

.header-right {
display: flex;
align-items: center;
gap: 12px;
}

.atoms {
color: #c7cce0;
font-weight: bold;


white-space: nowrap;


}

button {
border: none;
cursor: pointer;


border-radius: 12px;

padding: 12px 17px;

font-weight: bold;

transition:
    transform 0.2s,
    filter 0.2s,
    background 0.2s;


}

button:hover {
transform: translateY(-2px);
filter: brightness(1.1);
}

button:active {
transform: translateY(0);
}

#loginButton,
.main-button {
color: white;


background:
    linear-gradient(
        135deg,
        #7167ff,
        #29cfff
    );


}

.secondary,
.small-button {
color: white;


background: rgba(255,255,255,0.08);

border: 1px solid rgba(255,255,255,0.12);


}

main {
width: 90%;
max-width: 1250px;


margin: auto;

padding: 50px 0 100px;


}

.app-section {
animation: sectionIn 0.3s ease;
}

@keyframes sectionIn {
from {
opacity: 0;
transform: translateY(8px);
}


to {
    opacity: 1;
    transform: translateY(0);
}


}

.hero {
display: grid;


grid-template-columns: 1fr 300px;

gap: 50px;

align-items: center;

margin-bottom: 60px;


}

.hero-text p {
color: #aeb5ca;


font-size: 18px;

line-height: 1.6;

max-width: 650px;


}

.tag {
color: #8f87ff;


font-size: 12px;

font-weight: bold;

letter-spacing: 3px;

margin-bottom: 12px;


}

h1 {
font-size: clamp(45px, 7vw, 75px);


line-height: 0.98;

margin: 0;


}

h1 span {
background:
linear-gradient(
90deg,
#867cff,
#3ddcff
);


-webkit-background-clip: text;

color: transparent;


}

.buttons {
display: flex;


gap: 12px;

flex-wrap: wrap;

margin: 25px 0;


}

.main-button {
padding: 15px 22px;
}

.daily-button {
background: rgba(255,255,255,0.08);


color: white;

border: 1px solid rgba(255,255,255,0.1);


}

#status {
color: #8e96ad;


font-size: 14px;


}

.atom-card {
text-align: center;


padding: 35px;

border-radius: 25px;

background:
    linear-gradient(
        150deg,
        rgba(25,30,55,0.95),
        rgba(10,13,28,0.95)
    );

border: 1px solid rgba(255,255,255,0.12);

box-shadow:
    0 30px 80px rgba(0,0,0,0.4);

position: relative;
overflow: hidden;


}

.atom-card::before {
content: "";


position: absolute;

width: 180px;
height: 180px;

left: 50%;
top: -100px;

transform: translateX(-50%);

background: rgba(113,103,255,0.18);

filter: blur(50px);

border-radius: 50%;


}

.atom-symbol {
font-size: 55px;


position: relative;


}

.atom-number {
font-size: 55px;


font-weight: 900;

position: relative;


}

.atom-title {
color: #858da5;


letter-spacing: 4px;

font-size: 11px;


}

.progress {
height: 8px;


background: rgba(255,255,255,0.08);

border-radius: 20px;

margin-top: 20px;

overflow: hidden;


}

#progressBar {
height: 100%;


width: 0%;

background:
    linear-gradient(
        90deg,
        #7167ff,
        #38d7ff
    );

transition: 0.4s;


}

.atom-card p {
color: #858da5;


font-size: 12px;


}

.dashboard {
display: grid;


grid-template-columns: 1fr 1fr;

gap: 20px;


}

.panel {
background: rgba(14,18,33,0.8);


border: 1px solid rgba(255,255,255,0.1);

border-radius: 20px;

padding: 22px;

backdrop-filter: blur(15px);

box-shadow:
    0 15px 50px rgba(0,0,0,0.15);


}

.panel-header {
display: flex;


justify-content: space-between;

align-items: center;

gap: 15px;


}

.panel h2 {
margin-top: 0;
}

.empty {
min-height: 160px;


display: grid;

place-items: center;

text-align: center;

color: #707991;


}

.item {
padding: 15px;


margin: 9px 0;

border-radius: 13px;

background: rgba(255,255,255,0.05);

border: 1px solid rgba(255,255,255,0.06);


}

.item b {
display: block;


margin-bottom: 5px;


}

.item small {
color: #8c95ac;
}

.count {
background: rgba(255,255,255,0.08);


padding: 6px 10px;

border-radius: 20px;

color: #b9c1d9;


}

.role-section {
margin-bottom: 25px;
}

.role-section h3 {
margin-bottom: 12px;


color: #dfe4f5;


}

.role-empty {
color: #707991;


padding: 10px 0;


}

.premium {
margin-top: 20px;


padding: 25px;

border-radius: 20px;

display: flex;

justify-content: space-between;

align-items: center;

gap: 20px;

background:
    linear-gradient(
        100deg,
        rgba(40,31,70,0.9),
        rgba(15,28,45,0.9)
    );

border: 1px solid rgba(255,255,255,0.1);


}

.premium p {
color: #969fb7;
}

#premiumButton {
background: white;


color: #111526;

min-width: 160px;


}

#premiumButton:disabled {
opacity: 0.45;


cursor: not-allowed;


}

.rewards {
margin-top: 20px;
}

.reward-grid {
display: grid;


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

gap: 12px;


}

.reward {
padding: 18px;


border-radius: 15px;

background: rgba(255,255,255,0.04);

border: 1px solid rgba(255,255,255,0.07);

transition: 0.2s;


}

.reward:hover {
transform: translateY(-3px);


background: rgba(255,255,255,0.07);


}

.reward div {
font-size: 25px;
}

.reward h3 {
margin-bottom: 5px;
}

.reward p {
color: #8d96ad;


font-size: 13px;


}

/* =========================
PAGE HEADERS
========================= */

.page-header {
display: flex;


align-items: center;

justify-content: space-between;

gap: 30px;

margin-bottom: 30px;


}

.page-header h1 {
font-size: clamp(40px, 6vw, 65px);
}

.page-header p {
color: #969fb7;


font-size: 16px;

max-width: 600px;


}

/* =========================
STUDY GROUPS
========================= */

.groups-layout {
display: grid;


grid-template-columns: 360px 1fr;

gap: 20px;

min-height: 600px;


}

.groups-panel,
.chat-panel {
min-width: 0;
}

.groups-panel {
overflow: hidden;
}

.group-card {
padding: 17px;


margin: 10px 0;

border-radius: 15px;

background: rgba(255,255,255,0.045);

border: 1px solid rgba(255,255,255,0.07);

cursor: pointer;

transition: 0.2s;


}

.group-card:hover {
background: rgba(255,255,255,0.08);


transform: translateY(-2px);


}

.group-card.active {
background:
linear-gradient(
135deg,
rgba(113,103,255,0.22),
rgba(41,207,255,0.08)
);


border-color: rgba(113,103,255,0.35);


}

.group-card h3 {
margin: 0 0 7px;
}

.group-card p {
margin: 0 0 10px;


color: #858da5;

font-size: 13px;

line-height: 1.4;


}

.group-meta {
display: flex;


justify-content: space-between;

color: #8e96ad;

font-size: 12px;


}

.join-button {
margin-top: 12px;


width: 100%;

background:
    linear-gradient(
        135deg,
        rgba(113,103,255,0.9),
        rgba(41,207,255,0.8)
    );

color: white;


}

.chat-panel {
padding: 0;


display: flex;

flex-direction: column;

overflow: hidden;


}

.chat-header {
padding: 20px 22px;


display: flex;

justify-content: space-between;

align-items: center;

gap: 15px;

border-bottom: 1px solid rgba(255,255,255,0.08);

background: rgba(255,255,255,0.025);


}

.chat-header h2 {
margin: 0 0 5px;
}

.chat-header p {
margin: 0;


color: #7f889f;

font-size: 13px;


}

.chat-messages {
flex: 1;


min-height: 430px;

max-height: 500px;

overflow-y: auto;

padding: 20px;


}

.chat-empty {
height: 100%;


min-height: 350px;

display: grid;

place-items: center;

align-content: center;

text-align: center;

color: #707991;


}

.chat-empty div {
font-size: 45px;


margin-bottom: 10px;


}

.chat-empty h3 {
margin: 0 0 5px;


color: #c8cee0;


}

.chat-empty p {
margin: 0;
}

.message {
display: flex;


gap: 10px;

margin-bottom: 17px;

max-width: 85%;


}

.message.mine {
margin-left: auto;


flex-direction: row-reverse;


}

.message-avatar {
width: 34px;
height: 34px;


flex-shrink: 0;

display: grid;
place-items: center;

border-radius: 50%;

background:
    linear-gradient(
        135deg,
        #7167ff,
        #29cfff
    );

font-size: 13px;

font-weight: bold;


}

.message-content {
min-width: 0;
}

.message-name {
color: #aeb6cd;


font-size: 12px;

font-weight: bold;

margin-bottom: 4px;


}

.message-bubble {
padding: 10px 13px;


border-radius: 13px;

background: rgba(255,255,255,0.07);

border: 1px solid rgba(255,255,255,0.06);

color: #e8ebf5;

line-height: 1.45;

word-break: break-word;


}

.message.mine .message-bubble {
background:
linear-gradient(
135deg,
rgba(113,103,255,0.75),
rgba(41,207,255,0.45)
);
}

.message-time {
color: #626b82;


font-size: 10px;

margin-top: 4px;


}

.message-actions {
margin-top: 5px;


display: flex;

gap: 7px;


}

.message-actions button {
padding: 3px 7px;


font-size: 10px;

background: rgba(255,255,255,0.06);

color: #8f98af;

border-radius: 7px;


}

.chat-input-area {
display: flex;


gap: 10px;

padding: 15px;

border-top: 1px solid rgba(255,255,255,0.08);

background: rgba(8,10,22,0.6);


}

.chat-input-area input {
flex: 1;


min-width: 0;


}

.chat-input-area button {
color: white;


background:
    linear-gradient(
        135deg,
        #7167ff,
        #29cfff
    );


}

input,
textarea {
font-family: inherit;
}

.chat-input-area input,
.tool-input,
.modal-input {
width: 100%;


padding: 13px 15px;

border-radius: 12px;

border: 1px solid rgba(255,255,255,0.1);

outline: none;

color: white;

background: rgba(255,255,255,0.06);

transition: 0.2s;


}

.chat-input-area input:focus,
.tool-input:focus,
.modal-input:focus {
border-color: rgba(113,103,255,0.65);


background: rgba(255,255,255,0.08);

box-shadow:
    0 0 0 3px rgba(113,103,255,0.1);


}

.modal-input {
margin-bottom: 12px;
}

textarea.modal-input {
min-height: 110px;


resize: vertical;


}

/* =========================
TOOLS
========================= */

.tool-grid {
display: grid;


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

gap: 20px;


}

.tool-card {
padding: 25px;


border-radius: 20px;

background: rgba(14,18,33,0.8);

border: 1px solid rgba(255,255,255,0.1);

backdrop-filter: blur(15px);


}

.tool-icon {
font-size: 35px;


margin-bottom: 12px;


}

.tool-card h2 {
margin: 0 0 7px;
}

.tool-card p {
color: #858da5;


line-height: 1.5;


}

.tool-buttons {
display: flex;


gap: 8px;

margin-top: 15px;

flex-wrap: wrap;


}

.tool-buttons button,
.tool-card > button {
background: rgba(255,255,255,0.08);


color: white;

border: 1px solid rgba(255,255,255,0.1);


}

.timer-display {
font-size: 50px;


font-weight: 900;

text-align: center;

margin: 25px 0;

letter-spacing: 3px;

background:
    linear-gradient(
        90deg,
        #867cff,
        #3ddcff
    );

-webkit-background-clip: text;
background-clip: text;

color: transparent;


}

.tool-input {
margin: 10px 0;
}

.tool-result {
margin-top: 15px;


padding: 13px;

border-radius: 12px;

background: rgba(255,255,255,0.04);

color: #aeb6cd;

min-height: 45px;


}

.calendar-placeholder {
padding: 30px 15px;


text-align: center;

border-radius: 15px;

background: rgba(255,255,255,0.04);

color: #858da5;

margin-top: 20px;


}

/* =========================
SHOP
========================= */

.shop-grid {
display: grid;


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

gap: 20px;


}

.shop-item {
padding: 25px;


border-radius: 20px;

background: rgba(14,18,33,0.8);

border: 1px solid rgba(255,255,255,0.1);

backdrop-filter: blur(15px);

transition: 0.2s;


}

.shop-item:hover {
transform: translateY(-4px);


border-color: rgba(113,103,255,0.3);


}

.shop-icon {
font-size: 42px;


margin-bottom: 15px;


}

.shop-item h2 {
margin: 0 0 8px;
}

.shop-item p {
color: #858da5;


min-height: 42px;

line-height: 1.5;


}

.shop-item button {
width: 100%;


margin-top: 10px;

color: white;

background:
    linear-gradient(
        135deg,
        rgba(113,103,255,0.9),
        rgba(41,207,255,0.8)
    );


}

/* =========================
MODAL
========================= */

.modal {
position: fixed;


inset: 0;

z-index: 50;

display: grid;

place-items: center;

padding: 20px;

background: rgba(0,0,0,0.65);

backdrop-filter: blur(8px);


}

.modal-card {
width: 100%;


max-width: 500px;

padding: 30px;

border-radius: 24px;

background:
    linear-gradient(
        145deg,
        rgba(25,30,55,0.98),
        rgba(10,13,28,0.98)
    );

border: 1px solid rgba(255,255,255,0.13);

box-shadow:
    0 30px 100px rgba(0,0,0,0.55);

position: relative;


}

.modal-card h2 {
margin-top: 0;
}

.modal-card p {
color: #858da5;


line-height: 1.5;


}

.modal-close {
position: absolute;


top: 15px;
right: 15px;

width: 35px;
height: 35px;

padding: 0;

border-radius: 50%;

background: rgba(255,255,255,0.08);

color: white;

font-size: 22px;


}

/* =========================
TOAST
========================= */

#toast {
position: fixed;


bottom: 25px;

left: 50%;

transform:
    translateX(-50%)
    translateY(30px);

background: white;

color: #101322;

padding: 13px 20px;

border-radius: 12px;

font-weight: bold;

opacity: 0;

pointer-events: none;

transition: 0.25s;

z-index: 100;


}

#toast.show {
opacity: 1;


transform:
    translateX(-50%)
    translateY(0);


}

.hidden {
display: none !important;
}

/* =========================
MOBILE
========================= */

@media(max-width: 1000px) {


header {
    flex-wrap: wrap;
}

.main-nav {
    order: 3;

    flex-basis: 100%;

    padding-bottom: 3px;
}

.groups-layout {
    grid-template-columns: 1fr;
}

.shop-grid {
    grid-template-columns: 1fr 1fr;
}


}
/**
 * Mobile styles for screens up to 800px wide
 */
@media(max-width: 800px) {

    .hero,
    .dashboard {
        grid-template-columns: 1fr;
    }

    .reward-grid {
        grid-template-columns: 1fr 1fr;
    }

    .tool-grid {
        grid-template-columns: 1fr;
    }

    .page-header {
        align-items: flex-start;
        flex-direction: column;
    }

}

@media(max-width: 550px) {

    header {
        padding: 12px 3%;
    }

    .header-right {
        width: 100%;
    }

    #loginButton {
        flex: 1;
    }

    .atoms {
        display: none;
    }

    main {
        width: 94%;
        padding-top: 35px;
    }

    .reward-grid,
    .shop-grid {
        grid-template-columns: 1fr;
    }

    .premium {
        flex-direction: column;
        align-items: flex-start;
    }

    .chat-messages {
        min-height: 350px;
    }

    .message {
        max-width: 95%;
    }

    .chat-input-area {
        padding: 10px;
    }

}