/*=========================================================
  Nepali Typing Practice Pro
  style.css
=========================================================*/

:root{

/* Main Colors */

--bg:#202124;
--panel:#2d2f34;
--panel2:#373b42;

--accent:#f7b731;
--accentHover:#ffca55;

--text:#eeeeee;
--muted:#9ea3ab;

--green:#22c55e;
--red:#ef4444;
--blue:#38bdf8;
--orange:#f97316;

--border:#444;

--shadow:0 15px 40px rgba(0,0,0,.25);

--radius:14px;

--transition:.25s;

--font:'Noto Sans Devanagari','Noto Sans',sans-serif;

}

/*=========================================================
THEMES
=========================================================*/

body.dark{

--bg:#202124;
--panel:#2d2f34;
--panel2:#3b4047;
--text:#efefef;

}

body.light{

--bg:#fafafa;
--panel:#ffffff;
--panel2:#ececec;
--text:#222;

}

body.amoled{

--bg:#000;
--panel:#0f0f0f;
--panel2:#1c1c1c;
--text:#fff;

}

body.blue{

--bg:#13293d;
--panel:#1d3557;
--panel2:#24456d;
--text:#fff;

}

body.green{

--bg:#102a24;
--panel:#184d47;
--panel2:#2b7a78;
--text:#fff;

}

/*=========================================================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:var(--font);

background:var(--bg);

color:var(--text);

transition:.3s;

padding:30px;

min-height:100vh;

}

/*=========================================================
SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:var(--bg);

}

::-webkit-scrollbar-thumb{

background:var(--accent);

border-radius:20px;

}

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

.topbar{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

margin-bottom:30px;

gap:20px;

}

.logo h1{

font-size:40px;

font-weight:700;

margin-bottom:5px;

}

.logo span{

color:var(--muted);

font-size:14px;

}

.top-controls{

display:flex;

gap:15px;

flex-wrap:wrap;

}

/*=========================================================
BUTTONS
=========================================================*/

button{

background:var(--accent);

color:#111;

border:none;

padding:12px 22px;

border-radius:10px;

cursor:pointer;

font-weight:700;

font-size:15px;

transition:var(--transition);

}

button:hover{

background:var(--accentHover);

transform:translateY(-2px);

}

button:active{

transform:scale(.96);

}

/*=========================================================
SELECT
=========================================================*/

select{

padding:10px 16px;

border-radius:10px;

border:none;

background:var(--panel);

color:var(--text);

font-size:15px;

}

/*=========================================================
SETTINGS BAR
=========================================================*/

.settings{

display:flex;

flex-wrap:wrap;

gap:20px;

background:var(--panel);

padding:25px;

border-radius:var(--radius);

margin-bottom:25px;

box-shadow:var(--shadow);

}

.setting-group{

display:flex;

flex-direction:column;

gap:8px;

min-width:170px;

}

.setting-group label{

color:var(--muted);

font-size:14px;

}

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

.stats-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(160px,1fr));

gap:18px;

margin-bottom:35px;

}

.card{

background:var(--panel);

padding:20px;

border-radius:var(--radius);

text-align:center;

box-shadow:var(--shadow);

transition:.25s;

}

.card:hover{

transform:translateY(-4px);

}

.card span{

display:block;

font-size:14px;

color:var(--muted);

margin-bottom:10px;

}

.card h2{

font-size:30px;

}

/*=========================================================
TYPING PANEL
=========================================================*/

.typing-panel{

background:var(--panel);

padding:30px;

border-radius:var(--radius);

margin-bottom:25px;

box-shadow:var(--shadow);

}

#paragraphContainer{

background:var(--panel2);

padding:30px;

border-radius:12px;

margin-bottom:25px;

min-height:180px;

}

#paragraph{

font-size:34px;

line-height:2;

letter-spacing:.4px;

word-break:break-word;

user-select:none;

}

/*=========================================================
LETTER COLORS
=========================================================*/

.correct{

color:var(--green);

}

.incorrect{

color:var(--red);

}

.current{

background:var(--blue);

color:#000;

border-radius:4px;

padding:2px;

animation:blink .8s infinite;

}

.remaining{

color:#777;

}

@keyframes blink{

50%{

opacity:.4;

}

}

/*=========================================================
TEXTAREA
=========================================================*/

#typingInput{

width:100%;

height:190px;

resize:none;

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

background:#181818;

color:#fff;

padding:20px;

border-radius:12px;

outline:none;

font-family:var(--font);

font-size:26px;

