@font-face {
    font-family: 'IRANSans';
    src: url('/static/fonts/IRANSans.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
:root{
    --primary:#4f8f2f;
    --primary-dark:#2f5d1a;
    --text:#1f2937;
    --muted:#6b7280;
    --light:#f8faf8;
    --white:#ffffff;
    --border:#e5e7eb;
    --shadow:0 14px 40px rgba(0,0,0,.08);
    --shadow-hover:0 18px 50px rgba(0,0,0,.12);
    --radius:26px;
}

*{
    box-sizing:border-box;
}

body {
    font-family: 'IRANSans', sans-serif;
    background:
        radial-gradient(circle at top right, rgba(79,143,47,.10), transparent 25%),
        radial-gradient(circle at bottom left, rgba(79,143,47,.08), transparent 20%),
        linear-gradient(180deg, #ffffff 0%, #f7faf7 100%);
    color:var(--text);
}

.demo-section {
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:70px 0;
}

.demo-card {
    border:1px solid rgba(229,231,235,.9);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.demo-header {
    background:linear-gradient(135deg, #4f8f2f 0%, #6dbb3a 100%);
    color:#fff;
    padding:36px 32px;
    text-align:center;
    position:relative;
}

.demo-header::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(255,255,255,.08), transparent);
    pointer-events:none;
}

.demo-header h1{
    font-weight:900;
    letter-spacing:-0.03em;
    margin-bottom:.75rem;
}

.demo-header p{
    margin-bottom:0;
    color:rgba(255,255,255,.9);
    line-height:1.9;
}

.demo-body {
    background:#fff;
    padding:34px 32px;
}

.form-label{
    font-weight:700;
    color:var(--text);
    margin-bottom:.55rem;
}

.form-control,
.form-select {
    border:1px solid var(--border);
    border-radius:16px;
    min-height:52px;
    padding:.8rem 1rem;
    transition:.3s ease;
    box-shadow:none;
}

.form-control:focus,
.form-select:focus{
    border-color:rgba(79,143,47,.45);
    box-shadow:0 0 0 .25rem rgba(79,143,47,.12);
}

textarea.form-control {
    min-height:140px;
    resize:vertical;
}

.required-star {
    color:#dc3545;
    font-weight:700;
}

.btn-main {
    border:none;
    border-radius:16px;
    padding:12px 28px;
    font-weight:700;
    background:var(--primary);
    color:#fff;
    box-shadow:0 10px 22px rgba(79,143,47,.18);
    transition:.3s ease;
}

.btn-main:hover{
    background:var(--primary-dark);
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 14px 28px rgba(47,93,26,.22);
}

.btn-back {
    border-radius:16px;
    padding:12px 28px;
    font-weight:700;
    border:1px solid var(--border);
    background:#fff;
    color:var(--text);
    transition:.3s ease;
}

.btn-back:hover{
    background:#f3f4f6;
    color:var(--text);
    transform:translateY(-2px);
}

.alert {
    border-radius:16px;
    border:none;
    box-shadow:0 8px 20px rgba(0,0,0,.06);
}

@media (max-width: 768px){
    .demo-section{
        padding:40px 0;
    }

    .demo-header,
    .demo-body{
        padding:24px 18px;
    }
}