@import"https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&family=Montserrat:wght@800;900&family=Outfit:wght@500;600;700&display=swap";:root{--maple-bg: #0f1013;--maple-bg-soft: #15171d;--maple-cream: #ffffff;--maple-ink: #f5f6f8;--maple-ink-light: #e5e7ec;--maple-muted: #a7aebc;--maple-muted-light: #8b93a3;--maple-accent: #ffffff;--maple-accent-hover: #d9dde6;--maple-card-bg: rgba(255, 255, 255, .04);--maple-card-border: rgba(255, 255, 255, .14);--maple-input-bg: rgba(255, 255, 255, .03);--maple-input-border: rgba(255, 255, 255, .2);--maple-footer-bg: #08090c;--maple-footer-text: #c8cedb;--maple-radius-card: 22px;--maple-radius-pill: 999px;--maple-radius-input: 12px;--maple-shadow-card: 0 20px 45px rgba(0, 0, 0, .35);--maple-shadow-btn: 0 12px 24px rgba(0, 0, 0, .3);--maple-font-display: "Cormorant Garamond", "Times New Roman", serif;--maple-font-heading: "Outfit", "Segoe UI", sans-serif;--maple-font-body: "Manrope", "Segoe UI", Roboto, Arial, sans-serif;--maple-green: #cfd6e5;--maple-red: #dfe4ef;body {margin: 0; font-family: var(--maple-font-body); background: radial-gradient(1200px 500px at 85% -10%,rgba(255,255,255,.08),transparent 70%),radial-gradient(1000px 450px at -10% 10%,rgba(255,255,255,.05),transparent 65%),linear-gradient(180deg,#13151a 0%,#101217 42%,#0d0f14 100%); color: var(--maple-ink); line-height: 1.55; min-height: 100vh;} h1,h2,h3,h4,h5,h6 {margin: 0; font-weight: 600;} p {margin: 0;} .admin-page-wrapper {width: 94%; max-width: 1360px; margin: 0 auto; padding: 38px 0 54px;} .page-header {margin-bottom: 28px;} .page-header.centered {text-align: center;} .page-title {font-family: var(--maple-font-heading); font-size: clamp(1.8rem,4vw,2.4rem); font-weight: 700; color: var(--maple-ink-light); margin-bottom: 4px;} .page-subtitle {font-size: .92rem; color: var(--maple-muted); margin-top: 2px;} .dashboard-card {background: var(--maple-card-bg); border-radius: var(--maple-radius-card); padding: 28px; border: 1px solid var(--maple-card-border); box-shadow: var(--maple-shadow-card); backdrop-filter: blur(8px); transition: transform .2s ease,box-shadow .2s ease;} .dashboard-card:hover {transform: translateY(-2px); box-shadow: 0 20px 40px rgba(0,0,0,.45);} .form-grid {display: grid; grid-template-columns: repeat(2,1fr); gap: 18px;} .form-field {display: flex; flex-direction: column;} .form-field.full {grid-column: span 2;} label {font-size: .82rem; font-weight: 600; margin-bottom: 6px; color: #cbd2e0;} input,textarea,select {padding: 10px 14px; border-radius: var(--maple-radius-input); border: 1px solid var(--maple-input-border); font-size: .92rem; font-family: var(--maple-font-body); background: var(--maple-input-bg); color: var(--maple-ink); transition: border-color .2s ease,box-shadow .2s ease;} .form-control,.form-select {border-radius: var(--maple-radius-input); border: 1px solid var(--maple-input-border); font-family: var(--maple-font-body); background: var(--maple-input-bg); color: var(--maple-ink);} .form-control:focus,.form-select:focus {outline: none; border-color: var(--maple-accent); box-shadow: 0 0 0 .18rem rgba(255,255,255,.22); background: var(--maple-input-bg); color: var(--maple-ink);} input::placeholder,textarea::placeholder,.form-control::placeholder {color: var(--maple-muted-light); opacity: 1;} select option,.form-select option {background: #11141b; color: var(--maple-ink);} input:disabled,textarea:disabled,select:disabled,.form-control:disabled,.form-select:disabled {background: rgba(255,255,255,.02); color: #8c95a7; border-color: rgba(255,255,255,.12);} input:focus,textarea:focus,select:focus {outline: none; border-color: var(--maple-accent); box-shadow: 0 0 0 .18rem rgba(255,255,255,.22);} textarea {resize: vertical; min-height: 80px;} .error,.error-text,.text-danger {color: var(--maple-red); font-size: .8rem; margin-top: 4px;} .error-global {color: var(--maple-red); margin-top: 12px; font-size: .88rem;} button {cursor: pointer; transition: transform .2s ease,box-shadow .2s ease,background .2s ease;} .btn-maple {border-radius: var(--maple-radius-pill); padding: 10px 22px; border: none; text-decoration: none; font-weight: 600; font-size: .9rem; font-family: var(--maple-font-body); transition: transform .2s ease,box-shadow .2s ease; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 6px;} .btn-maple:hover {transform: translateY(-1px);} .btn-maple-solid {background: linear-gradient(180deg,#ffffff,#e9ecf2); color: #111318; box-shadow: var(--maple-shadow-btn);} .btn-maple-solid:hover {background: linear-gradient(180deg,#ffffff,#d9dde6);} .btn-maple-solid:disabled {background: #a6adba; color: #1c1f26; box-shadow: none; cursor: not-allowed; transform: none;} .btn-maple-light {background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22); color: var(--maple-accent);} .btn-maple-light:hover {background: rgba(255,255,255,.14);} .btn-maple-danger {background: linear-gradient(180deg,#f2f4f8,#dde2eb); color: #101218; box-shadow: var(--maple-shadow-btn);} .btn-maple-danger:hover {background: linear-gradient(180deg,#ffffff,#d2d8e4);} .btn-maple-danger:disabled {background: #a6adba; color: #1c1f26; box-shadow: none; cursor: not-allowed; transform: none;} .btn-maple-green {background: linear-gradient(180deg,#ffffff,#e7ebf3); color: #111318; box-shadow: var(--maple-shadow-btn);} .btn-maple-green:hover {background: linear-gradient(180deg,#ffffff,#d9dde6);} .btn-maple-outline {background: transparent; border: 1px solid var(--maple-input-border); color: var(--maple-muted);} .btn-maple-outline:hover {background: rgba(255,255,255,.1); border-color: var(--maple-accent); color: var(--maple-accent);} .btn-primary {background: linear-gradient(180deg,#ffffff,#e9ecf2); color: #101218; border: none; padding: 10px 22px; border-radius: var(--maple-radius-pill); font-weight: 600; box-shadow: var(--maple-shadow-btn);} .btn-primary:hover {background: linear-gradient(180deg,#ffffff,#d9dde6); transform: translateY(-1px);} .btn-secondary {background: rgba(255,255,255,.08); color: var(--maple-muted); border: 1px solid var(--maple-input-border); padding: 10px 22px; border-radius: var(--maple-radius-pill); font-weight: 600;} .btn-secondary:hover {background: rgba(255,255,255,.16);} .btn-edit {background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); color: var(--maple-accent); padding: 7px 16px; border-radius: var(--maple-radius-pill); font-weight: 600; font-size: .82rem;} .btn-edit:hover {background: rgba(255,255,255,.16); transform: translateY(-1px);} .btn-delete {background: linear-gradient(180deg,#f2f4f8,#dde2eb); color: #101218; border: none; padding: 7px 16px; border-radius: var(--maple-radius-pill); font-weight: 600; font-size: .82rem;} .btn-delete:hover {background: linear-gradient(180deg,#ffffff,#d2d8e4); transform: translateY(-1px);} .btn-approve {background: linear-gradient(180deg,#ffffff,#e7ebf3); color: #101218; border: none; padding: 7px 16px; border-radius: var(--maple-radius-pill); font-weight: 600; font-size: .82rem;} .btn-approve:hover {background: linear-gradient(180deg,#ffffff,#d9dde6); transform: translateY(-1px);} .btn-reject {background: linear-gradient(180deg,#f2f4f8,#dde2eb); color: #101218; border: none; padding: 7px 16px; border-radius: var(--maple-radius-pill); font-weight: 600; font-size: .82rem;} .btn-reject:hover {background: linear-gradient(180deg,#ffffff,#d2d8e4); transform: translateY(-1px);} .table-wrapper {overflow-x: auto; border-radius: 16px;} .admin-table {width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem;} .admin-table thead {background: rgba(255,255,255,.06);} .admin-table th {padding: 14px 16px; text-align: left; font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--maple-muted); border-bottom: 2px solid rgba(255,255,255,.2);} .admin-table td {padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.1); color: var(--maple-ink-light);} .admin-table tbody tr {transition: background .15s ease;} .admin-table tbody tr:nth-child(even) {background: rgba(255,255,255,.02);} .admin-table tbody tr:hover {background: rgba(255,255,255,.06);} .action-buttons {display: flex; gap: 8px; flex-wrap: wrap;} .table-tools {margin-bottom: 18px;} .search-box {width: 260px; padding: 10px 16px; border-radius: var(--maple-radius-pill); border: 1px solid var(--maple-input-border); background: var(--maple-input-bg); font-size: .88rem; font-family: var(--maple-font-body); color: var(--maple-ink);} .search-box:focus {outline: none; border-color: var(--maple-accent); box-shadow: 0 0 0 .18rem rgba(255,255,255,.22);} .search-input {width: 100%; padding: 12px 20px; border-radius: var(--maple-radius-pill); border: 1px solid var(--maple-input-border); background: var(--maple-input-bg); font-size: .92rem; font-family: var(--maple-font-body); color: var(--maple-ink);} .search-input:focus {outline: none; border-color: var(--maple-accent); box-shadow: 0 0 0 .18rem rgba(255,255,255,.22);} .feedback-grid {display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 18px;} .feedback-card {background: rgba(255,255,255,.05); padding: 22px; border-radius: 18px; border: 1px solid var(--maple-card-border); border-left: 4px solid var(--maple-accent); box-shadow: 0 8px 22px rgba(0,0,0,.24); transition: transform .2s ease,box-shadow .2s ease;} .feedback-card:hover {transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,.36);} .feedback-header {display: flex; justify-content: space-between; font-size: .8rem; color: var(--maple-muted); margin-bottom: 10px;} .feedback-user {font-weight: 700; color: var(--maple-ink-light);} .feedback-body {font-size: .92rem; line-height: 1.6; color: var(--maple-ink-light);} .feedback-page {min-height: calc(100vh - 72px); display: flex; justify-content: center; align-items: center; padding: 40px 18px;} .form-actions {margin-top: 28px; display: flex; justify-content: flex-end; gap: 12px;} .form-actions.centered {justify-content: center;} .status-badge {display: inline-block; padding: 4px 14px; border-radius: var(--maple-radius-pill); font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;} .status-pending {background: rgba(255,255,255,.12); color: #f0f2f6;} .status-approved {background: rgba(255,255,255,.18); color: #ffffff;} .status-rejected {background: rgba(255,255,255,.08); color: #c9cfdb;} .button-group {display: flex; gap: 12px; margin-top: 26px;} @media (min-width: 1400px) {.admin-page-wrapper {max-width: 1480px; padding: 52px 0 72px;} .page-header {margin-bottom: 34px;} .dashboard-card {padding: 34px;} .table-tools {margin-bottom: 22px;} .admin-table th,.admin-table td {padding: 16px 18px;}} .form-card {max-width: 900px; margin: auto;} .empty-msg {padding: 32px 16px; color: var(--maple-muted); text-align: center; font-style: italic; font-size: .92rem;} .maple-footer {position: relative; z-index: 2; margin-top: 0; background: var(--maple-footer-bg); color: var(--maple-footer-text); padding: 30px 18px; border-top: 1px solid rgba(255,255,255,.14);} .footer-inner {max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px;} .footer-inner h3 {margin: 0 0 6px; font-family: var(--maple-font-heading); letter-spacing: .04em; font-size: 1.4rem;} .footer-inner p {margin: 3px 0; color: #a9b1c1; font-size: .88rem;} footer {margin-top: 0;} .navbar .dropdown:hover .dropdown-menu {display: block; visibility: visible; opacity: 1;} .navbar .dropdown .dropdown-menu {margin-top: 0; opacity: 0; visibility: hidden; transition: opacity .15s ease-in-out; background: linear-gradient(180deg,rgba(23,26,34,.98),rgba(15,17,23,.98)); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; box-shadow: 0 18px 34px rgba(0,0,0,.4); backdrop-filter: blur(10px); padding: 8px;} .navbar .dropdown-menu:hover {display: block; visibility: visible; opacity: 1;} .navbar .dropdown-menu .dropdown-item {border-radius: 8px; color: var(--maple-ink-light); padding: 8px 12px; font-size: .88rem;} .navbar .dropdown-menu .dropdown-item:hover,.navbar .dropdown-menu .dropdown-item:focus,.navbar .dropdown-menu .dropdown-item.active {color: #ffffff; background: rgba(255,255,255,.12);} .navbar .dropdown-menu .dropdown-divider {border-top: 1px solid rgba(255,255,255,.12);} @media (max-width: 900px) {.form-grid {grid-template-columns: 1fr;} .form-field.full {grid-column: span 1;} .admin-page-wrapper {width: 95%; padding: 24px 0 36px;} .footer-inner {grid-template-columns: 1fr;} .dashboard-card {padding: 20px;} .search-box {width: 100%;} .form-actions,.button-group,.action-buttons {width: 100%; justify-content: stretch;} .form-actions .btn-maple,.button-group .btn-maple,.action-buttons .btn-maple,.action-buttons .btn-edit,.action-buttons .btn-delete,.action-buttons .btn-approve,.action-buttons .btn-reject {width: 100%; justify-content: center; text-align: center;} .admin-table {font-size: .84rem;} .admin-table th,.admin-table td {padding: 11px 12px;}} @media (max-width: 640px) {.admin-page-wrapper {width: 96%; padding: 20px 0 30px;} .page-header {margin-bottom: 20px;} .page-title {font-size: clamp(1.45rem,6.4vw,1.9rem);} .dashboard-card {padding: 16px; border-radius: 16px;} .table-tools {margin-bottom: 14px;} .search-box,.search-input {font-size: .86rem; padding: 10px 14px;}}}:root *,:root *:before,:root *:after{box-sizing:border-box}