:root { --bg-color: #121212; --surface-color: #1e1e1e; --primary-color: #03dac6; --text-color: #e0e0e0; --border-color: #333; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: var(--bg-color); color: var(--text-color); }
.container, .dashboard-container { max-width: 800px; margin: 40px auto; padding: 20px; }
.form-container { background-color: var(--surface-color); padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
h1, h2 { text-align: center; color: var(--primary-color); }
input[type="email"], input[type="password"], input[type="url"], textarea { width: 100%; padding: 12px; margin-bottom: 15px; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-color); box-sizing: border-box; }
textarea { min-height: 100px; resize: vertical; }
button { width: 100%; padding: 12px; background-color: var(--primary-color); border: none; border-radius: 4px; color: #000; font-weight: bold; cursor: pointer; transition: opacity 0.2s; }
button:hover { opacity: 0.8; }
a { color: var(--primary-color); text-decoration: none; }
p { text-align: center; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
#logout-btn { width: auto; padding: 8px 16px; }
.creation-tabs { display: flex; margin-bottom: 15px; }
.tab-btn { flex: 1; background: none; border: 1px solid var(--border-color); color: var(--text-color); border-radius: 0; padding: 10px; }
.tab-btn:first-child { border-radius: 4px 0 0 4px; }
.tab-btn:last-child { border-radius: 0 4px 4px 0; }
.tab-btn.active { background-color: var(--primary-color); color: #000; }
.creator-panel { display: none; }
.creator-panel.active { display: block; }
hr { border-color: var(--border-color); margin: 30px 0; }
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.item-card { background-color: var(--surface-color); border: 1px solid var(--border-color); border-radius: 8px; padding: 15px; display: flex; flex-direction: column; }
.item-card h3 { margin-top: 0; }
.item-card p { word-wrap: break-word; text-align: left; }
.item-card .actions { margin-top: auto; display: flex; gap: 10px; padding-top: 10px; }
.item-card .actions button, .item-card .actions a button { width: auto; flex: 1; font-size: 12px; padding: 8px; }
.item-card .actions a { text-decoration: none; flex: 1; }
.item-card .stats { font-size: 12px; color: #888; cursor: pointer; }
.item-card .stats:hover { text-decoration: underline; }
.modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7); }
.modal-content { background-color: var(--surface-color); margin: 15% auto; padding: 20px; border: 1px solid var(--border-color); width: 80%; max-width: 600px; border-radius: 8px; position: relative; }
.close-btn { color: #aaa; position: absolute; top: 10px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; }
#log-details { max-height: 300px; overflow-y: auto; }
#log-details p { text-align: left; border-bottom: 1px solid var(--border-color); padding-bottom: 5px; margin-bottom: 5px; font-size: 14px; }