/* ============================================================
PREMIUM WEB — PRACTICE PAGE
============================================================ */

* {
box-sizing: border-box;
}


html {
scroll-behavior: smooth;
}


body {
margin: 0;

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

background:
#f7f7f5;

color:
#171717;
}


a {
color: inherit;

text-decoration: none;
}


button,
input,
textarea {
font: inherit;
}


/* ============================================================
HEADER
============================================================ */

.practice-header {
position: sticky;
top: 0;

z-index: 1000;

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

backdrop-filter:
blur(16px);

border-bottom:
1px solid #e8e8e8;
}


.practice-navbar {
width:
min(1440px, 100%);

min-height: 72px;

margin:
0 auto;

padding:
0 28px;

display:
flex;

align-items:
center;

justify-content:
space-between;

gap:
24px;
}


.practice-logo {
display:
inline-flex;

align-items:
center;

gap:
3px;

color:
#111111;

font-size:
17px;

font-weight:
800;

letter-spacing:
-0.04em;
}


.practice-logo span {
color:
#b28a00;
}


.practice-nav-links {
display:
flex;

align-items:
center;

gap:
24px;
}


.practice-nav-links a {
position:
relative;

padding:
27px 0;

color:
#686868;

font-size:
12px;

font-weight:
650;

transition:
color 0.2s ease;
}


.practice-nav-links a:hover,
.practice-nav-links a.active {
color:
#111111;
}


.practice-nav-links a.active::after {
content:
"";

position:
absolute;

left:
0;

right:
0;

bottom:
18px;

height:
2px;

border-radius:
10px;

background:
#b28a00;
}


.practice-account-actions {
display:
flex;

align-items:
center;

gap:
9px;
}


.practice-login-btn,
.practice-register-btn {
min-height:
40px;

display:
inline-flex;

align-items:
center;

justify-content:
center;

padding:
0 15px;

border-radius:
10px;

font-size:
11px;

font-weight:
700;
}


.practice-login-btn {
border:
1px solid #dddddd;

background:
#ffffff;

color:
#444444;
}


.practice-register-btn {
border:
1px solid #111111;

background:
#111111;

color:
#ffffff;
}


.practice-mobile-menu-btn {
display:
none;

width:
40px;

height:
40px;

align-items:
center;

justify-content:
center;

border:
1px solid #e0e0e0;

border-radius:
10px;

background:
#ffffff;

color:
#111111;

cursor:
pointer;
}


.practice-mobile-menu {
display:
none;
}


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

.practice-main {
width:
min(1440px, 100%);

margin:
0 auto;

padding:
52px 28px 80px;
}


/* ============================================================
INTRO
============================================================ */

.practice-intro {
display:
grid;

grid-template-columns:
minmax(0, 1.35fr)
minmax(330px, 0.65fr);

gap:
24px;

align-items:
stretch;

margin-bottom:
28px;
}


.practice-intro-content {
min-height:
330px;

padding:
42px;

display:
flex;

flex-direction:
column;

justify-content:
center;

border:
1px solid #e7e7e7;

border-radius:
24px;

background:
linear-gradient(
135deg,
#ffffff 0%,
#fbfaf5 100%
);

box-shadow:
0 16px 50px
rgba(0, 0, 0, 0.04);
}


.practice-eyebrow {
display:
inline-flex;

align-items:
center;

gap:
7px;

width:
fit-content;

margin-bottom:
16px;

color:
#9c7800;

font-size:
9px;

font-weight:
800;

letter-spacing:
0.13em;

text-transform:
uppercase;
}


.practice-intro h1 {
max-width:
760px;

margin:
0;

color:
#111111;

font-size:
clamp(36px, 5vw, 62px);

line-height:
1.02;

letter-spacing:
-0.045em;
}


.practice-intro h1 span {
display:
block;

color:
#b28a00;
}


.practice-intro-content > p {
max-width:
660px;

margin:
20px 0 0;

color:
#6d6d6d;

font-size:
15px;

line-height:
1.7;
}


.practice-free-badge {
width:
fit-content;

margin-top:
22px;

display:
inline-flex;

align-items:
center;

gap:
8px;

padding:
9px 12px;

border:
1px solid #dcebdd;

border-radius:
999px;

background:
#f2faf3;

color:
#287447;

font-size:
10px;

font-weight:
750;
}


