:root { --page:#b8c5c2; --paper:#f8f8f6; --card:#fff; --ink:#242424; --muted:#747474; --line:#e5e5e2; --shadow:0 8px 28px rgba(35,52,49,.08); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; padding:68px 24px; background:var(--page); color:var(--ink); font-family:"Vazirmatn",Tahoma,sans-serif; line-height:1.75; }
a { color:inherit; text-decoration:none; }
.resume-frame { width:min(1120px,100%); margin:0 auto; padding:38px; display:grid; grid-template-columns:290px minmax(0,1fr); gap:34px; align-items:start; background:var(--paper); border:1px solid rgba(255,255,255,.7); border-radius:24px; box-shadow:0 24px 80px rgba(34,51,48,.12); }
.profile-column { position:sticky; top:24px; display:grid; gap:12px; }
.profile-card,.contact-card { background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }
.profile-card { padding:12px; }
.profile-photo { width:100%; aspect-ratio:1.04; display:block; object-fit:cover; object-position:center; border-radius:10px; filter:saturate(.72); }
.profile-copy { padding:15px 7px 6px; }
.hello { margin:0; font-size:.82rem; color:var(--muted); }
h1 { margin:2px 0 7px; font-size:1.9rem; line-height:1.25; letter-spacing:-.04em; }
.role { margin:0 0 16px; font-size:.86rem; line-height:1.55; color:var(--muted); }
.status,.location { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:.75rem; }
.status span { width:8px; height:8px; border-radius:50%; background:#51bf68; box-shadow:0 0 0 3px #e1f5e5; }
.location { margin-top:7px; border:0; padding-inline:2px; color:var(--muted); }
.contact-card { padding:12px; display:grid; gap:8px; }
.contact-card>a:not(.button) { direction:ltr; text-align:left; padding:4px 6px; color:var(--muted); font-size:.73rem; overflow-wrap:anywhere; }
.contact-card>a span { display:inline-block; width:20px; color:var(--ink); }
.button { min-height:42px; display:grid; place-items:center; border-radius:8px; font-size:.8rem; font-weight:600; }
.button.secondary { border:1px solid var(--line); }
.button.primary { background:#292929; color:#fff; }
.content-column { min-width:0; }
.block { padding:12px 4px 34px; margin-bottom:28px; border-bottom:1px solid var(--line); }
.block:last-child { margin-bottom:0; border-bottom:0; }
.section-label { display:inline-flex; padding:5px 11px; margin-bottom:24px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:#555; font-size:.68rem; font-weight:600; }
.about-block p { margin:0 0 18px; max-width:680px; color:var(--muted); font-size:.92rem; text-align:justify; text-justify:inter-word; }
.about-block .lead { color:var(--ink); font-size:1.12rem; }
.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chips span { padding:9px 14px; background:var(--card); border:1px solid var(--line); border-radius:9px; box-shadow:0 4px 14px rgba(0,0,0,.03); color:#565656; font-size:.78rem; }
.skill-groups { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.skill-group { padding:16px; background:rgba(255,255,255,.58); border:1px solid var(--line); border-radius:12px; }
.skill-group.wide { grid-column:1/-1; }
.skill-heading { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.skill-heading .row-icon { width:36px; height:36px; }
.skill-heading h2 { margin:0; font-size:.88rem; }
.skill-group .chips { gap:7px; }
.skill-group .chips span { padding:6px 10px; box-shadow:none; font-size:.7rem; }
.neutral { background:#ececea; color:#62625f; }
.accordion-list { display:grid; gap:10px; }
.resume-row { background:var(--card); border:1px solid var(--line); border-radius:11px; box-shadow:0 4px 16px rgba(0,0,0,.035); overflow:hidden; }
.resume-row summary { min-height:68px; padding:10px 14px; display:grid; grid-template-columns:48px 1fr auto 20px; gap:12px; align-items:center; cursor:pointer; list-style:none; }
.resume-row summary::-webkit-details-marker { display:none; }
.row-icon { direction:ltr; width:44px; height:44px; display:grid; place-items:center; border-radius:9px; font-size:.66rem; font-weight:700; }
.purple { background:#eae2ff; color:#6c46bd; }.blue { background:#dcecff; color:#3470ae; }.green { background:#dcf4e6; color:#278557; }.amber { background:#fff0cd; color:#9b721e; }
.row-main { display:flex; flex-direction:column; min-width:0; }
.row-main strong { font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-main small { color:var(--muted); font-size:.7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.resume-row time { color:var(--muted); font-size:.7rem; white-space:nowrap; }
.resume-row i { font-style:normal; transition:transform .18s ease; }
.resume-row[open] i { transform:rotate(180deg); }
.row-details { padding:0 74px 16px 20px; color:var(--muted); font-size:.78rem; text-align:justify; text-justify:inter-word; }
.project-row summary { grid-template-columns:48px 1fr auto 20px; }
.project-tech { direction:ltr; color:var(--muted); font-size:.66rem; white-space:nowrap; }
.education-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
.course-list .resume-row summary { grid-template-columns:14px 1fr 20px; min-height:62px; }
.course-list .row-details { padding-right:42px; }
.course-dot { width:8px; height:8px; border-radius:50%; background:#8faaa4; box-shadow:0 0 0 4px #e6eeec; }
.credential-list { max-width:100%; }
.credential-list .resume-row summary { grid-template-columns:48px 1fr 20px; }
.project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.project-grid article { min-height:220px; padding:17px; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:12px; }
.project-grid article>span { direction:ltr; margin-left:auto; color:var(--muted); font-size:.65rem; }
.project-grid h2 { margin:28px 0 10px; font-size:1rem; line-height:1.55; }
.project-grid p { margin:0; color:var(--muted); font-size:.74rem; }
.project-grid footer { margin-top:auto; padding-top:20px; color:var(--muted); font-size:.66rem; }
.two-column-block { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.plain-list { display:grid; gap:10px; }
.plain-list article { padding:13px 14px; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:10px; }
.plain-list time { color:var(--muted); font-size:.64rem; }
.plain-list strong { margin:5px 0 2px; font-size:.8rem; }
.plain-list small { color:var(--muted); font-size:.68rem; }
.plain-list.compact article { min-height:72px; justify-content:center; }
@media (max-width:820px) { body{padding:22px 12px}.resume-frame{grid-template-columns:1fr;padding:18px;border-radius:18px}.profile-column{position:static;grid-template-columns:1fr 1fr}.profile-card{display:grid;grid-template-columns:160px 1fr;gap:12px}.profile-photo{height:100%}.contact-card{align-content:center}.skill-groups{grid-template-columns:1fr}.skill-group.wide{grid-column:auto}.project-grid{grid-template-columns:1fr}.project-grid article{min-height:170px} }
@media (max-width:560px) { .resume-frame{padding:12px}.profile-column,.profile-card,.two-column-block,.education-list{grid-template-columns:1fr}.profile-photo{height:auto}.block{padding-inline:2px}.resume-row summary,.project-row summary{grid-template-columns:42px 1fr 18px}.resume-row time,.project-tech{grid-column:2;grid-row:2}.resume-row i{grid-column:3;grid-row:1/3}.row-details{padding-right:66px}.project-row .row-main strong,.course-list .row-main strong{white-space:normal;line-height:1.6}.course-list .resume-row summary{grid-template-columns:14px 1fr 18px}.course-list .row-details{padding-right:42px} }