/* ============================================================
   app/static/css/integrations.css
   Unified design system for ALL integration pages
   (carrier connect + sales platform + private store)
   Uses int-* BEM-style classes.
   RTL/LTR via CSS logical properties throughout.
============================================================ */

/* ── Page shell ─────────────────────────────────────────── */
.int-page {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  padding: 24px 16px 56px;
  box-sizing: border-box;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(37,99,235,.07), transparent 55%),
    radial-gradient(900px 500px at -10% 10%, rgba(16,185,129,.07), transparent 55%),
    linear-gradient(180deg, #f6f9ff, #ffffff);
}
.int-wrap {
  max-width: 1100px;
  margin: 0 auto;
}

/* ── Header row (back + status) ─────────────────────────── */
.int-header {
  margin-bottom: 16px;
}
.int-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* ── Back button ────────────────────────────────────────── */
.int-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.15);
  background: rgba(255,255,255,.85);
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, box-shadow .15s;
  backdrop-filter: blur(6px);
  min-height: 40px;
}
.int-back:hover {
  background: #fff;
  box-shadow: 0 4px 14px rgba(15,23,42,.09);
}
.int-back:focus-visible {
  outline: 2px solid var(--accent, #10b981);
  outline-offset: 2px;
}

/* ── Status badge ───────────────────────────────────────── */
.int-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid;
  transition: background .2s, border-color .2s, color .2s;
}
.int-badge--on {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}
.int-badge--off {
  border-color: #fef08a;
  background: #fefce8;
  color: #854d0e;
}
.int-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.int-badge--on  .int-badge-dot { background: #22c55e; }
.int-badge--off .int-badge-dot { background: #eab308; }

/* ── Hero title block ───────────────────────────────────── */
.int-hero {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  padding: 20px 24px;
  box-shadow: 0 8px 24px rgba(15,23,42,.07);
  backdrop-filter: blur(8px);
  margin-bottom: 18px;
}
.int-hero-title {
  font-size: clamp(19px, 3vw, 24px);
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 5px;
  line-height: 1.25;
}
.int-hero-sub {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.65;
  margin: 0;
}

/* ── Two-column grid ────────────────────────────────────── */
.int-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 860px) {
  .int-grid { grid-template-columns: 1fr; }
}

/* ── Cards ──────────────────────────────────────────────── */
.int-card {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(15,23,42,.09);
  padding: 22px 22px 24px;
}
.int-card-title {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 16px;
}

/* ── Sidebar ────────────────────────────────────────────── */
.int-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.int-side-card {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(15,23,42,.07);
  padding: 16px 18px;
}
.int-side-title {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 7px;
}
.int-side-text {
  font-size: 12px;
  color: #4b5563;
  line-height: 1.7;
  margin: 0;
}
.int-side-list {
  margin: 8px 0 0;
  padding-inline-start: 16px;
  font-size: 12px;
  color: #4b5563;
  line-height: 1.8;
}
.int-side-list li { margin-bottom: 2px; }

/* ── Security / info note box ───────────────────────────── */
.int-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 12px;
  color: #1e40af;
  line-height: 1.6;
}
.int-note--green {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}
.int-note--amber {
  background: #fefce8;
  border-color: #fef08a;
  color: #854d0e;
}
.int-note-icon { flex-shrink: 0; font-size: 16px; }

/* ── Form grid ──────────────────────────────────────────── */
.int-formgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 4px;
}
@media (max-width: 560px) {
  .int-formgrid { grid-template-columns: 1fr; }
}
.int-formgrid--full { grid-column: 1 / -1; }

/* ── Form field ─────────────────────────────────────────── */
.int-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.int-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #111827;
}
.int-label-opt {
  font-size: 11px;
  font-weight: 400;
  color: #6b7280;
  margin-inline-start: 4px;
}

