:root{

--surface-rgb:8,13,22;

--ink-rgb:255,255,255;

--bg:#03050a;

--bg-solid:#02040a;

--panel:rgba(var(--surface-rgb),.86);

--panel-strong:rgba(var(--surface-rgb),.94);

--border:rgba(255,255,255,.10);

--border-hover:rgba(255,255,255,.20);

--text:#fff;

--muted:rgba(255,255,255,.56);

--blue:#1683ff;

--blue2:#005eff;

--danger:#ff5265;

--shadow:
0 30px 100px rgba(0,0,0,.55);

--shadow-soft:
0 8px 24px rgba(0,0,0,.18);

--radius:24px;

}


/* =====================================================
   LIGHT MODE — base tokens
   Flips the surface + ink tokens so every rule built on
   rgba(var(--surface-rgb),X) / rgba(var(--ink-rgb),X)
   automatically re-themes, on every page that loads
   this stylesheet.
   ===================================================== */

html.light,
body.light{

--surface-rgb:248,250,255;

--ink-rgb:17,24,39;

--bg:#f5f7fb;

--bg-solid:#eef1f8;

--text:#111827;

--muted:rgba(17,24,39,.58);

--border:rgba(0,0,0,.10);

--border-hover:rgba(0,0,0,.20);

--shadow:
0 30px 100px rgba(20,30,50,.14);

--shadow-soft:
0 8px 24px rgba(20,30,50,.08);

}


*{
box-sizing:border-box;
margin:0;
padding:0;
}


.sr-only{

position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;

}


html,
body{
width:100%;
height:100%;
overflow:hidden;
}


body{

font-family:"DM Sans",sans-serif;

background:var(--bg-solid);

color:var(--text);

transition:background .25s ease,color .25s ease;

}


button,
input,
select{
font:inherit;
}


button{
border:0;
cursor:pointer;
color:inherit;
}


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

.app{

position:relative;

width:100%;
height:100vh;

overflow:hidden;

background:

radial-gradient(
circle at 20% 20%,
rgba(0,105,255,.22),
transparent 35%
),

radial-gradient(
circle at 80% 75%,
rgba(0,55,255,.16),
transparent 40%
),

#03050a;

}


/* =====================================================
BACKGROUND
===================================================== */

.background{

position:absolute;
inset:0;
z-index:0;

overflow:hidden;

}


.bg-gradient{

position:absolute;
inset:-30%;

background:

radial-gradient(
circle at 20% 30%,
#005eff 0%,
transparent 28%
),

radial-gradient(
circle at 75% 20%,
#0b2d91 0%,
transparent 30%
),

radial-gradient(
circle at 60% 80%,
#001f6f 0%,
transparent 32%
),

#02040b;

filter:blur(35px);

animation:
gradientMove 18s ease-in-out infinite alternate;

transform:scale(1.15);

}


@keyframes gradientMove{

0%{
transform:
scale(1.15)
translate(-2%,-2%);
}

50%{
transform:
scale(1.22)
translate(3%,1%);
}

100%{
transform:
scale(1.18)
translate(-1%,4%);
}

}


.custom-bg{

position:absolute;

inset:0;

width:100%;
height:100%;

object-fit:cover;

display:none;

}


.bg-overlay{

position:absolute;
inset:0;

background:

linear-gradient(
180deg,
rgba(0,0,0,.28),
rgba(0,0,0,.60)
),

radial-gradient(
circle at center,
transparent 10%,
rgba(0,0,0,.48) 100%
);

}


/* =====================================================
TOPBAR
===================================================== */

.topbar{

position:absolute;

top:22px;
left:28px;
right:28px;

z-index:20;

display:flex;

align-items:center;

justify-content:space-between;

}


.logo{

font-family:"Space Grotesk";

font-size:25px;

font-weight:700;

letter-spacing:-1.5px;

direction:ltr;

}


.logo span{
color:#3c94ff;
}


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

.top-actions{

display:flex;

align-items:center;

gap:9px;

}


/* =====================================================
RAKKEZ HEADER BUTTONS
Clean + Slight Transparent Glass Style
===================================================== */

.top-actions{

display:flex;

align-items:center;

gap:8px;

}


/* =====================================================
ALL HEADER BUTTONS
===================================================== */

