body {
    margin: 0; /* Removes default browser margin causing gaps on the screen edges */
    padding: 0;
}

body.पुनराकारः-सक्रियः {
    cursor: col-resize !important;
    user-select: none;
}

/* --- Navigation Header --- */
#शीर्षपट्टिका {
    position: fixed;
    top: 0;
    left: 0; /* Anchors the header to the left edge of the screen */
    width: 100%;
    height: 50px;
    z-index: 1000;
    background: rgba(6, 11, 26, 0.9);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: visible; /* Allows the logo to pop out of the header */
    padding : 5px;
    box-sizing: border-box; /* Forces padding to be included in the 100% width */
}

#चिह्नम् {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: contain;
    transition: all 0.3s ease; /* Adds a smooth animation when resizing */
}
#चिह्नम्:hover {
    transform: scale(5); /* Smoothly scales to ~100px */
    transform-origin: top left; /* Expands downwards and rightwards so it doesn't clip off the top of the screen */
}

#मार्गसञ्चारकडी {
    display: flex;
    list-style: none;
    gap: 30px;
    margin: 0;
    padding: 0;
}

#मार्गसञ्चारकडी a {
    color: #cbd5e1;
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
}

#मार्गसञ्चारकडी a:hover {
    color: yellow;
    transform: translateY(-2px) scale(1.05); 
    display: inline-block; /* Required for transform to work on link tags */

}
#मुख्यपात्रम् {
    margin-top: 50px;             /* Pushes container below the 50px fixed header */
    height: calc(100vh - 50px);   /* Exactly fills the remaining viewport height */
    width: 100%;                  /* Ensures it takes the full width of the screen */
    box-sizing: border-box;       /* Includes padding in height/width calculations */
    display: flex;            /* Activates Flexbox */
    flex-direction: column;      /* Default: arranges items horizontally */
    gap: 0;                   /* Removes the gap between toolbar and canvas */
    justify-content: flex-start;  /* Aligns items horizontally (center, flex-start, space-between) */
    align-items: flex-start;      /* Aligns items vertically */
}
#उपकरणपट्टिका {
    flex-shrink: 0;
    width: 100%;             /* Forces all buttons to be the same width */
    height: 25px;            /* Forces all buttons to be the same height */
    box-sizing: border-box;   /* Ensures padding doesn't make the toolbar wider than the screen */
    display: flex;
    flex-direction: row;
    gap: 0px;                 /* Adds a small space between buttons */
    align-items: center;
    background-color: #1641c0;
    padding: 1px 1px;
    
}

.उपकरणकुञ्जिका {
    width: 30px;             /* Forces all buttons to be the same width */
    height: 25px;            /* Forces all buttons to be the same height */
    display: flex;           /* Activates flexbox to allow centering */
    padding: 0;              /* Removes default browser button padding */
    justify-content: center; /* Centers the icon horizontally */
    align-items: center;     /* Centers the icon vertically */
    cursor: pointer;
    transition: all 0.3s ease; /* Adds a smooth animation when resizing */
}
.उपकरणकुञ्जिका:hover {
    background-color: yellow;
}

#विस्तारप्रतिशतम् {
    color: black;
    font-weight: bold;
    margin-left: 1px; /* Adds a bit of space between the zoom-out button and the text */
    font-family: 'Inter', sans-serif;
    background: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1px;
    width: 35px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1px;
    outline: none;
}
#विस्तारप्रतिशतम्:focus {
    border-color: lightgreen;   
}

#प्रतिशतचिह्नम् {
    color: white;
    font-family: 'Inter', sans-serif;
}

#कार्यक्षेत्रम् {
    display: flex;
    width: 100%;
    flex-grow: 1;
    overflow: hidden;
}

#तर्कद्वारपट्टिका {
    width: 40px;
    min-width: 40px;
    max-width: 30vw;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    padding-top: 5px;
    gap: 5px;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: auto;
}





#पट्टिकाविभाजकः {
    width: 4px;
    background-color: rgba(0, 0, 0, 0.1);
    cursor: col-resize;
    z-index: 10;
    transition: background-color 0.2s;
    flex-shrink: 0;
}
#पट्टिकाविभाजकः:hover, #पट्टिकाविभाजकः.सक्रियः {
    background-color: #3498db; /* Highlights blue when hovered or dragged */
}

#पटपात्रम् {
    background: #e0e0e0; /* Gray background for areas not covered by canvas */
    width: 100%;       /* Ensures the wrapper spans the entire width to avoid right-side gaps */
    overflow: auto;    /* Important for zooming */
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-grow: 1;
}

#पटस्तरपात्रम् {
    position: relative;
}

#बिन्दुपटः, #तर्कद्वारपटः {
    position: absolute;
    top: 0;
    left: 0;
}

#बिन्दुपटः {
    background: #ffffff;
    z-index: 1;
}

#तर्कद्वारपटः {
    background: transparent;
    z-index: 2;
    cursor: default;
}

body.तन्तु-प्रकारः #तर्कद्वारपटः {
    /* Custom SVG cursor: Mouse pointer + a wire icon (mimicking the 'loading' sub-icon layout) */
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpolygon points='0,0 0,14 4,11 7,18 10,16 6,9 13,9' fill='black' stroke='white' stroke-width='1'/%3E%3Cpath d='M14,18 L18,18 L18,12 L24,12' fill='none' stroke='%23333333' stroke-width='1.5'/%3E%3Ccircle cx='14' cy='18' r='1.5' fill='%231641c0'/%3E%3Ccircle cx='24' cy='12' r='1.5' fill='%231641c0'/%3E%3C/svg%3E") 0 0, crosshair;
}

/* --- Modal Dialog (Premium Aesthetics) --- */
.संवादपृष्ठभूमिः {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.संवादपृष्ठभूमिः.गुप्तम् {
    display: none;
    opacity: 0;
}

.संवादपेटिका {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    font-family: 'Inter', sans-serif;
    width: 350px;
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.संवादपृष्ठभूमिः.गुप्तम् .संवादपेटिका {
    transform: scale(0.9);
}

.संवादपेटिका h2 {
    margin: 0 0 25px 0;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.संवाद-पङ्क्तिः {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.संवाद-पङ्क्तिः label {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #cbd5e1;
}

.संवाद-पङ्क्तिः input,
.संवाद-पङ्क्तिः select {
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    font-size: 15px;
    outline: none;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.संवाद-पङ्क्तिः input:focus,
.संवाद-पङ्क्तिः select:focus {
    border-color: #3b82f6;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.संवाद-पङ्क्तिः input.error-highlight {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
    animation: shake 0.3s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.संवाद-पङ्क्तिः select option {
    background: #1e293b;
    color: #ffffff;
}

.संवाद-कुञ्जिका-पङ्क्तिः {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
}

.संवाद-कुञ्जिका {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.रद्द-कुञ्जिका {
    background: transparent;
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.रद्द-कुञ्जिका:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.स्वीकार-कुञ्जिका {
    background: #3b82f6;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}

.स्वीकार-कुञ्जिका:hover {
    background: #2563eb;
    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
}