/* ============================================================
COMMUNITY CARD
============================================================ */

.practice-community-card {
padding:
28px;

display:
flex;

flex-direction:
column;

border:
1px solid #e6e6e6;

border-radius:
24px;

background:
#111111;

color:
#ffffff;

box-shadow:
0 20px 55px
rgba(0, 0, 0, 0.1);
}


.practice-community-icon {
width:
44px;

height:
44px;

display:
flex;

align-items:
center;

justify-content:
center;

margin-bottom:
24px;

border-radius:
12px;

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

color:
#d3ae28;
}


.practice-community-card > div:nth-child(2) {
flex:
1;
}


.practice-community-card span {
display:
block;

margin-bottom:
7px;

color:
#d3ae28;

font-size:
9px;

font-weight:
800;

letter-spacing:
0.12em;
}


.practice-community-card h2 {
margin:
0;

color:
#ffffff;

font-size:
22px;

line-height:
1.3;
}


.practice-community-card p {
margin:
12px 0 0;

color:
#bcbcbc;

font-size:
12px;

line-height:
1.7;
}


.practice-community-actions {
display:
flex;

flex-direction:
column;

gap:
9px;

margin-top:
24px;
}


.practice-community-primary,
.practice-community-secondary {
min-height:
43px;

display:
flex;

align-items:
center;

justify-content:
center;

gap:
7px;

border-radius:
11px;

font-size:
11px;

font-weight:
750;
}


.practice-community-primary {
background:
#ffffff;

color:
#111111;
}


.practice-community-secondary {
border:
1px solid #333333;

background:
#1a1a1a;

color:
#ffffff;
}


/* ============================================================
WORKSPACE
============================================================ */

.practice-workspace {
overflow:
hidden;

margin-bottom:
28px;

border:
1px solid #dfdfdf;

border-radius:
22px;

background:
#ffffff;

box-shadow:
0 16px 45px
rgba(0, 0, 0, 0.05);
}


/* ============================================================
WORKSPACE TOOLBAR
============================================================ */

.practice-workspace-toolbar {
min-height:
70px;

display:
flex;

align-items:
center;

justify-content:
space-between;

gap:
18px;

padding:
13px 18px;

border-bottom:
1px solid #e6e6e6;

background:
#ffffff;
}


.practice-workspace-title {
display:
flex;

align-items:
center;

gap:
10px;
}


.practice-workspace-icon {
width:
38px;

height:
38px;

display:
flex;

align-items:
center;

justify-content:
center;

border-radius:
10px;

background:
#f6f0dc;

color:
#987600;

font-size:
12px;
}


.practice-workspace-title > div:last-child {
display:
flex;

flex-direction:
column;

gap:
2px;
}


.practice-workspace-title span {
color:
#999999;

font-size:
8px;

font-weight:
800;

letter-spacing:
0.1em;
}


.practice-workspace-title strong {
color:
#222222;

font-size:
13px;
}


.practice-toolbar-actions {
display:
flex;

align-items:
center;

gap:
8px;
}


.practice-tool-btn,
.practice-run-btn {
min-height:
39px;

display:
inline-flex;

align-items:
center;

justify-content:
center;

gap:
7px;

padding:
0 13px;

border-radius:
9px;

font-size:
10px;

font-weight:
700;

cursor:
pointer;
}


.practice-tool-btn {
border:
1px solid #dfdfdf;

background:
#ffffff;

color:
#555555;
}


.practice-run-btn {
border:
1px solid #111111;

background:
#111111;

color:
#ffffff;
}


/* ============================================================
EDITOR + PREVIEW GRID
============================================================ */

.practice-workspace-grid {
display:
grid;

grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr);

min-height:
610px;
}


/* ============================================================
EDITOR PANEL
============================================================ */

.practice-editor-panel {
min-width:
0;

display:
flex;

flex-direction:
column;

background:
#161616;

border-right:
1px solid #303030;
}


.practice-editor-tabs {
display:
flex;

align-items:
center;

min-height:
48px;

padding:
0 10px;

border-bottom:
1px solid #303030;

background:
#1b1b1b;

overflow-x:
auto;
}


