/* --- :root এ CSS ভেরিয়েবলস (Variables) --- */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Courier New", Courier, monospace;

  /* --- লাইট মোড কালার --- */
  --bg-primary: #ffffff;
  --bg-secondary: #f0f2f5;
  --bg-accent: #f9f9f9;
  --bg-accent-darker: #f1f1f1;
  --text-primary: #333;
  --text-secondary: #555;
  --text-muted: #777;
  --border-color: #ccc;
  
  --primary-color: #0b57d0;
  --primary-gradient-start: #0b57d0;
  --primary-gradient-end: #0d6efd;
  --primary-focus-shadow: rgba(11, 87, 208, 0.2);
  --primary-shadow: rgba(11, 87, 208, 0.2);

  --secondary-gradient-start: #6c757d;
  --secondary-gradient-end: #868e96;
  --secondary-shadow: rgba(0, 0, 0, 0.1);

  --edit-gradient-start: #198754;
  --edit-gradient-end: #20c997;
  --edit-shadow: rgba(25, 135, 84, 0.2);

  --success-bg: #f0f8ff;
  --success-border: #b6dfff;
  --success-text: #0056b3;
  --success-link: #007bff;
}

/* --- ডার্ক মোড (Dark Mode) --- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1e1e1e;
    --bg-secondary: #121212;
    --bg-accent: #2a2a2a;
    --bg-accent-darker: #333333;
    --text-primary: #f0f0f0;
    --text-secondary: #c0c0c0;
    --text-muted: #888;
    --border-color: #555;

    --primary-color: #3b82f6; /* ডার্ক মোডে উজ্জ্বল নীল */
    --primary-gradient-start: #3b82f6;
    --primary-gradient-end: #60a5fa;
    --primary-focus-shadow: rgba(59, 130, 246, 0.25);
    --primary-shadow: rgba(59, 130, 246, 0.15);

    --secondary-gradient-start: #868e96;
    --secondary-gradient-end: #9ea8b1;
    --secondary-shadow: rgba(255, 255, 255, 0.05);

    --edit-gradient-start: #20c997;
    --edit-gradient-end: #28a745;
    --edit-shadow: rgba(32, 201, 151, 0.15);
    
    --success-bg: #28303f;
    --success-border: #3b5a8f;
    --success-text: #a8cfff;
    --success-link: #79b8ff;
  }
}

/* --- গ্লোবাল স্টাইল --- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    margin: 0;
    padding: 20px;
    line-height: 1.6;
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease; /* স্মুথ কালার ট্রানজিশন */
}

.container {
    max-width: 900px;
    margin: 20px auto;
    padding: 30px;
    background-color: var(--bg-primary);
    border-radius: 10px;
    box-shadow: 0 4px 12px var(--primary-shadow);
    animation: fadeIn 0.5s ease-in-out;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* --- অ্যানিমেশন কী-ফ্রেম --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Header --- */
header {
    text-align: center;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 30px;
    transition: border-color 0.3s ease;
}

/* --- নতুন লোগো স্টাইল --- */
.logo {
    display: block;
    margin: 0 auto 15px auto; /* উপরে-নিচে 0, ডানে-বামে auto (সেন্টার), নিচে 15px */
    max-height: 80px; /* আপনার লোগোর উচ্চতা অনুযায়ী এটি অ্যাডজাস্ট করুন */
    width: auto; /* আসপেক্ট রেশিও ঠিক রাখার জন্য */
}
/* --- ডার্ক মোডে লোগোর জন্য ফিল্টার (ঐচ্ছিক) --- */
@media (prefers-color-scheme: dark) {
  .logo {
    /* filter: invert(1) brightness(1.5); */ /* এই লাইনটি আনকমেন্ট করুন যদি ডার্ক মোডে লোগো সাদা দেখাতে চান */
  }
}


header h1 {
    color: var(--primary-color);
    margin: 0;
}

header p {
    font-size: 1.1em;
    color: var(--text-secondary);
}

/* --- Form Styles --- */
.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

/* --- File Name Input Box --- */
.input-with-suffix {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-accent);
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.input-with-suffix span {
    padding: 10px 12px;
    background-color: var(--bg-accent-darker);
    color: var(--text-muted);
    font-size: 0.9em;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.input-with-suffix span:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border-right: 1px solid var(--border-color);
}
.input-with-suffix span:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-left: 1px solid var(--border-color);
    white-space: nowrap; /* এটি ঠিকই আছে */
}