.icon-btn,
.blog-btn,
.language-btn{

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:14px;

/* Slight elegant transparency */
background:
rgba(var(--surface-rgb),.62);

border:
1px solid rgba(var(--ink-rgb),.09);

color:var(--text);

box-shadow:
0 8px 24px rgba(0,0,0,.18);

backdrop-filter:
blur(16px);

-webkit-backdrop-filter:
blur(16px);

transition:
background .2s ease,
border-color .2s ease,
transform .2s ease,
box-shadow .2s ease;

}


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

.icon-btn{

width:46px;

padding:0;

font-size:17px;

}


/* =====================================================
BLOG
===================================================== */

.blog-btn{

min-width:125px;

padding:
0 24px;

font-family:
"Space Grotesk",
sans-serif;

font-size:14px;

font-weight:700;

letter-spacing:.1px;

white-space:nowrap;

}


/* =====================================================
LANGUAGE
===================================================== */

.language-btn{

width:46px;

padding:0;

font-size:19px;

}

.language-icon{

display:inline-flex;

align-items:center;

justify-content:center;

}

.language-icon svg{

display:block;

}


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

.icon-btn:hover,
.blog-btn:hover,
.language-btn:hover{

transform:
translateY(-1px);

background:
rgba(12,20,32,.76);

border-color:
rgba(var(--ink-rgb),.16);

box-shadow:
0 12px 30px rgba(0,0,0,.24);

}


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

.icon-btn:active,
.blog-btn:active,
.language-btn:active{

transform:
scale(.97);

background:
rgba(var(--surface-rgb),.78);

}


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

@media(max-width:600px){

.top-actions{

gap:6px;

}

.icon-btn{

width:42px;

height:42px;

border-radius:13px;

}

.language-btn{

height:42px;

width:42px;

padding:0;

border-radius:13px;

font-size:16px;

}

.blog-btn{

height:42px;

min-width:115px;

padding:
0 20px;

border-radius:13px;

font-size:13px;

}

}


/* =====================================================
LIGHT MODE
===================================================== */

body.light .icon-btn,
body.light .blog-btn,
body.light .language-btn{

background:
rgba(var(--ink-rgb),.68);

border-color:
rgba(0,0,0,.10);

color:
rgba(17,24,39,.85);

box-shadow:
0 8px 24px rgba(0,0,0,.06);

}


body.light .icon-btn:hover,
body.light .blog-btn:hover,
body.light .language-btn:hover{

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

border-color:
rgba(0,0,0,.16);

}


/* =====================================================
CONTROLS
PERFECTLY CENTERED UNDER TIMER
===================================================== */

.controls{

width:100%;

margin-top:30px;

display:flex;

align-items:center;

justify-content:center;

gap:11px;

}


/* =====================================================
START
SMALLER
===================================================== */

.primary{

min-width:130px;

height:46px;

padding:
0 21px;

border-radius:14px;

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

color:#05070b;

font-weight:700;

display:flex;

align-items:center;

justify-content:center;

transition:
transform .25s ease,
box-shadow .25s ease;

}


.primary:hover{

transform:
translateY(-2px);

box-shadow:
0 20px 50px
rgba(0,95,255,.20);

}


/* =====================================================
RESET
SMALLER
===================================================== */

.secondary{

height:46px;

padding:
0 16px;

border-radius:14px;

background:
rgba(var(--surface-rgb),.62);

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

backdrop-filter:
blur(18px);

display:flex;

align-items:center;

justify-content:center;

transition:
background .25s ease,
border-color .25s ease,
transform .25s ease;

}


.secondary:hover{

background:
rgba(20,29,45,.75);

border-color:
var(--border-hover);

transform:
translateY(-2px);

}


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

@media(max-width:450px){

.controls{

width:100%;

justify-content:center;

}

.primary{

flex:1;

max-width:190px;

height:44px;

}

.secondary{

width:50px;

height:44px;

padding:0;

flex-shrink:0;

}

}


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

.main{

position:relative;

z-index:5;

width:100%;
height:100%;

display:flex;

align-items:center;

justify-content:center;

padding:
90px 25px 100px;

}


.timer-card{

width:min(760px,94vw);

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

padding:52px 60px 44px;

border-radius:32px;

background:
rgba(var(--surface-rgb),.38);

border:
1px solid rgba(var(--ink-rgb),.08);

box-shadow:
0 40px 120px rgba(0,0,0,.35);

backdrop-filter:
blur(28px);

-webkit-backdrop-filter:
blur(28px);

}


