/* ============================================================
   40kArt design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
    /* Brand */
    --fk-blue: #2563eb;
    --fk-blue-dark: #1d4ed8;
    --fk-blue-light: #eaf1ff;

    /* Surfaces */
    --fk-bg: #f4f6f9;
    --fk-card: #ffffff;
    --fk-border: #e5e7eb;
    --fk-border-strong: #d1d5db;

    /* Text */
    --fk-text: #0f172a;
    --fk-text-muted: #64748b;
    --fk-text-faint: #94a3b8;

    /* Status */
    --fk-green: #22c55e;
    --fk-green-light: #dcfce7;
    --fk-yellow: #eab308;
    --fk-red: #dc2626;
    --fk-red-light: #fef2f2;
    --fk-gray: #9ca3af;

    /* Scale */
    --fk-radius-sm: 6px;
    --fk-radius: 12px;
    --fk-radius-lg: 16px;
    --fk-shadow-sm: 0 1px 2px rgba(15,23,42,.04);
    --fk-shadow: 0 4px 16px rgba(15,23,42,.06);
    --fk-shadow-lg: 0 12px 32px rgba(15,23,42,.12);
}

*{box-sizing:border-box;}
body{
    background:var(--fk-bg);
    color:var(--fk-text);
    font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin:0;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
a{color:var(--fk-blue); text-decoration:none; transition:color .15s ease;}
a:hover{color:var(--fk-blue-dark); text-decoration:underline;}
img,video{max-width:100%; display:block;}
h1,h2,h3{font-weight:800; letter-spacing:-.02em; margin:0;}
::selection{background:var(--fk-blue-light);}

.fk-container{max-width:1400px; margin:0 auto; padding:0 20px;}
.fk-muted{color:var(--fk-text-muted);}
.fk-faint{color:var(--fk-text-faint); font-size:13px;}

/* ---------- Top bar ---------- */
.fk-topbar{
    display:flex; align-items:center; gap:16px;
    padding:14px 24px; background:var(--fk-card); border-bottom:1px solid var(--fk-border);
    position:sticky; top:0; z-index:100;
    box-shadow:var(--fk-shadow-sm);
}
.fk-logo{
    font-weight:800; font-size:19px; display:flex; align-items:center; gap:8px; white-space:nowrap;
    color:var(--fk-text); letter-spacing:-.02em;
}
.fk-logo:hover{color:var(--fk-text); text-decoration:none;}
.fk-search{flex:1; display:flex; max-width:640px;}
.fk-search input{
    flex:1; padding:10px 16px; border:1.5px solid var(--fk-border); border-radius:10px 0 0 10px;
    font-size:14px; outline:none; font-family:inherit; transition:border-color .15s ease;
}
.fk-search input:focus{border-color:var(--fk-blue);}
.fk-search button{
    background:var(--fk-blue); color:#fff; border:none; padding:0 22px; border-radius:0 10px 10px 0;
    font-weight:700; cursor:pointer; font-size:13px; letter-spacing:.02em; transition:background .15s ease;
}
.fk-search button:hover{background:var(--fk-blue-dark);}
.fk-topbar-right{display:flex; align-items:center; gap:14px; margin-left:auto;}
.fk-bell{position:relative; cursor:pointer; color:var(--fk-text-muted); font-size:18px; display:flex;}
.fk-bell:hover{color:var(--fk-text);}
.fk-dot{position:absolute; top:-2px; right:-2px; width:9px; height:9px; background:var(--fk-red); border-radius:50%; border:2px solid var(--fk-card);}

/* ---------- Avatar + presence ---------- */
.fk-avatar{
    position:relative; width:34px; height:34px; border-radius:50%;
    background:linear-gradient(135deg, var(--fk-blue), #7c3aed);
    color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
    font-size:14px;
}
.fk-avatar img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.fk-presence-dot{position:absolute; bottom:-1px; right:-1px; width:11px; height:11px; border-radius:50%; border:2px solid var(--fk-card);}
.fk-presence-online{background:var(--fk-green);}
.fk-presence-away{background:var(--fk-yellow);}
.fk-presence-invisible,.fk-presence-offline{background:var(--fk-gray);}

.fk-account-btn{display:flex; align-items:center; gap:9px; cursor:pointer; padding:5px 12px 5px 5px; border-radius:24px; position:relative; transition:background .15s ease;}
.fk-account-btn:hover{background:var(--fk-bg);}
.fk-account-name{font-weight:600; font-size:14px; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ---------- Buttons ---------- */
.fk-btn{
    background:#fff; border:1.5px solid var(--fk-border); padding:9px 18px; border-radius:9px;
    font-weight:600; font-size:14px; cursor:pointer; font-family:inherit; color:var(--fk-text);
    display:inline-flex; align-items:center; gap:6px; transition:all .15s ease; text-decoration:none;
}
.fk-btn:hover{border-color:var(--fk-border-strong); background:var(--fk-bg); text-decoration:none; color:var(--fk-text);}
.fk-btn-primary{background:var(--fk-blue); color:#fff; border-color:var(--fk-blue);}
.fk-btn-primary:hover{background:var(--fk-blue-dark); border-color:var(--fk-blue-dark); color:#fff;}
.fk-btn-danger{color:var(--fk-red); border-color:#fecaca;}
.fk-btn-danger:hover{background:var(--fk-red-light); border-color:var(--fk-red); color:var(--fk-red);}
.fk-btn-sm{padding:6px 12px; font-size:13px; border-radius:7px;}
.fk-btn-block{width:100%; justify-content:center;}
.fk-btn:disabled{opacity:.5; cursor:default;}

/* ---------- Dropdown ---------- */
.fk-dropdown{
    position:absolute; top:56px; right:20px; width:290px; max-width:calc(100vw - 40px); background:var(--fk-card);
    border:1px solid var(--fk-border); border-radius:var(--fk-radius); box-shadow:var(--fk-shadow-lg);
    z-index:200; overflow:hidden;
    max-height:calc(100vh - 80px); display:none; flex-direction:column;
}
.fk-dropdown.open{display:flex; animation:fk-fade-in .12s ease;}
.fk-dropdown-scroll{overflow-y:auto; flex:1; min-height:0;}
@keyframes fk-fade-in{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);}}
.fk-dropdown-head{padding:16px; border-bottom:1px solid var(--fk-border);}
.fk-dropdown-head .name{font-weight:700; font-size:15px;}
.fk-dropdown-head .handle{color:var(--fk-text-muted); font-size:13px;}
.fk-dropdown-head .role{color:var(--fk-blue); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-top:5px;}
.fk-dropdown-section{padding:6px 0;}
.fk-dropdown-section + .fk-dropdown-section{border-top:1px solid var(--fk-border);}
.fk-dropdown-label{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--fk-text-faint); font-weight:700; padding:8px 16px 4px;}
.fk-dropdown a, .fk-dropdown button.fk-drop-item{
    display:flex; align-items:center; gap:10px; padding:9px 16px; font-size:14px; color:var(--fk-text);
    width:100%; text-align:left; background:none; border:none; cursor:pointer; font-family:inherit;
}
.fk-dropdown a:hover, .fk-dropdown button.fk-drop-item:hover{background:var(--fk-bg); text-decoration:none;}
.fk-drop-item.danger{color:var(--fk-red);}

.fk-presence-picker{padding:6px 0;}
.fk-presence-option{display:flex; gap:10px; padding:9px 16px; cursor:pointer; align-items:flex-start; transition:background .1s ease;}
.fk-presence-option:hover{background:var(--fk-bg);}
.fk-presence-option .dot{width:11px; height:11px; border-radius:50%; margin-top:5px; flex-shrink:0;}
.fk-presence-option .title{font-weight:600; font-size:14px; display:flex; align-items:center; gap:6px;}
.fk-presence-option .desc{font-size:12px; color:var(--fk-text-muted);}
.fk-presence-option .check{margin-left:auto; color:var(--fk-blue); font-weight:700;}

/* ---------- Layout ---------- */
.fk-layout{display:grid; grid-template-columns:240px 1fr 280px; gap:0; align-items:start;}
.fk-layout.fk-no-friends{grid-template-columns:240px 1fr;}
.fk-sidebar,.fk-friends-rail{padding:22px 20px; position:sticky; top:65px; max-height:calc(100vh - 65px); overflow-y:auto;}
.fk-sidebar{border-right:1px solid var(--fk-border);}
.fk-friends-rail{border-left:1px solid var(--fk-border);}
.fk-main{padding:22px 24px; min-width:0;}

.fk-side-heading{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--fk-text-faint); font-weight:700; margin:20px 0 10px;}
.fk-side-heading:first-child{margin-top:0;}
.fk-side-nav a{display:block; padding:9px 12px; border-radius:8px; color:var(--fk-text); font-size:14px; font-weight:500;}
.fk-side-nav a:hover{background:var(--fk-bg); text-decoration:none;}
.fk-side-nav a.active{background:var(--fk-blue-light); color:var(--fk-blue); font-weight:700;}
.fk-upload-btn{
    display:flex; align-items:center; justify-content:center; gap:6px;
    background:var(--fk-blue); color:#fff; padding:11px; border-radius:10px; font-weight:700; margin:14px 0;
    box-shadow:0 2px 8px rgba(37,99,235,.25); transition:all .15s ease;
}
.fk-upload-btn:hover{background:var(--fk-blue-dark); color:#fff; text-decoration:none; transform:translateY(-1px);}

.fk-tag-input{display:flex; gap:6px;}
.fk-tag-input input{flex:1; padding:9px 12px; border:1.5px solid var(--fk-border); border-radius:8px; font-size:13px; font-family:inherit;}
.fk-tag-input input:focus{outline:none; border-color:var(--fk-blue);}
.fk-tag-autocomplete-results{
    display:none; position:absolute; left:0; right:0; top:calc(100% + 4px); background:var(--fk-card);
    border:1px solid var(--fk-border); border-radius:10px; box-shadow:var(--fk-shadow-lg);
    max-height:280px; overflow-y:auto; z-index:60;
}
.fk-tag-autocomplete-results.open{display:block;}
.fk-tag-autocomplete-results a{display:flex; justify-content:space-between; align-items:center; padding:8px 12px; font-size:13px; color:var(--fk-text);}
.fk-tag-autocomplete-results a:hover{background:var(--fk-bg); text-decoration:none;}
.fk-tag-list a{display:flex; justify-content:space-between; align-items:center; padding:7px 6px; font-size:13px; border-radius:6px; color:var(--fk-text);}
.fk-tag-list a:hover{background:var(--fk-bg); text-decoration:none;}
.fk-tag-count{background:var(--fk-bg); color:var(--fk-text-muted); border-radius:10px; padding:1px 9px; font-size:11.5px; font-weight:600;}

.fk-stats-box{background:var(--fk-bg); border-radius:10px; padding:12px 14px; font-size:13px;}
.fk-stats-box div{display:flex; justify-content:space-between; padding:4px 0;}
.fk-stats-box strong{font-weight:700;}

/* ---------- Cards / grid ---------- */
.fk-panel{background:var(--fk-card); border:1px solid var(--fk-border); border-radius:var(--fk-radius); padding:22px; margin-bottom:20px; box-shadow:var(--fk-shadow-sm);}
.fk-panel-title{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--fk-text-faint); font-weight:700; margin:0 0 14px;}

.fk-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px;}
.fk-card{background:var(--fk-card); border:1px solid var(--fk-border); border-radius:var(--fk-radius); overflow:hidden; position:relative; transition:box-shadow .15s ease, transform .15s ease;}
.fk-card:hover{box-shadow:var(--fk-shadow); transform:translateY(-2px);}
.fk-card a.fk-card-media{display:block; aspect-ratio:1/1; overflow:hidden; background:var(--fk-bg);}
.fk-card a.fk-card-media img,.fk-card a.fk-card-media video{width:100%; height:100%; object-fit:cover;}
.fk-card .fk-video-badge{position:absolute; top:10px; right:10px; background:rgba(15,23,42,.7); backdrop-filter:blur(4px); color:#fff; font-size:11px; font-weight:600; padding:3px 8px; border-radius:6px;}

/* ---------- Single post ---------- */
.fk-single{display:grid; grid-template-columns:1fr 340px; gap:24px; align-items:start;}
.fk-single-media{background:var(--fk-card); border:1px solid var(--fk-border); border-radius:var(--fk-radius); overflow:hidden; text-align:center; box-shadow:var(--fk-shadow-sm);}
.fk-reactions{display:flex; gap:8px; flex-wrap:wrap;}
.fk-reaction-pill{
    border:1.5px solid var(--fk-border); background:var(--fk-card); border-radius:20px; padding:6px 14px;
    font-size:13px; cursor:pointer; display:flex; gap:6px; align-items:center; font-family:inherit; font-weight:600;
    transition:all .15s ease;
}
.fk-reaction-pill:hover{border-color:var(--fk-border-strong);}
.fk-reaction-pill.active{border-color:var(--fk-blue); background:var(--fk-blue-light); color:var(--fk-blue-dark);}
.fk-comments{margin-top:18px;}
.fk-comment{display:flex; gap:10px; padding:12px 0; border-bottom:1px solid var(--fk-border);}
.fk-comment:last-child{border-bottom:none;}
.fk-comment-box{display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; margin-top:14px; position:sticky; bottom:0; background:var(--fk-card); padding-top:10px;}
.fk-comment-box .fk-avatar{order:1;}
.fk-comment-box input{order:2; flex:1 1 160px; min-width:120px; padding:10px 14px; border:1.5px solid var(--fk-border); border-radius:22px; font-size:14px; font-family:inherit;}
.fk-comment-box input:focus{outline:none; border-color:var(--fk-blue);}
.fk-comment-box-break{order:3; flex-basis:100%; height:0;}
.fk-comment-box .fk-emoji-wrap, .fk-comment-box .fk-attach-btn{order:4; margin-left:auto;}
.fk-comment-post-btn{background:var(--fk-blue); color:#fff; border:none; padding:9px 18px; border-radius:22px; font-weight:700; cursor:pointer; font-family:inherit;}
.fk-comment-post-btn:disabled{opacity:.5; cursor:default;}
.fk-comment-box .fk-comment-post-btn{order:5;}
.fk-feed-image{max-width:220px; max-height:220px; border-radius:10px; margin-top:6px; cursor:pointer; transition:opacity .15s ease;}
.fk-feed-image:hover{opacity:.85;}

/* ---------- Lightbox (click a feed image to zoom in-page) ---------- */
.fk-lightbox-overlay{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:1000;
    align-items:center; justify-content:center; padding:40px; cursor:zoom-out;
}
.fk-lightbox-overlay.open{display:flex; animation:fk-fade-in .15s ease;}
.fk-lightbox-img{max-width:90vw; max-height:90vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5); cursor:default;}
.fk-lightbox-close{
    position:absolute; top:20px; right:24px; color:#fff; font-size:24px; cursor:pointer;
    width:40px; height:40px; display:flex; align-items:center; justify-content:center;
    border-radius:50%; background:rgba(255,255,255,.1); transition:background .15s ease;
}
.fk-lightbox-close:hover{background:rgba(255,255,255,.2);}
.fk-status-preview{max-width:160px; max-height:160px; border-radius:10px; margin:8px 0 0;}

/* ---------- Status update composer ---------- */
.fk-status-composer-panel{background:var(--fk-card); border:1px solid var(--fk-border); border-radius:var(--fk-radius); padding:16px; margin-top:16px;}
.fk-status-composer-row1{display:flex; gap:10px; align-items:flex-start;}
.fk-status-composer-row1 textarea{
    flex:1; min-width:0; padding:11px 15px; border:1.5px solid var(--fk-border); border-radius:14px;
    font-size:14px; font-family:inherit; resize:vertical; min-height:56px; line-height:1.5;
}
.fk-status-composer-row1 textarea:focus{outline:none; border-color:var(--fk-blue);}
.fk-status-composer-row2{display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:10px;}

/* ---------- Forms ---------- */
.fk-dropzone{border:2px dashed var(--fk-border); border-radius:var(--fk-radius); padding:64px 20px; text-align:center; cursor:pointer; background:var(--fk-card); transition:all .15s ease;}
.fk-dropzone.dragover{border-color:var(--fk-blue); background:var(--fk-blue-light);}
.fk-dropzone .icon{width:60px; height:60px; border-radius:50%; background:var(--fk-blue-light); color:var(--fk-blue); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:26px;}
.fk-field{margin-bottom:16px;}
.fk-field label{display:block; font-weight:600; font-size:13.5px; margin-bottom:7px; color:var(--fk-text);}
.fk-field input[type=text],.fk-field input[type=email],.fk-field input[type=password],.fk-field input[type=file],.fk-field textarea{
    width:100%; padding:11px 14px; border:1.5px solid var(--fk-border); border-radius:9px; font-size:14px;
    font-family:inherit; transition:border-color .15s ease; background:#fff; color:var(--fk-text);
}
.fk-field input:focus, .fk-field textarea:focus{outline:none; border-color:var(--fk-blue); box-shadow:0 0 0 3px var(--fk-blue-light);}
.fk-field textarea{resize:vertical;}

/* ---------- Alerts / flash messages ---------- */
.fk-alert{padding:12px 16px; border-radius:10px; font-size:14px; margin-bottom:16px; border:1px solid transparent; display:flex; align-items:center; gap:8px;}
.fk-alert-error{background:var(--fk-red-light); color:var(--fk-red); border-color:#fecaca;}
.fk-alert-success{background:var(--fk-green-light); color:#15803d; border-color:#bbf7d0;}

/* ---------- Empty states ---------- */
.fk-empty{text-align:center; padding:56px 20px; color:var(--fk-text-muted);}
.fk-empty .icon{width:56px; height:56px; border-radius:50%; background:var(--fk-blue-light); color:var(--fk-blue); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:24px;}
.fk-empty h3{margin:0 0 6px; color:var(--fk-text); font-size:16px;}
.fk-empty p{margin:0 0 16px; font-size:14px;}

/* ---------- Friends / messaging ---------- */
.fk-friend-row{display:flex; align-items:center; gap:12px; padding:13px 4px; border-bottom:1px solid var(--fk-border);}
.fk-friend-row:last-child{border-bottom:none;}
.fk-friend-meta{font-size:14px;}
.fk-friend-meta .status{font-size:12.5px; color:var(--fk-text-muted);}
.fk-friend-row .actions{margin-left:auto; display:flex; gap:8px;}

.fk-msg-layout{display:grid; grid-template-columns:280px 1fr; height:calc(100vh - 150px); border:1px solid var(--fk-border); border-radius:var(--fk-radius); overflow:hidden; background:var(--fk-card); box-shadow:var(--fk-shadow-sm);}
.fk-msg-threads{border-right:1px solid var(--fk-border); overflow-y:auto;}
.fk-msg-search{position:relative; padding:10px; border-bottom:1px solid var(--fk-border);}
.fk-msg-search input{width:100%; padding:9px 12px; border:1.5px solid var(--fk-border); border-radius:8px; font-family:inherit; font-size:13.5px;}
.fk-msg-search input:focus{outline:none; border-color:var(--fk-blue);}
#fk-msg-search-results{
    position:absolute; left:10px; right:10px; top:calc(100% - 2px); background:var(--fk-card);
    border:1px solid var(--fk-border); border-radius:0 0 10px 10px; box-shadow:var(--fk-shadow-lg);
    max-height:280px; overflow-y:auto; display:none; z-index:50;
}
#fk-msg-search-results.open{display:block;}
.fk-msg-search-result{display:flex; align-items:center; gap:10px; padding:9px 12px; cursor:pointer; font-size:13.5px;}
.fk-msg-search-result:hover{background:var(--fk-bg);}
.fk-msg-search-empty{padding:12px; color:var(--fk-text-faint); font-size:13px; text-align:center;}
.fk-msg-section-label{padding:10px 13px 4px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--fk-text-faint); font-weight:700;}
.fk-msg-thread{display:flex; gap:10px; padding:13px; cursor:pointer; border-bottom:1px solid var(--fk-border); transition:background .1s ease;}
.fk-msg-thread:hover,.fk-msg-thread.active{background:var(--fk-bg);}
.fk-msg-thread .preview{color:var(--fk-text-muted); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fk-msg-pane{display:flex; flex-direction:column;}
.fk-msg-head{padding:14px 18px; border-bottom:1px solid var(--fk-border); display:flex; align-items:center; gap:10px;}
.fk-msg-body{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:8px;}
.fk-bubble{max-width:62%; padding:9px 14px; border-radius:16px; font-size:14px; background:var(--fk-bg); line-height:1.4; box-sizing:border-box;}
.fk-bubble.mine{align-self:flex-end; background:var(--fk-blue); color:#fff;}
.fk-bubble.fk-bubble-media{max-width:80%; padding:6px;}
.fk-msg-input{display:flex; gap:8px; padding:14px; border-top:1px solid var(--fk-border);}
.fk-msg-input input{flex:1; min-width:0; padding:11px 16px; border:1.5px solid var(--fk-border); border-radius:22px; font-family:inherit; font-size:14px;}
.fk-msg-input input:focus{outline:none; border-color:var(--fk-blue);}

/* ---------- Message image attachments ---------- */
.fk-attach-btn{background:none; border:none; font-size:18px; cursor:pointer; padding:0 6px; display:flex; align-items:center; color:var(--fk-text-muted); flex-shrink:0;}
.fk-attach-btn:hover{color:var(--fk-text);}
.fk-bubble-img{max-width:100%; width:auto; height:auto; border-radius:10px; display:block; cursor:pointer;}
.fk-bubble-img + div{margin-top:6px; padding:0 6px 4px;}

/* ---------- Upload-in-progress animation ---------- */
.fk-bubble-uploading{position:relative; opacity:.85;}
.fk-bubble-uploading .fk-bubble-img{filter:brightness(.6);}
.fk-upload-spinner{
    position:absolute; top:50%; left:50%; width:28px; height:28px; margin:-14px 0 0 -14px;
    border:3px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%;
    animation:fk-spin .7s linear infinite;
}
@keyframes fk-spin{ to { transform:rotate(360deg); } }
.fk-bubble-failed{border:1.5px solid var(--fk-red); background:var(--fk-red-light) !important; color:var(--fk-red) !important;}

/* ---------- Chat widget ---------- */
/* z-index intentionally LOW (below .fk-topbar's 100): .fk-topbar has its own
   z-index, which makes it establish a stacking context of its own - everything
   inside it (including the account dropdown) only ever competes at "100" from
   the outside, regardless of its own internal z-index. So the chat widget just
   needs to sit below that to never cover the dropdown, not above it. */
.fk-float-stack{position:relative; z-index:10;}
.fk-messages-widget{position:relative;}
.fk-messages-toggle{
    position:fixed; bottom:64px; right:16px; z-index:10;
    background:#fff; color:var(--fk-text); border:1.5px solid var(--fk-border); padding:9px 16px; border-radius:22px;
    font-weight:700; font-size:13.5px; cursor:pointer; box-shadow:var(--fk-shadow); display:flex; align-items:center; gap:6px;
    transition:transform .15s ease; text-decoration:none;
}
.fk-messages-toggle:hover{transform:translateY(-2px); text-decoration:none; color:var(--fk-text);}
.fk-messages-panel{
    display:none; position:fixed; bottom:106px; right:16px; width:320px; z-index:10;
    background:var(--fk-card); border:1px solid var(--fk-border); border-radius:var(--fk-radius);
    box-shadow:var(--fk-shadow-lg); overflow:hidden; flex-direction:column; max-height:min(480px, calc(100vh - 140px));
}
.fk-messages-panel.open{display:flex; animation:fk-fade-in .15s ease;}
.fk-messages-panel-head{background:var(--fk-blue); color:#fff; padding:10px 14px; font-weight:700; font-size:13.5px; display:flex; justify-content:space-between; align-items:center; gap:8px;}
.fk-messages-panel-body{flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column;}
.fk-pm-conv-body{flex:1; min-height:220px; max-height:320px; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px;}
.fk-chat-widget{position:fixed; bottom:16px; right:16px; width:300px; z-index:10; font-size:13.5px;}
.fk-chat-toggle{background:var(--fk-blue); color:#fff; padding:9px 16px; border-radius:22px; font-weight:700; font-size:13.5px; cursor:pointer; box-shadow:0 6px 18px rgba(37,99,235,.35); display:flex; align-items:center; gap:6px; transition:transform .15s ease; width:fit-content; margin-left:auto;}
.fk-chat-toggle:hover{transform:translateY(-2px);}
.fk-chat-panel{display:none; background:var(--fk-card); border:1px solid var(--fk-border); border-radius:var(--fk-radius); margin-bottom:10px; box-shadow:var(--fk-shadow-lg); overflow:hidden;}
.fk-chat-panel.open{display:block; animation:fk-fade-in .15s ease;}
.fk-chat-panel-head{background:var(--fk-blue); color:#fff; padding:10px 14px; font-weight:700; font-size:13.5px; display:flex; justify-content:space-between; align-items:center;}
.fk-chat-panel-body{height:260px; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:6px;}
.fk-chat-line{font-size:13px; line-height:1.4;}
.fk-chat-line .who{font-weight:700; margin-right:5px; color:var(--fk-blue-dark);}
a.fk-chat-line-who,.fk-chat-line a.who{text-decoration:none; cursor:pointer;}
.fk-chat-line a.who:hover{text-decoration:underline;}
.fk-chat-panel-input{display:flex; border-top:1px solid var(--fk-border);}
.fk-chat-panel-input input{flex:1; min-width:0; border:none; padding:10px; outline:none; font-family:inherit; font-size:13.5px;}
.fk-chat-panel-input #fk-chat-send, .fk-chat-panel-input #fk-pm-send{border:none; background:var(--fk-blue); color:#fff; padding:0 16px; cursor:pointer; font-weight:600; font-size:13.5px;}

/* ---------- Tables (admin) ---------- */
.fk-table-wrap{background:var(--fk-card); border:1px solid var(--fk-border); border-radius:var(--fk-radius); overflow:hidden; box-shadow:var(--fk-shadow-sm);}
.fk-table{width:100%; border-collapse:collapse; font-size:14px;}
.fk-table thead th{background:var(--fk-bg); text-align:left; padding:12px 16px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--fk-text-faint); font-weight:700;}
.fk-table tbody td{padding:12px 16px; border-top:1px solid var(--fk-border); vertical-align:middle;}
.fk-table tbody tr:hover{background:var(--fk-bg);}

/* ---------- Badges / pills / stat cards ---------- */
.fk-badge{display:inline-block; padding:2px 10px; border-radius:20px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;}
.fk-badge-blue{background:var(--fk-blue-light); color:var(--fk-blue-dark);}
.fk-badge-green{background:var(--fk-green-light); color:#15803d;}
.fk-badge-gray{background:var(--fk-bg); color:var(--fk-text-muted);}
.fk-badge-red{background:var(--fk-red-light); color:var(--fk-red);}

.fk-stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px;}
.fk-stat-card{background:var(--fk-card); border:1px solid var(--fk-border); border-radius:var(--fk-radius); padding:20px; text-align:center; box-shadow:var(--fk-shadow-sm);}
.fk-stat-card .num{font-size:28px; font-weight:800; letter-spacing:-.02em;}
.fk-stat-card .label{color:var(--fk-text-muted); font-size:13px; margin-top:2px;}

/* ---------- Auth pages ---------- */
.fk-auth-wrap{max-width:420px; margin:0 auto; padding:64px 20px;}
.fk-auth-wrap .fk-panel{padding:32px 28px;}
.fk-auth-title{text-align:center; font-size:22px; margin-bottom:22px;}
.fk-auth-links{display:flex; justify-content:space-between; margin-top:16px; font-size:13.5px;}
.fk-auth-links-center{text-align:center; margin-top:16px; font-size:13.5px;}

/* ---------- Utility layout helpers (replace ad hoc inline styles) ---------- */
.fk-flex{display:flex; align-items:center;}
.fk-flex-between{display:flex; align-items:center; justify-content:space-between;}
.fk-flex-gap{display:flex; align-items:center; gap:10px;}
.fk-mt-0{margin-top:0;} .fk-mb-0{margin-bottom:0;}
.fk-page{max-width:1100px; margin:0 auto; padding:28px 20px;}
.fk-page-narrow{max-width:760px; margin:0 auto; padding:28px 20px;}
.fk-back-link{font-size:13px; color:var(--fk-text-muted); display:inline-block; margin-bottom:14px;}

/* ---------- Pagination ---------- */
.fk-pagination{display:flex; flex-wrap:wrap; gap:6px; margin-top:22px; align-items:center;}
.fk-pagination-ellipsis{color:var(--fk-text-faint); padding:0 4px; font-size:14px; user-select:none;}

/* ---------- Save/like star ---------- */
.fk-star-active{color:#b45309; border-color:#fcd34d; background:#fffbeb;}
.fk-star-active:hover{background:#fef3c7;}

/* ---------- Explore Tags ---------- */
.fk-tag-cloud{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px;}
.fk-tag-cloud-item{
    background:var(--fk-card); border:1px solid var(--fk-border); border-radius:10px; padding:14px 16px;
    display:flex; flex-direction:column; gap:4px; transition:all .15s ease; color:var(--fk-text);
}
.fk-tag-cloud-item:hover{border-color:var(--fk-blue); box-shadow:var(--fk-shadow-sm); text-decoration:none;}
.fk-tag-cloud-item .name{font-weight:700; font-size:15px; color:var(--fk-blue-dark);}
.fk-tag-cloud-item .meta{font-size:12.5px; color:var(--fk-text-muted);}

/* ---------- Members ---------- */
.fk-members-link{
    display:flex; align-items:center; gap:6px; margin-top:20px; padding:10px 12px; border-radius:8px;
    font-size:13.5px; font-weight:600; color:var(--fk-text); border:1px solid var(--fk-border);
}
.fk-members-link:hover{background:var(--fk-bg); text-decoration:none; color:var(--fk-text);}
.fk-member-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px;}
.fk-member-card{
    background:var(--fk-card); border:1px solid var(--fk-border); border-radius:12px; padding:14px;
    display:flex; align-items:center; gap:12px; color:var(--fk-text); transition:all .15s ease;
}
.fk-member-card:hover{border-color:var(--fk-blue); box-shadow:var(--fk-shadow-sm); text-decoration:none; color:var(--fk-text);}

/* ---------- Blog-style News ---------- */
.fk-blog-featured{background:var(--fk-card); border:1px solid var(--fk-border); border-radius:var(--fk-radius-lg); overflow:hidden; margin-bottom:24px; box-shadow:var(--fk-shadow);}
.fk-blog-featured .cover{aspect-ratio:2.4/1; overflow:hidden; background:var(--fk-bg);}
.fk-blog-featured .cover img{width:100%; height:100%; object-fit:cover;}
.fk-blog-featured .body{padding:26px 30px;}
.fk-blog-featured h1{font-size:26px; margin-bottom:8px;}
.fk-blog-featured .excerpt{font-size:15px; color:var(--fk-text-muted); margin:10px 0 16px; line-height:1.6;}
.fk-blog-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px;}
.fk-blog-card{background:var(--fk-card); border:1px solid var(--fk-border); border-radius:var(--fk-radius); overflow:hidden; transition:all .15s ease;}
.fk-blog-card:hover{box-shadow:var(--fk-shadow); transform:translateY(-2px);}
.fk-blog-card .cover{aspect-ratio:16/9; overflow:hidden; background:var(--fk-bg);}
.fk-blog-card .cover img{width:100%; height:100%; object-fit:cover;}
.fk-blog-card .body{padding:16px 18px;}
.fk-blog-card h2{font-size:16px; margin-bottom:6px;}
.fk-blog-card p{font-size:13.5px; color:var(--fk-text-muted); line-height:1.5; margin:6px 0 12px;}

/* ---------- Old-Facebook-style profile ---------- */
.fk-fb-profile{display:grid; grid-template-columns:280px 1fr; gap:24px; align-items:start;}
.fk-fb-photo{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--fk-radius); border:1px solid var(--fk-border); background:linear-gradient(135deg, var(--fk-blue), #7c3aed);}
.fk-fb-photo-fallback{width:100%; aspect-ratio:1/1; border-radius:var(--fk-radius); border:1px solid var(--fk-border); background:linear-gradient(135deg, var(--fk-blue), #7c3aed); color:#fff; display:flex; align-items:center; justify-content:center; font-size:64px; font-weight:800;}
.fk-fb-links{list-style:none; margin:16px 0 0; padding:0; font-size:13.5px;}
.fk-fb-links li{padding:7px 0; border-bottom:1px solid var(--fk-border);}
.fk-fb-links li:last-child{border-bottom:none;}
.fk-fb-links a{color:var(--fk-blue);}
.fk-fb-links button{background:none; border:none; padding:0; color:var(--fk-blue); font-family:inherit; font-size:13.5px; cursor:pointer;}
.fk-fb-section{margin-top:16px;}
.fk-fb-section-head{background:var(--fk-blue-light); color:var(--fk-blue-dark); font-weight:700; font-size:13px; padding:8px 12px; border-radius:8px 8px 0 0;}
.fk-fb-section-body{border:1px solid var(--fk-border); border-top:none; border-radius:0 0 8px 8px; padding:12px; font-size:13.5px;}
.fk-fb-status{display:flex; align-items:center; gap:8px;}

.fk-fb-header{margin-bottom:14px;}
.fk-fb-header h1{font-size:22px;}
.fk-fb-header .meta-lines{color:var(--fk-text-muted); font-size:14px; line-height:1.7; margin-top:4px;}

.fk-fb-minifeed-head{background:var(--fk-blue-light); color:var(--fk-blue-dark); font-weight:700; padding:10px 16px; border-radius:10px 10px 0 0; display:flex; justify-content:space-between; align-items:center; font-size:14px;}
.fk-fb-minifeed{border:1px solid var(--fk-border); border-top:none; border-radius:0 0 10px 10px; background:var(--fk-card);}
.fk-fb-day-label{padding:10px 16px 4px; font-weight:700; font-size:13px; color:var(--fk-text-muted); border-top:1px solid var(--fk-border);}
.fk-fb-day-label:first-child{border-top:none;}
.fk-fb-feed-item{display:flex; gap:10px; padding:9px 16px; font-size:14px; align-items:flex-start;}
.fk-fb-feed-item .icon{font-size:15px; flex-shrink:0;}
.fk-fb-feed-item .when{color:var(--fk-text-faint); font-size:12px; margin-left:auto; white-space:nowrap;}
.fk-home-timeline .fk-fb-feed-item{padding:9px 0; border-top:1px solid var(--fk-border);}
.fk-home-timeline .fk-fb-feed-item:first-child{border-top:none; padding-top:0;}

@media (max-width: 700px){
    .fk-fb-profile{grid-template-columns:1fr;}
}

/* ---------- Emoji picker ---------- */
.fk-emoji-wrap{position:relative; display:flex; align-items:center; flex-shrink:0;}
.fk-emoji-btn{
    background:none; border:none; font-size:18px; cursor:pointer; padding:0 8px; line-height:1;
    display:flex; align-items:center; height:100%;
}
.fk-emoji-panel{
    display:none; position:absolute; bottom:calc(100% + 8px); right:0; width:220px;
    background:var(--fk-card); border:1px solid var(--fk-border); border-radius:12px; box-shadow:var(--fk-shadow-lg);
    padding:8px; grid-template-columns:repeat(8,1fr); gap:2px; z-index:50; max-height:180px; overflow-y:auto;
}
.fk-emoji-panel.open{display:grid;}
.fk-emoji-option{font-size:18px; text-align:center; cursor:pointer; padding:4px; border-radius:6px; line-height:1.4;}
.fk-emoji-option:hover{background:var(--fk-bg);}

/* ---------- Modal dialog (replaces native prompt()/confirm() for nicer UX) ---------- */
.fk-modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:500;
    align-items:center; justify-content:center; padding:20px;
}
.fk-modal-overlay.open{display:flex;}
.fk-modal{
    background:var(--fk-card); border-radius:var(--fk-radius-lg); padding:24px;
    width:100%; max-width:380px; box-shadow:var(--fk-shadow-lg); animation:fk-modal-in .15s ease;
}
@keyframes fk-modal-in{from{opacity:0; transform:scale(.96);} to{opacity:1; transform:scale(1);}}

/* ---------- Collections ---------- */
.fk-collection-card{display:flex; align-items:center; font-weight:600; color:var(--fk-text); text-decoration:none;}
.fk-collection-card:hover{border-color:var(--fk-blue); text-decoration:none; color:var(--fk-text);}
.fk-collection-card-wrap{position:relative;}
.fk-collection-card-wrap .fk-collection-card{padding-right:56px;}
.fk-collection-card-actions{position:absolute; top:8px; right:8px; display:flex; gap:2px;}
.fk-collection-icon-btn{
    background:var(--fk-card); border:1px solid var(--fk-border); border-radius:6px; width:26px; height:26px;
    display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:13px; color:var(--fk-text-muted);
}
.fk-collection-icon-btn:hover{background:var(--fk-bg); color:var(--fk-text);}

/* ---------- Save-to-collection picker (real centered modal, not a dropdown -
   the sidebar it's triggered from is too narrow for an anchored dropdown to ever
   look right, and this also sidesteps any ancestor-overflow clipping entirely) ---------- */
.fk-save-picker-list{max-height:280px; overflow-y:auto; margin:0 -24px; border-top:1px solid var(--fk-border); border-bottom:1px solid var(--fk-border);}
.fk-save-picker-item{display:flex; align-items:center; gap:10px; padding:12px 24px; cursor:pointer; font-size:14px;}
.fk-save-picker-item:hover{background:var(--fk-bg);}
.fk-save-picker-check{width:18px; height:18px; border:1.5px solid var(--fk-border-strong); border-radius:5px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff;}
.fk-save-picker-item.saved .fk-save-picker-check{background:var(--fk-blue); border-color:var(--fk-blue);}
.fk-save-picker-new{display:flex; gap:6px; padding:12px 0 0;}
.fk-save-picker-new input{flex:1; padding:9px 12px; border:1.5px solid var(--fk-border); border-radius:8px; font-size:13px; font-family:inherit;}

/* Responsive */
@media (max-width: 1100px){
    .fk-layout,.fk-layout.fk-no-friends{grid-template-columns:1fr;}
    .fk-sidebar,.fk-friends-rail{position:static; border:none; border-bottom:1px solid var(--fk-border); max-height:none;}
    .fk-single{grid-template-columns:1fr;}
    .fk-stat-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 640px){
    .fk-topbar{padding:12px 14px; gap:10px;}
    .fk-account-name{display:none;}
    .fk-msg-layout{grid-template-columns:1fr; height:auto;}
    .fk-chat-widget{width:calc(100vw - 32px); right:16px;}
}