:root { --primary:#00BCD4; --primary-dark:#0097A7; --success:#4caf50; --warning:#9a6700; --danger:#cf222e; --bg:#ffffff; --card:#ffffff; --border:#e0e0e0; --text:#2c3e50; --muted:#607d8b; --radius:12px; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; background:var(--bg); color:var(--text); font-size:14px; line-height:1.5; }
.container { max-width:900px; margin:0 auto; padding:24px 16px 80px; }

/* Header */
header { margin-bottom:28px; display:flex; align-items:center; gap:12px; justify-content:space-between; background:var(--primary); border-radius:50px; padding:12px 28px; color:#fff; }
.logo { width:36px; height:36px; background:none; border-radius:0; flex-shrink:0; }
header h1 { font-size:20px; font-weight:700; color:#fff; }
header p { color:rgba(255,255,255,0.85); font-size:12px; }

/* Steps */
.steps { display:flex; gap:8px; margin-bottom:28px; }
.step { flex:1; padding:12px 14px; background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius); cursor:pointer; text-align:center; font-size:12px; font-weight:600; color:var(--muted); transition:all .3s cubic-bezier(0.4,0,0.2,1); }
.step:hover { border-color:var(--primary); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,188,212,.15); }
.step.active { border-color:var(--primary); color:var(--primary); background:rgba(0,188,212,.08); box-shadow:0 4px 12px rgba(0,188,212,.15); }
.step.done { border-color:var(--success); color:var(--success); background:rgba(76,175,80,.06); }
.step-num { display:block; font-size:18px; font-weight:800; margin-bottom:2px; }

/* Panels */
.panel { display:none; }
.panel.active { display:block; }

/* Cards */
.card { background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:16px; box-shadow:0 2px 8px rgba(0,0,0,.04); transition:box-shadow .2s; }
.card:hover { box-shadow:0 4px 16px rgba(0,0,0,.08); }
.card h3 { font-size:14px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.card-icon { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; flex-shrink:0; font-weight:700; }

/* Collapsible cards */
.card-header-toggle { all:unset; display:flex; align-items:center; gap:8px; width:100%; cursor:pointer; font-size:14px; font-weight:700; }
.card-header-toggle:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:4px; }
.card-chevron { margin-left:auto; font-size:10px; color:var(--muted); transition:transform .25s ease; }
.card.collapsed .card-chevron { transform:rotate(-90deg); }
.card.collapsed > :not(h3) { display:none !important; }
.card.collapsed h3 { margin-bottom:0; }

/* Fields */
.field { margin-bottom:14px; }
.field:last-child { margin-bottom:0; }
.field label { display:block; font-size:12px; font-weight:600; margin-bottom:3px; }
.field input, .field select, .field textarea { width:100%; padding:8px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:13px; font-family:inherit; background:#fff; transition:border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,188,212,.15); }
.field input.auto, .field textarea.auto { background:#f8fff9; border-color:#86efac; }
.field input.error, .field select.error { border-color:var(--danger); }
.field input.error:focus, .field select.error:focus { box-shadow:0 0 0 3px rgba(207,34,46,.1); }
.field input.valid, .field select.valid { border-color:var(--success); }
.field input.valid:focus, .field select.valid:focus { box-shadow:0 0 0 3px rgba(76,175,80,.15); }
.field-error { font-size:11px; color:var(--danger); margin-top:2px; }
.field textarea { resize:vertical; min-height:60px; }
.field .hint { font-size:11px; color:var(--muted); margin-top:2px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.req { color:var(--danger); }

/* Upload */
.upload { border:2px dashed var(--border); border-radius:var(--radius); padding:28px; text-align:center; cursor:pointer; transition:all .3s; }
.upload:hover { border-color:var(--primary); background:rgba(0,188,212,.04); }
.upload input { display:none; }
.upload .icon { font-size:28px; margin-bottom:4px; }
.upload h3 { font-size:14px; }
.upload p { font-size:12px; color:var(--muted); }

/* Operations table */
.ops-table { width:100%; border-collapse:collapse; font-size:12px; }
.ops-table th { text-align:left; padding:8px 10px; border-bottom:2px solid var(--border); font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; }
.ops-table td { padding:6px 10px; border-bottom:1px solid var(--border); }
.ops-table tr:hover { background:rgba(0,188,212,.03); }
.method { font-weight:700; font-size:11px; padding:2px 8px; border-radius:50px; color:#fff; }
.method-GET { background:#4caf50; }
.method-POST { background:#00BCD4; }
.method-PUT { background:#9a6700; }
.method-DELETE { background:#cf222e; }
.method-PATCH { background:#6f42c1; }

/* Buttons */
.btn { padding:10px 28px; border:none; border-radius:50px; font-size:13px; font-weight:700; cursor:pointer; transition:all .3s cubic-bezier(0.4,0,0.2,1); letter-spacing:.3px; }
.btn:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.12); }
.btn:active { transform:translateY(-1px); }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-primary:disabled { background:#b2dfdb; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover { background:#388e3c; }
.btn-outline { background:#fff; border:1.5px solid var(--primary); color:var(--primary); }
.btn-outline:hover { background:rgba(0,188,212,.06); }
.btn-row { display:flex; gap:10px; margin-top:20px; justify-content:flex-end; }

/* Level selector */
.levels { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.level-card { border:1.5px solid var(--border); border-radius:var(--radius); padding:16px; cursor:pointer; transition:all .3s cubic-bezier(0.4,0,0.2,1); text-align:center; background:var(--card); }
.level-card:hover { border-color:var(--primary); transform:translateY(-2px); box-shadow:0 6px 15px rgba(0,188,212,.12); }
.level-card.selected { border-color:var(--primary); background:rgba(0,188,212,.06); box-shadow:0 4px 12px rgba(0,188,212,.15); }
.level-card h4 { font-size:13px; font-weight:700; margin-bottom:4px; }
.level-card p { font-size:11px; color:var(--muted); }
.level-badge { display:inline-block; padding:2px 10px; border-radius:50px; font-size:11px; font-weight:700; margin-bottom:6px; }
.level-1 .level-badge { background:#e0f2f1; color:#00695c; }
.level-2 .level-badge { background:#e0f7fa; color:#006064; }
.level-3 .level-badge { background:#fff8e1; color:#8a3a00; }

/* Results */
.result-item { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border); font-size:12px; }
.result-item:last-child { border:none; }
.result-icon { font-size:14px; flex-shrink:0; }
.result-summary { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-top:16px; }
.result-summary h3 { margin-bottom:10px; }
.result-stat { display:flex; gap:16px; font-size:13px; margin-bottom:4px; }
.result-stat strong { min-width:80px; }

/* Alerts */
.alert { padding:10px 16px; border-radius:var(--radius); font-size:12px; margin-bottom:14px; }
.alert-info { background:#e0f7fa; border:1px solid #80deea; color:#006064; }
.alert-warn { background:#fff8e1; border:1px solid #ffe082; color:#bf360c; }
.alert-success { background:#e8f5e9; border:1px solid #a5d6a7; color:#2e7d32; }
.alert-error { background:#ffebee; border:1px solid #ef9a9a; color:#c62828; }

/* Loading */
.loading { text-align:center; padding:40px; }
.spinner { display:inline-block; width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Lang toggle */
.lang-toggle { display:flex; gap:2px; background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.3); border-radius:50px; overflow:hidden; font-size:12px; font-weight:700; flex-shrink:0; }
.lang-btn { padding:5px 12px; cursor:pointer; border:none; background:transparent; color:rgba(255,255,255,0.7); transition:.2s; border-radius:50px; }
.lang-btn.active { background:#fff; color:var(--primary); }

/* Policy editor */
.policy-section { margin-top:12px; padding:14px; background:rgba(0,188,212,.03); border:1px solid var(--border); border-radius:var(--radius); }
.policy-section h4 { font-size:12px; font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.btn-add { padding:6px 16px; border:1.5px dashed var(--border); border-radius:50px; background:transparent; cursor:pointer; font-size:11px; font-weight:600; color:var(--muted); transition:all .2s; }
.btn-add:hover { border-color:var(--primary); color:var(--primary); background:rgba(0,188,212,.06); }

/* Rule blocks (permissions, prohibitions, obligations) — unified grid */
.rule-block { border:1px solid var(--border); border-radius:var(--radius); background:#fff; margin-bottom:8px; overflow:hidden; }
.rule-block-header { display:grid; grid-template-columns:1fr auto 1fr auto auto; gap:6px; align-items:center; padding:10px; }
.rule-block-header select, .rule-block-header input { padding:6px 10px; border:1.5px solid var(--border); border-radius:8px; font-size:12px; font-family:inherit; transition:border-color .2s; }
.rule-block-header select:focus, .rule-block-header input:focus { outline:none; border-color:var(--primary); }
.rule-block-header .btn-icon { width:28px; height:28px; border:1.5px solid var(--border); border-radius:50%; background:#fff; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; color:var(--danger); transition:all .2s; flex-shrink:0; }
.rule-block-header .btn-icon:hover { background:#fee2e2; border-color:var(--danger); }
.rule-block-header .status-badge { font-size:10px; white-space:nowrap; }
.rule-block-header .btn-add-inline { padding:4px 12px; border:1.5px dashed var(--border); border-radius:50px; background:transparent; cursor:pointer; font-size:10px; font-weight:600; color:var(--primary); transition:all .2s; white-space:nowrap; }
.rule-block-header .btn-add-inline:hover { border-color:var(--primary); background:rgba(0,188,212,.06); }
.rule-block-body { padding:0 10px 10px; }
.rule-block-body .rule-constraint-row { display:grid; grid-template-columns:1fr auto 1fr auto; gap:6px; align-items:center; margin-bottom:4px; }
.rule-block-body .rule-constraint-row:last-child { margin-bottom:0; }
.rule-block-body select, .rule-block-body input { padding:5px 8px; border:1.5px solid var(--border); border-radius:6px; font-size:11px; font-family:inherit; transition:border-color .2s; }
.rule-block-body select:focus, .rule-block-body input:focus { outline:none; border-color:var(--primary); }
.rule-block-body .btn-icon { width:24px; height:24px; border:1.5px solid var(--border); border-radius:50%; background:#fff; cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; color:var(--danger); transition:all .2s; flex-shrink:0; }
.rule-block-body .btn-icon:hover { background:#fee2e2; border-color:var(--danger); }

/* Live preview */
.preview-toggle { position:fixed; bottom:16px; right:16px; z-index:100; padding:10px 20px; background:var(--primary); color:#fff; border:none; border-radius:50px; cursor:pointer; font-size:12px; font-weight:700; box-shadow:0 4px 16px rgba(0,188,212,.3); transition:all .3s; }
.preview-toggle:hover { background:var(--primary-dark); transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,188,212,.4); }
.preview-panel { position:fixed; top:0; right:-480px; width:480px; height:100vh; background:#1e1e2e; color:#cdd6f4; z-index:200; transition:right .3s; display:flex; flex-direction:column; box-shadow:-4px 0 20px rgba(0,0,0,.2); }
.preview-panel.open { right:0; }
.preview-header { padding:12px 16px; background:#181825; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #313244; flex-shrink:0; }
.preview-header h3 { font-size:13px; color:#cdd6f4; }
.preview-close { background:none; border:none; color:#cdd6f4; font-size:18px; cursor:pointer; padding:4px 8px; }
.preview-tabs { display:flex; background:#181825; border-bottom:1px solid #313244; flex-shrink:0; }
.preview-tab { padding:8px 14px; font-size:11px; font-weight:600; color:#6c7086; cursor:pointer; border:none; background:none; border-bottom:2px solid transparent; }
.preview-tab.active { color:#89b4fa; border-bottom-color:#89b4fa; }
.preview-body { flex:1; overflow:auto; padding:12px; }
.preview-body pre { font-size:11px; line-height:1.5; white-space:pre-wrap; word-break:break-word; margin:0; }
.preview-body .json-key { color:#89b4fa; }
.preview-body .json-string { color:#a6e3a1; }
.preview-body .json-number { color:#fab387; }
.preview-body .json-bool { color:#f38ba8; }
.preview-body .json-null { color:#6c7086; }

@keyframes fadeIn { from { opacity:0; transform:translateX(-50%) translateY(-10px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }

@media (max-width:640px) {
  .field-row, .field-row-3, .levels { grid-template-columns:1fr; }
  .steps { flex-direction:column; }
  .rule-block-header { grid-template-columns:1fr !important; }
  .rule-block-body .rule-constraint-row { grid-template-columns:1fr; }
  .preview-panel { width:100vw; right:-100vw; }
}