.mode{

font-size:12px;

font-weight:700;

letter-spacing:3px;

color:rgba(var(--ink-rgb),.55);

margin-bottom:18px;

direction:ltr;

}


/* =====================================================
TIMER
SMALLER + CLEARER NUMBER SPACING
===================================================== */

.timer{

font-family:"Space Grotesk";

font-size:
clamp(92px,13vw,170px);

line-height:.88;

/* More visible space between timer numbers */
letter-spacing:2px;

font-weight:600;

text-shadow:
0 15px 70px rgba(0,0,0,.6);

user-select:none;

direction:ltr;

}


.timer-label{

margin-top:23px;

font-size:14px;

color:var(--muted);

}


/* =====================================================
CURRENT TASK
===================================================== */

.current-task{

margin-top:14px;

min-height:24px;

font-size:12px;

font-weight:600;

color:rgba(var(--ink-rgb),.72);

letter-spacing:.5px;

}


.current-task span{

padding:
6px 12px;

border-radius:10px;

background:
rgba(var(--ink-rgb),.045);

border:
1px solid rgba(var(--ink-rgb),.07);

}


/* =====================================================
PROGRESS
===================================================== */

.progress-wrap{

width:min(450px,75vw);

height:4px;

background:
rgba(var(--ink-rgb),.11);

border-radius:20px;

overflow:hidden;

margin-top:20px;

}


.progress{

height:100%;

width:0%;

background:
linear-gradient(
90deg,
#006cff,
#48a4ff
);

border-radius:20px;

transition:
width .5s linear;

direction:ltr;

}


/* =====================================================
CONTROLS
START + RESET CENTERED
===================================================== */

.controls{

margin-top:30px;

display:flex;

align-items:center;

justify-content:center;

gap:11px;

width:100%;

}


.primary{

min-width:130px;

height:46px;

padding:
0 21px;

border-radius:14px;

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

color:#05070b;

font-weight:700;

transition:.25s;

}


.primary:hover{

transform:
translateY(-2px);

box-shadow:
0 20px 50px
rgba(0,95,255,.2);

}


.secondary{

height:46px;

padding:
0 16px;

border-radius:14px;

background:
rgba(var(--surface-rgb),.62);

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

backdrop-filter:
blur(18px);

transition:.25s;

}


.secondary:hover{

background:
rgba(20,29,45,.75);

border-color:
var(--border-hover);

}


/* =====================================================
BOTTOM
===================================================== */

.bottom-bar{

position:absolute;

bottom:25px;

left:28px;
right:28px;

z-index:20;

display:flex;

align-items:center;

justify-content:space-between;

}


.stats{

display:flex;

gap:9px;

}


.stat{

min-width:105px;

padding:
12px 15px;

border:
1px solid rgba(var(--ink-rgb),.09);

border-radius:16px;

background:
rgba(var(--surface-rgb),.5);

backdrop-filter:
blur(18px);

}


.stat-title{

font-size:10px;

letter-spacing:1px;

text-transform:uppercase;

color:var(--muted);

}


.stat-value{

margin-top:4px;

font-size:15px;

font-weight:700;

}


/* =====================================================
AMBIENT BUTTON
===================================================== */

.ambient-btn{

height:47px;

padding:
0 18px;

border-radius:16px;

border:
1px solid rgba(var(--ink-rgb),.09);

background:
rgba(var(--surface-rgb),.55);

backdrop-filter:
blur(18px);

font-size:13px;

font-weight:600;

transition:.25s;

}


.ambient-btn:hover{

border-color:
#287dff;

}


/* =====================================================
OVERLAY
===================================================== */

.overlay{

position:fixed;

inset:0;

z-index:100;

display:none;

align-items:center;

justify-content:center;

padding:20px;

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

backdrop-filter:
blur(15px);

}


.overlay.show{

display:flex;

}


/* =====================================================
SETTINGS PANEL
===================================================== */

.panel{

width:min(560px,96vw);

max-height:90vh;

overflow:auto;

background:
rgba(var(--surface-rgb),.92);

border:
1px solid rgba(var(--ink-rgb),.12);

border-radius:28px;

box-shadow:
var(--shadow);

padding:24px;

animation:
panelIn .3s ease;

}


.panel::-webkit-scrollbar{
width:4px;
}


.panel::-webkit-scrollbar-thumb{

background:
rgba(var(--ink-rgb),.15);

border-radius:10px;

}


