/* ============================================
   COMMONSCENE - "TOWN & CANVAS" THEME
   Two zones:
   (1) Shared chrome = confident mid-2000s app UI
       (Tahoma, gradient titlebars, beveled buttons,
        hard borders, dense layout, tiled bg)
   (2) Profile (#profilePage) = neutral blank canvas
       so a user's own theme fills the space.
   ============================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --fc-blue:       #2f4a99;   /* chrome primary (royal blue) */
    --fc-blue-dark:  #1d2f66;   /* borders / deep accents */
    --fc-blue-light: #4664bd;   /* lighter chrome */
    --fc-panel:      #dfe6f2;   /* shell silver panel */
    --fc-panel-line: #8c98a8;   /* hairline on chrome */
    --fc-accent:     #d7a83c;   /* starlight gold (badges, active marks) */
    --fc-accent-dk:  #a9832c;
    --fc-ink:        #1a1f33;   /* body text */
    --fc-ink-soft:   #5d6580;   /* secondary text */
    --fc-canvas:     #fdfdfd;   /* profile canvas bg */
    --fc-canvas-line:#dcdcdc;   /* profile hairline */
    /* Chiseled construction: two-tone bevel edges */
    --fc-bev-lt:     #f9fbfe;   /* raised light edge (top/left) */
    --fc-bev-dk:     #40506a;   /* raised dark edge (bottom/right) */
    --fc-well-dk:    #7b8797;   /* sunken dark edge (top/left) */
    --fc-btn-face:   #d9dde3;   /* button face */
}

body {
    font-family: Tahoma, Verdana, Geneva, sans-serif;
    font-size: 12px;
    line-height: 1.45;
    color: var(--fc-ink);
    min-height: 100vh;
    /* Midnight sky with a small tiled star cell (celestial atmosphere) */
    background-color: #050914;
    background-image:
        radial-gradient(circle at 8px 7px,  rgba(255,255,255,.75) 0 1px, transparent 1.3px),
        radial-gradient(circle at 31px 26px, rgba(166,200,255,.55) 0 1px, transparent 1.2px),
        radial-gradient(circle at 49px 10px, rgba(255,255,255,.42) 0 1px, transparent 1.2px),
        radial-gradient(circle at 17px 43px, rgba(215,168,60,.38) 0 1px, transparent 1.2px);
    background-size: 56px 56px;
    background-attachment: fixed;
}

.hidden { display: none !important; }

a { color: var(--fc-blue); }

img { max-width: 100%; height: auto; }
img[src=""], img:not([src]), img[src="#"] { display: none; }

/* ============================================
   COMMONSCENE - NOCTURNAL CELESTIAL
   ============================================
   Design rules for this stylesheet:

   1. DEPTH MEANS "YOU CAN TOUCH IT".
      Buttons, inputs, selects and active tabs may be tactile.
      Posts, lists, news, sidebars and headings are FLAT: plain
      colour bands, 1px borders, horizontal rules.

   2. SECTIONS ARE ALLOWED TO DIFFER.
      Unrelated areas get their own heading colour and weight, so the
      page reads as authored rather than as one component repeated.
      Local variation lives at the bottom of this file.

   3. THE SITE IS A PAGE, NOT A CANVAS.
      A fixed-width lit container sits against a dark starfield.
      Content interiors stay cool silver-grey and readable.
   ============================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* --- night frame --- */
    --fc-night:      #0B0D18;   /* outside the site container */
    --fc-header:     #241226;   /* masthead aubergine */
    --fc-nav:        #3A1E32;   /* navigation plum */
    --fc-oxblood:    #651F38;   /* headings, alerts, activity */
    --fc-indigo:     #2E2948;   /* headings, news */
    --fc-violet:     #54346C;   /* links, dusty accents */
    --fc-bronze:     #9A7438;   /* utility headings, stars */
    --fc-bronze-dk:  #6E5226;

    /* --- lit interior --- */
    --fc-surface:    #E3E4E8;   /* main content surface */
    --fc-surface-lt: #ECECEF;   /* lighter surface */
    --fc-surface-alt:#D1D2D8;   /* alternate grey band */
    --fc-rule:       #B9BAC2;   /* ordinary 1px border */
    --fc-rule-soft:  #CDCED4;   /* faint divider */

    /* --- text --- */
    --fc-ink:        #242126;
    --fc-ink-soft:   #5E5A63;
    --fc-link:       #54346C;
    --fc-link-hover: #651F38;

    /* --- controls (the only tactile things) --- */
    --fc-btn-face:   #D8D8DE;
    --fc-btn-lt:     #FFFFFF;
    --fc-btn-dk:     #85838C;

    /* --- compatibility aliases -----------------------------------
       Older rules and inline styles still reference the previous blue
       variable names. Repointing them here restyles everything that
       used them without hunting through 2,000 lines or touching JS. */
    --fc-blue:       #2E2948;
    --fc-blue-dark:  #241226;
    --fc-blue-light: #54346C;
    --fc-panel:      #D1D2D8;
    --fc-panel-line: #B9BAC2;
    --fc-accent:     #9A7438;
    --fc-accent-dk:  #6E5226;
    --fc-canvas:     #ECECEF;
    --fc-canvas-line:#CDCED4;
    --fc-bev-lt:     #FFFFFF;
    --fc-bev-dk:     #B9BAC2;
    --fc-well-dk:    #A7A5AE;
}

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: var(--fc-ink);
    min-height: 100vh;
    /* Sparse starfield well outside the reading area. No glow. */
    background-color: var(--fc-night);
    background-image:
        radial-gradient(circle at 11px 9px,  rgba(255,255,255,.55) 0 1px, transparent 1.2px),
        radial-gradient(circle at 47px 31px, rgba(190,200,230,.34) 0 1px, transparent 1.1px),
        radial-gradient(circle at 76px 14px, rgba(255,255,255,.26) 0 1px, transparent 1.1px),
        radial-gradient(circle at 29px 62px, rgba(154,116,56,.30) 0 1px, transparent 1.1px);
    background-size: 96px 96px;
    background-attachment: fixed;
}

.hidden { display: none !important; }

/* Links look like links. */
a { color: var(--fc-link); text-decoration: none; }
a:hover { color: var(--fc-link-hover); text-decoration: underline; }

img { max-width: 100%; height: auto; }
img[src=""], img:not([src]), img[src="#"] { display: none; }

/* ============================================
   MASTHEAD - a flat painted band, not a panel
   ============================================ */
.top-nav {
    /* transparent so the night background shows either side: the site
       reads as a page sitting on a dark desktop, not a full-bleed app */
    background: none;
    border: none;
}

.nav-container {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    background: var(--fc-header);
    border-left: 1px solid #05060C;
    border-right: 1px solid #05060C;
}

.nav-logo {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 27px;
    font-weight: bold;
    color: #F2ECF2;
    letter-spacing: .4px;
    display: flex;
    align-items: baseline;
    padding: 13px 14px 11px;
    background: var(--fc-header);
}
.nav-logo .star { color: var(--fc-bronze); margin-right: 8px; font-size: 21px; }

/* Navigation reads as a row of links with separators, not buttons. */
.nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: var(--fc-nav);
    border-top: 1px solid #4E2C43;
    border-bottom: 1px solid #1A0C16;
    padding: 0 4px;
}

.nav-links a {
    color: #E6DCE6;
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    padding: 6px 11px;
    display: flex;
    align-items: center;
    position: relative;
}
/* pipe separators between links, the period way */
.nav-links a + a::before {
    content: '';
    position: absolute; left: 0; top: 7px; bottom: 7px;
    border-left: 1px solid #5A3550;
}
.nav-links a:hover { color: #FFFFFF; text-decoration: underline; background: none; }
.nav-links a.active {
    color: #FFFFFF;
    background: none;
    box-shadow: none;
    border-bottom: 2px solid var(--fc-bronze);
}

.nav-badge {
    background: var(--fc-oxblood);
    color: #FBEFF2;
    border: none;
    padding: 0 5px;
    font-size: 10px;
    margin-left: 5px;
    font-weight: bold;
}

.nav-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    background: var(--fc-violet);
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    margin-right: 6px;
    overflow: hidden;
    border: 1px solid #2A1A36;
}

/* ============================================
   SITE CONTAINER + LAYOUT
   A fixed-width lit page against the night background.
   ============================================ */
.container {
    max-width: 980px;
    margin: 0 auto 24px;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 12px;
    background: var(--fc-surface);
    border-left: 1px solid #05060C;
    border-right: 1px solid #05060C;
    border-bottom: 1px solid #05060C;
}

.main-column { min-width: 0; }
.sidebar { min-width: 0; }

/* Shells used by the restructured pages sit inside the same lit container. */
.home-shell, .profile-shell, .dir-shell, .con-shell {
    max-width: 980px;
    background: var(--fc-surface);
    border-left: 1px solid #05060C;
    border-right: 1px solid #05060C;
    border-bottom: 1px solid #05060C;
    margin-top: 0;
    margin-bottom: 24px;
    padding: 10px;
}

/* Breadcrumb strips sit flush under the masthead. */
.dir-crumb, .con-crumb {
    max-width: 980px; margin: 0 auto; padding: 4px 10px;
    background: var(--fc-surface-alt);
    border-left: 1px solid #05060C; border-right: 1px solid #05060C;
    border-bottom: 1px solid var(--fc-rule);
    color: var(--fc-ink-soft); font-size: 10px;
}

/* ============================================
   SECTIONS  (.card is a legacy class name kept for JS/markup
   compatibility - it is no longer a raised "card")
   ============================================
   Flat by default: a plain surface, one hairline border, and a
   simple heading band. Individual sections override the heading
   colour further down so the page does not read as one component
   repeated nine times.
   ============================================ */
.card {
    background: var(--fc-surface-lt);
    border: 1px solid var(--fc-rule);
    margin-bottom: 12px;
    overflow: visible;
}

.card h3 {
    background: var(--fc-indigo);
    color: #F0EDF4;
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-transform: none;
    letter-spacing: 0;
    padding: 4px 8px;
    margin: 0 0 8px 0;
    border: none;
    text-shadow: none;
}

/* Inner spacing is applied per-section rather than globally, so areas
   can breathe differently depending on what they hold. */
.card > *:not(h3) { padding-left: 9px; padding-right: 9px; }
.card > h3 + * { padding-top: 0; }
.card { padding-bottom: 9px; }

/* ============================================
   CONTROLS - the only things allowed real depth
   Buttons, inputs, selects and textareas may look physical.
   Nothing else should.
   ============================================ */
