* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	padding-top:0;
	padding-bottom:0;
	padding-left:0;
	padding-right:0;
	font-size: 16px;
    font-weight: 500;
    font-family: system-ui, -apple-system, sans-serif;
	line-height: 1.5;
}

.rel{position:relative}
.flip-h{transform: scaleX(-1)}
.flip-v{transform: scaleY(-1)}
.hidden{display:none}

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom right, #E0E7FF, #EEF2FF, #fff);
    padding: 1rem;
    transition: all 0.3s ease;
	font-size: 16px;
    font-weight: 500;
    font-family: system-ui, -apple-system, sans-serif;
	line-height: 1.5;
}
p{font-size:21px;}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
}

h1{font-size:2.5rem}
h2{font-size:2.0rem}
h3{font-size:1.5rem}
h4{font-size:1.3rem}
h5{font-size:1.2rem}
h6{font-size:1.1rem}

body.dark {
    background: linear-gradient(to bottom right, #1E1B4B, #2f2e4d, #1F2937);
    color: #F3F4F6;
}

.page-container {
	position:relative;
    width: 100%;
    max-width: 64rem;
    display: flex;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
}

body.dark .page-container {
    background: #1F2937;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

body.dark .left-panel {
    background: linear-gradient(to bottom right, #6366F1, #7C3AED);
}

.page-container .right-panel {
    width: 100%;
    padding: 3rem;
    background: #fff;
    position: relative;
}

body.dark .page-container .right-panel {
    background: #1F2937;
}

h1, h2, h3, h4 {
    font-weight: bold;
    margin-bottom: 1.5rem;
}

body.dark h3 {
    color: #F3F4F6;
}

.form-group {
    margin-bottom: 1rem;
}

label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

body.dark label {
    color: #D1D5DB;
}

input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    outline: none;
    transition: all 0.2s;
}

body.dark input[type="email"],
body.dark input[type="password"] {
    background: #374151;
    border-color: #4B5563;
    color: #F3F4F6;
}

input[type="email"]:focus,
input[type="password"]:focus {
    border-color: #4F46E5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.remember-forgot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
}

.remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn {
    width: 100%;
    padding: .5em 1em;

    /* blue to greenish: */
    background: #3b77e5;
    background: linear-gradient(to top right, #3b77e5, #3ca0ed);

    /* blue to purplish: */
    background: #4f46e5;
    background: linear-gradient(to bottom right, #4F46E5, #4F46E5, #453ecc);

    color: #fff;
    border: none;
    border-radius: 0.375rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.5s, background-color 0.5s;
    text-decoration: none;
    text-align: center;
    display: inline-block;
}

.btn:hover {
    background: #4338CA;
    background: linear-gradient(to bottom right, #5048ea, #5048ea, #5f43ff);
}

.btn, .btn:hover,
body.dark .btn, body.dark .btn:hover{
    color: #fff
}

.left-panel {
    display: none;
    width: 50%;
	/* blue to purplish: */
    background: linear-gradient(to bottom right, #4F46E5, #7C3AED);
	/* blue-to-green: */
    background: linear-gradient(to bottom right, #4F46E5, #1ea37e);
    background: linear-gradient(to bottom right, #4F46E5, #3ca0ed);
    padding: 3rem;
    color: #fff;
    position: relative;
}
.right-panel .btn{
    /* blue to greenish: */
    background: #3b77e5;
    background: linear-gradient(to top right, #3b77e5, #3ca0ed);
}
.right-panel .btn:hover{
    /* blue to greenish: */
    background: #4f46e5;
    background: linear-gradient(to top right, #3267c3, #368fd3);
}

.signup {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: #4B5563;
}

body.dark .signup {
    color: #D1D5DB;
}

a {
    color: #4F46E5;
    text-decoration: none;
}

body.dark a {
    color: #818CF8;
}

a:hover {
    color: #4338CA;
}

body.dark a:hover {
    color: #A5B4FC;
}

.copyright {
    position: fixed;
    bottom: 1rem;
	right: 1rem;
    font-size: 0.75rem;
    color: #6B7280;
	opacity:.5;
	margin:0 auto;
	display:block;
	background:white;
	padding: 0 .5rem;
	border-radius: 1rem;
}
.copyright a{
	text-decoration:underline;
    font-size: 0.75rem;
}
[data-portrait] .copyright{
	display:none;
}

body.dark .copyright {
    color: #9CA3AF;
}

@media (min-width: 768px) {
    .page-container .left-panel {
        display: block;
    }
    .page-container .right-panel {
        width: 50%;
    }
}

.feed {
    display: none;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 0 auto;
    width: 45rem;
    max-width: 100%;
}
.feed .card .card-image:first-child {
    aspect-ratio: 16 / 9;
    padding-top: 65%; /* Adjust for the desired aspect ratio (4:3 = 133%) */
	max-height: 60vh; /* Prevents it from being super tall */
	width: 100%;
}
.feed-shown .feed {
	display: grid;
}

.club-browser {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}
.club-browser-shown .club-browser {
	display: grid;
}

.club-browser .card{
    transition: transform 0.2s;
}
.card {
    background: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
	box-shadow: 0 10px 50px -12px rgba(0, 0, 255, 0.15);
	transition: transform 0.2s;
}
body.dark .card {
    background: #1F2937;
}
body.dark[data-portrait] .card {
	box-shadow: 0 10px 50px -12px rgba(255, 0, 0, 0.15);
}

.card:hover {
    transform: translateY(-2px);
}

.card-image {
    height: 225px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.member-count {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
}

.card-content {
    padding: 1.5rem;
}

.card-title {
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #1F2937;
}

body.dark .card-title {
    color: #F3F4F6;
}

.card-desc {
    color: #6B7280;
    margin-bottom: 1rem;
    line-height: 1.5;
}

body.dark .card-desc {
    color: #D1D5DB;
}

.recent-messages {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #E5E7EB;
}

body.dark .recent-messages {
    border-top-color: #374151;
}

.message {
    font-size: 0.875rem;
    color: #6B7280;
    padding: 0.25rem 0;
}

body.dark .message {
    color: #9CA3AF;
}

.message-user {
    font-weight: 500;
    color: #4F46E5;
}

body.dark .message-user {
    color: #818CF8;
}

body.align-top {
    align-items: flex-start;
    padding: 2rem;
}

/* Styles for Main Toolbar */

.main-toolbar{
	/*
	background:linear-gradient(to bottom right, #4f46e5, #5633c8);
	*/
	background:#3e37b5;
	position:fixed;
	border-radius:10rem;
	z-index:2000;
	display:flex;
	align-items:center;
	justify-content:center;
	top:1rem;
	left:50%;
	transform:translateX(-50%);
	transition:all 1s;
	height:2.9rem;
	width:4rem;
	width:20rem;
	cursor:default;
	user-select: none;
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	background:linear-gradient(to bottom right, #3e37b5, #42279a);
/*
	overflow:hidden;
*/
	opacity:.9;
	transition: opacity .3s ease-in-out 0s;
}
.main-toolbar:hover{
	opacity:1;
}
[data-landscape] .main-toolbar{
	width:20rem;
	background:linear-gradient(to bottom right, #3e37b5, #42279a);
	background:#3339;
}
body.dark[data-landscape] .main-toolbar{
	box-shadow:0 0 1rem #42279aff;
}
.main-toolbar .drawer{
	left:0;
	position:absolute;
	top:0;
	bottom:0;
	border-radius:10rem;
	background:rgba(255,0,0,.0);
	transition:all .3s;
	white-space:nowrap;
	height:100%;
	width:20rem;
	/*
	border:3px solid red;
	*/
}
.expanded-toolbar .main-toolbar{
	width:20rem;
}
.expanded-toolbar .main-toolbar .expand{
	transform: translateX(-1)
}
.mso{
	font-family: 'Material Symbols Outlined';
}
.panel .close-icon,
.main-toolbar button{
	background:transparent;
	box-shadow:none;
	cursor:pointer;
	border:none;
	font-size: 1.5rem;
	font-weight:400;
	color:#fff9;
	margin:.5rem 0;
	padding:0rem 1rem 0rem;
	transition: all 0.2s, opacity 1s ease-in-out .2s;
	/*
		border:2px solid yellow;
	*/
}
.main-toolbar button .logo{
	width:1.5rem;
	padding:0;
}
[data-landscape] .main-toolbar button{
	color:#fff;
	padding:0rem 1rem;
}
/* Position expand absolutely */
.main-toolbar .expand {
	position: absolute;
	right: -.1rem;
	height:100%;
	visibility: hidden;
	transition: all 0.2s ease-in-out .1s;
	transition: opacity 0;
	border-radius:10rem;
	width:4rem;
	opacity:1;
	/* border:3px solid red; */
}

.dark .main-toolbar:hover button,
.main-toolbar:hover button{
	color:#fff;
}

[data-portrait] .main-toolbar{
	top:auto;
	bottom:2.25rem;
}
.main-toolbar .expand { visibility:hidden }

[data-portrait] .main-toolbar{
	width:4rem;
}
[data-portrait] .main-toolbar,
[data-portrait] .main-toolbar button{
	background:#3e37b5;
}
[data-portrait] .main-toolbar{
	top:auto;
	bottom:.25rem;
	right:.5rem;
	width:20rem;
}

/*
[data-portrait] .expanded-toolbar .main-toolbar{
	padding-right:4rem;	
}
[data-portrait] .expanded-toolbar .main-toolbar button{
	opacity:1;
	visibility:visible;
}
[data-portrait] .main-toolbar button{
}
[data-portrait] .main-toolbar .expand{
	margin: 0;
	opacity:1;
	visibility:visible;
}
*/

.expanded-toolbar .main-toolbar button:nth-child(1) { transition-delay: 1.7s; }
.expanded-toolbar .main-toolbar button:nth-child(2) { transition-delay: 0.5s; }

/* left-right panel animations etc */

body.panel-shown{
	overflow:hidden;
}

.dark-overlay{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	opacity:0;
	transition:opacity .5s;
	display:none;
}
body.panel-shown .dark-overlay{
	z-index:500;
	opacity:1;
	display:block;
	background: #fffa;
}
body.dark.panel-shown .dark-overlay{
	background: #000a;
}
body.dark.left-panel-shown .panel.left,
body.dark.right-panel-shown .panel.right{
	box-shadow:0 0 5rem 5rem #0005;
}
body.left-panel-shown .panel.left,
body.right-panel-shown .panel.right{
	box-shadow:0 0 5rem 5rem #fff9;
	box-shadow:0 0 5rem 5rem #42279a44;
}

.panel{
	transition: all .3s;
	position:fixed;
	top:0;
	bottom:0;
	height:100%;
	max-width:80%;
	background:#e2e8ff;
	color:#fff;
	z-index:2500;
	padding:0;
	overflow-X:hidden;
}

body.dark .panel{
	background:#000d linear-gradient(to bottom right, #3e37b522, #42279a22);
	background:#211d30;
	background:#111d22;
}

.panel.right{
	width:45rem;
	right:-45rem;
}
.panel.left{
	width:15rem;
	left:-15rem;
}

.panel .card:nth-child(2) {
	border-top:5px solid #ff5e00;
	margin-top:-2.1rem;
}
body .panel .card,
body[data-portrait] .panel .card,
body[data-landscape] .panel .card,
body.dark .panel .card,
body.dark[data-portrait] .panel .card,
body.dark[data-landscape] .panel .card,
.panel .card {
    border-radius: 0;
	box-shadow:none;
}
.panel .card:hover {
    transform: none;
}

.panel .close-icon{
	top:0;
	z-index:3000;
	display:inline-block;
}

.right-panel-shown .panel.right{right:0}
.panel.right .close-icon{left:.5rem;top:.5rem}

.left-panel-shown .panel.left{left:0}
.panel.left .close-icon{right:.5rem;top:.5rem}
/* in portrait mode, move the close icon to the bottom */
[data-portrait] .panel.right .close-icon{position:absolute;top:auto;bottom:.5rem}
[data-portrait] .panel.left .close-icon{position:absolute;top:auto;bottom:.5rem}
body .panel .close-icon{color:#333}
body.dark .panel .close-icon{color:#fff;}

/* tooltip */

.has-tooltip {
	position: relative;
	display: inline-block;
	cursor: pointer;
	padding: 8px;
	border: 1px dashed #999;
}

.tooltip {
	position: absolute;
	font-size:.9rem;
	bottom:140%;
	left: 50%;
	transform: translateX(-50%);
	padding: 8px 14px;
	border-radius: 10rem;
	color: #fff;
	white-space: nowrap;
	pointer-events: none;  /* Added this */
	z-index: 5000;
	background: #00000088;
	box-shadow: 0 0 1rem 1px #5048ea88;
	filter: drop-shadow(0 2px 2px rgba(0,100,255,0.2));
	opacity:0;
	transition: opacity .5s ease-in-out .5s;
}
.tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 8px solid transparent;
	border-top: 8px solid  #00000088;
	filter: drop-shadow(0 -2px 2px rgba(0,100,255,0.2));
	z-index: 5000;
	opacity:.8;
}
.has-tooltip:hover .tooltip {
	opacity:1;
}

[data-landscape] .main-toolbar .tooltip{
	bottom:auto;
	top:130%;
}
[data-landscape] .main-toolbar .tooltip::after{
	top:auto;
	bottom:100%;
	transform: translateX(-50%) scaleY(-1);
}

.panel h2{
	display:inline-block;
	margin: 1rem 0rem;
	color:#343346;
}
[data-portrait] .panel h2{
	margin: 1rem 1rem;
	font-size:1.5rem;
}

.panel .section {
	margin: 1rem;
	padding: 2rem 1.5rem;
	background:white;
	border-radius:1rem;
}

body.dark .panel .section {
	background:#211d30;
}

/*
.club-browser-shown .feed-btn{
	display:block;
}

.club-browser-shown .club-browse-btn{
	display:none;
}

.feed-shown .club-browse-btn{
	display:block;
}

.feed-shown .feed-btn{
	display:none;
}
*/


.wallpaper-upload-area{
	background:red;
	display:block;
	position:relative;
	height:23rem;
	border-bottom:1px solid #fff7;
}

/* club create */

/*
body {
	font-family: system-ui, -apple-system, sans-serif;
	background: #f3f4f6;
	color: #1f2937;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.card {
	width: 100%;
	max-width: 400px;
	background: white;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	position: relative;
}
*/

.create-club .upload-progress {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: #e5e7eb;
	z-index: 20;
	opacity: 0;
	transition: opacity 0.3s;
}

.create-club .upload-progress.active {
	opacity: 1;
}

.create-club .upload-progress-bar {
	height: 100%;
	background: #2563eb;
	transition: width 0.2s;
	width: 0%;
}

.create-club .wallpaper-section {
	height: 160px;
	background: #e5e7eb;
	position: relative;
	cursor: pointer;
	transition: all 0.2s;
}

.create-club .wallpaper-section.drag-over {
	background: #dbeafe;
	border: 2px dashed #2563eb;
}

.create-club .wallpaper-preview {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.create-club .upload-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	opacity: 0;
	transition: opacity 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	flex-direction: column;
	gap: 8px;
}

.create-club .upload-overlay span:last-child {
	font-size: 14px;
}

.create-club .wallpaper-section:hover .upload-overlay {
	opacity: 1;
}

.create-club .avatar-section {
	position: absolute;
	left: 24px;
	top: 120px;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #e5e7eb;
	border: 4px solid white;
	cursor: pointer;
	overflow: hidden;
	transition: all 0.2s;
}

.create-club .avatar-section.drag-over {
	background: #dbeafe;
	border: 4px solid #2563eb;
}

.create-club .avatar-preview {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.create-club .avatar-section .upload-overlay {
	border-radius: 50%;
}

.create-club .upload-status {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 500;
	z-index: 15;
	opacity: 0;
	transition: opacity 0.3s;
}

.create-club .upload-status.visible {
	opacity: 1;
}

.create-club .status-uploading { background: #2563eb; color: white; }
.create-club .status-error { background: #ef4444; color: white; }
.create-club .status-complete { background: #10b981; color: white; }

.create-club .form-section {
	padding: 56px 24px 24px;
}

.create-club .input-group {
	margin-bottom: 16px;
}

.create-club .input-group label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	margin-bottom: 4px;
	color: #374151;
}

.create-club .input-group input,
.create-club .input-group textarea {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 0.875rem;
	transition: border-color 0.2s;
}

.create-club .input-group input:focus,
.create-club .input-group textarea:focus {
	outline: none;
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

textarea {
	resize: vertical;
	min-height: 100px;
}

.create-club .create-button {
	width: 100%;
	padding: 12px;
	color: white;
	border: none;
	border-radius: 6px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
}

.create-club .create-button:hover {
	background: #1d4ed8;
}

.create-club .create-button:disabled {
	opacity: .5;
	cursor: not-allowed;
}

.create-club .error-message {
	color: #ef4444;
	font-size: 0.875rem;
	margin-top: 4px;
}