@keyframes panelIn{

from{

opacity:0;

transform:
translateY(15px)
scale(.98);

}

to{

opacity:1;

transform:none;

}

}


.panel-head{

display:flex;

align-items:center;

justify-content:space-between;

margin-bottom:22px;

}


.panel-title{

font-family:"Space Grotesk";

font-size:23px;

font-weight:600;

}


.panel-subtitle{

margin-top:4px;

font-size:11px;

color:var(--muted);

}


.close{

width:38px;
height:38px;

border-radius:12px;

background:
rgba(var(--ink-rgb),.07);

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

}


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

.section{

margin-top:23px;

}


.section-title{

font-size:11px;

color:var(--muted);

text-transform:uppercase;

letter-spacing:1.5px;

margin-bottom:11px;

}


.setting{

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

padding:15px 0;

border-bottom:
1px solid rgba(var(--ink-rgb),.07);

}


.setting:last-child{
border-bottom:0;
}


.setting-name{

font-size:14px;

font-weight:600;

}


.setting-description{

margin-top:3px;

font-size:11px;

color:var(--muted);

}


.number-input{

width:85px;

height:39px;

padding:
0 10px;

color:var(--text);

background:
rgba(var(--ink-rgb),.06);

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

border-radius:11px;

outline:none;

text-align:center;

}


.number-input:focus{

border-color:
#2383ff;

}


.goal-input-wrap{

display:flex;

align-items:center;

gap:8px;

color:var(--muted);

font-size:11px;

}


/* =====================================================
TOGGLE
===================================================== */

.toggle{

position:relative;

width:47px;
height:27px;

border-radius:30px;

background:
rgba(var(--ink-rgb),.12);

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

transition:.25s;

}


.toggle::after{

content:"";

position:absolute;

top:4px;
left:4px;

width:17px;
height:17px;

border-radius:50%;

background:white;

transition:.25s;

}


.toggle.active{

background:
#1478ff;

}


.toggle.active::after{

transform:
translateX(20px);

}


/* =====================================================
VOLUME
===================================================== */

.volume-control{

display:flex;

align-items:center;

gap:10px;

}


.volume-control input[type="range"]{

width:100px;

accent-color:#1478ff;

cursor:pointer;

}


#alarmVolumeValue{

min-width:38px;

text-align:right;

font-size:12px;

color:rgba(var(--ink-rgb),.65);

font-weight:600;

}


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

.select-input{

height:40px;

min-width:120px;

padding:
0 10px;

color:var(--text);

background:
rgba(var(--ink-rgb),.06);

border:
1px solid rgba(var(--ink-rgb),.10);

border-radius:11px;

outline:none;

cursor:pointer;

}


.select-input:hover{

border-color:
rgba(var(--ink-rgb),.20);

}


.select-input:focus{

border-color:
#1478ff;

}


.select-input option{

background:rgb(var(--surface-rgb));

color:var(--text);

}


/* =====================================================
ALARM UPLOAD
===================================================== */

.alarm-upload{

margin-top:14px;

width:100%;

min-height:72px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:4px;

border:
1px dashed rgba(var(--ink-rgb),.16);

border-radius:15px;

background:
rgba(var(--ink-rgb),.025);

cursor:pointer;

transition:.25s;

}


.alarm-upload:hover{

border-color:
#1478ff;

background:
rgba(20,120,255,.06);

}


.alarm-upload strong{

font-size:12px;

color:var(--text);

}


.alarm-upload span{

font-size:10px;

color:rgba(var(--ink-rgb),.45);

}


.media-upload-status{

margin-top:10px;

font-size:13px;

color:rgba(var(--ink-rgb),.45);

transition:.2s ease;

}


.media-upload-status.uploaded{

color:#6ee7b7;

font-weight:600;

}


/* =====================================================
ACCOUNT
===================================================== */

.account-card{

display:flex;

align-items:center;

gap:12px;

padding:13px;

margin-top:9px;

border:
1px solid rgba(var(--ink-rgb),.08);

border-radius:15px;

background:
rgba(var(--ink-rgb),.035);

}


.account-icon{

width:38px;
height:38px;

display:flex;

align-items:center;
justify-content:center;

border-radius:11px;

font-weight:700;

}


.spotify-icon{

background:
rgba(30,215,96,.12);

color:#1ed760;

}


