:root {
  --sky-top: #87ceeb;
  --sky-mid: #b6e0f5;
  --sky-bottom: #d8f0c0;
  --ink: #1a3a5c;
  --ink-soft: #335c80;
  --muted: #607a90;
  --bg-card: rgba(255, 255, 255, 0.85);
  --border: rgba(26, 58, 92, 0.15);
  --accent: #1976d2;
  --accent-dark: #0f5fb8;
  --danger: #c0392b;
  --warn: #b8860b;
  --good: #2e7d32;
  --radius: 10px;
  --shadow: 0 4px 14px rgba(26, 58, 92, 0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: linear-gradient(to bottom, var(--sky-top) 0%, var(--sky-mid) 60%, var(--sky-bottom) 100%);
  background-attachment: fixed;
}

a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px;
}

header.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}
.site-header h1 { margin: 0 0 4px; font-size: 2.2rem; }
.site-header .role { margin: 0; color: var(--ink-soft); font-size: 1.05rem; }
.site-header .bio { margin: 8px 0 0; max-width: 640px; color: var(--ink-soft); }
.site-header .meta { font-size: 0.9rem; color: var(--muted); }

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover { background: white; border-color: var(--ink-soft); }
.btn.primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn.danger { color: var(--danger); border-color: rgba(192, 57, 43, 0.3); }
.btn.danger:hover { background: var(--danger); color: white; border-color: var(--danger); }
.btn.small { font-size: 0.85rem; padding: 4px 10px; }

.muted { color: var(--muted); }
.small { font-size: 0.9rem; }

.project-list {
  display: grid;
  gap: 24px;
}

.embed-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(26, 58, 92, 0.08);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.embed-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Static screenshot gallery (used when no live embed is available) */
.gallery {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(26, 58, 92, 0.04);
  padding: 16px 22px;
  display: grid;
  gap: 14px;
}
.gallery-item {
  display: block;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow 0.15s, transform 0.15s;
}
.gallery-item:hover {
  box-shadow: 0 6px 20px rgba(26, 58, 92, 0.16);
  transform: translateY(-2px);
}
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

.print-only { display: none; }

/* Empty state */
.empty-state {
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
  color: var(--muted);
}

/* ============ Login ============ */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 26px;
}
.login-card h1 { margin: 0 0 4px; font-size: 1.5rem; }
.login-card form { margin-top: 16px; display: grid; gap: 14px; }
.login-card label { display: grid; gap: 6px; font-size: 0.95rem; }
.login-card input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: white;
  font-size: 1rem;
}
.login-card .btn { justify-content: center; }

.alert {
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.9rem;
}
.alert.error { background: #fdecea; color: #842029; border: 1px solid #f5c2c7; }
.alert.success { background: #e6f4ea; color: #1e4620; border: 1px solid #b6dec3; }

/* ============ Admin ============ */
.admin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 980px) {
  .admin-grid { grid-template-columns: 1.05fr 1fr; align-items: start; }
}

.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
}
.panel h2 { margin-top: 0; }

.form-grid { display: grid; gap: 12px; }
.form-grid label { display: grid; gap: 4px; font-size: 0.9rem; color: var(--ink-soft); }
.form-grid input[type=text],
.form-grid input[type=url],
.form-grid input[type=email],
.form-grid input[type=password],
.form-grid input[type=file],
.form-grid textarea,
.form-grid select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  font-size: 0.95rem;
  font-family: inherit;
}
.form-grid textarea { min-height: 110px; resize: vertical; }
.form-grid .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.form-grid .checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.form-grid .checkbox-row input { width: auto; }

.list-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  background: white;
}
.list-item + .list-item { margin-top: 10px; }
.list-item .thumb {
  width: 56px;
  height: 40px;
  background: rgba(26, 58, 92, 0.08);
  border-radius: 6px;
  object-fit: cover;
  display: block;
}
.list-item .info { flex: 1; min-width: 0; }
.list-item .info h3 { margin: 0 0 2px; font-size: 1rem; }
.list-item .info .meta { font-size: 0.8rem; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.list-item .controls { display: flex; gap: 6px; flex-wrap: wrap; }

.badge { font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; }
.badge.published { background: #e6f4ea; color: var(--good); }
.badge.draft { background: #fff4e0; color: var(--warn); }

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============ Print / PDF ============ */
@media print {
  html, body {
    background: white;
    color: black;
  }
  .no-print { display: none !important; }
  .container { max-width: none; padding: 16px; }
  .embed-frame iframe { display: none; }
  .embed-frame {
    aspect-ratio: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .print-only { display: block; }
  .print-thumb {
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    border: 1px solid #ccc;
    margin: 0 auto;
    display: block;
  }
  .print-url {
    font-family: monospace;
    font-size: 0.85rem;
    word-break: break-all;
    color: #333;
    padding: 6px 12px;
    background: #f5f5f5;
    border-radius: 4px;
    margin: 8px 22px 12px;
  }
  a { color: black; text-decoration: none; }
}

/* ============ Public portfolio — Swiss Mono / paper + fixed sidebar ============ */
body.pf{
  --paper:#FBFAF7; --c-ink:#101010; --c-soft:#3C3C3C; --c-muted:#9B9B97;
  --c-line:rgba(16,16,16,.12); --rust:#B0552C; --c-teal:#1E5F5F;
  background:var(--paper); background-attachment:scroll;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--c-ink);
}
.pf .layout{display:grid;grid-template-columns:340px 1fr;min-height:100vh;}

.pf .sidebar{position:sticky;top:0;height:100vh;border-right:1px solid var(--c-ink);
  padding:48px 36px;display:flex;flex-direction:column;}
.pf .brand{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c-muted);border-bottom:1px solid var(--c-ink);padding-bottom:14px;margin-bottom:36px;}
.pf .owner-name{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:2.4rem;line-height:1.02;
  letter-spacing:-.02em;margin:0 0 16px;}
.pf .owner-name .given,.pf .owner-name .family{display:block;}
.pf .owner-role{font-family:"IBM Plex Mono",monospace;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--rust);margin:0 0 22px;}
.pf .owner-bio{font-size:.96rem;line-height:1.6;color:var(--c-soft);margin:0 0 26px;}

.pf .sidebar-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;}
.pf .sidebar-actions button,.pf .sidebar-actions a{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
  background:none;border:1px solid var(--c-ink);color:var(--c-ink);padding:8px 12px;cursor:pointer;text-decoration:none;transition:.15s;}
