/* ==========================================================================
   GDIPS UI - Components
   --------------------------------------------------------------------------
   Two layers live here:
   1. `gd-*` primitives - the design-system components used by reworked pages.
   2. Legacy classes (.form, .btn-primary, .profile, …) - restyled to consume
      the same tokens so pages that still use the old markup render coherently.
   Never introduce new one-off styles per page; extend this vocabulary instead.
   ========================================================================== */

/* ==========================================================================
   1. BUTTONS - gd-* primitives
   ========================================================================== */
.gd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: 9px 18px;
	border-radius: var(--r-md);
	border: 1px solid transparent;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast), transform var(--tr-fast);
	user-select: none;
}

.gd-btn:active {
	transform: translateY(1px);
}

.gd-btn[disabled],
.gd-btn.disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

.gd-btn--primary {
	background: var(--merah);
	color: #fff;
}

.gd-btn--primary:hover {
	background: var(--merah-strong);
	color: #fff;
	text-decoration: none;
}

.gd-btn--secondary {
	background: var(--bg-3);
	color: var(--tx-1);
	border-color: var(--ink-line-strong);
}

.gd-btn--secondary:hover {
	background: var(--bg-4);
	color: var(--tx-1);
	text-decoration: none;
}

.gd-btn--ghost {
	background: transparent;
	color: var(--tx-2);
	border-color: var(--ink-line);
}

.gd-btn--ghost:hover {
	background: var(--bg-3);
	color: var(--tx-1);
	text-decoration: none;
}

.gd-btn--danger {
	background: transparent;
	color: var(--danger);
	border-color: rgba(229, 72, 77, 0.4);
}

.gd-btn--danger:hover {
	background: var(--danger-soft);
	color: var(--merah-strong);
	text-decoration: none;
}

.gd-btn--icon {
	padding: 9px 12px;
}

/* ==========================================================================
   2. LEGACY BUTTONS - same visual system (used by hundreds of pages)
   ========================================================================== */
.btn-primary,
.btn-song,
.btn-rendel,
.forgotPassword,
.btn-upload-song {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: 9px 18px;
	border-radius: var(--r-md);
	border: 1px solid transparent;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast);
	user-select: none;
	background: var(--merah);
	color: #fff;
}

.btn-song {
	background: var(--bg-3);
	color: var(--tx-1);
	border-color: var(--ink-line-strong);
}

.btn-rendel {
	background: var(--bg-3);
	color: var(--tx-1);
	border-color: var(--ink-line);
}

.forgotPassword {
	background: none;
	color: var(--c-link);
	font-weight: 500;
	padding: 4px 8px;
}

.btn-primary:hover,
.btn-song:hover,
.btn-rendel:hover {
	text-decoration: none;
	filter: brightness(1.12);
	color: #fff;
}

.btn-primary:hover {
	background: var(--merah-strong);
}

.forgotPassword:hover {
	color: var(--tx-1);
	text-decoration: underline;
}

.btn-success {
	background: var(--ok) !important;
	color: #06281a !important;
	border-color: transparent;
}

.btn-size,
.btn-block {
	width: 100%;
}

.btn-rendel.btn-manage {
	padding: 7px 12px;
}

button.btn-rendel,
a.btn-rendel {
	color: var(--tx-2);
}

button.btn-rendel:hover,
a.btn-rendel:hover {
	color: var(--tx-1);
}

.btn-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: var(--r-full);
	border: 1px solid var(--ink-line);
	background: var(--bg-3);
	color: var(--tx-2);
	cursor: pointer;
	transition: background var(--tr-fast), color var(--tr-fast);
}

.btn-circle:hover {
	background: var(--bg-4);
	color: var(--tx-1);
}

/* Round icon button used in headers (refresh, settings, message) */
.goback,
.msgupd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: var(--r-md);
	border: 1px solid var(--ink-line);
	background: var(--bg-2);
	color: var(--tx-2);
	font-size: 0.95rem;
	cursor: pointer;
	transition: background var(--tr-fast), color var(--tr-fast);
}

.goback:hover,
.msgupd:hover {
	background: var(--bg-3);
	color: var(--tx-1);
}

.closebtn {
	margin: 0 5px;
	font-size: 1.1rem;
	padding: 10px 14px;
}

.only-icon-button {
	padding: 9px 12px;
}

/* ==========================================================================
   3. FORMS
   ========================================================================== */
.field {
	margin: 0 0 var(--sp-3);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="url"],
