/* --- Font Definitions & Variables --- */
@font-face { font-family: 'Torus SemiBold'; src: url('assets/Torus-SemiBold.otf') format('opentype'); }
:root { --bg-color: #000; --dot-color: rgba(255, 255, 255, 0.1); --glow-color: rgba(44, 11, 44, 0.9); --title-color: #E8CC86; --title-shadow-color: #a18e5e; --dimming-shadow-color: rgba(0, 0, 0, 0.8); --icon-color: #E8CC86; --text-color: #f0f0f0; --modal-bg: #1a1a1a; --input-bg: #333; --input-border: #444; --btn-bg: #E8CC86; --btn-text: #000; --divider-color: rgba(232, 204, 134, 0.5); /* These are now fallbacks, JS will override them */ --box-color: #E8CC86; --box-bg-color: rgba(232, 204, 134, 0.1); --box-border-color: rgba(232, 204, 134, 0.5); --box-hover-bg-color: rgba(232, 204, 134, 0.2); }
html.light-theme { --bg-color: #f0f0f0; --dot-color: rgba(0, 0, 0, 0.1); --glow-color: rgba(180, 150, 200, 0.95); --title-color: #2c0b2c; --title-shadow-color: #8b6d9c; --dimming-shadow-color: rgba(255, 255, 255, 0.8); --icon-color: #2c0b2c; --text-color: #1a1a1a; --modal-bg: #fff; --input-bg: #eee; --input-border: #ccc; --btn-bg: #2c0b2c; --btn-text: #fff; --divider-color: rgba(44, 11, 44, 0.5); --box-color: #2c0b2c; --box-bg-color: rgba(44, 11, 44, 0.05); --box-border-color: rgba(44, 11, 44, 0.5); --box-hover-bg-color: rgba(44, 11, 44, 0.1); }

/* --- Base Styles & Background (Unchanged) --- */
html, body { margin: 0; padding: 0; width: 100%; min-height: 100%; overflow-y: auto; font-family: 'Torus SemiBold', sans-serif; transition: background-color 0.5s ease; }
body { background-color: var(--bg-color); position: relative; }
body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at center, var(--dot-color) 1.2px, transparent 1.2px); background-size: 20px 20px; opacity: 0; animation: fade-in-glows 2s ease-out forwards; z-index: -1; }
body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-image: radial-gradient(ellipse 150% 120% at 0% 0%, var(--glow-color) 0%, transparent 70%), radial-gradient(ellipse 150% 120% at 100% 100%, var(--glow-color) 0%, transparent 70%); animation: fade-in-glows 2s ease-out forwards; z-index: -2; }

/* --- Action Buttons & User Status (Unchanged) --- */
.actions-container { position: absolute; top: 20px; right: 20px; display: flex; gap: 10px; z-index: 1000; align-items: center; }
.action-btn { background: transparent; border: 1px solid var(--icon-color); color: var(--icon-color); cursor: pointer; padding: 8px 16px; border-radius: 20px; font-family: 'Torus SemiBold', sans-serif; font-size: 14px; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; }
.action-btn:hover { background-color: var(--icon-color); color: var(--bg-color); }
.theme-toggle { padding: 8px; border-radius: 50%; }
.theme-toggle:hover svg { stroke: var(--bg-color); }
.theme-toggle svg { width: 24px; height: 24px; stroke: var(--icon-color); }
.moon-icon { display: none; }
html.light-theme .sun-icon { display: block; }
html.light-theme .moon-icon { display: none; }
.sun-icon { display: block; }
html:not(.light-theme) .moon-icon { display: block; }
html:not(.light-theme) .sun-icon { display: none; }
html:not(.logged-in) .login-view { display: flex; }
html:not(.logged-in) .logged-in-view { display: none; }
html.logged-in .login-view { display: none; }
html.logged-in .logged-in-view { display: flex; align-items: center; gap: 10px; }
#username-display { color: var(--icon-color); font-weight: bold; }

/* --- Main Content Styling (CHANGED) --- */
.main-container { display: flex; flex-direction: column; align-items: center; padding: 6vh 20px 40px; width: 100%; min-height: 100vh; box-sizing: border-box; position: relative; z-index: 3; }
/* Title size reduced */
.title.page-title { font-size: 5rem; line-height: 1; margin-bottom: 0; font-weight: normal; color: var(--title-color); text-shadow: 0 0 45px var(--dimming-shadow-color), 3px 3px 8px var(--title-shadow-color); opacity: 0; animation: fade-in-down 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards; text-align: center; }
.divider { width: 100%; max-width: 800px; height: 2px; background-color: var(--divider-color); margin: 2.5rem 0; transform: scaleX(0); opacity: 0; animation: expand-line 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s forwards; }

