/* اضافه‌کردن فونت ایران سنس */
@import url('https://cdn.jsdelivr.net/gh/saeedalipoor/iran-sans@master/css/fontiran.css');

:root {
    --c1: #F8B195;
    --c2: #F67280;
    --c3: #C06C84;
    --c4: #6C5B7B;
    --c5: #355C7D;
}

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

body {
    /* اعمال فونت ایران سنس به کل سایت */
    font-family: 'IRANSans', 'IRANSansWeb', Tahoma, sans-serif;
    background: linear-gradient(135deg, #faf7f5 0%, #f0ecf4 100%);
    background-image:
        radial-gradient(circle at 10% 10%, rgba(248, 177, 149, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(108, 91, 123, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(246, 114, 128, 0.15) 0%, transparent 60%);
    background-attachment: fixed;
    color: var(--c5);
    display: flex;
    height: 100vh;
}

.glass {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
}

.sidebar { width: 330px; padding: 25px 20px; overflow-y: auto; border-left: 1px solid rgba(255, 255, 255, 0.8); z-index: 10; }
.sidebar h2 { font-size: 1.2rem; color: var(--c5); margin-bottom: 25px; border-bottom: 2px solid var(--c1); padding-bottom: 10px; font-weight: 800; }

.form-group { background: rgba(255, 255, 255, 0.4); padding: 15px; border-radius: 12px; margin-bottom: 20px; border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 4px 15px rgba(0,0,0,0.02); transition: 0.3s; }
.form-group:hover { background: rgba(255, 255, 255, 0.6); box-shadow: 0 6px 20px rgba(0,0,0,0.05); }

input, select { width: 100%; padding: 12px; margin-bottom: 12px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 8px; font-family: inherit; font-size: 0.9rem; outline: none; color: var(--c5); transition: 0.3s; box-shadow: inset 0 2px 5px rgba(0,0,0,0.02); }
input:focus, select:focus { background: #fff; border-color: var(--c2); box-shadow: 0 0 10px rgba(246, 114, 128, 0.2); }

.btn-primary { background: linear-gradient(135deg, var(--c2), var(--c3)); color: white; border: none; padding: 12px; border-radius: 8px; width: 100%; cursor: pointer; font-family: inherit; transition: 0.3s; font-weight: bold; box-shadow: 0 4px 15px rgba(192, 108, 132, 0.3); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(192, 108, 132, 0.4); }
.btn-secondary { background: linear-gradient(135deg, var(--c4), var(--c5)); color: white; border: none; padding: 12px; border-radius: 8px; width: 100%; cursor: pointer; font-family: inherit; transition: 0.3s; font-weight: bold; box-shadow: 0 4px 15px rgba(108, 91, 123, 0.3); }
.btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(108, 91, 123, 0.4); }

.tree-collection { background: rgba(53, 92, 125, 0.85); color: white; padding: 10px 15px; border-radius: 8px; margin-top: 25px; font-weight: bold; font-size: 0.95rem; backdrop-filter: blur(5px); box-shadow: 0 4px 10px rgba(53, 92, 125, 0.2); border: 1px solid rgba(255,255,255,0.2); }
.tree-section { background: rgba(108, 91, 123, 0.85); color: white; padding: 8px 15px; margin: 12px 15px 0 0; border-radius: 8px; font-size: 0.85rem; backdrop-filter: blur(5px); box-shadow: 0 4px 10px rgba(108, 91, 123, 0.2); border: 1px solid rgba(255,255,255,0.2); }
.tree-note { display: block; background: rgba(255,255,255,0.7); color: var(--c5); padding: 10px 15px; margin: 8px 30px 0 0; border: 1px solid rgba(255,255,255,0.9); border-radius: 8px; font-size: 0.85rem; text-decoration: none; transition: 0.3s; font-weight: bold; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.tree-note:hover { transform: translateX(-5px); background: #ffffff; box-shadow: 0 6px 15px rgba(0,0,0,0.08); }

.color-0 { border-right: 4px solid var(--c1); }
.color-1 { border-right: 4px solid var(--c2); }
.color-2 { border-right: 4px solid var(--c3); }
.color-3 { border-right: 4px solid var(--c4); }
.color-4 { border-right: 4px solid var(--c5); }

.main-content { flex: 1; padding: 40px; overflow-y: auto; }
.editor-wrapper { padding: 40px; border-radius: 20px; max-width: 1000px; margin: 0 auto; }
.title-input { font-size: 1.6rem; font-weight: bold; border: none; color: var(--c5); border-bottom: 2px solid var(--c1); margin-bottom: 25px; background: transparent; border-radius: 0; padding-left: 0; padding-right: 0; }
.title-input:focus { border-bottom-color: var(--c2); box-shadow: none; }

.view-note { border-radius: 20px; max-width: 1000px; margin: 0 auto 30px auto; overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.8); box-shadow: 0 10px 40px rgba(0,0,0,0.08); }
.note-header { padding: 50px 40px; color: white; text-align: center; position: relative; }
.note-header h2 { font-size: 2.4rem; margin-bottom: 15px; text-shadow: 0 2px 10px rgba(0,0,0,0.15); }
.note-header .view-meta { color: rgba(255,255,255,0.9); font-size: 0.95rem; font-weight: 500; }
.btn-action { background: rgba(255,255,255,0.25); color: white; padding: 10px 25px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.5); display: inline-block; text-decoration: none; font-size: 0.95rem; transition: 0.3s; font-weight: bold; margin-top: 25px; backdrop-filter: blur(5px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.btn-action:hover { background: rgba(255,255,255,0.4); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.15); }

.note-body { padding: 50px 40px; line-height: 2.2; color: #333; font-size: 16px; text-align: justify; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(15px); }

/* ========================================= */
/* استایل جدید کدهای لینوکسی بر اساس عکس شما */
/* ========================================= */
.code-wrapper { position: relative; margin: 30px 0; }
.note-body pre, .editor-wrapper pre { 
    background: #ffffff; /* پس‌زمینه کاملا سفید مثل تصویر */
    color: #e83e8c; /* رنگ صورتی/مشکی کدها */
    padding: 20px 25px; 
    border-radius: 4px; 
    border: 1px solid #eee;
    border-left: 4px solid #57b77d; /* خط سبز رنگ سمت چپ مثل تصویر */
    direction: ltr !important; 
    text-align: left; 
    overflow-x: auto; 
    font-family: Consolas, 'Courier New', monospace; 
    margin: 0; 
    line-height: 1.7; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.02); 
}
/* دکمه کپی روی باکس کد */
.copy-btn { 
    position: absolute; top: 12px; right: 12px; 
    background: #f8f9fa; border: 1px solid #ddd; 
    padding: 6px 18px; border-radius: 4px; cursor: pointer; 
    font-size: 12px; color: #555; font-family: inherit; 
    transition: 0.3s; font-weight: bold; 
}
.copy-btn:hover { background: #57b77d; color: #ffffff; border-color: #57b77d; }