:root{
  --font-sans:"Trebuchet MS","Segoe UI",Arial,Helvetica,sans-serif;
  --text:#122033;
  --text-muted:#55657a;

  --ink:#234a9b;
  --paper:#fff;
  --paper-veil:rgba(255,255,255,.9);
  --edge:#d6e2f5;

  --shadow-sm:0 2px 10px rgba(16,42,90,.10);
  --shadow:0 12px 32px rgba(16,42,90,.12);

  --accent:#2b7bff;
  --accent-600:#1f63e6;
  --accent-700:#184fc0;
  --link:#1f6fde;
  --link-hover:#174ea6;
  --focus:2px solid #1f6fde;

  --success:#2ea44f;
  --error:#d93025;

  --nav-alpha:.25;

  --radius:10px;

  --space-1:6px; --space-2:10px; --space-3:16px; --space-4:20px; --space-5:28px; --space-6:40px;

  --fs-100:clamp(12px,.75rem + .1vw,14px);
  --fs-200:clamp(14px,.85rem + .15vw,16px);
  --fs-300:clamp(16px,.95rem + .2vw,18px);
  --fs-400:clamp(18px,1.05rem + .3vw,22px);
  --fs-600:clamp(24px,1.4rem + .8vw,36px);

  --container-max:1100px;
  --content-pad:clamp(16px,3vw,28px);
}

