/* Modern System Font Stack */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }

/* 1. MAIN PAGE BACKGROUND (Login) */
body.home-page {
    /* Uses main.jpg, positioned top-center to keep character safe */
    background: url('main.jpg') no-repeat top center fixed;
    background-size: cover; 
    /* Use Flexbox to position the input specifically */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Vertically Center everything */
    min-height: 100vh;
}

/* 2. INNER PAGES BACKGROUND (View/Admin) */
body.inner-page {
    /* EXTRACTED COLOR from the image (warm beige/off-white) */
    background-color: #F8F5F2; 
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    color: #333;
}

/* --- LOGIN BOX POSITIONING --- */
/* The container for the password input on main page */
.login-container {
    width: 100%;
    max-width: 320px;
    margin-top: 35vh; /* Pushes it DOWN (adjust this to move below character) */
    text-align: center;
}

/* Minimalist Password Input */
.minimal-input {
    width: 100%;
    padding: 15px 25px;
    background: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
    border: 2px solid rgba(0,0,0,0.05);
    border-radius: 50px; /* Pill shape */
    font-size: 18px;
    text-align: center;
    outline: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    color: #555;
}
.minimal-input:focus {
    transform: scale(1.05);
    background: white;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-color: #D4C5B0; /* Matching beige accent */
}
.minimal-input::placeholder { color: transparent; } /* Hides placeholder text */

/* Invisible Submit Button (Enter key works) */
.hidden-submit { display: none; }


/* --- INNER PAGE STYLES --- */
.container { width: 100%; max-width: 500px; margin-top: 5vh; }

.squircle-card {
    background: #fff;
    border-radius: 26px;
    padding: 30px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); /* Softer shadow */
    margin-bottom: 20px;
    text-align: center;
}

/* Link Styling */
.post-content a { color: #A67C52; text-decoration: underline; word-break: break-all; }
.post-content a:hover { color: #8B633D; text-decoration: none; }

/* Buttons (Matching Theme) */
.btn {
    background: #A67C52; /* Brownish/Beige theme */
    color: white; border: none; padding: 12px 25px;
    border-radius: 18px; font-size: 16px; cursor: pointer; width: 100%; transition: background 0.3s;
}
.btn:hover { background: #8B633D; }

.btn-copy { background: #F0EAE4; color: #555; margin-top: 10px; font-size: 14px; width: auto; padding: 8px 20px; }
.btn-copy:hover { background: #E6DDD3; }

.btn-edit { background: #A67C52; width: auto; font-size: 12px; padding: 5px 10px; margin: 5px; }
.btn-delete { background: #D9534F; width: auto; font-size: 12px; padding: 5px 10px; margin: 5px; }

/* Text Styles */
.smart-text { unicode-bidi: plaintext; text-align: start; width: 100%; }
.post-content { font-size: 18px; word-wrap: break-word; white-space: pre-wrap; background: #FCFAF8; padding: 15px; border-radius: 18px; }
.post-desc { font-style: italic; color: #998A7A; margin-top: 10px; font-size: 14px; }
.logout { color: #A67C52; text-decoration: none; margin-top: 20px; display: inline-block; font-weight: 500; }

/* --- POPUP (JS Fixed) --- */
.popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: rgba(248, 245, 242, 0.95); /* Matches theme instead of black */
    display: flex; justify-content: center; align-items: center;
    z-index: 2147483647; opacity: 0; visibility: hidden; transition: opacity 0.3s ease;
}
body > .popup-overlay { transform: none !important; }
.popup-content {
    position: relative; transform: scale(0.8); background: white; padding: 30px;
    border-radius: 26px; text-align: center; width: 90%; max-width: 320px;
    box-shadow: 0 25px 50px rgba(166, 124, 82, 0.2); /* Colored shadow */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin: auto;
}
.popup-overlay.active { opacity: 1; visibility: visible; }
.popup-overlay.active .popup-content { transform: scale(1); }
.popup-img {
    width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
    margin-bottom: 15px; border: 4px solid #F8F5F2; display: block; margin-left: auto; margin-right: auto;
}
.btn-close { background: #A67C52; margin-top: 20px; width: auto; padding: 10px 30px; }