line-height:1.8;

transition:.25s;

}

#typingInput:focus{

border-color:var(--accent);

box-shadow:0 0 0 4px rgba(247,183,49,.15);

}

#typingInput::placeholder{

color:#888;

}/*=========================================================
SHORTCUT BAR
=========================================================*/

.shortcutBar{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:20px;

background:var(--panel);

padding:15px;

border-radius:var(--radius);

margin-bottom:30px;

box-shadow:var(--shadow);

}

.shortcutBar div{

padding:8px 15px;

background:var(--panel2);

border-radius:8px;

font-size:14px;

color:var(--muted);

}

/*=========================================================
CUSTOM PARAGRAPH
=========================================================*/

.custom-section{

background:var(--panel);

padding:30px;

margin-bottom:30px;

border-radius:var(--radius);

box-shadow:var(--shadow);

}

.custom-section h2{

margin-bottom:10px;

font-size:28px;

}

.custom-section p{

margin-bottom:20px;

color:var(--muted);

line-height:1.6;

}

#customText{

width:100%;

min-height:220px;

resize:vertical;

padding:20px;

font-family:var(--font);

font-size:22px;

background:var(--panel2);

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

border-radius:12px;

color:var(--text);

outline:none;

transition:.25s;

}

#customText:focus{

border-color:var(--accent);

}

.custom-buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

margin-top:20px;

}

/*=========================================================
PERFORMANCE GRAPH
=========================================================*/

.performance-section{

margin-bottom:35px;

}

.panel{

background:var(--panel);

padding:25px;

border-radius:var(--radius);

box-shadow:var(--shadow);

}

.panel-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.panel-header h2{

font-size:24px;

}

#graphStatus{

font-size:14px;

color:var(--muted);

}

#speedChart{

width:100%;

height:300px;

background:var(--panel2);

border-radius:12px;

padding:15px;

}

/*=========================================================
ADVANCED STATS
=========================================================*/

.advancedStats{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

gap:25px;

margin-bottom:35px;

}

.infoCard{

background:var(--panel);

padding:25px;

border-radius:var(--radius);

box-shadow:var(--shadow);

}

.infoCard h3{

margin-bottom:18px;

font-size:24px;

}

.infoCard table{

width:100%;

border-collapse:collapse;

}

.infoCard td{

padding:12px;

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

}

.infoCard td:last-child{

text-align:right;

font-weight:bold;

}

/*=========================================================
THEME PANEL
=========================================================*/

.themePanel{

background:var(--panel);

padding:30px;

margin-bottom:35px;

border-radius:var(--radius);

box-shadow:var(--shadow);

}

.themePanel h2{

margin-bottom:20px;

}

.themeButtons{

display:flex;

gap:15px;

flex-wrap:wrap;

}

.themeOption{

min-width:120px;

}

/*=========================================================
SOUND PANEL
=========================================================*/

.soundPanel{

background:var(--panel);

padding:30px;

margin-bottom:35px;

border-radius:var(--radius);

box-shadow:var(--shadow);

display:flex;

flex-wrap:wrap;

gap:30px;

align-items:center;

}

.soundPanel h2{

width:100%;

margin-bottom:10px;

}

.soundPanel label{

display:flex;

align-items:center;

gap:10px;

cursor:pointer;

font-size:17px;

}

.soundPanel input{

width:18px;

height:18px;

}

/*=========================================================
HISTORY
=========================================================*/

.historySection{

background:var(--panel);

padding:30px;

border-radius:var(--radius);

margin-bottom:40px;

box-shadow:var(--shadow);

}

.historyHeader{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:15px;

margin-bottom:20px;

}

.historyHeader h2{

font-size:28px;

}

.historyHeader div{

display:flex;

gap:10px;

flex-wrap:wrap;

}

#historyTable{

width:100%;

border-collapse:collapse;

overflow:hidden;

border-radius:12px;

}

#historyTable thead{

background:var(--accent);

color:#111;

}

#historyTable th{

padding:15px;

}

#historyTable td{

padding:14px;

text-align:center;

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

}

#historyTable tbody tr:hover{

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

transition:.2s;

}

/*=========================================================
MODALS
=========================================================*/

.modal{

display:none;

position:fixed;

inset:0;

background:rgba(0,0,0,.65);

justify-content:center;

align-items:center;

padding:30px;

z-index:999;

}

.modal-content{

background:var(--panel);

padding:35px;

border-radius:18px;

max-width:850px;

width:100%;

box-shadow:var(--shadow);

animation:popup .25s ease;

}

