:root{
  --bg:#f4f6fb;
  --card:#ffffff;
  --muted:#666;
  --accent:#1e73be;
  --accent-2:#0b66c3;
  --danger:#d9534f;
  --radius:10px;
  --shadow-strong:0 10px 30px rgba(10,30,60,0.12);
  --shadow-soft:0 6px 18px rgba(13,30,60,0.04);
  --glass-border:rgba(30,115,190,0.06);
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: #222;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  line-height: 1.35;
  font-size: 14px;

  /* Modern font rendering (cross-browser) */
  font-smooth: always; /* CSS standard (suportado em alguns navegadores) */
}

.container{max-width:1000px;margin:22px auto;padding:12px;}
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.header-left{display:flex;gap:12px;align-items:center;}
.app-icon{width:48px;height:48px;border-radius:8px;}
.app-title{margin:0;font-size:20px;}
.app-sub{margin:2px 0 0;color:var(--muted);font-size:13px;}
.card{background:var(--card);padding:14px;border-radius:var(--radius);box-shadow:var(--shadow-soft);margin-bottom:14px;}
.small{font-size:13px}

.row{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.row.center{justify-content:center}
.input{
  padding:10px;border-radius:8px;border:1px solid #e6eef8;background:#fff;color:#122;font-size:14px;
  min-width:0;
}
.input.small{width:120px;padding:8px}
.input.large{flex:1}
label{font-size:13px;color:var(--muted)}
kbd{background:#eef6ff;border-radius:4px;padding:2px 6px;border:1px solid rgba(30,115,190,0.08);font-weight:700;color:var(--accent-2)}

.btn{
  padding:8px 12px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);background:#fff;cursor:pointer;
  font-weight:700;color:#0b2540;transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:0 2px 6px rgba(10,30,60,0.06);
}
.btn.full{width:100%}
.btn.primary{
  background:linear-gradient(180deg,var(--accent) 0%,#155c9a 100%);color:#fff;border:none;
  box-shadow:0 8px 22px rgba(30,115,190,0.15), inset 0 -2px 0 rgba(0,0,0,0.06);
}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(30,115,190,0.18)}
.btn.primary:active{transform:translateY(0);box-shadow:0 6px 16px rgba(30,115,190,0.12)}
.btn.accent{
  background:linear-gradient(180deg,var(--accent-2) 0%,#095aa0 100%);color:#fff;border:none;
  box-shadow:0 6px 18px rgba(11,102,195,0.12);
}
.btn.accent:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(11,102,195,0.16)}
.btn.danger{background:var(--danger);color:#fff;border:none;box-shadow:none}
.btn:focus,.input:focus{outline:3px solid rgba(30,115,190,0.12);outline-offset:2px}

/* Selected state (blue) for Select button */
.btn.selected{
  background:linear-gradient(180deg,var(--accent) 0%,#155c9a 100%);
  color:#fff;
  border:none;
}

/* Panel card */
.panel-card{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 60%);border-radius:10px;
  padding:12px 12px 18px 12px;border:1px solid var(--glass-border);box-shadow:var(--shadow-soft);
  width:100%;max-width:720px;box-sizing:border-box;margin:0 auto;
}
.panel-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;width:100%;box-sizing:border-box}
.panel-row:first-of-type{margin-top:4px}
.quick-search{display:flex;gap:8px;align-items:center}
.quick-search .input{flex:1;min-width:0}
.quick-search .btn{flex:0 0 82px}

/* Recent queries */
.recent-row{margin-top:8px;width:100%}
.recent-title{font-weight:700}
.recent-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.recent-item{background:#eef6ff;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px}

/* Engines list */
.engines-list{display:flex;flex-direction:column;gap:8px;margin-top:10px;width:100%}
.engine-row{
  display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;border:1px solid #f0f4fb;background:#fbfdff;
  width:100%;box-sizing:border-box;
}
.engine-icon{width:36px;height:36px;border-radius:6px;flex:0 0 36px;background:#fff;display:flex;align-items:center;justify-content:center;border:1px solid #eef6ff}
.engine-icon img{width:20px;height:20px;object-fit:contain}
.engine-meta{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto}
.engine-name{font-weight:600}
.engine-url{display:none;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-word}

/* Engine actions */
.engine-actions{display:flex;gap:6px;flex:0 0 auto}
.engine-actions .btn{padding:6px 8px;font-size:13px}

/* Add engine panel */
.panel{margin-top:12px;padding:12px;border:1px dashed #e6eef8;border-radius:8px}
.form-error{color:var(--danger);margin-top:8px}

/* Drag over hint */
.engine-row.drag-over{outline:2px dashed rgba(30,115,190,0.14);transform:translateY(-2px)}

/* Card header actions aligned horizontally */
.card-header{display:flex;justify-content:space-between;align-items:center}
.actions{display:flex;gap:6px;align-items:center}
.actions-top{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* ensure the three groups are aligned in one row and wrap on narrow screens */
.actions-top > .actions{margin:0;padding:0;display:flex;gap:6px;align-items:center}

/* Settings & small controls */
.footer{margin-top:8px;color:var(--muted);font-size:13px;padding:6px}

/* Defensive flex rules */
.input, .engine-url, .engine-meta { min-width:0; flex:1 1 auto; box-sizing:border-box; word-break:break-word; }
.panel-row{justify-content:space-between}
.panel-row > .input{flex:1 1 auto;margin-right:8px}
.engines-list{width:100%}

/* Export/Import hidden input & utilities */
.hidden{display:none}
.small{font-size:13px;color:var(--muted)}
.right{margin-left:auto}

/* Accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Responsive adjustments */
@media (max-width:900px){
  .container{padding:10px}
  .header{flex-direction:column;align-items:flex-start;gap:10px}
  .header-left{align-items:flex-start}
  .engines-list{gap:10px}
  .actions-top{gap:8px}
}

/* Tiny visual polish */
.card .btn{font-weight:600}
.card h2{margin:0 0 8px 0;font-size:16px}
.card h3{margin:0 0 8px 0;font-size:15px}