/* ===========================================================
   Fab Portal
   Palette and type taken from the Fab Portal brand sheet.
   =========================================================== */
:root {
    /* --- brand palette (exact) --- */
    --fab-pink:  #d9497f;
    --blush:     #f5a9c6;
    --beige:     #efe0d6;
    --white:     #ffffff;
    --plum:      #3b2230;

    /* --- working shades derived from the palette --- */
    --pink-press:  #c13a6e;   /* pressed / hover */
    --pink-wash:   #fdeff4;   /* blush at 20% — icon chips, table heads */
    --beige-wash:  #faf2ec;   /* beige at 30% */
    --page:        #fdf8f4;   /* warm off-white canvas */
    --surface:     var(--white);
    --border:      #f2e6de;
    --border-strong: #e6d5c9;
    --text:        var(--plum);
    --muted:       #9c8891;
    --faint:       #bda8b0;
    --ok:          #6a9a72;
    --danger:      #c0455a;

    --radius:    14px;
    --radius-lg: 20px;
    --shadow:    0 2px 10px rgba(59, 34, 48, .05);
    --shadow-lg: 0 16px 44px rgba(59, 34, 48, .12);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--page);
    color: var(--text);
    font-family: "Jost", -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .fab-wordmark, .serif {
    font-family: "Marcellus", Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: .005em;
}

a { color: var(--fab-pink); text-decoration: none; }
a:hover { color: var(--pink-press); }

/* -----------------------------------------------------------
   Logo lockup
   ----------------------------------------------------------- */
.fab-lockup { display: inline-flex; align-items: center; gap: 12px; }
.fab-lockup--stacked { flex-direction: column; gap: 10px; text-align: center; }
.fab-mark { display: block; flex: none; }

.fab-words { display: flex; flex-direction: column; gap: 3px; }
.fab-lockup--stacked .fab-words { align-items: center; }

.fab-wordmark {
    font-family: "Marcellus", Georgia, serif;
    font-size: 26px;
    line-height: 1;
    letter-spacing: .01em;
}
.fab-wordmark em { font-style: normal; color: var(--plum); }
.fab-wordmark b  { font-weight: 400;   color: var(--fab-pink); }

.fab-subline {
    font-family: "Jost", sans-serif;
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: #b9a396;
}

/* -----------------------------------------------------------
   Login
   ----------------------------------------------------------- */
.login-wrap {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: var(--beige-wash);
}

.login-card {
    width: 100%; max-width: 408px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 36px 36px;
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.login-card form, .login-card .field, .login-card label { text-align: left; }

.login-card .lockup-wrap { margin-bottom: 26px; }
.login-card .sub {
    margin: 0 0 30px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 300;
}

label {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--muted);
    margin-bottom: 8px;
}

input[type=text], input[type=password], input[type=search] {
    width: 100%;
    padding: 12px 15px;
    background: #fdfaf8;
    border: 1px solid var(--border-strong);
    border-radius: 11px;
    color: var(--text);
    font-family: "Jost", sans-serif;
    font-size: 15px;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus {
    background: #fff;
    border-color: var(--fab-pink);
    box-shadow: 0 0 0 3px rgba(217, 73, 127, .14);
}
input::placeholder { color: var(--faint); }

.field { margin-bottom: 18px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    padding: 13px 20px;
    border: 0; border-radius: 40px;
    background: var(--fab-pink);
    color: #fff;
    font-family: "Jost", sans-serif;
    font-size: 15px; font-weight: 500;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .16s, transform .08s;
}
.btn:hover  { background: var(--pink-press); color: #fff; }
.btn:active { transform: translateY(1px); }

.btn-ghost {
    width: auto;
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--muted);
    font-weight: 400;
    padding: 8px 16px;
    font-size: 13px;
}
.btn-ghost:hover {
    background: var(--pink-wash);
    border-color: var(--blush);
    color: var(--fab-pink);
}

.alert {
    padding: 11px 15px;
    border-radius: 11px;
    font-size: 14px;
    margin-bottom: 18px;
    text-align: left;
}
.alert-error { background: #fdeef0; border: 1px solid #f2ccd3; color: #a83a4e; }
.alert-ok    { background: #eff5f0; border: 1px solid #cbe0ce; color: #4a7a52; }

/* -----------------------------------------------------------
   Top bar
   ----------------------------------------------------------- */
.topbar {
    display: flex; align-items: center; gap: 12px;
    padding: 0 28px; height: 74px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 20;
}
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--muted); font-size: 13px; font-weight: 300; }

.nav-link {
    color: var(--muted);
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 40px;
    transition: color .15s, background .15s;
}
.nav-link:hover      { color: var(--fab-pink); background: var(--pink-wash); }
.nav-link.is-current { color: var(--plum); }

.avatar {
    width: 38px; height: 38px; flex: none;
    border-radius: 50%;
    background: var(--pink-wash);
    color: var(--fab-pink);
    display: grid; place-items: center;
    font-size: 13px; font-weight: 500;
    letter-spacing: .04em;
}

/* -----------------------------------------------------------
   Page
   ----------------------------------------------------------- */
.page { max-width: 1120px; margin: 0 auto; padding: 46px 28px 84px; }

.page-head { margin-bottom: 30px; }
.page-head h1 { margin: 0 0 7px; font-size: 34px; line-height: 1.15; }
.page-head p  { margin: 0; color: var(--muted); font-size: 15px; font-weight: 300; }

.toolbar { display: flex; gap: 12px; margin: 0 0 26px; }
.toolbar input { max-width: 320px; border-radius: 40px; }

/* -----------------------------------------------------------
   App grid
   ----------------------------------------------------------- */
.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    gap: 20px;
}