@keyframes popup{

from{

transform:translateY(25px) scale(.95);

opacity:0;

}

to{

transform:translateY(0) scale(1);

opacity:1;

}

}

.resultGrid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(150px,1fr));

gap:20px;

margin:30px 0;

}

.resultGrid div{

background:var(--panel2);

padding:20px;

border-radius:12px;

text-align:center;

}

.resultGrid h3{

margin-bottom:8px;

font-size:16px;

color:var(--muted);

}

.resultGrid p{

font-size:30px;

font-weight:bold;

}

.modalButtons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

margin-top:20px;

}

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

#toast{

position:fixed;

bottom:30px;

right:30px;

padding:16px 24px;

background:var(--green);

color:white;

border-radius:12px;

box-shadow:var(--shadow);

opacity:0;

pointer-events:none;

transform:translateY(20px);

transition:.3s;

z-index:1000;

}

#toast.show{

opacity:1;

transform:translateY(0);

}

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

.footer{

margin-top:40px;

padding:25px;

text-align:center;

background:var(--panel);

border-radius:var(--radius);

color:var(--muted);

line-height:2;

box-shadow:var(--shadow);

}
/*=========================================================
SETTINGS MODAL
=========================================================*/

.settingsContent{

max-width:900px;

}

.modal-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.modal-header h2{

font-size:30px;

}

.closeSettings{

width:45px;

height:45px;

padding:0;

font-size:20px;

border-radius:50%;

}

.settingsGrid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:25px;

}

.settingCard{

background:var(--panel2);

padding:25px;

border-radius:14px;

}

.settingCard h3{

margin-bottom:18px;

}

.settingCard label{

display:flex;

gap:10px;

align-items:center;

margin:12px 0;

cursor:pointer;

}

/*=========================================================
SHORTCUT TABLE
=========================================================*/

.shortcutTable{

width:100%;

border-collapse:collapse;

margin:25px 0;

}

.shortcutTable td{

padding:14px;

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

}

.shortcutTable td:first-child{

font-weight:bold;

width:180px;

color:var(--accent);

}

/*=========================================================
CHECKBOXES
=========================================================*/

input[type=checkbox]{

width:20px;

height:20px;

accent-color:var(--accent);

cursor:pointer;

}

/*=========================================================
ANIMATIONS
=========================================================*/

.fadeIn{

animation:fadeIn .35s;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:none;

}

}

.pop{

animation:pop .25s;

}

@keyframes pop{

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

/*=========================================================
LETTER SPANS
=========================================================*/

#paragraph span{

transition:color .08s ease,
background .08s ease,
transform .08s ease;

}

.correct{

color:var(--green);

}

.incorrect{

color:var(--red);

}

.current{

background:var(--accent);

color:#111;

border-radius:4px;

}

.remaining{

color:#7c7c7c;

}

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

.loading{

opacity:.5;

pointer-events:none;

}

.spinner{

width:42px;

height:42px;

border:4px solid rgba(255,255,255,.2);

border-top-color:var(--accent);

border-radius:50%;

animation:spin 1s linear infinite;

margin:auto;

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1200px){

.stats-grid{

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

}

}

@media(max-width:900px){

.topbar{

flex-direction:column;

align-items:flex-start;

}

.settings{

flex-direction:column;

}

.stats-grid{

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

}

.resultGrid{

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

}

.advancedStats{

grid-template-columns:1fr;

}

.historyHeader{

flex-direction:column;

align-items:flex-start;

}

}

@media(max-width:600px){

body{

padding:15px;

}

.logo h1{

font-size:28px;

}

.stats-grid{

grid-template-columns:1fr;

}

.resultGrid{

grid-template-columns:1fr;

}

.themeButtons{

flex-direction:column;

}

.custom-buttons{

flex-direction:column;

}

.top-controls{

width:100%;

}

.top-controls button{

width:100%;

}

button{

width:100%;

}

#paragraph{

font-size:26px;

line-height:1.8;

}

#typingInput{

font-size:22px;

height:180px;

}

}

/*=========================================================
PRINT
=========================================================*/

@media print{

.topbar,
.settings,
.themePanel,
.soundPanel,
.footer,
.shortcutBar,
button{

display:none !important;

}

body{

background:#fff;

color:#000;

}

}

/*=========================================================
ACCESSIBILITY
=========================================================*/

button:focus,
textarea:focus,
select:focus{

outline:3px solid var(--blue);

outline-offset:2px;

}

@media(prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}