.google-icon{

background:
rgba(66,133,244,.12);

color:#66a0ff;

}


.account-info{

display:flex;

flex-direction:column;

gap:3px;

flex:1;

}


.account-info strong{
font-size:13px;
}


.account-info span{

font-size:10px;

color:var(--muted);

}


.account-button{

padding:
8px 13px;

border-radius:10px;

background:
rgba(var(--ink-rgb),.08);

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

font-size:11px;

}


.account-button.connected{

background:
rgba(30,215,96,.10);

color:#54df86;

}


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

.task-panel{

width:min(600px,96vw);

}


.task-input-row{

display:flex;

gap:8px;

}


.task-input-row .media-input{

flex:1;

}


.task-add{

width:48px;

border-radius:13px;

background:
#1478ff;

font-size:22px;

}


.task-list{

margin-top:18px;

display:flex;

flex-direction:column;

gap:8px;

}


.task{

display:flex;

align-items:center;

gap:11px;

padding:13px;

border:
1px solid rgba(var(--ink-rgb),.08);

border-radius:14px;

background:
rgba(var(--ink-rgb),.035);

transition:.2s;

}


.task:hover{

border-color:
rgba(var(--ink-rgb),.18);

}


.task-check{

width:21px;
height:21px;

border-radius:7px;

border:
1px solid rgba(var(--ink-rgb),.2);

background:
transparent;

display:flex;

align-items:center;
justify-content:center;

font-size:12px;

}


.task.completed .task-check{

background:
#1478ff;

border-color:
#1478ff;

}


.task-text{

flex:1;

font-size:13px;

}


.task.completed .task-text{

text-decoration:
line-through;

color:
rgba(var(--ink-rgb),.35);

}


.task-focus{

padding:
5px 8px;

border-radius:8px;

font-size:9px;

color:var(--muted);

background:
rgba(var(--ink-rgb),.05);

}


.task-delete{

color:
rgba(var(--ink-rgb),.35);

background:none;

font-size:16px;

}


.task-empty{

text-align:center;

padding:40px 10px;

font-size:12px;

line-height:1.8;

color:var(--muted);

}


/* =====================================================
MEDIA
===================================================== */

.media-tabs{

display:grid;

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

gap:8px;

margin-bottom:18px;

}


.media-tab{

padding:12px 5px;

border-radius:13px;

background:
rgba(var(--ink-rgb),.05);

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

color:var(--muted);

font-size:12px;

}


.media-tab.active{

color:var(--text);

border-color:
#2383ff;

background:
rgba(15,103,255,.16);

}


.media-content{

display:none;

}


.media-content.active{

display:block;

}


.media-input{

width:100%;

height:46px;

padding:
0 13px;

color:var(--text);

background:
rgba(var(--ink-rgb),.05);

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

border-radius:13px;

outline:none;

}


.media-input::placeholder{

color:
rgba(var(--ink-rgb),.38);

}


.media-button{

width:100%;

margin-top:10px;

height:46px;

border-radius:13px;

background:
#1478ff;

font-weight:700;

}


.embed-container{

margin-top:15px;

width:100%;

aspect-ratio:16/9;

border-radius:15px;

overflow:hidden;

display:none;

}


.embed-container.show{

display:block;

}


.embed-container iframe{

width:100%;
height:100%;

border:0;

}


.oauth-user{

margin-bottom:10px;

padding:10px 12px;

border-radius:11px;

background:
rgba(var(--ink-rgb),.035);

border:
1px solid rgba(var(--ink-rgb),.06);

font-size:11px;

color:var(--muted);

}


/* =====================================================
LOCAL MEDIA
===================================================== */

.file-label{

min-height:100px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

border:
1px dashed rgba(var(--ink-rgb),.2);

border-radius:16px;

background:
rgba(var(--ink-rgb),.035);

cursor:pointer;

color:var(--muted);

transition:.25s;

}


.file-label:hover{

border-color:
#2484ff;

}


.file-label strong{

color:var(--text);

margin-bottom:5px;

}


#mediaFile{

display:none;

}


#audioPlayer,
#videoPlayer{

width:100%;

margin-top:12px;

display:none;

}


#videoPlayer{

max-height:260px;

border-radius:15px;

background:#000;

}


.now-playing{

display:none;

align-items:center;

gap:12px;

margin-top:15px;

padding:12px;

border-radius:15px;

background:
rgba(var(--ink-rgb),.05);

}


