:root {
    --bg-color: #f8f9fa;
    --card-bg: #ffffff;
    --text-primary: #202124;
    --text-secondary: #5f6368;
    --accent: #dadce0;
    --hover-bg: #f1f3f4;
    --shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --primary: #1a73e8;
    --danger: #d93025;
    --radius: 12px;
    --transition: 0.2s ease;
}

[data-theme="dark"] {
    --bg-color: #202124;
    --card-bg: #303134;
    --text-primary: #e8eaed;
    --text-secondary: #9aa0a6;
    --accent: #5f6368;
    --hover-bg: #3c4043;
    --shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.5);
    --primary: #8ab4f8;
    --danger: #f28b82;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    transition: background-color var(--transition), color var(--transition);
    padding-bottom: 2rem;
}

/* Header */
header { padding: 1.5rem 1rem; max-width: 1200px; margin: 0 auto; }
.header-content { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.actions { display: flex; gap: 0.5rem; }

.icon-btn {
    background: var(--card-bg);
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    box-shadow: var(--shadow);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition);
}
.icon-btn:hover { transform: scale(1.05); }

/* Search */
.search-container { position: relative; flex-grow: 1; max-width: 600px; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); }
#searchInput {
    width: 100%; padding: 12px 12px 12px 40px;
    border: none; border-radius: 24px;
    background-color: var(--card-bg);
    box-shadow: var(--shadow);
    font-size: 1rem; color: var(--text-primary);
    outline: none; transition: box-shadow var(--transition);
}
#searchInput:focus { box-shadow: 0 4px 6px rgba(0,0,0,0.15); }

/* Dark Mode Icons */
.sun-icon { display: none; }
[data-theme="dark"] .sun-icon { display: block; }
[data-theme="dark"] .moon-icon { display: none; }

/* Grid */
#dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 0 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Cards */
.category-card {
    background-color: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    height: fit-content;
    position: relative;
}

.category-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--accent);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    group: relative;
}
.category-title { font-size: 1.1rem; font-weight: 500; }

.card-actions { display: flex; gap: 8px; align-items: center; }
.edit-icon { 
    opacity: 0; 
    transition: opacity 0.2s; 
    padding: 4px;
    border-radius: 4px;
}
.category-header:hover .edit-icon { opacity: 1; }
.edit-icon:hover { background: var(--hover-bg); }

.toggle-icon { transition: transform var(--transition); color: var(--text-secondary); }
.collapsed .toggle-icon { transform: rotate(-90deg); }
.link-list { list-style: none; display: block; }
.collapsed .link-list { display: none; }

/* Link Items */
.link-item { 
    position: relative;
    border-bottom: 1px solid transparent; 
}
.link-item:not(:last-child) { border-bottom-color: var(--bg-color); }

.link-anchor {
    display: flex; align-items: center;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: background-color var(--transition);
    gap: 12px;
}
.link-anchor:hover { background-color: var(--hover-bg); }

.link-actions {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
}
.link-item:hover .link-actions { display: block; }
.link-edit-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary);
    padding: 4px;
    border-radius: 4px;
}
.link-edit-btn:hover { background: rgba(0,0,0,0.05); color: var(--primary); }

.favicon { width: 20px; height: 20px; border-radius: 4px; object-fit: contain; }
.link-name { font-size: 0.95rem; }

/* Modal */
.hidden { display: none !important; }
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex; justify-content: center; align-items: center;
    z-index: 1000;
}
.modal-content {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: var(--radius);
    width: 90%; max-width: 400px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.form-group { margin-bottom: 1rem; }
label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--text-secondary); }
input, select {
    width: 100%; padding: 10px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: var(--bg-color);
    color: var(--text-primary);
    font-size: 1rem;
}
.modal-actions { display: flex; gap: 10px; margin-top: 1.5rem; }
button.btn-primary {
    background: var(--primary); color: white; border: none;
    padding: 10px 20px; border-radius: 6px; cursor: pointer;
    font-weight: 500;
}
button.btn-secondary {
    background: transparent; color: var(--text-secondary); border: 1px solid var(--accent);
    padding: 10px 20px; border-radius: 6px; cursor: pointer;
}
button.btn-danger {
    background: var(--danger); color: white; border: none;
    padding: 10px 20px; border-radius: 6px; cursor: pointer;
}

@media (max-width: 600px) {
    #dashboard { grid-template-columns: 1fr; }
    .link-actions { display: block; opacity: 0.5; } /* Always show edit on mobile */
    .edit-icon { opacity: 1; }
}