.app-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 22px 26px;
    color: var(--text);
    box-shadow: var(--shadow);
    transition: transform .16s ease, box-shadow .18s, border-color .18s;
}
.app-card:hover {
    transform: translateY(-3px);
    border-color: var(--blush);
    box-shadow: 0 10px 26px rgba(59, 34, 48, .09);
    color: var(--text);
}

.app-card .ico {
    width: 50px; height: 50px;
    border-radius: 14px;
    display: grid; place-items: center;
    margin-bottom: 26px;
}
.app-card .ico svg { width: 24px; height: 24px; }
.app-card .emoji-icon { font-size: 24px; line-height: 1; }

.app-card h3 { margin: 0 0 5px; font-size: 19px; }
.app-card p  { margin: 0; font-size: 13px; color: var(--muted); font-weight: 300; line-height: 1.55; }

.empty {
    border: 1px dashed var(--border-strong);
    background: var(--beige-wash);
    border-radius: var(--radius);
    padding: 54px 26px;
    text-align: center;
    color: var(--muted);
    font-weight: 300;
}
.empty code {
    background: #fff;
    border: 1px solid var(--border-strong);
    padding: 2px 8px; border-radius: 6px;
    color: var(--fab-pink); font-size: 13px;
}

/* -----------------------------------------------------------
   App viewer
   ----------------------------------------------------------- */
.viewer-bar {
    display: flex; align-items: center; gap: 16px;
    height: 62px; padding: 0 22px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.viewer-bar .title { font-family: "Marcellus", Georgia, serif; font-size: 19px; }
.viewer-bar .spacer { flex: 1; }
.back-link { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 14px; }
.back-link:hover { color: var(--fab-pink); }

.viewer-frame {
    width: 100%;
    height: calc(100vh - 62px);
    border: 0; display: block;
    background: #fff;
}

/* -----------------------------------------------------------
   Tables
   ----------------------------------------------------------- */
table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-weight: 300;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
table.data th, table.data td {
    text-align: left; padding: 13px 16px;
    border-bottom: 1px solid var(--border);
}
table.data tr:last-child td { border-bottom: 0; }
table.data th {
    background: var(--pink-wash);
    color: var(--fab-pink);
    font-weight: 500; font-size: 10.5px;
    text-transform: uppercase; letter-spacing: .14em;
}
table.data tr:hover td { background: #fffcfa; }

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
}

.section-title {
    font-family: "Marcellus", Georgia, serif;
    font-size: 20px;
    margin: 40px 0 14px;
}

.footer-note {
    margin-top: 52px;
    color: var(--faint);
    font-size: 11.5px;
    font-weight: 300;
    text-align: center;
    letter-spacing: .1em;
    text-transform: uppercase;
}

@media (max-width: 620px) {
    .page { padding: 30px 16px 60px; }
    .page-head h1 { font-size: 26px; }
    .app-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
    .topbar { padding: 0 14px; gap: 6px; height: 66px; }
    .topbar .who, .nav-link { display: none; }
    .fab-wordmark { font-size: 21px; }
}