.main-container { max-width: 800px; margin: 60px auto; padding: 0 24px; flex-grow: 1; width: 100%; }
.view { display: none; animation: fadeIn 0.3s ease; }
.view.active { display: block; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.hero { text-align: center; margin-bottom: 48px; }
.hero h1 { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.05em; margin: 0 0 12px 0; }
.hero p { color: hsl(var(--muted-foreground)); font-size: 1.1rem; }

.search-container { position: relative; background-color: hsl(var(--secondary) / 0.3); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 4px; transition: border-color 0.2s; margin-bottom: 32px; }
.search-container:focus-within { border-color: hsl(var(--ring)); box-shadow: 0 0 0 1px hsl(var(--ring)); }
.search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); }
input#search { width: 100%; background: transparent; border: none; padding: 12px 12px 12px 44px; color: hsl(var(--foreground)); font-size: 1rem; outline: none; }

.results-box { display: grid; gap: 12px; }
.item { background-color: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 16px; transition: background-color 0.2s; cursor: pointer; }
.item:hover { background-color: hsl(var(--accent) / 0.5); }
.item-title { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 4px; }
.item-desc { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin-bottom: 12px; }
.item-desc b { color: #a78bfa; }
.item-footer { display: flex; gap: 16px; font-size: 0.75rem; font-weight: 500; }
.text-green { color: #4ade80; }
.text-yellow { color: #facc15; }

.card { background-color: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; }
.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group.full { grid-column: span 2; }
label { font-size: 0.875rem; font-weight: 500; }

select.field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2363.9%25' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
    cursor: pointer;
    appearance: none;
}

select.field option {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}

.commands-list { background-color: #000; padding: 16px; border-radius: var(--radius); border: 1px solid hsl(var(--border)); font-family: monospace; font-size: 0.85rem; color: #4ade80; margin-top: 24px; }
.command-item { margin-bottom: 8px; border-bottom: 1px solid #111; padding-bottom: 8px; }
.command-item:last-child { border-bottom: none; margin-bottom: 0; }