select,
textarea,
.form-control,
.field input,
.field select,
.field textarea {
	display: block;
	width: 100%;
	padding: 9px 13px;
	background: var(--bg-0);
	border: 1px solid var(--ink-line-strong);
	border-radius: var(--r-md);
	color: var(--tx-1);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	line-height: 1.4;
	transition: border-color var(--tr-fast), background var(--tr-fast);
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
	outline: none;
	border-color: var(--merah);
	box-shadow: 0 0 0 3px var(--merah-soft);
	background: var(--bg-1);
}

input::placeholder,
textarea::placeholder {
	color: var(--tx-3);
}

input[disabled],
select[disabled],
textarea[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a9a5b4' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 32px;
}

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

input[type="color"] {
	padding: 4px;
	height: 42px;
	cursor: pointer;
}

input[type="range"] {
	padding: 0;
	border: 0;
	background: transparent;
}

.checkbox,
.checkboxes {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--tx-2);
	font-size: var(--fs-sm);
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--merah);
	width: 16px;
	height: 16px;
}

/* Search bar (browse pages) */
.gd-searchbar {
	display: flex;
	gap: var(--sp-2);
	margin: var(--sp-4) 0 var(--sp-2);
	max-width: 640px;
}

.gd-searchbar input {
	flex: 1;
}

.gd-searchbar select.gd-input {
	flex: 1;
	min-width: 0;
	width: auto;
}

.gd-searchbar .gd-btn,
.gd-searchbar .btn-primary {
	flex: none;
}

/* ---- Bootstrap form-group compat ---- */
.form-group {
	margin-bottom: var(--sp-3);
}

.form-group .form-control {
	width: 100%;
}

/* ==========================================================================
   4. LEGACY PAGE PANELS (.form family) → quiet panels
   ========================================================================== */
.form {
	background: var(--bg-2);
	border: 1px solid var(--ink-line);
	border-radius: var(--r-lg);
	padding: var(--sp-6);
	margin: 0 0 var(--sp-5);
	min-width: 0;
}

.form h1 {
	margin-bottom: var(--sp-2);
}

.form__inner {
	display: grid;
	gap: var(--sp-2);
}

.form__inner p {
	margin: 0;
	color: var(--tx-2);
}

.form-control {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	background: transparent;
	border: 0;
	padding: 0;
}

.form-control .form-control {
	gap: var(--sp-2);
}

/* legacy centered box (printBox / login-box) */
.card {
	background: var(--bg-2);
	border: 1px solid var(--ink-line);
	border-radius: var(--r-lg);
}

.card-block {
	padding: var(--sp-6);
}

.container-box {
	max-width: 460px;
	margin-top: var(--sp-12);
}

.buffer {
	margin-top: var(--sp-5);
}

.smallpage {
	max-width: 560px;
	margin: 0 auto;
	width: 100%;
}

/* ==========================================================================
   5. CARDS - legacy .profile family (levels, songs, players, comments)
   ========================================================================== */
.profile {
	width: 100%;
	background: var(--bg-2);
	border: 1px solid var(--ink-line);
	border-radius: var(--r-lg);
	padding: var(--sp-4);
	transition: border-color var(--tr-fast), background var(--tr-fast);
}

.profile:hover {
	border-color: var(--ink-line-strong);
}

.profile.big {
	padding: var(--sp-4) var(--sp-5);
}

.profilenick {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--tx-1);
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	flex-wrap: wrap;
	overflow-wrap: anywhere;
}

.profilename {
	font-size: 1.6rem;
	margin: 0;
}

.profilemsg {
	font-size: var(--fs-md);
	font-weight: 400;
	color: var(--tx-1);
	margin: var(--sp-2) 0;
	overflow-wrap: anywhere;
	font-family: var(--font-body);
	line-height: var(--lh-body);
}

.profilelikes {
	margin: 0;
	color: var(--tx-2);
	font-size: var(--fs-sm);
}

.profilepercent {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--kuning);
	background: var(--kuning-soft);
	padding: 1px 7px;
	border-radius: var(--r-full);
}

/* compact meta chips (stars, downloads, likes…) - the old .profilepic */
.profilepic {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--tx-2);
	background: var(--bg-1);
	border: 1px solid var(--ink-line);
	padding: 4px 10px;
	border-radius: var(--r-full);
	white-space: nowrap;
}

.profilepic i {
	font-size: 0.8rem;
}

.profilepic.active-profile-pic {
	cursor: pointer;
}

.active-profile-pic:hover {
	border-color: var(--kuning);
	color: var(--tx-1);
}

.accbtn,
.songidyeah {
	background: none;
	border: 0;
	padding: 0;
	color: var(--c-link);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	overflow-wrap: anywhere;
}

