:root{
  --panel: rgba(255,255,255,.03);
  --border: rgba(0,255,255,.18);
  --border2: rgba(0,255,255,.10);
  --accent: #0ff;
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --ok: rgba(80,255,200,.9);
  --bad: rgba(255,80,80,.85);
}

/* même logique que tes pages : navbar fixed -> padding-top */
.fr-page{
  padding-top: 120px;
  max-width: 1300px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.fr-top{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.fr-title{
  margin: 0;
  font-size: 2.2rem;
  color: var(--accent);
  text-shadow: 0 0 10px var(--accent), 0 0 24px rgba(0,255,255,.35);
}
.fr-sub{ margin:0; color: var(--muted); max-width: 960px; line-height: 1.5; }

.fr-layout{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap: 18px;
  align-items:start;
}

.fr-card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 0 14px rgba(0,255,255,.10);
  position: relative;
  overflow: hidden;
}

.fr-card::after{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(circle at 22% 18%, rgba(0,255,255,.09), transparent 58%);
  pointer-events:none;
}

.fr-card > *{ position: relative; z-index: 1; }
.fr-card-small{ padding: 14px; }

.fr-form{ display:flex; flex-direction:column; gap: 14px; }

.fr-row{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
  align-items:start;
}

.fr-field{ display:flex; flex-direction:column; gap: 8px; }
.fr-field label{ font-weight: 800; color: rgba(255,255,255,.88); }

.fr-inputline{ display:flex; gap:10px; align-items:center; }

.fr-help{ color: var(--muted); font-size: .92rem; line-height: 1.35; }

.fr-grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

input, select{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,255,255,.25);
  background: rgba(255,255,255,.03);
  color: #fff;
  outline: none;
  box-shadow: 0 0 12px rgba(0,255,255,.08);
}

input:focus, select:focus{
  border-color: rgba(0,255,255,.45);
  box-shadow: 0 0 18px rgba(0,255,255,.16);
}

.fr-sep{
  border: none;
  height: 1px;
  background: rgba(0,255,255,.12);
  margin: 2px 0;
}

.fr-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.fr-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 16px;
  border-radius: 14px;
  cursor:pointer;
  user-select:none;
  font-weight: 800;
  border: 1px solid rgba(0,255,255,.25);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.fr-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(0,255,255,.14);
}

.fr-btn-primary{ background: rgba(0,255,255,.12); color: var(--accent); }
.fr-btn-secondary{ background: rgba(255,255,255,.06); color: #fff; }

.fr-msg{
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.88);
  display:none;
}
.fr-msg.ok{ display:block; border-color: rgba(80,255,200,.25); }
.fr-msg.bad{ display:block; border-color: rgba(255,80,80,.28); }

/* SIDEBAR fixée (comme tu demandes) */
.fr-side{
  position: fixed;          /* <-- FIXED */
  top: 120px;               /* navbar */
  right: 24px;              /* align avec ton padding page */
  width: 340px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}

/* Comme la sidebar est fixed, on laisse de la place au contenu */
.fr-layout{
  grid-template-columns: 1fr; /* le contenu prend toute la place */
  padding-right: 360px;      /* place pour la sidebar */
}

.fr-side-title{
  font-weight: 900;
  color: var(--accent);
  margin-bottom: 10px;
  text-shadow: 0 0 10px rgba(0,255,255,.45);
}

.fr-checklist{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.fr-checklist li{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,255,255,.12);
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.88);
  position: relative;
}
.fr-checklist li::after{
  content:"—";
  position:absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .6;
}
.fr-checklist li.ok{ border-color: rgba(80,255,200,.22); }
.fr-checklist li.ok::after{ content:"OK"; color: var(--ok); opacity:1; font-weight:900; }
.fr-checklist li.bad{ border-color: rgba(255,80,80,.24); }
.fr-checklist li.bad::after{ content:"NON"; color: var(--bad); opacity:1; font-weight:900; }

.fr-near{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,255,255,.12);
  background: rgba(0,0,0,.16);
}
.fr-near-main{ font-weight: 900; color: rgba(255,255,255,.92); }
.fr-near-sub{ margin-top: 6px; color: var(--muted); font-size: .92rem; }

.fr-warn{
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,80,80,.22);
  background: rgba(0,0,0,.16);
}
.fr-warn-title{ font-weight: 900; color: rgba(255,160,160,.95); margin-bottom: 8px; }
.fr-warn-list{ display:flex; flex-direction:column; gap: 8px; color: rgba(255,255,255,.86); }
.fr-warn-item{
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,80,80,.14);
  background: rgba(255,80,80,.05);
}

.fr-skinbox{
  border: 1px solid rgba(0,255,255,.14);
  background: rgba(0,0,0,.16);
  border-radius: 18px;
  padding: 12px;
}
.fr-skinframe{
  display:grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items:center;
}
#skinHead{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(0,255,255,.14);
  background: rgba(255,255,255,.03);
}
#skinBody{
  width: 100%;
  max-width: 180px;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(0,255,255,.10);
  background: rgba(255,255,255,.03);
  display:block;
}
.fr-skinmeta{ margin-top: 10px; display:flex; flex-direction:column; gap: 4px; }
.fr-skinname{ font-weight: 900; color: rgba(255,255,255,.92); }
.fr-skinstatus{ color: var(--muted); font-size: .92rem; }
.fr-skinstatus.ok{ color: var(--ok); }
.fr-skinstatus.bad{ color: var(--bad); }

@media (max-width: 1100px){
  .fr-side{
    position: static;  /* sur mobile, on repasse en normal */
    width: auto;
    right: auto;
    top: auto;
  }
  .fr-layout{ padding-right: 0; }
  .fr-row{ grid-template-columns: 1fr; }
  .fr-grid-3{ grid-template-columns: 1fr; }
}