*{
margin:0;
padding:0;
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}

html,
body{
width:100%;
height:100%;
overflow:hidden;
font-family:'Tajawal',sans-serif;
background:#0f1115;
touch-action:manipulation;
}

/* =========================
Background
========================= */

.background{
position:fixed;
inset:0;

background:  
    radial-gradient(  
        circle at top,  
        #232c3f 0%,  
        #161b25 40%,  
        #0f1115 100%  
    );  

z-index:0;

}

/* =========================
App
========================= */

.app{
position:relative;
width:100%;
height:100%;
z-index:1;
}

/* =========================
Topbar
========================= */

.topbar{
position:fixed;

bottom:12px;
left:50%;  

transform:translateX(-50%);  

z-index:1000;

}

.toolbar{

display:grid;  

grid-template-columns:  
    repeat(5,48px);  

justify-content:center;  

gap:10px;  

padding:14px;  

border-radius:28px;  

background:rgba(20,24,33,.82);  

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


box-shadow:  
    0 12px 40px rgba(0,0,0,.35),  
    inset 0 1px 0 rgba(255,255,255,.05);

}

/* =========================
Tools
========================= */

.tool{
width:48px;
height:48px;

border:none;  
outline:none;  

border-radius:18px;  

background:transparent;  

color:#dce1eb;  

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

font-size:18px;  

cursor:pointer;  

transition:.18s ease;

}

.tool:hover{
background:rgba(255,255,255,.08);
}

.tool.active{

background:#2b84ff;  
color:#fff;  

box-shadow:  
    0 8px 20px rgba(43,132,255,.4);

}

.tool.danger:hover{
background:rgba(255,59,48,.12);
color:#ff453a;
}

.divider{
width:1px;
height:28px;

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

}

/* =========================
Color Picker Button
========================= */

.circle-switch{

align-items:center;  

display:flex;  

justify-content:center;  

position:relative;  

width:48px;  
height:48px;  

border-radius:18px;  

background:transparent;  

border:none;  

transition:.18s ease;  

overflow:hidden;  

cursor:pointer;

}

.circle-switch:hover{
background:rgba(255,255,255,.08);
}

.circle-switch .svg{

color:#dce1eb;  

font-size:20px;  

pointer-events:none;  

transition:.18s ease;

}

#colorInput{

position:absolute;  

inset:0;  

width:100%;  
height:100%;  

opacity:0;  

cursor:pointer;

}

/* =========================
Board
========================= */

.board-wrapper{

position:absolute;

left:50%;
top:0;

transform:translateX(-50%);

width:min(96vw,860px);

/* هنا التعديل الحقيقي */
height:calc(100vh - 170px);

max-height:860px;

border-radius:34px;

overflow:hidden;

}

/* =========================
White Surface
========================= */

.board-surface{

position:absolute;  
inset:0;  

background:#ffffff;  

border-radius:34px;  

box-shadow:  
    0 25px 60px rgba(0,0,0,.35),  
    inset 0 1px 0 rgba(255,255,255,.8);  

z-index:1;

}

/* =========================
Canvas
========================= */

#mainCanvas,
#tempCanvas{

position:absolute;  
inset:0;  

width:100%;  
height:100%;

}

/* الكانفس الأساسي */
#mainCanvas{
z-index:2;
}

#backgroundPicker,
#drawColorPicker{

position:absolute;  

width:1px;  
height:1px;  

opacity:0;  

overflow:hidden;

}

/* طبقة المعاينة */
#tempCanvas{
z-index:3;

pointer-events:none;

}

/* =========================
Shapes Modal
========================= */

.shapes-modal{

position:fixed;

left:0;
right:0;

margin:auto;

bottom:20px;

width:min(360px,92vw);

border-radius:32px;

background:rgba(20,24,33,.94);

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

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

box-shadow:
0 25px 70px rgba(0,0,0,.45),
inset 0 1px 0 rgba(255,255,255,.04);

overflow:hidden;

z-index:5000;

animation:popup .22s cubic-bezier(.2,.8,.2,1);

}
.hidden{
display:none;
}

/* =========================
Shapes Header
========================= */

.shapes-header{

height:70px;  

padding-inline:20px;  

display:flex;  
align-items:center;  
justify-content:space-between;  

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

color:#fff;  

font-size:18px;  
font-weight:700;

}

.shapes-header button{

width:42px;  
height:42px;  

border:none;  

border-radius:14px;  

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

color:#fff;  

cursor:pointer;  

transition:.18s ease;

}

.shapes-header button:hover{
background:rgba(255,255,255,.12);
}

/* =========================
Shapes Grid
========================= */

.shapes-grid{

padding:16px;  

display:grid;  

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

gap:12px;  

max-height:38vh;  

overflow-y:auto;  

overflow-x:hidden;  

overscroll-behavior:contain;  

-webkit-overflow-scrolling:touch;  

touch-action:pan-y;

}