.practice-editor-tab {
position:
relative;

min-height:
48px;

display:
inline-flex;

align-items:
center;

justify-content:
center;

gap:
7px;

padding:
0 15px;

border:
0;

background:
transparent;

color:
#888888;

font-size:
10px;

font-weight:
700;

cursor:
pointer;

white-space:
nowrap;
}


.practice-editor-tab.active {
color:
#ffffff;
}


.practice-editor-tab.active::after {
content:
"";

position:
absolute;

left:
10px;

right:
10px;

bottom:
0;

height:
2px;

border-radius:
4px;

background:
#d0a822;
}


.practice-editor-tab .fa-html5 {
color:
#e76f36;
}


.practice-editor-tab .fa-css3-alt {
color:
#4f8ee8;
}


.practice-editor-tab .fa-js {
color:
#dfc431;
}


/* ============================================================
CODE EDITOR CONTAINER
============================================================ */

.practice-code-editor {
flex:
1;

min-height:
0;

display:
none;

flex-direction:
column;
}


.practice-code-editor.active {
display:
flex;
}


.practice-editor-label {
min-height:
38px;

display:
flex;

align-items:
center;

justify-content:
space-between;

gap:
10px;

padding:
0 14px;

border-bottom:
1px solid #282828;

background:
#171717;
}


.practice-editor-label span {
color:
#c7c7c7;

font-size:
10px;

font-weight:
650;
}


.practice-editor-label small {
color:
#737373;

font-size:
8px;

font-weight:
700;
}


/* ============================================================
CODEMIRROR
============================================================ */

.practice-code-editor .CodeMirror {
flex:
1;

width:
100%;

height:
100%;

min-height:
520px;

background:
#161616;

color:
#e5e5e5;

font-family:
"Consolas",
"Monaco",
monospace;

font-size:
13px;

line-height:
1.65;
}


.practice-code-editor
.CodeMirror-scroll {
min-height:
520px;
}


.practice-code-editor
.CodeMirror-gutters {
background:
#161616;

border-right:
1px solid #252525;
}


.practice-code-editor
.CodeMirror-linenumber {
color:
#5c5c5c;
}


.practice-code-editor
.CodeMirror-cursor {
border-left:
2px solid #f1f1f1;
}


/* ============================================================
SYNTAX COLORS
============================================================ */

.cm-s-material-darker
.cm-tag {
color:
#f07178;
}


.cm-s-material-darker
.cm-bracket {
color:
#89ddff;
}


.cm-s-material-darker
.cm-attribute {
color:
#ffcb6b;
}


.cm-s-material-darker
.cm-string {
color:
#c3e88d;
}


.cm-s-material-darker
.cm-property {
color:
#82aaff;
}


.cm-s-material-darker
.cm-number {
color:
#f78c6c;
}


.cm-s-material-darker
.cm-keyword {
color:
#c792ea;
}


.cm-s-material-darker
.cm-def {
color:
#82aaff;
}


.cm-s-material-darker
.cm-variable {
color:
#eeffff;
}


.cm-s-material-darker
.cm-variable-2 {
color:
#f07178;
}


.cm-s-material-darker
.cm-comment {
color:
#676e95;

font-style:
italic;
}


.cm-s-material-darker
.cm-operator {
color:
#89ddff;
}


/* ============================================================
PREVIEW PANEL
============================================================ */

.practice-preview-panel {
min-width:
0;

display:
flex;

flex-direction:
column;

background:
#ffffff;
}


.practice-preview-header {
min-height:
49px;

display:
flex;

align-items:
center;

justify-content:
space-between;

gap:
12px;

padding:
0 14px;

border-bottom:
1px solid #e6e6e6;

background:
#fafafa;
}


.practice-preview-header > div:first-child {
display:
flex;

align-items:
center;

gap:
8px;
}


.practice-preview-dot {
width:
8px;

height:
8px;

border-radius:
50%;

background:
#45a667;

box-shadow:
0 0 0 3px
rgba(69, 166, 103, 0.12);
}


.practice-preview-header strong {
color:
#333333;

font-size:
10px;

font-weight:
750;
}


.practice-preview-actions {
display:
flex;

align-items:
center;

gap:
5px;
}


