*{box-sizing:border-box}
:root{
  --bg:#081018;
  --panel:#101c28;
  --panel2:#132535;
  --text:#eaf8ff;
  --muted:#8fb4c7;
  --cyan:#24e7ff;
  --green:#4fffb0;
  --danger:#ff6b8a;
}
body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(36,231,255,.12), transparent 30%),
    radial-gradient(circle at bottom right, rgba(79,255,176,.08), transparent 32%),
    var(--bg);
  color:var(--text);
  min-height:100vh;
}
a{color:var(--cyan);text-decoration:none}
.container{max-width:1100px;margin:auto;padding:28px}
.nav{display:flex;justify-content:space-between;align-items:center;padding:20px 28px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(8,16,24,.82);backdrop-filter:blur(8px)}
.brand{font-weight:800;letter-spacing:.08em;font-size:1.15rem}
.brand span{color:var(--cyan)}
.hero{padding:70px 0 40px}
.hero h1{font-size:clamp(2.7rem,8vw,6.5rem);line-height:.94;margin:0 0 20px;letter-spacing:-.05em}
.hero .accent{color:var(--cyan);text-shadow:0 0 26px rgba(36,231,255,.35)}
.hero p{max-width:760px;font-size:1.2rem;color:var(--muted);line-height:1.6}
.btn{display:inline-block;border:0;border-radius:14px;padding:13px 18px;font-weight:700;cursor:pointer;background:linear-gradient(90deg,var(--cyan),var(--green));color:#041015}
.btn.secondary{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.18)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.card{background:linear-gradient(180deg,rgba(19,37,53,.96),rgba(12,25,36,.96));border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.22)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
form{display:grid;gap:15px}
label{font-weight:650}
input,textarea,select{width:100%;border:1px solid rgba(255,255,255,.13);border-radius:12px;padding:12px 13px;background:#09141e;color:var(--text);outline:none}
textarea{min-height:110px;resize:vertical}
input[type=range]{padding:0}
.range-row{display:grid;grid-template-columns:160px 1fr 46px;gap:12px;align-items:center}
.notice{padding:12px 14px;border-radius:12px;background:rgba(79,255,176,.09);border:1px solid rgba(79,255,176,.25)}
.error{padding:12px 14px;border-radius:12px;background:rgba(255,107,138,.09);border:1px solid rgba(255,107,138,.25)}
.match{display:flex;align-items:center;justify-content:space-between;gap:20px}
.score{font-size:2rem;font-weight:800;color:var(--green)}
.small{color:var(--muted);font-size:.92rem}
h1,h2,h3{margin-top:0}
hr{border:0;border-top:1px solid rgba(255,255,255,.09);margin:22px 0}
@media(max-width:650px){
  .range-row{grid-template-columns:1fr}
  .nav{padding:16px}
  .container{padding:20px}
}

.rf-shell{position:relative;overflow-x:hidden}
.rf-shell:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.12;
background-image:linear-gradient(rgba(36,231,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(36,231,255,.13) 1px,transparent 1px);
background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 80%)}
.logo-mark{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid var(--cyan);border-radius:50%;margin-right:8px;box-shadow:0 0 15px rgba(36,231,255,.4)}
.avatar{width:100px;height:100px;object-fit:cover;border-radius:18px;border:1px solid rgba(36,231,255,.3)}
.pill{display:inline-block;padding:6px 10px;border:1px solid rgba(36,231,255,.2);border-radius:999px;margin:4px 4px 0 0;color:var(--muted)}
.searchbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.forum-row{display:block;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.password-wrap{position:relative}.password-wrap button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--cyan);cursor:pointer}
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#222;border-radius:12px;padding:12px;border:0;font-weight:700}