.shape{

touch-action:auto;  

height:58px;  

border:none;  
outline:none;  

border-radius:18px;  

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

color:#fff;  

font-size:22px;  

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

cursor:pointer;  

transition:.18s ease;

}

.shape:hover{

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

transform:translateY(-2px);

}

.shape:active{
transform:scale(.96);
}

/* =========================
Popup Animation
========================= */

@keyframes popup{

from{

opacity:0;

transform:
translateY(60px)
scale(.92);

}

to{

opacity:1;

transform:
translateY(0)
scale(1);

}

}
/* =========================
Mobile
========================= */

@media(max-width:700px){

.toolbar{  

display:grid;  

grid-template-columns:  
    repeat(5,42px);  

justify-content:center;  

gap:8px;  

padding:12px;

}

.tool{  
    width:42px;  
    height:42px;  

    border-radius:14px;  

    font-size:16px;  
}  

.left-panel{  
    left:10px;  
}  

.colors{  
    padding:10px 8px;  
}  

.color{  
    width:30px;  
    height:30px;  
}  










.board-surface{  
    border-radius:24px;  
}  

.shape{  
height:52px;  
border-radius:16px;

}

}

.tool,
.circle-switch,
.shape,
.color{
will-change: transform;
transform: translateZ(0);
}

#mainCanvas,
#tempCanvas{
touch-action:none;
image-rendering:auto;
}

/* =========================
Top Size Popup
========================= */

.size-popup{

position:fixed;

bottom:95px;
left:50%;

transform:translateX(-50%);

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

padding:14px 18px;

width:min(320px,92vw);

border-radius:24px;

background:rgba(20,24,33,.92);

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

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

box-shadow:
0 18px 45px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.05);

z-index:6000;

animation:sizePopupShow .18s ease;

}

.size-popup.hidden{
display:none;
}

.size-title{

color:#fff;  

font-size:15px;  

white-space:nowrap;

}

#topBrushSize{

width:160px;  

appearance:none;  
-webkit-appearance:none;  

height:4px;  

border-radius:20px;  

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

touch-action:auto;

}

#topBrushSize::-webkit-slider-thumb{

appearance:none;  
-webkit-appearance:none;  

width:20px;  
height:20px;  

border-radius:50%;  

background:#2b84ff;  

border:3px solid #fff;  

touch-action:auto;

}

#sizeValue{

color:#2b84ff;  

font-size:16px;  
font-weight:700;  

min-width:24px;  

text-align:center;

}

#topBrushSize{
touch-action:pan-x !important;
}

#topBrushSize{
touch-action:pan-x !important;
-webkit-appearance:none;
}

#topBrushSize::-webkit-slider-thumb{
cursor:pointer;
}

.shapes-grid::-webkit-scrollbar{
display:none;
}

/* =========================
Save Dialog
========================= */

.save-dialog{

position:fixed;  
inset:0;  

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

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

z-index:9999;

}

.save-dialog.hidden{
display:none;
}

.save-box{

width:90%;  
max-width:340px;  

background:#fff;  

border-radius:24px;  

padding:22px;  

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

animation:popup .18s ease;

}

.save-box h3{

margin:0 0 18px;  

font-size:20px;  
text-align:center;

}

.save-box input{

width:100%;  

height:52px;  

border:none;  

outline:none;  

border-radius:16px;  

background:#f2f4f7;  

padding:0 16px;  

font-size:16px;  

margin-bottom:18px;

}

.save-actions{

display:flex;  
gap:12px;

}

.save-actions button{

flex:1;  

height:48px;  

border:none;  

border-radius:16px;  

font-size:15px;  

font-weight:700;  

cursor:pointer;

}

#btnSubmit{

background:#2b84ff;  
color:#fff;

}

#btnCancel{

background:#eceff3;  
color:#111;

}

@keyframes popup{

from{  

    transform:scale(.9);  
    opacity:0;  
}  

to{  

    transform:scale(1);  
    opacity:1;  
}

}


.shape{
color:#ffffff;
}

.shape svg{

width:28px;
height:28px;

stroke:currentColor;

stroke-width:2.2;

fill:none;

stroke-linecap:round;
stroke-linejoin:round;

pointer-events:none;

}

.shape svg *{

stroke:currentColor !important;

fill:none !important;

color:currentColor !important;

}

/* الأشكال الممتلئة */
.shape[data-shape="star"] svg path,
.shape[data-shape="heart"] svg path,
.shape[data-shape="bolt"] svg path,
.shape[data-shape="burst"] svg path,
.shape[data-shape="badge"] svg path,
.shape[data-shape="roller"] svg path{

fill:currentColor !important;

stroke:none !important;

}