@import url('https://fonts.googleapis.com/css?family=Niramit');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@300&display=swap');
* { box-sizing: border-box; }
html, body { padding: 0; margin: 0; min-height: 100%; background: #000000; color: #ffffff; font-family: 'Niramit', Arial, sans-serif; }
.site-wrapper { width: 100%; max-width: 900px; margin: 0 auto; padding: 15px; background: #000000; }
.admin-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; padding: 10px; background: #111111; border: 1px solid #333333; border-radius: 4px; }
.admin-btn { display: inline-block; padding: 6px 16px; background: #222222; color: #ffffff; border: 1px solid #444444; border-radius: 3px; text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: 1px; transition: background 0.2s, border-color 0.2s; }
.admin-btn:hover { background: #333333; border-color: #666666; color: #ffffff; }
.site-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #333333; padding-bottom: 15px; margin-bottom: 20px; gap: 15px; }
.site-header-logo img { height: 80px; max-width: 100%; object-fit: contain; display: block; }
.site-header-title { font-size: 22px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #ffffff; text-align: right; }
.club-reset-container { display: flex; flex-direction: column; gap: 8px; margin: 20px 0; }
.club-reset-row { display: flex; justify-content: space-between; align-items: center; background: #111111; border: 1px solid #282828; border-radius: 4px; padding: 10px 14px; font-size: 14px; color: #dddddd; }
.club-reset-row strong { color: #ffffff; }
.btn-copy { background: #1f1f1f; color: #ffffff; border: 1px solid #444444; border-radius: 3px; padding: 6px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; cursor: pointer; transition: background 0.2s, border-color 0.2s; white-space: nowrap; }
.btn-copy:hover { background: #333333; border-color: #666666; }
.club-reset-summary { margin-top: 15px; padding: 12px; background: #16241b; border: 1px solid #234830; color: #75db8b; border-radius: 4px; font-weight: 700; font-size: 14px; text-align: center; }
.toast-notify { position: absolute; display: none; background: #ffff00; color: #000000; padding: 6px 12px; font-size: 12px; font-weight: 700; border-radius: 3px; pointer-events: none; z-index: 99999; box-shadow: 0 2px 6px rgba(0,0,0,0.6); }
.welcome-card { background: #111111; border: 1px solid #333333; border-radius: 6px; padding: 25px; margin: 20px 0; text-align: center; }
.welcome-text { font-size: 16px; margin-bottom: 20px; color: #dddddd; }
.welcome-form { display: flex; flex-direction: column; gap: 15px; max-width: 400px; margin: 0 auto; }
.form-group { width: 100%; text-align: left; }
.form-group-inline { display: flex; align-items: center; gap: 12px; }
.form-input { width: 100%; padding: 10px 14px; background: #000000; border: 1px solid #444444; border-radius: 4px; color: #ffffff; font-size: 16px; font-family: inherit; }
.form-input:focus { outline: none; border-color: #777777; }
.native-date-box { width: auto; display: inline-flex; max-width: 175px; padding: 8px 10px; background-color: #000000; border: 1px solid #444444; border-radius: 4px; color: #ffffff; font-size: 15px; font-family: inherit; color-scheme: dark; }
.native-date-box:focus { outline: none; border-color: #777777; }
.btn-submit { width: 100%; background: #222222; color: #ffffff; border: 1px solid #555555; border-radius: 4px; padding: 10px 20px; font-size: 15px; font-weight: 700; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.btn-submit:hover { background: #333333; border-color: #777777; }
.welcome-success { font-size: 16px; color: #75db8b; margin: 0; }
.club-welcome-banner { background: #111111; border: 1px solid #282828; border-radius: 4px; padding: 15px 20px; font-size: 20px; font-weight: 700; text-align: center; color: #ffffff; margin: 20px 0 10px 0; }
.club-nav-buttons { display: flex; gap: 12px; justify-content: center; margin: 0 0 20px 0; }
.btn-tab { display: inline-block; padding: 10px 22px; background: #1a1a1a; color: #aaaaaa; border: 1px solid #333333; border-radius: 4px; text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.btn-tab:hover { background: #262626; color: #ffffff; border-color: #555555; }
.btn-tab.active { background: #16241b; color: #75db8b; border-color: #234830; }
.doc-upload-container { display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px; }
.doc-card { background: #111111; border: 1px solid #333333; border-radius: 6px; overflow: hidden; }
.doc-card-header { background: #1c1c1c; border-bottom: 1px solid #333333; padding: 12px 18px; font-size: 16px; font-weight: 700; letter-spacing: 0.5px; }
.doc-card-body { padding: 18px; display: flex; flex-direction: column; gap: 15px; }
.doc-label { display: inline-block; font-size: 13px; font-weight: 700; color: #aaaaaa; margin-bottom: 0; }
.dropzone { border: 2px dashed #444444; border-radius: 6px; padding: 25px 15px; text-align: center; cursor: pointer; background: #080808; transition: border-color 0.2s, background 0.2s; }
.dropzone:hover, .dropzone.dragover { border-color: #888888; background: #141414; }
.file-input-hidden { display: none; }
.dropzone-icon { font-size: 32px; color: #666666; margin-bottom: 8px; line-height: 1; }
.dropzone-text { font-size: 14px; color: #888888; }
.browse-link { color: #ffffff; text-decoration: underline; }
.file-selected-name { margin-top: 10px; font-size: 13px; color: #75db8b; font-weight: 700; word-break: break-all; }
.submit-group { margin-top: 10px; }
.btn-upload { background: #16241b; border-color: #234830; color: #75db8b; }
.btn-upload:hover { background: #234830; border-color: #356645; color: #ffffff; }
.docs-list-container { background: #111111; border: 1px solid #333333; border-radius: 6px; padding: 20px; margin-bottom: 30px; }
.docs-empty-state { text-align: center; color: #888888; font-size: 15px; padding: 30px 10px; }
.docs-grid { display: flex; flex-direction: column; gap: 10px; }
.doc-item-row { display: flex; justify-content: space-between; align-items: center; background: #0a0a0a; border: 1px solid #282828; border-radius: 4px; padding: 12px 16px; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.doc-item-row:hover { background: #181818; border-color: #555555; }
.doc-item-info { display: flex; align-items: center; gap: 12px; overflow: hidden; }
.doc-item-badge { background: #222222; color: #75db8b; border: 1px solid #333333; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 3px; letter-spacing: 0.5px; }
.doc-item-name { font-size: 14px; color: #dddddd; word-break: break-all; }
.doc-item-dates-col { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin-left: 15px; white-space: nowrap; }
.doc-item-date { font-size: 12px; color: #777777; font-weight: 700; letter-spacing: 0.5px; }
.doc-expiry-warn60 { color: #ff4444; }
.doc-expiry-warn30 { color: #000000; background-color: #ffff00; padding: 2px 6px; border-radius: 3px; }
.doc-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; z-index: 99999; padding: 20px; }
.doc-modal-content { background: #111111; border: 1px solid #444444; border-radius: 6px; width: 100%; max-width: 900px; height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.doc-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; background: #1c1c1c; border-bottom: 1px solid #333333; }
.doc-modal-title { font-size: 14px; font-weight: 700; color: #ffffff; word-break: break-all; }
.doc-modal-close { background: transparent; border: none; color: #ffffff; font-size: 24px; font-weight: 700; cursor: pointer; line-height: 1; padding: 0 4px; }
.doc-modal-close:hover { color: #ff5555; }
.doc-modal-body { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; background: #000000; padding: 10px; }
.modal-image-preview { max-width: 100%; max-height: 100%; object-fit: contain; }
.modal-doc-frame { width: 100%; height: 100%; border: none; background: #ffffff; }
.perm-error-panel { border: 1px solid #ff0000; border-radius: 5px; overflow: hidden; margin: 20px 0; background: #111111; }
.perm-error-head { font-size: 14px; font-weight: 900; color: #ffff00; background-color: #ff0000; padding: 10px 15px; text-align: center; letter-spacing: 1px; }
.perm-error-body { padding: 20px; color: #dddddd; font-size: 14px; }
.perm-path-display { font-family: monospace; background: #000000; border: 1px solid #333333; padding: 10px 15px; border-radius: 4px; color: #ff5555; margin: 10px 0 15px 0; word-break: break-all; }
.perm-cmd-wrapper { position: relative; margin-top: 15px; }
.btn-copy-cmd { position: absolute; top: 10px; right: 10px; z-index: 10; }
.perm-cmd-box { background: #000000; border: 1px solid #333333; border-radius: 4px; padding: 45px 15px 15px 15px; color: #00ff00; font-family: monospace; font-size: 13px; line-height: 1.5; overflow-x: auto; margin: 0; }
.msg0 { border: 1px solid #000000; border-radius: 5px; overflow: hidden; width: 100%; z-index: 99; }
.msgH0 { font-size: 12px; font-family: arial; color: #ffffff; background-color: #11291d; font-weight: 700; text-align: center; }
.msgB0 { font-size: 11px; font-family: arial; color: #000000; background-color: #ffffff; }
.msg1 { border: 1px solid #ff0000; border-radius: 5px; overflow: hidden; width: 100%; z-index: 99; }
.msgH1 { font-size: 12px; font-family: arial; color: #ffff00; background-color: #ff0000; font-weight: 900; text-align: center; }
.msgB1 { font-size: 10px; font-family: arial; color: #000000; background-color: #ffff00; }
.msg2 { border: 1px solid #ff0000; border-radius: 5px; overflow: hidden; width: 100%; z-index: 99; }
.msgH2 { font-size: 12px; font-family: arial; color: #ff0000; background-color: #ffff00; font-weight: 900; text-align: center; }
.msgB2 { font-size: 10px; font-family: arial; color: #ffff00; background-color: #ff0000; }
.msg3 { border: 0px; width: 100%; z-index: 99; }
.msgH3 { font-size: 12px; font-family: arial; color: #ffffff; background-color: #000000; font-weight: 700; text-align: center; }
.msg4 { border: 1px solid #ff0000; border-radius: 5px; overflow: hidden; width: 100%; }
.msgH4 { font-size: 12px; font-family: arial; color: #ffff00; background: #ff0000; font-weight: 900; text-align: center; }
.msgB4 { font-size: 10px; font-family: arial; color: #000000; background: #ffff00; }
.site-footer { margin-top: 30px; padding: 20px 0; border-top: 1px solid #222222; text-align: center; font-size: 12px; color: #888888; }
.cookie-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99998; width: 600px; max-width: 90vw; background: rgba(20, 20, 20, 0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; padding: 28px 32px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.9); }
.cookie-toast-title { font-size: 20px; font-weight: 700; color: #ffffff; margin-bottom: 12px; letter-spacing: 0.5px; }
.cookie-toast-body { font-size: 15px; line-height: 1.6; color: #cccccc; margin-bottom: 24px; }
.cookie-toast-actions { display: flex; gap: 16px; }
.btn-cookie-action { flex: 1; padding: 14px 20px; font-size: 15px; font-weight: 700; letter-spacing: 0.5px; border-radius: 6px; text-align: center; text-decoration: none; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
.btn-cookie-accept { background: #16241b; border: 1px solid #234830; color: #75db8b; }
.btn-cookie-accept:hover { background: #234830; border-color: #356645; color: #ffffff; }
.btn-cookie-reject { background: #1f1414; border: 1px solid #452222; color: #ff7b7b; }
.btn-cookie-reject:hover { background: #331a1a; border-color: #632d2d; color: #ffffff; }
.admin-files-wrapper { display: flex; flex-direction: column; gap: 20px; margin: 20px 0; }
.admin-files-toolbar { display: flex; justify-content: flex-end; }
.admin-club-card { background: #111111; border: 1px solid #333333; border-radius: 6px; overflow: hidden; }
.admin-club-card-header { background: #1c1c1c; border-bottom: 1px solid #333333; padding: 14px 20px; font-size: 18px; font-weight: 700; letter-spacing: 0.5px; color: #ffffff; }
.admin-club-card-body { padding: 16px 20px; }
.admin-file-row.is-older { display: none; }
.admin-files-wrapper.show-all .admin-file-row.is-older { display: flex; }
@media (max-width: 600px) { .site-header { flex-direction: column; text-align: center; } .site-header-title { text-align: center; font-size: 18px; } .site-wrapper { padding: 10px; } .admin-bar { justify-content: center; } .club-reset-row { flex-direction: column; align-items: flex-start; gap: 8px; } .btn-copy { width: 100%; text-align: center; } .btn-copy-cmd { position: static; width: 100%; margin-bottom: 10px; } .perm-cmd-box { padding: 15px; } .form-group-inline { flex-direction: column; align-items: flex-start; gap: 6px; } .native-date-box { width: 100%; max-width: 100%; } .club-nav-buttons { flex-direction: column; } .btn-tab { text-align: center; } .doc-item-row { flex-direction: column; align-items: flex-start; gap: 8px; } .doc-item-dates-col { align-items: flex-start; margin-left: 0; } .cookie-toast { width: 90vw; padding: 20px; } .cookie-toast-title { font-size: 18px; } .cookie-toast-body { font-size: 14px; margin-bottom: 18px; } .cookie-toast-actions { flex-direction: column; gap: 10px; } .btn-cookie-action { width: 100%; padding: 12px 16px; } .admin-files-toolbar { justify-content: stretch; } .admin-files-toolbar .btn-tab { width: 100%; } }