.accbtn:hover,
.songidyeah:hover {
	color: var(--tx-1);
	text-decoration: underline;
}

.songacc {
	font-size: inherit;
}

.songinfo-pic,
.profilepic .accbtn {
	color: inherit;
}

.acccomments {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
}

.comments {
	margin: 0;
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--tx-3);
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--font-body);
}

.comments b {
	color: var(--tx-2);
	font-weight: 600;
}

.acccomments .comments b button {
	font-weight: 600;
}

.accounts-badge-icon-div {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
}

.accounts-badge-icon-div img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.acclistdiv {
	min-width: 0;
}

.acclistnick {
	font-size: 1.05rem;
}

.accresultrole {
	margin: 0;
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--tx-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-family: var(--font-body);
}

/* inner utility icon square (song play button, dropdown icons) */
.icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: none;
	border-radius: var(--r-sm);
	background: var(--bg-3);
	font-size: 0.8rem;
	color: var(--tx-2);
}

.dropdown-item .icon {
	width: 24px;
	height: 24px;
}

.icon.flag {
	background: transparent;
}

.icon img.imgflag,
img.imgflag {
	width: 20px;
	height: 14px;
	object-fit: cover;
	border-radius: 2px;
	display: block;
}

/* song name row inside legacy cards */
.songfullname {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
}

.songauthor {
	font-size: var(--fs-xs);
	color: var(--tx-3);
	font-weight: 500;
}

.songname {
	font-size: var(--fs-sm);
	color: var(--tx-1);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.songpic {
	gap: var(--sp-2);
	margin: var(--sp-2) 0 0;
}

.songbtnpic {
	background: var(--merah);
	color: #fff;
	cursor: pointer;
	width: 28px;
	height: 28px;
}

button[name="btnsng"] {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/* level description text inside legacy cards */
.dlp,
.clandesc {
	color: var(--tx-2);
	font-size: var(--fs-sm);
	margin: var(--sp-1) 0 var(--sp-3);
	overflow-wrap: anywhere;
}

.dlh1,
.profh1 {
	font-size: 1.2rem;
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
}

.manage-level-name-div {
	display: inline;
	overflow-wrap: anywhere;
}

.manage-button-div {
	align-items: center;
}

.dltext,
.dlposttext {
	font-size: var(--fs-sm);
	color: var(--tx-3);
}

.dlcard {
	display: flex;
	gap: var(--sp-3);
	align-items: flex-start;
}

/* icon kit (profile) */
.icon-kit-div {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-1);
	border: 1px solid var(--ink-line);
	border-radius: var(--r-md);
	padding: var(--sp-2);
	min-width: 64px;
}

.icon-kit-icon {
	object-fit: contain;
}

.icon-cube,
.icon-ball,
.icon-ufo,
.icon-robot,
.icon-spider,
.icon-swing,
.icon-jetpack {
	height: 46px;
}

.icon-ship {
	height: 34px;
}

.icon-wave {
	height: 30px;
}

/* ==========================================================================
   6. gd-* CARDS & GRIDS (reworked pages)
   ========================================================================== */
.gd-card {
	background: var(--bg-2);
	border: 1px solid var(--ink-line);
	border-radius: var(--r-lg);
	padding: var(--sp-5);
	min-width: 0;
}

.gd-grid {
	display: grid;
	gap: var(--sp-4);
}

.gd-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gd-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gd-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
	.gd-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.gd-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {

	.gd-grid--2,
	.gd-grid--3,
	.gd-grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Page header block */
.gd-pagehead {
	margin-bottom: var(--sp-6);
}

.gd-pagehead-row {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-4);
	flex-wrap: wrap;
}

.gd-pagehead h1 {
	margin: 0;
}

.gd-pagehead-sub {
	color: var(--tx-2);
	margin: var(--sp-1) 0 0;
	font-size: var(--fs-md);
	max-width: 68ch;
}

.gd-pagehead-actions {
	margin-left: auto;
	display: flex;
	gap: var(--sp-2);
	flex-wrap: wrap;
	align-items: center;
}

/* Section: title row + content */
.gd-section {
	margin-bottom: var(--sp-8);
}

.gd-section-head {
	display: flex;
	align-items: baseline;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
	padding-bottom: var(--sp-2);
	border-bottom: 1px solid var(--ink-line);
}

.gd-section-head h2 {
	margin: 0;
	font-size: var(--fs-lg);
}

.gd-section-head .gd-link-more {
	margin-left: auto;
	font-size: var(--fs-sm);
	color: var(--tx-2);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.gd-section-head .gd-link-more:hover {
	color: var(--tx-1);
	text-decoration: none;
}

.gd-section-head .gd-link-more i {
	font-size: 0.7rem;
}

/* Stat block */
.gd-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--sp-3) var(--sp-4);
}