.practice-preview-actions button {
width:
32px;

height:
32px;

display:
inline-flex;

align-items:
center;

justify-content:
center;

border:
1px solid #e2e2e2;

border-radius:
8px;

background:
#ffffff;

color:
#666666;

cursor:
pointer;
}


.practice-preview-container {
flex:
1;

min-height:
560px;

background:
#ffffff;
}


#practicePreviewFrame {
width:
100%;

height:
100%;

min-height:
560px;

display:
block;

border:
0;

background:
#ffffff;
}


/* ============================================================
HELP SECTION
============================================================ */

.practice-help-section {
display:
flex;

align-items:
flex-start;

gap:
16px;

margin-bottom:
22px;

padding:
22px 24px;

border:
1px solid #e6e1ce;

border-radius:
18px;

background:
#fffdf6;
}


.practice-help-icon {
width:
42px;

height:
42px;

flex-shrink:
0;

display:
flex;

align-items:
center;

justify-content:
center;

border-radius:
11px;

background:
#f7efd2;

color:
#a17a00;
}


.practice-help-section span {
color:
#a17a00;

font-size:
8px;

font-weight:
800;

letter-spacing:
0.1em;
}


.practice-help-section h2 {
margin:
5px 0 7px;

color:
#222222;

font-size:
18px;
}


.practice-help-section p {
margin:
0;

max-width:
800px;

color:
#777777;

font-size:
12px;

line-height:
1.65;
}


/* ============================================================
WEBSITE PROMO
============================================================ */

.practice-website-promo {
min-height:
220px;

display:
flex;

align-items:
center;

justify-content:
space-between;

gap:
30px;

margin-bottom:
22px;

padding:
32px;

overflow:
hidden;

border-radius:
22px;

background:
#111111;

color:
#ffffff;

position:
relative;
}


.practice-website-promo-content {
position:
relative;

z-index:
2;

max-width:
660px;
}


.practice-website-promo h2 {
margin:
0;

font-size:
28px;

line-height:
1.2;
}


.practice-website-promo p {
margin:
11px 0 0;

color:
#b9b9b9;

font-size:
12px;

line-height:
1.7;
}


.practice-website-btn {
min-height:
43px;

width:
fit-content;

margin-top:
20px;

padding:
0 15px;

display:
inline-flex;

align-items:
center;

gap:
8px;

border-radius:
10px;

background:
#ffffff;

color:
#111111;

font-size:
10px;

font-weight:
750;
}


.practice-website-promo-icon {
position:
relative;

z-index:
1;

font-size:
100px;

color:
rgba(255, 255, 255, 0.07);
}


/* ============================================================
JOIN SECTION
============================================================ */

.practice-join-section {
display:
flex;

align-items:
center;

justify-content:
space-between;

gap:
28px;

padding:
27px 30px;

border:
1px solid #e4e4e4;

border-radius:
20px;

background:
#ffffff;
}


.practice-join-section > div:first-child {
max-width:
700px;
}


.practice-join-section span {
color:
#a17a00;

font-size:
8px;

font-weight:
800;

letter-spacing:
0.1em;
}


.practice-join-section h2 {
margin:
5px 0 7px;

font-size:
22px;
}


.practice-join-section p {
margin:
0;

color:
#777777;

font-size:
12px;

line-height:
1.6;
}


.practice-join-actions {
display:
flex;

align-items:
center;

gap:
9px;
}


.practice-join-login,
.practice-join-register {
min-height:
41px;

display:
inline-flex;

align-items:
center;

justify-content:
center;

gap:
7px;

padding:
0 14px;

border-radius:
10px;

font-size:
10px;

font-weight:
750;
}


.practice-join-login {
border:
1px solid #dddddd;

background:
#ffffff;
}


.practice-join-register {
border:
1px solid #111111;

background:
#111111;

color:
#ffffff;
}


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

.practice-footer {
border-top:
1px solid #e5e5e5;

background:
#ffffff;
}


.practice-footer-main,
.practice-footer-bottom {
width:
min(1440px, 100%);

margin:
0 auto;

padding-left:
28px;

padding-right:
28px;
}


.practice-footer-main {
min-height:
120px;

display:
flex;

align-items:
center;

gap:
24px;
}


.practice-footer-logo {
font-size:
15px;

font-weight:
800;
}


.practice-footer-logo span {
color:
#b28a00;
}