:root{--rf-green:#45ff8f;--rf-cyan:#41ecff;--rf-pink:#ff3eb5;--rf-border:rgba(77,255,144,.28)}
body.rf-shell{background:radial-gradient(circle at 15% 10%,rgba(65,236,255,.08),transparent 25%),radial-gradient(circle at 85% 20%,rgba(69,255,143,.08),transparent 24%),linear-gradient(180deg,#010504,#04100c 50%,#010504)}
.brand-logo{display:flex;align-items:center;gap:10px}.brand-logo img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(69,255,143,.3))}
.kievo-title{font-weight:900;letter-spacing:.13em}.kievo-title .fiction{color:var(--rf-green);text-shadow:0 0 16px rgba(69,255,143,.5)}
.love-badge{position:fixed;right:16px;bottom:16px;width:145px;max-width:26vw;z-index:30;filter:drop-shadow(0 0 16px rgba(255,62,181,.25))}
.hero-panel{position:relative;overflow:hidden;border:1px solid var(--rf-border);background:#03100c}.hero-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,5,4,.95),rgba(1,5,4,.74),rgba(1,5,4,.9)),url('brain_dna_art.png') center/cover no-repeat;opacity:.7}.hero-panel>*{position:relative}
.dna-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr);gap:20px}.dna-main,.dna-side{display:grid;gap:18px}.dna-side{position:sticky;top:18px}
.section-card{background:linear-gradient(180deg,rgba(7,24,17,.95),rgba(3,12,9,.98));border:1px solid rgba(69,255,143,.24);border-radius:18px;padding:18px}.section-card.magenta{border-color:rgba(255,62,181,.32)}
.dna-header{display:flex;gap:18px;align-items:flex-start}.dna-photo,.dna-photo-placeholder{width:210px;aspect-ratio:4/5;border-radius:20px;border:1px solid rgba(69,255,143,.4);background:#020807}.dna-photo{object-fit:cover}.dna-photo-placeholder{display:grid;place-items:center;text-align:center;padding:18px}
.two-col,.trait-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.trait-row{display:grid;grid-template-columns:minmax(125px,.8fr) 1.2fr minmax(120px,.8fr);gap:9px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05)}.trait-name{font-weight:700}
.dna-score{font-size:3rem;font-weight:900;color:var(--rf-green);text-shadow:0 0 20px rgba(69,255,143,.35)}.progress{height:12px;border:1px solid rgba(69,255,143,.3);border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--rf-green),var(--rf-cyan),var(--rf-pink))}
.chips{display:flex;flex-wrap:wrap;gap:7px}.chip{padding:7px 10px;border:1px solid rgba(69,255,143,.22);border-radius:999px;color:#dfffea}.dna-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.dna-tabs a{padding:8px 10px;border:1px solid rgba(69,255,143,.2);border-radius:9px}
.importance-select.muss{border-color:var(--rf-pink);color:#ff9bdb}.importance-select.sehr_wichtig{border-color:#ff8b73}.importance-select.wichtig{border-color:#ffd65b}.importance-select.nett{border-color:#9dffb6}
@media(max-width:900px){.dna-layout{grid-template-columns:1fr}.dna-side{position:static}}@media(max-width:700px){.two-col,.trait-grid{grid-template-columns:1fr}.trait-row{grid-template-columns:1fr}.dna-header{flex-direction:column}.dna-photo,.dna-photo-placeholder{width:100%;max-width:300px}}


/* ===== v0.3.1 fixes ===== */
.love-badge{
  position:fixed !important;
  top:18px !important;
  right:18px !important;
  bottom:auto !important;
  width:150px !important;
  height:150px !important;
  object-fit:cover !important;
  border-radius:50% !important;
  clip-path:circle(49% at 50% 50%) !important;
  z-index:100 !important;
  background:transparent !important;
  filter:drop-shadow(0 0 18px rgba(255,62,181,.34)) !important;
}

.brand-logo img{
  width:54px !important;
  height:54px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  clip-path:circle(47% at 50% 50%) !important;
}

@media(max-width:700px){
  .love-badge{
    width:96px !important;
    height:96px !important;
    top:10px !important;
    right:10px !important;
  }
}


/* ===== v0.3.3 navigation + upload UI ===== */
.nav{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  min-height:72px;
}
.nav > .brand-logo{
  flex:0 0 auto;
}
.nav > div:last-child{
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
}
@media(max-width:900px){
  .nav{
    flex-direction:column !important;
    gap:10px;
    padding-bottom:12px;
  }
  .nav > div:last-child{
    position:static !important;
    transform:none !important;
    white-space:normal;
    flex-wrap:wrap;
  }
}


/* ===== v0.3.4 Fiction-DNA slider layout fix ===== */

/* Prevent grid children from forcing the card wider than available. */
.dna-main,
.section-card,
.trait-grid,
.trait-row,
.trait-row > div {
  min-width: 0;
}

/* Default: one wide trait column. This guarantees that the slider and
   importance selector remain fully visible. */
.trait-grid{
  grid-template-columns:1fr !important;
}

/* Give each row enough room, but let the middle slider shrink safely. */
.trait-row{
  grid-template-columns:
    minmax(150px, .8fr)
    minmax(180px, 1.6fr)
    minmax(120px, .75fr) !important;
  width:100%;
  overflow:visible;
}

.trait-row input[type="range"]{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  display:block;
}

.trait-row select{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}

/* Only use two trait columns when the browser really has lots of room. */
@media(min-width:1650px){
  .trait-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .trait-row{
    grid-template-columns:
      minmax(115px,.8fr)
      minmax(120px,1.25fr)
      minmax(105px,.78fr) !important;
  }
}

/* Tablet / narrower desktop */
@media(max-width:1150px){
  .dna-layout{
    grid-template-columns:1fr !important;
  }

  .dna-side{
    position:static !important;
  }
}

/* Mobile */
@media(max-width:650px){
  .trait-row{
    grid-template-columns:1fr !important;
    gap:7px;
  }

  .trait-row select{
    margin-top:2px;
  }
}


/* ===== v0.3.5 BASIS LAYOUT FIX =====
   The problem was not the trait sliders: .dna-header contained a fixed
   210px photo plus a flex child whose inner .two-col grid was refusing
   to use the remaining width correctly. Make the basis section a real
   two-column CSS grid and force all form controls to fill their cells.
*/
.dna-header{
  display:grid !important;
  grid-template-columns:minmax(230px, 310px) minmax(0, 1fr) !important;
  gap:26px !important;
  align-items:start !important;
  width:100% !important;
}

.dna-header > div{
  min-width:0 !important;
  width:100% !important;
}

.dna-header > div:first-child{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
}

.dna-header .dna-photo,
.dna-header .dna-photo-placeholder{
  width:100% !important;
  max-width:310px !important;
  height:auto !important;
  aspect-ratio:4/5 !important;
}

.dna-header .two-col{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px 18px !important;
  width:100% !important;
}

.dna-header label{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}

.dna-header input:not([type="file"]),
.dna-header select,
.dna-header textarea{
  display:block !important;
  box-sizing:border-box !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  margin-top:6px !important;
}

.dna-header input[type="file"]{
  box-sizing:border-box !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin-top:6px !important;
}

/* Give the editor substantially more room than the status sidebar. */
.dna-layout{
  grid-template-columns:minmax(0, 3fr) minmax(260px, 1fr) !important;
}

/* At ordinary laptop widths put the DNA completion panel below the editor.
   This leaves the full container width for the form instead of squeezing it. */
@media(max-width:1450px){
  .dna-layout{
    grid-template-columns:1fr !important;
  }
  .dna-side{
    position:static !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* On narrower screens the basis form becomes one column next to the photo. */
@media(max-width:900px){
  .dna-header{
    grid-template-columns:minmax(190px,260px) minmax(0,1fr) !important;
  }
  .dna-header .two-col{
    grid-template-columns:1fr !important;
  }
  .dna-side{
    grid-template-columns:1fr !important;
  }
}

/* Phone: photo and fields stack completely. */
@media(max-width:650px){
  .dna-header{
    grid-template-columns:1fr !important;
  }
  .dna-header .dna-photo,
  .dna-header .dna-photo-placeholder{
    max-width:300px !important;
  }
}

.match-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}.match-card{position:relative}.match-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;border:1px solid rgba(69,255,143,.25);margin-bottom:12px}.match-card .dna-score{font-size:2.4rem}

/* ===== v0.4.1 Real DNA mirrors Fiction DNA ===== */
.real-chip{white-space:nowrap;text-align:center;opacity:.88}

/* ===== v0.5 profiles + messaging ===== */
.profile-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}.btn.secondary{background:transparent;border:1px solid #35e7d3;color:#bff}
.profile-hero{display:grid;grid-template-columns:minmax(180px,300px) 1fr;gap:28px}.public-photo{width:100%;max-height:390px;object-fit:cover;border-radius:18px;border:1px solid rgba(69,255,143,.35)}
.profile-traits>div{display:grid;grid-template-columns:minmax(150px,1fr) 2fr 45px;gap:12px;align-items:center;margin:12px 0}.mini-progress{height:8px;border:1px solid #176a4c;border-radius:20px;overflow:hidden}.mini-progress i{display:block;height:100%;background:linear-gradient(90deg,#38ff8a,#31ddeb,#f43bc2)}
.messages{display:flex;flex-direction:column;gap:10px;min-height:320px;max-height:60vh;overflow:auto;padding:10px 0}.bubble{max-width:72%;padding:12px 15px;border-radius:16px;background:#102334;border:1px solid #28445b}.bubble.mine{align-self:flex-end;background:#0d392e;border-color:#1a795c}.bubble.theirs{align-self:flex-start}.bubble small{display:block;opacity:.55;margin-top:5px}.chat-form{display:grid;grid-template-columns:1fr auto;gap:10px}.chat-form textarea{min-height:72px}.inbox-row{display:flex;align-items:center;gap:15px;text-decoration:none;color:inherit}.unread{margin-left:auto;background:#35ff8c;color:#001b12;border-radius:999px;padding:4px 10px;font-weight:800}
@media(max-width:700px){.profile-hero{grid-template-columns:1fr}.chat-form{grid-template-columns:1fr}.bubble{max-width:90%}}


/* ===== v0.5.2 TRUE CENTERED NAVIGATION ===== */
.nav{
  display:grid !important;
  grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr) !important;
  align-items:center !important;
  width:100% !important;
  min-height:78px !important;
  padding:10px 28px !important;
  position:relative !important;
}

.nav .brand-logo{
  grid-column:1 !important;
  justify-self:start !important;
}

.nav .nav-menu{
  grid-column:2 !important;
  justify-self:center !important;
  position:static !important;
  transform:none !important;
  left:auto !important;
  right:auto !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:10px !important;
  white-space:nowrap !important;
}

.nav .nav-menu a{
  display:inline-block;
}

/* The badge is fixed independently and no longer pushes the menu. */
.love-badge{
  pointer-events:none;
}

@media(max-width:1050px){
  .nav{
    grid-template-columns:1fr !important;
    gap:8px !important;
    justify-items:center !important;
  }
  .nav .brand-logo{
    grid-column:1 !important;
    justify-self:center !important;
  }
  .nav .nav-menu{
    grid-column:1 !important;
    flex-wrap:wrap !important;
    white-space:normal !important;
  }
}

.nav{display:grid!important;grid-template-columns:minmax(190px,1fr) auto minmax(190px,1fr)!important;align-items:center!important;padding:10px 24px!important;min-height:82px!important}
.nav .brand-logo{grid-column:1;justify-self:start}.nav .nav-menu{grid-column:2!important;position:static!important;transform:none!important;left:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;white-space:nowrap!important}
.nav-link{display:inline-flex!important;align-items:center;justify-content:center;padding:9px 12px!important;border:1px solid rgba(65,236,255,.28)!important;border-radius:11px!important;background:rgba(5,18,24,.72)!important;color:#c9faff!important}
.nav-link:hover,.nav-link.active{border-color:var(--rf-green)!important;color:var(--rf-green)!important;box-shadow:0 0 13px rgba(69,255,143,.14)!important}.nav-link.logout{border-color:rgba(255,62,181,.35)!important;color:#ffb9e6!important}
.inline-form{display:inline-flex;margin:0}.dna-btn{background:linear-gradient(90deg,#34f08a,#39e2d1)!important;color:#03120d!important}.signal-sent,.dna-match-badge{display:inline-flex;padding:10px 13px;border-radius:12px;font-weight:800}.signal-sent{border:1px solid rgba(69,255,143,.35);color:#9effc5}.dna-match-badge{border:1px solid rgba(255,62,181,.55);color:#ff9edc}
@media(max-width:1250px){.nav{grid-template-columns:1fr!important;justify-items:center!important}.nav .brand-logo{grid-column:1;justify-self:center}.nav .nav-menu{grid-column:1!important;flex-wrap:wrap!important;white-space:normal!important}}


/* ===== v0.6.1 exact centered menu + activity ===== */
.nav{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-height:82px !important;
  padding:10px 24px !important;
}
.nav .brand-logo{
  position:relative !important;
  z-index:2;
  flex:0 0 auto !important;
}
.nav .nav-menu{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:7px !important;
  white-space:nowrap !important;
  width:max-content !important;
  max-width:calc(100vw - 430px) !important;
}
@media(max-width:1350px){
  .nav{
    flex-direction:column !important;
    justify-content:center !important;
    gap:10px;
  }
  .nav .brand-logo{align-self:center}
  .nav .nav-menu{
    position:static !important;
    transform:none !important;
    max-width:100% !important;
    width:auto !important;
    flex-wrap:wrap !important;
    white-space:normal !important;
  }
}

.activity-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:20px;
}
.activity-stat{
  text-decoration:none;
  color:inherit;
  background:linear-gradient(180deg,rgba(8,31,23,.96),rgba(4,15,11,.98));
  border:1px solid rgba(69,255,143,.25);
  border-radius:16px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:4px;
  transition:.18s ease;
}
.activity-stat:hover{
  transform:translateY(-2px);
  border-color:var(--rf-green);
  box-shadow:0 0 18px rgba(69,255,143,.10);
}
.activity-stat strong{
  font-size:2.1rem;
  color:var(--rf-green);
  line-height:1;
}
.activity-stat span{color:var(--muted)}
.activity-list{display:grid;gap:10px}
.activity-person{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:rgba(0,0,0,.16);
  color:inherit;
  text-decoration:none;
}
.activity-person .avatar{width:62px;height:62px;border-radius:14px}
.activity-person > div:nth-child(2){flex:1}
.activity-count{
  border:1px solid rgba(65,236,255,.25);
  border-radius:999px;
  padding:5px 9px;
  color:var(--rf-cyan);
}
.dashboard-activity{margin-top:20px}
@media(max-width:800px){
 .activity-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .activity-person{align-items:flex-start;flex-wrap:wrap}
}