body { background: #f8f9fa; transition: background 0.3s; }
.panel {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    padding: 2rem 1.5rem;
    margin-bottom: 2rem;
    transition: box-shadow 0.3s, background 0.3s;
}
.panel:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.copy-btn { margin-left: 0.5rem; transition: background 0.2s, color 0.2s, border 0.2s; }
.section-title { font-weight: 700; margin-bottom: 1.2rem; font-size: 1.2rem; letter-spacing: 0.5px; }
.security-note {
    border-left: 6px solid var(--note-border);
    padding: 12px 16px;
    font-size: 15px;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    background-color: var(--note-bg);
    color: var(--note-text);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
body:not(.bg-dark) {
    --note-bg: #fff3cd;
    --note-text: #856404;
    --note-border: #ffecb5;
}
body.bg-dark {
    --note-bg: #3b3b1f;
    --note-text: #f0e68c;
    --note-border: #aaa04a;
}
body.bg-dark textarea.form-control {
    background-color: #232323 !important;
    color: #f0e68c !important;
    border-color: #555 !important;
}
body.bg-dark textarea.form-control:focus {
    background-color: #232323 !important;
    color: #f0e68c !important;
    border-color: #aaa04a !important;
    box-shadow: 0 2px 8px rgba(160,160,74,0.10);
}
body.bg-dark .copy-btn {
    background-color: #444 !important;
    color: #f0e68c !important;
    border-color: #aaa04a !important;
}
button, .btn {
    border-radius: 8px !important;
    transition: box-shadow 0.2s, background 0.2s, color 0.2s;
}
button:hover, .btn:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    filter: brightness(1.05);
}
textarea.form-control {
    border-radius: 8px;
    transition: box-shadow 0.2s, border 0.2s;
}
textarea.form-control:focus {
    box-shadow: 0 2px 8px rgba(0,123,255,0.10);
    border-color: #80bdff;
}
.security-note svg {
    flex-shrink: 0;
    margin-right: 8px;
    fill: var(--note-text);
}
body.bg-dark textarea.form-control::placeholder {
    color: #f0e68c !important;
    opacity: 0.7;
}
@media (max-width: 768px) {
    .row-panels { flex-direction: column; }
    .panel { margin-bottom: 1rem; }
}
@media (max-width: 576px) {
    textarea { font-size: 14px; }
    button { font-size: 14px; }
}