/* =========================================================
   DESIGN SYSTEM — "GitHub 2025-ish" (clean + cohesive)
========================================================= */

/* -------------------------
   TOKENS
------------------------- */
:root{
  /* colors */
  --bg: #0d1117;
  --bg-elev: rgba(13,17,23,.78);
  --surface: #161b22;
  --surface2:#0f1520;
  --surface3:#0b1220;

  --border:#30363d;
  --border2:#252c33;

  --text:#c9d1d9;
  --muted:#8b949e;
  --title:#f0f6fc;

  --accent:#58a6ff;
  --accent2:#1f6feb;
  --success:#2ea043;
  --danger:#f85149;
  --warning:#d29922;

  /* radii */
  --r8: 8px;
  --r12: 12px;
  --r16: 16px;
  --r24: 24px;

  /* spacing */
  --s1: 6px;
  --s2: 10px;
  --s3: 14px;
  --s4: 18px;
  --s5: 24px;
  --s6: 32px;
  --s7: 44px;
  --s8: 64px;

  /* typography */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* shadows */
  --shadow-sm: 0 1px 0 rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.35);
  --shadow-md: 0 1px 0 rgba(255,255,255,.04), 0 18px 60px rgba(0,0,0,.5);

  /* focus ring */
  --ring: 0 0 0 3px rgba(88,166,255,.28);

  /* motion */
  --t: .14s ease;
}

/* -------------------------
   RESET / BASE
------------------------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html, body{ height:100%; }

body{
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(88,166,255,.12), transparent 60%),
    radial-gradient(1000px 540px at 100% -10%, rgba(46,160,67,.10), transparent 55%),
    radial-gradient(900px 500px at 50% 120%, rgba(31,111,235,.10), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:var(--font);
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{ background: rgba(88,166,255,.25); }

a{
  color:var(--text);
  text-decoration:none;
  font-size:14px;
}
a:hover{ color:var(--accent); }

img{ max-width:100%; display:block; }
button, input, textarea, select{ font-family:inherit; }
code, pre{ font-family:var(--mono); }

/* -------------------------
   LAYOUT HELPERS
------------------------- */
.container{
  width:min(1120px, 100%);
  margin:0 auto;
  padding:0 16px;
}

.main{
  flex:1;
  min-height:0;
}

.surface{
  background: rgba(22,27,34,.92);
  border:1px solid var(--border);
  border-radius: var(--r16);
  box-shadow: var(--shadow-sm);
}

.muted{ color:var(--muted); font-size:13px; }

/* -------------------------
   HEADER (sticky + blur)
------------------------- */
header{
  height:56px;
  flex-shrink:0;
  background: rgba(22,27,34,.86);
  border-bottom:1px solid rgba(48,54,61,.9);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter: blur(10px);
}

.nav-left, .nav-right{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:var(--title);
  font-size:14px;
  letter-spacing:.2px;
}
.logo::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background: linear-gradient(180deg, var(--accent) 0%, rgba(46,160,67,.9) 100%);
  box-shadow: 0 0 0 3px rgba(88,166,255,.12);
}