/* --- Grid & Link Box Styling (CHANGED) --- */
.grid-container { width: 100%; max-width: 1100px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; opacity: 0; animation: fade-in-up 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards; }
.link-box {
    position: relative; /* Crucial for positioning child controls */
    display: flex; align-items: center;
    gap: 1rem; /* Reduced gap */
    color: var(--box-color); 
    background-color: var(--box-bg-color);
    border: 1px solid var(--box-border-color);
    padding: 0.8rem 1rem; /* Reduced padding */
    border-radius: 12px; text-decoration: none; 
    transition: all 0.2s ease-out;
    margin-top: 15px; /* Added margin to prevent controls from overlapping box above */
}
.link-box:hover { background-color: var(--box-hover-bg-color); transform: translateY(-3px); box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
/* Icon size reduced */
.link-box-icon { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.link-box-text { text-align: left; }
/* Font size reduced */
.link-box-title { font-size: 1.25rem; font-weight: normal; display: block; }
/* Font size reduced */
.link-box-subtitle { font-size: 0.8rem; opacity: 0.7; margin-top: 0.2rem; }

/* --- Edit Mode Styles (CHANGED) --- */
.edit-controls {
    position: absolute; 
    top: -16px; /* Positioned on the top border */
    right: 10px;
    display: none; 
    gap: 8px; 
    z-index: 10;
}
html.edit-mode .link-box .edit-controls { display: flex; }

.control-btn {
    width: 28px; height: 28px; /* Slightly smaller buttons */
    border-radius: 50%; border: none; cursor: pointer; display: flex;
    justify-content: center; align-items: center; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
    transition: transform 0.2s;
}
.control-btn svg { width: 14px; height: 14px; fill: white; }
.control-btn:hover { transform: scale(1.1); }
.edit-btn { background-color: #007bff; }
.delete-btn { background-color: #dc3545; }

.reorder-controls { 
    position: absolute; 
    left: 8px;
    top: -16px; /* Positioned on the top border */
    display: none; 
    gap: 8px; 
    z-index: 10; 
}
html.edit-mode .link-box .reorder-controls { display: flex; }
.reorder-btn { background-color: #6c757d; }
.reorder-btn svg { fill: white; }

/* Add button container and button styling changed */
.add-item-container { margin-top: 2rem; width: 100%; max-width: 1100px; display: none; }
html.edit-mode .add-item-container { display: block; }
.add-btn { width: 100%; font-size: 1.5rem; padding: 0.4rem; }

/* --- Edit Modal --- */
.edit-modal-content { max-width: 500px; }
.form-row { display: flex; gap: 20px; }
.form-row .form-group { flex: 1; }
/* Style for the new color input */
#edit-color { padding: 0; height: 40px; border: none; background: none; width: 100%; cursor: pointer; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 1px solid var(--input-border); border-radius: 8px; }


/* --- Other Styles (Unchanged, minified) --- */
@keyframes fade-in-glows{to{opacity:1}}@keyframes fade-in-up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in-down{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:translateY(0)}}@keyframes expand-line{to{transform:scaleX(1);opacity:1}}
@media (max-width:1024px){.grid-container{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.title.page-title{font-size:4rem}.link-box-title{font-size:1.2rem}.link-box-subtitle{font-size:.75rem}}@media (max-width:480px){.title.page-title{font-size:3.5rem}.grid-container{grid-template-columns:1fr}.link-box-title{font-size:1.1rem}.link-box-subtitle{font-size:.7rem}}
.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);display:flex;justify-content:center;align-items:center;z-index:2000;opacity:0;transition:opacity .3s ease}.modal-backdrop:not(.hidden){opacity:1}.modal-content{background-color:var(--modal-bg);color:var(--text-color);padding:30px;border-radius:12px;width:90%;max-width:400px;position:relative;box-shadow:0 10px 30px rgba(0,0,0,.2);transform:scale(.95);transition:transform .3s ease}.modal-backdrop:not(.hidden) .modal-content{transform:scale(1)}.close-btn{position:absolute;top:15px;right:20px;font-size:28px;font-weight:700;color:var(--text-color);cursor:pointer}.modal-content h2{margin-top:0;margin-bottom:20px;text-align:center}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-size:14px}.form-group input{width:100%;padding:12px;background-color:var(--input-bg);border:1px solid var(--input-border);border-radius:8px;color:var(--text-color);box-sizing:border-box}.submit-btn{width:100%;padding:12px;background-color:var(--btn-bg);color:var(--btn-text);border:none;border-radius:8px;font-size:16px;font-family:'Torus SemiBold',sans-serif;cursor:pointer;transition:opacity .3s ease}.submit-btn:hover{opacity:.9}.hidden{display:none}.notification-container{position:fixed;bottom:20px;right:20px;z-index:3000;display:flex;flex-direction:column;gap:10px}.notification{padding:15px 20px;border-radius:8px;color:#fff;box-shadow:0 4px 15px rgba(0,0,0,.2);opacity:0;animation:slide-in-out 5s ease-in-out forwards}.notification.success{background-color:#28a745}.notification.error{background-color:#dc3545}@keyframes slide-in-out{0%,to{transform:translateX(120%);opacity:0}10%,90%{transform:translateX(0);opacity:1}}