.input-with-suffix input[type="text"] {
    flex-grow: 1;
    border: none;
    padding: 12px;
    font-size: 1em;
    background-color: var(--bg-primary); /* ইনপুট ফিল্ডের ব্যাকগ্রাউন্ড */
    color: var(--text-primary); /* ইনপুট ফিল্ডের টেক্সট কালার */
    min-width: 0; /* মোবাইল ভিউ এর জন্য ফিক্স */
    border-radius: 0 6px 6px 0;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.input-with-suffix input[type="text"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-focus-shadow); /* নতুন ফোকাস স্টাইল */
}

.form-group small {
    display: block;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.9em;
}

/* --- HTML Code Text Area --- */
textarea#html_code {
    width: 100%;
    box-sizing: border-box; 
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 0.95em; /* কোডের জন্য সামান্য ছোট */
    line-height: 1.5; /* কোডের জন্য লাইন স্পেসিং */
    background-color: var(--bg-accent);
    color: var(--text-primary);
    resize: vertical;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

textarea#html_code:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-focus-shadow);
    background-color: var(--bg-primary); /* ফোকাস করলে ব্যাকগ্রাউন্ড */
}


/* --- আপডেটেড বাটন স্টাইল --- */
.btn {
    display: block;
    width: 100%;
    padding: 14px;
    font-size: 1.2em;
    font-weight: 700;
    color: #ffffff;
    background-image: linear-gradient(to right, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 51%, var(--primary-gradient-start) 100%);
    background-size: 200% auto; /* হোভার অ্যানিমেশনের জন্য আপডেটেড */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.4s ease; /* ট্রানজিশন সময় সামান্য বাড়ানো হলো */
    box-shadow: 0 4px 10px var(--primary-shadow);
    text-align: center; /* টেক্সট অ্যালাইনমেন্ট নিশ্চিত করা */
}

.btn:hover {
    background-position: right center; /* গ্র্যাডিয়েন্ট মুভমেন্ট */
    box-shadow: 0 6px 15px rgba(from var(--primary-shadow) r g b / 0.4); /* শ্যাডো আরও স্পষ্ট */
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(from var(--primary-shadow) r g b / 0.2);
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-focus-shadow);
}


/* --- Success Page Styles --- */
.success-box {
    background-color: var(--success-bg);
    border: 1px solid var(--success-border);
    border-radius: 8px;
    padding: 25px;
    margin-top: 20px;
    word-wrap: break-word;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.success-box h2 {
    margin-top: 0;
    color: var(--success-text);
}

.success-box .link-box {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-family: var(--font-mono);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.success-box .link-box a {
    color: var(--success-link);
    text-decoration: none;
    font-weight: 600;
}
.success-box .link-box a:hover {
    text-decoration: underline;
}

.action-links {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap; /* মোবাইলের জন্য বাটন নিচে নামবে */
    gap: 15px; /* বাটনগুলোর মাঝে স্পেস */
}

/* অন্যান্য বাটন স্টাইল */
.btn-secondary {
    background-image: linear-gradient(to right, var(--secondary-gradient-start) 0%, var(--secondary-gradient-end) 51%, var(--secondary-gradient-start) 100%);
    background-size: 200% auto;
    box-shadow: 0 4px 10px var(--secondary-shadow);
}
.btn-secondary:hover {
    box-shadow: 0 6px 15px rgba(from var(--secondary-shadow) r g b / 2);
}

.btn-edit {
    background-image: linear-gradient(to right, var(--edit-gradient-start) 0%, var(--edit-gradient-end) 51%, var(--edit-gradient-start) 100%);
    background-size: 200% auto;
    box-shadow: 0 4px 10px var(--edit-shadow);
}
.btn-edit:hover {
    box-shadow: 0 6px 15px rgba(from var(--edit-shadow) r g b / 2);
}

/* --- রেসপন্সিভ ডিজাইন --- */
@media (max-width: 600px) {
    body {
        padding: 15px;
    }
    .container {
        padding: 20px;
        margin-top: 10px;
    }
    header h1 {
        font-size: 1.8em;
    }
    header p {
        font-size: 1em;
    }
    
    /* ইনপুট গ্রুপ যেন ভেঙে না যায় */
    .input-with-suffix {
        flex-wrap: wrap;
    }
    .input-with-suffix span:first-child {
        width: 100%;
        border-radius: 6px 6px 0 0;
        border-right: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        text-align: center;
    }
    .input-with-suffix input[type="text"] {
        border-radius: 0;
        width: 70%; /* ইনপুটকে জায়গা দেওয়া */
    }
    .input-with-suffix span:last-child {
        width: 30%; /* এক্সটেনশনকে জায়গা দেওয়া */
        border-radius: 0 0 6px 0;
        text-align: center;
    }

    /* বাটনগুলো যেন একটির নিচে একটি আসে */
    .action-links {
        flex-direction: column;
    }
}