.gd-stat-value {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
}

.gd-stat-label {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--tx-3);
	font-weight: 600;
}

.gd-stat i {
	font-size: 0.9rem;
}

.gd-statband {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	background: var(--bg-2);
	border: 1px solid var(--ink-line);
	border-radius: var(--r-lg);
	overflow: hidden;
}

.gd-statband>.gd-stat+.gd-stat {
	border-left: 1px solid var(--ink-line);
}

@media (max-width: 720px) {
	.gd-statband>.gd-stat+.gd-stat {
		border-left: 0;
		border-top: 1px solid var(--ink-line);
	}
}

/* Chips & badges */
.gd-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: var(--r-full);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.02em;
	background: var(--bg-3);
	border: 1px solid var(--ink-line-strong);
	color: var(--tx-2);
	white-space: nowrap;
}

.gd-chip--red {
	background: var(--merah-soft);
	border-color: rgba(229, 72, 77, 0.35);
	color: #ff9296;
}

.gd-chip--gold {
	background: var(--kuning-soft);
	border-color: rgba(234, 176, 77, 0.35);
	color: #f0c87e;
}

.gd-chip--green {
	background: var(--ok-soft);
	border-color: rgba(76, 195, 138, 0.35);
	color: #7bd7a8;
}

.gd-chip--blue {
	background: var(--info-soft);
	border-color: rgba(108, 178, 247, 0.35);
	color: #9ccbf9;
}

.gd-chip--ghost {
	background: transparent;
}

/* GD difficulty chips - recognizable in-game color language */
.gd-diff {
	font-weight: 700;
}

.gd-diff i {
	font-size: 0.8rem;
}

.gd-diff--easy {
	color: var(--diff-easy);
	border-color: rgba(88, 196, 122, 0.4);
	background: rgba(88, 196, 122, 0.12);
}

.gd-diff--normal {
	color: var(--diff-normal);
	border-color: rgba(88, 166, 232, 0.4);
	background: rgba(88, 166, 232, 0.12);
}

.gd-diff--hard {
	color: var(--diff-hard);
	border-color: rgba(232, 176, 77, 0.4);
	background: rgba(232, 176, 77, 0.12);
}

.gd-diff--harder {
	color: var(--diff-harder);
	border-color: rgba(232, 115, 77, 0.45);
	background: rgba(232, 115, 77, 0.12);
}

.gd-diff--insane {
	color: var(--diff-insane);
	border-color: rgba(217, 89, 184, 0.45);
	background: rgba(217, 89, 184, 0.12);
}

.gd-diff--demon {
	color: #ff8d90;
	border-color: rgba(229, 72, 77, 0.5);
	background: rgba(229, 72, 77, 0.16);
}

.gd-diff--auto {
	color: var(--diff-auto);
	border-color: rgba(108, 178, 247, 0.4);
	background: rgba(108, 178, 247, 0.12);
}

/* Alerts */
.gd-alert {
	display: flex;
	gap: var(--sp-3);
	align-items: flex-start;
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--r-md);
	border: 1px solid var(--ink-line-strong);
	background: var(--bg-2);
	color: var(--tx-2);
	font-size: var(--fs-sm);
	margin-bottom: var(--sp-4);
}

.gd-alert i {
	margin-top: 2px;
}

.gd-alert--danger {
	border-color: rgba(229, 72, 77, 0.45);
	background: var(--danger-soft);
	color: #ffb1ab;
}

.gd-alert--ok {
	border-color: rgba(76, 195, 138, 0.45);
	background: var(--ok-soft);
	color: #9fe0bf;
}

.gd-alert--warn {
	border-color: rgba(234, 176, 77, 0.45);
	background: var(--warn-soft);
	color: #f0c87e;
}

.gd-alert--info {
	border-color: rgba(108, 178, 247, 0.45);
	background: var(--info-soft);
	color: #b3d5fa;
}

/* Empty states */
.gd-empty {
	text-align: center;
	padding: var(--sp-12) var(--sp-5);
	color: var(--tx-3);
	border: 1px dashed var(--ink-line-strong);
	border-radius: var(--r-lg);
	background: var(--bg-1);
}

.gd-empty i {
	font-size: 1.6rem;
	opacity: 0.6;
	margin-bottom: var(--sp-3);
	display: block;
}

