/* ================= dashboard.html ================= */
body[data-page="dashboard"] * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body[data-page="dashboard"] {
font-family: Tahoma, Arial, sans-serif;
background: #d8e3e0;
color: #243b3a;
min-height: 100vh;
}
body[data-page="dashboard"] a {
text-decoration: none;
}
body[data-page="dashboard"] button {
font-family: Tahoma, Arial, sans-serif;
}
body[data-page="dashboard"] .app {
display: flex;
min-height: 100vh;
padding: 18px;
gap: 18px;
}
body[data-page="dashboard"] .sidebar {
width: 270px;
background: #1f3d3a;
border-radius: 30px;
padding: 24px 18px;
display: flex;
flex-direction: column;
min-height: calc(100vh - 36px);
box-shadow: 0 18px 45px rgba(31, 61, 58, 0.20);
}
body[data-page="dashboard"] .brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 34px;
padding: 0 6px;
}
body[data-page="dashboard"] .brand-logo {
width: 48px;
height: 48px;
border-radius: 18px;
background: #d9f2e6;
color: #1f3d3a;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: bold;
}
body[data-page="dashboard"] .brand-text h2 {
font-size: 17px;
color: #ffffff;
margin-bottom: 5px;
letter-spacing: 0.5px;
}
body[data-page="dashboard"] .brand-text span {
font-size: 12px;
color: #b9d7d1;
}
body[data-page="dashboard"] .menu {
display: flex;
flex-direction: column;
gap: 9px;
}
body[data-page="dashboard"] .menu-item {
color: #cfe2de;
padding: 13px 14px;
border-radius: 16px;
display: flex;
align-items: center;
gap: 11px;
font-size: 14px;
transition: 0.25s;
}
body[data-page="dashboard"] .menu-item:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
body[data-page="dashboard"] .menu-item.active {
background: #d9f2e6;
color: #1f3d3a;
font-weight: bold;
}
body[data-page="dashboard"] .menu-icon {
width: 31px;
height: 31px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.10);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
body[data-page="dashboard"] .menu-item.active .menu-icon {
background: #ffffff;
}
body[data-page="dashboard"] .sidebar-footer {
margin-top: auto;
background: rgba(255, 255, 255, 0.08);
border-radius: 22px;
padding: 16px;
}
body[data-page="dashboard"] .sidebar-footer-title {
color: #ffffff;
font-size: 13px;
font-weight: bold;
margin-bottom: 8px;
}
body[data-page="dashboard"] .sidebar-footer p {
font-size: 12px;
color: #d8ebe7;
line-height: 1.9;
}
body[data-page="dashboard"] .logout-btn {
margin-top: 14px;
width: 100%;
background: rgba(255, 255, 255, 0.10);
color: #ffffff;
border: none;
border-radius: 15px;
padding: 11px;
cursor: pointer;
transition: 0.25s;
}
body[data-page="dashboard"] .logout-btn:hover {
background: rgba(255, 255, 255, 0.16);
}
body[data-page="dashboard"] .main {
flex: 1;
background: #cfdcd8;
border-radius: 32px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 18px;
box-shadow: inset 0 0 0 1px rgba(31, 61, 58, 0.06);
}
body[data-page="dashboard"] .topbar {
background: #e7efec;
border-radius: 28px;
padding: 20px 22px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 14px 35px rgba(31, 61, 58, 0.09);
border: 1px solid #c5d3cf;
}
body[data-page="dashboard"] .page-title h1 {
font-size: 23px;
color: #1f3d3a;
margin-bottom: 8px;
}
body[data-page="dashboard"] .page-title p {
font-size: 14px;
color: #647b76;
line-height: 1.9;
}
body[data-page="dashboard"] .user-box {
display: flex;
align-items: center;
gap: 12px;
background: #d8e3e0;
padding: 9px 12px;
border-radius: 18px;
border: 1px solid #c6d4d0;
}
body[data-page="dashboard"] .user-avatar {
width: 42px;
height: 42px;
border-radius: 16px;
background: #1f3d3a;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
body[data-page="dashboard"] .user-info span {
display: block;
}
body[data-page="dashboard"] .user-info .name {
font-size: 13px;
color: #1f3d3a;
font-weight: bold;
margin-bottom: 4px;
}
body[data-page="dashboard"] .user-info .phone {
font-size: 11px;
color: #7b938f;
}
body[data-page="dashboard"] .hero-layout {
display: grid;
grid-template-columns: 1.4fr 0.9fr;
gap: 18px;
}
body[data-page="dashboard"] .wallet-hero {
background:
linear-gradient(135deg, #21433f, #2f5d56),
radial-gradient(circle at left top, rgba(217, 242, 230, 0.25), transparent 40%);
border-radius: 30px;
padding: 28px;
color: #ffffff;
position: relative;
overflow: hidden;
box-shadow: 0 18px 42px rgba(31, 61, 58, 0.22);
min-height: 260px;
}
body[data-page="dashboard"] .wallet-hero::after {
content: "";
position: absolute;
width: 260px;
height: 260px;
border-radius: 50%;
background: rgba(217, 242, 230, 0.11);
left: -80px;
bottom: -95px;
}
body[data-page="dashboard"] .wallet-content {
position: relative;
z-index: 2;
}
body[data-page="dashboard"] .wallet-label {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.12);
color: #d9f2e6;
padding: 7px 12px;
border-radius: 999px;
font-size: 12px;
margin-bottom: 18px;
}
body[data-page="dashboard"] .wallet-dot {
width: 8px;
height: 8px;
background: #80ed99;
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(128, 237, 153, 0.13);
}
body[data-page="dashboard"] .wallet-hero h2 {
font-size: 26px;
line-height: 1.8;
margin-bottom: 12px;
}
body[data-page="dashboard"] .wallet-hero p {
color: #cfe2de;
font-size: 14px;
line-height: 2;
max-width: 780px;
}
body[data-page="dashboard"] .wallet-balance {
margin-top: 22px;
background: rgba(255, 255, 255, 0.12);
border-radius: 22px;
padding: 18px;
display: inline-flex;
flex-direction: column;
min-width: 260px;
}
body[data-page="dashboard"] .wallet-balance span {
font-size: 12px;
color: #d9f2e6;
margin-bottom: 8px;
}
body[data-page="dashboard"] .wallet-balance strong {
font-size: 28px;
color: #ffffff;
}
body[data-page="dashboard"] .hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 22px;
}
body[data-page="dashboard"] .btn {
border: none;
outline: none;
cursor: pointer;
padding: 11px 16px;
border-radius: 15px;
font-size: 13px;
transition: 0.25s;
}
body[data-page="dashboard"] .btn-primary {
background: #d9f2e6;
color: #1f3d3a;
font-weight: bold;
}
body[data-page="dashboard"] .btn-primary:hover {
background: #ffffff;
}
body[data-page="dashboard"] .btn-soft {
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
body[data-page="dashboard"] .btn-soft:hover {
background: rgba(255, 255, 255, 0.18);
}
body[data-page="dashboard"] .btn-dark {
background: #1f3d3a;
color: #ffffff;
font-weight: bold;
}
body[data-page="dashboard"] .btn-dark:hover {
background: #2f5d56;
}
body[data-page="dashboard"] .quick-card {
background: #e7efec;
border-radius: 30px;
padding: 23px;
box-shadow: 0 14px 35px rgba(31, 61, 58, 0.08);
border: 1px solid #c5d3cf;
}
body[data-page="dashboard"] .quick-title {
font-size: 17px;
color: #1f3d3a;
font-weight: bold;
margin-bottom: 18px;
}
body[data-page="dashboard"] .quick-list {
display: flex;
flex-direction: column;
gap: 13px;
}
body[data-page="dashboard"] .quick-item {
background: #d8e3e0;
border-radius: 20px;
padding: 16px;
border: 1px solid #c6d4d0;
transition: 0.25s;
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
}
body[data-page="dashboard"] .quick-item:hover {
background: #d1dedb;
transform: translateX(-3px);
}
body[data-page="dashboard"] .quick-icon {
width: 42px;
height: 42px;
border-radius: 16px;
background: #1f3d3a;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
flex-shrink: 0;
}
body[data-page="dashboard"] .quick-text {
flex: 1;
}
body[data-page="dashboard"] .quick-text strong {
display: block;
color: #1f3d3a;
font-size: 13px;
margin-bottom: 6px;
}
body[data-page="dashboard"] .quick-text span {
color: #6f8782;
font-size: 11px;
line-height: 1.8;
}
body[data-page="dashboard"] .quick-number {
background: #d9f2e6;
color: #1f7a58;
min-width: 34px;
height: 34px;
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: bold;
}
body[data-page="dashboard"] .content-grid {
display: grid;
grid-template-columns: 1.45fr 0.95fr;
gap: 18px;
}
body[data-page="dashboard"] .panel {
background: #e7efec;
border-radius: 30px;
padding: 23px;
box-shadow: 0 14px 35px rgba(31, 61, 58, 0.08);
border: 1px solid #c5d3cf;
}
body[data-page="dashboard"] .panel-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
body[data-page="dashboard"] .panel-title {
font-size: 17px;
color: #1f3d3a;
font-weight: bold;
}
body[data-page="dashboard"] .panel-link {
color: #2f6f92;
font-size: 13px;
font-weight: bold;
}
body[data-page="dashboard"] .service-list {
display: flex;
flex-direction: column;
gap: 13px;
}
body[data-page="dashboard"] .service-card {
background: #d8e3e0;
border: 1px solid #c6d4d0;
border-radius: 24px;
padding: 18px;
transition: 0.25s;
}
body[data-page="dashboard"] .service-card:hover {
background: #d1dedb;
}
body[data-page="dashboard"] .service-top {
display: flex;
align-items: flex-start;
gap: 13px;
margin-bottom: 18px;
}
body[data-page="dashboard"] .service-icon {
width: 48px;
height: 48px;
border-radius: 18px;
background: #1f3d3a;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex-shrink: 0;
}
body[data-page="dashboard"] .service-info strong {
display: block;
color: #1f3d3a;
font-size: 15px;
margin-bottom: 8px;
}
body[data-page="dashboard"] .service-info span {
display: block;
color: #6f8782;
font-size: 12px;
line-height: 1.9;
}
body[data-page="dashboard"] .service-actions {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
body[data-page="dashboard"] .small-btn {
border: none;
border-radius: 13px;
padding: 10px 13px;
cursor: pointer;
font-size: 12px;
transition: 0.25s;
}
body[data-page="dashboard"] .small-btn-main {
background: #1f3d3a;
color: #ffffff;
}
body[data-page="dashboard"] .small-btn-main:hover {
background: #2f5d56;
}
body[data-page="dashboard"] .small-btn-light {
background: #d9f2e6;
color: #1f7a58;
font-weight: bold;
}
body[data-page="dashboard"] .small-btn-light:hover {
background: #c8eadb;
}
body[data-page="dashboard"] .small-btn-cream {
background: #f3ead8;
color: #98723a;
font-weight: bold;
}
body[data-page="dashboard"] .small-btn-cream:hover {
background: #eadfca;
}
body[data-page="dashboard"] .plans-list {
display: flex;
flex-direction: column;
gap: 13px;
}
body[data-page="dashboard"] .plan-card {
background: #d8e3e0;
border: 1px solid #c6d4d0;
border-radius: 22px;
padding: 17px;
}
body[data-page="dashboard"] .plan-card strong {
display: block;
color: #1f3d3a;
font-size: 14px;
margin-bottom: 8px;
}
body[data-page="dashboard"] .plan-card span {
display: block;
color: #6f8782;
font-size: 12px;
line-height: 1.9;
margin-bottom: 14px;
}
body[data-page="dashboard"] .plan-price {
color: #1f3d3a;
font-weight: bold;
font-size: 18px;
margin-bottom: 14px;
}
body[data-page="dashboard"] .note-box {
background: #d8e3e0;
border: 1px dashed #aebfbb;
border-radius: 22px;
padding: 17px;
color: #6f8782;
font-size: 12px;
line-height: 2;
margin-top: 13px;
}
@media (max-width: 1100px){
body[data-page="dashboard"] .hero-layout, body[data-page="dashboard"] .content-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 850px){
body[data-page="dashboard"] .app {
flex-direction: column;
padding: 12px;
}
body[data-page="dashboard"] .sidebar {
width: 100%;
min-height: auto;
}
body[data-page="dashboard"] .main {
border-radius: 26px;
padding: 16px;
}
body[data-page="dashboard"] .topbar {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
body[data-page="dashboard"] .user-box {
width: 100%;
}
body[data-page="dashboard"] .wallet-hero h2 {
font-size: 22px;
}
body[data-page="dashboard"] .wallet-balance {
width: 100%;
}
body[data-page="dashboard"] .service-actions {
flex-direction: column;
}
body[data-page="dashboard"] .small-btn, body[data-page="dashboard"] .btn {
width: 100%;
}
}
/* ================= forgot-password.html ================= */
body[data-page="forgot-password"] * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body[data-page="forgot-password"] {
font-family: Tahoma, Arial, sans-serif;
background: #d8e3e0;
color: #243b3a;
min-height: 100vh;
}
body[data-page="forgot-password"] a {
text-decoration: none;
}
body[data-page="forgot-password"] button, body[data-page="forgot-password"] input {
font-family: Tahoma, Arial, sans-serif;
}
body[data-page="forgot-password"] .page {
min-height: 100vh;
padding: 18px;
display: grid;
grid-template-columns: 1fr 470px;
gap: 18px;
}
body[data-page="forgot-password"] .hero {
background:
linear-gradient(135deg, #21433f, #2f5d56),
radial-gradient(circle at left top, rgba(217, 242, 230, 0.25), transparent 40%);
border-radius: 34px;
padding: 42px;
color: #ffffff;
position: relative;
overflow: hidden;
box-shadow: 0 18px 45px rgba(31, 61, 58, 0.22);
display: flex;
flex-direction: column;
justify-content: space-between;
}
body[data-page="forgot-password"] .hero::before {
content: "";
position: absolute;
width: 380px;
height: 380px;
border-radius: 50%;
background: rgba(217, 242, 230, 0.10);
left: -130px;
bottom: -150px;
}
body[data-page="forgot-password"] .hero::after {
content: "";
position: absolute;
width: 260px;
height: 260px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
right: -90px;
top: -90px;
}
body[data-page="forgot-password"] .hero-content, body[data-page="forgot-password"] .hero-steps {
position: relative;
z-index: 2;
}
body[data-page="forgot-password"] .brand {
display: flex;
align-items: center;
gap: 13px;
margin-bottom: 55px;
}
body[data-page="forgot-password"] .brand-logo {
width: 56px;
height: 56px;
border-radius: 20px;
background: #d9f2e6;
color: #1f3d3a;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 900;
flex-shrink: 0;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}
body[data-page="forgot-password"] .brand-text h1 {
color: #ffffff;
font-size: 22px;
margin-bottom: 6px;
letter-spacing: 0.5px;
}
body[data-page="forgot-password"] .brand-text span {
color: #b9d7d1;
font-size: 13px;
}
body[data-page="forgot-password"] .hero-label {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.12);
color: #d9f2e6;
padding: 8px 13px;
border-radius: 999px;
font-size: 12px;
margin-bottom: 18px;
}
body[data-page="forgot-password"] .hero-dot {
width: 8px;
height: 8px;
background: #80ed99;
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(128, 237, 153, 0.13);
}
body[data-page="forgot-password"] .hero h2 {
font-size: 34px;
line-height: 1.8;
margin-bottom: 14px;
max-width: 700px;
}
body[data-page="forgot-password"] .hero p {
color: #cfe2de;
font-size: 15px;
line-height: 2.2;
max-width: 740px;
}
body[data-page="forgot-password"] .hero-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 13px;
margin-top: 35px;
}
body[data-page="forgot-password"] .step-card {
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 22px;
padding: 16px;
backdrop-filter: blur(6px);
}
body[data-page="forgot-password"] .step-card span {
display: block;
color: #d9f2e6;
font-size: 12px;
margin-bottom: 8px;
}
body[data-page="forgot-password"] .step-card strong {
display: block;
color: #ffffff;
font-size: 16px;
font-weight: 900;
}
body[data-page="forgot-password"] .box-wrap {
background: #cfdcd8;
border-radius: 34px;
padding: 22px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 0 1px rgba(31, 61, 58, 0.06);
}
body[data-page="forgot-password"] .box {
width: 100%;
background: #e7efec;
border: 1px solid #c5d3cf;
border-radius: 30px;
padding: 28px;
box-shadow: 0 18px 45px rgba(31, 61, 58, 0.12);
}
body[data-page="forgot-password"] .mobile-brand {
display: none;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
body[data-page="forgot-password"] .mobile-brand .brand-logo {
width: 50px;
height: 50px;
font-size: 20px;
box-shadow: none;
}
body[data-page="forgot-password"] .mobile-brand h2 {
color: #1f3d3a;
font-size: 19px;
margin-bottom: 5px;
}
body[data-page="forgot-password"] .mobile-brand span {
color: #6f8782;
font-size: 12px;
}
body[data-page="forgot-password"] .form-step {
display: none;
}
body[data-page="forgot-password"] .form-step.active {
display: block;
}
body[data-page="forgot-password"] .title {
margin-bottom: 22px;
}
body[data-page="forgot-password"] .title h2 {
color: #1f3d3a;
font-size: 24px;
margin-bottom: 9px;
}
body[data-page="forgot-password"] .title p {
color: #6f8782;
font-size: 13px;
line-height: 2;
}
body[data-page="forgot-password"] .progress {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 22px;
}
body[data-page="forgot-password"] .progress-item {
height: 7px;
border-radius: 999px;
background: #d3dfdc;
}
body[data-page="forgot-password"] .progress-item.active {
background: #1f3d3a;
}
body[data-page="forgot-password"] .form-group {
margin-bottom: 15px;
}
body[data-page="forgot-password"] .form-group label {
display: block;
color: #1f3d3a;
font-size: 13px;
font-weight: bold;
margin-bottom: 8px;
}
body[data-page="forgot-password"] .input-wrap {
background: #f3f8f6;
border: 1px solid #d3dfdc;
border-radius: 18px;
padding: 0 14px;
display: flex;
align-items: center;
gap: 10px;
transition: 0.25s;
}
body[data-page="forgot-password"] .input-wrap:focus-within {
border-color: #1f3d3a;
box-shadow: 0 0 0 4px rgba(31, 61, 58, 0.08);
}
body[data-page="forgot-password"] .input-icon {
color: #78908b;
font-size: 15px;
flex-shrink: 0;
}
body[data-page="forgot-password"] .form-control {
width: 100%;
border: none;
outline: none;
background: transparent;
color: #1f3d3a;
padding: 14px 0;
font-size: 14px;
font-weight: 700;
}
body[data-page="forgot-password"] .form-control::placeholder {
color: #78908b;
font-weight: normal;
}
body[data-page="forgot-password"] .ltr-input {
direction: ltr;
text-align: left;
}
body[data-page="forgot-password"] .code-inputs {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 9px;
direction: ltr;
margin-bottom: 16px;
}
body[data-page="forgot-password"] .code-inputs input {
width: 100%;
height: 52px;
border: 1px solid #d3dfdc;
background: #f3f8f6;
border-radius: 16px;
text-align: center;
font-size: 20px;
font-weight: 900;
color: #1f3d3a;
outline: none;
}
body[data-page="forgot-password"] .code-inputs input:focus {
border-color: #1f3d3a;
box-shadow: 0 0 0 4px rgba(31, 61, 58, 0.08);
}
body[data-page="forgot-password"] .phone-preview {
background: #f3f8f6;
border: 1px solid #d3dfdc;
border-radius: 18px;
padding: 13px 14px;
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
body[data-page="forgot-password"] .phone-preview span {
color: #78908b;
font-size: 12px;
}
body[data-page="forgot-password"] .phone-preview strong {
color: #1f3d3a;
font-size: 14px;
direction: ltr;
text-align: left;
}
body[data-page="forgot-password"] .main-btn {
width: 100%;
border: none;
border-radius: 18px;
background: #1f3d3a;
color: #ffffff;
padding: 14px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
transition: 0.25s;
box-shadow: 0 12px 24px rgba(31, 61, 58, 0.18);
}
body[data-page="forgot-password"] .main-btn:hover {
background: #2f5d56;
transform: translateY(-1px);
}
body[data-page="forgot-password"] .back-btn {
width: 100%;
border: none;
border-radius: 18px;
background: #d8e3e0;
color: #1f3d3a;
padding: 13px;
cursor: pointer;
font-size: 13px;
font-weight: bold;
transition: 0.25s;
margin-top: 10px;
}
body[data-page="forgot-password"] .back-btn:hover {
background: #d1dedb;
}
body[data-page="forgot-password"] .link-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 16px;
}
body[data-page="forgot-password"] .simple-link {
color: #1f3d3a;
font-size: 12px;
font-weight: bold;
}
body[data-page="forgot-password"] .simple-link:hover {
text-decoration: underline;
}
body[data-page="forgot-password"] .notice-box {
background: #f3ead8;
border: 1px solid #e2d2b5;
color: #876535;
border-radius: 18px;
padding: 14px;
font-size: 12px;
line-height: 2;
margin-top: 18px;
}
body[data-page="forgot-password"] .success-box {
background: #d9f2e6;
border: 1px solid #b8dfc9;
color: #1f7a58;
border-radius: 18px;
padding: 14px;
font-size: 12px;
line-height: 2;
margin-top: 18px;
}
body[data-page="forgot-password"] .footer-text {
text-align: center;
margin-top: 18px;
color: #78908b;
font-size: 11px;
line-height: 1.9;
}
@media (max-width: 1050px){
body[data-page="forgot-password"] .page {
grid-template-columns: 1fr;
}
body[data-page="forgot-password"] .hero {
display: none;
}
body[data-page="forgot-password"] .box-wrap {
min-height: calc(100vh - 36px);
}
body[data-page="forgot-password"] .mobile-brand {
display: flex;
}
}
@media (max-width: 600px){
body[data-page="forgot-password"] .page {
padding: 12px;
}
body[data-page="forgot-password"] .box-wrap {
border-radius: 28px;
padding: 14px;
min-height: calc(100vh - 24px);
}
body[data-page="forgot-password"] .box {
padding: 22px;
border-radius: 26px;
}
body[data-page="forgot-password"] .phone-preview, body[data-page="forgot-password"] .link-row {
flex-direction: column;
align-items: flex-start;
}
body[data-page="forgot-password"] .code-inputs {
gap: 6px;
}
body[data-page="forgot-password"] .code-inputs input {
height: 48px;
border-radius: 14px;
}
}
/* ================= login.html ================= */
body[data-page="login"] * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body[data-page="login"] {
font-family: Tahoma, Arial, sans-serif;
background: #d8e3e0;
color: #243b3a;
min-height: 100vh;
}
body[data-page="login"] a {
text-decoration: none;
}
body[data-page="login"] button, body[data-page="login"] input {
font-family: Tahoma, Arial, sans-serif;
}
body[data-page="login"] .login-page {
min-height: 100vh;
padding: 18px;
display: grid;
grid-template-columns: 1fr 470px;
gap: 18px;
}
body[data-page="login"] .login-hero {
background:
linear-gradient(135deg, #21433f, #2f5d56),
radial-gradient(circle at left top, rgba(217, 242, 230, 0.25), transparent 40%);
border-radius: 34px;
padding: 42px;
color: #ffffff;
position: relative;
overflow: hidden;
box-shadow: 0 18px 45px rgba(31, 61, 58, 0.22);
display: flex;
flex-direction: column;
justify-content: space-between;
}
body[data-page="login"] .login-hero::before {
content: "";
position: absolute;
width: 380px;
height: 380px;
border-radius: 50%;
background: rgba(217, 242, 230, 0.10);
left: -130px;
bottom: -150px;
}
body[data-page="login"] .login-hero::after {
content: "";
position: absolute;
width: 260px;
height: 260px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
right: -90px;
top: -90px;
}
body[data-page="login"] .hero-content, body[data-page="login"] .hero-stats {
position: relative;
z-index: 2;
}
body[data-page="login"] .brand {
display: flex;
align-items: center;
gap: 13px;
margin-bottom: 55px;
}
body[data-page="login"] .brand-logo {
width: 56px;
height: 56px;
border-radius: 20px;
background: #d9f2e6;
color: #1f3d3a;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 900;
flex-shrink: 0;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}
body[data-page="login"] .brand-text h1 {
color: #ffffff;
font-size: 22px;
margin-bottom: 6px;
letter-spacing: 0.5px;
}
body[data-page="login"] .brand-text span {
color: #b9d7d1;
font-size: 13px;
}
body[data-page="login"] .hero-label {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.12);
color: #d9f2e6;
padding: 8px 13px;
border-radius: 999px;
font-size: 12px;
margin-bottom: 18px;
}
body[data-page="login"] .hero-dot {
width: 8px;
height: 8px;
background: #80ed99;
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(128, 237, 153, 0.13);
}
body[data-page="login"] .login-hero h2 {
font-size: 34px;
line-height: 1.8;
margin-bottom: 14px;
max-width: 700px;
}
body[data-page="login"] .login-hero p {
color: #cfe2de;
font-size: 15px;
line-height: 2.2;
max-width: 740px;
}
body[data-page="login"] .hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 13px;
margin-top: 35px;
}
body[data-page="login"] .stat-card {
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 22px;
padding: 16px;
backdrop-filter: blur(6px);
}
body[data-page="login"] .stat-card span {
display: block;
color: #d9f2e6;
font-size: 12px;
margin-bottom: 8px;
}
body[data-page="login"] .stat-card strong {
display: block;
color: #ffffff;
font-size: 16px;
font-weight: 900;
}
body[data-page="login"] .login-box-wrap {
background: #cfdcd8;
border-radius: 34px;
padding: 22px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 0 1px rgba(31, 61, 58, 0.06);
}
body[data-page="login"] .login-box {
width: 100%;
background: #e7efec;
border: 1px solid #c5d3cf;
border-radius: 30px;
padding: 28px;
box-shadow: 0 18px 45px rgba(31, 61, 58, 0.12);
}
body[data-page="login"] .mobile-brand {
display: none;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
body[data-page="login"] .mobile-brand .brand-logo {
width: 50px;
height: 50px;
font-size: 20px;
box-shadow: none;
}
body[data-page="login"] .mobile-brand h2 {
color: #1f3d3a;
font-size: 19px;
margin-bottom: 5px;
}
body[data-page="login"] .mobile-brand span {
color: #6f8782;
font-size: 12px;
}
body[data-page="login"] .login-title {
margin-bottom: 22px;
}
body[data-page="login"] .login-title h2 {
color: #1f3d3a;
font-size: 24px;
margin-bottom: 9px;
}
body[data-page="login"] .login-title p {
color: #6f8782;
font-size: 13px;
line-height: 2;
}
body[data-page="login"] .step-box {
display: none;
}
body[data-page="login"] .step-box.active {
display: block;
}
body[data-page="login"] .form-group {
margin-bottom: 15px;
}
body[data-page="login"] .form-group label {
display: block;
color: #1f3d3a;
font-size: 13px;
font-weight: bold;
margin-bottom: 8px;
}
body[data-page="login"] .input-wrap {
background: #f3f8f6;
border: 1px solid #d3dfdc;
border-radius: 18px;
padding: 0 14px;
display: flex;
align-items: center;
gap: 10px;
transition: 0.25s;
}
body[data-page="login"] .input-wrap:focus-within {
border-color: #1f3d3a;
box-shadow: 0 0 0 4px rgba(31, 61, 58, 0.08);
}
body[data-page="login"] .input-icon {
color: #78908b;
font-size: 15px;
flex-shrink: 0;
}
body[data-page="login"] .form-control {
width: 100%;
border: none;
outline: none;
background: transparent;
color: #1f3d3a;
padding: 14px 0;
font-size: 14px;
font-weight: 700;
}
body[data-page="login"] .form-control::placeholder {
color: #78908b;
font-weight: normal;
}
body[data-page="login"] .ltr-input {
direction: ltr;
text-align: left;
}
body[data-page="login"] .main-btn {
width: 100%;
border: none;
border-radius: 18px;
background: #1f3d3a;
color: #ffffff;
padding: 14px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
transition: 0.25s;
box-shadow: 0 12px 24px rgba(31, 61, 58, 0.18);
}
body[data-page="login"] .main-btn:hover {
background: #2f5d56;
transform: translateY(-1px);
}
body[data-page="login"] .back-btn {
width: 100%;
border: none;
border-radius: 18px;
background: #d8e3e0;
color: #1f3d3a;
padding: 13px;
cursor: pointer;
font-size: 13px;
font-weight: bold;
transition: 0.25s;
margin-top: 10px;
}
body[data-page="login"] .back-btn:hover {
background: #d1dedb;
}
body[data-page="login"] .phone-preview {
background: #f3f8f6;
border: 1px solid #d3dfdc;
border-radius: 18px;
padding: 13px 14px;
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
body[data-page="login"] .phone-preview span {
color: #78908b;
font-size: 12px;
}
body[data-page="login"] .phone-preview strong {
color: #1f3d3a;
font-size: 14px;
direction: ltr;
text-align: left;
}
body[data-page="login"] .forgot-link {
display: inline-block;
margin: 4px 0 18px;
color: #1f3d3a;
font-size: 12px;
font-weight: bold;
}
body[data-page="login"] .forgot-link:hover {
text-decoration: underline;
}
body[data-page="login"] .notice-box {
background: #f3ead8;
border: 1px solid #e2d2b5;
color: #876535;
border-radius: 18px;
padding: 14px;
font-size: 12px;
line-height: 2;
margin-top: 18px;
}
body[data-page="login"] .success-box {
background: #d9f2e6;
border: 1px solid #b8dfc9;
color: #1f7a58;
border-radius: 18px;
padding: 14px;
font-size: 12px;
line-height: 2;
margin-top: 18px;
}
body[data-page="login"] .footer-text {
text-align: center;
margin-top: 18px;
color: #78908b;
font-size: 11px;
line-height: 1.9;
}
@media (max-width: 1050px){
body[data-page="login"] .login-page {
grid-template-columns: 1fr;
}
body[data-page="login"] .login-hero {
display: none;
}
body[data-page="login"] .login-box-wrap {
min-height: calc(100vh - 36px);
}
body[data-page="login"] .mobile-brand {
display: flex;
}
}
@media (max-width: 600px){
body[data-page="login"] .login-page {
padding: 12px;
}
body[data-page="login"] .login-box-wrap {
border-radius: 28px;
padding: 14px;
min-height: calc(100vh - 24px);
}
body[data-page="login"] .login-box {
padding: 22px;
border-radius: 26px;
}
body[data-page="login"] .phone-preview {
flex-direction: column;
align-items: flex-start;
}
}
/* ================= order.html ================= */
body[data-page="order"] * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body[data-page="order"] {
font-family: Tahoma, Arial, sans-serif;
background: #d8e3e0;
color: #243b3a;
min-height: 100vh;
}
body[data-page="order"] a {
text-decoration: none;
}
body[data-page="order"] button, body[data-page="order"] input, body[data-page="order"] select {
font-family: Tahoma, Arial, sans-serif;
}
body[data-page="order"] .app {
display: flex;
min-height: 100vh;
padding: 18px;
gap: 18px;
}
body[data-page="order"] .sidebar {
width: 270px;
background: #1f3d3a;
border-radius: 30px;
padding: 24px 18px;
display: flex;
flex-direction: column;
min-height: calc(100vh - 36px);
box-shadow: 0 18px 45px rgba(31, 61, 58, 0.20);
flex-shrink: 0;
}
body[data-page="order"] .brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 34px;
padding: 0 6px;
}
body[data-page="order"] .brand-logo {
width: 48px;
height: 48px;
border-radius: 18px;
background: #d9f2e6;
color: #1f3d3a;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
flex-shrink: 0;
}
body[data-page="order"] .brand-text h2 {
font-size: 18px;
color: #ffffff;
margin-bottom: 5px;
letter-spacing: 0.5px;
}
body[data-page="order"] .brand-text span {
font-size: 12px;
color: #b9d7d1;
}
body[data-page="order"] .menu {
display: flex;
flex-direction: column;
gap: 9px;
}
body[data-page="order"] .menu-item {
color: #cfe2de;
padding: 13px 14px;
border-radius: 16px;
display: flex;
align-items: center;
gap: 11px;
font-size: 14px;
transition: 0.25s;
}
body[data-page="order"] .menu-item:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
body[data-page="order"] .menu-item.active {
background: #d9f2e6;
color: #1f3d3a;
font-weight: bold;
}
body[data-page="order"] .menu-icon {
width: 31px;
height: 31px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.10);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
body[data-page="order"] .menu-item.active .menu-icon {
background: #ffffff;
}
body[data-page="order"] .sidebar-footer {
margin-top: auto;
background: rgba(255, 255, 255, 0.08);
border-radius: 22px;
padding: 16px;
}
body[data-page="order"] .sidebar-footer-title {
color: #ffffff;
font-size: 13px;
font-weight: bold;
margin-bottom: 8px;
}
body[data-page="order"] .sidebar-footer p {
font-size: 12px;
color: #d8ebe7;
line-height: 1.9;
}
body[data-page="order"] .logout-btn {
margin-top: 14px;
width: 100%;
background: rgba(255, 255, 255, 0.10);
color: #ffffff;
border: none;
border-radius: 15px;
padding: 11px;
cursor: pointer;
transition: 0.25s;
}
body[data-page="order"] .logout-btn:hover {
background: rgba(255, 255, 255, 0.16);
}
body[data-page="order"] .main {
flex: 1;
min-width: 0;
background: #cfdcd8;
border-radius: 32px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 18px;
box-shadow: inset 0 0 0 1px rgba(31, 61, 58, 0.06);
}
body[data-page="order"] .topbar {
background: #e7efec;
border-radius: 28px;
padding: 20px 22px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 14px 35px rgba(31, 61, 58, 0.09);
border: 1px solid #c5d3cf;
gap: 16px;
}
body[data-page="order"] .page-title h1 {
font-size: 23px;
color: #1f3d3a;
margin-bottom: 8px;
}
body[data-page="order"] .page-title p {
font-size: 14px;
color: #647b76;
line-height: 1.9;
}
body[data-page="order"] .wallet-mini {
background: #d8e3e0;
border: 1px solid #c6d4d0;
border-radius: 20px;
padding: 12px 16px;
min-width: 230px;
}
body[data-page="order"] .wallet-mini span {
display: block;
color: #6f8782;
font-size: 12px;
margin-bottom: 7px;
}
body[data-page="order"] .wallet-mini strong {
display: block;
color: #1f3d3a;
font-size: 18px;
font-weight: 900;
}
body[data-page="order"] .order-hero {
background:
linear-gradient(135deg, #21433f, #2f5d56),
radial-gradient(circle at left top, rgba(217, 242, 230, 0.25), transparent 40%);
border-radius: 30px;
padding: 26px;
color: #ffffff;
position: relative;
overflow: hidden;
box-shadow: 0 18px 42px rgba(31, 61, 58, 0.22);
}
body[data-page="order"] .order-hero::after {
content: "";
position: absolute;
width: 250px;
height: 250px;
border-radius: 50%;
background: rgba(217, 242, 230, 0.11);
left: -85px;
bottom: -100px;
}
body[data-page="order"] .order-hero-content {
position: relative;
z-index: 2;
}
body[data-page="order"] .hero-label {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.12);
color: #d9f2e6;
padding: 7px 12px;
border-radius: 999px;
font-size: 12px;
margin-bottom: 16px;
}
body[data-page="order"] .hero-dot {
width: 8px;
height: 8px;
background: #80ed99;
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(128, 237, 153, 0.13);
}
body[data-page="order"] .order-hero h2 {
font-size: 26px;
line-height: 1.8;
margin-bottom: 10px;
}
body[data-page="order"] .order-hero p {
color: #cfe2de;
font-size: 14px;
line-height: 2;
max-width: 850px;
}
body[data-page="order"] .hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 22px;
}
body[data-page="order"] .btn {
border: none;
outline: none;
cursor: pointer;
padding: 11px 16px;
border-radius: 15px;
font-size: 13px;
transition: 0.25s;
}
body[data-page="order"] .btn-primary {
background: #d9f2e6;
color: #1f3d3a;
font-weight: bold;
}
body[data-page="order"] .btn-primary:hover {
background: #ffffff;
}
body[data-page="order"] .btn-soft {
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
body[data-page="order"] .btn-soft:hover {
background: rgba(255, 255, 255, 0.18);
}
body[data-page="order"] .layout-grid {
display: grid;
grid-template-columns: 1fr 330px;
gap: 18px;
align-items: flex-start;
}
body[data-page="order"] .panel {
background: #e7efec;
border-radius: 30px;
padding: 23px;
box-shadow: 0 14px 35px rgba(31, 61, 58, 0.08);
border: 1px solid #c5d3cf;
}
body[data-page="order"] .panel-title {
font-size: 17px;
color: #1f3d3a;
font-weight: bold;
margin-bottom: 17px;
}
body[data-page="order"] .tools-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
flex-wrap: wrap;
}
body[data-page="order"] .search-box {
width: 360px;
background: #d8e3e0;
border: 1px solid #c6d4d0;
border-radius: 18px;
padding: 12px 15px;
display: flex;
align-items: center;
gap: 9px;
}
body[data-page="order"] .search-box input {
width: 100%;
border: none;
outline: none;
background: transparent;
color: #1f3d3a;
font-size: 14px;
}
body[data-page="order"] .search-box input::placeholder {
color: #78908b;
}
body[data-page="order"] .filter-tabs {
display: flex;
gap: 9px;
flex-wrap: wrap;
}
body[data-page="order"] .filter-btn {
border: none;
background: #d8e3e0;
color: #3f5855;
padding: 10px 15px;
border-radius: 14px;
font-size: 13px;
cursor: pointer;
transition: 0.25s;
}
body[data-page="order"] .filter-btn.active, body[data-page="order"] .filter-btn:hover {
background: #1f3d3a;
color: #ffffff;
}
body[data-page="order"] .service-tab-content {
display: none;
}
body[data-page="order"] .service-tab-content.active {
display: block;
}
body[data-page="order"] .category-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
padding: 0 4px;
}
body[data-page="order"] .category-title h3 {
color: #1f3d3a;
font-size: 16px;
font-weight: 900;
}
body[data-page="order"] .category-title span {
color: #6f8782;
font-size: 12px;
}
body[data-page="order"] .plans-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
body[data-page="order"] .plan-card {
background: #f3f8f6;
border: 1px solid #d3dfdc;
border-radius: 24px;
padding: 18px;
transition: 0.25s;
position: relative;
overflow: hidden;
}
body[data-page="order"] .plan-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(31, 61, 58, 0.10);
border-color: #b8cbc6;
}
body[data-page="order"] .plan-badge {
display: inline-flex;
padding: 6px 11px;
border-radius: 999px;
font-size: 11px;
font-weight: bold;
margin-bottom: 14px;
}
body[data-page="order"] .badge-wireguard {
background: #d9f2e6;
color: #1f7a58;
}
body[data-page="order"] .badge-openvpn {
background: #dcecff;
color: #275f9b;
}
body[data-page="order"] .badge-v2ray {
background: #e7ddff;
color: #5b3c9d;
}
body[data-page="order"] .plan-card h3 {
font-size: 16px;
color: #1f3d3a;
line-height: 1.8;
margin-bottom: 9px;
}
body[data-page="order"] .plan-desc {
color: #6f8782;
font-size: 12px;
line-height: 2;
min-height: 48px;
margin-bottom: 14px;
}
body[data-page="order"] .plan-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 14px;
}
body[data-page="order"] .meta-item {
background: #edf4f1;
border: 1px solid #d3dfdc;
border-radius: 15px;
padding: 10px;
}
body[data-page="order"] .meta-item span {
display: block;
color: #78908b;
font-size: 11px;
margin-bottom: 6px;
}
body[data-page="order"] .meta-item strong {
display: block;
color: #1f3d3a;
font-size: 13px;
font-weight: 900;
}
body[data-page="order"] .period-box {
border-top: 1px solid #d3dfdc;
padding-top: 14px;
margin-top: 4px;
}
body[data-page="order"] .period-title {
color: #1f3d3a;
font-size: 13px;
font-weight: 900;
margin-bottom: 10px;
}
body[data-page="order"] .period-options {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 14px;
}
body[data-page="order"] .period-option {
display: block;
cursor: pointer;
}
body[data-page="order"] .period-option input {
display: none;
}
body[data-page="order"] .period-option span {
display: block;
background: #edf4f1;
border: 1px solid #d3dfdc;
border-radius: 14px;
padding: 10px 8px;
text-align: center;
color: #3f5855;
font-size: 12px;
font-weight: 800;
transition: 0.25s;
}
body[data-page="order"] .period-option input:checked + span {
background: #1f3d3a;
color: #ffffff;
border-color: #1f3d3a;
box-shadow: 0 8px 18px rgba(31, 61, 58, 0.16);
}
body[data-page="order"] .plan-price {
background: #edf4f1;
border: 1px solid #d3dfdc;
border-radius: 18px;
padding: 13px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 14px;
}
body[data-page="order"] .plan-price span {
color: #78908b;
font-size: 12px;
}
body[data-page="order"] .plan-price strong {
color: #1f3d3a;
font-size: 18px;
font-weight: 900;
white-space: nowrap;
}
body[data-page="order"] .buy-btn {
width: 100%;
border: none;
border-radius: 15px;
background: #1f3d3a;
color: #ffffff;
padding: 12px;
cursor: pointer;
font-size: 13px;
font-weight: bold;
transition: 0.25s;
}
body[data-page="order"] .buy-btn:hover {
background: #2f5d56;
}
body[data-page="order"] .side-card {
background: #e7efec;
border-radius: 30px;
padding: 23px;
box-shadow: 0 14px 35px rgba(31, 61, 58, 0.08);
border: 1px solid #c5d3cf;
position: sticky;
top: 18px;
}
body[data-page="order"] .wallet-box {
background: #1f3d3a;
color: #ffffff;
border-radius: 24px;
padding: 18px;
margin-bottom: 15px;
}
body[data-page="order"] .wallet-box span {
display: block;
color: #d9f2e6;
font-size: 12px;
margin-bottom: 8px;
}
body[data-page="order"] .wallet-box strong {
display: block;
font-size: 24px;
font-weight: 900;
}
body[data-page="order"] .summary-box {
background: #f3f8f6;
border: 1px solid #d3dfdc;
border-radius: 22px;
padding: 16px;
margin-bottom: 13px;
}
body[data-page="order"] .summary-box h3 {
color: #1f3d3a;
font-size: 15px;
margin-bottom: 13px;
}
body[data-page="order"] .summary-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 0;
border-bottom: 1px solid #d3dfdc;
font-size: 12px;
color: #6f8782;
}
body[data-page="order"] .summary-row:last-child {
border-bottom: none;
}
body[data-page="order"] .summary-row strong {
color: #1f3d3a;
font-size: 13px;
}
body[data-page="order"] .notice-box {
background: #f3ead8;
border: 1px solid #e2d2b5;
color: #876535;
border-radius: 18px;
padding: 14px;
font-size: 12px;
line-height: 2;
margin-bottom: 13px;
}
body[data-page="order"] .success-box {
background: #d9f2e6;
border: 1px solid #b8dfc9;
color: #1f7a58;
border-radius: 18px;
padding: 14px;
font-size: 12px;
line-height: 2;
}
@media (max-width: 1250px){
body[data-page="order"] .layout-grid {
grid-template-columns: 1fr;
}
body[data-page="order"] .side-card {
position: static;
}
}
@media (max-width: 950px){
body[data-page="order"] .plans-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 850px){
body[data-page="order"] .app {
flex-direction: column;
padding: 12px;
}
body[data-page="order"] .sidebar {
width: 100%;
min-height: auto;
}
body[data-page="order"] .main {
border-radius: 26px;
padding: 16px;
}
body[data-page="order"] .topbar {
flex-direction: column;
align-items: flex-start;
}
body[data-page="order"] .wallet-mini {
width: 100%;
}
body[data-page="order"] .order-hero h2 {
font-size: 22px;
}
body[data-page="order"] .hero-actions {
flex-direction: column;
}
body[data-page="order"] .btn {
width: 100%;
}
body[data-page="order"] .tools-bar {
flex-direction: column;
align-items: stretch;
}
body[data-page="order"] .search-box {
width: 100%;
}
body[data-page="order"] .filter-tabs {
width: 100%;
display: grid;
grid-template-columns: 1fr;
}
body[data-page="order"] .filter-btn {
width: 100%;
}
body[data-page="order"] .category-title {
flex-direction: column;
align-items: flex-start;
}
body[data-page="order"] .plan-meta, body[data-page="order"] .period-options {
grid-template-columns: 1fr;
}
body[data-page="order"] .plan-price {
flex-direction: column;
align-items: flex-start;
}
}
/* ================= profile.html ================= */
body[data-page="profile"] * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body[data-page="profile"] {
font-family: Tahoma, Arial, sans-serif;
background: #d8e3e0;
color: #243b3a;
min-height: 100vh;
}
body[data-page="profile"] a {
text-decoration: none;
}
body[data-page="profile"] button, body[data-page="profile"] input {
font-family: Tahoma, Arial, sans-serif;
}
body[data-page="profile"] .app {
display: flex;
min-height: 100vh;
padding: 18px;
gap: 18px;
}
body[data-page="profile"] .sidebar {
width: 270px;
background: #1f3d3a;
border-radius: 30px;
padding: 24px 18px;
display: flex;
flex-direction: column;
min-height: calc(100vh - 36px);
box-shadow: 0 18px 45px rgba(31, 61, 58, 0.20);
flex-shrink: 0;
}
body[data-page="profile"] .brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 34px;
padding: 0 6px;
}
body[data-page="profile"] .brand-logo {
width: 48px;
height: 48px;
border-radius: 18px;
background: #d9f2e6;
color: #1f3d3a;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
flex-shrink: 0;
}
body[data-page="profile"] .brand-text h2 {
font-size: 18px;
color: #ffffff;
margin-bottom: 5px;
letter-spacing: 0.5px;
}
body[data-page="profile"] .brand-text span {
font-size: 12px;
color: #b9d7d1;
}
body[data-page="profile"] .menu {
display: flex;
flex-direction: column;
gap: 9px;
}
body[data-page="profile"] .menu-item {
color: #cfe2de;
padding: 13px 14px;
border-radius: 16px;
display: flex;
align-items: center;
gap: 11px;
font-size: 14px;
transition: 0.25s;
}
body[data-page="profile"] .menu-item:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
body[data-page="profile"] .menu-item.active {
background: #d9f2e6;
color: #1f3d3a;
font-weight: bold;
}
body[data-page="profile"] .menu-icon {
width: 31px;
height: 31px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.10);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
body[data-page="profile"] .menu-item.active .menu-icon {
background: #ffffff;
}
body[data-page="profile"] .sidebar-footer {
margin-top: auto;
background: rgba(255, 255, 255, 0.08);
border-radius: 22px;
padding: 16px;
}
body[data-page="profile"] .sidebar-footer-title {
color: #ffffff;
font-size: 13px;
font-weight: bold;
margin-bottom: 8px;
}
body[data-page="profile"] .sidebar-footer p {
font-size: 12px;
color: #d8ebe7;
line-height: 1.9;
}
body[data-page="profile"] .logout-btn {
margin-top: 14px;
width: 100%;
background: rgba(255, 255, 255, 0.10);
color: #ffffff;
border: none;
border-radius: 15px;
padding: 11px;
cursor: pointer;
transition: 0.25s;
}
body[data-page="profile"] .logout-btn:hover {
background: rgba(255, 255, 255, 0.16);
}
body[data-page="profile"] .main {
flex: 1;
min-width: 0;
background: #cfdcd8;
border-radius: 32px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 18px;
box-shadow: inset 0 0 0 1px rgba(31, 61, 58, 0.06);
}
body[data-page="profile"] .topbar {
background: #e7efec;
border-radius: 28px;
padding: 20px 22px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 14px 35px rgba(31, 61, 58, 0.09);
border: 1px solid #c5d3cf;
gap: 16px;
}
body[data-page="profile"] .page-title h1 {
font-size: 23px;
color: #1f3d3a;
margin-bottom: 8px;
}
body[data-page="profile"] .page-title p {
font-size: 14px;
color: #647b76;
line-height: 1.9;
}
body[data-page="profile"] .profile-hero {
background:
linear-gradient(135deg, #21433f, #2f5d56),
radial-gradient(circle at left top, rgba(217, 242, 230, 0.25), transparent 40%);
border-radius: 30px;
padding: 26px;
color: #ffffff;
position: relative;
overflow: hidden;
box-shadow: 0 18px 42px rgba(31, 61, 58, 0.22);
}
body[data-page="profile"] .profile-hero::after {
content: "";
position: absolute;
width: 260px;
height: 260px;
border-radius: 50%;
background: rgba(217, 242, 230, 0.11);
left: -90px;
bottom: -110px;
}
body[data-page="profile"] .profile-hero-content {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 18px;
}
body[data-page="profile"] .avatar {
width: 74px;
height: 74px;
border-radius: 26px;
background: #d9f2e6;
color: #1f3d3a;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
font-weight: 900;
flex-shrink: 0;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.13);
}
body[data-page="profile"] .profile-hero h2 {
font-size: 25px;
line-height: 1.8;
margin-bottom: 6px;
}
body[data-page="profile"] .profile-hero p {
color: #cfe2de;
font-size: 14px;
line-height: 2;
}
body[data-page="profile"] .layout-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
align-items: flex-start;
}
body[data-page="profile"] .panel {
background: #e7efec;
border-radius: 30px;
padding: 23px;
box-shadow: 0 14px 35px rgba(31, 61, 58, 0.08);
border: 1px solid #c5d3cf;
}
body[data-page="profile"] .panel-title {
font-size: 17px;
color: #1f3d3a;
font-weight: bold;
margin-bottom: 17px;
}
body[data-page="profile"] .form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px;
}
body[data-page="profile"] .form-group {
margin-bottom: 13px;
}
body[data-page="profile"] .form-group.full {
grid-column: 1 / -1;
}
body[data-page="profile"] .form-group label {
display: block;
color: #1f3d3a;
font-size: 13px;
font-weight: bold;
margin-bottom: 8px;
}
body[data-page="profile"] .form-control {
width: 100%;
border: none;
outline: none;
background: #f3f8f6;
border: 1px solid #d3dfdc;
border-radius: 16px;
padding: 13px 14px;
color: #1f3d3a;
font-size: 14px;
font-weight: 700;
}
body[data-page="profile"] .form-control::placeholder {
color: #78908b;
font-weight: normal;
}
body[data-page="profile"] .ltr-input {
direction: ltr;
text-align: left;
}
body[data-page="profile"] .save-btn {
width: 100%;
border: none;
border-radius: 18px;
background: #1f3d3a;
color: #ffffff;
padding: 14px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
transition: 0.25s;
margin-top: 4px;
}
body[data-page="profile"] .save-btn:hover {
background: #2f5d56;
}
body[data-page="profile"] .password-note {
background: #f3ead8;
border: 1px solid #e2d2b5;
color: #876535;
border-radius: 18px;
padding: 14px;
font-size: 12px;
line-height: 2;
margin-bottom: 15px;
}
body[data-page="profile"] .info-box {
background: #f3f8f6;
border: 1px solid #d3dfdc;
border-radius: 22px;
padding: 16px;
margin-top: 14px;
}
body[data-page="profile"] .info-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid #d3dfdc;
font-size: 13px;
color: #6f8782;
}
body[data-page="profile"] .info-row:last-child {
border-bottom: none;
}
body[data-page="profile"] .info-row strong {
color: #1f3d3a;
font-size: 13px;
}
@media (max-width: 1000px){
body[data-page="profile"] .layout-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 850px){
body[data-page="profile"] .app {
flex-direction: column;
padding: 12px;
}
body[data-page="profile"] .sidebar {
width: 100%;
min-height: auto;
}
body[data-page="profile"] .main {
border-radius: 26px;
padding: 16px;
}
body[data-page="profile"] .topbar {
flex-direction: column;
align-items: flex-start;
}
body[data-page="profile"] .profile-hero-content {
flex-direction: column;
align-items: flex-start;
}
body[data-page="profile"] .profile-hero h2 {
font-size: 22px;
}
body[data-page="profile"] .form-grid {
grid-template-columns: 1fr;
}
}
/* ================= result.html ================= */
body[data-page="result"] * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body[data-page="result"] {
font-family: Tahoma, Arial, sans-serif;
background: #d8e3e0;
color: #243b3a;
min-height: 100vh;
}
body[data-page="result"] a {
text-decoration: none;
}
body[data-page="result"] button {
font-family: Tahoma, Arial, sans-serif;
}
body[data-page="result"] .app {
display: flex;
min-height: 100vh;
padding: 18px;
gap: 18px;
}
body[data-page="result"] .sidebar {
width: 270px;
background: #1f3d3a;
border-radius: 30px;
padding: 24px 18px;
display: flex;
flex-direction: column;
min-height: calc(100vh - 36px);
box-shadow: 0 18px 45px rgba(31, 61, 58, 0.20);
flex-shrink: 0;
}
body[data-page="result"] .brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 34px;
padding: 0 6px;
}
body[data-page="result"] .brand-logo {
width: 48px;
height: 48px;
border-radius: 18px;
background: #d9f2e6;
color: #1f3d3a;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
flex-shrink: 0;
}
body[data-page="result"] .brand-text h2 {
font-size: 18px;
color: #ffffff;
margin-bottom: 5px;
letter-spacing: 0.5px;
}
body[data-page="result"] .brand-text span {
font-size: 12px;
color: #b9d7d1;
}
body[data-page="result"] .menu {
display: flex;
flex-direction: column;
gap: 9px;
}
body[data-page="result"] .menu-item {
color: #cfe2de;
padding: 13px 14px;
border-radius: 16px;
display: flex;
align-items: center;
gap: 11px;
font-size: 14px;
transition: 0.25s;
}
body[data-page="result"] .menu-item:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
body[data-page="result"] .menu-item.active {
background: #d9f2e6;
color: #1f3d3a;
font-weight: bold;
}
body[data-page="result"] .menu-icon {
width: 31px;
height: 31px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.10);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
body[data-page="result"] .menu-item.active .menu-icon {
background: #ffffff;
}
body[data-page="result"] .sidebar-footer {
margin-top: auto;
background: rgba(255, 255, 255, 0.08);
border-radius: 22px;
padding: 16px;
}
body[data-page="result"] .sidebar-footer-title {
color: #ffffff;
font-size: 13px;
font-weight: bold;
margin-bottom: 8px;
}
body[data-page="result"] .sidebar-footer p {
font-size: 12px;
color: #d8ebe7;
line-height: 1.9;
}
body[data-page="result"] .logout-btn {
margin-top: 14px;
width: 100%;
background: rgba(255, 255, 255, 0.10);
color: #ffffff;
border: none;
border-radius: 15px;
padding: 11px;
cursor: pointer;
transition: 0.25s;
}
body[data-page="result"] .logout-btn:hover {
background: rgba(255, 255, 255, 0.16);
}
body[data-page="result"] .main {
flex: 1;
min-width: 0;
background: #cfdcd8;
border-radius: 32px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 18px;
box-shadow: inset 0 0 0 1px rgba(31, 61, 58, 0.06);
}
body[data-page="result"] .topbar {
background: #e7efec;
border-radius: 28px;
padding: 20px 22px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 14px 35px rgba(31, 61, 58, 0.09);
border: 1px solid #c5d3cf;
gap: 16px;
}
body[data-page="result"] .page-title h1 {
font-size: 23px;
color: #1f3d3a;
margin-bottom: 8px;
}
body[data-page="result"] .page-title p {
font-size: 14px;
color: #647b76;
line-height: 1.9;
}
body[data-page="result"] .result-wrap {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
body[data-page="result"] .result-card {
width: 100%;
max-width: 760px;
background: #e7efec;
border: 1px solid #c5d3cf;
border-radius: 34px;
padding: 34px;
box-shadow: 0 18px 45px rgba(31, 61, 58, 0.12);
text-align: center;
position: relative;
overflow: hidden;
}
body[data-page="result"] .result-card::before {
content: "";
position: absolute;
width: 260px;
height: 260px;
border-radius: 50%;
background: rgba(31, 61, 58, 0.05);
left: -100px;
bottom: -120px;
}
body[data-page="result"] .result-content {
position: relative;
z-index: 2;
}
body[data-page="result"] .result-icon {
width: 92px;
height: 92px;
border-radius: 30px;
margin: 0 auto 22px;
display: flex;
align-items: center;
justify-content: center;
font-size: 38px;
font-weight: 900;
}
body[data-page="result"] .result-icon.success {
background: #d9f2e6;
color: #1f7a58;
box-shadow: 0 14px 32px rgba(31, 122, 88, 0.14);
}
body[data-page="result"] .result-icon.warning {
background: #f3ead8;
color: #98723a;
box-shadow: 0 14px 32px rgba(152, 114, 58, 0.14);
}
body[data-page="result"] .result-icon.error {
background: #f3d8d8;
color: #9b3939;
box-shadow: 0 14px 32px rgba(155, 57, 57, 0.14);
}
body[data-page="result"] .result-card h2 {
color: #1f3d3a;
font-size: 27px;
line-height: 1.8;
margin-bottom: 10px;
}
body[data-page="result"] .result-card p {
color: #647b76;
font-size: 14px;
line-height: 2.1;
max-width: 560px;
margin: 0 auto 22px;
}
body[data-page="result"] .details-box {
background: #f3f8f6;
border: 1px solid #d3dfdc;
border-radius: 24px;
padding: 18px;
margin: 22px 0;
text-align: right;
}
body[data-page="result"] .detail-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 0;
border-bottom: 1px solid #d3dfdc;
font-size: 13px;
color: #6f8782;
}
body[data-page="result"] .detail-row:last-child {
border-bottom: none;
}
body[data-page="result"] .detail-row strong {
color: #1f3d3a;
font-size: 14px;
font-weight: 900;
}
body[data-page="result"] .ltr-value {
direction: ltr;
text-align: left;
}
body[data-page="result"] .action-row {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 22px;
}
body[data-page="result"] .btn {
border: none;
border-radius: 16px;
padding: 12px 16px;
cursor: pointer;
font-size: 13px;
font-weight: bold;
transition: 0.25s;
min-width: 150px;
}
body[data-page="result"] .btn-primary {
background: #1f3d3a;
color: #ffffff;
box-shadow: 0 12px 24px rgba(31, 61, 58, 0.16);
}
body[data-page="result"] .btn-primary:hover {
background: #2f5d56;
transform: translateY(-1px);
}
body[data-page="result"] .btn-soft {
background: #d8e3e0;
color: #1f3d3a;
border: 1px solid #c6d4d0;
}
body[data-page="result"] .btn-soft:hover {
background: #d1dedb;
}
body[data-page="result"] .btn-wallet {
background: #f3ead8;
color: #98723a;
border: 1px solid #e2d2b5;
}
body[data-page="result"] .btn-wallet:hover {
background: #eadfc9;
}
body[data-page="result"] .result-tabs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 18px;
}
body[data-page="result"] .result-tab {
border: none;
background: #e7efec;
border: 1px solid #c5d3cf;
color: #3f5855;
border-radius: 17px;
padding: 13px 10px;
cursor: pointer;
font-size: 13px;
font-weight: bold;
transition: 0.25s;
}
body[data-page="result"] .result-tab.active, body[data-page="result"] .result-tab:hover {
background: #1f3d3a;
color: #ffffff;
}
body[data-page="result"] .result-state {
display: none;
}
body[data-page="result"] .result-state.active {
display: block;
}
@media (max-width: 850px){
body[data-page="result"] .app {
flex-direction: column;
padding: 12px;
}
body[data-page="result"] .sidebar {
width: 100%;
min-height: auto;
}
body[data-page="result"] .main {
border-radius: 26px;
padding: 16px;
}
body[data-page="result"] .topbar {
flex-direction: column;
align-items: flex-start;
}
body[data-page="result"] .result-tabs {
grid-template-columns: 1fr;
}
body[data-page="result"] .result-card {
padding: 24px;
border-radius: 28px;
}
body[data-page="result"] .result-card h2 {
font-size: 23px;
}
body[data-page="result"] .detail-row {
flex-direction: column;
align-items: flex-start;
}
body[data-page="result"] .action-row {
flex-direction: column;
}
body[data-page="result"] .btn {
width: 100%;
}
}
/* ================= service-detail.html ================= */
body[data-page="service-detail"] * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body[data-page="service-detail"] {
font-family: Tahoma, Arial, sans-serif;
background: #d8e3e0;
color: #243b3a;
min-height: 100vh;
}
body[data-page="service-detail"] a {
text-decoration: none;
}
body[data-page="service-detail"] button {
font-family: Tahoma, Arial, sans-serif;
}
body[data-page="service-detail"] .app {
display: flex;
min-height: 100vh;
padding: 18px;
gap: 18px;
}
body[data-page="service-detail"] .sidebar {
width: 270px;
background: #1f3d3a;
border-radius: 30px;
padding: 24px 18px;
display: flex;
flex-direction: column;
min-height: calc(100vh - 36px);
box-shadow: 0 18px 45px rgba(31, 61, 58, 0.20);
flex-shrink: 0;
}
body[data-page="service-detail"] .brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 34px;
padding: 0 6px;
}
body[data-page="service-detail"] .brand-logo {
width: 48px;
height: 48px;
border-radius: 18px;
background: #d9f2e6;
color: #1f3d3a;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
flex-shrink: 0;
}
body[data-page="service-detail"] .brand-text h2 {
font-size: 18px;
color: #ffffff;
margin-bottom: 5px;
letter-spacing: 0.5px;
}
body[data-page="service-detail"] .brand-text span {
font-size: 12px;
color: #b9d7d1;
}
body[data-page="service-detail"] .menu {
display: flex;
flex-direction: column;
gap: 9px;
}
body[data-page="service-detail"] .menu-item {
color: #cfe2de;
padding: 13px 14px;
border-radius: 16px;
display: flex;
align-items: center;
gap: 11px;
font-size: 14px;
transition: 0.25s;
}
body[data-page="service-detail"] .menu-item:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
body[data-page="service-detail"] .menu-item.active {
background: #d9f2e6;
color: #1f3d3a;
font-weight: bold;
}
body[data-page="service-detail"] .menu-icon {
width: 31px;
height: 31px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.10);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
body[data-page="service-detail"] .menu-item.active .menu-icon {
background: #ffffff;
}
body[data-page="service-detail"] .sidebar-footer {
margin-top: auto;
background: rgba(255, 255, 255, 0.08);
border-radius: 22px;
padding: 16px;
}
body[data-page="service-detail"] .sidebar-footer-title {
color: #ffffff;
font-size: 13px;
font-weight: bold;
margin-bottom: 8px;
}
body[data-page="service-detail"] .sidebar-footer p {
font-size: 12px;
color: #d8ebe7;
line-height: 1.9;
}
body[data-page="service-detail"] .logout-btn {
margin-top: 14px;
width: 100%;
background: rgba(255, 255, 255, 0.10);
color: #ffffff;
border: none;
border-radius: 15px;
padding: 11px;
cursor: pointer;
transition: 0.25s;
}
body[data-page="service-detail"] .logout-btn:hover {
background: rgba(255, 255, 255, 0.16);
}
body[data-page="service-detail"] .main {
flex: 1;
min-width: 0;
background: #cfdcd8;
border-radius: 32px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 18px;
box-shadow: inset 0 0 0 1px rgba(31, 61, 58, 0.06);
}
body[data-page="service-detail"] .topbar {
background: #e7efec;
border-radius: 28px;
padding: 20px 22px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 14px 35px rgba(31, 61, 58, 0.09);
border: 1px solid #c5d3cf;
gap: 16px;
}
body[data-page="service-detail"] .page-title h1 {
font-size: 23px;
color: #1f3d3a;
margin-bottom: 8px;
}
body[data-page="service-detail"] .page-title p {
font-size: 14px;
color: #647b76;
line-height: 1.9;
}
body[data-page="service-detail"] .back-btn {
background: #d8e3e0;
border: 1px solid #c6d4d0;
color: #1f3d3a;
padding: 11px 15px;
border-radius: 15px;
cursor: pointer;
font-weight: bold;
white-space: nowrap;
}
body[data-page="service-detail"] .back-btn:hover {
background: #d1dedb;
}
body[data-page="service-detail"] .service-hero {
background:
linear-gradient(135deg, #21433f, #2f5d56),
radial-gradient(circle at left top, rgba(217, 242, 230, 0.25), transparent 40%);
border-radius: 30px;
padding: 26px;
color: #ffffff;
position: relative;
overflow: hidden;
box-shadow: 0 18px 42px rgba(31, 61, 58, 0.22);
}
body[data-page="service-detail"] .service-hero::after {
content: "";
position: absolute;
width: 250px;
height: 250px;
border-radius: 50%;
background: rgba(217, 242, 230, 0.11);
left: -85px;
bottom: -100px;
}
body[data-page="service-detail"] .service-hero-content {
position: relative;
z-index: 2;
}
body[data-page="service-detail"] .hero-label {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.12);
color: #d9f2e6;
padding: 7px 12px;
border-radius: 999px;
font-size: 12px;
margin-bottom: 16px;
}
body[data-page="service-detail"] .hero-dot {
width: 8px;
height: 8px;
background: #80ed99;
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(128, 237, 153, 0.13);
}
body[data-page="service-detail"] .service-hero h2 {
font-size: 26px;
line-height: 1.8;
margin-bottom: 10px;
}
body[data-page="service-detail"] .service-hero p {
color: #cfe2de;
font-size: 14px;
line-height: 2;
max-width: 850px;
}
body[data-page="service-detail"] .hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
body[data-page="service-detail"] .btn {
border: none;
outline: none;
cursor: pointer;
padding: 11px 16px;
border-radius: 15px;
font-size: 13px;
transition: 0.25s;
}
body[data-page="service-detail"] .btn-primary {
background: #d9f2e6;
color: #1f3d3a;
font-weight: bold;
}
body[data-page="service-detail"] .btn-primary:hover {
background: #ffffff;
}
body[data-page="service-detail"] .btn-soft {
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
body[data-page="service-detail"] .btn-soft:hover {
background: rgba(255, 255, 255, 0.18);
}
body[data-page="service-detail"] .btn-config {
background: #e7ddff;
color: #5b3c9d;
font-weight: bold;
}
body[data-page="service-detail"] .btn-qr {
background: #dcecff;
color: #275f9b;
font-weight: bold;
}
body[data-page="service-detail"] .btn-renew {
background: #f3ead8;
color: #98723a;
font-weight: bold;
}
body[data-page="service-detail"] .content-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 18px;
}
body[data-page="service-detail"] .panel {
background: #e7efec;
border-radius: 28px;
padding: 22px;
box-shadow: 0 14px 35px rgba(31, 61, 58, 0.08);
border: 1px solid #c5d3cf;
}
body[data-page="service-detail"] .panel-title {
font-size: 17px;
color: #1f3d3a;
font-weight: bold;
margin-bottom: 18px;
}
body[data-page="service-detail"] .info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
body[data-page="service-detail"] .info-item {
background: #f3f8f6;
border: 1px solid #d3dfdc;
border-radius: 18px;
padding: 14px;
}
body[data-page="service-detail"] .info-item span {
display: block;
color: #78908b;
font-size: 12px;
margin-bottom: 8px;
}
body[data-page="service-detail"] .info-item strong {
display: block;
color: #1f3d3a;
font-size: 14px;
font-weight: 900;
line-height: 1.8;
}
body[data-page="service-detail"] .ltr-value {
direction: ltr;
text-align: right;
}
body[data-page="service-detail"] .status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 13px;
border-radius: 999px;
font-size: 12px;
font-weight: bold;
min-width: 92px;
white-space: nowrap;
}
body[data-page="service-detail"] .status-active {
background: #d9f2e6;
color: #1f7a58;
box-shadow: inset 0 0 0 1px rgba(31, 122, 88, 0.12);
}
body[data-page="service-detail"] .usage-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 12px;
}
body[data-page="service-detail"] .usage-card {
background: #f3f8f6;
border: 1px solid #d3dfdc;
border-radius: 18px;
padding: 16px;
}
body[data-page="service-detail"] .usage-card span {
display: block;
color: #78908b;
font-size: 12px;
margin-bottom: 8px;
}
body[data-page="service-detail"] .usage-card strong {
display: block;
color: #1f3d3a;
font-size: 19px;
font-weight: 900;
direction: ltr;
text-align: right;
}
body[data-page="service-detail"] .qr-box {
background: #f3f8f6;
border: 1px solid #d3dfdc;
border-radius: 22px;
padding: 18px;
text-align: center;
}
body[data-page="service-detail"] .qr-placeholder {
width: 240px;
height: 240px;
max-width: 100%;
border-radius: 20px;
background:
linear-gradient(45deg, #1f3d3a 25%, transparent 25%),
linear-gradient(-45deg, #1f3d3a 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #1f3d3a 75%),
linear-gradient(-45deg, transparent 75%, #1f3d3a 75%);
background-size: 28px 28px;
background-position: 0 0, 0 14px, 14px -14px, -14px 0px;
background-color: #ffffff;
margin: 0 auto;
border: 12px solid #ffffff;
box-shadow: 0 12px 30px rgba(31, 61, 58, 0.12);
}
body[data-page="service-detail"] .qr-help {
color: #6f8782;
font-size: 12px;
line-height: 2;
margin-top: 14px;
}
body[data-page="service-detail"] .config-panel {
background: #e7efec;
border-radius: 28px;
padding: 22px;
box-shadow: 0 14px 35px rgba(31, 61, 58, 0.08);
border: 1px solid #c5d3cf;
}
body[data-page="service-detail"] .config-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 15px;
}
body[data-page="service-detail"] .config-header h3 {
color: #1f3d3a;
font-size: 17px;
font-weight: bold;
}
body[data-page="service-detail"] .config-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
body[data-page="service-detail"] .small-btn {
border: none;
border-radius: 11px;
padding: 8px 11px;
cursor: pointer;
font-size: 12px;
transition: 0.25s;
white-space: nowrap;
}
body[data-page="service-detail"] .small-btn-copy {
background: #dcecff;
color: #275f9b;
font-weight: bold;
}
body[data-page="service-detail"] .small-btn-download {
background: #e7ddff;
color: #5b3c9d;
font-weight: bold;
}
body[data-page="service-detail"] .config-code {
direction: ltr;
text-align: left;
white-space: pre-wrap;
word-break: break-word;
background: #1f3d3a;
color: #e9fff5;
border-radius: 20px;
padding: 18px;
font-size: 12px;
line-height: 1.8;
max-height: 340px;
overflow: auto;
}
body[data-page="service-detail"] .help-box {
background: #f3f8f6;
border: 1px dashed #b8cbc6;
border-radius: 20px;
padding: 16px;
color: #617a75;
font-size: 12px;
line-height: 2;
margin-top: 14px;
}
@media (max-width: 1100px){
body[data-page="service-detail"] .content-grid {
grid-template-columns: 1fr;
}
body[data-page="service-detail"] .panel-header {
flex-direction: column;
}
}
@media (max-width: 850px){
body[data-page="service-detail"] .app {
flex-direction: column;
padding: 12px;
}
body[data-page="service-detail"] .sidebar {
width: 100%;
min-height: auto;
}
body[data-page="service-detail"] .main {
border-radius: 26px;
padding: 16px;
}
body[data-page="service-detail"] .topbar {
flex-direction: column;
align-items: flex-start;
}
body[data-page="service-detail"] .back-btn {
width: 100%;
}
body[data-page="service-detail"] .service-hero h2 {
font-size: 22px;
}
body[data-page="service-detail"] .hero-actions {
flex-direction: column;
}
body[data-page="service-detail"] .btn {
width: 100%;
}
body[data-page="service-detail"] .info-grid, body[data-page="service-detail"] .usage-grid {
grid-template-columns: 1fr;
}
body[data-page="service-detail"] .config-header {
flex-direction: column;
align-items: flex-start;
}
body[data-page="service-detail"] .config-actions, body[data-page="service-detail"] .config-actions .small-btn {
width: 100%;
}
body[data-page="service-detail"] .small-btn {
width: 100%;
}
body[data-page="service-detail"] .qr-placeholder {
width: 210px;
height: 210px;
}
}
/* ================= services.html ================= */
body[data-page="services"] * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body[data-page="services"] {
font-family: Tahoma, Arial, sans-serif;
background: #d8e3e0;
color: #243b3a;
min-height: 100vh;
}
body[data-page="services"] a {
text-decoration: none;
}
body[data-page="services"] button, body[data-page="services"] input, body[data-page="services"] select {
font-family: Tahoma, Arial, sans-serif;
}
body[data-page="services"] .app {
display: flex;
min-height: 100vh;
padding: 18px;
gap: 18px;
}
body[data-page="services"] .sidebar {
width: 270px;
background: #1f3d3a;
border-radius: 30px;
padding: 24px 18px;
display: flex;
flex-direction: column;
min-height: calc(100vh - 36px);
box-shadow: 0 18px 45px rgba(31, 61, 58, 0.20);
flex-shrink: 0;
}
body[data-page="services"] .brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 34px;
padding: 0 6px;
}
body[data-page="services"] .brand-logo {
width: 48px;
height: 48px;
border-radius: 18px;
background: #d9f2e6;
color: #1f3d3a;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
flex-shrink: 0;
}
body[data-page="services"] .brand-text h2 {
font-size: 18px;
color: #ffffff;
margin-bottom: 5px;
letter-spacing: 0.5px;
}
body[data-page="services"] .brand-text span {
font-size: 12px;
color: #b9d7d1;
}
body[data-page="services"] .menu {
display: flex;
flex-direction: column;
gap: 9px;
}
body[data-page="services"] .menu-item {
color: #cfe2de;
padding: 13px 14px;
border-radius: 16px;
display: flex;
align-items: center;
gap: 11px;
font-size: 14px;
transition: 0.25s;
}
body[data-page="services"] .menu-item:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
body[data-page="services"] .menu-item.active {
background: #d9f2e6;
color: #1f3d3a;
font-weight: bold;
}
body[data-page="services"] .menu-icon {
width: 31px;
height: 31px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.10);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
body[data-page="services"] .menu-item.active .menu-icon {
background: #ffffff;
}
body[data-page="services"] .sidebar-footer {
margin-top: auto;
background: rgba(255, 255, 255, 0.08);
border-radius: 22px;
padding: 16px;
}
body[data-page="services"] .sidebar-footer-title {
color: #ffffff;
font-size: 13px;
font-weight: bold;
margin-bottom: 8px;
}
body[data-page="services"] .sidebar-footer p {
font-size: 12px;
color: #d8ebe7;
line-height: 1.9;
}
body[data-page="services"] .logout-btn {
margin-top: 14px;
width: 100%;
background: rgba(255, 255, 255, 0.10);
color: #ffffff;
border: none;
border-radius: 15px;
padding: 11px;
cursor: pointer;
transition: 0.25s;
}
body[data-page="services"] .logout-btn:hover {
background: rgba(255, 255, 255, 0.16);
}
body[data-page="services"] .main {
flex: 1;
min-width: 0;
background: #cfdcd8;
border-radius: 32px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 18px;
box-shadow: inset 0 0 0 1px rgba(31, 61, 58, 0.06);
}
body[data-page="services"] .topbar {
background: #e7efec;
border-radius: 28px;
padding: 20px 22px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 14px 35px rgba(31, 61, 58, 0.09);
border: 1px solid #c5d3cf;
gap: 16px;
}
body[data-page="services"] .page-title h1 {
font-size: 23px;
color: #1f3d3a;
margin-bottom: 8px;
}
body[data-page="services"] .page-title p {
font-size: 14px;
color: #647b76;
line-height: 1.9;
}
body[data-page="services"] .user-box {
display: flex;
align-items: center;
gap: 12px;
background: #d8e3e0;
padding: 9px 12px;
border-radius: 18px;
border: 1px solid #c6d4d0;
flex-shrink: 0;
}
body[data-page="services"] .user-avatar {
width: 42px;
height: 42px;
border-radius: 16px;
background: #1f3d3a;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
flex-shrink: 0;
}
body[data-page="services"] .user-info .name {
display: block;
font-size: 13px;
color: #1f3d3a;
font-weight: bold;
margin-bottom: 4px;
white-space: nowrap;
}
body[data-page="services"] .user-info .phone {
display: block;
font-size: 11px;
color: #7b938f;
white-space: nowrap;
}
body[data-page="services"] .services-hero {
background:
linear-gradient(135deg, #21433f, #2f5d56),
radial-gradient(circle at left top, rgba(217, 242, 230, 0.25), transparent 40%);
border-radius: 30px;
padding: 26px;
color: #ffffff;
position: relative;
overflow: hidden;
box-shadow: 0 18px 42px rgba(31, 61, 58, 0.22);
}
body[data-page="services"] .services-hero::after {
content: "";
position: absolute;
width: 250px;
height: 250px;
border-radius: 50%;
background: rgba(217, 242, 230, 0.11);
left: -85px;
bottom: -100px;
}
body[data-page="services"] .services-hero-content {
position: relative;
z-index: 2;
}
body[data-page="services"] .hero-label {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.12);
color: #d9f2e6;
padding: 7px 12px;
border-radius: 999px;
font-size: 12px;
margin-bottom: 16px;
}
body[data-page="services"] .hero-dot {
width: 8px;
height: 8px;
background: #80ed99;
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(128, 237, 153, 0.13);
}
body[data-page="services"] .services-hero h2 {
font-size: 26px;
line-height: 1.8;
margin-bottom: 10px;
}
body[data-page="services"] .services-hero p {
color: #cfe2de;
font-size: 14px;
line-height: 2;
max-width: 850px;
}
body[data-page="services"] .hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 22px;
}
body[data-page="services"] .btn {
border: none;
outline: none;
cursor: pointer;
padding: 11px 16px;
border-radius: 15px;
font-size: 13px;
transition: 0.25s;
}
body[data-page="services"] .btn-primary {
background: #d9f2e6;
color: #1f3d3a;
font-weight: bold;
}
body[data-page="services"] .btn-primary:hover {
background: #ffffff;
}
body[data-page="services"] .btn-soft {
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
body[data-page="services"] .btn-soft:hover {
background: rgba(255, 255, 255, 0.18);
}
body[data-page="services"] .summary-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
body[data-page="services"] .summary-card {
background: #e7efec;
border: 1px solid #c5d3cf;
border-radius: 24px;
padding: 15px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 12px 30px rgba(31, 61, 58, 0.07);
}
body[data-page="services"] .summary-icon {
width: 42px;
height: 42px;
border-radius: 16px;
background: #1f3d3a;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
flex-shrink: 0;
}
body[data-page="services"] .summary-text span {
display: block;
font-size: 12px;
color: #6f8782;
margin-bottom: 6px;
}
body[data-page="services"] .summary-text strong {
display: block;
font-size: 15px;
color: #1f3d3a;
}
body[data-page="services"] .panel {
background: #e7efec;
border-radius: 30px;
padding: 23px;
box-shadow: 0 14px 35px rgba(31, 61, 58, 0.08);
border: 1px solid #c5d3cf;
}
body[data-page="services"] .panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 15px;
margin-bottom: 18px;
}
body[data-page="services"] .panel-title {
font-size: 17px;
color: #1f3d3a;
font-weight: bold;
margin-bottom: 10px;
}
body[data-page="services"] .search-box {
width: 420px;
background: #d8e3e0;
border: 1px solid #c6d4d0;
border-radius: 18px;
padding: 12px 15px;
display: flex;
align-items: center;
gap: 9px;
}
body[data-page="services"] .search-box input {
width: 100%;
border: none;
outline: none;
background: transparent;
color: #1f3d3a;
font-size: 14px;
}
body[data-page="services"] .search-box input::placeholder {
color: #78908b;
}
body[data-page="services"] .panel-tools {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
}
body[data-page="services"] .filter-tabs {
display: flex;
gap: 9px;
flex-wrap: wrap;
justify-content: flex-end;
}
body[data-page="services"] .filter-btn {
border: none;
background: #d8e3e0;
color: #3f5855;
padding: 10px 15px;
border-radius: 14px;
font-size: 13px;
cursor: pointer;
transition: 0.25s;
}
body[data-page="services"] .filter-btn.active, body[data-page="services"] .filter-btn:hover {
background: #1f3d3a;
color: #ffffff;
}
body[data-page="services"] .list-tools {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
flex-wrap: wrap;
}
body[data-page="services"] .list-count {
color: #647b76;
font-size: 13px;
}
body[data-page="services"] .list-count strong {
color: #1f3d3a;
}
body[data-page="services"] .per-page {
display: flex;
align-items: center;
gap: 8px;
color: #647b76;
font-size: 13px;
}
body[data-page="services"] .per-page select {
border: none;
outline: none;
background: #d8e3e0;
color: #1f3d3a;
border-radius: 13px;
padding: 8px 12px;
border: 1px solid #c6d4d0;
}
body[data-page="services"] .table-wrap {
width: 100%;
overflow-x: auto;
border-radius: 24px;
border: 1px solid #c5d3cf;
background: #f3f8f6;
box-shadow: 0 12px 30px rgba(31, 61, 58, 0.06);
}
body[data-page="services"] .services-table {
width: 100%;
min-width: 1230px;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
background: #f3f8f6;
}
body[data-page="services"] .services-table th, body[data-page="services"] .services-table td {
vertical-align: middle;
border-bottom: 1px solid #d3dfdc;
}
body[data-page="services"] .services-table thead th {
background: #1f3d3a;
color: #e9fff5;
font-size: 13px;
font-weight: 900;
padding: 15px 16px;
white-space: nowrap;
text-align: right;
}
body[data-page="services"] .services-table thead th:first-child {
border-top-right-radius: 22px;
}
body[data-page="services"] .services-table thead th:last-child {
border-top-left-radius: 22px;
}
body[data-page="services"] .services-table tbody td {
background: #f3f8f6;
color: #324c48;
font-size: 13px;
padding: 14px 16px;
transition: 0.2s;
}
body[data-page="services"] .services-table tbody tr:nth-child(even) td {
background: #edf4f1;
}
body[data-page="services"] .services-table tbody tr:hover td {
background: #dff0ea;
}
body[data-page="services"] .services-table tbody tr:last-child td {
border-bottom: none;
}
body[data-page="services"] .col-ip {
width: 170px;
}
body[data-page="services"] .col-name {
width: 260px;
}
body[data-page="services"] .col-type {
width: 150px;
}
body[data-page="services"] .col-period {
width: 150px;
}
body[data-page="services"] .col-renew {
width: 150px;
}
body[data-page="services"] .col-status {
width: 140px;
}
body[data-page="services"] .col-actions {
width: 310px;
}
body[data-page="services"] th.col-ip, body[data-page="services"] td.col-ip {
direction: rtl;
text-align: right !important;
}
body[data-page="services"] .ip-text {
display: block;
width: 100%;
direction: ltr;
text-align: right;
color: #1f3d3a;
font-size: 14px;
font-weight: 900;
white-space: nowrap;
letter-spacing: 0.2px;
}
body[data-page="services"] .ip-pending {
direction: rtl;
text-align: right;
color: #7b938f;
font-size: 13px;
font-weight: 800;
}
body[data-page="services"] .service-name {
color: #1f3d3a;
font-size: 14px;
font-weight: 900;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body[data-page="services"] .service-name-sub {
display: block;
margin-top: 5px;
color: #6f8782;
font-size: 11px;
font-weight: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body[data-page="services"] .service-type, body[data-page="services"] .service-period, body[data-page="services"] .renew-date {
color: #3f5855;
font-size: 13px;
font-weight: 800;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body[data-page="services"] .renew-date {
color: #1f3d3a;
}
body[data-page="services"] .status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 13px;
border-radius: 999px;
font-size: 12px;
font-weight: bold;
min-width: 92px;
white-space: nowrap;
}
body[data-page="services"] .status-active {
background: #d9f2e6;
color: #1f7a58;
box-shadow: inset 0 0 0 1px rgba(31, 122, 88, 0.12);
}
body[data-page="services"] .status-suspended {
background: #f3d8d8;
color: #9b3939;
box-shadow: inset 0 0 0 1px rgba(155, 57, 57, 0.10);
}
body[data-page="services"] .status-ended {
background: #d7dedc;
color: #536865;
box-shadow: inset 0 0 0 1px rgba(83, 104, 101, 0.10);
}
body[data-page="services"] .status-pending {
background: #f3ead8;
color: #98723a;
box-shadow: inset 0 0 0 1px rgba(152, 114, 58, 0.10);
}
body[data-page="services"] .row-actions {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 7px;
flex-wrap: nowrap;
}
body[data-page="services"] .small-btn {
border: none;
border-radius: 11px;
padding: 8px 11px;
cursor: pointer;
font-size: 12px;
transition: 0.25s;
white-space: nowrap;
}
body[data-page="services"] .small-btn-main {
background: #1f3d3a;
color: #ffffff;
}
body[data-page="services"] .small-btn-main:hover {
background: #2f5d56;
}
body[data-page="services"] .small-btn-config {
background: #e7ddff;
color: #5b3c9d;
font-weight: bold;
}
body[data-page="services"] .small-btn-config:hover {
background: #d9c9ff;
color: #4a2f86;
}
body[data-page="services"] .small-btn-qr {
background: #dcecff;
color: #275f9b;
font-weight: bold;
}
body[data-page="services"] .small-btn-qr:hover {
background: #c7e0ff;
color: #1f4f82;
}
body[data-page="services"] .small-btn-cream {
background: #f3ead8;
color: #98723a;
font-weight: bold;
}
body[data-page="services"] .small-btn-cream:hover {
background: #eadfca;
}
body[data-page="services"] .small-btn-gray {
background: #d7dedc;
color: #536865;
font-weight: bold;
}
body[data-page="services"] .small-btn-gray:hover {
background: #cbd5d2;
}
body[data-page="services"] .mobile-services {
display: none;
flex-direction: column;
gap: 13px;
}
body[data-page="services"] .mobile-service-card {
background: #f3f8f6;
border: 1px solid #c5d3cf;
border-radius: 22px;
padding: 15px;
box-shadow: 0 10px 24px rgba(31, 61, 58, 0.06);
}
body[data-page="services"] .mobile-service-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid #d3dfdc;
}
body[data-page="services"] .mobile-ip {
direction: ltr;
text-align: right;
color: #1f3d3a;
font-size: 16px;
font-weight: 900;
}
body[data-page="services"] .mobile-service-name {
color: #1f3d3a;
font-size: 14px;
font-weight: 900;
line-height: 1.8;
margin-bottom: 10px;
}
body[data-page="services"] .mobile-service-name span {
display: block;
color: #6f8782;
font-size: 12px;
font-weight: normal;
}
body[data-page="services"] .mobile-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
margin-bottom: 13px;
}
body[data-page="services"] .mobile-info-item {
background: #edf4f1;
border: 1px solid #d3dfdc;
border-radius: 15px;
padding: 10px 11px;
}
body[data-page="services"] .mobile-info-item span {
display: block;
color: #78908b;
font-size: 11px;
margin-bottom: 6px;
}
body[data-page="services"] .mobile-info-item strong {
display: block;
color: #1f3d3a;
font-size: 13px;
font-weight: 800;
line-height: 1.7;
}
body[data-page="services"] .mobile-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
body[data-page="services"] .pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 18px;
flex-wrap: wrap;
}
body[data-page="services"] .page-btn {
min-width: 38px;
height: 38px;
border: none;
border-radius: 13px;
background: #d8e3e0;
color: #3f5855;
cursor: pointer;
font-weight: bold;
transition: 0.25s;
}
body[data-page="services"] .page-btn.active, body[data-page="services"] .page-btn:hover {
background: #1f3d3a;
color: #ffffff;
}
@media (max-width: 1200px){
body[data-page="services"] .summary-strip {
grid-template-columns: repeat(2, 1fr);
}
body[data-page="services"] .panel-header {
flex-direction: column;
}
body[data-page="services"] .panel-tools {
align-items: stretch;
width: 100%;
}
body[data-page="services"] .search-box {
width: 100%;
}
body[data-page="services"] .filter-tabs {
justify-content: flex-start;
}
}
@media (max-width: 850px){
body[data-page="services"] .app {
flex-direction: column;
padding: 12px;
}
body[data-page="services"] .sidebar {
width: 100%;
min-height: auto;
}
body[data-page="services"] .main {
border-radius: 26px;
padding: 16px;
}
body[data-page="services"] .topbar {
flex-direction: column;
align-items: flex-start;
}
body[data-page="services"] .user-box {
width: 100%;
}
body[data-page="services"] .services-hero h2 {
font-size: 22px;
}
body[data-page="services"] .summary-strip {
grid-template-columns: 1fr;
}
body[data-page="services"] .table-wrap {
display: none;
}
body[data-page="services"] .mobile-services {
display: flex;
}
body[data-page="services"] .mobile-info-grid {
grid-template-columns: 1fr;
}
body[data-page="services"] .mobile-actions .small-btn {
width: 100%;
}
body[data-page="services"] .btn {
width: 100%;
}
body[data-page="services"] .hero-actions {
flex-direction: column;
}
}
/* ================= transactions.html ================= */
body[data-page="transactions"] * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body[data-page="transactions"] {
font-family: Tahoma, Arial, sans-serif;
background: #d8e3e0;
color: #243b3a;
min-height: 100vh;
}
body[data-page="transactions"] a {
text-decoration: none;
}
body[data-page="transactions"] button, body[data-page="transactions"] input, body[data-page="transactions"] select {
font-family: Tahoma, Arial, sans-serif;
}
body[data-page="transactions"] .app {
display: flex;
min-height: 100vh;
padding: 18px;
gap: 18px;
}
body[data-page="transactions"] .sidebar {
width: 270px;
background: #1f3d3a;
border-radius: 30px;
padding: 24px 18px;
display: flex;
flex-direction: column;
min-height: calc(100vh - 36px);
box-shadow: 0 18px 45px rgba(31, 61, 58, 0.20);
flex-shrink: 0;
}
body[data-page="transactions"] .brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 34px;
padding: 0 6px;
}
body[data-page="transactions"] .brand-logo {
width: 48px;
height: 48px;
border-radius: 18px;
background: #d9f2e6;
color: #1f3d3a;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
flex-shrink: 0;
}
body[data-page="transactions"] .brand-text h2 {
font-size: 18px;
color: #ffffff;
margin-bottom: 5px;
letter-spacing: 0.5px;
}
body[data-page="transactions"] .brand-text span {
font-size: 12px;
color: #b9d7d1;
}
body[data-page="transactions"] .menu {
display: flex;
flex-direction: column;
gap: 9px;
}
body[data-page="transactions"] .menu-item {
color: #cfe2de;
padding: 13px 14px;
border-radius: 16px;
display: flex;
align-items: center;
gap: 11px;
font-size: 14px;
transition: 0.25s;
}
body[data-page="transactions"] .menu-item:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
body[data-page="transactions"] .menu-item.active {
background: #d9f2e6;
color: #1f3d3a;
font-weight: bold;
}
body[data-page="transactions"] .menu-icon {
width: 31px;
height: 31px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.10);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
body[data-page="transactions"] .menu-item.active .menu-icon {
background: #ffffff;
}
body[data-page="transactions"] .sidebar-footer {
margin-top: auto;
background: rgba(255, 255, 255, 0.08);
border-radius: 22px;
padding: 16px;
}
body[data-page="transactions"] .sidebar-footer-title {
color: #ffffff;
font-size: 13px;
font-weight: bold;
margin-bottom: 8px;
}
body[data-page="transactions"] .sidebar-footer p {
font-size: 12px;
color: #d8ebe7;
line-height: 1.9;
}
body[data-page="transactions"] .logout-btn {
margin-top: 14px;
width: 100%;
background: rgba(255, 255, 255, 0.10);
color: #ffffff;
border: none;
border-radius: 15px;
padding: 11px;
cursor: pointer;
transition: 0.25s;
}
body[data-page="transactions"] .logout-btn:hover {
background: rgba(255, 255, 255, 0.16);
}
body[data-page="transactions"] .main {
flex: 1;
min-width: 0;
background: #cfdcd8;
border-radius: 32px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 18px;
box-shadow: inset 0 0 0 1px rgba(31, 61, 58, 0.06);
}
body[data-page="transactions"] .topbar {
background: #e7efec;
border-radius: 28px;
padding: 20px 22px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 14px 35px rgba(31, 61, 58, 0.09);
border: 1px solid #c5d3cf;
gap: 16px;
}
body[data-page="transactions"] .page-title h1 {
font-size: 23px;
color: #1f3d3a;
margin-bottom: 8px;
}
body[data-page="transactions"] .page-title p {
font-size: 14px;
color: #647b76;
line-height: 1.9;
}
body[data-page="transactions"] .topbar-action {
background: #1f3d3a;
color: #ffffff;
border: none;
border-radius: 15px;
padding: 12px 16px;
cursor: pointer;
font-size: 13px;
font-weight: bold;
white-space: nowrap;
}
body[data-page="transactions"] .summary-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
body[data-page="transactions"] .summary-card {
background: #e7efec;
border: 1px solid #c5d3cf;
border-radius: 24px;
padding: 17px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 12px 30px rgba(31, 61, 58, 0.07);
}
body[data-page="transactions"] .summary-icon {
width: 44px;
height: 44px;
border-radius: 16px;
background: #1f3d3a;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
flex-shrink: 0;
}
body[data-page="transactions"] .summary-text span {
display: block;
font-size: 12px;
color: #6f8782;
margin-bottom: 7px;
}
body[data-page="transactions"] .summary-text strong {
display: block;
font-size: 16px;
color: #1f3d3a;
font-weight: 900;
white-space: nowrap;
}
body[data-page="transactions"] .panel {
background: #e7efec;
border-radius: 30px;
padding: 23px;
box-shadow: 0 14px 35px rgba(31, 61, 58, 0.08);
border: 1px solid #c5d3cf;
}
body[data-page="transactions"] .panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 15px;
margin-bottom: 18px;
}
body[data-page="transactions"] .panel-title {
font-size: 17px;
color: #1f3d3a;
font-weight: bold;
margin-bottom: 10px;
}
body[data-page="transactions"] .filters {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
gap: 10px;
align-items: center;
margin-bottom: 18px;
}
body[data-page="transactions"] .filter-field {
background: #d8e3e0;
border: 1px solid #c6d4d0;
border-radius: 16px;
padding: 11px 13px;
display: flex;
align-items: center;
gap: 8px;
}
body[data-page="transactions"] .filter-field input, body[data-page="transactions"] .filter-field select {
width: 100%;
border: none;
outline: none;
background: transparent;
color: #1f3d3a;
font-size: 13px;
}
body[data-page="transactions"] .filter-field input::placeholder {
color: #78908b;
}
body[data-page="transactions"] .filter-btn-submit {
border: none;
background: #1f3d3a;
color: #ffffff;
border-radius: 16px;
padding: 12px 16px;
cursor: pointer;
font-size: 13px;
font-weight: bold;
white-space: nowrap;
}
body[data-page="transactions"] .table-wrap {
width: 100%;
overflow-x: auto;
border-radius: 24px;
border: 1px solid #c5d3cf;
background: #f3f8f6;
box-shadow: 0 12px 30px rgba(31, 61, 58, 0.06);
}
body[data-page="transactions"] .transactions-table {
width: 100%;
min-width: 1050px;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
background: #f3f8f6;
}
body[data-page="transactions"] .transactions-table th, body[data-page="transactions"] .transactions-table td {
vertical-align: middle;
border-bottom: 1px solid #d3dfdc;
}
body[data-page="transactions"] .transactions-table thead th {
background: #1f3d3a;
color: #e9fff5;
font-size: 13px;
font-weight: 900;
padding: 15px 16px;
white-space: nowrap;
text-align: right;
}
body[data-page="transactions"] .transactions-table thead th:first-child {
border-top-right-radius: 22px;
}
body[data-page="transactions"] .transactions-table thead th:last-child {
border-top-left-radius: 22px;
}
body[data-page="transactions"] .transactions-table tbody td {
background: #f3f8f6;
color: #324c48;
font-size: 13px;
padding: 14px 16px;
transition: 0.2s;
}
body[data-page="transactions"] .transactions-table tbody tr:nth-child(even) td {
background: #edf4f1;
}
body[data-page="transactions"] .transactions-table tbody tr:hover td {
background: #dff0ea;
}
body[data-page="transactions"] .transactions-table tbody tr:last-child td {
border-bottom: none;
}
body[data-page="transactions"] .col-title {
width: 280px;
}
body[data-page="transactions"] .col-type {
width: 140px;
}
body[data-page="transactions"] .col-date {
width: 170px;
}
body[data-page="transactions"] .col-amount {
width: 160px;
}
body[data-page="transactions"] .col-balance {
width: 170px;
}
body[data-page="transactions"] .col-status {
width: 130px;
}
body[data-page="transactions"] .transaction-title strong {
display: block;
color: #1f3d3a;
font-size: 14px;
font-weight: 900;
margin-bottom: 5px;
}
body[data-page="transactions"] .transaction-title span {
display: block;
color: #78908b;
font-size: 11px;
line-height: 1.7;
}
body[data-page="transactions"] .type-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 90px;
padding: 7px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: bold;
white-space: nowrap;
}
body[data-page="transactions"] .type-plus {
background: #d9f2e6;
color: #1f7a58;
}
body[data-page="transactions"] .type-minus {
background: #f3d8d8;
color: #9b3939;
}
body[data-page="transactions"] .type-manual {
background: #dcecff;
color: #275f9b;
}
body[data-page="transactions"] .date-text {
color: #3f5855;
font-size: 13px;
font-weight: 800;
white-space: nowrap;
}
body[data-page="transactions"] .amount-text, body[data-page="transactions"] .balance-text {
direction: ltr;
text-align: right;
font-size: 14px;
font-weight: 900;
white-space: nowrap;
}
body[data-page="transactions"] .amount-plus {
color: #1f7a58;
}
body[data-page="transactions"] .amount-minus {
color: #9b3939;
}
body[data-page="transactions"] .balance-text {
color: #1f3d3a;
}
body[data-page="transactions"] .status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 86px;
padding: 7px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: bold;
white-space: nowrap;
}
body[data-page="transactions"] .status-success {
background: #d9f2e6;
color: #1f7a58;
}
body[data-page="transactions"] .status-pending {
background: #f3ead8;
color: #98723a;
}
body[data-page="transactions"] .status-failed {
background: #f3d8d8;
color: #9b3939;
}
body[data-page="transactions"] .mobile-transactions {
display: none;
flex-direction: column;
gap: 12px;
}
body[data-page="transactions"] .mobile-transaction-card {
background: #f3f8f6;
border: 1px solid #c5d3cf;
border-radius: 22px;
padding: 15px;
box-shadow: 0 10px 24px rgba(31, 61, 58, 0.06);
}
body[data-page="transactions"] .mobile-transaction-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px solid #d3dfdc;
}
body[data-page="transactions"] .mobile-transaction-top strong {
color: #1f3d3a;
font-size: 14px;
line-height: 1.8;
}
body[data-page="transactions"] .mobile-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
margin-bottom: 12px;
}
body[data-page="transactions"] .mobile-info-item {
background: #edf4f1;
border: 1px solid #d3dfdc;
border-radius: 15px;
padding: 10px 11px;
}
body[data-page="transactions"] .mobile-info-item span {
display: block;
color: #78908b;
font-size: 11px;
margin-bottom: 6px;
}
body[data-page="transactions"] .mobile-info-item strong {
display: block;
color: #1f3d3a;
font-size: 13px;
font-weight: 800;
line-height: 1.7;
}
body[data-page="transactions"] .mobile-note {
color: #78908b;
font-size: 12px;
line-height: 2;
}
body[data-page="transactions"] .pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 18px;
flex-wrap: wrap;
}
body[data-page="transactions"] .page-btn {
min-width: 38px;
height: 38px;
border: none;
border-radius: 13px;
background: #d8e3e0;
color: #3f5855;
cursor: pointer;
font-weight: bold;
transition: 0.25s;
}
body[data-page="transactions"] .page-btn.active, body[data-page="transactions"] .page-btn:hover {
background: #1f3d3a;
color: #ffffff;
}
@media (max-width: 1200px){
body[data-page="transactions"] .summary-strip {
grid-template-columns: repeat(2, 1fr);
}
body[data-page="transactions"] .filters {
grid-template-columns: 1fr 1fr;
}
body[data-page="transactions"] .filter-btn-submit {
grid-column: 1 / -1;
}
}
@media (max-width: 850px){
body[data-page="transactions"] .app {
flex-direction: column;
padding: 12px;
}
body[data-page="transactions"] .sidebar {
width: 100%;
min-height: auto;
}
body[data-page="transactions"] .main {
border-radius: 26px;
padding: 16px;
}
body[data-page="transactions"] .topbar {
flex-direction: column;
align-items: flex-start;
}
body[data-page="transactions"] .topbar-action {
width: 100%;
}
body[data-page="transactions"] .summary-strip {
grid-template-columns: 1fr;
}
body[data-page="transactions"] .filters {
grid-template-columns: 1fr;
}
body[data-page="transactions"] .table-wrap {
display: none;
}
body[data-page="transactions"] .mobile-transactions {
display: flex;
}
body[data-page="transactions"] .mobile-info-grid {
grid-template-columns: 1fr;
}
body[data-page="transactions"] .mobile-transaction-top {
flex-direction: column;
align-items: flex-start;
}
}
/* ================= wallet.html ================= */
body[data-page="wallet"] * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body[data-page="wallet"] {
font-family: Tahoma, Arial, sans-serif;
background: #d8e3e0;
color: #243b3a;
min-height: 100vh;
}
body[data-page="wallet"] a {
text-decoration: none;
}
body[data-page="wallet"] button, body[data-page="wallet"] input, body[data-page="wallet"] select {
font-family: Tahoma, Arial, sans-serif;
}
body[data-page="wallet"] .app {
display: flex;
min-height: 100vh;
padding: 18px;
gap: 18px;
}
body[data-page="wallet"] .sidebar {
width: 270px;
background: #1f3d3a;
border-radius: 30px;
padding: 24px 18px;
display: flex;
flex-direction: column;
min-height: calc(100vh - 36px);
box-shadow: 0 18px 45px rgba(31, 61, 58, 0.20);
flex-shrink: 0;
}
body[data-page="wallet"] .brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 34px;
padding: 0 6px;
}
body[data-page="wallet"] .brand-logo {
width: 48px;
height: 48px;
border-radius: 18px;
background: #d9f2e6;
color: #1f3d3a;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
flex-shrink: 0;
}
body[data-page="wallet"] .brand-text h2 {
font-size: 18px;
color: #ffffff;
margin-bottom: 5px;
letter-spacing: 0.5px;
}
body[data-page="wallet"] .brand-text span {
font-size: 12px;
color: #b9d7d1;
}
body[data-page="wallet"] .menu {
display: flex;
flex-direction: column;
gap: 9px;
}
body[data-page="wallet"] .menu-item {
color: #cfe2de;
padding: 13px 14px;
border-radius: 16px;
display: flex;
align-items: center;
gap: 11px;
font-size: 14px;
transition: 0.25s;
}
body[data-page="wallet"] .menu-item:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
body[data-page="wallet"] .menu-item.active {
background: #d9f2e6;
color: #1f3d3a;
font-weight: bold;
}
body[data-page="wallet"] .menu-icon {
width: 31px;
height: 31px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.10);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
body[data-page="wallet"] .menu-item.active .menu-icon {
background: #ffffff;
}
body[data-page="wallet"] .sidebar-footer {
margin-top: auto;
background: rgba(255, 255, 255, 0.08);
border-radius: 22px;
padding: 16px;
}
body[data-page="wallet"] .sidebar-footer-title {
color: #ffffff;
font-size: 13px;
font-weight: bold;
margin-bottom: 8px;
}
body[data-page="wallet"] .sidebar-footer p {
font-size: 12px;
color: #d8ebe7;
line-height: 1.9;
}
body[data-page="wallet"] .logout-btn {
margin-top: 14px;
width: 100%;
background: rgba(255, 255, 255, 0.10);
color: #ffffff;
border: none;
border-radius: 15px;
padding: 11px;
cursor: pointer;
transition: 0.25s;
}
body[data-page="wallet"] .logout-btn:hover {
background: rgba(255, 255, 255, 0.16);
}
body[data-page="wallet"] .main {
flex: 1;
min-width: 0;
background: #cfdcd8;
border-radius: 32px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 18px;
box-shadow: inset 0 0 0 1px rgba(31, 61, 58, 0.06);
}
body[data-page="wallet"] .topbar {
background: #e7efec;
border-radius: 28px;
padding: 20px 22px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 14px 35px rgba(31, 61, 58, 0.09);
border: 1px solid #c5d3cf;
gap: 16px;
}
body[data-page="wallet"] .page-title h1 {
font-size: 23px;
color: #1f3d3a;
margin-bottom: 8px;
}
body[data-page="wallet"] .page-title p {
font-size: 14px;
color: #647b76;
line-height: 1.9;
}
body[data-page="wallet"] .topbar-action {
background: #1f3d3a;
color: #ffffff;
border: none;
border-radius: 15px;
padding: 12px 16px;
cursor: pointer;
font-size: 13px;
font-weight: bold;
white-space: nowrap;
}
body[data-page="wallet"] .wallet-hero {
background:
linear-gradient(135deg, #21433f, #2f5d56),
radial-gradient(circle at left top, rgba(217, 242, 230, 0.25), transparent 40%);
border-radius: 30px;
padding: 28px;
color: #ffffff;
position: relative;
overflow: hidden;
box-shadow: 0 18px 42px rgba(31, 61, 58, 0.22);
}
body[data-page="wallet"] .wallet-hero::after {
content: "";
position: absolute;
width: 280px;
height: 280px;
border-radius: 50%;
background: rgba(217, 242, 230, 0.11);
left: -95px;
bottom: -120px;
}
body[data-page="wallet"] .wallet-hero-content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 360px;
gap: 20px;
align-items: center;
}
body[data-page="wallet"] .hero-label {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.12);
color: #d9f2e6;
padding: 7px 12px;
border-radius: 999px;
font-size: 12px;
margin-bottom: 16px;
}
body[data-page="wallet"] .hero-dot {
width: 8px;
height: 8px;
background: #80ed99;
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(128, 237, 153, 0.13);
}
body[data-page="wallet"] .wallet-hero h2 {
font-size: 26px;
line-height: 1.8;
margin-bottom: 10px;
}
body[data-page="wallet"] .wallet-hero p {
color: #cfe2de;
font-size: 14px;
line-height: 2;
}
body[data-page="wallet"] .balance-card {
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 26px;
padding: 22px;
backdrop-filter: blur(6px);
}
body[data-page="wallet"] .balance-card span {
display: block;
color: #d9f2e6;
font-size: 13px;
margin-bottom: 12px;
}
body[data-page="wallet"] .balance-card strong {
display: block;
color: #ffffff;
font-size: 30px;
font-weight: 900;
margin-bottom: 10px;
}
body[data-page="wallet"] .balance-card small {
display: block;
color: #cfe2de;
font-size: 12px;
line-height: 1.9;
}
body[data-page="wallet"] .layout-grid {
display: grid;
grid-template-columns: 1fr 350px;
gap: 18px;
align-items: flex-start;
}
body[data-page="wallet"] .panel {
background: #e7efec;
border-radius: 30px;
padding: 23px;
box-shadow: 0 14px 35px rgba(31, 61, 58, 0.08);
border: 1px solid #c5d3cf;
}
body[data-page="wallet"] .panel-title {
font-size: 17px;
color: #1f3d3a;
font-weight: bold;
margin-bottom: 17px;
}
body[data-page="wallet"] .amount-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 18px;
}
body[data-page="wallet"] .amount-option {
display: block;
cursor: pointer;
}
body[data-page="wallet"] .amount-option input {
display: none;
}
body[data-page="wallet"] .amount-option span {
display: block;
background: #f3f8f6;
border: 1px solid #d3dfdc;
border-radius: 18px;
padding: 15px 12px;
color: #1f3d3a;
font-size: 14px;
font-weight: 900;
text-align: center;
transition: 0.25s;
}
body[data-page="wallet"] .amount-option input:checked + span {
background: #1f3d3a;
color: #ffffff;
border-color: #1f3d3a;
box-shadow: 0 10px 22px rgba(31, 61, 58, 0.16);
}
body[data-page="wallet"] .custom-amount {
background: #f3f8f6;
border: 1px solid #d3dfdc;
border-radius: 22px;
padding: 16px;
margin-bottom: 18px;
}
body[data-page="wallet"] .custom-amount label {
display: block;
color: #1f3d3a;
font-size: 13px;
font-weight: bold;
margin-bottom: 10px;
}
body[data-page="wallet"] .custom-amount input {
width: 100%;
border: none;
outline: none;
background: #edf4f1;
border: 1px solid #d3dfdc;
border-radius: 16px;
padding: 13px 14px;
color: #1f3d3a;
font-size: 14px;
direction: ltr;
text-align: left;
font-weight: bold;
}
body[data-page="wallet"] .custom-amount small {
display: block;
color: #78908b;
font-size: 11px;
margin-top: 9px;
line-height: 1.9;
}
body[data-page="wallet"] .payment-methods {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 18px;
}
body[data-page="wallet"] .payment-option {
display: block;
cursor: pointer;
}
body[data-page="wallet"] .payment-option input {
display: none;
}
body[data-page="wallet"] .payment-option span {
display: block;
background: #f3f8f6;
border: 1px solid #d3dfdc;
border-radius: 18px;
padding: 14px;
color: #3f5855;
font-size: 13px;
font-weight: 800;
text-align: center;
transition: 0.25s;
}
body[data-page="wallet"] .payment-option input:checked + span {
background: #d9f2e6;
color: #1f7a58;
border-color: #b8dfc9;
}
body[data-page="wallet"] .charge-summary {
background: #f3f8f6;
border: 1px solid #d3dfdc;
border-radius: 22px;
padding: 16px;
margin-bottom: 18px;
}
body[data-page="wallet"] .summary-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid #d3dfdc;
color: #6f8782;
font-size: 13px;
}
body[data-page="wallet"] .summary-row:last-child {
border-bottom: none;
}
body[data-page="wallet"] .summary-row strong {
color: #1f3d3a;
font-size: 14px;
}
body[data-page="wallet"] .charge-btn {
width: 100%;
border: none;
border-radius: 18px;
background: #1f3d3a;
color: #ffffff;
padding: 14px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
transition: 0.25s;
}
body[data-page="wallet"] .charge-btn:hover {
background: #2f5d56;
}
body[data-page="wallet"] .side-panel {
background: #e7efec;
border-radius: 30px;
padding: 23px;
box-shadow: 0 14px 35px rgba(31, 61, 58, 0.08);
border: 1px solid #c5d3cf;
position: sticky;
top: 18px;
}
body[data-page="wallet"] .mini-stat {
background: #f3f8f6;
border: 1px solid #d3dfdc;
border-radius: 22px;
padding: 16px;
margin-bottom: 12px;
}
body[data-page="wallet"] .mini-stat span {
display: block;
color: #78908b;
font-size: 12px;
margin-bottom: 8px;
}
body[data-page="wallet"] .mini-stat strong {
display: block;
color: #1f3d3a;
font-size: 17px;
font-weight: 900;
}
body[data-page="wallet"] .notice-box {
background: #f3ead8;
border: 1px solid #e2d2b5;
color: #876535;
border-radius: 18px;
padding: 14px;
font-size: 12px;
line-height: 2;
margin-top: 14px;
}
body[data-page="wallet"] .transactions-panel {
background: #e7efec;
border-radius: 30px;
padding: 23px;
box-shadow: 0 14px 35px rgba(31, 61, 58, 0.08);
border: 1px solid #c5d3cf;
}
body[data-page="wallet"] .transactions-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
body[data-page="wallet"] .transactions-header h3 {
color: #1f3d3a;
font-size: 17px;
font-weight: bold;
}
body[data-page="wallet"] .view-all-btn {
border: none;
background: #d8e3e0;
color: #1f3d3a;
border-radius: 14px;
padding: 10px 14px;
cursor: pointer;
font-size: 12px;
font-weight: bold;
}
body[data-page="wallet"] .transaction-list {
display: flex;
flex-direction: column;
gap: 10px;
}
body[data-page="wallet"] .transaction-item {
background: #f3f8f6;
border: 1px solid #d3dfdc;
border-radius: 20px;
padding: 14px;
display: grid;
grid-template-columns: 1fr 150px 130px;
gap: 12px;
align-items: center;
}
body[data-page="wallet"] .transaction-info strong {
display: block;
color: #1f3d3a;
font-size: 14px;
margin-bottom: 6px;
}
body[data-page="wallet"] .transaction-info span {
display: block;
color: #78908b;
font-size: 12px;
}
body[data-page="wallet"] .transaction-date {
color: #3f5855;
font-size: 13px;
font-weight: 800;
white-space: nowrap;
}
body[data-page="wallet"] .transaction-amount {
text-align: left;
direction: ltr;
font-size: 14px;
font-weight: 900;
white-space: nowrap;
}
body[data-page="wallet"] .amount-plus {
color: #1f7a58;
}
body[data-page="wallet"] .amount-minus {
color: #9b3939;
}
@media (max-width: 1200px){
body[data-page="wallet"] .wallet-hero-content, body[data-page="wallet"] .layout-grid {
grid-template-columns: 1fr;
}
body[data-page="wallet"] .side-panel {
position: static;
}
}
@media (max-width: 850px){
body[data-page="wallet"] .app {
flex-direction: column;
padding: 12px;
}
body[data-page="wallet"] .sidebar {
width: 100%;
min-height: auto;
}
body[data-page="wallet"] .main {
border-radius: 26px;
padding: 16px;
}
body[data-page="wallet"] .topbar {
flex-direction: column;
align-items: flex-start;
}
body[data-page="wallet"] .topbar-action {
width: 100%;
}
body[data-page="wallet"] .wallet-hero h2 {
font-size: 22px;
}
body[data-page="wallet"] .balance-card strong {
font-size: 25px;
}
body[data-page="wallet"] .amount-grid, body[data-page="wallet"] .payment-methods {
grid-template-columns: 1fr;
}
body[data-page="wallet"] .transaction-item {
grid-template-columns: 1fr;
}
body[data-page="wallet"] .transaction-amount {
text-align: right;
direction: rtl;
}
body[data-page="wallet"] .transactions-header {
flex-direction: column;
align-items: flex-start;
}
body[data-page="wallet"] .view-all-btn {
width: 100%;
}
}