:root{
  --fg: #00ff66;
  --bg: #0f1013;
  --panel: #0b0c0e;
  --muted: #7fffd4;
  --text: #e6eef1;
}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body.modal-open { overflow: hidden; }

/* === Hide Scrollbars === */
body, #terminal, #cert-modal { scrollbar-width: none; -ms-overflow-style: none; }
body::-webkit-scrollbar, #terminal::-webkit-scrollbar, #cert-modal::-webkit-scrollbar { display: none; }

header{position:fixed;left:0;right:0;top:0;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-bottom: 1px solid rgba(255,255,255,0.03);z-index:20;box-shadow: 0 6px 18px rgba(0,0,0,0.35);}
.brand{display:flex; align-items:center; gap:12px;}
.brand h1{margin:0; font-family: "Roboto Mono", monospace; font-weight:600; color: #00e6b8; font-size:1.1rem; letter-spacing:0.6px;}
nav { display:flex; flex-wrap:wrap; align-items:center; gap:18px; justify-content: flex-end;}
nav a, nav button { color: #cfe9e0; text-decoration:none; background:transparent; border:0; cursor:pointer; font-size:0.95rem; padding:8px 10px; border-radius:6px; white-space:nowrap;}
nav a:hover, nav button:hover { color: #00e6b8; background: rgba(0,230,184,0.03); }
nav a.active { color: #00e6b8; background: rgba(0,230,184,0.05); font-weight: 600; border-bottom: 2px solid #00e6b8; } 
nav .cli-button { font-family: "Roboto Mono", monospace; font-weight:600; }
.lang-switch { display:flex; gap:8px; align-items:center; font-size:0.9rem; }
.lang-btn { cursor:pointer; color:var(--muted); background:transparent; border:0; padding:6px; border-radius:6px; }
.lang-btn.active { color:var(--text); background: rgba(255,255,255,0.03); }

.fade-mode{transition: opacity 0.4s ease, pointer-events 0.4s ease; opacity:1; pointer-events:auto;}
.fade-mode.hidden{opacity:0; pointer-events:none;}
#normal-mode { padding-top:96px; min-height:100vh; display:block;}
main.content { max-width:1000px; margin: 6vh auto; padding: 0 24px;}
.card { background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); border: 1px solid rgba(255,255,255,0.02); padding:28px; border-radius:10px; box-shadow: 0 8px 30px rgba(0,0,0,0.45); color:var(--text); margin-bottom:32px; }
h2 { margin-top:0; color:#dff7ee; font-family:"Roboto Mono", monospace; }
h3 { color: var(--muted); margin-top: 30px; }

/* Blog Styles */
.blog-post-list { list-style: none; padding-left: 0; }
.blog-post-list li { margin-bottom: 15px; }
.blog-post-list a { color: var(--muted); text-decoration: none; font-size: 1.1rem; display: block; padding: 10px; border-radius: 6px; transition: background 0.2s ease, color 0.2s ease; }
.blog-post-list a:hover { color: var(--fg); background: rgba(0, 230, 184, 0.05); }

/* Article Styles */
.back-link { color: var(--fg); text-decoration: none; font-family: "Roboto Mono", monospace; font-weight: 600; display: inline-block; margin-bottom: 24px; cursor: pointer; }
.back-link:hover { text-decoration: underline; }
.article-header h1 { color: #dff7ee; font-family:"Roboto Mono", monospace; font-size: 2rem; margin-top: 0; }
.article-header .date { color: var(--muted); font-style: italic; margin-bottom: 20px; }
.article-content { line-height: 1.7; font-size: 1.05rem; }
.article-content p { margin-bottom: 1.5em; }
.article-content h2 { color:#dff7ee; font-family:"Roboto Mono", monospace; margin-top: 2em; }
.article-content ul, .article-content ol { line-height: 1.7; }
.article-content code { background: var(--panel); border: 1px solid rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 4px; font-family: "Roboto Mono", monospace; color: var(--muted); }
.article-content pre { background: var(--panel); border: 1px solid rgba(255,255,255,0.05); padding: 16px; border-radius: 8px; overflow-x: auto; scrollbar-width: thin; }
.article-content pre code { background: transparent; border: 0; padding: 0; }

/* Contact Form Styles */
.social-links { display: flex; gap: 20px; margin: 20px 0; }
.social-links a { color: var(--muted); text-decoration: none; font-weight: 500; }
.social-links a:hover { color: var(--fg); text-decoration: underline; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 500; color: #cfe9e0; }
.form-group input, .form-group textarea { width: 100%; padding: 12px; background: var(--panel); border: 1px solid rgba(255,255,255,0.05); border-radius: 6px; color: var(--text); font-size: 1rem; box-sizing: border-box; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 10px rgba(0,255,102,0.1); }
.cta-button { background: var(--fg); color: var(--bg); border: none; padding: 10px 16px; font-size: 0.95rem; font-weight: 600; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; margin-top: 10px; }
.cta-button:hover { background: #fff; color: #000; }
.cta-button:disabled { background: var(--muted); cursor: not-allowed; }
a.cta-button { text-decoration: none; display: inline-block; }
#form-status { margin-top: 15px; font-weight: 500; }
#form-status.success { color: var(--fg); }
#form-status.error { color: #ff4d4d; }

/* Resume Styles */
.resume-embed { width: 100%; height: 800px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; margin-top: 20px; }
.resume-download-link { display: inline-block; margin-bottom: 20px; font-size: 1.1rem; }

/* Certification Styles */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
.cert-item { background: var(--panel); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; padding: 16px; text-align: center; transition: all 0.2s ease-in-out; cursor: pointer; }
.cert-item:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.3); border-color: rgba(0, 230, 184, 0.2); }
.cert-item img { width: 100%; max-width: 100%; height: auto; border-radius: 6px; aspect-ratio: 1 / 1; object-fit: contain; background: #22252a; border: 1px solid rgba(255,255,255,0.03); }
.cert-item h4 { margin: 12px 0 4px 0; color: var(--text); font-size: 1rem; font-weight: 500; }
.cert-item p { font-size: 0.9rem; color: var(--muted); margin: 0 0 8px 0; }
.cert-item a { font-size: 0.9rem; color: var(--fg); text-decoration: none; font-weight: 600; font-family: "Roboto Mono", monospace; }
.cert-item a:hover { text-decoration: underline; }

/* Modal Styles */
#cert-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 100; backdrop-filter: blur(5px); opacity: 0; transition: opacity 0.3s ease; }
#cert-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); width: 90%; max-width: 900px; max-height: 90vh; overflow-y: auto; background: var(--bg); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; box-shadow: 0 15px 40px rgba(0,0,0,0.5); z-index: 101; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; }
.modal-close-btn { position: absolute; top: 15px; right: 15px; background: transparent; border: 0; color: var(--muted); font-size: 2rem; cursor: pointer; line-height: 1; }
.modal-close-btn:hover { color: var(--fg); }
.modal-content { padding: 24px; }
.modal-content h2 { font-family: Inter, system-ui, sans-serif; color: var(--text); margin-top: 10px; }
.modal-content h3 { font-family: "Roboto Mono", monospace; font-size: 1.1rem; color: var(--fg); margin-bottom: 10px; }
.modal-images { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.modal-images img { width: 100%; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: #22252a; }
.modal-details h4 { color: var(--muted); font-family: "Roboto Mono", monospace; margin-top: 20px; margin-bottom: 10px; }
.modal-skills-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.modal-skills-list li { background: rgba(0, 230, 184, 0.05); color: var(--fg); padding: 5px 12px; border-radius: 15px; font-size: 0.9rem; font-weight: 500; }
.modal-description { background: var(--panel); border: 1px solid rgba(255,255,255,0.05); padding: 16px; border-radius: 8px; font-size: 0.95rem; line-height: 1.6; }
.modal-verify-link { display: inline-block; margin-top: 20px; }
@media (max-width: 600px) { .modal-images { grid-template-columns: 1fr; } .modal-content { padding: 20px; } .modal-content h2 { font-size: 1.5rem; } }

/* CLI & Gemini */
#cli-mode { display:none; width:100%; height:100vh; background: #050506; padding: 20px; box-sizing: border-box; color: var(--fg); font-family: monospace; font-size:1.02rem; overflow-y:auto; position:relative;}
#terminal{ padding:20px; box-sizing:border-box; min-height:100vh; white-space:pre-wrap; word-wrap:break-word; outline:none; transition: opacity 0.4s ease-in-out;}
.fade-out{ opacity:0; }
.cursor{ display:inline-block; width:10px; height:1.1em; background:var(--fg); vertical-align:bottom; animation:blink 1s step-start infinite; margin-left:4px; }
@keyframes blink{50%{opacity:0}}
.option-div{ display:flex; flex-direction:row; gap:12px; align-items:center; margin:4px 0; }
.option-left{ min-width:220px; display:flex; gap:6px; align-items:center; }
.option-left .cmd{ color:var(--fg); }
.option-right{ color: #7fffd4; flex:1; }
a.normal-link{ color:var(--fg); text-decoration:none; cursor:pointer; }
a.normal-link:hover{ text-decoration:underline; }
.select-line{ margin-top:12px; margin-bottom:6px; }
.skill-box{ border:1px solid #7fffd4; border-radius:8px; padding:12px; margin:8px 0; }
.gemini-feature-box { background: var(--panel); border: 1px solid rgba(0, 255, 102, 0.1); border-radius: 8px; padding: 20px; margin-top: 20px; }
.gemini-feature-box.hidden { display: none; }
.gemini-feature-box p { margin-top: 0; line-height: 1.6; }
.qa-section h2 { font-size: 1.5rem; margin-top: 40px; }
@media (max-width:850px){ nav { gap: 8px; justify-content: flex-end; } nav a, nav button { font-size: 0.85rem; padding: 6px 8px; } }
@media (max-width:700px){ .option-left{ min-width:140px; } header{ padding:0 12px; height: auto; padding-top: 10px; padding-bottom: 10px;} #normal-mode { padding-top: 80px; } .brand h1 { font-size: 1rem; } }