.now-playing.show{

display:flex;

}


.album{

width:48px;
height:48px;

display:flex;

align-items:center;
justify-content:center;

border-radius:11px;

background:#101725;

font-size:20px;

}


/* =====================================================
AMBIENT
===================================================== */

.ambient-panel{

width:min(900px,96vw);

}


.ambient-grid{

display:grid;

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

gap:14px;

}


.ambient-card{

position:relative;

height:190px;

border-radius:19px;

overflow:hidden;

border:
1px solid rgba(var(--ink-rgb),.10);

cursor:pointer;

transition:.3s;

}


.ambient-card:hover{

transform:
translateY(-4px);

border-color:
rgba(var(--ink-rgb),.3);

}


.ambient-card.selected{

border:
2px solid #2586ff;

}


.ambient-card img{

width:100%;
height:100%;

object-fit:cover;

}


.ambient-card::after{

content:"";

position:absolute;

inset:0;

background:
linear-gradient(
transparent 40%,
rgba(0,0,0,.75)
);

}


.ambient-name{

position:absolute;

left:14px;
bottom:13px;

z-index:2;

font-size:13px;

font-weight:700;

}


.upload-ambient{

margin-top:15px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

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

border-radius:13px;

cursor:pointer;

color:var(--muted);

font-size:12px;

}


/* =====================================================
DANGER
===================================================== */

.danger-button{

width:100%;

height:46px;

border-radius:13px;

background:
rgba(255,70,70,.09);

border:
1px solid rgba(255,70,70,.18);

color:#ff7777;

font-weight:700;

}


.confirm-panel{

max-width:390px;

text-align:center;

}


.confirm-icon{

font-size:42px;

margin-bottom:15px;

}


.confirm-description{

color:var(--muted);

font-size:13px;

line-height:1.6;

margin:
12px 0 22px;

}


.confirm-actions{

display:flex;

gap:9px;

}


.confirm-actions > *{

flex:1;

}


.danger-confirm{

height:54px;

border-radius:16px;

background:
#ff4d5f;

font-weight:700;

}


/* =====================================================
FOCUS ONLY
===================================================== */

.focus-exit{

position:fixed;

top:22px;

right:28px;

z-index:300;

display:none;

height:42px;

padding:
0 15px;

border-radius:13px;

background:
rgba(var(--surface-rgb),.62);

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

backdrop-filter:
blur(18px);

font-size:11px;

}


body.focus-only .topbar,
body.focus-only .bottom-bar{

display:none;

}


body.focus-only .focus-exit{

display:block;

}


body.focus-only .main{

padding:
0;

}


body.focus-only .timer-card{

transform:
scale(1.04);

}


/* =====================================================
LIGHT MODE — component-level overrides
(base tokens --text/--muted/--border/--surface-rgb/--ink-rgb
are already flipped at the top of this file)
===================================================== */

body.light .app{

background:
radial-gradient(
circle at 20% 20%,
rgba(75,150,255,.35),
transparent 35%
),

#f5f7fb;

}


body.light .bg-gradient{

background:

radial-gradient(
circle at 25% 25%,
rgba(90,155,255,.30) 0%,
transparent 40%
),

#f5f7fb;

opacity:1;

}


body.light .bg-overlay{

background:
linear-gradient(
180deg,
rgba(255,255,255,.1),
rgba(255,255,255,.55)
);

}


body.light .panel{

background:
rgba(248,250,255,.95);

border-color:
rgba(0,0,0,.10);

}


body.light .icon-btn,
body.light .blog-btn,
body.light .language-btn,
body.light .secondary,
body.light .stat,
body.light .ambient-btn{

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

border-color:
rgba(0,0,0,.10);

color:
var(--text);

}


body.light .media-input,
body.light .number-input,
body.light .select-input{

color:#111827;

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

}


/* =====================================================
RTL SUPPORT
===================================================== */

html[dir="rtl"]{

direction:rtl;

}


html[dir="rtl"] body{

direction:rtl;

}


html[dir="ltr"]{

direction:ltr;

}


html[dir="ltr"] body{

direction:ltr;

}


/* Keep RakkeZ logo normal */

.logo{

direction:ltr;

}


/* Keep technical UI LTR */

.timer,
.progress,
.mode{

direction:ltr;

}


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