.practice-footer-main p {
color:
#888888;

font-size:
10px;
}


.practice-footer-links {
margin-left:
auto;

display:
flex;

align-items:
center;

gap:
20px;
}


.practice-footer-links a {
color:
#666666;

font-size:
10px;

font-weight:
650;
}


.practice-footer-bottom {
min-height:
52px;

display:
flex;

align-items:
center;

justify-content:
space-between;

gap:
15px;

border-top:
1px solid #eeeeee;

color:
#999999;

font-size:
9px;
}


/* ============================================================
TABLET
============================================================ */

@media (max-width: 1050px) {

.practice-nav-links {
display:
none;
}


.practice-intro {
grid-template-columns:
1fr;
}


.practice-community-card {
min-height:
auto;
}


.practice-workspace-grid {
grid-template-columns:
1fr;
}


.practice-editor-panel {
border-right:
0;

border-bottom:
1px solid #303030;
}


.practice-code-editor .CodeMirror,
.practice-code-editor .CodeMirror-scroll {
min-height:
430px;
}


.practice-preview-container,
#practicePreviewFrame {
min-height:
480px;
}

}


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

@media (max-width: 700px) {

.practice-navbar {
min-height:
64px;

padding:
0 16px;
}


.practice-account-actions {
display:
none;
}


.practice-mobile-menu-btn {
display:
flex;
}


.practice-mobile-menu.active {
display:
flex;

flex-direction:
column;

gap:
4px;

padding:
12px 16px 17px;

border-top:
1px solid #eeeeee;

background:
#ffffff;
}


.practice-mobile-menu a {
min-height:
40px;

display:
flex;

align-items:
center;

padding:
0 10px;

border-radius:
8px;

color:
#555555;

font-size:
11px;

font-weight:
650;
}


.practice-mobile-menu a:hover {
background:
#f7f7f7;
}


.practice-mobile-menu-divider {
height:
1px;

margin:
6px 0;

background:
#eeeeee;
}


.practice-mobile-menu
.mobile-register {
background:
#111111;

color:
#ffffff;
}


.practice-main {
padding:
28px 14px 60px;
}


.practice-intro {
gap:
14px;

margin-bottom:
16px;
}


.practice-intro-content {
min-height:
auto;

padding:
27px 20px;

border-radius:
18px;
}


.practice-intro h1 {
font-size:
38px;
}


.practice-intro-content > p {
font-size:
13px;
}


.practice-community-card {
padding:
22px;

border-radius:
18px;
}


.practice-workspace {
border-radius:
16px;
}


.practice-workspace-toolbar {
align-items:
flex-start;

flex-direction:
column;

padding:
13px;
}


.practice-toolbar-actions {
width:
100%;
}


.practice-tool-btn,
.practice-run-btn {
flex:
1;

padding:
0 8px;
}


.practice-tool-btn span {
display:
none;
}


.practice-workspace-grid {
min-height:
auto;
}


.practice-editor-tabs {
padding:
0 6px;
}


.practice-editor-tab {
flex:
1;

padding:
0 8px;
}


.practice-code-editor .CodeMirror,
.practice-code-editor .CodeMirror-scroll {
min-height:
370px;
}


.practice-preview-container,
#practicePreviewFrame {
min-height:
430px;
}


.practice-help-section {
padding:
18px;

border-radius:
15px;
}


.practice-website-promo {
min-height:
auto;

padding:
25px 20px;

border-radius:
17px;
}


.practice-website-promo h2 {
font-size:
23px;
}


.practice-website-promo-icon {
display:
none;
}


.practice-join-section {
align-items:
flex-start;

flex-direction:
column;

padding:
21px;

border-radius:
16px;
}


.practice-join-actions {
width:
100%;
}


.practice-join-login,
.practice-join-register {
flex:
1;
}


.practice-footer-main {
align-items:
flex-start;

flex-direction:
column;

padding-top:
25px;

padding-bottom:
25px;

gap:
12px;
}


.practice-footer-links {
margin-left:
0;

flex-wrap:
wrap;

gap:
12px;
}


.practice-footer-bottom {
min-height:
auto;

align-items:
flex-start;

flex-direction:
column;

padding-top:
15px;

padding-bottom:
15px;
}

}