/* Tweaks panel styles */
.tweaks {
    position: fixed;
    right: 20px; bottom: 20px;
    z-index: 200;
    width: 320px;
    max-width: calc(100vw - 40px);
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line-faint);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.18);
    transform: translateY(20px) scale(.96);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
    font-family: var(--sans);
}
.tweaks.open { opacity: 1; transform: none; pointer-events: auto; }

.tweaks header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-faint);
    font-family: var(--mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.18em;
}
.tweaks__close {
    width: 28px; height: 28px;
    border-radius: 50%;
    font-size: 18px; line-height: 1;
    background: var(--cream);
    color: var(--ink);
}
.tweaks__close:hover { background: var(--ink); color: #fff; }

.tweaks__body { padding: 18px; display: flex; flex-direction: column; gap: 18px; }

.tweaks__group label {
    display: block;
    font-family: var(--mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--muted);
    margin-bottom: 10px;
}
.tweaks__group .tweaks__hint { text-transform: none; letter-spacing: 0; opacity: .6; }

.tweaks__swatches { display: flex; gap: 10px; }
.tweaks__sw {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid var(--line-faint);
    transition: transform .2s, border-color .2s;
}
.tweaks__sw:hover { transform: scale(1.08); }
.tweaks__sw.is-on { border-color: var(--ink); }
.tweaks__sw--terracotta { background: #C4704B; }
.tweaks__sw--ink        { background: #1A1A1A; }
.tweaks__sw--sage       { background: #6B7F6A; }
.tweaks__sw--cobalt     { background: #2B4A8C; }

.tweaks__seg {
    display: flex;
    gap: 4px;
    background: var(--cream);
    padding: 4px;
    border-radius: 999px;
}
.tweaks__seg button {
    flex: 1;
    padding: 9px 10px;
    font-family: var(--mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.1em;
    border-radius: 999px;
    color: var(--muted);
    transition: background .2s, color .2s;
}
.tweaks__seg button.is-on { background: var(--ink); color: #fff; }

.tweaks__note {
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    margin-top: 4px;
}