:root {
 --paper: #ffffff;
 --ink: #20282d;
 --muted: #5c666c;
 --line: #24292d;
 --panel: #eef5f5;
 --cyan: #8ad6e5;
 --cyan-dark: #63bdcf;
 --yellow: #ffb932;
 --soft-yellow: #ffe0a3;
 --pink: #ff9aaa;
 --green: #35b778;
 --shadow: 6px 6px 0 #151515;
 font-family: 'Outfit', sans-serif;
 }

 * { box-sizing: border-box; }

 body {
 margin: 0;
 min-height: 100vh;
 background: var(--paper);
 color: var(--ink);
 font-size: 14px;
 }

 .topbar {
 display: flex;
 justify-content: space-between;
 gap: 16px;
 min-height: 26px;
 padding: 6px 10px;
 border-bottom: 2px solid #191919;
 background: var(--yellow);
 color: #17120a;
 font-size: 12px;
 font-weight: 800;
 white-space: nowrap;
 overflow: hidden;
 }

 .app {
 display: grid;
 grid-template-columns: 150px minmax(0, 1036px) 126px;
 gap: 18px;
 width: min(1320px, calc(100% - 22px));
 margin: 0 auto;
 padding: 24px 0 44px;
 align-items: start;
 }

 .sidebar {
 position: sticky;
 top: 18px;
 display: grid;
 gap: 8px;
 padding-top: 26px;
 }

 .brand {
 display: grid;
 justify-items: center;
 gap: 8px;
 margin-bottom: 8px;
 }

 .mascot {
 position: relative;
 width: 86px;
 height: 44px;
 }

 .mascot span {
 position: absolute;
 display: grid;
 place-items: center;
 width: 32px;
 height: 32px;
 border: 2px solid #191919;
 border-radius: 50%;
 font-weight: 900;
 box-shadow: 2px 2px 0 #191919;
 }

 .mascot span:nth-child(1) { left: 0; bottom: 0; background: #f9f7ef; }
 .mascot span:nth-child(2) { left: 25px; top: 0; background: #ffc94f; }
 .mascot span:nth-child(3) { right: 0; bottom: 3px; background: #ff955f; }

 .brand-title {
 font-size: 24px;
 color: #4a4d50;
 font-weight: 600;
 }

 .side-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 36px;
 padding: 8px 9px;
 border: 2px solid #181818;
 border-radius: 5px;
 background: var(--cyan);
 color: #203038;
 box-shadow: 5px 5px 0 #181818;
 text-decoration: none;
 font-weight: 800;
 font-size: 14px;
 text-align: center;
 transition: transform 0.1s, box-shadow 0.1s, background 0.1s;
 }

 .side-btn.active, .side-btn:hover {
 background: #b9edf5;
 transform: translate(2px, 2px);
 box-shadow: 3px 3px 0 #181818;
 }

 .content {
 min-width: 0;
 padding-top: 76px;
 }

 .profile {
 position: sticky;
 top: 28px;
 display: flex;
 align-items: center;
 gap: 9px;
 min-height: 58px;
 margin-top: 0;
 padding: 10px;
 border: 2px solid #171717;
 border-radius: 5px;
 background: #fff;
 box-shadow: 5px 5px 0 #171717;
 font-weight: 800;
 }

 .avatar {
 display: grid;
 place-items: center;
 width: 32px;
 height: 32px;
 border: 2px solid #171717;
 border-radius: 50%;
 background: var(--soft-yellow);
 font-weight: 900;
 overflow: hidden;
 }

 .avatar img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 }

 .profile-header {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-bottom: 14px;
 }

 .profile-header .profile-avatar {
 width: 64px;
 height: 64px;
 border: 2px solid #181818;
 border-radius: 50%;
 object-fit: cover;
 box-shadow: 3px 3px 0 #181818;
 }

 .profile-header .profile-name {
 font-size: 22px;
 font-weight: 900;
 }

 .social-links {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-top: 10px;
 }

 .social-links a {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding: 4px 10px;
 border: 2px solid #181818;
 border-radius: 4px;
 background: #fff;
 color: #181818;
 font-size: 12px;
 font-weight: 700;
 text-decoration: none;
 box-shadow: 2px 2px 0 #181818;
 transition: transform 0.1s, box-shadow 0.1s;
 }

 .social-links a:hover {
 transform: translate(1px, 1px);
 box-shadow: 1px 1px 0 #181818;
 }

 .intro {
 display: grid;
 grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
 gap: 18px;
 margin-bottom: 16px;
 }

 .card {
 border: 2px solid #181818;
 border-radius: 5px;
 background: var(--panel);
 box-shadow: var(--shadow);
 overflow: hidden;
 }

 .card.yellow { background: var(--soft-yellow); }

 .card-head {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 12px;
 padding: 12px 13px;
 border-bottom: 2px solid #181818;
 }

 .card-body {
 padding: 18px;
 }

 h1, h2, h3, p { margin-top: 0; }

 h1 {
 margin-bottom: 10px;
 font-size: clamp(32px, 5vw, 58px);
 font-weight: 800;
 line-height: .95;
 color: #34383a;
 }

 h2 {
 margin: 0;
 font-size: 18px;
 font-weight: 800;
 }

 h3 {
 margin: 0 0 6px;
 font-size: 15px;
 }

 .muted {
 color: var(--muted);
 line-height: 1.5;
 font-weight: 600;
 }

 .badge {
 display: inline-flex;
 align-items: center;
 min-height: 24px;
 padding: 4px 8px;
 border: 2px solid #181818;
 border-radius: 4px;
 background: #fff;
 font-size: 13px;
 font-weight: 900;
 }

 form {
 display: grid;
 gap: 18px;
 margin-top: 20px;
 }

 .new {
 display: inline-flex;
 align-items: center;
 margin-left: 6px;
 padding: 1px 4px;
 border: 1px solid #d75068;
 border-radius: 4px;
 color: #d75068;
 background: #fff;
 font-size: 10px;
 font-weight: 900;
 }

 .media-share-options {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 8px;
 }

 .media-btn {
 display: inline-flex;
 align-items: center;
 min-height: 36px;
 padding: 6px 12px;
 border: 2px solid #181818;
 border-radius: 6px;
 font-weight: 800;
 font-size: 14px;
 cursor: pointer;
 box-shadow: 3px 3px 0 #181818;
 transition: transform 0.1s, box-shadow 0.1s;
 color: #fff;
 background: #ccc;
 }

 .media-btn.active {
 box-shadow: 1px 1px 0 #181818;
 transform: translate(2px, 2px);
 border-color: #000;
 }

 .media-btn:hover {
 transform: translate(1px, 1px);
 box-shadow: 2px 2px 0 #181818;
 }

 .media-btn[data-media="tebakGambar"] { background: #fca510; color: #1f1209; }
 .media-btn[data-media="youtube"] { background: #c4302b; }
 .media-btn[data-media="tiktok"] { background: #111111; }
 .media-btn[data-media="gif"] { background: #71c6d4; color: #000; }
 .media-btn[data-media="reels"] { background: #f08298; color: #000; }
 .media-btn[data-media="voiceNote"] { background: #a685e2; color: #000; }

 label {
 display: grid;
 gap: 7px;
 font-weight: 800;
 font-size: 15px;
 }

 input, textarea, select {
 width: 100%;
 min-height: 46px;
 border: 2px solid #181818;
 border-radius: 6px;
 background: #fff;
 color: #1c262c;
 outline: 0;
 padding: 10px 14px;
 font-family: inherit;
 font-weight: 600;
 font-size: 15px;
 transition: box-shadow 0.1s;
 }

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

 input:focus, textarea:focus, select:focus {
 border-color: #178ea3;
 box-shadow: 2px 2px 0 #178ea3;
 }

 .amount-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 10px;
 }

 button {
 min-height: 42px;
 border: 2px solid #181818;
 border-radius: 6px;
 background: var(--cyan);
 color: #1f333a;
 box-shadow: 5px 5px 0 #181818;
 cursor: pointer;
 padding: 9px 12px;
 font-family: inherit;
 font-weight: 800;
 font-size: 15px;
 transition: transform .1s ease, box-shadow .1s ease, background .1s ease;
 }

 button:hover {
 transform: translate(2px, 2px);
 box-shadow: 3px 3px 0 #181818;
 background: #abe8f1;
 }

 button:active {
 transform: translate(4px, 4px);
 box-shadow: 1px 1px 0 #181818;
 }

 button:disabled {
 opacity: .65;
 cursor: wait;
 }

 .primary {
 width: max-content;
 min-width: 170px;
 background: var(--yellow);
 color: #201407;
 font-size: 18px;
 padding: 12px 24px;
 margin-top: 10px;
 }

 .primary:hover {
 background: #ffd06d;
 }

 .ghost {
 background: var(--cyan);
 }

 .stats {
 display: grid;
 gap: 15px;
 }

 .progress-shell {
 display: grid;
 gap: 10px;
 }

 .target-row, .donor-row {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 12px;
 }

 .bar {
 height: 17px;
 border: 2px solid #181818;
 border-radius: 999px;
 background: #fff;
 overflow: hidden;
 }

 .bar span {
 display: block;
 width: 0%;
 height: 100%;
 background: linear-gradient(90deg, #55c7da, #ffe071);
 transition: width .55s ease;
 }

 .money {
 color: #0d7890;
 font-weight: 900;
 white-space: nowrap;
 }

 .tabs {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 9px;
 padding: 10px;
 border-bottom: 2px solid #181818;
 background: #fff;
 }

 .tab {
 box-shadow: none;
 background: #e9eeee;
 }

 .tab.active {
 background: var(--cyan);
 box-shadow: 3px 3px 0 #181818;
 }

 .list {
 display: grid;
 gap: 9px;
 min-height: 208px;
 padding: 11px;
 }

 .donor-row {
 align-items: flex-start;
 padding: 10px;
 border: 2px solid #181818;
 border-radius: 4px;
 background: #fff;
 box-shadow: 3px 3px 0 #181818;
 }

 .donor-name {
 font-weight: 800;
 word-break: break-word;
 }

 .donor-message {
 margin-top: 4px;
 color: var(--muted);
 font-size: 13px;
 font-weight: 600;
 line-height: 1.35;
 word-break: break-word;
 }

 .toast {
 min-height: 21px;
 color: #b3263d;
 font-weight: 800;
 margin-top: 10px;
 }

 .modal {
 position: fixed;
 inset: 0;
 z-index: 20;
 display: none;
 place-items: center;
 padding: 20px;
 background: rgba(255, 255, 255, .78);
 backdrop-filter: blur(3px);
 }

 .modal.open { display: grid; }

 .payment-box {
 width: min(430px, 100%);
 max-height: calc(100vh - 40px);
 overflow: auto;
 padding: 20px;
 border: 2px solid #181818;
 border-radius: 8px;
 background: var(--panel);
 box-shadow: 8px 8px 0 #181818;
 }

 .qr {
 display: grid;
 place-items: center;
 margin: 16px 0;
 padding: 16px;
 border: 2px solid #181818;
 border-radius: 8px;
 background: #fff;
 box-shadow: 4px 4px 0 #181818;
 }

 .qr img {
 width: min(300px, 100%);
 aspect-ratio: 1;
 object-fit: contain;
 }

 .big-amount {
 margin: 12px 0;
 color: #0a758d;
 font-size: clamp(27px, 8vw, 42px);
 font-weight: 900;
 word-break: break-word;
 }

 .timer {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 88px;
 padding: 7px 10px;
 border: 2px solid #181818;
 border-radius: 6px;
 background: var(--yellow);
 font-weight: 900;
 }

 /* Custom Checkbox / Toggle */
 .optional-field {
 margin-top: 8px;
 padding: 12px;
 border: 2px dashed #181818;
 border-radius: 6px;
 background: #fff;
 }

 .optional-field summary {
 font-weight: 800;
 cursor: pointer;
 list-style: none;
 display: flex;
 align-items: center;
 gap: 8px;
 }

 .optional-field summary::before {
 content: '';
 font-size: 12px;
 transition: transform 0.2s;
 }

 .optional-field[open] summary::before {
 transform: rotate(90deg);
 }

 .optional-content {
 margin-top: 12px;
 display: grid;
 gap: 12px;
 }

 @media (max-width: 980px) {
 .app {
 grid-template-columns: 1fr;
 width: min(760px, calc(100% - 20px));
 padding-top: 14px;
 }

 .sidebar {
 position: static;
 grid-template-columns: repeat(3, 1fr);
 padding-top: 0;
 }

 .brand {
 grid-column: 1 / -1;
 display: flex;
 justify-content: center;
 }

 .content { padding-top: 0; }
 .profile { position: static; width: max-content; margin-left: auto; }
 .intro { grid-template-columns: 1fr; }
 }

.soundboard-empty {
 font-size: 13px;
}

.soundboard-price {
 display: block;
 font-size: 11px;
 opacity: .8;
}

.donor-empty {
 font-weight: 700;
}

 @media (max-width: 560px) {
 .sidebar, .amount-grid { grid-template-columns: 1fr 1fr; }
 .side-btn { min-height: 34px; font-size: 13px; }
 .profile { width: 100%; }
 .target-row, .donor-row { align-items: flex-start; flex-direction: column; }
 }

/* Generated from former inline style attributes in index.html. */
.html-style-index-1 { display:none; }
.html-style-index-2 { font-size: 12px; font-weight: normal; margin-top: 4px; }
.html-style-index-3 { display:none; margin-top:12px; }
.html-style-index-4 { margin-top:4px; }
.html-style-index-5 { font-size: 12px; font-weight: normal; margin-top: 4px; display:block; }
.html-style-index-6 { display: none; }
.html-style-index-7 { display: none; }
.html-style-index-8 { font-weight: 900; font-size: 18px; }
.html-style-index-9 { font-weight: 800; }
.html-style-index-10 { font-size: 20px; }
.html-style-index-11 { font-weight: 800; }
.html-style-index-12 { width: 100%; margin-top: 16px; }