/* Theme variables */
:root { --bg-page: #fff; --bg-sidebar: #f4f4f4; --bg-header: #fff; --header-border: #999; --text-header: #333; --text-main: #333; --text-muted: #666; --border-color: #999; --sidebar-width: 300px; --header-height: 40px; --sidenav-width: 280px; --color1: #0085ff; --blue: #0085ff; --blue-light: #cfebfc;}
@media (prefers-color-scheme: dark) { :root { --bg-page: #121212; --bg-sidebar: #1e1e1e; --bg-header: #0f172a; --header-border: #999; --text-header: #fff; --text-main: #e0e0e0; --text-muted: #aaa; --border-color: #999; --header-height: 40px; --color1: #0085ff; } }
.dark-theme { --bg-page: #121212; --bg-sidebar: #1e1e1e; --bg-header: #0f172a; --header-border: #999; --text-header: #fff; --text-main: #e0e0e0; --text-muted: #aaa; --border-color: #999; --header-height: 40px; --color1: #0085ff; }
* { box-sizing: border-box; padding: 0; margin: 0; -webkit-appearance: none; }

/* Main page layout settings */
html { box-sizing: border-box; background-color: #999999; margin: 0; padding: 0; height: 100%; }
body { box-sizing: border-box; margin: auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: var(--bg-page); color: var(--text-main); display: flex; flex-direction: column; min-height: 100dvh; transition: background 0.3s ease; max-width: 1500px; font-size: 1rem; line-height: 1.2; }
.main-header { min-height: var(--header-height); height: auto; background: var(--bg-header); border-bottom: 1px solid var(--header-border); position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.header-left, .header-right { display: flex; align-items: center; height: var(--header-height); z-index: 10; }
.header-center { flex-basis: 100%; width: 100%; font-size: 0.80rem; color: var(--text-muted); text-align: center; }
.logo-img {max-height: calc(var(--header-height) - 5px); padding-top: 0.25rem; width: auto; display: block; }
.layout-wrapper { display: grid; flex: 1; grid-template-columns: 1fr; overflow: hidden; }
#menu-toggle { height: 100%; aspect-ratio: 1 / 1; background: transparent; border: none; color: var(--text-header); font-weight: bold; font-size: 1.8rem; cursor: pointer; padding: 0px 3px; }
#menu-toggle:hover { background: rgba(255, 255, 255, 0.1); }
#theme-toggle { background: transparent; border: none; cursor: pointer; font-size: 1.2rem; padding: 0 10px; }
.sidebar { background: var(--bg-sidebar); border-right: 1px solid var(--border-color); overflow: hidden; display: none; }
.sidebar a { padding: 0.5rem 0.5rem 0.5rem 1rem; text-decoration: none; color: var(--text-main); display: block; transition: 0.3s }
.sidebar a:hover { color: #f1f1f1; background: var(--color1) }


.checkbox-group {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.checkbox-group label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px; /* Space between box and text */
    font-size: 1rem;
    color: var(--text-main);
}

.checkbox-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--bg-sidebar); /* Matches your subtle blue tint */
    cursor: pointer;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--blue);
    background-color: white;
    cursor: pointer;
    vertical-align: middle;
    display: inline-block;
}

input[type="checkbox"]:checked {
    background-color: var(--blue);
    border: 4px solid white;
    outline: 2px solid var(--blue);
}

@media (min-width: 800px) {
    .layout-wrapper { grid-template-columns: 0px 1fr; }
    body.sidebar-open .layout-wrapper { grid-template-columns: var(--sidebar-width) 1fr; }
    .sidebar { display: block; }
}
button, input, select, textarea { font-family: inherit; }
input { padding: 0.3rem; font-size: 1rem; border: solid 1px var(--color1); border-radius: 0.4rem; }

.main-footer { padding: 0.5rem; text-align: center; background: var(--bg-sidebar); border-top: 1px solid var(--border-color);
    font-size: 0.8rem; color: var(--text-muted); }
a { color: var(--color1); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--text-main); }
.button1 { display: inline-flex; align-items: center; justify-content: center; padding: 0.15rem 0.3rem 0.2rem; font-weight: 500; border-radius: 0.5rem; cursor: pointer; border: 2px solid var(--color1); background-color: var(--color1); color: #fff; font-family: inherit; }
.button1:hover { background-color: transparent; color: var(--color1); }
.sidebar-content { color: var(--text-main); padding: 0.5rem; }
.div-header-qm, .div-header { width: 100%; font-size: 1.2rem; font-weight: bold; text-align: center; color: var(--color1); margin-bottom: 0.5rem; display: flex;
    justify-content: center; align-items: center; cursor: pointer; }
.div-header-qm::after { content: ""; display: inline-block; width: 1.2rem; height: 1.2rem; margin-left: 10px; background-image: url('questionmark_transparant.png'); background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.div-header-qm:hover::after { transform: scale(1.3) rotate(5deg); filter: brightness(1.2); }

.textbox { border-style: solid; border-color: var(--blue); border-radius: 0.5rem; margin: 0.5rem 0; padding: 0.6rem; }
.big { font-size: 1.1rem }
.bigger { font-size: 1.2rem }
.biggest {font-size:  1.3rem}
.bold { font-weight: bold; }
.border { border-width: 1px; }
.noborder { border-width: 0px; }
.taright { text-align: right; }
.tacenter { text-align: center; }
.taleft { text-align: left; }
.mt10  { margin-top: 10px; }
.mb10 { margin-bottom: 10px; }
.color1 { color:  var(--color1); }
.w100 { width: 100% }
.loginout { width: 100%; padding: 0.1rem; font-size: 0.8rem; color: var(--text-main); text-align: center; }
.close-btn { position: absolute; top: 5px; right: 10px; font-size: 2.5rem; font-weight: bold; color: var(--text-main); background: none; border: none; cursor: pointer; line-height: 1; padding: 5px; }
.close-btn:hover { opacity: 0.7; transform: scale(1.1); }


.main-content { position: relative; }
#overlay { position: absolute; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 33; background: color-mix(in srgb, var(--bg-sidebar), transparent 20%); backdrop-filter: blur(0.1rem); }
#popup { position: absolute; top: 0; left: 0; width: 100%; z-index: 34; overflow-y: auto; display: none; justify-content: center; align-items: flex-start; padding: 0.5rem; }
#popup > div { display: block; margin: 0.5rem auto; padding: 0.5rem; border-radius: 0.5rem; border: solid 2px var(--blue); background: #ffffff; width: 100%; box-sizing: border-box; }
#popupClose { font-size: 2rem; line-height: 1; font-weight: bold; text-align: center; padding: 5px; border-bottom: solid 1px #cccccc; cursor: pointer; color: #333; }
#popupClose:hover { background:  #f3f3f3; }
#popupContent { margin-top: 0.5rem; color: #333;}
#description { display:  none; }

.sidenav { height: 100%; width: var(--sidenav-width); position: fixed; top: 0; left: calc(var(--sidenav-width) * -1);background-color: var(--bg-sidebar); z-index: 1000; transition: transform 0.3s ease; box-shadow: 2px 0 10px rgba(0,0,0,0.2); }
.sidenav.active { transform: translateX(var(--sidenav-width)); }
.sidenav-content { margin-top: 50px; color: var(--text-main); padding: 0.5rem; }
.sidenav-content a { padding: 0.5rem 0.5rem 0.5rem 1rem; text-decoration: none; color: var(--text-main); display: block; transition: 0.3s }
.sidenav-content a:hover { color: #f1f1f1; background: var(--color1) }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999; }
.sidebar-overlay.active { display: block; }

.bsky-input-container { box-sizing: border-box; width: 100%; max-width: 500px; margin: 0.3rem auto; padding-left: 0.5rem; 
    padding-right: 0.5rem; }
.bsky-input-group { box-sizing: border-box; display: flex; align-items: stretch; width: 100%; border: 2px solid #ddd; 
    border-radius: 8px; overflow: hidden; background: #fff; }
.bsky-input-group:focus-within { border-color: var(--color1); }
.bsky-prefix { background: var(--color1); color: #fff; padding: 0 5px; display: flex; align-items: center; font-weight: bold;
    border-right: 1px solid #ddd; }
#bskyHandle, #handle { flex-grow: 1; border: none; padding: 8px; outline: none; border-radius: 0; -webkit-appearance: none; }

#submitBtn { background: var(--color1); color: #fff; border: none; padding: 0 5px; cursor: pointer; font-weight: bold; border-radius: 0; display: flex; align-items: center; justify-content: center; }
#submitBtn:hover { background: #0066cc; }
#submitBtn:disabled { background: #ccc; cursor: not-allowed; }
.error-msg { color: red; font-size: 0.9rem; font-weight: bold; margin: 0.2rem 0.5rem; line-height: 1.2rem; }
.sm-all { padding: 0.5rem; border-radius: 0.5rem; color: var(--text-main); white-space: pre-line; }
.sm-normal { border: solid 1px; border-color: var(--blue); color: var(--text-main); }
.sm-warning { border: solid 2px; border-color: #ffa500; background: #ffe5cc; color: #333333; }
.sm-green { border: solid 1px; border-color: #00ff40; background: #ccffcc; }
.ffp {-webkit-appearance: none; width: auto; padding: 0.2rem; font-size: 1rem; text-decoration: none; border-radius: 0.5rem; }
.ffp:hover { color:  #ffffff; background: #666666; border: solid 1px #000000}
.ffp { font-size: 0.9rem; border: solid 2px var(--blue); width: 100%; background: var(--blue-light); }

.button-action { display: inline-flex; align-items: center; justify-content: center; padding: 0.2rem; font-size: 0.9rem; font-weight: bold; border-radius: 0.5rem;  cursor: pointer; text-decoration: none; width: 75px; }
@media (hover: hover) and (pointer: fine) {
.button-follow:hover, .button-mute:hover, .button-block:hover, .button-unfollow:hover, .button-unmute:hover, .button-unblock:hover { background-color: #666666; color: #ffffff; }
}
.button-action:active { transform: scale(0.96); }
.button-follow { background: #e6f2ff; color: #0085ff; }
.button-following { background: #0085ff; color: #e6f2ff; }
.button-follow, .button-following { border: solid 1px #0085ff; }

.button-mute { background: #fff1e0; color: #ff8c00; }
.button-muting { background: #ff8c00; color: #fff1e0; }
.button-mute, .button-muting { border: solid 1px #ff8c00; }

.button-block { background: #ffe6e4; color: #ff3b30; }
.button-blocking { background: #ff3b30; color: #ffe6e4; }
.button-block, .button-blocking { border: solid 1px #ff3b30; }

.blue-link a, .blue-link a:visited { color: var(--blue); text-decoration: none; font-weight: normal;}
.white-link a, .white-link a:visited { color: var(--text-main); text-decoration: none; font-weight: normal;}
.blue-link a:hover, .white-link:hover { color: #999999; text-decoration: underline; }
select { padding: 0.2rem; border: solid 2px var(--color1); border-radius: 0.5rem; }

.additional_grid { display: grid; grid-template-columns: 50px 1fr; grid-template-rows: auto; width: 100%; grid-gap: 0px; }
.additional_icon { grid-column: 1; grid-row: 1; aspect-ratio: 1; margin: 0; padding: 5px; }
.additional_icon > img { display: block; width: 100%; }
.additional_text { grid-column: 2; grid-row: 1; padding: 0.3rem; font-size: 1rem; display: flex; align-items: center; }

.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid #999; border-radius: 50%; border-top-color: var(--blue); animation: spin 0.8s linear infinite; vertical-align: middle; }
.spinner-big { display: inline-block; width: 60px; height: 60px; border: 4px solid #999; border-radius: 50%; border-top-color: var(--blue); animation: spin 0.8s linear infinite; vertical-align: middle; }

@keyframes spin { to { transform: rotate(360deg); }}

.controls { display: flex; justify-content: center; align-items: center; gap: 25px; margin: 0.5rem; }
.sort-direction-group { display: flex; gap: 5px; }

#toast-container { position: fixed; bottom: 20px; left: 20px; background-color: #999; color: #fff; padding: 10px;     border-radius: 5px; z-index: 9999; display: block; opacity: 0; transition: opacity 0.3s ease; }
#toast-container.show { display: block; opacity: 1; }

.show_actor_grid_1 { display: grid; grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(5, 1fr); grid-gap: 0px; margin-top: 0.5rem; }
.show_actor_banner_1 { grid-column: 1 / span 15; grid-row: 1 / span 5; aspect-ratio:  3/1; z-index: 1; }
.show_actor_banner_1 > img { display: block; max-width: 100%; border: solid 2px var(--blue); border-radius: 0.5rem; }
.show_actor_ava_1 { grid-column: 1 / span 5; grid-row: 1 / span 5; aspect-ratio: 1; margin: 0; padding: 0.5rem; z-index: 2; }
.show_actor_ava_1 > img { display: block; max-width: 100%; border: solid 2px var(--blue); border-radius: 0.5rem; }
.show_actor_bluesky_1 { grid-column: 14 / span 2; grid-row: 4 / span 2; padding: auto; padding-right: 5px; display: flex; justify-content: flex-end; align-items: flex-end; z-index: 4; }
.show_actor_bluesky_1 > img { display: block; width: 100%; padding-right: 5px; }
.show_actor_display_name_1 { display: flex; align-items: center; gap: 6px; padding: 0.5rem 0.5rem 0 0.5rem; font-size: 1.1rem; }
.show_actor_handle_1 { padding: 0.3rem 0.5rem 0 0.5rem; font-size: 1.1rem; color: var(--blue);}
.show_actor_registered_1 { padding: 0.5rem 0.5rem 0 0.5rem; font-size: 1.rem; }
.show_actor_lastpost_1 { padding: 0.5rem 0.5rem 0 0.5rem; font-size: 1.rem; }
.show_actor_description_1 { padding: 0.3rem 0.5rem 0 0.5rem; white-space: pre-line; }
.show_actor_ffs_1 { margin: 0.6rem 0 1rem 0.3rem; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; gap: 5px; }

.show_actor_grid_2 { display: grid; grid-template-columns: minmax(50px,90px) 1fr; grid-template-rows: auto; width: 100%; grid-gap: 0px; }
.show_actor_banner_2 { grid-column: 1 / span 2; grid-row: 1; width: 100%; z-index: 1; background-repeat: no-repeat; background-position: top left; background-size: cover; border: solid 2px var(--blue); border-radius: 8px;}
.show_actor_ava_2 { grid-column: 1; grid-row: 1; width: 100%; height: auto; padding: 5px; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; z-index: 2; }
.show_actor_ava_2 > img { width: clamp(40px, 10vw, 80px); height: clamp(40px, 10vw, 80px); object-fit: cover; border-radius: 8px; border: solid 2px var(--blue); }
.show_actor_bluesky_2 { grid-column: 2; grid-row: 1; padding: auto; padding-right: 5px; display: flex; justify-content: flex-end; align-items: flex-end; z-index: 4; }
.show_actor_bluesky_2 > img { display: block; width: 100%; padding-right: 5px; }
.show_actor_display_name_2 { display: flex; align-items: center; gap: 6px; padding: 5px 5px 0px 5px; font-size: 1rem; }
.show_actor_handle_2 { padding: 0px -.3rem; font-size: 1rem; }
.show_actor_ffp_2 { padding: 0.3rem; font-size: 1rem; border-bottom: solid 1px #999999; }

.show_actor_grid_3 { display: grid; grid-template-columns: auto 1fr; grid-template-rows: repeat(8, auto); width: 100%; grid-gap: 0px; border-bottom: solid 1px #999999; margin-top: 0.5rem; }
.show_actor_ava_3 { grid-column: 1; grid-row: 1 / span 2; width: 100%; height: auto; padding: 0px 0.3rem; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; z-index: 2; }
.show_actor_ava_3 > img { width: clamp(45px, 12vw, 80px); height: clamp(45px, 12vw, 80px); object-fit: cover; border-radius: 0.5rem; border: solid 2px var(--blue); }
.show_actor_display_name_3 { grid-column: 2; grid-row: 1; padding: 0.3rem 0.4rem 0.1rem; font-size: 1rem; font-weight: bold; }
.display-name-inner { display: flex; align-items: center; width: 100%; }
.display-name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
.show_actor_handle_3 { grid-column: 2; grid-row: 2; padding: 0.3rem; display: block; font-size: 1rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.show_actor_ffp_3 { grid-column: 1 / span 2; grid-row: 3; padding: 0.3rem 0.3rem 0px; font-size: 0.9rem; }
.show_actor_buttons_3 { grid-column: 1 / span 2; grid-row: 4; padding: 0.3rem 0.3rem 0px; }
.show_actor_registered_3 { grid-column: 1 / span 2; grid-row: 5; padding: 0.3rem 0.3rem 0; font-size: 0.9rem; line-height: 1rem; display: flex; }
.show_actor_since_3 { grid-column: 1 / span 2; grid-row: 6; padding: 0.3rem 0.3rem 0; font-size: 0.9rem; line-height: 1rem; display: flex; }
.show_actor_lastpost_3 { grid-column: 1 / span 2; grid-row: 7; padding: 0.3rem; font-size: 0.9rem; line-height: 1rem; display: flex; }
.show_actor_registered_3 span { display: inline-block; width: 110px; flex-shrink: 0; } 
.show_actor_lastpost_3 span { display: inline-block; width: 110px; flex-shrink: 0; } 
.show_actor_since_3 span { display: inline-block; width: 110px; flex-shrink: 0; } 
.show_actor_description_3 { grid-column: 1 / span 2; grid-row: 8; padding: 0px 0.3rem 0.3rem; font-size: 1rem; }
.show_actor_description_inner_3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }


.show_actor_grid_5 { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: 1fr; grid-gap: 0; padding: 0.2rem 0.2rem 0; border-bottom: 1px solid var(--color1); }
.show_actor_ava_5 { grid-column: 1; grid-row: 1 / span 2; width: 100%; height: auto; padding: 5px; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; z-index: 2; }
.show_actor_ava_5 > img { width: clamp(25px, 10vw, 60px); height: clamp(25px, 10vw, 60px); object-fit: cover; border-radius: 8px; border: solid 2px var(--blue); }
.show_actor_display_name_5 { grid-column: 2; grid-row: 1; padding: 0.3rem 0.4rem 0.1rem; font-size: 1rem; font-weight: bold; display: flex; align-items: center; }
.display-name-inner_5 { display: flex; align-items: center; width: 100%; }
.display-name-text_5 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
.show_actor_handle_5 { grid-column: 2; grid-row: 1; padding: 0.3rem; font-size: 1rem; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.show_actor_handle_5 span { display: block; white-space: nowrap; overflow: hidden; width: 100%; text-overflow: ellipsis; }
.show_actor_additional_5 { grid-column: 3; grid-row: 1; display: flex; align-items: center; padding: 0.3rem; font-size: 1rem; }



.checkmark-img { height: 1.2em; width: auto; display: inline-block; flex-shrink: 0; margin-left: 4px; }

.table1 { padding: 0.5rem; border: solid 2px; border-color: var(--blue); border-radius: 0.5rem; background: var(--bg-page); }
.table1 table { border-collapse: collapse; background: #fff; color: #333; }
.table1 caption { background: #ffffff; }
.table1 td, .table1 th {padding: 5px; border: solid 1px #999; text-align: center}
.table1 tr:nth-child(even) {background: #fff}
.table1 tr:nth-child(odd) {background: #f3f3f3}
.table1 tr:hover td { color: #fff; background: #999; }

  
/* Back to Top Button */
/*#myBtn_up { position: fixed; bottom: 20px; right: 20px; font-size: 2rem; display: }*/



}