/* ════════════════════════════════════════════════
   TOKENS
════════════════════════════════════════════════ */
    :root {
      --white: #FFFFFF;
      --off: #F8FAFC;
      --paper: #FFFFFF;
      --black: #0F172A;
      --navy: #0052CC;
      --navy2: #003D99;
      --navy3: #4C84FF;
      --blue: #0052CC;
      --blue-light: #E8F0FE;
      --red: #CC3366;
      --red2: #E11D48;
      --red3: rgba(204, 51, 102, .07);
      --green: #00C896;
      --amber: #F59E0B;
      --g1: #E2E8F0;
      --g2: #CBD5E1;
      --g3: #94A3B8;
      --g4: #64748B;
      --text: #0F172A;
      --muted: #64748B;
      --sh: 0 4px 24px rgba(0, 82, 204, 0.08);
      --sh2: 0 12px 48px rgba(0, 82, 204, 0.14);
      --sh3: 0 20px 60px rgba(0, 82, 204, 0.18);
      --r: 12px;
      --r2: 16px;
    }

    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      font-size: 15px;
    }

    body {
      background: var(--off);
      color: var(--text);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 400;
      line-height: 1.6;
      min-height: 100vh;
      margin: 0;
      -webkit-font-smoothing: antialiased;
    }

    button {
      font-family: inherit;
      cursor: pointer;
    }

    a {
      text-decoration: none;
    }

    textarea,
    input,
    select {
      font-family: inherit;
    }

    /* ════════════════════════════════════════════════
TOPBAR
════════════════════════════════════════════════ */
    .topbar {
      background: var(--off);
      border-bottom: 1px solid var(--g1);
      position: sticky;
      top: 0;
      z-index: 200;
      height: 58px;
      display: flex;
      align-items: center;
      gap: 0;
      padding: 0 28px;
      box-shadow: 0 1px 0 var(--g1), var(--sh);
    }

    .logo {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 20px;
      font-weight: 800;
      color: var(--blue);
      letter-spacing: -.02em;
      margin-right: 32px;
      flex-shrink: 0;
    }

    .logo em {
      color: var(--red);
      font-style: normal;
    }

    .top-nav {
      display: flex;
      gap: 2px;
      flex: 1;
    }

    .tnav {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      border-radius: 6px;
      border: none;
      background: none;
      font-size: 13px;
      font-weight: 500;
      color: var(--g4);
      transition: all .15s;
      white-space: nowrap;
    }

    .tnav:hover {
      background: var(--off);
      color: var(--navy);
    }

    .tnav.on {
      color: var(--navy);
      font-weight: 600;
      background: var(--off);
    }

    .tnav-icon {
      font-size: 15px;
    }

    .topbar-right {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    .share-btn {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 8px 18px;
      border: none;
      border-radius: 8px;
      background: var(--blue);
      color: #fff;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .02em;
      transition: background .15s, transform .1s;
    }

    .share-btn:hover {
      background: var(--red2);
      transform: translateY(-1px);
    }

    .share-btn:active {
      transform: translateY(0);
    }

    .user-pill {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 12px 4px 4px;
      border: 1px solid var(--g1);
      border-radius: 24px;
      background: var(--off);
      cursor: pointer;
      transition: border-color .15s;
    }

    .user-pill:hover {
      border-color: var(--g2);
    }

    .up-av {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--navy);
      display: grid;
      place-items: center;
      font-family: 'Playfair Display', serif;
      font-size: 13px;
      font-weight: 900;
      color: #fff;
      overflow: hidden;
    }

    .up-av img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .up-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--navy);
    }

    /* ════════════════════════════════════════════════
PAGE LAYOUT
════════════════════════════════════════════════ */
    .page {
      max-width: 1060px;
      margin: 0 auto;
      padding: 20px 16px 60px;
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: 20px;
      align-items: start;
    }

    /* ════════════════════════════════════════════════
SIDEBAR — PERFIL
════════════════════════════════════════════════ */
    .side-l {
      position: sticky;
      top: 74px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .profile-card {
      background: var(--white);
      border: 1px solid var(--g1);
      border-radius: var(--r2);
      overflow: hidden;
      box-shadow: var(--sh);
    }

    .pc-banner {
      height: 78px;
      background: linear-gradient(130deg, var(--navy) 0%, var(--navy2) 55%, var(--red) 130%);
      position: relative;
    }

    .pc-banner-pattern {
      position: absolute;
      inset: 0;
      background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0, rgba(255, 255, 255, .03) 1px,
          transparent 0, transparent 50%);
      background-size: 12px 12px;
    }

    .pc-av-wrap {
      position: absolute;
      bottom: -26px;
      left: 18px;
    }

    .pc-av {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 3px solid var(--white);
      background: var(--navy);
      display: grid;
      place-items: center;
      font-family: 'Playfair Display', serif;
      font-size: 20px;
      font-weight: 900;
      color: #fff;
      overflow: hidden;
    }

    .pc-av img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .pc-body {
      padding: 36px 18px 18px;
    }

    .pc-name {
      font-family: 'Playfair Display', serif;
      font-size: 17px;
      font-weight: 800;
      color: var(--navy);
      margin-bottom: 2px;
    }

    .pc-role {
      font-size: 13px;
      color: var(--g4);
      line-height: 1.4;
      margin-bottom: 10px;
    }

    .avail {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(16, 185, 129, .08);
      border: 1px solid rgba(16, 185, 129, .2);
      color: #059669;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 3px 9px;
      border-radius: 20px;
      margin-bottom: 14px;
    }

    .avail-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #10b981;
      animation: blink 2s ease-in-out infinite;
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .3
      }
    }

    .pc-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      padding: 12px 0;
      border-top: 1px solid var(--g1);
      border-bottom: 1px solid var(--g1);
      margin-bottom: 14px;
    }

    .pcs {
      text-align: center;
    }

    .pcs-n {
      display: block;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 22px;
      font-weight: 800;
      color: var(--navy);
    }

    .pcs-l {
      font-size: 11px;
      color: var(--g3);
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .pc-links {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .pc-link {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 13px;
      color: var(--g4);
      transition: color .15s;
    }

    .pc-link:hover {
      color: var(--navy);
    }

    .pc-link svg {
      flex-shrink: 0;
    }

    .pc-edit {
      display: block;
      width: 100%;
      margin-top: 14px;
      padding: 8px;
      border: 1px solid var(--g1);
      border-radius: 6px;
      background: none;
      font-size: 13px;
      font-weight: 500;
      color: var(--navy);
      transition: background .15s, border-color .15s;
    }

    .pc-edit:hover {
      background: var(--off);
      border-color: var(--g2);
    }

    /* Skills card */
    .scard {
      background: var(--white);
      border: 1px solid var(--g1);
      border-radius: var(--r2);
      padding: 18px;
      box-shadow: var(--sh);
    }

    .scard-hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--g4);
    }

    .scard-add {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1px solid var(--g2);
      background: none;
      color: var(--navy);
      font-size: 16px;
      line-height: 1;
      display: grid;
      place-items: center;
      transition: background .15s, border-color .15s, transform .15s;
    }

    .scard-add:hover {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy);
      transform: rotate(90deg);
    }

    .skill-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .sk-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 9px;
      border-radius: 4px;
      background: var(--off);
      border: 1px solid var(--g1);
      font-size: 11px;
      font-weight: 500;
      color: var(--navy);
      cursor: pointer;
      transition: all .15s;
    }

    .sk-pill:hover {
      background: var(--red3);
      border-color: rgba(196, 16, 43, .2);
    }

    .sk-dots {
      display: flex;
      gap: 2px;
    }

    .sk-d {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--g2);
    }

    .sk-d.on {
      background: var(--navy2);
    }

    /* Completeness */
    .prog-pct {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 26px;
      font-weight: 800;
      color: var(--navy);
    }

    .prog-bar {
      height: 5px;
      background: var(--g1);
      border-radius: 3px;
      margin: 8px 0;
      overflow: hidden;
    }

    .prog-fill {
      height: 100%;
      border-radius: 3px;
      background: linear-gradient(90deg, var(--navy) 0%, var(--red) 100%);
      transition: width .7s cubic-bezier(.22, 1, .36, 1);
    }

    .prog-msg {
      font-size: 12px;
      color: var(--g4);
      line-height: 1.55;
      margin-bottom: 12px;
    }

    .prog-items {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .pi {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--g4);
    }

    .pi-ic {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      flex-shrink: 0;
      display: grid;
      place-items: center;
      font-size: 8px;
    }

    .pi-ic.yes {
      background: rgba(16, 185, 129, .12);
      color: #059669;
    }

    .pi-ic.no {
      background: var(--g1);
      color: var(--g3);
    }

    .pi.done span {
      text-decoration: line-through;
      opacity: .45;
    }

    /* ════════════════════════════════════════════════
MAIN
════════════════════════════════════════════════ */
    .main {
      min-width: 0;
    }

    /* Hero banner */
    .hero {
      border-radius: var(--r2);
      overflow: hidden;
      background: var(--navy);
      padding: 28px 32px;
      margin-bottom: 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      position: relative;
    }

    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 80% at 100% 50%, rgba(196, 16, 43, .25) 0%, transparent 60%),
        repeating-linear-gradient(-55deg, rgba(255, 255, 255, .018) 0, rgba(255, 255, 255, .018) 1px,
          transparent 0, transparent 30px);
      pointer-events: none;
    }

    .hero-txt {
      position: relative;
      z-index: 1;
    }

    .hero-eyebrow {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      color: rgba(255, 255, 255, .45);
      letter-spacing: .2em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .hero-h {
      font-family: 'Playfair Display', serif;
      font-size: 26px;
      font-weight: 900;
      color: #fff;
      line-height: 1.15;
      margin-bottom: 6px;
    }

    .hero-sub {
      font-size: 13px;
      color: rgba(255, 255, 255, .6);
      max-width: 380px;
    }

    .hero-cta {
      position: relative;
      z-index: 1;
      display: flex;
      gap: 10px;
      flex-shrink: 0;
    }

    .btn-wh {
      padding: 10px 22px;
      border: none;
      border-radius: 6px;
      background: #fff;
      color: var(--navy);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      transition: background .15s, transform .1s;
    }

    .btn-wh:hover {
      background: var(--off);
      transform: translateY(-1px);
    }

    .btn-ghost {
      padding: 10px 20px;
      border: 1px solid rgba(255, 255, 255, .25);
      border-radius: 6px;
      background: transparent;
      color: #fff;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      transition: border-color .15s, background .15s;
    }

    .btn-ghost:hover {
      border-color: rgba(255, 255, 255, .55);
      background: rgba(255, 255, 255, .06);
    }

    /* Tabs */
    .tabs {
      display: flex;
      gap: 3px;
      background: var(--white);
      border: 1px solid var(--g1);
      border-radius: 8px;
      padding: 4px;
      margin-bottom: 22px;
      box-shadow: var(--sh);
      overflow-x: auto;
    }

    .tabs::-webkit-scrollbar {
      display: none;
    }

    .tab {
      flex: 0 0 auto;
      padding: 8px 16px;
      border: none;
      border-radius: 5px;
      background: none;
      font-size: 13px;
      font-weight: 500;
      color: var(--g4);
      transition: all .15s;
      white-space: nowrap;
    }

    .tab:hover {
      color: var(--navy);
      background: var(--off);
    }

    .tab.on {
      background: var(--navy);
      color: #fff;
      font-weight: 600;
    }

    /* ────── FEED ────── */
    .composer {
      background: var(--white);
      border: 1px solid var(--g1);
      border-radius: var(--r2);
      padding: 16px;
      margin-bottom: 14px;
      box-shadow: var(--sh);
    }

    .comp-row {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }

    .comp-av {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      flex-shrink: 0;
      background: var(--navy);
      display: grid;
      place-items: center;
      font-family: 'Playfair Display', serif;
      font-size: 15px;
      font-weight: 900;
      color: #fff;
      overflow: hidden;
    }

    .comp-av img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .comp-ta {
      flex: 1;
      border: 1px solid var(--g1);
      border-radius: 8px;
      padding: 10px 13px;
      font-size: 14px;
      color: var(--text);
      background: var(--off);
      resize: none;
      outline: none;
      min-height: 42px;
      transition: border-color .15s, background .15s, min-height .2s;
    }

    .comp-ta:focus {
      border-color: var(--navy);
      background: var(--white);
      min-height: 80px;
    }

    .comp-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
    }

    .type-row {
      display: flex;
      gap: 5px;
    }

    .type-p {
      padding: 4px 10px;
      border-radius: 20px;
      border: 1px solid var(--g1);
      background: none;
      font-size: 11px;
      font-weight: 600;
      color: var(--g4);
      transition: all .15s;
    }

    .type-p:hover,
    .type-p.on {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy);
    }

    .pub-btn {
      padding: 8px 20px;
      border: none;
      border-radius: 6px;
      background: var(--navy);
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      transition: background .15s;
    }

    .pub-btn:hover {
      background: var(--navy2);
    }

    .feed-card {
      background: var(--white);
      border: 1px solid var(--g1);
      border-radius: var(--r2);
      padding: 18px 20px;
      margin-bottom: 12px;
      box-shadow: var(--sh);
      animation: up .35s cubic-bezier(.22, 1, .36, 1) both;
    }

    @keyframes up {
      from {
        opacity: 0;
        transform: translateY(14px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .fc-author {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 13px;
    }

    .fc-av {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      flex-shrink: 0;
      display: grid;
      place-items: center;
      font-family: 'Playfair Display', serif;
      font-size: 14px;
      font-weight: 900;
      color: #fff;
    }

    .fc-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--navy);
    }

    .fc-meta {
      font-size: 11px;
      color: var(--g3);
    }

    .fc-badge {
      margin-left: auto;
      padding: 2px 8px;
      border-radius: 3px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .b-up {
      background: rgba(12, 26, 58, .07);
      color: var(--navy);
    }

    .b-win {
      background: rgba(196, 16, 43, .07);
      color: var(--red);
    }

    .b-q {
      background: rgba(217, 119, 6, .09);
      color: #92400e;
    }

    .fc-txt {
      font-size: 14px;
      color: var(--text);
      line-height: 1.65;
      margin-bottom: 13px;
    }

    .fc-acts {
      display: flex;
      gap: 14px;
      padding-top: 11px;
      border-top: 1px solid var(--g1);
    }

    .fc-act {
      display: flex;
      align-items: center;
      gap: 5px;
      background: none;
      border: none;
      font-size: 12px;
      font-weight: 500;
      color: var(--g4);
      padding: 4px 0;
      transition: color .15s;
    }

    .fc-act:hover {
      color: var(--navy);
    }

    .fc-act.liked {
      color: var(--red);
    }

    /* ────── BLOG ────── */
    .sec-hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .sec-title {
      font-family: 'Playfair Display', serif;
      font-size: 22px;
      font-weight: 900;
      color: var(--navy);
      letter-spacing: -.025em;
    }

    .sec-title em {
      color: var(--red);
      font-style: normal;
    }

    .btn-red {
      padding: 8px 18px;
      border: none;
      border-radius: 6px;
      background: var(--red);
      color: #fff;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      transition: background .15s, transform .1s;
    }

    .btn-red:hover {
      background: var(--red2);
      transform: translateY(-1px);
    }

    .blog-g {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .bc {
      background: var(--white);
      border: 1px solid var(--g1);
      border-radius: var(--r2);
      overflow: hidden;
      box-shadow: var(--sh);
      cursor: pointer;
      transition: transform .2s, box-shadow .2s;
      animation: up .4s ease both;
    }

    .bc:hover {
      transform: translateY(-3px);
      box-shadow: var(--sh2);
    }

    .bc-img {
      height: 128px;
      overflow: hidden;
      position: relative;
      background: var(--navy);
    }

    .bc-img-inner {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      font-size: 42px;
      background: linear-gradient(130deg, var(--navy) 0%, var(--navy2) 50%, #1a116a 100%);
    }

    .bc-body {
      padding: 14px;
    }

    .bc-tags {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
      margin-bottom: 7px;
    }

    .bc-tag {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--red);
      background: var(--red3);
      padding: 2px 7px;
      border-radius: 2px;
    }

    .bc-title {
      font-family: 'Playfair Display', serif;
      font-size: 15px;
      font-weight: 800;
      color: var(--navy);
      line-height: 1.25;
      margin-bottom: 8px;
    }

    .bc-meta {
      font-size: 11px;
      color: var(--g3);
      display: flex;
      gap: 10px;
      align-items: center;
    }

    /* ────── PODCAST ────── */
    .ep-list {
      display: flex;
      flex-direction: column;
      gap: 11px;
    }

    .ep {
      background: var(--white);
      border: 1px solid var(--g1);
      border-radius: var(--r2);
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 14px;
      box-shadow: var(--sh);
      cursor: pointer;
      transition: transform .15s, box-shadow .15s;
      animation: up .35s ease both;
    }

    .ep:hover {
      transform: translateY(-2px);
      box-shadow: var(--sh2);
    }

    .ep-cover {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      flex-shrink: 0;
      display: grid;
      place-items: center;
      font-size: 26px;
      overflow: hidden;
    }

    .ep-body {
      flex: 1;
      min-width: 0;
    }

    .ep-num {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      color: var(--g3);
      margin-bottom: 3px;
    }

    .ep-title {
      font-family: 'Playfair Display', serif;
      font-size: 15px;
      font-weight: 800;
      color: var(--navy);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 3px;
    }

    .ep-desc {
      font-size: 12px;
      color: var(--g4);
      line-height: 1.4;
    }

    .ep-meta {
      display: flex;
      gap: 10px;
      margin-top: 7px;
      font-size: 11px;
      color: var(--g3);
    }

    .ep-play {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      flex-shrink: 0;
      background: var(--navy);
      color: #fff;
      border: none;
      display: grid;
      place-items: center;
      font-size: 13px;
      transition: background .15s, transform .1s;
    }

    .ep-play:hover {
      background: var(--red);
      transform: scale(1.1);
    }

    /* ────── TRAININGS ────── */
    .tr-g {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .trc {
      background: var(--white);
      border: 1px solid var(--g1);
      border-radius: var(--r2);
      overflow: hidden;
      box-shadow: var(--sh);
      cursor: pointer;
      transition: transform .2s, box-shadow .2s;
      animation: up .4s ease both;
    }

    .trc:hover {
      transform: translateY(-3px);
      box-shadow: var(--sh2);
    }

    .trc-top {
      height: 96px;
      position: relative;
      display: grid;
      place-items: center;
      font-size: 36px;
      background: linear-gradient(130deg, var(--navy) 0%, var(--red) 140%);
    }

    .trc-top img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .trc-lv {
      position: absolute;
      top: 8px;
      right: 8px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      font-weight: 500;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 3px 7px;
      border-radius: 2px;
    }

    .lv-b {
      background: rgba(16, 185, 129, .18);
      color: #065f46;
    }

    .lv-i {
      background: rgba(217, 119, 6, .18);
      color: #92400e;
    }

    .lv-a {
      background: rgba(196, 16, 43, .18);
      color: var(--red);
    }

    .trc-body {
      padding: 13px;
    }

    .trc-cat {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 5px;
    }

    .trc-title {
      font-family: 'Playfair Display', serif;
      font-size: 14px;
      font-weight: 800;
      color: var(--navy);
      line-height: 1.25;
      margin-bottom: 8px;
    }

    .trc-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      color: var(--g3);
      margin-bottom: 10px;
    }

    .trc-price {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 18px;
      font-weight: 800;
      color: var(--navy);
    }

    .trc-price.free {
      color: #059669;
    }

    .enroll {
      display: block;
      width: 100%;
      padding: 9px;
      background: var(--navy);
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      transition: background .15s;
    }

    .enroll:hover {
      background: var(--navy2);
    }

    .enroll.done {
      background: rgba(16, 185, 129, .1);
      color: #059669;
    }

    /* ────── PROFILE EDIT ────── */
    .pf-form {
      background: var(--white);
      border: 1px solid var(--g1);
      border-radius: var(--r2);
      padding: 28px;
      box-shadow: var(--sh);
    }

    .fl {
      margin-bottom: 14px;
    }

    .fl label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--g4);
      margin-bottom: 5px;
    }

    .fi,
    .ft,
    .fs {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid var(--g1);
      border-radius: 6px;
      font-size: 14px;
      color: var(--text);
      background: var(--white);
      outline: none;
      transition: border-color .15s, box-shadow .15s;
    }

    .fi:focus,
    .ft:focus,
    .fs:focus {
      border-color: var(--navy);
      box-shadow: 0 0 0 3px rgba(12, 26, 58, .07);
    }

    .ft {
      resize: vertical;
      min-height: 96px;
    }

    .f2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .fcheck {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--g4);
      cursor: pointer;
      margin-top: 4px;
    }

    .fcheck input {
      width: 15px;
      height: 15px;
      accent-color: var(--navy);
      cursor: pointer;
    }

    .f-acts {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      margin-top: 20px;
    }

    .btn-nav {
      padding: 9px 22px;
      border: none;
      border-radius: 6px;
      background: var(--navy);
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      transition: background .15s;
    }

    .btn-nav:hover {
      background: var(--navy2);
    }

    .btn-sec {
      padding: 9px 18px;
      border: 1px solid var(--g1);
      border-radius: 6px;
      background: none;
      font-size: 13px;
      font-weight: 500;
      color: var(--g4);
      transition: background .15s, border-color .15s;
    }

    .btn-sec:hover {
      background: var(--off);
      border-color: var(--g2);
    }

    /* inline form */
    .ifrm {
      background: var(--off);
      border: 1px solid var(--g1);
      border-radius: var(--r);
      padding: 20px;
      margin-bottom: 18px;
      display: none;
    }

    .ifrm.open {
      display: block;
      animation: up .3s ease both;
    }

    /* empty */
    .empty {
      text-align: center;
      padding: 48px 20px;
      color: var(--g3);
      grid-column: 1/-1;
    }

    .empty-i {
      font-size: 44px;
      margin-bottom: 12px;
    }

    .empty-t {
      font-size: 14px;
      line-height: 1.6;
    }

    /* ════════════════════════════════════════════════
SIDEBAR RIGHT
════════════════════════════════════════════════ */
    .side-r {
      position: sticky;
      top: 74px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .widget {
      background: var(--white);
      border: 1px solid var(--g1);
      border-radius: var(--r2);
      padding: 18px;
      box-shadow: var(--sh);
    }

    .wt {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--g4);
      margin-bottom: 14px;
    }

    .tag-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .tc {
      font-size: 13px;
      font-weight: 500;
      padding: 4px 9px;
      border: 1px solid var(--g1);
      border-radius: 4px;
      color: var(--navy);
      cursor: pointer;
      transition: all .15s;
    }

    .tc:hover {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy);
    }

    .job-item {
      padding: 9px 10px;
      border: 1px solid var(--g1);
      border-radius: 6px;
      margin-bottom: 8px;
      transition: border-color .15s, background .15s;
      cursor: pointer;
    }

    .job-item:hover {
      border-color: var(--g2);
      background: var(--off);
    }

    .job-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--navy);
      margin-bottom: 2px;
    }

    .job-meta {
      font-size: 12px;
      color: var(--g4);
    }

    .job-sal {
      font-size: 12px;
      color: var(--red);
      font-weight: 600;
    }

    .res-link {
      display: block;
      font-size: 14px;
      color: var(--navy);
      padding: 7px 0;
      border-bottom: 1px solid var(--g1);
      transition: color .15s, padding-left .15s;
    }

    .res-link:hover {
      color: var(--red);
      padding-left: 4px;
    }

    .res-link:last-child {
      border-bottom: none;
    }

    /* ════════════════════════════════════════════════
MODAL COMPARTILHAR
════════════════════════════════════════════════ */
    .overlay {
      position: fixed;
      inset: 0;
      z-index: 500;
      background: rgba(8, 8, 10, .55);
      backdrop-filter: blur(5px);
      display: none;
      place-items: center;
    }

    .overlay.open {
      display: grid;
    }

    .modal {
      background: var(--white);
      border-radius: 16px;
      padding: 36px;
      max-width: 460px;
      width: 92%;
      box-shadow: var(--sh3);
      animation: up .35s cubic-bezier(.22, 1, .36, 1) both;
    }

    .modal-icon {
      font-size: 52px;
      text-align: center;
      margin-bottom: 14px;
    }

    .modal-h {
      font-family: 'Playfair Display', serif;
      font-size: 24px;
      font-weight: 900;
      color: var(--navy);
      text-align: center;
      margin-bottom: 6px;
    }

    .modal-sub {
      font-size: 13px;
      color: var(--g4);
      text-align: center;
      line-height: 1.65;
      margin-bottom: 24px;
    }

    .url-box {
      display: flex;
      gap: 8px;
      align-items: center;
      background: var(--off);
      border: 1px solid var(--g1);
      border-radius: 8px;
      padding: 10px 14px;
      margin-bottom: 18px;
    }

    .url-txt {
      flex: 1;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      color: var(--navy);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .copy-b {
      padding: 5px 13px;
      background: var(--navy);
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 700;
      flex-shrink: 0;
      transition: background .15s;
    }

    .copy-b:hover {
      background: var(--red);
    }

    .soc-row {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-bottom: 18px;
    }

    .soc {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 9px 16px;
      border: none;
      border-radius: 7px;
      font-size: 13px;
      font-weight: 600;
      transition: transform .1s;
    }

    .soc:hover {
      transform: translateY(-2px);
    }

    .soc-li {
      background: #0A66C2;
      color: #fff;
    }

    .soc-wa {
      background: #25D366;
      color: #fff;
    }

    .soc-x {
      background: #000;
      color: #fff;
    }

    .modal-cl {
      display: block;
      width: 100%;
      padding: 10px;
      background: none;
      border: 1px solid var(--g1);
      border-radius: 7px;
      font-size: 13px;
      color: var(--g4);
      transition: background .15s;
    }

    .modal-cl:hover {
      background: var(--off);
    }

    /* ════════════════════════════════════════════════
SKILL FORM INLINE
════════════════════════════════════════════════ */
    .sk-ifrm {
      margin-bottom: 12px;
      display: none;
      animation: up .2s ease both;
    }

    .sk-ifrm.open {
      display: block;
    }

    /* ════════════════════════════════════════════════
TOAST
════════════════════════════════════════════════ */
    .toast {
      position: fixed;
      bottom: 24px;
      right: 24px;
      padding: 12px 20px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #fff;
      background: var(--navy);
      box-shadow: var(--sh2);
      transform: translateY(80px);
      opacity: 0;
      transition: all .3s cubic-bezier(.22, 1, .36, 1);
      z-index: 999;
    }

    .toast.show {
      transform: translateY(0);
      opacity: 1;
    }

    .toast.ok {
      background: #059669;
    }

    /* ════════════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════════════ */
    @media(max-width:800px) {
      .page {
        grid-template-columns: 1fr;
        padding: 14px;
      }

      .side-l {
        position: static;
      }

      .blog-g,
      .tr-g {
        grid-template-columns: 1fr;
      }

      .top-nav {
        display: none;
      }

      .f2 {
        grid-template-columns: 1fr;
      }
    }