# File: bimi-checker/assets/css/style.css
.bimichecker{ --ok:#198754; --warn:#f0ad4e; --err:#dc3545; --ink:#111827; --muted:#6b7280; --bg:#ffffff; --card:#ffffff; --line:#e5e7eb; --brand:#0ea5e9; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: var(--ink); }
.bimichecker *{ box-sizing: border-box; }
.bimichecker-form{ display:flex; gap:12px; align-items:end; padding:12px; background:#f8fafc; border:1px solid var(--line); border-radius:12px; }
.bimichecker-field{ display:flex; flex-direction:column; gap:6px; min-width: 220px; }
.bimichecker-field label{ font-weight:600; font-size:14px; color:#374151; }
.bimichecker-field input{ padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:14px; width:100%; }
.bimichecker-btn{ padding:10px 16px; border-radius:10px; background:var(--brand); color:#fff; border:none; font-weight:700; cursor:pointer; box-shadow: 0 6px 20px rgba(14,165,233,0.25); }
.bimichecker-btn.loading{ opacity:.7; cursor:progress; }

.bimichecker-results{ margin-top:16px; }
.bimichecker-summary{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.badge{ display:inline-block; padding:6px 10px; background:#eef2ff; border:1px solid #e5e7eb; border-radius:999px; font-size:12px; }
.alert.error{ padding:10px 12px; background:#fff1f2; border:1px solid #fecdd3; border-radius:10px; }

.bimichecker-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
@media (max-width: 980px){ .bimichecker-grid{ grid-template-columns:1fr; } }

.bimichecker-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow: 0 4px 16px rgba(0,0,0,0.04); }
.bimichecker-card h3{ margin:0 0 8px; font-size:16px; }
.status-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.status-item{ display:flex; align-items:flex-start; gap:10px; padding:8px; border:1px solid var(--line); border-radius:12px; }
.status-item .label{ font-weight:600; }
.status-item .detail{ color:var(--muted); margin-left:auto; font-size:12px; max-width:50%; text-align:right; }
.status-item.status-ok{ border-color: rgba(25,135,84,.35); }
.status-item.status-warn{ border-color: rgba(240,173,78,.45); }
.status-item.status-error{ border-color: rgba(220,53,69,.45); }

.ic{ width:18px; height:18px; display:inline-block; border-radius:50%; border:2px solid var(--line); }
.ic-ok{ background: var(--ok); border-color: var(--ok); }
.ic-warn{ background: var(--warn); border-color: var(--warn); }
.ic-err{ background: var(--err); border-color: var(--err); }

/* Mock email client */
.mock-client{ border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.mock-header{ background:#f3f4f6; padding:10px 12px; border-bottom:1px solid var(--line); font-size:12px; color:#374151; }
.mock-body{ display:flex; gap:12px; padding:12px; }
.mock-logo{ width:56px; height:56px; border-radius:12px; background:#e5e7eb; background-size:cover; background-position:center; border:1px solid var(--line); }
.mock-lines{ flex:1; display:flex; flex-direction:column; gap:8px; padding-top:4px; }
.line{ height:10px; background:#e5e7eb; border-radius:6px; }
.line.short{ width:60%; }