/* ── Inputs ─────────────────────────────────────────────── */
.int-input,
.int-select,
.int-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(15,23,42,.22);
  border-radius: 12px;
  font-size: 13px;
  background: #fff;
  color: #0f172a;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
  font-family: inherit;
}
.int-input::placeholder { color: #9ca3af; }
.int-input:focus,
.int-select:focus,
.int-textarea:focus {
  outline: 2px solid var(--accent, #10b981);
  outline-offset: 1px;
  border-color: var(--accent, #10b981);
  box-shadow: 0 0 0 3px rgba(16,185,129,.15);
}
.int-select { cursor: pointer; }
.int-textarea { resize: vertical; min-height: 80px; }

/* ── Password / secret field ────────────────────────────── */
/* Uses ship.css .pw-field-wrap + .pw-toggle-btn globally.
   Override the padding to match .int-input sizing. */
.int-pw-wrap {
  position: relative;
}
.int-pw-wrap .int-input {
  padding-inline-end: 44px;
}
/* Reuse ship.css .pw-toggle-btn — nothing extra needed */

/* ── Help text ──────────────────────────────────────────── */
.int-help {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
}

/* ── Error message ──────────────────────────────────────── */
.int-error {
  font-size: 11px;
  color: #b91c1c;
  line-height: 1.4;
  margin: 0;
  display: none;
}
.int-error:not(:empty) { display: block; }

/* ── Auth-block (optional credential-mode selector) ─────── */
.int-authblock {
  background: #f8fafc;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 12px;
  color: #4b5563;
  line-height: 1.6;
}

/* ── Actions / button row ───────────────────────────────── */
.int-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,.08);
}

/* ── Buttons ────────────────────────────────────────────── */
.int-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, opacity .15s;
  min-height: 44px;
  min-width: 44px;
  white-space: nowrap;
  font-family: inherit;
  box-sizing: border-box;
}
.int-btn:focus-visible {
  outline: 2px solid var(--accent, #10b981);
  outline-offset: 2px;
}
.int-btn:disabled,
.int-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.int-btn--primary {
  background: linear-gradient(135deg, #22c55e, #4ade80);
  color: #022c22;
  box-shadow: 0 10px 28px rgba(22,163,74,.32);
}
.int-btn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(22,163,74,.42);
}
.int-btn--secondary {
  background: #fff;
  border-color: rgba(148,163,184,.75);
  color: #0f172a;
}
.int-btn--secondary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15,23,42,.10);
}
.int-btn--dark {
  background: #0f172a;
  color: #f8fafc;
  border-color: #0f172a;
}
.int-btn--dark:hover:not(:disabled) {
  background: #1e293b;
  transform: translateY(-1px);
}
.int-btn--danger {
  background: #fff;
  border-color: rgba(239,68,68,.55);
  color: #991b1b;
}
.int-btn--danger:hover:not(:disabled) {
  background: #fff1f2;
  transform: translateY(-1px);
}
.int-btn--danger:focus-visible { outline-color: #dc2626; }

/* ── Separator in action bars ───────────────────────────── */
.int-actions-sep {
  flex: 1;
}

/* ── Toast notification ─────────────────────────────────── */
.int-toast {
  position: fixed;
  inset-inline-start: 16px;
  bottom: 20px;
  z-index: 9999;
  background: #0f172a;
  color: #f1f5f9;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  min-width: 200px;
  max-width: 380px;
  box-shadow: 0 12px 32px rgba(15,23,42,.35);
  display: none;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.5;
  word-break: break-word;
  transition: opacity .2s;
}
.int-toast.show { display: flex; }
.int-toast--success { background: #15803d; }
.int-toast--error   { background: #b91c1c; }
.int-toast--info    { background: #1e40af; }
.int-toast-icon     { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* ── noscript warning ───────────────────────────────────── */
.int-noscript {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fef9c3;
  border: 1px solid #fde68a;
  color: #78350f;
  font-size: 12px;
  line-height: 1.5;
}

/* ── Danger zone ────────────────────────────────────────── */
.int-danger {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #fca5a5;
  background: #fff1f2;
  font-size: 13px;
  color: #7f1d1d;
}
.int-danger-title {
  font-weight: 800;
  color: #991b1b;
  margin: 0 0 4px;
}

/* ── Checkbox row ───────────────────────────────────────── */
.int-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #0f172a;
}
.int-check-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent, #10b981);
}

/* ── Advanced settings (collapsible <details>) ──────────── */
.int-advanced {
  grid-column: 1 / -1;
  border: 1px solid rgba(148,163,184,.38);
  border-radius: 12px;
  background: rgba(248,250,252,.7);
  overflow: hidden;
  margin-top: 4px;
}
.int-advanced > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  cursor: pointer;
  user-select: none;
}
.int-advanced > summary::-webkit-details-marker { display: none; }
.int-advanced > summary::before {
  content: '▶';
  font-size: 9px;
  display: inline-block;
  color: #6b7280;
  transition: transform .2s ease;
}
.int-advanced[open] > summary::before { transform: rotate(90deg); }
.int-advanced > summary:focus-visible {
  outline: 2px solid var(--accent, #10b981);
  outline-offset: -2px;
  border-radius: 10px;
}
.int-advanced-body {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── authblock help text margin ─────────────────────────── */
.int-authblock .int-help { margin-top: 5px; }

/* ── Side panel utilities ───────────────────────────────── */
.int-side-form { margin-bottom: 10px; }
.int-btn--full  { width: 100%; }
.int-side-text--mt { margin-top: 14px; }

/* ── Pickup / checkbox utilities ─────────────────────────── */
.int-check-row--mt { margin-top: 12px; flex-wrap: wrap; }
.int-check-row input[type="checkbox"] { border-radius: 6px; }
.int-check-label  { margin: 0; font-weight: 700; font-size: 13px; color: #0f172a; }
.int-check-field--mt { margin-top: 10px; }

/* ── Danger zone content helpers ────────────────────────── */
.int-danger strong {
  display: block;
  color: #991b1b;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}
.int-danger p {
  margin: 0;
  font-size: 13px;
  color: #991b1b;
  opacity: .9;
  line-height: 1.55;
}

/* ── cc-* carrier connect base (generic fallback) ─────────── */
.cc-page{width:100%; padding:28px 0 40px; position:relative;}
.cc-wrap{max-width:1120px; margin:0 auto; padding:0 16px;}
.cc-breadcrumb{font-size:11px; color:#6b7280; margin-bottom:12px}
.cc-breadcrumb a{color:#4b5563; text-decoration:none}
.cc-breadcrumb a:hover{text-decoration:underline}
.cc-breadcrumb a:focus-visible{text-decoration:underline; outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}
.cc-hero{
  border-radius:28px;
  padding:18px 18px 16px;
  border:1px solid rgba(148,163,184,.55);
  background: radial-gradient(circle at top left, #e0f2fe 0, #eef2ff 40%, #ffffff 100%);
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);
  gap:18px;
  align-items:start;
}
.cc-hero[dir="rtl"]{text-align:right}
.cc-eyebrow{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#2563eb; margin-bottom:8px}
.cc-title{font-size:clamp(22px,3vw,30px); font-weight:800; margin:0 0 8px; color:#0f172a}
.cc-subtitle{font-size:13px; line-height:1.75; color:#4b5563; margin:0 0 12px; max-width:640px}
.cc-meta-row{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px}
.cc-pill{
  display:inline-flex; align-items:center; gap:6px;
  border-radius:999px; padding:5px 10px; font-size:11px;
  background:#eff6ff; color:#1d4ed8; border:1px solid rgba(37,99,235,.25)
}
.cc-dot{width:7px; height:7px; border-radius:999px; background:#22c55e}
.cc-dot.warn{background:#f59e0b}
.cc-dot.err{background:#ef4444}
.cc-side{
  border-radius:18px;
  padding:12px 12px 13px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(148,163,184,.55);
}
.cc-side-top{display:flex; gap:10px; align-items:center; margin-bottom:10px}
.cc-logo{
  width:44px; height:44px; border-radius:14px;
  background:#f1f5f9; border:1px solid rgba(148,163,184,.55);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.cc-logo img{width:100%; height:100%; object-fit:contain}
.cc-logo-letter{font-weight:900; color:#334155}
.cc-carrier-name{font-size:14px; font-weight:800; color:#0f172a; margin:0}
.cc-tagline{font-size:12px; color:#6b7280; margin:2px 0 0}
.cc-status{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; margin-top:10px;
}
.cc-status-badge{
  font-size:11px; border-radius:999px; padding:6px 10px;
  border:1px solid rgba(148,163,184,.65); background:#fff;
  display:inline-flex; align-items:center; gap:8px;
}
.cc-card{
  margin-top:18px;
  border-radius:24px;
  padding:16px 16px 18px;
  background:#ffffff;
  border:1px solid rgba(148,163,184,.65);
  box-shadow: 0 12px 26px rgba(15,23,42,.08);
}
.cc-card-title{font-size:16px; font-weight:800; margin:0 0 6px; color:#0f172a}
.cc-card-sub{font-size:12px; color:#6b7280; margin:0 0 14px}
.cc-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
.cc-field{display:flex; flex-direction:column; gap:6px}
.cc-label{font-size:12px; font-weight:700; color:#0f172a}
.cc-label small{font-weight:600; color:#ef4444; margin-inline-start:6px}
.cc-input{
  border-radius:14px;
  border:1px solid rgba(148,163,184,.75);
  background:#fff;
  padding:10px 12px;
  font-size:13px;
  color:#0f172a;
  transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}
.cc-input::placeholder{color:#9ca3af}
.cc-input:focus{outline:2px solid #22c55e; outline-offset:2px; border-color:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.cc-help{font-size:11px; color:#6b7280; line-height:1.6}
.cc-error{font-size:11px; color:#b91c1c; display:none}
.cc-error.show{display:block}
.cc-actions{
  margin-top:14px;
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
}
.cc-actions-left{display:flex; flex-wrap:wrap; gap:10px}
.cc-btn{
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  border:1px solid transparent;
  padding:10px 16px;
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  user-select:none;
}
.cc-btn:disabled{opacity:.6; cursor:not-allowed; transform:none!important}
.cc-btn.primary{
  background:linear-gradient(135deg,#22c55e,#4ade80);
  color:#022c22;
  box-shadow:0 12px 30px rgba(22,163,74,.35);
}
.cc-btn.primary:hover{background:#16a34a; transform:translateY(-1px)}
.cc-btn.primary:focus-visible{background:#16a34a; transform:translateY(-1px); outline:2px solid var(--accent); outline-offset:2px}
.cc-btn.secondary{
  background:#ffffff;
  color:#0f172a;
  border-color:rgba(148,163,184,.85);
}
.cc-btn.secondary:hover{border-color:#4b5563; transform:translateY(-1px)}
.cc-btn.secondary:focus-visible{border-color:#4b5563; transform:translateY(-1px); outline:2px solid var(--accent); outline-offset:2px}
.cc-btn.danger{
  background:#fff1f2;
  color:#9f1239;
  border-color:rgba(244,63,94,.45);
}
.cc-btn.danger:hover{transform:translateY(-1px)}
.cc-btn.danger:focus-visible{transform:translateY(-1px); outline:2px solid #f43f5e; outline-offset:2px}
.cc-security{
  margin-top:14px;
  border-radius:18px;
  padding:12px 13px;
  background:#f9fafb;
  border:1px solid rgba(148,163,184,.6);
  display:flex; gap:10px; align-items:flex-start;
}
.cc-security-icon{
  width:34px; height:34px; border-radius:14px;
  background:#e0f2fe; color:#1d4ed8;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(37,99,235,.25);
  flex:0 0 auto;
}
.cc-security-title{font-size:12px; font-weight:800; margin:0 0 2px; color:#0f172a}
.cc-security-text{font-size:12px; color:#4b5563; margin:0; line-height:1.7}
.cc-toast{
  position:fixed;
  inset-inline-start:16px;
  bottom:16px;
  z-index:9999;
  max-width:min(520px, calc(100vw - 32px));
  border-radius:16px;
  padding:12px 14px;
  background:rgba(15,23,42,.95);
  color:#e5e7eb;
  border:1px solid rgba(148,163,184,.35);
  box-shadow:0 18px 40px rgba(0,0,0,.25);
  display:none;
}
.cc-toast.show{display:block}
.cc-toast strong{display:block; font-size:12px; margin-bottom:2px}
.cc-toast p{margin:0; font-size:12px; color:#cbd5f5; line-height:1.55}
@media (max-width: 900px){
  .cc-hero{grid-template-columns:1fr}
  .cc-grid{grid-template-columns:1fr}
}
@media (prefers-contrast: high){
  .cc-btn.primary{border:2px solid #000}
  .cc-btn.secondary,.cc-input,.cc-card,.cc-hero{border:2px solid #000}
}
@media (prefers-color-scheme: dark){
  .cc-hero,.cc-card{background:rgba(15,23,42,.92); border-color:rgba(148,163,184,.45); color:#e5e7eb}
  .cc-title,.cc-card-title,.cc-label,.cc-carrier-name,.cc-security-title{color:#e5e7eb}
  .cc-subtitle,.cc-card-sub,.cc-help,.cc-tagline,.cc-security-text{color:#cbd5f5}
  .cc-side{background:rgba(15,23,42,.94)}
  .cc-input{background:rgba(2,6,23,.55); color:#e5e7eb; border-color:rgba(148,163,184,.5)}
  .cc-btn.secondary{background:rgba(15,23,42,.6); color:#e5e7eb; border-color:rgba(148,163,184,.55)}
  .cc-security{background:rgba(2,6,23,.35)}
}

/* ── Responsive / tap target enforcement ────────────────── */
@media (max-width: 480px) {
  .int-page { padding: 16px 12px 48px; }
  .int-card { padding: 16px 14px 18px; }
  .int-hero { padding: 16px 16px; }
  .int-btn  { min-height: 48px; font-size: 14px; padding: 12px 18px; }
  .int-actions { gap: 8px; }
}

/* ── Dark mode ──────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .int-card,
  .int-side-card,
  .int-hero {
    background: rgba(15,23,42,.92);
    border-color: rgba(148,163,184,.3);
  }
  .int-hero-title,
  .int-card-title,
  .int-side-title,
  .int-label { color: #e5e7eb; }
  .int-hero-sub,
  .int-help,
  .int-side-text,
  .int-side-list { color: #9ca3af; }
  .int-input,
  .int-select,
  .int-textarea {
    background: rgba(2,6,23,.4);
    color: #e5e7eb;
    border-color: rgba(148,163,184,.35);
  }
  .int-btn--secondary { background: rgba(2,6,23,.3); color: #e5e7eb; border-color: rgba(148,163,184,.4); }
  .int-btn--danger    { background: rgba(2,6,23,.3); }
  .int-back           { background: rgba(2,6,23,.4); color: #e5e7eb; border-color: rgba(148,163,184,.4); }
  .int-authblock      { background: rgba(15,23,42,.5); border-color: rgba(148,163,184,.3); color: #9ca3af; }
  .int-note           { background: rgba(30,64,175,.15); border-color: rgba(147,197,253,.3); }
  .int-note--green    { background: rgba(21,128,61,.15); border-color: rgba(134,239,172,.3); }
  .int-danger         { background: rgba(185,28,28,.1); border-color: rgba(252,165,165,.4); color: #fca5a5; }
}