.gd-empty p {
	margin: 0 0 var(--sp-4);
}

.empty-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	padding: var(--sp-8) var(--sp-4);
	color: var(--tx-3);
	text-align: center;
	min-height: 120px;
}

.empty-section i {
	font-size: 1.7rem;
	opacity: 0.55;
}

.empty-section p {
	margin: 0;
	font-size: var(--fs-sm);
}

/* Loading */
.gd-loading {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--tx-3);
	font-size: var(--fs-sm);
}

.gd-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid var(--ink-line-strong);
	border-top-color: var(--merah);
	border-radius: 50%;
	animation: gd-spin 0.8s linear infinite;
}

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

/* Skeletons */
.gd-skeleton {
	background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
	background-size: 200% 100%;
	animation: gd-shimmer 1.4s ease-in-out infinite;
	border-radius: var(--r-md);
	min-height: 14px;
}

@keyframes gd-shimmer {
	to {
		background-position: -200% 0;
	}
}

/* ==========================================================================
   7. TABLES (admin lists, bootstrap compat)
   ========================================================================== */
.table {
	color: var(--tx-1);
	border-color: var(--ink-line);
	margin-bottom: 0;
}

.table th,
.table td {
	border-color: var(--ink-line);
	padding: var(--sp-3) var(--sp-3);
	font-size: var(--fs-sm);
	vertical-align: middle;
}

.table thead th {
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--tx-3);
	border-bottom: 1px solid var(--ink-line-strong);
	background: var(--bg-1);
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: var(--bg-1);
}

.table-hover tbody tr:hover {
	background-color: var(--bg-3);
	color: var(--tx-1);
}

.gd-tablewrap {
	background: var(--bg-2);
	border: 1px solid var(--ink-line);
	border-radius: var(--r-lg);
	overflow-x: auto;
}

.gd-tablewrap .table {
	margin-bottom: 0;
}

@media (max-width: 720px) {

	.table th,
	.table td {
		padding: var(--sp-2) var(--sp-2);
		font-size: var(--fs-xs);
	}
}

/* ==========================================================================
   8. DROPDOWNS (bootstrap 4 beta markup, gdips skin)
   ========================================================================== */
.dropdown-menu {
	background: var(--bg-2);
	border: 1px solid var(--ink-line-strong);
	border-radius: var(--r-md);
	box-shadow: var(--sh-3);
	padding: var(--sp-2);
	min-width: 220px;
	z-index: 90;
}

.dropdown-item {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	width: 100%;
	padding: 8px 10px;
	border-radius: var(--r-sm);
	border: 0;
	background: none;
	color: var(--tx-2);
	font-size: var(--fs-sm);
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--tr-fast), color var(--tr-fast);
}

.dropdown-item:hover,
.dropdown-item:focus {
	background: var(--bg-3);
	color: var(--tx-1);
	text-decoration: none;
	outline: none;
}

.dropdown-item .icon {
	color: var(--tx-3);
}

.dropdown-success {
	color: var(--ok) !important;
}

.dropdown-error {
	color: var(--danger) !important;
}

.dropdown-toggle::after {
	border-top-color: var(--tx-3);
}

/* ==========================================================================
   9. TOASTS / NOTIFICATIONS
   ========================================================================== */
#error-divs {
	position: fixed;
	bottom: var(--sp-5);
	left: 50%;
	transform: translateX(-50%);
	z-index: 200;
	display: grid;
	gap: var(--sp-2);
	width: min(420px, calc(100vw - 32px));
}

.notify {
	background: var(--bg-3);
	border: 1px solid var(--ink-line-strong);
	border-left: 3px solid var(--merah);
	color: var(--tx-1);
	border-radius: var(--r-md);
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-sm);
	box-shadow: var(--sh-3);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--tr-med), transform var(--tr-med);
}

.notify.notify-show {
	opacity: 1;
	transform: translateY(0);
}

.notify p {
	margin: 0;
}

.new-messages-notify {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: var(--merah);
	color: #fff;
	font-size: 0.66rem;
	font-weight: 700;
	border-radius: var(--r-full);
	font-style: normal;
	line-height: 1;
}

.smaller {
	transform: scale(0.85);
}

/* floating page-loading orb (kept id: #loadingloool) */
#loadingloool {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 150;
	background: var(--bg-3);
	border: 1px solid var(--ink-line-strong);
	color: var(--merah-strong);
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-full);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tr-med);
	box-shadow: var(--sh-2);
}

/* upload progress (kept id: #progress) */
#progress {
	appearance: none;
	height: 4px;
	border: 0;
	border-radius: var(--r-full);
	background: var(--bg-3);
	overflow: hidden;
}

