:root{
    --bg:#e8e1e1;
    --card:#f7f5f6;
    --card-2:#eef2fb;
    --line:#e2d8d8;
    --text:#19181d;
    --muted:#5f6a7a;
    --primary:#0c2a78;
    --primary-2:#193b97;
    --soft:#eadede;
    --white:#ffffff;
    --shadow:0 20px 60px rgba(24,26,32,.08);
    --radius:28px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    background:var(--bg);
    color:var(--text);
    font-family:Inter,Arial,sans-serif;
    line-height:1.6;
}
body.lang-ar{
    font-family:'Cairo',Arial,sans-serif;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}

.page-shell,
.admin-shell{
    width:min(1120px,calc(100% - 28px));
    margin:20px auto 34px;
}

.site-header{
    background:var(--card);
    border-radius:32px;
    padding:18px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    box-shadow:var(--shadow);
    margin-bottom:26px;
}
.brand-wrap{display:flex;align-items:center}
.brand-logo{
    width:110px;
    background:#f1eeee;
    border-radius:18px;
    padding:10px;
}
.main-nav{
    display:flex;
    align-items:center;
    gap:14px;
    flex:1;
}
.main-nav>a,
.nav-dropdown-toggle,
.lang-switcher a{
    background:#efe8e8;
    padding:14px 18px;
    border-radius:16px;
    font-weight:700;
    color:#2d2b30;
    border:0;
    cursor:pointer;
    transition:.2s ease;
}
.main-nav>a:hover,
.nav-dropdown-toggle:hover,
.lang-switcher a:hover{
    transform:translateY(-1px);
}
.nav-dropdown{
    position:relative;
}
.nav-dropdown-menu{
    position:absolute;
    top:100%;
    left:0;
    min-width:260px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:0 18px 50px rgba(20,20,35,.12);
    padding:14px 10px 10px;
    display:none;
    z-index:50;
}
body.lang-ar .nav-dropdown-menu{
    left:auto;
    right:0;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
    display:block;
}
.nav-dropdown-menu a{
    display:block;
    padding:12px 14px;
    border-radius:14px;
    color:#25314b;
    font-weight:600;
}
.nav-dropdown-menu a:hover{
    background:#f3f6fd;
}
.lang-switcher{
    display:flex;
    align-items:center;
    gap:10px;
}
.lang-switcher a.active{
    background:var(--primary);
    color:#fff;
}

.hero-card,
.admin-panel-card{
    background:var(--card);
    border-radius:36px;
    padding:44px;
    box-shadow:var(--shadow);
}
.hero-head{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:30px;
    align-items:start;
    margin-bottom:28px;
}
.eyebrow{
    margin:0 0 6px;
    color:#69748a;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.hero-head h1{
    margin:0 0 12px;
    font-size:clamp(30px,5vw,58px);
    line-height:1.05;
    font-weight:800;
}
.hero-subtitle{
    margin:0;
    color:var(--muted);
    font-size:20px;
}

.manual-form{
    background:var(--card-2);
    padding:20px;
    border-radius:26px;
    border:2px dashed #96b0ff;
}
.manual-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}
.field{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.field label{
    font-weight:700;
    color:#24314a;
}
.field input,
.field select,
.field textarea{
    width:100%;
    border:1px solid #d8deef;
    background:#fff;
    border-radius:16px;
    padding:14px 16px;
    outline:none;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
    border-color:#7898ff;
}
.manual-actions{
    display:flex;
    gap:12px;
    margin-top:16px;
    flex-wrap:wrap;
}
.btn-primary,
.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:0 22px;
    border-radius:16px;
    font-weight:800;
    border:0;
}
.btn-primary{
    background:var(--primary);
    color:#fff;
}
.btn-primary:hover{
    background:var(--primary-2);
}
.btn-secondary{
    background:#efe4e4;
    color:#7a3f30;
}
.full-btn{width:100%}

.current-weather-card{
    background:#17181e;
    color:#fff;
    border-radius:30px;
    padding:30px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px;
}
.current-left .weather-location-line{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:18px;
}
.muted{color:#c7cedc}
.weather-meta-line{
    margin-top:10px;
    display:flex;
    align-items:center;
    gap:10px;
    color:#aab1bf;
}
.dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#6e7688;
}
.temperature-wrap{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:18px;
}
.temp-main{
    font-size:76px;
    line-height:1;
    font-weight:800;
}
.temp-main span{
    font-size:34px;
    opacity:.9;
}
.temp-alt{
    font-size:24px;
    color:#b8c2d8;
}
.condition-icon-lg{
    width:96px;
    height:96px;
    object-fit:contain;
}

.metric-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}
.metric-box{
    background:#1e212b;
    border:1px solid rgba(255,255,255,.06);
    border-radius:20px;
    padding:16px;
}
.metric-icon{
    font-size:22px;
    margin-bottom:6px;
}
.metric-label{
    color:#b7bfd0;
    font-size:14px;
}
.metric-value{
    margin-top:4px;
    font-size:22px;
    font-weight:800;
}
.sun-row{
    display:flex;
    gap:14px;
    margin-top:14px;
}
.sun-box{
    flex:1;
    background:#1e212b;
    border-radius:20px;
    padding:14px 16px;
    display:flex;
    align-items:center;
    gap:12px;
}
.sun-box small{
    display:block;
    color:#b7bfd0;
}
.sun-box strong{
    font-size:18px;
}

