:root{
    --bg:#faf7f0;
    --bg-alt:#f1ece0;
    --ink:#15171c;
    --ink-soft:#52565f;
    --ink-faint:#94978f;
    --line:rgba(21,23,28,0.16);
    --white:#ffffff;
    --blue:#3355ff;
    --blue-deep:#1f3fd1;
    --blue-tint:#e8ecff;
    --green:#1f9d55;
    --green-tint:#e3f7ea;
    --amber:#ffb020;
    --amber-tint:#fff3dc;
    --pink:#ff5d8f;
    --pink-tint:#ffe6ee;
    --red:#d93c2b;
    --red-tint:#fbe4e1;
    --r-lg:20px;
    --r-md:14px;
    --r-sm:10px;
    --font-head:"Space Grotesk", "Inter", sans-serif;
    --font-body:"Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }

  body{
    font-family:var(--font-body);
    color:var(--ink);
    background-color:var(--bg);
    background-image:radial-gradient(var(--line) 1px, transparent 1px);
    background-size:22px 22px;
    min-height:100vh;
    font-size:16px;
    line-height:1.5;
  }

  .topbar{ position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:2px solid var(--ink); }
  .topbar-inner{
    max-width:1360px; margin:0 auto; padding:14px 32px;
    display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  }
  .brand{ display:flex; align-items:center; gap:11px; }
  .brand-glyph{
    width:38px; height:38px; border-radius:10px; flex-shrink:0;
    border:2px solid var(--ink); background:var(--blue); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-head); font-weight:700; font-size:0.85rem;
    box-shadow:3px 3px 0 var(--ink);
  }
  .brand-word{ font-family:var(--font-head); font-weight:700; font-size:1.1rem; line-height:1.1; }
  .brand-word small{ display:block; font-family:var(--font-body); font-weight:600; font-size:0.7rem; color:var(--ink-faint); letter-spacing:0.4px; }

  .stepper{ display:flex; align-items:center; }
  .step-pill{ display:flex; align-items:center; gap:9px; }
  .step-pill .num{
    width:30px; height:30px; border-radius:50%; flex-shrink:0;
    border:2px solid var(--ink); background:var(--white); color:var(--ink-faint);
    font-family:var(--font-head); font-weight:700; font-size:0.82rem;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.25s ease;
  }
  .step-pill .label{ font-size:0.82rem; font-weight:600; color:var(--ink-faint); display:none; white-space:nowrap; }
  .step-pill.active .num{ background:var(--blue); border-color:var(--ink); color:#fff; }
  .step-pill.active .label{ color:var(--ink); }
  .step-pill.done .num{ background:var(--green); border-color:var(--ink); color:#fff; }
  .step-connector{ width:22px; height:2px; background:var(--line); margin:0 8px; flex-shrink:0; }
  @media (min-width:920px){ .step-pill .label{ display:inline; } }
  @media (max-width:640px){ .brand-word{ display:none; } .step-connector{ width:12px; } }

  .main-layout{
    max-width:1360px; margin:0 auto; padding:0 32px;
    display:grid; grid-template-columns:minmax(0, 1fr) 380px; gap:44px; align-items:start;
  }
  @media (max-width:1200px){ .main-layout{ grid-template-columns:1fr; gap:0; } }

  .hero{ padding:44px 0 32px; max-width:720px; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:0.76rem; font-weight:700; letter-spacing:0.8px; text-transform:uppercase;
    color:var(--blue-deep); margin-bottom:14px;
    background:var(--blue-tint); border:2px solid var(--ink);
    padding:5px 13px; border-radius:999px;
  }
  .hero h1{
    font-family:var(--font-head); font-weight:700; letter-spacing:-0.01em;
    font-size:clamp(2rem, 3.2vw, 2.7rem); line-height:1.15; color:var(--ink);
  }
  .hero h1 .hl{ background-image:linear-gradient(180deg, transparent 58%, var(--amber) 58%); padding:0 3px; }
  .hero-sub{ color:var(--ink-soft); font-size:1.05rem; margin-top:14px; line-height:1.6; }

  .step-panel{ padding:40px 0 56px; border-top:2px solid var(--ink); }
  .step-panel:first-of-type{ border-top:none; padding-top:0; }

  .step-grid{ display:grid; grid-template-columns:0.75fr 1.25fr; gap:48px; align-items:start; }
  .step-grid.full{ grid-template-columns:1fr; }
  @media (max-width:860px){ .step-grid{ grid-template-columns:1fr; gap:28px; } }

  .step-aside{ max-width:320px; }
  .num-badge{
    width:54px; height:54px; border-radius:16px; border:2px solid var(--ink);
    background:var(--white); display:flex; align-items:center; justify-content:center;
    font-family:var(--font-head); font-weight:700; font-size:1.35rem;
    box-shadow:4px 4px 0 var(--ink); margin-bottom:18px;
  }
  .step-aside h2{
    font-family:var(--font-head); font-size:1.45rem; font-weight:700; margin-bottom:10px;
    display:flex; align-items:center; gap:8px;
  }
  .step-aside p{ color:var(--ink-soft); font-size:0.98rem; line-height:1.65; }
  .step-shapes{ display:flex; gap:10px; margin-top:22px; }
  .shape{ border:2px solid var(--ink); }
  .shape.circle{ width:36px; height:36px; border-radius:50%; background:var(--amber); }
  .shape.square{ width:32px; height:32px; border-radius:8px; background:var(--pink); transform:rotate(8deg); }
  .shape.tri{ width:0; height:0; border-left:18px solid transparent; border-right:18px solid transparent; border-bottom:32px solid var(--green); border-top:none; }

  .step-main{ min-width:0; }

  label{ display:block; margin-bottom:7px; color:var(--ink); font-size:0.88rem; font-weight:600; }
  input, select{
    width:100%; padding:14px 16px; border-radius:12px;
    border:2px solid var(--ink); background:var(--white); color:var(--ink);
    font-family:var(--font-body); font-size:1rem; margin-bottom:22px;
    outline:none; transition:box-shadow 0.15s ease, transform 0.15s ease;
  }
  input::placeholder{ color:var(--ink-faint); }
  input:focus, select:focus{ box-shadow:4px 4px 0 var(--blue); transform:translate(-2px,-2px); border-color:var(--blue); }
  select{ cursor:pointer; }

  .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  @media (max-width:600px){ .grid-2{ grid-template-columns:1fr; } }

  button{
    font-family:var(--font-head); font-weight:700; font-size:0.98rem;
    padding:15px 30px; border-radius:14px; border:2px solid var(--ink);
    background:var(--blue); color:#fff; cursor:pointer;
    box-shadow:4px 4px 0 var(--ink);
    transition:transform 0.12s ease, box-shadow 0.12s ease;
    width:auto; display:inline-flex; align-items:center; gap:8px;
  }
  button:hover:not(:disabled){ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
  button:active:not(:disabled){ transform:translate(0,0); box-shadow:2px 2px 0 var(--ink); }
  button:disabled{ opacity:0.45; cursor:not-allowed; box-shadow:none; }
  @media (max-width:600px){ button{ width:100%; justify-content:center; } }

  #btn-back, #btn-reset{ background:var(--white) !important; color:var(--ink) !important; }

  .prof-list-container{ display:flex; gap:10px; overflow-x:auto; padding:6px 4px 14px 2px; margin-bottom:22px; }
  .prof-list-container::-webkit-scrollbar{ height:6px; }
  .prof-list-container::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }
  .prof-chip{
    flex:0 0 auto; border:2px solid var(--ink); border-radius:999px;
    padding:9px 16px; font-size:0.88rem; font-weight:600; color:var(--ink);
    background:var(--white); cursor:pointer; white-space:nowrap;
    box-shadow:3px 3px 0 var(--ink);
    transition:transform 0.12s ease, box-shadow 0.12s ease;
  }
  .prof-chip:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
  .prof-chip:nth-child(4n+1){ background:var(--blue-tint); }
  .prof-chip:nth-child(4n+2){ background:var(--amber-tint); }
  .prof-chip:nth-child(4n+3){ background:var(--green-tint); }
  .prof-chip:nth-child(4n){ background:var(--pink-tint); }

  .maturi-list{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
  .maturi-tag{
    background:var(--blue); color:#fff; border:2px solid var(--ink);
    padding:9px 18px; border-radius:999px; font-size:0.92rem; font-weight:700;
    box-shadow:3px 3px 0 var(--ink);
  }

  .hidden{ display:none !important; }

  .loading{ display:flex; align-items:center; gap:16px; padding:22px 0; color:var(--ink-soft); font-size:1rem; }
  .spinner{
    width:34px; height:34px; flex-shrink:0; border-radius:50%;
    border:3px solid var(--line); border-top-color:var(--blue); border-right-color:var(--amber);
    animation:spin 0.85s linear infinite;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  .error{
    color:#8f2318; margin-top:14px; font-size:0.92rem; white-space:pre-wrap; word-break:break-word;
    background:var(--red-tint); border:2px solid var(--red); border-radius:var(--r-md);
    padding:13px 18px;
  }
  .retry-btn{
    background:var(--white); color:#8f2318; border:2px solid var(--red);
    padding:12px 22px; margin-top:14px; border-radius:14px; font-weight:700;
    cursor:pointer; font-size:0.9rem; width:auto; display:inline-block;
    box-shadow:3px 3px 0 var(--red); font-family:var(--font-head);
    transition:transform 0.12s ease, box-shadow 0.12s ease;
  }
  .retry-btn:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--red); }

  .info-box{
    background:var(--blue-tint); border:2px solid var(--ink); border-left-width:6px;
    padding:14px 20px; border-radius:var(--r-md); font-size:0.95rem; color:var(--ink-soft);
    margin-bottom:26px; line-height:1.6;
  }
  .info-box strong{ color:var(--ink); }
  .info-box.ai-box{ background:var(--pink-tint); }

  .progress-text{ color:var(--ink-faint); font-size:0.88rem; }

  .accordion{ position:relative; margin-top:10px; max-width:760px; }
  .accordion-item{ position:relative; padding-left:62px; padding-bottom:26px; opacity:0; transform:translateY(-6px); transition:opacity 0.35s ease, transform 0.35s ease; }
  .accordion-item.revealed{ opacity:1; transform:translateY(0); }
  .accordion-item::before{ content:""; position:absolute; left:22px; top:48px; bottom:0; width:2px; background:var(--line); }
  .accordion-item:last-child::before{ display:none; }
  .accordion-item:last-child{ padding-bottom:0; }
  .accordion-header{ display:flex; align-items:center; gap:16px; cursor:pointer; user-select:none; font-weight:700; font-family:var(--font-head); }
  .accordion-icon{
    width:46px; height:46px; border-radius:14px; flex-shrink:0; position:absolute; left:0; top:0;
    display:flex; align-items:center; justify-content:center; font-size:1.15rem;
    background:var(--white); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink);
    transition:all 0.2s ease;
  }
  .accordion-item.open .accordion-icon{ background:var(--amber); }
  .accordion-title{ flex:1; font-size:1.1rem; color:var(--ink); }
  .accordion-subtitle{ font-size:0.82rem; color:var(--ink-faint); font-weight:500; margin-top:3px; font-family:var(--font-body); }
  .accordion-arrow{ color:var(--ink-faint); font-size:0.9rem; transition:transform 0.25s ease; }
  .accordion-item.open .accordion-arrow{ transform:rotate(180deg); }
  .accordion-body{ max-height:0; overflow:hidden; transition:max-height 0.4s ease, padding 0.3s ease; }
  .accordion-item.open .accordion-body{ max-height:2000px; padding-top:14px; }
  .accordion-body-content{
    color:var(--ink-soft); font-size:0.98rem; line-height:1.7;
    background:var(--white); border:2px solid var(--ink); border-radius:var(--r-md);
    padding:18px 22px;
  }
  .accordion-body-content ul{ padding-left:22px; }
  .accordion-body-content li{ margin-bottom:9px; }
  .accordion-body-content li::marker{ color:var(--blue); font-weight:700; }
  .accordion-body-content strong{ color:var(--ink); }

  .uni-topline{ color:var(--ink-soft); font-size:0.94rem; margin-bottom:6px; }
  .uni-hint{ color:var(--ink-faint); font-size:0.85rem; margin:8px 0 18px; }

  .table-scroll{ margin-top:4px; }
  .univ-table{ width:100%; border-collapse:separate; border-spacing:0 14px; }
  .univ-table thead{ display:none; }
  .univ-table tbody{ display:block; counter-reset:uni; }

  .univ-row{
    display:grid; grid-template-columns:1.9fr 0.6fr 0.5fr 1.2fr;
    align-items:center; column-gap:20px;
    position:relative; border:2px solid var(--ink); border-radius:16px;
    background:var(--white); padding:24px 74px 24px 74px;
    box-shadow:4px 4px 0 rgba(21,23,28,0.14);
    cursor:pointer; transition:transform 0.12s ease, box-shadow 0.12s ease, opacity 0.4s ease;
    opacity:0;
    font-size:0.98rem;
  }
  .univ-row.revealed{ opacity:1; }
  .univ-row:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 rgba(21,23,28,0.18); }
  .univ-row.expanded{ background:var(--blue-tint); }
  .univ-row::before{
    counter-increment:uni; content:counter(uni, decimal-leading-zero);
    position:absolute; left:-2px; top:-2px; width:54px; height:54px;
    border-radius:14px 0 14px 0; border:2px solid var(--ink); background:var(--amber);
    color:var(--ink); font-family:var(--font-head); font-weight:700; font-size:1.1rem;
    display:flex; align-items:center; justify-content:center;
  }
  .univ-row > td{ display:block; padding:0; border:none; }
  .univ-table .needed{ color:var(--blue-deep); font-weight:800; font-size:1.2rem; font-family:var(--font-head); }
  .univ-table .mat-tag{
    display:inline-block; background:var(--green-tint); color:#146338;
    padding:5px 12px; border-radius:7px; font-size:0.82rem; margin:3px 5px 3px 0; font-weight:700;
    border:1.5px solid rgba(20,99,56,0.35);
  }
  .expand-hint{ color:var(--ink-faint); font-size:0.78rem; margin-top:6px; display:block; font-weight:500; }

  .source-dot{
    position:absolute; right:16px; top:50%; transform:translateY(-50%);
    width:34px; height:34px; border-radius:50%; border:2px solid var(--ink);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-head); font-size:0.95rem; font-weight:800;
    text-decoration:none; z-index:3;
    transition:transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow:2px 2px 0 var(--ink); line-height:1;
  }
  .source-dot.db{ background:var(--green-tint); color:#146338; cursor:pointer; }
  .source-dot.db:hover{ transform:translateY(-50%) scale(1.12) translate(-2px, -2px); box-shadow:4px 4px 0 var(--ink); }
  .source-dot.ai{ background:var(--amber-tint); color:#8a5a00; cursor:default; }

  .univ-detail-row{ display:block; }
  .univ-detail-row > td{ display:block; padding:0; border:none; }
  .univ-detail-inner{
    max-height:0; overflow:hidden; transition:max-height 0.35s ease, margin 0.3s ease;
    background:var(--white); border:2px solid var(--ink); border-top:none;
    border-radius:0 0 16px 16px; margin-top:-14px; padding:0 22px;
  }
  .univ-row.expanded + .univ-detail-row .univ-detail-inner{ max-height:1200px; padding:20px 22px 22px; margin-top:-14px; }
  .univ-detail-inner p{ margin-bottom:10px; font-size:0.95rem; color:var(--ink-soft); line-height:1.6; }
  .univ-detail-inner .detail-label{ color:var(--blue-deep); font-weight:700; display:inline-block; min-width:160px; vertical-align:top; }
  .univ-detail-inner .detail-value{ color:var(--ink); }
  .univ-detail-inner .career-tag{
    display:inline-block; background:var(--blue-tint); color:var(--blue-deep);
    padding:5px 12px; border-radius:7px; font-size:0.85rem; margin:3px 5px 3px 0;
    font-weight:600; border:1.5px solid rgba(31,63,209,0.25);
  }
  .univ-detail-inner .fit-box{
    background:var(--green-tint); border-left:4px solid var(--green);
    padding:14px 18px; border-radius:8px; margin-top:12px;
    font-size:0.95rem; color:#146338; line-height:1.6;
  }
  .univ-detail-inner .fit-box strong{ color:#0d4a28; }
  .univ-detail-inner .formula-box{
    background:var(--bg-alt); border-radius:var(--r-sm); padding:14px 18px; margin-top:12px;
    font-family:"SFMono-Regular","Courier New",monospace; font-size:0.88rem; color:var(--ink);
    border:2px solid var(--ink); line-height:1.65;
  }
  .univ-detail-inner .formula-box .formula-source-tag{
    display:inline-block; font-family:var(--font-body); font-size:0.72rem;
    font-weight:700; padding:2px 8px; border-radius:999px;
    margin-left:8px; vertical-align:middle; border:1.5px solid var(--ink);
  }
  .univ-detail-inner .formula-box .formula-source-tag.db{ background:var(--green-tint); color:#146338; }
  .univ-detail-inner .formula-box .formula-source-tag.ai{ background:var(--amber-tint); color:#8a5a00; }
  .row-new{ animation:fadeIn 0.4s ease-out; }
  @keyframes fadeIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }

  .badge-search, .badge-no-search{
    display:inline-block; padding:5px 14px; border-radius:999px; font-size:0.78rem; font-weight:700;
    margin-left:8px; border:2px solid var(--ink);
  }
  .badge-search{ background:var(--green-tint); color:#146338; }
  .badge-no-search{ background:var(--amber-tint); color:#8a5a00; }

  .disclaimer{
    background:var(--amber-tint); border:2px solid var(--ink); border-left-width:6px;
    padding:14px 20px; border-radius:var(--r-md); font-size:0.9rem; color:#6b4a00; margin-top:24px; line-height:1.6;
  }

  footer{ text-align:center; color:var(--ink-faint); font-size:0.85rem; padding:44px 0 34px; }

  .chat-panel{
    position:sticky; top:96px;
    display:flex; flex-direction:column;
    background:var(--white);
    border:2px solid var(--ink); border-radius:var(--r-lg);
    box-shadow:5px 5px 0 var(--ink); overflow:hidden;
    max-height:calc(100vh - 130px); min-height:520px;
  }
  @media (max-width:1200px){
    .chat-panel{ position:static; max-height:600px; min-height:480px; margin:8px 0 40px; }
  }
  .chat-header{
    padding:14px 18px; border-bottom:2px solid var(--ink);
    background:var(--amber-tint);
    display:flex; align-items:center; gap:11px; flex-shrink:0;
  }
  .chat-header .dot{
    width:11px; height:11px; border-radius:50%;
    background:var(--ink-faint); flex-shrink:0; transition:background 0.3s;
  }
  .chat-header .dot.active{ background:var(--green); box-shadow:0 0 0 4px var(--green-tint); }
  .chat-header h3{ font-family:var(--font-head); font-size:1.05rem; font-weight:700; flex:1; line-height:1.15; }
  .chat-header small{ display:block; font-family:var(--font-body); font-size:0.75rem; color:var(--ink-faint); font-weight:500; margin-top:3px; }
  .chat-messages{
    flex:1; overflow-y:auto; padding:16px 16px 8px;
    display:flex; flex-direction:column; gap:12px; background:var(--bg);
  }
  .chat-messages::-webkit-scrollbar{ width:6px; }
  .chat-messages::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }

  .chat-msg{
    padding:11px 15px; border-radius:14px;
    font-size:0.94rem; line-height:1.6;
    max-width:88%; word-wrap:break-word; white-space:pre-wrap;
  }
  .chat-msg.user{
    background:var(--blue); color:#fff; align-self:flex-end;
    border:2px solid var(--ink); border-bottom-right-radius:4px;
    box-shadow:3px 3px 0 var(--ink);
  }
  .chat-msg.ai{
    background:var(--white); color:var(--ink); align-self:flex-start;
    border:2px solid var(--ink); border-bottom-left-radius:4px;
    box-shadow:3px 3px 0 var(--ink);
  }
  .chat-msg.system{
    background:transparent; color:var(--ink-faint);
    font-style:italic; font-size:0.85rem;
    text-align:center; align-self:center;
    max-width:100%; padding:8px 14px; border:none; box-shadow:none;
  }
  .chat-msg.typing::after{
    content:"▋"; display:inline-block;
    animation:blink 0.9s steps(2,start) infinite;
    margin-left:2px; color:var(--blue);
  }
  @keyframes blink{ 50%{ opacity:0; } }

  .chat-input-row{
    border-top:2px solid var(--ink); padding:12px;
    display:flex; gap:8px; flex-shrink:0; background:var(--white);
  }
  .chat-input-row input{
    margin:0; flex:1; padding:12px 16px; font-size:0.95rem; border-radius:12px;
  }
  .chat-input-row input:focus{ transform:none; box-shadow:3px 3px 0 var(--blue); }
  .chat-input-row button{
    padding:12px 18px; font-size:0.95rem;
    box-shadow:3px 3px 0 var(--ink); border-radius:12px;
  }
  .chat-input-row button:hover:not(:disabled){
    transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink);
  }

  @media (max-width:640px){
    .topbar-inner{ padding:12px 20px; }
    .main-layout{ padding:0 20px; }
    .hero{ padding:32px 0 24px; }
    .univ-row{ grid-template-columns:1fr; row-gap:6px; padding:20px 60px 20px 66px; }
    .univ-row::before{ width:48px; height:48px; font-size:0.95rem; }
    .univ-row > td:nth-child(2)::before{ content:"Мин. бал: "; color:var(--ink-faint); font-weight:600; }
    .univ-row > td:nth-child(3)::before{ content:"Година: "; color:var(--ink-faint); font-weight:600; }
    .source-dot{ right:10px; width:28px; height:28px; font-size:0.75rem; }
    .univ-detail-inner{ margin-top:-6px !important; }
    .accordion-item{ padding-left:56px; }
    .accordion-icon{ width:42px; height:42px; font-size:1.05rem; }
    .accordion-item::before{ left:20px; }
  }
  /* ============================================================
   USER AUTH — dropdown, login, register
   ============================================================ */

.user-auth{ display:flex; align-items:center; }

.user-menu{ position:relative; }
.user-menu-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px;
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:999px;
  color:var(--ink);
  font-weight:700;
  font-size:0.9rem;
  cursor:pointer;
  font-family:inherit;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform 0.12s ease, box-shadow 0.12s ease;
}
.user-menu-btn:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
.user-caret{ font-size:0.7rem; transition:transform 0.2s ease; }
.user-menu.is-open .user-caret{ transform:rotate(180deg); }

.user-menu-panel{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:240px;
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:var(--r-md);
  box-shadow:5px 5px 0 var(--ink);
  padding:8px;
  display:none;
  z-index:1000;
}
.user-menu.is-open .user-menu-panel{ display:block; }
.user-menu-header{
  padding:12px 14px 10px;
  border-bottom:2px solid var(--line);
  margin-bottom:6px;
}
.user-menu-header .name{
  display:block; font-weight:700; font-size:0.95rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.user-menu-header .email{
  display:block; font-size:0.78rem; color:var(--ink-faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-top:2px;
}
.user-menu-header .role{
  display:inline-block; margin-top:8px;
  padding:2px 10px; border-radius:999px;
  font-size:0.68rem; font-weight:700; letter-spacing:0.4px;
  text-transform:uppercase;
  border:1.5px solid var(--ink);
}
.user-menu-header .role.admin{ background:var(--pink-tint); color:#8a1e4a; }
.user-menu-header .role.user{ background:var(--green-tint); color:#146338; }
.user-menu-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  color:var(--ink);
  border-radius:8px;
  font-size:0.9rem; font-weight:500;
  text-decoration:none;
  white-space:nowrap;
  transition:background 0.12s ease;
}
.user-menu-item:hover{ background:var(--blue-tint); text-decoration:none; }
.user-menu-item i{ width:16px; text-align:center; color:var(--ink-soft); }
.user-menu-item.danger{ color:var(--red); }
.user-menu-item.danger i{ color:var(--red); }
.user-menu-item.danger:hover{ background:var(--red-tint); }
.user-menu-sep{ height:2px; background:var(--line); margin:6px 4px; }

/* Guest buttons */
.guest-actions{ display:inline-flex; gap:10px; }
.guest-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px;
  border:2px solid var(--ink);
  border-radius:999px;
  font-weight:700; font-size:0.88rem;
  text-decoration:none;
  color:var(--ink);
  background:var(--white);
  font-family:inherit;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform 0.12s ease, box-shadow 0.12s ease;
}
.guest-btn:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); text-decoration:none; }
.guest-btn.primary{ background:var(--blue); color:#fff; }
.guest-btn.primary:hover{ background:var(--blue-deep); }

/* Auth pages (login, register, profile) */
.auth-wrap{
  max-width:520px;
  margin:0 auto;
  padding:44px 24px 60px;
}
.auth-card{
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:var(--r-lg);
  box-shadow:6px 6px 0 var(--ink);
  padding:36px 32px;
}
.auth-title{
  font-family:var(--font-head);
  font-size:1.8rem;
  font-weight:700;
  margin-bottom:12px;
  display:flex; align-items:center; gap:10px;
}
.auth-sub{
  color:var(--ink-soft);
  font-size:0.98rem;
  margin-bottom:24px;
  line-height:1.6;
}
.auth-label{
  display:block;
  margin-bottom:7px;
  font-size:0.88rem;
  font-weight:600;
  color:var(--ink);
}
.auth-input{
  width:100%;
  padding:14px 16px;
  border:2px solid var(--ink);
  border-radius:12px;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;
  outline:none;
  margin-bottom:20px;
  transition:box-shadow 0.15s ease, transform 0.15s ease;
}
.auth-input:focus{
  border-color:var(--blue);
  box-shadow:4px 4px 0 var(--blue);
  transform:translate(-2px,-2px);
}
.auth-btn{
  width:100%;
  padding:14px 24px;
  border:2px solid var(--ink);
  border-radius:14px;
  background:var(--blue);
  color:#fff;
  font-family:var(--font-head);
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform 0.12s ease, box-shadow 0.12s ease;
}
.auth-btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.auth-btn:active{ transform:translate(0,0); box-shadow:2px 2px 0 var(--ink); }

.auth-msg{
  padding:14px 18px;
  border:2px solid var(--ink);
  border-radius:var(--r-md);
  margin-bottom:20px;
  font-size:0.94rem;
  line-height:1.5;
}
.auth-msg.error{ background:var(--red-tint); color:#8f2318; border-color:var(--red); }
.auth-msg.success{ background:var(--green-tint); color:#146338; border-color:var(--green); }

.auth-foot{
  text-align:center;
  margin-top:20px;
  font-size:0.92rem;
  color:var(--ink-soft);
}

/* Profile page */
.profile-layout{
  max-width:900px;
  margin:0 auto;
  padding:44px 24px 60px;
  display:grid;
  grid-template-columns:280px 1fr;
  gap:28px;
  align-items:start;
}
@media (max-width:800px){ .profile-layout{ grid-template-columns:1fr; } }

.profile-avatar-card{
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:var(--r-lg);
  box-shadow:5px 5px 0 var(--ink);
  padding:32px 24px;
  text-align:center;
}
.profile-avatar{
  width:96px; height:96px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue), var(--pink));
  border:3px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-family:var(--font-head);
  font-size:2.4rem;
  font-weight:700;
  margin:0 auto 18px;
  box-shadow:4px 4px 0 var(--ink);
}
.profile-avatar-card h2{
  font-family:var(--font-head);
  font-size:1.3rem;
  margin-bottom:6px;
  word-break:break-word;
}
.profile-avatar-card .email-small{
  color:var(--ink-faint);
  font-size:0.85rem;
  word-break:break-word;
}
.profile-role-badge{
  display:inline-block;
  margin-top:16px;
  padding:6px 16px;
  border-radius:999px;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.4px;
  text-transform:uppercase;
  border:2px solid var(--ink);
}
.profile-role-badge.admin{ background:var(--pink-tint); color:#8a1e4a; }
.profile-role-badge.user{ background:var(--green-tint); color:#146338; }

.profile-info-card{
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:var(--r-lg);
  box-shadow:5px 5px 0 var(--ink);
  padding:32px;
}
.profile-info-card h3{
  font-family:var(--font-head);
  font-size:1.2rem;
  margin-bottom:20px;
  padding-bottom:14px;
  border-bottom:2px solid var(--line);
}
.info-row{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  align-items:center;
}
.info-row:last-of-type{ border-bottom:none; }
.info-row .label{
  color:var(--ink-soft);
  font-size:0.88rem;
  font-weight:600;
  display:flex; align-items:center; gap:8px;
}
.info-row .label i{ color:var(--blue-deep); }
.info-row .value{
  color:var(--ink);
  font-weight:600;
  font-size:0.98rem;
  word-break:break-word;
}

/* Topbar adjustments for the user menu */
.topbar-inner{ align-items:center; }
.user-auth{ margin-left:auto; }

@media (max-width:768px){
  .topbar-inner{ justify-content:space-between; }
  .stepper{ order:3; width:100%; justify-content:center; margin-top:12px; }
  .user-auth{ order:2; }
}