.button {
    background: var(--fc-btn-face);
    color: #2A2430;
    border: 2px outset var(--fc-btn-face);
    padding: 3px 11px;
    cursor: pointer;
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    margin-right: 5px;
}
.button:hover { background: #E2E2E7; }
.button:active { border-style: inset; padding: 4px 10px 2px 12px; }

.button-primary,
.button.button-primary {
    background: var(--fc-violet);
    border: 2px outset var(--fc-violet);
    color: #F6F0FA;
}
.button-primary:hover { background: #5F3D79; }

.button-secondary {
    background: var(--fc-surface-alt);
    border: 2px outset var(--fc-surface-alt);
    color: #3A3640;
}
.button-secondary:hover { background: #DADAE0; }

.button-danger {
    background: var(--fc-oxblood);
    border: 2px outset var(--fc-oxblood);
    color: #FBEFF2;
}
.button-danger:hover { background: #77264332; background: #772643; }

.button:disabled, .button[disabled] {
    color: #8A868F; background: var(--fc-surface-alt);
    border-style: solid; cursor: default;
}

/* ============================================
   FORMS
   ============================================ */
.form-group { margin-bottom: 9px; }

.form-group label {
    display: block;
    font-size: 11px;
    font-weight: bold;
    color: var(--fc-ink);
    margin-bottom: 3px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 4px 6px;
    border: 2px inset #EFEFF2;
    background: #FFFFFF;
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    color: var(--fc-ink);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: 1px solid var(--fc-violet);
}

/* ============================================
   MESSAGES - Alert boxes
   ============================================ */
.message {
    padding: 8px 12px;
    margin-bottom: 12px;
    font-weight: bold;
    font-size: 12px;
    border: 1px solid;
}
.error   { background: #ffe2e2; color: #a72525; border-color: #cc3333; }
.success { background: #e0f3df; color: #2a6b27; border-color: #4f9e4c; }

/* ============================================
   POSTS - Message-board row
   ============================================ */
.post {
    background: #fff;
    padding: 12px;
    border: 1px solid var(--fc-panel-line);
    border-left: 4px solid var(--fc-blue);
    margin-bottom: 10px;
}

.post-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.post-avatar {
    width: 42px;
    height: 42px;
    background: var(--fc-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 17px;
    margin-right: 10px;
    flex-shrink: 0;
    border: 1px solid var(--fc-blue-dark);
    overflow: hidden;
}

.post-author { flex: 1; min-width: 0; }

.post-author-name {
    font-weight: bold;
    color: var(--fc-blue);
    cursor: pointer;
    font-size: 13px;
}
.post-author-name:hover { text-decoration: underline; }

.post-date { color: var(--fc-ink-soft); font-size: 11px; margin-top: 1px; }

.post-content {
    color: var(--fc-ink);
    font-size: 12px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ============================================
   POST REACTIONS
   ============================================ */
.post-reactions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.reaction-buttons {
    display: flex;
    gap: 5px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.reaction-btn {
    background: #e6eaf1;
    border: 1px solid #aaa;
    width: 34px;
    height: 30px;
    font-size: 17px;
    cursor: pointer;
    opacity: 0.65;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reaction-btn:hover { opacity: 1; background: #dbe4f2; }
.reaction-btn.active {
    opacity: 1;
    border-color: var(--fc-blue);
    background: #cfdaf0;
}

.reaction-counts {
    font-size: 12px;
    color: var(--fc-ink-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ============================================
   SIDEBAR - Info boxes
   ============================================ */
.mini-profile { text-align: center; }

.mini-profile-pic {
    width: 72px;
    height: 72px;
    background: var(--fc-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    margin: 4px auto 10px;
    border: 1px solid var(--fc-blue-dark);
    overflow: hidden;
}
.mini-profile-pic img { width: 100%; height: 100%; object-fit: cover; }

.mini-profile h4 { color: var(--fc-ink); font-size: 14px; margin-bottom: 3px; }
.mini-profile p { color: var(--fc-ink-soft); font-size: 12px; }

.stat-box {
    background: var(--fc-panel);
    padding: 12px;
    text-align: center;
    border: 1px solid var(--fc-panel-line);
}
.stat-number { font-size: 28px; font-weight: bold; color: var(--fc-blue); }
.stat-label {
    color: var(--fc-ink-soft);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 2px;
}

/* Active users list */
.active-user-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 4px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}
.active-user-item:hover { background: #f3f6fb; }
.active-user-avatar {
    position: relative;
    width: 34px; height: 34px;
    background: var(--fc-blue);
    color: #fff; font-weight: bold; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
    border: 1px solid var(--fc-blue-dark);
}
.active-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.active-user-status {
    position: absolute; bottom: -1px; right: -1px;
    width: 9px; height: 9px; background: #4caf50;
    border: 1px solid #fff; border-radius: 50%;
}
.active-user-info { flex: 1; min-width: 0; }
.active-user-name { font-weight: bold; font-size: 12px; color: var(--fc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.active-user-username { font-size: 11px; color: var(--fc-ink-soft); }
.active-user-btn {
    background: var(--fc-blue);
    color: #fff; border: 1px solid var(--fc-blue-dark); font-size: 11px; font-weight: bold;
    padding: 3px 8px; cursor: pointer;
}
.active-user-btn-secondary { background: var(--fc-btn-face); color: #333; border-color: #888; }
.active-users-empty { color: var(--fc-ink-soft); font-size: 12px; text-align: center; padding: 12px; }

/* Activity feed */
.activity-item { padding: 7px 2px; border-bottom: 1px dotted var(--fc-panel-line); font-size: 12px; line-height: 1.5; }
.activity-item:last-child { border-bottom: none; }
.activity-user { font-weight: bold; color: var(--fc-blue); cursor: pointer; }
.activity-user:hover { text-decoration: underline; }
.activity-time { color: #98a4b5; font-size: 10px; margin-top: 2px; }
.activity-icon { margin-right: 4px; }

/* ============================================
   FRIENDS / SEARCH / REQUESTS
   ============================================ */
.friend-card-item,
.search-result,
.request-item {
    background: #fff;
    border: 1px solid var(--fc-panel-line);
    border-left: 4px solid var(--fc-blue);
    padding: 10px;
    margin-bottom: 8px;
}
.friend-card-item:hover { background: #f3f6fb; border-left-color: var(--fc-accent); }
.search-result { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.friend-info h4, .search-result-info h4 { color: var(--fc-blue); font-size: 13px; cursor: pointer; margin-bottom: 2px; }
.friend-info h4:hover, .search-result-info h4:hover { text-decoration: underline; }
.friend-info p, .search-result-info p { color: var(--fc-ink-soft); font-size: 11px; }
.friend-username { color: var(--fc-blue); cursor: pointer; font-weight: bold; }
.friend-username:hover { text-decoration: underline; }
.request-item h4 { color: var(--fc-ink); font-size: 13px; margin-bottom: 2px; }
.request-actions { margin-top: 8px; }

/* ============================================
   MESSAGES (conversations)
   ============================================ */
.conversation-item {
    background: #fff;
    border: 1px solid var(--fc-panel-line);
    border-left: 4px solid var(--fc-panel-line);
    padding: 10px;
    margin-bottom: 8px;
    cursor: pointer;
}
.conversation-item:hover { background: #f3f6fb; border-left-color: var(--fc-blue); }
.conversation-item.unread { border-left-color: var(--fc-accent); background: #fff7ec; }
.conversation-header { display: flex; justify-content: space-between; margin-bottom: 5px; }
.conversation-name { font-weight: bold; color: var(--fc-blue); font-size: 13px; }
.conversation-time { color: #98a4b5; font-size: 11px; }
.conversation-preview { color: var(--fc-ink-soft); font-size: 12px; line-height: 1.4; }
.unread-badge {
    background: var(--fc-accent); color: #fff; padding: 1px 6px; font-size: 10px; font-weight: bold; margin-left: 6px;
}

/* Conversation bubbles - retro IM / forum PM style (squared, flat, hard borders) */
.msg-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    max-width: 75%;
    clear: both;
}
.msg-row.msg-sent { align-items: flex-end; margin-left: auto; }
.msg-row.msg-recv { align-items: flex-start; margin-right: auto; }
.msg-name {
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 3px;
    padding: 0 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.msg-sent .msg-name { color: var(--fc-blue); }
.msg-recv .msg-name { color: var(--fc-ink-soft); }
.msg-bubble {
    padding: 7px 11px;
    border: 1px solid;
    font-size: 12px;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}
.msg-sent .msg-bubble {
    background: var(--fc-blue);
    color: #fff;
    border-color: var(--fc-blue-dark);
}
.msg-recv .msg-bubble {
    background: var(--fc-panel);
    color: var(--fc-ink);
    border-color: var(--fc-panel-line);
}
.msg-time {
    font-size: 10px;
    color: #98a4b5;
    margin-top: 3px;
    padding: 0 2px;
}

/* ============================================
   NOTIFICATIONS
   ============================================ */
.notification-item {
    background: #fff;
    border: 1px solid var(--fc-panel-line);
    border-left: 4px solid var(--fc-panel-line);
    padding: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.notification-item:hover { background: #f3f6fb; }
.notification-item.unread { border-left-color: var(--fc-accent); background: #fff7ec; }
.notification-header { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.notification-icon { font-size: 18px; flex-shrink: 0; }
.notification-message { font-size: 12px; color: var(--fc-ink); word-wrap: break-word; }
.notification-time { font-size: 11px; color: #98a4b5; margin-top: 2px; }
.notification-actions { display: flex; gap: 5px; flex-shrink: 0; }
.notification-empty { text-align: center; color: var(--fc-ink-soft); padding: 30px; font-size: 13px; }

/* ============================================
   PHOTOS
   ============================================ */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.photo-item { position: relative; border: 1px solid var(--fc-panel-line); cursor: pointer; overflow: hidden; background: #fff; }
.photo-item img { width: 100%; height: 120px; object-fit: cover; display: block; }
.photo-caption { font-size: 11px; padding: 4px 6px; color: var(--fc-ink); background: var(--fc-panel); border-top: 1px solid var(--fc-panel-line); }
.photo-actions { position: absolute; top: 4px; right: 4px; }
.photo-action-btn { background: rgba(0,0,0,0.7); color: #fff; border: none; cursor: pointer; font-size: 13px; padding: 2px 5px; }
.photo-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 2000; align-items: center; justify-content: center; }
.photo-modal.active { display: flex; }
.photo-modal-content { position: relative; max-width: 90vw; max-height: 90vh; }
.photo-modal-img { max-width: 90vw; max-height: 70vh; border: 3px solid #fff; }
.photo-modal-close { position: absolute; top: -32px; right: 0; color: #fff; font-size: 28px; cursor: pointer; font-weight: bold; }

/* ============================================
   WALL COMMENTS
   ============================================ */
.wall-comment { border: 1px solid var(--fc-panel-line); padding: 8px; margin-bottom: 8px; background: #fff; position: relative; }
.wall-comment-header { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.wall-comment-avatar {
    width: 30px; height: 30px;
    background: var(--fc-blue);
    color: #fff; font-weight: bold; font-size: 12px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    border: 1px solid var(--fc-blue-dark);
}
.wall-comment-author-name { font-weight: bold; color: var(--fc-blue); font-size: 12px; cursor: pointer; }
.wall-comment-author-name:hover { text-decoration: underline; }
.wall-comment-date { font-size: 10px; color: #98a4b5; }
.wall-comment-content { font-size: 12px; color: var(--fc-ink); word-wrap: break-word; }
.wall-comment-delete { margin-top: 6px; padding: 2px 8px; font-size: 11px; }

/* ============================================
   THEME CUSTOMIZER (lives on profile canvas)
   ============================================ */
.theme-tabs { display: flex; gap: 3px; margin-bottom: 12px; border-bottom: 2px solid var(--fc-blue); }
.theme-tab {
    padding: 6px 14px; cursor: pointer; font-size: 12px; font-weight: bold;
    background: var(--fc-btn-face);
    border: 1px solid #aaa; border-bottom: none; color: #555;
}
.theme-tab.active { background: var(--fc-blue); color: #fff; border-color: var(--fc-blue-dark); }
.theme-section { display: none; }
.theme-section.active { display: block; }
.theme-card { cursor: pointer; border: 3px solid transparent; overflow: hidden; }
.theme-card.active { border-color: var(--fc-accent); }
.customization-section { padding: 6px 0; }

/* ============================================
   PROFILE PAGE - THE BLANK CANVAS
   Everything above is the shared "town" look.
   Here we deliberately strip it back to neutral so a
   user's chosen theme has room to define the space.
   Their custom CSS / theme is injected into #profileThemeStyle
   and layers on top of these calm defaults.
   ============================================ */
/* ============================================
   PROFILE THEME VARIABLES
   A theme is a set of SEMANTIC surfaces, not two colours from
   which everything else is guessed. Prebuilt themes, the Theme
   Builder and migrated legacy themes all just set these.
   Structural rules below consume them, so the architecture stays
   identical while the paint changes.
   ============================================ */
#profilePage {
    --profile-bg:            #263258;
    --profile-panel:         #ffffff;
    --profile-panel-alt:     #eef2f7;
    --profile-header:        #38548c;
    --profile-header-text:   #ffffff;
    --profile-header-rail:   #7b96c4;
    --profile-header-base:   #1c2f52;
    --profile-text:          #1a1f33;
    --profile-muted:         #5d6580;
    --profile-link:          #1b3f9c;
    --profile-accent:        #b8842a;
    --profile-border-light:  #ffffff;
    --profile-border-dark:   #9aa4b4;
    --profile-outline:       #b9c2cf;
    --profile-button:        #d9dde3;
    --profile-button-text:   #102b55;
    --profile-font-body:     Tahoma, Verdana, sans-serif;
    --profile-font-heading:  Georgia, 'Times New Roman', serif;

    font-family: var(--profile-font-body);
    color: var(--profile-text);
}

/* The profile keeps real early-2000s construction (bordered modules,
   titlebars) but in a calmer key than the town chrome, so it reads as
   "you haven't decorated yet" rather than "the design vanished here". */
#profilePage .card {
    background: var(--profile-panel);
    border-top: 1px solid var(--profile-border-light);
    border-left: 1px solid var(--profile-border-light);
    border-right: 1px solid var(--profile-border-dark);
    border-bottom: 1px solid var(--profile-border-dark);
    outline: 1px solid var(--profile-outline);
    box-shadow: none;
    padding: 0 0 10px;
}

#profilePage .card h3 {
    background: var(--profile-header);
    color: var(--profile-header-text);
    font-family: var(--profile-font-heading);
    text-shadow: none;
    border-top: 1px solid var(--profile-header-rail);
    border-bottom: 1px solid var(--profile-header-base);
    padding: 3px 8px;
    margin: 0 0 9px 0;
    font-size: 11px;
    letter-spacing: 0.3px;
}

/* text, links and inset wells all follow the theme */
#profilePage .identity-handle,
#profilePage .identity-meta,
#profilePage .identity-seen,
#profilePage .details-list,
#profilePage .section-meta,
#profilePage .status-text,
#profilePage .post-date,
#profilePage .wall-comment-date { color: var(--profile-muted); }

#profilePage .about-body,
#profilePage .post-content,
#profilePage .identity-block h2,
#profilePage .status-mood { color: var(--profile-text); }

#profilePage a,
#profilePage .section-meta a,
#profilePage .section-more a,
#profilePage .top8-name,
#profilePage .post-author-name,
#profilePage .wall-comment-author-name { color: var(--profile-link); }

#profilePage .identity-status,
#profilePage .interest-tag { background: var(--profile-panel-alt); color: var(--profile-text); }

#profilePage .top8-thumb,
#profilePage .phcell,
#profilePage .photo-item { background: var(--profile-panel-alt); }

#profilePage .button {
    background: var(--profile-button);
    color: var(--profile-button-text);
    border-top-color: var(--profile-border-light);
    border-left-color: var(--profile-border-light);
    border-right-color: var(--profile-border-dark);
    border-bottom-color: var(--profile-border-dark);
}
#profilePage .bar .g,
#profilePage .section-meta .accent { color: var(--profile-accent); }

#profilePage .card > *:not(h3) { padding-left: 10px; padding-right: 10px; }

/* Profile header - neutral */
.profile-header { display: flex; gap: 16px; margin-bottom: 16px; }
.profile-pic {
    width: 140px; height: 140px;
    background: var(--fc-blue);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff; font-size: 52px; font-weight: bold;
    flex-shrink: 0; overflow: hidden; position: relative;
    border: 1px solid var(--fc-canvas-line);
}
.profile-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-pic-text { flex: 1; display: flex; align-items: center; justify-content: center; }
.profile-pic-upload {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.78); color: #fff; padding: 6px;
    text-align: center; font-size: 11px; cursor: pointer;
    z-index: 10; font-weight: bold;
}
.profile-pic-upload:hover { background: rgba(59,89,152,0.9); }
.profile-info { flex: 1; min-width: 0; }
.profile-info h2 { color: var(--fc-ink); font-size: 22px; margin-bottom: 6px; }
.profile-info p { color: var(--fc-ink-soft); font-size: 13px; margin-bottom: 4px; }

/* Buttons on the canvas stay usable but quieter by default */
/* Profile buttons follow the user's theme variables and keep the modest
   depth that controls are allowed. No embossed text. */
#profilePage .button {
    background: var(--profile-button);
    color: var(--profile-button-text);
    border: 2px outset var(--profile-button);
    text-shadow: none;
}
#profilePage .button:active { border-style: inset; }
#profilePage .button-danger {
    background: var(--fc-oxblood);
    color: #FBEFF2;
    border: 2px outset var(--fc-oxblood);
    text-shadow: none;
}

/* ============================================
   AUTH SCREEN
   ============================================ */
.auth-container { max-width: 380px; margin: 60px auto; padding: 0 16px; }
.auth-tabs { display: flex; gap: 3px; }
.auth-tab {
    flex: 1; padding: 9px; cursor: pointer; font-size: 13px; font-weight: bold;
    background: var(--fc-btn-face);
    border: 1px solid #999; border-bottom: none; color: #555;
}
.auth-tab.active { background: #fff; color: var(--fc-blue-dark); }

/* ============================================
   CONSTELLATION NETWORK VIZ
   ============================================ */
.friendcircle-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 10px;
    max-width: 920px;
    margin: 14px auto;
    padding: 0 12px;
    height: calc(100vh - 90px);
    position: relative;
}
.friendcircle-controls {
    background: #fff;
    border: 1px solid var(--fc-blue-dark);
    padding: 14px;
    overflow-y: auto;
}
.friendcircle-controls h2 { color: var(--fc-blue); font-size: 16px; margin-bottom: 6px; }
.friendcircle-breadcrumb {
    font-size: 11px; color: var(--fc-ink-soft); margin-bottom: 12px;
    padding: 8px; background: var(--fc-panel); border-left: 3px solid var(--fc-blue);
}
.friendcircle-breadcrumb a { color: var(--fc-blue); text-decoration: none; font-weight: bold; cursor: pointer; }
.friendcircle-breadcrumb a:hover { text-decoration: underline; }
.friendcircle-center-person {
    font-weight: bold; color: #fff; padding: 14px;
    background: var(--fc-blue);
    margin-bottom: 14px; text-align: center; border: 1px solid var(--fc-blue-dark);
}
.friendcircle-center-person > div { font-size: 18px; }
.friendcircle-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.friendcircle-stat-box { text-align: center; padding: 12px; background: var(--fc-panel); border: 1px solid var(--fc-panel-line); }
.friendcircle-stat-number { font-size: 26px; font-weight: bold; color: var(--fc-blue); }
.friendcircle-stat-label { font-size: 10px; color: var(--fc-ink-soft); text-transform: uppercase; font-weight: bold; letter-spacing: 0.4px; margin-top: 3px; }
.friendcircle-canvas-container {
    background: linear-gradient(135deg, #435d94, #2e4372);
    border: 1px solid var(--fc-blue-dark);
    position: relative; overflow: hidden; min-height: 500px;
}
#friendCircleCanvas { width: 100%; height: 100%; cursor: grab; display: block; }
#friendCircleCanvas:active { cursor: grabbing; }
.friendcircle-loading {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    background: #fff; padding: 30px 40px; border: 1px solid var(--fc-blue-dark);
    text-align: center; z-index: 10;
}
.friendcircle-loading > div:last-child { font-size: 14px; color: var(--fc-blue); font-weight: bold; margin-top: 10px; }
.friendcircle-spinner {
    border: 5px solid #e4e4e4; border-top: 5px solid var(--fc-blue);
    width: 44px; height: 44px;
    animation: spin 1s linear infinite; margin: 0 auto 12px;
}
@keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.friendcircle-tooltip {
    position: fixed; background: rgba(0,0,0,0.92); color: #fff;
    padding: 12px 16px; font-size: 13px; pointer-events: none; display: none;
    z-index: 1000; max-width: 240px; border: 1px solid rgba(255,255,255,0.15);
}
.friendcircle-controls .button { width: 100%; margin-top: 12px; margin-right: 0; }

/* ============================================
   FILE INPUT - keep hidden
   ============================================ */
.file-input { display: none !important; position: absolute; left: -9999px; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
    .container { grid-template-columns: 1fr; }
    .friendcircle-container { grid-template-columns: 1fr; height: auto; }
    .friendcircle-canvas-container { height: 480px; }
    .nav-container { flex-direction: column; }
    .nav-links { flex-wrap: wrap; }
    .nav-links a { padding: 8px 10px; border: none; }
}

@media (max-width: 500px) {
    .profile-header { flex-direction: column; align-items: center; text-align: center; }
    .photo-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
}

/* ============================================
   ADMIN PANEL
   ============================================ */
.admin-tabs { display: flex; gap: 3px; border-bottom: 2px solid var(--fc-blue); margin-top: 4px; }
.admin-tab {
    padding: 6px 16px; cursor: pointer; font-size: 12px; font-weight: bold;
    font-family: Tahoma, Verdana, sans-serif;
    background: var(--fc-btn-face);
    border: 1px solid #aaa; border-bottom: none; color: #555;
}
.admin-tab.active { background: var(--fc-blue); color: #fff; border-color: var(--fc-blue-dark); }

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}
.admin-stat {
    background: var(--fc-panel);
    border: 1px solid var(--fc-panel-line);
    padding: 14px 10px;
    text-align: center;
}
.admin-stat-num { font-size: 30px; font-weight: bold; color: var(--fc-blue); line-height: 1; }
.admin-stat-num.admin-live { color: #2a9d2a; }
.admin-stat-label {
    font-size: 10px; color: var(--fc-ink-soft); text-transform: uppercase;
    letter-spacing: 0.4px; margin-top: 5px; font-weight: bold;
}

/* Recent activity stream */
.admin-activity-row {
    display: flex; align-items: baseline; gap: 6px;
    padding: 6px 2px; border-bottom: 1px dotted var(--fc-panel-line);
    font-size: 12px;
}
.admin-activity-row:last-child { border-bottom: none; }
.admin-activity-icon { flex-shrink: 0; }
.admin-activity-user { font-weight: bold; color: var(--fc-blue); cursor: pointer; flex-shrink: 0; }
.admin-activity-user:hover { text-decoration: underline; }
.admin-activity-label { color: var(--fc-ink-soft); flex-shrink: 0; }
.admin-activity-text { color: var(--fc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.admin-activity-time { color: #98a4b5; font-size: 10px; flex-shrink: 0; }

/* Users table */
.admin-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.admin-table th {
    background: var(--fc-blue);
    color: #fff; text-align: left; padding: 6px 8px; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.3px;
    border: 1px solid var(--fc-blue-dark);
}
.admin-table td { padding: 6px 8px; border: 1px solid var(--fc-panel-line); }
.admin-table tr:nth-child(even) td { background: #f7f9fc; }
.admin-dot {
    display: inline-block; width: 8px; height: 8px; background: #2a9d2a; border-radius: 50%;
    margin-right: 6px; vertical-align: middle;
}
.admin-badge {
    background: var(--fc-accent); color: #fff; font-size: 10px; font-weight: bold;
    padding: 1px 6px; border: 1px solid var(--fc-accent-dk);
    text-transform: uppercase;
}
.admin-badge-banned {
    background: #cc3333; border-color: #7c1a1a;
}

/* Admin mini action buttons */
.admin-mini-btn {
    background: var(--fc-btn-face);
    border: 1px solid #888; color: #333;
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 11px; font-weight: bold;
    padding: 2px 8px; cursor: pointer;
    white-space: nowrap;
}
.admin-mini-btn:hover { background: #e6eaf1; }
.admin-mini-danger {
    background: #cc4444;
    border-color: #7c1a1a; color: #fff;
    margin-left: auto; flex-shrink: 0;
    width: 22px; height: 20px; padding: 0; line-height: 1;
}
.admin-mini-danger:hover { background: #d84141; }

/* ============================================
   NEWS
   ============================================ */
.news-item .news-meta {
    font-size: 11px; color: var(--fc-ink-soft);
    margin-bottom: 10px; padding-bottom: 8px;
    border-bottom: 1px solid var(--fc-panel-line);
}
.news-item .news-body { font-size: 13px; line-height: 1.6; color: var(--fc-ink); }

/* Home sidebar mini news */
.news-mini {
    padding: 8px 0; border-bottom: 1px dotted var(--fc-panel-line);
    cursor: pointer;
}
.news-mini:hover .news-mini-title { text-decoration: underline; }
.news-mini-title { font-weight: bold; color: var(--fc-blue); font-size: 12px; }
.news-mini-preview { font-size: 11px; color: var(--fc-ink-soft); margin: 2px 0; line-height: 1.4; }
.news-mini-time { font-size: 10px; color: #98a4b5; }
.news-mini-all {
    display: inline-block; margin-top: 8px; font-size: 11px;
    font-weight: bold; color: var(--fc-blue); text-decoration: none;
}
.news-mini-all:hover { text-decoration: underline; }

/* Admin news management rows */
.news-manage-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--fc-panel-line);
}
.news-manage-row:last-child { border-bottom: none; }

/* ============================================
   ORBITS (interest groups)
   ============================================ */
.orbit-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; margin-bottom: 8px;
    background: #fff; border: 1px solid var(--fc-panel-line);
    border-left: 4px solid var(--fc-blue); cursor: pointer;
}
.orbit-row:hover { background: #f3f6fb; border-left-color: var(--fc-accent); }
.orbit-row-info { flex: 1; min-width: 0; }
.orbit-row-name { font-weight: bold; color: var(--fc-blue); font-size: 14px; }
.orbit-row-desc { font-size: 12px; color: var(--fc-ink); margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orbit-row-meta { font-size: 11px; color: var(--fc-ink-soft); }
.orbit-row-action { flex-shrink: 0; }

.orbit-role-badge {
    background: var(--fc-accent); color: #fff; font-size: 10px; font-weight: bold;
    padding: 1px 7px; border: 1px solid var(--fc-accent-dk);
    text-transform: uppercase; letter-spacing: 0.3px;
}
.orbit-role-badge.orbit-role-member {
    background: var(--fc-blue-light); border-color: var(--fc-blue-dark);
}

/* Single orbit header */
.orbit-desc-full { font-size: 13px; line-height: 1.6; color: var(--fc-ink); margin-bottom: 8px; }
.orbit-meta-full { font-size: 12px; color: var(--fc-ink-soft); padding-top: 8px; border-top: 1px solid var(--fc-panel-line); }
.orbit-creator { color: var(--fc-blue); font-weight: bold; cursor: pointer; }
.orbit-creator:hover { text-decoration: underline; }

/* Member rows */
.orbit-member-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--fc-panel-line);
}
.orbit-member-row:last-child { border-bottom: none; }
.orbit-member-avatar {
    width: 38px; height: 38px;
    background: var(--fc-blue);
    color: #fff; font-weight: bold; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden; cursor: pointer;
    border: 1px solid var(--fc-blue-dark);
}
.orbit-member-info { flex: 1; min-width: 0; }
.orbit-member-name { font-weight: bold; color: var(--fc-blue); font-size: 13px; cursor: pointer; }
.orbit-member-name:hover { text-decoration: underline; }
.orbit-member-username { font-size: 11px; color: var(--fc-ink-soft); }

/* Sidebar "Your Orbits" */
.my-orbit-row {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 0; border-bottom: 1px dotted var(--fc-panel-line); cursor: pointer;
}
.my-orbit-row:last-child { border-bottom: none; }
.my-orbit-name { flex: 1; font-size: 12px; font-weight: bold; color: var(--fc-blue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-orbit-row:hover .my-orbit-name { text-decoration: underline; }
.my-orbit-count { font-size: 11px; color: var(--fc-ink-soft); background: var(--fc-panel); padding: 0 6px; }
/* ============================================
   WORDMARK - gold star + serif treatment
   ============================================ */
.nav-logo .star { color: var(--fc-accent); margin-right: 7px; font-size: 20px; }

.auth-wordmark {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 26px; font-weight: bold; color: var(--fc-blue-dark);
    text-align: center; margin-bottom: 2px; letter-spacing: 0.5px;
}
.auth-wordmark .star { color: var(--fc-accent-dk); margin-right: 6px; font-size: 22px; }
.auth-tagline {
    text-align: center; font-family: Georgia, serif; font-style: italic;
    font-size: 11px; color: var(--fc-ink-soft); margin-bottom: 16px;
}

/* ============================================
   HOME - three purpose rails
   home-personal (me) | home-feed (content) | home-pulse (ambient)
   ============================================ */
.home-shell {
    max-width: 920px;
    margin: 12px auto;
    padding: 0 10px;
    display: grid;
    grid-template-columns: 205px 1fr 235px;
    gap: 10px;
}
.home-personal, .home-feed, .home-pulse { min-width: 0; }

.me-friend-line {
    font-size: 11px; color: var(--fc-ink-soft);
    margin: 4px 0 8px;
}
.me-friend-line span { font-weight: bold; color: var(--fc-ink); }

.me-links { border-top: 1px solid var(--fc-canvas-line); padding-top: 7px; }
.me-links a {
    display: block; font-size: 11px; font-weight: bold;
    color: var(--fc-blue); text-decoration: underline; padding: 2px 0;
}
.me-links a:hover { color: var(--fc-link-hover); }

@media (max-width: 800px) {
    .home-shell { grid-template-columns: 1fr; }
    .home-feed { order: 1; }      /* content first on mobile */
    .home-personal { order: 2; }
    .home-pulse { order: 3; }
}

/* ============================================
   PROFILE - owner toolbar & safety bar
   OUTSIDE #profilePage on purpose: user CSS is scoped under
   #profilePage, so nothing here can be restyled or hidden.
   ============================================ */
.profile-owner-bar, .profile-safety-bar {
    max-width: 920px;
    margin: 12px auto 0;
    padding: 0 10px;
}
.profile-bar-inner {
    background: var(--fc-surface-alt);
    border-top: 1px solid var(--fc-rule);
    border-left: 1px solid var(--fc-rule-soft);
    border-right: 1px solid var(--fc-rule);
    border-bottom: 1px solid var(--fc-rule);
    padding: 4px 8px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    font-size: 11px;
}
.profile-bar-label {
    font-weight: bold; color: #102d5a; text-transform: uppercase;
    font-size: 10px; letter-spacing: .5px; margin-right: 6px;
}
.profile-bar-inner a {
    color: var(--fc-blue); font-weight: bold; text-decoration: underline;
    cursor: pointer; padding: 2px 8px; border-right: 1px solid #98a5b8;
}
.profile-bar-inner a:last-child { border-right: none; }
.profile-bar-inner a:hover { color: var(--fc-link-hover); }

/* Safety controls read as distinct from ordinary contact actions */
.profile-safety-bar .profile-bar-inner {
    background: #f0d9d9;
    border-right-color: #7c1a1a;
    border-bottom-color: #7c1a1a;
}
.profile-safety-bar .profile-bar-inner a { color: #7c1a1a; }

/* ============================================
   PROFILE - owner panels (editing surfaces)
   ============================================ */
#ownerPanels { max-width: 920px; margin: 8px auto 0; padding: 0 10px; }
.owner-panels-inner {
    background: var(--fc-panel);
    border-top: 1px solid var(--fc-bev-lt);
    border-left: 1px solid var(--fc-bev-lt);
    border-right: 1px solid var(--fc-bev-dk);
    border-bottom: 1px solid var(--fc-bev-dk);
    padding: 9px;
}
.owner-panel-head {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--fc-indigo);
    border: none;
    color: #fff; font-weight: bold; font-size: 11px;
    text-transform: uppercase; letter-spacing: .5px;
    padding: 3px 4px 3px 9px; margin-bottom: 9px;
}
.owner-panel-head .button { margin: 0; }

/* ============================================
   PROFILE - two purpose columns
   identity/actions | expressive social content
   ============================================ */
.profile-shell {
    max-width: 920px;
    margin: 10px auto 20px;
    padding: 0 10px;
    display: grid;
    grid-template-columns: 275px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}
.profile-identity-column, .profile-content-column { min-width: 0; }

/* identity block */
.identity-block { text-align: center; }
.identity-block .profile-pic { width: 120px; height: 120px; margin: 0 auto 8px; font-size: 42px; }
.identity-block h2 { font-size: 17px; color: var(--fc-ink); margin-bottom: 1px; }
.identity-handle { color: var(--fc-ink-soft); font-size: 11px; margin-bottom: 4px; }
.identity-seen { font-size: 11px; margin-bottom: 6px; }
.identity-meta { font-size: 10.5px; color: var(--fc-ink-soft); line-height: 1.6; text-align: left;
    border-top: 1px solid var(--fc-canvas-line); padding-top: 6px; }
.identity-meta p { margin: 0; }

/* status/mood as a compact inset well right under identity */
.identity-status {
    margin-top: 8px; padding: 6px 8px; background: #eef2f7;
    border-top: 1px solid var(--fc-well-dk); border-left: 1px solid var(--fc-well-dk);
    border-right: 1px solid #fff; border-bottom: 1px solid #fff;
    font-size: 11px; text-align: left;
}
.status-mood { display: block; font-weight: bold; color: var(--fc-ink); margin-bottom: 2px; }
.status-text { font-style: italic; color: var(--fc-ink-soft); }

/* contact actions stack */
.contact-actions { display: flex; flex-direction: column; gap: 4px; }
.contact-actions .button { margin-right: 0; width: 100%; text-align: center; }

/* compact Now Playing module */
.np-module { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: start; }
.np-art {
    width: 40px; height: 40px; background: #16203a; color: var(--fc-accent);
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    border-top: 1px solid #060a14; border-left: 1px solid #060a14;
    border-right: 1px solid #5d6a82; border-bottom: 1px solid #5d6a82;
}
.np-title { font-size: 11px; font-weight: bold; color: var(--fc-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.np-controls { display: flex; gap: 4px; }
.np-controls .button { margin-right: 0; padding: 2px 8px; font-size: 10px; }
.np-volume { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.np-volume input { flex: 1; cursor: pointer; }
.np-volume span { font-size: 10px; color: var(--fc-ink-soft); min-width: 30px; }

.details-list { font-size: 11px; color: var(--fc-ink); line-height: 1.6; }
.details-list p { margin: 0 0 4px; }
.about-body { font-size: 12px; line-height: 1.6; color: var(--fc-ink); }

/* section meta / more links */
.section-meta {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 10.5px; color: var(--fc-ink-soft);
    border-bottom: 1px dotted var(--fc-canvas-line);
    padding-bottom: 5px; margin-bottom: 9px;
}
.section-meta a, .section-more a {
    color: var(--fc-blue); font-weight: bold; text-decoration: underline; cursor: pointer;
}
.section-meta a:hover, .section-more a:hover { color: var(--fc-link-hover); }
.section-more { margin-top: 8px; font-size: 11px; }
.section-empty { color: var(--fc-ink-soft); font-size: 11px; padding: 12px; text-align: center; }

/* Top 8 - social currency, not just another card */
.top8-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.top8-friend { text-align: center; cursor: pointer; min-width: 0; }
.top8-thumb {
    width: 100%; aspect-ratio: 1/1; background: #d4dae3; color: #40516b;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 15px; overflow: hidden; position: relative;
    border-top: 2px solid #59687d; border-left: 2px solid #59687d;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff;
}
.top8-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.top8-name {
    margin-top: 3px; font-size: 10px; font-weight: bold; color: var(--fc-blue);
    text-decoration: underline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 800px) {
    .profile-shell { grid-template-columns: 1fr; }   /* identity first, then content */
    .top8-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================
   DISCOVERY - member directory
   ============================================ */
.dir-crumb {
    max-width: 920px; margin: 0 auto; padding: 5px 10px;
    background: #f3f5f8; border-bottom: 1px solid #8c98a8;
    color: #566273; font-size: 10px;
}
.dir-shell {
    max-width: 920px; margin: 10px auto 24px; padding: 0 10px;
    display: grid; grid-template-columns: minmax(0,1fr) 225px; gap: 10px;
    align-items: start;
}
.dir-main, .dir-rail { min-width: 0; }
.dir-pad { padding: 0 10px 10px; }
.bar-count { float: right; font-weight: normal; font-size: 9px; color: #dbe4f2; text-transform: none; }

/* Find People form */
.find-form {
    display: grid; grid-template-columns: 118px minmax(0,1fr);
    gap: 5px 8px; align-items: center; margin-bottom: 8px;
}
.find-form label {
    font-size: 10.5px; font-weight: bold; color: var(--fc-ink);
    text-align: right; text-transform: none; letter-spacing: 0;
}
.find-form input, .find-form select {
    font-family: Tahoma, Verdana, sans-serif; font-size: 11px; padding: 3px 6px; width: 100%;
    border-top: 1px solid var(--fc-well-dk); border-left: 1px solid var(--fc-well-dk);
    border-right: 1px solid #fff; border-bottom: 1px solid #fff;
    outline: 1px solid #aab2c0; background: #fff; color: var(--fc-ink);
}
.find-form input:focus, .find-form select:focus { outline: 1px solid var(--fc-blue); }

.find-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    border-top: 1px solid var(--fc-canvas-line); padding-top: 7px; font-size: 11px;
}
.find-label { font-weight: bold; color: var(--fc-ink); margin-right: 4px; }
.quickfilters a {
    color: var(--fc-blue); font-weight: bold; text-decoration: underline;
    cursor: pointer; padding: 2px 8px; border-right: 1px solid #b6c0ce;
}
.quickfilters a:last-child { border-right: none; }
.quickfilters a:hover { color: var(--fc-link-hover); }
.quickfilters a.on {
    background: var(--fc-panel); color: #0b1d35; text-decoration: none;
    box-shadow: inset 0 -2px 0 var(--fc-accent);
}
.find-reset { margin-left: auto; font-size: 10px; color: var(--fc-ink-soft); cursor: pointer; text-decoration: underline; }
.find-reset:hover { color: var(--fc-link-hover); }

/* A-Z browse strip */
.alpha-browse {
    margin-top: 8px; padding: 6px 8px; background: #eef2f7;
    border-top: 1px solid var(--fc-well-dk); border-left: 1px solid var(--fc-well-dk);
    border-right: 1px solid #fff; border-bottom: 1px solid #fff;
    text-align: center;
}
.alpha-label { font-size: 10px; color: var(--fc-ink-soft); margin-bottom: 3px; }
.alpha-browse a {
    display: inline-block; color: var(--fc-blue); font-weight: bold; font-size: 11px;
    text-decoration: underline; cursor: pointer; padding: 0 4px;
}
.alpha-browse a:hover { color: var(--fc-link-hover); }
.alpha-browse a.on { background: var(--fc-blue); color: #fff; text-decoration: none; }

/* directory rows */
.dir-summary { font-size: 10.5px; color: var(--fc-ink-soft); font-style: italic; margin-bottom: 7px; }
.dir-list {
    border-top: 1px solid var(--fc-well-dk); border-left: 1px solid var(--fc-well-dk);
    border-right: 1px solid #fff; border-bottom: 1px solid #fff;
    background: #fff;
}
.dir-row {
    display: grid; grid-template-columns: 68px minmax(0,1fr) 128px;
    gap: 10px; align-items: center; padding: 8px 9px;
    border-bottom: 1px solid var(--fc-rule-soft);
}
.dir-row:nth-child(even) { background: var(--fc-surface-lt); }
.dir-row:last-child { border-bottom: none; }
.dir-row:hover { background: var(--fc-surface-alt); }

.dir-thumb {
    width: 68px; height: 68px; background: #d4dae3; color: #40516b;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 18px; cursor: pointer;
    overflow: hidden; position: relative;
    border-top: 2px solid #59687d; border-left: 2px solid #59687d;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff;
}
.dir-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dir-body { min-width: 0; }
.dir-name { font-size: 12px; margin-bottom: 1px; }
.dir-name a { color: var(--fc-blue); font-weight: bold; text-decoration: underline; cursor: pointer; }
.dir-name a:hover { color: var(--fc-link-hover); }
.dir-name .handle { color: var(--fc-ink-soft); font-weight: normal; font-size: 10.5px; margin-left: 5px; }
.dir-state { font-size: 10px; margin-bottom: 2px; }
.dir-state .on { color: #197019; font-weight: bold; }
.dir-state .off { color: var(--fc-ink-soft); }
.dir-state .dot,
.mini-sub .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4caf50; margin-right: 3px; }
.dir-meta { font-size: 10.5px; color: var(--fc-ink-soft); line-height: 1.45; }
.dir-meta b { color: var(--fc-ink); }
.dir-bio {
    font-size: 10.5px; color: #4a5266; font-style: italic; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dir-action { display: flex; flex-direction: column; gap: 4px; }
.dir-action .button { margin-right: 0; width: 100%; font-size: 10px; padding: 3px 6px; text-align: center; }
.dir-selfmark { font-size: 10px; font-weight: bold; color: var(--fc-ink-soft); text-align: center; padding: 4px 0; }

.dir-empty { padding: 20px; text-align: center; color: var(--fc-ink-soft); font-size: 11px; }
.dir-empty.small { padding: 10px 4px; font-size: 10px; }
.dir-empty a { color: var(--fc-blue); font-weight: bold; text-decoration: underline; cursor: pointer; }

/* pagination */
.dir-pagination { margin-top: 9px; text-align: center; font-size: 11px; }
.dir-pagination a, .dir-pagination span {
    display: inline-block; padding: 2px 8px; margin: 0 1px;
    border: 1px solid var(--fc-canvas-line); background: var(--fc-btn-face);
    color: var(--fc-blue); font-weight: bold; text-decoration: none; cursor: pointer;
}
.dir-pagination a:hover { background: #e6eaf1; color: var(--fc-link-hover); }
.dir-pagination .pg-on { background: var(--fc-blue); color: #fff; border-color: var(--fc-blue-dark); }
.dir-pagination .pg-off { color: #a8b0bd; cursor: default; background: #eef1f5; }

/* right rail mini lists */
.mini-list { font-size: 11px; }
.mini-row {
    display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 7px;
    align-items: center; padding: 5px 0; cursor: pointer;
    border-bottom: 1px solid var(--fc-rule-soft);
}
.mini-row:last-of-type { border-bottom: none; }
.mini-thumb {
    width: 32px; height: 32px; background: #d4dae3; color: #40516b;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 11px; overflow: hidden; position: relative;
    border-top: 1px solid #59687d; border-left: 1px solid #59687d;
    border-right: 1px solid #fff; border-bottom: 1px solid #fff;
}
.mini-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mini-info { min-width: 0; }
.mini-name {
    font-size: 11px; font-weight: bold; color: var(--fc-blue); text-decoration: underline;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-sub { font-size: 9.5px; color: var(--fc-ink-soft); }
.mini-sub .on { color: #197019; font-weight: bold; }
.mini-all {
    display: block; margin-top: 6px; font-size: 10px; font-weight: bold;
    color: var(--fc-blue); text-decoration: underline; cursor: pointer;
}
.mini-all:hover { color: var(--fc-link-hover); }

/* constellation teaser */
.network-sky {
    position: relative; height: 74px; background: #070c1c; margin-bottom: 6px;
    border-top: 1px solid #050810; border-left: 1px solid #050810;
    border-right: 1px solid #5d6a82; border-bottom: 1px solid #5d6a82;
    overflow: hidden;
}
.nt-star {
    position: absolute; width: 3px; height: 3px; background: var(--fc-accent);
    box-shadow: 0 0 3px rgba(215,168,60,.9);
}
.network-teaser p { font-size: 10.5px; color: var(--fc-ink-soft); margin-bottom: 5px; line-height: 1.45; }
.network-teaser a, .explore-links a {
    display: block; font-size: 10.5px; font-weight: bold;
    color: var(--fc-blue); text-decoration: underline; cursor: pointer;
}
.explore-links a { padding: 3px 0; border-bottom: 1px solid var(--fc-rule-soft); }
.explore-links a:last-child { border-bottom: none; }
.network-teaser a:hover, .explore-links a:hover { color: var(--fc-link-hover); }

@media (max-width: 800px) {
    .dir-shell { grid-template-columns: 1fr; }
    .dir-row { grid-template-columns: 56px minmax(0,1fr); }
    .dir-action { grid-column: 1 / -1; flex-direction: row; }
    .find-form { grid-template-columns: 1fr; }
    .find-form label { text-align: left; }
}

/* Discovery - social context line (mutual friends / shared orbits) */
.dir-connection {
    margin-top: 5px; padding: 4px 7px;
    background: #eef2f9;
    border-left: 3px solid var(--fc-blue);
    font-size: 10px; color: var(--fc-ink-soft); line-height: 1.5;
}
.dir-connection b { color: var(--fc-ink); }

/* ============================================
   HOME - front page sections
   Previews link out; nothing here is an archive.
   ============================================ */
.home-more {
    border-top: 1px solid var(--fc-canvas-line);
    margin-top: 8px; padding-top: 6px; font-size: 11px;
}
.home-more a {
    color: var(--fc-blue); font-weight: bold; text-decoration: underline; cursor: pointer;
}
.home-more a:hover { color: var(--fc-link-hover); }
.home-more .more-count { color: var(--fc-ink-soft); font-weight: normal; font-size: 10px; }
.home-more .more-done { color: var(--fc-ink-soft); font-style: italic; font-size: 10px; }

/* My Corner */
.home-corner .corner-body { text-align: center; }
.corner-status {
    font-size: 10.5px; color: var(--fc-ink-soft); font-style: italic;
    margin: 3px 0 0; display: none;
}

/* Your Notices */
.notice-list { font-size: 11px; }
.notice-row {
    display: block; padding: 4px 6px; margin-bottom: 3px;
    background: #eef2f7;
    border-left: 3px solid var(--fc-accent);
    color: var(--fc-ink); text-decoration: none; cursor: pointer;
}
.notice-row:hover { background: #e2e9f4; text-decoration: underline; }
.notice-row:last-child { margin-bottom: 0; }
.notice-num { font-weight: bold; color: var(--fc-blue); margin-right: 3px; }
.notice-clear { font-size: 10.5px; color: var(--fc-ink-soft); font-style: italic; padding: 3px 0; }

/* From Your Orbits */
.orbit-post {
    padding: 6px 0; border-bottom: 1px dotted var(--fc-canvas-line);
}
.orbit-post:last-child { border-bottom: none; }
.orbit-post-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 2px;
}
.orbit-post-name {
    font-size: 10.5px; font-weight: bold; color: var(--fc-blue);
    text-decoration: underline; text-transform: uppercase; letter-spacing: .3px;
}
.orbit-post-name:hover { color: var(--fc-link-hover); }
.orbit-post-time { font-size: 9.5px; color: var(--fc-ink-soft); }
.orbit-post-body { font-size: 11px; color: var(--fc-ink); line-height: 1.5; }
.orbit-post-author {
    font-weight: bold; color: var(--fc-blue); cursor: pointer; margin-right: 4px;
}
.orbit-post-author:hover { text-decoration: underline; }

.pulse-empty {
    font-size: 10.5px; color: var(--fc-ink-soft); font-style: italic;
    padding: 8px 2px; text-align: center;
}
.pulse-empty a { color: var(--fc-blue); font-weight: bold; text-decoration: underline; }

/* Mobile: personal context, then composer, then social content.
   Rails stack rather than forcing three desktop columns. */
@media (max-width: 800px) {
    .home-personal { display: contents; }
    .home-pulse    { display: contents; }
    .home-corner    { order: 1; }
    .home-notices   { order: 2; }
    .home-feed      { order: 3; }
    .home-online    { order: 4; }
    .home-news      { order: 5; }
    .home-activity  { order: 6; }
    .home-orbits    { order: 7; }
}

/* ============================================
   CONSTELLATION
   Retro chrome around a celestial canvas.
   ============================================ */
.con-crumb {
    max-width: 1040px; margin: 0 auto; padding: 5px 10px;
    background: #f3f5f8; border-bottom: 1px solid #8c98a8;
    color: #566273; font-size: 10px;
}
.con-shell {
    max-width: 1040px; margin: 10px auto 24px; padding: 0 10px;
    display: grid; grid-template-columns: minmax(0,1fr) 225px; gap: 10px;
    align-items: start;
}
.con-main, .con-side { min-width: 0; }
.con-pad { padding: 8px 9px; }
.con-mode {
    float: right; font-weight: normal; text-transform: none;
    font-size: 9px; color: #dbe4f2; letter-spacing: 0;
}

/* toolbar */
.con-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 11px; }
.con-group { display: flex; gap: 3px; align-items: center; position: relative; }
.con-sep { width: 1px; height: 18px; background: #b6c0ce; }
.con-toolbar input[type=text] {
    font-family: Tahoma, Verdana, sans-serif; font-size: 11px; padding: 3px 6px; width: 170px;
    border-top: 1px solid var(--fc-well-dk); border-left: 1px solid var(--fc-well-dk);
    border-right: 1px solid #fff; border-bottom: 1px solid #fff;
    outline: 1px solid #aab2c0; background: #fff;
}
.button.on { background: #fff; box-shadow: inset 0 -2px 0 var(--fc-accent); }

/* search suggestions */
.con-suggest {
    display: none; position: absolute; top: 100%; left: 0; z-index: 20;
    min-width: 220px; background: #fff; border: 1px solid var(--fc-blue-dark);
}
.con-suggest a {
    display: block; padding: 4px 8px; font-size: 11px; color: var(--fc-blue);
    text-decoration: none; cursor: pointer; border-bottom: 1px solid var(--fc-rule-soft);
}
.con-suggest a:last-child { border-bottom: none; }
.con-suggest a:hover { background: var(--fc-surface-alt); color: var(--fc-link-hover); }
.con-suggest a span { color: var(--fc-ink-soft); font-size: 10px; }

/* the sky */
.con-sky {
    position: relative; height: 620px; margin-bottom: 10px;
    background: #040711;
    border-top: 2px solid #02040a; border-left: 2px solid #02040a;
    border-right: 2px solid #5d6a82; border-bottom: 2px solid #5d6a82;
    overflow: hidden;
}
.con-sky canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.con-zoom { position: absolute; right: 6px; top: 6px; display: flex; flex-direction: column; gap: 3px; }
.con-zoom .button { width: 24px; padding: 2px 0; text-align: center; margin: 0; }
.con-hud {
    position: absolute; left: 6px; bottom: 6px; color: #7f8ca8; font-size: 9.5px;
    background: rgba(4,7,17,.78); padding: 2px 6px; border: 1px solid #1d2740;
    pointer-events: none;
}
.con-focusbar {
    position: absolute; left: 6px; top: 6px; font-size: 10px; color: #cfe0ff;
    background: rgba(4,7,17,.85); padding: 3px 8px; border: 1px solid #3d4f7a;
}
.con-focusbar b { color: #ffe9a8; }
.con-focusbar a {
    color: var(--fc-accent); text-decoration: underline; cursor: pointer; margin-left: 8px;
}

/* legend */
.con-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 10px; color: var(--fc-ink-soft); align-items: center; }
.con-legend span { display: flex; align-items: center; gap: 4px; }
.con-legend .ldot { display: inline-block; border-radius: 50%; }
.con-legend .lline { display: inline-block; width: 16px; height: 2px; background: var(--fc-accent); }
.con-legend-note { font-style: italic; color: #7d879b; }

/* inspector */
.con-photo {
    width: 64px; height: 64px; margin: 0 auto 6px; background: #d4dae3; color: #40516b;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 18px; overflow: hidden; position: relative;
    border-top: 2px solid #59687d; border-left: 2px solid #59687d;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff;
}
.con-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.con-name { text-align: center; font-size: 13px; font-weight: bold; color: var(--fc-ink); }
.con-handle { text-align: center; color: var(--fc-ink-soft); font-size: 10.5px; margin-bottom: 5px; }
.con-line {
    font-size: 10.5px; color: var(--fc-ink-soft); padding: 3px 0;
    border-bottom: 1px dotted var(--fc-canvas-line); line-height: 1.45;
}
.con-line:last-of-type { border-bottom: none; }
.con-line b { color: var(--fc-ink); }
.con-on { color: #197019; font-weight: bold; }
.con-actions { margin-top: 7px; display: flex; flex-direction: column; gap: 4px; }
.con-actions .button { width: 100%; text-align: center; margin-right: 0; font-size: 10px; }
.con-empty {
    color: var(--fc-ink-soft); font-size: 10.5px; font-style: italic;
    text-align: center; padding: 14px 4px;
}

/* stats */
.con-stat {
    font-size: 10.5px; color: var(--fc-ink); padding: 3px 0; line-height: 1.45;
    border-bottom: 1px dotted var(--fc-canvas-line);
}
.con-stat:last-child { border-bottom: none; }
.con-stat b { color: var(--fc-blue); }

/* trace result */
.con-trace {
    padding: 6px 8px; background: #eef2f9; border-left: 3px solid var(--fc-accent); font-size: 11px;
}
.con-trace b { color: var(--fc-ink); }
.con-trace-bad { background: #f6eaea; border-left-color: #a33; }
.con-trace-path { margin-top: 4px; font-size: 10.5px; color: var(--fc-ink-soft); word-break: break-word; }

@media (max-width: 820px) {
    .con-shell { grid-template-columns: 1fr; }
    .con-sky { height: 420px; }
    .con-toolbar input[type=text] { width: 130px; }
}

/* ============================================
   Shared chiseled avatar (initials or photo)
   Replaces the old round purple-gradient circles.
   ============================================ */
.fc-avatar {
    background: #d4dae3; color: #40516b;
    display: flex; align-items: center; justify-content: center;
    font-family: Tahoma, Verdana, sans-serif; font-weight: bold; font-size: 15px;
    flex-shrink: 0; overflow: hidden; position: relative;
    border-top: 2px solid #59687d; border-left: 2px solid #59687d;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff;
}
.fc-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============================================
   PROFILE - interests as separate items
   ============================================ */
.detail-label {
    display: block; font-size: 10px; font-weight: bold; text-transform: uppercase;
    letter-spacing: .5px; color: var(--fc-ink-soft); margin-bottom: 4px;
}
.interest-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.interest-tag {
    display: inline-block; font-size: 10.5px; color: var(--fc-ink);
    background: #eef2f7; padding: 2px 7px;
    border-top: 1px solid #fff; border-left: 1px solid #fff;
    border-right: 1px solid #9aa4b4; border-bottom: 1px solid #9aa4b4;
}

/* ============================================
   PROFILE - Now Playing state line
   ============================================ */
.np-state {
    font-size: 9.5px; color: var(--fc-ink-soft); font-style: italic;
    margin-bottom: 3px; min-height: 12px;
}

/* ============================================
   PROFILE - background colour picker
   ============================================ */
.custom-note {
    font-size: 10.5px; color: var(--fc-ink-soft); line-height: 1.5; margin-bottom: 9px;
}
.colour-row {
    display: grid; grid-template-columns: 78px 44px 1fr;
    gap: 8px; align-items: center; margin-bottom: 6px;
}
.colour-row label { font-size: 11px; font-weight: bold; color: var(--fc-ink); }
.colour-row input[type=color] {
    width: 44px; height: 22px; padding: 0; cursor: pointer; background: #fff;
    border-top: 1px solid var(--fc-well-dk); border-left: 1px solid var(--fc-well-dk);
    border-right: 1px solid #fff; border-bottom: 1px solid #fff;
    outline: 1px solid #aab2c0;
}
.colour-hex {
    font-family: 'Courier New', monospace; font-size: 10.5px; color: var(--fc-ink-soft);
    text-transform: uppercase;
}
.colour-swatches {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    margin: 9px 0; padding-top: 8px; border-top: 1px solid var(--fc-canvas-line);
}
.swatch-label { font-size: 10px; font-weight: bold; color: var(--fc-ink-soft); margin-right: 3px; }
.swatch {
    width: 20px; height: 20px; padding: 0; cursor: pointer;
    border-top: 1px solid #fff; border-left: 1px solid #fff;
    border-right: 1px solid #596777; border-bottom: 1px solid #4c5968;
}
.swatch:active {
    border-top-color: #4c5968; border-left-color: #4c5968;
    border-right-color: #fff; border-bottom-color: #fff;
}
.colour-preview {
    height: 46px; margin-bottom: 9px;
    background: linear-gradient(180deg, var(--fc-indigo), var(--fc-header));
    border-top: 2px solid #58677b; border-left: 2px solid #58677b;
    border-right: 2px solid #f6f9fc; border-bottom: 2px solid #f6f9fc;
    display: flex; align-items: center; justify-content: center;
}
.colour-preview span {
    font-size: 10px; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: 1px;
}

/* ============================================
   PROFILE CUSTOMISATION EDITOR
   The editor itself uses site chrome, not profile theming.
   ============================================ */
.css-editor {
    font-family: 'Courier New', Courier, monospace !important;
    min-height: 210px; font-size: 12px; line-height: 1.45;
    background: #fbfcfe;
}
.css-help { margin: 8px 0 10px; }
.css-help > a {
    font-size: 11px; font-weight: bold; color: var(--fc-blue);
    text-decoration: underline; cursor: pointer;
}
.css-help > a:hover { color: var(--fc-link-hover); }
.css-help-table {
    width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 10.5px;
    background: #fff; border: 1px solid var(--fc-canvas-line);
}
.css-help-table td { padding: 3px 7px; border-bottom: 1px solid #eef1f5; }
.css-help-table tr:last-child td { border-bottom: none; }
.css-help-table td:first-child { width: 46%; }
.css-help-table code,
.css-help code {
    font-family: 'Courier New', monospace; font-size: 10.5px;
    background: #eef2f7; color: #1b3f9c; padding: 1px 4px;
    border: 1px solid #d6dce6;
}

/* theme cards: miniature profiles, not gradient swatches */
.theme-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 8px; margin-bottom: 10px;
}
.theme-card {
    cursor: pointer; background: var(--fc-panel);
    border: 1px solid var(--fc-rule); padding: 0;
}
.theme-card.selected { outline: 2px solid var(--fc-accent); }
.theme-card-name {
    font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: .4px;
    padding: 3px 6px; color: #fff;
    background: var(--fc-indigo);
}
/* the mini profile: background, a module with titlebar, a body surface */
.theme-mini { padding: 7px; }
.theme-mini-module { border-width: 1px; border-style: solid; }
.theme-mini-bar { font-size: 7px; padding: 2px 4px; font-weight: bold; letter-spacing: .3px; }
.theme-mini-body { padding: 5px 4px; display: flex; flex-direction: column; gap: 3px; }
.theme-mini-line { height: 3px; width: 80%; }
.theme-mini-line.short { width: 52%; }
.theme-mini-row { display: flex; gap: 3px; margin-top: 2px; }
.theme-mini-chip { width: 12px; height: 12px; border-width: 1px; border-style: solid; }

/* remaining profile surfaces follow the theme too */
#profilePage .profile-pic,
#profilePage .id-pic,
#profilePage .np-art {
    background: var(--profile-panel-alt);
    color: var(--profile-text);
}
#profilePage .post,
#profilePage .wall-comment {
    background: var(--profile-panel);
    border-color: var(--profile-border-dark);
}
#profilePage .form-group input,
#profilePage .form-group textarea,
#profilePage .form-group select {
    background: var(--profile-panel);
    color: var(--profile-text);
    border-top-color: var(--profile-border-dark);
    border-left-color: var(--profile-border-dark);
    border-right-color: var(--profile-border-light);
    border-bottom-color: var(--profile-border-light);
}
#profilePage .section-meta { border-bottom-color: var(--profile-border-dark); }

/* ============================================
   THEME BUILDER
   ============================================ */
.builder-scroll { max-height: 420px; overflow-y: auto; padding-right: 4px; margin-bottom: 9px; }
.builder-group {
    margin-bottom: 9px; background: #fff;
    border: 1px solid var(--fc-rule);
}
.builder-head {
    background: var(--fc-indigo);
    color: #fff; font-size: 10px; font-weight: bold; text-transform: uppercase;
    letter-spacing: .5px; padding: 3px 8px;
    border: none;
}
.builder-body { padding: 8px; }
.builder-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.builder-actions .button { margin-right: 0; }

.radio-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; font-size: 11px; }
.radio-row label { display: flex; align-items: center; gap: 4px; cursor: pointer; color: var(--fc-ink); }
.bg-opts { border-top: 1px solid var(--fc-canvas-line); padding-top: 7px; }
.builder-body select,
.builder-body input[type=text] {
    font-family: Tahoma, Verdana, sans-serif; font-size: 11px; padding: 2px 5px; width: 100%;
    border-top: 1px solid var(--fc-well-dk); border-left: 1px solid var(--fc-well-dk);
    border-right: 1px solid #fff; border-bottom: 1px solid #fff;
    outline: 1px solid #aab2c0; background: #fff;
}

/* Top 8 picker - retro rows instead of rounded gradient cards */
.friend-pick {
    display: flex; align-items: center; gap: 8px; padding: 5px 7px;
    margin-bottom: 3px; cursor: pointer; background: #fff; font-size: 11px;
    border-top: 1px solid #fff; border-left: 1px solid #fff;
    border-right: 1px solid var(--fc-panel-line); border-bottom: 1px solid var(--fc-panel-line);
}
.friend-pick:hover { background: var(--fc-surface-alt); }
.friend-pick.picked {
    background: var(--fc-panel);
    box-shadow: inset 0 0 0 1px var(--fc-accent);
}
.friend-pick.disabled { cursor: not-allowed; color: var(--fc-ink-soft); background: #f2f4f7; }

/* ============================================
   PROFILE - Interests and Orbits modules
   Old-web lists, not modern pill tags.
   ============================================ */
.interest-item,
.orbit-item {
    font-size: 11px; color: var(--profile-text, var(--fc-ink));
    padding: 2px 0; border-bottom: 1px dotted var(--profile-border-dark, var(--fc-canvas-line));
    line-height: 1.5;
}
.interest-item:last-child,
.orbit-item:last-child { border-bottom: none; }
.orbit-item a {
    color: var(--profile-link, var(--fc-blue));
    text-decoration: underline; font-weight: bold;
}

/* ============================================
   PROFILE JUKEBOX - visitor player
   ============================================ */
.np-controls { display: flex; gap: 3px; margin-top: 7px; }
.np-controls .button {
    margin-right: 0; padding: 2px 7px; font-size: 10px; flex: 1; text-align: center;
}
.np-trackline {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 7px; padding-top: 5px; font-size: 10px;
    border-top: 1px dotted var(--profile-border-dark, var(--fc-canvas-line));
    color: var(--profile-muted, var(--fc-ink-soft));
}
.np-trackline a {
    color: var(--profile-link, var(--fc-blue));
    text-decoration: underline; font-weight: bold; cursor: pointer;
}
.np-playlist {
    margin-top: 6px; max-height: 150px; overflow-y: auto;
    background: var(--profile-panel-alt, #eef2f7);
    border-top: 1px solid var(--profile-border-dark, var(--fc-well-dk));
    border-left: 1px solid var(--profile-border-dark, var(--fc-well-dk));
    border-right: 1px solid var(--profile-border-light, #fff);
    border-bottom: 1px solid var(--profile-border-light, #fff);
}
.np-track {
    display: flex; gap: 5px; padding: 3px 6px; font-size: 10px; cursor: pointer;
    color: var(--profile-text, var(--fc-ink));
    border-bottom: 1px dotted var(--profile-border-dark, var(--fc-canvas-line));
}
.np-track:last-child { border-bottom: none; }
.np-track:hover { background: var(--profile-panel, #fff); }
.np-track.current { font-weight: bold; box-shadow: inset 2px 0 0 var(--profile-accent, var(--fc-accent)); }
.np-track-n { color: var(--profile-muted, var(--fc-ink-soft)); min-width: 14px; }
.np-track-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================
   PLAYLIST MANAGER (owner panel - site chrome)
   ============================================ */
.pl-add { display: grid; grid-template-columns: 92px 1fr auto; gap: 6px; align-items: center; margin-bottom: 10px; }
.pl-add label { font-size: 11px; font-weight: bold; color: var(--fc-ink); }
.pl-add input {
    font-family: Tahoma, Verdana, sans-serif; font-size: 11px; padding: 3px 6px; width: 100%;
    border-top: 1px solid var(--fc-well-dk); border-left: 1px solid var(--fc-well-dk);
    border-right: 1px solid #fff; border-bottom: 1px solid #fff;
    outline: 1px solid #aab2c0; background: #fff;
}
.pl-add .button { margin-right: 0; }
.pl-head {
    background: var(--fc-indigo);
    color: #fff; font-size: 10px; font-weight: bold; text-transform: uppercase;
    letter-spacing: .5px; padding: 3px 8px; margin-bottom: 0;
    border: none;
}
.pl-head span { font-weight: normal; text-transform: none; color: #dbe4f2; }
.pl-list {
    background: #fff; margin-bottom: 10px;
    border-left: 1px solid var(--fc-panel-line); border-right: 1px solid var(--fc-panel-line);
    border-bottom: 1px solid var(--fc-panel-line);
}
.pl-row {
    display: grid; grid-template-columns: 20px 1fr auto; gap: 6px; align-items: center;
    padding: 4px 7px; font-size: 11px; border-bottom: 1px solid #e7eaf0;
}
.pl-row:last-child { border-bottom: none; }
.pl-row:nth-child(even) { background: var(--fc-surface-lt); }
.pl-num { color: var(--fc-ink-soft); }
.pl-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fc-ink); }
.pl-btns { display: flex; gap: 3px; }
.pl-btns .button { margin-right: 0; padding: 1px 6px; font-size: 10px; }
.pl-empty { padding: 14px; text-align: center; color: var(--fc-ink-soft); font-size: 11px; font-style: italic; }
.pl-settings {
    background: #fff; padding: 7px 8px; margin-bottom: 10px;
    border-left: 1px solid var(--fc-panel-line); border-right: 1px solid var(--fc-panel-line);
    border-bottom: 1px solid var(--fc-panel-line);
}
.pl-settings label { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 2px 0; cursor: pointer; }
.pl-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.pl-actions .button { margin-right: 0; }

/* ============================================
   BLOCKING - reduced interaction states
   ============================================ */
.block-notice {
    padding: 8px 10px; margin: 0 10px;
    background: #f0d9d9;
    border-top: 1px solid #fff; border-left: 1px solid #fff;
    border-right: 1px solid #a06060; border-bottom: 1px solid #a06060;
    font-size: 11px; color: #6d1220; line-height: 1.5;
}
.blocked-list-row {
    display: grid; grid-template-columns: 36px 1fr auto;
    gap: 8px; align-items: center; padding: 5px 7px; font-size: 11px;
    border-bottom: 1px solid #e7eaf0;
}
.blocked-list-row:last-child { border-bottom: none; }
.blocked-list-row .button { margin-right: 0; font-size: 10px; padding: 2px 8px; }

/* ============================================
   REPORTING - shared modal
   ============================================ */
.report-overlay {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(5, 9, 20, 0.72);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.report-dialog {
    width: 100%; max-width: 380px; background: #fff;
    border: 1px solid var(--fc-rule);
}
.report-title {
    background: var(--fc-oxblood);
    color: #FBEFF2; font-family: Verdana, Arial, sans-serif; font-size: 11px; font-weight: bold;
    padding: 5px 9px; border: none;
}
.report-body { padding: 10px; }
.report-subject { font-size: 11px; color: var(--fc-ink-soft); margin-bottom: 8px; }
.report-label {
    display: block; font-size: 11px; font-weight: bold; color: var(--fc-ink);
    margin: 8px 0 3px;
}
.report-label span { font-weight: normal; color: var(--fc-ink-soft); }
.report-dialog select,
.report-dialog textarea {
    width: 100%; font-family: Tahoma, Verdana, sans-serif; font-size: 11px; padding: 4px 6px;
    border-top: 1px solid var(--fc-well-dk); border-left: 1px solid var(--fc-well-dk);
    border-right: 1px solid #fff; border-bottom: 1px solid #fff;
    outline: 1px solid #aab2c0; background: #fff;
}
.report-dialog textarea { min-height: 74px; resize: vertical; }
.report-note {
    font-size: 10px; color: var(--fc-ink-soft); line-height: 1.5; margin-top: 8px;
    border-top: 1px dotted var(--fc-canvas-line); padding-top: 6px;
}
.report-actions {
    padding: 8px 10px; background: var(--fc-panel);
    border-top: 1px solid var(--fc-panel-line);
    display: flex; gap: 4px;
}
.report-actions .button { margin-right: 0; }

/* small textual actions under posts and comments */
.post-actions {
    margin-top: 5px; padding-top: 4px; font-size: 10px;
    border-top: 1px dotted var(--fc-canvas-line);
    display: flex; gap: 10px;
}
.post-action {
    color: var(--fc-blue); font-weight: bold; text-decoration: underline; cursor: pointer;
}
.post-action:hover { color: var(--fc-link-hover); }
.post-action.danger { color: #8c2f2f; }
.msg-report {
    font-size: 9px; color: var(--fc-ink-soft); text-decoration: underline;
    cursor: pointer; margin-left: 6px;
}
.msg-report:hover { color: #8c2f2f; }

/* ============================================
   ADMIN - moderation queue
   ============================================ */
.report-badge {
    display: inline-block; margin-left: 5px; padding: 0 5px;
    background: #8c2f2f; color: #fff; font-size: 10px; font-weight: bold;
    border: 1px solid #5a1414;
}
.report-badge.hidden { display: none; }
.report-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
    padding: 5px 7px; margin-bottom: 9px; background: var(--fc-panel);
    border-top: 1px solid var(--fc-rule-soft); border-left: 1px solid var(--fc-rule-soft);
    border-right: 1px solid var(--fc-rule); border-bottom: 1px solid var(--fc-rule);
    font-size: 11px;
}
.report-filter-label { font-weight: bold; color: var(--fc-ink); margin-right: 4px; }
.report-filter {
    color: var(--fc-blue); font-weight: bold; text-decoration: underline;
    cursor: pointer; padding: 2px 8px; border-right: 1px solid #b6c0ce;
}
.report-filter:last-of-type { border-right: none; }
.report-filter:hover { color: var(--fc-link-hover); }
.report-filter.on {
    background: #fff; color: #0b1d35; text-decoration: none;
    box-shadow: inset 0 -2px 0 var(--fc-accent);
}
.report-counts { margin-left: auto; font-size: 10px; color: var(--fc-ink-soft); }
.report-status {
    display: inline-block; padding: 1px 6px; font-size: 10px; font-weight: bold;
    text-transform: uppercase; letter-spacing: .3px; border: 1px solid;
}
.report-status-open      { background: #f6e7e7; color: #6d1220; border-color: #b08080; }
.report-status-reviewing { background: #fdf3dd; color: #7a5c12; border-color: #c9ac6a; }
.report-status-resolved  { background: #e6f2e6; color: #1d5c1d; border-color: #86ad86; }
.report-status-dismissed { background: #eef1f5; color: #5d6580; border-color: #aab2c0; }
.report-detail-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.report-detail-table th {
    text-align: left; width: 130px; padding: 4px 8px 4px 0; vertical-align: top;
    color: var(--fc-ink-soft); font-weight: bold;
    border-bottom: 1px dotted var(--fc-canvas-line);
}
.report-detail-table td {
    padding: 4px 0; vertical-align: top; color: var(--fc-ink);
    border-bottom: 1px dotted var(--fc-canvas-line);
}
.report-snapshot {
    background: var(--fc-surface-lt); padding: 6px 8px; font-size: 10.5px; line-height: 1.5;
    border-left: 3px solid var(--fc-blue); white-space: pre-wrap; word-break: break-word;
}

/* ============================================================
   LOCAL SECTION TREATMENTS
   ============================================================
   The point of this block: unrelated sections should NOT look
   like the same component instantiated nine times.

   These hooks use the purpose-named classes the pages already
   carry (home-corner, home-notices, profile-interests, ...), so
   nothing in the markup or the JavaScript has to change.
   ============================================================ */

/* ---------- HOME ---------- */

/* My Corner: the one genuinely prominent personal panel. */
.home-corner { background: var(--fc-surface-lt); border: 1px solid #6E5A72; }
.home-corner h3 { background: var(--fc-header); color: #F3E9F3; font-size: 12px; }

/* Your Notices: warm bronze utility strip. */
.home-notices { border-color: #B69A63; }
.home-notices h3 { background: var(--fc-bronze); color: #241226; }

/* My Orbits: barely a panel at all - a heading, a rule, a list. */
.home-orbits { background: none; border: none; padding-bottom: 4px; }
.home-orbits h3 {
    background: none; color: var(--fc-ink); font-size: 12px;
    padding: 0 0 3px 0; margin-bottom: 6px;
    border-bottom: 2px solid var(--fc-rule);
}
.home-orbits > *:not(h3) { padding-left: 0; padding-right: 0; }

/* Post an Update: a utility/form region, not elevated content. */
.home-composer { background: var(--fc-surface-alt); border: 1px solid var(--fc-rule); }
.home-composer h3 {
    background: none; color: var(--fc-ink-soft); font-size: 11px;
    padding: 5px 9px 3px; margin-bottom: 4px;
    border-bottom: 1px solid var(--fc-rule);
}

/* Recent From Friends: flat feed, posts separated by rules only. */
.home-friend-posts { background: var(--fc-surface-lt); border: 1px solid var(--fc-rule); }
.home-friend-posts h3 { background: var(--fc-violet); color: #F4EEF8; }

/* From Your Orbits: same family, different hue. */
.home-orbit-posts h3 { background: var(--fc-indigo); color: #EDECF4; }

/* Site News: deep indigo. */
.home-news h3 { background: var(--fc-indigo); color: #EDECF4; }

/* Friends Online: heading + rule + list, no container. */
.home-online { background: none; border: none; padding-bottom: 4px; }
.home-online h3 {
    background: none; color: var(--fc-ink); font-size: 12px;
    padding: 0 0 3px 0; margin-bottom: 6px;
    border-bottom: 2px solid var(--fc-rule);
}
.home-online > *:not(h3) { padding-left: 0; padding-right: 0; }

/* Recent Activity: oxblood. */
.home-activity h3 { background: var(--fc-oxblood); color: #FBEFF2; }

/* Posts: separated by a rule, not boxed. */
.post {
    background: none;
    border: none;
    border-bottom: 1px solid var(--fc-rule-soft);
    border-left: none;
    padding: 9px 2px;
    margin: 0;
}
.post:last-child { border-bottom: none; }
.post-author-name { color: var(--fc-link); font-weight: bold; }
.post-date { color: var(--fc-ink-soft); font-size: 10px; }
.post-avatar {
    background: var(--fc-violet); color: #fff; border: 1px solid #2A1A36;
}

/* ---------- PROFILE CHROME ---------- */
/* Only the SITE-side chrome is restyled here. Everything inside
   #profilePage still runs on the theme variables, so the Theme
   Builder and user CSS keep full control. */
.profile-owner-bar .profile-bar-inner {
    background: var(--fc-nav);
    border: 1px solid #1A0C16;
}
.profile-owner-bar .profile-bar-label { color: #C9B2C6; }
.profile-owner-bar a { color: #E7D9E7; }
.profile-owner-bar a:hover { color: #fff; }

.profile-safety-bar .profile-bar-inner {
    background: #3A1622;
    border: 1px solid #1B0910;
}
.profile-safety-bar .profile-bar-label { color: #D5A9B5; }
.profile-safety-bar a { color: #F0CBD5; }
.profile-safety-bar a:hover { color: #fff; }

/* ---------- DEFAULT PROFILE THEME ---------- */
/* Repointed to the nocturnal palette. These are only DEFAULTS: every
   one is a CSS variable a user theme or custom CSS can still override. */
#profilePage {
    --profile-bg:            #1B1522;
    --profile-panel:         #ECECEF;
    --profile-panel-alt:     #D1D2D8;
    --profile-header:        #2E2948;
    --profile-header-text:   #EDECF4;
    --profile-header-rail:   #2E2948;
    --profile-header-base:   #1C1830;
    --profile-text:          #242126;
    --profile-muted:         #5E5A63;
    --profile-link:          #54346C;
    --profile-accent:        #9A7438;
    --profile-border-light:  #FFFFFF;
    --profile-border-dark:   #B9BAC2;
    --profile-outline:       #B9BAC2;
    --profile-button:        #D8D8DE;
    --profile-button-text:   #2A2430;
}

/* Profile modules go flat too, but keep consuming theme variables. */
#profilePage .card {
    border: 1px solid var(--profile-border-dark);
    outline: none;
    padding: 0 0 9px;
}
#profilePage .card h3 {
    background: var(--profile-header);
    border: none;
    text-shadow: none;
    font-family: Verdana, Arial, sans-serif;
    letter-spacing: 0;
}

/* NOTE: profile modules deliberately do NOT get per-section heading
   colours. The site-owned pages vary their headings because the site
   authored them; a profile is the user's room, and its headings are
   driven entirely by --profile-header so the Theme Builder and custom
   CSS keep complete control. Hard-coding a colour here would silently
   override a user's chosen theme. Variation on a profile is the user's
   decision to make, not ours. */

/* ---------- SHARED ODDS AND ENDS ---------- */
.section-meta a, .section-more a, .home-more a, .mini-all {
    color: var(--fc-link); font-weight: bold; text-decoration: underline;
}
.section-meta a:hover, .section-more a:hover, .home-more a:hover { color: var(--fc-link-hover); }

/* Tabs: the one navigational control that may look pressed. */
.admin-tab, .theme-tab {
    background: var(--fc-surface-alt);
    border: 1px solid var(--fc-rule);
    border-bottom: none;
    color: var(--fc-ink-soft);
    font-weight: bold;
}
.admin-tab.active, .theme-tab.active {
    background: var(--fc-surface-lt);
    color: var(--fc-ink);
    border-bottom: 2px solid var(--fc-bronze);
}

/* ============================================
   PAGE WIDTH
   Declared last so it overrides the older per-page shell widths.
   Every page shell lines up with the masthead above it.
   ============================================ */
.container,
.home-shell, .profile-shell, .dir-shell, .con-shell,
.dir-crumb, .con-crumb,
.profile-owner-bar, .profile-safety-bar, #ownerPanels {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}
.home-shell, .profile-shell, .dir-shell, .con-shell { margin-top: 0; }

/* ============================================================
   LOCAL TREATMENTS - remaining pages
   Same principle as Home: neighbouring sections should not all
   wear the same heading. Positional selectors are used where a
   section has no purpose-named class, so no markup changes.
   ============================================================ */

/* ---------- DISCOVERY ---------- */
/* Purpose-named, so reordering a section cannot reshuffle its colour. */
.fc-find h3        { background: var(--fc-header);  color: #F3E9F3; }
.fc-members h3     { background: var(--fc-violet);  color: #F4EEF8; }
.fc-online h3      { background: var(--fc-indigo);  color: #EDECF4; }
.fc-new-members h3 { background: var(--fc-bronze);  color: #241226; }
.fc-network h3     { background: var(--fc-oxblood); color: #FBEFF2; }

/* A bare heading over a rule, with no panel - some things are just links. */
.fc-explore, .fc-my-orbits {
    background: none;
    border: none;
}
.fc-explore h3, .fc-my-orbits h3 {
    background: none; color: var(--fc-ink); font-size: 12px;
    padding: 0 0 3px 0; margin-bottom: 6px;
    border-bottom: 2px solid var(--fc-rule);
}
.fc-explore > *:not(h3),
.fc-my-orbits > *:not(h3) { padding-left: 0; padding-right: 0; }

/* directory rows: a listing, not a stack of cards */
.dir-list { border: 1px solid var(--fc-rule); background: var(--fc-surface-lt); }
.dir-row {
    border-bottom: 1px solid var(--fc-rule-soft);
    border-left: none;
    background: none;
}
.dir-row:nth-child(even) { background: #E7E7EB; }
.dir-row:hover { background: #DEDEE4; }
.dir-thumb, .mini-thumb, .top8-thumb, .fc-avatar, .friendpic {
    border: 1px solid var(--fc-rule);
    background: var(--fc-surface-alt);
    color: var(--fc-ink-soft);
}
.dir-toolbar, .find-row, .report-filters {
    background: var(--fc-surface-alt);
    border: 1px solid var(--fc-rule);
}
.alpha-browse { background: var(--fc-surface-alt); border: 1px solid var(--fc-rule); }
.quickfilters a.on, .dir-filters a.on, .report-filter.on, .alpha-browse a.on {
    background: var(--fc-violet); color: #F4EEF8; box-shadow: none; text-decoration: none;
}

/* ---------- FRIENDS / NOTIFICATIONS / ORBITS ---------- */
.fc-requests h3      { background: var(--fc-oxblood); color: #FBEFF2; }
.fc-friendlist h3    { background: var(--fc-violet);  color: #F4EEF8; }
.fc-notifications h3 { background: var(--fc-header);  color: #F3E9F3; }
.fc-stats h3         { background: var(--fc-bronze);  color: #241226; }
.fc-create h3        { background: var(--fc-bronze);  color: #241226; }
.fc-all-orbits h3    { background: var(--fc-indigo);  color: #EDECF4; }

/* "My Corner"-style personal panel, wherever it appears. */
.fc-me { background: var(--fc-surface-lt); border: 1px solid #6E5A72; }
.fc-me h3 { background: var(--fc-header); color: #F3E9F3; }

/* ---------- MESSAGES ---------- */
.msg-bubble {
    border: 1px solid var(--fc-rule);
    background: var(--fc-surface-lt);
}
.msg-sent .msg-bubble {
    background: var(--fc-violet); color: #F4EEF8; border-color: #3F2752;
}
.msg-recv .msg-bubble { background: var(--fc-surface-lt); color: var(--fc-ink); }

/* ---------- ADMIN ---------- */
.admin-table th {
    background: var(--fc-indigo); color: #EDECF4;
    border: none; font-weight: bold; font-size: 11px;
}
.admin-table td { border-bottom: 1px solid var(--fc-rule-soft); }
.admin-table tr:nth-child(even) td { background: #E7E7EB; }
.stat-box { background: var(--fc-surface-alt); border: 1px solid var(--fc-rule); }
.stat-number { color: var(--fc-indigo); }
.stat-label { color: var(--fc-ink-soft); }

/* ---------- CONSTELLATION SURROUND ---------- */
/* The graph canvas itself is untouched; only its frame. */
.con-sky { border: 1px solid #05060C; background: #070912; }
.con-toolbar { background: var(--fc-surface-alt); border: 1px solid var(--fc-rule); }
.fc-constellation h3  { background: var(--fc-header);  color: #F3E9F3; }
.fc-legend h3         { background: var(--fc-surface-alt); color: var(--fc-ink); }
.fc-inspector h3      { background: var(--fc-indigo);  color: #EDECF4; }
.fc-network-stats h3  { background: var(--fc-bronze);  color: #241226; }

/* ---------- NEWS ---------- */
.news-item { border: 1px solid var(--fc-rule); background: var(--fc-surface-lt); }
.news-item-title { color: var(--fc-indigo); }

/* ============================================
   LOGIN / REGISTER
   The one page with no masthead, so the identity has to live in
   the panel itself: an aubergine band with the bronze star.
   ============================================ */
.auth-container .card {
    background: var(--fc-surface-lt);
    border: 1px solid #05060C;
    padding-bottom: 0;
    overflow: hidden;
}
.auth-wordmark {
    background: var(--fc-header);
    color: #F2ECF2;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 25px;
    letter-spacing: .4px;
    text-align: center;
    margin: 0;
    padding: 16px 14px 4px;
}
.auth-wordmark .star { color: var(--fc-bronze); margin-right: 7px; font-size: 20px; }
.auth-tagline {
    background: var(--fc-header);
    color: #B9A5B8;
    font-family: Georgia, serif; font-style: italic; font-size: 11px;
    text-align: center;
    margin: 0;
    padding: 0 14px 14px;
    border-bottom: 2px solid var(--fc-bronze);
}
.auth-container .auth-tabs { margin: 0; padding: 0; display: flex; }
.auth-container .auth-tab {
    flex: 1; padding: 7px 0; cursor: pointer;
    background: var(--fc-surface-alt);
    border: none; border-bottom: 1px solid var(--fc-rule);
    font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold;
    color: var(--fc-ink-soft);
}
.auth-container .auth-tab.active {
    background: var(--fc-surface-lt);
    color: var(--fc-ink);
    border-bottom: 2px solid var(--fc-bronze);
}
.auth-container .form-group { padding: 0 16px; margin-top: 12px; }
.auth-container .button { margin: 12px 16px 18px; width: calc(100% - 32px); }
.auth-container .message { margin: 10px 16px 0; }

/* The generic .card child padding must not apply here - this panel
   manages its own spacing, and it was pushing the button off-edge. */
/* The buttons carry an inline width:100%, so give them a padded
   wrapper instead of fighting the inline style. */
.auth-container .card > *:not(h3) { padding-left: 16px; padding-right: 16px; }
.auth-container .button { margin: 12px 0 18px; }
.auth-container .auth-tabs { padding-left: 0 !important; padding-right: 0 !important; }
.auth-container .auth-wordmark,
.auth-container .auth-tagline { padding-left: 14px !important; padding-right: 14px !important; }
/* Site chrome always paints above the customisable profile region, so a
   profile stylesheet can never cover navigation or safety controls. */
.top-nav, .profile-owner-bar, .profile-safety-bar { position: relative; z-index: 10; }

/* Long song titles: grid and flex children default to "never narrower than
   my content", so a long unbroken title pushed past the card. Let the title
   column shrink and end in an ellipsis; the full title is on hover. */
.np-module { grid-template-columns: 40px minmax(0, 1fr); }
.np-info, .np-track-t, .pl-title { min-width: 0; }
.pl-row { grid-template-columns: 20px minmax(0, 1fr) auto; }
.np-track-t { flex: 1 1 auto; }

/* Photo tiles in a row share the tallest tile's height. Let the caption
   fill that space (instead of leaving an empty band under a short one), and
   cap captions at three lines so one long caption cannot stretch a row. */
.photo-item { display: flex; flex-direction: column; }
.photo-caption {
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
    overflow: hidden;
}

/* Photo viewer: the image stays centred whatever the caption length. A long
   caption wraps at a readable width (and scrolls if very long) instead of
   widening the viewer and pushing the image to one side. */
.photo-modal-content { display: flex; flex-direction: column; align-items: center; }
.photo-modal-img { display: block; }
.photo-modal-info {
    text-align: center; color: #fff; margin-top: 20px; padding: 0 20px;
    width: min(90vw, 640px); box-sizing: border-box;
}
.photo-modal-info p {
    font-size: 18px; margin: 0 0 10px;
    overflow-wrap: anywhere; max-height: 22vh; overflow-y: auto;
}

/* Settings page: plain rows of label + value, matching the rest of the site. */
.settings-row {
    display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px;
    padding: 5px 0; border-bottom: 1px solid var(--fc-panel-line); font-size: 12px;
}
.settings-label { color: var(--fc-ink-soft); }
.settings-value { color: var(--fc-ink); overflow-wrap: anywhere; }
.settings-note { font-size: 11px; color: var(--fc-ink-soft); margin: 6px 0 14px; }
.settings-notice {
    border: 1px solid var(--fc-rule); background: var(--fc-surface-alt);
    padding: 8px 10px; margin: 10px 0; font-size: 12px;
}
.settings-notice strong { display: block; margin-bottom: 3px; }
.settings-notice p { margin: 0; color: var(--fc-ink-soft); font-size: 11px; }
.settings-check { display: flex; align-items: center; gap: 7px; font-weight: normal; text-align: left; }
.settings-check input { width: auto; margin: 0; }

/* ---- registration form note ---- */
.field-note {
    margin: 4px 0 0; font-size: 11px; color: var(--fc-ink-soft); text-align: left;
}

/* ---- legacy-account email reminder ----
   A notice strip under the nav bar. It never covers the page, never takes
   focus, and disappears once an address is on file. */
.email-reminder {
    border-bottom: 1px solid var(--fc-rule);
    background: var(--fc-surface-alt);
}
.email-reminder-inner {
    max-width: 1100px; margin: 0 auto; padding: 8px 12px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 12px;
}
.email-reminder-inner strong { font-size: 12px; }
.email-reminder-inner p { margin: 0; flex: 1 1 260px; color: var(--fc-ink-soft); font-size: 11px; }
.email-reminder-inner .button { flex: 0 0 auto; padding: 3px 10px; font-size: 11px; width: auto; }

/* ============================================
   LEGAL / HELP PAGES AND SITE FOOTER
   Ordinary site furniture: same surfaces, same rules, no new
   visual language. Documents are read, not scanned, so these
   pages run a single wider column with generous prose spacing.
   ============================================ */
.doc-head {
    max-width: 980px; margin: 0 auto;
    background: var(--fc-header);
    border-left: 1px solid #05060C; border-right: 1px solid #05060C;
    padding: 10px 12px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.doc-head .doc-logo {
    color: #fff; font-size: 17px; font-weight: bold; letter-spacing: .3px; cursor: pointer;
}
.doc-head .doc-logo .star { color: var(--fc-accent); margin-right: 5px; }
.doc-head a { color: #d8cfe0; font-size: 11px; }
.doc-crumb {
    max-width: 980px; margin: 0 auto; padding: 4px 10px;
    background: var(--fc-surface-alt);
    border-left: 1px solid #05060C; border-right: 1px solid #05060C;
    border-bottom: 1px solid var(--fc-rule);
    color: var(--fc-ink-soft); font-size: 10px;
}
.doc-shell {
    max-width: 980px; margin: 0 auto 24px; padding: 10px;
    background: var(--fc-surface);
    border-left: 1px solid #05060C; border-right: 1px solid #05060C;
    border-bottom: 1px solid #05060C;
}
.doc-body { padding: 4px 12px 10px; }
.doc-body h4 {
    margin: 16px 0 5px; font-size: 12px; color: var(--fc-oxblood);
    border-bottom: 1px solid var(--fc-rule-soft); padding-bottom: 2px;
}
.doc-body h4:first-child { margin-top: 6px; }
.doc-body p { margin: 0 0 8px; font-size: 12px; }
.doc-body ul { margin: 0 0 8px; padding-left: 20px; font-size: 12px; }
.doc-body li { margin-bottom: 2px; }
.doc-updated {
    font-size: 11px; color: var(--fc-ink-soft); font-style: italic;
    margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--fc-rule-soft);
}
.doc-note {
    border: 1px solid var(--fc-rule); background: var(--fc-surface-alt);
    padding: 8px 10px; margin: 10px 0; font-size: 11px;
}
.doc-note strong { display: block; margin-bottom: 3px; font-size: 12px; }
.doc-note p { margin: 0; font-size: 11px; }
.doc-index { list-style: none; padding: 0; margin: 0; }
.doc-index li { border-bottom: 1px solid var(--fc-rule-soft); padding: 8px 2px; margin: 0; }
.doc-index li:last-child { border-bottom: none; }
.doc-index a { font-size: 13px; font-weight: bold; }
.doc-index span { display: block; color: var(--fc-ink-soft); font-size: 11px; margin-top: 2px; }

/* ---- site footer ---- */
.site-footer {
    max-width: 980px; margin: 0 auto 30px; padding: 7px 12px;
    background: var(--fc-header);
    border-left: 1px solid #05060C; border-right: 1px solid #05060C;
    border-bottom: 1px solid #05060C;
    text-align: center; font-size: 10px; color: #b3a8bb;
}
.site-footer a { color: #d8cfe0; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-sep { color: #6b5d73; margin: 0 5px; }
.site-footer .footer-line { margin-top: 3px; color: #8d8194; }

/* ---- registration legal acknowledgment ---- */
.reg-legal {
    display: flex; align-items: flex-start; gap: 7px;
    font-size: 11px; text-align: left; margin: 10px 0 12px;
    color: var(--fc-ink-soft); font-weight: normal;
}
.reg-legal input { width: auto; margin: 2px 0 0; flex: 0 0 auto; }