#progress::-webkit-progress-bar {
	background: var(--bg-3);
}

#progress::-webkit-progress-value {
	background: var(--merah);
}

#progress::-moz-progress-bar {
	background: var(--merah);
}

/* ==========================================================================
   10. PAGINATION (legacy .page-buttons/.btn-group structure kept)
   ========================================================================== */
.page-buttons {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	flex-wrap: wrap;
	margin: var(--sp-5) 0 0;
	color: var(--tx-3);
	font-size: var(--fs-sm);
	font-weight: 500;
}

.page-buttons .btn-group {
	position: static;
	display: inline-flex;
	margin-left: auto;
	background: none;
	backdrop-filter: none;
	bottom: auto;
	right: auto;
}

.page-buttons .btn,
.btn-group .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 var(--sp-3);
	background: var(--bg-2);
	border: 1px solid var(--ink-line-strong);
	border-radius: var(--r-md) !important;
	color: var(--tx-2);
	font-size: var(--fs-sm);
	cursor: pointer;
	transition: background var(--tr-fast), color var(--tr-fast);
}

.page-buttons .btn:hover {
	background: var(--bg-3);
	color: var(--tx-1);
}

.page-buttons .btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.btn-group .btn+.btn {
	margin-left: -1px;
}

.btn-group .dropdown-menu {
	margin-top: 6px;
}

/* ==========================================================================
   11. MESSENGER
   ========================================================================== */
.chatdiv {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: var(--sp-4);
	align-items: stretch;
	width: 100% !important;
	background: none;
	border: 0;
	padding: 0;
}

.friends-button-div {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	min-width: 0;
}

.itemoverflow {
	overflow-y: auto;
	max-height: 62vh;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding-right: 2px;
}

.itemslist {
	display: grid;
	gap: var(--sp-2);
}

.itembtn {
	display: block;
	width: 100%;
	text-align: left;
	background: var(--bg-2);
	border: 1px solid var(--ink-line);
	border-radius: var(--r-md);
	padding: var(--sp-3);
	cursor: pointer;
	color: var(--tx-1);
	transition: border-color var(--tr-fast), background var(--tr-fast);
}

.itembtn:hover {
	background: var(--bg-3);
}

.itembtn.chat-opened {
	border-color: rgba(229, 72, 77, 0.5);
	background: var(--merah-soft);
}

.itembtn .accounts-badge-icon-div {
	justify-content: flex-start;
}

.itembtn .chat {
	font-size: var(--fs-xs) !important;
	color: var(--tx-3) !important;
	font-weight: 500;
	font-family: var(--font-body);
	margin: var(--sp-1) 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
}

.friends-button {
	width: 100%;
}

.another-chat-div {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0 !important;
}

.chatbox {
	display: flex;
	flex-direction: column;
	min-height: 320px;
}

.chatbox .dmbox {
	flex: 1;
	max-height: 56vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	background: var(--bg-0);
	border: 1px solid var(--ink-line);
	border-radius: var(--r-md);
	padding: var(--sp-3);
	margin: 0 0 var(--sp-3);
}

.dmbox {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	background: var(--bg-1);
	border: 1px solid var(--ink-line);
	border-radius: var(--r-md);
	padding: var(--sp-3);
	overflow-wrap: anywhere;
}

.dmbox.list {
	max-height: 56vh;
	overflow-y: auto;
}

.messenger-username {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-3);
}

.messenger-username h1 {
	margin: 0;
	font-size: var(--fs-lg);
	overflow-wrap: anywhere;
}

.message {
	display: flex;
	gap: var(--sp-2);
	align-items: flex-end;
	max-width: 88%;
}

.message.you {
	align-self: flex-end;
	flex-direction: row-reverse;
}

.message .btn-circle {
	width: 30px;
	height: 30px;
	font-size: 0.75rem;
}

.messengeryou,
.messengernotyou {
	background: var(--bg-2);
	border: 1px solid var(--ink-line-strong);
	border-radius: var(--r-md);
	padding: var(--sp-2) var(--sp-3);
	min-width: 0;
}

.message.you .messengeryou {
	background: var(--merah-deep);
	border-color: transparent;
}

.messengeryou .subjectyou,
.messengernotyou .subjectnotyou {
	font-size: var(--fs-sm);
	font-weight: 700;
	margin: 0;
	font-family: var(--font-body);
	overflow-wrap: anywhere;
}

.message.you .subjectyou {
	color: #ffd7d8;
}