@media(max-width:700px){

.topbar{

left:15px;
right:15px;
top:15px;

}


.top-actions{

gap:5px;

}


.icon-btn{

width:39px;
height:39px;

}


.language-btn{

height:39px;

width:39px;

padding:0;

font-size:15px;

}


.blog-btn{

height:39px;

min-width:115px;

padding:
0 20px;

font-size:13px;

}


.main{

padding:
70px 15px 150px;

}


.timer{

font-size:
clamp(78px,21vw,118px);

/* Clear spacing on mobile too */
letter-spacing:1px;

}


.bottom-bar{

left:15px;
right:15px;
bottom:15px;

flex-direction:column;

gap:10px;

align-items:stretch;

}


.stats{

display:grid;

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

}


.stat{

min-width:0;

padding:10px;

}


.ambient-btn{

width:100%;

}


.ambient-grid{

grid-template-columns:
1fr 1fr;

}


.ambient-card{

height:145px;

}


.controls{

width:100%;

justify-content:center;

}


.primary{

flex:0 1 135px;

height:44px;

}


.secondary{

flex:0 0 auto;

height:44px;

}

}


/* =====================================================
VERY SMALL MOBILE
===================================================== */

@media(max-width:450px){

.top-actions .icon-btn:nth-child(4){

display:none;

}


.controls{

width:100%;

justify-content:center;

}


.primary{

flex:1;

min-width:0;

height:44px;

}


.secondary{

width:50px;

height:44px;

padding:0;

}


.ambient-grid{

grid-template-columns:
1fr;

}

}


/* =====================================================
   RAKKEZ — APPLE GLASS UPDATES MODAL
===================================================== */

