:root {
    --bg: #0f172a;
    --card-bg: #1e293b;
    --primary: #38bdf8;
    --danger: #ef4444;
    --text: #f1f5f9;
    --border: #334155;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    margin: 0; padding: 0;
    line-height: 1.5;
}

.container { padding: 70px 15px 20px 15px; max-width: 600px; margin: auto; }

/* Navigazione */
.tab-bar {
    position: fixed; top: 0; left: 0; right: 0;
    display: flex; background: var(--card-bg);
    border-bottom: 2px solid var(--border);
    z-index: 100;
}
.tab-btn {
    flex: 1; padding: 15px 5px; border: none; background: none;
    color: #94a3b8; font-weight: bold; font-size: 0.8rem;
}
.tab-btn.active { color: var(--primary); border-bottom: 3px solid var(--primary); }

/* Pagine */
.page { display: none; }
.page.active { display: block; }

/* Card e Input */
.card {
    background: var(--card-bg); padding: 15px;
    border-radius: 12px; margin-bottom: 15px;
    border: 1px solid var(--border);
}

h1 { font-size: 1.5rem; margin-bottom: 20px; color: var(--primary); }
label { display: block; font-size: 0.8rem; margin-top: 10px; color: #94a3b8; }

input, select, textarea {
    width: 100%; padding: 12px; margin-top: 5px;
    background: #0f172a; border: 1px solid var(--border);
    border-radius: 8px; color: white; box-sizing: border-box;
    font-size: 1rem;
}

/* Accordion CLC */
.clc-item { margin-bottom: 10px; }
.clc-header {
    background: var(--card-bg); padding: 15px; border-radius: 8px;
    display: flex; justify-content: space-between; align-items: center;
    border: 1px solid var(--border); font-weight: bold;
}
.clc-content {
    background: #161e2d; padding: 15px;
    border: 1px solid var(--border); border-top: none;
    display: none; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
}
.clc-item.open .clc-content { display: block; }

/* Bottoni */
.btn-primary { background: var(--primary); color: #0f172a; width: 100%; border: none; padding: 15px; border-radius: 8px; font-weight: bold; }
.btn-danger { background: var(--danger); color: white; width: 100%; border: none; padding: 10px; border-radius: 8px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hint { font-size: 0.75rem; color: #64748b; margin-bottom: 5px; }
.badge { background: #334155; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; }