/* =========================================
   GLOBAL RESET & TYPOGRAPHY
   ========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #0a0a0a; /* Deep, dark modern background */
    color: #e8e6e3; /* Crisp bone/off-white text */
    font-family: 'Roboto', 'Inter', -apple-system, sans-serif;
    display: flex;
    justify-content: center;
    padding: 20px 10px;
    line-height: 1.6;
    background-image: radial-gradient(circle at 50% 0%, #1a1612 0%, #0a0a0a 70%);
    background-attachment: fixed;
}

/* =========================================
   MAIN LAYOUT
   ========================================= */
.osrs-border {
    background: rgba(22, 20, 18, 0.85); /* Dark earthy slate with slight transparency */
    backdrop-filter: blur(10px); /* Modern glass effect */
    border: 1px solid #382e22; /* Subtle dark brown/gold border */
    border-radius: 16px; /* Smooth, modern rounded corners */
    width: 100%;
    max-width: 850px;
    min-height: 90vh;
    padding: 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 
                inset 0 1px 0 rgba(255, 255, 255, 0.05); /* Deep shadow + top highlight */
}

/* Header */
.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #382e22;
    padding-bottom: 20px;
    margin-bottom: 24px;
}

@media (min-width: 600px) {
    .header {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* =========================================
   BUTTONS & NAVIGATION
   ========================================= */
button, .osrs-button {
    background: linear-gradient(135deg, #ff9800 0%, #e65100 100%) !important; /* Vibrant Orange Gradient */
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(230, 81, 0, 0.3) !important; /* Orange glow */
}

button:hover, .osrs-button:hover {
    transform: translateY(-2px) !important; /* Lift effect */
    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.5) !important; /* Stronger glow on hover */
    filter: brightness(1.1);
}

/* Category Navigation (Pill layout) */
.categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 35px;
}

.categories button {
    background: #1e1a16 !important; /* Dark neutral */
    color: #a0978d !important;
    border: 1px solid #382e22 !important;
    border-radius: 30px !important; /* Pill shape */
    padding: 8px 18px !important;
    font-weight: 500;
    box-shadow: none !important;
    text-transform: none;
    letter-spacing: normal;
}

.categories button:hover {
    background: #2a241e !important;
    color: #ffffff !important;
    border-color: #ff9800 !important;
    transform: translateY(-1px) !important;
}

.categories button.active {
    background: linear-gradient(135deg, #ff9800 0%, #e65100 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 15px rgba(230, 81, 0, 0.3) !important;
}

/* =========================================
   BOXES, POSTS & CONTAINERS
   ========================================= */
.gold-box, .post {
    background: rgba(10, 10, 10, 0.6) !important; /* Deep inset look */
    border: 1px solid #2d241a !important; /* Very subtle brown */
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.gold-box:hover, .post:hover {
    border-color: #4a3b2c !important; /* Lights up slightly on hover */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
}

.gold-box h3 {
    color: #ff9800 !important;
    margin-bottom: 15px;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Specifically for pulling the Follow button up on the profile page */
#follow-btn-container {
    margin-top: -5px !important; /* Pulls it up closer to the likes/dislikes */
    margin-bottom: 15px;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* =========================================
   FORMS, INPUTS & TEXTAREAS
   ========================================= */
input[type="text"], 
input[type="number"], 
textarea {
    background: #110e0c !important; /* Very dark input background */
    color: #ffffff !important;
    border: 1px solid #382e22 !important;
    border-radius: 8px !important;
    padding: 14px !important;
    font-family: inherit;
    font-size: 15px;
    transition: all 0.3s ease;
    width: 100%;
}

input:focus, textarea:focus {
    outline: none !important;
    border-color: #ff9800 !important;
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.15) !important; /* Soft orange focus ring */
}

/* =========================================
   QUILL EDITOR MODERNIZATION
   ========================================= */
.ql-toolbar {
    background: #1e1a16 !important;
    border-radius: 8px 8px 0 0 !important;
    border: 1px solid #382e22 !important;
    border-bottom: none !important;
}

.ql-toolbar button {
    box-shadow: none !important; /* Remove global button glow from editor tools */
    background: transparent !important;
}

.ql-toolbar stroke { stroke: #a0978d !important; }
.ql-toolbar fill { fill: #a0978d !important; }

.ql-container {
    border: 1px solid #382e22 !important;
    border-radius: 0 0 8px 8px !important;
    background: #110e0c !important;
    color: #f8fafc !important;
    font-family: inherit !important;
    font-size: 15px !important;
}

.ql-editor {
    min-height: 180px;
}

/* =========================================
   CUSTOM TOAST NOTIFICATIONS
   ========================================= */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.osrs-toast {
    background: rgba(22, 20, 18, 0.95);
    backdrop-filter: blur(5px);
    border-left: 4px solid #ff9800;
    color: #ffffff;
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    min-width: 250px;
}

.osrs-toast.success { 
    border-left-color: #00e676; /* Bright crypto green */
}

.osrs-toast.error { 
    border-left-color: #ff1744; /* Vivid red */
}

@keyframes fadeOutToast {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(50px); }
}

/* Utilities */
hr {
    border: none;
    height: 1px;
    background: #382e22;
    margin: 20px 0;
}

a {
    color: #ff9800;
    transition: color 0.2s;
}

a:hover {
    color: #ffc107;
}