body { font-family: 'Comic Sans MS', 'Comic Sans', cursive; background: #ffffff; color: #000000; margin: 0; }
a { color: #0000FF; }
a:visited { color: #800080; }
a:hover { color: #FF0000; }
hr { border: 1px inset; }


.login-container { text-align: center; padding-top: 100px; }
.login-container h1 { font-size: 36px; color: #FF00FF; }
.login-subtitle { font-size: 14px; color: #808080; }


.btn { padding: 8px 16px; cursor: pointer; font-family: 'Comic Sans MS', cursive; font-size: 14px; border: 2px outset #808080; background: #C0C0C0; color: #000000; }
.btn:hover { background: #A0A0A0; }
.btn:active { border-style: inset; }
.btn-twitch { background: #9146ff; color: #FFFFFF; border-color: #6a2bc7; font-weight: bold; font-size: 16px; }
.btn-small { padding: 2px 8px; font-size: 12px; }

.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 180px; background: #E8E8E8; border-right: 3px ridge #808080; padding: 0; }
.sidebar-header { padding: 10px; border-bottom: 2px groove #808080; background: #000080; color: #FFFFFF; }
.sidebar-header h2 { font-size: 16px; margin: 0; }
.username { font-size: 11px; color: #FFFF00; }
.sidebar ul { list-style: none; padding: 5px 0; margin: 0; }
.nav-link { display: block; padding: 4px 10px; color: #0000FF; font-size: 13px; text-decoration: underline; }
.nav-link:hover { background: #FFFF00; color: #FF0000; text-decoration: underline; }
.nav-divider { height: 2px; background: #808080; margin: 4px 8px; }
.control-panel { padding: 8px 10px; border-top: 2px groove #808080; border-bottom: 2px groove #808080; background: #D8D8D8; }
.control-panel-title { font-size: 12px; font-weight: bold; color: #000080; margin-bottom: 4px; }
.control-btns { display: flex; gap: 3px; margin-bottom: 3px; flex-wrap: wrap; }
.ctrl-btn { font-size: 11px; padding: 2px 6px; }
.ctrl-on { background: #00CC00; color: #FFFFFF; border-color: #006600; }
.ctrl-off { background: #CC0000; color: #FFFFFF; border-color: #800000; }
.ctrl-input { width: 80px; font-size: 11px; padding: 2px 3px; }

.sidebar-footer { padding: 8px 10px; border-top: 2px groove #808080; font-size: 11px; }

.content { margin-left: 180px; padding: 15px; }
.content h1 { color: #000080; font-size: 24px; margin-bottom: 10px; }

.card { border: 2px ridge #808080; padding: 10px; margin-bottom: 10px; background: #F0F0F0; }
.card h2 { font-size: 16px; color: #800000; margin: 0 0 8px 0; border-bottom: 1px dashed #808080; padding-bottom: 4px; }

.form-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; }
.form-row label { font-size: 13px; }
.inline-form { display: flex; gap: 4px; align-items: center; }

input[type="text"], input[type="number"], select, textarea {
    border: 2px inset #808080; padding: 3px 5px; font-family: 'Comic Sans MS', cursive;
    font-size: 13px; background: #FFFFFF;
}
.overlay-url { width: 100%; font-family: 'Courier New', monospace; font-size: 12px; cursor: pointer; }
.hint { font-size: 11px; color: #808080; margin-top: 3px; }

.status { font-size: 12px; font-weight: bold; padding: 1px 6px; }
.status-on { background: #00FF00; color: #006600; border: 1px solid #006600; }
.status-off { background: #FF0000; color: #FFFFFF; border: 1px solid #800000; }

.toggle-wrap { display: flex; align-items: center; gap: 8px; }
.input-wrap { display: flex; align-items: center; gap: 6px; }
input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.settings-status { padding: 4px 8px; margin-bottom: 8px; font-size: 13px; font-weight: bold; border: 2px ridge #808080; }
.settings-saved { background: #00FF00; color: #006600; border-color: #006600; }
.settings-error { background: #FF0000; color: #FFFFFF; border-color: #800000; }
.btn:disabled { opacity: 0.6; cursor: default; }
code { font-family: 'Courier New', monospace; font-size: 12px; background: #E0E0E0; padding: 1px 3px; border: 1px inset #C0C0C0; }

.voice-config-panel { background: #E8E8E8; border: 2px inset #808080; padding: 8px; }
.voice-config-panel .form-row { padding: 4px 0; }
input[type="range"] { width: 200px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; border: 2px ridge #808080; }
th { text-align: left; padding: 4px; background: #000080; color: #FFFFFF; font-weight: bold; }
td { padding: 4px; border: 1px solid #C0C0C0; }
tr:hover td { background: #FFFF99; }
thead tr:hover th { background: #000080; }

.btn-danger { background: #CC0000; color: #FFFFFF; border-color: #800000; }
.btn-danger:hover { background: #AA0000; }

.lookup-panel { margin-top: 8px; padding: 6px; border: 2px inset #808080; background: #E8E8E8; font-size: 13px; }

.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 999; }
.modal-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #F0F0F0; border: 3px ridge #808080; padding: 15px; min-width: 350px; }