.messengeryou .messageyou,
.messengernotyou .messagenotyou {
	font-size: var(--fs-sm);
	font-weight: 400;
	color: var(--tx-1);
	margin: 2px 0 var(--sp-1);
	overflow-wrap: anywhere;
	font-family: var(--font-body);
}

.messenger-link {
	color: var(--c-link);
	font-weight: 600;
	cursor: pointer;
}

.messenger-link:hover {
	text-decoration: underline;
}

.hide {
	display: none !important;
}

/* ==========================================================================
   12. AUDIO PLAYER (floating, ids preserved)
   ========================================================================== */
.gd-audiobar {
	width: 100%;
	margin: 0 0 16px;
	box-sizing: border-box;
}

.gd-audiobar>#audioPlayer.audioDiv {
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	float: none !important;
	transform: none !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	height: auto !important;
	margin: 0 !important;
	box-sizing: border-box;
	z-index: auto !important;
}

.gd-content-body {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.audioDiv {
	position: fixed;
	bottom: 18px;
	left: 18px;
	z-index: 120;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	background: var(--bg-2);
	border: 1px solid var(--ink-line-strong);
	border-radius: var(--r-lg);
	padding: var(--sp-2) var(--sp-3);
	box-shadow: var(--sh-3);
	width: min(430px, calc(100vw - 36px));
	transform: translateY(calc(100% + 26px));
	transition: transform var(--tr-med);
}

.audioDiv.show {
	transform: translateY(0);
}

.audioDiv.showButton {
	transform: none;
	width: 46px;
	height: 46px;
	padding: 0;
	justify-content: center;
	border-radius: var(--r-full);
	overflow: visible;
	transition: width var(--tr-med), height var(--tr-med), border-radius var(--tr-med), transform var(--tr-med);
}

.audioDiv.showButton.show {
	width: min(430px, calc(100vw - 36px));
	height: auto;
	border-radius: var(--r-lg);
}

.audioDiv.showButton i {
	font-size: 1.05rem;
	color: var(--merah-strong);
}

.audioDiv.showButton .indicator {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 10px;
	height: 10px;
	background: var(--merah);
	border-radius: 50%;
	border: 2px solid var(--bg-0);
}

.audioDiv .cover {
	position: relative;
	width: 54px;
	height: 54px;
	flex: none;
	border-radius: var(--r-md);
	background: var(--bg-3);
	cursor: pointer;
}

.audioDiv .cover .image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--r-md);
}

.audioDiv .cover i.image {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	color: var(--tx-2);
}

.audioDiv .track {
	flex: 1;
	min-width: 0;
}

.audioDiv .name {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.audioDiv .author {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--tx-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.audioDiv .duration {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: 4px;
}

.audioDiv .duration button {
	background: none;
	border: 0;
	color: var(--tx-2);
	cursor: pointer;
	padding: 2px 4px;
}

.audioDiv .duration button:hover {
	color: var(--tx-1);
}

.audioDiv .duration button[disabled] {
	opacity: 0.35;
	cursor: default;
}

input[type="range"].length {
	-webkit-appearance: none;
	appearance: none;
	flex: 1;
	height: 4px;
	border-radius: var(--r-full);
	background-image: linear-gradient(var(--merah), var(--merah)), linear-gradient(var(--bg-4), var(--bg-4));
	background-size: 0% 100%, 100% 100%;
	background-repeat: no-repeat;
	cursor: pointer;
	min-width: 40px;
}

input[type="range"].length::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	border: 0;
	box-shadow: var(--sh-1);
}

input[type="range"].length::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	border: 0;
}

.audioDiv .buttons {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.audioDiv .buttons button {
	background: none;
	border: 0;
	color: var(--tx-3);
	cursor: pointer;
	padding: 2px 4px;
	font-size: 0.8rem;
}

.audioDiv .buttons button:hover {
	color: var(--tx-1);
}

.audioDiv .volumeDiv {
	position: relative;
	display: flex;
	align-items: center;
}

.audioDiv i.volume {
	color: var(--tx-3);
	cursor: pointer;
	font-size: 0.85rem;
}

.audioDiv i.volume.show {
	opacity: 1;
}

.audioDiv .anotherVolume {
	position: absolute;
	bottom: 120%;
	right: -8px;
	transform: rotate(-90deg);
	transform-origin: bottom right;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tr-fast);
	width: 90px;
}

.audioDiv .anotherVolume.show {
	opacity: 1;
	pointer-events: auto;
}

