main.narrow {
    max-width: 420px;
}

.stacked-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.stacked-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--muted);
}

.stacked-form input {
    font: inherit;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--card-hover);
    border-radius: 8px;
    padding: 10px 12px;
}

.stacked-form input:focus-visible {
    outline: 2px solid var(--up);
    outline-offset: 1px;
}

button {
    font: inherit;
    font-weight: 600;
    color: var(--bg);
    background: var(--up);
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
}

button.secondary {
    color: var(--ink);
    background: var(--card-hover);
}

button.danger {
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--down);
}

button.link-button {
    background: none;
    color: var(--muted);
    padding: 4px 8px;
    font-weight: 400;
    text-decoration: underline;
}

.hint { color: var(--muted); font-size: 0.9rem; }

.secret {
    background: var(--card);
    border: 1px solid var(--up);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.secret code { font-size: 1.05rem; user-select: all; }

.message.success { color: var(--up); }
.message.error { color: var(--down); }

.tile-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tile {
    background: var(--card);
    border-radius: 12px;
    padding: 14px 16px;
}

.tile.dragging {
    opacity: 0.45;
}

.tile-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.drag-handle {
    cursor: grab;
    color: var(--muted);
    font-size: 1.2rem;
}

.tile-icon {
    font-size: 1.5rem;
}

.tile-text {
    flex: 1;
    min-width: 0;
}

.tile-name {
    font-weight: 600;
}

.tile-desc {
    color: var(--muted);
    font-size: 0.9rem;
}

.tile-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.tile.editing {
    padding: 16px;
}

.add-tile {
    background: var(--card);
    border-radius: 12px;
    padding: 20px;
}

.add-tile h2 {
    margin-top: 0;
    font-size: 1.1rem;
}

/* Account page tabs */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--card-hover);
}

.tabs [role="tab"] {
    padding: 10px 16px;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.tabs [role="tab"]:hover,
.tabs [role="tab"]:focus-visible {
    background: var(--card);
    color: var(--ink);
    outline: none;
}

.tabs [role="tab"][aria-selected="true"] {
    border-bottom-color: var(--up);
    background: var(--card);
    color: var(--ink);
}

.tabs [hidden] { display: none; }

.narrow-panel {
    max-width: 420px;
}