/* Make left nav match right nav */
.nav-left a,
.nav-right a{
  padding:6px 10px;
  border-radius: var(--r12);
  color: var(--muted);
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.nav-left a:hover,
.nav-right a:hover{
  background: rgba(33,38,45,.65);
  color: var(--title);
  transform: translateY(-1px);
}

/* -------------------------
   BUTTONS (consistent)
------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  height:34px;
  padding:0 14px;

  border-radius: var(--r12);
  font-size:13px;
  font-weight:650;
  cursor:pointer;

  border:1px solid rgba(48,54,61,.95);
  color: var(--text);
  background: rgba(33,38,45,.75);

  transition: transform var(--t), border-color var(--t), background var(--t), color var(--t), box-shadow var(--t), filter var(--t);
}
.btn:hover{
  border-color: rgba(88,166,255,.65);
  color: var(--title);
  transform: translateY(-1px);
}
.btn:active{ transform: translateY(0); }
.btn:focus-visible{ outline:none; box-shadow: var(--ring); border-color: rgba(88,166,255,.9); }

.btn.primary{
  background: linear-gradient(180deg, rgba(46,160,67,.95) 0%, rgba(35,134,54,.95) 100%);
  border-color: rgba(46,160,67,.45);
  color:#fff;
}
.btn.primary:hover{ filter: brightness(1.05); border-color: rgba(46,160,67,.8); }

.btn.ghost{
  background: transparent;
  border-color: rgba(48,54,61,.8);
}
.btn.ghost:hover{ background: rgba(33,38,45,.55); }

.btn.danger{
  background: rgba(248,81,73,.10);
  border-color: rgba(248,81,73,.30);
  color: #ffb4b0;
}
.btn.danger:hover{ border-color: rgba(248,81,73,.75); color:#fff; }

/* -------------------------
   AVATAR + DROPDOWN
------------------------- */
.avatar{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(48,54,61,.95);
  background: rgba(22,27,34,.95);
  cursor:pointer;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.avatar:hover{ transform: translateY(-1px); border-color: rgba(88,166,255,.65); }
.avatar:focus-visible{ outline:none; box-shadow: var(--ring); }

.dropdown{ position:relative; display:flex; align-items:center; }
.dropdown::after{
  content:"";
  position:absolute;
  top:100%;
  right:0;
  width:100%;
  height:12px;
}

.menu{
  position:absolute;
  right:0;
  top: calc(100% + 10px);

  background: rgba(22,27,34,.98);
  border: 1px solid rgba(48,54,61,.95);
  border-radius: var(--r16);
  min-width: 190px;
  z-index: 50;

  box-shadow: var(--shadow-sm);
  overflow:hidden;

  opacity:0;
  transform: translateY(-6px);
  pointer-events:none;
  transition: opacity var(--t), transform var(--t);
}

.menu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  font-size:13px;
  color: var(--text);
}
.menu a:hover{
  background: rgba(33,38,45,.9);
  color: var(--accent);
}
.dropdown:hover .menu{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

/* -------------------------
   FOOTER
------------------------- */
footer{
  height:44px;
  flex-shrink:0;
  border-top:1px solid rgba(48,54,61,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:var(--muted);
  background: transparent;
}

/* -------------------------
   PAGE BASE (shared pages)
------------------------- */
.dashboard, .projects, .editor, .settings, .profile, .landing{
  flex:1;
  min-height:0;
}

/* =========================================================
   LANDING PAGE (hero + features + cta)
========================================================= */
.landing{ display:flex; flex-direction:column; }

.landing-hero{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding: 92px 16px 64px;
}

.landing-hero h1{
  max-width: 820px;
  font-size: clamp(40px, 5vw, 58px);
  line-height: 1.04;
  font-weight: 900;
  color: var(--title);
  letter-spacing: -1px;
}

.landing-subtitle{
  margin-top: 18px;
  max-width: 680px;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.75;
}

.landing-actions{
  margin-top: 26px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.landing-actions .btn{ height:38px; border-radius: 12px; }

.landing-features{
  width:100%;
  border-top:1px solid rgba(48,54,61,.9);
  border-bottom:1px solid rgba(48,54,61,.9);
  padding: 56px 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width:1120px;
  margin:0 auto;
}

.feature{
  background: rgba(22,27,34,.92);
  border:1px solid rgba(48,54,61,.95);
  border-radius: var(--r16);
  padding: 18px;
  min-height: 150px;
  box-shadow: 0 1px 0 rgba(255,255,255,.03);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.feature:hover{
  transform: translateY(-2px);
  border-color: rgba(88,166,255,.45);
  box-shadow: var(--shadow-sm);
}
.feature h3{
  font-size: 15px;
  font-weight: 750;
  color: var(--title);
  letter-spacing: -.2px;
}
.feature p{
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
}

.landing-cta{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding: 62px 16px 78px;
  text-align:center;
}
.landing-cta h2{
  font-size: 28px;
  font-weight: 850;
  color: var(--title);
}
.landing-cta p{
  margin-top: 10px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
}
.landing-cta .btn{ margin-top: 18px; height: 38px; }

/* =========================================================
   AUTH (login/register) — polished card + better file input
========================================================= */
.auth-wrapper{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 54px 16px;
}

.auth-card{
  width:100%;
  max-width: 40px;
  background: rgba(22,27,34,.95);
  border:1px solid rgba(48,54,61,.95);
  border-radius: var(--r24);
  padding: 26px;
  box-shadow: var(--shadow-md);
  display:flex;
  flex-direction:column;
  gap: 16px;
  position:relative;
  overflow:hidden;
}
.auth-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(600px 200px at 20% 0%, rgba(88,166,255,.18), transparent 55%),
    radial-gradient(520px 200px at 90% 10%, rgba(46,160,67,.14), transparent 50%);
  pointer-events:none;
  opacity:.8;
}
.auth-card > *{ position:relative; }

.auth-card h1{
  font-size: 22px;
  font-weight: 900;
  color: var(--title);
  letter-spacing: -.3px;
}
.auth-meta, .auth-card .meta{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.auth-form{ display:flex; flex-direction:column; gap: 12px; }

.field{ display:flex; flex-direction:column; gap: 7px; }
.field label{ font-size: 13px; color: var(--text); }

.auth-form input[type="text"],
.auth-form input[type="password"],
.auth-form input[type="email"],
.field input{
  height: 42px;
  border-radius: 14px;
  background: rgba(13,17,23,.72);
  border: 1px solid rgba(48,54,61,.95);
  padding: 0 12px;
  color: var(--text);
  font-size: 14px;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.auth-form input:focus,
.field input:focus{
  outline:none;
  border-color: rgba(88,166,255,.9);
  box-shadow: var(--ring);
  background: rgba(13,17,23,.88);
}

/* nicer file input */
.auth-form input[type="file"]{
  padding: 10px;
  height: auto;
  border-radius: 14px;
  background: rgba(13,17,23,.55);
  border: 1px dashed rgba(48,54,61,.95);
  color: var(--muted);
}
.auth-form input[type="file"]:hover{
  border-color: rgba(88,166,255,.55);
}

/* avatar preview */
.auth-avatar-preview{
  width: 84px;
  height: 84px;
  border-radius: 999px;
  border: 1px solid rgba(48,54,61,.95);
  background: rgba(13,17,23,.75);
  object-fit: cover;
  box-shadow: 0 1px 0 rgba(255,255,255,.03);
}

.auth-form .btn{ margin-top: 6px; height: 42px; border-radius: 14px; }
.auth-footer{ margin-top: 4px; font-size: 13px; color: var(--muted); }
.auth-footer a{ color: var(--accent); }

/* =========================================================
   DASHBOARD (FINAL) — single source of truth
========================================================= */
.dashboard{
  flex:1;
  min-height:0;

  width: min(1700px, 100%);
  margin: 0 auto;
  padding: 18px 16px 26px;
  display:flex;
  flex-direction:column;
  gap: 16px;
}

/* journal card */
.dashboard-journal{
  background: rgba(22,27,34,.92);
  border: 1px solid rgba(48,54,61,.95);
  border-radius: var(--r16);
  box-shadow: var(--shadow-sm);
  padding: 22px 22px 18px;
}

.dashboard-journal h1{
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -0.8px;
  color: var(--title);
}

.dashboard-journal .meta{
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

/* editor card */
.dashboard-editor{
  flex:1;
  min-height:0;

  display:grid;
  grid-template-columns: 1fr 1fr;

  background: rgba(22,27,34,.92);
  border: 1px solid rgba(48,54,61,.95);
  border-radius: var(--r16);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}

/* panels */
.dashboard-panel{
  min-height:0;
  display:flex;
  flex-direction:column;
}
.dashboard-panel:first-child{
  border-right: 1px solid rgba(48,54,61,.95);
}

/* headers */
.dashboard-panel-header{
  height: 44px;
  display:flex;
  align-items:center;
  padding: 0 14px;
  background: rgba(33,38,45,.60);
  border-bottom: 1px solid rgba(48,54,61,.95);
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .35px;
  font-size: 12px;
}

/* textarea / iframe */
.dashboard-editor textarea{
  flex:1;
  min-height:0;
  border:none;
  outline:none;
  background: rgba(13,17,23,.55);
  color: var(--text);
  padding: 16px;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.65;
  resize:none;
}
.dashboard-editor textarea:focus-visible{
  box-shadow: inset var(--ring);
}
.dashboard-editor textarea::placeholder{
  color: rgba(139,148,158,.65);
}
.dashboard-editor iframe{
  flex:1;
  min-height:0;
  border:none;
  background: rgba(13,17,23,.55); /* même fond que le textarea */
}


/* =========================================================
   PROJECTS — better cards
========================================================= */
.projects{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.projects-header{
  padding: 28px 24px;
  border-bottom: 1px solid rgba(48,54,61,.9);
}
.projects-header h1{
  font-size: 28px;
  font-weight: 900;
  color: var(--title);
}
.projects-header .meta{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

.projects-list{
  flex:1;
  min-height:0;
  padding: 22px 24px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
  overflow:auto;
}

.project-card{
  background: rgba(22,27,34,.92);
  border: 1px solid rgba(48,54,61,.95);
  border-radius: var(--r16);
  padding: 16px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.project-card:hover{
  transform: translateY(-2px);
  border-color: rgba(88,166,255,.5);
  box-shadow: var(--shadow-sm);
}
.project-title{
  font-size: 15px;
  font-weight: 850;
  color: var(--title);
}
.project-desc{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}
.project-footer{
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size: 12px;
  color: var(--muted);
}
.project-tag{
  display:inline-flex;
  align-items:center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(33,38,45,.85);
  border: 1px solid rgba(48,54,61,.95);
  color: var(--text);
}

/* =========================================================
   EDITOR PAGE (workspace + header)
========================================================= */
.editor{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.editor-header{
  padding: 22px 24px;
  border-bottom: 1px solid rgba(48,54,61,.9);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.editor-title h1{
  font-size: 22px;
  font-weight: 900;
  color: var(--title);
}
.editor-title .meta{
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}
.editor-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.editor-workspace{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:0;
}

.editor-panel{
  min-height:0;
  display:flex;
  flex-direction:column;
  background: rgba(13,17,23,.22);
  border-top: 1px solid rgba(48,54,61,.9);
}
.editor-panel:first-child{
  border-right: 1px solid rgba(48,54,61,.9);
}
.editor-panel-header{
  height: 42px;
  display:flex;
  align-items:center;
  padding: 0 14px;
  background: rgba(22,27,34,.92);
  border-bottom:1px solid rgba(48,54,61,.9);
  font-size: 12px;
  font-weight: 750;
  color: var(--muted);
  letter-spacing: .35px;
}
.editor-panel textarea{
  flex:1;
  min-height:0;
  border:none;
  outline:none;
  background: transparent;
  color: var(--text);
  padding: 16px;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.65;
  resize:none;
}
.editor-panel textarea:focus-visible{
  box-shadow: inset var(--ring);
}
.editor-panel iframe{
  flex:1;
  min-height:0;
  border:none;
  background:#fff;
}

/* =========================================================
   SETTINGS — sidebar + panel refined
========================================================= */
.settings{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.settings-header{
  padding: 28px 24px;
  border-bottom:1px solid rgba(48,54,61,.9);
}
.settings-header h1{
  font-size: 26px;
  font-weight: 900;
  color: var(--title);
}
.settings-header .meta{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

.settings-content{
  flex:1;
  min-height:0;
  padding: 24px;
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
}

.settings-nav{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.settings-nav a{
  padding: 10px 12px;
  border-radius: var(--r16);
  color: var(--muted);
  border: 1px solid transparent;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.settings-nav a:hover{
  background: rgba(33,38,45,.55);
  border-color: rgba(48,54,61,.95);
  color: var(--title);
  transform: translateY(-1px);
}
.settings-nav a.active{
  background: rgba(33,38,45,.70);
  border-color: rgba(88,166,255,.35);
  color: var(--accent);
}

.settings-panel{
  background: rgba(22,27,34,.92);
  border: 1px solid rgba(48,54,61,.95);
  border-radius: var(--r16);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.settings-panel h2{
  font-size: 18px;
  font-weight: 900;
  color: var(--title);
}
.settings-panel p{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

.settings-form{
  display:flex;
  flex-direction:column;
  gap: 12px;
  max-width: 560px;
}
.settings-form label{ font-size: 13px; color: var(--text); }
.settings-form input{
  height: 42px;
  background: rgba(13,17,23,.70);
  border:1px solid rgba(48,54,61,.95);
  border-radius: 14px;
  padding: 0 12px;
  color: var(--text);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.settings-form input:focus{
  outline:none;
  border-color: rgba(88,166,255,.9);
  box-shadow: var(--ring);
  background: rgba(13,17,23,.88);
}
.settings-form .btn{ align-self:flex-start; height: 40px; border-radius: 14px; }

/* =========================================================
   PROFILE — modern layout
========================================================= */
.profile{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.profile-header{
  padding: 28px 24px;
  border-bottom: 1px solid rgba(48,54,61,.9);
  display:flex;
  align-items:center;
  gap: 20px;
}

.profile-avatar{
  width: 92px;
  height: 92px;
  border-radius: 999px;
  border: 1px solid rgba(48,54,61,.95);
  object-fit: cover;
  background: rgba(22,27,34,.92);
  box-shadow: var(--shadow-sm);
}

.profile-info h1{
  font-size: 26px;
  font-weight: 950;
  color: var(--title);
}
.profile-info .username{ font-size: 14px; color: var(--muted); }
.profile-info .bio{
  margin-top: 8px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.65;
  max-width: 640px;
}

.profile-content{
  flex:1;
  min-height:0;
  padding: 24px;
  display:grid;
  grid-template-columns: 1fr 300px;
  gap: 16px;
  align-items:flex-start;
}

.profile-card{
  background: rgba(22,27,34,.92);
  border:1px solid rgba(48,54,61,.95);
  border-radius: var(--r16);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.profile-card h2{
  font-size: 18px;
  font-weight: 900;
  color: var(--title);
  margin-bottom: 10px;
}
.profile-card p{ line-height: 1.6; color: var(--text); }

.profile-stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.stat{
  background: rgba(13,17,23,.60);
  border:1px solid rgba(48,54,61,.95);
  border-radius: 14px;
  padding: 14px;
  text-align:center;
}
.stat strong{ font-size: 18px; color: var(--title); }
.stat span{ display:block; margin-top: 4px; font-size: 12px; color: var(--muted); }

/* =========================================================
   SCROLLBAR (WebKit)
========================================================= */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{
  background: rgba(139,148,158,.22);
  border-radius: 999px;
  border: 2px solid rgba(13,17,23,.85);
}
*::-webkit-scrollbar-thumb:hover{ background: rgba(139,148,158,.34); }
*::-webkit-scrollbar-track{ background: rgba(13,17,23,.35); }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 980px){
  .landing-features{ grid-template-columns: 1fr; }

  .dashboard-editor{ grid-template-columns: 1fr; }
  .dashboard-panel:first-child{ border-right: none; border-bottom: 1px solid rgba(48,54,61,.95); }

  .editor-workspace{ grid-template-columns: 1fr; }
  .editor-panel:first-child{ border-right: none; border-bottom: 1px solid rgba(48,54,61,.9); }

  .settings-content{ grid-template-columns: 1fr; }
  .settings-nav{ flex-direction: row; flex-wrap: wrap; }

  .profile-content{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  header{ padding: 0 12px; }
  .nav-right a{ display:none; } /* optional: keep header clean on mobile */
}
/* =========================================================
   PROJECTS — match Dashboard / Editor layout
   (paste at the BOTTOM of projects.php <style> OR ui.css)
========================================================= */

/* 1) Page container like dashboard/editor */
.projects{
  width: min(1700px, 100%);
  margin: 0 auto;
  padding: 18px 16px 26px;
  display:flex;
  flex-direction:column;
  gap: 16px;
}

/* 2) Turn header into a card */
.projects-header{
  background: rgba(22,27,34,.92);
  border: 1px solid rgba(48,54,61,.95);
  border-radius: var(--r16);
  box-shadow: var(--shadow-sm);
  padding: 22px 22px 18px;
  margin: 0;            /* override old spacing */
}

/* keep your typography */
.projects-header h1{
  font-size: 28px;
  font-weight: 950;
  color: var(--title);
  letter-spacing: -.5px;
}
.projects-header .meta{
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

/* 3) Toolbar becomes a card too */
.projects-toolbar{
  background: rgba(22,27,34,.92);
  border: 1px solid rgba(48,54,61,.95);
  border-radius: var(--r16);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  margin: 0;            /* override old */
}

/* 4) List grid inside a “card” like dashboard editor */
.projects-list{
  flex:1;
  min-height:0;

  background: rgba(22,27,34,.92);
  border: 1px solid rgba(48,54,61,.95);
  border-radius: var(--r16);
  box-shadow: var(--shadow-sm);
  padding: 16px;

  overflow:auto;

  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}

/* 5) Cards slightly tighter + consistent hover */
.project-card{
  background: rgba(13,17,23,.35);
  border: 1px solid rgba(48,54,61,.95);
  border-radius: var(--r16);
  padding: 16px;
  box-shadow: none;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t), background var(--t);
}
.project-card:hover{
  transform: translateY(-2px);
  border-color: rgba(88,166,255,.5);
  box-shadow: var(--shadow-sm);
  background: rgba(13,17,23,.48);
}

/* 6) Footer alignment like GitHub-ish */
.project-footer{
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
}

/* 7) Modal: match your system radius/shadow (just a bit) */
.modal{
  border-radius: var(--r24);
}
.modal-header{
  background: rgba(33,38,45,.55);
}
.modal-close{
  border-radius: 12px;
}

/* 8) Responsive padding same as dashboard/editor */
@media (max-width: 980px){
  .projects{ padding: 16px 12px 22px; }
  .projects-list{ grid-template-columns: 1fr; }
}
/* =========================================================
   THEME OVERRIDES — Neon / Synthwave (100% different)
   Usage: <html data-theme="neon">
========================================================= */
html[data-theme="neon"]{
  --bg: #07010f;
  --bg-elev: rgba(7,1,15,.78);

  --surface: rgba(22, 10, 40, .72);
  --surface2: rgba(18, 8, 34, .72);
  --surface3: rgba(10, 6, 22, .82);

  --border: rgba(255, 255, 255, .10);
  --border2: rgba(255, 255, 255, .14);

  --text: rgba(255,255,255,.86);
  --muted: rgba(255,255,255,.62);
  --title: #ffffff;

  --accent: #ff4fd8;   /* neon pink */
  --accent2: #00e5ff;  /* neon cyan */
  --success: #1bff9a;
  --danger: #ff3b6b;
  --warning: #ffd166;

  --ring: 0 0 0 3px rgba(255,79,216,.22);
  --shadow-sm: 0 1px 0 rgba(255,255,255,.06), 0 14px 45px rgba(0,0,0,.55);
  --shadow-md: 0 1px 0 rgba(255,255,255,.08), 0 22px 80px rgba(0,0,0,.65);
}

/* Background + glow in neon mode */
html[data-theme="neon"] body{
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(255,79,216,.18), transparent 60%),
    radial-gradient(800px 520px at 90% 10%, rgba(0,229,255,.16), transparent 55%),
    radial-gradient(700px 520px at 50% 110%, rgba(27,255,154,.10), transparent 55%),
    linear-gradient(180deg, rgba(7,1,15,1) 0%, rgba(5,2,10,1) 100%);
}

/* Card surfaces become glassy */
html[data-theme="neon"] .surface,
html[data-theme="neon"] .auth-card,
html[data-theme="neon"] .settings-header,
html[data-theme="neon"] .settings-content,
html[data-theme="neon"] .settings-panel,
html[data-theme="neon"] .project-card,
html[data-theme="neon"] .dashboard-journal,
html[data-theme="neon"] .dashboard-editor{
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

/* Buttons become neon */
html[data-theme="neon"] .btn{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
html[data-theme="neon"] .btn:hover{
  border-color: rgba(255,79,216,.55);
  box-shadow: 0 0 0 3px rgba(255,79,216,.10);
}
html[data-theme="neon"] .btn.primary{
  background: linear-gradient(90deg, rgba(255,79,216,.95) 0%, rgba(0,229,255,.95) 100%);
  border-color: transparent;
  color: #07010f;
}
html[data-theme="neon"] .btn.primary:hover{
  filter: brightness(1.05);
}

/* Links pop */
html[data-theme="neon"] a:hover{
  color: var(--accent2);
}
/* =========================
   EDITOR TOOLBAR & CONSOLE
========================= */

.editor-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-bottom:1px solid rgba(48,54,61,.95);
  background: rgba(13,17,23,.45);
}

.editor-console{
  max-height:140px;
  overflow:auto;
  border-top:1px solid rgba(48,54,61,.95);
  background:#0b0f14;
  font-family: var(--mono);
  font-size:12px;
  padding:10px;
  color:#f85149;
  display:none;
}

.editor-console.ok{
  color:#3fb950;
}

.editor-console.warn{
  color:#d29922;
}
/* =========================================================
   APP SHELL — make all internal pages feel like INDEX
   (paste at the VERY END of ui.css)
========================================================= */

/* ---------- Fixes ---------- */
html{ overflow-y:auto; }
body{ overflow-y:auto; overflow-x:hidden; }

/* Fix auth-card width bug */
.auth-card{ max-width: 520px; } /* was 40px */

/* Prevent register feature blocks from inheriting landing .feature rules too aggressively */
.auth-left .feature{
  min-height: auto;
  box-shadow: none;
  padding: 10px 12px;
  background: rgba(13,17,23,.45);
  border: 1px solid rgba(48,54,61,.75);
}
.auth-left .feature:hover{
  transform:none;
  border-color: rgba(48,54,61,.75);
  box-shadow:none;
}

/* ---------- Index-like hero background reusable ---------- */
.gh-hero-bg{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(48,54,61,.55);
  background:
    radial-gradient(900px 520px at 50% 35%, rgba(109,64,255,.25), transparent 60%),
    radial-gradient(980px 520px at 20% 40%, rgba(88,166,255,.20), transparent 62%),
    radial-gradient(980px 520px at 80% 40%, rgba(255,95,185,.14), transparent 62%),
    linear-gradient(180deg, rgba(8,12,26,1), rgba(13,17,23,1));
}
.gh-hero-bg::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(1200px 700px at 50% 25%,
      rgba(0,0,0,0),
      rgba(0,0,0,.35) 68%,
      rgba(0,0,0,.55) 92%);
  pointer-events:none;
  opacity:.95;
}
.gh-hero-bg > *{ position:relative; z-index:2; }

/* ---------- Unified page container (index rhythm) ---------- */
.page{
  flex:1;
  min-height:0;
  width: min(1700px, 100%);
  margin: 0 auto;
  padding: 18px 16px 26px;
  display:flex;
  flex-direction:column;
  gap: 16px;
}

/* ---------- Internal pages: give them a HERO strip like index ---------- */
/* Works even if you don't change HTML: you can add class="page-hero" to headers later. */
.page-hero{
  border: 1px solid rgba(48,54,61,.95);
  border-radius: var(--r24);
  box-shadow: var(--shadow-md);
  overflow:hidden;
}
.page-hero .hero-inner{
  padding: 22px 22px 18px;
}
.page-hero h1{
  font-size: 30px;
  font-weight: 950;
  letter-spacing: -0.6px;
  color: var(--title);
}
.page-hero .meta{
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Cards that match index ---------- */
.card{
  background: rgba(22,27,34,.92);
  border: 1px solid rgba(48,54,61,.95);
  border-radius: var(--r16);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.card.pad{ padding: 18px; }
.card.pad-lg{ padding: 22px; }

/* index-like card header */
.card-header{
  height: 44px;
  display:flex;
  align-items:center;
  padding: 0 14px;
  background: rgba(33,38,45,.60);
  border-bottom: 1px solid rgba(48,54,61,.95);
  color: var(--muted);
  font-weight: 900;
  letter-spacing: .35px;
  font-size: 12px;
}

/* ---------- DASHBOARD: turn into hero + cards (no HTML change needed) ---------- */
.dashboard{
  width: min(1700px, 100%);
  margin: 0 auto;
  padding: 18px 16px 26px;
  display:flex;
  flex-direction:column;
  gap: 16px;
}

/* journal becomes "hero card" like index */
.dashboard-journal{
  border-radius: var(--r24);
  overflow:hidden;
  background:
    radial-gradient(900px 520px at 50% 35%, rgba(109,64,255,.16), transparent 60%),
    radial-gradient(980px 520px at 20% 40%, rgba(88,166,255,.14), transparent 62%),
    radial-gradient(980px 520px at 80% 40%, rgba(46,160,67,.10), transparent 62%),
    rgba(22,27,34,.92);
  border: 1px solid rgba(48,54,61,.95);
  box-shadow: var(--shadow-md);
}

.dashboard-journal h1{
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -0.9px;
}

/* editor card stays, but match index polish */
.dashboard-editor{
  border-radius: var(--r24);
  box-shadow: var(--shadow-md);
}
.dashboard-panel-header{
  background: rgba(22,27,34,.92);
}

/* ---------- PROJECTS: make it look like index cards ---------- */
.projects{
  width: min(1700px, 100%);
  margin: 0 auto;
  padding: 18px 16px 26px;
  display:flex;
  flex-direction:column;
  gap: 16px;
}

/* header becomes hero card */
.projects-header{
  border-radius: var(--r24);
  overflow:hidden;
  background:
    radial-gradient(900px 520px at 50% 35%, rgba(109,64,255,.16), transparent 60%),
    radial-gradient(980px 520px at 20% 40%, rgba(88,166,255,.14), transparent 62%),
    rgba(22,27,34,.92);
  border: 1px solid rgba(48,54,61,.95);
  box-shadow: var(--shadow-md);
  padding: 22px 22px 18px;
}

/* toolbar becomes a glass card */
.projects-toolbar{
  background: rgba(22,27,34,.92);
  border: 1px solid rgba(48,54,61,.95);
  border-radius: var(--r16);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
}

/* list becomes a card container (already ok, but rounder + better) */
.projects-list{
  border-radius: var(--r24);
  box-shadow: var(--shadow-md);
  padding: 16px;
}

/* ---------- SETTINGS: turn header into hero card + panels as cards ---------- */
.settings-header{
  border-radius: var(--r24);
  overflow:hidden;
  background:
    radial-gradient(900px 520px at 50% 35%, rgba(109,64,255,.16), transparent 60%),
    radial-gradient(980px 520px at 20% 40%, rgba(88,166,255,.14), transparent 62%),
    rgba(22,27,34,.92);
  border: 1px solid rgba(48,54,61,.95);
  box-shadow: var(--shadow-md);
  padding: 22px 22px 18px;
  margin: 18px 16px 0;
  width: min(1700px, 100%);
  align-self:center;
}

/* keep content aligned with header */
.settings-content{
  width: min(1700px, 100%);
  margin: 0 auto;
  padding: 16px;
}

/* sidebar feels like index pills */
.settings-nav a{
  background: rgba(13,17,23,.35);
  border: 1px solid rgba(48,54,61,.65);
}
.settings-nav a:hover{
  border-color: rgba(88,166,255,.45);
}
.settings-nav a.active{
  background: rgba(33,38,45,.70);
  border-color: rgba(88,166,255,.35);
}

/* panel rounder + deeper */
.settings-panel{
  border-radius: var(--r24);
  box-shadow: var(--shadow-md);
}

/* ---------- PROFILE: hero header + cards ---------- */
.profile-header{
  border-radius: var(--r24);
  overflow:hidden;
  background:
    radial-gradient(900px 520px at 50% 35%, rgba(109,64,255,.16), transparent 60%),
    radial-gradient(980px 520px at 20% 40%, rgba(88,166,255,.14), transparent 62%),
    rgba(22,27,34,.92);
  border: 1px solid rgba(48,54,61,.95);
  box-shadow: var(--shadow-md);
  margin: 18px 16px 0;
  width: min(1700px, 100%);
  align-self:center;
}

.profile-content{
  width: min(1700px, 100%);
  margin: 0 auto;
  padding: 16px;
}

.profile-card{
  border-radius: var(--r24);
  box-shadow: var(--shadow-md);
}

/* ---------- Editor page: hero header + workspace card ---------- */
.editor-header{
  width: min(1700px, 100%);
  margin: 18px auto 0;
  padding: 22px 22px 18px;
  border-radius: var(--r24);
  overflow:hidden;
  background:
    radial-gradient(900px 520px at 50% 35%, rgba(109,64,255,.16), transparent 60%),
    radial-gradient(980px 520px at 20% 40%, rgba(88,166,255,.14), transparent 62%),
    rgba(22,27,34,.92);
  border: 1px solid rgba(48,54,61,.95);
  box-shadow: var(--shadow-md);
}

.editor-workspace{
  width: min(1700px, 100%);
  margin: 0 auto 26px;
  border-radius: var(--r24);
  overflow:hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(48,54,61,.95);
}

/* Make editor panels match dashboard editor headers */
.editor-panel-header{
  background: rgba(33,38,45,.60);
}

/* ---------- Responsive: keep index-like spacing ---------- */
@media (max-width: 980px){
  .settings-header,
  .profile-header,
  .editor-header{
    margin: 16px 12px 0;
  }
  .settings-content,
  .profile-content{
    padding: 12px;
  }
  .editor-workspace{
    margin: 0 12px 22px;
    width: auto;
  }
}