/* gotta make it look good */
/* css is weird sometimes */
.btn-primary, .btn-secondary, .btn-ghost {
 width: 100%;
 padding: 6px 10px;
 font-size: 11.5px;
 font-family: var(--font-ui);
 cursor: pointer;
 border-radius: 3px;
 transition: background 0.12s, opacity 0.12s;
 border: 0.5px solid transparent;
 text-align: center;
}

.btn-primary {
 background: var(--purple);
 color: #fff;
 border-color: var(--purple);
 font-weight: 500;
}
.btn-primary:hover { opacity: 0.88; }

.btn-secondary {
 background: var(--bg-primary);
 color: var(--text-primary);
 border-color: var(--border);
}
.btn-secondary:hover { background: var(--bg-secondary); }

.btn-ghost {
 background: transparent;
 color: var(--text-tertiary);
}
.btn-ghost:hover { color: var(--text-secondary); background: var(--bg-secondary); }

/* tweaking styles */
.select-input, .text-input {
 width: 100%;
 font-size: 11.5px;
 font-family: var(--font-ui);
 padding: 5px 8px;
 border: 0.5px solid var(--border);
 border-radius: 3px;
 background: var(--bg-primary);
 color: var(--text-primary);
}

.slider {
 width: 100%;
 height: 3px;
 appearance: none;
 background: var(--border);
 border-radius: 2px;
 outline: none;
 cursor: pointer;
}
.slider::-webkit-slider-thumb {
 appearance: none;
 width: 13px; height: 13px;
 border-radius: 50%;
 background: var(--purple);
 cursor: pointer;
 border: 2px solid var(--bg-primary);
}

/* tweaking styles */
.panel-controls .btn-primary,
.panel-controls .btn-secondary,
.panel-controls .btn-ghost {
 padding: calc(6px * var(--content-scale)) calc(10px * var(--content-scale));
 font-size: calc(11.5px * var(--content-scale));
 border-radius: calc(3px * var(--content-scale));
}
.panel-controls .select-input,
.panel-controls .text-input {
 font-size: calc(11.5px * var(--content-scale));
 padding: calc(5px * var(--content-scale)) calc(8px * var(--content-scale));
 border-radius: calc(3px * var(--content-scale));
}
.panel-controls .slider { height: calc(3px * var(--content-scale)); }
.panel-controls .slider::-webkit-slider-thumb {
 width: calc(13px * var(--content-scale));
 height: calc(13px * var(--content-scale));
}

/* css is weird sometimes */
.modal-backdrop {
 position: fixed; inset: 0; z-index: 8888;
 background: rgba(0,0,0,.45);
 display: flex; align-items: center; justify-content: center;
 opacity: 0; pointer-events: none; transition: opacity .3s;
}
.modal-backdrop.visible { opacity: 1; pointer-events: auto; }

.modal-box {
 background: var(--bg-primary); border: 0.5px solid var(--border);
 box-shadow: 0 20px 60px rgba(0,0,0,.18); border-radius: 6px;
 padding: 24px; max-width: 680px; width: 92%;
 max-height: 85vh; overflow-y: auto;
}

/* mobile view maybe? */
.sheet-table {
 width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 10px;
}
.sheet-table th, .sheet-table td {
 padding: 6px 8px; border: 0.5px solid var(--border); text-align: left;
}
.sheet-table th {
 background: var(--bg-secondary); font-weight: 600; color: var(--text-tertiary);
 text-transform: uppercase; letter-spacing: 0.05em;
}