.pf .sidebar-actions button:hover,.pf .sidebar-actions a:hover{background:var(--c-ink);color:var(--paper);}
.pf .sidebar-actions .muted-link{border-color:transparent;color:var(--c-muted);padding:8px 4px;}

.pf .owner-contact{font-family:"IBM Plex Mono",monospace;font-size:.8rem;display:flex;flex-direction:column;gap:12px;margin-top:auto;}
.pf .owner-contact a{color:var(--c-ink);text-decoration:none;border-bottom:1px solid var(--c-ink);padding-bottom:3px;width:max-content;max-width:100%;}
.pf .owner-contact a:hover{color:var(--rust);border-color:var(--rust);}

.pf .content{padding:48px 56px 64px;max-width:960px;}
.pf .sectionrule{display:flex;align-items:center;gap:16px;margin:0 0 8px;}
.pf .sectionrule span{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted);}
.pf .sectionrule .line{flex:1;height:1px;background:var(--c-ink);}

.pf .work{padding:36px 0;border-bottom:1px solid var(--c-ink);}
.pf .idx{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--c-muted);margin-bottom:14px;}
.pf .work h2{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:2rem;line-height:1.1;
  letter-spacing:-.02em;margin:0 0 16px;max-width:26ch;}
.pf .work-meta{font-family:"IBM Plex Mono",monospace;font-size:.76rem;display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.pf .m-sector{color:var(--c-teal);font-weight:500;text-transform:uppercase;letter-spacing:.04em;}
.pf .m-date{color:var(--c-muted);}
.pf .tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.pf .tag{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--c-soft);border:1px solid var(--c-line);padding:3px 9px;}
.pf .desc{font-size:1rem;line-height:1.65;color:var(--c-soft);margin:0 0 22px;max-width:64ch;}

.pf .gallery{border:0;background:none;padding:0;display:grid;gap:16px;margin:0 0 22px;}
.pf .gallery-item{display:block;border:1px solid var(--c-ink);overflow:hidden;box-shadow:none;border-radius:0;transition:.15s;}
.pf .gallery-item:hover{transform:none;box-shadow:0 6px 22px rgba(16,16,16,.14);}
.pf .gallery-item img{width:100%;height:auto;display:block;}
.pf .gallery-item.featured{position:relative;}
.pf .more-badge{position:absolute;right:0;bottom:0;background:var(--c-ink);color:var(--paper);
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.04em;padding:8px 13px;transition:.15s;}
.pf .gallery-item.featured:hover .more-badge{background:var(--rust);}

.pf .embed-frame{aspect-ratio:16/9;border:1px solid var(--c-ink);background:none;margin:0 0 22px;}

.pf .work-actions{display:flex;gap:18px;flex-wrap:wrap;align-items:center;}
.pf .work-actions a,.pf .work-actions button{font-family:"IBM Plex Mono",monospace;font-size:.82rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.04em;text-decoration:none;color:var(--c-ink);background:none;border:0;cursor:pointer;padding:0;}
.pf .work-actions a.fill{background:var(--c-ink);color:var(--paper);padding:11px 18px;}
.pf .work-actions a.fill:hover{background:var(--rust);}
.pf .work-actions a.line2{padding:11px 0;border-bottom:2px solid var(--rust);}
.pf .work-actions .copy-link{color:var(--c-muted);}
.pf .work-actions .copy-link:hover{color:var(--c-ink);}

.pf .content-footer{margin-top:40px;font-family:"IBM Plex Mono",monospace;font-size:.74rem;color:var(--c-muted);text-transform:uppercase;letter-spacing:.08em;}

@media(max-width:860px){
  .pf .layout{grid-template-columns:1fr;}
  .pf .sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--c-ink);}
  .pf .owner-name{font-size:2rem;}
  .pf .owner-contact{margin-top:24px;}
  .pf .content{padding:32px 28px 56px;}
}

@media print{
  .pf .layout{display:block;}
  .pf .sidebar{position:static;height:auto;border-right:0;border-bottom:2px solid #000;padding:0 0 16px;margin-bottom:16px;}
  .pf .content{padding:0;max-width:none;}
  .pf .work{border-bottom:1px solid #888;page-break-inside:avoid;break-inside:avoid;}
  .pf .embed-frame{display:none;}
  .pf .content-footer{display:none;}
}