@media (min-width:1200px){:root{--container-max:1280px}}
@media (min-width:1440px){:root{--container-max:1440px}}
@media (min-width:1680px){:root{--container-max:1600px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

html,body{height:100%}

body{
  font-family:var(--font-sans);
  font-size:var(--fs-200);
  line-height:1.6;
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 18px 18px, rgba(20,60,140,.06) 1.2px, transparent 1.2px) 0 0/36px 36px,
    radial-gradient(circle at 60% -20%, rgba(30,80,180,.06) 160px, transparent 160px),
    linear-gradient(#eef5ff,#e3efff);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{
  width:100%;
  max-width:var(--container-max);
  margin:24px auto;
  padding:var(--content-pad);
  box-sizing:border-box;
  background:var(--paper-veil);
  border:1px solid var(--edge);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-3);
}

main{padding:var(--space-6) 0 var(--space-4);text-align:center}
main>h1{margin:6px 0 4px}
main>p{margin:0 0 12px}

footer{
  width:min(var(--container-max),calc(100% - 32px));
  margin:var(--space-4) auto var(--space-6);
  background:#f3f7ff;
  color:#395072;
  border:1px solid var(--edge);
  border-radius:var(--radius);
  padding:12px 16px;
  box-shadow:var(--shadow-sm);
}

h1{font-size:var(--fs-600);letter-spacing:-.02em;margin:0 0 8px;color:#173565;text-shadow:0 1px 0 #fff}
p{margin:6px 0 0;color:var(--text-muted);font-size:var(--fs-300)}

nav{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;
  background:linear-gradient(to bottom, rgb(42 87 179 / var(--nav-alpha)), rgb(35 74 155 / var(--nav-alpha)));
  border:0;border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 16px rgba(27,63,120,.18);
}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
nav li{margin:0}
nav a{
  --pad-x:14px;--pad-y:8px;
  text-decoration:none;color:#eaf1ff;
  padding:var(--pad-y) var(--pad-x);
  border-radius:var(--radius);border:1px solid transparent;
  transition:transform .12s ease,background-color .15s ease,color .15s ease,border-color .15s ease;
}
nav a:hover,nav a:focus{color:#fff;background:#2f64c9;border-color:rgba(255,255,255,.18);transform:translateY(-1px);outline:none}
nav .active a{color:#0d1b33;background:linear-gradient(#bcd3ff,#93b8ff);border-color:#7aa6ff;font-weight:700}

.nav-time{
  font-size:var(--fs-100);color:#0d1b33;
  background:linear-gradient(#ddecff,#cfe4ff);
  border:1px solid #a7c6ff;
  padding:6px 10px;border-radius:999px;
}

.brand-link{text-decoration:none;font-weight:700}
.brand-navy{color:#001F54}.brand-blue{color:#3A86FF}

a{color:var(--link)} a:hover{color:var(--link-hover)}

.btn-link{
  display:inline-block;padding:11px 18px;border-radius:12px;
  background:linear-gradient(#4c95ff,var(--accent));color:#fff;text-decoration:none;
  font-weight:700;letter-spacing:.2px;border:1px solid #2a71f0;
  box-shadow:0 6px 0 #1b4fb8,0 10px 24px rgba(43,123,255,.25);
  transition:transform .08s ease,filter .15s ease,box-shadow .15s ease;
}
.btn-link:hover,.btn-link:focus{filter:saturate(110%);transform:translateY(-1px);box-shadow:0 7px 0 #1b4fb8,0 14px 28px rgba(43,123,255,.32);color:#fff;outline:none}
.btn-link:active{transform:translateY(1px);box-shadow:0 4px 0 #153f96,0 10px 20px rgba(43,123,255,.2)}
.btn-sm{padding:8px 12px!important;box-shadow:0 4px 12px rgba(0,0,0,.12)}

.centered-text{text-align:center}
.centered-content,.image-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
:focus-visible{outline:var(--focus);outline-offset:2px}
.blackjack{margin-right:5px}

.error{background:#ffe7e7;border:1px solid #f2b0b0;color:#8b1f12;padding:10px 12px;border-radius:10px;font-weight:700}
.success{background:#e7f8ee;border:1px solid #b7e8c6;color:#1e6e35;padding:10px 12px;border-radius:10px;font-weight:700}

.image-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:960px){.image-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.image-grid{grid-template-columns:1fr}}
.image-links{margin-top:10px}
.image-links a{text-decoration:none;color:var(--link)}
.image-links a:hover{color:var(--link-hover)}

#overlay{position:fixed;inset:0;background:rgba(5,20,50,.78);display:none;justify-content:center;align-items:center;z-index:9999}
#overlay.is-open{display:flex}
#overlay-image{max-width:90%;max-height:90%;border-radius:12px;border:1px solid var(--edge);box-shadow:var(--shadow)}

.profile-picture-wrapper{position:relative;display:inline-block}
.profile-picture{width:144px;height:144px;border-radius:50%;object-fit:cover;display:block;border:1px solid var(--edge);box-shadow:var(--shadow-sm)}
.online-status,.offline-status{position:absolute;bottom:10px;right:10px;width:14px;height:14px;border-radius:50%;border:2px solid var(--paper)}
.online-status{background:#22c55e}
.offline-status{background:#9aa4ad;opacity:.85}

.dashboard-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  align-items:start;
  margin-top:16px;
  grid-auto-flow:row;
}
.dashboard-grid>*{min-width:0}
@media (min-width:981px){
  .dashboard-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:20px;row-gap:16px;
    grid-template-areas:
      "profile recent"
      "edit    shortcuts";
  }
  .profile-card{grid-area:profile}
  .profile-edit-card{grid-area:edit}
  .recent-card{grid-area:recent;align-self:start}
  .shortcuts-card{grid-area:shortcuts}
}
@media (max-width:980px){
  .profile-card,.profile-edit-card,.recent-card,.shortcuts-card{grid-area:auto;grid-column:1/-1;grid-row:auto}
}

.card{
  background:var(--paper-veil);
  border:1px solid var(--edge);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:12px;
  text-align:left;
  width:100%;
  box-sizing:border-box;
}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.card-head h2{margin:0;font-size:clamp(18px,1rem + .4vw,22px);color:var(--text)}
.card-actions{display:flex;gap:8px}

.profile-layout{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:start}
@media (max-width:640px){.profile-layout{grid-template-columns:1fr}.profile-avatar{justify-self:center}}
.profile-avatar .profile-picture{width:120px;height:120px}

.meta-list{display:grid;grid-template-columns:minmax(110px,180px) 1fr;column-gap:14px;row-gap:6px}
.meta-list dt{font-weight:600;color:var(--text-muted);white-space:nowrap}
.meta-list dd{margin:0;color:var(--text);line-height:1.5;overflow-wrap:anywhere;word-break:break-word}

@media (min-width:900px){
  .profile-card .meta-list{
    grid-template-columns:
      minmax(100px,140px) minmax(0,1fr)
      minmax(100px,140px) minmax(0,1fr);
    column-gap:18px;row-gap:8px;align-items:start;max-width:100%;
  }
  .profile-card .meta-list dt:nth-of-type(odd){grid-column:1}
  .profile-card .meta-list dt:nth-of-type(odd)+dd{grid-column:2}
  .profile-card .meta-list dt:nth-of-type(even){grid-column:3}
  .profile-card .meta-list dt:nth-of-type(even)+dd{grid-column:4}
  .profile-card .meta-list dd{min-width:0}
}

.quick-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

.shortcut-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:420px){.shortcut-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1440px){.shortcut-grid{grid-template-columns:1fr}}
.shortcut-tile{
  display:flex;flex-direction:column;gap:4px;
  padding:12px;background:#ffffffcc;border:1px dashed var(--edge);
  border-radius:10px;text-decoration:none;color:var(--text);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;
}
.shortcut-tile:hover{transform:translateY(-2px);border-color:var(--link);box-shadow:0 8px 18px rgba(0,0,0,.08)}
.shortcut-title{font-weight:700}
.shortcut-sub{font-size:13px;color:var(--text-muted)}

/* Profile details: exactly 2 columns, each field (dt+dd) stacks in one column */
@media (min-width: 900px){
  .profile-card .meta-list{
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr); /* two wide columns */
    column-gap: 32px;
    row-gap: 6px;
    max-width: 100%;
  }

  /* Send odd pairs to the left column, even pairs to the right */
  .profile-card .meta-list dt:nth-of-type(odd),
  .profile-card .meta-list dt:nth-of-type(odd) + dd{ grid-column: 1; }

  .profile-card .meta-list dt:nth-of-type(even),
  .profile-card .meta-list dt:nth-of-type(even) + dd{ grid-column: 2; }

  /* Tidy values; allow long emails to wrap without pushing layout */
  .profile-card .meta-list dd{
    margin: 0 0 10px;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* Mobile/tablet: single column */
@media (max-width: 899px){
  .profile-card .meta-list{
    grid-template-columns: minmax(100px,140px) minmax(0,1fr);
  }
  .profile-card .meta-list dt,
  .profile-card .meta-list dd{ grid-column: auto; }
}