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

/* =========================================================
   Playarea — startsida
   Delar designtokens och grundkomponenter med profilsidan,
   men har egna layouter: intro-band, fotovägg, forumtabell,
   upptäck-sektion och sidokolumn.
   ========================================================= */

:root {
  --ink: #29384b;
  --muted: #7b8795;
  --blue: #2c7299;
  --blue-dark: #205b7e;
  --blue-pale: #e9f3f8;
  --teal: #2e9e99;
  --coral: #ed7969;
  --gold: #e9b94d;
  --line: #dce4e9;
  --paper: #ffffff;
  --page: #eaf0f3;
  --shadow: 0 2px 0 rgba(35, 64, 82, .035), 0 5px 15px rgba(35, 64, 82, .045);
}
* { box-sizing: border-box; }
html { min-width: 1240px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 8% 4%, rgba(255,255,255,.9), transparent 25rem),
    repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 1px, transparent 1px 7px),
    var(--page);
  color: var(--ink);
  font: 13px/1.5 'DM Sans', Arial, sans-serif;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--coral); }
button, input { font: inherit; }
button { cursor: pointer; }
.site-shell { max-width: 1240px; margin: 0 auto; padding: 0 22px; }

/* ---------- Topplist, masthead, navigation (delas med profilsidan) ---------- */
.top-strip {
  height: 27px; display: flex; justify-content: space-between; align-items: center;
  padding: 0 12px; background: #1e526e; color: #d7e8f0; font-size: 10px;
  font-weight: 800; letter-spacing: .09em;
}
.top-strip b { color: #f4c65d; margin-left: 6px; }
.strip-right { font-weight: 500; letter-spacing: .015em; }
.masthead { height: 95px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 265px; color: inherit; }
.brand:hover { color: inherit; }
.brand-mark {
  height: 56px; width: 56px; display: grid; place-items: center; position: relative;
  color: white; background: linear-gradient(145deg, #53b9b0, #268f95);
  border: 3px solid #fff; border-radius: 15px 15px 15px 5px; box-shadow: 0 3px 0 #c3d8dc, 0 5px 12px #b7cbd1;
  font: 900 32px 'Nunito', sans-serif; transform: rotate(-3deg); transition: transform .2s;
}
.brand:hover .brand-mark { transform: rotate(3deg) scale(1.04); }
.brand-mark span { position: absolute; right: 6px; top: -6px; color: #ffdb6b; font-size: 19px; transform: rotate(8deg); }
.brand-name { color: #215c7e; font: 900 34px/.95 'Nunito', sans-serif; letter-spacing: -2px; }
.brand-name span { color: #ed7969; }
.tagline { margin-top: 5px; color: #71818d; font-size: 11px; }
.header-welcome { display: flex; flex-direction: column; gap: 2px; padding-left: 18px; border-left: 1px solid #d2dde3; flex: 1; }
.welcome-kicker { font-size: 9px; color: #8795a0; font-weight: 800; letter-spacing: .12em; }
.header-welcome strong { font: 800 15px 'Nunito', sans-serif; color: #345066; }
.header-welcome > span:last-child { color: #73828f; font-size: 11px; }
.online-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4dbb82; margin-left: 3px; box-shadow: 0 0 0 3px #d7f1e2; }
.user-chip { display: flex; align-items: center; gap: 9px; padding: 7px 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); min-width: 118px; color: var(--ink); }
.user-chip:hover { color: var(--ink); border-color: #b9d3de; }
.user-chip b, .user-chip small { display: block; }
.user-chip b { font-size: 12px; }
.user-chip small { color: var(--muted); font-size: 10px; }

.mini-avatar { width: 33px; height: 33px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; color: white; font: 900 16px 'Nunito'; border: 2px solid white; box-shadow: 0 0 0 1px #d4dfe5; }
.avatar-tommy { background: linear-gradient(145deg, #73c5bb, #2d7f8b); }
.avatar-sarah { background: linear-gradient(145deg, #f6b6a1, #d86e83); }
.avatar-alex { background: linear-gradient(145deg, #8d9fd2, #5367a4); }
.avatar-micke { background: linear-gradient(145deg, #f3c36a, #db8951); }
.avatar-emma { background: linear-gradient(145deg, #d5a9d8, #9568b1); }
.avatar-natta { background: linear-gradient(145deg, #8ec8e4, #4d8db6); }
.avatar-jocke { background: linear-gradient(145deg, #a9c47d, #5e8e57); }
.avatar-pixel { background: linear-gradient(145deg, #7fd0c4, #3c8e8e); }
.avatar-kim { background: linear-gradient(145deg, #f2a6a0, #c75a6c); }
.avatar-hampus { background: linear-gradient(145deg, #9bb2e0, #4f69a8); }
.avatar-lina { background: linear-gradient(145deg, #f4cf84, #d99a45); }
.avatar-ove { background: linear-gradient(145deg, #b3b8c2, #6b7585); }
.avatar-moa { background: linear-gradient(145deg, #cfa8e0, #8a5cae); }
.avatar-ville { background: linear-gradient(145deg, #94d2a6, #4a9468); }
.avatar-tove { background: linear-gradient(145deg, #f7b98f, #d4735a); }
.avatar-bosse { background: linear-gradient(145deg, #a2c0cf, #50788f); }

.main-nav {
  display: flex; align-items: stretch; gap: 3px; min-height: 47px; padding: 5px 6px;
  background: linear-gradient(#fff, #f5f8fa); border: 1px solid #d5e0e6; border-radius: 9px;
  box-shadow: var(--shadow);
}
.main-nav > a { display: flex; align-items: center; gap: 7px; padding: 0 14px; border-radius: 6px; color: #526779; font-weight: 700; white-space: nowrap; transition: background .15s; }
.main-nav > a:hover { background: #edf4f7; color: #2c7299; }
.main-nav > a:first-letter { font-size: 17px; }
.main-nav > a.active { color: white; background: linear-gradient(#3b91b2, #286c91); box-shadow: inset 0 1px rgba(255,255,255,.22), 0 2px 0 #d1e0e6; }
.main-nav > a em { font-style: normal; font-size: 9px; padding: 1px 5px; border-radius: 10px; background: var(--coral); color: white; }
.nav-search { margin-left: auto; display: flex; align-items: center; gap: 5px; padding-left: 8px; }
.nav-search > span { font-size: 22px; color: #8b9aa5; }
.nav-search input { width: 130px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; }
.nav-search button { border: 0; background: #dfeef3; color: #326d89; padding: 5px 9px; border-radius: 5px; font-size: 10px; font-weight: 800; }
.nav-search button:hover { background: #cfe5ee; }
.ticker { margin: 12px 0 14px; display: flex; align-items: center; min-height: 32px; background: #fff9e9; border: 1px solid #f1dfae; border-radius: 6px; overflow: hidden; color: #78653c; font-size: 10px; }
.ticker-label { align-self: stretch; display: flex; align-items: center; padding: 0 12px; background: #f1c75d; color: #674f1b; font-size: 9px; font-weight: 900; letter-spacing: .07em; flex: 0 0 auto; }
.ticker > div { padding: 0 12px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker > div span { color: #d2b96e; padding: 0 7px; }
.ticker b { color: #5d7180; }
.ticker-spark { padding-right: 12px; color: #d4a632; font-size: 15px; }

/* ---------- Gemensamma byggstenar ---------- */
.panel { background: var(--paper); border: 1px solid #d9e2e7; border-radius: 7px; box-shadow: var(--shadow); overflow: hidden; }
.panel-heading { min-height: 35px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: linear-gradient(#fff, #f7f9fa); border-bottom: 1px solid #e3e9ed; color: #52687a; font-size: 10px; font-weight: 900; letter-spacing: .065em; }
.panel-heading a { font-size: 10px; letter-spacing: 0; font-weight: 700; }
.panel-heading small { color: #94a1aa; font-size: 9px; }
.panel-foot { padding: 8px 12px; border-top: 1px solid #edf0f2; background: #fbfcfd; text-align: center; font-size: 10px; font-weight: 700; }
.tiny-count { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; margin-left: 3px; border-radius: 5px; background: #e4eef3; color: #4c8199; font-size: 9px; letter-spacing: 0; }
.coral-count { background: #fde7e1; color: #d97769; }
.green-count { background: #e1f4e9; color: #459b6a; }
.button { border: 1px solid transparent; border-radius: 5px; padding: 8px 12px; font-size: 11px; font-weight: 800; transition: transform .12s, filter .12s; box-shadow: inset 0 1px rgba(255,255,255,.24), 0 2px 0 rgba(25,55,72,.09); }
.button:hover { filter: brightness(1.04); transform: translateY(-1px); }
.button.clicked { transform: translateY(1px); }
.button-teal { color: #fff; background: linear-gradient(#43b2a9, #278f8e); border-color: #258986; }
.button-teal:hover { color: #fff;  }
.button-coral { color: white; background: linear-gradient(#f18d7b, #dc6b5e); border-color: #d86a5d; }
.button-light { color: #4c8287; background: linear-gradient(#fff, #f1f8f6); border-color: #c4dedb; }
.full { width: 100%; }

.block-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 2px 9px; }
.block-title h2 { margin: 0; color: #3b5365; font: 900 18px 'Nunito'; letter-spacing: -.2px; display: flex; align-items: center; gap: 8px; }
.block-title h2 i { font-style: normal; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #e4f2f1; color: #2e9e99; font-size: 13px; }
.block-title h2 i.gold { background: #fff1cc; color: #cf9a24; }
.block-title h2 i.coral { background: #fde7e1; color: #e0705f; }
.block-title h2 i.blue { background: #e1eef6; color: #2c7299; }
.block-title small { display: block; font: 500 10px 'DM Sans'; color: #93a0aa; letter-spacing: 0; }
.block-title a { font-size: 10px; font-weight: 700; white-space: nowrap; }

/* ---------- Intro-band ---------- */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; margin-bottom: 20px; }
.welcome-band {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 215px;
  border: 1px solid #c8e2e0; border-radius: 8px; box-shadow: var(--shadow);
  background: linear-gradient(115deg, #d9f0ed 0%, #e6f3f2 50%, #f8e9c5 100%);
}
/* HÖSTIG WELCOME BAND */
.welcome-band:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255, 239, 205, .85),
            transparent 42%
        ),
        repeating-linear-gradient(
            45deg,
            transparent 0 10px,
            rgba(255, 255, 255, .08) 10px 11px
        );
    pointer-events: none;
}

.band-copy {
    position: relative;
    z-index: 2;
    padding: 18px 20px 16px;
}

.eyebrow {
    color: #9a6846;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .13em;
}

.band-copy h1 {
    margin: 6px 0 6px;
    font: 900 30px/1.08 'Nunito', sans-serif;
    color: #59483c;
    letter-spacing: -.8px;
}

.band-copy h1 span {
    color: #b96545;
    position: relative;
    white-space: nowrap;
}

.band-copy h1 span:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 5px;
    background: rgba(222, 166, 75, .55);
    border-radius: 3px;
    z-index: -1;
}

.band-copy p {
    margin: 0;
    max-width: 430px;
    color: #78675a;
    font-size: 11.5px;
    line-height: 1.6;
}

.band-stats {
    display: flex;
    gap: 0;
    margin-top: 14px;
}

.band-stats div {
    padding: 0 16px;
    border-left: 1px dashed #cbb49a;
}

.band-stats div:first-child {
    padding-left: 0;
    border-left: 0;
}

.band-stats b {
    display: block;
    color: #a65e3f;
    font: 900 19px/1.1 'Nunito';
}

.band-stats small {
    color: #897565;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
}

.band-actions {
    display: flex;
    gap: 7px;
    margin-top: 14px;
    flex-wrap: wrap;
}

/* HÖSTLANDSKAPET */
.band-art {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.band-art .sun {
    position: absolute;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    right: 40px;
    top: 20px;
    background: linear-gradient(145deg, #f4cf78, #e89a59);
    box-shadow: 0 0 0 9px rgba(255, 239, 205, .3);
}

.band-art .hill {
    position: absolute;
    bottom: -50px;
    width: 230px;
    height: 130px;
    border-radius: 50% 50% 0 0;
    transform: rotate(-12deg);
}

.band-art .hill-back {
    right: -40px;
    background: #b7a47b;
}

.band-art .hill-front {
    right: 40px;
    bottom: -70px;
    background: #788568;
    transform: rotate(19deg);
}

.band-art .star {
    position: absolute;
    color: #d18a4e;
    text-shadow: 0 1px 2px rgba(255, 244, 220, .8);
}

.band-art .s1 {
    top: 26px;
    left: 22px;
    font-size: 18px;
}

.band-art .s2 {
    top: 92px;
    right: 14px;
    font-size: 20px;
}

.band-art .s3 {
    top: 64px;
    left: 60px;
    font-size: 11px;
}

.band-art .tag {
    position: absolute;
    z-index: 3;
    left: 18px;
    bottom: 16px;
    padding: 5px 9px;
    background: #fff9ed;
    border-radius: 6px 6px 6px 1px;
    box-shadow: 0 2px 0 #dfc9a9;
    color: #9a6042;
    font: 800 10px 'Nunito';
    transform: rotate(-4deg);
}

.spotlight { display: flex; flex-direction: column; }
.spot-body { position: relative; display: flex; gap: 12px; padding: 13px 13px 12px; flex: 1; background: linear-gradient(180deg, #fffdf6, #fff 60%); }
.spot-photo { position: relative; flex: 0 0 74px; height: 88px; display: grid; place-items: center; border: 4px solid #fff; outline: 1px solid #d9e3e8; border-radius: 8px; color: #fff; font: 900 36px 'Nunito'; box-shadow: 0 3px 7px #cfdce2; transform: rotate(-2.5deg); }
.spot-photo:after { content: "★"; position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #f1c75d; color: #fff; font-size: 11px; border: 2px solid #fff; }
.spot-text h3 { margin: 0; font: 900 16px 'Nunito'; color: #2e4f65; }
.spot-text .muted-line { color: #8a98a2; font-size: 10px; }
.spot-text p { margin: 7px 0 0; color: #64778a; font: 700 11.5px/1.55 'Nunito'; }
.spot-text p:before { content: "“"; color: #e0b24b; font-size: 18px; line-height: 0; margin-right: 2px; vertical-align: -4px; }
.spot-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 13px; border-top: 1px dashed #e3eaee; background: #fbfcfd; font-size: 10px; }
.spot-foot span { color: #93a0a9; }

/* ---------- Huvudgrid ---------- */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 18px; align-items: start; }
.home-main, .home-side { min-width: 0; display: flex; flex-direction: column; }
.home-main { gap: 24px; }
.home-side { gap: 14px; }

/* ---------- Flödet ---------- */
.share-box { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: linear-gradient(#fff, #f9fbfc); border-bottom: 1px solid #e3e9ed; }
.share-box input { flex: 1; min-width: 0; padding: 8px 11px; border: 1px solid #dfe7eb; border-radius: 5px; outline: 0; background: #fbfcfd; color: var(--ink); font-size: 11px; }
.share-box input:focus { border-color: #8bc7ca; box-shadow: 0 0 0 3px #e3f5f3; }
.share-box button.mini { padding: 7px 10px; border: 1px solid #cddfe5; border-radius: 5px; color: #47788f; background: linear-gradient(#fff,#edf5f7); font-size: 10px; font-weight: 800; }
.share-box button.mini:hover { border-color: #8bc7ca; }
.feed-tabs { display: flex; align-items: center; gap: 5px; border-bottom: 2px solid #d5e2e8; padding: 0 5px; background: #fff; }
.feed-tabs button { position: relative; border: 0; background: transparent; color: #81909c; padding: 8px 10px; font-size: 10px; font-weight: 700; }
.feed-tabs button:hover { color: #2e7594; }
.feed-tabs button.selected { color: #2e7594; }
.feed-tabs button.selected:after { content: ""; position: absolute; height: 2px; bottom: -2px; left: 8px; right: 8px; background: #3a91a9; }
.feed-tabs > span { margin-left: auto; color: #9aa6ad; font-size: 9px; white-space: nowrap; }
.feed-tabs > span b { color: #60798b; }
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-list li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 13px; border-bottom: 1px solid #eef2f4; transition: background .15s; }
.activity-list li:hover { background: #fafdfd; }
.activity-list li:last-child { border-bottom: 0; }
.act-avatar { position: relative; flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid #fff; outline: 1px solid #dbe4e8; border-radius: 8px; color: #fff; font: 900 17px 'Nunito'; }
.act-avatar em { position: absolute; right: -7px; bottom: -7px; width: 18px; height: 18px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #3a91a9; color: #fff; font-size: 9px; font-style: normal; }
.act-avatar em.c-coral { background: #e8806f; }
.act-avatar em.c-gold { background: #e3ae3d; }
.act-avatar em.c-green { background: #46ae79; }
.act-avatar em.c-purple { background: #9568b1; }
.act-body { min-width: 0; flex: 1; font-size: 11px; color: #657888; line-height: 1.55; }
.act-body b { color: #2e6685; }
.act-body a { font-weight: 700; }
.act-body q { display: block; margin-top: 4px; padding: 6px 10px; background: #f4f8fa; border-left: 3px solid #cfe1e8; border-radius: 0 5px 5px 0; color: #566e7e; font: 700 11px/1.55 'Nunito'; quotes: none; }
.act-thumbs { display: flex; gap: 4px; margin-top: 6px; }
.act-thumbs span { position: relative; overflow: hidden; width: 46px; height: 34px; border-radius: 4px; border: 2px solid #fff; outline: 1px solid #dde6ea; }
.act-meta { flex: 0 0 auto; text-align: right; color: #a1abb2; font-size: 9px; white-space: nowrap; }
.act-meta span { display: block; margin-top: 3px; color: #df7b7f; font-weight: 700; }

/* ---------- Fotovägg ---------- */
.photo-wall {
  position: relative; padding: 13px; border: 1px solid #d9e2e7; border-radius: 8px; box-shadow: var(--shadow);
  background:
    radial-gradient(circle at 92% 8%, rgba(241,199,93,.2), transparent 12rem),
    repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 1px, transparent 1px 9px),
    linear-gradient(160deg, #fffdf7, #f2f8f7);
}
.photo-wall .block-title { margin: 0 0 11px; }
.wall-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 82px; gap: 8px; }
.shot { position: relative; display: block; overflow: hidden; border: 4px solid #fff; border-radius: 4px; box-shadow: 0 2px 0 rgba(35,64,82,.05), 0 5px 11px rgba(35,64,82,.13); color: #fff; transition: transform .18s, box-shadow .18s, z-index 0s; }
.shot:hover { transform: rotate(-1.2deg) scale(1.035); z-index: 3; box-shadow: 0 8px 18px rgba(35,64,82,.22); color: #fff; }
.shot:nth-child(even):hover { transform: rotate(1.2deg) scale(1.035); }
.shot:before, .shot:after { content: ""; position: absolute; }
.shot .glyph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; opacity: .55; z-index: 1; }
.shot .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 7px 5px; background: linear-gradient(transparent, rgba(24,52,66,.72)); font-size: 9px; line-height: 1.25; opacity: 0; transform: translateY(4px); transition: .18s; }
.shot:hover .cap { opacity: 1; transform: none; }
.shot .cap b { display: block; font-size: 10px; }
.shot .likes { position: absolute; z-index: 2; top: 5px; right: 5px; padding: 1px 6px; border-radius: 9px; background: rgba(255,255,255,.88); color: #d9606e; font-size: 9px; font-weight: 800; }
.shot.new:after { content: "NY!"; top: 6px; left: 6px; padding: 1px 5px; border-radius: 3px; background: var(--coral); color: #fff; font: 900 8px 'DM Sans'; letter-spacing: .06em; z-index: 2; }
.w-a { grid-column: span 2; grid-row: span 3; }
.w-b { grid-column: span 2; grid-row: span 2; }
.w-c { grid-column: span 2; grid-row: span 1; }
.w-d { grid-column: span 1; grid-row: span 1; }
.w-e { grid-column: span 2; grid-row: span 2; }
.w-f { grid-column: span 1; grid-row: span 2; }
.w-g { grid-column: span 2; grid-row: span 1; }
.w-h { grid-column: span 1; grid-row: span 1; }

.ph-sunset { background: linear-gradient(170deg, #f7d59b 0%, #ec9c85 48%, #a8718f 100%); }
.ph-sunset:before { width: 140px; height: 140px; border-radius: 50%; background: rgba(255,238,196,.45); top: -40px; right: -20px; }
.ph-sunset:after { left: -20px; right: -20px; bottom: -22px; height: 60px; border-radius: 50% 50% 0 0; background: #3f6f73; transform: rotate(-4deg); }
.ph-forest { background: linear-gradient(#a6cbb0, #4f836d); }
.ph-forest:before { width: 70px; height: 110px; bottom: -22px; left: 20%; background: #cfe0b3; border-radius: 100% 0 100% 0; transform: rotate(-30deg); box-shadow: 40px -14px 0 #6c9d7a, -14px -26px 0 #dde3ae; }
.ph-sky { background: linear-gradient(#80c0d8, #d7e8d9 72%, #e8c9a6); }
.ph-sky:before { width: 80px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.78); top: 14%; left: 14%; box-shadow: 22px 4px 0 2px rgba(255,255,255,.55); }
.ph-city { background: linear-gradient(#2c3e63, #6a5a8e 60%, #e79a7c); }
.ph-city:before { left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(90deg, #1b2840 0 12%, transparent 12% 15%, #202f4b 15% 30%, transparent 30% 33%, #18243b 33% 52%, transparent 52% 55%, #243453 55% 74%, transparent 74% 77%, #1b2840 77%); clip-path: polygon(0 40%, 12% 40%, 12% 10%, 30% 10%, 30% 55%, 52% 55%, 52% 0, 74% 0, 74% 35%, 100% 35%, 100% 100%, 0 100%); }
.ph-city:after { width: 26px; height: 26px; border-radius: 50%; background: #ffe2a6; top: 14%; right: 18%; box-shadow: 0 0 0 6px rgba(255,226,166,.25); }
.ph-cat { background: linear-gradient(145deg, #f1d9ae, #d79b6b); }
.ph-cat:before { width: 58%; height: 58%; border-radius: 48%; background: #8a6a55; bottom: -10%; left: 21%; box-shadow: inset 0 0 0 5px rgba(255,255,255,.1); }
.ph-cat:after { width: 14%; height: 14%; border-radius: 50%; background: #ffe9a8; top: 40%; left: 36%; box-shadow: 34px 0 0 #ffe9a8; }
.ph-water { background: linear-gradient(#bfe3ea, #4b9eb2 60%, #2d6f8b); }
.ph-water:before { left: -10%; right: -10%; top: 54%; height: 4px; background: rgba(255,255,255,.55); box-shadow: 0 9px 0 rgba(255,255,255,.35), 0 18px 0 rgba(255,255,255,.2); }
.ph-autumn { background: linear-gradient(160deg, #f3c872, #d9783f 55%, #8d4a3b); }
.ph-autumn:before { width: 46px; height: 46px; border-radius: 0 100% 0 100%; background: #b7452f; top: 20%; left: 16%; transform: rotate(20deg); box-shadow: 52px 22px 0 -6px #e6a43e, 14px 52px 0 -10px #c9602c; }
.ph-snack { background: linear-gradient(145deg, #f9e3df, #e8a2a1); }
.ph-snack:before { width: 56%; height: 56%; border-radius: 50%; background: #f5d7a0; top: 22%; left: 22%; box-shadow: inset 0 0 0 6px #e7b46e, inset 0 0 0 14px rgba(255,255,255,.18); }
.ph-neon { background: linear-gradient(135deg, #3b3a77, #b34d93 70%, #f0907d); }
.ph-neon:before { width: 60%; height: 6px; top: 36%; left: 20%; border-radius: 3px; background: #7ff4e6; box-shadow: 0 0 10px #7ff4e6, 0 16px 0 #ffe27a, 0 16px 10px #ffe27a; }
.ph-snow { background: linear-gradient(#d9e8f2, #f4f8fb 70%); }
.ph-snow:before { width: 90%; height: 40%; left: 5%; bottom: -14%; border-radius: 50% 50% 0 0; background: #fff; box-shadow: 0 -2px 0 #c6d9e6; }
.ph-snow .glyph { color: #7fa6c0; }

.wall-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; padding-top: 9px; border-top: 1px dashed #d3e0e2; font-size: 10px; color: #8a99a3; }
.wall-foot .tags { display: flex; gap: 5px; flex-wrap: wrap; }
.wall-foot .tags a { padding: 2px 8px; border-radius: 10px; background: #fff; border: 1px solid #d6e5e6; color: #4b8796; font-weight: 700; }
.wall-foot .tags a:hover { background: var(--coral); border-color: var(--coral); color: #fff; }

/* ---------- Forum ---------- */
.forum-head, .forum-row { display: grid; grid-template-columns: minmax(0, 1fr) 54px 64px 150px; align-items: center; gap: 10px; padding: 0 13px; }
.forum-head { min-height: 28px; background: #f3f8fa; border-bottom: 1px solid #e3e9ed; color: #8ba0ae; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.forum-head span:nth-child(2), .forum-head span:nth-child(3) { text-align: center; }
.forum-row { min-height: 54px; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid #eef2f4; transition: background .15s; }
.forum-row:hover { background: #fafdfd; }
.forum-row:last-of-type { border-bottom: 0; }
.topic { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topic-icon { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; background: #e1eef6; color: #2c7299; font-size: 14px; box-shadow: inset 0 1px rgba(255,255,255,.5); }
.topic-icon.hot { background: #fde7e1; color: #e0705f; }
.topic-icon.pin { background: #fff1cc; color: #c9961f; }
.topic-icon.q { background: #e4f4ea; color: #3e9966; }
.topic h3 { margin: 0; font: 800 12px/1.3 'Nunito'; }
.topic h3 a { color: #34607a; }
.topic h3 a:hover { color: var(--coral); }
.topic small { display: block; margin-top: 1px; color: #9aa7af; font-size: 9px; }
.badge { display: inline-block; margin-right: 4px; padding: 0 5px; border-radius: 3px; background: var(--coral); color: #fff; font: 900 8px/14px 'DM Sans'; letter-spacing: .06em; vertical-align: 1px; }
.badge.gold { background: #e3ae3d; }
.badge.green { background: #46ae79; }
.num { text-align: center; color: #5d7788; font: 900 13px 'Nunito'; }
.num small { display: block; margin: 0; color: #a2adb4; font: 500 8px 'DM Sans'; }
.last-post { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 10px; line-height: 1.35; color: #8a99a3; }
.last-post .tiny-avatar { width: 26px; height: 26px; font-size: 11px; }
.last-post b { display: block; color: #4c7890; }

.tiny-avatar { position: relative; display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 7px; color: white; font: 900 13px 'Nunito'; }
.tiny-avatar i { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border: 2px solid white; border-radius: 50%; background: #49bb79; }
.tiny-avatar i.away { background: #e6b74b; }

/* ---------- Upptäck ---------- */
.discover-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.disc-card { display: flex; flex-direction: column; }
.disc-top { position: relative; height: 66px; background: linear-gradient(120deg, #2f8499, #6bbdb3 56%, #f1c96d); }
.disc-top:before { content: ""; position: absolute; inset: 0; opacity: .24; background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(255,255,255,.55) 12px 13px, transparent 13px 25px); }
.disc-top.d2 { background: linear-gradient(120deg, #c64f7a, #e88c99 55%, #f8c8a0); }
.disc-top.d3 { background: linear-gradient(120deg, #293c61, #536c90 55%, #8cb4cf); }
.disc-top .kind { position: absolute; left: 9px; top: 8px; z-index: 1; padding: 2px 6px; background: rgba(27,60,78,.38); border: 1px solid rgba(255,255,255,.45); border-radius: 4px; color: #fff; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.disc-top .ico { position: absolute; right: 10px; top: 6px; z-index: 1; color: rgba(255,255,255,.85); font-size: 22px; }
.disc-body { position: relative; flex: 1; padding: 22px 11px 10px; }
.disc-badge { position: absolute; top: -24px; left: 10px; z-index: 2; width: 46px; height: 46px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 10px; box-shadow: 0 2px 5px #8aa8b3; color: #fff; font: 900 20px 'Nunito'; }
.disc-body h3 { margin: 0;padding: 5px;  font: 900 14px 'Nunito'; color: #2e4f65; }
.disc-body .sub { color: #94a1aa; font-size: 9px; }
.disc-body p { margin: 6px 0 0; color: #687887; font-size: 10.5px; line-height: 1.55; }
.disc-foot { display: flex; align-items: center; justify-content: space-between; padding: 7px 11px; border-top: 1px dashed #e3eaee; background: #fbfcfd; font-size: 9px; color: #93a0a9; }
.disc-foot a { font-weight: 800; }

/* ---------- Sidokolumn ---------- */
.online-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px 5px; padding: 11px 10px 9px; border-bottom: 1px dashed #e6ecef; }
.online-strip a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #587487; font-size: 9px; font-weight: 700; }
.online-strip .tiny-avatar { width: 38px; height: 38px; font-size: 16px; border: 2px solid #fff; outline: 1px solid #d9e3e8; box-shadow: 0 2px 4px #dbe5ea; transition: transform .15s; }
.online-strip a:hover .tiny-avatar { transform: translateY(-2px) rotate(-3deg); }
.online-strip .tiny-avatar i { width: 10px; height: 10px; }
.online-person { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-bottom: 1px solid #f0f3f5; }
.online-person:last-child { border-bottom: 0; }
.online-person > span { min-width: 0; flex: 1; }
.online-person b, .online-person small { display: block; }
.online-person b { color: #4c6d83; font-size: 10px; }
.online-person small { color: #9aa6ae; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.online-person button { border: 0; background: transparent; color: #82a4b5; font-size: 15px; }
.online-person button:hover { color: var(--coral); }

.newbie { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-bottom: 1px solid #f0f3f5; }
.newbie:last-of-type { border-bottom: 0; }
.newbie .tiny-avatar { width: 34px; height: 34px; border: 2px solid #fff; outline: 1px solid #dce5e9; font-size: 15px; }
.newbie div { min-width: 0; flex: 1; }
.newbie b { display: block; color: #4c7890; font-size: 10.5px; }
.newbie small { display: block; color: #9aa6ae; font-size: 9px; }
.newbie button { padding: 3px 8px; border: 1px solid #cddfe5; border-radius: 10px; background: #fff; color: #47788f; font-size: 9px; font-weight: 800; }
.newbie button:hover { background: #e3f5f3; border-color: #8bc7ca; }
.newbie button.sent { background: #e1f4e9; border-color: #b5e0c8; color: #459b6a; }

.event-row { display: flex; gap: 9px; padding: 10px 11px; border-bottom: 1px solid #edf1f3; }
.event-row:last-child { border-bottom: 0; }
.event-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 7px; background: #fff4d8; font-size: 16px; }
.event-row:nth-child(3) .event-icon { background: #e7f3fa; }
.event-row:nth-child(4) .event-icon { background: #e7f5ed; }
.event-row > div:last-child { min-width: 0; }
.event-row b, .event-row small, .event-row a { display: block; }
.event-row b { color: #536a7c; font-size: 10px; }
.event-row small { color: #94a0a9; font-size: 9px; }
.event-row a { margin-top: 2px; font-size: 9px; font-weight: 700; }

.poll { padding: 12px 12px 10px; }
.poll h3 { margin: 0 0 9px; font: 900 13px/1.35 'Nunito'; color: #2e4f65; }
.poll-row { margin-bottom: 11px; }
.poll-label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; color: #46697d; font-size: 10.5px; font-weight: 700; }
.poll-label b { color: #2e8a85; font: 900 11px 'Nunito', sans-serif; }
.poll-track { height: 9px; overflow: hidden; border-radius: 5px; background: #e9f0f3; box-shadow: inset 0 1px 2px rgba(35,64,82,.08); }
.poll-track i { display: block; height: 100%; width: var(--pct); border-radius: 5px; background: linear-gradient(#52c0b7, #2e9e99); box-shadow: inset 0 1px rgba(255,255,255,.3); transform-origin: left; animation: poll-grow .9s cubic-bezier(.2,.8,.3,1) both; }
.poll-row.c2 .poll-track i { background: linear-gradient(#4d9fc4, #2c7299); }
.poll-row.c2 .poll-label b { color: #2c7299; }
.poll-row.c3 .poll-track i { background: linear-gradient(#f2d070, #e3ae3d); }
.poll-row.c3 .poll-label b { color: #b98a1f; }
.poll-row.c4 .poll-track i { background: linear-gradient(#f39a8a, #e0705f); }
.poll-row.c4 .poll-label b { color: #d4604f; }
@keyframes poll-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.poll small { display: block; margin-top: 2px; color: #a0abb2; font-size: 9px; }

.tag-cloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; padding: 12px; }
.tag-cloud a { font-weight: 700; color: #5d8ea3; line-height: 1.2; }
.tag-cloud a:hover { color: var(--coral); }
.tag-cloud .t1 { font-size: 10px; }
.tag-cloud .t2 { font-size: 12px; color: #3f8296; }
.tag-cloud .t3 { font: 900 15px 'Nunito'; color: #2c7299; }
.tag-cloud .t4 { font: 900 19px 'Nunito'; color: #e17869; }

.quote-card { position: relative; overflow: hidden; padding: 17px 17px 14px; background: linear-gradient(135deg,#f8e8c7,#f6d9c9); border: 1px solid #efd5b6; border-radius: 7px; color: #866d57; box-shadow: var(--shadow); }
.quote-mark { position: absolute; top: -17px; right: 12px; color: rgba(255,255,255,.65); font: 900 85px Georgia; }
.quote-card p { position: relative; margin: 0 0 10px; font: 800 13px/1.6 'Nunito'; }
.quote-card > span { font-size: 8px; font-weight: 900; letter-spacing: .1em; color: #a18368; }
.quote-stars { margin-top: 9px; color: #d4a454; letter-spacing: 5px; }

/* ---------- Fot ---------- */
.site-footer { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin: 26px 0 28px; padding: 15px 3px; border-top: 1px solid #d2dee4; color: #8998a2; font-size: 10px; }
.footer-brand { margin-right: auto; }
.footer-brand b { color: #3e7c96; font: 900 16px 'Nunito'; }
.footer-brand span { margin-left: 5px; }
.site-footer > div:nth-child(2) { display: flex; gap: 15px; }
.site-footer a { color: #6f8796; }
.copyright { width: 100%; font-size: 9px; color: #a0abb3; }

:root{
  --blue-top:#3b91b2; --blue-bottom:#286c91; --lm-coral:#ef6684; --gold:#f1c75d; --ink:#344957;
}
*{box-sizing:border-box}
body{margin:0;padding:24px 16px;background:#eaf0f3;font:13px/1.5 'DM Sans',Arial,sans-serif;color:var(--ink);min-height:100vh}

/* ===== SKAL (som min.html) ===== */
.lm-shell{
  max-width:1196px;margin:0 auto;display:grid;grid-template-columns:5px 62px minmax(0,1fr);
  background:#fff;border:1px solid #d5e0e6;box-shadow:0 2px 7px rgba(38,67,82,.12);
  border-radius:5px;overflow:hidden;color:var(--ink)}
.lm-strip{grid-column:1;grid-row:1/4;height:89px;background:linear-gradient(var(--blue-top),var(--blue-bottom))}

/* ===== PROFILBILD ===== */
.lm-avatar{grid-column:2;grid-row:1/4;position:relative;display:flex;align-items:center;justify-content:center;
  height:89px;min-width:0;overflow:hidden;background:#f8fafc}
.lm-avatar-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;background:#e7eef2;
  transition:transform .4s cubic-bezier(.2,.9,.3,1.2)}
.lm-avatar:hover .lm-avatar-img{transform:scale(1.1)}
.lm-dot{position:absolute;right:5px;bottom:5px;width:11px;height:11px;border-radius:50%;background:#4dbb82;
  border:2px solid #fff;animation:lm-online 2s infinite}
@keyframes lm-online{0%{box-shadow:0 0 0 0 rgba(77,187,130,.6)}70%{box-shadow:0 0 0 7px rgba(77,187,130,0)}100%{box-shadow:0 0 0 0 rgba(77,187,130,0)}}

.lm-right{grid-column:3;grid-row:1/4;min-width:0;display:flex;flex-direction:column}

/* ===== HUVUDMENY ===== */
.lm-main{display:flex;align-items:stretch;min-width:0;height:35px;margin:0;padding:0;
  background:linear-gradient(#fff,#f5f8fa)}
.lm-tabs{position:relative;display:flex;min-width:0;overflow-x:auto;scrollbar-width:none}
.lm-tabs::-webkit-scrollbar{display:none}
.lm-pill{position:absolute;top:0;bottom:0;left:0;width:0;z-index:0;
  background:linear-gradient(var(--blue-top),var(--blue-bottom));
  box-shadow:inset 0 1px rgba(255,255,255,.22);
  transition:transform .35s cubic-bezier(.3,.9,.3,1.1),width .35s cubic-bezier(.3,.9,.3,1.1)}
.lm-tab{position:relative;z-index:1;flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:5px;
  padding:0 13px;border-right:1px solid #e4ebef;color:#526779;font-size:11px;font-weight:700;
  text-decoration:none;white-space:nowrap;transition:color .2s,background .2s}
.lm-tab::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:var(--lm-coral);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.lm-tab:hover{background:#edf4f7;color:#2c7299}
.lm-tab:hover::after{transform:scaleX(1)}
.lm-tab.active,.lm-tab.active:hover{color:#fff;background:transparent}
.lm-tab.active::after{transform:scaleX(0)}
.lm-tab span{display:inline-block;transition:transform .2s}
.lm-tab:hover span{transform:translateY(-1px)}
.lm-tab em{font-style:normal;font-size:9px;font-weight:800;padding:1px 5px;background:var(--lm-coral);color:#fff;
  animation:lm-badge 2.4s infinite}
@keyframes lm-badge{0%{box-shadow:0 0 0 0 rgba(239,102,132,.6)}60%,100%{box-shadow:0 0 0 6px rgba(239,102,132,0)}}
.lm-tab em.bump{animation:lm-badge 2.4s infinite,lm-wig .6s}
@keyframes lm-wig{0%,100%{transform:none}25%{transform:rotate(-14deg) scale(1.25)}50%{transform:rotate(12deg) scale(1.25)}75%{transform:rotate(-6deg)}}

.lm-search{margin-left:auto;display:flex;align-items:center;gap:5px;padding:0 8px;min-width:0}
.lm-search-icon{font-size:22px;color:#8b9aa5;transition:color .2s,transform .2s}
.lm-search:focus-within .lm-search-icon{color:#2e9e99;transform:scale(1.15)}
.lm-search input{width:110px;min-width:35px;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:11px;
  border-bottom:1px solid transparent;transition:width .3s,border-color .2s}
.lm-search input:focus{width:170px;border-bottom-color:#8bc7ca}
.lm-search button{border:0;background:#dfeef3;color:#326d89;padding:5px 9px;border-radius:5px;font:700 11px 'DM Sans',Arial,sans-serif;
  cursor:pointer;transition:background .15s,transform .15s}
.lm-search button:hover{background:#cfe5ee;transform:translateY(-1px)}

/* ===== UNDERMENY ===== */
.lm-sub{display:flex;align-items:stretch;height:25px;margin:0;padding:0;
  background:linear-gradient(var(--blue-bottom),var(--blue-top));border-bottom:1px solid #245e7e;
  overflow-x:auto;scrollbar-width:none}
.lm-sub::-webkit-scrollbar{display:none}
.lm-sub a{flex:0 0 auto;display:flex;align-items:center;padding:0 10px;color:rgba(255,255,255,.88);font-size:10px;font-weight:600;
  text-decoration:none;border-right:1px solid rgba(255,255,255,.16);white-space:nowrap;
  opacity:0;transform:translateY(6px);animation:lm-subin .35s forwards;transition:background .15s,color .15s}
.lm-sub a:hover{background:rgba(255,255,255,.14);color:#fff}
.lm-sub a.on{color:#fff;background:rgba(0,0,0,.16);box-shadow:inset 0 -2px var(--gold)}
.lm-sub .lock{margin-left:4px;font-size:8px;opacity:.7}
@keyframes lm-subin{to{opacity:1;transform:none}}

/* ===== Playarea-RUTAN ===== */
.lm-status{position:relative;overflow:hidden;flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:26px;min-width:0;padding:4px 10px;color:#f3f5f6;font-size:11px;
  background:linear-gradient(to bottom,#494d50 0%,#35383b 45%,#2a2c2e 90%,#1a1b1c 100%);border-top:1px solid #25282a}
.lm-status::before{content:"";position:absolute;top:0;bottom:0;left:-30%;width:25%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent);animation:lm-glide 8s linear infinite}
@keyframes lm-glide{to{left:130%}}
.lm-status-text{position:relative;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:opacity .3s,transform .3s}
.lm-status-text.fade{opacity:0;transform:translateY(-5px)}
.lm-status-text strong{color:var(--gold)}
.lm-btn{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-height:20px;padding:2px 7px;border:1px solid #247f7d;border-radius:4px;color:#fff;
  font:700 9px/1.2 tahoma,verdana,sans-serif;letter-spacing:.7px;text-decoration:none;white-space:nowrap;
  background:linear-gradient(#43b2a9,#278f8e);
  box-shadow:inset 0 1px rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.18);
  animation:lm-breathe 3.2s ease-in-out infinite;transition:filter .15s,transform .15s}
.lm-btn:hover{filter:brightness(1.08);transform:translateY(-1px);color:#fff}
@keyframes lm-breathe{0%,100%{box-shadow:inset 0 1px rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.18),0 0 0 0 rgba(67,178,169,0)}
  50%{box-shadow:inset 0 1px rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.18),0 0 10px 2px rgba(67,178,169,.55)}}

/* ===== TOAST ===== */
.lm-toast{position:fixed;left:50%;bottom:22px;z-index:50;padding:10px 16px;border-radius:9px;background:#2a3b4a;color:#fff;
  font-size:12px;box-shadow:0 8px 24px rgba(20,40,55,.3);opacity:0;pointer-events:none;transform:translate(-50%,14px);transition:.25s}
.lm-toast.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.lm-toast a{color:#ffd77a;font-weight:800;margin-left:8px;text-decoration:none}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ---------- Inloggning (i .panel, samma stil som resten av sidan) ---------- */
.login-panel { display: flex; flex-direction: column; }
.login-panel .panel-heading small { font-weight: 500; letter-spacing: 0; }

.lajv-login-form {
  display: flex; flex-direction: column; flex: 1; gap: 10px;
  padding: 13px 13px 0;
  background: linear-gradient(180deg, #fffdf6, #fff 55%);
}
.form-field { display: flex; flex-direction: column; gap: 4px; }
.lajv-login-form label {
  color: #52687a; font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase;
}
.lajv-login-form input,
.lajv-login-form select {
  width: 100%; min-height: 34px; padding: 7px 11px;
  border: 1px solid #dfe7eb; border-radius: 5px; background: #fbfcfd;
  color: var(--ink); font: 500 12px 'DM Sans', Arial, sans-serif; outline: 0;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.lajv-login-form input::placeholder { color: #a0abb2; }
.lajv-login-form input:hover,
.lajv-login-form select:hover { border-color: #bcd3da; }
.lajv-login-form input:focus,
.lajv-login-form select:focus {
  border-color: #8bc7ca; background: #fff; box-shadow: 0 0 0 3px #e3f5f3;
}
.lajv-login-form select { cursor: pointer; color: #5d7180; }

.lajv-login-button {
  margin-top: 2px; padding: 9px 12px;
  border: 1px solid #258986; border-radius: 5px;
  background: linear-gradient(#43b2a9, #278f8e); color: #fff;
  font-size: 12px; font-weight: 800;
  box-shadow: inset 0 1px rgba(255,255,255,.24), 0 2px 0 rgba(25,55,72,.09);
  transition: transform .12s, filter .12s;
}
.lajv-login-button:hover { filter: brightness(1.04); transform: translateY(-1px); }
.lajv-login-button:active { transform: translateY(1px); }
.lajv-login-button:focus-visible { outline: 3px solid #cfeceb; outline-offset: 2px; }

.login-footer {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  margin: 3px -13px 0; padding: 8px 12px;
  border-top: 1px solid #edf0f2; background: #fbfcfd;
  font-size: 10px; font-weight: 700;
}
.login-footer a { color: var(--blue); }
.login-footer a:hover { color: var(--coral); }
.login-footer span { color: #93a0a9; font-weight: 500; }
.login-footer span a { font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .lajv-login-form * { transition: none !important; }
}

.spot-extra { display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 13px; border-top: 1px dashed #e3eaee; background: #fffdf8; color: #8998a2; font-size: 10px; }
.spot-extra b { color: #60798b; }
.member-online { color: #3aa878; font: 800 9px 'DM Sans', sans-serif; white-space: nowrap; }
.member-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.member-tags span { padding: 3px 6px; border: 1px solid #d8e8e9; border-radius: 4px; background: #eef8f6; color: #4c8b88; font-size: 9px; font-weight: 700; }

/* =========================================================
   Playarea — profilbild + huvudnavigation under masthead
   Avgränsad till .account-nav-layout för att undvika CSS-krockar.
   ========================================================= */
.account-nav-layout {
  --account-avatar-width: 50px;
  --account-brand-width: 5px;
  --account-nav-height: 47px;
  --account-banner-height: 26px;

  display: grid;
  grid-template-columns:
    var(--account-brand-width)
    var(--account-avatar-width)
    minmax(0, 1fr);
  grid-template-rows: var(--account-nav-height) var(--account-banner-height);
  gap: 0;
  width: 100%;
  margin: 0 0 14px;
  background: #fff;
  border: 1px solid #dce4e9;
  box-shadow: var(--shadow);
}

.account-nav-layout .brand-strip {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 71px;
  margin: 1px 0 0;
  background: linear-gradient(180deg, #3b91b2, #286c91);
  border: 2px solid #286c91;
  border-right: 0;
  box-shadow: inset 0 1px rgba(255, 255, 255, .2);
    outline: 1px solid #dce4e9;
  outline-offset: 0;
  width: 5px;
}


.account-nav-layout .avatar-container {
  grid-column: 2;
  grid-row: 1 / 3;
  width: var(--account-avatar-width);
  height: calc(var(--account-nav-height) + var(--account-banner-height));
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid #d5e0e6;
  border-left: 0;
}

.account-nav-layout .avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 2px solid #286c91;
  border-left: 0;
  box-shadow: 0 1px 3px rgba(24, 70, 95, .18);
}

.account-nav-layout .main-nav {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  min-height: var(--account-nav-height);
  height: var(--account-nav-height);
  border-radius: 0;
  box-shadow: none;
}

.account-nav-layout .main-nav > a {
  font-size: 12px;
}

.account-nav-layout .nav-search {
  min-width: 0;
}

.account-nav-layout .nav-search input {
  min-width: 55px;
}

.account-nav-layout .banner-bottom-text {
  grid-column: 3;
  grid-row: 2;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 25px;
  padding: 3px 12px;
  overflow: hidden;
background: linear-gradient(to bottom, #494d50 0%, #35383b 45%, #2a2c2e 90%, #1a1b1c 100%);
  justify-content: space-between;
  border-top: 0;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}

.account-nav-layout .banner-bottom-text p {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0; 
  flex: 1;
}
.account-nav-layout .banner-signature {
  flex: 0 0 auto;
  margin-left: 12px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}


/* =========================================================
   Playarea — pages2.css
   Extra CSS för installningar.html, bilder.html, klubbar.html.
   Lägger bara till nya klasser. Använd tillsammans med style.css + pages.css
   ========================================================= */

.sub-note { margin: -4px 2px 12px; color: #93a0aa; font-size: 11px; }

/* ---------- Knappar (små extra) ---------- */
.button.small { padding: 5px 10px; font-size: 10px; }
.button-danger { color: #fff; background: linear-gradient(#e8806f, #cf5a4b); border-color: #c85446; }
.button-danger:hover { color: #fff; }
.button:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* =========================================================
   INSTÄLLNINGAR
   ========================================================= */
.set-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 0; }
.set-menu { margin: 0; padding: 6px 0; list-style: none; border-right: 1px solid #e3e9ed; background: #fbfcfd; }
.set-menu a { display: flex; align-items: center; gap: 9px; padding: 10px 14px; color: #5d7788; font-size: 12px; font-weight: 700; border-left: 3px solid transparent; }
.set-menu a i { font-style: normal; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: #e1eef6; color: #2c7299; font-size: 11px; }
.set-menu a:hover { background: #f3f8fa; }
.set-menu a.on { background: #fff; color: #2c7299; border-left-color: #3a91a9; }
.set-menu a.on i { background: #3a91a9; color: #fff; }
.set-section { display: none; }
.set-section.on { display: block; }
.set-form { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 0; background: linear-gradient(180deg, #fffdf6, #fff 40%); }
.set-form h3 { margin: 0 0 -2px; font: 900 15px 'Nunito', sans-serif; color: #2e4f65; }
.set-form > p { margin: 0; color: #8a98a2; font-size: 11px; }
.set-form label { color: #52687a; font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.set-form input[type="text"], .set-form input[type="email"], .set-form input[type="password"], .set-form input[type="date"], .set-form select, .set-form textarea {
  width: 100%; min-height: 34px; padding: 7px 11px; border: 1px solid #dfe7eb; border-radius: 5px; background: #fbfcfd;
  color: var(--ink); font: 500 12px 'DM Sans', Arial, sans-serif; outline: 0; transition: border-color .15s, box-shadow .15s, background .15s;
}
.set-form textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.set-form input:hover, .set-form select:hover, .set-form textarea:hover { border-color: #bcd3da; }
.set-form input:focus, .set-form select:focus, .set-form textarea:focus { border-color: #8bc7ca; background: #fff; box-shadow: 0 0 0 3px #e3f5f3; }
.set-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.set-form .counter { text-align: right; color: #93a0aa; font-size: 10px; }
.set-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px -16px 0; padding: 10px 16px; border-top: 1px solid #edf0f2; background: #fbfcfd; }
.set-foot small { color: #93a0aa; font-size: 10px; }

.avatar-edit { display: flex; align-items: center; gap: 14px; padding: 4px 0; }
.avatar-edit .me-photo { width: 64px; height: 64px; }
.avatar-edit small { display: block; color: #93a0aa; font-size: 10px; margin-top: 3px; }

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid #f0f3f5; }
.switch-row:last-of-type { border-bottom: 0; }
.switch-row b { display: block; color: #3b5365; font: 800 12px 'Nunito', sans-serif; }
.switch-row small { display: block; color: #93a0aa; font-size: 10px; line-height: 1.4; }
.switch { position: relative; flex: 0 0 auto; width: 38px; height: 21px; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 11px; background: #cdd8de; transition: background .2s; box-shadow: inset 0 1px 2px rgba(35,64,82,.12); }
.switch span:after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(35,64,82,.3); transition: transform .2s; }
.switch input:checked + span { background: linear-gradient(#43b2a9, #278f8e); }
.switch input:checked + span:after { transform: translateX(17px); }
.switch input:focus-visible + span { outline: 3px solid #cfeceb; }

.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches button { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border: 2px solid #e0e8ec; border-radius: 7px; background: #fff; color: #5d7788; font-size: 11px; font-weight: 700; }
.swatches button i { width: 16px; height: 16px; border-radius: 50%; }
.swatches button.on { border-color: #3a91a9; background: #f1f8fa; color: #2c7299; }
.danger-zone { padding: 12px 14px; }
.danger-zone p { margin: 0 0 9px; color: #7d8d98; font-size: 11px; line-height: 1.5; }
.sess-row { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-bottom: 1px solid #f0f3f5; font-size: 11px; color: #657888; }
.sess-row:last-child { border-bottom: 0; }
.sess-row b { display: block; color: #3b5365; font-size: 11px; }
.sess-row small { color: #93a0aa; font-size: 9px; }
.sess-row .ni { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; background: #e1eef6; color: #2c7299; }
.sess-row .cur { margin-left: auto; color: #3aa878; font-size: 9px; font-weight: 800; }

/* =========================================================
   BILDER
   ========================================================= */
.gal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; background: linear-gradient(#fff, #f9fbfc); border-bottom: 1px solid #e3e9ed; }
.gal-tools select { min-height: 30px; padding: 5px 10px; border: 1px solid #dfe7eb; border-radius: 5px; background: #fbfcfd; color: #5d7180; font-size: 11px; outline: 0; }
.gal-tools .gal-count { margin-left: auto; color: #93a0aa; font-size: 10px; }
.gal-tools .gal-count b { color: #60798b; }
.gal-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.gal-chips button { padding: 4px 11px; border: 1px solid #d6e5e6; border-radius: 12px; background: #fff; color: #4b8796; font-size: 10px; font-weight: 800; }
.gal-chips button:hover { border-color: #8bc7ca; }
.gal-chips button.on { background: #3a91a9; border-color: #3a91a9; color: #fff; }
.gal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px; background: linear-gradient(160deg, #fffdf7, #f2f8f7); }
.gal-grid .shot { aspect-ratio: 4 / 3; border-radius: 4px; cursor: pointer; padding: 0; width: 100%; font: inherit; text-align: left; }
.gal-grid .shot .cap { opacity: 1; transform: none; }
.gal-grid .shot.userimg { background-size: cover; background-position: center; }
.gal-empty { grid-column: 1 / -1; padding: 28px 10px; text-align: center; color: #93a0aa; font-size: 12px; }
.shot .likes.on { background: #d9606e; color: #fff; }

.album-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.album { display: block; color: inherit; }
.album:hover { color: inherit; }
.album .cover { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border: 4px solid #fff; border-radius: 4px; box-shadow: 0 2px 0 rgba(35,64,82,.05), 0 5px 11px rgba(35,64,82,.13); transition: transform .18s; }
.album:hover .cover { transform: rotate(-1.2deg) scale(1.03); }
.album .cover:before, .album .cover:after { content: ""; position: absolute; }
.album b { display: block; margin-top: 7px; color: #34607a; font: 800 12px 'Nunito', sans-serif; }
.album small { color: #9aa7af; font-size: 10px; }
.album.add .cover { display: grid; place-items: center; background: #f3f8fa; border: 2px dashed #bcd3da; box-shadow: none; color: #5b9aab; font: 900 34px 'Nunito'; }

.upload-box { display: none; padding: 14px; border-bottom: 1px solid #e3e9ed; background: linear-gradient(180deg, #fffdf6, #fff); }
.upload-box.show { display: block; }
.drop { display: grid; place-items: center; gap: 4px; padding: 22px 12px; border: 2px dashed #bcd3da; border-radius: 8px; background: #f7fbfc; color: #5d7788; text-align: center; font-size: 12px; cursor: pointer; transition: background .15s, border-color .15s; }
.drop:hover, .drop.over { background: #e9f6f5; border-color: #6fbcbc; }
.drop b { font: 900 14px 'Nunito', sans-serif; color: #2e4f65; }
.drop small { color: #93a0aa; font-size: 10px; }
.drop input { display: none; }
.upload-fields { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.upload-fields input[type="text"], .upload-fields select { flex: 1 1 160px; min-height: 32px; padding: 6px 10px; border: 1px solid #dfe7eb; border-radius: 5px; background: #fbfcfd; font-size: 11px; color: var(--ink); outline: 0; }
.upload-fields input:focus, .upload-fields select:focus { border-color: #8bc7ca; box-shadow: 0 0 0 3px #e3f5f3; }

.lb { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 38, 50, .72); }
.lb.show { display: flex; }
.lb-box { display: grid; grid-template-columns: minmax(0, 1fr) 250px; width: min(880px, 100%); max-height: 90vh; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 18px 50px rgba(10,25,35,.45); }
.lb-img { position: relative; overflow: hidden; min-height: 340px; }
.lb-img:before, .lb-img:after { content: ""; position: absolute; }
.lb-img.userimg { background-size: cover; background-position: center; }
.lb-side { display: flex; flex-direction: column; padding: 14px; gap: 8px; overflow-y: auto; }
.lb-side h3 { margin: 0; font: 900 16px 'Nunito', sans-serif; color: #2e4f65; }
.lb-side small { color: #93a0aa; font-size: 10px; }
.lb-side .cmt { padding: 7px 9px; border-left: 3px solid #cfe1e8; border-radius: 0 5px 5px 0; background: #f4f8fa; color: #566e7e; font: 700 11px/1.5 'Nunito'; }
.lb-side .cmt b { color: #2e6685; }
.lb-side form { display: flex; gap: 5px; margin-top: auto; }
.lb-side input { flex: 1; min-width: 0; padding: 6px 9px; border: 1px solid #dfe7eb; border-radius: 5px; font-size: 11px; outline: 0; }
.lb-side input:focus { border-color: #8bc7ca; box-shadow: 0 0 0 3px #e3f5f3; }
.lb-actions { display: flex; gap: 6px; }
.lb-close { position: absolute; top: 14px; right: 18px; z-index: 2; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: #3b5365; font-size: 16px; }
.lb-close:hover { background: var(--coral); color: #fff; }

/* =========================================================
   KLUBBAR
   ========================================================= */
.club-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; background: linear-gradient(#fff, #f9fbfc); border-bottom: 1px solid #e3e9ed; }
.club-tools input[type="search"], .club-tools select { min-height: 30px; padding: 5px 10px; border: 1px solid #dfe7eb; border-radius: 5px; outline: 0; background: #fbfcfd; color: var(--ink); font-size: 11px; }
.club-tools input[type="search"] { flex: 1 1 180px; min-width: 150px; }
.club-tools input:focus, .club-tools select:focus { border-color: #8bc7ca; background: #fff; box-shadow: 0 0 0 3px #e3f5f3; }
.club-tools .club-count { margin-left: auto; color: #93a0aa; font-size: 10px; white-space: nowrap; }
.club-tools .club-count b { color: #60798b; }
.club-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 14px; background: linear-gradient(160deg, #fffdf7, #f2f8f7); }
.club-grid .disc-card { background: #fff; transition: transform .18s, box-shadow .18s; }
.club-grid .disc-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(35,64,82,.12); }
.club-grid .disc-body p { min-height: 48px; }
.disc-foot .join { padding: 3px 10px; border: 1px solid #cddfe5; border-radius: 10px; background: #fff; color: #47788f; font-size: 9px; font-weight: 800; }
.disc-foot .join:hover { background: #e3f5f3; border-color: #8bc7ca; }
.disc-foot .join.on { background: #e1f4e9; border-color: #b5e0c8; color: #459b6a; }
.disc-foot .join.on:hover { background: #fde7e1; border-color: #e8a79c; color: #d4604f; }
.club-empty { grid-column: 1 / -1; padding: 28px 10px; text-align: center; color: #93a0aa; font-size: 12px; }

.new-club { display: none; padding: 14px; border-bottom: 1px solid #e3e9ed; background: linear-gradient(180deg, #fffdf6, #fff); }
.new-club.show { display: block; }
.new-club .row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.new-club input[type="text"], .new-club select, .new-club textarea { flex: 1 1 180px; min-height: 32px; padding: 6px 10px; border: 1px solid #dfe7eb; border-radius: 5px; background: #fbfcfd; font: 500 11px 'DM Sans', Arial, sans-serif; color: var(--ink); outline: 0; }
.new-club textarea { flex: 1 1 100%; min-height: 60px; resize: vertical; }
.new-club input:focus, .new-club select:focus, .new-club textarea:focus { border-color: #8bc7ca; box-shadow: 0 0 0 3px #e3f5f3; background: #fff; }

.my-club { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-bottom: 1px solid #f0f3f5; }
.my-club:last-of-type { border-bottom: 0; }
.my-club .badge-s { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; color: #fff; font: 900 14px 'Nunito'; }
.my-club div { min-width: 0; flex: 1; }
.my-club b { display: block; color: #4c7890; font-size: 10.5px; }
.my-club small { display: block; color: #9aa6ae; font-size: 9px; }
.my-club-empty { padding: 14px; color: #93a0aa; font-size: 11px; text-align: center; }



/* =========================================================
   Playarea — INSTÄLLNINGAR, NY DESKTOPDESIGN
   Avsiktligt begränsad till inställningssidan.
   ========================================================= */
.settings-page { grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.settings-page .home-main, .settings-page .home-side { min-width: 0; }
.settings-heading { margin-bottom: 12px; }
.settings-panel { border-color: #cfdfe5; }
.settings-page .set-layout { grid-template-columns: 168px minmax(0, 1fr); min-height: 465px; }
.settings-page .set-menu { background: linear-gradient(180deg,#edf6f8,#f8fbfc 55%); border-right: 1px solid #d5e5ea; padding: 11px 0; }
.settings-page .settings-menu-caption { padding: 7px 15px 13px; font: 900 10px 'Nunito',sans-serif; letter-spacing: .12em; color: #8b9ca6; }
.settings-page .set-menu a { margin: 2px 8px; padding: 11px 10px; border: 1px solid transparent; border-left: 3px solid transparent; border-radius: 5px; font-size: 12px; }
.settings-page .set-menu a:hover { background: #fff; border-color: #dbe9ed; }
.settings-page .set-menu a.on { background: #fff; border-color: #c7e1e6; border-left-color: #2e9e99; box-shadow: 0 2px 5px rgba(35,64,82,.05); }
.settings-page .set-menu a i { flex: 0 0 24px; width: 24px; height: 24px; }
.settings-page .set-form { gap: 16px; padding: 22px 22px 0; background: #fff; }
.settings-page .set-form h3 { font-size: 20px; color: #2c5c73; letter-spacing: -.4px; }
.settings-page .set-form > p { font-size: 12px; padding-bottom: 12px; border-bottom: 1px solid #edf1f3; }
.settings-page .set-form label { font-size: 10px; letter-spacing: .045em; }
.settings-page .set-form input[type=text], .settings-page .set-form input[type=email], .settings-page .set-form input[type=password], .settings-page .set-form select, .settings-page .set-form textarea { background: #fff; min-height: 39px; border-color: #d4e1e6; font-size: 12px; }
.settings-page .set-form textarea { min-height: 100px; }
.settings-page .set-foot { margin: 8px -22px 0; padding: 14px 22px; background: #f7fafb; }
.settings-page .avatar-edit { background: #f2f8f9; border: 1px solid #dcebef; border-radius: 6px; padding: 12px; }
.settings-page .avatar-edit .me-photo { width: 72px; height: 72px; }
.settings-page .switch-row { padding: 12px 0; }
.settings-page .swatches button { padding: 9px 12px; }
.settings-aside { display: flex; flex-direction: column; gap: 14px; }
.settings-profile-card { overflow: hidden; }
.settings-cover { height: 66px; background: linear-gradient(115deg,#2c7299,#3b91b2 48%,#53b9b0); color: #e9fbfc; display: flex; align-items: flex-start; padding: 12px 14px; font: 900 10px 'Nunito',sans-serif; letter-spacing: .09em; }
.settings-identity { display: flex; gap: 11px; align-items: flex-end; padding: 0 13px 13px; margin-top: -24px; }
.settings-identity img { width: 69px; height: 69px; object-fit: cover; border: 4px solid white; border-radius: 6px; box-shadow: 0 2px 7px #c4d7de; flex: none; }
.settings-identity div { display: flex; flex-direction: column; padding-top: 27px; min-width: 0; }
.settings-identity strong { font: 900 15px 'Nunito',sans-serif; color: #2c5269; }
.settings-identity span { font-size: 10px; color: #718794; }
.settings-online-dot { display: inline-block; width: 7px; height: 7px; background: #4dbb82; border-radius: 50%; margin-right: 3px; }
.settings-identity a { font-size: 10px; font-weight: 800; margin-top: 3px; }
.settings-stats { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #e7eef1; background: #f9fbfc; }
.settings-stats a { padding: 11px 2px; text-align: center; border-right: 1px solid #e7eef1; }
.settings-stats a:last-child { border-right: 0; }
.settings-stats b { display: block; color: #2c7299; font: 900 19px 'Nunito',sans-serif; }
.settings-stats small { display: block; color: #82939e; font-size: 10px; }
.settings-help > a { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-bottom: 1px solid #edf1f3; }
.settings-help > a:last-child { border: 0; }
.settings-help > a:hover { background: #f2f9fa; }
.settings-help > a > span { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 5px; background: #e8f3f7; color: #2c7299; font-size: 16px; }
.settings-help > a div { flex: 1; min-width: 0; }
.settings-help > a b { display: block; color: #456477; font-size: 11px; }
.settings-help > a small { display: block; color: #92a0aa; font-size: 10px; }
.settings-help > a em { font-size: 20px; font-style: normal; color: #9ab2bd; }
.security-body { display: flex; gap: 10px; padding: 13px; }
.security-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: #e1f4e9; color: #459b6a; font-weight: 900; }
.security-body b { font-size: 11px; color: #3b5365; }
.security-body p { margin: 4px 0 7px; font-size: 10px; color: #82939e; line-height: 1.5; }
.security-body a { font-size: 10px; font-weight: 800; }
.settings-danger .panel-heading { color: #b35e55; }
.settings-danger .danger-zone { background: #fffaf9; }

/* =========================================================
   Playarea – profilmeny i sidhuvudet
   ========================================================= */
.user-account { position: relative; z-index: 40; display: block; padding: 0; min-width: 190px; overflow: visible; }
.account-trigger { display: flex; align-items: center; width: 100%; gap: 10px; padding: 7px 10px; border: 0; background: transparent; text-align: left; color: var(--ink); cursor: pointer; }
.account-trigger:hover, .account-open .account-trigger { background: #f3f8fa; }
.account-trigger:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.account-trigger .mini-avatar { overflow: hidden; }
.account-trigger .mini-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.account-identity { min-width: 0; flex: 1; }
.account-identity b { display: block; font-size: 12px; line-height: 1.3; }
.account-identity small { display: flex; align-items: center; gap: 5px; color: #71818d; font-size: 10px; }
.account-online-dot { width: 7px; height: 7px; background: #4dbb82; border-radius: 50%; box-shadow: 0 0 0 2px #d7f1e2; }
.account-chevron { color: #678292; font-size: 17px; transition: transform .15s; }
.account-open .account-chevron { transform: rotate(180deg); }
.account-dropdown { position: absolute; top: calc(100% + 6px); right: 0; width: 220px; padding: 6px; border: 1px solid #d5e0e6; border-radius: 7px; background: #fff; box-shadow: 0 10px 25px rgba(35,64,82,.17); }
.account-dropdown[hidden], .account-dropdown a[hidden] { display: none !important; }
.account-dropdown-heading { padding: 7px 9px 8px; color: #8795a0; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.account-dropdown a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 4px; color: #49687a; font-size: 11px; font-weight: 700; }
.account-dropdown a:hover, .account-dropdown a:focus-visible { background: #e9f3f8; color: #205b7e; outline: none; }
.account-icon { display: inline-grid; place-items: center; width: 19px; color: #2c7299; font-size: 15px; font-weight: 800; }
.account-divider { height: 1px; margin: 6px 4px; background: #e3e9ed; }
.account-dropdown .account-logout { color: #cf5a4b; }
.account-dropdown .account-logout .account-icon { color: #cf5a4b; }
.account-dropdown .account-logout:hover { background: #fff0ed; color: #b64a3d; }


/* ==========================================================
   GEMENSAMMA SIDKOMPONENTER (tidigare pages.css)
   ========================================================== */
/* =========================================================
   Playarea — pages.css
   Sidspecifik CSS som BARA lägger till nya klasser.
   Inga befintliga selektorer i style.css skrivs över.
   Används av: start-inloggad.html (och senare övriga sidor)
   ========================================================= */

/* ---------- Hjälpklass för filtrering ---------- */
.is-hidden { display: none !important; }

/* ---------- Liten profilbild i toppen (user-chip) ---------- */
.user-chip .mini-avatar { overflow: hidden; padding: 0; }
.user-chip .mini-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.user-chip small a { color: var(--muted); font-weight: 700; }
.user-chip small a:hover { color: var(--coral); }

/* ---------- "Din sida" – ersätter inloggningsrutan ---------- */
.me-panel { display: flex; flex-direction: column; }
.me-top {
  display: flex; align-items: center; gap: 11px; padding: 12px 13px 10px;
  background: linear-gradient(180deg, #fffdf6, #fff 80%);
}
.me-photo {
  position: relative; flex: 0 0 auto; width: 52px; height: 52px; overflow: hidden;
  border: 3px solid #fff; outline: 1px solid #d9e3e8; border-radius: 8px;
  box-shadow: 0 3px 7px #cfdce2; transform: rotate(-2deg);
}
.me-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.me-top h3 { margin: 0; font: 900 16px 'Nunito', sans-serif; color: #2e4f65; }
.me-top small { display: block; color: #8a98a2; font-size: 10px; }
.me-mood { display: block; margin-top: 3px; color: #587487; font: 700 11px 'Nunito', sans-serif; }
.me-mood b { color: #2e8a85; }

.me-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px dashed #e3eaee; border-bottom: 1px dashed #e3eaee; background: #fbfcfd; }
.me-stats a { padding: 7px 4px; text-align: center; color: #5d7788; border-left: 1px dashed #e3eaee; }
.me-stats a:first-child { border-left: 0; }
.me-stats b { display: block; font: 900 15px/1.2 'Nunito', sans-serif; color: #2c7299; }
.me-stats small { font-size: 9px; font-weight: 700; color: #94a1aa; letter-spacing: .03em; }
.me-stats a:hover b { color: var(--coral); }

.me-notes { list-style: none; margin: 0; padding: 0; flex: 1; }
.me-notes li { display: flex; align-items: center; gap: 8px; padding: 7px 13px; border-bottom: 1px solid #f0f3f5; font-size: 11px; color: #657888; }
.me-notes li:last-child { border-bottom: 0; }
.me-notes .ni { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; background: #e1eef6; color: #2c7299; font-size: 11px; }
.me-notes .ni.coral { background: #fde7e1; color: #e0705f; }
.me-notes .ni.gold { background: #fff1cc; color: #c9961f; }
.me-notes .ni.green { background: #e4f4ea; color: #3e9966; }
.me-notes a { flex: 1; min-width: 0; font-weight: 700; }
.me-notes time { color: #a1abb2; font-size: 9px; white-space: nowrap; }

/* ---------- Flödet: smådetaljer ---------- */
.share-box .share-label { color: #8a98a2; font-size: 10px; font-weight: 700; white-space: nowrap; }
.share-box .button { padding: 7px 12px; }
.act-body .act-time-mobile { display: none; }
.act-thumbs span.ph-sunset, .act-thumbs span.ph-forest, .act-thumbs span.ph-sky,
.act-thumbs span.ph-autumn, .act-thumbs span.ph-water, .act-thumbs span.ph-neon { display: block; }
.act-action { display: inline-block; margin-top: 5px; padding: 2px 9px; border: 1px solid #cddfe5; border-radius: 10px; background: #fff; color: #47788f; font-size: 9px; font-weight: 800; }
.act-action:hover { background: #e3f5f3; border-color: #8bc7ca; color: #2e7594; }
.act-new { background: #fffdf0; }

/* ---------- Forum: oläst / läst ---------- */
.unread-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--coral); vertical-align: 1px; }
.forum-row.unread { background: #fffcf4; }
.forum-row.unread:hover { background: #fffaee; }
.forum-row.unread .topic h3 a { font-weight: 900; }
.forum-row.read .topic h3 a { color: #6d8798; font-weight: 700; }
.forum-row.read .topic-icon { filter: saturate(.55); opacity: .85; }
.legend { display: flex; gap: 14px; align-items: center; padding: 6px 13px; border-top: 1px solid #edf0f2; background: #fbfcfd; color: #93a0a9; font-size: 9px; }
.legend i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--coral); }
.legend i.r { background: #c9d4da; }

/* ---------- Klubbar: medlemsmarkering ---------- */
.disc-foot .member-flag { color: #459b6a; font-weight: 800; }
.disc-foot .member-flag:before { content: "✓ "; }

/* ---------- Sidokolumn ---------- */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; }
.stat-grid div { padding: 9px 12px; border-bottom: 1px solid #f0f3f5; border-left: 1px solid #f0f3f5; }
.stat-grid div:nth-child(odd) { border-left: 0; }
.stat-grid div:nth-last-child(-n+2) { border-bottom: 0; }
.stat-grid b { display: block; color: #2c7299; font: 900 16px/1.15 'Nunito', sans-serif; }
.stat-grid small { color: #94a1aa; font-size: 9px; font-weight: 700; letter-spacing: .03em; }
.stat-grid .hl b { color: #e0705f; }

.suggest .newbie small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.online-count { color: #3aa878; font: 800 9px 'DM Sans', sans-serif; letter-spacing: 0; }

/* =========================================================
   Fler avatarfärger (medlemmar som inte finns i style.css)
   ========================================================= */
.avatar-elin { background: linear-gradient(145deg, #8fd3c8, #3f9a8f); }
.avatar-johan { background: linear-gradient(145deg, #c7a98a, #8a6a4f); }
.avatar-frida { background: linear-gradient(145deg, #f5a7c0, #cf5f86); }
.avatar-linus { background: linear-gradient(145deg, #9dc4f0, #4a7ec4); }

/* ---------- Sidrubrik med knappar ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.page-head .block-title { margin: 0; }
.page-head-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.crumbs { margin: 0 2px 10px; color: #93a0aa; font-size: 10px; }
.crumbs a { font-weight: 700; }
.crumbs span { padding: 0 5px; color: #c0cad0; }

/* =========================================================
   MEDLEMMAR
   ========================================================= */
.mem-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; background: linear-gradient(#fff, #f9fbfc); border-bottom: 1px solid #e3e9ed; }
.mem-tools input[type="search"], .mem-tools select, .mem-tools input[type="number"] {
  min-height: 30px; padding: 5px 10px; border: 1px solid #dfe7eb; border-radius: 5px; outline: 0;
  background: #fbfcfd; color: var(--ink); font-size: 11px;
}
.mem-tools input[type="search"] { flex: 1 1 180px; min-width: 150px; }
.mem-tools input[type="number"] { width: 56px; }
.mem-tools input:focus, .mem-tools select:focus { border-color: #8bc7ca; background: #fff; box-shadow: 0 0 0 3px #e3f5f3; }
.mem-tools label { color: #7b8795; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.mem-tools .mem-count { margin-left: auto; color: #93a0aa; font-size: 10px; white-space: nowrap; }
.mem-tools .mem-count b { color: #60798b; }

.mem-head, .mem-row { display: grid; grid-template-columns: 44px minmax(0, 1.05fr) minmax(0, 1.5fr) 104px 128px; align-items: center; gap: 10px; padding: 0 13px; }
.mem-head { min-height: 28px; background: #f3f8fa; border-bottom: 1px solid #e3e9ed; color: #8ba0ae; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.mem-row { min-height: 52px; padding-top: 7px; padding-bottom: 7px; border-bottom: 1px solid #eef2f4; transition: background .15s; }
.mem-row:hover { background: #fafdfd; }
.mem-row:last-child { border-bottom: 0; }
.mem-row .tiny-avatar { width: 38px; height: 38px; font-size: 16px; border: 2px solid #fff; outline: 1px solid #d9e3e8; box-shadow: 0 2px 4px #dbe5ea; }
.mem-name { min-width: 0; }
.mem-name a { display: inline-block; color: #34607a; font: 800 12px/1.3 'Nunito', sans-serif; }
.mem-name a:hover { color: var(--coral); }
.mem-name small { display: block; color: #9aa7af; font-size: 10px; }
.mem-flag { margin-left: 4px; padding: 0 5px; border-radius: 3px; background: #fff1cc; color: #b98a1f; font: 900 8px/14px 'DM Sans'; letter-spacing: .06em; vertical-align: 1px; }
.mem-flag.admin { background: #fde7e1; color: #d4604f; }
.mem-flag.bday { background: #fde7e1; color: #d4604f; }
.mem-mood { min-width: 0; color: #5a6f80; font: 700 11px/1.4 'Nunito', sans-serif; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mem-mood:before { content: "“"; color: #e0b24b; font-size: 15px; line-height: 0; margin-right: 1px; vertical-align: -3px; }
.mem-seen { font-size: 10px; color: #8a99a3; line-height: 1.35; }
.mem-seen b { display: block; font-size: 10px; }
.mem-seen .on { color: #3aa878; }
.mem-seen .away { color: #c9961f; }
.mem-actions { display: flex; gap: 5px; justify-content: flex-end; }
.mem-actions .button { padding: 4px 9px; font-size: 10px; }
.mem-actions .button.sent { background: #e1f4e9; border-color: #b5e0c8; color: #459b6a; }
.mem-empty { padding: 26px 14px; text-align: center; color: #93a0aa; font-size: 12px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 13px; border-top: 1px solid #edf0f2; background: #fbfcfd; font-size: 10px; color: #93a0aa; }
.pager nav { display: flex; gap: 3px; }
.pager nav a { min-width: 24px; padding: 3px 7px; border: 1px solid #d6e5e6; border-radius: 4px; background: #fff; color: #4b8796; text-align: center; font-weight: 800; }
.pager nav a.cur { background: #3a91a9; border-color: #3a91a9; color: #fff; }
.pager nav a:hover { border-color: #8bc7ca; }
.pager nav a.cur:hover { color: #fff; }

/* =========================================================
   FORUM
   ========================================================= */
.fcat + .fcat, .forum-stack > * + * { margin-top: 16px; }
.forum-stack { display: flex; flex-direction: column; }
.forum-stack .home-main { gap: 16px; }
.panel-heading .cat-sub { color: #94a1aa; font: 500 10px 'DM Sans'; letter-spacing: 0; }
.forum-row .topic p { margin: 1px 0 0; color: #9aa7af; font-size: 10px; }
.forum-row .topic h3 .sub-links { font-weight: 700; }
.forum-row.unread .topic h3 a { font-weight: 900; }
.forum-row .last-post > div:last-child { min-width: 0; }
.forum-row .last-post a { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #4c7890; font-weight: 700; font-size: 10px; }
.forum-row .last-post a:hover { color: var(--coral); }
.forum-row .last-post b { font-size: 10px; }
.topic-icon.lock { background: #eef1f3; color: #8a99a3; }
.badge.gray { background: #9aa7af; }
.forum-row.locked .topic h3 a { color: #7d909d; }
.mini-subs { margin-top: 3px; font-size: 9px; color: #9aa7af; }
.mini-subs a { margin-right: 6px; font-weight: 700; }
.forum-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 9px 12px; background: linear-gradient(#fff, #f9fbfc); border-bottom: 1px solid #e3e9ed; }
.forum-actions input[type="search"] { flex: 1 1 160px; min-width: 130px; min-height: 30px; padding: 5px 10px; border: 1px solid #dfe7eb; border-radius: 5px; outline: 0; background: #fbfcfd; color: var(--ink); font-size: 11px; }
.forum-actions input:focus { border-color: #8bc7ca; background: #fff; box-shadow: 0 0 0 3px #e3f5f3; }
.rules-list { margin: 0; padding: 10px 14px 12px 28px; color: #687887; font-size: 11px; line-height: 1.6; }
.rules-list li + li { margin-top: 3px; }
.who-list { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 10px 12px; color: #6a7f8e; font-size: 10.5px; line-height: 1.6; }
.who-list a { font-weight: 700; }
.who-list a.mod { color: #b98a1f; }
.who-list a.adm { color: #d4604f; }

/* =========================================================
   REGISTRERING
   ========================================================= */
.reg-form { padding-bottom: 0; }
.reg-intro { margin: 0; padding: 12px 13px 2px; background: linear-gradient(180deg, #fffdf6, #fff 90%); color: #687887; font-size: 11.5px; line-height: 1.6; }
.reg-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reg-form .dob { display: grid; grid-template-columns: 70px 1.4fr 1fr; gap: 6px; }
.field-hint { color: #9aa7af; font-size: 10px; line-height: 1.4; }
.field-error { display: none; color: #d4604f; font-size: 10px; font-weight: 700; line-height: 1.4; }
.form-field.invalid .field-error { display: block; }
.form-field.invalid .field-hint { display: none; }
.form-field.invalid input, .form-field.invalid select { border-color: #e8a79c; background: #fff9f8; box-shadow: 0 0 0 3px #fdeae6; }
.form-field.valid input { border-color: #9fd3b6; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 62px; }
.pw-toggle { position: absolute; right: 5px; top: 5px; padding: 3px 8px; border: 1px solid #cddfe5; border-radius: 4px; background: linear-gradient(#fff, #edf5f7); color: #47788f; font-size: 10px; font-weight: 800; }
.pw-toggle:hover { border-color: #8bc7ca; }
.pw-meter { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.pw-bars { display: flex; gap: 3px; flex: 1; }
.pw-bars i { flex: 1; height: 5px; border-radius: 3px; background: #e9f0f3; transition: background .2s; }
.pw-bars.s1 i:nth-child(-n+1) { background: #e0705f; }
.pw-bars.s2 i:nth-child(-n+2) { background: #e3ae3d; }
.pw-bars.s3 i:nth-child(-n+3) { background: #7cc09a; }
.pw-bars.s4 i:nth-child(-n+4) { background: #2e9e99; }
.pw-label { min-width: 70px; text-align: right; color: #93a0aa; font-size: 10px; font-weight: 700; }
.check-row { display: flex; align-items: flex-start; gap: 8px; color: #5d7180; font-size: 11px; line-height: 1.5; }
.check-row input { width: auto; min-height: 0; margin-top: 2px; flex: 0 0 auto; accent-color: #2e9e99; }
.check-row label { color: inherit; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.reg-form .check-row.invalid + .field-error, .check-row.invalid ~ .field-error { display: block; }
.reg-success { display: none; padding: 26px 20px 24px; text-align: center; background: linear-gradient(180deg, #fffdf6, #fff 70%); }
.reg-success.show { display: block; }
.reg-success .big { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border: 3px solid #fff; border-radius: 14px 14px 14px 4px; background: linear-gradient(145deg, #53b9b0, #268f95); box-shadow: 0 3px 0 #c3d8dc; color: #fff; font: 900 28px 'Nunito'; transform: rotate(-3deg); }
.reg-success h2 { margin: 0 0 4px; font: 900 20px 'Nunito', sans-serif; color: #2e4f65; }
.reg-success p { margin: 0 auto 12px; max-width: 360px; color: #687887; font-size: 12px; line-height: 1.6; }
.perks { list-style: none; margin: 0; padding: 4px 0; }
.perks li { display: flex; gap: 9px; padding: 8px 12px; border-bottom: 1px solid #f0f3f5; color: #657888; font-size: 11px; line-height: 1.5; }
.perks li:last-child { border-bottom: 0; }
.perks li i { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: #e4f2f1; color: #2e9e99; font-style: normal; font-size: 12px; }
.perks li:nth-child(2) i { background: #fff1cc; color: #c9961f; }
.perks li:nth-child(3) i { background: #fde7e1; color: #e0705f; }
.perks li:nth-child(4) i { background: #e1eef6; color: #2c7299; }
.perks b { display: block; color: #3b5365; font: 800 12px 'Nunito', sans-serif; }


/* =========================================================
   Playarea-SIDAN (lajv.html)
   ========================================================= */
.ljv-compose { padding: 12px 13px 0; background: linear-gradient(180deg, #fffdf6, #fff 60%); }
.ljv-compose > label { display: block; margin-bottom: 4px; color: #52687a; font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.ljv-compose textarea {
  display: block; width: 100%; min-height: 64px; padding: 9px 11px; resize: vertical; outline: 0;
  border: 1px solid #dfe7eb; border-radius: 5px; background: #fbfcfd; color: var(--ink);
  font: 700 13px/1.5 'Nunito', Arial, sans-serif; transition: border-color .15s, box-shadow .15s, background .15s;
}
.ljv-compose textarea::placeholder { color: #a0abb2; font-weight: 600; }
.ljv-compose textarea:hover { border-color: #bcd3da; }
.ljv-compose textarea:focus { border-color: #8bc7ca; background: #fff; box-shadow: 0 0 0 3px #e3f5f3; }
.ljv-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 10px; }
.ljv-meta select { min-height: 30px; padding: 4px 9px; border: 1px solid #dfe7eb; border-radius: 5px; background: #fbfcfd; color: #5d7180; font: 500 11px 'DM Sans', Arial, sans-serif; outline: 0; }
.ljv-meta select:focus { border-color: #8bc7ca; box-shadow: 0 0 0 3px #e3f5f3; }
.ljv-count { color: #93a0aa; font-size: 10px; font-weight: 700; }
.ljv-count.warn { color: #e0705f; }
.ljv-preview-label { margin: 0 0 4px; color: #93a0aa; font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.ljv-preview {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 26px; padding: 4px 10px; border: 1px solid #25282a; border-radius: 3px; color: #f3f5f6; font-size: 11px;
  background: linear-gradient(to bottom, #494d50 0%, #35383b 45%, #2a2c2e 90%, #1a1b1c 100%);
}
.ljv-preview strong { color: var(--gold); }
.ljv-preview .txt { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ljv-preview .txt.empty { color: #9aa3a9; }
.ljv-send { display: flex; align-items: center; gap: 10px; padding: 10px 0 12px; }
.ljv-send .button { padding: 9px 16px; font-size: 12px; }
.ljv-send .button:disabled { filter: grayscale(.7) brightness(1.05); opacity: .7; cursor: not-allowed; transform: none; }
.ljv-send small { color: #93a0aa; font-size: 10px; line-height: 1.4; }
.ljv-send small b { color: #5d7788; }
.ljv-error { display: none; color: #d4604f; font-size: 10px; font-weight: 700; padding-bottom: 8px; }
.ljv-error.show { display: block; }
.ljv-success:not(:empty) { color: #247c6e; font-size: 12px; font-weight: 700; padding-bottom: 8px; }

.ljv-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 150px 142px; align-items: center; gap: 10px; padding: 9px 13px; border-bottom: 1px solid #eef2f4; transition: background .15s; }
.ljv-row:last-child { border-bottom: 0; }
.ljv-row:hover { background: #fafdfd; }
.ljv-row .tiny-avatar { width: 38px; height: 38px; font-size: 16px; border: 2px solid #fff; outline: 1px solid #d9e3e8; box-shadow: 0 2px 4px #dbe5ea; }
.ljv-row.now { background: #fffcf0; box-shadow: inset 3px 0 0 var(--gold); }
.ljv-row.mine .ljv-who b:after { content: " (du)"; color: #9aa7af; font-weight: 500; }
.ljv-row.expired { opacity: .62; }
.ljv-who { font-size: 10px; color: #9aa7af; }
.ljv-who b { color: #34607a; font: 800 12px 'Nunito', sans-serif; margin-right: 4px; }
.ljv-text { margin-top: 1px; color: #4e6677; font: 700 12px/1.45 'Nunito', sans-serif; overflow-wrap: anywhere; }
.ljv-now-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 5px; padding: 0 6px; border-radius: 3px; background: #2f3336; color: var(--gold); font: 900 8px/14px 'DM Sans'; letter-spacing: .06em; vertical-align: 1px; }
.ljv-now-tag i { width: 6px; height: 6px; border-radius: 50%; background: #4dbb82; animation: lm-online 2s infinite; }
.ljv-star { color: #e3ae3d; margin-left: 3px; }
.ljv-life { font-size: 9px; color: #93a0aa; line-height: 1.4; }
.ljv-life b { display: block; margin-bottom: 3px; color: #5d7788; font-size: 10px; }
.ljv-life .poll-track { height: 6px; margin-bottom: 3px; }
.ljv-life .poll-track i { animation: none; }
.ljv-life.hot .poll-track i { background: linear-gradient(#f39a8a, #e0705f); }
.ljv-life .gone { color: #d4604f; font-weight: 800; }
.ljv-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.ljv-like { padding: 3px 9px; border: 1px solid #f0cfc9; border-radius: 10px; background: #fff; color: #d9606e; font-size: 10px; font-weight: 800; }
.ljv-like:hover { background: #fde7e1; }
.ljv-like.on { background: #fde7e1; border-color: #e8a79c; }
.ljv-actions a { font-size: 10px; font-weight: 700; }
.ljv-actions .rep { color: #aab4ba; }
.ljv-actions .rep:hover { color: #d4604f; }
.ljv-empty { padding: 24px 14px; text-align: center; color: #93a0aa; font-size: 12px; }
.ljv-top { list-style: none; margin: 0; padding: 0; counter-reset: top; }
.ljv-top li { counter-increment: top; display: flex; align-items: flex-start; gap: 9px; padding: 8px 12px; border-bottom: 1px solid #f0f3f5; font-size: 11px; line-height: 1.45; color: #657888; }
.ljv-top li:last-child { border-bottom: 0; }
.ljv-top li:before { content: counter(top); flex: 0 0 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #fff1cc; color: #b98a1f; font: 900 11px 'Nunito'; }
.ljv-top b { color: #2e6685; }
.ljv-top small { display: block; color: #d9606e; font-weight: 800; font-size: 9px; }




/* ==========================================================
   profile.css – isolerad till respektive sida
   ========================================================== */
@scope (body.page-profile) {

/* Menyn: tidigare inline-stil flyttad hit */
.lm-shell { margin-bottom: 20px; }
.profile-grid { margin-bottom: 22px; }
.home-main { gap: 18px; }

/* ---------- Profilhuvud ---------- */
.profile-hero { overflow: visible; }
.profile-cover {
  position: relative; overflow: hidden; height: 124px; display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px 16px; border-radius: 7px 7px 0 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,239,205,.85), transparent 40%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 1px, transparent 1px 9px),
    linear-gradient(115deg, #d9f0ed 0%, #e6f3f2 52%, #f8e9c5 100%);
  border-bottom: 1px solid #c8e2e0;
}
.profile-cover-tag {
  position: relative; z-index: 2; padding: 4px 10px; border-radius: 4px 4px 4px 1px;
  background: #fff9ed; box-shadow: 0 2px 0 #dfc9a9; color: #9a6042;
  font: 900 10px 'Nunito', sans-serif; letter-spacing: .1em; transform: rotate(-1.5deg);
}
.profile-cover .button { position: relative; z-index: 2; }
.cover-star { position: absolute; color: #d18a4e; text-shadow: 0 1px 2px rgba(255,244,220,.8); }
.cs1 { right: 26%; top: 18px; font-size: 18px; }
.cs2 { right: 12%; bottom: 20px; font-size: 13px; }
.cs3 { left: 40%; bottom: 14px; font-size: 11px; }

.profile-identity { display: flex; align-items: center; gap: 18px; padding: 0 18px 14px; }
.profile-photo { position: relative; flex: 0 0 auto; margin-top: -46px; transform: rotate(-2deg); }
.profile-photo img {
  display: block; width: 112px; height: 112px; object-fit: cover; border: 5px solid #fff; border-radius: 6px;
  outline: 1px solid #d9e3e8; box-shadow: 0 4px 10px rgba(35,64,82,.2);
}
.profile-photo-dot {
  position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%;
  background: #4dbb82; border: 3px solid #fff; animation: lm-online 2s infinite;
}
.profile-id-text { min-width: 0; padding-top: 12px; }
.profile-name { font: 900 25px/1.1 'Nunito', sans-serif; color: var(--ink); letter-spacing: -.4px; }
.profile-online, .profile-role { font: 800 10px 'DM Sans', sans-serif; letter-spacing: .04em; vertical-align: middle; margin-left: 6px; }
.profile-online { color: #3aa878; }
.profile-role { padding: 3px 6px; border-radius: 3px; background: #e8f2f7; color: var(--blue); }
.profile-meta { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.profile-mood { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.mood-label { padding: 2px 8px; border-radius: 10px; background: #fff1cc; color: #b98a1f; font-size: 10px; font-weight: 800; white-space: nowrap; }
.profile-mood q {
  position: relative; padding: 4px 11px; border: 1px solid #e3eaee; border-left: 3px solid var(--gold); border-radius: 0 5px 5px 0;
  background: #fbfcfd; color: #566e7e; font: 700 12px 'Nunito', sans-serif; quotes: none;
}
.profile-quickstats { margin-left: auto; display: flex; align-self: flex-end; border: 1px dashed #d3e0e2; border-radius: 6px; background: #fbfcfd; }
.profile-quickstats div { padding: 7px 14px; text-align: center; border-left: 1px dashed #d3e0e2; }
.profile-quickstats div:first-child { border-left: 0; }
.profile-quickstats b { display: block; color: var(--blue); font: 900 18px/1.1 'Nunito', sans-serif; }
.profile-quickstats small { color: #94a1aa; font-size: 9px; font-weight: 700; letter-spacing: .03em; }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 11px 18px; border-top: 1px solid var(--line); background: #fafcfd; border-radius: 0 0 7px 7px; }

/* ---------- Flikar ---------- */
.profile-tabs { display: flex; gap: 0; border-bottom: 2px solid #d5e2e8; margin: 0 2px -6px; }
.profile-tabs a { position: relative; padding: 8px 14px; color: #81909c; font-size: 11px; font-weight: 800; }
.profile-tabs a:hover { color: #2e7594; }
.profile-tabs a:first-child { color: #2e7594; }
.profile-tabs a:first-child:after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -2px; height: 2px; background: #3a91a9; }
.profile-tabs em { margin-left: 4px; padding: 1px 5px; border-radius: 10px; background: var(--coral); color: #fff; font-style: normal; font-size: 9px; }

/* ---------- Presentation ---------- */
.profile-text { padding: 20px 22px 0; font-size: 13px; line-height: 1.8; background: linear-gradient(180deg, #fffdf6, #fff 40%); }
.profile-text p { margin: 0 0 12px; }
.profile-signature { margin-bottom: 14px; color: var(--blue); font: 900 14px 'Nunito', sans-serif; }
.profile-interests { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 -22px; padding: 11px 22px; border-top: 1px dashed #e3eaee; background: #fbfcfd; }
.interests-label { margin-right: 4px; color: #93a0aa; font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.profile-interests a { padding: 3px 9px; border: 1px solid #d6e5e6; border-radius: 10px; background: #fff; color: #4b8796; font-size: 10px; font-weight: 700; line-height: 1.5; }
.profile-interests a:hover { background: var(--coral); border-color: var(--coral); color: #fff; }

/* ---------- Fotoalbum (polaroids på fotoväggsbakgrund) ---------- */
.profile-photos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 18px 16px 16px;
  border: 1px solid #d9e2e7; border-radius: 8px; box-shadow: var(--shadow);
  background:
    radial-gradient(circle at 92% 8%, rgba(241,199,93,.2), transparent 12rem),
    repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 1px, transparent 1px 9px),
    linear-gradient(160deg, #fffdf7, #f2f8f7);
}
.polaroid { margin: 0; min-width: 0; padding: 7px 7px 9px; background: #fff; border-radius: 3px; box-shadow: 0 2px 0 rgba(35,64,82,.05), 0 5px 11px rgba(35,64,82,.13); transition: transform .18s, box-shadow .18s; }
.polaroid:nth-child(1) { transform: rotate(-1.4deg); }
.polaroid:nth-child(2) { transform: rotate(.9deg); }
.polaroid:nth-child(3) { transform: rotate(-.6deg); }
.polaroid:hover { transform: rotate(0) scale(1.03); box-shadow: 0 8px 18px rgba(35,64,82,.22); position: relative; z-index: 2; }
.polaroid img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.polaroid figcaption { padding-top: 7px; }
.polaroid figcaption b { display: block; color: #34607a; font: 800 12px 'Nunito', sans-serif; }
.polaroid figcaption span { color: #d9606e; font-size: 10px; font-weight: 700; }

/* ---------- Sidokolumn ---------- */
.profile-facts { margin: 0; padding: 4px 14px; }
.profile-facts div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #e6ecef; font-size: 11px; }
.profile-facts div:last-child { border: 0; }
.profile-facts dt { color: #8a98a2; font-size: 10px; font-weight: 700; }
.profile-facts dd { margin: 0; color: #3b5365; font-weight: 700; text-align: right; }

.profile-friends { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 6px; padding: 14px 10px; }
.profile-friends a { display: flex; flex-direction: column; align-items: center; gap: 5px; color: #587487; font-size: 10px; font-weight: 700; }
.profile-friends .tiny-avatar { width: 42px; height: 42px; font-size: 18px; border: 2px solid #fff; outline: 1px solid #d9e3e8; box-shadow: 0 2px 4px #dbe5ea; transition: transform .15s; }
.profile-friends a:hover .tiny-avatar { transform: translateY(-2px) rotate(-3deg); }
.profile-friends .tiny-avatar i { width: 11px; height: 11px; }

.profile-visitors { list-style: none; margin: 0; padding: 0; }
.profile-visitors li { display: flex; align-items: center; gap: 9px; padding: 7px 12px; border-bottom: 1px solid #f0f3f5; }
.profile-visitors li:last-child { border-bottom: 0; }
.profile-visitors .tiny-avatar { width: 28px; height: 28px; font-size: 12px; border-radius: 6px; }
.profile-visitors a { flex: 1; font-size: 11px; font-weight: 800; }
.profile-visitors time { color: #a1abb2; font-size: 9px; white-space: nowrap; }

.profile-clubs { display: flex; flex-direction: column; padding: 4px 0; }
.profile-clubs a { display: flex; align-items: center; gap: 9px; padding: 7px 12px; border-bottom: 1px solid #f0f3f5; color: #4c7890; font-size: 11px; font-weight: 700; }
.profile-clubs a:last-child { border-bottom: 0; }
.profile-clubs a:hover { background: #fafdfd; }
.profile-clubs i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: #e1eef6; font-style: normal; font-size: 13px; }
.profile-clubs a:nth-child(2) i { background: #fde7e1; }
.profile-clubs a:nth-child(3) i { background: #fff1cc; }

/* ---------- Gästbok ---------- */
.profile-count { color: #93a0aa; font-size: 10px; font-weight: 700; }
.guest-form { padding: 13px 15px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #fffdf6, #fff 80%); }
.guest-form label { display: block; margin-bottom: 6px; color: #52687a; font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.guest-form textarea {
  display: block; width: 100%; resize: vertical; padding: 10px 11px; border: 1px solid #dfe7eb; border-radius: 5px; background: #fbfcfd;
  color: var(--ink); font: 600 12.5px/1.5 'Nunito', sans-serif; outline: 0; transition: border-color .15s, box-shadow .15s, background .15s;
}
.guest-form textarea:hover { border-color: #bcd3da; }
.guest-form textarea:focus { border-color: #8bc7ca; background: #fff; box-shadow: 0 0 0 3px #e3f5f3; }
.guest-form > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 9px; }
.guest-form small { color: #93a0aa; font-size: 10px; }
.guest-entry { display: flex; gap: 11px; padding: 12px 15px; border-bottom: 1px solid #edf1f3; transition: background .15s; }
.guest-entry:hover { background: #fafdfd; }
.guest-entry:last-child { border: 0; }
.guest-entry .tiny-avatar { width: 38px; height: 38px; font-size: 16px; border: 2px solid #fff; outline: 1px solid #d9e3e8; box-shadow: 0 2px 4px #dbe5ea; }
.guest-entry > div { flex: 1; min-width: 0; }
.guest-entry > div > div { display: flex; justify-content: space-between; gap: 10px; }
.guest-entry b { color: #34607a; font: 800 12px 'Nunito', sans-serif; }
.guest-entry time { color: #a1abb2; font-size: 10px; }
.guest-entry p { margin: 4px 0 0; padding: 6px 10px; border-left: 3px solid #cfe1e8; border-radius: 0 5px 5px 0; background: #f4f8fa; color: #566e7e; font: 700 12px/1.5 'Nunito', sans-serif; }

}


/* ==========================================================
   chatt.css – isolerad till respektive sida
   ========================================================== */
@scope (body.page-chat) {
/* =========================================================
   Playarea — chatt.css
   Sidspecifik CSS för chatt.html. Lägger bara till nya klasser.
   Används tillsammans med style.css + pages.css
   ========================================================= */

.chat-layout { display: grid; grid-template-columns: 206px minmax(0, 1fr) 232px; gap: 14px; height: 620px; align-items: stretch; }
.chat-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-col > .panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-col .panel-heading { flex: 0 0 auto; }

.chat-layout [hidden], .chat-modal [hidden], .chat-menu[hidden] { display: none !important; }

/* ---------- Rum ---------- */
.room-new { padding: 2px 9px; border: 1px solid #cddfe5; border-radius: 10px; background: #fff; color: #47788f; font: 800 9px 'DM Sans', sans-serif; letter-spacing: 0; }
.room-new:hover { background: #e3f5f3; border-color: #8bc7ca; }
.room-list { list-style: none; margin: 0; padding: 6px; flex: 1; overflow-y: auto; background: linear-gradient(180deg, #edf6f8, #f8fbfc 55%); }
.room-list li + li { margin-top: 2px; }
.room-btn { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px; border: 1px solid transparent; border-left: 3px solid transparent; border-radius: 5px; background: transparent; text-align: left; color: #5d7788; font: 700 12px 'Nunito', sans-serif; transition: background .15s; }
.room-btn:hover { background: #fff; border-color: #dbe9ed; }
.room-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.room-btn.on { background: #fff; border-color: #c7e1e6; border-left-color: #2e9e99; color: #2c7299; box-shadow: 0 2px 5px rgba(35,64,82,.05); }
.room-ico { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; background: #e1eef6; color: #2c7299; font-size: 13px; }
.room-btn.on .room-ico { background: #3a91a9; color: #fff; }
.room-txt { min-width: 0; flex: 1; }
.room-txt b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 800; }
.room-txt small { display: block; color: #9aa7af; font: 500 9px 'DM Sans', sans-serif; }
.room-unread { flex: 0 0 auto; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--coral); color: #fff; text-align: center; font: 900 9px/16px 'DM Sans', sans-serif; }

/* ---------- Chattfönster ---------- */
.chat-topic { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: linear-gradient(180deg, #fffdf6, #fff); border-bottom: 1px solid #e3e9ed; }
.chat-topic .room-ico { width: 32px; height: 32px; font-size: 15px; background: #3a91a9; color: #fff; }
.chat-topic h3 { margin: 0; font: 900 15px 'Nunito', sans-serif; color: #2e4f65; }
.chat-topic h3 small { margin-left: 6px; color: #93a0aa; font: 500 10px 'DM Sans', sans-serif; }
.chat-topic p { margin: 1px 0 0; color: #7b8c98; font-size: 11px; }

.chat-log-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
.chat-log { flex: 1; min-width: 0; overflow-y: auto; padding: 8px 0; background: #fff; scroll-behavior: auto; }
.chat-jump { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 5px 13px; border: 1px solid #258986; border-radius: 12px; background: linear-gradient(#43b2a9, #278f8e); color: #fff; font: 800 10px 'DM Sans', sans-serif; box-shadow: 0 3px 10px rgba(35,64,82,.25); }

.msg { display: flex; align-items: flex-start; gap: 9px; padding: 5px 13px; border-left: 3px solid transparent; transition: background .15s; }
.msg:hover { background: #fafdfd; }
.msg .tiny-avatar { width: 28px; height: 28px; margin-top: 1px; font-size: 12px; border-radius: 6px; }
.msg-body { min-width: 0; flex: 1; }
.msg-head { display: flex; align-items: baseline; gap: 6px; line-height: 1.3; }
.msg-nick { padding: 0; border: 0; background: none; color: #34607a; font: 800 12px 'Nunito', sans-serif; cursor: pointer; }
.msg-nick:hover { color: var(--coral); }
.msg-nick:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; border-radius: 2px; }
.msg.own .msg-head .msg-nick { color: #2e8a85; }
.msg-time { color: #a1abb2; font-size: 9px; }
.msg-priv { color: #9568b1; font-size: 9px; font-weight: 800; }
.msg-text { margin-top: 1px; color: #4e6677; font: 600 12.5px/1.5 'Nunito', sans-serif; overflow-wrap: anywhere; }
.msg.mention { background: #fffcf0; border-left-color: var(--gold); }
.msg.pm { background: #f6f3fb; border-left-color: #9568b1; }
.msg.act .msg-text { color: #7a5b9a; font-style: italic; }
.msg.act .msg-nick { color: #7a5b9a; font-style: normal; }
.msg.sys { justify-content: center; padding: 4px 13px; }
.msg.sys:hover { background: transparent; }
.msg.sys span { padding: 2px 11px; border-radius: 10px; background: #f3f8fa; color: #8a99a3; font-size: 10px; font-weight: 700; text-align: center; }

/* ---------- Skrivfält ---------- */
.chat-compose-wrap { position: relative; flex: 0 0 auto; border-top: 1px solid #e3e9ed; background: linear-gradient(#f9fbfc, #fff); }
.chat-compose { display: flex; align-items: center; gap: 7px; padding: 10px 12px 6px; }
.chat-compose input[type="text"] { flex: 1; min-width: 0; min-height: 36px; padding: 7px 12px; border: 1px solid #dfe7eb; border-radius: 5px; outline: 0; background: #fbfcfd; color: var(--ink); font: 600 12.5px 'Nunito', Arial, sans-serif; transition: border-color .15s, box-shadow .15s, background .15s; }
.chat-compose input[type="text"]::placeholder { color: #a0abb2; font-weight: 600; }
.chat-compose input[type="text"]:hover { border-color: #bcd3da; }
.chat-compose input[type="text"]:focus { border-color: #8bc7ca; background: #fff; box-shadow: 0 0 0 3px #e3f5f3; }
.chat-compose .button { padding: 9px 16px; font-size: 12px; }
.chat-emoji-btn { width: 36px; height: 36px; border: 1px solid #cddfe5; border-radius: 5px; background: linear-gradient(#fff, #edf5f7); font-size: 16px; line-height: 1; }
.chat-emoji-btn:hover { border-color: #8bc7ca; }
.chat-hint { margin: 0; padding: 0 13px 9px; color: #9aa7af; font-size: 10px; }
.chat-hint kbd { padding: 0 4px; border: 1px solid #d6e0e5; border-radius: 3px; background: #fff; color: #5d7788; font: 700 9px 'DM Sans', sans-serif; }
.emoji-pop { position: absolute; right: 74px; bottom: calc(100% - 4px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 6px; border: 1px solid #d5e0e6; border-radius: 7px; background: #fff; box-shadow: 0 8px 20px rgba(35,64,82,.18); z-index: 5; }
.emoji-pop button { width: 32px; height: 32px; border: 0; border-radius: 5px; background: transparent; font-size: 17px; }
.emoji-pop button:hover { background: #e9f3f8; }

/* ---------- Användarlista ---------- */
.cu-tools { flex: 0 0 auto; padding: 8px 10px; border-bottom: 1px solid #edf0f2; background: #fbfcfd; }
.cu-tools input { width: 100%; min-height: 28px; padding: 4px 9px; border: 1px solid #dfe7eb; border-radius: 5px; outline: 0; background: #fff; color: var(--ink); font-size: 11px; }
.cu-tools input:focus { border-color: #8bc7ca; box-shadow: 0 0 0 3px #e3f5f3; }
.cu-list { list-style: none; margin: 0; padding: 0 0 6px; flex: 1; overflow-y: auto; }
.cu-group { padding: 9px 12px 3px; color: #94a1aa; font: 900 9px 'DM Sans', sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.cu-row { display: flex; align-items: center; gap: 4px; padding: 2px 6px 2px 8px; transition: background .12s; }
.cu-row:hover, .cu-row.ctx { background: #f1f8fa; }
.cu-nick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 3px 0; border: 0; background: none; text-align: left; color: #34607a; font: 800 12px 'Nunito', sans-serif; cursor: pointer; }
.cu-nick:hover .cu-name { color: var(--coral); }
.cu-nick:focus-visible, .cu-more:focus-visible, .cu-unban:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; border-radius: 4px; }
.cu-nick .tiny-avatar { width: 27px; height: 27px; font-size: 12px; border: 2px solid #fff; outline: 1px solid #d9e3e8; box-shadow: 0 1px 3px #dbe5ea; }
.cu-nick .tiny-avatar i { width: 9px; height: 9px; }
.cu-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cu-row.me .cu-name { color: #2e8a85; }
.cu-row.muted .cu-name { color: #a1abb2; }
.cu-row.muted .tiny-avatar { filter: grayscale(.8); opacity: .75; }
.cu-nick .mem-flag { flex: 0 0 auto; margin-left: 0; }
.cu-muted { flex: 0 0 auto; font-size: 11px; }
.cu-more { flex: 0 0 auto; width: 22px; height: 22px; border: 0; border-radius: 4px; background: transparent; color: #82a4b5; font-size: 15px; line-height: 1; opacity: 0; transition: opacity .12s; }
.cu-row:hover .cu-more, .cu-row.ctx .cu-more, .cu-more:focus-visible { opacity: 1; }
.cu-more:hover { background: #e1eef6; color: #2c7299; }
.cu-empty { padding: 18px 12px; text-align: center; color: #93a0aa; font-size: 11px; }
.cu-banned { flex: 0 0 auto; max-height: 120px; overflow-y: auto; padding: 7px 10px 8px; border-top: 1px solid #edf0f2; background: #fffaf9; }
.cu-banned > b { display: block; margin-bottom: 4px; color: #b35e55; font: 900 9px 'DM Sans', sans-serif; letter-spacing: .09em; }
.cu-banned ul { list-style: none; margin: 0; padding: 0; }
.cu-banned li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 0; color: #7d8d98; font-size: 11px; font-weight: 700; }
.cu-unban { padding: 1px 8px; border: 1px solid #cddfe5; border-radius: 10px; background: #fff; color: #47788f; font: 800 9px 'DM Sans', sans-serif; }
.cu-unban:hover { background: #e3f5f3; border-color: #8bc7ca; }

/* ---------- Högerklicksmeny ---------- */
.chat-menu { position: fixed; z-index: 80; min-width: 204px; padding: 5px; border: 1px solid #d5e0e6; border-radius: 7px; background: #fff; box-shadow: 0 10px 25px rgba(35,64,82,.2); }
.chat-menu-head { display: flex; align-items: center; gap: 6px; padding: 7px 9px 8px; color: #8795a0; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.chat-menu-head b { color: #34607a; font: 900 11px 'Nunito', sans-serif; letter-spacing: 0; text-transform: none; }
.chat-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 4px; background: transparent; color: #49687a; font: 700 11px 'DM Sans', Arial, sans-serif; text-align: left; }
.chat-menu button:hover:not(:disabled), .chat-menu button:focus-visible { background: #e9f3f8; color: #205b7e; outline: none; }
.chat-menu button:disabled { opacity: .42; cursor: not-allowed; }
.chat-menu .cm-ico { display: inline-grid; place-items: center; width: 19px; color: #2c7299; font-size: 14px; }
.chat-menu button.danger { color: #cf5a4b; }
.chat-menu button.danger .cm-ico { color: #cf5a4b; }
.chat-menu button.danger:hover:not(:disabled), .chat-menu button.danger:focus-visible { background: #fff0ed; color: #b64a3d; }
.chat-menu-sep { height: 1px; margin: 5px 4px; background: #e3e9ed; }

/* ---------- Dialogruta ---------- */
.chat-modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 38, 50, .62); }
.chat-modal.show { display: flex; }
.chat-modal-box { width: min(400px, 100%); overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 18px 50px rgba(10,25,35,.45); }
.chat-modal-box form { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 0; background: linear-gradient(180deg, #fffdf6, #fff 45%); }
.chat-modal-box h3 { margin: 0; font: 900 16px 'Nunito', sans-serif; color: #2e4f65; }
.chat-modal-box p { margin: 0; color: #687887; font-size: 12px; line-height: 1.55; }
.chat-modal-box input, .chat-modal-box textarea { width: 100%; padding: 8px 11px; border: 1px solid #dfe7eb; border-radius: 5px; outline: 0; background: #fbfcfd; color: var(--ink); font: 600 12.5px 'Nunito', Arial, sans-serif; }
.chat-modal-box textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.chat-modal-box input:focus, .chat-modal-box textarea:focus { border-color: #8bc7ca; background: #fff; box-shadow: 0 0 0 3px #e3f5f3; }
.chat-modal-err { color: #d4604f; font-size: 11px; font-weight: 700; }
.chat-modal-foot { display: flex; justify-content: flex-end; gap: 7px; margin: 4px -16px 0; padding: 10px 16px; border-top: 1px solid #edf0f2; background: #fbfcfd; }
.chat-modal .button-danger { color: #fff; background: linear-gradient(#e8806f, #cf5a4b); border-color: #c85446; }
.chat-modal .button-danger:hover { color: #fff; }


}


/* ==========================================================
   admin.css – isolerad till respektive sida
   ========================================================== */
@scope (body.page-admin) {
/* =========================================================
   Playarea — admin.css
   Adminpanel i samma visuella språk som style.css.
   Kräver style.css (designtokens, .panel, .button, .tiny-avatar m.m.)
   Alla nya klasser har prefixet .adm- för att undvika krockar.
   ========================================================= */

.adm-shell { max-width: 1240px; margin: 0 auto; padding: 0 22px 10px; }

/* ---------- Rubrikrad ---------- */
.adm-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0 14px; }
.adm-head .brand { min-width: 0; }
.adm-head .brand-mark { height: 46px; width: 46px; font-size: 26px; }
.adm-head .brand-name { font-size: 28px; }
.adm-title { flex: 1; padding-left: 18px; border-left: 1px solid #d2dde3; }
.adm-title .welcome-kicker { display: block; }
.adm-title h1 { margin: 1px 0 0; font: 900 20px 'Nunito', sans-serif; color: #345066; letter-spacing: -.3px; }
.adm-head-actions { display: flex; gap: 7px; align-items: center; }
.adm-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid #c9dfd6; border-radius: 12px; background: #eaf7f0; color: #3b9568; font-size: 10px; font-weight: 800; }
.adm-pill i { width: 7px; height: 7px; border-radius: 50%; background: #4dbb82; box-shadow: 0 0 0 3px #d7f1e2; }

/* ---------- Layout ---------- */
.adm-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.adm-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* ---------- Sidomeny ---------- */
.adm-side { position: sticky; top: 12px; }
.adm-nav-group { padding: 8px 0 4px; border-bottom: 1px solid #eef2f4; }
.adm-nav-group:last-child { border-bottom: 0; }
.adm-nav-label { padding: 2px 13px 4px; color: #93a0aa; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.adm-nav a { display: flex; align-items: center; gap: 8px; padding: 6px 13px; color: #526779; font-size: 12px; font-weight: 700; border-left: 3px solid transparent; transition: background .15s; }
.adm-nav a:hover { background: #edf4f7; color: #2c7299; }
.adm-nav a.active { background: linear-gradient(90deg, #e3f0f6, #f4f9fb); color: #205b7e; border-left-color: #3b91b2; }
.adm-nav a i { font-style: normal; width: 16px; text-align: center; color: #8ba0ae; }
.adm-nav a.active i { color: #2c7299; }
.adm-nav a em { margin-left: auto; font-style: normal; font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 10px; background: var(--coral); color: #fff; }
.adm-nav a em.gold { background: #e3ae3d; }

/* ---------- Statistikrutor ---------- */
.adm-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.adm-tile { position: relative; padding: 10px 12px 9px; background: var(--paper); border: 1px solid #d9e2e7; border-top: 3px solid #3b91b2; border-radius: 6px; box-shadow: var(--shadow); }
.adm-tile.t-teal { border-top-color: #2e9e99; }
.adm-tile.t-gold { border-top-color: #e3ae3d; }
.adm-tile.t-coral { border-top-color: #e0705f; }
.adm-tile.t-purple { border-top-color: #9568b1; }
.adm-tile small { display: block; color: #93a0aa; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.adm-tile b { display: block; margin: 2px 0 1px; color: #2e4f65; font: 900 22px/1.1 'Nunito', sans-serif; }
.adm-tile span { font-size: 10px; color: #8a99a3; }
.adm-tile span.up { color: #3e9966; font-weight: 700; }
.adm-tile span.warn { color: #d4604f; font-weight: 700; }

/* ---------- Två- och tre-kolumnsrader ---------- */
.adm-row { display: grid; gap: 16px; align-items: start; }
.adm-row.r-2 { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.adm-row.r-eq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.adm-col { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* ---------- Tabeller ---------- */
.adm-table-wrap { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.adm-table th { padding: 7px 10px; background: #f3f8fa; border-bottom: 1px solid #e3e9ed; color: #8ba0ae; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-align: left; white-space: nowrap; }
.adm-table td { padding: 8px 10px; border-bottom: 1px solid #eef2f4; color: #657888; vertical-align: middle; }
.adm-table tbody tr { transition: background .15s, opacity .3s; }
.adm-table tbody tr:hover { background: #fafdfd; }
.adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-table tr.is-gone { opacity: 0; }
.adm-table .num-col { text-align: center; font: 900 12px 'Nunito', sans-serif; color: #5d7788; }
.adm-table .act-col { text-align: right; white-space: nowrap; }
.adm-table .sub { display: block; color: #9aa7af; font-size: 9px; }
.adm-user { display: flex; align-items: center; gap: 8px; min-width: 0; }
.adm-user .tiny-avatar { width: 28px; height: 28px; font-size: 12px; border: 2px solid #fff; outline: 1px solid #dce5e9; }
.adm-user b { display: block; color: #3d6a85; font-size: 11px; }
.adm-user small { display: block; color: #9aa7af; font-size: 9px; }
.adm-reason { display: block; margin-top: 3px; padding: 4px 8px; background: #f4f8fa; border-left: 3px solid #cfe1e8; border-radius: 0 4px 4px 0; color: #566e7e; font: 700 10.5px/1.45 'Nunito', sans-serif; }

/* ---------- Märken ---------- */
.adm-badge { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 9px; font-weight: 800; letter-spacing: .02em; background: #e1eef6; color: #2c7299; white-space: nowrap; }
.adm-badge.admin { background: #fde7e1; color: #d4604f; }
.adm-badge.mod { background: #fff1cc; color: #b98a1f; }
.adm-badge.vip { background: #efe3f6; color: #7b4d9a; }
.adm-badge.ok { background: #e1f4e9; color: #459b6a; }
.adm-badge.off { background: #eef1f3; color: #8a99a3; }
.adm-badge.ban { background: #f7d9d4; color: #c4503f; }
.adm-badge.wait { background: #fff1cc; color: #b98a1f; }
.adm-badge.spam { background: #fde7e1; color: #d4604f; }
.adm-badge.copy { background: #efe3f6; color: #7b4d9a; }
.adm-badge.harass { background: #f7d9d4; color: #c4503f; }
.adm-badge.lang { background: #fff1cc; color: #b98a1f; }
.adm-dot { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: #c9d4da; }
.adm-dot.on { background: #4dbb82; box-shadow: 0 0 0 3px #d7f1e2; }
.adm-dot.away { background: #e6b74b; }

/* ---------- Små knappar ---------- */
.adm-btn { display: inline-block; padding: 3px 8px; margin-left: 3px; border: 1px solid #cddfe5; border-radius: 4px; background: linear-gradient(#fff, #edf5f7); color: #47788f; font-size: 10px; font-weight: 800; transition: filter .12s, transform .12s; }
.adm-btn:hover { filter: brightness(.97); transform: translateY(-1px); border-color: #8bc7ca; color: #2e7594; }
.adm-btn.ok { color: #fff; background: linear-gradient(#43b2a9, #278f8e); border-color: #258986; }
.adm-btn.ok:hover { color: #fff; }
.adm-btn.no { color: #fff; background: linear-gradient(#f18d7b, #dc6b5e); border-color: #d86a5d; }
.adm-btn.no:hover { color: #fff; border-color: #d86a5d; }
.adm-btn.warn { color: #8a6516; background: linear-gradient(#fff8e2, #f9ecc2); border-color: #ecd68f; }

/* ---------- Verktygsrad ---------- */
.adm-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; background: linear-gradient(#fff, #f9fbfc); border-bottom: 1px solid #e3e9ed; }
.adm-tools input[type="search"], .adm-tools select { min-height: 30px; padding: 5px 10px; border: 1px solid #dfe7eb; border-radius: 5px; outline: 0; background: #fbfcfd; color: var(--ink); font-size: 11px; }
.adm-tools input[type="search"] { flex: 1; min-width: 150px; }
.adm-tools input:focus, .adm-tools select:focus { border-color: #8bc7ca; box-shadow: 0 0 0 3px #e3f5f3; background: #fff; }
.adm-tools .count { margin-left: auto; color: #93a0aa; font-size: 10px; }
.adm-tools .count b { color: #60798b; }

/* ---------- Diagram: registreringar per dag ---------- */
.adm-chart { display: flex; align-items: flex-end; gap: 10px; height: 130px; padding: 14px 16px 6px; background: linear-gradient(180deg, #fffdf6, #fff 60%); }
.adm-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.adm-bar i { display: block; width: 100%; max-width: 38px; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(#52c0b7, #2e9e99); box-shadow: inset 0 1px rgba(255,255,255,.3); transform-origin: bottom; animation: adm-grow .8s cubic-bezier(.2,.8,.3,1) both; }
.adm-bar.today i { background: linear-gradient(#f39a8a, #e0705f); }
.adm-bar b { font: 900 11px 'Nunito', sans-serif; color: #5d7788; }
.adm-chart-labels { display: flex; gap: 10px; padding: 0 16px 10px; background: #fff; }
.adm-chart-labels span { flex: 1; text-align: center; color: #93a0aa; font-size: 9px; font-weight: 700; }
@keyframes adm-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- Systemstatus ---------- */
.adm-meter { padding: 9px 12px 2px; }
.adm-meter-row { margin-bottom: 9px; }
.adm-meter-label { display: flex; justify-content: space-between; margin-bottom: 3px; color: #46697d; font-size: 10.5px; font-weight: 700; }
.adm-meter-label b { font: 900 11px 'Nunito', sans-serif; color: #2e8a85; }
.adm-meter-track { height: 8px; overflow: hidden; border-radius: 5px; background: #e9f0f3; box-shadow: inset 0 1px 2px rgba(35,64,82,.08); }
.adm-meter-track i { display: block; height: 100%; width: var(--pct); border-radius: 5px; background: linear-gradient(#52c0b7, #2e9e99); }
.adm-meter-row.mid .adm-meter-track i { background: linear-gradient(#f2d070, #e3ae3d); }
.adm-meter-row.mid .adm-meter-label b { color: #b98a1f; }
.adm-meter-row.hi .adm-meter-track i { background: linear-gradient(#f39a8a, #e0705f); }
.adm-meter-row.hi .adm-meter-label b { color: #d4604f; }
.adm-services { list-style: none; margin: 0; padding: 0; border-top: 1px dashed #e3eaee; }
.adm-services li { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; border-bottom: 1px solid #f0f3f5; font-size: 10.5px; color: #657888; }
.adm-services li:last-child { border-bottom: 0; }

/* ---------- Adminlogg ---------- */
.adm-log { list-style: none; margin: 0; padding: 0; }
.adm-log li { display: flex; gap: 9px; padding: 8px 12px; border-bottom: 1px solid #f0f3f5; font-size: 10.5px; line-height: 1.45; color: #657888; }
.adm-log li:last-child { border-bottom: 0; }
.adm-log time { flex: 0 0 38px; color: #a1abb2; font-size: 9px; font-weight: 700; padding-top: 1px; }
.adm-log b { color: #2e6685; }

/* ---------- Snabbåtgärder + kungörelse ---------- */
.adm-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 11px 12px; }
.adm-quick a { display: flex; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid #dce6ea; border-radius: 6px; background: linear-gradient(#fff, #f6f9fa); color: #3f6a82; font-size: 10.5px; font-weight: 800; transition: transform .12s, border-color .12s; }
.adm-quick a:hover { transform: translateY(-1px); border-color: #8bc7ca; color: #2e7594; }
.adm-quick a i { font-style: normal; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; background: #e1eef6; color: #2c7299; font-size: 12px; }
.adm-quick a:nth-child(2) i { background: #fff1cc; color: #c9961f; }
.adm-quick a:nth-child(3) i { background: #fde7e1; color: #e0705f; }
.adm-quick a:nth-child(4) i { background: #e4f4ea; color: #3e9966; }

.adm-form { display: flex; flex-direction: column; gap: 8px; padding: 11px 12px 12px; }
.adm-form label { color: #52687a; font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.adm-form input, .adm-form textarea, .adm-form select { width: 100%; padding: 7px 10px; border: 1px solid #dfe7eb; border-radius: 5px; background: #fbfcfd; color: var(--ink); font: 500 12px 'DM Sans', Arial, sans-serif; outline: 0; }
.adm-form textarea { min-height: 62px; resize: vertical; }
.adm-form input:focus, .adm-form textarea:focus, .adm-form select:focus { border-color: #8bc7ca; background: #fff; box-shadow: 0 0 0 3px #e3f5f3; }

/* ---------- Toast ---------- */
.adm-toast { position: fixed; left: 50%; bottom: 22px; z-index: 50; padding: 10px 16px; border-radius: 9px; background: #2a3b4a; color: #fff; font-size: 12px; box-shadow: 0 8px 24px rgba(20,40,55,.3); opacity: 0; pointer-events: none; transform: translate(-50%, 14px); transition: .25s; }
.adm-toast.show { opacity: 1; transform: translate(-50%, 0); }

.adm-empty { padding: 18px; text-align: center; color: #93a0aa; font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  .adm-bar i { animation: none; }
  .adm-table tbody tr, .adm-toast { transition: none; }
}

}

/* Kontomeny i administrationssidans sidhuvud */
.page-admin .adm-head-actions .user-account { min-width: 190px; background: #fff; border: 1px solid #d5e0e6; border-radius: 6px; color: #344957; }
.page-admin .adm-head-actions .user-account .account-trigger { color: #344957; }


/* =======================================================
   Playarea – Registrering. Endast sidans egna komponenter.
   Gemensam header, navigation och footer styrs ovan.
   ======================================================= */
.lajv-register-breadcrumb {display:flex;gap:9px;align-items:center;padding:10px 12px;margin:0 0 15px;background:#f8fafb;border:1px solid #dce5e9;border-radius:5px;color:#8a9da9;font-size:11px}
.lajv-register {display:grid;grid-template-columns:minmax(0,.92fr) minmax(440px,1.08fr);gap:17px;align-items:stretch}
.lajv-register .register-server-errors {padding:12px 18px;background:#fff4f1;color:#b8584e;border-bottom:1px solid #f0d0cb;font-size:12px}
.lajv-register .register-server-errors ul {margin:5px 0 0;padding-left:18px}
.lajv-register .intro-panel {
  position: relative; overflow: hidden; min-height: 610px; padding: 31px 30px 24px;
  border: 1px solid #d7e5e8; border-radius: 7px;
  background:
    radial-gradient(circle at 93% 12%, rgba(255,255,255,.58) 0 4px, transparent 5px),
    linear-gradient(145deg, #e2f2ef 0%, #eaf4f6 55%, #dcebf2 100%);
  box-shadow: var(--shadow);
}
.lajv-register .intro-label { display: inline-flex; align-items: center; gap: 7px; color: #4b9696; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.lajv-register .label-star { color: var(--coral); font-size: 15px; }
.lajv-register .intro-panel h1 { position: relative; z-index: 1; max-width: 380px; margin: 17px 0 12px; color: #254e68; font: 900 39px/1.12 "Nunito", sans-serif; letter-spacing: -1.3px; }
.lajv-register .intro-panel h1 span { display: block; color: #2e9e99; }
.lajv-register .intro-lead { position: relative; z-index: 1; max-width: 360px; margin: 0; color: #617c8a; font-size: 13px; line-height: 1.8; }
.lajv-register .perks { position: relative; z-index: 1; display: grid; gap: 19px; margin-top: 32px; }
.lajv-register .perk { display: flex; gap: 12px; align-items: flex-start; }
.lajv-register .perk-icon { display: grid; place-items: center; width: 39px; height: 39px; flex: 0 0 auto; border: 2px solid rgba(255,255,255,.85); border-radius: 10px 10px 10px 4px; box-shadow: 0 2px 0 rgba(52,94,111,.08); font: 900 21px "Nunito"; }
.lajv-register .perk-teal { background: #bde6df; color: #287e7d; }
.lajv-register .perk-coral { background: #f8d5cc; color: #c7655a; }
.lajv-register .perk-gold { background: #f8e7b8; color: #aa8430; }
.lajv-register .perk b { display: block; margin: 1px 0 3px; color: #355a70; font: 900 13px "Nunito"; }
.lajv-register .perk p { max-width: 300px; margin: 0; color: #718995; font-size: 11px; line-height: 1.65; }
.lajv-register .member-note { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-top: 32px; padding: 13px; background: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.95); border-radius: 6px; }
.lajv-register .note-mark { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 8px; background: #fbe4dd; color: #d87567; font-size: 16px; }
.lajv-register .member-note b, .lajv-register .member-note span { display: block; }
.lajv-register .member-note b { color: #4a7183; font: 900 11px "Nunito"; }
.lajv-register .member-note span { margin-top: 2px; color: #8799a2; font-size: 10px; }
.lajv-register .doodle { position: absolute; color: rgba(46,158,153,.18); pointer-events: none; }
.lajv-register .doodle-one { top: 52px; right: 28px; font-size: 33px; transform: rotate(13deg); }
.lajv-register .doodle-two { top: 105px; right: 65px; color: rgba(237,121,105,.24); font-size: 25px; }
.lajv-register .doodle-three { right: 28px; bottom: 100px; color: rgba(237,121,105,.2); font-size: 38px; transform: rotate(12deg); }
.lajv-register .form-panel { overflow: hidden; background: #fff; border: 1px solid #d8e2e7; border-radius: 7px; box-shadow: var(--shadow); }
.lajv-register .form-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 23px 25px 18px; }
.lajv-register .form-kicker { color: #8ca0ab; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.lajv-register .form-heading h2 { margin: 4px 0 3px; color: #2d526a; font: 900 24px/1.2 "Nunito", sans-serif; letter-spacing: -.5px; }
.lajv-register .form-heading p { margin: 0; color: #84949e; font-size: 11px; }
.lajv-register .form-stamp { position: relative; display: grid; place-items: center; width: 49px; height: 49px; flex: 0 0 auto; border: 2px dashed #b4d8d6; border-radius: 50%; color: #3b9d98; font: 900 27px "Nunito"; transform: rotate(-8deg); }
.lajv-register .form-stamp small { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 19px; height: 19px; border: 2px solid #fff; border-radius: 50%; background: #f3c45b; color: #fff; font-size: 10px; }
.lajv-register .form-ribbon { display: flex; align-items: center; gap: 9px; padding: 8px 25px; background: #edf7f6; border-top: 1px solid #d7eeeb; border-bottom: 1px solid #d7eeeb; color: #4b9392; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.lajv-register .form-ribbon span { color: #e4b64e; }
.lajv-register #register-form { padding: 18px 25px 17px; }
.lajv-register .field { display: flex; flex-direction: column; min-width: 0; margin-bottom: 13px; }
.lajv-register .field label { margin-bottom: 5px; color: #496579; font-size: 11px; font-weight: 800; }
.lajv-register .field label > span:not(.optional) { color: var(--coral); }
.lajv-register .field label .optional { margin-left: 5px; color: #a2afb6; font-size: 8px; letter-spacing: .08em; }
.lajv-register .field input { width: 100%; min-width: 0; height: 39px; padding: 0 11px; border: 1px solid #d7e2e7; border-radius: 4px; outline: none; background: #fcfdfd; color: #354d5e; font-size: 12px; transition: border-color .15s, box-shadow .15s, background .15s; }
.lajv-register .field input::placeholder { color: #aab5bc; }
.lajv-register .field input:focus { border-color: #75bcb7; background: #fff; box-shadow: 0 0 0 3px rgba(46,158,153,.12); }
.lajv-register .field input:invalid:not(:placeholder-shown) { border-color: #e7a39a; }
.lajv-register .field small { margin-top: 4px; color: #9aa7ae; font-size: 9px; line-height: 1.5; }
.lajv-register .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lajv-register .field-error { min-height: 0; margin-top: 3px; color: #c75f56; font-size: 10px; }
.lajv-register .field-error:empty { display: none; }
.lajv-register .terms-box { display: flex; align-items: flex-start; gap: 8px; margin-top: 3px; padding: 11px 10px; background: #f7fafb; border: 1px solid #e4ebef; border-radius: 5px; }
.lajv-register .terms-box input { width: 15px; height: 15px; flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--teal); }
.lajv-register .terms-box label { color: #788b97; font-size: 10px; line-height: 1.65; }
.lajv-register .terms-box label a { font-weight: 800; text-decoration: underline; text-decoration-color: #c2d9df; text-underline-offset: 2px; }
.lajv-register .terms-box label span { color: var(--coral); }
.lajv-register .terms-error { display: block; margin: 4px 0 0; }
.lajv-register .terms-error:empty { display: none; }
.lajv-register .submit-button { display: flex; align-items: center; justify-content: center; gap: 13px; width: 100%; min-height: 45px; margin-top: 14px; padding: 10px 16px; border: 1px solid #287f80; border-radius: 5px; background: linear-gradient(180deg, #3aa9a2, #278d8d); box-shadow: 0 3px 0 #d0e7e5; color: #fff; font: 900 13px "Nunito", sans-serif; transition: transform .12s, filter .12s, box-shadow .12s; }
.lajv-register .submit-button span { font-size: 17px; transition: transform .15s; }
.lajv-register .submit-button:hover { filter: brightness(1.04); box-shadow: 0 3px 0 #b6d9d6; }
.lajv-register .submit-button:hover span { transform: translateX(3px); }
.lajv-register .submit-button:active { transform: translateY(2px); box-shadow: 0 1px 0 #b6d9d6; }
.lajv-register .form-message { margin: 9px 0 0; font-size: 10px; line-height: 1.5; }
.lajv-register .form-message:empty { display: none; }
.lajv-register .message-error { padding: 8px 10px; border: 1px solid #f0d0cb; border-radius: 4px; background: #fff4f1; color: #b8584e; }
.lajv-register .message-info { padding: 8px 10px; border: 1px solid #cce7df; border-radius: 4px; background: #f0faf5; color: #3b826a; }
.lajv-register .privacy-note { display: flex; gap: 7px; align-items: flex-start; margin: 11px 0 0; color: #9ba8af; font-size: 9px; line-height: 1.6; }
.lajv-register .privacy-note span { color: #72aaa8; }
.lajv-register .already-member { padding: 13px 25px; border-top: 1px solid #edf1f3; background: #fbfcfd; color: #8797a0; text-align: center; font-size: 10px; }
.lajv-register .already-member a { margin-left: 4px; font-weight: 800; }


/* Playarea: registreringsformulär från register.html (isolerat) */

.lajv-reg-page .page-band { position:relative;overflow:hidden;margin-bottom:18px;padding:20px 24px 18px;border:1px solid #c8e2e0;border-radius:8px;box-shadow:var(--shadow);background:linear-gradient(115deg,#d9f0ed 0%,#e6f3f2 50%,#f8e9c5 100%); }
.lajv-reg-page .page-band:before {content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 20%,rgba(255,239,205,.8),transparent 42%);}
.lajv-reg-page .page-band > * {position:relative;}
.lajv-reg-page .page-band h1 {margin:6px 0;font:900 34px/1.1 'Nunito',sans-serif;color:#59483c;}
.lajv-reg-page .page-band h1 span {color:#b96545;}
.lajv-reg-page .page-band p {margin:0;color:#78675a;font-size:12.5px;}
.lajv-reg-page .crumbs {margin:0 2px 10px;color:#93a0aa;font-size:10px;}
.lajv-reg-page .crumbs a {font-weight:700;}
.lajv-reg-page .crumbs span {padding:0 5px;}
.lajv-reg-page .panel {background:#fff;border:1px solid #d9e2e7;border-radius:7px;box-shadow:var(--shadow);overflow:hidden;}
.lajv-reg-page .panel-heading {min-height:35px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:linear-gradient(#fff,#f7f9fa);border-bottom:1px solid #e3e9ed;color:#52687a;font-size:10px;font-weight:900;letter-spacing:.065em;}
.lajv-reg-page .panel-heading small {font-size:10px;letter-spacing:0;}
.lajv-reg-page .button {display:inline-flex;align-items:center;justify-content:center;}
.lajv-reg-page .reg-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.lajv-reg-page .reg-form { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; }
.lajv-reg-page .reg-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lajv-reg-page .reg-form .form-field { display: flex; flex-direction: column; gap: 5px; }
.lajv-reg-page .reg-form label, .lajv-reg-page .reg-form legend { color: #46565c; font-size: 11.5px; font-weight: 700; padding: 0; }
.lajv-reg-page .reg-form .hint { color: #9aa6ae; font-size: 10px; font-weight: 500; }
.lajv-reg-page .reg-form input[type=text], .lajv-reg-page .reg-form input[type=email], .lajv-reg-page .reg-form input[type=password], .lajv-reg-page .reg-form select, .lajv-reg-page .reg-form textarea {
  width: 100%; min-height: 41px; padding: 9px 12px; background: #fff; border: 1px solid #d6e0e2; border-radius: 9px; color: var(--ink);
  font: 500 13px "DM Sans", sans-serif; outline: none; transition: border-color .18s, box-shadow .18s;
}
.lajv-reg-page .reg-form textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
.lajv-reg-page .reg-form input:hover, .lajv-reg-page .reg-form select:hover, .lajv-reg-page .reg-form textarea:hover { border-color: #a9c4c4; }
.lajv-reg-page .reg-form input:focus, .lajv-reg-page .reg-form select:focus, .lajv-reg-page .reg-form textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(46,158,153,.12); }
.lajv-reg-page .reg-form .invalid input, .lajv-reg-page .reg-form .invalid select { border-color: #e0705f; box-shadow: 0 0 0 3px rgba(224,112,95,.12); }
.lajv-reg-page .reg-form .valid input { border-color: #66b8b1; }
.lajv-reg-page .err { min-height: 0; color: #d0574a; font-size: 10.5px; font-weight: 600; }
.lajv-reg-page .ok { color: #3aa878; font-size: 10.5px; font-weight: 700; }
.lajv-reg-page .pw-wrap { position: relative; }
.lajv-reg-page .pw-wrap input { padding-right: 62px !important; }
.lajv-reg-page .pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: #eef5f7; color: #4b7f96; padding: 4px 8px; border-radius: 5px; font-size: 10px; font-weight: 800; }
.lajv-reg-page .pw-meter { display: flex; gap: 4px; margin-top: 2px; }
.lajv-reg-page .pw-meter i { flex: 1; height: 4px; border-radius: 2px; background: #e3eaee; transition: background .2s; }
.lajv-reg-page .pw-meter[data-level="1"] i:nth-child(-n/**/+1) { background: #e0705f; }
.lajv-reg-page .pw-meter[data-level="2"] i:nth-child(-n/**/+2) { background: #e3ae3d; }
.lajv-reg-page .pw-meter[data-level="3"] i:nth-child(-n/**/+3) { background: #7bbf7a; }
.lajv-reg-page .pw-meter[data-level="4"] i { background: #3aa878; }
.lajv-reg-page fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.lajv-reg-page .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lajv-reg-page .chip { position: relative; }
.lajv-reg-page .chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.lajv-reg-page .chip span { display: inline-block; padding: 5px 11px; border: 1px solid #d6e5e6; border-radius: 14px; background: #fff; color: #4b8796; font-size: 11px; font-weight: 700; transition: .15s; }
.lajv-reg-page .chip:hover span { border-color: #8bc7ca; background: #f1faf9; }
.lajv-reg-page .chip input:checked + span { background: #2e9e99; border-color: #2e9e99; color: #fff; }
.lajv-reg-page .chip input:focus-visible + span { outline: 2px solid #3b91b2; outline-offset: 2px; }
.lajv-reg-page .check { display: flex; gap: 9px; align-items: flex-start; font-size: 11px; color: #687887; line-height: 1.5; font-weight: 500 !important; }
.lajv-reg-page .check input { width: 16px; height: 16px; margin-top: 1px; accent-color: var(--teal); flex: 0 0 auto; }
.lajv-reg-page .reg-form .submit { min-height: 46px; padding: 11px 15px; background: linear-gradient(#f18d7b, #dc6b5e); border: 1px solid #d86a5d; border-radius: 9px; color: #fff; font: 800 14px "DM Sans", sans-serif; box-shadow: inset 0 1px rgba(255,255,255,.24), 0 2px 0 rgba(25,55,72,.09); transition: filter .15s, transform .15s; }
.lajv-reg-page .reg-form .submit:hover { filter: brightness(1.05); transform: translateY(-1px); }
.lajv-reg-page .reg-form .submit:disabled { opacity: .6; cursor: wait; transform: none; }
.lajv-reg-page .reg-foot { text-align: center; color: #8795a0; font-size: 11px; }
.lajv-reg-page .reg-foot a { font-weight: 800; }
.lajv-reg-page .success { display: none; padding: 30px 22px; text-align: center; }
.lajv-reg-page .success.show { display: block; animation: slide-in .5s ease; }
.lajv-reg-page .success .big { font-size: 46px; }
.lajv-reg-page .success h2 { margin: 8px 0 6px; font: 900 24px "Nunito"; color: #2e6685; }
.lajv-reg-page .success p { max-width: 420px; margin: 0 auto 16px; color: #687887; font-size: 12.5px; line-height: 1.6; }
@keyframes slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.lajv-reg-page .perk-list { margin: 0; padding: 6px 0; list-style: none; }
.lajv-reg-page .perk-list li { display: flex; gap: 11px; padding: 10px 13px; border-bottom: 1px solid #f0f3f5; }
.lajv-reg-page .perk-list li:last-child { border-bottom: 0; }
.lajv-reg-page .perk-list .feat-ico { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; font-size: 16px; background: #e4f2f1; color: #2e9e99; }
.lajv-reg-page .perk-list .feat-ico.gold { background: #fff1cc; color: #cf9a24; }
.lajv-reg-page .perk-list .feat-ico.coral { background: #fde7e1; color: #e0705f; }
.lajv-reg-page .perk-list .feat-ico.blue { background: #e1eef6; color: #2c7299; }
.lajv-reg-page .perk-list b { display: block; color: #2e4f65; font: 900 13px "Nunito"; }
.lajv-reg-page .perk-list span { color: #687887; font-size: 11px; line-height: 1.5; }
.lajv-reg-page .faq details { border-bottom: 1px solid #eef2f4; padding: 9px 13px; }
.lajv-reg-page .faq details:last-child { border-bottom: 0; }
.lajv-reg-page .faq summary { cursor: pointer; color: #34607a; font: 800 12px "Nunito"; }
.lajv-reg-page .faq details p { margin: 6px 0 2px; color: #687887; font-size: 11px; line-height: 1.55; }

/* Playarea REGISTRERING: ursprunglig vänsterpanel + nytt formulär */
.lajv-reg-page .register-layout { display:grid; grid-template-columns:minmax(0,.92fr) minmax(440px,1.08fr); gap:17px; align-items:stretch; padding-top:10px; }
.lajv-reg-page .register-layout > .panel {min-width:0;}
.lajv-reg-page .intro-panel {
  position: relative; overflow: hidden; min-height: 610px; padding: 31px 30px 24px;
  border: 1px solid #d7e5e8; border-radius: 7px;
  background:
    radial-gradient(circle at 93% 12%, rgba(255,255,255,.58) 0 4px, transparent 5px),
    linear-gradient(145deg, #e2f2ef 0%, #eaf4f6 55%, #dcebf2 100%);
  box-shadow: var(--shadow);
}.lajv-reg-page .intro-label { display: inline-flex; align-items: center; gap: 7px; color: #4b9696; font-size: 9px; font-weight: 900; letter-spacing: .13em; }.lajv-reg-page .label-star { color: var(--coral); font-size: 15px; }.lajv-reg-page .intro-panel h1 { position: relative; z-index: 1; max-width: 380px; margin: 17px 0 12px; color: #254e68; font: 900 39px/1.12 'Nunito', sans-serif; letter-spacing: -1.3px; }.lajv-reg-page .intro-panel h1 span { display: block; color: #2e9e99; }.lajv-reg-page .intro-lead { position: relative; z-index: 1; max-width: 360px; margin: 0; color: #617c8a; font-size: 13px; line-height: 1.8; }.lajv-reg-page .perks { position: relative; z-index: 1; display: grid; gap: 19px; margin-top: 32px; }.lajv-reg-page .perk { display: flex; gap: 12px; align-items: flex-start; }.lajv-reg-page .perk-icon { display: grid; place-items: center; width: 39px; height: 39px; flex: 0 0 auto; border: 2px solid rgba(255,255,255,.85); border-radius: 10px 10px 10px 4px; box-shadow: 0 2px 0 rgba(52,94,111,.08); font: 900 21px 'Nunito'; }.lajv-reg-page .perk-teal { background: #bde6df; color: #287e7d; }.lajv-reg-page .perk-coral { background: #f8d5cc; color: #c7655a; }.lajv-reg-page .perk-gold { background: #f8e7b8; color: #aa8430; }.lajv-reg-page .perk b { display: block; margin: 1px 0 3px; color: #355a70; font: 900 13px 'Nunito'; }.lajv-reg-page .perk p { max-width: 300px; margin: 0; color: #718995; font-size: 11px; line-height: 1.65; }.lajv-reg-page .member-note { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-top: 32px; padding: 13px; background: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.95); border-radius: 6px; }.lajv-reg-page .note-mark { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 8px; background: #fbe4dd; color: #d87567; font-size: 16px; }.lajv-reg-page .member-note b, .lajv-reg-page .member-note span { display: block; }.lajv-reg-page .member-note b { color: #4a7183; font: 900 11px 'Nunito'; }.lajv-reg-page .member-note span { margin-top: 2px; color: #8799a2; font-size: 10px; }.lajv-reg-page .doodle { position: absolute; color: rgba(46,158,153,.18); pointer-events: none; }.lajv-reg-page .doodle-one { top: 52px; right: 28px; font-size: 33px; transform: rotate(13deg); }.lajv-reg-page .doodle-two { top: 105px; right: 65px; color: rgba(237,121,105,.24); font-size: 25px; }.lajv-reg-page .doodle-three { right: 28px; bottom: 100px; color: rgba(237,121,105,.2); font-size: 38px; transform: rotate(12deg); }



/* ==========================================
   Playarea – VÄLKOMSTTOAST EFTER REGISTRERING
   ========================================== */

.lajv-welcome-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(20, 40, 55, 0.45);
    animation: lajvOverlayIn 0.35s ease-out both;
}

.lajv-welcome-toast {
    display: flex;
    align-items: center;
    gap: 20px;

    width: 480px;
    max-width: calc(100% - 40px);
    padding: 30px 32px;

    background: #ffffff;
    border: 1px solid #dce4e9;
    border-top: 5px solid #2e9e99;
    border-radius: 8px;
    box-shadow: 0 18px 55px rgba(15, 35, 50, 0.30);

    animation: lajvToastIn 0.45s ease-out both;
}

.lajv-welcome-toast-icon {
    flex-shrink: 0;
    font-size: 44px;
    line-height: 1;
}

.lajv-welcome-toast-text {
    display: flex;
    flex-direction: column;
    gap: 7px;
    line-height: 1.5;
}

.lajv-welcome-toast-text strong {
    color: #2c7299;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
}

.lajv-welcome-toast-text span {
    color: #526575;
    font-size: 14px;
}

.lajv-welcome-toast-text span:first-of-type {
    font-weight: 700;
    color: #2e9e99;
}

.lajv-welcome-overlay.is-hiding {
    animation: lajvOverlayOut 0.4s ease-in forwards;
    pointer-events: none;
}

.lajv-welcome-overlay.is-hiding .lajv-welcome-toast {
    animation: lajvToastOut 0.4s ease-in forwards;
}

@keyframes lajvOverlayIn {
    from {
        background: rgba(20, 40, 55, 0);
    }

    to {
        background: rgba(20, 40, 55, 0.45);
    }
}

@keyframes lajvOverlayOut {
    from {
        background: rgba(20, 40, 55, 0.45);
    }

    to {
        background: rgba(20, 40, 55, 0);
    }
}

@keyframes lajvToastIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes lajvToastOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-12px) scale(0.97);
    }
}
/* Playarea: stilar för inloggad startsida. Lägg till sist i befintlig style.css. */
/* =========================================================
   Playarea — pages.css
   Sidspecifik CSS som BARA lägger till nya klasser.
   Inga befintliga selektorer i style.css skrivs över.
   Används av: start-inloggad.html (och senare övriga sidor)
   ========================================================= */

/* ---------- Hjälpklass för filtrering ---------- */
.is-hidden { display: none !important; }

/* ---------- Liten profilbild i toppen (user-chip) ---------- */
.user-chip .mini-avatar { overflow: hidden; padding: 0; }
.user-chip .mini-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.user-chip small a { color: var(--muted); font-weight: 700; }
.user-chip small a:hover { color: var(--coral); }

/* ---------- "Din sida" – ersätter inloggningsrutan ---------- */
.me-panel { display: flex; flex-direction: column; }
.me-top {
  display: flex; align-items: center; gap: 11px; padding: 12px 13px 10px;
  background: linear-gradient(180deg, #fffdf6, #fff 80%);
}
.me-photo {
  position: relative; flex: 0 0 auto; width: 52px; height: 52px; overflow: hidden;
  border: 3px solid #fff; outline: 1px solid #d9e3e8; border-radius: 8px;
  box-shadow: 0 3px 7px #cfdce2; transform: rotate(-2deg);
}
.me-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.me-top h3 { margin: 0; font: 900 16px 'Nunito', sans-serif; color: #2e4f65; }
.me-top small { display: block; color: #8a98a2; font-size: 10px; }
.me-mood { display: block; margin-top: 3px; color: #587487; font: 700 11px 'Nunito', sans-serif; }
.me-mood b { color: #2e8a85; }

.me-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px dashed #e3eaee; border-bottom: 1px dashed #e3eaee; background: #fbfcfd; }
.me-stats a { padding: 7px 4px; text-align: center; color: #5d7788; border-left: 1px dashed #e3eaee; }
.me-stats a:first-child { border-left: 0; }
.me-stats b { display: block; font: 900 15px/1.2 'Nunito', sans-serif; color: #2c7299; }
.me-stats small { font-size: 9px; font-weight: 700; color: #94a1aa; letter-spacing: .03em; }
.me-stats a:hover b { color: var(--coral); }

.me-notes { list-style: none; margin: 0; padding: 0; flex: 1; }
.me-notes li { display: flex; align-items: center; gap: 8px; padding: 7px 13px; border-bottom: 1px solid #f0f3f5; font-size: 11px; color: #657888; }
.me-notes li:last-child { border-bottom: 0; }
.me-notes .ni { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; background: #e1eef6; color: #2c7299; font-size: 11px; }
.me-notes .ni.coral { background: #fde7e1; color: #e0705f; }
.me-notes .ni.gold { background: #fff1cc; color: #c9961f; }
.me-notes .ni.green { background: #e4f4ea; color: #3e9966; }
.me-notes a { flex: 1; min-width: 0; font-weight: 700; }
.me-notes time { color: #a1abb2; font-size: 9px; white-space: nowrap; }

/* ---------- Flödet: smådetaljer ---------- */
.share-box .share-label { color: #8a98a2; font-size: 10px; font-weight: 700; white-space: nowrap; }
.share-box .button { padding: 7px 12px; }
.act-body .act-time-mobile { display: none; }
.act-thumbs span.ph-sunset, .act-thumbs span.ph-forest, .act-thumbs span.ph-sky,
.act-thumbs span.ph-autumn, .act-thumbs span.ph-water, .act-thumbs span.ph-neon { display: block; }
.act-action { display: inline-block; margin-top: 5px; padding: 2px 9px; border: 1px solid #cddfe5; border-radius: 10px; background: #fff; color: #47788f; font-size: 9px; font-weight: 800; }
.act-action:hover { background: #e3f5f3; border-color: #8bc7ca; color: #2e7594; }
.act-new { background: #fffdf0; }

/* ---------- Forum: oläst / läst ---------- */
.unread-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--coral); vertical-align: 1px; }
.forum-row.unread { background: #fffcf4; }
.forum-row.unread:hover { background: #fffaee; }
.forum-row.unread .topic h3 a { font-weight: 900; }
.forum-row.read .topic h3 a { color: #6d8798; font-weight: 700; }
.forum-row.read .topic-icon { filter: saturate(.55); opacity: .85; }
.legend { display: flex; gap: 14px; align-items: center; padding: 6px 13px; border-top: 1px solid #edf0f2; background: #fbfcfd; color: #93a0a9; font-size: 9px; }
.legend i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--coral); }
.legend i.r { background: #c9d4da; }

/* ---------- Klubbar: medlemsmarkering ---------- */
.disc-foot .member-flag { color: #459b6a; font-weight: 800; }
.disc-foot .member-flag:before { content: "✓ "; }

/* ---------- Sidokolumn ---------- */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; }
.stat-grid div { padding: 9px 12px; border-bottom: 1px solid #f0f3f5; border-left: 1px solid #f0f3f5; }
.stat-grid div:nth-child(odd) { border-left: 0; }
.stat-grid div:nth-last-child(-n+2) { border-bottom: 0; }
.stat-grid b { display: block; color: #2c7299; font: 900 16px/1.15 'Nunito', sans-serif; }
.stat-grid small { color: #94a1aa; font-size: 9px; font-weight: 700; letter-spacing: .03em; }
.stat-grid .hl b { color: #e0705f; }

.suggest .newbie small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.online-count { color: #3aa878; font: 800 9px 'DM Sans', sans-serif; letter-spacing: 0; }

/* =========================================================
   Fler avatarfärger (medlemmar som inte finns i style.css)
   ========================================================= */
.avatar-elin { background: linear-gradient(145deg, #8fd3c8, #3f9a8f); }
.avatar-johan { background: linear-gradient(145deg, #c7a98a, #8a6a4f); }
.avatar-frida { background: linear-gradient(145deg, #f5a7c0, #cf5f86); }
.avatar-linus { background: linear-gradient(145deg, #9dc4f0, #4a7ec4); }

/* ---------- Sidrubrik med knappar ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.page-head .block-title { margin: 0; }
.page-head-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.crumbs { margin: 0 2px 10px; color: #93a0aa; font-size: 10px; }
.crumbs a { font-weight: 700; }
.crumbs span { padding: 0 5px; color: #c0cad0; }

/* =========================================================
   MEDLEMMAR
   ========================================================= */
.mem-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; background: linear-gradient(#fff, #f9fbfc); border-bottom: 1px solid #e3e9ed; }
.mem-tools input[type="search"], .mem-tools select, .mem-tools input[type="number"] {
  min-height: 30px; padding: 5px 10px; border: 1px solid #dfe7eb; border-radius: 5px; outline: 0;
  background: #fbfcfd; color: var(--ink); font-size: 11px;
}
.mem-tools input[type="search"] { flex: 1 1 180px; min-width: 150px; }
.mem-tools input[type="number"] { width: 56px; }
.mem-tools input:focus, .mem-tools select:focus { border-color: #8bc7ca; background: #fff; box-shadow: 0 0 0 3px #e3f5f3; }
.mem-tools label { color: #7b8795; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.mem-tools .mem-count { margin-left: auto; color: #93a0aa; font-size: 10px; white-space: nowrap; }
.mem-tools .mem-count b { color: #60798b; }

.mem-head, .mem-row { display: grid; grid-template-columns: 44px minmax(0, 1.05fr) minmax(0, 1.5fr) 104px 128px; align-items: center; gap: 10px; padding: 0 13px; }
.mem-head { min-height: 28px; background: #f3f8fa; border-bottom: 1px solid #e3e9ed; color: #8ba0ae; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.mem-row { min-height: 52px; padding-top: 7px; padding-bottom: 7px; border-bottom: 1px solid #eef2f4; transition: background .15s; }
.mem-row:hover { background: #fafdfd; }
.mem-row:last-child { border-bottom: 0; }
.mem-row .tiny-avatar { width: 38px; height: 38px; font-size: 16px; border: 2px solid #fff; outline: 1px solid #d9e3e8; box-shadow: 0 2px 4px #dbe5ea; }
.mem-name { min-width: 0; }
.mem-name a { display: inline-block; color: #34607a; font: 800 12px/1.3 'Nunito', sans-serif; }
.mem-name a:hover { color: var(--coral); }
.mem-name small { display: block; color: #9aa7af; font-size: 10px; }
.mem-flag { margin-left: 4px; padding: 0 5px; border-radius: 3px; background: #fff1cc; color: #b98a1f; font: 900 8px/14px 'DM Sans'; letter-spacing: .06em; vertical-align: 1px; }
.mem-flag.admin { background: #fde7e1; color: #d4604f; }
.mem-flag.bday { background: #fde7e1; color: #d4604f; }
.mem-mood { min-width: 0; color: #5a6f80; font: 700 11px/1.4 'Nunito', sans-serif; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mem-mood:before { content: "“"; color: #e0b24b; font-size: 15px; line-height: 0; margin-right: 1px; vertical-align: -3px; }
.mem-seen { font-size: 10px; color: #8a99a3; line-height: 1.35; }
.mem-seen b { display: block; font-size: 10px; }
.mem-seen .on { color: #3aa878; }
.mem-seen .away { color: #c9961f; }
.mem-actions { display: flex; gap: 5px; justify-content: flex-end; }
.mem-actions .button { padding: 4px 9px; font-size: 10px; }
.mem-actions .button.sent { background: #e1f4e9; border-color: #b5e0c8; color: #459b6a; }
.mem-empty { padding: 26px 14px; text-align: center; color: #93a0aa; font-size: 12px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 13px; border-top: 1px solid #edf0f2; background: #fbfcfd; font-size: 10px; color: #93a0aa; }
.pager nav { display: flex; gap: 3px; }
.pager nav a { min-width: 24px; padding: 3px 7px; border: 1px solid #d6e5e6; border-radius: 4px; background: #fff; color: #4b8796; text-align: center; font-weight: 800; }
.pager nav a.cur { background: #3a91a9; border-color: #3a91a9; color: #fff; }
.pager nav a:hover { border-color: #8bc7ca; }
.pager nav a.cur:hover { color: #fff; }

/* =========================================================
   FORUM
   ========================================================= */
.fcat + .fcat, .forum-stack > * + * { margin-top: 16px; }
.forum-stack { display: flex; flex-direction: column; }
.forum-stack .home-main { gap: 16px; }
.panel-heading .cat-sub { color: #94a1aa; font: 500 10px 'DM Sans'; letter-spacing: 0; }
.forum-row .topic p { margin: 1px 0 0; color: #9aa7af; font-size: 10px; }
.forum-row .topic h3 .sub-links { font-weight: 700; }
.forum-row.unread .topic h3 a { font-weight: 900; }
.forum-row .last-post > div:last-child { min-width: 0; }
.forum-row .last-post a { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #4c7890; font-weight: 700; font-size: 10px; }
.forum-row .last-post a:hover { color: var(--coral); }
.forum-row .last-post b { font-size: 10px; }
.topic-icon.lock { background: #eef1f3; color: #8a99a3; }
.badge.gray { background: #9aa7af; }
.forum-row.locked .topic h3 a { color: #7d909d; }
.mini-subs { margin-top: 3px; font-size: 9px; color: #9aa7af; }
.mini-subs a { margin-right: 6px; font-weight: 700; }
.forum-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 9px 12px; background: linear-gradient(#fff, #f9fbfc); border-bottom: 1px solid #e3e9ed; }
.forum-actions input[type="search"] { flex: 1 1 160px; min-width: 130px; min-height: 30px; padding: 5px 10px; border: 1px solid #dfe7eb; border-radius: 5px; outline: 0; background: #fbfcfd; color: var(--ink); font-size: 11px; }
.forum-actions input:focus { border-color: #8bc7ca; background: #fff; box-shadow: 0 0 0 3px #e3f5f3; }
.rules-list { margin: 0; padding: 10px 14px 12px 28px; color: #687887; font-size: 11px; line-height: 1.6; }
.rules-list li + li { margin-top: 3px; }
.who-list { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 10px 12px; color: #6a7f8e; font-size: 10.5px; line-height: 1.6; }
.who-list a { font-weight: 700; }
.who-list a.mod { color: #b98a1f; }
.who-list a.adm { color: #d4604f; }

/* =========================================================
   REGISTRERING
   ========================================================= */
.reg-form { padding-bottom: 0; }
.reg-intro { margin: 0; padding: 12px 13px 2px; background: linear-gradient(180deg, #fffdf6, #fff 90%); color: #687887; font-size: 11.5px; line-height: 1.6; }
.reg-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reg-form .dob { display: grid; grid-template-columns: 70px 1.4fr 1fr; gap: 6px; }
.field-hint { color: #9aa7af; font-size: 10px; line-height: 1.4; }
.field-error { display: none; color: #d4604f; font-size: 10px; font-weight: 700; line-height: 1.4; }
.form-field.invalid .field-error { display: block; }
.form-field.invalid .field-hint { display: none; }
.form-field.invalid input, .form-field.invalid select { border-color: #e8a79c; background: #fff9f8; box-shadow: 0 0 0 3px #fdeae6; }
.form-field.valid input { border-color: #9fd3b6; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 62px; }
.pw-toggle { position: absolute; right: 5px; top: 5px; padding: 3px 8px; border: 1px solid #cddfe5; border-radius: 4px; background: linear-gradient(#fff, #edf5f7); color: #47788f; font-size: 10px; font-weight: 800; }
.pw-toggle:hover { border-color: #8bc7ca; }
.pw-meter { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.pw-bars { display: flex; gap: 3px; flex: 1; }
.pw-bars i { flex: 1; height: 5px; border-radius: 3px; background: #e9f0f3; transition: background .2s; }
.pw-bars.s1 i:nth-child(-n+1) { background: #e0705f; }
.pw-bars.s2 i:nth-child(-n+2) { background: #e3ae3d; }
.pw-bars.s3 i:nth-child(-n+3) { background: #7cc09a; }
.pw-bars.s4 i:nth-child(-n+4) { background: #2e9e99; }
.pw-label { min-width: 70px; text-align: right; color: #93a0aa; font-size: 10px; font-weight: 700; }
.check-row { display: flex; align-items: flex-start; gap: 8px; color: #5d7180; font-size: 11px; line-height: 1.5; }
.check-row input { width: auto; min-height: 0; margin-top: 2px; flex: 0 0 auto; accent-color: #2e9e99; }
.check-row label { color: inherit; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.reg-form .check-row.invalid + .field-error, .check-row.invalid ~ .field-error { display: block; }
.reg-success { display: none; padding: 26px 20px 24px; text-align: center; background: linear-gradient(180deg, #fffdf6, #fff 70%); }
.reg-success.show { display: block; }
.reg-success .big { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border: 3px solid #fff; border-radius: 14px 14px 14px 4px; background: linear-gradient(145deg, #53b9b0, #268f95); box-shadow: 0 3px 0 #c3d8dc; color: #fff; font: 900 28px 'Nunito'; transform: rotate(-3deg); }
.reg-success h2 { margin: 0 0 4px; font: 900 20px 'Nunito', sans-serif; color: #2e4f65; }
.reg-success p { margin: 0 auto 12px; max-width: 360px; color: #687887; font-size: 12px; line-height: 1.6; }
.perks { list-style: none; margin: 0; padding: 4px 0; }
.perks li { display: flex; gap: 9px; padding: 8px 12px; border-bottom: 1px solid #f0f3f5; color: #657888; font-size: 11px; line-height: 1.5; }
.perks li:last-child { border-bottom: 0; }
.perks li i { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: #e4f2f1; color: #2e9e99; font-style: normal; font-size: 12px; }
.perks li:nth-child(2) i { background: #fff1cc; color: #c9961f; }
.perks li:nth-child(3) i { background: #fde7e1; color: #e0705f; }
.perks li:nth-child(4) i { background: #e1eef6; color: #2c7299; }
.perks b { display: block; color: #3b5365; font: 800 12px 'Nunito', sans-serif; }


/* =========================================================
   Playarea-SIDAN (lajv.html)
   ========================================================= */
.ljv-compose { padding: 12px 13px 0; background: linear-gradient(180deg, #fffdf6, #fff 60%); }
.ljv-compose > label { display: block; margin-bottom: 4px; color: #52687a; font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.ljv-compose textarea {
  display: block; width: 100%; min-height: 64px; padding: 9px 11px; resize: vertical; outline: 0;
  border: 1px solid #dfe7eb; border-radius: 5px; background: #fbfcfd; color: var(--ink);
  font: 700 13px/1.5 'Nunito', Arial, sans-serif; transition: border-color .15s, box-shadow .15s, background .15s;
}
.ljv-compose textarea::placeholder { color: #a0abb2; font-weight: 600; }
.ljv-compose textarea:hover { border-color: #bcd3da; }
.ljv-compose textarea:focus { border-color: #8bc7ca; background: #fff; box-shadow: 0 0 0 3px #e3f5f3; }
.ljv-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 10px; }
.ljv-meta select { min-height: 30px; padding: 4px 9px; border: 1px solid #dfe7eb; border-radius: 5px; background: #fbfcfd; color: #5d7180; font: 500 11px 'DM Sans', Arial, sans-serif; outline: 0; }
.ljv-meta select:focus { border-color: #8bc7ca; box-shadow: 0 0 0 3px #e3f5f3; }
.ljv-count { color: #93a0aa; font-size: 10px; font-weight: 700; }
.ljv-count.warn { color: #e0705f; }
.ljv-preview-label { margin: 0 0 4px; color: #93a0aa; font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.ljv-preview {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 26px; padding: 4px 10px; border: 1px solid #25282a; border-radius: 3px; color: #f3f5f6; font-size: 11px;
  background: linear-gradient(to bottom, #494d50 0%, #35383b 45%, #2a2c2e 90%, #1a1b1c 100%);
}
.ljv-preview strong { color: var(--gold); }
.ljv-preview .txt { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ljv-preview .txt.empty { color: #9aa3a9; }
.ljv-send { display: flex; align-items: center; gap: 10px; padding: 10px 0 12px; }
.ljv-send .button { padding: 9px 16px; font-size: 12px; }
.ljv-send .button:disabled { filter: grayscale(.7) brightness(1.05); opacity: .7; cursor: not-allowed; transform: none; }
.ljv-send small { color: #93a0aa; font-size: 10px; line-height: 1.4; }
.ljv-send small b { color: #5d7788; }
.ljv-error { display: none; color: #d4604f; font-size: 10px; font-weight: 700; padding-bottom: 8px; }
.ljv-error.show { display: block; }

.ljv-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 150px 142px; align-items: center; gap: 10px; padding: 9px 13px; border-bottom: 1px solid #eef2f4; transition: background .15s; }
.ljv-row:last-child { border-bottom: 0; }
.ljv-row:hover { background: #fafdfd; }
.ljv-row .tiny-avatar { width: 38px; height: 38px; font-size: 16px; border: 2px solid #fff; outline: 1px solid #d9e3e8; box-shadow: 0 2px 4px #dbe5ea; }
.ljv-row.now { background: #fffcf0; box-shadow: inset 3px 0 0 var(--gold); }
.ljv-row.mine .ljv-who b:after { content: " (du)"; color: #9aa7af; font-weight: 500; }
.ljv-row.expired { opacity: .62; }
.ljv-who { font-size: 10px; color: #9aa7af; }
.ljv-who b { color: #34607a; font: 800 12px 'Nunito', sans-serif; margin-right: 4px; }
.ljv-text { margin-top: 1px; color: #4e6677; font: 700 12px/1.45 'Nunito', sans-serif; overflow-wrap: anywhere; }
.ljv-now-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 5px; padding: 0 6px; border-radius: 3px; background: #2f3336; color: var(--gold); font: 900 8px/14px 'DM Sans'; letter-spacing: .06em; vertical-align: 1px; }
.ljv-now-tag i { width: 6px; height: 6px; border-radius: 50%; background: #4dbb82; animation: lm-online 2s infinite; }
.ljv-star { color: #e3ae3d; margin-left: 3px; }
.ljv-life { font-size: 9px; color: #93a0aa; line-height: 1.4; }
.ljv-life b { display: block; margin-bottom: 3px; color: #5d7788; font-size: 10px; }
.ljv-life .poll-track { height: 6px; margin-bottom: 3px; }
.ljv-life .poll-track i { animation: none; }
.ljv-life.hot .poll-track i { background: linear-gradient(#f39a8a, #e0705f); }
.ljv-life .gone { color: #d4604f; font-weight: 800; }
.ljv-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.ljv-like { padding: 3px 9px; border: 1px solid #f0cfc9; border-radius: 10px; background: #fff; color: #d9606e; font-size: 10px; font-weight: 800; }
.ljv-like:hover { background: #fde7e1; }
.ljv-like.on { background: #fde7e1; border-color: #e8a79c; }
.ljv-actions a { font-size: 10px; font-weight: 700; }
.ljv-actions .rep { color: #aab4ba; }
.ljv-actions .rep:hover { color: #d4604f; }
.ljv-empty { padding: 24px 14px; text-align: center; color: #93a0aa; font-size: 12px; }
.ljv-top { list-style: none; margin: 0; padding: 0; counter-reset: top; }
.ljv-top li { counter-increment: top; display: flex; align-items: flex-start; gap: 9px; padding: 8px 12px; border-bottom: 1px solid #f0f3f5; font-size: 11px; line-height: 1.45; color: #657888; }
.ljv-top li:last-child { border-bottom: 0; }
.ljv-top li:before { content: counter(top); flex: 0 0 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #fff1cc; color: #b98a1f; font: 900 11px 'Nunito'; }
.ljv-top b { color: #2e6685; }
.ljv-top small { display: block; color: #d9606e; font-weight: 800; font-size: 9px; }



/* Playarea: kontomenyn i headern. Klistra bara in om reglerna saknas i style.css. */
.user-account { position: relative; z-index: 40; display: block; padding: 0; min-width: 190px; overflow: visible; }
.account-trigger { display: flex; align-items: center; width: 100%; gap: 10px; padding: 7px 10px; border: 0; background: transparent; text-align: left; color: var(--ink); cursor: pointer; }
.account-trigger:hover, .account-open .account-trigger { background: #f3f8fa; }
.account-trigger:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.account-trigger .mini-avatar { overflow: hidden; }
.account-trigger .mini-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.account-identity { min-width: 0; flex: 1; }
.account-identity b { display: block; font-size: 12px; line-height: 1.3; }
.account-identity small { display: flex; align-items: center; gap: 5px; color: #71818d; font-size: 10px; }
.account-online-dot { width: 7px; height: 7px; background: #4dbb82; border-radius: 50%; box-shadow: 0 0 0 2px #d7f1e2; }
.account-chevron { color: #678292; font-size: 17px; transition: transform .15s; }
.account-open .account-chevron { transform: rotate(180deg); }
.account-dropdown { position: absolute; top: calc(100% + 6px); right: 0; width: 220px; padding: 6px; border: 1px solid #d5e0e6; border-radius: 7px; background: #fff; box-shadow: 0 10px 25px rgba(35,64,82,.17); }
.account-dropdown[hidden], .account-dropdown a[hidden] { display: none !important; }
.account-dropdown-heading { padding: 7px 9px 8px; color: #8795a0; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.account-dropdown a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 4px; color: #49687a; font-size: 11px; font-weight: 700; }
.account-dropdown a:hover, .account-dropdown a:focus-visible { background: #e9f3f8; color: #205b7e; outline: none; }
.account-icon { display: inline-grid; place-items: center; width: 19px; color: #2c7299; font-size: 15px; font-weight: 800; }
.account-divider { height: 1px; margin: 6px 4px; background: #e3e9ed; }
.account-dropdown .account-logout { color: #cf5a4b; }
.account-dropdown .account-logout .account-icon { color: #cf5a4b; }
.account-dropdown .account-logout:hover { background: #fff0ed; color: #b64a3d; }



/* Knappen Logga ut har samma utseende som originalets länk. */
.account-dropdown .account-logout-form { margin: 0; padding: 0; }
.account-dropdown .account-logout-form .account-logout {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 4px;
  background: transparent; text-align: left; cursor: pointer;
  color: #cf5a4b; font: inherit; font-size: 11px; font-weight: 700;
}
.account-dropdown .account-logout-form .account-logout:hover,
.account-dropdown .account-logout-form .account-logout:focus-visible {
  background: #fff0ed; color: #b64a3d; outline: none;
}


/* Playarea – Profilbildsväljare vid registrering */

.lajv-avatar-picker {
    margin: 20px 0;
}

.lajv-avatar-help {
    margin: 6px 0 14px;
    color: #7b8795;
    font-size: 12px;
}

.lajv-avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, 80px);
    column-gap: 70px;
    row-gap: 10px;
}

.lajv-avatar-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 10px 6px;
    background: #f7fafb;
    border: 2px solid #dce4e9;
    border-radius: 7px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}


.lajv-avatar-option {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.lajv-avatar-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.lajv-avatar-option img {
    display: block;
	width: 80px;
	height: 80px;
    aspect-ratio: 1;
    height: auto;
    object-fit: cover;
    border: 3px solid transparent;
    border-radius: 4px;
    box-sizing: border-box;
}

.lajv-avatar-option:has(input:checked) {
    background: transparent;
    border: 0;
}

.lajv-avatar-option:has(input:checked) img {
    border-color: #2e9e99;
}

.lajv-avatar-option:has(input:focus-visible) {
    outline: 2px solid #2c7299;
    outline-offset: 3px;
}

.lajv-avatar-option:hover {
    border: 0;
}

.lajv-avatar-option span {
    font-size: 11px;
    font-weight: 700;
    color: #526575;
}
@scope (body.page-profile) {
  .lajv-profile-edit { padding: 22px; }
  .lajv-profile-edit label { display:block; margin: 0 0 6px; color:#52687a; font-size:11px; font-weight:900; }
  .lajv-profile-edit label:not(:first-child) { margin-top:18px; }
  .lajv-profile-help { margin:0 0 8px; color:#93a0aa; font-size:11px; }
  .lajv-profile-edit input, .lajv-profile-edit textarea { display:block; width:100%; padding:10px 11px; border:1px solid #dfe7eb; border-radius:5px; background:#fbfcfd; color:var(--ink); font:600 12.5px/1.5 'Nunito',sans-serif; outline:0; }
  .lajv-profile-edit input:focus, .lajv-profile-edit textarea:focus { border-color:#8bc7ca; background:#fff; box-shadow:0 0 0 3px #e3f5f3; }
  .lajv-profile-edit-actions { display:flex; gap:10px; align-items:center; margin-top:20px; }
  .lajv-profile-edit-actions .button { font-family:inherit; }
  .lajv-profile-errors { padding:12px; margin-bottom:18px; border:1px solid #f1c4c4; border-radius:5px; background:#fff6f6; color:#a34c4c; }
  .lajv-profile-errors ul { margin:6px 0 0; padding-left:20px; }
  .lajv-profile-saved { margin-bottom:14px; padding:11px 15px; border:1px solid #b9dfd6; border-radius:5px; background:#eaf8f3; color:#247b69; font-weight:800; }
}

/* Playarea – Krypinverkstaden. Klistra in EN gång längst ner i style.css */
body.page-profile .lajv-custom-krypin { background-color: var(--k-page); color: var(--k-text); font-family: var(--k-font); border-radius: var(--k-radius); padding: 12px; }
body.page-profile .lajv-custom-krypin.pattern-dots { background-image: radial-gradient(#8b9ba53b 1px, transparent 1px); background-size: 16px 16px; }
body.page-profile .lajv-custom-krypin.pattern-stripes { background-image: repeating-linear-gradient(135deg, #8094a516 0 3px, transparent 3px 12px); }
body.page-profile .lajv-custom-krypin.pattern-grid { background-image: linear-gradient(#8094a526 1px, transparent 1px),linear-gradient(90deg,#8094a526 1px,transparent 1px); background-size: 20px 20px; }
body.page-profile .lajv-custom-krypin .panel, body.page-profile .lajv-custom-krypin .profile-text, body.page-profile .lajv-custom-krypin .profile-actions, body.page-profile .lajv-custom-krypin .profile-quickstats { background: var(--k-panel); border-radius: var(--k-radius); }
body.page-profile .lajv-custom-krypin .profile-cover, body.page-profile .krypin-preview-cover { background: linear-gradient(115deg, var(--k-cover-start), var(--k-cover-end)); border-radius: var(--k-radius) var(--k-radius) 0 0; }
body.page-profile .lajv-custom-krypin .profile-name, body.page-profile .lajv-custom-krypin .profile-text, body.page-profile .lajv-custom-krypin .profile-text p, body.page-profile .lajv-custom-krypin .profile-facts dd, body.page-profile .lajv-custom-krypin .profile-meta { color: var(--k-text); font-family: var(--k-font); }
body.page-profile .lajv-custom-krypin .block-title h2, body.page-profile .lajv-custom-krypin .profile-signature, body.page-profile .lajv-custom-krypin .profile-quickstats b, body.page-profile .lajv-custom-krypin .profile-tabs a, body.page-profile .lajv-custom-krypin .panel-foot a { color: var(--k-accent); }
body.page-profile .krypin-workshop .block-title { margin-bottom: 0; }
body.page-profile .krypin-workshop-inner { padding: 18px 22px 24px; }
body.page-profile .krypin-workshop-inner > p { margin: 0 0 18px; }
body.page-profile .krypin-workshop-inner h3 { font-size: 14px; color: #286c91; border-bottom: 1px solid #dce4e9; padding-bottom: 7px; margin: 20px 0 12px; }
body.page-profile .krypin-color-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
body.page-profile .krypin-color-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #dce4e9; background: #fbfcfd; border-radius: 5px; padding: 9px 12px; font-size: 12px; font-weight: 700; }
body.page-profile .krypin-color-field input { width: 48px; height: 34px; padding: 2px; border: 1px solid #cddce2; background: #fff; cursor: pointer; }
body.page-profile .krypin-options { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
body.page-profile .krypin-options label { display: grid; gap: 7px; font-size: 12px; font-weight: 700; }
body.page-profile .krypin-options select { width: 100%; padding: 8px; border: 1px solid #d5e0e6; background: white; border-radius: 4px; }
body.page-profile .krypin-preview { min-height: 205px; border: 1px solid #d5e0e6; }
body.page-profile .krypin-preview-cover { padding: 20px; font-size: 14px; font-weight: 900; color: var(--k-text); }
body.page-profile .krypin-preview-panel { background: var(--k-panel); color: var(--k-text); margin: 12px; padding: 18px; border-radius: var(--k-radius); font-family: var(--k-font); }
body.page-profile .krypin-preview-panel strong { color: var(--k-accent); font-size: 16px; }
body.page-profile .krypin-preview-panel p { margin: 10px 0; }
body.page-profile .krypin-preview-panel a { color: var(--k-accent); text-decoration: underline; }
body.page-profile .krypin-side-note { padding: 15px; font-size: 12px; line-height: 1.6; }
body.page-profile .krypin-workshop .lajv-profile-edit-actions { margin-top: 20px; display: flex; gap: 10px; }

/* =========================================================
   Playarea – BBCode (samlad och rensad, endast profilredigering)
   ========================================================= */
body.page-profile .lajv-profile-edit .lajv-bb-toolbar,
body.page-profile .lajv-profile-edit .lajv-bb-smileys {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 5px;
    margin: 10px 0; padding: 9px; background: #f0f6f8;
    border: 1px solid #dce4e9; border-radius: 6px;
}
body.page-profile .lajv-profile-edit .lajv-bb-toolbar {
    overflow-x: auto; overflow-y: hidden;
}
body.page-profile .lajv-profile-edit .lajv-bb-toolbar > button,
body.page-profile .lajv-profile-edit .lajv-bb-toolbar > .lajv-bb-tool-picker {
    position: relative; display: inline-flex; flex: 0 0 auto;
    box-sizing: border-box; align-items: center; justify-content: center;
    height: 34px; min-height: 34px; margin: 0; padding: 0 9px;
    border: 1px solid #cadce4; border-radius: 4px;
    background: #fff; color: #286c91; font: inherit;
    line-height: 1; white-space: nowrap; cursor: pointer;
}
body.page-profile .lajv-profile-edit .lajv-bb-toolbar > button:hover,
body.page-profile .lajv-profile-edit .lajv-bb-toolbar > .lajv-bb-tool-picker:hover,
body.page-profile .lajv-profile-edit .lajv-bb-smileys button:hover {
    background: #d9f0ed;
}
/* Färg och storlek är klickbara verktyg, inte synliga extrafält. */
body.page-profile .lajv-profile-edit .lajv-bb-tool-picker input[type="color"],
body.page-profile .lajv-profile-edit .lajv-bb-tool-picker select {
    position: absolute; inset: 0; display: block;
    width: 100%; height: 100%; margin: 0; padding: 0;
    border: 0; opacity: 0; cursor: pointer; z-index: 1;
}
body.page-profile .lajv-profile-edit .lajv-bb-tool-picker:focus-within {
    outline: 2px solid #286c91; outline-offset: 2px;
}
body.page-profile .lajv-profile-edit .lajv-bb-smileys { flex-wrap: wrap; }
body.page-profile .lajv-profile-edit .lajv-bb-smileys button {
    flex: 0 0 auto; padding: 5px 9px; border: 1px solid #cadce4;
    border-radius: 4px; background: #fff; font-size: 20px; line-height: 1;
    cursor: pointer;
}
/* Textrutan får aldrig ärva verktygsknapparnas layout. */
body.page-profile .lajv-profile-edit #profile-bio {
    display: block; box-sizing: border-box; width: 100%; min-width: 0;
    height: auto; min-height: 190px; resize: vertical;
    padding: 10px 11px; margin: 0;
    border: 1px solid #dfe7eb; border-radius: 5px;
    background: #fbfcfd; color: var(--ink);
    font: 600 12.5px/1.5 'Nunito', sans-serif;
    white-space: pre-wrap; overflow-wrap: break-word;
}
body.page-profile .lajv-bb-counter {
    text-align: right; font-size: 12px; color: #7b8795;
    margin: 5px 0 14px; font-variant-numeric: tabular-nums;
}
body.page-profile .lajv-bb-counter.near-limit { color: #b45309; font-weight: 700; }
/* Dialogen ligger utanför huvudformuläret (inga nästlade form-taggar). */
body.page-profile .lajv-bb-link-dialog {
    width: min(420px, calc(100vw - 40px)); max-width: 420px;
    border: 1px solid #cbdce3; border-radius: 8px; padding: 0;
    color: #344957; background: #fff;
    box-shadow: 0 18px 55px rgba(20, 43, 60, .26);
}
body.page-profile .lajv-bb-link-dialog::backdrop { background: rgba(20, 34, 45, .55); }
body.page-profile .lajv-bb-dialog-heading {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 17px; background: linear-gradient(90deg,#3b91b2,#286c91); color: white;
}
body.page-profile .lajv-bb-dialog-heading button { border: 0; background: transparent; color: white; font-size: 24px; cursor: pointer; }
body.page-profile .lajv-bb-dialog-body { padding: 18px; display: flex; flex-direction: column; gap: 7px; }
body.page-profile .lajv-bb-dialog-body label { font-weight: 700; margin-top: 5px; }
body.page-profile .lajv-bb-dialog-body input { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid #cbdce3; border-radius: 4px; font: inherit; }
body.page-profile .lajv-bb-link-error { margin: 5px 0 0; color: #b42318; font-size: 13px; }
body.page-profile .lajv-bb-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 18px 18px; }
body.page-profile .lajv-bb-dialog-actions button { border: 1px solid #cbdce3; background: #f2f6f8; border-radius: 4px; padding: 9px 14px; cursor: pointer; }
body.page-profile .lajv-bb-dialog-actions button[type="submit"] { background: #2e9e99; color: white; border-color: #2e9e99; font-weight: 700; }
/* Playarea – diskret ägarrad direkt under profilhuvudet */
.lajv-krypin-ownerbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 35px;
    margin-top: -12px;
    padding: 6px 12px;
    background: #f7fafb;
    border: 1px solid #d9e2e7;
    border-radius: 5px;
    color: #71818d;
    font-size: 11px;
}
.lajv-krypin-ownerbar-label { font-weight: 800; color: #52687a; }
.lajv-krypin-ownerbar-links { display: flex; align-items: center; gap: 15px; }
.lajv-krypin-ownerbar-links a { color: #2c7299; font-weight: 800; white-space: nowrap; }
.lajv-krypin-ownerbar-links a:hover { color: #ed7969; }

/* Playarea – kontextuella redigeringslänkar (kombination med ägarraden) */
.profile-cover { position: relative; }
.lajv-krypin-cover-edit {
    position: absolute; right: 12px; bottom: 10px; z-index: 2;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 9px; border: 1px solid rgba(44,114,153,.22);
    border-radius: 4px; background: rgba(255,255,255,.94);
    color: #2c7299; font-size: 11px; font-weight: 800;
    text-decoration: none; box-shadow: 0 1px 3px rgba(35,64,82,.09);
}
.lajv-krypin-cover-edit:hover { background: #fff; color: #ed7969; }
.lajv-krypin-presentation-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lajv-krypin-presentation-title h2 { min-width: 0; }
.lajv-krypin-section-edit {
    flex-shrink: 0; padding: 4px 8px; border: 1px solid #d9e2e7;
    border-radius: 4px; background: #fff; color: #2c7299;
    font-size: 11px; font-weight: 800; text-decoration: none;
}
.lajv-krypin-section-edit:hover { color: #ed7969; border-color: #ed7969; }

/* Playarea – Gästbok med egen sida. Lägg efter befintliga gästboksregler. */
body.page-profile .lajv-gb-back { margin: 0 0 12px; font-size: 12px; }
body.page-profile .lajv-gb-back a { color: var(--k-accent,#2c7299); text-decoration: none; font-weight: 800; }
body.page-profile .lajv-gb-hero { display:flex; align-items:center; gap:20px; padding:24px; background:linear-gradient(115deg,var(--k-cover-start,#d9f0ed),var(--k-cover-end,#f8e9c5)); border:1px solid #c8e2e0; }
body.page-profile .lajv-gb-hero-icon { flex:none; display:grid; place-items:center; width:78px; height:78px; background:rgba(255,255,255,.6); border:2px dashed rgba(44,114,153,.3); border-radius:16px; color:var(--k-accent,#2c7299); font-size:44px; transform:rotate(-6deg); }
body.page-profile .lajv-gb-eyebrow { display:block; font-size:10px; font-weight:900; letter-spacing:1.4px; color:#54747b; margin-bottom:5px; }
body.page-profile .lajv-gb-hero h1 { font-size:25px; line-height:1.2; margin:0 0 7px; color:var(--k-text,#29384b); }
body.page-profile .lajv-gb-hero p { margin:0; font-size:13px; }
body.page-profile .lajv-gb-owner { display:flex; align-items:center; gap:12px; padding:12px 15px; margin:13px 0; }
body.page-profile .lajv-gb-owner img { width:46px; height:46px; object-fit:cover; border-radius:5px; }
body.page-profile .lajv-gb-owner div { display:flex; flex-direction:column; flex:1; gap:2px; }
body.page-profile .lajv-gb-owner strong { font-size:14px; }
body.page-profile .lajv-gb-owner span { font-size:11px; color:#7b8795; }
body.page-profile .lajv-gb-owner>a { font-size:12px; color:var(--k-accent,#2c7299); font-weight:800; }
body.page-profile .lajv-gb-write { margin-bottom:14px; }
body.page-profile .lajv-gb-write .guest-form { padding:16px; }
body.page-profile .lajv-gb-write .guest-form textarea { width:100%; min-height:105px; box-sizing:border-box; }
body.page-profile .lajv-gb-entries .panel-heading { display:flex; justify-content:space-between; align-items:center; }
body.page-profile .lajv-gb-entry { padding:17px; display:flex; gap:12px; border-bottom:1px solid var(--line,#dce4e9); }
body.page-profile .lajv-gb-entry .guestbook-avatar { width:45px; height:45px; }
body.page-profile .lajv-gb-entry .guestbook-entry-body { flex:1; }
body.page-profile .lajv-gb-entry .guestbook-entry-body p { margin:8px 0; line-height:1.6; }
body.page-profile .lajv-gb-empty { text-align:center; padding:38px 24px 43px; background:radial-gradient(ellipse at 50% 20%,rgba(217,240,237,.45),transparent 65%); }
body.page-profile .lajv-gb-empty-art { width:110px; height:93px; position:relative; margin:0 auto 12px; }
body.page-profile .lajv-gb-letter { display:block; font-size:75px; line-height:90px; color:var(--k-accent,#2c7299); transform:rotate(-9deg); text-shadow:2px 3px 0 #cce3e5; }
body.page-profile .lajv-gb-sparkle { position:absolute; top:0; right:0; color:#e9b94d; font-size:31px; }
body.page-profile .lajv-gb-empty h2 { font-size:18px; margin:0 0 8px; }
body.page-profile .lajv-gb-empty p { color:#7b8795; line-height:1.7; font-size:12px; margin:0 auto 18px; }
body.page-profile .lajv-gb-login { padding:17px; font-size:13px; }
body.page-profile .lajv-gb-aside { padding:14px; font-size:12px; line-height:1.6; }
body.page-profile .lajv-gb-aside p { margin:0 0 12px; }
body.page-profile .lajv-guestbook-preview .guest-entry { padding:13px 15px; border-bottom:1px solid var(--line,#dce4e9); display:flex; gap:12px; }
body.page-profile .lajv-guestbook-preview-empty { padding:21px; display:flex; align-items:center; gap:15px; }
body.page-profile .lajv-guestbook-preview-empty>span { font-size:35px; color:var(--k-accent,#2c7299); }
body.page-profile .lajv-guestbook-preview-empty strong { font-size:13px; }
body.page-profile .lajv-guestbook-preview-empty p { font-size:12px; color:#7b8795; margin:4px 0 0; }
body.page-profile .lajv-guestbook-preview-footer { padding:12px 15px; border-top:1px solid var(--line,#dce4e9); text-align:right; }


/* Playarea: gemensamma sidhuvuden för undersidor (inställningar + krypinverkstad) */
.lajv-page-banner { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; gap:17px; min-height:117px; margin-bottom:14px; padding:19px 24px; border:1px solid #c9dfe6; border-radius:7px; box-shadow:0 2px 0 rgba(35,64,82,.05); background:linear-gradient(115deg,#e4f2f7 0%,#edf8f6 60%,#fff5dc 100%); color:#344957; }
.lajv-page-banner::before { content:""; position:absolute; right:-48px; top:-95px; width:255px; height:255px; border:35px solid rgba(46,158,153,.065); border-radius:50%; z-index:-1; }
.lajv-page-banner__symbol { display:grid; place-items:center; flex:0 0 65px; width:65px; height:65px; background:linear-gradient(145deg,#3b91b2,#286c91); color:white; border:3px solid #fff; border-radius:14px; box-shadow:0 3px 10px rgba(44,114,153,.2); font-size:32px; font-family:'Nunito',sans-serif; font-weight:900; }
.lajv-page-banner__content { position:relative; z-index:1; min-width:0; }
.lajv-page-banner__eyebrow { display:block; margin-bottom:3px; font:800 10px 'Nunito',sans-serif; letter-spacing:1.5px; color:#408b9c; }
.lajv-page-banner__eyebrow span { color:#e9b94d; padding:0 3px; }
.lajv-page-banner h1 { margin:0 0 3px; font:900 26px/1.2 'Nunito',sans-serif; letter-spacing:-.6px; color:#2c607e; }
.lajv-page-banner__dot { color:#ef6684; }
.lajv-page-banner p { margin:0; font:500 12px/1.5 'DM Sans',sans-serif; color:#627c88; }
.lajv-page-banner__ornaments { margin-left:auto; align-self:stretch; display:flex; align-items:center; gap:9px; color:#e9b94d; font-size:19px; opacity:.8; }
.lajv-page-banner__ornaments span:nth-child(2) { color:#ef6684; font-size:11px; }
.lajv-page-banner__ornaments span:nth-child(3) { color:#2e9e99; font-size:28px; }
.lajv-page-banner--workshop { background:linear-gradient(115deg,#fff0e8 0%,#fff8e6 55%,#e6f4f2 100%); border-color:#eedbd0; }
.lajv-page-banner--workshop::before { border-color:rgba(239,102,132,.065); }
.lajv-page-banner--workshop .lajv-page-banner__symbol { background:linear-gradient(145deg,#ef8b80,#ef6684); box-shadow:0 3px 10px rgba(239,102,132,.18); }
.lajv-page-banner--workshop .lajv-page-banner__eyebrow { color:#bd7778; }
.lajv-page-banner--workshop h1 { color:#805c68; }
.lajv-page-banner__swatches { gap:5px; transform:rotate(-12deg); }
.lajv-page-banner__swatches span { display:block; width:19px; height:38px; border:3px solid white; border-radius:8px; box-shadow:0 2px 5px rgba(50,70,80,.12); background:#ef6684; }
.lajv-page-banner__swatches span:nth-child(2) { background:#e9b94d; font-size:inherit; }
.lajv-page-banner__swatches span:nth-child(3) { background:#2e9e99; font-size:inherit; }
.lajv-page-banner__swatches span:nth-child(4) { background:#3b91b2; }


/* ===== Playarea: profilens egna regler, flyttade från profil.blade.php ===== */
/* Playarea profile — page-specific styles. Load AFTER existing style.css. */
.page-profile { --pf-ink:#344957; --pf-blue:#2c7299; --pf-teal:#2e9e99; --pf-gold:#e9b94d; --pf-coral:#ed7969; --pf-line:#dce4e9; }
.page-profile .profile-grid { display:grid; grid-template-columns:minmax(0,1fr) 292px; gap:18px; align-items:start; }
.page-profile .home-main,.page-profile .home-side { min-width:0; }
.page-profile .home-main > section { margin-bottom:20px; }
.page-profile .home-side > section { margin-bottom:14px; }
.page-profile .pf-hero { overflow:hidden; padding:0; }
.page-profile .pf-cover { height:125px; position:relative; overflow:hidden; background:linear-gradient(115deg,#d9f0ed 0%,#e6f3f2 55%,#f8e9c5 100%); border-bottom:1px solid #d1e3e1; }
.page-profile .pf-cover:before,.page-profile .pf-cover:after { content:""; position:absolute; width:440px; height:170px; border-radius:50%; bottom:-132px; background:#a8d2c3; }
.page-profile .pf-cover:before { left:-90px; transform:rotate(-6deg); }
.page-profile .pf-cover:after { right:-130px; bottom:-142px; background:#86bcb4; transform:rotate(9deg); }
.page-profile .pf-cover-label { position:absolute; left:20px; top:17px; z-index:1; font-size:10px; font-weight:900; letter-spacing:.1em; color:#438c91; }
.page-profile .pf-cover-star { position:absolute; z-index:1; color:#e9b94d; }
.page-profile .pf-cover-star.s1 { right:130px; top:22px; font-size:26px; }
.page-profile .pf-cover-star.s2 { right:73px; top:52px; font-size:18px; }
.page-profile .pf-cover-star.s3 { right:220px; top:64px; font-size:13px; }
.page-profile .pf-cover-edit { position:absolute; z-index:2; right:13px; bottom:12px; font-size:10px; }
.page-profile .pf-id { display:flex; gap:16px; align-items:center; padding:0 16px 17px; min-height:115px; }
.page-profile .pf-polaroid { position:relative; flex:0 0 104px; width:104px; padding:6px 6px 18px; margin:-36px 0 0; background:white; border:1px solid #d7e1e7; box-shadow:0 3px 9px #34495726; transform:rotate(-3deg); z-index:2; text-align:center; }
.page-profile .pf-polaroid img { display:block; width:90px; height:90px; object-fit:cover; }
.page-profile .pf-polaroid figcaption { font-size:10px; font-weight:900; padding-top:5px; color:#5e7584; }
.page-profile .pf-tape { position:absolute; width:40px; height:14px; left:50%; top:-8px; transform:translateX(-50%) rotate(5deg); background:#f3db9cbf; z-index:2; }
.page-profile .pf-id-main { flex:1; min-width:0; }
.page-profile .pf-name { font:900 24px/1.2 'Nunito',Arial,sans-serif; color:#2d526c; margin:0 0 7px; }
.page-profile .pf-online { font:800 10px Arial,sans-serif; color:#3caa77; vertical-align:middle; }
.page-profile .pf-role { background:#fce7e4; color:#d36458; font:900 9px Arial,sans-serif; padding:3px 5px; border-radius:3px; vertical-align:middle; }
.page-profile .pf-meta { margin:0 0 8px; font-size:11px; color:#81929d; }
.page-profile .pf-mood { font-size:11px; color:#698493; }
.page-profile .pf-mood strong { color:#3c849d; }
.page-profile .pf-id-actions { display:flex; flex-direction:column; gap:7px; flex:0 0 145px; }
.page-profile .pf-id-actions > a { text-align:center; }
.page-profile .pf-jump { display:flex; flex-wrap:wrap; gap:0; border-top:1px solid #e5edf0; background:#f6f9fb; padding:0 9px; }
.page-profile .pf-jump a { padding:12px 9px; color:#5d8196; text-decoration:none; font-size:10px; font-weight:800; }
.page-profile .pf-jump a:hover { background:#e5f2f5; color:#286c91; }
.page-profile .pf-friend-wrap { display:flex; flex-direction:column; gap:5px; }
.page-profile .pf-friend { border:1px solid #278b87; background:linear-gradient(#45b8b0,#278f8c); color:white; padding:10px 7px; border-radius:5px; font-weight:900; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; font-size:11px; }
.page-profile .pf-friend:hover { filter:brightness(1.05); }
.page-profile .pf-friend[data-state="sent"] { background:#f5f9fb; color:#4c8199; border-color:#c9dce5; }
.page-profile .pf-friend[data-state="incoming"] { background:#ed7969; border-color:#d76d60; }
.page-profile .pf-friend[data-state="friends"] { background:#e6f4eb; color:#32835a; border-color:#b5dfc7; }
.page-profile .pf-t-hover { display:none; }
.page-profile .pf-friend:hover .pf-t-hover:not(:empty) { display:inline; }
.page-profile .pf-friend:hover .pf-t-hover:not(:empty) + * { display:none; }
.page-profile .pf-deny { border:0; background:transparent; font-size:10px; color:#c25c5c; cursor:pointer; }
.page-profile [data-view="own"] .pf-only-visitor,.page-profile [data-view="visitor"] .pf-only-own { display:none !important; }
.page-profile .pf-note { position:relative; background:#fffdf5; border:1px solid #e8e1ca; border-left:4px solid #e9b94d; border-radius:4px; padding:19px 21px 14px; box-shadow:0 2px 5px #3449570c; }
.page-profile .pf-note p { color:#5c6e7a; font-size:12px; line-height:1.85; margin:0 0 11px; }
.page-profile .pf-note p.pf-lead { font-weight:800; color:#45677b; }
.page-profile .pf-signature { font:italic 800 13px 'Nunito',Arial,sans-serif; color:#d4a63d; text-align:right; }
.page-profile .pf-pres-form label { display:block; margin-bottom:8px; font-weight:800; color:#45677b; font-size:11px; }
.page-profile .pf-pres-form textarea { box-sizing:border-box; width:100%; border:1px solid #cddde4; border-radius:5px; padding:10px; font:12px/1.6 Arial,sans-serif; resize:vertical; }
.page-profile .pf-pres-foot { display:flex; align-items:center; justify-content:space-between; margin-top:9px; }
.page-profile .pf-pres-foot small { color:#8796a0; }
.page-profile .pf-sticker { color:#bc8c27; background:#fff3d1; border:1px dashed #e8c979; font-size:9px; font-weight:900; padding:4px 7px; transform:rotate(3deg); }
.page-profile .pf-oi { padding:0; overflow:visible; }
.page-profile .pf-oi-grid { display:grid; grid-template-columns:1fr 1fr; }
.page-profile .pf-oi-row { display:flex; align-items:flex-start; gap:10px; padding:13px; border-bottom:1px solid #edf1f3; min-width:0; }
.page-profile .pf-oi-row:nth-child(odd) { border-right:1px solid #edf1f3; }
.page-profile .pf-oi-ico { flex:0 0 31px; width:31px; height:31px; display:grid; place-items:center; background:#eaf3f7; border-radius:6px; font-size:16px; }
.page-profile .pf-oi-row.tone1 .pf-oi-ico { background:#fff0d0; }
.page-profile .pf-oi-row.tone2 .pf-oi-ico { background:#e7f5ed; }
.page-profile .pf-oi-row.tone3 .pf-oi-ico { background:#fde9ec; }
.page-profile .pf-oi-body { min-width:0; flex:1; }
.page-profile .pf-oi-label { display:block; font-size:10px; font-weight:900; color:#7892a0; margin-bottom:5px; }
.page-profile .pf-oi-val { display:flex; flex-wrap:wrap; gap:0 5px; }
.page-profile .pf-chip { display:inline; font-size:12px; font-weight:800; color:#45687d; background:transparent; padding:0; border-radius:0; }
.page-profile .pf-chip + .pf-chip::before { content:" · "; color:#a1aeb8; font-weight:500; }
.page-profile .pf-oi-single { font-size:12px; font-weight:800; color:#45687d; }
.page-profile .pf-oi-none { color:#b2bdc5; font-size:11px; font-style:italic; }
.page-profile .pf-oi-empty { padding:25px; text-align:center; color:#7d94a1; font-size:12px; }
.page-profile .pf-board { display:flex; gap:14px; padding:17px; background:#f7fafb; border:1px solid #e1e9ee; }
.page-profile .pf-polaroid-s { position:relative; flex:1; min-width:0; margin:0; padding:6px 6px 13px; background:#fff; border:1px solid #dce4e8; box-shadow:0 2px 6px #34495720; text-align:center; }
.page-profile .pf-polaroid-s.r0 { transform:rotate(-3deg); }
.page-profile .pf-polaroid-s.r1 { transform:rotate(2deg); }
.page-profile .pf-polaroid-s.r2 { transform:rotate(-2deg); }
.page-profile .pf-polaroid-s img { display:block; width:100%; height:125px; object-fit:cover; }
.page-profile .pf-polaroid-s figcaption { margin-top:7px; font:800 10px 'Nunito',Arial,sans-serif; color:#637d8c; }
.page-profile .pf-guest { padding:0; }
.page-profile .pf-gform { padding:15px; border-bottom:1px solid #e7edf0; background:#fbfdfe; }
.page-profile .pf-gform label { display:block; font-size:11px; font-weight:900; color:#537184; margin-bottom:7px; }
.page-profile .pf-gform textarea { box-sizing:border-box; width:100%; padding:10px; border:1px solid #d0e0e7; border-radius:5px; font:12px Arial,sans-serif; resize:vertical; }
.page-profile .pf-gform-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:7px; }
.page-profile .pf-gform-foot small { font-size:9px; color:#94a4ae; }
.page-profile .pf-gentry { display:flex; align-items:flex-start; gap:10px; padding:13px 15px; border-bottom:1px solid #edf1f3; }
.page-profile .pf-gentry .tiny-avatar { flex:0 0 30px; }
.page-profile .pf-bubble { flex:1; min-width:0; }
.page-profile .pf-bubble-head { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.page-profile .pf-bubble-head b { font-size:11px; color:#3d7897; }
.page-profile .pf-bubble-head time { font-size:9px; color:#a3afb6; margin-left:auto; }
.page-profile .pf-bubble p { margin:0; color:#627c8a; font-size:11px; line-height:1.6; }
.page-profile .pf-del { background:none; border:0; color:#bd8b8b; cursor:pointer; }
.page-profile .pf-facts { margin:0; padding:5px 12px; }
.page-profile .pf-facts > div { display:flex; gap:10px; justify-content:space-between; padding:8px 0; border-bottom:1px dashed #e3ebef; font-size:10.5px; }
.page-profile .pf-facts > div:last-child { border:0; }
.page-profile .pf-facts dt { color:#91a2ad; }
.page-profile .pf-facts dd { margin:0; color:#536e7f; font-weight:800; text-align:right; }
.page-profile .pf-friends { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 5px; padding:13px; }
.page-profile .pf-friends a { display:flex; flex-direction:column; align-items:center; gap:5px; color:#5a8196; text-decoration:none; font-size:10px; font-weight:800; }
.page-profile .pf-friends a em { font-style:normal; }
.page-profile .pf-counter-wrap { text-align:center; padding:13px; }
.page-profile .pf-counter { display:flex; justify-content:center; gap:3px; }
.page-profile .pf-counter i { display:grid; place-items:center; width:28px; height:37px; background:linear-gradient(#3f657b,#253d4f); color:white; border-radius:3px; font:900 22px 'Nunito',Arial,sans-serif; font-style:normal; box-shadow:inset 0 1px 0 #ffffff30; }
.page-profile .pf-counter-wrap small { display:block; margin-top:7px; color:#9caab3; font-size:10px; }
.page-profile .pf-stats { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #e7edf0; }
.page-profile .pf-stats > div { text-align:center; padding:10px 4px; border-right:1px solid #e7edf0; border-bottom:1px solid #e7edf0; }
.page-profile .pf-stats b { display:block; color:#367e9c; font-size:17px; }
.page-profile .pf-stats small { color:#91a2ac; font-size:9px; }
.page-profile .pf-visitors { margin:0; padding:8px 12px; list-style:none; }
.page-profile .pf-visitors li { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:11px; }
.page-profile .pf-visitors li a { color:#4c8199; font-weight:800; }
.page-profile .pf-visitors time { margin-left:auto; color:#a4b1b9; font-size:9px; }
.page-profile .pf-clubs { padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
.page-profile .pf-clubs a { color:#4c8199; font-size:11px; text-decoration:none; font-weight:700; }
.page-profile .pf-clubs a:hover { text-decoration:underline; }
.page-profile .pf-demo { position:fixed; right:14px; bottom:14px; z-index:100; width:240px; border:1px solid #cddfe7; border-radius:7px; box-shadow:0 5px 25px #243b4c38; background:white; font:11px Arial,sans-serif; }
.page-profile .pf-demo-head { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:linear-gradient(#3b91b2,#286c91); color:white; border-radius:6px 6px 0 0; letter-spacing:.1em; }
.page-profile .pf-demo-head button { background:transparent; border:0; color:white; font-size:18px; cursor:pointer; }
.page-profile .pf-demo-body { padding:12px; }
.page-profile .pf-demo-label { display:block; margin:5px 0 7px; font-weight:800; color:#6d8492; }
.page-profile .pf-demo-seg { display:flex; margin-bottom:12px; }
.page-profile .pf-demo-seg button { flex:1; border:1px solid #cddfe7; padding:7px 5px; background:#f4f8fa; color:#648093; cursor:pointer; font-size:10px; }
.page-profile .pf-demo-seg button.on { background:#2e9e99; color:white; border-color:#2e9e99; }
.page-profile .pf-demo select { width:100%; padding:7px; margin-bottom:8px; border:1px solid #cddfe7; }
.page-profile .pf-demo small { color:#91a3ae; line-height:1.5; }
.page-profile .pf-demo.collapsed .pf-demo-body { display:none; }
.page-profile .lm-toast { position:fixed; z-index:110; bottom:20px; left:50%; transform:translate(-50%,15px); background:#2e617d; color:white; padding:10px 18px; border-radius:5px; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; font-size:12px; }
.page-profile .lm-toast.show { opacity:1; transform:translate(-50%,0); }
.page-profile [hidden] { display:none !important; }

.page-profile .pf-jump { display:flex; flex-wrap:wrap; gap:0; border-top:1px solid #e5edf0; background:#f6f9fb; padding:0 9px;border-radius: 0 0 20px 20px; }
.page-profile .pf-jump a { padding:12px 9px; color:#5d8196; text-decoration:none; font-size:10px; font-weight:800; }
.page-profile .pf-jump a:hover { background:#e5f2f5; color:#286c91; }


/* ===== Playarea: redigera Onödig information ===== */
.page-profile .oi-edit-panel { margin-top:24px; border-top:1px solid #e1e9ee; padding-top:19px; }
.page-profile .oi-edit-panel h3 { font-size:16px; color:#45677b; margin:0 0 5px; }
.page-profile .oi-edit-help { font-size:11px; color:#718694; margin:0 0 15px; }
.page-profile .oi-edit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.page-profile .oi-edit-field { min-width:0; }
.page-profile .oi-edit-field > label { display:block; font-size:11px; font-weight:800; color:#53768a; margin-bottom:6px; }
.page-profile .oi-edit-field select,.page-profile .oi-edit-choice { box-sizing:border-box; width:100%; min-height:36px; padding:8px 10px; border:1px solid #cddfe7; border-radius:5px; background:#fff; color:#506f82; font:700 11px Arial,sans-serif; }
.page-profile .oi-edit-choice { display:flex; justify-content:space-between; align-items:center; text-align:left; cursor:pointer; }
.page-profile .oi-edit-multi { position:relative; }
.page-profile .oi-edit-pop { position:absolute; z-index:35; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1px solid #cddfe7; border-radius:5px; box-shadow:0 8px 22px #2e52652b; max-height:255px; overflow-y:auto; }
.page-profile .oi-edit-pop label { display:flex; align-items:center; gap:7px; padding:8px 10px; font-size:11px; color:#537184; cursor:pointer; }
.page-profile .oi-edit-pop label:hover { background:#eef7f9; }
.page-profile .oi-edit-pop input { accent-color:#2e9e99; }
.page-profile .oi-edit-pop-foot { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #e7eef1; background:#f6f9fb; padding:8px 10px; font-size:10px; color:#718694; }
.page-profile .oi-edit-pop-foot button { border:0; background:transparent; color:#2c7299; font-size:10px; font-weight:800; cursor:pointer; }
.page-profile .oi-edit-reset { margin-top:12px; background:transparent; border:0; padding:0; color:#2c7299; font-size:11px; font-weight:800; cursor:pointer; }


/* Korrigeringar: flervalsmenyer på profilredigeringen */
.page-profile .lajv-profile-edit .oi-edit-pop input[type="checkbox"] {
  display:inline-block; width:15px; height:15px; min-height:15px;
  padding:0; margin:0; flex:0 0 15px; box-shadow:none;
  accent-color:#2e9e99; cursor:pointer;
}
.page-profile .oi-edit-pop label { min-height:31px; }
.page-profile .oi-edit-pop label span { flex:1; min-width:0; }
.page-profile .oi-edit-pop label:has(input:disabled) { opacity:.5; cursor:not-allowed; }
.page-profile .oi-edit-field { position:relative; }
.page-profile .oi-edit-field:has(.oi-edit-pop:not([hidden])) { z-index:60; }
.page-profile .oi-edit-pop[hidden] { display:none !important; }
.page-profile .oi-edit-pop { box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain; }
.page-profile .home-main > section > .panel:has(.oi-edit-panel) { overflow:visible; }
.page-profile .oi-edit-choice span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.page-profile .oi-edit-choice span:last-child { flex:none; padding-left:8px; }

/* =========================================================
   Playarea – Krypinateljén (profilredigering)
   ========================================================= */
.krypin-atelje{
  --ink:#29384b; --muted:#7b8795; --blue:#2c7299; --blue-dark:#205b7e; --blue-pale:#e9f3f8;
  --teal:#2e9e99; --coral:#ed7969; --gold:#e9b94d; --line:#dce4e9; --paper:#fff; --page:#eaf0f3;
  --shadow:0 2px 0 rgba(35,64,82,.035),0 5px 15px rgba(35,64,82,.045);
}
.krypin-atelje *{box-sizing:border-box}
.krypin-atelje a{color:var(--blue);text-decoration:none}
.krypin-atelje a:hover{color:var(--coral)}
.krypin-atelje button,.krypin-atelje input,.krypin-atelje select,.krypin-atelje textarea{font:inherit}
.krypin-atelje button{cursor:pointer}
.krypin-atelje .panel{background:var(--paper);border:1px solid #d9e2e7;border-radius:7px;box-shadow:var(--shadow);overflow:hidden}
.krypin-atelje .panel-heading{min-height:35px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:linear-gradient(#fff,#f7f9fa);border-bottom:1px solid #e3e9ed;color:#52687a;font-size:10px;font-weight:900;letter-spacing:.065em}
.krypin-atelje .button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:5px;padding:8px 12px;font-size:11px;font-weight:800;transition:transform .12s,filter .12s;box-shadow:inset 0 1px rgba(255,255,255,.24),0 2px 0 rgba(25,55,72,.09)}
.krypin-atelje .button:hover{filter:brightness(1.04);transform:translateY(-1px)}
.krypin-atelje .button-teal{color:#fff;background:linear-gradient(#43b2a9,#278f8e);border-color:#258986}
.krypin-atelje .button-teal:hover{color:#fff}
.krypin-atelje .button-coral{color:#fff;background:linear-gradient(#f18d7b,#dc6b5e);border-color:#d86a5d}
.krypin-atelje .button-coral:hover{color:#fff}
.krypin-atelje .button-light{color:#4c8287;background:linear-gradient(#fff,#f1f8f6);border-color:#c4dedb}
.krypin-atelje .home-grid{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:18px;align-items:start}
.krypin-atelje .home-main,.krypin-atelje .home-side{min-width:0;display:flex;flex-direction:column}
.krypin-atelje .home-main{gap:18px}
.krypin-atelje .home-side{gap:14px;position:sticky;top:12px}
.krypin-atelje .profile-hero{overflow:visible}
.krypin-atelje .profile-cover{position:relative;overflow:hidden;height:124px;display:flex;align-items:flex-start;justify-content:space-between;padding:14px 16px;border-radius:7px 7px 0 0;background:radial-gradient(circle at 12% 20%,rgba(255,239,205,.85),transparent 40%),repeating-linear-gradient(135deg,rgba(255,255,255,.22) 0 1px,transparent 1px 9px),linear-gradient(115deg,#d9f0ed 0%,#e6f3f2 52%,#f8e9c5 100%);border-bottom:1px solid #c8e2e0}
.krypin-atelje .profile-cover-tag{position:relative;z-index:2;padding:4px 10px;border-radius:4px 4px 4px 1px;background:#fff9ed;box-shadow:0 2px 0 #dfc9a9;color:#9a6042;font:900 10px "Nunito",sans-serif;letter-spacing:.1em;transform:rotate(-1.5deg)}
.krypin-atelje .cover-star{position:absolute;color:#d18a4e;text-shadow:0 1px 2px rgba(255,244,220,.8)}
.krypin-atelje .cs1{right:26%;top:18px;font-size:18px}
.krypin-atelje .cs2{right:12%;bottom:20px;font-size:13px}
.krypin-atelje .cs3{left:40%;bottom:14px;font-size:11px}
.krypin-atelje .profile-identity{display:flex;align-items:center;gap:18px;padding:0 18px 14px}
.krypin-atelje .profile-photo{position:relative;flex:0 0 auto;margin-top:-46px;transform:rotate(-2deg)}
.krypin-atelje .profile-photo img{display:block;width:112px;height:112px;object-fit:cover;border:5px solid #fff;border-radius:6px;outline:1px solid #d9e3e8;box-shadow:0 4px 10px rgba(35,64,82,.2)}
.krypin-atelje .profile-id-text{min-width:0;padding-top:12px}
.krypin-atelje .profile-name{font:900 25px/1.1 "Nunito",sans-serif;color:var(--ink);letter-spacing:-.4px}
.krypin-atelje .profile-meta{margin:5px 0 0;color:var(--muted);font-size:11px}
.krypin-atelje .profile-facts{margin:0;padding:4px 14px}
.krypin-atelje .profile-facts div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed #e6ecef;font-size:11px}
.krypin-atelje .profile-facts div:last-child{border:0}
.krypin-atelje .profile-facts dt{color:#8a98a2;font-size:10px;font-weight:700}
.krypin-atelje .profile-facts dd{margin:0;color:#3b5365;font-weight:700;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.krypin-atelje .workshop-banner{position:relative;display:flex;align-items:center;gap:16px;padding:14px 20px;border:1px solid #eedbd0;border-radius:7px;box-shadow:var(--shadow);overflow:hidden;
  background:radial-gradient(circle at 92% 10%,rgba(233,185,77,.25),transparent 12rem),repeating-linear-gradient(135deg,rgba(255,255,255,.4) 0 1px,transparent 1px 8px),linear-gradient(115deg,#fff0e8 0%,#fff8e6 55%,#e6f4f2 100%)}
.krypin-atelje .wb-sym{flex:0 0 54px;height:54px;display:grid;place-items:center;border:3px solid #fff;border-radius:14px 14px 14px 4px;background:linear-gradient(145deg,#f18d7b,#ed7969);color:#fff;font-size:26px;box-shadow:0 3px 0 #ecc9c0;transform:rotate(-5deg)}
.krypin-atelje .wb-text{flex:1;min-width:0}
.krypin-atelje .wb-eyebrow{font:900 9px "Nunito",sans-serif;letter-spacing:.14em;color:#b98a78}
.krypin-atelje .wb-text h1{margin:2px 0 2px;font:900 25px/1.15 "Nunito",sans-serif;letter-spacing:-.6px;color:#6b4e54}
.krypin-atelje .wb-text h1 span{color:var(--coral)}
.krypin-atelje .wb-text p{margin:0;color:#8a7466;font-size:12px}
.krypin-atelje .wb-swatches{display:flex;gap:5px;transform:rotate(-10deg)}
.krypin-atelje .wb-swatches i{display:block;width:18px;height:40px;border:3px solid #fff;border-radius:8px;box-shadow:0 2px 5px rgba(50,70,80,.14)}
.krypin-atelje .wb-swatches i:nth-child(1){background:var(--coral)}
.krypin-atelje .wb-swatches i:nth-child(2){background:var(--gold)}
.krypin-atelje .wb-swatches i:nth-child(3){background:var(--teal)}
.krypin-atelje .wb-swatches i:nth-child(4){background:#3b91b2}
.krypin-atelje .step{position:relative}
.krypin-atelje .step-tab{display:inline-flex;align-items:center;gap:8px;margin:0 0 -1px 14px;padding:6px 15px 6px 8px;border:1px solid #d9e2e7;border-bottom:0;border-radius:8px 8px 0 0;background:#fff;position:relative;z-index:1;box-shadow:0 -2px 0 rgba(35,64,82,.02)}
.krypin-atelje .step-num{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#fff;font:900 13px "Nunito",sans-serif;background:var(--teal);box-shadow:0 2px 0 #bfe3e0}
.krypin-atelje .step.s2 .step-num{background:var(--coral);box-shadow:0 2px 0 #f6cbc4}
.krypin-atelje .step.s3 .step-num{background:var(--gold);box-shadow:0 2px 0 #f2e1b3}
.krypin-atelje .step-tab h2{margin:0;font:900 16px "Nunito",sans-serif;color:#3b5365;letter-spacing:-.2px}
.krypin-atelje .step-tab small{color:#93a0aa;font-size:10px;font-weight:500}
.krypin-atelje .step>.panel{border-top-left-radius:0}
.krypin-atelje .step-body{padding:16px 18px 16px;background:linear-gradient(180deg,#fffdf6,#fff 40%)}
.krypin-atelje .f-label{display:flex;align-items:center;gap:7px;margin:0 0 5px;color:#52687a;font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.krypin-atelje .f-label i{font-style:normal;display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:#e1eef6;font-size:11px;letter-spacing:0}
.krypin-atelje .f-help{margin:0 0 8px;color:#93a0aa;font-size:11px}
.krypin-atelje .f-input,.krypin-atelje .f-textarea{display:block;width:100%;padding:9px 11px;border:1px solid #d4e1e6;border-radius:5px;background:#fff;color:var(--ink);font:600 12.5px/1.5 "Nunito",sans-serif;outline:0;transition:border-color .15s,box-shadow .15s}
.krypin-atelje .f-input{min-height:38px}
.krypin-atelje .f-input:hover,.krypin-atelje .f-textarea:hover{border-color:#bcd3da}
.krypin-atelje .f-input:focus,.krypin-atelje .f-textarea:focus{border-color:#8bc7ca;box-shadow:0 0 0 3px #e3f5f3}
.krypin-atelje .f-textarea{min-height:190px;resize:vertical;white-space:pre-wrap;overflow-wrap:break-word}
.krypin-atelje .editor-box{border:1px solid #d4e1e6;border-radius:6px;overflow:hidden;background:#fff}
.krypin-atelje .editor-box:focus-within{border-color:#8bc7ca;box-shadow:0 0 0 3px #e3f5f3}
.krypin-atelje .editor-box .f-textarea{border:0;border-radius:0;box-shadow:none!important;background:#fffefa}
.krypin-atelje .lajv-bb-toolbar{display:flex;flex-wrap:nowrap;align-items:center;gap:5px;padding:8px 9px;background:linear-gradient(#f4f9fb,#eaf3f6);border-bottom:1px solid #d4e1e6;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.krypin-atelje .lajv-bb-toolbar>button,.krypin-atelje .lajv-bb-tool-picker{position:relative;display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;height:30px;margin:0;padding:0 10px;border:1px solid #c5dae2;border-radius:4px;background:linear-gradient(#fff,#f1f7f9);color:#286c91;font-size:11px;font-weight:700;line-height:1;white-space:nowrap;box-shadow:0 2px 0 #d3e2e8;transition:transform .1s,box-shadow .1s,background .15s}
.krypin-atelje .lajv-bb-toolbar>button:hover,.krypin-atelje .lajv-bb-tool-picker:hover{background:#d9f0ed;transform:translateY(-1px)}
.krypin-atelje .lajv-bb-toolbar>button:active{transform:translateY(2px);box-shadow:0 0 0 #d3e2e8}
.krypin-atelje .lajv-bb-sep{flex:0 0 1px;height:20px;background:#c9dce3;margin:0 3px}
.krypin-atelje .lajv-bb-tool-picker input[type=color],.krypin-atelje .lajv-bb-tool-picker select{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;z-index:1}
.krypin-atelje .lajv-bb-tool-picker:focus-within{outline:2px solid #286c91;outline-offset:2px}
.krypin-atelje .lajv-bb-tool-picker .swatch-dot{display:inline-block;width:11px;height:11px;margin-right:6px;border-radius:50%;border:1px solid rgba(0,0,0,.15);background:#ed7969}
.krypin-atelje .lajv-bb-smileys{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 9px;background:#fbfdfd;border-bottom:1px dashed #d9e6ea}
.krypin-atelje .lajv-bb-smileys .sm-label{margin-right:4px;color:#93a0aa;font-size:9px;font-weight:900;letter-spacing:.09em}
.krypin-atelje .lajv-bb-smileys button{padding:2px 7px;border:1px solid transparent;border-radius:4px;background:transparent;font-size:19px;line-height:1.3;transition:transform .12s,background .15s}
.krypin-atelje .lajv-bb-smileys button:hover{background:#fff1cc;border-color:#f0dca0;transform:scale(1.25) rotate(-6deg)}
.krypin-atelje .editor-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 11px;border-top:1px solid #e3ebee;background:#f8fbfc;font-size:10px;color:#93a0aa}
.krypin-atelje .lajv-bb-counter{font-variant-numeric:tabular-nums;font-weight:700}
.krypin-atelje .lajv-bb-counter.near-limit{color:#b45309}
.krypin-atelje .cbar{display:inline-block;width:80px;height:5px;margin-left:7px;vertical-align:middle;border-radius:3px;background:#e4ecef;overflow:hidden}
.krypin-atelje .cbar i{display:block;height:100%;width:0;background:linear-gradient(#52c0b7,#2e9e99);transition:width .2s}
.krypin-atelje .near-limit .cbar i{background:linear-gradient(#f2d070,#e3ae3d)}
.krypin-atelje .view-toggle{display:inline-flex;border:1px solid #c5dae2;border-radius:5px;overflow:hidden}
.krypin-atelje .view-toggle button{border:0;padding:4px 10px;background:#fff;color:#4c8287;font-size:10px;font-weight:800}
.krypin-atelje .view-toggle button+button{border-left:1px solid #c5dae2}
.krypin-atelje .view-toggle button.on{background:#2e9e99;color:#fff}
.krypin-atelje .bb-preview{display:none;min-height:190px;padding:14px 18px;background:#fffdf5;color:#5c6e7a;font:600 12.5px/1.85 "Nunito",sans-serif;overflow-wrap:anywhere;white-space:pre-wrap}
.krypin-atelje .bb-preview.show{display:block}
.krypin-atelje .bb-preview blockquote{margin:6px 0;padding:6px 12px;border-left:4px solid var(--gold);background:#fff3d1;border-radius:0 5px 5px 0}
.krypin-atelje .bb-preview .empty{color:#aab5bc;font-style:italic}
.krypin-atelje .bb-preview a{text-decoration:underline}
.krypin-atelje .two-col{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px}
.krypin-atelje .pin-wrap{position:relative}
.krypin-atelje .pin-wrap .f-input{padding-left:34px}
.krypin-atelje .pin-wrap:before{content:"📍";position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:14px;z-index:1}
.krypin-atelje .mood-wrap .f-input{padding-left:34px}
.krypin-atelje .mood-wrap{position:relative}
.krypin-atelje .mood-wrap:before{content:"💬";position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:14px;z-index:1}
.krypin-atelje .quick-moods{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.krypin-atelje .quick-moods button{padding:3px 9px;border:1px dashed #d8c68e;border-radius:11px;background:#fffbea;color:#a07c1f;font-size:10px;font-weight:800;transition:transform .12s,background .15s}
.krypin-atelje .quick-moods button:hover{background:#fff1cc;transform:rotate(-2deg) translateY(-1px)}
.krypin-atelje .bubble-demo{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 13px;border:1px dashed #d3e0e2;border-radius:6px;background:#fbfcfd}
.krypin-atelje .bubble-demo .bd-label{flex:0 0 auto;color:#93a0aa;font-size:9px;font-weight:900;letter-spacing:.09em}
.krypin-atelje .bubble-demo .bd-name{font:800 12px "Nunito",sans-serif;color:#34607a}
.krypin-atelje .bubble-demo .bd-mood{padding:2px 8px;border-radius:10px;background:#fff1cc;color:#b98a1f;font-size:10px;font-weight:800}
.krypin-atelje .bubble-demo q{flex:1;min-width:0;padding:4px 11px;border:1px solid #e3eaee;border-left:3px solid var(--gold);border-radius:0 5px 5px 0;background:#fff;color:#566e7e;font:700 12px "Nunito",sans-serif;quotes:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.krypin-atelje .oi-head{display:flex;align-items:center;gap:14px;margin-bottom:12px;padding:11px 14px;border:1px dashed #e5cf8f;border-radius:7px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.5) 0 1px,transparent 1px 8px),#fffbea}
.krypin-atelje .oi-head .big{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:2px dashed #e3ae3d;color:#c9961f;font-size:22px;transform:rotate(-8deg)}
.krypin-atelje .oi-head p{flex:1;margin:0;color:#8a7440;font-size:11.5px;line-height:1.55}
.krypin-atelje .oi-head p b{color:#6e5a25;font:900 13px "Nunito",sans-serif;display:block;margin-bottom:1px}
.krypin-atelje .oi-tools{display:flex;gap:6px}
.krypin-atelje .oi-tools button{padding:6px 10px;border:1px solid #d6c27a;border-radius:5px;background:linear-gradient(#fffdf2,#fbf0c9);color:#8a6a1a;font-size:10px;font-weight:800;box-shadow:0 2px 0 #eadba3;white-space:nowrap}
.krypin-atelje .oi-tools button:hover{filter:brightness(1.03);transform:translateY(-1px)}
.krypin-atelje .oi-tools button:active{transform:translateY(1px)}
.krypin-atelje .oi-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;align-items:start}
.krypin-atelje .oi-card{--c:#2c7299;--cl:#e1eef6;--cb:#c7dde9;position:relative;border:1px solid var(--cb);border-radius:6px;background:#fff;box-shadow:0 2px 0 rgba(35,64,82,.04),0 4px 10px rgba(35,64,82,.06);transition:box-shadow .2s,transform .2s;display:flex;flex-direction:column}
.krypin-atelje .oi-card:nth-child(4n/**/+1){transform:rotate(-.35deg)}
.krypin-atelje .oi-card:nth-child(4n/**/+2){transform:rotate(.3deg)}
.krypin-atelje .oi-card:nth-child(4n/**/+3){transform:rotate(.25deg)}
.krypin-atelje .oi-card:nth-child(4n){transform:rotate(-.3deg)}
.krypin-atelje .oi-card:hover{transform:rotate(0) translateY(-1px);box-shadow:0 2px 0 rgba(35,64,82,.04),0 9px 18px rgba(35,64,82,.12)}
.krypin-atelje .oi-card.t-teal{--c:#2e9e99;--cl:#e1f3f1;--cb:#c4e3e0}
.krypin-atelje .oi-card.t-coral{--c:#e0705f;--cl:#fde7e1;--cb:#f4cfc8}
.krypin-atelje .oi-card.t-gold{--c:#c9961f;--cl:#fff1cc;--cb:#efdca1}
.krypin-atelje .oi-card.t-blue{--c:#2c7299;--cl:#e1eef6;--cb:#c7dde9}
.krypin-atelje .oi-card:before{content:"";position:absolute;top:-7px;left:50%;width:44px;height:14px;margin-left:-22px;background:var(--cl);border:1px solid var(--cb);opacity:.9;transform:rotate(-2deg);z-index:2}
.krypin-atelje .oi-card-top{display:flex;align-items:center;gap:9px;padding:13px 11px 8px;background:linear-gradient(180deg,var(--cl),#fff);border-radius:6px 6px 0 0}
.krypin-atelje .oi-ico{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border:2px solid #fff;border-radius:9px 9px 9px 3px;background:var(--cl);box-shadow:0 2px 0 var(--cb);font-size:18px;transform:rotate(-5deg);transition:transform .2s}
.krypin-atelje .oi-card:hover .oi-ico{transform:rotate(5deg) scale(1.1)}
.krypin-atelje .oi-title{flex:1;min-width:0}
.krypin-atelje .oi-title b{display:block;color:var(--c);font:900 14px "Nunito",sans-serif;line-height:1.15;letter-spacing:-.1px}
.krypin-atelje .oi-title small{display:block;color:#93a0aa;font-size:9.5px;line-height:1.3;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.krypin-atelje .oi-counter{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:9px;background:#fff;border:1px solid var(--cb);color:var(--c);font:900 10px "Nunito",sans-serif;transition:transform .2s,background .2s}
.krypin-atelje .oi-counter.is-complete{background:var(--c);color:#fff;border-color:var(--c)}
.krypin-atelje .oi-counter.bump{animation:bump .35s}
@keyframes bump{40%{transform:scale(1.3) rotate(-6deg)}}
.krypin-atelje .oi-clear{flex:0 0 auto;width:20px;height:20px;display:none;place-items:center;border:0;border-radius:50%;background:transparent;color:#a9b4bb;font-size:14px;line-height:1}
.krypin-atelje .oi-card.has .oi-clear{display:grid}
.krypin-atelje .oi-clear:hover{background:#fde7e1;color:#d4604f}
.krypin-atelje .oi-chips{display:flex;flex-wrap:wrap;gap:5px;padding:4px 11px 11px}
.krypin-atelje .chip{position:relative;display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1px solid var(--cb);border-radius:13px;background:#fff;color:#587487;font-size:11px;font-weight:700;line-height:1.35;transition:transform .12s,background .15s,color .15s,border-color .15s,box-shadow .15s}
.krypin-atelje .chip:hover:not(:disabled){background:var(--cl);border-color:var(--c);color:var(--c);transform:translateY(-1px)}
.krypin-atelje .chip:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.krypin-atelje .chip.on{background:var(--c);border-color:var(--c);color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.12);animation:pop .25s}
.krypin-atelje .chip.on:hover:not(:disabled){background:var(--c);color:#fff;filter:brightness(1.06)}
.krypin-atelje .chip.on:before{content:"✓";font-size:9px;font-weight:900}
.krypin-atelje .chip:disabled{opacity:.38;cursor:not-allowed}
.krypin-atelje .chip.shake{animation:shake .35s}
@keyframes pop{40%{transform:scale(1.14) rotate(-2deg)}}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.krypin-atelje .oi-summary{margin:0;padding:6px 11px 8px;border-top:1px dashed var(--cb);background:#fcfdfd;border-radius:0 0 6px 6px;color:#93a0aa;font-size:10px;min-height:27px;display:flex;align-items:center;gap:5px;overflow:hidden;white-space:nowrap}
.krypin-atelje .oi-summary b{color:var(--c);font-weight:800;overflow:hidden;text-overflow:ellipsis}
.krypin-atelje .oi-summary .hint{font-style:italic;color:#b2bdc5}
.krypin-atelje .oi-card.has .oi-summary{background:var(--cl)}
.krypin-atelje .save-bar{position:sticky;bottom:10px;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #c4dedb;border-radius:7px;background:linear-gradient(#fff,#f1f8f6);box-shadow:0 6px 18px rgba(35,64,82,.16)}
.krypin-atelje .save-bar .state{flex:1;color:#8a98a2;font-size:11px;display:flex;align-items:center;gap:7px}
.krypin-atelje .save-bar .state i{width:8px;height:8px;border-radius:50%;background:#4dbb82;box-shadow:0 0 0 3px #d7f1e2}
.krypin-atelje .save-bar.dirty .state{color:#a07c1f;font-weight:700}
.krypin-atelje .save-bar.dirty .state i{background:#e3ae3d;box-shadow:0 0 0 3px #fbecc2;animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(227,174,61,0)}}
.krypin-atelje .save-bar .button{padding:9px 16px;font-size:12px}
.krypin-atelje .side-meter{padding:13px 13px 12px;background:linear-gradient(180deg,#fffdf6,#fff 70%)}
.krypin-atelje .sm-top{display:flex;align-items:center;gap:11px}
.krypin-atelje .ring{position:relative;flex:0 0 58px;width:58px;height:58px;border-radius:50%;background:conic-gradient(var(--teal) calc(var(--p,0)*1%),#e6eef1 0);display:grid;place-items:center;transition:background .3s}
.krypin-atelje .ring:before{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}
.krypin-atelje .ring b{position:relative;font:900 14px "Nunito",sans-serif;color:#2c7299}
.krypin-atelje .sm-top h3{margin:0;font:900 15px "Nunito",sans-serif;color:#2e4f65}
.krypin-atelje .sm-top small{display:block;color:#93a0aa;font-size:10px;line-height:1.4}
.krypin-atelje .rank{display:flex;gap:3px;margin-top:11px}
.krypin-atelje .rank span{flex:1;padding:4px 0;border-radius:4px;background:#eef3f5;color:#a9b5bc;text-align:center;font-size:9px;font-weight:800;transition:background .3s,color .3s}
.krypin-atelje .rank span.on{background:#fff1cc;color:#a07c1f}
.krypin-atelje .rank span.cur{background:var(--coral);color:#fff;box-shadow:0 2px 0 #f6cbc4}
.krypin-atelje .mini-oi{list-style:none;margin:0;padding:4px 0}
.krypin-atelje .mini-oi li{display:flex;align-items:center;gap:8px;padding:5px 12px;border-bottom:1px solid #f0f3f5;font-size:10.5px}
.krypin-atelje .mini-oi li:last-child{border-bottom:0}
.krypin-atelje .mini-oi .mi{flex:0 0 22px;height:22px;display:grid;place-items:center;border-radius:5px;background:#e8f2f7;font-size:12px}
.krypin-atelje .mini-oi .mv{flex:1;min-width:0;color:#4c6d83;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.krypin-atelje .mini-oi .mv small{display:block;color:#a1abb2;font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.krypin-atelje .mini-oi li.none .mv{color:#c0cad0;font-weight:500;font-style:italic}
.krypin-atelje .tip-card{position:relative;padding:15px 16px 13px;border:1px solid #efd5b6;border-radius:7px;background:linear-gradient(135deg,#f8e8c7,#f6d9c9);color:#866d57;box-shadow:var(--shadow)}
.krypin-atelje .tip-card:before{content:"";position:absolute;top:-6px;left:22px;width:46px;height:13px;background:rgba(255,255,255,.7);transform:rotate(-3deg)}
.krypin-atelje .tip-card b{display:block;margin-bottom:3px;font:900 12px "Nunito",sans-serif;color:#9a6042;letter-spacing:.04em}
.krypin-atelje .tip-card p{margin:0;font:700 12px/1.55 "Nunito",sans-serif;min-height:56px}
.krypin-atelje .tip-card button{margin-top:6px;border:0;background:transparent;padding:0;color:#a65e3f;font-size:10px;font-weight:800;text-decoration:underline}
.krypin-atelje .lajv-bb-link-dialog{width:min(420px,calc(100vw - 40px));max-width:420px;border:1px solid #cbdce3;border-radius:8px;padding:0;color:#344957;background:#fff;box-shadow:0 18px 55px rgba(20,43,60,.26)}
.krypin-atelje .lajv-bb-link-dialog::backdrop{background:rgba(20,34,45,.55)}
.krypin-atelje .lajv-bb-dialog-heading{display:flex;align-items:center;justify-content:space-between;padding:14px 17px;background:linear-gradient(90deg,#3b91b2,#286c91);color:#fff}
.krypin-atelje .lajv-bb-dialog-heading button{border:0;background:transparent;color:#fff;font-size:24px;line-height:1}
.krypin-atelje .lajv-bb-dialog-body{padding:18px;display:flex;flex-direction:column;gap:7px}
.krypin-atelje .lajv-bb-dialog-body label{font-weight:700;margin-top:5px}
.krypin-atelje .lajv-bb-dialog-body input{width:100%;padding:10px;border:1px solid #cbdce3;border-radius:4px;font:inherit}
.krypin-atelje .lajv-bb-dialog-body input:focus{outline:0;border-color:#8bc7ca;box-shadow:0 0 0 3px #e3f5f3}
.krypin-atelje .lajv-bb-link-error{margin:5px 0 0;color:#b42318;font-size:13px}
.krypin-atelje .lajv-bb-dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:0 18px 18px}
.krypin-atelje .lajv-bb-dialog-actions button{border:1px solid #cbdce3;background:#f2f6f8;border-radius:4px;padding:9px 14px}
.krypin-atelje .lajv-bb-dialog-actions button[type=submit]{background:#2e9e99;color:#fff;border-color:#2e9e99;font-weight:700}
.krypin-atelje [hidden]{display:none!important}
.krypin-atelje .toast{position:fixed;left:50%;bottom:78px;z-index:100;padding:10px 18px;border-radius:9px;background:#2a3b4a;color:#fff;font-size:12px;box-shadow:0 8px 24px rgba(20,40,55,.3);opacity:0;pointer-events:none;transform:translate(-50%,14px);transition:.25s}
.krypin-atelje .toast.show{opacity:1;transform:translate(-50%,0)}
.krypin-atelje .site-footer-space{height:30px}
@media (prefers-reduced-motion:reduce){.krypin-atelje *{animation:none!important;transition:none!important}}
.krypin-atelje .atelier-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;background:#fff;border:1px solid #d6e4e7;border-left:5px solid var(--coral);border-radius:6px;box-shadow:var(--shadow)}
.krypin-atelje .atelier-strip strong{display:block;color:#356b85;font:900 13px "Nunito",sans-serif}
.krypin-atelje .atelier-strip small{display:block;color:#8395a0;font-size:10px}
.krypin-atelje .atelier-stamps{display:flex;gap:6px}
.krypin-atelje .atelier-stamps span{display:grid;place-items:center;width:36px;height:34px;background:#fff7df;border:1px dashed #e9c975;border-radius:5px;font-size:17px;transform:rotate(-5deg)}
.krypin-atelje .atelier-stamps span:nth-child(2){transform:rotate(6deg);background:#e6f4f2;border-color:#a7d7d0}
.krypin-atelje .atelier-stamps span:nth-child(3){transform:rotate(-3deg);background:#ffeae8;border-color:#f2bbb5}
.krypin-atelje .postcard{position:relative;overflow:hidden;padding:15px;background:linear-gradient(135deg,#fffdf6,#f4f9f9);border:1px solid #e3d9bf;border-radius:6px;box-shadow:var(--shadow)}
.krypin-atelje .postcard:before{content:"Playarea ✦";position:absolute;right:12px;top:12px;padding:7px;border:2px dashed #e4c56e;color:#bc9232;font:900 11px "Nunito";transform:rotate(7deg)}
.krypin-atelje .postcard-title{font:900 14px "Nunito";color:#426e85;margin:0 0 4px}
.krypin-atelje .postcard-name{font:900 22px "Nunito";color:#df756d;margin:0 0 6px}
.krypin-atelje .postcard-text{font-size:11px;line-height:1.7;color:#607987;margin:0 0 10px;max-width:200px;white-space:pre-wrap;overflow-wrap:anywhere}
.krypin-atelje .postcard-chips{display:flex;flex-wrap:wrap;gap:4px}
.krypin-atelje .postcard-chips span{background:#e4f3f0;color:#317c79;border:1px solid #b9dfd9;border-radius:10px;padding:3px 7px;font-size:10px;font-weight:800}
.krypin-atelje .postcard-foot{margin-top:12px;padding-top:8px;border-top:1px dashed #d8d9c9;font-size:9px;color:#a4a08e}
@media (prefers-reduced-motion:reduce){.krypin-atelje .atelier-stamps span{transform:none}}
.krypin-atelje .lajv-profile-errors{padding:12px;margin-bottom:14px;background:#fff0ed;border:1px solid #ed7969;border-radius:6px;color:#963b32}


/* Playarea Krypinverkstaden – teman, coverbilder och vädereffekter */
body.page-profile .krypin-theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
body.page-profile .krypin-theme-choice,body.page-profile .krypin-cover-choice{cursor:pointer;min-width:0}
body.page-profile .krypin-theme-choice input,body.page-profile .krypin-cover-choice input{position:absolute;opacity:0;width:1px;height:1px}
body.page-profile .krypin-theme-face{display:flex;align-items:center;gap:8px;padding:11px 9px;border:1px solid #d5e0e6;border-radius:7px;background:#fbfcfd;color:#4d6879;font-size:11px;font-weight:800}
body.page-profile .krypin-theme-face b{font-size:21px}
body.page-profile .krypin-theme-choice input:checked+.krypin-theme-face,body.page-profile .krypin-cover-choice input:checked+.krypin-cover-swatch{border-color:#2e9e99;box-shadow:0 0 0 2px #b9e8e2;background-color:#f0faf8}
body.page-profile .krypin-theme-choice input:focus-visible+.krypin-theme-face,body.page-profile .krypin-cover-choice input:focus-visible+.krypin-cover-swatch{outline:2px solid #286c91;outline-offset:3px}
body.page-profile .krypin-effect-toggle{display:flex;align-items:center;gap:9px;margin-top:13px;font-size:12px;font-weight:700}
body.page-profile .krypin-cover-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body.page-profile .krypin-cover-choice{display:grid;gap:5px;text-align:center;font-size:11px;font-weight:800;color:#526779}
body.page-profile .krypin-cover-swatch{display:block;height:56px;border:2px solid #d5e0e6;border-radius:7px;background-size:cover;background-position:center}
body.page-profile .cover-swatch-gradient{background:linear-gradient(115deg,#d9f0ed,#f8e9c5)}
body.page-profile .cover-swatch-winter{background:linear-gradient(160deg,#9cc8e3 0%,#d8eefa 55%,#fff 56%,#c9e4ee 100%)}
body.page-profile .cover-swatch-sunset{background:linear-gradient(160deg,#f9d2a0,#ee8e9c 55%,#8e78a9)}
body.page-profile .cover-swatch-forest{background:linear-gradient(165deg,#b6dfc0,#5a9b7c 50%,#275c56)}
body.page-profile .cover-swatch-night{background:radial-gradient(circle at 75% 22%,#f9e9a6 0 4px,transparent 5px),linear-gradient(135deg,#18264f,#4c4a85)}
body.page-profile .cover-swatch-custom{background:linear-gradient(135deg,#e7f2f5,#c9dde8);position:relative}
body.page-profile .cover-swatch-custom:after{content:'📷';font-size:24px;position:absolute;inset:10px}
body.page-profile .krypin-upload-field{display:grid;gap:7px;margin-top:14px;font-weight:700;font-size:12px}
body.page-profile .krypin-upload-field input{padding:9px;border:1px dashed #c5d9e1;border-radius:6px;max-width:100%;background:#fafcfd}
body.page-profile .krypin-cover-position{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:12px;font-weight:700}
body.page-profile .krypin-cover-position input{flex:1}
body.page-profile .krypin-cover-help{font-size:11px;color:#7b8795;margin-top:8px}
body.page-profile .krypin-preview-cover{height:132px;position:relative;overflow:hidden;display:flex;align-items:flex-start;background-size:cover!important;background-position:center var(--cover-position,50%)!important}
body.page-profile .krypin-preview-cover>span{position:relative;z-index:2;background:#fff9edb8;padding:4px 8px;border-radius:4px}
body.page-profile .krypin-preview-cover.cover-winter,body.page-profile .profile-cover.cover-winter{background:linear-gradient(160deg,#9cc8e3 0%,#d8eefa 55%,#fff 56%,#c9e4ee 100%)!important}
body.page-profile .krypin-preview-cover.cover-sunset,body.page-profile .profile-cover.cover-sunset{background:linear-gradient(160deg,#f9d2a0,#ee8e9c 55%,#8e78a9)!important}
body.page-profile .krypin-preview-cover.cover-forest,body.page-profile .profile-cover.cover-forest{background:linear-gradient(165deg,#b6dfc0,#5a9b7c 50%,#275c56)!important}
body.page-profile .krypin-preview-cover.cover-night,body.page-profile .profile-cover.cover-night{background:radial-gradient(circle at 75% 22%,#f9e9a6 0 4px,transparent 5px),linear-gradient(135deg,#18264f,#4c4a85)!important}
body.page-profile .krypin-preview-cover.cover-custom,body.page-profile .profile-cover.cover-custom{background-image:var(--k-cover-image)!important;background-size:cover!important;background-position:center var(--cover-position,50%)!important}
body.page-profile .krypin-weather{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
body.page-profile .krypin-particle{position:absolute;top:-20px;left:var(--particle-x);font-size:var(--particle-size);opacity:.85;animation:krypin-fall var(--particle-duration) linear infinite;animation-delay:var(--particle-delay);text-shadow:0 1px 3px #284a6180}
@keyframes krypin-fall{0%{transform:translate3d(0,-18px,0) rotate(0deg);opacity:0}12%{opacity:.9}88%{opacity:.9}100%{transform:translate3d(var(--particle-drift),170px,0) rotate(220deg);opacity:0}}
@media(prefers-reduced-motion:reduce){body.page-profile .krypin-particle{animation:none;display:none}}


/* ===== Playarea-status på profilsidan ===== */
.lajv-status-panel { overflow: hidden; }
.lajv-status-body { padding: 13px; }
.lajv-status-score { position: relative; padding: 12px 14px 11px; border: 1px solid #e8dfc6; border-radius: 7px; background: linear-gradient(125deg, #fffaf0, #f5faf9); text-align: center; }
.lajv-status-score-label { display: block; color: #947d53; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.lajv-status-score strong { display: block; color: #2c7299; font: 900 33px/1.2 'Nunito', sans-serif; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.lajv-status-score-unit { display: block; color: #7c8d97; font-size: 10px; font-weight: 700; }
.lajv-status-streak, .lajv-status-achievements { display: flex; align-items: center; gap: 10px; padding: 12px 3px 0; }
.lajv-status-streak-icon, .lajv-status-achievements > span:first-child { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; background: #fff1db; border-radius: 7px; font-size: 17px; }
.lajv-status-achievements > span:first-child { background: #eaf3f8; }
.lajv-status-streak b, .lajv-status-achievements b { display: block; color: #476175; font: 900 12px 'Nunito', sans-serif; }
.lajv-status-streak small, .lajv-status-achievements small { display: block; color: #8c9ba5; font-size: 10px; }
.lajv-status-achievements { margin-top: 11px; padding-top: 11px; border-top: 1px dashed #e3e9ed; }

/* Playarea – medaljer / prestationer (fristående styles, endast .lajv-achievements) */

.lajv-achievements .panel{background:#fff;border:1px solid #d8e2e7;border-radius:7px;box-shadow:var(--shadow);margin-bottom:17px;position:relative}
.lajv-achievements .body{padding:19px}
.lajv-achievements .lead{font-size:12px;color:#6f8291;margin:0 0 16px}

/* ===== medaljen ===== */
.lajv-achievements .md{--s:60px;position:relative;display:inline-block;width:var(--s);height:var(--s);isolation:isolate;cursor:pointer;outline:none;vertical-align:top}
.lajv-achievements .md svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 2px 1px rgba(25,45,55,.32));transition:transform .28s cubic-bezier(.3,1.7,.5,1),filter .25s}
.lajv-achievements .md::before{content:"";position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,rgba(255,238,170,.9),rgba(255,238,170,0) 66%);opacity:0;transition:opacity .25s;z-index:-1}
.lajv-achievements .md::after{content:"✦";position:absolute;top:-7px;right:-6px;font-size:calc(var(--s)*.26);line-height:1;color:#f0bd3e;text-shadow:0 0 6px #fff,0 1px 0 #fff;opacity:0;transform:scale(0) rotate(-30deg);transition:.3s cubic-bezier(.3,1.8,.5,1)}
.lajv-achievements .md:hover,.lajv-achievements .md:focus-visible{z-index:100}
.lajv-achievements .md:hover svg,.lajv-achievements .md:focus-visible svg{transform:translateY(-4px) rotate(-5deg) scale(1.12);filter:drop-shadow(0 8px 5px rgba(25,45,55,.3)) brightness(1.07) saturate(1.12)}
.lajv-achievements .md:hover::before,.lajv-achievements .md:focus-visible::before{opacity:.9}
.lajv-achievements .md:hover::after,.lajv-achievements .md:focus-visible::after{opacity:1;transform:scale(1) rotate(18deg)}
.lajv-achievements .md.xs::after,.lajv-achievements .md.xs::before{display:none}
.lajv-achievements .md.lk::after{content:"?";color:#8a99a4}
.lajv-achievements .md.lk:hover svg{transform:none;animation:wob .45s}
@keyframes wob{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.lajv-achievements .tw{animation:tw 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes tw{0%,100%{opacity:.35;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}
.lajv-achievements .dim svg{filter:grayscale(.75) brightness(1.06) drop-shadow(0 2px 1px rgba(25,45,55,.25))}

/* pratbubbla */
.lajv-achievements .tip{position:absolute;bottom:calc(100% + 11px);left:50%;width:190px;padding:9px 11px;border-radius:9px;background:linear-gradient(#fff,#eef4f7);border:1px solid #bdd0db;box-shadow:0 9px 20px rgba(35,64,82,.24),inset 0 1px 0 #fff;text-align:left;font:500 11px/1.4 'DM Sans',Arial,sans-serif;color:#5b7080;letter-spacing:0;text-shadow:none;opacity:0;visibility:hidden;transform:translate(-50%,6px) scale(.95);transition:.18s;pointer-events:none;z-index:60}
.lajv-achievements .tip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:#eef4f7;filter:drop-shadow(0 1px 0 #bdd0db)}
.lajv-achievements .md:hover .tip,.lajv-achievements .md:focus-visible .tip{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
.lajv-achievements .md.tl .tip{left:-8px;transform:translate(0,6px) scale(.95)}.md.tl:hover .tip{transform:translate(0,0) scale(1)}.md.tl .tip::after{left:calc(var(--s)/2 + 2px)}
.lajv-achievements .md.tr .tip{left:auto;right:-8px;transform:translate(0,6px) scale(.95)}.md.tr:hover .tip{transform:translate(0,0) scale(1)}.md.tr .tip::after{left:auto;right:calc(var(--s)/2 - 10px);margin:0}
.lajv-achievements .tip .tt{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:3px}
.lajv-achievements .tip b{font:900 12px Nunito,sans-serif;color:#2b4a5f;line-height:1.2}
.lajv-achievements .tip i{display:block;font-style:normal}
.lajv-achievements .tip small{display:block;margin-top:5px;font-size:9.5px;color:#8a9ba6}
.lajv-achievements .rar{flex:none;font:900 8px Nunito,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;padding:2px 6px;border-radius:8px;font-style:normal;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.lajv-achievements .r1{background:linear-gradient(#a9b7c0,#8696a1)}.r2{background:linear-gradient(#4fc3bd,#2e9e99)}.r3{background:linear-gradient(#4b9cc4,#2c7299)}.r4{background:linear-gradient(#f59283,#d9604f)}.r5{background:linear-gradient(#f7d46e,#c98f1f)}.r0{background:linear-gradient(#b4c0c8,#93a1ab)}

/* ===== nivåkort ===== */
.lajv-achievements .tier-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.lajv-achievements .tier-card{text-align:center;border:1px solid #e2e9ed;background:linear-gradient(#fff,#f7fafb);border-radius:8px;padding:16px 4px 11px}
.lajv-achievements .tier-card strong{display:block;margin-top:11px;font:900 13px Nunito}
.lajv-achievements .tier-card em{display:block;font-style:normal;color:#82919c;font-size:10px;margin-top:1px}
.lajv-achievements .tier-card .req{font-size:10px;font-weight:800;color:#6b8392;margin-top:6px}
.lajv-achievements .sz{margin-top:11px;padding-top:10px;border-top:1px dashed #d8e3e9;display:flex;justify-content:center;align-items:flex-end;gap:12px}
.lajv-achievements .sz span{display:block;font-size:8.5px;color:#9aa9b3;margin-top:3px}
.lajv-achievements .sz div{text-align:center}

/* ===== unika ===== */
.lajv-achievements .unique-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}
.lajv-achievements .unique{background:#fbfcfd;border:1px solid #e1e8ec;border-radius:8px;text-align:center;padding:15px 6px 12px;min-height:158px}
.lajv-achievements .unique strong{display:block;font:900 12px Nunito;margin-top:11px}
.lajv-achievements .unique small{display:block;color:#7d8e9a;font-size:10px;margin-top:2px;line-height:1.35}

/* ===== hylla ===== */
.lajv-achievements .shelf-row{display:grid;grid-template-columns:repeat(var(--c,8),1fr);justify-items:center;align-items:end;padding:18px 6px 19px;position:relative}
.lajv-achievements .shelf-row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:11px;border-radius:3px;background:linear-gradient(#fff,#e1ebf0 45%,#c5d5de);border:1px solid #c3d3dc;box-shadow:0 3px 5px rgba(35,64,82,.12)}
.lajv-achievements .shelf-row+.shelf-row{margin-top:10px}
.lajv-achievements .slot{width:60px;height:60px;border-radius:50%;border:2px dashed #cbd8e0;display:grid;place-items:center;color:#d4dfe5;font-size:18px}
.lajv-achievements .hint{font-size:10.5px;color:#8a9aa4;margin:14px 0 0}

/* ===== profil ===== */
.lajv-achievements .pbanner{height:78px;background:linear-gradient(115deg,#d9f0ed,#e6f3f2 52%,#f8e9c5);position:relative;overflow:hidden;border-radius:6px 6px 0 0}
.lajv-achievements .pbanner::after{content:"✦";position:absolute;right:20px;top:-34px;font-size:120px;color:#fff8}
.lajv-achievements .pbanner::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 120%,rgba(46,158,153,.25),transparent 55%)}
.lajv-achievements .pinfo{padding:0 15px 13px;position:relative}
.lajv-achievements .avatar{width:62px;height:62px;border-radius:9px;border:3px solid #fff;margin-top:-30px;background:linear-gradient(#bfe0ea,#8ec0d4);box-shadow:0 2px 6px rgba(35,64,82,.25);position:relative;overflow:hidden}
.lajv-achievements .avatar::before{content:"";position:absolute;left:19px;top:11px;width:20px;height:20px;border-radius:50%;background:#f3d3b4}
.lajv-achievements .avatar::after{content:"";position:absolute;left:8px;top:34px;width:42px;height:40px;border-radius:50% 50% 0 0;background:#ed7969}
.lajv-achievements .pname{font:900 20px Nunito;color:#286c91;margin-top:7px;line-height:1.1}
.lajv-achievements .psub{font-size:11px;color:#7b8f9b;margin-top:2px}
.lajv-achievements .on{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3dc47e;box-shadow:0 0 0 2px #d6f3e3;margin-right:4px}
.lajv-achievements .fav-wrap{padding:6px 12px 14px}
.lajv-achievements .fav-wrap .shelf-row{padding-top:14px;padding-bottom:17px}
.lajv-achievements .notice{background:#fffaf0;border:1px solid #efdfb6;border-radius:6px;padding:9px 11px;font-size:10.5px;color:#866c3d;margin:12px 12px 14px}
.lajv-achievements .gb{display:flex;gap:10px;padding:13px 14px}
.lajv-achievements .gb .av{width:34px;height:34px;border-radius:6px;background:linear-gradient(#f5d3c7,#ed7969);flex:none;border:2px solid #fff;box-shadow:0 1px 3px rgba(35,64,82,.25)}
.lajv-achievements .gb .who{font:900 12px Nunito;color:#286c91;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lajv-achievements .gb p{margin:2px 0 0;font-size:11.5px;color:#60788a}
.lajv-achievements .gb .when{font-size:9.5px;color:#9aa9b3}
.lajv-achievements .progress-label{display:flex;justify-content:space-between;font-size:11px;font-weight:800;color:#587181}
.lajv-achievements .bar{height:11px;background:#e4edf1;border:1px solid #d3e1e7;border-radius:9px;overflow:hidden;margin:8px 0 5px}
.lajv-achievements .bar i{display:block;height:100%;width:46%;background:linear-gradient(#8fded5,#4cc0b6 49%,#2e9e99 51%,#3fb3ab);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.lajv-achievements .muted{font-size:10px;color:#8496a2}
.lajv-achievements .rules{padding:13px 17px 15px;color:#6d8190;font-size:11px;line-height:1.7}.rules b{color:#3e6379}
.lajv-achievements .footer{text-align:center;font-size:11px;color:#8c9ca7;margin-top:20px}
.lajv-achievements{margin:18px 0 28px;}
.lajv-achievements .panel{overflow:visible;margin-bottom:18px;}

.lajv-achievements .layout{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:18px;align-items:start;}
.lajv-achievements .layout>main,.lajv-achievements .layout>aside{min-width:0;}
.lajv-achievements .tier-grid{gap:7px;}
.lajv-achievements .tier-card{padding:12px 2px 10px;}
.lajv-achievements .tier-card .md[style*="84px"]{--s:70px !important;}
.lajv-achievements .unique-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.lajv-achievements .shelf-row{grid-template-columns:repeat(8,minmax(0,1fr));}
.lajv-achievements .intro{display:flex;justify-content:space-between;align-items:center;margin:8px 0 19px;}
.lajv-achievements .intro h1{margin:0;font:900 25px Nunito,sans-serif;color:#265e7c;}
.lajv-achievements .intro p{margin:4px 0 0;color:#6c8190;}
.lajv-achievements .draft{font-size:10px;font-weight:900;color:#a07c35;background:#fff7df;border:1px solid #ead8a9;border-radius:5px;padding:7px 11px;}
.lajv-achievements .preview-note{background:#fff9e9;border:1px solid #f1dfae;color:#80693c;padding:11px 14px;border-radius:6px;margin-bottom:16px;font-size:11px;}
.lajv-achievements .preview-profile{padding:14px;}
.lajv-achievements .preview-profile b{font:900 16px Nunito;color:#286c91;}
.lajv-achievements .preview-profile p{font-size:11px;color:#7b8f9b;margin:3px 0 0;}
.lajv-achievements .preview-favorites{display:grid;grid-template-columns:repeat(3,1fr);justify-items:center;gap:8px;padding:18px 12px;}
.lajv-achievements .preview-progress{padding:15px;}
.lajv-achievements .preview-progress .bar i{width:1.53%;}
.lajv-achievements .tip{z-index:200;}


/* ===== Version 2: Playarea-rubriker, låsta medaljer och läsbara tooltips ===== */
.lajv-achievements .panel > .panel-heading{min-height:35px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:linear-gradient(#fff,#f7f9fa);border-bottom:1px solid #e3e9ed;color:#52687a;font-size:10px;font-weight:900;letter-spacing:.065em;text-shadow:none;box-shadow:none;border-radius:6px 6px 0 0}
.lajv-achievements .panel > .panel-heading small{color:#94a1aa;font-size:9px;font-weight:700;letter-spacing:0}
.lajv-achievements .md.is-locked svg{filter:grayscale(1) saturate(0) brightness(.91) contrast(.86) drop-shadow(0 2px 1px rgba(25,45,55,.2));opacity:.78}
.lajv-achievements .md.is-locked::before,.lajv-achievements .md.is-locked::after{display:none}
.lajv-achievements .md.is-locked:hover svg,.lajv-achievements .md.is-locked:focus-visible svg{transform:translateY(-2px) scale(1.045);filter:grayscale(1) saturate(0) brightness(.97) contrast(.9) drop-shadow(0 4px 3px rgba(25,45,55,.18))}
.lajv-achievements.demo-unlocked .md.is-locked:not(.lk) svg{filter:drop-shadow(0 2px 1px rgba(25,45,55,.32));opacity:1}
.lajv-achievements.demo-unlocked .md.is-locked:not(.lk):hover svg{filter:drop-shadow(0 8px 5px rgba(25,45,55,.3)) brightness(1.07) saturate(1.12)}
.lajv-achievements.demo-unlocked .md.is-locked:not(.lk)::before,.lajv-achievements.demo-unlocked .md.is-locked:not(.lk)::after{display:block}
.lajv-achievements .tip{box-sizing:border-box;width:236px;max-width:236px;min-width:0;padding:11px 12px;background:#fff;color:#344957;border:1px solid #afc5d0;border-radius:7px;box-shadow:0 8px 22px rgba(24,55,75,.22);font:500 11px/1.55 'DM Sans',Arial,sans-serif;overflow-wrap:anywhere;word-break:normal;text-shadow:none}
.lajv-achievements .tip::after{border-top-color:#fff}
.lajv-achievements .tip .tt{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-bottom:6px;min-width:0}
.lajv-achievements .tip b{display:block;max-width:100%;font:900 12px/1.3 Nunito,sans-serif;color:#253e50;overflow-wrap:anywhere}
.lajv-achievements .tip i{color:#455d6c;font-size:11px;line-height:1.5}
.lajv-achievements .tip small{color:#667e8d;font-size:10px}
.lajv-achievements .rar{display:inline-block;max-width:100%;flex:0 1 auto;white-space:normal;overflow-wrap:anywhere;line-height:1.35;padding:3px 7px}
.lajv-achievements .r5{color:#49330a;background:#f6d66d}
.lajv-achievements .r1,.lajv-achievements .r2,.lajv-achievements .r3,.lajv-achievements .r4,.lajv-achievements .r0{color:#fff}
.lajv-achievements .md.tl .tip{left:-8px;right:auto}
.lajv-achievements .md.tr .tip{right:-8px;left:auto}
.lajv-achievements .md.tl:hover .tip,.lajv-achievements .md.tl:focus-visible .tip,.lajv-achievements .md.tr:hover .tip,.lajv-achievements .md.tr:focus-visible .tip{transform:translate(0,0) scale(1)}
.lajv-achievements .preview-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lajv-achievements .achievement-demo-toggle{flex:none;border:1px solid #b8d6d4;background:linear-gradient(#fff,#e9f6f4);color:#286d74;padding:7px 11px;border-radius:5px;font-size:11px;font-weight:800}
.lajv-achievements .achievement-demo-toggle:hover{background:#d8f0ec}
.lajv-achievements .achievement-demo-toggle:focus-visible{outline:2px solid #2c7299;outline-offset:2px}
.lajv-achievements .md.lk svg{filter:grayscale(1) brightness(.9);opacity:.8}

/* Playarea – sällsynthetsetiketter: hög kontrast, även i medaljernas popup */
.lajv-achievements .tip .rar,
.lajv-achievements .rar {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: 6px;
  font: 900 10px/1.25 'Nunito', Arial, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: 1;
  filter: none;
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.lajv-achievements .tip .r0,.lajv-achievements .tip .r1,
.lajv-achievements .r0,.lajv-achievements .r1 { background:#29495f; color:#fff; border:1px solid #19384d; }
.lajv-achievements .tip .r2,.lajv-achievements .r2 { background:#166d55; color:#fff; border:1px solid #10553f; }
.lajv-achievements .tip .r3,.lajv-achievements .r3 { background:#65428e; color:#fff; border:1px solid #4a2c70; }
.lajv-achievements .tip .r4,.lajv-achievements .r4 { background:#aa433d; color:#fff; border:1px solid #862e2b; }
.lajv-achievements .tip .r5,.lajv-achievements .r5 { background:#f0c95b; color:#4c3409; border:1px solid #c69c32; }

/* Playarea: riktiga prestationer */
.lajv-achievements .tier-card .bar{margin:9px 8px 5px;height:8px}
.lajv-achievements .tier-card .bar i{width:0}
.lajv-achievements .achievement-fav-button{margin-top:8px;border:1px solid #c4dedb;background:#eff9f7;color:#286c75;border-radius:5px;padding:5px 7px;font-size:10px;font-weight:800}
.lajv-achievements .achievement-fav-button:hover{background:#dff3ef}
.lajv-achievements .md.is-locked{cursor:default}
.lajv-achievements .preview-favorites:empty::after{content:'Inga favoriter valda ännu';grid-column:1/-1;color:#81919b;font-size:11px}
.lajv-achievements .tier-card small{font-size:9px;color:#82919c}

/* Prestationssidans sidhuvud – samma komponent som Inställningar och Krypinverkstaden. */
body.page-achievements .lajv-achievements .lajv-page-banner { margin:0 0 14px; background:linear-gradient(115deg,#e7f2f9 0%,#eef8f5 55%,#fff3d8 100%); }
body.page-achievements .lajv-achievements .lajv-page-banner__symbol { background:linear-gradient(145deg,#e9b94d,#cf9432); box-shadow:0 3px 10px rgba(191,143,42,.2); }
body.page-achievements .lajv-achievements .lajv-page-banner h1 { margin:0 0 3px; font:900 26px/1.2 'Nunito',sans-serif; color:#2c607e; }
body.page-achievements .lajv-achievements .lajv-page-banner p { margin:0; font:500 12px/1.5 'DM Sans',sans-serif; color:#627c88; }

/* Profil: endast profilägarens utvalda, upplåsta medaljer */
.lajv-profile-medals { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:12px 2px 3px; }
.lajv-profile-medal { display:flex; align-items:center; justify-content:center; min-height:66px; border:1px solid #e1e9ed; border-radius:7px; background:#f8fbfc; }
.lajv-profile-medal svg { width:56px; height:56px; display:block; }
.lajv-profile-medals-empty { color:#7a8d99; font-size:11px; margin:10px 3px 2px; }
.lajv-status-achievements small a { color:inherit; text-decoration:underline; }


/* ===== Playarea VÄNNER – använder befintligt skal, banner och paneler ===== */
body.page-friends .lajv-friends{width:100%;min-width:0}
body.page-friends .lajv-friends .lajv-page-banner{background:linear-gradient(115deg,#e5f3f5,#f0f9f5 56%,#fff0db)}
body.page-friends .lajv-friends .lajv-page-banner__symbol{background:linear-gradient(145deg,#f19a9d,#dd6f83);box-shadow:0 3px 10px #da80953b}
body.page-friends .vf-topline{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 15px;padding:0 3px;color:#8b9aa5;font-size:10px}
body.page-friends .vf-topline a{font-weight:800}
body.page-friends .vf-topline strong{color:#377e91}
body.page-friends .vf-dot{padding:0 5px;color:#e9b94d}
body.page-friends .vf-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px;align-items:start}
body.page-friends .vf-main,body.page-friends .vf-sidebar{display:flex;flex-direction:column;gap:15px;min-width:0}
body.page-friends .vf-panel-heading{min-height:40px}
body.page-friends .vf-panel-heading>span:first-child{display:flex;align-items:center;gap:7px}
body.page-friends .vf-group-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:6px;background:#e5f3f2;color:#2e9e99;font-size:15px}
body.page-friends .vf-group:nth-child(2) .vf-group-icon{background:#fff1d6;color:#c69a32}
body.page-friends .vf-group:nth-child(3) .vf-group-icon{background:#e8f1fa;color:#2c7299}
body.page-friends .vf-group:nth-child(4) .vf-group-icon{background:#fde8ed;color:#df7088}
body.page-friends .vf-group-body{padding:13px}
body.page-friends .vf-people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
body.page-friends .vf-person{position:relative;display:flex;align-items:center;gap:9px;min-width:0;padding:9px 8px;border:1px solid #e1e9ed;border-radius:6px;background:linear-gradient(#fff,#fafcfd);transition:border-color .15s,background .15s}
body.page-friends .vf-person:hover{border-color:#b6d8df;background:#f7fcfc}
body.page-friends .vf-person-avatar{flex:0 0 43px;width:43px;height:43px;border:3px solid white;border-radius:7px;outline:1px solid #d6e2e7;overflow:hidden;box-shadow:0 2px 4px #d9e3e8}
body.page-friends .vf-person-avatar img{width:100%;height:100%;display:block;object-fit:cover}
body.page-friends .vf-person-info{min-width:0;flex:1}
body.page-friends .vf-person-info>a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:900 12px 'Nunito',sans-serif;color:#356b85}
body.page-friends .vf-person-info>a:hover{color:#ed7969}
body.page-friends .vf-person-info small{display:block;color:#a0acb4;font-size:9px}
body.page-friends .vf-mini-action{display:grid;place-items:center;width:19px;height:19px;border:0;border-radius:4px;background:#f4e7e6;color:#c77973;font-size:17px;line-height:1;cursor:pointer}
body.page-friends .vf-mini-action:hover{background:#f4d0cd}
body.page-friends .vf-empty{display:flex;align-items:center;justify-content:center;gap:12px;min-height:90px;background:repeating-linear-gradient(135deg,#fbfcfd 0 9px,#f8fafb 9px 10px);border:1px dashed #dbe6ea;border-radius:6px}
body.page-friends .vf-empty>span{font-size:28px;color:#e2bb65}
body.page-friends .vf-empty strong,body.page-friends .vf-empty small{display:block}
body.page-friends .vf-empty strong{color:#6d8190;font:900 12px 'Nunito'}
body.page-friends .vf-empty small{color:#9baab3;font-size:10px}
body.page-friends .vf-details{margin-top:10px;border-top:1px dashed #e0e9ed;padding-top:8px}
body.page-friends .vf-details summary{cursor:pointer;width:max-content;max-width:100%;font-size:10px;font-weight:800;color:#3b8a93}
body.page-friends .vf-details-body{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
body.page-friends .vf-add-person{border:1px solid #cfe1e5;border-radius:4px;background:#f3faf9;padding:5px 9px;font-size:10px;color:#377b83;font-weight:800;cursor:pointer}
body.page-friends .vf-add-person:hover{background:#e2f3f0}
body.page-friends .vf-manage summary{color:#8298a5}
body.page-friends .vf-inline-form{display:flex;gap:6px;align-items:center}
body.page-friends .vf-inline-form input{width:160px}
body.page-friends .vf-text-danger{border:0;background:transparent;color:#cb6b69;font-size:10px;font-weight:800;cursor:pointer}
body.page-friends .vf-side-panel .panel-heading{min-height:38px}
body.page-friends .vf-side-body{padding:13px}
body.page-friends .vf-aside-empty{padding:12px 8px;text-align:center;color:#98a7af;font-size:10px}
body.page-friends .vf-request{padding:0 0 12px;margin-bottom:12px;border-bottom:1px dashed #e4eaed}
body.page-friends .vf-request:last-child{margin-bottom:0;padding-bottom:0;border:0}
body.page-friends .vf-request>a{font:900 13px 'Nunito';color:#356b85}
body.page-friends .vf-request small{display:block;color:#8a9ba6;font-size:10px;margin:2px 0 8px}
body.page-friends .vf-request-actions{display:flex;gap:6px}
body.page-friends .vf-btn{border-radius:5px;padding:7px 10px;border:1px solid transparent;font-size:10px;font-weight:900;cursor:pointer;white-space:nowrap}
body.page-friends .vf-btn-teal{color:#fff;background:linear-gradient(#43b2a9,#278f8e);border-color:#258986}
body.page-friends .vf-btn-blue{color:#fff;background:linear-gradient(#3b91b2,#286c91);border-color:#286c91}
body.page-friends .vf-btn-plain{color:#5e8090;background:linear-gradient(#fff,#f0f5f7);border-color:#d1e0e6}
body.page-friends .vf-side-subheading{padding:9px 13px;background:#f7fafb;border-top:1px solid #e8eef1;border-bottom:1px solid #e8eef1;color:#8298a5;font-size:9px;font-weight:900;letter-spacing:.06em}
body.page-friends .vf-outgoing{display:flex;justify-content:space-between;align-items:center;gap:7px;margin:0 0 9px;font-size:11px}
body.page-friends .vf-outgoing:last-child{margin-bottom:0}
body.page-friends .vf-outgoing a{font-weight:800}
body.page-friends .vf-outgoing button{border:0;background:transparent;color:#c87575;font-size:10px;cursor:pointer}
body.page-friends .vf-side-intro{margin:0 0 12px;font-size:11px;color:#788c99;line-height:1.6}
body.page-friends .vf-create-form{display:flex;flex-direction:column;align-items:stretch;gap:7px}
body.page-friends .vf-create-form label{font-size:10px;font-weight:900;color:#526f81}
body.page-friends .vf-create-form input,body.page-friends .vf-inline-form input{min-width:0;border:1px solid #d4e2e8;border-radius:5px;background:#fbfcfd;padding:8px 9px;font:11px 'DM Sans',sans-serif;color:#344957}
body.page-friends .vf-create-form input:focus,body.page-friends .vf-inline-form input:focus{outline:2px solid #c2e7e4}
body.page-friends .vf-postcard{position:relative;overflow:hidden;padding:18px 17px 16px;border:1px solid #eed9b8;border-radius:7px;background:linear-gradient(130deg,#fff7e5,#f7e6d6 60%,#e7f3ef);box-shadow:var(--shadow)}
body.page-friends .vf-postcard:before{content:"♡";position:absolute;right:10px;bottom:-30px;font:900 120px 'Nunito';color:#e7b9a250;transform:rotate(-14deg)}
body.page-friends .vf-postcard-stamp{display:block;margin-bottom:9px;font-size:9px;font-weight:900;letter-spacing:.15em;color:#bb9260}
body.page-friends .vf-postcard strong{position:relative;display:block;font:900 16px 'Nunito';color:#9a6853}
body.page-friends .vf-postcard p{position:relative;margin:6px 0 0;color:#947969;font-size:11px;line-height:1.65}
body.page-friends .vf-about{text-align:center}
body.page-friends .vf-about-heart{display:block;font-size:34px;color:#e78093}
body.page-friends .vf-about strong{display:block;color:#3b718b;font:900 13px 'Nunito'}
body.page-friends .vf-about p{font-size:11px;color:#8a9aa4}
body.page-friends .vf-about a{font-size:10px;font-weight:800}
body.page-friends .vf-message{margin:0 0 13px;padding:11px 14px;border-radius:5px;font-size:11px;font-weight:800}
body.page-friends .vf-success{background:#e7f6ee;color:#3d8b68;border:1px solid #bde2cc}
body.page-friends .vf-error{background:#fff0ee;color:#ba6258;border:1px solid #f0c7c0}
body.page-friends .vf-muted{color:#8c9ba5;font-size:10px}


/* Playarea VÄNNER – godkänd design. Tillägg till befintlig style.css. */
body.page-friends .lfv{width:100%}
body.page-friends .lfv-banner{min-height:118px;margin-bottom:12px}
body.page-friends .lfv-banner-symbol{background:linear-gradient(145deg,#ef8b80,#ef6684);box-shadow:0 3px 10px #d7a7aa66;transform:rotate(-5deg)}
body.page-friends .lfv-banner-stats{margin-left:auto;display:flex;gap:10px}
body.page-friends .lfv-banner-stats div{min-width:78px;padding:8px 11px;text-align:center;background:#ffffffb8;border:1px solid #d3e6e5;border-radius:6px}
body.page-friends .lfv-banner-stats b{display:block;font:900 21px/1.1 'Nunito';color:#2d7594}
body.page-friends .lfv-banner-stats small{display:block;font-size:9px;font-weight:800;color:#8597a1}
body.page-friends .lfv-breadcrumb{display:flex;justify-content:space-between;margin:0 3px 14px;color:#92a0a9;font-size:10px}
body.page-friends .lfv-breadcrumb a{font-weight:800}
body.page-friends .lfv-columns{display:grid;grid-template-columns:minmax(0,1fr) 274px;gap:17px;align-items:start}
body.page-friends .lfv-left,body.page-friends .lfv-right{display:flex;flex-direction:column;gap:14px;min-width:0}
body.page-friends .lfv-panel-heading{min-height:37px;padding:0 13px}
body.page-friends .lfv-heading-title{display:flex;align-items:center;gap:8px}
body.page-friends .lfv-heading-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:#e6f4f2;color:#2e9e99;font-size:14px;letter-spacing:0}
body.page-friends .lfv-heading-coral{background:#fdebe9;color:#e47775}
body.page-friends .lfv-toolbar{display:flex;gap:8px;align-items:center;padding:12px 13px;border-bottom:1px solid #edf1f3;background:#fcfdfd}
body.page-friends .lfv-toolbar input{width:100%;padding:9px 12px;border:1px solid #dbe6eb;border-radius:5px;outline:0;background:#fff;font-size:11px}
body.page-friends .lfv-toolbar input:focus{border-color:#7ec7c2;box-shadow:0 0 0 3px #e5f5f3}
body.page-friends .lfv-hint{margin:0;padding:9px 13px 0;color:#9aa8af;font-size:10px}
body.page-friends .lfv-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;padding:13px}
body.page-friends .lfv-friend{min-width:0;text-align:center;position:relative;padding:12px 7px 9px;background:linear-gradient(#fff,#f8fbfc);border:1px solid #e1e9ee;border-radius:7px;transition:transform .15s,border-color .15s,box-shadow .15s}
body.page-friends .lfv-friend:hover{transform:translateY(-2px);border-color:#b1d5d9;box-shadow:0 5px 12px #345b701a}
body.page-friends .lfv-friend[hidden]{display:none!important}
body.page-friends .lfv-portrait{display:block;position:relative;width:78px;height:78px;margin:0 auto 7px;border:3px solid #fff;border-radius:9px;outline:1px solid #d9e3e8;box-shadow:0 2px 5px #cad9e1;overflow:hidden}
body.page-friends .lfv-portrait img{width:100%;height:100%;display:block;object-fit:cover;border-radius:6px}
body.page-friends .lfv-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.page-friends .lfv-name a{font:900 13px 'Nunito';color:#356b85}
body.page-friends .lfv-subtitle{margin:2px 0 8px;font-size:9px;color:#9ba7ae}
body.page-friends .lfv-friend-actions{display:flex;justify-content:center;gap:5px;padding-top:8px;border-top:1px dashed #e6ebee}
body.page-friends .lfv-friend-actions form{margin:0}
body.page-friends .lfv-friend-actions button,body.page-friends .lfv-friend-actions a{display:grid;place-items:center;width:26px;height:24px;border:1px solid #d9e5e9;border-radius:4px;background:#fff;color:#668a9c;font-size:12px;line-height:1;text-decoration:none}
body.page-friends .lfv-friend-actions button:hover,body.page-friends .lfv-friend-actions a:hover{background:#e8f6f4;color:#2e9e99}
body.page-friends .lfv-empty[hidden]{display:none!important}
body.page-friends .lfv-empty{text-align:center;padding:30px;color:#8c9ba5;font-size:12px}
body.page-friends .lfv-empty span{display:block;font-size:30px;color:#e88090}
body.page-friends .lfv-empty strong,body.page-friends .lfv-empty small{display:block}
body.page-friends .lfv-foot{font-weight:500;color:#98a5ad}
body.page-friends .lfv-group-intro{margin:0;padding:12px 13px 6px;color:#7b8e9a;font-size:10.5px;line-height:1.6}
body.page-friends .lfv-group-list{padding:4px 10px 10px}
body.page-friends .lfv-group-row{position:relative;display:flex;align-items:center}
body.page-friends .lfv-group{display:flex;align-items:center;gap:9px;width:100%;padding:9px 7px;border:1px solid transparent;border-radius:6px;background:transparent;text-align:left;color:#486879;transition:background .15s}
body.page-friends .lfv-group:hover{background:#f4f9fa}
body.page-friends .lfv-group.is-selected{background:#eaf5f5;border-color:#c8e5e2}
body.page-friends .lfv-group-icon{display:grid;place-items:center;width:33px;height:33px;flex:0 0 33px;border-radius:7px;background:#eaf2f7;color:#347b9b;font-size:17px}
body.page-friends .lfv-icon-basta-vanner{background:#fde9e5;color:#dc746b}
body.page-friends .lfv-icon-familj{background:#fff1d2;color:#b99232}
body.page-friends .lfv-icon-kompisar{background:#e0f4ed;color:#3b9a76}
body.page-friends .lfv-icon-nya-vanner{background:#e6eefb;color:#6d86b5}
body.page-friends .lfv-group-info{min-width:0;flex:1}
body.page-friends .lfv-group-info strong{display:block;font:900 12px 'Nunito';color:#3c6277;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.page-friends .lfv-group-info small{display:block;font-size:9px;color:#9aa7af}
body.page-friends .lfv-group-total{background:#fff;border:1px solid #e0e9ed;border-radius:9px;padding:2px 7px;color:#6f8a98;font-size:10px;font-weight:900}
body.page-friends .lfv-group-settings{flex:0 0 23px;margin-left:1px;border:0;background:transparent;color:#8ca1ac;font-size:13px;padding:5px 2px}
body.page-friends .lfv-group-settings:hover{color:#2e9e99}
body.page-friends .lfv-group-add{display:block;margin:0 14px 13px;padding:8px 11px;border:1px dashed #b9d8d6;border-radius:5px;background:#f4fbfa;color:#3c8e8a;font-size:10px;font-weight:900;width:calc(100% - 28px)}
body.page-friends .lfv-request{display:flex;gap:9px;padding:11px 12px;border-bottom:1px solid #eef2f4}
body.page-friends .lfv-request-avatar{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;background:#e6c6aa;color:#fff;font:900 17px 'Nunito';border-radius:7px;border:2px solid white;outline:1px solid #d9e3e8}
body.page-friends .lfv-request-main{min-width:0;flex:1}
body.page-friends .lfv-request-main strong{display:block;color:#3c6c86;font:900 12px 'Nunito'}
body.page-friends .lfv-request-main small{display:block;color:#9aa7ae;font-size:10px}
body.page-friends .lfv-request-actions{display:flex;gap:5px;margin-top:7px}
body.page-friends .lfv-request-actions form{margin:0}
body.page-friends .lfv-btn{padding:6px 9px;border:1px solid #d4e2e7;border-radius:5px;background:linear-gradient(#fff,#f1f7f9);font-size:10px;font-weight:900;color:#587d8e;cursor:pointer}
body.page-friends .lfv-btn-teal{background:linear-gradient(#43b2a9,#278f8e);border-color:#258986;color:white}
body.page-friends .lfv-request-empty{padding:15px;color:#8b9da6;font-size:11px}
body.page-friends .lfv-outgoing-title{padding:9px 12px;background:#f7fafb;border-top:1px solid #e8eef1;border-bottom:1px solid #e8eef1;color:#8298a5;font-size:9px;font-weight:900;letter-spacing:.06em}
body.page-friends .lfv-outgoing{display:flex;justify-content:space-between;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid #eef2f4;font-size:11px}
body.page-friends .lfv-outgoing a{font-weight:800}
body.page-friends .lfv-outgoing button{border:0;background:transparent;color:#c87575;font-size:10px;cursor:pointer}
body.page-friends .lfv-note{padding:13px;background:linear-gradient(125deg,#fff9ec,#f6f5ed);border:1px solid #efdfbd;border-radius:6px;color:#94775b;font-size:10.5px}
body.page-friends .lfv-note strong{display:block;margin-bottom:3px;font:900 13px 'Nunito';color:#9b7352}
body.page-friends .lfv-alert{padding:11px 14px;margin:0 0 13px;border-radius:5px;font-size:11px;font-weight:800}
body.page-friends .lfv-alert-ok{background:#e7f6ee;color:#3d8b68;border:1px solid #bde2cc}
body.page-friends .lfv-alert-error{background:#fff0ee;color:#ba6258;border:1px solid #f0c7c0}
body.page-friends .lfv-modal[hidden]{display:none!important}
body.page-friends .lfv-modal{position:fixed;inset:0;display:grid;place-items:center;background:#20384c80;z-index:200}
body.page-friends .lfv-dialog{width:390px;background:white;border:1px solid #cbdce4;border-radius:9px;box-shadow:0 20px 60px #1c334d55;overflow:hidden}
body.page-friends .lfv-dialog h2{margin:0;padding:13px 16px;background:#f3f8fa;border-bottom:1px solid #dce6eb;font:900 16px 'Nunito';color:#366782}
body.page-friends .lfv-dialog-body{padding:16px}
body.page-friends .lfv-dialog-body p{font-size:11px;color:#7d8f9a;margin:0 0 12px}
body.page-friends .lfv-dialog-body>div>input{width:100%;padding:9px;border:1px solid #d4e3e8;border-radius:5px}
body.page-friends .lfv-dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;background:#fbfcfd;border-top:1px solid #edf1f3}
body.page-friends .lfv-check-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px;color:#4b7083}
body.page-friends .lfv-check-row input{width:auto}
body.page-friends .lfv-delete-group{display:block;margin-top:12px;border:0;background:transparent;padding:4px 0;color:#ca6e6e;font-size:11px;font-weight:800}

/* Playarea – enbart vänknappar på profilsidan. Påverkar inte vänsidans layout. */
.page-profile .lajv-profile-friend-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 11px 16px;
  background: #f8fbfc;
  border-top: 1px solid #e3e9ed;
}
.page-profile .lajv-profile-friend-actions form { margin: 0; }
.page-profile .lajv-friend-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 33px;
  padding: 7px 13px;
  border: 1px solid #c4dedb;
  border-radius: 6px;
  font: 800 11px/1.3 'Nunito', Arial, sans-serif;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.35), 0 2px 0 rgba(25,55,72,.07);
  transition: filter .15s, transform .15s;
}
.page-profile .lajv-friend-btn:hover { filter: brightness(1.04); transform: translateY(-1px); }
.page-profile .lajv-friend-btn.is-primary {
  color: #fff;
  background: linear-gradient(#43b2a9, #278f8e);
  border-color: #258986;
}
.page-profile .lajv-friend-btn.is-light {
  color: #4c8287;
  background: linear-gradient(#fff, #f1f8f6);
  border-color: #c4dedb;
}
.page-profile .lajv-friend-state {
  display: inline-flex;
  align-items: center;
  min-height: 33px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #fff8e7;
  color: #856c3c;
  font: 800 11px 'Nunito', Arial, sans-serif;
}
.page-profile .lajv-friend-state.is-friends { background: #e6f5ee; color: #287c5b; }
.page-profile .lajv-friend-feedback {
  padding: 9px 16px;
  border-top: 1px solid #cbe6d8;
  background: #effaf3;
  color: #287c5b;
  font-size: 11px;
  font-weight: 700;
}
.page-profile .lajv-friend-feedback.is-error {
  border-color: #f0c8c8;
  background: #fff0f0;
  color: #aa4242;
}


/* Playarea – tillfälligt placeringstest för vänknappen, endast profilsidan */
.page-profile .lajv-friend-name-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.page-profile .lajv-friend-placement{border:0;background:transparent;padding:0;gap:6px;flex-wrap:wrap}
.page-profile .lajv-friend-placement .lajv-placement-label{font:900 9px 'Nunito',sans-serif;letter-spacing:.04em;color:#718995;background:#eef4f6;border:1px solid #d7e5e9;padding:3px 5px;border-radius:4px;white-space:nowrap}
.page-profile .lajv-friend-placement-1{display:inline-flex;max-width:100%}
.page-profile .lajv-friend-placement-1 .lajv-friend-btn{min-height:30px;padding:5px 10px}
.page-profile .lajv-friend-placement-2{display:flex;margin-top:9px}
.page-profile .profile-cover{position:relative}
.page-profile .lajv-friend-placement-3{position:absolute;right:14px;bottom:12px;z-index:5;max-width:calc(100% - 28px);justify-content:flex-end}
.page-profile .lajv-friend-placement-3 .lajv-placement-label{background:#fff;}
.page-profile .lajv-placement-note{padding:5px 15px;background:#fff8e8;border-bottom:1px solid #f1e2ba;color:#8a7041;font:700 10px 'Nunito',sans-serif}

/* Playarea – diskret vänknapp på omslagsbilden (alternativ 3) */
.page-profile .lajv-friend-placement-3.lajv-friend-subtle {
  right: 12px; bottom: 10px; gap: 5px;
}
.page-profile .lajv-friend-subtle .lajv-friend-btn {
  min-height: 26px; padding: 4px 9px; border-radius: 5px;
  font: 800 10px/1.25 'Nunito', Arial, sans-serif;
  box-shadow: 0 1px 3px rgba(30,60,70,.08);
}
.page-profile .lajv-friend-subtle .lajv-friend-btn.is-primary {
  color: #326e73; background: rgba(255,255,255,.86);
  border-color: rgba(130,178,179,.65);
}
.page-profile .lajv-friend-subtle .lajv-friend-btn.is-light {
  color: #627c85; background: rgba(255,255,255,.76);
  border-color: rgba(180,202,205,.65);
}
.page-profile .lajv-friend-subtle .lajv-friend-btn:hover {
  background: #fff; filter: none;
}
.page-profile .lajv-friend-subtle .lajv-friend-state {
  min-height: 26px; padding: 4px 8px;
  font: 800 10px 'Nunito', Arial, sans-serif;
  background: rgba(255,255,255,.85); color: #6c7378;
}
.page-profile .lajv-friend-subtle .lajv-friend-state.is-friends {
  background: rgba(238,250,243,.88); color: #427c64;
}
.login-error {
    transition: opacity .25s ease;
    background: #fff1ef;
    border: 1px solid #efc6c0;
    border-radius: 5px;
    padding: 12px 14px;
    margin-bottom: 14px;
    color: #744b49;
}
.login-error.is-dismissing{opacity:0}
.lajv-announcement-preview{display:flex;align-items:center;gap:12px;padding:12px 16px;margin:0 0 16px;border:1px solid #ebdfc6;border-left:3px solid #d6b467;border-radius:6px;background:linear-gradient(105deg,#fff8e9,#fffdf7 65%,#f4faf7);color:#6b716e}
.lajv-announcement-preview__icon{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:9px;background:#f7e9c5;color:#b58b3b;font-size:18px}
.lajv-announcement-preview__copy{min-width:0;flex:1}
.lajv-announcement-preview__label{display:block;margin-bottom:3px;font-size:8px;font-weight:800;letter-spacing:1px;color:#a18b60}
.lajv-announcement-preview__copy strong{display:block;font:800 13px/1.4 'Nunito',sans-serif;color:#6e674f}
.lajv-announcement-preview__copy p{margin:3px 0 0;font-size:11px;line-height:1.5;color:#878271}
.lajv-announcement-preview__test{align-self:flex-start;padding:3px 7px;border:1px solid #e8e3d8;border-radius:4px;color:#a29987;background:#fffaf2;font-size:9px;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.login-error{transition:none}}

.login-error strong {
    display: block;
    color: #a83f38;
    font-size: 14px;
    margin-bottom: 4px;
}

.login-error small {
    display: block;
    font-size: 11px;
    line-height: 1.5;
}

/* =========================================================
   Playarea — Vänner, godkänd design (Claude-prototyp)
   ========================================================= */


.lfv-new .panel{background:var(--paper);border:1px solid #d9e2e7;border-radius:7px;box-shadow:var(--shadow);overflow:hidden}


.lfv-new .panel-heading{min-height:35px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:linear-gradient(#fff,#f7f9fa);border-bottom:1px solid #e3e9ed;color:#52687a;font-size:10px;font-weight:900;letter-spacing:.065em}


.lfv-new .panel-heading small{color:#94a1aa;font:500 10px "DM Sans";letter-spacing:0}


.lfv-new .panel-heading.sub{min-height:26px;background:#f3f8fa;font-size:9px;color:#8ba0ae;border-top:1px solid #e3e9ed}


.lfv-new .panel-foot{padding:8px 12px;border-top:1px solid #edf0f2;background:#fbfcfd;text-align:center;font-size:10px;font-weight:700}


.lfv-new .tiny-count{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;margin-left:4px;border-radius:5px;background:#e4eef3;color:#4c8199;font-size:9px;letter-spacing:0}


.lfv-new .coral-count{background:#fde7e1;color:#d97769}


.lfv-new .button{border:1px solid transparent;border-radius:5px;padding:8px 12px;font-size:11px;font-weight:800;transition:transform .12s,filter .12s;box-shadow:inset 0 1px rgba(255,255,255,.24),0 2px 0 rgba(25,55,72,.09)}


.lfv-new .button:hover{filter:brightness(1.04);transform:translateY(-1px)}


.lfv-new .button:active{transform:translateY(1px)}


.lfv-new .button-teal{color:#fff;background:linear-gradient(#43b2a9,#278f8e);border-color:#258986}


.lfv-new .button-coral{color:#fff;background:linear-gradient(#f18d7b,#dc6b5e);border-color:#d86a5d}


.lfv-new .button-light{color:#4c8287;background:linear-gradient(#fff,#f1f8f6);border-color:#c4dedb}


.lfv-new .tiny-avatar{position:relative;display:grid;place-items:center;flex:0 0 auto;border-radius:7px;color:#fff;font:900 13px "Nunito",sans-serif}



/* =========================================================
   VÄNSIDAN
   ========================================================= */


.lfv-new .crumbs{margin:0 2px 10px;color:#93a0aa;font-size:10px}


.lfv-new .crumbs a{font-weight:700}


.lfv-new .crumbs span{padding:0 5px;color:#c0cad0}



/* banner i samma höstton som välkomstbandet */


.lfv-new .friends-band{
  position:relative;overflow:hidden;margin-bottom:18px;padding:17px 22px 16px;
  border:1px solid #c8e2e0;border-radius:8px;box-shadow:var(--shadow);
  background:linear-gradient(115deg,#d9f0ed 0%,#e6f3f2 50%,#f8e9c5 100%);
}


.lfv-new .friends-band:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 15% 20%,rgba(255,239,205,.85),transparent 42%),
             repeating-linear-gradient(45deg,transparent 0 10px,rgba(255,255,255,.08) 10px 11px)}


.lfv-new .band-copy{position:relative;z-index:2}


.lfv-new .eyebrow{color:#9a6846;font-size:9px;font-weight:900;letter-spacing:.13em}


.lfv-new .friends-band h1{margin:5px 0 4px;font:900 27px/1.1 "Nunito",sans-serif;color:#59483c;letter-spacing:-.6px}


.lfv-new .friends-band h1 span{color:#b96545}


.lfv-new .friends-band p{margin:0;color:#78675a;font-size:11.5px}


.lfv-new .band-art{position:absolute;right:0;top:0;bottom:0;width:360px;overflow:hidden}


.lfv-new .band-art .sun{position:absolute;width:56px;height:56px;border-radius:50%;right:150px;top:14px;background:linear-gradient(145deg,#f4cf78,#e89a59);box-shadow:0 0 0 9px rgba(255,239,205,.3)}


.lfv-new .band-art .hill{position:absolute;bottom:-60px;width:230px;height:120px;border-radius:50% 50% 0 0}


.lfv-new .band-art .hill-back{right:-40px;background:#b7a47b;transform:rotate(-12deg)}


.lfv-new .band-art .hill-front{right:70px;bottom:-72px;background:#788568;transform:rotate(15deg)}


.lfv-new .band-art .star{position:absolute;color:#d18a4e;text-shadow:0 1px 2px rgba(255,244,220,.8)}


.lfv-new .band-art .s1{top:14px;left:70px;font-size:18px}


.lfv-new .band-art .s2{top:58px;right:96px;font-size:16px}


.lfv-new .band-art .s3{top:34px;left:132px;font-size:11px}


.lfv-new .band-art .tag{position:absolute;right:28px;top:22px;z-index:3;padding:5px 9px;background:#fff9ed;border-radius:6px 6px 6px 1px;box-shadow:0 2px 0 #dfc9a9;color:#9a6042;font:800 10px "Nunito";transform:rotate(4deg)}



.lfv-new .home-grid{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:18px;align-items:start}


.lfv-new .home-main, .lfv-new .home-side{min-width:0;display:flex;flex-direction:column}


.lfv-new .home-side{gap:14px}



/* verktygsrad */


.lfv-new .toolbar{display:flex;align-items:center;gap:8px;padding:10px 12px;background:linear-gradient(#fff,#f9fbfc);border-bottom:1px solid #e3e9ed}


.lfv-new .toolbar input, .lfv-new .toolbar select{min-height:32px;padding:6px 11px;border:1px solid #dfe7eb;border-radius:5px;outline:0;background:#fbfcfd;color:var(--ink);font-size:11.5px;transition:border-color .15s,box-shadow .15s,background .15s}


.lfv-new .toolbar input{flex:1;min-width:0}


.lfv-new .toolbar select{width:190px;cursor:pointer;color:#5d7180;font-weight:600}


.lfv-new .toolbar input:hover, .lfv-new .toolbar select:hover{border-color:#bcd3da}


.lfv-new .toolbar input:focus, .lfv-new .toolbar select:focus{border-color:#8bc7ca;background:#fff;box-shadow:0 0 0 3px #e3f5f3}


.lfv-new .toolbar .shown{white-space:nowrap;color:#93a0aa;font-size:10px}


.lfv-new .toolbar .shown b{color:#60798b}



/* relationsgrupper – kompakta */


.lfv-new .groups{padding:12px;background:radial-gradient(circle at 92% 0%,rgba(241,199,93,.16),transparent 12rem),repeating-linear-gradient(45deg,rgba(255,255,255,.55) 0 1px,transparent 1px 9px),linear-gradient(160deg,#fffdf7,#f2f8f7)}


.lfv-new [data-rel]{--c:#2e9e99;--bg1:#dcf1ef;--bg2:#f3fbfa;--line-c:#cde6e3}


.lfv-new [data-rel="partner"]{--c:#ed7969;--bg1:#fde8e5;--bg2:#fff7f5;--line-c:#f3d3ce}


.lfv-new [data-rel="basta"]{--c:#dfa43a;--bg1:#fcefcf;--bg2:#fffaf0;--line-c:#efdfb8}


.lfv-new [data-rel="nara"]{--c:#2e9e99;--bg1:#dcf1ef;--bg2:#f3fbfa;--line-c:#cde6e3}


.lfv-new [data-rel="internet"]{--c:#3b91b2;--bg1:#dcedf5;--bg2:#f3f9fc;--line-c:#cfe2ec}


.lfv-new [data-rel="gaming"]{--c:#58a278;--bg1:#e0f1e7;--bg2:#f4fbf7;--line-c:#d0e6d9}


.lfv-new [data-rel="van"]{--c:#8a84c3;--bg1:#e9e6f6;--bg2:#f7f6fc;--line-c:#dcd8ee}



.lfv-new .group{margin-bottom:10px;background:#fff;border:1px solid var(--line-c);border-radius:5px;overflow:hidden;box-shadow:0 1px 2px rgba(41,56,75,.05)}


.lfv-new .group:last-child{margin-bottom:0}


.lfv-new .group-head{display:flex;align-items:center;gap:7px;padding:5px 10px 5px 9px;min-height:29px;background:linear-gradient(90deg,var(--bg1),var(--bg2) 85%);border-bottom:1px solid var(--line-c);border-left:3px solid var(--c)}


.lfv-new .group-head .emoji{display:grid;place-items:center;width:19px;height:19px;background:#fff;border:1px solid var(--line-c);border-radius:50%;font-size:11px;line-height:1;box-shadow:0 1px 1px rgba(41,56,75,.08)}


.lfv-new .group-head strong{font:900 12px/1.15 "Nunito",sans-serif;letter-spacing:.3px;color:color-mix(in srgb,var(--c) 55%,#1f3447);text-shadow:0 1px 0 rgba(255,255,255,.8)}


.lfv-new .group-head:before{content:"";order:2;flex:1;margin:0 4px 0 6px;border-top:1px dotted color-mix(in srgb,var(--c) 45%,#fff)}


.lfv-new .group-head:after{content:"✦";order:3;font-size:9px;color:var(--c);opacity:.6}



.lfv-new .group table{width:100%;border-collapse:collapse;table-layout:fixed}


.lfv-new .group td{padding:3px 8px;font-size:11px;line-height:1.15;vertical-align:middle;border-top:1px solid #edf1f3;transition:background .12s}


.lfv-new .group tr:first-child td{border-top:0}


.lfv-new .group tr:nth-child(even) td{background:#fbfdfd}


.lfv-new .group tr:hover td{background:color-mix(in srgb,var(--bg1) 55%,#fff)}


.lfv-new .group tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--c)}


.lfv-new .person{display:flex;gap:7px;align-items:center;min-width:0}


.lfv-new .person .avatar{width:23px;height:23px;flex:0 0 23px;border-radius:3px;display:grid;place-items:center;color:#fff;font:900 11px/1 "Nunito";
  background-image:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%,rgba(0,0,0,.12));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 1px 2px rgba(41,56,75,.25);text-shadow:0 1px 1px rgba(0,0,0,.22)}


.lfv-new .person strong{font:800 11px/1.1 "Nunito";color:var(--blue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


.lfv-new .group tr:hover .person strong{color:#1d5878;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--c) 60%,#fff);text-underline-offset:2px}


.lfv-new .desc{font:600 10px/1.2 "Nunito";color:#596d79;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


.lfv-new .desc.none{color:#a5b2ba;font-style:italic;font-weight:500}


.lfv-new .pill{display:inline-block;padding:2px 6px;border-radius:3px;font:900 9px/1.2 "Nunito";letter-spacing:.2px;background:linear-gradient(#eefaf5,#e0f3ea);color:#27836b;border:1px solid #c6e6d9}


.lfv-new .pill.no{background:#f4f6f7;color:#8a98a3;border-color:#e3e8eb}


.lfv-new .row-actions{display:flex;align-items:center;justify-content:flex-end;gap:3px}


.lfv-new .edit{padding:2px 6px;font:800 9px/1.2 "Nunito",Arial,sans-serif;border-radius:3px;color:#39758d;background:linear-gradient(#fff,#f1f6f8);border:1px solid #d3e2e8;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 1px rgba(41,56,75,.06);transition:background .12s,color .12s,border-color .12s}


.lfv-new .edit:hover{color:#fff;background:linear-gradient(#3b91b2,#2c7ba0);border-color:var(--blue-bottom)}


.lfv-new .edit.del:hover{background:linear-gradient(#f18d7b,#dc6b5e);border-color:#d86a5d}


.lfv-new .edit:active{transform:translateY(1px)}


.lfv-new .edit:focus-visible{outline:2px solid rgba(46,158,153,.45);outline-offset:1px}


.lfv-new .group tr.flash td{animation:flash 1.4s ease-out}


@keyframes flash{0%{background:#fff3c4}100%{background:inherit}}



.lfv-new .empty{margin:12px;padding:26px;text-align:center;background:#fff;border:1px dashed #c9d9df;border-radius:6px;color:#8796a0;font-weight:700}



/* sidokolumn */


.lfv-new .stat-grid{display:grid;grid-template-columns:1fr 1fr}


.lfv-new .stat-grid div{padding:9px 12px;border-bottom:1px solid #f0f3f5;border-left:1px solid #f0f3f5}


.lfv-new .stat-grid div:nth-child(odd){border-left:0}


.lfv-new .stat-grid div:nth-last-child(-n/**/+2){border-bottom:0}


.lfv-new .stat-grid b{display:block;color:var(--blue);font:900 18px/1.15 "Nunito",sans-serif}


.lfv-new .stat-grid small{color:#94a1aa;font-size:9px;font-weight:700;letter-spacing:.03em}


.lfv-new .stat-grid .hl b{color:#e0705f}


.lfv-new .req{display:flex;align-items:center;gap:9px;padding:8px 11px;border-bottom:1px solid #f0f3f5;transition:opacity .25s,transform .25s}


.lfv-new .req.out{opacity:0;transform:translateX(14px)}


.lfv-new .req:last-of-type{border-bottom:0}


.lfv-new .req .tiny-avatar{width:32px;height:32px;font-size:14px;border:2px solid #fff;outline:1px solid #dce5e9}


.lfv-new .req div{min-width:0;flex:1}


.lfv-new .req b{display:block;color:#4c7890;font-size:10.5px}


.lfv-new .req small{display:block;color:#9aa6ae;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


.lfv-new .req-btns{display:flex;gap:3px;flex:0 0 auto}


.lfv-new .req-btns .edit{padding:3px 7px;font-size:9.5px}


.lfv-new .req-btns .edit.ok:hover{background:linear-gradient(#43b2a9,#278f8e);border-color:#258986}


.lfv-new .req-empty{padding:14px 12px;text-align:center;color:#a0abb2;font-size:10.5px}



/* dialogrutor */


.lfv-new dialog{padding:0;border:0;border-radius:8px;width:440px;color:var(--ink);background:#fff;box-shadow:0 18px 50px rgba(10,25,35,.45);overflow:hidden}


.lfv-new dialog::backdrop{background:rgba(20,38,50,.62)}


.lfv-new dialog[open]{animation:pop .18s ease-out}


@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}}


.lfv-new .dlg-head{position:relative;display:flex;align-items:center;gap:11px;padding:14px 16px;border-left:4px solid var(--c);background:linear-gradient(110deg,var(--bg1),var(--bg2) 60%,#fbf0d4);border-bottom:1px solid var(--line-c)}


.lfv-new .dlg-head .tiny-avatar{width:40px;height:40px;font-size:18px;border:3px solid #fff;outline:1px solid var(--line-c);border-radius:6px;box-shadow:0 2px 5px rgba(35,64,82,.15);transform:rotate(-3deg)}


.lfv-new .dlg-head h2{margin:0;font:900 16px "Nunito",sans-serif;color:#2e4f65}


.lfv-new .dlg-head p{margin:1px 0 0;color:#7b8c98;font-size:11px}


.lfv-new .dlg-head:after{content:"✦ ♡";position:absolute;right:16px;top:10px;color:var(--c);opacity:.4;font-size:20px}


.lfv-new .dlg-body{display:flex;flex-direction:column;gap:11px;padding:14px 16px;background:linear-gradient(180deg,#fffdf6,#fff 50%)}


.lfv-new .dlg-body p{margin:0;color:#687887;font-size:12px;line-height:1.6}


.lfv-new .dlg-body label, .lfv-new .dlg-label{color:#52687a;font-size:9px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}


.lfv-new .dlg-body select, .lfv-new .dlg-body textarea{display:block;width:100%;margin-top:4px;padding:8px 11px;border:1px solid #dfe7eb;border-radius:5px;background:#fbfcfd;color:var(--ink);font:500 12px "DM Sans",Arial,sans-serif;outline:0;transition:border-color .15s,box-shadow .15s}


.lfv-new .dlg-body textarea{min-height:74px;resize:vertical;line-height:1.5}


.lfv-new .dlg-body select:focus, .lfv-new .dlg-body textarea:focus{border-color:#8bc7ca;background:#fff;box-shadow:0 0 0 3px #e3f5f3}


.lfv-new .counter{text-align:right;margin-top:2px;color:#93a0aa;font-size:10px}


.lfv-new .seg{display:flex;gap:6px;margin-top:4px}


.lfv-new .seg input{position:absolute;opacity:0;pointer-events:none}


.lfv-new .seg label{display:block;flex:1;padding:7px 10px;text-align:center;border:1px solid #d6e5e6;border-radius:5px;background:#fff;color:#7b8c98;font:800 11px "Nunito";letter-spacing:0;text-transform:none;cursor:pointer;transition:all .12s}


.lfv-new .seg label:hover{border-color:#8bc7ca}


.lfv-new .seg input:checked+label{background:linear-gradient(#eefaf5,#e0f3ea);border-color:#9fd3b6;color:#27836b}


.lfv-new .seg input#irl-no:checked+label{background:#f4f6f7;border-color:#cdd6db;color:#6d7e89}


.lfv-new .seg input:focus-visible+label{outline:2px solid rgba(46,158,153,.45);outline-offset:1px}


.lfv-new .dlg-foot{display:flex;justify-content:flex-end;gap:7px;padding:10px 16px;border-top:1px solid #edf0f2;background:#fbfcfd}


.lfv-new .dlg-foot .button{padding:7px 13px}


.lfv-new .broken{display:inline-block;font-size:30px;margin-bottom:2px}




/* Playarea vänner: Laravel-integrering av den godkända Claude-prototypen */
.lfv-new { margin-top: 0; }
.lfv-new [hidden] { display:none!important; }
.lfv-new .friends-band .band-copy { padding:0; }
.lfv-new .friends-band .band-art { position:absolute; }
.lfv-new .home-main { gap:0; }
.lfv-new .person .avatar { object-fit:cover; display:block; }
.lfv-new .group .row-actions form, .lfv-new .req form { margin:0; }
.lfv-new .group .row-actions { justify-content:flex-end; }
.lfv-new .req > .req-info { flex:1; min-width:0; }
.lfv-new .req .req-info b { display:block; }
.lfv-new .req .req-info small { display:block; }
.lfv-new .req .req-btns { flex:0 0 auto; }
.lfv-new .req .req-btns form { display:inline-flex; }
.lfv-new .req .tiny-avatar img { width:100%;height:100%;object-fit:cover;border-radius:5px; }
.lfv-new .dlg-head .tiny-avatar img { width:100%;height:100%;object-fit:cover;border-radius:4px; }
.lfv-new .flash-message { margin-bottom:12px;padding:10px 12px;background:#e7f6ee;border:1px solid #bde2cc;border-radius:5px; }
.lfv-new .flash-message.error { background:#fff0ee;border-color:#f0c4bd;color:#a33; }
.lfv-new .dlg-body label { display:block; }
.lfv-new dialog { max-width:calc(100vw - 40px); }
.lfv-new .stat-grid { grid-template-columns:1fr 1fr; }
.lfv-new .group tr[hidden] { display:none!important; }
.lfv-new .empty { margin:12px; }
.lfv-new .req-empty { padding:14px 12px; }
.lfv-new .friends-band .band-art { width:360px; }
.lfv-new .person strong { display:block; }
.lfv-new .groups { min-height:50px; }
.lfv-new .dlg-body .seg label { display:block; }


/* Playarea vänner – isolera Claudes godkända banner från globala regler */
.lfv-new .friends-band .band-copy h1 span::after { content:none; display:none; }
.lfv-new .friends-band .band-copy h1 span { text-decoration:none; }
.lfv-new .friends-band .band-art .tag {
  position:absolute; left:auto; bottom:auto; right:28px; top:22px;
  width:auto; height:auto; min-width:0; min-height:0;
  display:block; padding:5px 9px; margin:0;
  background:#fff9ed; border:0; border-radius:6px 6px 6px 1px;
  box-shadow:0 2px 0 #dfc9a9; color:#9a6042;
  font:800 10px 'Nunito',sans-serif; line-height:normal;
  transform:rotate(4deg); white-space:nowrap; z-index:3;
}

/* Playarea – vänförfrågan på profilsidan. Endast popupen påverkas. */
.page-profile .lajv-request-dialog { width:440px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);padding:0;border:1px solid #cbdfe4;border-radius:10px;background:#fff;color:#29384b;box-shadow:0 20px 65px #20384c55;font:12px 'DM Sans',Arial,sans-serif;overflow:auto; }
.page-profile .lajv-request-dialog::backdrop { background:rgba(27,48,62,.55); }
.page-profile .lajv-request-head { display:flex;align-items:center;gap:12px;padding:16px;background:linear-gradient(110deg,#e6f5f2,#fff4e1);border-bottom:1px solid #d7e6e8; }
.page-profile .lajv-request-head img { width:49px;height:49px;object-fit:cover;border-radius:8px;border:3px solid white;box-shadow:0 2px 7px #adc9ce; }
.page-profile .lajv-request-head h2 { margin:0;color:#286c91;font:900 17px 'Nunito',sans-serif; }
.page-profile .lajv-request-head p { margin:3px 0 0;color:#6f8790;font-size:11px; }
.page-profile .lajv-request-close { margin-left:auto;align-self:flex-start;background:none;border:0;color:#6b8790;font-size:24px;line-height:1; }
.page-profile .lajv-request-body { padding:17px 20px;display:flex;flex-direction:column;gap:7px; }
.page-profile .lajv-request-body>label { font-weight:800;color:#46677a;margin-top:5px; }
.page-profile .lajv-request-body select { width:100%;padding:10px;border:1px solid #cbdfe4;border-radius:6px;background:#fbfdfd;color:#344957;font-size:12px; }
.page-profile .lajv-request-body fieldset { display:flex;gap:16px;margin:9px 0 0;padding:11px 12px;border:1px solid #dce7e9;border-radius:6px; }
.page-profile .lajv-request-body legend { padding:0 5px;color:#46677a;font-weight:800; }
.page-profile .lajv-request-radio { display:inline-flex;align-items:center;gap:6px;cursor:pointer; }
.page-profile .lajv-request-footer { display:flex;justify-content:flex-end;gap:8px;padding:13px 18px;background:#f8fbfc;border-top:1px solid #e3e9ed; }
.page-profile .lajv-request-footer button { padding:9px 13px;border-radius:6px;border:1px solid #c4dedb;background:#fff;color:#4c8287;font:800 11px 'Nunito',sans-serif; }
.page-profile .lajv-request-footer button[type=submit] { background:linear-gradient(#43b2a9,#278f8e);color:#fff;border-color:#258986; }
.page-profile .lajv-request-footer button:disabled { opacity:.65;cursor:wait; }

/* Playarea – två klickbara IRL-kort i vänpopupen */
.page-profile .lajv-request-body fieldset.lajv-request-irl { display:block;gap:0;margin:12px 0 0;padding:0;border:0;min-width:0; }
.page-profile .lajv-request-irl legend { padding:0;margin-bottom:10px;font:800 12px 'Nunito',sans-serif;color:#46677a; }
.page-profile .lajv-request-irl legend span { margin-left:5px;color:#8a9ca6;font:600 10px 'DM Sans',sans-serif; }
.page-profile .lajv-request-irl-options { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.page-profile .lajv-request-irl-card { position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:126px;padding:13px 9px 10px;text-align:center;cursor:pointer;background:#fbfdfd;border:2px solid #dce7e9;border-radius:9px;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s; }
.page-profile .lajv-request-irl-card:hover { transform:translateY(-2px);border-color:#8fc9c6;box-shadow:0 4px 12px rgba(35,64,82,.08); }
.page-profile .lajv-request-irl-card input { position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; }
.page-profile .lajv-request-irl-emoji { font-size:30px;line-height:1.25;margin-bottom:5px; }
.page-profile .lajv-request-irl-card strong { font:900 14px 'Nunito',sans-serif;color:#37596c; }
.page-profile .lajv-request-irl-card small { font:600 10px/1.4 'DM Sans',sans-serif;color:#7d929e;margin-top:3px; }
.page-profile .lajv-request-irl-check { position:absolute;top:7px;right:8px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#2e9e99;color:white;font:900 11px 'Nunito',sans-serif;opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s; }
.page-profile .lajv-request-irl-card:has(input:checked) { background:#eaf7f4;border-color:#2e9e99;box-shadow:0 0 0 2px rgba(46,158,153,.09); }
.page-profile .lajv-request-irl-card:has(input[value="0"]:checked) { background:#fff3ef;border-color:#ed7969;box-shadow:0 0 0 2px rgba(237,121,105,.08); }
.page-profile .lajv-request-irl-card:has(input[value="0"]:checked) .lajv-request-irl-check { background:#ed7969; }
.page-profile .lajv-request-irl-card:has(input:checked) .lajv-request-irl-check { opacity:1;transform:scale(1); }
.page-profile .lajv-request-irl-card:has(input:focus-visible) { outline:3px solid #2e9e99;outline-offset:2px; }

/* LIVE – riktiga avatarbilder i den befintliga designen */
.page-live .ljv-row .tiny-avatar img {width:100%;height:100%;object-fit:cover;border-radius:5px;}
.page-live .ljv-row .tiny-avatar {overflow:hidden;}
.page-live .ljv-who a {font:800 12px Nunito,sans-serif;color:#34607a;}

/* LIVE – utan sidokolumn */
.page-live .home-grid { grid-template-columns: minmax(0, 1fr); }
.page-live .ljv-row { grid-template-columns: 40px minmax(0, 1fr) 150px 110px; }


/* Playarea admin: tidigare inline-stilar, nu i gemensam style.css */
/* =========================================================
   Playarea Admin – dashboard 3.0
   Tillägg ovanpå style.css. Allt är prefixat med .page-admin
   och nya klasser börjar på .dx- så inget annat på sajten påverkas.
   (Kan flyttas till slutet av style.css om du vill ha allt på ett ställe.)
   ========================================================= */
.page-admin [hidden]{display:none!important}

/* ---------- Sidhuvud för vyn ---------- */
.page-admin .dx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.page-admin .dx-live{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid #c9dfd6;border-radius:12px;background:#eaf7f0;color:#3b9568;font-size:10px;font-weight:800;white-space:nowrap}
.page-admin .dx-live i{width:7px;height:7px;border-radius:50%;background:#4dbb82;animation:lm-online 2s infinite}

/* ---------- Aviseringar ---------- */
.page-admin .dx-notices{display:flex;flex-direction:column;gap:6px}
.page-admin .dx-notice{display:flex;align-items:center;gap:10px;padding:7px 8px 7px 8px;border:1px solid;border-radius:6px;font-size:11px;box-shadow:var(--shadow)}
.page-admin .dx-notice .ic{display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:5px;font-size:12px}
.page-admin .dx-notice>span:nth-child(2){flex:1;min-width:0}
.page-admin .dx-notice b{font-weight:800}
.page-admin .dx-notice a{font-size:10px;font-weight:800;white-space:nowrap}
.page-admin .dx-notice.warn{background:#fff9e9;border-color:#f1dfae;color:#78653c}
.page-admin .dx-notice.warn .ic{background:#f6e3a8;color:#8a6516}
.page-admin .dx-notice.alert{background:#fff4f1;border-color:#f3cfc7;color:#8a5148}
.page-admin .dx-notice.alert .ic{background:#fbd5cc;color:#c4503f}
.page-admin .dx-notice.info{background:#eef7fa;border-color:#cfe3ec;color:#4d6b7c}
.page-admin .dx-notice.info .ic{background:#d6eaf2;color:#2c7299}
.page-admin .dx-x{border:0;background:transparent;color:#a0aeb7;font-size:16px;line-height:1;padding:2px 6px;border-radius:4px}
.page-admin .dx-x:hover{background:rgba(0,0,0,.06);color:#52687a}

/* ---------- Nyckeltal ---------- */
.page-admin .adm-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
.page-admin .adm-tiles.dx-tiles-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.page-admin .adm-tile{overflow:hidden;padding:11px 13px 10px}
.page-admin .adm-tile b{font-size:25px}
.page-admin .adm-tile.t-navy{border-top-color:#5367a4}
.page-admin .dx-spark{position:absolute;right:11px;bottom:11px;display:flex;align-items:flex-end;gap:2px;height:26px}
.page-admin .dx-spark i{display:block;width:4px;height:var(--h);border-radius:1px;background:#bcdbe8}
.page-admin .dx-spark i:last-child{background:#3b91b2}
.page-admin .t-teal .dx-spark i{background:#b6e0dd}.page-admin .t-teal .dx-spark i:last-child{background:#2e9e99}
.page-admin .t-gold .dx-spark i{background:#f4dfa6}.page-admin .t-gold .dx-spark i:last-child{background:#e3ae3d}
.page-admin .t-purple .dx-spark i{background:#dccbe8}.page-admin .t-purple .dx-spark i:last-child{background:#9568b1}
.page-admin .t-navy .dx-spark i{background:#c5cde8}.page-admin .t-navy .dx-spark i:last-child{background:#5367a4}

/* ---------- Rader ---------- */
.page-admin .dx-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:stretch}
.page-admin .dx-row.eq{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.page-admin .dx-row>.panel,.page-admin .dx-stack>.panel{display:flex;flex-direction:column}
.page-admin .dx-stack{display:flex;flex-direction:column;gap:14px;min-width:0}
.page-admin .dx-stack>.panel:last-child{flex:1}
.page-admin .dx-empty{padding:20px 14px;text-align:center;color:#93a0aa;font-size:11px}

/* ---------- Modereringskö ---------- */
.page-admin .dx-queue{list-style:none;margin:0;padding:0;flex:1}
.page-admin .dx-queue li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid #eef2f4;transition:background .15s}
.page-admin .dx-queue li:hover{background:#fafdfd}
.page-admin .dx-queue li:last-child{border-bottom:0}
.page-admin .dx-queue .tiny-avatar{width:30px;height:30px;font-size:13px;border:2px solid #fff;outline:1px solid #dce5e9}
.page-admin .dx-q-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.page-admin .dx-q-top b{font-size:11px;color:#3d6a85}
.page-admin .dx-q-top small{color:#9aa7af;font-size:9px}
.page-admin .dx-q-reason{margin:3px 0 0;color:#566e7e;font:700 10.5px/1.4 'Nunito',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-admin .dx-actions{display:flex;gap:4px;justify-content:flex-end;white-space:nowrap}
.page-admin .dx-actions .adm-btn{margin-left:0}

/* ---------- Nya medlemmar ---------- */
.page-admin .dx-people{list-style:none;margin:0;padding:0;flex:1}
.page-admin .dx-people li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 12px;border-bottom:1px solid #eef2f4}
.page-admin .dx-people li:last-child{border-bottom:0}
.page-admin .dx-people .tiny-avatar{width:32px;height:32px;font-size:14px;border:2px solid #fff;outline:1px solid #dce5e9}
.page-admin .dx-people b{display:block;font-size:11px;color:#3d6a85}
.page-admin .dx-people small{display:block;color:#9aa7af;font-size:9px}
.page-admin .dx-people .dx-actions{align-items:center}
.page-admin .dx-sep{padding:5px 12px;background:#f7fafb;border-bottom:1px solid #eef2f4;color:#93a0aa;font-size:9px;font-weight:900;letter-spacing:.09em;display:block!important}

/* ---------- Tillväxt ---------- */
.page-admin .dx-stats3{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px dashed #e3eaee;background:#fbfcfd}
.page-admin .dx-stats3>div{padding:9px 14px;border-left:1px dashed #e3eaee}
.page-admin .dx-stats3>div:first-child{border-left:0}
.page-admin .dx-stats3 b{display:inline-block;color:#2c7299;font:900 19px/1.15 'Nunito',sans-serif}
.page-admin .dx-stats3 em{margin-left:6px;font-style:normal;font-size:10px;font-weight:800;color:#3e9966}
.page-admin .dx-stats3 small{display:block;color:#94a1aa;font-size:9px;font-weight:700;letter-spacing:.04em}
.page-admin .dx-chart{--g:6px;gap:var(--g);height:172px;padding:22px 16px 4px;margin:0}
.page-admin .dx-labels{--g:6px;display:flex;gap:var(--g);padding:0 16px 10px;background:#fff}
.page-admin .dx-chart.dense,.page-admin .dx-labels.dense{--g:3px}
.page-admin .dx-labels span{flex:1;min-width:0;display:flex;justify-content:center;white-space:nowrap;color:#93a0aa;font-size:9px;font-weight:700}
.page-admin .dx-chart .adm-bar{min-width:0}
.page-admin .dx-chart .adm-bar b{white-space:nowrap}
.page-admin .dx-chart.dense .adm-bar b{display:none}
.page-admin .dx-chart.dense .adm-bar.peak b,.page-admin .dx-chart.dense .adm-bar.today b{display:block}
.page-admin .dx-chart .adm-bar.peak i{background:linear-gradient(#f2d070,#e3ae3d)}
.page-admin .dx-chart .adm-bar.today i{background:linear-gradient(#f39a8a,#e0705f)}
.page-admin .dx-legend{display:flex;gap:14px;padding:7px 14px;border-top:1px solid #edf0f2;background:#fbfcfd;color:#93a0aa;font-size:9px}
.page-admin .dx-legend i{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:2px;background:#2e9e99;vertical-align:0}
.page-admin .dx-legend i.g{background:#e3ae3d}.page-admin .dx-legend i.c{background:#e0705f}

/* ---------- Personal ---------- */
.page-admin .dx-staff{list-style:none;margin:0;padding:0;flex:1}
.page-admin .dx-staff li{display:grid;grid-template-columns:34px minmax(0,1fr) 62px;gap:9px;align-items:center;padding:9px 12px;border-bottom:1px solid #eef2f4}
.page-admin .dx-staff li:last-child{border-bottom:0}
.page-admin .dx-staff .tiny-avatar{width:34px;height:34px;font-size:15px;border:2px solid #fff;outline:1px solid #dce5e9}
.page-admin .dx-staff b{font-size:11px;color:#3d6a85}
.page-admin .dx-staff b .adm-badge{margin-left:4px;font-size:8px;padding:0 6px}
.page-admin .dx-staff small{display:block;color:#9aa7af;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-admin .dx-staff li.off .tiny-avatar{filter:grayscale(.6);opacity:.8}
.page-admin .dx-load{text-align:right;font-size:9px;color:#93a0aa}
.page-admin .dx-load strong{display:block;color:#5d7788;font:900 12px 'Nunito',sans-serif}
.page-admin .dx-load .bar{height:5px;margin-top:3px;border-radius:3px;background:#e9f0f3;overflow:hidden}
.page-admin .dx-load .bar i{display:block;height:100%;width:var(--w);border-radius:3px;background:linear-gradient(#52c0b7,#2e9e99)}
.page-admin .dx-metrics{display:grid;grid-template-columns:1fr 1fr;border-top:1px dashed #e3eaee;background:#fbfcfd}
.page-admin .dx-metrics>div{padding:8px 12px;border-left:1px dashed #e3eaee}
.page-admin .dx-metrics>div:first-child{border-left:0}
.page-admin .dx-metrics b{display:block;color:#2c7299;font:900 15px/1.2 'Nunito',sans-serif}
.page-admin .dx-metrics small{color:#94a1aa;font-size:9px;font-weight:700}

/* ---------- Aktivitetsflöde ---------- */
.page-admin .dx-chips{display:flex;gap:5px;padding:8px 12px;border-bottom:1px solid #eef2f4;background:#fbfcfd}
.page-admin .dx-chips button{padding:3px 11px;border:1px solid #d6e5e6;border-radius:12px;background:#fff;color:#4b8796;font-size:10px;font-weight:800}
.page-admin .dx-chips button:hover{border-color:#8bc7ca}
.page-admin .dx-chips button.on{background:#3a91a9;border-color:#3a91a9;color:#fff}
.page-admin .dx-feed{list-style:none;margin:0;padding:0;flex:1}
.page-admin .dx-feed li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid #eef2f4}
.page-admin .dx-feed li:last-child{border-bottom:0}
.page-admin .dx-feed li.fresh{animation:dx-flash 2.4s ease-out}
@keyframes dx-flash{from{background:#fff3c4}to{background:transparent}}
.page-admin .dx-feed li>div{flex:1;min-width:0}
.page-admin .dx-feed b{display:block;font-size:11px;color:#3b5365}
.page-admin .dx-feed small{display:block;margin-top:1px;color:#91a0aa;font-size:10px}
.page-admin .dx-feed time{color:#9aa6ad;font-size:9px;white-space:nowrap}
.page-admin .adm-feed-icon.purple{background:#efe3f6;color:#7b4d9a}

/* ---------- Trender ---------- */
.page-admin .dx-trend{list-style:none;margin:0;padding:0}
.page-admin .dx-trend li{display:flex;align-items:center;gap:9px;padding:8px 12px;border-bottom:1px solid #f0f3f5}
.page-admin .dx-trend .rk{flex:0 0 20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#fff1cc;color:#b98a1f;font:900 11px 'Nunito'}
.page-admin .dx-trend div{flex:1;min-width:0}
.page-admin .dx-trend b{display:block;color:#3b5365;font:800 11px 'Nunito',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-admin .dx-trend small{color:#94a1aa;font-size:9px}
.page-admin .dx-trend .up{color:#3e9966;font-size:10px;font-weight:800;white-space:nowrap}
.page-admin .dx-tags{border-top:1px dashed #e3eaee;padding:9px 12px}
.page-admin .dx-tags .tag-cloud{padding:0}
.page-admin .dx-lajv{padding:11px 12px 6px;background:linear-gradient(180deg,#fffdf6,#fff 70%)}
.page-admin .dx-lajv .ljv-preview{margin:0}
.page-admin .dx-lajv p{margin:7px 0 0;color:#93a0aa;font-size:10px}

/* ---------- Roller, avstängda, statistik ---------- */
.page-admin .dx-matrix th.c,.page-admin .dx-matrix td.c{text-align:center}
.page-admin .dx-matrix td.c.y{color:#3e9966;font-weight:900}
.page-admin .dx-matrix td.c.n{color:#c3ced5}
.page-admin .dx-matrix th small{display:block;margin-top:1px;color:#a6b2ba;font-size:9px;letter-spacing:0;font-weight:700}
.page-admin .dx-note{padding:9px 13px;border-top:1px solid #edf0f2;background:#fbfcfd;color:#8a99a3;font-size:10px}
.page-admin .dx-meters{padding-top:12px}
.page-admin .dx-form-preview{margin-top:2px}
.page-admin .dx-form-preview .ljv-preview{margin-top:4px}


/* ---------- Passet ---------- */
.page-admin .dx-duty{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#fff;border:1px solid #d9e2e7;border-radius:7px;box-shadow:var(--shadow)}
.page-admin .dx-duty-label{flex:none;color:#93a0aa;font-size:9px;font-weight:900;letter-spacing:.1em}
.page-admin .dx-avatars{display:flex;flex:none}
.page-admin .dx-avatars .tiny-avatar{width:28px;height:28px;margin-left:-7px;font-size:12px;border:2px solid #fff;outline:1px solid #dce5e9}
.page-admin .dx-avatars .tiny-avatar:first-child{margin-left:0}
.page-admin .dx-avatars .off{filter:grayscale(.65);opacity:.72}
.page-admin .dx-duty-note{flex:1;min-width:0;overflow:hidden;color:#5d7788;font-size:11px;white-space:nowrap;text-overflow:ellipsis}
.page-admin .dx-duty-note b{color:#3d6a85}
.page-admin .dx-duty-meta{flex:none;color:#93a0aa;font-size:10px;font-weight:700;text-align:right}
.page-admin .dx-duty-meta b{display:block;color:#2c7299;font:900 14px/1.1 'Nunito',sans-serif}
.page-admin .dx-pulse{color:#93a0aa;font-size:10px;font-weight:700;letter-spacing:0}
.page-admin .dx-pulse b{color:#5d7788}
.page-admin .dx-chart{height:148px}
.page-admin .dx-lajv-foot{border-top:1px dashed #e3eaee}

@media(prefers-reduced-motion:reduce){.page-admin .dx-feed li.fresh,.page-admin .dx-live i{animation:none}}

/* Medlemslogg – endast adminvyn */
.page-admin .dx-log-filters{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;padding:13px;border-bottom:1px solid #e3e9ed;background:#fbfcfd}
.page-admin .dx-log-filters label{display:flex;flex-direction:column;gap:4px;flex:1;min-width:155px;color:#607789;font-size:10px;font-weight:800}
.page-admin .dx-log-filters input,.page-admin .dx-log-filters select{height:33px;width:100%;padding:6px 9px;border:1px solid #d5e0e6;border-radius:5px;background:white;color:#29384b;font:11px 'DM Sans',Arial,sans-serif}
.page-admin .dx-log-filters button{height:33px}
.page-admin .dx-activity-table td:first-child{white-space:nowrap;color:#8494a0;font-size:10px}
.page-admin .dx-activity-table td:nth-child(2){font-weight:800;color:#2c7299}
.page-admin .dx-activity-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 13px;border-top:1px solid #e3e9ed;font-size:10px;color:#82929d}
.page-admin .dx-page-controls{display:flex;align-items:center;gap:9px}
.page-admin .dx-page-controls button:disabled{opacity:.45;cursor:default}
.page-admin .dx-log-privacy{margin:0;padding:10px 13px;background:#fff9e9;border-top:1px solid #f1dfae;color:#78653c;font-size:10px}
.page-admin .dx-log-empty{text-align:center;padding:25px!important;color:#82929d}

/* Dashboard: medlemslogg / adminlogg */
.page-admin .dx-feed-tabs{display:flex;align-items:center;gap:14px;padding:0 12px;background:#fff;border-bottom:1px solid #e3e9ed}
.page-admin .dx-feed-tabs button{position:relative;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:#91a0aa;padding:9px 2px 7px;font-size:10px;font-weight:700;cursor:pointer;box-shadow:none}
.page-admin .dx-feed-tabs button:hover{background:transparent;color:#2c7299}
.page-admin .dx-feed-tabs button.on{background:transparent;color:#2c7299;border-bottom-color:#3a91a9;font-weight:800}
.page-admin .dx-feed-tabs button.on:after{content:none}
.page-admin .dx-feed[hidden]{display:none!important}
.page-admin .dx-page-log-tabs{margin:0 0 12px;padding:0 2px;background:transparent;border-bottom:1px solid #dce6e9;justify-content:flex-start}
.page-admin .dx-page-log-tabs button{font-size:11px;padding:7px 12px}

/* Besöksstatistik – samma diskreta formspråk som övriga adminpanelen */
.page-admin .dx-visits-brief{margin:14px 0}
.page-admin .dx-visit-section{margin-bottom:18px}
.page-admin .dx-visit-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff}
.page-admin .dx-visit-metrics>div{padding:13px 14px;border-right:1px solid #edf0f2;min-width:0}
.page-admin .dx-visit-metrics>div:last-child{border-right:0}
.page-admin .dx-visit-metrics small{display:block;color:#92a0a9;font-size:9px;font-weight:900;letter-spacing:.045em}
.page-admin .dx-visit-metrics b{display:block;color:#2c7299;font:900 22px/1.4 'Nunito',sans-serif}
.page-admin .dx-visit-metrics span{color:#8b9aa5;font-size:10px}
.page-admin .dx-visit-metrics span.up{color:#3e9966;font-weight:800}
.page-admin .dx-demo-label{color:#9ba9b1;font-size:9px}
.page-admin .dx-visit-chart-title{padding:12px 14px 4px;color:#63788a;font-size:10px;font-weight:900;letter-spacing:.06em;border-top:1px solid #edf0f2}
.page-admin .dx-visit-chart-title small{color:#9ba8b0;font-weight:500;letter-spacing:0;margin-left:7px}
.page-admin .dx-visit-bars{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:7px;height:170px;padding:18px 16px 12px;align-items:end}
.page-admin .dx-visit-day{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-width:0}
.page-admin .dx-visit-day>span{font-size:8px;color:#8b9aa5}
.page-admin .dx-visit-day i{display:block;width:100%;max-width:24px;height:var(--pct);min-height:4px;background:linear-gradient(#6ac3bd,#2e9e99);border-radius:3px 3px 0 0}
.page-admin .dx-visit-day:last-child i{background:linear-gradient(#f0c96d,#e3ae3d)}
.page-admin .dx-visit-day small{font-size:8px;color:#94a1aa;white-space:nowrap}
.page-admin .dx-visit-bottom{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #edf0f2}
.page-admin .dx-visit-bottom>div{padding:12px 15px}
.page-admin .dx-visit-bottom>div:first-child{border-right:1px solid #edf0f2}
.page-admin .dx-visit-bottom strong{display:block;margin-bottom:7px;font-size:10px;color:#63788a;letter-spacing:.05em}
.page-admin .dx-popular-row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid #f0f3f5;font-size:10px;color:#6a7d8c}
.page-admin .dx-popular-row b{color:#3b7e99}
.page-admin .dx-visit-note{color:#97a3ab;font-size:10px;margin:12px 0 0}
.page-admin .dx-members-heading{margin:0 0 10px;border:0;padding:0 2px}

/* Admin: inloggad användares riktiga profilbild */
.page-admin .account-trigger .mini-avatar{overflow:hidden}
.page-admin .account-trigger .mini-avatar img{display:block;width:100%;height:100%;object-fit:cover}

/* Playarea ADMIN – medlemsmoderering i modal */
.page-admin .lajv-member-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;white-space:nowrap}
.page-admin .lajv-moderation-overlay[hidden],.page-admin .lajv-moderation-section[hidden],.page-admin #lajv-ban-until-wrap[hidden]{display:none!important}
.page-admin.lajv-modal-open{overflow:hidden}
.page-admin .lajv-moderation-overlay{position:fixed;inset:0;z-index:99999;background:rgba(22,42,54,.62);display:flex;align-items:center;justify-content:center;padding:24px}
.page-admin .lajv-moderation-dialog{background:#fff;width:min(520px,100%);max-height:90vh;overflow:auto;border:1px solid #bdd4df;border-radius:9px;box-shadow:0 18px 55px rgba(0,0,0,.25);color:#344957;outline:none}
.page-admin .lajv-moderation-head{background:linear-gradient(115deg,#d9f0ed,#e9f3f8);padding:18px 22px;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #cddfe5}
.page-admin .lajv-moderation-head small{font-size:10px;font-weight:800;letter-spacing:1px;color:#2c7299}
.page-admin .lajv-moderation-head h2{font-size:21px;margin:4px 0 0;color:#286c91}
.page-admin .lajv-moderation-close{background:#fff;border:1px solid #cbdce5;border-radius:5px;font-size:23px;line-height:1;cursor:pointer;color:#344957;padding:5px 10px}
.page-admin .lajv-moderation-body{padding:20px 22px}
.page-admin .lajv-moderation-member{font-size:13px;padding:10px 12px;background:#f1f7f9;border-radius:5px;margin-bottom:15px}
.page-admin .lajv-moderation-section{padding:14px 0;border-top:1px solid #e1e9ed}
.page-admin .lajv-moderation-section h3{margin:0 0 6px;font-size:15px;color:#286c91}
.page-admin .lajv-moderation-section p{margin:0 0 13px;color:#6c7e89;font-size:12px;line-height:1.5}
.page-admin .lajv-moderation-section form{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.page-admin .lajv-moderation-section label{font-size:12px;font-weight:700}
.page-admin .lajv-moderation-section input,.page-admin .lajv-moderation-section select,.page-admin .lajv-moderation-section textarea{width:100%;box-sizing:border-box;border:1px solid #c8d7df;border-radius:5px;padding:9px 10px;background:#fff;color:#344957;font:inherit;font-size:13px}
.page-admin .lajv-moderation-section textarea{resize:vertical}
.page-admin .lajv-moderation-section .adm-btn{align-self:flex-start;margin-top:5px;cursor:pointer}
.page-admin .lajv-moderation-foot{border-top:1px solid #e1e9ed;padding:12px 22px;text-align:right;background:#f8fafb}

/* Playarea admin: flikar i medlemsmoderering */
.page-admin .lajv-moderation-panel[hidden]{display:none!important}
.page-admin .lajv-moderation-dialog.report-dialog{position:relative;width:min(600px,100%)}
.page-admin .report-modal-close{position:absolute;right:10px;top:8px;z-index:1}
.page-admin #report-modal-content{padding:0}
.page-admin #report-modal-message{margin:0;padding:14px 45px 14px 16px;color:#557789;font-size:12px}
.page-admin #report-modal-message:empty{display:none}
.page-admin .report-dialog .panel{margin:0;box-shadow:none}
.page-admin .report-dialog .panel-heading{padding-right:45px}
.page-admin .report-dialog .adm-table{min-width:0;width:100%}
.page-admin .report-dialog th{width:135px;white-space:normal}
.page-admin .report-dialog td{white-space:normal;overflow-wrap:anywhere}
.page-admin .report-dialog .adm-form .lajv-member-actions{white-space:normal;flex-wrap:wrap}
.page-admin .report-dialog .adm-tools{flex-wrap:wrap}
.page-admin .lajv-moderation-dialog{width:min(520px,100%)}
.page-admin .lajv-moderation-member{display:flex;align-items:center;gap:12px;margin-bottom:15px;padding:11px 12px}
.page-admin .lajv-moderation-member img{width:44px;height:44px;flex:0 0 44px;object-fit:cover;border:3px solid #fff;border-radius:8px;box-shadow:0 0 0 1px #d5e1e7}
.page-admin .lajv-moderation-identity{display:flex;flex-direction:column;gap:3px;min-width:0}
.page-admin .lajv-moderation-identity strong{font:900 15px 'Nunito',sans-serif;color:#286c91}
.page-admin .lajv-moderation-identity>span{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;color:#7c919e}
.page-admin #lajv-moderation-role{padding:2px 7px;border-radius:9px;background:#e4eef3;color:#397997;font-size:9px}
.page-admin .lajv-moderation-status{color:#338c65}
.page-admin .lajv-moderation-tabs{display:flex;gap:4px;border-bottom:1px solid #dce6eb;margin:0 0 12px}
.page-admin .lajv-moderation-tab{appearance:none;border:0;border-bottom:3px solid transparent;background:transparent;padding:10px 14px 9px;font-size:12px;font-weight:800;color:#7c909d;cursor:pointer}
.page-admin .lajv-moderation-tab:hover{color:#286c91;background:#f6fafb}
.page-admin .lajv-moderation-tab.active{border-bottom-color:#2e9e99;color:#286c91}
.page-admin .lajv-moderation-panel .lajv-moderation-section:first-child{border-top:0;padding-top:4px}
.page-admin .lajv-moderation-foot .lajv-moderation-close{font-size:11px;line-height:1.3;font-weight:800;padding:7px 13px;color:#557789;background:linear-gradient(#fff,#f1f6f8)}

.page-admin .report-dialog [hidden]{display:none!important}
.page-admin .report-member-actions{border-top:1px solid #e0e6ea;border-bottom:1px solid #e0e6ea;background:#f5f7f8}
.page-admin .report-member-actions summary{padding:10px 16px;font:600 11px 'Nunito',sans-serif;color:#75838d;cursor:pointer}
.page-admin .report-member-actions summary:hover{color:#52687a}
.page-admin .report-member-actions .adm-form{padding:12px 16px;background:#fffaf2;border-top:1px solid #efe5d2}
.page-admin .report-member-actions label{display:flex;flex-direction:column;gap:5px;margin-bottom:8px;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:#7b7364}
.page-admin .report-member-actions input,.page-admin .report-member-actions select,.page-admin .report-member-actions textarea{padding:6px 9px;font-size:11px;background:#fffdf8;border-color:#e8e1d5}
.page-admin .report-member-actions .adm-form p{font-size:10px;line-height:1.5;font-weight:400;color:#8c8171;margin:4px 0 10px}
.page-admin .report-member-actions textarea{resize:vertical;min-height:62px}
.page-admin .report-member-actions--ban .adm-form{background:#fff2f0;border-top-color:#ecd5d1}
.page-admin .report-member-actions--ban label{color:#936f6a}
.page-admin .report-member-actions--ban input,.page-admin .report-member-actions--ban textarea{background:#fffafa;border-color:#e8ceca}
.page-admin .report-member-actions--ban .adm-form p{color:#977d78}
.page-admin .report-member-actions .adm-btn{white-space:normal}
.page-admin .report-member-actions [hidden]{display:none!important}
.page-admin .report-action-tabs{display:flex;gap:5px;border-bottom:1px solid #e8e1d5;margin-bottom:12px}
.page-admin .report-action-tabs button{appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;padding:8px 10px;font:600 11px 'Nunito',sans-serif;color:#8b8274;cursor:pointer}
.page-admin .report-action-tabs button[aria-selected="true"]{color:#926d2d;border-bottom-color:#d8b464}
.page-admin .report-action-tabs button[data-report-action-tab="ban"][aria-selected="true"]{color:#b34f4b;border-bottom-color:#d57b70}
.page-admin .report-action-tabs button:hover:not(:disabled){background:#ffffff80}
.page-admin .report-action-tabs button:focus-visible{outline:2px solid #8bc7ca;outline-offset:-2px;border-radius:3px}
.page-admin .report-action-tabs button:disabled{opacity:.45;cursor:not-allowed}
.page-admin .report-member-actions--ban .report-action-tabs{border-bottom-color:#e8ceca}

/* Adminsidornas toppar delar formspråk med Krypinverkstaden. */
.page-admin .admin-page-banner{--admin-accent:#2e9e99;--admin-deep:#267c7d;--admin-light:#e3f4ef;min-height:112px;margin-bottom:18px;background:linear-gradient(115deg,var(--admin-light),#f8fbfa 65%,#fff5df);border-color:color-mix(in srgb,var(--admin-accent) 24%,#fff);gap:16px}
.page-admin .admin-page-banner--blue{--admin-accent:#3b91b2;--admin-deep:#2c607e;--admin-light:#e2f0f8}
.page-admin .admin-page-banner--coral{--admin-accent:#df7c85;--admin-deep:#9a5968;--admin-light:#fff0ed}
.page-admin .admin-page-banner--gold{--admin-accent:#d8ad4f;--admin-deep:#886a31;--admin-light:#fff5d8}
.page-admin .admin-page-banner::before{border-color:color-mix(in srgb,var(--admin-accent) 8%,transparent);right:-24px;top:-116px}
.page-admin .admin-page-banner .lajv-page-banner__symbol{flex-basis:60px;width:60px;height:60px;border-radius:16px;transform:rotate(-5deg);background:linear-gradient(145deg,var(--admin-accent),var(--admin-deep));box-shadow:0 4px 12px #3449571a;font-size:29px}
.page-admin .admin-page-banner .lajv-page-banner__eyebrow{color:var(--admin-deep);font-size:9px;letter-spacing:1.25px}
.page-admin .admin-page-banner h2{margin:3px 0 5px;font:900 27px/1.15 'Nunito',sans-serif;letter-spacing:-.6px;color:var(--admin-deep);overflow-wrap:anywhere}
.page-admin .admin-page-banner p{font-size:12px;line-height:1.5;max-width:62ch}
.page-admin .admin-page-banner__date{display:block;margin-top:7px;font-size:10px;color:#768992}
.page-admin .admin-page-banner .dx-live{margin-left:auto;align-self:center}
.page-admin .admin-page-banner__ornaments{gap:14px;padding:0 12px;transform:rotate(-9deg)}
.page-admin .dx-row>.dx-report-panel{align-self:start;min-width:0}
.page-admin .dx-report-panel .dx-queue .dx-report-item{grid-template-columns:36px minmax(0,1fr) auto;padding:15px 14px;gap:12px;align-items:start}
.page-admin .dx-report-panel .tiny-avatar{width:36px;height:36px;object-fit:cover;border-radius:8px}
.page-admin .dx-report-copy{min-width:0}
.page-admin .dx-report-panel .dx-q-top{gap:7px;min-width:0}
.page-admin .dx-report-panel .dx-q-top b{font-size:12px;overflow-wrap:anywhere}
.page-admin .dx-report-panel .dx-q-top .adm-badge{font-size:8px;padding:3px 5px}
.page-admin .dx-report-meta{display:block;margin-top:4px;color:#7a8d99;font-size:10px;line-height:1.5;overflow-wrap:anywhere}
.page-admin .dx-report-panel .dx-q-reason{margin:7px 0 5px;white-space:normal;font:600 12px/1.5 'Nunito',sans-serif;overflow-wrap:anywhere}
.page-admin .dx-report-time{font-size:9px;color:#8b9da8}
.page-admin .dx-report-panel .dx-actions{align-self:center}
.page-admin .dx-report-panel .dx-empty{display:block}


.page-admin .report-member-actions label.report-removal-confirm{display:flex;flex-direction:row;align-items:flex-start;gap:8px;font-size:11px;font-weight:500;color:#7b7364;line-height:1.5;margin:0 0 12px}
.page-admin .report-member-actions .report-removal-confirm input{width:auto;flex:0 0 auto;margin-top:2px}

.page-admin .member-history-summary{display:flex;gap:8px;padding:3px 0 12px;color:#708590;font-size:11px}
.page-admin .member-history-list{list-style:none;padding:0;margin:0}
.page-admin .member-history-event{border:1px solid #e2e9ed;border-left:3px solid #dfbf70;border-radius:5px;padding:11px 12px;margin-bottom:9px;background:#fffdf8}
.page-admin .member-history-event--ban{border-left-color:#d58a81;background:#fffaf9}
.page-admin .member-history-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:3px}
.page-admin .member-history-heading strong{font-size:12px;color:#526b7b}
.page-admin .member-history-heading time,.page-admin .member-history-event small{font-size:10px;color:#8a9aa4}
.page-admin .member-history-reason{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.5;color:#5d7280;margin:8px 0}
.page-admin .member-history-outcome{display:flex;flex-direction:column;gap:4px;margin:8px 0 10px;font-size:11px;color:#8c716b}
.page-admin .member-history-pages{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:#8a9aa4}
.page-admin .member-history-note{margin:12px 0 0;font-size:10px;line-height:1.5;color:#98a4ab}
.page-admin .member-history-empty{padding:16px 0;color:#8b9aa4;font-size:12px}
.page-admin .member-history-error{font-size:12px;color:#a26860}
.page-admin .lajv-moderation-tabs{flex-wrap:wrap}

/* Nedtonad medlemsmodal. */
.page-admin #lajv-moderation-overlay{background:rgba(35,55,68,.38)}
.page-admin #lajv-moderation-overlay .lajv-moderation-dialog{width:min(420px,100%);max-height:82vh;border-color:#d9e2e8;border-radius:7px;box-shadow:0 10px 30px rgba(35,55,68,.16)}
.page-admin #lajv-moderation-overlay .lajv-moderation-head{position:sticky;top:0;z-index:2;align-items:center;padding:10px 13px;background:#f7f9fa;border-bottom-color:#e5ebef}
.page-admin #lajv-moderation-overlay .lajv-moderation-head small{font-size:9px;font-weight:600;letter-spacing:.7px;color:#8b99a3}
.page-admin #lajv-moderation-overlay .lajv-moderation-head h2{font-size:13px;font-weight:600;margin:0;color:#5c7282}
.page-admin #lajv-moderation-overlay .lajv-moderation-body{padding:11px 13px}
.page-admin #lajv-moderation-overlay .lajv-moderation-member{padding:7px 8px;margin-bottom:9px;background:#fafbfc;border:1px solid #edf0f3;gap:10px}
.page-admin #lajv-moderation-overlay .lajv-moderation-member img{width:28px;height:28px;flex-basis:28px;border-width:2px;box-shadow:0 0 0 1px #e2e8ec}
.page-admin #lajv-moderation-overlay .lajv-moderation-identity strong{font-size:13px;font-weight:700;color:#5b7282}
.page-admin #lajv-moderation-overlay .lajv-moderation-identity>span{font-weight:600}
.page-admin #lajv-moderation-overlay .lajv-moderation-tab{font-size:11px;font-weight:600;padding:7px 9px;border-bottom-width:2px;color:#8999a4}
.page-admin #lajv-moderation-overlay .lajv-moderation-tab.active{color:#5c7d89;border-bottom-color:#9bbdbb}
.page-admin #lajv-moderation-overlay .lajv-moderation-section h3{font-size:13px;font-weight:600;color:#627786}
.page-admin #lajv-moderation-overlay .lajv-moderation-section p{font-size:11px;color:#82919b;margin-bottom:10px}
.page-admin #lajv-moderation-overlay .lajv-moderation-section label{font-size:11px;font-weight:600;color:#738592}
.page-admin #lajv-moderation-overlay .lajv-moderation-section input,.page-admin #lajv-moderation-overlay .lajv-moderation-section select,.page-admin #lajv-moderation-overlay .lajv-moderation-section textarea{padding:7px 9px;font-size:12px;border-color:#dde5eb;background:#fcfdfe}
.page-admin #lajv-moderation-overlay .lajv-moderation-foot{padding:9px 18px;background:#fafbfc;border-top-color:#e9eef1}
.page-admin #lajv-moderation-overlay .member-history-event{border-left-width:2px;box-shadow:none}

.page-admin #lajv-moderation-overlay .lajv-moderation-close{font-size:20px;line-height:1;padding:2px 5px}
.page-admin #lajv-moderation-overlay .lajv-moderation-tabs{margin-bottom:8px}
.page-admin #lajv-moderation-overlay .lajv-moderation-section{padding:8px 0}
.page-admin #lajv-moderation-overlay .lajv-moderation-section form{gap:6px}
.page-admin #lajv-moderation-overlay .lajv-moderation-section textarea{min-height:50px}
.page-admin #lajv-moderation-overlay .lajv-moderation-section .moderation-destructive{align-self:flex-end;margin-left:auto}

.lajv-announcement-preview__copy strong,.lajv-announcement-preview__copy p{overflow-wrap:anywhere;white-space:pre-wrap}
.page-admin .announcement-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.page-admin .announcement-help{margin:0;color:#8899a4;font-size:11px;line-height:1.5}
.page-admin #view-kungorelser>.panel{margin-bottom:16px}
.page-admin .dx-form-preview .lajv-announcement-preview{margin:8px 0 0}
.page-admin .dx-lajv .lajv-announcement-preview{margin:0}

.page-admin .announcement-period{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.page-admin .announcement-period small{display:block;margin-top:5px;color:#8a9aa4;font-size:10px;line-height:1.4}

.page-admin #announcement-modal{background:rgba(35,55,68,.38)}
.page-admin #announcement-modal .announcement-dialog{width:min(540px,100%);max-height:85vh;border-color:#d9e2e8;box-shadow:0 10px 30px rgba(35,55,68,.16)}
.page-admin #announcement-modal .lajv-moderation-head{position:sticky;top:0;z-index:2;align-items:center;padding:10px 15px;background:#f7f9fa}
.page-admin #announcement-modal .lajv-moderation-head h2{font-size:14px;color:#627786;margin:0}
.page-admin #announcement-modal .lajv-moderation-close{font-size:20px}
.page-admin #announcement-modal .adm-form{padding:14px 16px}
.page-admin #announcement-modal-message{margin:0;padding:10px 16px;font-size:12px;color:#99736b}
.page-admin #announcement-modal-message:empty{display:none}

/* Statistics: measured activity and Swedish calendar days. */
.stats-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px;font-size:12px;color:#536577}.stats-toolbar small{font-size:11px;color:#7b8997}.stats-toolbar nav{display:flex;gap:6px;flex-wrap:wrap}.stats-charts{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:16px}.stats-chart-scroll,.stats-table-wrap{overflow-x:auto}.stats-bars{display:grid;grid-template-columns:repeat(var(--days),minmax(24px,1fr));gap:5px;padding:20px 16px 12px;min-width:calc(var(--days)*29px)}.stats-day{text-align:center;font-size:10px;color:#748494}.stats-day b{font-size:11px;font-weight:600}.stats-day>div{height:110px;display:flex;align-items:flex-end;justify-content:center;margin:5px 0}.stats-day i{display:block;width:75%;max-width:36px;background:#76a6b6;border-radius:3px 3px 0 0}.stats-day:last-child i{background:#c9a65f}.stats-day small{font-size:9px;white-space:nowrap}.stats-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:18px}.stats-summary>div{display:flex;flex-direction:column;gap:5px}.stats-summary b{font-size:23px;color:#42586a}.stats-summary span,.stats-note{font-size:11px;color:#778695;line-height:1.6}.stats-note{padding:0 16px 12px;margin:8px 0}.stats-table{width:100%;font-size:12px}.stats-table th,.stats-table td{text-align:right;padding:9px 14px;white-space:nowrap}.stats-table th:first-child{text-align:left}.stats-table tbody th{font-weight:500}.stats-table caption{text-align:left;caption-side:bottom;padding:12px 16px}.stats-table tbody tr:nth-child(even){background:#f8fafb}#view-statistik>.panel{margin-bottom:16px}

.role-change-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.role-change-form select{padding:5px 8px;border:1px solid #d9e2e7;border-radius:4px;background:#fff;color:#526879;font:inherit}.role-change-form label{font-size:11px;color:#7a8791;display:flex;align-items:center;gap:4px}

.adm-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:3px 0;color:#7a8996;font-size:11px;font-weight:500}.adm-pagination-links{display:flex;align-items:center;gap:10px}.adm-pagination-button{display:inline-flex;align-items:center;padding:5px 9px;border:1px solid #d8e3e9;border-radius:4px;background:#fff;color:#42758c;text-decoration:none;font-size:11px;white-space:nowrap}.adm-pagination-button:hover{background:#eef5f8}.adm-pagination-button[aria-disabled="true"]{color:#a6b0b8;background:#f7f9fa}.adm-pagination-current{font-size:10px;white-space:nowrap}.adm-pagination-button:focus-visible{outline:2px solid #42758c;outline-offset:2px}

.audit-table td:first-child{white-space:nowrap}.audit-table td:last-child{min-width:220px;overflow-wrap:anywhere}.audit-table .adm-badge{white-space:normal}#admin-log-form{flex-wrap:wrap}#admin-log-form input,#admin-log-form select{max-width:100%}#admin-log-results[aria-busy="true"]{opacity:.6}

.member-block-actions{padding:9px 16px;border-top:1px solid #e5ecef;font-size:10px;color:#82919a;background:#fafbfc}.member-block-actions p{font-size:11px;line-height:1.7;margin:6px 0}.member-block-actions summary,.member-block-link{cursor:pointer;color:#82919a;font-size:10px}.member-block-link{border:0;padding:0;background:transparent;text-decoration:underline}.member-block-actions details form{padding:8px 0;max-width:440px}.member-block-actions label{display:flex;align-items:center;gap:6px;font-size:11px}.member-block-confirm{margin-top:10px;border:1px solid #d4958c;background:#f9ece9;color:#a4584c;padding:6px 10px;border-radius:4px;cursor:pointer;font:700 11px Arial,sans-serif}.blocked-members-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #e7edf0}.blocked-members-list>p{font-size:12px;color:#81909a}

.member-block-actions .profile-report-open{display:block;margin-bottom:7px;text-decoration:none}.profile-report-overlay{position:fixed;inset:0;z-index:1100;background:#243c4b55;display:flex;align-items:center;justify-content:center;padding:20px}.profile-report-overlay[hidden]{display:none!important}.profile-report-dialog{background:#fff;border:1px solid #d4e0e5;border-radius:8px;width:min(400px,100%);max-height:85vh;overflow:auto;box-shadow:0 14px 45px #1f3d5133;color:#526d7c;outline:none}.profile-report-dialog header{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:17px 20px 13px;border-bottom:1px solid #e8eef1;background:#f8fafb}.profile-report-dialog header small{font-size:8px;letter-spacing:.08em;color:#8b9ba4}.profile-report-dialog h2{font:800 17px Nunito,Arial,sans-serif;margin:5px 0 0;color:#516d7c}.profile-report-dialog header button{border:0;background:transparent;color:#8c9ca5;font-size:21px;cursor:pointer;padding:0 3px}.profile-report-dialog form{padding:0 20px 18px}.profile-report-dialog p{font-size:11px;line-height:1.8}.profile-report-dialog label{font-size:11px;font-weight:700;display:block;margin:12px 0 7px}.profile-report-dialog textarea{display:block;width:100%;padding:9px;border:1px solid #d5e1e6;border-radius:5px;resize:vertical;font:12px/1.7 Arial,sans-serif;color:#496677;background:#fcfdfd;box-sizing:border-box}.profile-report-dialog footer{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.profile-report-dialog #profile-report-feedback{padding:0 20px;color:#517b79}.profile-report-is-open{overflow:hidden}.profile-report-dialog :focus-visible{outline:2px solid #45998f;outline-offset:3px}

.page-admin .lajv-moderation-dialog.account-info-dialog{width:min(520px,100%);max-height:85vh}.account-info-identity{display:flex;align-items:center;gap:10px;padding:14px 16px;background:#fbfcfd;border-bottom:1px solid #e5ecef}.account-info-identity img{width:38px;height:38px;object-fit:cover;border-radius:7px}.account-info-identity>div{display:flex;flex-direction:column;gap:3px}.account-info-identity strong{font:800 16px Nunito,Arial,sans-serif;color:#42657a}.account-info-identity span{font-size:10px;color:#899aa4}.account-info-note{font-size:10px;color:#8a9aa3;padding:10px 14px;margin:0;line-height:1.7}.account-info-log-heading{margin-top:12px}.page-admin .account-info-dialog .account-info-log th{width:auto;font-size:9px}.account-info-log td{font-size:10px}.account-info-log code{font-size:10px;overflow-wrap:anywhere}.account-info-log details summary{cursor:pointer;color:#6c899a;font-size:10px}.account-info-log details p{max-width:200px;overflow-wrap:anywhere;font-size:10px;line-height:1.6}#account-info-feedback{font-size:11px;color:#7d939f;padding:0 15px}

/* Quieter account overview, scoped to its modal. */
.page-admin #account-info-modal{background:rgba(35,52,63,.25)}
.page-admin #account-info-modal .account-info-dialog{width:min(460px,100%);max-height:82vh;border-color:#dbe3e7;border-radius:7px;box-shadow:0 10px 30px rgba(35,55,68,.15)}
.page-admin #account-info-modal .lajv-moderation-body{padding:12px 14px}
.page-admin #account-info-modal [data-account-info]{border:0;border-radius:0;background:transparent;box-shadow:none}
.page-admin #account-info-modal .panel-heading{min-height:28px;padding:7px 30px 7px 0;background:transparent;border-bottom:1px solid #edf0f2;color:#74838e;font-size:9px;font-weight:600;letter-spacing:.04em}
.page-admin #account-info-modal .account-info-identity{padding:11px 0;background:transparent;border-bottom:1px solid #edf0f2;gap:9px}
.page-admin #account-info-modal .account-info-identity img{width:28px;height:28px;border-radius:5px}
.page-admin #account-info-modal .account-info-identity strong{font-size:13px;font-weight:700;color:#607480}
.page-admin #account-info-modal .account-info-identity span{font-size:9px;color:#89959e}
.page-admin #account-info-modal .adm-table th{width:105px;background:transparent;border-bottom-color:#f0f3f5;font-size:9px;letter-spacing:0;font-weight:500;color:#7c8a94;padding:7px 0;vertical-align:top}
.page-admin #account-info-modal .adm-table td{padding:7px 0 7px 10px;border-bottom-color:#f0f3f5;font-size:11px;color:#607480}
.page-admin #account-info-modal .account-info-log-heading{margin-top:10px}
.page-admin #account-info-modal .account-info-log th{width:auto;font-size:10px;padding:6px 0}
.page-admin #account-info-modal .account-info-log td{font-size:10px;padding:7px 7px 7px 0}
.page-admin #account-info-modal .account-info-note{padding:8px 0;font-size:9px;line-height:1.6;color:#87949d}
.page-admin #account-info-modal .panel-foot{padding:9px 0 2px;background:transparent;border-top-color:#edf0f2;text-align:right;font-size:10px;font-weight:500}
.page-admin #account-info-modal .panel-foot a{color:#718998}
.page-admin #account-info-modal .lajv-moderation-close{font-size:18px;color:#8a979f;background:transparent;box-shadow:none;border:0}
.page-admin #account-info-modal #account-info-feedback:empty{display:none}

/* Let the header fill the dialog naturally; keep spacing on the content. */
.page-admin #account-info-modal .lajv-moderation-body{padding:0}
.page-admin #account-info-modal [data-account-info]>.panel-heading:first-child{background:linear-gradient(#fff,#f7f9fa);margin:0;padding:10px 42px 10px 16px;min-height:34px;border-bottom:1px solid #e3e9ed;border-radius:6px 6px 0 0;box-sizing:border-box}
.page-admin #account-info-modal .account-info-identity{margin:0 16px;padding:11px 0}
.page-admin #account-info-modal [data-account-info]>.adm-table{width:calc(100% - 32px);margin:0 16px}
.page-admin #account-info-modal .account-info-log-heading{margin:10px 16px 0;padding-right:0}
.page-admin #account-info-modal .adm-table-wrap{padding:0 16px}
.page-admin #account-info-modal .adm-table-wrap>.adm-table{width:100%;margin:0}
.page-admin #account-info-modal .account-info-note{padding:9px 16px}
.page-admin #account-info-modal .panel-foot{padding:10px 16px}


.page-admin #account-info-modal .lajv-moderation-close{position:absolute;top:3px;right:7px;width:28px;height:28px;padding:0;display:grid;place-items:center;line-height:1;border:0;border-radius:4px;color:#71838e;background:transparent;cursor:pointer}
.page-admin #account-info-modal .lajv-moderation-close svg{display:block;width:14px;height:14px;pointer-events:none}
.page-admin #account-info-modal .lajv-moderation-close:hover{color:#425e70;background:#eaf0f3}
.page-admin #account-info-modal .lajv-moderation-close:focus-visible{outline:2px solid #759ba8;outline-offset:1px}

/* Startsidan: avatarens fasta ruta får inte växa med textraden. */
.suggest .newbie>.tiny-avatar{flex:0 0 34px;width:34px;height:34px;min-width:34px;overflow:hidden}.suggest .newbie>.tiny-avatar>img{display:block;width:100%;height:100%;object-fit:cover}.suggest .newbie>div:not(.tiny-avatar){flex:1;min-width:0}.suggest .newbie>a{flex-shrink:0;font-size:10px;white-space:nowrap}

.home-poll-form fieldset{border:0;padding:0;margin:0 0 12px;display:grid;gap:7px}.home-poll-form label{display:flex;align-items:center;gap:8px;padding:8px 9px;border:1px solid #dce8e5;border-radius:5px;background:#fbfdfc;font-size:11px;color:#5d7b84;cursor:pointer}.home-poll-form label:has(input:checked){background:#eaf6f1;border-color:#93c7b7}.home-poll-form input{accent-color:#329b87}.home-poll-form small{display:block;margin-top:10px}.home-poll-feedback{font-size:11px;color:#558d7d}.home-poll-form .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.home-status-feedback{margin:0;padding:6px 12px;font-size:10px;color:#518d7b;background:#f5faf7}.home-status-feedback:empty{display:none}.home-status-feedback.is-error{color:#b56555;background:#fff8f3}#home-status-form .mini-avatar{flex-shrink:0}#home-status-form button{white-space:nowrap}

.public-member-strip .tiny-avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}.public-members-empty{padding:14px;font-size:11px;color:#83939d;grid-column:1/-1}.public-poll-login{font-size:11px;line-height:1.7;margin:12px 0 0}

/* Text fields share a plain writing surface across Playarea. */
textarea { background-color: #fff !important; background-image: none !important; }