.forecast-section{
    margin-top:28px;
}
.section-head h2{
    margin:0 0 8px;
    font-size:30px;
}
.section-head p{
    margin:0;
    color:var(--muted);
}
.forecast-grid{
    margin-top:18px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}
.forecast-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:24px;
    padding:18px;
    text-align:center;
}
.forecast-day{
    font-size:20px;
    font-weight:800;
}
.forecast-date{
    color:var(--muted);
    font-size:14px;
}
.forecast-icon{
    width:70px;
    height:70px;
    margin:10px auto 6px;
}
.forecast-condition{
    min-height:48px;
    color:#24314a;
    font-weight:700;
}
.forecast-temp{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:20px;
    margin-top:8px;
}
.forecast-temp span{
    color:#70809a;
}
.forecast-mini{
    display:grid;
    gap:6px;
    margin-top:12px;
    color:#5e6a7f;
    font-size:14px;
}

.content-section{
    margin-top:28px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:26px;
    padding:24px;
}
.content-section h2{
    margin:0 0 10px;
    font-size:28px;
}
.content-section p{
    margin:0;
    color:#4f5d73;
    font-size:18px;
}

.site-footer{
    text-align:center;
    color:#626d7e;
    padding:18px 10px 8px;
}

.notice-error,
.notice-success{
    border-radius:18px;
    padding:14px 16px;
    margin-bottom:16px;
    font-weight:700;
}
.notice-error{
    background:#ffe8e8;
    color:#8a1f1f;
    border:1px solid #f1bcbc;
}
.notice-success{
    background:#e7fff1;
    color:#0d6a38;
    border:1px solid #bfe8ce;
}

.admin-shell{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:20px;
}
.login-card{
    max-width:460px;
    margin:80px auto;
    background:var(--card);
    padding:34px;
    border-radius:30px;
    box-shadow:var(--shadow);
}
.login-card h1{
    margin:10px 0 18px;
}
.login-logo{
    width:96px;
    background:#f2efef;
    border-radius:18px;
    padding:10px;
}
.admin-sidebar{
    background:var(--card);
    border-radius:30px;
    padding:20px;
    box-shadow:var(--shadow);
    height:fit-content;
    position:sticky;
    top:20px;
}
.admin-brand{
    display:flex;
    align-items:center;
    gap:12px;
    padding-bottom:18px;
    border-bottom:1px solid var(--line);
}
.admin-brand img{
    width:70px;
    background:#f1eeee;
    padding:8px;
    border-radius:14px;
}
.admin-nav{
    display:grid;
    gap:10px;
    margin-top:18px;
}
.admin-nav a{
    padding:14px 16px;
    border-radius:16px;
    background:#efe8e8;
    font-weight:700;
}
.admin-nav a.active{
    background:var(--primary);
    color:#fff;
}
.admin-content{
    min-width:0;
}
.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}
.stat-box{
    background:#fff;
    border:1px solid var(--line);
    border-radius:22px;
    padding:18px;
}
.stat-box span{
    display:block;
    color:var(--muted);
}
.stat-box strong{
    display:block;
    margin-top:8px;
    font-size:34px;
}
.table-wrap{
    overflow:auto;
}
.admin-table{
    width:100%;
    border-collapse:collapse;
    min-width:860px;
}
.admin-table th,
.admin-table td{
    border-bottom:1px solid var(--line);
    text-align:start;
    padding:14px 12px;
}
.admin-table th{
    background:#f4f6fb;
    color:#24314a;
}
.admin-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}
.field-full{
    grid-column:1/-1;
}

@media (max-width: 980px){
    .site-header{
        flex-wrap:wrap;
        justify-content:center;
    }
    .main-nav{
        justify-content:center;
        flex-wrap:wrap;
    }
    .hero-head,
    .current-weather-card,
    .admin-shell{
        grid-template-columns:1fr;
    }
    .forecast-grid,
    .stats-grid,
    .admin-form-grid{
        grid-template-columns:1fr 1fr;
    }
}
@media (max-width: 640px){
    .page-shell,
    .admin-shell{
        width:min(100% - 18px,1120px);
        margin:10px auto 20px;
    }
    .site-header,
    .hero-card,
    .admin-panel-card,
    .admin-sidebar,
    .login-card{
        border-radius:24px;
        padding:18px;
    }
    .manual-grid,
    .forecast-grid,
    .stats-grid,
    .admin-form-grid{
        grid-template-columns:1fr;
    }
    .temp-main{
        font-size:58px;
    }
    .temperature-wrap{
        flex-wrap:wrap;
    }
    .metric-grid{
        grid-template-columns:1fr;
    }
    .sun-row{
        flex-direction:column;
    }
    .lang-switcher{
        width:100%;
        justify-content:center;
    }
}