: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 { 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 { 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; }

.panel { display:none; }
.panel.active { display:block; }

.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; }
.card-icon i { font-size:13px; line-height:1; }

.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; }

.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; box-sizing:border-box; }
.field input:not([type="radio"]):not([type="checkbox"]), .field select { height:38px; line-height:1.2; }
.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, .field select.auto { background:#f8fff9; border-color:#86efac; }
@keyframes flashAuto { 0% { background-color:rgba(0,188,212,0.30); box-shadow:0 0 0 3px rgba(0,188,212,0.25); } 100% { background-color:#f8fff9; box-shadow:none; } }
.field input.auto.flash, .field textarea.auto.flash, .field select.auto.flash { animation:flashAuto 1.2s ease-out; }
.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 input.warn { border-color:#f59e0b; }
.field input.warn:focus { box-shadow:0 0 0 3px rgba(245,158,11,.15); }
.field-error { font-size:11px; color:var(--danger); margin-top:2px; }
.field-warn { font-size:11px; color:#b45309; 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); }

.radio-label { font-size:12px; cursor:pointer; }
.card-tag { font-size:11px; color:var(--muted); font-weight:400; }
.card-desc { font-size:12px; color:var(--muted); margin-bottom:10px; }
.card-desc-sm { font-size:11px; color:var(--muted); margin-bottom:8px; }

.policy-preview-row { gap:16px; align-items:start; }
.policy-preview-card { padding:12px; background:#f9fafb; border:1px solid var(--border); border-radius:var(--radius); min-width:0; }

.policy-preview-header { font-size:12px; font-weight:600; margin-bottom:6px; }
.policy-preview-header--access { color:#0369a1; }
.policy-preview-header--contract { color:#7c3aed; }

.policy-preview-meta { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.policy-preview-id { font-size:12px; background:#f6f8fa; padding:2px 6px; border-radius:4px; }
.policy-preview-level { font-size:10px; padding:2px 8px; border-radius:8px; font-weight:600; }
.policy-preview-billing-badge { font-size:10px; padding:2px 8px; border-radius:8px; background:#dcfce7; color:#166534; font-weight:600; }
.policy-preview-edit { font-size:11px; color:var(--primary); margin-left:auto; }

.health-status { font-size:12px; }
.health-status--checking { color:#6b7280; }
.health-status--ok { color:#15803d; }
.health-status--warn { color:#b45309; }
.health-status--error { color:#dc2626; }

.policy-preview-summary { min-height:48px; margin-bottom:8px; }
.policy-preview-json summary { cursor:pointer; font-size:11px; color:var(--muted); }
.policy-preview-json pre { background:#1e1e2e; color:#cdd6f4; padding:10px; border-radius:var(--radius); overflow-x:auto; font-size:10px; margin-top:6px; max-height:250px; overflow-y:auto; overflow-anchor:none; scrollbar-width:thin; }

.help-tip { position:relative; display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:var(--border); color:var(--muted); font-size:10px; font-weight:700; cursor:help; margin-left:4px; user-select:none; transition:background .15s, color .15s; vertical-align:middle; }
.help-tip:hover, .help-tip:focus-visible { background:var(--primary); color:#fff; outline:none; }
.help-tip::after {
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%) scale(.95);
  background:#1f2937; color:#fff; font-size:11px; font-weight:400; line-height:1.4;
  padding:6px 9px; border-radius:6px; white-space:normal;
  min-width:180px; max-width:280px; text-align:left;
  opacity:0; pointer-events:none;
  transition:opacity .15s, transform .15s;
  z-index:1000; box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.help-tip::before {
  content:""; position:absolute; bottom:calc(100% + 1px); left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#1f2937;
  opacity:0; transition:opacity .15s; pointer-events:none;
}
.help-tip:hover::after, .help-tip:focus-visible::after,
.help-tip:hover::before, .help-tip:focus-visible::before { opacity:1; transform:translateX(-50%) scale(1); }

.password-wrap { position:relative; }
.password-wrap input { padding-right:36px; }
.password-toggle-btn { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; padding:4px; color:var(--muted); font-size:14px; line-height:1; }
.password-toggle-btn:hover { color:var(--primary); }
.password-toggle-btn:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:4px; }

.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.dragover { border-style:solid; border-color:var(--primary); background:rgba(0,188,212,.10); box-shadow:0 0 0 4px rgba(0,188,212,.18); transform:scale(1.01); }
.upload.dragover .icon { color:var(--primary); }
.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); }

.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); }
.ops-scroll { max-height:420px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius); }
.ops-scroll .ops-table thead th { position:sticky; top:0; background:#fff; z-index:2; box-shadow:inset 0 -2px 0 var(--border); border-bottom:none; }
.ops-search { display:flex; gap:8px; margin-bottom:8px; align-items:center; }
.ops-search input { flex:1; padding:6px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:12px; }
.ops-search input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,188,212,.15); }
.ops-empty-match { padding:20px; text-align:center; color:var(--muted); font-size:12px; font-style:italic; }
.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; }

.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; align-items:center; }
.btn-row .btn-back { margin-right:auto; }

.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; }

.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; }

.alert { padding:10px 16px; border-radius:var(--radius); font-size:12px; margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.alert > .alert-content { flex:1; }
.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; }
.alert-close { background:none; border:none; cursor:pointer; font-size:18px; font-weight:bold; line-height:1; padding:0 4px; color:inherit; opacity:0.55; flex-shrink:0; }
.alert-close:hover { opacity:1; }

.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 { 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); }

.simple-mode-toggle {
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 12px 5px 6px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  color:#fff; font-size:12px; font-weight:600; letter-spacing:.2px;
  cursor:pointer; user-select:none;
  transition:background .2s, border-color .2s;
}
.simple-mode-toggle:hover { background:rgba(255,255,255,.28); border-color:rgba(255,255,255,.55); }
.simple-mode-toggle input[type="checkbox"] { position:absolute; opacity:0; pointer-events:none; }
.simple-mode-switch {
  position:relative; width:32px; height:18px;
  background:rgba(0,0,0,.22); border-radius:999px;
  transition:background .25s ease;
  flex-shrink:0;
}
.simple-mode-switch::after {
  content:""; position:absolute; top:2px; left:2px;
  width:14px; height:14px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.simple-mode-toggle input:checked ~ .simple-mode-switch { background:#16a34a; }
.simple-mode-toggle input:checked ~ .simple-mode-switch::after { transform:translateX(14px); }
.simple-mode-toggle input:focus-visible ~ .simple-mode-switch { box-shadow:0 0 0 3px rgba(255,255,255,.5); }
body.simple-mode .simple-mode-toggle { background:rgba(255,255,255,.95); color:var(--primary-dark); border-color:#fff; }
body.simple-mode #panel1 [data-simple-hide="true"],
body.simple-mode #panel2 [data-simple-hide="true"] { display:none !important; }

body.simple-mode #panel2 {
  background:var(--card);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  padding:4px 0;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
body.simple-mode #panel2 > .card {
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none !important;
  margin:0;
  padding:18px 22px;
}
body.simple-mode #panel2 > .card:hover { box-shadow:none !important; }
body.simple-mode #panel2 > .card + .card { border-top:1px solid var(--border); }
body.simple-mode #panel2 > .btn-row {
  margin:0;
  padding:16px 22px;
  border-top:1px solid var(--border);
}
body.simple-mode #panel2 .card > h3 .card-icon { width:22px; height:22px; }
body.simple-mode #panel2 .card > h3 .card-icon i { font-size:11px; }
body.simple-mode #panel2 .card > h3 { font-size:13px; margin-bottom:10px; }

body[data-active-policy-tab="access"] #policyTabContract,
body:not([data-active-policy-tab]) #policyTabContract { display:none !important; }
body[data-active-policy-tab="contract"] #policyTabAccess { display:none !important; }

body.simple-mode .policy-sections-host { display:none !important; }
body:not(.simple-mode) .policy-summary { display:none !important; }
body.simple-mode .policy-add-popup { display:block; margin-top:12px; text-align:center; }
body:not(.simple-mode) .policy-add-popup { display:none !important; }

.policy-summary { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.policy-summary .rule-empty { font-size:12px; color:var(--muted); font-style:italic; padding:14px 12px; text-align:center; border:1px dashed var(--border); border-radius:var(--radius); background:#fafafa; }
.policy-summary .rule-item { display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; font-size:12px; }
.policy-summary .rule-item-icon { font-size:14px; line-height:1; flex-shrink:0; }
.policy-summary .rule-item-text { flex:1; font-family:'SFMono-Regular', Menlo, Consolas, monospace; font-size:11.5px; color:#1f2937; word-break:break-word; }
.policy-summary .rule-item-x { background:none; border:none; cursor:pointer; font-size:18px; line-height:1; color:var(--muted); padding:0 4px; transition:color .15s; }
.policy-summary .rule-item-x:hover { color:var(--danger); }
.policy-summary .rule-item-perm { border-left:3px solid var(--success); }
.policy-summary .rule-item-prohib { border-left:3px solid var(--danger); }
.policy-summary .rule-item-oblig { border-left:3px solid #0369a1; }
.policy-add-unified { display:inline-flex; align-items:center; gap:8px; padding:10px 22px; font-size:13px; }
.policy-add-unified i { font-size:11px; }

.rule-dialog { border:none; border-radius:var(--radius); padding:22px 22px 18px; max-width:480px; width:90vw; box-shadow:0 12px 40px rgba(0,0,0,.18); position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); margin:0; max-height:90vh; overflow:auto; }
.rule-dialog::backdrop { background:rgba(15,23,42,.45); backdrop-filter:blur(2px); }
.rule-dialog-options { display:flex; flex-direction:column; gap:8px; }
.rule-option { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1.5px solid var(--border); border-radius:var(--radius); background:#fff; cursor:pointer; text-align:left; transition:border-color .15s, background .15s, transform .1s; }
.rule-option:hover { border-color:var(--primary); background:rgba(0,188,212,.05); }
.rule-option:active { transform:scale(.99); }
.rule-option-icon { font-size:18px; line-height:1; flex-shrink:0; }
.rule-option-text { display:flex; flex-direction:column; gap:2px; }
.rule-option-text strong { font-size:13px; font-weight:700; color:#1f2937; }
.rule-option-text small { font-size:11px; color:var(--muted); }

.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-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); }

@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; }
}