* { box-sizing: border-box; margin: 0; padding: 0; font-family: Tahoma, Arial, sans-serif; }
body { background: #1e1e1e; color: #d4d4d4; overflow: hidden; height: 100vh; }

#user-wrapper { width: 100vw; height: 100vh; }
#main-iframe { width: 100%; height: 100%; border: none; }

#admin-wrapper { display: flex; height: 100vh; width: 100vw; }
#settings-panel { width: 50%; height: 100%; overflow-y: auto; background: #252526; border-left: 1px solid #333; padding: 15px; display: flex; flex-direction: column; }
#preview-panel { width: 50%; height: 100%; display: flex; flex-direction: column; }
#preview-iframe { flex: 1; border: none; background: #fff; }

.panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px solid #444; padding-bottom: 10px; }
.panel-header h2 { font-size: 16px; color: #fff; }

/* Tabs */
.tabs { display: flex; gap: 5px; margin-bottom: 15px; }
.tab-btn { flex: 1; padding: 10px; background: #2d2d30; color: #ccc; border: 1px solid #444; border-radius: 4px 4px 0 0; cursor: pointer; font-size: 12px; }
.tab-btn.active { background: #007acc; color: #fff; border-color: #007acc; }
.tab-content { display: none; flex: 1; overflow: hidden; flex-direction: column; }
.tab-content.active { display: flex; }

/* Rules list */
.rules-list { max-height: 180px; overflow-y: auto; margin-bottom: 15px; border: 1px solid #444; border-radius: 4px; background: #1e1e1e; }
.rule-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-bottom: 1px solid #333; }
.rule-item:last-child { border-bottom: none; }
.rule-pattern { font-size: 11px; color: #4ec9b0; direction: ltr; overflow: hidden; text-overflow: ellipsis; }
.rule-actions button { padding: 3px 8px; font-size: 11px; cursor: pointer; border: none; border-radius: 3px; margin-left: 4px; }
.btn-edit { background: #007acc; color: #fff; }
.btn-del { background: #f44336; color: #fff; }

.rule-editor { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.rule-editor h3 { font-size: 13px; margin-bottom: 10px; color: #569cd6; }
.editor-grid { display: flex; gap: 12px; flex: 1; overflow: hidden; }
.editor-col { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.editor-col h4 { font-size: 12px; color: #ce9178; margin-bottom: 4px; }
.editor-col label { font-size: 11px; color: #9cdcfe; }

.form-group { margin-bottom: 10px; }
.form-group label { display: block; font-size: 12px; margin-bottom: 4px; color: #9cdcfe; }
.form-group small { display: block; color: #666; font-size: 10px; margin-top: 3px; }
.form-control { background: #3c3c3c; border: 1px solid #555; color: #d4d4d4; padding: 6px; border-radius: 3px; font-size: 12px; width: 100%; direction: ltr; }
.code-editor { flex: 1; background: #1e1e1e; border: 1px solid #444; color: #d4d4d4; padding: 6px; border-radius: 3px; font-family: Consolas, monospace; font-size: 11px; resize: none; direction: ltr; min-height: 70px; }
.code-editor:focus { outline: 1px solid #007acc; }

.btn-row { display: flex; gap: 8px; margin-top: 10px; }
.btn-primary { flex: 1; background: #007acc; color: #fff; border: none; padding: 10px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.btn-primary:hover { background: #005999; }
.btn-secondary { background: #555; color: #fff; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.btn-danger, .btn-warn, .btn-success { color: #fff; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 11px; margin-left: 5px; }
.btn-danger { background: #f44336; }
.btn-warn { background: #ff9800; }
.btn-success { background: #4caf50; }

/* Resources tab */
.res-header { display: flex; gap: 8px; margin-bottom: 10px; }
.res-header input { flex: 1; }
.res-header button { white-space: nowrap; padding: 6px 15px; font-size: 12px; flex: none; width: auto; }
.res-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; padding: 8px; background: #1e1e1e; border-radius: 4px; }
.res-filters label { font-size: 11px; color: #ccc; cursor: pointer; }
.res-hint { font-size: 11px; color: #888; margin-bottom: 8px; }
.res-list { flex: 1; overflow-y: auto; border: 1px solid #444; border-radius: 4px; background: #1e1e1e; }
.res-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid #2a2a2a; font-size: 11px; }
.res-item:last-child { border-bottom: none; }
.res-item.blocked { opacity: 0.4; background: #2a1a1a; text-decoration: line-through; }
.res-item label { flex: 1; cursor: pointer; display: flex; gap: 6px; align-items: center; overflow: hidden; }
.res-type { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 9px; text-transform: uppercase; flex: none; }
.res-type-js { background: #f7df1e; color: #000; }
.res-type-css { background: #2965f1; color: #fff; }
.res-type-font { background: #9333ea; color: #fff; }
.res-type-image { background: #10b981; color: #fff; }
.res-type-other { background: #666; color: #fff; }
.res-url { direction: ltr; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4ec9b0; }
.res-actions { display: flex; gap: 8px; margin-top: 10px; }
.res-actions button { flex: 1; padding: 8px; font-size: 12px; }

.preview-header { padding: 8px; background: #333; color: #ccc; font-size: 11px; display: flex; justify-content: space-between; border-bottom: 1px solid #444; }
#current-url-display { direction: ltr; color: #4ec9b0; font-size: 10px; }