.updates-modal {

    position: fixed;
    inset: 0;

    z-index: 999999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;

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

    backdrop-filter:
        blur(24px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(140%);

    box-sizing: border-box;

}

.updates-modal.show {

    display: flex;

}


/* =====================================================
   GLASS PANEL
===================================================== */

.updates-box,
.updates-modal-content {

    position: relative;

    width: min(540px, 100%);

    max-height: min(720px, 88vh);

    overflow-y: auto;

    padding: 30px;

    box-sizing: border-box;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(var(--ink-rgb),.105),
            rgba(var(--ink-rgb),.045)
        );

    border:
        1px solid rgba(var(--ink-rgb),.16);

    box-shadow:
        0 35px 100px rgba(0,0,0,.48),
        inset 0 1px 0 rgba(var(--ink-rgb),.08);

    backdrop-filter:
        blur(32px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(32px)
        saturate(150%);

    color: var(--text);

    animation:
        updatesPanelIn .32s cubic-bezier(.22,1,.36,1);

}


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

.updates-box::-webkit-scrollbar,
.updates-modal-content::-webkit-scrollbar {

    width: 5px;

}

.updates-box::-webkit-scrollbar-track,
.updates-modal-content::-webkit-scrollbar-track {

    background: transparent;

}

.updates-box::-webkit-scrollbar-thumb,
.updates-modal-content::-webkit-scrollbar-thumb {

    background:
        rgba(var(--ink-rgb),.16);

    border-radius: 20px;

}


/* =====================================================
   PANEL ANIMATION
===================================================== */

@keyframes updatesPanelIn {

    from {

        opacity: 0;

        transform:
            translateY(12px)
            scale(.97);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


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

.updates-header {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    margin-bottom: 24px;

    padding-right: 50px;

}


/* =====================================================
   NEW BADGE
===================================================== */

.updates-badge {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: fit-content;

    margin-bottom: 13px;

    padding: 6px 10px;

    border-radius: 9px;

    background:
        rgba(20,120,255,.14);

    border:
        1px solid rgba(80,160,255,.22);

    color:
        #72b4ff;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =====================================================
   TITLE
===================================================== */

.updates-title,
.updates-header h2 {

    margin: 0;

    color: var(--text);

    font-family:
        "Space Grotesk",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    font-size: 26px;

    font-weight: 650;

    line-height: 1.2;

    letter-spacing: -.6px;

}


/* =====================================================
   DESCRIPTION
===================================================== */

.updates-description,
.updates-header p {

    margin: 9px 0 0;

    max-width: 440px;

    color:
        rgba(var(--ink-rgb),.58);

    font-family:
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    font-size: 13px;

    line-height: 1.6;

}


/* =====================================================
   CLOSE BUTTON
===================================================== */

.updates-close {

    position: absolute;

    top: 0;
    right: 0;

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid rgba(var(--ink-rgb),.10);

    border-radius: 50%;

    background:
        rgba(var(--ink-rgb),.075);

    color:
        rgba(var(--ink-rgb),.82);

    font-size: 20px;

    line-height: 1;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;

}

.updates-close:hover {

    background:
        rgba(var(--ink-rgb),.13);

    border-color:
        rgba(var(--ink-rgb),.18);

    transform:
        scale(1.04);

}

.updates-close:active {

    transform:
        scale(.94);

}


/* =====================================================
   UPDATE LIST
===================================================== */

.update-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


/* =====================================================
   UPDATE ITEM — APPLE GLASS
===================================================== */

.update-item {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    width: 100%;

    box-sizing: border-box;

    padding: 15px;

    border:
        1px solid rgba(var(--ink-rgb),.085);

    border-radius: 18px;

    background:
        rgba(var(--ink-rgb),.045);

    box-shadow:
        inset 0 1px 0 rgba(var(--ink-rgb),.035);

    transition:
        background .22s ease,
        border-color .22s ease,
        transform .22s ease;

}

.update-item:hover {

    background:
        rgba(var(--ink-rgb),.065);

    border-color:
        rgba(var(--ink-rgb),.14);

    transform:
        translateY(-1px);

}


/* =====================================================
   UPDATE ICON
===================================================== */

.update-icon {

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background:
        rgba(20,120,255,.12);

    border:
        1px solid rgba(80,160,255,.14);

    color:
        #72b4ff;

    font-size: 16px;

}


/* =====================================================
   UPDATE INFO
===================================================== */

.update-info {

    min-width: 0;

    flex: 1;

}


/* =====================================================
   UPDATE TITLE
===================================================== */

.update-item h3 {

    margin: 1px 0 5px;

    color:
        rgba(var(--ink-rgb),.94);

    font-family:
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    font-size: 14px;

    font-weight: 650;

    line-height: 1.4;

}


/* =====================================================
   UPDATE DESCRIPTION
===================================================== */

.update-item p {

    margin: 0;

    color:
        rgba(var(--ink-rgb),.52);

    font-family:
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    font-size: 12px;

    line-height: 1.6;

}


/* =====================================================
   DONE BUTTON
===================================================== */

#updatesDone,
.updates-done {

    width: 100%;

    height: 48px;

    margin-top: 18px;

    border:
        1px solid rgba(var(--ink-rgb),.12);

    border-radius: 15px;

    background:
        linear-gradient(
            180deg,
            #2386ff,
            #1478ff
        );

    color: #fff;

    font-family:
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .1px;

    cursor: pointer;

    box-shadow:
        0 8px 25px rgba(20,120,255,.18),
        inset 0 1px 0 rgba(var(--ink-rgb),.18);

    transition:
        transform .2s ease,
        filter .2s ease,
        box-shadow .2s ease;

}

#updatesDone:hover,
.updates-done:hover {

    filter:
        brightness(1.08);

    transform:
        translateY(-1px);

    box-shadow:
        0 12px 30px rgba(20,120,255,.25),
        inset 0 1px 0 rgba(var(--ink-rgb),.20);

}

#updatesDone:active,
.updates-done:active {

    transform:
        scale(.98);

}


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

@media (max-width: 600px) {

    .updates-modal {

        padding: 14px;

    }

    .updates-box,
    .updates-modal-content {

        width: 100%;

        max-height: 90vh;

        padding: 22px;

        border-radius: 24px;

    }

    .updates-header {

        margin-bottom: 20px;

        padding-right: 46px;

    }

    .updates-title,
    .updates-header h2 {

        font-size: 22px;

        letter-spacing: -.4px;

    }

    .updates-description,
    .updates-header p {

        font-size: 12px;

    }

    .updates-close {

        width: 36px;
        height: 36px;

    }

    .update-list {

        gap: 8px;

    }

    .update-item {

        gap: 11px;

        padding: 13px;

        border-radius: 16px;

    }

    .update-icon {

        width: 36px;
        height: 36px;

        flex-basis: 36px;

        border-radius: 11px;

    }

    .update-item h3 {

        font-size: 13px;

    }

    .update-item p {

        font-size: 11px;

    }

    #updatesDone,
    .updates-done {

        height: 46px;

        border-radius: 14px;

    }

}