body {
  background-color: #121212;
  color: #e0e0e0;
  margin: 0px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Accessibility utilities */
.focus-ring:focus-visible { outline:2px solid #bb86fc; outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .no-motion { transition:none !important; animation:none !important; }
}

/* Blog & Article Styles */
.blog-article-wrapper {
  max-width: 960px;
  margin: 50px auto;
  padding: 40px 50px;
  background:#1e1e1e;
  border:1px solid #2f2f2f;
  border-radius:18px;
  box-shadow:0 8px 28px rgba(0,0,0,0.55);
  position:relative;
}
.blog-article-wrapper.featured {
  border-color:#bb86fc;
  box-shadow:0 0 0 1px #bb86fc, 0 8px 32px rgba(187,134,252,0.25);
}
.blog-title {
  font-size:2.4rem;
  line-height:1.15;
  margin:0 0 10px 0;
  background:linear-gradient(45deg,#bb86fc,#9c4dcc);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.blog-meta {
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:#888;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin:6px 0 20px 0;
}
.blog-excerpt {
  font-style:italic;
  color:#c9c9c9;
  font-size:1.06rem;
  line-height:1.5;
  margin:0 0 24px 0;
}
.blog-content {
  font-size:1.05rem;
  line-height:1.7;
  color:#ececec;
}
.blog-content p { margin:0 0 1.2em 0; }
.blog-content code {
  background:#252525;
  color:#ffecb3;
  padding:2px 6px;
  border-radius:4px;
  font-size:0.9rem;
}
.blog-content pre {
  background:#1b1b1b;
  padding:16px 18px;
  border:1px solid #2d2d2d;
  border-radius:10px;
  overflow:auto;
  font-size:0.85rem;
  line-height:1.4;
}
.blog-separator { border:none; height:1px; background:linear-gradient(90deg,transparent,#333,transparent); margin:35px 0 30px; }

/* Blog Editor Styles */
.blog-editor-wrapper { max-width:1200px; margin:40px auto; padding:10px 30px 60px; }
.blog-editor-grid { display:grid; gap:28px; grid-template-columns:1fr 320px; align-items:start; }
@media (max-width: 1100px){ .blog-editor-grid { grid-template-columns:1fr; } }
.panel {
  background:#1f1f1f;
  border:1px solid #313131;
  border-radius:16px;
  padding:28px 30px;
  box-shadow:0 6px 24px rgba(0,0,0,0.45);
  position:relative;
}
.panel-header { margin-top:0; font-size:1.4rem; background:linear-gradient(45deg,#bb86fc,#9c4dcc); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.form-grid { display:grid; gap:22px; }
.form-row-inline { display:flex; gap:18px; flex-wrap:wrap; }
.form-row-inline > * { flex:1; min-width:180px; }
.field-group { display:flex; flex-direction:column; gap:6px; }
.field-group label { font-size:0.78rem; letter-spacing:1px; font-weight:600; text-transform:uppercase; color:#a7a7a7; }
.field-group input[type=text],
.field-group textarea,
.field-group select {
  background:#262626;
  border:1px solid #3a3a3a;
  border-radius:10px;
  padding:12px 14px;
  color:#e0e0e0;
  font:500 15px 'Segoe UI',sans-serif;
  transition:border-color .25s, background .25s;
  width:100%;
  box-sizing:border-box;
}
.field-group input:focus,
.field-group textarea:focus,
.field-group select:focus { outline:none; border-color:#bb86fc; background:#2d2d2d; }
.field-inline-flags { display:flex; gap:20px; flex-wrap:wrap; }
.field-inline-flags label { display:flex; align-items:center; gap:6px; font-size:0.8rem; color:#c5c5c5; }
.hint { font-size:0.7rem; color:#777; letter-spacing:.5px; }
.slug-preview { font-size:0.72rem; color:#9c9c9c; margin-top:2px; font-family:monospace; }
.counter { font-size:0.65rem; color:#777; margin-left:auto; }

.editor-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
.btn { --btn-bg:#bb86fc; --btn-color:#121212; background:var(--btn-bg); color:var(--btn-color); padding:12px 24px; border:none; border-radius:10px; font-weight:600; font-size:0.9rem; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,0.4); transition:background .25s, transform .25s; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.btn:hover { background:#9c4dcc; transform:translateY(-2px); }
.btn.secondary { --btn-bg:#3d3d3d; --btn-color:#f0f0f0; }
.btn.secondary:hover { background:#4a4a4a; }
.btn.outline { background:transparent; border:1px solid #3d3d3d; color:#e0e0e0; }
.btn.outline:hover { border-color:#bb86fc; color:#bb86fc; }

.recent-posts-grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.recent-post-card { background:#2a2a2a; border:1px solid #373737; border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:10px; position:relative; }
.recent-post-card h3 { margin:0; font-size:1rem; color:#bb86fc; line-height:1.3; }
.status-chip { font-size:0.55rem; padding:4px 7px; border-radius:20px; background:#333; color:#bbb; letter-spacing:.5px; text-transform:uppercase; }
.status-chip.featured { background:linear-gradient(45deg,#bb86fc,#ffcf66); color:#121212; font-weight:600; }
.mini-meta { font-size:0.6rem; color:#777; letter-spacing:.5px; }
.card-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; }
.chip-btn { background:#3b3b3b; color:#e0e0e0; padding:6px 10px; border-radius:8px; font-size:0.65rem; text-decoration:none; font-weight:500; transition:background .25s, transform .25s; }
.chip-btn:hover { background:#4b4b4b; transform:translateY(-2px); }

.message.success { background:#1f3321; border-left:4px solid #2f9e44; }
.message.error { background:#3a1e1e; border-left:4px solid #ff6b6b; }
.message { padding:14px 16px; border-radius:10px; font-size:0.8rem; line-height:1.4; }

/* Utilities */
.flex { display:flex; }
.gap-xs { gap:6px; }
.gap-sm { gap:12px; }
.wrap { flex-wrap:wrap; }
.mt-md { margin-top:24px; }
.mt-lg { margin-top:40px; }

@media (max-width: 780px){
  .blog-article-wrapper { padding:32px 26px; margin:34px 14px; }
  .blog-title { font-size:2rem; }
  .blog-editor-wrapper { padding:0 18px 50px; }
  .panel { padding:22px 22px; }
}

h1 {
  color: #ffffff;
  margin-left: 20px;
}

a {
  text-decoration: none;
  color: #bb86fc;
  transition: color 0.3s ease;
}

a:hover {
  color: #9c4dcc;
}

.top-bar-title {
  color: #ffffff;
  background-color: #1e1e1e;
  font: 30px 'Segoe UI', sans-serif;
  font-weight: bold;
  padding: 15px 0;
  margin: 0;
  text-align: center;
  width: 100%;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.top-bar-menu {
  color: #ffffff;
  background-color: #1e1e1e;
  font: 25px 'Segoe UI', sans-serif;
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
  padding: 10px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.account-bubble {
  color: #e0e0e0;
  background-color: #2a2a2a;
  border-radius: 12px;
  text-align: left;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border: 1px solid #3a3a3a;
}

.top-tab {
  color: #b0b0b0;
  background-color: #2a2a2a;
  font: 20px 'Segoe UI', sans-serif;
  width: 120px;
  margin: 0 10px;
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.top-tab:hover {
  background-color: #3a3a3a;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.mid-content {
  color: #e0e0e0;
  background-color: #1e1e1e;
  border-radius: 15px;
  justify-content: center;
  display: flex;
  padding: 20px;
  margin: 20px 50px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  border: 1px solid #3a3a3a;
}

.mid-bubble {
  color: #b0b0b0;
  background-color: #2a2a2a;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

/* Additional modern styles */
.content-box {
  background-color: #2a2a2a;
  border-radius: 10px;
  padding: 20px;
  margin: 10px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border: 1px solid #3a3a3a;
}

.message-box {
  background-color: #2a2a2a;
  border-radius: 8px;
  padding: 15px;
  margin: 10px 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid #3a3a3a;
}

.message-success {
  border-left: 4px solid #4caf50;
}

.message-error {
  border-left: 4px solid #f44336;
}

.message-warning {
  border-left: 4px solid #ff9800;
}

.message-info {
  border-left: 4px solid #2196f3;
}

.grid-container {
  display: grid;
  gap: 15px;
}

.grid-item {
  background-color: #2a2a2a;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid #3a3a3a;
}

.nav-menu ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 15px;
}

.nav-menu li {
  background-color: #2a2a2a;
  border-radius: 8px;
  padding: 10px 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease;
}

.nav-menu li:hover {
  background-color: #3a3a3a;
}

.nav-menu li.active {
  background-color: #bb86fc;
  color: #121212;
}

/* Hide old top-bar elements since navigation is now in header */
.top-bar-title,
.top-bar-menu {
  display: none !important;
}

/* Responsive tweaks */
@media (max-width: 992px) {
  .grid-container { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

@media (max-width: 768px) {
  h1 { margin-left: 12px; font-size: 1.6rem; }
  .mid-content { margin: 12px; padding: 16px; }
  .account-bubble { padding: 16px; }
  .top-tab { width: auto; padding: 10px 12px; }
}

@media (max-width: 420px) {
  body { font-size: 15px; }
}

/* ================= Home Page Layout ================= */
.home-layout { display:grid; grid-template-columns: 1fr 1fr; gap:48px; max-width:1600px; margin:50px auto 90px; padding:0 60px; align-items:start; }
@media (max-width:1400px){ .home-layout { grid-template-columns: 1.1fr 1fr; } }
@media (max-width:1100px){ .home-layout { grid-template-columns:1fr; padding:0 34px; gap:60px; } }
@media (max-width:640px){ .home-layout { padding:0 18px; margin:40px auto 70px; gap:50px; } }

.home-column { display:flex; flex-direction:column; gap:46px; }
.home-column--blog { order:1; }
.home-column--projects { order:2; }

/* Panel Blocks */
.panel-block { background:#1e1e1e; border:1px solid #2c2c2c; border-radius:22px; padding:30px 34px 36px; box-shadow:0 6px 28px rgba(0,0,0,0.5); position:relative; display:flex; flex-direction:column; gap:26px; }
.panel-block:before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(140deg,rgba(187,134,252,0.08),rgba(255,255,255,0)); opacity:0; transition:opacity .5s; }
.panel-block:hover:before { opacity:1; }
.panel-block--primary { border-color:#3a2b52; }
.panel-block--accent { border-color:#2e3d52; }
.panel-block-header { display:flex; align-items:center; gap:20px; justify-content:space-between; flex-wrap:wrap; margin-bottom:-6px; }
.block-title { margin:0; font-size:1.2rem; letter-spacing:.5px; font-weight:600; background:linear-gradient(45deg,#bb86fc,#9c4dcc); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.block-link { font-size:0.65rem; text-transform:uppercase; letter-spacing:1.5px; color:#888; font-weight:600; opacity:.85; transition:color .3s, opacity .3s; }
.block-link:hover { color:#bb86fc; opacity:1; }

/* Cards / Shared */
.card, .project-card { background:#272727; border:1px solid #353535; border-radius:16px; padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; position:relative; box-shadow:0 4px 18px rgba(0,0,0,0.45); transition:border-color .3s, transform .25s; }
.card:before, .project-card:before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(circle at 30% 20%, rgba(187,134,252,0.15), transparent 60%); opacity:0; transition:opacity .4s; }
.card:hover, .project-card:hover { border-color:#4a3a5d; transform:translateY(-3px); }
.card:hover:before, .project-card:hover:before { opacity:1; }
.card-title, .project-title { margin:0; font-size:1rem; font-weight:600; color:#bb86fc; line-height:1.3; }
.card-meta, .project-date { font-size:0.62rem; color:#777; letter-spacing:1px; text-transform:uppercase; margin:0 0 2px; }
.card-text, .project-desc { font-size:0.83rem; line-height:1.5; color:#cfcfcf; margin:0 0 6px; }
.excerpt { font-style:italic; color:#d6c4ef; opacity:.9; }
.btn-inline { font-size:0.7rem; font-weight:600; color:#9c4dcc; text-decoration:none; letter-spacing:.5px; display:inline-flex; align-items:center; gap:4px; position:relative; }
.btn-inline:after { content:""; height:1px; width:0; background:linear-gradient(90deg,#bb86fc,#9c4dcc); position:absolute; left:0; bottom:-2px; transition:width .3s; }
.btn-inline:hover:after { width:100%; }
.btn-inline.small { font-size:0.65rem; }
.empty { font-size:0.75rem; color:#777; letter-spacing:.5px; margin:4px 0 0; }
.card-link { color:#bb86fc; text-decoration:none; }
.card-link:hover { color:#d1b2ff; }

/* Micro Feed */
.micro-grid { --min:220px; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--min),1fr)); gap:14px; }
.micro-item { position:relative; }
.micro-link { display:flex; flex-direction:column; gap:6px; background:#232323; border:1px solid #343434; border-radius:14px; padding:14px 16px 16px; color:#e0e0e0; font-size:0.68rem; line-height:1.35; text-decoration:none; min-height:110px; transition:border-color .3s, background .3s, transform .25s; }
.micro-link:hover { border-color:#4a3a5d; background:#282828; transform:translateY(-3px); }
.micro-date { font-size:0.6rem; color:#777; letter-spacing:1px; text-transform:uppercase; }
.micro-content { font-size:0.7rem; font-weight:500; color:#eaeaea; }

/* Featured Project */
.featured-project-card { display:flex; gap:26px; flex-wrap:wrap; align-items:stretch; background:#272727; border:1px solid #353535; border-radius:20px; padding:24px 26px; box-shadow:0 4px 22px rgba(0,0,0,0.5); position:relative; overflow:hidden; }
.featured-project-card:before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(156,77,204,0.08),transparent 55%); pointer-events:none; opacity:0; transition:opacity .5s; }
.featured-project-card:hover:before { opacity:1; }
.featured-thumb { flex:0 0 260px; max-width:260px; position:relative; height:150px; }
.featured-thumb img { width:100%; height:100%; object-fit:cover; border-radius:14px; display:block; box-shadow:0 6px 20px rgba(0,0,0,0.45); }
.thumb-placeholder { width:100%; height:150px; border-radius:14px; background:linear-gradient(45deg,#bb86fc,#9c4dcc); display:flex; align-items:center; justify-content:center; color:#121212; font-weight:700; font-size:1.2rem; letter-spacing:1px; }
.featured-body { flex:1; min-width:260px; display:flex; flex-direction:column; gap:8px; }

/* Projects Grid */
.projects-grid { --min:240px; display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--min),1fr)); gap:18px; }
.project-card { align-items:flex-start; }
.project-card .btn-inline { margin-top:auto; }

/* Animations subtle */
@media (prefers-reduced-motion: no-preference) {
  .card, .project-card, .micro-link, .featured-project-card { transition:transform .35s cubic-bezier(.4,.4,.2,1), border-color .35s, background .35s; }
}

/* Tight mobile adjustments */
@media (max-width:600px){
  .panel-block { padding:26px 24px 30px; border-radius:20px; }
  .panel-block-header { gap:14px; }
  .block-title { font-size:1.05rem; }
  .featured-project-card { padding:22px 22px; }
  .featured-thumb { flex:1 1 100%; max-width:100%; }
  .featured-thumb img, .thumb-placeholder { height:180px; }
}