.audioDiv .queueDiv {
	position: fixed;
	bottom: 76px;
	left: 18px;
	transform: none;
	flex-direction: column;
	align-items: stretch;
	width: min(380px, calc(100vw - 36px));
	max-height: 46vh;
	overflow-y: auto;
	display: none;
}

.audioDiv .queueDiv.show {
	display: flex;
}

.audioDiv .queueDiv .item {
	display: flex;
	gap: var(--sp-2);
	align-items: center;
	background: var(--bg-3);
	border: 1px solid var(--ink-line);
	border-radius: var(--r-md);
	padding: var(--sp-2);
}

.audioDiv .queueDiv .cover {
	width: 40px;
	height: 40px;
	cursor: pointer;
	flex: none;
}

.audioDiv .queueDiv .track {
	flex: 1;
	min-width: 0;
}

.audioDiv .queueDiv .track .name {
	font-size: var(--fs-xs);
}

.audioDiv .queueDiv .track .author {
	font-size: 0.68rem;
}

.audioDiv .queueDiv .buttons {
	flex-direction: row;
}

/* ==========================================================================
   13. KAWUNG MOTIF utilities (batik-inspired, subtle)
   ========================================================================== */
.gd-kawung-band {
	position: relative;
	width: 100%;
}

.gd-kawung-band::before {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	top: 10px;
	bottom: 10px;

	background: rgba(223, 223, 223, 0.105);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 20px;

	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);

	box-shadow: 0 8px 24px rgba(60, 45, 25, 0.08);

	z-index: 0;
}

.gd-kawung-band>* {
	position: relative;
	z-index: 1;
}

/* horizontal ornament divider */
.gd-motif {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	color: var(--tx-3);
	margin: var(--sp-6) 0;
}

.gd-motif::before,
.gd-motif::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--ink-line);
}

.gd-motif i {
	font-size: 0.7rem;
}

/* ==========================================================================
   14. MISC legacy helpers
   ========================================================================== */
.messenger,
.mainsettings,
.secondsettingsform {
	display: grid;
	gap: var(--sp-3);
}

.btns {
	display: flex;
	gap: var(--sp-2);
	flex-wrap: wrap;
}

.hint {
	color: var(--tx-3);
	font-size: var(--fs-xs);
}

.errtext,
.error {
	color: #ffb1ab;
}

.samepass {
	color: #ffb1ab;
	font-size: var(--fs-xs);
	display: block;
	margin-bottom: var(--sp-1);
}

.no-warp {
	white-space: nowrap;
}

.invisible {
	visibility: hidden;
}

.modactionsspoiler {
	background: none;
	border: 0;
	color: var(--tx-2);
	font: inherit;
	cursor: pointer;
	padding: 0;
	text-align: left;
}

.modactionsspoiler:hover {
	color: var(--tx-1);
}

.profileform {
	max-width: 760px;
	margin: 0 auto;
	width: 100%;
}

.profile-stats {
	justify-content: center;
}

.profile-comments {
	margin-top: var(--sp-4);
}

.profilewclanname {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.profilewclanname .music {
	color: var(--tx-2);
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.profilelikes.big,
.profilenick.big {
	font-size: 1.05rem;
}

.delete-comment-div {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-left: auto;
}

.friends-button-div .empty-itemoverflow {
	border: 1px dashed var(--ink-line-strong);
	border-radius: var(--r-md);
}

.clanscard {
	display: flex;
	gap: var(--sp-3);
}

.clansname {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

.clansname h1 {
	margin: 0;
	font-size: 1.15rem;
}

.clansmembercount {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.clansmembercount h3 {
	margin: 0;
	color: var(--tx-2);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-sm);
}

.clansdesc {
	margin: var(--sp-2) 0 0;
}

.clanname {
	margin: 0;
	overflow-wrap: anywhere;
}

.clanownertext,
.clanmemberstext {
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--tx-3);
	font-family: var(--font-display);
	margin: var(--sp-4) 0 var(--sp-2);
}

.clanowner-form {
	margin-bottom: 0;
}

.clanmembernick {
	font-size: 1.02rem;
}

.clanownernick {
	font-size: 1.3rem;
}

.clancreatetext {
	justify-content: center;
}

.clanmemberndiv {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-2);
}

.demonlist-title {
	overflow-wrap: anywhere;
}

#thirdp,
#dptp {
	margin: 0;
}

.gd-inlineform {
	display: flex;
	gap: var(--sp-2);
	align-items: center;
}

/* page transition: content fades in on SPA swap */
#htmlpage>.gd-content {
	animation: gd-pagein var(--tr-med) both;
}

@keyframes gd-pagein {
	from {
		opacity: 0;
		transform: translateY(4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}