@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Manrope:wght@400;500;600;700&display=swap');

  :root{
    --ink:#101418;
    --paper:#eef0ec;
    --moss:#37493f;
    --moss-light:#4f6656;
    --clay:#c46a4a;
    --clay-light:#e08a63;
    --line: rgba(238,240,236,0.14);
    --line-strong: rgba(238,240,236,0.28);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%; max-width:100%; overflow-x:hidden;}
  body{
    font-family:'Manrope', sans-serif;
    background: var(--ink);
    color: var(--paper);
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow-x:hidden;
    position:relative;
  }

  /* ambient backdrop */
  body::before{
    content:"";
    position:fixed; inset:0;
    background:
      radial-gradient(ellipse 800px 500px at 15% 10%, rgba(196,106,74,0.16), transparent 60%),
      radial-gradient(ellipse 700px 600px at 85% 90%, rgba(79,102,86,0.28), transparent 60%);
    pointer-events:none;
    z-index:0;
  }
  .grain{
    position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .stage{
    position:relative; z-index:2;
    width:100%; max-width:960px;
    margin:32px;
    display:grid;
    grid-template-columns: 1.05fr 1fr;
    background: rgba(16,20,24,0.6);
    border:1px solid var(--line);
    border-radius:22px;
    overflow:hidden;
    backdrop-filter: blur(20px);
    box-shadow: 0 40px 100px -30px rgba(0,0,0,0.6);
  }

  /* left panel — editorial / signature element */
  .panel{
    position:relative;
    padding:56px 48px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background: linear-gradient(160deg, var(--moss) 0%, #26332b 55%, #171f1a 100%);
    border-right:1px solid var(--line);
  }
  .panel .mark{
    display:flex; align-items:center; gap:10px;
    font-family:'Fraunces', serif;
    font-weight:600; font-size:20px; letter-spacing:0.01em;
  }
  .panel .mark.center-mark{
    justify-content:center;
  }
  .mark .dot{
    width:10px; height:10px; border-radius:50%;
    background: var(--clay-light);
    box-shadow: 0 0 0 4px rgba(224,138,99,0.18);
  }
  .panel-center{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .panel .quote{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size: clamp(28px, 3.4vw, 38px);
    line-height:1.18;
    letter-spacing:-0.01em;
    max-width: 380px;
  }
  .panel .quote.center{
    margin-left:auto; margin-right:auto;
  }
  .panel .quote em{
    font-style:italic; color: var(--clay-light);
  }
  .uni-logo-wrap{
    display:inline-block;
    background: rgba(238,240,236,0.96);
    border-radius:20px;
    padding:22px 30px;
    margin-bottom:30px;
    box-shadow: 0 20px 50px -18px rgba(0,0,0,0.5);
  }
  .uni-logo{
    height:44px;
    width:auto;
    max-width:200px;
    object-fit:contain;
    display:block;
  }
  .uni-logo.big{
    height:110px;
    max-width:280px;
  }
  .panel .quote-sub{
    font-family:'Manrope', sans-serif;
    font-size:14px;
    line-height:1.5;
    color: rgba(238,240,236,0.5);
    max-width:340px;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--line);
  }
  .panel .quote-sub.center{
    margin-left:auto; margin-right:auto;
  }
  .ring-deco{
    position:absolute; right:-60px; bottom:-60px;
    width:220px; height:220px; border-radius:50%;
    border:1px solid var(--line-strong);
  }
  .ring-deco::after{
    content:""; position:absolute; inset:26px; border-radius:50%; border:1px solid var(--line);
  }

  /* right panel — forms */
  .forms{
    padding:52px 48px;
    display:flex; flex-direction:column;
    justify-content:center;
    position:relative;
  }
  .tabs{
    display:flex; gap:4px;
    background: rgba(238,240,236,0.05);
    border:1px solid var(--line);
    border-radius:999px;
    padding:4px;
    margin-bottom:34px;
    width:max-content;
  }
  .tab{
    border:none; background:transparent; color: rgba(238,240,236,0.55);
    font-family:'Manrope', sans-serif; font-weight:600; font-size:13.5px;
    padding:9px 22px; border-radius:999px; cursor:pointer;
    transition: color .25s ease;
    letter-spacing:0.01em;
  }
  .tab.active{ color:#111; background: var(--paper); }

  h1.title{
    font-family:'Fraunces', serif; font-weight:600;
    font-size:28px; margin-bottom:6px; letter-spacing:-0.01em;
  }
  .sub{
    color: rgba(238,240,236,0.5); font-size:14px; margin-bottom:30px;
  }

  .field{ margin-bottom:16px; position:relative; }
  .field label{
    display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:0.09em;
    color: rgba(238,240,236,0.45); margin-bottom:7px; font-weight:600;
  }
  .field input{
    width:100%;
    background: rgba(238,240,236,0.04);
    border:1px solid var(--line);
    color: var(--paper);
    font-family:'Manrope', sans-serif; font-size:14.5px;
    padding:13px 14px;
    border-radius:10px;
    outline:none;
    transition: border-color .2s ease, background .2s ease;
  }
  .field input::placeholder{ color: rgba(238,240,236,0.28); }
  .field input:focus{
    border-color: var(--clay-light);
    background: rgba(238,240,236,0.07);
  }
  .field input:focus-visible{
    outline: 2px solid var(--clay-light);
    outline-offset: 2px;
  }
  .hint{ font-size:12px; color: rgba(238,240,236,0.4); margin-top:6px; min-height:16px; }
  .hint.err{ color: #e8a186; }
  .hint.ok{ color: #9fc3ab; }

  .btn{
    width:100%;
    border:none; cursor:pointer;
    background: var(--clay);
    color:#fff;
    font-family:'Manrope', sans-serif; font-weight:700; font-size:14.5px;
    padding:14px; border-radius:10px;
    margin-top:8px;
    letter-spacing:0.01em;
    transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  }
  .btn:hover{ background: var(--clay-light); box-shadow: 0 12px 28px -10px rgba(196,106,74,0.55); }
  .btn:active{ transform: translateY(1px); }
  .btn:focus-visible{ outline:2px solid var(--paper); outline-offset:2px; }

  .switch-line{
    text-align:center; font-size:13px; color: rgba(238,240,236,0.45); margin-top:22px;
  }
  .switch-line a{ color: var(--clay-light); text-decoration:none; font-weight:600; cursor:pointer; }
  .switch-line a:hover{ text-decoration:underline; }

  .view{ display:none; animation: rise .5s cubic-bezier(.2,.7,.2,1); }
  .view.active{ display:block; }
  @keyframes rise{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none; } }

  /* Dashboard */
  .dash{
    display:none;
    height:100vh; width:100%;
    position:relative; z-index:2;
    flex-direction:column;
    overflow:hidden;
  }
  .dash.active{ display:flex; }
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 40px;
    border-bottom:1px solid var(--line);
    position:sticky; top:0; z-index:30;
    background: var(--ink);
    backdrop-filter: blur(16px);
  }
  .topbar .mark{
    display:flex; align-items:center; gap:10px;
    font-family:'Fraunces', serif; font-weight:600; font-size:19px;
  }
  .topbar .mark .dot{
    width:9px; height:9px; border-radius:50%; background:var(--clay-light);
    box-shadow: 0 0 0 4px rgba(224,138,99,0.18);
  }
  .logout-btn{
    border:1px solid var(--line-strong);
    background: rgba(238,240,236,0.04);
    color: var(--paper);
    font-family:'Manrope', sans-serif; font-weight:600; font-size:13px;
    padding:10px 20px; border-radius:999px; cursor:pointer;
    display:flex; align-items:center; gap:8px;
    transition: background .2s ease, border-color .2s ease;
  }
  .logout-btn:hover{ background: rgba(196,106,74,0.15); border-color: var(--clay-light); }
  .logout-btn:focus-visible{ outline:2px solid var(--clay-light); outline-offset:2px; }

  .topbar .navgroup{
    display:flex; align-items:center; gap:6px;
  }
  .nav-btn{
    display:flex; flex-direction:column; align-items:center; gap:5px;
    border:1px solid transparent;
    background:transparent;
    color: rgba(238,240,236,0.55);
    font-family:'Manrope', sans-serif; font-weight:600; font-size:11px;
    letter-spacing:0.01em;
    padding:8px 16px;
    border-radius:12px;
    cursor:pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  .nav-btn .ic{
    width:18px; height:18px;
    display:flex; align-items:center; justify-content:center;
  }
  .nav-btn .ic svg{ width:100%; height:100%; }
  .nav-btn:hover{ color: var(--paper); background: rgba(238,240,236,0.05); }
  .nav-btn.active{
    color: var(--paper);
    background: rgba(196,106,74,0.14);
    border-color: rgba(196,106,74,0.35);
  }
  .nav-btn.active .ic{ color: var(--clay-light); }
  .nav-btn:focus-visible{ outline:2px solid var(--clay-light); outline-offset:2px; }

  .admin-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:18px;
    max-width:640px;
    width:100%;
    margin-top:34px;
  }
  .admin-card{
    border:1px solid var(--line);
    background: rgba(238,240,236,0.03);
    border-radius:16px;
    padding:26px 22px;
    text-align:left;
    cursor:pointer;
    color: var(--paper);
    font-family:'Manrope', sans-serif;
    transition: border-color .2s ease, background .2s ease, transform .15s ease;
  }
  .admin-card:hover{
    border-color: var(--clay-light);
    background: rgba(196,106,74,0.08);
    transform: translateY(-2px);
  }
  .admin-card:focus-visible{ outline:2px solid var(--clay-light); outline-offset:2px; }
  .admin-card .num{
    font-family:'Fraunces', serif; font-size:13px; color: var(--clay-light);
    margin-bottom:10px; letter-spacing:0.02em;
  }
  .admin-card .label{
    font-family:'Fraunces', serif; font-weight:500; font-size:19px;
    margin-bottom:6px;
  }
  .admin-card .desc{
    font-size:12.5px; color: rgba(238,240,236,0.45); line-height:1.4;
  }

  @media (max-width: 780px){
    .admin-grid{ grid-template-columns:1fr; }
  }

  .dash-body{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:40px;
    overflow:hidden;
    width:100%;
  }
  .dash-body .eyebrow{
    font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color: rgba(238,240,236,0.4);
    margin-bottom:14px;
  }
  .dash-body h2{
    font-family:'Fraunces', serif; font-weight:500; font-size: clamp(24px, 6vw, 40px);
    max-width:560px; line-height:1.2; margin-bottom:12px;
  }
  .dash-body h2 em{ font-style:italic; color: var(--clay-light); }
  .dash-body p{ color: rgba(238,240,236,0.5); font-size:14.5px; max-width:420px; }
  .ring-deco2{
    position:absolute; left:-80px; top:120px;
    width:260px; height:260px; border-radius:50%;
    border:1px solid var(--line);
    pointer-events:none;
  }

  /* ============ RESPONSIVE ============ */

  .bottom-nav{ display:none; }

  @media (max-width: 780px){
    .stage{ grid-template-columns:1fr; margin:16px; max-width: calc(100% - 32px); }
    .panel{ display:none; }
    .forms{ padding:36px 24px; }
    .topbar{ padding:16px 18px; }
  }

  @media (max-width: 600px){
    body{ align-items:flex-start; }
    .stage{ margin:0; border-radius:0; border-left:none; border-right:none; min-height:100vh; }
    .forms{ padding:32px 20px 24px; }
    .tabs{ width:100%; }
    .tab{ flex:1; padding:9px 10px; }
    h1.title{ font-size:24px; }
    .field input{ font-size:16px; padding:12px 13px; }
    .btn{ padding:14px; font-size:14px; }

    /* topbar: keep brand + logout, hide inline nav (moves to bottom bar) */
    .topbar{ padding:14px 16px; }
    .topbar .mark{ font-size:17px; }
    .logout-btn{ padding:9px 14px; font-size:12.5px; }
    .topbar .navgroup{ display:none; }

    .dash-body{ padding:28px 20px 100px; }
    .ring-deco2{ width:180px; height:180px; left:-70px; top:80px; opacity:0.6; }

    .admin-grid{ margin-top:24px; gap:12px; }
    .admin-card{ padding:20px 18px; }
    .admin-card .label{ font-size:17px; }

    /* bottom tab bar for the 5 nav items */
    .bottom-nav{
      display:flex;
      position:fixed; left:0; right:0; bottom:0; z-index:20;
      background: var(--ink);
      backdrop-filter: blur(16px);
      border-top:1px solid var(--line);
      padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
    }
    .bottom-nav .nav-btn{
      flex:1; padding:6px 4px; font-size:10px; border-radius:10px;
    }
    .bottom-nav .nav-btn .ic{ width:19px; height:19px; }
  }

  @media (max-width: 380px){
    .splash-tag{ font-size:12px; padding:0 12px; }
    .admin-card .desc{ display:none; }
  }

  /* MODALS */
  .modal-overlay{
    display:none;
    position:fixed; inset:0; z-index:60;
    background: rgba(8,10,12,0.72);
    backdrop-filter: blur(6px);
    align-items:center; justify-content:center;
    padding:24px;
  }
  .modal-overlay.active{ display:flex; }
  .modal-box{
    width:100%; max-width:480px;
    max-height:88vh;
    background: #171d1a;
    border:1px solid var(--line-strong);
    border-radius:20px;
    display:flex; flex-direction:column;
    box-shadow: 0 40px 100px -30px rgba(0,0,0,0.7);
    animation: rise .35s cubic-bezier(.2,.7,.2,1);
  }
  .modal-box.wide{ max-width:640px; }
  .modal-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 24px 16px;
    border-bottom:1px solid var(--line);
  }
  .modal-head h3{
    font-family:'Fraunces', serif; font-weight:600; font-size:20px;
  }
  .modal-x{
    background:transparent; border:none; color: rgba(238,240,236,0.6);
    font-size:22px; line-height:1; cursor:pointer; padding:4px 8px; border-radius:8px;
  }
  .modal-x:hover{ color: var(--paper); background: rgba(238,240,236,0.06); }
  .modal-scroll{
    padding:22px 24px;
    overflow-y:auto;
  }
  .list-search-row{
    padding:16px 24px 0;
  }
  .list-search-row input{
    width:100%; background: rgba(238,240,236,0.05); border:1px solid var(--line);
    border-radius:10px; padding:11px 16px; color: var(--paper);
    font-family:'Manrope', sans-serif; font-size:14px;
  }
  .list-search-row input::placeholder{ color: rgba(238,240,236,0.35); }
  .list-search-row input:focus{ outline:none; border-color: var(--clay-light); background: rgba(238,240,236,0.08); }
  .modal-box form{ display:flex; flex-direction:column; min-height:0; }
  .modal-btn-row{
    display:flex; gap:10px;
    padding:16px 24px 22px;
    border-top:1px solid var(--line);
  }
  .modal-btn-row .btn{ margin-top:0; }
  .btn-ghost{
    background:transparent;
    border:1px solid var(--line-strong);
    color: #e8a186;
  }
  .btn-ghost:hover{ background: rgba(196,106,74,0.1); }

  .field-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .field-grid .span2{ grid-column: 1 / -1; }
  .field-grid select{
    width:100%;
    background: rgba(238,240,236,0.04);
    border:1px solid var(--line);
    color: var(--paper);
    font-family:'Manrope', sans-serif; font-size:14.5px;
    padding:13px 14px;
    border-radius:10px;
    outline:none;
  }

  .photo-picker{
    display:flex; justify-content:center;
    margin-bottom:22px;
  }
  .photo-circle{
    width:88px; height:88px; border-radius:50%;
    border:1.5px dashed var(--line-strong);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    overflow:hidden;
    background: rgba(238,240,236,0.03);
    text-align:center;
  }
  .photo-circle img{ width:100%; height:100%; object-fit:cover; }
  .photo-circle span{
    font-size:10.5px; color: rgba(238,240,236,0.4);
    font-family:'Manrope', sans-serif; font-weight:600;
    padding:0 8px;
  }

  .hr-list-item{
    display:flex; align-items:center; gap:14px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:14px;
    margin-bottom:10px;
    cursor:pointer;
    transition: border-color .2s ease, background .2s ease;
  }
  .hr-list-item:hover{ border-color: var(--clay-light); background: rgba(196,106,74,0.06); }
  .hr-list-avatar{
    width:44px; height:44px; border-radius:50%;
    background: var(--moss-light);
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif; font-weight:600; font-size:16px;
    overflow:hidden; flex-shrink:0;
  }
  .hr-list-avatar img{ width:100%; height:100%; object-fit:cover; }
  .hr-list-info{ flex:1; min-width:0; }
  .hr-list-info .n{ font-weight:700; font-size:14.5px; }
  .hr-list-info .m{ font-size:12.5px; color: rgba(238,240,236,0.45); }
  .hr-list-empty{
    text-align:center; padding:30px 10px; color: rgba(238,240,236,0.4); font-size:13.5px;
  }
  .hr-list-item.no-click{ cursor:default; }
  .hr-list-item.no-click:hover{ border-color: var(--line); background:transparent; }
  .list-edit-btn{
    flex-shrink:0; background:none; border:1px solid var(--line-strong); color: var(--paper);
    font-family:'Manrope', sans-serif; font-weight:600; font-size:12.5px; padding:8px 16px;
    border-radius:8px; cursor:pointer; margin-right:8px;
  }
  .list-edit-btn:hover{ background: rgba(238,240,236,0.06); border-color: var(--clay-light); }
  .list-delete-btn{
    flex-shrink:0; background:none; border:1px solid rgba(224,138,99,0.4); color:#e8a186;
    font-family:'Manrope', sans-serif; font-weight:600; font-size:12.5px; padding:8px 16px;
    border-radius:8px; cursor:pointer;
  }
  .list-delete-btn:hover{ background: rgba(224,138,99,0.1); }

  .profile-detail-list{ display:flex; flex-direction:column; gap:12px; }
  .profile-detail-list .row{
    display:flex; justify-content:space-between; gap:16px;
    padding:12px 0; border-bottom:1px solid var(--line);
    font-size:13.5px;
  }
  .profile-detail-list .row .k{ color: rgba(238,240,236,0.45); }
  .profile-detail-list .row .v{ font-weight:600; text-align:right; }

  /* HR dashboard topbar */
  .hr-topbar-right{
    display:flex; align-items:center; gap:12px;
  }
  .avatar-btn{
    width:38px; height:38px; border-radius:50%;
    border:1.5px solid var(--line-strong);
    background: var(--moss-light);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; overflow:hidden; padding:0;
    color: var(--paper); font-family:'Fraunces', serif; font-weight:600; font-size:14px;
  }
  .avatar-btn img{ width:100%; height:100%; object-fit:cover; }
  .avatar-btn:hover{ border-color: var(--clay-light); }
  .avatar-btn:focus-visible{ outline:2px solid var(--clay-light); outline-offset:2px; }

  @media (max-width: 600px){
    .field-grid{ grid-template-columns:1fr; }
    .modal-box{ max-height:92vh; }
  }

  /* SPLASH */
  #splash{
    position:fixed; inset:0; z-index:50;
    display:flex; align-items:center; justify-content:center;
    background: radial-gradient(ellipse 900px 700px at 50% 30%, #1a231d 0%, var(--ink) 65%);
    overflow:hidden;
  }
  #splash.hide{
    animation: splashOut .7s ease forwards;
    pointer-events:none;
  }
  @keyframes splashOut{
    to{ opacity:0; transform: scale(1.03); }
  }
  .splash-rings{
    position:absolute; width:640px; height:640px;
    max-width:90vw; max-height:90vw;
    border-radius:50%;
    border:1px solid var(--line);
    animation: ringGrow 2.4s cubic-bezier(.2,.7,.2,1) forwards;
    opacity:0;
  }
  .splash-rings.r2{ width:440px; height:440px; max-width:64vw; max-height:64vw; animation-delay:.12s; }
  .splash-rings.r3{ width:280px; height:280px; max-width:42vw; max-height:42vw; animation-delay:.24s; }
  @keyframes ringGrow{
    0%{ opacity:0; transform: scale(0.7); }
    40%{ opacity:1; }
    100%{ opacity:0.55; transform: scale(1); }
  }
  .splash-content{
    position:relative; z-index:2;
    text-align:center;
  }
  .splash-eyebrow{
    font-family:'Manrope', sans-serif; font-weight:600; font-size:12px;
    letter-spacing:0.28em; text-transform:uppercase;
    color: rgba(238,240,236,0.4);
    margin-bottom:18px;
    opacity:0;
    animation: fadeUp .7s ease forwards;
    animation-delay:.15s;
  }
  .splash-word{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size: clamp(38px, 7vw, 68px);
    letter-spacing:-0.01em;
    line-height:1;
    display:flex; justify-content:center; flex-wrap:wrap;
  }
  .splash-word span{
    display:inline-block;
    opacity:0;
    transform: translateY(22px);
    animation: fadeUp .65s cubic-bezier(.2,.7,.2,1) forwards;
  }
  .splash-word .accent{ color: var(--clay-light); font-style:italic; }
  @keyframes fadeUp{
    to{ opacity:1; transform:none; }
  }
  .splash-rule{
    width:0; height:1px; background: var(--clay-light);
    margin:26px auto 0;
    animation: ruleGrow .9s ease forwards;
    animation-delay:1.15s;
  }
  @keyframes ruleGrow{ to{ width:120px; } }
  .splash-tag{
    margin-top:18px;
    font-family:'Manrope', sans-serif; font-size:13.5px;
    color: rgba(238,240,236,0.42);
    opacity:0;
    animation: fadeUp .7s ease forwards;
    animation-delay:1.3s;
    letter-spacing:0.02em;
  }

  /* ============ JOB POSTS: shared ============ */
  .field textarea{
    width:100%;
    background: rgba(238,240,236,0.04);
    border:1px solid var(--line);
    color: var(--paper);
    font-family:'Manrope', sans-serif; font-size:14.5px;
    padding:13px 14px;
    border-radius:10px;
    outline:none;
    resize:vertical;
    min-height:100px;
    transition: border-color .2s ease, background .2s ease;
  }
  .field textarea::placeholder{ color: rgba(238,240,236,0.28); }
  .field textarea:focus{ border-color: var(--clay-light); background: rgba(238,240,236,0.07); }

  .dash-body.has-content{
    justify-content:flex-start;
    overflow-y:auto;
    padding-top:40px;
  }

  /* ---- HR: post form ---- */
  .post-form{ width:100%; max-width:480px; margin-top:26px; text-align:left; }
  .post-photo-upload{ margin-bottom:18px; }
  .post-photo-add-btn{
    display:inline-flex; align-items:center; gap:6px;
    border:1px dashed var(--line-strong);
    color: rgba(238,240,236,0.6);
    font-family:'Manrope', sans-serif; font-size:13px; font-weight:600;
    padding:10px 16px; border-radius:10px; cursor:pointer;
    transition: border-color .2s ease, color .2s ease;
  }
  .post-photo-add-btn:hover{ border-color: var(--clay-light); color: var(--paper); }
  .post-photo-previews{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
  .post-photo-thumb{ position:relative; width:72px; height:72px; border-radius:10px; overflow:hidden; }
  .post-photo-thumb img{ width:100%; height:100%; object-fit:cover; }
  .post-photo-remove{
    position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%;
    background: rgba(16,20,24,0.75); color:#fff; border:none; font-size:12px; line-height:1;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
  }

  .hr-own-posts{ width:100%; max-width:480px; margin-top:36px; text-align:left; }
  .hr-own-posts-title{
    font-size:11.5px; text-transform:uppercase; letter-spacing:0.09em;
    color: rgba(238,240,236,0.4); font-weight:700; margin-bottom:12px;
  }
  .hr-own-post-item{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 14px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px;
  }
  .hr-own-post-item .n{ font-weight:600; font-size:13.5px; }
  .hr-own-post-item .rm{
    background:none; border:none; color: rgba(238,240,236,0.4); cursor:pointer;
    font-size:12px; font-weight:600; font-family:'Manrope', sans-serif;
  }
  .hr-own-post-item .rm:hover{ color:#e8a186; }
  .hr-own-posts-empty{ font-size:13px; color: rgba(238,240,236,0.4); }

  /* ---- Student: posts feed ---- */
  .posts-feed{
    width:100%; max-width:620px; margin-top:28px; text-align:left;
    display:flex; flex-direction:column; gap:20px; padding-bottom:40px;
  }
  .posts-empty{ color: rgba(238,240,236,0.4); font-size:14px; text-align:center; margin-top:40px; }
  .post-card{
    border:1px solid var(--line); background: rgba(238,240,236,0.03);
    border-radius:16px; padding:20px 20px 22px;
  }
  .post-header{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
  .post-hr-avatar{
    width:42px; height:42px; border-radius:50%; overflow:hidden; flex-shrink:0;
    background: var(--moss); display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:14px; color: var(--paper);
  }
  .post-hr-avatar img{ width:100%; height:100%; object-fit:cover; }
  .post-hr-info .n{ font-weight:700; font-size:14.5px; }
  .post-hr-info .m{ font-size:12.5px; color: rgba(238,240,236,0.45); }
  .post-photos-wrap{
    display:flex; gap:8px; overflow-x:auto; margin-bottom:14px;
  }
  .post-photos-wrap .post-photo{
    height:280px; width:auto; max-width:100%; border-radius:12px; object-fit:contain;
    background:#000; flex-shrink:0;
  }
  .post-heading-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer;
  }
  .post-heading{
    font-family:'Fraunces', serif; font-weight:500; font-size:19px; line-height:1.3;
  }
  .post-caret{
    color: rgba(238,240,236,0.4); font-size:16px; transition: transform .2s ease; flex-shrink:0;
  }
  .post-card.expanded .post-caret{ transform: rotate(180deg); }
  .post-description{
    display:none; font-size:14px; color: rgba(238,240,236,0.6); line-height:1.55;
    white-space:pre-wrap; margin-top:10px;
  }
  .post-card.expanded .post-description{ display:block; }
  .post-apply-btn{ width:auto; padding:11px 24px; font-size:13.5px; margin-top:16px; }
  .post-apply-btn:disabled{ background: rgba(238,240,236,0.12); color: rgba(238,240,236,0.5); cursor:default; box-shadow:none; }
  .post-apply-btn:disabled:hover{ background: rgba(238,240,236,0.12); box-shadow:none; }

  /* ---- Social post (student) card additions ---- */
  .post-caption{ font-size:14.5px; line-height:1.55; color: rgba(238,240,236,0.85); white-space:pre-wrap; margin-bottom:12px; }
  .post-media-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:8px; margin-bottom:14px; }
  .post-media-grid img, .post-media-grid video{
    width:100%; height:280px; object-fit:contain; border-radius:12px; background:#000;
  }
  /* single photo/video posts get a taller, more natural frame */
  .post-media-grid:has(> :only-child) img,
  .post-media-grid:has(> :only-child) video{
    height:360px;
  }
  .post-card-badge{
    display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
    color: rgba(238,240,236,0.4); margin-bottom:2px;
  }
  .post-remove-btn{
    margin-top:14px; background:none; border:1px solid rgba(224,138,99,0.4); color:#e8a186;
    font-family:'Manrope', sans-serif; font-weight:600; font-size:12.5px; padding:8px 16px;
    border-radius:8px; cursor:pointer; width:auto;
  }
  .post-remove-btn:hover{ background: rgba(224,138,99,0.1); }

  /* ---- Floating create-post button ---- */
  .fab-create-post{
    position:fixed; right:28px; bottom:28px; width:56px; height:56px; border-radius:50%;
    background: var(--clay); color: var(--paper); border:none; cursor:pointer;
    font-size:28px; line-height:1; display:none; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(0,0,0,0.35); z-index:40; font-family:'Manrope', sans-serif;
    transition: transform .15s ease, background .2s ease;
  }
  .fab-create-post:hover{ background: var(--clay-light); transform: scale(1.05); }
  .fab-create-post.show{ display:flex; }
  @media (max-width:600px){
    .fab-create-post{ right:18px; bottom:90px; width:50px; height:50px; font-size:24px; }
  }

  /* ---- Resume view ---- */
  .resume-section-title{
    font-size:11.5px; text-transform:uppercase; letter-spacing:.09em; color: rgba(238,240,236,0.4);
    font-weight:700; margin:18px 0 8px;
  }
  .resume-section-title:first-child{ margin-top:0; }

  /* ---- Profile avatar (nav icon) ---- */
  .profile-avatar-ic{
    border-radius:50%; overflow:hidden; background: var(--moss);
    display:flex; align-items:center; justify-content:center;
  }
  .profile-avatar-ic img{ width:100%; height:100%; object-fit:cover; }
  .profile-avatar-ic .profile-avatar-initial{
    font-size:10px; font-weight:700; color: var(--paper); font-family:'Manrope', sans-serif;
  }

  /* ---- Chat / messages ---- */
  .chat-body{ display:flex; flex-direction:column; gap:10px; padding:6px 2px 10px; }
  .chat-bubble{
    max-width:78%; padding:10px 14px; border-radius:14px; font-size:13.5px; line-height:1.5;
    white-space:pre-wrap; word-break:break-word;
  }
  .chat-bubble.me{ align-self:flex-end; background: var(--clay); color:#fff; border-bottom-right-radius:4px; }
  .chat-bubble.them{ align-self:flex-start; background: rgba(238,240,236,0.08); border-bottom-left-radius:4px; }
  .chat-empty{ color: rgba(238,240,236,0.4); font-size:13.5px; text-align:center; padding:30px 0; }
  .chat-resume-card{
    align-self:flex-start; max-width:90%; border:1px solid var(--line-strong); border-radius:14px;
    padding:14px 16px; background: rgba(238,240,236,0.04);
  }
  .chat-resume-card .crc-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .chat-resume-card .crc-avatar{
    width:40px; height:40px; border-radius:50%; overflow:hidden; background: var(--moss);
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
    color: var(--paper); flex-shrink:0;
  }
  .chat-resume-card .crc-avatar img{ width:100%; height:100%; object-fit:cover; }
  .chat-resume-card .crc-name{ font-weight:700; font-size:14px; }
  .chat-resume-card .crc-headline{ font-size:12px; color: rgba(238,240,236,0.5); }
  .chat-resume-card .crc-row{ font-size:12.5px; color: rgba(238,240,236,0.7); margin-top:4px; }
  .chat-resume-card .crc-label{
    color: rgba(238,240,236,0.4); font-weight:700; text-transform:uppercase; font-size:10px;
    letter-spacing:.06em; margin-top:8px; display:block;
  }
  .chat-resume-card .crc-tag{
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    color: var(--clay-light); margin-bottom:8px;
  }
  .chat-send-row{ display:flex; gap:8px; padding:14px 24px 22px; border-top:1px solid var(--line); }
  .chat-send-row input{
    flex:1; background: rgba(238,240,236,0.05); border:1px solid var(--line-strong); border-radius:10px;
    padding:10px 14px; color: var(--paper); font-family:'Manrope', sans-serif; font-size:13.5px;
  }
  .chat-send-row input::placeholder{ color: rgba(238,240,236,0.3); }
  .chat-send-row input:focus{ outline:none; border-color: var(--clay-light); }
  .chat-send-row button{ width:auto; padding:0 18px; font-size:13px; }
  .msg-list-item .m.preview{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; display:inline-block; }

  @media (max-width: 600px){
    .posts-feed, .post-form, .hr-own-posts{ max-width:100%; }
    .post-photos-wrap .post-photo{ height:220px; }
    .post-media-grid img, .post-media-grid video{ height:220px; }
    .post-media-grid:has(> :only-child) img,
    .post-media-grid:has(> :only-child) video{ height:280px; }
  }

  /* ---- Verified (blue tick) ---- */
  .verified-field{ margin-top:2px; }
  .verified-check{
    display:flex; align-items:center; gap:10px; cursor:pointer;
    padding:12px 14px; border:1px solid var(--line); border-radius:10px;
    background: rgba(238,240,236,0.03);
  }
  .verified-check input[type="checkbox"]{
    width:17px; height:17px; accent-color: var(--clay-light); cursor:pointer; flex-shrink:0;
  }
  .verified-check-label{
    font-size:13.5px; color: rgba(238,240,236,0.7); font-weight:600;
    display:flex; align-items:center; gap:6px;
  }
  .verified-badge-preview{
    display:inline-flex; align-items:center; justify-content:center;
    width:16px; height:16px; border-radius:50%;
    background:#3897f0; color:#fff; font-size:10px; font-weight:900;
  }
  .blue-tick{
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
    width:15px; height:15px; margin-left:4px; vertical-align:middle;
  }
  .blue-tick svg{ width:100%; height:100%; }
  .hr-list-info .n, .post-hr-info .n, .row .v{ display:inline-flex; align-items:center; }

  /* ---- Notification unread dot ---- */
  .nav-btn .ic{ position:relative; }
  .nav-btn .ic.has-unread::after{
    content:"";
    position:absolute; top:-2px; right:-3px;
    width:8px; height:8px; border-radius:50%;
    background: var(--clay-light);
    border:2px solid var(--ink);
  }

  /* ---- Notifications list ---- */
  .notif-item{
    display:flex; gap:12px; align-items:flex-start;
    border:1px solid var(--line); background: rgba(238,240,236,0.03);
    border-radius:16px; padding:16px 18px;
  }
  .notif-body{ flex:1; min-width:0; }
  .notif-tag{
    font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
    color: rgba(238,240,236,0.4); margin-bottom:4px;
  }
  .notif-text{ font-size:14.5px; font-weight:600; color: var(--paper); line-height:1.4; }
  .notif-subtext{ font-size:13px; color: rgba(238,240,236,0.55); margin-top:4px; line-height:1.45; }
  .notif-time{ font-size:12px; color: rgba(238,240,236,0.35); margin-top:8px; }

  /* ---- Like / Comment action bar ---- */
  .post-actions-bar{
    display:flex; gap:6px; margin-top:16px; padding-top:12px; border-top:1px solid var(--line);
  }
  .post-action-btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
    background:none; border:none; cursor:pointer; border-radius:9px;
    padding:9px; color: rgba(238,240,236,0.55);
    font-family:'Manrope', sans-serif; font-weight:600; font-size:13px;
    transition: background .2s ease, color .2s ease;
  }
  .post-action-btn svg{ width:17px; height:17px; flex-shrink:0; }
  .post-action-btn:hover{ background: rgba(238,240,236,0.06); color: var(--paper); }
  .post-action-btn.liked{ color: var(--clay-light); }
  .post-action-btn.liked svg{ fill: var(--clay-light); stroke: var(--clay-light); }
  .action-count{ font-variant-numeric: tabular-nums; }

  .post-comments{ display:none; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
  .post-comments.open{ display:block; }
  .comment-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:12px; max-height:260px; overflow-y:auto; }
  .comment-empty{ font-size:13px; color: rgba(238,240,236,0.4); }
  .comment-item{
    font-size:13.5px; line-height:1.5; background: rgba(238,240,236,0.04);
    border-radius:10px; padding:9px 12px;
  }
  .comment-name{ font-weight:700; color: var(--paper); margin-right:6px; }
  .comment-text{ color: rgba(238,240,236,0.75); white-space:pre-wrap; }
  .comment-form{ display:flex; gap:8px; }
  .comment-form input{
    flex:1; background: rgba(238,240,236,0.05); border:1px solid var(--line);
    border-radius:20px; padding:9px 15px; color: var(--paper);
    font-family:'Manrope', sans-serif; font-size:13px;
  }
  .comment-form input:focus{ outline:none; border-color: var(--clay-light); }
  .comment-send{
    background: var(--clay); color: var(--paper); border:none; border-radius:20px;
    padding:9px 18px; font-family:'Manrope', sans-serif; font-weight:700; font-size:13px;
    cursor:pointer; flex-shrink:0;
  }
  .comment-send:hover{ background: var(--clay-light); }

  /* ---- Google sign-in button + divider ---- */
  .oauth-divider{
    display:flex; align-items:center; gap:12px;
    margin:20px 0 16px; color: rgba(238,240,236,0.35); font-size:12.5px; font-weight:600;
    text-transform:uppercase; letter-spacing:.06em;
  }
  .oauth-divider::before, .oauth-divider::after{
    content:""; flex:1; height:1px; background: var(--line);
  }
  .google-btn{
    width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
    background:#fff; color:#3c4043; border:1px solid rgba(238,240,236,0.18);
    border-radius:10px; padding:12px 18px; cursor:pointer;
    font-family:'Manrope', sans-serif; font-weight:600; font-size:14.5px;
    transition: box-shadow .2s ease, transform .15s ease;
  }
  .google-btn:hover{ box-shadow:0 4px 14px rgba(0,0,0,0.25); transform: translateY(-1px); }
  .google-btn svg{ flex-shrink:0; }

  /* ---- Google account chooser modal (mock — no real Google auth) ---- */
  .google-chooser-box{
    width:100%; max-width:400px; max-height:88vh;
    background:#fff; color:#202124;
    border-radius:20px; overflow:hidden;
    box-shadow: 0 40px 100px -30px rgba(0,0,0,0.7);
    animation: rise .35s cubic-bezier(.2,.7,.2,1);
    position:relative; font-family:'Manrope', sans-serif;
    display:flex; flex-direction:column;
  }
  .google-chooser-head{
    padding:32px 24px 20px; text-align:center;
  }
  .gc-title{ font-size:20px; font-weight:600; margin-top:14px; color:#202124; }
  .gc-sub{ font-size:13.5px; color:#5f6368; margin-top:6px; }
  .gc-list{ display:flex; flex-direction:column; padding:4px 0; overflow-y:auto; max-height:40vh; }
  .gc-item{
    display:flex; align-items:center; gap:16px;
    padding:11px 24px; cursor:pointer;
    transition: background .15s ease;
  }
  .gc-item:hover{ background:#f1f3f4; }
  .gc-avatar{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:#c46a4a; color:#fff; font-weight:700; font-size:14px;
    display:flex; align-items:center; justify-content:center;
  }
  .gc-info{ min-width:0; }
  .gc-name{ font-size:14.5px; font-weight:500; color:#202124; }
  .gc-email{ font-size:13px; color:#5f6368; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .gc-other-icon{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:#f1f3f4; color:#5f6368; font-size:18px; font-weight:600;
    display:flex; align-items:center; justify-content:center;
  }
  .gc-other-form{
    display:flex; gap:10px; padding:8px 24px 24px; align-items:center;
  }
  .gc-other-form input{
    flex:1; border:1px solid #dadce0; border-radius:8px; padding:11px 14px;
    font-family:'Manrope', sans-serif; font-size:14px; color:#202124;
  }
  .gc-other-form input:focus{ outline:none; border-color:#4285F4; }
  .gc-hint{
    padding:0 24px 14px; font-size:12.5px; color:#d93025; min-height:1px;
  }
  .gc-next-btn{
    background:#1a73e8; color:#fff; border:none; border-radius:8px;
    padding:11px 18px; font-family:'Manrope', sans-serif; font-weight:600; font-size:13.5px;
    cursor:pointer; flex-shrink:0;
  }
  .gc-next-btn:hover{ background:#1765cc; }
  .gc-close{
    position:absolute; top:14px; right:14px; color:#5f6368;
  }
  .gc-close:hover{ background:#f1f3f4; color:#202124; }

/* ---- AWS version additions ---- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#1d2328;color:var(--paper);border:1px solid var(--line-strong);padding:11px 18px;border-radius:10px;font-size:13.5px;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.4);max-width:90vw;font-family:'Manrope',sans-serif}
.ai-btn{background:none;border:1px solid var(--line-strong);color:var(--paper);font-family:'Manrope',sans-serif;font-weight:600;font-size:12.5px;padding:8px 14px;border-radius:999px;cursor:pointer;width:auto;margin-top:8px}
.ai-btn:hover{background:rgba(238,240,236,.08)}
.ai-btn:disabled{opacity:.6;cursor:default}
.ai-out{white-space:pre-wrap;font-size:13px;line-height:1.55;margin-top:10px;color:var(--paper);opacity:.9}
.mark .mark-logo{width:28px;height:28px;border-radius:50%;flex:none}
.brand-logo{width:34px;height:34px;border-radius:50%;flex:none;margin-right:12px}
@media (max-width:780px){ .topbar > .brand-logo{display:none} }